/* ============================================================================
   Dossier de graduaciones · hoja de estilo única
   ============================================================================
   Una sola hoja, servida desde este dominio, sin framework. La web hermana
   (tugraduacionmadrid.es) acabó juntando sus 26 hojas en una por lo mismo:
   cada hoja suelta es un viaje al servidor antes de poder pintar la primera
   letra, y este documento se abre casi siempre desde un móvil con datos.

   La invalidación es el `?v=` del <link>. No hay build ni nombres con hash.
   ========================================================================= */

/* ------------------------------------------------------------------ LETRAS */
/* Las mismas tres de la casa, servidas desde /letras/ (no desde recursos/,
   que es la carpeta que el despliegue excluye). Cada una en dos trozos por
   `unicode-range`: el navegador solo baja el segundo si la página tiene
   caracteres raros, cosa que en castellano casi nunca pasa. */
@font-face{font-family:'Franklin';src:url('letras/franklin-latin.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Franklin';src:url('letras/franklin-latin-ext.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap;unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Archivo';src:url('letras/archivo-latin.v2.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';src:url('letras/archivo-latin-ext.v2.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'GeistMono';src:url('letras/geistmono-latin.woff2') format('woff2');font-weight:400 600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ------------------------------------------------------------------ COLORES */
:root{
  --negro:#08080a;          /* el fondo de todo */
  --negro2:#0e0e12;         /* tarjetas y bandas */
  --tinta:#f6f4ef;          /* el texto */
  --tinta-baja:#a8a49c;     /* texto secundario */
  --oro:#d4af37;            /* el acento de la casa, del sello del logo */
  --oro-claro:#ffd46a;
  --oro-hondo:#8c6a2e;
  --linea:rgba(255,255,255,.10);
  --linea-oro:rgba(212,175,55,.32);
  --ancho:min(1180px,92vw);
  --radio:18px;
  /* Alto real de la barra de arriba (aviso incluido). Lo mide el JavaScript en
     cuanto carga y cada vez que cambia el ancho de la ventana. El valor de
     aquí es solo el de partida: en el móvil, con el aviso de borrador partido
     en tres líneas, la barra pasa de 96 a 170 px y con un número fijo el
     primer renglón de la portada quedaba tapado. */
  --alto-barra:96px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--negro);color:var(--tinta);
  font-family:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.6;
  overflow-x:hidden;
}
/* `height:auto` no es adorno: las <img> llevan width y height en el HTML para
   que el navegador reserve el hueco y la página no dé saltos al cargar, y esos
   atributos entran como alto fijo. Sin esta línea, una foto de 800×600 puesta
   en una ficha de 380 px de ancho se dibuja de 600 px de alto y las fichas de
   los espacios crecían de 440 a 716 px cada una. */
img,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--oro-claro);outline-offset:3px}

/* Quien lleva el móvil en «reducir movimiento» no ve ni contadores subiendo ni
   apariciones al hacer scroll. No es un adorno: en esta página hay bastante
   movimiento y a algunas personas les marea de verdad. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

.contenedor{width:var(--ancho);margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* --------------------------------------------------------------- TITULARES */
h1,h2,h3,.cifra-num{font-family:'Franklin','Arial Black',Arial,sans-serif;font-weight:900;letter-spacing:-.02em;line-height:.98;margin:0}
h1{font-size:clamp(44px,9vw,116px);text-transform:uppercase}
h2{font-size:clamp(32px,5.6vw,68px);text-transform:uppercase}
h3{font-size:clamp(19px,2.2vw,24px);line-height:1.15;letter-spacing:-.01em}
p{margin:0 0 1em}
.parrafo-guia{color:var(--tinta-baja);max-width:62ch;font-size:clamp(16px,1.5vw,19px)}

/* El numerito de lámina. Es el detalle que hace que esto parezca un dossier y
   no una landing: en el PDF de la competencia cada página lleva cabecera y pie
   con la marca y el año, y eso es justo lo que te dice «esto es un documento». */
.lamina-num{
  font-family:'GeistMono',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--oro);display:flex;align-items:center;gap:12px;margin-bottom:22px;
}
.lamina-num::after{content:'';flex:1;height:1px;background:var(--linea-oro)}

/* ------------------------------------------------------------- BARRA DE ARRIBA */
.barra{
  position:fixed;inset:0 0 auto 0;z-index:80;
  background:rgba(8,8,10,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linea);
}
.barra-dentro{width:var(--ancho);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0}
.barra .marca{display:flex;align-items:center;gap:10px;min-width:0}
.barra .marca img{height:38px;width:auto}
.barra .marca span{
  font-family:'GeistMono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tinta-baja);white-space:nowrap;
}
.barra nav{display:flex;gap:4px;align-items:center}
.barra nav a{
  font-size:13px;padding:8px 11px;border-radius:10px;color:var(--tinta-baja);
  transition:color .2s,background .2s;white-space:nowrap;
}
.barra nav a:hover,.barra nav a[aria-current="true"]{color:var(--tinta);background:rgba(255,255,255,.07)}
@media (max-width:900px){.barra nav{display:none}.barra .marca span{display:none}}

/* El hilo de progreso: la única pista de «cuánto queda» en un documento que se
   lee de arriba abajo y no tiene paginación. */
.progreso{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:linear-gradient(90deg,var(--oro-hondo),var(--oro-claro))}

/* ------------------------------------------------------------------ BOTONES */
.btn{
  display:inline-flex;align-items:center;gap:9px;padding:14px 22px;border-radius:999px;
  font-weight:700;font-size:15px;border:1px solid transparent;cursor:pointer;
  transition:transform .18s,background .18s,border-color .18s;
}
.btn:hover{transform:translateY(-2px)}
.btn-oro{background:linear-gradient(135deg,var(--oro-claro),var(--oro));color:#1a1508;box-shadow:0 10px 30px rgba(212,175,55,.22)}
.btn-linea{border-color:var(--linea);background:rgba(255,255,255,.04);color:var(--tinta)}
.btn-linea:hover{border-color:var(--linea-oro)}

/* --------------------------------------------------------------- AVISO BORRADOR */
/* Mientras los precios no estén confirmados, esto va arriba del todo y no se
   puede quitar sin querer: el peligro real es que alguien mande el enlace a un
   instituto con unos precios que nadie ha aprobado. */
/* Va DENTRO de la barra fija, no encima: puesto antes del <header> quedaba
   tapado por él y el aviso más importante de la página era invisible. */
.aviso{
  background:repeating-linear-gradient(45deg,#3a2c07,#3a2c07 12px,#332706 12px,#332706 24px);
  border-bottom:1px solid var(--linea-oro);color:#ffe9a8;
  font-size:13.5px;padding:9px 0;text-align:center;
}
@media(max-width:700px){.aviso{font-size:11.5px;line-height:1.35;padding:7px 12px}}
.aviso strong{color:#fff}

/* ------------------------------------------------------------------ PORTADA */
.portada{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;padding:calc(var(--alto-barra) + 36px) 0 56px}
.portada video,.portada .cartel{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.portada .velo{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(8,8,10,.86) 0%,rgba(8,8,10,.45) 38%,rgba(8,8,10,.94) 100%);
}
.portada .contenedor{position:relative;z-index:2}
.portada .sello{
  display:inline-flex;align-items:center;gap:10px;border:1px solid var(--linea-oro);
  border-radius:999px;padding:7px 15px;margin-bottom:20px;
  font-family:'GeistMono',monospace;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--oro-claro);
}
.portada h1{max-width:16ch;text-wrap:balance}
.portada h1 em{font-style:normal;background:linear-gradient(135deg,var(--oro-claro),var(--oro),var(--oro-hondo));-webkit-background-clip:text;background-clip:text;color:transparent}
.portada .bajada{margin:22px 0 28px;max-width:56ch;font-size:clamp(17px,1.9vw,21px);color:#ded9d0}
.portada .acciones{display:flex;flex-wrap:wrap;gap:12px}
.portada .pie-portada{
  margin-top:44px;padding-top:20px;border-top:1px solid var(--linea);
  display:flex;flex-wrap:wrap;gap:26px 40px;
  font-family:'GeistMono',monospace;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-baja);
}
/* En el móvil los cuatro datos caían uno por línea y se comían media pantalla:
   letra más pequeña, menos aire y menos espaciado entre letras para que entren
   de dos en dos. */
@media(max-width:700px){
  .portada .pie-portada{margin-top:28px;gap:10px 20px;font-size:10px;letter-spacing:.08em}
}

/* ------------------------------------------------------------------ SECCIONES */
section{padding:clamp(64px,9vw,120px) 0;border-top:1px solid var(--linea);position:relative;scroll-margin-top:calc(var(--alto-barra) + 12px)}
section.banda{background:var(--negro2)}
.cabecera-seccion{margin-bottom:clamp(32px,5vw,56px)}
.cabecera-seccion h2{margin-bottom:14px}

/* --------------------------------------------------------------------- REJILLAS */
.rejilla{display:grid;gap:16px}
@media(min-width:760px){.rejilla.dos{grid-template-columns:repeat(2,1fr)}.rejilla.tres{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1040px){.rejilla.cuatro{grid-template-columns:repeat(4,1fr)}}

.tarjeta{
  background:rgba(255,255,255,.035);border:1px solid var(--linea);border-radius:var(--radio);
  padding:24px;transition:border-color .25s,transform .25s;
}
.tarjeta:hover{border-color:var(--linea-oro);transform:translateY(-3px)}
.tarjeta .icono{font-size:26px;line-height:1;margin-bottom:14px}
.tarjeta h3{margin-bottom:8px}
.tarjeta p{color:var(--tinta-baja);font-size:15.5px;margin:0}

/* ------------------------------------------------------------------- CIFRAS */
.cifras{display:grid;gap:1px;background:var(--linea);border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden}
@media(min-width:640px){.cifras{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.cifras{grid-template-columns:repeat(3,1fr)}}
.cifra{background:var(--negro);padding:32px 26px}
.cifra-num{
  font-size:clamp(44px,6vw,68px);
  background:linear-gradient(135deg,var(--oro-claro),var(--oro));-webkit-background-clip:text;background-clip:text;color:transparent;
  /* Las cifras se cuentan solas al aparecer; con anchura tabular no bailan de
     ancho mientras suben, que si no la línea de abajo va dando saltos. */
  font-variant-numeric:tabular-nums;
}
.cifra-txt{margin-top:10px;font-weight:700;font-size:16px}
.cifra-nota{margin-top:4px;color:var(--tinta-baja);font-size:13.5px}
.pie-fuente{margin-top:20px;color:var(--tinta-baja);font-size:13px}

/* -------------------------------------------------------------------- PACKS */
.packs{display:grid;gap:18px;align-items:start}
@media(min-width:900px){.packs{grid-template-columns:repeat(3,1fr)}}
.pack{border:1px solid var(--linea);border-radius:var(--radio);padding:28px 26px;background:rgba(255,255,255,.03);position:relative;display:flex;flex-direction:column;height:100%}
.pack.destacado{border-color:var(--linea-oro);background:linear-gradient(180deg,rgba(212,175,55,.09),rgba(255,255,255,.02))}
.pack .etiqueta{
  position:absolute;top:-11px;left:26px;background:linear-gradient(135deg,var(--oro-claro),var(--oro));color:#1a1508;
  font-family:'GeistMono',monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  padding:5px 12px;border-radius:999px;
}
.pack h3{font-size:clamp(26px,3vw,34px);text-transform:uppercase}
.pack .precio{display:flex;align-items:baseline;gap:6px;margin:14px 0 4px}
.pack .precio b{font-family:'Franklin',sans-serif;font-weight:900;font-size:clamp(40px,5vw,56px);line-height:1;color:var(--oro-claro)}
.pack .precio span{color:var(--tinta-baja);font-size:14px}
.pack .gancho{color:var(--tinta-baja);font-size:15px;margin:10px 0 20px}
.pack ul{list-style:none;padding:0;margin:0 0 22px;display:grid;gap:9px}
.pack li{position:relative;padding-left:24px;font-size:15px;color:#ded9d0}
.pack li::before{content:'';position:absolute;left:0;top:.55em;width:11px;height:6px;border-left:2px solid var(--oro);border-bottom:2px solid var(--oro);transform:rotate(-45deg)}
.pack .btn{margin-top:auto;justify-content:center}
/* Marca de «esto todavía no está aprobado». Se va sola cuando el generador
   escribe la página con PRECIOS_CONFIRMADOS a true. */
.pack.sin-confirmar .precio b{text-decoration:underline dotted var(--oro-hondo);text-underline-offset:8px}

/* ------------------------------------------------------------------- LA NOCHE */
.noche{position:relative;padding-left:0}
.noche ol{list-style:none;margin:0;padding:0;display:grid;gap:0}
.noche li{display:grid;grid-template-columns:92px 1fr;gap:20px;padding:22px 0;border-top:1px solid var(--linea)}
.noche li:first-child{border-top:0}
.noche .hora{font-family:'GeistMono',monospace;font-size:15px;color:var(--oro);letter-spacing:.04em;padding-top:2px}
.noche h3{margin-bottom:6px}
.noche p{color:var(--tinta-baja);font-size:15.5px;margin:0}
@media(max-width:560px){.noche li{grid-template-columns:1fr;gap:6px}}

/* ------------------------------------------------------------------ ESPACIOS */
/* Rejilla de fichas. Cada ficha enseña UNA foto —la portada— y guarda el resto
   en el documento para el visor. Ver el comentario de `espacio()` en
   scripts/generar.mjs para el porqué. */
/* El `hidden` del panel que no toca lo pone el JavaScript. Sin esta línea no
   servía de nada: `.espacios{display:grid}` gana en la cascada al display:none
   que el navegador le da a [hidden], y se veían los locales Y las fincas a la
   vez, con la sección midiendo el doble. */
[hidden]{display:none!important}
.espacios{display:grid;gap:16px}
@media(min-width:700px){.espacios{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.espacios{grid-template-columns:repeat(3,1fr)}}
.espacio{
  border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden;
  background:rgba(255,255,255,.03);display:flex;flex-direction:column;
  transition:border-color .25s,transform .25s;
}
.espacio:hover{border-color:var(--linea-oro);transform:translateY(-3px)}
.espacio-cab{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;padding:18px 20px 4px}
.espacio-cab h3{font-size:clamp(18px,2vw,21px);text-transform:uppercase}
.espacio-cab .zona{font-family:'GeistMono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--oro)}
.espacio p{padding:0 20px 20px;color:var(--tinta-baja);font-size:15px;margin:0}

/* La caja de la portada. Dentro están todas las fotos del sitio; solo se ve la
   primera. Las demás siguen en el documento para que el visor pueda pasarlas. */
.tira{position:relative;background:var(--negro2)}
.tira img{width:100%;aspect-ratio:4/3;object-fit:cover;cursor:zoom-in;display:block}
.tira img:not(:first-of-type){display:none}
.tira .cuenta{
  position:absolute;right:10px;bottom:10px;pointer-events:none;
  background:rgba(8,8,10,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid var(--linea);border-radius:999px;padding:5px 11px;
  font-family:'GeistMono',monospace;font-size:11px;letter-spacing:.1em;color:var(--tinta);
}
.sin-fotos{
  aspect-ratio:4/3;display:grid;place-items:center;background:var(--negro2);
  color:var(--tinta-baja);font-family:'GeistMono',monospace;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
}
.pestanas{display:flex;gap:8px;margin-bottom:24px;flex-wrap:wrap}
.pestana{
  padding:10px 18px;border-radius:999px;border:1px solid var(--linea);background:transparent;color:var(--tinta-baja);
  font-family:'Archivo',sans-serif;font-size:14px;font-weight:700;cursor:pointer;transition:.2s;
}
.pestana[aria-selected="true"]{background:linear-gradient(135deg,var(--oro-claro),var(--oro));color:#1a1508;border-color:transparent}

/* ------------------------------------------------------------------- GALERÍA */
.mosaico{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.mosaico img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;cursor:zoom-in;background:var(--negro2)}
@media(min-width:900px){.mosaico img:nth-child(7n+1){grid-column:span 2;grid-row:span 2;aspect-ratio:1}}

/* -------------------------------------------------------------------- VÍDEOS */
.videos{display:grid;gap:14px}
@media(min-width:760px){.videos{grid-template-columns:repeat(3,1fr)}}
.videos figure{margin:0;border-radius:var(--radio);overflow:hidden;border:1px solid var(--linea);background:var(--negro2)}
.videos video{width:100%;aspect-ratio:9/16;object-fit:cover;background:#000}
.videos figcaption{padding:12px 16px;font-size:14px;color:var(--tinta-baja)}

/* ---------------------------------------------------------------------- APP */
.app-caja{display:grid;gap:36px;align-items:center}
@media(min-width:940px){.app-caja{grid-template-columns:1fr 1fr}}
.app-cifras{display:flex;flex-wrap:wrap;gap:28px 42px;margin:26px 0 30px}
.app-cifras b{display:block;font-family:'Franklin',sans-serif;font-weight:900;font-size:clamp(30px,4vw,42px);color:var(--oro-claro);line-height:1;font-variant-numeric:tabular-nums}
.app-cifras span{font-size:14px;color:var(--tinta-baja)}

/* ------------------------------------------------------------------- PASOS */
.pasos{counter-reset:paso;display:grid;gap:16px}
@media(min-width:900px){.pasos{grid-template-columns:repeat(4,1fr)}}
.paso{border:1px solid var(--linea);border-radius:var(--radio);padding:26px 22px;background:rgba(255,255,255,.03)}
.paso .n{
  font-family:'Franklin',sans-serif;font-weight:900;font-size:46px;line-height:1;
  background:linear-gradient(135deg,var(--oro-claro),var(--oro-hondo));-webkit-background-clip:text;background-clip:text;color:transparent;
  display:block;margin-bottom:12px;
}
.paso h3{margin-bottom:8px}
.paso p{color:var(--tinta-baja);font-size:15px;margin:0}

/* --------------------------------------------------------------- PREGUNTAS */
.pregunta{border-top:1px solid var(--linea)}
.pregunta:last-child{border-bottom:1px solid var(--linea)}
.pregunta summary{
  cursor:pointer;list-style:none;padding:20px 44px 20px 0;position:relative;
  font-weight:700;font-size:clamp(16px,2vw,19px);
}
.pregunta summary::-webkit-details-marker{display:none}
.pregunta summary::after{
  content:'+';position:absolute;right:6px;top:50%;transform:translateY(-50%);
  color:var(--oro);font-size:24px;font-weight:400;transition:transform .2s;
}
.pregunta[open] summary::after{content:'−'}
.pregunta .respuesta{padding:0 44px 22px 0;color:var(--tinta-baja);font-size:16px;max-width:80ch}

/* ------------------------------------------------------------------ CONTACTO */
.contacto{text-align:center}
/* El numerito de lámina es un flex con una raya que se estira: centrado a la
   fuerza, si no queda pegado a la izquierda en el único apartado centrado. */
.contacto .lamina-num{justify-content:center}
.contacto .lamina-num::after{display:none}
.contacto h2{margin-bottom:18px}
.contacto .acciones{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin:28px 0 40px}
.contacto .datos{
  display:flex;justify-content:center;flex-wrap:wrap;gap:12px 34px;
  font-family:'GeistMono',monospace;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-baja);
}
.contacto .datos a:hover{color:var(--oro-claro)}

footer{padding:40px 0 120px;border-top:1px solid var(--linea);color:var(--tinta-baja);font-size:13px;text-align:center}
footer p{margin:0 0 6px}

/* --------------------------------------------------- BOTÓN FLOTANTE WHATSAPP */
/* Abajo a la derecha y por encima de todo: en un dossier el objetivo es que
   escriban, y en el móvil el final de la página queda a diez pantallas. */
.wa{
  position:fixed;right:16px;bottom:16px;z-index:90;
  display:inline-flex;align-items:center;gap:9px;padding:14px 20px;border-radius:999px;
  background:#25d366;color:#04240f;font-weight:800;font-size:15px;
  box-shadow:0 12px 34px rgba(0,0,0,.5);
}
.wa svg{width:20px;height:20px;fill:currentColor}
@media(max-width:520px){.wa span{display:none}.wa{padding:16px;border-radius:50%}}

/* ------------------------------------------------------------------- VISOR */
.visor{position:fixed;inset:0;z-index:200;background:rgba(4,4,6,.96);display:none;align-items:center;justify-content:center;padding:24px}
.visor[open],.visor.abierto{display:flex}
.visor img{max-width:min(1200px,94vw);max-height:88vh;width:auto;height:auto;border-radius:10px}
.visor button{
  position:absolute;background:rgba(255,255,255,.08);border:1px solid var(--linea);color:#fff;
  width:48px;height:48px;border-radius:50%;font-size:22px;cursor:pointer;line-height:1;
}
.visor .cerrar{top:18px;right:18px}
.visor .ant{left:14px;top:50%;transform:translateY(-50%)}
.visor .sig{right:14px;top:50%;transform:translateY(-50%)}

/* -------------------------------------------------------- APARICIÓN AL BAJAR */
/* Ojo al selector: el bloque solo se esconde si la clase `js-animar` está en
   el <html>, y esa clase la pone el propio JavaScript en su primera línea.
   Escrito de la forma evidente —`.aparece{opacity:0}` a secas— el día que el
   JavaScript no llegue a ejecutarse (un navegador dentro de otra app, un
   bloqueador, un fichero a medio bajar) el dossier entero se ve en negro y sin
   una sola letra. Así, si el JavaScript falla, se ve todo quieto: más feo,
   pero legible. */
.js-animar .aparece{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.js-animar .aparece.visible{opacity:1;transform:none}