/* En celular, la barra de direcciones tapa la parte de abajo: esta variable mide
   cuánto ocupa (alto de pantalla grande menos alto visible) para subir lo que va abajo. */
:root { --barra-movil: 0px; }
@supports (height: 100svh) { :root { --barra-movil: calc(100lvh - 100svh); } }

/* ============================================================
   PORTFOLIO — GEORGINA FERRANTE
   Estética: render 3D retro. Plástico crema de computadora
   vieja, pared durazno, macetas de barro, hojas verdes.
   Las teclas (botones) imitan teclas de teclado retro.
   ============================================================ */

/* ---------- TOKENS (✏️ editá colores y tipos acá) ---------- */
:root {
  --espresso:  #2A1813;  /* texto y fondos oscuros */
  --cacao:     #4A2B21;
  --crema:     #F4E9D6;  /* plástico retro */
  --papel:     #FBF5EA;
  --durazno:   #E3A887;  /* pared de la computadora */
  --ladrillo:  #A4472F;  /* macetas */
  --hoja:      #3F6B45;  /* hojas: color de acción principal */
  --hoja-osc:  #2B4B30;
  --oro:       #E2B35C;  /* el hilo y la chispa */
  --noche:     #1D1A2C;

  /* ciudad (de día) */
  --b1: #F2E3C9; --b2: #E9AE8C; --b3: #C9D3B4; --b4: #DB9272; --b5: #D9C3A2;
  --ventana: rgba(255, 248, 234, .72);
  --ventana-luz: rgba(255, 248, 234, .72);
  --techo: #B98569;

  --f-display: "Young Serif", "Georgia", serif;
  --f-texto: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --f-retro: "VT323", "Courier New", monospace;

  --radio-tecla: 10px;
  --sombra-tecla: 0 5px 0 #B9A688, 0 9px 18px rgba(42, 24, 19, .22);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; }
body {
  background: var(--espresso);
  color: var(--espresso);
  font-family: var(--f-texto);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Lenis (scroll suave) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }

img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 400; line-height: 1.08; margin: 0 0 .5em; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
button { font: inherit; color: inherit; }

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

.saltar {
  position: fixed; left: 1rem; top: -4rem; z-index: 200;
  background: var(--crema); padding: .6rem 1rem; border-radius: 8px; color: var(--espresso);
}
.saltar:focus { top: 1rem; }

/* ---------- NOTAS DE EDICIÓN y MARCADORES DE IMAGEN ---------- */
.nota {
  display: none;
  font: 500 12.5px/1.4 var(--f-texto);
  color: #5A4300;
  background: #FFF1B8;
  border: 1.5px dashed #C9A227;
  border-radius: 8px;
  padding: .45rem .7rem;
  max-width: 44ch;
  margin: .75rem 0 0;
}
html.notas .nota { display: block; }

.ph {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  min-height: 80px;
  padding: .75rem;
  text-align: center;
  border-radius: 10px;
  color: rgba(42, 24, 19, .75);
  font: 600 12.5px/1.35 var(--f-texto);
  background:
    repeating-linear-gradient(135deg, rgba(164, 71, 47, .10) 0 10px, transparent 10px 20px),
    #F1E3CC;
  border: 1.5px dashed rgba(164, 71, 47, .45);
}
.ph > span::before { content: "Imagen: "; font-weight: 400; opacity: .75; }
.ph--oscuro { background: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 10px, transparent 10px 20px), #1B1A22; color: rgba(244,233,214,.8); border-color: rgba(244,233,214,.3); }
.ph--azul   { background: repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0 10px, transparent 10px 20px), #3D6E96; color: #F4E9D6; border-color: rgba(244,233,214,.45); }
.ph--redondo { border-radius: 50%; min-height: 0; }
.ph--ancho { aspect-ratio: 16 / 9; height: auto; margin: 1.25rem 0; }
.ph--alto  { aspect-ratio: 3 / 4; height: auto; max-width: 420px; margin: 1.25rem 0; }

/* ---------- TECLAS (botones retro) ---------- */
.teclas { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.25rem; }
.tecla {
  --fondo: var(--crema);
  --tinta: var(--espresso);
  --borde: #B9A688;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px;
  padding: .7rem 1.25rem .75rem;
  border: 0;
  border-radius: var(--radio-tecla);
  background-color: var(--fondo);
  background-image: linear-gradient(180deg, #FFFBF2 0%, var(--fondo) 70%);
  color: var(--tinta);
  font: 600 15px/1 var(--f-texto);
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 5px 0 var(--borde), 0 10px 18px rgba(42, 24, 19, .22), inset 0 -2px 0 rgba(0,0,0,.06);
  transform: translateY(0);
  transition: transform .14s ease, box-shadow .14s ease, background-color .2s;
  white-space: nowrap;
}
.tecla:active { transform: translateY(5px); box-shadow: 0 0 0 var(--borde), 0 2px 5px rgba(42, 24, 19, .2); }
.tecla--verde { --fondo: var(--hoja); --tinta: #F7F0E1; --borde: #1F3824; background-image: linear-gradient(180deg, #58875E 0%, var(--hoja) 70%); }
.tecla--chica { min-height: 36px; padding: .5rem .9rem .55rem; font-size: 13.5px; --radio-tecla: 8px; box-shadow: 0 3px 0 var(--borde), 0 6px 12px rgba(42,24,19,.18); }
.tecla--chica:active { transform: translateY(3px); box-shadow: 0 0 0 var(--borde); }

/* ---------- BARRA SUPERIOR ---------- */
.barra {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: calc(.9rem + env(safe-area-inset-top, 0px)) clamp(1rem, 3vw, 2rem) .9rem clamp(3.4rem, 5vw, 4.5rem);
  pointer-events: none;
}
.barra > * { pointer-events: auto; }
.barra__nombre {
  font: 400 1.15rem/1 var(--f-display);
  color: var(--espresso);
  text-decoration: none;
  background: rgba(244, 233, 214, .94);
  padding: .55rem .9rem;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(42,24,19,.12);
}
.barra__acciones { display: flex; gap: .6rem; align-items: center; }
.barra__menu { display: none; }

.indice {
  position: fixed; z-index: 59; top: 4.2rem; right: 1rem;
  background: var(--crema); border-radius: 14px; padding: .6rem;
  box-shadow: 0 16px 40px rgba(42,24,19,.3);
  min-width: 220px;
}
.indice__lista { list-style: none; margin: 0; padding: 0; }
.indice__lista button {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: .6rem .75rem; border-radius: 8px; font-weight: 500;
}
.indice__lista button:hover { background: rgba(63,107,69,.12); }

/* ---------- HILO CONDUCTOR ---------- */
.hilo {
  position: fixed; z-index: 55;
  left: clamp(10px, 1.6vw, 22px);
  top: 5.2rem; bottom: 2rem;
  width: 24px;
}
.hilo__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hilo__fondo { fill: none; stroke: rgba(244, 233, 214, .35); stroke-width: 1.5; }
.hilo__trazo { fill: none; stroke: var(--oro); stroke-width: 2.5; stroke-linecap: round; }
.hilo__nudos { position: absolute; inset: 0; }
.hilo__nudo {
  position: absolute; left: 50%;
  width: 22px; height: 22px; margin: -11px 0 0 -11px;
  border: 0; padding: 0; background: none; cursor: pointer;
}
.hilo__nudo::before {
  content: ""; position: absolute; inset: 6px;
  border-radius: 50%;
  background: var(--crema);
  box-shadow: 0 0 0 2px rgba(42,24,19,.35);
  transition: transform .2s, background .2s;
}
.hilo__nudo.pasado::before { background: var(--oro); }
.hilo__nudo:hover::before { transform: scale(1.35); }
.hilo__nudo::after {
  content: attr(data-rotulo);
  position: absolute; left: 150%; top: 50%; transform: translate(-6px, -50%);
  white-space: nowrap;
  font: 600 12.5px/1 var(--f-texto);
  color: var(--espresso); background: var(--crema);
  padding: .4rem .6rem; border-radius: 6px;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
  box-shadow: 0 6px 16px rgba(42,24,19,.2);
}
.hilo__nudo:hover::after, .hilo__nudo:focus-visible::after { opacity: 1; transform: translate(0, -50%); }
.hilo__chispa {
  position: absolute; left: 50%; top: 0;
  width: 18px; height: 18px; margin: -9px 0 0 -9px;
  pointer-events: none;
  will-change: transform;
}
.hilo__chispa span {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFF6DA 0%, #F5CF7A 35%, #C98E2E 75%);
  box-shadow: 0 0 12px 3px rgba(245, 207, 122, .75), 0 0 30px 8px rgba(226, 179, 92, .35);
  animation: latido 2.4s ease-in-out infinite;
}
@keyframes latido { 50% { transform: scale(1.15); } }
.hilo__rotulo {
  opacity: 0; transition: opacity .4s;
  background: rgba(42,24,19,.75); padding: .25rem .5rem; border-radius: 6px;
  position: absolute; left: 30px; top: 0; margin: -.7em 0 0;
  font: 400 21px/1 var(--f-retro);
  color: var(--crema);
  text-shadow: 0 1px 0 rgba(42,24,19,.6), 0 0 10px rgba(42,24,19,.4);
  white-space: nowrap;
  pointer-events: none;
  will-change: transform;
}
.hilo__rotulo.visible, .hilo:hover .hilo__rotulo { opacity: 1; }

/* ---------- ESCENARIO ---------- */
.escenario { position: fixed; inset: 0; overflow: hidden; z-index: 1; background: var(--espresso); }
.escena { position: absolute; inset: 0; overflow: hidden; }
.escena:not(.escena--pc) { visibility: hidden; opacity: 0; }
.escena { contain: layout paint; }
.recorrido { position: relative; width: 1px; pointer-events: none; }

.marco { position: absolute; inset: 0; will-change: transform; }
.marco__paralaje { position: absolute; inset: 0; }

/* Caja que "cubre" la pantalla con proporción 16:9 (como object-fit: cover,
   pero permite posicionar cosas en % sobre la imagen) */
.cubre {
  position: absolute;
  left: 50%; top: 50%;
  width: max(100vw, 177.78vh);
  height: max(100vh, 56.25vw);
  margin-left: calc(max(100vw, 177.78vh) / -2);
  margin-top: calc(max(100vh, 56.25vw) / -2);
  container-type: size;
}
.cubre__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#biblioCubre, #oficinaCubre { will-change: transform; }
/* la biblioteca se ancla abajo: en pantallas anchas se recortan los estantes
   de arriba y nunca la base donde está parado el libro */
#biblioCubre { top: auto; bottom: 0; margin-top: 0; transform-origin: 50% 100%; }

/* ===== ESCENA 1: PC ===== */
.escena--pc { background: #E7A986; }
.pc__tapa { position: absolute; background: url("../img/escena-pc-borde.png") 0 0 / 100% 100%; }
.pc__img { position: absolute; max-width: none; height: auto; user-select: none; -webkit-user-drag: none; }

.mundo {
  position: absolute; inset: 0;
  overflow: hidden;
  transform-origin: 50% 50%;
  will-change: transform;
  background: #F6D7BC;
}
.mundo__pista { position: absolute; left: 0; top: 0; width: 100%; height: 200%; will-change: transform; }

.crt {
  position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background:
    repeating-linear-gradient(0deg, rgba(20, 10, 5, .16) 0 2px, transparent 2px 4px),
    radial-gradient(ellipse at center, transparent 55%, rgba(30, 12, 5, .55) 100%);
}
.encendido {
  position: absolute; inset: 0; z-index: 6; background: #0E0907;
  display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.encendido span { width: 100%; height: 2px; background: #FFF4DA; box-shadow: 0 0 30px 8px rgba(255, 236, 200, .8); transform: scaleX(0); }
.sin-js .encendido { display: none; }

/* Cielo + escritorio retro */
.cielo {
  position: absolute; left: 0; top: 0; width: 100%; height: 50%;
  background: linear-gradient(180deg, #F7DEC7 0%, #F4CCAE 45%, #F0B99A 100%);
}
.nube { position: absolute; height: auto; pointer-events: none; user-select: none; }
.nube--a { width: 28vw; left: 58%; top: 8%; }
.nube--b { width: 22vw; left: 4%; top: 64%; }
.nube--c { width: 15vw; left: 78%; top: 80%; scale: -1 1; opacity: .9; }

.escritorio {
  list-style: none; margin: 0; padding: 0;
  position: absolute; left: 11%; top: 16%;
  display: grid; gap: 1.4rem;
}
.icono {
  display: grid; justify-items: center; gap: .35rem;
  width: 96px; padding: .4rem;
  background: none; border: 0; cursor: pointer;
  font: 400 19px/1 var(--f-retro); color: var(--espresso);
  border-radius: 8px;
}
.icono:hover { background: rgba(255, 250, 240, .45); }
.icono__dibujo {
  width: 46px; height: 40px; border-radius: 9px;
  background: linear-gradient(180deg, #FFF8EA, #EADBC0);
  box-shadow: 0 4px 0 #BFA784, inset 0 -3px 0 rgba(0,0,0,.05);
  position: relative;
}
.icono__dibujo::after { content: ""; position: absolute; inset: 9px 11px; border-radius: 3px; }
.icono__dibujo--tienda::after { background: repeating-linear-gradient(90deg, #C8352B 0 6px, #FBEFE6 6px 12px); inset: 8px 8px 20px; }
.icono__dibujo--libro::after  { background: #7A2334; inset: 7px 15px; border-left: 4px solid var(--oro); }
.icono__dibujo--gadget::after { background: radial-gradient(circle at 35% 45%, #6FE3FF 0 3px, transparent 4px), radial-gradient(circle at 65% 45%, #6FE3FF 0 3px, transparent 4px), #15161C; border-radius: 8px; inset: 6px 13px; }
.icono__dibujo--pincel::after { background: conic-gradient(#E0667F 0 25%, #F3D873 0 50%, #3F6B45 0 75%, #6A3E9C 0); border-radius: 50%; inset: 8px 12px; }
.icono__dibujo--carta::after  { background: linear-gradient(160deg, transparent 48%, #A4472F 49% 52%, transparent 53%), linear-gradient(20deg, transparent 48%, #A4472F 49% 52%, transparent 53%), #F4E9D6; border: 2px solid #A4472F; inset: 10px 9px; }

.ventana {
  position: absolute; left: 50%; top: 50%;
  width: min(640px, 76vw);

  background: var(--crema);
  border-radius: 16px;
  box-shadow: 0 8px 0 #C4AE8C, 0 30px 60px rgba(120, 60, 35, .3);
  overflow: hidden;
}
.ventana__barra {
  display: flex; justify-content: space-between; align-items: center;
  padding: .55rem .9rem;
  background: linear-gradient(180deg, #E8D6B7, #DCC6A2);
  border-bottom: 2px solid #C4AE8C;
}
.ventana__titulo { font: 400 21px/1 var(--f-retro); letter-spacing: .02em; }
.ventana__botones { display: flex; gap: .35rem; }
.ventana__botones i { width: 13px; height: 13px; border-radius: 3px; background: #F4E9D6; box-shadow: inset 0 -2px 0 #BFA784; }
.ventana__cuerpo { display: grid; grid-template-columns: 120px 1fr; gap: 1.5rem; padding: 1.6rem 1.8rem 1.9rem; }
.ventana__foto .ph { width: 120px; height: 120px; font-size: 11px; }
.ventana__retrato { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px #FFF8EA, 0 6px 0 4px #C4AE8C; }
.ventana__h { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.ventana p { font-size: 15.5px; }
.ventana__chico { font-size: 13.5px !important; color: #6A4A3C; margin: 0; }

.cielo__pista {
  position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%);
  font: 500 15px/1.3 var(--f-texto); color: rgba(42,24,19,.72);
  margin: 0;
}

/* Calle */
.calle { position: absolute; left: 0; top: 50%; width: 100%; height: 50%; overflow: hidden; transform-origin: 50% 50%; will-change: transform; }
.calle__cielo { position: absolute; inset: 0; background: linear-gradient(180deg, #F0B99A 0%, #EDAE8E 55%, #E8A385 100%); }
.calle__capa { position: absolute; left: 0; bottom: 13vh; will-change: transform; }
.skyline { display: block; max-width: none; user-select: none; -webkit-user-drag: none; }
.skyline--lejos { height: 30vh; width: auto; }
.skyline--medio { height: 40vh; width: auto; }
.calle__capa--lejos { bottom: 30vh; }
.calle__capa--medio { bottom: 11vh; }
.nota--calle { position: absolute; right: 2rem; top: 5.2rem; z-index: 3; }

.vereda {
  position: absolute; left: 0; right: 0; bottom: 0; height: 13vh; z-index: 1;
  background:
    linear-gradient(180deg, #D9C0A2 0 10px, #BFA283 10px 16px, transparent 16px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.04) 0 2px, transparent 2px 180px),
    linear-gradient(180deg, #CFB08F, #B99373);
}

.calle__pista {
  position: absolute; left: 0; bottom: 12vh; z-index: 2;
  display: flex; align-items: flex-end;
  gap: clamp(2rem, 5vw, 5rem);
  padding: 0 8vw 0 clamp(4rem, 9vw, 9rem);
  will-change: transform;
}
.calle__intro {
  flex: 0 0 auto; width: min(460px, 80vw);
  align-self: center;
  margin-bottom: 8vh;
  background: rgba(251, 245, 234, .9);
  padding: 1.8rem 2rem;
  border-radius: 18px;
  box-shadow: 0 8px 0 #D5BE9C, 0 30px 50px rgba(120,60,35,.2);
}
.calle__intro h2 { font-size: clamp(2rem, 3.4vw, 3rem); }
.calle__intro p { font-size: 15.5px; }
.calle__plataformas { color: var(--ladrillo); font-weight: 600; }
.calle__guia { font: 600 14.5px/1.3 var(--f-texto); margin: 0; color: var(--hoja); }
.calle__guia::before { content: "> "; }

/* Tienda (vidriera) */
.tienda {
  --ancho: clamp(250px, 24vw, 360px);
  flex: 0 0 auto;
  position: relative;
  width: var(--ancho);
  height: min(64vh, 560px);
  display: grid;
  grid-template-rows: auto 38px minmax(0, 1fr) auto auto;
  padding: 0 0 1.1rem;
  border: 0; border-radius: 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--fachada) 100%, white 10%), var(--fachada));
  text-align: left; cursor: pointer;
  /* volumen como el resto del sitio: una base sólida abajo (igual que las teclas y los paneles) */
  box-shadow: 0 9px 0 var(--lado), 0 26px 40px rgba(110, 55, 30, .2);
  transition: transform .2s cubic-bezier(.2,.8,.2,1);
}
.tienda:hover, .tienda:focus-visible { transform: translateY(-10px); }
.tienda__cartel {
  display: block; margin: 1rem 1rem .6rem;
  padding: .55rem .8rem;
  background: var(--papel);
  color: var(--cartel);
  font: 400 clamp(1.05rem, 1.5vw, 1.3rem)/1.1 var(--f-display);
  text-align: center;
  border-radius: 8px;
  box-shadow: 0 4px 0 rgba(0,0,0,.12);
}
.tienda__toldo {
  display: block; position: relative;
  margin: 0;
  /* colores neutros: el protagonismo es de cada proyecto */
  --toldo-a: color-mix(in srgb, var(--fachada) 78%, #B9A688);
  --toldo-b: color-mix(in srgb, var(--fachada) 55%, white);
  background: repeating-linear-gradient(90deg, var(--toldo-a) 0 26px, var(--toldo-b) 26px 52px);
  border-radius: 4px 4px 0 0;
  box-shadow: 0 6px 10px rgba(0,0,0,.08);
  transform-origin: top center;
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.tienda__toldo::after { /* borde festoneado */
  content: ""; position: absolute; left: 0; right: 0; bottom: -12px; height: 12px;
  background: radial-gradient(circle at 13px 0, var(--toldo-a) 12px, transparent 12.5px) 0 0 / 52px 12px repeat-x,
              radial-gradient(circle at 39px 0, var(--toldo-b) 12px, transparent 12.5px) 0 0 / 52px 12px repeat-x;
}
.tienda:hover .tienda__toldo { transform: perspective(300px) rotateX(-14deg); }
.tienda__vidriera {
  display: block; margin: 1.4rem 1rem .8rem;
  border-radius: 8px;
  background: #2E1F1A;
  padding: 7px;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.4), 0 4px 0 rgba(0,0,0,.1);
  min-height: 0;
}
.tienda__vidriera .ph { border-radius: 4px; font-size: 12px; }
.tienda__vidriera img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--foco, 50%) 50%; border-radius: 4px; }
.tienda__info { display: block; margin: 0 1rem; }
.tienda__nombre { display: block; font-weight: 700; font-size: 15px; line-height: 1.3; color: var(--espresso); }
.tienda__tags { display: block; font-size: 13px; color: rgba(42,24,19,.7); margin-top: .2rem; }
.tienda__cta { justify-self: start; margin: .8rem 1rem 0; }
.tienda__puerta { display: none; }

/* Edificio biblioteca (final de la calle): render con la puerta transparente */
.biblio-edificio {
  flex: 0 0 auto; position: relative;
  height: min(76vh, 700px);
  aspect-ratio: 1127 / 1396;
  margin-left: 4vw;
  margin-bottom: -1vh;
}
.biblio-edificio__img { position: relative; z-index: 1; width: 100%; height: 100%; }
/* luz cálida detrás del hueco de la puerta (medidas en % de la imagen) */
.biblio-edificio__puerta {
  position: absolute; z-index: 0;
  left: 38.6%; top: 51.4%; width: 22.8%; height: 40.2%;
  border-radius: 999px 999px 0 0;
  background: radial-gradient(ellipse at 50% 85%, #FFE3A8 0%, #F2B066 40%, #9A5A2C 80%, #4A2618 100%);
}

/* Hero */
.hero {
  position: absolute; z-index: 4;
  left: clamp(3.8rem, 7vw, 7rem); top: 50%;
  width: min(31vw, 460px);
  color: var(--espresso);
}
.hero__titulo {
  font-size: clamp(3rem, 5.8vw, 6rem);
  line-height: .92;
  letter-spacing: -.025em;
  color: #2A1510;
  text-shadow: 0 2px 0 rgba(255, 235, 215, .35);
  margin-bottom: .3em;
}
.hero__titulo .linea { display: block; }
.hero__rol { font-size: clamp(1rem, 1.35vw, 1.18rem); max-width: 38ch; line-height: 1.5; }
.hero__pista {
  display: flex; align-items: center; gap: .7rem;
  margin-top: 2.2rem;
  font: 500 15px/1.3 var(--f-texto);
  color: rgba(42, 21, 16, .78);
}
.raton { width: 20px; height: 32px; border: 2px solid currentColor; border-radius: 12px; position: relative; flex: none; }
.raton::after { content: ""; position: absolute; left: 50%; top: 6px; width: 3px; height: 7px; margin-left: -1.5px; background: currentColor; border-radius: 2px; animation: rueda 1.8s ease-in-out infinite; }
@keyframes rueda { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(9px); opacity: 0; } 100% { opacity: 0; } }

/* ===== ESCENA 2: BIBLIOTECA ===== */
.escena--biblio { background: #1A0E09; }
.cubre__img--frente { z-index: 2; pointer-events: none; }
.libro3d-escena {
  position: absolute; z-index: 1;
  left: 51.55%; bottom: -.6%; /* misma línea de apoyo que los libros de adelante */
  width: 17cqw; height: 48.3cqh;
  margin-left: -8.5cqw;
  perspective: 160cqw;
}
.libro3d {
  --w: 17cqw; --h: 48.3cqh; --d: 2.8cqw;
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform: rotateY(90deg);
  will-change: transform;
}
.libro3d__cara { position: absolute; backface-visibility: hidden; }
.libro3d__tapa, .libro3d__contratapa { inset: 0; border-radius: 2px 6px 6px 2px; }
.libro3d__tapa {
  background: url("../img/libro-portada.webp") center / cover, #F4F1EC;
  transform: translateZ(calc(var(--d) / 2));
  box-shadow: inset 6px 0 10px rgba(0,0,0,.18);
}
.libro3d__contratapa { background: #EDE7DC; transform: rotateY(180deg) translateZ(calc(var(--d) / 2)); }
.libro3d__lomo {
  width: var(--d); height: 100%; top: 0; left: calc((var(--w) - var(--d)) / 2);
  background: linear-gradient(90deg, #D8D2C7, #F7F4EE 50%, #D8D2C7);
  transform: rotateY(-90deg) translateZ(calc(var(--w) / 2));
  display: flex; align-items: center; justify-content: center;
}
.libro3d__lomo span {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font: 400 1.45cqw/1 var(--f-display); color: #2E3440; white-space: nowrap;
}
.libro3d__hojas {
  width: var(--d); height: calc(100% - 1cqh); top: .5cqh; left: calc((var(--w) - var(--d)) / 2);
  background: repeating-linear-gradient(90deg, #FFFDF7 0 2px, #E8E2D4 2px 3px);
  transform: rotateY(90deg) translateZ(calc(var(--w) / 2 - 2px));
}
.libro3d__arriba, .libro3d__abajo {
  width: 100%; height: var(--d); left: 0; top: calc((var(--h) - var(--d)) / 2);
  background: #E9E3D8;
}
.libro3d__arriba { transform: rotateX(90deg) translateZ(calc(var(--h) / 2)); }
.libro3d__abajo { transform: rotateX(-90deg) translateZ(calc(var(--h) / 2)); }

.biblio__sombra {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, rgba(20,10,6,0) 0%, rgba(20,10,6,0) 48%, rgba(20,10,6,.85) 75%);
}

.panel {
  position: absolute; z-index: 3;
  background: var(--papel);
  border-radius: 20px;
  padding: clamp(1.4rem, 2.4vw, 2.2rem);
  box-shadow: 0 10px 0 #D9C4A2, 0 40px 80px rgba(0,0,0,.35);
}
.panel--libro {
  right: clamp(1rem, 5vw, 5rem); top: 50%;
  width: min(440px, 90vw);

  opacity: 0; visibility: hidden;
  max-height: calc(100vh - 7rem); overflow: auto;
}
.panel h2 { font-size: clamp(1.8rem, 2.8vw, 2.6rem); }
.panel__bajada { font-weight: 600; color: var(--ladrillo); }
.panel p { font-size: 15.5px; }
.panel__sub { font-size: 1.3rem; margin-top: 1.8rem; padding-top: 1.4rem; border-top: 2px dotted rgba(42,24,19,.2); }
.panel__chico { font-size: 14px !important; color: #6A4A3C; }
.lomos { display: grid; gap: .6rem; }
.lomo {
  --lomo: #7A2334;
  display: flex; align-items: center;
  min-height: 52px; padding: .6rem 1rem .6rem 1.4rem;
  border: 0; border-radius: 4px 8px 8px 4px;
  background:
    linear-gradient(90deg, rgba(0,0,0,.25) 0 6px, transparent 6px),
    linear-gradient(180deg, transparent 0 8px, rgba(226,179,92,.8) 8px 10px, transparent 10px calc(100% - 10px), rgba(226,179,92,.8) calc(100% - 10px) calc(100% - 8px), transparent 0),
    var(--lomo);
  color: #F7EEDB; text-align: left; cursor: pointer;
  font: 400 15.5px/1.25 var(--f-display);
  box-shadow: 0 4px 0 rgba(0,0,0,.25);
  transition: transform .2s;
}
.lomo:hover { transform: translateX(8px); }

/* ===== ESCENA 3: PORTAL + ESPACIO ===== */
.escena--portal { background: transparent; }
/* iris: un círculo que crece (se anima con transform, sin recortes caros) */
.iris { position: absolute; left: 50%; top: 50%; border-radius: 50%; overflow: hidden; will-change: transform; background: #05060C; }
.iris__dentro { position: absolute; will-change: transform; overflow: hidden; }
.espacio { position: absolute; inset: 0; overflow: hidden; transform-origin: 50% 50%; will-change: transform; background: #03040A; }
.espacio__fondo { position: absolute; left: 0; top: 0; width: 100%; height: 125%; will-change: transform; }
/* encuadre centrado: la galaxia queda a la derecha del centro */
.espacio__fondo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.estrellas {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, #fff, transparent),
    radial-gradient(1px 1px at 32% 12%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 72% 18%, #fff, transparent),
    radial-gradient(1px 1px at 85% 42%, #fff, transparent),
    radial-gradient(1px 1px at 55% 8%, #fff, transparent),
    radial-gradient(2px 2px at 92% 12%, #FFE7B8, transparent),
    radial-gradient(1px 1px at 22% 48%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 44% 30%, #fff, transparent);
  opacity: .8;
}
.portal__texto {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 19vh;
  text-align: center; pointer-events: none;
}
.portal__texto::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: min(760px, 90vw); height: 180%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(10,6,12,.72), transparent);
  z-index: -1;
}
.portal__texto p { font: 400 clamp(1.6rem, 3.2vw, 2.8rem)/1.1 var(--f-display); color: #FBF1DE; text-shadow: 0 2px 3px rgba(0,0,0,.85), 0 0 28px rgba(0,0,0,.8); margin: 0; }

.gadget {
  position: absolute; z-index: 2;
  left: 50%; top: 50%;
  width: clamp(150px, 14vw, 235px);
  aspect-ratio: 669 / 1226;

  will-change: transform;
}
.gadget__img { position: relative; z-index: 1; width: 100%; height: 100%; }
.gadget__reflejo { position: absolute; left: 10%; right: 10%; top: 98%; height: 18%; border-radius: 50%; background: radial-gradient(ellipse at 50% 0, rgba(54,200,244,.35), transparent 70%); }
.gadget__haz {
  position: absolute; left: 60%; top: 62%; z-index: 0;
  width: 60vw; height: 30vh; margin-top: -15vh;
  background: linear-gradient(90deg, rgba(160, 230, 255, .55), rgba(160, 230, 255, 0));
  clip-path: polygon(0 45%, 100% 0, 100% 100%, 0 55%);
  opacity: 0; transform-origin: 0 50%;
}

.g-panel {
  position: absolute; z-index: 3;
  top: 50%;
  width: min(420px, 86vw);
  padding: 1.8rem 2rem;
  color: #F1E7D6;
  background: rgba(12, 14, 24, .86);
  border: 1px solid rgba(160, 230, 255, .22);
  border-radius: 18px;
  box-shadow: 0 30px 60px rgba(0,0,0,.4);
  opacity: 0; visibility: hidden;
}
.g-panel[data-lado="izq"] { left: clamp(4.5rem, 11vw, 11rem); }
.g-panel[data-lado="der"] { right: clamp(1rem, 7vw, 8rem); }
.g-panel h2 { font-size: clamp(2rem, 3.4vw, 3.2rem); }
.g-panel h3 { font-size: clamp(1.5rem, 2.2vw, 2rem); }
.g-panel p { font-size: 15.5px; color: rgba(241,231,214,.88); }
.g-panel .panel__bajada { color: #8FDCF5; }
.g-panel .tecla:not(.tecla--verde) { --borde: #8C7B61; }
.tildes { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.tildes li { padding-left: 1.7rem; position: relative; }
.tildes li::before { content: ""; position: absolute; left: 0; top: .45em; width: 12px; height: 6px; border-left: 2px solid #6FE3FF; border-bottom: 2px solid #6FE3FF; transform: rotate(-45deg); }
.chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.chips li { font-size: 13.5px; padding: .35rem .7rem; border-radius: 999px; background: rgba(111, 227, 255, .12); border: 1px solid rgba(111,227,255,.3); }

/* ===== ESCENA 4: ATRIL ===== */
.escena--atril { background: #5E2330; }
.lienzo {
  position: absolute; inset: 0; overflow: hidden;
  transform-origin: 50% 50%; will-change: transform;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.6), transparent 60%),
    repeating-linear-gradient(0deg, rgba(120, 90, 60, .03) 0 2px, transparent 2px 5px),
    #F5EEE2;
}
.lienzo__portada {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; padding: 2rem;
}
.lienzo__portada h2 { font-size: min(5.2vw, 9vh); line-height: .95; color: #5E2330; max-width: 12ch; }
.lienzo__portada p { font: 400 clamp(1.1rem, 1.8vw, 1.5rem)/1.3 var(--f-texto); color: #6A4A3C; font-style: italic; }
.lienzo__pista {
  position: absolute; left: 0; top: 0; height: 100%; width: max-content;
  display: flex; align-items: center; gap: clamp(3rem, 7vw, 7rem);
  padding: 5rem 10vw 3rem 100vw;
  will-change: transform;
}
.obra { margin: 0; flex: 0 0 auto; display: grid; gap: 1rem; }
.obra__marco {
  padding: 16px; border: 0; cursor: pointer;
  background: linear-gradient(135deg, #E7C476, #B7862F 40%, #F2D892 60%, #A87628);
  border-radius: 6px;
  box-shadow: 0 20px 40px rgba(60, 30, 10, .3);
  transition: transform .3s;
}
.obra__marco { transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease; }
.obra__marco:hover, .obra__marco:focus-visible { transform: translateY(-12px) rotate(-2.2deg) scale(1.05); box-shadow: 0 34px 55px rgba(60, 30, 10, .38); }
.obra--horizontal .obra__marco:hover { transform: translateY(-12px) rotate(1.4deg) scale(1.04); }
.obra--serie img { transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease; }
.obra--serie img:hover { transform: translateY(-8px) rotate(-2deg) scale(1.08); box-shadow: 0 24px 40px rgba(60,30,10,.35); position: relative; z-index: 1; }
.obra--serie img:nth-child(even):hover { transform: translateY(-8px) rotate(2deg) scale(1.08); }
.obra__marco .ph { border-radius: 2px; }
.obra__marco img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 2px; }
.obra--vertical .obra__marco { width: min(34vh, 70vw); aspect-ratio: 3 / 4; }
.obra--horizontal .obra__marco { width: min(62vh * 1.6, 80vw); max-width: 760px; aspect-ratio: 16 / 10; }
.obra--serie .serie { display: grid; grid-template-columns: repeat(2, min(24vh, 38vw)); gap: 1rem; }
.obra--serie .ph, .obra--serie img { aspect-ratio: 4 / 3; height: auto; width: 100%; object-fit: cover; border-radius: 4px; box-shadow: 0 10px 24px rgba(60,30,10,.25); }
.obra figcaption { max-width: 38ch; font-size: 15px; color: #4A2B21; }
.obra figcaption strong { display: block; font: 400 1.35rem/1.2 var(--f-display); color: var(--espresso); margin-bottom: .2rem; }

.atril__texto {
  position: absolute; z-index: 3;
  left: clamp(3.5rem, 5.5vw, 6rem); top: 50%;
  width: min(19vw, 290px);
  color: #F7EBD8;
  background: rgba(60, 18, 28, .86);
  padding: 1.4rem 1.5rem;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0,0,0,.35);
}
.atril__texto h2 { font-size: clamp(2rem, 3.4vw, 3.2rem); }
.atril__texto p { font-size: 15px; color: rgba(247,235,216,.85); }

/* ===== ESCENA 5: OFICINA ===== */
.escena--oficina { background: #14121C; }
.ventana-noche {
  position: absolute;
  /* la ciudad ocupa todo el fondo: se ve por la ventana grande y por el hueco de arriba a la izquierda */
  inset: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #17142A 0%, #2C2342 55%, #4A3350 100%);
}
.ventana-noche img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; }


/* ---------- CIERRE (flujo normal) ---------- */
.final {
  position: relative; z-index: 2;
  color: var(--crema);
  background: var(--espresso);
  padding: 0 clamp(1.25rem, 6vw, 6rem) 3rem clamp(3.5rem, 8vw, 8rem);
}
.final__velo {
  position: absolute; left: 0; right: 0; top: -40vh; height: 40vh;
  background: linear-gradient(180deg, rgba(42,24,19,0), var(--espresso));
  pointer-events: none;
}
.bloque { max-width: 1100px; margin: 0 auto; padding: 5rem 0 2rem; }
.bloque h2 { font-size: clamp(2.2rem, 4.6vw, 4rem); color: #F7EEDC; }
.bloque p { max-width: 62ch; color: rgba(244,233,214,.86); }

.camino { list-style: none; counter-reset: paso; padding: 0; margin: 2rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; }
.camino li {
  counter-increment: paso;
  position: relative;
  padding: 1.3rem 1.2rem 1.4rem;
  background: #3A231B;
  border-radius: 14px;
  box-shadow: 0 5px 0 #1C0F0B;
}
.camino li::before { content: counter(paso); font: 400 2.2rem/1 var(--f-display); color: var(--oro); display: block; margin-bottom: .6rem; }
.camino strong { display: block; font: 400 1.2rem/1.2 var(--f-display); color: #F7EEDC; margin-bottom: .4rem; }
.camino span { font-size: 14.5px; color: rgba(244,233,214,.78); }

.bloque--doble { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.fotos figure { margin: 0; }
.fotos .ph { aspect-ratio: 4 / 3; height: auto; }
.fotos figcaption { font-size: 13px; color: rgba(244,233,214,.65); margin-top: .5rem; }

.formacion { list-style: none; padding: 0; margin: 1.5rem 0 0; }
.formacion li {
  display: grid; grid-template-columns: 5rem 1fr auto; gap: 1rem; align-items: baseline;
  padding: 1rem 0; border-bottom: 1px solid rgba(244,233,214,.14);
}
.formacion__fecha { font: 400 22px/1 var(--f-retro); color: var(--oro); }
.formacion strong { font-weight: 600; }
.formacion li > span:last-child { color: rgba(244,233,214,.6); font-size: 14.5px; text-align: right; }

.bloque--contacto { text-align: left; padding-top: 6rem; }
.contacto__titulo { font-size: clamp(3.5rem, 11vw, 10rem) !important; line-height: .9; }
.contacto__datos { margin-top: 1.4rem; font: 400 22px/1 var(--f-retro); color: var(--oro) !important; user-select: all; }
.teclas--grandes .tecla { min-height: 56px; font-size: 16.5px; padding: .9rem 1.5rem; }

.pie { max-width: 1100px; margin: 5rem auto 0; padding-top: 1.5rem; border-top: 1px solid rgba(244,233,214,.14); display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.pie p { margin: 0; font-size: 14px; color: rgba(244,233,214,.6); }

/* ---------- FICHA DE CASO ---------- */
.caso { position: fixed; inset: 0; z-index: 90; }
.caso__fondo { position: absolute; inset: 0; background: rgba(26, 14, 10, .7); }
.caso__hoja {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(780px, 100vw);
  background: var(--papel);
  overflow-y: auto; overscroll-behavior: contain;
  box-shadow: -30px 0 60px rgba(0,0,0,.35);
}
.caso__cabecera {
  position: sticky; top: 0; z-index: 2;
  display: flex; justify-content: space-between; gap: 1rem;
  padding: calc(1rem + env(safe-area-inset-top, 0px)) clamp(1.2rem, 4vw, 3rem) 1rem;
  background: rgba(251,245,234,.97);
  border-bottom: 1px solid rgba(42,24,19,.08);
}
.caso__nav { display: flex; gap: .6rem; }
.caso__contenido { padding: 1.5rem clamp(1.2rem, 4vw, 3rem) 4rem; }
.caso__marca { font: 400 22px/1 var(--f-retro); color: var(--ladrillo); margin-bottom: .6rem; }
.caso__contenido h2 { font-size: clamp(2rem, 4vw, 3rem); }
.caso__contenido h3 { font-size: 1.45rem; margin-top: 2.2rem; }
.caso__contenido p { max-width: 64ch; }
.caso__ficha { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: .45rem; }
.caso__ficha li { font-size: 13.5px; font-weight: 600; padding: .35rem .75rem; border-radius: 999px; background: #EFE2CC; }
.caso__dos { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.25rem 0; }
.caso__dos .ph { aspect-ratio: 4 / 5; height: auto; }
.caso__img { width: 100%; height: auto; border-radius: 12px; margin: 1.25rem 0; box-shadow: 0 10px 30px rgba(42,24,19,.15); }
.caso__dos .caso__img { height: 100%; object-fit: cover; margin: 0; }
.caso__img--alto { max-width: 460px; }
.caso blockquote {
  margin: 1.5rem 0; padding: 1.2rem 1.4rem;
  font: 600 1.05rem/1.55 var(--f-texto); font-style: italic;
  background: #F1E3CC; border-radius: 14px;
  box-shadow: 0 5px 0 #DCC6A2;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
  .barra { padding-left: 2.6rem; }
  .barra__nombre { font-size: 1rem; padding: .5rem .75rem; }
  .barra__acciones .tecla:not(.barra__menu) { display: none; }
  .barra__menu { display: inline-flex; }
  .hilo__nudos, .hilo__rotulo { display: none; }

  .hero { left: 1.4rem; right: 1.4rem; width: auto; top: 5.2rem; }
  .hero__titulo { font-size: clamp(2.8rem, 13vw, 4.6rem); }
  .hero__rol { font-size: 15px; }
  .hero__pista { display: none; }
  .hero .teclas { margin-top: 1rem; }

  .escritorio { display: none; }
  .ventana { width: 88vw; }
  .ventana__cuerpo { grid-template-columns: 1fr; padding: 1.2rem 1.3rem 1.4rem; gap: .8rem; }
  .ventana__foto .ph, .ventana__retrato { width: 72px; height: 72px; }
  .ventana p { font-size: 14.5px; }

  /* calle vertical: las tiendas se apilan y suben con el scroll */
  .calle__pista {
    left: 0; right: 0; top: 5.2rem; bottom: auto;
    flex-direction: column; align-items: center;
    gap: 2.4rem; padding: 0 0 0;
  }
  .calle__intro { align-self: center; width: 84vw; margin-bottom: 0; }
  .tienda { --ancho: 78vw; height: auto; min-height: 0; }
  .tienda__vidriera { aspect-ratio: 16 / 10; }
  .biblio-edificio { height: min(62svh, 520px); margin: 1.5rem 0 0; }
  .nota--calle { display: none !important; }

  .panel--libro { right: .8rem; left: .8rem; top: 4.6rem; bottom: auto; width: auto; max-height: calc(100svh - 6rem); padding: 1.2rem 1.3rem; }
  .biblio__sombra { background: linear-gradient(180deg, rgba(20,10,6,.8) 0%, rgba(20,10,6,0) 55%); }

  .g-panel { top: auto; bottom: calc(1.2rem + var(--barra-movil)); left: 1rem !important; right: 1rem !important; width: auto; padding: 1.3rem 1.4rem; }
  .gadget { top: 30%; width: 26vw; }

  .atril__texto { left: 1.4rem; right: 1.4rem; width: auto; top: auto; bottom: calc(4vh + var(--barra-movil)); background: rgba(60, 20, 28, .82); padding: 1.2rem 1.3rem; border-radius: 14px; }
  .lienzo__pista { padding-left: 100vw; gap: 2.5rem; }


  .final { padding-left: 1.3rem; padding-right: 1.3rem; }
  .bloque--doble { grid-template-columns: 1fr; }
  .formacion li { grid-template-columns: 3.4rem 1fr; }
  .formacion li > span:last-child { grid-column: 2; text-align: left; }
  .caso__dos { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .raton::after, .hilo__chispa span, .gadget__ojos i { animation: none; }
  .tienda, .tienda__toldo, .tecla, .lomo, .obra__marco, .obra--serie img { transition: none; }
}




.der__portada { width: 100%; max-width: 520px; border-radius: 14px !important; }
.der img.sin-fondo { background: none; box-shadow: none; }

/* ============================================================
   CASOS DE INVESTIGACIÓN (panel en la biblioteca, abre Behance)
   ============================================================ */
.panel__sigue { margin-top: 1.4rem; padding-top: 1rem; border-top: 2px dotted rgba(42,24,19,.2); }
.panel__sobre { font: 400 21px/1 var(--f-retro); color: var(--ladrillo); margin-bottom: .5rem; }
.fichas { display: grid; gap: .9rem; margin: 1.2rem 0 .4rem; }
.ficha {
  display: grid; grid-template-columns: 104px 1fr; gap: 1rem; align-items: center;
  padding: .7rem; border-radius: 14px;
  background: #F3E7D2; color: var(--espresso); text-decoration: none;
  box-shadow: 0 5px 0 #D9C4A2;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
}
.ficha:hover, .ficha:focus-visible { transform: translateY(-3px); box-shadow: 0 8px 0 #D9C4A2, 0 14px 24px rgba(60,30,15,.15); }
.ficha__img { width: 104px; height: 104px; object-fit: cover; border-radius: 10px; }
.ficha__texto { display: grid; gap: .25rem; font-size: 13.5px; color: #5A3E32; }
.ficha__texto strong { font: 400 1.08rem/1.2 var(--f-display); color: var(--espresso); }
.ficha__cta { margin-top: .3rem; font-weight: 700; color: var(--hoja); }
.panel__seguir { display: flex; align-items: center; gap: .6rem; margin: 1.2rem 0 0; font: 400 20px/1 var(--f-retro) !important; color: #6A4A3C !important; }
.panel__seguir .raton { width: 16px; height: 26px; }
@media (max-width: 900px) {
  .ficha { grid-template-columns: 76px 1fr; }
  .ficha__img { width: 76px; height: 76px; }
}

/* ============================================================
   OFICINA: profundidad entre el interior y la ciudad + panel de SEO
   ============================================================ */
.ventana-noche { will-change: transform; transform-origin: 53% 42%; }
/* reflejo en el vidrio de la ventana grande (medidas en % de la imagen) */
.vidrio {
  position: absolute; pointer-events: none;
  left: 36.1%; top: 3.9%; width: 34.2%; height: 77%;
  background:
    linear-gradient(115deg, transparent 0 30%, rgba(255,236,210,.10) 34%, transparent 42%, transparent 58%, rgba(255,236,210,.07) 61%, transparent 66%),
    linear-gradient(0deg, rgba(255,190,140,.22) 0%, transparent 28%),
    linear-gradient(180deg, rgba(20,16,40,.25), transparent 40%);
}
.panel--seo h2 { font-size: clamp(1.7rem, 2.6vw, 2.4rem); }
.cifras { list-style: none; padding: 0; margin: 1.1rem 0; display: grid; grid-template-columns: auto 1fr; gap: .6rem 1rem; }
.cifras li { display: contents; }
.cifras__num { font: 400 clamp(2.2rem, 3.4vw, 3rem)/1 var(--f-display); color: var(--hoja); }
.cifras li span:last-child { align-self: center; font-size: 14px; color: #5A3E32; }
.panel__lista { margin: 0; padding-left: 1.1rem; display: grid; gap: .35rem; font-size: 14.5px; color: #3E2A22; }
@media (max-width: 900px) {
}

/* ============================================================
   CIERRE: salimos de la pantalla de la computadora
   ============================================================ */
.escena--cierre { background: #E7A986; }
.pantalla-fin { position: absolute; inset: 0; overflow: hidden; transform-origin: 50% 50%; will-change: transform; }
.pantalla-fin__cielo { position: absolute; inset: 0; background: linear-gradient(180deg, #2A2247 0%, #6B4668 45%, #D98E78 80%, #F0B99A 100%); }
.pantalla-fin__cielo::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(1.5px 1.5px at 20% 20%, #fff, transparent), radial-gradient(1px 1px at 70% 12%, #fff, transparent), radial-gradient(1.5px 1.5px at 85% 30%, #FFE7B8, transparent), radial-gradient(1px 1px at 40% 8%, #fff, transparent), radial-gradient(1px 1px at 60% 34%, #fff, transparent); opacity: .8; }
.ventana--fin { width: min(520px, 80vw); translate: -50% -50%; left: 50%; top: 50%; }
.ventana__cuerpo--fin { display: block; text-align: center; padding: 2rem 2rem 2.3rem; }
.fin__linea { font: 400 24px/1.2 var(--f-retro) !important; color: #6A4A3C; margin-bottom: .6rem; }
.fin__gracias { font: 400 clamp(2rem, 4vw, 3rem)/1.05 var(--f-display) !important; color: var(--espresso); margin: 0; }
.cursor { animation: parpadeo 1s steps(1) infinite; }
@keyframes parpadeo { 50% { opacity: 0; } }
.hero--fin { opacity: 0; visibility: hidden; }
.hero--fin .hero__titulo { font-size: clamp(2.6rem, 5vw, 5rem); }
.fin__firma { font: 400 22px/1 var(--f-retro); color: rgba(42,21,16,.75); margin-top: .4rem; }
@media (prefers-reduced-motion: reduce) { .cursor { animation: none; } }

/* halo cálido detrás del gadget: lo envuelve la luz de la escena */
.gadget::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: -60%; right: -60%; top: -25%; bottom: -30%;
  background: radial-gradient(closest-side at 55% 58%, rgba(255,170,110,.26) 0%, rgba(190,110,170,.12) 45%, transparent 100%);
}

.gadget__luz { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; opacity: 0; pointer-events: none; }

/* ---- integración del gadget ---- */
.gadget__reflejo { display: none; }
.gadget__flota { position: absolute; inset: 0; z-index: 1; animation: flotar 6s ease-in-out infinite; }
.gadget__flota .gadget__img { position: absolute; inset: 0; z-index: 1; }
@keyframes flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3.5%); } }
/* luz celeste que emiten los ojos y los anillos sobre el espacio que lo rodea */
.gadget__halo {
  position: absolute; z-index: 0; pointer-events: none;
  /* centrado en el objeto y más grande que él: lo envuelve entero */
  left: -85%; right: -85%; top: -32%; bottom: -32%;
  background: radial-gradient(closest-side at 50% 50%, rgba(120,225,255,.34) 0%, rgba(110,215,255,.26) 45%, rgba(90,190,245,.10) 75%, transparent 100%);
  animation: halo 6s ease-in-out infinite;
}
@keyframes halo { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .gadget__flota, .gadget__halo { animation: none; } }

/* imágenes de las fichas */
.caso figure { margin: 0; }
.caso figcaption { font-size: 13px; color: #6A4A3C; margin-top: .45rem; }
.caso__img--mock { box-shadow: none !important; border-radius: 0 !important; background: none; }
.caso__dos .caso__img { height: auto; aspect-ratio: auto; object-fit: contain; }
.caso__dos--auto { align-items: start; }
.caso__rotulo { font: 700 14px/1.4 var(--f-texto); color: var(--ladrillo); margin: 1.6rem 0 .5rem; }
.caso__render { margin: 1.25rem 0; padding: 2rem; border-radius: 14px; background: radial-gradient(ellipse at 50% 60%, #1D2A3A, #07080C 70%); display: grid; place-items: center; }
.caso__render img { width: min(240px, 50%); height: auto; }
.panel__logro { margin: .2rem 0 1rem; padding: .8rem 1rem; border-radius: 10px; background: #E6EDDA; color: #2B4B30 !important; font-weight: 600; font-size: 14.5px !important; }

/* ============================================================
   PULIDO
   ============================================================ */
/* columnas con panel + aviso de scroll aparte */
.columna {
  position: absolute; z-index: 3;
  right: clamp(1rem, 5vw, 5rem); top: 50%;
  width: min(460px, 90vw);
  display: grid; gap: .9rem; justify-items: center;
  opacity: 0; visibility: hidden;
}
.columna--izq { right: auto; left: clamp(3.8rem, 6vw, 6rem); width: min(430px, 90vw); }
.columna > .panel { position: relative; inset: auto; width: 100%; max-height: calc(100vh - 11rem); overflow: auto; }
.seguir {
  display: inline-flex; align-items: center; gap: .6rem; margin: 0;
  padding: .55rem 1rem .55rem .8rem; border-radius: 999px;
  background: rgba(30,16,10,.8); color: #F7EEDC;
  font: 600 14px/1 var(--f-texto);
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
  animation: invitar 2.4s ease-in-out infinite;
}
.seguir .raton { width: 14px; height: 22px; color: #F7EEDC; }
@keyframes invitar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@media (max-width: 900px) {
  .columna { left: .8rem; right: .8rem; top: 4.6rem; width: auto; }
  .columna--izq { top: auto; bottom: calc(1rem + var(--barra-movil)); }
  .columna > .panel { max-height: calc(100svh - 10rem); padding: 1.2rem 1.3rem; }
  .columna--izq > .panel { max-height: 56vh; }
}

/* botones: hover más rápido y más evidente (solo con mouse) */
@media (hover: hover) {
  .tecla, .tienda__cta { transition: transform .08s ease, box-shadow .08s ease, background-color .1s ease, color .1s ease; }
  .tecla:hover, .tienda:hover .tienda__cta { background-color: #5A3629; background-image: none; color: #FFFFFF; --borde: #2A1813; }
  .tecla--verde:hover { background-color: #24422A; background-image: none; color: #FFFFFF; --borde: #13261A; }
  .ficha { transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease; }
  .ficha:hover { background-color: #E8D6B8; }
  .icono:hover { background: rgba(255, 250, 240, .7); }
}

/* tarjetas del gadget: borde tipo neón que va cambiando de color */
.g-panel {
  border: 0; isolation: isolate; overflow: hidden;
  background: transparent;
  box-shadow: 0 0 22px rgba(140,170,255,.26), 0 30px 60px rgba(0,0,0,.45);
}
.g-panel::before {
  content: ""; position: absolute; z-index: -2; left: 50%; top: 50%;
  width: 180%; aspect-ratio: 1; margin: -90% 0 0 -90%;
  background: conic-gradient(from 0deg, #6FE3FF, #9A7BFF, #FF8FCB, #FFB35C, #6FE3FF);
  animation: girar 8s linear infinite;
}
.g-panel::after {
  content: ""; position: absolute; z-index: -1; inset: 1.5px;
  border-radius: 16.5px;
  background: linear-gradient(160deg, rgba(20,18,38,.96), rgba(10,11,22,.96));
}
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes neon-sombra {
  0%, 100% { box-shadow: 0 0 22px rgba(111,227,255,.28), 0 30px 60px rgba(0,0,0,.45); }
  33% { box-shadow: 0 0 22px rgba(154,123,255,.28), 0 30px 60px rgba(0,0,0,.45); }
  66% { box-shadow: 0 0 22px rgba(255,179,92,.24), 0 30px 60px rgba(0,0,0,.45); }
}
@media (prefers-reduced-motion: reduce) { .g-panel, .g-panel::before, .seguir { animation: none; } }

#biblioCubre .cubre__img, .libro3d-escena { will-change: transform; }

/* Rendimiento: las animaciones continuas se pausan en lo que no se ve.
   GSAP marca lo visible con "visibility: inherit" y lo oculto con "visibility: hidden". */
.escena:not(.escena--pc):not([style*="visibility: inherit"]) *,
.escena:not(.escena--pc):not([style*="visibility: inherit"]) *::before,
.escena[style*="visibility: hidden"] *,
.escena[style*="visibility: hidden"] *::before,
.g-panel:not([style*="visibility: inherit"]),
.g-panel:not([style*="visibility: inherit"])::before,
.columna:not([style*="visibility: inherit"]) * { animation-play-state: paused !important; }

/* Cursores retro pixelados (solo con mouse). El segundo valor es la punta. */
@media (hover: hover) and (pointer: fine) {
  html, body {
    cursor: url("../img/cursor-flecha.png") 0 0, auto;
    cursor: image-set(url("../img/cursor-flecha.png") 1x, url("../img/cursor-flecha@2x.png") 2x) 0 0, auto;
  }
  a, button, label, [role="button"], .tecla, .icono, .hilo__nudo, .indice__lista button {
    cursor: url("../img/cursor-mano.png") 5 0, pointer;
    cursor: image-set(url("../img/cursor-mano.png") 1x, url("../img/cursor-mano@2x.png") 2x) 5 0, pointer;
  }
  .tienda, .ficha, .obra__marco, [data-caso] {
    cursor: url("../img/cursor-mano.png") 5 0, pointer;
    cursor: image-set(url("../img/cursor-mano.png") 1x, url("../img/cursor-mano@2x.png") 2x) 5 0, pointer;
  }
}

/* Rendimiento del hover: cada elemento interactivo es su propia capa,
   así su efecto no obliga a redibujar la escena entera que lo contiene. */
@media (hover: hover) {
  .tecla, .icono, .tienda, .ficha, .obra__marco, .hilo__nudo { will-change: transform; }
  .tienda__toldo { transition-duration: .2s; }
}
.marco__paralaje { will-change: transform; }

/* ---- Biblioteca: libros apoyados y tu libro con la luz cálida de la escena ---- */
.libros-sombra {
  position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 24%;
  pointer-events: none; will-change: transform;
  background:
    radial-gradient(closest-side, rgba(40,15,8,.7), transparent) 24% 100% / 40% 60% no-repeat,
    radial-gradient(closest-side, rgba(40,15,8,.7), transparent) 79% 100% / 42% 60% no-repeat,
    radial-gradient(closest-side, rgba(40,15,8,.6), transparent) 52% 100% / 24% 45% no-repeat,
    linear-gradient(to top, rgba(40,15,8,.5), rgba(40,15,8,.18) 40%, transparent 100%);
}
.libro3d__tapa::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(100deg, rgba(110,55,20,.32) 0%, rgba(255,175,95,.2) 40%, rgba(255,190,120,.14) 60%, rgba(90,40,15,.36) 100%);
}
.libro3d__lomo {
  background: linear-gradient(90deg, #C9B08A, #EEDCBD 45%, #D5BE98) !important;
  box-shadow: inset 0 14px 0 -10px #C89B45, inset 0 -14px 0 -10px #C89B45;
}
.libro3d__lomo span { color: #4A2B21 !important; }
.libro3d__contratapa { background: #E2CFAE !important; }
.libro3d__arriba, .libro3d__abajo { background: #E3D0AE !important; }
.libro3d__hojas { background: repeating-linear-gradient(90deg, #F6E9D2 0 2px, #DCC8A6 2px 3px) !important; }

/* ---- SuperGadget en 3D ---- */
.gadget__3d { position: absolute; z-index: 1; left: -45%; top: -14%; width: 190%; height: 128%; display: none; pointer-events: none; }
.gadget.con-3d .gadget__3d { display: block; }
.gadget.con-3d .gadget__respaldo { visibility: hidden; }
.gadget.con-3d .gadget__haz { left: 66%; top: 44%; }

/* listas dentro de las fichas de caso */
.caso__lista { margin: 0 0 1rem; padding-left: 1.2rem; display: grid; gap: .45rem; max-width: 64ch; }
.caso__lista li { line-height: 1.55; }
.caso__ficha--grande { margin: .6rem 0 1rem; }

/* comparaciones antes / después dentro de las fichas */
.comparacion { display: grid; gap: 1.1rem; margin: 1.2rem 0 1.8rem; }
.comparacion figure { margin: 0; position: relative; }
.comparacion .caso__img { margin: 0; }
.comparacion--lado { grid-template-columns: 1fr 1fr; align-items: start; }
.comparacion__etiqueta {
  position: absolute; z-index: 1; top: .6rem; left: .6rem;
  padding: .25rem .6rem; border-radius: 999px;
  background: #5A3629; color: #fff; font: 700 12px/1.2 var(--f-texto); letter-spacing: .02em;
}
.comparacion__etiqueta--despues { background: var(--hoja); }
@media (max-width: 900px) { .comparacion--lado { grid-template-columns: 1fr; } }

.caso__img--celular { max-width: 300px; margin: .6rem 0 1.4rem; }
.caso__destacado { margin: 0 0 1.6rem; }
.comparacion .caso__img--mock { max-width: 72%; }

/* ============================================================
   MAPA ILUSTRADO INTERACTIVO (ficha del mapa)
   ============================================================ */
.mapa { position: relative; margin: .6rem 0 1.4rem; border-radius: 12px; overflow: hidden; background: #2f86c9; box-shadow: 0 10px 30px rgba(42,24,19,.15); }
.mapa__img { display: block; width: 100%; height: auto; }
.mapa__pin {
  position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  background: radial-gradient(circle, rgba(255,255,255,.95) 0 34%, rgba(255,255,255,.45) 36% 62%, rgba(255,255,255,0) 64%);
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
.mapa__pin::before { /* el pin rojo */
  content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -11px 0 0 -7px;
  background: #E0323A; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  box-shadow: inset 0 0 0 3px #E0323A, inset 0 0 0 5px #fff;
}
.mapa__pin::after { /* latido */
  content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(255,255,255,.8);
  animation: latidoPin 2.2s ease-out infinite;
}
@keyframes latidoPin { 0% { transform: scale(.7); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
.mapa__nombre {
  position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translate(-50%, 4px);
  white-space: nowrap; padding: .3rem .6rem; border-radius: 6px;
  background: var(--espresso); color: #fff; font: 600 12.5px/1.2 var(--f-texto);
  opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s;
}
.mapa__pin:hover .mapa__nombre, .mapa__pin:focus-visible .mapa__nombre { opacity: 1; transform: translate(-50%, 0); }
.mapa__zoom { position: absolute; inset: 0; z-index: 2; background: #2f86c9; display: grid; }
.mapa__zoom[hidden] { display: none; }
.mapa__detalle { width: 100%; height: 100%; object-fit: contain; }
.mapa__barra {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: .7rem;
  padding: .6rem .7rem; background: linear-gradient(0deg, rgba(20,12,8,.72), rgba(20,12,8,0));
}
.mapa__titulo { margin: 0 auto 0 .2rem; color: #fff; font: 700 15px/1.2 var(--f-texto); text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.mapa__flechas { display: flex; gap: .4rem; }
.mapa__flechas .tecla { min-width: 38px; font-size: 18px; }
@media (max-width: 900px) { .mapa__pin { width: 36px; height: 36px; margin: -18px 0 0 -18px; } .mapa__titulo { font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .mapa__pin::after { animation: none; } }

/* logos de plataformas en la tarjeta de la calle */
.plataformas { margin: 1.1rem 0 1.2rem; padding-top: 1rem; border-top: 2px dotted rgba(42,24,19,.18); }
.plataformas__titulo { margin: 0 0 .7rem; font: 700 13px/1.2 var(--f-texto); color: var(--ladrillo); letter-spacing: .02em; }
.plataformas__logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem; }
.plataformas__logos img { display: block; height: 22px; width: auto; }
@media (max-width: 900px) { .plataformas__logos img { height: 18px; } }

/* ============================================================
   RESULTADOS DE SEO: tarjetas de "vidrio" sobre la ventana
   (vidrio simulado: transparencias + borde luminoso, sin blur real,
   para que no trabe el scroll)
   ============================================================ */
.seo-cristal {
  position: absolute; z-index: 3;
  right: clamp(1rem, 5vw, 5rem); top: 50%;
  width: min(500px, 38vw);
  display: grid; gap: .7rem;
  color: #FFF8EC;
  opacity: 0; visibility: hidden;
}
.cristal {
  position: relative;
  padding: .9rem 1.1rem;
  border-radius: 16px;
  /* cristal ahumado: brillo blanco arriba de un tinte violeta oscuro, para leerse sobre las luces */
  background: linear-gradient(135deg, rgba(255,255,255,.2), rgba(255,255,255,.05) 55%, rgba(255,255,255,.1)), rgba(24,16,40,.5);
  border: 1px solid rgba(255,255,255,.38);
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(255,255,255,.08), 0 18px 40px rgba(10,6,20,.38);
}
.cristal::before { /* reflejo diagonal del vidrio */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.14) 38%, transparent 46%);
}
.cristal--cabecera { padding: .75rem 1.1rem; }
.cristal__sobre { margin: 0; font: 700 13px/1.2 var(--f-texto); letter-spacing: .04em; text-transform: uppercase; color: #FFD9A0; }
.cristal__periodo { margin: .25rem 0 0; font-size: 13.5px; color: rgba(255,248,236,.85); }
.cristal-grilla { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.cristal--cifra p { margin: 0; font-size: 13px; line-height: 1.35; color: rgba(255,248,236,.88); }
.cristal p.cristal__num { font: 400 clamp(1.9rem, 2.8vw, 2.6rem)/1 var(--f-display); color: #FFC870; margin-bottom: .35rem; text-shadow: 0 2px 12px rgba(0,0,0,.35); }
.cristal__num small { font: 600 .45em/1 var(--f-texto); color: rgba(255,248,236,.8); }
.cristal-grilla .cristal--cifra:nth-child(2) .cristal__num { color: #9FE3FF; }
.cristal-grilla .cristal--cifra:nth-child(3) .cristal__num { color: #FFB08A; }
.cristal-grilla .cristal--cifra:nth-child(4) .cristal__num { color: #CFE3A8; }
.barras { list-style: none; margin: .7rem 0 .4rem; padding: 0; display: grid; gap: .32rem; }
.barras li { display: grid; grid-template-columns: 4.6rem 1fr 3.6rem; align-items: center; gap: .6rem; font-size: 12.5px; }
.barras span { color: rgba(255,248,236,.85); }
.barras i { display: block; height: 8px; border-radius: 999px; width: calc(var(--v) * 100%); min-width: 6px;
  background: linear-gradient(90deg, #9A7BFF, #FF8FCB 55%, #FFB35C); transform-origin: left center; }
.barras b { font-weight: 700; text-align: right; color: #B8F0A0; }
.barras li.neg i { background: #FF7A7A; }
.barras li.neg b { color: #FF9C9C; }
.cristal__nota { margin: .3rem 0 0; font-size: 11.5px; color: rgba(255,248,236,.62); }
@media (max-width: 900px) {
  .seo-cristal { left: .8rem; right: .8rem; top: 4.6rem; width: auto; gap: .5rem; }
  .cristal--barras, .cristal--cabecera { display: none; }
  .cristal { padding: .6rem .8rem; }
  .cristal p.cristal__num { font-size: 1.6rem; }
  .cristal--cifra p { font-size: 12px; }
  .columna--izq > .panel { max-height: 50vh; }
}

.panel__sobre--google { display: flex; align-items: center; gap: .45rem; }
.logo-google { width: 18px; height: 18px; flex: none; }
.cristal__nota { line-height: 1.45; }

/* <picture> solo elige la imagen (liviana en celular); no participa del diseño */
picture { display: contents; }

/* ============================================================
   AJUSTES RESPONSIVE PARA NOTEBOOKS / VIEWPORTS BAJOS
   Mantienen la composición y las animaciones originales.
   Solo evitan recortes y desbordes en resoluciones intermedias.
   ============================================================ */
@media (min-width: 901px) and (max-width: 1450px) {
  .barra { padding-right: clamp(1rem, 2vw, 1.6rem); }

  /* Los paneles laterales conservan su lugar, pero ceden ancho antes
     de invadir el contenido opuesto en notebooks de 1280/1366 px. */
  .columna--izq {
    left: clamp(3.2rem, 4.2vw, 4.5rem);
    width: min(390px, 31vw);
  }
  .panel { padding: clamp(1.35rem, 2vw, 1.8rem); }
  .panel h2 { font-size: clamp(1.65rem, 2.35vw, 2.25rem); }
  .panel p, .panel__lista { font-size: clamp(13px, 1.05vw, 14.5px); }

  .seo-cristal {
    right: clamp(1.2rem, 3.2vw, 3.5rem);
    width: min(460px, 36vw);
  }
  .cristal-grilla { gap: .55rem; }
  .cristal { padding: .75rem .9rem; }
  .cristal p.cristal__num { font-size: clamp(1.7rem, 2.35vw, 2.35rem); }
  .cristal--cifra p { font-size: clamp(11.5px, .92vw, 13px); }
  .barras { gap: .25rem; }
  .barras li { grid-template-columns: 4rem 1fr 3.25rem; gap: .45rem; font-size: 11.5px; }
  .cristal__nota { font-size: 10.5px; }

  /* Otros paneles absolutos usan el mismo criterio para que el sitio
     no dependa de un monitor de escritorio ancho. */
  .g-panel { width: min(390px, 34vw); }
  .g-panel[data-lado="izq"] { left: clamp(3.2rem, 7vw, 7rem); }
  .g-panel[data-lado="der"] { right: clamp(1.2rem, 4vw, 4rem); }
  .atril__texto { left: clamp(3.2rem, 4.5vw, 4.8rem); width: min(250px, 19vw); }
}

/* En notebooks 16:9 la altura suele ser el límite real (768/800 px).
   Reducimos aire interno, no la escala de las escenas ni sus efectos. */
@media (min-width: 901px) and (max-height: 850px) {
  .columna > .panel {
    max-height: calc(100vh - 7.5rem);
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }
  .columna { gap: .55rem; }
  .panel__sobre { margin-bottom: .35rem; }
  .panel--seo h2 { font-size: clamp(1.55rem, 2.2vw, 2.05rem); }
  .panel--seo p { margin-bottom: .7rem; }
  .panel--seo .cifras { margin: .7rem 0; }
  .panel--seo .panel__lista { gap: .22rem; line-height: 1.4; }
  .seguir { padding-top: .45rem; padding-bottom: .45rem; }

  .seo-cristal {
    gap: .45rem;
    max-height: calc(100vh - 6.5rem);
  }
  .cristal { padding-top: .6rem; padding-bottom: .6rem; }
  .cristal--cabecera { padding-top: .55rem; padding-bottom: .55rem; }
  .cristal__periodo { margin-top: .15rem; }
  .barras { margin-top: .45rem; margin-bottom: .25rem; }
  .cristal__nota { margin-top: .2rem; line-height: 1.3; }
}

@media (min-width: 901px) and (max-height: 720px) {
  /* Último resguardo para notebooks con poca altura útil por barras del navegador. */
  .seo-cristal { gap: .35rem; }
  .cristal--cabecera { display: none; }
  .cristal { padding: .5rem .75rem; }
  .cristal p.cristal__num { margin-bottom: .2rem; }
  .barras li { line-height: 1.2; }
  .panel--seo .panel__lista { font-size: 13px; }
}