/**
 * Ximena Ibáñez · Psicóloga clínica
 * assets/css/base.css · se carga DESPUÉS de tailwind.css
 *
 * Reglas de la casa (CLAUDE.md):
 *  - Solo se animan transform, opacity y clip-path.
 *  - Entradas 600–900 ms con cubic-bezier(.16,1,.3,1); respuestas de
 *    interfaz 180–260 ms con cubic-bezier(.32,.72,0,1).
 *  - Reducir no es eliminar: con prefers-reduced-motion se apaga el
 *    movimiento autónomo, se mantienen los fundidos y lo que sigue al cursor.
 */

/* ============================================================
   1. TOKENS
   ============================================================ */
:root {
  --noche:    10 31 56;
  --hondo:     6 21 40;
  --tinta:    59 66 84;
  --suave:   106 110 124;
  --crema:   247 243 234;
  --arena:   239 231 216;
  --papel:   255 253 248;
  --oro:     200 162 90;
  --oroclaro: 232 207 148;
  --orohondo: 138 102 48;
  --malva:   152 119 118;
  --rubor:   241 225 214;
  --filete:  221 208 184;

  --oro-metal: linear-gradient(135deg, #f3e2b1 0%, #d8b46a 38%, #b98f45 70%, #e9cf8f 100%);

  --sombra-suave: 0 1px 2px rgba(10,31,56,.05), 0 10px 30px -14px rgba(10,31,56,.18);
  --sombra-alta:  0 2px 6px rgba(10,31,56,.06), 0 28px 60px -26px rgba(10,31,56,.32);

  --e-salida: cubic-bezier(.16, 1, .3, 1);
  --e-suave:  cubic-bezier(.32, .72, 0, 1);

  color-scheme: light;
}

html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  background: rgb(var(--crema));
  color: rgb(var(--tinta));
  font-family: Lato, system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: rgb(var(--oroclaro) / .55); color: rgb(var(--noche)); }

:focus-visible { outline: 2px solid rgb(var(--orohondo)); outline-offset: 3px; border-radius: 6px; }

.solo-lectores {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.saltar {
  position: fixed; left: 1rem; top: -4rem; z-index: 100; padding: .6rem 1rem; border-radius: 999px;
  background: rgb(var(--noche)); color: #fff; font-weight: 700; transition: transform 200ms var(--e-suave);
}
.saltar:focus { transform: translateY(5rem); }

/* Red de seguridad global. Las excepciones deliberadas llevan !important
   y un comentario que dice por qué. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* ============================================================
   2. TIPOGRAFÍA
   ============================================================ */
.titulo {
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600;
  color: rgb(var(--noche)); line-height: 1.08; letter-spacing: -.01em;
}
.titulo em, .oro-cursiva { font-style: italic; font-weight: 500; color: rgb(var(--orohondo)); }
.seccion-noche .titulo { color: rgb(var(--crema)); }
.seccion-noche .titulo em, .seccion-noche .oro-cursiva { color: rgb(var(--oroclaro)); }

.antetitulo {
  font-family: Marcellus, Georgia, serif; text-transform: uppercase;
  letter-spacing: .28em; font-size: .78rem; color: rgb(var(--orohondo));
}
.seccion-noche .antetitulo { color: rgb(var(--oroclaro)); }

.marca-texto { font-family: Marcellus, Georgia, serif; letter-spacing: .22em; text-transform: uppercase; }

.lead { font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); line-height: 1.7; }
.prosa p + p { margin-top: 1rem; }

/* Filete dorado corto, como en los volantes */
.filete-oro { display: block; width: 64px; height: 1.5px; background: var(--oro-metal); border-radius: 2px; }
.filete-oro.centro { margin-inline: auto; }

/* ============================================================
   3. SECCIONES
   ============================================================ */
.seccion { padding-block: clamp(4.5rem, 3rem + 6vw, 8rem); position: relative; }
.contenedor { width: min(1200px, 100% - 2.5rem); margin-inline: auto; }
@media (min-width: 768px) { .contenedor { width: min(1200px, 100% - 4rem); } }

.seccion-noche {
  background: radial-gradient(120% 90% at 85% 0%, rgb(26 52 86) 0%, rgb(var(--noche)) 45%, rgb(var(--hondo)) 100%);
  color: rgb(214 222 232);
}
.seccion-arena { background: rgb(var(--arena)); }
.seccion-papel { background: rgb(var(--papel)); }

