/* ---------- type, embedded so the page works offline ---------- */
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/anton-400.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/archivo-400.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/archivo-600.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/archivo-700.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/archivo-800.woff2) format('woff2')}
:root{
--red:#E71D36;
--red-dk:#B0121F;
--green:#00A651;
--amber:#FFB000;
--lime:#ABE000;
--ink:#0A0A0A;
--paper:#FFFFFF;
--paper-2:#F2F2F0;
--grey:#6B6B6B;
--nav-h:74px;
--disp:'Anton',Impact,'Haettenschweiler',sans-serif;
--body:'Archivo',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
font-family:var(--body);background:var(--paper);color:var(--ink);
line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased
}
body.menu-open{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}
::selection{background:var(--red);color:#fff}
.wrap{width:min(1240px,calc(100% - 44px));margin-inline:auto}
.narrow{width:min(860px,calc(100% - 44px));margin-inline:auto}
.obl{display:inline-block;transform:skewX(-9deg)}
h1,h2,h3,.dsp{font-family:var(--disp);text-transform:uppercase;font-weight:400;letter-spacing:.005em}
h2.big{font-size:clamp(40px,8.2vw,112px);line-height:.92}
h3.mid{font-size:clamp(26px,3.6vw,46px);line-height:.94}
.kicker{
font-size:11px;font-weight:800;letter-spacing:.34em;text-transform:uppercase;
display:inline-flex;align-items:center;gap:11px;color:var(--red)
}
.kicker::before{content:"";width:26px;height:3px;background:currentColor}
/* Tres secciones se quedaron sin su antetítulo rojo. Sin esto el titular
sube y, en la del plazo, queda pegado a la barra superior. Se reserva lo
que ocupaba: el alto de esa línea (18px) más su separación inferior (16px). */
.no-kick{margin-top:34px}
.lead{font-size:clamp(19px,2.2vw,26px);line-height:1.45;font-weight:600;max-width:30ch}
p.txt{font-size:clamp(16.5px,1.5vw,19px);line-height:1.68;max-width:58ch;color:#27272A}
.on-dark p.txt{color:#D2D2D4}
.on-dark{color:var(--paper)}
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:10px;text-align:center;
font-weight:800;font-size:13px;letter-spacing:.15em;text-transform:uppercase;
padding:19px 34px;background:var(--red);color:#fff;border:2px solid var(--red);cursor:pointer;
transition:background .2s,color .2s,border-color .2s,transform .16s
}
.btn:hover{background:var(--ink);border-color:var(--ink);transform:translateY(-2px)}
.btn.dark{background:var(--ink);border-color:var(--ink)}
.btn.dark:hover{background:var(--red);border-color:var(--red)}
.btn.line{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.line:hover{background:var(--ink);color:#fff}
.on-dark .btn.line{color:#fff;border-color:#fff}
.on-dark .btn.line:hover{background:#fff;color:var(--ink)}
.btn.sm{padding:13px 20px;font-size:11.5px}
.btn.wide{width:100%}
/* El aire entre secciones ya no crece con la pantalla. Antes era
clamp(76px,10vw,150px): en un monitor ancho dejaba 300 px entre una
sección y la siguiente y obligaba a desplazarse por el vacío. Ahora el
techo es bajo y el ritmo de la página es el mismo en un portátil que en
un monitor grande. */
section{position:relative;padding:clamp(38px,3.6vw,54px) 0}
.s-black{background:var(--ink)}
.s-paper{background:var(--paper-2)}
/* reveal — visible by default; only hidden once JS takes over */
.rv{transition:opacity .75s cubic-bezier(.16,1,.3,1),transform .75s cubic-bezier(.16,1,.3,1)}
html.anim .rv{opacity:0;transform:translateY(28px)}
html.anim .rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.09s}.rv.d2{transition-delay:.18s}.rv.d3{transition-delay:.27s}
/* ---------- pages ---------- */
/* Without JS both pages render as one long document, so nothing is unreachable.
With JS they behave as two pages. */
html.js #page-news,html.js #page-kit{display:none}
html.js #page-news.is-on,html.js #page-kit.is-on{display:block}
html.js #page-home.is-off{display:none}
nav.links a.sep{margin-left:14px;position:relative}
nav.links a.sep::before{
content:"";position:absolute;left:-9px;top:50%;transform:translateY(-50%);
width:1px;height:16px;background:currentColor;opacity:.28
}
.news-head{padding-bottom:clamp(28px,3.6vw,44px)}
.news-head .back{
display:flex;width:max-content;margin-bottom:clamp(20px,2.6vw,32px);
align-items:center;gap:8px;font-size:11px;font-weight:800;
letter-spacing:.18em;text-transform:uppercase;color:#9A9A9E;transition:color .2s
}
.news-head .back:hover{color:var(--red)}
.news-title{font-size:clamp(44px,9vw,120px);line-height:.9;margin-top:14px}
.news-cta{
border-top:1px solid rgba(255,255,255,.22);padding-top:clamp(26px,3.4vw,44px);
display:grid;grid-template-columns:1fr auto;gap:clamp(20px,3vw,44px);align-items:center
}
/* ---------- language switcher ---------- */
.lang{display:none;align-items:center;gap:2px}
html.js .lang{display:flex}
.lang button,.lang a{
-webkit-appearance:none;appearance:none;background:none;border:0;cursor:pointer;color:inherit;
text-decoration:none;
font-family:var(--ui);font-size:11px;font-weight:800;letter-spacing:.1em;
padding:6px 6px;opacity:.52;position:relative;line-height:1;transition:opacity .2s;
}
.lang button:hover,.lang a:hover{opacity:.9}
.lang button.on,.lang a.on{opacity:1}
.lang button.on::after,.lang a.on::after{
content:"";position:absolute;left:6px;right:6px;bottom:1px;height:2px;background:var(--red);
}
.lang.ov{margin-top:26px;gap:6px}
.lang.ov button,.lang.ov a{font-size:15px;padding:8px 10px;opacity:.55}
.lang.ov button.on,.lang.ov a.on{opacity:1}
.lang.ov button.on::after,.lang.ov a.on::after{left:10px;right:10px;height:3px}
@media (max-width:900px){
.nav-cta .lang{margin-right:2px}
.lang button,.lang a{font-size:10px;padding:6px 4px;letter-spacing:.06em}
}
@media (max-width:760px){
header#nav .brand b{display:none}
.nav-in{gap:10px}
}
/* ---------- nav ---------- */
#progress{position:fixed;left:0;top:0;height:3px;width:0%;background:var(--red);z-index:200;transition:width .08s linear}
header#nav{
position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:150;display:flex;align-items:center;
background:rgba(255,255,255,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
border-bottom:1px solid rgba(10,10,10,.12);
transition:transform .34s cubic-bezier(.4,0,.2,1),background .3s,color .3s,border-color .3s
}
header#nav.hidden{transform:translateY(-105%)}
header#nav.dark{background:rgba(10,10,10,.9);color:#fff;border-bottom-color:rgba(255,255,255,.16)}
header#nav.top{background:transparent;color:#fff;border-bottom-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.nav-in{width:min(1240px,calc(100% - 44px));margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{display:flex;align-items:center;gap:11px}
.brand img{height:38px;width:auto}
.brand b{font-family:var(--disp);font-size:16px;text-transform:uppercase;letter-spacing:.04em;line-height:1;white-space:nowrap}
nav.links{display:flex;gap:2px}
nav.links a{
position:relative;font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;padding:11px 14px
}
nav.links a::after{
content:"";position:absolute;left:14px;right:14px;bottom:6px;height:3px;background:var(--red);
transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.4,0,.2,1)
}
nav.links a:hover::after,nav.links a.active::after{transform:scaleX(1)}
.nav-cta{display:flex;align-items:center;gap:10px}
.burger{display:none;width:44px;height:44px;border:0;background:transparent;cursor:pointer;position:relative;color:inherit}
.burger span{position:absolute;left:9px;width:26px;height:3px;background:currentColor;transition:.3s cubic-bezier(.4,0,.2,1)}
.burger span:nth-child(1){top:15px}.burger span:nth-child(2){top:21px}.burger span:nth-child(3){top:27px}
body.menu-open .burger span:nth-child(1){top:21px;transform:rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){top:21px;transform:rotate(-45deg)}
#overlay{
position:fixed;inset:0;z-index:140;background:var(--ink);color:#fff;display:flex;flex-direction:column;
justify-content:center;padding:100px 26px 40px;transform:translateY(-101%);visibility:hidden;
transition:transform .5s cubic-bezier(.76,0,.24,1),visibility 0s .5s
}
body.menu-open #overlay{transform:none;visibility:visible;transition:transform .5s cubic-bezier(.76,0,.24,1),visibility 0s}
#overlay a{
font-family:var(--disp);font-size:clamp(32px,9vw,58px);text-transform:uppercase;line-height:1;
padding:14px 0;border-bottom:1px solid rgba(255,255,255,.2);
opacity:0;transform:translateY(20px);transition:opacity .35s,transform .45s,color .2s
}
#overlay a:last-child{color:var(--red);border-bottom:0}
body.menu-open #overlay a{opacity:1;transform:none}
body.menu-open #overlay a:nth-child(1){transition-delay:.14s}
body.menu-open #overlay a:nth-child(2){transition-delay:.2s}
body.menu-open #overlay a:nth-child(3){transition-delay:.26s}
body.menu-open #overlay a:nth-child(4){transition-delay:.32s}
body.menu-open #overlay a:nth-child(5){transition-delay:.38s}
/* full-bleed photo behind a section, under a heavy dark filter */
#joinus{overflow:hidden}
.sec-bg{position:absolute;inset:0;z-index:0}
.sec-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;filter:grayscale(.4) contrast(1.04)}
.sec-bg::after{
content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(10,10,10,.465) 0%,rgba(10,10,10,.39) 42%,rgba(10,10,10,.45) 100%),
linear-gradient(90deg,rgba(10,10,10,.42) 0%,rgba(10,10,10,.25) 62%,rgba(10,10,10,.35) 100%)
}
#joinus .wrap{position:relative;z-index:2}
/* the photo now reads through, so the copy carries its own contrast */
#joinus p.txt,#joinus .from p{color:#E6E6E8;text-shadow:0 2px 14px rgba(0,0,0,.92),0 0 4px rgba(0,0,0,.7)}
#joinus h2,#joinus .from b{text-shadow:0 3px 18px rgba(0,0,0,.6)}
#joinus .from li{border-top-color:rgba(255,255,255,.34)}
#joinus .from li:last-child{border-bottom-color:rgba(255,255,255,.34)}
/* ---------- interactive timeline ---------- */
.tl{margin-top:clamp(28px,3.6vw,48px);position:relative}
.tl-rail{
display:none;gap:0;align-items:flex-end;overflow-x:auto;overflow-y:hidden;
padding:0 0 4px;border-bottom:2px solid rgba(255,255,255,.26);
scrollbar-width:none;-ms-overflow-style:none;
-webkit-mask-image:linear-gradient(90deg,#000 0,#000 94%,transparent 100%);
mask-image:linear-gradient(90deg,#000 0,#000 94%,transparent 100%)
}
html.js .tl-rail{display:flex}
@media (min-width:1100px){.tl-rail{-webkit-mask-image:none;mask-image:none}}
.tl-rail::-webkit-scrollbar{display:none}
.tl-dot{
flex:1 0 auto;min-width:clamp(54px,5.2vw,78px);background:transparent;border:0;cursor:pointer;
color:#8E8E93;padding:10px 4px 0;display:flex;flex-direction:column;align-items:center;gap:9px;
transition:color .22s
}
.tl-dot .yr{font-family:var(--body);font-size:11.5px;font-weight:800;letter-spacing:.1em}
.tl-dot .pt{
width:13px;height:13px;border:3px solid currentColor;background:var(--ink);
transform:translateY(8px);transition:.25s cubic-bezier(.3,1.3,.5,1)
}
.tl-dot:hover{color:#D4D4D8}
.tl-dot.on{color:var(--red)}
.tl-dot.on .pt{background:var(--red);border-color:var(--red);transform:translateY(8px) scale(1.5)}
.tl-stage{
border:2px solid rgba(255,255,255,.26);
padding:clamp(24px,3.2vw,40px);min-height:clamp(300px,26vw,330px);
display:flex;flex-direction:column;justify-content:center
}
.tl-item+.tl-item{margin-top:clamp(22px,3vw,34px);padding-top:clamp(22px,3vw,34px);border-top:1px solid rgba(255,255,255,.2)}
html.js .tl-stage{border-top:0}
html.js .tl-item{display:none;animation:tlIn .4s cubic-bezier(.16,1,.3,1)}
html.js .tl-item.on{display:block}
html.js .tl-item+.tl-item{margin-top:0;padding-top:0;border-top:0}
@keyframes tlIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.tl-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.tl-tag{
font-size:9.5px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
background:var(--red);color:#fff;padding:6px 11px
}
.tl-date{font-family:var(--body);font-size:12.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#9A9A9E}
.tl-item h3{font-family:var(--disp);font-size:clamp(26px,4.2vw,52px);line-height:.96;text-transform:uppercase}
.tl-item p{margin-top:14px;font-size:clamp(15.5px,1.45vw,18px);line-height:1.62;color:#D4D4D8;max-width:70ch}
.tl-item .tl-src{margin-top:14px;font-size:12.5px;line-height:1.5;color:#8A8A8E;font-style:italic}
.tl-nav{display:none;align-items:center;justify-content:space-between;gap:14px;margin-top:16px}
html.js .tl-nav{display:flex}
.tl-btn{
width:52px;height:52px;border:2px solid rgba(255,255,255,.4);background:transparent;color:#fff;
cursor:pointer;font-size:19px;transition:.22s
}
.tl-btn:hover{background:var(--red);border-color:var(--red)}
.tl-btn[disabled]{opacity:.3;cursor:default}
.tl-btn[disabled]:hover{background:transparent;border-color:rgba(255,255,255,.4)}
.tl-count{font-family:var(--disp);font-size:19px;letter-spacing:.08em;color:#9A9A9E}
@media (max-width:620px){
.tl-stage{min-height:0;padding:22px 18px}
.tl-dot{min-width:62px}
}
/* ---------- campaign stickers ---------- */
.stkr{position:absolute;display:block;z-index:4;pointer-events:none;user-select:none}
.stkr img{width:100%;height:auto;display:block}
@keyframes stkbob{0%,100%{transform:rotate(var(--rot,0deg)) translateY(0)}50%{transform:rotate(var(--rot,0deg)) translateY(-12px)}}
.stkr.bob{animation:stkbob 7s ease-in-out infinite}
/* background-page stickers — declared after .stkr so the mobile rules win */
.stkr-n1{right:0;top:clamp(10px,3vw,40px);width:clamp(160px,20.5vw,308px);--rot:5deg;transform:rotate(5deg)}
.stkr-n3{right:0;top:-10px;width:clamp(130px,15vw,225px);--rot:6deg;transform:rotate(6deg)}
.stance .are{position:relative}
.stkr-greed{right:-14px;bottom:-26px;width:clamp(112px,13vw,180px);--rot:8deg;transform:rotate(8deg);z-index:5}
@media (max-width:1100px){
.stkr-n1{width:clamp(120px,17vw,190px)}
.stkr-n3{width:clamp(104px,13vw,150px)}
.stkr-greed{width:clamp(96px,12vw,140px)}
}
@media (max-width:820px){
.stkr-n1,.stkr-n3,.stkr-greed{
position:relative;right:auto;left:auto;top:auto;bottom:auto;
margin:16px 0 2px auto;animation:none
}
.stkr-n1{width:min(46%,168px)}
.stkr-n3{width:min(38%,142px)}
.stkr-greed{width:min(40%,132px);margin-top:20px}
}
.has-stkr{position:relative}
/* hero — Infantino out */
.stkr-out{right:2%;bottom:16%;width:clamp(112px,13vw,206px);--rot:-8deg;transform:rotate(-8deg)}
/* what we want — substitution board */
.stkr-board{right:0;top:-6px;width:clamp(150px,21vw,310px);--rot:4deg;transform:rotate(4deg)}
/* invitation — stadium board */
.stkr-score{right:0;top:auto;bottom:18px;width:clamp(190px,26vw,400px);--rot:-3deg;transform:rotate(-3deg)}
/* petition — captain armband */
.stkr-band{right:0;top:10px;width:clamp(160px,22vw,330px);--rot:-6deg;transform:rotate(-6deg)}
/* share — megaphone */
.stkr-mega{right:0;top:-10px;width:clamp(150px,20vw,285px);--rot:5deg;transform:rotate(5deg)}
@media (max-width:1100px){
.stkr-board,.stkr-band,.stkr-mega{width:clamp(128px,19vw,200px)}
.stkr-score{width:clamp(160px,24vw,270px)}
}
@media (max-width:820px){
.stkr-out{width:clamp(96px,20vw,128px);right:3%;bottom:auto;top:calc(var(--nav-h) + 4px)}
.stkr-board,.stkr-band,.stkr-mega{
position:relative;right:auto;top:auto;width:min(46%,180px);
margin:6px 0 8px auto;animation:none
}
.stkr-score{
position:relative;right:auto;top:auto;width:min(62%,240px);
margin:14px 0 4px auto;animation:none
}
}
/* ---------- hero ---------- */
/* align-items:flex-start, no flex-end. El hero mide 100svh como mínimo;
cuando el contenido es más bajo que la pantalla, que es lo normal en un
monitor alto, alinearlo abajo mandaba TODA la holgura arriba: en una
pantalla de 1200 px quedaban 252 px entre la barra y el escudo. Alineado
arriba, esa holgura cae debajo, donde solo se ve la fotografía. */
#hero{
min-height:100svh;padding:0;display:flex;align-items:flex-start;
background:var(--ink);position:relative;overflow:hidden
}
#hero .bg{position:absolute;inset:0}
#hero .bg img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
#hero .bg::after{
content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(10,10,10,.78) 0%,rgba(10,10,10,.42) 30%,rgba(10,10,10,.86) 76%,rgba(10,10,10,.97) 100%),linear-gradient(90deg,rgba(10,10,10,.74) 0%,rgba(10,10,10,.34) 52%,rgba(10,10,10,.05) 100%)
}
/* El alto de la barra fija ya lo descuenta #hero más abajo, con su propio
padding-top. Aquí estaba otra vez, así que se reservaban 74 px de más y el
hero arrancaba muy hundido: entre el borde de la barra y el escudo había
casi 180 px. Quitada la duplicación, queda solo el aire de respiro. */
.hero-in{position:relative;z-index:2;width:100%;padding:clamp(8px,1.2vh,18px) 0 clamp(26px,3.6vw,48px);color:#fff}
.hero-emblem{width:min(62vw,300px);margin-bottom:clamp(10px,1.4vw,18px);opacity:0;animation:pop .8s cubic-bezier(.2,1.25,.4,1) .15s forwards}
@keyframes pop{0%{opacity:0;transform:scale(1.16) translateY(10px)}100%{opacity:1;transform:none}}
h1{font-size:clamp(52px,11.6vw,164px);line-height:.8}
h1 .ln{display:block;overflow:hidden}
h1 .ln>span{display:block;transform:translateY(104%);animation:rise .95s cubic-bezier(.16,1,.3,1) forwards}
h1 .ln:nth-child(1)>span{animation-delay:.1s}
h1 .ln:nth-child(2)>span{animation-delay:.2s}
@keyframes rise{to{transform:none}}
h1 .red{color:var(--red)}
.hero-sub{
font-family:var(--disp);text-transform:uppercase;font-size:clamp(20px,3.2vw,40px);
line-height:1;margin-top:12px;opacity:0;animation:fade .7s ease .7s forwards
}
.hero-say{margin-top:16px;max-width:40ch;font-size:clamp(16.5px,1.6vw,20px);font-weight:600;line-height:1.42;color:#EDEDED;opacity:0;animation:fade .7s ease .85s forwards}
@keyframes fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* ---------- ticker ---------- */
.ticker{background:var(--red);color:#fff;padding:13px 0;overflow:hidden}
.ticker .track{display:flex;width:max-content;animation:slide 30s linear infinite}
.ticker:hover .track{animation-play-state:paused}
.ticker i{
font-style:normal;font-family:var(--disp);font-size:clamp(19px,2.5vw,32px);text-transform:uppercase;
padding-inline:18px;display:flex;align-items:center;gap:18px;white-space:nowrap
}
.ticker i::after{content:"";width:10px;height:10px;background:var(--ink);flex:none;border-radius:50%}
@keyframes slide{to{transform:translateX(-50%)}}
.from{list-style:none;margin-top:clamp(26px,3.4vw,46px)}
.from li{
border-top:1px solid rgba(255,255,255,.22);padding:clamp(17px,2.3vw,28px) 0;
display:grid;grid-template-columns:clamp(16px,2vw,26px) minmax(0,1fr) minmax(0,.88fr);
gap:clamp(14px,2.4vw,38px);align-items:start
}
.from p{font-size:15.5px;line-height:1.55;color:#B9B9BD;max-width:46ch;padding-top:clamp(4px,.7vw,10px)}
.from li.hot p{color:#D6D6DA}
.from li:last-child{border-bottom:1px solid rgba(255,255,255,.22)}
.from li::before{
content:"";width:clamp(16px,2vw,26px);height:4px;background:var(--red);flex:none;
margin-top:clamp(18px,2.4vw,34px);transition:width .35s cubic-bezier(.16,1,.3,1)
}
.from li:hover::before{width:clamp(30px,4vw,54px)}
.from b{
font-family:var(--disp);font-weight:400;text-transform:uppercase;
font-size:clamp(27px,5.2vw,72px);line-height:.98;letter-spacing:.005em
}
.from li.hot b{color:var(--red)}
/* ---------- story blocks ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,5vw,72px);align-items:center}
.split.tight{align-items:start}
.figure{position:relative;overflow:hidden;background:var(--ink)}
.figure img{width:100%;height:100%;object-fit:cover}
.figure figcaption{
position:absolute;left:0;bottom:0;background:var(--ink);color:#fff;padding:9px 13px;
font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase
}
.stance{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.2);margin-top:clamp(32px,4.2vw,58px)}
.stance>div{background:#141416;padding:clamp(22px,2.8vw,36px)}
.stance h4{font-family:var(--disp);font-size:clamp(18px,2.1vw,26px);text-transform:uppercase;line-height:1;margin-bottom:18px}
.stance .not h4{color:#8E8E93}
.stance .are h4{color:var(--red)}
.stance ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.stance li{display:flex;gap:12px;font-size:16px;line-height:1.5;color:#D2D2D4;align-items:baseline}
.stance li::before{flex:none;margin-top:2px;font-weight:800;font-size:15px}
.stance .not li{color:#9A9A9E}
.stance .not li::before{content:"—";color:#6B6B6F}
.stance .are li::before{content:"■";color:var(--red);font-size:12px;margin-top:5px}
.stance .are li b{color:#fff}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.2);margin-top:clamp(30px,4vw,52px)}
.fact{background:var(--ink);padding:26px 22px}
.fact .n{font-family:var(--disp);font-size:clamp(36px,5vw,62px);line-height:.88;color:var(--lime)}
.fact:nth-child(2) .n{color:var(--amber)}
.fact:nth-child(3) .n{color:var(--red)}
.fact .t{margin-top:10px;font-size:13.5px;line-height:1.5;color:#BFBFC2}
.pull{
margin-top:clamp(30px,4vw,54px);padding:clamp(26px,3.4vw,44px);background:var(--red);color:#fff
}
.pull b{font-family:var(--disp);font-size:clamp(24px,3.8vw,50px);line-height:1.02;text-transform:uppercase;display:block;max-width:26ch}
.pull p{margin-top:14px;font-size:14px;letter-spacing:.03em;opacity:.92;max-width:62ch}
/* ---------- demands accordion ---------- */
.dm{border-top:3px solid var(--ink)}
.dm:last-child{border-bottom:3px solid var(--ink)}
.dm summary{
cursor:pointer;list-style:none;display:grid;grid-template-columns:auto 1fr auto;gap:clamp(14px,3vw,38px);
align-items:center;padding:clamp(22px,3vw,38px) 0;transition:color .2s
}
.dm summary::-webkit-details-marker{display:none}
.dm .no{font-family:var(--disp);font-size:clamp(24px,3vw,40px);line-height:1;color:var(--red)}
.dm .ttl{font-family:var(--disp);font-size:clamp(25px,4.4vw,60px);line-height:.94;text-transform:uppercase}
.dm .plus{
width:clamp(40px,4.4vw,58px);height:clamp(40px,4.4vw,58px);border:3px solid var(--ink);flex:none;
position:relative;transition:background .22s,border-color .22s,transform .3s
}
.dm .plus::before,.dm .plus::after{
content:"";position:absolute;inset:50% 22% auto 22%;height:3px;background:var(--ink);transform:translateY(-50%);transition:.28s
}
.dm .plus::after{transform:translateY(-50%) rotate(90deg)}
.dm[open] .plus{background:var(--red);border-color:var(--red);transform:rotate(180deg)}
.dm[open] .plus::before,.dm[open] .plus::after{background:#fff}
.dm[open] .plus::after{transform:translateY(-50%) rotate(0deg)}
.dm summary:hover .ttl{color:var(--red)}
.dm .bd{padding:0 0 clamp(28px,3.6vw,48px);display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(22px,3.4vw,48px);align-items:start}
.dm .bd .one{font-size:clamp(18px,1.9vw,22px);font-weight:600;line-height:1.42;margin-bottom:16px}
.dm .bd ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.dm .bd li{display:flex;gap:12px;font-size:16px;line-height:1.58;color:#27272A}
.dm .bd li::before{content:"";width:11px;height:11px;background:var(--red);flex:none;margin-top:7px}
.dm .art{position:relative}
.dm .art>img{width:100%}
.dm .artwrap{position:relative}
.dm .artwrap .ph{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--ink)}
.dm .artwrap .ov{position:absolute;right:-14px;bottom:-18px;width:clamp(110px,15vw,190px)}
/* ---------- deadline band ---------- */
.band-full{position:relative;min-height:min(74vh,620px);display:flex;align-items:center;overflow:hidden;padding:clamp(36px,4vw,56px) 0}
.band-full .bg{position:absolute;inset:0}
.band-full .bg img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.band-full .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,10,.94) 0%,rgba(10,10,10,.8) 42%,rgba(10,10,10,.38) 100%)}
.band-full .in{position:relative;z-index:2;color:#fff}
.band-full h2{font-size:clamp(40px,8.4vw,112px);line-height:.92}
.band-full p{margin-top:18px;max-width:44ch;font-size:clamp(17px,1.8vw,21px);line-height:1.5;color:#E3E3E5}
.band-full .cta{margin-top:clamp(22px,3vw,34px);display:flex;gap:12px;flex-wrap:wrap}
.dm .band{display:inline-block;margin-bottom:14px;padding:7px 12px;font-size:10px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:#fff;background:var(--green)}
.dm.a .band{background:var(--amber);color:var(--ink)}
.dm.r .band{background:var(--red)}
.dm.g .no{color:var(--green)}
.dm.a .no{color:#C98A00}
/* ---------- petition ---------- */
/* La sección de firma era negra y se pidió un fondo más vivo. Se usa el
ámbar de la paleta y no el lima, que es el de Difundir: al mover el
recuento las dos quedaron contiguas, y repetir color las fundiría en una.
El negro sobre ámbar da 9,5:1 de contraste, de sobra para texto grande y
pequeño, y los dos cuadros blancos siguen destacando encima. */
#petition{background:var(--green);color:var(--ink);overflow:hidden;position:relative}
.pet-head{max-width:900px;margin:0 0 clamp(32px,4.2vw,56px)}
.pet-head h2{font-size:clamp(42px,9vw,120px);line-height:.9}
/* El gris anterior (#2A2A2D) daba 4.48:1 sobre el verde de la sección,
dos centésimas por debajo del mínimo para texto pequeño. Este da 5.4:1. */
.pet-head p{margin:18px 0 0;max-width:52ch;font-size:clamp(17px,1.8vw,21px);line-height:1.5;color:#1A1A1C}
/* Dos tercios para el texto de la petición y uno para el formulario. */
.pet-grid{display:grid;grid-template-columns:2fr 1fr;gap:clamp(22px,3.4vw,46px);align-items:start}
.pet-num{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(255,255,255,.2);margin-bottom:clamp(24px,3vw,40px)}
.pet-num div{background:#141416;padding:clamp(24px,2.6vw,34px) 18px;text-align:center}
.pet-num .n{font-family:var(--disp);font-size:clamp(36px,5vw,64px);line-height:.9;color:#fff}
.pet-num .n.red{color:var(--red)}
.pet-num .n.lime{color:var(--lime)}
.pet-num>div>span{display:block;font-size:clamp(12px,1.05vw,15px);font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#B4B4B8;margin-top:12px}
.letter{background:#fff;color:var(--ink);padding:clamp(24px,3.2vw,42px);position:relative}
.letter .flag{position:absolute;left:0;right:0;top:0;height:8px;background:var(--red)}
.letter .ph{display:inline-block;background:var(--amber);font-size:9.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;padding:6px 10px;margin:6px 0 16px}
.letter h4{font-family:var(--disp);font-size:clamp(18px,2.1vw,25px);text-transform:uppercase;line-height:1.08;margin-bottom:14px}
.letter p{font-size:15.5px;line-height:1.7;margin-bottom:13px}
.letter-asks{list-style:none;counter-reset:ask;margin:4px 0 16px}
.letter-asks li{
counter-increment:ask;position:relative;padding-left:38px;margin-bottom:12px;
font-size:15.5px;line-height:1.7
}
.letter-asks li::before{
content:counter(ask);position:absolute;left:0;top:2px;
width:26px;height:26px;background:var(--red);color:#fff;
font-family:var(--disp);font-size:15px;display:grid;place-items:center;line-height:1
}
.letter .final{font-family:var(--disp);font-size:clamp(21px,2.8vw,34px);color:var(--red);text-transform:uppercase;line-height:1;margin:18px 0 6px}
.letter details{margin-top:8px}
.letter summary{cursor:pointer;list-style:none;font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--red);display:inline-flex;gap:8px;align-items:center}
.letter summary::-webkit-details-marker{display:none}
.letter summary::after{content:"+";font-family:var(--disp);font-size:17px}
.letter details[open] summary::after{content:"–"}
.letter .sig{margin-top:18px;padding-top:16px;border-top:2px solid var(--ink)}
.letter .sig .who{font-family:var(--disp);font-size:20px;text-transform:uppercase;display:block}
.form-card{background:#fff;color:var(--ink);padding:clamp(24px,3vw,38px);position:sticky;top:calc(var(--nav-h) + 18px)}
/* El contador de firmas. Era una cifra roja sobre blanco con una regla
debajo y se perdía dentro de la tarjeta.
En pantallas anchas pero de poca altura la franja se encogía tanto que
quedaba como una tira, y el rótulo de 12px desaparecía al lado de la
cifra. Se subió el suelo de los tres escalones de altura y el rótulo
pasó a 17px. De paso, la franja más alta empuja el titular hacia abajo
y el adhesivo de Infantino deja de pisarlo. Ahora es una franja roja que
sangra hasta los bordes y es lo primero que se ve al llegar al formulario.
El margen negativo usa el mismo clamp que el relleno de .form-card: si se
cambia uno, hay que cambiar el otro. */
.sigcount{
display:flex;align-items:center;gap:clamp(10px,1.4vw,16px);
margin:calc(clamp(24px,3vw,38px) * -1) calc(clamp(24px,3vw,38px) * -1) clamp(18px,2.2vw,26px);
padding:clamp(16px,2vw,26px) clamp(24px,3vw,38px);
background:var(--red);
}
.sigcount .n{
font-family:var(--disp);font-size:clamp(50px,7.4vw,86px);line-height:.8;
color:#fff;font-variant-numeric:tabular-nums
}
.sigcount .l{
font-size:clamp(13px,1.15vw,17px);font-weight:800;letter-spacing:.16em;
text-transform:uppercase;line-height:1.35;color:#fff
}
.demo{font-size:11.5px;line-height:1.5;color:var(--grey);margin:-6px 0 18px}
.field{margin-bottom:14px}
.field label{display:block;font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;margin-bottom:7px}
.field input,.field select{
width:100%;padding:15px;border:2px solid var(--ink);background:#fff;font-family:var(--body);
font-size:16px;color:var(--ink);transition:border-color .2s,box-shadow .2s
}
.field input::placeholder{color:#9A9A9A}
.field input:focus,.field select:focus{outline:0;border-color:var(--red);box-shadow:0 0 0 3px rgba(231,29,54,.2)}
.field select{appearance:none;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 15px center}
.field .err{display:none;color:var(--red-dk);font-size:11.5px;font-weight:700;margin-top:6px}
.field.bad input,.field.bad select{border-color:var(--red)}
.field.bad .err{display:block}
.consent{display:flex;gap:12px;align-items:flex-start;margin:4px 0 18px;background:var(--paper-2);border-left:5px solid var(--red);padding:14px}
.consent input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--red)}
.consent span{font-size:12.8px;line-height:1.52}
.privacy{font-size:11px;color:var(--grey);margin-top:13px;text-align:center;line-height:1.5}
.success{display:none;text-align:center}
.success.on{display:block;animation:fade .5s ease}
.success .tick{width:68px;height:68px;background:var(--red);color:#fff;display:grid;place-items:center;font-size:33px;margin:0 auto 16px}
.success h3{font-size:clamp(26px,3.6vw,40px);line-height:1}
.success p{font-size:14.5px;line-height:1.6;color:#3A3A3A;margin-top:12px}
/* ---------- share ---------- */
#share{background:var(--amber);color:var(--ink)}
.sh-head{max-width:860px}
.sh-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-top:clamp(26px,3.4vw,44px)}
.sh-btn{
display:flex;flex-direction:column;gap:8px;justify-content:space-between;min-height:132px;
background:var(--ink);color:#fff;padding:18px;cursor:pointer;border:0;text-align:left;
transition:transform .18s,background .2s
}
.sh-btn:hover{transform:translateY(-4px);background:var(--red)}
.sh-btn em{font-style:normal;font-size:23px;line-height:1}
.sh-btn b{font-family:var(--disp);font-size:clamp(19px,2.1vw,25px);text-transform:uppercase;line-height:1}
.sh-btn span{font-size:12px;line-height:1.4;color:rgba(255,255,255,.72)}
.sh-btn:hover span{color:rgba(255,255,255,.9)}
/* Las cuatro redes toman su color de marca al pasar el cursor; Correo y
Copiar enlace se quedan con el rojo de la campaña que hay más arriba.
En reposo las seis siguen negras e iguales.
Sobre fondo de color, la línea pequeña de descripción pasa a blanco puro
en vez del 90%: es la que peor lo tiene de contraste y ese punto se nota.
Contrastes del blanco sobre cada fondo: X 6,1 y Facebook 5,8 cumplen de
sobra; WhatsApp 4,1 y el degradado de Instagram entre 2,5 y 6,9 se quedan
por debajo de 4,5 en la línea pequeña, igual que ya ocurría con el rojo de
la campaña (3,9). El titular, que es grande y en negrita, cumple en todas.
Si se quiere cumplir el umbral estricto, los sustitutos son #075E54 para
WhatsApp y recortar el degradado de Instagram a su mitad morada. */
#shWa:hover{background:#128C7E} /* verde oscuro de WhatsApp */
#shX:hover{background:#536471} /* gris de X; en reposo ya es casi negro */
#shFb:hover{background:#0B5ED7} /* azul de Facebook, un punto más oscuro */
#shIg:hover{background:linear-gradient(120deg,#F58529,#DD2A7B 52%,#8134AF)}
#shWa:hover span,#shX:hover span,#shFb:hover span,#shIg:hover span{color:#fff}
/* ---------- join the campaign ---------- */
.join-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,64px);align-items:start}
.join-who{
list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px;
margin-top:clamp(24px,3.2vw,38px)
}
/* Estas cuatro cajas no llevan a ninguna parte: son una enumeración de a
quién buscamos. Antes se levantaban y se invertían al pasar el cursor, un
gesto reservado a lo que se puede pulsar, así que la gente las pulsaba y
no pasaba nada. Sin movimiento ni cambio de color, se leen como lo que
son. Si algún día llevan a algún sitio, lo correcto es envolver el
contenido en un y devolverles el hover. */
.join-who li{
background:#fff;border:3px solid var(--ink);padding:clamp(16px,1.9vw,22px);
display:flex;flex-direction:column;gap:10px
}
.join-who .n{font-family:var(--body);font-size:10.5px;font-weight:800;letter-spacing:.24em;color:var(--red)}
.join-who b{
font-family:var(--disp);font-weight:400;text-transform:uppercase;
font-size:clamp(19px,2.1vw,28px);line-height:.98;letter-spacing:.01em
}
.join-form{background:#fff;border:3px solid var(--ink);padding:clamp(24px,3vw,38px);position:relative}
.join-form h3{font-size:clamp(22px,2.6vw,30px)}
.join-form .demo{max-width:74%}
.stkr-ticket{right:-26px;top:-102px;width:clamp(86px,8.6vw,118px);--rot:8deg;transform:rotate(8deg);z-index:6}
.stkr-hat{position:relative;left:auto;bottom:auto;display:block;width:clamp(180px,22vw,310px);margin:clamp(24px,3.2vw,38px) 0 0 auto;--rot:-6deg;transform:rotate(-6deg)}
@media (max-width:980px){
.join-grid{grid-template-columns:1fr}
.stkr-hat{width:min(52%,210px);margin:22px 0 0 auto}
/* no room to pin it once the form is full width — let it sit in the card */
.stkr-ticket{
position:relative;right:auto;top:auto;display:block;
width:min(28%,104px);margin:0 0 6px auto
}
}
@media (max-width:560px){
.join-who{grid-template-columns:1fr}
.join-who li{flex-direction:row;align-items:baseline;gap:14px}
.join-who b br{display:none}
}
/* ---------- ig modal ---------- */
#igModal{position:fixed;inset:0;z-index:400;display:none;align-items:center;justify-content:center;background:rgba(6,6,8,.9);padding:20px}
#igModal.on{display:flex;animation:fade .3s ease}
#igModal .box{background:var(--ink);color:#fff;max-width:min(94vw,400px);width:100%;max-height:92vh;overflow:auto;padding:20px;text-align:center}
#igModal img{width:100%;max-height:54vh;object-fit:contain;background:#fff;margin-bottom:14px}
#igModal h4{font-size:21px}
#igModal p{font-size:12.5px;color:#A9A9AD;margin:8px 0 16px;line-height:1.5}
#igModal .acts{display:flex;flex-direction:column;gap:9px}
/* ---------- footer ---------- */
footer{background:var(--ink);color:#fff;padding:56px 0 34px}
.f-top{display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap;align-items:center}
.f-logo{width:min(260px,58vw)}
.f-links{display:flex;gap:20px;flex-wrap:wrap;font-size:11.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase}
.f-links a{opacity:.7;transition:.2s}
.f-links a:hover{opacity:1;color:var(--red)}
.f-scarf{width:min(360px,72vw)}
.f-note{margin-top:24px;padding-top:18px;border-top:1px solid rgba(255,255,255,.16);font-size:11.5px;color:#8A8A8E;display:flex;gap:14px;justify-content:space-between;flex-wrap:wrap}
.toast{
position:fixed;left:50%;bottom:24px;transform:translate(-50%,170px);z-index:500;background:var(--ink);color:#fff;
padding:15px 22px;font-size:12.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
border:2px solid var(--lime);transition:transform .4s cubic-bezier(.3,1.3,.5,1)
}
.toast.on{transform:translate(-50%,0)}
/* ---------- responsive ---------- */
@media (max-width:980px){
nav.links{display:none}
.nav-cta .btn{display:none}
.burger{display:block}
.split{grid-template-columns:1fr;gap:26px}
.dm .bd{grid-template-columns:1fr}
.dm .art{order:-1;max-width:360px}
.dm .artwrap .ov{right:-6px;bottom:-10px;width:clamp(96px,26vw,140px)}
.pet-grid{grid-template-columns:1fr}
/* En una sola columna, la carta mide más de cuatro mil píxeles y dejaba el
formulario cinco pantallas más abajo: quien llegaba desde el correo tenía
que recorrerla entera para poder firmar. La caja de firma sube al primer
lugar y la carta queda debajo, para quien quiera leerla. */
.pet-grid .form-card{order:-1}
.form-card{position:relative;top:0}
.facts{grid-template-columns:1fr}
.stance{grid-template-columns:1fr}
.news-cta{grid-template-columns:1fr}
.from li{grid-template-columns:1fr;gap:10px}
.from li::before{align-self:start;width:36px}
}
@media (max-width:620px){
.wrap,.narrow{width:calc(100% - 32px)}
.pet-num{grid-template-columns:1fr}
.dm summary{grid-template-columns:1fr auto;gap:12px}
.dm .no{grid-column:1;font-size:18px}
.dm .ttl{grid-column:1}
.dm .plus{grid-row:1 / span 2;grid-column:2;align-self:center}
}
@media (prefers-reduced-motion:reduce){
*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
h1 .ln>span{transform:none}
.rv{opacity:1!important;transform:none!important}
.hero-emblem,.hero-sub,.hero-say,}
/* ---------- honeypot: invisible para humanos, presente para bots ---------- */
.hp{position:absolute!important;left:-9999px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important}
.grecaptcha-badge{visibility:hidden}
/* ================================================================
Nombre propio de la campaña en cursiva, solo en cuerpo de texto.
El logotipo del encabezado, la marca del menú y la firma quedan
en redonda: un logotipo no se italiza.
================================================================ */
.sf{font-style:italic}
/* ================================================================
Las imágenes decorativas nunca se superponen al texto
----------------------------------------------------------------
Cada sticker reserva una columna del ancho que ocupa, en el
elemento que realmente le sirve de ancla. Eso importa: un
elemento con posición absoluta se sitúa respecto al ancestro
posicionado más cercano, que no siempre es el contenedor visible.
Aquí son tres casos distintos:
· .wrap.has-stkr → bloque, sin relleno propio
· .stance .are → celda de rejilla con relleno propio
· .join-form → caja con borde y relleno propio
Por eso la reserva suma dos partes: el relleno que el elemento ya
tenía (--stkr-pad) y el ancho del sticker más su margen de
respeto (--stkr-res). Cuando el sticker pasa a flujo normal,
--stkr-res vale cero y el relleno vuelve a ser el original.
================================================================ */
.has-stkr[class*="res-"],
.stance .are.res-greed,
.join-form.res-ticket{
padding-right:calc(var(--stkr-pad, 0px) + var(--stkr-res, 0px));
}
/* relleno propio de los elementos que ya lo tenían */
.stance .are.res-greed { --stkr-pad:clamp(22px,2.8vw,36px) }
.join-form.res-ticket { --stkr-pad:clamp(24px,3vw,38px) }
/* ancho del sticker + margen de respeto */
.res-out { --stkr-res:calc(clamp(112px,13vw,206px) + 2% + clamp(10px,1.4vw,22px)) }
.res-score { --stkr-res:calc(clamp(190px,26vw,400px) + clamp(10px,1.4vw,22px)) }
.res-board { --stkr-res:calc(clamp(150px,21vw,310px) + clamp(10px,1.4vw,22px)) }
.res-band { --stkr-res:calc(clamp(160px,22vw,330px) + clamp(10px,1.4vw,22px)) }
.res-mega { --stkr-res:calc(clamp(150px,20vw,285px) + clamp(10px,1.4vw,22px)) }
.res-n1 { --stkr-res:calc(clamp(160px,20.5vw,308px) + clamp(10px,1.4vw,22px)) }
.res-n3 { --stkr-res:calc(clamp(130px,15vw,225px) + clamp(10px,1.4vw,22px)) }
.res-greed { --stkr-res:calc(clamp(112px,13vw,180px) + clamp(10px,1.4vw,22px)) }
.res-ticket { --stkr-res:calc(clamp(86px,8.6vw,118px) + clamp(10px,1.4vw,22px)) }
@media (max-width:1100px){
.res-n1 { --stkr-res:calc(clamp(120px,17vw,190px) + clamp(10px,1.4vw,22px)) }
.res-n3 { --stkr-res:calc(clamp(104px,13vw,150px) + clamp(10px,1.4vw,22px)) }
.res-greed { --stkr-res:calc(clamp(96px,12vw,140px) + clamp(10px,1.4vw,22px)) }
.res-board,
.res-band,
.res-mega { --stkr-res:calc(clamp(128px,19vw,200px) + clamp(10px,1.4vw,22px)) }
.res-score { --stkr-res:calc(clamp(160px,24vw,270px) + clamp(10px,1.4vw,22px)) }
}
/* por debajo de estos anchos el sticker pasa a flujo normal: sin reserva */
@media (max-width:980px){ .res-ticket{ --stkr-res:0px } }
@media (max-width:820px){
.res-score,.res-board,.res-band,
.res-mega,.res-n1,.res-n3,.res-greed{ --stkr-res:0px }
.res-out{ --stkr-res:calc(clamp(96px,20vw,128px) + 3% + clamp(10px,1.4vw,22px)) }
}
/* ningún sticker sobresale de su propio contenedor */
.stkr.stkr-n3,
.stkr.stkr-board,
.stkr.stkr-mega,
.stkr.stkr-ticket { top:0 }
.stkr.stkr-greed { right:0; bottom:0 }
.stkr.stkr-ticket { right:0 }
@media (max-width:980px){ .stkr.stkr-ticket{ top:auto; right:auto } }
@media (max-width:820px){
.stkr.stkr-n3,.stkr.stkr-board,.stkr.stkr-mega{ top:auto }
.stkr.stkr-greed{ right:auto; bottom:auto }
}
/* El nombre traducido es más largo que "Save Football" y la marca del
encabezado no admite salto de línea. Se reduce en pantallas estrechas
para que no desborde ni empuje al botón del menú. */
@media (max-width:560px){
.brand b{font-size:14px}
.brand img{height:32px}
}
@media (max-width:380px){
.brand b{font-size:12.5px;letter-spacing:.02em}
}
/* ================================================================
Acentos en el titular
----------------------------------------------------------------
Dos cosas distintas hacían falta:
1. overflow:hidden recortaba la tilde. Se amplía la caja de
recorte hacia arriba y se compensa con margen negativo, de
modo que ni el texto ni el interlineado se mueven.
2. Con line-height:.8 la tilde, ya visible, invadía la línea de
encima. Se añade holgura SOLO en los idiomas cuyo titular
lleva acentos altos, para no tocar el resto.
================================================================ */
/* Medido sobre la propia fuente (Anton, 2048 upm):
· la tilde de la Ú llega a 1,101 em sobre la línea base
· con line-height:.8 la caja de línea acaba a 0,824 em
→ desborda 0,277 em por arriba, y cruza 0,301 em la línea
base superior, que es donde se apoyan las mayúsculas de
la línea de encima.
Por eso hacen falta dos cosas, no una:
1. ampliar la caja de recorte 0,32 em (> 0,277)
2. separar las líneas 0,32 em más en español (> 0,301),
lo que deja la distancia entre bases en 1,12 em */
/* (sin ampliación global: el recorte superior es intencional) */
/* El margen negativo de arriba se anula en la segunda línea: eso
son justo los .32em de holgura. Solo en español, que es el único
idioma cuyo titular lleva una mayúscula acentuada. */
html[lang="es"] h1 .ln + .ln{padding-top:.36em;margin-top:0}
/* ================================================================
Móvil: ninguna imagen decorativa flota
----------------------------------------------------------------
Por debajo de 820px no hay margen lateral donde reservar una
columna, así que en vez de calcular huecos se elimina el
problema: todos los stickers pasan a formar parte del flujo.
Conservan su rotación, pero ya no pueden solaparse con nada
porque ocupan su propio espacio.
================================================================ */
@media (max-width:820px){
.stkr{
position:static!important;
display:block;
width:min(46%,180px);
margin:16px 0 8px auto;
animation:none;
transform:rotate(var(--rot,0deg));
}
.stkr-score{width:min(62%,240px)}
.stkr-ticket{width:min(30%,110px);margin:0 0 10px auto}
.stkr-hat{width:min(52%,210px)}
/* sin sticker flotante no hace falta reservar nada */
.res-out,.res-score,.res-board,.res-band,
.res-mega,.res-n1,.res-n3,.res-greed,.res-ticket{--stkr-res:0px}
}
/* ================================================================
Reservas para cuando sí flotan (821px en adelante)
================================================================ */
.has-stkr[class*="res-"],
.stance .are.res-greed,
.join-form.res-ticket{
padding-right:calc(var(--stkr-pad, 0px) + var(--stkr-res, 0px));
}
.stance .are.res-greed{--stkr-pad:clamp(22px,2.8vw,36px)}
.join-form.res-ticket {--stkr-pad:clamp(24px,3vw,38px)}
.res-out { --stkr-res:calc(clamp(112px,13vw,206px) + 2% + clamp(10px,1.4vw,22px)) }
.res-score { --stkr-res:calc(clamp(190px,26vw,400px) + clamp(10px,1.4vw,22px)) }
.res-board { --stkr-res:calc(clamp(150px,21vw,310px) + clamp(10px,1.4vw,22px)) }
.res-band { --stkr-res:calc(clamp(160px,22vw,330px) + clamp(10px,1.4vw,22px)) }
.res-mega { --stkr-res:calc(clamp(150px,20vw,285px) + clamp(10px,1.4vw,22px)) }
.res-n1 { --stkr-res:calc(clamp(160px,20.5vw,308px) + clamp(10px,1.4vw,22px)) }
.res-n3 { --stkr-res:calc(clamp(130px,15vw,225px) + clamp(10px,1.4vw,22px)) }
.res-greed { --stkr-res:calc(clamp(112px,13vw,180px) + clamp(10px,1.4vw,22px)) }
.res-ticket { --stkr-res:calc(clamp(86px,8.6vw,118px) + clamp(10px,1.4vw,22px)) }
@media (max-width:1100px){
.res-n1 { --stkr-res:calc(clamp(120px,17vw,190px) + clamp(10px,1.4vw,22px)) }
.res-n3 { --stkr-res:calc(clamp(104px,13vw,150px) + clamp(10px,1.4vw,22px)) }
.res-greed { --stkr-res:calc(clamp(96px,12vw,140px) + clamp(10px,1.4vw,22px)) }
.res-board,.res-band,.res-mega{ --stkr-res:calc(clamp(128px,19vw,200px) + clamp(10px,1.4vw,22px)) }
.res-score { --stkr-res:calc(clamp(160px,24vw,270px) + clamp(10px,1.4vw,22px)) }
}
@media (max-width:980px){ .res-ticket{ --stkr-res:0px } }
/* Por debajo de 821 px los stickers entran en el flujo normal y ya no hay
nada que esquivar. Esta anulación existía más arriba en el archivo, pero
el bloque de reservas de aquí la pisaba por ir después: el resultado era
una franja muerta a la derecha en el móvil, 138 px en "Share petition" y
parecida en las secciones de Learn more. En el móvil ninguno flota
(.stkr lleva position:static!important), así que ninguno reserva. */
@media (max-width:820px){
.res-out,.res-score,.res-board,.res-band,
.res-mega,.res-n1,.res-n3,.res-greed{ --stkr-res:0px }
}
/* ningún sticker sobresale de su contenedor mientras flota */
@media (min-width:821px){
.stkr.stkr-n3,.stkr.stkr-board,.stkr.stkr-mega,.stkr.stkr-ticket{top:0}
.stkr.stkr-greed{right:0;bottom:0}
.stkr.stkr-ticket{right:0}
}
/* la marca del encabezado con el nombre traducido, más largo */
@media (max-width:560px){ .brand b{font-size:14px} .brand img{height:32px} }
@media (max-width:380px){ .brand b{font-size:12.5px;letter-spacing:.02em} }
/* ================================================================
Kit de campaña
----------------------------------------------------------------
La sección va sobre el blanco de la página, igual que "What we
want", así que el texto usa los colores normales del sitio: p.txt
ya resuelve a #27272A y no hace falta forzar nada.
================================================================ */
.kit-head{max-width:60ch}
.kit-grid{
margin-top:clamp(32px,4vw,56px);
display:grid;
grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
gap:clamp(16px,2vw,26px);
}
.kit-card{
display:flex;
flex-direction:column;
background:#fff;
border:2px solid var(--ink);
padding:14px 14px 16px;
}
.kit-shot{
/* el damero delata el fondo transparente sin necesidad de explicarlo */
background-color:#F4F4F5;
background-image:
linear-gradient(45deg,#E4E4E7 25%,transparent 25%,transparent 75%,#E4E4E7 75%),
linear-gradient(45deg,#E4E4E7 25%,transparent 25%,transparent 75%,#E4E4E7 75%);
background-size:16px 16px;
background-position:0 0,8px 8px;
aspect-ratio:4/3;
display:flex;
align-items:center;
justify-content:center;
padding:12px;
margin-bottom:12px;
}
.kit-shot img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.kit-name{
font-family:var(--disp);
font-size:clamp(15px,1.5vw,18px);
text-transform:uppercase;
line-height:1.05;
color:var(--ink);
}
.kit-meta{
margin-top:5px;
font-size:11px;
letter-spacing:.06em;
text-transform:uppercase;
color:#6B6B70; /* 5,9:1 sobre blanco */
margin-bottom:auto; /* alinea el botón al fondo de todas las tarjetas */
padding-bottom:12px;
}
.kit-dl{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
padding:10px 14px;
background:var(--red);
color:#fff;
font-weight:800;
font-size:12px;
letter-spacing:.12em;
text-transform:uppercase;
text-decoration:none;
transition:background .18s,transform .18s;
}
.kit-dl:hover{background:var(--ink)}
.kit-dl:active{transform:translateY(1px)}
.kit-dl:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
@media (max-width:560px){
/* minmax(0,1fr) y no 1fr: el mínimo automático de una columna es el ancho
del contenido más ancho que lleve dentro, así que con etiquetas largas
(se veía en francés) la rejilla crecía más que su contenedor y la página
se desbordaba 12px a la derecha. */
.kit-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.kit-card{padding:10px 10px 12px}
.kit-meta{font-size:10px}
}
/* ================================================================
Envío de obra gráfica al final del kit
================================================================ */
.kit-send{
margin-top:clamp(44px,5.5vw,76px);
padding-top:clamp(34px,4vw,54px);
border-top:2px solid var(--ink);
display:grid;
grid-template-columns:1fr 1fr;
gap:clamp(26px,4vw,64px);
align-items:start;
}
.ks-head{max-width:46ch}
.ks-form{display:flex;flex-direction:column;gap:14px}
.ks-check{margin-top:2px}
.ks-send{margin-top:6px;width:100%}
/* El botón nativo de archivo es feo e inconsistente entre navegadores,
pero sustituirlo por uno propio rompe la accesibilidad de teclado.
Se estiliza el que trae el navegador. */
.ks-form input[type=file]{
width:100%;
padding:11px 12px;
background:#fff;
border:2px solid var(--ink);
font:inherit;
font-size:14px;
color:var(--ink);
cursor:pointer;
}
.ks-form input[type=file]::file-selector-button{
margin-right:12px;
padding:7px 13px;
border:0;
background:var(--ink);
color:#fff;
font:inherit;
font-size:12px;
font-weight:800;
letter-spacing:.1em;
text-transform:uppercase;
cursor:pointer;
}
.ks-form input[type=file]:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.ks-file{
margin-top:7px;
font-size:12px;
letter-spacing:.04em;
color:#6B6B70;
min-height:1em;
}
.ks-file.bad-txt{color:var(--red)}
.ks-done{display:none}
.ks-done.on{display:block}
.ks-done p{
padding:18px 20px;
border:2px solid var(--red);
color:var(--ink);
font-size:clamp(15px,1.6vw,18px);
}
@media (max-width:820px){
.kit-send{grid-template-columns:1fr;gap:26px}
}
@media (prefers-reduced-motion:reduce){
.kit-dl{transition:none}
}
/* ================================================================
Hero en dos columnas: mensaje a la izquierda, formulario a la
derecha. El sticker deja de flotar sobre el texto y se apoya en
la esquina superior derecha de la ficha del formulario.
================================================================ */
.hero-cols{
display:grid;
grid-template-columns:minmax(0,1fr) clamp(370px,40vw,615px);
gap:clamp(30px,4vw,64px);
/* Ambas columnas arrancan arriba. Antes se alineaban por abajo, y como
la columna del formulario es más alta, el escudo quedaba hundido. */
align-items:start;
/* Banda que se reserva sobre las dos columnas para que el sticker
sobresalga sin tapar la ficha. Al aplicarse a las dos por igual, el
borde superior del escudo y el de la ficha quedan a la misma altura. */
--hero-top:clamp(34px,4.6vh,76px);
}
.hero-copy{padding-top:var(--hero-top)}
.hero-form{
position:relative;
padding-top:var(--hero-top);
}
/* dentro del hero el sticker deja de ser un elemento flotante del
contenedor y pasa a colgar de la ficha del formulario */
.hero-form .stkr-out{
position:absolute;
top:0;
right:clamp(-14px,-1vw,-6px);
bottom:auto;
left:auto;
width:clamp(96px,10vw,148px);
z-index:3;
}
/* La ficha vive sobre una fotografía: necesita separarse del fondo
más de lo que necesitaba dentro de su sección. */
.hero-form .form-card{
box-shadow:0 26px 60px rgba(0,0,0,.55);
max-height:none;
/* La regla general de .form-card la deja pegajosa, que es lo que se quiere
en la sección de firma, donde la carta es larga y la ficha acompaña. En
el hero no: ahí se desprendía de su sitio y su borde inferior se montaba
entre 15 y 31 px sobre el botón "Read the petition". Se veía sobre todo
en Firefox, por cómo compone la tarjeta blanca encima del botón
desenfocado, pero el solape estaba en todos los navegadores. */
position:static;
top:auto;
}
.hero-more{
display:block;
margin-top:14px;
text-align:center;
/* sobre la foto, el botón de línea necesita algo de fondo propio */
background:rgba(10,10,10,.55);
backdrop-filter:blur(4px);
}
/* El hero deja de ocupar la pantalla completa: con el formulario
dentro, forzar 100svh dejaría el contenido apretado o cortado. */
/* El hero ocupa la pantalla y su contenido se ajusta para caber: la
escala la calcula app.js midiendo el alto disponible. Los rellenos
dependen del alto de la ventana, no del ancho, porque el problema
que se resuelve aquí es vertical. */
#hero{
min-height:100svh;
padding:calc(var(--nav-h) + clamp(14px,2.2vh,40px)) 0 clamp(16px,2.4vh,40px);
}
.hero-cols{
transform:scale(var(--hero-k,1));
transform-origin:top center;
}
.hero-in{width:100%}
@media (max-width:980px){
.hero-cols{grid-template-columns:1fr;gap:34px;align-items:stretch}
.hero-copy{padding-top:0}
.hero-form{padding-top:clamp(40px,9vw,70px);max-width:520px;width:100%}
.hero-form .stkr-out{right:0;width:clamp(86px,17vw,120px)}
}
/* ================================================================
Resumen de la petición dentro del formulario del hero.
Va entre el contador y los campos: el número engancha, este texto
explica qué se firma, y solo después se piden los datos.
================================================================ */
/* El resumen de la petición. Estaba dentro de la tarjeta blanca del
formulario y ahora vive en la columna izquierda del hero, sobre negro:
de ahí que los colores sean los inversos de los de antes. */
/* Al pasar el resumen a la columna izquierda, es esa columna y no la ficha
del formulario la que marca el alto del hero. Aquí se aprieta antes de que
el ajuste automático tenga que encoger todo el bloque. El umbral es 1000px
y no 900 porque en portátiles de 950 ya hacía falta. */
@media (min-width:981px) and (max-height:1000px){
}
@media (min-width:981px) and (max-height:820px){
}
/* La llamada a la acción que encabeza la tarjeta del formulario, donde
antes estaba el resumen de la petición. */
.form-cta{
margin:0 0 clamp(14px,1.6vw,20px);
padding-bottom:clamp(12px,1.4vw,16px);
border-bottom:1px solid #E4E4E7;
font-family:var(--disp);
font-size:clamp(20px,2vw,27px);
/* El rótulo pasó de tres palabras a una frase que ocupa dos líneas: con
line-height 1 las mayúsculas de una línea tocaban las de la siguiente. */
line-height:1.06;
text-transform:uppercase;
color:var(--ink);
}
/* La tira de cifras se compacta en pantallas bajas: es el elemento que
más fácilmente empuja el formulario fuera de la vista. */
@media (min-width:981px){
}
/* ================================================================
Pantallas de escritorio bajas
----------------------------------------------------------------
En 1366x768 y 1280x720 la ficha del hero no cabe, y reducirla solo
con la escala la dejaría demasiado pequeña. Aquí se recorta lo que
no cuesta legibilidad —relleno, separación entre campos, el número
gigante del contador— para que la escala apenas tenga que actuar.
Solo afecta al formulario del hero: el de la sección de firma se
queda como está.
================================================================ */
@media (min-width:981px) and (max-height:860px){
.hero-form .form-card{padding:clamp(18px,2.4vh,28px)}
/* La franja roja sangra hasta el borde, así que su margen negativo tiene
que seguir al relleno de la tarjeta, que aquí es más estrecho. */
.hero-form .sigcount{
margin:calc(clamp(18px,2.4vh,28px) * -1) calc(clamp(18px,2.4vh,28px) * -1) 13px;
padding:clamp(14px,1.9vh,20px) clamp(18px,2.4vh,28px);
}
.hero-form .sigcount .n{font-size:clamp(44px,6vh,66px)}
.hero-form .field{margin-bottom:10px}
.hero-form .field label{margin-bottom:5px}
.hero-form .field input,
.hero-form .field select{padding:11px}
.hero-form .consent{margin:2px 0 13px;padding:10px 12px}
.hero-form .consent span{font-size:12px;line-height:1.45}
.hero-form .privacy{margin-top:9px;font-size:10.5px}
.hero-form .btn.wide{padding:13px}
.hero-more{margin-top:10px}
}
/* Por debajo de 700px de alto la pantalla ya no da para todo sin
encoger de más, así que se deja que haya desplazamiento. */
@media (min-width:981px) and (max-height:640px){
#hero{min-height:auto}
}
/* ================================================================
Formulario ancho en el hero
----------------------------------------------------------------
Ensanchar la ficha es lo que evita tener que encoger el hero: con
más ancho, el texto de la petición ocupa la mitad de líneas y los
campos de nombre y correo caben en una sola fila. La altura baja lo
suficiente para que la escala casi nunca tenga que actuar.
================================================================ */
@media (min-width:981px){
/* El titular ya no puede depender del ancho de la ventana: su
columna es más estrecha que antes. Con unidades de contenedor se
ajusta al espacio real que tiene, sea cual sea la pantalla. */
.hero-copy{container-type:inline-size}
.hero-copy h1{font-size:min(clamp(52px,11.6vw,164px), 21.5cqi)}
.hero-copy .hero-sub{font-size:min(clamp(20px,2.6vw,34px), 7cqi)}
.hero-form #heroSignForm{
display:grid;
grid-template-columns:1fr 1fr;
column-gap:clamp(14px,1.6vw,22px);
}
/* todo ocupa las dos columnas salvo nombre y correo */
.hero-form #heroSignForm > *{grid-column:1 / -1}
.hero-form #heroSignForm > .f-name{grid-column:1}
.hero-form #heroSignForm > .f-email{grid-column:2}
/* El texto de la petición se lee mejor en dos bloques que en uno
muy ancho, pero sin llegar a columnas: se limita la medida. */
}
/* ================================================================
El hero respira más ancho que el resto del sitio
----------------------------------------------------------------
Medido sobre la propia fuente: "LE FOOTBALL" a 164px ocupa 749px,
y es el más ancho de los cuatro idiomas. Con el contenedor de 1240
la columna izquierda se quedaba en 561px y el titular tenía que
encogerse. A 1440 la columna llega a 745px y el titular sale a su
tamaño completo.
La barra de navegación se ensancha igual, porque si no el logo del
encabezado y el escudo del hero dejarían de estar alineados.
================================================================ */
@media (min-width:1200px){
.nav-in,
#hero .wrap{width:min(1440px, calc(100% - 56px))}
.hero-cols{gap:clamp(48px,4vw,80px)}
}
/* ================================================================
What we want: cuatro tarjetas con panel desplegable a lo ancho
----------------------------------------------------------------
Colores tomados del documento de la campaña. Los paneles viven en
el HTML justo después de su tarjeta, y la rejilla los coloca:
· escritorio (4 columnas): tarjetas en la fila 1, panel abierto
en la fila 2 ocupando todo el ancho
· tableta (2 columnas): tarjetas en las filas 1 y 2, panel en la 3
· móvil (1 columna): orden natural, cada panel bajo su tarjeta
Así el mismo marcado sirve para los tres tamaños.
================================================================ */
.dm-sec{background:#111}
.dm-sec .dm-grid{
margin-top:clamp(28px,3.4vw,48px);
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:clamp(12px,1.3vw,18px);
}
.dm-card{
--c:#00A551;
grid-row:1;
display:flex;
flex-direction:column;
background:var(--c);
color:#0A0A0A;
padding:clamp(20px,2vw,28px) clamp(18px,1.8vw,26px) clamp(18px,1.8vw,24px);
}
.dm-card.c1{--c:#00A551}
.dm-card.c2{--c:#ABDF00}
.dm-card.c3{--c:#FEAF00}
.dm-card.c4{--c:#D91D35;color:#fff}
.dm-shot{
height:clamp(118px,11vw,168px);
display:flex;align-items:center;justify-content:center;
margin-bottom:clamp(16px,1.8vw,24px);
}
.dm-shot img{max-height:100%;max-width:88%;width:auto;height:auto;object-fit:contain}
.dm-no{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
/* Las cuatro tarjetas llevan rótulo (01 a 04) entre la imagen y el título,
así que la compensación que antes alineaba la 04 ya no hace falta. */
.dm-ttl{
margin:10px 0 12px;
font-family:var(--disp);
font-size:clamp(21px,1.9vw,29px);
line-height:1;
text-transform:uppercase;
}
.dm-txt{margin:0 0 auto;font-size:clamp(14px,1.02vw,16px);line-height:1.5}
/* El "+" es un botón real: se alcanza con el teclado y anuncia su estado */
.dm-plus{
align-self:flex-end;
margin-top:18px;
position:relative;
width:44px;height:44px;
flex:none;
border:2px solid currentColor;
background:transparent;
color:inherit;
cursor:pointer;
}
.dm-plus::before,.dm-plus::after{
content:"";position:absolute;left:50%;top:50%;
width:18px;height:2px;background:currentColor;
transform:translate(-50%,-50%);
}
.dm-plus::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .22s ease}
.dm-plus[aria-expanded="true"]::after{transform:translate(-50%,-50%) rotate(0deg)}
.dm-plus:hover{background:rgba(0,0,0,.08)}
.dm-plus:focus-visible{outline:3px solid #fff;outline-offset:2px}
.dm-card.c4 .dm-plus:focus-visible{outline-color:#0A0A0A}
/* texto solo para lectores de pantalla */
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* la tarjeta abierta se marca, para que se sepa de dónde sale el panel */
.dm-card.open{box-shadow:inset 0 -6px 0 rgba(0,0,0,.28)}
.dm-panel{
grid-column:1 / -1;
grid-row:2;
background:#fff;
color:var(--ink);
border-top:6px solid var(--c);
padding:clamp(24px,3vw,44px);
}
.dm-panel[hidden]{display:none}
.dm-panel.c1{--c:#00A551}
.dm-panel.c2{--c:#ABDF00}
.dm-panel.c3{--c:#FEAF00}
.dm-panel.c4{--c:#D91D35}
.dm-band{
display:inline-block;
font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
color:#6B6B70;
margin-bottom:14px;
}
.dm-body{
display:grid;
grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);
gap:clamp(22px,3vw,48px);
align-items:start;
}
.dm-lead{
margin:0;
font-family:var(--disp);
font-size:clamp(20px,1.9vw,28px);
line-height:1.15;
text-transform:uppercase;
}
.dm-body ul{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.dm-body li{
position:relative;
padding-left:22px;
font-size:clamp(14.5px,1.05vw,16.5px);
line-height:1.55;
color:#27272A;
}
.dm-body li::before{
content:"";position:absolute;left:0;top:.62em;
width:9px;height:9px;background:var(--c);
}
.dm-close{
grid-column:2;
margin:6px 0 0;
font-weight:700;
font-size:clamp(14.5px,1.05vw,16.5px);
}
/* --- tableta: dos columnas, panel debajo de las cuatro --- */
@media (max-width:1100px){
.dm-sec .dm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.dm-card.c1,.dm-card.c2{grid-row:1}
.dm-card.c3,.dm-card.c4{grid-row:2}
.dm-panel{grid-row:3}
}
/* --- móvil: una columna, cada panel justo bajo su tarjeta --- */
@media (max-width:640px){
.dm-sec .dm-grid{grid-template-columns:1fr}
.dm-card,.dm-panel{grid-row:auto!important}
.dm-body{grid-template-columns:1fr}
.dm-close{grid-column:1}
.dm-panel{border-top-width:5px;margin-top:-6px}
}
/* ================================================================
Texto del hero
----------------------------------------------------------------
El texto definitivo son cuatro párrafos más el remate en negrita:
unos mil caracteres, el triple que el anterior. Se baja el cuerpo
y se amplía la medida para que la columna izquierda deje de ser la
que manda en la altura del hero. Con estos valores la que manda es
la ficha del formulario, igual que antes de cambiar el texto: el
hero se sale lo mismo que se salía entonces, ni un píxel más.
================================================================ */
.hero-say{
max-width:66ch;
font-size:clamp(13px,.98vw,15px);
line-height:1.4;
}
/* En escritorio el texto llega hasta poco antes de la ficha del formulario
en vez de cortarse a 66 caracteres: así ocupa la franja que quedaba vacía
a su derecha y, al ganar ancho, pierde alto. El remate en negrita se
separa del último párrafo para que se lea como lo que es, un cierre. */
@media (min-width:981px){
.hero-say{max-width:none;padding-right:clamp(10px,1.4vw,28px)}
.hero-say .hs-key{margin-top:1.7em}
}
.hero-say p{margin:0}
.hero-say p + p{margin-top:.45em}
/* La frase central es la idea de la campaña: se destaca en peso y
color frente al resto, que ya va en semibold. */
.hero-say .hs-key{
font-weight:800;
font-size:1.06em;
line-height:1.35;
}
@media (max-width:980px){
.hero-say{max-width:none}
}
/* Pantallas de escritorio bajas: con el texto de tres párrafos la
columna izquierda es ahora la más alta del hero. Se reducen el
escudo, el aire entre bloques y un punto el cuerpo del texto, para
que el conjunto quepa sin que actúe la escala. */
@media (min-width:981px) and (max-height:860px){
.hero-emblem{width:clamp(120px,15vh,200px);height:auto;margin-bottom:6px}
.hero-sub{margin-top:6px}
.hero-say{margin-top:10px;font-size:clamp(13px,1vw,15px);line-height:1.38}
.hero-say p + p{margin-top:.45em}
}
/* ============================================================
RECUENTO DE VOTOS POR CONFEDERACIÓN (#count)
============================================================ */
#count{background:var(--paper-2)}
.vt-head{max-width:72ch}
.vt-note{
margin-top:20px;max-width:64ch;font-size:14.5px;line-height:1.62;color:#4A4A4E;
border-left:3px solid var(--ink);padding-left:16px
}
.vt-note b{color:var(--ink)}
.vt-note a{color:var(--red);text-decoration:underline;text-underline-offset:3px;font-weight:700}
/* --- marcador general --- */
.vt-tally{margin-top:clamp(34px,4.5vw,56px);border:3px solid var(--ink);background:var(--paper)}
.vt-bar{display:flex;height:20px;background:#DCDCD8}
.vt-bar i{display:block;height:100%;transition:width .5s cubic-bezier(.16,1,.3,1)}
.vt-bar i.f{background:var(--red)}
.vt-bar i.a{background:var(--green)}
.vt-bar i.u{background:var(--amber)}
.vt-bar i.k{background:transparent}
.vt-nums{display:grid;grid-template-columns:repeat(4,1fr)}
.vt-nums div{padding:18px 16px 20px;border-right:1px solid #DCDCD8}
.vt-nums div:last-child{border-right:0}
.vt-nums b{
display:block;font-family:var(--disp);font-size:clamp(30px,4.4vw,52px);line-height:.9;
letter-spacing:.01em
}
.vt-nums span{
display:block;margin-top:9px;font-size:11px;font-weight:800;letter-spacing:.13em;
text-transform:uppercase;line-height:1.35;color:#5A5A5E
}
.vt-nums .n-f b{color:var(--red)}
.vt-nums .n-a b{color:#008A43}
.vt-nums .n-u b{color:#A87100}
.vt-nums .n-k b{color:#8A8A8E}
/* --- filtros --- */
.vt-filters{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.vt-filters button{
font-family:var(--body);font-size:11.5px;font-weight:800;letter-spacing:.12em;
text-transform:uppercase;padding:12px 17px;cursor:pointer;
background:transparent;color:var(--ink);border:2px solid var(--ink);
transition:background .18s,color .18s,border-color .18s
}
.vt-filters button:hover{background:var(--ink);color:#fff}
.vt-filters button[aria-pressed="true"]{background:var(--ink);color:#fff}
.vt-filters button .c{opacity:.6;margin-left:7px;font-weight:700}
/* --- confederaciones --- */
.vt-grid{margin-top:clamp(30px,3.6vw,46px);border-top:3px solid var(--ink)}
.vt-cf{border-bottom:3px solid var(--ink)}
.vt-cf > button{
width:100%;display:grid;grid-template-columns:1fr auto auto;gap:clamp(14px,2.4vw,34px);
align-items:center;text-align:left;background:transparent;border:0;cursor:pointer;
padding:clamp(20px,2.4vw,28px) 0;font:inherit;color:inherit
}
.vt-cf .cf-id{min-width:0}
.vt-cf .cf-code{
font-family:var(--disp);text-transform:uppercase;line-height:.96;
font-size:clamp(24px,3.4vw,44px);letter-spacing:.005em
}
.vt-cf .cf-reg{
display:block;margin-top:7px;font-size:11.5px;font-weight:800;letter-spacing:.13em;
text-transform:uppercase;color:#6B6B6B
}
.vt-cf .cf-bar{width:clamp(100px,22vw,280px)}
.vt-cf .cf-bar .vt-bar{height:12px}
.vt-cf .cf-bar em{
display:block;margin-top:8px;font-style:normal;font-size:11px;font-weight:800;
letter-spacing:.11em;text-transform:uppercase;color:#6B6B6B
}
.vt-cf .cf-tog{
width:clamp(38px,4vw,50px);height:clamp(38px,4vw,50px);border:3px solid var(--ink);
position:relative;flex:none
}
.vt-cf .cf-tog::before,.vt-cf .cf-tog::after{
content:"";position:absolute;inset:50% 21% auto 21%;height:3px;background:var(--ink);
transform:translateY(-50%);transition:.28s
}
.vt-cf .cf-tog::after{transform:translateY(-50%) rotate(90deg)}
.vt-cf > button[aria-expanded="true"] .cf-tog::after{transform:translateY(-50%) rotate(0)}
.vt-cf > button:hover .cf-tog{background:var(--red);border-color:var(--red)}
.vt-cf > button:hover .cf-tog::before,.vt-cf > button:hover .cf-tog::after{background:#fff}
.vt-cf .cf-body{display:none;padding-bottom:clamp(24px,3vw,38px)}
.vt-cf.open .cf-body{display:block}
.vt-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(288px,1fr));gap:1px}
/* El anillo de 1px hace de línea divisoria sin pintar de gris los huecos
que deja la última fila cuando no está completa. */
.vt-a{background:var(--paper);box-shadow:0 0 0 1px #DCDCD8;padding:15px 17px 16px;display:flex;flex-direction:column;gap:7px}
.vt-a.hide{display:none}
.vt-a .a-top{display:flex;align-items:baseline;gap:9px;justify-content:space-between}
.vt-a .a-name{
font-family:var(--disp);text-transform:uppercase;font-size:17.5px;line-height:1.02;
letter-spacing:.008em
}
.vt-a .a-code{font-size:10.5px;font-weight:800;letter-spacing:.11em;color:#9A9A9E;flex:none}
.vt-a .a-pres{font-size:13px;line-height:1.4;color:#3A3A3E}
.vt-a .a-pres.none{color:#9A9A9E;font-style:italic}
.vt-a .a-chip{
align-self:flex-start;display:inline-flex;align-items:center;gap:7px;
font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
padding:6px 10px;border:2px solid currentColor;line-height:1.1
}
.vt-a .a-chip::before{content:"";width:8px;height:8px;background:currentColor;flex:none;border-radius:50%}
.vt-a[data-st="for"] .a-chip{color:var(--red)}
.vt-a[data-st="against"] .a-chip{color:#008A43}
.vt-a[data-st="undecided"] .a-chip{color:#A87100}
.vt-a[data-st="unknown"] .a-chip{color:#8A8A8E}
.vt-a .a-src{
font-size:11.5px;font-weight:700;letter-spacing:.04em;color:var(--ink);
text-decoration:underline;text-underline-offset:3px
}
.vt-a .a-src:hover{color:var(--red)}
.vt-a .a-warn{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#A87100}
.vt-none{padding:26px 2px;font-size:14.5px;color:#6B6B6B}
.vt-updated{
margin-top:20px;font-size:11px;font-weight:800;letter-spacing:.13em;
text-transform:uppercase;color:#8A8A8E
}
@media (max-width:760px){
.vt-nums{grid-template-columns:repeat(2,1fr)}
.vt-nums div{border-bottom:1px solid #DCDCD8}
.vt-nums div:nth-child(2n){border-right:0}
.vt-nums div:nth-last-child(-n+2){border-bottom:0}
.vt-cf > button{grid-template-columns:1fr auto;row-gap:16px}
.vt-cf .cf-tog{grid-row:1;grid-column:2;align-self:start}
.vt-cf .cf-bar{grid-row:2;grid-column:1 / -1;width:100%}
.vt-list{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
.vt-bar i{transition:none}
}
/* ============================================================
FORMULARIO DE FIRMAS — widget de Action Network
Las reglas vienen del ejemplo que mandó Jaka (Action Network).
Van todas acotadas a .action-network-widget, así que no tocan
el resto del sitio. Si él manda una versión nueva, se reemplaza
este bloque entero.
Nota: #association es el selector de las 211 federaciones; el
selector de país de AN y su opt-in son obligatorios y no se
pueden quitar, por eso se ocultan en vez de borrarse.
============================================================ */
/* Apply the same styles to every Action Network widget instance. */
.action-network-widget .js-international_link-wrap,
.action-network-widget h2,
.action-network-widget h4,
.action-network-widget .form_builder_output,
.action-network-widget .control-label.disabled,
.action-network-widget .floatlabel-label,
.action-network-widget li.core_field:has(#form-zip_code),
.action-network-widget .international_link-wrap,
.action-network-widget #d_sharing,
.action-network-widget #action_info,
.action-network-widget #logo_wrap {
display: none !important;
}
.action-network-widget li {
list-style: none !important;
}
.action-network-widget ul {
padding-left: 0;
}
.action-network-widget .country_drop_wrap {
display: block !important;
}
.action-network-widget #form_col1,
.action-network-widget #form_col2 {
float: none !important;
}
.action-network-widget.js-country_drop_wrap {
display: block !important;
}
.action-network-widget #form_col1,
.action-network-widget #form_col2 {
/* Sin max-width: el formulario ocupa todo el ancho del contenedor
que lo envuelve. En el hero lo limita la ficha, y en la sección
de firma, la columna. Lo pidió Jaka (Action Network). */
width: 100%;
}
.action-network-widget .country_drop_wrap,
.action-network-widget #s2id_association {
display: none !important;
}
.action-network-widget .error_input {
border-color: var(--red, #E71D36) !important;
}
.action-network-widget form {
font-family: var(--body, 'Archivo', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif);
color: var(--ink, #0A0A0A);
}
.action-network-widget #form_col1,
.action-network-widget #form_col2 {
width: 100%;
float: none;
}
.action-network-widget li {
list-style: none;
padding: 0;
}
.action-network-widget .form_builder_output {
display: none;
}
.action-network-widget .international_link-wrap,
.action-network-widget .country_drop_wrap,
.action-network-widget #d_sharing {
display: none !important;
}
.action-network-widget .core_field,
.action-network-widget .control-group {
margin: 0 0 14px;
}
.action-network-widget .control-label {
display: block;
margin: 0 0 7px;
font-size: 10px;
font-weight: 800;
letter-spacing: .2em;
line-height: 1.4;
text-transform: uppercase;
color: var(--ink, #0A0A0A);
}
.action-network-widget #form-first_name,
.action-network-widget #form-last_name,
.action-network-widget #form-email {
box-sizing: border-box;
width: 100%;
height: auto;
padding: 15px;
border: 2px solid var(--ink, #0A0A0A);
border-radius: 0;
background: #fff;
font-family: var(--body, 'Archivo', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif);
font-size: 16px;
font-weight: 400;
line-height: normal;
color: var(--ink, #0A0A0A);
box-shadow: none;
transition: border-color .2s, box-shadow .2s;
}
.action-network-widget #form-first_name::placeholder,
.action-network-widget #form-last_name::placeholder,
.action-network-widget #form-email::placeholder {
color: #9A9A9A;
opacity: 1;
}
.action-network-widget #form-first_name:focus,
.action-network-widget #form-last_name:focus,
.action-network-widget #form-email:focus {
outline: 0;
border-color: var(--red, #E71D36);
box-shadow: 0 0 0 3px rgba(231,29,54,.2);
}
.action-network-widget #s2id_association {
display: none;
}
.action-network-widget #association {
position: static;
left: auto;
top: auto;
right: auto;
bottom: auto;
display: block;
visibility: visible;
opacity: 1;
box-sizing: border-box;
width: 100% ;
height: auto;
min-height: 0;
margin: 0;
padding: 15px 45px 15px 15px;
clip: auto;
clip-path: none;
overflow: visible;
border: 2px solid var(--ink, #0A0A0A);
border-radius: 0;
background-color: #fff;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 15px center;
background-size: 14px 14px;
-webkit-appearance: none;
appearance: none;
font-family: var(--body, 'Archivo', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif);
font-size: 16px;
font-weight: 400;
line-height: normal;
color: var(--ink, #0A0A0A);
box-shadow: none;
cursor: pointer;
pointer-events: auto;
transform: none;
z-index: auto;
transition: border-color .2s, box-shadow .2s;
}
.action-network-widget #association:focus {
outline: 0;
border-color: var(--red, #E71D36);
box-shadow: 0 0 0 3px rgba(231,29,54,.2);
}
.action-network-widget .js-fb-multiplecheckboxes {
box-sizing: border-box;
margin: 4px 0 18px;
padding: 14px;
background: var(--paper-2, #F2F2F0);
border-left: 5px solid var(--red, #E71D36);
}
.action-network-widget .js-fb-multiplecheckboxes > .control-label {
display: none;
}
.action-network-widget .js-fb-multiplecheckboxes .controls {
display: block;
margin: 0;
padding: 0;
}
.action-network-widget .js-fb-multiplecheckboxes .checkbox {
display: flex;
align-items: flex-start;
gap: 12px;
margin: 0;
padding: 0;
font-family: var(--body, 'Archivo', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif);
font-size: 12.8px;
font-weight: 400;
letter-spacing: 0;
line-height: 1.52;
text-transform: none;
color: var(--ink, #0A0A0A);
cursor: pointer;
}
.action-network-widget .js-fb-multiplecheckboxes input[type="checkbox"] {
appearance: auto;
width: 20px;
height: 20px;
min-width: 20px;
flex: 0 0 20px;
margin: 2px 0 0;
padding: 0;
accent-color: var(--red, #E71D36);
}
.action-network-widget .js-form-translation-text {
display: block;
flex: 1;
}
/* El enlace a la política va dentro del texto del consentimiento y
fluye con la última línea: subrayado para que se vea que se puede
pulsar, sin romper el interlineado de la casilla. */
.action-network-widget .js-form-translation-text a {
color: inherit;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
white-space: nowrap;
}
.action-network-widget .js-form-translation-text a:hover,
.action-network-widget .js-form-translation-text a:focus-visible {
color: var(--red, #E71D36);
}
.action-network-widget input[name="commit"] {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: auto;
margin: 0;
padding: 19px 34px;
border: 2px solid var(--red, #E71D36);
border-radius: 0;
background: var(--red, #E71D36);
color: #fff;
font-family: var(--body, 'Archivo', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif);
font-size: 13px;
font-weight: 800;
line-height: normal;
letter-spacing: .15em;
text-align: center;
text-transform: uppercase;
cursor: pointer;
box-shadow: none;
transition: background .2s, color .2s, border-color .2s, transform .16s;
}
.action-network-widget input[name="commit"]:hover {
background: var(--ink, #0A0A0A);
border-color: var(--ink, #0A0A0A);
transform: translateY(-2px);
}
.action-network-widget input[name="commit"]:focus {
outline: 0;
box-shadow: 0 0 0 3px rgba(231,29,54,.2);
}
.action-network-widget .ajax-loading {
display: none;
}
.action-network-widget .error_input,
.action-network-widget input.error_input {
border-color: var(--red, #E71D36) !important;
}
/* Nombre y apellido iban en dos columnas a partir de 981px. Ahora el
formulario ocupa un tercio del ancho de la sección, donde esas dos
columnas quedaban estrechas, así que los campos van uno debajo del otro
en todos los tamaños. La rejilla se queda en una sola columna. */
@media (min-width:981px) and (max-height:860px) {
.action-network-widget .core_field,
.action-network-widget .control-group {
margin-bottom: 10px;
}
.action-network-widget .control-label {
margin-bottom: 5px;
}
.action-network-widget #form-first_name,
.action-network-widget #form-last_name,
.action-network-widget #form-email {
padding: 11px;
}
.action-network-widget #association {
padding: 11px 45px 11px 11px !important;
background-position: right 15px center !important;
}
.action-network-widget .js-fb-multiplecheckboxes {
margin: 2px 0 13px;
padding: 10px 12px;
}
.action-network-widget .js-fb-multiplecheckboxes .checkbox {
font-size: 12px;
line-height: 1.45;
}
.action-network-widget input[name="commit"] {
padding: 13px;
}
}
/* ----------------------------------------------------------------
El widget de AN es más alto que el formulario que tenía el sitio,
así que su bloque compacto (max-height:860px) empieza demasiado
tarde: entre 861 y 1000 px de alto de ventana la tarjeta del hero
se salía y el botón de enviar quedaba fuera de pantalla. El hero ya
no puede encogerse más, su escala está topada en 0.88 a propósito,
así que lo que se recorta es el relleno.
Solo afecta al hero. El de la sección de firma tiene todo el alto
que necesite.
---------------------------------------------------------------- */
@media (min-width:981px) and (max-height:1000px){
.hero-form .action-network-widget .core_field,
.hero-form .action-network-widget .control-group{margin:0 0 10px}
.hero-form .action-network-widget .control-label{margin-bottom:5px}
.hero-form .action-network-widget #form-first_name,
.hero-form .action-network-widget #form-last_name,
.hero-form .action-network-widget #form-email{padding:11px}
.hero-form .action-network-widget #association{
padding:11px 45px 11px 11px;background-position:right 15px center
}
.hero-form .action-network-widget .js-fb-multiplecheckboxes{margin:2px 0 13px;padding:10px 12px}
.hero-form .action-network-widget .js-fb-multiplecheckboxes .checkbox{font-size:12px;line-height:1.45}
.hero-form .action-network-widget input[name="commit"]{padding:13px}
}
/* Escalón más apretado para 1366x768 y 1280x720, que son resoluciones de
portátil todavía muy comunes. Se recorta lo que no cuesta legibilidad:
el número gigante del contador y los márgenes. El texto del formulario
no baja de 12px. */
@media (min-width:981px) and (max-height:820px){
.hero-form .sigcount{padding-bottom:clamp(12px,1.6vh,18px);margin-bottom:9px}
.hero-form .sigcount .n{font-size:clamp(40px,5.4vh,54px)}
.hero-form .privacy{margin-top:7px;font-size:10px}
.hero-form .action-network-widget .core_field,
.hero-form .action-network-widget .control-group{margin:0 0 8px}
.hero-form .action-network-widget #form-first_name,
.hero-form .action-network-widget #form-last_name,
.hero-form .action-network-widget #form-email{padding:9px}
.hero-form .action-network-widget #association{padding:9px 45px 9px 11px}
.hero-form .action-network-widget .js-fb-multiplecheckboxes{margin:0 0 10px;padding:9px 11px}
.hero-form .action-network-widget input[name="commit"]{padding:11px}
}
/* 1280x720 se quedaba a siete píxeles. Último recorte, solo del texto
secundario de la ficha: el formulario no se toca. */
@media (min-width:981px) and (max-height:740px){
.hero-form .sigcount .n{font-size:clamp(34px,4.8vh,44px)}
.hero-form .privacy{margin-top:6px}
.hero-form .action-network-widget .core_field,
.hero-form .action-network-widget .control-group{margin:0 0 7px}
}
/* ----------------------------------------------------------------
Ancho de la sección de firma
----------------------------------------------------------------
El sticker del brazalete mide 331x184 y se queda en la parte alta
de la sección, pero la reserva se aplicaba como padding-right a
todo el .wrap: a 1440px le restaba 337 de 1240, y la carta y el
formulario, que empiezan unos 560px más abajo y nunca tocan el
sticker, quedaban estrechados igual.
La reserva pasa al único bloque que de verdad queda debajo. Lo
señaló Jaka (Action Network); su propuesta era quitar la regla
genérica .has-stkr[class*="res-"], pero eso dejaría el sticker
encima del titular, que es justo lo que esa regla evita.
Solo por encima de 821px: más abajo los stickers entran en el
flujo normal y --stkr-res ya vale cero.
---------------------------------------------------------------- */
/* El hueco del brazalete se reserva SOLO en el titular, que es lo único
que queda a su altura, y no en toda la sección. Antes esta regla valía a
partir de 821px y por debajo la reserva se aplicaba al contenedor entero:
en un teléfono de 390px eso dejaba la carta y el formulario en 220px de
ancho, con una franja muerta a la derecha. Ahora vale en todos los
tamaños. */
#petition .wrap.has-stkr.res-band{padding-right:0}
#petition .pet-head{padding-right:var(--stkr-res, 0px)}
/* --- escritorio: las cifras suben al hueco del brazalete ------------
Las dos cajas iban a todo lo ancho, debajo del texto, y a su derecha
quedaba una franja verde vacía del ancho del brazalete. Ahora el bloque
de arriba es una rejilla de dos columnas: el texto a la izquierda y las
cifras a la derecha, colgando justo debajo del adhesivo.
El margen superior de las cifras es el alto del adhesivo más un respiro.
El adhesivo es una imagen de proporción fija, 1.8 a 1, así que su alto se
deduce de su ancho; por eso --sw repite aquí el mismo clamp que usa
.stkr-band, con su propio valor por debajo de 1100 px. Si allí se cambia
el ancho, hay que cambiarlo aquí. */
@media (min-width:821px){
#petition .pet-top{
--sw:clamp(160px,22vw,330px);
display:grid;
grid-template-columns:minmax(0,1fr) calc(var(--sw) + clamp(10px,1.4vw,22px));
align-items:start;
/* El aire antes de la carta lo pone ahora el bloque entero: el titular
y las cifras ya no lo llevan por su cuenta. */
margin-bottom:clamp(28px,3.4vw,48px);
}
#petition .pet-top .pet-head{grid-column:1;padding-right:clamp(16px,2vw,32px);margin-bottom:0}
#petition .pet-top .pet-num{
grid-column:2;
grid-template-columns:1fr;
margin:calc(var(--sw) / 1.8 + clamp(18px,2vw,30px)) 0 0;
}
/* Cajas más bajas: la cifra manda, el aire alrededor sobra. */
#petition .pet-top .pet-num div{padding:clamp(14px,1.5vw,20px) 14px}
}
@media (min-width:821px) and (max-width:1100px){
#petition .pet-top{--sw:clamp(128px,19vw,200px)}
}
/* --- móvil: el brazalete sube junto al titular ---------------------
En el flujo normal el brazalete caía al final de la cabecera, debajo
de todo el texto. Aquí vuelve a flotar, arriba a la derecha, a la
altura de "Sign the petition", y el hueco lo reserva SOLO el titular:
los párrafos ocupan el ancho completo de la pantalla. */
@media (max-width:820px){
#petition .pet-head{padding-right:0}
#petition .pet-head h2{padding-right:min(42%,152px)}
/* El !important es para ganarle al .stkr{position:static!important}
de la regla general del móvil, que manda todos los adhesivos al
flujo normal. */
#petition .stkr-band{
position:absolute!important;
right:0;
top:0;
margin:0;
width:min(38%,140px);
--rot:-6deg;
transform:rotate(-6deg);
}
}
/* --- móvil: el megáfono sube junto al titular -----------------------
Mismo criterio que el brazalete de la petición: el adhesivo flota
arriba a la derecha, el titular le reserva el hueco y el párrafo y
los botones de compartir usan el ancho completo. */
@media (max-width:820px){
#share .sh-head h2{padding-right:min(42%,152px)}
#share .stkr-mega{
position:absolute!important;
right:0;
top:0;
margin:0;
width:min(38%,140px);
--rot:5deg;
transform:rotate(5deg);
}
}
/* ============================================================
PÁGINA DE POLÍTICA DE PRIVACIDAD (privacidad.html)
Documento largo para leer, no para escanear: una sola
columna estrecha, interlineado amplio y jerarquía sobria.
============================================================ */
.pol-body{background:var(--paper)}
.pol-wrap{padding:calc(var(--nav-h) + clamp(40px,6vw,80px)) 0 clamp(60px,8vw,110px)}
.pol-wrap h1{
font-size:clamp(38px,6.4vw,76px);line-height:.94;
text-transform:uppercase;letter-spacing:.005em
}
.pol-fecha{
margin-top:14px;font-size:11px;font-weight:800;letter-spacing:.13em;
text-transform:uppercase;color:#8A8A8E
}
/* Son , así que heredaban el padding de 150px que el sitio da a
cada sección de la portada. Aquí sobra: esto es un documento seguido. */
.pol-s{padding:0;margin-top:clamp(34px,4.4vw,56px)}
.pol-s h2{
font-size:clamp(19px,2.3vw,27px);line-height:1.1;text-transform:uppercase;
padding-bottom:12px;border-bottom:3px solid var(--ink)
}
.pol-s p{
margin-top:16px;font-size:clamp(15.5px,1.45vw,17.5px);line-height:1.7;
color:#27272A;max-width:68ch
}
.pol-s p b{color:var(--ink)}
.pol-s a{color:var(--red);text-decoration:underline;text-underline-offset:3px;font-weight:700}
/* Los apartados sin terminar tienen que cantar: no pueden publicarse así. */
.pol-s .pend{
display:inline-block;margin-right:9px;padding:4px 9px;background:var(--red);color:#fff;
font-size:10.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;vertical-align:1px
}
.pol-s p:has(.pend){
background:#FFF4F5;border-left:5px solid var(--red);padding:14px 16px;max-width:none
}
.pol-body footer{margin-top:0}
/* Encabezados del texto reproducido de My Voice, My Choice. Se marcan
como subordinados a propósito: son su numeración, no la nuestra. */
.pol-s h3{
margin-top:30px;font-size:clamp(14px,1.5vw,16.5px);line-height:1.25;
text-transform:uppercase;letter-spacing:.04em;color:#3A3A3E
}
.pol-s h3 + p{margin-top:10px}
/* ================================================================
Oculto a propósito, no eliminado
----------------------------------------------------------------
La sección del recuento (#count) y sus dos entradas de menú se
esconden mientras los datos no estén listos para publicarse. El
marcado, las traducciones y /assets/votes.js siguen en su sitio.
Para volver a mostrarlo basta con quitar la clase sf-oculto de
esos tres elementos en index.html; esta regla puede quedarse.
================================================================ */
.sf-oculto{display:none!important}
/* ================================================================
Dos ajustes del menú
----------------------------------------------------------------
1. Entre 981 y 1200 px el menú se queda sin sitio cuando las seis
entradas van en los idiomas largos. Se aprieta el espaciado en
esa franja en vez de adelantar el menú de hamburguesa, que a
1100 px todavía sobra.
2. La fila de la carta y el formulario deja hueco para la cabecera
fija: es donde aterriza el enlace "Firmar" del menú.
================================================================ */
@media (min-width:981px) and (max-width:1200px){
.nav-in{gap:12px}
nav.links a{padding:11px 8px;letter-spacing:.07em}
nav.links a::after{left:8px;right:8px}
}
@media (min-width:981px) and (max-width:1080px){
.nav-in{gap:8px}
nav.links a{padding:11px 5px;font-size:11px;letter-spacing:.04em}
nav.links a::after{left:5px;right:5px}
}
#petition{scroll-margin-top:calc(var(--nav-h) + 10px)}
#petition .pet-grid{scroll-margin-top:calc(var(--nav-h) + 18px)}
/* El aterrizaje en la caja de firma del móvil deja hueco para la barra fija. */
@media (max-width:980px){
#hero .hero-form .form-card{scroll-margin-top:calc(var(--nav-h) + 10px)}
}