/* ===========================================================
   KNEA SPA — Hoja de estilos
   Paleta y tono definidos en CLAUDE.md. Mobile-first, sin build.
   =========================================================== */

/* ---------- Tokens de marca ---------- */
:root{
  --knea-yellow: #f9fa02;
  --knea-purple: #68007a;
  --knea-purple-dark: #3a0044;
  --knea-purple-darker: #22002a;
  --knea-coral: #e24759;
  --knea-coral-dark: #c22f40;
  --knea-black: #000000;
  --knea-white: #ffffff;
  --knea-tint: rgba(104,0,122,.06); /* morado al 6% para secciones tintadas */

  --fuente-titulo: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --fuente-texto: 'DM Sans', 'Poppins', -apple-system, sans-serif;

  --radio: 22px;
  --radio-sm: 12px;
  --sombra-suave: 0 20px 45px -25px rgba(34,0,42,.35);
  --sombra-fuerte: 0 30px 60px -20px rgba(34,0,42,.5);

  --dur-rapida: .25s;
  --dur-media: .6s;
  --dur-lenta: 1.1s;
  --easing: cubic-bezier(.22,.68,0,1);

  --ancho-maximo: 1180px;
}

/* ---------- Reset base ---------- */
*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: var(--fuente-texto);
  color: var(--knea-black);
  background: var(--knea-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4,p{ margin: 0; }
button{ font: inherit; cursor: pointer; }

h1,h2,h3,h4{ font-family: var(--fuente-titulo); font-weight: 600; letter-spacing: .01em; }

.skip-link{
  position: absolute; left: -999px; top: 0; z-index: 999;
  background: var(--knea-purple); color: var(--knea-white); padding: .8rem 1.2rem; border-radius: 0 0 8px 0;
}
.skip-link:focus{ left: 0; }

:focus-visible{ outline: 3px solid var(--knea-coral); outline-offset: 2px; }

/* Coral oscuro por defecto (AA sobre blanco); sobre fondo morado se vuelve amarillo (ver más abajo). */
.dato-pendiente{ color: var(--knea-coral-dark); font-style: italic; }
.seccion--morado .dato-pendiente,
.site-footer .dato-pendiente{ color: var(--knea-yellow); }

/* ---------- Layout utilitario ---------- */
.contenedor{ max-width: var(--ancho-maximo); margin: 0 auto; padding: 0 1.25rem; }
.contenedor--angosto{ max-width: 820px; }
.grid-2{ display: grid; gap: 2.5rem; }
@media (min-width: 900px){
  .grid-2{ grid-template-columns: 1fr 1fr; align-items: center; gap: 4rem; }
}

.seccion{ padding: 5.5rem 0; position: relative; }
.seccion--morado{ background: var(--knea-purple); color: var(--knea-white); }
.seccion--tintado{ background: var(--knea-tint); }
@media (min-width: 900px){ .seccion{ padding: 8rem 0; } }

.eyebrow{
  font-family: var(--fuente-texto); text-transform: uppercase; letter-spacing: .22em;
  /* Coral oscuro (no el coral brillante) para cumplir AA a este tamaño pequeño sobre blanco. */
  font-size: .75rem; font-weight: 600; color: var(--knea-coral-dark); margin-bottom: 1rem; display:block;
}
.eyebrow--claro{ color: var(--knea-yellow); }

.titulo-seccion{ font-size: clamp(2rem, 4.5vw, 3.2rem); line-height: 1.1; color: var(--knea-purple); }
.titulo-seccion--claro{ color: var(--knea-white); }
.titulo-mini{ font-family: var(--fuente-titulo); font-size: 1.5rem; margin: 2rem 0 1rem; }
.subtitulo-seccion{ margin-top: 1rem; font-size: 1.1rem; max-width: 60ch; opacity: .8; }
.texto-claro{ color: rgba(255,255,255,.88); line-height: 1.7; margin-top: 1.2rem; }

.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .95rem 1.8rem; border-radius: 999px; font-weight: 600; font-size: .95rem;
  transition: transform var(--dur-rapida) var(--easing), box-shadow var(--dur-rapida) var(--easing), background var(--dur-rapida);
  border: 2px solid transparent; white-space: nowrap;
}
.btn:hover{ transform: translateY(-2px); }
/* Usamos coral oscuro (no el coral brillante de marca) como fondo de botón:
   coral brillante + texto blanco da ~3.97:1, por debajo del 4.5:1 AA. */
.btn--coral{ background: var(--knea-coral-dark); color: var(--knea-white); box-shadow: var(--sombra-suave); }
.btn--coral:hover{ background: var(--knea-purple); }
.btn--outline{ border-color: var(--knea-white); color: var(--knea-white); }
.btn--outline:hover{ background: var(--knea-white); color: var(--knea-purple); }
.btn--outline-claro{ border-color: var(--knea-yellow); color: var(--knea-yellow); margin-top: 2rem; }
.btn--outline-claro:hover{ background: var(--knea-yellow); color: var(--knea-purple); }
.btn--outline-morado{ border-color: var(--knea-purple); color: var(--knea-purple); }
.btn--outline-morado:hover{ background: var(--knea-purple); color: var(--knea-white); }
.btn--sm{ padding: .6rem 1.3rem; font-size: .85rem; }
.btn--lg{ padding: 1.2rem 2.6rem; font-size: 1.05rem; }
/* white-space:normal porque .btn trae nowrap por defecto: con textos largos
   como "Consultar zonas y precios" dentro de una tarjeta angosta (360px),
   el botón se podía desbordar del borde en vez de partirse en dos líneas. */
