*{box-sizing:border-box;margin:0;padding:0}
/* Paleta. --azul es el de la marca (logotipos y acentos); --azul-texto es el
   mismo tono un punto más hondo para letra y botones: el #0080C1 da 4.3 de
   contraste sobre blanco y la norma pide 4.5 para texto normal. */
/* El acento cálido (12-sep, decidido por Mike al fusionar con el estilo de
   bitnomial.com): el azul sigue siendo la marca —logotipos, trazos, planos— y
   el coral se reserva para lo que se toca y para los números de la lista. La
   letra encima va en tinta, que da 4.78 de contraste (pasa el 4.5 de la
   norma); en blanco daría 3.2 y no pasaría. Al pasar el ratón, el botón se
   invierte a tinta con letra blanca: oscurecer el coral y dejar la letra
   blanca daba 4.38, que tampoco pasaba. */
:root{--azul:#0080C1;--azul-texto:#0074ad;--claro:#3AA3DC;--tinta:#122733;--gris:#5b6b76;
  --nube:#f4f7f9;--linea:#dfe6ea;--en-oscuro:#a9c0ce;
  --acento:#F2603C;--acento-hondo:#D8451F;
  --rejilla:repeating-linear-gradient(90deg,rgba(18,39,51,.10) 0 1px,transparent 1px 20%);
  --rejilla-oscura:repeating-linear-gradient(90deg,rgba(255,255,255,.09) 0 1px,transparent 1px 20%)}
@font-face{font-family:"Cifras";src:url(../fuentes/fira-cifras-400.woff2) format("woff2");font-weight:400;
  font-display:swap;unicode-range:U+0030-0039,U+00B0,U+00B1,U+00D7,U+0025}
@font-face{font-family:"Cifras";src:url(../fuentes/fira-cifras-600.woff2) format("woff2");font-weight:600 700;
  font-display:swap;unicode-range:U+0030-0039,U+00B0,U+00B1,U+00D7,U+0025}
