/* ============================================================
   Viralio Estudio — hoja de estilos única
   Última poda: 2026-10-10. Se quitaron 163 reglas de marcado
   anterior que ya no usaba ninguna página ni el tema del blog.
   Eso no es prolijidad: tres bugs de este sitio salieron de
   reglas viejas que pisaban a las nuevas por especificidad.
   ============================================================ */
/* ============================================================
   VIRALIO ESTUDIO — Sistema v7 · "Papel y fluor"
   Papel hueso · tinta · verde fluor · naranja fluor
   Sin iconos. Sin fotos de archivo. Sin tarjetas con sombra.
   El color se usa como marcador: subraya, tacha, resalta.
   ============================================================ */

:root{
  /* Blanco y azulado en vez de blanco y negro: el papel y la tinta
     llevan azul adentro, así todo el sitio queda bajo el mismo filtro
     frío y el azul de marca deja de ser un parche sobre un gris. */
  --papel:#F1F4F9;      /* papel, con azul adentro */
  --papel-2:#E4EAF3;    /* el papel un punto más hondo */
  --tinta:#0D1324;      /* no es negro: es azul muy oscuro */
  --tinta-70:#3B4559;
  --tinta-45:#5A6680;
  --tinta-22:#AFB9CB;
  --regla:rgba(13,19,36,.16);
  --regla-fina:rgba(13,19,36,.08);

  /* ACENTO — azul, para que la web hable el mismo idioma que Instagram.
     Si algún día querés probar el verde fluor, cambiás estas dos líneas:
     --fluor:#D7FF2E;  --fluor-2:#FF5C38;  */
  --azul:#1B3BD8;       /* azul de marca */
  --fluor:#9FB9FF;      /* marcador: azul claro, legible con texto negro encima */
  --fluor-2:#1B3BD8;    /* acento fuerte */

  --sans:'Satoshi','Helvetica Neue',Arial,sans-serif;
  --serif:'Instrument Serif',Georgia,serif;
  --mono:'JetBrains Mono','SF Mono',Menlo,monospace;

  --meta:.7rem;
  --margen:clamp(1.15rem,3.5vw,3.25rem);
  --max:1700px;
  --hdr:62px;

  /* Radios: una sola escala para todo el sitio. Si mañana querés las
     esquinas más o menos redondeadas, se cambian acá y cambia todo. */
  --r-ch:10px;    /* chico: campos, etiquetas */
  --r-md:14px;    /* medio: botones, tarjetas */
  --r-gr:22px;    /* grande: fotos, bloques */
  --r-max:999px;  /* píldora */

  /* Azules de interfaz, derivados del azul de marca */
  --azul-claro:#6E8CFF;   /* iconos y detalles */
  --azul-hover:#1430B4;   /* el botón al pasar el mouse */
  --azul-suave:rgba(27,59,216,.09);
  --ease:cubic-bezier(.65,0,.35,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--sans);
  font-size:1rem;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.04em;line-height:.98}
p{margin:0 0 1em}p:last-child{margin-bottom:0}
::selection{background:var(--fluor);color:var(--tinta)}

.hoja{max-width:var(--max);margin-inline:auto;padding-inline:var(--margen)}
.txt{font-size:1.02rem;line-height:1.6;max-width:58ch}
.txt-s{font-size:.92rem;line-height:1.6;color:var(--tinta-70);max-width:50ch}

/* ============================================================
   RECURSOS TIPOGRÁFICOS — el color como marcador, no como relleno
   ============================================================ */
/* Palabra resaltada: el fluor entra como un trazo de marcador */
.resalta{position:relative;display:inline-block;z-index:0;padding-inline:.08em;font-style:normal}
.trazo,.subra{font-style:normal}
.resalta::before{content:'';position:absolute;left:0;right:0;top:.18em;bottom:.1em;z-index:-1;
  background:var(--fluor);transform:scaleX(0);transform-origin:left;
  transition:transform .8s var(--ease)}
.resalta.on::before{transform:scaleX(1)}

/* Palabra en trazo: contorno, sin relleno */
.trazo{color:transparent;-webkit-text-stroke:1.6px var(--tinta);paint-order:stroke fill}
@media(max-width:720px){.trazo{-webkit-text-stroke-width:1px}}

/* Subrayado que se dibuja */
.subra{position:relative;display:inline-block}
.subra::after{content:'';position:absolute;left:0;right:0;bottom:.04em;height:.14em;background:var(--fluor);
  transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease) .15s}
.subra.on::after{transform:scaleX(1)}

/* Entrada de líneas de titular */
/* ------------------------------------------------------------------
   PALABRA QUE ROTA — una sola palabra cambia sola dentro de la frase.
   El ancho se desplaza con transición, así la línea se acomoda sola
   en vez de dar un salto o dejar un hueco fijo esperando la palabra
   más larga. Funciona en cualquier elemento con data-palabras.
   ------------------------------------------------------------------ */
[data-palabras]{display:inline-block;white-space:nowrap;
  font-weight:inherit;font-style:inherit;color:inherit}
/* El nombre lleva prefijo: .azul a secas ya existe en la capa de
   compatibilidad de abajo y lo pisaría. */
.en-azul{color:var(--azul)}
/* Sin opacidad a propósito: si la animación no llega a correr, el
   peor caso es un desplazamiento de 2px, nunca una palabra que
   desaparece. Ninguna animación puede esconder contenido. */
@keyframes rotaEntra{from{transform:translateY(.16em)}to{transform:none}}
[data-palabras].cambia{animation:rotaEntra .45s var(--ease)}
@media (prefers-reduced-motion:reduce){[data-palabras].cambia{animation:none}}

/* El overflow recorta la línea para que el texto entre desde abajo; el
   padding negativo le devuelve el aire que necesitan las colas de la g,
   la j y la p, sin mover el resto del bloque. */
