/* ==========================================================================
   Página de categoría (plantilla "Línea de actividad")
   Cabecera técnica con icono wired + entradilla destacada; secciones con
   aire y separador sutil; CTA con el botón global (.gi-cta en tokens.css).
   ========================================================================== */

/* --- Cabecera -------------------------------------------------------------- */
/* Astra encierra el contenido en su contenedor en caja (.ast-container).
   El main de la plantilla se saca a todo el viewport con el margen negativo
   clásico; el clip en body evita el scroll horizontal del ancho de la barra.
   (El meta no-sidebar sí se aplica; el de ancho completo depende de la
   versión de Astra, así que no se confía en él.) */
body{overflow-x:clip}
/* min-width porque .ast-container es flex y encoge a sus ítems */
.gi-cat{width:100vw;min-width:100vw;margin-left:calc(50% - 50vw)}
.gi-cat__cabecera{
  padding-block:clamp(3rem, 2rem + 4vw, 5.5rem) clamp(2.75rem, 2rem + 3vw, 4.5rem);
}
.gi-cat__cabecera-int{
  max-width:68rem;margin-inline:auto;
  padding-inline:max(1.25rem, var(--gi-gutter));
  display:flex;align-items:center;gap:clamp(1.5rem, 1rem + 2.5vw, 3rem);
}
.gi-cat__icono{
  width:clamp(72px, 60px + 4vw, 104px);height:auto;flex:none;
  fill:none;stroke:var(--gi-verde);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
}
.gi-cat__etiqueta{
  font-family:var(--gi-titular);font-size:var(--gi-t-xs);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;margin:0 0 .75rem;
}
.gi-cat__etiqueta a{color:var(--gi-verde);text-decoration:none}
.gi-cat__etiqueta a:hover{text-decoration:underline}
.gi-cat__cabecera h1{
  font-family:var(--gi-titular);font-size:var(--gi-t-2xl);font-weight:700;
  line-height:1.08;margin:0;color:#fff;text-wrap:balance;
}
.gi-cat__entradilla{
  font-family:var(--gi-cuerpo);font-size:var(--gi-t-l);line-height:1.5;
  margin:1.25rem 0 0;max-width:52ch;
  padding-left:1rem;border-left:3px solid var(--gi-verde);
}
@media (max-width:48rem){
  .gi-cat__cabecera-int{flex-direction:column;align-items:flex-start}
  .gi-cat__icono{width:64px}
}

/* --- Contenido ------------------------------------------------------------- */
.gi-cat__contenido{
  max-width:46rem;margin-inline:auto;
  padding-inline:max(1.25rem, var(--gi-gutter));
  padding-block:clamp(2.5rem, 2rem + 2vw, 4rem) clamp(3.5rem, 3rem + 3vw, 5.5rem);
  font-family:var(--gi-cuerpo);font-size:var(--gi-t-m);line-height:1.7;
  color:var(--gi-texto);
}
.gi-cat__contenido h2{
  font-family:var(--gi-titular);font-size:var(--gi-t-xl);font-weight:600;
  line-height:1.2;color:var(--gi-verde-oscuro);text-wrap:balance;
  margin:3.25rem 0 1rem;padding-top:2.5rem;
  border-top:1px solid rgba(16,22,26,.12);
}
.gi-cat__contenido h2::before{
  content:"";display:block;width:2.5rem;height:3px;border-radius:2px;
  background:var(--gi-verde);margin-bottom:1rem;
}
.gi-cat__contenido > h2:first-child{margin-top:0;padding-top:0;border-top:0}
.gi-cat__contenido p{margin:0 0 1.25rem}
.gi-cat__contenido ul,.gi-cat__contenido ol{margin:0 0 1.25rem;padding-left:1.4rem}
.gi-cat__contenido li{margin-bottom:.75rem}
.gi-cat__contenido li::marker{color:var(--gi-verde);font-weight:600}
.gi-cat__contenido a{color:var(--gi-verde-oscuro)}

