@charset "UTF-8";
/* ==========================================================================
   CONSTRURALIA — Sistema de diseño «Expediente»
   Consultoría en SIROC y REPSE
   --------------------------------------------------------------------------
   Sin frameworks. Sin peticiones a terceros.
   Mobile-first. Modo claro y oscuro. WCAG 2.2 AA.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. TIPOGRAFÍA — Fira Sans, auto-hospedada
   --------------------------------------------------------------------------
   Fira Sans (SIL Open Font License 1.1) se sirve desde nuestro propio dominio,
   no desde fonts.gstatic.com. Tres razones:

     1. La CSP puede mantener `font-src 'self'` sin abrir excepciones.
     2. Cero peticiones a Google: dos conexiones menos y una transferencia
        menos de la IP del visitante a un tercero (relevante para el aviso
        de privacidad).
     3. Más rápido: el navegador ya tiene la conexión abierta con nuestro
        dominio.

   Tres pesos: 400 para texto, 600 para elementos de interfaz, 700 para
   titulares. Solo el subconjunto `latin`, que cubre todos los acentos del
   español (á é í ó ú ñ ü ¿ ¡). 51.6 KB los tres archivos.

   La cursiva se sintetiza: hay un único <em> en toda la página y no
   compensa descargar 18 KB por una palabra.
   -------------------------------------------------------------------------- */

@font-face {
	font-family: 'Fira Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/fira-sans-400.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
	               U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
	               U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Fira Sans';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/fira-sans-600.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
	               U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
	               U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Fira Sans';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/fira-sans-700.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
	               U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
	               U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */

:root {
	/* --- Color. El sitio es de tema oscuro fijo: no hay conmutador ni se
	   sigue la preferencia del sistema. Para invertir una sección concreta,
	   añádele la clase .section--luz (definida más abajo). --- */
	--c-bg:            #131C24;
	--c-bg-alt:        #1B2A38;
	--c-bg-sunken:     #0E151B;
	--c-ink:           #E8EDF2;
	--c-ink-soft:      #AEBECD;
	--c-ink-faint:     #8194A6;
	--c-line:          #2C3E4F;
	--c-line-strong:   #3F566B;

	/* Ámbar de señalización de obra. Tono aclarado para alcanzar 4.5:1
	   como texto y como fondo de botón sobre el azul pizarra. */
	--c-accent:        #E9963F;
	--c-accent-hover:  #F5AC5E;
	--c-accent-ink:    #14202B;
	--c-accent-wash:   #2A2016;

	--c-ok:            #5FD3A0;
	--c-ok-wash:       #16281F;
	--c-warn:          #E5B65C;
	--c-warn-wash:     #2A2417;
	--c-error:         #F08A8F;
	--c-error-wash:    #2C1719;

	--c-focus:         #6FB2FF;

	/* WhatsApp. #25D366 es el verde oficial de la marca; sobre él solo pasa
	   contraste AA el texto oscuro (9.38:1), nunca el blanco (1.98:1). */
	--c-wa:            #25D366;
	--c-wa-ink:        #0B141A;

	/* --- Tipografía ---------------------------------------------------
	   Fira Sans en todo el sitio. Las tres variables apuntan a la misma
	   familia: se conservan como puntos de extensión por si algún día se
	   quiere diferenciar titulares, cuerpo o cifras. */
	--font-display: 'Fira Sans', ui-sans-serif, system-ui, -apple-system,
	                "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-sans:    'Fira Sans', ui-sans-serif, system-ui, -apple-system,
	                "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-mono:    'Fira Sans', ui-sans-serif, system-ui, -apple-system,
	                "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	/* Espacio que reserva el botón flotante de WhatsApp para no tapar el pie */
	--hueco-flotante: 5.5rem;

	/* Escala fluida: 320px → 1280px */
	--t-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
	--t-sm:   clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
	--t-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
	--t-lg:   clamp(1.125rem, 1.06rem + 0.32vw, 1.375rem);
	--t-xl:   clamp(1.375rem, 1.24rem + 0.66vw, 1.875rem);
	--t-2xl:  clamp(1.75rem, 1.5rem + 1.24vw, 2.75rem);
	--t-3xl:  clamp(2.125rem, 1.7rem + 2.13vw, 3.75rem);

	--lh-tight: 1.15;
	--lh-snug:  1.35;
	--lh-base:  1.65;

	/* Espaciado */
	--s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
	--s-5: 1.5rem;   --s-6: 2rem;     --s-7: 3rem;     --s-8: 4rem;
	--s-9: 6rem;
	--s-section: clamp(2.75rem, 1.6rem + 4.5vw, 4.5rem);

	/* Estructura */
	--w-max:    72rem;
	--w-text:   40rem;
	--gutter:   clamp(1.125rem, 0.6rem + 2.6vw, 2.5rem);
	--radius:   4px;      /* esquinas casi rectas: lenguaje de documento */
	--radius-lg: 6px;

	--shadow-sm: 0 1px 2px rgb(0 0 0 / 0.3), 0 1px 3px rgb(0 0 0 / 0.35);
	--shadow-md: 0 2px 4px rgb(0 0 0 / 0.25), 0 6px 20px rgb(0 0 0 / 0.4);

	--ease: cubic-bezier(0.2, 0.6, 0.3, 1);
	--dur:  200ms;

	color-scheme: dark;
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-block-start: 5.5rem;
}

body {
	background: var(--c-bg);
	color: var(--c-ink);
	font-family: var(--font-sans);
	font-size: var(--t-base);
	line-height: var(--lh-base);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 {
	font-family: var(--font-display);
	line-height: var(--lh-tight);
	text-wrap: balance;
	font-weight: 700;
	letter-spacing: -0.015em;
}

p, li { text-wrap: pretty; }

a { color: inherit; }

/* Foco visible y consistente — WCAG 2.2 (2.4.11 / 2.4.13) */
:focus-visible {
	outline: 3px solid var(--c-focus);
	outline-offset: 2px;
	border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--c-accent); color: var(--c-accent-ink); }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}