@font-face{font-family:"Raleway";src:url(../fuentes/raleway-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Raleway";src:url(../fuentes/raleway-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Raleway";src:url(../fuentes/raleway-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Sansation";src:url(../fuentes/sansation-700.woff2) format("woff2");font-weight:700;font-display:swap}
html{-webkit-text-size-adjust:100%}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{font-family:"Cifras","Raleway",system-ui,sans-serif;font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum";color:var(--tinta);background:#fff;font-size:17px;line-height:1.5;
  -webkit-font-smoothing:antialiased}
/* Ninguna imagen se estira: manda el ancho y la altura sale de su proporción.
   Antes la del montaje traía height="1020" en el HTML y width:100% en el CSS,
   y en el celular se pintaba de 390 × 1020. */
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--azul-texto);outline-offset:3px;border-radius:6px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.env{max-width:1024px;margin:0 auto;padding:0 22px}
.estrecho{max-width:760px}

/* Barras: la de la suite y, en cada app, la de la app debajo, como en Apple. */
.barra,.subbarra{position:sticky;z-index:20;background:rgba(255,255,255,.84);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(18,39,51,.09)}
.barra{top:0}
.barra .env,.subbarra .env{display:flex;align-items:center;justify-content:space-between;height:64px}
/* La barra lleva el logotipo de la suite: aro relleno y «101» calado, que
   deja ver el blanco de la barra. Creció el 13-sep a petición de Mike, y con
   él la barra, para que siga habiendo aire arriba y abajo. */
.marca{display:block;line-height:0}
.marca svg{height:38px;width:auto;display:block}
.barra nav{display:flex;gap:24px}
.barra nav a{font-size:13px;text-decoration:none;color:rgba(18,39,51,.78)}
.barra nav a:hover{color:var(--azul-texto)}
.subbarra{top:64px;z-index:19}
.subbarra svg{height:34px;width:auto;display:block}
/* Los logotipos salen de marca/logos.svg; el color lo pone esta regla. El azul
   de la marca sobre la tinta da 3.6 de contraste (pasa para un logotipo, pero
   se ve apagado); el claro, 5.5. */
.logo{fill:var(--azul)}
.oscuro .logo,.encajan .logo{fill:var(--claro)}
.subbarra .chica{font-size:12.5px;padding:5px 13px}

/* Botones: píldora llena para la acción principal, de contorno para la otra. */
/* Botones rectangulares, en mayúsculas y con las letras separadas: es lo que
   se tomó de bitnomial.com. La píldora redonda se fue. */
.acciones{display:flex;flex-wrap:wrap;gap:12px 14px;justify-content:flex-start;margin-top:28px}
.btn{display:inline-block;padding:14px 26px;border-radius:0;font-size:14px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  background:var(--acento);color:var(--tinta);border:1px solid var(--acento)}
.btn:hover{background:var(--tinta);border-color:var(--tinta);color:#fff}
.btn.contorno{background:transparent;color:var(--tinta);border-color:rgba(18,39,51,.35)}
.btn.contorno:hover{background:var(--tinta);border-color:var(--tinta);color:#fff}
.oscuro .btn.contorno,.hero .btn.contorno{color:#fff;border-color:rgba(255,255,255,.45)}
.oscuro .btn.contorno:hover,.hero .btn.contorno:hover{background:#fff;color:var(--tinta)}

/* Portada */
/* La rejilla de columnas, visible de arriba abajo, es lo primero que se nota
   en bitnomial.com. Aquí además cae en su sitio: el escaparate ya llevaba
   planos de fondo, y una retícula de papel de plano es la misma idea. */
.hero,.mosaico,.vista,.encajan,.cierre,.bloque,.intro{background-image:var(--rejilla);
  background-repeat:repeat-y;background-position:0 0}
.hero,.mosaico.oscuro,.encajan{background-image:var(--rejilla-oscura)}
.hero{background-color:var(--tinta);color:#fff;text-align:left;padding:96px 0 0;overflow:hidden}
.hero h1{font-size:clamp(40px,6.4vw,76px);line-height:1.04;letter-spacing:-.022em;font-weight:700;
  max-width:19ch;margin:0}
.baja{font-size:clamp(19px,2.2vw,25px);line-height:1.35;max-width:38ch;margin:18px 0 0;color:var(--gris)}
.hero .baja,.oscuro .baja{color:var(--en-oscuro)}
.montaje{max-width:1600px;margin:44px auto 0}
/* En el celular el montaje entero queda de 200 px de alto y no se lee nada:
   se recorta al centro, que es donde se enciman las tres pantallas. */
@media(max-width:640px){.montaje img{aspect-ratio:1/1;object-fit:cover;object-position:56% 50%}}

/* Mosaicos: cada programa, a todo lo ancho o de a dos, con su pantalla asomando por abajo. */
.mosaico{text-align:left;padding:64px 3vw 0;overflow:hidden;background-color:#fff}
.mosaico.nube{background-color:var(--nube)}
.mosaico.oscuro{background-color:var(--tinta);color:#fff}
.nombre svg{height:clamp(58px,5.8vw,78px);width:auto;margin:0;display:block}
.lema{font-size:clamp(28px,3.5vw,44px);line-height:1.1;letter-spacing:-.015em;font-weight:700;
  max-width:28ch;margin:18px 0 0}
.estado{font-size:14px;color:var(--gris);margin-top:12px}
.oscuro .estado{color:var(--en-oscuro)}
.asoma{max-width:1180px;margin:34px auto 0;padding-bottom:56px}
.pares{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:12px;background:#fff}
.pares .mosaico{padding-top:52px}
.pares .nombre svg{height:clamp(46px,4.4vw,58px)}
.pares .lema{font-size:clamp(24px,2.5vw,32px);max-width:19ch}
.pares .asoma{margin-top:30px;padding-bottom:3vw}
.pares .mosaico{padding-left:3vw;padding-right:3vw}
@media(max-width:820px){.pares{grid-template-columns:1fr;padding:12px 0}}
/* ---------------------------------------------------------------- equipos
   El marco se dibuja con CSS, sin imagen. En el HTML todos nacen como laptop;
   al cargar, movimiento.js le pone a cada uno el equipo que le toca (monitor
   de escritorio con ratón para las apps de Windows, tableta para la de obra,
   laptop para las de web). Si el JS no corre, se quedan como laptop, que es
   lo que ya estaba publicado. */
.laptop{position:relative;max-width:1180px;margin:0 auto;padding:0 6.5%;
  filter:drop-shadow(0 28px 36px rgba(18,39,51,.20))}
.oscuro .laptop{filter:drop-shadow(0 28px 40px rgba(0,0,0,.45))}
.pantalla{position:relative;background:#0c1116;border-radius:clamp(10px,1.6vw,20px) clamp(10px,1.6vw,20px) 4px 4px;
  padding:clamp(6px,1.4%,16px) clamp(6px,1.4%,16px) clamp(8px,2%,22px);box-shadow:inset 0 0 0 1px #2b3842}
.pantalla::before{content:"";position:absolute;top:clamp(2px,.55%,6px);left:50%;width:clamp(3px,.45%,6px);
  aspect-ratio:1;border-radius:50%;background:#2a3640;transform:translateX(-50%)}
.pantalla img{width:100%;border-radius:3px}
.base{position:relative;height:clamp(8px,1.5vw,20px);margin:0 -6.9%;border-radius:0 0 45% 45%/0 0 100% 100%;
  background:linear-gradient(#e4e8eb,#b7bfc6 60%,#98a1a9)}
.base::before{content:"";position:absolute;top:0;left:50%;width:15%;height:45%;transform:translateX(-50%);
  border-radius:0 0 10px 10px;background:linear-gradient(#aab2b9,#c9cfd4)}

/* Monitor de escritorio: marco parejo, cuello y peana, y un ratón al lado.
   Lo llevan nest101 y draw101, que se instalan en Windows. */
.escritorio{padding:0 4%}
.escritorio .pantalla{border-radius:clamp(6px,.9vw,12px);
  padding:clamp(8px,1.7%,20px) clamp(8px,1.7%,20px) clamp(16px,3.2%,38px)}
.escritorio .pantalla::after{content:"";position:absolute;left:50%;bottom:clamp(5px,1.05%,13px);
  width:8%;height:clamp(2px,.32%,4px);border-radius:99px;background:#243039;transform:translateX(-50%)}
.escritorio .base{height:clamp(26px,4.4vw,58px);margin:0;border-radius:0;background:none}
.escritorio .base::before{width:clamp(34px,5.4%,70px);height:64%;top:0;border-radius:0 0 4px 4px;
  background:linear-gradient(90deg,#aab2b9,#e0e5e9 45%,#9aa3ab)}
.escritorio .base::after{content:"";position:absolute;left:50%;bottom:0;width:clamp(120px,20%,260px);
  height:clamp(9px,1.5vw,18px);transform:translateX(-50%);border-radius:50%/70% 70% 100% 100%;
  background:linear-gradient(#d7dce0,#aab3ba 60%,#8e979f)}
.raton{position:absolute;right:2%;bottom:calc(clamp(9px,1.5vw,18px) - 2px);width:clamp(22px,2.6%,34px);
  aspect-ratio:.62;border-radius:50%/38% 38% 62% 62%;background:linear-gradient(#f2f5f7,#cfd6db 65%,#aeb7be);
  box-shadow:0 0 0 1px rgba(18,39,51,.10),0 6px 10px rgba(18,39,51,.18)}
.raton::before{content:"";position:absolute;left:50%;top:9%;width:9%;height:26%;transform:translateX(-50%);
  border-radius:99px;background:#c3cbd1}
.oscuro .raton{background:linear-gradient(#40505c,#27333c 65%,#1b242b);box-shadow:0 0 0 1px rgba(255,255,255,.10)}
.oscuro .escritorio .base::before{background:linear-gradient(90deg,#39464f,#5c6a74 45%,#333f47)}
.oscuro .escritorio .base::after{background:linear-gradient(#44525c,#2c383f 60%,#1f292f)}

/* Tableta: marco parejo y esquinas muy redondeadas, sin peana. La lleva
   quell101, que se usa de pie en la obra. */
.tableta{padding:0 22%}
.tableta .pantalla{border-radius:clamp(12px,2.2vw,26px);
  padding:clamp(10px,2.6%,26px) clamp(10px,2.6%,26px) clamp(10px,2.6%,26px)}
.tableta .pantalla::before{top:clamp(4px,1%,11px)}
.tableta .base{display:none}
@media(max-width:900px){.tableta{padding:0 8%}}

/* Las altas van sueltas: angostas y con esquina redonda. */
.suelta{max-width:520px;margin:0 auto}
.suelta img{border-radius:14px;box-shadow:0 0 0 1px rgba(18,39,51,.07),0 22px 60px rgba(18,39,51,.14)}
/* En el celular el equipo se deja un poco más ancho que la pantalla: el marco
   se ve entero y sólo se cortan las puntas de la peana. Nunca se estira. */
@media(max-width:640px){.mosaico .laptop:not(.escritorio):not(.tableta),
  .principal .laptop:not(.escritorio):not(.tableta),
  .vista .laptop:not(.escritorio):not(.tableta){width:114%;max-width:none;margin-left:-7%}
  .escritorio{padding:0 1%}.tableta{padding:0 6%}}

/* Pantalla de arranque. nest101 y draw101 son programas que se instalan: al
   entrar a la pantalla se ve su arranque y, al seguir bajando, funde a la
   captura. */
.splash{position:absolute;inset:0;margin:clamp(8px,1.7%,20px);margin-bottom:clamp(16px,3.2%,38px);
  border-radius:3px;background:var(--tinta);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6%;overflow:hidden}
.splash svg{width:34%;height:auto;fill:var(--claro)}
.splash .carga{width:26%;height:3px;border-radius:99px;background:rgba(255,255,255,.16);overflow:hidden}
.splash .carga i{display:block;height:100%;width:100%;border-radius:99px;background:var(--claro);
  transform-origin:left;transform:scaleX(var(--carga,1))}

/* El de draw101 es el de verdad: su electron/cargando.html, que no es una
   imagen sino un plano de cocina que el programa traza solo mientras arranca
   el motor. Aquí se traza con el scroll en vez de con el reloj. Mismos trazos,
   mismas cotas, mismo rótulo y los colores de core/config.py. El fondo es
   claro porque en el programa la ventana es transparente y se ve el
   escritorio. */
.splash.plano{background:linear-gradient(#e9eff3,#dbe4ea);gap:0}
.splash.plano .escena{position:absolute;inset:0;perspective:1100px;perspective-origin:50% 38%}
.splash.plano .hoja3d{position:absolute;left:50%;top:50%;width:88%;aspect-ratio:620/420;
  transform:translate(-50%,-52%) rotateX(56deg) rotateZ(-16deg) scale(.92);
  filter:drop-shadow(0 5% 4% rgba(18,39,51,.28))}
.splash.plano .hoja3d svg{width:100%;height:auto;fill:none;overflow:visible}
.splash.plano .marca-arr{position:relative;text-align:center;padding:4% 8%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,255,255,.96) 45%,rgba(255,255,255,0) 100%)}
.splash.plano .marca-arr svg{width:42%;margin:0 auto;fill:var(--azul)}
.splash.plano .sub{margin-top:4%;font-size:clamp(7px,1.05%,13px);letter-spacing:.18em;
  text-transform:uppercase;color:var(--tinta);opacity:.75}
.splash.plano .estado{margin-top:3%;font-size:clamp(7px,1.05%,13px);color:var(--azul);opacity:.9}
/* Los trazos se van dibujando con el avance, escalonados como en el programa. */
.mueve .splash.plano .traza{stroke-dasharray:1400}
.mueve .splash.plano .t1{stroke-dashoffset:calc(1400 * (1 - clamp(0,var(--p,1) / .22,1)))}
.mueve .splash.plano .t2{stroke-dashoffset:calc(1400 * (1 - clamp(0,(var(--p,1) - .12) / .22,1)))}
.mueve .splash.plano .t3{stroke-dashoffset:calc(1400 * (1 - clamp(0,(var(--p,1) - .24) / .22,1)))}
.mueve .splash.plano .t4{stroke-dashoffset:calc(1400 * (1 - clamp(0,(var(--p,1) - .34) / .22,1)))}
.mueve .splash.plano .aparece{opacity:clamp(0,(var(--p,1) - .42) * 5,1)}

/* El de nest101, también el de verdad: su electron/splash.html dibuja el
   gabinete en isométrico y lo despieza. Aquí el despiece avanza con el scroll.
   Fondo claro por lo mismo que en draw101: allá la ventana es transparente. */
.splash.despiece{background:linear-gradient(#e6ecf1,#cfd8e0);gap:0}
.splash.despiece canvas{position:absolute;inset:0;width:100%;height:100%;
  filter:drop-shadow(0 2% 2% rgba(18,39,51,.38)) contrast(1.06)}
.splash.despiece .marca-arr{position:relative;text-align:center;padding:3% 7%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,255,255,.88) 40%,rgba(255,255,255,0) 100%)}
.splash.despiece .marca-arr svg{width:40%;margin:0 auto;fill:var(--azul)}
.splash.despiece .carga{width:52%;margin:6% auto 0;background:rgba(23,27,33,.18)}
.splash.despiece .carga i{background:var(--azul)}
.splash.despiece .estado{margin-top:3%;font-size:clamp(7px,1.05%,13px);color:#39424e}

/* ------------------------------------------------------------- movimiento
   Sólo si movimiento.js corrió (pone .mueve) y el sistema no pide menos
   movimiento. --p va de 0 a 1 mientras la pieza entra a la pantalla, y cada
   equipo entra distinto para que el recorrido no se sienta repetido. */
@media(prefers-reduced-motion:no-preference){
  .mueve [data-mueve]{will-change:transform,opacity;opacity:calc(.3 + .7 * var(--p,1))}
  .mueve .e-sube{transform:translateY(calc((1 - var(--p,1)) * 70px)) scale(calc(.92 + .08 * var(--p,1)))}
  .mueve .e-izq{transform:translate(calc((1 - var(--p,1)) * -80px),calc((1 - var(--p,1)) * 26px))
    rotate(calc((1 - var(--p,1)) * -2.5deg))}
  .mueve .e-der{transform:translate(calc((1 - var(--p,1)) * 80px),calc((1 - var(--p,1)) * 26px))
    rotate(calc((1 - var(--p,1)) * 2.5deg))}
  .mueve .e-zoom{transform:scale(calc(.74 + .26 * var(--p,1)))}
  .mueve .e-endereza{transform:perspective(1400px) rotateX(calc((1 - var(--p,1)) * 13deg))
    translateY(calc((1 - var(--p,1)) * 30px));transform-origin:50% 100%}
  /* La pantalla enciende, y donde hay arranque el splash se va y entra la captura. */
  .mueve .enciende .pantalla img{opacity:clamp(0,calc((var(--p,1) - .4) * 1.7),1)}
  .mueve .arranca .pantalla img{opacity:clamp(0,calc((var(--p,1) - .5) * 2.6),1)}
  .mueve .arranca .splash{opacity:clamp(0,calc((.72 - var(--p,1)) * 4),1)}
  /* El cursor del monitor cruza la pantalla mientras se baja. */
  .mueve .escritorio .raton{transform:translateX(calc(var(--p,1) * -26px))}
}

/* ----------------------------------------------------- planos de fondo
   Trazos de plano en azul claro, en tres capas que se mueven a distinta
   velocidad con el scroll: retícula al fondo, cotas en medio y el alzado de
   un mueble al frente. Los dibuja el CSS (SVG en la propia hoja, sin
   archivos ni peticiones) y los coloca movimiento.js sección por sección. */
.planos{position:absolute;inset:-14% 0;z-index:0;pointer-events:none;overflow:hidden;opacity:.55;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cpath d='M0 .5H160M.5 0V160' fill='none' stroke='%230080C1' stroke-opacity='.20'/%3E%3C/svg%3E");
  transform:translate3d(0,calc(var(--y,0) * 16px),0)}
.planos::before,.planos::after{content:"";position:absolute;inset:0;background-repeat:repeat}
.planos::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='460' height='320'%3E%3Cg fill='none' stroke='%230080C1' stroke-opacity='.30'%3E%3Cpath d='M60 60v-26M300 60v-26M60 47h240M54 41l6 6-6 6M306 41l-6 6 6 6'/%3E%3Cpath d='M392 96v180M379 96h26M379 276h26M386 90l6-6 6 6M386 282l6 6 6-6' stroke-opacity='.22'/%3E%3Cpath d='M60 120h150v96H60z' stroke-opacity='.24'/%3E%3Cpath d='M60 168h150M135 120v96' stroke-opacity='.30'/%3E%3C/g%3E%3C/svg%3E");
  background-position:0 0;transform:translate3d(0,calc(var(--y,0) * 44px),0)}
.planos::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='680' height='520'%3E%3Cg fill='none' stroke='%230080C1' stroke-opacity='.30'%3E%3Ccircle cx='150' cy='150' r='64'/%3E%3Ccircle cx='150' cy='150' r='30' stroke-opacity='.20'/%3E%3Cpath d='M150 62v176M62 150h176' stroke-opacity='.30' stroke-dasharray='10 7'/%3E%3Cpath d='M420 300h210v150H420z'/%3E%3Cpath d='M420 350h210M525 350v100M455 372h20M560 372h20' stroke-opacity='.22'/%3E%3Cpath d='M300 430a70 70 0 0 1 70-70' stroke-opacity='.24'/%3E%3C/g%3E%3C/svg%3E");
  background-position:120px 40px;transform:translate3d(0,calc(var(--y,0) * 88px),0)}
.oscuro .planos{filter:brightness(2.1)}
/* El contenido va encima de los planos. El :not() importa: sin él, esta misma
   regla le quitaba a .planos su position:absolute y el fondo se quedaba sin
   alto, invisible. */
.mosaico > *:not(.planos),.vista > *:not(.planos),.encajan > *:not(.planos),
.cierre > *:not(.planos),.bloque > *:not(.planos),.intro > *:not(.planos){position:relative;z-index:1}
.mosaico,.vista,.encajan,.cierre,.bloque,.intro{position:relative;overflow:hidden}

/* Cómo encajan: es una secuencia de verdad (el orden en que el mueble pasa por
   el taller), por eso va unida por una línea. */
.encajan{background-color:var(--tinta);color:#fff;text-align:left;padding:104px 0}
.grande{font-size:clamp(32px,4.6vw,56px);line-height:1.06;letter-spacing:-.02em;font-weight:700;
  max-width:17ch;margin:0}
/* Los siete, uno por renglón, numerados: el número en el acento, el logotipo
   en grande y la frase a la derecha, separados por una línea fina. Es la
   rejilla 01–07 de bitnomial.com, con nuestros programas y en el orden en que
   el mueble pasa por el taller. El número lo pone el CSS —el HTML no cambia—
   con un contador y dos dígitos. */
.cadena{counter-reset:paso;margin-top:56px;border-top:1px solid rgba(255,255,255,.16)}
.eslabon{display:grid;grid-template-columns:3.2rem minmax(0,1fr) minmax(0,1.1fr);
  align-items:center;gap:0 clamp(16px,3vw,44px);padding:26px 0;
  border-bottom:1px solid rgba(255,255,255,.16);font-size:15px;color:var(--en-oscuro);line-height:1.45}
.eslabon::before{counter-increment:paso;content:counter(paso,decimal-leading-zero);
  font-size:14px;letter-spacing:.1em;color:var(--acento)}
.eslabon svg{display:block;height:clamp(38px,4.4vw,60px);width:auto;margin:0;fill:#fff}
/* En el celular no hay ancho para tres columnas. Y la frase de cada renglón es
   texto suelto dentro del .eslabon, sin etiqueta propia: en rejilla caía en la
   columna del número, de 2.6rem, y salía una palabra por renglón. Por eso aquí
   el renglón deja de ser rejilla: número y logotipo en línea, y la frase
   debajo, como párrafo. */
@media(max-width:760px){.eslabon{display:block;padding:20px 0}
  .eslabon::before{display:inline-block;margin-right:12px;vertical-align:middle}
  .eslabon svg{display:inline-block;vertical-align:middle;height:36px;margin:0 14px 10px 0}}

/* Cierre y pie */
.cierre{text-align:left;padding:96px 0}
.cierre.nube{background-color:var(--nube)}
.cierre .baja{max-width:40ch}
footer{background-color:var(--nube);background-image:var(--rejilla);border-top:1px solid var(--linea);font-size:12.5px;color:var(--gris);padding:30px 0 34px}
footer .cols{display:flex;flex-wrap:wrap;gap:22px 64px}
footer h3{font-size:12.5px;font-weight:700;color:var(--tinta);margin-bottom:8px}
footer ul{list-style:none}
footer li{margin:5px 0}
footer a{text-decoration:none}
footer a:hover{text-decoration:underline;color:var(--tinta)}
footer .firma{margin-top:24px;padding-top:14px;border-top:1px solid var(--linea);display:flex;
  flex-wrap:wrap;justify-content:space-between;gap:8px}

/* Página de cada programa */
.tapa{text-align:left;padding:88px 0 0}
.tapa .nombre svg{height:clamp(68px,7.6vw,96px)}
.tapa h1{font-size:clamp(36px,5.4vw,64px);line-height:1.06;letter-spacing:-.02em;font-weight:700;
  max-width:17ch;margin:22px 0 0}
.principal{max-width:1280px;margin:48px auto 0;padding:0 3vw;overflow:hidden}
.principal figcaption{font-size:14px;color:var(--gris);margin-top:14px}
.intro{padding:64px 0 60px}
.intro p{font-size:clamp(21px,2.3vw,27px);line-height:1.42;font-weight:600;color:var(--tinta)}
.bloque{padding:72px 0}
.bloque.nube{background-color:var(--nube)}
.bloque h2{font-size:clamp(30px,4vw,48px);line-height:1.08;letter-spacing:-.018em;font-weight:700;text-align:left}
.ventajas{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 36px;margin-top:52px}
.ventajas b{display:block;font-size:20px;line-height:1.25;margin-bottom:8px}
.ventajas p{color:var(--gris);font-size:16px;line-height:1.5}
@media(max-width:900px){.ventajas{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.ventajas{grid-template-columns:1fr;gap:30px}}
/* Una pantalla por sección, grande, con su frase encima: así recorre Apple
   una página de producto. Fondo alterno para que se sienta el paso. */
.vista{text-align:left;padding:72px 3vw 76px;overflow:hidden}
.vista.nube{background-color:var(--nube)}
.vista h2{font-size:clamp(24px,3vw,38px);line-height:1.15;letter-spacing:-.015em;font-weight:700;
  max-width:26ch;margin:0 auto 0 max(3vw,calc((100% - 1180px) / 2))}
.vista .laptop,.vista .suelta{margin-top:30px}
.funciones{display:grid;grid-template-columns:repeat(3,1fr);gap:0 36px;margin-top:44px}
.funciones div{border-top:1px solid var(--linea);padding:14px 0 16px;font-size:15px;color:var(--gris);line-height:1.45}
.funciones b{display:block;color:var(--tinta);font-size:16px;margin-bottom:2px}
@media(max-width:900px){.funciones{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.funciones{grid-template-columns:1fr}}
.ficha{display:grid;grid-template-columns:repeat(4,1fr);gap:22px 30px;margin-top:56px;padding-top:26px;
  border-top:1px solid var(--tinta)}
.ficha span{display:block;font-size:13px;color:var(--gris);margin-bottom:4px}
.ficha b{font-size:16px;font-weight:600;line-height:1.35}
@media(max-width:760px){.ficha{grid-template-columns:1fr 1fr}}
.nohace{margin-top:64px}
.nohace h3{font-size:21px}
.nohace p.nota{color:var(--gris);font-size:15px;margin-top:4px}
.nohace .funciones{margin-top:18px;grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.nohace .funciones{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.nohace .funciones{grid-template-columns:1fr}}
/* En el celular las dos píldoras caben lado a lado, como en Apple. */
@media(max-width:600px){.hero .btn,.mosaico .btn{font-size:15px;padding:9px 16px}.acciones{gap:10px}}
@media(max-width:600px){.hero,.tapa{padding-top:52px}.mosaico{padding-top:48px}
  .intro,.bloque,.encajan,.cierre{padding:64px 0}.barra nav{gap:15px}.barra nav a{font-size:12.5px}}
/* Los logotipos crecieron el 13-sep a petición de Mike. En el celular se dejan
   un punto más chicos: con 38 px, el de la suite y los tres enlaces del menú
   ya no caben en un renglón de 320. */
@media(max-width:600px){.marca svg{height:30px}.subbarra svg{height:27px}
  .barra .env,.subbarra .env{height:56px}.subbarra{top:56px}}