/* ==========================================================================
   Fuera de Acta — hoja de estilo del boceto
   SebasCodes, del equipo de Juan Devis · septiembre 2026

   Paleta y tipografía tomadas del sitio actual de la clienta (kit de Elementor):
   negros #161618 / #2D2D31, texto #171717, gris #777777,
   fondos #F3F5F6 / #E6E9EA, tipografía Instrument Sans.
   Estructura inspirada en la referencia que ella indicó: rollonfriday.com
   ========================================================================== */

:root{
  --tinta:#161618;
  --tinta-2:#2D2D31;
  --texto:#171717;
  --gris:#777777;
  --gris-claro:#AAAAAA;
  --fondo:#F3F5F6;
  --linea:#E6E9EA;
  --blanco:#FFFFFF;
  --acento:#C8322B;          /* único color de la paleta: rojo editorial, uso contenido */
  --ancho:1400px;
  --radio:2px;
  --sombra:0 1px 2px rgba(22,22,24,.06), 0 8px 24px rgba(22,22,24,.05);
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

/* Los hijos de grid y flex traen min-width:auto, así que se niegan a encoger por
   debajo de su contenido y desbordan la pantalla en móvil. Se corrige en origen. */
.rejilla-portada > *,
.rejilla-notas > *,
.lateral > *,
.pie-rejilla > *,
.franja-voto .contenedor > *,
.titulo-seccion > *,
.cabecera .contenedor > *{min-width:0}

/* Ningún titular largo debe forzar el ancho de su columna */
h1,h2,h3,h4,p,a{overflow-wrap:break-word}

body{
  margin:0;
  font-family:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--texto);
  background:var(--blanco);
  font-size:18px;
  line-height:1.58;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;line-height:1.18;letter-spacing:normal;font-weight:700}

.contenedor{width:100%;max-width:var(--ancho);margin:0 auto;padding:0 28px}

.salta-al-contenido{
  position:absolute;left:-9999px;top:0;background:var(--tinta);color:#fff;
  padding:12px 18px;z-index:200;
}
.salta-al-contenido:focus{left:8px;top:8px}

/* ---------- Asterisco de marca ---------- */
.ast{color:var(--acento);font-weight:700}

/* ==========================================================================
   CABECERA
   ========================================================================== */