/* --------------------------------------------------------------------------
   SECCIONES CLARAS
   --------------------------------------------------------------------------
   Añade `section--luz` a cualquier <section> para invertirla a fondo claro con
   texto oscuro. Redefine los tokens de color solo dentro de ese bloque, así que
   todos los componentes que contenga (tarjetas, botones, listas, formularios)
   se adaptan solos sin tocar una línea más.

   Uso:  <section class="section section--luz" id="proceso">
   -------------------------------------------------------------------------- */

.section--luz {
	--c-bg:            #F7F5F2;
	--c-bg-alt:        #FFFFFF;
	--c-bg-sunken:     #EDE9E3;
	--c-ink:           #1B2A38;
	--c-ink-soft:      #4A5B6B;
	--c-ink-faint:     #5C6B79;
	--c-line:          #D9D3CA;
	--c-line-strong:   #B9B1A5;

	--c-accent:        #9C540F;   /* más oscuro: sobre fondo claro necesita 4.5:1 */
	--c-accent-hover:  #7E4309;
	--c-accent-ink:    #FFFFFF;
	--c-accent-wash:   #FBF0E4;

	--c-ok:            #1F6B4A;   --c-ok-wash:    #E6F2EC;
	--c-warn:          #8A5A00;   --c-warn-wash:  #FBF3E0;
	--c-error:         #A31D24;   --c-error-wash: #FBEAEA;

	--c-focus:         #1B6FD4;

	/* El verde oficial da 1.82:1 sobre fondo claro. Este tono conserva la
	   identidad de WhatsApp y alcanza 4.98:1. */
	--c-wa:            #0F7A40;
	--c-wa-ink:        #FFFFFF;

	--shadow-sm: 0 1px 2px rgb(27 42 56 / 0.06), 0 1px 3px rgb(27 42 56 / 0.08);
	--shadow-md: 0 2px 4px rgb(27 42 56 / 0.05), 0 6px 16px rgb(27 42 56 / 0.09);

	background: var(--c-bg);
	color: var(--c-ink);
}

/* Variantes de fondo dentro de una sección clara */
.section--luz.section--sunken { background: var(--c-bg-sunken); }
.section--luz.section--alt    { background: var(--c-bg-alt); }

/* --------------------------------------------------------------------------
   3. UTILIDADES
   -------------------------------------------------------------------------- */

.wrap {
	width: 100%;
	max-width: var(--w-max);
	margin-inline: auto;
	/* max() evita que el contenido quede bajo el notch en horizontal */
	padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px))
	                max(var(--gutter), env(safe-area-inset-right, 0px));
}

.wrap--narrow { max-width: 52rem; }

.section {
	padding-block: var(--s-section);
	position: relative;
}

.section--sunken { background: var(--c-bg-sunken); }
.section--alt    { background: var(--c-bg-alt); }

.section + .section:not(.section--sunken):not(.section--alt) {
	border-block-start: 1px solid var(--c-line);
}

/* Solo para lectores de pantalla */
.sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	inset-block-start: -100%;
	inset-inline-start: var(--s-4);
	z-index: 200;
	background: var(--c-accent);
	color: var(--c-accent-ink);
	padding: var(--s-3) var(--s-5);
	border-radius: var(--radius);
	font-weight: 700;
	text-decoration: none;

	&:focus { inset-block-start: var(--s-4); }
}

/* Etiqueta de sección: numeración tipo expediente */
.eyebrow {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	font-family: var(--font-mono);
	font-size: var(--t-xs);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-accent);
	margin-block-end: var(--s-4);

	&::before {
		content: "";
		inline-size: var(--s-6);
		block-size: 2px;
		background: var(--c-accent);
		flex: none;
	}
}

.lede {
	font-size: var(--t-lg);
	line-height: var(--lh-snug);
	color: var(--c-ink-soft);
	max-inline-size: var(--w-text);
}

.section-title {
	font-size: var(--t-2xl);
	margin-block-end: var(--s-3);
	max-inline-size: 22ch;
}

.sec-intro > .section-title { max-inline-size: 18ch; }

/* --------------------------------------------------------------------------
   4. BOTONES
   -------------------------------------------------------------------------- */

.btn {
	--btn-bg: var(--c-accent);
	--btn-ink: var(--c-accent-ink);
	--btn-line: transparent;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-3);
	min-block-size: 3rem;              /* WCAG 2.2 — objetivo táctil 2.5.8 */
	padding: var(--s-3) var(--s-6);
	background: var(--btn-bg);
	color: var(--btn-ink);
	border: 2px solid var(--btn-line);
	border-radius: var(--radius);
	font-size: var(--t-sm);
	font-weight: 700;
	letter-spacing: 0.01em;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--dur) var(--ease),
	            border-color var(--dur) var(--ease),
	            transform var(--dur) var(--ease);

	&:hover { --btn-bg: var(--c-accent-hover); }
	&:active { transform: translateY(1px); }
	&[disabled], &[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

	& svg { flex: none; inline-size: 1.15em; block-size: 1.15em; }
}

