/* ============================================================
   ORIGEN STUDIO · LANDING · UNA SOLA PELÍCULA
   Hero (la promesa) → Espejo → Reencuadre → Vehículos →
   Caso Insignia (el telón se levanta) → Laboratorio →
   El lugar reservado → La invitación.
   ============================================================ */

:root{
  --crema:       #F6F3ED;
  --papel:       #FBF9F4;
  --marfil-luz:  #F0EBE0;
  --grafito:     #2B2B2B;
  --borgona:     #5A1E2A;
  --borgona-2:   #7A2E3D;
  --dorado:      #B99656;
  --dorado-suave:#D8C49A;
  --linea:       #E4DCCB;
  --humo:        #8B8578;

  --sh-fondo:    #121118;
  --sh-fondo-2:  #0D0C12;
  --sh-panel:    #1B1A23;
  --sh-panel-2:  #232231;
  --sh-linea:    rgba(160,156,180,.14);
  --sh-linea-2:  rgba(160,156,180,.08);
  --sh-texto:    #F2F0F7;
  --sh-mute:     #9B98AC;
  --sh-tenue:    #6D6A7E;

  --marfil:      #F4F1E8;
  --marfil-2:    #E4E0D3;

  --oro:         #E8B84B;
  --oro-2:       #F3D07E;
  --oro-tinta:   #33260A;

  --serif: "Playfair Display", Georgia, serif;
  --sans:  "Montserrat", -apple-system, sans-serif;
  --ui:    "Inter", -apple-system, "Segoe UI", sans-serif;
  --ancho: 1180px;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  background:var(--crema);
  color:var(--grafito);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none; z-index:80;
  opacity:.032;
  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='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.contenedor{ max-width:var(--ancho); margin:0 auto; padding:0 48px; }
.contenedor--ancho{ max-width:1320px; margin:0 auto; padding:0 40px; }
@media (max-width:720px){ .contenedor, .contenedor--ancho{ padding:0 20px; } }

.etiqueta{
  font-size:11px; font-weight:600;
  letter-spacing:.32em; text-transform:uppercase;
  color:var(--dorado);
  display:inline-flex; align-items:center; gap:14px;
}
.etiqueta::before, .etiqueta::after{
  content:""; width:36px; height:1px;
  background:currentColor; opacity:.6;
}
.etiqueta--izq::after{ display:none; }

.revela{
  opacity:0; transform:translateY(30px);
  transition:opacity 1.2s cubic-bezier(.22,.61,.36,1), transform 1.2s cubic-bezier(.22,.61,.36,1);
}
.revela.visible{ opacity:1; transform:none; }
.revela[data-d="1"]{ transition-delay:.14s; }
.revela[data-d="2"]{ transition-delay:.28s; }
.revela[data-d="3"]{ transition-delay:.42s; }
@media (prefers-reduced-motion:reduce){
  .revela{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
  *{ animation:none !important; }
}

.pie-placa{ text-align:center; margin:0 auto; }
.pie-placa p{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(18px, 2.2vw, 25px);
  line-height:1.55;
  color:rgba(242,240,247,.88);
  max-width:30ch;
  margin:0 auto;
}
.pie-placa p em{ color:var(--oro-2); }
.pie-placa small{
  display:block;
  margin-top:16px;
  font-family:var(--sans);
  font-size:10.5px; font-weight:600;
  letter-spacing:.3em; text-transform:uppercase;
  color:rgba(242,240,247,.32);
}

.boton-primario{
  font-size:12px; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--crema);
  background:var(--borgona);
  text-decoration:none;
  padding:19px 42px;
  border-radius:2px;
  transition:background .35s ease, transform .35s ease;
  display:inline-block;
}
.boton-primario:hover{ background:var(--borgona-2); transform:translateY(-2px); }
.enlace-quieto{
  font-size:12px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--grafito);
  text-decoration:none;
  border-bottom:1px solid var(--dorado);
  padding-bottom:5px;
  transition:color .3s ease;
}
.enlace-quieto:hover{ color:var(--borgona); }

/* ============================================================
   NAV
   ============================================================ */
nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  background:rgba(246,243,237,.86);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:background .5s ease, border-color .4s ease;
}
nav.oscura{
  background:rgba(13,12,18,.78);
  border-bottom-color:rgba(160,156,180,.12);
}
nav.con-linea{ border-bottom-color:var(--linea); }
.nav-in{
  max-width:var(--ancho); margin:0 auto; padding:18px 48px;
  display:flex; align-items:center; justify-content:space-between;
}
@media (max-width:720px){ .nav-in{ padding:15px 24px; } }
.marca{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.marca-nombre{
  font-family:var(--serif); font-weight:600; font-size:18px;
  letter-spacing:.22em; color:var(--borgona);
  transition:color .5s ease;
}
nav.oscura .marca-nombre{ color:var(--dorado-suave); }
.marca-nombre span{
  font-family:var(--sans); font-weight:500; font-size:9px;
  letter-spacing:.42em; color:var(--dorado); display:block; margin-top:1px;
}
.nav-cta{
  font-family:var(--sans);
  font-size:11px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--grafito);
  text-decoration:none;
  padding:11px 24px;
  border:1px solid var(--grafito);
  border-radius:2px;
  transition:all .4s ease;
  white-space:nowrap;
}
.nav-cta:hover{ background:var(--borgona); border-color:var(--borgona); color:var(--crema); }
nav.oscura .nav-cta{ color:var(--marfil); border-color:rgba(244,241,232,.4); }
nav.oscura .nav-cta:hover{ background:var(--marfil); color:#211E28; border-color:var(--marfil); }
@media (max-width:560px){ .nav-cta{ display:none; } }

/* ============================================================
   1 · HERO — LA PROMESA
   Destellos del mundo que vendrá. Nada se explica todavía.
   ============================================================ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  padding:150px 0 110px;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 900px 640px at 78% 16%, rgba(216,196,154,.3), transparent 62%),
    radial-gradient(ellipse 700px 900px at 98% 62%, rgba(185,150,86,.12), transparent 60%),
    linear-gradient(160deg, var(--papel) 0%, var(--crema) 55%, var(--marfil-luz) 100%);
}
.hero::after{
  content:"";
  position:absolute;
  top:-20%; right:8%;
  width:320px; height:150%;
  background:linear-gradient(90deg, transparent, rgba(255,250,238,.5), transparent);
  transform:rotate(18deg);
  pointer-events:none;
}
.hero-grid{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns: 1.02fr .98fr;
  gap:60px;
  align-items:center;
}
@media (max-width:960px){
  .hero-grid{ grid-template-columns:1fr; gap:70px; }
  .hero{ padding:130px 0 80px; }
}
.hero-texto .etiqueta{ margin-bottom:34px; }
.hero h1{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(42px, 5.6vw, 72px);
  line-height:1.12;
  color:var(--grafito);
  letter-spacing:-.01em;
  margin-bottom:30px;
}
.hero h1 em{ font-style:italic; font-weight:600; color:var(--borgona); }
.hero-sub{
  font-size:17px;
  font-weight:300;
  line-height:1.85;
  color:#55504A;
  max-width:430px;
  margin-bottom:46px;
}
.hero-acciones{ display:flex; align-items:center; gap:34px; flex-wrap:wrap; }

/* ---- los destellos: fragmentos del clímax, sin explicación ---- */
.destellos{
  position:relative;
  height:540px;
}
@media (max-width:960px){ .destellos{ height:460px; max-width:560px; margin:0 auto; width:100%; } }
@media (max-width:560px){ .destellos{ height:400px; } }
@keyframes flotar{
  0%,100%{ transform:translateY(0) rotate(var(--rot,0deg)); }
  50%{ transform:translateY(-9px) rotate(var(--rot,0deg)); }
}
.destello{
  position:absolute;
  animation:flotar 7s ease-in-out infinite;
}
/* fragmento A: esquina de la interfaz con el nodo dorado */
.dest-ui{
  --rot:-5deg;
  top:6%; right:4%;
  width:62%;
  aspect-ratio:16/9.4;
  background:
    radial-gradient(ellipse 60% 50% at 85% 0%, rgba(122,46,61,.16), transparent 62%),
    var(--sh-fondo);
  border:1px solid rgba(160,156,180,.18);
  border-radius:14px;
  box-shadow:0 50px 90px -24px rgba(35,25,15,.45), inset 0 1px 0 rgba(244,241,232,.05);
  padding:6% 7%;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(200deg, #000 55%, transparent 96%);
          mask-image:linear-gradient(200deg, #000 55%, transparent 96%);
  animation-delay:.4s;
}
.dest-ui .dz-kicker{
  font-family:var(--ui);
  font-size:clamp(5px,.9vw,8px);
  font-weight:600;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--sh-tenue);
  margin-bottom:4%;
}
.dest-ui .dz-titulo{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(12px,1.9vw,19px);
  color:var(--sh-texto);
  margin-bottom:8%;
}
.dest-ui .dz-titulo em{ font-style:italic; color:var(--marfil-2); }
.dest-ui .dz-riel{ display:flex; align-items:center; }
.dest-ui .dz-punto{
  width:clamp(13px,2vw,20px);
  aspect-ratio:1;
  border-radius:50%;
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--ui);
  font-size:clamp(4.5px,.7vw,7px);
  font-weight:600;
  background:rgba(244,241,232,.08);
  border:1px solid rgba(244,241,232,.32);
  color:var(--marfil);
}
.dest-ui .dz-punto.oro{
  background:radial-gradient(circle at 34% 28%, var(--oro-2), var(--oro) 74%);
  border:none;
  color:var(--oro-tinta);
  box-shadow:0 0 0 4px rgba(232,184,75,.14), 0 0 18px rgba(232,184,75,.6);
}
.dest-ui .dz-union{ flex:1; height:1px; background:rgba(244,241,232,.28); }
.dest-ui .dz-union.g{ background:var(--sh-linea); }

/* fragmento B: esquina del certificado con su sello */
.dest-cert{
  --rot:5deg;
  bottom:4%; left:0%;
  width:46%;
  aspect-ratio:4/3;
  background:linear-gradient(168deg, #FDFBF6 0%, #F4EFE2 100%);
  border-radius:4px;
  box-shadow:0 44px 80px -22px rgba(35,25,15,.4);
  padding:9% 10%;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(24deg, #000 52%, transparent 98%);
          mask-image:linear-gradient(24deg, #000 52%, transparent 98%);
  animation-delay:1.6s;
}
.dest-cert::after{
  content:"";
  position:absolute; inset:6%;
  border:1px solid rgba(185,150,86,.5);
  border-radius:2px;
}
.dest-cert .dc-tipo{
  font-size:clamp(5px,.85vw,8px);
  font-weight:600;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--humo);
  margin-bottom:6%;
}
.dest-cert .dc-nombre{
  font-family:var(--serif);
  font-style:italic;
  font-weight:500;
  font-size:clamp(14px,2.4vw,24px);
  color:var(--grafito);
}
.dest-cert .dc-sello{
  position:absolute;
  bottom:12%; right:12%;
  width:clamp(24px,4vw,40px);
  aspect-ratio:1;
  border-radius:50%;
  background:conic-gradient(from 210deg, #C99A34, #F3D07E 22%, #E8B84B 38%, #A87E28 58%, #F3D07E 78%, #C99A34);
  box-shadow:0 8px 18px -4px rgba(168,126,40,.5), inset 0 2px 3px rgba(255,244,214,.9), inset 0 -3px 5px rgba(120,86,20,.5);
}
/* fragmento C: astilla de teléfono con la chispa del progreso */
.dest-tel{
  --rot:8deg;
  top:40%; right:-4%;
  width:30%;
  aspect-ratio:9/12;
  background:linear-gradient(160deg, #3C3C45, #17171C 30%, #0C0C10);
  border-radius:34px 34px 0 0;
  padding:8px 8px 0;
  box-shadow:0 40px 70px -20px rgba(0,0,0,.55);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg, #000 46%, transparent 92%);
          mask-image:linear-gradient(180deg, #000 46%, transparent 92%);
  animation-delay:2.7s;
}
.dest-tel .dt-pantalla{
  background:var(--sh-fondo);
  border-radius:27px 27px 0 0;
  height:100%;
  padding:16% 10% 0;
  position:relative;
}
.dest-tel .dt-isla{
  position:absolute;
  top:5%; left:50%;
  transform:translateX(-50%);
  width:34%; height:4.5%;
  background:#000;
  border-radius:40px;
}
.dest-tel .dt-marca{
  font-family:var(--sans);
  font-size:clamp(6px,.95vw,9px);
  font-weight:600;
  letter-spacing:.13em;
  color:var(--oro);
  margin:12% 0 8%;
}
.dest-tel .dt-barra{
  height:4px;
  background:rgba(160,156,180,.14);
  border-radius:3px;
  position:relative;
  overflow:visible;
}
.dest-tel .dt-barra i{
  display:block; height:100%; width:64%;
  background:var(--marfil);
  border-radius:3px;
  position:relative;
}
.dest-tel .dt-barra i::after{
  content:"";
  position:absolute;
  right:-2px; top:50%;
  transform:translateY(-50%);
  width:7px; height:7px;
  border-radius:50%;
  background:var(--oro-2);
  box-shadow:0 0 10px rgba(232,184,75,.9);
}
.dest-tel .dt-bloque{
  margin-top:10%;
  height:34%;
  border-radius:12px;
  border:1px solid rgba(160,156,180,.14);
  background:
    radial-gradient(ellipse 80% 60% at 40% 20%, rgba(232,184,75,.12), transparent 65%),
    linear-gradient(180deg, #241F2C, #171420);
}
/* fragmento D: la voz humana, apenas legible */
.dest-voz{
  --rot:-2deg;
  top:2%; left:6%;
  font-family:var(--ui);
  font-size:clamp(9px,1.2vw,12px);
  font-weight:500;
  color:rgba(242,240,247,.94);
  background:rgba(9,8,13,.62);
  border-radius:6px;
  padding:8px 16px;
  white-space:nowrap;
  box-shadow:0 22px 44px -14px rgba(35,25,15,.4);
  filter:blur(.4px);
  opacity:.9;
  backdrop-filter:blur(3px);
  animation-delay:3.4s;
}
/* fragmento E: una luz suelta */
.dest-luz{
  top:66%; left:36%;
  width:10px; height:10px;
  border-radius:50%;
  background:var(--oro-2);
  box-shadow:0 0 22px 6px rgba(232,184,75,.5), 0 0 60px 18px rgba(232,184,75,.18);
  animation-delay:2s;
}
.hero-pie{
  position:absolute;
  left:0; right:0; bottom:34px;
  z-index:2;
}
.hero-pie .contenedor{
  display:flex; justify-content:space-between; align-items:center;
  gap:24px;
}
.hero-pie small{
  font-size:10.5px; font-weight:500;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--humo);
}
.hilo-scroll{
  width:1px; height:44px;
  background:linear-gradient(180deg, var(--dorado), transparent);
  animation:hilo 2.6s ease-in-out infinite;
}
@keyframes hilo{
  0%,100%{ transform:scaleY(1); opacity:1; }
  50%{ transform:scaleY(.55); opacity:.5; }
}
@media (max-width:960px){ .hero-pie{ display:none; } }

/* ============================================================
   2 · EL ESPEJO
   ============================================================ */
.espejo{
  position:relative;
  background:var(--papel);
  padding:150px 0 160px;
  border-top:1px solid var(--linea);
  overflow:hidden;
}
.espejo::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 800px 600px at 88% 80%, rgba(216,196,154,.16), transparent 65%),
    radial-gradient(ellipse 600px 500px at 0% 10%, rgba(139,133,120,.09), transparent 60%);
}
.espejo-fantasmas{
  position:absolute;
  top:50%; right:6%;
  transform:translateY(-58%);
  display:flex; flex-direction:column;
  gap:34px;
  z-index:1;
  pointer-events:none;
}
.espejo-fantasmas span{
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(26px, 3.4vw, 44px);
  letter-spacing:.52em;
  color:var(--grafito);
  opacity:.06;
  text-transform:uppercase;
  white-space:nowrap;
}
@media (max-width:960px){ .espejo-fantasmas{ display:none; } }
.espejo-grid{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns: 1fr .92fr;
  gap:90px;
  align-items:center;
}
@media (max-width:960px){ .espejo-grid{ grid-template-columns:1fr; gap:80px; } }
.espejo-texto .etiqueta{ margin-bottom:38px; }
.espejo-relato{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(22px, 2.5vw, 30px);
  line-height:1.55;
  color:var(--grafito);
  margin-bottom:36px;
  max-width:520px;
}
.espejo-detalle{
  font-size:15px;
  font-weight:300;
  line-height:1.9;
  color:#5C564E;
  max-width:460px;
  margin-bottom:46px;
}
.espejo-detalle code{
  font-family:var(--sans);
  font-weight:500;
  font-size:13px;
  color:var(--borgona);
  background:rgba(90,30,42,.06);
  padding:2px 8px;
  border-radius:3px;
}
.espejo-verdad{ border-left:1px solid var(--dorado); padding-left:28px; }
.espejo-verdad p{
  font-family:var(--serif);
  font-size:clamp(18px, 1.9vw, 22px);
  line-height:1.6;
  color:var(--grafito);
}
.espejo-verdad p em{ font-style:italic; color:var(--borgona); }
.espejo-escena{
  position:relative;
  height:460px;
  display:flex; align-items:center; justify-content:center;
}
@media (max-width:960px){ .espejo-escena{ max-width:480px; margin:0 auto; width:100%; height:420px; } }
.pila{ position:relative; width:78%; max-width:400px; aspect-ratio:4/5; }
.hoja{
  position:absolute;
  inset:8% 4%;
  background:#FFFEFB;
  border:1px solid #ECE5D6;
  border-radius:3px;
  box-shadow:0 24px 48px rgba(60,45,30,.14);
}
.hoja:nth-child(1){ transform:rotate(-5deg) translate(-4%, 4%); background:#F7F3EA; }
.hoja:nth-child(2){ transform:rotate(3.5deg) translate(3%, 1%); background:#FBF8F1; }
.hoja:nth-child(3){ transform:rotate(-1.5deg); }
.hoja-principal{
  position:absolute;
  inset:8% 4%;
  transform:rotate(-1.5deg);
  background:#FFFEFB;
  border:1px solid #E9E1D0;
  border-radius:3px;
  box-shadow:0 34px 60px rgba(60,45,30,.2);
  padding:11% 12%;
  display:flex; flex-direction:column;
}
.hoja-clip{
  position:absolute;
  top:-4.5%; right:12%;
  width:9%;
  aspect-ratio:1/2.6;
  border:2.5px solid #A99F8C;
  border-radius:40px;
  border-bottom:none;
  opacity:.85;
}
.hoja-titulo{
  font-family:var(--sans);
  font-weight:600;
  font-size:clamp(10px, 1.2vw, 13px);
  letter-spacing:.04em;
  color:var(--grafito);
  margin-bottom:5%;
  word-break:break-all;
}
.hoja-titulo b{ color:var(--borgona); font-weight:600; }
.hoja-lineas{ display:flex; flex-direction:column; gap:5.5%; flex:1; margin-top:4%; }
.hoja-lineas i{ display:block; height:6px; min-height:5px; background:#EAE3D3; border-radius:3px; }
.hoja-lineas i:nth-child(1){ width:92%; }
.hoja-lineas i:nth-child(2){ width:100%; }
.hoja-lineas i:nth-child(3){ width:74%; }
.hoja-lineas i:nth-child(4){ width:96%; margin-top:6%; }
.hoja-lineas i:nth-child(5){ width:85%; }
.hoja-lineas i:nth-child(6){ width:58%; }
.hoja-lineas i:nth-child(7){ width:90%; margin-top:6%; }
.hoja-lineas i:nth-child(8){ width:67%; }
.hoja-pie{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:auto; padding-top:8%;
}
.hoja-pie s{
  text-decoration:none;
  font-family:var(--sans);
  font-size:clamp(7px,.9vw,10px);
  font-weight:500;
  letter-spacing:.18em;
  color:#B4AB98;
  text-transform:uppercase;
}
.hoja-sello{
  width:12%; aspect-ratio:1;
  border-radius:50%;
  border:1px solid #D9CFBA;
  position:relative;
  opacity:.7;
}
.hoja-sello::after{
  content:"v7";
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(8px,1vw,12px);
  color:#B4AB98;
}
.hoja-principal::after{
  content:"";
  position:absolute;
  bottom:0; right:0;
  width:11%; aspect-ratio:1;
  background:linear-gradient(135deg, transparent 49%, #F0EAD9 50%, #E2DAC6 100%);
  border-radius:0 0 3px 0;
}

/* ============================================================
   3 · EL REENCUADRE — la sala donde ocurre una idea
   ============================================================ */
.reencuadre{
  position:relative;
  background:#1B1A22;
  padding:200px 0 210px;
  overflow:hidden;
  text-align:center;
}
.reencuadre::before{
  content:"";
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-52%);
  width:min(900px, 120vw);
  aspect-ratio:1.6/1;
  background:radial-gradient(ellipse at center, rgba(232,184,75,.14) 0%, rgba(90,30,42,.1) 42%, transparent 70%);
  pointer-events:none;
}
/* interfaces desenfocadas al fondo: ideas tomando forma */
.reen-fantasma{
  position:absolute;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(35,34,49,.5), rgba(27,26,35,.6));
  border:1px solid rgba(160,156,180,.1);
  filter:blur(7px);
  opacity:.5;
  pointer-events:none;
}
.reen-fantasma.f1{ top:12%; left:6%; width:280px; height:180px; transform:rotate(-7deg); }
.reen-fantasma.f2{ bottom:10%; right:5%; width:340px; height:200px; transform:rotate(5deg); }
.reen-fantasma.f3{ top:20%; right:14%; width:170px; height:290px; transform:rotate(9deg); border-radius:30px; }
.reen-fantasma i{
  position:absolute;
  display:block;
  background:rgba(244,241,232,.1);
  border-radius:4px;
}
.reen-fantasma.f1 i:nth-child(1){ top:16%; left:10%; width:44%; height:9%; }
.reen-fantasma.f1 i:nth-child(2){ top:36%; left:10%; width:78%; height:7%; }
.reen-fantasma.f1 i:nth-child(3){ top:52%; left:10%; width:64%; height:7%; }
.reen-fantasma.f2 i:nth-child(1){ top:14%; left:8%; width:36%; height:10%; }
.reen-fantasma.f2 i:nth-child(2){ top:38%; left:8%; width:84%; height:34%; border-radius:8px; background:rgba(232,184,75,.07); }
.reen-fantasma.f3 i:nth-child(1){ top:10%; left:16%; width:68%; height:7%; }
.reen-fantasma.f3 i:nth-child(2){ top:26%; left:16%; width:68%; height:42%; border-radius:10px; }
@media (max-width:760px){ .reen-fantasma.f1{ display:none; } }
/* polvo en la sala */
.reencuadre .polvo{
  position:absolute; inset:0;
  background-image:
    radial-gradient(1.2px 1.2px at 22% 26%, rgba(244,241,232,.16), transparent 100%),
    radial-gradient(1px 1px at 72% 18%, rgba(232,184,75,.2), transparent 100%),
    radial-gradient(1.2px 1.2px at 84% 64%, rgba(244,241,232,.1), transparent 100%),
    radial-gradient(1px 1px at 12% 72%, rgba(232,184,75,.12), transparent 100%);
  pointer-events:none;
}
/* espiral del logo, insinuada */
.reencuadre-espiral{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:min(620px, 90vw);
  opacity:.05;
  pointer-events:none;
}
/* suelo con reflejo tenue */
.reencuadre .suelo{
  position:absolute;
  left:0; right:0; bottom:0;
  height:26%;
  background:linear-gradient(180deg, transparent, rgba(232,184,75,.04));
  pointer-events:none;
}
.reencuadre .contenedor{ position:relative; z-index:2; }
.reencuadre .etiqueta{ color:var(--dorado); margin-bottom:58px; }
.reencuadre h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(40px, 6.4vw, 82px);
  line-height:1.22;
  color:var(--crema);
  letter-spacing:-.005em;
  margin-bottom:64px;
}
.reencuadre h2 .vive{
  display:inline-block;
  font-style:italic;
  font-weight:500;
  color:var(--dorado-suave);
  position:relative;
}
.reencuadre h2 .vive::after{
  content:"";
  position:absolute;
  left:2%; right:2%; bottom:-.08em;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--dorado), transparent);
  opacity:.75;
}
.reencuadre-sombra{
  font-family:var(--sans);
  font-weight:300;
  font-size:16px;
  line-height:1.95;
  color:rgba(246,243,237,.62);
  max-width:520px;
  margin:0 auto;
}
.reencuadre-sombra strong{ font-weight:500; color:rgba(246,243,237,.9); }

/* ============================================================
   4 · LOS VEHÍCULOS — la liberación
   ============================================================ */
.vehiculos{
  position:relative;
  background:var(--crema);
  padding:170px 0 160px;
  text-align:center;
  overflow:hidden;
}
.vehiculos::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(ellipse 900px 560px at 50% -8%, rgba(216,196,154,.24), transparent 62%);
}
.vehiculos .contenedor{ position:relative; z-index:2; }
.vehiculos .etiqueta{ margin-bottom:46px; }
.vehiculos h2{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(30px, 4.2vw, 52px);
  line-height:1.28;
  color:var(--grafito);
  max-width:21ch;
  margin:0 auto 80px;
}
.vehiculos h2 em{ font-style:italic; color:var(--borgona); }
.letania{
  display:flex; flex-direction:column;
  gap:26px;
  margin-bottom:84px;
}
.letania p{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(20px, 2.6vw, 32px);
  line-height:1.4;
  color:var(--grafito);
}
.letania p small{
  display:block;
  font-family:var(--sans);
  font-size:10px; font-weight:600;
  letter-spacing:.32em; text-transform:uppercase;
  color:var(--humo);
  margin-bottom:8px;
}
.letania p.sin-nombre em{
  font-style:italic;
  font-weight:500;
  color:var(--borgona);
}
.vehiculos-cierre{
  position:relative;
  max-width:560px;
  margin:0 auto;
  padding-top:44px;
}
.vehiculos-cierre::before{
  content:"";
  position:absolute;
  top:0; left:50%;
  transform:translateX(-50%);
  width:1px; height:28px;
  background:linear-gradient(180deg, var(--dorado), transparent);
}
.vehiculos-cierre p{
  font-size:15.5px; font-weight:300; line-height:1.95;
  color:#5C564E;
}
.vehiculos-cierre p strong{ font-weight:500; color:var(--grafito); }

/* ============================================================
   5 · CASO INSIGNIA — el telón se levanta
   ============================================================ */
.telon{
  text-align:center;
  padding:130px 0 30px;
}
.telon .etiqueta{ color:var(--oro); margin-bottom:44px; }
.telon h2{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(34px, 5vw, 62px);
  line-height:1.2;
  color:var(--crema);
  margin-bottom:30px;
}
.telon h2 em{ font-style:italic; color:var(--oro-2); }
.telon p{
  font-size:15.5px; font-weight:300; line-height:1.9;
  color:rgba(242,240,247,.6);
  max-width:560px;
  margin:0 auto;
}
.telon p b{ font-weight:500; color:rgba(242,240,247,.85); }

/* ============================================================
   EL MUNDO OSCURO
   ============================================================ */
.mundo{
  position:relative;
  background:
    radial-gradient(ellipse 1200px 600px at 50% 0%, rgba(232,184,75,.05), transparent 55%),
    linear-gradient(180deg, #191821 0%, var(--sh-fondo) 22%, var(--sh-fondo-2) 100%);
  overflow:hidden;
}
.mundo::before{
  content:"";
  position:absolute; top:0; left:0; right:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(232,184,75,.3), transparent);
}
.mundo::after{
  content:"";
  position:absolute; inset:0;
  background-image:
    radial-gradient(1.2px 1.2px at 16% 8%, rgba(244,241,232,.14), transparent 100%),
    radial-gradient(1px 1px at 78% 5%, rgba(244,241,232,.12), transparent 100%),
    radial-gradient(1.2px 1.2px at 90% 22%, rgba(244,241,232,.08), transparent 100%),
    radial-gradient(1px 1px at 6% 38%, rgba(244,241,232,.08), transparent 100%),
    radial-gradient(1.2px 1.2px at 62% 55%, rgba(244,241,232,.06), transparent 100%),
    radial-gradient(1px 1px at 30% 76%, rgba(244,241,232,.06), transparent 100%);
  pointer-events:none;
}
.mundo > *{ position:relative; z-index:2; }

.grano-ui::before{
  content:"";
  position:absolute; inset:0;
  z-index:25;
  pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ============================================================
   PANTALLA I · LA LLEGADA
   ============================================================ */
.escena-1{ padding:110px 0 130px; }
.escena-1 .pie-placa{ margin-bottom:70px; }

.mac{ width:min(1060px, 100%); margin:0 auto; }
.mac-pantalla{
  position:relative;
  background:linear-gradient(180deg, #0A0A0D, #050506);
  border-radius:18px 18px 6px 6px;
  padding:10px 10px 16px;
  border:1px solid #222229;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.6),
    0 90px 140px -30px rgba(0,0,0,.8),
    0 40px 70px -20px rgba(0,0,0,.55),
    0 0 120px -20px rgba(232,184,75,.08),
    inset 0 1px 0 rgba(255,255,255,.05);
}
.mac-camara{
  position:absolute; top:4px; left:50%;
  transform:translateX(-50%);
  width:4px; height:4px; border-radius:50%;
  background:#191920;
  box-shadow:inset 0 0 2px rgba(120,150,200,.5);
}
.mac-viewport{
  position:relative;
  background:var(--sh-fondo);
  border-radius:7px;
  aspect-ratio:16/10;
  overflow:hidden;
}
.mac-viewport::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 42%, rgba(255,255,255,.03) 47%, rgba(255,255,255,.06) 49.5%, rgba(255,255,255,.03) 52%, transparent 58%);
  pointer-events:none; z-index:30;
}
.mac-base{
  position:relative;
  height:15px;
  margin:0 -4.5%;
  background:linear-gradient(180deg, #3A3A42 0%, #26262C 30%, #17171C 100%);
  border-radius:2px 2px 13px 13px;
  box-shadow:0 30px 50px -10px rgba(0,0,0,.75);
}
.mac-base::before{
  content:"";
  position:absolute; top:0; left:50%;
  transform:translateX(-50%);
  width:14%; height:5.5px;
  background:linear-gradient(180deg, #111115, #1F1F26);
  border-radius:0 0 9px 9px;
}
.mac-base::after{
  content:"";
  position:absolute; top:0; left:0; right:0; height:1.5px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.25) 18%, rgba(255,255,255,.25) 82%, transparent);
}
.mac-luz{
  width:min(900px, 90%);
  height:120px;
  margin:-30px auto 0;
  background:radial-gradient(ellipse at center top, rgba(232,184,75,.1), transparent 70%);
  filter:blur(6px);
  pointer-events:none;
}

/* ============================================================
   INTERFAZ (legado, sin uso)
   ============================================================ */
.ui{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  font-family:var(--ui);
  background:
    radial-gradient(ellipse 60% 46% at 82% -8%, rgba(122,46,61,.14), transparent 62%),
    radial-gradient(ellipse 45% 42% at -5% 108%, rgba(35,34,49,.8), transparent 60%),
    var(--sh-fondo);
  color:var(--sh-texto);
  container-type:inline-size;
}
.ui > .vineta{
  position:absolute; inset:0;
  z-index:24;
  pointer-events:none;
  box-shadow:inset 0 0 clamp(40px,9cqw,120px) rgba(6,5,10,.55);
}

.ui-barra{
  display:flex; align-items:center; gap:2.6%;
  padding:2.2% 3.2% 2%;
  border-bottom:1px solid var(--sh-linea-2);
  background:rgba(18,17,24,.5);
}
.ui-logo{ display:flex; flex-direction:column; line-height:1; flex-shrink:0; }
.ui-logo b{
  font-family:var(--sans);
  font-weight:600;
  font-size:clamp(9px, 1.3cqw, 15px);
  letter-spacing:.13em;
  color:var(--oro);
}
.ui-logo s{
  text-decoration:none;
  font-weight:500;
  font-size:clamp(5px, .68cqw, 7.5px);
  letter-spacing:.42em;
  color:var(--sh-tenue);
  margin-top:4px;
  text-transform:uppercase;
}
.ui-nav{
  display:flex; align-items:center; gap:clamp(10px,2.6cqw,32px);
  flex:1;
  justify-content:center;
}
.ui-nav i{
  font-style:normal;
  font-size:clamp(6.5px, .88cqw, 10.5px);
  font-weight:500;
  letter-spacing:.02em;
  color:var(--sh-mute);
  white-space:nowrap;
}
.ui-nav i.activo{ color:var(--sh-texto); position:relative; }
.ui-nav i.activo::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-10px;
  height:2px;
  background:var(--marfil);
  border-radius:2px;
  opacity:.9;
}
.ui-lado-der{ display:flex; align-items:center; gap:clamp(8px,1.6cqw,18px); flex-shrink:0; }
.ui-buscar{
  display:flex; align-items:center; gap:7px;
  background:rgba(160,156,180,.07);
  border:1px solid var(--sh-linea-2);
  border-radius:30px;
  padding:clamp(3px,.55cqw,7px) clamp(8px,1.3cqw,15px);
}
.ui-buscar::before{
  content:"";
  width:clamp(7px,.9cqw,10px);
  aspect-ratio:1;
  border:1.3px solid var(--sh-tenue);
  border-radius:50%;
  position:relative;
  box-shadow:2.5px 3px 0 -1.2px var(--sh-tenue);
}
.ui-buscar em{
  font-style:normal;
  font-size:clamp(5.5px,.75cqw,9px);
  color:var(--sh-tenue);
}
.ui-campana{
  position:relative;
  width:clamp(9px,1.15cqw,14px);
  aspect-ratio:1;
  border:1.4px solid var(--sh-mute);
  border-radius:45% 45% 8% 8%;
}
.ui-campana::before{
  content:"";
  position:absolute;
  left:50%; bottom:-3.5px;
  transform:translateX(-50%);
  width:3.5px; height:2px;
  border-radius:0 0 4px 4px;
  background:var(--sh-mute);
}
.ui-campana::after{
  content:"";
  position:absolute;
  top:-2.5px; right:-2.5px;
  width:clamp(4px,.5cqw,6px);
  aspect-ratio:1;
  border-radius:50%;
  background:var(--oro);
  box-shadow:0 0 8px rgba(232,184,75,.8);
}
.ui-persona{ display:flex; align-items:center; gap:9px; }
.ui-persona em{
  font-style:normal;
  font-size:clamp(6px, .82cqw, 9.5px);
  font-weight:500;
  color:var(--sh-mute);
}
.retrato{
  border-radius:50%;
  overflow:hidden;
  position:relative;
  flex-shrink:0;
  background:linear-gradient(180deg, #4A3B45 0%, #2B2330 100%);
  box-shadow:inset 0 0 0 1px rgba(244,241,232,.14);
}
.retrato::before{
  content:"";
  position:absolute;
  top:16%; left:50%;
  transform:translateX(-50%);
  width:62%; height:52%;
  border-radius:50% 50% 46% 46%;
  background:radial-gradient(circle at 38% 32%, #E8C39E 0%, #C49578 45%, #8A5F4E 100%);
  filter:blur(1.5px);
}
.retrato::after{
  content:"";
  position:absolute;
  bottom:-12%; left:50%;
  transform:translateX(-50%);
  width:96%; height:46%;
  border-radius:50% 50% 0 0;
  background:linear-gradient(180deg, #6E4552, #4A2E3A);
  filter:blur(1px);
}
.ui-persona .retrato{ width:clamp(16px, 2.3cqw, 27px); aspect-ratio:1; }

.ui-cuerpo{
  flex:1;
  padding:2.6% 3.2% 2.4%;
  display:flex; flex-direction:column;
  min-height:0;
}
.ui-saludo{
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom:2.4%;
  gap:4%;
}
.ui-kicker{
  display:flex; align-items:center; gap:8px;
  font-size:clamp(5px, .68cqw, 8px);
  font-weight:600;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--sh-tenue);
  margin-bottom:1.4%;
}
.ui-kicker::before{
  content:"";
  width:14px; height:1px;
  background:var(--sh-tenue);
  opacity:.6;
}
.ui-saludo-t h4{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(14px, 2.2cqw, 26px);
  line-height:1.2;
  color:var(--sh-texto);
  letter-spacing:.005em;
}
.ui-saludo-t h4 em{ font-style:italic; color:var(--marfil-2); }
.ui-resumen{ display:flex; align-items:center; gap:clamp(8px,1.4cqw,16px); flex-shrink:0; }
.ui-anillo{
  width:clamp(34px, 4.8cqw, 56px);
  aspect-ratio:1;
  border-radius:50%;
  background:conic-gradient(var(--marfil) 0 63.6%, rgba(160,156,180,.14) 63.6% 100%);
  position:relative;
}
.ui-anillo::after{
  content:"7 / 11";
  position:absolute; inset:8%;
  background:var(--sh-fondo);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:600;
  font-size:clamp(5.5px, .78cqw, 9.5px);
  color:var(--sh-texto);
  letter-spacing:.03em;
}
.ui-anillo i{
  position:absolute;
  top:6%; right:14%;
  width:clamp(4px,.55cqw,6.5px);
  aspect-ratio:1;
  border-radius:50%;
  background:var(--oro-2);
  box-shadow:0 0 10px rgba(232,184,75,.9), 0 0 3px rgba(243,208,126,1);
}
.ui-resumen s{
  text-decoration:none;
  font-size:clamp(5.5px, .74cqw, 8.5px);
  line-height:1.6;
  color:var(--sh-mute);
  max-width:13ch;
}

.ui-actual{
  display:grid;
  grid-template-columns: 1.55fr 1fr;
  gap:2.2%;
  flex:1;
  min-height:0;
  margin-bottom:2.2%;
}
.ui-video{
  position:relative;
  border-radius:12px;
  overflow:hidden;
  border:1px solid rgba(160,156,180,.16);
  background:#191722;
  box-shadow:
    0 24px 50px -20px rgba(0,0,0,.75),
    inset 0 1px 0 rgba(244,241,232,.05);
}
.fotograma{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 60% 70% at 30% 20%, rgba(232,184,75,.14), transparent 60%),
    radial-gradient(ellipse 80% 90% at 70% 90%, rgba(122,46,61,.22), transparent 65%),
    linear-gradient(180deg, #241F2C 0%, #171420 100%);
}
.fotograma .figura{
  position:absolute;
  bottom:-6%; left:50%;
  transform:translateX(-52%);
  width:44%; height:78%;
}
.fotograma .figura::before{
  content:"";
  position:absolute;
  top:0; left:50%;
  transform:translateX(-50%);
  width:46%; aspect-ratio:1/1.18;
  border-radius:50% 50% 44% 44%;
  background:radial-gradient(circle at 36% 30%, #E9C49F 0%, #C39476 42%, #6E4A3E 78%, #3A2A2E 100%);
  filter:blur(7px);
}
.fotograma .figura::after{
  content:"";
  position:absolute;
  bottom:0; left:50%;
  transform:translateX(-50%);
  width:100%; height:56%;
  border-radius:48% 48% 0 0;
  background:linear-gradient(180deg, #7A4A58 0%, #4A2E3C 60%, #2E1F2A 100%);
  filter:blur(6px);
}
.fotograma .contraluz{
  position:absolute;
  bottom:14%; left:38%;
  width:26%; height:52%;
  border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(243,208,126,.2), transparent 65%);
  filter:blur(10px);
}
.ui-video .vineta-v{
  position:absolute; inset:0;
  box-shadow:inset 0 0 60px rgba(5,4,9,.7);
  pointer-events:none;
}
.ui-desbloqueo{
  position:absolute;
  top:5%; left:4.5%;
  display:flex; align-items:center; gap:6px;
  background:rgba(232,184,75,.1);
  border:1px solid rgba(232,184,75,.4);
  border-radius:30px;
  padding:clamp(3px,.5cqw,6px) clamp(7px,1.1cqw,13px);
  backdrop-filter:blur(4px);
}
.ui-desbloqueo::before{
  content:"";
  width:clamp(4px,.55cqw,6px);
  aspect-ratio:1;
  border-radius:50%;
  background:var(--oro-2);
  box-shadow:0 0 8px rgba(232,184,75,.9);
}
.ui-desbloqueo em{
  font-style:normal;
  font-size:clamp(5px,.7cqw,8.5px);
  font-weight:600;
  letter-spacing:.1em;
  color:var(--oro-2);
  text-transform:uppercase;
}
.ui-duracion{
  position:absolute;
  top:5%; right:4.5%;
  font-size:clamp(5px,.7cqw,8.5px);
  font-weight:500;
  color:rgba(242,240,247,.65);
  background:rgba(13,12,18,.5);
  border:1px solid rgba(160,156,180,.18);
  border-radius:30px;
  padding:clamp(3px,.5cqw,6px) clamp(7px,1.1cqw,12px);
  backdrop-filter:blur(4px);
}
.ui-subtitulo{
  position:absolute;
  left:50%; bottom:26%;
  transform:translateX(-50%);
  font-size:clamp(6px,.85cqw,10px);
  font-weight:500;
  color:rgba(242,240,247,.92);
  background:rgba(9,8,13,.55);
  border-radius:5px;
  padding:clamp(3px,.5cqw,6px) clamp(8px,1.2cqw,14px);
  white-space:nowrap;
  letter-spacing:.01em;
  backdrop-filter:blur(3px);
}
.ui-play{
  position:absolute;
  top:34%; left:50%;
  transform:translate(-50%,-50%);
  width:clamp(26px, 4cqw, 46px);
  aspect-ratio:1;
  border-radius:50%;
  background:rgba(244,241,232,.1);
  border:1px solid rgba(244,241,232,.5);
  backdrop-filter:blur(4px);
  box-shadow:0 8px 24px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.25);
}
.ui-play::after{
  content:"";
  position:absolute;
  top:50%; left:54%;
  transform:translate(-50%,-50%);
  border-left:clamp(7px,1cqw,12px) solid var(--marfil);
  border-top:clamp(4.5px,.65cqw,8px) solid transparent;
  border-bottom:clamp(4.5px,.65cqw,8px) solid transparent;
}
.ui-video-info{
  position:absolute;
  left:4.5%; right:4.5%; bottom:6.5%;
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:4%;
}
.ui-video-info div b{
  display:block;
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(9px, 1.3cqw, 15px);
  color:var(--sh-texto);
  margin-bottom:3px;
}
.ui-video-info div s{
  display:block; text-decoration:none;
  font-size:clamp(5px, .68cqw, 8px);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--sh-mute);
}
.ui-boton{
  background:linear-gradient(180deg, #FBF8F0, var(--marfil) 55%, var(--marfil-2));
  color:#211E28;
  font-weight:600;
  font-size:clamp(5.5px, .78cqw, 9px);
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:clamp(5px,.85cqw,10px) clamp(11px,1.9cqw,22px);
  border-radius:40px;
  white-space:nowrap;
  box-shadow:0 8px 22px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(0,0,0,.08);
}

.ui-lado{
  display:flex; flex-direction:column;
  gap:5.5%;
  min-height:0;
}
.ui-mini{
  flex:1;
  display:flex; align-items:center; gap:6%;
  background:linear-gradient(180deg, rgba(35,34,49,.55), rgba(27,26,35,.75));
  border:1px solid var(--sh-linea-2);
  border-radius:10px;
  padding:0 6%;
  min-height:0;
  box-shadow:inset 0 1px 0 rgba(244,241,232,.03);
}
.ui-mini i{
  width:clamp(15px, 2.2cqw, 26px);
  aspect-ratio:1;
  border-radius:50%;
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-style:normal;
  font-weight:600;
  font-size:clamp(6px,.85cqw,10px);
}
.ui-mini.hecho i{
  background:rgba(244,241,232,.08);
  border:1px solid rgba(244,241,232,.3);
  color:var(--marfil);
}
.ui-mini.hecho i::before{ content:"✓"; font-size:.85em; }
.ui-mini.bloq{ opacity:.5; }
.ui-mini.bloq i{
  background:transparent;
  border:1px solid var(--sh-linea);
  color:var(--sh-tenue);
}
.ui-mini div{ min-width:0; }
.ui-mini b{
  display:block;
  font-size:clamp(6px, .82cqw, 9.5px);
  font-weight:500;
  color:var(--sh-texto);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ui-mini s{
  display:block; text-decoration:none;
  font-size:clamp(5px, .66cqw, 7.5px);
  color:var(--sh-tenue);
  margin-top:2px;
}
.ui-mini.bloq b{ color:var(--sh-mute); }

.ui-pie{
  border-top:1px solid var(--sh-linea-2);
  padding-top:2%;
}
.ui-pie-fila{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:1.6%;
}
.ui-pie-fila em{
  font-style:normal;
  font-size:clamp(5px,.68cqw,8px);
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--sh-tenue);
}
.ui-guardado{
  display:flex; align-items:center; gap:6px;
  font-size:clamp(5px,.68cqw,8px);
  color:var(--sh-tenue);
}
.ui-guardado::before{
  content:"✓";
  font-size:.95em;
  color:var(--sh-mute);
}
.ui-riel{ display:flex; align-items:center; }
.ui-punto{
  position:relative;
  width:clamp(12px, 1.7cqw, 20px);
  aspect-ratio:1;
  border-radius:50%;
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:clamp(4.5px,.58cqw,7px);
  font-weight:600;
}
.ui-punto.hecho{
  background:rgba(244,241,232,.08);
  border:1px solid rgba(244,241,232,.32);
  color:var(--marfil);
}
.ui-punto.actual{
  background:radial-gradient(circle at 34% 28%, var(--oro-2), var(--oro) 74%);
  color:var(--oro-tinta);
  box-shadow:0 0 0 clamp(3px,.4cqw,5px) rgba(232,184,75,.14), 0 0 clamp(10px,1.6cqw,20px) rgba(232,184,75,.55);
}
.ui-punto.bloq{
  background:transparent;
  border:1px solid var(--sh-linea);
  color:var(--sh-tenue);
  opacity:.55;
}
.ui-union{ flex:1; height:1px; background:var(--sh-linea); }
.ui-union.viva{ background:rgba(244,241,232,.3); }

/* ============================================================
   PANTALLA II · EL CAMINO (macro)
   ============================================================ */
.escena-2{ padding:60px 0 140px; }
.escena-2 .pie-placa{ margin-bottom:96px; }
.macro-zona{ position:relative; max-width:1000px; margin:0 auto; }
.macro-camino{
  display:flex; align-items:center; justify-content:center;
  padding:0 20px;
}
.mnodo{
  position:relative;
  width:clamp(54px, 8.5vw, 94px);
  aspect-ratio:1;
  border-radius:50%;
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--ui);
  font-weight:600;
  font-size:clamp(15px, 2.1vw, 24px);
}
.mnodo span{
  position:absolute;
  bottom:-44px;
  left:50%; transform:translateX(-50%);
  font-family:var(--ui);
  font-size:clamp(8px, .95vw, 10.5px);
  font-weight:600;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--sh-tenue);
  white-space:nowrap;
}
.mnodo.hecho{
  background:linear-gradient(180deg, rgba(244,241,232,.1), rgba(244,241,232,.04));
  border:1.5px solid rgba(244,241,232,.34);
  color:var(--marfil);
  box-shadow:inset 0 1px 0 rgba(244,241,232,.15), 0 14px 30px -12px rgba(0,0,0,.6);
}
.mnodo.hecho::before{
  content:"✓";
  position:absolute;
  font-size:.62em;
  opacity:.9;
}
.mnodo.hecho span{ color:rgba(242,240,247,.45); }
.mnodo.actual{
  background:radial-gradient(circle at 32% 26%, var(--oro-2) 0%, var(--oro) 62%, #C99A34 100%);
  color:var(--oro-tinta);
  border:none;
  box-shadow:
    0 0 0 12px rgba(232,184,75,.07),
    0 0 80px rgba(232,184,75,.4),
    0 24px 50px -14px rgba(201,154,52,.5),
    inset 0 2px 3px rgba(255,241,205,.8),
    inset 0 -3px 6px rgba(140,100,25,.4);
  animation:latido 3.4s ease-in-out infinite;
}
.mnodo.actual span{ color:var(--oro-2); }
@keyframes latido{
  0%,100%{ box-shadow:0 0 0 12px rgba(232,184,75,.07), 0 0 80px rgba(232,184,75,.4), 0 24px 50px -14px rgba(201,154,52,.5), inset 0 2px 3px rgba(255,241,205,.8), inset 0 -3px 6px rgba(140,100,25,.4); }
  50%{ box-shadow:0 0 0 18px rgba(232,184,75,.04), 0 0 110px rgba(232,184,75,.55), 0 24px 50px -14px rgba(201,154,52,.5), inset 0 2px 3px rgba(255,241,205,.8), inset 0 -3px 6px rgba(140,100,25,.4); }
}
.mnodo.bloq{
  background:linear-gradient(180deg, rgba(27,26,35,.9), rgba(19,18,26,.9));
  border:1.5px solid var(--sh-linea);
  color:var(--sh-tenue);
  opacity:.65;
  box-shadow:inset 0 1px 0 rgba(244,241,232,.04);
}
.mnodo.bloq::after{
  content:"";
  position:absolute;
  top:-14px;
  width:clamp(10px,1.3vw,13px);
  height:clamp(8px,1vw,10px);
  border:2px solid var(--sh-tenue);
  border-bottom:none;
  border-radius:8px 8px 0 0;
}
.munion{ flex:1; height:1.5px; min-width:14px; }
.munion.viva{ background:linear-gradient(90deg, rgba(244,241,232,.34), rgba(244,241,232,.16)); }
.munion.gris{ background:var(--sh-linea); }
.munion.encendida{ background:linear-gradient(90deg, rgba(244,241,232,.3), var(--oro)); }
@media (max-width:640px){ .macro-camino .oculta-m{ display:none; } }

.toast{
  position:absolute;
  top:-72px;
  left:56.5%;
  display:flex; align-items:center; gap:10px;
  background:rgba(24,22,30,.85);
  border:1px solid rgba(232,184,75,.38);
  border-radius:12px;
  padding:11px 16px;
  backdrop-filter:blur(8px);
  box-shadow:0 20px 44px -14px rgba(0,0,0,.7), 0 0 40px -8px rgba(232,184,75,.25);
  transform:rotate(-1deg);
}
@media (max-width:760px){ .toast{ position:static; margin:0 auto 54px; width:fit-content; transform:none; } }
.toast i{
  font-style:normal;
  color:var(--oro-2);
  font-size:13px;
  text-shadow:0 0 10px rgba(232,184,75,.8);
}
.toast div b{
  display:block;
  font-family:var(--ui);
  font-size:11px; font-weight:600;
  color:var(--sh-texto);
}
.toast div s{
  display:block; text-decoration:none;
  font-family:var(--ui);
  font-size:9.5px;
  color:var(--sh-mute);
  margin-top:1px;
}

/* ============================================================
   PANTALLA III · LA LECCIÓN (iPhone)
   ============================================================ */
.escena-3{ padding:70px 0 130px; }
.escena-3 .pie-placa{ margin-bottom:74px; }
.escena-3-centro{
  display:flex; justify-content:center; align-items:center;
  gap:clamp(20px, 5vw, 70px);
}
.iphone{ width:clamp(240px, 30vw, 310px); position:relative; z-index:2; }
.iphone-marco{
  background:linear-gradient(160deg, #3C3C45, #17171C 32%, #0B0B0F);
  border-radius:48px;
  padding:11px;
  border:1px solid #2C2C34;
  box-shadow:
    0 80px 120px -30px rgba(0,0,0,.8),
    0 0 100px -10px rgba(232,184,75,.1),
    inset 0 1px 0 rgba(255,255,255,.1);
  position:relative;
}
.iphone-marco::before{
  content:"";
  position:absolute; left:-2.5px; top:20%;
  width:3px; height:9%;
  background:#2E2E36; border-radius:2px 0 0 2px;
}
.iphone-marco::after{
  content:"";
  position:absolute; right:-2.5px; top:26%;
  width:3px; height:15%;
  background:#2E2E36; border-radius:0 2px 2px 0;
}
.iphone-viewport{
  position:relative;
  background:var(--sh-fondo);
  border-radius:38px;
  aspect-ratio:9/19.4;
  overflow:hidden;
}
.iphone-isla{
  position:absolute;
  top:3.6%; left:50%;
  transform:translateX(-50%);
  width:31%; height:3.2%;
  background:#000;
  border-radius:40px;
  z-index:12;
  box-shadow:inset 0 0 3px rgba(255,255,255,.06);
}
.iphone-viewport::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(120deg, transparent 32%, rgba(255,255,255,.035) 43%, rgba(255,255,255,.07) 46.5%, rgba(255,255,255,.035) 50%, transparent 60%);
  pointer-events:none; z-index:11;
}

.shm-estado{
  position:absolute;
  top:2.2%;
  left:9%; right:9%;
  display:flex; justify-content:space-between; align-items:center;
  z-index:13;
  font-family:var(--ui);
  font-size:clamp(8px, .95vw, 10.5px);
  font-weight:600;
  color:var(--sh-texto);
}
.shm-senales{ display:flex; align-items:center; gap:5px; }
.shm-senales .cobertura{ display:flex; align-items:flex-end; gap:1.5px; }
.shm-senales .cobertura i{
  width:2.5px; border-radius:1px;
  background:var(--sh-texto);
}
.shm-senales .cobertura i:nth-child(1){ height:4px; }
.shm-senales .cobertura i:nth-child(2){ height:6px; }
.shm-senales .cobertura i:nth-child(3){ height:8px; }
.shm-senales .cobertura i:nth-child(4){ height:10px; opacity:.4; }
.shm-bateria{
  width:19px; height:10px;
  border:1px solid rgba(242,240,247,.5);
  border-radius:3px;
  position:relative;
}
.shm-bateria::before{
  content:"";
  position:absolute; inset:1.5px;
  right:28%;
  background:var(--sh-texto);
  border-radius:1px;
}
.shm-bateria::after{
  content:"";
  position:absolute;
  right:-3.5px; top:50%;
  transform:translateY(-50%);
  width:2px; height:4px;
  background:rgba(242,240,247,.5);
  border-radius:0 2px 2px 0;
}

.shm{
  position:absolute; inset:0;
  padding:15.5% 8% 8%;
  display:flex; flex-direction:column;
  font-family:var(--ui);
  background:
    radial-gradient(ellipse 100% 34% at 50% -6%, rgba(122,46,61,.16), transparent 66%),
    var(--sh-fondo);
}
.shm-cab{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:5%;
}
.shm-cab b{
  font-family:var(--sans);
  font-size:clamp(8px, 1vw, 11px);
  font-weight:600;
  letter-spacing:.13em;
  color:var(--oro);
}
.shm-cab s{
  text-decoration:none;
  font-size:clamp(7px, .85vw, 9.5px);
  color:var(--sh-mute);
}
.shm-barra{
  height:4px;
  background:rgba(160,156,180,.14);
  border-radius:3px;
  overflow:visible;
  margin-bottom:6%;
  position:relative;
}
.shm-barra i{
  display:block; height:100%; width:64%;
  background:var(--marfil);
  border-radius:3px;
  position:relative;
}
.shm-barra i::after{
  content:"";
  position:absolute;
  right:-2px; top:50%;
  transform:translateY(-50%);
  width:7px; height:7px;
  border-radius:50%;
  background:var(--oro-2);
  box-shadow:0 0 10px rgba(232,184,75,.9);
}
.shm-video{
  flex:1;
  border-radius:20px;
  border:1px solid rgba(160,156,180,.16);
  position:relative;
  overflow:hidden;
  margin-bottom:6%;
  box-shadow:inset 0 0 50px rgba(0,0,0,.35), 0 18px 40px -18px rgba(0,0,0,.7);
}
.shm-foto{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 70% 46% at 32% 16%, rgba(232,184,75,.16), transparent 62%),
    radial-gradient(ellipse 100% 70% at 60% 100%, rgba(122,46,61,.24), transparent 66%),
    linear-gradient(180deg, #262031 0%, #161221 100%);
}
.shm-foto .figura{
  position:absolute;
  bottom:-4%; left:50%;
  transform:translateX(-50%);
  width:74%; height:66%;
}
.shm-foto .figura::before{
  content:"";
  position:absolute;
  top:0; left:50%;
  transform:translateX(-50%);
  width:40%; aspect-ratio:1/1.16;
  border-radius:50% 50% 44% 44%;
  background:radial-gradient(circle at 36% 30%, #E9C49F 0%, #C39476 44%, #6E4A3E 80%, #3A2A2E 100%);
  filter:blur(6px);
}
.shm-foto .figura::after{
  content:"";
  position:absolute;
  bottom:0; left:50%;
  transform:translateX(-50%);
  width:100%; height:58%;
  border-radius:46% 46% 0 0;
  background:linear-gradient(180deg, #7A4A58 0%, #482D3B 62%, #2C1E29 100%);
  filter:blur(5px);
}
.shm-foto .contraluz{
  position:absolute;
  bottom:22%; left:34%;
  width:32%; height:44%;
  border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(243,208,126,.22), transparent 66%);
  filter:blur(9px);
}
.shm-video .vineta-v{
  position:absolute; inset:0;
  box-shadow:inset 0 0 46px rgba(5,4,9,.72);
  pointer-events:none;
}
.shm-play{
  position:absolute;
  top:32%; left:50%;
  transform:translate(-50%,-50%);
  width:20%;
  aspect-ratio:1;
  border-radius:50%;
  background:rgba(244,241,232,.1);
  border:1px solid rgba(244,241,232,.5);
  backdrop-filter:blur(3px);
  box-shadow:0 8px 22px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.25);
}
.shm-play::after{
  content:"";
  position:absolute;
  top:50%; left:55%;
  transform:translate(-50%,-50%);
  border-left:10px solid var(--marfil);
  border-top:6.5px solid transparent;
  border-bottom:6.5px solid transparent;
}
.shm-sub{
  position:absolute;
  left:50%; bottom:24%;
  transform:translateX(-50%);
  width:max-content;
  max-width:88%;
  text-align:center;
  font-size:clamp(7.5px, .9vw, 10px);
  font-weight:500;
  color:rgba(242,240,247,.94);
  background:rgba(9,8,13,.55);
  border-radius:6px;
  padding:4px 11px;
  backdrop-filter:blur(3px);
}
.shm-controles{
  position:absolute;
  left:6%; right:6%; bottom:6%;
}
.shm-scrub{
  position:relative;
  height:3px;
  background:rgba(242,240,247,.16);
  border-radius:3px;
  margin-bottom:7px;
}
.shm-scrub .cargado{
  position:absolute; left:0; top:0; bottom:0;
  width:58%;
  background:rgba(242,240,247,.12);
  border-radius:3px;
}
.shm-scrub .visto{
  position:absolute; left:0; top:0; bottom:0;
  width:34%;
  background:var(--marfil);
  border-radius:3px;
}
.shm-scrub .visto::after{
  content:"";
  position:absolute;
  right:-3.5px; top:50%;
  transform:translateY(-50%);
  width:8px; height:8px;
  border-radius:50%;
  background:#FFF;
  box-shadow:0 1px 4px rgba(0,0,0,.5);
}
.shm-tiempos{
  display:flex; justify-content:space-between;
  font-size:clamp(6.5px,.78vw,8.5px);
  color:rgba(242,240,247,.6);
  font-variant-numeric:tabular-nums;
}
.shm-info{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:5.5%;
}
.shm-info div b{
  display:block;
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(11px, 1.35vw, 15px);
  color:var(--sh-texto);
}
.shm-info div s{
  display:block; text-decoration:none;
  font-size:clamp(6.5px,.8vw,9px);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--sh-mute);
  margin-top:2px;
}
.shm-tag{
  display:flex; align-items:center; gap:5px;
  font-size:clamp(6px,.72vw,8px);
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--oro-2);
}
.shm-tag::before{
  content:"";
  width:5px; height:5px; border-radius:50%;
  background:var(--oro-2);
  box-shadow:0 0 7px rgba(232,184,75,.9);
}
.shm-boton{
  background:linear-gradient(180deg, #FBF8F0, var(--marfil) 55%, var(--marfil-2));
  color:#211E28;
  font-weight:600;
  font-size:clamp(8px, .95vw, 10.5px);
  letter-spacing:.13em;
  text-transform:uppercase;
  text-align:center;
  padding:4.6% 0;
  border-radius:40px;
  box-shadow:0 12px 26px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(0,0,0,.08);
}
.iphone-eco{
  width:clamp(150px, 19vw, 210px);
  opacity:.3;
  filter:blur(1.2px) brightness(.65);
  transform:rotate(-6deg) translateY(30px);
}
.iphone-eco .shm-barra i{ width:28%; }
.iphone-eco .shm-barra i::after{ display:none; }
@media (max-width:680px){ .iphone-eco{ display:none; } }

/* ============================================================
   PANTALLA IV · EL LOGRO (certificado)
   ============================================================ */
.escena-4{ padding:70px 0 130px; }
.escena-4 .pie-placa{ margin-bottom:74px; }
.cert-marco{
  width:min(680px, 92%);
  margin:0 auto;
  position:relative;
}
.cert-marco::before{
  content:"";
  position:absolute; inset:-14%;
  background:radial-gradient(ellipse at center, rgba(232,184,75,.16), transparent 62%);
  pointer-events:none;
}
.cert{
  position:relative;
  background:linear-gradient(168deg, #FDFBF6 0%, #F7F2E7 58%, #F1EBDC 100%);
  border-radius:5px;
  aspect-ratio:4/2.95;
  box-shadow:
    0 90px 130px -30px rgba(0,0,0,.78),
    0 30px 60px -20px rgba(0,0,0,.5),
    0 0 90px -10px rgba(232,184,75,.22),
    inset 0 1px 0 rgba(255,255,255,.9);
  padding:5.5% 8%;
  display:flex; flex-direction:column;
  align-items:center;
  text-align:center;
  overflow:hidden;
}
.cert .fibra{
  position:absolute; inset:0;
  opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.93  0 0 0 0 0.9  0 0 0 0 0.82  0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23p)'/%3E%3C/svg%3E");
  pointer-events:none;
}
.cert .luz-papel{
  position:absolute; inset:0;
  background:radial-gradient(ellipse 70% 55% at 50% -10%, rgba(255,252,242,.85), transparent 60%);
  pointer-events:none;
}
.cert::after{
  content:"";
  position:absolute; inset:3.4%;
  border:1px solid rgba(185,150,86,.55);
  border-radius:3px;
  pointer-events:none;
}
.cert::before{
  content:"";
  position:absolute; inset:4.3%;
  border:1px solid rgba(185,150,86,.25);
  border-radius:2px;
  pointer-events:none;
}
.cert > *{ position:relative; z-index:2; }
.cert-logo{
  font-family:var(--sans);
  font-size:clamp(9px, 1.4vw, 13px);
  font-weight:600;
  letter-spacing:.16em;
  color:var(--borgona);
  margin-bottom:.6%;
}
.cert-logo small{
  display:block;
  font-weight:500;
  font-size:.58em;
  letter-spacing:.44em;
  color:var(--dorado);
  margin-top:3px;
}
.cert-tipo{
  font-size:clamp(6.5px, .95vw, 9.5px);
  font-weight:600;
  letter-spacing:.36em;
  text-transform:uppercase;
  color:var(--humo);
  margin:3.4% 0 2%;
  text-shadow:0 1px 0 rgba(255,255,255,.8);
}
.cert-nombre{
  font-family:var(--serif);
  font-style:italic;
  font-weight:500;
  font-size:clamp(23px, 4.1vw, 44px);
  color:var(--grafito);
  line-height:1.08;
  text-shadow:0 1px 0 rgba(255,255,255,.7);
}
.cert-linea{
  width:32%;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--dorado), transparent);
  margin:2.6% 0;
}
.cert-texto{
  font-size:clamp(7.5px, 1vw, 10.5px);
  font-weight:400;
  line-height:1.75;
  color:#5C564E;
  max-width:42ch;
}
.cert-pie{
  margin-top:auto;
  width:100%;
  display:flex; justify-content:space-between; align-items:flex-end;
  padding:0 3%;
}
.cert-firma{ text-align:left; }
.cert-firma svg{
  display:block;
  width:clamp(74px, 11vw, 118px);
  height:auto;
  margin-bottom:2px;
  margin-left:4px;
  transform:rotate(-2deg);
}
.cert-firma s{
  display:block; text-decoration:none;
  font-size:clamp(5.5px,.78vw,8px);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--humo);
  border-top:1px solid var(--linea);
  padding-top:6px;
}
.cert-sello{
  width:clamp(42px, 6.4vw, 66px);
  aspect-ratio:1;
  border-radius:50%;
  background:
    conic-gradient(from 210deg, #C99A34, #F3D07E 22%, #E8B84B 38%, #A87E28 58%, #F3D07E 78%, #C99A34);
  position:relative;
  box-shadow:
    0 10px 24px -6px rgba(168,126,40,.55),
    inset 0 2px 3px rgba(255,244,214,.9),
    inset 0 -3px 5px rgba(120,86,20,.5);
}
.cert-sello::before{
  content:"";
  position:absolute; inset:-6px;
  border-radius:50%;
  border:1px dashed rgba(185,150,86,.5);
}
.cert-sello::after{
  content:"11/11";
  position:absolute; inset:12%;
  border-radius:50%;
  border:1px solid rgba(120,86,20,.4);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(7px,1vw,11px);
  color:#5A430F;
  text-shadow:0 1px 0 rgba(255,244,214,.7);
}
.cert-cintas{
  position:absolute;
  bottom:5%; right:9.2%;
  width:clamp(30px, 4.6vw, 48px);
  height:clamp(20px, 3vw, 32px);
  z-index:1;
}
.cert-cintas::before, .cert-cintas::after{
  content:"";
  position:absolute;
  top:0;
  width:38%; height:100%;
  background:linear-gradient(180deg, var(--borgona-2), var(--borgona));
  clip-path:polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%);
}
.cert-cintas::before{ left:8%; transform:rotate(-14deg); }
.cert-cintas::after{ right:8%; transform:rotate(14deg); }

