/* ==========================================================================
   SEOawards 2026 — Sistema de diseño
   Basado en la maqueta entregada (SEOawards Home). Convierte los estilos
   inline de la maqueta en un sistema de clases responsive.
   ========================================================================== */

/* ---------- Tipografía ---------- */
@font-face{font-family:'Inter';font-style:normal;font-weight:200 700;font-display:swap;
  src:url('/assets/fonts/inter/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:200 700;font-display:swap;
  src:url('/assets/fonts/inter/inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* ---------- Tokens ---------- */
:root{
  --ink:#030d16;          /* fondo base */
  --ink-2:#061726;
  --deep:#081f33;         /* azul profundo */
  --indigo:#424e98;       /* indigo de marca */
  --indigo-2:#2b3768;
  --indigo-3:#1b2a54;
  --mint:#53f6c6;         /* acento principal */
  --seoday-green:#00fe81;
  --seoday-purple:#1b0848;
  --seoday-purple-2:#14063a;
  --white:#fff;

  --txt-on-dark:rgba(255,255,255,.72);
  --txt-on-dark-soft:rgba(255,255,255,.6);
  --txt-on-light:rgba(3,13,22,.62);
  --line-dark:rgba(255,255,255,.09);

  --container:1200px;
  --gutter:24px;
  --radius-card:22px;
  --radius-lg:26px;
  --header-h:74px;

  /* Escala fluida: respeta el tamaño de la maqueta en desktop y baja
     de forma continua en pantallas menores. */
  --fs-hero:clamp(30px,1.55rem + 2.1vw,46px);
  --fs-h2:clamp(28px,1.5rem + 1.6vw,44px);
  --fs-h2-lg:clamp(32px,1.6rem + 2.2vw,52px);
  --fs-h3:clamp(21px,1.2rem + .5vw,24px);
  --fs-lead:clamp(16px,.98rem + .32vw,19px);
  --fs-body:clamp(14px,.9rem + .15vw,16px);

  --sec-y:clamp(64px,7.7vw,110px);
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px);}
body{
  margin:0;background:var(--ink);color:var(--white);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;line-height:1.5;letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--mint);text-decoration:none;transition:color .25s ease;}
h1,h2,h3,h4,p{margin:0;}
button{font-family:inherit;}
:focus-visible{outline:2px solid var(--mint);outline-offset:3px;border-radius:6px;}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}
}

.br-wide{display:inline;}
@media (max-width:960px){.br-wide{display:none;}}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
/* El enlace de salto debe aparecer al recibir el foco; si no, no sirve de nada. */
a.sr-only:focus{
  position:fixed;top:12px;left:12px;z-index:100;
  width:auto;height:auto;margin:0;padding:12px 20px;overflow:visible;clip:auto;
  border-radius:999px;background:var(--mint);color:var(--ink);
  font-size:15px;font-weight:600;box-shadow:0 12px 32px rgba(3,13,22,.5);
}

/* Los ítems de rejilla tienen un mínimo automático igual a su contenido, que
   puede ensanchar la pista y desbordar el contenedor en pantallas estrechas. */
.info-card,.cat-card,.jury-card,.seoday-card,.step,.weight-card,.participant,
.counter,.footer-col,.sponsor__form,.hero__copy,.hero__visual,.prose,.split__media{min-width:0;}

/* ---------- Layout ---------- */
.container{width:100%;max-width:calc(var(--container) + var(--gutter) * 2);margin:0 auto;padding-inline:var(--gutter);}
.section{padding-block:var(--sec-y);}

/* ---------- Animaciones ---------- */
@keyframes pulseGlow{0%,100%{opacity:.45}50%{opacity:.85}}
@keyframes chevUp{0%{opacity:.25;transform:translateY(4px)}45%{opacity:1;transform:translateY(0)}100%{opacity:.25;transform:translateY(-4px)}}
@keyframes revealUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}

/* Reveal: lo controla el JS con IntersectionObserver (predecible en todos los
   navegadores y con las capturas). Sin JS, todo queda visible. */
.js [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1);}
.js [data-reveal].is-visible{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1;transform:none;}
}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 26px;border-radius:999px;border:1px solid transparent;
  font-size:15px;font-weight:600;line-height:1;white-space:nowrap;cursor:pointer;
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease,border-color .25s ease,color .25s ease;
}
.btn--mint{background:var(--mint);color:var(--ink);box-shadow:0 14px 40px rgba(83,246,198,.28);}
.btn--mint:hover{transform:translateY(-2px);box-shadow:0 18px 48px rgba(83,246,198,.42);color:var(--ink);}
.btn--ghost{border-color:rgba(255,255,255,.28);color:var(--white);font-weight:500;}
.btn--ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.5);color:var(--white);}
.btn--lg{padding:22px 44px;font-size:18px;font-weight:700;box-shadow:0 20px 55px rgba(83,246,198,.4);}
.btn--lg:hover{transform:translateY(-3px);box-shadow:0 26px 65px rgba(83,246,198,.55);}
.btn--sm{padding:14px 22px;font-size:14px;font-weight:700;}
.btn--green{background:var(--seoday-green);color:var(--seoday-purple);box-shadow:0 10px 26px rgba(0,254,129,.28);}
.btn--green:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(0,254,129,.4);color:var(--seoday-purple);}
.btn--block{width:100%;}
.btn__chev{font-size:15px;line-height:1;}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position:sticky;top:0;z-index:40;
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  background:rgba(3,13,22,.72);border-bottom:1px solid rgba(255,255,255,.07);
}
.site-header__inner{
  display:flex;align-items:center;justify-content:space-between;gap:clamp(16px,3vw,48px);
  padding-block:24px;min-height:var(--header-h);
}
.site-header__logo{display:flex;align-items:center;padding-block:7px;}
.site-header__logo img{height:26px;width:auto;}
.site-nav{display:flex;align-items:center;gap:clamp(18px,2.4vw,40px);font-size:15px;font-weight:400;color:var(--txt-on-dark);white-space:nowrap;}
.site-nav a:not(.btn){color:inherit;}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--mint);}
.site-nav .btn{flex:none;padding:10px 20px;font-size:15px;line-height:20px;box-shadow:none;}
.site-nav .btn--mint:hover{background:var(--white);transform:none;}