.btn--ghost {
	--btn-bg: transparent;
	--btn-ink: var(--c-ink);
	--btn-line: var(--c-line-strong);

	&:hover {
		--btn-bg: transparent;
		--btn-line: var(--c-ink);
	}
}

/* WhatsApp en línea: contorno y texto en verde de marca, no relleno.
   Se reconoce al instante, pero sigue siendo visualmente secundario frente al
   CTA principal en ámbar — que es el que debe ganar la mirada. */
.btn--wa {
	--btn-bg: transparent;
	--btn-ink: var(--c-wa);
	--btn-line: var(--c-wa);

	&:hover {
		--btn-bg: var(--c-wa);
		--btn-ink: var(--c-wa-ink);
	}
}

/* WhatsApp como acción principal: relleno con el verde oficial.
   Se usa en la página de gracias, donde sí es la acción que queremos. */
.btn--wa-solido {
	--btn-bg: var(--c-wa);
	--btn-ink: var(--c-wa-ink);
	--btn-line: var(--c-wa);

	&:hover { --btn-bg: #1EBE5B; --btn-line: #1EBE5B; }
}

.btn--lg { min-block-size: 3.5rem; font-size: var(--t-base); padding-inline: var(--s-7); }
.btn--block { inline-size: 100%; }

.btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3);
	margin-block-start: var(--s-6);
}

/* --------------------------------------------------------------------------
   5. NAVEGACIÓN
   -------------------------------------------------------------------------- */

.masthead {
	position: sticky;
	inset-block-start: 0;
	z-index: 100;
	background: color-mix(in srgb, var(--c-bg) 88%, transparent);
	backdrop-filter: saturate(1.4) blur(10px);
	border-block-end: 1px solid var(--c-line);
}

.masthead__inner {
	display: flex;
	align-items: center;
	gap: var(--s-5);
	min-block-size: 4.25rem;
}

.brand {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	text-decoration: none;
	font-weight: 700;
	font-size: var(--t-base);
	letter-spacing: -0.02em;
	margin-inline-end: auto;
	flex: none;
}

.brand__mark { inline-size: 2rem; block-size: 2rem; flex: none; }

.brand__text {
	display: flex;
	flex-direction: column;
	line-height: 1.05;
}

.brand__name { white-space: nowrap; }
.brand__name b { color: var(--c-accent); font-weight: 700; }

/* Descriptor: dice qué hace la marca sin ocupar espacio de titular. */
.brand__tag {
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--c-ink-faint);
	white-space: nowrap;
	margin-block-start: 0.2rem;
}

.nav { display: none; }

@media (min-width: 62rem) {
	.nav {
		display: flex;
		align-items: center;
		gap: var(--s-5);
	}
	.nav a {
		font-size: var(--t-sm);
		font-weight: 600;
		color: var(--c-ink-soft);
		text-decoration: none;
		padding-block: var(--s-2);
		border-block-end: 2px solid transparent;
		transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);

		&:hover { color: var(--c-ink); border-block-end-color: var(--c-accent); }
	}
}

.masthead .btn { flex: none; }

/* El CTA del masthead cambia de etiqueta, no la pierde: en pantallas
   estrechas antes quedaba un botón sin texto visible. */
.masthead__cta-short { display: none; }

@media (max-width: 34rem) {
	.masthead__cta-label { display: none; }
	.masthead__cta-short { display: inline; }

	.masthead .btn { padding-inline: var(--s-4); font-size: var(--t-xs); }
	.masthead__inner { gap: var(--s-3); }

	/* Cede el descriptor; el nombre de la marca se mantiene siempre. */
	.brand__name { font-size: var(--t-sm); }
	.brand__tag  { display: none; }
	.brand__text { justify-content: center; }
}

/* La marca NUNCA desaparece: en pantallas muy estrechas se comprime, y quien
   cede espacio es el CTA de la cabecera, que además se repite en el hero. */
@media (max-width: 25rem) {
	.brand__mark { inline-size: 1.75rem; block-size: 1.75rem; }
	.brand__name { font-size: 0.8125rem; letter-spacing: -0.01em; }
	.masthead__inner { gap: var(--s-2); min-block-size: 3.75rem; }
	.masthead .btn { padding-inline: var(--s-3); }
}

/* --------------------------------------------------------------------------
   6. HERO
   -------------------------------------------------------------------------- */

.hero {
	position: relative;
	padding-block: clamp(2.25rem, 1.2rem + 4.5vw, 4rem) var(--s-section);
	overflow: hidden;
}

/* Retícula sutil de fondo: lenguaje de papel técnico, cero peso de imagen */
.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, var(--c-line) 1px, transparent 1px),
		linear-gradient(to bottom, var(--c-line) 1px, transparent 1px);
	background-size: 3.5rem 3.5rem;
	opacity: 0.4;
	mask-image: radial-gradient(ellipse 90% 70% at 70% 0%, #000 20%, transparent 75%);
	pointer-events: none;
}

.hero__grid {
	position: relative;
	display: grid;
	gap: var(--s-7);
	align-items: start;
}