/* ============================================================
   PANTALLA V · EL ACOMPAÑAMIENTO (panel)
   ============================================================ */
.escena-5{ padding:70px 0 150px; }
.escena-5 .pie-placa{ margin-bottom:70px; }
.ventana{
  width:min(920px, 100%);
  margin:0 auto;
  background:var(--sh-fondo);
  border:1px solid rgba(160,156,180,.16);
  border-radius:14px;
  overflow:hidden;
  font-family:var(--ui);
  box-shadow:
    0 80px 130px -30px rgba(0,0,0,.8),
    0 0 100px -20px rgba(232,184,75,.07),
    inset 0 1px 0 rgba(244,241,232,.05);
  position:relative;
}
.ventana-barra{
  display:flex; align-items:center; gap:16px;
  padding:13px 18px;
  background:rgba(27,26,35,.92);
  border-bottom:1px solid var(--sh-linea-2);
}
.semaforo{ display:flex; gap:7px; }
.semaforo i{ width:11px; height:11px; border-radius:50%; background:#34333F; box-shadow:inset 0 1px 1px rgba(255,255,255,.08); }
.semaforo i:nth-child(1){ background:#5E4247; }
.semaforo i:nth-child(2){ background:#5E5647; }
.semaforo i:nth-child(3){ background:#47594B; }
.ventana-titulo{
  flex:1; text-align:center;
  font-size:11px; color:var(--sh-tenue);
  letter-spacing:.04em;
}
.ventana-cuerpo{ padding:32px 38px 36px; color:var(--sh-texto); }
@media (max-width:640px){ .ventana-cuerpo{ padding:24px 18px; } }
.panel-cab{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:24px;
  gap:16px; flex-wrap:wrap;
}
.panel-cab h4{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(17px, 2.2vw, 23px);
}
.panel-cab h4 em{ font-style:italic; color:var(--marfil-2); }
.panel-cab .panel-meta{ display:flex; align-items:center; gap:16px; }
.panel-cab s{
  text-decoration:none;
  font-size:10px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--sh-tenue);
}
.panel-vivo{
  display:flex; align-items:center; gap:6px;
  font-size:10px;
  color:var(--sh-mute);
}
.panel-vivo::before{
  content:"";
  width:6px; height:6px; border-radius:50%;
  background:#7FA98A;
  box-shadow:0 0 8px rgba(127,169,138,.7);
  animation:vivo 2.4s ease-in-out infinite;
}
@keyframes vivo{ 0%,100%{ opacity:1; } 50%{ opacity:.4; } }

.tabla-cab, .tabla-fila{
  display:grid;
  grid-template-columns: 1.5fr 2fr 1.2fr .9fr;
  gap:18px;
  align-items:center;
}
@media (max-width:640px){
  .tabla-cab, .tabla-fila{ grid-template-columns:1.3fr 1.6fr .9fr; }
  .col-oculta{ display:none; }
}
.tabla-cab{
  font-size:9px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--sh-tenue);
  padding:0 10px 12px;
  border-bottom:1px solid var(--sh-linea);
}
.tabla-fila{
  padding:13px 10px;
  border-bottom:1px solid var(--sh-linea-2);
  font-size:12.5px;
  border-radius:8px;
}
.tabla-fila:last-child{ border-bottom:none; }
.tabla-fila.celebrada{
  background:linear-gradient(90deg, rgba(232,184,75,.05), transparent 70%);
  border-bottom-color:rgba(232,184,75,.14);
  position:relative;
}
.tabla-fila.celebrada::before{
  content:"";
  position:absolute;
  left:0; top:18%; bottom:18%;
  width:2px;
  border-radius:2px;
  background:var(--oro);
  box-shadow:0 0 10px rgba(232,184,75,.6);
}
.alumno{ display:flex; align-items:center; gap:11px; min-width:0; }
.alumno .retrato{ width:28px; height:28px; }
.alumno .retrato.r2{ background:linear-gradient(180deg, #3B4245 0%, #232B30 100%); }
.alumno .retrato.r2::before{ background:radial-gradient(circle at 38% 32%, #D9A87E 0%, #A8785A 48%, #6E4A3E 100%); }
.alumno .retrato.r2::after{ background:linear-gradient(180deg, #46656E, #2C4048); }
.alumno .retrato.r3{ background:linear-gradient(180deg, #4A4038 0%, #2E2822 100%); }
.alumno .retrato.r3::before{ background:radial-gradient(circle at 38% 32%, #F0CDA6 0%, #C89B70 46%, #8A5F4E 100%); }
.alumno .retrato.r3::after{ background:linear-gradient(180deg, #746A4E, #4A4432); }
.alumno .retrato.r4::before{ background:radial-gradient(circle at 38% 32%, #E2B58B 0%, #B08560 48%, #74503F 100%); }
.alumno .retrato.r4::after{ background:linear-gradient(180deg, #5E4552, #3E2E3A); }
.alumno b{ font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.barra-prog{
  height:5px;
  background:rgba(160,156,180,.13);
  border-radius:4px;
  overflow:hidden;
}
.barra-prog i{
  display:block; height:100%;
  background:rgba(244,241,232,.55);
  border-radius:4px;
}
.tabla-fila.celebrada .barra-prog i{
  background:linear-gradient(90deg, var(--oro), var(--oro-2));
  box-shadow:0 0 10px rgba(232,184,75,.35);
}
.tabla-fila s{ text-decoration:none; font-size:11px; color:var(--sh-mute); }
.tabla-fila s.hoy{ color:var(--sh-texto); }
.tabla-fila s.hoy::after{
  content:"";
  display:inline-block;
  width:5px; height:5px; border-radius:50%;
  background:#7FA98A;
  margin-left:7px;
  vertical-align:middle;
  animation:vivo 2.4s ease-in-out infinite;
}
.chip{
  justify-self:start;
  font-size:8.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  padding:5px 12px;
  border-radius:30px;
}
.chip.oro{
  color:var(--oro-2);
  background:rgba(232,184,75,.1);
  border:1px solid rgba(232,184,75,.4);
  box-shadow:0 0 14px -4px rgba(232,184,75,.5);
}
.chip.gris{
  color:var(--sh-mute);
  background:rgba(160,156,180,.06);
  border:1px solid rgba(160,156,180,.2);
}


/* ajustes de ritmo cinematográfico dentro del mundo oscuro */
.escena-1{ padding:90px 0 110px; }
.escena-2{ padding:40px 0 120px; }
.escena-3{ padding:50px 0 110px; }
.escena-4{ padding:50px 0 110px; }
.escena-5{ padding:50px 0 140px; }

/* ============================================================
   6 · LABORATORIO ORIGEN — transformaciones, no productos
   ============================================================ */
.laboratorio{
  position:relative;
  background:var(--papel);
  border-top:1px solid var(--linea);
  padding:150px 0 130px;
  overflow:hidden;
}
.laboratorio::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(ellipse 800px 520px at 12% 0%, rgba(216,196,154,.18), transparent 62%);
}
.laboratorio .contenedor{ position:relative; z-index:2; }
.lab-cab{ text-align:center; margin-bottom:84px; }
.lab-cab .etiqueta{ margin-bottom:38px; }
.lab-cab h2{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(30px, 4vw, 48px);
  line-height:1.25;
  color:var(--grafito);
  max-width:19ch;
  margin:0 auto 22px;
}
.lab-cab h2 em{ font-style:italic; color:var(--borgona); }
.lab-cab p{
  font-size:15px; font-weight:300; line-height:1.9;
  color:#5C564E;
  max-width:480px;
  margin:0 auto;
}
.lab-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:22px;
}
@media (max-width:840px){ .lab-grid{ grid-template-columns:1fr; } }
.lab-carta{
  display:flex; align-items:center; gap:30px;
  background:#FFFFFF;
  border:1px solid var(--linea);
  border-radius:10px;
  padding:30px 32px;
  transition:transform .4s ease, box-shadow .4s ease;
}
.lab-carta:hover{
  transform:translateY(-3px);
  box-shadow:0 26px 50px -20px rgba(60,45,30,.18);
}
/* viñeta mínima: un solo trazo por proyecto, en silencio */
.lab-vineta{
  width:88px; height:88px;
  flex-shrink:0;
  border-radius:10px;
  background:
    radial-gradient(ellipse 80% 60% at 30% 15%, rgba(232,184,75,.08), transparent 65%),
    linear-gradient(170deg, #201F29, var(--sh-fondo-2));
  border:1px solid rgba(160,156,180,.14);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  position:relative;
}
.lab-vineta svg{ width:56%; height:56%; }
.lab-texto{ min-width:0; }
.lab-texto h3{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(17px, 1.9vw, 21px);
  line-height:1.45;
  color:var(--grafito);
  margin-bottom:12px;
}
.lab-texto h3 em{ font-style:italic; color:var(--borgona); }
.lab-texto small{
  font-size:10px; font-weight:600;
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--humo);
}
.lab-texto small b{ font-weight:600; color:var(--dorado); }

/* ============================================================
   PROTOTIPO · Guardianes · "Explorar transformación"
   Una hoja editorial que se despliega bajo la colección.
   Sin interfaces, sin capturas: sólo el cambio de paradigma.
   Usa únicamente tokens existentes; sin colores ni sombras nuevos.
   ============================================================ */
.lab-explorar{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:16px;
  font-family:var(--sans);
  font-size:10.5px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--borgona);
  opacity:.78;
  transition:opacity .5s ease, gap .5s ease;
}
.lab-explorar i{ font-style:normal; color:var(--dorado); transition:transform .5s ease; }
.lab-carta--interactiva{ cursor:pointer; }
.lab-carta--interactiva:hover .lab-explorar{ opacity:1; gap:13px; }
.lab-carta--interactiva:hover .lab-explorar i{ transform:translateX(3px); }
.lab-carta--interactiva:focus-visible{ outline:2px solid var(--dorado); outline-offset:4px; }
.lab-carta--activa{ border-color:var(--dorado-suave); grid-column:1 / -1; scroll-margin-top:96px; }
.lab-explorar--cerrar{ display:none; color:var(--humo); }
.lab-carta--activa .lab-explorar--abrir{ display:none; }
.lab-carta--activa .lab-explorar--cerrar{ display:inline-flex; }

/* la hoja se despliega bajo su tarjeta, a lo ancho de la colección.
   Fuera del grid mientras está cerrada (no ocupa celda). */
.lab-hoja{
  display:none;
  grid-column:1 / -1;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:0fr;
  transition:grid-template-rows 1.05s cubic-bezier(.4,.02,.2,1);
  scroll-margin-top:96px;
}
.lab-hoja.montada{ display:grid; }
.lab-hoja.abierto{ grid-template-rows:1fr; }
.lab-hoja > .lab-hoja-wrap{ overflow:hidden; min-height:0; }
.lab-hoja-in{
  margin:26px auto 0;
  max-width:760px;
  background:var(--papel);
  border:1px solid var(--linea);
  border-radius:12px;
  padding:clamp(30px,5vw,58px) clamp(24px,5vw,60px);
}
.lh-kicker{
  font-family:var(--sans);
  font-size:10px; font-weight:600;
  letter-spacing:.3em; text-transform:uppercase;
  color:var(--dorado);
  margin-bottom:34px;
}
.lh-bloque{ margin-bottom:42px; }
.lh-rotulo{
  font-family:var(--sans);
  font-size:10px; font-weight:600;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--humo);
  margin-bottom:16px;
}
.lh-parrafo{
  font-family:var(--serif);
  font-size:clamp(17px,2.1vw,21px);
  line-height:1.65;
  color:var(--grafito);
}
.lh-parrafo--enfasis{ font-style:italic; color:var(--borgona); }

/* Antes → Después · editorial, sin cajas llamativas */
.lh-cambio{ display:flex; flex-direction:column; gap:16px; align-items:flex-start; }
.lh-lado-t{
  display:block;
  font-family:var(--sans);
  font-size:10px; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
  color:var(--humo);
  margin-bottom:8px;
}
.lh-lado--despues .lh-lado-t{ color:var(--borgona); }
.lh-lado ul{ list-style:none; }
.lh-lado li{
  font-family:var(--serif);
  font-size:clamp(16px,1.9vw,19px);
  line-height:1.85;
  color:var(--grafito);
  position:relative; padding-left:20px;
}
.lh-lado li::before{ content:"·"; position:absolute; left:5px; color:var(--dorado); }
.lh-lado--despues li{ color:var(--borgona); }
.lh-flecha{ font-size:20px; color:var(--dorado); line-height:1; padding-left:3px; }

/* cápsulas editoriales — no chips SaaS, no botones */
.lh-capsulas{ display:flex; flex-wrap:wrap; gap:10px 12px; }
.lh-capsulas span{
  font-family:var(--serif);
  font-style:italic;
  font-size:15px;
  color:var(--grafito);
  padding:7px 18px;
  border:1px solid var(--linea);
  border-radius:40px;
}
.lh-nota{
  margin-top:16px;
  font-family:var(--sans);
  font-size:12px; font-weight:300;
  color:var(--humo);
}

/* Lo que aprendimos — semilla de una futura Bitácora */
.lh-reflexion{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(18px,2.3vw,23px);
  line-height:1.6;
  color:var(--grafito);
  border-left:2px solid var(--dorado);
  padding-left:22px;
}
/* clasificación curatorial bajo el nº de archivo */
.lh-clasif{
  font-family:var(--sans);
  font-size:11px; font-weight:400;
  letter-spacing:.04em;
  color:var(--humo);
  margin-top:-22px;   /* se acerca al "Archivo ORIGEN · Pieza 001" */
  margin-bottom:36px;
}

/* el puente: la reflexión desemboca en la conversación */
.lh-puente{
  margin-top:8px;
  padding-top:36px;
  border-top:1px solid var(--linea);
}
.lh-puente-texto{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(17px,2.1vw,21px);
  line-height:1.65;
  color:var(--borgona);
  max-width:52ch;
  margin-bottom:24px;
}
.lh-puente-link{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--sans);
  font-size:12px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--borgona);
  text-decoration:none;
  transition:gap .4s ease;
}
.lh-puente-link i{ font-style:normal; color:var(--dorado); transition:transform .4s ease; }
.lh-puente-link:hover{ gap:15px; }
.lh-puente-link:hover i{ transform:translateX(3px); }

/* firma curatorial */
.lh-firma{
  margin-top:44px;
  font-family:var(--sans);
  font-size:10px; font-weight:600;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--humo);
  opacity:.7;
}

/* revelado escalonado · lento y silencioso, sin rebotes */
.lab-hoja .bloque{ opacity:0; transform:translateY(10px); }
.lab-hoja.revelando .bloque{ opacity:1; transform:none; transition:opacity .9s ease, transform .9s ease; }
.lab-hoja.revelando .lh-kicker{ transition-delay:.15s; }
.lab-hoja.revelando .lh-clasif{ transition-delay:.28s; }
.lab-hoja.revelando .lh-bloque[data-r="1"]{ transition-delay:.46s; }
.lab-hoja.revelando .lh-bloque[data-r="2"]{ transition-delay:.68s; }
.lab-hoja.revelando .lh-bloque[data-r="3"]{ transition-delay:.90s; }
.lab-hoja.revelando .lh-bloque[data-r="4"]{ transition-delay:1.12s; }
.lab-hoja.revelando .lh-bloque[data-r="5"]{ transition-delay:1.34s; }
.lab-hoja.revelando .lh-puente{ transition-delay:1.58s; }
.lab-hoja.revelando .lh-firma{ transition-delay:1.78s; }

@media (prefers-reduced-motion:reduce){
  .lab-hoja{ transition:none; }
  .lab-hoja .bloque{ opacity:1; transform:none; transition:none; }
  .lab-explorar, .lab-explorar i{ transition:none; }
}

/* ============================================================
   7 · EL LUGAR RESERVADO — una historia esperando
   ============================================================ */
.lab-carta.reservada{
  background:linear-gradient(170deg, #FFFFFF, #FDFBF5);
  border:1px dashed rgba(185,150,86,.55);
  position:relative;
}
.lab-carta.reservada:hover{
  box-shadow:0 26px 56px -20px rgba(185,150,86,.28);
}
.lab-vineta.vacia{
  background:
    radial-gradient(ellipse at center, rgba(232,184,75,.1), transparent 68%),
    linear-gradient(170deg, #23222C, var(--sh-fondo-2));
}
.lab-vineta.vacia i{
  width:9px; height:9px;
  border-radius:50%;
  background:var(--oro-2);
  box-shadow:0 0 16px 5px rgba(232,184,75,.4), 0 0 46px 14px rgba(232,184,75,.12);
  animation:respira 4s ease-in-out infinite;
}
@keyframes respira{
  0%,100%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(1.35); opacity:.75; }
}
/* la frase a medio escribir, con su cursor */
.cursor-tinta{
  display:inline-block;
  width:2px; height:.95em;
  background:var(--borgona);
  vertical-align:-0.12em;
  margin-left:5px;
  animation:parpadeo 1.15s steps(1) infinite;
}
@keyframes parpadeo{ 0%,55%{ opacity:1; } 56%,100%{ opacity:0; } }

/* ------------------------------------------------------------
   ESTRUCTURA FUTURA · "La voz del cliente"
   Preparada, sin uso todavía. Cada caso podrá incorporar un
   testimonio añadiendo un bloque .lab-voz dentro de su .lab-texto
   (ver plantilla en el HTML del Laboratorio). No altera la
   arquitectura: la tarjeta ya lo soporta.
   ------------------------------------------------------------ */
.lab-voz{
  margin-top:16px;
  padding-top:15px;
  border-top:1px solid var(--linea);
}
.lab-voz blockquote{
  font-family:var(--serif);
  font-style:italic;
  font-size:13.5px;
  line-height:1.62;
  color:#5C564E;
  margin:0 0 9px;
}
.lab-voz cite{
  display:block;
  font-style:normal;
  font-size:9.5px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--humo);
}
.lab-voz cite b{ color:var(--dorado); font-weight:600; }

/* ============================================================
   8 · LA INVITACIÓN — una conversación tranquila
   ============================================================ */
.invitacion{
  position:relative;
  background:var(--crema);
  border-top:1px solid var(--linea);
  padding:170px 0 160px;
  text-align:center;
  overflow:hidden;
}
.invitacion::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(ellipse 800px 500px at 50% 110%, rgba(216,196,154,.26), transparent 65%);
}
.invitacion .contenedor{ position:relative; z-index:2; }
.invitacion .etiqueta{ margin-bottom:46px; }
.invitacion h2{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(36px, 5.2vw, 64px);
  line-height:1.16;
  color:var(--grafito);
  max-width:15ch;
  margin:0 auto 28px;
}
.invitacion h2 em{ font-style:italic; color:var(--borgona); }
.invitacion > .contenedor > p{
  font-size:15.5px; font-weight:300; line-height:1.9;
  color:#5C564E;
  max-width:460px;
  margin:0 auto 54px;
}
.invitacion-nota{
  display:flex; justify-content:center; gap:30px;
  margin-top:34px;
  flex-wrap:wrap;
}
.invitacion-nota span{
  font-size:10.5px; font-weight:500;
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--humo);
}
.colofon{
  background:var(--crema);
  border-top:1px solid var(--linea);
  padding:40px 0;
}
.colofon .contenedor{
  display:flex; justify-content:space-between; align-items:center;
  gap:20px; flex-wrap:wrap;
}
.colofon small{
  font-size:10.5px; font-weight:500;
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--humo);
}

/* ============================================================
   INJERTO · CASO GUARDIANES (película) + ajustes de destellos
   ============================================================ */

/* ============================================================
   ORIGEN STUDIO · CASO INSIGNIA · LA HISTORIA
   Un encargo común → una pregunta distinta → consecuencias
   inevitables. Guardianes es el ejemplo; el protagonista es
   la forma de pensar. Sin recetas: solo destellos de fondo.
   ============================================================ */

:root{
  --crema:       #F6F3ED;
  --papel:       #FBF9F4;
  --grafito:     #2B2B2B;
  --borgona:     #5A1E2A;
  --borgona-2:   #7A2E3D;
  --dorado:      #B99656;
  --dorado-suave:#D8C49A;
  --linea:       #E4DCCB;
  --humo:        #8B8578;

  --sh-fondo:    #121118;
  --sh-fondo-2:  #0D0C12;
  --sh-panel:    #1B1A23;
  --sh-linea:    rgba(160,156,180,.14);
  --sh-linea-2:  rgba(160,156,180,.08);
  --sh-texto:    #F2F0F7;
  --sh-mute:     #9B98AC;
  --sh-tenue:    #6D6A7E;

  --marfil:      #F4F1E8;
  --marfil-2:    #E4E0D3;

  --oro:         #E8B84B;
  --oro-2:       #F3D07E;
  --oro-tinta:   #33260A;

  /* paleta real de Guardianes: cuaderno de campo
     verdes naturales, azul agua, tierra y beige papel */
  --verde:       #7EA26B;
  --verde-tinta: #4F6B49;
  --agua:        #7FA6A3;
  /* tokens oficiales de la app (Bitácora del Explorador) */
  --laton:       #C9A227;
  --bosque:      #3B6B26;
  --bosque-osc:  #223F17;
  --pergamino:   #F4ECD8;
  --arcilla:     #C2683B;
  --gtinta:      #3A3026;
  --gserif: "Fraunces", Georgia, serif;
  --gsans:  "DM Sans", system-ui, sans-serif;

  --serif: "Playfair Display", Georgia, serif;
  --sans:  "Montserrat", -apple-system, sans-serif;
  --ui:    "Inter", -apple-system, "Segoe UI", sans-serif;
  --ancho: 1180px;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  background:var(--crema);
  color:var(--grafito);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none; z-index:80;
  opacity:.032;
  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='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.contenedor{ max-width:var(--ancho); margin:0 auto; padding:0 48px; }
@media (max-width:720px){ .contenedor{ padding:0 20px; } }

.etiqueta{
  font-size:11px; font-weight:600;
  letter-spacing:.32em; text-transform:uppercase;
  color:var(--dorado);
  display:inline-flex; align-items:center; gap:14px;
}
.etiqueta::before, .etiqueta::after{
  content:""; width:36px; height:1px;
  background:currentColor; opacity:.6;
}

.revela{
  opacity:0; transform:translateY(30px);
  transition:opacity 1.2s cubic-bezier(.22,.61,.36,1), transform 1.2s cubic-bezier(.22,.61,.36,1);
}
.revela.visible{ opacity:1; transform:none; }
.revela[data-d="1"]{ transition-delay:.14s; }
.revela[data-d="2"]{ transition-delay:.28s; }
@media (prefers-reduced-motion:reduce){
  .revela{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
  *{ animation:none !important; }
}

/* ============================================================
   NAV
   ============================================================ */
nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  background:rgba(246,243,237,.86);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:background .5s ease, border-color .4s ease;
}
nav.oscura{
  background:rgba(13,12,18,.78);
  border-bottom-color:rgba(160,156,180,.12);
}
nav.con-linea{ border-bottom-color:var(--linea); }
.nav-in{
  max-width:var(--ancho); margin:0 auto; padding:18px 48px;
  display:flex; align-items:center; justify-content:space-between;
}
@media (max-width:720px){ .nav-in{ padding:15px 24px; } }
.marca{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.marca-nombre{
  font-family:var(--serif); font-weight:600; font-size:18px;
  letter-spacing:.22em; color:var(--borgona);
  transition:color .5s ease;
}
nav.oscura .marca-nombre{ color:var(--dorado-suave); }
.marca-nombre span{
  font-family:var(--sans); font-weight:500; font-size:9px;
  letter-spacing:.42em; color:var(--dorado); display:block; margin-top:1px;
}
.nav-num{
  font-family:var(--serif); font-style:italic;
  font-size:14px; color:var(--humo); letter-spacing:.06em;
  transition:color .5s ease;
}
nav.oscura .nav-num{ color:rgba(242,240,247,.5); }

/* ============================================================
   APERTURA · EL MÉTODO SE PRESENTA
   ============================================================ */
.apertura{
  position:relative;
  padding:180px 0 100px;
  text-align:center;
  overflow:hidden;
}
.apertura::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(ellipse 900px 560px at 50% -10%, rgba(216,196,154,.26), transparent 62%);
}
.apertura .contenedor{ position:relative; z-index:2; }
.apertura .etiqueta{ color:var(--borgona); margin-bottom:40px; }
.apertura h2{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(40px, 6vw, 80px);
  line-height:1.1; letter-spacing:-.012em;
  color:var(--grafito);
  max-width:15ch;
  margin:0 auto 28px;
}
.apertura h2 em{ font-style:italic; color:var(--borgona); }
.apertura-deck{
  font-size:15.5px; font-weight:300; line-height:1.85;
  color:#5C564E;
  max-width:560px;
  margin:0 auto;
}
.apertura-deck b{ font-weight:500; color:var(--grafito); }

/* ============================================================
   EL MUNDO OSCURO · donde el método se demuestra
   ============================================================ */
.mundo{
  position:relative;
  background:
    radial-gradient(ellipse 1200px 600px at 50% 0%, rgba(232,184,75,.05), transparent 55%),
    linear-gradient(180deg, #191821 0%, var(--sh-fondo) 22%, var(--sh-fondo-2) 100%);
  overflow:hidden;
}
.mundo::before{
  content:"";
  position:absolute; top:0; left:0; right:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(232,184,75,.3), transparent);
}
.mundo::after{
  content:"";
  position:absolute; inset:0;
  background-image:
    radial-gradient(1.2px 1.2px at 16% 6%, rgba(244,241,232,.14), transparent 100%),
    radial-gradient(1px 1px at 78% 4%, rgba(244,241,232,.12), transparent 100%),
    radial-gradient(1.2px 1.2px at 90% 20%, rgba(244,241,232,.08), transparent 100%),
    radial-gradient(1px 1px at 6% 36%, rgba(244,241,232,.08), transparent 100%),
    radial-gradient(1.2px 1.2px at 62% 52%, rgba(244,241,232,.06), transparent 100%),
    radial-gradient(1px 1px at 30% 74%, rgba(244,241,232,.06), transparent 100%),
    radial-gradient(1.2px 1.2px at 84% 90%, rgba(244,241,232,.07), transparent 100%);
  pointer-events:none;
}
.mundo > *{ position:relative; z-index:2; }

/* ---- el riel del método: siempre presente, el oro marca lo que ocurre ---- */
.riel-metodo{
  position:sticky;
  top:76px;
  z-index:30;
  display:flex; justify-content:center;
  padding:18px 0 14px;
  background:linear-gradient(180deg, rgba(13,12,18,.88), rgba(13,12,18,.72) 70%, transparent);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.riel-in{
  display:flex; align-items:center;
  gap:0;
}
.riel-paso{
  display:flex; align-items:center;
}
.riel-punto{
  position:relative;
  width:26px; height:26px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--ui);
  font-size:9px; font-weight:600;
  background:transparent;
  border:1px solid var(--sh-linea);
  color:var(--sh-tenue);
  transition:all .5s ease;
}
.riel-paso span{
  position:absolute;
  top:32px;
  left:50%; transform:translateX(-50%);
  font-family:var(--ui);
  font-size:8.5px; font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--sh-tenue);
  white-space:nowrap;
  opacity:0;
  transition:opacity .5s ease;
}
.riel-union{ width:clamp(16px, 4vw, 46px); height:1px; background:var(--sh-linea); transition:background .5s ease; }
.riel-paso.hecho .riel-punto{
  background:rgba(244,241,232,.08);
  border-color:rgba(244,241,232,.32);
  color:var(--marfil);
}
.riel-paso.hecho + .riel-union,
.riel-paso.hecho .riel-union{ background:rgba(244,241,232,.28); }
.riel-paso.activo .riel-punto{
  background:radial-gradient(circle at 34% 28%, var(--oro-2), var(--oro) 74%);
  border-color:transparent;
  color:var(--oro-tinta);
  box-shadow:0 0 0 5px rgba(232,184,75,.12), 0 0 20px rgba(232,184,75,.55);
}
.riel-paso.activo span{ opacity:1; color:var(--oro-2); }
@media (max-width:720px){
  .riel-metodo{ top:62px; }
  .riel-paso span{ display:none; }
}

/* ---- estructura de cada paso ---- */
.paso{
  padding:110px 0 130px;
  scroll-margin-top:140px;
}
.paso-cab{
  text-align:center;
  max-width:760px;
  margin:0 auto 76px;
}
.paso-num{
  font-family:var(--serif);
  font-style:italic;
  font-size:15px;
  color:var(--sh-tenue);
  letter-spacing:.1em;
  margin-bottom:26px;
}
.paso-num b{ color:var(--oro-2); font-weight:500; }
.paso-cab h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(30px, 4.6vw, 56px);
  line-height:1.25;
  color:var(--crema);
  margin-bottom:24px;
}
.paso-cab h2 em{ font-style:italic; color:var(--oro-2); }
.paso-pregunta{
  font-family:var(--ui);
  font-size:12px; font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--sh-tenue);
}
/* la doble voz: la evidencia habla en segundo plano */
.evidencia-linea{
  display:flex; align-items:baseline; justify-content:center;
  gap:12px;
  margin-top:56px;
  flex-wrap:wrap;
  text-align:center;
}
.evidencia-linea small{
  font-family:var(--ui);
  font-size:10px; font-weight:600;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--verde);
}
.evidencia-linea p{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(15px, 1.8vw, 19px);
  line-height:1.6;
  color:rgba(242,240,247,.72);
  max-width:52ch;
}

/* ============================================================
   EVIDENCIAS · PASO 01 — EL ORIGEN (solo territorio y luz)
   ============================================================ */
.ev-territorio{
  position:relative;
  max-width:900px;
  margin:0 auto;
  height:340px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(160,156,180,.12);
  background:
    radial-gradient(ellipse 90% 70% at 50% 108%, rgba(126,162,107,.16), transparent 62%),
    radial-gradient(ellipse 70% 60% at 72% 0%, rgba(232,184,75,.1), transparent 60%),
    linear-gradient(180deg, #1B1A24 0%, #14131C 100%);
  box-shadow:0 60px 110px -30px rgba(0,0,0,.7), inset 0 0 80px rgba(6,5,10,.5);
}
@media (max-width:720px){ .ev-territorio{ height:280px; } }
.ev-territorio svg{ position:absolute; inset:0; width:100%; height:100%; }
/* amanecer sobre las montañas */
.ev-territorio .sol{
  position:absolute;
  top:24%; right:24%;
  width:11px; height:11px;
  border-radius:50%;
  background:var(--oro-2);
  box-shadow:0 0 26px 8px rgba(232,184,75,.4), 0 0 70px 26px rgba(232,184,75,.12);
}
.ev-territorio figcaption{
  position:absolute;
  left:50%; bottom:8%;
  transform:translateX(-50%);
  width:max-content;
  max-width:88%;
  text-align:center;
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(14px, 1.8vw, 18px);
  color:rgba(246,243,237,.95);
  background:rgba(9,8,13,.55);
  border-radius:6px;
  padding:9px 20px;
  backdrop-filter:blur(3px);
}

/* ============================================================
   PASO 02 — LA TRANSFORMACIÓN (tipográfica, sin producto)
   ============================================================ */
.ev-cambio{
  max-width:820px;
  margin:0 auto;
  display:flex; flex-direction:column;
  align-items:center;
  gap:34px;
  text-align:center;
}
.ev-cambio .antes, .ev-cambio .despues{
  font-family:var(--serif);
  font-size:clamp(20px, 3vw, 34px);
  line-height:1.45;
}
.ev-cambio .antes{ color:var(--sh-tenue); font-style:italic; }
.ev-cambio .despues{ color:var(--crema); }
.ev-cambio .despues em{ font-style:italic; color:var(--oro-2); }
.ev-flecha{
  width:1px; height:52px;
  background:linear-gradient(180deg, var(--sh-tenue), var(--oro));
  position:relative;
}
.ev-flecha::after{
  content:"";
  position:absolute;
  bottom:-1px; left:50%;
  transform:translateX(-50%) rotate(45deg);
  width:7px; height:7px;
  border-right:1px solid var(--oro);
  border-bottom:1px solid var(--oro);
}

/* ============================================================
   PASO 03 — LA EXPERIENCIA (el sistema, sin una sola pantalla)
   ============================================================ */
.ev-sistema{
  position:relative;
  max-width:960px;
  margin:0 auto;
}
.ev-mapa{
  position:relative;
  height:380px;
  border-radius:16px;
  border:1px solid rgba(160,156,180,.12);
  background:
    radial-gradient(ellipse 80% 60% at 30% 100%, rgba(126,162,107,.12), transparent 62%),
    linear-gradient(180deg, #1A1923 0%, #131219 100%);
  box-shadow:0 60px 110px -30px rgba(0,0,0,.7), inset 0 0 80px rgba(6,5,10,.5);
  overflow:hidden;
  margin-bottom:44px;
}
@media (max-width:720px){ .ev-mapa{ height:320px; } }
/* curvas de nivel: el territorio como plano de diseño */
.ev-mapa .curvas{ position:absolute; inset:0; width:100%; height:100%; opacity:.5; }
/* el sendero de rutas con la gramática de progresión de ORIGEN */
.ruta-nodo{
  position:absolute;
  width:clamp(38px, 5vw, 52px);
  aspect-ratio:1;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--ui);
  font-size:clamp(9px, 1.1vw, 12px);
  font-weight:600;
  transform:translate(-50%,-50%);
}
.ruta-nodo span{
  position:absolute;
  top:calc(100% + 8px);
  left:50%; transform:translateX(-50%);
  font-size:clamp(7.5px,.9vw,9.5px);
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--sh-tenue);
  white-space:nowrap;
}
.ruta-nodo.hecha{
  background:linear-gradient(180deg, rgba(244,241,232,.1), rgba(244,241,232,.04));
  border:1.5px solid rgba(244,241,232,.34);
  color:var(--marfil);
}
.ruta-nodo.hecha span{ color:rgba(242,240,247,.5); }
/* la ruta conquistada: el oro del logro */
.ruta-nodo.conquistada{
  background:radial-gradient(circle at 32% 26%, var(--oro-2) 0%, var(--oro) 62%, #C99A34 100%);
  color:var(--oro-tinta);
  box-shadow:0 0 0 10px rgba(232,184,75,.08), 0 0 60px rgba(232,184,75,.4), inset 0 2px 3px rgba(255,241,205,.8), inset 0 -3px 5px rgba(140,100,25,.4);
}
.ruta-nodo.conquistada span{ color:var(--oro-2); }
.ruta-nodo.porvenir{
  background:rgba(27,26,35,.85);
  border:1.5px solid var(--sh-linea);
  color:var(--sh-tenue);
  opacity:.65;
}
/* los seis pilares reales del programa */
.ev-pilares{
  display:flex; justify-content:center;
  gap:10px 14px;
  flex-wrap:wrap;
}
.ev-pilares span{
  font-family:var(--ui);
  font-size:10.5px; font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--sh-mute);
  border:1px solid var(--sh-linea);
  border-radius:30px;
  padding:8px 16px;
}

/* ============================================================
   PASO 04 — EL MUNDO (pasaporte, insignias, huellas de uso)
   ============================================================ */
.ev-mundo{
  position:relative;
  display:flex; justify-content:center; align-items:center;
  gap:clamp(24px, 5vw, 60px);
  max-width:940px;
  margin:0 auto;
  flex-wrap:wrap;
}
/* el pasaporte: papel en el mundo oscuro, como el certificado */
.pasaporte{
  position:relative;
  width:min(340px, 78vw);
  aspect-ratio:3/4.1;
  background:linear-gradient(168deg, #FBF6E8 0%, var(--pergamino) 55%, #EFE4CC 100%);
  border-radius:6px 12px 12px 6px;
  border-left:6px solid var(--bosque-osc);
  box-shadow:
    0 80px 120px -30px rgba(0,0,0,.75),
    0 0 80px -10px rgba(232,184,75,.14),
    inset 0 1px 0 rgba(255,255,255,.9);
  padding:9% 10%;
  transform:rotate(-2.5deg);
  overflow:hidden;
}
.pasaporte .fibra{
  position:absolute; inset:0;
  opacity:.32;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.93  0 0 0 0 0.9  0 0 0 0 0.82  0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23p)'/%3E%3C/svg%3E");
  pointer-events:none;
}
.pasaporte > *{ position:relative; }
.pasa-tipo{
  font-family:var(--sans);
  font-size:clamp(7px, 1vw, 9.5px);
  font-weight:600;
  letter-spacing:.36em;
  text-transform:uppercase;
  color:var(--humo);
  margin-bottom:5%;
  text-shadow:0 1px 0 rgba(255,255,255,.8);
}
.pasa-titulo{
  font-family:var(--gserif);
  font-weight:500;
  font-size:clamp(17px, 2.4vw, 25px);
  line-height:1.2;
  color:var(--grafito);
  margin-bottom:2%;
}
.pasa-titulo em{ font-style:italic; color:var(--bosque); }
.pasa-sub{
  font-size:clamp(8px, 1vw, 10.5px);
  color:#6B6558;
  margin-bottom:9%;
}
/* la página de sellos: la huella humana */
.pasa-sellos{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10%;
  margin-bottom:9%;
}
.sello-celda{
  aspect-ratio:1;
  border:1px dashed rgba(139,133,120,.5);
  border-radius:8px;
  position:relative;
  display:flex; align-items:center; justify-content:center;
}
/* sello estampado: tinta imperfecta, girada */
.sello-tinta{
  width:78%;
  aspect-ratio:1;
  border-radius:50%;
  border:2px solid rgba(194,104,59,.7);
  position:relative;
  transform:rotate(-11deg);
  opacity:.85;
}
.sello-tinta::before{
  content:"";
  position:absolute; inset:14%;
  border-radius:50%;
  border:1px solid rgba(194,104,59,.5);
}
.sello-tinta::after{
  content:"R·01";
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--sans);
  font-size:clamp(7px, .95vw, 10px);
  font-weight:600;
  letter-spacing:.1em;
  color:rgba(194,104,59,.85);
}
.sello-celda:nth-child(2) .sello-tinta{ transform:rotate(7deg); opacity:.75; }
.sello-celda:nth-child(2) .sello-tinta::after{ content:"R·02"; }
/* el sello dorado: la insignia recién ganada */
.sello-celda:nth-child(3) .sello-oro{
  width:82%;
  aspect-ratio:1;
  border-radius:50%;
  background:conic-gradient(from 210deg, #A8861C, #E6C75A 22%, #C9A227 38%, #8C6D14 58%, #E6C75A 78%, #A8861C);
  box-shadow:0 8px 18px -5px rgba(140,109,20,.5), inset 0 2px 3px rgba(255,244,214,.9), inset 0 -3px 5px rgba(110,84,12,.5);
  position:relative;
  transform:rotate(4deg);
}
.sello-celda:nth-child(3) .sello-oro::after{
  content:"✦";
  position:absolute; inset:12%;
  border-radius:50%;
  border:1px solid rgba(120,86,20,.4);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(8px,1vw,11px);
  color:#4A3A0C;
  text-shadow:0 1px 0 rgba(255,244,214,.7);
}
/* fecha escrita a mano */
.pasa-mano{
  display:flex; align-items:baseline; gap:10px;
}
.pasa-mano s{
  text-decoration:none;
  font-size:clamp(7px,.9vw,9px);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:#B4AB98;
}
.pasa-mano svg{ width:clamp(64px, 9vw, 92px); height:auto; transform:rotate(-1.5deg); }
/* esquina gastada */
.pasaporte::after{
  content:"";
  position:absolute;
  bottom:0; right:0;
  width:13%; aspect-ratio:1;
  background:linear-gradient(135deg, transparent 49%, #EDE6D4 50%, #DED5BF 100%);
  border-radius:0 0 12px 0;
}
/* la insignia física, suelta junto al pasaporte */
.insignia-suelta{
  width:clamp(90px, 12vw, 128px);
  aspect-ratio:1;
  border-radius:50%;
  background:
    radial-gradient(circle at 34% 28%, #2A3324, #1C231A 70%);
  border:3px solid rgba(126,162,107,.5);
  box-shadow:0 50px 80px -24px rgba(0,0,0,.8), inset 0 2px 4px rgba(244,241,232,.12);
  position:relative;
  transform:rotate(8deg);
  flex-shrink:0;
}
.insignia-suelta::before{
  content:"";
  position:absolute; inset:9%;
  border-radius:50%;
  border:1px solid rgba(216,196,154,.4);
}
.insignia-suelta svg{
  position:absolute; inset:22%;
  width:56%; height:56%;
}

/* ============================================================
   PASO 05 — EL VEHÍCULO (tríptico: sendero · papel · pantalla)
   ============================================================ */
.ev-triptico{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
  max-width:1020px;
  margin:0 auto 46px;
}
@media (max-width:820px){ .ev-triptico{ grid-template-columns:1fr; max-width:420px; } }
.tri-marco{
  position:relative;
  aspect-ratio:3/3.8;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(160,156,180,.14);
  box-shadow:0 46px 90px -28px rgba(0,0,0,.7), inset 0 0 60px rgba(6,5,10,.45);
}
.tri-marco figcaption{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:26px 18px 18px;
  text-align:center;
  background:linear-gradient(180deg, transparent, rgba(9,8,13,.78));
}
.tri-marco figcaption b{
  display:block;
  font-family:var(--serif);
  font-weight:500;
  font-size:16px;
  color:var(--crema);
  margin-bottom:4px;
}
.tri-marco figcaption s{
  display:block; text-decoration:none;
  font-family:var(--ui);
  font-size:9px; font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:rgba(242,240,247,.45);
}
/* 1 · el sendero */
.tri-sendero{
  background:
    radial-gradient(ellipse 90% 50% at 50% 0%, rgba(232,184,75,.12), transparent 60%),
    linear-gradient(180deg, #1E2119 0%, #141610 100%);
}
.tri-sendero svg{ position:absolute; inset:0; width:100%; height:100%; }
/* 2 · el papel */
.tri-papel{
  background:linear-gradient(180deg, #201F28, #14131C);
  display:flex; align-items:center; justify-content:center;
}
.tri-papel .mini-pasaporte{
  width:62%;
  aspect-ratio:3/4;
  background:linear-gradient(168deg, #FBF6E8, var(--pergamino));
  border-radius:4px 8px 8px 4px;
  border-left:4px solid var(--bosque-osc);
  box-shadow:0 30px 50px -18px rgba(0,0,0,.8);
  transform:rotate(-4deg);
  position:relative;
  padding:10%;
}
.tri-papel .mini-pasaporte i{
  display:block;
  height:5px;
  background:#E3DCC8;
  border-radius:3px;
  margin-bottom:9%;
}
.tri-papel .mini-pasaporte i:nth-child(1){ width:62%; background:#CFC6AC; }
.tri-papel .mini-pasaporte i:nth-child(2){ width:84%; }
.tri-papel .mini-pasaporte i:nth-child(3){ width:70%; }
.tri-papel .mini-sello{
  position:absolute;
  bottom:12%; right:12%;
  width:30%;
  aspect-ratio:1;
  border-radius:50%;
  border:2px solid rgba(194,104,59,.65);
  transform:rotate(-9deg);
}
/* 3 · la pantalla — vislumbre honesto, pendiente del ecosistema real */
.tri-pantalla{
  background:
    radial-gradient(ellipse 90% 50% at 50% 0%, rgba(126,162,107,.12), transparent 60%),
    linear-gradient(180deg, #191823, #121118);
  display:flex; align-items:center; justify-content:center;
}
.tri-pantalla .vislumbre{
  width:58%;
  aspect-ratio:9/16;
  border-radius:20px;
  background:linear-gradient(160deg, #3C3C45, #17171C 30%, #0C0C10);
  padding:5%;
  box-shadow:0 30px 50px -18px rgba(0,0,0,.85);
  transform:rotate(4deg);
  position:relative;
}
.tri-pantalla .vislumbre .v-int{
  height:100%;
  border-radius:14px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(ellipse 100% 40% at 50% -6%, rgba(59,107,38,.2), transparent 66%),
    var(--sh-fondo);
  padding:9% 9%;
  display:flex; flex-direction:column;
  font-family:var(--gsans);
}
/* el carnet real: degradado bosque, borde de latón */
.carnet{
  background:linear-gradient(160deg, var(--bosque-osc) 0%, var(--bosque) 100%);
  border:1.5px solid var(--laton);
  border-radius:12px;
  box-shadow:0 14px 30px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.14);
  padding:8% 9% 7%;
  position:relative;
  overflow:hidden;
}
.carnet::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 46%, rgba(255,255,255,.06) 50%, transparent 56%);
  pointer-events:none;
}
.carnet-banda{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:8%;
}
.carnet-banda s{
  text-decoration:none;
  font-size:clamp(4.5px,.58vw,6.5px);
  font-weight:700;
  letter-spacing:.16em;
  color:rgba(255,253,247,.85);
}
.carnet-banda img{ width:clamp(13px,1.8vw,19px); flex-shrink:0; }
.carnet-titular{
  display:flex; align-items:center; gap:8%;
  margin-bottom:8%;
}
.carnet-avatar{
  width:clamp(24px,3.4vw,38px);
  aspect-ratio:1;
  border-radius:50%;
  border:2px solid var(--laton);
  background-color:#1B3212;
  background-size:76%;
  background-position:center;
  background-repeat:no-repeat;
  flex-shrink:0;
  box-shadow:0 3px 8px rgba(0,0,0,.4);
}
.carnet-tit-info{ min-width:0; }
.carnet-tit-info small{
  display:block;
  font-size:clamp(4px,.52vw,6px);
  font-weight:700;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:rgba(255,253,247,.55);
  margin-bottom:2px;
}
.carnet-tit-info b{
  display:block;
  font-family:var(--gserif);
  font-weight:600;
  font-size:clamp(7.5px,1vw,11.5px);
  color:#FFFDF7;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.carnet-pill{
  display:inline-block;
  margin-top:4px;
  background:var(--laton);
  color:var(--bosque-osc);
  border-radius:999px;
  padding:2px 9px;
  font-size:clamp(4.5px,.6vw,7px);
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 2px 6px rgba(0,0,0,.3);
}
.carnet-pie{
  display:flex; justify-content:space-between;
  background:rgba(10,20,6,.45);
  border-radius:7px;
  padding:4.5% 7%;
  font-size:clamp(4px,.55vw,6px);
  letter-spacing:.1em;
  color:rgba(255,253,247,.8);
}
/* próximo destino: progreso por asistencias (verde → ok) */
.cd-destino{ margin-top:9%; }
.cd-destino s{
  text-decoration:none;
  display:flex; justify-content:space-between;
  font-size:clamp(4.5px,.6vw,6.5px);
  color:var(--sh-mute);
  margin-bottom:5px;
}
.cd-destino s b{ font-weight:600; color:var(--sh-texto); }
.cd-barra{
  height:4px;
  background:rgba(160,156,180,.15);
  border-radius:3px;
  overflow:hidden;
}
.cd-barra i{
  display:block; height:100%; width:58%;
  background:linear-gradient(90deg, var(--bosque), #2E7D4F);
  border-radius:3px;
}
/* medallones de reconocimiento: radial latón, como en la app */
.cd-medallones{
  display:flex; align-items:center; gap:7%;
  margin-top:9%;
}
.cd-medallones i{
  width:clamp(12px,1.7vw,18px);
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle at 32% 28%, #E6C75A, var(--laton) 72%);
  box-shadow:0 3px 8px rgba(0,0,0,.45), inset 0 1px 1px rgba(255,255,255,.5);
}
.cd-medallones i.porv{
  background:transparent;
  border:1px dashed rgba(201,162,39,.5);
  box-shadow:none;
}
.cd-medallones em{
  font-style:normal;
  font-size:clamp(4.5px,.58vw,6.5px);
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--oro-2);
}
.ev-vehiculo-nota{
  text-align:center;
  font-family:var(--ui);
  font-size:10.5px; font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--sh-tenue);
}

/* ============================================================
   PASO 06 — LA VIDA (RUTA 01: el paso que nadie ve)
   ============================================================ */
.ev-vida{
  position:relative;
  max-width:900px;
  margin:0 auto;
}
.ev-fotograma{
  position:relative;
  aspect-ratio:16/8.6;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(160,156,180,.14);
  box-shadow:0 70px 120px -30px rgba(0,0,0,.75), inset 0 0 80px rgba(6,5,10,.5);
  background:
    radial-gradient(ellipse 70% 60% at 30% 10%, rgba(232,184,75,.14), transparent 62%),
    radial-gradient(ellipse 90% 70% at 60% 110%, rgba(126,162,107,.14), transparent 62%),
    linear-gradient(180deg, #20231B 0%, #13150F 100%);
}
.ev-fotograma svg{ position:absolute; inset:0; width:100%; height:100%; }
.ev-fotograma img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* Banner Guardianes: pieza autocontenida (trae su propio marco/texto),
   por eso respeta su proporción y no lleva viñeta oscura encima. */
.ev-fotograma--banner{ aspect-ratio:2 / 1; background:none; border-color:rgba(160,156,180,.2); }
.ev-fotograma .vineta{
  position:absolute; inset:0;
  box-shadow:inset 0 0 70px rgba(5,6,4,.75);
  pointer-events:none;
}
.ev-sub{
  position:absolute;
  left:50%; bottom:14%;
  transform:translateX(-50%);
  width:max-content;
  max-width:88%;
  text-align:center;
  font-family:var(--ui);
  font-size:clamp(10px, 1.3vw, 13px);
  font-weight:500;
  color:rgba(242,240,247,.94);
  background:rgba(9,8,13,.58);
  border-radius:6px;
  padding:7px 16px;
  backdrop-filter:blur(3px);
}
.ev-ruta-chip{
  position:absolute;
  top:6%; left:5%;
  display:flex; align-items:center; gap:7px;
  font-family:var(--ui);
  font-size:10px; font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--oro-2);
  background:rgba(232,184,75,.1);
  border:1px solid rgba(232,184,75,.4);
  border-radius:30px;
  padding:7px 14px;
  backdrop-filter:blur(4px);
}
.ev-ruta-chip::before{
  content:"";
  width:5px; height:5px; border-radius:50%;
  background:var(--oro-2);
  box-shadow:0 0 8px rgba(232,184,75,.9);
}

/* ============================================================
   CIERRE · LA GENERALIZACIÓN
   ============================================================ */
.gen{
  padding:130px 0 150px;
  text-align:center;
}
.gen .etiqueta{ color:var(--oro); margin-bottom:50px; }
.gen h2{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(32px, 5vw, 62px);
  line-height:1.25;
  color:var(--crema);
  max-width:18ch;
  margin:0 auto 30px;
}
.gen h2 em{ font-style:italic; color:var(--oro-2); }
.gen p{
  font-size:15.5px; font-weight:300; line-height:1.9;
  color:rgba(242,240,247,.6);
  max-width:520px;
  margin:0 auto 60px;
}
/* el riel del método, una última vez: con un séptimo espacio esperando */
.gen-riel{
  display:flex; align-items:center; justify-content:center;
  margin:0 auto;
}
.gen-punto{
  width:30px; height:30px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--ui);
  font-size:10px; font-weight:600;
  background:rgba(244,241,232,.08);
  border:1px solid rgba(244,241,232,.32);
  color:var(--marfil);
  flex-shrink:0;
}
.gen-union{ width:clamp(14px,3.5vw,40px); height:1px; background:rgba(244,241,232,.28); }
.gen-punto.espera{
  background:transparent;
  border:1px dashed rgba(232,184,75,.55);
  color:transparent;
  position:relative;
}
.gen-punto.espera i{
  width:7px; height:7px;
  border-radius:50%;
  background:var(--oro-2);
  box-shadow:0 0 14px 4px rgba(232,184,75,.4);
  animation:respira 4s ease-in-out infinite;
}
@keyframes respira{
  0%,100%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(1.4); opacity:.7; }
}
.gen-riel + small{
  display:block;
  margin-top:22px;
  font-family:var(--ui);
  font-size:10px; font-weight:600;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--sh-tenue);
}

/* colofón en papel */
.colofon{
  background:var(--crema);
  border-top:1px solid var(--linea);
  padding:40px 0;
}
.colofon .contenedor{
  display:flex; justify-content:space-between; align-items:center;
  gap:20px; flex-wrap:wrap;
}
.colofon small{
  font-size:10.5px; font-weight:500;
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--humo);
}

/* ── imágenes reales de marca dentro de los marcos ── */
.ev-territorio .ev-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.ev-territorio .ev-velo{
  position:absolute; inset:0;
  box-shadow:inset 0 0 90px rgba(10,12,8,.5);
  background:linear-gradient(180deg, rgba(13,12,18,.08), rgba(13,12,18,.42));
  pointer-events:none;
}
.tri-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.tri-velo{
  position:absolute; inset:0;
  box-shadow:inset 0 0 60px rgba(8,10,6,.5);
  background:linear-gradient(180deg, rgba(13,12,18,.04), rgba(13,12,18,.28));
  pointer-events:none;
}
.pasa-logo{
  display:block;
  width:21%;
  margin-bottom:5%;
  filter:drop-shadow(0 3px 8px rgba(58,48,38,.25));
}
.medalla-real{
  width:clamp(104px, 14vw, 152px);
  flex-shrink:0;
  transform:rotate(8deg);
  filter:drop-shadow(0 44px 60px rgba(0,0,0,.75)) drop-shadow(0 0 40px rgba(201,162,39,.18));
}
.ev-pilares span.ahora{
  color:var(--oro-2);
  border-color:rgba(232,184,75,.5);
  box-shadow:0 0 18px -6px rgba(232,184,75,.5);
}

/* ── acto I: el documento ordinario ── */
.encargo-escena{
  display:flex; justify-content:center;
}
.encargo-doc{
  width:min(420px, 90%);
  background:#FFFFFF;
  border:1px solid #E6E0D2;
  border-radius:4px;
  box-shadow:0 50px 90px -26px rgba(0,0,0,.7);
  padding:30px 34px 26px;
  transform:rotate(-1.2deg);
  position:relative;
}
.encargo-doc::after{
  content:"";
  position:absolute; bottom:0; right:0;
  width:34px; height:34px;
  background:linear-gradient(135deg, transparent 49%, #F0EAD9 50%, #E0D8C4 100%);
  border-radius:0 0 4px 0;
}
.ed-cab{
  font-family:var(--ui);
  font-size:12px; font-weight:600;
  color:#6B6558;
  border-bottom:1px solid #EEE8DA;
  padding-bottom:12px; margin-bottom:6px;
}
.ed-fila{
  display:flex; justify-content:space-between; align-items:center;
  gap:18px;
  padding:11px 0;
  border-bottom:1px solid #F2EDE1;
}
.ed-fila:last-child{ border-bottom:none; }
.ed-fila b{
  font-family:var(--ui);
  font-weight:400;
  font-size:12.5px;
  color:#4A463F;
  white-space:nowrap;
}
.ed-fila i{
  display:block;
  height:6px;
  background:#EAE3D3;
  border-radius:3px;
}

/* ── acto II: la gran pregunta ── */
.gran-pregunta{
  position:relative;
  text-align:center;
  padding:40px 0 10px;
}
.gran-pregunta::before{
  content:"";
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:min(760px, 100%);
  aspect-ratio:2/1;
  background:radial-gradient(ellipse at center, rgba(232,184,75,.1), transparent 65%);
  pointer-events:none;
}
.gran-pregunta p{
  position:relative;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(30px, 5vw, 58px);
  line-height:1.32;
  color:var(--crema);
  max-width:22ch;
  margin:0 auto;
}
.gran-pregunta p em{
  font-style:italic;
  font-weight:500;
  color:var(--oro-2);
  position:relative;
}
.gran-pregunta p em::after{
  content:"";
  position:absolute;
  left:2%; right:2%; bottom:-.06em;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--oro), transparent);
  opacity:.7;
}

/* ── línea de apoyo bajo la cabecera de un acto ── */
.acto-lead{
  font-size:14.5px;
  font-weight:300;
  line-height:1.9;
  color:rgba(242,240,247,.58);
  max-width:520px;
  margin:22px auto 0;
}

/* ── la transferencia: la palabra que rota ── */
.rotador{ font-style:italic; color:var(--oro-2); }
.rotador span{
  display:inline-block;
  transition:opacity .45s ease, transform .45s ease;
}
.rotador span.saliendo{
  opacity:0;
  transform:translateY(10px);
}

/* ── la línea que antecede a la gran pregunta ── */
.pre-pregunta{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(17px, 2vw, 23px);
  line-height:1.6;
  color:rgba(242,240,247,.6);
  max-width:30ch;
  margin:0 auto;
}
/* ── susurros: la etiqueta respira antes de cada imagen ── */
.paso .pie-placa{ margin-bottom:54px; }

/* ── la apertura como escena ── */
.apertura-deck--linea{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(17px, 2vw, 22px);
  color:#6B6558;
}
/* ── línea de avance silenciosa ── */
.avance{
  width:min(440px, 64vw);
  height:1px;
  background:rgba(244,241,232,.12);
  position:relative;
  margin:6px 0 8px;
}
.avance i{
  position:absolute;
  left:0; top:0; bottom:0;
  width:0%;
  background:linear-gradient(90deg, rgba(244,241,232,.35), var(--oro));
}
.avance i::after{
  content:"";
  position:absolute;
  right:-2px; top:50%;
  transform:translateY(-50%);
  width:4px; height:4px;
  border-radius:50%;
  background:var(--oro-2);
  box-shadow:0 0 8px rgba(232,184,75,.8);
}
/* ── la bisagra: la pregunta ocupa la sala entera ── */
.bisagra{
  min-height:92svh;
  display:flex;
  align-items:center;
}
.bisagra .contenedor{ width:100%; }
.bisagra .pre-pregunta{ margin-bottom:64px; }
.bisagra .gran-pregunta{ padding:0; }
.bisagra .gran-pregunta p{
  font-size:clamp(32px, 5.8vw, 68px);
}
.bisagra .gran-pregunta::before{
  width:min(880px, 110%);
  background:radial-gradient(ellipse at center, rgba(232,184,75,.13), transparent 66%);
}
/* ── la huella: el sello, solo, en la oscuridad ── */
.paso--huella{ padding:70px 0 130px; }
.huella-escena{
  display:flex; justify-content:center;
  position:relative;
  padding:14px 0 6px;
}
.huella-escena::before{
  content:"";
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:min(420px, 80vw);
  aspect-ratio:1.8/1;
  background:radial-gradient(ellipse at center, rgba(232,184,75,.12), transparent 64%);
  pointer-events:none;
}
.huella-sello{
  position:relative;
  width:clamp(78px, 11vw, 112px);
  aspect-ratio:1;
  border-radius:50%;
  background:conic-gradient(from 210deg, #A8861C, #E6C75A 22%, #C9A227 38%, #8C6D14 58%, #E6C75A 78%, #A8861C);
  box-shadow:
    0 34px 60px -16px rgba(0,0,0,.75),
    0 0 60px -8px rgba(201,162,39,.35),
    inset 0 2px 3px rgba(255,244,214,.85),
    inset 0 -3px 6px rgba(110,84,12,.55);
  transform:rotate(-6deg);
}
.huella-sello::before{
  content:"";
  position:absolute; inset:-9px;
  border-radius:50%;
  border:1px dashed rgba(194,104,59,.5);
}
.huella-sello::after{
  content:"✦";
  position:absolute; inset:11%;
  border-radius:50%;
  border:1px solid rgba(110,84,12,.4);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(15px, 2vw, 20px);
  color:#4A3A0C;
  text-shadow:0 1px 0 rgba(255,244,214,.7);
}
/* ── el cierre: un punto que espera ── */
.gen h2{ margin-bottom:64px; }
.punto-espera{
  width:36px; height:36px;
  border-radius:50%;
  border:1px dashed rgba(232,184,75,.55);
  margin:0 auto;
  display:flex; align-items:center; justify-content:center;
}
.punto-espera i{
  width:8px; height:8px;
  border-radius:50%;
  background:var(--oro-2);
  box-shadow:0 0 16px 5px rgba(232,184,75,.4);
  animation:respira 4s ease-in-out infinite;
}

/* ── la expedición: marco vertical de cine ── */
.ev-vertical{
  position:relative;
  width:min(520px, 86vw);
  margin:0 auto;
  aspect-ratio:3/4.3;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(160,156,180,.14);
  box-shadow:0 70px 120px -30px rgba(0,0,0,.75), inset 0 0 80px rgba(6,5,10,.5);
}
.ev-vertical img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.ev-vertical .vineta{
  position:absolute; inset:0;
  box-shadow:inset 0 0 70px rgba(5,6,4,.7);
  background:linear-gradient(180deg, rgba(13,12,18,.06), rgba(13,12,18,.3));
  pointer-events:none;
}
/* ── la huella: el territorio que se enciende ── */
.mapa-marco{
  position:relative;
  width:min(560px, 88vw);
  margin:0 auto;
  aspect-ratio:800/1100;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(160,156,180,.12);
  background:
    radial-gradient(ellipse 70% 45% at 50% 62%, rgba(232,184,75,.07), transparent 64%),
    linear-gradient(180deg, #16151E 0%, #100F16 100%);
  box-shadow:0 70px 120px -30px rgba(0,0,0,.75), inset 0 0 90px rgba(6,5,10,.55);
  padding:6%;
}
.mapa-luz{
  position:absolute; inset:0;
  background:radial-gradient(ellipse 46% 30% at 50% 60%, rgba(232,184,75,.1), transparent 70%);
  pointer-events:none;
}
.mapa-veredas{
  position:relative;
  width:100%; height:100%;
  display:block;
}
.mapa-veredas path{
  fill:rgba(244,241,232,.015);
  stroke:rgba(244,241,232,.14);
  stroke-width:1;
}
/* las veredas ya caminadas */
.mapa-veredas #v33, .mapa-veredas #v39, .mapa-veredas #v45, .mapa-veredas #v46{
  fill:rgba(232,184,75,.22);
  stroke:rgba(232,184,75,.6);
}
/* la vereda que se enciende ahora */
.mapa-veredas #v49{
  animation:encender 3.4s ease-in-out infinite alternate;
}
@keyframes encender{
  from{
    fill:rgba(232,184,75,.05);
    stroke:rgba(232,184,75,.3);
    filter:none;
  }
  to{
    fill:rgba(232,184,75,.4);
    stroke:rgba(243,208,126,.95);
    filter:drop-shadow(0 0 9px rgba(232,184,75,.75));
  }
}
/* ── el cierre: un territorio a oscuras, con su primera luz ── */
.territorio-propio{
  position:relative;
  width:min(460px, 80vw);
  margin:0 auto;
}
.territorio-propio svg{
  width:100%; height:auto;
  display:block;
}
.territorio-propio .punto-espera{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  margin:0;
}

/* destello del sello de arcilla */
.dest-tel{
  background:none; border:0; box-shadow:none;
  backdrop-filter:none; padding:0;
  display:flex; align-items:center; justify-content:center;
}
.dest-tel .sello-arcilla{
  width:clamp(64px, 6vw, 84px);
  aspect-ratio:1;
  border-radius:50%;
  border:2px solid rgba(194,104,59,.8);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--ui);
  font-size:12px; font-weight:600;
  letter-spacing:.1em;
  color:rgba(194,104,59,.95);
  transform:rotate(-11deg);
  position:relative;
  background:rgba(194,104,59,.05);
}
.dest-tel .sello-arcilla::before{
  content:"";
  position:absolute; inset:12%;
  border-radius:50%;
  border:1px solid rgba(194,104,59,.55);
}
.dest-cert .dc-medalla{
  width:clamp(48px, 4.6vw, 64px);
  display:block;
  margin-top:12px;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.35));
  transform:rotate(7deg);
}


/* ── la palabra viva del hero: el nicho se reconoce ── */
.palabra-viva{ display:inline-block; }
#palabra-rota{
  display:inline-block;
  transition:opacity .38s ease, transform .38s ease;
}
#palabra-rota.saliendo{
  opacity:0;
  transform:translateY(8px);
}

