/* ══════════════════════════════════════════════════════════════════════════
   Criar sin Agua · Instituto del Desarrollo de la Juventud

   Tokens tomados del brandbook oficial IDJ 2025 (valores HEX exactos).
   Tipografía: Museo Sans es la fuente de marca (licencia comercial); Nunito
   es el sustituto web que ya usa la Calculadora de Beneficios del IDJ, con la
   misma estructura de pesos (300 texto / 700-800 titulares).

   Decisiones deliberadas para no caer en el aspecto genérico:
     · radio de 3px, no el 8px por defecto de todas las librerías
     · un solo acento saturado (naranja de marca) reservado a titulares y CTA
     · sin degradados, sin glassmorphism, sin sombras difusas por todas partes
     · jerarquía por tamaño y peso tipográfico, no por cajas
     · motivo propio: el "cintillo" de cinco bloques del brandbook como regla
══════════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,600;0,700;0,800;1,400&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── Paleta oficial del brandbook ── */
  --crema:     #FFEAD5;
  --naranja:   #F7941D;
  --lima:      #B7D433;
  --cian:      #00B7E0;
  --cielo:     #C7EAFB;
  --magenta:   #D61576;
  --tinta:     #231F20;
  --gris:      #58595B;
  --gris-cl:   #D1D3D4;
  --blanco:    #FFFFFF;

  /* ── Variantes tonales del naranja de marca ──────────────────────────────
     El naranja #F7941D da 2.21:1 sobre fondo claro: no alcanza para texto
     (WCAG pide 3:1 en titulares grandes y 4.5:1 en texto normal). En vez de
     cambiar de color, se oscurece el MISMO tono. La desviación de matiz es
     de 0.1° a 0.5°: siguen siendo el naranja de la marca.
       --naranja     #F7941D  rellenos, bordes, botones, cintillo  (no texto)
       --naranja-t   #C8750C  titulares grandes        3.38:1  AA
       --naranja-s   #A76108  texto pequeño y enlaces  4.66:1  AA
     Sobre el naranja de marca, la tinta #231F20 da 7.15:1 (AAA).           */
  --naranja-t:  #C8750C;
  --naranja-s:  #A76108;

  /* ── Otros derivados (variaciones de los oficiales, no colores nuevos) ── */
  --cian-os:    #007C99;
  --papel:      #FCFBF9;
  --papel-2:    #F5F3EF;
  --borde:      #E4E1DC;

  /* ── Zonas del plan ── colores de marca, ΔE 11.1 bajo protanopia ── */
  --zona1: #00B7E0;   /* cian */
  --zona2: #D61576;   /* magenta */

  /* ── Sistema ── */
  --r:      3px;    /* radio deliberadamente pequeño */
  --r-pill: 999px;
  --paso:   1.5rem;
  --sombra: 0 1px 2px rgba(35,31,32,.05), 0 8px 24px -12px rgba(35,31,32,.18);
  --transicion: 180ms cubic-bezier(.32,.72,0,1);
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: 'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  background: var(--papel);
  color: var(--tinta);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--cielo); color: var(--tinta); }

:focus-visible {
  outline: 2px solid var(--cian);
  outline-offset: 2px;
  border-radius: 2px;
}

.saltar {
  position: absolute; left: -999px; top: 0; z-index: 999;
  background: var(--tinta); color: #fff; padding: .7rem 1.1rem;
  font-weight: 700; text-decoration: none;
}
.saltar:focus { left: 0; }

