/*
Theme Name: GIVARDI
Theme URI: https://givardi.com/
Description: Tema hijo de Hello Elementor para GIVARDI. Artefacto propio donde viviran las fuentes autoalojadas y el CSS del proyecto (plan 16.1; RNF-01, RF-15). Unico CSS propio del sitio; se encola desde functions.php.
Author: GIVARDI
Author URI: https://givardi.com/
Template: hello-elementor
Version: 0.1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: givardi
*/

/* ==========================================================================
   CSS de GIVARDI

   Este es el UNICO CSS propio del proyecto (plan 10.2: "un solo CSS propio
   en el tema hijo; sin CSS por pagina duplicado; sin frameworks; sin
   librerias de animacion"). No se crea ningun otro archivo de estilos.

   Estado (T029): contiene los nueve tokens de color de la seccion 1.
   Las secciones 2, 3 y 4 siguen vacias de reglas.

   Carga: Hello Elementor 3.5.1 no encola style.css en ningun caso, ni la
   del tema padre ni la del hijo, asi que este archivo se encola desde
   functions.php de este mismo tema hijo: una sola vez y sin reencolar
   ningun CSS del tema padre.

   Sin dependencias externas: sin frameworks, sin CDN y sin importaciones.
   ========================================================================== */


/* ==========================================================================
   1. TOKENS
   Propiedades personalizadas: color, espaciado y contenedores.
   Color: T029. Espaciado y contenedores: T034.
   ========================================================================== */

:root {

	/* Paleta de marca - docs/brand.md seccion 5.
	   Los cinco colores corporativos, con el valor exacto de brand.md.
	   Ningun color del sitio debe escribirse fuera de estos tokens (RF-15). */

	--navy: #071D49;        /* Fondos oscuros, encabezados, pie */
	--blue: #1267E8;        /* CTA, enlaces, foco, la V */
	--white: #FFFFFF;       /* Fondo principal */
	--gray-light: #F5F7FA;  /* Superficies secundarias */
	--gray-text: #374151;   /* Texto de cuerpo */

	/* Variaciones justificadas - plan 5.3.
	   RF-15 permite ampliar la paleta solo si la ampliacion se documenta.
	   Las cuatro existen porque un requisito concreto las exige y ninguna
	   es decorativa. Ninguna otra variacion esta autorizada. */

	--blue-dark: #0E52BA;   /* A-02: estado hover/active distinguible del reposo */
	--border: #6B7280;      /* A-03: borde de campo de formulario, contraste >= 3:1 */
	--error: #B00020;       /* A-06: estado de error del formulario */
	--success: #1B6E43;     /* RF-08: confirmacion de envio */

	/* Escala de espaciado - plan 5.4. Base 8 px.
	   Los diez valores de la escala, ni uno mas. Todo espaciado del sitio debe
	   salir de aqui; no debe escribirse ninguna medida suelta fuera de ella.
	   En rem, como el resto del sistema, para que el espaciado acompane al
	   tamano de fuente que el visitante tenga configurado (RNF-03, WCAG 1.4.4).
	   Ninguna hoja redefine html { font-size }, luego 1rem = 16 px. */

	--esp-4:   0.25rem;  /*   4 px */
	--esp-8:   0.5rem;   /*   8 px */
	--esp-12:  0.75rem;  /*  12 px */
	--esp-16:  1rem;     /*  16 px */
	--esp-24:  1.5rem;   /*  24 px */
	--esp-32:  2rem;     /*  32 px */
	--esp-48:  3rem;     /*  48 px */
	--esp-64:  4rem;     /*  64 px */
	--esp-96:  6rem;     /*  96 px */
	--esp-128: 8rem;     /* 128 px */

	/* Contenedores y anchos maximos - plan 5.4.
	   plan 6 prohibe anchos fijos en contenedores: estos son max-width, no
	   width, de modo que por debajo de ellos el contenedor sigue siendo fluido. */

	--ancho-contenido: 75rem;  /* 1200 px - ancho maximo de contenido */
	--ancho-texto:     45rem;  /*  720 px - ancho maximo de texto corrido */

	/* Espaciados fluidos - plan 5.4, interpolados entre 360 y 1440 px con el
	   mismo criterio que la escala tipografica: valor = min + (max - min) *
	   (v - 360) / 1080. plan 6 exige transicion continua, no por saltos, y
	   6.1 nombra expresamente el espaciado vertical de 64 a 96 px. Los dos
	   breakpoints de 6.2 son solo para cambios de estructura, no de espaciado. */

	--margen-lateral:  clamp(1.25rem, 1rem      + 1.1111vw, 2rem);  /* 20 -> 32 */
	--espacio-bloque:  clamp(4rem,    3.3333rem + 2.963vw,  6rem);  /* 64 -> 96 */
	--espacio-tarjeta: clamp(1.5rem,  1.3333rem + 0.7407vw, 2rem);  /* 24 -> 32 */

}

/* Restriccion derivada de A-03, de cumplimiento obligatorio (plan 5.3):
   --blue sobre --navy da 3,3:1 y NO puede usarse como texto de tamano
   normal. Sobre fondo navy el texto de cuerpo es --white, y --blue queda
   reservado a botones, bordes de foco y la V. Se mide en T030. */


/* ==========================================================================
   2. TIPOGRAFIA
   Familias autoalojadas y escala fluida.
   Familias, pesos y anchuras: T032. Escala fluida con clamp(): T033.
   ========================================================================== */

/* --- Familias autoalojadas (D-09, D-14) ---------------------------------
   Los cuatro WOFF2 viven en ./fonts/ de este mismo tema hijo y se sirven
   desde givardi.com: cero peticiones a dominios externos (plan 10.3).
   font-display: swap, conforme a plan 10.2.
   No se declara ninguna variante que no exista: no hay cursivas preparadas
   y no deben sintetizarse. */

@font-face {
	font-family: "Archivo";
	src: url("fonts/archivo-variable.woff2") format("woff2");
	font-weight: 600 700;      /* eje wght, recortado en T031 */
	font-stretch: 100% 125%;   /* eje wdth: de normal a expandida */
	font-style: normal;
	font-display: swap;
}

/* "Givardi Sans" es el SUBCONJUNTO de IBM Plex Sans generado en T031.
   IBM Plex Sans se distribuye bajo SIL OFL 1.1 con el Reserved Font Name
   "Plex", y su clausula 3 impide que una version modificada use ese nombre
   como nombre primario presentado al usuario. Subconjuntar es modificar, de
   modo que en T058 se renombro la familia -en los WOFF2 y aqui- sin tocar
   ni un glifo, ni una metrica, ni el subconjunto, ni la apariencia.
   Autoria original: IBM Corp., 2017. El aviso de licencia viaja dentro de
   cada archivo, en el registro name ID 13. Archivo no declara ningun
   Reserved Font Name y conserva su nombre. */

