/* =====================================================================
   ESTILOS · Facial Hollywood Peel · Dra. Dulce Tenahua
   Sistema visual según Manual de Identidad Visual 2026 v1.0 (PLAN.md §6).
   Proporción: 60 % blanco · 30 % morado · 10 % violeta.
   Tipografía: Playfair Display 400 (solo h1) + Poppins 300/500/600.
   ===================================================================== */

/* ---------- Fuentes autoalojadas (woff2, subset latín) -------------- */
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/playfair-display-400.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/poppins-300.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/poppins-500.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/poppins-600.woff2") format("woff2");
}

/* ---------- Tokens de marca ----------------------------------------- */
:root {
  --morado-dulce:    #85499A; /* principal: encabezados, ondas, botón */
  --morado-profundo: #53396A; /* texto de máximo contraste, fondos oscuros */
  --violeta-pluma:   #9750AC; /* acento: etiquetas, cifras, viñetas */
  --lila:            #B27DC1; /* ondas secundarias, filetes. NO texto corrido */
  --lila-suave:      #D5B9DE; /* degradados, texto secundario sobre morado profundo */
  --velo:            #EEE3F2; /* fondos suaves, cajas de nota */
  --blanco:          #FFFFFF; /* fondo dominante */
  --gris-marca:      #606363; /* texto corrido */

  --ff-body:    "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ff-display: "Playfair Display", Georgia, "Times New Roman", serif;

  --measure: 640px;   /* ancho máximo del contenido en escritorio */
  --pad: 20px;        /* margen lateral en móvil */
  --radius: 20px;
}

/* ---------- Reset mínimo -------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--blanco);
  color: var(--gris-marca);
  font-family: var(--ff-body);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.6;
  text-align: left;              /* nunca justificado */
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, address { margin: 0; }
ul, ol { padding: 0; list-style: none; }
address { font-style: normal; }
a { color: var(--morado-dulce); }
strong { font-weight: 600; color: var(--morado-profundo); }

:focus-visible {
  outline: 3px solid var(--violeta-pluma);
  outline-offset: 3px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Contenedor ---------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

/* ---------- Ondas (solo arriba y abajo de la página) ---------------- */
.wave { width: 100%; }
.wave--top { height: 24px; }
.wave--bottom { height: 64px; margin-bottom: -1px; }

/* ---------- Encabezado: banda Morado Profundo, delgada -------------- */
.site-header {
  background: var(--morado-profundo);
  padding: 8px 0;
}
.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand { display: block; flex: none; }
.logo { display: block; width: auto; height: 32px; }   /* móvil: pluma blanca */
@media (min-width: 720px) {
  .logo { height: 64px; }                             /* logo negativo completo, ≈113 px de ancho */
}
.wave--top { margin-top: -1px; }

/* ---------- Tipografía ---------------------------------------------- */
.eyebrow {
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--violeta-pluma);
}

@media (max-width: 419px) {
  .eyebrow .sep { display: none; }
  .eyebrow .city { display: block; margin-top: 2px; }
}

h1 {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(34px, 5vw + 16px, 44px);  /* móvil 34–38 px */
  line-height: 1.15;
  color: var(--morado-profundo);
  text-wrap: balance;
}

h2 {
  font-weight: 600;
  font-size: 26px;
  line-height: 1.25;
  color: var(--morado-profundo);
  text-wrap: balance;
}

h3 {
  font-weight: 600;
  font-size: 18px;
  line-height: 1.35;
  color: var(--morado-profundo);
}

.lead { font-size: 17px; }
@media (min-width: 720px) { .lead { font-size: 18px; } }
.micro { font-size: 14px; }
.center { text-align: center; }

/* ---------- Chip de cupo (texto estático) ---------------------------- */
.chip {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--velo);
  color: var(--morado-profundo);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.3;
}
.chip::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  margin: -2px 9px 0 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--violeta-pluma);
}

/* ---------- Botón único (píldora, Morado Dulce, ícono WhatsApp) ----- */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 14px 24px;
  border-radius: 999px;
  background: var(--morado-dulce);
  color: var(--blanco);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover,