/* ══════════════════ Cabecera ══════════════════ */
.cabecera {
  position: sticky; top: 0; z-index: 800;
  background: rgba(252,251,249,.92);
  backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid var(--borde);
}
.cabecera-fila {
  max-width: 1400px; margin: 0 auto;
  padding: .7rem clamp(1rem, 4vw, 2.5rem);
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.marca {
  display: flex; align-items: center; gap: .75rem;
  text-decoration: none; color: inherit; flex-shrink: 0;
}
.marca img { height: 40px; width: auto; display: block; }
.marca-txt { display: flex; flex-direction: column; line-height: 1.2; }
.marca-txt b { font-size: 1rem; font-weight: 800; letter-spacing: -.01em; }
.marca-txt em {
  font-style: normal; font-size: .7rem; color: var(--gris); font-weight: 600;
}

/* ── Conmutador de secciones ── */
.tabs {
  display: flex; gap: 2px; padding: 3px;
  background: var(--papel-2); border: 1px solid var(--borde);
  border-radius: var(--r-pill);
}
.tabs button {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font-family: inherit; font-size: .88rem; font-weight: 700; color: var(--gris);
  padding: .5rem 1.1rem; border-radius: var(--r-pill);
  min-height: 40px; white-space: nowrap;
  transition: color var(--transicion), background var(--transicion);
}
.tabs button:hover { color: var(--tinta); }
.tabs button[aria-selected="true"] {
  background: var(--tinta); color: var(--blanco);
}

/* ══════════════════ Estructura ══════════════════ */
.panel { display: block; }
.panel.oculto { display: none; }

.lienzo {
  max-width: 1400px; margin: 0 auto;
  padding: clamp(1.25rem, 3vw, 2.25rem) clamp(1rem, 4vw, 2.5rem) 0;
}
.lienzo:last-child { padding-bottom: clamp(1.25rem, 3vw, 2.25rem); }

/* ══════════════════ Tipografía editorial ══════════════════ */
.eyebrow {
  font-size: .74rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--naranja-s); margin-bottom: .9rem;
}
/* El contenido ocupa el mismo ancho que el mapa: sin medidas de lectura
   estrechas que dejen media pantalla vacía. */
.titular {
  font-size: clamp(2.1rem, 6.2vw, 4rem);
  font-weight: 800; line-height: 1.02; letter-spacing: -.035em;
  color: var(--naranja-t); text-wrap: balance;
}
.titular-med { font-size: clamp(1.7rem, 4vw, 2.7rem); line-height: 1.08; }
.entradilla {
  font-size: clamp(1.05rem, 2.1vw, 1.35rem); font-weight: 700;
  line-height: 1.5; margin-top: 1.1rem; text-wrap: pretty;
}
.titulo-seccion {
  font-size: clamp(1.25rem, 2.6vw, 1.7rem); font-weight: 800;
  letter-spacing: -.02em; line-height: 1.15; margin-bottom: 1rem;
  text-wrap: balance;
}
.prosa { max-width: none; }
.prosa p { margin-bottom: 1rem; text-wrap: pretty; }
.prosa p:last-child { margin-bottom: 0; }
.prosa b { font-weight: 700; }
.prosa-sm { font-size: .95rem; color: var(--gris); }
.prosa-sm b { color: var(--tinta); }

/* ── Cintillo: el motivo de cinco bloques del brandbook ── */
.cintillo { display: flex; gap: 3px; margin: 1.5rem 0 1.25rem; }
.cintillo i { height: 6px; width: 46px; border-radius: 1px; display: block; }
.cintillo i:nth-child(1) { background: var(--cian); }
.cintillo i:nth-child(2) { background: var(--lima); }
.cintillo i:nth-child(3) { background: var(--naranja); }
.cintillo i:nth-child(4) { background: var(--magenta); }
.cintillo i:nth-child(5) { background: var(--cielo); }

/* ══════════════════ Cifras clave ══════════════════ */
.cifras {
  display: grid; gap: 1px; background: var(--borde);
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  border: 1px solid var(--borde); border-radius: var(--r); overflow: hidden;
}
.cifra { background: var(--blanco); padding: 1.4rem 1.25rem; }
.cifra-n {
  font-size: clamp(1.9rem, 4.4vw, 2.6rem); font-weight: 800;
  letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums;
  color: var(--tinta);
}
.cifra-l {
  font-size: .82rem; color: var(--gris); margin-top: .5rem;
  line-height: 1.35; font-weight: 600;
}
.cifra-moe { font-size: .7rem; color: var(--gris); opacity: .8; margin-top: .2rem; }

/* ══════════════════ Listas y notas ══════════════════ */
.usos { list-style: none; margin-top: .5rem; }
.usos li {
  position: relative; padding-left: 1.6rem; margin-bottom: .7rem;
  text-wrap: pretty;
}
.usos li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 9px; height: 9px; background: var(--naranja); border-radius: 1px;
}
.nota {
  margin-top: 1.25rem;
  border-left: 3px solid var(--cian); background: var(--blanco);
  padding: 1rem 1.2rem; font-size: .9rem; color: var(--gris);
  border-radius: 0 var(--r) var(--r) 0; line-height: 1.6;
}
.nota b { color: var(--tinta); }

