/* ==========================================================================
   Programa de ayudas (plantilla ayuda.php) — primera: Eguzki Hotz (29/10)
   Boceto por bloques aprobado por Omar. El contenido vive en la BD (HTML con
   clases gi-ayuda__*, escrito por el paquete); aquí, todo lo visual.

   Decisiones de Omar (29/10):
   - TODOS los colores, en el bloque de tokens de abajo, y en ningún otro
     sitio de esta hoja. Reutilizan los de tokens.css cuando son equivalentes.
     Los tres nuevos: el verde de texto y botón (#1E7F3F; el blanco sobre el
     verde de marca da 3,08:1 y no pasa AA), su hover y el tinte (#EEF8F1:
     con --gi-verde-claro el verde de texto se queda en 4,49:1), más el
     antetítulo sobre la franja oscura.
   - Radios y contenedor, los de ADER y NOTAS-DISENO.md: 2 px en tarjetas,
     10 px en botones, 1180 px de ancho. Botones: .gi-cta + clase propia.
   - Sin sombras (NOTAS-DISENO.md: «borde, no sombra»).

   Deuda (ESTADO.md): las pautas de ADER (antetítulo, seis pasos, preguntas
   con <details>, barra de móvil, secciones a sangre) se repiten aquí en vez
   de compartirse; extraerlas a común exigiría tocar ADER.

   Sin `style=` y sin `<script>` inline (regla del proyecto).
   ========================================================================== */

/* --- Tokens: el único sitio con colores ----------------------------------- */
.gi-ayuda{
  --ay-verde-marca:   var(--gi-verde);         /* #27A854 — solo iconos y filetes decorativos */
  --ay-verde:         #1E7F3F;                 /* texto, botón y puntos de los plazos (4,77:1 sobre gris) */
  --ay-verde-hover:   #17652F;                 /* hover del botón: 7,15:1 */
  --ay-tinte:         #EEF8F1;                 /* portada y tarjeta «No» */
  --ay-gris:          var(--gi-fondo);         /* #F7F9F8 — secciones alternas */
  --ay-borde:         var(--gi-linea);         /* #DDE4E0 ≈ #E3E8E4 del boceto */
  --ay-oscuro:        var(--gi-verde-oscuro);  /* #0D3D1F ≈ #143D24 del boceto */
  --ay-antetitulo-osc:#9FDBB2;                 /* antetítulo sobre la franja: 7,77:1 */
  --ay-texto:         var(--gi-texto);
  --ay-texto-2:       var(--gi-texto-suave);   /* 6,03:1 sobre el tinte */
  --ay-blanco:        #FFFFFF;
  --ay-barra-fondo:   rgba(247,249,248,.96);   /* barra de móvil, como la de ADER */
  --ay-borde-osc:     rgba(255,255,255,.55);   /* recuadro «¿Es una empresa?» sobre el panel oscuro: ≥3:1 (medido) */
  --ay-borde-campo:   rgba(16,22,26,.5);       /* borde de los campos del formulario: 3,4:1 sobre blanco (NOTAS-DISENO, «borde medido») */

  /* Medidas (NOTAS-DISENO.md y ADER) */
  --ay-radio:         2px;
  --ay-radio-boton:   var(--gi-radio);         /* 10px */
  --ay-ancho:         1180px;
  --ay-seccion:       clamp(2.75rem, 2rem + 3vw, 4.5rem);   /* 72 px en escritorio */
  --ay-hueco:         clamp(1rem, .6rem + 1.4vw, 1.75rem);
  --ay-icono:         2.5rem;
}

/* --- Marco: a sangre, como .gi-ader -------------------------------------- */
body.page-template-ayuda{overflow-x:clip}
.gi-ayuda{
  width:100vw;min-width:100vw;margin-left:calc(50% - 50vw);
  color:var(--ay-texto);background:var(--ay-blanco);
}
.gi-ayuda__int{
  max-width:var(--ay-ancho);margin-inline:auto;
  padding-inline:max(1.25rem, var(--gi-gutter));
}
.gi-ayuda section{
  padding-block:var(--ay-seccion);
  scroll-margin-top:calc(var(--gi-alto-cabecera, 101px) + 12px);
}
.gi-ayuda p{max-width:68ch}
.gi-ayuda h2{
  font-family:var(--gi-titular);font-size:var(--gi-t-xl);font-weight:600;
  color:var(--ay-oscuro);margin:0 0 .75rem;text-wrap:balance;
}
.gi-ayuda h3{
  font-family:var(--gi-titular);font-size:var(--gi-t-m);font-weight:600;
  color:var(--ay-texto);margin:0 0 .4rem;line-height:1.3;
}
.gi-ayuda__subtitulo{color:var(--ay-texto-2);margin:0 0 2rem;font-size:var(--gi-t-m)}
.gi-ayuda__antetitulo{
  font-family:var(--gi-titular);font-size:var(--gi-t-xs);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ay-verde);
  margin:0 0 .75rem;
}
.gi-ayuda__nota{font-size:var(--gi-t-s);color:var(--ay-texto-2);margin:1.5rem 0 0}
.gi-ayuda__gris{background:var(--ay-gris)}
/* Solo para lectores de pantalla (títulos de sección sin título visible). */
.gi-ayuda__oculto{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}

/* Enlaces del texto: subrayados. El estilo general del sitio no los distingue
   del texto (1,36:1, sin subrayado; pendiente del tema, ESTADO.md); aquí sí. */
