/* Páginas de Novedades y Fondos. Depende de assets/mycelio.css. */

body{font-size:16px}
.hoja{max-width:1160px; margin:0 auto; padding:0 28px}
.cab{padding:44px 0 4px}
.cab h1{font-size:clamp(28px,3.6vw,40px); max-width:20ch; text-wrap:balance}
.cab .baja{margin-top:13px; max-width:62ch; color:var(--muted); font-size:16px; line-height:1.55}
.cab .fecha{margin-top:11px; font-size:13px; color:var(--faint)}

/* ---------- portadas de marca ---------- */
.portada{position:relative; border-radius:14px; overflow:hidden;
  background:linear-gradient(135deg,var(--a),var(--b))}
.portada img{width:100%; height:100%; object-fit:cover; display:block}
/* velo del color de marca: unifica fotos de origen distinto y deja legible el sello */
.portada::after{content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(34,47,120,.10) 0%, rgba(34,47,120,.02) 45%,
             rgba(15,20,45,.42) 100%)}
.pt-tag{position:absolute; left:14px; bottom:13px; z-index:2; font-size:11px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:#fff;
  background:rgba(0,0,0,.24); border-radius:99px; padding:5px 12px; backdrop-filter:blur(4px)}

/* ---------- portada editorial ---------- */
.tapa{display:grid; grid-template-columns:1.35fr 1fr; gap:24px; margin-top:28px; align-items:start}
@media(max-width:900px){.tapa{grid-template-columns:1fr}}
.nota-grande .portada{height:252px}
@media(max-width:900px){.nota-grande .portada{height:190px}}
.nota-grande h2{font-size:clamp(20px,2.2vw,25px); margin-top:14px; text-wrap:balance}
.nota-grande .bajada{margin-top:9px; color:var(--muted); font-size:15px; line-height:1.5; max-width:56ch}
.laterales{display:flex; flex-direction:column; gap:16px}
a.nota-lat{display:grid; grid-template-columns:116px 1fr; gap:14px; align-items:start}
.nota-lat .portada{height:84px}
.nota-lat h3{font-size:15px; line-height:1.32; text-wrap:balance}
@media(max-width:520px){a.nota-lat{grid-template-columns:96px 1fr; gap:12px}
  .nota-lat .portada{height:78px}.nota-lat h3{font-size:15px}}

.meta{display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:12px; color:var(--faint); margin-top:8px}
.meta .org{font-weight:600; color:var(--marino)}
.mas{display:inline-flex; align-items:center; gap:6px; margin-top:9px;
  font-size:13px; font-weight:600; color:var(--navy)}
.mas svg{width:13px; height:13px; transition:transform .2s var(--ease)}
a.nota:hover .mas svg{transform:translateX(3px)}
a.nota{display:block; transition:transform .2s var(--ease)}
/* gana a la regla de arriba: si no, la nota lateral pierde su grid */
a.nota.nota-lat{display:grid}
a.nota:hover{transform:translateY(-2px)}
a.nota:hover h2,a.nota:hover h3{color:var(--marino)}

/* ---------- rejilla del resto ---------- */
.rejilla{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:18px}
@media(max-width:900px){.rejilla{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.rejilla{grid-template-columns:1fr}}
.rejilla .portada{height:132px}
.rejilla h3{font-size:15.5px; margin-top:11px; line-height:1.33; text-wrap:balance}

.franja{display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  margin-top:42px; padding-bottom:12px; border-bottom:1px solid var(--line)}
.franja h2{font-size:19px}
.franja .cuenta{font-size:13.5px; color:var(--faint)}

/* ---------- cierre de convocatoria ---------- */
.cierra{display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:12px;
  background:var(--soft); color:var(--marino); border-radius:99px; padding:4px 11px}
.cierra.pronto{background:#fdf1de; color:#8a5b12}
.cierra.hoy{background:#fdecea; color:#9c2c1c}

/* ---------- página de una noticia ---------- */
.nota-cab{padding:32px 0 0; max-width:720px}
.volver{display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:600;
  color:var(--navy); margin-bottom:26px}
.volver svg{width:15px; height:15px; transition:transform .2s var(--ease)}
.volver:hover svg{transform:translateX(-3px)}
.nota-cab h1{font-size:clamp(25px,3.2vw,34px); text-wrap:balance; max-width:22ch}
.nota-cuerpo{max-width:660px; margin-top:24px; font-size:16.5px; line-height:1.65; color:var(--ink)}
.nota-cuerpo p{margin:0 0 18px}
.nota-cuerpo p:last-child{margin-bottom:0}
.datos{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden;
  margin-top:30px; max-width:660px}
.datos div{background:#fff; padding:16px 18px}
.datos dt{font-size:11.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--faint)}
.datos dd{margin:5px 0 0; font-size:16px; font-weight:600; color:var(--ink)}
.fuente{margin-top:30px; max-width:660px; padding:20px 22px; background:#fff;
  border:1px solid var(--line); border-radius:14px}
.fuente .t{font-size:12.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--faint)}
.fuente a{display:inline-flex; align-items:center; gap:8px; margin-top:10px;
  font-size:16px; font-weight:600; color:var(--navy); word-break:break-word}
.fuente a svg{width:15px; height:15px; flex:0 0 15px}
.fuente p{margin:12px 0 0; font-size:13.5px; color:var(--muted); line-height:1.5}
.nota-pie{margin-top:34px; max-width:660px}

/* ---------- página de fondos ---------- */
.fondos-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:30px}
@media(max-width:920px){.fondos-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.fondos-grid{grid-template-columns:1fr}}
.fcard{display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
  border-radius:16px; padding:21px;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s}
.fcard:hover{transform:translateY(-3px); box-shadow:0 18px 34px -22px rgba(34,47,120,.42);
  border-color:var(--soft-line)}
.fcard .org{align-self:flex-start; font-size:11px; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--marino); background:var(--soft); border-radius:99px; padding:5px 11px}
.fcard h3{font-size:16.5px; margin-top:12px}
.fcard .monto{font-size:19px; font-weight:700; letter-spacing:-.02em; color:var(--marino); margin-top:8px}
.fcard p{color:var(--muted); font-size:14px; margin:9px 0 0; line-height:1.5; flex:1}
.fcard .mas{margin-top:18px}

/* En portadas chicas el sello tapa el ícono: se oculta y el ícono baja de tamaño. */
a.nota-lat .pt-tag{font-size:9.5px; padding:3px 8px; left:8px; bottom:8px}

.creditos{margin:16px 0 0; font-size:11.5px; color:var(--faint); line-height:1.6; max-width:820px}
.creditos a{color:var(--faint); text-decoration:underline}
.creditos a:hover{color:var(--muted)}