/* ============================================================
   AMÉRICA HISPANA — sistema de diseño de la maqueta
   Paleta derivada del logotipo institucional (navy #193F78 / rojo #D70F1D)
   ============================================================ */

@font-face{font-family:"AH Display";src:url("../fonts/Montserrat-var.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"AH Text";src:url("../fonts/SourceSerif4-var.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"AH Data";src:url("../fonts/IBMPlexMono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"AH Data";src:url("../fonts/IBMPlexMono-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"AH Script";src:url("../fonts/Sacramento-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  /* marca */
  --navy:#193F78;
  --navy-deep:#0D2551;
  --navy-ink:#0A1930;
  --red:#D70F1D;
  --red-soft:#F2454F;

  /* superficies y neutros (sesgados a azul, no gris puro) */
  --paper:#FFFFFF;
  --paper-2:#F5F8FC;
  --mist:#E9EEF7;
  --line:#D3DCEA;
  --line-soft:#E6ECF5;
  --ink:#16233C;
  --muted:#5C6E8C;
  --muted-2:#7C8DA8;

  /* señales */
  --live:#D70F1D;
  --ok:#187A4B;
  --warn:#B4700A;

  /* superficies sobre navy */
  --on-navy:#DDE6F4;
  --on-navy-dim:#9DB2D4;
  --navy-line:rgba(255,255,255,.16);

  /* tipografía */
  --f-display:"AH Display","Helvetica Neue",Arial,sans-serif;
  --f-text:"AH Text",Georgia,"Times New Roman",serif;
  --f-data:"AH Data","SFMono-Regular",Consolas,monospace;
  --f-script:"AH Script","AH Text",cursive;

  /* medidas */
  --shell:1320px;
  --gut:24px;
  --r:4px;
  --shadow:0 1px 2px rgba(13,37,81,.06),0 8px 24px -12px rgba(13,37,81,.22);
  --shadow-lift:0 2px 4px rgba(13,37,81,.08),0 18px 38px -16px rgba(13,37,81,.34);
}

@media (prefers-color-scheme:dark){
  :root{
    --paper:#0A1322;
    --paper-2:#0F1B2E;
    --mist:#16263F;
    --line:#25374F;
    --line-soft:#1B2B44;
    --ink:#E4EBF6;
    --muted:#93A6C3;
    --muted-2:#7A8DAC;
    --navy:#5F91D8;
    --navy-deep:#08121F;
    --navy-ink:#F0F5FC;
    --red:#FF3D48;
    --red-soft:#FF6B73;
    --live:#FF3D48;
    --on-navy:#D5E1F3;
    --on-navy-dim:#8AA0C4;
    --navy-line:rgba(255,255,255,.12);
    --shadow:0 1px 2px rgba(0,0,0,.5),0 8px 24px -12px rgba(0,0,0,.8);
    --shadow-lift:0 2px 4px rgba(0,0,0,.55),0 18px 38px -16px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  --paper:#0A1322;--paper-2:#0F1B2E;--mist:#16263F;--line:#25374F;--line-soft:#1B2B44;
  --ink:#E4EBF6;--muted:#93A6C3;--muted-2:#7A8DAC;--navy:#5F91D8;--navy-deep:#08121F;
  --navy-ink:#F0F5FC;--red:#FF3D48;--red-soft:#FF6B73;--live:#FF3D48;
  --on-navy:#D5E1F3;--on-navy-dim:#8AA0C4;--navy-line:rgba(255,255,255,.12);
  --shadow:0 1px 2px rgba(0,0,0,.5),0 8px 24px -12px rgba(0,0,0,.8);
  --shadow-lift:0 2px 4px rgba(0,0,0,.55),0 18px 38px -16px rgba(0,0,0,.9);
}
:root[data-theme="light"]{
  --paper:#FFFFFF;--paper-2:#F5F8FC;--mist:#E9EEF7;--line:#D3DCEA;--line-soft:#E6ECF5;
  --ink:#16233C;--muted:#5C6E8C;--muted-2:#7C8DA8;--navy:#193F78;--navy-deep:#0D2551;
  --navy-ink:#0A1930;--red:#D70F1D;--red-soft:#F2454F;--live:#D70F1D;
  --on-navy:#DDE6F4;--on-navy-dim:#9DB2D4;--navy-line:rgba(255,255,255,.16);
  --shadow:0 1px 2px rgba(13,37,81,.06),0 8px 24px -12px rgba(13,37,81,.22);
  --shadow-lift:0 2px 4px rgba(13,37,81,.08),0 18px 38px -16px rgba(13,37,81,.34);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-display);font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:2px}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.015em;text-wrap:balance;color:var(--navy-ink)}
p{margin:0}
hr{border:0;border-top:1px solid var(--line);margin:0}

.shell{max-width:var(--shell);margin:0 auto;padding-inline:var(--gut)}
/* las celdas de rejilla no deben crecer con su contenido más ancho (tablas, mono) */
.grid > *,.vlayout > *,.lib > *,.authgrid > *,.lead > *,.newsletter > *,.flow > *,.steps > *{min-width:0}
.mono{font-family:var(--f-data);font-variant-numeric:tabular-nums}
.serif{font-family:var(--f-text)}

/* ---------- barra de servicio ---------- */
.utility{background:var(--navy-deep);color:var(--on-navy-dim);font-size:11.5px;border-bottom:1px solid var(--navy-line)}
.utility .shell{display:flex;align-items:center;gap:18px;height:34px}
.utility__clock{font-family:var(--f-data);letter-spacing:.02em;color:var(--on-navy);white-space:nowrap}
.utility__badge{
  display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:2px;
  background:rgba(215,15,29,.16);border:1px solid rgba(255,255,255,.18);
  color:#FFD9DC;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.utility__spacer{flex:1}
.utility__links{display:flex;align-items:center;gap:16px}
.utility__links a{letter-spacing:.02em}
.utility__links a:hover{color:#fff}
.utility__social{display:flex;gap:10px;align-items:center;padding-left:16px;border-left:1px solid var(--navy-line)}
.utility__social a{display:grid;place-items:center;width:20px;height:20px;color:var(--on-navy-dim)}
.utility__social a:hover{color:#fff}
.utility__social svg{width:14px;height:14px;fill:currentColor}
.utility__key{
  display:inline-flex;align-items:center;gap:7px;padding:3px 10px;border-radius:2px;white-space:nowrap;
  border:1px solid var(--navy-line);color:var(--on-navy);font-size:11px;font-weight:600;letter-spacing:.04em;
}
.utility__key:hover{border-color:var(--red);color:#fff;background:rgba(215,15,29,.18)}
.utility__key svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- cabecera ---------- */
.masthead{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:60}
.masthead .shell{display:flex;align-items:center;gap:26px;height:74px}
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0}
.brand__mark{width:52px;height:auto}
.brand__word{display:grid;line-height:1;gap:3px}
.brand__word b{font-size:19px;font-weight:800;letter-spacing:.005em;color:var(--navy);font-feature-settings:"kern"}
.brand__word span{font-size:12.5px;font-weight:700;letter-spacing:.28em;color:var(--red)}
:root[data-theme="dark"] .brand__word b,
:root[data-theme="dark"] .brand__word span{color:inherit}
@media (prefers-color-scheme:dark){.brand__word b{color:#8FB4E8}}
:root[data-theme="dark"] .brand__word b{color:#8FB4E8}
:root[data-theme="dark"] .brand__word span{color:var(--red)}
:root[data-theme="light"] .brand__word b{color:var(--navy)}

.nav{display:flex;align-items:center;gap:2px;flex:1;min-width:0}
.nav a{
  padding:10px 11px;font-size:12.5px;font-weight:600;letter-spacing:.055em;text-transform:uppercase;
  color:var(--ink);border-bottom:3px solid transparent;white-space:nowrap;
}
.nav a:hover{color:var(--navy)}
.nav a.is-active{color:var(--navy);border-bottom-color:var(--red)}
:root[data-theme="dark"] .nav a.is-active,
:root[data-theme="dark"] .nav a:hover{color:#8FB4E8}

.mast__tools{display:flex;align-items:center;gap:10px;flex-shrink:0}
.icon-btn{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line);border-radius:2px;color:var(--muted)}
.icon-btn:hover{border-color:var(--navy);color:var(--navy)}
.icon-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.btn-live{
  display:inline-flex;align-items:center;gap:8px;background:var(--red);color:#fff;
  padding:9px 15px;border-radius:2px;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
}
.btn-live:hover{background:#B70C18}
:root[data-theme="dark"] .btn-live:hover{background:#FF5A63}
.burger{display:none}

.dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0}
.dot--pulse{animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}

/* ---------- riel de señales en vivo ---------- */
.livebar{background:var(--navy-deep);border-bottom:3px solid var(--red)}
.livebar__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--navy-line)}
.livecard{display:grid;grid-template-columns:112px 1fr;gap:13px;padding:13px 0;background:var(--navy-deep);align-items:center;text-align:left;width:100%}
.livecard:hover .livecard__thumb{border-color:var(--red)}
.livecard__thumb{position:relative;border:1px solid var(--navy-line);border-radius:2px;overflow:hidden;aspect-ratio:16/9;transition:border-color .18s}
.livecard__body{min-width:0}
.livecard__chan{display:flex;align-items:center;gap:7px;font-family:var(--f-data);font-size:10.5px;font-weight:600;letter-spacing:.08em;color:#FF6B73;text-transform:uppercase}
.livecard__title{color:#fff;font-size:13.5px;font-weight:600;line-height:1.35;margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.livecard__meta{font-family:var(--f-data);font-size:10.5px;color:var(--on-navy-dim);margin-top:5px;display:flex;gap:10px}

/* ---------- fotogramas simulados ---------- */
.frame{
  position:relative;aspect-ratio:16/9;overflow:hidden;background:
    linear-gradient(160deg,#2C5391 0%,#193F78 46%,#102C57 100%);
  display:grid;place-items:center;
}
.frame--alt{background:linear-gradient(160deg,#1B4A85 0%,#12315E 55%,#0B1F3F 100%)}
.frame--warm{background:linear-gradient(160deg,#7B1620 0%,#3E1330 48%,#132552 100%)}
.frame--pale{background:linear-gradient(160deg,#D8E1F0 0%,#B9C8E1 55%,#8FA6CA 100%)}
.frame::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.045) 0 1px,transparent 1px 3px);
  mix-blend-mode:overlay;pointer-events:none;
}
.frame__art{width:62%;height:62%;opacity:.9}
.frame--pale .frame__art{opacity:.55}
.frame__badges{position:absolute;left:8px;top:8px;display:flex;gap:5px;z-index:2}
.frame__dur{
  position:absolute;right:7px;bottom:7px;z-index:2;font-family:var(--f-data);font-size:10.5px;
  background:rgba(6,17,34,.82);color:#fff;padding:2px 5px;border-radius:2px;letter-spacing:.02em;
}
.frame__play{
  position:absolute;inset:0;display:grid;place-items:center;z-index:2;opacity:0;transition:opacity .2s;
  background:radial-gradient(circle at 50% 50%,rgba(6,17,34,.5),rgba(6,17,34,.15) 60%,transparent);
}
.card:hover .frame__play,.livecard:hover .frame__play,.frame:hover .frame__play{opacity:1}
.frame__play span{
  width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.94);display:grid;place-items:center;
}
.frame__play svg{width:16px;height:16px;fill:var(--navy-deep);margin-left:2px}

.chip{
  display:inline-flex;align-items:center;gap:5px;font-family:var(--f-data);font-size:9.5px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;padding:3px 6px;border-radius:2px;white-space:nowrap;
}
.chip--live{background:var(--red);color:#fff}
.chip--ia{background:rgba(255,255,255,.92);color:var(--navy-deep)}
.chip--orig{background:rgba(9,22,44,.78);color:#CFDCF0;border:1px solid rgba(255,255,255,.22)}
.chip--flat{background:var(--mist);color:var(--navy);border:1px solid var(--line)}
:root[data-theme="dark"] .chip--flat{color:#9CBCEA}

/* ---------- antetítulos de sección (filete + versal, del deck) ---------- */
.band{padding-block:34px;border-top:1px solid var(--line-soft)}
.band--tint{background:var(--paper-2)}
.band--first{border-top:0}
.sechead{display:flex;align-items:flex-end;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.sechead__t{display:flex;align-items:center;gap:14px}
.sechead__t::before{content:"";width:34px;height:2px;background:var(--red);flex-shrink:0}
.sechead h2{font-size:17px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.sechead__sub{font-family:var(--f-text);font-size:14px;color:var(--muted);padding-bottom:1px}
.sechead__more{margin-left:auto;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--navy);display:inline-flex;align-items:center;gap:6px}
:root[data-theme="dark"] .sechead__more{color:#8FB4E8}
.sechead__more:hover{color:var(--red)}

/* ---------- portada ---------- */
.lead{display:grid;grid-template-columns:1.62fr 1fr;gap:26px;align-items:start}
.lead__main .frame{border-radius:var(--r)}
.lead__kicker{display:flex;align-items:center;gap:10px;margin:14px 0 8px;font-family:var(--f-data);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--red)}
.lead__main h1{font-size:33px;line-height:1.14;letter-spacing:-.022em}
.lead__deck{font-family:var(--f-text);font-size:17px;line-height:1.5;color:var(--muted);margin-top:11px;max-width:62ch}
.meta{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:13px;font-family:var(--f-data);font-size:11px;color:var(--muted-2);letter-spacing:.02em}
.meta span{display:inline-flex;align-items:center;gap:6px}
.lead__side{display:grid;gap:16px}
.side-item{display:grid;grid-template-columns:132px 1fr;gap:13px;padding-bottom:16px;border-bottom:1px solid var(--line-soft)}
.side-item:last-child{border-bottom:0;padding-bottom:0}
.side-item .frame{border-radius:2px}
.side-item h3{font-size:14.5px;line-height:1.32;font-weight:700}
.side-item:hover h3{color:var(--navy)}
:root[data-theme="dark"] .side-item:hover h3{color:#8FB4E8}
.side-item .meta{margin-top:7px;font-size:10.5px}

/* ---------- rejilla de tarjetas ---------- */
.grid{display:grid;gap:22px 20px}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.card{display:block;text-align:left;width:100%}
.card .frame{border-radius:2px}
.card h3{font-size:15px;line-height:1.34;margin-top:11px;font-weight:700}
.card:hover h3{color:var(--navy)}
:root[data-theme="dark"] .card:hover h3{color:#8FB4E8}
.card__sum{font-family:var(--f-text);font-size:13.5px;line-height:1.48;color:var(--muted);margin-top:7px}

/* ---------- filtros de pestaña ---------- */
.tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:20px}
.tabs button{
  padding:9px 14px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);border-bottom:3px solid transparent;margin-bottom:-1px;
}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected="true"]{color:var(--navy);border-bottom-color:var(--red)}
:root[data-theme="dark"] .tabs button[aria-selected="true"]{color:#8FB4E8}

/* ---------- agenda / parrilla ---------- */
.rundown{display:grid;gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--paper)}
.rundown__row{display:grid;grid-template-columns:88px 1fr auto;gap:16px;padding:13px 16px;border-bottom:1px solid var(--line-soft);align-items:baseline}
.rundown__row:last-child{border-bottom:0}
.rundown__row:hover{background:var(--paper-2)}
.rundown__row.is-now{background:color-mix(in srgb,var(--red) 7%,transparent);border-left:3px solid var(--red);padding-left:13px}
.rundown__time{display:block;font-family:var(--f-data);font-size:12.5px;font-weight:600;color:var(--navy);letter-spacing:.01em}
:root[data-theme="dark"] .rundown__time{color:#8FB4E8}
.rundown__t{display:block;font-size:14px;font-weight:600;line-height:1.35}
.rundown__src{display:block;font-family:var(--f-text);font-size:13px;color:var(--muted);margin-top:3px}
.rundown__tag{font-family:var(--f-data);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);white-space:nowrap}

/* ---------- buscador de videoteca ---------- */
.searchpanel{background:var(--navy-deep);border-radius:var(--r);padding:30px 32px;position:relative;overflow:hidden}
.searchpanel::before{
  content:"";position:absolute;right:-170px;bottom:-330px;width:560px;height:560px;border-radius:50%;
  border:30px solid rgba(215,15,29,.30);border-bottom-color:transparent;border-right-color:transparent;
  transform:rotate(38deg);pointer-events:none;
}
.searchpanel > *{position:relative}
.searchpanel h2{color:#fff;font-size:24px;letter-spacing:-.015em}
.searchpanel p{font-family:var(--f-text);color:var(--on-navy-dim);font-size:15px;margin-top:8px;max-width:56ch}
.searchbox{display:flex;margin-top:18px;max-width:660px;border-radius:2px;overflow:hidden;background:#fff}
.searchbox input{flex:1;border:0;padding:14px 16px;font-family:var(--f-display);font-size:14.5px;color:#16233C;min-width:0;background:#fff}
.searchbox input::placeholder{color:#8494AE}
.searchbox button{background:var(--red);color:#fff;padding:0 22px;font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.searchbox button:hover{background:#B70C18}
.searchhints{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.searchhints button{font-family:var(--f-data);font-size:11px;color:var(--on-navy);border:1px solid var(--navy-line);padding:5px 10px;border-radius:2px}
.searchhints button:hover{border-color:var(--red);color:#fff}
.statrow{display:flex;flex-wrap:wrap;gap:30px;margin-top:24px;padding-top:20px;border-top:1px solid var(--navy-line)}
.statrow div{display:grid;gap:2px}
.statrow b{font-family:var(--f-data);font-size:22px;font-weight:600;color:#fff;letter-spacing:-.01em}
.statrow span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--on-navy-dim)}

/* ---------- carrusel de clips ---------- */
.rail{display:flex;gap:16px;overflow-x:auto;padding-bottom:10px;scroll-snap-type:x mandatory}
.rail::-webkit-scrollbar{height:6px}
.rail::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.rail > *{flex:0 0 268px;scroll-snap-align:start}

/* ---------- comunicadores ---------- */
.person{text-align:left;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:grid;gap:11px;grid-template-rows:auto 1fr auto;height:100%}
.person:hover{box-shadow:var(--shadow-lift);border-color:var(--navy)}
.person__top{display:flex;align-items:center;gap:12px}
.person__top > *{min-width:0}
.avatar{width:50px;height:50px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;font-family:var(--f-display);font-weight:800;font-size:16px;color:#fff;background:linear-gradient(150deg,#2C5391,#193F78);letter-spacing:.02em}
.person h3{font-size:15px}
.person__role{font-family:var(--f-data);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2);margin-top:3px}
.person__bio{font-family:var(--f-text);font-size:13.5px;line-height:1.5;color:var(--muted)}
.person__nums{display:flex;gap:18px;padding-top:11px;border-top:1px solid var(--line-soft)}
.person__nums div{display:grid;gap:1px}
.person__nums b{font-family:var(--f-data);font-size:14px;font-weight:600;color:var(--navy)}
:root[data-theme="dark"] .person__nums b{color:#8FB4E8}
.person__nums span{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2)}

/* ---------- bloques de datos ---------- */
.datacard{background:var(--mist);border-radius:var(--r);padding:20px;display:grid;gap:6px;border:1px solid transparent}
.datacard b{font-family:var(--f-data);font-size:27px;font-weight:600;color:var(--navy);letter-spacing:-.02em;line-height:1}
:root[data-theme="dark"] .datacard b{color:#8FB4E8}
.datacard span{font-size:12.5px;line-height:1.45;color:var(--muted);font-family:var(--f-text)}
.datacard em{font-family:var(--f-data);font-size:10px;font-style:normal;letter-spacing:.07em;text-transform:uppercase;color:var(--muted-2)}

/* ---------- aliados ---------- */
.allies{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.ally{
  aspect-ratio:16/7;border:1px dashed var(--line);border-radius:2px;display:grid;place-items:center;
  font-family:var(--f-data);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);
  background:var(--paper-2);text-align:center;padding:6px;
}

/* ---------- boletín ---------- */
.newsletter{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
.newsletter h2{font-size:23px;letter-spacing:-.015em}
.newsletter p{font-family:var(--f-text);color:var(--muted);font-size:15px;margin-top:9px;max-width:48ch}
.form-row{display:flex;gap:8px;flex-wrap:wrap}
.form-row input{flex:1;min-width:200px;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:2px;padding:12px 14px;font-family:var(--f-display);font-size:14px}
.form-row input::placeholder{color:var(--muted-2)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--navy);color:#fff;padding:12px 20px;border-radius:2px;font-size:12.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.btn:hover{background:var(--navy-deep)}
:root[data-theme="dark"] .btn{color:#08121F}
.btn--red{background:var(--red);color:#fff}
.btn--red:hover{background:#B70C18}
.btn--ghost{background:transparent;color:var(--navy);border:1px solid var(--line)}
:root[data-theme="dark"] .btn--ghost{color:#8FB4E8}
.btn--ghost:hover{background:var(--mist);border-color:var(--navy)}
.form-note{font-size:11.5px;color:var(--muted-2);margin-top:10px}

/* ---------- pie ---------- */
.footer{background:var(--navy-deep);color:var(--on-navy-dim);margin-top:0;position:relative;overflow:hidden}
.footer::before{
  content:"";position:absolute;left:-140px;bottom:-320px;width:640px;height:640px;border-radius:50%;
  border:44px solid rgba(255,255,255,.045);border-bottom-color:transparent;border-right-color:transparent;
  transform:rotate(-38deg);pointer-events:none;
}
.footer > *{position:relative}
.footer__top{padding:44px 0 34px;display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:32px}
.footer__brand{display:grid;gap:14px;align-content:start}
.footer__brand img{width:96px}
.footer__tag{font-family:var(--f-script);font-size:30px;color:#fff;line-height:1}
.footer__tag i{font-family:var(--f-display);font-style:normal;font-size:17px;font-weight:500;color:var(--on-navy-dim);letter-spacing:.01em}
.footer__brand p{font-family:var(--f-text);font-size:13.5px;line-height:1.55;max-width:36ch}
.footer h4{color:#fff;font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-bottom:13px}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.footer li a{font-size:13px}
.footer li a:hover{color:#fff}
.footer__bottom{border-top:1px solid var(--navy-line);padding:18px 0;display:flex;flex-wrap:wrap;gap:16px;align-items:center;font-size:11.5px}
.footer__bottom a:hover{color:#fff}
.footer__legal{display:flex;gap:16px;flex-wrap:wrap}

/* ---------- ficha de video ---------- */
.player{background:#050D1B;border-radius:var(--r);overflow:hidden}
.player__stage{position:relative;aspect-ratio:16/9}
.player__bar{display:flex;align-items:center;gap:14px;padding:11px 14px;background:#081426;border-top:1px solid rgba(255,255,255,.08)}
.player__bar .scrub{flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.18);position:relative}
.player__bar .scrub i{position:absolute;inset:0 62% 0 0;background:var(--red);border-radius:2px;display:block}
.player__bar .scrub i::after{content:"";position:absolute;right:-5px;top:-3px;width:10px;height:10px;border-radius:50%;background:#fff}
.player__t{font-family:var(--f-data);font-size:11.5px;color:#CBD9EF;white-space:nowrap}
.player__ctl{display:flex;gap:10px;align-items:center;color:#CBD9EF}
.player__ctl svg{width:16px;height:16px;fill:currentColor}
.audiosel{display:flex;gap:0;border:1px solid rgba(255,255,255,.2);border-radius:2px;overflow:hidden}
.audiosel button{padding:4px 9px;font-family:var(--f-data);font-size:10px;letter-spacing:.05em;color:#9DB2D4;text-transform:uppercase}
.audiosel button[aria-pressed="true"]{background:var(--red);color:#fff}

.vlayout{display:grid;grid-template-columns:1fr 348px;gap:30px;align-items:start}
.actionbar{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.action{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:2px;padding:8px 13px;font-size:12px;font-weight:600;letter-spacing:.03em;color:var(--ink)}
.action:hover{border-color:var(--navy);color:var(--navy)}
:root[data-theme="dark"] .action:hover{color:#8FB4E8}
.action svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.transcript{display:grid;gap:0;max-height:520px;overflow-y:auto;border:1px solid var(--line);border-radius:var(--r)}
.tline{display:grid;grid-template-columns:64px 1fr;gap:14px;padding:12px 15px;border-bottom:1px solid var(--line-soft);text-align:left;width:100%}
.tline:last-child{border-bottom:0}
.tline:hover{background:var(--paper-2)}
.tline.is-active{background:color-mix(in srgb,var(--red) 6%,transparent);border-left:3px solid var(--red);padding-left:12px}
.tline__tc{display:block;font-family:var(--f-data);font-size:11.5px;color:var(--navy);font-weight:600;padding-top:2px}
:root[data-theme="dark"] .tline__tc{color:#8FB4E8}
.tline__who{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2);margin-bottom:4px}
.tline__txt{display:block;font-family:var(--f-text);font-size:14.5px;line-height:1.55}

.aside-box{border:1px solid var(--line);border-radius:var(--r);padding:18px;display:grid;gap:14px;background:var(--paper)}
.aside-box h3{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--navy)}
:root[data-theme="dark"] .aside-box h3{color:#8FB4E8}
.deflist{display:grid;gap:10px;font-size:13px}
.deflist div{display:grid;grid-template-columns:104px 1fr;gap:12px}
.deflist dt{font-family:var(--f-data);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2);margin:2px 0 0}
.deflist dd{margin:0;line-height:1.45;min-width:0;overflow-wrap:anywhere}

/* ---------- videoteca ---------- */
.lib{display:grid;grid-template-columns:250px 1fr;gap:30px;align-items:start}
.facet{border-bottom:1px solid var(--line-soft);padding-bottom:16px;margin-bottom:16px}
.facet:last-child{border-bottom:0}
.facet h4{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin-bottom:11px}
.facet label{display:flex;align-items:center;gap:9px;font-size:13.5px;padding:4px 0;cursor:pointer;color:var(--ink)}
.facet label:hover{color:var(--navy)}
.facet input{accent-color:var(--red);width:14px;height:14px;margin:0}
.facet__n{margin-left:auto;font-family:var(--f-data);font-size:11px;color:var(--muted-2)}
/* Faceta puesta. Se marca con color y peso, no solo con el ✓, para que se vea
   de un vistazo cuántos filtros hay activos sin leer la lista entera. */
.facet label.is-on{color:var(--red);font-weight:600}
.facet label.is-on .facet__n{color:var(--red)}

/* Transmisiones / Cortes: las dos maneras de mirar el archivo. */
.ah-modo{display:inline-flex;margin-top:16px;border:1px solid var(--line);border-radius:2px;overflow:hidden}
.ah-modo__op{padding:8px 17px;font-size:13px;color:var(--muted);border-right:1px solid var(--line)}
.ah-modo__op:last-child{border-right:0}
.ah-modo__op:hover{color:var(--ink)}
.ah-modo__op.is-on{background:var(--navy);color:#fff;font-weight:600}
.ah-modo__op.is-on:hover{color:#fff}

/* Los cortes buscados van en rejilla de tres: se eligen por miniatura y
   titular, y a página completa no caben tres a la vez para compararlos.
   El que suena se despliega a lo ancho, que es cuando sí hace falta el sitio. */
.grid .card.ah-corte{cursor:default}
.grid .card.ah-corte .ah-corte__boton{width:100%;position:relative;display:block}
.grid .card.ah-corte.is-sonando{grid-column:1 / -1}
.grid .card.ah-corte.is-sonando .ah-corte__boton{max-width:860px;margin-inline:auto}
.grid .card.ah-corte.is-sonando h3,
.grid .card.ah-corte.is-sonando .card__sum,
.grid .card.ah-corte.is-sonando .meta,
.grid .card.ah-corte.is-sonando .ah-corte__acciones{max-width:860px;margin-inline:auto}

/* En una tarjeta estrecha la descripción se come la altura y desalinea la
   rejilla. Dos líneas bastan para decidir si el corte interesa. */
.card__sum--corto{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card__origen{margin-top:2px;font-size:11.5px;color:var(--muted-2)}
.card__origen span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grid .card.ah-corte .ah-corte__acciones{margin-top:10px;gap:12px}
.grid .card.ah-corte .ah-corte__acciones > a:not(.ah-bajar){font-size:12px;color:var(--muted-2)}
.grid .card.ah-corte .ah-corte__acciones > a:not(.ah-bajar):hover{color:var(--red)}

/* Episodio del podcast: misma tarjeta que un corte, y al reproducirlo se
   despliega a lo ancho de la rejilla. */
.ah-episodio__boton{appearance:none;background:none;border:0;padding:0;margin:0;
  display:block;width:100%;cursor:pointer;position:relative}
.ah-episodio__boton:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:6px}
.ah-episodio__boton iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:6px;z-index:2;background:#000}
.ah-episodio.is-sonando .frame__play,
.ah-episodio.is-sonando .frame__badges{display:none}
/* Con la emisión vertical el marco 16:9 dejaría el video en una franja con dos
   bandas negras enormes. Se le da su propia proporción. */
.ah-episodio.es-vertical.is-sonando .frame{aspect-ratio:9/16}
.grid .ah-episodio.is-sonando{grid-column:1 / -1}
.grid .ah-episodio.is-sonando .ah-episodio__boton{max-width:860px;margin-inline:auto}
.grid .ah-episodio.is-sonando h3,
.grid .ah-episodio.is-sonando .card__sum,
.grid .ah-episodio.is-sonando .meta{max-width:860px;margin-inline:auto}

/* Un acto del archivo: la portada a la izquierda y, a la derecha, su ficha con
   el índice de cortes debajo. Sustituye a la parrilla de tarjetas, donde los
   veintinueve cortes de un mismo acto salían con la misma foto de la misma
   sala repetida veintinueve veces. */
.acto{display:grid;grid-template-columns:280px 1fr;gap:22px;padding:24px 0;border-bottom:1px solid var(--line-soft);align-items:start}
.acto:last-of-type{border-bottom:0}
.acto__marco{display:block}
.acto__cuerpo h3{font-size:17.5px;line-height:1.3;margin-bottom:7px}
.acto__cuerpo h3 a{color:var(--ink)}
.acto__cuerpo h3 a:hover{color:var(--navy)}
:root[data-theme="dark"] .acto__cuerpo h3 a:hover{color:#8FB4E8}
.acto__cuerpo .card__sum{margin-bottom:8px}
@media (max-width:760px){.acto{grid-template-columns:1fr;gap:14px}}

/* El índice. Cada línea es un minuto del acto, no una pieza suelta: por eso va
   como lista y no como tarjeta. La marca de tiempo delante, en la tipografía de
   datos, porque es por donde se busca. */
.indice{list-style:none;margin:14px 0 0;padding:12px 0 0;border-top:1px solid var(--line-soft);display:grid;gap:1px}
.indice li{margin:0}
.indice__fila{display:flex;align-items:center;gap:8px}
/* La línea entera es el disparador de reproducción, así que es un <button> y hay
   que quitarle todo lo que el navegador le pone por su cuenta. */
.indice__enlace{flex:1;display:grid;grid-template-columns:74px 1fr;gap:12px;align-items:baseline;
  padding:5px 6px;border:0;border-radius:2px;background:none;font:inherit;text-align:left;
  font-size:13.5px;color:var(--ink);text-decoration:none;cursor:pointer}
.indice__enlace:hover{background:rgba(16,44,87,.06);color:var(--navy)}
:root[data-theme="dark"] .indice__enlace:hover{background:rgba(255,255,255,.06);color:#8FB4E8}
.indice__tc{font-size:11.5px;color:var(--muted-2);letter-spacing:.02em}
.indice__t{line-height:1.4}

/* Descargar desde la propia lista, discreto: es una acción por línea y no puede
   competir con el titular. Se enciende al pasar por encima de la fila. */
.indice__bajar{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:3px;color:var(--muted-2);opacity:.45;transition:opacity .12s}
.indice__fila:hover .indice__bajar{opacity:1}
.indice__bajar:hover{background:var(--red);color:#fff;opacity:1}
.indice__bajar--cerrado:hover{background:none;color:var(--muted)}
.indice__bajar svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}
.indice__bajar:focus-visible{opacity:1;outline:2px solid var(--red);outline-offset:2px}

/* El reproductor del corte se abre debajo de su línea: aquí no hay miniatura a
   la que sustituir, como sí la hay en las tarjetas. */
.ah-corte__reproductor{display:none}
.indice .ah-corte.is-sonando .ah-corte__reproductor{
  display:block;margin:8px 0 12px;aspect-ratio:16/9;max-width:640px;border-radius:4px;overflow:hidden;background:#000}
.indice .ah-corte.is-sonando .ah-corte__reproductor iframe{width:100%;height:100%;border:0}
.indice .ah-corte.is-sonando .indice__enlace{color:var(--red);font-weight:600}

/* El botón de descargar, debajo del reproductor y solo con el corte abierto.

   Mientras se recorre el índice basta el icono de la esquina: son muchas líneas
   y un botón rojo por cada una sería una pared. Pero abrir un corte es dejar de
   recorrer y ponerse a decidir sobre ese, y ahí la acción tiene que estar
   delante y no en la esquina de la fila que se acaba de dejar arriba.

   Se alinea con el reproductor —el mismo `max-width`— para que cuelgue de él y
   no de la lista. */
.indice__acciones{display:none}
.indice .ah-corte.is-sonando .indice__acciones{
  display:block;max-width:640px;margin:0 0 16px}

/* Texto solo para lectores de pantalla: el botón de descarga es un icono, y sin
   esto no dice nada a quien no lo ve. */
.u-oculto{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media (max-width:520px){.indice__enlace{grid-template-columns:62px 1fr;gap:9px;font-size:13px}}

.resultbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:6px}
.resultbar__n{font-size:13.5px;color:var(--muted)}
.resultbar__n b{color:var(--ink);font-family:var(--f-data);font-weight:600}
.select{margin-left:auto;display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:2px;padding:7px 11px;font-size:12.5px;color:var(--ink)}
.rowitem{display:grid;grid-template-columns:196px 1fr;gap:18px;padding:18px 0;border-bottom:1px solid var(--line-soft);text-align:left;width:100%;align-items:start}
.rowitem:hover h3{color:var(--navy)}
:root[data-theme="dark"] .rowitem:hover h3{color:#8FB4E8}
.rowitem h3{font-size:16.5px;line-height:1.32}
.rowitem .frame{border-radius:2px}
.pager{display:flex;gap:6px;justify-content:center;padding-top:24px}
.pager button{min-width:34px;height:34px;padding:0 10px;border:1px solid var(--line);border-radius:2px;font-family:var(--f-data);font-size:12.5px;color:var(--ink)}
.pager button[aria-current="page"]{background:var(--navy);color:#fff;border-color:var(--navy)}
:root[data-theme="dark"] .pager button[aria-current="page"]{color:#08121F}
.pager button:hover:not([aria-current]){border-color:var(--navy)}

/* ---------- páginas internas ---------- */
.pagehead{background:var(--navy-deep);color:#fff;padding:38px 0 34px;position:relative;overflow:hidden}
.pagehead::before{
  content:"";position:absolute;right:-180px;top:-260px;width:600px;height:600px;border-radius:50%;
  border:40px solid rgba(215,15,29,.22);border-bottom-color:transparent;border-left-color:transparent;
  transform:rotate(42deg);pointer-events:none;
}
.pagehead > *{position:relative}
.pagehead__eyebrow{display:flex;align-items:center;gap:12px;font-family:var(--f-data);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#FF6B73;margin-bottom:11px}
.pagehead__eyebrow::before{content:"";width:28px;height:2px;background:var(--red)}
.pagehead h1{color:#fff;font-size:36px;letter-spacing:-.022em;line-height:1.1}
/* «Somos Americanos Hispanos».
   Iba en manuscrita a 82px y se salía del sistema tipográfico del sitio: en un
   archivo institucional, una letra de felicitación resta autoridad justo en la
   página donde se explica quiénes somos. La jerarquía se mantiene con peso y
   color —que es como titula el resto— en vez de con un cambio de familia. */
.tagline-xl{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  font-family:var(--f-display);font-size:42px;font-weight:400;
  letter-spacing:-.022em;line-height:1.12;color:rgba(255,255,255,.66)}
.tagline-xl span{font-weight:800;color:#fff;letter-spacing:-.028em}
@media (max-width:640px){.tagline-xl{font-size:29px;gap:9px}}
.pagehead p{font-family:var(--f-text);font-size:16.5px;line-height:1.55;color:var(--on-navy);margin-top:13px;max-width:66ch}
.crumbs{display:flex;gap:9px;font-family:var(--f-data);font-size:11px;color:var(--muted-2);padding:14px 0;letter-spacing:.03em;flex-wrap:wrap}
.crumbs a:hover{color:var(--navy)}

.chamber{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--paper)}
.chamber__head{display:flex;align-items:center;gap:12px;padding:15px 18px;background:var(--mist);border-bottom:1px solid var(--line)}
.chamber__head h3{font-size:15px;letter-spacing:.02em}
.status{display:inline-flex;align-items:center;gap:7px;margin-left:auto;font-family:var(--f-data);font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:2px}
.status--live{background:var(--red);color:#fff}
.status--rec{background:var(--line);color:var(--muted)}
.chamber__body{padding:18px}
.chamber__body dl{margin:0;display:grid;gap:11px}

.prose{font-family:var(--f-text);font-size:16.5px;line-height:1.68;color:var(--ink);max-width:66ch}
.prose p + p{margin-top:16px}
.prose h3{font-family:var(--f-display);font-size:19px;margin:30px 0 10px}
.pull{
  border-left:3px solid var(--red);padding:4px 0 4px 20px;margin:26px 0;
  font-family:var(--f-text);font-size:21px;line-height:1.42;color:var(--navy-ink);font-weight:600;max-width:52ch;
}
.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:stretch}
.flowstep{background:var(--mist);border-radius:var(--r);padding:20px;display:grid;gap:9px;align-content:start;position:relative}
.flowstep h3{font-size:14px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--navy)}
:root[data-theme="dark"] .flowstep h3{color:#8FB4E8}
.flowstep p{font-family:var(--f-text);font-size:14px;line-height:1.5;color:var(--muted)}
.flowstep__n{font-family:var(--f-data);font-size:10.5px;letter-spacing:.1em;color:var(--red);font-weight:600}

.principles{display:grid;gap:0;border-top:1px solid var(--line)}
.principle{display:grid;grid-template-columns:200px 1fr;gap:26px;padding:22px 0;border-bottom:1px solid var(--line-soft)}
.principle h3{font-size:15px;letter-spacing:.01em}
.principle p{font-family:var(--f-text);font-size:15px;line-height:1.6;color:var(--muted);max-width:62ch}

/* ---------- área de aliados ---------- */
.authgrid{display:grid;grid-template-columns:1fr 400px;gap:38px;align-items:start}
.authcard{border:1px solid var(--line);border-top:3px solid var(--red);border-radius:var(--r);background:var(--paper);box-shadow:var(--shadow)}
.authcard__body{padding:22px}
.authcard .tabs{margin:0;padding:0 22px;border-bottom:1px solid var(--line)}
.field{display:grid;gap:6px;margin-bottom:13px}
.field label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2)}
.field input,.field select,.field textarea{
  border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:2px;
  padding:11px 13px;font-family:var(--f-display);font-size:14px;width:100%;
}
.field input::placeholder,.field textarea::placeholder{color:var(--muted-2)}
.field--row{grid-template-columns:1fr 1fr;gap:10px}
.field--row .field{margin:0}
.checklist{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.checklist li{display:grid;grid-template-columns:20px 1fr;gap:12px;align-items:start;font-size:14.5px;line-height:1.5}
.checklist svg{width:16px;height:16px;fill:none;stroke:var(--red);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;margin-top:3px}
.checklist b{display:block;font-weight:700;font-size:14.5px;color:var(--navy-ink)}
.checklist span{color:var(--muted);font-family:var(--f-text);font-size:14px}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;counter-reset:paso}
.step{background:var(--mist);border-radius:var(--r);padding:18px;display:grid;gap:7px;align-content:start}
.step__n{
  font-family:var(--f-data);font-size:10.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--red);
}
.step h3{font-size:14.5px}
.step p{font-family:var(--f-text);font-size:13.5px;line-height:1.5;color:var(--muted)}

/* barra de sesión del panel privado */
.panelbar{background:var(--navy);color:#fff;border-bottom:3px solid var(--red)}
:root[data-theme="dark"] .panelbar{background:#12305C}
@media (prefers-color-scheme:dark){.panelbar{background:#12305C}}
:root[data-theme="light"] .panelbar{background:var(--navy)}
.panelbar .shell{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-block:13px}
.panelbar__who{display:flex;align-items:center;gap:11px;min-width:0}
.panelbar__who .avatar{width:38px;height:38px;font-size:13px;background:rgba(255,255,255,.16)}
.panelbar__name{font-size:15px;font-weight:700;color:#fff;line-height:1.2}
.panelbar__meta{font-family:var(--f-data);font-size:10.5px;letter-spacing:.05em;color:rgba(255,255,255,.72);margin-top:3px}
.panelbar__out{margin-left:auto;display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(255,255,255,.28);border-radius:2px;padding:7px 13px;font-size:12px;font-weight:600;color:#fff}
.panelbar__out:hover{background:rgba(255,255,255,.14)}

.dl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--paper)}
.dl-table{width:100%;border-collapse:collapse;min-width:720px}
.dl-table th{
  text-align:left;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted-2);padding:12px 16px;border-bottom:1px solid var(--line);background:var(--paper-2);white-space:nowrap;
}
.dl-table td{padding:13px 16px;border-bottom:1px solid var(--line-soft);font-size:13.5px;vertical-align:middle}
.dl-table tr:last-child td{border-bottom:0}
.dl-table tbody tr:hover{background:var(--paper-2)}
.dl-table .t-name{font-weight:600;color:var(--navy-ink);line-height:1.35}
.dl-table .t-sub{font-family:var(--f-text);font-size:12.5px;color:var(--muted);margin-top:3px}
.dl-table .mono{font-size:12px;color:var(--muted);white-space:nowrap}
.dl-btn{
  display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:2px;
  padding:6px 11px;font-size:11.5px;font-weight:600;color:var(--ink);white-space:nowrap;
}
.dl-btn:hover{border-color:var(--red);color:var(--red)}
.dl-btn svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dl-group{display:flex;gap:6px;flex-wrap:wrap}

.tokenbox{
  display:flex;align-items:center;gap:10px;background:var(--paper-2);border:1px solid var(--line);
  border-radius:2px;padding:11px 13px;font-family:var(--f-data);font-size:12px;color:var(--ink);
  overflow-x:auto;white-space:nowrap;
}
.tokenbox b{color:var(--muted-2);font-weight:400}

/* ---------- pantallas ---------- */
.screen[hidden]{display:none}

/* ---------- responsive ---------- */
@media (max-width:1120px){
  .nav a{padding:10px 8px;font-size:11.5px}
  .footer__top{grid-template-columns:1fr 1fr 1fr}
  .allies{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:960px){
  .masthead .shell{height:64px;gap:14px}
  .nav{position:fixed;inset:64px 0 auto 0;background:var(--paper);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;padding:8px 0;display:none;box-shadow:var(--shadow-lift);max-height:calc(100dvh - 64px);overflow-y:auto}
  .nav.is-open{display:flex}
  .nav a{padding:13px 24px;border-bottom:1px solid var(--line-soft);border-left:3px solid transparent}
  .nav a.is-active{border-bottom-color:var(--line-soft);border-left-color:var(--red)}
  .burger{display:grid}
  .lead{grid-template-columns:1fr}
  .vlayout,.lib,.authgrid{grid-template-columns:1fr}
  .authgrid aside{position:static !important}
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .grid--3{grid-template-columns:repeat(2,1fr)}
  .newsletter{grid-template-columns:1fr;gap:20px}
  .livebar__grid{display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;background:transparent}
  .livebar__grid::-webkit-scrollbar{height:4px}
  .livebar__grid::-webkit-scrollbar-thumb{background:var(--navy-line);border-radius:2px}
  .livecard{flex:0 0 292px;scroll-snap-align:start;grid-template-columns:92px 1fr;gap:10px;padding-right:16px;border-right:1px solid var(--navy-line)}
  .livecard__title{font-size:12.5px}
  .flow{grid-template-columns:1fr}
  .principle{grid-template-columns:1fr;gap:8px}
  .utility__links,.utility__social{display:none}
  .lead__main h1{font-size:27px}
  .pagehead h1{font-size:28px}
  .mast__tools{margin-left:auto}
}
@media (max-width:640px){
  :root{--gut:16px}
  .grid--4,.grid--3,.grid--2{grid-template-columns:1fr}
  .rowitem{grid-template-columns:1fr}
  .allies{grid-template-columns:repeat(2,1fr)}
  .footer__top{grid-template-columns:1fr;gap:26px}
  .side-item{grid-template-columns:104px 1fr}
  .statrow{gap:20px}
  .searchpanel{padding:22px 18px}
  .utility .shell{gap:10px}
  .utility__social{display:none}
  .deflist div{grid-template-columns:1fr;gap:2px}
  .rundown__row{grid-template-columns:70px 1fr;gap:10px}
  .rundown__tag{grid-column:2}
  .hide-sm,.key-label{display:none}
  .utility__key{padding:4px 7px}
  .utility__clock{font-size:10.5px}
  .utility__badge{font-size:9px;padding:2px 6px;letter-spacing:.07em}
  .masthead .shell{gap:10px}
  .brand{gap:8px}
  .brand__mark{width:40px}
  .brand__word b{font-size:15.5px}
  .brand__word span{font-size:10px;letter-spacing:.22em}
  .mast__tools{gap:6px}
  .mast__tools .icon-btn[aria-label="Buscar en el sitio"]{display:none}
  .btn-live{padding:8px 11px;font-size:11px;gap:6px}
  .steps{grid-template-columns:1fr}
  .field--row{grid-template-columns:1fr}
  .panelbar .shell{gap:12px}
  .searchbox{flex-wrap:wrap}
  .searchbox input{flex:1 0 100%}
  .searchbox button{flex:1;padding:12px 22px}
  .statrow{gap:16px 24px}
  .flow{gap:12px}
  .tagline-xl{gap:8px}
}

/* ---------- capa de subtítulo sobre el reproductor incrustado ----------
   YouTube no admite pistas propias: el subtítulo en español se pinta encima
   y se sincroniza con el minuto que reporta la IFrame API. */
.player__stage{position:relative}
.player__stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* El subtítulo va POR ENCIMA del rótulo de la propia transmisión.
   Estaba al 7 % del borde inferior y caía justo sobre el cintillo de la Casa
   Blanca —su banda azul, su código QR—, de modo que ni se leía el subtítulo ni
   se leía el rótulo. Los cintillos institucionales ocupan siempre la franja
   inferior; arrancando al 22 % se libra de todos sin depender del video.

   Y con caja, no con sombra. Sobre una sala luminosa el texto blanco con sombra
   se pierde; la caja además dice de un vistazo que ese texto lo pone América
   Hispana y no el canal. `box-decoration-break: clone` le da su propia caja a
   cada línea, que es como se compone un subtítulo de televisión. */
.ah-subtitulo{
  position:absolute;left:6%;right:6%;bottom:22%;z-index:3;pointer-events:none;
  text-align:center;opacity:0;transition:opacity .15s;
}
.ah-subtitulo b{
  display:inline;font-weight:600;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  background:rgba(16,44,87,.93);
  padding:.3em .62em;border-radius:3px;
  font-family:var(--f-display);font-size:clamp(15px,1.9vw,21px);
  line-height:1.62;color:#fff;
  /* los cues vienen partidos en dos líneas por el pipeline; se respeta */
  white-space:pre-line;
}
@media (max-width:640px){
  .ah-subtitulo{bottom:24%;left:4%;right:4%}
  .ah-subtitulo b{font-size:13.5px;line-height:1.55}
}

/* ---------- formulario de acceso nativo de WordPress ---------- */
#ah-login p{display:grid;gap:6px;margin-bottom:13px}
#ah-login label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2)}
#ah-login input[type="text"],#ah-login input[type="password"]{
  border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:2px;
  padding:11px 13px;font-family:var(--f-display);font-size:14px;width:100%;
}
#ah-login .login-remember label{display:flex;align-items:center;gap:8px;text-transform:none;letter-spacing:0;font-size:12.5px;font-weight:400;color:var(--muted)}
#ah-login .login-submit input{
  width:100%;background:var(--red);color:#fff;border:0;border-radius:2px;padding:12px 20px;
  font-family:var(--f-display);font-size:12.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;cursor:pointer;
}
#ah-login .login-submit input:hover{background:#B70C18}


/* ── Ficha de transmisión: cortes y transcripción plegada ────────────────── */

/* El corte es un botón que lleva al minuto, pero tiene que verse como una
   tarjeta: sin esto el navegador le pone su propio fondo y centra el texto. */
.ah-corte {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	color: inherit;
	text-align: left;
	width: 100%;
	cursor: pointer;
	display: block;
}
.ah-corte:focus-visible {
	outline: 2px solid var(--red);
	outline-offset: 3px;
	border-radius: 8px;
}

/* La transcripción va plegada: son mil líneas y separaban el video de los
   cortes, que es lo que la gente viene a ver. */
.ah-plegable > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	cursor: pointer;
	list-style: none;
	padding: 13px 16px;
	border: 1px solid var(--line);
	border-radius: 8px;
	font-family: var(--f-display, inherit);
	font-weight: 600;
	font-size: 13.5px;
	letter-spacing: .02em;
}
.ah-plegable > summary::-webkit-details-marker { display: none; }
.ah-plegable > summary::after {
	content: "▾";
	font-size: 12px;
	opacity: .6;
	transition: transform .15s ease;
}
.ah-plegable[open] > summary::after { transform: rotate(180deg); }
.ah-plegable > summary:hover { border-color: var(--red); }

/* ── Videoteca: filtros ───────────────────────────────────────────────────── */

/* Los filtros van en la consulta, no en JavaScript sobre lo pintado: así el
   resultado se puede enlazar y mandar a alguien, y la paginación es real. */
.ah-filtros { display: grid; gap: 12px; margin-top: 20px; }
.ah-filtros__linea { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.ah-filtros__linea input[type="search"] {
	flex: 1 1 320px;
	padding: 12px 15px;
	border-radius: 8px;
	border: 1px solid var(--line);
	background: transparent;
	color: inherit;
	font: inherit;
}
.ah-filtros__linea button[type="submit"] {
	padding: 12px 22px;
	border: 0;
	border-radius: 8px;
	background: var(--red);
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
.ah-filtros__linea--fina label { display: grid; gap: 5px; }
.ah-filtros__linea--fina label > span {
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	opacity: .6;
}
.ah-filtros__linea--fina select,
.ah-filtros__linea--fina input[type="date"] {
	padding: 9px 11px;
	border-radius: 7px;
	border: 1px solid var(--line);
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 13.5px;
}
.ah-filtros__limpiar { font-size: 13px; opacity: .7; padding-bottom: 10px; }

/* Cuántos cortes tiene una transmisión, en la fila del resultado. */
.rowitem__cortes {
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 1px 9px;
	font-size: 11.5px;
}

/* ── Registro de aliados ──────────────────────────────────────────────────── */

.ah-registro { max-width: 760px; display: grid; gap: 26px; }
.ah-registro fieldset { border: 0; padding: 0; margin: 0; }
.ah-registro legend {
	font-family: var(--f-display, inherit);
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	opacity: .6;
	margin-bottom: 12px;
}
/* Columnas fijas por tramo, no `auto-fit`.

   Con `repeat(auto-fit, minmax(240px, 1fr))` el número de columnas lo decidía
   el ancho disponible: tres en una ventana, cuatro en otra un poco más grande,
   cinco en un monitor. La ficha cambiaba de forma según quién la mirase, y el
   teléfono —que ocupa dos columnas— se veía la mitad de ancho con cuatro
   columnas que con tres. De ahí que unas casillas parecieran más anchas y
   otras más angostas.

   Tres tramos y nada más: escritorio, tableta y móvil. Predecible. */
.ah-registro__rejilla {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px 18px;
}
@media (min-width: 560px) {
	.ah-registro__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
	.ah-registro__rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.ah-registro__ancho { grid-column: 1 / -1; }

/* `align-content: start` y no el `stretch` que trae la rejilla por defecto.

   Aquí estaba el desorden que se veía en pantalla. Cada etiqueta es una rejilla
   —rótulo arriba, campo abajo— y la celda entera se estira hasta la altura de
   la fila. La fila la marcaba «Contraseña», que lleva debajo la nota de los
   ocho caracteres; sus vecinas se estiraban para igualarla, y como sus filas
   internas también crecían, el campo del teléfono acababa **más alto** que el
   de la contraseña y **empezando más abajo**.

   Con `start`, cada fila interna ocupa lo que necesita: todos los rótulos a la
   misma altura, todos los campos a la misma altura, y la nota de ayuda cuelga
   por debajo sin arrastrar a nadie. */
.ah-registro label {
	display: grid;
	align-content: start;
	gap: 6px;
	font-size: 13.5px;
}
/* Rótulo y asterisco en una sola fila.
   La etiqueta es una rejilla, así que el texto suelto y el <span> del asterisco
   eran DOS filas: el asterisco caía en su propio renglón, debajo del nombre del
   campo. Ahora van envueltos juntos y la rejilla ve un rótulo y un campo. */
.ah-registro .ah-rotulo { display: block; }
.ah-registro .ah-rotulo b { color: var(--red); font-weight: 600; }
/* «(opcional)», ahora que casi toda la ficha es obligatoria: sin esto, los dos
   únicos campos que se pueden dejar en blanco no se distinguen de los demás.
   Discreto a propósito — informa, no compite con el rótulo. */
.ah-registro .ah-rotulo em,
.ah-registro legend em {
	font-style: normal; font-weight: 400; color: var(--muted-2);
	font-size: .92em; letter-spacing: 0;
}
.ah-registro label small { font-size: 12px; opacity: .55; }
.ah-registro input[type="text"],
.ah-registro input[type="email"],
.ah-registro input[type="tel"],
.ah-registro input[type="url"],
.ah-registro input[type="password"],
.ah-registro select {
	padding: 11px 13px;
	border-radius: 8px;
	border: 1px solid var(--line);
	background: var(--paper);
	color: var(--ink);
	font: inherit;
	font-size: 14px;
	/* Alto fijo e idéntico para campo y desplegable. Cada navegador calcula el
	   alto de un <select> a su manera —no usa la misma línea base que un
	   <input>—, así que sin esto los dos del teléfono nunca casan del todo con
	   el de al lado, y basta un píxel de diferencia para que la fila se lea
	   torcida. Con `box-sizing: border-box` el número incluye borde y relleno. */
	line-height: 1.35;
	height: 44px;
}
/* Los que llevan varias líneas de texto no pueden ir con alto fijo. */
.ah-registro textarea { height: auto; }
.ah-registro__casillas {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 9px 18px;
}
.ah-casilla {
	display: flex !important;
	align-items: flex-start;
	gap: 10px;
	font-size: 13.5px;
	cursor: pointer;
}
.ah-casilla input { margin-top: 3px; flex: 0 0 auto; }
.ah-casilla--condiciones {
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 15px 17px;
	line-height: 1.55;
}

/* El campo trampa nunca lo ve una persona; que no lo lea tampoco un lector de
   pantalla, o le pediría rellenar algo que no debe rellenar. */
.ah-trampa {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ── Retratos del equipo ──────────────────────────────────────────────────── */

/* Ocupa el mismo hueco que la inicial, así que la ficha se ve igual de
   compuesta con foto o sin ella y no salta al subirla. */
.avatar--foto {
	padding: 0;
	overflow: hidden;
	background: none;
}
.avatar--foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* El encuadre alto: en un retrato vertical, centrar recorta la frente. */
	object-position: 50% 22%;
	display: block;
	border-radius: inherit;
}

/* ── Cortes: se reproducen en su tarjeta ──────────────────────────────────── */

/* El botón es la miniatura entera. Sin esto el navegador le pone su fondo y
   centra el contenido, y la tarjeta deja de parecer una tarjeta. */
.ah-corte__boton {
	appearance: none; background: none; border: 0; padding: 0; margin: 0;
	display: block; width: 100%; cursor: pointer; position: relative;
}
.ah-corte__boton:focus-visible {
	outline: 2px solid var(--red, #D7263D); outline-offset: 3px; border-radius: 6px;
}

/* El reproductor sustituye a la miniatura ocupando su hueco exacto, para que la
   rejilla no dé un salto al empezar a sonar. */
.ah-corte__boton iframe {
	position: absolute; inset: 0; width: 100%; height: 100%;
	border: 0; border-radius: 6px; z-index: 2; background: #000;
}
.ah-corte.is-sonando .frame__play,
.ah-corte.is-sonando .frame__badges { display: none; }

/* El corte que suena ocupa la fila entera.
   En una rejilla de tres columnas, un corte mide un tercio del ancho: se ve
   quién habla y poco más, y los controles del reproductor salen apelotonados.
   Al darle a reproducir se despliega a lo ancho, que es donde un corte de dos
   minutos se puede ver de verdad. Al pulsar otro, el anterior vuelve a su
   tamaño —solo suena uno a la vez— y la rejilla se recompone sola. */
.ah-corte.is-sonando { grid-column: 1 / -1; }
.ah-corte.is-sonando .ah-corte__boton { max-width: 900px; margin-inline: auto; }
.ah-corte.is-sonando h3,
.ah-corte.is-sonando .card__sum,
.ah-corte.is-sonando > .meta,
.ah-corte.is-sonando .ah-corte__acciones { max-width: 900px; margin-inline: auto; }
@media (max-width: 760px) { .ah-corte.is-sonando { grid-column: auto; } }

.ah-corte__acciones {
	display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
	margin-top: 9px; font-size: 12px;
}

/* Descargar es la acción principal de la página para un medio aliado: es a lo
   que viene. Iba como un enlace más, del mismo peso que «Ver en la
   transmisión», y con un candado cerrado que decía lo contrario de la verdad.

   El selector va con el contenedor delante —`.ah-corte__acciones a.ah-bajar`—
   y no suelto. `.ah-corte__acciones a` es más específico que `.ah-bajar`, así
   que ganaba: le ponía `background:none` y el gris de los enlaces, y solo al
   pasar el ratón lo teñía de rojo. Resultado: un botón invisible que aparecía
   al acercarse. Rojo sólido y blanco SIEMPRE, en tema claro y en oscuro, que
   es lo único que hace evidente que ahí hay algo que pulsar. */
.ah-corte__acciones a.ah-bajar,
.actionbar a.action--fuerte,
a.ah-bajar {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 8px 14px; border: 1px solid var(--red, #D7263D); border-radius: 3px;
	background: var(--red, #D7263D); color: #fff;
	font-weight: 700; font-size: 12px; letter-spacing: .015em;
	text-decoration: none;
}
/* El mismo oscurecido que `.btn--red`, que es la convención del sitio. En tema
   oscuro `--red` es más brillante, así que se oscurece con un filtro en vez de
   fijar un color: así el botón se comporta igual en los dos temas. */
.ah-corte__acciones a.ah-bajar:hover,
.actionbar a.action--fuerte:hover,
a.ah-bajar:hover {
	filter: brightness(.88); color: #fff;
}
.ah-corte__acciones a.ah-bajar svg,
.actionbar a.action--fuerte svg,
a.ah-bajar svg {
	width: 15px; height: 15px; stroke: #fff; fill: none; stroke-width: 2.2;
}

/* Sin sesión SIGUE SIENDO UN BOTÓN, con contorno en vez de relleno.

   Antes era transparente, sin borde, sin padding y en gris: al lado de dos
   botones de compartir se leía como un renglón de texto, y el visitante que
   llegaba de un enlace compartido concluía que la descarga no existía. Es
   justo al revés — es la única razón por la que alguien se registra.

   Contorno y no rojo sólido porque el archivo no va a llegar todavía: el rojo
   es la descarga de verdad. El contorno dice «hay algo aquí, falta un paso». */
.ah-corte__acciones a.ah-bajar--cerrado,
a.ah-bajar--cerrado {
	background: transparent; color: var(--red, #D7263D);
	border-color: var(--red, #D7263D); font-weight: 700;
}
.ah-corte__acciones a.ah-bajar--cerrado:hover,
a.ah-bajar--cerrado:hover {
	background: var(--red, #D7263D); color: #fff; filter: none;
}
.ah-corte__acciones a.ah-bajar--cerrado svg,
a.ah-bajar--cerrado svg { stroke: currentColor; width: 14px; height: 14px; }

/* La salvedad, donde hay sitio para escribirla: en la ficha de una pieza sí,
   en una lista de veinte tarjetas no —ahí la lleva el propio texto del botón—. */
.ah-bajar__nota{
	flex-basis:100%; margin-top:7px; font-family:var(--f-text);
	font-size:12.5px; line-height:1.5; color:var(--muted-2)}
.ah-corte__acciones a,
.ah-corte__contexto {
	display: inline-flex; align-items: center; gap: 6px;
	appearance: none; background: none; border: 0; padding: 0;
	font: inherit; color: var(--muted-2, #8a94a6); cursor: pointer;
	text-decoration: none;
}
.ah-corte__acciones a:hover,
.ah-corte__contexto:hover { color: var(--red, #D7263D); }
.ah-corte__acciones svg {
	width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2;
}

/* ── Compartir ───────────────────────────────────────────────────────────────

   Discretos a propósito. Compartir es una acción secundaria: la principal de
   esta página es ver el material y, para un aliado, descargarlo. Tres botones
   de color al lado del rojo de descarga competirían con él y no hay ninguna
   razón para eso.

   Los tres se enseñan siempre. Lo único que cambia con el aparato es qué hace
   el tercero: abrir el selector del sistema donde lo hay, o copiar el enlace.
   Sin JavaScript copia, que es lo que funciona en cualquier sitio. */
.ah-compartir{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
.ah-compartir__op{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;padding:0;border:1px solid var(--line);border-radius:3px;
  background:none;color:var(--muted-2);cursor:pointer;text-decoration:none;
}
.ah-compartir__op svg{width:16px;height:16px;fill:currentColor;stroke:none}
/* El rótulo se queda para los lectores de pantalla: un botón que solo es un
   icono no dice nada a quien no lo ve, y el logotipo de WhatsApp o de X no
   tiene texto alternativo por sí mismo. */
.ah-compartir__op span{
  position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Salvo el de copiar, que cambia su texto para confirmar. Cuando lo hace, se
   enseña: si el usuario pulsa y no pasa nada visible, vuelve a pulsar. */
.ah-compartir__op.ha-copiado{width:auto;padding:0 11px;gap:6px;font:600 12px/1 inherit}
.ah-compartir__op.ha-copiado span{position:static;width:auto;height:auto;clip-path:none}
.ah-compartir__op:hover{color:var(--red);border-color:currentColor}
/* Los dos que más se usan llevan su color de marca, no solo al pasar por
   encima: en una fila de tres botones grises hay que leerlos para distinguirlos,
   y con el logotipo en color se reconocen sin leer. Siguen siendo discretos
   —borde y no relleno— porque compartir es la accion secundaria de la pagina. */
.ah-compartir__op--wa{color:#1FA855;border-color:currentColor}
.ah-compartir__op--wa:hover{color:#fff;background:#25D366;border-color:#25D366}
.ah-compartir__op--x{color:var(--ink);border-color:var(--line)}
.ah-compartir__op--x:hover{color:#fff;background:#000;border-color:#000}


/* En la barra lateral, la tarjeta de transmisión se apila.

   `.rowitem` es una rejilla de 196 px para la miniatura más el resto para el
   texto, y funciona a ancho completo. En una columna de 348 px deja 137 px al
   titular: seis renglones de dos palabras, 218 px de alto para decir lo que
   cabía en dos líneas. Aquí la miniatura va arriba y el texto debajo. */
.aside-box .rowitem{grid-template-columns:1fr;gap:10px;padding:0;border-bottom:0}
.aside-box .rowitem h3{font-size:15px;line-height:1.35}

/* ── Autorrelleno del navegador ──────────────────────────────────────────────

   Cuando Chrome o Safari rellenan un campo con los datos guardados del usuario,
   le pintan un fondo propio —un lila claro— por encima de cualquier `background`
   del CSS. Con el tema oscuro el resultado es una ficha a medias: los campos que
   escribió la persona salen oscuros y los que rellenó el navegador salen
   blancos, en la misma fila. Parece un error del sitio y no lo es.

   Ese fondo NO se quita con `background`; el navegador lo impone después. Lo
   único que lo tapa es una sombra interior sólida, que sí se dibuja encima. Y el
   color del texto hay que fijarlo con `-webkit-text-fill-color`, porque `color`
   tampoco manda dentro de un campo autorrellenado.

   La transición larguísima es el truco conocido para que el fondo amarillo del
   primer instante no llegue a verse: la animación empieza y nunca termina. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
select:-webkit-autofill,
textarea:-webkit-autofill {
	-webkit-text-fill-color: var(--ink);
	-webkit-box-shadow: 0 0 0 1000px var(--paper) inset;
	box-shadow: 0 0 0 1000px var(--paper) inset;
	caret-color: var(--ink);
	transition: background-color 9999s ease-in-out 0s;
}

/* Firefox y los navegadores que ya siguen el estándar. */
input:autofill,
select:autofill,
textarea:autofill {
	box-shadow: 0 0 0 1000px var(--paper) inset;
	color: var(--ink);
}

/* Teléfono con prefijo: el desplegable de país y el número, uno al lado del otro.

   `minmax(0, 1fr)` y NO `1fr`, y esto es el fallo que se veía en pantalla.
   `1fr` es en realidad `minmax(auto, 1fr)`, y el mínimo `auto` de un <select>
   es su contenido más ancho: con opciones como «🇻🇪 Venezuela (+58)» o
   «🇩🇴 República Dominicana (+1)», ese mínimo es mayor que la columna. El
   desplegable desbordaba su celda, se metía en la del campo «País» y arrastraba
   consigo al número — que acababa colocado debajo del rótulo equivocado, y con
   el recuadro rojo del foco saliéndose por la derecha.

   No estaban invertidas las etiquetas: cada una seguía sobre su campo. Lo que
   se había movido eran los campos.

   En móvil se apilan, porque el desplegable necesita ancho para que se lea el
   nombre del país y no solo la bandera. */
.ah-tel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
@media (min-width: 560px) {
	.ah-tel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.ah-tel select, .ah-tel input { min-width: 0; }

/* Y el teléfono ocupa dos columnas de la rejilla del registro.
   Son dos controles donde los demás campos tienen uno: en un tercio de fila el
   nombre del país se cortaba a la mitad aunque ya no desbordase. */
@media (min-width: 560px) { .ah-registro__doble { grid-column: span 2; } }

/* El archivo del medio, en su panel: qué se ha llevado y qué ha compartido. */
.ah-mias{display:grid;gap:0;margin:0;padding:0;list-style:none}
/* Tres columnas: miniatura, texto y —a la derecha— volver a bajarla. La fila
   dejó de ser un enlace entero para poder llevar botones dentro. */
.ah-mias .rowitem{grid-template-columns:150px 1fr auto;gap:14px;align-items:center}
.ah-mias h3{font-size:15px;line-height:1.35;margin:0 0 6px}
.ah-mias h3 a{color:inherit;text-decoration:none}
.ah-mias .rowitem:hover h3 a{color:var(--navy)}
:root[data-theme="dark"] .ah-mias .rowitem:hover h3 a{color:#8FB4E8}
.ah-mias__texto{min-width:0}
/* Qué es la pieza. Sin esto, un corte de minuto y medio y una comparecencia de
   tres horas se leen igual en la lista. */
.ah-mias__tipo{
	font-family:var(--f-display);font-size:10px;font-weight:700;letter-spacing:.1em;
	text-transform:uppercase;color:var(--muted-2);
	border:1px solid var(--line);border-radius:2px;padding:2px 6px}
.ah-mias__otra{justify-content:flex-end}
@media (max-width:820px){
	.ah-mias .rowitem{grid-template-columns:150px 1fr;gap:12px}
	.ah-mias__otra{grid-column:1 / -1;justify-content:flex-start}
}
@media (max-width:640px){.ah-mias .rowitem{grid-template-columns:110px 1fr;gap:11px}}

/* ── El armador de direcciones del feed ──────────────────────────────────────
   La dirección se enseña siempre, no detrás de un botón: quien la copia quiere
   VER lo que copia antes de pegarlo en su redacción. */
/* `minmax(0, 1fr)` por el mismo motivo que en el teléfono del registro: el
   mínimo automático de un <select> es su opción más larga, y aquí las hay de
   sobra —«Departamento de Guerra (34)», nombres completos de personas—. Con
   `1fr` pelado la columna crecería hasta desbordar la caja. */
.ah-feedmaker__campos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:14px}
.ah-feedmaker select{min-width:0}
.ah-feedmaker label{display:grid;gap:5px}
.ah-feedmaker label > span{
	font-family:var(--f-display);font-size:10.5px;font-weight:700;letter-spacing:.12em;
	text-transform:uppercase;color:var(--muted-2)}
.ah-feedmaker select,.ah-feedmaker__salida input{
	width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:3px;
	background:var(--paper);color:var(--ink);font:inherit;font-size:13.5px}
.ah-feedmaker__salida input{font-family:var(--f-data);font-size:12.5px}
.ah-feedmaker__salida{margin-bottom:14px}
.ah-feedmaker__acciones{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ah-feedmaker__ojo{font-family:var(--f-text);font-size:12.5px;line-height:1.45;color:var(--muted-2);flex:1 1 220px}
@media (max-width:640px){.ah-feedmaker__campos{grid-template-columns:1fr}}

/* «Ya la tiene», en el catálogo. Es la misma pregunta que responde la lista de
   arriba, contestada donde se está decidiendo. */
.ah-tiene{
	display:inline-block;margin-left:8px;font-family:var(--f-display);font-size:10px;
	font-weight:700;letter-spacing:.09em;text-transform:uppercase;
	color:var(--ok,#0a7d33);border:1px solid var(--ok,#0a7d33);border-radius:2px;padding:1px 5px}

/* Rótulo de la tarjeta de acceso, donde antes había dos pestañas —una de ellas
   sin destino—. Conserva el peso visual sin fingir que hay algo que elegir. */
.authcard__titulo{
  font-family:var(--f-display);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  padding:16px 22px;border-bottom:1px solid var(--line);color:var(--muted-2)}

/* El aviso de acceso fallido. Va dentro de la tarjeta y no arriba del todo:
   quien acaba de escribir mal la contraseña está mirando el formulario, no la
   cabecera de la página. */
.ah-aviso-acceso{
  display:flex;gap:9px;align-items:flex-start;margin:16px 22px 0;padding:11px 13px;
  border:1px solid var(--red);border-radius:4px;
  font-size:13px;line-height:1.5;color:var(--ink)}
.ah-aviso-acceso svg{width:15px;height:15px;flex-shrink:0;margin-top:2px;fill:none;stroke:var(--red);stroke-width:2}
.ah-aviso-acceso--bien{border-color:var(--ok,#0a7d33)}
.ah-aviso-acceso--bien svg{stroke:var(--ok,#0a7d33)}

/* Enviar el vídeo: verde de WhatsApp, porque es a donde va el noventa por
   ciento de las veces y el color lo dice antes que el texto. */
button.ah-bajar--enviar{
  background:#1FA855;border-color:#1FA855;color:#fff;cursor:pointer;font-family:inherit}
button.ah-bajar--enviar svg{stroke:none;fill:#fff;width:15px;height:15px}
button.ah-bajar--enviar:disabled{opacity:.6;cursor:progress}

/* Mientras baja, el propio botón se va llenando. La cifra la escribe el
   JavaScript en `--avance`; el relleno la enseña sin leer. Se le devuelve casi
   toda la opacidad —está inhabilitado, pero está trabajando— porque un botón
   apagado a la mitad no parece que esté haciendo nada. */
button.ah-bajar--enviar.esta-preparando{
  background-image:linear-gradient(to right,#1FA855 var(--avance,0%),#0f5c2e var(--avance,0%))}
button.ah-bajar--enviar.esta-preparando:disabled{opacity:.92}
.ah-enviar__nota{
  flex-basis:100%;margin:8px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted-2)}

/* ── Acciones de una pieza: el vídeo y el enlace ─────────────────────────────

   Dos grupos rotulados porque hacen cosas que se parecen y no son lo mismo:
   uno entrega el ARCHIVO y el otro una DIRECCIÓN. Sin el rótulo, la diferencia
   solo se descubre pulsando. */
.ah-acciones{display:flex;flex-wrap:wrap;gap:22px 34px;margin-top:18px}
.ah-acciones__grupo{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.ah-acciones__rotulo{
  font-family:var(--f-display);font-size:10.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
.ah-acciones__grupo .ah-compartir{margin-top:0}

/* El rótulo del vídeo lo pone el JavaScript en las tarjetas, donde no hay
   estructura de grupos: ahí necesita ocupar la fila entera para no meterse
   entre los dos botones. */
.ah-acciones__rotulo--video{flex-basis:100%;margin-bottom:2px}

/* En el móvil, enviar va primero —es lo que la gente quiere— y descargar
   segundo, pero LOS DOS siguen siendo botones. Quitarle el relleno al de
   descargar lo dejaba pareciendo un renglón de texto y nadie lo pulsaba. */
@media (max-width:640px){
  .ah-acciones{flex-direction:column;gap:20px}
  .ah-acciones__grupo{width:100%}
  .ah-corte__acciones,.actionbar{flex-wrap:wrap}
  .ah-bajar--enviar{order:-1}
  .ah-bajar--enviar,a.ah-bajar{flex:1 1 100%;justify-content:center}
}