/* La hoja comun del sitio. La genera plantilla.py: no se edita a mano. */

:root{
  color-scheme:light;
  --papel:#f6f5f4;--blanco:#ffffff;--borde:rgba(0,0,0,.08);--niebla:#f8fafb;
  --tinta:rgba(0,0,0,.95);--tinta-fuerte:#000000;--grafito:#615d59;--piedra:#6a6a6a;--apagado:rgba(0,0,0,.54);
  --azul:#0075de;--azul-tinte:#e6f3fe;
  --marigold:#ffb110;--coral:#f64932;--cielo:#62aef0;--medianoche:#02093a;
  --navy:#1E3A5F;--verde:#2FBF9B;--cian:#1F9EC4;--azul-marca:#1E6FB8;
  --ancho:1160px;--r-card:12px;--r-btn:8px;--r-pill:9999px;--r-sm:4px;
  --sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --serif:"Source Serif 4",ui-serif,Georgia,serif;
  --marca:"Quicksand",var(--sans);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
p{margin:0}
.wrap{max-width:var(--ancho);margin:0 auto;padding:0 24px}
.estrecho{max-width:760px}
h1{font-size:clamp(34px,5.2vw,56px);font-weight:600;line-height:1.1;letter-spacing:-.038em;margin:0;color:var(--tinta-fuerte);text-wrap:balance}
h2{font-size:clamp(23px,2.6vw,30px);font-weight:600;line-height:1.2;letter-spacing:-.02em;margin:38px 0 14px;color:var(--tinta-fuerte)}
h3{font-size:19px;font-weight:700;line-height:1.3;margin:0;color:var(--tinta-fuerte)}
.etiqueta{font-size:12px;font-weight:500;letter-spacing:.04em;color:var(--piedra);margin:0;text-transform:uppercase}
.wordmark{font-family:var(--marca);font-weight:600;letter-spacing:-.01em;color:var(--navy)}
.wordmark i{font-style:normal;color:var(--verde)}
.editorial{font-family:var(--serif);font-size:19px;line-height:1.6;color:var(--grafito)}
.cuerpo{color:var(--grafito)}
.btn{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:500;line-height:1;padding:13px 20px;border-radius:var(--r-btn);text-decoration:none;border:1px solid transparent;transition:background .2s ease,transform .2s ease}
.btn-azul{background:var(--azul);color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.btn-azul:hover,.btn-azul:focus-visible{background:#0064c0;transform:translateY(-1px)}
.btn-tinte{background:var(--azul-tinte);color:#005fb8}
.btn-tinte:hover,.btn-tinte:focus-visible{background:#d5eafd;transform:translateY(-1px)}
.btn .flecha{display:inline-block;transition:transform .22s cubic-bezier(.22,1,.36,1)}
.btn:hover .flecha,.btn:focus-visible .flecha{transform:translateX(4px)}

/* Un bloque de texto que no tiene indice al lado no se centra: se alinea
   con el titular y con todo lo demas de la pagina. Centrado en una
   columna de 760px dentro de una de 1160 quedaba flotando en el medio,
   con hueco a los dos lados y sin alinearse con nada. */
.seccion > .wrap.estrecho{max-width:var(--ancho)}
.seccion > .wrap.estrecho > *{max-width:76ch}
.seccion > .wrap.estrecho > .dibujo,
.seccion > .wrap.estrecho > .incluye{max-width:none}

/* ── La pagina del formulario ────────────────────────────────────────
   El formulario a la izquierda y, al lado, lo que pasa despues de darle
   a enviar. Es la duda que tiene todo el que deja su telefono en una
   web, asi que va junto al boton y no tres secciones mas abajo. */
.formulario-rejilla{display:grid;grid-template-columns:minmax(0,1fr) 300px;
  gap:clamp(24px,4vw,56px);align-items:start}
.form-lado{position:sticky;top:92px}
.form-lado-caja{background:var(--blanco);border:1px solid var(--borde);
  border-radius:12px;padding:24px}
.pasos-lado{margin:0;padding:0;list-style:none;counter-reset:paso}
.pasos-lado li{position:relative;padding:0 0 18px 0;font-size:14px;
  line-height:1.5;color:var(--grafito)}
.pasos-lado li:last-child{padding-bottom:0}
.pasos-lado b{display:block;color:var(--tinta-fuerte);font-weight:600;
  font-size:15px;margin-bottom:3px}
.form-lado-nota{margin:20px 0 0;padding-top:16px;font-size:13px;
  line-height:1.5;color:var(--piedra);border-top:1px solid var(--borde)}
@media(max-width:900px){
  .formulario-rejilla{grid-template-columns:1fr;gap:22px}
  .form-lado{position:static;order:-1}
}

/* ── Encabezado y lectura a dos columnas ─────────────────────────────
   Una columna de 760px centrada en una pantalla de 1400 deja media
   pagina vacia a cada lado y hace que la pagina parezca un documento
   sin maquetar. El titular ocupa su lado y la entradilla el suyo. */
.enc-rejilla{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(26px,4.5vw,68px);align-items:start}
.enc-rejilla h1{margin:10px 0 0}
.enc-lado{padding-top:6px}
.enc-lado .editorial{margin-top:0;max-width:46ch}
.enc-corto{margin:20px 0 0;padding:0;list-style:none;
  border-top:1px solid var(--borde)}
.enc-corto li{display:flex;gap:12px;padding:11px 0;font-size:15px;
  line-height:1.45;color:var(--grafito);border-bottom:1px solid var(--borde)}
.enc-corto b{color:var(--tinta-fuerte);font-weight:600;flex:0 0 auto;min-width:88px}

/* La lectura con su indice al lado. Son las secciones reales de la
   pagina, asi que ademas de llenar el hueco sirven para saltar. */
.lectura{display:grid;grid-template-columns:190px minmax(0,1fr);
  gap:clamp(22px,4vw,60px);align-items:start}
.indice{position:sticky;top:92px}
.indice p{margin:0 0 12px;font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--piedra);font-weight:600}
.indice ol{margin:0;padding:0;list-style:none;
  border-left:1px solid var(--borde)}
.indice li{margin:0}
.indice a{display:block;padding:7px 0 7px 14px;margin-left:-1px;
  border-left:2px solid transparent;color:var(--grafito);
  font-size:14px;line-height:1.4;text-decoration:none}
.indice a:hover,.indice a:focus-visible{color:var(--tinta-fuerte);
  border-left-color:var(--azul)}
.lectura .prosa > h2:first-child{margin-top:0}

@media(max-width:900px){
  .enc-rejilla{grid-template-columns:1fr;gap:18px;align-items:start}
  .enc-lado{padding-bottom:0}
  .lectura{grid-template-columns:1fr;gap:18px}
  .indice{position:static}
  .indice ol{display:flex;flex-wrap:wrap;gap:6px;border-left:0}
  .indice a{padding:6px 12px;border:1px solid var(--borde);
    border-radius:9999px;margin-left:0;font-size:13px}
  .indice a:hover,.indice a:focus-visible{border-color:var(--azul)}
}

/* ── La barra, con el menu por areas ─────────────────────── */
.nav{position:sticky;top:0;z-index:60;background:rgba(246,245,244,.86);backdrop-filter:blur(12px);box-shadow:0 .7px 1.462px rgba(0,0,0,.015),0 3px 9px rgba(0,0,0,.03)}
.nav-in{max-width:var(--ancho);margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:12px;min-height:64px}
.marca{display:flex;align-items:center;gap:9px;text-decoration:none}
.marca svg{width:32px;height:32px}
.marca span{font-size:21px}
.nav-links{display:flex;gap:2px;align-items:center;margin:0 auto}
.nav-links > a,.area > button{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--apagado);font-family:var(--sans);font-size:15px;font-weight:500;text-decoration:none;
  padding:10px 13px;border-radius:var(--r-btn);border:0;background:none;cursor:pointer;
  transition:color .2s ease,background .2s ease;
}
.nav-links > a:hover,.nav-links > a:focus-visible,.area > button:hover,.area[data-abierta] > button{color:var(--tinta-fuerte);background:rgba(0,0,0,.04)}
.area{position:relative}
.area .punta{width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .24s cubic-bezier(.22,1,.36,1)}
.area[data-abierta] .punta{transform:rotate(-135deg) translateY(-2px)}
.despliegue{
  position:absolute;top:calc(100% + 8px);left:50%;translate:-50% 0;z-index:70;
  background:var(--blanco);border:1px solid var(--borde);border-radius:var(--r-card);
  box-shadow:0 18px 44px rgba(18,32,54,.14);padding:12px;
  display:grid;gap:2px;min-width:320px;
  visibility:hidden;opacity:0;transform:translateY(-8px) scale(.985);
  transition:opacity .18s ease,transform .24s cubic-bezier(.22,1,.36,1),visibility 0s .18s;
}
.area[data-abierta] .despliegue{visibility:visible;opacity:1;transform:none;transition-delay:0s}
.despliegue.doble{grid-template-columns:repeat(2,minmax(0,1fr));min-width:600px}
.despliegue a{display:flex;gap:11px;align-items:flex-start;padding:9px 12px;border-radius:var(--r-btn);text-decoration:none;transition:background .16s ease}
.op-ico{flex:0 0 auto;width:19px;height:19px;margin-top:1px;fill:none;stroke:var(--piedra);
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:stroke .16s ease}
.despliegue a:hover .op-ico,.despliegue a:focus-visible .op-ico{stroke:var(--azul)}
.ml-texto{display:grid;gap:2px;min-width:0}
/* La linea entre grupos dice donde acaba un area y empieza otra, que en
   un panel de veinte enlaces no se ve solo con el espacio. */
.despliegue.doble .titulo-grupo:not(:first-child){
  border-top:1px solid var(--borde);margin-top:8px;padding-top:14px;
}
.despliegue a:hover,.despliegue a:focus-visible{background:var(--niebla)}
.despliegue a b{font-size:14.5px;font-weight:600;color:var(--tinta-fuerte)}
.despliegue a span{font-size:13px;color:var(--piedra);line-height:1.4}
.despliegue .titulo-grupo{grid-column:1/-1;padding:8px 12px 4px;font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--piedra)}
.menu-btn{display:none;margin-left:auto;width:40px;height:40px;padding:0;align-items:center;justify-content:center;flex-direction:column;gap:5px;background:none;border:1px solid var(--borde);border-radius:var(--r-btn);cursor:pointer}
.mb-linea{display:block;width:17px;height:1.5px;background:var(--tinta-fuerte);transition:transform .26s cubic-bezier(.22,1,.36,1),opacity .18s ease}
.nav.abierta .mb-linea:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav.abierta .mb-linea:nth-child(2){opacity:0}
.nav.abierta .mb-linea:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* la marca animada, igual que en la portada */
.marca-svg .mc-c{transform-origin:42% 50%;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.marca-svg .mc-b{transform-origin:56% 50%;animation:barra 6s cubic-bezier(.22,1,.36,1) infinite;transition:transform .32s cubic-bezier(.22,1,.36,1)}
.marca-svg .b2{animation-delay:.12s}
.marca-svg .b3{animation-delay:.24s}
@keyframes barra{0%{transform:translateX(-14px) scaleX(.55);opacity:0}9%,52%{transform:none;opacity:1}62%{transform:translateX(7px)}72%,100%{transform:none;opacity:1}}
.marca:hover .mc-c{transform:rotate(-14deg)}
.marca:hover .mc-b{animation:none}
.marca:hover .b1{transform:translateX(9px)}
.marca:hover .b2{transform:translateX(5px)}
.marca:hover .b3{transform:translateX(12px)}

/* ── Piezas de pagina ────────────────────────────────────── */
.migas{font-size:14px;color:var(--piedra);margin-bottom:20px}
.migas a{color:var(--piedra);text-decoration:none}
.migas a:hover{color:var(--tinta-fuerte);text-decoration:underline}
.revela.espera{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1)}
.revela.visible{opacity:1;transform:none}
.encabezado{padding:52px 0 30px}
.encabezado .editorial{margin-top:18px;max-width:60ch}
.seccion{padding:34px 0}
.rejilla{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.rejilla-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.tarjeta{background:var(--blanco);border:1px solid var(--borde);border-radius:var(--r-card);padding:22px;transition:transform .2s ease,border-color .2s ease}
.tarjeta:hover{transform:translateY(-3px);border-color:rgba(0,0,0,.16)}
.tarjeta h3,.tarjeta .tarjeta-tit{margin:0 0 7px}
/* Titulo de tarjeta: es un h2 porque va detras del h1 de la pagina,
   pero no debe verse como una cabecera de seccion. */
.tarjeta-tit{font-size:19px;font-weight:700;line-height:1.3;letter-spacing:0;color:var(--tinta-fuerte)}
.tarjeta p{font-size:15px;color:var(--grafito)}
a.tarjeta{text-decoration:none;color:inherit;display:grid;align-content:start;gap:7px}
/* La senal de que la tarjeta lleva a algun sitio. Aparece al pasar,
   asi que no compite con el texto cuando se esta leyendo. */
.tarjeta-mas{font-size:13.5px;font-weight:500;color:var(--azul);opacity:0;
  transform:translateX(-4px);transition:opacity .2s ease,transform .2s ease}
.tarjeta-mas::after{content:" 92"}
a.tarjeta:hover .tarjeta-mas,a.tarjeta:focus-visible .tarjeta-mas{opacity:1;transform:none}
.lista{list-style:none;margin:0;padding:0}
.lista li{padding:14px 0;border-bottom:1px solid var(--borde);display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;color:var(--grafito)}
.lista li:last-child{border-bottom:0}
.lista b{color:var(--azul);font-weight:500;font-size:15px}
.prosa p{margin:0 0 16px;color:var(--grafito);font-size:17px;line-height:1.65}
.prosa ul,.prosa ol{margin:0 0 18px;padding-left:22px;color:var(--grafito);font-size:17px;line-height:1.65}
.prosa li{margin-bottom:8px}
.prosa strong{color:var(--tinta-fuerte);font-weight:600}
.prosa a{color:var(--azul)}
.prosa h2{margin-top:34px}
.prosa h3{margin:26px 0 10px}
.aviso{margin:26px 0;padding:18px 22px;background:var(--blanco);border:1px solid var(--borde);border-left:3px solid var(--marigold);border-radius:var(--r-card);font-size:15.5px;color:var(--grafito)}
.aviso strong{color:var(--tinta-fuerte)}
.tabla{width:100%;border-collapse:collapse;font-size:15px}
.tabla th,.tabla td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--borde);vertical-align:top}
.tabla th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--piedra);font-weight:600}
.tabla td:first-child{font-weight:600;color:var(--tinta-fuerte);white-space:nowrap}
.tabla-caja{overflow-x:auto;background:var(--blanco);border:1px solid var(--borde);border-radius:var(--r-card)}
.cierre{margin:56px 0 88px;background:var(--blanco);border:1px solid var(--borde);border-radius:var(--r-card);padding:30px;text-align:center}
.cierre h2{margin:0 0 10px}
.cierre p{color:var(--grafito);margin-bottom:20px;max-width:52ch;margin-left:auto;margin-right:auto}
footer{background:var(--medianoche);color:#c6cbe0;padding:52px 0 34px}
.foot-rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:28px 24px;margin-bottom:34px}
.foot-rejilla > :first-child{grid-column:span 2;min-width:0}
.foot-titulo{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:#8b93b5;margin:0 0 12px;font-weight:600}
.foot-col a{display:block;font-size:14px;color:#c6cbe0;text-decoration:none;padding:4px 0;transition:color .2s ease}
.foot-col a:hover{color:#fff}
.foot-marca{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.foot-marca svg{width:26px;height:26px}
.foot-marca .wordmark{font-size:18px;color:#fff}
.foot-marca .wordmark i{color:var(--verde)}
.foot-nota{font-size:14px;color:#8b93b5;max-width:34ch;line-height:1.55}
.foot-bajo{border-top:1px solid rgba(255,255,255,.1);padding-top:20px;display:flex;gap:18px;flex-wrap:wrap;justify-content:space-between;align-items:center}
.foot-bajo a{font-size:13.5px;color:#8b93b5;text-decoration:none}
.foot-bajo a:hover{color:#fff}
footer small{font-size:13.5px;color:#8b93b5}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--tinta-fuerte);color:#fff;padding:12px 18px;border-radius:0 0 var(--r-btn) 0;text-decoration:none}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--azul);outline-offset:3px}
/* ── El formulario que se rellena pinchando ──────────────── */
.form{display:grid;gap:26px;max-width:720px;margin:0 auto;text-align:left}
.bloque{border:0;padding:0;margin:0;display:grid;gap:10px}
.bloque legend{font-size:17px;font-weight:600;color:var(--tinta-fuerte);padding:0;margin-bottom:2px}
.bloque-pie{font-size:14px;color:var(--piedra);margin:-4px 0 6px}
.bloque > .op,.bloque > label.op{margin:0}
.bloque{grid-auto-flow:row}
.bloque:has(.op:not(.op-chica)){grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.bloque legend,.bloque-pie,.subs{grid-column:1/-1}

/* La opcion: una superficie que se pincha. Sin sombra, sin color de
   relleno hasta que se elige, y con la marca de elegido a la izquierda
   para que se lea de un vistazo cual esta activa. */
.op{
  position:relative;display:flex;gap:10px;align-items:flex-start;
  background:var(--blanco);border:1px solid var(--borde);border-radius:var(--r-btn);
  padding:12px 14px;cursor:pointer;
  transition:border-color .16s ease,background .16s ease,transform .16s ease;
}
.op:hover{border-color:rgba(0,0,0,.2)}
.op input{position:absolute;opacity:0;width:0;height:0}
.op-cuerpo{display:grid;gap:2px;min-width:0}
.op-tit{font-size:15px;font-weight:500;color:var(--tinta-fuerte);line-height:1.3}
.op-pie{font-size:13px;color:var(--piedra);line-height:1.35}
.op::before{
  content:"";flex:0 0 auto;width:17px;height:17px;margin-top:1px;
  border:1.5px solid rgba(0,0,0,.22);border-radius:50%;
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease;
}
.op:has(input[type=checkbox])::before{border-radius:var(--r-sm)}
.op:has(input:checked){border-color:var(--azul);background:var(--azul-tinte)}
.op:has(input:checked)::before{border-color:var(--azul);background:var(--azul)}
/* El punto del boton de opcion: hueco blanco por fuera, azul dentro. */
.op:has(input[type=radio]:checked)::before{box-shadow:inset 0 0 0 3px var(--blanco)}
/* La casilla marcada lleva su marca de verificacion, que se lee mucho
   mejor que un cuadrado de color a 17px. */
.op:has(input[type=checkbox]:checked)::before{
  background:var(--azul) no-repeat center/11px 11px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.4 4.6 9 10 3.2' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.op:has(input:focus-visible){outline:2px solid var(--azul);outline-offset:2px}
.op-chica{padding:10px 12px}
.op-chica .op-tit{font-size:14.5px}

.subs{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px}
.sub{display:grid;gap:7px;align-content:start}
.sub-tit{font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--piedra);margin:0}

.datos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.dato{display:grid;gap:6px;font-size:14px;color:var(--piedra)}
.dato i{font-style:normal;color:rgba(0,0,0,.34)}
.dato-ancho{margin-top:14px}
.dato input,.dato textarea{
  font:inherit;font-size:15px;color:var(--tinta);
  padding:11px 13px;background:var(--blanco);
  border:1px solid var(--borde);border-radius:var(--r-btn);resize:vertical;
  transition:border-color .16s ease,box-shadow .16s ease;
}
.dato input:focus,.dato textarea:focus{outline:0;border-color:var(--azul);box-shadow:0 0 0 3px var(--azul-tinte)}
.form-nota{font-size:13px;color:var(--piedra);line-height:1.5}
.form-nota a{color:var(--azul)}
.form-acciones{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.form-alt{font-size:14px;color:var(--piedra)}
.form-alt a{color:var(--azul)}
@media(max-width:640px){
  .datos{grid-template-columns:1fr}
  .bloque:has(.op:not(.op-chica)){grid-template-columns:1fr}
}
/* -- El fondo -------------------------------------------------
   Un lienzo pegado a la ventana; el contenido pasa por encima. La
   barra NO entra en la regla de apilado: ya es sticky con z-index
   60 en su bloque, y repetir 'position' aqui se lo quitaba.      */
.fondo{
  position:fixed;inset:0;z-index:0;pointer-events:none;display:block;
  width:100%;height:100%;
}
main,footer{position:relative;z-index:1}
/* En una pagina interior el fondo se aparta mas: ahi se viene a leer,
   y un fondo que compite con un parrafo largo cansa. */
body:not(.portada) .fondo{opacity:.55}

/* ── Que incluye ─────────────────────────────────────────────
   En rejilla y no en columna: siete puntos sueltos apilados se
   leen como un parrafo largo, que es justo lo que no son.      */
.incluye{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2px 34px}
.incluye li{
  display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:start;
  padding:15px 0;border-bottom:1px solid var(--borde);color:var(--grafito);font-size:16px;
}
.tic{
  width:19px;height:19px;margin-top:2px;border-radius:50%;background:var(--azul-tinte);
  position:relative;
}
.tic::after{
  content:"";position:absolute;left:5.5px;top:5px;width:5px;height:8px;
  border:solid var(--azul);border-width:0 1.8px 1.8px 0;transform:rotate(45deg);
}
/* La banda clara separa esta seccion de las de alrededor sin
   necesidad de una tarjeta. */
.banda{background:var(--niebla);border-top:1px solid var(--borde);
       border-bottom:1px solid var(--borde);margin:14px 0}
.panel{border-radius:var(--r-card);padding:clamp(26px,4vw,44px);position:relative;overflow:hidden}
.panel.medianoche{background:var(--medianoche);color:#fff}
.panel.medianoche .cuerpo{color:#c6cbe0}
.panel.medianoche h2{color:#fff}
.panel .tarjeta,.panel .tarjeta h3{color:var(--tinta-fuerte)}
.panel .tarjeta .cuerpo,.panel .tarjeta p{color:var(--grafito)}

/* ── Diagramas ───────────────────────────────────────────── */
.dibujo{
  background:var(--blanco);border:1px solid var(--borde);border-radius:var(--r-card);
  padding:26px 24px 20px;margin:0;overflow:hidden;
}
.dibujo svg{width:100%;height:auto;display:block}
.dibujo figcaption{
  margin-top:16px;font-size:14px;color:var(--piedra);line-height:1.5;
  padding-top:14px;border-top:1px solid var(--borde);
}
.dibujo .et{font:500 13px/1 var(--sans);fill:var(--tinta-fuerte)}
.dibujo .et-p{font:400 11.5px/1 var(--sans);fill:var(--piedra)}
.dibujo .caja{fill:var(--papel);stroke:var(--borde)}
.dibujo .caja-viva{fill:var(--azul-tinte);stroke:rgba(0,117,222,.3)}
.dibujo .linea{stroke:var(--borde);stroke-width:1.5;fill:none}
.dibujo .barra{fill:var(--azul)}

/* el punto que recorre el flujo: es lo que convierte cuatro cajas en un
   proceso con direccion */
.viaja{animation:viaja 5.2s cubic-bezier(.5,0,.5,1) infinite}
@keyframes viaja{
  0%,6%    {transform:translateX(0);opacity:0}
  10%      {opacity:1}
  28%,34%  {transform:translateX(var(--p1))}
  52%,58%  {transform:translateX(var(--p2))}
  76%,88%  {transform:translateX(var(--p3));opacity:1}
  96%,100% {transform:translateX(var(--p3));opacity:0}
}
/* cada caja se enciende cuando el punto llega a ella */
.enciende{animation:enciende-caja 5.2s linear infinite}
@keyframes enciende-caja{0%,100%{opacity:0}}
.paso-1 .enciende{animation-delay:0s}
.paso-2 .enciende{animation-delay:1.35s}
.paso-3 .enciende{animation-delay:2.7s}
.paso-4 .enciende{animation-delay:4s}

/* la linea que se dibuja sola */
.traza{stroke-dasharray:var(--largo);stroke-dashoffset:var(--largo);
       animation:traza 3.4s cubic-bezier(.4,0,.2,1) infinite}
@keyframes traza{0%{stroke-dashoffset:var(--largo)}45%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}

/* algo que cae en su sitio */
.cae{animation:cae 4.4s cubic-bezier(.3,1.3,.5,1) infinite}
@keyframes cae{0%,10%{transform:translateY(-22px);opacity:0}24%,86%{transform:none;opacity:1}96%,100%{opacity:0}}
.cae-2{animation-delay:.5s}
.cae-3{animation-delay:1s}
.cae-4{animation-delay:1.5s}

/* el sello que aparece al final */
.sella{animation:sella 4.4s cubic-bezier(.2,1.6,.4,1) infinite;transform-origin:center}
@keyframes sella{0%,54%{transform:scale(1.7) rotate(-8deg);opacity:0}64%,88%{transform:none;opacity:1}96%,100%{opacity:0}}

/* la barra que crece */
.crece{transform-origin:center bottom;animation:crece 3.8s cubic-bezier(.3,1,.4,1) infinite}
@keyframes crece{0%,8%{transform:scaleY(.06)}40%,84%{transform:scaleY(1)}96%,100%{transform:scaleY(1);opacity:.35}}
.crece-2{animation-delay:.12s}
.crece-3{animation-delay:.24s}
.crece-4{animation-delay:.36s}
.crece-5{animation-delay:.48s}
.crece-6{animation-delay:.6s}

/* dos columnas que se emparejan */
.casa{animation:casa 4.6s ease-in-out infinite}
@keyframes casa{0%,14%{opacity:0}26%,86%{opacity:1}96%,100%{opacity:0}}
.casa-2{animation-delay:.55s}
.casa-3{animation-delay:1.1s}

@media(prefers-reduced-motion:reduce){
  .viaja,.enciende,.traza,.cae,.sella,.crece,.casa{animation:none}
  .enciende{opacity:1}
  .traza{stroke-dashoffset:0}
  .viaja{opacity:1;transform:translateX(var(--p3))}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.revela{opacity:1;transform:none;transition:none}.marca-svg .mc-b{animation:none}*{transition-duration:.01ms!important}}
@media(max-width:980px){
  .rejilla,.rejilla-2{grid-template-columns:1fr}
  .menu-btn{display:flex}
  /* El menu completo baja bajo la barra. Cerrado va con visibility:hidden
     y no solo con opacidad, para que el tabulador no entre en enlaces que
     no se ven. */
  .nav-links{
    position:absolute;left:0;right:0;top:100%;margin:0;
    flex-direction:column;align-items:stretch;gap:0;
    padding:10px 16px 18px;max-height:78vh;overflow-y:auto;
    background:var(--blanco);border-bottom:1px solid var(--borde);
    box-shadow:0 12px 24px rgba(0,0,0,.06);
    visibility:hidden;opacity:0;transform:translateY(-10px);
    transition:opacity .2s ease,transform .26s cubic-bezier(.22,1,.36,1),visibility 0s .2s;
  }
  .nav.abierta .nav-links{visibility:visible;opacity:1;transform:none;transition-delay:0s}
  .nav-links > a,.area > button{width:100%;justify-content:space-between;padding:13px 12px;font-size:16px}
  .despliegue{position:static;translate:none;transform:none;visibility:visible;opacity:1;
         min-width:0;box-shadow:none;border:0;border-left:2px solid var(--borde);
         border-radius:0;margin:0 0 8px 12px;padding:2px 0 2px 10px;display:none}
  .despliegue.doble{grid-template-columns:1fr;min-width:0}
  .area[data-abierta] .despliegue{display:grid}
  .despliegue a span{display:none}
}