/* ===========================================================
   ARC Automatizaciones · hoja de estilo del sitio público
   -----------------------------------------------------------
   La página está dibujada como un plano: papel, líneas finas,
   cotas con su número, anotaciones en monoespaciada al margen y
   un cajetín abajo con quién firma. No es un adorno: es el
   idioma del cliente. Quien entra aquí lleva veinte años
   mirando planos, y una web que le habla en su formato se lee
   antes que una que le habla en el de una startup.

   El rojo es la capa marcada, como en cualquier CAD: lo que
   está activo, lo que hay que mirar. Se gasta poco a propósito.
   =========================================================== */

/* ---------- fichas ---------- */
:root{
  color-scheme: light;

  /* Papel y tinta. El papel no es blanco puro: un blanco puro
     deslumbra y además no se parece a ningún papel. */
  --papel:   #F4F1ED;
  --hoja:    #FFFFFF;
  --hoja2:   #FAF8F6;
  --tinta:   #100E0D;
  --texto:   #2A2624;
  --apagado: #6B645E;
  --linea:   #DCD6D0;
  --linea2:  #C3BBB3;

  /* La capa marcada. El rojo de la marca, bajado lo justo para
     que se pueda leer sobre papel. */
  --rojo:    #E00F16;
  --rojo2:   #B00A10;
  --rojoflojo:#FDECEB;

  /* Semáforo. Es el de la propia aplicación, y no es el acento:
     un estado no puede confundirse con una marca. */
  --verde:   #1B6E44;
  --ambar:   #9A6608;

  --sombra: 0 1px 2px rgba(16,14,13,.05), 0 12px 34px rgba(16,14,13,.07);

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --cuerpo:  "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --ancho: 1180px;
  --canal: clamp(20px, 5vw, 56px);
}


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

html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--papel);
  color:var(--texto);
  font-family:var(--cuerpo);
  font-size:16.5px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  /* La cuadrícula del papel milimetrado, muy floja. Se ve al
     borde de la hoja y no debajo del texto. */
  background-image:
    linear-gradient(var(--linea) 1px, transparent 1px),
    linear-gradient(90deg, var(--linea) 1px, transparent 1px);
  background-size:64px 64px, 64px 64px;
  background-position:-1px -1px;
}

img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);color:var(--tinta);
  text-wrap:balance;margin:0;letter-spacing:-.022em;font-weight:800;line-height:1.06}
h1{font-size:clamp(34px,4.7vw,60px)}
h2{font-size:clamp(28px,3.9vw,44px)}
h3{font-size:clamp(19px,2vw,23px);letter-spacing:-.012em;line-height:1.2}
p{margin:0}
:where(a,button,input,select,summary):focus-visible{
  outline:2px solid var(--rojo);outline-offset:3px;border-radius:2px}

/* ---------- la hoja ---------- */
.hoja{max-width:var(--ancho);margin:0 auto;padding-inline:var(--canal)}
.tira{padding-block:clamp(56px,8vw,104px)}
.tira--blanca{background:var(--hoja);border-block:1px solid var(--linea)}

/* Anotación de margen, en monoespaciada: la referencia de la
   sección, como el número de plano. */
.eti{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--apagado);display:flex;
  align-items:center;gap:10px;margin-bottom:18px}
.eti::before{content:"";width:22px;height:1px;background:var(--rojo);flex:0 0 auto}
.eti b{color:var(--rojo);font-weight:600}

.entradilla{font-size:clamp(17px,1.6vw,19.5px);color:var(--apagado);
  max-width:62ch;margin-top:16px;line-height:1.6}

/* ---------- la cota ----------
   Una línea de cota de verdad: dos topes, la línea y el número
   en su hueco. Los números que lleva son valores del producto,
   no cifras de relleno. */
.cota{display:flex;align-items:center;gap:14px;margin:0;padding:0;border:0}
.cota::before,.cota::after{content:"";height:1px;background:var(--linea2);flex:1 1 auto}
.cota span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  color:var(--apagado);text-transform:uppercase;white-space:nowrap;
  position:relative;padding:0 2px}
.cota--sola{margin-block:clamp(44px,6vw,78px)}

/* ---------- barra ---------- */
.barra{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--papel) 86%,transparent);
  backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--linea)}
.barra .hoja{display:flex;align-items:center;gap:26px;height:64px}
.barra img{height:26px;width:auto}
.barra nav{margin-left:auto;display:flex;align-items:center;gap:clamp(12px,2.4vw,28px)}
.barra nav a{font-size:14.5px;text-decoration:none;color:var(--texto);
  padding:6px 0;border-bottom:1px solid transparent;transition:.18s}
.barra nav a:hover{color:var(--tinta);border-bottom-color:var(--rojo)}
.barra nav a[aria-current]{color:var(--tinta);border-bottom-color:var(--rojo)}
@media (max-width:720px){.barra nav a.oculta-movil{display:none}}

/* ---------- el cabezal de la barra ----------
   La barra se comporta como el visor de posición de un centro de mecanizado:
   una cruz recorre la barra hasta lo que señalas y la lectura cambia con ella.
   Cuando sueltas el ratón vuelve a la sección en la que estás, que es lo que
   hace una máquina: descansa en la última posición ordenada.

   TODO ESTO SOLO EXISTE DONDE HAY UN RATÓN QUE SEGUIR. Con `hover: hover` y
   `pointer: fine`. En una pantalla táctil no hay nada que señalar, así que la
   cruz y la lectura no se dibujan —y `barra.js` ni se arranca, porque lo
   primero que hace es preguntarle al CSS si la cruz se ve—. */
.barra .hoja{position:relative}
.barra .pos, .barra .cruz{display:none}