/* --- Cierre y CTA ----------------------------------------------------------- */
.gi-cat__contenido p.gi-cat__cierre{
  margin-top:3.25rem;padding-top:2.5rem;border-top:1px solid rgba(16,22,26,.12);
  font-family:var(--gi-titular);font-weight:600;font-size:var(--gi-t-l);
  line-height:1.35;color:var(--gi-verde-oscuro);text-wrap:balance;
}
.gi-cat__contenido p.gi-cat__cta{margin:1.5rem 0 0}
.gi-cat__contenido p.gi-cat__cta a{color:#fff}

/* --- Cabecera con escena wired (9 categorías) -------------------------------
   Reutiliza la estructura .gi-wired de la home en versión compacta: el
   trazado, la aparición y la vida ambiental los gobierna wired.js/wired.css.
   El h1 ocupa el sitio del h2 de las escenas. */
.gi-cat__escena{padding-block:clamp(2rem,1.5rem + 2vw,3rem)}
.gi-cat__escena h1{
  font-family:var(--gi-titular);font-size:var(--gi-t-2xl);font-weight:700;
  line-height:1.08;margin:0;color:#fff;text-wrap:balance;
}
.gi-cat__escena .gi-wired__lienzo svg{
  display:block;width:100%;height:clamp(280px,26vw,380px);
}
@media (max-width:64rem){
  .gi-cat__escena .gi-wired__lienzo svg{height:clamp(220px,52vw,300px)}
}

/* Móvil: el diagrama cabe entero en el ancho del viewport (ver el criterio
   en wired.css). height:auto para que la altura la fije su proporción y no
   sobre aire vertical. */
@media (max-width:48rem){
  .gi-cat__escena .gi-wired__lienzo svg{height:auto}
}

/* Móvil: la cabecera completa llegaba al 87 % del viewport (medido en
   400x800) y el contenido no asomaba. El diagrama NO se recorta —perdería
   dibujo y obligaría a scroll en dos ejes—: se compacta todo lo que lo
   rodea, que es lo que de verdad sobraba. */
@media (max-width:48rem){
  .gi-cat__escena{padding-block:1.25rem 1.5rem}
  .gi-cat__escena .gi-wired__interior{gap:1rem}
  .gi-cat__escena h1{font-size:clamp(1.7rem,1.4rem + 1.6vw,2.1rem)}
  .gi-cat__escena .gi-cat__entradilla{
    font-size:var(--gi-t-m);margin-top:.875rem;padding-left:.75rem;
  }
  .gi-cat__etiqueta{margin-bottom:.5rem}
  /* Tope de seguridad: si una escena futura tuviera un viewBox mucho más
     alto, se encoge entera (preserveAspectRatio por defecto) en vez de
     desbordar la pantalla. No se activa en ninguna de las doce actuales. */
  .gi-cat__escena .gi-wired__lienzo svg{max-height:52vh}
}

/* ==========================================================================
   Tarjetas numeradas del cuerpo (categorías y páginas con cabecera)
   Deliberadamente NO es el patrón «SaaS»: sin sombra, sin esquinas muy
   redondeadas, sin relleno de color. Un borde fino, un canto de marca a la
   izquierda y el número como referencia de plano.
   ========================================================================== */
.gi-tarjeta{
  position:relative;
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(1rem,.6rem + 1.4vw,1.75rem);
  border:1px solid rgba(16,22,26,.14);
  border-left:3px solid var(--gi-verde);
  border-radius:2px;
  padding:clamp(1.25rem,1rem + 1vw,1.75rem) clamp(1.25rem,1rem + 1.4vw,2rem);
  margin:0 0 1.25rem;
  background:transparent;
}
.gi-tarjeta__num{
  /* Numeración tipo índice de plano. La familia vive en una variable propia
     para poder cambiarla en una línea si se fija otra tipografía. */
  font-family:var(--gi-num, 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;color:var(--gi-verde);
  letter-spacing:-.02em;
}
/* Dentro de la tarjeta el H2 no repite el separador ni el guion: el canto
   verde y el número ya marcan el inicio de sección. */
.gi-cat__contenido .gi-tarjeta h2{
  margin:0 0 .75rem;padding-top:0;border-top:0;font-size:var(--gi-t-l);
}
.gi-cat__contenido .gi-tarjeta h2::before{content:none}
.gi-cat__contenido .gi-tarjeta p:last-child,
.gi-cat__contenido .gi-tarjeta ul:last-child,
.gi-cat__contenido .gi-tarjeta ol:last-child{margin-bottom:0}
@media (max-width:36rem){
  .gi-tarjeta{grid-template-columns:minmax(0,1fr);gap:.5rem}
}

/* --- Motivo decorativo de cabecera (no es escena) -------------------------- */
.gi-cat__cabecera--motivo .gi-cat__cabecera-int{
  justify-content:space-between;align-items:center;
}
.gi-motivo{
  flex:none;fill:none;stroke:var(--gi-verde);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;opacity:.34;
  width:clamp(96px,10vw,148px);height:auto;
}
.gi-motivo__punta{fill:var(--gi-verde);stroke:none}
.gi-motivo--lineas{
  display:grid;grid-template-columns:repeat(6,1fr);gap:.75rem;
  width:clamp(180px,26vw,320px);opacity:.22;
}
.gi-motivo__icono{
  width:100%;height:auto;fill:none;stroke:var(--gi-verde);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
}
@media (max-width:48rem){
  .gi-cat__cabecera--motivo .gi-cat__cabecera-int{align-items:flex-start}
  .gi-motivo{width:76px}
  .gi-motivo--lineas{width:100%;grid-template-columns:repeat(6,1fr);gap:.5rem}
}

/* ==========================================================================
   Contacto: dos columnas INVERTIDAS — datos a la izquierda, formulario a la
   derecha. Sin mapa embebido: un motivo wired en su lugar.
   ========================================================================== */
.gi-contacto{
  max-width:1180px;margin-inline:auto;
  padding:clamp(2.5rem,2rem + 2vw,4rem) max(1.25rem,var(--gi-gutter)) clamp(3.5rem,3rem + 3vw,5.5rem);
  display:grid;gap:clamp(2rem,1.5rem + 3vw,4rem);
  grid-template-columns:1fr;
  font-family:var(--gi-cuerpo);color:var(--gi-texto);
}
@media (min-width:56rem){
  .gi-contacto{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:start}
}
.gi-contacto h2{
  font-family:var(--gi-titular);font-size:var(--gi-t-xl);font-weight:600;
  color:var(--gi-verde-oscuro);margin:0 0 1.25rem;line-height:1.2;
}
.gi-contacto h2::before{
  content:"";display:block;width:2.5rem;height:3px;border-radius:2px;
  background:var(--gi-verde);margin-bottom:1rem;
}
.gi-contacto address{font-style:normal;line-height:1.8;margin:0 0 1.5rem}
.gi-contacto__vias{list-style:none;margin:0 0 1.5rem;padding:0}
.gi-contacto__vias li{display:flex;gap:.75rem;align-items:baseline;margin-bottom:.5rem}
.gi-contacto__vias span{
  font-family:var(--gi-titular);font-size:var(--gi-t-xs);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--gi-texto-suave);
  min-width:5.5rem;
}
.gi-contacto__vias a{color:var(--gi-verde-oscuro);text-decoration:none}
.gi-contacto__vias a:hover{text-decoration:underline}
.gi-contacto__ambito{line-height:1.7;margin:0 0 2rem;max-width:34ch}
/* El motivo sustituye al mapa: mismo hueco visual, sin iframe de terceros */
.gi-contacto__datos .gi-motivo{
  opacity:.5;width:clamp(120px,14vw,180px);stroke:var(--gi-verde-oscuro);
}
.gi-contacto__intro{font-weight:600;margin:0 0 .75rem;color:var(--gi-verde-oscuro)}
.gi-contacto__ayuda{margin:0 0 2rem;padding-left:1.4rem;line-height:1.65}
.gi-contacto__ayuda li{margin-bottom:.75rem}
.gi-contacto__ayuda li::marker{color:var(--gi-verde);font-weight:600}

/* Formulario: mismos bordes finos del resto, nada de cajas con sombra */
.gi-contacto .wpforms-field-label{
  font-family:var(--gi-titular);font-size:var(--gi-t-s);font-weight:600;
  color:var(--gi-verde-oscuro);
}
.gi-contacto input[type=text],.gi-contacto input[type=email],
.gi-contacto input[type=tel],.gi-contacto textarea{
  width:100%;font-family:var(--gi-cuerpo);font-size:var(--gi-t-m);
  padding:.7em .9em;border:1px solid rgba(16,22,26,.22);border-radius:2px;
  background:#fff;color:var(--gi-texto);
}
.gi-contacto input:focus,.gi-contacto textarea:focus{
  outline:2px solid var(--gi-verde);outline-offset:1px;border-color:var(--gi-verde);
}
/* WPForms se estiliza por VARIABLES CSS declaradas en :root, no por reglas:
   pelear con la especificidad de los selectores no servía (el botón seguía
   azul). Se redefinen sus variables en nuestro contenedor, que es la vía que
   el propio plugin ofrece — y así el estilo sobrevive a sus actualizaciones. */
.gi-contacto .wpforms-container{
  /* OJO: el plugin usa la variable «-alt» para el estado NORMAL
     (`input[type=submit]:not(:hover):not(:active)`) y la otra para
     hover/active. Está al revés de lo que sugiere el nombre. */
  --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-contacto .wpforms-container .wpforms-form button[type=submit],
.gi-contacto .wpforms-container .wpforms-form input[type=submit],
.gi-contacto .wpforms-container .wpforms-form .wpforms-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-contacto .wpforms-container .wpforms-form button[type=submit]:hover,
.gi-contacto .wpforms-container .wpforms-form input[type=submit]:hover,
.gi-contacto .wpforms-container .wpforms-form .wpforms-submit:hover{
  background:var(--gi-verde-oscuro);color:#fff;
}