.linea{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.linea > span{display:block;transform:translateY(105%);transition:transform .9s var(--ease)}
.linea.on > span{transform:none}
@media (prefers-reduced-motion:reduce){
  .linea > span{transform:none}
  .resalta::before,.subra::after{transform:scaleX(1)}
}

/* ============================================================
   FOTOGRAFÍA — con movimiento, nunca estática
   ============================================================ */
/* Las fotos no se pegan encima del papel: se imprimen sobre él.
   El multiply hace que los blancos de la foto dejen pasar el fondo, así
   que la imagen comparte el color de la página en vez de ser un recorte
   apoyado arriba. El filtro la pasa a una sola tinta azul, para que
   fotos de orígenes distintos parezcan de la misma producción.
   Los bordes se difuminan con una máscara, para que no haya un corte
   recto contra el papel. */
.foto{position:relative;overflow:hidden;background:transparent;display:block;
  border-radius:var(--r-gr)}
.foto img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.05);mix-blend-mode:multiply;
  filter:grayscale(1) sepia(.62) hue-rotate(196deg) saturate(1.15)
         brightness(1.07) contrast(1);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 7%,#000 92%,rgba(0,0,0,.35) 100%),
                     linear-gradient(to right,transparent 0,#000 5%,#000 95%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to bottom,transparent 0,#000 7%,#000 92%,rgba(0,0,0,.35) 100%),
             linear-gradient(to right,transparent 0,#000 5%,#000 95%,transparent 100%);
  mask-composite:intersect;
  transition:transform 1.1s var(--ease),filter .6s var(--ease)}
.foto.visible img{transform:scale(1)}
a .foto img,.tarja .foto img{transition:transform .9s var(--ease),filter .5s var(--ease)}
a:hover .foto img,.tarja:hover .foto img{transform:scale(1.05);
  filter:grayscale(1) sepia(.62) hue-rotate(196deg) saturate(1.4)
         brightness(1.02) contrast(1.05)}
/* un apoyo de luz en la esquina, para que la foto no flote sola */
.foto::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 90% at 18% 0%,rgba(241,244,249,.55),transparent 58%)}
/* ------------------------------------------------------------------
   PLACA — ocupa el lugar de una foto cuando no hay una foto que valga
   la pena. No es un relleno: es una pieza tipográfica con la palabra
   del área en contorno, que se lee como diseño y no como hueco.
   ------------------------------------------------------------------ */
.placa{position:relative;aspect-ratio:16/9;background:var(--papel-2);
  border:1px solid var(--tinta);overflow:hidden;display:flex;flex-direction:column;
  justify-content:flex-end;padding:clamp(1rem,2.2vw,1.7rem);isolation:isolate}
.placa.on::after,a:hover > .placa::after,.tarja:hover .placa::after{transform:scaleX(1)}

/* Si una foto no carga, el espacio queda como un bloque de papel con una
   trama tenue, nunca como un icono de imagen rota. */
.foto--sin::after,.franja.foto--sin::after{display:none}
.foto--sin{background:
  repeating-linear-gradient(135deg,var(--papel-2) 0 10px,rgba(27,59,216,.05) 10px 20px);
  border:1px solid var(--regla)}
.foto--alta{aspect-ratio:4/5}
.foto--ancha{aspect-ratio:16/9}

/* ==================================================================
   BANNER — la portada ocupa una pantalla exacta y nada más.
   La grilla se declara por zonas, así el orbe cambia de lugar entre
   celular y computadora sin tocar el orden del HTML:
     celular      titular / orbe / texto y botones
     computadora  titular y texto a la izquierda, orbe a la derecha
   Se usa svh además de vh porque en el celular vh no descuenta la
   barra del navegador; la línea vh queda de respaldo para los
   navegadores que todavía no entienden svh.
   ================================================================== */
.banner{position:relative;display:flex;flex-direction:column;
  height:100vh;height:100svh;max-height:100vh;max-height:100svh;
  overflow:hidden}

/* --- Celular: el orbe queda en el medio, entre el título y el texto.
   El piso de 30svh garantiza que nunca se reduzca a una pelotita,
   por largo que sea el texto. --- */
/* container-type deja medir el titular contra ESTA caja y no contra
   la ventana: así nunca se parte una línea del título.
   Las filas del orbe van en minmax(0,1fr), sin piso: el texto pide lo
   que necesita y el orbe se queda con lo que sobre. Con un piso, el
   texto terminaba cortado contra el borde de la pantalla. */
.banner__in{flex:1 1 auto;min-height:0;width:100%;position:relative;z-index:2;
  display:grid;
  grid-template-areas:"tit" "orbe" "pie";
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:clamp(.5rem,1.8svh,1.4rem);
  padding-top:calc(var(--hdr) + .6rem);padding-bottom:.8rem}

/* El tope de 3rem está calculado para que "Hacemos que" —la línea
   más larga— entre entera en la columna más angosta en la que se
   muestra. El nowrap lo garantiza: si alguna vez no entrara, se
   notaría enseguida en vez de partirse en silencio. */
/* El titular se calcula para que la línea más larga ("Hacemos que")
   ocupe el 85% del ancho de su columna. Esa es la medida que hace que
   el bloque de texto tenga peso frente al orbe, en vez de flotar en
   el medio con bandas vacías arriba y abajo. El tope en svh es solo
   un seguro para pantallas muy bajas. */
.banner .banner__t{grid-area:tit;margin:0;max-width:none;position:relative;z-index:2;
  font-size:clamp(1.9rem,min(13vw,9svh),3.6rem)}
.banner .banner__t .linea > span{white-space:nowrap}
.banner__pie{grid-area:pie;position:relative;z-index:2}
.banner__d{margin:0;max-width:44ch;
  font-size:clamp(.95rem,1.25vw,1.22rem);line-height:1.55;color:var(--tinta-70)}
/* flex-wrap y row-gap: si no entran en una fila bajan prolijos,
   en vez de salirse de la columna y quedar fuera de la pantalla */
.banner .banner__btns{margin-top:clamp(.7rem,1.8svh,1.25rem);
  display:flex;flex-wrap:wrap;gap:.6rem;max-width:100%}
.banner .banner__btns .btn{max-width:100%}
.banner .cinta{margin-top:0;flex:none;position:relative;z-index:2}

/* --- Pantalla ancha, y también celular acostado: el orbe al costado.
   Las dos filas de 1fr arriba y abajo centran el texto verticalmente,
   mientras el orbe atraviesa las cuatro y ocupa todo el alto. --- */
@media (min-width:900px), (min-width:600px) and (orientation:landscape){
  .banner__in{
    grid-template-areas:".  orbe" "tit orbe" "pie orbe" ".  orbe";
    grid-template-columns:minmax(0,5.9fr) minmax(0,6.1fr);
    grid-template-rows:1fr auto auto 1fr;
    column-gap:clamp(1.2rem,3.5vw,3.2rem);row-gap:clamp(.9rem,2.4svh,1.9rem);
    padding-top:calc(var(--hdr) + .9rem);padding-bottom:1.2rem}
  /* 6.3vw es el 85% de la columna dividido por lo que mide la línea
     más larga; 6.8rem la congela cuando el contenedor topa en 1700px */
  .banner .banner__t{font-size:clamp(2rem,min(6.3vw,13.5svh),6.8rem)}
  /* se sale un poco del margen derecho, para que respire */
  /* sin sangrado: el recorte contra el borde se leía como un error */
  .banner .orbe{width:100%;margin-right:0}
}

/* --- Celular angosto: los dos botones en una sola fila ---
   Apilados comen el alto que necesita el orbe, y además dos botones
   a todo lo ancho uno encima del otro se ven pesados. */
@media (max-width:560px){
  .banner .banner__btns{gap:.55rem;flex-wrap:nowrap}
  .banner .banner__btns .btn{padding:.78rem .9rem;font-size:.85rem;
    flex:1 1 0;min-width:0;justify-content:center;white-space:nowrap}
  .banner .banner__btns .btn span{overflow:hidden;text-overflow:ellipsis}
  .banner .banner__btns .ico{flex:none}
}

