/* ==========================================================================
   Página de subvenciones ADER (Agencia de Desarrollo Económico de La Rioja)
   Se carga DESPUÉS de categoria.css, que aporta la cabecera oscura, las
   tarjetas numeradas y el estilo de WPForms. Aquí solo vive lo propio de
   esta página: distintivo de plazo, cifras, aviso, tabla, proceso en seis
   pasos, proyectos, preguntas frecuentes, contacto y barra de móvil.

   Sin `style=` y sin `<script>` inline (regla del proyecto). Radios: 10 px
   el botón, 2 px lo demás. Foco de 3 px en verde, heredado de tokens.css.
   ========================================================================== */

/* Secciones a sangre, igual que .gi-cat: Astra encierra el contenido en su
   contenedor en caja y esta página necesita el ancho completo. */
.gi-ader{width:100vw;min-width:100vw;margin-left:calc(50% - 50vw)}

/* Contenedor interior común: el ancho de página del sitio. */
.gi-ader__int{
  max-width:1180px;margin-inline:auto;
  padding-inline:max(1.25rem, var(--gi-gutter));
}

/* Las anclas no pueden quedar bajo la cabecera fija. */
.gi-ader__seccion,.gi-ader__proceso,.gi-ader__contacto{
  scroll-margin-top:calc(var(--gi-alto-cabecera, 101px) + 12px);
}

.gi-ader__antetitulo{
  font-family:var(--gi-titular);font-size:var(--gi-t-xs);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gi-verde);
  margin:0 0 .75rem;
}
.gi-ader__seccion{padding-block:clamp(2.75rem,2rem + 3vw,4.5rem)}
.gi-ader__seccion + .gi-ader__seccion{border-top:1px solid var(--gi-linea)}
.gi-ader__seccion h2{
  font-family:var(--gi-titular);font-size:var(--gi-t-xl);font-weight:600;
  color:var(--gi-verde-oscuro);margin:0 0 1rem;text-wrap:balance;
}
.gi-ader__nota{font-size:var(--gi-t-s);color:var(--gi-texto-suave);margin:1rem 0 0}

/* --- A · Cabecera ---------------------------------------------------------
   El resto (fondo, rejilla, h1, entradilla, motivo) lo pone categoria.css. */
.gi-ader__distintivo{
  display:inline-block;font-family:var(--gi-titular);font-weight:600;
  font-size:var(--gi-t-s);letter-spacing:.01em;
  color:#fff;background:rgba(39,168,85,.22);
  border:1px solid var(--gi-verde);border-radius:2px;
  padding:.35em .8em;margin:0 0 1rem;
}
.gi-ader__distintivo--cerrada{
  background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.45);
}
.gi-ader__acciones{
  display:flex;flex-wrap:wrap;align-items:center;gap:.9rem;
  margin:1.75rem 0 0;max-width:none;
}
.gi-ader__horario{
  font-size:var(--gi-t-s);color:rgba(233,239,236,.82);line-height:1.4;
}

/* --- B · Cifras ------------------------------------------------------------
   Fondo blanco, cuatro columnas con separador fino entre ellas. */
.gi-ader__cifras{background:#fff;border-bottom:1px solid var(--gi-linea)}
.gi-ader__cifras-int{
  max-width:1180px;margin-inline:auto;
  padding:clamp(1.75rem,1.4rem + 1.6vw,2.75rem) max(1.25rem, var(--gi-gutter));
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(1rem,.6rem + 1.6vw,2rem);
}
.gi-ader__cifra + .gi-ader__cifra{
  border-left:1px solid var(--gi-linea);
  padding-left:clamp(1rem,.6rem + 1.6vw,2rem);
}
.gi-ader__cifra-dato{
  font-family:var(--gi-titular);font-variant-numeric:tabular-nums;
  font-weight:700;font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem);
  line-height:1.1;color:var(--gi-verde);margin:0 0 .35rem;letter-spacing:-.02em;
}
.gi-ader__cifra-pie{
  font-size:var(--gi-t-s);color:var(--gi-texto-suave);margin:0;line-height:1.4;
}
@media (max-width:48rem){
  .gi-ader__cifras-int{grid-template-columns:repeat(2,1fr)}
  /* Con dos columnas, el separador sobra en la primera de cada fila. */
  .gi-ader__cifra:nth-child(odd){border-left:0;padding-left:0}
}
@media (max-width:30rem){
  .gi-ader__cifras-int{grid-template-columns:1fr}
  .gi-ader__cifra + .gi-ader__cifra{
    border-left:0;padding-left:0;border-top:1px solid var(--gi-linea);padding-top:1rem;
  }
}