.btn--block{ width: 100%; margin-top: 1.4rem; white-space: normal; }

/* ===========================================================
   CORTINILLA DE ENTRADA — telón de cine: dos paneles que se abren
   desde el centro hacia los costados. Animación deliberadamente
   lenta (1.8s) para que se sienta cinematográfica, no un spinner.
   =========================================================== */
#cortinilla{ position: fixed; inset: 0; z-index: 9999; }
#cortinilla.oculta{ visibility: hidden; pointer-events: none; }

.cortinilla-panel{
  position: absolute; top: 0; bottom: 0; width: 50%; overflow: hidden; background: var(--knea-purple-darker);
  transition: transform 1.8s cubic-bezier(.76,0,.18,1);
}
.cortinilla-panel--izq{ left: 0; }
.cortinilla-panel--der{ right: 0; }
/* Cada panel se desliza hacia SU propio costado, como un telón real —
   el logo va DENTRO del panel, así que viaja pegado a él automáticamente. */
#cortinilla.abriendo .cortinilla-panel--izq{ transform: translateX(-100%); }
#cortinilla.abriendo .cortinilla-panel--der{ transform: translateX(100%); }

/* El logo completo mide 180px; cada panel muestra solo su mitad (90px),
   centrada exactamente sobre la línea donde se unen los dos paneles —
   por eso "right:-90px" / "left:-90px": empuja la imagen para que su
   propio centro quede justo en el borde del panel, y overflow:hidden
   recorta la otra mitad. Al abrirse, cada mitad viaja con su panel. */
.cortinilla-logo-mitad{
  position: absolute; top: 50%; width: 180px; height: auto;
  /* El centrado vertical va aquí, fijo, y NO solo dentro de @keyframes:
     si solo viviera en la animación, al apagarla con animation:none el
     navegador pierde este translateY y el logo "cae" de golpe a mitad de
     su propia altura justo cuando el telón empieza a abrirse. */
  transform: translateY(-50%);
  animation: pulso-logo-mitad 1.6s ease-in-out infinite;
}
.cortinilla-panel--izq .cortinilla-logo-mitad{ right: -90px; transform-origin: right center; }
.cortinilla-panel--der .cortinilla-logo-mitad{ left: -90px; transform-origin: left center; }
@keyframes pulso-logo-mitad{
  0%,100%{ transform: translateY(-50%) scale(1); opacity: .9; }
  50%{ transform: translateY(-50%) scale(1.06); opacity: 1; }
}
/* animation:none detiene el pulso al abrir: si siguiera corriendo pelearía
   visualmente con el desplazamiento del panel en vez de viajar limpio con él. */
#cortinilla.abriendo .cortinilla-logo-mitad{ animation: none; }

/* ---------- Barra de progreso de scroll ---------- */
#barra-progreso{
  position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: var(--knea-yellow);
  z-index: 1000; transition: width .1s linear;
}

/* ===========================================================
   BANNER DE OFERTA
   =========================================================== */
/* El banner va FIJO arriba de todo (por encima incluso del header, que
   también es fixed) y empuja al header hacia abajo con una variable CSS que
   pone app.js según el alto real del banner — si el banner se queda en flujo
   normal (como estaba antes) el header fijo lo tapa igual, porque un
   elemento fixed no respeta el documento, solo el viewport. Sin esto el
   header y el banner literalmente se dibujan uno encima del otro. */
:root{ --altura-banner-oferta: 0px; }
body{ padding-top: var(--altura-banner-oferta); }
.banner-oferta{
  position: fixed; top: 0; left: 0; right: 0; z-index: 650;
  /* Coral oscuro (no el brillante) para que el texto blanco mantenga AA en todo el degradado. */
  background: linear-gradient(115deg, var(--knea-purple) 0%, var(--knea-coral-dark) 100%);
  color: var(--knea-white); padding: 1.1rem 1.2rem;
}
.banner-oferta__contenido{
  max-width: var(--ancho-maximo); margin: 0 auto; display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
}
.banner-oferta__foto{
  width: 64px; height: 64px; border-radius: 14px; object-fit: cover; flex-shrink: 0;
  box-shadow: 0 6px 16px -6px rgba(0,0,0,.5);
}
.banner-oferta__sello{
  flex-shrink: 0; width: 64px; height: 64px; border-radius: 50%; background: var(--knea-yellow); color: var(--knea-purple);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem;
  transform: rotate(-8deg); animation: pulso-sello 2.4s ease-in-out infinite; text-align: center; line-height: 1.1;
}
@keyframes pulso-sello{ 0%,100%{ transform: rotate(-8deg) scale(1);} 50%{ transform: rotate(-8deg) scale(1.08);} }
.banner-oferta__texto{ flex: 1; min-width: 200px; }
.banner-oferta__nombre{ font-family: var(--fuente-titulo); font-size: 1.3rem; margin: 0; }
.banner-oferta__desc{ font-size: .85rem; opacity: .9; margin: .2rem 0; }
.banner-oferta__fin{ font-size: .72rem; opacity: .75; margin: 0; }
.banner-oferta__contador{ font-weight: 700; font-size: .95rem; letter-spacing: .04em; margin-top: .2rem; }
.banner-oferta__cerrar{
  position: absolute; top: .4rem; right: .6rem; background: transparent; border: none; color: var(--knea-white);
  font-size: 1.4rem; line-height: 1; padding: .3rem .6rem; opacity: .8;
}
.banner-oferta__cerrar:hover{ opacity: 1; }

