/* Dr. Quijano — componentes compartidos: header, footer, botones, tarjetas,
   comparador, timeline, testimonios, cursor, whatsapp, drawer, transición. */

/* =======================================================================
   Botones
   ======================================================================= */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  height: 56px;
  padding-inline: var(--sp-4);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius);
  border: 1px solid transparent;
  white-space: nowrap;
  transition:
    background-color 0.2s var(--ease),
    border-color 0.2s var(--ease),
    color 0.2s var(--ease),
    transform 0.2s var(--ease);
}

.boton--primario {
  background: var(--sy-gold);
  /* Texto en tinta, no crema: cream-sobre-oro no pasa AA (~2.7:1); ink-sobre-oro sí (~6.4:1). */
  color: var(--sy-ink);
}

.boton--primario:hover {
  background: var(--sy-gold-deep);
  transform: translateY(-2px);
}

.boton--secundario {
  background: transparent;
  border-color: var(--sy-ink);
  color: var(--sy-ink);
}

.boton--secundario:hover {
  border-color: var(--sy-gold-deep);
  color: var(--sy-gold-text);
  transform: translateY(-2px);
}

.boton--texto {
  height: auto;
  padding: 0;
  border: 0;
  text-transform: none;
  letter-spacing: normal;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--sy-ink);
  gap: var(--sp-1);
  position: relative;
}

.boton--texto::after {
  content: "→";
  transition: transform 0.2s var(--ease);
}

.boton--texto:hover {
  color: var(--sy-gold-text);
}

.boton--texto:hover::after {
  transform: translateX(4px);
}

/* =======================================================================
   Header
   ======================================================================= */

/* <sy-header> no reserva altura en el flujo: su contenido (.sy-header,
   .menu-movil) es position:fixed, así que el propio custom element colapsa
   a 0px de forma natural. Cada primera sección de página (.hero,
   .encabezado-pagina) reserva el espacio con su propio padding-top, para
   no duplicar el hueco. */
sy-header {
  display: block;
}

.sy-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: var(--z-header);
  height: var(--header-h-mobile);
  display: flex;
  align-items: center;
  background: rgba(250, 247, 242, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: var(--border-hair);
  transition: background-color 0.3s var(--ease);
}

@media (min-width: 1024px) {
  .sy-header {
    height: var(--header-h);
  }
}

.sy-header__interior {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sy-header__marca {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-family: var(--font-display);
  /* "Dr. Josel Quijano" se lee como parte del logo: versalitas con tracking,
     como el logotipo anterior (el texto en HTML conserva su escritura normal). */
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--sy-gold); /* mismo dorado del busto del logo */
}

@media (min-width: 1280px) {
  .sy-header__marca {
    font-size: 1.1875rem;
  }
}

.sy-header__marca img {
  width: 40px;
  height: 40px;
}

.sy-header__nav {
  display: none;
  align-items: center;
  gap: var(--sp-3);
}

/* El menú completo aparece desde 1100px, en versión compacta hasta 1280px; por debajo, el
   nombre junto al logo no deja espacio y se usa el botón de tres rayas. */
@media (min-width: 1100px) {
  .sy-header__nav {
    display: flex;
  }
}

@media (min-width: 1280px) {
  .sy-header__nav {
    gap: var(--sp-4);
  }
}

.sy-header__nav a {
  font-size: var(--fs-body-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sy-ink-soft);
  position: relative;
  padding-block: var(--sp-1);
}

.sy-header__nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--sy-gold);
  transition: right 0.25s var(--ease);
}

.sy-header__nav a:hover::after,
.sy-header__nav a[aria-current="page"]::after {
  right: 0;
}

.sy-header__acciones {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.sy-header__cta {
  display: none;
}

@media (min-width: 1100px) {
  .sy-header__cta {
    display: inline-flex;
    height: 44px;
    padding-inline: var(--sp-2);
  }
}

@media (min-width: 1280px) {
  .sy-header__cta {
    height: 48px;
    padding-inline: var(--sp-3);
  }
}

.hamburguesa {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  padding: 4px;
}

@media (min-width: 1100px) {
  .hamburguesa {
    display: none;
  }
}

.hamburguesa span {
  display: block;
  height: 1px;
  background: var(--sy-ink);
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}

.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);
}

/* =======================================================================
   Drawer de menú móvil
   ======================================================================= */