.gi-ayuda a{color:var(--ay-verde);text-decoration:underline;text-underline-offset:.18em}
.gi-ayuda a:hover{color:var(--ay-verde-hover)}
/* Foco: el verde de marca sobre el tinte o el gris no llega a 3:1. */
.gi-ayuda a:focus-visible,.gi-ayuda summary:focus-visible{
  outline:3px solid var(--ay-verde);outline-offset:3px;border-radius:4px;
}

/* --- Rejillas: se apilan en móvil ------------------------------------------- */
.gi-ayuda__rejilla{
  list-style:none;margin:0;padding:0;display:grid;gap:var(--ay-hueco);
}
.gi-ayuda__rejilla--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.gi-ayuda__rejilla--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.gi-ayuda__rejilla--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:64rem){
  .gi-ayuda__rejilla--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:48rem){
  .gi-ayuda__rejilla--2,.gi-ayuda__rejilla--3{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:36rem){
  .gi-ayuda__rejilla--4{grid-template-columns:minmax(0,1fr)}
}

/* --- Tarjeta base: borde fino, sin sombra ----------------------------------- */
.gi-ayuda__tarjeta{
  background:var(--ay-blanco);border:1px solid var(--ay-borde);
  border-radius:var(--ay-radio);padding:clamp(1.25rem,1rem + 1vw,1.75rem);
}
.gi-ayuda__tarjeta p{margin:0;color:var(--ay-texto-2)}

/* --- Iconos: SVG del tema como máscara, coloreados aquí -------------------- */
.gi-ayuda__icono{
  display:block;width:var(--ay-icono);height:var(--ay-icono);margin:0 0 .9rem;
  background-color:var(--ay-verde-marca);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
}
.gi-ayuda__icono--autonomia{-webkit-mask-image:url('../img/ayuda/autonomia.svg');mask-image:url('../img/ayuda/autonomia.svg')}
.gi-ayuda__icono--calor{-webkit-mask-image:url('../img/ayuda/calor.svg');mask-image:url('../img/ayuda/calor.svg')}
.gi-ayuda__icono--emisiones{-webkit-mask-image:url('../img/ayuda/emisiones.svg');mask-image:url('../img/ayuda/emisiones.svg')}
.gi-ayuda__icono--autoconsumo{-webkit-mask-image:url('../img/ayuda/autoconsumo.svg');mask-image:url('../img/ayuda/autoconsumo.svg')}
.gi-ayuda__icono--ampliacion{-webkit-mask-image:url('../img/ayuda/ampliacion.svg');mask-image:url('../img/ayuda/ampliacion.svg')}
.gi-ayuda__icono--bateria{-webkit-mask-image:url('../img/ayuda/bateria.svg');mask-image:url('../img/ayuda/bateria.svg')}
.gi-ayuda__icono--climatizacion{-webkit-mask-image:url('../img/ayuda/climatizacion.svg');mask-image:url('../img/ayuda/climatizacion.svg')}
.gi-ayuda__icono--hogar{-webkit-mask-image:url('../img/ayuda/hogar.svg');mask-image:url('../img/ayuda/hogar.svg')}
.gi-ayuda__icono--industria{-webkit-mask-image:url('../img/ayuda/industria.svg');mask-image:url('../img/ayuda/industria.svg')}
.gi-ayuda__icono--comercio{-webkit-mask-image:url('../img/ayuda/comercio.svg');mask-image:url('../img/ayuda/comercio.svg')}
.gi-ayuda__icono--equipamiento{-webkit-mask-image:url('../img/ayuda/equipamiento.svg');mask-image:url('../img/ayuda/equipamiento.svg')}

/* --- Botones: .gi-cta (tokens.css) + clase propia --------------------------- */
.gi-ayuda .gi-cta.gi-ayuda__boton{
  border-radius:var(--ay-radio-boton);min-height:44px;
  display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;text-align:center;
}
.gi-ayuda .gi-ayuda__boton--principal{background:var(--ay-verde);color:var(--ay-blanco)}
.gi-ayuda .gi-ayuda__boton--principal:hover{background:var(--ay-verde-hover);color:var(--ay-blanco)}
.gi-ayuda .gi-ayuda__boton--secundario{border-color:var(--ay-verde);color:var(--ay-verde);background:transparent}
.gi-ayuda .gi-ayuda__boton--secundario:hover{background:var(--ay-blanco);color:var(--ay-verde-hover)}
.gi-ayuda .gi-ayuda__boton--blanco{background:var(--ay-blanco);color:var(--ay-oscuro)}
.gi-ayuda .gi-ayuda__boton--blanco:hover{background:var(--ay-tinte);color:var(--ay-oscuro)}
.gi-ayuda .gi-ayuda__boton--contorno{border-color:var(--ay-blanco);color:var(--ay-blanco);background:transparent}
/* Hover de contorno: el verde del hover, no un velo blanco (con velo, 3,89:1; Omar, 29/10). */
.gi-ayuda .gi-ayuda__boton--contorno:hover{background:var(--ay-verde-hover);color:var(--ay-blanco)}
.gi-ayuda__acciones{
  display:flex;flex-wrap:wrap;align-items:center;gap:.9rem;
  margin:1.75rem 0 0;max-width:none;
}

/* --- 1 · Portada ------------------------------------------------------------- */
.gi-ayuda .gi-ayuda__portada{background:var(--ay-tinte)}
.gi-ayuda__portada-rejilla{
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(2rem,1.5rem + 3vw,4rem);align-items:center;
}
.gi-ayuda__portada h1{
  font-family:var(--gi-titular);font-size:var(--gi-t-2xl);font-weight:700;
  line-height:1.08;color:var(--ay-oscuro);margin:0;text-wrap:balance;
}
.gi-ayuda__entradilla{
  font-size:var(--gi-t-l);line-height:1.5;color:var(--ay-texto);margin:1.25rem 0 0;max-width:52ch;
}
.gi-ayuda__datos{
  background:var(--ay-blanco);border:1px solid var(--ay-borde);
  border-radius:var(--ay-radio);padding:clamp(1.25rem,1rem + 1.2vw,2rem);
}
.gi-ayuda__datos h2{font-size:var(--gi-t-l);margin:0 0 1rem}
.gi-ayuda__datos dl{margin:0}
.gi-ayuda__dato{padding:.75rem 0;border-top:1px solid var(--ay-borde)}
.gi-ayuda__dato dt{font-size:var(--gi-t-s);color:var(--ay-texto-2)}
.gi-ayuda__dato dd{
  margin:.15rem 0 0;font-family:var(--gi-titular);font-weight:600;
  font-size:var(--gi-t-m);color:var(--ay-texto);
}
.gi-ayuda__dato--destacado dd{font-size:var(--gi-t-xl);color:var(--ay-verde);line-height:1.15}
.gi-ayuda__datos-pie{
  font-size:var(--gi-t-xs);color:var(--ay-texto-2);margin:1rem 0 0;
  padding-top:.75rem;border-top:1px solid var(--ay-borde);
}
@media (max-width:64rem){
  .gi-ayuda__portada-rejilla{grid-template-columns:minmax(0,1fr)}
}

/* --- 2 · Objetivos ------------------------------------------------------------- */
.gi-ayuda .gi-ayuda__objetivos{border-bottom:1px solid var(--ay-borde)}
.gi-ayuda__objetivo p{margin:0;color:var(--ay-texto-2)}

/* --- 3 · Qué se puede subvencionar ------------------------------------------- */
.gi-ayuda__actuacion{display:flex;flex-direction:column}
.gi-ayuda__actuacion > p{flex:1 1 auto}
.gi-ayuda__enlaces{
  margin:1rem 0 0 !important;padding-top:.75rem;border-top:1px solid var(--ay-borde);
  font-family:var(--gi-titular);font-weight:600;font-size:var(--gi-t-s);
}
/* Objetivo táctil de 44 px en los enlaces sueltos de las tarjetas: con
   relleno y no con inline-flex, para que la flecha siga al texto cuando el
   enlace parte en dos líneas. */
.gi-ayuda__enlaces a{display:inline-block;padding-block:.75rem}
.gi-ayuda__enlaces a::after{content:"\00a0\2192"}

/* --- 4 · ¿Necesito paneles solares? --------------------------------------------- */
.gi-ayuda__respuesta{border-radius:var(--ay-radio);padding:clamp(1.5rem,1.2rem + 1.4vw,2.25rem)}
.gi-ayuda__respuesta h3{font-size:var(--gi-t-l);margin:.9rem 0 .5rem}
.gi-ayuda__respuesta p{margin:0;color:var(--ay-texto)}
.gi-ayuda__respuesta--si{background:var(--ay-blanco);border:2px solid var(--ay-verde)}
.gi-ayuda__respuesta--no{background:var(--ay-tinte);border:1px solid var(--ay-borde)}
.gi-ayuda__distintivo{
  display:inline-block;font-family:var(--gi-titular);font-weight:700;
  font-size:var(--gi-t-s);letter-spacing:.04em;line-height:1;
  padding:.45em .9em;border-radius:var(--ay-radio-boton);margin:0 !important;
  border:2px solid var(--ay-verde);
}
.gi-ayuda__distintivo--si{background:var(--ay-verde);color:var(--ay-blanco) !important}
.gi-ayuda__distintivo--no{background:transparent;color:var(--ay-verde) !important}

/* --- 5 · A quién va dirigida ---------------------------------------------------- */
.gi-ayuda__destinatario{display:flex;flex-direction:column;align-items:flex-start}
.gi-ayuda__destinatario h3{margin:0}

/* --- 6 · Antes de firmar: franja oscura ------------------------------------------- */
.gi-ayuda .gi-ayuda__firmar{background:var(--ay-oscuro);color:var(--ay-blanco)}
.gi-ayuda__firmar h2{color:var(--ay-blanco)}
.gi-ayuda__firmar .gi-ayuda__antetitulo{color:var(--ay-antetitulo-osc)}
.gi-ayuda__firmar .gi-ayuda__tarjeta h3{font-size:var(--gi-t-l)}
.gi-ayuda__firmar .gi-ayuda__tarjeta p{color:var(--ay-texto)}
.gi-ayuda__firmar .gi-ayuda__tarjeta strong{color:var(--ay-oscuro)}
.gi-ayuda__firmar .gi-ayuda__cierre-texto{
  color:var(--ay-blanco);font-family:var(--gi-titular);font-weight:600;
  margin:1.75rem 0 0;max-width:none;
}
.gi-ayuda__firmar a:focus-visible{outline-color:var(--ay-blanco)}

/* --- 7 · Cuánto puede cubrir ------------------------------------------------------ */
.gi-ayuda__cifra-hasta{font-size:var(--gi-t-s);color:var(--ay-texto-2);margin:0 !important}
.gi-ayuda__cifra-dato{
  font-family:var(--gi-titular);font-variant-numeric:tabular-nums;font-weight:700;
  font-size:clamp(2.2rem,1.8rem + 1.8vw,3rem);line-height:1.05;letter-spacing:-.02em;
  color:var(--ay-verde) !important;margin:.1rem 0 .5rem !important;
}
.gi-ayuda__cifra-etiqueta{
  font-family:var(--gi-titular);font-weight:600;color:var(--ay-texto) !important;
}
.gi-ayuda__cifra-detalle{font-size:var(--gi-t-s);margin-top:.35rem !important}

/* --- 8 · Plazos: línea de tiempo horizontal, vertical en móvil ------------------- */
.gi-ayuda__plazos{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--ay-hueco);
  position:relative;
}
.gi-ayuda__hito{position:relative;padding-top:2.25rem}
/* La línea: un tramo por hito, del punto al siguiente. */
.gi-ayuda__hito::before{
  content:"";position:absolute;top:.6rem;left:0;right:calc(-1 * var(--ay-hueco));
  border-top:2px solid var(--ay-borde);
}
.gi-ayuda__hito:last-child::before{right:0}
.gi-ayuda__hito::after{
  content:"";position:absolute;top:0;left:0;width:1.2rem;height:1.2rem;
  border-radius:50%;background:var(--ay-verde);border:3px solid var(--ay-gris);
  box-sizing:border-box;
}
/* Punto hueco: «Hasta agotar» no es una fecha. */
.gi-ayuda__hito--hueco::after{background:var(--ay-gris);border:2px solid var(--ay-verde)}
.gi-ayuda__hito-fecha{
  font-family:var(--gi-titular);font-weight:700;font-size:var(--gi-t-l);
  color:var(--ay-verde);margin:0 0 .35rem;line-height:1.2;
}
.gi-ayuda__hito h3{margin:0 0 .3rem}
.gi-ayuda__hito p{margin:0;color:var(--ay-texto-2);font-size:var(--gi-t-s)}
.gi-ayuda__hito .gi-ayuda__hito-fecha{font-size:var(--gi-t-l);color:var(--ay-verde)}
@media (max-width:48rem){
  .gi-ayuda__plazos{grid-template-columns:minmax(0,1fr);gap:0}
  .gi-ayuda__hito{padding:0 0 1.75rem 2.25rem}
  .gi-ayuda__hito::before{
    top:0;bottom:0;left:.6rem;right:auto;border-top:0;
    border-left:2px solid var(--ay-borde);transform:translateX(-1px);
  }
  .gi-ayuda__hito:last-child::before{bottom:auto;height:1.2rem}
}