@media (hover: hover) and (pointer: fine){
  .barra .pos{display:inline-flex;align-items:center;gap:7px;margin-left:22px;
    padding-left:22px;border-left:1px solid var(--linea);
    font-family:var(--mono);font-size:11px;letter-spacing:.12em;
    color:var(--apagado);white-space:nowrap;position:relative;z-index:2}
  .barra .pos b{color:var(--rojo);font-weight:500;font-variant-numeric:tabular-nums;
    min-width:7ch}
  @media (max-width:980px){ .barra .pos{display:none} }

  /* La cruz. Va DEBAJO del texto —z-index 1 contra el 2 de la navegación— para
     que el aro pase por detrás de la palabra y no la tape. */
  .barra .cruz{display:block;position:absolute;top:0;bottom:0;left:0;width:0;
    z-index:1;pointer-events:none;opacity:0;
    transition:transform .42s cubic-bezier(.22,.61,.36,1), opacity .25s ease}
  .barra .cruz.puesta{opacity:1}
  .barra .cruz::before{content:"";position:absolute;left:-.5px;top:0;bottom:0;width:1px;
    background:var(--rojo);opacity:.5}
  .barra .cruz .ojo{position:absolute;left:-13px;top:50%;margin-top:-13px;
    width:26px;height:26px;border:1px solid var(--rojo);border-radius:50%;opacity:.85}
  .barra .cruz .ojo::before,.barra .cruz .ojo::after{content:"";position:absolute;
    background:var(--rojo)}
  .barra .cruz .ojo::before{left:50%;top:-7px;bottom:-7px;width:1px;margin-left:-.5px}
  .barra .cruz .ojo::after{top:50%;left:-7px;right:-7px;height:1px;margin-top:-.5px}
  /* La broca entrando: un punto que crece y se apaga. */
  .barra .cruz .broca{position:absolute;left:50%;top:50%;width:6px;height:6px;
    margin:-3px 0 0 -3px;border-radius:50%;background:var(--rojo);transform:scale(0);opacity:0}
  .barra .cruz.entra .broca{animation:arcBroca .5s cubic-bezier(.22,.61,.36,1)}
  @keyframes arcBroca{
    0%{transform:scale(0);opacity:1}
    70%{transform:scale(3.4);opacity:.35}
    100%{transform:scale(4.4);opacity:0} }
  .barra nav{position:relative;z-index:2}
  /* Con la cruz marcando dónde estás, el subrayado sobra: dos marcas para lo
     mismo son una de más. Se queda solo al pasar el ratón. */
  .barra nav a[aria-current]{border-bottom-color:transparent}
  .barra nav a[aria-current]:hover{border-bottom-color:var(--rojo)}
}
@media (prefers-reduced-motion: reduce){
  .barra .cruz{transition:opacity .25s ease}
  .barra .cruz.entra .broca{animation:none}
}
.barra img.oscuro{display:none}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;height:48px;padding:0 22px;
  font-family:var(--cuerpo);font-size:15px;font-weight:600;text-decoration:none;
  border:1px solid var(--tinta);background:var(--tinta);color:var(--papel);
  cursor:pointer;transition:.18s;border-radius:2px;white-space:nowrap}
.btn:hover{background:var(--rojo);border-color:var(--rojo);color:#fff;transform:translateY(-1px)}
.btn--linea{background:transparent;color:var(--tinta);border-color:var(--linea2)}
.btn--linea:hover{background:transparent;color:var(--rojo);border-color:var(--rojo)}
.btn small{font-family:var(--mono);font-size:11px;opacity:.72;font-weight:400}
.botones{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* ---------- el papel de la portada ----------
   El lienzo del fondo va a sangre y DEBAJO de todo, sin poder pulsarse: no
   roba un clic con el ratón ni un dedo en el móvil. El contenido sube a
   z-index 1 porque un elemento posicionado siempre gana a uno que no lo está,
   y sin subirlo el titular quedaría por debajo del papel. */
.escena{position:relative;isolation:isolate}
.escena>canvas{position:absolute;inset:0;width:100%;height:100%;
  display:block;pointer-events:none;z-index:0}
.escena>section{position:relative;z-index:1}

/* ---------- portada ---------- */
.portada{padding-top:clamp(38px,5vw,64px);padding-bottom:clamp(30px,4vw,48px)}
.portada-rej{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);
  gap:clamp(28px,4vw,56px);align-items:center}
@media (max-width:940px){.portada-rej{grid-template-columns:1fr}}
.portada h1 em{font-style:normal;color:var(--rojo)}
.portada .entradilla{margin-top:22px}
.marcas{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.marcas span{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;
  border:1px solid var(--linea);padding:5px 10px;color:var(--apagado);
  background:var(--hoja);border-radius:2px}

/* El lienzo del plano */
.plano{position:relative;background:var(--hoja);border:1px solid var(--linea);
  box-shadow:var(--sombra);border-radius:3px;overflow:hidden}
.plano canvas{display:block;width:100%;height:auto}
.plano-cab{display:flex;align-items:center;gap:10px;padding:9px 14px;
  border-bottom:1px solid var(--linea);font-family:var(--mono);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--apagado);background:var(--hoja2)}
.plano-cab b{color:var(--rojo);font-weight:600}
.plano-pie{display:flex;align-items:center;gap:14px;padding:10px 14px;
  border-top:1px solid var(--linea);background:var(--hoja2);
  font-family:var(--mono);font-size:11.5px;color:var(--apagado)}
.plano-pie button{margin-left:auto;font-family:var(--mono);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;background:none;cursor:pointer;
  border:1px solid var(--linea2);color:var(--texto);padding:5px 11px;border-radius:2px}
.plano-pie button:hover{border-color:var(--rojo);color:var(--rojo)}
.fase{display:flex;gap:6px}
.fase i{width:26px;height:3px;background:var(--linea);display:block;border-radius:2px;
  transition:background .3s}
.fase i.on{background:var(--rojo)}

/* ---------- las seis salidas ----------
   No son seis tarjetas iguales con su sombra: son seis entradas
   de una lista de entregables, cada una con su referencia. */
/* Tres columnas, no `auto-fit`: son SEIS entradas, y seis llenan
   exactamente 3×2 o 2×3. Con `auto-fit` salían cuatro arriba y dos
   abajo, con dos huecos muertos y los filetes de la derecha
   cayendo donde no tocaba. */
.salidas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;margin-top:40px;border-top:1px solid var(--linea)}
.salida{border-bottom:1px solid var(--linea);border-right:1px solid var(--linea);
  padding:26px 26px 30px}
