/* =========================================================
   1000 días · 1000 obras · 1000 razones
   Sistema visual de la campaña
   ========================================================= */

:root{
  --azul:      #00374c;
  --azul-900:  #00293a;
  --teal:      #00adb4;
  --coral:     #f26054;
  --amarillo:  #f8c60a;
  --verde:     #87b864;
  --crema:     #fff4df;
  --crema-2:   #fdf8ee;
  --blanco:    #ffffff;

  --radius:    28px;
  --radius-sm: 14px;
  --wrap:      1180px;
  --ease:      cubic-bezier(.22,.9,.28,1);

  --shadow:    0 18px 50px -24px rgba(0,55,76,.35);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--crema);
  color:var(--azul);
  font-family:'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,video{ max-width:100%; display:block; }
button{ font:inherit; cursor:pointer; }
a{ color:inherit; }

.wrap{ width:min(100% - 40px, var(--wrap)); margin-inline:auto; }

/* ---------- Tipografía ---------- */
.h-xl{
  font-size:clamp(2rem, 5.2vw, 3.6rem);
  font-weight:800;
  line-height:1.06;
  letter-spacing:-.02em;
  margin:.2em 0 .8em;
}
.h-xl em{ font-style:normal; }
.h-xl--light{ color:var(--crema); }
.h-md{ font-size:clamp(1.3rem,2.6vw,1.9rem); font-weight:800; letter-spacing:-.01em; margin:0 0 .3em; }

.c-crema{ color:var(--crema); }
.c-teal{ color:var(--teal); }
.c-coral{ color:var(--coral); }
.c-verde{ color:var(--verde); }
.c-amarillo{ color:var(--amarillo); }

.eyebrow{
  display:flex; align-items:center; gap:12px;
  font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  margin:0;
}
.eyebrow--light{ color:var(--crema); }
.tag{ width:6px; height:22px; border-radius:3px; display:inline-block; flex:none; }
.tag--coral{ background:var(--coral); }
.tag--teal{ background:var(--teal); }
.tag--verde{ background:var(--verde); }
.tag--amarillo{ background:var(--amarillo); }

.fuente{ font-size:.78rem; opacity:.55; margin-top:26px; }

/* ---------- Reveal ----------
   Solo se ocultan si JS está activo: sin JS, todo el contenido se ve. */
.js .reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .8s var(--ease) var(--d,0s), transform .8s var(--ease) var(--d,0s);
}
.js .reveal.is-in{ opacity:1; transform:none; }

/* ---------- Acceso provisorio ---------- */
.gate{
  position:fixed; inset:0; z-index:200;
  display:grid; place-items:center; padding:24px;
  background:var(--azul); color:var(--crema);
}
.gate::after{
  content:''; position:absolute; right:-180px; bottom:-180px;
  width:520px; height:520px; border-radius:50%; background:var(--teal); opacity:.22;
}
html.unlocked .gate{ display:none; }
html:not(.unlocked) body{ overflow:hidden; }

.gate__box{
  position:relative; z-index:2; width:min(100%, 460px); text-align:center;
}
.gate__logo{
  display:inline-block; background:var(--coral); color:var(--crema);
  font-weight:800; font-size:1.3rem; letter-spacing:.06em;
  padding:6px 14px; border-radius:10px; margin-bottom:26px;
}
.gate__title{
  font-size:clamp(1.5rem,4vw,2.1rem); font-weight:800;
  letter-spacing:-.02em; line-height:1.15; margin:0 0 12px;
}
.gate__txt{ opacity:.7; font-size:.92rem; margin:0 0 28px; }
.gate__row{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.gate__input{
  flex:1 1 220px; min-width:0;
  background:rgba(255,244,223,.1); border:2px solid rgba(255,244,223,.25);
  border-radius:999px; padding:13px 22px;
  color:var(--crema); font:inherit; font-size:.95rem;
  transition:border-color .25s var(--ease), background .25s;
}
.gate__input::placeholder{ color:rgba(255,244,223,.45); }
.gate__input:focus{ outline:none; border-color:var(--teal); background:rgba(255,244,223,.16); }

/* ---------- Progreso + Nav ---------- */
.progress{
  position:fixed; inset:0 0 auto 0; height:3px; z-index:60;
  background:transparent; pointer-events:none;
}
.progress span{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--teal),var(--verde),var(--amarillo),var(--coral));
}

