/* WORKLYNK — estilos de la web
   Blanco papel y negro, en claro y en oscuro. Una sola letra, Archivo.
   Una sola estructura: rejilla de 12 columnas; en cada sección el titular va
   a la izquierda (columnas 1–5) y el contenido a la derecha (7–12). */

@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-latin.woff2") format("woff2-variations"), url("/assets/fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  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+20AC, U+2122, U+2212;
}

/* ---------- Colores ---------- */
:root {
  --papel: #f3f3f0;
  --tinta: #0c0c0d;
  --tinta-2: #2b2b2f;
  --gris: #57575c;
  --filete: rgba(12, 12, 13, .13);
  --filete-fuerte: rgba(12, 12, 13, .26);
  --capa: rgba(246, 246, 243, .74);
  --capa-solida: rgba(250, 250, 248, .96);
  --campo: rgba(255, 255, 255, .7);
  --app: #ffffff;
  --app-barra: #f7f7f5;
  --app-mesa: #efefec;
  --app-sel: #ececE8;
  --sombra: rgba(20, 20, 24, .16);
  --brillo: rgba(255, 255, 255, .95);
  --vidrio: rgba(255, 255, 255, .4);
  --vidrio-borde: rgba(255, 255, 255, .92);
  --luz: rgba(255, 255, 255, 1);
  --sombra-fondo: rgba(12, 12, 13, .19);
  --metal-a: #efefed;
  --metal-b: #c9c9c6;
  --metal-c: #9a9a97;
  --hoja-papel: #fdfdfb;
  --acero: #8b8e94;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --papel: #0b0b0c;
  --tinta: #f1f1ec;
  --tinta-2: #d6d6d1;
  --gris: #a1a1a7;
  --filete: rgba(241, 241, 236, .14);
  --filete-fuerte: rgba(241, 241, 236, .3);
  --capa: rgba(16, 16, 18, .7);
  --capa-solida: rgba(20, 20, 22, .96);
  --campo: rgba(255, 255, 255, .05);
  --app: #141416;
  --app-barra: #18181a;
  --app-mesa: #0f0f11;
  --app-sel: #222225;
  --sombra: rgba(0, 0, 0, .6);
  --brillo: rgba(255, 255, 255, .4);
  --vidrio: rgba(30, 30, 33, .44);
  --vidrio-borde: rgba(255, 255, 255, .1);
  --luz: rgba(255, 255, 255, .2);
  --sombra-fondo: rgba(0, 0, 0, .6);
  --metal-a: #5c5c61;
  --metal-b: #3a3a3e;
  --metal-c: #232326;
  --hoja-papel: #e4e4df;
  --acero: #a3a6ac;
  color-scheme: dark;
}
/* El final de cada página va en negativo: el cierre, el pie y la barra cuando
   pasa por encima de ellos. En claro es negro; en oscuro, papel. */
.cierre, .pie, .barra.invertida {
  --papel: #0b0b0c; --tinta: #f1f1ec; --tinta-2: #d6d6d1; --gris: #a1a1a7;
  --filete: rgba(241, 241, 236, .14); --filete-fuerte: rgba(241, 241, 236, .3);
  --capa: rgba(16, 16, 18, .7); --capa-solida: rgba(20, 20, 22, .96); --campo: rgba(255, 255, 255, .05);
  --acero: #a3a6ac;
  color-scheme: dark;
}
:root[data-theme="dark"] :is(.cierre, .pie, .barra.invertida) {
  --papel: #f3f3f0; --tinta: #0c0c0d; --tinta-2: #2b2b2f; --gris: #57575c;
  --filete: rgba(12, 12, 13, .13); --filete-fuerte: rgba(12, 12, 13, .26);
  --capa: rgba(246, 246, 243, .74); --capa-solida: rgba(250, 250, 248, .96); --campo: rgba(255, 255, 255, .7);
  --acero: #8b8e94;
  color-scheme: light;
}

:root {
  --letra: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --borde: clamp(20px, 4vw, 56px);
  --ancho: 1320px;
  --lado: max(var(--borde), calc((100% - var(--ancho)) / 2));
  --hueco: clamp(16px, 2.4vw, 40px);
  --aire: clamp(80px, 9vw, 136px);
  --sale: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
html { background: var(--papel); transition: background-color .5s var(--sale); }
body {
  margin: 0;
  background: transparent;
  color: var(--tinta);
  font: 400 17px/1.6 var(--letra);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
  transition: background-color .5s var(--sale), color .5s var(--sale);
}
h1, h2, h3, p, ol, ul, dl, dd, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-underline-offset: .18em; }
img, svg { display: block; }
button, input, textarea { font: inherit; color: inherit; }
::selection { background: var(--tinta); color: var(--papel); }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; border-radius: 8px; }
html { scrollbar-color: var(--filete-fuerte) transparent; caret-color: var(--tinta); }
h1, h2, h3 { font-family: var(--letra); font-weight: 800; letter-spacing: -.035em; text-wrap: balance; }
p { text-wrap: pretty; }

.saltar { position: absolute; left: 12px; top: -80px; z-index: 50; padding: 10px 18px; border-radius: 999px; background: var(--tinta); color: var(--papel); }
.saltar:focus { top: 12px; }

/* ---------- Barra superior ---------- */
.barra {
  position: fixed; inset: 0 0 auto; z-index: 30;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  padding: 14px var(--borde);
}
/* Velo bajo la barra: el contenido que sube no se cruza con el logo ni los botones */
.barra::before {
  content: ""; position: absolute; inset: 0 0 -28px; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, var(--papel) 0%, color-mix(in srgb, var(--papel) 82%, transparent) 55%, transparent 100%);
}
.marca { justify-self: start; display: inline-flex; color: var(--tinta); border-radius: 6px; }
.marca__firma { height: 30px; width: auto; }

.menu {
  display: flex; align-items: center; gap: 2px; padding: 4px;
  background: var(--capa); border: 1px solid var(--filete); border-radius: 999px;
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
}
.menu__grupo { position: relative; }
.menu__boton, .menu__enlace {
  display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px; border-radius: 999px;
  border: 0; background: none; cursor: pointer; text-decoration: none;
  font: 500 14.5px/1 var(--letra); color: var(--gris);
  transition: background-color .3s var(--sale), color .3s var(--sale);
}
.menu__boton:hover, .menu__enlace:hover, .menu__boton[aria-expanded="true"] { color: var(--tinta); }
.menu__boton[data-activo], .menu__enlace[aria-current] { background: var(--tinta); color: var(--papel); }
.flecha { width: 12px; height: 12px; transition: transform .4s var(--sale); }
.menu__boton[aria-expanded="true"] .flecha { transform: rotate(180deg); }

.desplegable {
  position: absolute; top: calc(100% + 12px); left: 50%; width: 360px; padding: 8px;
  background: var(--capa-solida); border: 1px solid var(--filete); border-radius: 22px;
  box-shadow: 0 30px 80px -30px var(--sombra);
  opacity: 0; visibility: hidden; transform: translate(-50%, -6px);
  transition: opacity .25s var(--sale), transform .35s var(--sale), visibility 0s .25s;
}
.desplegable[data-open="true"] { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.desplegable__fila { display: block; padding: 12px 14px; border-radius: 14px; text-decoration: none; transition: background-color .2s; }
.desplegable__fila:hover, .desplegable__fila[aria-current] { background: var(--filete); }
.desplegable__fila b { display: block; font-size: 16px; font-weight: 700; line-height: 1.2; letter-spacing: -.015em; }
.desplegable__fila span { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.4; color: var(--gris); }

.barra__fin { justify-self: end; display: flex; align-items: center; gap: 10px; }
.hamburguesa { display: none; }
.hoja { display: none; }

/* ---------- Botones y enlaces ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid transparent; cursor: pointer;
  font: 600 15px/1 var(--letra); text-decoration: none; white-space: nowrap;
  transition: transform .3s var(--sale), background-color .25s, color .25s, border-color .25s;
}
.boton:active { transform: scale(.97); }
.boton--lleno { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.boton--lleno:hover { background: color-mix(in srgb, var(--tinta) 84%, var(--papel)); }
.boton--linea { color: var(--tinta); border-color: var(--filete-fuerte); background: transparent; }
.boton--linea:hover { border-color: var(--tinta); }
.boton--grande { height: 52px; padding: 0 26px; font-size: 16px; }
/* La flecha de los botones principales: empuja un poco al pasar por encima */
.boton__flecha { flex: none; width: 16px; height: 16px; margin-right: -4px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s var(--sale); }
.boton:hover .boton__flecha, .cierre__enviar:hover .boton__flecha { transform: translateX(3px); }

.enlace {
  position: relative; display: inline-flex; align-items: center; gap: 10px; padding-bottom: 5px;
  font-weight: 600; text-decoration: none;
}
.enlace::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: currentColor; transform-origin: 0 50%; transition: transform .5s var(--sale); }
.enlace:hover::before { transform: scaleX(.35); }
.enlace::after {
  content: ""; width: 7px; height: 7px; margin-left: 2px; border: solid currentColor; border-width: 1.5px 1.5px 0 0;
  transform: rotate(45deg); transition: transform .5s var(--sale);
}
.enlace:hover::after { transform: translateX(4px) rotate(45deg); }
.enlace-texto { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.enlace-texto:hover { text-decoration-thickness: 2px; }

.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 32px; }
.acciones .enlace + .enlace { margin-left: 22px; }

.migas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: var(--gris); }
.migas a { text-decoration: none; }
.migas a:hover { color: var(--tinta); }
.migas [aria-current] { color: var(--tinta); }

/* ---------- Portada y cabeceras ---------- */
/* El titular ocupa el ancho; el texto y los botones caen en la columna de
   contenido (7–12), la misma de todas las secciones de debajo. */
.portada, .cabecera {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hueco);
  padding: clamp(150px, 23vh, 240px) var(--lado) var(--aire);
}
.portada > *, .cabecera > * { grid-column: 1 / -1; min-width: 0; }
.portada h1 { font-size: clamp(3rem, 7.6vw, 6rem); line-height: .94; letter-spacing: -.04em; }
.cabecera h1 { margin-top: 28px; font-size: clamp(2.6rem, 5.6vw, 5rem); line-height: .96; letter-spacing: -.04em; max-width: 17ch; }
.cabecera__pie { grid-column: 7 / -1; margin-top: clamp(40px, 6vw, 80px); }
.lede { max-width: 46ch; font-size: clamp(18px, 1.45vw, 21px); line-height: 1.5; color: var(--tinta-2); }
.cabecera--corta { padding-bottom: clamp(40px, 6vw, 72px); }
.portada__texto { grid-column: 7 / -1; grid-row: 2; margin-top: clamp(48px, 6vw, 88px); }
/* Lemas (2026-10-08, de los creativos de redes): frases cortas con peso, nunca más de una por bloque */
.portada__lema { max-width: 22ch; margin-bottom: 18px; font-size: clamp(22px, 2vw, 28px); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; color: var(--tinta); text-wrap: balance; }
.frase-lema { display: block; margin-bottom: 8px; font-size: clamp(20px, 1.7vw, 24px); font-weight: 700; letter-spacing: -.015em; color: var(--tinta); }
.portada > .vitrina { grid-column: 1 / span 6; grid-row: 2; margin-top: clamp(48px, 6vw, 88px); }

/* ---------- Vitrina de la portada ---------- */
/* Tres piezas de interfaz de ejemplo que se solapan. Todo se mide en em: la
   letra sale del ancho de la vitrina y la composición escala entera. */