@media (min-width: 64rem) {
	.hero__grid {
		grid-template-columns: 1.15fr 0.85fr;
		gap: var(--s-7);
	}
}

.hero h1 {
	font-size: var(--t-3xl);
	margin-block-end: var(--s-5);
	max-inline-size: 18ch;
}

.hero h1 em {
	font-style: normal;
	color: var(--c-accent);
}

.hero__deck {
	font-size: var(--t-lg);
	line-height: var(--lh-snug);
	color: var(--c-ink-soft);
	max-inline-size: 46ch;
	margin-block-end: var(--s-6);
}

.hero__deck strong { color: var(--c-ink); font-weight: 600; }

/* Franja de datos verificables */
.facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2) var(--s-5);
	margin-block-start: var(--s-6);
	padding-block-start: var(--s-5);
	border-block-start: 1px solid var(--c-line);
	list-style: none;
	padding-inline-start: 0;
}

.facts li {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	font-size: var(--t-sm);
	color: var(--c-ink-soft);
	font-weight: 600;
}

.facts svg {
	inline-size: 1rem;
	block-size: 1rem;
	color: var(--c-ok);
	flex: none;
}

/* --------------------------------------------------------------------------
   7. TARJETA DE FORMULARIO
   -------------------------------------------------------------------------- */

.card-form {
	background: var(--c-bg-alt);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	padding: var(--s-6);
	position: relative;
}

/* Sticky solo cuando la tarjeta cabe entera en pantalla. Si el viewport es más
   bajo que la tarjeta, sticky dejaría su parte inferior fuera de alcance. */
@media (min-width: 64rem) and (min-height: 52rem) {
	.card-form { position: sticky; inset-block-start: 5.5rem; }
}

.card-form__head { margin-block-end: var(--s-5); }

.card-form__title {
	font-size: var(--t-xl);
	margin-block-end: var(--s-2);
}

.card-form__sub {
	font-size: var(--t-sm);
	color: var(--c-ink-soft);
}

/* --------------------------------------------------------------------------
   8. FORMULARIO MULTIPASO
   -------------------------------------------------------------------------- */

.progress {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	margin-block-end: var(--s-5);
}

.progress__bar {
	flex: 1;
	block-size: 4px;
	background: var(--c-bg-sunken);
	border-radius: 999px;
	overflow: hidden;
}

.progress__fill {
	block-size: 100%;
	inline-size: 20%;
	background: var(--c-accent);
	border-radius: 999px;
	transition: inline-size 320ms var(--ease);
}

.progress__label {
	font-family: var(--font-mono);
	font-size: var(--t-xs);
	color: var(--c-ink-faint);
	font-variant-numeric: tabular-nums;
	flex: none;
}

/* fieldset trae borde, padding y min-inline-size propios del navegador */
.step {
	display: none;
	border: 0;
	padding: 0;
	margin: 0;
	min-inline-size: 0;
}

.step[data-active] { display: block; animation: step-in 280ms var(--ease); }

@keyframes step-in {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}

.step__legend {
	font-size: var(--t-lg);
	font-weight: 700;
	line-height: var(--lh-snug);
	margin-block-end: var(--s-4);
	display: block;
	padding: 0;
	border: 0;
}

/* Opciones tipo tarjeta seleccionable */
.choices {
	display: grid;
	gap: var(--s-2);
	margin-block-end: var(--s-5);
}

.choice {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: var(--s-3);
	padding: var(--s-3) var(--s-4);
	border: 1.5px solid var(--c-line);
	border-radius: var(--radius);
	cursor: pointer;
	background: var(--c-bg);
	font-size: var(--t-sm);
	line-height: var(--lh-snug);
	transition: border-color var(--dur) var(--ease),
	            background var(--dur) var(--ease);
	min-block-size: 3rem;

	&:hover { border-color: var(--c-line-strong); }
}

.choice input {
	position: absolute;
	opacity: 0;
	inline-size: 1px;
	block-size: 1px;
}

.choice__box {
	inline-size: 1.25rem;
	block-size: 1.25rem;
	border: 1.5px solid var(--c-line-strong);
	border-radius: 50%;
	flex: none;
	margin-block-start: 0.15rem;
	display: grid;
	place-items: center;
	transition: border-color var(--dur) var(--ease);

	&::after {
		content: "";
		inline-size: 0.625rem;
		block-size: 0.625rem;
		border-radius: 50%;
		background: var(--c-accent);
		transform: scale(0);
		transition: transform var(--dur) var(--ease);
	}
}

.choice:has(input:checked) {
	border-color: var(--c-accent);
	background: var(--c-accent-wash);

	& .choice__box { border-color: var(--c-accent); }
	& .choice__box::after { transform: scale(1); }
}

.choice:has(input:focus-visible) {
	outline: 3px solid var(--c-focus);
	outline-offset: 2px;
}

/* Campos de texto */
.field { margin-block-end: var(--s-4); }

.field label {
	display: block;
	font-size: var(--t-sm);
	font-weight: 600;
	margin-block-end: var(--s-2);
}

.field label .opt {
	font-weight: 400;
	color: var(--c-ink-faint);
	font-size: var(--t-xs);
}

.field input {
	inline-size: 100%;
	min-block-size: 3rem;
	padding: var(--s-3) var(--s-4);
	background: var(--c-bg);
	border: 1.5px solid var(--c-line);
	border-radius: var(--radius);
	transition: border-color var(--dur) var(--ease);

	&::placeholder { color: var(--c-ink-faint); opacity: 1; }
	&:hover { border-color: var(--c-line-strong); }
	&:focus { border-color: var(--c-accent); }
	&[aria-invalid="true"] { border-color: var(--c-error); background: var(--c-error-wash); }
}

