/**
 * ============================================================
 *  LA PLATA FARMACIAS — Hoja de Estilos Global
 * ============================================================
 *  Archivo : lpfn-custom.css
 *  Versión : 2.0.0
 *  Descripción: CSS centralizado y consolidado para todo el
 *               sitio laplatafarmacias.com. Reemplaza los bloques
 *               de estilos embebidos en páginas individuales y
 *               el CSS adicional del Customizer de WordPress.
 *
 *  Para activar, encolar desde functions.php:
 *    wp_enqueue_style( 'lpfn-custom',
 *      get_template_directory_uri() . '/lpfn-custom.css',
 *      [], '2.0.0' );
 *
 *  Índice de secciones
 *  ────────────────────────────────────────────────────────────
 *  01. VARIABLES — Design Tokens (colores, tamaños, tipografía)
 *  02. KADENCE / WORDPRESS — Overrides y correcciones globales
 *  03. RESET & BASE
 *  04. TOPBAR — Barra superior verde
 *  05. HEADER & NAVEGACIÓN
 *  06. HAMBURGER MENU (menú móvil)
 *  07. ANIMACIONES & EFECTOS DE GLOW
 *  08. HERO — Página de Inicio
 *  09. COUNTDOWN — Contador de cambio de turno
 *  10. MAPA CARD — Mapa embebido en el hero
 *  11. BARRA DE FEATURES
 *  12. SECCIÓN FARMACIAS DE TURNO
 *  13. TARJETAS DE FARMACIA (diseño glassmorphism)
 *  14. SECCIÓN PROMOCIONES (carousel)
 *  15. BUSCADOR DE FARMACIAS
 *  16. MAPA INTERACTIVO (sección dedicada)
 *  17. SECCIÓN SERVICIOS
 *  18. FOOTER
 *  19. SCROLL TO TOP
 *  20. NOTICIAS — Hero
 *  21. NOTICIAS — Grid y tarjetas
 *  22. RESPONSIVE — Tablet  (≤ 900px)
 *  23. RESPONSIVE — Mobile  (≤ 768px)
 *  24. RESPONSIVE — Small   (≤ 600px / 580px)
 *  25. RESPONSIVE — XSmall  (≤ 480px)
 * ============================================================
 */


/* ============================================================
   01. VARIABLES — Design Tokens
   ============================================================
   Todos los valores de color, tipografía y espaciado están
   centralizados aquí. Para cambiar un color en todo el sitio,
   solo editá este bloque.
   ============================================================ */

:root {
  /* Paleta principal */
  --lpfn-green:          #8fc045;   /* Verde principal */
  --lpfn-green-dark:     #6da030;   /* Verde hover / gradiente */
  --lpfn-green-alpha:    rgba(143, 192, 69, 0.2);
  --lpfn-navy:           #0f2240;   /* Azul marino oscuro (fondos) */
  --lpfn-navy-mid:       #1a2035;   /* Texto principal oscuro */
  --lpfn-navy-link:      #1a2d5a;   /* Color links activos */
  --lpfn-blue-mid:       #1a3a6b;   /* Gradiente hero */
  --lpfn-blue-light:     #1a4a6b;   /* Gradiente hero claro */

  /* Texto y grises */
  --lpfn-text-muted:     #a8bfd8;   /* Texto sobre fondos oscuros */
  --lpfn-text-grey:      #6b7280;   /* Texto secundario (fondos claros) */
  --lpfn-text-nav:       #4a5568;   /* Links de navegación (estado normal) */
  --lpfn-text-footer:    #7a9ab8;   /* Texto del footer */

  /* Bordes y fondos */
  --lpfn-border:         #e2e8f0;   /* Borde estándar */
  --lpfn-bg-light:       #f8fafb;   /* Fondo secciones claras */
  --lpfn-white:          #ffffff;

  /* Tipografía */
  --lpfn-font:           'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Layout */
  --lpfn-container:      1100px;    /* Ancho máximo del contenido interno */
  --lpfn-topbar-h:       40px;      /* Altura de la topbar */

  /* Border radius */
  --lpfn-radius-sm:      8px;
  --lpfn-radius-md:      14px;
  --lpfn-radius-lg:      16px;
  --lpfn-radius-xl:      20px;
}


/* ============================================================
   02. KADENCE / WORDPRESS — Overrides y correcciones globales
   ============================================================
   Oculta elementos nativos del tema Kadence que son reemplazados
   por el diseño personalizado (topbar, header, footer propios).
   También libera el contenedor de Kadence para que el contenido
   ocupe el 100% del ancho en las páginas personalizadas.
   ============================================================ */

/* Oculta el header y admin bar nativos de Kadence/WordPress */
#masthead,
.site-header        { display: none !important; }
#wpadminbar         { display: none !important; }
html                { margin-top: 0 !important; }
body                { margin-top: 0 !important; padding-top: 0 !important; }

/* Full-width: libera el contenedor de Kadence en páginas con diseño propio.
   Aplica a la página de inicio (page-id-32) y a noticias (page-id-930). */
.page-id-32  .content-container.site-container,
.page-id-930 .content-container.site-container,
.home        .content-container.site-container {
  max-width: 100% !important;
  padding:   0    !important;
  margin:    0    !important;
  width:     100% !important;
}

.page-id-32  .entry-content-wrap,
.page-id-930 .entry-content-wrap,
.home        .entry-content-wrap {
  padding: 0 !important;
}

.page-id-32  .content-wrap,
.page-id-32  .site-main,
.page-id-32  .entry-content,
.page-id-32  .single-content,
.page-id-930 .content-wrap,
.page-id-930 .site-main,
.page-id-930 .entry-content,
.page-id-930 .single-content,
.home        .content-wrap,
.home        .site-main,
.home        .entry-content {
  max-width: 100% !important;
  padding:   0    !important;
  margin:    0    !important;
}

/* Fondo transparente en el área de contenido para no pisar los propios */
.entry-content,
.page-content,
.site-main,
.content-area,
.site-content {
  background: transparent !important;
}


/* ============================================================
   03. RESET & BASE
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin:     0;
  padding:    0;
}

/* Wrapper principal de todo el contenido del sitio.
   Todas las clases .lpfn-* son hijas de este wrapper. */
.lpfn {
  font-family: var(--lpfn-font);
  color:       var(--lpfn-navy-mid);
  -webkit-font-smoothing: antialiased;
}

.lpfn a            { text-decoration: none; }
.lpfn button       { cursor: pointer; border: none; background: none; font-family: inherit; }


/* ============================================================
   04. TOPBAR — Barra superior verde
   ============================================================
   Barra fija en el tope de la ventana con información de
   disponibilidad y ubicación del sitio.
   ============================================================ */

.lpfn-topbar {
  background:  var(--lpfn-green);
  height:      var(--lpfn-topbar-h);
  display:     flex;
  align-items: center;
  position:    fixed !important;
  top:         0     !important;
  left:        0     !important;
  width:       100%  !important;
  z-index:     1001  !important;
  padding:     0 max(16px, calc((100% - var(--lpfn-container)) / 2));
}