.salida:nth-child(3n){border-right:0}
@media (max-width:980px){
  .salidas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .salida:nth-child(3n){border-right:1px solid var(--linea)}
  .salida:nth-child(2n){border-right:0}
}
@media (max-width:620px){
  .salidas{grid-template-columns:1fr}
  .salida{border-right:0!important}
}
.salida .ref{font-family:var(--mono);font-size:11px;color:var(--rojo);
  letter-spacing:.12em;display:block;margin-bottom:12px}
.salida h3{margin-bottom:9px}
.salida p{font-size:15px;color:var(--apagado);line-height:1.58}
.salida:hover{background:var(--hoja2)}

/* ---------- la secuencia ----------
   Aquí los números SÍ significan algo: es el orden real por el
   que pasa una obra, y saltarse uno rompe el siguiente. */
.pasos{display:grid;gap:0;margin-top:36px;counter-reset:p}
.paso{display:grid;grid-template-columns:64px minmax(0,1fr);gap:clamp(16px,3vw,34px);
  padding:26px 0;border-top:1px solid var(--linea);align-items:start}
.paso:last-child{border-bottom:1px solid var(--linea)}
.paso .n{font-family:var(--mono);font-size:13px;color:var(--rojo);padding-top:4px;
  letter-spacing:.06em}
.paso h3{margin-bottom:7px}
.paso p{color:var(--apagado);font-size:15.5px;max-width:70ch}
.paso .dato{font-family:var(--mono);font-size:12.5px;color:var(--texto);
  margin-top:10px;display:inline-block;background:var(--hoja2);
  border:1px solid var(--linea);padding:4px 9px;border-radius:2px}

/* ---------- números ---------- */
.cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1px;background:var(--linea);border:1px solid var(--linea);margin-top:36px}
.cifra{background:var(--hoja);padding:24px 22px}
.cifra b{display:block;font-family:var(--display);font-size:clamp(30px,3.6vw,42px);
  color:var(--tinta);letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.cifra span{display:block;font-size:13.5px;color:var(--apagado);margin-top:9px;line-height:1.45}

/* ---------- precio ----------
   El único objeto que se levanta del papel en toda la página.
   Si todo lleva sombra, la sombra no dice nada. */
.tarifa{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(20px,3vw,34px);margin-top:40px;align-items:start}
@media (max-width:900px){.tarifa{grid-template-columns:1fr}}
.panel{background:var(--hoja);border:1px solid var(--linea2);border-radius:3px;
  box-shadow:var(--sombra);overflow:hidden}
.panel-cab{padding:26px 28px 22px;border-bottom:1px solid var(--linea)}
.panel-cab .eti{margin-bottom:14px}
.granprecio{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.granprecio b{font-family:var(--display);font-size:clamp(44px,6vw,62px);color:var(--tinta);
  letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.granprecio span{font-size:15px;color:var(--apagado)}
.panel-cue{padding:22px 28px 28px}
.incluye{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.incluye li{position:relative;padding-left:24px;font-size:15px;color:var(--texto)}
.incluye li::before{content:"";position:absolute;left:0;top:8px;width:9px;height:9px;
  border:1.5px solid var(--rojo);border-radius:1px}
.incluye li em{font-style:normal;color:var(--apagado)}

/* Calculadora */
.calc{padding:24px 28px 28px}
.calc label{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--apagado);margin-bottom:9px}
.calc-fila{margin-bottom:22px}
.calc-val{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px}
.calc-val b{font-family:var(--display);font-size:26px;color:var(--tinta);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.calc-val i{font-style:normal;font-family:var(--mono);font-size:11.5px;color:var(--apagado)}
input[type=range]{width:100%;accent-color:var(--rojo);height:22px;cursor:pointer}
.desglose{border-top:1px solid var(--linea);margin-top:6px;padding-top:16px;
  display:grid;gap:9px;font-variant-numeric:tabular-nums}
.dfila{display:grid;grid-template-columns:1fr auto;gap:14px;font-size:14.5px;align-items:baseline}
.dfila span{color:var(--apagado)}
.dfila b{font-weight:600;color:var(--texto);font-family:var(--mono);font-size:14px}
.dfila em{font-style:normal;font-family:var(--mono);font-size:11.5px;color:var(--apagado);
  grid-column:1;margin-top:-6px}
.dfila--total{border-top:1px solid var(--linea2);padding-top:12px;margin-top:5px}
.dfila--total span{color:var(--tinta);font-weight:600;font-family:var(--cuerpo);font-size:15.5px}
.dfila--total b{color:var(--rojo);font-size:19px;font-family:var(--display);font-weight:800}
.nota{font-size:13.5px;color:var(--apagado);line-height:1.55;margin-top:16px}

/* Tabla de conceptos */
.tabla{width:100%;border-collapse:collapse;margin-top:26px;font-size:15px}
.tabla th,.tabla td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--linea);
  vertical-align:top}
.tabla th{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--apagado);font-weight:400;border-bottom-color:var(--linea2)}
.tabla td:last-child,.tabla th:last-child{text-align:right;font-variant-numeric:tabular-nums;
  font-family:var(--mono);font-size:14px;white-space:nowrap}
.tabla tr:hover td{background:var(--hoja2)}
.envuelve{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- preguntas ---------- */
.faq{margin-top:34px;border-top:1px solid var(--linea)}
.faq details{border-bottom:1px solid var(--linea)}
.faq summary{cursor:pointer;padding:19px 34px 19px 0;position:relative;
  font-family:var(--display);font-weight:700;font-size:17.5px;color:var(--tinta);
  list-style:none;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:16px;color:var(--rojo);
  font-family:var(--mono);font-size:20px;transition:transform .2s}
.faq details[open] summary::after{content:"–"}
.faq p{padding:0 0 20px;color:var(--apagado);font-size:15.5px;max-width:74ch}

/* ---------- cajetín (pie) ----------
   El cajetín de un plano: cómo dar con quien lo hizo, qué es y
   con qué condiciones. Es también lo que Stripe busca cuando
   revisa una web: el contacto y las condiciones, a la vista en
   todas las páginas. El nombre y el NIF del titular no van aquí:
   son los de una persona, y están en el aviso legal, a un clic. */
.pie{background:var(--hoja);border-top:1px solid var(--linea2);margin-top:0}
.cajetin{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border:1px solid var(--linea);border-bottom:0;margin:clamp(34px,5vw,56px) 0 0}
/* Tres celdas en dos columnas: la tercera, las condiciones, ocupa la fila
   entera en vez de dejar media fila vacía con su marco. */
@media (max-width:840px){.cajetin{grid-template-columns:repeat(2,minmax(0,1fr))}
  .celda:last-child{grid-column:1 / -1}}
@media (max-width:480px){.cajetin{grid-template-columns:1fr}}
.celda{border-right:1px solid var(--linea);border-bottom:1px solid var(--linea);
  padding:16px 18px 18px;min-height:104px}
.celda:last-child{border-right:0}
@media (max-width:840px){.celda:nth-child(2n){border-right:0}}
@media (max-width:480px){.celda{border-right:0}}
.celda h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--apagado);font-weight:400;margin-bottom:10px}
.celda a{color:var(--texto);text-decoration:none;display:block;font-size:14.5px;padding:2px 0}
.celda a:hover{color:var(--rojo)}
.celda p{font-size:14px;color:var(--texto);line-height:1.5}
.pie-abajo{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;
  padding:18px 0 34px;font-family:var(--mono);font-size:11.5px;color:var(--apagado);
  letter-spacing:.04em}