.menu-movil {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  background: var(--sy-cream);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--sp-8) var(--gutter);
  visibility: hidden;
  opacity: 0;
}

.menu-movil.esta-abierto {
  visibility: visible;
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .menu-movil {
    transition: opacity 0.3s var(--ease), visibility 0.3s var(--ease);
  }
}

.menu-movil__cerrar {
  position: absolute;
  top: var(--sp-3);
  right: var(--gutter);
  font-size: var(--fs-body-lg);
}

.menu-movil__nav {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.menu-movil__nav a {
  font-family: var(--font-display);
  font-size: var(--fs-display-sm);
  color: var(--sy-ink);
}

.menu-movil__cta {
  margin-top: var(--sp-6);
  align-self: flex-start;
}

/* =======================================================================
   Cortina de transición entre páginas
   ======================================================================= */

.cortina-transicion {
  position: fixed;
  inset: 0;
  z-index: var(--z-transition);
  background: var(--sy-cream);
  transform: translateY(101%);
  pointer-events: none;
}

/* Puesta de forma síncrona por un script inline en <head> (ver plantilla de
   página) cuando se llega desde una transición interna, para que la cortina
   cubra el viewport desde el primer pintado y evitar FOUC. */
.pagina-entrando .cortina-transicion {
  transform: translateY(0);
}

/* =======================================================================
   Cursor personalizado (solo desktop, pointer: fine)
   ======================================================================= */

.cursor-punto {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-cursor);
  width: 10px;
  height: 10px;
  border-radius: var(--radius-circle);
  background: var(--sy-gold);
  mix-blend-mode: multiply;
  pointer-events: none;
  transform: translate(-50%, -50%);
  will-change: transform, width, height;
}

/* =======================================================================
   Hero
   ======================================================================= */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--sy-cream);
  padding-top: calc(var(--header-h-mobile) + var(--sp-8));
  padding-bottom: var(--sp-8);
}

@media (min-width: 1024px) {
  .hero {
    padding-top: calc(var(--header-h) + var(--sp-8));
    padding-bottom: var(--sp-8);
  }
}

/* Fondo: fotografía del consultorio. Ya trae un desvanecido a crema por la
   izquierda; la capa de ::after refuerza el contraste del texto (CLAUDE.md §2:
   nada de texto sobre imagen sin control de contraste). */
.hero__fondo {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 78% center;
  /* Traslúcido sobre el crema, como en el mockup: la foto se ve suave y
     luminosa y el titular manda. */
  opacity: 0.85;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--sy-cream) 90%, transparent) 0%,
    color-mix(in srgb, var(--sy-cream) 72%, transparent) 100%
  );
}

@media (min-width: 1024px) {
  .hero::after {
    background: linear-gradient(
      90deg,
      color-mix(in srgb, var(--sy-cream) 60%, transparent) 0%,
      transparent 48%
    );
  }
}

.hero__contenido {
  display: grid;
  gap: var(--sp-8);
}

.hero__intro {
  max-width: 50rem;
}

.hero__titular {
  margin-block: var(--sp-2) var(--sp-3);
  /* Un punto por debajo de --fs-display-xl: en dos líneas, "armoniza contigo."
     no debe invadir la lámpara del fondo. */
  font-size: clamp(2.75rem, 1.6rem + 3vw, 4.75rem);
}

.hero__texto {
  max-width: 42ch;
  color: var(--sy-ink-soft);
}

.hero__intro .hero__texto {
  margin-bottom: var(--sp-4);
}

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

/* -----------------------------------------------------------------------
   Tarjetas de acceso rápido a líneas de tratamiento
   ----------------------------------------------------------------------- */

.hero__tarjetas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-2);
  max-width: 52rem;
}

@media (min-width: 640px) {
  .hero__tarjetas {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-3);
  }
}

.hero__tarjeta {
  position: relative;
  display: block;
  aspect-ratio: 16 / 7;
  overflow: hidden;
  /* 4px: término medio entre el máximo del sistema (2px) y el mockup (~6-8px). */
  border-radius: 4px;
  color: var(--sy-cream);
}

@media (min-width: 640px) {
  .hero__tarjeta {
    aspect-ratio: 10 / 8;
  }
}

@media (min-width: 1024px) {
  .hero__tarjeta {
    aspect-ratio: 10 / 7;
  }
}