.nav-toggle{
  display:none;width:44px;height:44px;flex:none;align-items:center;justify-content:center;
  background:none;border:1px solid rgba(255,255,255,.2);border-radius:12px;cursor:pointer;padding:0;
}
.nav-toggle__bars{position:relative;display:block;width:20px;height:2px;background:var(--white);border-radius:2px;transition:background .2s ease;}
.nav-toggle__bars::before,.nav-toggle__bars::after{content:'';position:absolute;left:0;width:20px;height:2px;background:var(--white);border-radius:2px;transition:transform .28s ease,top .28s ease;}
.nav-toggle__bars::before{top:-6px;}
.nav-toggle__bars::after{top:6px;}
.nav-open .nav-toggle__bars{background:transparent;}
.nav-open .nav-toggle__bars::before{top:0;transform:rotate(45deg);}
.nav-open .nav-toggle__bars::after{top:0;transform:rotate(-45deg);}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative;overflow:hidden;
  padding:clamp(48px,6.7vw,96px) 0 clamp(64px,8.4vw,120px);
  background:
    linear-gradient(to bottom,rgba(3,13,22,0) 30%,rgba(3,13,22,.55) 62%,var(--ink) 92%),
    radial-gradient(105% 75% at 74% 8%,var(--indigo) 0%,var(--indigo-3) 34%,var(--deep) 66%,var(--ink) 100%);
}
.hero__glow{position:absolute;inset:0;background:radial-gradient(50% 40% at 76% 34%,rgba(83,246,198,.20),transparent 70%);animation:pulseGlow 7s ease-in-out infinite;pointer-events:none;}
.hero__grid{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(24px,4vw,40px);}
.hero__title{margin:0 0 26px;font-size:var(--fs-hero);line-height:1.18;font-weight:700;letter-spacing:-.025em;color:var(--white);text-wrap:balance;}
.hero__title .accent{color:var(--mint);}
.hero__lead{margin:0 0 40px;font-size:var(--fs-lead);line-height:1.6;font-weight:300;color:var(--white);max-width:34em;text-wrap:pretty;}
.hero__actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.hero__visual{position:relative;min-height:clamp(320px,54vw,780px);display:flex;align-items:center;justify-content:center;}
.hero__ring{position:absolute;border-radius:999px;pointer-events:none;}
.hero__ring--glow{width:min(430px,84%);aspect-ratio:1;background:radial-gradient(circle,rgba(83,246,198,.30),transparent 68%);filter:blur(18px);animation:pulseGlow 6s ease-in-out infinite;}
.hero__ring--mid{width:min(520px,100%);aspect-ratio:1;border:1px solid rgba(255,255,255,.08);}
.hero__ring--out{width:min(660px,126%);aspect-ratio:1;border:1px solid rgba(255,255,255,.05);}
.hero__trophy-wrap{display:flex;justify-content:center;width:100%;}
.hero__trophy{position:relative;width:min(680px,120%);height:auto;}
@supports (animation-timeline:scroll(root)){
  @media (min-width:900px) and (prefers-reduced-motion:no-preference){
    .hero__trophy-wrap{animation:parallaxUp linear both;animation-timeline:scroll(root);animation-range:0 1100px;}
    @keyframes parallaxUp{from{transform:translateY(0)}to{transform:translateY(-120px)}}
  }
}

/* ==========================================================================
   Qué son / contadores
   ========================================================================== */
.about{padding:0 0 var(--sec-y);background:linear-gradient(180deg,var(--ink) 0%,var(--ink-2) 55%,var(--ink) 100%);}
.about__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:-60px;}
.info-card{
  position:relative;display:flex;flex-direction:column;
  padding:34px 30px 30px;border-radius:var(--radius-card);
  border:1px solid var(--line-dark);
  background:linear-gradient(165deg,rgba(66,78,152,.30),rgba(3,13,22,.85));
  box-shadow:0 24px 60px rgba(3,13,22,.5);min-height:260px;
}
.info-card::before{content:'';position:absolute;top:0;left:30px;right:30px;height:1px;background:linear-gradient(90deg,transparent,rgba(83,246,198,.6),transparent);}
.info-card__title{margin:0 0 16px;font-size:var(--fs-h3);line-height:1.2;font-weight:600;color:var(--mint);}
.info-card__text{margin:0;font-size:15px;line-height:1.6;font-weight:300;color:var(--txt-on-dark);text-wrap:pretty;}