.lpfn-topbar-inner {
  width:           100%;
  display:         flex;
  justify-content: space-between;
  align-items:     center;
}

.lpfn-topbar-inner span {
  display:        flex;
  align-items:    center;
  gap:            7px;
  color:          var(--lpfn-white);
  font-size:      0.78rem;
  font-weight:    600;
  letter-spacing: 0.03em;
}

.lpfn-topbar-inner span svg {
  width:             15px;
  height:            15px;
  flex-shrink:       0;
  stroke:            var(--lpfn-white);
  fill:              none;
  stroke-width:      2;
  stroke-linecap:    round;
  stroke-linejoin:   round;
}


/* ============================================================
   05. HEADER & NAVEGACIÓN
   ============================================================
   Header fijo posicionado debajo de la topbar, con logo a la
   izquierda y navegación a la derecha.
   ============================================================ */

.lpfn-header {
  background:      var(--lpfn-white);
  padding:         0 max(16px, calc((100% - var(--lpfn-container)) / 2));
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  border-bottom:   1px solid #e8edf2;
  box-shadow:      0 1px 8px rgba(0, 0, 0, 0.06);
  height:          80px;
  position:        fixed !important;
  top:             var(--lpfn-topbar-h) !important;
  left:            0                   !important;
  width:           100%                !important;
  z-index:         1000                !important;
}

.lpfn-header-top {
  display:     flex;
  align-items: center;
}

/* Logo */
.lpfn-logo {
  display:         flex;
  align-items:     center;
  gap:             10px;
  text-decoration: none;
}

.lpfn-logo img       { height: 56px !important; width: auto !important; }

.lpfn-logo-text      { font-size: 1.4rem; font-weight: 700; color: var(--lpfn-navy-link); }
.lpfn-logo-text span { color: var(--lpfn-green); }

/* Acciones del header (botón admin, etc.) */
.lpfn-header-actions { display: flex; align-items: center; gap: 10px; }

.lpfn-btn-admin {
  border:        1.5px solid var(--lpfn-navy-link);
  color:         var(--lpfn-navy-link);
  border-radius: var(--lpfn-radius-sm);
  padding:       5px 14px;
  font-size:     0.82rem;
  font-weight:   600;
  transition:    all 0.2s;
}
.lpfn-btn-admin:hover { background: var(--lpfn-navy-link); color: var(--lpfn-white); }

/* Navegación principal */
.lpfn-nav {
  display:         flex;
  align-items:     center;
  justify-content: flex-end;
  gap:             36px;
}

.lpfn-nav a {
  font-size:      0.82rem;
  font-weight:    600;
  letter-spacing: 0.05em;
  color:          var(--lpfn-text-nav);
  padding:        4px 0;
  border-bottom:  2px solid transparent;
  transition:     color 0.2s, border-color 0.2s;
}

.lpfn-nav a:hover,
.lpfn-nav a.active {
  color:              var(--lpfn-navy-link);
  border-bottom-color: var(--lpfn-green);
}


/* ============================================================
   06. HAMBURGER MENU (menú móvil)
   ============================================================ */

.lpfn-hamburger {
  display:         none;      /* Visible sólo en mobile (ver responsive) */
  flex-direction:  column;
  justify-content: center;
  gap:             5px;
  background:      none;
  border:          none;
  cursor:          pointer;
  padding:         4px;
  margin-left:     auto;
}

.lpfn-hamburger span {
  display:       block;
  width:         24px;
  height:        2px;
  background:    var(--lpfn-navy-link);
  border-radius: 2px;
  transition:    all 0.3s;
}

/* Animación de "X" al abrir */
.lpfn-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.lpfn-hamburger.open span:nth-child(2) { opacity: 0; }
.lpfn-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ============================================================
   07. ANIMACIONES & EFECTOS DE GLOW
   ============================================================ */

/* Pulso del punto indicador verde (usado en badges y secciones) */
@keyframes pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%       { transform: scale(1.4); opacity: 0.6; }
}

/* Rotación continua (ícono sparkle en el hero badge) */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Glow pulsante animado (efecto de profundidad en secciones oscuras) */
@keyframes lpf-glow-pulse {
  0%   { opacity: 0.08; transform: scale(0.92); }
  50%  { opacity: 0.32; transform: scale(1.08); }
  100% { opacity: 0.08; transform: scale(0.92); }
}

/* Ticker de noticias (scrolling horizontal) */
@keyframes ticker-scroll {
  0%   { transform: translateX(100vw); }
  100% { transform: translateX(-100%); }
}

/* Elemento de glow: círculo difuminado de fondo */
.lpf-glow {
  position:       absolute;
  width:          384px;
  height:         384px;
  border-radius:  50%;
  background:     radial-gradient(70.71% 70.71% at 50% 50%, var(--lpfn-green) 0%, rgba(0, 0, 0, 0) 70%);
  filter:         blur(64px);
  pointer-events: none;
  z-index:        0;
  opacity:        0.08;
  will-change:    opacity, transform;
}

/* Posiciones predefinidas de los glows */
.lpf-glow-tl { top: 50px;   left: -80px;  animation: lpf-glow-pulse 5s ease-in-out infinite; }
.lpf-glow-br { bottom: -80px; right: -80px; animation: lpf-glow-pulse 5s ease-in-out 2.5s infinite backwards; }

/* Glow dentro de la sección de turnos */
.lpf-turno-section .lpf-glow-tl { top: -100px !important; left: -80px !important; }
.lpf-turno-section .lpf-glow-br { bottom: -100px !important; right: -80px !important; }


/* ============================================================
   08. HERO — Página de Inicio
   ============================================================
   Sección principal con gradiente, título, countdown y mapa.
   ============================================================ */

.lpfn-hero {
  background: linear-gradient(135deg, var(--lpfn-navy) 0%, var(--lpfn-blue-mid) 50%, var(--lpfn-blue-light) 100%);
  padding:    244px 32px 70px;
  display:    flex;
  justify-content: center;
  position:   relative;
  overflow:   hidden;
}

/* Asegura que el contenido quede por encima de los glows */
.lpfn-hero > div:not(.lpf-glow),
.lpf-hero  > *:not(.lpf-glow) { position: relative; z-index: 1; }

.lpfn-hero-inner {
  max-width:   var(--lpfn-container);
  width:       100%;
  margin:      0 auto;
  display:     flex;
  align-items: center;
  gap:         48px;
}

.lpfn-hero-left  { flex: 1; min-width: 0; }
.lpfn-hero-right { flex: 0 0 600px; max-width: 600px; }

