/* **Every page that is not the home page** (legal pages, support) wears the
   home page's face (owner, 28-09: one design, one header, one logo across the
   whole site): its colour tokens, its type, its paper grain, its bar and its
   footer — copied from index.html, which keeps its own inline copy. The logo
   is the app's seal, `img/tally-seal.svg`, cut from the same symbol. */
:root{
  --paper:#F7F4EE;--paper-2:#FFFDF9;
  --ink:#0B132B;--ink-2:#3D4557;--ink-3:#5C6373;
  --navy:#14213D;--mint:#186054;--mint-bright:#2A9D8F;
  --line-soft:#E2DACC;
  --sans:"Schibsted Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --gut:clamp(20px,5vw,64px);
  --edge:rgb(220 227 236 / .3);
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#0B1120;--paper-2:#141D31;
    --ink:#F2EFE8;--ink-2:#BFC6D3;--ink-3:#98A1B3;
    --navy:#C9D6F0;--mint:#63D8C5;--mint-bright:#63D8C5;
    --line-soft:#22304C;
    --edge:rgb(201 214 240 / .03);
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  /* Grano de papel y los bordes teñidos, como en la home (dueño, 08-10), muy suave. */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E"),linear-gradient(90deg,var(--edge),transparent 14% 86%,var(--edge));
  font-family:var(--sans);font-size:clamp(17px,1.35vw,19px);line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
.wrap{max-width:1180px;margin-inline:auto;padding-inline:var(--gut)}
a{color:inherit}
a:focus-visible{outline:2.5px solid var(--mint-bright);outline-offset:3px}

nav{position:sticky;top:0;z-index:60;backdrop-filter:saturate(180%) blur(18px);
    background:color-mix(in srgb,var(--paper) 80%,transparent);
    border-bottom:1px solid var(--line-soft)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:60px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.03em;font-size:1.04rem;text-decoration:none}
.tally{display:block;width:20px;height:20px;flex:none}
/* El sello y el nombre del menú, a un tamaño que se vea (dueño, 08-10). */
nav .brand{font-size:1.3rem;gap:12px}
nav .tally{width:36px;height:36px}
/* En móvil no se encoge el sello: se quita aire (dueño, 08-10). */
@media(max-width:659px){nav .nav-in{padding-inline:12px} nav .brand{gap:8px} .nav-links{gap:8px}}
/* Como en la portada: «Precio» siempre en la barra, y por debajo de 560 px, con
   el selector de idioma al lado, se cae «Cómo funciona» (09-10). */
@media(max-width:559px){.nav-links li:nth-child(1){display:none}}
.nav-links{display:flex;gap:clamp(14px,2.4vw,30px);font-size:.9rem;color:var(--ink-2);list-style:none;margin:0;padding:0}
.nav-links a{display:inline-block;padding-block:6px;text-decoration:none;white-space:nowrap}
.nav-links a:hover{color:var(--ink)}
/* El mismo menú que la portada (09-10): «Funciones PRO» y el botón «Precio»
   desde 660 px; por debajo, el enlace «Precio» y solo la placa. */
@media(min-width:660px){.nav-links{gap:clamp(26px,3.4vw,46px)} .nav-links li:nth-child(3){display:none}}
@media(max-width:659px){.nav-long{display:none} .btn.nav-cta{display:none}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 18px;border-radius:999px;
  text-decoration:none;font-weight:500;font-size:.9rem;letter-spacing:-.01em;background:var(--navy);color:var(--paper);
  border:1.5px solid var(--navy);font-family:inherit}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn{background:var(--mint-bright);border-color:var(--mint-bright);color:#0B132B}}
:root[data-theme="dark"] .btn{background:var(--mint-bright);border-color:var(--mint-bright);color:#0B132B}

main{max-width:46rem;margin-inline:auto;padding:clamp(40px,7vh,86px) var(--gut) clamp(56px,9vh,110px)}
h1,h2{margin:0;text-wrap:balance;font-weight:700}
h1{font-size:clamp(2.1rem,5vw,3.2rem);letter-spacing:-.045em;line-height:1.05}
h2{font-size:clamp(1.2rem,2vw,1.45rem);letter-spacing:-.02em;line-height:1.2;margin:2.4rem 0 .6rem}
.date{color:var(--ink-3);font-size:.95rem;margin:.6rem 0 0}
main > header{margin-bottom:2rem}
p{margin:0 0 1rem}
p,li{color:var(--ink-2)}
li{margin-bottom:.35rem}
strong{color:var(--ink)}
main a{text-decoration-color:var(--mint-bright);text-underline-offset:3px}

footer{border-top:1px solid var(--line-soft);padding-block:52px 92px;color:var(--ink-3);font-size:.9rem}
.foot-in{display:flex;flex-wrap:wrap;gap:20px 40px;justify-content:space-between;align-items:baseline}
footer a{text-decoration:none;color:var(--ink-2)}
footer a:hover{color:var(--ink)}
.foot-links{display:flex;flex-wrap:wrap;gap:22px;list-style:none;margin:0;padding:0}
.foot-links a{display:inline-block;padding-block:6px}
footer .brand{font-size:.95rem;color:var(--ink)}

/* **Páginas de función y guías** (08-10): reseñas, tarjeta regalo, sorteos y
   las guías. Miga de pan, entradilla, imágenes, pasos numerados, botones de
   las tiendas y enlaces a las demás páginas. */
.crumbs{font-size:.88rem;color:var(--ink-3);margin:0 0 1.4rem}
.crumbs a{color:var(--ink-3)}
.lede{font-size:1.12em;color:var(--ink);margin-top:1rem}
main figure{margin:1.8rem 0}
main figure img{display:block;width:100%;height:auto;border-radius:16px}
.shots{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}
.shots img{width:min(230px,44%);border-radius:26px;border:1px solid var(--line-soft)}
main figure.poster img{max-width:300px;margin-inline:auto;border-radius:6px;box-shadow:0 10px 30px rgba(11,19,43,.14)}
figcaption{font-size:.9rem;color:var(--ink-3);text-align:center;margin-top:.6rem}
ol.steps{padding-left:1.4rem}
ol.steps li{margin-bottom:.7rem}
.note{border-left:3px solid var(--mint-bright);padding:.2rem 0 .2rem 1rem;margin:1.4rem 0}
.stores{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:1.2rem 0 0}
.store-badge{display:inline-block;line-height:0}
.store-badge img{height:48px;width:auto;display:block}
.related{list-style:none;padding:0;margin:0}
.related li{margin-bottom:.5rem}

/* **PRO es una placa, no una palabra** (dueño, 08-10; la misma regla que la
   app, `TallystampProBadge`): PRO en blanco y en negrita sobre el azul marino
   de la marca, al 82 % del texto que lo rodea, en títulos, frases y menú. */
.pro{display:inline;padding:.2em .4em .2em .5em;border-radius:.45em;background:#14213D;color:#fff;
  font-family:var(--sans);font-size:.82em;font-weight:800;letter-spacing:.1em;line-height:1;vertical-align:.08em;
  text-transform:none;white-space:nowrap}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pro{box-shadow:0 0 0 1px rgba(226,232,246,.2)}}
:root[data-theme="dark"] .pro{box-shadow:0 0 0 1px rgba(226,232,246,.2)}