/* Arcos dorados de fondo, como el círculo del logo */
.arco { position: absolute; border-radius: 50%; border: 1px solid rgb(var(--oro) / .35); pointer-events: none; }

/* ============================================================
   4. CABECERA — isla flotante
   ============================================================ */
.cabecera { position: fixed; inset: 0 0 auto 0; z-index: 50; padding-top: .9rem; pointer-events: none; }
.cabecera__isla {
  --isla-pad: 1rem;
  pointer-events: auto;
  width: min(1240px, 100% - 1.5rem); margin-inline: auto;
  padding-inline: var(--isla-pad);
  border-radius: 999px; border: 1px solid transparent;
  transition: background-color 300ms var(--e-suave), box-shadow 300ms var(--e-suave), border-color 300ms var(--e-suave);
}
@media (min-width: 1024px) { .cabecera__isla { --isla-pad: 1.6rem; } }
.cabecera[data-fijo="true"] .cabecera__isla {
  background: rgb(var(--papel) / .86);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  border-color: rgb(var(--filete) / .9); box-shadow: var(--sombra-suave);
}
.cabecera__fila { height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.logo { display: flex; align-items: center; gap: .7rem; color: rgb(var(--noche)); }
.logo img { width: 38px; height: auto; }
.logo__nombre { white-space: nowrap; font-family: Marcellus, Georgia, serif; text-transform: uppercase; letter-spacing: .2em; font-size: .98rem; line-height: 1; }
.logo__oficio { white-space: nowrap; font-family: Marcellus, Georgia, serif; text-transform: uppercase; letter-spacing: .3em; font-size: .58rem; color: rgb(var(--orohondo)); margin-top: .3rem; }

.nav-enlace { position: relative; font-size: .93rem; color: rgb(var(--tinta)); padding: .35rem 0; transition: color 200ms var(--e-suave); }
.nav-enlace::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--oro-metal);
  transform: scaleX(0); transform-origin: left; transition: transform 260ms var(--e-suave);
}
.nav-enlace:hover, .nav-enlace[aria-current="page"] { color: rgb(var(--noche)); }
.nav-enlace:hover::after, .nav-enlace[aria-current="page"]::after { transform: scaleX(1); }

/* Menú del celular */
.menu-movil {
  position: fixed; inset: 0; z-index: 60; background: rgb(var(--hondo)); color: rgb(var(--crema));
  display: flex; flex-direction: column; padding: 6rem 2rem 2rem;
  opacity: 0; pointer-events: none; transition: opacity 260ms var(--e-suave);
}
.menu-movil[data-abierto="true"] { opacity: 1; pointer-events: auto; }
.menu-movil a.grande { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 2rem; padding: .4rem 0; display: block; }
.menu-movil a.grande + a.grande { border-top: 1px solid rgb(255 255 255 / .08); }

/* ============================================================
   5. BOTONES — icono anidado en su propio círculo
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: .75rem; border-radius: 999px;
  font-weight: 700; font-size: .95rem; letter-spacing: .01em; line-height: 1;
  padding: .5rem .5rem .5rem 1.4rem; min-height: 50px;
  transition: transform 220ms var(--e-suave), box-shadow 220ms var(--e-suave), background-color 220ms var(--e-suave);
}
.btn:active { transform: scale(.97); }
.btn__icono {
  width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; flex: none;
  transition: transform 260ms var(--e-suave);
}
.btn:hover .btn__icono { transform: translateX(3px); }
.btn__icono svg { width: 18px; height: 18px; }

.btn-noche { background: rgb(var(--noche)); color: rgb(var(--crema)); box-shadow: 0 10px 24px -12px rgb(var(--noche) / .7); }
.btn-noche:hover { background: rgb(18 44 76); }
.btn-noche .btn__icono { background: var(--oro-metal); color: rgb(var(--noche)); }

.btn-oro { background: var(--oro-metal); color: rgb(var(--noche)); box-shadow: 0 10px 26px -12px rgb(150 110 40 / .8); }
.btn-oro .btn__icono { background: rgb(var(--noche)); color: rgb(var(--oroclaro)); }

.btn-linea { color: rgb(var(--noche)); border: 1px solid rgb(var(--noche) / .25); background: rgb(var(--papel) / .6); }
.btn-linea:hover { border-color: rgb(var(--noche) / .5); background: rgb(var(--papel)); }
.btn-linea .btn__icono { background: rgb(var(--arena)); color: rgb(var(--noche)); }
.seccion-noche .btn-linea { color: rgb(var(--crema)); border-color: rgb(255 255 255 / .25); background: transparent; }
.seccion-noche .btn-linea .btn__icono { background: rgb(255 255 255 / .1); color: rgb(var(--oroclaro)); }

.btn-wa .btn__icono { background: #25d366; color: #fff; }

.btn-chico { min-height: 42px; font-size: .88rem; padding-left: 1.1rem; }
.btn-chico .btn__icono { width: 30px; height: 30px; }

.enlace-flecha { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; color: rgb(var(--noche)); }
.enlace-flecha svg { width: 16px; height: 16px; transition: transform 240ms var(--e-suave); }
.enlace-flecha:hover svg { transform: translateX(4px); }
.seccion-noche .enlace-flecha { color: rgb(var(--oroclaro)); }

/* ============================================================
   6. TARJETAS — doble bisel: carcasa con filete + núcleo con brillo
   ============================================================ */
