/* =========================================================
   Así Vamos · Estado de la Nación — diseño "glass"
   ========================================================= */
:root{
  --text:#f2f5fa; --muted:#bccade; --accent:#7cc4ee;
  --royal:#1c3f9e; --ok:#3fbf7f; --mal:#ff8a80;
  /* Luz uniforme de borde a borde desde la línea superior */
  --brillo:linear-gradient(to bottom, rgba(124,196,238,.18) 0%, rgba(124,196,238,.05) 35%, transparent 70%);
  --foto-capa:linear-gradient(transparent,transparent);
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  min-height:100vh; color:var(--text);
  font-family:"Barlow Semi Condensed","Segoe UI",Roboto,Arial,sans-serif;
  background:var(--foto-capa),#0b0e14; /* Tono Grafito Tech Neutro */
  background-attachment:fixed;
  overflow-x:hidden;
}
.field{position:fixed;inset:0;pointer-events:none}
.field svg{width:100%;height:100%;display:block}

.page{position:relative;max-width:1000px;margin:0 auto;padding:14px 20px 40px}

/* ---------- Encabezado ---------- */
header{text-align:center;margin-bottom:20px}
h1{margin:0;font-size:26px;line-height:1.1}
header p{margin:4px 0 0;color:var(--muted);font-size:13px}

/* "A" hecha con SVG: apoyada en la línea base, escala con el tamaño de letra */
.a-logo{
  display:inline-block;
  height:.7em;          /* altura de mayúscula de Barlow */
  width:.56em;
  vertical-align:baseline;
  margin-right:.03em;
  fill:var(--mal);      /* roja */
}
.letra-v{ color:var(--ok); }  /* Verde */

.tag{
  font-size:11px; font-weight:400; color:var(--muted);
  letter-spacing:.2em; margin-left:8px; vertical-align:middle;
  display:inline-flex; align-items:center; gap:5px;
}
.col-flag{display:inline-block;width:14px;height:10px;border-radius:1px;overflow:hidden;
  vertical-align:middle;box-shadow:0 0 2px rgba(0,0,0,.3)}