.hero__tarjeta img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Apagado leve, como en el mockup: menos saturación y un punto menos de opacidad, para
     que el fondo del consultorio se asome apenas. */
  filter: saturate(0.82);
  opacity: 0.95;
  transition: transform 0.6s var(--ease);
}

/* Degradado café oscuro bajo el título, a medio camino entre la tinta y el café cálido (control de contraste: crema sobre este café
   queda sobre 6:1). Va por debajo del texto, z-index 2. */
.hero__tarjeta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    color-mix(in srgb, color-mix(in srgb, var(--sy-gold-deep) 35%, var(--sy-ink)) 88%, transparent) 0%,
    color-mix(in srgb, color-mix(in srgb, var(--sy-gold-deep) 35%, var(--sy-ink)) 42%, transparent) 50%,
    transparent 82%
  );
}

/* Velo dorado casi imperceptible sobre toda la foto: unifica las tres con el tono del
   consultorio. */
.hero__tarjeta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: color-mix(in srgb, var(--sy-gold) 10%, transparent);
  pointer-events: none;
}

.hero__tarjeta-titulo {
  position: absolute;
  z-index: 2;
  inset-inline: var(--sp-2) calc(var(--sp-2) + 28px);
  bottom: var(--sp-2);
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
  line-height: 1.15;
}

.hero__tarjeta-flecha {
  position: absolute;
  z-index: 2;
  right: var(--sp-2);
  bottom: var(--sp-2);
  width: 22px;
  height: 22px;
  transition: transform 0.2s var(--ease);
}

.hero__tarjeta:hover img {
  transform: scale(1.04);
}

.hero__tarjeta:hover .hero__tarjeta-flecha {
  transform: translateX(2px);
}

.hero__tarjeta:focus-visible {
  outline: 2px solid var(--sy-gold);
  outline-offset: 3px;
}

/* =======================================================================
   Filosofía
   ======================================================================= */

.filosofia__grid {
  display: grid;
  gap: var(--sp-6);
  align-items: center;
}

@media (min-width: 1024px) {
  .filosofia__grid {
    grid-template-columns: 5fr 6fr;
    gap: var(--sp-12);
  }

  .filosofia--imagen-derecha .filosofia__grid {
    grid-template-columns: 6fr 5fr;
  }

  .filosofia--imagen-derecha .filosofia__media {
    order: 2;
  }
}

.filosofia__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--sy-stone);
  clip-path: inset(0 0 100% 0);
}

.filosofia__media video,
.filosofia__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.filosofia__titular {
  margin-block: var(--sp-2) var(--sp-3);
}

.filosofia__texto {
  max-width: 48ch;
  margin-bottom: var(--sp-4);
}

/* =======================================================================
   Tarjetas de tratamiento
   ======================================================================= */

.grid-tratamientos {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  container-type: inline-size;
}

.tarjeta-tratamiento {
  display: flex;
  flex-direction: column;
  background: var(--sy-surface);
  border: var(--border-hair);
}

/* Busto con la espiral áurea en el hueco de la última fila. Solo cuando el grid
   tiene 3 columnas (ancho entre 828px y 1111px) y 8 tarjetas dejan una celda libre;
   en 2 o 4 columnas no sobra celda y se oculta. */
.grid-tratamientos__busto {
  display: none;
}

@container (min-width: 828px) and (max-width: 1111px) {
  .grid-tratamientos__busto {
    display: block;
    position: relative;
  }

  /* Recorte (busto-recorte.jpg) sin margen vacío, cortado por detrás de la oreja. Ocupa
     toda la altura de la tarjeta y se pega a su borde (adelantado el ancho del gap), como
     si se asomara desde atrás. El fondo del archivo es el crema de la página. */
  .grid-tratamientos__busto img {
    position: absolute;
    top: 0;
    left: calc(var(--sp-3) * -1);
    height: 100%;
    width: auto;
    max-width: none;
    /* Opacidad 78%: ligeramente transparente. */
    opacity: 0.78;
    -webkit-mask-image: linear-gradient(to right, black 96%, transparent);
    mask-image: linear-gradient(to right, black 96%, transparent);
  }
}
.tarjeta-tratamiento__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.tarjeta-tratamiento__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.tarjeta-tratamiento:hover .tarjeta-tratamiento__media img,
.tarjeta-tratamiento:hover .tarjeta-tratamiento__placeholder {
  transform: scale(1.04);
}