.carcasa {
  padding: 6px; border-radius: 26px;
  background: linear-gradient(160deg, rgb(255 255 255 / .9), rgb(var(--filete) / .55));
  box-shadow: var(--sombra-suave);
}
.nucleo {
  height: 100%; border-radius: 20px; background: rgb(var(--papel));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .9), inset 0 0 0 1px rgb(var(--filete) / .45);
}
.seccion-noche .carcasa { background: linear-gradient(160deg, rgb(255 255 255 / .14), rgb(255 255 255 / .03)); box-shadow: none; }
.seccion-noche .nucleo { background: rgb(255 255 255 / .04); box-shadow: inset 0 1px 0 rgb(255 255 255 / .08); }

.tarjeta-viva { transition: transform 320ms var(--e-suave), box-shadow 320ms var(--e-suave); }
.tarjeta-viva:hover { transform: translateY(-4px); box-shadow: var(--sombra-alta); }

.icono-circulo {
  width: 54px; height: 54px; border-radius: 999px; display: grid; place-items: center; flex: none;
  background: radial-gradient(circle at 30% 25%, #fff, rgb(var(--rubor)));
  box-shadow: inset 0 0 0 1px rgb(var(--oro) / .35); color: rgb(var(--orohondo));
}
.icono-circulo svg { width: 26px; height: 26px; }
.seccion-noche .icono-circulo { background: rgb(255 255 255 / .06); color: rgb(var(--oroclaro)); box-shadow: inset 0 0 0 1px rgb(var(--oro) / .4); }

.etiqueta {
  display: inline-flex; align-items: center; gap: .4rem; border-radius: 999px; padding: .35rem .8rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  background: rgb(var(--rubor)); color: rgb(var(--orohondo));
}
.etiqueta-noche { background: rgb(var(--noche)); color: rgb(var(--oroclaro)); }
.etiqueta-linea { background: transparent; box-shadow: inset 0 0 0 1px rgb(var(--orohondo) / .4); }

/* Lista con hoja dorada como viñeta */
.lista-hoja { display: grid; gap: .55rem; }
.lista-hoja li { position: relative; padding-left: 1.6rem; line-height: 1.5; }
.lista-hoja li::before {
  content: ''; position: absolute; left: 0; top: .35em; width: 12px; height: 12px;
  background: var(--oro-metal); border-radius: 0 70% 0 70%; transform: rotate(-12deg);
}

/* Desplegable nativo (sin JS, accesible, lo leen los robots) */
details.mas > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; font-size: .9rem; color: rgb(var(--orohondo)); }
details.mas > summary::-webkit-details-marker { display: none; }
details.mas > summary svg { width: 16px; height: 16px; transition: transform 220ms var(--e-suave); }
details.mas[open] > summary svg { transform: rotate(180deg); }

