/* ============================================================
   Sekondo — hoja de estilo única
   Base clara. El negro se reserva para las secciones fuertes.
   Sin dependencias externas: ni fuentes de Google (RGPD) ni CDN.
   ============================================================ */

/* Satoshi, la tipografía de la marca, alojada aquí (nada de Google Fonts ni Fontshare).
   Tres pesos: Medium para el texto, Black para TODOS los titulares (h1 a h4) y Bold para
   destacar dentro de un párrafo (decisión de Jose, 13/09/2026).
   Regular (400) solo para el subtítulo del hero, blanco sobre foto, donde el Medium pesa demasiado
   (decisión de Jose, 14/09/2026). Light está cargada, pero SOLO se usa donde Jose la pida
   (16/09/2026: las etiquetas numeradas de la biografía). Si no la ha pedido, no se usa.
   La norma al escribir: una negrita por sección, la frase que carga el argumento.
   Mucha negrita es un coñazo y deja de destacar nada. */
@font-face{font-family:"Satoshi";src:url("../fonts/satoshi-light.otf") format("opentype");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Satoshi";src:url("../fonts/satoshi-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Satoshi";src:url("../fonts/satoshi-medium.otf") format("opentype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Satoshi";src:url("../fonts/satoshi-bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Satoshi";src:url("../fonts/satoshi-black.otf") format("opentype");font-weight:900;font-style:normal;font-display:swap}

/* La web es solo clara. Sin esto, el modo oscuro de muchos móviles (Chrome Android, Samsung,
   y el navegador de dentro de Facebook, Instagram y la app de Google) la oscurece por su cuenta:
   por el SK calado del logo se veía el fondo oscurecido y el disco salía todo negro. 25/09/2026. */
:root{color-scheme:only light}
:root{
  --bg:#FFFFFF;
  --bg-alt:#DCE8EE;          /* Apoyo — el gris de la marca.
                                Probado el 15/09/2026 a #EEF0F2, mas claro y menos azul, y
                                Jose lo devolvio: «se ha quedado demasiado plano». Se queda
                                el de la paleta. No volver a tocarlo sin verlo en pantalla. */
  --ink:#000000;             /* Negro de marca */
  --ink-2:#4F4F54;           /* gris de texto sobre blanco (Jose, 14/09/2026) */
  --ink-3:#86868B;
  --line:#D2D2D7;
  --line-2:#C7C7CC;
  --accent:#0071E3;
  --accent-ink:#005AB6;
  --accent-soft:#E2F0FC;
  --accent-claro:#6FAEF5;    /* Azul claro, en la paleta desde el 16/09/2026. Se usa SOLO
                                donde Jose lo diga, cada vez. */
  --dark:#081F35;            /* Marino — fondos de seccion fuertes */
  --dark-2:#0F1421;          /* Negro azulado — banners que llevaran foto */
  --dark-line:#1C3A55;       /* filete sobre marino */
  --dark-ink:#FFFFFF;        /* texto sobre oscuro */
  --dark-ink-2:#DCE8EE;      /* Apoyo: texto secundario sobre oscuro */
  --ok:#54E0B4;              /* Destacado — botones, etiquetas y estados */
  --aviso:#E8A33D;           /* Cobre — el estado del documento que TE MANDAN, no un error
                                nuestro. Jose, 15/09/2026: «en rojo vamos muy fuerte; un
                                colorcito de alarma que no sea rojo, a lo mejor un cobre».
                                Solo se usa en la consola de la portada. */
  --ok-ink:#000000;   /* NEGRO PURO: en los botones verdes el texto va SIEMPRE en negro (Jose, 16/09/2026) */          /* el texto que va encima del destacado */
  /* ---- La escala tipografica. Los siete niveles de Jose (14/09/2026) con su valor
     en cada tramo (18/09/2026). Si un tamano no esta aqui, no se usa.
     Las excepciones se declaran donde estan y se listan en
     Codigo/auditoria-18-09-2026/tipografia.md.
     NORMA: no se escribe font-size con clamp(), vw ni pixeles; solo con var(--t-...).
     Si hace falta un tamano nuevo, se anade aqui viendolo con Jose, con su valor
     en los tres tramos. ---- */
  --t-etiqueta:14px;      /* ETIQUETA / ladillo: eyebrow, ribbon, h4 del pie, th. Bold, mayusculas, +.13em */
  --t-pequeno:16px;       /* PEQUENO: pie, legal, chips, tablas, formularios, notas, boton. Medium */
  --t-cuerpo:18px;        /* CUERPO: texto corrido y boton grande. Medium (Regular sobre oscuro) */
  --t-entradilla:18.4px;  /* ENTRADILLA: el parrafo que abre una seccion. Desde el 18/09/2026, del mismo tamano que la frase de la portada (Jose: «los textos de parrafo tan grandes son muy ordinarios»). Medium */
  --t-cierre:27.2px;      /* H3 (titulo chico, Black, 1.08, -.01em) y CIERRE (frase de remate, Bold, -.02em) */
  --t-titular:49.6px;     /* H2, titulo grande. Black, 1.08, -.01em */
  --t-display:54.4px;     /* H1, cabeceras interiores. Black, 1.08, -.01em */
  --il-titular:1.08;      /* interlineado de los titulos; el texto va a «normal» (Jose, 15/09/2026) */
  --sec:66px;             /* margen arriba y abajo de TODA seccion (Jose, 14/09/2026) */
  --sec-movil:50px;
  --radius:18px;
  --radius-s:12px;
  --maxw:1208px;          /* 1112 de contenido + 48 de margen exterior a cada lado */
  --font:"Satoshi",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --shadow:0 1px 2px rgba(29,29,31,.04),0 8px 26px rgba(29,29,31,.07);
  --shadow-lg:0 2px 6px rgba(29,29,31,.05),0 24px 60px rgba(29,29,31,.14);
}
/* Los tres tramos de la escala: los mismos que usan las bandas. Solo baja la parte alta;
   cuerpo, entradilla, pequeno y etiqueta no cambian (Jose, 14/09/2026: «el cuerpo de texto
   NO se toca, que en el telefono se lee peor, no mejor»). */
@media (max-width:1068px){:root{--t-cierre:24px;--t-titular:34px;--t-display:44px}}
@media (max-width:734px){:root{--t-cierre:24px;--t-titular:28px;--t-display:36px}}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);overflow-x:hidden;
  font-family:var(--font);font-size:var(--t-cuerpo);line-height:normal;font-weight:500;
  /* «normal» = el automatico del navegador, el equivalente al 0 de InDesign.
     Venia de 1,6, paso por 1,5 y Jose pidio automatico. 15/09/2026. */
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
/* Un h2 que hace de remate dentro de un bloque, no de titular de seccion */
.h-cierre{font-size:var(--t-cierre);margin:6px 0 10px}
h1,h2,h3,h4{line-height:1.08;overflow-wrap:break-word;margin:0 0 .5em;letter-spacing:-.01em;font-weight:900}
h1{font-size:var(--t-display)}
h2{font-size:var(--t-titular)}
h3{font-size:var(--t-cierre)}   /* H3 = 27,2 / 24 / 24: nunca el tamano de la entradilla (18/09/2026) */
p{margin:0 0 1em}
/* El contenido va centrado y con margen exterior a los dos lados. El ancho util
   sigue siendo 1112 px: se ha subido el maximo para compensar el margen nuevo,
   asi que ni las medidas de los banners ni la maqueta se mueven. Jose, 15/09/2026. */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 48px}
@media (max-width:734px){.wrap{padding:0 24px}}   /* en el telefono, 48 se come la pagina */
.center{text-align:left}   /* Una sola alineacion en toda la web: a la izquierda. */
.muted{color:var(--ink-2)}
.small{font-size:var(--t-pequeno)}
/* .tiny (14 px) se borro el 18/09/2026: las marcas de Adobe del pie son texto legal, no etiqueta, y van a .small. */

/* ---------- Cabecera ---------- */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;gap:28px;height:66px}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:var(--t-cuerpo);letter-spacing:-.025em}
.brand img{display:block;height:47px;width:auto}   /* 36 -> 47: un 30 % mas grande, arriba y en el pie. Jose, 15/09/2026 */
.brand-pie{color:var(--ink-2)}
.nav-links{display:flex;gap:28px;margin-left:auto}
.nav-links a{color:var(--ink-2);font-size:var(--t-pequeno);transition:color .15s}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-cta{display:flex;gap:10px;align-items:center}
.nav-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--line-2);color:var(--ink);
  border-radius:9px;padding:7px 10px;font-size:var(--t-pequeno);cursor:pointer}
/* Selector de idioma: dos banderas, la activa marcada */
.langsw{display:flex;align-items:center;gap:2px;padding:3px;border-radius:999px;background:var(--bg-alt)}
.lg{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;
  transition:background .15s,opacity .15s}