@font-face {
	font-family: "Givardi Sans";
	src: url("fonts/ibm-plex-sans-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Givardi Sans";
	src: url("fonts/ibm-plex-sans-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Givardi Sans";
	src: url("fonts/ibm-plex-sans-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

/* --- Asignacion segun plan 5.2 -------------------------------------------
   Display, Archivo: H1-H3 y botones, pesos 600 y 700, con anchura expandida
   UNICAMENTE en H1 y H2, que es donde plan 5.2 la preve.
   Texto, Givardi Sans: cuerpo, H4-H6, formularios y pie, pesos 400/500/600.
   Los respaldos son familias de sistema de metricas parecidas; ninguno
   genera peticion externa.
   Fuera de T032 por no corresponderle: las cifras en Archivo y el boton de
   Elementor se resuelven al construir C-01 en T038; las variables globales
   de Elementor se alinean en T035; los tamanos, en T033. */

body {
	font-family: "Givardi Sans", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
	font-weight: 400;
}

h1, h2, h3,
.tarjeta-servicio__titulo,
.tarjeta-proyecto__titulo,
.proceso > li::marker,
.cierre__titular {   /* T040 a T043, sin repetir la pila */
	font-family: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

h1, h2 {
	font-weight: 700;
	font-stretch: 125%;   /* anchura expandida: solo aqui (plan 5.2) */
}

h3 {
	font-weight: 600;
	font-stretch: 100%;
}

h4, h5, h6,
.proceso__titulo {   /* T042: el titulo del paso, sin repetir la pila */
	font-family: "Givardi Sans", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
	font-weight: 600;
}

input, textarea, select, label {
	font-family: "Givardi Sans", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}

button,
input[type="submit"],
input[type="button"],
.boton {   /* T038: C-01 tambien, para no repetir la pila de Archivo */
	font-family: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 600;
	font-stretch: 100%;
}


/* --- Escala tipografica fluida (plan 5.2, RNF-02) -------------------------
   Los siete niveles de la tabla de plan 5.2, interpolados linealmente entre
   360 px y 1440 px de ancho de ventana, que son los dos extremos que la
   documentacion tabula. Fuera de ese intervalo clamp() sujeta el valor: por
   debajo de 360 px queda el minimo y por encima de 1440 px, el maximo.
   No se usa ninguna media query: clamp() resuelve el requisito por si solo.

   Formula de cada nivel, con v = ancho de ventana en px:
     tamano = min + (max - min) * (v - 360) / 1080
   escrita como clamp(min, interseccion + pendiente*vw, max).

   Los valores absolutos van en rem para respetar el tamano de fuente que el
   visitante tenga configurado en su navegador. Ninguna hoja del sitio
   redefine html { font-size }, comprobado, de modo que 1rem = 16 px.

   H5 y H6 no figuran en la tabla de plan 5.2, que solo tabula siete niveles.
   Sus valores son una AMPLIACION EXPLICITA decidida por el propietario el
   2026-08-30 para cerrar esa laguna, interpolada con el mismo criterio que
   el resto de la escala. Objetivo declarado: H4 > H5 > H6 en todo el rango. */

:root {

	/* Tamanos: minimo a 360 px, maximo a 1440 px */
	--fs-h1:       clamp(2rem,      1.5rem    + 2.2222vw, 3.5rem);    /* 32 -> 56 */
	--fs-h2:       clamp(1.625rem,  1.3333rem + 1.2963vw, 2.5rem);    /* 26 -> 40 */
	--fs-h3:       clamp(1.3125rem, 1.1667rem + 0.6481vw, 1.75rem);   /* 21 -> 28 */
	--fs-h4:       clamp(1.125rem,  1.0625rem + 0.2778vw, 1.3125rem); /* 18 -> 21 */
	--fs-h5:       clamp(1.0625rem, 1.0208rem + 0.1852vw, 1.1875rem); /* 17 -> 19 */
	--fs-h6:       clamp(1rem,      0.9792rem + 0.0926vw, 1.0625rem); /* 16 -> 17 */
	--fs-cuerpo:   clamp(1.0625rem, 1.0417rem + 0.0926vw, 1.125rem);  /* 17 -> 18 */
	--fs-pequeno:  clamp(0.9375rem, 0.9167rem + 0.0926vw, 1rem);      /* 15 -> 16 */
	--fs-etiqueta: clamp(0.8125rem, 0.7917rem + 0.0926vw, 0.875rem);  /* 13 -> 14 */

	/* Interlineados, de la misma tabla */
	--lh-h1: 1.1;
	--lh-h2: 1.15;
	--lh-h3: 1.25;
	--lh-h4: 1.3;
	--lh-h5: 1.35;
	--lh-h6: 1.4;
	--lh-cuerpo: 1.6;
	--lh-pequeno: 1.55;
	--lh-etiqueta: 1.4;

}

/* Aplicacion a los elementos que tienen selector propio. Cuerpo pequeno y
   etiqueta quedan disponibles como variables: sus usos son de componente y
   se asignan al construir C-01 a C-08 desde T038. */

body {
	font-size: var(--fs-cuerpo);
	line-height: var(--lh-cuerpo);
}

h1 {
	font-size: var(--fs-h1);
	line-height: var(--lh-h1);
}

h2 {
	font-size: var(--fs-h2);
	line-height: var(--lh-h2);
}

h3 {
	font-size: var(--fs-h3);
	line-height: var(--lh-h3);
}

h4 {
	font-size: var(--fs-h4);
	line-height: var(--lh-h4);
}

h5 {
	font-size: var(--fs-h5);
	line-height: var(--lh-h5);
}

h6 {
	font-size: var(--fs-h6);
	line-height: var(--lh-h6);
}

/* Longitud maxima de linea del texto corrido.
   Hay DOS limites documentados y se respetan los dos: plan 5.2 fija 68
   caracteres y plan 5.4 fija 720 px de ancho maximo de texto corrido.
   Se cruzan. Medido sobre la fuente real, el "0" de Givardi Sans avanza
   0,6 em, luego 68ch son 693,6 px con el cuerpo a 17 px y 734,4 px con el
   cuerpo a 18 px. Por debajo de unos 1058 px de ventana manda el limite de
   caracteres; por encima, el de 720 px. min() aplica siempre el menor. */
p {
	max-width: min(68ch, var(--ancho-texto));
}

/* --- Color base de los elementos (T035) ---------------------------------
   Aplica los tokens a los elementos, sin lo cual desactivar los colores por
   defecto de Elementor dejaria el texto en el #333 del reset de Hello.
   El reparto no se decide aqui: es el que plan 5.3 ya documenta en su
   columna Uso -- navy para encabezados, gray-text para el texto de cuerpo
   y blue para los enlaces -- y T030 midio los tres sobre blanco: 16,39:1,
   10,31:1 y 5,08:1, los tres conformes con AA para texto normal.
   Los estados de foco y hover se construyen en T039; aqui solo el reposo. */

body {
	color: var(--gray-text);
	background-color: var(--white);
}

h1, h2, h3, h4, h5, h6 {
	color: var(--navy);
}

a {
	color: var(--blue);
}


/* ==========================================================================
   3. COMPONENTES
   Los ocho componentes reutilizables C-01 a C-08 (plan 5.5), con sus
   estados y su contorno de foco. Foco global en T039; C-01 en T038; el
   resto de componentes, desde T040.
   ========================================================================== */

/* --- Foco visible global (T039, A-02) ------------------------------------
   A-02 exige el contorno "en todo elemento enfocable" y T039 que "ningun
   elemento enfocable quede sin indicador". Valores exactos de plan 5.5 y
   5.6: 3 px en --blue con separacion de 2 px. No se inventa nada mas.

   POR QUE ESTA LISTA Y NO *:focus. El selector escueto :focus-visible ya
   cubre cualquier elemento enfocable, y solo cuando el navegador decide que
   el foco debe verse, de modo que distingue teclado de puntero sin JS. Pero
   su especificidad es (0,1,0) y el reset de Hello Elementor trae su propio
   foco -contorno negro de 2 px mas halo blanco de 4 px- con selectores de
   (0,1,1) y (0,2,1), que le ganarian. Por eso se repiten los mismos
   selectores: igual especificidad, y gana el nuestro por cargar despues.

   [tabindex] se incluye porque A-02 dice "todo elemento enfocable" y un
   tabindex="0" lo es; ademas Hello ya lo pinta de negro, asi que omitirlo
   dejaria un foco ajeno al sistema. Se excluye tabindex="-1", que no es
   alcanzable con el tabulador.

   box-shadow: none retira el halo blanco de 4 px que anade Hello y que la
   documentacion no contempla, para que el indicador sea exactamente el que
   describe A-02. No afecta al anillo de hover del boton secundario, cuya
   regla tiene mayor especificidad.

   El contorno NO altera la maquetacion: outline se pinta fuera del modelo de
   caja y no ocupa espacio, de modo que no puede generar CLS. Es la razon de
   usar outline y no border ni box-shadow para el foco. */

:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
	outline: 3px solid var(--blue);
	outline-offset: 2px;
	box-shadow: none;
}

/* --- C-01 Boton (T038, plan 5.5 y 5.6) -----------------------------------
   Tres variantes: primario, secundario y enlace. Sirve igual sobre <button>
   que sobre <a>, porque un CTA puede ser lo uno o lo otro.

   CONVENCION PARA ELEMENTOR: se aplica escribiendo "boton boton--primario"
   -o --secundario, o --enlace- en el campo de clases CSS del widget. NO se
   estiliza .elementor-button: el sistema vive en una sola clase propia y asi
   un cambio aqui alcanza a todas sus apariciones.

   RESET NECESARIO: el reset de Hello Elementor pinta los botones en #c36 con
   radio de 3 px y relleno propio. La clase lo neutraliza sin recurrir a la marca de prioridad de CSS,
   porque una clase gana a un selector de elemento y ademas carga despues.

   NO SE IMPLEMENTA el estado deshabilitado: plan 5.6 dice literalmente "No se
   usa: el MVP no tiene botones deshabilitados".
   NO SE APLICA la V: plan 5.1 la limita a cuatro usos y el boton no es uno de
   ellos; anadirla seria el quinto uso que T037 prohibe.

   Valores decididos por el propietario el 2026-08-30, por no constar en la
   documentacion: radio 0, primario sin borde, relleno horizontal --esp-24,
   texto en la escala de cuerpo, y el aspecto de secundario y enlace. */

.boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--esp-48);   /* 48 px, plan 5.5 */
	min-width: var(--esp-48);    /* cubre el area tactil de 44x44 px (A-01) */
	padding-inline: var(--esp-24);
	font-size: var(--fs-cuerpo);
	line-height: var(--lh-cuerpo);
	text-align: center;
	text-decoration: none;
	background-color: transparent;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	transition: background-color 150ms, border-color 150ms, color 150ms;
}

/* C-01 no declara foco propio: lo hereda del foco global de T039, que cubre
   <button> y <a> con los mismos valores. Se retiro la regla local por ser
   exactamente redundante y para no tener dos fuentes de verdad. */

/* Activo sin animacion (plan 5.6). */
.boton:active {
	transition: none;
}

/* Primario: fondo --blue, texto blanco (plan 5.5). */
.boton--primario {
	background-color: var(--blue);
	color: var(--white);
}

.boton--primario:hover,
.boton--primario:active {
	background-color: var(--blue-dark);
}

/* Secundario: contorno. El trazo usa --v-grosor, el mismo 2 px del sistema. */
.boton--secundario {
	border: var(--v-grosor) solid var(--blue);
	color: var(--blue);
}

/* Segunda senal NO cromatica del hover: el trazo pasa de 2 a 4 px mediante un
   anillo interior, que no altera las dimensiones y por tanto no genera CLS.
   No es una sombra difusa: desenfoque cero y el mismo color del borde. */
.boton--secundario:hover,
.boton--secundario:active {
	border-color: var(--blue-dark);
	color: var(--blue-dark);
	box-shadow: inset 0 0 0 var(--v-grosor) var(--blue-dark);
}

/* --- C-02 Tarjeta de servicio (T040, plan 5.5) ---------------------------
   Tres piezas y ninguna mas (T040 y plan 4.1 bloque 2): titulo, una frase de
   beneficio y enlace. La informacion adicional que plan 4.2 pide para
   /servicios/ se resuelve en el contexto de esa pagina, no como campos nuevos.

   ESTRUCTURA PREVISTA:
     <article class="tarjeta-servicio">
       <h3 class="tarjeta-servicio__titulo">...</h3>
       <p  class="tarjeta-servicio__texto">...</p>
       <a  class="tarjeta-servicio__enlace boton boton--enlace" href="...">...</a>
     </article>
   La etiqueta del titulo la elige cada pagina segun su jerarquia (A-07); la
   clase aporta el estilo de nivel H3, de modo que el componente no impone
   ningun nivel semantico.

   Valores decididos por el propietario el 2026-08-30, por no constar en la
   documentacion: radio 0, fondo --gray-light, sin borde, sin sombra, titulo
   con estilo H3, y el tratamiento de la V que se describe mas abajo. */

/* Reticula. plan 6.1 la fija literalmente y anade que "el numero de columnas
   lo decide el ancho disponible, no un breakpoint": por eso no lleva ninguna
   consulta de medios.
   De ahi salen solos el paso de 1 a 2 columnas y el de 4 que cita plan 6.2. */
.tarjetas {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--espacio-tarjeta);
}

/* La tarjeta. align-items: stretch es el valor por defecto de la retícula, de
   modo que todas las de una fila comparten altura; el enlace se empuja al pie
   con margin-block-start: auto para que queden alineados aunque los textos
   tengan longitudes muy distintas (CL-09).
   NO lleva overflow: hidden, que recortaria el contorno de foco del enlace. */
/* Base comun de las tarjetas del sistema. C-02 y C-03 comparten superficie,
   relleno, disposicion y ausencia de borde, radio y sombra. Lo que difiere se
   declara despues, para no duplicar ni convertir C-03 en una copia de C-02. */
.tarjeta-servicio,
.tarjeta-proyecto {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--esp-12);
	padding: var(--espacio-tarjeta);
	background-color: var(--gray-light);
	border: 0;
	border-radius: 0;
}