/* Preguntas frecuentes */
.faq details { border-bottom: 1px solid rgb(var(--filete)); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.25rem 0; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.35rem; font-weight: 600; color: rgb(var(--noche));
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .mas-menos { width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center; flex: none; background: rgb(var(--arena)); color: rgb(var(--orohondo)); transition: transform 260ms var(--e-suave); }
.faq details[open] summary .mas-menos { transform: rotate(45deg); }
.faq .respuesta { padding: 0 0 1.4rem; max-width: 70ch; line-height: 1.7; }

/* ============================================================
   7. HERO
   ============================================================ */
.hero { padding-top: clamp(7.5rem, 6rem + 5vw, 10rem); padding-bottom: clamp(3.5rem, 2rem + 4vw, 6rem); overflow: hidden; position: relative; }
.hero::before {
  content: ''; position: absolute; inset: -20% -10% auto auto; width: 70vw; height: 70vw; max-width: 900px; max-height: 900px;
  background: radial-gradient(circle, rgb(var(--rubor)) 0%, rgb(var(--rubor) / 0) 65%); pointer-events: none;
}
.hero h1 .titular { display: block; font-size: clamp(2.6rem, 1.7rem + 3.6vw, 4.6rem); }

/* Portada oscura de alto contraste (azul noche + dorado) */
.portada {
  background:
    radial-gradient(70% 60% at 80% 32%, rgb(36 72 120 / .9) 0%, rgb(36 72 120 / 0) 60%),
    radial-gradient(120% 90% at 10% 100%, rgb(var(--hondo)) 0%, rgb(var(--noche)) 60%);
  color: rgb(214 222 232);
}
.portada .lead { color: rgb(228 232 240 / .86); }
.portada::before { background: radial-gradient(circle, rgb(var(--oro) / .14) 0%, rgb(var(--oro) / 0) 62%); }
.portada__lineas { position: absolute; inset: 0; pointer-events: none; color: rgb(var(--oro)); }
.portada__lineas svg { position: absolute; overflow: visible; }

/* Capas que se mueven con el mouse (profundidad). Seguir al cursor es
   manipulación directa: se mantiene con movimiento reducido. */
[data-profundidad] { transition: transform 900ms var(--e-salida); will-change: transform; }

/* Insignias de confianza en cristal */
.insignias { display: flex; flex-wrap: wrap; gap: .6rem; }
.insignia {
  display: inline-flex; align-items: center; gap: .55rem; padding: .5rem .95rem .5rem .55rem; border-radius: 999px;
  background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .12); color: rgb(240 236 226);
  font-size: .85rem; font-weight: 700;
}
.insignia span.ic { width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; background: rgb(var(--oro) / .18); color: rgb(var(--oroclaro)); }
.insignia svg { width: 16px; height: 16px; }

/* Retrato con profundidad: marco dorado, eco desplazado, brillo que sigue
   al mouse y una mariposa posada en la esquina. */
.retrato { position: relative; width: min(410px, 82%); margin-inline: auto; perspective: 1300px; }
.retrato__cuerpo { position: relative; aspect-ratio: 525 / 720; transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 700ms var(--e-salida); }
.retrato__eco {
  position: absolute; inset: 0; border-radius: 32px; transform: translate(26px, 26px) translateZ(-40px);
  border: 1px solid rgb(var(--oro) / .55);
  background: linear-gradient(160deg, rgb(var(--oro) / .14), rgb(255 255 255 / .02));
}
.retrato__marco {
  position: absolute; inset: 0; padding: 6px; border-radius: 32px;
  background: linear-gradient(150deg, #f8e9c0 0%, #cfa457 30%, #f3dfaa 55%, #a87b33 80%, #e9cd8c 100%);
  box-shadow: 0 50px 90px -35px rgb(0 0 0 / .8), 0 0 60px -10px rgb(var(--oro) / .35);
}
.retrato__marco picture, .retrato__marco img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 26px; }
.retrato__brillo {
  position: absolute; inset: 6px; border-radius: 26px; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(380px circle at var(--mx, 70%) var(--my, 20%), rgb(255 255 255 / .55), transparent 55%);
}
.retrato__mariposa { position: absolute; right: -44px; top: -54px; z-index: 3; transform: translateZ(60px) rotate(18deg);
  filter: drop-shadow(0 18px 18px rgb(0 0 0 / .45)); }
