/* ═══ VERSIÓN DE ESCRITORIO DE VERDAD (16/10/2026) ═══════════════════
   Franco: «no usás el ancho de la pantalla para aprovecharlo y mostrar el
   contenido de otra forma». Las pantallas que tienen diseño de escritorio
   propio (lista ANCHAS en cop-escritorio.js) NO van al marco: se abren
   sueltas con <html class="esc-ancho"> y estas reglas, SÓLO desde 1100 px.
   En el celular y en el marco no se aplica nada de esto.
   Por pantalla, con su prefijo: body[data-esc="inicio"] … */
@media (min-width:1100px){
  html.esc-ancho{--esc-max:1280px;--esc-gap:28px}

  /* ── INICIO ─────────────────────────────────────────────────────── */
  html.esc-ancho body[data-esc="inicio"] .main{display:block;max-width:none}
  html.esc-ancho body[data-esc="inicio"] .right-col{display:none}
  /* la barra de arriba se frena en los MISMOS bordes que el contenido */
  html.esc-ancho body[data-esc="inicio"] .tb-in{max-width:none;width:min(var(--esc-max), calc(100% - var(--cop-aire,1.8rem) * 2));margin-inline:auto;padding-inline:0}
  html.esc-ancho body[data-esc="inicio"] #colInicio{
    max-width:var(--esc-max);margin-inline:auto;
    display:grid;grid-template-columns:minmax(0,1.85fr) minmax(0,1fr);
    grid-template-areas:"ban acc" "modos modos" "live live";
    gap:var(--esc-gap);align-items:stretch}
  /* banner a la izquierda, del alto de su arte (16/9) */
  html.esc-ancho body[data-esc="inicio"] #adBanner{grid-area:ban;margin:0}
  /* los 4 escudos a la derecha, 2 × 2, centrados en el alto del banner */
  html.esc-ancho body[data-esc="inicio"] #colInicio .access-mobile{
    grid-area:acc;display:grid !important;grid-template-columns:1fr 1fr;gap:18px;
    align-content:center;justify-items:center;margin:0}
  html.esc-ancho body[data-esc="inicio"] #colInicio .access-mobile .access-btn{width:100%;max-width:190px}
  html.esc-ancho body[data-esc="inicio"] #colInicio .access-mobile .ab-img{width:100%;height:auto}
  html.esc-ancho body[data-esc="inicio"] #colInicio > .section-block:not(.section-live){grid-area:modos;margin:0}
  html.esc-ancho body[data-esc="inicio"] #colInicio > .section-live{grid-area:live;margin:0}
  /* En Vivo: en la compu no es carrusel, es una grilla de 3 que se lee de un vistazo */
  html.esc-ancho body[data-esc="inicio"] #liveCarousel{
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;
    overflow:visible;margin:0;padding:0;scroll-snap-type:none}
  html.esc-ancho body[data-esc="inicio"] #liveCarousel > [data-clon]{display:none}
  html.esc-ancho body[data-esc="inicio"] #adBanner{overflow:hidden;border-radius:var(--r-card,14px)}
  html.esc-ancho body[data-esc="inicio"] #adTrack{gap:0;padding:0;margin:0;scroll-padding:0}
  html.esc-ancho body[data-esc="inicio"] #adTrack > .ad-slide{flex:0 0 100%;max-width:100%}
  html.esc-ancho body[data-esc="inicio"] #liveCarousel > .live-card{flex:none;width:auto;max-width:none;min-width:0}
  html.esc-ancho body[data-esc="inicio"] #liveCarousel > :not(.live-card){grid-column:1/-1}
}
@media (min-width:1500px){
  html.esc-ancho body[data-esc="inicio"] #liveCarousel{grid-template-columns:repeat(4,minmax(0,1fr))}
}