/* Panel editorial de marca: sustituye a una fotografía que aún no existe.
   No es una imagen simulada — es una superficie de marca intencional. */
.tarjeta-tratamiento__placeholder {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  padding: var(--sp-3);
  background:
    linear-gradient(155deg, var(--sy-stone) 0%, var(--sy-cream-alt) 60%, var(--sy-surface) 100%);
  transition: transform 0.6s var(--ease);
}

.tarjeta-tratamiento__placeholder::before {
  content: "";
  position: absolute;
  inset: var(--sp-2);
  border: 1px solid var(--sy-gold-soft);
}

.tarjeta-tratamiento__placeholder::after {
  content: "";
  position: absolute;
  width: 64px;
  height: 64px;
  right: var(--sp-3);
  top: var(--sp-3);
  border-radius: var(--radius-circle);
  border: 1px solid var(--sy-gold);
  opacity: 0.5;
}

.tarjeta-tratamiento__placeholder-marca {
  position: relative;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.125rem;
  color: var(--sy-gold-text);
}

.tarjeta-tratamiento__cuerpo {
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  flex: 1;
  border-top: var(--border-hair);
  transition: transform 0.3s var(--ease);
}

.tarjeta-tratamiento:hover .tarjeta-tratamiento__cuerpo {
  transform: translateY(-2px);
}

.tarjeta-tratamiento__nombre {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--sy-ink);
}

.tarjeta-tratamiento__descripcion {
  color: var(--sy-ink-soft);
  font-size: var(--fs-body-sm);
  margin-bottom: var(--sp-2);
}

.tarjeta-tratamiento__linea {
  height: 1px;
  background: var(--sy-line);
  margin-bottom: var(--sp-2);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}

.tarjeta-tratamiento:hover .tarjeta-tratamiento__linea {
  transform: scaleX(1);
  background: var(--sy-gold);
}

/* =======================================================================
   Comparador antes / después
   ======================================================================= */

.comparador {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--sy-stone);
  touch-action: pan-y;
  user-select: none;
}

.comparador__imagen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.comparador__despues-envoltorio {
  position: absolute;
  inset: 0;
  width: 50%;
  overflow: hidden;
}

.comparador__despues-envoltorio .comparador__imagen {
  width: var(--comparador-ancho, 100vw);
  max-width: none;
}

.comparador__linea {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: var(--sy-cream);
  transform: translateX(-1px);
  box-shadow: 0 0 0 1px rgba(20, 17, 14, 0.15);
}

.comparador__control {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-circle);
  background: var(--sy-cream);
  border: 1px solid var(--sy-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  cursor: ew-resize;
}

.comparador__control svg {
  width: 16px;
  height: 16px;
  stroke: var(--sy-gold-deep);
}

.comparador__etiqueta {
  position: absolute;
  top: var(--sp-2);
  padding: 6px 10px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--sy-cream);
  background: var(--sy-scrim);
}

.comparador__etiqueta--antes {
  left: var(--sp-2);
}

.comparador__etiqueta--despues {
  right: var(--sp-2);
}

.galeria-resultados {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.galeria-resultados__pie {
  margin-top: var(--sp-2);
  font-size: var(--fs-body-sm);
  color: var(--sy-ink-mute);
}

.resultados__aviso {
  margin-top: var(--sp-4);
  font-size: var(--fs-body-sm);
  color: var(--sy-ink-mute);
  max-width: 60ch;
}

/* =======================================================================
   Experiencia — timeline de 4 pasos
   ======================================================================= */

.experiencia__pasos {
  display: grid;
  gap: var(--sp-6);
  position: relative;
}

.paso {
  position: relative;
}

@media (min-width: 900px) {
  .experiencia__pasos {
    grid-template-columns: repeat(4, 1fr);
    column-gap: var(--sp-3);
  }

  .paso {
    text-align: center;
  }

  .paso__numero {
    margin-inline: auto;
  }

  .paso__texto {
    max-width: 28ch;
    margin-inline: auto;
  }

  /* Línea dorada que une el centro de cada círculo con el del siguiente; el círculo
     (fondo crema, z-index 1) la tapa en el centro. El punto marca la mitad del tramo. */
  .paso:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 14px;
    left: 50%;
    width: calc(100% + var(--sp-3));
    height: 1px;
    background: var(--sy-gold-soft);
  }

  .paso:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 12px;
    left: calc(100% + var(--sp-3) / 2 - 2px);
    width: 5px;
    height: 5px;
    border-radius: var(--radius-circle);
    background: var(--sy-gold);
  }
}

