/* ==========================================================================
   Dayanaderma — Dra. Dayana Arenas, dermatología (Bogotá)
   Sistema de diseño: réplica del WordPress original (aprobado por la doctora)
   sobre la paleta del manual de marca 2022 (#272727 / #67645B / #BDBAAD).
   Tipografías del WordPress: Montserrat (títulos/cuerpo) + Satisfy (script).
   Mobile-first. Breakpoints: 760px (tablet), 1100px (desktop).
   ========================================================================== */

/* ---------- Fuentes auto-alojadas ---------- */
@font-face {
  font-family: "Montserrat";
  src: url("/fonts/MontserratVF.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("/fonts/MontserratVF-Italic.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Satisfy";
  src: url("/fonts/SatisfyLatin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Colores corporativos (manual de marca) — FIJOS, no cambian con el tema.
     Se usan para acentos deliberadamente oscuros (pie de página, heroes con
     foto, franja--oscura, botones) que deben verse igual en claro y oscuro. */
  --tinta: #272727;        /* acento oscuro fijo */
  --piedra: #67645b;       /* acento secundario fijo */
  --greige: #bdbaad;       /* detalles, bordes, texto sobre fondo oscuro */
  --crema: #f5f4f0;        /* acento crema fijo (p.ej. producto sobre fondo claro) */
  --blanco: #ffffff;
  --linea: #e3e1da;        /* borde fijo (usado dentro de acentos oscuros) */
  --greige-claro: #aeafa4; /* hover de botones (del WordPress) */
  /* Funcionales */
  --error: #b3261e;
  --exito: #1e6f42;
  --whatsapp: #25d366;
  /* Tema claro/oscuro — ESTOS son los que usan el fondo de página, tarjetas,
     texto y bordes "normales"; cambian de valor según el tema (ver bloque
     [data-theme="claro"] más abajo). Oscuro es el tema BASE (lo que ve
     cualquier visitante nuevo, sin importar la preferencia de su sistema);
     el botón de la cabecera permite pasar a claro y sitio.js lo recuerda en
     localStorage (leído por public/js/tema.js antes de pintar, para no
     parpadear). Fondo más oscuro que --tinta a propósito: así los acentos
     fijos (pie, heroes, franja--oscura, botones) quedan un paso MÁS CLAROS
     que la página y se siguen leyendo como paneles "elevados", en vez de
     fundirse con el fondo. */
  --fondo: #141311;             /* fondo de página */
  --superficie: #201e1a;        /* tarjetas, secciones alternas */
  --texto: #ece9e2;             /* texto principal */
  --texto-suave: #b0aa9d;       /* texto secundario */
  --borde: #38352e;             /* bordes/separadores */
  --fondo-header: rgba(20, 19, 17, 0.9);
  color-scheme: dark;
  /* Tipografía */
  --fuente: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;
  --fuente-script: "Satisfy", "Segoe Script", cursive;
  /* Espaciado (escala 8px) */
  --esp-1: 8px; --esp-2: 16px; --esp-3: 24px; --esp-4: 32px;
  --esp-5: 48px; --esp-6: 64px; --esp-7: 96px;
  /* Layout */
  --ancho-max: 1200px;
  --radio: 6px;
  --sombra: 0 4px 20px rgba(0, 0, 0, 0.5);
  --transicion: 200ms ease-out;
}

/* Modo claro: solo cuando el visitante lo elige explícitamente con el
   botón de la cabecera (o ya lo había elegido en una visita anterior). */
:root[data-theme="claro"] {
  --fondo: #ffffff;
  --superficie: #f5f4f0;
  --texto: #272727;
  --texto-suave: #67645b;
  --borde: #e3e1da;
  --fondo-header: rgba(255, 255, 255, 0.96);
  --sombra: 0 2px 16px rgba(39, 39, 39, 0.08);
  color-scheme: light;
}

/* ---------- Reset básico ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 1rem; /* 16px — Montserrat rinde más ancho que Source Sans */
  line-height: 1.6;
  color: var(--texto);
  background: var(--fondo);
  transition: background var(--transicion), color var(--transicion);
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4, h5, h6 { line-height: 1.15; margin: 0 0 var(--esp-2); text-wrap: balance; }
p { margin: 0 0 var(--esp-2); }
ul, ol { padding-left: 1.2em; }

/* Jerarquía tipográfica: Montserrat con peso medio, como el WordPress */
h1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 600; letter-spacing: 0.01em; }
h2 { font-size: clamp(1.55rem, 3.6vw, 2.25rem); font-weight: 600; }
h3 { font-size: clamp(1.25rem, 2.8vw, 1.625rem); font-weight: 500; }
h4 { font-size: 1.125rem; font-weight: 600; }
strong { font-weight: 600; }

/* "Eyebrow": etiqueta espaciada, motivo del manual (d e r m a t o l o g í a) */
.ceja {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-bottom: var(--esp-2);
}
.fondo-oscuro .ceja { color: var(--greige); }

/* Frase "script" (Satisfy), el acento emotivo del WordPress */
.script {
  display: block;
  font-family: var(--fuente-script);
  font-weight: 400;
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  color: var(--texto-suave);
  margin-bottom: var(--esp-2);
}
.fondo-oscuro .script { color: var(--greige); }

/* ---------- Accesibilidad ---------- */
:focus-visible { outline: 3px solid var(--texto-suave); outline-offset: 3px; border-radius: 2px; }
.salto-contenido {
  position: absolute; left: -999px; top: 0; z-index: 300;
  background: var(--tinta); color: var(--blanco);
  padding: var(--esp-1) var(--esp-2); border-radius: var(--radio);
}
.salto-contenido:focus { left: var(--esp-2); }
.solo-lector {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ---------- Layout ---------- */
.contenedor { max-width: var(--ancho-max); margin-inline: auto; padding-inline: var(--esp-3); }
.franja { padding-block: var(--esp-6); }
.franja--crema { background: var(--superficie); }
.franja--oscura { background: var(--tinta); color: var(--blanco); }
.franja--compacta { padding-block: var(--esp-5); }
.centrado { text-align: center; }
.medida { max-width: 68ch; }
.centrado .medida, .medida--centrada { margin-inline: auto; }

/* Grillas de tarjetas */
.grilla { display: grid; gap: var(--esp-3); }
@media (min-width: 560px) { .grilla--2, .grilla--3, .grilla--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) {
  .grilla--3 { grid-template-columns: repeat(3, 1fr); }
  .grilla--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Sección partida imagen + texto */
.partida { display: grid; gap: var(--esp-4); align-items: center; }
@media (min-width: 900px) {
  .partida { grid-template-columns: 1fr 1fr; gap: var(--esp-6); }
  .partida--invertida > :first-child { order: 2; }
}
.partida img { border-radius: var(--radio); width: 100%; object-fit: cover; }

/* ---------- Encabezado ---------- */
.encabezado {
  position: sticky; top: 0; z-index: 100;
  background: var(--fondo-header);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--borde);
  transition: background var(--transicion), border-color var(--transicion);
}
.encabezado__interior {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--esp-2); min-height: 72px;
}
.logo { display: flex; align-items: center; flex-shrink: 0; }
.logo img { width: 218px; height: 47px; }

.nav { display: none; }
.nav ul { display: flex; gap: var(--esp-3); list-style: none; margin: 0; padding: 0; }
.nav a {
  text-decoration: none; font-weight: 600; font-size: 0.8125rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--texto); padding: var(--esp-1) 2px; display: inline-block;
  border-bottom: 2px solid transparent; transition: border-color var(--transicion);
}
.nav a:hover { border-bottom-color: var(--greige); }
.nav a[aria-current="page"] { border-bottom-color: var(--texto); font-weight: 600; }