/* --- C · Aviso ------------------------------------------------------------ */
.gi-ader__aviso{background:var(--gi-verde-claro)}
.gi-ader__aviso-int{
  max-width:1180px;margin-inline:auto;
  padding:clamp(2rem,1.6rem + 2vw,3rem) max(1.25rem, var(--gi-gutter));
}
.gi-ader__aviso h2{
  font-family:var(--gi-titular);font-size:var(--gi-t-l);font-weight:600;
  color:var(--gi-verde-oscuro);margin:0 0 .6rem;
}
.gi-ader__aviso p{margin:0;max-width:68ch;color:var(--gi-texto)}

/* --- D · Las dos líneas ---------------------------------------------------
   Reutiliza .gi-tarjeta de categoria.css (borde fino, canto verde, número). */
.gi-ader__linea h3{
  font-family:var(--gi-titular);font-size:var(--gi-t-l);font-weight:600;
  margin:0 0 .5rem;color:var(--gi-texto);
}
.gi-ader__linea-meta{
  font-family:var(--gi-titular);font-size:var(--gi-t-xs);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--gi-verde);margin:0 0 .35rem;
}
.gi-ader__linea ul{margin:.75rem 0 0;padding-left:1.1rem}
.gi-ader__linea li{margin:0 0 .35rem}

/* --- E · Tabla de diagnóstico --------------------------------------------- */
.gi-ader__tabla{
  width:100%;border-collapse:collapse;margin:1.5rem 0 0;
  font-size:var(--gi-t-m);
}
.gi-ader__tabla th,.gi-ader__tabla td{
  text-align:left;vertical-align:top;padding:.7rem .75rem;
  border-bottom:1px solid var(--gi-linea);
}
.gi-ader__tabla th{
  font-family:var(--gi-titular);font-weight:600;background:var(--gi-fondo);
  color:var(--gi-verde-oscuro);
}
.gi-ader__tabla td:last-child{
  font-family:var(--gi-titular);font-weight:600;color:var(--gi-verde-oscuro);
  white-space:nowrap;
}
@media (max-width:36rem){
  /* En móvil la tabla se lee como fichas: cabecera oculta y etiqueta propia. */
  .gi-ader__tabla thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .gi-ader__tabla tr{display:block;border-bottom:1px solid var(--gi-linea);padding:.6rem 0}
  .gi-ader__tabla td{display:block;border:0;padding:.15rem 0}
  .gi-ader__tabla td:last-child{white-space:normal;font-size:var(--gi-t-s)}
  .gi-ader__tabla td:last-child::before{content:"Línea: ";color:var(--gi-texto-suave);font-weight:400}
}

/* --- F · Proceso ----------------------------------------------------------- */
.gi-ader__proceso{padding-block:clamp(3rem,2.4rem + 3vw,5rem)}
.gi-ader__proceso h2{
  font-family:var(--gi-titular);font-size:var(--gi-t-xl);font-weight:600;
  color:#fff;margin:0 0 .75rem;text-wrap:balance;
}
.gi-ader__lema{
  font-size:var(--gi-t-l);color:rgba(233,239,236,.82);margin:0 0 2rem;max-width:52ch;
}
.gi-ader__pasos{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(6,1fr);
  gap:clamp(.75rem,.5rem + 1vw,1.25rem);
}
.gi-ader__paso{
  background:var(--gi-tecnico-2);
  border:1px solid rgba(255,255,255,.10);
  border-left:3px solid var(--gi-verde);
  border-radius:2px;
  padding:clamp(1rem,.8rem + .6vw,1.35rem);
}
.gi-ader__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(--gi-verde);margin:0 0 .5rem;
}
.gi-ader__paso h3{
  font-family:var(--gi-titular);font-size:var(--gi-t-m);font-weight:600;
  color:#fff;margin:0 0 .4rem;line-height:1.25;
}
.gi-ader__paso p{margin:0;font-size:var(--gi-t-s);color:rgba(233,239,236,.82);max-width:none}
@media (max-width:64rem){ .gi-ader__pasos{grid-template-columns:repeat(3,1fr)} }
@media (max-width:48rem){ .gi-ader__pasos{grid-template-columns:repeat(2,1fr)} }
@media (max-width:36rem){ .gi-ader__pasos{grid-template-columns:1fr} }

/* --- G · Referencias ------------------------------------------------------- */
.gi-ader__enlace{margin:0 0 1.5rem}
.gi-ader__enlace a{font-family:var(--gi-titular);font-weight:600;font-size:var(--gi-t-s)}

/* --- H · Garantías ---------------------------------------------------------- */
.gi-ader__garantias{margin:1.25rem 0 0;padding-left:1.1rem}
.gi-ader__garantias li{margin:0 0 .6rem}