.paso__numero {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-bottom: var(--sp-2);
  border-radius: var(--radius-circle);
  border: 1px solid var(--sy-gold);
  background: var(--sy-cream);
  font-size: var(--fs-body-sm);
  font-weight: 500;
  color: var(--sy-gold-text);
  position: relative;
  z-index: 1;
}

.paso__titulo {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sy-gold-text);
  margin-bottom: var(--sp-1);
}

.paso__texto {
  font-size: var(--fs-body-sm);
  color: var(--sy-ink-soft);
}

/* =======================================================================
   Sobre mí (sección de la home)
   ======================================================================= */

/* Al llegar por el enlace del menú (#sobre-mi, #resultados) el título no queda tapado por el header fijo. */
#sobre-mi,
#resultados {
  scroll-margin-top: var(--header-h-mobile);
}

@media (min-width: 1100px) {
  #sobre-mi,
  #resultados {
    scroll-margin-top: var(--header-h);
  }
}

.sobre-mi__grid {
  display: grid;
  gap: var(--sp-6);
}

@media (min-width: 1024px) {
  .sobre-mi__grid {
    grid-template-columns: 5fr 4fr;
    gap: var(--sp-8);
    align-items: start;
  }
}
.sobre-mi__media {
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

.sobre-mi__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Nombre del médico a modo de firma, en cursiva caligráfica (Mrs Saint Delafield).
   Este script es muy fino y de caja baja: va grande para que se lea. */
.firma-nombre {
  margin-bottom: var(--sp-3);
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(2.125rem, 1.6rem + 1.6vw, 3rem);
  line-height: 1.1;
  color: var(--sy-gold);
}

.sobre-mi__firma {
  height: 48px;
  margin-top: var(--sp-3);
}

.testimonios-seccion {
  max-width: 640px;
  margin-inline: auto;
  margin-top: var(--sp-12);
  text-align: center;
}

.testimonios {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}

.testimonio {
  padding-left: var(--sp-3);
  border-left: 1px solid var(--sy-gold);
  text-align: left;
}

/* Una vez que testimonios.js inicializa el carrusel, solo el testimonio
   activo queda en el flujo; sin JS, todos permanecen visibles apilados
   (contenido legible y completo sin JavaScript, ver CLAUDE.md §5). */
.testimonios--carrusel .testimonio {
  display: none;
  cursor: pointer;
}

.testimonios--carrusel .testimonio.is-activo {
  display: block;
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .testimonios--carrusel .testimonio.is-activo.testimonio--entrando {
    opacity: 0;
  }

  .testimonios--carrusel .testimonio.is-activo {
    /* DUR.fast de motion.js (0.45s) — mismo ritmo que las micro-interacciones. */
    transition: opacity 0.45s ease;
  }
}

.testimonio__comillas {
  font-family: var(--font-display);
  font-size: 4.5rem;
  line-height: 1;
  color: var(--sy-gold);
  display: block;
  margin-bottom: var(--sp-2);
}

.testimonio__texto {
  font-size: var(--fs-body-lg);
  color: var(--sy-ink);
  margin-bottom: var(--sp-1);
}

.testimonio__autor {
  font-size: var(--fs-body-sm);
  color: var(--sy-ink-mute);
}

.testimonio__marcador {
  display: inline-block;
  margin-top: var(--sp-1);
  font-size: 0.6875rem;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--sy-ink-mute);
  border: 1px solid var(--sy-line);
  padding: 2px 8px;
}