.vitrina { position: relative; container-type: inline-size; aspect-ratio: 6 / 5; }
.capa { position: absolute; }
.capa--panel { left: 0; top: 0; width: 80%; }
.capa--acta { right: 0; bottom: 0; width: 47%; z-index: 1; }
.capa--aviso { right: 3%; top: 31%; width: 52%; z-index: 2; }
.ui { font-size: clamp(8.5px, 2.15cqi, 13.5px); line-height: 1.35; border-radius: 1.3em; color: var(--tinta); }
.ui-panel { overflow: hidden; background: var(--app); border: 1px solid var(--filete); box-shadow: 0 40px 90px -50px var(--sombra), 0 8px 24px -18px var(--sombra); }
.ui__barra { display: flex; align-items: center; justify-content: space-between; padding: 1.1em 1.4em; background: var(--app-barra); border-bottom: 1px solid var(--filete); }
.ui__barra b { font-size: 1.05em; font-weight: 700; letter-spacing: -.01em; }
.ui__pill { padding: .35em .85em; border-radius: 999px; border: 1px solid var(--filete-fuerte); font-size: .85em; color: var(--gris); }
.ui-panel__cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--filete); }
.ui-panel__cifras div { padding: 1em 1.4em; }
.ui-panel__cifras div + div { border-left: 1px solid var(--filete); }
.ui-panel__cifras span { display: block; font-size: .82em; color: var(--gris); }
.ui-panel__cifras b { display: block; margin-top: .25em; font-size: 2em; font-weight: 800; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.ui-panel__grafico { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .9em; align-items: end; height: 9em; padding: 1.4em 1.4em 0; }
.ui-panel__grafico i { position: relative; height: calc(var(--h) * 100%); border-radius: .4em .4em .15em .15em; background: color-mix(in srgb, var(--tinta) 14%, transparent); }
.ui-panel__grafico i[data-hoy] { background: var(--tinta); }
.ui-panel__grafico b { position: absolute; left: 0; right: 0; bottom: -1.7em; text-align: center; font-size: .8em; font-weight: 500; color: var(--gris); }
.ui-panel__filas { margin-top: 2.4em; border-top: 1px solid var(--filete); }
.ui-panel__filas li { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto; gap: 1em; align-items: center; padding: .85em 1.4em; border-bottom: 1px solid var(--filete); font-size: .92em; white-space: nowrap; }
.ui-panel__filas li:last-child { border-bottom: 0; }
.ui-panel__filas span { overflow: hidden; text-overflow: ellipsis; }
.ui-panel__filas span + span { color: var(--gris); }
.ui-panel__filas em { padding: .25em .75em; border-radius: 999px; border: 1px solid var(--filete-fuerte); font-style: normal; font-size: .85em; color: var(--tinta-2); }
.ui-panel__filas em[data-ok] { background: var(--tinta); border-color: var(--tinta); color: var(--app); }
.ui-acta { padding: 1.6em 1.7em 1.5em; background: var(--app); border: 1px solid var(--filete); box-shadow: 0 40px 80px -40px var(--sombra), 0 10px 24px -16px var(--sombra); }
.ui-acta__tipo { font-size: .82em; color: var(--gris); }
.ui-acta__t { margin-top: .4em; font-size: 1.4em; font-weight: 800; line-height: 1.1; letter-spacing: -.03em; }
.ui-acta ol { margin-top: 1em; border-top: 1px solid var(--filete); counter-reset: punto; }
.ui-acta li { counter-increment: punto; display: grid; grid-template-columns: 1.6em minmax(0, 1fr); padding: .7em 0; border-bottom: 1px solid var(--filete); font-size: .92em; line-height: 1.4; color: var(--tinta-2); }
.ui-acta li:last-child { border-bottom: 0; padding-bottom: 0; }
.ui-acta li::before { content: counter(punto); color: var(--gris); font-variant-numeric: tabular-nums; }
.ui-aviso { display: flex; align-items: center; gap: 1em; padding: 1.05em 1.3em 1.05em 1.05em; border-radius: 1.4em; }
.ui-aviso b { display: block; font-size: 1.02em; font-weight: 700; letter-spacing: -.01em; }
.ui-aviso span { display: block; margin-top: .2em; font-size: .86em; color: var(--tinta-2); }

/* Cristal: solo en lo que flota sobre otra interfaz, para que tenga algo que deformar */
.cristal {
  position: relative;
  background: color-mix(in srgb, var(--app) 56%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--tinta) 8%, transparent), 0 30px 60px -28px var(--sombra), 0 6px 18px -10px var(--sombra);
}
.cristal::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(150deg, var(--brillo), transparent 38%, transparent 62%, var(--brillo));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.ok { position: relative; flex: none; width: 2.3em; height: 2.3em; border-radius: 999px; background: var(--tinta); }
.ok::after {
  content: ""; position: absolute; left: 50%; top: 45%; width: .42em; height: .8em;
  border: solid var(--papel); border-width: 0 .14em .14em 0; transform: translate(-50%, -50%) rotate(45deg);
}

/* Las líneas del titular suben desde su propia línea al cargar */
.linea { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.linea > span { display: block; }

/* ---------- Secciones ---------- */
.bloque {
  position: relative;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hueco); align-items: start;
  padding: var(--aire) var(--lado);
}
.bloque::before { content: ""; position: absolute; top: 0; left: var(--lado); right: var(--lado); height: 1px; background: var(--filete); }
.bloque > * { grid-column: 1 / -1; min-width: 0; }
.bloque > .bloque__cab { grid-column: 1 / span 5; position: sticky; top: 112px; }
.bloque > .bloque__cuerpo { grid-column: 7 / -1; }
.bloque > .bloque__ancho { grid-column: 1 / -1; margin-top: clamp(56px, 7vw, 104px); }

.bloque__cab h2 { font-size: clamp(2rem, 3.5vw, 3.3rem); line-height: 1.02; }
.bloque__cab > p { margin-top: 22px; max-width: 40ch; font-size: 17.5px; color: var(--gris); }
.bloque__cab em { font-style: normal; text-decoration: underline; text-decoration-thickness: .07em; text-underline-offset: .12em; }
.bloque__texto { max-width: 46ch; font-size: clamp(19px, 1.55vw, 22px); line-height: 1.5; color: var(--tinta-2); }
.bloque__nota { margin-top: 28px; max-width: 52ch; color: var(--gris); }
.bloque__cuerpo > .acciones:first-child { margin-top: 0; }

.bloque--kern .bloque__cab h2 { font-size: clamp(3.4rem, 8vw, 6rem); line-height: .9; letter-spacing: -.045em; }

/* Abierta: el titular y su entradilla en una fila, y el contenido debajo, a
   todo el ancho. Aprovecha el ancho y acorta el scroll. */
.bloque.bloque--abierto > .bloque__cab { grid-column: 1 / -1; position: static; display: grid; grid-template-columns: subgrid; align-items: end; row-gap: 22px; }
.bloque--abierto > .bloque__cab h2 { grid-column: 1 / span 6; }
.bloque--abierto > .bloque__cab > p { grid-column: 8 / -1; margin-top: 0; max-width: 46ch; }
.bloque.bloque--abierto > .bloque__cuerpo { grid-column: 1 / -1; margin-top: clamp(40px, 5vw, 72px); }
.piezas.piezas--1 { grid-template-columns: minmax(0, 1fr); }
.piezas.piezas--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.piezas.piezas--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Espejo: el titular a la derecha y el contenido a la izquierda. Se alterna con
   las secciones normales para que, al bajar, la página no vaya siempre por el
   mismo lado. */
.bloque.bloque--espejo > .bloque__cab { grid-column: 8 / -1; grid-row: 1; }
.bloque.bloque--espejo > .bloque__cuerpo { grid-column: 1 / span 6; grid-row: 1; }

/* Gigante: el titular crece hasta ocupar lo mismo que la lista de al lado.
   site.js calcula el tamaño (sin pasarse del ancho de la columna); sin JS se
   queda grande igualmente. */
.bloque.bloque--gigante { align-items: stretch; }
.bloque.bloque--gigante > .bloque__cab { position: static; }
.bloque--gigante .bloque__cab h2 { font-size: clamp(3rem, 6.4vw, 6.6rem); line-height: .9; letter-spacing: -.05em; }
.bloque--gigante .bloque__cab > p { margin-top: 28px; }

/* Lista de frases grandes */
.lista-grande { margin-top: 40px; border-top: 1px solid var(--filete); }
.lista-grande li {
  padding: 20px 0; border-bottom: 1px solid var(--filete);
  font-size: clamp(1.35rem, 2.2vw, 2rem); font-weight: 700; line-height: 1.12; letter-spacing: -.03em;
}

/* Piezas: título y texto bajo un filete, en dos columnas */
.piezas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--hueco); }
.pieza { border-top: 1px solid var(--filete); padding: 24px 0 40px; }
.pieza h3 { font-size: clamp(1.15rem, 1.45vw, 1.35rem); font-weight: 700; line-height: 1.18; letter-spacing: -.02em; }
.pieza h3 a { text-decoration: none; }
.pieza h3 a:hover { text-decoration: underline; }
.pieza p { margin-top: 10px; max-width: 42ch; font-size: 16px; line-height: 1.6; color: var(--gris); }

/* Pasos: cada uno con su filete, que se traza al bajar */
.pasos { counter-reset: paso; }
.pasos li {
  position: relative; counter-increment: paso; view-timeline: --paso block;
  display: grid; grid-template-columns: 64px minmax(0, 1fr); padding: 26px 0 40px; border-top: 1px solid var(--filete);
}
.pasos li::before { content: counter(paso, decimal-leading-zero); grid-row: span 2; padding-top: .45em; font-size: 14px; font-weight: 500; color: var(--gris); font-variant-numeric: tabular-nums; }
.pasos li::after { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--tinta); transform-origin: 0 50%; transform: scaleX(0); }
.pasos h3 { font-size: clamp(1.35rem, 2vw, 1.75rem); font-weight: 700; line-height: 1.1; letter-spacing: -.03em; }
.pasos p { grid-column: 2; margin-top: 10px; max-width: 46ch; color: var(--gris); }
.pasos + .acciones { margin-top: 16px; }
.bloque--abierto .pasos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 6px 10px; }
.bloque--abierto .pasos li { grid-template-columns: minmax(0, 1fr); padding: 34px 18px 30px; border-top: 0; border-left: 1px solid var(--filete); }
.bloque--abierto .pasos li:first-child { border-left: 0; }
.bloque--abierto .pasos li::before { grid-row: auto; padding: 0 0 14px; }
.bloque--abierto .pasos li::after { top: 18px; left: 18px; right: 18px; }
.bloque--abierto .pasos p { grid-column: 1; }
.bloque--abierto .pasos + .acciones { margin-top: 24px; }

/* Antes y después, en filas */
.antes-despues > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); padding: 24px 0 32px; border-top: 1px solid var(--filete); }
.antes-despues > div:last-child { border-top-color: var(--tinta); }
.antes-despues__etiqueta { grid-row: span 2; padding-top: .3em; font-size: 14px; color: var(--gris); }
.antes-despues h3 { font-size: clamp(1.3rem, 1.9vw, 1.7rem); font-weight: 700; line-height: 1.12; letter-spacing: -.03em; }
.antes-despues h3 + p { grid-column: 2; margin-top: 10px; max-width: 46ch; color: var(--gris); }
.antes-despues + .acciones { margin-top: 24px; }
.bloque--abierto .antes-despues { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 6px 10px; }
.bloque--abierto .antes-despues > div { grid-template-columns: minmax(0, 1fr); padding: 28px 22px 32px; border-top: 0; border-left: 1px solid var(--filete); }
.bloque--abierto .antes-despues > div:first-child { border-left: 0; }
.bloque--abierto .antes-despues > div:last-child { border-top-color: transparent; }
.bloque--abierto .antes-despues__etiqueta { grid-row: auto; padding: 0 0 14px; }
.bloque--abierto .antes-despues h3 + p { grid-column: 1; }

/* Índice de productos y servicios */
.indice { display: grid; gap: 48px; }
.indice__grupo h3 { font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--gris); margin-bottom: 14px; }
.indice__grupo ul { border-top: 1px solid var(--filete); }
.indice__grupo li { border-bottom: 1px solid var(--filete); }
.indice__grupo a {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 40px; align-items: center; gap: 24px;
  padding: 22px 0; text-decoration: none;
}
.indice__grupo b { font-size: clamp(1.6rem, 2.6vw, 2.4rem); font-weight: 800; line-height: 1; letter-spacing: -.04em; transition: transform .5s var(--sale); }
.indice__grupo a span { font-size: 15.5px; color: var(--gris); }
.indice__ir { width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--filete-fuerte); position: relative; transition: background-color .25s, border-color .25s; }
.indice__ir::before, .indice__ir::after { content: ""; position: absolute; left: 50%; top: 50%; }
.indice__ir::before { width: 12px; height: 1.5px; background: var(--tinta); transform: translate(-50%, -50%); transition: background-color .25s; }
.indice__ir::after { width: 6px; height: 6px; border: solid var(--tinta); border-width: 1.5px 1.5px 0 0; transform: translate(-30%, -50%) rotate(45deg); transition: border-color .25s; }
.indice__grupo a:hover b { transform: translateX(8px); }
.indice__grupo a:hover .indice__ir { background: var(--tinta); border-color: var(--tinta); }
.indice__grupo a:hover .indice__ir::before { background: var(--papel); }
.indice__grupo a:hover .indice__ir::after { border-color: var(--papel); }