.btn:active {
  background: var(--morado-profundo);
  color: var(--blanco);
}
.btn svg {
  flex: none;
  width: 24px;
  height: 24px;
  fill: currentColor;
}
@media (min-width: 720px) {
  .btn {
    width: fit-content;
    min-width: 340px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 36px;
    padding-right: 36px;
  }
}

/* ---------- Secciones ------------------------------------------------ */
.section { padding: 44px 0; }
.section > .wrap > * + * { margin-top: 16px; }

.hero { padding: 24px 0 44px; }
.hero__copy > * + * { margin-top: 14px; }
.hero__copy h1 { margin-top: 12px; }
.hero__copy .btn { margin-top: 22px; }
.hero__copy .micro { margin-top: 12px; }
.hero .hero__media { width: min(100%, 420px); margin: 32px auto 0; }

.band { background: var(--velo); }

.cta-block { padding: 8px 0 44px; }
.cta-block > .wrap > * + * { margin-top: 12px; }

/* ---------- Lista con pluma como viñeta ------------------------------ */
.pluma-list li {
  position: relative;
  padding-left: 36px;
}
.pluma-list li + li { margin-top: 14px; }
.pluma-list .pluma {
  position: absolute;
  left: 0;
  top: 3px;
  width: 22px;
  height: auto;                  /* pluma oficial, siempre en Violeta Pluma */
}


/* ---------- Pasos numerados ----------------------------------------- */
.steps li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  align-items: start;
}
.steps li + li { margin-top: 18px; }
.step-num {
  font-weight: 600;
  font-size: 30px;
  line-height: 1;
  color: var(--violeta-pluma);
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}
.steps p { margin-top: 2px; }

.anchor {
  font-weight: 600;
  font-size: 19px;
  line-height: 1.45;
  color: var(--morado-profundo);
}

/* ---------- Fila de mini-datos --------------------------------------- */
.facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 24px;
}
.facts li {
  padding: 12px 8px;
  border-radius: 14px;
  background: var(--velo);
  color: var(--morado-profundo);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.3;
  text-align: center;
}
.band .facts li { background: var(--blanco); }

/* ---------- Quién te atiende ----------------------------------------- */
.doctor__copy { text-align: center; }
.doctor__copy > * + * { margin-top: 10px; }

.portrait {
  display: block;
  width: 168px;
  height: 168px;
  margin: 0 auto 18px;
  border-radius: 50%;
}
.portrait { object-fit: cover; }

.doctor h2 { font-size: 24px; }
.what__copy > * + * { margin-top: 16px; }
.what .what__media { width: min(100%, 420px); margin: 32px auto 0; }
.role { color: var(--morado-dulce); font-weight: 500; }
.cedula {
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--violeta-pluma);
}
.motto {
  margin-top: 16px;
  font-weight: 600;
  color: var(--morado-profundo);
}

/* ---------- Preguntas frecuentes (details nativo) -------------------- */
.faq details { border-top: 1px solid var(--velo); }
.faq details:last-of-type { border-bottom: 1px solid var(--velo); }
.faq summary {
  position: relative;
  padding: 16px 36px 16px 0;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.4;
  color: var(--morado-profundo);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--violeta-pluma);
  border-bottom: 2px solid var(--violeta-pluma);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .15s ease;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details p { padding: 0 0 18px; }
.faq .pluma-end {
  display: block;
  width: 30px;
  height: auto;
  margin: 28px auto 0;
}

/* ---------- Cierre --------------------------------------------------- */
.final .wrap { text-align: center; }
.final .wrap > * + * { margin-top: 16px; }
.final .btn { margin-top: 24px; }
.final .chip { margin-top: 18px; }
.final .micro { margin-top: 12px; }

/* ---------- Pie sobre Morado Profundo ------------------------------- */
.site-footer {
  background: var(--morado-profundo);
  color: var(--lila-suave);          /* 5.47:1 sobre Morado Profundo */
  font-size: 14px;
  line-height: 1.6;
  padding: 40px 0 36px;
}
.site-footer .wrap { text-align: center; }
.site-footer .wrap > * + * { margin-top: 14px; }
.site-footer .logo--neg { width: 160px; height: auto; margin: 0 auto; }
.site-footer .logo--neg + * { margin-top: 24px; }
.site-footer .legal { color: var(--blanco); }
.site-footer a {
  color: var(--blanco);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Barra fija inferior (solo móvil) ------------------------ */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  padding: 10px var(--pad) calc(10px + env(safe-area-inset-bottom));
  background: var(--blanco);
  border-top: 1px solid var(--velo);
  visibility: hidden;
  transform: translateY(110%);
  transition: transform .2s ease, visibility 0s linear .2s;
}
.sticky-cta.is-visible {
  visibility: visible;
  transform: none;
  transition: transform .2s ease;
}
@media (min-width: 720px) {
  .sticky-cta { display: none; }
}