/* C-02 reserva SIEMPRE sitio al pie para la V, que siempre esta presente.
   C-03 solo la reserva cuando la tarjeta es pulsable: ver mas abajo. */
.tarjeta-servicio {
	padding-block-end: calc(var(--espacio-tarjeta) + var(--esp-48));
}

.tarjeta-servicio__titulo,
.tarjeta-proyecto__titulo {
	margin: 0;
	font-size: var(--fs-h3);
	line-height: var(--lh-h3);
	font-weight: 600;
	font-stretch: 100%;
	color: var(--navy);
}

/* CORRECCION POSTERIOR (T067, 2026-09-06) - el interlineado del titulo real.
   La estructura prevista mas arriba situa la clase sobre el propio <h3>. El
   widget de encabezado de Elementor la coloca en su ENVOLTORIO y deja el texto
   en un <h3 class="elementor-heading-title"> interior, de modo que la regla
   anterior aplica --lh-h3 al envoltorio pero NO al elemento que compone el
   texto: ahi gana .elementor-heading-title { line-height: 1 }, de
   especificidad (0,1,0), sobre h3, que es (0,0,1).
   Medido en givardi.com el 2026-09-06: el titulo se componia a ratio 1 y no a
   1,25, en /servicios/ y en la portada por igual.
   Se corrige con el MISMO token de la escala de T033: ningun valor numerico
   nuevo y ninguna marca de prioridad -(0,1,1) basta para ganar-.
   Solo interlineado: familia, tamano, peso, anchura, contenido y estructura
   de Elementor quedan intactos.
   Trazabilidad: T033 la escala, T040 el componente, T065 y T067 sus instancias. */
.tarjeta-servicio__titulo h3 {
	line-height: var(--lh-h3);
}

.tarjeta-servicio__texto,
.tarjeta-proyecto__texto,
.tarjeta-proyecto__trabajo {
	margin: 0;
	max-width: none;   /* dentro de la tarjeta manda el ancho de la columna */
}

.tarjeta-servicio__enlace,
.tarjeta-proyecto__enlace {
	align-self: start;
	margin-block-start: auto;
}

/* ENLACE EXTENDIDO. Un unico <a> real; su ::after cubre la tarjeta, que es su
   ancestro posicionado. Asi toda la tarjeta es pulsable SIN anidar enlaces y
   con una sola entrada en el arbol de accesibilidad. El contorno de foco
   sigue perteneciendo al enlace real y lo aporta el foco global de T039. */
.tarjeta-servicio__enlace::after,
.tarjeta-proyecto__enlace::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* LA V. Uso 3 de plan 5.1: "diagonal que se extiende al pasar el puntero o al
   recibir el foco", que comunica "esto es pulsable".
   Reutiliza --v-banda de T037 tal cual: NO se dibuja ninguna diagonal nueva y
   el angulo sigue declarado una sola vez en todo el archivo.
   La banda se tesela cada --esp-48, de modo que en reposo se ve un solo trazo
   diagonal y al extenderse aparecen los siguientes: la marca crece, no se
   desplaza. Solo cambia el ancho de un elemento absoluto, asi que no altera
   el flujo y no puede generar CLS. Transicion de 150 ms, que plan 5.6
   autoriza expresamente "en color y en la V". */
.tarjeta-servicio::before,
.tarjeta-proyecto:has(.tarjeta-proyecto__enlace)::before {
	content: "";
	position: absolute;
	inset-inline-start: var(--espacio-tarjeta);
	inset-block-end: var(--espacio-tarjeta);
	height: var(--esp-24);
	width: var(--esp-48);
	background-image: var(--v-banda);
	background-size: var(--esp-48) 100%;
	background-repeat: repeat-x;
	transition: width 150ms;
}

/* :focus-within propaga al contenedor el foco del enlace interno. */
.tarjeta-servicio:hover::before,
.tarjeta-servicio:focus-within::before,
.tarjeta-proyecto:has(.tarjeta-proyecto__enlace):hover::before,
.tarjeta-proyecto:has(.tarjeta-proyecto__enlace):focus-within::before {
	width: calc(100% - var(--espacio-tarjeta) * 2);
}

/* Segunda senal del hover, no cromatica: el subrayado del enlace se engrosa,
   igual que hace C-01 por si mismo. */
.tarjeta-servicio:hover .tarjeta-servicio__enlace,
.tarjeta-servicio:focus-within .tarjeta-servicio__enlace,
.tarjeta-proyecto:hover .tarjeta-proyecto__enlace,
.tarjeta-proyecto:focus-within .tarjeta-proyecto__enlace {
	color: var(--blue-dark);
	text-decoration-thickness: var(--v-grosor);
}

/* Enlace: subrayado desde el reposo, que es ademas la segunda senal del hover
   al engrosarse. Sin fondo y sin borde. */
.boton--enlace {
	color: var(--blue);
	text-decoration: underline;
}

.boton--enlace:hover,
.boton--enlace:active {
	color: var(--blue-dark);
	text-decoration-thickness: var(--v-grosor);
}


/* --- C-03 Tarjeta de proyecto (T041, plan 5.5) ---------------------------
   Dos variantes: con imagen real y tipografica sin imagen (CL-19).
   Cinco campos, de plan 4.4 bloque 2 y de T041: nombre, descripcion breve y
   trabajo realizado son OBLIGATORIOS; imagen y enlace son OPCIONALES y
   desaparecen si no existen. Nada se rellena (CL-19).

   ESTRUCTURA PREVISTA, variante con imagen y enlace:
     <article class="tarjeta-proyecto">
       <img class="tarjeta-proyecto__imagen" src="..." alt="..."
            width="800" height="450" loading="lazy">
       <h3 class="tarjeta-proyecto__titulo">...</h3>
       <p  class="tarjeta-proyecto__texto">...</p>
       <p  class="tarjeta-proyecto__trabajo">...</p>
       <a  class="tarjeta-proyecto__enlace boton boton--enlace" href="...">...</a>
     </article>
   Variante tipografica: la misma sin <img> y sin <a>. No se sustituyen por
   nada: ni marco vacio, ni placeholder, ni icono, ni logotipo generico.

   Valores decididos por el propietario el 2026-08-30 por no constar en la
   documentacion: object-fit, object-position, patron de clicabilidad, fondo,
   nivel del titulo, composicion de la variante tipografica y presentacion del
   trabajo realizado. */

/* La imagen. Todo lo de esta regla lo fija plan 5.6 y 7.3 salvo object-fit y
   object-position. El radio de 4 px va sobre la propia imagen, de modo que no
   hace falta envolverla ni recortar con overflow. Sin overlay de color y sin
   sombra, que plan 5.6 prohibe expresamente. aspect-ratio mas los atributos
   width y height de plan 7.3 reservan el espacio y evitan el CLS. */
.tarjeta-proyecto__imagen,
.tarjeta-proyecto__imagen > img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: top;
	border-radius: 4px;   /* plan 5.6, valor documentado */
}

/* Trabajo realizado. Campo distinto de la descripcion, en cuerpo pequeno y
   peso 500: los dos existian ya sin uso asignado. T033 dejo el nivel
   "disponible como variable" para asignarlo al construir los componentes, y
   T032 dejo el peso 500 declarado y sin uso. Este es ese momento; no se crea
   ninguna escala nueva. */
.tarjeta-proyecto__trabajo {
	font-size: var(--fs-pequeno);
	line-height: var(--lh-pequeno);
	font-weight: 500;
}

/* CLICABILIDAD CONDICIONAL, que es la diferencia estructural con C-02.
   El enlace es opcional, asi que el patron de enlace extendido solo puede
   aplicarse cuando existe. :has() deriva el comportamiento de la estructura,
   de modo que no puede desincronizarse de ella ni exige recordar una clase.
   Si el navegador no soporta :has(), la regla se descarta entera y la tarjeta
   queda sin V y sin extension: degrada hacia NO prometer una accion, que es
   el lado seguro.
   Sin enlace no hay elemento enfocable: no se crea ninguno artificial y no se
   usa tabindex para simular clicabilidad. */
.tarjeta-proyecto:has(.tarjeta-proyecto__enlace) {
	padding-block-end: calc(var(--espacio-tarjeta) + var(--esp-48));
}

/* VARIANTE TIPOGRAFICA. Sin imagen, la tarjeta recibe mas aire arriba para que
   la composicion se lea como intencionada y no como una tarjeta a la que le
   falta algo. Solo espaciado de la escala existente: ningun activo nuevo,
   ningun contenido nuevo, ninguna decoracion sustitutiva. */
.tarjeta-proyecto:not(:has(.tarjeta-proyecto__imagen)) {
	padding-block-start: calc(var(--espacio-tarjeta) + var(--esp-24));
}


/* --- C-02 y C-03 sobre el marcado real de Elementor (T047) ---------------
   Las dos tarjetas deben seguir siendo editables desde el constructor (RF-19,
   CL-15), de modo que el titulo, la descripcion, el trabajo realizado y la
   imagen se componen con widgets. Elementor envuelve cada widget en un div y
   la clase BEM cae por tanto en el ENVOLTORIO, quedando el elemento semantico
   dentro. Estas tres reglas reconcilian ambas cosas SIN cambiar un solo valor
   visual, sin marcas de prioridad y sin retirar ninguna caja del flujo.

   1. EL ELEMENTO INTERIOR solo necesita perder el margen del tema padre. El
      tamano, el peso, la anchura y el color del titulo ya se los da la regla
      global de h3, y son exactamente los mismos valores que pedia la clase:
      no se duplica ni un solo valor. Las propiedades tipograficas del texto y
      del trabajo realizado se heredan del envoltorio, porque ninguna regla
      las fija directamente sobre el parrafo.

   2. ESPACIADO ENTRE WIDGETS. Elementor separa sus widgets con su propia
      variable, que el Kit fijo en 24 px en T035. Dentro de la tarjeta manda
      el gap de la tarjeta, asi que se pone a cero redefiniendo esa misma
      variable con el mismo selector del Kit pero acotado, de modo que gana por\n      ESPECIFICIDAD (0,3,0 frente a 0,2,0) y no por orden de carga. Es una de las dos unicas
      veces que C-02 y C-03 nombran una clase del constructor, y las dos van
      acotadas al interior de la tarjeta.

   3. EL ENVOLTORIO DEL ENLACE. Es el hijo directo del flex, de modo que es el
      que debe empujarse al pie. Y vuelve a position: static porque Elementor
      posiciona todos sus widgets: sin esto, el bloque contenedor del enlace
      extendido seria el propio widget y la zona pulsable cubriria solo el
      enlace en lugar de la tarjeta entera.

   La regla del enlace real se conserva intacta mas arriba, de modo que la
   estructura escrita a mano que documenta T040 sigue funcionando igual. */