/* Frases que reconoce cualquier empresa */
.frases { border-top: 1px solid var(--filete); }
.frases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
.frases li:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
.frases li { border-bottom: 1px solid var(--filete); padding: 18px 0; font-size: clamp(1.1rem, 1.5vw, 1.3rem); font-weight: 600; line-height: 1.3; letter-spacing: -.02em; }

/* Selector: ¿qué necesitas construir? */
.selector { margin-top: clamp(56px, 7vw, 88px); }
.selector__titulo { display: block; font-size: clamp(1.5rem, 2.4vw, 2.1rem); font-weight: 800; line-height: 1.05; letter-spacing: -.035em; margin-bottom: 22px; }
.selector__fila { display: flex; gap: 10px; }
.selector__fila .campo { flex: 1; }
.fichas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ficha {
  height: 38px; padding: 0 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--filete-fuerte); background: none; font-size: 14px; color: var(--tinta-2);
  transition: background-color .2s, color .2s, border-color .2s;
}
.ficha:hover { border-color: var(--tinta); }
.ficha[aria-pressed="true"] { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.selector__salida { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--filete); }
.selector__salida p { max-width: 60ch; color: var(--tinta-2); }
.selector__salida .acciones { margin-top: 20px; }

/* Campos */
.campo {
  width: 100%; height: 52px; padding: 0 18px; border-radius: 14px;
  border: 1px solid var(--filete-fuerte); background: var(--campo); color: var(--tinta); font-size: 16px;
  transition: border-color .2s, box-shadow .2s;
}
.campo::placeholder { color: var(--gris); opacity: .85; }
.campo:focus { outline: none; border-color: var(--tinta); box-shadow: 0 0 0 4px var(--filete); }
.campo--area { height: auto; min-height: 180px; padding: 14px 18px; resize: vertical; line-height: 1.5; }
select.campo { cursor: pointer; }

/* ---------- Revista: una pieza cada vez ---------- */
/* Las listas largas, como la portada de una revista: una caja de cristal lisa,
   casi de lado a lado de la pantalla, con una pieza cada vez (el titular enorme
   a la izquierda y su texto a la derecha) que pasa sola cada pocos segundos
   (site.js). Al llegar a ella, la caja se abre hasta su tamaño. Debajo, el
   índice, cuya barra se llena como un reloj, y los mandos. Sin JS (o con el
   movimiento reducido) se ven todas en lista. */
.revista__hoja { padding: 22px 0 26px; border-top: 1px solid var(--filete); }
.revista__t { font-size: clamp(1.3rem, 2vw, 1.75rem); font-weight: 800; line-height: 1.08; letter-spacing: -.03em; }
.revista__t span { display: block; }
.revista__txt { margin-top: 10px; max-width: 52ch; color: var(--gris); }
.revista__mandos { display: none; }

/* Más ancha que la columna (hasta 16 px del borde, como mucho 1560 px; 100vw
   cuenta la barra de scroll y con 16 px de margen nunca da scroll lateral) y,
   por dentro, el texto alineado con el resto de la página. La altura la da el
   contenido y la letra crece con la caja (cqi), para que nunca quede vacía. */
.js .revista {
  --caja: min(calc(100vw - 32px), 1560px);
  position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; overflow: hidden; container-type: inline-size;
  width: var(--caja); margin-inline: calc((100% - var(--caja)) / 2); padding-inline: max(28px, calc((var(--caja) - 100%) / 2));
  border-radius: 32px;
  background: var(--vidrio); border: 1px solid var(--vidrio-borde);
  -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
  box-shadow: inset 0 1px 0 var(--vidrio-borde), 0 50px 110px -60px var(--sombra), 0 2px 10px -6px var(--sombra);
}
.js .revista__hojas { display: grid; touch-action: pan-y; }
.js .revista__hoja {
  position: relative; grid-area: 1 / 1; min-width: 0;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hueco); align-content: center; align-items: end;
  padding: clamp(48px, 6cqi, 88px) 0 clamp(40px, 5cqi, 72px); border: 0; visibility: hidden;
}
.js .revista__t { grid-column: 1 / span 8; position: relative; margin: 0; overflow: hidden; padding-bottom: .08em; font-size: clamp(2.6rem, 6.8cqi, 7.5rem); line-height: .93; letter-spacing: -.05em; }
.js .revista__t span { transform: translate3d(0, 105%, 0); }
.js .revista__txt {
  grid-column: 9 / -1; position: relative; margin: 0 0 .35em; max-width: 34ch; font-size: clamp(19px, 1.75cqi, 26px); line-height: 1.45; color: var(--tinta-2);
  opacity: 0; transform: translate3d(0, 14px, 0);
}
/* La que entra: el titular sube y el texto aparece detrás */
.js .revista__hoja[data-activa], .js .revista:not([data-lista]) .revista__hoja:first-child { visibility: visible; }
.js .revista__hoja[data-activa] .revista__t span, .js .revista:not([data-lista]) .revista__hoja:first-child .revista__t span { transform: none; transition: transform 1s var(--sale) .12s; }
.js .revista__hoja[data-activa] .revista__txt, .js .revista:not([data-lista]) .revista__hoja:first-child .revista__txt { opacity: 1; transform: none; transition: opacity .7s var(--sale) .32s, transform .9s var(--sale) .32s; }
/* La que sale: hacia arriba, deprisa */
.js .revista__hoja[data-sale] { visibility: visible; }
.js .revista__hoja[data-sale] .revista__t span { transform: translate3d(0, -105%, 0); transition: transform .55s cubic-bezier(.7, 0, .84, 0); }
.js .revista__hoja[data-sale] .revista__txt { opacity: 0; transform: translate3d(0, -10px, 0); transition: opacity .3s ease-in, transform .4s ease-in; }

.js .revista__mandos { display: flex; align-items: flex-end; gap: clamp(16px, 3vw, 40px); padding: 0 0 clamp(24px, 3cqi, 40px); }
.revista__indice { flex: 1; min-width: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; }
.revista__ir {
  display: block; width: 100%; padding: 12px 0 2px; border: 0; background: none; cursor: pointer; text-align: left;
  font: 500 clamp(13.5px, 1.1cqi, 16px)/1.3 var(--letra); color: var(--gris); transition: color .3s;
}
.revista__ir i { position: relative; display: block; height: 2px; overflow: hidden; border-radius: 2px; background: var(--filete-fuerte); }
.revista__ir i::after { content: ""; position: absolute; inset: 0; background: var(--tinta); transform: scaleX(0); transform-origin: 0 50%; }
.revista__ir span { display: -webkit-box; min-height: 2.6em; margin-top: 10px; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.revista__ir:hover, .revista__ir[aria-current="true"] { color: var(--tinta); }
.revista__ir[data-visto] i::after, .revista__ir[aria-current="true"] i::after { transform: none; }
/* Mientras pasa sola, la barra de la actual es el reloj */
.js .revista[data-anda] .revista__ir[aria-current="true"] i::after { animation: llena var(--pasa, 7s) linear both; }
.js .revista[data-anda]:has(:focus-visible) .revista__ir[aria-current="true"] i::after { animation-play-state: paused; }
@media (hover: hover) {
  .js .revista[data-anda]:hover .revista__ir[aria-current="true"] i::after { animation-play-state: paused; }
}
@keyframes llena { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.revista__botones { flex: none; display: flex; gap: 8px; }
.revista__boton {
  width: 46px; height: 46px; display: grid; place-items: center; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--filete-fuerte); background: color-mix(in srgb, var(--app) 45%, transparent); color: var(--tinta);
  transition: background-color .25s, border-color .25s, color .25s, transform .3s var(--sale);
}
.revista__boton:hover { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.revista__boton:active { transform: scale(.94); }
.revista__boton svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.revista__sigue { display: none; fill: currentColor; stroke: none; }
.revista[data-parada] .revista__pausa { display: none; }
.revista[data-parada] .revista__sigue { display: inline; }

/* ---------- Maqueta de KERN ---------- */
.bloque--maqueta > .bloque__cuerpo { grid-column: 1 / -1; margin-top: clamp(48px, 6vw, 88px); }
.app {
  position: relative; overflow: hidden; border-radius: 20px; background: var(--app);
  border: 1px solid var(--filete); box-shadow: 0 40px 100px -50px var(--sombra), 0 10px 30px -20px var(--sombra);
  font-size: 14px; color: var(--tinta); --avance: 0;
}
.app__barra {
  position: relative; display: flex; align-items: center; gap: 18px; height: 54px; padding: 0 18px;
  background: var(--app-barra); border-bottom: 1px solid var(--filete);
}
.app__barra::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--tinta);
  transform-origin: 0 50%; transform: scaleX(var(--avance)); transition: transform .8s var(--sale);
}
.app__marca { font-size: 15px; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.app__ruta { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; color: var(--gris); white-space: nowrap; overflow: hidden; }
.app__ruta i { font-style: normal; opacity: .6; }
.app__ruta b { font-weight: 500; color: var(--tinta); overflow: hidden; text-overflow: ellipsis; }
.app__fase {
  margin-left: auto; flex: none; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--filete-fuerte);
  font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; transition: background-color .4s, color .4s;
}
.app[data-cerrado] .app__fase { background: var(--tinta); color: var(--app); border-color: var(--tinta); }

.app__cuerpo { display: grid; grid-template-columns: 220px minmax(0, 1fr) 260px; min-height: 470px; }
.app__fases { position: relative; padding: 16px 10px; border-right: 1px solid var(--filete); }
.app__fases li { position: relative; }
.app__fases li + li::before {
  content: ""; position: absolute; left: 23px; top: -7px; width: 1.5px; height: 14px; background: var(--filete-fuerte);
}
.fase {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 9px 10px; margin: 0 0 4px;
  border: 0; border-radius: 12px; background: none; cursor: pointer; text-align: left;
  font-size: 14px; color: var(--gris); transition: background-color .3s, color .3s;
}
.fase:hover { color: var(--tinta); }
.fase[aria-selected="true"] { background: var(--app-sel); color: var(--tinta); font-weight: 600; }
.fase__n {
  position: relative; width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 999px;
  border: 1.5px solid var(--filete-fuerte); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
  transition: background-color .4s, border-color .4s, color .4s;
}
.fase[aria-selected="true"] .fase__n { border-color: var(--tinta); }
.fase[data-done="true"] .fase__n { background: var(--tinta); border-color: var(--tinta); color: transparent; }
.fase[data-done="true"] .fase__n::after {
  content: ""; position: absolute; left: 9px; top: 6px; width: 5px; height: 9px;
  border: solid var(--app); border-width: 0 1.8px 1.8px 0; transform: rotate(45deg);
}

.app__doc { position: relative; display: flex; flex-direction: column; padding: 22px 24px; background: var(--app-mesa); min-width: 0; }
.app__aviso {
  position: absolute; right: 10px; top: 10px; z-index: 2; display: flex; align-items: center; gap: 10px;
  padding: 8px 18px 8px 8px; border-radius: 999px; font-size: 14px; font-weight: 600;
  opacity: 0; transform: translateY(10px) scale(.97); pointer-events: none;
  transition: opacity .35s var(--sale), transform .6s var(--sale);
}
.app__aviso[data-on] { opacity: 1; transform: none; }
.app__aviso .ok { font-size: 12px; }
.hoja-doc {
  flex: 1; padding: 26px 30px 22px; border-radius: 10px; background: var(--app);
  border: 1px solid var(--filete); box-shadow: 0 10px 30px -20px var(--sombra);
}
.hoja-doc.is-nuevo { animation: entra-doc .5s var(--sale); }
@keyframes entra-doc { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
.hoja-doc__tipo { font-size: 12px; letter-spacing: .02em; color: var(--gris); }
.hoja-doc__t { margin-top: 10px; font-size: 23px; font-weight: 700; line-height: 1.1; letter-spacing: -.03em; }
.hoja-doc__txt { margin-top: 14px; max-width: 62ch; font-size: 14.5px; line-height: 1.7; color: var(--tinta-2); }
.hoja-doc__txt sup {
  display: inline-grid; place-items: center; min-width: 19px; height: 19px; margin: 0 2px; padding: 0 4px; vertical-align: 2px;
  border-radius: 6px; background: var(--app-sel); font-size: 12px; font-weight: 600; color: var(--tinta); line-height: 1;
}
.hoja-doc__tabla { margin-top: 20px; border-top: 1px solid var(--filete); font-size: 13.5px; }
.hoja-doc__tabla > div { display: grid; grid-template-columns: 1.4fr 1fr .9fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--filete); }
.hoja-doc__tabla > div:first-child { font-size: 12px; letter-spacing: .02em; color: var(--gris); padding: 8px 0; }
.hoja-doc__tabla > div:not(:first-child) span:nth-child(2) { font-variant-numeric: tabular-nums; font-weight: 600; }
.hoja-doc__tabla > div:not(:first-child) span:nth-child(3) { color: var(--gris); display: inline-flex; align-items: center; gap: 8px; }
.hoja-doc__tabla > div:not(:first-child) span:nth-child(3)::before {
  content: ""; width: 4px; height: 8px; margin-top: -3px; border: solid var(--tinta); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}