/* ══════════════════ Botones ══════════════════ */
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: .8rem 1.6rem;
  font-family: inherit; font-size: .95rem; font-weight: 800;
  border-radius: var(--r); cursor: pointer; text-decoration: none;
  border: 2px solid transparent; letter-spacing: -.01em;
  transition: background var(--transicion), color var(--transicion),
              border-color var(--transicion), transform var(--transicion);
}
.boton:active { transform: translateY(1px); }
.boton-solido { background: var(--naranja); color: var(--tinta); border-color: var(--naranja); }
.boton-solido:hover { background: var(--tinta); border-color: var(--tinta); color: var(--blanco); }
.boton-linea { background: transparent; color: var(--tinta); border-color: var(--tinta); }
.boton-linea:hover { background: var(--tinta); color: var(--blanco); }

/* ══════════════════ Llamado a la acción ══════════════════ */
.cta {
  background: var(--crema); border-radius: var(--r);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  display: flex; align-items: center; gap: 2rem; flex-wrap: wrap;
  border-left: 4px solid var(--naranja);
}
.cta-txt { flex: 1 1 340px; }
.cta-txt h2 {
  font-size: clamp(1.2rem, 2.6vw, 1.6rem); font-weight: 800;
  letter-spacing: -.02em; line-height: 1.2; margin-bottom: .6rem;
  text-wrap: balance;
}
.cta-txt p { font-size: .95rem; text-wrap: pretty; }

/* ══════════════════ Controles del mapa ══════════════════ */
.controles {
  background: var(--blanco); border: 1px solid var(--borde);
  border-radius: var(--r); padding: 1.1rem 1.2rem; margin-bottom: 1rem;
}
.controles-fila {
  display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: flex-end;
}
.control { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.control-crece { flex: 1 1 280px; }
.control-label {
  font-size: .68rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .1em; color: var(--gris);
}
.control select {
  appearance: none; width: 100%; min-height: 48px;
  padding: .6rem 2.4rem .6rem .8rem;
  border: 1.5px solid var(--gris-cl); border-radius: var(--r);
  font-family: inherit; font-size: .95rem; font-weight: 700;
  color: var(--tinta); background: var(--blanco);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2358595B' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .85rem center;
  background-size: 12px; cursor: pointer;
}
.control select:hover { border-color: var(--gris); }

.seg {
  display: flex; border: 1.5px solid var(--gris-cl);
  border-radius: var(--r); overflow: hidden; background: var(--blanco);
}
.seg button {
  appearance: none; border: 0; background: var(--blanco); color: var(--gris);
  font-family: inherit; font-size: .85rem; font-weight: 700;
  padding: .55rem .95rem; min-height: 48px; cursor: pointer;
  border-right: 1px solid var(--gris-cl); white-space: nowrap;
  transition: background var(--transicion), color var(--transicion);
}
.seg button:last-child { border-right: 0; }
.seg button:hover:not([aria-pressed="true"]) { background: var(--papel-2); color: var(--tinta); }
.seg button[aria-pressed="true"] { background: var(--tinta); color: var(--blanco); }
.seg-dim button[aria-pressed="true"] { background: var(--cian); color: var(--tinta); }
.seg button[disabled] { opacity: .35; cursor: not-allowed; }

.ind-desc {
  margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--borde);
  font-size: .88rem; color: var(--gris); line-height: 1.55; max-width: 78ch;
}
.ind-desc b { color: var(--tinta); font-weight: 800; }

/* ══════════════════ Mapa ══════════════════ */
.rejilla {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px;
  gap: 1rem; align-items: start;
}
.mapa-caja {
  position: relative; background: var(--blanco);
  border: 1px solid var(--borde); border-radius: var(--r);
  overflow: hidden; box-shadow: var(--sombra);
}
#map { height: min(70vh, 660px); width: 100%; background: var(--papel-2); }
.leaflet-container { font-family: 'Nunito', sans-serif; }
.mapa-pie {
  padding: .6rem 1rem; font-size: .8rem; color: var(--gris);
  border-top: 1px solid var(--borde); background: var(--papel);
}
.solo-tacto { display: none; }

