/* Gafas España — shared tokens + both pages. Placeholders [..] are wrapped in .ph */
:root{
  color-scheme:light;
  --disabled-bg:#B9CDCF;--disabled-ink:#35505A;--card-hover:#FAFEFD;--mark-line:#8EA6AB;--field-line:#8EA6AB;--bar-track:#D3E0E2;--tag-line:#46606A;
  --bg:#F6FAFA; --paper:#FFFFFF; --ink:#0F2A33; --muted:#46606A; --line:#D3E0E2;
  --accent:#0A6E6A; --accent-strong:#085853; --on-accent:#FFFFFF; --tint:#E1F2F0; --tint-line:#8CC3BF;
  --warn:#A8281F; --ph-bg:#FFF3C9; --ph-ink:#5A4300;
  --serif:"Newsreader","Iowan Old Style",Georgia,serif;
  --sans:"Instrument Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --r:14px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.55 var(--sans)}
img,svg{max-width:100%}
a{color:var(--accent-strong);text-underline-offset:.18em}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ph{background:var(--ph-bg);color:var(--ph-ink);padding:0 .25em;border-radius:3px;font-style:normal}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:.5rem .9rem;border-radius:8px;z-index:20}
.skip:focus{left:8px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:3.25rem;padding:.8rem 1.6rem;border:2px solid var(--accent);background:var(--accent);color:var(--on-accent);font:600 1.0625rem/1.25 var(--sans);border-radius:999px;text-decoration:none;cursor:pointer;text-align:center;transition:background .15s,border-color .15s}
.btn:hover{background:var(--accent-strong);border-color:var(--accent-strong)}
.btn:disabled,.btn[aria-disabled="true"]{background:var(--disabled-bg);border-color:var(--disabled-bg);color:var(--disabled-ink);cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--accent-strong)}
.btn.ghost:hover{background:var(--tint)}