/* ============================================================
   LÍNEA DE RECORRIDO EDITORIAL · firma silenciosa que acompaña
   toda la visita. Variante A (aprobada 2026-07-11).
   Acompaña, no explica; brilla, no señala.
   ============================================================ */
.og-recorrido{ position:fixed; left:34px; top:13vh; height:74vh; width:14px; z-index:60;
  pointer-events:none; transition:opacity .7s ease; }
/* dentro del Caso Insignia cede protagonismo a su riel propio */
.og-recorrido.en-caso{ opacity:.30; }
.og-linea{ position:absolute; left:6px; top:0; bottom:0; width:1px;
  background:linear-gradient(to bottom, transparent, rgba(185,150,86,.20) 10%, rgba(185,150,86,.20) 90%, transparent); }
.og-luz{ position:absolute; left:6.5px; top:0; width:7px; height:7px; margin-left:-3.5px; margin-top:-3.5px;
  border-radius:50%; background:radial-gradient(circle at 34% 30%, #F3D07E, #B99656 72%);
  box-shadow:0 0 9px 2px rgba(185,150,86,.45); transition:top .3s cubic-bezier(.22,.61,.36,1); }
@media (max-width:820px){ .og-recorrido{ left:18px; top:12vh; height:76vh; } }
@media (prefers-reduced-motion:reduce){ .og-recorrido, .og-luz{ transition:none; } }

/* Puente narrativo Vehículos → Caso Insignia: un respiro antes del ejemplo.
   "Es más fácil entenderlo cuando se ve." (aprobado 2026-07-11) */
.puente-caso{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(17px, 2.3vw, 23px); line-height:1.5;
  color:var(--humo);
  margin-bottom:clamp(64px, 9vh, 96px);
}
.puente-caso em{ font-style:italic; color:var(--borgona); }

/* ── Puerta al Laboratorio (reemplaza el grid inline; lleva al Archivo /laboratorio) ── */
.lab-puerta{ padding:clamp(96px,16vh,170px) 0; text-align:center; }
.lab-puerta h2{ font-family:var(--serif); font-weight:400; font-size:clamp(28px,3.6vw,44px);
  line-height:1.3; color:var(--grafito); max-width:20ch; margin:26px auto 0; }
.lab-puerta h2 em{ font-style:italic; color:var(--borgona); }
.lab-puerta-lead{ font-family:var(--serif); font-style:italic; font-size:clamp(17px,2vw,21px);
  color:var(--humo); margin:24px auto 0; max-width:34ch; }
.lab-puerta-link{ display:inline-block; margin-top:44px; font-family:var(--sans); font-size:12px;
  font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--borgona);
  text-decoration:none; transition:color .3s ease; }