.precio-tachado{ text-decoration: line-through; opacity: .6; margin-right: .5rem; font-size: .9em; }
.precio-descuento-badge{
  display: inline-block; background: var(--knea-yellow); color: var(--knea-purple); font-weight: 700;
  font-size: .72rem; padding: .15rem .5rem; border-radius: 999px; margin-left: .5rem; vertical-align: middle;
}

/* ===========================================================
   HEADER / NAV
   =========================================================== */
.site-header{
  position: fixed; top: var(--altura-banner-oferta); left: 0; right: 0; z-index: 600;
  transition: background var(--dur-media) var(--easing), box-shadow var(--dur-media), top .2s ease;
  background: transparent;
}
.site-header.con-fondo{ background: rgba(255,255,255,.92); backdrop-filter: blur(10px); box-shadow: 0 8px 30px -20px rgba(0,0,0,.4); }

.nav{ max-width: var(--ancho-maximo); margin: 0 auto; padding: .85rem 1.25rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; }

.nav__logo{ display: flex; align-items: center; gap: .6rem; font-family: var(--fuente-titulo); font-size: 1.15rem; font-weight: 600; color: var(--knea-white); white-space: nowrap; }
/* En pantallas angostas, "Agendar" + el ícono de menú ya ocupan bastante
   espacio junto al logo completo — eso hacía que "Knea Spa" se partiera en
   dos líneas, la barra creciera de alto, y el hero quedara tapado debajo.
   Por eso el nombre se oculta y solo queda el símbolo (sigue siendo el
   logo/enlace al inicio, con su texto accesible para lectores de pantalla). */
.nav__logo span{ display: none; }
@media (min-width: 420px){ .nav__logo span{ display: inline; } }
.site-header.con-fondo .nav__logo{ color: var(--knea-purple); }
.nav__logo-img{ height: 34px; width: auto; }
.nav__logo-img--morado{ display: none; }
.site-header.con-fondo .nav__logo-img--amarillo{ display: none; }
.site-header.con-fondo .nav__logo-img--morado{ display: block; }

/* Menú SIEMPRE hamburguesa (en cualquier ancho): con 10 enlaces, un menú
   horizontal se aprieta o se parte en dos líneas tarde o temprano en algún
   tamaño de pantalla. El panel deslizante no tiene ese problema nunca,
   y de paso libera espacio en la barra para que "Agendar" quede solo. */
.nav__acciones{ display: flex; align-items: center; gap: .9rem; }
.nav__agendar{ white-space: nowrap; }
.nav__icono-social{ display: flex; color: var(--knea-white); opacity: .9; transition: opacity var(--dur-rapida); }
.nav__icono-social:hover{ opacity: 1; }
.site-header.con-fondo .nav__icono-social{ color: var(--knea-purple); }