.pie-abajo img{height:20px;width:auto;opacity:.85}

/* ---------- hueco pendiente ----------
   Un dato que falta se ve. Poner «Calle Ejemplo 1» en un aviso
   legal es peor que dejarlo en blanco: se queda ahí para
   siempre y encima es mentira. */
.falta{background:var(--rojoflojo);color:var(--rojo2);border:1px dashed var(--rojo);
  font-family:var(--mono);font-size:.86em;padding:1px 7px;border-radius:2px;
  white-space:nowrap;display:inline-block}

/* ---------- páginas legales ---------- */
.legal{max-width:76ch;padding-block:clamp(40px,6vw,72px)}
.legal h1{font-size:clamp(30px,4.4vw,44px);margin-bottom:10px}
.legal .fecha{font-family:var(--mono);font-size:12px;color:var(--apagado);
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:34px;display:block}
.legal h2{font-size:clamp(20px,2.3vw,25px);margin:44px 0 12px;padding-top:18px;
  border-top:1px solid var(--linea)}
.legal h3{margin:28px 0 8px;font-size:17.5px}
.legal p{margin:0 0 14px;color:var(--texto)}
.legal ul,.legal ol{margin:0 0 16px;padding-left:22px;color:var(--texto)}
.legal li{margin-bottom:8px}
.legal a{color:var(--rojo);text-decoration:underline;text-underline-offset:3px}
.legal .ficha{background:var(--hoja);border:1px solid var(--linea);border-radius:3px;
  padding:20px 22px;margin:0 0 26px;display:grid;gap:8px}
.legal .ficha div{display:grid;grid-template-columns:190px minmax(0,1fr);gap:14px;font-size:15px}
@media (max-width:600px){.legal .ficha div{grid-template-columns:1fr;gap:2px}}
.legal .ficha dt,.legal .ficha b{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--apagado);font-weight:400;padding-top:3px}

/* ---------- aparición ----------
   Aditiva: sin JavaScript, y con `prefers-reduced-motion`, todo
   se ve igual. Lo que se lee no puede depender de un observador
   que a lo mejor no se ejecuta. */
.sube{opacity:1}
.js .sube.vista{animation:alza .55s cubic-bezier(.2,.7,.3,1) both}
@keyframes alza{from{transform:translateY(15px);opacity:.25}to{transform:none;opacity:1}}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .js .sube{opacity:1!important;transform:none!important;transition:none!important}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ===========================================================
   EN EL MÓVIL
   -----------------------------------------------------------
   No es «que quepa»: en 390 px cabía todo y aun así había tres
   cosas rotas. Se miraron una a una en un iPhone simulado.
   =========================================================== */

/* --- 1 · LAS TABLAS ---
   Era el fallo gordo. La tabla de perfiles mide 852 px: dentro de
   `.envuelve` no desbordaba la página —eso ya estaba bien— pero se
   quedaba cortada a media frase («Acceso completo, incluidos…») sin
   ningún indicio de que hubiera más a la derecha. Quien lo lee no
   piensa «esto se desplaza»: piensa que la web está rota.

   Y no son tablas de números: son pares etiqueta/valor. Apilados se
   leen mejor que desplazándose, así que en móvil cada fila pasa a ser
   un bloque. La cabecera desaparece porque ya no encabeza nada; donde
   hace falta —la de tres columnas, con su periodicidad y su importe—
   la etiqueta viaja en `data-eti` y se pinta delante del valor. */
@media (max-width: 620px){
  .tabla, .tabla tbody, .tabla tr, .tabla td{display:block;width:auto}
  .tabla thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .tabla tr{border-bottom:1px solid var(--linea2);padding:15px 0}
  .tabla tr:last-child{border-bottom:0}
  .tabla td{border:0;padding:3px 0;text-align:left!important;white-space:normal!important;
    font-size:15px}
  .tabla td:first-child{font-weight:600;color:var(--tinta)}
  .tabla td:not(:first-child){color:var(--apagado);font-family:var(--mono);font-size:13.5px}
  .tabla td[data-eti]::before{content:attr(data-eti) " · ";color:var(--linea2)}
  .envuelve{overflow-x:visible}
}