.field__error {
	display: none;
	align-items: center;
	gap: var(--s-2);
	margin-block-start: var(--s-2);
	font-size: var(--t-sm);
	font-weight: 600;
	color: var(--c-error);
}

.field:has([aria-invalid="true"]) .field__error { display: flex; }

/* Honeypot: invisible para humanos, presente para bots */
.hp {
	position: absolute !important;
	inline-size: 1px; block-size: 1px;
	overflow: hidden; clip-path: inset(50%);
	white-space: nowrap;
}

.step__nav {
	display: flex;
	gap: var(--s-3);
	align-items: center;
	margin-block-start: var(--s-5);
}

.step__back {
	background: none;
	border: 0;
	padding: var(--s-2);
	font-size: var(--t-sm);
	font-weight: 600;
	color: var(--c-ink-soft);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;

	&:hover { color: var(--c-ink); }
}

.form-note {
	margin-block-start: var(--s-4);
	font-size: var(--t-xs);
	color: var(--c-ink-faint);
	line-height: var(--lh-snug);
}

.form-note a { color: var(--c-ink-soft); }

/* Mensaje de estado del envío */
.form-status {
	display: none;
	gap: var(--s-3);
	padding: var(--s-4);
	border-radius: var(--radius);
	font-size: var(--t-sm);
	font-weight: 600;
	margin-block-start: var(--s-4);
	line-height: var(--lh-snug);
}

.form-status[data-state] { display: flex; }
.form-status[data-state="error"] { background: var(--c-error-wash); color: var(--c-error); }
.form-status[data-state="ok"]    { background: var(--c-ok-wash);    color: var(--c-ok); }

/* --------------------------------------------------------------------------
   9. SITUACIONES
   -------------------------------------------------------------------------- */

.situations {
	display: grid;
	gap: var(--s-3);
	margin-block-start: var(--s-6);
	container-type: inline-size;
}

