/* Paleta tomada del logo AF: fondo carbón (no negro puro), rojo con
   degradado de brillante a granate, blanco puro para la tipografía. */
:root{
  --negro:#1B1B1E;--carbon:#232327;--grafito:#2C2C31;
  --gris:#8A8A93;--gris-cl:#C6C6CE;
  --linea:rgba(255,255,255,.12);--linea2:rgba(255,255,255,.22);
  --rojo:#D6212B;--rojo-hi:#F0333D;--rojo-osc:#8E1C1F;
  --rojo-rgb:214,33,43;--negro-rgb:27,27,30;
  /* Fondo de la barra superior: el carbón del lienzo del logo cuadrado.
     Si no calza exacto con tu archivo del logo, ajusta SOLO estas dos
     líneas (deben ser el mismo color, una en hex y otra en RGB). */
  --barra:#212124;--barra-rgb:33,33,36;
  --display:"Archivo",system-ui,sans-serif;
  --body:"Instrument Sans",system-ui,sans-serif;
  --wrap:1280px;--pad:clamp(18px,4vw,40px);
}

*{margin:0;padding:0;box-sizing:border-box}

html{scroll-behavior:smooth}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}

body{background:var(--negro);color:#fff;font-family:var(--body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}

a{color:inherit;text-decoration:none}

img{max-width:100%;display:block}

:focus-visible{outline:2px solid var(--rojo);outline-offset:3px}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}

.lede{font-size:clamp(1rem,1.7vw,1.12rem);color:var(--gris-cl);max-width:58ch;line-height:1.66}

.eyebrow{display:block;font-family:var(--display);font-size:.74rem;font-weight:800;letter-spacing:.3em;text-transform:uppercase;color:var(--rojo);margin-bottom:16px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;padding:1em 2.1em;border:2px solid transparent;font-family:var(--display);font-size:.82rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:background .18s,color .18s,border-color .18s,transform .18s}

.btn:hover{transform:translateY(-2px)}

.btn--rojo{background:var(--rojo);color:#fff}.btn--rojo:hover{background:var(--rojo-hi)}

.btn--linea{border-color:#fff;color:#fff}.btn--linea:hover{background:#fff;color:var(--negro)}

.btn--gris{border-color:var(--linea2);color:#fff}.btn--gris:hover{border-color:#fff}

.btn--sm{padding:.7em 1.3em;font-size:.71rem;border-width:1px}

.promo{background:var(--rojo);text-align:center;font-family:var(--display);font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:11px var(--pad)}

.promo a{border-bottom:1px solid rgba(255,255,255,.55);padding-bottom:2px}

.hdr{position:sticky;top:0;z-index:80;background:rgba(var(--barra-rgb),.95);backdrop-filter:blur(12px);border-bottom:1px solid var(--linea)}

.hdr__in{display:flex;align-items:center;gap:18px;height:74px}

.logo{display:flex;align-items:center;gap:11px;flex-shrink:0}

.logo__mark{height:36px;width:auto;object-fit:contain;flex-shrink:0}

.logo__txt{font-family:var(--display);font-weight:800;font-size:.96rem;letter-spacing:.2em;text-transform:uppercase}

.nav{display:flex;align-items:center;gap:22px;margin-left:auto;font-family:var(--display);font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gris-cl)}

.nav a{padding:8px 0;position:relative;transition:color .16s}

.nav a:hover,.nav a[aria-current]{color:#fff}

.nav a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--rojo);transition:width .2s}

.nav a:hover::after,.nav a[aria-current]::after{width:100%}

.tools{display:flex;align-items:center;gap:12px;flex-shrink:0}

.icon{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--linea);position:relative;transition:border-color .16s}

.icon:hover{border-color:#fff}

.icon svg{width:17px;height:17px;stroke:#fff;fill:none;stroke-width:1.7}

.cart__n{position:absolute;top:-7px;right:-7px;background:var(--rojo);font-family:var(--display);font-size:.6rem;font-weight:800;width:19px;height:19px;display:grid;place-items:center;border-radius:50%}

.burger{display:none;width:42px;height:38px;border:1px solid var(--linea);cursor:pointer}

.burger span{display:block;width:17px;height:2px;background:#fff;margin:3.5px auto}

@media(max-width:1240px){
  .nav{display:none;position:absolute;top:74px;left:0;right:0;background:var(--barra);flex-direction:column;align-items:stretch;gap:0;padding:6px var(--pad) 20px;border-bottom:1px solid var(--linea)}
  .nav.open{display:flex}
  .nav a{padding:15px 0;border-bottom:1px solid var(--linea)}
  .burger{display:block}
}

.sec--carbon{background:var(--carbon);border-block:1px solid var(--linea)}

.sec__head .d2{margin-bottom:16px}

.sec__head--row{max-width:none;display:flex;flex-wrap:wrap;gap:24px;align-items:flex-end;justify-content:space-between}

/* Portada de cada programa dentro de su tarjeta. Si el programa todavía no
   tiene banner propio, se usa .card__art--none, que dibuja la franja roja de
   marca con el nombre, para que la rejilla no quede despareja. El tirón
   negativo lateral es para que la imagen llegue al borde de la tarjeta; el
   de arriba lo define cada página, porque su .card tiene distinto padding. */
/* aspect-ratio da el 16:9 exacto (con padding porcentual saldría torcido,
   porque se calcula sobre el ancho del padre y estas cajas llevan margen
   negativo). La imagen y el texto van en position:absolute a propósito: así
   nunca pueden estirar la caja, ni siquiera si esta hoja llega tarde. */
.card__art{position:relative;aspect-ratio:16/9;overflow:hidden;margin:0 -26px 20px;background:linear-gradient(160deg,#26262b,var(--negro))}

.card__art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}

.card:hover .card__art img{transform:scale(1.04)}

.card__art--none::before{content:"";position:absolute;left:-20%;right:-20%;top:46%;height:clamp(26px,4vw,34px);background:var(--rojo);transform:rotate(-9deg);opacity:.9}

.card__art--none span{position:absolute;inset:0;z-index:2;display:grid;place-items:center;font-family:var(--display);font-weight:900;font-size:clamp(1.3rem,3.4vw,1.75rem);line-height:.94;letter-spacing:-.03em;text-transform:uppercase;text-align:center;padding:0 16px}

.ft{border-top:1px solid var(--linea);padding:clamp(46px,5vw,68px) 0 30px;color:var(--gris);font-size:.88rem}

.ft__grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:34px;padding-bottom:34px;border-bottom:1px solid var(--linea)}

@media(max-width:860px){.ft__grid{grid-template-columns:1fr 1fr}}

@media(max-width:520px){.ft__grid{grid-template-columns:1fr}}

.ft h4{font-family:var(--display);font-weight:800;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:#fff;margin-bottom:16px}

.ft ul{list-style:none;display:flex;flex-direction:column;gap:10px}

.ft a:hover{color:#fff}

.ft__bot{padding-top:24px;display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-size:.78rem}