/* ============ ADVERTORIAL (single 44rem column; every block shares its edges) ============ */
:root{--col:44rem;--gap:2rem}
.wrap{max-width:var(--col);margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.teaser{background:var(--tint)}
.teaser .wrap{padding-block:.7rem;font:600 .95rem/1.45 var(--sans)}
.topbar{border-bottom:1px solid var(--line);background:var(--paper)}
.topbar .wrap{padding-block:.6rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;font-size:.9rem;color:var(--muted)}
.tag-ad{border:1px solid var(--tag-line);border-radius:999px;padding:.1rem .7rem;font-weight:600;color:var(--ink);font-size:.85rem;white-space:nowrap}
.hero{padding-block:2.5rem 0}
.hero h1{margin:0;font:500 clamp(2rem,5.4vw,2.9rem)/1.1 var(--serif);letter-spacing:-.015em;text-wrap:balance}
.article{padding-block:0 3rem;font:400 1.1875rem/1.72 var(--serif)}
.article p{margin:0 0 1.1em}
.article .lede{font-size:1.3rem;line-height:1.6;font-weight:500}
.article h2{font:600 clamp(1.5rem,3.4vw,1.9rem)/1.2 var(--serif);letter-spacing:-.01em;margin:2.6em 0 .6em;text-wrap:balance}
.article h3{font:650 1.05rem/1.3 var(--sans);margin:0 0 .3em}
.brand-logo{display:block;width:min(18rem,55vw);height:3rem;object-fit:cover;object-position:center}
.fig{margin:var(--gap) 0}
.fig img{display:block;width:100%;height:auto;border-radius:var(--r)}
.ph-img{aspect-ratio:var(--ar,16/9);display:grid;place-items:center;text-align:center;padding:.6rem;border:1.5px dashed var(--tint-line);background:var(--tint);color:var(--muted);border-radius:var(--r);font:italic 400 .85rem/1.35 var(--sans);overflow-wrap:anywhere;min-width:0}
.byline{display:grid;grid-template-columns:3rem minmax(0,1fr);gap:.75rem;align-items:center;margin:1.25rem 0;font:400 1rem/1.5 var(--sans)}
.byline .ph-img{--ar:1/1;font-size:.68rem;padding:.4rem;line-height:1.25}
.byline img{display:block;width:3rem;height:3rem;object-fit:cover;border-radius:50%}
.byline p{min-width:0;margin:0;font:600 1rem/1.5 var(--sans)}
.byline em{font-weight:400;color:var(--muted);overflow-wrap:break-word}
.callout{margin:1.8rem 0;padding:.1em 0 .1em 1.25rem;border-left:4px solid var(--accent)}
.callout h3{font:650 1.05rem/1.3 var(--sans);margin:0 0 .4rem}
.callout p{margin:0;font:italic 500 1.3rem/1.5 var(--serif)}
.closer{font:600 1.35rem/1.4 var(--serif);margin:1.4em 0}
.opts{list-style:none;margin:1.2em 0;padding:0;border-top:1px solid var(--line)}
.opts li{padding:1.1rem 0;border-bottom:1px solid var(--line)}
.opts p{margin:0;font-size:1.0625rem;line-height:1.6;color:var(--muted);font-family:var(--sans)}
.steps{list-style:none;margin:1.2em 0;padding:0;counter-reset:s}
.steps li{display:grid;grid-template-columns:2.4rem minmax(0,1fr);gap:.2rem .9rem;padding:1rem 0;border-bottom:1px solid var(--line);font:400 1.0625rem/1.6 var(--sans)}
.steps li::before{counter-increment:s;content:counter(s);grid-row:1/3;width:2.4rem;height:2.4rem;border-radius:50%;background:var(--tint);color:var(--accent-strong);font:600 1.1rem/2.4rem var(--sans);text-align:center}
.steps strong{display:block}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;list-style:none;margin:1.2rem 0 var(--gap);padding:0}
.cards .ph-img{--ar:4/3;font-size:.72rem;line-height:1.3;padding:.4rem}
.logos .ph-img{--ar:3/2}
a.region{display:grid;gap:.55rem;text-decoration:none;color:var(--ink)}
a.region h3{margin:0;font:650 1rem/1.3 var(--sans)}
a.region:hover .ph-img{border-color:var(--accent);background:var(--card-hover)}
.region img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);background:var(--tint)}
a.region:hover h3{text-decoration:underline;text-underline-offset:.18em}
@media(min-width:640px){.cards{grid-template-columns:repeat(4,minmax(0,1fr))}}
.cta{margin:var(--gap) 0;padding:1.6rem 1.5rem;background:var(--tint);border-radius:var(--r);font-family:var(--sans)}
.cta .q{margin:0 0 .25rem;font:600 1.5rem/1.25 var(--serif)}
.cta p{margin:0 0 1.1rem;font-size:1.0625rem;line-height:1.5}
.cta.end{background:var(--ink);color:var(--bg)}
.cta.end .btn{background:var(--bg);color:var(--ink);border-color:var(--bg)}
.cta.end .btn:hover{background:var(--tint);border-color:var(--tint)}
.step-cta{margin:var(--gap) 0}
.note{font:400 .95rem/1.5 var(--sans)}
@media(max-width:560px){.brand-logo{width:min(13rem,55vw);height:2.5rem}.article{font-size:1.125rem}.cta{padding:1.3rem 1.2rem}.step-cta .btn,.cta .btn{width:100%}}
/* ============ QUIZ ============ */
.qhead{background:var(--paper);border-bottom:1px solid var(--line)}
.qhead .in{max-width:46rem;margin:0 auto;padding-block:.7rem;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:flex;justify-content:space-between;align-items:center;font-size:.9rem;color:var(--muted)}
.qwrap{max-width:46rem;margin:0 auto;padding-block:1.25rem 4rem;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.banner{background:var(--ink);color:var(--bg);border-radius:var(--r);padding:1rem 1.2rem;margin-bottom:1.5rem;font-size:1.0625rem;line-height:1.45}
.prog{display:flex;align-items:center;gap:.9rem;margin:0 0 2rem;font-size:.95rem;color:var(--muted)}
.bar{flex:1;height:8px;background:var(--bar-track);border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent);border-radius:99px;transition:width .3s}
.step h1,.step h2{font:600 clamp(1.5rem,4.2vw,2.15rem)/1.22 var(--serif);letter-spacing:-.01em;margin:0 0 1.5rem;text-wrap:balance}
.step h1:focus{outline:none}
.sub{margin:-.8rem 0 1.5rem;color:var(--muted);font-size:1.0625rem}
.grid{display:grid;grid-template-columns:1fr;gap:.8rem;border:0;margin:0;padding:0;min-width:0}
@media(min-width:720px){.grid{grid-template-columns:1fr 1fr}}
.card{position:relative;display:flex;align-items:center;gap:.9rem;min-height:4.5rem;padding:1rem 1.15rem;background:var(--paper);border:2px solid var(--line);border-radius:var(--r);cursor:pointer;font:500 1.125rem/1.35 var(--sans);transition:border-color .15s,background .15s}
.card:hover{border-color:var(--tint-line);background:var(--card-hover)}
.card input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.mark{flex:none;width:1.6rem;height:1.6rem;border:2px solid var(--mark-line);border-radius:50%;display:grid;place-items:center;background:var(--paper);color:transparent}
.multi .mark{border-radius:7px}
.mark svg{width:.95rem;height:.95rem}
.card:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:3px}
.card:has(input:checked){border-color:var(--accent);background:var(--tint)}
.card:has(input:checked) .mark{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.card:has(input:checked){font-weight:600}
.actions{display:flex;gap:.8rem;margin-top:1.8rem;align-items:center}
.actions .btn.next{flex:1;max-width:20rem}
.field{display:block;margin:0 0 1.1rem}
.field span{display:block;font-weight:600;margin-bottom:.4rem}
.field input[type=text],.field input[type=tel],.field input[type=email],.field input[type=number],.field input:not([type]){width:100%;min-height:3.5rem;padding:.8rem 1rem;border:2px solid var(--field-line);border-radius:var(--r);background:var(--paper);color:var(--ink);font:400 1.125rem var(--sans)}
.field input:focus{outline:3px solid var(--accent);outline-offset:2px;border-color:var(--accent)}
.field input[aria-invalid=true]{border-color:var(--warn)}
.err{color:var(--warn);font-weight:500;margin:.4rem 0 0;min-height:0}
.legal{margin-top:1.5rem;font-size:.9rem;line-height:1.55;color:var(--muted)}
.legal ol{padding-left:1.2rem;margin:.4rem 0 .8rem}
.legal a{color:var(--accent-strong)}
.loader{display:grid;gap:1.2rem;justify-items:start}
.loader .bar{width:100%;flex:none}
.loader .bar i{width:0;animation:load 2.4s linear forwards}
@keyframes load{to{width:100%}}
.done h1{margin-bottom:.6rem}
.done .lead{font:500 1.2rem/1.5 var(--serif);margin:0 0 2.2rem}
.hr{height:1px;background:var(--line);margin:2.4rem 0}
.welcome h2{font-size:1.6rem;margin-bottom:.3rem}
.welcome .tl{font:500 1.25rem/1.4 var(--serif);color:var(--accent-strong);margin:0 0 1.6rem}
.wsteps{list-style:none;padding:0;margin:0;display:grid;gap:1.2rem;counter-reset:w}
.wsteps li{display:grid;grid-template-columns:3rem 1fr;gap:.9rem}
.wsteps li::before{counter-increment:w;content:counter(w);width:2.6rem;height:2.6rem;border-radius:50%;background:var(--accent);color:var(--on-accent);font:600 1.15rem/2.6rem var(--sans);text-align:center}
.wsteps h3,.adv h3{margin:0 0 .2rem;font:650 1.1rem/1.3 var(--sans)}
.wsteps p,.adv p{margin:0}
.ticks{list-style:none;padding:0;margin:.6rem 0 0;display:grid;gap:.4rem}
.ticks li::before{content:"✓";color:var(--accent);font-weight:700;margin-right:.6rem}
.adv{display:grid;gap:1.3rem;margin-top:1rem}
.adv>div{padding-top:1rem;border-top:1px solid var(--line)}
.back-link{font-size:1rem;display:inline-flex;align-items:center;min-height:2.75rem}
@media(prefers-reduced-motion:reduce){.bar i,.btn,.card{transition:none}.loader .bar i{animation-duration:.01s}}

/* quiz final: message + image */
.done-top{display:grid;grid-template-columns:minmax(0,1fr) 15rem;gap:1.5rem 2rem;align-items:stretch}
.done-top .txt>*:last-child{margin-bottom:0}
.done-img{position:relative;margin:0;border-radius:var(--r);overflow:hidden;background:var(--tint)}
.done-img img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
@media(max-width:640px){.done-top{grid-template-columns:1fr}.done-img{width:100%;max-width:24rem;aspect-ratio:4/3}}

/* partner logos */
.logo-tile{position:relative;aspect-ratio:3/2;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.logo-tile img{position:absolute;left:.85rem;top:.85rem;width:calc(100% - 1.7rem);height:calc(100% - 1.7rem);object-fit:contain;display:block}
/* footer + legal */
html{height:100%}
body{min-height:100%;display:flex;flex-direction:column}
.wrap,.qwrap,.qhead .in{width:100%}
.view{display:contents}
.site-footer{margin-top:auto;background:var(--paper);border-top:1px solid var(--line);font:400 .95rem/1.6 var(--sans);color:var(--muted)}
.site-footer .wrap{padding-block:2rem;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.5rem 3rem;align-items:start}
.site-footer[data-w="q"] .wrap{max-width:46rem}
.f-name{margin:0 0 .5rem;font:650 1.05rem/1.3 var(--sans);color:var(--ink)}
.site-footer address{font-style:normal;margin:0 0 .35rem}
.site-footer a{color:var(--accent-strong);display:inline-flex;align-items:center;min-height:2.75rem}
.site-footer .f-contact a{min-height:2.5rem}
.f-links{list-style:none;margin:0;padding:0;display:grid}
.f-links a{font-weight:500}
@media(max-width:560px){.site-footer .wrap{grid-template-columns:1fr;gap:1rem}.site-footer .wrap{padding-block:1.5rem}}
.legal-page h1{font:500 clamp(2rem,5.4vw,2.9rem)/1.1 var(--serif);letter-spacing:-.015em;margin:0 0 1.5rem}
.legal-page section{margin-bottom:2rem}
.legal-page section h2{margin:1.7em 0 .5em}
.legal-page .legal-copy{font-size:1.08rem;line-height:1.65}
.legal-page .legal-copy p{margin-bottom:.8em}
.legal-list{padding-left:1.5rem;margin:0 0 1.1em}
.legal-list li{padding-left:.2rem;margin:.3em 0}
.legal-page .hero{padding-block:2.5rem 0}
.todo{border:1.5px dashed var(--tint-line);background:var(--tint);border-radius:var(--r);padding:1.2rem 1.3rem;font:400 1rem/1.6 var(--sans);color:var(--ink)}
.topbar .back-link{font-size:.95rem}
.f-contact{display:flex;flex-direction:column;align-items:flex-start}
.contact-box{margin-top:1.6rem;font:400 1.0625rem/1.6 var(--sans)}
.contact-box address{font-style:normal;margin:0 0 .35rem}
.contact-box a{display:inline-flex;align-items:center;min-height:2.75rem;color:var(--accent-strong)}