/* ---------- Página de privacidad ------------------------------------ */
.doc { padding: 24px 0 56px; }
.doc .wrap > * + * { margin-top: 16px; }
.doc h2 { font-size: 20px; margin-top: 30px; }
.doc ul { list-style: disc; padding-left: 22px; }
.doc li + li { margin-top: 6px; }
.doc .back { display: inline-block; margin-top: 30px; }

/* ---------- Utilidades SVG (sin estilos inline, por la CSP) ---------- */
.sr-svg { position: absolute; width: 0; height: 0; overflow: hidden; }
.f-morado-dulce    { fill: var(--morado-dulce); }
.f-morado-profundo { fill: var(--morado-profundo); }
.f-lila            { fill: var(--lila); }
.f-lila-suave      { fill: var(--lila-suave); }

/* ---------- Medios: foto y video del tratamiento -------------------- */
.media { margin: 0; }
.media img,
.media video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 24px;
  background: var(--velo);
}
.media__caption {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  color: var(--gris-marca);
}
.media__toggle {
  display: block;
  margin: 10px auto 0;
  padding: 7px 16px;
  border: 1.5px solid var(--lila);
  border-radius: 999px;
  background: transparent;
  color: var(--morado-dulce);
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.2;
  cursor: pointer;
}
.media__toggle:hover { border-color: var(--morado-dulce); background: var(--velo); }

/* ---------- Tablet (≥ 720 px) ---------------------------------------- */
@media (min-width: 720px) {
  .wrap { padding-left: 32px; padding-right: 32px; }
  .steps--row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
  }
  .steps--row li { display: block; }
  .steps--row li + li { margin-top: 0; }
  .steps--row .step-num { display: block; margin-bottom: 10px; }
}

/* ---------- Escritorio (≥ 900 px) ------------------------------------ */
@media (min-width: 900px) {
  .wrap--wide { max-width: 1080px; }
  h1 { font-size: 50px; }
  h2 { font-size: 30px; }
  .section { padding: 64px 0; }
  .hero { padding-bottom: 64px; }

  .hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 56px;
    align-items: center;
  }
  .hero .hero__media { width: min(100%, 440px); margin: 0; justify-self: end; }
  .hero__copy .btn { margin-left: 0; }

  .what__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    gap: 64px;
    align-items: center;
  }
  .what .what__media { width: 100%; margin: 0; }

  .doctor__grid {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 56px;
    align-items: center;
  }
  .doctor .portrait { width: 240px; height: 240px; margin: 0; }
  .doctor__copy { text-align: left; }

  .faq .wrap { max-width: 760px; }
}

/* ---------- Botón compacto de la cabecera (blanco sobre morado) -------- */
.site-header .btn {
  width: auto;
  min-width: 0;
  min-height: 40px;
  margin: 0;
  padding: 8px 16px;
  gap: 8px;
  background: var(--blanco);
  color: var(--morado-profundo);     /* 9.72:1 */
  font-size: 14px;
}
.site-header .btn:hover,
.site-header .btn:active { background: var(--velo); color: var(--morado-profundo); }
.site-header .btn:focus-visible { outline-color: var(--blanco); }
.site-header .btn svg { width: 18px; height: 18px; }

/* ---------- Banda morada: ¿Te pasa esto? ----------------------------- */
.band--morado { background: var(--morado-dulce); color: var(--blanco); }
.band--morado h2 { color: var(--blanco); }
.mirror__item {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 20px;
  background: rgba(83, 57, 106, .28);   /* Morado Profundo al 28 % sobre Morado Dulce */
}
.mirror__item + .mirror__item { margin-top: 14px; }
.mirror__item p { font-size: 17px; }
.band--morado .mirror-close {
  max-width: 640px;
  margin-top: 26px;
  font-weight: 600;
  color: var(--blanco);
}
@media (min-width: 720px) {
  .mirror__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }
  .mirror__item { display: block; padding: 22px; }
  .mirror__item + .mirror__item { margin-top: 0; }
  .ilu { width: 132px; height: 132px; margin: 0 0 14px; }
}