.nav__menu{
  position: fixed; inset: 0 0 0 30%; z-index: 9; overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column;
  padding: 1.6rem 2rem 2.2rem; transform: translateX(100%); transition: transform var(--dur-media) var(--easing);
  background:
    radial-gradient(90% 60% at 100% 100%, rgba(226,71,89,.14) 0%, transparent 60%),
    linear-gradient(165deg, var(--knea-purple) 0%, var(--knea-purple-dark) 60%, #0d0010 100%);
  box-shadow: -30px 0 60px -20px rgba(0,0,0,.6);
  border-left: 1px solid rgba(249,250,2,.25);
}
.nav__menu.abierto{ transform: translateX(0); }

/* Mandala de marca como textura de fondo: sutil, no compite con los enlaces. */
.nav__menu-marca{
  position: absolute; right: -8%; bottom: -8%; width: 65%; max-width: 320px; height: auto;
  opacity: .07; pointer-events: none; z-index: 0;
}

.nav__menu-cabecera{ position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.nav__menu-eyebrow{ text-transform: uppercase; letter-spacing: .22em; font-size: .68rem; font-weight: 600; color: var(--knea-yellow); margin: 0; }
.nav__cerrar{
  background: none; border: 1px solid rgba(249,250,2,.35); color: var(--knea-yellow); width: 34px; height: 34px;
  border-radius: 50%; font-size: 1.3rem; line-height: 1; display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-rapida), transform var(--dur-rapida);
}
.nav__cerrar:hover{ background: rgba(249,250,2,.15); transform: rotate(90deg); }

.nav__menu-lista{ position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; justify-content: center; margin: 0; padding: 0; }
.nav__menu-lista li{ border-bottom: 1px solid rgba(255,255,255,.08); }
.nav__menu-lista li:last-child{ border-bottom: none; }
.nav__menu-lista a{
  position: relative; display: block; padding: .85rem .1rem; font-family: var(--fuente-titulo);
  font-size: 1.4rem; font-weight: 600; color: var(--knea-white); transition: color var(--dur-rapida), padding-left var(--dur-rapida);
}
.nav__menu-lista a::before{
  content: ""; position: absolute; left: 0; bottom: .55rem; width: 0; height: 2px; background: var(--knea-coral);
  transition: width var(--dur-rapida) var(--easing);
}
.nav__menu-lista a:hover{ color: var(--knea-yellow); padding-left: .6rem; }
.nav__menu-lista a:hover::before{ width: 22px; }

.nav__menu-cta{ position: relative; z-index: 1; width: 100%; margin-top: 1.4rem; white-space: normal; }

/* Entrada escalonada de cada enlace cuando el panel se abre. */
.nav__menu-lista li{ opacity: 0; transform: translateX(18px); transition: opacity .5s ease, transform .5s ease; }
.nav__menu.abierto .nav__menu-lista li{ opacity: 1; transform: translateX(0); }
.nav__menu.abierto .nav__menu-lista li:nth-child(1){ transition-delay: .08s; }
.nav__menu.abierto .nav__menu-lista li:nth-child(2){ transition-delay: .12s; }
.nav__menu.abierto .nav__menu-lista li:nth-child(3){ transition-delay: .16s; }
.nav__menu.abierto .nav__menu-lista li:nth-child(4){ transition-delay: .20s; }
.nav__menu.abierto .nav__menu-lista li:nth-child(5){ transition-delay: .24s; }
.nav__menu.abierto .nav__menu-lista li:nth-child(6){ transition-delay: .28s; }
.nav__menu.abierto .nav__menu-lista li:nth-child(7){ transition-delay: .32s; }
.nav__menu.abierto .nav__menu-lista li:nth-child(8){ transition-delay: .36s; }
.nav__menu.abierto .nav__menu-lista li:nth-child(9){ transition-delay: .40s; }
.nav__menu.abierto .nav__menu-lista li:nth-child(10){ transition-delay: .44s; }

/* Fondo oscuro detrás del panel: al tocarlo se cierra el menú. Sin esto,
   el resto de la pantalla quedaba "bloqueado" (sin scroll) pero sin ninguna
   forma obvia de volver — por eso se sentía que la página "se perdía". */
.nav__overlay{
  position: fixed; inset: 0; z-index: 8; background: rgba(5,0,7,.55); border: none; padding: 0; margin: 0;
  opacity: 0; pointer-events: none; transition: opacity var(--dur-media) var(--easing);
}
.nav__overlay.visible{ opacity: 1; pointer-events: auto; }

/* position:relative es la corrección clave: sin "position" el z-index de un
   elemento NO tiene ningún efecto (queda "static"), así que este botón
   quedaba literalmente tapado por el fondo oscuro y el panel al abrirse —
   por eso no había forma de volver a tocarlo para cerrar el menú. */
.nav__toggle{
  position: relative; z-index: 10;
  display: flex; flex-direction: column; gap: 5px; background: none; border: none; padding: .5rem;
}
.nav__toggle span{ width: 26px; height: 2px; background: var(--knea-white); transition: transform var(--dur-rapida), opacity var(--dur-rapida), background var(--dur-rapida); }
.site-header.con-fondo .nav__toggle span{ background: var(--knea-purple); }
.nav__toggle[aria-expanded="true"] span{ background: var(--knea-white) !important; }
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

@media (min-width: 540px){ .nav__menu{ inset: 0 0 0 60%; } }
@media (min-width: 900px){ .nav__menu{ inset: 0 0 0 72%; } }

/* ===========================================================
   HERO
   =========================================================== */
.hero{
  position: relative; min-height: 100svh; display: flex; align-items: flex-end;
  overflow: hidden; color: var(--knea-white);
}
/* Más alto que el hero (116%) y descentrado hacia arriba (-8%) a propósito:
   el parallax de app.js lo traslada en Y al hacer scroll, y sin este
   "colchón" de sobra se asomaría el fondo #0d0010 por un borde al moverse.
   El escalado/zoom (ken-burns) va en la <img> hija, no aquí, para que no
   compita por la misma propiedad transform con el translateY del parallax. */
.hero__fondo{ position: absolute; left: 0; right: 0; top: -8%; height: 116%; z-index: 0; background: #0d0010; will-change: transform; }
.hero__foto{
  width: 100%; height: 100%; object-fit: cover;
  /* Ancla el encuadre hacia donde está la cara en la foto (lado derecho,
     tercio superior) para que, al recortar por aspect-ratio en pantallas
     angostas, la cara siga visible en vez de perderse por fuera del marco. */
  object-position: 72% 22%;
  animation: ken-burns-hero 18s ease-in-out infinite alternate;
}
@keyframes ken-burns-hero{ from{ transform: scale(1);} to{ transform: scale(1.08);} }
.hero__overlay{
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(5,0,7,.45) 0%, rgba(5,0,7,.35) 35%, rgba(5,0,7,.6) 70%, rgba(5,0,7,.95) 100%);
}
/* padding-top con margen de sobra para que el header fijo (que flota
   transparente sobre el hero) nunca quede montado sobre el eyebrow/título. */
.hero__contenido{ position: relative; z-index: 2; max-width: var(--ancho-maximo); margin: 0 auto; padding: 7rem 1.25rem 4.5rem; width: 100%; }
.hero__titulo{ font-size: clamp(2.4rem, 7vw, 4.6rem); line-height: 1.06; margin: .6rem 0 1.4rem; color: var(--knea-white); }
.hero__texto{ max-width: 62ch; font-size: 1.05rem; line-height: 1.7; opacity: .92; }
.hero__cierre{ font-family: var(--fuente-titulo); font-style: italic; font-size: 1.3rem; margin-top: 1.2rem; color: var(--knea-yellow); }
.hero__cta{ display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.2rem; }

/* Máscara de revelado letra/línea por línea para titulares (persiana) */
[data-reveal-texto], [data-reveal-mascara]{ overflow: hidden; }
.reveal-linea span, .titulo-linea{ display: inline-block; }

/* ===========================================================
   PLACEHOLDERS DE IMAGEN — elegantes, marcados, sin fabricar fotos
   =========================================================== */
.media-placeholder{
  position: relative; overflow: hidden; border-radius: var(--radio);
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 120% at 20% 15%, var(--knea-purple) 0%, var(--knea-purple-dark) 45%, var(--knea-purple-darker) 100%);
  min-height: 220px;
}
.media-placeholder[data-tone="coral"]{
  background: radial-gradient(120% 120% at 80% 20%, var(--knea-coral-dark) 0%, var(--knea-purple-dark) 55%, var(--knea-purple-darker) 100%);
}
.media-placeholder[data-tone="violeta-claro"]{
  background: radial-gradient(120% 120% at 25% 80%, var(--knea-purple) 0%, var(--knea-purple-darker) 100%);
  border: 1px solid rgba(249,250,2,.18);
}
.media-placeholder::after{
  content:""; position: absolute; inset: 0; border-radius: inherit;
  background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px);
  background-size: 14px 14px; opacity: .5; mix-blend-mode: overlay;
}
.ph-mark{ opacity: .8; filter: drop-shadow(0 6px 18px rgba(0,0,0,.35)); position: relative; z-index: 1; animation: ken-burns-suave 14s ease-in-out infinite alternate; }
.ph-label{
  position: absolute; bottom: .9rem; left: 50%; transform: translateX(-50%); z-index: 1;
  font-size: .72rem; letter-spacing: .05em; color: rgba(255,255,255,.7); font-style: italic; text-align: center; width: 90%;
}
.media-placeholder--alta{ min-height: 340px; }
.media-placeholder--mapa{ min-height: 260px; }