.testimonios__puntos {
  display: flex;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

.testimonios__puntos:empty {
  display: none;
}

.testimonios__punto {
  position: relative;
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: var(--radius-circle);
  /* --sy-gold-text: el borde del control necesita 3:1 contra el fondo (WCAG 1.4.11). */
  border: 1px solid var(--sy-gold-text);
  background: transparent;
  cursor: pointer;
}

/* Zona de pulsación de 24px (WCAG 2.5.8) sin agrandar el punto visible. */
.testimonios__punto::after {
  content: "";
  position: absolute;
  inset: -9px;
}

.testimonios__punto.is-activo {
  background: var(--sy-gold-text);
}

/* Nota: el CTA final ("Tu mejor versión sigue siendo tú.") vive en
   .sy-footer__cta y se repite en cada página como parte del footer
   compartido — evita duplicar el mismo bloque justo antes del footer. */

/* =======================================================================
   WhatsApp flotante
   ======================================================================= */

.whatsapp-flotante {
  position: fixed;
  right: var(--sp-3);
  bottom: var(--sp-3);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  height: 52px;
  padding-inline: var(--sp-2);
  border-radius: var(--radius-circle);
  background: var(--sy-ink);
  color: var(--sy-cream);
  box-shadow: var(--shadow-card);
  transition: transform 0.2s var(--ease), background-color 0.2s var(--ease);
}

.whatsapp-flotante:hover {
  /* Se evita cambiar a --sy-gold-deep aquí: con texto crema encima no pasa AA. */
  transform: translateY(-2px);
}

.whatsapp-flotante svg {
  width: 20px;
  height: 20px;
}

.whatsapp-flotante__texto {
  font-size: var(--fs-body-sm);
  font-weight: 500;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .whatsapp-flotante__texto {
    display: none;
  }

  .whatsapp-flotante {
    width: 52px;
    padding: 0;
    justify-content: center;
  }
}

/* =======================================================================
   Footer
   ======================================================================= */

sy-footer {
  display: block;
}

.sy-footer {
  background: var(--sy-cream-alt);
  border-top: var(--border-hair);
}

/* Fondo del CTA final: espiral áurea hecha de cuartos de círculo en tonos de greige muy tenues,\r\n   a sangre, detrás del texto. El trazo del color del fondo del pie deja el hueco entre figuras. */
.sy-footer__cta-fondo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.sy-footer__espiral {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  fill: var(--sy-greige);
  stroke: var(--sy-cream-alt);
  stroke-width: 6px;
  stroke-linejoin: round;
}
.sy-footer__cta {
  text-align: center;
  padding-block: var(--sp-8);
  border-bottom: var(--border-hair);
}

.sy-footer__cta h2 {
  margin-bottom: var(--sp-3);
}

.sy-footer__grid {
  display: grid;
  gap: var(--sp-6);
  padding-block: var(--sp-8);
}

@media (min-width: 768px) {
  .sy-footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
}

.sy-footer__marca {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-family: var(--font-display);
  font-size: 1.375rem;
  color: var(--sy-gold);
  margin-bottom: var(--sp-1);
}

.sy-footer__marca img {
  width: 36px;
  height: 36px;
}

.sy-footer__lema {
  font-style: italic;
  font-family: var(--font-display);
  color: var(--sy-gold-text);
}

.sy-footer__titulo-col {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--sy-ink-mute);
  margin-bottom: var(--sp-2);
}

.sy-footer__col ul {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  font-size: var(--fs-body-sm);
}

.sy-footer__col a:hover {
  color: var(--sy-gold-text);
}

.sy-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  justify-content: space-between;
  align-items: center;
  padding-block: var(--sp-3);
  border-top: var(--border-hair);
  font-size: var(--fs-body-sm);
  color: var(--sy-ink-mute);
}

.sy-footer__legal-links {
  display: flex;
  gap: var(--sp-3);
}

/* =======================================================================
   Páginas internas — encabezado simple, categorías, plantilla de detalle
   ======================================================================= */

.encabezado-pagina {
  padding-top: calc(var(--header-h-mobile) + var(--sp-8));
  padding-bottom: var(--sp-6);
  text-align: center;
}

@media (min-width: 1024px) {
  .encabezado-pagina {
    padding-top: calc(var(--header-h) + var(--sp-8));
  }
}

.encabezado-pagina__titulo {
  margin-block: var(--sp-2) var(--sp-2);
}

.encabezado-pagina__texto {
  max-width: 60ch;
  margin-inline: auto;
  color: var(--sy-ink-soft);
}

.categorias-tratamientos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  justify-content: center;
  margin-bottom: var(--sp-8);
}

.categorias-tratamientos a {
  padding: var(--sp-1) var(--sp-2);
  font-size: var(--fs-body-sm);
  border: var(--border-hair);
}

.categorias-tratamientos a:hover {
  border-color: var(--sy-gold);
  color: var(--sy-gold-text);
}

.categoria-grupo {
  margin-bottom: var(--sp-8);
  scroll-margin-top: calc(var(--header-h-mobile) + var(--sp-2));
}