.lab-puerta-link i{ font-style:normal; display:inline-block; transition:transform .4s ease; }
.lab-puerta-link:hover{ color:var(--borgona-2); }
.lab-puerta-link:hover i{ transform:translateX(6px); }

/* ════════════════════════════════════════════════════════════════
   CIERRE v1.0 · Detrás de ORIGEN · Testimonio · Footer editorial
   ════════════════════════════════════════════════════════════════ */
.detras{ background:var(--crema); text-align:center; padding:130px 0 40px; }
.detras .etiqueta{ color:var(--dorado); margin-bottom:40px; }
.detras-foto{
  display:block; width:152px; height:152px;
  border-radius:50%; object-fit:cover;
  margin:0 auto 34px;
  border:1px solid var(--dorado-suave);
  box-shadow:0 26px 54px -26px rgba(90,30,42,.4);
}
@media (max-width:600px){ .detras-foto{ width:128px; height:128px; margin-bottom:28px; } }
.detras-firma{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(30px, 4.4vw, 52px); line-height:1.15;
  color:var(--grafito); margin-bottom:30px;
}
.detras-firma em{ font-style:italic; color:var(--borgona); }
.detras-texto{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(18px, 2.1vw, 23px); line-height:1.7;
  color:#4A443C; max-width:36ch; margin:0 auto;
}