/* --- 2 · LOS BOTONES ---
   Dos botones seguidos con anchos distintos —«Escribir» corto,
   «Llamar» más corto todavía— se leen como un descuido. A ancho
   completo, además, el dedo no falla. */
@media (max-width: 620px){
  .botones{flex-direction:column;align-items:stretch}
  .botones .btn{justify-content:center;height:52px}
}

/* --- 3 · LO QUE SE TOCA CON EL DEDO ---
   Los enlaces del cajetín medían 26 px de alto y estaban pegados
   unos a otros. La referencia habitual son 44: por debajo de ahí se
   falla el toque y se pulsa el de al lado. Se gana con relleno, no
   agrandando la letra, para no descuadrar el pie. */
@media (max-width: 720px){
  .barra nav a{padding:11px 0}
  .celda a{padding:11px 0;min-height:44px;display:flex;align-items:center}
  .faq summary{padding-top:22px;padding-bottom:22px}
  /* Un deslizador de 22 px de alto se arrastra mal con el pulgar. */
  input[type=range]{height:44px}
  .plano-pie button{height:40px;padding:0 16px}
}

/* --- 4 · LA LETRA MENUDA ---
   Las anotaciones en monoespaciada van a 11-11,5 px, que en una
   pantalla de mano es el límite de lo cómodo. Suben un punto: no es
   texto de lectura larga, pero es donde están las referencias. */
@media (max-width: 620px){
  .eti{font-size:12.5px;letter-spacing:.12em}
  .cota span{font-size:12px}
  .pie-abajo{font-size:12.5px}
  .marcas span{font-size:12.5px}
  /* «ARC-01» se partía en dos líneas en la cabecera del plano. Y el rótulo
     largo ocupaba tres, así que la parte prescindible se calla: la escala se
     ve en el propio dibujo. */
  .plano-cab{flex-wrap:wrap;gap:2px 8px}
  .plano-cab b{white-space:nowrap}
  .plano-cab .larga{display:none}
}

/* Las pistas de fase se ocultan con la propiedad `hidden` cuando la
   secuencia se acorta, pero `.fase i` fija `display:block` y una regla de
   clase gana a `[hidden]`. Sin esto se veían cuatro pistas para dos fases:
   la secuencia parecía atascada a la mitad. */
.fase i[hidden]{display:none}

/* --- 5 · lo que quedaba pequeño tras mover este bloque al final ---
   Estas tres reglas ya estaban escritas y NO se aplicaban: el bloque del
   móvil vivía a media hoja de estilo y las definiciones de `.pie-abajo`,
   `.plano-cab` y `.dfila em` venían después, así que ganaban ellas. Una
   media query no tiene más peso por ser media query: sigue mandando la
   última. Por eso todo esto va ahora al FINAL del fichero. */
@media (max-width: 620px){
  .pie-abajo{font-size:12.5px}
  .plano-cab{font-size:12px}
  .dfila em{font-size:12.5px}
  .celda p, .celda a{font-size:15px}
}
@media (max-width: 720px){
  /* El logotipo es el enlace a la portada y medía 26 px de alto. */
  .barra .hoja>a{display:flex;align-items:center;min-height:44px}
}
/* ═══════════════════════════════════════════════════════════
   EL ARMARIO QUE SE DESPIEZA AL BAJAR
   -----------------------------------------------------------
   Un bloque alto de verdad con una pantalla pegada dentro: lo
   que dura el despiece es lo que mide el bloque. No secuestra
   la rueda —si sigues bajando, sales; si subes, se vuelve a
   montar—, y eso no es un detalle de gusto: una página que se
   queda con el scroll es una página de la que la gente se va.
   ═══════════════════════════════════════════════════════════ */
/* 720 vh y no 560: el recorrido del bloque ES la duración de la animación.
   Con 560 cada movimiento se comía media pantalla de rueda y se sentía a
   tirones; con 720 hay sitio para que cada fase se mueva Y SE QUEDE QUIETA
   un rato, que es lo que la hace legible. */
.acto{position:relative;height:720vh}
/* Pegada DEBAJO de la barra y no debajo del borde de la ventana: la barra es
   sticky y translúcida, así que con `top:0` el dibujo se le metía por debajo y
   en un móvil se comía el carril de fases entero.

   Y SIN FONDO PROPIO. Antes era una caja blanca con una raya arriba y otra
   abajo, y por eso parecía otra página: el papel del sitio —con su cuadrícula
   de milimetrado, que la pinta el `body`— se cortaba en seco al empezar el
   bloque y volvía a empezar al acabarlo. Dejándola transparente, la hoja es
   la misma de arriba abajo y el armario se dibuja SOBRE el papel de la
   portada, no en una ventana aparte. Puede ser transparente sin que se
   transparente lo de debajo porque dentro de `.acto` no hay nada más. */
.escenario{position:sticky;top:65px;height:calc(100vh - 65px);height:calc(100svh - 65px);
  overflow:hidden;background:transparent;opacity:0;
  transition:opacity .18s linear}
.escenario>canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

/* El cajetín, en el mismo idioma que el de la portada: «ARC-01 · Alzado de
   cocina» arriba y «ARC-02 · Armario» aquí. Es lo que dice que esto es la
   lámina siguiente del mismo juego de planos y no otra web. */
.arm-cab{position:absolute;left:var(--canal);top:22px;z-index:2;pointer-events:none;
  display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--apagado)}
.arm-cab b{color:var(--rojo);font-weight:600}
.arm-cab::after{content:"";height:1px;width:clamp(40px,7vw,120px);background:var(--linea2)}

.arm-rot{position:absolute;left:var(--canal);top:clamp(96px,18vh,190px);
  max-width:min(31ch,32vw);pointer-events:none;z-index:2}