/* Menú móvil */
.nav-boton {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border: none; background: none;
  cursor: pointer; color: var(--texto);
}
.nav-boton svg { width: 26px; height: 26px; }
.nav-boton .icono-cerrar { display: none; }
.nav-abierta .nav-boton .icono-menu { display: none; }
.nav-abierta .nav-boton .icono-cerrar { display: block; }

/* ---------- Botón de tema (claro/oscuro) ---------- */
/* Sin JS no hace nada (el sitio igual respeta prefers-color-scheme solo con
   CSS), así que se oculta — mismo patrón que los controles del banner. */
.boton-tema { display: none; }
.js .boton-tema {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: none; background: none;
  cursor: pointer; color: var(--texto); flex-shrink: 0;
}
.boton-tema svg { width: 22px; height: 22px; }
/* Por defecto (sin tema explícito = oscuro, el tema base) sol visible =
   "pasar a claro"; con [data-theme="claro"] se muestra la luna. */
.boton-tema .icono-sol { display: block; }
.boton-tema .icono-luna { display: none; }
:root[data-theme="claro"] .boton-tema .icono-sol { display: none; }
:root[data-theme="claro"] .boton-tema .icono-luna { display: block; }
@media (max-width: 1099px) {
  .nav-abierta .nav {
    display: block; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--superficie); border-bottom: 1px solid var(--borde);
    box-shadow: var(--sombra); padding: var(--esp-2) var(--esp-3) var(--esp-3);
  }
  .nav-abierta .nav ul { flex-direction: column; gap: 0; }
  .nav-abierta .nav a { display: block; padding: 12px 4px; font-size: 1.0625rem; border-bottom: 1px solid var(--borde); }
  .nav-abierta .nav li:last-child a { border-bottom: none; }
}
@media (min-width: 1100px) {
  .nav { display: block; }
  .nav-boton { display: none; }
}