/* --- 9 · Cómo trabajamos: seis pasos, tres por dos ------------------------------------ */
.gi-ayuda__pasos{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--ay-hueco);
}
.gi-ayuda__paso{
  background:var(--ay-blanco);border:1px solid var(--ay-borde);
  border-left:3px solid var(--ay-verde-marca);border-radius:var(--ay-radio);
  padding:clamp(1rem,.8rem + .6vw,1.35rem);
  display:flex;align-items:baseline;gap:.9rem;
}
.gi-ayuda__paso-num{
  font-family:var(--gi-titular);font-variant-numeric:tabular-nums;font-weight:700;
  font-size:var(--gi-t-l);line-height:1;color:var(--ay-verde);flex:none;
}
.gi-ayuda__paso h3{margin:0}
@media (max-width:48rem){ .gi-ayuda__pasos{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:36rem){ .gi-ayuda__pasos{grid-template-columns:minmax(0,1fr)} }

/* --- 10 · Preguntas frecuentes: <details>, sin JS ---------------------------------- */
.gi-ayuda__faqs{max-width:880px}
.gi-ayuda__faq{border-bottom:1px solid var(--ay-borde)}
.gi-ayuda__faq:first-child{border-top:1px solid var(--ay-borde)}
.gi-ayuda__faq summary{
  font-family:var(--gi-titular);font-weight:600;font-size:var(--gi-t-m);
  color:var(--ay-oscuro);cursor:pointer;list-style:none;
  display:flex;align-items:center;gap:.75rem;min-height:44px;padding:.75rem 0;
}
.gi-ayuda__faq summary::-webkit-details-marker{display:none}
.gi-ayuda__faq summary::before{
  content:"+";font-weight:700;color:var(--ay-verde);flex:none;width:1rem;text-align:center;
}
.gi-ayuda__faq[open] summary::before{content:"\2212"}   /* signo menos */
.gi-ayuda__faq p{margin:0 0 1rem 1.75rem;color:var(--ay-texto)}

/* --- 11 · Cierre: franja verde ------------------------------------------------------- */
.gi-ayuda .gi-ayuda__cierre{background:var(--ay-verde);color:var(--ay-blanco)}
.gi-ayuda__cierre h2{color:var(--ay-blanco)}
.gi-ayuda__cierre p{color:var(--ay-blanco);margin:0}
.gi-ayuda__cierre a:focus-visible{outline-color:var(--ay-blanco)}

/* --- 12 · Aviso y fuentes ------------------------------------------------------------- */
.gi-ayuda .gi-ayuda__fuentes{padding-block:clamp(1.5rem,1.2rem + 1vw,2.25rem);border-top:1px solid var(--ay-borde)}
.gi-ayuda__fuentes p{margin:0 0 .5rem;font-size:var(--gi-t-s);color:var(--ay-texto-2);max-width:none}
.gi-ayuda__fuentes p:last-child{margin-bottom:0}

/* --- 11 bis · Solicite el estudio (31/10, diseño aprobado por Omar) -------------------
   Sección <section id="solicitar">, justo antes del cierre verde, sobre el
   tinte. Dos columnas desde 64rem: el panel verde oscuro (texto del docs) y el
   formulario en una tarjeta blanca (.gi-ayuda__form, que pinta el shortcode
   [gi_formulario_ayuda]). Apiladas por debajo.
   Los pasos (<fieldset class="gi-paso">) y la nota bajo el botón los pone
   inc/eguzki.php; las clases de cada pregunta (gi-perfil, gi-territorio,
   gi-intereses, gi-situacion, gi-privacidad) vienen de formulario.json.
   Contraste medido en normal, hover, foco y marcado: ESTADO.md (31/10).
   Los selectores del formulario llevan .gi-ayuda .gi-ayuda__form
   .wpforms-container .wpforms-form delante: mandan sobre el CSS de serie de
   WPForms («full» o «base»), que va con menos especificidad. */
.gi-ayuda .gi-ayuda__solicitar{background:var(--ay-tinte)}
.gi-ayuda__solicitar-rejilla{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--ay-hueco);align-items:start}
@media (min-width:64rem){
  .gi-ayuda__solicitar-rejilla{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
}

/* Panel verde oscuro */
.gi-ayuda__solicitar-panel{
  background:var(--ay-oscuro);color:var(--ay-blanco);border-radius:var(--ay-radio);
  padding:clamp(1.5rem,1.1rem + 1.6vw,2.5rem);
}
.gi-ayuda__solicitar-panel .gi-ayuda__antetitulo{color:var(--ay-antetitulo-osc)}
.gi-ayuda__solicitar-panel h2{color:var(--ay-blanco)}
.gi-ayuda__solicitar-panel .gi-ayuda__subtitulo{color:var(--ay-blanco);margin-bottom:1.5rem}
.gi-ayuda__marcas{list-style:none;margin:0 0 1.5rem;padding:0;display:grid;gap:.85rem}
.gi-ayuda__marcas li{position:relative;padding-left:2rem;line-height:1.5}
/* Marca de verificación dibujada con bordes: decorativa (el texto lo dice todo). */
.gi-ayuda__marcas li::before{
  content:"";position:absolute;left:.35rem;top:.2rem;width:.5rem;height:.9rem;
  border:solid var(--ay-antetitulo-osc);border-width:0 3px 3px 0;transform:rotate(45deg);
}
.gi-ayuda__empresa{
  border:1px solid var(--ay-borde-osc);border-radius:var(--ay-radio);
  padding:1rem 1.1rem;margin:0 0 1.5rem;line-height:1.5;
}
.gi-ayuda__empresa strong{color:var(--ay-antetitulo-osc)}
.gi-ayuda__hablar{font-family:var(--gi-titular);font-weight:600;margin:0}
.gi-ayuda__solicitar-panel .gi-ayuda__acciones{margin-top:.75rem}
.gi-ayuda__solicitar-panel a:focus-visible{outline-color:var(--ay-blanco)}

/* Tarjeta del formulario */
.gi-ayuda__solicitar .gi-ayuda__form{
  background:var(--ay-blanco);border:1px solid var(--ay-borde);border-radius:var(--ay-radio);
  padding:clamp(1.25rem,1rem + 1.4vw,2.25rem);container-type:inline-size;
}
.gi-ayuda__form .wpforms-container{
  --wpforms-button-background-color-alt:var(--ay-verde);
  --wpforms-button-background-color:var(--ay-verde-hover);
  --wpforms-button-text-color:var(--ay-blanco);
  --wpforms-button-border-radius:var(--ay-radio-boton);
  --wpforms-field-border-color:var(--ay-borde-campo);
  --wpforms-field-border-radius:var(--ay-radio);
  --wpforms-label-color:var(--ay-oscuro);
  --wpforms-label-sublabel-color:var(--ay-texto-2);
  --wpforms-button-size-font-size:15px;
  margin:0;
}
.gi-ayuda .gi-ayuda__form .wpforms-container .wpforms-form .wpforms-field{padding:0 0 1.375rem;margin:0;clear:none}
/* Sin guiones automáticos (Omar, 31/10): el CSS de serie de WPForms pone
   hyphens:auto en etiquetas, opciones y ayudas, y partía «pre-fiere»,
   «déje-nos» o «Empresa o ac-tividad». Manual: solo donde haya &shy;. */
.gi-ayuda .gi-ayuda__solicitar,
.gi-ayuda .gi-ayuda__solicitar *,
.gi-ayuda .gi-ayuda__solicitar .wpforms-container *{-webkit-hyphens:manual;hyphens:manual}
.gi-ayuda .gi-ayuda__form .wpforms-container .wpforms-form .wpforms-field-label{
  font-family:var(--gi-titular);font-weight:600;font-size:var(--gi-t-s);color:var(--ay-oscuro);
  margin:0 0 .5rem;padding:0;
}
.gi-ayuda .gi-ayuda__form .wpforms-container .wpforms-form .wpforms-field-description{
  font-size:var(--gi-t-xs);color:var(--ay-texto-2);margin:.4rem 0 0;line-height:1.45;
}
.gi-ayuda .gi-ayuda__form .wpforms-container .wpforms-form input[type=text],
.gi-ayuda .gi-ayuda__form .wpforms-container .wpforms-form input[type=email],
.gi-ayuda .gi-ayuda__form .wpforms-container .wpforms-form textarea{
  width:100%;max-width:none;min-height:48px;box-sizing:border-box;
  border:1px solid var(--ay-borde-campo);border-radius:var(--ay-radio);
  background:var(--ay-blanco);color:var(--ay-texto);font:inherit;padding:.65rem .8rem;box-shadow:none;
}
.gi-ayuda .gi-ayuda__form .wpforms-container .wpforms-form textarea{min-height:7.5rem;height:auto}
.gi-ayuda .gi-ayuda__form .wpforms-container .wpforms-form input[type=text]:hover,
.gi-ayuda .gi-ayuda__form .wpforms-container .wpforms-form input[type=email]:hover,
.gi-ayuda .gi-ayuda__form .wpforms-container .wpforms-form textarea:hover{border-color:var(--ay-verde)}
.gi-ayuda .gi-ayuda__form .wpforms-container .wpforms-form input:focus-visible,
.gi-ayuda .gi-ayuda__form .wpforms-container .wpforms-form textarea:focus-visible,
.gi-ayuda .gi-ayuda__form .wpforms-container .wpforms-form button:focus-visible,
.gi-ayuda .gi-ayuda__form .wpforms-container .wpforms-form a:focus-visible{
  outline:3px solid var(--ay-verde);outline-offset:2px;box-shadow:none;
}
.gi-ayuda .gi-ayuda__form .wpforms-container .wpforms-form a{color:var(--ay-verde);text-decoration:underline}

/* Pasos: <fieldset> + <legend> (inc/eguzki.php) */
.gi-ayuda .gi-ayuda__form .wpforms-form .gi-paso{border:0;margin:0 0 1.5rem;padding:0;min-width:0}
.gi-ayuda .gi-ayuda__form .wpforms-form .gi-paso + .gi-paso{margin-top:2rem}
/* (Sin relleno arriba: en un <fieldset> el relleno superior va DEBAJO de la
   leyenda y separaba el título de su primer campo.) */
.gi-ayuda .gi-ayuda__form .wpforms-form .gi-paso__titulo{
  display:flex;align-items:center;gap:.7rem;padding:0;margin:0 0 1.1rem;float:none;width:100%;
  font-family:var(--gi-titular);font-weight:600;font-size:var(--gi-t-m);color:var(--ay-oscuro);
}
.gi-ayuda .gi-ayuda__form .wpforms-form .gi-paso__num{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:2rem;height:2rem;border-radius:50%;background:var(--ay-verde);color:var(--ay-blanco);
  font-size:var(--gi-t-s);font-weight:700;
}
/* Paso 1 (Omar, 31/10), si la tarjeta da para dos columnas:
     fila 1  Nombre, a todo el ancho
     fila 2  etiqueta del correo · etiqueta del teléfono
     fila 3  caja del correo     · caja del teléfono
     fila 4  error del correo    · error del teléfono (si los hay)
     fila 5  la ayuda del correo, a todo el ancho, debajo de los dos
   Los contenedores del correo y del teléfono pasan a display:contents (sin
   semántica propia: son <div>) para que sus piezas entren en la rejilla. Las
   clases gi-nombre, gi-correo y gi-telefono vienen de formulario.json; nada
   depende del ID. El honeypot de WPForms, si cae aquí, va en posición
   absoluta (su estilo) y no ocupa sitio. En estrecho, todo apilado. */
@container (min-width:28rem){
  .gi-ayuda .gi-ayuda__form .wpforms-form .gi-paso--1{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1.25rem;align-items:start;
  }
  .gi-ayuda .gi-ayuda__form .wpforms-form .gi-paso--1 > .gi-paso__titulo{grid-column:1 / -1}
  .gi-ayuda .gi-ayuda__form .wpforms-container .wpforms-form .gi-paso--1 > .gi-nombre{grid-column:1 / -1;grid-row:1}
  .gi-ayuda .gi-ayuda__form .wpforms-container .wpforms-form .gi-paso--1 > .gi-correo,
  .gi-ayuda .gi-ayuda__form .wpforms-container .wpforms-form .gi-paso--1 > .gi-telefono{display:contents}
  .gi-ayuda .gi-ayuda__form .wpforms-form .gi-correo > .wpforms-field-label{grid-column:1;grid-row:2}
  .gi-ayuda .gi-ayuda__form .wpforms-form .gi-correo > input{grid-column:1;grid-row:3}
  .gi-ayuda .gi-ayuda__form .wpforms-form .gi-correo > .wpforms-error{grid-column:1;grid-row:4}
  .gi-ayuda .gi-ayuda__form .wpforms-form .gi-telefono > .wpforms-field-label{grid-column:2;grid-row:2}
  .gi-ayuda .gi-ayuda__form .wpforms-form .gi-telefono > input{grid-column:2;grid-row:3}
  .gi-ayuda .gi-ayuda__form .wpforms-form .gi-telefono > .wpforms-error{grid-column:2;grid-row:4}
  .gi-ayuda .gi-ayuda__form .wpforms-container .wpforms-form .gi-correo > .wpforms-field-description{
    grid-column:1 / -1;grid-row:5;margin:.5rem 0 0;
  }
}

/* Opciones (radio y casilla): el <input> es real y sigue en el árbol de
   accesibilidad y en el tabulador; se esconde a la vista (no con display:none)
   y la <label> asociada hace de tarjeta o de botón. Foco: el del input,
   pintado en su label. Marcado: borde verde de 2 px y fondo de tinte (el
   relleno baja 1 px para que nada se mueva). */
.gi-ayuda .gi-ayuda__form .wpforms-container .wpforms-form .gi-opcion ul{
  list-style:none;margin:0;padding:0;display:grid;gap:.6rem;
}
.gi-ayuda .gi-ayuda__form .wpforms-container .wpforms-form .gi-opcion li{position:relative;display:block;margin:0;padding:0}
/* WPForms pone display:flex en cada <li>: sin esto, la etiqueta solo mide su texto. */
.gi-ayuda .gi-ayuda__form .wpforms-container .wpforms-form .gi-opcion:not(.gi-situacion) li input{
  position:absolute;top:0;left:0;width:1px;height:1px;margin:0;opacity:0;pointer-events:none;
}
.gi-ayuda .gi-ayuda__form .wpforms-container .wpforms-form .gi-opcion li label{
  display:flex;align-items:center;gap:.6rem;width:100%;min-height:48px;box-sizing:border-box;margin:0;
  padding:.65rem .9rem;border:1px solid var(--ay-borde-campo);border-radius:var(--ay-radio-boton);
  background:var(--ay-blanco);color:var(--ay-texto);font-size:var(--gi-t-s);font-weight:600;
  line-height:1.3;cursor:pointer;
}
.gi-ayuda .gi-ayuda__form .wpforms-container .wpforms-form .gi-opcion li label:hover{border-color:var(--ay-verde)}
.gi-ayuda .gi-ayuda__form .wpforms-container .wpforms-form .gi-opcion li input:focus-visible + label{
  outline:3px solid var(--ay-verde);outline-offset:2px;
}
.gi-ayuda .gi-ayuda__form .wpforms-container .wpforms-form .gi-opcion li input:checked + label{
  border:2px solid var(--ay-verde);padding:calc(.65rem - 1px) calc(.9rem - 1px);background:var(--ay-tinte);
}
/* Iconos por máscara, en el verde de texto (≥3:1 en blanco y en tinte). */
.gi-ayuda .gi-ayuda__form .wpforms-form .gi-perfil li label::before,
.gi-ayuda .gi-ayuda__form .wpforms-form .gi-intereses li label::before{
  content:"";flex:none;width:1.6rem;height:1.6rem;background:var(--ay-verde);
  -webkit-mask:var(--ay-icono-opcion) center / contain no-repeat;mask:var(--ay-icono-opcion) center / contain no-repeat;
}
.gi-ayuda__form .gi-perfil li.choice-1{--ay-icono-opcion:url('../img/ayuda/hogar.svg')}
.gi-ayuda__form .gi-perfil li.choice-2{--ay-icono-opcion:url('../img/ayuda/industria.svg')}
.gi-ayuda__form .gi-perfil li.choice-3{--ay-icono-opcion:url('../img/ayuda/comunidad.svg')}
.gi-ayuda__form .gi-perfil li.choice-4{--ay-icono-opcion:url('../img/ayuda/otro.svg')}
.gi-ayuda__form .gi-intereses li.choice-1{--ay-icono-opcion:url('../img/ayuda/autoconsumo.svg')}
.gi-ayuda__form .gi-intereses li.choice-2{--ay-icono-opcion:url('../img/ayuda/bateria.svg')}
.gi-ayuda__form .gi-intereses li.choice-3{--ay-icono-opcion:url('../img/ayuda/climatizacion.svg')}
.gi-ayuda__form .gi-intereses li.choice-4{--ay-icono-opcion:url('../img/ayuda/calor.svg')}
.gi-ayuda__form .gi-intereses li.choice-5{--ay-icono-opcion:url('../img/ayuda/asesoramiento.svg')}
/* Perfil: cuatro tarjetas (2×2 en estrecho), icono encima del texto. */
.gi-ayuda .gi-ayuda__form .wpforms-container .wpforms-form .gi-perfil ul{grid-template-columns:repeat(2,minmax(0,1fr))}
@container (min-width:34rem){
  .gi-ayuda .gi-ayuda__form .wpforms-container .wpforms-form .gi-perfil ul{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.gi-ayuda .gi-ayuda__form .wpforms-container .wpforms-form .gi-perfil li label{
  flex-direction:column;justify-content:center;text-align:center;min-height:6.25rem;height:100%;border-radius:var(--ay-radio);
}
.gi-ayuda .gi-ayuda__form .wpforms-form .gi-perfil li label::before{width:2rem;height:2rem}
/* Territorio e intereses: botones en fila que se marcan. Territorio, sin
   icono propio: una casilla dibujada que se rellena al marcar. */
.gi-ayuda .gi-ayuda__form .wpforms-container .wpforms-form .gi-territorio ul,
.gi-ayuda .gi-ayuda__form .wpforms-container .wpforms-form .gi-intereses ul{
  display:flex;flex-wrap:wrap;
}
.gi-ayuda .gi-ayuda__form .wpforms-form .gi-territorio li label::before{
  content:"";flex:none;width:1.1rem;height:1.1rem;border:2px solid var(--ay-borde-campo);border-radius:50%;box-sizing:border-box;
}
.gi-ayuda .gi-ayuda__form .wpforms-form .gi-territorio li input:checked + label::before{
  border:5px solid var(--ay-verde);background:var(--ay-blanco);
}
/* Situación: tres opciones grandes con su radio a la vista. */
.gi-ayuda .gi-ayuda__form .wpforms-container .wpforms-form .gi-situacion li input{
  position:absolute;left:1rem;top:50%;transform:translateY(-50%);width:1.25rem;height:1.25rem;margin:0;z-index:1;
  -webkit-appearance:auto;appearance:auto;accent-color:var(--ay-verde);pointer-events:none;
}
/* WPForms quita la apariencia nativa (appearance:none) y dibuja la suya con
   ::before: aquí se vuelve a la nativa, con el verde del sitio. */
.gi-ayuda .gi-ayuda__form .wpforms-container .wpforms-form .gi-situacion li input::before,
.gi-ayuda .gi-ayuda__form .wpforms-container .wpforms-form .gi-situacion li input::after,
.gi-ayuda .gi-ayuda__form .wpforms-container .wpforms-form .gi-privacidad input::before,
.gi-ayuda .gi-ayuda__form .wpforms-container .wpforms-form .gi-privacidad input::after{content:none;display:none}
.gi-ayuda .gi-ayuda__form .wpforms-container .wpforms-form .gi-situacion li label{min-height:56px;padding-left:3rem}
.gi-ayuda .gi-ayuda__form .wpforms-container .wpforms-form .gi-situacion li input:checked + label{padding-left:calc(3rem - 1px)}
/* Privacidad: casilla normal, con 44 px de objetivo. */
.gi-ayuda .gi-ayuda__form .wpforms-container .wpforms-form .gi-privacidad li{display:flex;align-items:center;gap:.6rem;min-height:44px}
.gi-ayuda .gi-ayuda__form .wpforms-container .wpforms-form .gi-privacidad input[type=checkbox]{
  width:1.25rem;height:1.25rem;margin:0;flex:none;-webkit-appearance:auto;appearance:auto;accent-color:var(--ay-verde);
}
.gi-ayuda .gi-ayuda__form .wpforms-container .wpforms-form .gi-privacidad li label{font-size:var(--gi-t-s);padding:.6rem 0;margin:0}

/* Envío a todo el ancho y la nota debajo. */
.gi-ayuda .gi-ayuda__form .wpforms-container .wpforms-form .wpforms-submit-container{padding:0;margin:.5rem 0 0}
.gi-ayuda .gi-ayuda__form .wpforms-container .wpforms-form button[type=submit]{
  display:block;width:100%;min-height:52px;font-family:var(--gi-titular);font-weight:600;
  font-size:var(--gi-t-s);padding:.85em 1.6em;border-radius:var(--ay-radio-boton);
  border:2px solid transparent;cursor:pointer;background:var(--ay-verde);color:var(--ay-blanco);
}
.gi-ayuda .gi-ayuda__form .wpforms-container .wpforms-form button[type=submit]:hover{background:var(--ay-verde-hover);color:var(--ay-blanco)}
.gi-ayuda .gi-ayuda__form .gi-ayuda__form-nota{font-size:var(--gi-t-xs);color:var(--ay-texto-2);margin:.8rem 0 0;max-width:none;text-align:center}
.gi-ayuda .gi-ayuda__form .gi-ayuda__form-nota a{display:inline-block;padding-block:.8rem;margin-block:-.8rem}

/* Los cinco campos de campaña: texto normal escondido, porque WPForms Lite no
   tiene campo oculto. display:none los saca del tabulador y del árbol de
   accesibilidad, y el navegador los envía igual (decisión de Omar, 25/09). */
.gi-ayuda__form .wpforms-field.gi-campo-utm{display:none}

/* --- Barra fija de móvil (parcial template-parts/barra-movil.php) ----------------------
   Igual que la de ADER: solo por debajo del punto de ruptura de la cabecera
   (921 px), con los flotantes de CookieYes y de Astra por encima y hueco bajo
   el pie. Como esta hoja solo se carga en ayuda.php, tocar .gi-pie aquí no
   afecta al resto del sitio. */
.gi-barra-movil{display:none}
@media (max-width:921px){
  .gi-barra-movil{
    position:fixed;left:0;right:0;bottom:0;z-index:50;
    display:flex;align-items:center;gap:.6rem;
    padding:.6rem max(.75rem, env(safe-area-inset-left,0px))
            calc(.6rem + env(safe-area-inset-bottom,0px));
    background:var(--ay-barra-fondo);border-top:1px solid var(--ay-borde);
  }
  .gi-ayuda .gi-barra-movil__cta{
    flex:1 1 auto;text-align:center;text-decoration:none;min-height:44px;
    background:var(--ay-verde);color:var(--ay-blanco);border-radius:var(--ay-radio-boton);
  }
  .gi-ayuda .gi-barra-movil__cta:hover{background:var(--ay-verde-hover);color:var(--ay-blanco)}
  .gi-ayuda .gi-barra-movil__icono{
    flex:none;width:52px;height:52px;padding:0;border-radius:var(--ay-radio-boton);
    display:inline-flex;align-items:center;justify-content:center;
    border-color:var(--ay-verde);background:transparent;
  }
  .gi-ayuda .gi-barra-movil__icono:hover{background:var(--ay-tinte)}
  .gi-barra-movil__icono svg{width:24px;height:24px;fill:var(--ay-verde)}
  :root{
    --gi-barra-alto:calc(52px + 1.2rem + 1px + env(safe-area-inset-bottom,0px));
    --gi-flotante-bajo:calc(var(--gi-barra-alto) + 12px);
  }
  .cky-btn-revisit-wrapper.cky-revisit-bottom-left,
  .cky-btn-revisit-wrapper.cky-revisit-bottom-right{bottom:var(--gi-flotante-bajo) !important}
  #ast-scroll-top{bottom:var(--gi-flotante-bajo) !important}
  .gi-pie{padding-bottom:calc(var(--gi-flotante-bajo) + 45px + 12px)}
}

/* --- Reducir movimiento: nada se anima ---------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .gi-ayuda *,.gi-ayuda *::before,.gi-ayuda *::after{
    transition:none !important;animation:none !important;scroll-behavior:auto !important;
  }
}