/* ============================================================
   LOURDES FARMACIA — HOJA DE ESTILOS

   Colores y construcción del logo salen del manual de identidad
   (LF_Identidad KIT). El movimiento sigue el criterio de las
   charlas de diseño de Apple: casi todo va atado al scroll, así
   lo maneja el dedo del visitante y se puede frenar o revertir
   en cualquier momento.

   Para cambiar los colores de todo el sitio, editá :root.
   ============================================================ */

:root {
  /* --- Paleta oficial de la marca -------------------------
     Los cuatro códigos del manual:
       #64c2c8 aqua    #fbda1a amarillo
       #d60b52 magenta #cbcbd4 gris

     OJO con el amarillo: la página de paleta del kit escribe
     #ffcc03, pero TODO el arte del logo (páginas 3 a 8) está
     dibujado en #fbda1a. Usamos el del arte, que es el que está
     aplicado en el local. Si el estudio confirma el otro, se
     cambia acá y listo.

     Las variantes más claras y más oscuras se derivaron de cada
     uno manteniendo el tono, para poder usarlos sobre fondos
     claros y oscuros sin perder legibilidad.
     -------------------------------------------------------- */
  --aqua:          #64C2C8;   /* MARCA: el color del isotipo  */
  --aqua-claro:    #8ED3D8;
  --aqua-borde:    #BBE4E7;
  --aqua-tenue:    #E1F3F4;
  --aqua-medio:    #3DA6AD;
  --aqua-fuerte:   #2C7B80;   /* botones y links (4.9:1 AA)   */
  --aqua-hondo:    #143E44;
  --aqua-profundo: #0A2226;   /* los fondos oscuros del sitio */

  --amarillo:       #FBDA1A;  /* MARCA: acentos y destacados  */
  --amarillo-tenue: #FEF7D2;
  --amarillo-hondo: #7A6707;  /* para texto amarillo legible  */

  --magenta:        #D60B52;  /* MARCA: urgencias y turnos    */
  --magenta-claro:  #F27A9F;
  --magenta-tenue:  #FDE8EF;
  --magenta-hondo:  #A50840;

  --gris:           #CBCBD4;  /* MARCA: neutro                */
  --gris-tenue:     #F1F1F4;

  --wpp:         #25d366;
  --wpp-osc:     #0E7A66;

  /* --- Neutros --------------------------------------------- */
  --tinta:       #17383D;
  --texto:       #4F6B70;
  --texto-suave: #5F8189;
  --linea:       #E4EDEF;
  --fondo:       #ffffff;
  --fondo-alt:   #F5FAFB;
  --panel:       #ffffff;

  /* Sobre los fondos oscuros */
  --sobre-osc:        rgba(255,255,255,.92);
  --sobre-osc-suave:  rgba(255,255,255,.66);
  --sobre-osc-linea:  rgba(255,255,255,.14);
  --sobre-osc-vidrio: rgba(255,255,255,.08);

  /* --- Estado ---------------------------------------------- */
  --abierto:     #15A05C;
  --cerrado:     #D60B52;
  --alerta:      #8A6D0B;
  --alerta-bg:   var(--amarillo-tenue);

  /* --- Formas ---------------------------------------------- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 34px;
  --r-full: 999px;

  --sombra-sm: 0 1px 2px rgba(31, 61, 69, .05), 0 3px 10px rgba(31, 61, 69, .04);
  --sombra-md: 0 10px 30px rgba(31, 61, 69, .09);
  --sombra-lg: 0 26px 64px rgba(19, 51, 53, .18);

  /* Ancho de la caja de contenido. Todo el sitio se alinea acá. */
  --ancho: 1080px;

  /* --- Curvas ----------------------------------------------
     Las de fábrica (ease, ease-out) son demasiado suaves para
     que un movimiento se sienta resuelto. Estas dos cubren todo:
     "salida" para lo que entra o sale, "entra-sale" para lo que
     se mueve de un lugar a otro dentro de la pantalla. */
  --salida:     cubic-bezier(.23, 1, .32, 1);
  --entra-sale: cubic-bezier(.77, 0, .175, 1);
  --curva: var(--salida);
}

/* ============================================================
   RESET Y BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  /* OJO: no usar "overflow-x: hidden" en el body. El navegador le pone
     "overflow-y: auto" automáticamente, el body pasa a ser el contenedor
     de scroll y se rompen el desplazamiento de la página y el header
     sticky. "clip" recorta igual pero no crea contenedor de scroll. */
  overflow-x: clip;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--texto);
  background: var(--fondo);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }

/* El "display" que declaramos por clase le gana a la regla del navegador
   para [hidden], y elementos que arrancan ocultos (la X del buscador, la
   ventana del chat) aparecían igual. */
[hidden] { display: none !important; }
a { color: var(--aqua-fuerte); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- Tipografía ------------------------------------------
   El tracking se ajusta al tamaño: cuanto más grande, más
   negativo, porque las letras se leen demasiado separadas al
   crecer. El interlineado va al revés: apretado en los títulos,
   holgado en el texto corrido. */
h1, h2, h3 {
  font-family: 'Outfit', 'Inter', sans-serif;
  color: var(--tinta);
  font-weight: 600;
}
h1 {
  font-size: clamp(2.4rem, 6.6vw, 5.2rem);
  line-height: 1.02; letter-spacing: -.035em;
}
h2 {
  font-size: clamp(1.9rem, 4.4vw, 3.2rem);
  line-height: 1.08; letter-spacing: -.03em;
}
h3 { font-size: 1.18rem; line-height: 1.3; letter-spacing: -.015em; }

/* Palabra destacada dentro de un título: va en aqua, sin subrayado */
h2 em, h1 .destacado {
  font-style: normal;
  color: var(--aqua-medio);
}

:focus-visible { outline: 3px solid var(--aqua-fuerte); outline-offset: 3px; border-radius: var(--r-xs); }

.contenedor { width: min(100% - 2.5rem, var(--ancho)); margin-inline: auto; }

.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--aqua-fuerte); color: #fff; padding: .75rem 1.25rem;
  border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; }

/* ============================================================
   EL ISOTIPO ANIMADO

   El isotipo del manual está construido con las iniciales L y F
   entrelazadas. La animación cuenta eso: cada trazo entra por su
   lado, encastran, y recién ahí aparece el disco de color.

   El trazo de abajo se extiende un poco más allá del círculo; en
   el arte original eso queda recortado. Por eso los trazos van
   dentro de un clipPath con la forma del disco: sin él aparece
   una barra colgando fuera, y el recorte del marco del SVG no
   alcanza porque la capa que anima se lo saltea.
   ============================================================ */