.app__pie { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 16px; }
.app__estado { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gris); }
.app__estado::before { content: ""; width: 7px; height: 7px; border-radius: 999px; border: 1.5px solid var(--gris); }
.app__estado[data-ok] { color: var(--tinta); font-weight: 600; }
.app__estado[data-ok]::before { background: var(--tinta); border-color: var(--tinta); }
.app__pie .boton { height: 40px; font-size: 14px; }

.app__fuentes { padding: 18px 16px; border-left: 1px solid var(--filete); }
.rail__t { font-size: 12px; letter-spacing: .02em; color: var(--gris); margin-bottom: 12px; }
.src { display: grid; grid-template-columns: 22px 1fr; gap: 2px 10px; padding: 12px; margin-bottom: 8px; border-radius: 12px; border: 1px solid var(--filete); background: var(--app); }
.src em {
  grid-row: span 2; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 6px;
  background: var(--app-sel); font-style: normal; font-size: 12px; font-weight: 600;
}
.src b { font-size: 13px; font-weight: 600; line-height: 1.3; }
.src span { font-size: 12px; color: var(--gris); }
.app__fuentes .src { animation: entra-doc .5s var(--sale) both; }
.app__fuentes .src:nth-child(3) { animation-delay: .06s; }
.app__fuentes .src:nth-child(4) { animation-delay: .12s; }

/* ---------- Caso: cifras, filas y cita ---------- */
.cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--hueco); }
.cifras > div { border-top: 1px solid var(--tinta); padding-top: 22px; }
.cifras dt { font-size: clamp(2.2rem, 4.2vw, 4rem); font-weight: 800; line-height: 1; letter-spacing: -.04em; }
.cifras dd { margin-top: 12px; font-size: 15.5px; color: var(--gris); }
.bloque--cifras { padding-top: 0; }
.bloque--cifras::before { display: none; }
.filas__fila { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hueco); padding: clamp(36px, 5vw, 64px) 0; border-top: 1px solid var(--filete); }
.filas__fila:first-child { border-top: 0; padding-top: 0; }
.filas__fila h2 { grid-column: 1 / span 5; font-size: clamp(1.45rem, 2.3vw, 2.1rem); font-weight: 700; line-height: 1.1; letter-spacing: -.03em; }
.filas__fila > div { grid-column: 7 / -1; }
.filas__fila p { max-width: 58ch; color: var(--tinta-2); }
.filas__fila p + p { margin-top: 16px; }
.filas > .filas__fila:nth-of-type(even) h2 { grid-column: 8 / -1; grid-row: 1; }
.filas > .filas__fila:nth-of-type(even) > div { grid-column: 1 / span 6; grid-row: 1; }
.cita { padding: clamp(48px, 7vw, 96px) 0; border-top: 1px solid var(--filete); }
.cita p { max-width: 20ch; font-size: clamp(1.9rem, 3.6vw, 3.2rem); font-weight: 800; line-height: 1.04; letter-spacing: -.04em; text-wrap: balance; }

/* ---------- Preguntas ---------- */
.preguntas { border-top: 1px solid var(--filete); }
.pregunta { border-bottom: 1px solid var(--filete); }
.pregunta summary {
  position: relative; list-style: none; cursor: pointer; padding: 22px 56px 22px 0;
  font-size: clamp(1.08rem, 1.45vw, 1.25rem); font-weight: 600; line-height: 1.3; letter-spacing: -.02em;
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::before, .pregunta summary::after {
  content: ""; position: absolute; right: 12px; top: 50%; width: 14px; height: 1.5px; background: var(--tinta);
  transition: transform .4s var(--sale);
}
.pregunta summary::after { transform: rotate(90deg); }
.pregunta[open] summary::after { transform: rotate(0); }
.pregunta__r { padding: 0 56px 26px 0; }
.pregunta__r p { max-width: 62ch; color: var(--gris); }
.pregunta[open] .pregunta__r { animation: entra-doc .45s var(--sale); }

/* ---------- Webs: qué incluye ---------- */
.incluye { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--hueco); }
.incluye li::before { content: "✓"; margin-right: 12px; font-weight: 700; }
.bloque--abierto .incluye { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.incluye li { padding: 18px 0; border-top: 1px solid var(--filete); font-size: clamp(1.05rem, 1.4vw, 1.2rem); font-weight: 600; line-height: 1.3; letter-spacing: -.015em; }

/* ---------- Ejemplos ---------- */
.bloque--grupo { padding-block: clamp(56px, 7vw, 96px); }
.bloque--grupo .bloque__cab h2 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); }
.ejemplos { border-top: 1px solid var(--filete); }
.ejemplos li { border-bottom: 1px solid var(--filete); }
.ejemplo { position: relative; display: block; padding: 20px 56px 20px 0; text-decoration: none; font-size: 17px; color: var(--tinta-2); }
.ejemplo b { font-weight: 700; letter-spacing: -.015em; color: var(--tinta); }
.ejemplo::after {
  content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; margin-top: -4px;
  border: solid var(--tinta); border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); transition: transform .4s var(--sale);
}
.ejemplo:hover::after { transform: translateX(6px) rotate(45deg); }
.ejemplo:hover b { text-decoration: underline; text-underline-offset: 3px; }

/* Ejemplos agrupados: dos columnas de tarjetas, cada una con su lista */
.bloque--grupos { padding-top: 0; }
.bloque--grupos::before { display: none; }
.grupos { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hueco); align-items: start; }
.grupo { padding: clamp(24px, 3vw, 40px); border-radius: 26px; }
.grupo h2 { font-size: clamp(1.5rem, 2.3vw, 2.1rem); line-height: 1.05; }
.grupo > p { margin-top: 10px; color: var(--gris); }
.grupo:nth-child(even) { margin-top: clamp(40px, 7vw, 120px); }
.grupo .ejemplos { margin-top: 18px; padding: 0; background: none; border: 0; border-top: 1px solid var(--filete); border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ---------- Textos legales ---------- */
.bloque > .prosa:only-child { grid-column: 1 / span 8; }
.prosa { max-width: 70ch; }
.prosa h2 { font-size: clamp(1.35rem, 2vw, 1.7rem); font-weight: 700; letter-spacing: -.025em; line-height: 1.15; margin: 44px 0 14px; }
.prosa h2:first-child { margin-top: 0; }
.prosa p { color: var(--tinta-2); }
.prosa p + p { margin-top: 14px; }
.prosa__fecha { margin-top: 44px !important; font-size: 14px; color: var(--gris) !important; }

/* ---------- Contacto y formulario ---------- */
/* El formulario a la derecha, en la columna del texto; a la izquierda, qué
   pasa después de enviarlo y el correo. En el móvil, el formulario primero. */
.bloque--contacto { padding-top: 0; }
.bloque--contacto::before { display: none; }
.bloque--contacto > .formulario { grid-column: 6 / -1; grid-row: 1; }
.bloque--contacto > .contacto__lado { grid-column: 1 / span 4; grid-row: 1; position: sticky; top: 112px; }
.contacto__t { font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.05; }
.contacto__pasos { margin-top: 22px; counter-reset: c; border-top: 1px solid var(--filete); }
.contacto__pasos li { counter-increment: c; display: grid; grid-template-columns: 44px minmax(0, 1fr); padding: 18px 0; border-bottom: 1px solid var(--filete); }
.contacto__pasos li::before { content: counter(c, decimal-leading-zero); grid-row: span 2; padding-top: .2em; font-size: 13px; color: var(--gris); font-variant-numeric: tabular-nums; }
.contacto__pasos b { font-size: 17px; font-weight: 700; letter-spacing: -.015em; }
.contacto__pasos span { grid-column: 2; margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--gris); }
.contacto__correo { display: grid; gap: 4px; margin-top: 26px; font-size: 15px; color: var(--gris); }
.contacto__correo a { font-size: 17px; color: var(--tinta); overflow-wrap: anywhere; }

.formulario { max-width: 860px; padding: clamp(26px, 3.4vw, 48px); border-radius: 28px; }
.formulario__parte { min-width: 0; margin: 0; padding: 0; border: 0; }
.formulario__parte + .formulario__parte { margin-top: 30px; padding-top: 30px; border-top: 1px solid var(--filete); }
.formulario__parte legend { display: flex; align-items: center; gap: 10px; padding: 0; margin-bottom: 22px; font-size: 14px; font-weight: 600; color: var(--tinta-2); }
.formulario__parte legend span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; background: var(--tinta); color: var(--papel); font-size: 12px; font-variant-numeric: tabular-nums; }
.formulario__dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.f { margin-bottom: 22px; }
.f--medio { max-width: calc(50% - 9px); }
.f label { display: block; margin-bottom: 8px; font-size: 15px; font-weight: 600; }
.f label i { margin-left: 6px; font-style: normal; font-weight: 400; font-size: 13.5px; color: var(--gris); }
.f small { display: block; margin: -2px 0 10px; font-size: 14px; color: var(--gris); }
.formulario .campo { background: var(--app); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .04); }
.formulario .campo:hover { border-color: color-mix(in srgb, var(--tinta) 45%, transparent); }
.formulario .campo:focus { border-color: var(--tinta); box-shadow: 0 0 0 4px var(--filete); }
.formulario .campo--area { min-height: 200px; padding: 16px 18px; font-size: 17px; line-height: 1.55; }
.ideas { margin-top: -6px; }
.ideas__t { font-size: 14px; color: var(--gris); }
.ideas .fichas { margin-top: 10px; }
.casilla { display: flex !important; align-items: flex-start; gap: 12px; font-weight: 400 !important; cursor: pointer; }
.casilla input {
  appearance: none; -webkit-appearance: none; flex: none; width: 22px; height: 22px; margin: 1px 0 0; border-radius: 7px;
  border: 1.5px solid var(--filete-fuerte); background: var(--campo); cursor: pointer; display: grid; place-items: center;
  transition: background-color .2s, border-color .2s;
}
.casilla input::after { content: ""; width: 5px; height: 10px; margin-top: -3px; border: solid var(--papel); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .3s var(--sale); }
.casilla input:checked { background: var(--tinta); border-color: var(--tinta); }
.casilla input:checked::after { transform: rotate(45deg) scale(1); }
.f .casilla { margin: 0; }
.formulario__fin { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; margin-top: 8px; padding-top: 26px; border-top: 1px solid var(--filete); }
.formulario__enviar { flex: none; }
.formulario__priv { flex: 1 1 260px; max-width: 70ch; font-size: 13.5px; color: var(--gris); }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Test de 10 segundos ---------- */
/* La lista del creativo de redes, para marcar: lleva al formulario con lo marcado ya escrito */
.test { padding: clamp(22px, 3vw, 40px); }
.test__grupo { min-width: 0; margin: 0; padding: 0; border: 0; }
.test__grupo legend { padding: 0; margin-bottom: 12px; font-size: 14px; font-weight: 600; color: var(--tinta-2); }
.test__op { display: flex; align-items: center; gap: 18px; padding: 18px 2px; border-top: 1px solid var(--filete); cursor: pointer; font-size: clamp(1.15rem, 1.7vw, 1.4rem); font-weight: 600; line-height: 1.2; letter-spacing: -.02em; }
.test__op input {
  appearance: none; -webkit-appearance: none; flex: none; display: grid; place-items: center; width: 30px; height: 30px; margin: 0;
  border: 2px solid var(--tinta); border-radius: 9px; background: var(--campo); cursor: pointer; transition: background-color .2s;
}
.test__op input::after { content: ""; width: 7px; height: 14px; margin-top: -4px; border: solid var(--papel); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(0); transition: transform .3s var(--sale); }
.test__op input:checked { background: var(--tinta); }
.test__op input:checked::after { transform: rotate(45deg) scale(1); }
.test__op input:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }
.test__fin { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; padding-top: 24px; border-top: 1px solid var(--filete); }
.test__cuenta { flex: 1 1 260px; font-size: 17px; line-height: 1.45; color: var(--tinta-2); }
.test__cuenta b { color: var(--tinta); }
.test__nota { flex-basis: 100%; font-size: 14px; color: var(--gris); }