/* Testimonio editorial: comilla dorada + cita + persona con foto circular */
.testimonio{ background:var(--crema); text-align:center; padding:70px 0 100px; }
.testimonio-comilla{
  display:block; font-family:var(--serif); font-weight:700;
  font-size:clamp(80px, 12vw, 150px); line-height:.6;
  color:var(--dorado-suave); user-select:none; margin-bottom:6px;
}
.testimonio-cita{
  font-family:var(--serif); font-weight:400; font-style:italic;
  font-size:clamp(23px, 3.3vw, 38px); line-height:1.42;
  color:var(--grafito); max-width:24ch; margin:0 auto 42px;
}
.testimonio-cita em{ color:var(--borgona); font-style:italic; }
.testimonio-autor{ display:inline-flex; align-items:center; justify-content:center; gap:16px; }
.testimonio-foto{
  width:62px; height:62px; border-radius:50%; object-fit:cover; flex:none;
  border:1px solid var(--dorado-suave);
  box-shadow:0 14px 30px -14px rgba(90,30,42,.4);
}
.testimonio-nombre{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  font-family:var(--sans); font-size:12px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--grafito);
}
.testimonio-nombre small{
  margin-top:5px; font-size:10.5px; font-weight:500; letter-spacing:.12em;
  text-transform:none; color:var(--dorado);
}

