/* Cirugía ortognática · Stefan Domančić — hoja de estilo del sitio educativo */
:root {
  --noche: #0f0e17;
  --noche-2: #17162a;
  --marengo: #2d2d3f;
  --violeta: #5441a5;
  --violeta-luz: #8e80e6;
  --lavanda: #b8b2d9;
  --niebla: #edeaf5;
  --niebla-2: #cfcbe0;
  --hueso: #e6dcc8;
  --claro: #f4f2f8;
  --claro-2: #e9e5f2;
  --tinta: #262438;
  --tinta-2: #55526b;
  --ambar: #e8b98a;
  --turquesa: #34c9c0;
  --coral: #ee9a78;
  --acto: #6f7fd6;              /* color de la luz de cada acto (lo cambia el body) */
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --margen: clamp(20px, 4.4vw, 64px);
  --lectura: 68ch;
}
body[data-acto="I"] { --acto: #6f7fd6; }
body[data-acto="II"] { --acto: #5441a5; }
body[data-acto="III"] { --acto: #9a6bd0; }
body[data-acto="IV"] { --acto: #e8b98a; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--noche); color: var(--niebla); font-family: var(--sans); font-size: 16px; line-height: 1.65; }
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--violeta-luz); outline-offset: 3px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------------------------------------------------------- cabecera */
.cabecera { position: fixed; inset: 0 0 auto 0; z-index: 40; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 18px var(--margen); pointer-events: none; }
.cabecera > * { pointer-events: auto; }
/* sobre las secciones claras la cabecera toma fondo propio (si no, la firma se pierde) */
.cabecera { transition: background-color .35s ease, box-shadow .35s ease; }
.cabecera.solida { background: rgba(15,14,23,.9); backdrop-filter: blur(10px); box-shadow: 0 1px 0 rgba(237,234,245,.08); pointer-events: auto; }
.firma { text-decoration: none; display: flex; flex-direction: column; line-height: 1.1; }
.firma b { font-family: var(--serif); font-weight: 500; font-size: 24px; letter-spacing: .01em; }
.firma span { font-size: 12px; color: var(--niebla-2); letter-spacing: .04em; margin-top: 3px; }
.cabecera .acciones { display: flex; gap: 10px; align-items: center; }
.boton { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 22px; border-radius: 999px; border: 0;
  font: 500 15px/1 var(--sans); text-decoration: none; cursor: pointer; white-space: nowrap; }
.boton-cta { background: var(--violeta); color: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 10px 30px -12px rgba(84,65,165,.9); }
.boton-cta:hover { background: #6553b8; }
.boton-temas { background: rgba(15,14,23,.45); color: var(--niebla); border: 1px solid rgba(237,234,245,.22); backdrop-filter: blur(8px); }
.boton-temas svg { width: 18px; height: 18px; }
.vista-previa { position: fixed; z-index: 60; left: 50%; bottom: 14px; transform: translateX(-50%); font-size: 12px; color: var(--niebla-2);
  background: rgba(15,14,23,.72); border: 1px solid rgba(237,234,245,.14); padding: 6px 12px; border-radius: 999px; backdrop-filter: blur(6px); }

/* ---------------------------------------------------------------- menú */
.menu { position: fixed; inset: 0; z-index: 50; background: rgba(12,11,19,.97); display: none; overflow-y: auto; }
.menu[aria-hidden="false"] { display: block; }
.menu-dentro { max-width: 1280px; margin: 0 auto; padding: 96px var(--margen) 64px; }
.menu-actos { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 40px; }
.menu-acto h2 { font-family: var(--serif); font-weight: 500; font-size: 30px; margin: 0 0 4px; }
.menu-acto p { margin: 0 0 18px; color: var(--niebla-2); font-size: 14px; }
.menu-acto ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.menu-acto a { display: block; padding: 8px 0; text-decoration: none; color: var(--niebla); border-bottom: 1px solid rgba(237,234,245,.08); }
.menu-acto a:hover, .menu-acto a[aria-current="page"] { color: #fff; border-bottom-color: var(--violeta-luz); }
.menu-pie { margin-top: 56px; display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }
.menu-pie a.enlace { text-decoration: none; color: var(--niebla-2); }
.menu-cerrar { position: fixed; top: 18px; right: var(--margen); z-index: 55; }

/* ---------------------------------------------------------------- escenario */
.escenario { position: relative; }
.lienzo { position: sticky; top: 0; height: 100svh; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 70% at 50% 58%, color-mix(in srgb, var(--acto) 22%, var(--noche-2)) 0%, var(--noche) 62%); }
.lienzo .orbe { position: absolute; border-radius: 50%; filter: blur(34px); opacity: .55; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--acto) 80%, transparent) 0%, transparent 68%); animation: deriva 18s ease-in-out infinite; }
.lienzo .orbe.o1 { width: 38vmax; height: 38vmax; left: -8vmax; top: 8vh; }
.lienzo .orbe.o2 { width: 30vmax; height: 30vmax; right: -6vmax; top: 2vh; animation-delay: -7s; opacity: .4; }
@keyframes deriva { 0%,100% { transform: translate(0,0); } 50% { transform: translate(2.2vmax,-1.4vmax); } }
.lienzo .vapor { position: absolute; left: 50%; bottom: 36%; width: 34vmax; height: 46vh; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(50% 60% at 50% 100%, rgba(245,243,250,.12), transparent 70%); filter: blur(22px); animation: sube 12s ease-in-out infinite; }
@keyframes sube { 0%,100% { opacity: .5; transform: translate(-50%, 0) scaleY(1); } 50% { opacity: .9; transform: translate(-50%, -3vh) scaleY(1.1); } }
.horizonte { position: absolute; left: 0; right: 0; top: 64%; height: 1px; background: linear-gradient(90deg, transparent, rgba(237,234,245,.16) 20%, rgba(237,234,245,.16) 80%, transparent); }
.agua { position: absolute; left: 0; right: 0; top: 64%; bottom: 0; background: linear-gradient(180deg, rgba(8,7,13,.35), rgba(6,5,10,.96) 80%); }

/* el sujeto 3D y su reflejo */
.sujeto { position: absolute; left: 50%; bottom: 36%; width: min(92vw, 150vh); aspect-ratio: 16 / 9; transform: translateX(-50%); }
.sujeto img, .sujeto canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .9s ease; }
.sujeto img.activa, .sujeto canvas.activa { opacity: 1; }
.reflejo { position: absolute; left: 50%; top: 64%; width: min(92vw, 150vh); aspect-ratio: 16 / 9; transform: translateX(-50%) scaleY(-1); transform-origin: top;
  -webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,.34), transparent 55%); mask-image: linear-gradient(0deg, rgba(0,0,0,.34), transparent 55%);
  filter: blur(2.5px) saturate(.8); opacity: .8; pointer-events: none; }
.reflejo img, .reflejo canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .9s ease; }
.reflejo .activa { opacity: 1; }
.onda { position: absolute; left: 0; right: 0; top: 64%; bottom: 0; pointer-events: none; opacity: .35;
  background: repeating-linear-gradient(180deg, transparent 0 7px, rgba(237,234,245,.05) 7px 8px); animation: onda 7s linear infinite; }
@keyframes onda { from { background-position: 0 0; } to { background-position: 0 32px; } }
.escena-vacia .sujeto, .escena-vacia .reflejo { display: none; }
.pendiente { position: absolute; left: 50%; bottom: 44%; transform: translateX(-50%); width: min(420px, 70vw); padding: 18px 20px; text-align: center;
  border: 1px dashed rgba(237,234,245,.3); border-radius: 14px; color: var(--niebla-2); font-size: 13px; background: rgba(15,14,23,.35); }

/* la línea: se dibuja con el avance de cada momento */
.linea { position: absolute; left: 0; right: 0; top: 64%; height: 2px; margin-top: -1px; pointer-events: none; }
.linea i { display: block; height: 2px; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0));
  background: linear-gradient(90deg, transparent, #d6cffb 12%, #d6cffb 88%, transparent);
  box-shadow: 0 0 8px rgba(142,128,230,.95), 0 0 22px rgba(84,65,165,.8); }

