/* ===================================================================
   web-hombres · hoja de estilos común
   Sitio estático, sin dependencias externas.
   =================================================================== */

:root{
  --tinta:#16202c;
  --gris:#5b6674;
  --gris-claro:#8b95a3;
  --linea:#e3e6ec;
  --fondo:#f4f6f9;
  --blanco:#ffffff;
  --hombres:#1f4e79;   /* azul */
  --mujeres:#c2185b;   /* frambuesa */
  --acento:#0f766e;
  --radio:14px;
  --sombra:0 1px 2px rgba(16,32,48,.06), 0 8px 24px rgba(16,32,48,.06);
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--fondo);
  color:var(--tinta);
  font-family:"Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* ---------- barra de navegación ---------- */
.barra{
  position:sticky; top:0; z-index:50;
  background:var(--tinta);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.barra-in{
  max-width:1080px; margin:0 auto;
  padding:1.2rem 1.25rem;
  display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap;
}
.marca{
  color:#fff; font-weight:700; letter-spacing:.02em;
  text-decoration:none; font-size:1.2rem; margin-right:auto;
}
.marca span{color:#7dd3c7}
.menu{display:flex; gap:.35rem; flex-wrap:wrap; list-style:none; margin:0; padding:0}
.menu a{
  display:block; padding:.42rem .8rem; border-radius:999px;
  color:#cfd8e3; text-decoration:none; font-size:.9rem; font-weight:500;
  transition:background .15s, color .15s;
}
.menu a:hover{background:rgba(255,255,255,.09); color:#fff}
.menu a[aria-current="page"]{background:#fff; color:var(--tinta); font-weight:700}

/* ---------- menú hamburguesa (solo móvil) ---------- */
.menu-toggle{display:none}
.menu-btn{display:none}

/* ---------- contenedor ---------- */
.contenedor{max-width:1080px; margin:0 auto; padding:2.5rem 1.25rem 4rem}

/* ---------- portada ---------- */
.etiqueta{
 display: inline-block;
    margin: 0 0 .8rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #1f4e79;
    background: #d8e8f7;
    padding: .28rem .7rem;
    border-radius: 999px;
}
h1{font-size:clamp(3.55rem, 4vw, 3.55rem); line-height:1.18; margin:0 0 1rem; letter-spacing:-.02em}
.entradilla{font-size:1.08rem; color:var(--gris); max-width:none; margin:0 0 2rem}
.entradilla strong{color:var(--tinta)}



/* ---------- tarjetas KPI ---------- */
.kpis{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr));
  gap:1rem; margin:0 0 2.5rem;
}
.kpi{
  background:var(--blanco); border:1px solid var(--linea); border-radius:var(--radio);
  padding:1.1rem 1.2rem; box-shadow:var(--sombra);
}
.kpi .valor{font-size:2.2rem; font-weight:750; letter-spacing:-.02em; line-height:1.05; display:block}
.kpi .valor small{font-size:1rem; font-weight:600; color:var(--gris)}
.kpi .rotulo{display:block; margin-top:.4rem; font-size:.88rem; color:var(--gris)}
.kpi.destacado{background:var(--hombres); border-color:var(--hombres)}
.kpi.destacado .valor{color:#fff; font-size:3.5rem; letter-spacing:-.03em}
.kpi.destacado .rotulo{color:rgba(255,255,255,.85); font-size:.92rem}

/* ---------- bloques ---------- */
.bloque{margin:0 0 3.5rem}
.bloque h2{
  display:flex; align-items:center; gap:.75rem;
  font-size:1.3rem; margin:0 0 1rem; letter-spacing:-.01em;
}
/* insignia del bloque (A, B, C…) — OJO: clase exclusiva, no reutilizar en celdas */
.insignia{
  flex:none; width:2rem; height:2rem; border-radius:9px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--hombres); color:#fff; font-size:.95rem; font-weight:700;
}
.bloque .sub{font-weight:400; color:var(--gris); font-size:.95rem}

/* ---------- tarjeta de media + tarta ---------- */
.tarjeta-media{
  background:var(--blanco); border:1px solid var(--linea); border-radius:var(--radio);
  box-shadow:var(--sombra);
  padding:1.4rem;
  display:grid; grid-template-columns:260px 1fr; gap:2rem; align-items:center;
  margin:0 0 1.1rem;
}
/* tarta: conic-gradient puro, sin JS ni imágenes */
.tarta{
  position:relative;
  width:260px; height:260px; border-radius:50%;
  margin:0 auto;
  background:conic-gradient(
      from -90deg,
      var(--hombres) 0 calc(var(--h) * 1%),
      var(--mujeres) calc(var(--h) * 1%) 100%
  );
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);
}
.tarta::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  box-shadow:inset 0 0 0 4px var(--blanco), 0 2px 10px rgba(16,32,48,.13);
}