.tarjeta-servicio__titulo > :is(h1, h2, h3, h4, h5, h6),
.tarjeta-proyecto__titulo > :is(h1, h2, h3, h4, h5, h6),
.tarjeta-servicio__texto > p,
.tarjeta-proyecto__texto > p,
.tarjeta-proyecto__trabajo > p {
	margin: 0;
	max-width: none;
}

.tarjeta-servicio > .elementor-widget:not(:last-child),
.tarjeta-proyecto > .elementor-widget:not(:last-child) {
	--kit-widget-spacing: 0px;
}

.tarjeta-servicio__pie,
.tarjeta-proyecto__pie {
	position: static;
	align-self: start;
	margin-block-start: auto;
}


/* --- C-04 Bloque de proceso (T042, plan 5.5) -----------------------------
   Tres piezas por paso: numero, titulo breve y descripcion. Ninguna mas: sin
   icono, sin subtitulo, sin CTA.

   ESTRUCTURA PREVISTA:
     <ol class="tarjetas proceso">
       <li class="proceso__paso">
         <h3 class="proceso__titulo">...</h3>
         <p  class="proceso__descripcion">...</p>
       </li>
       ... 02 ... 03 ...
     </ol>
   La etiqueta del titulo la elige cada pagina segun su jerarquia; la clase
   aporta el estilo, igual que en C-02 y C-03.

   POR QUE UNA <ol> Y POR QUE SE CONSERVA EL MARCADOR NATIVO. El contenido es
   una secuencia real -es el argumento con el que plan 5.5 justifica que este
   sea el unico componente numerado-, asi que la lista ordenada expresa el
   orden en el propio marcado: se entiende sin CSS y no depende de color ni de
   posicion (A-07).
   El numero NO se escribe en el marcado ni se genera con un contador: se deja
   el marcador nativo y solo se le da estilo. Tres consecuencias buscadas:
     - el lector de pantalla anuncia el numero UNA sola vez, porque no hay
       texto visual que duplique la posicion que la lista ya comunica;
     - NO se usa list-style: none, de modo que Safari con VoiceOver sigue
       anunciandola como lista y no hace falta la mitigacion con role="list"
       que si necesita .lista-v;
     - la numeracion no puede desincronizarse del orden real, que es lo que
       T042 pide comprobar.
   list-style-position: inside coloca el marcador dentro de la caja del <li>;
   como el primer hijo es un bloque, el numero queda en su propia linea sobre
   el titulo. Si un navegador no aplicara estilo a ::marker, el numero se
   seguiria viendo con el tipo heredado: degrada a menos vistoso, nunca a
   ausente.

   SIN la V: plan 5.1 la limita a cuatro usos y C-04 no es ninguno; anadirla
   seria el quinto uso que T037 prohibe.
   SIN conector, SIN fondo, SIN borde, SIN sombra y SIN degradado: el bloque se
   distingue por jerarquia tipografica, numeracion y espaciado.
   SIN interactividad: no hay enlaces, ni botones, ni elementos enfocables, ni
   estados propios de hover o foco. */

.proceso {
	margin: 0;
	padding: 0;
	list-style-type: decimal-leading-zero;   /* produce 01, 02, 03 */
	list-style-position: inside;
}

.proceso > li::marker {
	font-size: var(--fs-h2);
	font-weight: 700;
	color: var(--blue);
}

.proceso__titulo {
	margin-block: var(--esp-12) 0;
	font-size: var(--fs-h4);
	line-height: var(--lh-h4);
	color: var(--navy);
}

.proceso__descripcion {
	margin-block: var(--esp-8) 0;
}

/* --- C-05 Cierre de conversion (T043, plan 5.5) --------------------------
   El componente que mas se repite: nueve paginas, todas menos las legales y
   la de contacto. Un solo componente reutilizado es lo que garantiza la
   coherencia que exige RF-10 y lo que elimina la deriva visual.

   CUATRO PIEZAS y ninguna mas: titular, texto breve de apoyo, CTA principal y
   canales alternativos subordinados cuando correspondan.

   ESTRUCTURA PREVISTA:
     <section class="cierre">              (o class="cierre cierre--navy")
       <div class="cierre__contenido">
         <h2 class="cierre__titular">...</h2>
         <p  class="cierre__texto">...</p>
         <a  class="boton boton--primario" href="/contacto/">Solicitar presupuesto</a>
         <p  class="cierre__canales">
           <a class="boton boton--enlace" href="mailto:...">...</a>
           <a class="boton boton--enlace" href="...">...</a>
         </p>
       </div>
     </section>

   El CTA reutiliza C-01 SIN modificarlo, y los canales su variante enlace: no
   se crea ningun estilo de boton nuevo ni una cuarta variante.
   El texto del CTA es "Solicitar presupuesto" y es IDENTICO en las dos
   variantes de fondo, como exige T043; plan 4 lo fija para todo el sitio.

   SIN la V: plan 5.1 la limita a cuatro usos y C-05 no es ninguno.
   SIN imagenes, ilustraciones ni elementos graficos: no se mencionan.
   SIN breakpoints: el bloque es una columna centrada y los canales envuelven
   solos, de modo que no hace falta ninguna consulta de medios. */

.cierre {
	padding-block: var(--espacio-bloque);
	padding-inline: var(--margen-lateral);
	background-color: var(--gray-light);
}

/* El bloque ocupa el ancho de contenido; el texto se acota al ancho de lectura. */
.cierre__contenido {
	max-width: var(--ancho-contenido);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--esp-24);
}

.cierre__titular,
.cierre__texto {
	margin: 0;
}

/* Titular de nivel de seccion. La anchura expandida es la que plan 5.2 reserva
   a H1 y H2, y este es un titular de H2. El parrafo conserva el ancho maximo
   de texto corrido que ya fija la regla de p, que respeta a la vez los 68
   caracteres de plan 5.2 y los 720 px de plan 5.4. */
.cierre__titular {
	max-width: var(--ancho-texto);
	font-size: var(--fs-h2);
	line-height: var(--lh-h2);
	font-weight: 700;
	font-stretch: 125%;
	color: var(--navy);
}

/* Canales alternativos: subordinados al CTA principal y envolviendo solos. */
.cierre__canales {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--esp-8);
}

/* --- Variante navy -------------------------------------------------------
   OVERRIDE CONTEXTUAL DE COLOR, no una variante nueva de C-01. Ni el tamano,
   ni la geometria, ni el area tactil de los botones cambian: solo el color,
   y solo porque sobre navy no queda alternativa.
   T030 midio --blue sobre --navy en 3,22:1, que basta para un elemento no
   textual pero NO para texto normal, cuyo umbral es 4,5:1. Por eso los
   canales pasan a --white, que da 16,39:1.
   El hover tampoco puede ir a --blue-dark, que sobre navy queda aun mas bajo:
   conserva --white y engrosa el subrayado, que es la senal no cromatica que
   ya emplea C-01.
   El CTA principal NO cambia: sigue con fondo --blue y texto --white, y su
   contorno de foco sigue siendo el de T039. */

.cierre--navy {
	background-color: var(--navy);
}

.cierre--navy .cierre__titular {
	color: var(--white);
}

.cierre--navy .cierre__texto {
	color: var(--gray-light);
}

.cierre--navy .cierre__canales .boton--enlace {
	color: var(--white);
}

.cierre--navy .cierre__canales .boton--enlace:hover,
.cierre--navy .cierre__canales .boton--enlace:active {
	color: var(--white);
	text-decoration-thickness: var(--v-grosor);
}

/* --- C-06 Campo de formulario (T044, plan 8.2 y 8.3) ---------------------
   Cinco tipos: texto, correo, seleccion, area de texto y casilla.

   Se estiliza el marcado REAL que emite el widget de Elementor Pro, no un
   marcado propio: .elementor-field-group envuelve, .elementor-field-label es
   la etiqueta y .elementor-field-textual son texto, correo, telefono,
   seleccion y area de texto. Asi el componente funciona con los campos que el
   constructor genera, sin sustituirlos ni romper su semantica nativa.

   ESTRUCTURA PREVISTA, por tipo:
     texto/correo/telefono:
       <div class="elementor-field-group">
         <label class="elementor-field-label" for="id">Nombre</label>
         <input class="elementor-field-textual" id="id" type="text"
                autocomplete="name" aria-describedby="id-error">
         <span class="campo__error" id="id-error">...</span>
       </div>
     seleccion: igual, con <select> dentro de .elementor-select-wrapper
     area de texto: igual, con <textarea rows="...">
     casilla: <div class="elementor-field-option"> con <input type="checkbox">
              y su <label for>, dentro de .elementor-field-subgroup

   La etiqueta va SIEMPRE encima, es visible y persistente, y no la sustituye
   ningun texto de ejemplo (A-05). Los campos opcionales llevan "(opcional)"
   dentro de la propia etiqueta, y los obligatorios NO llevan asterisco
   (plan 8.2). Eso es contenido del marcado, no CSS. */

/* Etiqueta: visible, persistente y encima del campo. */
.elementor-field-group .elementor-field-label {
	display: block;
	margin-block-end: var(--esp-8);
	font-size: var(--fs-pequeno);
	line-height: var(--lh-pequeno);
	font-weight: 500;
	color: var(--navy);
}