.leyenda {
  position: absolute; bottom: 54px; left: 12px; z-index: 700;
  background: rgba(255,255,255,.97); border: 1px solid var(--borde);
  border-radius: var(--r); padding: .7rem .8rem;
  box-shadow: var(--sombra); font-size: .76rem; max-width: 236px;
}
.leyenda h4 {
  font-size: .64rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--gris); font-weight: 800; margin-bottom: .4rem;
}
.leyenda-item { display: flex; align-items: center; gap: .45rem; margin-bottom: .2rem; }
.leyenda-muestra {
  width: 15px; height: 12px; border-radius: 1px; flex-shrink: 0;
  border: 1px solid rgba(35,31,32,.18);
}
.leyenda-par { display: flex; gap: 2px; flex-shrink: 0; }
.leyenda-linea { width: 17px; height: 4px; border-radius: 1px; flex-shrink: 0; }
.leyenda-sep { height: 1px; background: var(--borde); margin: .6rem 0 .55rem; }
.leyenda-nota { margin-top: .5rem; color: var(--gris); font-size: .68rem; line-height: 1.4; }

/* ── Tooltip ── */
.leaflet-tooltip.tt-tract {
  background: var(--tinta); color: #fff; border: 0; box-shadow: var(--sombra);
  font-size: .82rem; font-weight: 600; padding: .6rem .75rem;
  border-radius: var(--r); max-width: 258px; white-space: normal;
}
.leaflet-tooltip.tt-tract::before { display: none; }
.tt-head {
  font-size: .88rem; font-weight: 800; line-height: 1.25;
  padding-bottom: .35rem; margin-bottom: .4rem;
  border-bottom: 1px solid rgba(255,255,255,.2);
}
.tt-ind { font-size: .72rem; color: #C3C6C9; font-weight: 700;
          text-transform: uppercase; letter-spacing: .06em; }