/* Contenedor de foto real (no placeholder): mismo radio/alto que arriba,
   pero sin degradado de relleno — la foto llena todo el espacio. */
.foto-seccion{ position: relative; overflow: hidden; border-radius: var(--radio); }
/* El transform (escala + translateY del parallax) lo arma app.js por
   completo en cada frame, por eso no hay transform fijo aquí: si lo
   hubiera, el primer frame del JS lo pisaría de golpe y se notaría un salto. */
.foto-seccion__img{ width: 100%; height: 100%; object-fit: cover; display: block; will-change: transform; }

/* Ken Burns: zoom lento continuo (se usa en los placeholders de imagen) */
@keyframes ken-burns-suave{ from{ transform: scale(1);} to{ transform: scale(1.09);} }

/* ---------- Esencia (Sobre Knea) ---------- */
.esencia-grid{ display: grid; gap: 1.1rem; margin-top: 1.2rem; grid-template-columns: 1fr; }
@media (min-width: 620px){ .esencia-grid{ grid-template-columns: 1fr 1fr; } }
.esencia-card{
  background: rgba(255,255,255,.06); border: 1px solid rgba(249,250,2,.22); border-radius: var(--radio-sm);
  padding: 1.4rem; transition: transform var(--dur-rapida) var(--easing), background var(--dur-rapida);
}
.esencia-card:hover{ transform: translateY(-4px); background: rgba(255,255,255,.1); }
.esencia-card h4{ color: var(--knea-yellow); font-size: 1.2rem; margin-bottom: .5rem; }
.esencia-card p{ color: rgba(255,255,255,.85); font-size: .92rem; line-height: 1.55; }

.cierre-cita{ font-family: var(--fuente-titulo); font-style: italic; font-size: 1.35rem; color: var(--knea-yellow); margin-top: 2.2rem; }

/* ===========================================================
   TARJETAS DE SERVICIO
   =========================================================== */
.tarjetas-grid{ display: grid; gap: 1.8rem; margin-top: 3rem; grid-template-columns: 1fr; }
@media (min-width: 640px){ .tarjetas-grid{ grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px){ .tarjetas-grid{ grid-template-columns: repeat(3, 1fr); } }
.tarjetas-grid--una{ max-width: 480px; margin-left: auto; margin-right: auto; }
@media (min-width: 640px){ .tarjetas-grid--una{ grid-template-columns: 1fr; } }

.tarjeta{
  background: var(--knea-white); border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra-suave);
  display: flex; flex-direction: column; transition: transform var(--dur-media) var(--easing), box-shadow var(--dur-media);
  will-change: transform;
}
.tarjeta:hover{ box-shadow: var(--sombra-fuerte); }
.tarjeta--claro{ background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); }
.tarjeta__media{ position: relative; aspect-ratio: 4/3; overflow: hidden; }
.tarjeta__media .ph-mark{ width: 64px; }