/* CONFLICTO A. Elementor emite
     .elementor-mark-required .elementor-field-label:after { color:red; content:"*" }
   que incumple dos cosas a la vez: plan 8.2 dice literalmente que los
   obligatorios NO se marcan con asterisco -porque un asterisco sin leyenda no
   es comprensible- y el rojo puro da 4,00:1 sobre blanco, por debajo de AA.
   Se vacia el contenido en vez de ocultar el pseudoelemento, y NO se sustituye
   por ningun otro simbolo: la obligatoriedad se comunica marcando los
   OPCIONALES en su etiqueta. Misma especificidad, gana por orden de carga. */
.elementor-mark-required .elementor-field-label::after {
	content: "";
	padding-inline-start: 0;
}

/* CONFLICTOS C y D. Elementor y el reset de Hello imponen min-height 40px,
   radio 3px, bordes #666 y #69727d, texto #1f2124 y font-size 15px, todos
   ajenos al sistema. Se sustituyen por tokens. Especificidad (0,2,0), igual
   que la de Elementor, y gana por cargar despues. */
.elementor-field-group .elementor-field-textual {
	min-height: var(--esp-48);
	padding-block: var(--esp-12);
	padding-inline: var(--esp-16);
	background-color: var(--white);
	border: 1px solid var(--border);
	border-radius: 0;
	color: var(--gray-text);
	font-size: var(--fs-cuerpo);
	line-height: var(--lh-cuerpo);
	transition: none;   /* T048: retira el "todas, 300 ms" del tema padre */
}

/* min-height es un suelo, no una altura: el area de texto conserva su altura
   natural segun sus filas y sigue siendo multilinea. No se toca resize. */

/* CONFLICTO B. Elementor pone opacity .6 al texto de ejemplo, lo que deja
   cualquier color por debajo de AA: 3,34:1 con --gray-text y 4,30:1 con el
   suyo. GIVARDI no usa texto de ejemplo, pero se neutraliza de forma
   defensiva por si apareciera: opacidad plena y un token que cumple. */
.elementor-field-group .elementor-field-textual::placeholder {
	color: var(--gray-text);
	opacity: 1;
}

/* FOCO. Correccion pendiente desde T039. Elementor emite
     .elementor-field-group .elementor-field-textual:focus, con el contorno
     anulado a cero,
   con especificidad (0,3,0), que la regla global de T039 -que llega a (0,1,1)-
   no puede vencer. Se repite el selector minimo con :focus-visible: empata en
   especificidad y gana por orden de carga, sin recurrir a ninguna marca de
   prioridad. box-shadow: none retira ademas el halo interior de Elementor,
   que no forma parte del sistema. El resultado es exactamente el foco de
   T039, ni un valor mas. */
.elementor-field-group .elementor-field-textual:focus-visible {
	outline: 3px solid var(--blue);
	outline-offset: 2px;
	box-shadow: none;
}

/* ERROR. El borde cambia de color Y de grosor, y el mensaje textual asociado
   es el indicador que exige A-06: el color nunca va solo. Se engancha a
   aria-invalid, de modo que el estado visual y el semantico son el mismo dato
   y no pueden divergir. El grosor no altera la caja: box-sizing es border-box
   en todo el sitio, asi que no hay desplazamiento. */
.elementor-field-group .elementor-field-textual[aria-invalid="true"] {
	border-color: var(--error);
	border-width: 2px;
}

/* EXITO. Estado reutilizable, definido porque T044 lo exige, pero NO aplicado
   automaticamente: se activa anadiendo la clase al grupo cuando exista logica
   real que determine validez. Ningun campo debe mostrarse valido por el mero
   hecho de contener texto. El exito real del envio es la confirmacion del
   formulario de RF-08, que implementa T111. */
.elementor-field-group.campo--exito .elementor-field-textual {
	border-color: var(--success);
	border-width: 2px;
}

/* Mensajes junto al campo. El de error acompana siempre al borde rojo y se
   enlaza con aria-describedby; el de ayuda es opcional. */
.campo__error,
.campo__ayuda,
.campo__exito {
	display: block;
	margin-block-start: var(--esp-8);
	font-size: var(--fs-pequeno);
	line-height: var(--lh-pequeno);
}

.campo__error {
	color: var(--error);
	font-weight: 500;
}

.campo__exito {
	color: var(--success);
	font-weight: 500;
}

.campo__ayuda {
	color: var(--gray-text);
}

/* CASILLA. Se conserva la casilla NATIVA y se colorea con accent-color, que es
   la via accesible de darle color sin sustituirla por un widget propio.
   El cuadrado NO mide 48 px: mide --esp-24, por encima del minimo de 24 x 24
   de WCAG 2.5.8. Quien garantiza la zona de interaccion es la FILA completa,
   casilla mas etiqueta, con --esp-48 de altura minima: 48 px, por encima de
   los 44 x 44 exigidos. La etiqueta es pulsable por su asociacion for/id, que
   es marcado y no CSS. */
.elementor-field-subgroup .elementor-field-option {
	display: flex;
	align-items: center;
	gap: var(--esp-8);
	min-height: var(--esp-48);
}

.elementor-field-subgroup .elementor-field-option input[type="checkbox"] {
	inline-size: var(--esp-24);
	block-size: var(--esp-24);
	flex-shrink: 0;
	accent-color: var(--blue);
}

.elementor-field-subgroup .elementor-field-option label {
	margin: 0;
	font-size: var(--fs-cuerpo);
	line-height: var(--lh-cuerpo);
	color: var(--gray-text);
	cursor: pointer;
}

/* --- C-07 Encabezado de pagina (T045, plan 5.5) --------------------------
   Variante UNICA (plan 5.5) y exactamente DOS piezas, las que nombra T045:
   el H1 de la pagina y una linea de contexto. Ninguna mas.

   LO QUE NO LLEVA, Y POR QUE. Sin migas de pan: no aparecen mencionadas en
   plan.md, spec.md ni architecture.md, asi que no se anaden. Sin la V:
   plan 5.1 la limita a cuatro usos y este no es ninguno. Sin imagen, sin
   decoracion, sin variante navy y sin llamada a la accion interna. En las
   paginas de servicio, el CTA que pide plan 4.3 se compone JUNTO al
   encabezado, a nivel de pagina y reutilizando C-01: no es una pieza de
   C-07 ni justifica una segunda variante.

   SIN SUPERFICIE PROPIA. No declara fondo: hereda el de la pagina. Su
   relleno vertical es por tanto separacion real entre bloques, no espacio
   interior de una superficie de color como si ocurre en C-05.

   ESPACIADO VERTICAL: --espacio-bloque, de 64 a 96 px, que es el valor que
   plan 5.4 fija para la separacion vertical entre bloques. No se inventa
   ninguna excepcion para C-07. En la composicion real de las doce paginas
   no se duplica: los bloques de contenido corriente no declaran relleno
   vertical propio, de modo que cada junta la separa un solo --espacio-bloque.

   CASI TODO SE HEREDA. El H1 ya recibe de la seccion 2 su familia, su peso,
   su anchura expandida, su tamano fluido, su interlineado y su color; el
   parrafo ya recibe Givardi Sans 400, el cuerpo, --gray-text y su ancho
   maximo de 68 caracteres. C-07 no repite ni una sola de esas
   declaraciones: solo coloca las dos piezas. De ahi que no introduzca
   ninguna medida, ningun color y ninguna dependencia nueva.

   LA LINEA DE CONTEXTO NO ES UN ENCABEZADO. Va en un parrafo y en cuerpo de
   texto. Componerla con un tamano de titular la convertiria visualmente en
   un segundo encabezado y contradiria la verificacion de T045, que exige
   "ningun encabezado adicional".

   ALINEACION IZQUIERDA: no se declara. Es ya el valor heredado del
   documento, y anadirlo seria una declaracion redundante.

   ETIQUETA RECOMENDADA: un div. Se evita a proposito la etiqueta header,
   que fuera de main se anuncia como region de cabecera del sitio y
   duplicaria la que construye T053.

   <div class="encabezado-pagina">
     <div class="encabezado-pagina__contenido">
       <h1 class="encabezado-pagina__titulo">Nombre de la pagina</h1>
       <p class="encabezado-pagina__contexto">Linea de contexto.</p>
     </div>
   </div>                                                                  */

.encabezado-pagina {
	padding-block: var(--espacio-bloque);
	padding-inline: var(--margen-lateral);
}

.encabezado-pagina__contenido {
	max-width: var(--ancho-contenido);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--esp-16);
}

.encabezado-pagina__titulo,
.encabezado-pagina__contexto {
	margin: 0;
}

.encabezado-pagina__titulo {
	max-width: var(--ancho-texto);
}

/* --- C-08 Bloque legal (T046, plan 5.5 y 4.7) ----------------------------
   Variante UNICA (plan 5.5), para las tres paginas legales. T046 pide tres
   cosas: jerarquia de encabezados, listas reales y ancho de texto limitado.

   POR QUE SE ESTILAN ETIQUETAS Y NO CLASES. El texto legal lo compone un
   widget de texto, que emite h2, p, ul, ol y dl SIN clases. Acotar por
   etiqueta dentro de un unico envoltorio es lo que permite que el bloque
   funcione sobre ese marcado sin tener que clasificar a mano cada parrafo,
   y mantiene el componente poco acoplado: la unica clase que hay que poner
   es la del bloque.

   JERARQUIA. El H1 lo aporta C-07; C-08 empieza en H2, que es el nivel que
   plan 7 asigna a los bloques de plan 4 y que respeta A-07. No hay ningun
   H1 interno. Los encabezados de nivel inferior conservan su tamano de la
   escala de T033 y su ancho de lectura, pero su espaciado de seccion NO se
   define aqui: plan 4.7 describe las tres paginas legales con un solo nivel
   de bloques, de modo que inventar un ritmo para H3 seria adelantarse.

   SIN SUPERFICIE. No declara fondo, ni borde, ni sombra: hereda el --white
   de la pagina. Sin la V, que plan 5.1 limita a cuatro usos. Sin imagenes.

   SIN LLAMADA A LA ACCION. RF-10 exceptua expresamente las paginas legales
   y plan 4.7 lo repite, asi que el componente no define ningun boton y no
   debe insertarse ninguno dentro de el.

   RITMO DE LECTURA. --esp-48 encima de cada seccion y --esp-16 debajo: el
   encabezado queda mas cerca del texto que introduce que del anterior, que
   es lo que agrupa la seccion. Deliberadamente NO se usa --espacio-bloque,
   que plan 5.4 reserva para separar bloques de pagina y que aqui romperia
   la continuidad de lectura dentro de un mismo documento.

   CONFLICTO A CORREGIDO: el subrayado. Hello Elementor declara los enlaces
   sin decoracion, y su unica regla que los subraya vive dentro del bloque
   de impresion. En pantalla, por tanto, un enlace dentro de un parrafo
   legal se distinguiria SOLO por color. Medido: --blue contrasta 5,08:1
   con el blanco, pero solo 2,03:1 con el --gray-text que lo rodea, y WCAG
   1.4.1 exige 3:1 para admitir la distincion por color a secas. El
   subrayado permanente no es estetico: es lo que sostiene AA. Se conserva
   en reposo, en hover y en foco.

   CONFLICTO B CORREGIDO: el hover ajeno. Hello declara a:hover con un color
   fuera de los nueve tokens, y su especificidad (0,1,1) vence a la regla
   base de enlace, que es (0,0,1). C-01, C-02, C-03 y C-05 no estaban
   afectados porque sus reglas llegan a (0,2,0). Aqui se neutraliza SOLO
   dentro del bloque legal, con (0,2,1): no se toca Hello globalmente.

   ESTRUCTURA

   <div class="bloque-legal">
     <div class="bloque-legal__contenido">
       <h2>Objeto</h2>
       <p>Texto legal con un <a href="...">enlace</a> subrayado.</p>
       <ul><li>Elemento</li><li>Elemento</li></ul>
       <dl>
         <dt>Denominacion</dt><dd>...</dd>
         <dt>Domicilio</dt><dd>...</dd>
       </dl>
     </div>
   </div>                                                                  */