.tt-big {
  font-size: 1.45rem; font-weight: 800; color: var(--blanco);
  line-height: 1.15; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.tt-sec { font-size: .76rem; color: #D6D8DA; font-weight: 600; }
.tt-rep { margin-top: .5rem; padding-top: .4rem; border-top: 1px solid rgba(255,255,255,.16); }
.tt-rep-tit {
  font-size: .62rem; text-transform: uppercase; letter-spacing: .08em;
  color: #A8ABAE; font-weight: 800; margin-bottom: .3rem;
}
.tt-fila {
  display: flex; align-items: center; gap: .4rem;
  font-size: .75rem; color: #D6D8DA; font-weight: 600; line-height: 1.7;
}
.tt-fila b { margin-left: auto; color: #fff; font-variant-numeric: tabular-nums; }
.tt-pt { width: 9px; height: 9px; border-radius: 1px; flex-shrink: 0; }

/* ══════════════════ Panel de resumen ══════════════════ */
.costado { display: flex; flex-direction: column; gap: 1rem; }
.tarjeta {
  background: var(--blanco); border: 1px solid var(--borde);
  border-radius: var(--r); padding: 1.2rem 1.3rem;
}
.tarjeta h2 { font-size: .95rem; font-weight: 800; letter-spacing: -.01em; }
.tarjeta-sub {
  font-size: .8rem; color: var(--gris); margin: .2rem 0 1rem; line-height: 1.45;
}

.zona-fila {
  display: grid; grid-template-columns: 8px 1fr auto; gap: .7rem;
  align-items: center; padding: .8rem 0; border-bottom: 1px solid var(--papel-2);
}
.zona-fila:last-of-type { border-bottom: 0; }
.zona-barra { width: 8px; height: 100%; min-height: 40px; border-radius: 1px; }
.zona-barra.z1 { background: var(--zona1); }
.zona-barra.z2 { background: var(--zona2); }
.zona-barra.tt { background: var(--tinta); }
.zona-nom { font-size: .85rem; font-weight: 800; }
.zona-sub { font-size: .72rem; color: var(--gris); font-weight: 600; }
.zona-val {
  font-size: 1.5rem; font-weight: 800; letter-spacing: -.035em;
  text-align: right; line-height: 1.1; font-variant-numeric: tabular-nums;
}
.zona-moe { font-size: .7rem; color: var(--gris); text-align: right; font-weight: 600; }
.zona-fila.total { border-top: 2px solid var(--tinta); margin-top: .3rem; padding-top: .9rem; }

.brecha {
  display: flex; align-items: center; gap: .9rem;
  margin-top: 1.1rem; padding: .95rem 1rem;
  border-radius: var(--r); border-left: 4px solid;
}
.brecha-cifra {
  font-size: 1.6rem; font-weight: 800; letter-spacing: -.04em;
  line-height: 1; flex-shrink: 0; font-variant-numeric: tabular-nums;
}
.brecha-label {
  font-size: .62rem; text-transform: uppercase; letter-spacing: .1em;
  font-weight: 800; color: var(--gris); margin-bottom: .15rem;
}
.brecha-txt { font-size: .8rem; line-height: 1.45; }
.brecha-par   { background: var(--papel-2); border-left-color: var(--gris-cl); }
.brecha-par   .brecha-cifra { color: var(--gris); }
.brecha-media { background: var(--cielo);   border-left-color: var(--cian); }
.brecha-media .brecha-cifra { color: var(--cian-os); }
.brecha-alta  { background: var(--crema);   border-left-color: var(--naranja); }
.brecha-alta  .brecha-cifra { color: var(--naranja-s); }

/* ══════════════════ Cómo leer ══════════════════ */
.lectura {
  margin-top: 1.5rem;
}
/* ══════════════════ Pie ══════════════════ */
.pie {
  max-width: 1400px; margin: 3rem auto 0;
  padding: 0 clamp(1rem, 4vw, 2.5rem) 3rem;
}
.pie p { font-size: .82rem; color: var(--gris); line-height: 1.6; }
.pie b { color: var(--tinta); }

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════════ */

/* iPad y tablets: el resumen pasa debajo del mapa */
@media (max-width: 1080px) {
  .rejilla { grid-template-columns: 1fr; }
  #map { height: min(62vh, 540px); }
  .costado { flex-direction: row; flex-wrap: wrap; }
  .tarjeta { flex: 1 1 320px; }
}

/* Tablet estrecha */
@media (max-width: 820px) {
  body { font-size: 16px; }
  .controles-fila { gap: 1rem; }
  .control-crece { flex-basis: 100%; }
  .cta { flex-direction: column; align-items: stretch; }
  .cta .boton { width: 100%; }
}

/* Teléfono */
@media (max-width: 620px) {
  .cabecera-fila { padding: .6rem 1rem; gap: .6rem; }
  .marca img { height: 34px; }
  .marca-txt b { font-size: .92rem; }
  .marca-txt em { font-size: .64rem; }
  .tabs { margin-left: auto; width: auto; }
  .tabs button { padding: .5rem .85rem; font-size: .82rem; }

  .titular { letter-spacing: -.03em; max-width: 100%; }
  .entradilla { margin-top: 1.2rem; }
  .cintillo i { width: 100%; }
  .cintillo { gap: 2px; }

  .controles { padding: 1rem; }
  .controles-fila { flex-direction: column; align-items: stretch; gap: .9rem; }
  .control { width: 100%; }
  .seg { width: 100%; }
  .seg button { flex: 1 1 0; padding: .55rem .4rem; }

  #map { height: 66vh; min-height: 380px; }
  .leyenda {
    max-width: none; left: 8px; right: 8px; bottom: 50px;
    font-size: .7rem; padding: .6rem .7rem;
  }
  .leyenda-item { margin-bottom: .12rem; }

  .solo-raton { display: none; }
  .solo-tacto { display: inline; }

  .costado { flex-direction: column; }
  .zona-val { font-size: 1.35rem; }
  .cifras { grid-template-columns: 1fr 1fr; }
  .cifra { padding: 1.1rem 1rem; }
}

@media (max-width: 380px) {
  .cifras { grid-template-columns: 1fr; }
  .tabs button { padding: .5rem .7rem; font-size: .78rem; }
}

/* Pantallas táctiles: sin estados de hover fantasma */
@media (hover: none) {
  .solo-raton { display: none; }
  .solo-tacto { display: inline; }
  .boton:hover, .seg button:hover { background: inherit; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 1ms !important; animation-duration: 1ms !important; }
  html { scroll-behavior: auto; }
}

@media print {
  .cabecera, .controles, .mapa-pie, .cta, .saltar { display: none !important; }
  .panel.oculto { display: block !important; }
  .rejilla { grid-template-columns: 1fr; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}