.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; gap:26px;
  padding:14px clamp(16px,4vw,40px);
  transition:background .4s var(--ease), box-shadow .4s var(--ease), padding .4s var(--ease);
}
.nav.is-stuck{
  background:rgba(0,55,76,.94);
  backdrop-filter:blur(12px);
  box-shadow:0 10px 30px -18px rgba(0,0,0,.6);
  padding-block:10px;
}
.nav__brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--crema); }
.nav__flip{
  font-weight:800; font-size:1.05rem; letter-spacing:.06em;
  background:var(--coral); color:var(--crema);
  padding:3px 9px; border-radius:8px;
}
.nav__brandtxt{ font-size:.8rem; font-weight:600; opacity:.85; letter-spacing:.02em; }
.nav__links{ display:flex; gap:22px; margin-left:auto; }
.nav__links a{
  color:var(--crema); text-decoration:none; font-size:.85rem; font-weight:600;
  opacity:.8; transition:opacity .25s, color .25s; position:relative;
}
.nav__links a::after{
  content:''; position:absolute; left:0; right:0; bottom:-5px; height:2px;
  background:var(--coral); transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav__links a:hover{ opacity:1; }
.nav__links a:hover::after{ transform:scaleX(1); }
.nav__cta{
  background:var(--coral); color:var(--crema); border:0;
  padding:9px 18px; border-radius:999px; font-size:.82rem; font-weight:700;
  transition:transform .25s var(--ease), filter .25s;
}
.nav__cta:hover{ transform:translateY(-2px); filter:brightness(1.08); }

@media (max-width:900px){
  .nav__links{ display:none; }
  .nav__brandtxt{ display:none; }
  .nav__cta{ margin-left:auto; }
}

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:center;
  background:var(--azul); overflow:hidden;
}
.hero__video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:.85;
}
/* Oscurece sobre todo la mitad izquierda, donde va el texto, y deja
   respirar el video a la derecha. */
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(0,55,76,.92) 0%, rgba(0,55,76,.72) 38%, rgba(0,55,76,.34) 70%, rgba(0,55,76,.42) 100%),
    linear-gradient(180deg, rgba(0,55,76,.55) 0%, rgba(0,55,76,0) 30%, rgba(0,55,76,.55) 100%);
}
.hero__inner{
  position:relative; z-index:2;
  width:min(100% - 40px, var(--wrap)); margin-inline:auto;
  padding-block:clamp(100px,12vh,130px) clamp(60px,9vh,90px);
  will-change:transform;
}
.hero__kicker{
  color:var(--amarillo); font-weight:700; font-size:.8rem;
  letter-spacing:.2em; text-transform:uppercase; margin:0 0 22px;
}
.hero__title{
  margin:0; font-weight:800; letter-spacing:-.035em; color:var(--crema);
  font-size:clamp(2.9rem, 10vw, 7.7rem); line-height:.92;
}
.hero__title .line{ display:block; }
.hero__title em{ font-style:normal; }
.hero__sub{
  color:var(--crema); font-size:clamp(1rem,1.6vw,1.22rem);
  max-width:52ch; margin:26px 0 0; opacity:.9;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:38px; }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 28px; border-radius:999px; border:2px solid transparent;
  font-weight:700; font-size:.95rem; text-decoration:none;
  transition:transform .28s var(--ease), background .28s, color .28s, border-color .28s;
}
.btn--coral{ background:var(--coral); color:var(--crema); }
.btn--coral:hover{ transform:translateY(-3px); }
.btn--ghost{ background:transparent; color:var(--crema); border-color:rgba(255,244,223,.45); }
.btn--ghost:hover{ background:var(--crema); color:var(--azul); transform:translateY(-3px); }
.btn__play{ font-size:.7rem; }

.hero__cue{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:2;
  width:26px; height:42px; border:2px solid rgba(255,244,223,.4); border-radius:14px;
}
.hero__cue span{
  position:absolute; top:8px; left:50%; margin-left:-2px;
  width:4px; height:8px; border-radius:2px; background:var(--crema);
  animation:cue 1.8s var(--ease) infinite;
}
@keyframes cue{ 0%{opacity:0;transform:translateY(0)} 35%{opacity:1} 100%{opacity:0;transform:translateY(16px)} }

/* ---------- Marquee ---------- */
.marquee{
  background:var(--coral); color:var(--crema);
  padding:14px 0; overflow:hidden; white-space:nowrap;
}
.marquee__track{
  display:flex; width:max-content;
  animation:slide 30s linear infinite;
}
.marquee__group{
  display:flex; gap:26px; align-items:center; flex:none; padding-right:26px;
  font-weight:800; font-size:clamp(1rem,2vw,1.5rem); letter-spacing:-.01em;
}
.marquee__group b{ opacity:.5; font-weight:400; }
@keyframes slide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------- Manifiesto ---------- */
.manifiesto{ position:relative; padding:clamp(70px,10vw,130px) 0; overflow:hidden; }
.blob{ position:absolute; border-radius:50%; opacity:.38; will-change:transform; z-index:0; }
.manifiesto .wrap{ position:relative; z-index:1; }
.blob--verde{ width:420px; height:420px; background:var(--verde); right:-140px; top:60px; }
.blob--coral{ width:280px; height:280px; background:var(--coral); left:-120px; bottom:40px; opacity:.35; }