.bloque-legal {
	padding-inline: var(--margen-lateral);
}

.bloque-legal__contenido {
	display: flow-root;
	max-width: var(--ancho-contenido);
	margin-inline: auto;
}

/* El primer elemento visible no arrastra separacion de seccion. El segundo
   selector alcanza el caso en que el constructor envuelve el contenido. */
.bloque-legal__contenido > :first-child,
.bloque-legal__contenido > :first-child :first-child {
	margin-block-start: 0;
}

/* Una sola columna de lectura: nada la desborda. Los parrafos ya reciben
   min(68ch, var(--ancho-texto)) de la regla general, y no se repite. */
.bloque-legal h2,
.bloque-legal h3,
.bloque-legal h4,
.bloque-legal h5,
.bloque-legal h6,
.bloque-legal ul,
.bloque-legal ol,
.bloque-legal dl {
	max-width: var(--ancho-texto);
}

.bloque-legal h2 {
	margin-block-start: var(--esp-48);
	margin-block-end: var(--esp-16);
}

.bloque-legal p {
	margin-block-start: 0;
	margin-block-end: var(--esp-16);
}

/* Listas reales (A-07): marcador y sangria nativos, sin anular ninguno de
   los dos. Solo se fija el ritmo vertical, con tokens de T034. */
.bloque-legal ul,
.bloque-legal ol,
.bloque-legal dl {
	margin-block: var(--esp-16);
}

.bloque-legal li + li {
	margin-block-start: var(--esp-8);
}

/* Datos identificativos: pares etiqueta/valor en lista de descripcion. No
   es una tabla y no se convierte en columnas: apilado, se lee igual de bien
   en movil y conserva su significado sin CSS. La etiqueta se distingue por
   peso y por el color de encabezado, no por un color nuevo. */
.bloque-legal dt {
	margin-block-start: var(--esp-12);
	font-weight: 600;
	color: var(--navy);
}

.bloque-legal dt:first-child {
	margin-block-start: 0;
}

.bloque-legal dd {
	margin-inline-start: 0;
}

.bloque-legal a {
	color: var(--blue);
	text-decoration: underline;
}

.bloque-legal a:hover,
.bloque-legal a:active {
	color: var(--blue-dark);
	text-decoration-thickness: var(--v-grosor);
}

/* ==========================================================================
   4. UTILIDADES
   Clases auxiliares reutilizables. El corte de la V se define aqui (T037).
   ========================================================================== */

/* --- El corte de la V (T037, D-13) ---------------------------------------
   La unica licencia decorativa del sitio (plan 5.1): una diagonal de 2 px en
   Electric Blue derivada del angulo de la V del logotipo, que aparece siempre
   con el mismo significado, marcar donde el visitante puede avanzar.

   GEOMETRIA. Medida sobre el logotipo en T026 y NO vuelta a medir aqui:
     dx/dy = 0,6, es decir la proporcion 3:5
     30,96 grados respecto a la vertical
     59,04 grados respecto a la horizontal
     tolerancia +/- 0,2 grados
   NO es el angulo del corte azul de la G, que mide 42,44 grados. T026 dejo
   advertido que no son intercambiables.

   TRADUCCION A CSS. En linear-gradient() el angulo se mide desde "hacia
   arriba" y en sentido horario, y las bandas de color salen PERPENDICULARES
   a esa linea. Para que la banda corra en la direccion (3, 5) hace falta el
   angulo cuya tangente es 5/3, que resulta ser 59,036 grados, el mismo valor
   que el angulo respecto a la horizontal.
     efectivo: dx/dy = 0,600006  ->  30,9640 grados respecto a la vertical
     desviacion: 0,000243 grados, muy dentro de la tolerancia de +/- 0,2

   POR QUE UN GRADIENTE. El angulo de un gradiente es absoluto y no depende
   del tamano de la caja, igual que una rotacion: comprobado que ambos dan la
   misma geometria en 100x100, 200x100, 320x160 y 1200x600. Se descarta
   clip-path con porcentajes, que si se deforma con la relacion de aspecto y
   llega a desviarse 32 grados. Entre las dos equivalentes se elige el
   gradiente por ser mas reutilizable: no necesita elemento adicional, ni
   control de desbordamiento, y cubre cualquier caja.

   Es puramente decorativa: se pinta como fondo, no anade nodos al DOM, no
   ocupa espacio, no altera el flujo, no la anuncian los lectores de pantalla
   y no genera ninguna peticion de red ni dependencia externa. */

:root {

	/* El angulo se declara UNA SOLA VEZ en todo el archivo. Las paradas de
	   color y las dos bandas se derivan de el; la banda espejo se obtiene por
	   calc(-1 * ...), de modo que ningun uso reescribe la geometria. */

	--v-angulo: 59.036deg;   /* respecto a la horizontal; tangente = 5/3 */
	--v-grosor: 2px;         /* plan 5.1: diagonal de 2 px */

	--v-paradas:
		transparent calc(50% - var(--v-grosor) / 2),
		var(--blue) calc(50% - var(--v-grosor) / 2),
		var(--blue) calc(50% + var(--v-grosor) / 2),
		transparent calc(50% + var(--v-grosor) / 2);

	--v-banda:        linear-gradient(var(--v-angulo), var(--v-paradas));
	--v-banda-espejo: linear-gradient(calc(-1 * var(--v-angulo)), var(--v-paradas));

}

/* La primitiva. Pinta la diagonal sobre cualquier caja. */
.corte-v {
	background-image: var(--v-banda);
	background-repeat: no-repeat;
}

/* --- Uso 2 de plan 5.1: marcador de lista --------------------------------
   "Punta de V en lugar de bullet". Comunica: elemento de una enumeracion.

   OPT-IN. Solo afecta a las listas que declaren la clase: no se aplica a
   ninguna lista de HTML, del administrador, de Elementor ni del contenido
   existente.

   Como se forma la punta: dos bandas, cada una en media caja, una al angulo
   de la V y otra a su espejo. Con la caja w x h, la banda superior pasa por
   (w/2, h/4) en direccion (3,5) y la inferior por (w/2, 3h/4) en direccion
   (3,-5); ambas cruzan y = h/2 en x = w/2 + 3h/20, de modo que **se
   encuentran exactamente en un punto**: el vertice. La caja adopta ademas la
   proporcion 3:5 de la propia V.

   ACCESIBILIDAD: list-style: none puede hacer que Safari con VoiceOver deje
   de anunciar la lista. Quien aplique esta utilidad debe anadir role="list"
   al elemento, conforme al criterio A-07 de listas reales. */

.lista-v {
	list-style: none;
	padding-left: 0;
}

.lista-v > li {
	position: relative;
	padding-left: var(--esp-16);
}

.lista-v > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: calc((1em * var(--lh-cuerpo) - 0.625em) / 2);
	width: 0.375em;   /* proporcion 3:5 de la V */
	height: 0.625em;
	background-image: var(--v-banda), var(--v-banda-espejo);
	background-size: 100% 50%;
	background-position: left top, left bottom;
	background-repeat: no-repeat;
}

/* --- Uso 4 de plan 5.1: separacion entre bloques -------------------------
   "Filete diagonal de 2 px". Comunica: cambio de seccion.

   OPT-IN y puramente decorativo. No se aplica todavia a ninguna pagina.
   Reutiliza la misma banda que la primitiva, sin repetir la geometria.
   Quien lo aplique debe usar un elemento vacio y sin contenido semantico. */

.separador-v {
	height: var(--esp-24);
	background-image: var(--v-banda);
	background-repeat: no-repeat;
}


/* ==========================================================================
   5. MOVIMIENTO
   Todo el movimiento del sitio, reunido en un solo sitio (T048, plan 5.6).
   ========================================================================== */