/* Tarjeta destacada: servicio clave que se quiere resaltar sobre las demás
   de su misma grilla (ej. masajes postoperatorios). Borde + sombra amarilla
   sutil, nunca relleno amarillo grande (ver regla de color del CLAUDE.md). */
.tarjeta--destacada{ border: 2px solid var(--knea-yellow); box-shadow: 0 0 0 1px rgba(249,250,2,.25), var(--sombra-suave); }
.tarjeta__badge{
  position: absolute; top: .9rem; left: .9rem; z-index: 2;
  background: var(--knea-yellow); color: var(--knea-purple); font-weight: 700;
  font-size: .72rem; letter-spacing: .03em; text-transform: uppercase;
  padding: .3rem .7rem; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.tarjeta__precio-desde{ font-size: .62em; font-weight: 500; opacity: .85; text-transform: uppercase; letter-spacing: .04em; vertical-align: middle; }
/* Aclaración corta DEBAJO del precio (ej. "/ sesión", "Paquete x 3 sesiones") —
   a diferencia de .tarjeta__precio-desde (prefijo, en la misma línea), esta
   va en su propia línea porque suele ser una frase más larga. */
.tarjeta__precio-nota{ display: block; font-size: .68rem; font-weight: 500; opacity: .75; margin-top: .15rem; }
.tarjeta__foto{ width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--easing); }
.tarjeta:hover .tarjeta__foto{ transform: scale(1.07); }

.tarjeta__cuerpo{ padding: 1.6rem; display: flex; flex-direction: column; flex: 1; }
.tarjeta__cuerpo h3{ font-size: 1.35rem; color: var(--knea-purple); margin-bottom: .6rem; line-height: 1.25; }
.tarjeta--claro .tarjeta__cuerpo h3{ color: var(--knea-white); }
.tarjeta__cuerpo p{ font-size: .92rem; line-height: 1.6; opacity: .85; }
.tarjeta--claro .tarjeta__cuerpo p{ color: rgba(255,255,255,.85); }

/* Toda cifra de precio del sitio (precio fijo, "Consultar" y las opciones de
   paquete) comparte la misma tipografía, tamaño y peso — antes "Consultar"
   salía en itálica más chica y las opciones de paquete en la fuente de texto
   normal, así que no se sentían parte de la misma familia visual. */
.tarjeta__precio{ font-family: var(--fuente-titulo); font-size: 1.5rem; color: var(--knea-coral); font-weight: 600; margin-top: 1.1rem; }
.tarjeta__precio--consultar{ opacity: .8; }
/* Sobre tarjetas claras (fondo morado translúcido) el coral pierde contraste: usamos amarillo. */
.tarjeta--claro .tarjeta__precio{ color: var(--knea-yellow); }
.tarjeta__opciones{ margin-top: 1rem; border-top: 1px dashed rgba(104,0,122,.25); padding-top: .8rem; }
.tarjeta__opciones li{ display: flex; justify-content: space-between; align-items: baseline; font-size: .9rem; padding: .25rem 0; }
.tarjeta__opciones strong{ font-family: var(--fuente-titulo); font-size: 1.5rem; font-weight: 600; color: var(--knea-coral-dark); }