/* Footer editorial (cierre de revista): sobrio, centrado, aireado */
.colofon{ background:var(--crema); border-top:1px solid var(--linea); padding:74px 0 60px; }
.colofon .contenedor{
  display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:0;
}
.colofon-emblema{ display:block; margin-bottom:22px; }
.colofon-emblema svg{ width:34px; height:34px; }
.colofon-marca{
  font-family:var(--serif); font-weight:600;
  font-size:16px; letter-spacing:.2em; color:var(--borgona);
  margin:0 0 12px;
}
.colofon-tagline{
  font-family:var(--sans); font-size:10px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--humo);
  max-width:38ch; line-height:1.8; margin-bottom:34px;
}
.colofon-redes{ position:static; display:flex; align-items:center; gap:16px; margin-bottom:28px; }
.colofon-redes a{
  font-family:var(--sans); font-size:11px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--grafito);
  text-decoration:none; transition:color .3s ease;
}
.colofon-redes a:hover{ color:var(--borgona); }
.colofon-redes a:focus-visible{ outline:2px solid var(--dorado); outline-offset:4px; border-radius:3px; }
.colofon-punto{ color:var(--dorado-suave); }
.colofon-copy{
  font-family:var(--sans); font-size:10px; font-weight:400;
  letter-spacing:.18em; text-transform:uppercase; color:#B3AB99;
}
@media (max-width:600px){
  .detras{ padding-top:96px; }
  .colofon{ padding:60px 0 50px; }
}