/* =========================================================================
   LATITUD CERO — components.css
   El motivo: la línea de latitud que cruza el Ecuador.
   ========================================================================= */

/* ==========================================================================
   1. EL MOTIVO — la línea de latitud
   ========================================================================== */

/* Regla horizontal con marcas de grado. Se usa como separador de sección. */
.lat-rule {
	position: relative;
	display: block;
	height: 22px;
	margin-block: 0;
	color: var(--lat-ink);
	pointer-events: none;
}

.lat-rule__line {
	position: absolute;
	inset-inline: 0;
	top: 50%;
	height: var(--lat-line);
	background-color: currentColor;
	opacity: 0.9;
	transform-origin: left center;
}

/* Marcas mayores cada 5 unidades + marcas menores intermedias */
.lat-rule__ticks {
	position: absolute;
	inset-inline: 0;
	top: 50%;
	height: 11px;
	transform: translateY(-50%);
	background-image:
		repeating-linear-gradient(
			90deg,
			currentColor 0 var(--lat-line),
			transparent var(--lat-line) 9px
		),
		repeating-linear-gradient(
			90deg,
			currentColor 0 var(--lat-line),
			transparent var(--lat-line) 45px
		);
	background-size: 100% 5px, 100% 11px;
	background-repeat: no-repeat;
	background-position: 0 100%, 0 0;
	opacity: var(--lat-tick-opacity);
}

