/* Versión «amable» de la portada, para comparar con la dura.
   Inspirada en uepc.org.ar: fotos de docentes con velo de color, letra común en los títulos
   de sección, sin bloques negros, bordes más redondeados y más aire. Se mantienen los colores
   y el lema de UEPC Capital. */
:root{--crema:#faf5ef;--redondo:20px}
main > section{margin-top:80px}
@media (max-width:700px){main > section{margin-top:56px}}

/* Títulos de sección: letra común, gruesa, en minúscula (la de afiche queda para lo grande) */
.titulo-sec h2{font-family:Archivo,sans-serif;font-weight:800;text-transform:none;letter-spacing:-.01em;font-size:clamp(28px,3vw,36px)}
.antetitulo{letter-spacing:.1em;font-size:12px}

/* Botones redondeados */
.btn{border-radius:999px;text-transform:none;letter-spacing:0;font-size:16px}
.buscar input{border-radius:999px;padding-left:22px}

/* Carrusel */
.diapo{border-radius:var(--redondo)}
.diapo .panel h2{font-size:clamp(28px,3vw,40px)}

/* Mosaicos con foto y velo del color */
.mosaico{border-radius:var(--redondo);background-size:cover;background-position:center;isolation:isolate;min-height:170px}
.mosaico::before{content:"";position:absolute;inset:0;z-index:-1;transition:opacity .2s;
  background:linear-gradient(to bottom,color-mix(in srgb,var(--velo) 45%,transparent) 0%,color-mix(in srgb,var(--velo) 92%,transparent) 62%)}
.mosaico:hover::before{opacity:.85}
.mosaico::after{display:none}
.mosaico b{font-family:Archivo,sans-serif;font-weight:800;text-transform:none;font-size:20px;line-height:1.2}
.mosaico svg{width:30px;height:30px}
.m-rojo{--velo:var(--rojo)} .m-verde{--velo:var(--verde)} .m-magenta{--velo:var(--magenta)}
.m-negro{--velo:#5b3f6b} .m-mostaza{--velo:#8f8a1f;color:#fff}
.m-violeta{--velo:var(--violeta)}

/* Dato del mes: crema en lugar de negro */
.dato{background:var(--crema);color:var(--texto);border-radius:var(--redondo);border:1px solid #efe4d6}
.dato .cifra small{color:var(--gris)}
.dato .btn{background:var(--magenta);color:#fff}

/* Resto de los bloques */
.actividad,.afiliate,.destacada{border-radius:var(--redondo)}
.actividad .fecha{border-radius:14px}
.nota .foto{border-radius:14px}
.nota h3{font-weight:700}
.secretarias a{border-radius:14px;font-weight:700}
.redes a{border-radius:999px;border-width:1.5px}
.lema{background:var(--crema)}
.lema .afiche{font-size:clamp(36px,6vw,76px)}

/* ---------- Páginas internas ---------- */
body .cabeza{background:var(--crema);border-bottom:0}
body .cabeza h1{font-family:Archivo,sans-serif;font-weight:800;text-transform:none;letter-spacing:-.02em;font-size:clamp(34px,4.5vw,52px)}
body .texto h2,body .nota-cab h1{font-family:Archivo,sans-serif;font-weight:800;text-transform:none;letter-spacing:-.01em}
body .texto h2{font-size:clamp(26px,3vw,32px)}
body .nota-cab h1{font-size:clamp(30px,4.5vw,46px)}
body .indice{border-radius:var(--redondo);border:1px solid var(--linea);background:#fff}
body .indice a{border-radius:12px}
body .pasos li,body .persona,body .aviso,body .pendiente{border-radius:14px}
body .descarga{border-radius:14px;border-width:1.5px}
body .ir-a{border-radius:var(--redondo)}
body .ir-a b,body .contacto-grande a{font-family:Archivo,sans-serif;font-weight:800;text-transform:none}
body .contacto-grande{border-radius:var(--redondo)}
body .texto table{border-radius:14px;overflow:hidden}
body .al-indice{font-weight:700}
body .muro-foto,body .nota-foto img,body .video-tapa,body .video iframe{border-radius:14px}
body .nota-cab .tema{border-radius:999px;padding:5px 12px}
body .pie h4{font-family:Archivo,sans-serif;font-weight:800;font-size:15px;letter-spacing:.08em}

/* Carrusel: todas las noticias ocupan el mismo lugar (el de la más alta), como en uepc.org.ar.
   Están apiladas en la misma celda y solo se ve la activa, así la página no salta al cambiar. */
.carrusel{display:grid}
.carrusel > .diapo{grid-area:1/1;display:grid!important;visibility:hidden;opacity:0;transition:opacity .45s ease,visibility .45s}
.carrusel > .diapo.activa{visibility:visible;opacity:1}
.carrusel > .flechas{z-index:2}
.diapo .panel h2{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.diapo .panel p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media (prefers-reduced-motion:reduce){.carrusel > .diapo{transition:none}}
/* Tarjetas de noticias: el título ocupa siempre el mismo lugar (hasta 3 líneas) */
.noticias .nota h3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media (min-width:701px){.noticias .nota h3{min-height:calc(1.3em * 3)}}
@media (max-width:700px){.diapo .panel p{display:none}.diapo .panel h2{-webkit-line-clamp:4}}
@media (max-width:700px){.carrusel > .diapo{grid-template-rows:auto 1fr}.diapo .panel{justify-content:flex-start}}

/* Lema: un solo color y siempre en una línea (el tamaño acompaña el ancho de la pantalla) */
.lema .afiche{white-space:nowrap;font-size:clamp(22px,8.6vw,76px);color:var(--negro)}
.lema{padding-left:12px;padding-right:12px}
.lema .afiche span{color:inherit}

/* Canal de WhatsApp: botón verde al lado de «Afiliate»; en el celular, solo el ícono al lado del menú */
.btn-canal{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 14px;border-radius:999px;background:#25d366;color:#fff;text-decoration:none;font-weight:800;font-size:15px;flex:none}
.btn-canal svg{width:22px;height:22px}
.btn-canal:hover{background:#1ebe5a}
@media (min-width:1101px){.barra .btn-afiliate + .btn-canal{margin-left:-14px}}
@media (max-width:1100px){.btn-canal{margin-left:auto;width:44px;padding:0;justify-content:center}.btn-canal span{display:none}.btn-canal + .hamb{margin-left:4px}}
.redes svg[fill="currentColor"]{color:#25d366}