/* =============================================================================
   Grupo Ibal — sistema de diseño
   Dirección fijada por JAE y Omar (2026-09-18). El logo es el único activo
   intocable; todo lo demás se construye a partir de estos tokens.

   Sin `style=` en el HTML y sin `<script>` inline: la CSP de las apps propias
   del estudio los prohíbe. Todo el color vive aquí.
   ========================================================================== */

/* --- Tipografía autoalojada (nada sale a fonts.gstatic.com) ---------------- */
@font-face{font-family:'Poppins';src:url('../fonts/Poppins-500-latin.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';src:url('../fonts/Poppins-600-latin.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('../fonts/Poppins-700-latin.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('../fonts/Poppins-500-latin-ext.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0100-02AF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF}
@font-face{font-family:'Nunito Sans';src:url('../fonts/NunitoSans-400-latin.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Nunito Sans';src:url('../fonts/NunitoSans-600-latin.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Nunito Sans';src:url('../fonts/NunitoSans-400-latin-ext.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02AF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF}

:root{
  /* --- Marca ------------------------------------------------------------- */
  --gi-verde:        #27A854;   /* primario — muestreado del propio logo (el encargo decía #27A855) */
  --gi-verde-oscuro: #0D3D1F;   /* acento oscuro */
  --gi-verde-claro:  #E8F5EC;   /* lavado para fondos de apoyo */

  /* --- Neutros ----------------------------------------------------------- */
  --gi-fondo:        #F7F9F8;
  --gi-texto:        #1A1F1C;
  --gi-texto-suave:  #55605A;
  --gi-linea:        #DDE4E0;

  /* --- Superficie "papel técnico" ---------------------------------------- */
  --gi-tecnico:      #10161A;
  --gi-tecnico-2:    #182126;   /* un paso por encima, para tarjetas */
  --gi-rejilla:      rgba(255,255,255,.055);
  --gi-cota:         rgba(255,255,255,.72);  /* cotas y guías sobre oscuro */
  --gi-cota-suave:   rgba(255,255,255,.34);
  --gi-tinta-inv:    #E9EFEC;
  --gi-agua:         #3FA7E0;   /* circuito hidráulico: el agua no es verde */

  /* --- Series del gráfico de balance -------------------------------------
     Paleta VALIDADA con el comprobador de daltonismo sobre #10161A:
     banda de luminosidad, suelo de croma, separación CVD, suelo de visión
     normal y contraste. Las seis pasan.
     El encargo pedía el consumo en rojo: rojo contra el verde de marca da
     ΔE 2.0 en deuteranopía (indistinguibles). El magenta conserva la lectura
     de "alerta/demanda" y sí se separa. Ver NOTAS-DISENO.md.               */
  --gi-fv:           #BB7F08;   /* producción fotovoltaica  — ámbar */
  --gi-consumo:      #D6409F;   /* consumo                  — magenta */
  --gi-bat-carga:    #27A854;   /* batería cargando (+)     — verde de marca */
  --gi-bat-descarga: #B5651D;   /* batería descargando (−)  — canela */
  /* Bandas de tarifa 2.0TD: fondo, no serie. Nunca compiten con los datos. */
  --gi-punta:        rgba(214,64,159,.10);
  --gi-llano:        rgba(255,255,255,.045);
  --gi-valle:        rgba(39,168,85,.09);

  /* --- Tipografía --------------------------------------------------------- */
  --gi-titular: 'Poppins', system-ui, sans-serif;
  --gi-cuerpo:  'Nunito Sans', system-ui, sans-serif;

  /* Escala modular 1.25 sobre 17px, fluida entre móvil y escritorio */
  --gi-t-xs:  .8125rem;
  --gi-t-s:   .9375rem;
  --gi-t-m:   clamp(1.0rem, .97rem + .16vw, 1.0625rem);
  --gi-t-l:   clamp(1.25rem, 1.18rem + .34vw, 1.4rem);
  --gi-t-xl:  clamp(1.6rem, 1.42rem + .9vw, 2.1rem);
  --gi-t-2xl: clamp(2.1rem, 1.7rem + 2vw, 3.3rem);

  --gi-medida: 68ch;            /* longitud de línea cómoda */
  --gi-radio:  10px;
  --gi-gutter: clamp(1rem, .6rem + 2vw, 2.5rem);
}

body{
  background:var(--gi-fondo);
  color:var(--gi-texto);
  font-family:var(--gi-cuerpo);
  font-size:var(--gi-t-m);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.gi-titular{
  font-family:var(--gi-titular);
  font-weight:600;
  line-height:1.15;
  letter-spacing:-.015em;
  color:var(--gi-texto);
}
h1{font-size:var(--gi-t-2xl);font-weight:700}
h2{font-size:var(--gi-t-xl)}
h3{font-size:var(--gi-t-l)}
p{max-width:var(--gi-medida)}
a{color:var(--gi-verde-oscuro);text-underline-offset:.18em}
a:hover{color:var(--gi-verde)}

/* --- Superficie técnica: fondo oscuro con rejilla de papel milimetrado ----- */
.gi-tecnico{
  background-color:var(--gi-tecnico);
  background-image:
    linear-gradient(var(--gi-rejilla) 1px, transparent 1px),
    linear-gradient(90deg, var(--gi-rejilla) 1px, transparent 1px);
  background-size:32px 32px, 32px 32px;
  color:var(--gi-tinta-inv);
}
.gi-tecnico h2,.gi-tecnico h3{color:#fff}
.gi-tecnico p{color:rgba(233,239,236,.82)}

/* --- Botones -------------------------------------------------------------- */
.gi-cta{
  display:inline-block;font-family:var(--gi-titular);font-weight:600;
  font-size:var(--gi-t-s);letter-spacing:.01em;
  padding:.85em 1.6em;border-radius:var(--gi-radio);
  text-decoration:none;border:2px solid transparent;transition:.18s ease;
}
.gi-cta--primario{background:var(--gi-verde);color:#fff}
.gi-cta--primario:hover{background:var(--gi-verde-oscuro);color:#fff}
.gi-cta--fantasma{border-color:rgba(255,255,255,.45);color:#fff}
.gi-cta--fantasma:hover{border-color:#fff;background:rgba(255,255,255,.08);color:#fff}

/* Tercera variante (2026-09-25): secundario SOBRE CLARO. El fantasma solo
   funciona sobre fondo oscuro —su borde y su texto son blancos—, así que la
   barra fija de móvil de la página ADER, que va sobre fondo claro, necesitaba
   una variante propia. Documentada en NOTAS-DISENO.md. */
.gi-cta--claro{border-color:var(--gi-verde-oscuro);color:var(--gi-verde-oscuro);background:transparent}
.gi-cta--claro:hover{background:var(--gi-verde-claro);color:var(--gi-verde-oscuro)}

/* Foco visible siempre: el teclado no es un caso raro */
a:focus-visible,button:focus-visible,.gi-cta:focus-visible{
  outline:3px solid var(--gi-verde);outline-offset:3px;border-radius:4px;
}