/* Badge "VER FARMACIAS DE TURNO HOY" */
.lpfn-hero-badge {
  display:       inline-flex;
  align-items:   center;
  gap:           7px;
  background:    rgba(255, 255, 255, 0.1);
  border:        1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--lpfn-radius-xl);
  padding:       8px 20px;
  color:         #d0e8ff;
  font-size:     0.95rem;
  font-weight:   500;
  margin-bottom: 20px;
  cursor:        pointer;
  transition:    transform 0.2s ease;
}
.lpfn-hero-badge:hover { transform: scale(1.07); }

.lpfn-hero-badge-dot {
  width:         8px;
  height:        8px;
  background:    var(--lpfn-green);
  border-radius: 50%;
  animation:     pulse 2s infinite;
}

.lpfn-badge-sparkle {
  animation:  spin 3s linear infinite;
  flex-shrink: 0;
  opacity:    0.9;
}

/* Título H1 del hero */
.lpfn-hero h1 {
  font-size:     clamp(2.2rem, 5.5vw, 5rem);
  font-weight:   800;
  color:         var(--lpfn-white);
  line-height:   1.05;
  margin-top:    50px;
  margin-bottom: 18px;
}
.lpfn-hero h1 .green { color: var(--lpfn-green); }

/* Descripción debajo del h1 */
.lpfn-hero-desc {
  color:         var(--lpfn-text-muted);
  font-size:     0.95rem;
  line-height:   1.6;
  margin-bottom: 32px;
  max-width:     420px;
}

/* Subtítulo alternativo (clase .lpf-hero-sub del hero antiguo) */
.lpf-hero-sub {
  font-size:   1.1rem  !important;
  font-weight: 300     !important;
  line-height: 1.6     !important;
  color:       rgba(255, 255, 255, 0.9) !important;
  max-width:   727px   !important;
}


/* ============================================================
   09. COUNTDOWN — Contador de cambio de turno
   ============================================================
   Widget que muestra el tiempo restante hasta el próximo
   cambio de guardia farmacéutica.
   ============================================================ */

.lpf-countdown-box {
  background:    linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1));
  border:        1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--lpfn-radius-xl);
  max-width:     525px;
  padding:       24px 0 20px;
}

.lpf-countdown-label {
  color:          rgba(255, 255, 255, 0.7);
  font-size:      12px;
  font-weight:    600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  text-align:     center;
  margin-bottom:  18px;
}

.lpf-countdown-nums {
  display:         flex;
  padding:         0 48px;
  justify-content: center;
  align-items:     center;
  gap:             12px;
}

.lpf-cd-block {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            10px;
}

.lpf-cd-card {
  width:           110px;
  height:          96px;
  background:      var(--lpfn-white);
  border-radius:   12px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  box-shadow:      0 4px 20px rgba(0, 0, 0, 0.22);
}

.lpf-cd-num {
  font-size:            58px;
  font-weight:          900;
  line-height:          1;
  color:                #1b3a5c;
  font-variant-numeric: tabular-nums;
  display:              block;
}

.lpf-cd-unit {
  color:          rgba(255, 255, 255, 0.75);
  font-size:      11px;
  font-weight:    700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.lpf-cd-sep {
  color:       rgba(255, 255, 255, 0.35);
  font-size:   44px;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 26px;
  align-self:  center;
}


/* ============================================================
   10. MAPA CARD — Mapa embebido en el hero
   ============================================================
   Tarjeta con el mapa de Leaflet y overlay de información
   del turno actual.
   ============================================================ */

.lpf-map-card {
  border-radius: var(--lpfn-radius-lg);
  overflow:      hidden;
  box-shadow:    0 24px 64px rgba(0, 0, 0, 0.5);
  border:        1px solid rgba(255, 255, 255, 0.1);
  height:        420px !important;
  position:      relative;
  display:       block !important;
}

#lpf-map {
  width:      100%;
  height:     100% !important;
  flex:       none !important;
  min-height: unset !important;
  margin:     0 !important;
}

/* Overlay inferior: nombre y cantidad de farmacias de turno */
.lpf-turno-overlay {
  position:        absolute;
  bottom:          16px;
  left:            16px;
  right:           16px;
  height:          64px;
  padding:         0 16px;
  display:         flex;
  align-items:     center;
  gap:             12px;
  border-radius:   var(--lpfn-radius-md);
  background:      rgba(255, 255, 255, 0.95);
  box-shadow:      0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  z-index:         1000;
  pointer-events:  none;
}