/* --- Inventario ----------------------------------------------------------
   plan 5.6 lo fija sin margen: "transiciones de 150 a 200 ms en color y en la
   V. Nada mas", y "cada animacion del sitio debe poder explicarse en una
   frase" (RF-15). El sistema tiene EXACTAMENTE DOS, y las dos se explican:

     1. C-01: el color del boton cambia en 150 ms al pasar el puntero.
        Propiedades acotadas una a una -fondo, borde y color-, nunca "todas".
        El estado activo la anula, porque plan 5.6 lo pide sin animacion.
     2. C-02 y C-03: la V se extiende en 150 ms y comunica "esto es pulsable".
        Solo cambia el ancho de un elemento absoluto, de modo que no altera el
        flujo y no puede generar CLS.

   Y ninguna mas: cero animaciones con fotogramas, cero cambios de forma o de posicion, cero
   opacidades animadas, cero animaciones de entrada y cero efectos ligados al
   desplazamiento. Verificado ademas que las ocho plantillas de T047 no
   guardan ningun ajuste de animacion, de efecto de movimiento ni de fijacion.

   --- Movimiento reducido -------------------------------------------------
   plan 5.6 exige respetar la preferencia "desactivando toda transicion". La
   consulta de preferencia es la unica forma de leerla, y por eso es la unica
   de todo el archivo: no es un punto de ruptura y no contradice T036, que
   prohibe los breakpoints propios.

   ACOTADA A NUESTROS COMPONENTES, no a un selector universal: se nombran las
   dos transiciones que el sistema declara y ninguna mas, de modo que no se
   toca ningun widget ajeno ni ningun comportamiento funcional.

   QUE NO CAMBIA con la preferencia activada: los estados siguen siendo
   perceptibles y llegan al MISMO estado final. El color del boton cambia
   igual, solo que de golpe. La V se extiende hasta exactamente el mismo
   ancho, solo que sin recorrerlo. El contorno de foco de T039 no se toca en
   absoluto: nunca estuvo animado. No se oculta ningun estado, no se altera
   ninguna geometria final y no se pierde ninguna funcionalidad. */

@media (prefers-reduced-motion: reduce) {

	.boton,
	.tarjeta-servicio::before,
	.tarjeta-proyecto:has(.tarjeta-proyecto__enlace)::before {
		transition: none;
	}

}


/* ============================================================
   6. CABECERA
   ------------------------------------------------------------
   T054. La cabecera es una plantilla de Theme Builder (#54, con
   la condicion "todo el sitio"). Todo su aspecto vive aqui: la
   plantilla no guarda ni un color, ni un tamano, ni un margen,
   ni un punto de ruptura propio.

   Esta seccion no declara ningun cambio progresivo, de modo que
   la seccion 5 no necesita cubrirla.
   ============================================================ */

/* La banda ocupa el ancho de la ventana; la barra se acota al
   ancho de contenido, igual que el resto del sitio. */
.cabecera {
	padding-block: var(--esp-16);
	padding-inline: var(--margen-lateral);
}

.cabecera__barra {
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--esp-24);
	width: 100%;
	max-width: var(--ancho-contenido);
	margin-inline: auto;
}

/* Elementor impone la direccion de sus contenedores con una variable, no con
   la propiedad: .e-con.e-flex fija --flex-direction en column con
   especificidad (0,2,0), y .e-con-full.e-flex la consume. La declaracion de
   arriba, con (0,1,0), perdia, y la barra se apilaba en tres filas en
   escritorio. Se corrige por el mismo mecanismo que usa Elementor -la
   variable- y empatando su especificidad, de modo que gana por orden de
   carga. Sin marca de prioridad. Detectado por inspeccion visual despues de
   T054; corregido sin rediseniar nada. */
.cabecera__barra.e-con {
	--flex-direction: row;
}

/* Elementor separa sus widgets con --kit-widget-spacing, pensado
   para apilarlos en columna. En una fila eso anadiria un margen
   inferior suelto. Misma correccion que en C-02 y C-03. */
.cabecera__barra > .elementor-widget:not(:last-child) {
	--kit-widget-spacing: 0px;
}

/* --- Logotipo ---------------------------------------------- */

.cabecera__logo {
	flex: 0 0 auto;
	margin-inline-end: auto;
}

.cabecera__logo a {
	display: block;
	line-height: 0;
}

/* El SVG trae aire propio: la tinta ocupa 334 de sus 793 unidades
   verticales. Por eso la altura del archivo es mayor que la
   altura visible del logotipo, y no se recorta el original. */
.cabecera__logo img {
	display: block;
	width: auto;
	height: var(--esp-96);
}

/* --- Navegacion -------------------------------------------- */

.cabecera__navegacion {
	flex: 0 1 auto;
}

.cabecera__navegacion .elementor-item,
.cabecera__navegacion .elementor-sub-item {
	position: relative;
	padding-block: var(--esp-8) var(--esp-16);
	color: var(--navy);
	text-decoration: none;
}

.cabecera__navegacion .elementor-item:hover,
.cabecera__navegacion .elementor-sub-item:hover {
	color: var(--blue-dark);
}

.cabecera__navegacion .elementor-nav-menu--dropdown {
	background-color: var(--white);
}

/* --- CORRECCION POSTERIOR DE T054 (detectada en T066) -------- */
/* Con el menu cerrado, el desplegable conserva display:block y
   altura 0, pero sigue contando como elemento del contenedor
   flexible: reserva sus 24 px de hueco mas sus 10 px de margen
   superior. Son 34 px que no muestran nada y que en 360x640 se
   restaban de la primera pantalla que exige RF-02.

   Se le da el mismo trato que Elementor ya aplica por su cuenta a
   partir de 768 px, donde este mismo elemento es display:none.
   Solo mientras esta cerrado: la condicion es su propio
   aria-expanded, de modo que al abrirse la regla deja de aplicar y
   el desplegable recupera intactos su hueco, su margen y su
   altura. No se oculta el menu ni se altera su comportamiento
   abierto, que sigue entrando en el flujo y empujando el
   contenido. */
.cabecera__navegacion .elementor-menu-toggle[aria-expanded="false"] + .elementor-nav-menu__container {
	display: none;
}

/* --- USO 1 de la V (5.1): "donde estoy" --------------------- */
/* Consume --v-banda, que ya deriva de --v-angulo y --v-grosor:
   no se dibuja ninguna diagonal nueva ni aproximada. Las dos
   mitades son la misma banda y su espejo, colocadas una junto a
   la otra, de modo que reproducen la V del logotipo.

   La reciben solo el elemento actual y su ancestro. Nunca el
   hover, que cambia el color y nada mas, y nunca un elemento que
   no sea el sitio donde esta el visitante. En una pagina hija de
   Servicios se marcan las dos: Servicios en la barra por ser
   ancestro, y la hija dentro del submenu por ser la actual. Se
   leen como un rastro, no como adorno repetido. */
.cabecera__navegacion .current-menu-item > .elementor-item::after,
.cabecera__navegacion .current-menu-item > .elementor-sub-item::after,
.cabecera__navegacion .current-menu-ancestor > .elementor-item::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: var(--esp-4);
	margin-inline: auto;
	width: 0.625em;
	height: 0.375em;
	background-image: var(--v-banda), var(--v-banda-espejo);
	background-size: 50% 100%;
	background-position: left, right;
	background-repeat: no-repeat;
}

/* --- Llamada a la accion ----------------------------------- */
/* Reutiliza C-01 primario sin alterarlo: aqui solo se coloca. */
.cabecera__cta {
	flex: 0 0 auto;
}

/* --- Correcciones sobre el marcado del widget ---------------- */
/* Elementor pinta los elementos del submenu con #3f444b y texto
   blanco en hover, en foco, en .highlighted y en el elemento
   actual. Ese gris no pertenece a los nueve tokens de 5.3, y
   sobre el elemento actual taparia la V con un bloque oscuro.

   Se neutraliza empatando la especificidad y ganando por orden
   de carga, que es como T039 resolvio el mismo problema con el
   reset del tema padre. Sin marca de prioridad. */
.cabecera__navegacion .elementor-nav-menu--dropdown .elementor-item,
.cabecera__navegacion .elementor-sub-item {
	background-color: transparent;
}

/* El conmutador movil de Elementor mide 33 px. El sistema fija
   48 px como altura minima de destino tactil (5.5, A-01), de
   modo que se lleva al mismo suelo que C-01. */
.cabecera__navegacion .elementor-menu-toggle {
	min-width: var(--esp-48);
	min-height: var(--esp-48);
}

/* El widget deja el contorno de foco de sus enlaces en 3 px solid
   del color actual y separacion 0, en lugar del de T039. Medido
   en navegador: el boton C-01 de la propia cabecera si recibe el
   contorno correcto -3 px en --blue con separacion 2- y los
   enlaces del menu no. Se restituye A-02 con los valores exactos
   de T039, acotado a la cabecera y sin marca de prioridad. */
.cabecera__navegacion .elementor-item:focus-visible,
.cabecera__navegacion .elementor-sub-item:focus-visible {
	outline: 3px solid var(--blue);
	outline-offset: 2px;
	box-shadow: none;
}

/* --- Movil: unico punto de ruptura, el de 6.2 ---------------- */
/* Por debajo de 768 px la barra pasa a dos filas. Es un cambio
   de estructura, exactamente el supuesto que 6.2 reserva para
   este limite: "el menu pasa de acordeon a barra horizontal".
   No se introduce ningun punto de ruptura propio.

   Fila 1: logotipo + conmutador.  Fila 2: la llamada a la accion.

   El logotipo baja a --esp-48, es decir 120 px de ancho por su
   razon natural de 2,5006:1. No se deforma ni se recorta: solo
   cambia la altura y el ancho se calcula solo. */
@media (max-width: 767px) {

	.cabecera__barra {
		flex-wrap: wrap;
		row-gap: var(--esp-16);
	}

	.cabecera__logo img {
		height: var(--esp-48);
	}

	.cabecera__cta {
		flex: 0 0 100%;
	}

}


/* ============================================================
   7. PIE
   ------------------------------------------------------------
   T055. Plantilla de Theme Builder (#65, condicion "todo el
   sitio") con los cuatro bloques de 3.3. Como en la cabecera,
   la plantilla no guarda ningun valor visual: todo vive aqui.

   Fondo: --gray-light, el token que 5.3 destina a superficies y
   que ya usan C-02, C-03 y C-05. No se introduce ningun color
   nuevo. 3.3 no fija fondo para el pie; se elige dentro de los
   nueve tokens y se deja anotado.

   Sin cambios progresivos, de modo que la seccion 5 no necesita
   cubrir nada de aqui.
   ============================================================ */

.pie {
	padding-block: var(--espacio-bloque);
	padding-inline: var(--margen-lateral);
	background-color: var(--gray-light);
}

/* Reticula fluida segun 6.1: el numero de columnas lo decide el
   ancho disponible, no un punto de ruptura. Cuatro bloques a
   partir de 1200 px, y menos columnas segun estrecha, hasta una
   sola en movil. No se anade ninguna consulta de medios. */
.pie__contenido {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: var(--esp-32);
	width: 100%;
	max-width: var(--ancho-contenido);
	margin-inline: auto;
}