.arm-rot .num{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--rojo)}
.arm-rot h2{font-family:var(--display);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(24px,3.2vw,40px);line-height:1.05;margin:.25em 0 .4em;color:var(--tinta);
  text-wrap:balance}
.arm-rot p{font-size:clamp(13.5px,1.35vw,16px);line-height:1.6;margin:0;color:var(--texto)}
.arm-rot .cambia{transition:opacity .34s cubic-bezier(.22,.61,.36,1),
                             transform .34s cubic-bezier(.22,.61,.36,1)}

.arm-carril{position:absolute;right:var(--canal);top:50%;transform:translateY(-50%);
  z-index:2;display:grid;gap:clamp(14px,2.4vh,26px);pointer-events:none}
.arm-carril div{display:grid;grid-template-columns:auto auto;gap:12px;align-items:center;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--linea2);transition:color .25s ease}
.arm-carril div b{font-weight:500;font-size:13px}
.arm-carril div.on{color:var(--rojo)}
.arm-carril div.hecha{color:var(--apagado)}

.arm-cuentas{position:absolute;left:var(--canal);bottom:clamp(20px,4vh,46px);z-index:2;
  display:flex;gap:clamp(18px,3vw,44px);font-family:var(--mono);pointer-events:none}
.arm-cuentas div span{display:block;font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--apagado)}
.arm-cuentas div b{font-size:clamp(17px,2.4vw,26px);font-weight:500;color:var(--tinta);
  font-variant-numeric:tabular-nums}

.arm-pista{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:2;
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--linea2);transition:opacity .3s}



/* --- y el mismo bloque en un móvil ---
   Va aquí, al final del todo y detrás de sus propias reglas de escritorio,
   por lo mismo que está escrito arriba: manda la última. El carril de fases
   pasa de columna a tira arriba, el rótulo baja al pie y el dibujo se queda
   con la franja de en medio, que es lo único que hay. */
@media (max-width: 860px){
  .acto{height:620vh}
  .arm-cab{top:44px}
  .arm-rot{left:var(--canal);right:var(--canal);top:auto;
    bottom:clamp(84px,16vh,150px);max-width:none}
  .arm-rot h2{font-size:clamp(19px,5.4vw,26px)}
  .arm-rot p{font-size:13px}
  .arm-carril{top:14px;right:auto;left:var(--canal);transform:none;
    grid-auto-flow:column;gap:10px}
  .arm-carril div{grid-template-columns:auto;gap:0;font-size:9px;letter-spacing:.06em}
  .arm-carril div span{display:none}
  .arm-cuentas{bottom:14px;gap:16px}
  .arm-cuentas div b{font-size:15px}
  .arm-cuentas div span{font-size:9px}
  .arm-pista{display:none}
}

/* --- el logotipo, al canto ---
   La barra iba dentro de la misma caja de 1180 que el texto, así que en una
   pantalla ancha el logotipo quedaba flotando hacia el centro. Una cabecera
   se lee mejor anclada al borde: el logotipo a la izquierda del todo y la
   navegación a la derecha del todo, con el mismo margen que el resto de la
   página. El contenido sigue centrado; lo único que se suelta es la barra. */
.barra .hoja{max-width:none}

/* ═══ RETO DEL MÓDULO Y PILOTO GRATUITO ═══
   Va al final a propósito, detrás del bloque del móvil: lleva sus propias
   media queries y así no depende del orden de las de arriba. */
.barra nav a.nav-reto{color:var(--rojo);border-bottom-color:var(--rojo);font-weight:600;white-space:nowrap}
.salidas--tres{grid-template-columns:repeat(3,minmax(0,1fr))}
.salidas--tres .salida:nth-child(3n){border-right:0}
.aviso-reto{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin-top:clamp(28px,4vw,44px);padding:22px 26px;background:var(--hoja);
  border:1px solid var(--rojo);border-left-width:4px;border-radius:3px}
.aviso-reto .eti{margin-bottom:8px}
.aviso-reto__txt{font-size:16px;color:var(--texto);max-width:64ch;line-height:1.55}
.reto-cab h1 em{font-style:normal;color:var(--rojo)}
.reto-cab .cifras{margin-top:clamp(30px,4vw,46px)}
.pedir{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 22px;margin-top:30px;max-width:860px}
.pedir label{display:flex;flex-direction:column;gap:7px;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--apagado)}
.pedir input,.pedir select,.pedir textarea{font:inherit;font-family:var(--cuerpo);font-size:16px;
  letter-spacing:0;text-transform:none;color:var(--tinta);background:var(--hoja);
  border:1px solid var(--linea2);border-radius:3px;padding:12px 13px;min-height:48px;width:100%;box-sizing:border-box}
.pedir textarea{resize:vertical;min-height:96px}
.pedir input:focus,.pedir select:focus,.pedir textarea:focus{outline:none;border-color:var(--rojo)}
.pedir .ancho{grid-column:1/-1}
.pedir button.btn{cursor:pointer;font-family:var(--cuerpo);font-size:15px;font-weight:600}
@media (max-width:860px){
  .salidas--tres{grid-template-columns:minmax(0,1fr)}
  .salidas--tres .salida{border-right:0}
}
@media (max-width:620px){
  .pedir{grid-template-columns:minmax(0,1fr)}
  .aviso-reto{padding:18px}
  .aviso-reto .btn{width:100%;justify-content:center}
}

/* Formulario del reto con adjuntos (reto.html) */
.pedir[hidden],.pedir-hecho[hidden]{display:none}
.adjuntar{position:relative}
.adjuntar input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.adjuntar-caja{display:flex!important;flex-direction:column;gap:6px!important;align-items:flex-start;cursor:pointer;
  padding:22px 22px;border:1.5px dashed var(--linea2);border-radius:3px;background:var(--hoja);
  text-transform:none!important;letter-spacing:0!important;transition:.15s}
