/* Artículos (docs/INTERNO-articulos-plan.md). Va encima de estilos.css, en dos lugares:
   - /novedades: la sección de tarjetas que arma articulos.js (la hoja la agrega ese script).
   - /articulos/<nombre>: la página del artículo (articulo.html y las páginas fijas), que además
     carga servicio.css para el cierre navy y las listas con chulo. */

/* ===== /novedades: la sección ===== */
.articulos{background:var(--gris);padding:84px var(--gutter) 92px}
.art-sec-in{max-width:1500px;margin:0 auto}
.art-sec-cab{margin-bottom:32px}
.art-sec-cab .h2{max-width:20ch;margin-top:12px}
.art-sec-cab .lead{margin-top:12px;max-width:52ch}

.art-tarjetas{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:20px}
/* tarjeta entera clicable: foto 16:9 arriba; debajo fecha, título, resumen, autora y "Leer" al fondo */
.art-tarjeta{height:100%;display:flex;flex-direction:column;padding:10px;background:#fff;
  border:1px solid var(--linea);border-radius:var(--radio);text-decoration:none;color:inherit;
  transition:transform .15s,box-shadow .15s}
.art-tarjeta:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(9,38,96,.1)}
.art-tarjeta:hover h3{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
@media (prefers-reduced-motion:reduce){.art-tarjeta,.art-tarjeta:hover{transition:none;transform:none}}
.art-tarjeta-foto{position:relative;display:block;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:var(--magenta-claro)}
.art-tarjeta-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.art-tarjeta-foto img:not([src]){visibility:hidden}
/* sin foto: el patrón de ojos abiertos de la marca, magenta sobre rosado */
.art-tarjeta-foto.sin-foto::before{content:"";position:absolute;inset:0;background:var(--magenta);opacity:.22;
  -webkit-mask:var(--abiertos) 0 0/var(--abiertos-t) repeat;mask:var(--abiertos) 0 0/var(--abiertos-t) repeat}
.art-tarjeta-txt{flex:1 1 auto;display:flex;flex-direction:column;gap:6px;padding:14px 8px 8px;overflow-wrap:anywhere}
.art-tarjeta-fecha{font:700 12.5px/1.35 var(--titulo);letter-spacing:.06em;text-transform:uppercase;color:var(--magenta)}
.art-tarjeta h3{font-size:19px;line-height:1.25;color:var(--navy)}
.art-tarjeta-resumen{font-size:15px;line-height:1.5;color:var(--tinta2)}
.art-tarjeta-autora{font-size:14px;color:var(--tinta2)}
.art-tarjeta-leer{margin-top:auto;padding-top:10px;font:700 14.5px/1.2 var(--titulo);color:var(--magenta)}
.art-tarjeta-leer::after{content:" →"}
.art-mas{margin-top:28px}

/* ===== /articulos/<nombre>: la página ===== */
/* cabecera gris con el círculo cielo, como las páginas de servicio */
.art-cab{position:relative;overflow:hidden;background:var(--gris);padding:56px var(--gutter) 60px}
.art-cab-deco{position:absolute;right:-120px;top:-80px;width:520px;height:520px;border-radius:50%;background:var(--cielo);opacity:.16}
.art-cab-in{position:relative;max-width:760px;margin:0 auto;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.art-cab h1{font-size:clamp(32px,4.2vw,50px);font-weight:800;line-height:1.08;letter-spacing:-.025em;color:var(--navy)}
.art-meta{font-size:16px;color:var(--tinta2)}
.art-meta strong,.art-meta a{font-weight:700;color:var(--navy)}

.art-cuerpo{max-width:760px;margin:0 auto;padding:48px var(--gutter) 64px;box-sizing:content-box}
.art-foto{margin:0 0 36px}
.art-foto img{width:100%;height:auto;max-height:520px;object-fit:cover;border-radius:var(--radio);background:var(--gris)}
.art-texto{font-size:18px;line-height:1.7}
.art-texto h2{font-size:clamp(23px,2.5vw,29px);font-weight:800;line-height:1.2;color:var(--navy);margin:40px 0 12px}
.art-texto h2:first-child{margin-top:0}
.art-texto p+p,.art-texto p+ul,.art-texto ul+p{margin-top:16px}
.art-texto .srv-lista{margin-top:12px}

/* la fuente se ve: es la diferencia entre citar y copiar */
.art-fuentes{margin-top:44px;padding:20px 24px;background:var(--gris);border-left:4px solid var(--magenta);border-radius:0 14px 14px 0}
.art-fuentes h2{font:700 13px/1 var(--titulo);letter-spacing:.12em;text-transform:uppercase;color:var(--magenta);margin-bottom:10px}
.art-fuentes h3{font:700 13px/1 var(--titulo);letter-spacing:.12em;text-transform:uppercase;color:var(--tinta2);margin:18px 0 8px}
.art-fuentes ul{margin:0;padding-left:20px;display:grid;gap:6px}
.art-fuentes a{color:var(--navy);font-weight:600;overflow-wrap:anywhere}
.art-nota{margin-top:8px;font-size:15px;color:var(--tinta2)}
.art-aviso{margin-top:28px;font-size:14px;color:var(--tinta2)}
.art-volver{margin-top:32px}

/* cargando / no encontrado / sin conexión */
.art-vacio{max-width:760px;margin:0 auto;padding:72px var(--gutter) 88px;box-sizing:content-box;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.art-vacio h1{font-size:clamp(28px,3.6vw,40px);font-weight:800;line-height:1.1;color:var(--navy)}
.art-vacio p{color:var(--tinta2)}
.art-cargando{min-height:40vh}

@media (max-width:760px){
  .articulos{padding:56px var(--gutter) 64px}
  .art-cab{padding:36px var(--gutter) 40px}
  .art-cuerpo{padding:32px var(--gutter) 48px}
  .art-texto{font-size:17px}
  .art-fuentes{padding:16px 18px}
}