.counters{
  display:grid;grid-template-columns:1fr repeat(4,.5fr);align-items:center;gap:28px;
  margin-top:clamp(56px,8vw,96px);padding:44px 48px;border-radius:var(--radius-lg);
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(100deg,rgba(66,78,152,.22),rgba(3,13,22,.6));
}
.counters__title{margin:0;font-size:clamp(24px,1.3rem + 1vw,30px);line-height:1.12;font-weight:500;color:var(--mint);letter-spacing:-.03em;}
.counter{text-align:center;border-left:1px solid rgba(255,255,255,.1);}
.counter__num{font-size:clamp(34px,2rem + 1.4vw,48px);line-height:1;font-weight:600;color:var(--white);letter-spacing:-.03em;font-variant-numeric:tabular-nums;}
.counter__label{margin-top:10px;font-size:14px;font-weight:400;color:var(--mint);}

/* ==========================================================================
   Secciones claras
   ========================================================================== */
.section--light{background:var(--white);color:var(--ink);}
.section-head{margin-bottom:44px;}
.section-head--split{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.section-title{margin:0 0 14px;font-size:var(--fs-h2);line-height:1.12;font-weight:600;letter-spacing:-.025em;text-wrap:balance;}
.section-title .accent-indigo{color:var(--indigo);}
.section-title .accent{color:var(--mint);}
.section-sub{margin:0;max-width:62ch;font-size:17px;font-weight:300;color:var(--txt-on-light);line-height:1.6;text-wrap:pretty;}

/* ---------- Categorías / nominados ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.cat-card{
  position:relative;display:flex;align-items:flex-end;
  height:210px;padding:22px;border-radius:20px;overflow:hidden;
  background:var(--deep) center/cover no-repeat;color:var(--white);
  transition:box-shadow .3s ease,transform .3s ease;
}
.cat-card:hover{box-shadow:0 22px 50px rgba(66,78,152,.35);color:var(--white);transform:translateY(-3px);}
.cat-card__veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(3,13,22,.94) 0%,rgba(8,31,51,.78) 32%,rgba(66,78,152,.42) 66%,rgba(66,78,152,.1) 100%);}
.cat-card__chevs{position:absolute;top:20px;right:22px;display:grid;gap:4px;width:34px;}
.cat-card__chevs svg{width:34px;display:block;}
.cat-card__chevs svg:first-child{animation:chevUp 1.8s ease-in-out .35s infinite;filter:drop-shadow(0 0 8px rgba(83,246,198,.55));}
.cat-card__chevs svg:last-child{animation:chevUp 1.8s ease-in-out infinite;filter:drop-shadow(0 0 10px rgba(83,246,198,.7));}
.cat-card__name{position:relative;font-size:21px;font-weight:600;line-height:1.2;}

/* ==========================================================================
   Referente
   ========================================================================== */
.referente{position:relative;overflow:hidden;padding-block:clamp(72px,9vw,120px);background:linear-gradient(140deg,var(--indigo) 0%,var(--indigo-2) 45%,var(--deep) 100%);}
.referente__glow{position:absolute;width:500px;height:500px;border-radius:999px;background:radial-gradient(circle,rgba(83,246,198,.22),transparent 70%);filter:blur(20px);top:-120px;right:-80px;pointer-events:none;}
.referente__inner{position:relative;max-width:820px;margin:0 auto;text-align:center;}
.referente__title{margin:0 0 22px;font-size:var(--fs-h2-lg);line-height:1.1;font-weight:600;letter-spacing:-.03em;color:var(--white);text-wrap:balance;}
.referente__text{margin:0 auto 44px;font-size:clamp(16px,.95rem + .3vw,18px);line-height:1.6;font-weight:300;color:rgba(255,255,255,.82);max-width:54ch;text-wrap:pretty;}

/* ==========================================================================
   Jurado
   ========================================================================== */
/* 10 columnas y cada tarjeta ocupa 2: la fila 1 lleva 5 y la fila 2 arranca en la
   columna 2, quedando sus 4 tarjetas centradas y del mismo ancho (como la maqueta). */
.jury-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:20px;}
.jury-card{grid-column:span 2;border-radius:20px;overflow:hidden;border:1px solid rgba(3,13,22,.08);background:var(--ink);color:var(--white);display:flex;flex-direction:column;}
.jury-card:nth-child(6){grid-column:2 / span 2;}
.jury-card__photo{aspect-ratio:4/5;background:var(--ink) center/cover no-repeat;}
.jury-card__body{padding:20px;display:flex;flex-direction:column;flex:1;}
.jury-card__name{font-size:17px;font-weight:600;line-height:1.25;}
.jury-card__role{margin-top:4px;font-size:13px;font-weight:300;color:var(--txt-on-dark-soft);}
.jury-card__brand{margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.1);min-height:38px;display:flex;align-items:center;}
/* Tope por alto y por ancho: los logos anchos y los apaisados quedan
   ópticamente equilibrados pese a tener proporciones muy distintas. */
.jury-card__brand img{max-height:26px;max-width:min(120px,100%);width:auto;height:auto;object-fit:contain;}
.jury-card__tag{margin-top:auto;padding-top:10px;font-size:13px;color:var(--mint);line-height:1.35;}
.jury-card--no-brand .jury-card__tag{margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.1);}

/* ==========================================================================
   SEOday
   ========================================================================== */