.manifiesto__body{ max-width:56ch; margin:10px 0 46px; }
.manifiesto__body p{
  font-size:clamp(1.05rem,1.9vw,1.4rem);
  font-weight:500; line-height:1.5; margin:0 0 .75em;
}
.manifiesto__body p:last-child{ font-weight:700; }

.pill-quote{
  background:var(--azul); color:var(--crema);
  padding:30px 38px; border-radius:var(--radius) var(--radius) var(--radius) 8px;
  font-size:clamp(1rem,1.7vw,1.2rem); max-width:62ch;
  box-shadow:var(--shadow);
}

/* ---------- Cifras ---------- */
.cifras{ background:var(--crema-2); padding:clamp(70px,9vw,120px) 0; }
.cifras__grid{
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}
.cifra{
  background:var(--blanco); border-radius:var(--radius) var(--radius) var(--radius) 6px;
  padding:28px 26px 24px; position:relative; overflow:hidden;
  border-left:8px solid var(--teal);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.cifra:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.cifra--coral{ border-color:var(--coral); }
.cifra--teal{ border-color:var(--teal); }
.cifra--verde{ border-color:var(--verde); }
.cifra--amarillo{ border-color:var(--amarillo); }
.cifra__num{
  font-size:clamp(2.2rem,4.6vw,3.1rem); font-weight:800;
  letter-spacing:-.03em; line-height:1; display:block;
  font-variant-numeric:tabular-nums;
}
.cifra__lbl{ font-weight:700; margin:10px 0 4px; font-size:1rem; line-height:1.25; }
.cifra__nota{ font-size:.85rem; opacity:.65; line-height:1.4; }

/* ---------- Explorador ---------- */
.explorar{ padding:clamp(70px,9vw,120px) 0; }

.filtros{
  background:var(--blanco); border-radius:var(--radius);
  padding:24px 26px; margin-bottom:34px; box-shadow:var(--shadow);
}
.filtros__row{ display:flex; align-items:flex-start; gap:16px; padding:8px 0; flex-wrap:wrap; }
.filtros__label{
  font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  opacity:.5; padding-top:9px; min-width:56px;
}
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  border:2px solid rgba(0,55,76,.14); background:transparent; color:var(--azul);
  padding:7px 16px; border-radius:999px; font-size:.85rem; font-weight:600;
  transition:all .25s var(--ease);
}
.chip:hover{ border-color:var(--azul); transform:translateY(-2px); }
.chip.is-on{ background:var(--azul); border-color:var(--azul); color:var(--crema); }
.chip.is-on[data-color="coral"]{ background:var(--coral); border-color:var(--coral); }
.chip.is-on[data-color="teal"]{ background:var(--teal); border-color:var(--teal); }
.chip.is-on[data-color="verde"]{ background:var(--verde); border-color:var(--verde); color:var(--azul); }
.chip.is-on[data-color="amarillo"]{ background:var(--amarillo); border-color:var(--amarillo); color:var(--azul); }

.filtros__meta{
  display:flex; align-items:baseline; gap:10px;
  border-top:1px solid rgba(0,55,76,.1); margin-top:10px; padding-top:16px;
}
.contador{ font-size:1.6rem; font-weight:800; font-variant-numeric:tabular-nums; }
.contador__lbl{ font-size:.85rem; opacity:.6; }
.linkbtn{
  margin-left:auto; background:none; border:0; color:var(--coral);
  font-weight:700; font-size:.85rem; text-decoration:underline; padding:0;
}