.col-flag span{display:block;width:100%}
.col-flag .yellow{height:50%;background:#ffcc00}
.col-flag .blue{height:25%;background:#0033a0}
.col-flag .red{height:25%;background:#ce1126}

/* ---------- Vidrio reutilizable ---------- */
.glass{
  background:var(--brillo),linear-gradient(135deg,rgba(255,255,255,.03),rgba(255,255,255,0));
  -webkit-backdrop-filter:blur(0) saturate(1.4);
  backdrop-filter:blur(0) saturate(1.4);
  border:1px solid rgba(255,255,255,.12);
  border-top:6px solid var(--royal);
  box-shadow:0 20px 50px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
  border-radius:4px;
}
.card.mejoro{
  /* Resplandor VERDE parejo de borde a borde cayendo en vertical */
  background: linear-gradient(to bottom, rgba(63, 191, 127, 0.32) 0%, rgba(63, 191, 127, 0.08) 40%, transparent 75%),
              linear-gradient(135deg,rgba(63,191,127,.12),rgba(11,14,20,0) 80%);
  border-top-color:var(--ok);
}
.card.empeoro{
  /* Resplandor ROJO parejo de borde a borde cayendo en vertical */
  background: linear-gradient(to bottom, rgba(255, 138, 128, 0.32) 0%, rgba(255, 138, 128, 0.08) 40%, transparent 75%),
              linear-gradient(135deg,rgba(255,138,128,.12),rgba(11,14,20,0) 80%);
  border-top-color:var(--mal);
}

/* ---------- Tarjetas ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.card{padding:24px 20px 22px;position:relative;overflow:hidden;min-width:0}
.card h2{margin:0;font-size:17px;font-weight:600}
.card .sub{font-size:11.5px;color:var(--muted);margin-top:2px;letter-spacing:.02em}
.card .sub::before{content:"Fuente: "}
.card .mes{font-size:19px;color:var(--muted);margin-top:18px;text-align:center}
.est{font-weight:600}
.card.mejoro .est{color:var(--ok)}
.card.empeoro .est{color:var(--mal)}

.val{font-size:42px;font-weight:700;line-height:1;margin:6px 0 6px;text-align:center}
.prev{display:block;width:max-content;margin:4px auto 0;font-size:16.5px;padding:3px 10px;
  border-radius:4px;background:rgba(255,255,255,.13);color:#dbe5f3}

/* ---------- Gráfica ---------- */
.chart{position:relative;margin-top:26px}
.spark{display:block;width:100%;height:84px;margin:0}
.dot{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--accent);transform:translate(-50%,-50%)}
.dot.cur{width:9px;height:9px;box-shadow:0 0 0 3px rgba(124,196,238,.28)}
.mm{position:absolute;font-size:10.5px;font-weight:600;color:#dbe8f7;white-space:nowrap;line-height:1}
.axis{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:2px}

/* ---------- Publicidad (un solo espacio) ---------- */
.sponsors{margin-top:26px}
.ad-wrap[hidden],.sp[hidden]{display:none}
.ad-label{font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); opacity:.85; margin:0 0 4px 2px}
/* Web/tablet: ocupa el ancho de las 3 tarjetas (banner 970x90) */
.sp{
  position:relative; overflow:hidden; width:100%; aspect-ratio:970/90;
  background:rgba(15,22,35,.6);
  box-shadow:0 0 0 1px rgba(255,255,255,.18);
}
.sp a,.sp picture{display:block;width:100%;height:100%}
.sp img{display:block;width:100%;height:100%;object-fit:fill;border:0}

/* Celular: banner 320x100 (el alto que ocupaban los dos anteriores) */
@media (max-width:767px), (max-width:850px) and (orientation:portrait){
  .sp{max-width:320px; aspect-ratio:320/100; margin:0 auto}
}

footer{margin-top:34px;text-align:center;color:var(--muted);font-size:13px}

/* =========================================================
   CELULAR (vertical)
   ========================================================= */
@media (max-width:600px) and (orientation:portrait){
  html,body{height:100%}
  body{overflow:hidden}
  .page{
    height:100dvh; max-width:none; padding:8px 10px 6px;
    display:flex; flex-direction:column; gap:6px;
  }
  header{margin:0}
  h1{font-size:20px}
  .tag{font-size:9px;margin-left:6px}
  header p{font-size:11px;margin:2px 0 0}

  .grid{
    flex:1 1 0; min-height:0; gap:8px;
    grid-template-columns:1fr;
    grid-template-rows:repeat(3,minmax(96px,1fr));
  }
  .card{
    border-top:1px solid rgba(255,255,255,.16);
    border-left:6px solid var(--royal);
    padding:10px 12px 8px 10px;
    display:grid;
    /* Izquierda (50%): serie con título "6 meses". Derecha (50%): mes-estado, cifra y anterior apilados */
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-rows:auto auto minmax(0,1fr) auto;
    grid-template-areas:
      "titulo  titulo"
      "stit    mes"
      "grafica valor"
      "eje     previo";
    column-gap:12px; align-items:stretch;
  }
  .card.mejoro{
    border-top-color:rgba(255,255,255,.16);
    border-left-color:var(--ok);
    background: linear-gradient(to bottom, rgba(63, 191, 127, 0.32) 0%, rgba(63, 191, 127, 0.08) 40%, transparent 75%),
                linear-gradient(135deg,rgba(63,191,127,.12),rgba(11,14,20,0) 80%);
  }
  .card.empeoro{
    border-top-color:rgba(255,255,255,.16);
    border-left-color:var(--mal);
    background: linear-gradient(to bottom, rgba(255, 138, 128, 0.32) 0%, rgba(255, 138, 128, 0.08) 40%, transparent 75%),
                linear-gradient(135deg,rgba(255,138,128,.12),rgba(11,14,20,0) 80%);
  }
  .card::after{
    content:"6 meses"; grid-area:stit; align-self:center; text-align:center;
    font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
  }
  .head{
    grid-area:titulo; min-width:0;
    display:flex; align-items:baseline; gap:5px;
  }
  .card h2{font-size:15px;line-height:1.1;white-space:nowrap;flex:none}
  .card .sub{
    margin:0; font-size:10px; min-width:0;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .card .sub::before{content:"/ Fuente: ";margin-right:2px;opacity:.7}
  .card .mes{
    grid-area:mes; margin:0; font-size:18.5px; line-height:1.1; text-align:center;
    display:flex; flex-direction:column; justify-content:center; align-items:center;
  }
  .card .mes .sep{display:none}
  .val{
    grid-area:valor; margin:0; min-width:0; font-size:clamp(28px,min(5.4dvh,11vw),44px);
    display:flex; align-items:center; justify-content:center;
  }
  .prev{grid-area:previo;margin:0;justify-self:center;font-size:15.5px;padding:3px 8px;max-width:100%;white-space:nowrap}
  .chart{grid-area:grafica;margin:6px 12px 0;min-height:0}
  .spark{height:100%}
  .axis{grid-area:eje;font-size:10px;margin:0 12px;align-self:end;padding:0}

  .sponsors{flex:0 0 auto; margin:0}
  .ad-label{font-size:9px;margin-bottom:3px;text-align:center}

  footer{margin:0;font-size:10px;line-height:1.2}
}

/* =========================================================
   TABLET VERTICAL: 3 en fila
   ========================================================= */
@media (min-width:601px) and (max-width:1100px) and (orientation:portrait){
  .page{max-width:820px;padding:18px 24px 40px}
  .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .card{padding:26px 18px 24px}
  .val{font-size:44px}
  .chart{margin-top:30px}
  .spark{height:96px}
}

/* =========================================================
   TABLET HORIZONTAL: las 3 en una fila (como web)
   ========================================================= */
@media (min-width:601px) and (max-width:1100px) and (min-height:500px) and (orientation:landscape){
  .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  .card{padding:22px 16px 20px}
  .card h2{font-size:16px}
  .val{font-size:clamp(34px,4.2vw,42px)}
  .prev{font-size:15px}
}

/* =========================================================
   WEB: cards con el ancho de antes (226px), 3 centradas.
   Va al final para ganar sobre las reglas de tablet.
   La publicidad iguala el ancho total de las 3 cards.
   ========================================================= */
@media (min-width:901px){
  .grid{grid-template-columns:repeat(3,226px) !important; justify-content:center; gap:18px !important}
  .card{padding:24px 20px 22px !important}
  .sponsors{max-width:714px; margin-left:auto; margin-right:auto}
}