/* texto de cada momento */
.relato { position: absolute; left: var(--margen); bottom: clamp(24px, 7vh, 72px); width: min(520px, calc(100vw - 2 * var(--margen))); z-index: 5; }
.momento-texto { padding: 26px 28px; border-radius: 20px; background: rgba(13,12,20,.62); border: 1px solid rgba(237,234,245,.08); backdrop-filter: blur(10px);
  opacity: 0; transform: translateY(8px); transition: opacity .6s ease, transform .6s ease; position: absolute; left: 0; right: 0; bottom: 0; }
.momento-texto.activo { opacity: 1; transform: none; position: relative; }
.momento-texto h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.08; margin: 0 0 12px; letter-spacing: -.005em; }
.momento-texto p { margin: 0; color: var(--niebla-2); font-size: 16px; }
.momento-texto .acciones { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.momento-texto .acciones a.enlace { color: var(--niebla); font-size: 14px; }
.rotulo { margin-top: 14px; font-size: 12.5px; color: var(--lavanda); line-height: 1.5; }

/* riel de avance: un punto por momento */
.riel { position: absolute; right: calc(var(--margen) - 8px); top: 50%; transform: translateY(-50%); z-index: 6; display: grid; gap: 14px; }
.riel button { width: 12px; height: 12px; padding: 0; border-radius: 50%; border: 1px solid rgba(237,234,245,.4); background: transparent; cursor: pointer; }
.riel button[aria-current="step"] { background: var(--violeta-luz); border-color: var(--violeta-luz); box-shadow: 0 0 10px var(--violeta-luz); }
.pasos { position: relative; }
.paso { height: 100svh; }

/* portada de landing estándar */
.portada .relato { bottom: auto; top: 50%; transform: translateY(-40%); }
.portada h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(38px, 5vw, 68px); line-height: 1.04; margin: 0 0 16px; }
.portada .entrada { font-size: 18px; color: var(--niebla-2); margin: 0; }
.acto-nombre { display: block; font-size: 13px; color: var(--lavanda); margin-bottom: 12px; }
.bajar { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 6; color: var(--niebla-2); font-size: 13px; text-decoration: none; }

/* ---------------------------------------------------------------- lectura (claro) */
.lectura { background: var(--claro); color: var(--tinta); padding: clamp(56px, 9vw, 120px) var(--margen); }
.lectura > * { max-width: var(--lectura); margin-left: auto; margin-right: auto; }
.lectura h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(28px, 2.8vw, 38px); line-height: 1.12; margin: 56px auto 14px; color: var(--tinta); }
.lectura h2:first-child { margin-top: 0; }
.lectura p { margin: 0 auto 16px; font-size: 17px; }
.lectura .figura { max-width: 980px; margin: 36px auto; border-radius: 18px; overflow: hidden; background: var(--noche); color: var(--niebla); }
.figura img { width: 100%; aspect-ratio: 16/9; object-fit: contain; }
.figura .en-produccion { aspect-ratio: 16/9; display: grid; place-items: center; text-align: center; padding: 28px;
  background: radial-gradient(90% 70% at 50% 60%, color-mix(in srgb, var(--acto) 25%, var(--noche-2)), var(--noche) 70%); }
.en-produccion div { max-width: 520px; border: 1px dashed rgba(237,234,245,.28); border-radius: 12px; padding: 16px 18px; font-size: 13.5px; color: var(--niebla-2); }
.en-produccion b { display: block; color: var(--niebla); font-weight: 500; margin-bottom: 6px; }
.figura figcaption { padding: 12px 18px; font-size: 13px; color: var(--niebla-2); }

.cierre { background: var(--marengo); color: var(--niebla); padding: clamp(48px, 7vw, 96px) var(--margen); }
.cierre-dentro { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; }
.cierre p.grande { font-family: var(--serif); font-size: clamp(26px, 2.6vw, 36px); line-height: 1.18; margin: 0; }
.cierre .lado { display: grid; gap: 14px; justify-items: start; }
.cierre small { color: var(--niebla-2); font-size: 13px; }

.faq { background: var(--claro-2); color: var(--tinta); padding: clamp(48px, 7vw, 96px) var(--margen); }
.faq > * { max-width: var(--lectura); margin-left: auto; margin-right: auto; }
.faq h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(28px, 2.8vw, 38px); margin-top: 0; }
.faq details { border-bottom: 1px solid rgba(38,36,56,.14); }
.faq summary { cursor: pointer; list-style: none; padding: 18px 36px 18px 0; font-weight: 500; font-size: 17px; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 26px; width: 10px; height: 10px; border-right: 1.5px solid var(--violeta); border-bottom: 1.5px solid var(--violeta); transform: rotate(45deg); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(-135deg); top: 30px; }
.faq details p { margin: 0 0 18px; color: var(--tinta-2); }