.lpf-turno-icon-wrap {
  width:           48px;
  height:          48px;
  border-radius:   50%;
  background:      #e8f3d6;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}

.lpf-turno-texts   { display: flex; flex-direction: column; gap: 2px; }
.lpf-turno-title   { color: #101828; font-size: 16px; font-weight: 600; line-height: 24px; }
.lpf-turno-title span,
#lpf-turno-count   { color: #101828 !important; }
.lpf-turno-sub     { color: #4a5565; font-size: 14px; font-weight: 400; line-height: 20px; }


/* ============================================================
   11. BARRA DE FEATURES
   ============================================================
   Grilla de 4 características destacadas del sitio, sobre
   fondo verde.
   ============================================================ */

.lpfn-features {
  background: var(--lpfn-green);
  padding:    44px 32px;
}

.lpfn-features-inner {
  max-width:             var(--lpfn-container);
  margin:                0 auto;
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   24px;
  text-align:            center;
}

.lpfn-feature-icon {
  display:         flex;
  width:           80px;
  height:          80px;
  justify-content: center;
  align-items:     center;
  border-radius:   var(--lpfn-radius-lg);
  border:          1px solid rgba(255, 255, 255, 0.3);
  background:      rgba(255, 255, 255, 0.15);
  box-shadow:      0 25px 50px -12px rgba(0, 0, 0, 0.25);
  margin:          0 auto 16px;
  flex-shrink:     0;
}

.lpfn-feature-icon svg { width: 26px; height: 26px; stroke: var(--lpfn-white); fill: none; stroke-width: 1.8; }

.lpfn-feature-title { font-size: 0.95rem; font-weight: 700; color: var(--lpfn-navy-link); margin-bottom: 5px; }
.lpfn-feature-desc  { font-size: 0.8rem;  color: rgba(255, 255, 255, 0.85); line-height: 1.4; }


/* ============================================================
   12. SECCIÓN FARMACIAS DE TURNO
   ============================================================
   Lista de farmacias en guardia con detalle de dirección,
   horario y botón "Cómo llegar".
   ============================================================ */

.lpfn-onduty {
  background: linear-gradient(180deg, var(--lpfn-navy) 0%, var(--lpfn-blue-mid) 100%);
  padding:    82px 32px 64px;
  position:   relative;
  overflow:   hidden;
}

.lpfn-onduty-inner,
.lpf-turno-inner {
  max-width: var(--lpfn-container);
  margin:    0 auto;
  position:  relative;
  z-index:   1;
}

/* Badge de sección (ej: "● En turno ahora") */
.lpfn-section-badge {
  display:         flex;
  align-items:     center;
  gap:             8px;
  background:      rgba(255, 255, 255, 0.1);
  border:          1px solid rgba(255, 255, 255, 0.15);
  border-radius:   var(--lpfn-radius-xl);
  padding:         6px 16px;
  color:           #d0e8ff;
  font-size:       0.8rem;
  font-weight:     500;
  margin:          0 auto 16px;
  width:           fit-content;
}

.lpfn-section-badge .dot {
  width:         8px;
  height:        8px;
  background:    var(--lpfn-green);
  border-radius: 50%;
  animation:     pulse 2s ease-in-out infinite;
}

/* Badge en la sección de turno (hereda del turno section) */
.lpf-turno-section .lpf-hero-badge {
  background: rgba(255, 255, 255, 0.08) !important;
  border:     1px solid rgba(255, 255, 255, 0.15) !important;
  color:      var(--lpfn-white) !important;
}

/* Títulos de sección sobre fondos oscuros */
.lpfn-section-title {
  font-size:   clamp(2.6rem, 4.2vw, 3.8rem);
  font-weight: 900;
  color:       var(--lpfn-white);
  margin-top:  1.1em;
  margin-bottom: 8px;
  line-height: 1.15;
  text-align:  center;
}
.lpfn-section-title .green { color: var(--lpfn-green); }

.lpfn-section-subtitle { color: var(--lpfn-text-muted); font-size: 0.95rem; margin-bottom: 36px; text-align: center; }

/* Grilla de tarjetas de farmacia */
.lpfn-pharmacy-cards {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   20px;
  margin-bottom:         32px;
}

.lpfn-pharmacy-card {
  background: rgba(255, 255, 255, 0.07);
  border:     1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--lpfn-radius-md);
  padding:    22px;
  position:   relative;
  transition: transform 0.2s, background 0.2s;
}
.lpfn-pharmacy-card:hover { transform: translateY(-3px); background: rgba(255, 255, 255, 0.1); }

.lpfn-pharmacy-card-header {
  display:         flex;
  justify-content: space-between;
  align-items:     flex-start;
  margin-bottom:   12px;
}

.lpfn-pharmacy-name  { font-size: 1rem; font-weight: 700; color: var(--lpfn-white); }

.lpfn-pharmacy-plus {
  width:           36px;
  height:          36px;
  background:      rgba(122, 182, 72, 0.2);
  border:          1.5px solid var(--lpfn-green);
  border-radius:   var(--lpfn-radius-sm);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}
.lpfn-pharmacy-plus svg { width: 18px; height: 18px; stroke: var(--lpfn-green); stroke-width: 2.5; fill: none; }

/* Badge "de turno" en cada tarjeta */
.lpfn-badge-turno {
  display:       inline-flex;
  align-items:   center;
  gap:           5px;
  background:    rgba(122, 182, 72, 0.2);
  color:         var(--lpfn-green);
  border-radius: var(--lpfn-radius-xl);
  padding:       3px 10px;
  font-size:     0.72rem;
  font-weight:   600;
  margin-bottom: 14px;
}
.lpfn-badge-turno::before {
  content:       '';
  width:         6px;
  height:        6px;
  background:    var(--lpfn-green);
  border-radius: 50%;
}

/* Filas de detalle (dirección, teléfono, horario) */
.lpfn-pharmacy-detail {
  display:     flex;
  align-items: flex-start;
  gap:         7px;
  color:       var(--lpfn-text-muted);
  font-size:   0.83rem;
  margin-bottom: 8px;
  line-height: 1.4;
}
.lpfn-pharmacy-detail svg { width: 14px; height: 14px; stroke: var(--lpfn-green); fill: none; stroke-width: 2; flex-shrink: 0; margin-top: 2px; }

/* Botón "Cómo llegar" */
.lpfn-btn-como-llegar {
  width:           100%;
  background:      var(--lpfn-green);
  color:           var(--lpfn-white);
  border-radius:   var(--lpfn-radius-sm);
  padding:         10px;
  font-size:       0.85rem;
  font-weight:     600;
  margin-top:      14px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             6px;
  transition:      background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.lpfn-btn-como-llegar:hover {
  transform:  translateY(-2px);
  box-shadow: 0 6px 18px rgba(122, 182, 72, 0.45);
}
.lpfn-btn-como-llegar svg { width: 14px; height: 14px; stroke: var(--lpfn-white); fill: none; stroke-width: 2.5; }

/* Caja informativa (ej: horario de cambio de turno) */
.lpfn-info-box {
  background:  rgba(255, 255, 255, 0.07);
  border:      1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--lpfn-radius-md);
  padding:     24px 28px;
  display:     flex;
  gap:         20px;
  align-items: flex-start;
}

.lpfn-info-box-icon {
  width:           44px;
  height:          44px;
  background:      rgba(122, 182, 72, 0.2);
  border-radius:   10px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}
.lpfn-info-box-icon svg { width: 22px; height: 22px; stroke: var(--lpfn-green); fill: none; stroke-width: 2; }

.lpfn-info-box-title   { font-size: 1rem;   font-weight: 700;  color: var(--lpfn-white);      margin-bottom: 7px; }
.lpfn-info-box-text    { color: var(--lpfn-text-muted); font-size: 0.87rem; line-height: 1.6; margin-bottom: 14px; }
.lpfn-info-box-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Botón outline (borde verde) */
.lpfn-btn-outline {
  display:       inline-flex;
  align-items:   center;
  gap:           6px;
  border:        1.5px solid var(--lpfn-green);
  color:         var(--lpfn-green);
  border-radius: var(--lpfn-radius-sm);
  padding:       8px 16px;
  font-size:     0.82rem;
  font-weight:   600;
  transition:    all 0.2s;
}
.lpfn-btn-outline:hover { background: var(--lpfn-green); color: var(--lpfn-white); }
.lpfn-btn-outline svg   { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }

/* Estado de carga / spinner */
.lpfn-loading {
  text-align:      center;
  color:           var(--lpfn-green);
  font-size:       0.9rem;
  padding:         20px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             8px;
}

.lpfn-spinner {
  width:         16px;
  height:        16px;
  border:        2px solid var(--lpfn-border);
  border-top-color: var(--lpfn-green);
  border-radius: 50%;
  animation:     spin 0.8s linear infinite;
}


/* ============================================================
   13. TARJETAS DE FARMACIA — Diseño glassmorphism
   ============================================================
   Versión rediseñada con efecto vidrio para la lista de
   farmacias de turno. Clases con prefijo .lpf-ph-*.
   ============================================================ */

.lpf-ph-card {
  background:           rgba(255, 255, 255, 0.06) !important;
  border:               1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow:           0 4px 24px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  backdrop-filter:      blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-radius:        var(--lpfn-radius-lg) !important;
  transition:           all 0.3s ease !important;
}

.lpf-ph-card:hover {
  background:  linear-gradient(135deg, rgba(143, 192, 69, 0.12) 0%, rgba(27, 58, 92, 0.35) 100%) !important;
  border-color: rgba(143, 192, 69, 0.35) !important;
  box-shadow:  0 14px 40px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(143, 192, 69, 0.2) !important;
  transform:   translateY(-5px) !important;
}

/* Nombre de la farmacia */
.lpf-ph-name {
  color:       var(--lpfn-white) !important;
  font-weight: 700 !important;
}

/* Botón "+" verde */
.lpf-ph-plus {
  background:    linear-gradient(135deg, var(--lpfn-green) 0%, var(--lpfn-green-dark) 100%) !important;
  box-shadow:    0 3px 10px rgba(143, 192, 69, 0.4) !important;
  border-radius: 10px !important;
  color:         var(--lpfn-white) !important;
}

/* Badge "de turno" — versión sólida verde */
.lpf-ph-badge-turno {
  background:  linear-gradient(135deg, var(--lpfn-green) 0%, var(--lpfn-green-dark) 100%) !important;
  color:       var(--lpfn-white) !important;
  border:      none !important;
  font-weight: 600 !important;
}

.lpf-ph-badge-dot2 {
  background: rgba(255, 255, 255, 0.8) !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3) !important;
}

/* Filas de información (dirección, teléfono) */
.lpf-ph-row {
  background:    rgba(255, 255, 255, 0.05) !important;
  border-radius: var(--lpfn-radius-sm) !important;
  padding:       10px 12px !important;
  border:        1px solid rgba(255, 255, 255, 0.08) !important;
}

.lpf-ph-row-addr,
.lpf-ph-row-tel {
  color:     rgba(255, 255, 255, 0.9) !important;
  font-size: 14px !important;
}

/* Íconos SVG inline (reemplaza emojis) */
.lpf-ph-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 18px !important; height: 18px !important; flex-shrink: 0 !important; }
.lpf-ph-icon img.emoji { display: none !important; }