/* --- Pantallas muy bajas (celular acostado, ventana achicada) ---
   Con menos de 470px de alto no entra todo. En vez de encoger todo
   hasta volverlo ilegible, se esconde el párrafo: el titular y los
   botones son lo que tiene que estar sí o sí. */
@media (max-height:470px){
  .banner__d{display:none}
  .banner .banner__t{font-size:clamp(1.5rem,min(4.4vw,8.6svh),2.4rem)}
  .banner .banner__btns{margin-top:0}
  .banner .banner__btns .btn{padding:.62rem 1.1rem;font-size:.84rem}
  .banner__in{padding-top:calc(var(--hdr) + .4rem);padding-bottom:.5rem}
}

/* ------------------------------------------------------------------
   ORBE — la pieza de la portada. Se dibuja con WebGL en el momento:
   no es un video ni una imagen, así que pesa cero y no depende de
   ningún servidor.
   Sin proporción fija a propósito: ocupa la caja que le toque y el
   shader siempre centra el círculo usando el lado más corto. Así en
   computadora llena la columna y en celular llena la franja del medio.
   ------------------------------------------------------------------ */
.orbe{grid-area:orbe;position:relative;width:100%;height:100%;
  min-height:0;min-width:0;pointer-events:none;align-self:stretch}
/* El canvas tiene transparencia propia: no hace falta modo de mezcla,
   que además se rompe cuando algún elemento de arriba crea su propio
   contexto de apilado. */
.orbe canvas{width:100%;height:100%;display:block;background:transparent;
  opacity:0;transition:opacity 1.2s var(--ease)}
.orbe.listo canvas{opacity:1}
/* Si el navegador no tiene WebGL no queda un hueco: se oculta y el
   titular ocupa el ancho completo. */
.orbe.sin-webgl{display:none}
/* cuando el espacio que le queda es muy chico, se esconde:
   una rayita azul se lee como un error, no como un adorno */
.orbe.apretado{visibility:hidden}

/* Franja a sangre: entra y sale del papel sin corte recto arriba ni abajo */
.franja{position:relative;overflow:hidden;height:clamp(240px,42vw,520px);
  border-radius:var(--r-gr);
  background:var(--papel)}
