/* ===========================================================
   Semanario San Juan - estilos del sitio publico
   =========================================================== */
:root{
  --brand:#0fb8c9;        /* cyan principal */
  --brand-dark:#0a8b98;
  --accent:#e23744;       /* rojo ultimo momento */
  --ink:#11181c;
  --muted:#5b6670;
  --line:#e6e9ec;
  --bg:#f4f6f8;
  --white:#fff;
  --radius:10px;
  --shadow:0 2px 14px rgba(17,24,28,.07);
  --container:1600px;   /* ancho maximo del contenido (estilo portal, ocupa la pantalla) */
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Roboto',system-ui,Arial,sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.5;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 clamp(16px,3vw,44px)}

/* ---------- Header ---------- */
.topbar{background:var(--ink);color:#cfd6db;font-size:.8rem}
.topbar-inner{display:flex;justify-content:space-between;align-items:center;height:34px}
.topbar-date{text-transform:capitalize}
.topbar-actions{display:flex;align-items:center;gap:14px}
.topbar-actions a{color:#fff;font-weight:500}
.topbar-actions a:hover{color:var(--brand)}
.weather{display:inline-flex;align-items:center;gap:6px;line-height:1;white-space:nowrap}
.weather-icon{font-size:1rem}
.weather-temp{font-weight:700;color:#fff}
.weather-city{color:#9aa4ad;font-size:.72rem}
@media(max-width:520px){.weather-city{display:none}}

.masthead{background:var(--white);border-bottom:1px solid var(--line)}
.masthead-inner{display:flex;align-items:center;gap:18px;height:78px}
.nav-toggle{display:none;background:none;border:0;font-size:1.5rem;cursor:pointer;color:var(--ink)}
.logo{display:flex;align-items:center;gap:10px}
.logo-img{height:52px;width:auto;display:block}
.logo-mark{
  width:42px;height:42px;border-radius:10px;background:var(--brand);color:#fff;
  display:grid;place-items:center;font-weight:900;font-size:1.5rem;
}
.logo-text{font-size:1.7rem;font-weight:400;letter-spacing:-.5px}
.logo-text strong{font-weight:900;color:var(--brand)}
.search{margin-left:auto;display:flex;border:1px solid var(--line);border-radius:30px;overflow:hidden;background:var(--bg)}
.search input{border:0;background:transparent;padding:9px 16px;width:230px;font-size:.9rem;outline:none}
.search button{border:0;background:transparent;padding:0 14px;cursor:pointer;font-size:1rem}

.mainnav{background:var(--white);border-bottom:3px solid var(--brand);position:sticky;top:0;z-index:50;box-shadow:var(--shadow)}
.mainnav-inner{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.mainnav-inner::-webkit-scrollbar{display:none}
.mainnav a{
  --cat:var(--brand);
  padding:13px 14px;font-weight:700;font-size:.92rem;white-space:nowrap;
  border-bottom:3px solid transparent;margin-bottom:-3px;color:#2a343c;
}
.mainnav a:hover{color:var(--cat)}
.mainnav a.active{color:var(--cat);border-color:var(--cat)}

/* ---------- Ticker ultimo momento ---------- */
.ticker{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);
  border-left:5px solid var(--accent);border-radius:var(--radius);padding:10px 14px;margin:18px 0;overflow:hidden}
.ticker-label{background:var(--accent);color:#fff;font-weight:900;font-size:.72rem;text-transform:uppercase;
  padding:4px 10px;border-radius:4px;white-space:nowrap;letter-spacing:.5px}
/* Marquesina: el texto se desplaza de derecha a izquierda de forma continua */
.ticker-viewport{flex:1;min-width:0;overflow:hidden}
.ticker-track{display:inline-flex;gap:14px;align-items:center;white-space:nowrap;
  font-weight:500;font-size:.9rem;padding-left:100%;
  animation:tickerScroll 32s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-track a:hover{color:var(--accent)}
.ticker-sep{color:var(--accent);font-weight:900}
@keyframes tickerScroll{from{transform:translateX(0)}to{transform:translateX(-100%)}}

/* ---------- Barra de YouTube ---------- */
.yt-bar{margin:18px 0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
  box-shadow:0 2px 8px rgba(0,0,0,.08);background:#000}
.yt-head{display:flex;align-items:center;gap:10px;background:#ff0000;color:#fff;
  padding:9px 14px;font-weight:700}
.yt-head-link{display:flex;align-items:center;gap:12px;flex:1;min-width:0;
  color:#fff;text-decoration:none}
.yt-play{display:inline-flex;align-items:center;justify-content:center;width:28px;height:20px;
  background:#fff;color:#ff0000;border-radius:5px;font-size:.7rem;flex:none}
.yt-label{font-weight:900;text-transform:uppercase;letter-spacing:.5px;font-size:.8rem;flex:none}
.yt-marquee{flex:1;min-width:0;overflow:hidden;white-space:nowrap}
.yt-marquee-text{display:inline-block;padding-left:100%;font-weight:600;font-size:.85rem;
  animation:ytScroll 20s linear infinite}
.yt-head-link:hover .yt-marquee-text{animation-play-state:paused}
@keyframes ytScroll{from{transform:translateX(0)}to{transform:translateX(-100%)}}
.yt-toggle{flex:none;background:rgba(255,255,255,.18);color:#fff;border:0;cursor:pointer;
  font-weight:700;font-size:.76rem;padding:5px 11px;border-radius:5px;white-space:nowrap}
.yt-toggle:hover{background:rgba(255,255,255,.32)}
.yt-cta{flex:none;font-size:.78rem;font-weight:700;white-space:nowrap;
  color:#fff;text-decoration:none}
.yt-cta:hover{text-decoration:underline}
/* Reproductor: miniatura por defecto, se amplia al tocar "Ampliar" */
.yt-embed{position:relative;width:340px;max-width:100%;aspect-ratio:16/9;margin:12px 14px;
  border-radius:8px;overflow:hidden;background:#000;transition:width .2s ease}
.yt-bar.expanded .yt-embed{width:100%;margin:0;border-radius:0}
.yt-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (max-width:640px){.yt-label{display:none}.yt-cta{display:none}.yt-embed{margin:10px}}
@media (prefers-reduced-motion:reduce){
  .yt-marquee-text{animation:none;padding-left:0}
  .ticker-track{animation:none;padding-left:0}
}

/* ---------- Publicidad (cuadros enmarcados) ---------- */
.ads-section{margin:28px 0;border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;background:var(--white)}
.ads-title{text-align:center;text-transform:uppercase;letter-spacing:1.5px;font-size:.72rem;
  font-weight:800;color:var(--muted);margin:0 0 14px}
.ads-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
/* El cuadro mantiene su tamano fijo; la imagen se acomoda dentro sin recorte.
   Las imagenes se apilan con grid para conservar el fundido al rotar. */
.ad-box{display:grid;aspect-ratio:4/3;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;background:#fff}
.ad-slide{grid-area:1/1;display:block;opacity:0;pointer-events:none;transition:opacity .6s ease}
.ad-slide.is-active{opacity:1;pointer-events:auto}
/* La imagen se ajusta completa al cuadro sin recorte ni desbordar el ancho, centrada */
.ad-slide img{width:100%;height:100%;object-fit:contain;object-position:center;display:block}
/* Aun con "stretch" se respeta la proporcion (se ajusta completa sin deformar) */
.ad-slide img.is-stretch{object-fit:contain}
@media (max-width:900px){.ads-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.ads-grid{grid-template-columns:1fr}}
/* Marquesina larga (banner) arriba de la noticia: muestra la imagen completa */
.ad-banner-section{margin:0 0 22px}
.ad-banner{aspect-ratio:970/120;min-height:80px}
.ad-banner .ad-slide img{object-fit:contain}
.ad-banner .ad-slide img.is-stretch{object-fit:contain}
@media (max-width:640px){.ad-banner{aspect-ratio:5/1;min-height:70px}}

/* ---------- Encuesta de la portada ---------- */
.poll-section{display:grid;grid-template-columns:1fr 320px;gap:24px;margin:28px 0;align-items:start}
.poll-main{border:1px solid var(--line);border-radius:var(--radius);padding:18px;background:var(--white)}
.poll-title{margin:0 0 16px}
.poll-options{display:flex;flex-direction:column;gap:10px}
.poll-option{position:relative;display:flex;align-items:center;gap:10px;width:100%;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--white);
  padding:12px 14px;font:inherit;text-align:left;cursor:pointer;overflow:hidden;
  transition:border-color .15s ease,background .15s ease}
.poll-option:hover:not(:disabled){border-color:var(--brand);background:#f7fbfc}
.poll-option:disabled{cursor:default}
.poll-option-bar{position:absolute;left:0;top:0;bottom:0;width:0;z-index:0;display:none;
  background:#e6f6f8;background:color-mix(in srgb,var(--brand) 16%,transparent);
  transition:width .6s ease}
.poll-section.is-voted .poll-option-bar{display:block}
.poll-option-label{position:relative;z-index:1;flex:1;font-weight:600;font-size:.95rem}
.poll-option-percent{position:relative;z-index:1;display:none;font-weight:800;color:var(--brand);
  font-variant-numeric:tabular-nums}
.poll-section.is-voted .poll-option-percent{display:inline}
.poll-section.is-voted .poll-option{cursor:default}
.poll-section.is-voted .poll-option.is-chosen{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}
.poll-foot{margin:14px 0 0;font-size:.82rem;color:var(--muted)}
.poll-thanks{color:var(--brand);font-weight:700}
.poll-total-num{font-weight:700}
.poll-aside{align-self:start}
@media (max-width:900px){.poll-section{grid-template-columns:1fr}}

/* ---------- Bloques / titulos ---------- */
.block-title{font-family:'Roboto Slab',serif;font-size:1.25rem;margin:26px 0 16px;
  border-bottom:2px solid var(--ink);padding-bottom:6px;display:flex}
.block-title span{border-bottom:3px solid var(--brand);margin-bottom:-8px;padding-bottom:6px}

/* ---------- Portada: hero + relevantes ---------- */
.home-top{display:grid;grid-template-columns:2fr 1fr;gap:24px;margin-top:18px}
.hero{background:var(--white);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.hero-img{position:relative;display:block;overflow:hidden;background:var(--bg)}
/* height:auto es imprescindible: las <img> traen height="450" como atributo y
   eso vale como estilo. Sin anularlo el alto queda fijo en 450px, las dos
   dimensiones quedan definidas y el navegador IGNORA el aspect-ratio, con lo
   que el cuadro sale vertical. */
.hero-img img:not(.img-bg){width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;object-position:center;position:relative;z-index:1}
.hero-body{padding:20px}
.hero-cat,.post-cat{display:inline-block;color:#fff;font-weight:700;font-size:.72rem;text-transform:uppercase;
  padding:4px 10px;border-radius:4px;letter-spacing:.4px;margin-bottom:10px}
.hero-title{font-family:'Roboto Slab',serif;font-size:2rem;line-height:1.15;margin-bottom:10px}
.hero-title a:hover{color:var(--brand-dark)}
.hero-summary{color:var(--muted);font-size:1.02rem;margin-bottom:12px}

.relevant{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);padding:8px 18px 14px}
.relevant .block-title{margin-top:14px}
.relevant-item{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line)}
.relevant-item:last-child{border-bottom:0}
.relevant-num{font-family:'Roboto Slab',serif;font-size:1.5rem;font-weight:900;color:var(--brand);line-height:1;min-width:24px}
.relevant-item em{display:block;font-style:normal;font-weight:700;font-size:.7rem;text-transform:uppercase;margin-bottom:2px}
.relevant-item strong{font-weight:600;font-size:.95rem;line-height:1.25}
.relevant-item:hover strong{color:var(--brand-dark)}

/* Divisor de categoria en la portada: titulo + linea del color de la categoria */
.cat-divider{display:flex;align-items:center;gap:12px;margin:28px 0 14px;
  font-family:'Roboto Slab',serif;font-size:1.2rem;font-weight:700;
  color:var(--cat,var(--brand));border-bottom:3px solid var(--cat,var(--brand));padding-bottom:6px}
.cat-divider a:hover{opacity:.8}

/* ---------- Grillas de cards ---------- */
/* Auto-fill: las tarjetas se acomodan a lo ancho de la pantalla; suman
   columnas en monitores grandes y colapsan solas en pantallas chicas. */
.grid{display:grid;gap:20px}
.grid-3{grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr))}
.grid-4{grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));margin-top:22px}
/* Bloques de categoria en la portada (ancho completo): 3 tarjetas fijas por fila.
   Con 3 columnas cada cuadro queda mas grande y la foto se lee mejor; las
   columnas bajan a 2/1 en tablet y celular. */
.grid-cat{grid-template-columns:repeat(3,1fr)}
@media(max-width:760px){.grid-cat{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.grid-cat{grid-template-columns:1fr}}
.card{background:var(--white);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
  display:flex;flex-direction:column;transition:transform .15s,box-shadow .15s}
.card:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(17,24,28,.12)}
.card-img{position:relative;display:block;overflow:hidden;background:var(--bg)}
.card-img img:not(.img-bg){width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;object-position:center;position:relative;z-index:1}
.badge-breaking{position:absolute;top:8px;left:8px;z-index:2;background:var(--accent);color:#fff;
  font-size:.66rem;font-weight:900;text-transform:uppercase;padding:3px 8px;border-radius:4px;letter-spacing:.4px}

/* Relleno del cuadro 16:9: copia ampliada y desenfocada de la MISMA foto, para
   que no queden franjas grises sin tener que recortar la imagen. Es una <img>
   (no un background de CSS) para que siga valiendo el loading="lazy": asi la
   portada no descarga de golpe las fotos de todas las tarjetas. Al ser el mismo
   archivo que la foto principal, el navegador lo descarga una sola vez.
   El scale evita que el desenfoque deje los bordes claros. */
.img-bg{position:absolute;inset:0;width:100%;height:100%;z-index:0;
  object-fit:cover;object-position:center;filter:blur(18px);transform:scale(1.12);
  pointer-events:none}
.card-body{padding:14px;display:flex;flex-direction:column;gap:7px;flex:1}
.card-cat{font-weight:700;font-size:.7rem;text-transform:uppercase;letter-spacing:.4px}
.card-title{font-size:1.05rem;line-height:1.25;font-weight:700}
.card-title a:hover{color:var(--brand-dark)}
.card-summary{color:var(--muted);font-size:.88rem;flex:1}
.card-meta{display:flex;justify-content:space-between;gap:8px;color:#8a949c;font-size:.74rem;margin-top:auto;padding-top:6px}

/* ---------- Columnas: ultimas + mas leidas ---------- */
.home-columns{display:grid;grid-template-columns:1fr 320px;gap:30px;margin-top:10px}
.sidebar .block-title{margin-top:26px}
.popular{list-style:none;counter-reset:p;background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);padding:6px 16px}
.popular li{counter-increment:p;display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}
.popular li:last-child{border-bottom:0}
.popular li::before{content:counter(p);font-family:'Roboto Slab',serif;font-weight:900;font-size:1.4rem;color:var(--brand);min-width:22px}
.popular strong{display:block;font-weight:600;font-size:.92rem;line-height:1.25}
.popular li:hover strong{color:var(--brand-dark)}
.popular-meta{font-size:.74rem;color:#8a949c}
/* "Mas leidas" a ancho completo: reparte los items en varias columnas */
.popular-wide{columns:2;column-gap:30px}
@media(min-width:1000px){.popular-wide{columns:3}}
.popular-wide li{break-inside:avoid}

/* ---------- Seccion / categoria ---------- */
.section-head{border-bottom:4px solid var(--brand);margin:24px 0 20px;padding-bottom:8px}
.section-head h1{font-family:'Roboto Slab',serif;font-size:2rem}
/* Layout de seccion: 3 columnas de noticias + columna de publicidad a la derecha */
.section-layout{display:grid;grid-template-columns:1fr 300px;gap:28px;align-items:start}
.section-layout.no-ads{grid-template-columns:1fr}
.section-grid{grid-template-columns:repeat(3,1fr)}
/* Columna de publicidad con fondo gris plata; primer cuadro al doble de alto */
.section-ads{background:#c4c9ce;border-radius:var(--radius);padding:14px;position:sticky;top:76px;
  display:flex;flex-direction:column;gap:12px}
.section-ads .ads-title{color:#3a4046}
.section-ad{aspect-ratio:4/3}
.section-ad-tall{aspect-ratio:2/3}
@media(max-width:1150px){.section-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){
  .section-layout{grid-template-columns:1fr}
  .section-ads{position:static;flex-direction:row;flex-wrap:wrap}
  .section-ad,.section-ad-tall{aspect-ratio:4/3;flex:1;min-width:180px}
}
@media(max-width:560px){.section-grid{grid-template-columns:1fr}}
.search-info{color:var(--muted);margin-top:6px}
.empty{background:var(--white);border-radius:var(--radius);padding:40px;text-align:center;color:var(--muted);box-shadow:var(--shadow)}

/* ---------- Nota individual ---------- */
/* Layout de la nota: articulo + columna de publicidad de la categoria a la derecha */
.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start;
  max-width:1180px;margin:22px auto 0}
.article-layout.no-ads{grid-template-columns:1fr;max-width:860px}
.article-layout .post{max-width:none;margin:0}
@media(max-width:900px){.article-layout{grid-template-columns:1fr}}
.post{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);padding:28px;max-width:820px;margin:22px auto 0}
.breadcrumb{font-size:.8rem;color:var(--muted);margin-bottom:14px;display:flex;gap:8px}
.breadcrumb a:hover{color:var(--brand)}
.post-title{font-family:'Roboto Slab',serif;font-size:2.3rem;line-height:1.12;margin:6px 0 12px}
.post-summary{font-size:1.2rem;color:var(--muted);margin-bottom:16px;font-weight:500}
.post-meta{display:flex;flex-wrap:wrap;gap:18px;color:#8a949c;font-size:.82rem;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);padding:12px 0;margin-bottom:20px}
.post-figure{margin-bottom:22px;border-radius:8px;overflow:hidden;position:relative;background:var(--bg)}
/* Mismo encuadre 16:9 horizontal que el hero y las tarjetas, para que la nota
   abierta se vea igual que en la portada aunque la foto sea de otra proporcion. */
.post-figure img:not(.img-bg){width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;object-position:center;display:block;position:relative;z-index:1}
.post-body{font-size:1.1rem;line-height:1.75;color:#23303a}
.post-body p{margin-bottom:18px}
.post-body h2{font-family:'Roboto Slab',serif;font-size:1.5rem;margin:26px 0 12px}
.post-body blockquote{border-left:4px solid var(--brand);padding:8px 18px;margin:18px 0;color:var(--muted);font-style:italic}
.post-body ul,.post-body ol{margin:0 0 18px 22px}
.post-body code{background:var(--bg);padding:2px 6px;border-radius:4px;font-size:.92em}
.post-body img{border-radius:8px;margin:12px 0}
/* Fotos adicionales de la nota, intercaladas a mitad del cuerpo. --n las
   reparte en columnas iguales (1, 2 o 3); en celular siempre apiladas. */
.post-inline-images{display:grid;grid-template-columns:repeat(var(--n,1),1fr);gap:10px;margin:24px 0}
.post-inline-images img{width:100%;height:auto;border-radius:8px;margin:0;display:block}
@media (max-width:640px){.post-inline-images{grid-template-columns:1fr}}
.post-share{display:flex;gap:10px;align-items:center;margin-top:26px;padding-top:18px;border-top:1px solid var(--line);font-size:.85rem}
.post-share a{background:var(--bg);padding:7px 14px;border-radius:20px;font-weight:600}
.post-share a:hover{background:var(--brand);color:#fff}
.related{margin-top:30px}

/* ---------- Error ---------- */
.error-page{text-align:center;padding:80px 20px}
.error-page h1{font-family:'Roboto Slab',serif;font-size:5rem;color:var(--brand)}
.error-page p{color:var(--muted);margin:10px 0 24px}
.btn{display:inline-block;background:var(--brand);color:#fff;padding:11px 22px;border-radius:8px;font-weight:700}
.btn:hover{background:var(--brand-dark)}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:#aeb7be;margin-top:50px}
.footer-inner{display:grid;grid-template-columns:1.4fr 2fr;gap:30px;padding:40px 16px}
.footer-brand .logo-text{color:#fff;font-size:1.5rem}
.footer-logo-img{height:56px;background:transparent;padding:0;border-radius:0}
.footer-brand p{margin-top:10px;font-size:.88rem;max-width:320px}
/* Iconos sociales en blanco y negro (escala de grises sobre el footer oscuro) */
.footer-social{display:flex;gap:12px;margin-top:16px}
.footer-social a{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.10);color:#cfd6db;transition:background .15s,color .15s}
.footer-social a:hover{background:#fff;color:var(--ink)}
.footer-social svg{width:20px;height:20px;fill:currentColor}
.footer-contact a{word-break:break-all}
.footer-contact a:hover{color:var(--brand)}
.footer-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.footer-cols h4{color:#fff;margin-bottom:12px;font-size:.95rem}
.footer-cols ul{list-style:none}
.footer-cols li{margin-bottom:8px;font-size:.88rem}
.footer-cols a:hover{color:var(--brand)}
.footer-bottom{border-top:1px solid #2a343c;padding:16px;text-align:center;font-size:.8rem;color:#7b858d}

/* ---------- Responsive ---------- */
@media(max-width:980px){
  .home-top{grid-template-columns:1fr}
  .home-columns{grid-template-columns:1fr}
}
@media(max-width:680px){
  .nav-toggle{display:block}
  .search{display:none}
  .hero-title{font-size:1.5rem}
  .post-title{font-size:1.7rem}
  .post{padding:18px}
  .footer-inner{grid-template-columns:1fr}
  .mainnav-inner{display:none;flex-direction:column}
  body.nav-open .mainnav-inner{display:flex}
}

/* ---------- Logo NexGlobal en el footer ---------- */
.footer-bottom-inner{display:flex;flex-direction:column-reverse;align-items:center;justify-content:center;gap:10px}
.footer-bottom-inner span{color:#fff;font-size:calc(.8rem + 1pt)}
.nexglobal-link{display:inline-block;line-height:0;transition:opacity .15s}
.nexglobal-link:hover{opacity:.85}
.nexglobal-link img{display:block;height:51px;width:auto;max-width:100%}

/* ---------- Imagen de bienvenida (interstitial) ---------- */
.intro-overlay{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(0,0,0,.72);opacity:0;transition:opacity .25s ease}
.intro-overlay[hidden]{display:none}
.intro-overlay.is-open{opacity:1}
body.intro-open{overflow:hidden}
.intro-box{position:relative;max-width:min(92vw,900px);max-height:88vh;
  transform:scale(.96);transition:transform .25s ease}
.intro-overlay.is-open .intro-box{transform:scale(1)}
.intro-box img{display:block;max-width:100%;max-height:88vh;width:auto;height:auto;
  border-radius:10px;box-shadow:0 18px 60px rgba(0,0,0,.5)}
/* Barra de tiempo (cuenta regresiva del autocierre) */
.intro-bar{position:absolute;left:0;right:0;bottom:0;height:7px;overflow:hidden;
  background:rgba(255,255,255,.28);border-radius:0 0 10px 10px}
.intro-bar[hidden]{display:none}
.intro-bar-fill{display:block;height:100%;width:100%;background:#e02424}
.intro-close{position:absolute;top:-14px;right:-14px;width:48px;height:48px;border-radius:50%;
  border:3px solid #fff;background:#111;color:#fff;font-size:30px;line-height:1;font-weight:700;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.5);transition:transform .15s,background .15s}
.intro-close:hover{background:#e02424;transform:scale(1.08)}
@media(max-width:680px){
  .intro-close{top:-10px;right:-10px;width:42px;height:42px;font-size:26px}
}