/* Marcadores ⟦…⟧ pendientes: misma convención que los textos legales.
   Se repite aquí porque legal.css solo se carga en page-legal.php; si algún
   día hay un tercer sitio con marcadores, esta regla sube a tokens.css. */
.legal-placeholder{
  background:#FFF1C2;border:1px solid #D9A400;border-radius:3px;
  padding:0 .25em;color:#4A3800;font-weight:600;
}

/* --- I · Preguntas frecuentes ----------------------------------------------
   Con <details>: el plegado lo hace el navegador y no hace falta ni una
   línea de JavaScript. */
.gi-ader__faq{
  border-bottom:1px solid var(--gi-linea);
  padding:.9rem 0;
}
.gi-ader__faq summary{
  font-family:var(--gi-titular);font-weight:600;font-size:var(--gi-t-m);
  color:var(--gi-verde-oscuro);cursor:pointer;list-style:none;
  display:flex;align-items:flex-start;gap:.6rem;
}
.gi-ader__faq summary::-webkit-details-marker{display:none}
.gi-ader__faq summary::before{
  content:"+";font-weight:700;color:var(--gi-verde);line-height:1.25;flex:none;
}
.gi-ader__faq[open] summary::before{content:"\2212"}   /* signo menos */
.gi-ader__faq summary:focus-visible{
  outline:3px solid var(--gi-verde);outline-offset:3px;border-radius:4px;
}
.gi-ader__faq p{margin:.75rem 0 0 1.4rem;color:var(--gi-texto)}