/* ---------- Cierre ---------- */
.cierre {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hueco);
  padding: clamp(120px, 16vw, 232px) var(--lado) clamp(96px, 12vw, 176px);
  background: var(--papel); color: var(--tinta);
  position: relative; box-shadow: 0 1px 0 var(--papel);
}
.cierre h2 { grid-column: 1 / span 9; font-size: clamp(2.6rem, 6vw, 5.4rem); line-height: .95; letter-spacing: -.045em; max-width: 14ch; }
.cierre__lado { grid-column: 7 / -1; margin-top: clamp(40px, 5vw, 72px); }
.cierre__lado p { max-width: 42ch; font-size: clamp(18px, 1.45vw, 21px); line-height: 1.5; color: var(--gris); }
.cierre__lado .acciones { margin-top: 28px; }
/* Un campo para empezar a contar el caso aquí mismo: lleva al formulario con el texto ya puesto */
.cierre__form { margin-top: 34px; }
.cierre__etiqueta { display: block; margin-bottom: 12px; font-size: 14px; color: var(--gris); }
.cierre__campo {
  display: flex; align-items: center; gap: 10px; padding: 7px 7px 7px 24px; border-radius: 999px;
  background: color-mix(in srgb, var(--tinta) 6%, transparent); border: 1px solid var(--filete-fuerte);
  transition: border-color .25s, background-color .25s;
}
.cierre__campo:focus-within { border-color: var(--tinta); background: color-mix(in srgb, var(--tinta) 10%, transparent); }
.cierre__campo input { flex: 1; min-width: 0; height: 50px; padding: 0; border: 0; background: none; outline: none; font-size: 17px; color: var(--tinta); }
.cierre__campo input::placeholder { color: var(--gris); opacity: 1; }
.cierre__enviar {
  flex: none; display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 22px 0 24px; border-radius: 999px;
  border: 0; background: var(--tinta); color: var(--papel); font: 600 15.5px/1 var(--letra); cursor: pointer;
  transition: background-color .25s, transform .3s var(--sale);
}
.cierre__enviar:hover { background: color-mix(in srgb, var(--tinta) 86%, var(--papel)); }
.cierre__enviar:active { transform: scale(.97); }
.cierre__correo { margin-top: 18px; font-size: 15px; color: var(--gris); }
.cierre__correo a { color: var(--tinta); }
.cierre__correo + .acciones { margin-top: 22px; }

/* ---------- Pie ---------- */
.pie { padding: 64px var(--lado) 28px; background: var(--papel); color: var(--tinta); }
.pie__rejilla { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hueco); row-gap: 40px; padding-top: 48px; border-top: 1px solid var(--filete); }
.pie__marca { grid-column: 1 / span 4; }
.pie__rejilla > div:not(.pie__marca) { grid-column: span 2; }
.pie__firma { height: 28px; width: auto; color: var(--tinta); }
.pie__marca p { margin-top: 18px; max-width: 34ch; font-size: 15px; color: var(--gris); }
.pie__marca .pie__lema { font-size: clamp(26px, 2.4vw, 34px); font-weight: 800; line-height: 1; letter-spacing: -.035em; color: var(--tinta); }
.pie__titulo { font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--gris); margin-bottom: 16px; }
.pie li + li { margin-top: 10px; }
.pie li a { font-size: 15px; text-decoration: none; overflow-wrap: anywhere; }
.pie li a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pie__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 64px; padding-top: 22px; border-top: 1px solid var(--filete); font-size: 13px; color: var(--gris); }
.pie__sello { font-variant-numeric: tabular-nums; }
/* El tema, abajo del todo: por defecto claro; la elección se guarda en el navegador */
.pie__tema { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--filete-fuerte); }
.pie__tema button {
  height: 30px; padding: 0 14px; border: 0; border-radius: 999px; background: none; cursor: pointer;
  font: 500 13px/1 var(--letra); color: var(--gris); transition: background-color .25s, color .25s;
}
.pie__tema button:hover { color: var(--tinta); }
.pie__tema button[aria-pressed="true"] { background: var(--tinta); color: var(--papel); }

/* Botón fijo de contacto en el móvil */
.dock { display: none; }

/* ---------- Fondo: luz de ventana ---------- */
/* Una capa fija detrás de todo: la luz de una ventana que entra en diagonal.
   Sube y baja como cuando pasa una nube (nube), se desplaza despacio como el
   sol (sol) y, al bajar, se mueve un poco con la página (deriva). Solo
   transform y opacity, en la GPU. */
.fondo { position: fixed; inset: -30vh -12vw; z-index: -1; pointer-events: none; background: var(--sombra-fondo); }
.sol { position: absolute; inset: 0; }
.fondo i {
  position: absolute; top: 4vh; left: 34vw; width: 31vw; height: 60vh; background: var(--luz);
  filter: blur(12px); transform: skewX(-30deg) rotate(-5deg);
}
.fondo i:nth-child(2) { left: 67vw; }
.fondo i:nth-child(3) { top: 68vh; left: 18vw; }
.fondo i:nth-child(4) { top: 68vh; left: 51vw; }

.js .sol { animation: sol 22s ease-in-out infinite alternate; }
.js .fondo i { animation: nube 9s ease-in-out infinite alternate; }
.js .fondo i:nth-child(2) { animation-delay: -.5s; }
.js .fondo i:nth-child(3) { animation-delay: -1s; }
.js .fondo i:nth-child(4) { animation-delay: -1.5s; }
@keyframes nube { from { opacity: .5; } to { opacity: 1; } }
@keyframes sol { from { transform: translate3d(-4.5vw, -3vh, 0); } to { transform: translate3d(4.5vw, 3vh, 0); } }
@supports (animation-timeline: scroll()) {
  .js .fondo { animation: deriva linear both; animation-timeline: scroll(root); }
}
@keyframes deriva { to { transform: translate3d(-4vw, -24vh, 0); } }

/* ---------- Cristal de las secciones ---------- */
/* El contenido de cada sección va en cristal sobre el fondo, como en la web anterior */
.pieza, .lista-grande, .indice__grupo ul, .frases, .pasos, .preguntas, .antes-despues,
.selector, .ejemplos, .incluye, .cifras > div, .formulario, .grupo, .test {
  background: var(--vidrio); border: 1px solid var(--vidrio-borde); border-radius: 22px;
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  box-shadow: inset 0 1px 0 var(--vidrio-borde), 0 24px 60px -36px var(--sombra), 0 2px 10px -6px var(--sombra);
}
.piezas { gap: 12px; }
.pieza { padding: 26px 26px 28px; }
.lista-grande { padding: 4px 28px; }
.lista-grande li:last-child, .frases li:last-child, .indice__grupo li:last-child, .pregunta:last-child, .ejemplos li:last-child { border-bottom: 0; }
.indice__grupo ul { padding: 0 24px; }
.frases { padding: 4px 26px; }
.pasos { padding: 4px 28px; }
.pasos li:first-child, .antes-despues > div:first-child { border-top: 0; }
.preguntas { padding: 0 26px; }
.antes-despues { padding: 4px 28px; }
.selector { padding: clamp(24px, 3vw, 36px); }
.ejemplos { padding: 0 24px; }
.incluye { padding: 6px 26px; }
.incluye li { border-top: 0; border-bottom: 1px solid var(--filete); }
.cifras > div { padding: 26px; }
.formulario { padding: clamp(26px, 3.4vw, 48px); border-radius: 28px; }
.grupo { border-radius: 26px; }

/* ---------- Maquetas: móvil, portátil y papel ---------- */
/* Objetos reales con datos de ejemplo (maquetas.py). Cada uno se mide contra
   su propio ancho (cqi) y escala entero. El marco es negro en los dos temas;
   la pantalla sigue el tema y el papel siempre es papel. */

/* Dónde van, siempre en el primer scroll: en la cabecera, a la izquierda del
   texto (figura) o a todo el ancho debajo (escena); en la portada, bajo el
   titular de la primera sección */
.bloque--figura > .bloque__cab { position: static; }
.figura { margin-top: clamp(40px, 5vw, 64px); }
.figura--movil .movil { width: min(250px, 70%); }
.cabecera > .escena { margin-top: clamp(56px, 7vw, 104px); }
/* Lo que asoma de una maqueta nunca da scroll lateral */
.cabecera { overflow-x: clip; }
.cabecera > .figura { grid-column: 1 / span 5; grid-row: 3; align-self: start; margin-top: clamp(40px, 6vw, 80px); }
.escena { position: relative; container-type: inline-size; aspect-ratio: 100 / 57; }
.escena__pieza { position: absolute; }
.escena__pieza--portatil { top: 0; width: 80%; }
.escena__pieza--movil { bottom: 0; width: 20%; z-index: 1; }
.escena--taller .escena__pieza--portatil { left: 0; }
.escena--taller .escena__pieza--movil { right: 2%; }
.escena--web .escena__pieza--portatil { right: 0; }
.escena--web .escena__pieza--movil { left: 2%; }

