/* Los estilos de la portada, compartidos por sus cuatro idiomas (/, /ca/, /en/, /fr/).
Antes iban dentro de index.html; se sacaron aquí el 09-10 para no copiarlos
cuatro veces. */
:root{
--paper:#F7F4EE;
--paper-2:#FFFDF9;
--ink:#0B132B;
--ink-2:#3D4557;
--ink-3:#5C6373;
--navy:#14213D;
--mint:#186054;
--mint-bright:#2A9D8F;
--line:#C9BFAE;
--line-soft:#E2DACC;
--sans:"Schibsted Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
--mono:"Martian Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
--gut:clamp(20px,5vw,64px);
--act:clamp(112px,11vw,176px);
--r-s:10px;--r-m:22px;
/* Tres alturas, todas teñidas de navy: 1 = plano sobre el mostrador
(tabla, perks), 2 = tarjeta de papel (abanico, tarjeta real),
3 = móvil (va en `filter`, porque el bisel es un PNG recortado).
La moldura es un filete doble: el borde del bloque, 6 px de bandeja
y un segundo filete; `--mould-drop` es la sombra que asoma por debajo. */
--e1:0 1px 1px rgba(11,19,43,.05),0 4px 10px -4px rgba(11,19,43,.10);
--e2:0 1px 2px rgba(11,19,43,.10),0 12px 26px -10px rgba(11,19,43,.26);
--e3:drop-shadow(0 1px 1px rgba(11,19,43,.10)) drop-shadow(0 18px 28px rgba(11,19,43,.16));
--tray:color-mix(in srgb,var(--ink) 3%,var(--paper));
--mould:0 0 0 6px var(--tray),0 0 0 7px var(--line-soft);
--mould-drop:0 16px 26px -6px rgba(11,19,43,.12);
/* El azul gris del pie de los mockups de las tiendas, para teñir los bordes. */
--edge:rgb(220 227 236 / .3);
}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]){
--paper:#0B1120;--paper-2:#141D31;
--ink:#F2EFE8;--ink-2:#BFC6D3;--ink-3:#98A1B3;
--navy:#C9D6F0;--mint:#63D8C5;--mint-bright:#63D8C5;
--line:#33456A;--line-soft:#22304C;
/* En oscuro no hay sombra que pinte: un filo claro de 1 px. */
--e1:0 0 0 1px rgba(226,232,246,.07);
--e2:0 0 0 1px rgba(226,232,246,.14);
--e3:drop-shadow(0 0 1px rgba(226,232,246,.34));
--mould-drop:0 0 0 0 transparent;
--edge:rgb(201 214 240 / .03);
}
}
:root[data-theme="dark"]{
--paper:#0B1120;--paper-2:#141D31;
--ink:#F2EFE8;--ink-2:#BFC6D3;--ink-3:#98A1B3;
--navy:#C9D6F0;--mint:#63D8C5;--mint-bright:#63D8C5;
--line:#33456A;--line-soft:#22304C;
--e1:0 0 0 1px rgba(226,232,246,.07);
--e2:0 0 0 1px rgba(226,232,246,.14);
--e3:drop-shadow(0 0 1px rgba(226,232,246,.34));
--mould-drop:0 0 0 0 transparent;
--edge:rgb(201 214 240 / .03);
}
*{box-sizing:border-box}
img{max-width:100%;height:auto}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
margin:0;color:var(--ink);
/* **El fondo de los mockups de las tiendas** (dueño, 08-10): el grano del
papel en toda la página y los bordes izquierdo y derecho teñidos, muy
suave. De lado y no de arriba abajo: la página hace scroll. */
background: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)) var(--paper);
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)}
/* Monitores grandes (dueño, 09-10): más ancho y todo un 12,5 % mayor, para
que la página no se quede en una franja estrecha en el centro. */
@media(min-width:1800px){
html{font-size:18px}
body{font-size:21px}
.wrap{max-width:1380px}
}
@media(min-width:2200px){
html{font-size:20px}
body{font-size:23px}
.wrap{max-width:1560px}
}
.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--navy);color:var(--paper);padding:12px 20px;border-radius:0 0 var(--r-s) 0;text-decoration:none}
.skip:focus{left:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.foot-links a{display:inline-block}
h1,h2,h3{margin:0;text-wrap:balance;letter-spacing:-.035em;line-height:1.03;font-weight:700}
h1{font-size:clamp(2.6rem,5vw,4.2rem);letter-spacing:-.04em}
h2.minor{font-size:clamp(1.7rem,3vw,2.3rem)}
h2{font-size:clamp(1.9rem,3.6vw,3rem);max-width:24ch}
h3{font-size:clamp(1.2rem,1.9vw,1.5rem);letter-spacing:-.02em;line-height:1.18}
/* Ninguna sección pesa más que la portada (revisión de diseño, 10-10): desde
960 px el H1 se encoge para que quepan las insignias, y los H2 con él. */
@media(min-width:960px){h2{font-size:clamp(1.8rem,3vw,2.6rem)}}
/* Un titular es una frase; la segunda va debajo, como entradilla. */
.h2-sub{margin-top:.5em;max-width:34ch;font-size:clamp(1.15rem,1.9vw,1.55rem);font-weight:600;letter-spacing:-.02em;line-height:1.22;color:var(--ink-2);text-wrap:balance}
p{margin:0}
p,li,figcaption{text-wrap:pretty}
a{color:inherit}
.lede-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.lede-list li{position:relative;padding-left:26px}
.lede-list li::before{content:"";position:absolute;left:2px;top:.62em;width:12px;height:7px;border-left:2.5px solid var(--mint-bright);border-bottom:2.5px solid var(--mint-bright);transform:rotate(-45deg)}
.lede{font-size:clamp(1.1rem,1.7vw,1.4rem);line-height:1.5;color:var(--ink-2);text-wrap:pretty}
.eyebrow{font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--mint)}
.muted{color:var(--ink-2)}
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.stuck{border-bottom-color: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}}
.nav-links{display:flex;gap:clamp(14px,2.4vw,30px);font-size:.9rem;color:var(--ink-2);list-style:none;margin:0;padding:0}
/* Que no se lea «Cómo funciona PRO» de un tirón (dueño, 09-10): más aire entre
enlaces y «Funciones» delante de la placa; en móvil no cabe y queda la placa. */
@media(min-width:660px){.nav-links{gap:clamp(26px,3.4vw,46px)}}
@media(max-width:659px){.nav-long{display:none}}
.nav-links a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;white-space:nowrap}
.nav-links a:hover{color:var(--ink)}
/* Desde 660 px el botón «Precio» sustituye al enlace «Precio», nunca los
dos a la vez (dueño, 09-10). Por debajo de 660 el botón no cabe y vuelve
el enlace, porque el precio tiene que estar siempre en la barra. Por
debajo de 560 px, con el selector de idioma al lado (09-10), no caben los
tres enlaces y se cae «Cómo funciona», que es lo que sigue a la portada. */
@media(min-width:660px){.nav-links li:nth-child(3){display:none}}
@media(max-width:659px){.btn.nav-cta{display:none}}
@media(max-width:559px){.nav-links li:nth-child(1){display:none}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
padding:13px 26px;border-radius:999px;text-decoration:none;
font-weight:500;font-size:.98rem;letter-spacing:-.01em;cursor:pointer;
background:var(--navy);color:var(--paper);border:1.5px solid var(--navy);
font-family:inherit;transition:transform .18s cubic-bezier(.2,.7,.3,1)}
/* En oscuro `--navy` es lavanda: el botón pasa a mint y el «100» a tinta. */
@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}
@media (prefers-reduced-motion:no-preference){.btn:active{transform:scale(.97)}}
.btn.sm{padding:9px 18px;font-size:.9rem}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2.5px solid var(--mint-bright);outline-offset:3px}
section{padding-block:var(--act)}
/* **Un solo hueco entre capítulos**, mayor que cualquiera de dentro, con un
filete del ancho del texto justo en medio: medio `--act` encima y medio
debajo. Junto a una banda navy no hay filete y el hueco entero va del lado
del papel, porque la banda ya marca el cambio. */
main > section:not(.band){padding-block:calc(var(--act) / 2)}
main > section:first-child,main > .band + section{padding-top:var(--act)}
main > section:not(.band):has(+ .band){padding-bottom:var(--act)}
main > section:not(.band) + section:not(.band){background:linear-gradient(var(--line-soft),var(--line-soft))
top center/calc(min(1180px,100%) - 2 * var(--gut)) 1px no-repeat}
.hero{padding-top:clamp(40px,7vh,86px);padding-bottom:0;overflow:hidden;position:relative;isolation:isolate}
/* **La marca de agua del sello**, como en los mockups de las tiendas (dueño,
08-10): grande, girada y cortada en la esquina derecha, bajo el menú. */
/* Va en su propia capa desde lo alto de la página, detrás del menú, para que
el cristal del menú la difumine igual que al resto (dueño, 08-10). La capa
recorta lo que sobresale por la derecha. 60px es el alto del menú. Es una
imagen y no una máscara: Chrome deja fuera del desenfoque del cristal lo
que va enmascarado. El SVG trae su propio color de tinta claro y oscuro. */
.page-mark{position:absolute;left:0;right:0;top:0;z-index:-1;pointer-events:none;overflow:hidden;
--s:clamp(340px,44vw,640px);height:calc(60px + var(--s) * .7)}
.page-mark::before{content:"";position:absolute;width:var(--s);height:var(--s);right:calc(var(--s) * -.42);top:calc(60px - var(--s) * .38);
background:url("/img/tally-seal.svg") center/contain no-repeat;opacity:.06;transform:rotate(-14deg)}
.hero-grid{display:grid;gap:clamp(30px,5vw,56px);align-items:center}
@media(min-width:960px){.hero-grid{grid-template-columns:1.06fr .94fr}}
.hero h1{margin:18px 0 0}
.hero .lede{margin-top:24px;max-width:min(40ch,29rem)}
.lede-list b{color:var(--ink);font-weight:600}
/* En escritorio la portada cabe en la primera pantalla de un portátil, con
las insignias de las tiendas a la vista (dueño, 09-10): titular algo
menor, la lista más ancha y más junta. */
@media(min-width:960px){
.hero{padding-top:clamp(24px,3.5vh,48px)}
.hero h1{font-size:clamp(2.4rem,3.3vw,3.1rem);margin-top:12px}
/* Recorta solo de lado (el sello de fondo): por abajo deja ver la última
tarjeta del abanico y su sombra entera (dueño, 09-10). */
.hero{overflow:clip visible;padding-bottom:clamp(28px,4vh,56px)}
.hero .lede{margin-top:16px;max-width:35rem;font-size:1.04rem;line-height:1.45}
.hero .lede-list{gap:4px}
.hero .stores{margin-top:18px}
}
/* **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)}
/* iPhone 17e — el marco es el bisel de Apple (DeviceKit, el mismo PNG que
usan los mockups de tienda: tooling/store/mockups/frame). El bisel trae
ya la muesca (el 17e lleva muesca, no isla dinámica: cae justo sobre el
hueco que las capturas dejan en la barra de estado) y los botones, y
lleva la pantalla recortada: la captura va DEBAJO y asoma por el hueco,
colocada en porcentajes del bisel — x 6,8584 %, y 2,4775 %, 86,2832 %
× 95,045 % de 1356×2664.
El PNG es transparente fuera de la silueta, así que la sombra va con
`drop-shadow` y nunca con `box-shadow`, que dibujaría el rectángulo.
Para cambiar una captura basta con sustituir el src de su ![]()
: el
marco no se toca. `--w` (ancho del bisel entero, un 16 % más que el de
la pantalla) es el único mando de tamaño. */
.iphone{
--w:333px;
width:var(--w);aspect-ratio:1356/2664;flex:none;position:relative;
filter:var(--e3);
}
.iphone::after{
content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
background:url("/img/frame/iphone-17e-bezel.webp?v=2") center/100% 100% no-repeat;
}
.iphone :is(img,video){
position:absolute;left:6.8584%;top:2.4775%;width:86.2832%;height:95.045%;
display:block;object-fit:cover;object-position:top center;background:var(--paper-2);
}
.iphone.sm{--w:min(100%,317px)}
/* **Si el vídeo no puede arrancar solo** (dueño, 07-10): un iPhone en bajo
consumo, «reducir movimiento» o el navegador de dentro de otra app dejan
la imagen fija. Entonces sale un botón y el vídeo se ve al tocarlo. */
.loop-play{display:none;position:absolute;left:50%;top:50%;z-index:3;width:64px;height:64px;margin:-32px 0 0 -32px;
border:0;border-radius:50%;background:color-mix(in srgb,var(--navy) 84%,transparent);color:var(--paper);
font:24px/64px system-ui,sans-serif;text-align:center;cursor:pointer}
.loop-play::before{content:"\25B6";padding-left:4px}
.needs-tap>.loop-play{display:block}
/* En oscuro, las capturas y los dibujos claros eran lo que más brillaba de
la página: se apagan un poco. */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) :is(.iphone img,.iphone video,.perk img,.art img,.poster-art img){filter:brightness(.88)}}
:root[data-theme="dark"] :is(.iphone img,.iphone video,.perk img,.art img,.poster-art img){filter:brightness(.88)}
/* **El abanico** (dueño, 29-09: «que se abriese más, con una animación más
bien diseñada»). Tres tarjetas de tres negocios, la de sellos delante. Las
de atrás asoman en diagonal y lo bastante lejos como para que cada una
diga lo que es: el shiba del cupón arriba, la cifra y la barra del saldo
abajo. Al cargar se reparten desde un mazo: suben juntas y cada una cae
en su sitio con un pequeño rebote, una detrás de otra (script bajo el
`.fan`). Con el ratón encima se abren algo más y la que está bajo el
puntero se levanta. Las tarjetas son WebP con las esquinas transparentes,
así que la sombra es un drop-shadow que sigue su forma. */
.fan{--cw:clamp(236px,24vw,340px);--sx:40%;--sy:72%;
position:relative;width:100%;height:calc(var(--cw) * 1.74);
display:flex;align-items:center;justify-content:center}
.fan .fcard{position:absolute;width:var(--cw);
filter:drop-shadow(0 1px 1.5px rgba(11,19,43,.16)) drop-shadow(0 16px 22px rgba(11,19,43,.20));
transition:translate .9s cubic-bezier(.22,1.2,.36,1),rotate .9s cubic-bezier(.22,1.2,.36,1),
scale .45s cubic-bezier(.2,.7,.3,1),opacity .4s ease-out}
.fan .fcard img{display:block;width:100%;height:auto}
.fan .f1{translate:calc(var(--sx) * -1) calc(var(--sy) * -1);rotate:-9deg}
.fan .f2{translate:var(--sx) var(--sy);rotate:8deg}
.fan .f3{translate:0 0;rotate:-1.5deg;z-index:2}
@media (hover:hover){
.fan:hover{--sx:44%;--sy:78%}
.fan:hover .f1{rotate:-11deg}
.fan:hover .f2{rotate:10deg}
.fan .fcard:hover{scale:1.04}
}
/* El mazo del que salen, y el orden en que se reparten. */
.fan.stacked .fcard{translate:0 14%;rotate:0deg;opacity:0;transition:none}
.fan.stacked .f1{rotate:-3deg}
.fan.stacked .f2{rotate:3deg}
.fan.dealing .f1{transition-delay:.16s}
.fan.dealing .f2{transition-delay:.3s}
@media (max-width:559px){.fan{--cw:min(60vw,226px);--sx:22%;--sy:70%}}
/* Entre 1200 y 1800 px la tarjeta de arriba pisaba la primera línea del texto
en catalán e inglés, cuya cabecera llega al borde (dueño, 09-10): algo más
pequeñas y, en esa franja, el abanico un poco a la derecha. Por debajo de
1200 px no hace falta moverlo, y moverlo sacaba la de abajo por el borde. */
@media (min-width:960px) and (max-width:1799px){.fan{--cw:clamp(236px,22vw,316px)}}
@media (min-width:1200px) and (max-width:1799px){.fan{translate:36px 0}}
/* La primera pantalla del móvil dice qué es y dónde se descarga (revisión de
diseño, 10-10): en una columna, las insignias suben justo bajo el titular
y la lista va detrás; en el teléfono, además, el abanico y la cabecera
ocupan menos, para que titular e insignias quepan en 740 px. */
@media (max-width:959px){
.hero-grid > :first-child{display:flex;flex-direction:column}
.hero .eyebrow{order:0} .hero h1{order:1}
.hero .stores{order:2;margin-top:18px}
.hero .lede-list{order:3;margin-top:22px}
}
@media (max-width:699px){
.hero{padding-top:8px}
.fan{--cw:min(48vw,184px)}
.hero .eyebrow{font-size:.66rem;letter-spacing:.07em;line-height:1.5}
.hero h1{margin-top:10px}
}
@media (prefers-reduced-motion:reduce){.fan .fcard{transition:none}}
.hero-art{display:flex;justify-content:center;position:relative;min-height:clamp(360px,46vw,520px);align-items:center}
@media(max-width:959px){.hero-art{order:-1;min-height:0}}
.steps{display:grid;gap:clamp(48px,7vh,92px);margin-top:clamp(46px,6vh,72px)}
.step{display:grid;gap:clamp(22px,3.6vw,56px);align-items:center}
@media(min-width:860px){
.step{grid-template-columns:.88fr 1.12fr;align-items:start}
.step:nth-child(even) .step-txt{order:2}
.step-txt{position:sticky;top:112px}
/* Un paso sin captura ocupa la fila entera. Con la rejilla de dos columnas
dejaba media fila en blanco, que se lee como una imagen que no ha
cargado. */
.step:not(:has(.step-art)){grid-template-columns:minmax(0,1fr)}
.step:not(:has(.step-art)) .step-txt{position:static;max-width:72ch}
}
.step-n{display:flex;align-items:center;gap:12px;margin-bottom:14px;font-family:var(--mono);font-size:.72rem;font-weight:600;
letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
/* **La cuenta de los pasos es el logo escribiéndose** (dueño, 29-09): las
mismas letras que la animación de carga de la app (assets/loader/), T,
TA, TAL, TALL y TALLY tachado, la cuenta de cinco. Al entrar el paso en
pantalla se escribe su letra nueva, y en el quinto, el trazo y el sello. Sin JS o
con movimiento reducido, cada paso sale ya escrito. */
.step-mark{--full:50.6px;position:relative;display:inline-block;height:36px;width:calc(var(--full) * var(--t));flex:none}
.step-mark i{position:absolute;left:0;top:0;height:100%;width:var(--full);background:var(--mint-bright);
-webkit-mask:url("/img/steps/tally-letters.webp") no-repeat center/100% 100%;
mask:url("/img/steps/tally-letters.webp") no-repeat center/100% 100%;
clip-path:inset(0 calc(100% - var(--to)) 0 0)}
.step-mark i.strike{-webkit-mask-image:url("/img/steps/tally-strike.webp");mask-image:url("/img/steps/tally-strike.webp");clip-path:inset(0 0 0 0)}
.step-mark.armed i.letters{clip-path:inset(0 calc(100% - var(--from)) 0 0)}
.step-mark.armed i.strike{clip-path:inset(0 100% 0 0)}
.step-mark.armed.draw i.letters{animation:tally-write .55s cubic-bezier(.3,.7,.3,1) .1s forwards}
.step-mark.armed.draw i.strike{animation:tally-strike .35s cubic-bezier(.4,0,.2,1) .7s forwards}
/* **Y en el quinto, el sello** (dueño, 08-10): el doble círculo del logo,
dibujado en redondo desde arriba tras el tachón, como en la carga de la
app. Sale del mismo lienzo de 512 px que las letras: su recorte empieza en
(90, 147) y mide 347 de ancho, así que el círculo entero mide 512/347 del
ancho de las letras y se corre 90 y 147 hacia arriba y a la izquierda. */
@property --sweep{syntax:"";inherits:false;initial-value:360deg}
.step-mark.sealed{margin-block:4px 8px}
.step-mark i.ring{--k:calc(var(--full) / 347);left:calc(var(--k) * -90);top:calc(var(--k) * -147);
width:calc(var(--k) * 512);height:calc(var(--k) * 512);clip-path:none;
-webkit-mask:url("/img/steps/tally-circle.webp") center/100% 100% no-repeat,conic-gradient(#000 var(--sweep),transparent 0);
-webkit-mask-composite:source-in;
mask:url("/img/steps/tally-circle.webp") center/100% 100% no-repeat,conic-gradient(#000 var(--sweep),transparent 0);
mask-composite:intersect}
.step-mark.armed i.ring{--sweep:0deg}
.step-mark.armed.draw i.ring{animation:tally-ring .45s cubic-bezier(.4,0,.2,1) 1.1s forwards}
@keyframes tally-ring{from{--sweep:0deg}to{--sweep:360deg}}
@keyframes tally-write{from{clip-path:inset(0 calc(100% - var(--from)) 0 0)}to{clip-path:inset(0 calc(100% - var(--to)) 0 0)}}
@keyframes tally-strike{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.step h3{margin-bottom:11px}
.step-list{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:11px}
.step-list li{position:relative;padding-left:26px;color:var(--ink-2);font-size:.98rem;line-height:1.55}
.step-list li::before{content:"";position:absolute;left:2px;top:.52em;width:12px;height:7px;
border-left:2.5px solid var(--mint-bright);border-bottom:2.5px solid var(--mint-bright);transform:rotate(-45deg)}
/* En el teléfono, móviles algo menores: la portada eran 35 pantallas, con
catorce iPhones uno detrás de otro (revisión de diseño, 10-10). Sigue siendo
scroll vertical, no una tira lateral (dueño, 08-10). */
@media(max-width:600px){.step .iphone.sm{--w:212px}}
.step-list li b{color:var(--ink);font-weight:600}
.step-art{display:flex;justify-content:center}
/* Un móvil fijo que cuenta los pasos (dirección A). En escritorio los cinco
textos pasan por la izquierda, uno detrás de otro con una separación
normal (dueño, 08-10: «hay demasiado espacio y queda raro y descuadrado»),
y un solo `.iphone` se queda quieto a la derecha. Su pantalla cambia al
paso siguiente cuando el título del actual sale por arriba de la ventana.
El script del final clona las cinco capturas en `.steps-stage` y marca
`.has-stage`: sin JS se queda el zigzag, y en móvil cada paso sigue con
su móvil. */
.steps-stage{display:none}
/* **La flecha del paso al móvil** (dueño, 08-10): sale del título del paso
que está enseñando el móvil y apunta a él, en el turquesa de las letras
TALLY, como trazada con boli. Al cambiar de paso se vuelve a dibujar. */
.step-arrow{display:none}
@media(min-width:960px){
.steps.has-stage{
--stage-w:min(400px,calc((100vh - 150px) * 1356 / 2664));
--stage-h:calc(var(--stage-w) * 2664 / 1356);
grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(48px,7vw,110px);row-gap:clamp(30px,4.5vh,48px)}
.has-stage .step{grid-column:1;display:block}
.has-stage .step-txt{position:static;max-width:34rem}
.has-stage .step-art{display:none}
.steps-stage{display:block;grid-column:2;grid-row:1/span 5;align-self:start;position:sticky;top:76px}
.steps.has-stage{position:relative}
.step-arrow{display:block;position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:3}
.step-arrow path{fill:none;stroke:var(--mint-bright);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.step-arrow.drawing .shaft{stroke-dasharray:1;stroke-dashoffset:1;animation:arrow-draw .5s cubic-bezier(.3,.7,.3,1) forwards}
.step-arrow.drawing .head{opacity:0;animation:arrow-head .15s ease .42s forwards}
.steps-stage .iphone{--w:var(--stage-w)}
.steps-stage :is(img,video){opacity:0;transition:opacity .3s ease}
.steps-stage :is(img,video).was{opacity:1}
.steps-stage :is(img,video).on{opacity:1;z-index:1}
}
/* **Los escaneos** (dueño, 09-10): en el paso 2 baja el móvil del cliente
con el escáner de QR de su cartera y lee el QR del negocio; del 3 al 4
baja el del negocio con su Escanear y lee el código de barras de la
cartera. La cámara enseña lo que tiene detrás y enfoca al encuadrar, y el
móvil que entra ocupa el sitio del otro. Lo monta el script de los pasos;
con «reducir movimiento» no existe y queda el fundido de siempre. */
/* En pantalla estrecha el móvil del negocio asoma por un borde invisible
un tercio por encima del móvil del paso, no por encima del texto entero. */
.step-art.scan-host{position:relative;clip-path:inset(-36% -80px -140px -80px)}
.steps-stage.instant :is(img,video){transition:none}
.scan-b{position:absolute;left:0;top:0;z-index:4;pointer-events:none;opacity:0;transform-origin:50% 40%}
.scan-screen{position:absolute;left:6.8584%;top:2.4775%;width:86.2832%;height:95.045%;overflow:hidden;background:#15171b}
.scan-feed{position:absolute;inset:0;overflow:hidden;background:var(--paper)}
.scan-world{position:absolute;left:0;top:0;transform-origin:0 0}
.scan-world .iphone{position:absolute;left:0;top:0;filter:none}
.scan-feed::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 80% 65% at 50% 50%,transparent 60%,rgba(0,0,0,.28))}
/* La pantalla de Escanear de la propia app, sacada del arnés de capturas sobre
negro y sobre blanco: el velo, el recuadro, la barra de estado y los
botones con su transparencia exacta. */
.scan-b .scan-chrome{left:0;top:0;width:100%;height:100%;object-fit:fill;background:none}
/* El borde del recuadro, en turquesa encima del blanco cuando lee el código. */
.scan-lock{position:absolute;left:8.63%;top:38%;width:82.74%;height:24%;box-sizing:border-box;
border:var(--bw,3px) solid var(--mint-bright);border-radius:var(--br,12px);opacity:0;box-shadow:0 0 18px rgba(42,157,143,.55)}
.scan-flash{position:absolute;inset:0;background:#fff;opacity:0}
.scan-b .scan-after{left:0;top:0;width:100%;height:100%;opacity:0}
@keyframes arrow-draw{to{stroke-dashoffset:0}}
@keyframes arrow-head{to{opacity:1}}
@media (prefers-reduced-motion:reduce){.steps-stage :is(img,video){transition:none} .step-arrow.drawing :is(.shaft,.head){animation:none;stroke-dasharray:none;opacity:1}}
/* Variante C: #control y el cierre son bandas navy de borde a borde, sin caja
ni gutter propio. Dentro de la banda los tokens pasan a su versión sobre
navy, así todo lo que cuelga de `var(--ink…)` o `var(--line…)` se recolorea
solo. En oscuro la banda va más honda que el cuerpo y con un filo claro
arriba y abajo, para que el capítulo se siga distinguiendo. */
.band{--band:#14213D;background:var(--band);color:#F2EFE8;
--ink:#F2EFE8;--ink-2:#C2C9D8;--ink-3:#9AA3B6;--mint:#63D8C5;--mint-bright:#63D8C5;
--line:rgba(242,239,232,.24);--line-soft:rgba(242,239,232,.13)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .band{--band:#060A15;border-block:1px solid rgba(201,214,240,.16)}}
:root[data-theme="dark"] .band{--band:#060A15;border-block:1px solid rgba(201,214,240,.16)}
/* B dentro de C: sobre la banda navy, las alturas 1 y 2 se tiñen de un navy
más hondo, y la comparación se apoya en una bandeja con filete doble. */
.dark-act{color:#F2EFE8;--panel:var(--band,#14213D);
--e1:0 1px 2px rgba(3,6,15,.34);
--e2:0 1px 2px rgba(3,6,15,.40),0 16px 30px -12px rgba(3,6,15,.72)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dark-act{--e1:0 0 0 1px rgba(226,232,246,.10);--e2:0 0 0 1px rgba(226,232,246,.18)}}
:root[data-theme="dark"] .dark-act{--e1:0 0 0 1px rgba(226,232,246,.10);--e2:0 0 0 1px rgba(226,232,246,.18)}
.dark-act .eyebrow{color:#63D8C5}
.dark-act h2{color:#F2EFE8;max-width:26ch}
/* El titular de la comparativa va en dos líneas (dueño, 01-10): la pregunta
entera arriba y «qué cambia para tu negocio» debajo. */
#control h2{max-width:none}
/* En una línea, a todo el ancho (dueño, 08-10). */
#tipos h2,#carteles h2{max-width:none}
.dark-act .lede{color:#C2C9D8}
:root[data-theme="dark"] .dark-act h2{color:var(--ink)}
:root[data-theme="dark"] .dark-act .lede{color:var(--ink-2)}
.face-off{display:grid;gap:clamp(16px,3vw,34px);margin-top:clamp(30px,4.4vw,46px);
padding:clamp(18px,2.8vw,30px);border-radius:var(--r-m);
background:rgba(3,6,15,.20);border:1px solid rgba(242,239,232,.14);
box-shadow:0 0 0 6px var(--panel),0 0 0 7px rgba(242,239,232,.09)}
@media(min-width:760px){.face-off{grid-template-columns:auto minmax(0,1fr);align-items:end;column-gap:clamp(34px,5vw,72px)}}
.fo-side{margin:0;display:flex;flex-direction:column;align-items:center}
/* La moldura dibuja 7 px por fuera de la caja: en móvil se come el margen. */
@media(max-width:559px){.face-off,.plan-wrap{margin-inline:7px}}
/* **El pase, de verdad** (dueño, 30-09): la misma Odila Cafe como pase de
tienda de Apple Wallet, con lo que un pase deja poner. Logo y nombre
arriba, un campo de cabecera, la franja (la imagen del pase), dos campos
y el código, en la letra del sistema. Pizarra apagada con una franja
café: sobre la banda navy un pase claro sería lo que más brilla, y la
protagonista es la tarjeta de al lado. */
.pass{width:clamp(250px,24vw,300px);border-radius:14px;overflow:hidden;background:#363C4A;color:#F3F4F6;
font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;line-height:1.2;letter-spacing:0;
box-shadow:var(--e2)}
.pass-top{display:flex;align-items:center;gap:9px;padding:14px 16px 12px}
.pass-wordmark{display:block;height:26px;width:auto;margin-right:auto}
.pass-f{display:block}
.pass-f.r{text-align:right}
.pass-l{display:block;font-size:10px;font-weight:600;letter-spacing:.05em;color:#AAB1BF}
.pass-v{display:block;margin-top:3px;font-size:15px}
.pass-top .pass-v{font-size:19px;margin-top:1px}
.pass-strip{display:grid;grid-template-columns:repeat(5,22px);justify-content:center;align-content:center;
gap:11px 17px;height:106px;background:#6A5646}
.pass-strip i{aspect-ratio:1;border-radius:50%;border:2px solid rgba(241,230,214,.5)}
/* La taza es el sello que un pase deja poner: un icono plano, igual en todos los huecos (dueño, 09-10). */
.pass-strip i.on{border-color:#F1E6D6;background:#F1E6D6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236A5646' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h13v5a5 5 0 0 1-5 5H9a5 5 0 0 1-5-5z'/%3E%3Cpath d='M17 11h1.5a2.5 2.5 0 0 1 0 5H16'/%3E%3Cpath d='M8 3.5c-.8 1 .8 2 0 3M12 3.5c-.8 1 .8 2 0 3'/%3E%3C/svg%3E") center/15px no-repeat}
.pass-fields{display:grid;grid-template-columns:1fr auto;gap:14px;padding:14px 16px 0}
.pass-code{width:74%;margin:24px auto 18px;padding:9px 11px;background:#fff;border-radius:6px}
.pass-code i{display:block;height:52px;background:repeating-linear-gradient(90deg,
#16181D 0 2px,#fff 0 3px,#16181D 0 4px,#fff 0 7px,#16181D 0 10px,#fff 0 11px,#16181D 0 12px,#fff 0 14px,
#16181D 0 15px,#fff 0 18px,#16181D 0 20px,#fff 0 21px,#16181D 0 24px,#fff 0 25px,#16181D 0 26px,#fff 0 29px,
#16181D 0 30px,#fff 0 31px,#16181D 0 33px,#fff 0 36px,#16181D 0 37px,#fff 0 38px,#16181D 0 41px,#fff 0 43px,
#16181D 0 44px,#fff 0 45px,#16181D 0 46px,#fff 0 49px,#16181D 0 51px,#fff 0 52px,#16181D 0 53px,#fff 0 56px,
#16181D 0 59px,#fff 0 60px,#16181D 0 61px,#fff 0 63px)}
.real-card{width:100%;max-width:560px;border-radius:var(--r-s);overflow:hidden;box-shadow:var(--e2)}
.real-card img{display:block;width:100%;height:auto}
.fo-cap{margin-top:12px;font-size:.84rem;color:#9AA3B6}
.fo-win{color:#63D8C5;font-weight:500}
:root[data-theme="dark"] .fo-cap{color:var(--ink-3)}
.pairs{margin-top:clamp(30px,4vw,46px);border-top:1px solid rgba(242,239,232,.18)}
:root[data-theme="dark"] .pairs{border-top-color:var(--line-soft)}
.phead{display:none;font-family:var(--mono);font-size:.72rem;font-weight:600;
letter-spacing:.1em;text-transform:uppercase;padding:14px 0}
@media(min-width:820px){.phead{display:grid;grid-template-columns:1fr 1fr;gap:34px}}
.phead span:first-child{color:#C2C9D8}
.phead span:last-child{color:#63D8C5}
.pair{display:grid;gap:7px 34px;padding:16px 0;border-bottom:1px solid rgba(242,239,232,.13)}
:root[data-theme="dark"] .pair{border-bottom-color:var(--line-soft)}
@media(min-width:820px){.pair{grid-template-columns:1fr 1fr;align-items:start}}
.pair .a{color:#C2C9D8;font-size:.99rem;line-height:1.45}
.pair .b{color:#F2EFE8;font-weight:500;font-size:.99rem;line-height:1.45}
:root[data-theme="dark"] .pair .a{color:var(--ink-2)}
:root[data-theme="dark"] .pair .b{color:var(--ink)}
.pair .a::before{content:"Pase · ";font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;opacity:.75}
/* «TallyStamp» en turquesa y negrita encima de cada respuesta, en todos los
tamaños (dueño, 07-10): sustituye a la raya. */
.pair .b span::before{content:"TallyStamp";display:block;margin-bottom:2px;color:#63D8C5;font-weight:700}
/* En escritorio ya lo dicen las cabeceras de las columnas: sin etiqueta en cada fila (dueño, 08-10). */
@media(min-width:820px){.pair .a::before,.pair .b span::before{content:none}}
.sub-caps{font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.16em;
text-transform:uppercase;color:var(--ink-3);margin:clamp(30px,4vw,44px) 0 4px}
.caps{display:grid;gap:2px;margin-top:clamp(36px,5vw,58px);border-top:1px solid var(--line-soft)}
.cap{display:grid;gap:6px 34px;padding:24px 0;border-bottom:1px solid var(--line-soft)}
@media(min-width:760px){.cap{grid-template-columns:minmax(0,16rem) 1fr;gap:34px}}
.cap h3{font-size:1.1rem;letter-spacing:-.015em}
.cap p{color:var(--ink-2);font-size:1rem}
.cap p + p{margin-top:.6em}
.bignum{font-size:clamp(5.25rem,12.75vw,9rem);line-height:.82;letter-spacing:-.06em;font-weight:900;color:var(--navy);display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .bignum{color:var(--ink)}}
:root[data-theme="dark"] .bignum{color:var(--ink)}
/* **Precio: dos tarjetas** (dueño, 08-10, propuesta A). El gratuito, más ancho,
con el 100 grande y «clientes activos» en su etiqueta; PRO al lado, con su
placa y borde azul marino. En móvil, una encima de otra. */
.plans2{display:grid;gap:clamp(18px,2.4vw,28px)}
@media(min-width:880px){.plans2{grid-template-columns:1.25fr 1fr;align-items:stretch}}
.pc{border-radius:var(--r-m);padding:clamp(26px,3.4vw,44px)}
.pc.free{background:var(--paper-2);border:1px solid var(--line-soft);box-shadow:var(--mould),var(--mould-drop)}
.pc.pro-card{background:var(--paper-2);border:2px solid #14213D;display:flex;flex-direction:column;justify-content:center;box-shadow:var(--e2)}
.pc-tag{font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--mint);margin-bottom:14px}
.pc.pro-card h3{font-size:clamp(1.4rem,2.2vw,1.9rem);line-height:1.15}
.pc-note{margin-top:16px;color:var(--ink-2);font-size:.98rem;line-height:1.6}
.free-head{max-width:none;font-size:clamp(1.6rem,2.8vw,2.4rem)}
.free-head .bignum{margin-top:.12em}
.bignum-lbl{display:block;margin-top:12px;font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
h2.wide{max-width:26ch}
.closer{padding-block:var(--act)}
.closer h2{color:#F2EFE8;max-width:22ch}
.closer-line{margin-top:18px;max-width:40ch;color:#C2C9D8}
:root[data-theme="dark"] .closer-line{color:var(--ink-2)}
/* El sello TALLY, estampado a un lado del cierre, como la marca de agua de
los carteles. Solo decora: sin él, el cierre dice lo mismo. */
.closer .wrap{position:relative}
.closer-seal{position:absolute;right:var(--gut);top:50%;width:clamp(170px,20vw,260px);height:auto;aspect-ratio:1;
transform:translateY(-50%) rotate(-12deg);color:#63D8C5;opacity:.2;pointer-events:none}
@media(max-width:699px){.closer-seal{display:none}}
:root[data-theme="dark"] .closer h2{color:var(--ink)}
footer{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:center}
footer a{text-decoration:none;color:var(--ink-2)}
footer a:hover{color:var(--ink)}
.foot-links{display:flex;flex-wrap:wrap;gap:0 22px;list-style:none;margin:0;padding:0}
.foot-links a{padding-block:10px}
/* Las guías y las páginas de cada función (08-10), una fila entera encima. */
.foot-guides{flex-basis:100%;padding-bottom:18px;border-bottom:1px solid var(--line-soft)}
/* --- Insignias de tienda ------------------------------------------------
Los dos enlaces reales. Las mismas dos URL viven en website/c/redirect.js. */
.stores{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:26px}
/* --- Tabla Gratis / Pro -------------------------------------------- */
.plan-wrap{margin-top:clamp(34px,4.4vw,48px);overflow-x:auto;
border:1px solid var(--line-soft);border-radius:var(--r-m);background:var(--paper-2);
box-shadow:var(--mould),var(--mould-drop)}
.plan{width:100%;border-collapse:collapse;min-width:560px;font-size:.97rem}
.plan caption{text-align:left;padding:22px clamp(18px,2.6vw,28px) 0;font-size:.9rem;color:var(--ink-3)}
.plan th,.plan td{padding:15px clamp(12px,1.8vw,20px);text-align:left;vertical-align:top;
border-bottom:1px solid var(--line-soft)}
.plan thead th{font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.16em;
text-transform:uppercase;color:var(--ink-3);border-bottom:1px solid var(--line);white-space:nowrap}
.plan thead th:first-child{width:44%}
.plan thead .col-pro{color:var(--mint)}
.plan thead th b{display:block;font-family:var(--sans);font-size:1.5rem;letter-spacing:-.04em;
text-transform:none;color:var(--ink);margin-top:7px;font-weight:700}
.plan thead th b em{font-style:normal;font-size:.5em;font-weight:500;color:var(--ink-3)}
.plan tbody th{font-weight:500;color:var(--ink);width:44%}
.plan td{color:var(--ink-2);width:28%}
.plan .col-pro{background:color-mix(in srgb,var(--mint-bright) 9%,transparent)}
.plan tr:last-child th,.plan tr:last-child td{border-bottom:0}
.plan .no{color:var(--ink-3);opacity:.75}
/* Lo que PRO tiene distinto del gratuito, en el verde de su cabecera (dueño, 08-10). */
.plan td.win{color:var(--mint);font-weight:600}
.plan-foot{margin-top:26px;font-size:.98rem;line-height:1.6;color:var(--ink-2)}
/* En pantalla estrecha la tabla no cabe en sus 560 px y la columna de PRO
quedaba fuera, detrás de un scroll horizontal que no se anuncia. Cada
fila se parte en dos: el concepto arriba y, debajo, los dos planes lado a
lado, en las mismas dos columnas que la cabecera. La cabecera se queda
fija bajo la barra mientras pasa la tabla, así que ningún valor necesita
llevar encima el nombre de su plan. */
@media(max-width:699px){
.plan-wrap{overflow-x:visible}
.plan,.plan caption,.plan thead,.plan tbody,.plan tr,.plan th,.plan td{display:block;width:auto}
.plan{min-width:0}
.plan caption{padding:20px clamp(16px,4vw,22px) 2px}
.plan thead{position:sticky;top:60px;z-index:2;background:var(--paper-2);border-bottom:1px solid var(--line)}
.plan thead tr{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:8px clamp(16px,4vw,22px)}
.plan thead th{padding:6px 10px;border-bottom:0;border-radius:8px;white-space:normal}
.plan thead th b{font-size:1.2rem;margin-top:3px}
.plan thead th:first-child{display:none}
.plan tbody tr{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;
padding:13px clamp(16px,4vw,22px);border-bottom:1px solid var(--line-soft)}
.plan tbody tr:last-child{border-bottom:0}
.plan tbody th,.plan tbody td{padding:0;border-bottom:0;width:auto}
.plan tbody th{grid-column:1/-1}
.plan tbody td{padding:6px 10px;border-radius:8px;line-height:1.4}
}
/* --- Capítulo 2: los tipos de tarjeta ------------------------------------
Cuatro fichas de papel (dueño, 30-09): sellos, gasto, saldo y cupón, cada
una con una tarjeta de verdad de la demo encima. La de saldo es la de
gasto en modo Saldo, pero la web la cuenta como un tipo más (dueño, 01-10). Los
textos salen de la propia app (bienvenida y editor): cambiar uno aquí y
no allí es prometer otra cosa que el producto. */
.types{display:grid;gap:clamp(18px,2.2vw,26px);margin-top:clamp(34px,4.5vw,52px)}
.type{background:var(--paper-2);border:1px solid var(--line-soft);border-radius:var(--r-m);
overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--e1)}
/* La tarjeta recta y casi de lado a lado, para que se lean sus cifras y su
premio: girada, el texto de la imagen se emborronaba. Se inclina solo al
pasar el ratón. */
.type-art{position:relative;display:grid;place-items:center;padding:clamp(18px,1.8vw,24px) 10px;
background:var(--tray);border-bottom:1px solid var(--line-soft)}
.type-art img{display:block;width:94%;height:auto;
filter:drop-shadow(0 1px 1.5px rgba(11,19,43,.16)) drop-shadow(0 12px 18px rgba(11,19,43,.18));
transition:rotate .5s cubic-bezier(.22,1.2,.36,1),translate .5s cubic-bezier(.22,1.2,.36,1)}
@media (hover:hover){.type:hover .type-art img{rotate:-1.5deg;translate:0 -4px}}
@media (prefers-reduced-motion:reduce){.type-art img{transition:none}}
.type-txt{padding:clamp(20px,2.4vw,26px);display:flex;flex-direction:column;gap:12px;flex:1}
.type h3{margin:0;font-size:clamp(1.15rem,1.6vw,1.3rem)}
.type p{margin:0;color:var(--ink-2);font-size:.97rem;line-height:1.55}
.type p b{color:var(--ink);font-weight:600}
.type .type-for{margin-top:6px;padding-top:14px;border-top:1px solid var(--line-soft);color:var(--ink)}
.type-for span{display:block;margin-bottom:4px;font-family:var(--mono);font-size:.68rem;font-weight:600;
letter-spacing:.16em;text-transform:uppercase;color:var(--mint)}
/* Dos columnas en tableta y cuatro en escritorio. Con subgrid, el titular,
el texto e «Ideal para» de las fichas de una fila empiezan a la misma
altura aunque sus textos no midan igual. */
@media(min-width:700px){
.types{grid-template-columns:repeat(2,1fr)}
.type{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0}
.type-txt{display:grid;grid-row:span 3;grid-template-rows:subgrid}
}
@media(min-width:1100px){.types{grid-template-columns:repeat(4,1fr);gap:16px}}
/* --- Capítulo 3: Diseña la tuya -----------------------------------------
Texto a la izquierda y, a la derecha, tres pantallas del editor en
abanico: los apartados delante, la plantilla de sellos detrás a un lado
y la tarjeta recién completada al otro. En móvil el abanico va entre la
entradilla y la lista, más cerrado para que quepa en 350 px. */
.design{display:grid;gap:clamp(34px,5vw,56px) clamp(40px,6vw,88px);align-items:start}
.design .lede{margin-top:20px;max-width:44ch}
.design .caps{margin-top:0}
@media(min-width:960px){
.design{grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);grid-template-areas:"head art" "list art"}
.design-head{grid-area:head}
.design .caps{grid-area:list}
.design .trio{grid-area:art;position:sticky;top:110px}
.design .cap{grid-template-columns:minmax(0,1fr);gap:6px;padding:20px 0}
}
/* Entre 960 y 1100 px la columna de la derecha es estrecha y el móvil de la
derecha se salía de la página: ahí el abanico es más pequeño. */
.trio{--fw:clamp(206px,calc(38vw - 180px),272px);display:grid;place-items:center;padding-block:10px 34px}
@media(max-width:959px){.trio{--fw:236px}}
.trio .iphone{grid-area:1/1;--w:var(--fw);
transition:translate .7s cubic-bezier(.22,1.2,.36,1),rotate .7s cubic-bezier(.22,1.2,.36,1)}
.trio .t-front{z-index:2}
.trio .t-l,.trio .t-r{--w:calc(var(--fw) * .84)}
.trio .t-l{translate:-74% 7%;rotate:-7deg}
.trio .t-r{translate:74% 9%;rotate:6deg}
@media (hover:hover){
.trio:hover .t-l{translate:-78% 6%;rotate:-9deg}
.trio:hover .t-r{translate:78% 8%;rotate:8deg}
}
@media(max-width:559px){.trio{--fw:min(50vw,200px);padding-bottom:18px} .trio .t-l{translate:-42% 6%} .trio .t-r{translate:42% 8%}}
@media (prefers-reduced-motion:reduce){.trio .iphone{transition:none}}
/* --- Capítulo 4: el mostrador ---------------------------------------------
El dibujo de la camarera escaneando es el ancla; debajo, las cinco
respuestas en filas y, al lado, dos fichas de verdad (gasto y cupón). */
.counter-top{display:grid;gap:clamp(30px,5vw,72px);align-items:center}
@media(min-width:900px){.counter-top{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)} .counter-top .art{order:-1}
.counter-top h2{max-width:none}}
.counter-top .lede-list{margin-top:26px}
.art{margin:0;border-radius:var(--r-m);overflow:hidden;border:1px solid var(--line-soft);background:var(--paper-2);box-shadow:var(--e1)}
.art img{display:block;width:100%;height:auto}
.answers{display:grid;gap:clamp(34px,5vw,80px);margin-top:clamp(40px,5vw,64px);align-items:start}
.answers .sub-caps{margin-top:0}
.answers .caps{margin-top:14px}
@media(min-width:960px){.answers{grid-template-columns:minmax(0,1fr) auto} .answers .cap{grid-template-columns:minmax(0,14rem) 1fr}}
.duo{display:flex;gap:16px;justify-content:center;align-items:flex-start}
.duo figure{margin:0;width:min(calc(50% - 8px),200px)}
.duo .iphone{--w:100%}
.duo figure:last-child{margin-top:44px}
@media(min-width:960px){.duo{padding-top:36px} .duo figure{width:clamp(176px,15vw,200px)}}
/* En móvil van justo después de «pulsas el +», antes de las respuestas. */
@media(max-width:959px){.duo{order:-1}}
/* --- Capítulo 5: los dos carteles -----------------------------------------
Dos objetos de papel: el cartel sobre la bandeja, con sombra navy y un
poco torcido, cada uno hacia un lado. */
.posters{display:grid;gap:clamp(34px,4vw,48px);margin-top:clamp(34px,4.5vw,52px);align-items:start}
@media(min-width:760px){.posters{grid-template-columns:repeat(2,minmax(0,1fr))}}
.poster-art{display:grid;place-items:center;padding:clamp(30px,4.4vw,54px) 20px;background:var(--tray);
border:1px solid var(--line-soft);border-radius:var(--r-m)}
.poster-art img{display:block;width:min(62%,284px);border-radius:5px;rotate:-2.4deg;box-shadow:var(--e2)}
.poster:nth-child(2) .poster-art img{rotate:2deg}
.poster h3{margin-top:26px}
/* --- Capítulo 6: lo que ve tu cliente ---------------------------------------
Siete móviles, cuatro y tres, cada uno con su título y una o dos líneas.
Con subgrid, los títulos y los textos de cada fila empiezan a la misma altura
aunque uno ocupe dos líneas. En móvil, uno debajo de otro (dueño, 08-10:
scroll vertical, no una tira que se desliza de lado). */
.shelf{display:grid;gap:44px;margin-top:clamp(34px,4.5vw,52px)}
.shelf-item .iphone{--w:min(100%,256px);margin-inline:auto}
.shelf-item h3{margin:24px 0 8px;font-size:clamp(1.06rem,1.5vw,1.22rem)}
.shelf-item p{color:var(--ink-2);font-size:.95rem;line-height:1.55}
/* En una columna, el texto antes que su captura, como en los pasos de
«Cómo funciona» (dueño, 09-10: con la captura arriba no se sabía a qué
texto iba cada una). */
@media(max-width:699px){
.shelf-item .iphone{--w:min(100%,212px)}
.shelf-item{display:flex;flex-direction:column}
.shelf-item .iphone{order:3;margin-top:18px}
.shelf-item h3{margin-top:0}
}
/* Siete en dos filas: cuatro arriba y tres abajo, centradas, desde tablet
(dueño, 09-10: nunca 3 + 3 + 1). En tablet, más juntas y con letra algo
menor para que quepan cuatro. */
@media(min-width:700px){
.shelf{grid-template-columns:repeat(8,minmax(0,1fr));gap:clamp(16px,2.2vw,32px);row-gap:clamp(40px,5vw,56px)}
.shelf-item{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;grid-column:span 2}
.shelf-item:nth-child(5){grid-column:2/span 2}
}
@media(min-width:700px) and (max-width:1039px){
.shelf-item h3{margin-top:16px;font-size:.98rem}
.shelf-item p{font-size:.86rem;line-height:1.5}
}
/* --- Los ocho perks de PRO ------------------------------------------
Cada uno con el dibujo que la app ya le puso en el muro de pago, y
con sus dos frases: qué hace (pitch) y para qué te sirve (value). */
.perks{display:grid;gap:clamp(20px,2.6vw,30px);margin-top:clamp(34px,4.5vw,52px)}
@media(min-width:700px){.perks{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.perks{grid-template-columns:repeat(6,1fr)} .perk{grid-column:span 2} .perk:nth-child(-n+2){grid-column:span 3}}
.perk{background:var(--paper-2);border:1px solid var(--line-soft);
border-radius:var(--r-m);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--e1)}
.perk img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--line-soft)}
.perk-txt{padding:clamp(18px,2.2vw,24px);display:flex;flex-direction:column;gap:10px;flex:1}
.perk h3{font-size:clamp(1.06rem,1.5vw,1.22rem)}
.perk p{color:var(--ink-2);font-size:.95rem;line-height:1.55}
.perk .why{margin-top:auto;padding-top:12px;border-top:1px solid var(--line-soft);
color:var(--mint);font-size:.9rem;line-height:1.5}
/* En móvil, ocho dibujos a todo el ancho eran ocho pantallas: el dibujo
pasa a ser pequeño, al lado del título, y el texto va debajo a todo el
ancho de la ficha. */
@media(max-width:699px){
.perk{display:grid;grid-template-columns:clamp(96px,28vw,120px) minmax(0,1fr);gap:10px 16px;padding:16px;align-items:center}
.perk img{border-radius:var(--r-s)}
.perk-txt{display:contents}
.perk-txt > :not(h3){grid-column:1/-1}
.perk .why{padding-top:10px}
}
.store-badge{display:inline-block;line-height:0;border-radius:var(--r-s)}
.store-badge img{height:48px;width:auto;display:block}
.stores.big .store-badge img{height:56px}
/* --- Preguntas frecuentes -------------------------------------------
**Tienen que estar a la vista.** El `FAQPage` del declara estas
seis preguntas, y Google sólo enseña un resultado desplegable cuando
las encuentra también en la página; si no, además de no salir, cuenta
como dato estructurado que no corresponde al contenido. */
.faq{margin-top:clamp(30px,4vw,44px);border-top:1px solid var(--line-soft);max-width:74ch}
.faq details{border-bottom:1px solid var(--line-soft)}
.faq summary{cursor:pointer;list-style:none;padding:20px 34px 20px 0;position:relative;
font-weight:600;letter-spacing:-.02em;font-size:clamp(1.02rem,1.5vw,1.16rem)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:10px;height:10px;
margin-top:-7px;border-right:2px solid var(--mint-bright);border-bottom:2px solid var(--mint-bright);
transform:rotate(45deg);transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-3px}
.faq p{padding:0 0 22px;color:var(--ink-2);line-height:1.6}