.seoday{position:relative;overflow:hidden;padding-block:clamp(56px,7vw,96px);background:var(--seoday-purple-2) center 40%/cover no-repeat;}
.seoday__veil{position:absolute;inset:0;background:linear-gradient(120deg,rgba(27,8,72,.86),rgba(20,6,58,.68));}
.seoday__veil2{position:absolute;inset:0;background:radial-gradient(60% 80% at 20% 50%,rgba(0,254,129,.12),transparent 70%);}
.seoday__panel{
  position:relative;padding:clamp(24px,4vw,48px);border-radius:var(--radius-lg);
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(125deg,rgba(0,254,129,.20) 0%,rgba(66,16,128,.62) 46%,rgba(27,8,72,.42) 100%);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 24px 70px rgba(0,254,129,.12);
}
.seoday__logo{display:flex;justify-content:center;margin-bottom:20px;}
.seoday__logo img{height:clamp(40px,5vw,60px);width:auto;}
.seoday__title{margin:0 0 40px;font-size:clamp(22px,1.3rem + 1.3vw,34px);line-height:1.25;font-weight:500;color:var(--white);text-align:center;text-wrap:balance;}
.seoday__cards{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.seoday-card{display:flex;flex-direction:column;padding:28px;border-radius:18px;border:1px solid rgba(255,255,255,.14);background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(3,13,22,.4));}
.seoday-card__head{display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap;}
.seoday-card__head svg{display:block;border-radius:2px;flex:none;}
.seoday-card__country{font-size:clamp(17px,1rem + .3vw,19px);font-weight:700;color:var(--white);}
.seoday-card__text{margin:0 0 22px;font-size:var(--fs-body);line-height:1.6;font-weight:300;color:rgba(255,255,255,.88);}
.seoday-card__text--tight{margin-bottom:8px;}
.seoday-card__note{margin:0 0 22px;font-size:12px;font-weight:300;color:rgba(255,255,255,.55);line-height:1.5;}
.seoday-card .btn{margin-top:auto;white-space:normal;text-align:center;}
.seoday__meta{display:flex;justify-content:center;margin-top:28px;}
.seoday__meta-pill{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  padding:9px 18px;border-radius:999px;background:rgba(3,13,22,.45);
  font-size:14px;font-weight:600;color:var(--white);text-align:center;
}
.seoday__meta-pill .dot{color:rgba(255,255,255,.4);}

/* ==========================================================================
   Sponsor
   ========================================================================== */
