/* doesnothing.app. Misma marca que la app: Unbounded solo para el logo "nada", Onest para todo lo demás. */

/* ---------- Fuentes (alojadas aquí; licencia SIL OFL 1.1, ver /_cdn/fonts/OFL-*.txt) ---------- */
@font-face { font-family: "Onest"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/_cdn/fonts/onest-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Unbounded, solo para el logo: el latino completo, el mismo rango que Onest (la genera docs/tools/logo_font.py; un recorte a medida dejaba letras fuera). "[D4U]" sigue recortada */
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 800; font-display: swap; src: url(/_cdn/fonts/unbounded-800-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 600; font-display: swap; src: url(/_cdn/fonts/caveat-600-hand.woff2) format("woff2"); unicode-range: U+20-22, U+27-29, U+2C-2E, U+30-3B, U+3F, U+41-5A, U+61-7A, U+A1, U+AB, U+BB, U+BF, U+C1, U+C9, U+CD, U+D1, U+D3, U+DA, U+DC, U+E1, U+E9, U+ED, U+F1, U+F3, U+FA, U+FC, U+2014; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url(/_cdn/fonts/jetbrainsmono-700-d4u.woff2) format("woff2"); unicode-range: U+34, U+44, U+55, U+5B, U+5D; }

/* ---------- Tokens: claro por defecto; oscuro por el sistema o por elección ---------- */
:root {
  --bg: #F5F6F8; --bg-alt: #ECEEF1; --card: #FFFFFF; --foot: #FFFFFF; --foot-base: #F5F6F8; --ink: #14161A; --muted: #676D77; --faint: #9BA1AA; --line: #DCDFE4;
  --accent: #FF4A2B; --accent-ink: #FFFFFF; --gold: #FFCF3A; --good: #17915A; --tint: #FFE9E4;
  --shadow: 0 1px 2px rgba(20, 22, 26, .06), 0 14px 30px -18px rgba(20, 22, 26, .25);
  --display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --body: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #17191D; --bg-alt: #111316; --card: #22252A; --foot: #0F1115; --foot-base: #0A0B0E; --ink: #F2F3F5; --muted: #9AA0A9; --faint: #6A707A; --line: #33373E;
    --good: #22A866; --tint: rgba(255, 74, 43, .14);
    --shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 14px 30px -16px rgba(0, 0, 0, .8);
    --dk: 1; --ped-side: url(#pedside-dk); --ped-top: #33373F;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #17191D; --bg-alt: #111316; --card: #22252A; --foot: #0F1115; --foot-base: #0A0B0E; --ink: #F2F3F5; --muted: #9AA0A9; --faint: #6A707A; --line: #33373E;
  --good: #22A866; --tint: rgba(255, 74, 43, .14);
  --shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 14px 30px -16px rgba(0, 0, 0, .8);
  --dk: 1; --ped-side: url(#pedside-dk); --ped-top: #33373F;
  color-scheme: dark;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.55 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
/* El pie siempre abajo, aunque la página sea corta */
body { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; display: flex; flex-direction: column; }
body > main > :last-child { flex: 1 0 auto; }
/* En una página corta el hueco que sobra se lo queda el contenido, no la franja de cierre:
   si no, la franja se estira hasta el pie y parece que el contenido se acabó a mitad. */
body > main > .corp-final { flex: 0 0 auto; }
body > main > :has(+ .corp-final) { flex: 1 0 auto; }
body > .foot { flex-shrink: 0; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img, svg { display: block; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 10px; }
.wrap { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .wrap { padding: 0 32px; } }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--bg); padding: 8px 14px; border-radius: 10px; z-index: 100; }
.skip:focus { left: 8px; }
[hidden] { display: none !important; }

/* ---------- Tipografía ---------- */
.eyebrow { font: 600 12.5px/1.3 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.h1 { font: 700 clamp(34px, 6vw, 52px)/1.05 var(--body); letter-spacing: -.03em; text-wrap: balance; }
.h2 { font: 700 clamp(28px, 4.2vw, 42px)/1.1 var(--body); letter-spacing: -.028em; text-wrap: balance; }
.lead { font-size: clamp(17px, 2vw, 19px); color: var(--muted); max-width: 44ch; text-wrap: pretty; }

/* ---------- Cabecera ---------- */
.top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.top-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 64px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font: 800 28px/1 var(--display); letter-spacing: -.045em; text-decoration: none; transition: opacity .15s; }
.logo-corp { font-style: normal; }
.logo-corp .dot { color: var(--accent); }
a.logo:hover { opacity: .78; }
.logo-ic { width: 36px; height: 36px; border-radius: 9px; box-shadow: 0 0 0 1px rgba(20, 22, 26, .08), 0 4px 10px -4px rgba(20, 22, 26, .35); }
.logo .ic-dark { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo .ic-light { display: none; } :root:not([data-theme="light"]) .logo .ic-dark { display: block; } }
:root[data-theme="dark"] .logo .ic-light { display: none; }
:root[data-theme="dark"] .logo .ic-dark { display: block; }
.top-r { display: flex; align-items: center; gap: 8px; }
.pill-link { font-size: 14px; font-weight: 600; color: var(--muted); text-decoration: none; padding: 8px 10px; border-radius: 99px; }
.pill-link:hover { color: var(--ink); background: var(--card); }
.icon-btn { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); background: var(--card); box-shadow: var(--shadow); }
.icon-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn .i-moon { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .icon-btn .i-sun { display: none; } :root:not([data-theme="light"]) .icon-btn .i-moon { display: block; } }
:root[data-theme="dark"] .icon-btn .i-sun { display: none; }
:root[data-theme="dark"] .icon-btn .i-moon { display: block; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 22px; border-radius: 16px; background: var(--accent); color: var(--accent-ink); font-weight: 700; text-decoration: none; transition: transform .1s, box-shadow .2s; box-shadow: 0 8px 20px -10px rgba(255, 74, 43, .8); }
.btn:active { transform: scale(.97); }
.btn-sm { padding: 9px 15px; border-radius: 99px; font-size: 14px; }
/* En Nada Corp. el logotipo mide 219 px: en un telefono de 430 se come media cabecera y
   empuja el boton de descarga fuera de la pantalla. Se encoge, y el icono con el. */
@media (max-width: 560px) {
  .logo { font-size: 23px; gap: 8px; }
  .logo-ic { width: 31px; height: 31px; border-radius: 8px; }
}
/* 320px es el ancho de reflow de accesibilidad (y el del zoom al 400%): ahí el logo
   con el sufijo .corp más la píldora de idioma no caben en la misma fila */
@media (max-width: 380px) {
  .logo { font-size: 20px; gap: 6px; }
  .logo-ic { width: 27px; height: 27px; border-radius: 7px; }
}
@media (max-width: 420px) { .btn-sm { display: none; } }

/* ---------- Portada ---------- */
.hero { padding: 40px 0 24px; }
/* En el móvil el botón va justo después del título (es lo que engancha); en escritorio, a la derecha */
.hero-in { display: grid; gap: 24px; grid-template-areas: "top" "play" "copy"; }
.hero-top { grid-area: top; } .hero-play { grid-area: play; } .hero-copy { grid-area: copy; }
@media (min-width: 900px) {
  .hero { padding: 72px 0 56px; }
  .hero-copy .hero-sub { margin-top: 18px; }                        /* más específico que la regla general (margin 0) */
  .hero-in { grid-template-columns: 1.05fr .95fr; grid-template-areas: "top play" "copy play"; column-gap: 48px; row-gap: 0; align-items: center; }
  .hero-top { align-self: end; } .hero-copy { align-self: start; }
}
.hero-h { font: 700 clamp(44px, 7.4vw, 76px)/.98 var(--body); letter-spacing: -.045em; }
.hero-h span { color: var(--accent); }
/* "No hagas nada." es más largo que "Do nothing.": un poco más pequeño para que quepa en una línea */
.hero-h:lang(es) { font-size: clamp(40px, 6.2vw, 64px); }
.hero-sub { margin-top: 0; font-size: clamp(17px, 2vw, 20px); color: var(--muted); max-width: 40ch; text-wrap: pretty; }
.price { margin-top: 14px; font-size: 14px; color: var(--muted); }

/* Tiendas: los gráficos oficiales de Apple y Google, sin modificar (los de Google, recortados sin su margen transparente).
   Antes del lanzamiento se ven igual, con la nota "Coming soon" debajo, y al tocarlos avisan. */
.stores { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 26px; }
.store { display: block; line-height: 0; border-radius: 10px; transition: transform .1s; }
.store:active { transform: scale(.97); }
/* Los gráficos de Google vienen recortados sin su margen transparente (el español no lo traía): todos miden lo mismo */
.store-badge { width: auto; height: 48px; }
.stores-note { margin-top: 10px; font-size: 13.5px; font-weight: 600; color: var(--accent); }
.stores-inv { justify-content: center; }
/* Antes del lanzamiento: un letrero en lugar de las insignias de las tiendas */
.soon-sign { display: inline-flex; flex-direction: column; gap: 3px; margin-top: 26px; padding: 12px 20px; border-radius: 14px;
  border: 1.5px dashed color-mix(in srgb, var(--accent) 55%, var(--line)); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.soon-sign b { font: 800 13px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.soon-sign span { font-size: 15px; font-weight: 600; color: inherit; }
.soon-sign.stores-inv, .get-in .soon-sign, .get-hero .soon-sign { align-self: center; text-align: center; }


.hero-play { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.bigbtn { display: block; width: min(420px, 92%); -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.bigbtn svg { width: 100%; height: auto; overflow: visible; }
.bigbtn .cap { transform-box: view-box; transform-origin: 200px 178px; }
.bigbtn { cursor: default; }
.tapline { height: 52px; display: flex; align-items: center; justify-content: center; max-width: 30ch; margin-top: 22px; font-size: 18px; line-height: 24px; font-weight: 600; color: var(--muted); }
.tapline > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-wrap: balance; }
.tapline.hit { color: var(--ink); animation: pop .32s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes pop { from { opacity: 0; transform: translateY(6px) scale(.96); } to { opacity: 1; transform: none; } }
.taps { font-size: 13.5px; color: var(--faint); font-variant-numeric: tabular-nums; min-height: 21px; margin-top: 2px; }
.btn-ghost { margin-top: 24px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 99px; font-weight: 600; font-size: 15px; background: var(--card); box-shadow: var(--shadow); }
.btn-ghost svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Bandas ---------- */
.band { padding: 56px 0; }
@media (min-width: 900px) { .band { padding: 88px 0; } }
.sec-head { max-width: 640px; margin-bottom: 32px; }

/* Pantalla bloqueada con notificaciones */
.split { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: .9fr 1.1fr; gap: 64px; } }
.split-copy .lead { margin-top: 14px; }
.phone { justify-self: center; width: min(320px, 86vw); aspect-ratio: 9 / 18.5; border-radius: 48px; padding: 10px; background: #16181C; box-shadow: 0 40px 70px -34px rgba(10, 12, 16, .55); }
.phone-screen { height: 100%; border-radius: 38px; overflow: hidden; padding: 56px 12px 16px; color: #fff; text-align: center;
  background: radial-gradient(120% 70% at 50% 0%, #FF7A5C 0%, #FF4A2B 38%, #7A1F12 78%, #2A0E09 100%); }
.ls-time { font: 700 64px/1 var(--body); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ls-date { font-size: 15px; font-weight: 500; opacity: .9; margin-top: 6px; }
.ls-stack { margin-top: 26px; display: grid; gap: 8px; text-align: left; }
.ls-n { display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: center; padding: 11px 12px; border-radius: 20px; background: rgba(255, 255, 255, .22); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); color: #fff; animation: ls-in .55s cubic-bezier(.2, .9, .3, 1.1) both; }
.ls-n img { width: 36px; height: 36px; border-radius: 9px; }
.ls-h { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; }
.ls-h span { opacity: .75; font-size: 12.5px; }
.ls-b { font-size: 13.5px; line-height: 1.35; opacity: .95; }
@keyframes ls-in { from { opacity: 0; transform: translateY(-14px) scale(.96); } to { opacity: 1; transform: none; } }

/* World of Nada */
.world { text-align: center; display: grid; justify-items: center; }
.world-n { font: 700 clamp(44px, 9vw, 96px)/1 var(--body); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.world-t { font-size: clamp(18px, 2.4vw, 24px); font-weight: 600; margin-top: 10px; }
.world-s { font-size: 14px; color: var(--muted); margin-top: 22px; display: grid; gap: 2px; }
.world-s span { display: block; }
/* Desglose: en qué están los que no hacen nada, según su hora local */
.world-split { margin-top: 34px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; max-width: 820px; }
@media (min-width: 720px) { .world-split { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 720px) { .nums-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.world-split div { background: var(--card); border-radius: 20px; padding: 20px 14px; box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: 4px; }
.world-split b { font: 700 26px/1.1 var(--body); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.world-split span { font-weight: 600; font-size: 15px; }
.world-split small { color: var(--muted); font-size: 13px; }
.world .btn-ghost { margin-top: 22px; }

/* Tarjetas */
.cards { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.card { background: var(--card); border-radius: 24px; padding: 26px; box-shadow: var(--shadow); display: grid; gap: 10px; align-content: start; }
.card-ic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--tint); color: var(--accent); margin-bottom: 6px; }
.card-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.card h3 { font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.card p { color: var(--muted); font-size: 15px; }
.card .card-k { color: var(--ink); font-weight: 700; font-size: 14px; margin-top: 4px; font-variant-numeric: tabular-nums; }
/* Dos motivos distintos para no poder comprar: lo inventado está agotado y lo real aún no abre */
.card .sold, .card .soon { justify-self: start; margin-top: 2px; padding: 5px 11px; border-radius: 999px;
  font: 700 11.5px/1 var(--body); letter-spacing: .09em; text-transform: uppercase; }
.card .sold { color: var(--faint); box-shadow: inset 0 0 0 1px var(--line); }

/* Sin foto todavia: la ficha es solo tipografia, que es honesto y no parece barato.
   Cuando lleguen las fotos del proveedor, la imagen entra encima del nombre. */
.shop-cards .card { gap: 8px; }
/* Los colores en que se puede pedir, como en cualquier tienda */
.colors { display: flex; gap: 6px; margin-top: 2px; }
.colors i { width: 15px; height: 15px; border-radius: 50%; background: var(--c);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 22%, transparent); }
.card .soon { color: var(--accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, var(--line)); }

/* Banner de la tienda en la portada. No es una banda: va en color, fuera de la alternancia
   de gris y blanco, para que se lea como un anuncio y no como otra sección. */
.shop-strip { display: block; background: var(--accent); color: #FFF; text-decoration: none; }
.shop-strip-in { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding-block: 18px; }
.shop-strip b { font-size: 17px; letter-spacing: -.01em; }
.shop-strip span { color: rgba(255, 255, 255, .82); font-size: 16px; }
.shop-strip i { font-style: normal; font-weight: 700; font-size: 15px; display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.shop-strip svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.shop-strip:hover svg { transform: translateX(3px); }
@media (max-width: 620px) { .shop-strip i { margin-left: 0; } }

/* Cierre */
.cta-band { background: var(--ink); color: var(--bg); border-radius: 32px; padding: clamp(32px, 6vw, 64px); text-align: center; display: grid; justify-items: center; }
.cta-band .lead { color: color-mix(in srgb, var(--bg) 70%, transparent); margin-top: 14px; }
.cta-band .stores { justify-content: center; }
.cta-band .stores-note { color: color-mix(in srgb, var(--bg) 80%, var(--accent)); }

/* Preguntas */
.faq { max-width: 760px; }
.faq .h2 { margin-bottom: 20px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 36px 18px 0; font-size: 18px; font-weight: 600; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 24px; font-weight: 400; color: var(--muted); transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding: 0 0 18px; color: var(--muted); max-width: 60ch; }

/* ---------- Páginas de texto (privacidad, soporte, /get, 404) ---------- */
/* Las páginas de documento van en blanco, como las bandas claras: así el fondo de la
   página no aparece como un tercer tono y nada queda pegado al pie. */
.doc { padding: 48px 0 72px; background: var(--card); }
.doc .steps li, .doc .flow li, .doc .job, .doc .grads figure, .doc .world-split div,
.doc .apply input[type="text"], .doc .apply textarea { background: var(--bg); }
/* Dentro de .doc los paneles son grises sobre blanco, justo al revés que en el resto del sitio.
   La sombra estaba pensada para tarjetas blancas sobre gris: aquí no separa nada y, en una barra
   ancha y baja como un paso, se extiende a lo largo y se lee como una mancha. El color ya separa. */
.doc .steps li, .doc .flow li, .doc .job, .doc .grads figure, .doc .quotes figure, .doc .world-split div { box-shadow: none; }
.doc-in { max-width: 760px; display: grid; gap: 14px; }
.doc-in p, .corp-block p { text-wrap: pretty; }   /* ninguna frase acaba con una palabra sola abajo */
.doc-lead { color: var(--muted); margin: -4px 0 2px; text-wrap: pretty; }   /* la descripción bajo un h2 de página de documento */
/* Ruta de vuelta al inicio en las páginas internas */
.crumb { display: flex; align-items: center; gap: 8px; }
.crumb a { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); text-decoration: none; }   /* no solo en .doc: la tienda es una banda */
.crumb a:hover { text-decoration: underline; text-underline-offset: 3px; }
.crumb svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; margin-left: -3px; }
/* Nosotros: cifras y quién está detrás */
.about-nums { margin-top: 4px; max-width: none; }
.team { margin-top: 4px; }
.doc .cards a.card { color: var(--ink); font-weight: 400; text-decoration: none; transition: transform .2s; }
.doc .cards a.card:hover { transform: translateY(-3px); }
.team-av { width: 44px; height: 44px; border-radius: 13px; margin-bottom: 6px; }
.team-d4u { justify-self: start; display: inline-flex; align-items: center; height: 44px; padding: 0 12px; border-radius: 13px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); margin-bottom: 6px; }
.team-d4u b { font-size: 17px; }
.card-go { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; color: var(--accent); font-weight: 700; font-size: 14px; }
.card-go svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.doc a.card:hover .card-go svg { transform: translateX(3px); }
.doc h2 { font-size: 22px; font-weight: 700; letter-spacing: -.015em; margin-top: 22px; }
.doc ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: var(--muted); }
.kit { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: var(--muted); max-width: 62ch; }
.doc p { color: var(--muted); }
.doc .h1, .doc h2 { color: var(--ink); }
.doc a:not(.store) { color: var(--accent); font-weight: 600; }
.doc-date { font-size: 14px; margin-top: 18px; }
.faq-doc { max-width: none; margin-top: 10px; }
.get-in { justify-items: center; text-align: center; padding-top: 24px; }
.get-in .lead { margin: 0 auto; }
.get-icon { border-radius: 22px; box-shadow: var(--shadow); }
.get-in .stores { justify-content: center; margin-top: 10px; }
.get-in .stores-note { margin-top: 0; }
.get-back { margin-top: 18px; font-size: 15px; }
/* El botón pequeño de la 404 */
.play-404 { grid-area: auto; width: 100%; margin: 6px 0 2px; }
.play-404 .bigbtn { width: min(300px, 76%); }
.play-404 .tapline { height: 48px; margin-top: 16px; font-size: 16.5px; }   /* dos líneas exactas: 2 x 24 px */
.doc .big404 { font: 700 clamp(72px, 16vw, 140px)/1 var(--body); letter-spacing: -.05em; color: var(--accent); font-variant-numeric: tabular-nums; }

/* ---------- Pie ---------- */
/* Pie sólido para los créditos (regla de la casa) */
.foot { background: var(--foot); border-top: 1px solid var(--line); padding: 36px 0 0; }
.foot-in { display: grid; gap: 24px; }
/* Enlaces centrados en vertical con la línea del logo (el icono mide 36 px; el botón del café, 34) */
/* Dos columnas: la marca y los enlaces. La barra social va en su propia fila, de lado a
   lado, para que su ancho no le quite sitio a los enlaces — con el tachón de X mide 433 px
   y empujaba «Invítame un café» a un segundo renglón. */
@media (min-width: 1000px) { .foot-in { grid-template-columns: 1fr auto; }
  .foot-social, .foot-base { grid-column: 1 / -1; } .foot-links { min-height: 36px; } }
.foot-brand p { color: var(--muted); margin-top: 8px; font-size: 15px; }
.foot-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; align-content: start; gap: 10px 22px; font-weight: 600; font-size: 15px; }
.foot-links li { display: flex; align-items: center; }
.foot-links a { text-decoration: none; }
.foot-links a:hover { color: var(--accent); }
.foot-bottom { background: var(--foot-base); margin-top: 34px; }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 10px; font-size: 13.5px; color: var(--muted); padding: 18px 16px; }
/* La corrección a mano: "Todos los" tachado y, encima, "Nada de" con rotulador rojo */
.fix { position: relative; display: inline-block; }
.fix s { text-decoration: line-through; text-decoration-color: var(--accent); text-decoration-thickness: 2.5px; }
.fix .hand { position: absolute; left: 50%; bottom: 84%; transform: translateX(-50%) rotate(-5deg); white-space: nowrap; font: 600 1.5em/1 "Caveat", "Bradley Hand", "Segoe Script", cursive; color: var(--accent); font-style: normal; }
/* D4U: su propio logotipo (JetBrains Mono y corchetes azules), como marca de quien lo hizo */
.d4u { text-decoration: none; }
.d4u b { font: 700 13.5px "JetBrains Mono", ui-monospace, monospace; color: var(--ink); }
.d4u i { font-style: normal; color: #1652F0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .d4u i { color: #5B84FF; } }
:root[data-theme="dark"] .d4u i { color: #5B84FF; }

/* ---------- Compartir: la tarjeta-imagen ---------- */
.share-dlg { border: 0; padding: 0; background: transparent; max-width: min(440px, calc(100% - 24px)); width: 100%; color: var(--ink); }
.share-dlg::backdrop { background: rgba(12, 13, 15, .55); backdrop-filter: blur(4px); }
.share-in { position: relative; background: var(--card); border-radius: 28px; padding: 20px; display: grid; gap: 14px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .5); }
.share-h { font: 700 24px/1.1 var(--body); letter-spacing: -.02em; padding-right: 48px; }
.share-x { position: absolute; top: 14px; right: 14px; box-shadow: none; background: var(--bg); }
.share-img { width: 100%; height: auto; border-radius: 18px; box-shadow: var(--shadow); background: var(--bg); }
.share-acts { display: grid; gap: 14px; }
.share-acts .btn { width: 100%; }
/* Iconos en vez de textos: cada red con su color; al pasar el cursor se rellena con él */
.share-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.sico { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); transition: background .15s, color .15s, transform .1s; }
.sico:active { transform: scale(.94); }
.sico svg { width: 22px; height: 22px; }
.sico.line svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sico .i-ok { display: none; }
.sico.done .i-link { display: none; } .sico.done .i-ok { display: block; }
.sico.done { background: var(--good); color: #fff; box-shadow: none; }
.wa { color: #25D366; } .tg { color: #26A5E4; } .fb { color: #0866FF; }
.wa:hover { background: #25D366; color: #fff; } .tg:hover { background: #26A5E4; color: #fff; } .fb:hover { background: #0866FF; color: #fff; }
.xx:hover, .line:hover { background: var(--ink); color: var(--bg); }

/* ---------- Aviso ---------- */
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 2147483647; max-width: calc(100% - 32px); width: max-content; padding: 12px 18px; border-radius: 14px; background: var(--ink); color: var(--bg); font-size: 15px; font-weight: 500; text-align: center; transform: translate(-50%, 16px); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Aparecer al hacer scroll ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

.foot-corp { color: var(--muted); font-size: 13px; opacity: .85; margin-top: 2px; }

/* ---------- Nada Corp. ---------- */
.co-cards { margin-top: 6px; }
@media (min-width: 620px) { .co-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .co-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.steps { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; counter-reset: paso; }
.steps li { background: var(--card); border-radius: 18px; padding: 16px 18px; box-shadow: var(--shadow); display: grid; gap: 2px; }
.steps li b { font-size: 16.5px; letter-spacing: -.01em; }
.steps li span { color: var(--muted); font-size: 15px; }
/* Flujo de trabajo: lo mismo que .steps pero en fases, en fila y con la flecha entre medias,
   como lo dibuja cualquier consultora. La fase del medio es la que no hace nada. */
.flow { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.flow li { position: relative; background: var(--card); border-radius: 18px; padding: 16px 18px; display: grid; gap: 3px; align-content: start; }
.flow-k { font: 700 11.5px/1.3 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.flow li b { font-size: 16px; letter-spacing: -.01em; }
.flow li small { color: var(--muted); font-size: 13.5px; margin-top: 3px; }
@media (min-width: 720px) {
  .flow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; }
  .flow li + li::before { content: ""; position: absolute; left: -23px; top: 50%; width: 9px; height: 9px;
    border-top: 2px solid var(--line); border-right: 2px solid var(--line); transform: translateY(-50%) rotate(45deg); }
}
/* Cuatro fases no caben en fila dentro de una columna de documento: el mismo flujo, hacia abajo. */
.flow-v { grid-template-columns: 1fr; gap: 26px; }
.flow-v li + li::before { content: ""; position: absolute; left: 50%; top: -18px; width: 9px; height: 9px;
  border-top: 2px solid var(--line); border-right: 2px solid var(--line); transform: translateX(-50%) rotate(135deg); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.chips span { font-size: 14px; font-weight: 600; color: var(--muted); background: var(--card); border-radius: 99px; padding: 7px 13px; box-shadow: inset 0 0 0 1px var(--line); text-decoration: line-through; text-decoration-color: var(--accent); }
.doc-note { font-size: 13.5px; color: var(--faint); text-wrap: pretty; }
.note-star { margin-top: -10px; }   /* la letra pequeña va pegada a la nota que amplía */
.doc-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 10px; }
.doc-cta span { font-size: 14px; font-weight: 600; color: var(--accent); }

/* Egresados: ninguno existe */
.grads { margin-top: 6px; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
/* Cuatro testimonios en tres columnas dejan 3 + 1, y el solitario queda más bajo que los
   demás porque su fila la mide él. En dos columnas son 2 x 2, y grid-auto-rows iguala
   las dos filas entre sí: los cuatro recuadros miden lo mismo. */
@media (min-width: 700px) { .grads { grid-auto-rows: 1fr; } }          /* filas iguales entre sí */
@media (min-width: 700px) { .grads-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.grads figure { margin: 0; background: var(--card); border-radius: 20px; padding: 18px; box-shadow: var(--shadow); display: grid; gap: 10px; align-content: start; }
.grads img { width: 52px; height: 52px; border-radius: 50%; }
.grads blockquote { margin: 0; font-size: 15px; color: var(--ink); }
.grads figcaption { display: grid; gap: 1px; font-size: 13.5px; }
.grads figcaption b { font-size: 14.5px; }
.grads figcaption span { color: var(--muted); }

/* Prensa */
.quotes { margin-top: 6px; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.quotes figure { margin: 0; background: var(--card); border-radius: 20px; padding: 20px; box-shadow: var(--shadow); display: grid; gap: 8px; }
.quotes blockquote { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.015em; }
.quotes figcaption { font-size: 13.5px; color: var(--muted); }

/* Vacante y formulario que no envía nada */
.job { background: var(--card); border-radius: 24px; padding: 22px; box-shadow: var(--shadow); margin-top: 6px; }
.job h2 { margin-top: 0; }
.job h3 { font-size: 15px; font-weight: 700; margin-top: 16px; }
.job-meta { font-size: 14px; color: var(--muted); font-weight: 600; }
.apply { display: grid; gap: 14px; margin-top: 6px; }
.apply label { display: grid; gap: 5px; font-size: 14.5px; font-weight: 600; }
.apply input[type="text"], .apply textarea { font: 400 16px var(--body); color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; width: 100%; resize: vertical; }
.apply input:focus-visible, .apply textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.apply small { font-weight: 500; font-size: 13px; color: var(--faint); }
.apply .check { grid-template-columns: auto 1fr; align-items: start; gap: 10px; font-weight: 500; }
.apply .check input { width: 20px; height: 20px; accent-color: var(--accent); margin-top: 1px; }
.apply .btn { justify-self: start; }
.btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }
.apply-wait { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.apply-wait b { color: var(--accent); }
.apply-honest { font-size: 13px; color: var(--faint); }

.hq { font-style: normal; display: grid; gap: 2px; background: var(--card); border-radius: 20px; padding: 18px 20px; box-shadow: var(--shadow); justify-self: start; margin-top: 6px; }
.hq b { font-size: 16.5px; }
.hq span { color: var(--muted); font-size: 15px; }
.hq small { color: var(--faint); font-size: 13px; margin-top: 6px; }

/* La sección de Nada Corp. en la portada */

/* Los botones dentro de las páginas de documento mantienen su color propio */
.doc a.btn { color: var(--accent-ink); font-weight: 700; }

/* Silicon Valley, corregido */

/* Filas más altas donde hay una corrección a mano encima de la palabra tachada */
.hand-line { line-height: 2.2; }
.hq .hand-line { display: inline-block; margin-top: .35em; }

.chips.plain span { text-decoration: none; color: var(--ink); }

/* ---------- Nada Corp.: que cada sección se vea como un bloque ---------- */
.corp-nav { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.corp-nav a { font-size: 14px; font-weight: 600; color: var(--muted); text-decoration: none; padding: 8px 14px; border-radius: 99px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.corp-nav a:hover { color: var(--ink); }
.corp-nav a.on { background: var(--ink); color: var(--bg); box-shadow: none; }
.corp-doc .doc-in { max-width: 820px; counter-reset: sec; }
.corp-doc h2 { position: relative; margin-top: 46px; padding-top: 24px; border-top: 2px solid var(--line); font-size: clamp(23px, 3vw, 30px); letter-spacing: -.025em; counter-increment: sec; }
.corp-doc h2::after { content: counter(sec, decimal-leading-zero); position: absolute; top: 26px; right: 0; font: 700 13px/1 var(--body); color: var(--faint); letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.corp-doc .job h2 { margin-top: 0; padding-top: 0; border-top: 0; }
.corp-doc .job h2::after { content: none; }

/* Cuenta atrás del lanzamiento */
/* El examen de ingreso: el reloj es el protagonista de la página */
.exam { text-align: center; justify-items: center; }
.exam .lead { max-width: 620px; }
.exam-clock { margin: 18px 0 6px; font: 700 clamp(62px, 15vw, 128px)/1 var(--body); letter-spacing: -.045em;
  font-variant-numeric: tabular-nums; color: var(--accent); }
.exam-clock.done { color: var(--ink); }
.exam-rules { max-width: 540px; color: var(--muted); font-size: 15px; margin: 0; }
.exam-clock.idle { color: var(--faint); }
.exam-act { margin: 0 0 14px; }
.exam-send { margin: 26px 0 0; }
.exam .apply-wait, .exam .apply-honest { margin: 6px 0 0; }
.exam-share { margin: 16px 0 0; }   /* solo aparece al cumplir los sesenta minutos */

/* ---------- Empleo: la lista de vacantes, los adjuntos y el contrato ---------- */
/* El puesto, en su propia franja bajo el banner: el banner es el mismo en toda la sección */
.post { padding-block: 34px; display: grid; gap: 4px; }
.post .eyebrow { margin: 0 0 2px; }
.post-h { margin: 0; font: 700 clamp(28px, 4.6vw, 44px)/1.08 var(--body); letter-spacing: -.035em; }
.post-meta { margin: 0; color: var(--muted); font-size: 17px; }
.post-p { margin: 12px 0 0; color: var(--muted); max-width: 62ch; text-wrap: pretty; }
.post-doc { max-width: 820px; }   /* en las páginas .doc la columna es más estrecha: la franja se alinea con ella */
.post-hire { max-width: 700px; }  /* y con la columna del flujo de reclutamiento */

/* Filtros que no filtran: con una sola vacante no había nada que filtrar */
.filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 640px; margin: 6px 0 20px; }
.filters label { display: grid; gap: 5px; font-size: 13px; font-weight: 600; color: var(--muted); }
.filters select { font: 600 15px var(--body); color: var(--faint); background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; padding: 10px 12px; width: 100%; appearance: none; }
@media (max-width: 620px) { .filters { gap: 8px; }
  .filters label { font-size: 12px; }
  .filters select { font-size: 14px; padding: 9px 10px; } }

/* La vacante, tal y como sale en la lista */
.opening { display: flex; align-items: center; justify-content: space-between; gap: 10px 20px; flex-wrap: wrap;
  border-radius: 20px; padding: 20px 22px; text-decoration: none; color: inherit; transition: transform .2s, box-shadow .2s; }
.opening:hover { transform: translateY(-2px); }
.opening-in { display: grid; gap: 3px; }
.opening-in b { font-size: 19px; letter-spacing: -.02em; }
.opening-meta { color: var(--muted); font-size: 15px; }
.opening-in small { color: var(--faint); font-size: 13px; }
.opening .card-go { margin: 0; }
.opening:hover .card-go svg { transform: translateX(3px); }

/* Adjuntos: se elige el archivo y el archivo se queda donde estaba */
.files { display: grid; gap: 10px; margin-top: 6px; }
.file { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 14px;
  border-radius: 18px; padding: 16px 18px; cursor: pointer; }
.file-n { display: grid; gap: 2px; }
.file-n b { font-size: 16.5px; letter-spacing: -.01em; }
.file-n small { color: var(--muted); font-size: 14px; }
.file-btn { font: 700 14px var(--body); color: var(--accent); border: 1px solid var(--line); border-radius: 999px;
  padding: 9px 16px; white-space: nowrap; transition: border-color .2s; }
.file:hover .file-btn { border-color: var(--accent); }
.file-state { grid-column: 1 / -1; font-size: 13px; color: var(--faint); }
.file-state.on { color: var(--accent); font-weight: 600; }

/* El contrato: cinco cláusulas y una firma */
.contract { border-radius: 20px; padding: 22px 24px; margin-top: 6px; }
.contract-h { margin: 0 0 14px; font: 700 13px var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.contract ol { margin: 0; padding-left: 20px; display: grid; gap: 9px; font-size: 15.5px; }
.contract-fine { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--faint); }
.apply-sign { max-width: 380px; margin-top: 20px; }

/* El flujo entra en una columna estrecha: es un formulario, no una portada */
.hire { gap: 10px; max-width: 700px; }
.hire .doc-lead { margin: 0; }
.hire .doc-note { margin: 4px 0 0; }

/* El examen, dentro del flujo, es un panel más: sigue siendo el grande */
.hire .exam { display: grid; border-radius: 22px; padding: 26px 20px 30px; margin-top: 6px; }
.hire .exam-clock { font-size: clamp(54px, 13vw, 104px); }
.hire .exam-send { margin-top: 24px; }
.opening, .file, .contract, .hire .exam { background: var(--card); box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgba(20, 22, 26, .04); }
:root[data-theme="dark"] .opening, :root[data-theme="dark"] .file,
:root[data-theme="dark"] .contract, :root[data-theme="dark"] .hire .exam { box-shadow: inset 0 0 0 1px var(--line); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .opening, :root:not([data-theme="light"]) .file,
  :root:not([data-theme="light"]) .contract, :root:not([data-theme="light"]) .hire .exam { box-shadow: inset 0 0 0 1px var(--line); }
}
.opening:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, var(--line)), 0 10px 26px -18px rgba(20, 22, 26, .5); }
.band-b .opening, .band-b .file, .band-b .contract, .band-b .hire .exam { background: var(--bg); }
.band-b .apply input[type="text"], .band-b .apply textarea { background: var(--bg); }   /* en banda blanca el campo blanco desaparece: solo lo marcaba el borde */
.count { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; max-width: 560px; margin-top: 6px; }
.count div { background: var(--card); border-radius: 20px; padding: 18px 10px; box-shadow: var(--shadow); display: grid; gap: 2px; justify-items: center; }
.count b { font: 700 clamp(28px, 6vw, 40px)/1 var(--body); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.count span { font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }

/* ---------- Portada de Nada Corp.: banner oscuro con el producto, como los de las grandes ---------- */
.corp-hero { background: #14161A; color: #F3F4F6; padding: 72px 0 0; text-align: center; overflow: hidden; }
:root[data-theme="dark"] .corp-hero { background: #0B0C0E; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .corp-hero { background: #0B0C0E; } }
.corp-hero-in { display: grid; justify-items: center; gap: 14px; }
.corp-hero .eyebrow { color: #FF6B4F; margin: 0; }
.corp-h1 { font: 700 clamp(34px, 6.4vw, 62px)/1.03 var(--body); letter-spacing: -.035em; text-wrap: balance; max-width: 16ch; }
.corp-lead { color: #B9BEC6; font-size: clamp(17px, 2vw, 20px); max-width: 52ch; text-wrap: pretty; }
.corp-btns { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 6px; }
.btn-line { display: inline-flex; align-items: center; padding: 14px 22px; border-radius: 16px; color: #F3F4F6; text-decoration: none; font-weight: 700; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35); }
.btn-line:hover { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .7); }
.corp-art { position: relative; z-index: 1; pointer-events: none; width: min(660px, 92%); margin: 18px auto -6%; --dk: 1; --ped-side: url(#pedside-dk); --ped-top: #33373F; }
.corp-art svg { width: 100%; height: auto; overflow: visible; }

/* Barra de secciones, pegada bajo el banner */
.corp-bar { background: var(--card); border-bottom: 1px solid var(--line); padding: 10px 0; }
.corp-bar .corp-nav { margin: 0; }

/* "Clientes" que no existen */
.clients { padding: 34px 0 6px; text-align: center; }
.clients-h { font-size: 14px; font-weight: 600; color: var(--muted); }
.clients-row { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 34px; }
.clients-row li { font: 700 17px/1 var(--body); letter-spacing: .14em; color: var(--faint); }

.corp-block { padding-block: 34px; display: grid; gap: 20px; }
.corp-block .h2 { font: 700 clamp(26px, 4vw, 38px)/1.1 var(--body); letter-spacing: -.03em; }
.corp-block .eyebrow { margin: 0; }

/* Testimonio de un cliente inexistente */
.corp-quote { background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 54px 0; text-align: center; }
.corp-quote blockquote { margin: 0 auto; max-width: 28ch; font: 700 clamp(22px, 3.4vw, 32px)/1.25 var(--body); letter-spacing: -.025em; text-wrap: balance; }
.corp-quote-by { margin-top: 12px; font-size: 14px; color: var(--muted); }

.offices { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: start; }
.offices-next h3 { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.offices-next p { color: var(--muted); font-size: 15px; }

.corp-final { background: var(--ink); color: var(--bg); padding: 64px 0; text-align: center; }
.band-end { padding: 38px 0; }
.band-end p { margin: 0; color: color-mix(in srgb, var(--bg) 62%, var(--ink)); font-size: 14.5px; }
/* La nota de quien revisó la página: escrita a mano y encima de lo que comenta */
.end-in { display: grid; justify-items: center; gap: 7px; }
.end-hand { font: 600 22px/1 "Caveat", "Bradley Hand", cursive; font-style: normal; color: var(--accent); transform: rotate(-3deg); }
.corp-final-in { display: grid; justify-items: center; gap: 10px; }
.corp-final p { color: color-mix(in srgb, var(--bg) 75%, var(--ink)); }
.corp-final .h2 { font: 700 clamp(26px, 4.4vw, 40px)/1.1 var(--body); letter-spacing: -.03em; }

/* Las tarjetas son enlaces, pero no se subrayan */
a.card { color: inherit; text-decoration: none; transition: transform .2s; }
a.card:hover { transform: translateY(-3px); }
a.card h3, a.card p { text-decoration: none; }
.corp-art { margin-bottom: -4%; }

/* ---------- Afinado de la portada de Nada Corp. ---------- */
.corp-hero { padding: 64px 0 40px; }
.corp-hero-in { gap: 10px; }
.corp-h1 { margin-bottom: 6px; }
/* la corrección a mano necesita aire, pero no tanto como una fila doble */
.corp-hero .hand-line { line-height: 1.75; margin-top: 4px; }
.corp-hero .fix .hand { bottom: 92%; }
.corp-btns { margin-top: 14px; }
.corp-art { width: min(560px, 82%); margin: 8px auto 0; }
.corp-bar .corp-nav { justify-content: flex-start; }
.corp-block { padding-block: 48px; }
.corp-block .about-nums { margin-top: 0; }
.corp-block .about-nums div { justify-items: center; text-align: center; }
.clients { padding: 40px 0 8px; }
.corp-quote { padding: 64px 0; }
.offices { gap: 24px; }

/* El "Honey" no debe tocar el titular: la corrección baja y el párrafo gana aire arriba */
.corp-hero .hand-line { line-height: 1.7; margin-top: 16px; }
.corp-hero .fix .hand { bottom: 78%; font-size: 1.35em; }
.corp-h1 { margin-bottom: 2px; }
/* El dibujo trae aire propio arriba: se recorta para que no quede un hueco */
.corp-art { margin-top: -26px; }

/* Mapa dibujado por nosotros: no apunta a nada y no llama a ningún servicio */
.map { margin: 6px 0 0; display: grid; gap: 10px; }
.map-view { position: relative; border-radius: 24px; overflow: hidden; box-shadow: var(--shadow); }
.map-view > svg { display: block; width: 100%; height: auto; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }   /* al arrastrar no se seleccionan los rótulos */
.map-view.moviendo > svg { cursor: grabbing; }
/* Los mandos de siempre de un mapa: se pulsan de verdad y no hacen nada, igual que el botón del producto */
.map-ctl { position: absolute; top: 14px; right: 14px; display: grid; border-radius: 10px; overflow: hidden; background: var(--bg); box-shadow: 0 1px 5px -1px rgba(20, 22, 26, .3); }
.map-ctl-2 { top: 96px; }
.map-ctl button { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer; }
.map-ctl button + button { border-top: 1px solid var(--line); }
.map-ctl button:active { background: var(--bg-alt); }
.map-ctl button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.map-scale { position: absolute; right: 16px; bottom: 13px; margin: 0; display: flex; align-items: flex-end; gap: 7px; font-size: 12.5px; color: var(--faint); }
.map-scale i { display: block; width: 76px; height: 7px; border: 1.6px solid currentColor; border-top: 0; }
.map-brand { position: absolute; left: 13px; bottom: 11px; margin: 0; padding: 3px 9px 4px; border-radius: 7px; background: color-mix(in srgb, var(--card) 94%, transparent); color: var(--muted); font-size: 14px; letter-spacing: .01em; }
.map-brand b { font: 800 17px/1 var(--display); letter-spacing: -.045em; margin-right: 4px; }
.m-bg { fill: var(--card); }
.m-street { stroke: var(--line); stroke-width: 22; fill: none; stroke-linecap: round; }
.m-block { fill: color-mix(in srgb, var(--line) 55%, transparent); }
.m-label { fill: var(--faint); font: 600 38px var(--body); letter-spacing: .02em; }   /* el mapa se ve al 38 %: 38 px de aquí son 14,5 en pantalla */
.m-pin path { fill: var(--accent); }
.m-dot { fill: #fff; }
.m-halo { fill: color-mix(in srgb, var(--accent) 16%, transparent); }
.map figcaption { font-size: 13.5px; color: var(--muted); }

/* Redes en el pie */
.foot-social { list-style: none; margin: 18px 0 0; padding: 0; display: flex; gap: 10px; }
.foot-social a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.foot-social a:hover { color: var(--accent); }
.foot-social svg { width: 19px; height: 19px; }
/* La cuenta de X no se pudo crear: el icono se queda en su sitio, tachado, y la razón va
   escrita a mano al lado. El tachón no mueve nada, como en el resto del sitio. */
.foot-social { flex-wrap: wrap; row-gap: 12px; }
@media (min-width: 560px) { .foot-social { flex-wrap: nowrap; } }   /* ya tiene el ancho del pie entero */
.foot-social .gone { display: flex; align-items: center; gap: 9px; }
.foot-social .gone > span { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--card); color: var(--faint); box-shadow: inset 0 0 0 1px var(--line); position: relative; }
.foot-social .gone > span::after { content: ""; position: absolute; left: 5px; right: 5px; top: 50%;
  height: 2px; border-radius: 2px; background: var(--accent); transform: translateY(-1px) rotate(-34deg); }
.foot-social .gone .hand { font: 600 19px/1.1 "Caveat", "Bradley Hand", "Segoe Script", cursive;
  font-style: normal; color: var(--accent); white-space: nowrap;
  /* Girando sobre el centro, la primera palabra cae y la última sube. Anclado a la
     izquierda, el renglón arranca donde se escribe y sube hacia el final, como a mano. */
  transform: translateY(-5px) rotate(-3deg); transform-origin: left center; }
/* Egresados: los dibujos vienen con su propio fondo */
.grads img { background: transparent; }

.foot-404 { font-variant-numeric: tabular-nums; }
.foot-404:hover { color: var(--accent); }

/* El cierre de Nada Corp.: el producto, con la marca en grande */
.corp-final .eyebrow { color: color-mix(in srgb, var(--bg) 62%, var(--ink)); margin: 0; }
.final-wm { font-family: "Unbounded", var(--body) !important; font-weight: 800; letter-spacing: -.05em; font-size: clamp(44px, 8vw, 84px); line-height: 1; }
/* El nombre escrito como el logo, en minúsculas: el subset trae n, a, d, el espacio, el punto y el 0 y el 1 */
.wordmark { font-family: "Unbounded", var(--body) !important; font-weight: 800 !important; letter-spacing: -.045em; }

/* La gama y la ficha técnica */
.lineup { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-top: 8px; }
.lineup div { background: var(--card); border-radius: 24px; padding: 30px 24px; box-shadow: var(--shadow); display: grid; gap: 8px; grid-template-rows: auto auto 1fr auto; text-align: center; }
.lineup b { font: 800 26px/1.1 "Unbounded", var(--body); letter-spacing: -.04em; }
.lineup .price, .card .price { font-weight: 700; color: var(--accent); font-size: 17px; margin-top: 0; }
.lineup p { color: var(--muted); font-size: 15px; margin-top: 4px; }
.specs { margin: 4px 0 0; display: grid; gap: 0; }
.specs > div { display: flex; flex-wrap: wrap; gap: 10px 32px; justify-content: space-between; padding: 19px 6px; border-bottom: 1px solid var(--line); }
.specs > div:first-child { border-top: 1px solid var(--line); }
.specs dt { font-weight: 600; }
.specs dd { margin: 0; color: var(--muted); text-align: right; }
.designed { margin-top: 18px; font-size: 14px; color: color-mix(in srgb, var(--bg) 70%, var(--ink)); }
.corp-final .fix s { text-decoration-color: currentColor; }

/* Comparación de versiones: todas iguales */
.cmp-wrap { overflow-x: auto; margin-top: 4px; }
.cmp { width: 100%; border-collapse: collapse; min-width: 480px; background: var(--card); border-radius: 24px; overflow: hidden; box-shadow: var(--shadow); }
.cmp th, .cmp td { padding: 15px 18px; text-align: center; border-bottom: 1px solid var(--line); font-size: 15px; }
.cmp thead th { font: 800 19px/1 "Unbounded", var(--body); letter-spacing: -.03em; padding-top: 22px; padding-bottom: 18px; }
.cmp tbody th { text-align: left; font-weight: 600; color: var(--muted); }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
.cmp tbody td { font-variant-numeric: tabular-nums; }

.cmp tbody td b { color: var(--accent); }

/* La versión actual, destacada; las que vienen, atenuadas */
.cmp .now { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.cmp thead .now { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.cmp thead .soon { color: var(--faint); }
.cmp thead .soon span { display: block; font: 600 11px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; margin-top: 6px; color: var(--faint); }
.cmp { min-width: 720px; }

/* La de servicios tiene tres columnas, no siete, y sus cabeceras son palabras que Unbounded no trae */
.cmp.cmp-sv { min-width: 430px; }
.cmp-sv thead th { font: 800 19px/1 var(--body); letter-spacing: -.02em; }
.cmp-sv tbody td { font-variant-numeric: normal; }
.cmp .tag-new { display: block; width: max-content; margin: 0 auto 8px; background: var(--accent); color: var(--accent-ink); font: 700 11px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; padding: 6px 10px; border-radius: 99px; }
.cmp thead .now { border-top-left-radius: 16px; border-top-right-radius: 16px; }

/* Banda de entrada de las páginas interiores de Nada Corp.: más baja que la del índice */
.corp-hero-sm { padding: 54px 0 46px; }
.corp-hero-sm .corp-h1 { font-size: clamp(30px, 5vw, 48px); max-width: 20ch; }
.corp-hero-sm .corp-lead { font-size: clamp(16px, 1.8vw, 19px); }
.corp-doc { padding-top: 10px; }
.corp-doc .doc-in > h2:first-of-type { margin-top: 28px; }

/* ---------- Héroe a pantalla completa de Nada Corp., con luz ---------- */
/* La portada, a pantalla completa: el mismo golpe que las de Nada Corp., pero con los
   colores del tema. El alto descuenta el encabezado, así que llena justo lo que se ve. */
.hero { position: relative; min-height: calc(100svh - 64px); display: grid; align-content: center; isolation: isolate; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(46% 46% at 74% 48%, color-mix(in srgb, var(--accent) 15%, transparent) 0%, transparent 70%);
  animation: breathe 14s ease-in-out infinite;
}
.hero-in > * { animation: rise .7s cubic-bezier(.2, .7, .3, 1) both; }
/* La flecha que invita a bajar: solo donde el héroe cabe en la pantalla (en móvil el
   contenido ya se sale solo y se ve que hay más). Se apaga en cuanto se baja un poco. */
.cue { display: none; }
@media (min-width: 900px) {
  .cue { display: grid; place-items: center; position: absolute; left: 50%; bottom: 26px; z-index: 1;
         width: 44px; height: 44px; margin-left: -22px; border-radius: 50%; color: var(--muted);
         background: color-mix(in srgb, var(--card) 70%, transparent); box-shadow: inset 0 0 0 1px var(--line);
         backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
         animation: bob 2.8s ease-in-out 1.2s infinite, rise .7s cubic-bezier(.2, .7, .3, 1) .5s both;
         transition: opacity .35s, transform .35s; }
  .cue:hover { color: var(--accent); }
  .cue svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  .cue.gone { opacity: 0; transform: translateY(8px); pointer-events: none; }
}
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
.hero-in > :nth-child(2) { animation-delay: .07s; }
.hero-in > :nth-child(3) { animation-delay: .14s; }

.corp-hero { position: relative; min-height: 92svh; display: grid; align-content: center; padding: 96px 0 56px; isolation: isolate; }
.corp-hero-sm { min-height: 62svh; padding: 84px 0 48px; }
/* la luz: un foco suave que respira y sigue al cursor */
.corp-hero::before {
  content: ""; position: absolute; inset: -20%; z-index: -1; pointer-events: none;
  background: radial-gradient(42% 42% at calc(50% + var(--mx, 0px)) calc(42% + var(--my, 0px)), rgba(255, 106, 74, .22) 0%, rgba(255, 74, 43, .10) 34%, transparent 70%);
  animation: breathe 14s ease-in-out infinite;
}
/* el brillo del suelo, bajo el botón */
.corp-hero::after {
  content: ""; position: absolute; left: 50%; bottom: 6%; width: min(620px, 78%); height: 120px; z-index: -1;
  transform: translateX(-50%); border-radius: 50%; filter: blur(46px);
  background: radial-gradient(closest-side, rgba(255, 74, 43, .3), transparent);
  animation: breathe 14s ease-in-out infinite reverse;
}
@keyframes breathe { 0%, 100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
.corp-art { animation: floaty 9s ease-in-out infinite; }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
/* entrada suave del texto, sin mover la maqueta */
.corp-hero-in > * { animation: rise .7s cubic-bezier(.2, .7, .3, 1) both; }
.corp-hero-in > :nth-child(2) { animation-delay: .06s; }
.corp-hero-in > :nth-child(3) { animation-delay: .12s; }
.corp-hero-in > :nth-child(4) { animation-delay: .18s; }
.corp-hero-in > .corp-art { animation: rise .8s cubic-bezier(.2, .7, .3, 1) .2s both, floaty 9s ease-in-out 1s infinite; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .corp-hero::before, .corp-hero::after, .corp-art, .corp-hero-in > *,
  .hero::before, .hero-in > *, .cue { animation: none; }
}

/* Las interiores son banda, no pantalla completa */
.corp-hero-sm { min-height: 0; padding: 76px 0 68px; }
.corp-hero-sm::after { display: none; }

/* ---------- La barra de Nada Corp.: fija, en una fila y con más peso ---------- */
.corp-bar { position: sticky; top: 64px; z-index: 15; padding: 0; background: color-mix(in srgb, var(--card) 90%, transparent); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.corp-bar-in { display: flex; align-items: center; min-height: 58px; }
.corp-nav { display: flex; flex-wrap: nowrap; gap: 2px; overflow-x: auto; scrollbar-width: none; margin: 0; flex: 1; justify-content: flex-start; padding: 8px 0; }
.corp-nav::-webkit-scrollbar { display: none; }
.corp-nav a { font: 700 15px/1 var(--body); color: var(--muted); text-decoration: none; padding: 10px 14px; border-radius: 12px; white-space: nowrap; background: none; box-shadow: none; }
.corp-nav a:hover { color: var(--ink); background: var(--bg); }
.corp-nav a.on { color: var(--ink); background: none; box-shadow: inset 0 -3px 0 var(--accent); border-radius: 0; }
/* Segunda fila de la barra: dentro de Training, Consulting u Order la de arriba marca la
   sección padre, que no es donde está el lector. Esta dice dónde está y lleva a la hermana. */
.corp-sub { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; padding: 7px 0 8px; border-top: 1px solid var(--line); }
.corp-sub::-webkit-scrollbar { display: none; }
.corp-sub a { font: 600 13.5px/1 var(--body); color: var(--faint); text-decoration: none; padding: 6px 11px; border-radius: 9px; white-space: nowrap; }
.corp-sub a:hover { color: var(--ink); background: var(--bg); }
.corp-sub a.on { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }

/* La fila de "clientes": logos inventados, con su marca y su nombre */
.clients { padding: 56px 0 8px; }
.clients-row { gap: 22px 40px; align-items: center; }
.clients-row li { display: inline-flex; align-items: center; gap: 9px; color: var(--faint); font: 700 16px/1 var(--body); letter-spacing: .1em; }
.clients-row svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }

/* ---------- Testimonios en carrusel ---------- */
.says .eyebrow { margin: 0; }
.says .h2 { font: 700 clamp(26px, 4vw, 38px)/1.1 var(--body); letter-spacing: -.03em; }
.says-rail { display: grid; grid-auto-flow: column; grid-auto-columns: min(420px, 82%); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 6px; }
.says-rail::-webkit-scrollbar { display: none; }
.says-rail figure { scroll-snap-align: start; margin: 0; background: var(--bg); border-radius: 24px; padding: 24px; display: grid; gap: 14px; align-content: start; box-shadow: inset 0 0 0 1px var(--line); }
.says-rail img { width: 56px; height: 56px; border-radius: 50%; }
.says-rail blockquote { margin: 0; font-size: 17.5px; line-height: 1.45; letter-spacing: -.01em; }
.says-rail figcaption { display: grid; gap: 2px; font-size: 14px; }
.says-rail figcaption b { font-size: 15px; }
.says-rail figcaption span { color: var(--muted); }
.says-ctrl { display: flex; gap: 8px; margin-top: 16px; }
.says-ctrl .icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Los "clientes" son huecos de relleno: nadie puede reclamar un logo que no existe */
.clients-row li { display: inline-grid; place-items: center; min-width: 170px; min-height: 56px; padding: 0 18px; border: 2px dashed var(--line); border-radius: 14px; color: var(--faint); font: 700 13px/1 var(--body); letter-spacing: .14em; }
.clients .doc-note { text-align: center; margin-top: 16px; }

/* Cómo empezamos */
.story { display: grid; gap: 22px; margin-top: 4px; }
@media (min-width: 860px) { .story { grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: start; } }
.story-text p { color: var(--muted); font-size: 17px; margin-bottom: 12px; max-width: 52ch; }
.story-line { list-style: none; margin: 0; padding: 0 0 0 22px; display: grid; gap: 18px; border-left: 2px solid var(--line); }
.story-line li { display: grid; gap: 2px; position: relative; }
.story-line li::before { content: ""; position: absolute; left: -29px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--bg); }
.story-line b { font-size: 16.5px; letter-spacing: -.01em; }
.story-line span { color: var(--muted); font-size: 15px; }
/* Áreas: cuadritos con su explicación */
.exp { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin-top: 4px; }
.exp div { background: var(--card); border-radius: 20px; padding: 20px; box-shadow: var(--shadow); display: grid; gap: 6px; align-content: start; }
.exp b { font-size: 17px; letter-spacing: -.015em; }
.exp p { color: var(--muted); font-size: 15px; }

/* Cada sección, su propio marco: banda completa con fondo alterno */
.band { border-top: 1px solid var(--line); }
.band-a { background: var(--bg-alt); }
.band-b { background: var(--card); }
.band .corp-block { padding-block: 78px; }
.band-b .exp div, .band-b .card, .band-b .lineup div, .band-b .cmp, .band-b .hq,
.band-b .count div, .band-b .steps li, .band-b .world-split div { background: var(--bg); }
.story + .about-nums { margin-top: 30px; }

/* Landing de descarga */
.get-hero { text-align: center; }
.get-hero .get-icon { border-radius: 24px; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .8); }
.get-hero .stores { justify-content: center; margin-top: 8px; }
.get-hero .stores-note { color: #FF8A6E; }
.get-price { color: #B9BEC6; font-size: 15px; }
.corp-final .stores { justify-content: center; margin-top: 8px; }
.corp-final .get-back a { color: var(--bg); text-decoration: underline; text-underline-offset: 3px; }
.band .chips span { text-decoration-color: var(--accent); }

/* Las cifras, con su propio título para que no queden sueltas tras el relato */
.facts-head { margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--line); display: grid; gap: 2px; }
.facts-head h3 { font: 700 12.5px/1.3 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.facts-head p { color: var(--muted); font-size: 15.5px; }
.facts-head + .about-nums { margin-top: 16px; }

/* Parrilla de servicios, al estilo de los catálogos de nube */
.svcs { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 18px; }
.svc { position: relative; display: grid; gap: 4px; align-content: start; background: var(--card); border-radius: 20px; padding: 22px; text-decoration: none; color: var(--ink);
  box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s; }
.svc:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(20, 22, 26, .06), 0 22px 40px -22px rgba(20, 22, 26, .45); }
.band-b .svc { background: var(--bg); }
.svc-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--tint); color: var(--accent); margin-bottom: 8px; }
.svc-ic svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.svc b { font-size: 17.5px; letter-spacing: -.015em; }
.svc-k { position: absolute; top: 22px; right: 22px; font: 700 11px/1 var(--body); letter-spacing: .12em; color: var(--muted); background: var(--bg); border-radius: 99px; padding: 6px 9px; box-shadow: inset 0 0 0 1px var(--line); }
.band-b .svc-k { background: var(--card); }
.svc p { color: var(--muted); font-size: 15px; margin: 2px 0 8px; }

/* Tarjetas dentro de las bandas: borde fino en vez de sombra grande, para que no parezcan montadas */
.svcs { gap: 16px; }
.svc, .band .card, .lineup div, .exp div, .band .steps li, .says-rail figure, .grads figure {
  box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgba(20, 22, 26, .04);
}
:root[data-theme="dark"] .svc, :root[data-theme="dark"] .band .card, :root[data-theme="dark"] .lineup div,
:root[data-theme="dark"] .exp div, :root[data-theme="dark"] .band .steps li, :root[data-theme="dark"] .grads figure {
  box-shadow: inset 0 0 0 1px var(--line);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .svc, :root:not([data-theme="light"]) .band .card, :root:not([data-theme="light"]) .lineup div,
  :root:not([data-theme="light"]) .exp div, :root:not([data-theme="light"]) .band .steps li, :root:not([data-theme="light"]) .grads figure {
    box-shadow: inset 0 0 0 1px var(--line);
  }
}
.svc:hover, .band a.card:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, var(--line)), 0 10px 26px -18px rgba(20, 22, 26, .5); }

/* La página de "no hay nada": una frase y punto */
.nothing-hero { min-height: 86svh; }
/* sin ilustración debajo, el brillo del suelo quedaba suelto en el vacío */
.nothing-hero::after { display: none; }
.no-p { font: 700 clamp(20px, 3.2vw, 30px)/1.2 var(--body); letter-spacing: -.02em; color: #FF5A3C; }
.nothing-hero .corp-lead { max-width: 46ch; }


.no-instead { font-size: clamp(17px, 2.2vw, 20px); color: #F3F4F6; margin-top: 10px; }
.no-back { margin-top: 18px; }
.no-back a { color: #B9BEC6; font-size: 14.5px; text-decoration: underline; text-underline-offset: 4px; }
.no-back a:hover { color: #F3F4F6; }

/* El lazo de "estamos contratando", en la esquina, como en las empresas */
.ribbon { position: absolute; top: 34px; right: -62px; z-index: 3; transform: rotate(45deg); transform-origin: center;
  background: var(--accent); color: var(--accent-ink); text-decoration: none;
  font: 700 12.5px/1 var(--body); letter-spacing: .12em; text-transform: uppercase;
  padding: 11px 74px; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .6); }
.ribbon:hover { filter: brightness(1.07); }
@media (max-width: 720px) { .ribbon { top: 26px; right: -70px; font-size: 11px; padding: 9px 76px; } }

/* El lazo vive en la banda de departamentos, no en el héroe */
#what { position: relative; overflow: hidden; }
#what .ribbon { top: 30px; }

/* La tarjeta naranja: la vacante, dentro de los departamentos */
.card-hire { background: var(--accent) !important; color: var(--accent-ink) !important; box-shadow: none !important; }
.card-hire h3, .card-hire p, .card-hire .card-go { color: var(--accent-ink); }
.card-hire p { opacity: .9; }
.card-hire .card-ic { background: rgba(255, 255, 255, .22); color: var(--accent-ink); }
.card-hire:hover { box-shadow: 0 14px 30px -18px rgba(255, 74, 43, .9) !important; }

/* Los textos de entrada de las bandas eran demasiado estrechos: se partían a media línea */
.corp-block .lead, .band .lead { max-width: 70ch; }
.corp-block .story-text p { max-width: 62ch; }

/* Testimonios: tres a la vista en pantalla ancha, uno en el teléfono */
.says-rail { grid-auto-columns: min(420px, 86%); }
@media (min-width: 900px) { .says-rail { grid-auto-columns: calc((100% - 28px) / 3); } }
.says-dots { display: flex; gap: 8px; margin-top: 16px; }
.says-dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: var(--line); cursor: pointer; transition: background .2s, transform .2s; }
.says-dot:hover { background: var(--muted); }
.says-dot.on { background: var(--accent); transform: scale(1.25); }
.says-ctrl { margin-top: 12px; }

/* Sede: mapa a un lado, datos de contacto al otro */
.offices { grid-template-columns: 1fr; }
@media (min-width: 900px) { .offices { grid-template-columns: 1.15fr .85fr; gap: 28px; } }
/* un elemento de rejilla trae min-width:auto y se sale de su columna si el contenido
   no parte: a 620px el correo desbordaba la pista y lo cortaba el borde de la página */
.offices > * { min-width: 0; }
.contact dd, .contact dd a { overflow-wrap: anywhere; }
.hq-col { display: grid; gap: 16px; align-content: start; min-width: 0; }
.hq { justify-self: stretch; margin-top: 0; }
.contact { margin: 0; display: grid; gap: 0; }
.contact > div { display: grid; grid-template-columns: 90px 1fr; gap: 10px; padding: 12px 2px; border-bottom: 1px solid var(--line); }
.contact > div:first-child { border-top: 1px solid var(--line); }
.contact dt { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
.contact dd { margin: 0; display: grid; gap: 2px; }
.contact dd a { color: var(--ink); font-weight: 600; text-decoration: none; font-variant-numeric: tabular-nums; }
.contact dd a:hover { color: var(--accent); }
.contact dd small { color: var(--faint); font-size: 13px; }
/* La columna de la etiqueta era de 90 px fijos y «ESTACIONAMIENTO» se montaba encima del
   valor. Cada fila es su propia rejilla, así que no basta con dejarla en auto: se
   desalinearían entre sí. Con subgrid la miden todas juntas, contra la del padre. */
@supports (grid-template-columns: subgrid) {
  .contact { grid-template-columns: minmax(90px, max-content) 1fr; }
  .contact > div { grid-column: 1 / -1; grid-template-columns: subgrid; }
}
.offices-h { margin-top: 34px; font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.next-offices { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-top: 10px; }
.next-offices div { background: var(--card); border-radius: 18px; padding: 18px; display: grid; gap: 2px; box-shadow: inset 0 0 0 1px var(--line); }
.band-b .next-offices div { background: var(--bg); }
.next-offices b { font-size: 16.5px; }
.next-offices span { color: var(--muted); font-size: 14.5px; }
.next-offices small { color: var(--faint); font-size: 12.5px; margin-top: 4px; letter-spacing: .04em; text-transform: uppercase; }

/* Rotador: aire alrededor y puntos con espacio propio */
.says-rail { padding-bottom: 4px; }
.says-dots { margin: 4px 0 0; }
.says-dot { width: 10px; height: 10px; }

/* "Trusted by" ya es una sección como las demás */
#clients .clients-row { justify-content: flex-start; margin-top: 18px; gap: 14px; }
#clients .clients-row li { min-width: 190px; min-height: 64px; }
#clients .doc-note { text-align: left; margin-top: 16px; }

/* La súplica, cada vez más bajita */
/* La súplica: las tres líneas exactamente iguales a la nota de arriba. El chiste
   está en lo que dicen, no en irse apagando. */
.beg { font: 400 13.5px/1.55 var(--body); color: var(--faint); margin-top: 6px; }

.corp-price { color: #FF8A6E; font-weight: 700; font-size: 15.5px; letter-spacing: .01em; margin-top: 2px; }

/* Fechas del lanzamiento, como en las fichas de producto */
.corp-dates { color: #9AA1AB; font-size: 16px; line-height: 1.5; margin-top: 4px; }
.corp-hero .corp-lead { font-size: clamp(19px, 2.4vw, 26px); color: #E8EAEE; }
.corp-h1 { font-size: clamp(40px, 8vw, 76px); }

/* La declaración de la empresa, justo bajo el anuncio */
.statement { background: var(--bg); padding: 56px 0 44px; text-align: center; border-bottom: 1px solid var(--line); }
.statement-h { font: 700 clamp(26px, 4.4vw, 40px)/1.15 var(--body); letter-spacing: -.03em; text-wrap: balance; }
.statement-p { color: var(--muted); font-size: clamp(16px, 2vw, 19px); margin-top: 10px; }

.corp-announce { color: #B9BEC6; font-size: clamp(15.5px, 1.8vw, 17.5px); max-width: 60ch; margin: 6px auto 2px; }

/* El plano del botón: lo que mide, lo que se hunde y lo que rebota */
.bp { margin: 18px 0 0; display: grid; gap: 14px; }
.bp svg { width: 100%; height: auto; border-radius: 24px; box-shadow: var(--shadow); }
.bp figcaption { font-size: 13.5px; color: var(--muted); max-width: 70ch; }
.bp-bg { fill: var(--card); }
.band-b .bp-bg { fill: var(--bg); }
.bp-gridline { fill: none; stroke: var(--line); stroke-width: 1; opacity: .5; }
.bp-axis { fill: none; stroke: var(--line); stroke-width: 1.6; stroke-dasharray: 14 6 3 6; }
.bp-body { fill: none; stroke: var(--ink); stroke-width: 2.6; }
.bp-cap { fill: color-mix(in srgb, var(--accent) 12%, transparent); }
.bp-lim { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-dasharray: 9 7; opacity: .6; }
.bp-ext { fill: none; stroke: var(--line); stroke-width: 1.4; }
.bp-ext-a { stroke: color-mix(in srgb, var(--accent) 40%, transparent); }
.bp-dim { fill: none; stroke: var(--faint); stroke-width: 1.4; }
.bp-dim-a { stroke: var(--accent); }
.bp-ah { fill: var(--faint); }
.bp-ah-a { fill: var(--accent); }
.bp-t { fill: var(--muted); font: 600 15px var(--body); font-variant-numeric: tabular-nums; }
.bp-t-a { fill: var(--accent); }
/* Las otras tres vistas: la lateral, la de arriba y la de abajo. Todas círculos. */
.bp-views { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); margin-top: 18px; }
.bp-views figure { margin: 0; display: grid; gap: 11px; align-content: start; }
.bp-views svg { width: 100%; height: auto; border-radius: 20px; box-shadow: var(--shadow); }
.bp figcaption b, .bp-views figcaption b { color: var(--ink); font-weight: 700; }
.bp-views figcaption { font-size: 13.5px; color: var(--muted); }
.bp-hidden { fill: none; stroke: var(--faint); stroke-width: 2; stroke-dasharray: 9 7; }
/* Globos de despiece y su leyenda */
.bp-bal-d { fill: var(--ink); }
.bp-bal-l { fill: none; stroke: var(--ink); stroke-width: 1.4; }
.bp-bal-c { fill: var(--card); stroke: var(--ink); stroke-width: 1.8; }
.band-b .bp-bal-c { fill: var(--bg); }
.bp-bal-t { fill: var(--ink); font: 700 15px var(--body); font-variant-numeric: tabular-nums; }
.bp-legend { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; counter-reset: bal; }
.bp-legend li { counter-increment: bal; display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--muted); }
.bp-legend li::before { content: counter(bal); width: 23px; height: 23px; border-radius: 50%; display: grid; place-items: center; font: 700 12px var(--body); color: var(--ink); box-shadow: inset 0 0 0 1.6px var(--line); flex: none; }
.corp-block .specs-g, .corp-block .group-h { margin: 52px 0 10px; }

.eyebrow .hand { text-transform: none; font-size: 2em; bottom: 104%; }
.eyebrow.hand-line { line-height: 2.6; }

.cards-even { grid-template-columns: 1fr; }
@media (min-width: 620px) { .cards-even { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .cards-even { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

#launch .map { max-width: 560px; }

/* Cada bloque del lanzamiento arranca con su propio aire */
.corp-block .launch-sub { margin-top: 42px; margin-bottom: 0; }


/* Corrección a mano escrita al lado, no encima: para renglones pequeños que no tienen
   sitio arriba. Va al final de la línea, así que no desplaza ni una letra. */
.fix-side { position: static; display: inline; white-space: nowrap; }   /* el tachón y su corrección nunca se separan de renglón */
.fix-side .hand { position: static; display: inline-block; transform: rotate(-4deg);
                  margin-left: .5em; font-size: 1.3em; vertical-align: -.06em; }

.band-tight { padding-top: 0; }

/* La ficha de cada modelo de la gama: lo único que los diferencia */
.l-spec { list-style: none; margin: 6px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line);
          display: grid; gap: 5px; font-size: 13px; line-height: 1.4; color: var(--faint); font-variant-numeric: tabular-nums; }

.lineup b .model { letter-spacing: 0; margin-left: .06em; }

/* La pantalla de la propina: los botones grandes y bien visibles, y "sin propina"
   diminuto y gris. Esa diferencia de tamaño es el chiste, y no hay que explicarla. */
.tips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 4px; }
@media (min-width: 620px) { .tips { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tip { display: grid; gap: 4px; padding: 22px 14px; border-radius: 20px; text-align: center;
       background: var(--card); box-shadow: inset 0 0 0 2px var(--accent); color: var(--accent);
       transition: transform .1s; }
.band-b .tip { background: var(--bg); }
.tip:active { transform: scale(.98); }
.tip b { font: 700 24px/1 var(--body); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tip span { font-size: 13.5px; opacity: .8; }
.tip-no { margin-top: 12px; text-align: center; }
.tip-no button { font-size: 11.5px; color: var(--faint); text-decoration: underline; text-underline-offset: 3px; }
.tip.on, .band-b .tip.on { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
.tip.on span { opacity: .85; }

/* Los resortes van a trazos: están dentro de la base, no se ven */
.bp-spring { fill: none; stroke: var(--faint); stroke-width: 2; stroke-dasharray: 7 5; stroke-linejoin: round; }
.bp-spring-hi { stroke: var(--accent); opacity: .8; }

/* ---------- La caja: pasos numerados, opciones seleccionables y la cuenta ---------- */
.step-h { display: flex; align-items: baseline; gap: 12px; margin-top: 46px; font: 700 clamp(21px, 2.8vw, 26px)/1.2 var(--body); letter-spacing: -.02em; }
.corp-block .step-h:first-child { margin-top: 0; }
.step-h i { font-style: normal; font-size: 13px; font-weight: 700; color: var(--accent); letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.picks { display: grid; gap: 12px; margin-top: 4px; }
@media (min-width: 620px) { .picks-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .picks-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick-in { display: grid; gap: 4px; height: 100%; align-content: start; padding: 22px; border-radius: 20px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; transition: box-shadow .15s; }
.band-a .pick-in { background: var(--card); }
.pick-in b { font: 700 19px/1.2 var(--body); letter-spacing: -.02em; }
.pick-in b.wordmark { font-size: 21px; letter-spacing: -.045em; }
.pick-in b i { font-style: normal; letter-spacing: 0; margin-left: .06em; }
.pick-in .pick-p { font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.pick-in small { color: var(--muted); font-size: 13.5px; }
.pick input:checked + .pick-in { box-shadow: inset 0 0 0 2px var(--accent); }
.pick input:focus-visible + .pick-in { outline: 2px solid var(--ink); outline-offset: 3px; }
.swatch { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); box-shadow: inset 0 0 0 2px var(--card), 0 0 0 2px var(--accent); margin-bottom: 6px; }
.order .tips { margin-top: 8px; }
.order .tip { padding: 0; background: none; box-shadow: none; }
.order .tip span { display: grid; gap: 4px; padding: 22px 14px; border-radius: 20px; text-align: center; background: var(--card); box-shadow: inset 0 0 0 2px var(--accent); color: var(--accent); cursor: pointer; }
.order .tip b { font: 700 24px/1 var(--body); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.order .tip i { font-style: normal; font-size: 13.5px; opacity: .8; }
.order .tip input { position: absolute; opacity: 0; pointer-events: none; }
.order .tip input:checked + span { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
.tip-no label { cursor: pointer; }
.tip-no input { position: absolute; opacity: 0; pointer-events: none; }
.bill { margin-top: 46px; padding: 28px; border-radius: 24px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.bill h3 { font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.bill .specs { margin-top: 10px; }
.bill-total { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 18px; font-size: 17px; font-weight: 600; }
.bill-total b { font: 700 28px/1 var(--body); letter-spacing: -.02em; color: var(--accent); font-variant-numeric: tabular-nums; }
.bill .doc-cta { margin-top: 18px; }
.l-cta { margin-top: 14px; }
.l-cta .btn { width: 100%; }
.picks-4 { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.sw-red { background: var(--accent); }
.sw-white { background: #F2F3F5; }
.sw-rose { background: #E8A0A8; }
.sw-gold { background: #D9B892; }
.pick-off .pick-in { opacity: .45; cursor: not-allowed; }
.pick-off .pick-in b { text-decoration: line-through; text-decoration-color: var(--faint); }
.acc-list { display: grid; gap: 10px; margin-top: 4px; grid-template-columns: 1fr; }
.acc { position: relative; }
.acc input { position: absolute; opacity: 0; pointer-events: none; }
.acc-in { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 18px;
          border-radius: 16px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; }
.acc-in b { font-weight: 600; font-size: 15px; }
.acc-in span { color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.acc input:checked + .acc-in { box-shadow: inset 0 0 0 2px var(--accent); }
.acc input:checked + .acc-in span { color: var(--accent); font-weight: 700; }
.acc input:focus-visible + .acc-in { outline: 2px solid var(--ink); outline-offset: 3px; }

/* La caja, en dos columnas: el producto quieto a la izquierda con la cuenta debajo,
   y la configuración desplazándose a la derecha. En móvil se apilan y la cuenta baja
   al final, que es donde se decide. */
.order-grid { display: grid; gap: 26px; }
.order-side { display: contents; }
.order-art { order: 1; justify-self: center; width: min(360px, 82%); pointer-events: none; }
.order-steps { order: 2; display: grid; gap: 20px; }
.order-grid .bill { order: 3; margin-top: 0; }
.order-art svg { width: 100%; height: auto; overflow: visible; }
@media (min-width: 900px) {
  .order-grid { grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: 48px; align-items: start; }
  .order-side { display: block; position: sticky; top: 180px; }   /* encabezado 64 + barra de dos filas 102 + aire */
  .order-art { width: 100%; margin-bottom: 22px; }
  .order-steps { order: 0; }
}
.sw-silver { background: #CBD0D6; }

/* Los modelos, uno por fila: en la columna de configuración tres en paralelo se
   estrechan y "nada ultra" se parte en dos líneas. Con el precio a la derecha se lee
   como la caja de cualquier tienda. */
.picks-models { grid-template-columns: 1fr; }
.picks-models .pick-in { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 16px; padding: 18px 20px; text-align: left; }
.picks-models .pick-in b { grid-column: 1; grid-row: 1; }
.picks-models .pick-in small { grid-column: 1; grid-row: 2; }
.picks-models .pick-in .pick-p { grid-column: 2; grid-row: 1 / span 2; font-size: 18px; }

/* El total, siempre a la vista mientras se configura. Abajo, en el desglose, se repite
   con el detalle. En móvil sobra: el desglose queda justo al final del recorrido. */
/* Bajo el producto, lo elegido escrito: nombre, configuración y precio. Sin caja y sin
   botón -el de pedir vive al final, que es donde se decide-. */
.order-cap { display: none; }
@media (min-width: 900px) {
  .order-cap { display: grid; gap: 6px; text-align: center; }
  .order-cap b { font-size: 30px; }
  .order-cap span { color: var(--muted); font-size: 14.5px; }
  .order-cap em { font-style: normal; font: 700 34px/1 var(--body); letter-spacing: -.03em; color: var(--accent); font-variant-numeric: tabular-nums; margin-top: 6px; }
  .order-art { width: min(100%, 320px); margin: 0 auto 22px; }
}

/* El desglose es un recibo, no una hoja de características: filas más juntas, el total
   separado por una raya y el botón a todo el ancho, como en cualquier caja. */
.bill .specs > div { padding: 13px 2px; }
.bill .specs > div:first-child { border-top: 0; }
.bill .specs > div:last-child { border-bottom: 0; }
.bill .bill-total { margin-top: 18px; padding-top: 16px; border-top: 2px solid var(--line); }
.bill .doc-cta { margin-top: 22px; }
.bill .doc-cta .btn { width: 100%; }
.bill .doc-note { margin-top: 16px; }

/* Lo que va incluido, bajo el precio */
.order-items { list-style: none; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); display: grid; gap: 4px; font-size: 13.5px; color: var(--muted); }
.order-items:empty { display: none; }
.acc input:disabled + .acc-in { cursor: default; }

/* La oferta de tarjeta, que hoy sale en toda caja antes de pagar */
.card-offer { display: grid; grid-template-columns: 96px 1fr; gap: 18px; align-items: start; margin-top: 16px; padding: 20px; border-radius: 20px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.card-art { width: 96px; height: auto; margin-top: 5px; border-radius: 9px; box-shadow: 0 6px 16px -8px rgba(20, 22, 26, .5); }
.card-copy { display: grid; gap: 4px; }
.card-h { font-size: 15.5px; line-height: 1.4; font-weight: 700; letter-spacing: -.01em; }
.card-p { font-size: 14.5px; color: var(--muted); }
.card-cta { margin-top: 8px; }
.card-terms { font-size: 12.5px; color: var(--faint); margin-top: 6px; }
.card-terms a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.card-terms a:hover { color: var(--accent); }
@media (max-width: 560px) { .card-offer { grid-template-columns: 1fr; gap: 14px; } }

/* El importe libre de la propina: aparece solo al elegir "Custom" */
.tip-custom { margin-top: 12px; text-align: center; font-size: 14px; color: var(--muted); }
.tip-custom[hidden] { display: none; }
.tip-field { display: inline-flex; align-items: center; gap: 2px; margin-left: 8px; padding: 8px 12px; border-radius: 12px; background: var(--card); box-shadow: inset 0 0 0 2px var(--accent); color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; }
.band-a .tip-field { background: var(--card); }
.tip-field input { width: 6ch; border: 0; background: none; font: 700 16px var(--body); color: var(--accent); font-variant-numeric: tabular-nums; }
.tip-field input:focus { outline: none; }
.tip-field input::-webkit-outer-spin-button, .tip-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.card-eyebrow { font: 700 11.5px/1.3 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 2px; }
.order-share { margin-top: 12px; justify-content: center; }   /* .doc-cta es flex: se centra con justify-content */
.order-share .btn-ghost { margin-top: 0; }
.cap-share { margin: 16px 0 0; }
.cap-share .btn-ghost { margin-top: 0; font-size: 14px; padding: 8px 14px; }

/* La nota vive junto al logo, en el encabezado: el desmentido acompaña a la marca en
   todas las páginas, igual que en las tarjetas que se comparten. */
.logo-note { display: none; }
@media (min-width: 900px) {
  /* .top-in reparte con space-between: sin el margen automático la nota se va al centro de la barra,
     lejos del logotipo al que señala. El hueco sobrante tiene que quedar a su derecha. */
  .logo-note { display: inline-flex; align-items: center; gap: 3px; margin-left: -3px; margin-right: auto; color: var(--accent); pointer-events: none; }
  .logo-note svg { width: 35px; height: 12px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }   /* el grosor lo lleva cada trazo; recta, porque apunta al logotipo */
  /* El giro sale del extremo izquierdo: así "this" arranca a la altura de la flecha y la frase sube
     al escribirla, como al anotar a mano. Girando desde el centro, "this" caía y la flecha quedaba alta. */
  .logo-note i { font: 600 19px/1 "Caveat", "Bradley Hand", cursive; font-style: normal; transform: rotate(-4deg); transform-origin: left center; white-space: nowrap; }
}


/* ---------- Rejillas: el número de columnas siempre divide al de tarjetas ----------
   repeat(auto-fit, minmax(Xpx, 1fr)) cambia de columnas según el ancho, así que ningún
   número de tarjetas está a salvo: seis quedaban 4 + 2 a 1280 px y tres quedaban 3 + 1.
   Cada rejilla declara cuántas tarjetas tiene y solo pasa por repartos exactos. */
.g2, .g3, .g4, .g6 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 620px) {
  .g2, .g4, .g6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 780px) {
  .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .g6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 980px) {
  .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- El simulador de la app (portada): lo básico vivo, con el aspecto de la app. No es la app real. ---------- */
.sim-wrap { display: grid; grid-template-columns: auto 1fr; gap: clamp(24px, 5vw, 56px); align-items: center; margin-top: 36px; }
.sim-cards { grid-template-columns: 1fr 1fr; }
.sim-cards .card { cursor: pointer; transition: transform .15s, box-shadow .15s; }
.sim-cards .card:hover, .sim-cards .card.on { transform: translateY(-2px); box-shadow: 0 0 0 2px var(--accent), var(--shadow); }
@media (max-width: 860px) { .sim-wrap { grid-template-columns: 1fr; justify-items: center; } .sim-cards { grid-template-columns: 1fr 1fr; width: 100%; } }
@media (max-width: 520px) { .sim-cards { grid-template-columns: 1fr; } }
.sim { display: grid; justify-items: center; gap: 12px; }
.sim-phone { width: 300px; height: 630px; border-radius: 48px; padding: 10px; background: #0C0D10; box-shadow: 0 0 0 2px #2A2D33, 0 30px 60px -30px rgba(0, 0, 0, .55); }
.sim-screen { position: relative; height: 100%; border-radius: 39px; overflow: hidden; background: var(--bg); color: var(--ink); display: flex; flex-direction: column; font-size: 12px; }
.sim-status { display: flex; align-items: center; justify-content: space-between; padding: 12px 22px 0 28px; height: 34px; font-weight: 700; font-size: 13px; }
.sim-island { position: absolute; left: 50%; top: 10px; width: 84px; height: 24px; margin-left: -42px; border-radius: 14px; background: #000; }
.sim-net { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; }
.sim-net b { font: 800 10px var(--display); letter-spacing: -.02em; }
.sim-bars { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 10px; }
.sim-bars i { width: 3px; background: currentColor; border-radius: 1px; }
.sim-bars i:nth-child(1) { height: 4px; } .sim-bars i:nth-child(2) { height: 6px; } .sim-bars i:nth-child(3) { height: 8px; } .sim-bars i:nth-child(4) { height: 10px; }
.sim-batt { width: 22px; height: 11px; border-radius: 3.5px; background: currentColor; position: relative; }
.sim-batt::after { content: ""; position: absolute; right: -3px; top: 3.5px; width: 2px; height: 4px; border-radius: 0 1px 1px 0; background: currentColor; }
.sim-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px 6px; }
.sim-logo { font: 800 20px/1 var(--display); letter-spacing: -.04em; margin-right: auto; }
.sim-round { width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--card); color: var(--ink); display: grid; place-items: center; box-shadow: var(--shadow); cursor: pointer; }
.sim-round svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sim-pro { border: 0; border-radius: 999px; padding: 7px 12px; background: var(--gold); color: #14161A; font: 700 11.5px var(--body); cursor: pointer; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .12); }
.sim-body { flex: 1; overflow-y: auto; padding: 4px 12px 12px; scrollbar-width: none; }
.sim-body::-webkit-scrollbar { display: none; }
.sim-page { display: grid; gap: 10px; animation: simIn .25s ease-out; }
@keyframes simIn { from { opacity: 0; transform: translateY(4px); } }
.sim-card { background: var(--card); border-radius: 16px; padding: 12px 14px; box-shadow: var(--shadow); border: 0; color: inherit; font: inherit; text-align: left; }
.sim-greet { display: flex; align-items: center; gap: 10px; }
.sim-greet b { display: block; font-size: 14px; }
.sim-greet small { color: var(--muted); }
.sim-moon { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset -6px -3px 0 0 #6B6EF0; transform: rotate(-20deg); }
.sim-moon.sun { box-shadow: none; background: radial-gradient(circle, #FFB020 45%, transparent 47%); }
.sim-label { text-align: center; font-size: 13px; margin-top: 14px; }
.sim-clock { text-align: center; font: 800 38px/1 var(--body); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.sim-btn { display: block; margin: 8px auto 0; width: 190px; border: 0; background: none; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sim-btn svg { display: block; width: 100%; }
.sim-cap { transition: transform .08s ease-out; }
.sim-btn.down .sim-cap { transform: translateY(9px); }
.sim-hint { text-align: center; color: var(--muted); font-size: 13px; font-weight: 600; min-height: 34px; }
.sim-figs { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.sim-figs b { display: block; font-size: 16px; font-variant-numeric: tabular-nums; }
.sim-figs small { white-space: nowrap; font-size: 8px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.sim-reto { display: flex; align-items: center; justify-content: space-between; background: var(--tint); cursor: pointer; width: 100%; }
.sim-reto b { display: block; font-size: 14px; } .sim-reto small { color: var(--muted); }
.sim-reto i { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-style: normal; font-weight: 700; }
.sim-title { font: 700 24px/1.1 var(--body); letter-spacing: -.02em; margin: 2px 2px 0; }
.sim-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.sim-pills button { border: 0; border-radius: 999px; padding: 6px 11px; background: var(--card); color: var(--ink); font: 600 11.5px var(--body); cursor: pointer; }
.sim-pills button.on { background: var(--ink); color: var(--bg); }
.sim-small { color: var(--muted); font-size: 11.5px; }
.sim-ink { color: var(--ink); }
.sim-big { font: 800 24px/1.1 var(--body); letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-top: 2px; }
.sim-note { color: var(--muted); padding: 0 4px; }
.sim-insight { --t: var(--faint); border-radius: 16px; padding: 10px 12px; display: grid; gap: 7px; background: var(--card); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--t) 55%, transparent); transition: background .4s, box-shadow .4s; }
.sim-insight:not([data-tone="calm"]) { background: color-mix(in srgb, var(--t) 12%, var(--card)); box-shadow: inset 0 0 0 2px var(--t); }
.sim-insight p { display: flex; align-items: center; gap: 6px; font: 700 9.5px var(--body); letter-spacing: .08em; text-transform: uppercase; }
.sim-insight p i { width: 7px; height: 7px; border-radius: 50%; background: var(--t); }
.sim-insight p span { margin-left: auto; padding: 3px 7px; border-radius: 999px; background: var(--t); color: #fff; }
.sim-insight[data-tone="calm"] p span { background: var(--line); color: var(--muted); }
.sim-insight[data-light] p span { color: #14161A; }
.sim-insight b { font-size: 13px; min-height: 34px; }
.sim-bar { height: 3px; border-radius: 3px; background: color-mix(in srgb, var(--t) 20%, transparent); overflow: hidden; }
.sim-bar i { display: block; height: 100%; width: 0; background: var(--t); }
.sim-ringrow { display: flex; align-items: center; gap: 12px; }
.sim-ring { position: relative; width: 86px; height: 86px; flex: none; }
.sim-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.sim-ring circle { fill: none; stroke: var(--line); stroke-width: 12; }
.sim-ring .arc { stroke: url(#sim-grad); stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 0 100; }
.sim-ring span { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.sim-ring b { font-size: 16px; font-variant-numeric: tabular-nums; } .sim-ring small { font-size: 6.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.sim-ringrow dl { flex: 1; display: grid; gap: 5px; margin: 0; }
.sim-ringrow dl div { display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.sim-ringrow dl div:last-child { border: 0; }
.sim-ringrow dt { color: var(--muted); } .sim-ringrow dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.sim-chart { position: relative; height: 90px; display: flex; align-items: flex-end; gap: 6px; margin-top: 10px; border-bottom: 1px solid var(--line); }
.sim-chart i { flex: 1; min-height: 2px; border-radius: 3px 3px 0 0; background: var(--tint); }
.sim-chart i.now { background: var(--accent); }
.sim-chart.sim-hours { gap: 2px; }
.sim-chart .goal { position: absolute; left: 0; right: 0; border-top: 1.5px dashed var(--accent); }
.sim-split { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sim-split div { background: var(--card); border-radius: 14px; padding: 10px; box-shadow: var(--shadow); }
.sim-split b { display: block; font-size: 16px; font-variant-numeric: tabular-nums; } .sim-split small { color: var(--muted); }
.sim-report { border: 0; border-radius: 14px; padding: 12px; background: var(--accent); color: #fff; font: 700 13px var(--body); cursor: pointer; }
.sim-list { padding: 4px 0; }
.sim-list p, .sim-list .row { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--line); }
.sim-list p:last-child, .sim-list .row:last-child { border: 0; }
.sim-list p span { flex: 1; font-weight: 600; } .sim-list small { color: var(--muted); }
.sim-list .medal { width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center; font-weight: 800; font-size: 10px; background: var(--line); color: var(--muted); }
.sim-list .row.won .medal { background: var(--gold); color: #14161A; }
.sim-list .row div { flex: 1; } .sim-list .row b { display: block; font-size: 12.5px; } .sim-list .row small { font-size: 10.5px; }
.sim-list .row .lock { position: relative; width: 11px; height: 8px; margin-top: 5px; border-radius: 2px; background: var(--faint); }
.sim-list .row .lock::before { content: ""; position: absolute; left: 2px; top: -5px; width: 7px; height: 7px; border: 1.8px solid var(--faint); border-bottom: 0; border-radius: 5px 5px 0 0; box-sizing: border-box; }
.sim-list .row.won .lock { display: none; }
.sim-toggle { width: 34px; height: 20px; border-radius: 999px; background: var(--line); position: relative; }
.sim-toggle.on { background: var(--good); }
.sim-toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .2s; }
.sim-toggle.on::after { left: 16px; }
.sim-tabs { display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px 4px 18px; border-top: 1px solid var(--line); background: var(--bg); }
.sim-tabs button { border: 0; background: none; color: var(--faint); font: 600 9px var(--body); display: grid; justify-items: center; gap: 3px; cursor: pointer; padding: 2px 0; }
.sim-tabs svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sim-tabs .t-home { width: 22px; height: 20px; background: radial-gradient(ellipse 60% 35% at 50% 40%, #FF4A2B 98%, transparent), radial-gradient(ellipse 50% 40% at 50% 65%, #2A2D33 98%, transparent); filter: grayscale(1) opacity(.6); }
.sim-tabs button.on { color: var(--ink); }
.sim-tabs button.on svg { stroke: var(--accent); }
.sim-tabs button.on .t-home { filter: none; }
.sim-toast { position: absolute; left: 14px; right: 14px; top: 46px; padding: 10px 12px; border-radius: 14px; background: var(--ink); color: var(--bg); font-weight: 600; font-size: 12px; opacity: 0; transform: translateY(-8px); transition: opacity .25s, transform .25s; pointer-events: none; }
.sim-toast.show { opacity: 1; transform: none; }
.sim-disclaimer { max-width: 300px; text-align: center; font-size: 12px; color: var(--muted); }