@media (min-width: 48rem) {
	.situations { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 72rem) {
	.situations { grid-template-columns: repeat(3, 1fr); }
}

.situation {
	display: flex;
	align-items: flex-start;
	gap: var(--s-4);
	padding: var(--s-5);
	background: var(--c-bg-alt);
	border: 1px solid var(--c-line);
	border-inline-start: 3px solid var(--c-accent);
	border-radius: var(--radius);
	text-decoration: none;
	color: inherit;
	transition: border-color var(--dur) var(--ease),
	            transform var(--dur) var(--ease),
	            box-shadow var(--dur) var(--ease);

	&:hover {
		transform: translateY(-2px);
		box-shadow: var(--shadow-md);
	}
}

.situation__text {
	font-size: var(--t-base);
	font-weight: 600;
	line-height: var(--lh-snug);
}

.situation__cue {
	display: block;
	font-size: var(--t-sm);
	font-weight: 600;
	color: var(--c-ink-faint);
	margin-block-start: var(--s-2);
}

.situation__arrow {
	margin-inline-start: auto;
	color: var(--c-accent);
	flex: none;
	inline-size: 1.25rem;
	block-size: 1.25rem;
	transition: transform var(--dur) var(--ease);
}

.situation:hover .situation__arrow { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   10. PROCESO
   -------------------------------------------------------------------------- */

.steps {
	display: grid;
	gap: var(--s-5);
	margin-block-start: var(--s-6);
	counter-reset: step;
}

@media (min-width: 52rem) {
	.steps { grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
}

.step-card {
	position: relative;
	padding-block-start: var(--s-6);
	border-block-start: 2px solid var(--c-line);
	counter-increment: step;
}

.step-card::before {
	content: counter(step, decimal-leading-zero);
	position: absolute;
	inset-block-start: calc(-1 * var(--s-4));
	inset-inline-start: 0;
	font-family: var(--font-mono);
	font-size: var(--t-sm);
	font-weight: 700;
	color: var(--c-accent);
	background: var(--c-bg);
	padding-inline-end: var(--s-3);
	font-variant-numeric: tabular-nums;
}

.section--sunken .step-card::before { background: var(--c-bg-sunken); }

.step-card h3 {
	font-size: var(--t-lg);
	margin-block-end: var(--s-3);
}

.step-card p { color: var(--c-ink-soft); font-size: var(--t-sm); }

/* --------------------------------------------------------------------------
   11. BLOQUES DE SERVICIO
   -------------------------------------------------------------------------- */

/* Sin tope: el encabezado usa toda la rejilla de dos columnas. */
.service__head { max-inline-size: none; }

.service__grid {
	display: grid;
	gap: var(--s-4);
	margin-block-start: var(--s-6);
}

@media (min-width: 48rem) {
	.service__grid { grid-template-columns: repeat(2, 1fr); }
}

.tile {
	padding: var(--s-5);
	background: var(--c-bg-alt);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
}

.section--alt .tile { background: var(--c-bg); }

.tile h3 {
	font-size: var(--t-base);
	margin-block-end: var(--s-3);
	display: flex;
	align-items: center;
	gap: var(--s-3);
}

.tile h3 svg {
	inline-size: 1.25rem;
	block-size: 1.25rem;
	color: var(--c-accent);
	flex: none;
}

.tile p { font-size: var(--t-sm); color: var(--c-ink-soft); }

/* Lista de alcance con marcas de verificación */
.checklist {
	list-style: none;
	padding-inline-start: 0;
	display: grid;
	gap: var(--s-2);
	margin-block-start: var(--s-4);
}

@media (min-width: 40rem) {
	.checklist { grid-template-columns: repeat(2, 1fr); gap: var(--s-2) var(--s-5); }
}

.checklist li {
	display: flex;
	align-items: flex-start;
	gap: var(--s-3);
	font-size: var(--t-sm);
	color: var(--c-ink-soft);
	line-height: var(--lh-snug);
}

.checklist li::before {
	content: "";
	inline-size: 0.5rem;
	block-size: 0.5rem;
	border-radius: 1px;
	background: var(--c-accent);
	flex: none;
	margin-block-start: 0.45rem;
	rotate: 45deg;
}

/* --------------------------------------------------------------------------
   12. TIPOS DE OBRA
   -------------------------------------------------------------------------- */

.works {
	display: grid;
	gap: var(--s-4);
	margin-block-start: var(--s-6);
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

@media (min-width: 60rem) {
	.works { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.work {
	display: flex;
	flex-direction: column;
	background: var(--c-bg-alt);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	overflow: hidden;
	transition: border-color var(--dur) var(--ease);

	&:hover {
		border-color: var(--c-accent);

		& img { transform: scale(1.03); }
	}
}

/* La relación 16:10 y width/height en el <img> reservan el espacio antes de
   que la foto cargue: sin eso, cada imagen empujaría el contenido al aparecer
   y dispararía el CLS. */
.work picture {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--c-bg-sunken);
}

.work img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform 400ms var(--ease);
}

@media (prefers-reduced-motion: reduce) {
	.work img { transition: none; }
	.work:hover img { transform: none; }
}

.work__txt { padding: var(--s-4) var(--s-5) var(--s-5); }

.work h3 { font-size: var(--t-base); margin-block-end: var(--s-2); }
.work p  { font-size: var(--t-sm); color: var(--c-ink-soft); }

/* --------------------------------------------------------------------------
   13. DIFERENCIADORES
   -------------------------------------------------------------------------- */

.reasons {
	display: grid;
	gap: var(--s-5);
	margin-block-start: var(--s-6);
}

@media (min-width: 52rem) {
	.reasons { grid-template-columns: repeat(2, 1fr); gap: var(--s-5) var(--s-6); }
}

.reason { display: flex; gap: var(--s-4); align-items: flex-start; }

.reason__icon {
	inline-size: 2.5rem;
	block-size: 2.5rem;
	flex: none;
	display: grid;
	place-items: center;
	background: var(--c-accent-wash);
	border-radius: var(--radius);
	color: var(--c-accent);
}

.reason__icon svg { inline-size: 1.25rem; block-size: 1.25rem; }

.reason h3 { font-size: var(--t-base); margin-block-end: var(--s-2); }
.reason p  { font-size: var(--t-sm); color: var(--c-ink-soft); }

/* --------------------------------------------------------------------------
   14. OTROS SERVICIOS
   -------------------------------------------------------------------------- */

.more {
	display: grid;
	gap: var(--s-2);
	margin-block-start: var(--s-6);
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.more__item {
	padding: var(--s-4) var(--s-5);
	background: var(--c-bg-alt);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
}

.section--sunken .more__item { background: var(--c-bg); }

.more__item h3 {
	font-size: var(--t-sm);
	font-weight: 700;
	margin-block-end: var(--s-2);
	letter-spacing: 0.02em;
}

.more__item p { font-size: var(--t-sm); color: var(--c-ink-soft); }

/* --------------------------------------------------------------------------
   15. FAQ
   -------------------------------------------------------------------------- */

.faq { margin-block-start: var(--s-6); max-inline-size: 52rem; }

.faq details {
	border-block-end: 1px solid var(--c-line);

	&[open] .faq__q svg { rotate: 45deg; }
}

.faq__q {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--s-4);
	padding-block: var(--s-5);
	font-size: var(--t-base);
	font-weight: 600;
	line-height: var(--lh-snug);
	cursor: pointer;
	list-style: none;

	&::-webkit-details-marker { display: none; }
	&:hover { color: var(--c-accent); }

	& svg {
		inline-size: 1.25rem;
		block-size: 1.25rem;
		flex: none;
		color: var(--c-accent);
		margin-block-start: 0.15rem;
		transition: rotate var(--dur) var(--ease);
	}
}

.faq__a {
	padding-block-end: var(--s-5);
	color: var(--c-ink-soft);
	font-size: var(--t-sm);
	max-inline-size: 62ch;
}

.faq__a p + p { margin-block-start: var(--s-3); }


/* --------------------------------------------------------------------------
   ENCABEZADOS DE SECCIÓN EN DOS COLUMNAS
   --------------------------------------------------------------------------
   En pantallas anchas, un titular limitado a 24ch dejaba media pantalla vacía
   a su derecha y empujaba el contenido hacia abajo. Poniendo el titular y su
   párrafo lado a lado se ocupa ese hueco y la página se acorta.
   -------------------------------------------------------------------------- */

.sec-intro { display: grid; gap: var(--s-3); }

@media (min-width: 60rem) {
	.sec-intro {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
		column-gap: var(--s-7);
		align-items: end;
	}

	/* La etiqueta y el título ocupan la columna izquierda */
	.sec-intro > .eyebrow      { grid-column: 1; grid-row: 1; margin-block-end: var(--s-3); }
	.sec-intro > .section-title{ grid-column: 1; grid-row: 2; margin-block-end: 0; }

	/* El párrafo pasa a la derecha, alineado con la base del título */
	.sec-intro > .lede {
		grid-column: 2;
		grid-row: 2;
		max-inline-size: none;
		padding-block-end: 0.25rem;
	}
}

/* --------------------------------------------------------------------------
   FAQ EN DOS COLUMNAS
   -------------------------------------------------------------------------- */

.faq-layout { display: grid; gap: var(--s-5); }

.faq-layout__nota {
	font-size: var(--t-sm);
	color: var(--c-ink-soft);
	margin-block-start: var(--s-4);
	max-inline-size: 34ch;
}

@media (min-width: 64rem) {
	.faq-layout {
		grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
		column-gap: var(--s-8);
		align-items: start;
	}

	/* El encabezado acompaña al usuario mientras recorre las preguntas */
	.faq-layout__head {
		position: sticky;
		inset-block-start: 6.5rem;
	}

	.faq-layout .faq {
		margin-block-start: 0;
		max-inline-size: none;
	}
}

/* Con el FAQ a dos columnas, las respuestas ya no necesitan tope de línea:
   la propia columna hace de medida. */
@media (min-width: 64rem) {
	.faq__a { max-inline-size: 68ch; }
}


/* --------------------------------------------------------------------------
   SEPARADOR A ANCHO COMPLETO
   --------------------------------------------------------------------------
   Va una sola vez, entre REPSE y «Por qué Construralia»: es el punto medio de
   la página, justo después de los dos bloques más densos.

   El degradado horizontal garantiza que el texto se lea sobre cualquier zona
   de la foto, sin depender de que la imagen tenga un lado oscuro.
   -------------------------------------------------------------------------- */

/* Los tres hijos comparten la misma celda de la rejilla. Se usa grid en lugar
   de position:absolute porque con la imagen fuera del flujo y con z-index
   negativo, el navegador NO dispara la carga diferida: la foto no llegaba a
   descargarse nunca. */
.banda {
	/* `minmax(0, 1fr)` es lo que hace que esto funcione: sin el 0 como mínimo,
	   la fila crece hasta la altura natural de la imagen (880 px en un monitor
	   ancho), la banda se dispara y el texto se centra respecto a esa altura
	   fantasma en lugar de a la visible. */
	display: grid;
	grid-template: "capa" minmax(0, 1fr) / minmax(0, 1fr);
	place-items: center;
	overflow: hidden;
	block-size: clamp(10rem, 6.5rem + 8vw, 14rem);
}

.banda > picture,
.banda > .banda__txt,
.banda::after {
	grid-area: capa;
	inline-size: 100%;
}

.banda > picture {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	min-block-size: 0;
	overflow: hidden;
}

.banda img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}

.banda::after {
	content: "";
	block-size: 100%;
	background: linear-gradient(
		90deg,
		rgb(19 28 36 / 0.95) 0%,
		rgb(19 28 36 / 0.90) 55%,   /* el texto llega hasta aquí: velo alto garantizado */
		rgb(19 28 36 / 0.58) 100%
	);
}

.banda__txt {
	z-index: 1;
	align-self: center;
}

.banda__txt p {
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
	font-size: clamp(1.25rem, 0.95rem + 1.5vw, 2.125rem);
	max-inline-size: 26ch;
	color: #E8EDF2;   /* fijo: el fondo es siempre oscuro, no sigue el tema */
	text-wrap: balance;
}

.banda__txt em {
	font-style: normal;
	color: #E9963F;
}

/* En vertical estrecho el degradado necesita más cuerpo abajo */
@media (max-width: 40rem) {
	.banda::after {
		background: linear-gradient(
			160deg,
			rgb(19 28 36 / 0.93) 0%,
			rgb(19 28 36 / 0.88) 55%,
			rgb(19 28 36 / 0.72) 100%
		);
	}
}

@media print { .banda { display: none; } }

/* --------------------------------------------------------------------------
   16. AVISO DE NO AFILIACIÓN
   -------------------------------------------------------------------------- */

.disclaimer {
	display: flex;
	gap: var(--s-4);
	align-items: flex-start;
	padding: var(--s-5);
	background: var(--c-bg-sunken);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	font-size: var(--t-sm);
	color: var(--c-ink-soft);
	line-height: var(--lh-snug);
	max-inline-size: 58rem;
}

.section--sunken .disclaimer { background: var(--c-bg-alt); }

.disclaimer svg {
	inline-size: 1.25rem;
	block-size: 1.25rem;
	flex: none;
	color: var(--c-ink-faint);
	margin-block-start: 0.1rem;
}

.disclaimer strong { color: var(--c-ink); }

.disclaimer--bar {
	border: 0;
	border-radius: 0;
	background: var(--c-bg-sunken);
	max-inline-size: none;
	padding-block: var(--s-3);
	font-size: var(--t-xs);
	justify-content: center;
	text-align: center;
}

/* --------------------------------------------------------------------------
   17. PIE
   -------------------------------------------------------------------------- */

/* El padding inferior reserva sitio para el botón flotante: sin él, tapaba el
   enlace al aviso de privacidad al llegar al final de la página.
   env(safe-area-inset-bottom) evita además la barra de gestos del iPhone. */
.footer {
	background: var(--c-bg-sunken);
	border-block-start: 1px solid var(--c-line);
	padding-block: var(--s-7)
	               calc(var(--s-5) + var(--hueco-flotante) + env(safe-area-inset-bottom, 0px));
	font-size: var(--t-sm);
}

.footer__grid {
	display: grid;
	gap: var(--s-6);
	margin-block-end: var(--s-6);
}

@media (min-width: 48rem) {
	.footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s-7); }
}

.footer h3 {
	font-size: var(--t-xs);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--c-ink-faint);
	margin-block-end: var(--s-4);
	font-family: var(--font-mono);
}