.sponsor{padding-block:var(--sec-y);background:var(--white);}
.sponsor__panel{
  max-width:1080px;margin:0 auto;padding:clamp(28px,4vw,56px);border-radius:28px;
  background:linear-gradient(150deg,var(--deep),var(--ink) 70%);
  border:1px solid rgba(83,246,198,.16);
  display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,4vw,56px);
}
.sponsor__title{margin:0 0 18px;font-size:clamp(28px,1.5rem + 1.4vw,40px);line-height:1.08;font-weight:600;letter-spacing:-.04em;color:var(--white);text-wrap:balance;}
.sponsor__text{margin:0;max-width:56ch;font-size:15px;line-height:1.65;font-weight:300;color:rgba(255,255,255,.68);text-wrap:pretty;}
.sponsor__form{display:grid;gap:14px;align-content:start;}
.field{width:100%;padding:16px 18px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:var(--white);color:var(--ink);font-family:inherit;font-size:15px;outline:none;transition:border-color .2s ease,box-shadow .2s ease;}
.field::placeholder{color:rgba(3,13,22,.45);}
.field:focus{border-color:var(--mint);box-shadow:0 0 0 3px rgba(83,246,198,.25);}
textarea.field{resize:vertical;min-height:132px;}
.form-error{margin:-6px 0 0;font-size:13px;color:#ff9d9d;}
.form-success{padding:14px 18px;border-radius:12px;background:rgba(83,246,198,.14);border:1px solid rgba(83,246,198,.4);color:var(--mint);font-size:14px;}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{padding-block:var(--sec-y);background:linear-gradient(180deg,var(--ink),var(--deep));}
.faq__title{margin:0 0 44px;font-size:var(--fs-h2);line-height:1.12;font-weight:600;letter-spacing:-.025em;color:var(--white);}
.faq__list{display:grid;}
.faq-item{border-top:1px solid rgba(255,255,255,.12);}
.faq-item:last-child{border-bottom:1px solid rgba(255,255,255,.12);}
.faq-item__btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:26px 4px;background:none;border:none;color:var(--white);
  font-size:clamp(17px,1rem + .4vw,20px);font-weight:400;text-align:left;cursor:pointer;line-height:1.35;
}
.faq-item__chev{color:var(--mint);font-size:18px;transition:transform .3s ease;display:block;transform:rotate(90deg);flex:none;}
.faq-item[open] .faq-item__chev,.faq-item.is-open .faq-item__chev{transform:rotate(270deg);}
.faq-item__panel{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.2,.7,.2,1);}
.faq-item__panel p{margin:0 0 26px;padding-right:60px;max-width:66ch;font-size:var(--fs-body);line-height:1.6;font-weight:300;color:rgba(255,255,255,.65);}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{padding:clamp(48px,6vw,76px) 0 56px;background:var(--deep);border-top:1px solid rgba(255,255,255,.08);}
.site-footer__grid{display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr;gap:clamp(28px,4vw,48px);}
.site-footer__logo{height:28px;width:auto;margin-bottom:26px;}
.site-footer__about{margin:0 0 28px;font-size:15px;line-height:1.65;font-weight:300;color:var(--txt-on-dark);max-width:26em;}
.site-footer__note{margin:0 0 20px;font-size:15px;line-height:1.6;font-weight:300;color:var(--txt-on-dark);}
.site-footer .btn{padding:14px 26px;box-shadow:none;}
.footer-col__title{font-size:16px;font-weight:600;color:var(--white);margin-bottom:18px;}
.footer-col__links{display:grid;gap:12px;font-size:15px;font-weight:300;}
.footer-col__links a{display:inline-block;color:rgba(255,255,255,.78);}
.footer-col__links a:hover{color:var(--mint);}
.site-footer__bottom{
  margin-top:56px;padding-top:36px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(24px,4vw,48px);flex-wrap:wrap;
}
.site-footer__label{font-size:13px;font-weight:400;color:rgba(255,255,255,.5);margin-bottom:20px;}
.site-footer__brands{display:flex;gap:26px;align-items:center;flex-wrap:wrap;}
.site-footer__brands a{display:flex;align-items:center;transition:transform .25s ease;}
.site-footer__brands a:hover{transform:translateY(-2px);}
.site-footer__brands img{max-height:30px;max-width:130px;width:auto;height:auto;object-fit:contain;opacity:.85;transition:opacity .25s ease;}
.site-footer__brands a:hover img{opacity:1;}
.social{display:flex;gap:12px;}
.social a{width:40px;height:40px;border:1px solid rgba(255,255,255,.28);border-radius:999px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.82);transition:border-color .25s ease,color .25s ease,background .25s ease;}
.social a:hover{border-color:var(--mint);color:var(--ink);background:var(--mint);}
.social svg{display:block;}
.site-footer__legal{width:100%;max-width:var(--container);margin:36px auto 0;padding-top:24px;border-top:1px solid rgba(255,255,255,.08);font-size:13px;color:rgba(255,255,255,.45);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Laptops pequeñas */
@media (max-width:1100px){
  .jury-grid{grid-template-columns:repeat(3,1fr);}
  .jury-card{grid-column:auto;}
  .jury-card:nth-child(6){grid-column:auto;}
  .counters{grid-template-columns:1fr 1fr;gap:24px 20px;padding:36px 32px;}
  .counters__title{grid-column:1/-1;}
  .counter{border-left:none;padding:4px 0;}
  .counter:nth-child(odd){border-right:1px solid rgba(255,255,255,.1);}
}

/* Tablet */
@media (max-width:960px){
  :root{--header-h:68px;}
  .site-header__inner{padding-block:14px;}
  .nav-toggle{display:flex;}
  .site-nav{
    position:fixed;inset:var(--header-h) 0 auto 0;flex-direction:column;align-items:stretch;
    gap:0;padding:8px var(--gutter) 24px;background:rgba(3,13,22,.98);
    -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
    border-bottom:1px solid rgba(255,255,255,.1);
    max-height:calc(100dvh - var(--header-h));overflow-y:auto;
    transform:translateY(-8px);opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .25s ease,transform .25s ease,visibility .25s;
  }
  .nav-open .site-nav{transform:none;opacity:1;visibility:visible;pointer-events:auto;}
  .site-nav a{padding:16px 4px;border-bottom:1px solid rgba(255,255,255,.08);font-size:16px;white-space:normal;}
  .site-nav .btn{margin-top:18px;padding:15px 20px;border-bottom:none;justify-content:center;}

  .hero__grid{grid-template-columns:1fr;gap:clamp(24px,5vw,48px);}
  .hero__visual{order:-1;min-height:clamp(280px,58vw,440px);}
  .hero__trophy{width:min(420px,78%);}

  .about__cards{grid-template-columns:1fr 1fr;margin-top:-40px;}
  .info-card{min-height:0;}
  .cat-grid{grid-template-columns:repeat(2,1fr);}
  .seoday__cards{grid-template-columns:1fr;}
  .sponsor__panel{grid-template-columns:1fr;}
  .site-footer__grid{grid-template-columns:1fr 1fr;}

  /* Al quedar a una columna, el texto ocupaba todo el ancho y la línea se
     hacía incómoda de leer; se limita la medida. */
  .hero__lead{max-width:50ch;}
  .seoday-card__text,.seoday-card__note,.weight-card__text,.weight-card ul,.prose p{max-width:62ch;}
  .site-footer__grid>*:first-child{grid-column:1/-1;}
  .faq-item__panel p{padding-right:0;}
}

/* Áreas de toque cómodas en pantallas táctiles */
@media (max-width:834px){
  .footer-col__links{gap:2px;}
  .footer-col__links a{padding-block:9px;}
  .site-footer__brands a{padding-block:8px;}
}

/* Móvil grande */
@media (max-width:720px){
  :root{--gutter:20px;}
  .jury-grid{grid-template-columns:repeat(2,1fr);gap:16px;}
  .about__cards{grid-template-columns:1fr;gap:16px;margin-top:-32px;}
  .info-card{padding:28px 24px 26px;}
  .info-card::before{left:24px;right:24px;}
  .section-head{margin-bottom:32px;}
  .site-footer__bottom{flex-direction:column;align-items:flex-start;gap:32px;}
  .site-footer__brands{gap:20px 24px;}
  .seoday__panel{padding:24px 20px;}
  .seoday__title{margin-bottom:28px;}
  .seoday-card{padding:22px 20px;}
  .counters{padding:28px 22px;margin-top:48px;}
  .faq-item__btn{padding:20px 2px;gap:14px;}
}

/* Móvil */
@media (max-width:560px){
  .hero__actions{gap:12px;}
  .hero__actions .btn{width:100%;}
  .cat-grid{grid-template-columns:1fr;gap:14px;}
  .cat-card{height:170px;}
  .counters{grid-template-columns:1fr 1fr;gap:20px 16px;}
  .counter{border-right:none!important;}
  .counter__num{font-size:34px;}
  .site-footer__grid{grid-template-columns:1fr;gap:32px;}
  .site-footer__grid>*:first-child{grid-column:auto;}
  .site-footer .btn,.referente .btn{width:100%;}
  .referente__text{margin-bottom:32px;}
  .seoday__meta-pill{flex-direction:column;gap:4px;padding:12px 18px;}
  .seoday__meta-pill .dot{display:none;}
  .btn--lg{padding:18px 28px;font-size:16px;}
}

/* Móvil pequeño */
@media (max-width:400px){
  /* A 320px el logo casi tocaba el botón del menú. */
  .site-header__logo img{height:22px;}
  .jury-grid{gap:12px;}
  .jury-card__body{padding:16px 14px;}
  .jury-card__name{font-size:15px;}
  .jury-card__role,.jury-card__tag{font-size:12px;}
  .jury-card__brand{margin-top:12px;padding-top:12px;}
  .site-footer__brands img{max-height:24px;max-width:104px;}
}

/* ==========================================================================
   Páginas internas
   ========================================================================== */

/* ---------- Hero de página interna ---------- */
.page-hero{
  position:relative;overflow:hidden;
  padding:clamp(48px,7vw,88px) 0 clamp(40px,5vw,64px);
  background:
    linear-gradient(to bottom,rgba(3,13,22,0) 40%,rgba(3,13,22,.65) 75%,var(--ink) 100%),
    radial-gradient(120% 90% at 70% 0%,var(--indigo) 0%,var(--indigo-3) 32%,var(--deep) 64%,var(--ink) 100%);
  text-align:center;
}
.page-hero__glow{position:absolute;inset:0;background:radial-gradient(45% 55% at 50% 10%,rgba(83,246,198,.16),transparent 70%);animation:pulseGlow 7s ease-in-out infinite;pointer-events:none;}
.page-hero__inner{position:relative;max-width:820px;margin:0 auto;}
.page-hero__eyebrow{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:20px;
  padding:8px 16px;border-radius:999px;border:1px solid rgba(83,246,198,.35);
  background:rgba(83,246,198,.08);font-size:13px;font-weight:600;color:var(--mint);
  letter-spacing:.02em;text-transform:uppercase;
}
.page-hero__title{margin:0 0 18px;font-size:var(--fs-h2-lg);line-height:1.1;font-weight:600;letter-spacing:-.03em;color:var(--white);text-wrap:balance;}
.page-hero__title .accent{color:var(--mint);}
.page-hero__text{margin:0 auto;font-size:var(--fs-lead);line-height:1.6;font-weight:300;color:rgba(255,255,255,.78);max-width:62ch;text-wrap:pretty;}
.page-hero__actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:34px;}