.lg svg{width:22px;height:15px;border-radius:2px;display:block;flex:none;box-shadow:0 0 0 1px rgba(18,19,26,.12)}
a.lg{opacity:.5}
a.lg:hover{opacity:1}
.lg.on{background:#fff;color:var(--ink);box-shadow:var(--shadow)}


/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 24px;border-radius:999px;font-weight:700;font-size:var(--t-pequeno);
  border:1px solid transparent;cursor:pointer;transition:background .15s,border-color .15s,color .15s;
  white-space:nowrap;
}
.btn-primary{background:var(--ok);border-color:var(--ok);color:var(--ok-ink)}
.btn-primary:hover{background:#3ECFA0;border-color:#3ECFA0;color:var(--ok-ink)}
.btn-azul{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-azul:hover{background:var(--accent-ink);border-color:var(--accent-ink);color:#fff}
.btn-ghost{border-color:var(--line-2);color:var(--ink);background:#fff}
.btn-ghost:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.btn-sm{padding:9px 17px}
.btn-block{width:100%}
.btn-lg{padding:16px 32px;font-size:var(--t-cuerpo)}
.on-dark .btn-ghost{background:transparent;border-color:var(--dark-line);color:var(--dark-ink)}
.on-dark .btn-ghost:hover{background:#fff;border-color:#fff;color:var(--ink)}

/* ---------- Secciones ---------- */
section{padding:var(--sec) 0}
.section-head{max-width:none;margin:0 0 22px;text-align:left}
.section-head.left{margin-left:0;margin-right:auto;text-align:left}
.eyebrow{
  display:inline-block;font-size:var(--t-etiqueta);font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent);margin-bottom:14px;
}
.lead{font-size:var(--t-entradilla);color:var(--ink-2)}

/* Secciones oscuras: el recurso fuerte, no el fondo por defecto */
.on-dark{background:var(--dark);color:var(--dark-ink)}
.on-dark .eyebrow{color:var(--ok)}
.on-dark .lead,.on-dark .muted{color:var(--dark-ink-2)}
.on-dark .card{background:var(--dark-2);border:1px solid var(--dark-line);color:var(--dark-ink);box-shadow:none}
/* LAS TRES RAZONES de «Una licencia. Toda la suite.». Eran tarjetas grises sobre el azul
   marino y Jose las tiró el 16/09/2026: «unos banners grises con un texto en blanco, feo de
   narices». Un filete fino entre una y otra separa igual y no mete una caja de más. */
.razones{display:flex;flex-direction:column}
.razon{padding:22px 0;border-top:1px solid var(--dark-line)}
.razon:first-child{border-top:none;padding-top:0}
.razon h3{font-size:var(--t-cierre);margin-bottom:.35em}
.razon p{color:var(--dark-ink-2);font-size:var(--t-pequeno);margin:0}
/* El precio, dentro de esa misma sección: el número manda y el tachado dice de dónde viene. */
.precio-home{display:flex;align-items:baseline;gap:12px;margin:26px 0 6px;flex-wrap:wrap}
.precio-home .antes{font-size:var(--t-entradilla);font-weight:700;color:var(--dark-ink-2);text-decoration:line-through;text-decoration-thickness:2px}
.precio-home strong{font-size:var(--t-display);font-weight:900;line-height:1;letter-spacing:-.02em;color:#fff}
.precio-home .per{font-size:var(--t-pequeno);color:var(--dark-ink-2)}
.precio-pie{margin:0 0 18px;font-weight:900;color:var(--ok)}
.on-dark .card p{color:var(--dark-ink-2)}

/* ---------- Portada ---------- */
.hero{position:relative;overflow:hidden;background:var(--bg)}
.hero-inner{max-width:none}
.hero h1{margin-bottom:.32em}
.hero .lead{font-size:var(--t-entradilla);max-width:none;margin-bottom:34px;color:var(--ink-2)}
/* NORMA DE LA WEB (Jose, 13/09/2026): un solo margen izquierdo en toda la pagina.
   Todo el texto alineado a la izquierda, arrancando en el margen del .wrap, y al 100 %
   del ancho de su contenedor. Nada de columnas centradas ni de max-width sueltos:
   eso era lo que daba seis sangrados distintos en la misma pagina. */
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-note{margin-top:20px;font-size:var(--t-pequeno);color:var(--ink-3)}
.pill{
  display:inline-flex;align-items:center;gap:9px;padding:7px 15px;border-radius:999px;
  border:1px solid var(--line-2);background:#fff;font-size:var(--t-pequeno);color:var(--ink-2);margin-bottom:26px;
  vertical-align:top;
}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--ok)}
/* La píldora subió al hero de la foto el 15/09/2026 (antes tenía una sección propia con 166 px
   de blanco para una línea). Sobre la foto va en cristal, no en blanco opaco. */
.hero-foto .pill{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.28);color:#fff;margin-bottom:22px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.hero-foto .pill{animation:fadeUp .75s cubic-bezier(.16,.84,.44,1) both}

/* ---------- Tira de apps ---------- */
/* La tira de aplicaciones, invertida el 15/09/2026 por Jose: «el fondo en azul
   marino y los botones en el color gris». Antes era al reves —tira gris y
   pastillas negras— y se comia el salto entre la cabecera oscura y el primer
   bloque blanco.
   Marino y no negro, corregido por el mismo acto seguido: la seccion de debajo
   es blanca y la siguiente ya es marino, asi que la tira anuncia el color que
   viene en vez de meter un negro que no vuelve a salir.
   Sin filetes: el propio marino hace de separacion. */
.appstrip{background:var(--dark);padding:16px 0}
.appstrip .chip{background:var(--bg-alt);border-color:var(--bg-alt);color:var(--ink)}
.appstrip .label{color:var(--ink-3)}
/* Las seis pastillas, JUSTIFICADAS al ancho del contenedor (1112 px). Rejilla de
   seis columnas iguales: todas miden lo mismo —lo que mide la mas larga, que es
   «Lightroom Classic»— y los huecos se reparten solos. Alineadas a los dos bordes,
   como una linea justificada. Jose, 15/09/2026.
   En tableta bajan a tres columnas y en telefono a dos: con seis no cabrian y
   «Lightroom Classic» se partiria en dos lineas. */
.appstrip-inner{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;align-items:center}
.appstrip .chip{justify-content:center;text-align:center;padding-inline:10px;white-space:nowrap}
.appstrip .label{color:var(--ink-3);font-size:var(--t-pequeno);margin-right:10px}
.chip{
  display:inline-flex;align-items:center;padding:9px 18px;border-radius:999px;
  border:1px solid var(--ink);background:var(--ink);font-size:var(--t-pequeno);color:#fff;font-weight:700;
}
.chip .tag{font-size:var(--t-etiqueta);letter-spacing:.13em;text-transform:uppercase;color:var(--ok);font-weight:700}
.on-dark .chip{background:var(--dark-2);border-color:var(--dark-line);color:var(--dark-ink)}

/* ---------- Rejillas y tarjetas ---------- */
.grid{display:grid;gap:24px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}

.card{
  background:var(--bg-alt);border:0;border-radius:var(--radius);
  padding:30px;
}
/* En secciones grises, las tarjetas van en blanco */
.alt{background:var(--bg-alt)}
.alt .eyebrow{color:var(--accent-ink)}   /* 5,36:1 sobre el gris; el azul de marca solo da 3,77:1 */
.alt .card,.alt .price-card,.alt .table-wrap,.alt .toggle{background:#fff}
.alt .chip{background:var(--ink)}
.alt .card.flat{background:#fff}
/* Las tarjetas no son enlaces: no se mueven al pasar por encima */
.card h3{margin-bottom:.4em}
.card p:last-child{margin-bottom:0}
/* El icono de la tarjeta. Sobre claro: circulo verde e icono marino.
   Sobre oscuro se invierte y lleva su aro, como en el manual. */
.card-ico{
  background:#fff;border:0;box-shadow:none;
  position:relative;padding-top:52px;overflow:visible;
}
/* EL CÍRCULO DEL ICONO · y la norma del verde, 16/09/2026.
   Tenía el fondo en var(--bg-alt), que es EXACTAMENTE el color de una sección .alt: sobre gris
   desaparecía y solo se veía el icono flotando. Se probó en verde y Jose lo tiró en el acto:
   «si los pones en verde le quitan protagonismo a los botones. El verde nuestro es el color de
   acento: tiene que aparecer poquito, y donde haya que pinchar».
   NORMA: el verde es SOLO para los botones y para el texto que no se puede perder —el precio
   congelado, las doscientas plazas—. Nada decorativo va en verde.
   Así que el círculo va en azul marino con el icono en blanco, y su filete blanco lo despega
   del blanco de la tarjeta y del gris de la sección. Uno solo sirve para los tres fondos. */
.card.card-ico .ico{
  position:absolute;top:-36px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;justify-content:center;width:72px;height:72px;
  box-sizing:border-box;
  border-radius:50%;background:var(--dark);color:#fff;border:3px solid #fff;
}
.card.card-ico .ico svg{display:block;width:34px;height:34px}
/* El icono sobresale 36 px por encima de su tarjeta. Sin reservarle ese hueco se montaba
   sobre la entradilla de la sección y sobre la fila de arriba. */
.grid.con-iconos{margin-top:62px;row-gap:70px}
/* Sobre oscuro se invierte, como en el manual: aro y trazo en verde */
/* Sobre marino: la tarjeta se queda BLANCA (el patron del manual) y el circulo
   pasa a verde con el icono en marino, que es lo unico que recorta sobre el fondo. */
.on-dark .card.card-ico,.plantilla .card.card-ico{
  background:#fff;color:var(--ink);border:0;box-shadow:var(--shadow-lg);
}
.on-dark .card.card-ico h3,.plantilla .card.card-ico h3{color:var(--ink)}
.on-dark .card.card-ico p,.plantilla .card.card-ico p{color:var(--ink-2)}
/* Sobre marino el círculo es el mismo: marino con icono blanco. Lo que lo separa del fondo
   es su filete blanco, que ahí hace todo el trabajo. Antes iba en verde y eso le robaba el
   acento a los botones. */
.on-dark .card.card-ico .ico,.plantilla .card.card-ico .ico{
  background:var(--dark);color:#fff;border-color:#fff;
}
.card .num{
  display:block;font-size:var(--t-titular);font-weight:400;line-height:1;letter-spacing:-.02em;   /* las cifras van al H2 (decision 0.2, 18/09/2026) */
  color:var(--accent);margin-bottom:16px;
}
.card .ico{font-size:var(--t-cierre);margin-bottom:14px;display:block;line-height:1}
.card.flat{box-shadow:none;background:var(--bg-alt)}

/* ---------- Demo / vídeo ---------- */
.videoframe{
  position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:16/9;
  background:#000;
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;
  text-align:center;padding:24px;box-shadow:var(--shadow-lg);
}
.videoframe .play{
  width:66px;height:66px;border-radius:50%;flex:none;background:#fff;
  display:flex;align-items:center;justify-content:center;color:var(--ink);font-size:var(--t-cuerpo);
}
.videoframe .ph{color:#86868B;font-size:var(--t-pequeno)}
/* Cuando el marco lleva vídeo de verdad, éste lo ocupa entero: sin relleno ni centrado */
.videoframe:has(.demo){padding:0}
.videoframe .demo{width:100%;height:100%;object-fit:cover;display:block;background:#000}

/* ---------- Terminal decorativa ---------- */
.term{
  background:#000;border:1px solid var(--dark-line);border-radius:var(--radius);overflow:hidden;
  font-family:var(--mono);font-size:var(--t-pequeno);line-height:1.8;box-shadow:var(--shadow-lg);
}
.term-bar{display:flex;align-items:center;gap:7px;padding:10px 13px 10px 17px;border-bottom:1px solid var(--dark-line);background:#1D1D1F}
.term-bar i{width:11px;height:11px;border-radius:50%;background:#48484A;display:block}
/* Pasar los ejemplos a mano, por si alguien quiere pararse a leer */
.term-nav{margin-left:auto;display:flex;gap:4px}
.term-nav button{
  display:flex;align-items:center;justify-content:center;width:28px;height:28px;
  border:0;border-radius:8px;background:transparent;color:var(--dark-ink-2);
  cursor:pointer;padding:0;transition:background .15s,color .15s;
}
.term-nav button:hover{background:rgba(255,255,255,.10);color:#fff}
.term-nav button:focus-visible{outline:2px solid var(--ok);outline-offset:2px}
.term-body{padding:20px 22px;color:var(--dark-ink-2);white-space:pre-wrap;margin:0}
/* El rotulo de cada escena: la aplicacion y lo que te quita de encima */
.term-body .app{display:block;font-family:var(--font);font-weight:400;font-size:var(--t-entradilla);
  line-height:var(--il-titular);letter-spacing:-.01em;color:var(--ok);margin:0 0 18px;white-space:normal}
.term-body .app b{color:inherit;font-weight:900}
.term-body .u{color:#fff;display:block;font-family:var(--font);font-weight:700;
  font-size:var(--t-cuerpo);white-space:normal;margin-bottom:16px}
.term-body .u::before{content:none}
/* El aire va ENTRE pasos, no dentro de un paso. Antes heredaban el 1.8 de .term
   y una linea partida se separaba tanto de su propia continuacion como del paso
   siguiente: no se sabia donde acababa cada uno. Interlineado automatico dentro
   y un espacio despues, como en el resto de la web. Jose, 15/09/2026. */
.term-body .s{display:block;position:relative;padding-left:2.2ch;line-height:normal;margin-bottom:11px}
.term-body .s:last-child{margin-bottom:0}
.term-body .s::before{content:"▸";position:absolute;left:0;top:0;color:#fff}
/* Las tres voces de la consola, y se leen de un vistazo sin leer una palabra:
     cobre  -> como VIENE el documento (las dos primeras lineas)
     blanco -> lo que Sekondo REPARA
     verde  -> el remate
   Jose, 15/09/2026. */
.term-body .mal{color:var(--aviso)}
.term-body .mal::before{content:"!";color:var(--aviso);font-weight:700}
.term-body .ok{color:var(--ok)}
.term-body .ok::before{color:var(--ok)}   /* la viñeta del remate, verde como su línea */
/* Dos escenas en el mismo hueco: se turnan con un fundido, sin saltos de altura */
.term-body{display:grid}
/* Las escenas apagadas siguen ocupando el mismo hueco —es lo que evita que la
   ventana pegue saltos de alto al cambiar—, pero con opacidad 0 SEGUIAN cogiendo
   el raton: la de encima tapaba a la que se ve y no se podia seleccionar el texto.
   Con pointer-events se quitan de en medio sin dejar de ocupar sitio, y ademas se
   esconden del lector de pantalla, que hasta ahora leia las cuatro seguidas.
   Jose, 15/09/2026: «no me deja seleccionar el texto de la consola». */
.term-body .scene{grid-area:1/1;opacity:0;pointer-events:none;visibility:hidden;
  transition:opacity .5s ease, visibility 0s linear .5s}
.term-body .scene.on{opacity:1;pointer-events:auto;visibility:visible;
  transition:opacity .5s ease, visibility 0s}
.term-body,.term-body .scene{user-select:text;-webkit-user-select:text}
@media (prefers-reduced-motion:reduce){.term-body .scene{transition:none}}

/* ---------- Precios ---------- */
.toggle{
  display:inline-flex;align-items:center;gap:4px;padding:5px;border-radius:999px;
  background:var(--bg-alt);border:1px solid var(--line);margin:0 auto 12px;
}
.alt .toggle{background:#fff}
.toggle button{
  border:0;background:none;color:var(--ink-2);font:inherit;font-size:var(--t-pequeno);font-weight:700;
  padding:9px 22px;border-radius:999px;cursor:pointer;transition:background .15s,color .15s;
}
.toggle button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:var(--shadow)}
.save-hint{display:block;font-size:var(--t-cuerpo);color:var(--ink);margin-bottom:48px;font-weight:700;margin-top:14px}
.on-dark .save-hint,.plantilla .save-hint{color:var(--ok)}

.price-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:34px;display:flex;flex-direction:column;position:relative;
}
.price-card.featured{background:var(--dark);color:var(--dark-ink);border-color:var(--dark);
  box-shadow:var(--shadow-lg);outline:2px solid var(--ok);outline-offset:-2px}
.alt .price-card.featured{background:var(--dark)}
.price-card.featured h3{color:var(--dark-ink-2)}
.price-card.featured .price .amount{color:var(--dark-ink)}
.price-card.featured .price .per,
.price-card.featured .price-sub{color:var(--dark-ink-2)}
.price-card.featured .feat li{color:var(--dark-ink-2);border-bottom-color:var(--dark-line)}
.price-card.featured .feat li.off{color:rgba(220,232,238,.55)}
.price-card.featured .ribbon{background:var(--ok);color:var(--ok-ink)}
.price-card:not(.featured) .ribbon{background:#fff;color:var(--ink);border:1px solid var(--line)}
.price-card .ribbon{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--accent);color:#fff;font-size:var(--t-etiqueta);font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;padding:6px 15px;border-radius:999px;white-space:nowrap;
}
.price-card h3{font-size:var(--t-cierre);color:var(--ink-2)}   /* el nombre del plan es un H3, no cuerpo en Bold (18/09/2026) */
.price{display:flex;align-items:baseline;gap:6px;margin:12px 0 4px}
.price .amount{font-size:var(--t-titular);font-weight:700;letter-spacing:-.02em}
.price .per{color:var(--ink-3);font-size:var(--t-pequeno)}
.price-sub{color:var(--ink-3);font-size:var(--t-pequeno);min-height:22px;margin-bottom:24px}
.feat{list-style:none;padding:0;margin:0 0 30px;flex:1}
.feat li{position:relative;padding:8px 0 8px 27px;color:var(--ink-2);font-size:var(--t-pequeno);border-bottom:1px solid var(--line)}
.feat li:last-child{border-bottom:0}
.feat li::before{content:"✓";position:absolute;left:0;top:8px;color:var(--accent);font-weight:700}
.on-dark .feat li::before,.plantilla .feat li::before,.price-card.featured .feat li::before{color:var(--ok)}
.feat li.off{color:var(--ink-3)}
.feat li.off::before{content:"–";color:var(--ink-3)}
.on-dark .feat li{color:var(--dark-ink-2);border-color:var(--dark-line)}

/* ---------- Tabla comparativa ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-alt)}
table{border-collapse:collapse;width:100%;min-width:640px;font-size:var(--t-pequeno)}
th,td{padding:15px 20px;text-align:left;border-bottom:1px solid var(--line)}
thead th{background:var(--bg-alt);font-weight:700;white-space:nowrap}
.alt thead th{background:var(--bg-alt)}
tbody tr:last-child td{border-bottom:0}
td.c,th.c{text-align:center}
.yes{color:var(--accent);font-weight:700}
.on-dark .yes,.plantilla .yes{color:var(--ok)}
.no{color:var(--ink-3)}

/* ---------- Preguntas ---------- */
details{border-bottom:1px solid var(--line)}
summary{cursor:pointer;padding:20px 0;font-weight:700;font-size:var(--t-cuerpo);list-style:none;
  display:flex;justify-content:space-between;gap:20px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--ink-3);font-weight:500;font-size:1.5rem;line-height:1}
details[open] summary::after{content:"–"}
details .body{padding:0 0 22px;color:var(--ink-2);max-width:none}
details .body p:last-child{margin-bottom:0}

/* ---------- Llamada final ---------- */
/* La seccion del banner final va sin aire arriba ni abajo y sobre negro:
   asi el banner deja de flotar y se lee como una banda. Jose, 15/09/2026. */
/* La llamada final va A SANGRE, como las bandas. El dibujo se pinta en la SECCION,
   que ocupa el ancho de la pantalla, y NO en la tarjeta de dentro. Jose, 15/09/2026:
   «no metas nunca las imagenes dentro del contenedor de 1120 porque se cortan; la
   imagen es de pantalla completa, para que las manos caigan en el margen derecho».
   Mismo encuadre fijo que las bandas: 2100 / 1068 / 430 px por tramo, sin escalar
   dentro del tramo, y el negro del relleno es el mismo negro de los bordes del
   archivo, asi que la union no se ve. */
.cta-final{padding:0;background:url("../img/banners/sk-banda-manos.webp") center center/2100px auto no-repeat,#000}
/* La llamada final lleva el MISMO dibujo y el MISMO encuadre que las bandas: las
   manos de cristal, a tamaño fijo por tramo y sin escalar dentro del tramo. Antes
   llevaba sk-banner.jpg recortado a «cover» con un degradado encima que tapaba
   medio dibujo. Jose, 15/09/2026: «quítale el fondo ese feo que tiene ahí, que no
   se ve nada, y ponle el banner de las manos de cristal, alineado como tú sabes».
   Sin degradado: el propio archivo trae el negro a la izquierda, que es donde va
   el texto, y el objeto a la derecha. */
.cta{
  padding:38px 0;margin:0;text-align:left;color:var(--dark-ink);background:none;
  min-height:210px;display:flex;flex-direction:column;justify-content:center;
}
.cta h2{color:#fff;max-width:58%}
/* Banda de respiro entre ladrillos de texto: el fondo del SK y una frase. Sin boton. */
.banda{
  /* Tres banners fijos, uno por tramo, y negro en todo lo que sobre. El dibujo
     no se mueve ni se escala dentro de su tramo: solo cambia al cruzar un punto
     de ruptura. Norma de Jose, 15/09/2026.
       escritorio  >= 1068 px  -> 2100 de ancho  ·  archivo 4200 de ancho
       tableta      734-1067   -> 1068 de ancho  ·  archivo 2136 de ancho
       telefono     < 734      ->  430 de ancho  ·  archivo  860 de ancho
     El ALTO va en proporcion: el archivo puede ser mas alto de lo que se ve y la
     banda ensena su franja central. Asi, si el texto crece, hay dibujo de sobra
     arriba y abajo y no se ve ningun borde.
     El archivo va al doble para que en Retina no se amplie. El negro de relleno
     es el mismo de los bordes del dibujo (#000002 y #000005): la union no se ve. */
  background:url("../img/sk-banda.webp") center center/2100px auto no-repeat,#000;
  padding:0;
}
/* La banda mide 360 px clavados y el dibujo se pinta a 2100 x 360 dentro.
   El dibujo se fuerza a 2100 x 360 sin respetar la proporcion del archivo, para
   que entre entero y no se recorte. Con el archivo definitivo de 4200 x 720 la
   proporcion ya coincide y no deforma nada. Jose, 15/09/2026. */
/* 250 px es el MINIMO, no el alto fijo: si la entradilla pasa a dos lineas la
   banda crece sola y el dibujo se queda centrado. Por eso el archivo tiene que
   tener las franjas de arriba y abajo en negro puro. Jose, 15/09/2026. */
.banda .wrap{min-height:250px;display:flex;flex-direction:column;justify-content:center;gap:0;
  padding-block:40px}    /* aire arriba y abajo del texto. Jose, 15/09/2026 */
.banda p{
  margin:0;color:#fff;font-weight:900;letter-spacing:-.01em;line-height:var(--il-titular);
  font-size:var(--t-titular);max-width:56%;
}
.banda .sub{
  margin:16px 0 0;color:var(--dark-ink-2);font-weight:400;letter-spacing:0;
  font-size:var(--t-entradilla);max-width:66%;
}
.banda .acciones{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.banda p em{font-style:normal;color:var(--accent)}   /* los banners van en blanco y azul, no en verde */
/* Las otras dos versiones de la banda. En cuanto existan los archivos, entran solas:
   tablet 1020x260 y movil 686x230, con el logo a la derecha y el resto negro puro. */
/* La caja de llamada sangra 40 px por cada lado. Eso solo cabe cuando la ventana
   es mas ancha que la pagina (1160 + 24 + 24) mas la sangria. Por debajo, se quita,
   o el telefono y la tableta se van de scroll lateral. */
@media (max-width:1288px){
  .cta{margin-left:0;margin-right:0}
}
@media (max-width:1068px){
  /* En tableta y telefono el texto ocupa todo el ancho, asi que el dibujo NO puede
     ir detras: se ancla arriba y el texto cae debajo, sobre el negro. Jose, 15/09/2026. */
  .banda{background:url("../img/sk-banda-tablet.webp") center top/1068px auto no-repeat,#000}
  /* Nada de alto minimo a ojo: la banda reserva arriba justo lo que ocupa el dibujo
     y el resto lo marca el texto, mas 70 px de aire para que no se peguen (Jose,
     15/09/2026). El 290 / 210 de antes se midio sobre las manos (267 / 200) y los
     motivos que llegaron despues son mas altos: medido con ffmpeg el 18/09/2026, el
     mas alto llega a 301 px en tableta (sk-banda) y a 229 en movil (birrete).
     Un solo relleno para todas: 370 en tableta y 300 en movil. Vale tambien para la
     llamada final y la cabecera del lapiz. */
  .banda .wrap{min-height:0;justify-content:flex-end;padding-top:370px;padding-bottom:40px;
    text-align:center;align-items:center}   /* el lateral, el del .wrap: 48 px, como todas las secciones */
  .cta-final .wrap{min-height:0;padding-top:370px;padding-bottom:40px}
  .cta{padding:0;min-height:0}   /* el aire lo pone el .wrap, como en las bandas */
  /* Aqui el dibujo va arriba y el texto debajo, asi que el texto usa TODO el ancho:
     el 56/66 % es para escritorio, donde la mano esta al lado. Jose, 15/09/2026. */
  .banda p,.banda .sub{max-width:none}
  .banda .acciones{justify-content:center}
}
@media (max-width:734px){
  /* En vertical el SK y el texto comparten sitio a la fuerza: velo oscuro encima
     para que el claim se lea y el brillo del SK siga viendose detras. */
  .banda{background:url("../img/sk-banda-movil.webp") center top/430px auto no-repeat,#000}
  .banda .wrap,.cta-final .wrap{padding-top:300px}   /* 229 del motivo mas alto + 70 de aire */
}
@media (max-width:760px){
  .banda p,.banda .sub{max-width:none}
  /* En el telefono el dibujo manda arriba, asi que el texto se pega a la base
     del banner en vez de quedar centrado. Jose, 15/09/2026. */
  .banda .wrap{justify-content:flex-end}
  .banda .acciones .btn{flex:1 1 auto}
}
.cta .btn,.cta .btn-block{width:auto;align-self:flex-start;flex:0 0 auto}
.cta .lead{color:var(--dark-ink-2);max-width:60%}
/* Los tramos de la llamada final son los de las bandas: 1068 y 734 (antes cortaban a 760 y 733). */
@media (max-width:1068px){
  .cta-final{background:url("../img/banners/sk-banda-manos-tablet.webp") center top/1068px auto no-repeat,#000}
  .cta h2,.cta .lead{max-width:none}
}
.cta h2{margin-bottom:.3em;color:#fff}
.cta .lead{color:var(--dark-ink-2)}

/* ---------- Pie ---------- */
.site-footer{border-top:1px solid var(--line);background:var(--bg-alt);padding:26px 0 14px;font-size:var(--t-pequeno)}
.foot-grid{display:grid;grid-template-columns:1.7fr repeat(3,1fr);gap:40px;margin-bottom:18px}
.site-footer h4{font-size:var(--t-etiqueta);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin-bottom:16px}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin-bottom:11px}
.site-footer a{color:var(--ink-2)}
.site-footer a:hover{color:var(--ink)}
.foot-bottom{border-top:1px solid var(--line);padding-top:12px;display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap;color:var(--ink-3)}

/* ---------- Páginas de texto ---------- */
.page-head{padding:30px 0 22px;border-bottom:1px solid var(--line)}
/* Un único tamaño de titular para todas las páginas interiores */
.page-head h1{font-size:var(--t-display)}

/* QUÉ ES SEKONDO · la frase y los tres puntos de la página de reserva (Jose, 21/09/2026).
   Es la única página que ve quien llega de los anuncios y no decía qué se vende.
   Compacto a propósito: esta cabecera ya deja el primer campo del formulario muy abajo,
   así que la frase va en una línea y los puntos en cuerpo pequeño.
   Los puntos van alineados a la izquierda dentro de un bloque centrado: centrados no se leen.
   Ancho de línea 33 em, la norma de la casa. */
.que-es{font-size:var(--t-entradilla);font-weight:900;letter-spacing:-.01em;margin:0 0 14px}

/* La lista NO se centra (Jose, 21/09/2026): la cabecera va centrada y la lista heredaba ese
   centrado, con lo que las tres líneas quedaban flotando en mitad de la página. Va pegada a la
   izquierda, como el titular. El contenedor, un 15 % más ancho que los 33 em de la norma: 38 em.
   La marca es un check azul de marca, no el punto enano que había. */
.tres-puntos{list-style:none;margin:0 0 18px;padding:0;max-width:none;text-align:left;
  font-size:var(--t-pequeno);color:var(--ink-2)}
/* Los tres al MISMO ancho (Jose, 21/09/2026: «los dos de abajo se cortan antes»). Cada línea se
   quedaba en 528 px —el ancho de párrafo de la casa— aunque la lista midiera 834, así que cada
   una rompía donde le tocaba y el bloque quedaba desigual. Aquí mandan el ancho de la lista y el
   del icono, no el de párrafo. */
.tres-puntos li{margin:0 0 7px;padding-left:26px;position:relative;max-width:none;width:100%}
/* La frase, al mismo ancho que las tres líneas de abajo (Jose, 21/09/2026: «se te ha quedado en
   dos líneas»). Es un <p>, así que le caía el ancho de párrafo de la casa —594 px— y se partía.
   Hay que ganarle a «section:has(> .icono-seccion):has(h1) > .wrap > p», que es más fuerte: se
   repite ese mismo selector con la clase al final. Y a la lista, lo mismo. */
section:has(> .icono-seccion):has(h1) > .wrap > p.que-es,
section:has(> .icono-seccion) > .wrap > p.que-es,
.page-head .que-es{max-width:none}
section:has(> .icono-seccion):has(h1) > .wrap > .tres-puntos,
section:has(> .icono-seccion) > .wrap > .tres-puntos{max-width:none}
.tres-puntos li::before{content:"";position:absolute;left:2px;top:.36em;width:12px;height:7px;
  border-left:2.5px solid var(--accent,#0071E3);border-bottom:2.5px solid var(--accent,#0071E3);
  transform:rotate(-45deg)}
.tres-puntos b{color:var(--ink,#1D1D1F);font-weight:900}
.prose{max-width:none}
.prose h2{margin-top:1.9em;font-size:var(--t-titular)}
.prose h3{margin-top:1.5em;font-size:var(--t-cierre)}   /* la Guia: los h3 median 18, el cuerpo en Black (arreglado 18/09/2026) */
.prose ul,.prose ol{color:var(--ink-2);padding-left:22px}
.prose li{margin-bottom:9px}
.prose code{font-family:var(--mono);background:var(--bg-alt);border:1px solid var(--line);
  border-radius:6px;padding:2px 7px;font-size:var(--t-pequeno)}
.prose pre{background:#1D1D1F;color:#F5F5F7;border-radius:var(--radius-s);padding:20px 22px;overflow-x:auto}
.prose pre code{background:none;border:0;padding:0;color:inherit}
.note{border-left:3px solid var(--accent);background:var(--accent-soft);padding:18px 22px;
  border-radius:0 var(--radius-s) var(--radius-s) 0;color:var(--ink)}

/* ---------- Formulario ---------- */
label{display:block;font-size:var(--t-pequeno);color:var(--ink-2);margin-bottom:7px;font-weight:500}
input,textarea,select{
  width:100%;padding:13px 15px;border-radius:var(--radius-s);
  background:#fff;border:1px solid var(--line-2);color:var(--ink);font:inherit;font-size:var(--t-pequeno);
}
input:focus,textarea:focus,select:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.field{margin-bottom:20px}

/* La cabecera necesita ~850 px para el menú completo: antes de eso, desplegable */
/* El menu pasa a ocho entradas: por debajo de 1010 px ya no cabe en la cabecera
   y se va a la hamburguesa. Antes estaba en 900 y se salia entre 900 y 1000. */
@media (max-width:1010px){
  .nav-links{
    display:none;position:absolute;top:66px;left:0;right:0;flex-direction:column;gap:0;
    background:#fff;border-bottom:1px solid var(--line);padding:8px 24px 18px;
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:13px 0;border-bottom:1px solid var(--line)}
  .nav-toggle{display:block}
  .nav-cta .btn-ghost{display:none}
}

/* ---------- Adaptable ---------- */
@media (max-width:960px){
  .g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
}
@media (max-width:760px){
  /* En pantallas estrechas el titular se parte solo: el salto forzado sobra */
  h1 br.brk{display:none}
  /* La cabecera se aprieta: menos separación y el botón con menos relleno */
  .nav{gap:14px}
  .nav-cta{gap:8px}
  .nav-cta .btn-sm{padding:9px 14px}
  section{padding:var(--sec-movil) 0}
  .g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  /* Ya no cabe el botón: el mismo está en la portada justo debajo */
  .nav-cta .btn-primary{display:none}
  .nav{gap:10px}
}
@media (max-width:520px){
  .foot-grid{grid-template-columns:1fr}
}

/* ---------- Accesibilidad ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:24px;top:12px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;border-radius:8px}

/* Fichas de app suelta: precio y botón alineados aunque las listas midan distinto */
#apps-single .card{display:flex;flex-direction:column}
#apps-single .card .feat{flex:1}

/* Captura de la aplicación en la ficha de Apps */
.shot{width:100%;height:auto;border-radius:var(--radius-s);margin-top:22px;
  background:var(--bg-alt);box-shadow:var(--shadow)}

/* Rollover unificado: blanco o gris a negro, negro a blanco, azul a negro */
.btn-dark{background:var(--ink);border-color:var(--ink);color:#fff}
.btn-dark:hover{background:#fff;border-color:var(--ink);color:var(--ink)}


/* Entrada del titular: fade up escalonado */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.hero .pill,.hero h1,.hero .lead,.hero-actions,.hero-note,
.page-head .eyebrow,.page-head h1,.page-head .lead{
  animation:fadeUp .75s cubic-bezier(.16,.84,.44,1) both;
}
.hero h1,.page-head h1{animation-delay:.09s}
.hero .lead,.page-head .lead{animation-delay:.18s}
.hero-actions{animation-delay:.27s}
.hero-note{animation-delay:.36s}

/* La trampa para robots: fuera de la vista pero sin display:none, que algunos la detectan */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Cabecera con imagen, al estilo Apple: la foto arriba a su tamaño (como la de Apple, a 1x),
   y titular y botones debajo del logo, sobre el reflejo. Tres imágenes con los cortes de Apple:
   escritorio, tablet (≤1068) y móvil (≤734). El fondo de la caja es el negro de la foto. */
.hero-foto{position:relative;height:740px;background:#010101;overflow:hidden;color:#fff}
.hero-foto picture{display:block}
.hero-foto-bg{position:absolute;top:0;left:0;width:100%;height:546px;object-fit:cover;object-position:center top;display:block}
/* EL SALTO DE VERDAD (23/09/2026): no era el zoom de escritorio contra nada — era el zoom de
   escritorio (1.5, origen 50% 30%) contra el zoom de TABLET, una regla aparte más abajo
   (min-width:735px and max-width:1068px) que aplica scale(1.9) origen "50% 166px" y que se me
   había pasado por alto. Jose: «quiero que la misma foto que ahora mismo está en la tablet con
   el mismo tamaño se mantenga en el escritorio» — la imagen ya es la misma; para que el TAMAÑO
   en pantalla también lo sea, el escritorio necesita el MISMO transform que tablet, no ninguno. */
@media (min-width:1069px){.hero-foto-bg{transform:scale(1.9);transform-origin:50% 166px}}
.hero-foto-inner{position:absolute;left:0;right:0;bottom:56px;text-align:center}
.hero-foto h1{color:#fff;font-size:72px;line-height:1.06;margin:0 0 14px;letter-spacing:-.01em}   /* EXCEPCION 1 (Jose, 15/09/2026: «ponle diez puntos mas, ahi con alegria»): el titular de la portada va a 72 px fijos, fuera de la escala, y a dos tamanos (.h1-a / .h1-b). En tableta 40 y en movil 30, mas abajo. No meterlo en la escala «para unificar». */
/* La frase que explica qué es: sin ella, «Tú creas. Sekondo lo hace.» no se entiende en frío */
.hero-foto .hero-sub{color:rgba(255,255,255,.78);font-size:18.4px;font-weight:400;line-height:1.45;margin:0 auto 28px;letter-spacing:-.01em}   /* EXCEPCION 2 (Jose, 14/09/2026): el subtitulo de la portada en Regular a 18,4 px, un numero, en los tres tramos */
.hero-foto .hero-sub br.brk{display:inline}
.hero-foto .hero-actions{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:14px;justify-content:center}
.hero-foto .hero-actions .btn{text-align:center}
.hero-foto h1,.hero-foto .hero-sub,.hero-foto .hero-actions{animation:fadeUp .75s cubic-bezier(.16,.84,.44,1) both}
.hero-foto .hero-sub{animation-delay:.07s}
.hero-foto .hero-actions{animation-delay:.14s}
.hero-foto .btn-primary:hover{background:#fff;border-color:#fff;color:var(--ink)}
.btn-claro{background:transparent;border-color:rgba(255,255,255,.55);color:#fff}
.btn-claro:hover{background:#fff;border-color:#fff;color:var(--ink)}
@media (max-width:1068px){.hero-foto{height:674px}.hero-foto-bg{height:520px}.hero-foto h1{font-size:40px}}   /* .h1-a = 28 · .h1-b = 52 */
@media (max-width:734px){
  /* En el móvil el logo va grande: la imagen es un recorte del original con negro debajo (1300×1733) */
  .hero-foto{height:calc(100vw * 1092 / 1300 + 320px)}
  .hero-foto-bg{height:calc(100vw * 1733 / 1300)}
  .hero-foto-inner{bottom:34px}
  .hero-foto h1{font-size:30px;margin-bottom:14px}   /* .h1-a = 24 (con el max() de mas abajo) · .h1-b = 39 */
  .hero-foto .hero-sub{font-weight:400;margin-bottom:26px;padding:0 4vw}
  .hero-foto .hero-actions{grid-auto-flow:row}
}

/* En la cabecera el titular corta siempre tras «Tú creas.», también en el móvil */
.hero-foto h1 br.brk{display:inline}

/* Franja del programa de lanzamiento: bajo la cabecera, en todas las páginas.
   Cuando se llene el cupo se cambia el texto en FRANJA (build.py) y ya. */
.franja{display:block;background:var(--dark);color:var(--dark-ink);text-align:center;font-size:var(--t-cuerpo);padding:18px 16px}
.franja:hover{background:var(--dark-2);color:var(--dark-ink)}
.franja strong{font-weight:700;color:var(--ok)}
/* solo cuando en Bold no se ve: el peso Black. Con cuentagotas. */
strong.destaca,.destaca{font-weight:900;letter-spacing:-.01em}


/* El gancho: un solo bloque de texto grande, centrado, sin tarjetas */
.gancho{background:var(--bg)}
.gancho-inner{/* el ancho lo pone .wrap */}
.gancho h2{margin-bottom:26px}
.gancho .lead{margin-bottom:22px}
.gancho-cierre{font-size:var(--t-cierre);font-weight:700;letter-spacing:-.02em;margin-top:30px;color:var(--ink)}

/* La plantilla: mismo esquema, sobre fondo oscuro */
.plantilla{background:var(--dark);color:var(--dark-ink)}
.plantilla .eyebrow{color:var(--ok)}
.plantilla h2{color:#fff}
.plantilla .lead{color:var(--dark-ink-2)}
.plantilla-inner{/* el ancho lo pone .wrap */}
.plantilla .muted{color:var(--dark-ink-2)}

/* Precio de salida tachado junto al fundador */
.price .was{text-decoration:line-through;color:var(--ink-3);font-size:var(--t-cuerpo);font-weight:500;margin-right:10px;letter-spacing:0}
.planes{max-width:880px;margin:0 auto}

/* En Apps: lo pendiente, en gris */
.feat li.off{color:var(--ink-3)}

/* Aviso de cookies: abajo, discreto, y los dos botones iguales (rechazar tiene que costar lo mismo que aceptar) */
.cookies{position:fixed;left:16px;right:16px;bottom:16px;z-index:60;max-width:560px;margin:0 auto;
  background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:var(--radius-s);
  box-shadow:0 12px 40px rgba(0,0,0,.14);padding:18px 20px;display:flex;gap:16px;align-items:center;font-size:var(--t-pequeno);line-height:1.45}
/* Sin esto, el aviso no se va al aceptar: el display:flex de arriba le gana al
   display:none que el navegador le pone a [hidden]. Cazado por Jose, 15/09/2026. */
.cookies[hidden]{display:none}
.cookies p{margin:0}
.cookies a{color:var(--accent)}
.cookies-botones{display:flex;gap:8px;flex-shrink:0}
.cookies .btn{background:var(--ink);border-color:var(--ink);color:#fff}
@media (max-width:600px){.cookies{flex-direction:column;align-items:stretch}.cookies-botones .btn{flex:1}}
.site-footer button[data-cookies]{background:none;border:0;padding:0;font:inherit;color:var(--ink-2);cursor:pointer}
.site-footer button[data-cookies]:hover{color:var(--ink)}

/* La tabla de comparación: cuatro columnas y filas de sección.
   La primera columna manda, las otras tres se leen de un vistazo. */
.vs{min-width:760px}
.vs th.c,.vs td.c{text-align:center;width:13%}
.vs thead th.c:first-of-type{color:var(--accent)}
.vs tbody tr.sec td{background:var(--bg-alt);border-bottom:0;padding-top:22px;padding-bottom:10px;
  font-size:var(--t-etiqueta);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2)}
.vs tbody tr.sec strong{font-weight:700}
.vs td .small{display:block;margin-top:4px}
.vs td:first-child{max-width:32ch}

/* ----------------------------------------------------------------------------
   LOS MOTIVOS DE LA BANDA
   La banda base lleva las manos, que es la de la portada. Cada pagina anade su
   clase y lo unico que cambia es el dibujo: el encuadre, el tamano y el negro de
   relleno son los mismos para todos, porque los treinta archivos salen de las
   mismas tres mesas de Illustrator. Si alguno se descuadra, se adapta la mesa,
   no el CSS. Jose, 15/09/2026.
   ---------------------------------------------------------------------------- */
.banda.b-cmd-a{background-image:url("../img/banners/sk-banda-cmd-a.webp")}
.banda.b-cmd-b{background-image:url("../img/banners/sk-banda-cmd-b.webp")}
.banda.b-reloj{background-image:url("../img/banners/sk-banda-reloj.webp")}
.banda.b-infinito{background-image:url("../img/banners/sk-banda-infinito.webp")}
.banda.b-check{background-image:url("../img/banners/sk-banda-check.webp")}
.banda.b-capas{background-image:url("../img/banners/sk-banda-capas.webp")}
.banda.b-birrete{background-image:url("../img/banners/sk-banda-birrete.webp")}
.banda.b-logo-negro{background-image:url("../img/banners/sk-banda-logo-negro.webp")}
.banda.b-logo-azul{background-image:url("../img/banners/sk-banda-logo-azul.webp")}
.banda.b-candado{background-image:url("../img/banners/sk-banda-candado.webp")}
.banda.b-plumilla{background-image:url("../img/banners/sk-banda-plumilla.webp")}
.banda.b-lapiz{background-image:url("../img/banners/sk-banda-lapiz.webp")}
.banda.b-varios{background-image:url("../img/banners/sk-banda-varios.webp")}
.banda.b-entrega{background-image:url("../img/banners/sk-banda-entrega.webp")}

@media (max-width:1068px){
  .banda.b-cmd-a{background-image:url("../img/banners/sk-banda-cmd-a-tablet.webp")}
  .banda.b-cmd-b{background-image:url("../img/banners/sk-banda-cmd-b-tablet.webp")}
  .banda.b-reloj{background-image:url("../img/banners/sk-banda-reloj-tablet.webp")}
  .banda.b-infinito{background-image:url("../img/banners/sk-banda-infinito-tablet.webp")}
  .banda.b-check{background-image:url("../img/banners/sk-banda-check-tablet.webp")}
  .banda.b-capas{background-image:url("../img/banners/sk-banda-capas-tablet.webp")}
  .banda.b-birrete{background-image:url("../img/banners/sk-banda-birrete-tablet.webp")}
  .banda.b-logo-negro{background-image:url("../img/banners/sk-banda-logo-negro-tablet.webp")}
  .banda.b-logo-azul{background-image:url("../img/banners/sk-banda-logo-azul-tablet.webp")}
  .banda.b-candado{background-image:url("../img/banners/sk-banda-candado-tablet.webp")}
  .banda.b-plumilla{background-image:url("../img/banners/sk-banda-plumilla-tablet.webp")}
  .banda.b-lapiz{background-image:url("../img/banners/sk-banda-lapiz-tablet.webp")}
  .banda.b-varios{background-image:url("../img/banners/sk-banda-varios-tablet.webp")}
  .banda.b-entrega{background-image:url("../img/banners/sk-banda-entrega-tablet.webp")}
}
@media (max-width:734px){
  .banda.b-cmd-a{background-image:url("../img/banners/sk-banda-cmd-a-movil.webp")}
  .banda.b-cmd-b{background-image:url("../img/banners/sk-banda-cmd-b-movil.webp")}
  .banda.b-reloj{background-image:url("../img/banners/sk-banda-reloj-movil.webp")}
  .banda.b-infinito{background-image:url("../img/banners/sk-banda-infinito-movil.webp")}
  .banda.b-check{background-image:url("../img/banners/sk-banda-check-movil.webp")}
  .banda.b-capas{background-image:url("../img/banners/sk-banda-capas-movil.webp")}
  .banda.b-birrete{background-image:url("../img/banners/sk-banda-birrete-movil.webp")}
  .banda.b-logo-negro{background-image:url("../img/banners/sk-banda-logo-negro-movil.webp")}
  .banda.b-logo-azul{background-image:url("../img/banners/sk-banda-logo-azul-movil.webp")}
  .banda.b-candado{background-image:url("../img/banners/sk-banda-candado-movil.webp")}
  .banda.b-plumilla{background-image:url("../img/banners/sk-banda-plumilla-movil.webp")}
  .banda.b-lapiz{background-image:url("../img/banners/sk-banda-lapiz-movil.webp")}
  .banda.b-varios{background-image:url("../img/banners/sk-banda-varios-movil.webp")}
  .banda.b-entrega{background-image:url("../img/banners/sk-banda-entrega-movil.webp")}
}

/* ----------------------------------------------------------------------------
   LAS LÁMINAS DEL ENCARGO
   Las dos mesas de Illustrator que el diseñador le pasa a Sekondo. Van a 1120,
   que es el ancho útil de la web, una debajo de otra y con su pie. Jose,
   15/09/2026.
   ---------------------------------------------------------------------------- */
.laminas .wrap{max-width:1216px}   /* 1120 de lamina + los 48 de aire a cada lado */
.lamina{margin:0 0 34px}
.lamina:last-child{margin-bottom:0}
.lamina img{display:block;width:100%;height:auto;border-radius:12px;
  box-shadow:0 18px 50px rgba(8,31,53,.22)}
.lamina figcaption{margin-top:12px}
@media (max-width:734px){
  .lamina{margin-bottom:24px}
  .lamina img{border-radius:8px}
}


/* ----------------------------------------------------------------------------
   MENU CON DESPLEGABLES (15/09/2026)
   Cuatro entradas principales; las que tienen paginas debajo abren un panel.
   En escritorio basta el raton o el tabulador —:focus-within— y por eso el
   menu funciona aunque el JS no cargue. El boton de la flecha solo hace falta
   en movil y para el teclado.
   ---------------------------------------------------------------------------- */
.nav-grupo{position:relative;display:flex;align-items:center;gap:4px}
.nav-mas{background:none;border:0;padding:2px;line-height:1;cursor:pointer;
  color:var(--ink-2);font-size:11px;transition:color .15s,transform .15s}
.nav-grupo:hover .nav-mas,.nav-mas[aria-expanded="true"]{color:var(--ink)}
.nav-mas[aria-expanded="true"]{transform:rotate(180deg)}
.nav-grupo.activo>a{color:var(--ink)}

.nav-menu{position:absolute;top:100%;left:-14px;z-index:60;min-width:216px;
  display:flex;flex-direction:column;gap:2px;padding:10px;
  background:var(--bg);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 16px 40px rgba(8,31,53,.16);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s,transform .16s,visibility .16s}
.nav-grupo:hover .nav-menu,
.nav-grupo:focus-within .nav-menu,
.nav-menu.abierto{opacity:1;visibility:visible;transform:translateY(0)}
.nav-menu a{padding:9px 12px;border-radius:8px;white-space:nowrap;
  transition:background .15s,color .15s}
.nav-menu a:hover,.nav-menu a[aria-current="page"]{background:var(--bg-alt);color:var(--ink)}
/* El puente invisible entre la entrada y el panel: sin el, el menu se cierra
   al bajar el raton por el hueco. */
.nav-grupo::after{content:"";position:absolute;top:100%;left:0;right:0;height:12px}

@media (hover:none){
  .nav-grupo:hover .nav-menu{opacity:0;visibility:hidden}
  .nav-menu.abierto{opacity:1;visibility:visible}
}

@media (max-width:900px){
  .nav-grupo{display:block;width:100%}
  .nav-grupo>a{display:inline-block}
  .nav-mas{position:absolute;right:0;top:10px;font-size:14px;padding:6px 10px}
  .nav-menu{position:static;opacity:1;visibility:visible;transform:none;
    display:none;min-width:0;margin:0 0 8px;padding:0 0 0 14px;
    border:0;border-left:2px solid var(--line);border-radius:0;box-shadow:none;background:none}
  .nav-menu.abierto{display:flex}
  .nav-grupo:hover .nav-menu:not(.abierto),
  .nav-grupo:focus-within .nav-menu:not(.abierto){display:none}
  .nav-menu a{padding:10px 0;border-bottom:1px solid var(--line)}
  .nav-menu a:last-child{border-bottom:0}
  .nav-grupo::after{display:none}
}

/* ---------- La miga de pan de las paginas secundarias ---------- */
.miga{font-size:var(--t-pequeno);color:var(--ink-2);padding:18px 0 0}
.miga a{color:var(--ink-2);text-decoration:none}
.miga a:hover{color:var(--ink);text-decoration:underline}
.miga span{color:var(--ink-3,var(--ink-2));opacity:.6;margin:0 7px}
.miga b{color:var(--ink);font-weight:700}   /* el 600 no esta cargado */


/* ----------------------------------------------------------------------------
   EL HUECO DEL VIDEO QUE AUN NO ESTA (15/09/2026)
   Ocupa el mismo sitio que ocupara el video, para que la pagina no de un salto
   el dia que entre. Fondo oscuro como el reproductor y filete discontinuo, que
   es la manera de decir «esto no esta terminado» sin escribirlo.
   ---------------------------------------------------------------------------- */
.en-camino{aspect-ratio:16/10;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:12px;text-align:center;padding:34px;
  background:var(--ink);color:#fff;border-radius:14px;
  border:2px dashed rgba(255,255,255,.22)}
.en-camino .marca{display:inline-block;padding:5px 12px;border-radius:999px;
  background:var(--accent);color:var(--ink);font-size:var(--t-etiqueta);
  font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.en-camino h3{margin:0;max-width:22ch;color:#fff}
.en-camino p{margin:0;max-width:52ch;color:rgba(255,255,255,.72)}
.en-camino .btn{margin-top:6px;border-color:rgba(255,255,255,.34);color:#fff}
.en-camino .btn:hover{background:rgba(255,255,255,.1)}
@media (max-width:734px){
  .en-camino{aspect-ratio:auto;padding:26px 20px;gap:10px}
  .en-camino h3{max-width:none}
}


/* ----------------------------------------------------------------------------
   EL AIRE DE LAS TARJETAS (Jose, 15/09/2026)
   El interlineado del cuerpo general es 1,6, que en un parrafo corto dentro de
   una tarjeta se lee suelto y desmadejado. Norma suya, y es de manual: el aire
   va ENTRE el titular y el parrafo —espacio anterior—, no dentro del parrafo.
   Asi que el parrafo baja a interlineado normal y el hueco se lo damos al h3.
   ---------------------------------------------------------------------------- */
.card h3{margin-bottom:15px}
.card p{line-height:1.45}
.card p + p{margin-top:.8em}

/* ----------------------------------------------------------------------------
   HERO DE PAGINA con icono de cristal  ·  15/09/2026
   Jose: «a todas las paginas principales vamos a arrancarlas con un hero de
   cabecera con el icono de cristal». Las secundarias no llevan: llevan miga.

   El icono es UN archivo por pagina, cuadrado y con el fondo negro puro —el
   mismo de los banners— para que no se vea la union con la banda:
       assets/img/heroes/sekondo-hero-<pagina>.png   ·   900 x 900 px

   Mientras el archivo no exista, el generador pinta la caja de hueco en su
   sitio, con su medida escrita. Cuando aparezca el png, entra solo.
   ---------------------------------------------------------------------------- */
.hero-ico{background:#000;color:#fff;text-align:center}
.hero-ico .wrap{padding-block:62px 54px}
.hero-ico .ico{display:block;margin:0 auto 26px;width:260px;height:260px;object-fit:contain}
.hero-ico .eyebrow{color:var(--accent)}
.hero-ico h1{color:#fff;margin:0}
.hero-ico .lead{color:var(--dark-ink-2);max-width:62ch;margin:18px auto 0}
.hero-ico .acciones{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px}

@media (max-width:1067px){
  .hero-ico .wrap{padding-block:50px 44px}
  .hero-ico .ico{width:200px;height:200px;margin-bottom:22px}
}
@media (max-width:733px){
  .hero-ico .wrap{padding-block:40px 36px}
  .hero-ico .ico{width:158px;height:158px;margin-bottom:18px}
  .hero-ico .acciones .btn{flex:1 1 auto}
}

/* El pie de la izquierda son DOS bloques, no tres renglones sueltos. Jose, 15/09/2026:
   «el lema es parte del logotipo, ponlo mas pegado; y sepáralo mas del hecho en España».
     bloque 1 · el logotipo y su lema, juntos  -> 8 px entre los dos
     bloque 2 · la firma del oficio, aparte    -> 24 px de separacion
   Por eso el lema sube y la firma baja: el aire de arriba se lo lleva el de abajo. */
.pie-lema{margin:8px 0 0;font-weight:900;letter-spacing:-.01em;color:var(--ink);font-size:var(--t-cuerpo)}
.pie-lema + p{margin-top:24px}

/* Las pastillas de la tira, por tramos. Va al final para ganarle a las medias
   queries de arriba sin tocarlas. */
@media (max-width:1067px){ .appstrip-inner{grid-template-columns:repeat(3,1fr)} }
@media (max-width:733px){ .appstrip-inner{grid-template-columns:repeat(2,1fr);gap:10px}
  .appstrip .chip{padding-inline:6px;font-size:15px} }

/* ----------------------------------------------------------------------------
   TEXTO EN NEGATIVO · 15/09/2026
   Jose, mirando el bloque «Primero lee como esta construido»: «es tan gorda que
   la negrita no se distingue; la que no sea negrita ponla un poquito mas delgada,
   que en el negativo se va a ver mejor».
   Tiene razon y es de manual: sobre fondo oscuro el blanco se derrama y toda la
   letra engorda opticamente. En papel blanco el corrido va en Medium (500) y la
   negrita en 700, y se distinguen; en negativo ese 500 ya parece casi negrita y
   el 700 no tiene contra que destacar.
   LA NORMA, tal como la fijo Jose el 15/09/2026:
     · sobre BLANCO  -> corrido en Medium (500), negrita 700
     · sobre MARINO  -> corrido en Regular (400), y lo que destaque en BLACK (900)
     · los titulares sobre marino, SIEMPRE en Black
   Sus palabras: «esa letra delgada sobre fondo blanco se lee mas regular, pero
   sobre fondo oscuro se lee de puta madre; y los titulares tienen que ir en black».
   El motivo es el mismo en los dos casos: en negativo la letra engorda, asi que el
   corrido adelgaza y el destacado tiene que irse al extremo para seguir destacando.
   ---------------------------------------------------------------------------- */
.on-dark p{font-weight:400}
.on-dark p.eyebrow{font-weight:700}   /* la etiqueta no pierde el peso sobre marino (18/09/2026) */
.on-dark p strong,.on-dark p b{font-weight:900}
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{font-weight:900}

/* Los otros dos tramos de la llamada final, con los mismos tamanos fijos que las
   bandas: tableta 1068 px y telefono 430 px, anclados arriba para que el dibujo
   no se corte por la cabeza cuando el texto crece. */
@media (max-width:734px){
  .cta-final{background:url("../img/banners/sk-banda-manos-movil.webp") center top/430px auto no-repeat,#000}
}

/* ==========================================================================
   BIOGRAFÍA Y EL OFICIO (17/09/2026)
   La forma y el responsive salen de la propuesta que trajo Jose; el diseño es el
   nuestro: fondo negro de arriba abajo, Satoshi en Medium (sin Black gigante) y
   los colores de la marca. Todo va con prefijo bio- para no tocar el resto.
   ========================================================================== */
.bio{background:#000;color:#F3F4F5;--bio-muted:#A4A6AC;--bio-line:#2A2A2E;--bio-azul:#0071E3;--bio-azul-claro:#6FAEF5}
.bio a{color:inherit;text-decoration:none}
.bio a:focus-visible,.bio summary:focus-visible{outline:2px solid var(--bio-azul-claro);outline-offset:7px}
.bio-container{width:calc(100% - 64px);max-width:1120px;margin-inline:auto}
.bio-eyebrow{text-transform:uppercase;font-size:12px;letter-spacing:.18em;font-weight:500;line-height:1.6;color:var(--bio-azul-claro);margin:0 0 24px}
.bio-hero{position:relative;isolation:isolate;min-height:420px;height:32vw;max-height:530px;display:flex;align-items:center;overflow:hidden}
.bio-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-2}
.bio-hero:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(0,0,0,.45),rgba(0,0,0,.15) 48%,transparent 66%)}
.bio-hero h1{font-size:clamp(42px,4.2vw,64px);line-height:1.06;font-weight:500;letter-spacing:-.03em;margin:0;max-width:620px;color:#fff;text-wrap:balance}
.bio-hero .bio-eyebrow{color:#DCE8EE;margin-bottom:20px}
.bio-sub{font-size:18px;line-height:1.6;color:#C9D3DB;margin:24px 0 0;max-width:430px}
.bio-byline{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid var(--bio-line);padding-block:28px;font-size:14px;line-height:1.6;color:var(--bio-muted)}
.bio-byline strong{font-weight:500;color:#F3F4F5}
.bio-editorial{display:grid;grid-template-columns:240px minmax(0,1fr);gap:48px;padding-block:88px;border-bottom:1px solid var(--bio-line)}
.bio-label{font-size:13px;line-height:1.7;color:var(--bio-muted);margin:8px 0 0}
.bio-label span{color:var(--bio-azul-claro);margin-right:14px;font-variant-numeric:tabular-nums}
.bio-copy{max-width:760px}
.bio-copy h2{font-size:clamp(32px,3.1vw,44px);font-weight:500;letter-spacing:-.025em;line-height:1.14;margin:0 0 29px;color:#fff;text-wrap:balance}
.bio-copy p{font-size:18px;line-height:1.8;color:#B4B6BC;margin:0 0 20px}
.bio-copy p:last-child{margin-bottom:0}
.bio-copy p.bio-lead{font-size:22px;line-height:1.65;color:#E6E7EA}
.bio-copy strong{font-weight:500;color:#fff}
.bio-notes{display:flex;flex-wrap:wrap;gap:10px;margin:30px 0}
.bio-note{color:#FF9A9F;border:1px solid #B94E55;background:#180A0C;padding:10px 13px;font-size:12px;font-weight:500;line-height:1.4;letter-spacing:.05em}
.bio-quote{margin:36px 0 0;padding:0 0 0 24px;border-left:2px solid var(--bio-azul);font-size:27px;letter-spacing:-.01em;line-height:1.5;color:#fff}
.bio-signature{margin-top:30px}
.bio-signature strong{display:block;font-size:17px;font-weight:500;color:#fff}
.bio-signature span{display:block;color:var(--bio-muted);font-size:14px;margin-top:8px}
.bio-chapter{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;padding:62px 0;transition:color .2s}
.bio-chapter .bio-eyebrow{display:block;margin-bottom:15px}
.bio-chapter h2{font-size:clamp(30px,3.2vw,46px);font-weight:500;letter-spacing:-.025em;line-height:1.14;margin:0;color:#fff}
.bio-chapter p{font-size:16px;color:var(--bio-muted);line-height:1.6;margin:14px 0 0}
.bio-arrow{font-size:44px;color:var(--bio-azul-claro);transition:transform .2s}
.bio-chapter:hover h2{color:#BFDAF7}
.bio-chapter:hover .bio-arrow{transform:translateX(7px)}
.bio-head{padding:38px 0 78px}
.bio-back{font-size:14px;color:var(--bio-muted);display:inline-block;padding:8px 0;margin-bottom:48px}
.bio-back:hover{color:#fff}
.bio-head h1{font-size:clamp(44px,5.8vw,78px);font-weight:500;line-height:1.06;letter-spacing:-.035em;max-width:1040px;margin:0 0 32px;color:#fff;text-wrap:balance}
.bio-intro{max-width:700px;font-size:21px;line-height:1.7;color:#B4B6BC;margin:0}
.bio-tl-section{border-top:1px solid var(--bio-line);border-bottom:1px solid var(--bio-line);padding:62px 0 52px;overflow:hidden}
.bio-tl-heading{font-size:clamp(32px,3.1vw,44px);line-height:1.14;font-weight:500;letter-spacing:-.025em;max-width:760px;margin:0;color:#fff}
.bio-tl{list-style:none;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));margin:56px 0 36px;padding:0 clamp(24px,4.6vw,110px);width:100%}
.bio-tl li{position:relative;padding:40px 18px 0 0;border-top:1px solid #3A3B40}
.bio-tl li:before{content:"";position:absolute;top:-7px;left:0;width:13px;height:13px;border-radius:50%;border:2px solid #5B5D63;background:#000}
.bio-tl time{font-size:14px;font-weight:500;color:var(--bio-muted)}
.bio-tl h3{font-size:19px;line-height:1.22;letter-spacing:-.01em;margin:13px 0 12px;font-weight:500;color:#fff}
.bio-tl p{font-size:15px;line-height:1.65;color:#A4A6AC;margin:0;max-width:190px}
.bio-tl li:last-child{border-color:var(--bio-azul)}
.bio-tl li:last-child:before{background:var(--bio-azul);border-color:var(--bio-azul);box-shadow:0 0 0 7px rgba(0,113,227,.28)}
.bio-tl li:last-child time,.bio-tl li:last-child h3{color:var(--bio-azul-claro)}
.bio-tl-caption{font-size:13px;color:#86868B;margin:0;padding-top:10px}
.bio-work{list-style:none;padding:0;margin:30px 0 0}
.bio-work li{display:grid;grid-template-columns:54px 1fr;gap:16px;padding:22px 0;border-top:1px solid var(--bio-line)}
.bio-number{font-size:28px;font-weight:500;color:var(--bio-azul-claro);letter-spacing:-.02em}
.bio-work h3{font-size:18px;font-weight:500;margin:2px 0 5px;color:#fff}
.bio-copy .bio-work p{font-size:16px;line-height:1.65;margin:0}
.bio-closing{padding-block:76px}
.bio-closing h2{font-size:clamp(36px,4.3vw,58px);font-weight:500;letter-spacing:-.03em;line-height:1.14;max-width:850px;margin:0 0 30px;color:#fff;text-wrap:balance}
.bio-closing p{max-width:690px;font-size:19px;color:var(--bio-muted);line-height:1.8;margin:0}
.bio-statement{color:var(--bio-azul-claro)}
.bio-sources{border-top:1px solid var(--bio-line);font-size:13px;color:var(--bio-muted);padding-block:22px}
.bio-sources summary{cursor:pointer;width:fit-content}
.bio-sources ul{line-height:1.9;padding-left:20px}
.bio-sources a{text-decoration:underline;text-underline-offset:3px}
.bio-sources a:hover{color:#fff}
@media(min-width:1900px){.bio-tl h3{font-size:23px}.bio-tl p{font-size:17px;max-width:230px}.bio-tl time{font-size:17px}.bio-tl{margin-block:66px 42px}}
@media(max-width:1100px){.bio-editorial{grid-template-columns:175px minmax(0,1fr);gap:32px}.bio-hero h1{max-width:490px;font-size:49px}.bio-hero{height:440px}.bio-photo{object-position:60% center}.bio-hero .bio-eyebrow{max-width:350px}.bio-tl{grid-template-columns:1fr;margin:40px auto 30px;padding:0;width:calc(100% - 64px);max-width:760px}.bio-tl li{border-top:0;border-left:1px solid #3A3B40;padding:0 0 32px 32px;display:grid;grid-template-columns:70px 1fr;gap:0 18px}.bio-tl li:before{left:-7px;top:2px}.bio-tl time{grid-column:1;grid-row:1 / span 2;padding-top:1px}.bio-tl h3{margin:0 0 8px;font-size:21px}.bio-tl p{grid-column:2;max-width:520px;font-size:16px}.bio-tl li:last-child{padding-bottom:0}.bio-tl-caption,.bio-tl-heading{max-width:760px}.bio-head h1{font-size:66px}}
@media(max-width:760px){.bio-container{width:calc(100% - 40px)}.bio-hero{height:auto;max-height:none;min-height:0;display:block;padding-top:230px}.bio-photo{height:230px;object-position:72% center}.bio-hero:after{background:linear-gradient(0deg,#000,transparent 38%);height:232px;bottom:auto}.bio-hero .bio-container{padding-block:24px 34px}.bio-hero h1{font-size:43px;letter-spacing:-.03em;max-width:570px}.bio-hero .bio-eyebrow{font-size:11px;letter-spacing:.12em;margin-bottom:18px;max-width:none}.bio-sub{font-size:17px;margin-top:20px;max-width:370px}.bio-byline{padding-block:22px;display:block;font-size:13px}.bio-byline>span{display:block}.bio-byline>span+span{margin-top:8px}.bio-editorial{display:block;padding-block:48px}.bio-label{margin:0 0 26px}.bio-copy h2{font-size:34px;margin-bottom:23px}.bio-copy p{font-size:17px;line-height:1.8}.bio-copy p.bio-lead{font-size:20px;line-height:1.65}.bio-notes{gap:8px}.bio-note{font-size:11px}.bio-quote{font-size:24px;padding-left:18px;margin-top:28px}.bio-chapter{padding-block:44px}.bio-chapter h2{font-size:31px}.bio-arrow{font-size:32px}.bio-head{padding:22px 0 46px}.bio-back{margin-bottom:31px}.bio-head h1{font-size:45px}.bio-intro{font-size:19px}.bio-tl-section{padding:44px 0 34px}.bio-tl-heading{font-size:34px}.bio-tl{width:calc(100% - 54px);margin-top:38px}.bio-tl li{grid-template-columns:52px 1fr;gap:0 14px;padding-left:25px;padding-bottom:30px}.bio-tl p{font-size:15px}.bio-tl h3{font-size:20px}.bio-tl-caption{font-size:12px;line-height:1.7}.bio-closing{padding-block:48px}.bio-closing h2{font-size:36px}.bio-closing p{font-size:18px}.bio-work{margin-top:25px}.bio-work li{grid-template-columns:44px 1fr;gap:12px}.bio-sources{font-size:12px}.bio-sources ul{padding-left:16px}}
/* Jose, 17/09/2026: «las letras chicas son demasiado chicas, todas». Suben los cuerpos pequeños. */
.bio-eyebrow{font-size:15px}
.bio-label{font-size:16px}
.bio-byline{font-size:17px}
.bio-note{font-size:14px}
.bio-signature strong{font-size:19px}
.bio-signature span{font-size:16px}
.bio-chapter p{font-size:18px}
.bio-back{font-size:16px}
.bio-tl time{font-size:16px}
.bio-tl h3{font-size:21px}
.bio-tl p{font-size:17px;max-width:210px}
.bio-tl-caption{font-size:15px}
.bio-copy .bio-work p{font-size:18px}
.bio-work h3{font-size:20px}
.bio-sources{font-size:16px}
.bio-copy p{font-size:19px}
@media(max-width:1100px){.bio-tl p{font-size:17px;max-width:520px}.bio-tl h3{font-size:22px}}
@media(max-width:760px){.bio-hero .bio-eyebrow{font-size:13px}.bio-eyebrow{font-size:13px}.bio-label{font-size:15px}.bio-byline{font-size:15px}.bio-note{font-size:13px}.bio-tl p{font-size:16px}.bio-tl time{font-size:15px}.bio-tl-caption{font-size:14px}.bio-sources{font-size:15px}.bio-copy p{font-size:18px}.bio-signature span{font-size:15px}.bio-chapter p{font-size:17px}}

/* Repaso de Jose, 16/09/2026 por la noche, solo para Biografía y El oficio.
   - Etiquetas «01 Quién está detrás»: Satoshi Light en azul Sekondo (el azul claro no es de
     la paleta) y el número al triple (16 → 48 px), encima del texto.
   - Hueco etiqueta-texto: columna ajustada a la etiqueta más ancha (176 px en Light) y
     separación a la mitad. El texto empieza en 204 px en vez de 288.
   - Márgenes de arriba y abajo de cada sección a la mitad. La cabecera no se toca.
   - Largo de línea: el cuerpo iba a 87 caracteres; se limita a unos 70 (lo de libro: 60-75).
   - Notas de maquetación en azul Sekondo con el texto blanco en mayúsculas. */
.bio-editorial{grid-template-columns:180px minmax(0,1fr);gap:24px;padding-block:44px}
.bio-label{font-weight:300;color:var(--bio-azul);margin:0}
.bio-label span{display:block;font-size:48px;line-height:1;margin:0 0 10px;color:var(--bio-azul)}
.bio-copy{max-width:none}
.bio-copy p{max-width:32em}
.bio-copy p.bio-lead{max-width:35em}
.bio-byline{padding-block:14px}
.bio-note{color:#fff;background:var(--bio-azul);border:0;text-transform:uppercase}
.bio-chapter{padding-block:31px}
.bio-tl-section{padding:31px 0 26px}
.bio-closing{padding-block:38px}
.bio-sources{padding-block:11px}
@media(max-width:1100px){.bio-editorial{grid-template-columns:180px minmax(0,1fr);gap:16px}}
@media(max-width:760px){.bio-editorial{padding-block:24px}.bio-label{margin:0 0 20px}.bio-label span{font-size:40px}.bio-chapter{padding-block:22px}.bio-tl-section{padding:22px 0 17px}.bio-closing{padding-block:24px}.bio-byline{padding-block:11px}}

/* «Sekondo» SIEMPRE en Black, en toda la web (Jose, 16/09/2026). El generador envuelve la
   palabra en <span class="sk"> al escribir cada página. Tracking −10, como todo Black;
   en las etiquetas en mayúsculas espaciadas hereda el espaciado de su línea. */
.sk{font-weight:900;letter-spacing:-.01em}
.eyebrow .sk,.bio-eyebrow .sk{letter-spacing:inherit}

/* LARGO DE LÍNEA, en toda la web (Jose, 16/09/2026: «ponlo como tú dices y aplícalo a toda la
   web»). Lo de libro: 60-75 caracteres por línea. Medido a 1440 px antes del cambio, el texto
   legal y la guía iban a ~150, las entradillas a ~110 y el cierre a ~90.
   33 em son unos 72 caracteres en Satoshi a cualquier cuerpo. Solo pone techo: lo que ya era
   más estrecho (tarjetas, columnas) no se mueve, y la alineación sigue a la izquierda. */
main p,main li,main blockquote{max-width:33em}
.hero-foto .hero-sub{max-width:33em}
/* Los que tenían un ancho propio más específico o más largo que 33 em. */
.hero p.lead,.hero-ico p.lead,.bio-closing p{max-width:33em}

/* Biografía y El oficio, segundo repaso (Jose, 16/09/2026):
   - Todos los azules claros de las dos páginas pasan al azul Sekondo. El azul claro queda en la
     paleta (--accent-claro) para cuando Jose diga dónde.
   - El antetítulo del hero en una sola línea en escritorio.
   - El número de las etiquetas, al triple también en el móvil (48 px). */
.bio{--bio-azul-claro:var(--accent)}
.bio-chapter:hover h2{color:var(--accent)}
@media(min-width:1101px){.bio-hero .bio-eyebrow{white-space:nowrap;max-width:none}}
@media(max-width:760px){.bio-label span{font-size:48px}}
/* Banda «Las herramientas cambiaron» de la biografía: fondo del lápiz desde el 16/09/2026.
   Las tres bandas salen del motivo «SK motivo - lapiz (4K)» con la escala y la posición
   medidas en la plumilla (82,3 / 64,2 / 47,1 %) y su caída radial a negro. */

/* Hero de la biografía, escritorio (Jose, 16/09/2026): «muy alto; redúcele margen superior e
   inferior sin tocar ninguna letra, y que no se me corte la cabeza ni me salga del margen».
   - La foto va como los fondos de los banners: ancho fijo, centrada y ENTERA de alto.
   - Ancho: el justo para que la figura (del 62 % al 81 % del ancho de la foto) no pase del
     margen derecho del contenido: su borde queda a 0,315 × ancho del centro → como mucho
     1778 px, o menos si la ventana es estrecha.
   - Márgenes del texto a la mitad: de 85 a 40 px. Si el texto pide más alto que la foto,
     la foto se apoya abajo y su borde de arriba funde a negro; los laterales también
     funden, porque la foto no acaba en negro como los iconos. */
@media(min-width:1101px){
  .bio-hero{--bio-foto:min(1778px, calc((100vw - 64px) * 1.587));height:auto;max-height:none;
    min-height:calc(var(--bio-foto) * 534 / 2794);padding-block:40px}
  .bio-photo{inset:auto;left:50%;bottom:0;width:var(--bio-foto);height:auto;transform:translateX(-50%);object-fit:contain;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent),linear-gradient(0deg,#000 92%,transparent);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent),linear-gradient(0deg,#000 92%,transparent);
    mask-composite:intersect}
}
@media(min-width:1101px){.bio-photo{max-width:none}}

/* Tercer repaso de Biografía y El oficio (Jose, 16/09/2026, noche). */
/* Botones verdes: texto negro SIEMPRE. En la biografía «.bio a» heredaba el blanco. */
.bio a.btn-primary,.bio a.btn-primary:hover{color:var(--ok-ink)}
.bio a.btn-azul{color:#fff}
/* Los números 40 / 02 / 13 de El oficio, en el verde destacado. */
.bio-number{color:var(--ok)}
/* «El tiempo que quiero recuperar»: la misma tipografía que la banda «Tú creas». */
.bio-closing h2{font-weight:900;letter-spacing:-.01em;line-height:var(--il-titular);font-size:clamp(1.9rem,3.8vw,3rem)}
.bio-closing p{color:var(--dark-ink-2);font-weight:400;letter-spacing:0;font-size:var(--t-entradilla);line-height:1.45}
/* Cabecera de El oficio al tamaño de las demás cabeceras interiores (.page-head). */
.bio-head{padding:30px 0 40px}
.bio-back{margin-bottom:24px}
.bio-head h1{font-size:clamp(2.6rem,6vw,3.5rem)}
/* La línea clara de encima de la banda final va a todo el ancho de la página, no del contenido. */
.bio .bio-sources{border-bottom:0}
/* (la línea a todo el ancho encima de la banda final pasó a la regla general de filetes, más abajo) */
/* 2026 en la línea de tiempo: el isotipo de Sekondo con halo suave, en el sitio del punto. */
.bio-tl li.bio-tl-hoy:before{display:none}
.bio-tl-sk{position:absolute;top:-18px;left:-11px;width:35px;height:35px;border-radius:50%;z-index:1;
  box-shadow:0 0 0 5px rgba(0,113,227,.22),0 0 26px 8px rgba(0,113,227,.5);transition:box-shadow .2s}
.bio-tl-sk img{width:100%;height:100%;display:block}
.bio-tl-sk:hover{box-shadow:0 0 0 6px rgba(0,113,227,.32),0 0 34px 12px rgba(0,113,227,.65)}
@media(max-width:1100px){.bio-tl-sk{top:-9px;left:-18px}}
/* La plumilla de las bandas, un 20 % más pequeña para que no toque los bordes (escritorio). */
@media(min-width:1068px){.banda.b-plumilla{background-size:1680px auto}}

/* Portada, franja de aplicaciones bajo el hero (Jose, 16/09/2026): fuera las píldoras,
   que parecían botones y no lo son. Queda el nombre en texto, en azul Sekondo. */
.appstrip .chip{background:none;border-color:transparent;color:var(--accent);padding-inline:0}

/* Aviso «lo está montando Sekondo» (Aplicaciones y Demos), 16/09/2026: fondo negro con la SK
   de cristal arriba, como los fondos de pantalla de Sekondo, y el texto debajo, sobre el reflejo.
   Sin filete discontinuo: el fondo ya dice que es nuestro. */
.en-camino{justify-content:flex-end;border:0;
  background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.55) 75%,#000),
             url("../img/sk-fondo-en-camino.webp") center top/cover no-repeat,#000;
  padding:34px 34px 38px}
@media (max-width:734px){
  .en-camino{background:linear-gradient(180deg,transparent 30%,#000 52%),
             url("../img/sk-fondo-en-camino.webp") center top/100% auto no-repeat,#000;
    padding-top:42vw}
}

/* Banners finales sin repetir entre páginas (Jose, 16/09/2026). El encargo deja las manos,
   que lleva la portada, y pasa a la tecla ⌘. */
.cta-final.b-cmd-a{background-image:url("../img/banners/sk-banda-cmd-a.webp")}
@media (max-width:1068px){.cta-final.b-cmd-a{background-image:url("../img/banners/sk-banda-cmd-a-tablet.webp")}}
@media (max-width:734px){.cta-final.b-cmd-a{background-image:url("../img/banners/sk-banda-cmd-a-movil.webp")}}
/* Ajuste del aviso: la SK más pequeña y arriba, para que no se monte sobre el texto; y el botón
   «Avísame cuando esté», que salía blanco sobre blanco (el .btn-ghost trae fondo blanco). */
.en-camino{background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.6) 62%,#000 80%),
             url("../img/sk-fondo-en-camino.webp") center -2%/68% auto no-repeat,#000}
.en-camino .btn,.en-camino .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.34)}
.en-camino .btn:hover{background:rgba(255,255,255,.12);color:#fff}
@media (max-width:734px){
  .en-camino{background:linear-gradient(180deg,transparent 30%,#000 52%),
             url("../img/sk-fondo-en-camino.webp") center top/100% auto no-repeat,#000;padding-top:42vw}
}

/* «Soy José Manuel Fernández.»: vuelve al blanco, y solo el nombre en Black, con su tracking
   de −10 (Jose, 16/09/2026). El resto de la frase, en su peso de siempre. */
.bio-nombre{font-weight:900;letter-spacing:-.01em}

/* «Sekondo» en Black va envuelto en <span class="sk">. Dos sitios lo partían (16/09/2026):
   - la firma de la biografía: «.bio-signature span» ponía en bloque también el span de dentro;
   - las preguntas de la Guía: el <summary> en flex convertía cada trozo en una pieza suelta.
   El summary pasa a bloque con el «+» colocado a la derecha. */
.bio-signature span .sk{display:inline;margin:0;font-size:inherit;color:inherit}
summary{display:block;position:relative;padding-right:40px}
summary::after{position:absolute;right:0;top:50%;transform:translateY(-50%)}

/* ==========================================================================
   FILETES, BANNERS FINALES Y EL OFICIO (Jose, 16/09/2026, noche)
   - Todos los filetes separadores: 1 px y el mismo gris, --filete (#4F4F54, gris de la paleta).
   - El banner final de cada página, con su filete arriba a todo el ancho.
   - Biografía y El oficio: las líneas entre secciones, a todo el ancho de la página.
   ========================================================================== */
:root{--filete:#4F4F54}
.bio{--bio-line:var(--filete);overflow-x:clip}
main > .banda:last-child, main > .cta-final:last-child, .bio > .banda:last-child{border-top:1px solid var(--filete)}
.page-head{border-bottom-color:var(--filete)}
.site-footer{border-top-color:var(--filete)}
/* Líneas de sección a todo el ancho: el borde del contenedor se sustituye por uno que sale de
   lado a lado con un pseudoelemento. */
.bio-editorial,.bio-byline,.bio-sources{position:relative;border-top:0;border-bottom:0}
.bio-editorial::after,.bio-byline::after{content:"";position:absolute;left:50%;bottom:0;width:100vw;
  transform:translateX(-50%);border-bottom:1px solid var(--filete);pointer-events:none}
.bio-sources::before{content:"";position:absolute;left:50%;top:0;width:100vw;transform:translateX(-50%);
  border-top:1px solid var(--filete);pointer-events:none}
.bio-tl-section{border-top:1px solid var(--filete);border-bottom:1px solid var(--filete)}

/* La línea de tiempo, sobre un gris muy oscuro que se distingue apenas del negro: el #1D1D1F
   que la web ya usa en el terminal y en los bloques de código. */
.bio-tl-section{background:#1D1D1F}
.bio-tl li:before{background:#1D1D1F}
/* Titulares de los hitos en verde, menos el de Sekondo. */
.bio-tl li:not(.bio-tl-hoy) h3{color:var(--ok)}
/* El isotipo de 2026, un 50 % más grande (35 → 52 px), con el centro en el mismo sitio. */
.bio-tl-sk{width:52px;height:52px;top:-27px;left:-20px}
@media(max-width:1100px){.bio-tl-sk{top:-18px;left:-27px}}

/* Cabecera de El oficio con el lápiz de fondo, igual que las bandas: ancho fijo y centrado en
   escritorio; en tableta y móvil, el dibujo arriba y el texto debajo. */
.bio-black{font-weight:900;letter-spacing:-.01em}
.bio-head-lapiz{background:url("../img/banners/sk-banda-lapiz.webp") center center/2100px auto no-repeat,#000}
@media (max-width:1068px){
  .bio-head-lapiz{background:url("../img/banners/sk-banda-lapiz-tablet.webp") center top/1068px auto no-repeat,#000}
  .bio-head-lapiz .bio-head{padding-top:370px}   /* como las bandas: 301 del motivo mas alto + 70 (18/09/2026) */
}
@media (max-width:734px){
  .bio-head-lapiz{background:url("../img/banners/sk-banda-lapiz-movil.webp") center top/430px auto no-repeat,#000}
  .bio-head-lapiz .bio-head{padding-top:300px}
}

/* Banda del motivo «diseñador» (la plumilla gordita de cristal), de respiro en la Comparativa.
   Archivos sacados del motivo 4K con el mismo encuadre que la plumilla (16/09/2026). */
.banda.b-disenador{background-image:url("../img/banners/sk-banda-disenador.webp")}
@media (max-width:1068px){.banda.b-disenador{background-image:url("../img/banners/sk-banda-disenador-tablet.webp")}}
@media (max-width:734px){.banda.b-disenador{background-image:url("../img/banners/sk-banda-disenador-movil.webp")}}

/* ==========================================================================
   PORTADA · hero, franja y primera sección (Jose, 16/09/2026, noche)
   ========================================================================== */
/* «Tu IA ya sabía usar Photoshop.» un 30 % más pequeño; «Ahora tiene manos.» un 30 % más grande. */
.hero-foto h1 .h1-a{font-size:max(.7em,24px)}   /* la linea chica nunca por debajo del H3 de movil (24) */
.hero-foto h1 .h1-b{font-size:1.3em}
/* La franja de debajo ya no lleva los seis programas: lleva la frase de qué es Sekondo, en blanco,
   a la izquierda y con la tipografía que tenían los nombres (tamaño pequeño, Bold). */
.appstrip-inner{display:block}
.appstrip-texto{margin:0;color:#fff;text-align:left;font-size:var(--t-pequeno);font-weight:700;line-height:1.5;max-width:none}
.appstrip-texto br.brk{display:inline}
/* Primera sección con la plumilla: el texto a la izquierda con su ancho de siempre y la plumilla en
   el hueco blanco de la derecha, del alto del bloque de texto, centrada en ese hueco. La foto es
   cuadrada y sobre blanco: se funde con el fondo (multiply) y lo que sobresale por los lados es
   blanco, así que no tapa nada. */
.gancho-con-plumilla{overflow:hidden}
.gancho-con-plumilla .gancho-inner{display:grid;grid-template-columns:minmax(0,33em) minmax(0,1fr);gap:48px}
.gancho-con-plumilla .gancho-texto{position:relative;z-index:1}
.gancho-plumilla{position:relative;pointer-events:none}
.gancho-plumilla img{position:absolute;top:0;bottom:0;left:50%;height:100%;width:auto;max-width:none;
  aspect-ratio:1;transform:translateX(-50%);mix-blend-mode:multiply}
@media (max-width:900px){
  .gancho-con-plumilla .gancho-inner{grid-template-columns:1fr;gap:0}
  .gancho-plumilla{height:320px}
}
/* El fondo de la foto no es blanco puro (medido: 250-254 de 255) y dejaba ver el cuadrado.
   Un +2,5 % de brillo lo lleva a 255 y la plumilla apenas cambia. */
.gancho-plumilla img{filter:brightness(1.025)}

/* Portada, segunda vuelta (Jose, 16/09/2026):
   - Hero: la frase vuelve debajo del titular, con los mismos tamaños de titular.
   - «Seis cosas…»: la entradilla en bandera a la izquierda y la plumilla sobre blanco a su derecha,
     fundida con el gris del fondo (multiply), del alto del texto. */
.lead-con-plumilla{display:grid;grid-template-columns:minmax(0,33em) minmax(0,1fr);gap:48px;margin-top:6px}
.lead-con-plumilla .lead{margin:0;text-align:left;position:relative;z-index:1}
.lead-plumilla{position:relative;pointer-events:none;min-height:160px}
.lead-plumilla img{position:absolute;top:50%;left:50%;height:150%;width:auto;max-width:none;aspect-ratio:1;
  transform:translate(-50%,-50%);mix-blend-mode:multiply;filter:brightness(1.025)}
@media (max-width:900px){
  .lead-con-plumilla{grid-template-columns:1fr;gap:0}
  .lead-plumilla{height:220px}
  .lead-plumilla img{height:100%}
}

/* ==========================================================================
   Topes de tableta y móvil de Biografía y El oficio (Jose, 16/09/2026). El resto de este
   bloque («RESPONSIVE: letras grandes, no gigantes») se borró el 18/09/2026: lo hacen las
   variables por tramo del :root. Estas cuatro líneas se quedan hasta que la biografía pase a
   la escala con Jose delante (informe tipografia.md, 3.4 y decisión 0.6).
   ========================================================================== */
@media (max-width:1068px){
  .bio-copy h2,.bio-closing h2,.bio-tl-heading,.bio-chapter h2{font-size:34px}
  .bio-hero h1,.bio-head h1{font-size:44px}
}
@media (max-width:734px){
  .bio-copy h2,.bio-closing h2,.bio-tl-heading,.bio-chapter h2{font-size:28px}
  .bio-hero h1,.bio-head h1{font-size:36px}
}

/* Portada (Jose, 16/09/2026):
   - «El 90 %»: texto 60 %, plumilla 40 %, y la plumilla contenida en su columna (no gigante).
   - «Una licencia. Toda la suite.»: la columna de razones, alineada a la base.
   - Cierre: «Reserva tu plaza» y «Todas las preguntas» en la misma fila. */
.gancho-con-plumilla .gancho-inner{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
.gancho-con-plumilla .gancho-texto p{max-width:none}
.gancho-plumilla img{left:0;right:0;top:50%;bottom:auto;width:100%;height:auto;max-height:100%;
  transform:translateY(-50%);object-fit:contain}
#pricing .razones{align-self:end}
.cta-botones{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:4px}
.cta .cta-botones .btn{align-self:center}
@media (max-width:900px){
  .gancho-con-plumilla .gancho-inner{grid-template-columns:1fr}
  .gancho-plumilla img{position:static;transform:none;width:auto;height:100%;margin:0 auto;display:block}
}

/* Marcas «FALTA ICONO» (Jose, 16/09/2026). Ocultas siempre, salvo en local (html.marcas). */
.falta-icono{display:none}
html.marcas .falta-icono{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  position:absolute;z-index:5;top:50%;transform:translateY(-50%);right:max(48px, calc((100% - 1112px) / 2));
  width:220px;height:220px;padding:14px;text-align:center;background:#E0262F;color:#fff;
  font:700 15px/1.3 var(--font);letter-spacing:.02em;border-radius:6px;pointer-events:none}
html.marcas .falta-icono span{font-weight:500;font-size:13px}
html.marcas section:has(> .falta-icono){position:relative}
html.marcas .bio-editorial > .falta-icono,html.marcas .bio-closing > .falta-icono{right:0}
html.marcas .bio-closing:has(> .falta-icono){position:relative}
/* En pantallas estrechas la marca taparía el texto: allí no se enseña. */
@media (max-width:900px){html.marcas .falta-icono{display:none}}

/* «El método» (Jose, 17/09/2026): el terminal llega hasta la base de su columna y el botón
   «Míralo trabajar» se queda abajo a la izquierda, con las dos bases alineadas. */
.metodo{align-items:stretch}
.metodo-texto{display:flex;flex-direction:column}
.metodo-boton{margin:auto 0 0;padding-top:26px}
.metodo .term{display:flex;flex-direction:column}
.metodo .term-body{flex:1}
@media (max-width:900px){.metodo-boton{margin-top:0}}

/* «Seis cosas…»: la entradilla al 75 % del ancho, en bandera (Jose, 17/09/2026). */
.section-head .lead-75{max-width:75%;text-align:left}
@media (max-width:900px){.section-head .lead-75{max-width:none}}

/* Franja de las seis aplicaciones: centrada (Jose, 17/09/2026). */
.appstrip-texto{text-align:center;margin-inline:auto}

/* Aplicaciones, PRUEBA en la tarjeta de InDesign (Jose, 17/09/2026): «Lo siguiente, con los
   doscientos primeros» debajo del vídeo, en línea corrida, en vez de lista a la derecha. */
.app-siguiente{margin-top:26px;padding-top:18px;border-top:1px solid var(--filete)}
.app-siguiente .eyebrow{margin:0 0 8px;color:var(--ink-3)}
.app-siguiente-lista{margin:0;color:var(--ink-3);line-height:1.6}
/* La prueba, segunda vuelta: «Lo siguiente» como pie de la tarjeta, a todo el ancho y en una
   línea con su rótulo delante; las dos columnas de arriba quedan casi del mismo alto. */
.app-card-v2 .app-siguiente{display:flex;gap:18px;align-items:baseline;margin-top:30px;padding-top:20px}
.app-card-v2 .app-siguiente .eyebrow{margin:0;flex:none}
.app-card-v2 .app-siguiente-lista{max-width:none}
@media (max-width:900px){.app-card-v2 .app-siguiente{display:block}.app-card-v2 .app-siguiente .eyebrow{margin-bottom:8px}}

/* Iconos de sección (17/09/2026): cristal azul sobre blanco, a la derecha de las zonas de texto
   seguido, fundidos con el fondo blanco o gris claro. En pantallas estrechas no se enseñan. */
.icono-seccion{position:absolute;z-index:0;top:50%;transform:translateY(-50%);
  right:max(48px, calc((100% - 1112px) / 2));width:260px;height:260px;pointer-events:none}
.icono-seccion img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;display:block}
section:has(> .icono-seccion){position:relative}
section:has(> .icono-seccion) > .wrap{position:relative;z-index:1}
@media (max-width:900px){.icono-seccion{display:none}}

/* El oficio, «El tiempo que quiero recuperar»: banda de gris oscuro a todo el ancho (Jose, 17/09/2026),
   el mismo #1D1D1F de la línea de tiempo. */
.bio-closing{position:relative;isolation:isolate}
.bio-closing::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:100vw;
  transform:translateX(-50%);background:#1D1D1F}
/* Ajuste medido: el contenido de las secciones con icono deja libre la franja del icono (no lo
   pisa ni un titular largo en inglés ni una tabla), y el icono nunca pasa del alto de su sección. */
@media (min-width:901px){
  section:has(> .icono-seccion) > .wrap > *{max-width:calc(100% - 300px)}
  .icono-seccion{height:min(260px, calc(100% - 24px));width:auto;aspect-ratio:1}
}
/* El fondo de los iconos baja a 247-253 unos 30 px hacia dentro y dejaba intuir el cuadrado: +3 %
   de brillo lo lleva a blanco, como la plumilla. */
.icono-seccion img{filter:brightness(1.03)}

/* Iconos 14-16 sobre negro (Biografía y El oficio, autorizados por Jose el 17/09/2026): fondo negro
   fundido con «screen», a la derecha de la columna de texto. */
.icono-negro img{mix-blend-mode:screen;filter:none}
.bio-editorial > .icono-seccion,.bio-closing > .icono-seccion{right:0}
.bio-closing:has(> .icono-seccion){position:relative}
@media (min-width:901px){
  .bio-editorial:has(> .icono-seccion) .bio-copy{max-width:calc(100% - 300px)}
  .bio-closing:has(> .icono-seccion) > :not(.icono-seccion){max-width:calc(100% - 300px)}
}

/* Portada: el precio de 29 € en el verde destacado (Jose, 17/09/2026). */
.precio-home strong{color:var(--ok)}
/* Tarjeta de InDesign, pie «Lo siguiente»: el rótulo en verde, en dos líneas y en bandera a la
   derecha, separado de la lista por un filete vertical (Jose, 17/09/2026). */
.app-card-v2 .app-siguiente{align-items:center;gap:0}
.app-card-v2 .app-siguiente .eyebrow{color:var(--ok);text-align:right;line-height:1.5;padding-right:20px}
.app-card-v2 .app-siguiente-lista{border-left:1px solid var(--filete);padding-left:20px}
@media (max-width:900px){
  .app-card-v2 .app-siguiente .eyebrow{text-align:left;padding-right:0}
  .app-card-v2 .app-siguiente-lista{border-left:0;padding-left:0}
}
/* El pie, centrado de verdad: la lista traía 14 px de margen superior heredado, y el aire entre el
   filete de arriba y el borde de la tarjeta queda igual por arriba y por abajo (30 px). */
.app-card-v2 .app-siguiente{padding-top:30px}
.app-card-v2 .app-siguiente > *{margin:0}

/* El icono no puede crear su propio contexto de apilado: con z-index se fundía contra un fondo vacío
   y dejaba ver el marco (negro en trama, blanco en multiplicar sobre gris). Sin z-index se funde con
   la sección; el texto sigue por encima gracias al z-index de su columna. */
.icono-seccion{z-index:auto}
.bio-closing:has(> .icono-seccion) > :not(.icono-seccion){position:relative;z-index:1}
/* Y el transform del centrado también aislaba el icono (crea contexto de apilado). Se centra sin
   transform: arriba y abajo a 0 con margen automático. */
.icono-seccion{transform:none;top:0;bottom:0;margin-block:auto}

/* El oficio: los números 40 / 02 / 13 pasan del verde al gris (Jose, 17/09/2026), el gris de apoyo
   de la paleta (#86868B), que se lee sobre negro sin competir con los titulares. */
.bio-number{color:var(--ink-3)}

/* Aplicaciones, tarjetas con poco «Ya hecho»: «Lo siguiente» debajo de esa lista, en la columna
   derecha, con filete arriba y el rótulo verde encima de la línea corrida (sin filete vertical). */
.sig-en-columna .app-siguiente{display:block;margin-top:24px;padding-top:20px;border-top:1px solid var(--filete)}
.sig-en-columna .app-siguiente .eyebrow{text-align:left;padding-right:0;margin:0 0 8px}
.sig-en-columna .app-siguiente-lista{border-left:0;padding-left:0}
/* La franja libre del icono no puede quitar el tope de largo de línea: gana el más estrecho. */
@media (min-width:901px){
  .bio-closing:has(> .icono-seccion) > p{max-width:min(33em, calc(100% - 300px))}
  section:has(> .icono-seccion) > .wrap > p{max-width:min(33em, calc(100% - 300px))}
}
/* El pie «Lo siguiente» a todo el ancho también respeta el largo de línea. */
.app-card-v2 .app-siguiente-lista{max-width:33em}

/* Demos: los titulares de los vídeos, un 25 % sobre el H3 (Jose, 17/09/2026). EXCEPCION 5 de la
   escala: 34 / 30 / 30 por tramo, que ya salen solos del calc() con la variable por tramo. */
.alt .card > .h-cierre{font-size:calc(var(--t-cierre) * 1.25)}
/* El diseñador, como la plumilla: un 20 % más pequeño en escritorio para que no toque los bordes. */
@media (min-width:1068px){.banda.b-disenador{background-size:1680px auto}}

/* Aplicaciones: «Reserva tu plaza» con el mismo aire arriba y abajo (16 px), haya vídeo o aviso
   debajo (Jose, 17/09/2026). */
.app-card-v2 .btn-primary + video,.app-card-v2 .btn-primary + .en-camino{margin-top:16px}

/* Varios a la vez: el icono de las tres figuras, más grande (Jose, 17/09/2026): casi todo el alto de
   la cabecera, hasta 420 px. */
@media (min-width:901px){
  .icono-seccion:has(img[src*="17-tres-figuras"]){height:min(420px, calc(100% - 16px))}
}
@media (min-width:901px) and (max-width:1279px){
  .icono-seccion:has(img[src*="17-tres-figuras"]){height:min(260px, calc(100% - 24px))}
}

/* El encargo · el argumento en cuatro bloques: titular al tamaño de «Sekondo escribe el código…»
   (gancho-cierre) en Black; párrafo como estaba; los dos alineados a la izquierda (Jose, 17/09/2026). */
.argumento h2,.argumento .lead{max-width:33em;margin-left:0;margin-right:0}
.argumento h2{font-size:var(--t-cierre);letter-spacing:-.01em;line-height:var(--il-titular);color:var(--ink);margin:52px 0 8px}   /* H3: 27,2 / 24 / 24 */
.argumento h2:first-child{margin-top:0}
.argumento .lead{margin-bottom:0}
/* «Y no, no tienes que cobrar menos.»: al tamaño del titular de las bandas, en sus tres cortes (Jose, 17/09/2026). */
.argumento h2.como-banda{font-size:var(--t-titular);letter-spacing:-.01em;line-height:var(--il-titular)}

/* ============================================================================
   LA ESCALA, UNIFICADA (Jose, 17/09/2026), solo en escritorio. El 18/09/2026 la escala pasó
   a las reglas de origen y a los tres tramos (variables del :root), y de este bloque solo
   quedan las líneas de Biografía y El oficio, que se pasan a la escala con Jose delante
   (informe tipografia.md, 3.4 y decisión 0.6). Las excepciones de Jose siguen donde están:
     1. Titular de la portada a dos tamaños (.h1-a / .h1-b), 72 px fijos.
     2. Subtítulo de la portada en Regular a 18,4 px (.hero-sub).
     3. Etiquetas de Biografía y El oficio en Light azul.
     4. Titulares de Biografía y El oficio en Medium.
     5. Títulos de vídeo de Demos al 125 % del H3 (.alt .card > .h-cierre).
   ============================================================================ */
@media (min-width:1069px){
  .bio-eyebrow{font-size:var(--t-etiqueta)}
  .bio-tl-caption{font-size:var(--t-pequeno)}
  .bio-byline,.bio-tl p,.bio-copy p,.bio-signature strong{font-size:var(--t-cuerpo)}
  .bio-work h3,.bio-intro,.bio-tl h3,.bio-copy p.bio-lead{font-size:var(--t-entradilla)}
  .bio-quote,.bio-number{font-size:var(--t-cierre)}
  .bio-closing h2,.bio-copy h2,.bio-tl-heading,.bio-label span{font-size:var(--t-titular)}
  .bio-head h1,.bio-hero h1{font-size:var(--t-display)}
}

/* ============================================================================
   LA GUÍA (Jose, 17/09/2026): «fabrica un hero con el icono de cristal a la derecha» y el texto de
   primeros pasos al 70 % del ancho, con margen, no pegado a la izquierda. Los textos no se tocan.
   ============================================================================ */
.hero-guia .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.72fr);align-items:center;gap:40px;
  padding-block:24px}
.hero-guia h1{font-size:var(--t-display);margin:0}
.hero-guia .lead{margin:18px 0 0;max-width:24em}
.hero-guia-icono{justify-self:end;width:100%;max-width:440px;aspect-ratio:1}
.hero-guia-icono img{width:100%;height:100%;object-fit:contain;display:block;mix-blend-mode:multiply;filter:brightness(1.03)}
.guia-cuerpo .prose{width:calc((min(100%, var(--maxw)) - 96px) * .7);max-width:none;margin-inline:auto;padding-inline:0}   /* 70 % del ancho de contenido de la web */
.guia-cuerpo .prose > p,.guia-cuerpo .prose > ul{max-width:none}
.guia-cuerpo .prose > h2:first-child{margin-top:0}
@media (max-width:900px){
  .hero-guia .wrap{grid-template-columns:1fr;gap:8px;padding-block:8px}
  .hero-guia-icono{grid-row:1;justify-self:center;max-width:220px}
  .hero-guia-texto{text-align:center}
  .hero-guia .lead{margin-inline:auto}
  .guia-cuerpo .prose{width:auto;padding-inline:20px}
}
@media (max-width:734px){.guia-cuerpo .prose{padding-inline:20px}}

/* ============================================================================
   COMPARATIVA · la tabla, más grande y partida por bloques (Jose, 17/09/2026):
   «ponme todos los textos de la tabla más grandes, que me voy a quedar ciego» y una barra
   horizontal en cada bloque (Dónde puede entrar, Qué te devuelve… El precio).
   Tamaños dentro de la escala (18/09/2026): filas y cabecera al Cuerpo 18; notas a Pequeño 16;
   el nombre de cada bloque al H3 en Black, encima de su barra. A la vista de Jose: la tabla
   baja de 21,8 a 18.
   ============================================================================ */
.vs{font-size:var(--t-cuerpo)}
.vs thead th{font-size:var(--t-cuerpo)}
.vs th,.vs td{padding:18px 22px}
.vs td .small{font-size:var(--t-pequeno);margin-top:6px}
.vs th.c,.vs td.c{width:14%}
.vs td:first-child{max-width:none}
.vs tbody tr.sec td{font-size:var(--t-cierre);letter-spacing:-.01em;text-transform:none;color:var(--ink);
  padding-top:34px;padding-bottom:14px;border-top:2px solid var(--ink)}
.vs tbody tr.sec strong{font-weight:900}
@media (max-width:734px){
  .vs th,.vs td{padding:14px 16px}
}

/* Guía: la cabecera, a la mitad de alta (Jose, 17/09/2026): de 620 a unos 310 px.
   La tecla Intro, un 50 % más grande (Jose, 17/09/2026, tarde): de 270 a 405 px. */
@media (min-width:901px){
  section.hero-guia{padding-block:20px}
  .hero-guia .wrap{padding-block:0}
  .hero-guia-icono{max-width:405px}
}

/* ============================================================================
   ICONOS DE CRISTAL MÁS GRANDES (Jose, 17/09/2026): «por lo menos un 50 % más grandes, todos; y los
   de las cabeceras, que se quedan ridículos, del tirón. Sin salirse y sin que pisen los textos.»
   · Dentro de la página: de 260 a 390 px.
   · En las cabeceras (la sección del h1): hasta 460 px, y la cabecera mide al menos 480 px para que
     quepa; su contenido se centra en vertical.
   · El texto deja libre la franja del icono. La imagen trae aire blanco alrededor del objeto, así que
     el icono de cabecera puede asomar 40 px al margen exterior sin que se note el borde.
   ============================================================================ */
@media (min-width:1280px){
  .icono-seccion,
  .icono-seccion:has(img[src*="17-tres-figuras"]){height:min(390px, calc(100% - 16px));width:auto;aspect-ratio:1}
  section:has(> .icono-seccion) > .wrap > *{max-width:calc(100% - 430px)}
  section:has(> .icono-seccion) > .wrap > p{max-width:min(33em, calc(100% - 430px))}

  /* CABECERAS CON TITULAR · un cuarto para el icono, tres cuartos para el texto
     (Jose, 21/09/2026). Antes el icono medía 460 px —el 41 % del ancho— y obligaba a la
     cabecera a medir 480 px de alto, con lo que el primer campo del formulario de reserva
     se iba por debajo del pliegue en un portátil de 1280×720.
     Contenido útil: 1112 px. Un cuarto = 278. Tres cuartos = 834. */
  section:has(> .icono-seccion):has(h1){min-height:320px;display:flex;flex-direction:column;justify-content:center}
  section:has(> .icono-seccion):has(h1) > .wrap{width:100%}
  section:has(> .icono-seccion):has(h1) > .icono-seccion,
  section:has(> .icono-seccion):has(h1) > .icono-seccion:has(img[src*="17-tres-figuras"]){
    height:min(278px, calc(100% - 20px));right:max(8px, calc((100% - 1112px) / 2 - 40px))}
  section:has(> .icono-seccion):has(h1) > .wrap > *{max-width:calc(100% - 278px)}
  section:has(> .icono-seccion):has(h1) > .wrap > p{max-width:min(33em, calc(100% - 278px))}
}
@media (min-width:901px) and (max-width:1279px){
  .icono-seccion,
  .icono-seccion:has(img[src*="17-tres-figuras"]){height:min(320px, calc(100% - 16px));width:auto;aspect-ratio:1}
  section:has(> .icono-seccion):has(h1) > .icono-seccion,
  section:has(> .icono-seccion):has(h1) > .icono-seccion:has(img[src*="17-tres-figuras"]){height:min(230px, calc(100% - 16px))}
  section:has(> .icono-seccion):has(h1){min-height:270px;display:flex;flex-direction:column;justify-content:center}
  section:has(> .icono-seccion):has(h1) > .wrap{width:100%}
  section:has(> .icono-seccion) > .wrap > *{max-width:calc(100% - 360px)}
  section:has(> .icono-seccion) > .wrap > p{max-width:min(33em, calc(100% - 360px))}
}

/* Guía, «Todas las preguntas»: la interrogación al 200 % (de 260 a 520 px) y arriba, a la altura del
   titular (Jose, 17/09/2026). Las preguntas dejan libre su franja. */
@media (min-width:1280px){
  section:has(> .icono-seccion img[src*="08-interrogacion"]) > .icono-seccion{
    height:min(520px, calc(100% - 2 * var(--sec)));top:calc(var(--sec) - 52px);bottom:auto;margin-block:0}   /* -52 px: el aire blanco de la imagen, para que el dibujo arranque a la altura del titular */
  section:has(> .icono-seccion img[src*="08-interrogacion"]) > .wrap > *{max-width:calc(100% - 500px)}
}

/* Descargas, la tarjeta «macOS y Windows» (Jose, 17/09/2026): todo centrado en un bloque al 70 % del
   ancho de la tarjeta; «macOS y Windows» al cuerpo de los titulares h2 («Tres pasos y un piloto
   verde»); el botón verde al ancho de ese bloque, no de la tarjeta. */
.card.plataformas{text-align:center}
.card.plataformas > *{width:70%;max-width:none;margin-left:auto;margin-right:auto}
.card.plataformas h3{font-size:var(--t-titular);line-height:var(--il-titular);margin-bottom:14px}
.card.plataformas .btn-block{width:100%}
@media (max-width:734px){.card.plataformas > *{width:100%}}

/* Precios por escalones (Jose, 17/09/2026): 1 aplicación, 3, pack de 6 y estudio. Cuatro tarjetas
   necesitan el ancho de la página, no los 880 px de cuando eran dos. */
.planes.g4{max-width:none}
@media (max-width:1180px){.planes.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:734px){.planes.g4{grid-template-columns:minmax(0,1fr)}}

/* Precios sobre fondo marino (Jose, 18/09/2026: «quiero que esta sección vaya con fondo marino»).
   Las tarjetas blancas se quedan blancas; el pack de 6, que ya era marino, se separa del fondo
   con el negro azulado y el filete verde de destacado. */
#plans.on-dark .price-card:not(.featured){background:#fff;color:var(--ink)}
#plans.on-dark .price-card.featured{background:var(--dark-2);border-color:var(--ok)}
#plans.on-dark .toggle{background:var(--dark-2);border-color:var(--dark-line)}
#plans.on-dark .toggle button{color:var(--dark-ink-2)}
#plans.on-dark .toggle button[aria-pressed="true"]{background:#fff;color:var(--ink)}
#plans.on-dark .price-card:not(.featured) .btn-ghost{background:#fff;border-color:var(--line-2);color:var(--ink)}
#plans.on-dark .price-card:not(.featured) .btn-ghost:hover{background:var(--ink);border-color:var(--ink);color:#fff}
#plans.on-dark .price-card:not(.featured) .feat li{color:var(--ink-2);border-bottom-color:var(--line)}
#plans.on-dark .price-card:not(.featured) .feat li::before{color:var(--accent)}
#plans.on-dark .price-card:not(.featured) h3,
#plans.on-dark .price-card:not(.featured) .price-sub,
#plans.on-dark .price-card:not(.featured) .price .per{color:var(--ink-2)}
#plans.on-dark .price-card:not(.featured) .price .amount{color:var(--ink)}
/* Jose, 18/09/2026: «todos los marcos de 200 plazas en total en azul Sekondo con el texto en
   blanco; y los nombres (1 aplicación, 3 aplicaciones, pack de 6, estudio) también en azul y dos
   o tres cuerpos más». Del cuerpo (18) al cierre (27,2): dos pasos de la escala. */
#plans .price-card .ribbon,
#plans .price-card.featured .ribbon,
#plans .price-card:not(.featured) .ribbon{background:var(--accent);color:#fff;border:1px solid var(--accent)}
#plans .price-card h3,
#plans.on-dark .price-card:not(.featured) h3,
#plans .price-card.featured h3{color:var(--accent);font-size:var(--t-cierre);line-height:1.15;font-weight:900;letter-spacing:-.01em}
/* Jose, 18/09/2026: los botones de las tarjetas blancas («Elige tu aplicación», «Elige tus tres»,
   «Hablemos») en negro, y al pasar el ratón en blanco. */
#plans .price-card:not(.featured) .btn-ghost,
#plans.on-dark .price-card:not(.featured) .btn-ghost{background:var(--ink);border-color:var(--ink);color:#fff}
#plans .price-card:not(.featured) .btn-ghost:hover,
#plans.on-dark .price-card:not(.featured) .btn-ghost:hover{background:#fff;border-color:var(--ink);color:var(--ink)}
/* Jose, 18/09/2026: relleno de las tarjetas de precio a la mitad (de 34 a 17 px) para que los
   textos respiren; y en la destacada (3 aplicaciones) el nombre y el precio en verde. */
#plans .price-card{padding:17px}
#plans .price-card.featured h3,
#plans .price-card.featured .price .amount,
#plans .price-card.featured .price .per{color:var(--ok)}
#plans .price-card{padding-top:30px}   /* la cinta «200 plazas» monta sobre el borde: arriba hace falta su hueco */
/* Jose, 18/09/2026: las tarjetas blancas con filete azul Sekondo del mismo grueso que el verde. */
#plans .price-card:not(.featured){outline:2px solid var(--accent);outline-offset:-2px;border-color:var(--accent)}

/* Formulario de reserva: plan y aplicaciones (Jose, 18/09/2026) */
.planes-form{border:0;padding:0;margin:0 0 18px}
.planes-form legend{font-weight:700;margin-bottom:8px;padding:0}
.opciones-plan{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.opcion-plan,.opcion-app{display:flex;gap:10px;align-items:center;border:1px solid var(--line-2);border-radius:12px;
  padding:10px 12px;cursor:pointer;background:#fff}
.opcion-plan input,.opcion-app input{width:auto;margin:0;accent-color:var(--accent)}
.opcion-plan span{display:flex;flex-direction:column;line-height:1.25}
.opcion-plan small{color:var(--ink-2);font-size:var(--t-pequeno)}
/* Jose, 20/09/2026: «que se ponga en azul con el texto en blanco, que así estamos
   demasiado discretos». El plan elegido se ve desde el otro lado de la mesa. */
/* El PLAN elegido va en azul solido: es una decision, y se tiene que ver.
   Las APLICACIONES, no (Jose, 20/09/2026): son seis casillas y en azul macizo la pantalla
   se convierte en un muro de rectangulos. Con el check y el filete azul basta. */
.opcion-plan:has(input:checked){
  border-color:var(--accent);background:var(--accent);color:#fff;box-shadow:0 0 0 1px var(--accent)}
.opcion-plan:has(input:checked) small,.opcion-plan:has(input:checked) b,
.opcion-plan:has(input:checked) span{color:#fff}
.opcion-plan:has(input:checked) input{accent-color:#fff}
.opcion-app:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.bloque-apps{margin-top:16px}
.apps-titulo{margin:0 0 8px}
.opciones-app{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.opcion-app:has(input:disabled){cursor:default;opacity:.85}
.bloque-puestos{margin-top:16px}
@media (max-width:520px){.opciones-plan,.opciones-app{grid-template-columns:minmax(0,1fr)}}

/* Gancho del precio en la portada (17/09/2026) */
#pricing .precio-gancho{margin:34px 0 0;font-size:var(--t-cierre);line-height:var(--il-titular);color:#fff;font-weight:900;letter-spacing:-.01em}   /* al H3/Cierre (decision 0.5, 18/09/2026) */

/* Franja: el precio en negrita, al mismo tamaño que el resto (Jose, 17/09/2026) */
.franja .franja-gancho{font-weight:900;color:#fff}

/* El vídeo de la portada (18/09/2026): a todo el ancho de su columna, con el pie debajo. */
.video-portada{margin:0}
.video-portada video{display:block;width:100%;height:auto}
.video-portada figcaption{margin-top:12px;color:var(--dark-ink-2)}
@media (max-width:900px){.video-portada{margin-top:8px}}

/* Garantías de Precios (18/09/2026): cuatro líneas en dos columnas, centradas, y el botón debajo. */
.garantias-bloque{max-width:900px;margin:0 auto}
.feat.garantias{display:grid;grid-template-columns:1fr 1fr;gap:4px 48px;margin:0}
@media (max-width:734px){.feat.garantias{grid-template-columns:1fr}}

/* Aviso del formulario (18/09/2026): «Hecho» en una caja verde, en cuerpo y negrita, para que se vea. */
[data-aviso].hecho{display:block;margin-top:18px;padding:16px 20px;border-radius:12px;background:var(--ok);color:#000;font-size:var(--t-cuerpo);font-weight:700;max-width:33em}
[data-aviso].fallo{display:block;margin-top:18px;padding:16px 20px;border-radius:12px;background:#FFE3E3;color:#000;font-size:var(--t-cuerpo);font-weight:700;max-width:33em}

/* 18/09/2026 · Sin tachados (Directiva Ómnibus: no se tacha un precio que nunca se ha cobrado): «después, 12 €». */
.price .was,.precio-home .antes{text-decoration:none}
/* La cara y el nombre al pie de las razones de «Por qué Sekondo» (Jose, 18/09/2026). El banner
   grande se probó y se dejó esto: «ya lo cambiaremos». */
.quien-firma{display:block;margin-top:28px;border-top:1px solid rgba(255,255,255,.14);padding-top:22px;color:inherit;text-decoration:none}
.quien-firma img{display:block;width:100%;height:auto;border-radius:12px}
.quien-firma-texto{display:block;margin-top:12px;font-size:var(--t-pequeno);color:var(--dark-ink-2)}
.quien-firma-texto strong{display:block;color:#fff;font-size:var(--t-cuerpo);margin-bottom:2px}
.quien-firma:hover .quien-firma-texto span{color:var(--ok)}
/* Reserva: lo opcional, plegado. */
.mas-datos{margin:6px 0 18px;border-top:1px solid var(--line,#e5e5ea);padding-top:12px}
.mas-datos summary{cursor:pointer;font-weight:700;padding:6px 0;list-style:none}
.mas-datos summary::before{content:"+ ";color:var(--accent,#0071E3)}
.mas-datos[open] summary::before{content:"− "}
.plaza-numero{color:var(--accent,#0071E3)}

/* ===== Ajustes pedidos por Jose el 18/09/2026, medidos =====
   1) Los iconos de sección se alinean con el eje de los motivos de las bandas. Medido con ffmpeg
      sobre los archivos de banda (4200 px, se pintan a 2100): el motivo está centrado en 1440-1520
      de esa imagen, o sea a unos 430 px a la derecha del centro de la ventana. Antes el icono se
      anclaba al borde del texto, y con la interrogación (520 px) se quedaba 134 px a la izquierda. */
@media (min-width:1280px){
  .icono-seccion{left:calc(50% + 430px);right:auto;transform:translateX(-50%)}   /* solo en horizontal: el vertical lo centran top/bottom/margin (18/09/2026) */
  section:has(> .icono-seccion img[src*="08-interrogacion"]) > .icono-seccion{
    left:calc(50% + 430px);right:auto;transform:translateX(-50%)}
}
/* 2) El lápiz, un 30 % más pequeño: con luz se le veía el corte del recuadro contra el negro. */
.banda.b-lapiz{background-size:1470px auto}
.bio-head-lapiz{background-size:1470px auto}
@media (max-width:1068px){.banda.b-lapiz{background-size:748px auto}.bio-head-lapiz{background-size:748px auto}}
@media (max-width:734px){.banda.b-lapiz{background-size:301px auto}.bio-head-lapiz{background-size:301px auto}}
/* 3) «Una orden, un Cmd+Z» (Precios): el bloque entero a la izquierda, no centrado. */
.garantias-bloque{max-width:900px;margin:0}
.garantias-bloque .center{text-align:left}
/* 4) La tabla de requisitos de Aplicaciones, a la izquierda. */
.page-head .tabla-requisitos,.tabla-requisitos{margin-left:0;margin-right:auto;text-align:left}

/* La bombilla: cierre de El oficio (Jose, 18/09/2026). Motivo suyo, montado con la receta de bandas. */
.banda.b-bombilla{background-image:url("../img/banners/sk-banda-bombilla.webp")}
@media (max-width:1068px){.banda.b-bombilla{background-image:url("../img/banners/sk-banda-bombilla-tablet.webp")}}
@media (max-width:734px){.banda.b-bombilla{background-image:url("../img/banners/sk-banda-bombilla-movil.webp")}}

/* El icono se funde con el fondo gris o blanco de su sección. El transform que lo centra en el eje de las
   bandas crea un contexto propio y el multiply de la imagen se quedaba dentro (salía el recuadro blanco):
   se multiplica el contenedor entero. (18/09/2026) */
.icono-seccion:not(.icono-negro){mix-blend-mode:multiply}

/* Tabla de requisitos de Aplicaciones: ancho máximo; en escritorio manda el hueco del icono (18/09/2026) */
.tabla-requisitos{max-width:44em}

/* Demos, con Aplicaciones dentro (Jose, 18/09/2026): cabecera con la mitad de margen, los vídeos
   sobre marino claro con las tarjetas en el azul oscuro de siempre, y debajo de cada vídeo lo
   hecho y lo que viene en dos columnas. */
.page-head.compacta{padding:15px 0 11px}
/* La cabecera con icono mide 480 px y centra el texto: el margen que se ve son ~110 px arriba y
   abajo. A la mitad, ~55: 370 px de alto, y el icono baja con ella de 460 a unos 350. */
@media (min-width:901px){section.page-head.compacta:has(> .icono-seccion):has(h1){min-height:370px}}
.demos-marino{background:#173A5E}
.demo-card .shot.demo{width:100%;display:block}
.demo-listas{gap:40px;align-items:start;margin-top:30px}
.demo-listas .eyebrow{margin-bottom:8px}
/* Jose, 18/09/2026: el fondo en marino, pero las tarjetas en BLANCO («en azul marino se lee muy poco»).
   Sobre blanco, las próximas mejoras en el gris de lectura, no en el gris claro de «off». */
.demos-marino > .wrap > p{color:rgba(255,255,255,.8)}
.demo-viene .feat li.off{color:var(--ink-2)}
.demos-marino .card{background:#fff}
/* Entradilla y lista a todo el ancho de la tarjeta (Jose, 18/09/2026). */
.demos-marino .demo-card p.lead,.demos-marino .demo-card .demo-listas,.demos-marino .demo-card .feat{max-width:none}
/* Las diez cosas, en dos columnas (Jose, 18/09/2026). */
.demo-listas .feat{columns:2;column-gap:40px}
.demo-listas .feat li{break-inside:avoid}
@media (max-width:760px){.demo-listas .feat{columns:1}}
/* Sin filetes entre las cosas; uno solo bajo el título, de punta a punta (Jose, 18/09/2026). */
.demo-listas .feat li{border-bottom:0}
.demo-listas > .eyebrow{display:block;padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.demos-marino .demo-listas > .eyebrow{max-width:none;width:100%}
/* Tarjetas de precio (Jose, 18/09/2026): la mitad de relleno, «después» a la izquierda en una línea
   y el precio a la derecha sin partirse, un solo rótulo de «precios al mes» encima de las cuatro y
   el texto del IVA a todo el ancho, como todo texto legal. */
/* Los dos importes juntos y a la izquierda (Jose, 21/09/2026). El 18/09 el «después, 15 €» se
   empujaba al borde derecho de la tarjeta: con la tarjeta ancha quedaban a dos palmos, y no se
   leían como una sola frase —«12 €, después 15 €»— sino como dos datos sueltos. */
#plans .price{justify-content:flex-start;align-items:baseline;flex-wrap:nowrap;gap:0}
#plans .price .amount{white-space:nowrap}
.precio-resumen{margin:0 0 14px;font-weight:700;color:var(--dark-ink)}
#plans .precio-iva,p.precio-iva{max-width:none}
#plans .price .was{white-space:nowrap;margin:0 0 0 8px;text-align:left}
/* Precios: el titular en dos líneas (Jose, 18/09/2026). El monedero deja sitio de sobra; solo se ensancha el h1. */
@media (min-width:1280px){section.page-head:has(img[src*="05-monedero"]) > .wrap > h1{max-width:calc(100% - 330px)}}
/* «Qué incluye cada plan»: la barra de títulos en marino, con el texto en blanco (Jose, 18/09/2026). */
.tabla-planes thead th{background:var(--dark);color:#fff}

/* ===== Portada en el móvil (auditoría de la campaña, 18/09/2026; Jose: «dale») =====
   Solo hasta 734 px; el escritorio no cambia. Franja corta; en la cabecera, titular, vídeo y botón de
   reservar a la vista; la frase debajo; el vídeo no se repite más abajo; aviso de cookies compacto. */
.fr-corta{display:none}
.video-movil{display:none}
@media (max-width:734px){
  .fr-larga{display:none}
  .fr-corta{display:inline}
  .franja{padding:10px 12px;font-size:min(15px,3.7vw)}   /* «fundador» no cabía a 375 y desplazaba la página: el cuerpo sigue al ancho */
  .hero-foto{height:auto}
  .hero-foto-inner{position:relative;bottom:auto;padding:30vw 0 30px;display:flex;flex-direction:column;align-items:center}
  .hero-foto h1{order:1;margin-bottom:16px}
  .video-movil{display:block;order:2;width:100%;margin:0 0 16px}
  .video-movil video{width:100%;height:auto;display:block;border-radius:10px}
  .hero-foto .hero-actions{order:3;margin-bottom:20px}
  .hero-foto .hero-actions .btn-claro{display:none}
  .hero-foto .hero-sub{order:4;margin-bottom:0}
  #see-it .video-portada{display:none}
  /* Cookies: tira compacta abajo, texto pequeño y los dos botones en una fila */
  .cookies{left:8px;right:8px;bottom:8px;padding:10px 12px;gap:8px;font-size:12.5px;line-height:1.35}
  .cookies-botones .btn{padding:7px 10px;font-size:13px;min-height:0}
}
/* Texto de cookies algo más pequeño también en escritorio (Jose, 18/09/2026) */
.cookies{font-size:13.5px}
@media (max-width:734px){.cookies{font-size:12.5px}}
@media (max-width:734px){.hero-foto-inner{padding-top:20vw}.video-movil{margin-top:10px}.franja{white-space:nowrap}}
@media (max-width:734px){.hero-foto-inner{padding-top:14vw}}
/* Párrafos al mismo tamaño que la frase de la portada, también en la biografía y El oficio en el móvil (Jose, 18/09/2026). */
@media(max-width:760px){.bio-copy p.bio-lead,.bio-intro{font-size:18.4px}}
.bio-copy p,.bio-copy p.bio-lead,.bio-intro{font-size:18.4px}

/* =====================================================================================
   ESCALA UNIFICADA SIN DECIMALES (Jose, 18/09/2026, sobre el muestrario de 29 estilos)
   Escritorio: titulares 50 · H3, remates, citas y cifras 27 · precios 54 · números 49 ·
   párrafos 18 · pequeño 16 · etiquetas 14 · portada 94/50. Tableta: titulares 40.
   Móvil: titulares 32, precios y números 36. La biografía y El oficio siguen la misma escala
   y el interlineado automático de toda la web.
   ===================================================================================== */
:root{--t-etiqueta:14px;--t-pequeno:16px;--t-cuerpo:18px;--t-entradilla:18px;--t-cierre:27px;--t-titular:50px;--t-display:50px}
@media (max-width:1068px){:root{--t-cierre:24px;--t-titular:40px;--t-display:40px}}
@media (max-width:734px){:root{--t-cierre:24px;--t-titular:32px;--t-display:32px}}
/* Portada: 94 y 50 en escritorio (antes 93,6 y 50,4); 18 la frase (antes 18,4) */
@media (min-width:1069px){.hero-foto h1 .h1-a{font-size:50px}.hero-foto h1 .h1-b{font-size:94px}}
.hero-foto .hero-sub{font-size:18px}
/* Titular mínimo de tarjeta: 18 en todas las pantallas */
.bio-tl h3,.gancho h3,.card h3.h3-min{font-size:18px}
@media (max-width:1100px){.bio-tl h3{font-size:18px}}
@media (min-width:1900px){.bio-tl h3{font-size:18px}}
/* Precios: 36 en móvil. En las tarjetas el cuerpo bajó de 54 a 46 (Jose, 21/09/2026): en la vista
   anual, «25 € después, 40 €» no cabía en los 225 px útiles de la tarjeta y el «después» se salía
   por el margen derecho, hasta 18 px en Estudio. La portada se queda en 54: ahí solo hay una cifra. */
#plans .price .amount{font-size:46px}
.precio-home strong{font-size:54px}
@media (max-width:734px){#plans .price .amount,.precio-home strong{font-size:36px}}
/* Números: 49 los de capítulo y los de paso; 36 en móvil */
.bio-label span,.card .num{font-size:49px}
@media (max-width:760px){.bio-label span,.card .num{font-size:36px}}
/* Cifras de la biografía: 27 (móvil 24) */
.bio-number{font-size:27px}
@media (max-width:760px){.bio-number{font-size:24px}}
/* Biografía y El oficio: titulares a la escala general (50 / 40 / 32) */
.bio-hero h1,.bio-head h1,.bio-copy h2,.bio-chapter h2,.bio-closing h2,.bio-tl-heading{font-size:50px}
@media (max-width:1100px){.bio-hero h1,.bio-head h1,.bio-copy h2,.bio-chapter h2,.bio-closing h2,.bio-tl-heading{font-size:40px}}
@media (max-width:760px){.bio-hero h1,.bio-head h1,.bio-copy h2,.bio-chapter h2,.bio-closing h2,.bio-tl-heading{font-size:32px}}
/* Citas: 27 (móvil 24) */
.bio-quote{font-size:27px}
@media (max-width:760px){.bio-quote{font-size:24px}}
/* Párrafos de la biografía y El oficio: 18 e interlineado automático, como el resto */
.bio-copy p,.bio-copy p.bio-lead,.bio-intro,.bio-sub,.bio-tl p,.bio-chapter p,.bio-closing p{font-size:18px;line-height:normal}
@media (max-width:1100px){.bio-tl p{font-size:18px}}
@media (min-width:1900px){.bio-tl p{font-size:18px}}
@media (max-width:760px){.bio-copy p,.bio-copy p.bio-lead,.bio-intro,.bio-sub,.bio-tl p,.bio-chapter p,.bio-closing p{font-size:18px}}
/* Pie de la línea de tiempo: al texto pequeño, 16 */
.bio-tl-caption{font-size:16px}
@media (max-width:760px){.bio-tl-caption{font-size:16px}}
/* Etiquetas a 14 en todas las pantallas; el rótulo de capítulo, igual que el antetítulo de la biografía */
.bio-eyebrow,.bio-hero .bio-eyebrow,.bio-note{font-size:14px}
@media (max-width:760px){.bio-eyebrow,.bio-hero .bio-eyebrow,.bio-note{font-size:14px}}
.bio-label{font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:.18em;line-height:1.6}
@media (max-width:760px){.bio-label{font-size:14px}}
/* Franja de lanzamiento en el móvil: 16 (antes 15) */
@media (max-width:734px){.franja{font-size:min(16px,3.75vw)}}   /* hasta 16; por debajo de 427 px baja con el ancho para no salirse de la pantalla */
/* Restos sueltos de la biografía y El oficio en tableta y móvil, a la escala (18/09/2026) */
.bio-work h3{font-size:18px}
.bio-signature strong{font-size:18px}
.bio-signature span,.bio-byline,.bio-tl time,.bio-sources,.bio-sources a{font-size:16px}
@media (max-width:1100px){.bio-work h3{font-size:18px}}
@media (max-width:760px){.bio-work h3,.bio-signature strong{font-size:18px}.bio-signature span,.bio-byline,.bio-tl time,.bio-sources,.bio-sources a{font-size:16px}}
/* Tableta: el nivel de 27 baja entero a 24 (Jose, 18/09/2026) */
@media (max-width:1100px){.bio-number,.bio-quote,.gancho-cierre{font-size:24px}}
/* Móvil: el titular siempre por debajo de las manos, con 20 px de aire (Jose, 18/09/2026: «el texto no puede ir sobre un icono, nunca») */
@media (max-width:734px){.hero-foto-inner{padding-top:calc(29.6vw - 50px)}}
@media (min-width:390px) and (max-width:734px){.hero-foto-inner{padding-top:calc(29.6vw - 30px)}}
@media (max-width:734px){.hero-foto-inner{padding-top:calc(29.6vw - 30px)}}
/* Cookies en el móvil: frase corta y los dos botones al lado, en una sola fila (18/09/2026) */
.ck-corto{display:none}
@media (max-width:734px){
  .ck-largo{display:none}.ck-corto{display:inline}
  .cookies{flex-direction:row;align-items:center;gap:10px;padding:8px 10px}
  .cookies-botones{flex-direction:row;gap:6px}
  .cookies-botones .btn{flex:none;padding:7px 10px}
}

/* ===== Repaso del móvil (Jose, 18/09/2026) ===== */
/* Salto de línea solo en el móvil: «Tú creas.» / «Sekondo lo hace.» */
.br-movil{display:none}
@media (max-width:734px){.br-movil{display:inline}}
/* Bandas en el móvil: el texto centrado y justo debajo de su dibujo, con el mismo aire que el
   dibujo tiene por encima. Medido imagen a imagen (dibujo de A a B px sobre 430 de ancho):
   relleno de arriba = B + A. */
@media (max-width:734px){
  .banda .wrap,.cta-final .wrap{justify-content:flex-start;text-align:center;align-items:center}
  .banda.b-birrete .wrap{padding-top:238px}
  .banda.b-bombilla .wrap{padding-top:210px}
  .banda.b-candado .wrap{padding-top:214px}
  .banda.b-capas .wrap{padding-top:216px}
  .banda.b-check .wrap{padding-top:204px}
  .banda.b-cmd-a .wrap,.cta-final.b-cmd-a .wrap{padding-top:233px}
  .banda.b-cmd-b .wrap{padding-top:230px}
  .banda.b-disenador .wrap{padding-top:205px}
  .banda.b-entrega .wrap{padding-top:214px}
  .banda.b-infinito .wrap{padding-top:198px}
  .banda.b-lapiz .wrap{padding-top:206px}
  .banda.b-logo-azul .wrap{padding-top:206px}
  .banda.b-logo-negro .wrap{padding-top:240px}
  .banda.b-plumilla .wrap{padding-top:202px}
  .banda.b-reloj .wrap{padding-top:207px}
  .banda.b-varios .wrap{padding-top:210px}
  .cta-final:not([class*="b-"]) .wrap{padding-top:186px}
  /* «Dale un par de manos a tu Adobe», centrada como las bandas */
  .cta-final .cta{text-align:center;display:flex;flex-direction:column;align-items:center}
  .cta-final .cta-botones{justify-content:center}
  .cta .btn,.cta .cta-botones .btn{align-self:center}
}
/* El pincel del 90 %: la mitad de aire arriba y abajo en el móvil (73 → 36 y 92 → 46 px),
   recortando el blanco de su propia imagen, sin cambiar el tamaño del dibujo */
@media (max-width:900px){
  .gancho-con-plumilla .gancho-plumilla{height:241px;overflow:hidden}
  .gancho-con-plumilla .gancho-plumilla img{height:320px;margin-top:-37px}
  .gancho-con-plumilla{padding-bottom:46px}
}
/* La firma: la frase en blanco, y entera en verde al pasar por encima */
.quien-firma-texto > span{color:#fff}
.quien-firma:hover .quien-firma-texto > span,.quien-firma:hover .quien-firma-texto > span .sk{color:var(--ok)}
/* Pie en el móvil: alineado a la izquierda (Jose, 18/09/2026), y cada menú en una línea con puntos en medio */
@media (max-width:734px){
  .site-footer{text-align:left}
  .foot-grid{grid-template-columns:1fr;gap:20px}
  .brand-pie{display:inline-block}
  .brand-pie img{margin:0}
  .site-footer h4{margin-bottom:8px}
  .site-footer ul{display:flex;flex-wrap:wrap;justify-content:flex-start;row-gap:6px}
  .site-footer li{margin:0}
  .site-footer li + li::before{content:"·";margin:0 9px;color:var(--ink-3)}
  .foot-bottom{flex-direction:column;align-items:flex-start;text-align:left;gap:6px}
}
@media (max-width:900px){.gancho-con-plumilla .gancho-plumilla{height:254px}.gancho-con-plumilla .gancho-plumilla img{margin-top:-24px}}
@media (max-width:734px){.site-footer li + li::before{content:none}.site-footer li:not(:last-child)::after{content:"·";margin:0 9px;color:var(--ink-3)}}
@media (max-width:734px){.br-escritorio{display:none}}

/* Contacto: las tres tarjetas, a 16 px (antes iba escrito en el HTML y no dejaba cambiarlo en el móvil). */
.grid.hueco-16{gap:16px}

/* ===== En el móvil, las tarjetas van de lado a lado (Jose, 18/09/2026) =====
   «Perdemos el doble de margen y no es necesario.» La tarjeta conserva su color (blanca sobre gris,
   gris sobre blanco) pero ocupa todo el ancho de la pantalla, sin esquinas, y su texto arranca en la
   misma guía que el resto de la página: 24 px. El círculo del icono sigue montado sobre el borde.
   Jose, después: «a todas las tarjetas que tengan doble margen» — también las de los vídeos de Demos
   y los cuadros de aviso y de código de la guía. EXCEPCIÓN: las tarjetas de precio se quedan con su
   caja y su pastilla («eso se queda muy raro»). */
@media (max-width:734px){
  .card{margin-left:-24px;margin-right:-24px;padding-left:24px;padding-right:24px;border-radius:0;box-shadow:none}
  /* El «Próximamente» de Premiere y Lightroom, dentro de su tarjeta: también de lado a lado */
  .demo-card .en-camino{margin-left:-24px;margin-right:-24px;padding-left:24px;padding-right:24px;border-radius:0}
  /* En la guía el margen de la página es de 20 px: el cuadro de aviso y el de código, igual */
  .guia-cuerpo pre{margin:8px -20px;padding:10px 20px;border-radius:0;white-space:pre-wrap;overflow-wrap:break-word;font-size:13px;line-height:1.45}
  .guia-cuerpo pre code{font-size:inherit;white-space:inherit}
  .guia-cuerpo .note{margin-left:-20px;margin-right:-20px;padding-left:17px;padding-right:20px;border-radius:0}
}
/* El precio de la portada: el bueno, grande y verde, primero; «después, 15 €» a su derecha
   (Jose, 18/09/2026, en todos los tamaños). Lo de «al mes» baja a su línea. */
.precio-home .antes{order:0}
.precio-home .per{flex-basis:100%}
/* El pincel en el móvil: la mitad de aire bajo el dibujo (103 → 51 px) */
@media (max-width:734px){section.gancho-con-plumilla .gancho-plumilla{height:202px;overflow:hidden}section.gancho-con-plumilla .gancho-plumilla img{height:254px;max-height:none}}

/* La firma (Jose, 18/09/2026). «Quién lo hace →» en verde siempre, con el ratón encima y sin él.
   En el móvil, el oficio baja a su línea con el mismo cuerpo que la frase, y sin la coma. */
.quien-firma-texto .firma-enlace{color:var(--ok)}
@media (max-width:734px){
  .quien-firma-texto .firma-coma{display:none}
  .quien-firma-texto .firma-oficio{display:block;font-size:var(--t-pequeno);font-weight:500;color:#fff;letter-spacing:normal}
  .quien-firma-texto .firma-oficio::first-letter{text-transform:uppercase}
}

/* ===== Demos en el móvil (Jose, 18/09/2026: «es un ladrillo») =====
   Lo que se ve antes que lo que se lee: título, vídeo, entradilla y la lista plegada.
   La lista va en un <details>: en tablet y escritorio siempre abierto y sin poder cerrarse
   (se ve igual que antes); en el móvil arranca cerrado (main.js) y se abre con un toque. */
.demo-listas > details.plegable-movil{border:0}
.demo-listas > details > summary.eyebrow{display:block;padding:0 0 12px;margin:0 0 14px;border-bottom:1px solid var(--line);
  font-size:var(--t-etiqueta);font-weight:700;max-width:none;width:100%}
@media (min-width:735px){
  .demo-listas > details > summary.eyebrow{pointer-events:none;cursor:default;padding-right:0}
  .demo-listas > details > summary.eyebrow::after{content:none}
}
@media (max-width:734px){
  .demos-marino .demo-card{display:flex;flex-direction:column}
  .demos-marino .demo-card > .eyebrow{order:0;align-self:flex-start}
  .demos-marino .demo-card > h2{order:1}
  .demos-marino .demo-card > video,.demos-marino .demo-card > .en-camino{order:2;margin-bottom:22px}
  .demos-marino .demo-card > p.lead{order:3}
  .demos-marino .demo-card > .demo-listas{order:4;margin-top:8px}
  .demo-listas > details > summary.eyebrow{cursor:pointer;margin-bottom:0;padding:14px 40px 14px 0;border-top:1px solid var(--line)}
  .demo-listas > details > summary.eyebrow::after{content:"+";color:var(--accent);font-size:1.5rem;font-weight:500;letter-spacing:0}
  .demo-listas > details[open] > summary.eyebrow{margin-bottom:14px}
  .demo-listas > details[open] > summary.eyebrow::after{content:"–"}
}

/* Demos: la separación entre tarjetas (antes escrita en el HTML) */
.demos-rejilla{gap:24px}
/* En el móvil, sin marino entre tarjetas (Jose, 18/09/2026): cada demo es una sección y los fondos
   alternan blanco y gris azulado, como en el resto de la web. */
@media (max-width:734px){
  section.demos-marino{padding-top:0;padding-bottom:0;background:var(--bg-alt)}
  .demos-rejilla{gap:0}
  .demos-marino .demo-card{padding-top:48px;padding-bottom:48px}
  .demos-marino .demo-card:nth-child(odd){background:#fff}
  .demos-marino .demo-card:nth-child(even){background:var(--bg-alt)}
}
/* …y para que la alternancia cuadre de arriba abajo, la cabecera de Demos va en gris en el móvil:
   cabecera gris, tarjetas blanco/gris, «Un solo puente» blanco, «Tres aplicaciones» gris… */
@media (max-width:734px){body:has(.demos-marino) section.page-head{background:var(--bg-alt)}}
/* Sobre las tarjetas grises, el azul de las etiquetas pasa al de las secciones grises (5,36:1; el de marca da 3,77:1) */
@media (max-width:734px){.demos-marino .demo-card:nth-child(even) .eyebrow{color:var(--accent-ink)}}

/* ===== Demos en el móvil, segunda vuelta (Jose, 18/09/2026) ===== */
.solo-escritorio{}
@media (max-width:734px){
  .solo-escritorio{display:none}
  /* «Míralo trabajar» no lleva filete debajo */
  body:has(.demos-marino) section.page-head{border-bottom:0}
  /* «Tres aplicaciones. Tres asistentes.» y «Lo que le falta, se lo hace», en marino con letra clara */
  body:has(.demos-marino) section.alt{background:var(--dark);color:var(--dark-ink)}
  body:has(.demos-marino) section.alt h2,body:has(.demos-marino) section.alt h3{color:#fff}
  body:has(.demos-marino) section.alt p,body:has(.demos-marino) section.alt .lead,body:has(.demos-marino) section.alt .muted{color:var(--dark-ink-2)}
  body:has(.demos-marino) section.alt .eyebrow{color:var(--ok)}
  /* Sus tarjetas, sin caja: sobre marino, una caja blanca de lado a lado volvería a dejar filos.
     Se separan con un filete fino. */
  body:has(.demos-marino) section.alt .card{background:none!important;color:inherit;padding-top:22px;padding-bottom:0;border-top:1px solid var(--dark-line)!important}
  body:has(.demos-marino) section.alt .grid:has(> .card){row-gap:0}
}

/* ===== Precios en el móvil (Jose, 18/09/2026) =====
   «Qué incluye cada plan»: la columna de características se queda fija y solo se desplazan los planes,
   para que nunca se pierda de qué fila se habla. Una línea gris vertical la separa de lo que se desplaza.
   Los números de «Cómo te llega» (1, 2, 3), al doble. */
@media (max-width:734px){
  .tabla-planes table tr > :first-child{position:sticky;left:0;z-index:1;background:#fff;box-shadow:inset -1px 0 0 var(--line)}
  .tabla-planes table thead tr > :first-child{background:var(--dark);z-index:2;box-shadow:inset -1px 0 0 rgba(255,255,255,.22)}
  body:has(.tabla-planes) .card .num{font-size:72px}
}

/* ===== Comparativa en el móvil: la tabla entera en el ancho de la pantalla (Jose, 18/09/2026) =====
   Las cinco columnas en la misma línea (característica, Sekondo, Adobe, Sidekick, Otros), sin filetes
   entre filas y a cuerpo pequeño. Se probó convertirla en bloques y quedaba más confusa.
   Tablet y escritorio: la tabla de siempre, que se desliza si no cabe. */
.vs-caja{overflow-x:auto}
@media (max-width:734px){
  .vs{min-width:0;width:100%;table-layout:fixed}
  .vs th,.vs td{padding:7px 2px;border-bottom:0;font-size:13px;line-height:1.2;overflow-wrap:break-word;hyphens:manual}
  .vs thead th{font-size:min(10px,2.8vw);font-weight:700;letter-spacing:0;text-transform:uppercase;padding-bottom:10px}
  .vs th:first-child,.vs td:first-child{width:31%;padding-left:0;padding-right:6px}
  .vs th.c,.vs td.c{width:17.25%}
  .vs td:first-child{font-weight:700}
  .vs td .small{font-size:11px;font-weight:400;margin-top:2px}
  .vs tbody tr.sec td{font-size:var(--t-cierre);padding:22px 0 8px}
  /* Filete delgado entre fila y fila (no bajo el título de apartado ni tras la última de cada grupo) */
  .vs tbody tr:not(.sec) + tr:not(.sec) > td{border-top:1px solid var(--line)}
}
/* Guía: el ejemplo de orden parte sus renglones en cualquier ancho (la frase ya no lleva salto a mano) */
.guia-cuerpo pre,.guia-cuerpo pre code{white-space:pre-wrap;overflow-wrap:break-word}
/* Guía en el móvil: la cabecera sin el aire de arriba y de abajo (Jose, 18/09/2026: «esos márgenes son
   brutales»). Había 99 px de la franja al dibujo y 108 del texto al primer título. La imagen trae unos
   40 px transparentes arriba y 24 abajo; se recogen con margen negativo. */
@media (max-width:734px){
  section.hero-guia{padding-block:0 24px}
  .hero-guia .wrap{padding-block:0}
  .hero-guia-icono{margin-top:-18px;margin-bottom:-16px}
  section.guia-cuerpo{padding-top:28px}
}
/* Quién lo hace, móvil: el lápiz llena el hueco sobre el titular (Jose, 18/09/2026). Antes 301 px. */
@media (max-width:734px){.banda.b-lapiz{background-size:450px auto}}
/* Formulario: los campos, BLANCOS EN TODAS LAS PANTALLAS (Jose, 21/09/2026). Antes, en el móvil
   iban en el gris azulado, sin borde y con sombra (18/09). Se retira entera esa regla: móvil,
   tablet y escritorio usan ahora el mismo campo blanco con el filete de var(--line-2) que define
   `input,textarea,select`. La sombra se va con el color: un campo blanco sin borde sobre una
   tarjeta blanca no se distingue, y el filete es lo que lo delimita. */
/* 404 en el móvil (Jose, 19/09/2026): el número, cinco veces más grande (14 → 70 px), y los dos botones
   separados (iban apilados y pegados). */
.botones-error{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
/* Jose, después: todo centrado y el 404 en gris */
@media (max-width:734px){.error-num{font-size:70px;letter-spacing:0;line-height:1;margin-bottom:12px;color:var(--ink-3)}
  section:has(.error-num) .wrap{text-align:center}
  section:has(.error-num) .lead{margin-inline:auto}
  .botones-error{justify-content:center}}

/* ===== Bandas en tablet, cada una a la medida de su dibujo (Jose, 19/09/2026: «ajústale los márgenes al
   mínimo a todos los banners de la tablet»). Antes todas llevaban el texto a 370 px y sobraban 100-150 px
   de negro. Ahora: 36 px encima del dibujo (se sube la imagen si traía más), 36 del dibujo al titular y
   40 bajo el botón. Dibujo medido en cada -tablet.jpg a 1068 px de ancho. */
@media (min-width:735px) and (max-width:1068px){
  .banda.b-birrete .wrap{padding-top:285px}
  .banda.b-birrete{background-position:50% -1px}
  .banda.b-bombilla .wrap{padding-top:255px}
  .banda.b-bombilla{background-position:50% -37px}
  .banda.b-candado .wrap{padding-top:278px}
  .banda.b-capas .wrap{padding-top:266px}
  .banda.b-capas{background-position:50% -1px}
  .banda.b-check .wrap{padding-top:288px}
  .banda.b-cmd-a .wrap{padding-top:274px}
  .cta-final.b-cmd-a .wrap{padding-top:274px}
  .banda.b-cmd-b .wrap{padding-top:291px}
  .banda.b-disenador .wrap{padding-top:300px}
  .banda.b-disenador{background-position:50% -8px}
  .banda.b-entrega .wrap{padding-top:257px}
  .banda.b-entrega{background-position:50% -40px}
  .banda.b-infinito .wrap{padding-top:270px}
  .banda.b-lapiz .wrap{padding-top:297px}
  .banda.b-lapiz{background-position:50% -13px}
  .banda.b-logo-azul .wrap{padding-top:253px}
  .banda.b-logo-azul{background-position:50% -2px}
  .banda.b-logo-negro .wrap{padding-top:224px}
  .banda.b-logo-negro{background-position:50% -27px}
  .banda.b-plumilla .wrap{padding-top:297px}
  .banda.b-plumilla{background-position:50% -6px}
  .banda.b-reloj .wrap{padding-top:257px}
  .banda.b-varios .wrap{padding-top:216px}
  .banda.b-varios{background-position:50% -56px}
  .cta-final .wrap{padding-top:252px}
}
/* Tablet (Jose, 19/09/2026):
   · la franja larga partía «Reservar es GRATIS y no se cobra…» a mitad: va entera en la segunda línea;
   · las manos de la cabecera, 1,9 veces más grandes desde su centro (152 → 288 px de alto), llenando el
     hueco sobre el titular con ~30 px de aire;
   · el pincel, con la mitad de aire bajo el dibujo, como en el móvil. */
@media (min-width:735px) and (max-width:1068px){
  .franja .fr-larga strong{display:block}
  .franja .fr-sep{display:none}
  .hero-foto .hero-foto-bg{transform:scale(1.9);transform-origin:50% 166px}
  section.gancho-con-plumilla .gancho-plumilla{height:202px;overflow:hidden}
  section.gancho-con-plumilla .gancho-plumilla img{height:254px;max-height:none}
}

/* Botones de descarga de Claude y ChatGPT en la pregunta «¿Tengo que pagar además la IA?» (Jose, 19/09/2026) */
.ia-botones{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.ia-botones .btn{background:#000;color:#fff;border-color:#000}
.ia-botones .btn:hover{background:#fff;color:#000;border-color:#000}

/* ---------- Reserva de plaza (Jose, 20/09/2026) ----------
   «El fondo de la página en el color gris. Todos los campos en el color blanco. Y las cajas de
   la derecha en el mismo gris, pero con un filete como el de los campos.»
   La sección lleva .alt (gris de marca) y aquí se deshace el blanco que .alt da a las tarjetas
   planas, poniéndoles el mismo filete que llevan los campos: var(--line-2). */
.alt.form-reserva .card{background:transparent;border:2px solid var(--line-2);box-shadow:none}

/* ═══════════════ LA PÁGINA DE RESERVA · rediseño de Jose (21/09/2026) ═══════════════
   Cabecera clara y corta · los cuatro planes sobre fondo marino · una caja blanca con los tres
   pasos y el resumen al lado · las tres tarjetas de soporte al pie, que antes se llevaban media
   pantalla de la zona que vende. */

.reserva-cabecera{padding:30px 0 26px}
/* El párrafo llega casi hasta el icono (Jose, 21/09/2026), no al ancho de párrafo de la casa.
   Tres pesos: lo que quita el miedo y lo que es Sekondo en Black, las aplicaciones en cuerpo
   normal, y el cierre —eliges y mantienes precio— en negrita. */
/* La entradilla de la reserva se sale a propósito de los 33 em de largo de línea:
   Jose, 21/09/2026, «el párrafo que llegue casi hasta el icono». Llega justo hasta
   donde llega el h1 —los tres cuartos, 834 px— y para antes del billete.
   El ancho recortado SOLO donde hay icono: en móvil el icono no está y
   calc(100% - 278px) dejaría el texto en un hilo. */
.reserva-sub{max-width:none;font-size:var(--t-entradilla);color:var(--ink-2);margin:14px 0 0}
@media (min-width:1280px){
  section:has(> .icono-seccion):has(h1) > .wrap > p.reserva-sub{max-width:calc(100% - 278px)}
}
@media (min-width:901px) and (max-width:1279px){
  section:has(> .icono-seccion) > .wrap > p.reserva-sub{max-width:calc(100% - 360px)}
}
.reserva-sub b{color:var(--ink,#000);font-weight:900}
.reserva-sub strong{color:var(--ink,#000);font-weight:700}

.reserva-elige{padding:46px 0 52px}
.reserva-titulo{margin-bottom:26px}
.reserva-elige h2{margin-bottom:10px}
.reserva-gratis{color:var(--ok);font-weight:900;margin:0}

/* Los cuatro planes */
.planes-reserva{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:26px}
.plan-tarjeta{display:flex;flex-direction:column;gap:8px;background:#fff;border:2px solid transparent;
  border-radius:var(--radius-s);padding:16px 18px 18px;cursor:pointer;transition:border-color .15s}
.plan-tarjeta input{position:absolute;opacity:0;width:0;height:0}
/* El círculo va arriba, no al centro: si el nombre parte en dos líneas —«3 aplicaciones» a dos
   columnas en el móvil— centrado se quedaba a media altura y parecía descolocado. */
.plan-cabeza{display:flex;align-items:flex-start;gap:10px;color:var(--accent);font-weight:900}
.plan-radio{width:17px;height:17px;border-radius:50%;border:2px solid var(--line-2);flex:0 0 auto;margin-top:.18em}
.plan-precio{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
/* El importe no se parte NUNCA. A dos columnas en el móvil, «24 €» dejaba el € en la línea de
   abajo porque «/ puesto / mes» le comía el sitio (Jose, 21/09/2026). Ahora la unidad baja
   entera si no cabe, y la cifra se queda de una pieza. */
.plan-precio b{font-size:var(--t-display);line-height:1;letter-spacing:-.02em;white-space:nowrap}
.plan-precio small{color:var(--ink-2);font-size:var(--t-pequeno)}
.plan-nota{color:var(--ink-2);font-size:var(--t-pequeno)}
.plan-tarjeta:hover{border-color:var(--accent)}
/* El elegido, marino con el precio en verde: se ve desde el otro lado de la mesa (Jose, 20/09) */
.plan-tarjeta:has(input:checked){background:var(--dark);border-color:var(--ok)}
.plan-tarjeta:has(input:checked) .plan-cabeza{color:#fff}
.plan-tarjeta:has(input:checked) .plan-precio b{color:var(--ok)}
.plan-tarjeta:has(input:checked) .plan-precio small,
.plan-tarjeta:has(input:checked) .plan-nota{color:var(--dark-ink-2)}
.plan-tarjeta:has(input:checked) .plan-radio{border-color:var(--ok);background:radial-gradient(circle,var(--ok) 42%,transparent 44%)}
.plan-tarjeta:has(input:focus-visible){outline:3px solid var(--ok);outline-offset:3px}

/* La caja blanca: los tres pasos y el resumen */
/* El color del texto se declara AQUÍ (Jose, 21/09/2026). La caja es blanca pero cuelga de una
   sección .on-dark, y sin esto todo lo de dentro hereda el blanco de la sección: los tres
   titulares de paso —«Elige tus aplicaciones», «Tus datos», «Confirma tu reserva»— estaban
   blancos sobre blanco, invisibles. El resumen marino define su propio color y no se ve afectado. */
/* Tres piezas colocadas por zonas: los pasos, el resumen y el cierre (botón y notas). En el
   ordenador el resumen ocupa la columna derecha entera y el botón queda bajo el paso 3; en el
   móvil, una sola columna y el resumen ENTRE los pasos y el botón, para poder comprobar lo que
   se ha elegido antes de pulsar (Jose, 21/09/2026). */
.reserva-caja{display:grid;grid-template-columns:minmax(0,1fr) 300px;
  grid-template-areas:"pasos resumen" "cierre resumen";gap:0 32px;align-items:start;
  background:#fff;color:var(--ink,#000);border-radius:var(--radius);padding:30px 32px 34px}
.reserva-pasos{grid-area:pasos}
.reserva-resumen{grid-area:resumen}
.reserva-cierre{grid-area:cierre;margin-top:22px}
.paso{padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid var(--line)}
.paso:last-child{padding-bottom:0;margin-bottom:0;border-bottom:0}
.paso-cabeza{display:flex;align-items:flex-start;gap:14px;margin-bottom:16px}
/* El número azul, un 50 % más grande (Jose, 21/09/2026): de 30 a 45 px, y el dígito de 16 a 24.
   Centrado con SU TITULAR, no con el bloque entero: la cabeza sigue alineada arriba —si no, el
   número se iría al centro del titular MÁS el párrafo de debajo, que es lo que quedaba torcido—.
   El margen negativo es la mitad de lo que el círculo mide de más que la línea del h3. */
.paso-num{flex:0 0 auto;width:45px;height:45px;border-radius:50%;background:var(--accent);color:#fff;
  font-weight:900;display:flex;align-items:center;justify-content:center;font-size:24px;
  margin-top:calc((var(--t-cierre) * 1.08 - 45px) / 2)}
.paso-texto{flex:1 1 auto}
.paso-texto h3{margin:0 0 2px;font-size:var(--t-cierre)}
.paso-texto p{margin:0;font-size:var(--t-pequeno);color:var(--ink-2)}
/* Señalar lo que falta (Jose, 21/09/2026). Cuando el aviso dice «elige un plan», la página sube
   hasta los planes y les da un latido de dos segundos: sin esto el mensaje salía a mil píxeles de
   lo que había que tocar. Respeta a quien pide menos movimiento en su sistema. */
.pide-atencion{animation:latido 1.3s ease-in-out 2;border-radius:var(--radius-s)}
@keyframes latido{
  0%,100%{box-shadow:0 0 0 0 rgba(0,113,227,0)}
  50%{box-shadow:0 0 0 5px rgba(0,113,227,.35)}
}
@media (prefers-reduced-motion:reduce){
  .pide-atencion{animation:none;box-shadow:0 0 0 3px rgba(0,113,227,.45)}
}
/* «Ya tienes tus tres»: el mismo sitio donde estaba la instrucción, en azul y en negrita, para que
   se note que ha cambiado. Vuelve solo al texto de siempre a los tres segundos y medio. */
.paso-texto p.nota-aviso{color:var(--accent);font-weight:700}
.paso-contador{flex:0 0 auto;font-size:var(--t-pequeno);color:var(--ink-2);white-space:nowrap}
.paso-contador b{color:var(--ink,#000)}
/* BLANCO SOBRE BLANCO (Jose, 21/09/2026). La caja es blanca pero cuelga de una sección .on-dark,
   y la regla de arriba (.on-dark .muted → --dark-ink-2, casi blanco) pintaba invisibles las tres
   notas del final: el correo de confirmación, los 200 primeros y el «si no ha salido, escríbenos».
   Dentro de la caja mandan los colores de fondo claro. */
.reserva-caja .muted,.reserva-caja .lead{color:var(--ink-2)}
.reserva-caja .muted a{color:var(--accent)}
/* Las notas del final llegan hasta donde llega el botón (Jose, 21/09/2026: «los textos que lleguen
   hasta el final del botón»). Se saltan a propósito el tope de 33 em del largo de línea: dentro de
   un formulario, una nota corta cortada antes que el botón que tiene encima se lee como un error
   de maqueta, no como una medida de lectura. */
.paso > p.small,.paso > .field.small,.reserva-cierre > p.small{max-width:none}
/* «¿Más de 20 puestos?»: sale al escribirlo, en azul y con su enlace, no en rojo de error;
   no es un fallo de quien lo escribe, es que ahí hay una conversación que tener. */
.puestos-aviso{margin:10px 0 0;padding:12px 14px;border-radius:var(--radius-s);
  background:rgba(0,113,227,.08);color:var(--ink-2);max-width:none}
.puestos-aviso a{color:var(--accent);font-weight:700}
.paso-campos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.paso-campos .field{margin-bottom:0}
.reserva-form .opciones-app{grid-template-columns:repeat(3,minmax(0,1fr))}
.btn-reservar{width:100%}

/* El resumen, que cambia solo al elegir plan. Sobre marino (Jose, 21/09/2026: «con fondo azul
   marino»): dentro de la caja blanca es lo único oscuro, así que es donde va la vista. */
.reserva-resumen{background:var(--dark);color:var(--dark-ink);border-radius:var(--radius-s);
  padding:24px 26px;position:sticky;top:90px}
.reserva-resumen h3{margin:0 0 14px;padding-bottom:14px;border-bottom:1px solid var(--dark-line);
  font-size:var(--t-titular);color:#fff}
.resumen-vacio{margin:0;font-size:var(--t-pequeno);color:var(--dark-ink-2)}
.resumen-nombre{margin:0 0 2px;font-weight:900;font-size:var(--t-cierre);color:#fff}
/* El precio del resumen, clavado al de las tarjetas de plan (Jose, 21/09/2026: «19 € en tu reserva
   mismo tipo que en la selección de aplicaciones»): número a --t-display y unidad a --t-pequeno. */
.resumen-precio{margin:0;display:flex;align-items:baseline;gap:6px}
/* La especificidad importa aquí: «.on-dark p b{font-weight:900}» gana a «.resumen-precio b», así
   que el peso 700 de las tarjetas hay que pedirlo con el padre delante. */
.reserva-resumen .resumen-precio b{font-size:var(--t-display);line-height:1;letter-spacing:-.02em;font-weight:700;color:var(--ok)}
.resumen-precio small{font-size:var(--t-pequeno);font-weight:500;color:var(--dark-ink-2)}
.resumen-nota{margin:2px 0 0;font-size:var(--t-pequeno);color:var(--dark-ink-2)}
.resumen-checks{list-style:none;margin:18px 0 0;padding:0;font-size:var(--t-pequeno);color:var(--dark-ink-2)}
.resumen-checks li{position:relative;padding-left:24px;margin-bottom:9px}
.resumen-checks li::before{content:"";position:absolute;left:2px;top:.36em;width:11px;height:6px;
  border-left:2.5px solid var(--ok);border-bottom:2.5px solid var(--ok);transform:rotate(-45deg)}

/* Las tres tarjetas de soporte, al pie */
.tarjetas-contacto .card{padding:22px 24px}
.tarjetas-contacto h3{font-size:var(--t-cierre)}

/* Pantallas medianas: el resumen baja debajo de los pasos */
@media (max-width:1100px){
  .planes-reserva{grid-template-columns:repeat(2,minmax(0,1fr))}
  .reserva-caja{grid-template-columns:minmax(0,1fr);grid-template-areas:"pasos" "resumen" "cierre";gap:0}
  .reserva-resumen{position:static;margin-top:24px}
  .reserva-cierre{margin-top:24px}
}
/* Teléfono. Los planes y las aplicaciones van en DOS columnas (Jose, 21/09/2026): en una sola,
   las cuatro tarjetas de precio y las seis casillas hacían una tira de scroll interminable antes
   de llegar al formulario. Nombre y correo sí siguen en una columna: son campos de escribir. */
@media (max-width:734px){
  .planes-reserva{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  /* Las cuatro cabeceras miden lo mismo aunque «3 aplicaciones» necesite dos líneas: si no, las
     cifras de una misma fila quedaban a alturas distintas y la rejilla se veía torcida. */
  .plan-cabeza{min-height:2.9em;align-items:flex-start}
  /* «desde que lo recibas» al pie de la tarjeta: en Estudio la unidad «/ puesto / mes» ocupa dos
     líneas y su nota quedaba 26 px por debajo de la del Pack, con la rejilla descuadrada. */
  .plan-nota{margin-top:auto}
  .reserva-caja{padding:22px 20px 26px}
  .paso-campos{grid-template-columns:minmax(0,1fr)}
  .reserva-form .opciones-app{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .paso-contador{width:100%;margin-top:6px}
  /* El contador baja a su propia línea, pero el titular NO: sin «min-width:0» un titular largo
     —«Confirma tu reserva»— no cabía junto al número y saltaba entero debajo, así que el 3 se
     quedaba solo en su línea mientras el 1 y el 2 iban al lado de su texto. */
  .paso-cabeza{flex-wrap:wrap}
  .paso-texto{flex:1 1 0;min-width:0}
  .tarjetas-contacto{grid-template-columns:minmax(0,1fr)}
}

/* Autorrelleno de Chrome (Jose, 20/09/2026): pintaba los campos de lila en cuanto el navegador
   los rellenaba. No es un color nuestro; se fuerza el blanco con una sombra interior, que es la
   única forma de ganarle al estilo del navegador. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill{
  -webkit-box-shadow:0 0 0 1000px #fff inset !important;
  box-shadow:0 0 0 1000px #fff inset !important;
  -webkit-text-fill-color:var(--ink) !important;
  caret-color:var(--ink);
}

/* «RESERVAR ES GRATIS» con el cuerpo de un H3 (Jose, 20/09/2026): la frase que quita el miedo
   tiene que leerse antes que los precios, no en letra pequena debajo. */
.plan-libre{margin:-2px 0 16px;color:var(--ink);line-height:1.45}
.plan-libre b{font-size:var(--t-cierre);font-weight:900;letter-spacing:-.01em}

/* ===== COMPARATIVA · lo que va debajo de la tabla (Jose, 26/09/2026) =====
   «Debajo del precio le metes otro filete como el que tiene superior. Y todos los textos que
   aparecen debajo tienen que ir al ancho del contenedor… Otros en negrita, Adobe en negrita,
   Fuentes en negrita, con la misma negrita negra, de punta a punta.»
   Es una excepción a propósito al techo de 33em de «LARGO DE LÍNEA»: solo para este bloque.
   Segunda vuelta, el mismo día: «alinéalo en la vertical con los bloques del precio… con su espacio
   a la izquierda» y «métele un titular a ese bloque, es un bloque más»: dos apartados más, con el
   mismo titular y el mismo filete que los de la tabla (valores medidos en .vs tr.sec y .vs td).
   El filete de su titular hace de cierre de «El precio». */
.vs-notas .vs-sec{margin:0;padding:34px 22px 14px;border-top:2px solid var(--ink);font-size:var(--t-cierre);
  font-weight:900;letter-spacing:-.01em;line-height:normal;color:var(--ink)}
.vs-notas .vs-cuerpo{padding:0 22px 18px}
.vs-notas p,.vs-notas ol,.vs-notas li{max-width:none}
.vs-notas strong.vs-titulo{color:var(--ink);font-weight:700}
@media (max-width:734px){
  .vs-notas .vs-sec{padding:22px 0 8px}
  .vs-notas .vs-cuerpo{padding:0 0 14px}
}

/* ===== CABECERA · el icono más grande (Jose, 26/09/2026) =====
   «El icono de Hero está muy pequeño. Ponlo de ese tamaño», con una captura en la que el dibujo
   medía unas 5 alturas de línea del titular (antes, 3,7). Pasa de un cuarto del contenido (278 px)
   a 370 px, y de 230 a 360 entre 901 y 1279 px. El texto no se estrecha: se aparta el icono un poco
   más a la derecha y el blanco de su imagen (en multiplicar) puede quedar bajo el texto.
   La cabecera sube de alto mínimo para que el icono quepa entero. */
@media (min-width:1280px){
  section:has(> .icono-seccion):has(h1),
  section.page-head.compacta:has(> .icono-seccion):has(h1){min-height:400px}
  section:has(> .icono-seccion):has(h1) > .icono-seccion,
  section:has(> .icono-seccion):has(h1) > .icono-seccion:has(img[src*="17-tres-figuras"]){
    height:min(370px, calc(100% - 20px));
    /* se coloca por el centro (regla «solo en horizontal», 50% + 430 px): 40 px más a la derecha para
       que el dibujo no se pegue al titular, sin salirse nunca de la ventana */
    left:min(calc(50% + 470px), calc(100% - 185px));right:auto}
}
@media (min-width:901px) and (max-width:1279px){
  section:has(> .icono-seccion):has(h1),
  section.page-head.compacta:has(> .icono-seccion):has(h1){min-height:380px}
  section:has(> .icono-seccion):has(h1) > .icono-seccion,
  section:has(> .icono-seccion):has(h1) > .icono-seccion:has(img[src*="17-tres-figuras"]){height:min(360px, calc(100% - 16px))}
}

/* ===== COMPARATIVA · los números de las fuentes (Jose, 26/09/2026) =====
   «Cuando le pincho al 15 me manda al 18… siempre te manda mucho más abajo y lo pierdes»: el salto
   dejaba la fuente debajo de la cabecera fija (67 px). Se reserva ese alto más aire, y la fuente a
   la que se llega se resalta. */
.vs-fuentes li{scroll-margin-top:120px;border-radius:4px;transition:background-color .3s}
.vs-fuentes li:target{background:var(--accent-soft);outline:2px solid var(--accent);outline-offset:3px;color:var(--ink)}

/* ── PÁGINAS LEGALES Y CONTACTO (Jose, 26/09/2026) ─────────────────────────────────────────────
   «Los textos iban en una caja de 1120 de ancho, la caja de color blanco y los márgenes de color
   gris clarito; todo tiene que ir alineado: donde pone Aviso legal y el titular de este sitio
   web». La caja es la misma .wrap de la cabecera (1208 con 48 de margen = 1112 de texto), así que
   el texto empieza justo debajo del título. Los párrafos siguen con su techo de 33 em. */
.legal-cuerpo{background:#F5F5F7;padding:0}   /* gris clarito neutro: la web no tenía uno (su --bg-alt es azulado) */
/* Tercera vuelta (Jose, 26/09/2026): «abajo lleva también el contenedor hasta el footer sin margen
   exterior». La caja blanca va de la cabecera al pie; el gris solo queda a los lados. */
/* Segunda vuelta de Jose, el mismo día: «los textos tienen que llegar a todo el ancho del contenedor»,
   «no lleva margen superior, va pegado al header» y los titulares del contenedor «no pueden ser igual
   de grandes que Aviso legal: el tamaño que hay por debajo». Excepción a propósito al techo de 33 em. */
.legal-cuerpo .prose p,.legal-cuerpo .prose li,.legal-cuerpo .prose ul,.legal-cuerpo .prose ol,.legal-cuerpo .prose blockquote{max-width:none}
.legal-cuerpo .prose h2{font-size:var(--t-cierre)}
.legal-cuerpo .prose h3{font-size:var(--t-cuerpo)}
.legal-cuerpo > .wrap{background:#fff;max-width:var(--maxw);padding-top:44px;padding-bottom:56px}
.legal-cuerpo > .wrap.prose > h2:first-child,.legal-cuerpo > .wrap.prose > .note:first-child + h2{margin-top:0}
@media (max-width:734px){.legal-cuerpo{padding:0}.legal-cuerpo > .wrap{padding-top:28px;padding-bottom:36px}}
/* CONTACTO A DOS COLUMNAS (Jose, 26/09/2026: «el formulario, por lo bonito… que eso está muy feo y
   muy desalineado; un formulario parecido al de la página de precio»). Son las piezas de la reserva
   —.reserva-caja, .paso, .paso-campos, el recuadro marino— dentro de la caja blanca de las legales:
   la caja ya es blanca, así que la de la reserva pierde su propio fondo y su relleno, y todo arranca
   en la misma línea que «Contacto» y «Escríbenos.». */
.legal-cuerpo .caja-contacto{padding:0;border-radius:0;background:transparent}
/* Las tarjetas del tema, en la misma rejilla que Nombre y Correo (18 px): caen justo encima */
.opciones-tema{gap:18px}
.opciones-tema .opcion-plan{padding:14px 16px;min-height:56px;margin:0}
.opciones-tema .opcion-plan b{font-weight:700}
/* El tema elegido, en el gris azulado del pie y no en azul macizo (Jose, 26/09/2026: «ese azul es muy
   fuerte para eso»). Texto en negro; el punto de la casilla sigue en azul para que se lea la elección. */
.opciones-tema .opcion-plan:has(input:checked){background:var(--bg-alt);border-color:var(--bg-alt);box-shadow:none;color:var(--ink)}
.opciones-tema .opcion-plan:has(input:checked) span,.opciones-tema .opcion-plan:has(input:checked) b{color:var(--ink)}
.opciones-tema .opcion-plan:has(input:checked) input{accent-color:var(--accent)}
.caja-contacto .reserva-cierre .btn{width:100%}
/* Las notas de cada paso llegan hasta el borde de su columna, como las del final de la reserva */
.caja-contacto .paso-texto p{max-width:none}
/* El recuadro marino: los tres correos, uno bajo otro, con su filete */
.resumen-correos h3{font-size:var(--t-cierre)}
.lista-correos{list-style:none;margin:0;padding:0}
.lista-correos li{padding:12px 0;border-bottom:1px solid var(--dark-line)}
.lista-correos li:first-child{padding-top:0}
.lista-correos li:last-child{border-bottom:0;padding-bottom:0}
.lista-correos span{display:block;font-size:var(--t-pequeno);color:var(--dark-ink-2);margin-bottom:2px}
.lista-correos a{color:#fff;font-weight:700;text-decoration:none;overflow-wrap:anywhere}
.lista-correos a:hover{color:var(--ok)}
/* En pantallas medianas y en el móvil el botón va justo debajo del mensaje, y los correos al final:
   en la reserva el resumen va antes del botón para comprobar lo elegido; aquí no hay nada que comprobar. */
@media (max-width:1100px){
  .caja-contacto{grid-template-areas:"pasos" "cierre" "resumen"}
  .caja-contacto .reserva-resumen{margin-top:32px}
}
/* En el teléfono, el tema a dos columnas, como los planes y las aplicaciones de la reserva (Jose,
   21/09/2026: en una sola columna hacían una tira de scroll antes de llegar al formulario). */
@media (max-width:734px){.opciones-tema{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}


/* KIT DE PRENSA (26/09/2026): las imágenes de las demos, a su proporción 16:9 dentro de la tarjeta
   (una regla general de las tarjetas las estiraba en vertical), y los datos clave sin viñeta gruesa. */
.tarjetas-prensa{margin-top:18px}
.tarjetas-prensa .card{padding:14px 14px 18px}
.tarjetas-prensa img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;border-radius:var(--radius-s);margin:0 0 14px}
.tarjetas-prensa h3{font-size:var(--t-cuerpo);margin:0 0 6px}
.tarjetas-prensa p{font-size:var(--t-pequeno);margin:0}
.kit-prensa .frase-prensa{font-size:var(--t-cierre);line-height:1.3;font-weight:700;color:var(--ink)}
.kit-prensa .datos-prensa li{margin-bottom:6px}
/* Logos y foto del fundador: dos botones en fila; en el móvil uno debajo de otro y el texto largo se parte (Jose, 28/09/2026) */
.kit-prensa .botones-prensa{display:flex;flex-wrap:wrap;gap:12px}
.kit-prensa .botones-prensa .btn{white-space:normal;text-align:center}
.tarjetas-prensa .descargas-linea{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin-top:4px}
.tarjetas-prensa .descargas-linea .descargas-titulo{font-weight:700;color:var(--ink)}
.tarjetas-prensa .descargas-linea a{display:inline-flex;align-items:center;gap:6px;font-weight:700;text-decoration:none}
.tarjetas-prensa .descargas-linea a svg{flex:none}
.tarjetas-prensa .descargas-linea .peso{font-weight:400;color:var(--ink-2)}

/* Franja de arriba: el texto COMPLETO también en el móvil, como en escritorio y tableta (Jose,
   27/09/2026: «en la versión tablet y móvil, no sale el texto completo del escritorio»). Antes, hasta
   734 px salía la versión corta en una línea. Ahora la larga, en varias líneas, y la llamada en verde
   en la suya propia, como ya estaba en tableta. */
@media (max-width:734px){
  .franja .fr-larga{display:inline}
  .franja .fr-corta{display:none}
  .franja{white-space:normal;line-height:1.4;text-wrap:balance}   /* líneas parejas: sin una palabra sola al final */
  .franja .fr-larga strong{display:block}
  .franja .fr-sep{display:none}
}

/* Botón de reproducir grande en el centro del vídeo, azul con el triángulo blanco (Jose, 27/09/2026:
   «la gente no le da al vídeo porque el botón de play está chiquitillo en una esquina»). Lo pone
   main.js en todos los vídeos; se esconde mientras el vídeo corre y vuelve al pausarlo. main.js pasa el
   margen del vídeo a la caja para que el botón quede en el centro del vídeo. */
.video-caja{position:relative}
/* El dibujo es el de Jose («Boton play video.ai», 27/09/2026), en SVG dentro del botón: círculo azul de marca
   de 116 px, aro blanco de 4 px y triángulo blanco redondeado; 120 px en total. En su diseño el vídeo mide
   528 px y el botón ocupa el 22,7 % de su ancho: ese tamaño en escritorio y, en pantallas más estrechas, la
   misma proporción (unos 85 px en el móvil, mínimo 64). Sombra suave para que se despegue del vídeo. */
.play-grande{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:clamp(64px,22.7%,120px);aspect-ratio:1/1;height:auto;border-radius:50%;border:0;padding:0;cursor:pointer;
  display:block;background:none;color:var(--accent);
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.45));
  transition:transform .15s ease,color .15s ease}
.play-grande:hover{color:var(--accent-ink);transform:translate(-50%,-50%) scale(1.06)}
.play-grande:focus-visible{outline:3px solid #fff;outline-offset:3px}
.play-grande svg{display:block;width:100%;height:100%}
.play-grande[hidden]{display:none}