/* ---------- Botones (estilo WordPress: oscuros, MAYÚSCULAS, rectos) ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px var(--esp-4);
  font-family: inherit; font-size: 0.875rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  border-radius: 0; border: 2px solid var(--tinta);
  background: var(--tinta); color: var(--greige);
  transition: background var(--transicion), color var(--transicion), border-color var(--transicion);
}
.boton:hover { background: var(--greige-claro); border-color: var(--greige-claro); color: var(--tinta); }
.boton--fantasma { background: transparent; color: var(--texto); border-color: var(--texto); }
.boton--fantasma:hover { background: var(--tinta); color: var(--greige); border-color: var(--tinta); }
.fondo-oscuro .boton, .franja--oscura .boton { background: var(--blanco); color: var(--tinta); border-color: var(--blanco); }
.fondo-oscuro .boton:hover, .franja--oscura .boton:hover { background: var(--greige); border-color: var(--greige); }
.boton[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ---------- Héroe ---------- */
.heroe { position: relative; background: var(--tinta); color: var(--blanco); overflow: hidden; }
.heroe__imagen { position: absolute; inset: 0; }
.heroe__imagen img { width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
/* El contenedor del héroe es mucho más ancho que alto que las fotos fuente
   (retrato/busto ~16:9), así que un center-crop por defecto corta las
   caras (quedan en el tercio superior de cada foto). Encuadre calibrado
   por foto para mantener el rostro visible. */
.heroe__imagen--dra img { object-position: 50% 25%; }
.heroe__imagen--dermatoscopio img { object-position: 50% 10%; }
.heroe__imagen--paciente img { object-position: 50% 14%; }
.heroe__imagen--skincare img { object-position: 50% 18%; }
.heroe__imagen--consejo img { object-position: 50% 22%; }
.heroe__imagen--consultorio img { object-position: 50% 20%; }
/* Degradado que garantiza el contraste del texto sobre fotos claras */
.heroe__imagen::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(30, 30, 29, 0.92) 0%, rgba(30, 30, 29, 0.72) 50%, rgba(30, 30, 29, 0.38) 100%);
}
.heroe__contenido {
  position: relative; z-index: 1;
  padding-block: var(--esp-7);
  max-width: 720px;
}
.heroe__contenido p { font-size: 1.125rem; max-width: 54ch; color: #e8e6df; }
.heroe--interior .heroe__contenido { padding-block: var(--esp-6); }
/* En los heros interiores la "ceja" pasa a ser la frase script del WordPress */
.heroe__contenido .ceja {
  font-family: var(--fuente-script);
  text-transform: none;
  letter-spacing: 0;
  font-size: clamp(1.5rem, 3vw, 2.125rem);
  font-weight: 400;
  color: var(--greige);
  margin-bottom: var(--esp-1);
}
@media (max-width: 759px) {
  /* En vertical el degradado horizontal deja el texto sobre la zona al 92 %, y
     encima la foto va al 55 % de opacidad: el resultado era casi negro y la
     imagen no se distinguía. En móvil el velo pasa a vertical y más suave.
     El límite lo pone la ceja en greige (#bdbaad): por debajo de ~0,66 de velo
     deja de cumplir el contraste mínimo, así que ese es el suelo. */
  .heroe__imagen img { opacity: 0.85; }
  .heroe__imagen::after {
    background: linear-gradient(180deg,
      rgba(30, 30, 29, 0.66) 0%,
      rgba(30, 30, 29, 0.74) 55%,
      rgba(30, 30, 29, 0.86) 100%);
  }
}

/* ---------- Banner rotativo del home (réplica del slider del WordPress) ----------
   4 slides apilados en una grilla (sin posicionamiento absoluto: la altura la da
   el slide más alto). Sin JS se ve el slide 1; el JS solo rota la clase .activo. */
.banner { position: relative; display: grid; overflow: hidden; background: var(--superficie); }
.banner__slide {
  grid-area: 1 / 1;
  position: relative;
  display: grid; align-items: center;
  min-height: clamp(520px, 42vw, 805px);
  opacity: 0; visibility: hidden;
  transition: opacity 1000ms ease, visibility 0s 1000ms;
}
.banner__slide.activo {
  opacity: 1; visibility: visible; z-index: 1;
  transition: opacity 1000ms ease;
}
.banner__fondo { position: absolute; inset: 0; overflow: hidden; }
.banner__fondo img {
  width: 100%; height: 100%; object-fit: cover;
  will-change: transform;
}
/* Ken Burns: zoom y paneo suaves durante todo el slide (como el Slider Revolution).
   La animación vive en TODAS las imágenes (pausada) y solo se activa/pausa con
   animation-play-state: si se aplicara vía selector .activo (como antes), al
   desactivarse un slide la animación se cancelaría de golpe y la imagen "saltaría"
   de vuelta a su tamaño sin zoom mientras aún se está desvaneciendo — eso se veía
   como una vibración. Pausar en vez de cancelar evita el salto. */
@keyframes kenburns {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(1.06) translate(-1.2%, 0.6%); }
}
.banner__fondo img { animation: kenburns 10s linear both; animation-play-state: paused; }
.activo .banner__fondo img { animation-play-state: running; }
/* Velo para garantizar contraste del texto (texto oscuro sobre zona clara) */
.banner__fondo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.55) 42%, rgba(255, 255, 255, 0) 72%);
}
/* Variante con texto blanco (slide "Cuidar tu piel es invertir en ti") */
.banner__slide--oscuro .banner__fondo::after {
  background: linear-gradient(90deg, rgba(30, 30, 29, 0.72) 0%, rgba(30, 30, 29, 0.45) 45%, rgba(30, 30, 29, 0.08) 75%);
}
.banner__slide--oscuro { color: var(--blanco); }

/* El bloque de texto se alinea a un margen izquierdo propio en vez de quedar
   atrapado en el .contenedor centrado de 1200px. En pantallas anchas ese
   contenedor empieza a ~360px, así que el texto caía hacia el medio del banner
   y se montaba sobre la persona de la foto. Con el margen propio arranca a
   ~112px y además queda en la zona más opaca del velo, donde más contrasta. */