/* ---------- Barra de anclas por país ---------- */
.anchor-bar{
  position:sticky;top:var(--header-h);z-index:30;
  background:rgba(3,13,22,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-block:1px solid rgba(255,255,255,.08);
}
.anchor-bar__inner{display:flex;gap:10px;align-items:center;overflow-x:auto;padding-block:14px;scrollbar-width:thin;}
.anchor-bar__inner::-webkit-scrollbar{height:4px;}
.anchor-bar__inner::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:4px;}
.anchor-chip{
  display:inline-flex;align-items:center;gap:8px;flex:none;
  padding:9px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.04);color:var(--txt-on-dark);
  font-size:14px;font-weight:500;white-space:nowrap;transition:all .25s ease;
}
.anchor-chip:hover{border-color:var(--mint);color:var(--mint);background:rgba(83,246,198,.08);}
.anchor-chip img{height:14px;width:auto;border-radius:2px;}

/* ---------- Bloques de país ---------- */
.country-block{padding-block:clamp(40px,5vw,64px);scroll-margin-top:calc(var(--header-h) + 70px);}
.country-block:nth-child(even){background:linear-gradient(180deg,rgba(6,23,38,.6),transparent);}
.country-head{display:flex;align-items:center;gap:16px;margin-bottom:28px;flex-wrap:wrap;}
.country-head__title{margin:0;font-size:clamp(24px,1.4rem + 1vw,34px);font-weight:600;letter-spacing:-.025em;color:var(--white);display:flex;align-items:center;gap:14px;}
.country-head__title img{height:26px;width:auto;border-radius:3px;}
.country-head__badge{
  display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;
  background:rgba(83,246,198,.12);border:1px solid rgba(83,246,198,.35);
  font-size:13px;font-weight:600;color:var(--mint);
}

/* ---------- Grilla de participantes ---------- */
.participants{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;}
.participant{
  position:relative;aspect-ratio:1;border-radius:18px;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  padding:clamp(18px,2.4vw,28px);text-align:center;
  border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(155deg,rgba(66,78,152,.42) 0%,rgba(27,42,84,.55) 45%,rgba(8,31,51,.9) 100%);
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.participant::after{
  content:'';position:absolute;top:0;left:24%;right:24%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(83,246,198,.5),transparent);
}
.participant:hover,.participant:focus-within{transform:translateY(-4px);box-shadow:0 22px 50px rgba(66,78,152,.4);border-color:rgba(83,246,198,.45);}
/* flex:1 hace que todos los logos ocupen la misma caja y los dominios queden alineados. */
/* El alto manda en los logos cuadrados (Banco Azteca, GAP, H&M…) y el ancho en los
   apaisados (Aeroméxico llega a 9:1). Con un tope de alto bajo, los cuadrados se
   veían mucho más pequeños que el resto, así que se les deja algo más de aire. */