.pie__bloque > .elementor-widget:not(:last-child) {
	--kit-widget-spacing: 0px;
}

/* --- Bloque 1: identidad ----------------------------------- */

.pie__logo a {
	display: block;
	line-height: 0;
}

.pie__logo img {
	display: block;
	width: auto;
	height: var(--esp-48);
}

.pie__dominio {
	margin: var(--esp-16) 0 0;
	font-size: var(--fs-pequeno);
	line-height: var(--lh-pequeno);
	color: var(--gray-text);
}

/* --- Bloque 2: navegacion ---------------------------------- */
/* Los nueve destinos de 3.3, en una sola lista sin desplegables:
   en el pie deben estar todos a la vista, sin depender de nada
   que haya que abrir. La marca en V NO se aplica aqui: el uso 1
   de 5.1 es el elemento activo de la navegacion principal, y
   repetirlo en el pie lo convertiria en adorno. */
.pie__menu .elementor-nav-menu a.elementor-item {
	padding: var(--esp-4) 0;
	font-size: var(--fs-pequeno);
	line-height: var(--lh-pequeno);
	color: var(--navy);
	background-color: transparent;
	text-decoration: none;
}

.pie__menu .elementor-nav-menu a.elementor-item:hover {
	color: var(--blue-dark);
	text-decoration: underline;
}

.pie__menu .elementor-item:focus-visible {
	outline: 3px solid var(--blue);
	outline-offset: 2px;
	box-shadow: none;
}

/* --- Bloques 3 y 4: contacto y legal ------------------------ */
/* Enlaces subrayados en reposo, como en C-08: no dependen solo
   del color para distinguirse. */

.pie__lista {
	margin: 0;
	padding-left: 0;
	list-style: none;
}

.pie__lista li + li {
	margin-block-start: var(--esp-8);
}

.pie__canales a,
.pie__legales a {
	font-size: var(--fs-pequeno);
	line-height: var(--lh-pequeno);
	color: var(--blue);
	text-decoration: underline;
}

.pie__canales a:hover,
.pie__canales a:active,
.pie__legales a:hover,
.pie__legales a:active {
	color: var(--blue-dark);
	text-decoration-thickness: var(--v-grosor);
}


/* ============================================================
   8. ERROR 404
   ------------------------------------------------------------
   T056. Plantilla de Theme Builder (#67, tipo error-404, con la
   condicion "not_found404" y ninguna otra). La cabecera y el pie
   siguen siendo los globales de T054 y T055: aqui solo vive el
   contenido de 4.8, que son dos bloques, mensaje y salidas.

   Las cuatro salidas reutilizan C-01 en su variante secundaria,
   con el mismo peso: 4.8 las enumera en plano. No se crea ningun
   componente nuevo y no se usa la V, que 5.1 no contempla aqui.
   ============================================================ */

.error404 {
	padding-block: var(--espacio-bloque);
	padding-inline: var(--margen-lateral);
}

.error404__contenido {
	width: 100%;
	max-width: var(--ancho-contenido);
	margin-inline: auto;
}

.error404__titulo {
	margin: 0;
	max-width: var(--ancho-texto);
}

.error404__texto {
	margin: var(--esp-16) 0 0;
	max-width: var(--ancho-texto);
}

/* Lista real: las cuatro salidas son una enumeracion, y asi se
   leen tambien sin CSS. Se envuelven cuando no caben, de modo
   que no hay desbordamiento en ningun ancho. */
.error404__salidas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--esp-16);
	margin: var(--esp-32) 0 0;
	padding-left: 0;
	list-style: none;
}


/* ============================================================
   9. HERO DE INICIO
   ------------------------------------------------------------
   T064. Bloque 1 de 4.1, el unico de la portada que construye
   esta tarea. Tres elementos y nada mas: titular, frase de
   apoyo y la llamada a la accion.

   No lleva C-07: 5.5 lo adscribe a "todas menos inicio", de
   modo que T064 pide "su equivalente en la portada", y esto lo
   es. Tampoco lleva la V: sus cuatro usos de 5.1 son el
   elemento activo del menu, el marcador de lista, la tarjeta
   pulsable y la separacion entre bloques. Ninguno es el hero.

   Sin fondo, sin imagen y sin ningun cambio progresivo: 4.1
   prohibe expresamente las imagenes de fondo de altura
   completa, y la seccion 5 no necesita cubrir nada de aqui.
   ============================================================ */

.hero {
	padding-block: var(--espacio-bloque);
	padding-inline: var(--margen-lateral);
}

.hero__contenido {
	width: 100%;
	max-width: var(--ancho-contenido);
	margin-inline: auto;
}

/* El titular y la frase se acotan al ancho de lectura de 5.4.
   El boton no: su ancho lo fija su propio contenido. */
.hero__titulo {
	margin: 0;
	max-width: var(--ancho-texto);
}

.hero__texto {
	margin: var(--esp-16) 0 0;
	max-width: var(--ancho-texto);
	font-size: var(--fs-cuerpo);
	line-height: var(--lh-cuerpo);
	color: var(--gray-text);
}

/* Parrafo contenedor del boton: existe para que el enlace
   quede en su propia linea sin recurrir a un elemento vacio. */
.hero__accion {
	margin: var(--esp-32) 0 0;
}


/* --- CORRECCION POSTERIOR DE T064 (detectada en T066) -------- */
/* La regla de la primera pantalla de 4.1 se comprueba a 360 px de
   ancho. Con las fuentes reales cargadas -no con las de respaldo-
   el titular ocupa cinco lineas por la anchura expandida del 125 %
   que 5.2 le reserva, y el conjunto no cabia en 640 px de alto.

   Se reduce unicamente la separacion superior del hero por debajo
   de 768 px. No se tocan el titular, la frase, la llamada a la
   accion, font-stretch, la escala tipografica ni el texto. La
   separacion inferior conserva --espacio-bloque, que es la que 5.4
   destina a separar bloques entre si. No se introduce ningun punto
   de ruptura nuevo: se reutiliza el 767 de 6.2. */
@media (max-width: 767px) {

	.hero {
		padding-block-start: var(--esp-32);
	}

}

/* ============================================================
   10. SECCIONES DE PAGINA
   ------------------------------------------------------------
   T065. Envoltorio de los bloques de contenido de 4.x. No es un
   componente nuevo: es la maqueta que los sostiene, igual que
   .cabecera, .pie y .hero. Los componentes que van dentro
   -C-02, C-03, C-04 y C-05- ya traen su propio aspecto.

   SEPARACION ENTRE BLOQUES. 5.4 fija 64 a 96 px entre bloques.
   Se aplica con padding-block-end y NO con padding-block: asi
   el hueco entre dos bloques consecutivos es exactamente uno,
   y no la suma del inferior de uno y el superior del otro. El
   hero conserva su padding de T064 sin tocarlo, y su borde
   inferior hace de separacion con el primer bloque.
   ============================================================ */

.seccion {
	padding-block-end: var(--espacio-bloque);
	padding-inline: var(--margen-lateral);
}

.seccion__contenido {
	width: 100%;
	max-width: var(--ancho-contenido);
	margin-inline: auto;
}

/* 9 fija que "los bloques de 4 fijan los H2": cada seccion abre
   con el suyo, y las tarjetas de dentro usan H3. */
.seccion__titulo {
	margin: 0 0 var(--esp-32);
}

.seccion__texto {
	margin: 0;
	max-width: var(--ancho-texto);
}

.seccion__accion {
	margin: var(--esp-24) 0 0;
}

/* --- T087 Presentacion accesible del error (A-06, plan 8.3 y 11) ---------
   C-06 ya dejo definido en T044 el mensaje .campo__error, su enlace por
   aria-describedby y el borde de 2 px en [aria-invalid="true"]. Aqui solo se
   anade lo que faltaba para cumplir A-06. No se rediseina C-06 y no se anade
   ningun icono.

   NEUTRALIZACION DE LOS MENSAJES NATIVOS. Elementor sigue creando sus propios
   nodos de error y no se le toca ni una linea del plugin: simplemente dejan de
   verse, porque la representacion visible y programatica es la nuestra y el
   visitante debe percibir UN SOLO mensaje por error. Se ocultan unicamente
   cuando el JS ha marcado que el nuestro ya existe -clases campo--error-propio
   y formulario--error-propio-, de modo que si por cualquier motivo no
   pudieramos pintar, el aviso de Elementor seguiria visible y nadie se
   quedaria sin informacion. Acotado a frm00001. No alcanza a los mensajes de
   exito, que son de T094, ni a ningun otro formulario del sitio. */

[data-id="frm00001"] .elementor-field-group.campo--error-propio .elementor-form-help-inline {
	display: none;
}

[data-id="frm00001"] form.formulario--error-propio > .elementor-message-danger {
	display: none;
}

/* RESUMEN. Solo existe cuando hay mas de un problema, y lo crea el JS al
   principio del formulario. La barra lateral acompana al texto de cada
   mensaje: el indicador que informa es el texto, nunca el color solo. */
.formulario__resumen {
	margin-block-end: var(--esp-24);
	padding-block: var(--esp-12);
	padding-inline: var(--esp-16);
	border-inline-start: 4px solid var(--error);
	font-size: var(--fs-cuerpo);
	line-height: var(--lh-cuerpo);
	color: var(--gray-text);
}

.formulario__resumen-titulo {
	margin: 0 0 var(--esp-8);
	font-weight: 500;
	color: var(--navy);
}

.formulario__resumen ul {
	margin: 0;
	padding-inline-start: var(--esp-24);
}

.formulario__resumen li + li {
	margin-block-start: var(--esp-8);
}

.formulario__resumen a {
	color: var(--error);
}

/* CASILLA. C-06 engancha el estado de error al borde de
   .elementor-field-textual, clase que la casilla no lleva, de modo que
   privacidad se quedaba sin indicador visible. Se le da un contorno del color
   de error: aparece algo que antes no estaba, luego el aviso no depende solo
   del color. No altera el cuadrado de 24 px ni la fila de 48, porque outline
   se pinta fuera del modelo de caja y no ocupa espacio. Se excluye
   :focus-visible para no tapar nunca el foco de T039, que tiene preferencia. */
#form-field-privacidad[aria-invalid="true"]:not(:focus-visible) {
	outline: 2px solid var(--error);
	outline-offset: 2px;
}