/* calienteguatemala.com — cartelera */
:root{
  --rojo:#ed1c24;
  --rojo-hondo:#b9111a;
  --negro:#0e0d0c;
  --carbon:#262321;
  --crema:#fbf5ec;
  --papel:#ffffff;
  --tinta:#1f1b18;
  --gris:#6c6c6c;
  --linea:#e6dccd;
  --ancho:1180px;
  --titular:"Bebas Neue",Impact,"Arial Narrow",sans-serif;
  --texto:"Karla",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--crema);color:var(--tinta);font:400 17px/1.62 var(--texto)}
img{max-width:100%;height:auto;display:block}
a{color:var(--rojo-hondo);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--rojo)}
:focus-visible{outline:3px solid var(--rojo);outline-offset:2px}
.salto{position:absolute;left:-999px;top:0;background:var(--rojo);color:#fff;padding:8px 14px;z-index:50}
.salto:focus{left:8px;top:8px}

/* ---------- barra negra ---------- */
[role="banner"]{background:var(--negro);border-top:4px solid var(--rojo);position:relative;z-index:20}
[role="banner"]>div{max-width:var(--ancho);margin:0 auto;padding:0 20px;height:70px;display:flex;align-items:center;gap:28px}
[role="banner"] a[rel="home"]{flex:0 0 auto;display:block;padding:6px 0}
[role="banner"] a[rel="home"] img{width:150px;height:auto}
nav[aria-label="Principal"] ul{list-style:none;margin:0;padding:0;display:flex;gap:4px}
nav[aria-label="Principal"] a{display:block;color:#f2ece4;text-decoration:none;font:700 13px/1 var(--texto);letter-spacing:.06em;text-transform:uppercase;padding:10px 10px;border-radius:2px}
nav[aria-label="Principal"] a:hover{background:#2a2725;color:#fff}
nav[aria-label="Principal"] a[aria-current="page"],nav[aria-label="Principal"] a[aria-current="true"]{background:#fff;color:var(--negro)}
.boton{display:inline-flex;align-items:center;gap:8px;background:var(--rojo);color:#fff;text-decoration:none;font:400 21px/1 var(--titular);letter-spacing:.06em;padding:12px 20px 10px;border-radius:3px;box-shadow:0 3px 0 var(--rojo-hondo);transition:transform .12s,box-shadow .12s}
.boton:hover{color:#fff;background:#f22a31;transform:translateY(-1px);box-shadow:0 4px 0 var(--rojo-hondo)}
.boton::after{content:"";width:0;height:0;border-left:7px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent}
[role="banner"] .boton{margin-left:auto;font-size:19px;padding:10px 16px 8px}
button[aria-controls="menu-principal"]{display:none;background:none;border:1px solid #4a4542;color:#fff;font:700 12px/1 var(--texto);letter-spacing:.1em;text-transform:uppercase;padding:10px 12px;border-radius:3px;cursor:pointer}
button[aria-controls="menu-principal"] span{display:inline-block;width:16px;height:2px;background:#fff;vertical-align:middle;margin-right:8px;box-shadow:0 -5px 0 #fff,0 5px 0 #fff}

/* ---------- panel de categorías ---------- */
nav[aria-label="Categorías"]{background:var(--papel);border-bottom:1px solid var(--linea);box-shadow:0 6px 18px -14px rgba(0,0,0,.35)}
nav[aria-label="Categorías"] ul{list-style:none;margin:0 auto;padding:10px 12px 8px;max-width:var(--ancho);display:flex;gap:2px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none}
nav[aria-label="Categorías"] ul::-webkit-scrollbar{display:none}
nav[aria-label="Categorías"] li{flex:0 0 auto;scroll-snap-align:start}
nav[aria-label="Categorías"] a{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:92px;padding:6px 10px 4px;text-decoration:none;color:#111;font:500 13px/1.1 var(--texto);text-transform:uppercase;letter-spacing:.02em;border-bottom:3px solid transparent}
nav[aria-label="Categorías"] img{width:auto;height:38px;filter:brightness(0);transition:filter .15s}
nav[aria-label="Categorías"] a:hover img,nav[aria-label="Categorías"] a[aria-current="page"] img{filter:none}
nav[aria-label="Categorías"] a:hover,nav[aria-label="Categorías"] a[aria-current="page"]{color:var(--rojo)}
nav[aria-label="Categorías"] a[aria-current="page"]{border-bottom-color:var(--rojo)}

/* ---------- ruta ---------- */
nav[aria-label="Ruta"]{max-width:var(--ancho);margin:0 auto;padding:16px 20px 0;font-size:13.5px;color:var(--gris)}
nav[aria-label="Ruta"] ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
nav[aria-label="Ruta"] li+li::before{content:"›";margin-right:6px;color:var(--rojo)}
nav[aria-label="Ruta"] a{color:var(--gris)}
nav[aria-label="Ruta"] [aria-current="page"]{color:var(--tinta)}

/* ---------- estructura ---------- */
main{display:block}
.lienzo{max-width:var(--ancho);margin:0 auto;padding:18px 20px 64px;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:44px;align-items:start}
.lienzo--portada{grid-template-columns:minmax(0,1fr);padding-top:0}
article{min-width:0}
article h1,article h2,article h3{font-family:var(--titular);font-weight:400;letter-spacing:.02em;color:var(--negro)}
article h2{font-size:clamp(30px,3.4vw,40px);line-height:1.02;margin:52px 0 14px}
article h3{font-size:25px;line-height:1.1;margin:30px 0 8px}
article p,article li{max-width:72ch}
article ul,article ol{padding-left:22px}
article li{margin:6px 0}
article ol>li::marker{color:var(--rojo);font-weight:700}
article ul>li::marker{color:var(--rojo)}
article strong{color:var(--negro)}

/* cinta-titular de páginas internas */
.cinta{position:relative;background:var(--rojo);color:#fff;margin:10px 0 26px;padding:22px 64px 18px 26px;clip-path:polygon(0 0,100% 0,calc(100% - 34px) 50%,100% 100%,0 100%);box-shadow:inset 0 -6px 0 rgba(0,0,0,.14)}
.cinta h1{color:#fff;margin:0;font-size:clamp(34px,4.4vw,54px);line-height:.98}
.cinta p{margin:8px 0 0;font:700 12px/1.2 var(--texto);text-transform:uppercase;letter-spacing:.14em;color:#ffd9da}
.entrada{font-size:19px;line-height:1.55;color:#2b2622}

/* marcadores numerados en H2 internos */
.numerada{counter-reset:apartado}
.numerada h2{counter-increment:apartado;display:flex;align-items:flex-start;gap:14px}
.numerada h2::before{content:counter(apartado,decimal-leading-zero);flex:0 0 auto;background:var(--rojo);color:#fff;font-size:24px;line-height:1;padding:9px 8px 6px;min-width:44px;text-align:center;border-radius:2px;transform:translateY(-2px)}

/* ---------- portada: cabeza de cartel ---------- */
.cartel-cabeza{position:relative;padding:36px 0 30px;margin-bottom:8px;background:var(--papel);box-shadow:0 0 0 100vmax var(--papel);clip-path:inset(0 -100vmax);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:8px 48px;align-items:end}
.cartel-cabeza .sello-cartelera{grid-column:1/-1;justify-self:start}
.sello-cartelera{display:inline-block;background:var(--negro);color:#fff;font:400 18px/1 var(--titular);letter-spacing:.18em;padding:8px 14px 6px;margin:0 0 14px;transform:rotate(-1.5deg)}
.sello-cartelera b{color:var(--rojo);font-weight:400}
.cartel-cabeza h1{font-size:clamp(42px,5.2vw,74px);line-height:.92;margin:0}
.cartel-cabeza h1 em{font-style:normal;color:var(--rojo)}
.cartel-cabeza .entrada{max-width:68ch;margin:0;font-size:17.5px;border-left:4px solid var(--rojo);padding-left:18px}

/* parrilla de 6 carteles */
.cartelera{list-style:none;margin:30px 0 10px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.cartelera li{margin:0;max-width:none}
.cartelera a{position:relative;display:flex;flex-direction:column;height:100%;background:var(--papel);text-decoration:none;color:var(--tinta);border:1px solid var(--linea);overflow:hidden;transition:transform .15s,box-shadow .15s}
.cartelera a:hover{transform:translateY(-3px);box-shadow:0 14px 26px -18px rgba(0,0,0,.55);color:var(--tinta)}
.cartelera .marco{position:relative;aspect-ratio:367/240;background:var(--negro);overflow:hidden}
.cartelera .marco img{width:100%;height:100%;object-fit:cover}
.cartelera .marco--icono{display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,#3a1416 0,#120708 70%)}
.cartelera .marco--icono img{width:46%;height:auto;object-fit:contain;filter:drop-shadow(0 10px 18px rgba(0,0,0,.6))}
.cartelera .marco .esquina{position:absolute;left:0;top:0;width:74px;height:auto;z-index:2;object-fit:fill}
.cartelera .rotulo{display:block;font:400 30px/1 var(--titular);letter-spacing:.03em;color:var(--negro);padding:16px 18px 4px}
.cartelera .detalle{display:block;padding:0 18px 14px;font-size:15.5px;line-height:1.45;color:#4a433d;flex:1}
.cartelera .ver{display:block;padding:11px 18px;border-top:1px dashed var(--linea);font:700 12px/1 var(--texto);letter-spacing:.12em;text-transform:uppercase;color:var(--rojo)}
.cartelera a:hover .ver{background:var(--rojo);color:#fff}

.llamado{display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px;margin:26px 0 0;padding:18px 22px;background:var(--negro);color:#e9e2d8}
.llamado p{margin:0;flex:1 1 280px;font-size:15.5px}

.portada-cuerpo{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:44px;align-items:start}
.portada-cuerpo>aside{margin-top:52px}

/* tira de juegos */
.tira{margin:24px 0;padding:0}
.tira ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.tira li{margin:0;max-width:none}
.tira img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:3px;background:#222}
.tira--alta img{aspect-ratio:282/357}
.tira--ancha ul{grid-template-columns:repeat(5,minmax(0,1fr))}
.tira--ancha img{aspect-ratio:375/180}
.tira--vivo ul{grid-template-columns:repeat(5,minmax(0,1fr))}
.tira--vivo img{aspect-ratio:184/372}
.tira--iconos ul{grid-template-columns:repeat(5,minmax(0,1fr));max-width:620px}
.tira--iconos img{aspect-ratio:1/1;object-fit:contain;background:none}
.tira span{display:block;font-size:13px;line-height:1.3;margin-top:6px;color:#4a433d}
.tira figcaption{font-size:13.5px;color:var(--gris);margin-top:10px;border-left:3px solid var(--rojo);padding-left:10px}

.lamina{margin:24px 0;max-width:420px}
.lamina img{width:100%;border-radius:3px}
.lamina figcaption{font-size:13.5px;color:var(--gris);margin-top:8px}
.lamina--derecha{float:right;width:min(42%,300px);margin:6px 0 16px 26px}
.lamina--icono{float:right;width:150px;margin:4px 0 14px 24px}
h2{clear:both}

/* tablas */
.tabla{margin:20px 0 22px;overflow-x:auto;border:1px solid var(--linea);background:var(--papel)}
.tabla table{width:100%;border-collapse:collapse;font-size:15.5px;line-height:1.4}
.tabla th{background:var(--negro);color:#fff;text-align:left;font:700 12.5px/1.3 var(--texto);text-transform:uppercase;letter-spacing:.07em;padding:12px 14px}
.tabla td{padding:11px 14px;border-top:1px solid var(--linea);vertical-align:top}
.tabla tbody tr:nth-child(even) td{background:#fdf9f3}
.tabla td:first-child{font-weight:700;color:var(--negro)}

/* preguntas */
.preguntas h3{border-top:2px solid var(--negro);padding-top:14px}
.preguntas h3::before{content:"?";display:inline-block;width:28px;height:28px;margin-right:10px;background:var(--rojo);color:#fff;text-align:center;font-size:22px;line-height:31px;border-radius:50%;vertical-align:3px}

/* índice de guías */
.guia-ficha{display:grid;grid-template-columns:150px minmax(0,1fr);gap:20px;align-items:start;border-top:1px solid var(--linea);padding-top:18px;margin-top:18px}
.guia-ficha img{width:150px;aspect-ratio:1/1;object-fit:cover;border-radius:3px;background:var(--negro)}
.guia-ficha h3{margin-top:0}
.guia-ficha h3 a{color:var(--negro);text-decoration:none}
.guia-ficha h3 a:hover{color:var(--rojo)}

/* ---------- columna lateral ---------- */
aside{position:sticky;top:18px;display:flex;flex-direction:column;gap:18px}
.taquilla{background:var(--negro);color:#e9e2d8;padding:22px 20px 20px;position:relative;overflow:hidden}
.taquilla>img{width:120px;margin-bottom:12px}
.taquilla p{margin:0 0 16px;font-size:15px;line-height:1.5}
.taquilla .esquina{position:absolute;right:0;top:0;width:44px;transform:scaleX(-1)}
.programa{background:var(--papel);border:1px solid var(--linea);padding:16px 18px}
.programa p{margin:0 0 8px;font:400 22px/1 var(--titular);letter-spacing:.06em;color:var(--rojo)}
.programa ul{list-style:none;margin:0;padding:0}
.programa li{border-top:1px dashed var(--linea)}
.programa a{display:block;padding:9px 0;text-decoration:none;color:var(--tinta);font-size:15px}
.programa a:hover{color:var(--rojo)}

/* ---------- pie ---------- */
[role="contentinfo"]{background:var(--negro);color:#bdb4a8;border-top:6px solid var(--rojo);font-size:14.5px}
[role="contentinfo"]>div{max-width:var(--ancho);margin:0 auto;padding:44px 20px 26px;display:grid;grid-template-columns:1.3fr 1fr 1fr 170px;gap:32px}
[role="contentinfo"] img{width:140px;margin-bottom:14px}
[role="contentinfo"] p{margin:0 0 10px;line-height:1.55}
[role="contentinfo"] ul{list-style:none;margin:0;padding:0}
[role="contentinfo"] li{margin:0 0 8px}
[role="contentinfo"] a{color:#efe8de;text-decoration:none}
[role="contentinfo"] a:hover{color:#fff;text-decoration:underline}
.pie-titulo{font:400 20px/1 var(--titular);letter-spacing:.08em;color:#fff;margin:0 0 14px}
.estampa{width:132px;height:132px;border-radius:50%;border:4px double var(--rojo);color:var(--rojo);display:grid;place-items:center;text-align:center;transform:rotate(-12deg);font:400 15px/1 var(--titular);letter-spacing:.12em;padding:10px}
.estampa b{display:block;font-size:46px;font-weight:400;letter-spacing:0;line-height:.9}
.pie-base{max-width:var(--ancho);margin:0 auto;padding:16px 20px 24px;border-top:1px solid #2c2926;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:13px;color:#8d857b}

/* ---------- 404 ---------- */
.perdido{text-align:center;padding:40px 0 10px}
.perdido .numero{font:400 clamp(110px,22vw,220px)/.85 var(--titular);color:var(--rojo);margin:0}
.perdido h1{font-size:clamp(34px,5vw,56px);margin:10px 0}
.perdido p{margin-left:auto;margin-right:auto}
.perdido ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:22px 0}
.perdido ul a{display:block;border:2px solid var(--negro);padding:10px 16px;text-decoration:none;color:var(--negro);font-weight:700}
.perdido ul a:hover{background:var(--negro);color:#fff}

/* ---------- adaptativo ---------- */
@media (max-width:1080px){
  nav[aria-label="Principal"] a{padding:10px 7px;font-size:12px}
  .lienzo{grid-template-columns:minmax(0,1fr) 260px;gap:30px}
}
@media (max-width:920px){
  [role="banner"]>div{gap:12px}
  button[aria-controls="menu-principal"]{display:inline-block;margin-left:auto}
  [role="banner"] .boton{margin-left:0}
  nav[aria-label="Principal"]{position:absolute;left:0;right:0;top:100%;background:var(--negro);border-top:1px solid #2c2926;display:none}
  nav[aria-label="Principal"][data-abierto]{display:block}
  nav[aria-label="Principal"] ul{flex-direction:column;padding:8px 12px 14px}
  nav[aria-label="Principal"] a{padding:14px 10px;font-size:14px;border-bottom:1px solid #22201e}
  .lienzo{grid-template-columns:minmax(0,1fr)}
  .portada-cuerpo{grid-template-columns:minmax(0,1fr)}
  .portada-cuerpo>aside{margin-top:20px}
  .cartel-cabeza{grid-template-columns:minmax(0,1fr);gap:16px}
  aside{position:static}
  .cartelera{grid-template-columns:repeat(2,minmax(0,1fr))}
  [role="contentinfo"]>div{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  body{font-size:16.5px}
  [role="banner"]>div{padding:0 14px;height:62px}
  [role="banner"] a[rel="home"] img{width:118px}
  [role="banner"] .boton{font-size:16px;padding:9px 11px 7px}
  [role="banner"] .boton::after{display:none}
  button[aria-controls="menu-principal"]{padding:9px 9px}
  button[aria-controls="menu-principal"] b{position:absolute;left:-999px}
  button[aria-controls="menu-principal"] span{margin-right:0}
  nav[aria-label="Categorías"] a{min-width:78px;font-size:12px;padding:6px 6px 4px}
  nav[aria-label="Categorías"] img{height:32px}
  .lienzo{padding:14px 16px 48px}
  nav[aria-label="Ruta"]{padding:14px 16px 0}
  .cartel-cabeza{padding:30px 0 18px}
  .cartelera{grid-template-columns:minmax(0,1fr);gap:14px}
  .cartelera a{flex-direction:row}
  .cartelera .marco{flex:0 0 42%;aspect-ratio:auto;min-height:150px}
  .cartelera .rotulo{font-size:25px;padding:12px 12px 2px}
  .cartelera .detalle{padding:0 12px 8px;font-size:14.5px}
  .cartelera .ver{padding:9px 12px;font-size:11px}
  .cartelera .texto{display:flex;flex-direction:column;flex:1;min-width:0}
  .cartelera .marco .esquina{width:52px}
  .cinta{padding:18px 44px 14px 18px;margin-top:4px}
  .tira ul,.tira--ancha ul,.tira--vivo ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tira--iconos ul{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lamina--derecha{float:none;width:auto;margin:20px 0}
  .lamina--icono{width:110px;margin-left:16px}
  .tabla table{font-size:14.5px}
  .tabla th,.tabla td{padding:9px 10px}
  .numerada h2::before{font-size:20px;min-width:38px;padding:8px 6px 5px}
  .guia-ficha{grid-template-columns:96px minmax(0,1fr);gap:14px}
  .guia-ficha img{width:96px}
  [role="contentinfo"]>div{grid-template-columns:1fr;gap:26px}
}
@media (min-width:601px){.cartelera .texto{display:contents}}