/* ---------- Dónde estamos: foto de la plaza + dirección + Maps -------- */
.media--wide img { aspect-ratio: 8 / 5; }
.where .where__media { width: 100%; margin: 0; }
.where .where__copy { margin-top: 24px; }
.where__copy > * + * { margin-top: 12px; }
.where__place {
  font-weight: 600;
  font-size: 19px;
  color: var(--morado-profundo);
}
.where address { font-size: 16px; }
.link-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  margin-top: 18px;
  padding: 10px 20px;
  border: 1.5px solid var(--morado-dulce);
  border-radius: 999px;
  background: var(--blanco);
  color: var(--morado-dulce);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.link-pill:hover,
.link-pill:active { background: var(--morado-dulce); color: var(--blanco); }
.link-pill svg { width: 20px; height: 20px; flex: none; fill: currentColor; }
@media (min-width: 900px) {
  .where__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 56px;
    align-items: center;
  }
  .where .where__copy { margin-top: 0; }
}

/* ---------- Ilustraciones animadas de "¿Te pasa esto?" ---------------- */
.ilu { display: block; width: 96px; height: 96px; }
.ilu .st {
  fill: none;
  stroke: var(--blanco);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ilu .f-skin  { fill: var(--lila-suave); }
.ilu .f-dark  { fill: var(--morado-profundo); }
.ilu .f-white { fill: var(--blanco); }
.ilu .f-glow  { fill: rgba(238, 227, 242, .22); }

@keyframes ilu-drift   { from { transform: translateX(-7px); } to { transform: translateX(7px); } }
@keyframes ilu-flicker { 0%, 100% { opacity: .3; } 50% { opacity: .8; } }
@keyframes ilu-blink   { 0%, 55%, 100% { opacity: 0; transform: scale(.5); } 22% { opacity: 1; transform: scale(1); } }
@keyframes ilu-press   { 0%, 30%, 100% { transform: translateY(0); } 42%, 58% { transform: translateY(5px); } }
@keyframes ilu-drip    { 0%, 40% { opacity: 0; transform: translateY(0); } 48% { opacity: 1; } 88% { opacity: 1; transform: translateY(16px); } 100% { opacity: 0; transform: translateY(18px); } }
@keyframes ilu-lift    { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

.ilu__cloud { animation: ilu-drift 6s ease-in-out infinite alternate; }
.ilu__rays  { animation: ilu-flicker 3.2s ease-in-out infinite; }
.ilu__shine {
  transform-box: fill-box;
  transform-origin: center;
  animation: ilu-blink 2.6s ease-in-out infinite;
}
.ilu--textura g:nth-of-type(2) .ilu__shine { animation-delay: .9s; }
.ilu--textura g:nth-of-type(3) .ilu__shine { animation-delay: 1.7s; }
.ilu__pump { animation: ilu-press 3s ease-in-out infinite; }
.ilu__drop { animation: ilu-drip 3s ease-in infinite; }
.ilu__lid  { animation: ilu-lift 3.8s ease-in-out infinite; }

/* Al tocar o pasar el cursor, la animación se acelera */
.mirror__item:hover .ilu__cloud,
.mirror__item.is-active .ilu__cloud { animation-duration: 2.4s; }
.mirror__item:hover .ilu__rays,
.mirror__item.is-active .ilu__rays  { animation-duration: 1.1s; }
.mirror__item:hover .ilu__shine,
.mirror__item.is-active .ilu__shine { animation-duration: 1.1s; }
.mirror__item:hover .ilu__pump,
.mirror__item.is-active .ilu__pump,
.mirror__item:hover .ilu__drop,
.mirror__item.is-active .ilu__drop  { animation-duration: 1.3s; }
.mirror__item:hover .ilu__lid,
.mirror__item.is-active .ilu__lid   { animation-duration: 1.5s; }