.franja img{position:absolute;inset:-12% 0;width:100%;height:124%;object-fit:cover;
  will-change:transform;mix-blend-mode:multiply;
  filter:grayscale(1) sepia(.62) hue-rotate(196deg) saturate(1.2)
         brightness(1.05) contrast(1.02);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 15%,#000 72%,rgba(0,0,0,.25) 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 15%,#000 72%,rgba(0,0,0,.25) 100%)}
.franja__texto{position:absolute;inset:auto 0 0 0;z-index:2;padding:clamp(1.5rem,4vw,3rem) var(--margen);
  background:linear-gradient(0deg,var(--papel) 18%,rgba(241,244,249,.72) 55%,transparent)}
.franja__texto p{color:var(--tinta);font-size:clamp(1.2rem,3vw,2.2rem);font-weight:700;
  letter-spacing:-.035em;line-height:1.1;max-width:22ch;margin:0}
.franja__texto p em{font-style:normal;color:var(--azul)}

/* Par de foto + texto */
.duo{display:grid;gap:1.6rem}
@media(min-width:900px){.duo{grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(2rem,5vw,4.5rem);
  align-items:center}}
.duo--inv > .foto{order:2}

/* ============================================================
   ICONOS FUNCIONALES — solo contacto y canales, nada decorativo
   ============================================================ */
.ico{width:1.05em;height:1.05em;flex:none;display:inline-block;vertical-align:-.15em}
.canal{display:inline-flex;align-items:center;gap:.6rem}
.canales{display:grid;gap:.9rem;margin-top:1.4rem}
.canal__link{display:inline-flex;align-items:center;gap:.7rem;font-size:.98rem;
  border-radius:var(--r-md);
  padding:.65rem .95rem;border:1px solid var(--regla);transition:border-color .2s,background .2s}
.canal__link:hover{border-color:var(--tinta);background:var(--papel-2)}
.canal__link .ico{width:1.15rem;height:1.15rem;color:var(--azul)}
/* Los iconos de contacto llevan el azul: es el único punto de color
   fuera del titular, y ayuda a que el bloque de contacto se distinga
   del resto del texto. */
.canal .ico{color:var(--azul)}
.canal__link:hover .ico{color:var(--azul-hover)}
/* en el pie, que es oscuro, el azul de marca no se leería */
.pie .canal .ico{color:var(--fluor)}
.pie .canal:hover .ico{color:#fff}

/* ============================================================
   BARRA
   ============================================================ */
.barra{position:fixed;top:0;left:0;right:0;z-index:60;mix-blend-mode:normal;
  transition:background .3s var(--ease),border-color .3s var(--ease);
  border-bottom:1px solid transparent}
.barra.pegada{background:rgba(241,244,249,.9);backdrop-filter:blur(12px);border-bottom-color:var(--regla)}
.barra__in{max-width:var(--max);margin-inline:auto;padding:0 var(--margen);height:var(--hdr);
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
/* Marca: el isotipo y, al lado, la palabra Estudio en azul */
.marca{display:inline-flex;align-items:center;gap:.52rem;line-height:1}
.marca img{height:26px;width:auto;display:block;flex:none}
/* "Estudio" va más grande que el cuerpo del menú para que empareje
   con la altura del isotipo: en serif itálica, la altura de las
   mayúsculas es bastante menor que el tamaño nominal, así que a
   1,28rem quedaba visualmente chico al lado de la V. */
.marca em{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.52rem;
  letter-spacing:-.012em;color:var(--azul);line-height:1}
@media(max-width:520px){.marca img{height:23px}.marca em{font-size:1.34rem}}
.nav{display:flex;gap:1.7rem;font-size:.86rem}
.nav a{color:var(--tinta-70);transition:color .18s;position:relative}
.nav a::after{content:'';position:absolute;left:0;right:0;bottom:-3px;height:.5em;background:var(--fluor);
  z-index:-1;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav a:hover{color:var(--tinta)}
.nav a:hover::after{transform:scaleX(1)}
.barra__cta{font-size:.86rem;font-weight:500;padding:.55rem 1.15rem;border-radius:var(--r-max);
  background:var(--azul);color:#fff;
  transition:background .2s,color .2s}
.barra__cta:hover{background:var(--azul-hover);color:#fff}
.barra__btn{display:none;background:none;border:0;font-family:var(--mono);font-size:var(--meta);
  letter-spacing:.11em;text-transform:uppercase;color:var(--tinta);cursor:pointer;padding:.5rem 0}
@media(max-width:940px){.nav{display:none}.barra__btn{display:block}.barra__cta{margin-left:auto;margin-right:1rem}}
@media(max-width:520px){.barra__cta{display:none}}
.menu{position:fixed;inset:var(--hdr) 0 0;z-index:55;background:var(--papel);padding:2rem var(--margen);
  display:flex;flex-direction:column;opacity:0;pointer-events:none;transition:opacity .22s var(--ease);overflow-y:auto}
.menu.abierto{opacity:1;pointer-events:auto}
.menu a{font-size:clamp(1.7rem,7vw,2.6rem);font-weight:700;letter-spacing:-.04em;padding-block:.65rem;
  border-bottom:1px solid var(--regla-fina)}
.gigante{font-size:clamp(2.7rem,9.2vw,9.5rem);font-weight:700;letter-spacing:-.05em;line-height:.9;
  max-width:15ch}
@media(min-width:860px){}

/* Cinta en movimiento */
.cinta{overflow:hidden;white-space:nowrap;border-top:1px solid var(--tinta);border-bottom:1px solid var(--tinta);
  padding-block:.75rem;margin-top:clamp(2.5rem,5vw,4rem);background:var(--fluor)}
.cinta__via{display:inline-flex;animation:rodar 30s linear infinite}
.cinta__via span{font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  padding-inline:1.3rem;color:var(--tinta);font-weight:500}
.cinta__via span::after{content:'/';margin-left:2.6rem;color:rgba(13,19,36,.4)}
@keyframes rodar{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.cinta__via{animation:none}}

/* ============================================================
   SECCIONES
   ============================================================ */
.bloque{padding-block:clamp(3.5rem,8vw,8rem);border-bottom:1px solid var(--regla)}
.bloque--sin{border-bottom:0}
.bloque--papel2{background:var(--papel-2)}
.bloque--tinta .trazo{-webkit-text-stroke-color:var(--papel)}

/* Rótulo de sección: solo la palabra, sin la rayita de color delante */
.rot{display:flex;align-items:center;gap:.6rem;margin-bottom:1.8rem;font-family:var(--mono);
  font-size:var(--meta);letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-45)}
.bloque--tinta .rot{color:rgba(241,244,249,.5)}
.t2{font-size:clamp(1.9rem,4.6vw,4rem);font-weight:700;letter-spacing:-.045em;line-height:1}

.dos{display:grid;gap:2rem}
@media(min-width:900px){.dos{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,6vw,6rem)}}
@media(min-width:900px){}

/* ============================================================
   PROBLEMAS — enunciados grandes, uno debajo del otro
   ============================================================ */
.enunciados{border-top:2px solid var(--tinta)}
.enun{display:grid;gap:.6rem 2.5rem;padding-block:clamp(1.6rem,3.5vw,2.6rem);
  border-bottom:1px solid var(--regla)}
@media(min-width:880px){.enun{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:baseline}}
/* el riel de enunciados también sirve de índice: cuando es un enlace, reacciona */
a.enun{transition:background .25s var(--ease),padding-left .25s var(--ease)}
a.enun:hover{background:var(--papel-2);padding-left:1rem}
a.enun:hover .enun__t{color:var(--azul)}
.enun__t{font-size:clamp(1.3rem,3vw,2.3rem);font-weight:700;letter-spacing:-.04em;line-height:1.08}
.enun__d{font-size:.94rem;color:var(--tinta-70);margin:0}

/* ============================================================
   TRÍO — las tres cosas que frenan un negocio.
   Tarjetas con degradado radial que baja desde el borde superior.
   Cada una lleva adentro una ilustración dibujada en HTML y SVG:
   nada de imágenes, así que no hay fotos que producir ni que cargar.
   ============================================================ */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:clamp(2rem,4vw,3rem)}
@media(max-width:900px){.trio{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.trio{grid-template-columns:1fr}}

.tri{position:relative;height:340px;border-radius:20px;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;text-align:left;
  background:var(--papel-2);box-shadow:0 10px 30px -10px rgba(13,19,36,.1);
  color:inherit;text-decoration:none;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
a.tri:hover{transform:translateY(-4px);box-shadow:0 22px 44px -18px rgba(13,19,36,.22)}
.tri--1{background:radial-gradient(circle at 50% 0%,#9FB9FF 0%,#D4DEFF 30%,var(--papel-2) 60%,var(--papel-2) 100%)}
.tri--2{background:radial-gradient(circle at 50% 0%,#6E8CFF 0%,#C3D0FF 30%,var(--papel-2) 60%,var(--papel-2) 100%)}
.tri--3{background:radial-gradient(circle at 50% 0%,#1B3BD8 0%,#92A9F2 30%,var(--papel-2) 60%,var(--papel-2) 100%)}

.tri__t{position:relative;z-index:2;padding:24px;margin:0;font-size:1.05rem;font-weight:700;
  letter-spacing:-.025em;line-height:1.2}
.tri__t em{font-style:normal}
.tri__t span{display:block;margin-top:.45rem;font-size:.82rem;font-weight:400;
  color:var(--tinta-70);line-height:1.45;letter-spacing:0}

/* trama de puntos, enmascarada para que se desvanezca hacia abajo */
.tri__malla{position:absolute;inset:0;z-index:1;pointer-events:none;background-size:16px 16px;
  background-image:
    linear-gradient(rgba(255,255,255,.8) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.8) 1px,transparent 1px);
  -webkit-mask-image:radial-gradient(circle at center top,#000 0%,transparent 80%);
  mask-image:radial-gradient(circle at center top,#000 0%,transparent 80%)}

/* ilustración 1 · el buscador y los resultados */
.tri__buscador{position:absolute;top:30px;left:24px;right:24px;z-index:2;display:flex;
  align-items:center;gap:10px;background:#fff;border-radius:12px;padding:14px 16px;
  box-shadow:0 8px 20px rgba(13,19,36,.05);font-size:.82rem;color:#475569}
.tri__buscador svg{flex:none;width:14px;height:14px}
.tri__res{position:absolute;top:92px;left:24px;right:24px;z-index:2;display:grid;gap:7px}
.tri__res > span{display:flex;align-items:center;gap:9px;border-radius:9px;padding:9px 12px;
  background:rgba(255,255,255,.82);font-size:.72rem;color:#64748b}
.tri__res > span i{flex:none;width:7px;height:7px;border-radius:2px;background:#cbd5e1}
.tri__res .vos{background:#fff;color:var(--tinta);font-weight:600;
  box-shadow:0 6px 16px rgba(27,59,216,.14);outline:1px solid rgba(27,59,216,.22)}
.tri__res .vos i{background:var(--azul)}
.tri__res .vos b{margin-left:auto;font-family:var(--mono);font-size:.6rem;color:var(--azul);
  text-transform:uppercase;letter-spacing:.08em}

/* ilustración 2 · las dos marcas comparadas */
.tri__comparo{position:absolute;top:34px;left:24px;right:24px;z-index:2;
  display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tri__ficha{background:#fff;border-radius:12px;padding:14px;box-shadow:0 8px 20px rgba(13,19,36,.05)}
.tri__ficha u{display:block;width:26px;height:26px;border-radius:7px;background:#e2e8f0;
  margin-bottom:10px;text-decoration:none}
.tri__ficha s{display:block;height:5px;border-radius:3px;background:#e9edf5;margin-bottom:5px;
  text-decoration:none}
.tri__ficha s.corta{width:62%}
.tri__ficha p{margin:0;font-size:.68rem;color:#94a3b8;line-height:1.5}
.tri__ficha--vos{outline:1.5px solid rgba(27,59,216,.3);box-shadow:0 10px 24px rgba(27,59,216,.16)}
.tri__ficha--vos u{background:var(--azul)}
.tri__ficha--otro{transform:translateY(10px)}
.tri__sello{position:absolute;top:168px;left:50%;transform:translateX(-50%);z-index:3;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;background:#fff;
  border:1px solid var(--tinta);border-radius:20px;padding:5px 14px;font-size:.75rem;
  font-weight:600;color:var(--tinta);box-shadow:0 4px 15px rgba(13,19,36,.08)}
.tri__sello b{color:var(--azul);font-size:1rem;line-height:1}
.tri__cursor{position:absolute;top:192px;left:calc(50% + 34px);z-index:4;width:24px;height:24px;
  fill:var(--tinta);stroke:#fff;stroke-width:1;filter:drop-shadow(0 4px 6px rgba(13,19,36,.2))}

/* ilustración 3 · las consultas sin responder */
.tri__chats{position:absolute;top:38px;left:24px;right:24px;z-index:2;display:grid;gap:9px}
.tri__chats > span{display:flex;align-items:center;gap:9px;background:#fff;border-radius:12px;
  padding:11px 13px;font-size:.72rem;color:#475569;box-shadow:0 8px 20px rgba(13,19,36,.05)}
.tri__chats i{flex:none;width:7px;height:7px;border-radius:50%;background:#D97706}
.tri__chats .frio i{background:#B3261E}
.tri__chats b{margin-left:auto;flex:none;font-size:.62rem;font-weight:400;color:#94a3b8;
  white-space:nowrap}
.tri__pastilla{position:absolute;top:208px;left:50%;transform:translateX(-50%);z-index:3;
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;background:#fff;
  border:1px solid var(--tinta);border-radius:20px;padding:6px 18px;font-size:.75rem;
  font-weight:500;color:var(--tinta);box-shadow:0 8px 20px rgba(13,19,36,.06)}
.tri__pastilla svg{width:14px;height:14px}

@media (prefers-reduced-motion:reduce){a.tri:hover{transform:none}}

/* ============================================================
   RIEL — capacidades en desplazamiento horizontal
   ============================================================ */
.riel-caja{position:relative;margin-top:2.2rem}
.riel{display:flex;gap:1.5rem;overflow-x:auto;scroll-snap-type:x proximity;
  padding-bottom:1.5rem;cursor:grab;scrollbar-width:none;-ms-overflow-style:none}
.riel::-webkit-scrollbar{display:none}
.riel.agarrando{cursor:grabbing;scroll-snap-type:none}
/* La regla superior va recta a propósito: redondeada se leía como un
   arco suelto encima de la foto. Lo que se redondea son las cajas
   llenas (fotos, botones, tarjetas), no las líneas. */
.tarja{flex:0 0 min(82vw,400px);scroll-snap-align:start;border-top:3px solid var(--azul);
  padding-top:1.1rem;display:flex;flex-direction:column;min-height:300px;transition:border-color .3s}
.tarja:hover{border-top-color:var(--fluor-2)}
.tarja__t{font-size:clamp(1.3rem,2.1vw,1.75rem);font-weight:700;letter-spacing:-.035em;line-height:1.05;margin-bottom:.7rem}
.tarja__d{font-size:.93rem;color:var(--tinta-70);margin:0 0 1.2rem}
.tarja__l{list-style:none;margin:0 0 1.4rem;padding:0;display:grid;gap:.34rem}
.tarja__l li{font-size:.86rem;color:var(--tinta-70);padding-left:.9rem;position:relative}
.tarja__l li::before{content:'';position:absolute;left:0;top:.62em;width:5px;height:2px;background:var(--fluor)}
.tarja__ir{margin-top:auto;font-family:var(--mono);font-size:var(--meta);letter-spacing:.11em;
  text-transform:uppercase;display:inline-block;position:relative;width:fit-content}
.tarja__ir::after{content:'';position:absolute;left:0;right:0;bottom:-3px;height:.55em;background:var(--fluor);
  z-index:-1;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.tarja:hover .tarja__ir::after{transform:scaleX(1)}
.riel-guia{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  font-family:var(--mono);font-size:var(--meta);letter-spacing:.11em;text-transform:uppercase;
  color:var(--tinta-45);border-top:1px solid var(--regla);padding-top:.9rem}
.riel-barra{flex:1;height:3px;border-radius:var(--r-max);background:var(--regla);
  position:relative;max-width:260px;overflow:hidden}
.riel-barra i{position:absolute;inset:0 auto 0 0;background:var(--tinta);width:22%}

/* ============================================================
   PILA — los pasos se apilan al scrollear
   ============================================================ */
.pila{display:grid;gap:1.1rem}
.capa{position:sticky;background:var(--papel);border:1px solid var(--regla);
  border-radius:var(--r-gr);
  padding:clamp(1.5rem,3.2vw,2.6rem);display:grid;gap:.8rem 2.5rem}
@media(min-width:880px){.capa{grid-template-columns:7rem minmax(0,5fr) minmax(0,6fr);align-items:start}}
.capa:nth-child(1){top:calc(var(--hdr) + 1.5rem)}
.capa:nth-child(2){top:calc(var(--hdr) + 2.6rem)}
.capa:nth-child(3){top:calc(var(--hdr) + 3.7rem)}
.capa:nth-child(4){top:calc(var(--hdr) + 4.8rem)}
/* Marca de etapa en palabras, no en números: 'Primero', 'Después', 'Entonces' */
.capa__n{font-family:var(--serif);font-style:italic;font-size:1.22rem;line-height:1.1;color:var(--azul)}
.capa__t{font-size:clamp(1.2rem,2vw,1.6rem);font-weight:700;letter-spacing:-.035em;line-height:1.08}
.capa__t em{display:block;font-style:normal;font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tinta-45);margin-top:.5rem;font-weight:400}
.capa__d{font-size:.95rem;color:var(--tinta-70);margin:0}
@media (prefers-reduced-motion:reduce){.capa{position:static}}

/* ============================================================
   PREGUNTAS
   ============================================================ */
.faqs{border-top:2px solid var(--tinta)}
.faqs details{border-bottom:1px solid var(--regla)}
.faqs summary{list-style:none;cursor:pointer;padding-block:1.2rem;font-size:1.02rem;font-weight:700;
  letter-spacing:-.025em;display:flex;justify-content:space-between;gap:2rem;align-items:baseline}
.faqs summary::-webkit-details-marker{display:none}
.faqs summary::after{content:'+';font-family:var(--mono);color:var(--tinta-45);flex:none}
.faqs details[open] summary{color:var(--tinta)}
.faqs details[open] summary::after{content:'–'}
.faqs div{padding-bottom:1.35rem;max-width:62ch;color:var(--tinta-70);font-size:.94rem}

/* ============================================================
   ACCIONES
   ============================================================ */
/* Botones en píldora. El azul reemplaza al negro: con el fondo hueso
   y la tipografía en tinta, el negro sumaba un tercer peso y dejaba
   todo en blanco y negro. El azul es el único color del sistema, así
   que marca sin ensuciar. */
.btn{display:inline-flex;align-items:center;gap:.6rem;font-size:.92rem;font-weight:500;
  padding:.95rem 1.8rem;border:1px solid var(--azul);border-radius:var(--r-max);
  position:relative;overflow:hidden;
  transition:color .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease)}
.btn::before{content:'';position:absolute;inset:0;background:var(--azul-suave);
  transform:translateY(101%);transition:transform .4s var(--ease);z-index:-1}
.btn:hover::before{transform:none}
.btn span{position:relative}
.btn .ico{color:currentColor}

/* secundario: contorno azul sobre papel */
.btn{color:var(--azul)}
.btn:hover{color:var(--azul-hover);border-color:var(--azul-hover)}

/* primario: azul lleno */
.btn--p{background:var(--azul);color:#fff;border-color:var(--azul)}
.btn--p::before{background:var(--azul-hover)}
.btn--p:hover{color:#fff;border-color:var(--azul-hover)}
.btns{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:2rem}
.enl{position:relative;display:inline-block;font-weight:500}
.enl::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:.5em;background:var(--fluor);
  z-index:-1;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.enl:hover::after{transform:scaleX(1)}

/* ============================================================
   PIE
   ============================================================ */
.pie{background:var(--tinta);color:var(--papel);padding-block:clamp(3rem,6vw,4.5rem) 1.5rem}
.pie a{color:rgba(241,244,249,.62);transition:color .18s}
.pie a:hover{color:var(--papel)}
.pie__top{display:grid;gap:2.5rem;padding-bottom:2.4rem;border-bottom:1px solid rgba(241,244,249,.2)}
@media(min-width:900px){.pie__top{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:4rem}}
.pie__marca{display:flex;align-items:center;gap:.7rem;margin-bottom:1rem;line-height:1}
.pie__marca img{height:clamp(2.1rem,4.4vw,3.1rem);width:auto;display:block;flex:none}
.pie__marca em{font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(1.9rem,4vw,2.9rem);letter-spacing:-.02em;color:var(--fluor);line-height:1}
.pie__cols{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.pie h4,.pie h3{font-family:var(--mono);font-size:var(--meta);letter-spacing:.11em;text-transform:uppercase;
  color:rgba(241,244,249,.62);margin:0 0 .85rem;font-weight:500}
.pie ul{list-style:none;padding:0;margin:0;display:grid;gap:.45rem;font-size:.9rem}
.pie__fin{margin-top:1.5rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;color:rgba(241,244,249,.62)}

/* ============================================================
   FORMULARIO / CALENDARIO
   ============================================================ */
.form{max-width:36rem}
.form__paso,.form__step{display:none}
.form__paso.activo,.form__step.active{display:block}
.campo,.field{margin-bottom:1.5rem}
.campo > span,.field > span,.field > label{display:block;font-family:var(--mono);font-size:var(--meta);letter-spacing:.11em;
  text-transform:uppercase;color:var(--tinta-45);margin-bottom:.7rem}
.ops,.opts{display:flex;flex-wrap:wrap;gap:.45rem}
.op,.opt{position:relative}
.op input,.opt input{position:absolute;width:1px;height:1px;opacity:0;
  clip-path:inset(50%);pointer-events:none}
/* el input real está oculto, así que el foco se pinta sobre la etiqueta visible */
.op input:focus-visible + span,.opt input:focus-visible + span{
  outline:3px solid var(--azul);outline-offset:2px}
.op span,.opt span{display:inline-block;padding:.55em 1em;border:1px solid var(--regla);
  border-radius:var(--r-max);
  font-size:.88rem;cursor:pointer;transition:all .18s}
.op span:hover,.opt span:hover{border-color:var(--tinta)}
.op input:checked + span,.opt input:checked + span{background:var(--fluor);border-color:var(--tinta)}
.inp{width:100%;padding:.8em 0;border:0;border-bottom:1px solid var(--regla);background:transparent;
  font-family:inherit;font-size:1rem;color:var(--tinta)}
.inp:focus{outline:none;border-bottom-color:var(--tinta);border-bottom-width:2px}
.inp::placeholder{color:var(--tinta-70)}
textarea.inp{resize:vertical;min-height:4.5rem}
.error,.err{color:#B3261E;font-size:.84rem;margin-top:.35rem;display:none}
.error.visible,.err.show{display:block}
.form__nav{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.8rem}
.paso-n,.progress{font-family:var(--mono);font-size:var(--meta);letter-spacing:.11em;color:var(--tinta-45);
  display:block;margin-bottom:1.4rem}
.cal{border:1px solid var(--regla);background:var(--papel-2);min-height:600px;
  border-radius:var(--r-gr);overflow:hidden}
.cal iframe{width:100%;min-height:680px;border:0;display:block;background:#fff}
@media(max-width:620px){.cal,.cal iframe{min-height:760px}}
.cal-pie{margin-top:1.2rem}

/* ---------- Utilidades ---------- */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* al tabular tiene que aparecer: si no, no le sirve a nadie */
.sr-only:focus{position:fixed;top:.75rem;left:.75rem;width:auto;height:auto;
  overflow:visible;clip:auto;white-space:normal;z-index:120;
  padding:.7rem 1.1rem;background:var(--papel);color:var(--tinta);
  border:2px solid var(--azul);border-radius:var(--r-ch);
  font-family:var(--mono);font-size:.78rem;text-decoration:none}
.wa{position:fixed;right:1rem;bottom:1rem;z-index:50;display:none;align-items:center;padding:.8em 1.25em;
  border-radius:var(--r-max);
  background:var(--azul);color:#fff;font-family:var(--mono);font-size:.64rem;
  letter-spacing:.1em;text-transform:uppercase}
@media(max-width:760px){.wa{display:inline-flex}}
.rv{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rv.visible,.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}
:focus-visible{outline:3px solid var(--azul);outline-offset:2px}
/* sobre papel el fluor da 1.75:1 y no se ve; en los bloques oscuros pasa al revés */
.pie :focus-visible,.bloque--tinta :focus-visible,.franja :focus-visible{outline-color:var(--fluor)}
.section,.bloque--abierto,.seccion{padding-block:clamp(3.5rem,7vw,7rem);border-bottom:1px solid var(--regla)}
@media(min-width:900px){}
.card,.puerta,.capa:not(.pila .capa),.step,.teja{display:flex;flex-direction:column;gap:.6rem;
  padding:1.3rem 0 0;border:0;border-top:2px solid var(--tinta);background:none;min-height:0;position:static}
.card h3,.puerta__t,.capa__t:not(.pila .capa__t),.step h3,.teja__t{font-size:1.15rem;font-weight:700;
  letter-spacing:-.03em;display:block}
.card p,.puerta__d,.capa__d:not(.pila .capa__d),.step p,.teja__d{font-size:.91rem;color:var(--tinta-70);
  margin:0;display:block}
.card__n,.capa__n:not(.pila .capa__n),.step__n,.row__num,.fase__n,.metodo__n,.tarja__n,.enun__n{
  font-family:var(--mono);font-size:var(--meta);letter-spacing:.11em;color:var(--tinta-45);
  background:none;width:auto;height:auto;display:block}
@media(min-width:760px){}
@media(min-width:1100px){}
@media(min-width:760px){}
.list{list-style:none;padding:0;margin:0}
.list li{position:relative;padding-left:1.2rem;margin-bottom:.5rem;font-size:.94rem}
.list li::before{position:absolute;left:0;top:.6em;width:7px;height:2px;background:var(--fluor);content:''}
@media(min-width:900px){}
@media(min-width:900px){}
@media(min-width:860px){}
.manif p.in{color:var(--tinta)}
.scrub w.on,.reveal w.on{color:var(--tinta)}
@media(min-width:820px){}
/* Todo lo que antes era negro pasa al azul: el sitio ya tiene el
   contraste que necesita con la tinta del texto. */
.accion--fuerte,.pastilla--solida,.btn--primary,.btn--onDark,.hdr__cta,.barra__cta{
  background:var(--azul);color:#fff;border-color:var(--azul);border-radius:var(--r-max)}
.hdr{position:sticky;top:0;inset:auto;z-index:60;background:var(--papel);border-bottom:1px solid var(--regla);
  height:var(--hdr);display:flex;align-items:center;justify-content:space-between;padding-inline:var(--margen)}
.hdr__nav a:hover,.nav a[aria-current],.hdr__nav a[aria-current]{color:var(--tinta)}
.barra__cta em{background:none;padding:0;margin:0;backdrop-filter:none}
@media(max-width:940px){}
.mnav.open{opacity:1;pointer-events:auto}
.ftr__legal,.pie__legal,.estado{margin-top:2rem;padding-top:1.3rem;border-top:1px solid rgba(241,244,249,.2);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-family:var(--mono);
  font-size:.62rem;letter-spacing:.08em;color:rgba(241,244,249,.62)}
@media(max-width:700px){}
@media(min-width:900px){}
.reja,.hoja .reja{display:block}
@media(min-width:860px){}
@media(min-width:860px){}
@media(min-width:860px){}
@media(min-width:720px){}
@media(min-width:720px){}
@media(min-width:1100px){}

/* ==================================================================
   CONSENTIMIENTO DE COOKIES
   El cartel aparece abajo a la izquierda, no tapa el contenido y no
   usa trampas: "Rechazar todo" pesa lo mismo que "Aceptar todo".
   ================================================================== */
.ckk{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:80;
  max-width:30rem;padding:1.4rem 1.5rem;background:var(--papel);
  max-height:calc(100vh - 2rem);max-height:calc(100svh - 2rem);
  overflow-y:auto;overscroll-behavior:contain;
  border:1px solid var(--regla);border-radius:var(--r-gr);
  box-shadow:0 24px 60px -24px rgba(13,19,36,.3);
  opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.ckk.abierto{opacity:1;transform:none}
.ckk[hidden]{display:none}
@media(min-width:680px){.ckk{right:auto;left:1.6rem;bottom:1.6rem}}
/* en pantallas chicas no choca con el botón flotante de WhatsApp */
@media(max-width:679px){.ckk{bottom:4.6rem}}

.ckk__t{margin:0 0 .5rem;font-size:1.02rem;font-weight:700;letter-spacing:-.02em}
.ckk__d{margin:0;font-size:.88rem;line-height:1.5;color:var(--tinta-70)}
.ckk__d a{color:var(--azul);text-decoration:underline;text-underline-offset:.18em}
.ckk__btns{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.1rem}
.ckk__btns button{flex:1 1 auto;min-width:8.5rem;padding:.72rem 1.1rem;
  font-family:inherit;font-size:.86rem;font-weight:500;cursor:pointer;
  border:1px solid var(--azul);border-radius:var(--r-max);
  background:transparent;color:var(--azul);transition:background .2s,color .2s}
.ckk__btns button:hover{background:var(--azul-suave)}
.ckk__btns .ckk--si{background:var(--azul);color:#fff}
.ckk__btns .ckk--si:hover{background:var(--azul-hover)}
.ckk__mas{display:block;width:100%;margin-top:.7rem;background:none;border:0;
  padding:.3rem 0;font-family:var(--mono);font-size:var(--meta);letter-spacing:.11em;
  text-transform:uppercase;color:var(--tinta-45);cursor:pointer;text-align:left}
.ckk__mas:hover{color:var(--tinta)}

/* --- panel de preferencias --- */
.ckk__panel{margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid var(--regla)}
.ckk__panel[hidden]{display:none}
.ckk__fila{display:flex;align-items:flex-start;gap:.9rem;padding-block:.75rem}
.ckk__fila + .ckk__fila{border-top:1px solid var(--regla-fina)}
.ckk__fila h4{margin:0 0 .2rem;font-size:.9rem;font-weight:600}
.ckk__fila p{margin:0;font-size:.8rem;line-height:1.45;color:var(--tinta-70)}
.ckk__sw{flex:none;order:2;width:40px;height:23px;border-radius:var(--r-max);
  border:0;background:var(--tinta-22);position:relative;cursor:pointer;
  transition:background .25s var(--ease)}
.ckk__sw::after{content:'';position:absolute;top:3px;left:3px;width:17px;height:17px;
  border-radius:50%;background:#fff;transition:transform .25s var(--ease)}
.ckk__sw[aria-checked="true"]{background:var(--azul)}
.ckk__sw[aria-checked="true"]::after{transform:translateX(17px)}
.ckk__sw[disabled]{background:var(--azul);opacity:.45;cursor:default}

/* --- tabla de cookies en la página de política --- */
.tabla-ck{width:100%;border-collapse:collapse;font-size:.88rem;margin-top:1.2rem}
.tabla-ck th,.tabla-ck td{text-align:left;padding:.75rem .8rem;
  border-bottom:1px solid var(--regla-fina);vertical-align:top}
.tabla-ck th{font-family:var(--mono);font-size:var(--meta);letter-spacing:.11em;
  text-transform:uppercase;color:var(--tinta-45);border-bottom:1px solid var(--tinta)}
.tabla-ck td:first-child{font-weight:600;white-space:nowrap}
.tabla-ck tr:hover td{background:var(--papel-2)}
@media(max-width:720px){
  .tabla-ck,.tabla-ck tbody,.tabla-ck tr,.tabla-ck td{display:block;width:100%}
  .tabla-ck thead{display:none}
  .tabla-ck tr{padding-block:.9rem;border-bottom:1px solid var(--regla)}
  .tabla-ck td{border:0;padding:.15rem 0}
  .tabla-ck td::before{content:attr(data-r) ' · ';font-family:var(--mono);
    font-size:var(--meta);letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-45)}
  .tabla-ck td:first-child::before{content:''}
}

/* cuerpo de las páginas legales */
.legal{max-width:68ch;font-size:1rem;line-height:1.65;color:var(--tinta-70)}
.legal > * + *{margin-top:1.15em}
.legal h2{margin-top:2.6em;font-size:clamp(1.3rem,2.4vw,1.8rem);font-weight:700;
  letter-spacing:-.03em;line-height:1.15;color:var(--tinta);max-width:24ch}
.legal h3{margin-top:1.9em;font-size:1.05rem;font-weight:700;color:var(--tinta)}
.legal strong{color:var(--tinta)}
.legal a{color:var(--azul);text-decoration:underline;text-underline-offset:.2em}
.legal ul{list-style:none;padding-left:0;margin-left:0}
.legal li{position:relative;padding-left:1.1rem}
.legal li + li{margin-top:.5em}
.legal li::before{content:'';position:absolute;left:0;top:.72em;width:6px;height:2px;
  background:var(--azul)}
.legal .aviso{padding:1.1rem 1.3rem;background:var(--papel-2);
  border-radius:var(--r-md);border-left:3px solid var(--azul);font-size:.93rem}
.legal .fecha{font-family:var(--mono);font-size:var(--meta);letter-spacing:.11em;
  text-transform:uppercase;color:var(--tinta-45)}

/* enlaces legales dentro del cierre del pie */
.pie__fin .pie__legal{margin:0;padding:0;border:0;display:inline-flex;align-items:center;
  gap:1.1rem;flex-wrap:wrap;font-family:inherit;font-size:inherit;letter-spacing:inherit}
.pie__fin .pie__legal a{color:rgba(241,244,249,.55);text-decoration:none;
  border-bottom:1px solid transparent;transition:color .25s var(--ease),border-color .25s var(--ease)}
.pie__fin .pie__legal a:hover{color:var(--fluor);border-bottom-color:var(--fluor)}

/* Movimiento reducido: lo que faltaba cubrir.
   La foto entraba con un scale de 1.1s, el cartel de cookies con un
   desplazamiento vertical y el interruptor con un deslizamiento. */
@media (prefers-reduced-motion:reduce){
  .foto img{transform:none}
  .foto.on img,.foto.visible img,.foto.in img{transition:none}
  .ckk{transform:none;transition:opacity .01ms}
  .ckk__sw::after{transition:none}
  .btn::before{transition:none}
}

/* ============================================================
   NOTAS — el blog
   La respuesta corta va arriba a propósito: es lo que lee alguien
   apurado y es el bloque que los asistentes de IA toman para citar.
   ============================================================ */
.resp-corta{max-width:66ch;padding:clamp(1.2rem,2.5vw,1.8rem) clamp(1.3rem,2.8vw,2rem);
  background:var(--papel-2);border-radius:var(--r-gr);border-left:3px solid var(--azul)}
.resp-corta p{margin:0;font-size:clamp(1rem,1.5vw,1.14rem);line-height:1.6;color:var(--tinta)}

/* la fecha de la nota, fuera del bloque .legal */
.fecha{font-family:var(--mono);font-size:var(--meta);letter-spacing:.11em;
  text-transform:uppercase;color:var(--tinta-45);margin:0}

.nota-cuerpo ol{list-style:none;counter-reset:n;padding-left:0;margin-left:0}
.nota-cuerpo ol > li{counter-increment:n;position:relative;padding-left:2rem}
.nota-cuerpo ol > li + li{margin-top:.75em}
.nota-cuerpo ol > li::before{content:counter(n);position:absolute;left:0;top:.05em;
  width:1.35rem;height:1.35rem;background:none;font-family:var(--mono);font-size:.72rem;
  color:var(--azul);border:1px solid var(--azul);border-radius:var(--r-max);
  display:flex;align-items:center;justify-content:center}
/* la tabla puede ser más ancha que la columna de texto */
.nota-cuerpo .tabla-env{max-width:none;width:100%;overflow-x:auto}

/* ---- índice de notas ---- */
.notas-lista{border-top:2px solid var(--tinta)}
.nota-item{display:grid;gap:clamp(1rem,2.5vw,2rem);padding-block:clamp(1.5rem,3vw,2.2rem);
  border-bottom:1px solid var(--regla);text-decoration:none;color:inherit;
  transition:background .25s var(--ease),padding-left .25s var(--ease)}
.nota-item:hover{background:var(--papel-2);padding-left:1rem}
.nota-item__foto{aspect-ratio:16/10;border-radius:var(--r-md)}
.nota-item__txt h3{margin:.5rem 0 .6rem;font-size:clamp(1.15rem,2.4vw,1.75rem);
  font-weight:700;letter-spacing:-.03em;line-height:1.15;max-width:28ch}
.nota-item:hover .nota-item__txt h3{color:var(--azul)}
.nota-item__txt p{margin:0;font-size:.94rem;line-height:1.55;color:var(--tinta-70);max-width:60ch}
.nota-item__ir{display:inline-block;margin-top:.9rem;font-family:var(--mono);
  font-size:var(--meta);letter-spacing:.11em;text-transform:uppercase;color:var(--azul)}
@media(min-width:760px){.nota-item{grid-template-columns:minmax(0,4fr) minmax(0,8fr);align-items:start}}

/* ---- navegación entre notas ---- */
.entre-notas{display:grid;gap:1rem;padding-top:1.6rem;border-top:1px solid var(--regla)}
@media(min-width:760px){.entre-notas{grid-template-columns:1fr 1fr}}
.entre-notas__a{display:block;padding:1.1rem 1.3rem;border:1px solid var(--regla);
  border-radius:var(--r-md);text-decoration:none;color:inherit;
  transition:border-color .25s var(--ease),background .25s var(--ease)}
.entre-notas__a:hover{border-color:var(--azul);background:var(--papel-2)}
.entre-notas__a strong{display:block;margin-top:.45rem;font-size:.98rem;
  font-weight:700;letter-spacing:-.02em;line-height:1.25}
.entre-notas__a:hover strong{color:var(--azul)}
@media(min-width:760px){.entre-notas__a--der{text-align:right}}

/* Aviso del formulario: éxito, error o estado.
   Va en un solo lugar y siempre visible cuando tiene texto. Un
   formulario que falla en silencio es peor que uno que no existe. */
.form__aviso{display:none;font-size:.9rem;line-height:1.5;padding:.85rem 1rem;
  border-radius:var(--r-md);background:var(--papel-2);color:var(--tinta-70);
  border-left:3px solid var(--azul)}
.form__aviso.visible,.form__aviso.show{display:block}
.form__aviso.error{background:#FBEAE8;color:#8A1D16;border-left-color:#B3261E}
.form__aviso a{color:inherit;text-decoration:underline;text-underline-offset:.2em}
.form button[type="submit"][disabled]{opacity:.6;cursor:progress}