.banner .contenedor {
  max-width: none;
  margin-inline: 0;   /* el .contenedor trae margin-inline:auto y, como el slide es
                         una rejilla, ese auto absorbe el espacio libre y vuelve a
                         centrar el bloque. Anularlo es lo que lo lleva a la izquierda. */
  padding-inline: clamp(var(--esp-3), 6vw, 7rem);
}
.banner__contenido { position: relative; z-index: 1; max-width: 620px; padding-block: var(--esp-6); }
.banner__script {
  display: block; font-family: var(--fuente-script); font-weight: 400;
  font-size: clamp(1.75rem, 3.4vw, 2.875rem); line-height: 1.15;
  color: var(--piedra); margin-bottom: var(--esp-2);
}
.banner__slide--oscuro .banner__script { color: var(--crema); }
.banner__titulo {
  font-size: clamp(1.75rem, 3.6vw, 3rem); font-weight: 600; line-height: 1.08;
  color: var(--tinta); margin: 0 0 var(--esp-2); text-wrap: balance;
}
.banner__slide--oscuro .banner__titulo { color: var(--blanco); }
/* Color FIJO, no heredado. El tema base del sitio es el oscuro, donde --texto
   vale #ece9e2; sobre el velo blanco de los slides 1-3 ese párrafo quedaba
   invisible. El título y el script ya usaban colores fijos por esta misma
   razón; a este se le había olvidado. */
.banner__texto {
  font-size: 1rem; line-height: 1.5; max-width: 46ch;
  margin-bottom: var(--esp-4); color: var(--tinta);
}
.banner__slide--oscuro .banner__texto { color: var(--blanco); }
/* Entrada escalonada desde la derecha (tiempos del Slider Revolution) */
@keyframes banner-entrar {
  from { opacity: 0; transform: translateX(50px); }
  to   { opacity: 1; transform: none; }
}
.activo .banner__capa { animation: banner-entrar 900ms ease-out both; }
.activo .banner__capa:nth-child(1) { animation-delay: 400ms; }
.activo .banner__capa:nth-child(2) { animation-delay: 1100ms; }
.activo .banner__capa:nth-child(3) { animation-delay: 1600ms; }
.activo .banner__capa:nth-child(4) { animation-delay: 1900ms; }

/* Controles: flechas y puntos (44px táctiles, accesibles) */
.banner__control {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: none; border-radius: 50%;
  background: rgba(39, 39, 39, 0.45); color: var(--blanco); cursor: pointer;
  transition: background var(--transicion);
}
.banner__control:hover { background: rgba(39, 39, 39, 0.8); }
.banner__control svg { width: 22px; height: 22px; }
.banner__control--ant { left: var(--esp-2); }
.banner__control--sig { right: var(--esp-2); }
.banner__puntos {
  position: absolute; left: 0; right: 0; bottom: var(--esp-2); z-index: 2;
  display: flex; justify-content: center; gap: 4px; margin: 0; padding: 0; list-style: none;
}
.banner__puntos button {
  width: 32px; height: 32px; border: none; background: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.banner__puntos button::after {
  content: ""; width: 11px; height: 11px; border-radius: 50%;
  background: rgba(39, 39, 39, 0.35); border: 1.5px solid var(--blanco);
  transition: background var(--transicion), transform var(--transicion);
}
.banner__puntos button[aria-current="true"]::after { background: var(--tinta); transform: scale(1.2); }
/* Sin JS los controles no funcionan: se ocultan (JS los muestra añadiendo .js al <html>) */
.banner__control, .banner__puntos { display: none; }
.js .banner__control { display: inline-flex; }
.js .banner__puntos { display: flex; }
@media (max-width: 759px) {
  .banner__contenido { padding-inline: var(--esp-1); }
  .banner__texto { font-size: 0.9375rem; }
  .banner__control { display: none !important; } /* en móvil bastan los puntos */
  /* El texto ocupa casi todo el ancho: velo más amplio para asegurar contraste */
  .banner__fondo::after {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.74) 55%, rgba(255, 255, 255, 0.5) 100%);
  }
  .banner__slide--oscuro .banner__fondo::after {
    background: rgba(30, 30, 29, 0.55);
  }
}

/* ---------- Paneles rotativos: misma mecánica de crossfade que el banner
   pero sin Ken Burns ni texto escalonado. Usados por "Nuestros pacientes
   dicen" (testimonios). ---------- */