/* Botón "Cómo llegar" (glassmorphism) */
.lpf-ph-btn {
  background:      linear-gradient(135deg, var(--lpfn-green) 0%, var(--lpfn-green-dark) 100%) !important;
  color:           var(--lpfn-white) !important;
  border:          none !important;
  border-radius:   10px !important;
  font-weight:     700 !important;
  font-size:       13px !important;
  letter-spacing:  0.3px !important;
  padding:         11px 20px !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  gap:             8px !important;
  width:           100% !important;
  transition:      all 0.3s ease !important;
}
.lpf-ph-btn:hover {
  background:  linear-gradient(135deg, var(--lpfn-green) 0%, #1b3a5c 100%) !important;
  transform:   translateY(-2px) !important;
  box-shadow:  0 6px 20px rgba(143, 192, 69, 0.4) !important;
}
.lpf-ph-btn img.emoji { display: none !important; }


/* ============================================================
   14. SECCIÓN PROMOCIONES (carousel)
   ============================================================ */

.lpfn-promos {
  background: var(--lpfn-bg-light);
  padding:    64px 32px;
}

.lpfn-promos-inner { max-width: var(--lpfn-container); margin: 0 auto; text-align: center; }

/* Badge de sección — versión clara (sobre fondo blanco) */
.lpfn-section-badge-light {
  display:       inline-flex;
  align-items:   center;
  gap:           8px;
  background:    var(--lpfn-white);
  border:        1.5px solid var(--lpfn-border);
  border-radius: var(--lpfn-radius-xl);
  padding:       6px 16px;
  color:         var(--lpfn-text-nav);
  font-size:     0.8rem;
  font-weight:   500;
  margin-bottom: 16px;
  box-shadow:    0 1px 4px rgba(0, 0, 0, 0.06);
}

/* Título de sección sobre fondos claros */
.lpfn-section-title-dark {
  font-size:   clamp(2.6rem, 4.2vw, 3.8rem);
  font-weight: 800;
  color:       var(--lpfn-navy-mid);
  margin-bottom: 8px;
  line-height: 1.15;
}
.lpfn-section-title-dark .green  { color: var(--lpfn-green); }
.lpfn-section-subtitle-dark      { color: var(--lpfn-text-grey); font-size: 0.95rem; margin-bottom: 36px; }

/* Carousel de promociones */
.lpfn-promo-carousel {
  background:    var(--lpfn-navy-mid);
  border-radius: var(--lpfn-radius-lg);
  overflow:      hidden;
  position:      relative;
  max-width:     600px;
  margin:        0 auto 32px;
  min-height:    220px;
}

.lpfn-promo-slide        { position: relative; display: none; min-height: 220px; }
.lpfn-promo-slide.active { display: block; }
.lpfn-promo-slide img    { width: 100%; height: 220px; object-fit: cover; opacity: 0.6; }

.lpfn-promo-content {
  position:   absolute;
  bottom: 0; left: 0; right: 0;
  padding:    20px 24px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 100%);
}

.lpfn-promo-badge {
  position:      absolute;
  top: 14px; right: 14px;
  background:    rgba(122, 182, 72, 0.9);
  color:         var(--lpfn-white);
  border-radius: var(--lpfn-radius-xl);
  padding:       3px 12px;
  font-size:     0.75rem;
  font-weight:   700;
}