/* --- J · Contacto ------------------------------------------------------------ */
.gi-ader__contacto{padding-block:clamp(3rem,2.4rem + 3vw,5rem)}
.gi-ader__contacto-rejilla{
  display:grid;grid-template-columns:5fr 7fr;
  gap:clamp(2rem,1.5rem + 3vw,4rem);align-items:start;
}
.gi-ader__contacto h2{
  font-family:var(--gi-titular);font-size:var(--gi-t-xl);font-weight:600;
  color:#fff;margin:0 0 .75rem;text-wrap:balance;
}
.gi-ader__contacto-datos p{color:rgba(233,239,236,.82)}
.gi-ader__privacidad{
  margin:1.5rem 0 0;padding:1rem 1.1rem;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14);
  border-left:3px solid var(--gi-verde);border-radius:2px;
}
.gi-ader__privacidad p{margin:0;font-size:var(--gi-t-s);line-height:1.6}
.gi-ader__privacidad strong{color:#fff}
.gi-ader__separador{
  border:0;border-top:1px solid rgba(255,255,255,.14);margin:2rem 0 1.5rem;
}
.gi-ader__otra-via{
  font-family:var(--gi-titular);font-weight:600;color:#fff;margin:0 0 1rem;
}
.gi-ader__correo{margin:1.25rem 0 0}
.gi-ader__correo a{color:#fff;text-decoration:underline}
.gi-ader__correo a:hover{color:var(--gi-verde)}

/* Tarjeta blanca del formulario sobre el fondo oscuro. */
.gi-ader__contacto-form{
  background:#fff;border-radius:2px;
  padding:clamp(1.25rem,1rem + 1.4vw,2rem);
}
.gi-ader__contacto-form h3{
  font-family:var(--gi-titular);font-size:var(--gi-t-l);font-weight:600;
  color:var(--gi-verde-oscuro);margin:0 0 1rem;
}
/* WPForms se estiliza por VARIABLES CSS en :root, no por reglas — y usa la
   variable «-alt» para el estado NORMAL y la otra para hover: está al revés
   de lo que sugiere el nombre (ver NOTAS-DISENO.md). */
.gi-ader__contacto-form .wpforms-container{
  --wpforms-button-background-color-alt:#27A854;   /* normal: verde de marca */
  --wpforms-button-background-color:#0D3D1F;       /* hover/active: verde oscuro */
  --wpforms-button-text-color:#FFFFFF;
  --wpforms-button-border-radius:10px;
  --wpforms-field-border-color:rgba(16,22,26,.22);
  --wpforms-field-border-radius:2px;
  --wpforms-label-color:#0D3D1F;
  --wpforms-label-sublabel-color:#5A6660;
  --wpforms-button-size-font-size:15px;
}
/* Refuerzo por si una versión del plugin dejara de usar la variable. */
.gi-ader__contacto-form .wpforms-container .wpforms-form button[type=submit],
.gi-ader__contacto-form .wpforms-container .wpforms-form input[type=submit]{
  display:inline-block;font-family:var(--gi-titular);font-weight:600;
  font-size:var(--gi-t-s);padding:.85em 1.6em;border-radius:var(--gi-radio);
  background:var(--gi-verde);color:#fff;border:2px solid transparent;cursor:pointer;
}
.gi-ader__contacto-form .wpforms-container .wpforms-form button[type=submit]:hover,
.gi-ader__contacto-form .wpforms-container .wpforms-form input[type=submit]:hover{
  background:var(--gi-verde-oscuro);color:#fff;
}
/* Los cinco campos de campaña (utm_source, utm_medium, utm_campaign,
   utm_content, utm_term): los rellena ader.js desde la URL. WPForms Lite no
   tiene campo oculto —es de la versión de pago—, así que son campos de texto
   normales escondidos aquí.

   `display:none` y no la clase de «solo para lectores de pantalla»: así el
   campo no está ni en el recorrido del tabulador ni en el árbol de
   accesibilidad, y aun así el navegador lo envía con el resto del
   formulario. Decisión de Omar, 25/09. */
.gi-ader__contacto-form .wpforms-field.gi-campo-utm{
  display:none;
}
@media (max-width:64rem){
  .gi-ader__contacto-rejilla{grid-template-columns:1fr}
}

/* --- K · Fuentes ------------------------------------------------------------- */
.gi-ader__fuentes{background:#fff;border-top:1px solid var(--gi-linea)}
.gi-ader__fuentes .gi-ader__int{
  padding-block:clamp(1.5rem,1.2rem + 1vw,2.25rem);
}
.gi-ader__fuentes p{
  margin:0;font-size:var(--gi-t-s);color:var(--gi-texto-suave);max-width:none;
}

/* --- Barra fija de móvil -------------------------------------------------------
   Solo por debajo del punto de ruptura de la cabecera (921 px), que es el
   mismo que usa el tema para pasar al menú de móvil. */
.gi-ader__barra{display:none}
@media (max-width:921px){
  .gi-ader__barra{
    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:rgba(247,249,248,.96);
    border-top:1px solid var(--gi-linea);
  }
  .gi-ader__barra-cta{flex:1 1 auto;text-align:center}
  .gi-ader__barra-icono{
    flex:none;width:52px;height:52px;padding:0;
    display:inline-flex;align-items:center;justify-content:center;
  }
  .gi-ader__barra-icono svg{width:24px;height:24px;fill:var(--gi-verde-oscuro)}
  /* Hueco al final de la PÁGINA, no del <main>: la barra es fija y el pie va
     fuera de <main>, así que el hueco tiene que estar debajo del pie. Esta
     hoja solo se carga en esta plantilla, así que tocar .gi-pie aquí no
     afecta al resto del sitio. */
  /* gi-flotantes:inicio — botones flotantes por encima de la barra (06/10).
     El botón de CookieYes para cambiar el consentimiento (abajo a la
     izquierda) y la flecha de volver arriba de Astra (abajo a la derecha)
     quedaban DEBAJO de la barra y tapaban el botón principal y el de
     WhatsApp. Suben por encima: alto de la barra con sus mismas unidades
     (lo mide ader.js en --gi-barra-alto, área segura de iOS incluida) y 12px
     de aire. Sin JS, un alto de respaldo con el botón principal en dos líneas
     (72px), .6rem arriba y abajo, 1px de borde y el área segura. El de
     CookieYes NO se oculta: retirar el consentimiento tiene que ser tan fácil
     como darlo. */
  :root{
    --gi-barra-alto:calc(72px + 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}
  /* Hueco bajo el pie: la barra y, encima, los flotantes (45px). */
  .gi-pie{padding-bottom:calc(var(--gi-flotante-bajo) + 45px + 12px)}
  /* gi-flotantes:fin */
}

/* --- Corte de estudios (28/10) y datos de cada línea (02/10) ----------------
   El aviso aparece en tres sitios: junto al botón de la cabecera, en el
   bloque «La solicitud, antes que la inversión» y junto al formulario. Va en
   texto, sin caja: es una fecha, no una alerta. */
.gi-ader__corte{
  font-family:var(--gi-titular);font-weight:600;font-size:var(--gi-t-s);
  margin:1rem 0 0;max-width:68ch;
}
.gi-ader__aviso .gi-ader__corte{color:var(--gi-verde-oscuro)}
.gi-ader__corte--cabecera,.gi-ader__contacto .gi-ader__corte{color:#fff}
.gi-ader__linea .gi-ader__datos{
  list-style:none;padding:.75rem 0 0;margin:1rem 0 0;
  border-top:1px solid var(--gi-linea);font-size:var(--gi-t-s);
}
.gi-ader__linea .gi-ader__datos li{margin:0 0 .45rem}
.gi-ader__linea .gi-ader__datos strong{color:var(--gi-verde-oscuro)}
/* Convocatoria cerrada: sin formulario, el contacto ocupa una sola columna. */
.gi-ader__contacto-rejilla--sola{grid-template-columns:minmax(0,46rem)}