.siguiente { display: block; text-decoration: none; background: var(--noche); color: var(--niebla); padding: clamp(40px, 6vw, 80px) var(--margen); }
.siguiente-dentro { max-width: 1080px; margin: 0 auto; display: flex; justify-content: space-between; align-items: end; gap: 24px; }
.siguiente small { color: var(--lavanda); font-size: 13px; }
.siguiente strong { display: block; font-family: var(--serif); font-weight: 500; font-size: clamp(28px, 3.6vw, 48px); line-height: 1.1; margin-top: 6px; }
.siguiente:hover strong { color: #fff; }
.siguiente .flecha { width: 56px; height: 56px; border-radius: 50%; border: 1px solid rgba(237,234,245,.3); display: grid; place-items: center; flex: none; }

.temas { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; max-width: 1080px !important; }
.temas a { display: block; padding: 18px 20px; border-radius: 14px; background: #fff; color: var(--tinta); text-decoration: none; border: 1px solid rgba(38,36,56,.08); }
.temas a:hover { border-color: var(--violeta); }
.temas strong { display: block; font-family: var(--serif); font-size: 22px; font-weight: 600; }
.temas span { font-size: 14px; color: var(--tinta-2); }

.pie { background: #0b0a12; color: var(--niebla-2); padding: 48px var(--margen) 96px; font-size: 14px; }
.pie-dentro { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; }
.pie a { color: var(--niebla); }
.pie ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.pie .aviso { grid-column: 1 / -1; font-size: 12.5px; color: #8f8aa8; border-top: 1px solid rgba(237,234,245,.08); padding-top: 18px; }

.barra-movil { display: none; }

@media (max-width: 900px) {
  .menu-actos { grid-template-columns: 1fr 1fr; }
  .cierre-dentro, .pie-dentro { grid-template-columns: 1fr; }
  .temas { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .cabecera .boton-cta { display: none; }
  .firma b { font-size: 20px; }
  .menu-actos { grid-template-columns: 1fr; gap: 28px; }
  /* en vertical el render 16:9 se recorta al centro (el sujeto siempre va centrado); las secuencias usan sus cuadros verticales */
  .sujeto, .reflejo { width: 94vw; height: auto; aspect-ratio: 4 / 5; }
  .sujeto { bottom: 38%; }
  .reflejo { top: 62%; }
  .sujeto img, .sujeto canvas, .reflejo img, .reflejo canvas { object-fit: cover; }
  .sujeto canvas, .reflejo canvas { object-position: var(--op-v, 50% 50%); }   /* r28m: ventana vertical por secuencia (build.py, encuadre_v) */
  .horizonte, .agua, .onda, .linea { top: 62%; }
  .relato { left: 16px; right: 16px; width: auto; bottom: 88px; }
  .momento-texto { padding: 18px 18px; }
  .riel { right: 8px; gap: 10px; }
  .temas { grid-template-columns: 1fr; }
  .barra-movil { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(12,11,19,.92); border-top: 1px solid rgba(237,234,245,.1); backdrop-filter: blur(8px); }
  .barra-movil .boton { width: 100%; justify-content: center; }
  .vista-previa { bottom: auto; top: 70px; font-size: 11px; padding: 4px 10px; }
  .siguiente-dentro { flex-direction: column; align-items: start; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lienzo .orbe, .lienzo .vapor, .onda { animation: none; }
  .sujeto img, .reflejo img, .momento-texto { transition: none; }
}

/* ---------------------------------------------------------------- toma continua renderizada (Blender) */
.lienzo canvas.cine { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.renderizado .orbe, .renderizado .vapor, .renderizado .agua, .renderizado .onda, .renderizado .horizonte,
.renderizado .reflejo, .renderizado .sujeto, .renderizado .linea { display: none; }
.renderizado .lienzo { background: var(--noche); }
.renderizado .relato, .renderizado .riel { z-index: 5; }

/* ---------------------------------------------------------------- texto sobre la escena (sin globo) — revision 29-sep
   Tipografia directa sobre el render, con una marca cuadrada translucida y un velo de lectura suave abajo-izquierda. */
.relato { bottom: clamp(28px, 8vh, 84px); width: min(560px, calc(100vw - 2 * var(--margen))); }
.relato::before { content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: calc(-1 * var(--margen)); bottom: calc(-1 * clamp(28px, 8vh, 84px)); width: min(1100px, 100vw); height: 62vh;
  background: radial-gradient(110% 95% at 0% 100%, rgba(8,7,13,.82) 0%, rgba(8,7,13,.55) 34%, rgba(8,7,13,0) 72%); }
.momento-texto { padding: 0 0 0 24px; border: 0; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  text-shadow: 0 2px 18px rgba(6,5,10,.8); }
.momento-texto h2, .momento-texto h1 { position: relative; font-size: clamp(28px, 3vw, 44px) !important; margin: 0 0 10px !important; }
.momento-texto h2::before, .momento-texto h1::before { content: ""; position: absolute; left: -24px; top: .36em; width: 10px; height: 10px;
  background: color-mix(in srgb, var(--acto) 45%, transparent); border: 1px solid rgba(237,234,245,.38); }
.momento-texto p { color: var(--niebla); font-size: 16.5px; max-width: 44ch; line-height: 1.55; }
.momento-texto .acto-nombre { text-transform: uppercase; letter-spacing: .14em; font-size: 11.5px; color: var(--lavanda); margin-bottom: 14px; }
.momento-texto .rotulo { max-width: 52ch; }

/* ---------------------------------------------------------------- anotaciones sobre la anatomia (siguen la secuencia) */
.notas { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.nota { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity .45s ease; will-change: transform;
  font: 500 12.5px/1 var(--sans); letter-spacing: .03em; color: #f4f2fb; white-space: nowrap; text-shadow: 0 1px 8px rgba(0,0,0,.9); }
.nota.activa { opacity: 1; }
.nota:not([data-pos]) { visibility: hidden; }
.nota i { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 3px rgba(142,128,230,.35), 0 0 12px rgba(142,128,230,.9); }
.nota b { position: absolute; left: 6px; top: -.5px; width: 34px; height: 1px; background: rgba(237,234,245,.7); }
.nota span { position: absolute; left: 46px; top: -.9em; padding: .35em .6em; border-radius: 3px; background: rgba(10,9,20,.62); }   /* r24d: legible también sobre el hueso claro */
.nota.izq b { left: auto; right: 6px; } .nota.izq span { left: auto; right: 46px; }
@media (max-width: 640px) {
  .relato { bottom: 92px; }
  .relato::before { left: -16px; right: -16px; width: auto; bottom: -92px; height: 60vh;
    background: linear-gradient(0deg, rgba(8,7,13,.88) 0%, rgba(8,7,13,.6) 40%, rgba(8,7,13,0) 100%); }
  .momento-texto { padding-left: 20px; }
  .momento-texto h2::before, .momento-texto h1::before { left: -20px; }
  .nota { font-size: 11.5px; } .nota b { width: 22px; } .nota span { left: 32px; } .nota.izq span { right: 32px; }
}

/* ---- CTA (29-sep): el sitio capta para el Dr.; "Agenda tu evaluacion" siempre a la vista y llamando ---- */
.cabecera .boton-cta { animation: latido 7s ease-in-out 2.5s infinite; }
@keyframes latido { 0%, 86%, 100% { box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 10px 30px -12px rgba(84,65,165,.9), 0 0 0 0 rgba(142,128,230,0); }
  92% { box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 10px 30px -12px rgba(84,65,165,.9), 0 0 0 10px rgba(142,128,230,.0), 0 0 0 5px rgba(142,128,230,.35); } }
@media (prefers-reduced-motion: reduce) { .cabecera .boton-cta { animation: none; } }
.cta-medio { background: var(--noche); color: var(--niebla); padding: clamp(36px, 5vw, 64px) var(--margen); border-top: 1px solid rgba(237,234,245,.06); }
.cta-medio-dentro { max-width: 1080px; margin: 0 auto; display: flex; gap: 28px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.cta-medio p { margin: 0; font-family: var(--serif); font-size: clamp(24px, 2.3vw, 32px); line-height: 1.2; max-width: 30ch; }
.cta-medio p span { display: block; font-family: var(--sans, 'Montserrat', sans-serif); font-size: 15px; line-height: 1.5; color: var(--niebla-2); margin-top: 8px; }
.barra-movil .boton { flex-direction: column; gap: 1px; line-height: 1.15; }
.barra-movil .boton small { font-size: 11px; font-weight: 400; opacity: .78; letter-spacing: .02em; }

/* rotulos sobre la toma continua (fuera de .sujeto, que en modo renderizado se oculta) */
.renderizado .notas[data-notas="cine"] { display: block; z-index: 4; }

/* capitulos del menu (29-sep: "Capítulo" en vez de "Acto") */
.menu-cap { display: block; text-transform: uppercase; letter-spacing: .14em; font-size: 11px; color: var(--lavanda); margin-bottom: 6px; }
/* toma continua con el sujeto centrado (29-sep): la columna de texto se angosta para no tapar el volumen */
@media (min-width: 900px) {
  .escenario.renderizado .relato { width: min(440px, 30vw); }
  .escenario.renderizado .momento-texto h2, .escenario.renderizado .momento-texto h1 { font-size: clamp(26px, 2.4vw, 38px) !important; }
}

/* cobertura (29-sep): la asesoría vive en portal B; aquí solo se anuncia como beneficio para pacientes */
.figura.beneficio { background: var(--claro-2); color: var(--tinta); padding: 28px 30px; border-radius: 18px; border-left: 4px solid var(--violeta); }
.figura.beneficio b { display: block; font-family: var(--serif); font-weight: 500; font-size: 28px; margin: 4px 0 8px; }
.figura.beneficio p { margin: 0 0 18px; }
.figura.beneficio .acto-nombre { color: var(--violeta); }

/* ================================================================ 30-sep: notas del Dr. a la web */
/* botones biselados (esquinas cortadas) en vez de píldoras redondeadas */
.boton { border-radius: 0; --bisel: 12px;
  clip-path: polygon(var(--bisel) 0, 100% 0, 100% calc(100% - var(--bisel)), calc(100% - var(--bisel)) 100%, 0 100%, 0 var(--bisel)); }
.boton-cta { box-shadow: none; background: linear-gradient(135deg, #6a58c2, var(--violeta) 60%); }
.boton-cta:hover { background: linear-gradient(135deg, #7a68d2, #6553b8 60%); }
.boton-temas { border: 0; background: rgba(237,234,245,.14); }
.boton-temas:hover { background: rgba(237,234,245,.22); }
.cabecera .boton-cta { animation: latido-bisel 7s ease-in-out 2.5s infinite; }
@keyframes latido-bisel { 0%, 84%, 100% { filter: brightness(1); } 90% { filter: brightness(1.28); } }
@media (prefers-reduced-motion: reduce) { .cabecera .boton-cta { animation: none; } }
.barra-movil .boton { --bisel: 10px; }

/* menú: la bajada de cada capítulo es un subtítulo, no un enlace */
.menu-acto h2 { margin-bottom: 2px; }
.menu-acto p { font-family: var(--serif); font-style: italic; font-size: 18px; line-height: 1.3; color: var(--lavanda); margin: 0 0 14px; }
.menu-acto ul { border-top: 1px solid rgba(237,234,245,.16); padding-top: 4px; }
.menu-acto a { position: relative; padding-left: 16px; }
.menu-acto a::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px; background: var(--violeta-luz);
  clip-path: polygon(0 0, 100% 50%, 0 100%); opacity: .7; }

/* home: palabras flotantes que aparecen y se disuelven sobre el render */
.teaser { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.teaser a { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); white-space: nowrap;
  font-family: var(--serif); font-weight: 500; font-size: var(--s); letter-spacing: .01em; color: #f1eefb; text-decoration: none;
  text-shadow: 0 0 22px rgba(142,128,230,.75), 0 0 2px rgba(15,14,23,.8); opacity: 0; filter: blur(10px); pointer-events: none; }
.teaser-on .teaser a { animation: flotar 11s ease-in-out infinite both; animation-delay: var(--d); pointer-events: auto; }
.teaser-denso .teaser a { animation-duration: 8s; }
.teaser a:hover { color: #fff; text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--violeta-luz); }
@keyframes flotar { 0% { opacity: 0; filter: blur(10px); transform: translate(-50%, -38%); }
  9% { opacity: .95; filter: blur(0); transform: translate(-50%, -50%); }
  22% { opacity: .9; filter: blur(0); }
  33% { opacity: 0; filter: blur(9px); transform: translate(-50%, -64%); }
  100% { opacity: 0; filter: blur(10px); transform: translate(-50%, -64%); } }
@media (prefers-reduced-motion: reduce) { .teaser-on .teaser a { animation: none; opacity: .75; filter: none; } }
@media (max-width: 640px) {
  .teaser a { left: calc((var(--x) - 40%) * 1.25 + 22%); top: calc(var(--y) * .78 + 6%); font-size: calc(var(--s) * .78); }
}

/* home: temas de cada capítulo como botones dentro del relato */
.chips { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; max-width: 520px; }
.chips a { display: inline-block; padding: 8px 13px; font-size: 13px; line-height: 1.2; color: var(--niebla); text-decoration: none;
  background: rgba(237,234,245,.12); --bisel: 7px;
  clip-path: polygon(var(--bisel) 0, 100% 0, 100% calc(100% - var(--bisel)), calc(100% - var(--bisel)) 100%, 0 100%, 0 var(--bisel)); }
.chips a:hover, .chips a:focus-visible { background: var(--violeta); color: #fff; }

/* home: índice completo de la guía */
.indice { background: var(--noche-2); color: var(--niebla); padding: clamp(56px, 8vw, 110px) var(--margen); border-top: 1px solid rgba(237,234,245,.06); }
.indice-dentro { max-width: 1240px; margin: 0 auto; }
.indice h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(30px, 3vw, 42px); margin: 0 0 8px; }
.indice-caps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px; margin-top: 32px; }
.indice h3 { font-family: var(--serif); font-weight: 500; font-size: 28px; margin: 2px 0 2px; }
.indice .bajada { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--lavanda); margin: 0 0 14px; }
.indice ul { list-style: none; margin: 0; padding: 4px 0 0; border-top: 1px solid rgba(237,234,245,.16); display: grid; }
.indice a { display: block; padding: 9px 0 9px 16px; position: relative; text-decoration: none; color: var(--niebla); border-bottom: 1px solid rgba(237,234,245,.07); }
.indice a::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px; background: var(--violeta-luz);
  clip-path: polygon(0 0, 100% 50%, 0 100%); opacity: .7; }
.indice a:hover { color: #fff; border-bottom-color: var(--violeta-luz); }
@media (max-width: 1000px) { .indice-caps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .indice-caps { grid-template-columns: 1fr; } }

/* home: declaración de intención */
.intencion { background: var(--claro); color: var(--tinta); padding: clamp(56px, 8vw, 110px) var(--margen); }
.intencion-dentro { max-width: 64ch; margin: 0 auto; }
.intencion .acto-nombre { color: var(--violeta); text-transform: uppercase; letter-spacing: .14em; font-size: 11.5px; }
.intencion p { font-family: var(--serif); font-size: clamp(21px, 2vw, 25px); line-height: 1.45; margin: 0 0 18px; }
.intencion p.firma-intencion { font-family: var(--sans); font-size: 14px; color: var(--tinta-2); margin-top: 6px; }
.enlace-suave { color: var(--violeta); font-size: 15px; text-decoration: underline; text-underline-offset: 4px; }
.cierre .enlace-suave { color: var(--lavanda); }

.intencion + .lectura { padding-top: 0; }

/* ================================================================ 30-sep (tarde): botones "vidrio y luz" (elegidos por el Dr.)
   rectángulo recto, sin bisel ni píldora; el principal violeta y el secundario de vidrio, ambos con una línea de luz abajo.
   El CTA de agenda tiene un pulso de luz cada ~7 s: una chispa recorre la línea y un brillo cruza el botón. */
.boton { position: relative; overflow: hidden; border-radius: 0; clip-path: none; border: 0; filter: none; }
.boton-cta { background: linear-gradient(180deg, #604db4, var(--violeta)); color: #fff;
  box-shadow: inset 0 -2px 0 #b7acff, 0 12px 22px -16px rgba(142,128,230,1); animation: none; }
.boton-cta:hover { background: linear-gradient(180deg, #6d5ac2, #5c49ae); box-shadow: inset 0 -2px 0 #d4ccff, 0 14px 26px -14px rgba(142,128,230,1); }
.boton-temas { background: rgba(237,234,245,.08); color: var(--niebla); border: 0; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 -2px 0 var(--violeta-luz), 0 10px 18px -14px rgba(142,128,230,1); }
.boton-temas:hover { background: rgba(237,234,245,.15); }
.boton-cta[href*="wa.me"] { animation: pulso-luz 7s ease-in-out 2.5s infinite; }
.boton-cta[href*="wa.me"]::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; pointer-events: none;
  background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));
  transform: translateX(-130%); animation: brillo-luz 7s ease-in-out 2.5s infinite; }
.boton-cta[href*="wa.me"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,0), #fff 50%, rgba(255,255,255,0)) no-repeat; background-size: 40% 100%;
  background-position: -90% 0; opacity: 0; animation: chispa-luz 7s ease-in-out 2.5s infinite; }
@keyframes pulso-luz {
  0%, 74%, 100% { box-shadow: inset 0 -2px 0 #b7acff, 0 12px 22px -16px rgba(142,128,230,1); }
  84% { box-shadow: inset 0 -2px 0 #fff, 0 14px 30px -10px rgba(176,164,255,1), 0 0 26px -6px rgba(142,128,230,.9); } }
@keyframes brillo-luz { 0%, 72% { transform: translateX(-130%); } 90%, 100% { transform: translateX(260%); } }
@keyframes chispa-luz { 0%, 70% { background-position: -90% 0; opacity: 0; } 73% { opacity: 1; } 90% { background-position: 190% 0; opacity: 1; } 94%, 100% { background-position: 190% 0; opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .boton-cta[href*="wa.me"], .boton-cta[href*="wa.me"]::before, .boton-cta[href*="wa.me"]::after { animation: none; }
}
/* temas de cada capítulo en el home: mismo lenguaje, más livianos */
.chips a { clip-path: none; border-radius: 0; background: rgba(237,234,245,.08); box-shadow: inset 0 -1px 0 rgba(183,172,255,.55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background-color .2s ease, box-shadow .2s ease; }
.chips a:hover, .chips a:focus-visible { background: rgba(84,65,165,.85); color: #fff; box-shadow: inset 0 -2px 0 #b7acff; }

/* menú abierto: fondo opaco y un solo "Agenda tu evaluación" (el del pie del menú); la cabecera y la barra móvil se ocultan */
.menu { background: #0c0b13; }
body.menu-abierto .cabecera, body.menu-abierto .barra-movil, body.menu-abierto .vista-previa { visibility: hidden; }

/* palabras flotantes en móvil: repartidas a ambos lados, sin salirse de la pantalla */
@media (max-width: 640px) {
  .teaser a { left: calc(var(--x) * .6 + 20%); }
}

/* un solo "Agenda tu evaluación" a la vista: si el contenido muestra uno, el de la cabecera y la barra móvil se retiran */
.cabecera .boton-cta, .barra-movil { transition: opacity .35s ease, transform .35s ease, visibility .35s; }
body.cta-en-vista .cabecera .boton-cta { opacity: 0; visibility: hidden; transform: translateY(-6px); }
body.cta-en-vista .barra-movil { opacity: 0; visibility: hidden; transform: translateY(100%); }

/* ---------------------------------------------------------------- 30-sep · idioma (ES/EN) y compartir
   Selector de idioma discreto en la cabecera y en el pie. Botón "Compartir" discreto pero visible (abajo a la izquierda;
   en móvil, ícono sobre la barra de agenda) y un bloque al final de cada página: WhatsApp, Instagram (por el menú del
   celular) y copiar enlace. Mismo lenguaje "vidrio y luz". */
.cabecera .idioma { pointer-events: auto; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-decoration: none; color: var(--niebla-2);
  padding: 9px 10px 7px; box-shadow: inset 0 -1px 0 rgba(183,172,255,.45); transition: color .2s ease, box-shadow .2s ease; }
.cabecera .idioma:hover, .cabecera .idioma:focus-visible { color: #fff; box-shadow: inset 0 -2px 0 #b7acff; }
.pie-idioma { margin: 14px 0 0; font-size: 13px; }
.pie-idioma a { color: var(--niebla-2); text-underline-offset: 4px; }
.compartir-flotante { position: fixed; z-index: 44; left: var(--margen); bottom: 22px; display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 14px; border: 0; cursor: pointer; font: 500 13px var(--sans); letter-spacing: .02em; color: var(--niebla);
  background: rgba(15,14,23,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: inset 0 -1px 0 rgba(183,172,255,.6);
  transition: background-color .2s ease, opacity .35s ease, visibility .35s, bottom .35s ease; }
.compartir-flotante svg { width: 18px; height: 18px; flex: none; }
.compartir-flotante:hover, .compartir-flotante[aria-expanded="true"] { background: rgba(84,65,165,.75); box-shadow: inset 0 -2px 0 #b7acff; }
.compartir-panel { position: fixed; z-index: 70; left: var(--margen); bottom: 72px; width: min(340px, calc(100vw - 32px)); padding: 18px 18px 16px;
  background: rgba(12,11,19,.97); border: 1px solid rgba(237,234,245,.1); box-shadow: inset 0 -2px 0 var(--violeta-luz), 0 24px 48px -24px rgba(0,0,0,.9); }
.compartir-panel[hidden] { display: none; }
.compartir-panel p { margin: 0 30px 14px 0; font-family: var(--serif); font-size: 21px; line-height: 1.2; color: var(--niebla); }
.compartir-panel small { display: block; margin-top: 12px; color: var(--niebla-2); font-size: 12px; line-height: 1.5; }
.compartir-panel .boton { min-height: 40px; padding: 0 16px; font-size: 14px; }
.compartir-opciones { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.compartir-cerrar { position: absolute; top: 6px; right: 8px; width: 32px; height: 32px; background: none; border: 0; color: var(--niebla-2);
  font-size: 22px; line-height: 1; cursor: pointer; }
.compartir-bloque { background: var(--noche-2); padding: clamp(36px, 5vw, 60px) var(--margen); box-shadow: inset 0 1px 0 rgba(237,234,245,.06); }
.compartir-dentro { max-width: 1100px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; justify-content: space-between; }
.compartir-bloque p { margin: 0; color: var(--niebla-2); max-width: 60ch; }
.compartir-bloque p.grande { font-family: var(--serif); font-size: clamp(24px, 2.4vw, 32px); color: var(--niebla); line-height: 1.2; margin-bottom: 6px; }
.compartir-bloque .enlace { background: none; border: 0; padding: 0; color: var(--niebla); font: inherit; font-size: 14px; cursor: pointer;
  text-decoration: underline; text-underline-offset: 5px; text-decoration-color: rgba(183,172,255,.6); }
.compartir-bloque .enlace:hover { text-decoration-color: #b7acff; }
body.menu-abierto .compartir-flotante, body.menu-abierto .compartir-panel { visibility: hidden; }
@media (max-width: 640px) {
  .cabecera .idioma { padding: 9px 6px 7px; }
  .compartir-flotante { left: auto; right: 16px; bottom: calc(84px + env(safe-area-inset-bottom)); padding: 0 11px; }
  .compartir-flotante span { display: none; }
  body.cta-en-vista .compartir-flotante { bottom: calc(16px + env(safe-area-inset-bottom)); }
  .compartir-panel { left: 16px; bottom: calc(136px + env(safe-area-inset-bottom)); }
}
@media print { .compartir-flotante, .compartir-panel, .compartir-bloque { display: none; } }

/* ---------------------------------------------------------------- 30-sep · caras tipo en el Capítulo 2 (pendiente de aprobación del Dr.)
   Estándar (izquierda) y patrón del tipo (derecha) enfrentados de perfil; en la portada el par se corre a la derecha para
   dejar libre la columna de texto. */
.portada .sujeto img.ct { top: 33%; height: 66%; left: 30%; width: 64%; }
.portada .reflejo img.ct { display: none; }
.leyenda-3d { position: absolute; z-index: 3; right: var(--margen); bottom: 18px; max-width: 420px; margin: 0; text-align: right;
  font-size: 12px; line-height: 1.5; color: var(--niebla-2); opacity: .8; }
.figura.ct { background: radial-gradient(ellipse at 50% 45%, #34305c 0%, var(--noche) 70%); }
.figura.ct img { aspect-ratio: 16/9; object-fit: contain; }
.temas a.con-mini { display: grid; grid-template-columns: 76px 1fr; grid-template-rows: auto 1fr; column-gap: 14px; align-items: start; }
.temas a.con-mini img { grid-row: 1 / span 2; width: 76px; height: 76px; object-fit: cover; border-radius: 10px; background: #1b1930; }
@media (max-width: 640px) {
  .portada .sujeto img.ct, .portada .reflejo img.ct { left: 0; width: 100%; object-fit: contain; }
  .leyenda-3d { left: 20px; right: 70px; text-align: left; bottom: 86px; }
  .portada .sujeto img.ct { top: 20%; height: 80%; }
}
.figura.ct.video { max-width: 440px; }
.figura.ct video { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--noche); }
@media (prefers-reduced-motion: reduce) { .figura.ct video { animation: none; } }

/* ---------------------------------------------------------------- r14 · compartir junto al tema (nota del Dr.: el flotante parecía compartir toda la web) */
.compartir-flotante { display: none !important; }
.compartir-tema { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; margin: 2px 0 16px; padding: 0 14px 0 11px;
  border-radius: 999px; border: 1px solid rgba(183,172,255,.38); background: rgba(22,19,40,.45); color: var(--niebla);
  font: 500 13.5px/1 var(--sans, inherit); letter-spacing: .01em; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background .2s, border-color .2s; }
.compartir-tema svg { width: 16px; height: 16px; flex: none; }
.compartir-tema:hover, .compartir-tema[aria-expanded="true"] { background: rgba(84,65,165,.6); border-color: #b7acff; }
.compartir-tema:focus-visible { outline: 2px solid #b7acff; outline-offset: 2px; }
.compartir-panel .comp-etiqueta, .compartir-bloque .comp-etiqueta { display: block; margin: 0 0 4px; font-family: var(--sans, inherit); font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--niebla-2); }
body.menu-abierto .compartir-tema { visibility: hidden; }
@media print { .compartir-tema { display: none; } }
.compartir-bloque .comp-etiqueta { margin-bottom: 10px; color: #b7acff; }
/* r14 · en las escenas con scroll, solo el momento activo recibe clics (los otros, invisibles, tapaban el botón de compartir y
   los enlaces del primer momento) y los espaciadores del scroll no interceptan clics */
.momento-texto:not(.activo) { pointer-events: none; }
.pasos { pointer-events: none; }

/* ---------------------------------------------------------------- r15 · la línea luminosa recorre las siluetas (caras tipo)
   (nota del Dr.: la línea que marca el recorrido sigue los perfiles; el trazo sale del contorno real del render) */
svg.trazo-ct { position: absolute; pointer-events: none; overflow: visible; }
svg.trazo-ct path { fill: none; stroke: #d6cfff; stroke-width: 2.2; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 3px rgba(183,172,255,.95)) drop-shadow(0 0 10px rgba(110,90,255,.55)); }
svg.trazo-ct .punta { fill: #fff; filter: drop-shadow(0 0 6px #b7acff) drop-shadow(0 0 14px rgba(120,100,255,.8)); }
.portada .sujeto svg.trazo-ct { top: 33%; height: 66%; left: 30%; width: 64%; }
.ct-marco { position: relative; }
.ct-marco img { display: block; width: 100%; }
.ct-marco svg.trazo-ct { inset: 0; width: 100%; height: 100%; }
@media (max-width: 640px) {
  .portada .sujeto svg.trazo-ct { left: 0; width: 100%; top: 20%; height: 80%; }
}

/* r17 · home: palabras flotantes al abrir (sin scroll) y al final; se disuelven al empezar el scroll */
[data-teaser] .teaser { opacity: 0; transition: opacity 1s ease; }
[data-teaser].teaser-on .teaser { opacity: 1; }
[data-teaser] .teaser a { animation: flotar 11s ease-in-out infinite both; animation-delay: var(--d); pointer-events: none; }
[data-teaser].teaser-on .teaser a { pointer-events: auto; }
[data-teaser].en-intro .teaser a { animation-duration: 9s; }
@media (prefers-reduced-motion: reduce) { [data-teaser] .teaser a { animation: none; opacity: .75; filter: none; } }

/* r17 · temas de cada momento a la derecha (escritorio): se pueden tocar directo y despejan el texto */
.temas-der { position: absolute; z-index: 5; right: calc(var(--margen) + 44px); top: 50%; transform: translateY(-50%); width: min(300px, 26vw); pointer-events: none; }
.temas-der .chips { position: absolute; right: 0; top: 50%; margin: 0; max-width: none; display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  opacity: 0; transform: translate(14px, -50%); transition: opacity .5s ease, transform .5s ease; visibility: hidden; }
.temas-der .chips.activa { opacity: 1; transform: translate(0, -50%); visibility: visible; pointer-events: auto; }
.temas-der .chips a { font-size: 14px; padding: 9px 15px; background: rgba(15,14,23,.66); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }  /* r18: legibles sobre las cabezas iluminadas */
.temas-der .chips a:hover, .temas-der .chips a:focus-visible { background: rgba(84,65,165,.9); }
@media (min-width: 641px) { .momento-texto .chips { display: none; } }
@media (max-width: 640px) {
  .temas-der { display: none; }
  .momento-texto .chips { gap: 6px; margin-top: 12px; }
  .momento-texto .chips a { font-size: 12.5px; padding: 7px 11px; }
}

/* r17 · declaración de intención: más presencia (nota del Dr.), justo después de la toma inicial */
.intencion { padding: clamp(64px, 9vw, 120px) var(--margen); }
.intencion-dentro { max-width: 60ch; border-left: 3px solid var(--violeta); padding-left: clamp(18px, 3vw, 36px); }
.intencion .acto-nombre { font-size: 12.5px; font-weight: 500; }
.intencion p { font-weight: 500; color: var(--tinta); font-size: clamp(21px, 2vw, 26px); line-height: 1.42; }
.intencion p:first-of-type { font-weight: 600; font-size: clamp(23px, 2.35vw, 31px); line-height: 1.3; }
.intencion p.firma-intencion { font-weight: 500; font-size: 15px; color: var(--violeta); letter-spacing: .02em; }
.intencion .enlace-suave { font-weight: 500; }

/* r18 · figuras de la sonrisa: en celular, los paneles antes / después van uno sobre otro */
.figura.ct picture { display: contents; }
@media (max-width: 700px) { .figura.ct.con-alto { max-width: 420px; } .figura.ct.con-alto img { aspect-ratio: auto; } }

/* r22 · tema de la cara que la toma del home tiene al centro */
.escenario .chips a.resaltado, .escenario .temas-der .chips a.resaltado { background: rgba(84, 65, 165, .7); color: #fff;
  box-shadow: inset 0 -2px 0 #b7acff, 0 0 24px rgba(123, 110, 189, .6); }
.chips a { transition: background .35s ease, box-shadow .35s ease, border-color .35s ease, color .35s ease; }
@media (prefers-reduced-motion: reduce) { .chips a { transition: none; } }

/* r22 · tramo de la toma del home en negativo (fondo claro): cabecera, texto y riel pasan a tinta oscura */
body.cine-claro .firma b, body.cine-claro .cabecera .idioma { color: #1c1a2e; }
body.cine-claro .firma span { color: #4a4566; }
body.cine-claro .boton-temas { color: #1c1a2e; background: rgba(248,248,250,.55); border-color: rgba(28,26,46,.25); }
body.cine-claro .relato::before { background: radial-gradient(110% 95% at 0% 100%, rgba(248,248,250,.85) 0%, rgba(248,248,250,.55) 34%, rgba(248,248,250,0) 72%); }
body.cine-claro .momento-texto { text-shadow: 0 2px 18px rgba(248,248,250,.8); }
body.cine-claro .momento-texto h1, body.cine-claro .momento-texto h2 { color: #1c1a2e; }
body.cine-claro .momento-texto p { color: #2f2b45; }
body.cine-claro .momento-texto .acto-nombre { color: #5441A5; }
body.cine-claro .riel button { border-color: rgba(28,26,46,.45); }
.firma b, .firma span, .cabecera .idioma, .boton-temas, .momento-texto h1, .momento-texto h2, .momento-texto p, .riel button { transition: color .3s ease, background-color .3s ease, border-color .3s ease; }
.relato::before { transition: background .3s ease; }
body.cine-claro .momento-texto .chips a { color: #1c1a2e; background: rgba(28,26,46,.07); box-shadow: inset 0 -1px 0 rgba(84,65,165,.6); }

/* r22e · Evolución: láminas históricas (dominio público) e ilustración 3D fija, con su crédito */
.lectura .figura.archivo { max-width: 620px; background: #f3ede1; color: #3a3346; border: 1px solid rgba(58,51,70,.12); }
.figura.archivo img { display: block; width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; mix-blend-mode: multiply; }
.figura.archivo figcaption { color: #4a4356; }
.lectura .figura.render { max-width: 440px; background: radial-gradient(ellipse at 50% 45%, #34305c 0%, var(--noche) 70%); }
.figura.render img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.figura figcaption .credito { display: block; margin-top: 6px; font-size: 11.5px; opacity: .75; }

/* ---------------------------------------------------------------- r23 (4-oct): color de acento
   Turquesa del sistema (#34C9C0, el mismo "después" de la vía aérea en los renders): solo en lo que se toca o se destaca
   (CTA, marcadores, rótulo del capítulo, rayita bajo los títulos). El violeta sigue para la marca, la línea luminosa y el hueso. */
:root { --acento: #34c9c0; --acento-texto: #0f1a22; --acento-suave: rgba(52, 201, 192, .55); }
.boton-cta { background: var(--acento) !important; color: var(--acento-texto) !important; font-weight: 700;
  box-shadow: 0 10px 28px -12px rgba(52, 201, 192, .85) !important; }
.boton-cta:hover { filter: brightness(1.06); }
.riel button[aria-current="step"] { background: var(--acento); border-color: var(--acento); box-shadow: 0 0 10px var(--acento); }
.menu-acto a::before, .indice a::before { background: var(--acento); }
.menu-acto a:hover, .menu-acto a[aria-current="page"], .indice a:hover { border-bottom-color: var(--acento); }
.faq summary::after { border-color: var(--acento); }
.chips a:hover, .chips a:focus-visible { background: var(--acento); color: var(--acento-texto); }
.figura.beneficio, .intencion-dentro { border-left-color: var(--acento); }
:focus-visible { outline-color: var(--acento); }
.temas a { border-color: var(--acento-suave); }
.compartir-tema { border-color: var(--acento-suave); }
.compartir-tema svg { color: var(--acento); }
.momento-texto .acto-nombre { color: var(--acento); }
.momento-texto h2::before, .momento-texto h1::before { background: var(--acento); box-shadow: 0 0 12px var(--acento); }
.lectura h2::after { content: ""; display: block; width: 44px; height: 3px; border-radius: 2px; background: var(--acento); margin-top: 12px; }
.cierre p.grande::after { content: ""; display: block; width: 56px; height: 3px; border-radius: 2px; background: var(--acento); margin-top: 18px; }
.bajar { color: var(--acento); }
body.cine-claro .momento-texto .acto-nombre { color: #1f8f88; }

/* r23 · portadas propias de cada tema (un solo sujeto): en el celular van arriba, entre el encabezado y el título, sin pasar por detrás del texto */
@media (max-width: 640px) {
  .portada .sujeto img.ct.pt { top: 13%; height: 29%; left: -40%; width: 180%; max-width: none; object-position: center top; }
}

/* r23 · fotos del Dr. en la lectura (Sobre mí) */
.lectura .figura.foto { max-width: 480px; background: var(--noche); }
.figura.foto img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }

/* r24 (5-oct) · Sobre mí: portada en díptico (consulta y pabellón), opción B elegida por el Dr. */
.sm{position:relative;min-height:100svh;background:radial-gradient(120% 90% at 20% 30%,#24213f 0%,#141322 55%,#0d0c15 100%);color:#ecebf5;overflow:hidden;display:flex;align-items:center}
.sm-texto{position:relative;z-index:3;max-width:560px;padding:120px 0 72px var(--margen,64px)}
.sm-ceja{display:inline-block;font:500 .78rem Montserrat,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--acento);margin-bottom:18px}
.sm h1{font:500 clamp(2.6rem,5.2vw,4.6rem)/1.02 "Cormorant Garamond",serif;margin:0 0 14px;letter-spacing:.01em}
.sm-sub{font:500 1rem Montserrat,sans-serif;color:#b9b6d3;margin:0 0 26px;letter-spacing:.02em}
.sm-areas{list-style:none;padding:0;margin:8px 0 38px;display:flex;flex-wrap:wrap;gap:10px}
.sm-areas li{font:500 .86rem Montserrat,sans-serif;padding:8px 14px;border:1px solid rgba(255,255,255,.18);border-radius:999px;color:#ecebf5;background:rgba(255,255,255,.04)}
.sm-acciones{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.sm-acciones .boton-cta{padding:14px 22px;text-decoration:none;border-radius:2px}
.sm .linea-luz{position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,#7d6fe0 30%,var(--acento) 70%,transparent);box-shadow:0 0 18px #7d6fe0;z-index:4}
.sm-b .fotos{position:absolute;top:110px;bottom:110px;right:var(--margen,64px);width:min(46%,640px);display:grid;grid-template-columns:1fr 1fr;gap:14px;z-index:1}
.sm-b figure{margin:0;position:relative;overflow:hidden;border-radius:3px;box-shadow:0 30px 60px rgba(0,0,0,.45)}
.sm-b figure:nth-child(2){margin-top:56px;margin-bottom:-56px}
.sm-b figure img{width:100%;height:100%;object-fit:cover;display:block}
.sm-b figure:nth-child(1) img{object-position:50% 15%}
.sm-b figure:nth-child(2) img{object-position:74% 22%}   /* r28k: la cara completa (nota del Dr.: «mi cara sale cortada») */
.sm-b figcaption{position:absolute;left:12px;bottom:10px;font:500 .74rem Montserrat,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.6)}
@media (max-width:760px){.sm{display:block;min-height:auto}.sm-texto{padding:28px 20px 44px;max-width:none}.sm h1{font-size:2.5rem}
 .sm-b .fotos{position:relative;top:auto;bottom:auto;right:auto;width:auto;height:58svh;margin:76px 20px 0;gap:10px}.sm-b figure:nth-child(2){margin-top:32px;margin-bottom:-32px}}
/* r24 · Sobre mí: galería de pabellón (sesión 24-oct-2024) */
.figura.galeria{max-width:min(980px,100%)}
.galeria-fotos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.galeria-fotos img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:3px;display:block}
.galeria-fotos img:first-child{grid-column:1 / -1;aspect-ratio:16/8;object-position:50% 30%}
@media (max-width:700px){.galeria-fotos{gap:6px}}

/* ------------------------------------------------------------------ r25 (15-oct) · bandas de foto en Sobre mí (nota del Dr.: fotos grandes de fondo, texto a un lado sobre un difuminado) */
.banda{position:relative;overflow:hidden;display:flex;min-height:min(100svh,940px)}
.banda-foto{position:absolute;inset:0}
.banda-foto picture,.banda-foto img{display:block;width:100%;height:100%}
.banda-foto img{object-fit:cover}
.banda-foto::after{content:"";position:absolute;inset:0;pointer-events:none}
.banda-texto{position:relative;z-index:2}
.banda h2{font-family:var(--serif);font-weight:600;font-size:clamp(32px,3.3vw,48px);line-height:1.08;margin:0 0 18px}
.banda h2::after{content:"";display:block;width:44px;height:3px;border-radius:2px;background:var(--acento);margin-top:14px}
.banda p{font-size:clamp(16px,1.2vw,18px);line-height:1.72;margin:0 0 14px}
.banda-oscuro{background:#0d0c15;color:#ecebf5;align-items:center}
.banda-oscuro.banda-izq .banda-foto{left:34%}
.banda-oscuro.banda-izq .banda-foto img{object-position:50% 36%}
.banda-oscuro.banda-izq .banda-foto::after{background:linear-gradient(90deg,#0d0c15 0%,rgba(13,12,21,.78) 13%,rgba(13,12,21,.3) 30%,rgba(13,12,21,0) 46%),linear-gradient(0deg,rgba(13,12,21,.6) 0%,rgba(13,12,21,0) 28%),linear-gradient(180deg,rgba(13,12,21,.5) 0%,rgba(13,12,21,0) 18%)}
.banda-oscuro .banda-texto{max-width:540px;margin-left:var(--margen);padding:110px 0 90px}
.banda-oscuro p{color:#d9d6ea}
.banda-claro{background:var(--claro);color:var(--tinta);align-items:flex-end;min-height:min(100svh,64vw)}
.banda-claro .banda-foto img{object-position:50% 22%}
.banda-claro .banda-foto::after{background:linear-gradient(0deg,var(--claro) 0%,rgba(244,242,248,.94) 17%,rgba(244,242,248,.6) 30%,rgba(244,242,248,0) 44%)}
.banda-claro .banda-texto{display:grid;grid-template-columns:minmax(220px,1fr) minmax(0,1.7fr);align-items:start;gap:0 56px;width:100%;max-width:1180px;margin:0 auto;padding:0 var(--margen) 56px}
.banda-claro .banda-texto h2{grid-column:1;grid-row:1 / span 4}
.banda-claro .banda-texto p{grid-column:2}
.lectura.tras-banda{padding-top:clamp(32px,4vw,60px)}
@media (max-width:760px){
  .banda{display:block;min-height:0}
  .banda-foto{position:relative;inset:auto}
  .banda-oscuro.banda-izq .banda-foto{left:auto;aspect-ratio:4/5}
  .banda-oscuro.banda-izq .banda-foto img{object-position:50% 40%}
  .banda-oscuro.banda-izq .banda-foto::after{background:linear-gradient(0deg,#0d0c15 0%,rgba(13,12,21,.65) 14%,rgba(13,12,21,0) 36%)}
  .banda-oscuro .banda-texto{margin:-64px 0 0;padding:0 20px 52px;max-width:none}
  .banda-claro .banda-foto{aspect-ratio:3/2}
  .banda-claro .banda-foto::after{background:linear-gradient(0deg,var(--claro) 0%,rgba(244,242,248,0) 34%)}
  .banda-claro .banda-texto{display:block;padding:6px 20px 36px}
  .banda h2{font-size:31px}
  .banda p{font-size:17px}
}
/* ------------------------------------------------------------------ r25 · invitación a deslizar (nota del Dr.: quien no conoce este tipo de páginas no sabe qué hacer) */
.desliza{position:fixed;z-index:42;left:50%;bottom:28px;display:flex;flex-direction:column;align-items:center;gap:10px;margin:0;padding:0;border:0;background:none;color:#fff;
  font:500 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;cursor:pointer;opacity:0;transform:translate(-50%,10px);transition:opacity .7s ease,transform .7s ease;text-shadow:0 1px 10px rgba(0,0,0,.7)}
.desliza[hidden]{display:none}
.desliza.visible{opacity:1;transform:translate(-50%,0)}
.desliza i{position:relative;display:block;width:26px;height:42px;border:1.5px solid rgba(255,255,255,.8);border-radius:13px;box-shadow:0 0 14px rgba(0,0,0,.35)}
.desliza i::before{content:"";position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--acento);box-shadow:0 0 8px var(--acento);animation:desliza-rueda 1.9s ease-in-out infinite}
@keyframes desliza-rueda{0%{transform:translateY(0);opacity:0}18%{opacity:1}72%{transform:translateY(13px);opacity:0}100%{transform:translateY(13px);opacity:0}}
.desliza:hover i,.desliza:focus-visible i{border-color:var(--acento)}
body.con-desliza .bajar{display:none}
body.menu-abierto .desliza{visibility:hidden}
.desliza span{white-space:nowrap}
.desliza .corto{display:none}
@media (min-width:641px){body.con-previa .vista-previa{left:var(--margen);transform:none}}
@media (pointer:coarse){
  .desliza i{width:13px;height:13px;border:0;border-right:2px solid var(--acento);border-bottom:2px solid var(--acento);border-radius:0;box-shadow:none;transform:rotate(45deg);animation:desliza-flecha 1.6s ease-in-out infinite}
  .desliza i::before{display:none}
}
@media (max-width:640px){
  /* en el celular va dentro de la barra de abajo, a la derecha del botón: no tapa el texto de la primera pantalla */
  .desliza,.desliza.visible{left:auto;right:16px;bottom:calc(10px + env(safe-area-inset-bottom));transform:none;width:60px;height:46px;gap:5px;justify-content:center;
    background:#1b1a2b;border:1px solid rgba(255,255,255,.16);border-radius:2px;letter-spacing:.08em;font-size:9px;text-shadow:none;z-index:46}
  .desliza:not(.visible){transform:translateY(8px)}
  .desliza .largo{display:none}.desliza .corto{display:inline}
  .desliza i{width:11px;height:11px;margin-top:-4px;border:0;border-right:2px solid var(--acento);border-bottom:2px solid var(--acento);border-radius:0;box-shadow:none;transform:rotate(45deg);animation:desliza-flecha 1.6s ease-in-out infinite}
  .desliza i::before{display:none}
  body.con-previa .desliza{bottom:calc(10px + env(safe-area-inset-bottom))}
  .barra-movil{transition:padding-right .5s ease,opacity .35s ease,transform .35s ease,visibility .35s}
  body.desliza-on .barra-movil{padding-right:86px}
}
@keyframes desliza-flecha{0%,100%{transform:translateY(0) rotate(45deg)}50%{transform:translateY(5px) rotate(45deg)}}
@media (prefers-reduced-motion:reduce){.desliza,.desliza i,.desliza i::before{animation:none!important;transition:none}.desliza i::before{opacity:1}}

/* r27: aviso de cookies (solo con IDs de medición) y enlaces legales del pie */
.consent{position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:60;max-width:560px;margin:0 auto;
  background:#1b1a26;color:#ece9f3;border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:16px 18px;box-shadow:0 12px 40px rgba(0,0,0,.45);font-size:14px;line-height:1.5}
.consent[hidden]{display:none}
.consent p{margin:0 0 12px}
.consent a{color:#8fe3dc}
.consent-botones{display:flex;gap:10px}
.consent-b{flex:1;justify-content:center;background:transparent;color:#ece9f3;border:1px solid rgba(255,255,255,.35);padding:10px 12px;border-radius:999px;font:inherit;cursor:pointer}
.consent-b:hover,.consent-b:focus-visible{border-color:#34C9C0;color:#fff}
.pie-legal{font-size:13px;opacity:.85}
.enlace-boton{background:none;border:0;padding:0;color:inherit;font:inherit;text-decoration:underline;cursor:pointer}
@media (max-width:760px){.consent{bottom:calc(86px + env(safe-area-inset-bottom))}}
/* r28i (19-oct): columna invitada (nutrición) */
.columna{background:#f6f1e8;color:var(--tinta);padding:clamp(56px,8vw,112px) var(--margen);border-top:1px solid rgba(38,36,56,.08)}
.columna-dentro{max-width:1080px;margin:0 auto}
.columna-cab{max-width:var(--lectura);margin:0 0 clamp(28px,4vw,48px) calc(280px + clamp(28px,4vw,64px))}
.columna-etiqueta{display:inline-block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#8a6a3f;border:1px solid rgba(138,106,63,.35);border-radius:999px;padding:4px 12px;margin-bottom:16px}
.columna h2{font-family:var(--serif);font-weight:600;font-size:clamp(30px,3.2vw,44px);line-height:1.1;margin:0 0 10px;color:var(--tinta)}
.columna h2::after{content:"";display:block;width:44px;height:3px;border-radius:2px;background:var(--acento);margin-top:14px}
.columna-por{margin:0;font-style:italic;color:var(--tinta-2)}
.columna-grid{display:grid;grid-template-columns:280px minmax(0,var(--lectura));gap:clamp(28px,4vw,64px);align-items:start}
.columna-autora{position:sticky;top:96px}
.columna-autora img{display:block;width:100%;height:auto;border-radius:18px;box-shadow:0 18px 40px -24px rgba(38,36,56,.45)}
.columna-ficha{display:flex;flex-direction:column;gap:4px;margin-top:16px;font-size:14.5px;line-height:1.45;color:var(--tinta-2)}
.columna-ficha b{font-family:var(--serif);font-size:22px;font-weight:600;color:var(--tinta);margin-bottom:2px}
.columna-ig{color:var(--tinta);margin-top:6px}
.columna-web{margin-top:14px;align-self:flex-start;background:var(--tinta);color:#fff;font-size:14px;min-height:42px;padding:0 18px}
.columna-web:hover{background:#3a3752}
.columna-texto h3{font-family:var(--serif);font-weight:600;font-size:clamp(23px,2.1vw,28px);line-height:1.18;margin:40px 0 12px;color:var(--tinta)}
.columna-texto p{margin:0 0 16px;font-size:17px}
.columna-texto ul{margin:4px 0 18px;padding-left:22px}
.columna-texto li{margin:0 0 10px;font-size:17px}
.columna-texto li::marker{color:var(--acento)}
.columna-nota{margin-top:28px!important;padding-top:16px;border-top:1px solid rgba(38,36,56,.14);font-size:14.5px!important;font-style:italic;color:var(--tinta-2)}
@media (max-width:900px){
  .columna-cab{margin-left:0}
  .columna-grid{grid-template-columns:1fr}
  .columna-autora{position:static;display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:center}
  .columna-autora img{border-radius:14px}
  .columna-ficha{margin-top:0;font-size:13.5px}
  .columna-ficha b{font-size:20px}
  .columna-web{font-size:13px;min-height:38px;padding:0 14px}
}
/* r28j (20-oct): momento cálido (amanecer dorado) detrás de una escena, p. ej. el final de Cara asimétrica */
.lienzo .sol{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 1.6s ease;
  background:
    radial-gradient(42% 46% at 50% 44%, rgba(240,196,140,.50) 0%, rgba(214,158,104,.34) 32%, rgba(150,104,76,.18) 58%, rgba(0,0,0,0) 80%),
    radial-gradient(120% 60% at 50% 62%, rgba(176,124,82,.55) 0%, rgba(96,70,62,.45) 45%, rgba(0,0,0,0) 85%),
    linear-gradient(180deg, #27202c 0%, #3a2c2c 46%, #4a3628 58%, #241c22 100%)}
.escenario.calido .lienzo .sol{opacity:1}
.escenario.calido .lienzo .horizonte{opacity:.9}
@media (prefers-reduced-motion:reduce){.lienzo .sol{transition:none}}
/* r28k (20-oct, nota del Dr.): cada escena recorre del frío-oscuro al cálido más luminoso, como el inicio y Apnea.
   --calidez (0..1) la pone site.js según el avance del scroll en la escena; el sol cálido entra de a poco. */
.lienzo .sol{opacity:var(--calidez,0);transition:opacity .25s linear}
.escenario.calido .lienzo .sol{opacity:1;transition:opacity 1.6s ease}
.escenario .lienzo .horizonte{opacity:calc(.55 + .45*var(--calidez,0))}
.renderizado .lienzo .sol{z-index:-1}
.lienzo .sol-cine{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;opacity:calc(var(--calidez,0)*.9);transition:opacity .25s linear;
  background:
    radial-gradient(48% 52% at 58% 46%, rgba(226,160,96,.34) 0%, rgba(170,108,64,.20) 40%, rgba(0,0,0,0) 76%),
    radial-gradient(130% 70% at 50% 100%, rgba(150,96,58,.42) 0%, rgba(90,58,40,.18) 50%, rgba(0,0,0,0) 85%)}
/* el final de cada página es el punto más cálido y luminoso del recorrido */
.cierre{background:
    radial-gradient(70% 120% at 85% 50%, rgba(232,185,138,.30) 0%, rgba(232,185,138,0) 60%),
    linear-gradient(135deg, #2c2433 0%, #3d2f33 55%, #4a3a33 100%)}
@media (prefers-reduced-motion:reduce){.lienzo .sol,.lienzo .sol-cine{transition:none}}
/* r28k: figura ancha (16:9) en la sección de caras de Apnea: las vías aéreas */
.figura.ct.video.ancha{max-width:1100px}
.figura.ct.video.ancha video{aspect-ratio:16/9}