.datos-media h3{margin:0 0 .13rem; font-size:.95rem; color:var(--gris); font-weight:600}
.datos-media .cifra{margin:0 0 .9rem; font-size:2.4rem; font-weight:750; letter-spacing:-.03em; line-height:1}
.datos-media .cifra span{font-size:1rem; font-weight:600; color:var(--gris); letter-spacing:0}

.leyenda{list-style:none; margin:0 0 .9rem; padding:0; display:grid; gap:.4rem; max-width:320px}
.leyenda li{display:flex; align-items:center; gap:.6rem; font-size:.95rem}
.leyenda .punto{width:.85rem; height:.85rem; border-radius:3px; flex:none}
.leyenda .punto.h{background:var(--hombres)}
.leyenda .punto.m{background:var(--mujeres)}
.leyenda .pc{margin-left:auto; font-weight:700; font-variant-numeric:tabular-nums}

.nota-media{
  margin:0; font-size:.83rem; color:var(--gris-claro);
  border-top:1px solid var(--linea); padding-top:.7rem;
}

/* ---------- tablas ---------- */
.tabla-caja{
  background:var(--blanco); border:1px solid var(--linea); border-radius:var(--radio);
  box-shadow:var(--sombra); overflow-x:auto;
}
table{width:100%; border-collapse:collapse; font-size:.94rem; min-width:520px}
caption{
  text-align:left; padding:.9rem 1.1rem .2rem;
  font-size:.8rem; color:var(--gris-claro); letter-spacing:.04em; text-transform:uppercase;
}
th,td{padding:.68rem 1.1rem; text-align:left; border-bottom:1px solid var(--linea)}
thead th{
  font-size:.78rem; text-transform:uppercase; letter-spacing:.05em;
  color:var(--gris); font-weight:700; background:#fbfcfd; white-space:nowrap;
}
tbody tr:last-child td{border-bottom:none}
tbody tr:nth-child(even){background:#fbfcfd}
td.num,th.num{
  text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap;
  width:6.5rem; letter-spacing:normal; border-radius:0;
}
td.h{color:var(--hombres); font-weight:700}
td.m{color:var(--mujeres); font-weight:600}
/* dato no disponible (s.d. / n/d) */
.sd{color:var(--gris-claro); font-size:.82rem; font-weight:400}tfoot td{font-weight:700; background:#f4f6f9; border-top:2px solid var(--linea)}

/* ---------- avisos ---------- */
.aviso{
  border-left:4px solid var(--acento);
  background:rgba(15,118,110,.07);
  border-radius:0 10px 10px 0;
  padding:1rem 1.2rem; font-size:.92rem; color:#24403d;
  margin:0 0 1.1rem;
}
.aviso b{color:#0b4f49}

.tarjeta-plana{
  background:var(--blanco); border:1px solid var(--linea); border-radius:var(--radio);
  padding:1.3rem 1.4rem; box-shadow:var(--sombra); margin:0 0 1.1rem;
}
.tarjeta-plana h3{margin:0 0 .6rem; font-size:1rem}
.tarjeta-plana ol,.tarjeta-plana ul{margin:0; padding-left:1.2rem; color:var(--gris); font-size:.93rem}
.tarjeta-plana li{margin:.3rem 0}
.tarjeta-plana li strong{color:var(--tinta)}

/* ---------- portada del sitio (index) ---------- */
.rejilla{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:1.2rem}
.tarjeta-enlace{
  display:block; text-decoration:none; color:inherit;
  background:var(--blanco); border:1px solid var(--linea); border-radius:var(--radio);
  padding:1.5rem; box-shadow:var(--sombra); overflow:hidden;
  transition:transform .15s, box-shadow .15s, border-color .15s;
}
.tarjeta-enlace:hover{transform:translateY(-3px); border-color:#c9d2dd; box-shadow:0 12px 28px rgba(16,32,48,.1)}
/* encabezado azul a sangre, título en blanco */
.tarjeta-enlace h2{
  margin:-1.5rem -1.5rem 1rem; padding:.45rem 1.5rem;
  background:var(--hombres); color:#fff;
  font-size:1.5rem; font-weight:700; letter-spacing:-.01em;
}
.tarjeta-enlace p{margin:0 0 1.1rem; color:var(--gris); font-size:.9rem; line-height:1.55}
.tarjeta-enlace p strong{color:var(--tinta)}
/* tarta pequeña + cifra, en fila */
.tarjeta-dato{display:flex; align-items:center; gap:.9rem; margin:.2rem 0 .4rem}
.mini-tarta{
  flex:none; width:120px; height:120px; border-radius:50%;
  background:conic-gradient(
      from -90deg,
      var(--hombres) 0 calc(var(--h) * 1%),
      var(--mujeres) calc(var(--h) * 1%) 100%
  );
  box-shadow:inset 0 0 0 4px var(--blanco), 0 2px 8px rgba(16,32,48,.16);
}
.tarjeta-dato .gran{font-size:1.55rem; font-weight:750; letter-spacing:-.02em; line-height:1.1; display:block}
/* tarjeta solo de imagen */
.tarjeta-imagen{
  position:relative; min-height:280px;
  border-radius:var(--radio); overflow:hidden;
  border:1px solid var(--linea); box-shadow:var(--sombra);
  background:var(--tinta);
}
.tarjeta-imagen img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; display:block;
}
.tarjeta-enlace .gran small{font-size:.85rem; font-weight:600; color:var(--gris)}
.tarjeta-enlace .flecha{margin-top:.9rem; font-size:.88rem; font-weight:700; color:var(--hombres)}

/* ---------- pie ---------- */
.pie-pagina{
  border-top:1px solid var(--linea);
  background:var(--blanco);
  padding:2rem 1.25rem;
  font-size:.85rem; color:var(--gris);
}
.pie-in{max-width:1080px; margin:0 auto; display:grid; gap:.0rem}
.pie-pagina strong{color:var(--tinta)}
.pie-pagina ul{margin:.2rem 0 0; padding-left:1.1rem}
.pie-pagina a{color:var(--hombres)}

/* ---------- responsive ---------- */
/* ---------- móvil: menú hamburguesa ---------- */
@media (max-width:780px){
  .barra-in{flex-wrap:wrap; gap:.6rem; padding:.7rem 1.1rem}
  .marca{width:auto; margin-right:auto; font-size:.9rem}
  /* botón */
  .menu-btn{
    display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
    width:42px; height:38px; padding:0 9px; cursor:pointer;
    border:1px solid rgba(255,255,255,.22); border-radius:9px;
  }
  .menu-btn span{
    display:block; height:2px; background:#fff; border-radius:2px;
    transition:transform .2s, opacity .2s;
  }
  .menu-toggle:checked + .menu-btn span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .menu-toggle:checked + .menu-btn span:nth-child(2){opacity:0}
  .menu-toggle:checked + .menu-btn span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  /* panel */
  .barra-in nav{flex-basis:100%; display:none}
  .menu-toggle:checked ~ nav{display:block}
  .menu{flex-direction:column; gap:.15rem; width:100%; padding:.5rem 0 .2rem; border-top:1px solid rgba(255,255,255,.12); margin-top:.2rem}
  .menu a{border-radius:8px; padding:.6rem .7rem; font-size:.95rem}
}

@media (max-width:720px){
  body{font-size:16px}
  .contenedor{padding:1.8rem 1rem 3rem}
  .tarjeta-media{grid-template-columns:1fr; gap:1.2rem; padding:1.2rem}
  .tarta{width:200px; height:200px}
  .datos-media .cifra{font-size:2rem}
}
@media print{
  .barra,.flecha{display:none}
  body{background:#fff; font-size:11pt}
  .tarjeta-media,.tabla-caja,.kpi{box-shadow:none; break-inside:avoid}
  .bloque{break-inside:avoid-page}
}