.tarjeta__chips{ display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
.tarjeta__chips li{
  font-size: .72rem; padding: .35rem .7rem; border-radius: 999px; border: 1px solid rgba(249,250,2,.4); color: var(--knea-yellow);
}
.tarjeta__chips-label{ font-size: .78rem; font-weight: 600; margin-top: .9rem; opacity: .8; }

/* Lista "incluye" de un servicio con varios pasos (ej. masaje relajante de
   50 min): cada paso en su propia línea, con el emoji como viñeta. */
.tarjeta__incluye{ list-style: none; padding: 0; margin: 1rem 0; display: flex; flex-direction: column; gap: .45rem; font-size: .88rem; line-height: 1.4; }
.tarjeta--claro .tarjeta__incluye{ color: rgba(255,255,255,.85); }
.tarjeta__cierre{ font-family: var(--fuente-titulo); font-style: italic; font-size: .95rem; margin: .9rem 0 0; opacity: .9; }
.tarjeta--claro .tarjeta__cierre{ color: var(--knea-yellow); }

/* Tarjeta compacta: servicios nuevos de los que aún no tenemos descripción ni
   precio confirmados por la clienta — mejor mostrar solo el nombre que
   inventar una descripción o repetir un texto de relleno en cada una. */
.tarjeta--compacta .tarjeta__cuerpo{ padding: 1.3rem 1.5rem; align-items: center; text-align: center; }
.tarjeta--compacta h3{ font-size: 1.1rem; margin-bottom: .9rem; }
.tarjeta--compacta .tarjeta__media{ aspect-ratio: auto; min-height: 90px; }

/* Tilt 3D suave solo con mouse fino (JS agrega estilo inline transform) */
@media (hover: hover) and (pointer: fine){
  .tarjeta{ transform-style: preserve-3d; }
}

/* ---------- Asesoría (especiales) ---------- */
.asesoria-bloque{
  margin-top: 3.5rem; text-align: center; background: var(--knea-white); border: 1px solid rgba(104,0,122,.15);
  border-radius: var(--radio); padding: 3rem 1.5rem; max-width: 680px; margin-left: auto; margin-right: auto;
}
.asesoria-bloque h3{ font-size: 1.7rem; color: var(--knea-purple); margin-bottom: .8rem; }
.asesoria-bloque p{ opacity: .8; margin-bottom: 1.6rem; line-height: 1.6; }

/* ===========================================================
   RESULTADOS — galería antes/después (fotos reales, con autorización)
   =========================================================== */
.resultados-grupo{ margin-top: 3rem; }
.resultados-grupo:first-of-type{ margin-top: 2.5rem; }
.resultados-fila{ display: grid; gap: 1.2rem; margin-top: 1.2rem; grid-template-columns: 1fr; }
@media (min-width: 720px){ .resultados-fila{ grid-template-columns: repeat(3, 1fr); } }
.resultados-fila--una{ max-width: 520px; }

.resultado-foto{
  margin: 0; border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra-suave);
  background: var(--knea-purple-darker, #22002a);
}
.resultado-foto img{ display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 30%; }
.resultado-foto--espalda img{ object-position: center 82%; } /* recorta visualmente la franja negra del original sin tocar el archivo */
.resultado-foto--grande img{ aspect-ratio: 1 / 1; object-position: center 22%; }
.resultado-foto figcaption{
  padding: .7rem 1rem; font-size: .8rem; color: var(--knea-purple); text-align: center; font-weight: 600;
  background: rgba(104,0,122,.06);
}

.resultados-disclaimer{ margin-top: 2.2rem; font-size: .85rem; opacity: .7; max-width: 60ch; font-style: italic; }

/* ===========================================================
   TESTIMONIOS — carrusel horizontal con scroll-snap. Funciona
   sin JS (overflow-x + scroll-snap nativos); el JS solo agrega
   flechas, puntos y avance automático encima de esa base.
   =========================================================== */
.testimonios-carrusel{ position: relative; margin-top: 2.8rem; }
.testimonios-pista{
  display: flex; gap: 1.4rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: .5rem .5rem 1.2rem; margin: 0 -.5rem; scrollbar-width: none;
}
.testimonios-pista::-webkit-scrollbar{ display: none; }
.testimonio-card{
  flex: 0 0 min(340px, 84vw); scroll-snap-align: start;
  background: var(--knea-white); border-radius: var(--radio); padding: 1.8rem;
  box-shadow: var(--sombra-suave); display: flex; flex-direction: column;
}
.testimonio-estrellas{ color: var(--knea-coral); font-size: 1.1rem; letter-spacing: .15em; }
.testimonio-texto{ font-size: .95rem; line-height: 1.65; color: var(--knea-purple-darker); margin: .9rem 0 1.2rem; flex: 1; }
.testimonio-texto::before{ content: "\201C"; }
.testimonio-texto::after{ content: "\201D"; }
.testimonio-autor{ font-family: var(--fuente-titulo); font-weight: 600; color: var(--knea-purple); font-size: 1.05rem; }
.testimonios-flechas{ display: flex; justify-content: center; gap: 1rem; margin-top: 1rem; }
.testimonios-flecha{
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(104,0,122,.25);
  background: var(--knea-white); color: var(--knea-purple); font-size: 1.3rem; line-height: 1;
  display: flex; align-items: center; justify-content: center; transition: background var(--dur-rapida), color var(--dur-rapida);
}
.testimonios-flecha:hover{ background: var(--knea-purple); color: var(--knea-white); }
.testimonios-puntos{ display: flex; justify-content: center; gap: .5rem; margin-top: 1rem; }
.testimonios-punto{ width: 8px; height: 8px; border-radius: 50%; background: rgba(104,0,122,.25); border: none; padding: 0; transition: background var(--dur-rapida), transform var(--dur-rapida); }
.testimonios-punto.activo{ background: var(--knea-coral); transform: scale(1.3); }
@media (max-width: 600px){ .testimonios-flechas{ display: none; } }

/* ===========================================================
   FAQ
   =========================================================== */
.faq-lista{ margin-top: 2.5rem; display: flex; flex-direction: column; gap: .9rem; }
.faq-item{
  background: rgba(255,255,255,.06); border: 1px solid rgba(249,250,2,.2); border-radius: var(--radio-sm); padding: 1.1rem 1.4rem;
}
.faq-item summary{
  cursor: pointer; font-family: var(--fuente-titulo); font-size: 1.15rem; color: var(--knea-yellow);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; list-style: none;
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary::after{ content: "+"; font-size: 1.4rem; flex-shrink: 0; transition: transform var(--dur-rapida); }
.faq-item[open] summary::after{ transform: rotate(45deg); }
.faq-item p{ margin-top: .9rem; color: rgba(255,255,255,.85); line-height: 1.65; font-size: .95rem; }

/* ---------- Contacto ---------- */
.contacto-cta{ margin: 2.5rem 0 3.5rem; }
.contacto-grid{ align-items: start; }
.lista-datos li{ padding: .55rem 0; border-bottom: 1px solid rgba(104,0,122,.12); font-size: .95rem; }
.lista-datos a{ color: var(--knea-coral-dark); font-weight: 600; }
.lista-datos a:hover{ text-decoration: underline; }

.contacto-mapa{ min-height: 260px; border-radius: var(--radio); overflow: hidden; }
.contacto-mapa__iframe{ width: 100%; height: 100%; min-height: 260px; border: 0; display: block; }

/* ===========================================================
   FOOTER
   =========================================================== */
.site-footer{ background: var(--knea-purple-darker); color: rgba(255,255,255,.8); padding: 4rem 0 1.5rem; }
.site-footer__grid{ display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 720px){ .site-footer__grid{ grid-template-columns: 1.3fr 1fr 1fr; } }
.site-footer h4{ color: var(--knea-yellow); font-size: 1rem; margin-bottom: 1rem; font-family: var(--fuente-texto); text-transform: uppercase; letter-spacing: .08em; }
.site-footer ul li{ padding: .3rem 0; }
.site-footer ul a:hover{ color: var(--knea-yellow); }
.site-footer__slogan{ font-family: var(--fuente-titulo); font-style: italic; margin-top: 1rem; color: var(--knea-yellow); font-size: 1.1rem; }
.site-footer__contacto{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.site-footer__contacto li{ display: flex; align-items: flex-start; gap: .65rem; padding: 0; line-height: 1.4; }
.site-footer__icono{ flex-shrink: 0; margin-top: .15rem; color: var(--knea-yellow); opacity: .85; }
.site-footer__legal{
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-direction: column; align-items: center; gap: .3rem; font-size: .8rem; text-align: center;
}
.dev-credit{ display: block; margin-top: .7rem; font-size: .72rem; color: rgba(255,255,255,.35); text-align: center; transition: color .2s ease; }
.dev-credit:hover{ color: var(--knea-yellow); }

/* El widget de chat (botón flotante + panel conversacional) vive en su
   propio archivo: assets/css/wa-agent.css */

/* ===========================================================
   CURSOR PERSONALIZADO (solo escritorio con mouse fino)
   =========================================================== */
.cursor-anillo{
  position: fixed; top: 0; left: 0; width: 34px; height: 34px; border: 1.5px solid var(--knea-yellow); border-radius: 50%;
  pointer-events: none; z-index: 9998; transform: translate(-50%,-50%); transition: width .2s, height .2s, background .2s, border-color .2s;
  mix-blend-mode: difference;
}
.cursor-anillo.activo-boton{ width: 54px; height: 54px; background: rgba(249,250,2,.15); }
body.cursor-custom-activo, body.cursor-custom-activo a, body.cursor-custom-activo button{ cursor: none; }

/* ===========================================================
   REVEAL ON SCROLL — fade-up + blur, y máscara para h2
   =========================================================== */
.reveal-fade, .reveal-up{ opacity: 0; transition: opacity var(--dur-lenta) var(--easing), transform var(--dur-lenta) var(--easing), filter var(--dur-lenta) var(--easing); }
.reveal-fade{ transform: translateY(14px); filter: blur(6px); }
.reveal-up{ transform: translateY(34px); filter: blur(4px); }
.reveal-fade.in-view, .reveal-up.in-view{ opacity: 1; transform: translateY(0); filter: blur(0); }

[data-reveal-mascara]{ position: relative; }
[data-reveal-mascara] .mascara-span{
  display: block; clip-path: inset(0 0 100% 0); transition: clip-path 1s var(--easing);
}
[data-reveal-mascara].in-view .mascara-span{ clip-path: inset(0 0 0% 0); }

[data-reveal-texto] .palabra{ display: inline-block; opacity: 0; transform: translateY(100%); transition: opacity .7s var(--easing), transform .7s var(--easing); }
[data-reveal-texto].animado .palabra{ opacity: 1; transform: translateY(0); }

/* Stagger entre tarjetas de un mismo grupo (JS agrega delay inline via CSS var) */
[data-stagger] > *{ transition-delay: var(--retraso, 0ms); }

/* ===========================================================
   MOVIMIENTO — decisión de marca explícita: TODOS los efectos
   cinematográficos (fade, máscara, Ken Burns, pulso, cortinilla,
   cursor personalizado, tilt 3D) se fuerzan siempre, incluso con
   "prefers-reduced-motion" activado. El cliente pidió expresamente
   que esto no se apague, así que a propósito no hay ningún
   @media(prefers-reduced-motion) deshabilitando nada aquí.
   =========================================================== */

/* ---------- Footer responsive extra ---------- */
@media (max-width: 480px){
  .banner-oferta__sello{ width: 52px; height: 52px; font-size: .9rem; }
  .banner-oferta__foto{ width: 46px; height: 46px; border-radius: 10px; }
  .hero__cta{ flex-direction: column; align-items: stretch; }
  .hero__cta .btn{ width: 100%; }
}