.lat-rule__zero {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background-color: var(--lat-parchment, #faf6ef);
	color: var(--lat-clay, #a8482a);
	font-family: var(--lat-font-label, sans-serif);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	line-height: 1;
	padding-inline: 0.6em;
	white-space: nowrap;
}

/* Variante sobre superficie oscura */
.lat-rule--on-dark {
	color: var(--lat-parchment, #faf6ef);
}

.lat-rule--on-dark .lat-rule__zero {
	background-color: transparent;
	color: var(--lat-ochre, #e0a93b);
}

.lat-rule--on-dark .lat-rule__ticks {
	opacity: calc(var(--lat-tick-opacity) * 0.75);
}

/* Variante de bloque completo con fondo */
.lat-rule--block {
	background-color: inherit;
}

/* --- Escala de latitud del hero (SVG, animado con JS) --- */

.lat-scale {
	position: relative;
	width: 100%;
	margin-block: clamp(1.5rem, 1rem + 2vw, 2.5rem) 0 0;
}

.lat-scale svg {
	width: 100%;
	height: auto;
	overflow: visible;
}

.lat-scale__line {
	stroke: currentColor;
	stroke-width: 1;
	opacity: 0.55;
}

.lat-scale__tick {
	stroke: currentColor;
	stroke-width: 1;
	opacity: var(--lat-tick-opacity);
}

.lat-scale__tick--major {
	opacity: 0.8;
	stroke-width: 1;
}

.lat-scale__label {
	fill: currentColor;
	font-family: var(--lat-font-label, sans-serif);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	opacity: 0.62;
}

.lat-scale__label--zero {
	fill: var(--lat-ochre, #e0a93b);
	opacity: 1;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.2em;
}

.lat-scale__caption {
	fill: currentColor;
	font-family: var(--lat-font-label, sans-serif);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	opacity: 0.4;
}

.lat-scale__name {
	fill: currentColor;
	font-family: var(--lat-font-label, sans-serif);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.75;
}

/*
  En pantallas estrechas la escala completa deja de ser legible: el viewBox
  mide 1200 unidades y a 360 px de ancho eso es un factor de 0,3, con lo que
  una etiqueta de 11 unidades acaba a 3 px. En vez de dejar ruido ilegible
  o de crear un scroll horizontal dentro del hero, la escala se reduce a lo
  único que sigue leyéndose: la línea y el grado 0.
*/
@media (max-width: 48em) {
	.lat-scale {
		margin-block-start: 1.75rem;
	}

	.lat-scale__caption,
	.lat-scale__name,
	.lat-scale__ticks-minor,
	.lat-scale__tick:not(.lat-scale__tick--major),
	.lat-scale__label:not(.lat-scale__label--zero) {
		display: none;
	}

	/* 1200 unidades de viewBox a ~340 px es un factor de 0,28: para que el
	   grado 0 mida unos 12 px en pantalla, el texto necesita ~42 unidades. */
	.lat-scale__label--zero {
		font-size: 42px;
		letter-spacing: 0.04em;
		dominant-baseline: middle;
	}

	.lat-scale__tick--major {
		opacity: 1;
	}

	.lat-scale__line {
		opacity: 0.7;
	}
}

/* ==========================================================================
   2. CABECERA DE SECCIÓN
   ========================================================================== */

.lat-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	font-family: var(--lat-font-label, sans-serif);
	font-size: 0.6875rem;
	font-weight: 680;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--lat-clay, #a8482a);
	margin: 0 0 1.1rem;
}

.lat-eyebrow::before {
	content: "";
	inline-size: 28px;
	block-size: 1px;
	background-color: currentColor;
	flex: none;
}

.lat-eyebrow--ochre {
	color: var(--lat-ochre, #e0a93b);
}

.lat-eyebrow--moss {
	color: var(--lat-moss, #2f4a3c);
}

/* Título de sección con la palabra clave en display serif */
.lat-lede {
	font-size: var(--wp--preset--font-size--x-large, 1.1875rem);
	line-height: 1.55;
	color: var(--lat-ink-soft, #3a4a6b);
	max-width: 58ch;
	margin-block: 0 2rem;
}

.lat-section {
	padding-block: clamp(3.25rem, 1.6rem + 6.4vw, 6.5rem);
}

.lat-section--tight {
	padding-block: clamp(2.5rem, 1.4rem + 4.4vw, 4.25rem);
}

.lat-section--sand {
	background-color: var(--lat-sand, #f1e9da);
}

.lat-section--ink {
	background-color: var(--lat-ink, #16233d);
	color: var(--lat-parchment, #faf6ef);
}

.lat-section--ink h1,
.lat-section--ink h2,
.lat-section--ink h3,
.lat-section--ink h4,
.lat-section--ink h5 {
	color: var(--lat-parchment, #faf6ef);
}

.lat-section--ink a:not(.wp-element-button) {
	color: var(--lat-ochre, #e0a93b);
}

.lat-section--ink .lat-lede {
	color: rgba(250, 246, 239, 0.78);
}

/* ==========================================================================
   3. BOTONES
   ========================================================================== */

.lat-btn {
	--lat-btn-bg: var(--lat-ink, #16233d);
	--lat-btn-fg: var(--lat-parchment, #faf6ef);
	--lat-btn-bd: var(--lat-ink, #16233d);

	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	isolation: isolate;
	overflow: hidden;
	padding: 0.95em 1.65em;
	border: var(--lat-line) solid var(--lat-btn-bd);
	border-radius: 2px;
	background-color: var(--lat-btn-bg);
	color: var(--lat-btn-fg);
	font-family: var(--lat-font-label, sans-serif);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: 0.005em;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: color var(--lat-dur-fast) var(--lat-ease-out),
		border-color var(--lat-dur-fast) var(--lat-ease-out),
		transform var(--lat-dur-fast) var(--lat-ease-out);
}

/* Barrido de ocre que sube desde la base */
.lat-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: var(--lat-clay, #a8482a);
	transform: scaleY(0);
	transform-origin: bottom center;
	transition: transform var(--lat-dur) var(--lat-ease-out);
}

.lat-btn:hover::before,
.lat-btn:focus-visible::before {
	transform: scaleY(1);
}

.lat-btn:hover,
.lat-btn:focus-visible {
	color: var(--lat-base, #fff);
	border-color: var(--lat-clay, #a8482a);
}

.lat-btn:active {
	transform: translateY(1px);
}

.lat-btn--clay {
	--lat-btn-bg: var(--lat-clay, #a8482a);
	--lat-btn-bd: var(--lat-clay, #a8482a);
}

.lat-btn--ochre {
	--lat-btn-bg: var(--lat-ochre, #e0a93b);
	--lat-btn-fg: var(--lat-ink, #16233d);
	--lat-btn-bd: var(--lat-ochre, #e0a93b);
}

.lat-btn--ghost {
	--lat-btn-bg: transparent;
	--lat-btn-fg: var(--lat-ink, #16233d);
	--lat-btn-bd: var(--lat-control-edge, #8a8577);
}

.lat-btn--ghost:hover,
.lat-btn--ghost:focus-visible {
	color: var(--lat-base, #fff);
}

.lat-btn--on-dark {
	--lat-btn-bg: transparent;
	--lat-btn-fg: var(--lat-parchment, #faf6ef);
	--lat-btn-bd: rgba(250, 246, 239, 0.52);
}

.lat-btn--on-dark:hover,
.lat-btn--on-dark:focus-visible {
	color: var(--lat-ink, #16233d);
}

.lat-btn--sm {
	padding: 0.7em 1.2em;
	font-size: 0.875rem;
}

.lat-btn--block {
	display: flex;
	width: 100%;
}

.lat-btn--wa {
	--lat-btn-bg: transparent;
	--lat-btn-fg: var(--lat-parchment, #faf6ef);
	--lat-btn-bd: rgba(250, 246, 239, 0.34);
}

.lat-btn--wa::before {
	background-color: #25a05a;
}

.lat-btn--wa:hover,
.lat-btn--wa:focus-visible {
	border-color: #25a05a;
}

.lat-btn__icon {
	inline-size: 1.1em;
	block-size: 1.1em;
	flex: none;
	fill: currentColor;
}

.lat-btn__arrow {
	transition: transform var(--lat-dur) var(--lat-ease-out);
}

.lat-btn:hover .lat-btn__arrow {
	transform: translateX(3px);
}

/* Fila de acciones */
.lat-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
}

.lat-actions--center {
	justify-content: center;
}

.lat-actions--stacked {
	flex-direction: column;
	align-items: stretch;
}

.lat-actions--stacked .lat-btn {
	width: 100%;
}

/* ==========================================================================
   4. TARJETAS
   ========================================================================== */

.lat-grid {
	display: grid;
	gap: clamp(1rem, 0.6rem + 1.4vw, 1.6rem);
}

.lat-grid--2 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.lat-grid--3 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16.5rem), 1fr));
}

/*
  Seis tarjetas en 3 × 2, no en 4 + 2. El auto-fit las reparte por el ancho
  del contenedor y a 72rem caben cuatro, dejando una fila huérfana de dos.
  Fijar el número de columnas da una retícula legible; el reflujo automático
  se resuelve en el punto de corte de tablet.
*/
@media (min-width: 60em) {
	.lat-grid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.lat-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	padding: clamp(1.35rem, 1rem + 1.2vw, 1.9rem);
	background-color: var(--lat-base, #fff);
	border: var(--lat-line) solid var(--lat-rule, #e2d8c6);
	border-radius: var(--lat-card-radius);
	box-shadow: var(--lat-shadow-sm);
	transition: transform var(--lat-dur) var(--lat-ease-out),
		box-shadow var(--lat-dur) var(--lat-ease-out),
		border-color var(--lat-dur) var(--lat-ease-out);
}

/* Filo de latitud que crece desde la base al hacer hover */
.lat-card::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	block-size: 2px;
	background-color: var(--lat-clay, #a8482a);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--lat-dur) var(--lat-ease-out);
}

.lat-card:hover,
.lat-card:focus-within {
	transform: translateY(-3px);
	box-shadow: var(--lat-shadow-md);
	border-color: rgba(168, 72, 42, 0.35);
}

.lat-card:hover::after,
.lat-card:focus-within::after {
	transform: scaleX(1);
}

.lat-card__num {
	font-family: var(--lat-font-display, serif);
	font-size: 2rem;
	font-weight: 500;
	line-height: 1;
	color: var(--lat-clay, #a8482a);
	opacity: 0.32;
	font-variant-numeric: tabular-nums;
}

.lat-card__title {
	font-family: var(--lat-font-text, sans-serif);
	font-size: 1.0625rem;
	font-weight: 640;
	line-height: 1.3;
	letter-spacing: -0.01em;
	margin: 0;
	color: var(--lat-ink, #16233d);
}

.lat-card__body {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--lat-ink-soft, #3a4a6b);
	margin: 0;
}

.lat-card__icon {
	inline-size: 2.25rem;
	block-size: 2.25rem;
	color: var(--lat-clay, #a8482a);
	margin-bottom: 0.25rem;
}

/* Tarjeta oscura */
.lat-card--ink {
	background-color: rgba(250, 246, 239, 0.045);
	border-color: rgba(250, 246, 239, 0.14);
	box-shadow: none;
}

.lat-card--ink .lat-card__title {
	color: var(--lat-parchment, #faf6ef);
}

.lat-card--ink .lat-card__body {
	color: rgba(250, 246, 239, 0.72);
}

.lat-card--ink .lat-card__num,
.lat-card--ink .lat-card__icon {
	color: var(--lat-ochre, #e0a93b);
}

.lat-card--ink:hover {
	border-color: rgba(224, 169, 59, 0.45);
	background-color: rgba(250, 246, 239, 0.07);
}

/* Tarjeta de lista compacta */
.lat-list-card {
	display: block;
	padding: 1.15rem 1.3rem;
	background-color: rgba(250, 246, 239, 0.04);
	border: var(--lat-line) solid rgba(250, 246, 239, 0.13);
	border-radius: var(--lat-card-radius);
	transition: border-color var(--lat-dur) var(--lat-ease-out),
		background-color var(--lat-dur) var(--lat-ease-out);
}

.lat-list-card:hover {
	border-color: rgba(224, 169, 59, 0.42);
	background-color: rgba(250, 246, 239, 0.07);
}

.lat-list-card__title {
	font-family: var(--lat-font-text, sans-serif);
	font-size: 1rem;
	font-weight: 620;
	color: var(--lat-parchment, #faf6ef);
	margin: 0 0 0.3rem;
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
}

.lat-list-card__title::before {
	content: "";
	inline-size: 16px;
	block-size: 1px;
	background-color: var(--lat-ochre, #e0a93b);
	flex: none;
	transform: translateY(-0.28em);
}

.lat-list-card__body {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: rgba(250, 246, 239, 0.7);
	margin: 0;
}

/* ==========================================================================
   5. PASOS (Cómo funciona)
   ========================================================================== */

.lat-steps {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: lat-step;
}

.lat-step {
	position: relative;
	display: grid;
	grid-template-columns: 3.25rem 1fr;
	gap: clamp(1rem, 0.6rem + 1.4vw, 2rem);
	padding-block: clamp(1.5rem, 1rem + 1.6vw, 2.4rem);
	border-top: var(--lat-line) solid var(--lat-rule, #e2d8c6);
	counter-increment: lat-step;
}

.lat-step:last-child {
	border-bottom: var(--lat-line) solid var(--lat-rule, #e2d8c6);
}

/* Número como coordenada: más pequeño, alineado con la línea */
.lat-step__num {
	position: relative;
	font-family: var(--lat-font-label, sans-serif);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--lat-clay, #a8482a);
	font-variant-numeric: tabular-nums;
	padding-top: 0.45em;
}

.lat-step__num::before {
	content: "0" counter(lat-step);
}

.lat-step__num::after {
	content: "";
	position: absolute;
	left: 0;
	top: 2.35em;
	bottom: -2.4rem;
	inline-size: var(--lat-line);
	background-color: var(--lat-rule, #e2d8c6);
	opacity: 0.7;
}

.lat-step:last-child .lat-step__num::after {
	display: none;
}

.lat-step__title {
	font-family: var(--lat-font-text, sans-serif);
	font-size: 1.125rem;
	font-weight: 640;
	letter-spacing: -0.012em;
	margin: 0 0 0.4rem;
	color: var(--lat-ink, #16233d);
}

.lat-step__body {
	font-size: 0.9688rem;
	line-height: 1.65;
	color: var(--lat-ink-soft, #3a4a6b);
	margin: 0;
	max-width: 62ch;
}

/* ==========================================================================
   6. CITA / DECLARACIÓN
   ========================================================================== */

.lat-quote {
	position: relative;
	margin: 0;
	padding-inline-start: clamp(1.25rem, 0.8rem + 1.6vw, 2.25rem);
	border-inline-start: 2px solid var(--lat-clay, #a8482a);
}

.lat-quote__text {
	font-family: var(--lat-font-display, serif);
	font-size: clamp(1.35rem, 0.9rem + 1.9vw, 2.15rem);
	font-style: italic;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: -0.014em;
	color: var(--lat-ink, #16233d);
	margin: 0;
	text-wrap: balance;
}

.lat-quote__cite {
	display: block;
	margin-top: 1.1rem;
	font-family: var(--lat-font-label, sans-serif);
	font-size: 0.75rem;
	font-style: normal;
	font-weight: 640;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--lat-clay, #a8482a);
}

.lat-quote--on-dark {
	border-inline-start-color: var(--lat-ochre, #e0a93b);
}

.lat-quote--on-dark .lat-quote__text {
	color: var(--lat-parchment, #faf6ef);
}

.lat-quote--on-dark .lat-quote__cite {
	color: var(--lat-ochre, #e0a93b);
}

/* ==========================================================================
   7. FAQ — <details> nativo (accesible sin JS)
   ========================================================================== */

.lat-faq {
	border-top: var(--lat-line) solid var(--lat-rule, #e2d8c6);
}

.lat-faq__item {
	border-bottom: var(--lat-line) solid var(--lat-rule, #e2d8c6);
}

.lat-faq__item > summary {
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1.5rem;
	padding-block: 1.35rem;
	font-family: var(--lat-font-text, sans-serif);
	font-size: 1.0625rem;
	font-weight: 620;
	line-height: 1.4;
	letter-spacing: -0.01em;
	color: var(--lat-ink, #16233d);
	cursor: pointer;
	list-style: none;
	transition: color var(--lat-dur-fast) var(--lat-ease-out);
}

.lat-faq__item > summary::-webkit-details-marker {
	display: none;
}

.lat-faq__item > summary:hover {
	color: var(--lat-clay, #a8482a);
}

.lat-faq__item > summary:focus-visible {
	outline: 2px solid var(--lat-clay, #a8482a);
	outline-offset: 3px;
}

/* Signo +/− dibujado con dos líneas */
.lat-faq__sign {
	position: relative;
	flex: none;
	inline-size: 15px;
	block-size: 15px;
	margin-top: 0.32em;
	color: var(--lat-clay, #a8482a);
}

.lat-faq__sign::before,
.lat-faq__sign::after {
	content: "";
	position: absolute;
	inset: 50% 0 auto 0;
	height: 1.5px;
	background-color: currentColor;
	transform: translateY(-50%);
	transition: transform var(--lat-dur) var(--lat-ease-out), opacity var(--lat-dur-fast) linear;
}

.lat-faq__sign::after {
	transform: translateY(-50%) rotate(90deg);
}

.lat-faq__item[open] .lat-faq__sign::after {
	transform: translateY(-50%) rotate(0deg);
	opacity: 0;
}

.lat-faq__answer {
	padding-bottom: 1.6rem;
	max-width: 66ch;
	color: var(--lat-ink-soft, #3a4a6b);
	font-size: 0.9688rem;
	line-height: 1.68;
}

.lat-faq__answer > :first-child {
	margin-top: 0;
}

.lat-faq__answer > :last-child {
	margin-bottom: 0;
}

/* Variante oscura */
.lat-faq--on-dark {
	border-top-color: rgba(250, 246, 239, 0.16);
}

.lat-faq--on-dark .lat-faq__item {
	border-bottom-color: rgba(250, 246, 239, 0.16);
}

.lat-faq--on-dark .lat-faq__item > summary {
	color: var(--lat-parchment, #faf6ef);
}

.lat-faq--on-dark .lat-faq__item > summary:hover {
	color: var(--lat-ochre, #e0a93b);
}

.lat-faq--on-dark .lat-faq__sign {
	color: var(--lat-ochre, #e0a93b);
}

.lat-faq--on-dark .lat-faq__answer {
	color: rgba(250, 246, 239, 0.74);
}

/* ==========================================================================
   8. FORMULARIO
   ========================================================================== */

.lat-form {
	display: grid;
	gap: clamp(1.1rem, 0.8rem + 1vw, 1.5rem);
}

.lat-form__row {
	display: grid;
	gap: clamp(1.1rem, 0.8rem + 1vw, 1.5rem);
	grid-template-columns: 1fr;
}

/*
  Columnas explícitas en vez de auto-fit. Con auto-fit y un mínimo de 15rem,
  una fila de 496 px (que es lo que queda dentro de la tarjeta del formulario)
  no llega a dos columnas y los campos se apilan; y en una fila más ancha
  metería cuatro, partiendo los pares. Declarar 2 —o 3, con el modificador—
  hace que el resultado sea el mismo en cualquier pantalla.
*/
@media (min-width: 40em) {
	.lat-form__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 58em) {
	.lat-form__row--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.lat-field {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	min-width: 0;
}

.lat-field__label {
	font-family: var(--lat-font-label, sans-serif);
	font-size: 0.75rem;
	font-weight: 680;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--lat-ink-soft, #3a4a6b);
}

.lat-field__req {
	color: var(--lat-clay, #a8482a);
	margin-left: 0.2em;
}

.lat-field__hint {
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--lat-ink-soft, #3a4a6b);
}

.lat-field--full {
	grid-column: 1 / -1;
}

/* Casillas de verificación / radio */
.lat-check {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--lat-ink-soft, #3a4a6b);
	cursor: pointer;
}

.lat-check input[type="checkbox"],
.lat-check input[type="radio"] {
	flex: none;
	inline-size: 1.15rem;
	block-size: 1.15rem;
	margin: 0.15em 0 0;
	accent-color: var(--lat-clay, #a8482a);
	cursor: pointer;
}

/* Aviso de privacidad */
.lat-notice {
	display: flex;
	gap: 0.85rem;
	padding: 1.1rem 1.25rem;
	background-color: rgba(47, 74, 60, 0.07);
	border-inline-start: 2px solid var(--lat-moss, #2f4a3c);
	border-radius: 2px;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--lat-ink-soft, #3a4a6b);
}

.lat-notice__icon {
	flex: none;
	inline-size: 1.15rem;
	block-size: 1.15rem;
	color: var(--lat-moss, #2f4a3c);
	margin-top: 0.1em;
}

.lat-notice p {
	margin: 0;
}

.lat-notice p + p {
	margin-top: 0.5rem;
}

/* Aviso neutro (estado de registro, tarifario pendiente) */
.lat-notice--neutral {
	background-color: rgba(224, 169, 59, 0.12);
	border-inline-start-color: var(--lat-ochre, #e0a93b);
}

.lat-notice--neutral .lat-notice__icon {
	color: #6d4f0c;
}

.lat-notice strong {
	color: var(--lat-ink, #16233d);
	font-weight: 640;
}

/* Estado del formulario tras enviar */
.lat-form-status {
	padding: 1.1rem 1.3rem;
	border-radius: 2px;
	font-size: 0.9375rem;
	line-height: 1.6;
	border: var(--lat-line) solid transparent;
}

.lat-form-status--ok {
	background-color: rgba(47, 74, 60, 0.1);
	border-color: rgba(47, 74, 60, 0.32);
	color: #1f3b2d;
}

.lat-form-status--err {
	background-color: rgba(168, 72, 42, 0.1);
	border-color: rgba(168, 72, 42, 0.35);
	color: #7d3419;
}

.lat-form-status strong {
	font-weight: 660;
}

/* Trampa anti-spam (oculta a lectores de pantalla y a la vista) */
.lat-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ==========================================================================
   9. DATOS / DEFINICIONES
   ========================================================================== */

.lat-dl {
	display: grid;
	gap: 0;
	margin: 0;
}

.lat-dl__row {
	display: grid;
	grid-template-columns: minmax(9rem, 15rem) 1fr;
	gap: 0.4rem 1.75rem;
	padding-block: 1.15rem;
	border-top: var(--lat-line) solid var(--lat-rule, #e2d8c6);
}

.lat-dl__row:last-child {
	border-bottom: var(--lat-line) solid var(--lat-rule, #e2d8c6);
}

.lat-dl__key {
	font-family: var(--lat-font-label, sans-serif);
	font-size: 0.8125rem;
	font-weight: 680;
	letter-spacing: 0.06em;
	color: var(--lat-ink, #16233d);
	padding-top: 0.2em;
}

.lat-dl__val {
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--lat-ink-soft, #3a4a6b);
}

@media (max-width: 40rem) {
	.lat-dl__row {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   10. PRINCIPIOS
   ========================================================================== */

.lat-principles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
	gap: 1px;
	background-color: rgba(250, 246, 239, 0.14);
	border: var(--lat-line) solid rgba(250, 246, 239, 0.14);
	border-radius: var(--lat-card-radius);
	overflow: hidden;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lat-principle {
	padding: clamp(1.2rem, 0.9rem + 1vw, 1.75rem);
	background-color: var(--lat-ink, #16233d);
	transition: background-color var(--lat-dur) var(--lat-ease-out);
}

.lat-principle:hover {
	background-color: #1c2b4a;
}

.lat-principle__name {
	font-family: var(--lat-font-display, serif);
	font-size: 1.125rem;
	font-weight: 520;
	letter-spacing: -0.012em;
	color: var(--lat-ochre, #e0a93b);
	margin: 0 0 0.5rem;
	line-height: 1.2;
}

.lat-principle__body {
	font-size: 0.875rem;
	line-height: 1.6;
	color: rgba(250, 246, 239, 0.72);
	margin: 0;
}

/* ==========================================================================
   11. META / CIFRAS
   ========================================================================== */

.lat-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem 2.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lat-meta__item {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.lat-meta__key {
	font-family: var(--lat-font-label, sans-serif);
	font-size: 0.6875rem;
	font-weight: 680;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--lat-ink-soft, #3a4a6b);
}

.lat-meta__val {
	font-family: var(--lat-font-display, serif);
	font-size: 1.0625rem;
	font-weight: 500;
	color: var(--lat-ink, #16233d);
	line-height: 1.3;
}

.lat-meta--on-dark .lat-meta__key {
	color: rgba(250, 246, 239, 0.55);
}

.lat-meta--on-dark .lat-meta__val {
	color: var(--lat-parchment, #faf6ef);
}

/* ==========================================================================
   12. DOS CÍRCULOS QUE SE CRUZAN (marca de la mediación)
   ========================================================================== */

.lat-orbits {
	display: block;
	color: currentColor;
}

.lat-orbits__ring {
	fill: none;
	stroke: currentColor;
	stroke-width: 1;
	opacity: 0.32;
	transform-origin: center;
	transition: opacity var(--lat-dur) var(--lat-ease-out);
}

.lat-orbits__lens {
	fill: currentColor;
	opacity: 0.9;
	transition: opacity var(--lat-dur) var(--lat-ease-out);
}

.lat-orbits:hover .lat-orbits__ring {
	opacity: 0.55;
}

.lat-mark {
	display: inline-block;
	inline-size: 2.5rem;
	block-size: 2.5rem;
	color: var(--lat-clay, #a8482a);
	flex: none;
}

.lat-mark--lg {
	inline-size: 4rem;
	block-size: 4rem;
}

.lat-mark--ochre {
	color: var(--lat-ochre, #e0a93b);
}

/* ==========================================================================
   13. PESTAÑAS DE CONTACTO
   ========================================================================== */

.lat-contact-tabs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
	gap: clamp(0.75rem, 0.5rem + 0.8vw, 1.1rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.lat-contact-tab {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	padding: 1.35rem 1.4rem;
	background-color: rgba(250, 246, 239, 0.04);
	border: var(--lat-line) solid rgba(250, 246, 239, 0.14);
	border-radius: var(--lat-card-radius);
	text-decoration: none;
	color: var(--lat-parchment, #faf6ef);
	transition: border-color var(--lat-dur) var(--lat-ease-out),
		background-color var(--lat-dur) var(--lat-ease-out),
		transform var(--lat-dur) var(--lat-ease-out);
}

.lat-contact-tab:hover,
.lat-contact-tab:focus-visible {
	border-color: rgba(224, 169, 59, 0.5);
	background-color: rgba(250, 246, 239, 0.08);
	color: var(--lat-parchment, #faf6ef);
	transform: translateY(-2px);
}

.lat-contact-tab__label {
	font-family: var(--lat-font-label, sans-serif);
	font-size: 0.6875rem;
	font-weight: 680;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--lat-ochre, #e0a93b);
}

.lat-contact-tab__value {
	font-size: 0.9688rem;
	line-height: 1.5;
	word-break: break-word;
}

.lat-contact-tab__note {
	font-size: 0.8125rem;
	line-height: 1.5;
	color: rgba(250, 246, 239, 0.6);
}

/* ==========================================================================
   14. TARIFAS (tabla de honorable referencia, con estado pendiente)
   ========================================================================== */

.lat-status-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.4em 0.85em;
	border: var(--lat-line) solid rgba(138, 100, 16, 0.4);
	border-radius: 100px;
	background-color: rgba(224, 169, 59, 0.16);
	font-family: var(--lat-font-label, sans-serif);
	font-size: 0.6875rem;
	font-weight: 680;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #6d4f0c;
	line-height: 1.2;
}

.lat-status-pill::before {
	content: "";
	inline-size: 6px;
	block-size: 6px;
	border-radius: 50%;
	background-color: var(--lat-ochre, #e0a93b);
	flex: none;
}

.lat-status-pill--ok {
	border-color: rgba(47, 74, 60, 0.42);
	background-color: rgba(47, 74, 60, 0.12);
	color: #1f3b2d;
}

.lat-status-pill--ok::before {
	background-color: var(--lat-moss, #2f4a3c);
}

/* ==========================================================================
   15. ANCHO DE CONTENIDO
   ========================================================================== */

.lat-prose {
	max-width: var(--lat-measure);
}

.lat-prose--narrow {
	max-width: 54ch;
}

.lat-stack > * + * {
	margin-block-start: 1.4rem;
}

.lat-stack--lg > * + * {
	margin-block-start: 2.4rem;
}

.lat-hide-mobile {
	display: initial;
}

@media (max-width: 47.99em) {
	.lat-hide-mobile {
		display: none !important;
	}
}