.iso { width: 100%; height: auto; }
.iso__disco { fill: var(--aqua); }
.iso__trazo path { fill: #fff; }

/* Variante para cuando el disco va blanco (sobre fondo oscuro) */
.iso--calado .iso__disco { fill: #fff; }
.iso--calado .iso__trazo path { fill: var(--aqua-profundo); }

.iso.animar .iso__disco {
  transform-box: view-box; transform-origin: 188.879px 188.879px;
  animation: iso-disco .55s var(--salida) .62s both;
}
.iso.animar .iso__trazo {
  animation-fill-mode: both;
  animation-timing-function: var(--salida);
  animation-duration: .72s;
}
.iso.animar .iso__trazo--a { animation-name: iso-entra-a; animation-delay: .05s; }
.iso.animar .iso__trazo--b { animation-name: iso-entra-b; animation-delay: .20s; }
.iso.animar .iso__trazo path { animation: iso-tintar .28s linear .68s both; }

@keyframes iso-entra-a {
  from { opacity: 0; transform: translate(72px, -58px); }
  to   { opacity: 1; transform: none; }
}
@keyframes iso-entra-b {
  from { opacity: 0; transform: translate(-72px, 58px); }
  to   { opacity: 1; transform: none; }
}
/* Antes de que aparezca el disco los trazos se ven en color;
   cuando el disco entra detrás, pasan a blanco y quedan calados. */
@keyframes iso-tintar { from { fill: var(--aqua); } to { fill: #fff; } }
@keyframes iso-disco  { from { transform: scale(0); } to { transform: scale(1); } }

/* --- El monograma gigante como fondo ----------------------
   El manual lo usa así en "otras formas de aplicación": los dos
   trazos ampliados, cortados por el borde, en un tono más claro
   del mismo color. Va como máscara para que el color lo ponga
   el CSS y funcione igual en claro y en oscuro. */
.marca-agua {
  position: absolute; pointer-events: none;
  background-color: currentColor;
  -webkit-mask: url("../img/marca-trazos.svg") no-repeat center / contain;
          mask: url("../img/marca-trazos.svg") no-repeat center / contain;
}

/* ============================================================
   BOTONES
   El feedback vive en el apretón, no en el soltar: si esperás
   al click, la interfaz se siente muerta.
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .85rem 1.6rem; border-radius: var(--r-full);
  font-family: 'Inter', sans-serif; font-size: .97rem; font-weight: 600;
  border: 1px solid transparent; cursor: pointer;
  background: var(--aqua-fuerte); color: #fff;
  transition: background 180ms var(--salida), border-color 180ms var(--salida),
              color 180ms var(--salida), transform 120ms var(--salida);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(.97); }
.btn svg { width: 18px; height: 18px; fill: currentColor; flex: none; }

.btn--wpp { background: var(--wpp-osc); color: #fff; }
.btn--fantasma {
  background: transparent; color: var(--tinta); border-color: var(--linea);
}
/* Sobre el aqua tenue de la portada, --linea casi no se ve */
.hero .btn--fantasma { border-color: var(--aqua-medio); background: rgba(255,255,255,.5); }
.btn--vidrio {
  background: var(--sobre-osc-vidrio); color: #fff;
  border-color: var(--sobre-osc-linea);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.btn--grande { padding: 1rem 1.9rem; font-size: 1.02rem; }

/* El botón de contorno usa tinta oscura: sobre los fondos oscuros hay
   que darlo vuelta o queda texto negro sobre negro. */
.seccion--oscura .btn--fantasma,
.pie .btn--fantasma {
  color: #fff; border-color: var(--sobre-osc-linea);
  background: var(--sobre-osc-vidrio);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.btn--bloque { display: flex; width: 100%; }

@media (hover: hover) and (pointer: fine) {
  .btn:hover          { background: var(--aqua-hondo); }
  .btn--wpp:hover     { background: #0b6455; }
  .btn--fantasma:hover{ background: transparent; border-color: var(--aqua-medio); color: var(--tinta); }
  .seccion--oscura .btn--fantasma:hover { background: rgba(255,255,255,.16); border-color: var(--sobre-osc-linea); color: #fff; }
  .btn--vidrio:hover  { background: rgba(255,255,255,.16); }
}

/* ============================================================
   BARRA SUPERIOR — una línea de datos, sin fondo de color
   ============================================================ */
.barra-superior {
  background: var(--aqua-profundo); color: var(--sobre-osc-suave);
  font-size: .83rem;
}
.barra-superior__inner {
  display: flex; align-items: center; gap: 1.3rem; min-height: 40px;
  flex-wrap: wrap;
}
.barra-superior__sep { margin-left: auto; }
.barra-superior__lugar { color: var(--sobre-osc-suave); }
.barra-superior__tel { display: inline-flex; align-items: center; gap: .4rem; color: var(--sobre-osc); }
.barra-superior__tel svg { width: 14px; height: 14px; fill: currentColor; }
.barra-superior a:hover { color: #fff; text-decoration: none; }
.barra-superior__redes { display: inline-flex; gap: .5rem; }
.barra-superior__redes a { display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--r-full); }
.barra-superior__redes svg { width: 15px; height: 15px; fill: var(--sobre-osc-suave); transition: fill 180ms var(--salida); }
.barra-superior__redes a:hover svg { fill: #fff; }

.estado { display: inline-flex; align-items: center; gap: .45rem; color: var(--sobre-osc); font-weight: 500; }
.estado__punto {
  width: 7px; height: 7px; border-radius: 50%; background: var(--abierto); flex: none;
  animation: latido 2.4s ease-out infinite;
}
.estado.esta-cerrado .estado__punto { background: var(--cerrado); animation: none; }
.estado.esta-abierto .estado__punto { background: var(--abierto); }
@keyframes latido {
  0%   { box-shadow: 0 0 0 0 rgba(21,160,92,.55); }
  70%  { box-shadow: 0 0 0 9px rgba(21,160,92,0); }
  100% { box-shadow: 0 0 0 0 rgba(21,160,92,0); }
}

/* ============================================================
   CABECERA — material translúcido, el contenido pasa debajo
   ============================================================ */
.cabecera {
  position: sticky; top: 0; z-index: 90;
  background: rgba(255,255,255,.74);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border-bottom: 1px solid transparent;
  transition: border-color 300ms var(--salida), background 300ms var(--salida);
}
.cabecera.pegada { border-bottom-color: rgba(23,56,61,.08); }
.cabecera__inner { display: flex; align-items: center; gap: 1.4rem; min-height: 66px; }

.logo { display: flex; align-items: center; gap: .6rem; }
.logo:hover { text-decoration: none; }
.logo__marca { width: 34px; height: 34px; flex: none; }
.logo__marca svg, .logo__marca img { width: 100%; height: 100%; }
.logo__texto strong {
  display: block; font-family: 'Outfit', sans-serif; font-weight: 600;
  font-size: .95rem; color: var(--tinta); letter-spacing: -.01em; line-height: 1.15;
  white-space: nowrap;
}
.logo__texto small {
  display: block; font-size: .67rem; color: var(--texto-suave);
  letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}

.nav { display: flex; align-items: center; gap: 1.3rem; margin-left: auto; }
/* OJO: ".nav a" le gana en especificidad a ".btn". Sin el :not(), el
   botón de WhatsApp del menú queda con el texto casi invisible. */
.nav a:not(.nav__cta) {
  font-size: .9rem; font-weight: 500; color: var(--texto);
  position: relative; padding: .25rem 0; white-space: nowrap;
}
.nav a:not(.nav__cta) span { position: relative; }
.nav a:not(.nav__cta)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
  background: var(--aqua-medio); border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform 240ms var(--salida);
}
.nav a.nav__cta { color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .nav a:not(.nav__cta):hover { color: var(--tinta); text-decoration: none; }
  .nav a:not(.nav__cta):hover::after { transform: scaleX(1); }
}

.tema, .hamburguesa {
  width: 38px; height: 38px; display: grid; place-items: center;
  background: none; border: 1px solid var(--linea); border-radius: var(--r-xs);
  color: var(--texto-suave); cursor: pointer;
  transition: border-color 180ms var(--salida), transform 120ms var(--salida);
}
.tema:active, .hamburguesa:active { transform: scale(.94); }
.tema svg { width: 17px; height: 17px; fill: currentColor; }
.tema__luna { display: none; }
[data-tema="oscuro"] .tema__sol { display: none; }
[data-tema="oscuro"] .tema__luna { display: block; }

.hamburguesa { display: none; flex-direction: column; gap: 4px; }
.hamburguesa span { width: 17px; height: 2px; background: currentColor; border-radius: 2px; transition: transform 240ms var(--salida), opacity 180ms; }
.hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ============================================================
   PORTADA
   Campo aqua profundo con el monograma gigante de fondo, como
   en la página de aplicaciones del manual.
   ============================================================ */
.hero {
  position: relative; overflow: hidden;
  min-height: 100svh; display: grid; align-items: center;
  padding: clamp(2rem, 4vw, 3rem) 0 clamp(2.5rem, 5vw, 4rem);
  /* La portada va CLARA a proposito: con fondo oscuro se confundia con
     el modo oscuro activado y no se entendia en que tema estabas. El
     aqua tenue la despega del blanco de las secciones sin oscurecerla. */
  background: var(--aqua-tenue);
  color: var(--texto);
  isolation: isolate;
}
.hero__fondo { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
/* El monograma, enorme y cortado por el borde derecho */
.hero__fondo .marca-agua {
  color: rgba(100, 194, 204, .17);
  top: 50%; left: 50%; width: 190vw; height: 88vw;
  translate: -50% -50%;
}
/* Halo suave detrás del isotipo, para que el logo no flote en el vacío */
.hero__fondo::after {
  content: ""; position: absolute;
  top: 30%; left: 50%; width: min(72vw, 540px); aspect-ratio: 1;
  translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.8), transparent 66%);
  filter: blur(28px);
}

/* Una sola columna centrada: el logo manda y todo lo demás se ordena
   debajo. Es la marca, y en la portada tiene que leerse como tal. */
.hero__inner {
  display: grid; grid-template-columns: minmax(0, 1fr);
  justify-items: center; text-align: center;
  gap: clamp(1.2rem, 2.2vw, 1.8rem);
}
.hero__texto { position: relative; z-index: 2; display: grid; justify-items: center; }
.hero h1 { color: var(--tinta); margin-bottom: 1rem; }
.hero h1 .destacado { color: var(--aqua-fuerte); }
.hero__eslogan {
  font-size: clamp(1.05rem, 1.7vw, 1.25rem); color: var(--texto);
  max-width: 40ch; margin: 0 auto 1.4rem;
}

.pastilla {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .42rem 1rem; border-radius: var(--r-full);
  background: rgba(255,255,255,.72); border: 1px solid var(--aqua-borde);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: .82rem; color: var(--tinta); margin-bottom: 1.5rem;
}
.pastilla__punto { width: 6px; height: 6px; border-radius: 50%; background: var(--amarillo-hondo); flex: none; }

.hero__estado {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center;
  gap: .6rem; margin-bottom: 1.2rem; font-size: .95rem;
}
.estado--grande { font-size: 1rem; }
.hero__estado-detalle { color: var(--texto-suave); }
.hero .estado { color: var(--tinta); }

.hero__botones { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-bottom: 1.4rem; }

.hero__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; list-style: none; padding: 0; }
.hero__chips li {
  padding: .45rem 1rem; border-radius: var(--r-full);
  background: rgba(255,255,255,.72); border: 1px solid var(--aqua-borde);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: .85rem; color: var(--tinta);
}

/* El logo grande de la portada: va primero y es lo más grande de la
   pantalla. "order" y no reordenar el HTML, porque en el marcado el
   texto tiene que seguir antes que la marca decorativa. */
.marca-grande { order: -1; position: relative; display: grid; place-items: center; z-index: 2; }
.marca-grande__halo { display: none; }
.marca-grande__caja { display: block; width: min(56vw, 300px); }
.marca-grande__caja img { width: 100%; }

/* Tarjeta de datos rápidos: sin caja flotando, un panel de vidrio */
.tarjeta-rapida {
  grid-column: 1 / -1;
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  padding: clamp(1.3rem, 2.6vw, 1.8rem);
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.75);
  border: 1px solid var(--aqua-borde);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  position: relative; z-index: 2; width: 100%; text-align: left;
}
.tarjeta-rapida__sello { display: none; }
.tarjeta-rapida h2 {
  font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--aqua-fuerte); font-family: 'Inter', sans-serif; margin-bottom: 1.1rem;
}
.tarjeta-rapida dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1.2rem 1.6rem; }
.tarjeta-rapida dt {
  font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--texto-suave); margin-bottom: .3rem;
}
.tarjeta-rapida dd { font-size: .95rem; color: var(--tinta); line-height: 1.5; }
.tarjeta-rapida dd a { color: var(--aqua-fuerte); }
.tarjeta-rapida .btn { margin-top: 1.4rem; }

.hero__baja {
  position: absolute; bottom: 1.6rem; left: 50%; translate: -50% 0;
  width: 30px; height: 30px; display: grid; place-items: center; z-index: 2;
}
.hero__baja span {
  width: 11px; height: 11px; border-right: 2px solid var(--aqua-medio);
  border-bottom: 2px solid var(--aqua-medio); rotate: 45deg;
  animation: flotar 2.2s ease-in-out infinite;
}
@keyframes flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* ============================================================
   LA ENTRADA

   Primero se arma el logo solo, en el lugar exacto donde va a
   quedar, y recién cuando termina aparece el resto de la página.
   El logo no se mueve ni un pixel entre una cosa y la otra: lo
   único que cambia es lo que hay alrededor.

   La clase la pone el script del <head> antes del primer pintado,
   y la saca initIntro() cuando la animación del isotipo terminó.
   ============================================================ */
.intro,
.intro body { overflow-y: hidden; }   /* nada de scrollear a medias */

.intro .barra-superior,
.intro .cabecera,
.intro .hero__texto,
.intro .tarjeta-rapida,
.intro .hero__baja,
.intro #contenido > *:not(#inicio),
.intro .pie,
.intro .chat-burbuja,
.intro .wpp-flotante {
  opacity: 0;
  pointer-events: none;
}

/* Al soltar, todo entra junto y con un pequeño respiro escalonado:
   primero la portada, después el encabezado y los flotantes. */
.barra-superior, .cabecera, .hero__texto, .tarjeta-rapida, .hero__baja,
#contenido > *, .pie, .chat-burbuja, .wpp-flotante {
  transition: opacity .65s var(--salida);
}
.intro .barra-superior, .intro .cabecera { transition-delay: .12s; }
.intro .chat-burbuja, .intro .wpp-flotante { transition-delay: .2s; }

/* ============================================================
   SECCIONES
   Mismo fondo, separadas por aire y un filete. Sin franjas
   alternadas ni olas entre una y otra.
   ============================================================ */
.seccion { padding: clamp(4rem, 9vw, 7rem) 0; position: relative; }
.seccion + .seccion { border-top: 1px solid var(--linea); }
.seccion--alt { background: var(--fondo-alt); }
.seccion--oscura {
  background: var(--aqua-profundo); color: var(--sobre-osc-suave);
  border-top: none;
  /* OJO: nada de "overflow: hidden" acá. Un ancestro con overflow
     distinto de visible anula el position:sticky de sus descendientes,
     y la foto de la escena dejaba de pegarse: se quedaba arriba de todo
     y abajo quedaban mil pixeles de fondo oscuro vacío. */
}
/* La escena va última y llega hasta el borde: sin esto queda una franja
   de fondo oscuro entre la foto y la sección siguiente. */
.seccion--oscura:has(.escena) { padding-bottom: 0; }
.seccion--oscura h2, .seccion--oscura h3 { color: #fff; }
.seccion--oscura + .seccion { border-top: none; }

.seccion__cabecera { max-width: 54ch; margin-bottom: 3rem; }
.seccion__cabecera h2 { max-width: 16ch; }
/* OJO: el límite en "ch" va sobre el título, no sobre el contenedor.
   La unidad se mide con la tipografía de quien la declara: puesta en el
   contenedor da una columna de 200px y el título se desborda. */
.seccion__cabecera--centro { margin-inline: auto; text-align: center; }
.seccion__cabecera--centro h2 { margin-inline: auto; }
.seccion__cabecera--ancha h2 { max-width: 18ch; }
.seccion__cabecera p { margin-top: 1rem; color: var(--texto-suave); font-size: 1.05rem; }
.seccion--oscura .seccion__cabecera p { color: var(--sobre-osc-suave); }

.seccion__eyebrow {
  display: inline-block; margin-bottom: .9rem;
  font-family: 'Inter', sans-serif;
  font-size: .73rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--aqua-medio);
}
.seccion--oscura .seccion__eyebrow { color: var(--aqua-claro); }

/* ============================================================
   SERVICIOS — carrusel con imán
   ============================================================ */
.grilla-servicios {
  /* La cinta ocupa todo el ancho, pero la primera tarjeta arranca
     alineada con el texto de arriba. El scroll-padding es lo que hace
     que el imán respete esa sangría: sin él, el navegador pega la
     primera tarjeta contra el borde y se come el margen. */
  --sangria: max(1.25rem, calc((100% - var(--ancho)) / 2));
  display: flex; gap: 1.1rem;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: .4rem var(--sangria) 1.6rem;
  scroll-padding-inline: var(--sangria);
  scrollbar-width: none;
  cursor: grab;
}
.grilla-servicios.arrastrando { cursor: grabbing; scroll-behavior: auto; }
/* Mientras se arrastra, nada adentro captura el puntero ni se selecciona */
.grilla-servicios.arrastrando * { pointer-events: none; user-select: none; }
.grilla-servicios::-webkit-scrollbar { display: none; }

.servicio {
  flex: 0 0 clamp(250px, 30vw, 320px); scroll-snap-align: start;
  aspect-ratio: 3 / 4; border-radius: var(--r-xl);
  padding: 1.7rem; display: flex; flex-direction: column; justify-content: flex-end;
  position: relative; overflow: hidden;
  background: var(--aqua-tenue); color: var(--tinta);
  transition: transform 420ms var(--salida);
}
/* Ritmo de color tomado de la paleta del manual */
.servicio:nth-child(3n+2) { background: var(--gris-tenue); }
.servicio:nth-child(3n+3) { background: var(--aqua-profundo); }
.servicio:nth-child(3n+3) h3 { color: #fff; }
.servicio:nth-child(3n+3) p  { color: var(--sobre-osc-suave); }

.servicio__icono {
  position: absolute; top: 1.7rem; left: 1.7rem;
  width: 40px; height: 40px; border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: rgba(44,123,129,.12);
}
.servicio__icono svg { width: 21px; height: 21px; fill: var(--aqua-fuerte); }
.servicio:nth-child(3n+3) .servicio__icono { background: rgba(255,255,255,.12); }
.servicio:nth-child(3n+3) .servicio__icono svg { fill: var(--aqua-claro); }

.servicio h3 { margin-bottom: .45rem; }
.servicio p { font-size: .92rem; color: var(--texto-suave); line-height: 1.6; }

@media (hover: hover) and (pointer: fine) {
  .servicio:hover { transform: translateY(-8px); }
  .grilla-servicios.arrastrando .servicio:hover { transform: none; }
}

/* ============================================================
   MARCAS — cinta que gira sin cortes
   ============================================================ */
.seccion--marcas { padding-top: 0; }
.seccion--marcas[hidden] { display: none; }
.marcas__cabecera { margin-bottom: 1.8rem; }
.marcas__cabecera h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }

.marcas__cinta {
  overflow: hidden; position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marcas__pista {
  display: flex; gap: 3rem; width: max-content;
  /* La lista se renderiza dos veces y la animación recorre justo la
     mitad: al terminar, la segunda copia quedó donde estaba la primera
     y el salto no se ve. La duración la calcula el JS según el ancho. */
  animation: desfilar var(--duracion, 40s) linear infinite;
}
.marcas__cinta:hover .marcas__pista { animation-play-state: paused; }
/* El JS la frena cuando no hay suficientes marcas para dar la vuelta */
.cinta--quieta .marcas__pista { animation: none; justify-content: center; width: 100%; }
@keyframes desfilar {
  from { transform: translate3d(-50%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}
.marca {
  display: grid; place-items: center; height: 54px; flex: none;
  padding-inline: .2rem;
}
/* Los logos anchos (BIODERMA, Johnson's) medidos solo por altura se
   comen medio ancho de la cinta. Hay que limitar también el ancho. */
.marca img {
  max-height: 54px; max-width: 150px; width: auto; height: auto;
  object-fit: contain; opacity: .72; transition: opacity 220ms var(--salida);
}
.marca:hover img { opacity: 1; }
.marca__nombre {
  font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 1.05rem;
  color: var(--texto-suave); white-space: nowrap;
}

/* ============================================================
   PANELES, HORARIOS Y TABLAS
   ============================================================ */
.panel {
  background: var(--panel); border: 1px solid var(--linea);
  border-radius: var(--r-lg); padding: clamp(1.4rem, 3vw, 2rem);
}
.panel h3 { margin-bottom: 1rem; }
.panel__intro { color: var(--texto-suave); margin-bottom: 1.2rem; font-size: .96rem; }
.panel--acento { background: var(--aqua-tenue); border-color: var(--aqua-borde); }

/* ---------- La semana en una tira -------------------------
   Siete columnas, una por dia. Se lee de un vistazo, que es lo unico
   que se le pide a un horario, y el dia de hoy salta a la vista sin
   tener que recorrer una tabla. */
.semana__dias {
  list-style: none; padding: 0; margin-bottom: 1.2rem;
  display: grid; grid-template-columns: repeat(7, 1fr); gap: .5rem;
}
.dia {
  display: flex; flex-direction: column; gap: .5rem;
  padding: 1.1rem .7rem 1.2rem; border-radius: var(--r-md);
  background: var(--panel); border: 1px solid var(--linea);
  text-align: center; position: relative;
  transition: border-color 220ms var(--salida);
}
.dia__nombre {
  font-family: 'Outfit', sans-serif; font-weight: 600; font-size: .92rem;
  color: var(--tinta); letter-spacing: -.01em;
}
.dia__horas { display: grid; gap: .25rem; font-size: .8rem; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.dia__cerrado { color: var(--texto-suave); opacity: .75; }
.dia.esta-cerrado { background: transparent; border-style: dashed; }

/* Hoy va lleno, en el aqua de la marca */
.dia.es-hoy {
  background: var(--aqua-fuerte); border-color: var(--aqua-fuerte);
  box-shadow: 0 10px 26px rgba(44,123,129,.22);
}
.dia.es-hoy .dia__nombre, .dia.es-hoy .dia__horas { color: #fff; }
.dia__hoy {
  position: absolute; top: -.6rem; left: 50%; translate: -50% 0;
  padding: .1rem .55rem; border-radius: var(--r-full);
  background: var(--amarillo); color: #4A3D04;
  font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}

/* ---------- Turnos de 24 horas ----------------------------
   Van en magenta, que es el color que el manual reserva para lo
   urgente. Son tarjetas anchas, no renglones de lista. */
.turnos { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.turnos__cabecera { margin-bottom: 1.4rem; }
.turnos__cabecera p { color: var(--texto-suave); margin-top: .4rem; }

.lista-turnos {
  list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .8rem;
}
.lista-turnos li {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.1rem 1.2rem; border-radius: var(--r-md);
  background: var(--panel); border: 1px solid var(--linea);
  transition: border-color 220ms var(--salida);
}
.lista-turnos .es-hoy { border-color: var(--magenta); background: var(--magenta-tenue); }
.lista-turnos .vacio { grid-column: 1 / -1; border-style: dashed; justify-content: center; }

.turno-dia {
  display: grid; place-items: center; width: 46px; height: 46px; flex: none;
  border-radius: var(--r-md); background: var(--magenta-tenue);
  font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 1.35rem;
  color: var(--magenta-hondo); font-variant-numeric: tabular-nums;
}
.lista-turnos .es-hoy .turno-dia { background: var(--magenta); color: #fff; }
/* Sin display:flex quedan pegados: "Martes 8 de septiembreEs hoy" */
.turno-info { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.lista-turnos strong { color: var(--tinta); font-family: 'Outfit', sans-serif; font-weight: 600; font-size: .99rem; }
.lista-turnos .es-hoy strong { color: var(--magenta-hondo); }
.lista-turnos small { color: var(--texto-suave); font-size: .83rem; }

@media (hover: hover) and (pointer: fine) {
  .dia:not(.es-hoy):hover { border-color: var(--aqua-medio); }
}

.nota { margin-top: 1.2rem; font-size: .86rem; color: var(--texto-suave); }
.nota--chica { font-size: .8rem; }

/* ============================================================
   OBRAS SOCIALES
   ============================================================ */
.buscador {
  position: relative; max-width: 480px; margin: 0 auto 1rem;
}
.buscador input {
  width: 100%; padding: .9rem 2.8rem; border-radius: var(--r-full);
  border: 1px solid var(--linea); background: var(--panel); color: var(--tinta);
  font: inherit; font-size: .97rem;
  transition: border-color 200ms var(--salida);
}
.buscador input:focus { border-color: var(--aqua-medio); outline-offset: 1px; }
.buscador input::-webkit-search-cancel-button { display: none; }
.buscador__lupa {
  position: absolute; left: 1rem; top: 50%; translate: 0 -50%;
  width: 18px; height: 18px; pointer-events: none;
}
.buscador__lupa svg { width: 100%; height: 100%; fill: var(--texto-suave); }
.buscador__limpiar {
  position: absolute; right: .9rem; top: 50%; translate: 0 -50%;
  width: 26px; height: 26px; border: 0; border-radius: 50%;
  background: var(--gris-tenue); cursor: pointer; display: grid; place-items: center;
}
.buscador__limpiar svg { width: 14px; height: 14px; fill: var(--texto-suave); }
.buscador__cuenta { text-align: center; font-size: .85rem; color: var(--texto-suave); min-height: 1.4em; margin-bottom: 1.6rem; }

.grilla-obras {
  list-style: none; padding: 0;
  display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center;
  margin-bottom: 3rem;
}
.grilla-obras li {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .5rem 1rem .5rem .5rem; border-radius: var(--r-full);
  border: 1px solid var(--linea); background: var(--panel);
  font-size: .92rem; color: var(--tinta);
  transition: border-color 200ms var(--salida), transform 200ms var(--salida);
}
.grilla-obras li[hidden] { display: none; }
.obra__inicial {
  display: grid; place-items: center; width: 30px; height: 30px; flex: none;
  border-radius: var(--r-full); background: var(--aqua-tenue);
  font-family: 'Outfit', sans-serif; font-size: .68rem; font-weight: 600;
  color: var(--aqua-fuerte); letter-spacing: .02em;
}
@media (hover: hover) and (pointer: fine) {
  .grilla-obras li:hover { border-color: var(--aqua-medio); }
}

.sin-resultado {
  text-align: center; padding: 2rem; border-radius: var(--r-lg);
  border: 1px dashed var(--aqua-borde); background: var(--aqua-tenue);
  margin-bottom: 3rem;
}
.sin-resultado p { margin-bottom: 1.2rem; color: var(--texto); }

.dos-columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; }
.dos-columnas--desigual { grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 4vw, 3.4rem); align-items: start; }

.pasos { padding-left: 1.2rem; display: grid; gap: .8rem; color: var(--texto-suave); }
.pasos strong { color: var(--tinta); }
.pasos::marker { color: var(--aqua-medio); }

.lista-check { list-style: none; padding: 0; display: grid; gap: .6rem; }
.lista-check li { display: flex; align-items: center; gap: .6rem; color: var(--texto); }
.lista-check li::before {
  content: ""; width: 18px; height: 18px; flex: none; border-radius: 50%;
  background: var(--aqua-tenue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232C7B80'%3E%3Cpath d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* ============================================================
   NOSOTROS — la foto anclada que crece con el scroll
   ============================================================ */
.nosotros__lado { display: grid; gap: 1.6rem; align-content: center; }

/* --- La escena: la foto queda fija y crece con el scroll ---
   El alto del contenedor es lo que dura el gesto. El hijo pegajoso es
   lo que se ve; el contenedor alto es solo pista para scrollear. */
.escena { position: relative; height: 230vh; view-timeline-name: --escena; view-timeline-axis: block; }
.escena__fija {
  position: sticky; top: 0; height: 100svh;
  display: grid; place-items: center; overflow: hidden;
}

/* La foto ocupa TODA la escena y se achica con transform, no con ancho.
   Así al final llega a pantalla completa y, cuando sube y se va, abajo
   ya está la sección siguiente: antes quedaba un hueco largo de fondo
   oscuro entre la foto y lo que venía después. */
.foto-local {
  margin: 0; position: relative; overflow: hidden;
  width: 100%; height: 100%;
  background: var(--aqua-hondo);
  will-change: transform;
  transform-origin: center center;
}
.foto-local[hidden] { display: none; }
.foto-local img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Un velo abajo, para que el epígrafe se lea sobre cualquier foto */
.foto-local::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(10,34,38,.8) 0%, rgba(10,34,38,.1) 42%, transparent 66%);
}
.foto-local figcaption {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: clamp(1.2rem, 3vw, 2.2rem);
  font-family: 'Outfit', sans-serif; font-weight: 600;
  font-size: clamp(1.1rem, 2.4vw, 1.8rem); letter-spacing: -.02em;
  color: #fff;
}

.parrafo-grande { font-size: 1.1rem; color: var(--sobre-osc); margin-bottom: 1rem; }
.seccion--oscura p { color: var(--sobre-osc-suave); }
.matricula { margin-top: 1.6rem; font-size: .88rem; color: var(--sobre-osc-suave); }

.numeros { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem 1.2rem; }
.numero strong {
  display: block; font-family: 'Outfit', sans-serif; font-weight: 600;
  font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1; letter-spacing: -.04em;
  color: var(--aqua-claro); font-variant-numeric: tabular-nums;
}
.numero span { display: block; margin-top: .5rem; font-size: .87rem; color: var(--sobre-osc-suave); }

.aviso {
  display: flex; gap: 1rem; align-items: flex-start;
  margin-top: clamp(2.5rem, 5vw, 4rem); padding: 1.2rem 1.4rem;
  border-radius: var(--r-md); background: var(--sobre-osc-vidrio);
  border: 1px solid var(--sobre-osc-linea);
}
.aviso svg { width: 20px; height: 20px; fill: var(--amarillo); flex: none; margin-top: .2rem; }
.aviso p { font-size: .88rem; color: var(--sobre-osc-suave); }
.aviso strong { color: #fff; }

/* ============================================================
   REDES SOCIALES
   ============================================================ */
.muro { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.5rem; align-items: start; }
.red { border: 1px solid var(--linea); border-radius: var(--r-lg); background: var(--panel); overflow: hidden; }
.red__cabecera { display: flex; align-items: center; gap: .8rem; padding: 1.1rem 1.3rem; border-bottom: 1px solid var(--linea); }
.red__icono { width: 34px; height: 34px; border-radius: var(--r-sm); display: grid; place-items: center; flex: none; }
.red__icono svg { width: 19px; height: 19px; fill: #fff; }
.red--ig .red__icono { background: linear-gradient(45deg, #F09433, #DC2743 45%, #BC1888); }
.red--fb .red__icono { background: #1877F2; }
.red__quien { display: flex; flex-direction: column; line-height: 1.3; }
.red__quien strong { font-size: .95rem; color: var(--tinta); }
.red__quien small { font-size: .8rem; color: var(--texto-suave); }
.red__seguir {
  margin-left: auto; padding: .45rem 1rem; border-radius: var(--r-full);
  border: 1px solid var(--linea); font-size: .85rem; font-weight: 600; color: var(--tinta);
  transition: border-color 200ms var(--salida);
}
.red__seguir:hover { border-color: var(--aqua-medio); text-decoration: none; }
.red__cuerpo { padding: 1.1rem; display: grid; gap: 1rem; }
.red__cuerpo--posts { gap: .8rem; }
.red__cuerpo blockquote { margin: 0; }
/* Un iframe sin altura declarada mide 150px y el posteo queda aplastado.
   El embed "captioned" de Instagram necesita lugar para la foto más el
   texto; no hay forma de que se ajuste solo, va a mano. */
.post-ig {
  width: 100%; height: 640px; border: 0;
  border-radius: var(--r-md); display: block;
}
@media (max-width: 480px) { .post-ig { height: 560px; } }

/* Cuando no hay publicaciones cargadas, invitamos al perfil */
.red__invita {
  display: grid; justify-items: center; gap: .9rem; text-align: center;
  padding: 2.4rem 1rem; border-radius: var(--r-md);
  border: 1px dashed var(--linea); color: var(--texto-suave);
}
.red__invita:hover { text-decoration: none; border-color: var(--aqua-medio); }
.red__invita-icono { width: 34px; height: 34px; }
.red__invita-icono svg { width: 100%; height: 100%; fill: var(--aqua-medio); }
.red__invita-boton {
  padding: .5rem 1.1rem; border-radius: var(--r-full);
  background: var(--aqua-tenue); color: var(--aqua-fuerte);
  font-size: .87rem; font-weight: 600;
}

.muro-fb-caja { overflow: hidden; border-radius: var(--r-md); margin-inline: auto; }
.muro-fb { border: 0; display: block; }

/* ============================================================
   CONTACTO
   ============================================================ */
.contacto { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.5rem; align-items: start; }
.contacto__datos { display: grid; gap: .8rem; }

.tarjeta-contacto {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.1rem 1.3rem; border-radius: var(--r-md);
  border: 1px solid var(--linea); background: var(--panel); color: var(--tinta);
  transition: border-color 220ms var(--salida), transform 220ms var(--salida);
}
.tarjeta-contacto:hover { text-decoration: none; }
.tarjeta-contacto:active { transform: scale(.99); }
.tarjeta-contacto__icono {
  width: 40px; height: 40px; border-radius: var(--r-sm); flex: none;
  display: grid; place-items: center; background: var(--aqua-tenue);
}
.tarjeta-contacto__icono svg { width: 20px; height: 20px; fill: var(--aqua-fuerte); }
.tarjeta-contacto--wpp .tarjeta-contacto__icono { background: rgba(14,122,102,.12); }
.tarjeta-contacto--wpp .tarjeta-contacto__icono svg { fill: var(--wpp-osc); }
.tarjeta-contacto__texto { display: flex; flex-direction: column; line-height: 1.35; }
.tarjeta-contacto__texto strong { font-size: .95rem; }
.tarjeta-contacto__texto small { font-size: .85rem; color: var(--texto-suave); }
.tarjeta-contacto__flecha { margin-left: auto; width: 16px; height: 16px; fill: var(--texto-suave); transition: transform 220ms var(--salida); }
@media (hover: hover) and (pointer: fine) {
  .tarjeta-contacto:hover { border-color: var(--aqua-medio); }
  .tarjeta-contacto:hover .tarjeta-contacto__flecha { transform: translateX(3px); }
}

.formulario { display: grid; gap: 1rem; }
.campo { display: grid; gap: .4rem; }
.campo label { font-size: .85rem; font-weight: 500; color: var(--tinta); }
.campo input, .campo select, .campo textarea {
  padding: .8rem 1rem; border-radius: var(--r-sm);
  border: 1px solid var(--linea); background: var(--fondo); color: var(--tinta);
  font: inherit; font-size: .95rem;
  transition: border-color 200ms var(--salida);
}
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--aqua-medio); }
.campo textarea { resize: vertical; min-height: 110px; }
.campo.tiene-error input, .campo.tiene-error textarea { border-color: var(--cerrado); }
.campo .error { font-size: .8rem; color: var(--cerrado); }
.form-msg { font-size: .9rem; min-height: 1.4em; }
.form-msg.ok { color: var(--abierto); }
.form-msg.error { color: var(--cerrado); }
.campo input.invalido, .campo textarea.invalido, .campo select.invalido { border-color: var(--cerrado); }

.mapa { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--linea); }
.mapa iframe { width: 100%; height: 320px; border: 0; display: block; }
.mapa__pie { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: 1rem 1.2rem; background: var(--panel); }
.mapa__dir { font-size: .92rem; color: var(--tinta); }
.mapa__pie .btn { margin-left: auto; }

/* ============================================================
   PIE
   ============================================================ */
.pie { background: var(--aqua-profundo); color: var(--sobre-osc-suave); padding: clamp(3rem, 6vw, 4.5rem) 0 2rem; position: relative; overflow: hidden; }
.pie__inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2rem; margin-bottom: 2.5rem; }
.pie .logo__texto strong { color: #fff; }
.pie .logo__texto small { color: var(--sobre-osc-suave); }
.pie__legal { margin-top: 1rem; font-size: .85rem; }
.pie__social h3 { font-size: .95rem; color: #fff; margin-bottom: .9rem; }
.pie__redes { display: grid; gap: .5rem; justify-items: start; }
.pie__red {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .5rem .95rem .5rem .5rem; border-radius: var(--r-full);
  border: 1px solid var(--sobre-osc-linea); background: var(--sobre-osc-vidrio);
  color: var(--sobre-osc); font-size: .88rem; font-weight: 500;
  transition: border-color 200ms var(--salida), background 200ms var(--salida), transform 120ms var(--salida);
}
.pie__red:active { transform: scale(.97); }
.pie__red svg { width: 26px; height: 26px; padding: 5px; border-radius: 50%; fill: #fff; flex: none; }
.pie__red--ig svg { background: linear-gradient(45deg, #F09433, #DC2743 45%, #BC1888); }
.pie__red--fb svg { background: #1877F2; }
@media (hover: hover) and (pointer: fine) {
  .pie__red:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); color: #fff; text-decoration: none; }
}

.pie__links { display: grid; gap: .5rem; list-style: none; padding: 0; align-content: start; }
.pie__links a { color: var(--sobre-osc-suave); font-size: .9rem; }
.pie__links a:hover { color: #fff; }
/* El copyright está dentro de .pie__inner, así que sin esto se acomoda
   como una tercera columna al lado de los links en vez de ir abajo. */
.pie__copy {
  grid-column: 1 / -1;
  margin-top: 1rem; padding-top: 1.6rem;
  border-top: 1px solid var(--sobre-osc-linea);
  text-align: center; font-size: .82rem;
}

/* ============================================================
   BOTÓN FLOTANTE DE WHATSAPP
   Va arriba del de chat: el chat responde consultas frecuentes,
   pero para hablar con alguien de verdad el camino es WhatsApp y
   tiene que estar a un toque en cualquier punto de la página.
   ============================================================ */
.wpp-flotante {
  position: fixed; right: 1.2rem; bottom: 5.2rem; z-index: 95;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--wpp-osc); color: #fff;
  box-shadow: var(--sombra-md);
  display: grid; place-items: center;
  transition: transform 200ms var(--salida), background 200ms var(--salida);
}
.wpp-flotante:hover { text-decoration: none; }
.wpp-flotante:active { transform: scale(.93); }
.wpp-flotante svg { width: 25px; height: 25px; fill: currentColor; }

/* El globito con el texto sale al pasar el mouse, desde el botón */
.wpp-flotante__globo {
  position: absolute; right: calc(100% + .6rem); top: 50%; translate: 0 -50%;
  padding: .45rem .9rem; border-radius: var(--r-full);
  background: var(--tinta); color: #fff; font-size: .85rem; font-weight: 500;
  white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translateX(8px) scale(.94); transform-origin: right center;
  transition: opacity 220ms var(--salida), transform 220ms var(--salida);
}
@media (hover: hover) and (pointer: fine) {
  .wpp-flotante:hover { background: #0b6455; }
  .wpp-flotante:hover .wpp-flotante__globo { opacity: 1; transform: none; }
}
/* Cuando el chat está abierto, el flotante estorba. El chatbot no marca
   nada en el body, pero sí pone aria-expanded en su burbuja: con :has()
   lo leemos desde acá sin tocar el JS del chat. */
body:has(#chat-burbuja[aria-expanded="true"]) .wpp-flotante {
  opacity: 0; visibility: hidden; transform: scale(.8) translateY(10px);
}

/* ============================================================
   CHATBOT
   ============================================================ */
.chat-burbuja {
  position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 95;
  width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer;
  /* Los <button> traen padding del navegador (1px 6px en Chrome): sin
     esto el marco de la foto queda de 44x54 y el recorte sale ovalado. */
  padding: 0;
  background: var(--aqua-fuerte); color: #fff;
  box-shadow: var(--sombra-md);
  display: grid; place-items: center;
  transition: transform 200ms var(--salida), background 200ms var(--salida);
}
.chat-burbuja:active { transform: scale(.93); }
.chat-burbuja svg { width: 25px; height: 25px; fill: currentColor; grid-area: 1/1; transition: opacity 200ms var(--salida), transform 200ms var(--salida); }

/* Daisy ocupa toda la burbuja: se entiende de una que del otro lado hay
   alguien, aunque ese alguien sea una perra y un guion de respuestas.
   Se agranda un poco y el circulo la recorta, para que se vea la cara y
   no la silueta entera con aire alrededor. */
/* El recorte va en un marco propio y no en el botón: el botón no puede
   llevar overflow:hidden porque se comería el globito, que también es
   hijo suyo y vive por fuera del círculo. */
.chat-burbuja__marco {
  grid-area: 1/1; place-self: center;
  width: 100%; height: 100%;
  border-radius: 50%; overflow: hidden; display: grid;
  transition: opacity 200ms var(--salida), transform 200ms var(--salida);
}
.chat-burbuja__cara {
  width: 100%; height: 100%; object-fit: contain;
  transform: scale(.92);
}
.chat-burbuja[aria-expanded="true"] .chat-burbuja__marco { opacity: 0; transform: scale(.8); }
.chat-burbuja__cerrar { grid-area: 1/1; opacity: 0; transform: rotate(-45deg); }
.chat-burbuja[aria-expanded="true"] .chat-burbuja__cerrar { opacity: 1; transform: none; }

/* --- El globito que le sale de la boca ---------------------
   Es el mismo elemento que antes mostraba el contador de mensajes sin
   leer: el chatbot lo esconde al abrirse, asi que hereda ese
   comportamiento sin tocar el JS. */
/* Va al costado y no arriba: arriba queda a dos pixeles del botón de
   WhatsApp en pantallas chicas, y al costado además apunta derecho a
   la boca. */
.chat-globo {
  position: absolute; right: calc(100% + 10px); bottom: 12px;
  display: grid; place-items: center;
  min-width: 26px; height: 26px; padding: 0 8px; border-radius: 10px;
  background: #fff; box-shadow: var(--sombra-md);
  font-family: 'Outfit', sans-serif; font-size: .92rem; font-weight: 600;
  color: var(--magenta); line-height: 1;
  transform-origin: right center;
  animation: globo-entra .5s var(--salida) 1.2s both;
}
.chat-globo[hidden] { display: none; }
/* La colita, apuntando a la cara */
.chat-globo::after {
  content: ""; position: absolute; right: -4px; bottom: 7px;
  width: 10px; height: 10px; background: #fff;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  transform: rotate(-8deg);
}
@keyframes globo-entra {
  from { opacity: 0; transform: scale(.6) translateX(10px); }
  to   { opacity: 1; transform: none; }
}


.chat-ventana {
  position: fixed; right: 1.2rem; bottom: 5.2rem; z-index: 96;
  width: min(calc(100vw - 2.4rem), 380px); max-height: min(78vh, 620px);
  display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--linea);
  border-radius: var(--r-lg); box-shadow: var(--sombra-lg); overflow: hidden;
  transform-origin: bottom right;
  animation: chat-entra .32s var(--salida) both;
}
.chat-ventana[hidden] { display: none; }
/* Nunca desde scale(0): nada en el mundo real aparece de la nada. */
@keyframes chat-entra {
  from { opacity: 0; transform: scale(.94) translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.chat-cabecera { display: flex; align-items: center; gap: .7rem; padding: .9rem 1rem; border-bottom: 1px solid var(--linea); }
/* Daisy es blanco sobre fondo transparente: sin el disco de color se
   perdería contra el panel blanco del chat. */
.chat-avatar {
  width: 38px; height: 38px; flex: none;
  border-radius: 50%; background: var(--aqua-tenue);
  display: grid; place-items: center; overflow: hidden;
}
.chat-avatar img, .chat-avatar svg { width: 100%; height: 100%; object-fit: contain; }
.chat-cabecera__texto h2 { font-size: .95rem; }
.chat-cabecera__texto p { font-size: .78rem; color: var(--texto-suave); }
.chat-cerrar { margin-left: auto; width: 30px; height: 30px; border: 0; background: none; cursor: pointer; border-radius: 50%; display: grid; place-items: center; }
.chat-cerrar svg { width: 16px; height: 16px; fill: var(--texto-suave); }

/* Con diez chips abiertos, la conversación quedaba en 137px de alto y el
   primer mensaje entraba cortado. El bloque de opciones se limita y
   scrollea, y el cuerpo tiene un piso. */
.chat-cuerpo { flex: 1; min-height: 170px; overflow-y: auto; padding: 1rem; display: grid; gap: .7rem; align-content: start; }
/* El chatbot arma sus mensajes con .msj y sus botones con .chip */
.msj {
  max-width: 86%; padding: .7rem .9rem; border-radius: var(--r-md);
  font-size: .92rem; line-height: 1.55;
  animation: msj-entra .28s var(--salida) both;
}
@keyframes msj-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.msj--bot { background: var(--aqua-tenue); color: var(--tinta); justify-self: start; border-bottom-left-radius: var(--r-xs); }
.msj--user { background: var(--aqua-fuerte); color: #fff; justify-self: end; border-bottom-right-radius: var(--r-xs); }
.msj--alerta { background: var(--amarillo-tenue); color: var(--tinta); border: 1px solid rgba(251,218,26,.45); }
.msj a { color: inherit; text-decoration: underline; }
.msj strong { color: inherit; }

/* Los tres puntitos de "está escribiendo" */
.escribiendo { display: flex; gap: 4px; padding: .8rem .9rem; justify-self: start; }
.escribiendo span {
  width: 7px; height: 7px; border-radius: 50%; background: var(--aqua-medio);
  animation: puntitos 1.2s ease-in-out infinite;
}
.escribiendo span:nth-child(2) { animation-delay: .16s; }
.escribiendo span:nth-child(3) { animation-delay: .32s; }
@keyframes puntitos {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30%           { opacity: 1;  transform: translateY(-4px); }
}

.chat-opciones {
  display: flex; flex-wrap: wrap; gap: .4rem; padding: .2rem 1rem .8rem;
  max-height: 136px; overflow-y: auto; flex: none;
}
.chip {
  display: inline-flex; align-items: center;
  padding: .45rem .9rem; border-radius: var(--r-full);
  border: 1px solid var(--aqua-borde); background: var(--panel); color: var(--aqua-fuerte);
  font: inherit; font-size: .84rem; cursor: pointer; text-align: left;
  transition: background 180ms var(--salida), transform 120ms var(--salida);
}
.chip:active { transform: scale(.96); }
.chip:hover { background: var(--aqua-tenue); text-decoration: none; }
.chip--wpp { border-color: var(--wpp-osc); color: var(--wpp-osc); }
.chat-form { display: flex; gap: .5rem; padding: .8rem 1rem; border-top: 1px solid var(--linea); }
.chat-form input { flex: 1; padding: .6rem .9rem; border-radius: var(--r-full); border: 1px solid var(--linea); background: var(--fondo); color: var(--tinta); font: inherit; font-size: .9rem; }
.chat-form button { width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--aqua-fuerte); cursor: pointer; display: grid; place-items: center; flex: none; }
.chat-form button svg { width: 17px; height: 17px; fill: #fff; }
.chat-disclaimer { padding: 0 1rem .8rem; font-size: .74rem; color: var(--texto-suave); text-align: center; }

/* ============================================================
   REVELADOS ATADOS AL SCROLL

   Donde el navegador lo soporta, la animación la maneja el
   scroll: corre fuera del hilo principal y se puede frenar o
   revertir a mitad de camino. Donde no, el JS agrega la clase
   "visible" y se ve igual, sin movimiento.
   ============================================================ */
.reveal { opacity: 1; }

@supports (animation-timeline: view()) {
  .reveal {
    animation: revelar linear both;
    animation-timeline: view();
    animation-range: entry 6% cover 30%;
  }
  /* El logo de la portada se achica y se va apagando a medida que
     salís del inicio, en vez de quedarse plantado hasta desaparecer
     de golpe por el borde. */
  .marca-grande {
    animation: alejar linear both;
    animation-timeline: view();
    animation-range: exit 0% exit 100%;
  }

  /* La foto crece mientras la escena está anclada. El rango "contain"
     es justo el tramo en que el contenedor alto cubre la pantalla. */
  .foto-local {
    animation: acercar linear both;
    animation-timeline: --escena;
    animation-range: contain 0% contain 100%;
  }
}
@keyframes revelar {
  from { opacity: 0; transform: translateY(38px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes acercar {
  from { transform: scale(.76); border-radius: 34px; }
  70%  { transform: scale(1);   border-radius: 0; }
  to   { transform: scale(1);   border-radius: 0; }
}
@keyframes alejar {
  from { transform: none; opacity: 1; }
  to   { transform: scale(.72) translateY(-14%); opacity: 0; }
}

/* Respaldo por JS para los navegadores sin scroll-driven */
/* Sin animaciones atadas al scroll la foto no se achica nunca: la escena
   deja de ser escena y la foto va en su tamaño normal, dentro del ancho
   del contenido. */
.sin-timeline .escena { height: auto; }
.sin-timeline .escena__fija { position: static; height: auto; }
.sin-timeline .foto-local {
  width: min(92vw, var(--ancho)); height: auto; aspect-ratio: 16 / 10;
  margin-inline: auto; border-radius: var(--r-xl);
}
.sin-timeline .reveal { opacity: 0; transform: translateY(38px); transition: opacity .7s var(--salida), transform .7s var(--salida); }
.sin-timeline .reveal.visible { opacity: 1; transform: none; }

/* ============================================================
   MENÚ EN PANTALLAS ANGOSTAS

   Los seis ítems más el botón de WhatsApp y el del tema no entran por
   debajo de ~1000 px: el encabezado se desbordaba y la página entera
   ganaba scroll horizontal. Por eso el hamburguesa aparece acá y no en
   el punto de quiebre de la portada, que es más abajo.
   ============================================================ */
@media (max-width: 1023px) {
  /* El menú es hijo del encabezado, así que por más z-index que le
     pongamos siempre se dibuja encima de él y tapa el logo y el botón
     de cerrar. Por eso baja DESDE ABAJO de la barra en vez de cubrirla. */
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: .3rem;
    padding: 1rem 1.5rem 1.6rem;
    background: var(--panel);
    border-bottom: 1px solid var(--linea);
    box-shadow: var(--sombra-lg);
    opacity: 0; transform: translateY(-10px); visibility: hidden;
    transition: opacity 260ms var(--salida), transform 260ms var(--salida), visibility 260ms;
  }
  .nav.abierto { opacity: 1; transform: none; visibility: visible; }
  .nav a:not(.nav__cta) { padding: .8rem 0; border-bottom: 1px solid var(--linea); font-size: 1rem; }
  .nav a:not(.nav__cta)::after { display: none; }
  .nav .nav__cta { margin-top: 1rem; }
  .hamburguesa { display: flex; order: 3; }
  .tema { order: 2; margin-left: auto; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .dos-columnas--desigual { grid-template-columns: 1fr; }
  .semana__dias { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 820px) {
  .marca-grande__caja { width: min(56vw, 230px); }
  .hero__fondo .marca-agua { width: 220vw; height: 104vw; }

  .barra-superior__inner { justify-content: center; gap: .9rem; font-size: .78rem; }
  .barra-superior__sep, .barra-superior__lugar { display: none; }
}

@media (max-width: 560px) {
  .numeros { grid-template-columns: 1fr 1fr; }
  .wpp-flotante { right: .8rem; bottom: 4.6rem; }
  .escena { height: 190vh; }
  .semana__dias { grid-template-columns: 1fr; gap: .4rem; }
  .dia { flex-direction: row; align-items: center; justify-content: space-between; text-align: left; padding: .8rem 1rem; }
  .dia__horas { text-align: right; }
  .dia__hoy { position: static; translate: none; }
  .mapa__pie .btn { margin-left: 0; width: 100%; }
  .chat-ventana { right: .6rem; left: .6rem; width: auto; bottom: 4.8rem; }
  .chat-burbuja { right: .8rem; bottom: .8rem; }
}

/* ============================================================
   MENOS MOVIMIENTO
   No es apagar todo: se van los desplazamientos y las escalas,
   queda el cambio de opacidad, que sigue ayudando a entender
   que algo apareció.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .15ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; animation: none !important; }
  .foto-local, .marca-grande { transform: none !important; opacity: 1 !important; animation: none !important; }
  .escena { height: auto; }
  .escena__fija { position: static; height: auto; padding-block: 2rem; }
  .foto-local {
    width: min(92vw, var(--ancho)); height: auto; aspect-ratio: 16 / 10;
    margin-inline: auto; border-radius: var(--r-xl);
  }
  .marcas__pista { animation: none; }
  .chat-globo { animation: none; opacity: 1; transform: none; }
  .hero__baja span, .estado__punto { animation: none; }
  .iso.animar * { animation: none !important; }
}

@media (prefers-reduced-transparency: reduce) {
  .cabecera { background: var(--fondo); backdrop-filter: none; }
  .pastilla, .hero__chips li, .tarjeta-rapida, .btn--vidrio, .aviso {
    backdrop-filter: none; background: rgba(255,255,255,.14);
  }
}

/* ============================================================
   MODO OSCURO
   Se activa con el botón del encabezado, que le pone
   data-tema="oscuro" al <html>. La preferencia queda guardada
   en el navegador del visitante.
   ============================================================ */
:root[data-tema="oscuro"] {
  /* El aqua, el amarillo y el magenta de la marca ya se leen bien sobre
     fondo oscuro, así que quedan iguales. Lo que sí hay que dar vuelta
     son las variantes "tenue", que son fondos claros. */
  --aqua:        #64C2C8;
  --aqua-medio:  #4EB2C0;
  --aqua-fuerte: #7FD5DF;
  --aqua-hondo:  #0B2E35;
  --aqua-tenue:  #10333A;
  --aqua-borde:  #1E4C56;

  --amarillo-tenue: #332B08;
  --magenta-tenue:  #35101F;
  --magenta-hondo:  #F27A9F;
  --gris-tenue:     #14313A;

  --tinta:       #EAF6F8;
  --texto:       #A9C6CD;
  --texto-suave: #7C9BA3;
  --linea:       #163840;
  --fondo:       #08222A;
  --fondo-alt:   #0A2830;
  --panel:       #0D2C35;

  --sombra-sm: 0 1px 3px rgba(0, 0, 0, .35);
  --sombra-md: 0 8px 26px rgba(0, 0, 0, .45);
  --sombra-lg: 0 20px 55px rgba(0, 0, 0, .6);
}
[data-tema="oscuro"] .cabecera { background: rgba(8, 34, 42, .74); }
[data-tema="oscuro"] .cabecera.pegada { border-bottom-color: rgba(255,255,255,.08); }
[data-tema="oscuro"] .barra-superior { background: #061A20; }
[data-tema="oscuro"] .hero { background: #061A20; color: var(--texto); }
[data-tema="oscuro"] .hero h1 { color: #fff; }
[data-tema="oscuro"] .hero h1 .destacado { color: var(--aqua); }
[data-tema="oscuro"] .hero .estado,
[data-tema="oscuro"] .tarjeta-rapida dd { color: #fff; }
[data-tema="oscuro"] .hero__fondo .marca-agua { color: rgba(100,194,204,.10); }
[data-tema="oscuro"] .hero__fondo::after { background: radial-gradient(circle, rgba(100,194,204,.2), transparent 66%); }
[data-tema="oscuro"] .pastilla,
[data-tema="oscuro"] .hero__chips li,
[data-tema="oscuro"] .tarjeta-rapida { background: rgba(255,255,255,.06); border-color: var(--sobre-osc-linea); }
[data-tema="oscuro"] .pastilla__punto { background: var(--amarillo); }
[data-tema="oscuro"] .hero .btn--fantasma {
  color: #fff; border-color: var(--sobre-osc-linea); background: var(--sobre-osc-vidrio);
}
[data-tema="oscuro"] .seccion--oscura,
[data-tema="oscuro"] .pie { background: #061A20; }
[data-tema="oscuro"] .servicio:nth-child(3n+3) { background: #061A20; }
[data-tema="oscuro"] .buscador__limpiar { background: var(--gris-tenue); }
[data-tema="oscuro"] .chat-globo,
[data-tema="oscuro"] .chat-globo::after { background: var(--panel); }
[data-tema="oscuro"] .dia.es-hoy { background: var(--aqua-medio); border-color: var(--aqua-medio); }
[data-tema="oscuro"] .dia.es-hoy .dia__nombre,
[data-tema="oscuro"] .dia.es-hoy .dia__horas { color: #06232A; }
[data-tema="oscuro"] .lista-turnos .es-hoy strong,
[data-tema="oscuro"] .turno-dia { color: var(--magenta-claro); }
[data-tema="oscuro"] .lista-turnos .es-hoy .turno-dia { background: var(--magenta); color: #fff; }
[data-tema="oscuro"] .red--fb .red__icono { background: #1877F2; }
/* Los logos de marca son tinta oscura sobre transparente: en modo
   oscuro desaparecen. Se invierten en escala de grises, no con
   brightness(0) invert(1), que convertiría los que tienen texto calado
   (La Roche-Posay) en una silueta blanca maciza. */
[data-tema="oscuro"] .marca img { filter: grayscale(1) invert(1); opacity: .85; }
[data-tema="oscuro"] .marca:hover img { opacity: 1; }
[data-tema="oscuro"] .iso--calado .iso__trazo path { fill: #061A20; }