/* ============================================================ AGUA ALCALINA CANARIAS — Sistema de diseño Dirección: documental / geológico. Paleta: basalto volcánico + blanco frío + UN cobalto saturado. Deliberadamente NO crema/terracota (paleta genérica de marca premium). Forma: radio 0 en absolutamente todo. Sin excepciones. Tipografía: Archivo para todo; mono solo para cifras, porque las cifras son el argumento de esta marca. ============================================================ */ :root{ /* Neutros — fríos, nunca cálidos */ --basalt:#101416; --basalt-2:#080B0C; --slate:#565E5C; --paper:#F1F2F0; --paper-2:#E2E5E3; --white:#FFFFFF; /* Acento único */ --cobalt:#1B44CE; --cobalt-hi:#2C57E8; --rule:rgba(16,20,22,0.14); --rule-dark:rgba(241,242,240,0.16); --sans:"Archivo","Helvetica Neue",Arial,sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace; --pad:clamp(22px,4vw,40px); } *{box-sizing:border-box; margin:0; padding:0;} html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;} body{ font-family:var(--sans); background:var(--paper); color:var(--basalt); line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img{max-width:100%; height:auto; display:block;} a{color:inherit;} button{font-family:inherit; cursor:pointer;} :focus-visible{outline:2px solid var(--cobalt); outline-offset:3px;} ::selection{background:var(--cobalt); color:#fff;} .wrap{max-width:1280px; margin:0 auto; padding:0 var(--pad);} .band{padding:clamp(64px,9vw,128px) 0;} .dark{background:var(--basalt); color:var(--paper);} .tint{background:var(--paper-2);} /* ---------- TIPOGRAFÍA ---------- */ h1,h2,h3,h4{font-weight:600; letter-spacing:-0.028em; line-height:1.02;} .display{font-size:clamp(2.9rem,7.4vw,6rem);} .h2{font-size:clamp(1.9rem,4.2vw,3.4rem); max-width:19ch;} .h2.long{max-width:26ch;} .h3{font-size:clamp(1.15rem,1.8vw,1.5rem); letter-spacing:-0.02em;} .body{font-size:clamp(1rem,1.1vw,1.12rem); color:var(--slate); max-width:56ch; line-height:1.62;} .dark .body{color:rgba(241,242,240,0.7);} .small{font-size:0.88rem; color:var(--slate);} .dark .small{color:rgba(241,242,240,0.62);} /* Eyebrow — usado como máximo 3 veces en toda la página */ .eyebrow{ display:block; font-family:var(--mono); font-size:0.72rem; font-weight:500; letter-spacing:0.2em; text-transform:uppercase; color:var(--cobalt); margin-bottom:22px; } .dark .eyebrow{color:var(--paper); opacity:0.5;} /* Cifras — siempre mono, siempre tabulares */ .fig{font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:500; letter-spacing:-0.03em; line-height:0.92;} /* ---------- BOTONES ---------- Rectos, sólidos, con retorno táctil. Sin sombras ni degradados. */ .btn{ display:inline-flex; align-items:center; gap:12px; padding:17px 26px; border:1.5px solid transparent; font-size:0.92rem; font-weight:600; letter-spacing:-0.01em; text-decoration:none; white-space:nowrap; transition:background-color .18s ease, color .18s ease, border-color .18s ease, transform .08s ease; } .btn .arw{display:block; width:16px; height:1.5px; background:currentColor; position:relative; transition:width .18s ease;} .btn .arw::after{content:""; position:absolute; right:0; top:-3px; width:7px; height:7px; border-top:1.5px solid currentColor; border-right:1.5px solid currentColor; transform:rotate(45deg);} .btn:hover .arw{width:24px;} .btn:active{transform:translateY(1.5px);} .btn-fill{background:var(--cobalt); color:#fff;} .btn-fill:hover{background:var(--cobalt-hi);} .btn-out{border-color:var(--basalt); color:var(--basalt);} .btn-out:hover{background:var(--basalt); color:var(--paper);} .dark .btn-out, .over .btn-out{border-color:rgba(241,242,240,0.55); color:var(--paper);} .dark .btn-out:hover, .over .btn-out:hover{background:var(--paper); color:var(--basalt); border-color:var(--paper);} /* ---------- NAV — una línea, 68px ---------- */ .nav{position:sticky; top:0; z-index:60; background:rgba(241,242,240,0.93); backdrop-filter:blur(12px); border-bottom:1px solid var(--rule);} .nav-in{display:flex; align-items:center; gap:28px; height:68px;} .brand{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--basalt); font-weight:600; font-size:0.99rem; letter-spacing:-0.025em; white-space:nowrap;} .brand i{display:block; width:4px; height:20px; background:var(--cobalt);} .nav-links{display:flex; gap:24px; margin-left:auto; font-size:0.87rem; font-weight:500;} .nav-links a{text-decoration:none; color:var(--slate); transition:color .18s;} .nav-links a:hover{color:var(--basalt);} .nav-btn{background:var(--basalt); color:var(--paper); padding:11px 18px; font-size:0.84rem; font-weight:600; text-decoration:none; transition:background-color .18s;} .nav-btn:hover{background:var(--cobalt);} .burger{display:none; margin-left:auto; width:42px; height:42px; background:none; border:1px solid var(--rule); align-items:center; justify-content:center;} .burger span{display:block; width:17px; height:1.5px; background:var(--basalt); position:relative;} .burger span::before,.burger span::after{content:""; position:absolute; left:0; width:17px; height:1.5px; background:var(--basalt);} .burger span::before{top:-5px;} .burger span::after{top:5px;} .drawer{display:none; border-top:1px solid var(--rule);} .drawer.on{display:block;} .drawer a{display:block; padding:16px 0; text-decoration:none; font-weight:500; border-bottom:1px solid var(--rule);} .drawer a:last-child{border-bottom:none; color:var(--cobalt); font-weight:600;} @media (max-width:1024px){.nav-links,.nav-btn{display:none;} .burger{display:flex;}} /* ---------- 1 · HERO ---------- */ .hero{position:relative; min-height:100dvh; display:flex; align-items:flex-end; overflow:hidden; color:var(--paper);} .hero-img{position:absolute; inset:0; background:url('hero-cumbre.jpg') center 52%/cover no-repeat;} .hero-veil{position:absolute; inset:0; background:linear-gradient(3deg, rgba(8,11,12,0.95) 0%, rgba(8,11,12,0.5) 40%, rgba(8,11,12,0.1) 78%);} .hero-in{position:relative; width:100%; padding-bottom:clamp(46px,7vw,84px); padding-top:96px;} .hero-lbl{display:inline-flex; align-items:center; gap:11px; font-family:var(--mono); font-size:0.72rem; letter-spacing:0.18em; text-transform:uppercase; color:rgba(241,242,240,0.72); margin-bottom:clamp(20px,3vw,34px);} .hero-lbl i{display:block; width:22px; height:1.5px; background:var(--cobalt);} .hero h1{max-width:15ch; margin-bottom:clamp(18px,2.4vw,26px);} .hero h1 em{font-style:italic; font-weight:600;} .hero .body{color:rgba(241,242,240,0.84); max-width:44ch; margin-bottom:clamp(26px,3.4vw,38px);} .hero-cta{display:flex; gap:11px; flex-wrap:wrap;} /* ---------- 2 · PROBLEMA (datos + foto) ---------- */ .pr{display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(32px,5vw,72px); align-items:end;} @media (max-width:900px){.pr{grid-template-columns:1fr;}} .pr-cap{font-family:var(--mono); font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color:rgba(241,242,240,0.42); margin-top:12px;} .data{margin-top:clamp(30px,4vw,44px); border-top:1px solid var(--rule-dark);} .data-row{display:grid; grid-template-columns:auto 1fr; gap:clamp(18px,3vw,34px); align-items:baseline; padding:clamp(18px,2.4vw,26px) 0; border-bottom:1px solid var(--rule-dark);} @media (max-width:520px){.data-row{grid-template-columns:1fr; gap:8px;}} .data-row .fig{font-size:clamp(2.2rem,4.4vw,3.4rem); color:var(--paper);} .data-row p{font-size:0.94rem; color:rgba(241,242,240,0.66); max-width:34ch;} /* ---------- 3 · PANORÁMICA ---------- */ /* Todo marco de imagen fija su proporción y recorta con object-fit: así la imagen no puede deformarse aunque el contenedor cambie. */ .frame{position:relative; overflow:hidden;} .frame img{width:100%; height:100%; object-fit:cover;} .r-pano{aspect-ratio:1600/731;} .r-3x2{aspect-ratio:3/2;} .r-4x3{aspect-ratio:4/3;} .r-1x1{aspect-ratio:1/1;} .r-4x5{aspect-ratio:4/5;} .pano-bar{display:flex; justify-content:space-between; align-items:baseline; gap:24px; padding-top:14px; flex-wrap:wrap;} .pano-bar span{font-family:var(--mono); font-size:0.71rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--slate);} .duo{display:grid; align-items:start; grid-template-columns:1fr 1fr; gap:clamp(12px,1.5vw,18px); margin-top:clamp(12px,1.5vw,18px);} .duo-item{display:flex; flex-direction:column;} .duo-cap{padding-top:12px;} .duo-cap span{font-family:var(--mono); font-size:0.71rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--slate);} @media (max-width:768px){.duo{grid-template-columns:1fr;}} /* ---------- 4 · PRODUCTO (split) ---------- */ .split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,80px); align-items:center;} @media (max-width:900px){.split{grid-template-columns:1fr;}} .spec{margin-top:clamp(24px,3vw,34px); border-top:1px solid var(--rule);} .spec li{list-style:none; display:grid; grid-template-columns:2.6ch 1fr; gap:16px; align-items:baseline; padding:15px 0; border-bottom:1px solid var(--rule); font-size:0.95rem; color:var(--slate);} .spec li b{font-family:var(--mono); font-size:0.72rem; color:var(--cobalt); font-weight:500; letter-spacing:0.04em;} /* ---------- 5 · CALCULADORA (herramienta centrada, oscura) ---------- */ .tool{max-width:900px; margin:0 auto; text-align:center;} .tool .h2{margin:0 auto; max-width:24ch;} .tool .body{margin:16px auto 0;} .slider-wrap{margin-top:clamp(40px,5vw,60px); border-top:1px solid var(--rule-dark); border-bottom:1px solid var(--rule-dark); padding:clamp(30px,4vw,44px) 0;} .slider-top{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:20px;} .slider-top label{font-family:var(--mono); font-size:0.73rem; letter-spacing:0.13em; text-transform:uppercase; color:rgba(241,242,240,0.58);} .slider-top .fig{font-size:clamp(1.6rem,2.6vw,2.1rem); color:var(--paper);} input[type=range]{-webkit-appearance:none; appearance:none; width:100%; height:2px; background:rgba(241,242,240,0.24); outline:none;} /* El outline:none de arriba gana en especificidad al :focus-visible global, así que hay que devolver el anillo de foco explícitamente. */ input[type=range]:focus-visible{outline:2px solid var(--cobalt-hi); outline-offset:8px;} input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:20px; height:20px; background:var(--cobalt); cursor:grab; border:none;} input[type=range]::-moz-range-thumb{width:20px; height:20px; background:var(--cobalt); cursor:grab; border:none; border-radius:0;} .outs{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,48px); margin-top:clamp(30px,4vw,44px);} @media (max-width:640px){.outs{grid-template-columns:1fr; gap:26px;}} .outs div span{display:block; font-family:var(--mono); font-size:0.71rem; letter-spacing:0.13em; text-transform:uppercase; color:rgba(241,242,240,0.5); margin-bottom:12px;} .outs div .fig{font-size:clamp(2.6rem,6vw,4.4rem); color:var(--paper);} .outs div .fig u{text-decoration:none; color:var(--cobalt-hi);} /* ---------- 6 · TIRA DE VIDA (3 fotos, misma proporción 4:5) ---------- */ .life{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.5vw,18px);} @media (max-width:768px){.life{grid-template-columns:1fr 1fr;} .life > *:last-child{display:none;}} @media (max-width:520px){.life{grid-template-columns:1fr;} .life > *:last-child{display:block;}} .life figure{margin:0;} /* ---------- 7 · NEGOCIOS (rejilla de fotos) ---------- */ .biz{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.4vw,30px);} @media (max-width:900px){.biz{grid-template-columns:repeat(2,1fr);}} @media (max-width:640px){.biz{grid-template-columns:1fr;}} .biz article .frame{margin-bottom:16px;} .biz article i{display:block; font-family:var(--mono); font-style:normal; font-size:0.68rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--cobalt); margin-bottom:9px;} .biz article h3{margin-bottom:8px;} .biz article p{font-size:0.9rem; color:var(--slate);} .biz-foot{margin-top:clamp(38px,5vw,56px); padding-top:26px; border-top:1px solid var(--rule); display:grid; grid-template-columns:auto 1fr; gap:clamp(20px,3vw,40px); align-items:baseline;} @media (max-width:768px){.biz-foot{grid-template-columns:1fr; gap:14px;}} .biz-foot .fig{font-size:clamp(2.4rem,4.6vw,3.6rem);} .biz-foot p{font-size:0.98rem; color:var(--slate); max-width:46ch;} /* ---------- 8 · ZONAS (lista tipográfica, sin foto) ---------- */ .zone-list{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--rule-dark); margin-top:clamp(30px,4vw,44px);} @media (max-width:900px){.zone-list{grid-template-columns:repeat(2,1fr);}} @media (max-width:520px){.zone-list{grid-template-columns:1fr;}} .zone-list a{ display:flex; align-items:baseline; gap:12px; padding:20px 18px 20px 0; text-decoration:none; border-bottom:1px solid var(--rule-dark); font-size:1.02rem; font-weight:500; transition:color .18s, padding-left .18s; } .zone-list a n{font-family:var(--mono); font-size:0.68rem; color:rgba(241,242,240,0.36); font-style:normal;} .zone-list a:hover{color:var(--cobalt-hi); padding-left:8px;} /* ---------- 9 · PROSA + FAQ ---------- */ .prose{max-width:62ch;} .prose p{color:var(--slate); margin-top:16px; font-size:1.01rem; line-height:1.65;} .faq{max-width:900px; border-top:1px solid var(--rule); margin-top:clamp(24px,3vw,36px);} .faq details{border-bottom:1px solid var(--rule);} .faq summary{ cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:26px; padding:24px 0; font-size:1.04rem; font-weight:600; letter-spacing:-0.018em; } .faq summary::-webkit-details-marker{display:none;} .faq summary i{flex:0 0 auto; position:relative; width:13px; height:13px;} .faq summary i::before,.faq summary i::after{content:""; position:absolute; background:var(--cobalt); transition:transform .22s ease;} .faq summary i::before{left:0; top:6px; width:13px; height:1.5px;} .faq summary i::after{left:6px; top:0; width:1.5px; height:13px;} .faq details[open] summary i::after{transform:scaleY(0);} .faq .ans{padding:0 0 24px; color:var(--slate); font-size:0.97rem; max-width:64ch; line-height:1.65;} /* ---------- 10 · FORMULARIO ---------- */ .fm{display:grid; grid-template-columns:0.95fr 1.05fr; gap:clamp(34px,5vw,76px); align-items:start;} @media (max-width:900px){.fm{grid-template-columns:1fr;}} .fm-pts{margin-top:clamp(26px,3vw,38px); border-top:1px solid var(--rule-dark);} .fm-pts li{list-style:none; display:grid; grid-template-columns:2.6ch 1fr; gap:15px; align-items:baseline; padding:16px 0; border-bottom:1px solid var(--rule-dark); font-size:0.95rem; color:rgba(241,242,240,0.72);} .fm-pts li b{font-family:var(--mono); font-size:0.7rem; color:var(--cobalt-hi); font-weight:500;} form{background:var(--paper); padding:clamp(26px,3.4vw,40px); color:var(--basalt);} .f{margin-bottom:20px;} .f label{display:block; font-family:var(--mono); font-size:0.68rem; letter-spacing:0.13em; text-transform:uppercase; color:var(--slate); margin-bottom:9px;} .f input,.f select{ width:100%; padding:14px 15px; border:1px solid var(--rule); background:var(--white); font-family:var(--sans); font-size:0.98rem; color:var(--basalt); } .f input:focus,.f select:focus{border-color:var(--cobalt); outline:none;} .f input:focus-visible,.f select:focus-visible{outline:2px solid var(--cobalt); outline-offset:2px;} .ok{display:grid; grid-template-columns:auto 1fr; gap:13px; align-items:start; margin-bottom:24px;} .ok input{width:17px; height:17px; margin-top:2px; accent-color:var(--cobalt);} .ok label{font-size:0.83rem; line-height:1.55; color:var(--slate); font-family:var(--sans); letter-spacing:0; text-transform:none;} .fnote{font-size:0.78rem; color:var(--slate); margin-top:15px;} /* ---------- FOOTER ---------- */ footer{background:var(--basalt-2); color:rgba(241,242,240,0.56); padding:clamp(48px,6vw,76px) 0 34px; font-size:0.88rem;} .ft{display:grid; grid-template-columns:1.8fr 1fr 1fr 1fr; gap:clamp(28px,4vw,48px); padding-bottom:clamp(34px,4vw,52px);} @media (max-width:1024px){.ft{grid-template-columns:1.4fr 1fr 1fr;}} @media (max-width:768px){.ft{grid-template-columns:1fr 1fr;}} @media (max-width:520px){.ft{grid-template-columns:1fr;}} footer h4{font-family:var(--mono); color:var(--paper); font-size:0.68rem; font-weight:500; letter-spacing:0.16em; text-transform:uppercase; margin-bottom:17px;} footer ul{list-style:none; display:grid; gap:10px;} footer a{text-decoration:none; transition:color .18s;} footer a:hover{color:var(--paper);} .fine{border-top:1px solid var(--rule-dark); padding-top:26px; font-size:0.73rem; line-height:1.75; color:rgba(241,242,240,0.5); display:grid; gap:11px;} /* ---------- REVELADO AL SCROLL ---------- */ .rv{opacity:0; transform:translateY(14px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);} .rv.in{opacity:1; transform:none;} @media (prefers-reduced-motion:reduce){ .rv{opacity:1; transform:none; transition:none;} html{scroll-behavior:auto;} .btn,.nav-btn,.zone-list a{transition:none;} } /* ============================================================ ARTÍCULOS DEL BLOG — compartido por todos los posts ============================================================ */ .art{max-width:680px;} .crumb{font-family:var(--mono); font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--slate); margin-bottom:22px;} .crumb a{text-decoration:none; color:var(--cobalt);} .art h1{font-size:clamp(2rem,4.6vw,3.2rem); max-width:26ch; margin-bottom:20px;} .meta{font-family:var(--mono); font-size:0.73rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--slate); padding-bottom:30px; border-bottom:1px solid var(--rule); margin-bottom:36px;} .tldr{background:var(--basalt); color:var(--paper); padding:clamp(24px,3vw,34px); margin-bottom:clamp(34px,4vw,48px);} .tldr span{display:block; font-family:var(--mono); font-size:0.7rem; letter-spacing:0.16em; text-transform:uppercase; color:rgba(241,242,240,0.5); margin-bottom:14px;} .tldr p{font-size:1.06rem; line-height:1.6;} .art h2{font-size:clamp(1.35rem,2.4vw,1.75rem); margin:clamp(38px,5vw,54px) 0 14px;} .art h3{font-size:1.06rem; margin:26px 0 8px;} .art p{color:var(--slate); margin-bottom:16px; line-height:1.68;} .art ul,.art ol{margin:0 0 18px 20px; color:var(--slate); line-height:1.68;} .art li{margin-bottom:9px;} .art strong{color:var(--basalt); font-weight:600;} .art a{color:var(--cobalt);} .art figure{margin:clamp(28px,4vw,40px) 0;} .art figure img{width:100%; height:auto;} .art figcaption{font-family:var(--mono); font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--slate); margin-top:10px;} .art blockquote{border-left:2px solid var(--cobalt); padding:2px 0 2px 22px; margin:clamp(26px,3.4vw,36px) 0;} .art blockquote p{font-size:1.1rem; color:var(--basalt); margin:0;} .art blockquote cite{display:block; font-family:var(--mono); font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--slate); font-style:normal; margin-top:12px;} .scale{margin:30px 0 38px; border-top:1px solid var(--rule);} .scale div{display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:baseline; padding:15px 0; border-bottom:1px solid var(--rule);} @media (max-width:520px){.scale div{grid-template-columns:1fr; gap:6px;}} .scale b{font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:1.05rem; font-weight:500; color:var(--basalt); min-width:9ch;} .scale span{font-size:0.94rem; color:var(--slate);} .end{margin-top:clamp(44px,5vw,60px); padding-top:32px; border-top:1px solid var(--rule);} .end p{font-size:1.2rem; font-weight:600; letter-spacing:-0.02em; color:var(--basalt); margin-bottom:20px; max-width:34ch;} .disc{margin-top:clamp(40px,5vw,56px); padding-top:22px; border-top:1px solid var(--rule); font-size:0.79rem; color:var(--slate); line-height:1.7;} .more{margin-top:clamp(40px,5vw,54px); padding-top:26px; border-top:1px solid var(--rule);} .more h4{font-family:var(--mono); font-size:0.68rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--slate); margin-bottom:14px;} .more a{display:block; padding:12px 0; border-bottom:1px solid var(--rule); text-decoration:none; font-weight:600; letter-spacing:-0.015em; color:var(--basalt);} .more a:hover{color:var(--cobalt);} /* ---------- BOTÓN FLOTANTE DE WHATSAPP ---------- Recto y en cobalto, como el resto del sistema: un burbujón verde redondo delataría "plugin instalado" en vez de decisión de diseño. El glifo lo hace igual de reconocible. */ .wa{ position:fixed; right:20px; bottom:20px; z-index:90; display:inline-flex; align-items:center; gap:10px; padding:14px 18px; background:var(--cobalt); color:#fff; text-decoration:none; font-size:0.88rem; font-weight:600; letter-spacing:-0.01em; box-shadow:0 6px 24px rgba(16,20,22,0.28); transition:background-color .18s ease, transform .08s ease; } .wa:hover{background:var(--cobalt-hi);} .wa:active{transform:translateY(1.5px);} .wa svg{width:19px; height:19px; flex:0 0 auto; fill:currentColor;} @media (max-width:520px){ .wa{right:14px; bottom:14px; padding:14px; gap:0;} .wa span{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;} } @media (prefers-reduced-motion:reduce){.wa{transition:none;}} /* Teléfono en el menú desplegable */ .drawer .tel{display:flex; align-items:center; justify-content:space-between; gap:12px;} .drawer .tel b{font-family:var(--mono); font-weight:500; font-size:0.9rem; color:var(--cobalt);} /* ---------- Enlace "saltar al contenido" (WCAG 2.4.1) ---------- */ .skip-link{ position:absolute; left:12px; top:-60px; z-index:200; background:var(--cobalt); color:#fff; text-decoration:none; padding:12px 18px; font-size:0.88rem; font-weight:600; transition:top .15s ease; } .skip-link:focus{top:12px;} /* Aviso de cookies y panel de preferencias: los estilos viven ahora dentro de cookie-notice.js (inyectados en