.chip-flotante {
  position: absolute; z-index: 3; display: flex; align-items: center; gap: .7rem;
  padding: .6rem 1.15rem .6rem .6rem; border-radius: 999px; color: rgb(var(--noche));
  background: rgb(255 253 248 / .94); border: 1px solid rgb(255 255 255 / .7);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 24px 40px -18px rgb(0 0 0 / .55); transform: translateZ(80px);
}
.chip-flotante .icono-circulo { width: 40px; height: 40px; }
.chip-flotante .icono-circulo svg { width: 20px; height: 20px; }
.chip-flotante--a { left: -56px; bottom: 70px; }
.chip-flotante--b { right: -40px; bottom: -22px; }
@media (max-width: 640px) {
  .chip-flotante--a { left: -14px; bottom: 54px; }
  .chip-flotante--b { right: -10px; bottom: -18px; }
  .retrato__mariposa { right: -18px; top: -40px; }
}

/* Indicación para bajar */
.bajar { display: inline-flex; flex-direction: column; align-items: center; gap: .5rem; color: rgb(var(--oroclaro) / .8);
  font-family: Marcellus, Georgia, serif; font-size: .66rem; letter-spacing: .3em; text-transform: uppercase; }
.bajar i { width: 1px; height: 46px; background: linear-gradient(rgb(var(--oro)), transparent); transform-origin: top; animation: gota 2.4s var(--e-salida) infinite; }
@keyframes gota { 0% { transform: scaleY(0); opacity: 1; } 70% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* Preguntas que se abren con una reflexión */
.pregunta > summary { list-style: none; cursor: pointer; }
.pregunta > summary::-webkit-details-marker { display: none; }
/* Sin transición de fondo: el texto cambia a crema al instante y, si el fondo
   tardaba, quedaba crema sobre crema (medido en el navegador). */
.pregunta.nucleo[open] { background: rgb(var(--noche)); }
.pregunta[open] .pregunta__texto { color: rgb(var(--crema)); }
.pregunta .mas-menos { width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center; flex: none;
  background: rgb(var(--arena)); color: rgb(var(--orohondo)); transition: transform 300ms var(--e-suave), background-color 300ms; }
.pregunta[open] .mas-menos { transform: rotate(45deg); background: rgb(var(--oro) / .2); color: rgb(var(--oroclaro)); }
.pregunta__respuesta { color: rgb(228 232 240 / .9); line-height: 1.65; }

/* ============================================================
   8. MOVIMIENTO DE ENTRADA
   Solo se esconde algo si el JS arrancó (clase .js en <html>): sin JS,
   o para un robot, todo está visible desde el principio.
   ============================================================ */
.js [data-revelar] {
  opacity: 0; transform: translateY(22px);
  transition: opacity 800ms var(--e-salida), transform 800ms var(--e-salida);
  transition-delay: calc(var(--orden, 0) * 70ms);
}
.js [data-revelar].visible { opacity: 1; transform: none; }
/* Reducir no es eliminar: se conserva el fundido, se quita el desplazamiento. */
@media (prefers-reduced-motion: reduce) {
  .js [data-revelar] { transform: none !important; transition: opacity 600ms ease !important; }
}

/* Línea dorada que se dibuja (clip-path) */
.js .trazo { clip-path: inset(0 100% 0 0); transition: clip-path 1400ms var(--e-salida); }
.js .trazo.visible { clip-path: inset(0 0 0 0); }

/* ============================================================
   9. METAMORFOSIS — riel lateral con las tres etapas
   ============================================================ */
.riel { position: fixed; left: 22px; top: 50%; z-index: 40; transform: translateY(-50%); display: none; }
@media (min-width: 1360px) { .riel { display: block; } }
.riel__linea { position: absolute; left: 15px; top: 16px; bottom: 16px; width: 1px; background: rgb(var(--filete)); }
.riel__progreso {
  position: absolute; inset: 0; background: linear-gradient(#e9cf8f, #b98f45);
  transform-origin: top; transform: scaleY(var(--avance, 0)); transition: transform 200ms linear;
}
.riel ol { position: relative; display: grid; gap: 5.5rem; }
.riel li { display: flex; align-items: center; gap: .7rem; }
.riel__punto {
  width: 31px; height: 31px; border-radius: 999px; display: grid; place-items: center; flex: none;
  background: rgb(var(--papel)); border: 1px solid rgb(var(--filete)); color: rgb(var(--suave));
  transition: border-color 300ms var(--e-suave), color 300ms var(--e-suave), transform 300ms var(--e-suave);
}
.riel__punto svg { width: 17px; height: 17px; }
.riel__texto {
  font-family: Marcellus, Georgia, serif; font-size: .64rem; letter-spacing: .22em; text-transform: uppercase;
  color: rgb(var(--orohondo)); opacity: 0; transform: translateX(-6px);
  background: rgb(var(--papel) / .95); padding: .35rem .7rem; border-radius: 999px; white-space: nowrap; box-shadow: var(--sombra-suave);
  transition: opacity 300ms var(--e-suave), transform 300ms var(--e-suave);
}
.riel li[data-activa="true"] .riel__punto { border-color: rgb(var(--oro)); color: rgb(var(--orohondo)); transform: scale(1.12); }
/* Los nombres de las etapas solo al pasar el mouse: fijos, se montaban sobre el titular a 1440 px. */
.riel:hover .riel__texto, .riel a:focus-visible .riel__texto { opacity: 1; transform: none; }
.riel[data-sobre-noche="true"] .riel__punto { background: rgb(var(--noche)); border-color: rgb(255 255 255 / .2); }

/* ============================================================
   10. LA MARIPOSA (puntero, bandada, retrato, metamorfosis)
   Cada ala gira en 3D desde el cuerpo (rotateY), como un ala real que se
   pliega. La versión anterior "aplastaba" la figura (scaleX) y se veía
   como un palito: Andrés la encontró muy mala, con razón.
   ============================================================ */
.mp {
  position: relative; display: inline-block; flex: none;
  width: var(--t, 28px); height: var(--t, 28px); perspective: calc(var(--t, 28px) * 3.2);
  /* Oro de vidrio (estilo de la referencia de Andrés): ala transparente,
     franja dorada con escarcha junto al borde, hilos finos de oro. */
  --mp-ala: url(#mp-oro); --mp-filo: url(#mp-filo); --mp-vena: url(#mp-filo);
  --mp-banda: rgb(232 186 92 / .38); --mp-escarcha: url(#mp-escarcha);
  --mp-chispa: #fff1c0; --mp-cuerpo: url(#mp-filo);
  --mp-celda: rgb(246 214 140 / .07); --mp-mancha: #ffe9b0;
  /* Brillo muy corto, pegado a los hilos: uno más amplio se veía a través
     del ala transparente y la empañaba de gris (medido quitándolo). */
  filter: drop-shadow(0 0 calc(var(--t, 28px) * .016) rgb(242 194 96 / .55));
}
.mp--noche {
  --mp-ala: url(#mp-noche); --mp-filo: url(#mp-filo); --mp-vena: rgb(216 180 106 / .85);
  --mp-banda: rgb(216 170 80 / .18); --mp-escarcha: url(#mp-escarcha);
  --mp-chispa: #e8cf94; --mp-cuerpo: #0a1f38; filter: none;
  --mp-celda: rgb(255 255 255 / .06); --mp-mancha: #e8cf94;
}
/* Estela de destellos detrás de las que vuelan (solo opacity y transform) */
.chispa {
  position: absolute; left: 0; top: 0; width: var(--c, 4px); height: var(--c, 4px); pointer-events: none;
  background: radial-gradient(circle, #fff7dc 0%, #f1cf7f 45%, rgb(241 207 127 / 0) 72%);
  animation: chispa var(--d, 900ms) cubic-bezier(.16, 1, .3, 1) forwards;
}
.chispa--estrella {
  --c: 9px; background: #f8e2a6;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
}
.capa-chispas { position: fixed; inset: 0; pointer-events: none; z-index: 89; }
@keyframes chispa {
  from { opacity: 1; transform: translate3d(var(--x), var(--y), 0) scale(1); }
  to   { opacity: 0; transform: translate3d(calc(var(--x) + var(--dx)), calc(var(--y) + var(--dy)), 0) scale(.2) rotate(90deg); }
}
@media (prefers-reduced-motion: reduce) { .chispa { display: none; } }
.mp svg { display: block; width: 100%; height: 100%; overflow: visible; }
.mp__ala { position: absolute; top: 0; width: 50%; height: 100%; }
.mp__ala--i { left: 0; transform-origin: 100% 50%; animation: mp-i var(--vel, 340ms) ease-in-out infinite alternate; }
.mp__ala--d { right: 0; transform-origin: 0 50%; animation: mp-d var(--vel, 340ms) ease-in-out infinite alternate; }
.mp__cuerpo { position: absolute; inset: 0; }
@keyframes mp-i { from { transform: rotateY(4deg); } to { transform: rotateY(64deg); } }
@keyframes mp-d { from { transform: rotateY(-4deg); } to { transform: rotateY(-64deg); } }
.mp--quieta .mp__ala { animation: none; }

/* La que acompaña al puntero. No reemplaza la flecha: la sigue con un
   resorte (JS), se orienta hacia donde vas y aletea más rápido al moverte. */
.mp-puntero {
  position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; opacity: 0;
  transition: opacity 300ms ease; will-change: transform;
  filter: drop-shadow(0 4px 5px rgb(10 31 56 / .35));
}
.mp-puntero[data-visible="true"] { opacity: 1; }
.mp-puntero .mp { transition: transform 360ms var(--e-suave); }
.mp-puntero[data-posada="true"] .mp { transform: scale(1.22); }

/* La bandada de la portada: vuela sola y huye del mouse */
.bandada { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.bandada .mp-vuela { position: absolute; left: 0; top: 0; will-change: transform; filter: drop-shadow(0 8px 10px rgb(0 0 0 / .35)); }

/* Reducir no es eliminar: se quieta el aleteo (movimiento autónomo); la
   mariposa del puntero sigue al mouse (manipulación directa). */
@media (prefers-reduced-motion: reduce) {
  .mp__ala { animation: none !important; }
  .bandada { display: none; }
}

/* ============================================================
   10b. METAMORFOSIS — "Mi manera de trabajar" al hacer scroll
   En pantallas grandes la escena se queda fija y, al bajar, la hoja se
   vuelve oruga, crisálida y mariposa. En el celular, lista normal.
   ============================================================ */
.metamorfosis__escena { padding-block: clamp(4.5rem, 3rem + 6vw, 8rem); }
@media (min-width: 1024px) {
  .metamorfosis__pista { height: 340vh; }
  .metamorfosis__escena { position: sticky; top: 0; min-height: 100vh; display: flex; align-items: center; padding-block: 6rem 3rem; }
}
.lienzo { position: relative; width: min(460px, 100%); aspect-ratio: 1; margin-inline: auto; }
.lienzo__aro { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgb(var(--oro) / .35); }
.lienzo__aro--2 { inset: 9%; border: 1px dashed rgb(var(--oro) / .22); animation: girar 80s linear infinite; }
.lienzo__aro--3 { inset: 18%; background: radial-gradient(circle, rgb(var(--oro) / .12), transparent 70%); border: 0; }
@keyframes girar { to { transform: rotate(360deg); } }
.fase {
  position: absolute; inset: 16%; display: grid; place-items: center; color: rgb(var(--oroclaro));
  opacity: 0; transform: scale(.82) rotate(-8deg);
  transition: opacity 700ms var(--e-salida), transform 1000ms var(--e-salida);
}
.fase.activa { opacity: 1; transform: none; }
.fase > svg { width: 100%; height: 100%; overflow: visible; }
.fase--mariposa .mp { transform: scaleX(.06) rotate(-10deg); transition: transform 1300ms var(--e-salida) 150ms; }
.fase--mariposa.activa .mp { transform: none; }
.fase__nombre {
  position: absolute; left: 50%; bottom: -2.2rem; transform: translateX(-50%); white-space: nowrap;
  font-family: Marcellus, Georgia, serif; letter-spacing: .3em; text-transform: uppercase; font-size: .7rem; color: rgb(var(--oroclaro));
}
.paso { opacity: .38; transition: opacity 500ms var(--e-suave); position: relative; padding-left: 1.4rem; }
.paso::before { content: ''; position: absolute; left: 0; top: .3rem; bottom: .3rem; width: 2px; border-radius: 2px; background: rgb(255 255 255 / .12); }
.paso::after { content: ''; position: absolute; left: 0; top: .3rem; bottom: .3rem; width: 2px; border-radius: 2px;
  background: linear-gradient(#e9cf8f, #b98f45); transform: scaleY(0); transform-origin: top; transition: transform 700ms var(--e-salida); }
.paso.activo { opacity: 1; }
.paso.activo::after { transform: scaleY(1); }
@media (max-width: 1023px) { .paso { opacity: 1; } .paso::after { transform: scaleY(1); } }

/* ============================================================
   10c. TARJETAS QUE SE INCLINAN y BOTONES CON IMÁN (siguen al mouse)
   ============================================================ */
.inclinable { position: relative; transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0px));
  transition: transform 600ms var(--e-salida), box-shadow 400ms var(--e-suave); }
.inclinable[data-sobre="true"] { --ty: -6px; box-shadow: var(--sombra-alta); transition-duration: 160ms, 400ms; }
.inclinable .brillo { position: absolute; inset: 6px; border-radius: 20px; pointer-events: none; opacity: 0; transition: opacity 300ms;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgb(255 255 255 / .55), transparent 45%); mix-blend-mode: soft-light; }
.inclinable[data-sobre="true"] .brillo { opacity: 1; }
[data-iman] { transition: translate 500ms var(--e-salida); }

/* ============================================================
   11. AGENDA, MAPA, VIDEO
   ============================================================ */
.marco-agenda { position: relative; min-height: 760px; border-radius: 20px; overflow: hidden; background: rgb(var(--papel)); }
.marco-agenda iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.marco-agenda__espera { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 2rem; }
.marco-agenda[data-cargada="true"] .marco-agenda__espera { display: none; }

.video-consultorio { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================
   12. WHATSAPP FLOTANTE
   ============================================================ */
.flotante {
  position: fixed; right: 18px; bottom: 18px; z-index: 45; width: 58px; height: 58px; border-radius: 999px;
  display: grid; place-items: center; background: #25d366; color: #fff;
  box-shadow: 0 14px 30px -10px rgb(0 0 0 / .45), inset 0 0 0 4px rgb(255 255 255 / .25);
  transition: transform 260ms var(--e-suave), opacity 260ms var(--e-suave);
}
.flotante svg { width: 28px; height: 28px; }
.js .flotante[data-visible="false"] { opacity: 0; transform: scale(.6); pointer-events: none; }

/* Grano sutil para las secciones oscuras */
.grano::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Imágenes que no deben desbordar */
img, video { max-width: 100%; }

/* Cabecera sobre un hero oscuro (página del podcast): mientras no se haya
   bajado, tinta clara. En cuanto la isla se vuelve de cristal claro
   (data-fijo), manda la tinta oscura de siempre: si no, texto claro sobre
   cristal claro (trampa ya pisada en Barua: dos estados que conviven). */
.cabecera[data-oscura="true"][data-fijo="false"] .logo,
.cabecera[data-oscura="true"][data-fijo="false"] .nav-enlace,
.cabecera[data-oscura="true"][data-fijo="false"] [data-menu] { color: rgb(var(--crema)); }
.cabecera[data-oscura="true"][data-fijo="false"] .logo__oficio { color: rgb(var(--oroclaro)); }

/* El resplandor rosado del hero es para el fondo crema; sobre azul se veía
   como una mancha blanca. En un hero oscuro, brillo dorado tenue. */
.hero.seccion-noche::before { background: radial-gradient(circle, rgb(var(--oro) / .16) 0%, rgb(var(--oro) / 0) 62%); }

/* La mariposa de cada pregunta está quieta; al abrirla (o al pasar el
   mouse) despierta y aletea. */
.pregunta[open] .mp--quieta .mp__ala--i, .pregunta > summary:hover .mp--quieta .mp__ala--i { animation: mp-i 520ms ease-in-out infinite alternate; }
.pregunta[open] .mp--quieta .mp__ala--d, .pregunta > summary:hover .mp--quieta .mp__ala--d { animation: mp-d 520ms ease-in-out infinite alternate; }
.pregunta[open] .mp--noche { --mp-ala: url(#mp-oro); --mp-vena: url(#mp-filo); --mp-banda: rgb(226 178 88 / .32); --mp-chispa: #fff1c0; --mp-cuerpo: url(#mp-filo); filter: drop-shadow(0 0 2px rgb(236 186 92 / .6)); }

/* Trazos finos aunque el dibujo crezca */
.portada__lineas svg *, .fase > svg * { vector-effect: non-scaling-stroke; }

/* La mariposa se abre despacio, pero se va rápido: si no, se cruzaba con la crisálida. */
.fase:not(.activa) { transition-duration: 350ms, 350ms; }
.fase--mariposa:not(.activa) .mp { transition-duration: 300ms; transition-delay: 0ms; }