.footer ul { list-style: none; padding-inline-start: 0; display: grid; gap: var(--s-2); }

.footer a {
	color: var(--c-ink-soft);
	text-decoration: none;

	&:hover { color: var(--c-accent); text-decoration: underline; }
}

/* WCAG 2.2 · 2.5.8 Tamaño del objetivo (mínimo): 24×24 CSS px.
   Los enlaces de navegación del pie no entran en la excepción de
   "enlace en línea dentro de un bloque de texto". */
.footer :is(ul, .footer__legal) a {
	display: inline-flex;
	align-items: center;
	min-block-size: 24px;
}

.footer p  { color: var(--c-ink-soft); }

.footer__legal {
	padding-block-start: var(--s-5);
	border-block-start: 1px solid var(--c-line);
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3) var(--s-5);
	align-items: center;
	justify-content: space-between;
	font-size: var(--t-xs);
	color: var(--c-ink-faint);
}

/* En pantallas estrechas el flotante ocupa la esquina inferior derecha:
   la línea legal se alinea a la izquierda para no quedar debajo. */
@media (max-width: 30rem) {
	.footer__legal {
		justify-content: flex-start;
		padding-inline-end: 4rem;
	}
}

/* --------------------------------------------------------------------------
   18. WHATSAPP FLOTANTE
   -------------------------------------------------------------------------- */