/* Móvil */
.movil {
  position: relative; container-type: inline-size; aspect-ratio: 1 / 2.06;
  border-radius: 15% / 7.3%; background: #070708;
  box-shadow: inset 0 0 0 1.5px #44444a, inset 0 0 0 3px #111113, 0 0 0 1px rgba(255, 255, 255, .07),
    0 60px 100px -50px var(--sombra), 0 18px 40px -24px var(--sombra);
}
.movil::before, .movil::after { content: ""; position: absolute; width: 1.1%; background: #2c2c30; }
.movil::before { right: -1%; top: 26%; height: 11%; border-radius: 0 3px 3px 0; }
.movil::after { left: -1%; top: 19%; height: 14%; border-radius: 3px 0 0 3px; background: linear-gradient(#2c2c30 0 42%, transparent 42% 58%, #2c2c30 58%); }
.movil__pantalla {
  position: absolute; inset: 1.65% 3.4%; overflow: hidden; border-radius: 12.4% / 5.8%;
  background: var(--app); color: var(--tinta); font-size: 4.3cqi; line-height: 1.35; text-align: left;
}
.movil__isla { position: absolute; z-index: 3; top: 2.6cqi; left: 50%; width: 29cqi; height: 8.4cqi; border-radius: 99px; background: #000; transform: translateX(-50%); }
.movil__inicio { position: absolute; z-index: 3; bottom: 2cqi; left: 50%; width: 34cqi; height: 1.2cqi; border-radius: 99px; background: var(--tinta); opacity: .8; transform: translateX(-50%); }
.mq-estado { display: flex; align-items: center; justify-content: space-between; height: 13.5cqi; padding: 1cqi 7.5cqi 0 9.5cqi; font-size: 3.7cqi; }
.mq-estado b { font-weight: 600; }
.mq-estado svg { width: 16.5cqi; height: auto; }
.mq-app { padding: 0 6cqi; }
.mq-nav { display: flex; align-items: baseline; justify-content: space-between; padding: 1.1em 0 1.3em; font-size: .9em; color: var(--gris); }
.mq-nav b { font-weight: 600; color: var(--tinta); }
.mq-t { font-size: 1.85em; font-weight: 800; line-height: 1.05; letter-spacing: -.035em; color: var(--tinta); }
.mq-sub { margin-top: .35em; font-size: .9em; color: var(--gris); }
.mq-rot { margin-top: 1.3em; font-size: .78em; color: var(--gris); }
.mq-horas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 1.3em; border-block: 1px solid var(--filete); }
.mq-horas div { padding: .75em 0; }
.mq-horas div + div { padding-left: .9em; border-left: 1px solid var(--filete); }
.mq-horas dt { font-size: .78em; color: var(--gris); }
.mq-horas dd { font-size: 1.15em; font-weight: 700; font-variant-numeric: tabular-nums; }
.mq-lista { margin-top: .3em; }
.mq-lista li { display: flex; justify-content: space-between; gap: 1em; padding: .6em 0; border-bottom: 1px solid var(--filete); }
.mq-lista b { font-weight: 600; font-variant-numeric: tabular-nums; }
.mq-firma { display: grid; place-items: center; height: 22cqi; margin-top: .5em; border-radius: .9em; background: var(--app-mesa); border: 1px dashed var(--filete-fuerte); }
.mq-firma svg { width: 82%; fill: none; stroke: var(--tinta); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.mq-boton { display: grid; place-items: center; height: 3.1em; margin-top: 1.1em; border-radius: 99px; background: var(--tinta); color: var(--app); font-weight: 600; }
.mq-boton span { grid-area: 1 / 1; }
.mq-boton span:first-child { opacity: 0; }
.mq-aviso {
  position: absolute; z-index: 2; left: 3.5cqi; right: 3.5cqi; top: 13cqi;
  display: flex; align-items: center; gap: .8em; padding: .85em 1em .85em .85em; border-radius: 1.5em; font-size: 3.6cqi; line-height: 1.3;
}
.mq-aviso b { display: block; font-weight: 700; letter-spacing: -.01em; }
.mq-aviso span { display: block; margin-top: .1em; font-size: .9em; color: var(--tinta-2); }
.mq-barra-app {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 2.6cqi 3cqi 8.5cqi; border-top: 1px solid var(--filete); background: var(--app-barra);
  font-size: 2.6cqi; text-align: center; color: var(--gris);
}
.mq-barra-app span { display: flex; flex-direction: column; align-items: center; gap: .45em; }
.mq-barra-app svg { width: 6.6cqi; height: 6.6cqi; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mq-barra-app [data-on] { color: var(--tinta); font-weight: 600; }
.mq-segm { display: grid; grid-template-columns: 1fr 1fr; margin-top: 1.1em; padding: .25em; border-radius: .8em; background: var(--app-sel); font-size: .85em; text-align: center; }
.mq-segm span { padding: .45em 0; border-radius: .6em; color: var(--gris); }
.mq-segm [data-on] { background: var(--app); color: var(--tinta); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.mq-stock { margin-top: .5em; }
.mq-stock li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: .8em; padding: .7em 0 .75em; border-bottom: 1px solid var(--filete); }
.mq-stock span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mq-stock b { font-weight: 700; font-variant-numeric: tabular-nums; }
.mq-stock em { grid-column: 1 / -1; margin-top: .35em; font-style: normal; font-size: .78em; color: var(--gris); }
.mq-stock i, .mq-progreso { position: relative; display: block; height: .32em; margin-top: .6em; border-radius: 9px; background: var(--app-sel); overflow: hidden; }
.mq-stock i { grid-column: 1 / -1; }
.mq-stock i::after, .mq-progreso::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--p) * 100%); border-radius: inherit; background: color-mix(in srgb, var(--tinta) 32%, transparent); }
.mq-stock [data-bajo] i::after, .mq-progreso::after { background: var(--tinta); }

/* Grabación de una reunión */
.mq-graba { display: flex; flex-direction: column; align-items: center; height: calc(100% - 13.5cqi); padding-top: 7cqi; padding-bottom: 15cqi; text-align: center; }
.mq-graba .mq-t { order: -1; }
.mq-reloj { margin-top: 10cqi; font-size: 3.3em; font-weight: 500; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.mq-onda { display: flex; align-items: center; justify-content: center; gap: 1.5cqi; width: 100%; height: 24cqi; margin-top: 8cqi; }
.mq-onda i { width: 1.9cqi; height: calc(var(--a) * 100%); border-radius: 9px; background: var(--tinta); }
.mq-grabando { display: flex; align-items: center; gap: .5em; margin-top: 7cqi; font-size: .9em; color: var(--gris); }
.mq-grabando i { width: .6em; height: .6em; border-radius: 50%; background: var(--tinta); }
.mq-controles { display: flex; align-items: center; justify-content: center; gap: 9cqi; margin-top: auto; }
.mq-pausa, .mq-parar { position: relative; border-radius: 50%; }
.mq-pausa { width: 13cqi; height: 13cqi; border: 1px solid var(--filete-fuerte); }
.mq-parar { width: 19cqi; height: 19cqi; border: .7cqi solid var(--tinta); }
.mq-pausa::before, .mq-parar::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.mq-pausa::before { width: 30%; height: 36%; background: linear-gradient(90deg, var(--tinta) 0 35%, transparent 35% 65%, var(--tinta) 65%); }
.mq-parar::before { width: 38%; height: 38%; border-radius: 18%; background: var(--tinta); }

/* Verificación en dos pasos */
.mq-2fa { display: flex; flex-direction: column; height: calc(100% - 13.5cqi); padding-top: 4cqi; padding-bottom: 14cqi; }
.mq-marca { font-weight: 800; letter-spacing: -.02em; }
.mq-candado { position: relative; flex: none; width: 13cqi; height: 13cqi; margin: auto 0 5cqi; border-radius: 30%; background: var(--app-sel); }
.mq-candado::before, .mq-candado::after { content: ""; position: absolute; }
.mq-candado::before { left: 30%; top: 47%; width: 40%; height: 30%; border-radius: 15%; background: var(--tinta); }
.mq-candado::after { left: 37%; top: 22%; width: 26%; height: 30%; border: .6cqi solid var(--tinta); border-bottom: 0; border-radius: 99px 99px 0 0; }
.mq-2fa .mq-t { font-size: 1.55em; }
.mq-2fa .mq-sub { margin-top: .6em; }
.mq-codigo { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2cqi; margin-top: 8cqi; }
.mq-codigo span { display: grid; place-items: center; aspect-ratio: .8; border-radius: .6em; border: 1px solid var(--filete-fuerte); background: var(--app-mesa); font-size: 1.4em; font-weight: 700; font-variant-numeric: tabular-nums; }
.mq-2fa .mq-boton { margin-top: 8cqi; margin-bottom: auto; }

/* Portátil */
.portatil { position: relative; container-type: inline-size; }
.portatil__tapa {
  position: relative; margin: 0 6.5%; aspect-ratio: 1 / .655; border-radius: 2.6% 2.6% .8% .8% / 3.9% 3.9% 1.2% 1.2%; background: #0a0a0b;
  box-shadow: inset 0 0 0 1px #3c3c41, inset 0 0 0 2.5px #141416, 0 0 0 1px rgba(255, 255, 255, .06);
}
.portatil__tapa::before { content: ""; position: absolute; top: 1.3%; left: 50%; width: .7%; aspect-ratio: 1; border-radius: 50%; background: #2a2a2e; transform: translateX(-50%); }
.portatil__pantalla { position: absolute; inset: 3.6% 2.4% 5.6%; overflow: hidden; border-radius: 3px; background: var(--app); color: var(--tinta); font-size: 1.3cqi; line-height: 1.35; text-align: left; }
.portatil__base {
  position: relative; aspect-ratio: 100 / 2.7; border-radius: 0 0 2.2% 2.2% / 0 0 100% 100%;
  background: linear-gradient(var(--metal-a), var(--metal-b) 45%, var(--metal-c));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 34px 50px -30px var(--sombra), 0 2px 3px -1px rgba(0, 0, 0, .25);
}
.portatil__base::before { content: ""; position: absolute; top: 0; left: 50%; width: 15%; height: 42%; border-radius: 0 0 30% 30% / 0 0 100% 100%; background: linear-gradient(var(--metal-c), var(--metal-b)); opacity: .55; transform: translateX(-50%); }

/* Control de taller */
.mq-escritorio { display: grid; grid-template-columns: 15% minmax(0, 1fr); height: 100%; background: var(--app-mesa); font-size: 1.06em; }
.mq-resumen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8em; margin-bottom: 1.3em; }
.mq-resumen div { padding: .75em 1em .8em; border-radius: .75em; background: var(--app); border: 1px solid var(--filete); }
.mq-resumen span { display: block; font-size: .8em; color: var(--gris); }
.mq-resumen b { display: block; margin-top: .1em; font-size: 1.75em; font-weight: 800; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.mq-menu { display: flex; flex-direction: column; gap: .15em; padding: 1.3em .8em; background: var(--app-barra); border-right: 1px solid var(--filete); font-size: .92em; color: var(--gris); }
.mq-menu b { padding: 0 .6em 1em; font-size: 1.2em; font-weight: 800; letter-spacing: -.03em; color: var(--tinta); }
.mq-menu span { padding: .5em .6em; border-radius: .55em; }
.mq-menu [data-on] { background: var(--app-sel); color: var(--tinta); font-weight: 600; }
.mq-tablero { min-width: 0; padding: 1.3em 1.5em; }
.mq-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.2em; }
.mq-cab b { font-size: 1.55em; font-weight: 800; letter-spacing: -.035em; }
.mq-pill { padding: .3em .85em; border-radius: 99px; border: 1px solid var(--filete-fuerte); font-size: .85em; color: var(--gris); }
.mq-columnas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8em; align-items: start; }
.mq-columnas > div > p { display: flex; justify-content: space-between; padding: 0 .3em .65em; font-size: .85em; font-weight: 600; color: var(--tinta-2); }
.mq-columnas > div > p i { font-style: normal; font-weight: 400; color: var(--gris); }
.mq-tarjeta { margin-bottom: .55em; padding: .8em .9em .85em; border-radius: .75em; background: var(--app); border: 1px solid var(--filete); box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.mq-tarjeta b { display: block; font-size: .95em; font-weight: 650; letter-spacing: -.01em; }
.mq-tarjeta span { display: block; margin-top: .2em; font-size: .82em; color: var(--gris); }
.mq-etiqueta { display: inline-block; margin-top: .55em; padding: .15em .65em; border-radius: 99px; background: var(--tinta); color: var(--app); font-size: .78em; font-style: normal; }

/* Una web en el navegador */
.mq-navegador { display: flex; flex-direction: column; height: 100%; background: var(--app); }
.mq-pestanas { display: flex; align-items: center; gap: .45em; padding: .65em .9em; background: var(--app-barra); border-bottom: 1px solid var(--filete); }
.mq-pestanas > i { width: .72em; height: .72em; border-radius: 50%; background: var(--filete-fuerte); }
.mq-url { display: flex; align-items: center; justify-content: center; gap: .45em; width: 34%; height: 1.9em; margin: 0 auto; border-radius: .6em; background: var(--app-sel); font-size: .85em; color: var(--tinta-2); }
.mq-url svg { width: .7em; }
.mq-web { flex: 1; padding: 0 5%; background: var(--app); }
.mq-web__nav { display: flex; align-items: center; gap: 2em; padding: 1.2em 0; font-size: .9em; color: var(--tinta-2); }
.mq-web__nav b { margin-right: auto; font-size: 1.2em; font-weight: 800; letter-spacing: -.035em; color: var(--tinta); }
.mq-web__nav em { padding: .5em 1.1em; border-radius: 99px; background: var(--tinta); color: var(--app); font-style: normal; font-weight: 600; }
.mq-web__hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 7%; align-items: center; padding: 1.6em 0 2em; border-bottom: 1px solid var(--filete); }
.mq-web__h { font-size: 3.2em; font-weight: 800; line-height: .98; letter-spacing: -.045em; color: var(--tinta); }
.mq-web__p { margin-top: 1em; max-width: 30ch; color: var(--gris); }
.mq-web__btn { display: inline-block; margin-top: 1.3em; padding: .7em 1.3em; border-radius: 99px; background: var(--tinta); color: var(--app); font-size: .92em; font-weight: 600; }
.mq-cita { padding: 1.1em 1.2em 1.2em; border-radius: 1em; background: var(--app-barra); border: 1px solid var(--filete); }
.mq-cita__t { font-weight: 700; letter-spacing: -.01em; }
.mq-cita__mes { display: flex; justify-content: space-between; margin: .5em 0 .4em; font-size: .85em; color: var(--tinta-2); }
.mq-cita__mes span { color: var(--gris); }
.mq-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .15em; font-size: .78em; text-align: center; font-variant-numeric: tabular-nums; }
.mq-cal b { padding-bottom: .15em; font-weight: 500; color: var(--gris); }
.mq-cal span { padding: .25em 0; border-radius: .45em; }
.mq-cal [data-no] { color: var(--gris); opacity: .45; }
.mq-horas-cita { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4em; margin-top: .8em; font-size: .8em; text-align: center; font-variant-numeric: tabular-nums; }
.mq-horas-cita span { padding: .45em 0; border-radius: .5em; border: 1px solid var(--filete-fuerte); }
:is(.mq-cal, .mq-horas-cita, .mq-dias) [data-sel] { background: var(--tinta); border-color: var(--tinta); color: var(--app); opacity: 1; }
.mq-web__tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5%; padding-top: 1.3em; font-size: .92em; }
.mq-web__tres b { font-weight: 700; }
.mq-web__tres span { display: block; margin-top: .25em; color: var(--gris); }
.mq-web--movil { padding: 0 6cqi; }
.mq-web--movil .mq-web__nav { padding: .9em 0 1.4em; }
.mq-hamburguesa { width: 1.3em; height: .75em; border-block: 1.5px solid var(--tinta); }
.mq-web--movil .mq-web__h { font-size: 2.1em; }
.mq-web--movil .mq-cita { margin-top: 1.4em; padding: 1em; }
.mq-dias { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4em; margin-top: .8em; text-align: center; }
.mq-dias span { padding: .45em 0 .5em; border-radius: .7em; border: 1px solid var(--filete-fuerte); font-weight: 700; font-variant-numeric: tabular-nums; }
.mq-dias b { display: block; font-size: .75em; font-weight: 500; opacity: .7; }
.mq-web--movil .mq-horas-cita { grid-template-columns: 1fr 1fr; }
.mq-web--movil .mq-web__btn { display: block; margin-top: 1em; text-align: center; }
.mq-web__lista { margin-top: 1.4em; border-top: 1px solid var(--filete); }
.mq-web__lista li { display: flex; justify-content: space-between; padding: .8em 0; border-bottom: 1px solid var(--filete); font-weight: 600; }
.mq-web__lista li::after { content: "›"; color: var(--gris); }

