/* Agentería · línea visual compartida (web, formulario, acceso privado).
   Decidido el 19-oct-2026: Schibsted Grotesk, cobalto y ocre sobre gris cemento, Panot sutil.
   Normas: agencia/marca/checklist-no-parecer-ia.md */

@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:400 900;font-display:swap;
  src:url(/fonts/schibsted-grotesk-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:"Schibsted Grotesk";font-style:normal;font-weight:400 900;font-display:swap;
  src:url(/fonts/schibsted-grotesk-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  color-scheme:light;
  /* tokens:start web */
  --cobalto:#2346D3; --cobalto-hondo:#1E3FAE; --ocre:#D9A43A; --cemento:#ECEBE7;
  --losa:#DCDAD4; --junta:#C9C7C1; --tinta:#14161C; --texto-2:#3A3E4A;
  --texto-3:#5C5F6B; --blanco:#FFFFFF; --error:#A3322B; --verde:#1D6F5B;
  --manganeso:#5C2C4F; --azul-claro:#B6C3F2; --letra:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif; --r:14px;
  --size-cover:64px; --size-title:40px; --size-section:24px; --size-body:18px;
  --size-note:14px;
  /* tokens:end */
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cemento);color:var(--tinta);font:400 17px/1.55 var(--letra);-webkit-font-smoothing:antialiased;font-variant-numeric:lining-nums}
h1,h2,h3{margin:0;font-weight:900;letter-spacing:-.035em;line-height:1.02;text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:var(--cobalto);text-underline-offset:.18em}
a:hover{color:var(--cobalto-hondo)}
::selection{background:var(--cobalto);color:var(--blanco)}
:focus-visible{outline:3px solid var(--cobalto);outline-offset:3px}
q{quotes:"«" "»" "“" "”"}

/* La marca: logo en SVG con la palabra en contornos (agencia/marca/logo-taller/final/LOGO.md).
   Alto 28-32 px en escritorio y 24 px en móvil; nunca menos de 96 px de ancho. */
.marca{display:inline-flex;align-items:center;text-decoration:none;line-height:0}
.marca img{display:block;height:var(--alto-logo,28px);width:auto}
@media (max-width:600px){.marca{--alto-logo:24px}}

/* Marco común de página: el logo cae en el mismo punto y con el mismo tamaño en todas las páginas
   (portada, formulario, zona privada). Cada página usa estas medidas en su contenedor y pone el logo en .cabecera. */
:root{--margen:clamp(20px,5vw,64px);--arriba:calc(24px + env(safe-area-inset-top,0px));--ancho:1280px;--alto-cabecera:32px}
@media (max-width:600px){:root{--alto-cabecera:24px}}
.cabecera{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:var(--alto-cabecera)}
.cabecera .marca{--alto-logo:var(--alto-cabecera)}

/* Piezas del sistema. El panot es la unidad mínima, nunca papel pintado de fondo. */
.camino{display:block;width:100%;height:auto}

.boton{appearance:none;border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:.5em;font:700 16px/1 var(--letra);letter-spacing:-.01em;border-radius:999px;padding:16px 22px;background:var(--cobalto);color:var(--blanco);text-decoration:none}
.boton:hover{background:var(--cobalto-hondo);color:var(--blanco)}
.boton:disabled{opacity:.55;cursor:wait}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}