@media (min-width: 1024px) {
  .categoria-grupo {
    scroll-margin-top: calc(var(--header-h) + var(--sp-2));
  }
}

.categoria-grupo__titulo {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--sy-ink-mute);
  padding-bottom: var(--sp-2);
  border-bottom: var(--border-hair);
  margin-bottom: var(--sp-3);
}

.tratamiento-detalle__grid {
  display: grid;
  gap: var(--sp-6);
}

@media (min-width: 1024px) {
  .tratamiento-detalle__grid {
    grid-template-columns: 2fr 1fr;
    gap: var(--sp-12);
  }
}

.tratamiento-detalle__ficha {
  border: var(--border-hair);
  padding: var(--sp-4);
  height: fit-content;
  position: sticky;
  top: calc(var(--header-h) + var(--sp-3));
}

.tratamiento-detalle__ficha dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-1) var(--sp-2);
  font-size: var(--fs-body-sm);
}

.tratamiento-detalle__ficha dt {
  color: var(--sy-ink-mute);
}

.tratamiento-detalle__ficha .boton {
  width: 100%;
  margin-top: var(--sp-3);
}

.tratamiento-detalle__seccion {
  margin-bottom: var(--sp-6);
}

.tratamiento-detalle__seccion h2 {
  font-size: var(--fs-display-sm);
  margin-bottom: var(--sp-2);
}

/* Texto legal corrido (aviso de privacidad, términos): párrafos y listas con aire. */
.texto-legal p + p,
.texto-legal p + ul,
.texto-legal ul + p {
  margin-top: var(--sp-2);
}

.texto-legal ul {
  list-style: disc;
  padding-left: 1.25em;
}

.texto-legal li + li {
  margin-top: 8px;
}

.texto-legal .tratamiento-detalle__seccion {
  margin-top: var(--sp-6);
  margin-bottom: 0;
}

.tratamiento-detalle__aviso {
  font-size: var(--fs-body-sm);
  color: var(--sy-ink-mute);
  border-top: var(--border-hair);
  padding-top: var(--sp-3);
  margin-top: var(--sp-8);
}

/* =======================================================================
   Bloques informativos (valoración / contacto)
   ======================================================================= */

.bloque-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-block: var(--sp-2);
  border-bottom: var(--border-hair);
}

/* Panel que se despliega bajo un enlace (desplegable.js). Con JS arranca
   cerrado (.is-cerrado); sin JS no lleva la clase y queda visible. */
.desplegable {
  display: grid;
  grid-template-rows: 1fr;
}

.desplegable__interior {
  min-height: 0;
  overflow: hidden;
}

.desplegable.is-cerrado {
  grid-template-rows: 0fr;
}

@media (prefers-reduced-motion: no-preference) {
  .desplegable {
    /* DUR.fast de motion.js (0.45s). */
    transition: grid-template-rows 0.45s var(--ease);
  }
}

/* Principios de la filosofía: filas separadas por filete fino, con la espiral
   áurea dorada como marca de cada punto (lista desplegable, ver desplegable.js). */
.principios {
  list-style: none;
  margin: var(--sp-4) 0 0;
  padding: 0;
  max-width: 34rem;
}

.principio {
  display: grid;
  grid-template-columns: 40px 1fr;
  column-gap: var(--sp-2);
  align-items: center;
  padding-block: var(--sp-3);
  border-top: var(--border-hair);
}

.principio__espiral {
  grid-row: 1 / span 2;
  align-self: center;
  width: 32px;
  height: auto;
}

.principio__titulo {
  grid-column: 2;
  align-self: end;
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--sy-ink);
}

.principio__texto {
  grid-column: 2;
  align-self: start;
  margin-top: var(--sp-1);
  font-size: var(--fs-body-sm);
  color: var(--sy-ink-soft);
}

.bloque-info__titulo {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--sy-ink-mute);
}

.mapa-ubicacion {
  margin-top: var(--sp-4);
  border: 1px solid var(--sy-line);
  aspect-ratio: 16 / 9;
}

.mapa-ubicacion__aviso {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3);
  text-align: center;
  background: var(--sy-surface);
}

.mapa-ubicacion__aviso p {
  max-width: 44ch;
  font-size: 0.9375rem;
  color: var(--sy-ink-soft);
}

.mapa-ubicacion iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: grayscale(0.35) contrast(1.05);
}