.adjuntar-caja b{font-family:var(--display);font-size:18px;color:var(--tinta)}
.adjuntar-caja span{font-family:var(--cuerpo);font-size:14px;color:var(--apagado)}
.adjuntar-caja:hover,.adjuntar.encima .adjuntar-caja,.adjuntar input:focus-visible+.adjuntar-caja{border-color:var(--rojo)}
.adjuntos-lista{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
.adjuntos-lista li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;
  padding:8px 10px;border:1px solid var(--linea);border-radius:3px;font-size:14.5px;background:var(--hoja)}
.adjuntos-lista li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adjuntos-lista li em{font-style:normal;font-family:var(--mono);font-size:12px;color:var(--apagado)}
.adjuntos-lista li button{border:0;background:none;color:var(--rojo);font-size:20px;line-height:1;cursor:pointer;padding:2px 6px}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.pedir label.acepto{flex-direction:row;align-items:flex-start;gap:12px;text-transform:none;letter-spacing:0;
  font-family:var(--cuerpo);font-size:14.5px;color:var(--texto);line-height:1.5}
.pedir label.acepto input{width:20px;height:20px;min-height:0;margin-top:2px;flex:0 0 auto;accent-color:var(--rojo)}
.pedir label.acepto a{color:var(--rojo)}
.pedir-aviso{font-size:14.5px;color:var(--rojo);min-height:1.4em;margin:0}
.pedir button.btn[disabled]{opacity:.6;cursor:progress}
.pedir-hecho{margin-top:30px;max-width:720px;padding:26px 28px;background:var(--hoja);border:1px solid var(--rojo);border-left-width:4px;border-radius:3px}
.pedir-hecho h3{margin:6px 0 8px}
.pedir-hecho p{color:var(--texto)}
.pedir-hecho a{color:var(--rojo)}

/* ===========================================================
   EL ARMARIO DE LA PORTADA (sección .a3)
   -----------------------------------------------------------
   Un escenario pegado debajo de la barra y cinco pasos encima.
   El 3D va en el canvas (z 2). El titular gigante «Del alzado»
   pasa POR DETRÁS del armario (z 1) y «al mueble.» POR DELANTE
   (z 4). Por eso los pasos no llevan opacidad propia: la llevan
   sus hijos, y así cada uno se apila con el canvas por su cuenta.
   =========================================================== */