.wa-float {
	--c-wa: #25D366;
	--c-wa-ink: #0B141A;
	position: fixed;
	inset-block-end: calc(var(--s-5) + env(safe-area-inset-bottom, 0px));
	inset-inline-end: calc(var(--s-5) + env(safe-area-inset-right, 0px));
	z-index: 90;
	display: inline-flex;
	align-items: center;
	gap: var(--s-3);
	padding: var(--s-3) var(--s-5);
	min-block-size: 3.25rem;
	background: var(--c-wa);
	color: var(--c-wa-ink);
	border-radius: 999px;
	box-shadow: var(--shadow-md);
	text-decoration: none;
	font-size: var(--t-sm);
	font-weight: 700;
	transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);

	&:hover { transform: translateY(-2px); background: #1EBE5B; }
	& svg { inline-size: 1.35rem; block-size: 1.35rem; flex: none; }
}

@media (max-width: 40rem) {
	:root { --hueco-flotante: 6rem; }

	.wa-float {
		inset-inline-end: calc(var(--s-4) + env(safe-area-inset-right, 0px));
		inset-block-end: calc(var(--s-4) + env(safe-area-inset-bottom, 0px));
		padding: var(--s-3);
	}
	.wa-float span { display: none; }
}

/* --------------------------------------------------------------------------
   19. ANIMACIÓN AL ENTRAR EN VISTA (scroll-driven, con degradación segura)
   -------------------------------------------------------------------------- */

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.reveal {
			animation: reveal linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 42%;
		}
		@keyframes reveal {
			from { opacity: 0; transform: translateY(14px); }
			to   { opacity: 1; transform: none; }
		}
	}
}

/* --------------------------------------------------------------------------
   20. PÁGINA DE GRACIAS
   -------------------------------------------------------------------------- */

.thanks {
	min-block-size: 70svh;
	display: grid;
	place-items: center;
	padding-block: var(--s-8);
	text-align: center;
}

.thanks__seal {
	inline-size: 4.5rem;
	block-size: 4.5rem;
	margin-inline: auto;
	margin-block-end: var(--s-5);
	display: grid;
	place-items: center;
	border: 2px solid var(--c-ok);
	border-radius: 50%;
	color: var(--c-ok);
}

.thanks__seal svg { inline-size: 2rem; block-size: 2rem; }

.thanks h1 { font-size: var(--t-2xl); margin-block-end: var(--s-4); }

.thanks__lede {
	font-size: var(--t-lg);
	color: var(--c-ink-soft);
	max-inline-size: 44ch;
	margin-inline: auto;
	margin-block-end: var(--s-6);
	line-height: var(--lh-snug);
}

.next-steps {
	display: grid;
	gap: var(--s-3);
	margin-block-start: var(--s-8);
	text-align: start;
	max-inline-size: 44rem;
	margin-inline: auto;
}

@media (min-width: 44rem) {
	.next-steps { grid-template-columns: repeat(2, 1fr); }
}

/* Transiciones de vista entre páginas */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: reduce) {
	@view-transition { navigation: none; }
}

/* --------------------------------------------------------------------------
   21. IMPRESIÓN
   -------------------------------------------------------------------------- */

@media print {
	.masthead, .wa-float, .card-form, .btn { display: none !important; }
	body { background: #fff; color: #000; }
	.section { padding-block: 1rem; break-inside: avoid; }
}