/* Papel */
.papel {
  --tinta: #0c0c0d; --tinta-2: #2b2b2f; --gris: #66666b; --filete: rgba(12, 12, 13, .14);
  position: relative; container-type: inline-size; aspect-ratio: 1 / 1.414; border-radius: 2px;
  background: var(--hoja-papel); color: var(--tinta-2);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .06), 0 2px 6px -2px rgba(0, 0, 0, .1), 0 34px 60px -34px var(--sombra);
}
.papel__txt { position: absolute; inset: 9% 10%; font-size: 3.1cqi; line-height: 1.42; text-align: left; }
.mq-p-tipo, .mq-p-meta { font-size: .85em; color: var(--gris); }
.mq-p-meta { margin-top: .4em; }
.mq-p-t { margin-top: .3em; font-size: 1.55em; font-weight: 800; line-height: 1.1; letter-spacing: -.03em; color: var(--tinta); }
.mq-p-rot { margin-top: 1.25em; padding-bottom: .35em; border-bottom: 1px solid var(--tinta); font-size: .85em; font-weight: 700; color: var(--tinta); }
.mq-p-lista { counter-reset: p; }
.mq-p-lista li, .mq-p-marcas li { display: grid; grid-template-columns: 1.5em minmax(0, 1fr); padding: .4em 0; border-bottom: 1px solid var(--filete); }
.mq-p-lista li { counter-increment: p; }
.mq-p-lista li::before { content: counter(p); color: var(--gris); font-variant-numeric: tabular-nums; }
.mq-p-marcas li::before { content: "✓"; font-weight: 700; color: var(--tinta); }
.mq-p-marcas--no li::before { content: "–"; color: var(--gris); }
.mq-p-tabla { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.mq-p-tabla span { padding: .4em 0; border-bottom: 1px solid var(--filete); }
.mq-p-tabla span:nth-child(even) { color: var(--gris); }
.mq-p-firmas { display: grid; grid-template-columns: 1fr 1fr; gap: 12%; margin-top: 2.4em; }
.mq-p-firmas span { padding-top: .4em; border-top: 1px solid var(--tinta); font-size: .8em; color: var(--gris); }
.mq-p-logo { display: flex; align-items: center; gap: .5em; font-weight: 800; letter-spacing: -.02em; color: var(--tinta); }
.mq-p-logo i { width: 1.3em; height: 1.3em; border-radius: .3em; background: var(--tinta); }
.mq-p-logo + .mq-p-tipo { margin-top: 42%; }
.mq-p-portada { margin-top: .3em; font-size: 2.3em; font-weight: 800; line-height: 1.02; letter-spacing: -.04em; color: var(--tinta); }
.mq-p-pie { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; gap: 1em; padding-top: .6em; border-top: 1px solid var(--tinta); font-size: .8em; color: var(--gris); }
.mq-p-indice { margin-top: 1.2em; border-top: 1px solid var(--tinta); counter-reset: i; }
.mq-p-indice li { counter-increment: i; display: grid; grid-template-columns: 1.6em minmax(0, 1fr) auto; padding: .55em 0; border-bottom: 1px solid var(--filete); }
.mq-p-indice li::before { content: counter(i); color: var(--gris); }
.mq-p-indice b { font-weight: 500; color: var(--gris); font-variant-numeric: tabular-nums; }

/* Composiciones de papel y de papel con móvil */
.figura--papel { position: relative; width: min(370px, 84%); }
.figura--papel > .papel:last-child { transform: rotate(1.2deg); }
.figura--papel > .papel--detras { position: absolute; inset: 0; transform: rotate(-3.5deg) translate(-4%, 1.5%); }
.figura--memoria > .papel--detras { transform: rotate(6deg) translate(19%, -5%); }
.figura--acta { position: relative; width: min(460px, 100%); aspect-ratio: 1 / 1.1; }
.figura--acta > .papel { position: absolute; left: 0; top: 0; width: 70%; transform: rotate(-2.5deg); }
.figura--acta > .movil { position: absolute; right: 0; bottom: 0; width: 40%; }

/* ---------- Movimiento ---------- */
/* Todo depende de la clase js, que el arranque no pone si el sistema pide
   reducir el movimiento. Sin JS, todo está quieto y visible. */

/* Al cargar: el titular sube línea a línea y lo demás aparece detrás */
.js .linea > span { animation: sube 1.1s var(--sale) both; }
.js .linea + .linea > span { animation-delay: .07s; }
.js .cabecera .migas, .js .cabecera__pie, .js .portada__texto { animation: aparece .9s var(--sale) .28s both; }
/* La vitrina llega por piezas y el aviso entra el último, como una notificación */
.js .capa > .ui { animation: llega 1.1s var(--sale) both; }
.js .capa--panel > .ui { animation-delay: .3s; }
.js .capa--acta > .ui { animation-delay: .48s; }
.js .capa--aviso > .ui { animation: avisa .9s var(--sale) 1.2s both; }
.js .escena__pieza > *, .js .cabecera > .figura { animation: llega 1.2s var(--sale) both; }
.js .cabecera > .figura { animation-delay: .45s; }
.js .escena__pieza--portatil > * { animation-delay: .4s; }
.js .escena__pieza--movil > * { animation-delay: .62s; }
.js .escena .mq-aviso { animation: cae .8s var(--sale) 1.7s both; }
/* La grabación: la onda se mueve y el punto late */
.js .mq-onda i { animation: onda 1.1s ease-in-out var(--d) infinite alternate; }
.js .mq-grabando i { animation: late 1.6s ease-in-out infinite; }
@keyframes onda { from { transform: scaleY(.35); } }
@keyframes late { 50% { opacity: .25; } }
@keyframes llega { from { opacity: 0; transform: translateY(32px); } }
@keyframes avisa { from { opacity: 0; transform: translate(18px, 6px) scale(.96); } }
@keyframes sube { from { transform: translateY(104%); } }
@keyframes aparece { from { opacity: 0; transform: translateY(12px); } }

/* Al bajar: el titular de cada sección y luego su contenido, una sola vez */
.js .fuera { opacity: 0; transform: translateY(20px); }
.js .entra { transition: opacity .8s var(--sale), transform .9s var(--sale); }
.js .bloque__cuerpo.entra, .js .cierre__lado.entra { transition-delay: .08s; }

/* Ligado al scroll (solo donde el navegador lo hace fuera del hilo principal):
   la ventana de KERN se endereza al entrar y los pasos trazan su filete */
@supports (animation-timeline: view()) {
  .js .app { transform-origin: 50% 100%; }
  .js .pasos li::after { animation: traza linear both; animation-timeline: --paso; animation-range: entry 100% cover 55%; }
  .js .bloque--abierto .pasos li::after { animation-range: entry 80% cover 34%; }
  .js .bloque--abierto .pasos li:nth-child(2)::after { animation-range: entry 100% cover 41%; }
  .js .bloque--abierto .pasos li:nth-child(3)::after { animation-range: cover 8% cover 48%; }
  .js .bloque--abierto .pasos li:nth-child(4)::after { animation-range: cover 15% cover 55%; }
  .vitrina { view-timeline: --vitrina block; }
  .js .capa { animation: flota linear both; animation-timeline: --vitrina; animation-range: entry 100% exit 100%; }
  .capa--panel { --sube: -30px; }
  .capa--acta { --sube: -80px; }
  .capa--aviso { --sube: -140px; }
  .js .bloque__cab h2 { animation: entra-titular linear both, sale linear forwards; animation-timeline: view(), view(); animation-range: entry 0% cover 32%, exit 25% exit 100%; }
  .js :is(.bloque__cab > p, .bloque__texto, .bloque__nota, .bloque__cuerpo > .acciones, .pieza, .lista-grande, .indice__grupo,
          .frases, .pasos, .preguntas, .antes-despues, .selector, .grupo, .incluye, .cifras > div, .filas__fila, .cita,
          .cierre h2, .cierre__lado, .bloque__cab .figura) {
    animation: entra linear both, sale linear forwards; animation-timeline: view(), view();
    animation-range: entry 0% cover 30%, exit 25% exit 100%;
  }
  /* En una fila de piezas, la de la derecha llega un poco después */
  .js .pieza:nth-child(even) { animation-range: entry 8% cover 36%, exit 25% exit 100%; }
  .js .revista { animation: abre linear both, sale linear forwards; animation-timeline: view(), view(); animation-range: entry 0% cover 38%, exit 25% exit 100%; }
  .js .app { animation: endereza linear both, sale linear forwards; animation-timeline: view(), view(); animation-range: entry 0% cover 40%, exit 30% exit 100%; }
}
@supports (animation-timeline: view()) {
  .figura, .escena { view-timeline: --mq block; }
  /* El parte: se traza la firma, el botón pasa a «Firmado» y llega el aviso */
  .js .mq-firma path { animation: firma linear both; animation-timeline: --mq; animation-range: entry 80% cover 46%; }
  .js .figura .mq-boton span:first-child { animation: apaga linear both; animation-timeline: --mq; animation-range: cover 47% cover 50%; }
  .js .figura .mq-boton span:last-child { animation: se-ve linear both; animation-timeline: --mq; animation-range: cover 47% cover 50%; }
  .js .figura .mq-aviso { animation: cae linear both; animation-timeline: --mq; animation-range: cover 50% cover 57%; }
  /* La verificación: las cifras entran una a una */
  .js .mq-codigo span { animation: cifra linear both; animation-timeline: --mq; animation-range: entry 90% cover 28%; }
  .js .mq-codigo span:nth-child(2) { animation-range: entry 95% cover 31%; }
  .js .mq-codigo span:nth-child(3) { animation-range: entry 100% cover 34%; }
  .js .mq-codigo span:nth-child(4) { animation-range: cover 22% cover 37%; }
  .js .mq-codigo span:nth-child(5) { animation-range: cover 25% cover 40%; }
  .js .mq-codigo span:nth-child(6) { animation-range: cover 28% cover 43%; }
  /* El papel de debajo se abre al llegar */
  .js .figura--papel > .papel--detras { animation: abanico linear both; animation-timeline: --mq; animation-range: entry 40% cover 45%; }
  /* El acta: los acuerdos aparecen uno a uno */
  .js .figura--acta .mq-p-lista li { animation: se-ve linear both; animation-timeline: --mq; animation-range: cover 24% cover 32%; }
  .js .figura--acta .mq-p-lista li:nth-child(2) { animation-range: cover 30% cover 38%; }
  .js .figura--acta .mq-p-lista li:nth-child(3) { animation-range: cover 36% cover 44%; }
  /* Escenas: al bajar, el móvil sube más deprisa que el portátil */
  .js .escena__pieza { animation: flota linear both; animation-timeline: --mq; animation-range: entry 100% exit 100%; }
  .escena__pieza--portatil { --sube: -24px; }
  .escena__pieza--movil { --sube: -110px; }
}
@supports not (animation-timeline: view()) {
  .pasos li::after { transform: none; }
}
@keyframes firma { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes apaga { from { opacity: 1; } to { opacity: 0; } }
@keyframes se-ve { from { opacity: 0; } }
@keyframes cae { from { opacity: 0; transform: translateY(-60%) scale(.94); } }
@keyframes cifra { from { color: transparent; } }
@keyframes abanico { from { transform: none; } }
/* En la cabecera la maqueta ya se ve al cargar: lo suyo pasa solo, sin esperar al scroll */
.js .cabecera .mq-codigo span { animation: cifra .15s linear 1.3s both; }
.js .cabecera .mq-codigo span:nth-child(2) { animation-delay: 1.45s; }
.js .cabecera .mq-codigo span:nth-child(3) { animation-delay: 1.6s; }
.js .cabecera .mq-codigo span:nth-child(4) { animation-delay: 1.75s; }
.js .cabecera .mq-codigo span:nth-child(5) { animation-delay: 1.9s; }
.js .cabecera .mq-codigo span:nth-child(6) { animation-delay: 2.05s; }
.js .cabecera .mq-boton span:first-child { animation: apaga .3s linear 2.5s both; }
.js .cabecera .mq-boton span:last-child { animation: se-ve .3s linear 2.5s both; }
.js .cabecera .figura--papel > .papel--detras { animation: abanico 1.4s var(--sale) 1s both; }
.js .cabecera .figura--acta .mq-p-lista li { animation: se-ve .6s var(--sale) 1.3s both; }
.js .cabecera .figura--acta .mq-p-lista li:nth-child(2) { animation-delay: 1.7s; }
.js .cabecera .figura--acta .mq-p-lista li:nth-child(3) { animation-delay: 2.1s; }
@keyframes flota { to { transform: translateY(var(--sube, 0)); } }
@keyframes abre { from { opacity: .3; transform: scale(.88); } to { opacity: 1; transform: none; } }
@keyframes entra { from { opacity: 0; transform: translateY(80px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes entra-titular { from { opacity: 0; transform: translateY(64px); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes sale { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-56px) scale(.97); } }
@keyframes endereza {
  from { transform: perspective(2200px) translateY(56px) rotateX(16deg) scale(.94); opacity: .35; }
  to { transform: none; opacity: 1; }
}
@keyframes traza { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- Tableta ---------- */
@media (max-width: 1080px) {
  .menu__boton, .menu__enlace { padding: 0 12px; }
  .bloque > .bloque__cab { grid-column: 1 / span 5; }
  .bloque > .bloque__cuerpo, .cabecera__pie, .cierre__lado { grid-column: 6 / -1; }
  .piezas, .incluye { grid-template-columns: minmax(0, 1fr); }
  .bloque--abierto .piezas, .bloque--abierto .incluye { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bloque--abierto .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bloque--abierto .pasos li:nth-child(3) { border-left: 0; }
  .bloque--abierto .pasos li:nth-child(n+3) { border-top: 1px solid var(--filete); }
  .bloque--contacto > .formulario { grid-column: 5 / -1; }
  .bloque.bloque--espejo > .bloque__cuerpo { grid-column: 1 / span 7; }
  .app__cuerpo { grid-template-columns: 200px minmax(0, 1fr); }
  .app__fuentes { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--filete); display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
  .app__fuentes .rail__t { flex-basis: 100%; margin: 0 0 4px; }
  .app__fuentes .src { margin: 0; min-width: 200px; }
  .pie__marca { grid-column: 1 / -1; }
  .pie__rejilla > div:not(.pie__marca) { grid-column: span 3; }
}

/* ---------- Móvil ---------- */
@media (max-width: 860px) {
  .barra { grid-template-columns: 1fr auto; padding: 12px var(--borde); }
  .menu, .barra__contacto { display: none; }
  .hamburguesa {
    display: inline-grid; place-content: center; gap: 5px; width: 44px; height: 44px; margin-right: -11px;
    padding: 0; border: 0; background: none; color: var(--tinta); cursor: pointer;
  }
  .hamburguesa i { display: block; width: 22px; height: 1.8px; border-radius: 2px; background: currentColor; transition: transform .35s var(--sale), opacity .2s; }
  .hamburguesa[aria-expanded="true"] i:nth-child(1) { transform: translateY(6.8px) rotate(45deg); }
  .hamburguesa[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
  .hamburguesa[aria-expanded="true"] i:nth-child(3) { transform: translateY(-6.8px) rotate(-45deg); }
  .hoja {
    display: flex; flex-direction: column; position: fixed; z-index: 29; inset: 72px 12px auto; max-height: calc(100svh - 88px); overflow: auto;
    padding: 10px; border-radius: 26px; background: var(--capa-solida); border: 1px solid var(--filete);
    box-shadow: 0 30px 80px -30px var(--sombra);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .25s var(--sale), transform .35s var(--sale), visibility 0s .25s;
  }
  body[data-sheet="true"] .hoja { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .hoja__titulo { padding: 14px 14px 6px; font-size: 13px; color: var(--gris); }
  .hoja__fila { display: block; padding: 12px 14px; border-radius: 16px; text-decoration: none; font-size: 19px; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; }
  .hoja__fila span { display: block; margin-top: 3px; font-size: 13.5px; font-weight: 400; line-height: 1.4; letter-spacing: 0; color: var(--gris); }
  .hoja__fila:hover { background: var(--filete); }
  .hoja__fila--sola { margin-top: 8px; border-top: 1px solid var(--filete); border-radius: 0 0 16px 16px; padding-top: 18px; }
  .hoja .boton { margin: 10px 4px 4px; }

  .portada, .cabecera { padding-top: 132px; }
  .portada__texto, .portada > .vitrina { grid-column: 1 / -1; grid-row: auto; }
  .portada__texto { margin-top: 28px; }
  .portada > .vitrina { margin-top: 56px; }
  .app__aviso { right: 6px; top: 6px; }
  .bloque > .bloque__cab { position: static; }
  .bloque > .bloque__cab, .bloque > .bloque__cuerpo, .cabecera__pie, .cierre h2, .cierre__lado,
  .filas__fila h2, .filas__fila > div { grid-column: 1 / -1; }
  .bloque > .bloque__cuerpo { margin-top: 36px; }
  .bloque.bloque--abierto > .bloque__cab { display: block; }
  .bloque.bloque--espejo > .bloque__cab, .bloque.bloque--espejo > .bloque__cuerpo { grid-column: 1 / -1; grid-row: auto; }
  .bloque--gigante .bloque__cab h2 { font-size: clamp(2.5rem, 11vw, 3.6rem); }
  .filas > .filas__fila:nth-of-type(even) h2, .filas > .filas__fila:nth-of-type(even) > div { grid-column: 1 / -1; grid-row: auto; }
  .grupo:nth-child(even) { margin-top: 0; }
  .bloque--abierto > .bloque__cab > p { margin-top: 18px; }
  .bloque--abierto .antes-despues { grid-template-columns: minmax(0, 1fr); }
  .bloque--abierto .antes-despues > div { border-left: 0; border-top: 1px solid var(--filete); }
  .bloque--abierto .antes-despues > div:first-child { border-top: 0; }
  .bloque--contacto > .formulario, .bloque--contacto > .contacto__lado { grid-column: 1 / -1; grid-row: auto; position: static; }
  .contacto__lado { margin-top: 48px; }
  .grupos { grid-template-columns: minmax(0, 1fr); }
  .js .revista { --caja: calc(100vw - 20px); padding-inline: 22px; border-radius: 24px; }
  .js .revista__hoja { display: block; min-height: 340px; padding: 30px 0 24px; }
  .js .revista__hoja[data-activa], .js .revista:not([data-lista]) .revista__hoja:first-child, .js .revista__hoja[data-sale] { display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; }
  .js .revista__t { font-size: clamp(2.3rem, 11cqi, 3.2rem); }
  .js .revista__txt { margin: 16px 0 0; font-size: 18px; }
  .js .revista__mandos { flex-wrap: wrap; gap: 14px; padding: 0 0 22px; }
  .revista__indice { flex-basis: 100%; gap: 6px; }
  .revista__ir span { display: none; }
  .revista__botones { margin-left: auto; }
  .revista__boton { width: 44px; height: 44px; }
  .cierre__campo { flex-wrap: wrap; padding: 8px; border-radius: 22px; }
  .cierre__campo input { flex-basis: 100%; height: 48px; padding: 0 14px; }
  .cierre__enviar { width: 100%; justify-content: center; }
  .formulario__fin { flex-direction: column; align-items: stretch; }
  .figura { margin-top: 36px; }
  .cabecera > .figura { grid-column: 1 / -1; grid-row: auto; margin-top: 48px; }
  .figura--papel { width: min(280px, 70%); }
  .figura--memoria > .papel--detras { transform: rotate(5deg) translate(12%, -4%); }
  .figura--movil .movil { width: min(240px, 66%); margin-inline: auto; }
  .figura--papel, .figura--acta { margin-inline: auto; }
  .escena { aspect-ratio: 100 / 76; }
  .escena__pieza--portatil { width: 96%; }
  .escena__pieza--movil { width: 32%; }
  .bloque--maqueta > .bloque__cuerpo { margin-top: 36px; }
  .filas__fila > div { margin-top: 16px; }
  .cabecera__pie { margin-top: 28px; }
  .formulario__dos { grid-template-columns: minmax(0, 1fr); }
  .f--medio { max-width: none; }
  .indice__grupo a { grid-template-columns: minmax(0, 1fr) 40px; gap: 6px 16px; }
  .indice__grupo a span { grid-row: 2; }
  .indice__ir { grid-row: 1 / span 2; grid-column: 2; }
  .selector__fila { flex-direction: column; }
  .cifras { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .app__cuerpo { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .app__fases { display: flex; gap: 6px; overflow-x: auto; padding: 10px; border-right: 0; border-bottom: 1px solid var(--filete); scrollbar-width: none; }
  .app__fases::-webkit-scrollbar { display: none; }
  .app__fases li + li::before { display: none; }
  .fase { width: auto; white-space: nowrap; margin: 0; padding: 8px 12px 8px 8px; }
  .app__ruta { display: none; }
  .app__doc { padding: 14px; }
  .hoja-doc { padding: 20px; }
  .hoja-doc__tabla > div { grid-template-columns: 1.2fr 1fr; }
  .hoja-doc__tabla > div span:nth-child(3) { display: none !important; }
  .app__pie { flex-wrap: wrap; }
  .pie__rejilla > div:not(.pie__marca) { grid-column: span 6; }
  .dock {
    display: block; position: fixed; z-index: 25; left: 50%; bottom: 16px; transform: translate(-50%, 140%);
    transition: transform .5s var(--sale);
  }
  .dock[data-on="true"] { transform: translate(-50%, 0); }
  .dock .boton { box-shadow: 0 20px 40px -16px var(--sombra); }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .antes-despues > div, .pasos li { grid-template-columns: minmax(0, 1fr); }
  .antes-despues__etiqueta, .pasos li::before { grid-row: auto; padding: 0 0 8px; }
  .antes-despues h3 + p, .pasos p { grid-column: 1; }
  .acciones .boton { flex: 1 1 auto; }
  .bloque--abierto .piezas, .bloque--abierto .incluye, .bloque--abierto .pasos, .frases { grid-template-columns: minmax(0, 1fr); }
  .bloque--abierto .pasos li { border-left: 0; border-top: 1px solid var(--filete); }
  .bloque--abierto .pasos li:first-child { border-top: 0; }
  .frases li:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--filete); }
  .formulario__dos { gap: 0; }
  .acciones .enlace + .enlace { margin-left: 0; }
  .pregunta summary { padding-right: 40px; }
  .pregunta__r { padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-pausa] { display: none !important; }
  *, *::before, *::after { animation: none !important; transition-duration: 0s !important; }
  .pasos li::after { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .menu, .desplegable, .hoja { background: var(--papel); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .pieza, .lista-grande, .indice__grupo ul, .frases, .pasos, .preguntas, .antes-despues, .selector, .ejemplos, .incluye, .cifras > div, .formulario, .cristal, .grupo, .js .revista { background: var(--app); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media print {
  .barra, .hoja, .dock, .fondo { display: none !important; }
}