.barra-superior{
  background:var(--tinta);
  color:rgba(255,255,255,.82);
  font-size:13px;
}
.barra-superior .contenedor{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;min-height:38px;
}
.barra-superior a{color:rgba(255,255,255,.82)}
.barra-superior a:hover{color:#fff}
.barra-superior .lema{
  letter-spacing:.02em;color:rgba(255,255,255,.58);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.acceso{display:flex;align-items:center;gap:14px;flex:none}
.acceso .sep{color:rgba(255,255,255,.28)}
.acceso .registro{font-weight:600;color:#fff}

.cabecera{
  background:var(--blanco);
  border-bottom:1px solid var(--linea);
  position:sticky;top:0;z-index:100;
}
.cabecera .contenedor{
  display:flex;align-items:center;gap:28px;
  min-height:96px;
}
.marca{display:flex;align-items:center;flex:none}
.marca img{width:auto;height:52px}
.marca .nombre{
  font-size:30px;font-weight:700;color:var(--tinta);
  line-height:1;
}
.marca .nombre small{display:block;font-size:11px;font-weight:500;color:var(--gris);margin-top:3px}

.buscador{margin-left:auto;position:relative;flex:none}
.buscador input{
  font-family:inherit;font-size:14px;color:var(--texto);
  border:1px solid var(--linea);background:var(--fondo);
  border-radius:var(--radio);padding:9px 38px 9px 13px;width:210px;
  transition:border-color .15s, background .15s, width .2s;
}
.buscador input:focus{outline:none;border-color:var(--tinta);background:#fff;width:250px}
.buscador button{
  position:absolute;right:3px;top:3px;bottom:3px;width:32px;
  border:0;background:transparent;cursor:pointer;color:var(--gris);
  display:grid;place-items:center;padding:0;
}
.buscador button:hover{color:var(--tinta)}

/* Botón hamburguesa (solo móvil) */
.abrir-menu{
  display:none;margin-left:auto;
  border:1px solid var(--linea);background:var(--blanco);
  border-radius:var(--radio);width:44px;height:44px;cursor:pointer;
  color:var(--tinta);
}
.abrir-menu:hover{background:var(--fondo)}

/* ---------- Navegación ---------- */
.nav{background:var(--tinta-2)}
.nav .contenedor{padding:0 20px}
.nav ul{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;
}
.nav a{
  display:block;padding:16px 19px;
  color:rgba(255,255,255,.86);
  font-size:15.5px;font-weight:600;letter-spacing:.01em;
  border-bottom:3px solid transparent;
  transition:background .15s,color .15s,border-color .15s;
}
.nav a:hover{background:rgba(255,255,255,.07);color:#fff}
.nav a[aria-current="page"]{
  background:var(--acento);color:#fff;border-bottom-color:rgba(0,0,0,.25);
}
.nav .destacado a{color:#fff}

/* ==========================================================================
   ESTRUCTURA DE PORTADA
   ========================================================================== */

.principal{padding:34px 0 10px}

.rejilla-portada{
  display:grid;
  grid-template-columns:minmax(0,1fr) 360px;
  gap:56px;
  align-items:start;
}

.titulo-seccion{
  display:flex;align-items:baseline;gap:12px;
  border-bottom:3px solid var(--tinta);
  padding-bottom:9px;margin-bottom:24px;
}
.titulo-seccion h2{font-size:28px;color:var(--tinta)}
.titulo-seccion .mas{
  margin-left:auto;font-size:13.5px;font-weight:600;color:var(--gris);
  border-bottom:1px solid transparent;
}
.titulo-seccion .mas:hover{color:var(--acento);border-bottom-color:var(--acento)}

/* ---------- Etiquetas y metadatos ---------- */
.etiqueta{
  display:inline-block;
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  color:var(--acento);
  margin-bottom:7px;
}
.meta{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:13px;color:var(--gris);margin-top:9px;
}
.meta .punto{width:3px;height:3px;border-radius:50%;background:var(--gris-claro);flex:none}
.comentarios{
  display:inline-flex;align-items:center;gap:5px;
  font-weight:600;color:var(--tinta);
}
.comentarios svg{width:13px;height:13px;color:var(--acento)}

/* ---------- Artículo destacado ---------- */
.destacada{margin-bottom:34px}
.destacada .imagen{
  position:relative;overflow:hidden;background:var(--linea);
  border-radius:var(--radio);aspect-ratio:16/8;
}
.destacada .imagen img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.destacada:hover .imagen img{transform:scale(1.02)}
.destacada h3{
  font-size:40px;margin-top:18px;color:var(--tinta);
  letter-spacing:-.015em;
}
.destacada:hover h3{color:var(--acento)}
.destacada .entradilla{
  margin-top:12px;color:var(--gris);font-size:18px;max-width:64ch;
}

/* ---------- Rejilla de noticias ---------- */
.rejilla-notas{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:38px 32px;
}
.nota .imagen{
  overflow:hidden;background:var(--linea);border-radius:var(--radio);
  aspect-ratio:4/3;
}
.nota .imagen img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.nota:hover .imagen img{transform:scale(1.03)}
.nota h3{font-size:21px;margin-top:13px;color:var(--tinta)}
.nota:hover h3{color:var(--acento)}
.nota .entradilla{margin-top:8px;font-size:15.5px;color:var(--gris)}

.boton-mas{
  display:block;text-align:center;
  margin-top:32px;padding:14px;
  background:var(--fondo);border:1px solid var(--linea);border-radius:var(--radio);
  font-weight:700;font-size:14.5px;color:var(--tinta);
  transition:background .15s,color .15s;
}
.boton-mas:hover{background:var(--tinta);color:#fff;border-color:var(--tinta)}

/* ==========================================================================
   COLUMNA LATERAL
   ========================================================================== */

.lateral{display:grid;gap:30px;position:sticky;top:116px}

.caja{
  background:var(--fondo);
  border:1px solid var(--linea);
  border-radius:var(--radio);
  overflow:hidden;
}
.caja > h2{
  font-size:19px;color:var(--tinta);
  padding:14px 18px 11px;
  border-bottom:3px solid var(--acento);
  background:var(--blanco);
}
.caja .cuerpo{padding:16px 18px}

/* Boletín */
.boletin p{margin:0 0 13px;font-size:14.5px;color:var(--gris)}
.boletin input{
  width:100%;font-family:inherit;font-size:14.5px;
  padding:11px 12px;border:1px solid var(--linea);background:#fff;
  border-radius:var(--radio);color:var(--texto);
}
.boletin input:focus{outline:none;border-color:var(--tinta)}
.boletin button{
  margin-top:9px;width:100%;font-family:inherit;font-weight:700;font-size:14.5px;
  padding:11px 12px;border:0;border-radius:var(--radio);
  background:var(--acento);color:#fff;cursor:pointer;
  transition:background .15s;
}
.boletin button:hover{background:#a72821}
.boletin .aviso{margin:10px 0 0;font-size:12px;color:var(--gris-claro)}

/* Foro */
.lista-foro{list-style:none;margin:0;padding:0}
.lista-foro li{padding:12px 18px;border-bottom:1px solid var(--linea)}
.lista-foro li:last-child{border-bottom:0}
.lista-foro li:nth-child(odd){background:var(--blanco)}
.lista-foro .tema{font-weight:600;font-size:14.5px;color:var(--tinta);display:block}
.lista-foro li:hover .tema{color:var(--acento)}
.lista-foro .quien{font-size:12.5px;color:var(--gris);margin-top:3px;display:block}

/* Empleo */
.lista-empleo{list-style:none;margin:0;padding:0}
.lista-empleo li{padding:14px 18px;border-bottom:1px solid var(--linea)}
.lista-empleo li:last-child{border-bottom:0}
.lista-empleo .puesto{font-weight:700;font-size:14.5px;color:var(--tinta);display:block}
.lista-empleo li:hover .puesto{color:var(--acento)}
.lista-empleo .donde{font-size:13px;color:var(--gris);margin-top:3px;display:block}

.caja .pie-caja{
  display:block;text-align:center;padding:12px;
  background:var(--blanco);border-top:1px solid var(--linea);
  font-size:13.5px;font-weight:700;color:var(--tinta);
}
.caja .pie-caja:hover{color:var(--acento)}

/* ==========================================================================
   FRANJA: VOTA EL MEJOR DESPACHO
   ========================================================================== */

.franja-voto{
  background:var(--tinta);color:#fff;
  margin:52px 0 0;padding:52px 0;
}
.franja-voto .contenedor{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:36px;align-items:center;
}
.franja-voto h2{font-size:37px;letter-spacing:-.015em}
.franja-voto p{
  margin:12px 0 0;color:rgba(255,255,255,.72);font-size:16.5px;max-width:60ch;
}
.boton-voto{
  display:inline-block;padding:16px 30px;
  background:var(--acento);color:#fff;font-weight:700;font-size:16px;
  border-radius:var(--radio);white-space:nowrap;
  transition:background .15s,transform .15s;
}
.boton-voto:hover{background:#a72821;transform:translateY(-1px)}

/* ==========================================================================
   TEMAS
   ========================================================================== */

.temas{padding:52px 0 8px}
.nube-temas{display:flex;flex-wrap:wrap;gap:10px}
.nube-temas a{
  padding:9px 16px;border:1px solid var(--linea);background:var(--fondo);
  border-radius:100px;font-size:14px;font-weight:600;color:var(--tinta);
  transition:background .15s,color .15s,border-color .15s;
}
.nube-temas a:hover{background:var(--tinta);color:#fff;border-color:var(--tinta)}

/* ==========================================================================
   PIE DE PÁGINA
   ========================================================================== */

.pie{
  background:var(--tinta);color:rgba(255,255,255,.7);
  margin-top:56px;padding:52px 0 0;font-size:14.5px;
}
.pie a{color:rgba(255,255,255,.7)}
.pie a:hover{color:#fff}

.pie-rejilla{
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;
  gap:40px;padding-bottom:42px;
}
.pie .sobre .nombre{
  font-size:23px;font-weight:700;color:#fff;line-height:1;
}
.pie .sobre p{margin:14px 0 0;color:rgba(255,255,255,.62);max-width:38ch}
.pie h3{
  font-size:13px;text-transform:uppercase;letter-spacing:.08em;
  color:#fff;margin-bottom:15px;
}
.pie ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}

.redes{display:flex;gap:10px;margin-top:18px}
.redes a{
  width:38px;height:38px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.16);border-radius:var(--radio);
  transition:background .15s,border-color .15s;
}
.redes a:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.4)}
.redes svg{width:17px;height:17px}

.pie-legal{
  border-top:1px solid rgba(255,255,255,.11);
  padding:20px 0 26px;
  display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;
  font-size:13.5px;color:rgba(255,255,255,.5);
}
.pie-legal .enlaces{display:flex;flex-wrap:wrap;gap:8px 22px;margin-left:auto}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width:1180px){
  .rejilla-portada{grid-template-columns:minmax(0,1fr);gap:46px}
  .lateral{
    position:static;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .pie-rejilla{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px}
}

@media (max-width:860px){
  body{font-size:16px}
  .cabecera .contenedor{min-height:70px;gap:14px}
  .marca img{height:42px}
  .buscador{display:none}
  .abrir-menu{display:grid;place-items:center}

  /* La navegación pasa a desplegable */
  .nav{display:none}
  .nav.abierto{display:block}
  .nav ul{flex-direction:column}
  .nav a{
    padding:14px 4px;border-bottom:1px solid rgba(255,255,255,.09);
    border-left:3px solid transparent;
  }
  .nav a[aria-current="page"]{background:transparent;color:var(--acento);border-bottom-color:rgba(255,255,255,.09)}

  .destacada h3{font-size:26px}
  .destacada .imagen{aspect-ratio:16/10}
  .rejilla-notas{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 20px}

  .franja-voto{padding:40px 0;margin-top:42px}
  .franja-voto .contenedor{grid-template-columns:minmax(0,1fr);gap:22px}
  .franja-voto h2{font-size:25px}
  .boton-voto{justify-self:start}

  .barra-superior .lema{display:none}
}

@media (max-width:600px){
  .contenedor{padding:0 16px}
  .principal{padding:24px 0 6px}
  .lateral{grid-template-columns:minmax(0,1fr)}
  .destacada h3{font-size:23px}
  .destacada .imagen{aspect-ratio:3/2}
  .rejilla-notas{grid-template-columns:minmax(0,1fr);gap:26px}
  .nota .imagen{aspect-ratio:16/9}
  .titulo-seccion h2{font-size:21px}
  .pie-rejilla{grid-template-columns:minmax(0,1fr);gap:30px}
  .pie-legal{flex-direction:column;align-items:flex-start}
  .pie-legal .enlaces{margin-left:0}
}

/* Respeta a quien pide menos movimiento */
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
  .destacada:hover .imagen img,.nota:hover .imagen img{transform:none}
}
/* ==========================================================================
   Fuera de Acta — estilos de las páginas interiores
   Se añade al final de estilo.css. Reutiliza las variables ya definidas.
   ========================================================================== */

/* Cuando la página abre con un bloque de fondo (el gris del título o el negro de la
   votación), ese bloque debe pegar con la navegación: sin franja blanca en medio. */
.principal.sin-aire{padding-top:0}

/* ---------- Cabecera de página (título de sección) ---------- */
.portada-seccion{
  background:var(--fondo);
  border-bottom:1px solid var(--linea);
  padding:44px 0;
  margin-bottom:38px;
}
.portada-seccion h1{
  font-size:44px;color:var(--tinta);letter-spacing:-.02em;
}
.portada-seccion p{
  margin:14px 0 0;color:var(--gris);font-size:19px;max-width:66ch;
}
.migas{
  font-size:13.5px;color:var(--gris);margin-bottom:12px;
  display:flex;gap:8px;flex-wrap:wrap;align-items:center;
}
.migas a:hover{color:var(--acento)}
.migas span{color:var(--gris-claro)}

/* ---------- Listado de noticias en fila ---------- */
.lista-notas{display:grid;gap:34px}
.fila-nota{
  display:grid;grid-template-columns:320px minmax(0,1fr);
  gap:28px;align-items:start;
  padding-bottom:34px;border-bottom:1px solid var(--linea);
}
.lista-notas .fila-nota:last-child{border-bottom:0;padding-bottom:0}
.fila-nota .imagen{
  overflow:hidden;background:var(--linea);border-radius:var(--radio);aspect-ratio:16/10;
}
.fila-nota .imagen img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.fila-nota:hover .imagen img{transform:scale(1.03)}
.fila-nota h3{font-size:25px;color:var(--tinta);margin-top:2px}
.fila-nota:hover h3{color:var(--acento)}
.fila-nota .entradilla{margin-top:10px;color:var(--gris);font-size:16.5px}

/* ---------- Paginación ---------- */
.paginacion{
  display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  margin-top:44px;
}
.paginacion a,.paginacion span{
  min-width:44px;height:44px;padding:0 14px;
  display:grid;place-items:center;
  border:1px solid var(--linea);border-radius:var(--radio);
  font-size:15px;font-weight:600;color:var(--tinta);background:var(--blanco);
}
.paginacion a:hover{background:var(--fondo);border-color:var(--gris-claro)}
.paginacion .actual{background:var(--tinta);color:#fff;border-color:var(--tinta)}
.paginacion .puntos{border:0;background:transparent;color:var(--gris-claro)}

/* ==========================================================================
   ARTÍCULO
   ========================================================================== */

.articulo{max-width:760px}
.articulo .titulo{
  font-size:44px;letter-spacing:-.02em;color:var(--tinta);margin-top:10px;
}
.articulo .entradilla{
  margin:16px 0 0;font-size:21px;line-height:1.5;color:var(--gris);
}
.firma{
  display:flex;align-items:center;gap:13px;flex-wrap:wrap;
  margin:24px 0;padding:16px 0;
  border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);
  font-size:14.5px;color:var(--gris);
}
.firma .avatar{
  width:42px;height:42px;border-radius:50%;flex:none;
  background:var(--tinta);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:17px;
}
.firma b{color:var(--tinta);font-size:15px}
.firma .punto{width:3px;height:3px;border-radius:50%;background:var(--gris-claro)}

.imagen-articulo{
  margin:0 0 8px;border-radius:var(--radio);overflow:hidden;background:var(--linea);
}
.pie-imagen{font-size:13.5px;color:var(--gris-claro);margin:0 0 30px}

.cuerpo{font-size:19px;line-height:1.72;color:var(--texto)}
.cuerpo p{margin:0 0 24px}
.cuerpo h2{
  font-size:29px;color:var(--tinta);margin:40px 0 16px;letter-spacing:-.01em;
}
.cuerpo h3{font-size:23px;color:var(--tinta);margin:32px 0 12px}
.cuerpo a{color:var(--acento);border-bottom:1px solid rgba(200,50,43,.35)}
.cuerpo a:hover{border-bottom-color:var(--acento)}
.cuerpo ul,.cuerpo ol{margin:0 0 24px;padding-left:22px}
.cuerpo li{margin-bottom:9px}
.cuerpo blockquote{
  margin:32px 0;padding:6px 0 6px 24px;
  border-left:4px solid var(--acento);
  font-size:22px;line-height:1.5;color:var(--tinta);font-weight:600;
}
.cuerpo img{border-radius:var(--radio);margin:8px 0 28px}

.etiquetas-articulo{
  display:flex;gap:9px;flex-wrap:wrap;align-items:center;
  margin:38px 0 0;padding-top:26px;border-top:1px solid var(--linea);
}
.etiquetas-articulo .rotulo{font-size:13px;color:var(--gris);font-weight:600}
.etiquetas-articulo a{
  padding:7px 14px;border:1px solid var(--linea);background:var(--fondo);
  border-radius:100px;font-size:13.5px;font-weight:600;color:var(--tinta);
}
.etiquetas-articulo a:hover{background:var(--tinta);color:#fff;border-color:var(--tinta)}

.compartir{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  margin-top:24px;
}
.compartir .rotulo{font-size:13px;color:var(--gris);font-weight:600}
.compartir a{
  width:40px;height:40px;display:grid;place-items:center;
  border:1px solid var(--linea);border-radius:var(--radio);color:var(--tinta);
}
.compartir a:hover{background:var(--tinta);color:#fff;border-color:var(--tinta)}
.compartir svg{width:17px;height:17px}

/* Comentarios */
.zona-comentarios{margin-top:52px}
.comentario{
  display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;
  padding:22px 0;border-bottom:1px solid var(--linea);
}
.comentario .avatar{
  width:44px;height:44px;border-radius:50%;
  background:var(--fondo);border:1px solid var(--linea);
  display:grid;place-items:center;font-weight:700;color:var(--tinta);
}
.comentario .quien{font-size:14.5px;color:var(--gris);margin-bottom:5px}
.comentario .quien b{color:var(--tinta);font-size:15px}
.comentario p{margin:0;font-size:16.5px}
.caja-comentar{
  margin-top:26px;padding:22px;
  background:var(--fondo);border:1px solid var(--linea);border-radius:var(--radio);
}
.caja-comentar textarea{
  width:100%;min-height:110px;resize:vertical;
  font-family:inherit;font-size:16px;padding:13px;
  border:1px solid var(--linea);border-radius:var(--radio);background:#fff;color:var(--texto);
}
.caja-comentar textarea:focus{outline:none;border-color:var(--tinta)}

/* ---------- Botones ---------- */
.boton{
  display:inline-block;padding:14px 26px;
  background:var(--acento);color:#fff;font-weight:700;font-size:16px;
  border:0;border-radius:var(--radio);cursor:pointer;font-family:inherit;
  transition:background .15s;
}
.boton:hover{background:#a72821}
.boton-linea{
  display:inline-block;padding:13px 25px;
  background:transparent;color:var(--tinta);font-weight:700;font-size:15.5px;
  border:1.5px solid var(--tinta);border-radius:var(--radio);cursor:pointer;font-family:inherit;
}
.boton-linea:hover{background:var(--tinta);color:#fff}

/* ==========================================================================
   FORO
   ========================================================================== */

.grupo-foro{margin-bottom:34px;border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden}
.grupo-foro > h2{
  font-size:19px;padding:15px 20px;background:var(--tinta);color:#fff;
}
.foro-fila{
  display:grid;grid-template-columns:minmax(0,1fr) 110px 110px 220px;
  gap:18px;align-items:center;
  padding:18px 20px;border-bottom:1px solid var(--linea);
}
.foro-fila:last-child{border-bottom:0}
.foro-fila:nth-child(even){background:var(--fondo)}
.foro-fila .nombre{font-size:18px;font-weight:700;color:var(--tinta)}
.foro-fila:hover .nombre{color:var(--acento)}
.foro-fila .desc{font-size:14.5px;color:var(--gris);margin-top:4px}
.foro-fila .cifra{text-align:center}
.foro-fila .cifra b{display:block;font-size:19px;color:var(--tinta)}
.foro-fila .cifra span{font-size:12.5px;color:var(--gris);text-transform:uppercase;letter-spacing:.05em}
.foro-fila .ultimo{font-size:13.5px;color:var(--gris)}
.foro-fila .ultimo b{display:block;color:var(--tinta);font-size:14.5px;font-weight:600;margin-bottom:2px}
.cabecera-tabla{
  display:grid;grid-template-columns:minmax(0,1fr) 110px 110px 220px;
  gap:18px;padding:11px 20px;background:var(--tinta-2);color:rgba(255,255,255,.75);
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
}
.cabecera-tabla .cifra{text-align:center}

/* ==========================================================================
   EMPLEO
   ========================================================================== */

.filtros{
  display:flex;gap:10px;flex-wrap:wrap;margin-bottom:30px;
  padding-bottom:26px;border-bottom:1px solid var(--linea);
}
.filtros select,.filtros input{
  font-family:inherit;font-size:15px;padding:11px 13px;
  border:1px solid var(--linea);border-radius:var(--radio);
  background:var(--blanco);color:var(--texto);
}
.filtros input{flex:1;min-width:180px}
.filtros select:focus,.filtros input:focus{outline:none;border-color:var(--tinta)}

.oferta{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:22px;align-items:center;
  padding:24px;margin-bottom:16px;
  border:1px solid var(--linea);border-radius:var(--radio);background:var(--blanco);
  transition:border-color .15s,box-shadow .15s;
}
.oferta:hover{border-color:var(--tinta);box-shadow:var(--sombra)}
.oferta h3{font-size:21px;color:var(--tinta)}
.oferta .empresa{font-size:15.5px;color:var(--gris);margin-top:5px}
.oferta .datos{
  display:flex;gap:9px;flex-wrap:wrap;margin-top:13px;
}
.oferta .dato{
  font-size:13px;font-weight:600;padding:5px 11px;
  background:var(--fondo);border:1px solid var(--linea);border-radius:100px;color:var(--tinta);
}
.oferta .cuando{font-size:13px;color:var(--gris-claro);margin-top:11px}

/* ==========================================================================
   VOTACIÓN DEL MEJOR DESPACHO
   ========================================================================== */

.cabecera-voto{
  background:var(--tinta);color:#fff;padding:64px 0;margin-bottom:44px;
}
.cabecera-voto h1{font-size:48px;letter-spacing:-.025em;max-width:20ch}
.cabecera-voto p{
  margin:18px 0 0;font-size:20px;color:rgba(255,255,255,.75);max-width:62ch;
}
.cabecera-voto .boton{margin-top:28px}

.pasos{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;
  margin-bottom:52px;
}
.paso .num{
  width:44px;height:44px;border-radius:50%;
  background:var(--acento);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:19px;margin-bottom:14px;
}
.paso h3{font-size:20px;color:var(--tinta);margin-bottom:8px}
.paso p{margin:0;color:var(--gris);font-size:16px}

.ranking{border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden}
.ranking-fila{
  display:grid;grid-template-columns:58px minmax(0,1fr) 130px 100px;
  gap:18px;align-items:center;
  padding:18px 20px;border-bottom:1px solid var(--linea);
}
.ranking-fila:last-child{border-bottom:0}
.ranking-fila:nth-child(even){background:var(--fondo)}
.ranking-fila .puesto{
  font-size:23px;font-weight:700;color:var(--gris-claro);text-align:center;
}
.ranking-fila.podio .puesto{color:var(--acento)}
.ranking-fila .despacho{font-size:18px;font-weight:700;color:var(--tinta)}
.ranking-fila .sede{font-size:14px;color:var(--gris);margin-top:3px}
.barra{height:8px;background:var(--linea);border-radius:100px;overflow:hidden}
.barra i{display:block;height:100%;background:var(--acento)}
.ranking-fila .nota{font-size:20px;font-weight:700;color:var(--tinta);text-align:right}
.ranking-fila .nota small{display:block;font-size:12px;font-weight:500;color:var(--gris)}

/* ==========================================================================
   CURSOS
   ========================================================================== */

.rejilla-cursos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
.curso{
  border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden;
  background:var(--blanco);display:flex;flex-direction:column;
  transition:border-color .15s,box-shadow .15s;
}
.curso:hover{border-color:var(--tinta);box-shadow:var(--sombra)}
.curso .imagen{aspect-ratio:16/9;background:var(--linea);overflow:hidden}
.curso .imagen img{width:100%;height:100%;object-fit:cover}
.curso .cuerpo-curso{padding:20px;display:flex;flex-direction:column;flex:1}
.curso h3{font-size:19px;color:var(--tinta);margin-bottom:9px}
.curso p{margin:0 0 16px;font-size:15.5px;color:var(--gris)}
.curso .pie-curso{
  margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-top:14px;border-top:1px solid var(--linea);
}
.curso .precio{font-size:19px;font-weight:700;color:var(--tinta)}
.curso .duracion{font-size:13.5px;color:var(--gris)}

/* ==========================================================================
   PÁGINAS DE TEXTO Y CONTACTO
   ========================================================================== */

.texto{max-width:760px;font-size:19px;line-height:1.72}
.texto p{margin:0 0 24px}
.texto h2{font-size:29px;color:var(--tinta);margin:40px 0 16px}
.texto ul{margin:0 0 24px;padding-left:22px}
.texto li{margin-bottom:9px}

.rejilla-contacto{
  display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:52px;align-items:start;
}
.formulario{display:grid;gap:18px}
.campo label{
  display:block;font-size:14.5px;font-weight:600;color:var(--tinta);margin-bottom:7px;
}
.campo input,.campo textarea,.campo select{
  width:100%;font-family:inherit;font-size:16px;padding:13px;
  border:1px solid var(--linea);border-radius:var(--radio);
  background:var(--blanco);color:var(--texto);
}
.campo textarea{min-height:150px;resize:vertical}
.campo input:focus,.campo textarea:focus,.campo select:focus{outline:none;border-color:var(--tinta)}
.campo .ayuda{font-size:13px;color:var(--gris);margin-top:6px}

.datos-contacto{
  background:var(--fondo);border:1px solid var(--linea);border-radius:var(--radio);padding:26px;
}
.datos-contacto h2{font-size:20px;color:var(--tinta);margin-bottom:16px}
.datos-contacto p{margin:0 0 18px;font-size:16px;color:var(--gris)}
.datos-contacto .bloque{margin-bottom:20px}
.datos-contacto .bloque:last-child{margin-bottom:0}
.datos-contacto .rotulo{
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--acento);margin-bottom:5px;
}

/* Aviso de maqueta */
.aviso-maqueta{
  background:#FFF8E1;border:1px solid #F0DFA8;border-left:4px solid #C9A227;
  border-radius:var(--radio);padding:15px 18px;margin-bottom:32px;
  font-size:15px;color:#5C4A10;
}
.aviso-maqueta b{color:#3D3108}

/* ==========================================================================
   RESPONSIVE DE LAS PÁGINAS INTERIORES
   ========================================================================== */

@media (max-width:1180px){
  .rejilla-contacto{grid-template-columns:minmax(0,1fr);gap:38px}
}

@media (max-width:860px){
  .portada-seccion{padding:32px 0;margin-bottom:30px}
  .portada-seccion h1{font-size:34px}
  .portada-seccion p{font-size:17px}

  .fila-nota{grid-template-columns:200px minmax(0,1fr);gap:20px}
  .fila-nota h3{font-size:20px}
  .fila-nota .entradilla{font-size:15.5px}

  .articulo .titulo{font-size:33px}
  .articulo .entradilla{font-size:18.5px}
  .cuerpo{font-size:17.5px}
  .cuerpo h2{font-size:24px}
  .cuerpo blockquote{font-size:19px}

  /* El foro pasa a lista: se ocultan las columnas de cifras */
  .cabecera-tabla{display:none}
  .foro-fila{grid-template-columns:minmax(0,1fr);gap:10px}
  .foro-fila .cifra{text-align:left;display:flex;gap:7px;align-items:baseline}
  .foro-fila .cifra b{display:inline;font-size:16px}
  .foro-fila .cifra span{font-size:12px}

  .oferta{grid-template-columns:minmax(0,1fr);gap:16px}
  .oferta .boton{justify-self:start}

  .cabecera-voto{padding:44px 0;margin-bottom:34px}
  .cabecera-voto h1{font-size:34px}
  .cabecera-voto p{font-size:17.5px}
  .pasos{grid-template-columns:minmax(0,1fr);gap:24px;margin-bottom:38px}

  .ranking-fila{grid-template-columns:44px minmax(0,1fr) 80px;gap:14px}
  .ranking-fila .barra{display:none}

  .rejilla-cursos{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}

  .texto{font-size:17.5px}
  .texto h2{font-size:24px}
}

@media (max-width:600px){
  .portada-seccion h1{font-size:28px}
  .fila-nota{grid-template-columns:minmax(0,1fr);gap:14px}
  .fila-nota .imagen{aspect-ratio:16/9}
  .articulo .titulo{font-size:27px}
  .rejilla-cursos{grid-template-columns:minmax(0,1fr)}
  .paginacion a,.paginacion span{min-width:40px;height:40px;padding:0 11px;font-size:14px}
  .comentario{grid-template-columns:36px minmax(0,1fr);gap:11px}
  .comentario .avatar{width:36px;height:36px;font-size:14px}
}
/* ==========================================================================
   Fuera de Acta — el foro por dentro (subforos y temas) + animaciones
   ========================================================================== */

/* ---------- Avatares ---------- */
.av{
  width:46px;height:46px;border-radius:50%;flex:none;
  display:grid;place-items:center;
  font-weight:700;font-size:17px;color:#fff;letter-spacing:.01em;
  background:var(--tinta-2);
  user-select:none;
}
.av.c1{background:#2D2D31}
.av.c2{background:#4A4A52}
.av.c3{background:#6B6B75}
.av.c4{background:var(--acento)}
.av.c5{background:#3E4A5B}
.av.c6{background:#5B4A3E}
.av.pequeno{width:34px;height:34px;font-size:13px}

/* ---------- Listado de temas de un subforo ---------- */
.tema-fila{
  display:grid;grid-template-columns:46px minmax(0,1fr) 96px 96px 190px;
  gap:16px;align-items:center;
  padding:16px 20px;border-bottom:1px solid var(--linea);
  transition:background .18s ease;
}
.tema-fila:last-child{border-bottom:0}
.tema-fila:hover{background:var(--fondo)}
.tema-fila .titulo-tema{
  font-size:17.5px;font-weight:700;color:var(--tinta);
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
}
.tema-fila:hover .titulo-tema{color:var(--acento)}
.tema-fila .quien-tema{font-size:13.5px;color:var(--gris);margin-top:4px}
.tema-fila .cifra{text-align:center}
.tema-fila .cifra b{display:block;font-size:17px;color:var(--tinta)}
.tema-fila .cifra span{font-size:11.5px;color:var(--gris);text-transform:uppercase;letter-spacing:.05em}
.tema-fila .ultimo{font-size:13px;color:var(--gris)}
.tema-fila .ultimo b{display:block;color:var(--tinta);font-size:13.5px;font-weight:600}

.chincheta,.candado,.nuevo{
  font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  padding:3px 8px;border-radius:100px;
}
.chincheta{background:#FFF3D6;color:#8A6A12;border:1px solid #F0DFA8}
.candado{background:var(--linea);color:var(--gris)}
.nuevo{background:var(--acento);color:#fff}

.cabecera-temas{
  display:grid;grid-template-columns:46px minmax(0,1fr) 96px 96px 190px;
  gap:16px;padding:11px 20px;background:var(--tinta-2);color:rgba(255,255,255,.75);
  font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
}
.cabecera-temas .cifra{text-align:center}

/* ---------- Cabecera de un tema ---------- */
.tema-cabecera{
  background:var(--fondo);border-bottom:1px solid var(--linea);
  padding:34px 0;margin-bottom:34px;
}
.tema-cabecera h1{
  font-size:36px;letter-spacing:-.018em;color:var(--tinta);max-width:24ch;
}
.tema-datos{
  display:flex;gap:12px;flex-wrap:wrap;align-items:center;
  margin-top:16px;font-size:14.5px;color:var(--gris);
}
.tema-datos .punto{width:3px;height:3px;border-radius:50%;background:var(--gris-claro)}
.tema-datos b{color:var(--tinta)}
.tema-acciones{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}

/* ---------- Mensajes del hilo ---------- */
.hilo{display:grid;gap:20px;margin-bottom:36px}

.mensaje{
  display:grid;grid-template-columns:46px minmax(0,1fr);gap:16px;
  padding:22px;border:1px solid var(--linea);border-radius:var(--radio);
  background:var(--blanco);
  transition:border-color .2s ease,box-shadow .2s ease;
}
.mensaje:hover{border-color:var(--gris-claro)}
.mensaje.inicial{
  border-left:4px solid var(--acento);
  background:var(--blanco);box-shadow:var(--sombra);
}
.mensaje.solucion{border-left:4px solid #2E7D4F;background:#F6FBF8}

.mensaje .quien{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:14px;color:var(--gris);margin-bottom:11px;
}
.mensaje .quien b{color:var(--tinta);font-size:15.5px}
.mensaje .rol{
  font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  padding:3px 8px;border-radius:100px;background:var(--linea);color:var(--gris);
}
.mensaje .rol.autora{background:var(--acento);color:#fff}
.mensaje .rol.veterano{background:var(--tinta-2);color:#fff}
.mensaje .texto{font-size:16.5px;line-height:1.65}
.mensaje .texto p{margin:0 0 14px}
.mensaje .texto p:last-child{margin-bottom:0}
.mensaje .texto ul{margin:0 0 14px;padding-left:20px}
.mensaje .texto li{margin-bottom:6px}

.cita{
  margin:0 0 14px;padding:12px 16px;
  background:var(--fondo);border-left:3px solid var(--gris-claro);
  border-radius:0 var(--radio) var(--radio) 0;
  font-size:15.5px;color:var(--gris);
}
.cita b{color:var(--tinta);display:block;margin-bottom:4px;font-size:14px}

.adjunto{margin:4px 0 14px;border-radius:var(--radio);overflow:hidden;border:1px solid var(--linea)}
.adjunto img{width:100%;height:auto;display:block;transition:transform .5s ease}
.adjunto:hover img{transform:scale(1.02)}
.adjunto figcaption{
  font-size:13px;color:var(--gris);padding:9px 12px;background:var(--fondo);
  border-top:1px solid var(--linea);
}

.mensaje-pie{
  display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  margin-top:15px;padding-top:13px;border-top:1px solid var(--linea);
}
.accion{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13.5px;font-weight:600;color:var(--gris);
  padding:6px 11px;border-radius:100px;border:1px solid transparent;
  background:transparent;cursor:pointer;font-family:inherit;
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.accion:hover{background:var(--fondo);color:var(--tinta);border-color:var(--linea)}
.accion svg{width:15px;height:15px}
.accion.marcada{color:var(--acento)}
.accion.marcada svg{fill:var(--acento)}

.responder{
  padding:24px;border:1px solid var(--linea);border-radius:var(--radio);
  background:var(--fondo);
}
.responder h2{font-size:20px;color:var(--tinta);margin-bottom:14px}
.responder textarea{
  width:100%;min-height:130px;resize:vertical;font-family:inherit;font-size:16.5px;
  padding:14px;border:1px solid var(--linea);border-radius:var(--radio);
  background:#fff;color:var(--texto);transition:border-color .16s ease;
}
.responder textarea:focus{outline:none;border-color:var(--tinta)}
.responder .barra{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:13px}
.responder .aviso{font-size:13px;color:var(--gris);margin:0}

/* ---------- Navegación entre temas ---------- */
.salto-temas{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:34px;
}
.salto{
  padding:18px;border:1px solid var(--linea);border-radius:var(--radio);
  transition:border-color .18s ease,transform .18s ease;
}
.salto:hover{border-color:var(--tinta);transform:translateY(-2px)}
.salto .rotulo{font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--gris);margin-bottom:6px}
.salto .t{font-size:16px;font-weight:700;color:var(--tinta)}
.salto.siguiente{text-align:right}

/* ==========================================================================
   ANIMACIONES
   ========================================================================== */

/* Aparición al entrar en pantalla */
.js .aparece{
  opacity:0;transform:translateY(18px);
  transition:opacity .55s cubic-bezier(.22,.61,.36,1),
             transform .55s cubic-bezier(.22,.61,.36,1);
  will-change:opacity,transform;
}
.js .aparece.visible{opacity:1;transform:none}

/* Escalonado dentro de una rejilla */
.aparece.d1{transition-delay:.06s}
.aparece.d2{transition-delay:.12s}
.aparece.d3{transition-delay:.18s}
.aparece.d4{transition-delay:.24s}
.aparece.d5{transition-delay:.30s}
.aparece.d6{transition-delay:.36s}

/* Tarjetas: elevación al pasar por encima */
.nota,.fila-nota,.curso,.oferta,.destacada{
  transition:transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s ease,
             border-color .18s ease;
}
.nota:hover,.fila-nota:hover,.destacada:hover{transform:translateY(-3px)}
.curso:hover,.oferta:hover{transform:translateY(-3px)}

/* Subrayado que crece en los enlaces de sección */
.titulo-seccion .mas{position:relative}
.titulo-seccion .mas::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;
  background:var(--acento);transform:scaleX(0);transform-origin:left;
  transition:transform .28s cubic-bezier(.22,.61,.36,1);
}
.titulo-seccion .mas:hover::after{transform:scaleX(1)}

/* La cabecera gana sombra al bajar */
.cabecera{transition:box-shadow .25s ease}
.cabecera.flotando{box-shadow:0 1px 0 rgba(22,22,24,.06),0 6px 22px rgba(22,22,24,.09)}

/* Menú de móvil: se despliega en lugar de aparecer de golpe */
@media (max-width:860px){
  .js .nav{
    display:block;max-height:0;overflow:hidden;
    transition:max-height .34s cubic-bezier(.22,.61,.36,1);
  }
  .js .nav.abierto{max-height:640px}
  .abrir-menu svg{transition:transform .28s cubic-bezier(.22,.61,.36,1)}
  .abrir-menu[aria-expanded="true"] svg{transform:rotate(90deg)}
}

/* Botones */
.boton,.boton-voto,.boton-linea,.boton-mas{
  transition:background .18s ease,color .18s ease,border-color .18s ease,
             transform .18s cubic-bezier(.22,.61,.36,1),box-shadow .18s ease;
}
.boton:hover,.boton-voto:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(200,50,43,.28)}
.boton:active,.boton-voto:active,.boton-linea:active{transform:translateY(0)}
.boton-linea:hover,.boton-mas:hover{transform:translateY(-2px)}

/* Etiquetas de tema */
.nube-temas a,.etiquetas-articulo a,.oferta .dato{
  transition:background .18s ease,color .18s ease,border-color .18s ease,
             transform .18s cubic-bezier(.22,.61,.36,1);
}
.nube-temas a:hover,.etiquetas-articulo a:hover{transform:translateY(-2px)}

/* Barras del ranking: crecen al aparecer */
.barra i{width:var(--pct,0)}
.js .barra i{width:0;transition:width 1s cubic-bezier(.22,.61,.36,1) .15s}
.js .ranking-fila.visible .barra i{width:var(--pct)}

/* Filas del foro: la flecha asoma */
.foro-fila,.tema-fila{position:relative}
.foro-fila .nombre,.tema-fila .titulo-tema{transition:color .18s ease}

/* Enlaces del lateral */
.lista-foro li,.lista-empleo li{transition:background .18s ease,padding-left .18s ease}
.lista-foro li:hover,.lista-empleo li:hover{background:var(--fondo);padding-left:23px}

/* Imágenes: aparecen suavemente al cargar */
.nota .imagen img,.fila-nota .imagen img,.destacada .imagen img{
  animation:revelar .6s ease both;
}
@keyframes revelar{from{opacity:0}to{opacity:1}}

/* Quien pida menos movimiento, no lo tiene */
@media (prefers-reduced-motion:reduce){
  .js .aparece{opacity:1;transform:none;transition:none}
  .barra i{width:var(--pct);transition:none}
  .nota .imagen img,.fila-nota .imagen img,.destacada .imagen img{animation:none}
  .nav{transition:none}
}

/* ==========================================================================
   RESPONSIVE DEL FORO
   ========================================================================== */

@media (max-width:860px){
  .cabecera-temas{display:none}
  .tema-fila{grid-template-columns:40px minmax(0,1fr);gap:13px;row-gap:8px}
  .tema-fila .av{width:40px;height:40px;font-size:15px}
  .tema-fila .cifra,.tema-fila .ultimo{grid-column:2}
  .tema-fila .cifra{text-align:left;display:flex;gap:6px;align-items:baseline}
  .tema-fila .cifra b{display:inline;font-size:15px}
  .tema-fila .ultimo b{display:inline}

  .tema-cabecera{padding:26px 0;margin-bottom:26px}
  .tema-cabecera h1{font-size:26px}

  .mensaje{grid-template-columns:38px minmax(0,1fr);gap:12px;padding:18px}
  .mensaje .av{width:38px;height:38px;font-size:14px}
  .mensaje .texto{font-size:16px}

  .salto-temas{grid-template-columns:minmax(0,1fr)}
  .salto.siguiente{text-align:left}
}

@media (max-width:600px){
  .tema-cabecera h1{font-size:22px}
  .responder{padding:18px}
  .mensaje-pie{gap:4px}
  .accion{padding:6px 9px;font-size:13px}
}