.obras{ display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }
.obra{
  background:var(--blanco); border-radius:var(--radius-sm) var(--radius) var(--radius-sm) var(--radius-sm);
  padding:24px 24px 22px; position:relative;
  border-top:6px solid var(--teal);
  animation:pop .45s var(--ease) both;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.obra:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.obra--coral{ border-color:var(--coral); }
.obra--teal{ border-color:var(--teal); }
.obra--verde{ border-color:var(--verde); }
.obra--amarillo{ border-color:var(--amarillo); }
@keyframes pop{ from{ opacity:0; transform:translateY(16px) scale(.98);} to{ opacity:1; transform:none; } }

.obra__top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; }
.obra__eje{ font-size:.68rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; opacity:.5; }
.obra__estado{
  font-size:.68rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  padding:4px 10px; border-radius:999px; white-space:nowrap;
}
.est--finalizada{ background:rgba(135,184,100,.22); color:#4c6f33; }
.est--ejecucion{ background:rgba(248,198,10,.25); color:#856700; }
.est--licitar{ background:rgba(242,96,84,.18); color:#a83226; }
.est--plan{ background:rgba(0,55,76,.1); color:var(--azul); }

.obra__dato{
  font-size:clamp(1.9rem,3.6vw,2.5rem); font-weight:800; letter-spacing:-.03em;
  line-height:1; display:flex; align-items:baseline; gap:7px;
}
.obra__dato small{ font-size:.42em; font-weight:700; opacity:.55; letter-spacing:0; }
.obra__titulo{ font-weight:700; margin:12px 0 8px; line-height:1.3; font-size:1rem; }
.obra__detalle{ font-size:.86rem; opacity:.7; line-height:1.5; margin:0; }
/* Tarjeta de plan: el total manda, el avance queda abajo */
.obra--plan{ grid-column:span 2; border-top-width:10px; box-shadow:var(--shadow); }
.obra--plan .obra__dato{ font-size:clamp(2.4rem,4.6vw,3.4rem); }
.obra--plan .obra__titulo{ font-size:1.18rem; }
@media (max-width:700px){ .obra--plan{ grid-column:span 1; } }

/* Contexto: la cifra dentro de su plan */
.obra__ctx{
  margin-top:16px; padding-top:14px; border-top:1px dashed rgba(0,55,76,.16);
}
.obra__ctxtit{
  margin:0 0 8px; font-size:.72rem; font-weight:800; letter-spacing:.04em;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px;
}
.obra__ctxtit span{
  font-size:.66rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; opacity:.45;
}
.obra__bar{
  display:flex; height:8px; border-radius:999px; overflow:hidden;
  background:rgba(0,55,76,.08);
}
.obra__seg{ height:100%; opacity:.22; transition:opacity .3s var(--ease); }
.obra__seg.is-on{ opacity:1; }
.obra__seg--finalizada{ background:var(--verde); }
.obra__seg--ejecucion{ background:var(--amarillo); }
.obra__seg--licitar{ background:var(--coral); }
.obra:hover .obra__seg{ opacity:.55; }
.obra:hover .obra__seg.is-on{ opacity:1; }
.obra__ctxtxt{ margin:9px 0 0; font-size:.8rem; font-weight:600; }
.obra__ctxtxt strong{ font-weight:800; }
.obra__ctxdet{ margin:3px 0 0; font-size:.74rem; opacity:.6; line-height:1.45; }

.obra__region{
  display:inline-block; margin-top:12px; font-size:.72rem; font-weight:700;
  background:rgba(0,55,76,.07); padding:4px 11px; border-radius:999px;
}

.vacio{ text-align:center; padding:50px 0; opacity:.6; font-weight:600; }

/* ---------- Plan de obras ---------- */
.plan{ margin-top:70px; background:var(--azul); color:var(--crema); border-radius:var(--radius); padding:clamp(28px,4vw,46px); }
.plan__intro{ opacity:.7; font-size:.9rem; margin:0 0 26px; }
.plan__list{ display:grid; gap:14px; }
.plan__row{ display:grid; grid-template-columns:180px 1fr 60px; gap:16px; align-items:center; }
.plan__rubro{ font-weight:700; font-size:.92rem; }
.plan__bar{ display:flex; height:24px; border-radius:999px; overflow:hidden; background:rgba(255,244,223,.12); }
.plan__seg{ height:100%; width:0; transition:width 1.1s var(--ease); position:relative; }
.plan__seg:hover{ filter:brightness(1.15); }
.plan__seg--finalizada{ background:var(--verde); }
.plan__seg--ejecucion{ background:var(--amarillo); }
.plan__seg--licitar{ background:var(--coral); }
.plan__total{ font-weight:800; font-variant-numeric:tabular-nums; text-align:right; }
.plan__legend{ display:flex; gap:22px; flex-wrap:wrap; margin-top:26px; font-size:.8rem; opacity:.8; }
.plan__legend span{ display:flex; align-items:center; gap:8px; }
.dot{ width:11px; height:11px; border-radius:50%; display:inline-block; }
.dot--verde{ background:var(--verde); }
.dot--amarillo{ background:var(--amarillo); }
.dot--coral{ background:var(--coral); }

@media (max-width:640px){
  .plan__row{ grid-template-columns:1fr 46px; grid-template-areas:'rubro total' 'bar bar'; }
  .plan__rubro{ grid-area:rubro; } .plan__total{ grid-area:total; } .plan__bar{ grid-area:bar; }
}

/* ---------- Regiones ---------- */
.regiones{ background:var(--crema-2); padding:clamp(70px,9vw,120px) 0; }
.regiones__layout{ display:grid; grid-template-columns:.85fr 1.15fr; gap:26px; align-items:start; }
.regiones__list{ display:grid; gap:8px; }
.region-btn{
  text-align:left; background:var(--blanco); border:2px solid transparent;
  border-radius:var(--radius-sm); padding:16px 20px; width:100%;
  font-weight:700; font-size:1rem; color:var(--azul);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  transition:all .3s var(--ease);
}
.region-btn:hover{ transform:translateX(6px); }
.region-btn.is-on{ background:var(--azul); color:var(--crema); }
.region-btn__n{ font-size:.75rem; opacity:.45; font-weight:800; }
.region-btn.is-on .region-btn__n{ color:var(--amarillo); opacity:1; }

.regiones__panel{
  background:var(--azul); color:var(--crema);
  border-radius:var(--radius) var(--radius) var(--radius) 10px;
  padding:clamp(28px,4vw,44px); min-height:340px; box-shadow:var(--shadow);
  will-change:transform;
}
.panel__nombre{ font-size:clamp(1.8rem,3.6vw,2.6rem); font-weight:800; letter-spacing:-.02em; margin:0 0 6px; color:var(--amarillo); }
.panel__hito{ font-size:1.08rem; line-height:1.5; margin:0 0 26px; max-width:44ch; }
.panel__sub{ font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; opacity:.55; margin:0 0 12px; }
.panel__locs{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:26px; }
.loc{ background:rgba(255,244,223,.11); padding:5px 13px; border-radius:999px; font-size:.82rem; }
.panel__obras{ display:grid; gap:10px; }
.panel__obra{ display:flex; gap:12px; align-items:flex-start; font-size:.9rem; line-height:1.45; }
.panel__obra i{ width:8px; height:8px; border-radius:50%; background:var(--coral); flex:none; margin-top:7px; }

@media (max-width:820px){ .regiones__layout{ grid-template-columns:1fr; } }

/* ---------- Cambios ---------- */
.cambios{ padding:clamp(70px,9vw,120px) 0; }
.cambios__grid{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.cambio{
  background:var(--blanco); border-radius:var(--radius);
  padding:28px 28px 26px; box-shadow:0 10px 30px -26px rgba(0,55,76,.5);
}
.cambio__tit{ font-weight:800; font-size:1.05rem; margin:0 0 18px; }
.cambio__vs{ display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.cambio__antes,.cambio__despues{ display:flex; flex-direction:column; }
.cambio__k{ font-size:.66rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; opacity:.45; }
.cambio__antes .cambio__v{ font-size:1.5rem; font-weight:700; opacity:.45; text-decoration:line-through; text-decoration-thickness:2px; }
.cambio__despues .cambio__v{ font-size:2rem; font-weight:800; color:var(--coral); letter-spacing:-.02em; }
.cambio__arrow{ font-size:1.4rem; opacity:.3; }
.cambio__track{ height:8px; border-radius:999px; background:rgba(0,55,76,.1); overflow:hidden; margin-bottom:14px; }
.cambio__fill{ height:100%; width:0; border-radius:999px; background:linear-gradient(90deg,var(--teal),var(--verde)); transition:width 1.2s var(--ease); }
.cambio__nota{ font-size:.85rem; opacity:.7; margin:0; line-height:1.5; }

/* ---------- Contexto ---------- */
.contexto{ background:var(--azul); padding:clamp(70px,9vw,120px) 0; color:var(--crema); }
/* Título largo: un punto menos para que cada línea entre entera. */
.contexto .h-xl{ font-size:clamp(1.8rem, 4.1vw, 2.9rem); }
/* Seis datos en dos filas de tres: nunca quedan huecos. */
.contexto__grid{ display:grid; gap:1px; grid-template-columns:repeat(3,1fr); background:rgba(255,244,223,.14); border-radius:var(--radius); overflow:hidden; }
@media (max-width:900px){ .contexto__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .contexto__grid{ grid-template-columns:1fr; } }
.ctx{ background:var(--azul); padding:32px 28px; transition:background .35s var(--ease); }
.ctx:hover{ background:#00293a; }
.ctx__dato{ font-size:clamp(2rem,4vw,2.8rem); font-weight:800; letter-spacing:-.03em; color:var(--verde); line-height:1; }
.ctx__lbl{ font-weight:700; margin:10px 0 6px; }
.ctx__nota{ font-size:.85rem; opacity:.6; line-height:1.45; margin:0; }

/* ---------- Razones ---------- */
.razones{ padding:clamp(70px,9vw,110px) 0 clamp(70px,9vw,110px); overflow:hidden; }
.razones__head{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; margin:-20px 0 0; flex-wrap:wrap;
}
.razones__hint{ font-size:.85rem; opacity:.5; font-weight:600; margin:0; }
.razones__nav{ display:flex; gap:8px; }
.rnav{
  width:46px; height:46px; border-radius:50%;
  border:2px solid rgba(0,55,76,.18); background:transparent; color:var(--azul);
  font-size:1.1rem; font-weight:700; line-height:1;
  transition:all .25s var(--ease);
}
.rnav:hover:not(:disabled){ background:var(--azul); border-color:var(--azul); color:var(--crema); transform:translateY(-2px); }
.rnav:disabled{ opacity:.25; cursor:default; }

.razones__rail{
  display:flex; gap:18px; margin-top:38px;
  padding:6px max(20px, calc((100% - var(--wrap)) / 2)) 30px;
  overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
  cursor:grab; scroll-behavior:smooth;
}
.razones__rail.is-dragging{ cursor:grabbing; scroll-snap-type:none; scroll-behavior:auto; }
.razones__rail.is-dragging .razon{ pointer-events:none; }
.razones__rail::-webkit-scrollbar{ display:none; }
.razon{
  flex:0 0 330px; scroll-snap-align:start;
  background:var(--blanco); border-radius:var(--radius) 8px var(--radius) var(--radius);
  padding:30px 28px; display:flex; flex-direction:column; gap:14px;
  border-bottom:8px solid var(--coral);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.razon:hover{ transform:translateY(-8px); box-shadow:var(--shadow); }
/* Avatar: el círculo con la inicial es la base y el retrato se apoya
   encima. Si la imagen falta o falla, queda la letra a la vista. */
.razon__av{
  position:relative; flex:none;
  width:54px; height:54px; border-radius:50%;
  background:var(--azul); color:var(--crema);
  display:grid; place-items:center; font-weight:800; font-size:1.3rem;
}
.razon__foto{
  position:absolute; inset:0;
  width:100%; height:100%; border-radius:50%; object-fit:cover;
  box-shadow:0 0 0 2px var(--blanco), 0 0 0 4px rgba(0,55,76,.12);
}
.razones__aviso{
  font-size:.74rem; opacity:.5; margin:22px 0 0; max-width:62ch;
}
.razon__nombre{ font-size:1.5rem; font-weight:800; letter-spacing:-.02em; margin:0; }
.razon__meta{ font-size:.78rem; font-weight:600; opacity:.55; margin:-10px 0 0; }
.razon__frase{ font-size:1rem; line-height:1.5; margin:0; }
.razon__razon{
  margin:auto 0 0; padding-top:16px; border-top:1px solid rgba(0,55,76,.12);
  font-size:.9rem; font-weight:700; color:var(--coral); line-height:1.4;
}

/* ---------- Cierre ---------- */
/* El aire de abajo lo daba el footer; sin él, va en el propio padding. */
.cierre{
  background:var(--azul); color:var(--crema);
  padding:clamp(80px,11vw,150px) 0 clamp(80px,10vw,130px);
  position:relative; overflow:hidden;
}
.cierre::after{
  content:''; position:absolute; right:-160px; top:-160px;
  width:520px; height:520px; border-radius:50%; background:var(--teal); opacity:.28;
}
.cierre__inner{ position:relative; z-index:2; width:min(100% - 40px, var(--wrap)); margin-inline:auto; text-align:center; }
/* La firma manda en el cierre: el claim queda como antesala. */
.cierre__claim{ font-size:clamp(1.9rem,4.6vw,3.2rem); font-weight:800; letter-spacing:-.03em; line-height:1.04; margin:0; }
.cierre__claim span{ display:block; }
.cierre__claim span:nth-child(2){ color:var(--teal); }
.cierre__claim span:nth-child(3){ color:var(--coral); }
.cierre__firma{
  font-size:clamp(2.8rem,8.4vw,5.8rem); font-weight:800; color:var(--crema);
  margin:26px 0 14px; letter-spacing:-.035em; line-height:1;
}
.cierre__txt{ opacity:.75; margin:0 auto; max-width:44ch; }
.cierre__actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:38px; }


/* ---------- Modal ---------- */
/* ---------- Contador: solo la franja central, a todo el ancho ----------
   El video es 16:9 pero el contenido vive entre el 39% y el 63% del alto.
   Recortamos a una franja de 567 px (52,5% del cuadro) con el centro
   corrido al 52,5%, que es donde está el eje real de las tarjetas. */
.contador-film{
  width:100%; aspect-ratio:1920 / 567;
  overflow:hidden; background:#01a6b0;   /* el turquesa del propio video */
  line-height:0;
}
.contador-film video{
  width:100%; height:100%;
  object-fit:cover; object-position:50% 52.5%;
}

/* ---------- Secciones de video ---------- */
.film{ background:var(--azul); color:var(--crema); padding:clamp(60px,8vw,100px) 0; }
/* Un poco más ajustado que en el resto: abajo viene el reproductor. */
.film .h-xl{ margin-block:.15em .55em; }

/* ---------- Reproductor con UI propia ---------- */
.player{
  position:relative; aspect-ratio:16/9; background:#000;
  border-radius:var(--radius-sm); overflow:hidden; box-shadow:var(--shadow);
}
/* El iframe va tres veces más alto que la caja y desplazado hacia arriba:
   el video se sigue ajustando al ancho, así que no se recorta imagen, pero
   la franja donde YouTube pone título, avatar del canal, "compartir" y su
   marca de agua queda fuera del área visible. */
.player__frame{ position:absolute; inset:0; overflow:hidden; }
.player__frame iframe, .player__frame > div{
  position:absolute; left:0; top:-100%; width:100%; height:300%; border:0; display:block;
}
/* Capa propia: bloquea el hover y el clic sobre el iframe (sin ella
   YouTube muestra su interfaz) y hace de velo cuando está pausado. */
.player__frame::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:rgba(0,41,58,0); backdrop-filter:blur(0);
  transition:background .35s var(--ease), backdrop-filter .35s var(--ease);
}
/* Casi opaco: si se transparenta, asoma la miniatura y el botón rojo de
   YouTube, que es justo lo que no queremos ver. */
.player:not(.is-playing) .player__frame::after{
  background:rgba(0,41,58,.94); backdrop-filter:blur(24px);
}

/* Anillo de carga: ocupa el lugar del botón mientras el video arranca. */
.player__load{
  position:absolute; inset:0; z-index:2; margin:auto;
  width:30px; height:30px; border-radius:50%;
  border:2px solid rgba(255,244,223,.22); border-top-color:var(--coral);
  opacity:0; pointer-events:none; transition:opacity .25s var(--ease);
}
.player.is-loading:not(.is-playing) .player__load{ opacity:1; animation:girar .8s linear infinite; }
@keyframes girar{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .player__load{ animation:none !important; } }

.player__big{
  position:absolute; inset:0; z-index:2; margin:auto; width:62px; height:62px;
  display:grid; place-items:center; border:0; cursor:pointer;
  background:rgba(255,244,223,.92); color:var(--azul); border-radius:50%;
  opacity:0; transform:scale(.85); pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.player__big svg{ width:26px; height:26px; fill:currentColor; margin-left:3px; }
.player:not(.is-playing).is-ready .player__big{ opacity:1; transform:none; pointer-events:auto; }
/* Mientras carga manda el anillo, no el botón. */
.player.is-loading .player__big{ opacity:0; transform:scale(.85); pointer-events:none; }

.player__ui{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  display:flex; align-items:center; gap:12px; padding:14px 16px;
  background:linear-gradient(to top, rgba(0,41,58,.85), rgba(0,41,58,0));
  opacity:0; transform:translateY(6px); transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.player:hover .player__ui, .player:focus-within .player__ui, .player:not(.is-playing) .player__ui{
  opacity:1; transform:none;
}
.pbtn{
  flex:0 0 auto; width:34px; height:34px; display:grid; place-items:center;
  border:0; border-radius:50%; cursor:pointer; padding:0;
  background:rgba(255,244,223,.14); color:var(--crema);
  transition:background .25s var(--ease), color .25s var(--ease);
}
.pbtn svg{ width:18px; height:18px; fill:currentColor; }
.pbtn:hover{ background:var(--crema); color:var(--azul); }
.player.has-audio [data-act="mute"]{ background:var(--teal); color:var(--azul); }

.player__track{
  flex:1 1 auto; height:5px; border-radius:999px; cursor:pointer;
  background:rgba(255,244,223,.25); position:relative;
}
.player__track:focus-visible{ outline:2px solid var(--teal); outline-offset:4px; }
.player__track::before{ content:''; position:absolute; inset:-9px 0; }
.player__fill{
  display:block; height:100%; width:0; border-radius:999px; background:var(--coral);
}
.player__time{
  flex:0 0 auto; font-size:.76rem; font-weight:700; color:var(--crema);
  font-variant-numeric:tabular-nums; opacity:.85;
}

/* Slider de volumen: se abre al pasar por el botón de sonido para no
   cargar la barra con controles siempre visibles. */
.player__vol{
  -webkit-appearance:none; appearance:none; background:transparent;
  flex:0 0 auto; width:0; height:18px; margin:0; padding:0; cursor:pointer;
  opacity:0; transition:width .3s var(--ease), opacity .3s var(--ease);
}
.player__ui:hover .player__vol,
.player__vol:focus-visible,
.player.has-audio .player__vol{ width:74px; opacity:1; }
.player__vol::-webkit-slider-runnable-track{
  height:5px; border-radius:999px;
  background:linear-gradient(to right, var(--crema) var(--vol,100%), rgba(255,244,223,.25) var(--vol,100%));
}
.player__vol::-moz-range-track{
  height:5px; border-radius:999px;
  background:linear-gradient(to right, var(--crema) var(--vol,100%), rgba(255,244,223,.25) var(--vol,100%));
}
.player__vol::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:13px; height:13px; margin-top:-4px; border:0;
  border-radius:50%; background:var(--crema);
  box-shadow:0 2px 6px rgba(0,0,0,.4);
}
.player__vol::-moz-range-thumb{
  width:13px; height:13px; border:0; border-radius:50%; background:var(--crema);
  box-shadow:0 2px 6px rgba(0,0,0,.4);
}
.player__vol:focus-visible{ outline:2px solid var(--teal); outline-offset:4px; }

.player__sonido{
  position:absolute; top:16px; right:16px; z-index:4;
  display:flex; align-items:center; gap:8px; cursor:pointer;
  border:0; border-radius:999px; padding:9px 16px;
  background:var(--coral); color:var(--crema);
  font-family:inherit; font-size:.78rem; font-weight:800; letter-spacing:.02em;
  box-shadow:0 10px 24px -12px rgba(0,0,0,.7);
  transition:transform .25s var(--ease), background .25s var(--ease);
}
.player__sonido svg{ width:16px; height:16px; fill:currentColor; }
.player__sonido:hover{ transform:translateY(-2px); }
.player.has-audio .player__sonido{ display:none; }

@media (max-width:560px){
  .player__time{ display:none; }
  .player__ui{ gap:9px; padding:10px 12px; }
  .player__big{ width:60px; height:60px; }
}

/* ---------- Video vertical dentro del teléfono ----------
   La mano entra desde el borde izquierdo de la pantalla: el brazo se
   sale del lienzo y el teléfono queda dentro. */
.social{ overflow:hidden; padding:clamp(30px,4vw,50px) 0; }

/* El PNG de la mano tiene la pantalla calada: el reproductor va detrás y
   asoma por el hueco, así los dedos que pisan el borde quedan encima.
   Las medidas salen de la posición real del hueco en la imagen. */
/* Sin margen negativo: el brazo apoya en el borde de la pantalla (que es
   donde la foto lo corta) y el teléfono queda hacia el centro. El tope de
   105vw sale de que el teléfono termina al 90,5% del ancho de la imagen:
   más grande que eso y se saldría por la derecha. */
.fono{
  position:relative;
  width:min(105vw, 1250px);
  margin-left:0;
}
/* Entra deslizándose desde el costado, no desde abajo como el resto. */
.js .fono.reveal{ transform:translateX(-90px); }
.js .fono.reveal.is-in{ transform:none; }
.fono__mano{
  position:relative; z-index:2; width:100%; height:auto; display:block;
  pointer-events:none;   /* los clics pasan al video de atrás */
  filter:drop-shadow(0 30px 40px rgba(0,55,76,.22));
}
.fono .player{
  position:absolute; z-index:1;
  left:55.025%; top:4.55%; width:33.95%; height:70.2%;
  aspect-ratio:auto; border-radius:0; box-shadow:none;
}
/* El Short es 9:16 y el hueco 9:18,6: ensancho el iframe para que el
   video cubra el alto completo, y el sobrante se recorta a los lados. */
.fono .player__frame iframe, .fono .player__frame > div{
  width:116.31%; left:-8.16%; height:300%; top:-100%;
}
.fono .player__ui{ display:none; }          /* adentro del teléfono la barra sobra */
.fono .player__big{ width:46px; height:46px; }
.fono .player__big svg{ width:18px; height:18px; }
.fono .player__load{ width:24px; height:24px; }
.fono .player__sonido{
  top:auto; bottom:14px; left:50%; right:auto; transform:translateX(-50%);
  padding:7px 13px; font-size:.68rem; gap:6px;
}
.fono .player__sonido:hover{ transform:translateX(-50%) translateY(-2px); }
.fono .player__sonido svg{ width:13px; height:13px; }

/* La regla de arriba ya sirve en cualquier ancho: no hace falta un
   quiebre aparte para mobile. */

.modal{
  position:fixed; inset:0; z-index:100;
  background:rgba(0,26,36,.94); backdrop-filter:blur(8px);
  display:grid; place-items:center; padding:20px;
  animation:fade .3s var(--ease);
}
.modal[hidden]{ display:none; }
.vacio[hidden], .linkbtn[hidden]{ display:none; }
@keyframes fade{ from{opacity:0} to{opacity:1} }
.modal__box{ width:min(100%, 1000px); border-radius:var(--radius-sm); overflow:hidden; box-shadow:0 40px 90px -30px #000; }
.modal__box .player{ border-radius:0; box-shadow:none; }
.modal__close{
  position:absolute; top:22px; right:24px;
  background:rgba(255,244,223,.14); color:var(--crema); border:0;
  width:44px; height:44px; border-radius:50%; font-size:1.1rem;
  transition:background .25s;
}
.modal__close:hover{ background:var(--coral); }

/* ---------- Accesibilidad ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
}

:focus-visible{ outline:3px solid var(--amarillo); outline-offset:3px; border-radius:4px; }