.participant__logo{flex:1 1 auto;min-height:0;max-height:70%;width:min(72%,180px);object-fit:contain;transition:opacity .3s ease;}
.participant__brand{flex:1 1 auto;display:flex;align-items:center;font-size:clamp(17px,1rem + .8vw,22px);font-weight:600;color:var(--white);letter-spacing:-.02em;line-height:1.2;word-break:break-word;}
.participant__domain{font-size:13px;font-weight:300;color:rgba(255,255,255,.55);word-break:break-all;line-height:1.3;transition:opacity .3s ease;}
.participant__overlay{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:18px;background:rgba(3,13,22,.78);
  opacity:0;transition:opacity .3s ease;
}
.participant:hover .participant__overlay,.participant:focus-within .participant__overlay{opacity:1;}
.participant .btn{padding:12px 26px;font-size:14px;}
.participant--voted{border-color:var(--mint);box-shadow:0 0 0 1px rgba(83,246,198,.5),0 18px 44px rgba(83,246,198,.18);}
.participant__check{
  position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:999px;
  background:var(--mint);color:var(--ink);display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:700;box-shadow:0 6px 18px rgba(83,246,198,.45);z-index:2;
}
.participants--voted .participant{opacity:.5;}
.participants--voted .participant--voted{opacity:1;}
.participants--voted .participant__overlay{display:none;}

/* ---------- Estado vacío ---------- */
.empty-state{
  max-width:620px;margin:0 auto;padding:clamp(32px,5vw,56px);text-align:center;
  border-radius:var(--radius-card);border:1px dashed rgba(255,255,255,.2);
  background:linear-gradient(165deg,rgba(66,78,152,.18),rgba(3,13,22,.7));
}
.empty-state__title{margin:0 0 12px;font-size:22px;font-weight:600;color:var(--white);}
.empty-state__text{margin:0 0 26px;font-size:15px;line-height:1.6;font-weight:300;color:var(--txt-on-dark);}

/* ---------- Pasos (info) ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.step{
  position:relative;padding:32px 28px;border-radius:var(--radius-card);
  border:1px solid var(--line-dark);
  background:linear-gradient(165deg,rgba(66,78,152,.28),rgba(3,13,22,.85));
  box-shadow:0 24px 60px rgba(3,13,22,.45);
}
.step__num{
  display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-bottom:18px;
  border-radius:999px;background:rgba(83,246,198,.12);border:1px solid rgba(83,246,198,.4);
  font-size:18px;font-weight:700;color:var(--mint);
}
.step__title{margin:0 0 10px;font-size:19px;font-weight:600;color:var(--white);}
.step__text{margin:0;font-size:15px;line-height:1.6;font-weight:300;color:var(--txt-on-dark);text-wrap:pretty;}

/* ---------- Split de contenido ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:center;}
.prose p{margin:0 0 18px;font-size:var(--fs-lead);line-height:1.7;font-weight:300;color:var(--txt-on-dark);text-wrap:pretty;}
.prose p:last-child{margin-bottom:0;}
.prose strong,.prose .accent{color:var(--mint);font-weight:600;}
.split__media{
  display:flex;align-items:center;justify-content:center;
  padding:clamp(20px,3vw,40px);border-radius:var(--radius-card);overflow:hidden;
  border:1px solid var(--line-dark);background:linear-gradient(165deg,rgba(66,78,152,.3),rgba(3,13,22,.8));
}
.split__media img{max-height:min(52vh,440px);width:auto;}

/* ---------- Tarjetas de ponderación ---------- */
.weight-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.weight-card{
  display:flex;flex-direction:column;padding:34px 30px;border-radius:var(--radius-card);
  border:1px solid var(--line-dark);
  background:linear-gradient(165deg,rgba(66,78,152,.28),rgba(3,13,22,.85));
}
.weight-card__pct{font-size:clamp(38px,2rem + 2vw,56px);line-height:1;font-weight:700;color:var(--mint);letter-spacing:-.03em;}
.weight-card__title{margin:10px 0 16px;font-size:20px;font-weight:600;color:var(--white);}
.weight-card__text{margin:0 0 16px;font-size:15px;line-height:1.6;font-weight:300;color:var(--txt-on-dark);}
.weight-card ul{margin:0 0 16px;padding-left:20px;display:grid;gap:8px;font-size:15px;font-weight:300;color:var(--txt-on-dark);line-height:1.55;}
.weight-card li::marker{color:var(--mint);}
.weight-card .btn{margin-top:auto;align-self:flex-start;}

/* ==========================================================================
   Modal de voto
   ========================================================================== */