.lpfn-promo-title    { font-size: 1.3rem; font-weight: 800; color: var(--lpfn-white);  margin-bottom: 6px; }
.lpfn-promo-subtitle { color: #d0e8ff; font-size: 0.83rem; margin-bottom: 12px; }

.lpfn-btn-ver-promo {
  display:       inline-flex;
  align-items:   center;
  gap:           6px;
  background:    var(--lpfn-green);
  color:         var(--lpfn-white);
  border-radius: var(--lpfn-radius-sm);
  padding:       8px 18px;
  font-size:     0.82rem;
  font-weight:   600;
}

/* Botones prev / next del carousel */
.lpfn-carousel-btn {
  position:        absolute;
  top:             50%;
  transform:       translateY(-50%);
  background:      rgba(255, 255, 255, 0.15);
  color:           var(--lpfn-white);
  border-radius:   50%;
  width:           32px;
  height:          32px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       1rem;
  z-index:         10;
  transition:      background 0.2s;
}
.lpfn-carousel-btn:hover  { background: rgba(255, 255, 255, 0.3); }
.lpfn-carousel-prev       { left: 10px; }
.lpfn-carousel-next       { right: 10px; }

.lpfn-promo-dots { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
.lpfn-promo-dot  { width: 8px; height: 8px; border-radius: 50%; background: #cbd5e0; cursor: pointer; transition: background 0.2s; }
.lpfn-promo-dot.active { background: var(--lpfn-green); }

/* Stats / KPIs */
.lpfn-stats {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   16px;
  margin-top:            32px;
}

.lpfn-stat-card {
  background:    var(--lpfn-white);
  border:        1.5px solid var(--lpfn-border);
  border-radius: 12px;
  padding:       20px 16px;
  text-align:    center;
  box-shadow:    0 1px 6px rgba(0, 0, 0, 0.04);
}

.lpfn-stat-value { font-size: 1.5rem; font-weight: 800; color: var(--lpfn-green); margin-bottom: 4px; }
.lpfn-stat-label { font-size: 0.78rem; color: var(--lpfn-text-grey); }


/* ============================================================
   15. BUSCADOR DE FARMACIAS
   ============================================================
   Sección con barra de búsqueda y filtros para encontrar
   farmacias por nombre, barrio u obra social.
   ============================================================ */

.lpfn-search-section {
  background: var(--lpfn-white);
  padding:    64px 32px;
}

.lpfn-search-inner  { max-width: var(--lpfn-container); margin: 0 auto; }
.lpfn-search-header { text-align: center; margin-bottom: 32px; }

/* Barra de búsqueda */
.lpfn-search-bar {
  display:         flex;
  flex-direction:  row;
  align-items:     center;
  gap:             12px;
  max-width:       896px;
  margin:          0 auto 28px;
  background:      rgba(255, 255, 255, 0.9);
  border:          2px solid rgba(229, 231, 235, 0.5);
  border-radius:   24px;
  padding:         14px 14px 14px 26px;
  box-shadow:      0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.lpfn-search-bar input {
  flex:       1;
  border:     none;
  background: none;
  font-size:  0.9rem;
  color:      var(--lpfn-navy-mid);
  padding:    8px 0;
  outline:    none;
}
.lpfn-search-bar input::placeholder { color: #9aa5b4; }
.lpfn-search-bar > svg { stroke: #9aa5b4; fill: none; }

/* Botón de filtros */
.lpfn .lpfn-btn-filtros {
  background:    var(--lpfn-green);
  color:         var(--lpfn-white);
  border-radius: var(--lpfn-radius-sm);
  padding:       8px 18px;
  font-size:     0.83rem;
  font-weight:   600;
  display:       flex;
  align-items:   center;
  gap:           6px;
}
.lpfn .lpfn-btn-filtros svg { width: 14px; height: 14px; stroke: var(--lpfn-white); fill: none; stroke-width: 2; }

/* Grilla de resultados */
.lpfn-search-results {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   16px;
  margin-top:            60px;
}

/* Tarjeta de resultado */
.lpfn-search-card {
  background:    rgba(255, 255, 255, 0.8);
  border:        1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--lpfn-radius-lg);
  padding:       16px 18px;
  display:       flex;
  flex-direction: column;
  box-shadow:    0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  transition:    box-shadow 0.2s ease, border-color 0.2s ease, transform 0.22s ease;
}
.lpfn-search-card:hover {
  box-shadow:   0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  border-color: rgba(143, 192, 69, 0.5);
  transform:    scale(1.03);
}

.lpfn-search-card-name          { font-size: 1rem; font-weight: 700; color: var(--lpfn-navy-mid); margin-bottom: 8px; transition: color 0.2s ease; }
.lpfn-search-card:hover .lpfn-search-card-name { color: var(--lpfn-green); }

.lpfn-search-card-detail         { display: flex; align-items: flex-start; gap: 6px; font-size: 0.875rem; margin-bottom: 5px; line-height: 1.4; }
.lpfn-search-section .lpfn-search-card-detail,
.lpfn-search-section .lpfn-search-card-detail span { color: #595959; }
.lpfn-search-card-detail svg     { width: 12px; height: 12px; stroke: var(--lpfn-green); fill: none; stroke-width: 2; flex-shrink: 0; margin-top: 2px; }

.lpfn-search-card-actions        { display: flex; gap: 8px; margin-top: auto; padding-top: 10px; }
.lpfn-action-btn                 { flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 8px 6px; border-radius: var(--lpfn-radius-sm); font-size: 0.78rem; font-weight: 600; color: var(--lpfn-white); line-height: 1.2; }
.lpfn-btn-wa                     { background: #25d366; }
.lpfn-btn-map                    { background: #7ab648; }

.lpfn-horario-lines { display: flex; flex-direction: column; gap: 2px; }


/* ============================================================
   16. MAPA INTERACTIVO (sección dedicada)
   ============================================================ */

.lpfn-map-section { background: var(--lpfn-bg-light); padding: 64px 32px; }
.lpfn-map-section-inner { max-width: var(--lpfn-container); margin: 0 auto; text-align: center; }

#lpfn-interactive-map {
  width:         100%;
  height:        420px;
  border-radius: var(--lpfn-radius-lg);
  overflow:      hidden;
  margin:        32px auto 16px;
  border:        1.5px solid var(--lpfn-border);
  box-shadow:    0 4px 24px rgba(0, 0, 0, 0.08);
}

.lpfn-map-legend    { display: flex; justify-content: center; gap: 28px; margin-top: 14px; }
.lpfn-legend-item   { display: flex; align-items: center; gap: 7px; font-size: 0.83rem; color: var(--lpfn-text-nav); }
.lpfn-legend-dot    { width: 12px; height: 12px; border-radius: 50%; }
.lpfn-legend-dot.turno   { background: var(--lpfn-green); }
.lpfn-legend-dot.regular { background: var(--lpfn-navy-link); }


/* ============================================================
   17. SECCIÓN SERVICIOS
   ============================================================ */

.lpfn-services         { background: var(--lpfn-white); padding: 64px 32px; }
.lpfn-services-inner   { max-width: var(--lpfn-container); margin: 0 auto; }
.lpfn-services-header  { text-align: center; margin-bottom: 48px; }

.lpfn-services-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   28px;
}

.lpfn-service-card {
  border:        1.5px solid var(--lpfn-border);
  border-radius: var(--lpfn-radius-lg);
  padding:       28px 24px;
  text-align:    center;
  transition:    box-shadow 0.2s, transform 0.2s;
}
.lpfn-service-card:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); transform: translateY(-2px); }

.lpfn-service-icon {
  width:           60px;
  height:          60px;
  background:      var(--lpfn-green);
  border-radius:   14px;
  margin:          0 auto 16px;
  display:         flex;
  align-items:     center;
  justify-content: center;
}
.lpfn-service-icon svg { width: 28px; height: 28px; stroke: var(--lpfn-white); fill: none; stroke-width: 1.8; }

.lpfn-service-title { font-size: 1rem;   font-weight: 700; color: var(--lpfn-navy-mid); margin-bottom: 8px; }
.lpfn-service-desc  { color: var(--lpfn-text-grey); font-size: 0.83rem; line-height: 1.6; }


/* ============================================================
   18. FOOTER
   ============================================================ */

.lpfn-footer {
  background: var(--lpfn-navy);
  color:      var(--lpfn-text-muted);
  padding:    48px 32px 28px;
}

.lpfn-footer-inner { max-width: var(--lpfn-container); margin: 0 auto; }

.lpfn-footer-top {
  display:               grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap:                   40px;
  margin-bottom:         40px;
}

/* Logo del footer */
.lpfn-footer-logo {
  display:     flex;
  align-items: center;
  gap:         9px;
  margin-bottom: 14px;
}
.lpfn-footer-logo img  { height: 40px !important; width: auto !important; }
.lpfn-footer-logo-text { color: var(--lpfn-white); font-size: 1.1rem; font-weight: 700; }
.lpfn-footer-logo-text span { color: var(--lpfn-green); }

.lpfn-footer-desc { font-size: 0.82rem; line-height: 1.65; color: var(--lpfn-text-footer); margin-bottom: 16px; max-width: 240px; }

/* Redes sociales */
.lpfn-footer-social { display: flex; gap: 10px; }

.lpfn-social-btn {
  width:           34px;
  height:          34px;
  background:      rgba(255, 255, 255, 0.08);
  border-radius:   var(--lpfn-radius-sm);
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--lpfn-text-muted);
  transition:      background 0.2s, color 0.2s;
}
.lpfn-social-btn:hover { background: var(--lpfn-green); color: var(--lpfn-white); }
.lpfn-social-btn svg   { width: 16px; height: 16px; }

/* Columnas de links */
.lpfn-footer-col-title { color: var(--lpfn-white); font-size: 0.88rem; font-weight: 700; margin-bottom: 16px; text-align: left; }

.lpfn-footer-links {
  list-style:     none;
  display:        flex;
  flex-direction: column;
  gap:            9px;
  padding:        0 !important;
  margin:         0 !important;
  text-align:     left;
}
.lpfn-footer-links a       { color: var(--lpfn-text-footer); font-size: 0.82rem; transition: color 0.2s; }
.lpfn-footer-links a:hover { color: var(--lpfn-green); }

/* Pie del footer */
.lpfn-footer-bottom {
  border-top:      1px solid rgba(255, 255, 255, 0.08);
  padding-top:     20px;
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  font-size:       0.78rem;
  color:           #556b80;
}
.lpfn-footer-bottom a { color: var(--lpfn-green); }


/* ============================================================
   19. SCROLL TO TOP
   ============================================================ */

.lpfn-scroll-top {
  position:      fixed;
  bottom:        24px;
  right:         24px;
  width:         44px;
  height:        44px;
  background:    var(--lpfn-green);
  color:         var(--lpfn-white);
  border-radius: 50%;
  border:        2.5px solid rgba(255,255,255,0.85);
  display:       flex;
  align-items:   center;
  justify-content: center;
  box-shadow:    0 4px 18px rgba(76, 154, 30, 0.55),
                 0 2px 6px rgba(0,0,0,0.22),
                 inset 0 1px 0 rgba(255,255,255,0.25);
  cursor:        pointer;
  transition:    transform 0.22s ease, opacity 0.3s ease, box-shadow 0.22s ease;
  opacity:       0;
  z-index:       900;
}
.lpfn-scroll-top.visible {
  opacity: 1;
}
.lpfn-scroll-top:hover {
  transform:  translateY(-4px);
  box-shadow: 0 8px 24px rgba(76, 154, 30, 0.65),
              0 3px 8px rgba(0,0,0,0.25),
              inset 0 1px 0 rgba(255,255,255,0.3);
}
.lpfn-scroll-top:active {
  transform:  translateY(-1px);
  box-shadow: 0 3px 10px rgba(76, 154, 30, 0.5);
}
.lpfn-scroll-top svg {
  width:        20px;
  height:       20px;
  stroke:       var(--lpfn-white);
  fill:         none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter:       drop-shadow(0 1px 1px rgba(0,0,0,0.15));
}


/* ============================================================
   20. NOTICIAS — Hero
   ============================================================
   Hero de la página /noticias/ con título y subtítulo
   centrado sobre fondo degradado oscuro.
   ============================================================ */

.lpfn-news-hero {
  background:  linear-gradient(135deg, var(--lpfn-navy) 0%, var(--lpfn-blue-mid) 50%, var(--lpfn-blue-light) 100%);
  padding:     160px 32px 60px;
  text-align:  center;
  color:       var(--lpfn-white);
}

.lpfn-news-hero h1 { font-size: 3rem;  font-weight: 800; margin: 0 0 12px; }
.lpfn-news-hero p  { font-size: 1.1rem; color: #d0e8ff; margin: 0; }


/* ============================================================
   21. NOTICIAS — Grid y tarjetas
   ============================================================
   Grilla de tarjetas con imagen, fecha, título, extracto
   y botón "Leer más".
   ============================================================ */

.lpfn-noticias-section {
  width:   100%;
  padding: 60px 0 80px;
}

.lpfn-noticias-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   28px;
  max-width:             1200px;
  margin:                0 auto;
  padding:               0 24px;
}

/* Tarjeta de noticia */
.lpfn-news-card {
  background:     var(--lpfn-white);
  border-radius:  var(--lpfn-radius-md);
  box-shadow:     0 2px 16px rgba(0, 0, 0, 0.08);
  overflow:       hidden;
  display:        flex;
  flex-direction: column;
  transition:     transform 0.2s, box-shadow 0.2s;
}
.lpfn-news-card:hover { transform: translateY(-4px); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.13); }

/* Imagen de portada */
.lpfn-news-img              { width: 100%; height: 200px; overflow: hidden; background: #e8eef4; }
.lpfn-news-img img          { width: 100%; height: 100%; object-fit: cover; display: block; }
.lpfn-news-no-img           { display: flex; align-items: center; justify-content: center; font-size: 3rem; opacity: 0.3; }

/* Cuerpo de la tarjeta */
.lpfn-news-body    { padding: 20px; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.lpfn-news-date    { font-size: 0.75rem; color: var(--lpfn-green); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.lpfn-news-title   { font-size: 1.05rem; font-weight: 700; color: var(--lpfn-navy-link); line-height: 1.4; margin: 0; }
.lpfn-news-excerpt { font-size: 0.88rem; color: #64748b; line-height: 1.6; margin: 0; flex: 1; }

/* Botón "Leer más" */
.lpfn-news-btn {
  display:        inline-block;
  margin-top:     8px;
  background:     var(--lpfn-green);
  color:          var(--lpfn-white);
  padding:        8px 18px;
  border-radius:  var(--lpfn-radius-sm);
  font-size:      0.82rem;
  font-weight:    600;
  text-decoration: none;
  align-self:     flex-start;
  transition:     background 0.2s;
}
.lpfn-news-btn:hover { background: var(--lpfn-green-dark); }

/* Mensaje vacío cuando no hay noticias */
.lpfn-news-msg { text-align: center; padding: 60px 0; color: #64748b; font-size: 1rem; }


/* ============================================================
   22. RESPONSIVE — Tablet (≤ 900px)
   ============================================================ */

@media (max-width: 900px) {
  /* Hero */
  .lpfn-hero              { padding-top: 132px !important; }
  .lpfn-hero-inner        { flex-direction: column; gap: 28px; align-items: flex-start; }
  .lpfn-hero-right        { flex: none; max-width: 100%; width: 100%; }

  /* Grillas */
  .lpfn-features-inner    { grid-template-columns: repeat(2, 1fr); }
  .lpfn-pharmacy-cards    { grid-template-columns: 1fr; }
  .lpfn-search-results    { grid-template-columns: repeat(2, 1fr); }
  .lpfn-stats             { grid-template-columns: repeat(2, 1fr); }
  .lpfn-services-grid     { grid-template-columns: 1fr; }
  .lpfn-footer-top        { grid-template-columns: 1fr 1fr; gap: 28px; }

  /* Noticias */
  .lpfn-noticias-grid     { grid-template-columns: repeat(2, 1fr); }

  /* Buscador */
  .lpfn-search-section    { padding: 48px 20px; }
  .lpfn-search-bar        { margin-bottom: 20px; }

  /* Hero mapa */
  #lpf-map                { height: 260px; }

  /* Hero left links centrados */
  .lpfn-hero-left             { width: 100%; }
  .lpfn-hero-left > a         { display: flex; justify-content: center; }

  /* Sección turnos */
  .lpf-turno-section          { padding: 60px 20px !important; }

  /* Títulos */
  .lpfn-section-title         { font-size: 2.2rem; }
}


/* ============================================================
   23. RESPONSIVE — Mobile (≤ 768px)
   ============================================================ */

@media (max-width: 768px) {
  /* Topbar compacta */
  .lpfn-topbar { font-size: 0.65rem; padding: 0 16px; height: 32px !important; }
  .lpfn-topbar-inner { flex-direction: row; gap: 4px; align-items: center; justify-content: flex-start; }
  .lpfn-topbar-inner span:first-child  { display: none; }
  .lpfn-topbar-inner span:last-child   { display: flex; }

  /* Header compacto */
  .lpfn-header      { padding: 0 16px; height: 80px; top: 32px !important; overflow: visible; align-items: center; flex-wrap: nowrap; }
  .lpfn-header-top  { width: 100%; justify-content: space-between; }
  .lpfn-logo img    { height: 40px !important; }

  /* Activa el hamburger */
  .lpfn-hamburger   { display: flex; }

  /* Menú colapsado (vertical, absoluto) */
  .lpfn-nav {
    display:        none;
    position:       absolute;
    top:            80px;
    left:           0;
    right:          0;
    width:          100%;
    flex-direction: column;
    gap:            0;
    padding:        8px 0 12px;
    background:     var(--lpfn-white);
    box-shadow:     0 6px 20px rgba(0, 0, 0, 0.12);
    border-top:     2px solid var(--lpfn-green);
    z-index:        999;
  }
  .lpfn-nav.open { display: flex; }

  .lpfn-nav a {
    font-size:    0.85rem;
    padding:      11px 12px;
    border-bottom:  1px solid #f3f4f6;
    border-left:    3px solid transparent;
  }
  .lpfn-nav a:hover,
  .lpfn-nav a.active {
    color:              var(--lpfn-navy-link);
    border-bottom-color: #f3f4f6;
    border-left-color:  var(--lpfn-green);
  }

  /* Countdown */
  .lpf-countdown-box   { max-width: 100%; padding: 16px 0 14px; }
  .lpf-countdown-nums  { padding: 0 12px !important; gap: 6px !important; }
  .lpf-cd-card         { width: 72px !important; height: 64px !important; }
  .lpf-cd-num          { font-size: 36px !important; }
  .lpf-cd-sep          { font-size: 28px !important; margin-bottom: 16px !important; }
  .lpf-cd-unit         { font-size: 9px !important; letter-spacing: 0.8px !important; }
  .lpf-countdown-label { font-size: 10px !important; }

  /* Mapa card */
  .lpf-map-card        { height: 260px !important; margin-top: 24px; }

  /* Hero */
  .lpf-hero-sub        { font-size: 15px !important; line-height: 24px !important; }
}


/* ============================================================
   24. RESPONSIVE — Small (≤ 600px / 580px)
   ============================================================ */

@media (max-width: 600px) {
  /* Hero */
  .lpfn-hero            { padding: 48px 20px 56px; }
  .lpfn-hero h1         { margin-top: 20px; font-size: 3rem; }
  .lpfn-hero-badge      { font-size: 0.95rem; padding: 10px 20px; }
  .lpfn-hero-desc       { font-size: 0.88rem; margin-bottom: 20px; }

  /* Grillas */
  .lpfn-features-inner  { grid-template-columns: 1fr 1fr; }
  .lpfn-search-results  { grid-template-columns: 1fr; }
  .lpfn-stats           { grid-template-columns: 1fr 1fr; }
  .lpfn-footer-top      { grid-template-columns: 1fr; }
  .lpfn-footer-bottom   { flex-direction: column; gap: 8px; text-align: center; }

  /* Buscador */
  .lpfn-search-section  { padding: 36px 14px; }
  .lpfn-search-bar      { padding: 8px 8px 8px 16px; border-radius: 14px; gap: 8px; margin-bottom: 14px; }
  .lpfn-search-bar input { font-size: 0.85rem; }
  .lpfn .lpfn-btn-filtros { padding: 8px 10px; font-size: 0.78rem; gap: 4px; }

  /* Tipografía */
  .lpfn-section-title   { font-size: 2.6rem; line-height: 1.2; }
  .lpfn-section-subtitle { font-size: 0.88rem; }
  .lpfn-feature-title   { font-size: 0.88rem; }
  .lpfn-feature-desc    { font-size: 0.8rem; }

  /* Overlay del mapa */
  .lpf-turno-overlay    { height: auto; min-height: 52px; padding: 8px 12px; gap: 8px; bottom: 10px; left: 10px; right: 10px; }
  .lpf-turno-icon-wrap  { width: 34px; height: 34px; flex-shrink: 0; }
  .lpf-turno-icon-wrap svg { width: 18px; height: 18px; }
  .lpf-turno-title      { font-size: 13px; line-height: 18px; }
  .lpf-turno-title span,
  #lpf-turno-count      { font-size: 13px; }
  .lpf-turno-sub        { font-size: 11px; line-height: 14px; }

  /* Noticias */
  .lpfn-noticias-grid   { grid-template-columns: 1fr; }
  .lpfn-news-hero       { padding: 140px 20px 50px; }
  .lpfn-news-hero h1    { font-size: 2rem; }
}


/* ============================================================
   25. RESPONSIVE — XSmall (≤ 480px)
   ============================================================ */

@media (max-width: 480px) {
  .lpf-cd-card         { width: 60px !important; height: 54px !important; }
  .lpf-cd-num          { font-size: 28px !important; }
  .lpf-countdown-nums  { padding: 0 6px !important; gap: 4px !important; }
  .lpf-cd-sep          { font-size: 22px !important; }
}