.paneles__pista { display: grid; }
.paneles__panel {
  grid-area: 1 / 1;
  opacity: 0; visibility: hidden;
  transition: opacity 600ms ease, visibility 0s 600ms;
}
.paneles__panel.activo {
  opacity: 1; visibility: visible; z-index: 1;
  transition: opacity 600ms ease;
}
.paneles__puntos {
  display: none; justify-content: center; gap: 4px;
  margin: var(--esp-3) 0 0; padding: 0; list-style: none;
}
.js .paneles__puntos { display: flex; }
.paneles__puntos button {
  width: 32px; height: 32px; border: none; background: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.paneles__puntos button::after {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: rgba(39, 39, 39, 0.2); border: 1.5px solid var(--greige);
  transition: background var(--transicion), transform var(--transicion);
}
.paneles__puntos button[aria-current="true"]::after { background: var(--texto); border-color: var(--texto); transform: scale(1.2); }

/* ---------- "Nuestros pacientes dicen" (formato original del WordPress):
   foto fija de fondo (con velo oscuro) y solo el TEXTO del testimonio va
   rotando cada pocos segundos, a diferencia del resto de carruseles del
   sitio. ---------- */
/* Fondo oscuro FIJO, no del tema: en móvil la foto pasa a una banda propia y el
   texto deja de tener imagen detrás. Sin esto quedaría blanco sobre blanco en
   tema claro. También cubre el caso de que la foto no cargue. */
.testimonios-heroe { position: relative; overflow: hidden; color: var(--blanco); background: #1e1e1d; }
.testimonios-heroe__imagen { position: absolute; inset: 0; }
.testimonios-heroe__imagen img { width: 100%; height: 100%; object-fit: cover; }
.testimonios-heroe__imagen::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(270deg, rgba(30, 30, 29, 0.93) 0%, rgba(30, 30, 29, 0.78) 42%, rgba(30, 30, 29, 0.2) 78%);
}
.testimonios-heroe__contenido {
  position: relative; z-index: 1; max-width: 560px; margin-left: auto;
  padding-block: var(--esp-7);
}
.testimonios-heroe .ceja { color: var(--greige); }
.testimonios-heroe h2 { color: var(--blanco); }
.paneles--testimonios blockquote { margin: 0; font-size: 1.125rem; line-height: 1.65; font-style: italic; color: #e8e6df; }
.paneles--testimonios cite { display: block; margin-top: var(--esp-2); font-style: normal; font-weight: 600; color: var(--greige); }
.paneles--testimonios .paneles__puntos button::after { border-color: var(--greige); background: rgba(255, 255, 255, 0.15); }
.paneles--testimonios .paneles__puntos button[aria-current="true"]::after { background: var(--blanco); border-color: var(--blanco); }
.enlace--claro { color: var(--blanco); border-bottom-color: rgba(255, 255, 255, 0.5); }
.enlace--claro:hover { border-bottom-color: var(--blanco); }
@media (max-width: 759px) {
  .testimonios-heroe__contenido {
    max-width: none; margin-left: 0;
    padding-block: var(--esp-4) var(--esp-6);
  }
  /* La foto deja de estar DEBAJO del texto y pasa a tener su propia banda arriba
     (position:relative + aspect-ratio en vez de inset:0). En vertical el velo
     plano al 82 % dejaba el texto legible pero la imagen no se veía; y no se
     podía aclarar sin romper el contraste de la ceja y el nombre en greige.
     Con la banda, el texto queda sobre el fondo sólido de la sección y el
     contraste ya no depende de lo clara que sea la foto. */
  .testimonios-heroe__imagen { position: relative; inset: auto; aspect-ratio: 4 / 3; }
  .testimonios-heroe__imagen::after {
    background: linear-gradient(180deg,
      rgba(30, 30, 29, 0) 0%,
      rgba(30, 30, 29, 0.06) 58%,
      rgba(30, 30, 29, 0.86) 88%,
      #1e1e1d 100%);
  }
  /* El hombre está en el tercio izquierdo del original apaisado: sin reencuadrar,
     el recorte vertical lo deja fuera. */
  .testimonios-heroe__imagen img { object-position: 33% 50%; }
}

/* ---------- "¡Entrena tu piel!" (Rutinas Skin Care): misma mecánica que
   .testimonios-heroe pero en espejo — foto real de fondo (mujer sonriendo,
   descargada del WordPress) con el texto/pasos superpuestos a la
   IZQUIERDA. ---------- */
.rutina-heroe { position: relative; overflow: hidden; color: var(--blanco); background: #1e1e1d; }
.rutina-heroe__imagen { position: absolute; inset: 0; }
.rutina-heroe__imagen img { width: 100%; height: 100%; object-fit: cover; }
.rutina-heroe__imagen::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(30, 30, 29, 0.91) 0%, rgba(30, 30, 29, 0.74) 45%, rgba(30, 30, 29, 0.18) 78%);
}
.rutina-heroe__contenido { position: relative; z-index: 1; max-width: 560px; padding-block: var(--esp-7); }
.rutina-heroe ol { color: #e8e6df; padding-left: 1.2em; }
.rutina-heroe ol strong { color: var(--blanco); }
@media (max-width: 759px) {
  .rutina-heroe__contenido { max-width: none; padding-block: var(--esp-4) var(--esp-6); }
  .rutina-heroe__imagen { position: relative; inset: auto; aspect-ratio: 4 / 3; }
  .rutina-heroe__imagen::after {
    background: linear-gradient(180deg,
      rgba(30, 30, 29, 0) 0%,
      rgba(30, 30, 29, 0.06) 58%,
      rgba(30, 30, 29, 0.86) 88%,
      #1e1e1d 100%);
  }
  /* Ella está en la mitad derecha del original apaisado. */
  .rutina-heroe__imagen img { object-position: 62% 45%; }
}

/* ---------- Revelado al hacer scroll (como el WPBakery del WordPress) ---------- */
/* Solo cuando hay JS (html.js): sin JS todo el contenido es visible. */
.js .revelar { opacity: 0; transform: translateY(26px); transition: opacity 700ms ease-out, transform 700ms ease-out; }
.js .revelar.visible { opacity: 1; transform: none; }

/* ---------- Tarjetas ---------- */
.tarjeta {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow var(--transicion), transform var(--transicion), background var(--transicion), border-color var(--transicion);
}
.tarjeta:hover { box-shadow: var(--sombra); transform: translateY(-2px); }
.tarjeta__cuerpo { padding: var(--esp-3); display: flex; flex-direction: column; flex: 1; }
.tarjeta__cuerpo p { color: var(--texto-suave); font-size: 0.9688rem; }
.tarjeta__cuerpo :last-child { margin-top: auto; }
.tarjeta img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.tarjeta h3 { font-size: 1.25rem; font-weight: 600; }

.enlace {
  color: var(--texto); font-weight: 600; text-decoration: none;
  border-bottom: 1.5px solid var(--greige); transition: border-color var(--transicion);
}
.enlace:hover { border-bottom-color: var(--texto); }

/* Tarjeta de producto */
.producto { text-align: center; }
.producto img { aspect-ratio: 3 / 4; object-fit: contain; background: var(--superficie); padding: var(--esp-2); }
.producto h3 { font-size: 1.0625rem; min-height: 2.4em; }
.producto .marca { font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--texto-suave); margin-bottom: 4px; }

/* Testimonios */
.testimonio {
  background: var(--superficie); border-left: 3px solid var(--greige);
  padding: var(--esp-3); border-radius: 0 var(--radio) var(--radio) 0;
  box-shadow: var(--sombra);
}
.testimonio blockquote { margin: 0 0 var(--esp-2); font-style: italic; color: var(--texto-suave); }
.testimonio cite { font-style: normal; font-weight: 600; }

/* Lista de procedimientos (páginas de servicio) */
.procedimientos { display: grid; gap: var(--esp-3); padding: 0; margin: 0; list-style: none; }
@media (min-width: 760px) { .procedimientos { grid-template-columns: repeat(2, 1fr); } }
.procedimientos > li {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: var(--esp-3);
}
.procedimientos img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 4px; margin-bottom: var(--esp-2);
}
.procedimientos h3 { font-size: 1.1875rem; font-weight: 600; margin-bottom: var(--esp-1); }
.procedimientos p { margin: 0; color: var(--texto-suave); font-size: 0.9688rem; }

/* Acordeón FAQ */
.faq { border-bottom: 1px solid var(--borde); }
.faq summary {
  cursor: pointer; font-weight: 600; font-size: 1.0625rem;
  padding: var(--esp-2) var(--esp-4) var(--esp-2) 0;
  position: relative; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 8px; top: 50%;
  width: 10px; height: 10px; border-right: 2px solid var(--texto-suave); border-bottom: 2px solid var(--texto-suave);
  transform: translateY(-70%) rotate(45deg); transition: transform var(--transicion);
}
.faq[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq div { padding: 0 0 var(--esp-2); color: var(--texto-suave); }

/* Galería (antes y después / consultorio) */
.galeria { display: grid; gap: var(--esp-2); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .galeria { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .galeria--4 { grid-template-columns: repeat(4, 1fr); } }
.galeria figure { margin: 0; }
.galeria img { border-radius: var(--radio); width: 100%; object-fit: cover; }
.galeria figcaption { font-size: 0.875rem; color: var(--texto-suave); padding-top: 6px; text-align: center; }

/* Botón que envuelve cada foto de la galería para abrir el lightbox
   (inyectado por JS; sin JS la foto se ve igual mas no es clicable) */
.galeria__abrir { display: block; width: 100%; padding: 0; border: none; background: none; cursor: zoom-in; }
.galeria__abrir img { display: block; }

/* ---------- Coverflow genérico (home): un elemento activo se ve grande y
   centrado, los demás quedan escalados y atenuados detrás/al lado; las
   flechas (o un clic directo sobre uno lateral) rotan cuál queda al
   frente. Réplica del slider tipo "carousel" del WordPress. Reutilizado
   por "Casos de éxito" (fotos), "Mis favoritos" (productos) y "Artículos
   recientes" (posts) — cada item lleva su imagen + un bloque
   `.coverflow__datos` con el texto (visible siempre sin JS, en la grilla
   estática; con JS se oculta y su contenido se copia a `.coverflow__info`,
   el único panel visible bajo la imagen activa). ---------- */
.coverflow {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--esp-3);
}
.coverflow__item { margin: 0; }
.coverflow__item img { border-radius: var(--radio); width: 100%; aspect-ratio: 900 / 969; object-fit: cover; display: block; }
.coverflow__datos { padding-top: 6px; text-align: center; }
.coverflow__datos p { margin: 0; color: var(--texto-suave); font-size: 0.875rem; }
.coverflow__info, .coverflow__controles { display: none; }
@media (min-width: 760px) { .coverflow { grid-template-columns: repeat(4, 1fr); } }

/* Variante "Mis favoritos": imagen de producto contenida sobre fondo crema */
.coverflow-wrap--productos .coverflow__item img {
  aspect-ratio: 3 / 4; object-fit: contain; background: var(--superficie); padding: var(--esp-2);
}
.coverflow-wrap--productos .coverflow__datos .marca {
  font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 4px;
}
.coverflow-wrap--productos .coverflow__datos h3 { font-size: 1.0625rem; color: var(--texto); margin: 0 0 4px; }

/* Variante "Artículos recientes": imagen de post 16:9 */
.coverflow-wrap--articulos .coverflow__item img { aspect-ratio: 16 / 9; object-fit: cover; }
.coverflow-wrap--articulos .coverflow__datos h3 { font-size: 1.0625rem; color: var(--texto); margin: 0 0 4px; }

.js .coverflow {
  position: relative; display: grid; grid-template-columns: 1fr; place-items: center;
  height: clamp(300px, 34vw, 380px); overflow: hidden;
}
.js .coverflow-wrap--articulos .coverflow { height: clamp(170px, 20vw, 220px); }
.js .coverflow__item {
  grid-area: 1 / 1; width: min(60vw, 280px); cursor: pointer;
  transition: transform 500ms ease, opacity 500ms ease;
}
.js .coverflow__item img { box-shadow: var(--sombra); }
.js .coverflow-wrap--productos .coverflow__item img { box-shadow: none; border: 1px solid var(--borde); }
.js .coverflow__item .coverflow__datos { display: none; } /* la reemplaza .coverflow__info, único y dinámico */
.js .coverflow__item[data-pos="0"] { transform: scale(1); opacity: 1; z-index: 4; cursor: default; }
.js .coverflow__item[data-pos="-1"] { transform: translateX(-68%) scale(0.76); opacity: 0.65; z-index: 3; }
.js .coverflow__item[data-pos="1"] { transform: translateX(68%) scale(0.76); opacity: 0.65; z-index: 3; }
.js .coverflow__item[data-pos="2"] { transform: translateY(-12%) scale(0.5); opacity: 0.35; z-index: 2; }
.js .coverflow__info {
  display: block; margin: var(--esp-3) 0 0; text-align: center; max-width: 440px; margin-inline: auto;
}
.js .coverflow__info p { margin: 0 0 4px; color: var(--texto-suave); }
.js .coverflow__info .marca { font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; }
.js .coverflow__info h3 { font-size: 1.0625rem; font-weight: 600; color: var(--texto); margin: 0 0 4px; }
.js .coverflow__controles { display: flex; justify-content: center; gap: var(--esp-2); margin-top: var(--esp-2); }
.coverflow__controles button {
  width: 44px; height: 44px; border: 1px solid var(--borde); border-radius: 50%;
  background: var(--superficie); color: var(--texto); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--transicion), border-color var(--transicion);
}
.coverflow__controles button:hover { background: var(--borde); border-color: var(--greige); }
.coverflow__controles svg { width: 20px; height: 20px; }
@media (max-width: 759px) {
  .js .coverflow__item { width: min(66vw, 260px); }
  .js .coverflow__item[data-pos="-1"] { transform: translateX(-58%) scale(0.7); }
  .js .coverflow__item[data-pos="1"] { transform: translateX(58%) scale(0.7); }
}

/* ---------- Lightbox de "Antes y Después": navegar entre fotos reales sin
   salir de la página (réplica de la navegación agrupada del Essential Grid
   del WordPress). Insertado por JS al final de <body>. ---------- */
.caja-luz-abierta { overflow: hidden; }
.caja-luz {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background: rgba(20, 20, 19, 0.94);
  padding: var(--esp-2);
}
/* El atributo [hidden] del navegador no gana por sí solo frente a la regla
   de arriba (misma especificidad, pero CSS de autor > UA): sin esto, el
   visor quedaba siempre visible desde que cargaba la página. */
.caja-luz[hidden] { display: none; }
.caja-luz__figura { margin: 0; max-width: min(90vw, 720px); text-align: center; }
.caja-luz__figura img { max-width: 100%; max-height: 78vh; border-radius: var(--radio); display: block; margin: 0 auto; }
.caja-luz__figura figcaption { color: var(--crema); font-size: 0.9375rem; margin-top: var(--esp-2); }
.caja-luz__cerrar, .caja-luz__control {
  position: absolute; border: none; border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.14); color: var(--blanco);
  transition: background var(--transicion);
}
.caja-luz__cerrar:hover, .caja-luz__control:hover { background: rgba(255, 255, 255, 0.28); }
.caja-luz__cerrar { top: var(--esp-2); right: var(--esp-2); width: 44px; height: 44px; }
.caja-luz__cerrar svg { width: 20px; height: 20px; }
.caja-luz__control { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; }
.caja-luz__control svg { width: 26px; height: 26px; }
.caja-luz__control--ant { left: var(--esp-2); }
.caja-luz__control--sig { right: var(--esp-2); }
@media (max-width: 759px) {
  .caja-luz__control { width: 44px; height: 44px; }
  .caja-luz__control--ant { left: 4px; }
  .caja-luz__control--sig { right: 4px; }
}

/* Cifras */
.cifras { display: grid; gap: var(--esp-3); grid-template-columns: repeat(3, 1fr); text-align: center; }
.cifras strong { display: block; font-size: clamp(1.8rem, 4vw, 2.75rem); font-weight: 300; }
.cifras span { color: var(--texto-suave); font-size: 0.9375rem; }
.franja--oscura .cifras span { color: var(--greige); }

/* Migas de pan */
.migas { font-size: 0.875rem; color: var(--texto-suave); padding-block: var(--esp-2); }
.migas ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.migas li + li::before { content: "›"; margin-right: 6px; color: var(--greige); }
.migas a { color: var(--texto-suave); text-decoration: none; }
.migas a:hover { text-decoration: underline; }

/* ---------- Artículos (blog) ---------- */
.articulo { max-width: 760px; margin-inline: auto; }
.articulo__meta { color: var(--texto-suave); font-size: 0.9375rem; margin-bottom: var(--esp-3); }
.articulo img { border-radius: var(--radio); margin-block: var(--esp-3); }
.articulo h2 { font-size: 1.5rem; font-weight: 600; margin-top: var(--esp-4); }
.articulo h3 { font-size: 1.1875rem; font-weight: 600; margin-top: var(--esp-3); }
.articulo ul, .articulo ol { margin-bottom: var(--esp-2); }
.articulo blockquote {
  margin: var(--esp-3) 0; padding: var(--esp-2) var(--esp-3);
  border-left: 3px solid var(--greige); background: var(--superficie);
  border-radius: 0 var(--radio) var(--radio) 0;
}
/* Aviso médico / autoría (E-E-A-T) al pie de cada artículo */
.aviso-medico {
  margin-top: var(--esp-3); padding: var(--esp-2) var(--esp-3);
  background: var(--superficie); border-radius: var(--radio);
  font-size: 0.875rem; color: var(--texto-suave);
}
/* Sección de referencias científicas en artículos */
.referencias { margin-top: var(--esp-4); }
.referencias h2 { font-size: 1.25rem; }
.referencias ol { font-size: 0.9375rem; color: var(--texto-suave); }
.referencias li { margin-bottom: 6px; }

/* ---------- Formularios ---------- */
.formulario { display: grid; gap: var(--esp-2); }
.campo { display: grid; gap: 6px; }
.campo label { font-weight: 600; font-size: 0.9375rem; }
.campo input, .campo textarea, .campo select {
  font-family: inherit; font-size: 1rem; color: var(--texto);
  padding: 12px 14px; min-height: 48px;
  border: 1.5px solid var(--greige); border-radius: var(--radio);
  background: var(--superficie); width: 100%;
}
.campo textarea { min-height: 130px; resize: vertical; }
.campo input:focus, .campo textarea:focus, .campo select:focus {
  outline: none; border-color: var(--texto); box-shadow: 0 0 0 3px rgba(103, 100, 91, 0.25);
}
.campo .ayuda { font-size: 0.8438rem; color: var(--texto-suave); }
.formulario__estado { min-height: 1.5em; font-weight: 600; }
.formulario__estado.es-error { color: var(--error); }
.formulario__estado.es-exito { color: var(--exito); }
/* Honeypot: fuera de la vista de humanos, presente para bots */
.campo-web { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Pie de página ---------- */
.pie { background: var(--tinta); color: #d9d7cf; font-size: 0.9375rem; }
.pie__interior { display: grid; gap: var(--esp-4); padding-block: var(--esp-6); }
@media (min-width: 760px) { .pie__interior { grid-template-columns: 2fr 1fr 1fr 1.4fr; } }
.pie h2 { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.25em; text-transform: uppercase; color: var(--greige); margin-bottom: var(--esp-2); }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pie a { color: #d9d7cf; text-decoration: none; }
.pie a:hover { color: var(--blanco); text-decoration: underline; }
.pie address { font-style: normal; line-height: 1.7; }
.pie__logo { width: 218px; height: 47px; margin-bottom: var(--esp-2); }
.pie__legal { border-top: 1px solid #3d3d3d; padding-block: var(--esp-3); font-size: 0.8438rem; color: var(--greige); }
.pie__redes { display: flex; gap: var(--esp-2); margin-top: var(--esp-2); }
.pie__redes a {
  display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center;
  border: 1px solid #4a4a4a; border-radius: 50%; transition: border-color var(--transicion), color var(--transicion);
}
.pie__redes a:hover { border-color: var(--greige); color: var(--blanco); }
.pie__redes svg { width: 20px; height: 20px; }

/* ---------- Botón flotante de WhatsApp ---------- */
.whatsapp {
  position: fixed; right: var(--esp-2); bottom: var(--esp-2); z-index: 90;
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--whatsapp); color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  transition: transform var(--transicion);
}
.whatsapp:hover { transform: scale(1.06); }
.whatsapp svg { width: 30px; height: 30px; }

/* Bloque "Síguela en redes" */
.redes-cta { display: flex; gap: var(--esp-2); flex-wrap: wrap; justify-content: center; }
.redes-cta .boton { gap: 8px; }

/* Insignias de membresias (ASOCOLDERMA, CILAD) */
.insignias { display: flex; gap: var(--esp-3); align-items: center; flex-wrap: wrap; }
.insignias img { width: auto; height: 56px; }

/* ---------- Utilidades ---------- */
.grupo-botones { display: flex; gap: var(--esp-2); flex-wrap: wrap; }
.grupo-botones.centrado, .centrado .grupo-botones { justify-content: center; }
.fondo-oscuro .boton--fantasma { background: transparent; color: var(--blanco); border-color: var(--blanco); }
.fondo-oscuro .boton--fantasma:hover { background: var(--blanco); color: var(--tinta); }
.badge-promo {
  display: inline-block; background: var(--greige); color: var(--tinta);
  font-weight: 700; font-size: 0.875rem; letter-spacing: 0.06em;
  padding: 6px 14px; border-radius: 999px; margin-bottom: var(--esp-2);
}
.nota-legal { font-size: 0.8438rem; color: var(--texto-suave); }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mt-4 { margin-top: var(--esp-4); } .mt-5 { margin-top: var(--esp-5); }