.modal{
  position:fixed;inset:0;z-index:80;display:none;
  align-items:center;justify-content:center;padding:20px;
}
.modal.is-open{display:flex;}
.modal__backdrop{position:absolute;inset:0;background:rgba(3,13,22,.82);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
.modal__dialog{
  position:relative;width:100%;max-width:460px;max-height:calc(100dvh - 40px);overflow-y:auto;
  padding:clamp(26px,4vw,38px);border-radius:24px;
  background:linear-gradient(160deg,var(--deep),var(--ink) 72%);
  border:1px solid rgba(83,246,198,.22);box-shadow:0 40px 90px rgba(3,13,22,.7);
}
.modal__close{
  position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:999px;
  border:1px solid rgba(255,255,255,.18);background:none;color:var(--white);
  font-size:18px;line-height:1;cursor:pointer;transition:all .25s ease;
}
.modal__close:hover{border-color:var(--mint);color:var(--mint);}
.modal__title{margin:0 0 8px;font-size:24px;font-weight:600;color:var(--white);letter-spacing:-.02em;padding-right:32px;}
.modal__text{margin:0 0 24px;font-size:15px;line-height:1.6;font-weight:300;color:var(--txt-on-dark);}
.modal__form{display:grid;gap:12px;}

/* ==========================================================================
   Responsive de páginas internas
   ========================================================================== */
@media (max-width:1100px){
  .participants{grid-template-columns:repeat(4,1fr);}
}
@media (max-width:960px){
  .steps{grid-template-columns:1fr 1fr;}
  .split{grid-template-columns:1fr;}
  .split__media{order:-1;}
  .weight-grid{grid-template-columns:1fr;}
  .participants{grid-template-columns:repeat(3,1fr);gap:14px;}
  .anchor-bar{top:var(--header-h);}
}
@media (max-width:720px){
  .steps{grid-template-columns:1fr;gap:16px;}
  .step{padding:26px 22px;}
  .participants{grid-template-columns:repeat(2,1fr);}
  .participant .btn{padding:10px 20px;font-size:13px;}
  .page-hero__actions .btn{width:100%;}
  .country-head{margin-bottom:20px;}
}
@media (max-width:420px){
  .participants{gap:12px;}
  .participant .btn{padding:9px 16px;font-size:12px;}
}

/* ---------- Participante sin logo ---------- */
/* Si alguna marca no tuviera su logo, la tarjeta se compone tipográficamente. */
.participant--fallback{background:linear-gradient(155deg,var(--indigo) 0%,var(--indigo-2) 48%,var(--deep) 100%);}

@media (hover:none){
  .participant__overlay{opacity:1;background:linear-gradient(to top,rgba(3,13,22,.9) 0%,rgba(3,13,22,.25) 60%,transparent 100%);align-items:flex-end;}
  .participant__domain{opacity:0;}
}

/* ==========================================================================
   Resultados (página interna con token)
   ========================================================================== */
.results-block{margin-bottom:clamp(32px,4vw,56px);}
.results-block__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap;}
.results-block__title{margin:0;font-size:clamp(20px,1.1rem + .8vw,26px);font-weight:600;color:var(--mint);letter-spacing:-.02em;}
.results-block__total{font-size:14px;font-weight:300;color:var(--txt-on-dark-soft);}
.table-wrap{overflow-x:auto;border-radius:var(--radius-card);border:1px solid var(--line-dark);background:linear-gradient(165deg,rgba(66,78,152,.18),rgba(3,13,22,.85));}
.table{width:100%;min-width:520px;border-collapse:collapse;font-size:15px;}
.table th,.table td{padding:14px 20px;text-align:left;border-bottom:1px solid rgba(255,255,255,.07);}
.table thead th{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mint);background:rgba(3,13,22,.5);white-space:nowrap;}
.table tbody tr:last-child th,.table tbody tr:last-child td{border-bottom:none;}
.table tbody tr:hover{background:rgba(83,246,198,.04);}
.table td.num,.table th.num{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;}
.table__country{display:flex;align-items:center;gap:10px;font-weight:400;color:var(--txt-on-dark);white-space:nowrap;}
.table__country img{height:14px;width:auto;border-radius:2px;}
.table__brand{font-weight:500;color:var(--white);}
.table__bar{display:block;height:4px;margin-top:6px;border-radius:4px;background:linear-gradient(90deg,var(--mint),rgba(83,246,198,.25));}
@media (max-width:600px){
  .table th,.table td{padding:12px 14px;font-size:14px;}
}

/* ==========================================================================
   Página 404
   ========================================================================== */
/* Atajos a las secciones principales. Reutiliza el fondo y el borde de las
   tarjetas de la home para que la página de error no se sienta de otro sitio. */
.error-links{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px);}
.error-links__item{
  position:relative;display:flex;flex-direction:column;gap:8px;
  padding:28px 56px 26px 28px;border-radius:var(--radius-card);
  border:1px solid var(--line-dark);
  background:linear-gradient(165deg,rgba(66,78,152,.30),rgba(3,13,22,.85));
  color:inherit;transition:transform .25s ease,border-color .25s ease;
}
.error-links__item:hover{transform:translateY(-3px);border-color:rgba(83,246,198,.45);}
.error-links__title{font-size:var(--fs-h3);line-height:1.25;font-weight:600;color:var(--mint);}
.error-links__text{font-size:15px;line-height:1.6;font-weight:300;color:var(--txt-on-dark);text-wrap:pretty;}
.error-links__chev{
  position:absolute;top:28px;right:26px;
  font-size:20px;line-height:1;color:var(--mint);
  opacity:.55;transition:opacity .25s ease,transform .25s ease;
}
.error-links__item:hover .error-links__chev{opacity:1;transform:translateX(3px);}

@media (max-width:900px){
  .error-links{grid-template-columns:1fr;}
}
