/* GENERATED by landing/build_site.py. Edit brand/colors.css and landing/src/site.css instead. */
:root {
/* Blue background of the logo composition (primary brand color). On the site
* it is also the ground of everything that carries the wing: the header, the
* hero and the footer, so they match the favicon. Nothing else is blue. */
--color-background: #3166A7;
/* Off-white of the wing shapes. */
--color-logo: #EFEEEC;
/* Black separations/shadows visible between the overlapping feathers. */
--color-shadow: #000000;
/* ---------------------------------------------------------------- website
* Palette of the public site. build_logo.py ignores these; it only needs the
* three above. Every contrast pair below was checked against WCAG AA
* (4.5:1 for normal text, 3:1 for large text and UI borders).
*/
/* Sky blues: action and emphasis only. The surfaces are greys. */
--color-accent: #31A9E8; /* buttons, icons, marks. Use --color-ink on top */
--color-accent-strong: #136A9B; /* links and hover; 5.9:1 on white and under white */
--color-accent-soft: #EDEDEF; /* chips, badges, quiet highlights */
--color-accent-light: #CFEBFA; /* accents over the brand blue; 4.7:1 */
/* Dark grey for the bands with no wing on them; white on it reaches 14.9:1. */
--color-deep: #27272A;
/* La línea que separa la fila legal del resto del pie. El mismo valor en los
* dos temas, porque el pie es azul en los dos, y no es un hex a propósito:
* tiene que dejar ver ese azul. */
--color-footer-edge: rgba(255, 255, 255, .18);
/* Text and surfaces. */
--color-ink: #18181B; /* body text; 17.7:1 on white */
--color-ink-soft: #52525B; /* secondary text; 7.7:1 on white */
--color-page: #FFFFFF; /* page background */
--color-surface: #FFFFFF; /* cards and panels sitting on the page */
--color-surface-alt: #F4F4F5; /* alternating section background */
--color-border: #CFCFD4; /* lineas que separan: tarjetas, filas, bloques */
/* Lo que se marca al pasar el ratón por una fila de un menú. Más oscuro que
* las secciones alternas: sobre el blanco del menú aquel no se distinguía. */
--color-hover: #E4E4E7;
/* El contorno de un campo tiene que verse, y --color-border no llega: un
* borde de control necesita 3:1. Este da 3.42:1 sobre blanco. Va aparte para
* que oscurecer los campos no oscurezca cada linea de la pagina. */
--color-field: #8A8A93;
/* Text and light chips placed ON the dark blue surfaces: header, hero, deep
* sections and footer. Separate from --color-surface because in dark mode the
* cards go dark while this has to stay near-white. */
--color-on-dark: #FFFFFF;
/* Secondary text on those same surfaces: subtitles, the footer, the steps.
* 4.7:1 on --color-background, the lightest of them. */
--color-on-dark-soft: #E6E6E9;
/* Text on the sky-blue accent (buttons, badges, step numbers). Dark in BOTH
* themes: the accent stays light, so this cannot follow --color-ink. */
--color-on-accent: #0E1B2A;
/* ------------------------------------------------------------ ilustraciones
* Las cuatro de «El problema», en la portada. Estos colores salen de las
* imágenes de referencia que se dieron para ellas, muestreados punto por
* punto: por eso no son los de la marca, y es a propósito. Viven aquí y no en
* el SVG porque un atributo no puede leer una variable, y así la escena de
* noche es solo otra lista de valores en colors-dark.css. build_logo.py no
* los lee: read_colors() se queda solo con sus tres claves. */
--art-stage: #E1EEFD; /* el fondo de cada escena */
--art-glow: #F4F9FF; /* el resplandor del centro */
--art-floor: #EAF2FE; /* la mesa */
--art-card: #F7FAFF; /* tablero, bandeja, disco, fichas */
--art-card-edge: #C9DAF8;
--art-paper: #FFFFFF; /* sobres, esfera del reloj, libreta */
--art-paper-shade: #D6E3F7;
--art-line: #CEDCF5; /* las rayas que hacen de texto */
--art-dash: #A9CBF7; /* las flechas de puntos */
--art-ink: #2A3F68; /* las cifras de las fichas */
--art-shadow: rgba(51, 99, 181, .22);
--art-blue: #3D8BF5;
--art-blue-deep: #2A68D8;
--art-blue-soft: #8CBEF9;
--art-green: #34C5A0;
--art-purple: #A08BFA;
--art-amber: #FDC074;
--art-red: #EF5F6A;
--art-navy: #2F4675; /* la papelera, las agujas, el boli */
--art-sweater: #1F3461;
--art-silver: #B9C6E6; /* el portátil de quien trabaja a mano */
--art-skin: #F2AC8E;
--art-skin-shade: #DE9677;
--art-hair: #2E2C3E;
--art-ginger: #CE723D;
--art-yellow: #FDBF77;
--art-pink: #F997AF;
--art-leaf: #4DB38D;
--art-leaf-deep: #2F8F75;
/* Elevation. Here rather than in site.css so the dark palette can restate
* them: a translucent black shadow is invisible on a dark page. */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, .06), 0 1px 3px rgba(0, 0, 0, .08);
--shadow: 0 6px 20px rgba(0, 0, 0, .10);
--shadow-lg: 0 18px 48px rgba(0, 0, 0, .16);
}
:root[data-theme="dark"] {
/* Header, hero and footer: everything that carries the wing. The brand blue,
* darkened so it does not glare at night. */
--color-background: #245285;
/* The wing keeps its own colors in both themes: it is the logo. */
--color-logo: #EFEEEC;
--color-shadow: #000000;
/* Sky blues. The accent is unchanged; the link tone is lifted, because the
* light-mode one (#136A9B) is too dark to read on a dark background. */
--color-accent: #31A9E8; /* buttons and marks; --color-ink goes on top */
--color-accent-strong: #5CBDF0; /* links and hover; 8.8:1 on the page */
--color-accent-soft: #26262A; /* chips and quiet highlights */
--color-accent-light: #CFEBFA; /* text over the brand blue; 6.5:1 */
/* Bands with no wing on them: the four-steps section, the table head. */
--color-deep: #232326;
/* La línea que separa la fila legal del resto del pie. El mismo valor que en
* el tema claro: el pie es azul en los dos. */
--color-footer-edge: rgba(255, 255, 255, .18);
/* Text and surfaces. */
--color-ink: #EDEDEF; /* body text; 17.6:1 on the page */
--color-ink-soft: #A1A1AA; /* secondary text; 7.7:1 on the page */
--color-page: #0B0B0C; /* page background */
--color-surface: #1B1B1E; /* cards, a visible step above the page */
--color-surface-alt: #121214; /* alternating section background */
--color-border: #34343A;
--color-hover: #2C2C31;
/* Mismo problema de noche: el borde de arriba no llega a 3:1 sobre las
* tarjetas. Este da 3.4:1. */
--color-field: #6E6E77;
/* Stays near-white: it is the text on the blue and deep surfaces. */
--color-on-dark: #F3F7FB;
--color-on-dark-soft: #E6E6E9;
/* Las ilustraciones de noche. Su fondo es el mismo de la sección, así que no
* se ve recuadro y los dibujos flotan sobre la página; hubo un azul noche y
* se quitó, porque teñía de azul toda la escena. Lo que es tarjeta (tablero,
* bandeja, disco, fichas) pasa a los grises de las tarjetas del sitio, y el
* papel baja un poco para no deslumbrar. Lo de color apenas sube, para
* leerse sobre el fondo, y las personas no cambian: la piel, el pelo
* pelirrojo y las camisas amarilla y rosa no se repiten aquí. Lo que va
* dibujado encima del papel (agujas, boli) usa --art-navy y no --art-ink,
* que de noche es claro. */
--art-stage: var(--color-surface-alt);
--art-glow: var(--color-surface-alt); /* sin resplandor: de noche es una mancha */
--art-floor: var(--color-surface-alt); /* la mesa tampoco: sus esquinas dibujaban media caja */
--art-card: var(--color-surface);
--art-card-edge: var(--color-border);
--art-paper: #D9E3F2;
--art-paper-shade: #9FB1CE;
--art-line: #3C3C44;
--art-dash: #4D73AB;
--art-ink: #DCE5F3;
--art-shadow: rgba(0, 0, 0, .55);
--art-blue: #4C95F7;
--art-blue-deep: #3A75E0;
--art-blue-soft: #5F8FD4;
--art-green: #3DD0AB;
--art-purple: #AE9BFB;
--art-amber: #FDC57F;
--art-red: #F2747C;
--art-navy: #3A5589;
--art-sweater: #2C4A86;
--art-silver: #8595B8;
--art-hair: #3B3850;
--art-leaf: #52BD95;
--art-leaf-deep: #3AA083;
/* Black shadows disappear on a dark page, so they are deeper and a soft ring
* of light does the lifting instead. */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, .40);
--shadow: 0 8px 24px rgba(0, 0, 0, .48);
--shadow-lg: 0 20px 52px rgba(0, 0, 0, .60);
}
@font-face {
font-family: "Changa One";
src: url("/assets/fonts/ChangaOne-Regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Sora";
src: url("/assets/fonts/Sora-VariableFont_wght.woff2") format("woff2");
font-weight: 100 800;
font-style: normal;
font-display: swap;
}
/* Panamails public site.
* Colors come from the variables of brand/colors.css, which the build prepends
* to this file together with the @font-face rules. No hex codes live here. */
/* ------------------------------------------------------------------ tokens */
:root {
--font-body: "Sora", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-brand: "Changa One", "Sora", system-ui, sans-serif;
--radius-sm: 8px;
--radius: 14px;
--radius-lg: 22px;
--ease: cubic-bezier(.2, .7, .2, 1);
--fast: 160ms;
--normal: 260ms;
--shell: 1140px;
--shell-narrow: 760px;
--gutter: clamp(18px, 4vw, 32px);
--section: clamp(56px, 9vw, 104px);
--header-h: 72px;
}
/* ------------------------------------------------------------------ reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.nav-open { overflow: hidden; }
body {
margin: 0;
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.6;
color: var(--color-ink);
background: var(--color-page);
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--color-accent-strong); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: .18em; }
button { font: inherit; color: inherit; }
/* Un solo anillo al enfocar. Antes se dibujaban dos: el borde del elemento
cambiaba a azul y encima aparecía un contorno separado por un hueco de 3 px.
Ahora el contorno se pega al borde y los dos son del mismo azul, así que se
leen como una sola línea gruesa.
Sin border-radius aquí: el contorno ya sigue el del elemento, y ponerlo
cuadraba las píldoras justo al enfocarlas. */
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 0; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { transition-duration: 0ms !important; animation: none !important; }
html { scroll-behavior: auto; }
}
/* Any rule with a class beats the browser's own [hidden], and .btn sets a
display, so a button marked hidden would still be drawn. */
[hidden] { display: none !important; }
.visually-hidden {
position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
position: absolute; left: 12px; top: -60px; z-index: 100;
padding: 10px 14px; background: var(--color-ink); color: var(--color-page);
border-radius: var(--radius-sm); font-weight: 600;
transition: top var(--fast) var(--ease);
}
.skip-link:focus { top: 12px; text-decoration: none; }
/* ------------------------------------------------------------------ layout */
.shell { width: min(100% - 2 * var(--gutter), var(--shell)); margin-inline: auto; }
.shell--narrow { max-width: var(--shell-narrow); }
.section { padding-block: var(--section); }
.section--alt { background: var(--color-surface-alt); }
.section__head { max-width: 680px; margin-bottom: clamp(28px, 5vw, 48px); }
.section__title {
font-size: clamp(1.6rem, 1.15rem + 2vw, 2.4rem);
line-height: 1.15; font-weight: 700; letter-spacing: -.015em;
color: var(--color-ink);
}
.section__intro { margin-top: 14px; font-size: 1.08rem; color: var(--color-ink-soft); }
.section__closing {
max-width: 680px; margin-top: clamp(24px, 4vw, 40px);
font-size: 1.12rem; font-weight: 500; line-height: 1.55;
}
.section__actions { margin-top: clamp(28px, 5vw, 44px); }
.eyebrow {
display: inline-block; margin-bottom: 12px;
font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
color: var(--color-accent-strong);
}
.eyebrow--light { color: var(--color-on-dark-soft); }
.note { margin-top: 18px; font-size: .95rem; color: var(--color-ink-soft); }
.tag {
display: inline-block; margin-left: 6px; padding: 2px 8px;
font-size: .7rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
border-radius: 999px; background: var(--color-accent-soft); color: var(--color-accent-strong);
}
.grid { display: grid; gap: clamp(16px, 2.5vw, 24px); }
.grid--2 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.split { display: grid; gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (min-width: 860px) { .split { grid-template-columns: 1.1fr 1fr; } }
.split--wide { align-items: start; }
@media (min-width: 860px) { .split--wide { grid-template-columns: 1.4fr 1fr; } }
/* ------------------------------------------------------------------ buttons */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
min-height: 46px; padding: 10px 22px;
font-weight: 600; font-size: .98rem; line-height: 1.2; white-space: nowrap;
border: 2px solid transparent; border-radius: var(--radius-sm);
cursor: pointer; text-decoration: none;
transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease),
background-color var(--fast) var(--ease), color var(--fast) var(--ease),
border-color var(--fast) var(--ease);
}
.btn:hover { text-decoration: none; }
.btn--lg { min-height: 52px; padding: 12px 26px; font-size: 1.04rem; }
.btn--block { width: 100%; }
/* Un plan por debajo del que ya se tiene: no se puede contratar, y el botón
lo dice quedándose quieto. Sin cursor de mano, sin hover y sin recibir el
foco del teclado, porque no lleva a ninguna parte; nav.js le quita también
la dirección. */
/* Dos clases y no una: `.btn--outline` y `.btn--primary` pesan lo mismo que
una clase suelta y se definen más abajo, así que ganaban por orden y el gris
no llegaba a verse. */
.btn.btn--off, .btn.btn--off:hover {
color: var(--color-ink-soft); background: var(--color-surface-alt);
border-color: var(--color-border);
cursor: default; transform: none; filter: none; box-shadow: none;
}
.btn--primary { background: var(--color-accent); color: var(--color-on-accent); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--color-accent-light); transform: translateY(-2px); box-shadow: var(--shadow); }
.btn--primary:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.btn--outline { background: transparent; color: var(--color-accent-strong); border-color: var(--color-accent-strong); }
.btn--outline:hover { background: var(--color-accent-strong); color: var(--color-on-dark); transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--color-on-dark); border-color: var(--color-on-dark-soft); }
.btn--ghost:hover { background: rgba(255, 255, 255, .12); border-color: var(--color-on-dark); }
/* ------------------------------------------------------------------ header */
.site-header {
position: sticky; top: 0; z-index: 50;
background: var(--color-background); color: var(--color-on-dark);
box-shadow: 0 1px 0 rgba(0, 0, 0, .12);
}
.site-header__inner {
display: flex; align-items: center; justify-content: space-between; gap: 20px;
min-height: var(--header-h);
}
.brand { display: inline-flex; align-items: center; gap: 12px; color: inherit; }
.brand:hover { text-decoration: none; }
.brand__wing { display: block; width: 52px; flex: none; }
.brand__wing svg { width: 100%; height: auto; }
.brand__wing .wing-fill { fill: var(--color-logo); }
.brand__wing .wing-shadow { fill: var(--color-shadow); }
.brand__name {
font-family: var(--font-brand); font-size: 1.7rem; line-height: 1; letter-spacing: .01em;
color: var(--color-logo);
}
/* Theme toggle. The icon shows the action, not the state: a sun while dark
(press to go light) and a moon while light, as in the reference. */
.header-actions { display: flex; align-items: center; gap: 8px; }
/* Getting in and signing up, side by side in the header. Same size, same
shape, same weight: the only difference between them is the colour, so one
reads as the main action without shouting over the other. */
.site-nav__account { display: flex; align-items: center; gap: 8px; }
.btn--account { min-height: 40px; padding: 8px 16px; font-size: .95rem; border-radius: 11px; white-space: nowrap; }
/* The two buttons take room in the bar: without this, "Cómo funciona" breaks
into two lines to make space for them. */
.site-nav__link { white-space: nowrap; }
.btn--account-in { background: var(--color-accent); color: var(--color-on-accent); }
.btn--account-in:hover { background: var(--color-accent-light); }
.btn--account-up { background: transparent; color: var(--color-on-dark); border-color: rgba(255, 255, 255, .4); }
.btn--account-up:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .7); }
/* In the menu they stack full width, like the WhatsApp button below them. */
@media (max-width: 959.98px) {
.site-nav__account { flex-direction: column; align-self: stretch; gap: 10px; }
.site-nav__account .btn--account { width: 100%; min-height: 52px; font-size: 1.04rem; }
}
/* The options menu: three lines before signing in, the account's own face
after. Same button as the two beside it, so the bar reads as one row. */
.usermenu { position: relative; }
.usermenu__button {
display: inline-flex; align-items: center; gap: 8px;
min-height: 40px; padding: 8px 12px;
font-weight: 600; font-size: .95rem; color: var(--color-on-dark);
border: 1px solid rgba(255, 255, 255, .4); border-radius: 11px;
cursor: pointer; list-style: none;
transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.usermenu__button::-webkit-details-marker { display: none; }
.usermenu__button:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .7); }
.usermenu__bars { display: grid; gap: 4px; width: 20px; }
.usermenu__bars span { display: block; height: 2px; background: currentColor; border-radius: 2px; }
.usermenu__me { display: inline-flex; align-items: center; gap: 8px; }
.usermenu__caret { display: grid; transition: transform var(--fast) var(--ease); }
.usermenu[open] > summary .usermenu__caret { transform: rotate(180deg); }
.usermenu__panel {
position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
min-width: 232px; padding: 8px;
color: var(--color-ink); background: var(--color-surface);
border: 1px solid var(--color-border); border-radius: 14px;
box-shadow: var(--shadow-lg);
}
.usermenu__item {
display: flex; align-items: center; gap: 10px; width: 100%;
margin: 0; padding: 10px 12px;
font: inherit; font-size: .95rem; font-weight: 500; text-align: left;
color: var(--color-ink); background: transparent;
border: 0; border-radius: 9px; cursor: pointer;
transition: background-color var(--fast) var(--ease);
}
a.usermenu__item:hover, button.usermenu__item:hover {
background: var(--color-hover); text-decoration: none;
}
.usermenu__icons {
display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px;
color: var(--color-ink-soft);
}
.usermenu__icons > span { display: none; grid-area: 1 / 1; }
.usermenu__group { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--color-border); }
/* El idioma, desplegado dentro del menú. La flecha del de fuera se escoge con
el hijo directo: sin eso, abrir el menú giraba también la de esta fila. */
.usermenu__sub > summary { list-style: none; }
.usermenu__sub > summary::-webkit-details-marker { display: none; }
.usermenu__value { margin-left: auto; font-size: .88rem; color: var(--color-ink-soft); }
.usermenu__sub[open] > summary .usermenu__caret { transform: rotate(180deg); }
.usermenu__subpanel { padding-left: 18px; }
.usermenu__title {
padding: 6px 12px 2px; font-size: .78rem; font-weight: 700;
letter-spacing: .04em; text-transform: uppercase; color: var(--color-ink-soft);
}
/* The language that works, and the one that is only announced. */
.usermenu__item.is-on { cursor: default; font-weight: 600; }
.usermenu__item.is-off { cursor: default; color: var(--color-ink-soft); }
.usermenu__item.is-on .usermenu__icons { color: var(--color-accent-strong); }
/* On the phone this sits inside the menu that already exists, at the end, so
there are never two sets of three lines in the same bar. */
@media (max-width: 959.98px) {
.usermenu { align-self: stretch; }
.usermenu__button { width: 100%; min-height: 52px; gap: 12px; font-size: 1.04rem; }
.usermenu__panel { position: static; min-width: 0; margin-top: 10px; box-shadow: none; }
.usermenu__caret { margin-left: auto; }
/* Dentro del menú, entre filas con su nombre escrito, tres líneas sueltas no
se entienden: aquí la palabra deja de ser solo para el lector de pantalla.
Cuando hay sesión el script la esconde, porque "Mi cuenta" ya la nombra. */
.usermenu__label {
position: static !important; width: auto; height: auto; margin: 0;
overflow: visible; clip: auto; white-space: nowrap;
}
}
/* The icon shows the action, not the state: a sun while dark (press to go
light) and a moon while light, as in the reference. */
:root[data-theme="dark"] .theme-toggle__sun { display: grid; }
:root:not([data-theme="dark"]) .theme-toggle__moon { display: grid; }
/* Circular reveal: the incoming theme grows over the outgoing one, so only the
new snapshot is animated and the old one stays put underneath. */
::view-transition-old(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
.nav-toggle {
display: inline-flex; align-items: center; gap: 10px;
padding: 8px 10px; background: transparent; border: 2px solid transparent;
border-radius: var(--radius-sm); cursor: pointer;
transition: border-color var(--fast) var(--ease), background-color var(--fast) var(--ease);
}
.nav-toggle:hover { background: rgba(255, 255, 255, .1); }
.nav-toggle__label { font-weight: 600; font-size: .95rem; }
@media (max-width: 419.98px) {
.nav-toggle__label {
position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.nav-toggle { gap: 0; }
.site-header__inner { gap: 12px; }
}
@media (max-width: 359.98px) {
.brand { gap: 8px; }
.brand__wing { width: 42px; }
.brand__name { font-size: 1.4rem; }
/* Long labels cannot fit on one line here, so let them wrap. */
.btn { white-space: normal; text-align: center; }
.btn--lg { padding-inline: 18px; }
.site-nav__cta { padding-inline: 16px; font-size: .98rem; }
}
.nav-toggle__bars { display: grid; gap: 4px; width: 22px; }
.nav-toggle__bars span {
display: block; height: 2px; background: currentColor; border-radius: 2px;
transition: transform var(--normal) var(--ease), opacity var(--fast) var(--ease);
transform-origin: center;
}
.is-open .nav-toggle__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.is-open .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.is-open .nav-toggle__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.site-nav__list { display: flex; gap: 4px; }
.site-nav__link {
display: block; padding: 10px 14px; border-radius: var(--radius-sm);
color: var(--color-on-dark); font-weight: 500;
transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.site-nav__link:hover { background: rgba(255, 255, 255, .12); text-decoration: none; }
.site-nav__link.is-active { background: var(--color-on-dark); color: var(--color-background); font-weight: 600; }
/* Mobile: the nav becomes a panel under the header. */
@media (max-width: 959.98px) {
.site-nav {
position: fixed; left: 0; right: 0; top: var(--header-h); z-index: 1;
display: flex; flex-direction: column; gap: 16px;
max-height: calc(100vh - var(--header-h)); overflow-y: auto;
padding: 16px var(--gutter) 24px;
background: var(--color-background);
border-top: 1px solid rgba(255, 255, 255, .14);
box-shadow: var(--shadow-lg);
opacity: 0; visibility: hidden; transform: translateY(-8px);
transition: opacity var(--normal) var(--ease), transform var(--normal) var(--ease),
visibility 0s linear var(--normal);
}
.is-open .site-nav { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
/* Dimmed backdrop under the panel; clicking it closes the menu. */
.site-header::after {
content: ""; position: fixed; left: 0; right: 0; top: var(--header-h); bottom: 0; z-index: -1;
background: rgba(0, 0, 0, .45);
opacity: 0; visibility: hidden;
transition: opacity var(--normal) var(--ease), visibility 0s linear var(--normal);
}
.site-header.is-open::after { opacity: 1; visibility: visible; transition-delay: 0s; }
.site-nav__list { flex-direction: column; gap: 6px; }
.site-nav__link { padding: 14px 16px; font-size: 1.15rem; }
.site-nav__cta { align-self: stretch; min-height: 52px; font-size: 1.04rem; }
}
@media (min-width: 960px) and (max-width: 1099.98px) {
.site-nav { gap: 10px; }
.site-nav__link { padding-inline: 10px; }
.site-nav__cta { padding-inline: 14px; font-size: .92rem; }
.brand__wing { width: 44px; }
.brand__name { font-size: 1.45rem; }
}
@media (min-width: 960px) {
.nav-toggle { display: none; }
.header-actions { order: 3; }
.site-nav { display: flex; align-items: center; gap: 18px; }
}
/* ------------------------------------------------------------------ hero (home) */
.hero { background: var(--color-background); color: var(--color-on-dark); overflow: hidden; }
.hero__inner {
display: grid; gap: clamp(28px, 5vw, 48px); align-items: center;
padding-block: clamp(48px, 8vw, 96px);
}
@media (min-width: 860px) { .hero__inner { grid-template-columns: 1.05fr .95fr; } }
.hero__title {
font-size: clamp(2.1rem, 1.3rem + 3.6vw, 3.6rem);
line-height: 1.08; font-weight: 800; letter-spacing: -.02em;
}
.hero__title-accent { color: var(--color-on-dark-soft); }
.hero__subtitle {
margin-top: 20px; max-width: 540px;
font-size: clamp(1.02rem, .95rem + .4vw, 1.2rem); line-height: 1.6;
color: var(--color-on-dark-soft);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero__actions .btn--outline { color: var(--color-on-dark); border-color: var(--color-on-dark-soft); }
.hero__actions .btn--outline:hover { background: var(--color-on-dark); color: var(--color-background); border-color: var(--color-on-dark); }
.hero__note { margin-top: 18px; font-size: .9rem; color: var(--color-on-dark-soft); }
.hero__art { display: flex; justify-content: center; }
.hero__wing { width: min(100%, 520px); }
.hero__wing svg { width: 100%; height: auto; }
.hero__wing .wing-fill { fill: var(--color-logo); }
.hero__wing .wing-shadow { fill: var(--color-shadow); }
@media (max-width: 859.98px) {
.hero__art { order: -1; }
.hero__wing { width: min(72%, 340px); }
}
/* ------------------------------------------------------------------ page hero (inner pages) */
.page-hero { background: var(--color-background); color: var(--color-on-dark); }
.page-hero .shell { padding-block: clamp(44px, 7vw, 80px); }
.page-hero__title {
font-size: clamp(1.9rem, 1.2rem + 2.8vw, 3rem);
line-height: 1.1; font-weight: 800; letter-spacing: -.02em;
}
.page-hero__subtitle { margin-top: 16px; max-width: 620px; font-size: 1.1rem; color: var(--color-on-dark-soft); }
/* ------------------------------------------------------------------ cards */
.note-card, .feature-card {
padding: 26px 26px 28px; border-radius: var(--radius);
background: var(--color-surface); border: 1px solid var(--color-border);
transition: transform var(--normal) var(--ease), box-shadow var(--normal) var(--ease), border-color var(--normal) var(--ease);
}
.note-card:hover, .feature-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--color-accent-soft); }
.note-card__title, .feature-card__title { font-size: 1.12rem; font-weight: 700; line-height: 1.3; margin-bottom: 10px; }
.note-card p, .feature-card p { color: var(--color-ink-soft); }
.note-card--check { padding-left: 54px; position: relative; }
.note-card--check::before {
content: ""; position: absolute; left: 22px; top: 30px; width: 18px; height: 18px;
border-radius: 50%; background: var(--color-accent);
-webkit-mask: url("data:image/svg+xml;utf8,") center / 70% no-repeat, linear-gradient(black, black);
mask: url("data:image/svg+xml;utf8,") center / 70% no-repeat, linear-gradient(black, black);
-webkit-mask-composite: xor; mask-composite: exclude;
}
.feature-card__icon {
display: inline-flex; width: 46px; height: 46px; margin-bottom: 16px;
align-items: center; justify-content: center; border-radius: 12px;
background: var(--color-accent-soft); color: var(--color-accent-strong);
}
.icon--feature { width: 24px; height: 24px; }
/* --------------------------------------------------------------- trouble (home)
Los cuatro puntos de «El problema»: a un lado la lista, con el que estás
viendo marcado con un ganchito, y al otro su ilustración y su párrafo.
Lo que abre cada uno son cuatro botones de radio, así que esto funciona
entero sin JavaScript y las flechas del teclado lo mueven solas; trouble.js
solo agrega el paso automático, y lleva su propio tiempo.
Las reglas nombran los cuatro por su id (#pain-1 … #pain-4). El estado del
punto abierto viaja a sus hijos en variables, así que una sola lista de
cuatro pinta la tarjeta, el círculo, el número y el ganchito a la vez. */
.trouble {
position: relative;
display: grid; gap: clamp(24px, 4vw, 40px);
}
/* Sigue enfocable a propósito: es lo que hace que las flechas del teclado
cambien de punto sin una línea de guion. */
.trouble__pick { position: absolute; width: 1px; height: 1px; opacity: 0; }
/* En el teléfono la ilustración va arriba, que es lo que se mira primero. */
.trouble__art { order: -1; display: grid; grid-template-columns: minmax(0, 1fr);
gap: 16px; align-content: start; }
@media (min-width: 900px) {
.trouble { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.trouble__art { order: 0; }
}
.trouble__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
/* De aquí salen los estados del punto; lo de abajo solo los lee. */
.trouble__list > li {
--card: transparent; --edge: transparent; --shade: none;
--mark-bg: transparent; --mark-line: var(--color-border); --mark-ink: var(--color-ink-soft);
--lift: 1; --n: 1; --tick: 0;
}
.trouble__step {
position: relative; display: flex; gap: 16px; align-items: flex-start;
padding: 16px 18px; cursor: pointer;
border-radius: var(--radius); border: 1px solid var(--edge);
background: var(--card); box-shadow: var(--shade);
transition: background var(--normal) var(--ease), border-color var(--normal) var(--ease),
box-shadow var(--normal) var(--ease);
}
.trouble__mark {
flex: none; display: grid; place-items: center;
width: 38px; height: 38px; border-radius: 50%;
border: 2px solid var(--mark-line); background: var(--mark-bg); color: var(--mark-ink);
font-weight: 800; font-size: .95rem; transform: scale(var(--lift));
transition: background var(--normal) var(--ease), border-color var(--normal) var(--ease),
color var(--normal) var(--ease), transform var(--normal) var(--ease);
}
/* El número y el ganchito comparten celda y se cambian con la opacidad, así que
el círculo no da un salto al pasar de uno a otro. */
.trouble__n, .trouble__mark .icon { grid-area: 1 / 1; transition: opacity var(--fast) var(--ease); }
.trouble__n { opacity: var(--n); }
.trouble__mark .icon { width: 19px; height: 19px; opacity: var(--tick); }
.trouble__said { display: grid; gap: 5px; min-width: 0; }
.trouble__title { font-size: 1.05rem; font-weight: 700; line-height: 1.3; color: var(--color-ink); }
.trouble__lead { font-size: .95rem; line-height: 1.5; color: var(--color-ink-soft); }
/* Las cuatro ilustraciones comparten una celda y los cuatro párrafos otra, así
que el bloque mide siempre lo que el más largo y no salta al cambiar. El que
no toca se esconde con `visibility` y no con `display`: así sigue contando
para esa medida y queda fuera del lector de pantalla. */
/* minmax(0, 1fr) y no una columna automatica: sin eso el ancho propio del
dibujo manda y el bloque se va de lado, como pasaba con las capturas. */
.trouble__frame { display: grid; grid-template-columns: minmax(0, 1fr); aspect-ratio: 8 / 5; }
.trouble__notes { display: grid; grid-template-columns: minmax(0, 1fr); }
.trouble__draw { width: 100%; height: auto; }
.trouble__note { margin: 0; line-height: 1.6; color: var(--color-ink-soft); }
.trouble__one {
grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(14px);
transition: opacity var(--normal) var(--ease), transform var(--normal) var(--ease),
visibility var(--normal);
}
/* Las tres listas: encender el punto abierto, enseñar su ilustración con su
párrafo, y marcar el foco. */
#pain-1:checked ~ .trouble__list > li:nth-child(1),
#pain-2:checked ~ .trouble__list > li:nth-child(2),
#pain-3:checked ~ .trouble__list > li:nth-child(3),
#pain-4:checked ~ .trouble__list > li:nth-child(4) {
--card: var(--color-surface); --edge: var(--color-border); --shade: var(--shadow-sm);
--mark-bg: var(--color-accent); --mark-line: var(--color-accent); --mark-ink: var(--color-on-accent);
--lift: 1.08; --n: 0; --tick: 1;
}
#pain-1:checked ~ .trouble__art .trouble__one:nth-child(1),
#pain-2:checked ~ .trouble__art .trouble__one:nth-child(2),
#pain-3:checked ~ .trouble__art .trouble__one:nth-child(3),
#pain-4:checked ~ .trouble__art .trouble__one:nth-child(4) {
opacity: 1; visibility: visible; transform: none;
}
#pain-1:focus-visible ~ .trouble__list > li:nth-child(1) .trouble__step,
#pain-2:focus-visible ~ .trouble__list > li:nth-child(2) .trouble__step,
#pain-3:focus-visible ~ .trouble__list > li:nth-child(3) .trouble__step,
#pain-4:focus-visible ~ .trouble__list > li:nth-child(4) .trouble__step {
outline: 2px solid var(--color-accent); outline-offset: 2px;
}
/* Los colores de las cuatro ilustraciones. Van en clases y no escritos en el
SVG porque un atributo no puede leer una variable: es lo mismo que se hace
con el ala del logo (.wing-fill). La paleta es la de las imágenes de
referencia, y vive en brand/colors.css con su versión de noche en
colors-dark.css. El volumen no sale de aquí: cada escena lleva sus dos
degradados de luz y de sombra, en blanco y negro con transparencia, que valen
igual en los dos temas. */
.art-stage { fill: var(--art-stage); }
.art-floor { fill: var(--art-floor); }
.art-card { fill: var(--art-card); }
.art-card-edge { fill: var(--art-card-edge); }
.art-paper { fill: var(--art-paper); }
.art-paper-shade { fill: var(--art-paper-shade); }
.art-line { fill: var(--art-line); }
.art-ink { fill: var(--art-ink); }
.art-blue { fill: var(--art-blue); }
.art-blue-deep { fill: var(--art-blue-deep); }
.art-blue-soft { fill: var(--art-blue-soft); }
.art-green { fill: var(--art-green); }
.art-purple { fill: var(--art-purple); }
.art-amber { fill: var(--art-amber); }
.art-red { fill: var(--art-red); }
.art-navy { fill: var(--art-navy); }
.art-sweater { fill: var(--art-sweater); }
.art-silver { fill: var(--art-silver); }
.art-skin { fill: var(--art-skin); }
.art-skin-shade { fill: var(--art-skin-shade); }
.art-hair { fill: var(--art-hair); }
.art-ginger { fill: var(--art-ginger); }
.art-yellow { fill: var(--art-yellow); }
.art-pink { fill: var(--art-pink); }
.art-leaf { fill: var(--art-leaf); }
.art-leaf-deep { fill: var(--art-leaf-deep); }
/* Los trazos: contornos, flechas de puntos, marcas y glifos. */
.art-s-edge { stroke: var(--art-card-edge); }
.art-s-shade { stroke: var(--art-paper-shade); }
.art-s-line { stroke: var(--art-line); }
.art-s-dash { stroke: var(--art-dash); }
.art-s-paper { stroke: var(--art-paper); }
.art-s-blue { stroke: var(--art-blue); }
.art-s-blue-deep { stroke: var(--art-blue-deep); }
.art-s-blue-soft { stroke: var(--art-blue-soft); }
.art-s-green { stroke: var(--art-green); }
.art-s-navy { stroke: var(--art-navy); }
.art-s-hair { stroke: var(--art-hair); }
.art-s-skin-shade { stroke: var(--art-skin-shade); }
/* El resplandor del fondo y la sombra suave de debajo de cada cosa. */
.art-glow { stop-color: var(--art-glow); }
.art-drop { flood-color: var(--art-shadow); }
/* ------------------------------------------------------------------ tour (home)
El carrusel de capturas del panel. Lo que abre cada una son cinco botones de
radio, así que funciona entero sin JavaScript y las flechas del teclado lo
mueven solas; carousel.js solo agrega sus botones y el paso automático.
Las reglas nombran los cinco por su id: si algún día son otros, estas listas
crecen con ellos.
Los colores son los del tema, como el resto de la página: hubo una banda que
se invertía, y estaba solo porque las capturas eran siempre oscuras.
En el teléfono no hay apretujón: los dos contenedores se vuelven
transparentes (display: contents) y cada captura queda encima de su texto,
que es lo único que se lee en esa pantalla. */
/* La columna con minmax(0, 1fr): sin eso el ancho propio de las capturas
(1400 px) manda y la portada se va de lado en el teléfono. */
.tour { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
/* Sigue enfocable a propósito: es lo que hace que las flechas del teclado
cambien de captura sin una línea de guion. */
.tour__pick { position: absolute; width: 1px; height: 1px; opacity: 0; }
.tour__strip, .tour__texts { display: contents; }
.tour__panel:nth-child(1) { order: 1; }
.tour__panel:nth-child(2) { order: 3; }
.tour__panel:nth-child(3) { order: 5; }
.tour__panel:nth-child(4) { order: 7; }
.tour__panel:nth-child(5) { order: 9; }
.tour__text:nth-child(1) { order: 2; }
.tour__text:nth-child(2) { order: 4; }
.tour__text:nth-child(3) { order: 6; }
.tour__text:nth-child(4) { order: 8; }
.tour__text:nth-child(5) { order: 10; }
.tour__panel {
position: relative; display: block; overflow: hidden; cursor: pointer;
aspect-ratio: 16 / 9; border-radius: var(--radius);
background: var(--color-surface-alt); border: 1px solid var(--color-border);
}
.tour__shot { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Cada listón trae las dos capturas de esa pantalla, la del panel en claro y la
del panel en oscuro, y aquí se esconde la que no toca. El claro es el de por
omisión porque sin JavaScript no hay atributo ninguno y la página sale clara.
Las dos van `lazy`, así que la escondida no se baja. */
.tour__shot--dark { display: none; }
:root[data-theme="dark"] .tour__shot--light { display: none; }
:root[data-theme="dark"] .tour__shot--dark { display: block; }
/* Apilado (el teléfono) no hay una abierta y otras cerradas: se ven las cinco,
así que cualquiera se puede agrandar. Solo con el guion, que es quien dibuja
la ventana. */
.tour.is-ready .tour__panel { cursor: zoom-in; }
.tour__title { color: var(--color-ink); font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; }
.tour__text { max-width: 66ch; color: var(--color-ink-soft); }
.tour__nav { display: none; }
@media (min-width: 760px) {
/* La tira ocupa la fila entera, y debajo el texto y las flechas se reparten
la siguiente: así los botones no quedan flotando solos más abajo. */
.tour { grid-template-columns: minmax(0, 1fr) auto; }
.tour__strip {
grid-column: 1 / -1;
display: flex; gap: 10px; aspect-ratio: 3.2; max-height: 520px;
}
.tour__texts { grid-column: 1; display: block; min-height: 116px; }
/* De la captura de un listón se ve la izquierda, que es donde el panel
tiene su menú y sus títulos; el centro de muchas pantallas es hueco. */
.tour__shot { object-position: left center; }
.tour__panel {
flex: 1 1 0; min-width: 0; aspect-ratio: auto;
transition: flex-grow 600ms var(--ease);
}
/* En la tira, pulsar una cerrada la abre; la que ya está abierta se agranda. */
.tour.is-ready .tour__panel { cursor: pointer; }
#tour-1:checked ~ .tour__strip .tour__panel:nth-child(1),
#tour-2:checked ~ .tour__strip .tour__panel:nth-child(2),
#tour-3:checked ~ .tour__strip .tour__panel:nth-child(3),
#tour-4:checked ~ .tour__strip .tour__panel:nth-child(4),
#tour-5:checked ~ .tour__strip .tour__panel:nth-child(5) { flex-grow: 7; }
.tour.is-ready #tour-1:checked ~ .tour__strip .tour__panel:nth-child(1),
.tour.is-ready #tour-2:checked ~ .tour__strip .tour__panel:nth-child(2),
.tour.is-ready #tour-3:checked ~ .tour__strip .tour__panel:nth-child(3),
.tour.is-ready #tour-4:checked ~ .tour__strip .tour__panel:nth-child(4),
.tour.is-ready #tour-5:checked ~ .tour__strip .tour__panel:nth-child(5) { cursor: zoom-in; }
#tour-1:focus-visible ~ .tour__strip .tour__panel:nth-child(1),
#tour-2:focus-visible ~ .tour__strip .tour__panel:nth-child(2),
#tour-3:focus-visible ~ .tour__strip .tour__panel:nth-child(3),
#tour-4:focus-visible ~ .tour__strip .tour__panel:nth-child(4),
#tour-5:focus-visible ~ .tour__strip .tour__panel:nth-child(5) {
outline: 2px solid var(--color-accent); outline-offset: 3px;
}
.tour__text { display: none; }
#tour-1:checked ~ .tour__texts .tour__text:nth-child(1),
#tour-2:checked ~ .tour__texts .tour__text:nth-child(2),
#tour-3:checked ~ .tour__texts .tour__text:nth-child(3),
#tour-4:checked ~ .tour__texts .tour__text:nth-child(4),
#tour-5:checked ~ .tour__texts .tour__text:nth-child(5) { display: block; }
/* Las flechas las pone el guion: un botón que no hace nada es peor que no
tenerlo, como el interruptor de los planes. */
.tour.is-ready .tour__nav {
grid-column: 2; align-self: end; display: flex; gap: 10px;
}
.tour__arrow {
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
background: transparent; color: var(--color-ink);
border: 1px solid var(--color-border);
transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.tour__arrow:hover { background: var(--color-hover); border-color: var(--color-field); }
.tour__arrow .icon { width: 18px; height: 18px; }
[data-tour-back] .icon { transform: rotate(90deg); }
[data-tour-next] .icon { transform: rotate(-90deg); }
}
@media (min-width: 760px) and (hover: hover) {
.tour__panel:hover { flex-grow: 2.2; }
}
/* La ventana de ver una captura en grande. La escribe carousel.js, así que sin
el guion no existe, como las flechas. Es un