.a3{position:relative;--eo:cubic-bezier(.22,1,.36,1)}
.a3-oculta{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.a3-hilos{pointer-events:none}
.a3-hilos path{fill:none;stroke:var(--rojo);stroke-width:1.3}
.a3-hilos circle{fill:var(--rojo)}
.a3-hilos circle.h{fill:none;stroke:var(--rojo);stroke-opacity:.35;stroke-width:1.5}
.a3-gigante{font-family:var(--display);font-weight:800;letter-spacing:-.045em;line-height:.9;white-space:nowrap;color:var(--tinta)}
.a3-gigante i,.a3-t4 h2 i{font-style:normal;color:var(--rojo)}
.a3-num{font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--rojo);margin-bottom:12px}
.a3 h2{font-size:clamp(38px,4.3vw,62px);line-height:.98;letter-spacing:-.03em}
.a3-corto{margin-top:16px;font-size:clamp(15px,1.3vw,18px);line-height:1.5;color:var(--texto)}
.a3-lista{list-style:none;margin:30px 0 0;padding:0}
.a3-lista li{display:flex;gap:14px;align-items:baseline;padding:12px 0;border-top:1px solid var(--linea);font-size:16px}
.a3-lista li b{font-family:var(--display);min-width:130px;font-size:18px;color:var(--tinta)}
.a3-lista li span{color:var(--apagado);font-family:var(--mono);font-size:14px}
.a3-cifras{display:flex;gap:clamp(22px,3vw,44px);align-items:baseline}
.a3-cifras b,.a3-panel-cifras b{font-family:var(--display);font-size:clamp(34px,3.4vw,48px);font-weight:800;color:var(--tinta);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;margin-right:8px}
.a3-cifras span{color:var(--apagado)}
.a3-et{background:var(--hoja);border:1px solid var(--linea);padding:9px 12px 10px;border-radius:3px;box-shadow:var(--sombra);min-width:150px}
.a3-et b{display:block;font-family:var(--display);font-size:16px;color:var(--tinta);letter-spacing:-.01em}
.a3-et span{font-family:var(--mono);font-size:12px;color:var(--rojo)}
.a3-panel{background:#141210;color:#fff;padding:22px 24px 24px;border-radius:3px;box-shadow:0 20px 50px rgba(16,14,13,.18)}
.a3-panel-cifras{display:flex;gap:26px;align-items:baseline}
.a3-panel-cifras b{color:#fff}
.a3-panel-cifras span{color:rgba(255,255,255,.7);font-size:14px}
.a3-panel-cifras div{display:flex;align-items:baseline}
.a3-pgmx{font-family:var(--mono);font-size:13px;color:#ff6b6f;margin:12px 0 16px}
.a3-panel .btn{background:var(--rojo);border-color:var(--rojo);color:#fff;width:100%;justify-content:center}
.a3-pista{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--apagado)}
.tira-cifras{padding:clamp(28px,4vw,48px) 0}

/* --- sin JavaScript: una columna normal --- */
.a3:not(.a3-vivo) .a3-paso{position:relative;padding:40px var(--canal);max-width:var(--ancho);margin:0 auto}
.a3:not(.a3-vivo) .a3-detras,.a3:not(.a3-vivo) .a3-et,.a3:not(.a3-vivo) .a3-pista,
.a3:not(.a3-vivo) .a3-prog,.a3:not(.a3-vivo) .a3-lienzo,.a3:not(.a3-vivo) .a3-hilos{display:none}
.a3:not(.a3-vivo) .a3-foto img{width:100%;height:auto;margin-bottom:20px}
.a3:not(.a3-vivo) .a3-delante{font-size:clamp(44px,8vw,110px)}
.a3:not(.a3-vivo) .a3-oculta{position:static;width:auto;height:auto;clip:auto}

/* --- con JavaScript: el escenario --- */
.a3-vivo{height:560vh}
.a3-vivo .a3-fijo{position:sticky;top:65px;height:calc(100vh - 65px);height:calc(100svh - 65px);overflow:hidden}
.a3-vivo .a3-lienzo,.a3-vivo .a3-hilos{position:absolute;inset:0;width:100%;height:100%;display:block}
.a3-vivo .a3-lienzo{z-index:2;opacity:0;transition:opacity .6s ease}
.a3-3d .a3-lienzo{opacity:1}
.a3-vivo .a3-hilos{z-index:6;overflow:visible}
.a3-vivo .a3-paso{position:absolute;inset:0;pointer-events:none}
.a3-vivo .a3-paso>*{position:absolute;opacity:0;visibility:hidden;transform:translateY(16px);
  transition:opacity .4s var(--eo),transform .6s var(--eo),visibility 0s linear .6s}
.a3-vivo .a3-paso.on>*{opacity:1;visibility:visible;transform:none;pointer-events:auto;
  transition:opacity .55s var(--eo) var(--d,0ms),transform .8s var(--eo) var(--d,0ms),visibility 0s}
.a3-vivo .a3-paso>.a3-et{--d:160ms}.a3-vivo .a3-paso>.a3-et+.a3-et{--d:230ms}
.a3-vivo .a3-paso>.a3-panel,.a3-vivo .a3-paso>.a3-cifras{--d:120ms}
.a3-vivo .a3-foto{inset:0;z-index:2;transform:none!important}
.a3-vivo .a3-foto img{width:100%;height:100%;object-fit:cover}
.a3-3d .a3-foto{display:none}
.a3-fotos .a3-et{display:none}
.a3-vivo .a3-detras{z-index:1;color:#E7E1D8;left:var(--canal);top:6%;font-size:clamp(96px,12.6vw,200px)}
.a3-vivo .a3-h1{inset:0;margin:0;z-index:4;pointer-events:none!important}
.a3-vivo .a3-delante{position:absolute;left:var(--canal);bottom:7%;font-size:clamp(84px,10.4vw,166px)}
.a3-vivo .a3-texto,.a3-vivo .a3-cifras,.a3-vivo .a3-panel{z-index:5}
.a3-vivo .a3-et{z-index:7;left:var(--x);top:var(--y)}
.a3-vivo .a3-t0{left:var(--canal);top:30%;width:min(400px,30vw)}
.a3-t0 .entradilla{margin-top:20px;font-size:clamp(15px,1.25vw,18px)}
.a3-t0 .botones{margin-top:24px;display:flex;flex-wrap:wrap;gap:12px}
.a3-vivo .a3-t1{left:61%;top:9%;width:min(480px,34vw)}
.a3-t1 .a3-corto{display:none}
.a3-vivo .a3-t2{left:var(--canal);top:7%}
.a3-vivo .a3-cifras{left:var(--canal);bottom:6%}
.a3-vivo .a3-cae{top:3%;font-size:clamp(130px,17vw,260px)}
.a3-vivo .a3-t3{left:var(--canal);bottom:6%;width:min(560px,40vw)}
.a3-vivo .a3-t4{left:var(--canal);top:6%}
.a3-t4 h2{font-size:clamp(48px,5.6vw,84px)}
.a3-vivo .a3-panel{right:calc(var(--canal) + 26px);bottom:6%;width:min(430px,33vw)}
.a3-vivo .a3-pista{left:50%;bottom:16px;transform:translateX(-50%)!important;z-index:5}
.a3-prog{position:absolute;right:20px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px;z-index:8}
.a3-prog i{width:3px;height:26px;background:rgba(16,14,13,.15);display:block;transition:background .3s}
.a3-prog i.on{background:var(--rojo)}

@media (max-width:899px){
  .a3-vivo{height:500vh}
  .a3-vivo .a3-detras,.a3-vivo .a3-et,.a3-vivo .a3-hilos,.a3-vivo .a3-pista,.a3-t0 .eti,.a3-t0 .btn--linea,.a3-lista{display:none}
  .a3-vivo .a3-h1 .a3-oculta{position:static;width:auto;height:auto;clip:auto}
  .a3-vivo .a3-delante{top:16px;bottom:auto;font-size:clamp(36px,10.4vw,52px);white-space:normal;max-width:90%}
  .a3-vivo .a3-texto{left:12px;right:12px;bottom:12px;top:auto;width:auto;padding:16px 18px 18px;
    background:color-mix(in srgb,var(--papel) 94%,transparent);border:1px solid var(--linea);border-radius:10px;
    box-shadow:0 -6px 26px rgba(16,14,13,.08)}
  .a3-t0 .entradilla{margin-top:0;font-size:15px}
  .a3-t0 .botones{margin-top:14px}.a3-t0 .btn{width:100%;justify-content:center}
  .a3 h2{font-size:clamp(28px,8vw,38px)}
  .a3-num{font-size:11.5px;margin-bottom:8px}
  .a3-t1 .a3-corto{display:block}.a3-corto{font-size:14.5px;margin-top:10px}
  .a3-vivo .a3-cifras{top:14px;bottom:auto;left:var(--canal);gap:20px}
  .a3-cifras b{font-size:28px;margin-right:4px}.a3-cifras span{font-size:13px}
  .a3-vivo .a3-cae{display:none}
  .a3-vivo .a3-t4{top:12px;bottom:auto;background:none;border:0;box-shadow:none;padding:0 var(--canal);left:0;right:0}
  .a3-vivo .a3-panel{left:12px;right:12px;bottom:12px;width:auto;padding:16px 18px 18px}
  .a3-panel-cifras b{font-size:30px}
  .a3-prog{right:8px;top:40%}.a3-prog i{height:18px}
}
@media (prefers-reduced-motion: reduce){
  .a3-vivo .a3-paso>*,.a3-vivo .a3-paso.on>*{transition:none;transform:none}
}