/* ============================================
   NOTI9.COM.AR - Estilos
   Paleta tomada del logo "Yo ♥ 9 de Julio"

   VERSION: 8 - carrusel de publicidades
   (si abrís este archivo en el navegador y no dice VERSION: 8,
    el servidor todavía tiene la versión vieja)
   ============================================ */

:root{
  --celeste:#75AADB;        /* celeste bandera */
  --celeste-osc:#4A7FB5;
  --celeste-claro:#E8F2FA;
  --turquesa:#3FBFB0;       /* aqua de las letras */
  --turquesa-osc:#2A8F84;
  --rojo:#D32F2F;           /* corazón */
  --texto:#1F2933;
  --texto-suave:#5B6B7B;
  --borde:#DDE5EC;
  --fondo:#F4F7FA;
  --blanco:#fff;
  --radio:8px;
  --sombra:0 1px 3px rgba(31,41,51,.10);
  --sombra-alta:0 4px 14px rgba(31,41,51,.14);
  --ancho:1200px;
  --logo-alto:62px;       /* alto del logo cuando va con el nombre al lado */
  --logo-alto-solo:86px;  /* alto del logo cuando ya trae el nombre adentro */
}

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

body{
  font-family:'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
  background:var(--fondo);
  color:var(--texto);
  line-height:1.6;
  font-size:16px;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.contenedor{max-width:var(--ancho);margin:0 auto;padding:0 16px}

/* ---------- Barra superior ---------- */
.barra-top{
  background:var(--celeste-osc);
  color:#fff;
  font-size:.82rem;
  padding:6px 0;
}
.barra-top .contenedor{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.barra-top .redes a{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;
  background:rgba(255,255,255,.18);margin-left:6px;transition:.2s;
}
.barra-top .redes a:hover{background:var(--turquesa)}
.barra-top .redes svg{width:14px;height:14px;fill:#fff}

/* ---------- Cabecera ---------- */
.cabecera{background:var(--blanco);border-bottom:3px solid var(--celeste);box-shadow:var(--sombra)}
.cabecera .contenedor{display:flex;align-items:center;gap:24px;padding-top:14px;padding-bottom:14px;flex-wrap:wrap}

.logo{display:flex;align-items:center;gap:12px;flex-shrink:0}
.logo img{height:var(--logo-alto);width:auto}
/* Cuando el logo ya trae el nombre escrito, se muestra más grande */
.logo.solo-imagen img{height:var(--logo-alto-solo)}
.logo-texto{display:block}
.logo-texto .nombre{
  display:block;
  font-size:2.1rem;font-weight:800;letter-spacing:-1px;line-height:1.05;
  color:var(--celeste-osc);
}
.logo-texto .nombre span{color:var(--turquesa)}
.logo-texto .lema{display:block;font-size:.78rem;color:var(--texto-suave);letter-spacing:.3px}

.cabecera-banner{flex:1;min-width:0;display:flex;justify-content:flex-end}
.cabecera-banner img{max-height:90px;width:auto;border-radius:var(--radio)}

/* ---------- Menú ---------- */
.menu{background:var(--celeste);position:sticky;top:0;z-index:100;box-shadow:var(--sombra)}
.menu .contenedor{display:flex;align-items:center;gap:2px;flex-wrap:wrap}
.menu .enlaces{display:flex;flex-wrap:wrap;align-items:center}
.menu a{
  color:#fff;font-weight:600;font-size:.88rem;
  padding:12px 13px;transition:.15s;white-space:nowrap;
}
.menu a:hover,.menu a.activo{background:var(--turquesa)}
.menu .buscador{margin-left:auto;display:flex;padding:6px 0}
.menu .buscador input{
  border:0;border-radius:20px 0 0 20px;padding:7px 14px;
  font-size:.85rem;width:170px;outline:none;
}
.menu .buscador button{
  border:0;background:var(--turquesa-osc);color:#fff;
  border-radius:0 20px 20px 0;padding:7px 14px;cursor:pointer;font-size:.85rem;
}
.menu .buscador button:hover{background:var(--rojo)}

.menu-toggle{display:none;background:none;border:0;color:#fff;font-size:1.4rem;padding:10px;cursor:pointer}

/* ---------- Urgente ---------- */
.urgente-barra{
  background:var(--rojo);color:#fff;padding:9px 0;font-size:.9rem;
  display:flex;align-items:center;gap:12px;
}
.urgente-barra .etiqueta{
  background:#fff;color:var(--rojo);font-weight:800;font-size:.72rem;
  padding:3px 9px;border-radius:3px;letter-spacing:1px;flex-shrink:0;
}
.urgente-barra a{font-weight:600}
.urgente-barra a:hover{text-decoration:underline}

/* ---------- Layout ---------- */
.layout{display:grid;grid-template-columns:1fr 320px;gap:28px;padding:26px 0}

/* ---------- Portada ---------- */
.principal{
  position:relative;border-radius:var(--radio);overflow:hidden;
  box-shadow:var(--sombra);background:#000;margin-bottom:22px;
}
.principal img{width:100%;height:430px;object-fit:cover;opacity:.85;transition:.4s}
.principal:hover img{opacity:1;transform:scale(1.02)}
.principal .texto{
  position:absolute;left:0;right:0;bottom:0;padding:28px 24px 22px;
  background:linear-gradient(transparent,rgba(0,0,0,.88));color:#fff;
}
.principal h2{font-size:1.9rem;line-height:1.25;margin:8px 0}
.principal p{font-size:.95rem;opacity:.9}

.etiqueta-cat{
  display:inline-block;background:var(--turquesa);color:#fff;
  font-size:.7rem;font-weight:700;letter-spacing:.8px;text-transform:uppercase;
  padding:3px 9px;border-radius:3px;
}
.etiqueta-cat.rojo{background:var(--rojo)}

.grilla{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.grilla.tres{grid-template-columns:repeat(3,1fr);margin-top:20px}
/* Si hay una o dos destacadas, ocupan bien el ancho en vez de quedar chiquitas */
.grilla.tres.col-1{grid-template-columns:1fr}
.grilla.tres.col-2{grid-template-columns:repeat(2,1fr)}
.grilla.tres.col-1 .tarjeta{flex-direction:row}
.grilla.tres.col-1 .tarjeta .foto{flex:0 0 42%}
.grilla.tres.col-1 .tarjeta .foto img{height:100%;min-height:190px}
.grilla.tres.col-1 .tarjeta .cuerpo{justify-content:center;padding:18px 22px}
.grilla.tres.col-1 .tarjeta h3{font-size:1.3rem}

.tarjeta{
  background:var(--blanco);border-radius:var(--radio);overflow:hidden;
  box-shadow:var(--sombra);transition:.2s;display:flex;flex-direction:column;
}
.tarjeta:hover{box-shadow:var(--sombra-alta);transform:translateY(-2px)}
.tarjeta .foto{position:relative;overflow:hidden}
.tarjeta .foto img{width:100%;height:180px;object-fit:cover}
.tarjeta .foto .etiqueta-cat{position:absolute;left:10px;top:10px}
.tarjeta .cuerpo{padding:14px 16px 16px;flex:1;display:flex;flex-direction:column}
.tarjeta h3{font-size:1.06rem;line-height:1.35;margin-bottom:7px}
.tarjeta:hover h3{color:var(--celeste-osc)}
.tarjeta p{font-size:.87rem;color:var(--texto-suave);flex:1}
.tarjeta .fecha{font-size:.75rem;color:var(--texto-suave);margin-top:10px}

/* lista horizontal */
.item-lista{
  display:flex;gap:14px;background:var(--blanco);border-radius:var(--radio);
  padding:12px;box-shadow:var(--sombra);margin-bottom:14px;transition:.2s;
}
.item-lista:hover{box-shadow:var(--sombra-alta)}
.item-lista img{width:130px;height:88px;object-fit:cover;border-radius:5px;flex-shrink:0}
.item-lista h3{font-size:1rem;line-height:1.35;margin:4px 0}
.item-lista .fecha{font-size:.74rem;color:var(--texto-suave)}

/* ---------- Títulos de bloque ---------- */
.titulo-bloque{
  display:flex;align-items:center;gap:10px;
  margin:30px 0 16px;padding-bottom:8px;border-bottom:2px solid var(--borde);
}
.titulo-bloque h2{font-size:1.3rem;color:var(--celeste-osc)}
.titulo-bloque::before{content:'';width:5px;height:22px;background:var(--turquesa);border-radius:3px}
.titulo-bloque .ver-mas{margin-left:auto;font-size:.82rem;color:var(--turquesa-osc);font-weight:600}
.titulo-bloque .ver-mas:hover{color:var(--rojo)}

/* ---------- Columna lateral ---------- */
.lateral .widget{
  background:var(--blanco);border-radius:var(--radio);
  box-shadow:var(--sombra);margin-bottom:22px;overflow:hidden;
}
.lateral .widget h3{
  background:var(--celeste-osc);color:#fff;font-size:.95rem;
  padding:11px 16px;letter-spacing:.3px;
}
.lateral .widget .contenido{padding:14px 16px}
.lateral .lista-numerada{list-style:none}
.lateral .lista-numerada li{display:flex;gap:11px;padding:10px 0;border-bottom:1px solid var(--borde)}
.lateral .lista-numerada li:last-child{border-bottom:0}
.lateral .lista-numerada .num{
  font-size:1.4rem;font-weight:800;color:var(--celeste);line-height:1;flex-shrink:0;width:26px;
}
.lateral .lista-numerada a{font-size:.9rem;line-height:1.35;font-weight:500}
.lateral .lista-numerada a:hover{color:var(--turquesa-osc)}
.lateral .cats{list-style:none}
.lateral .cats li{border-bottom:1px solid var(--borde)}
.lateral .cats li:last-child{border-bottom:0}
.lateral .cats a{display:block;padding:9px 0;font-size:.9rem;font-weight:500}
.lateral .cats a:hover{color:var(--turquesa-osc);padding-left:5px;transition:.15s}

/* ---------- Banners ----------
   Los avisos ocupan todo el ancho de su espacio.
   Para hacerlos más altos o más bajos, cambiá estos valores */
:root{
  /* Proporciones de los espacios publicitarios.
     Si hacés las imágenes con estas proporciones, llenan el espacio exacto:
       Entre noticias  ->  2 de ancho por 1 de alto   (ej: 800 x 400 px)
       Columna derecha ->  6 de ancho por 5 de alto   (ej: 600 x 500 px)
       Cabecera        ->  728 x 90 px                                    */
  --pub-medio-ratio:2/1;
  --pub-lateral-ratio:6/5;
  --pub-medio-separacion:20px;    /* separación entre los dos avisos del medio */
  --pub-cabecera-alto:90px;       /* alto del aviso de la cabecera */
}

.banners{display:flex;flex-direction:column;gap:14px;width:100%}
.banners .banner{
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--radio);overflow:hidden;
  box-shadow:var(--sombra);background:var(--blanco);
}
.banners .banner img{max-width:100%;max-height:100%;width:auto;height:auto;margin:0 auto}

/* Columna derecha */
.lateral .banners{margin-bottom:22px}
.banners-lateral .banner{width:100%;aspect-ratio:var(--pub-lateral-ratio)}

/* Entre noticias: dos espacios uno al lado del otro, separados y centrados */
.banners-entre_notas{
  flex-direction:row;flex-wrap:wrap;justify-content:center;
  gap:var(--pub-medio-separacion);margin:22px 0;
}
.banners-entre_notas .banner{
  flex:1 1 260px;
  max-width:calc(50% - (var(--pub-medio-separacion) / 2));
  aspect-ratio:var(--pub-medio-ratio);
}

/* Carrusel: cada espacio va mostrando un aviso distinto */
.banner-slot{
  flex:1 1 260px;
  max-width:calc(50% - (var(--pub-medio-separacion) / 2));
  aspect-ratio:var(--pub-medio-ratio);
  position:relative;border-radius:var(--radio);overflow:hidden;
  box-shadow:var(--sombra);background:var(--blanco);
}
.banner-slot .banner{
  position:absolute;top:0;left:0;right:0;bottom:0;
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .6s ease;
  box-shadow:none;border-radius:0;max-width:none;aspect-ratio:auto;
}
.banner-slot .banner.visible{opacity:1;visibility:visible}
.banner-slot .banner img{max-width:100%;max-height:100%;width:auto;height:auto}

/* Cabecera */
.banners-cabecera .banner{box-shadow:none;background:transparent}
.banners-cabecera .banner img{max-height:var(--pub-cabecera-alto);width:auto}

.aviso-publicidad{
  font-size:.66rem;color:var(--texto-suave);text-transform:uppercase;
  letter-spacing:1px;text-align:center;margin-bottom:5px;
}

/* ---------- Nota interna ---------- */
.nota{background:var(--blanco);border-radius:var(--radio);box-shadow:var(--sombra);padding:28px 32px}
.nota .encabezado{border-bottom:1px solid var(--borde);padding-bottom:16px;margin-bottom:20px}
.nota h1{font-size:2rem;line-height:1.25;margin:10px 0}
.nota .copete{font-size:1.08rem;color:var(--texto-suave);font-weight:500;margin-bottom:12px}
.nota .meta{font-size:.82rem;color:var(--texto-suave);display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.nota .foto-principal{margin:0 0 8px;border-radius:var(--radio);overflow:hidden}
.nota .epigrafe{font-size:.8rem;color:var(--texto-suave);font-style:italic;margin-bottom:20px}
.nota .texto p{margin-bottom:16px;font-size:1.04rem;line-height:1.8}
.nota .texto strong,.nota .texto b{font-weight:700;color:var(--texto)}
.nota .texto em,.nota .texto i{font-style:italic}
.nota .texto h3,.nota .texto h4{font-size:1.25rem;color:var(--celeste-osc);margin:26px 0 12px}
.nota .texto ul,.nota .texto ol{margin:0 0 16px 24px;font-size:1.04rem;line-height:1.8}
.nota .texto li{margin-bottom:6px}
.nota .texto a{color:var(--turquesa-osc);text-decoration:underline;font-weight:500}
.nota .texto a:hover{color:var(--rojo)}
.nota .texto blockquote{
  margin:0 0 18px;padding:12px 20px;border-left:4px solid var(--turquesa);
  background:var(--celeste-claro);color:var(--texto-suave);font-style:italic;border-radius:0 6px 6px 0;
}
.nota .compartir{display:flex;gap:8px;align-items:center;margin-top:26px;padding-top:18px;border-top:1px solid var(--borde);flex-wrap:wrap}
.nota .compartir span{font-size:.85rem;font-weight:600;color:var(--texto-suave)}
.nota .compartir a{
  display:inline-flex;align-items:center;gap:6px;color:#fff;
  font-size:.82rem;font-weight:600;padding:7px 14px;border-radius:20px;transition:.2s;
}
.nota .compartir .wa{background:#25D366}
.nota .compartir .fb{background:#1877F2}
.nota .compartir .tw{background:#111}
.nota .compartir a:hover{opacity:.85}

/* ---------- Paginación ---------- */
.paginacion{display:flex;gap:6px;justify-content:center;margin:30px 0;flex-wrap:wrap}
.paginacion a,.paginacion span{
  padding:8px 14px;border-radius:5px;background:var(--blanco);
  box-shadow:var(--sombra);font-size:.88rem;font-weight:600;
}
.paginacion .actual{background:var(--celeste);color:#fff}
.paginacion a:hover{background:var(--turquesa);color:#fff}

/* ---------- Pie ---------- */
.pie{background:var(--celeste-osc);color:#fff;margin-top:40px;padding:34px 0 0}
.pie .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px;padding-bottom:26px}
.pie h4{font-size:1rem;margin-bottom:12px;color:var(--turquesa)}
.pie p,.pie a{font-size:.87rem;opacity:.92}
.pie a:hover{color:var(--turquesa);opacity:1}
.pie ul{list-style:none}
.pie ul li{margin-bottom:7px}
.pie .abajo{border-top:1px solid rgba(255,255,255,.18);padding:14px 0;text-align:center;font-size:.8rem;opacity:.8}

/* ---------- Mensajes ---------- */
.vacio{background:var(--blanco);border-radius:var(--radio);padding:40px;text-align:center;color:var(--texto-suave);box-shadow:var(--sombra)}

/* ---------- Responsive ---------- */
@media(max-width:980px){
  .layout{grid-template-columns:1fr}
  .grilla.tres{grid-template-columns:repeat(2,1fr)}
  .pie .cols{grid-template-columns:1fr 1fr}
  .cabecera-banner{display:none}
  /* Sin columna lateral, el aviso no se estira a toda la pantalla */
  .lateral .banners{max-width:420px;margin:0 auto 22px}
}
@media(max-width:640px){
  .grilla,.grilla.tres,.grilla.tres.col-2{grid-template-columns:1fr}
  .grilla.tres.col-1 .tarjeta{flex-direction:column}
  .grilla.tres.col-1 .tarjeta .foto img{min-height:0;height:180px}
  .grilla.tres.col-1 .tarjeta h3{font-size:1.06rem}
  .principal img{height:230px}
  .principal h2{font-size:1.3rem}
  .principal .texto{padding:20px 16px 14px}
  .nota{padding:20px 18px}
  .nota h1{font-size:1.5rem}
  .pie .cols{grid-template-columns:1fr}
  .logo img{height:46px}
  .logo.solo-imagen img{height:58px}
  .logo-texto .nombre{font-size:1.7rem}

  /* Menú desplegable */
  .menu-toggle{display:block;order:-1}
  .menu .contenedor{position:relative}
  .menu .enlaces{
    display:none;width:100%;flex-direction:column;align-items:stretch;
    max-height:70vh;overflow-y:auto;
  }
  .menu .enlaces.abierto{display:flex}
  .menu .enlaces a{display:block;border-top:1px solid rgba(255,255,255,.2);padding:11px 14px}
  .menu .buscador{margin:0 0 0 auto}
  .menu .buscador input{width:120px}

  .item-lista img{width:96px;height:70px}

  /* Publicidades más bajas en el celular, una debajo de la otra */
  /* En el celular los dos avisos van uno debajo del otro */
  .banners-entre_notas .banner{max-width:100%}
  .banner-slot{max-width:100%}
  .layout{padding:16px 0}
}