@charset "utf-8";

/****

WebSet — framework base
Versión 3.1.0
Última modificación: 05SEP26

Cómo se usa
-----------
Estructura:   <section class="section"> > <div class="page"> > <div class="row"> > bloques
Anchos:       .row reparte a sus hijos en 12 columnas. Sin clases, los reparte en partes
              iguales (3 hijos = 3 columnas). Con .col1…col12 se declara el ancho, y con
              .off1…off11 se desplaza el inicio (reemplaza a los <div class="gap"> vacíos).
Todo lo demás se resuelve por contexto: los márgenes, tamaños y colores salen de qué
elemento sigue a cuál y de en qué contenedor está. En el HTML, solo la clase mínima.

Este archivo no se toca por proyecto: el tema (colores, tipografía, radios) vive en
custom.css redefiniendo las variables de :root.

****/


/**** 1. Reset ****/

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
:where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, blockquote, figure, fieldset) {
	font-size: inherit;
	font-weight: inherit;
}
:where(ul, ol) {
	list-style: none;
}
:where(a) {
	color: inherit;
	text-decoration: none;
}
:where(img, svg, video, picture, figure) {
	display: block;
	max-inline-size: 100%;
}
/* <source> no debería generar caja en ningún contexto -- pero como acá
   <picture> es display:contents (sección 7), sus hijos se promueven al
   layout del padre, y sin esto cada <source> (avif, webp) se convierte
   en un ítem de flex/grid fantasma que suma su propio gap. */
:where(source) {
	display: none;
}
:where(img, video) {
	block-size: auto;
}
:where(input, textarea, select, button) {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
}
:where(button) {
	cursor: pointer;
	text-align: inherit;
}
:where(table) {
	border-collapse: collapse;
}
:where(th, td) {
	text-align: start;
	font-weight: inherit;
}
strong, b {
	font-weight: var(--fon-w9);
}
/* El foco SIEMPRE tiene que verse. Solo se oculta para el mouse, nunca para el teclado. */
:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
	border-radius: var(--rad-s);
}

html {
	block-size: 100%;
	overflow-x: hidden;
	scroll-behavior: smooth;
	interpolate-size: allow-keywords;
	-webkit-text-size-adjust: 100%;
}
body {
	min-block-size: 100%;
	font-family: var(--fon-t);
	font-weight: var(--fon-w5);
	font-size: var(--sca-t);
	line-height: 1;
	color: var(--text);
	background: var(--surface);
	overflow-x: hidden;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

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


/**** 2. Tokens ****/

/* Los nombres dicen QUÉ ROL cumple cada valor, no cómo se ve. Un token llamado
   "oscuro" miente apenas el tema tiene fondo oscuro; uno llamado "texto" no.

   Regla de los pares: ninguna superficie viaja sola. Si existe --surface-inverse,
   existe --on-inverse, que es el color con el que se escribe encima. */

/* v2 -- principio único: TODO lo variable se controla con exactamente 2
   perillas por sistema (una base + una elasticidad de crecimiento), nunca
   con una lista de valores puestos a mano uno por uno. Cada escala es la
   base multiplicada/dividida por su razón, tantas veces como haga falta --
   el mismo mecanismo que ya usaba --ratio para los títulos, generalizado
   a espaciado, interlineado, color y ritmo de sección. */

:root {
	--page-w: 75.5rem;

	--fon-t: system-ui, sans-serif;
	--fon-h: var(--fon-t);

	/* ---- Tipografía: base + razón (sin cambios de fondo, ya cumplía el principio) ---- */
	--sca-t: clamp(1rem, 0.94rem + 0.25vw, 1.125rem);
	--sca-mar: 1rem;

	--ratio: 1.25;
	--sca-h6: var(--sca-t);
	--sca-h5: calc(var(--sca-h6) * var(--ratio));
	--sca-h4: calc(var(--sca-h5) * var(--ratio));
	--sca-h3: calc(var(--sca-h4) * var(--ratio));
	--sca-h2: calc(var(--sca-h3) * var(--ratio));
	--sca-h1: calc(var(--sca-h2) * var(--ratio));

	/* ---- Interlineado: dos bases (texto corrido / título más chico) + una
	        razón de achique que se aplica escalón a escalón según se sube
	        en la jerarquía -- a mayor tamaño, menor interlineado relativo. ---- */
	--lh-t: 1.2em;   /* piso de p/listas: nunca baja de acá */
	--lh-h: 1em;     /* interlineado de h6 (el título más chico) */
	--lh-ratio: .985; /* cuánto se ajusta cada escalón hacia arriba (compuesto 5 veces hasta h1: ~.93) */

	--sca-lh-h6: var(--lh-h);
	--sca-lh-h5: calc(var(--sca-lh-h6) * var(--lh-ratio));
	--sca-lh-h4: calc(var(--sca-lh-h5) * var(--lh-ratio));
	--sca-lh-h3: calc(var(--sca-lh-h4) * var(--lh-ratio));
	--sca-lh-h2: calc(var(--sca-lh-h3) * var(--lh-ratio));
	--sca-lh-h1: calc(var(--sca-lh-h2) * var(--lh-ratio));

	--fon-w1: 200;
	--fon-w5: 400;
	--fon-w7: 500;
	--fon-w9: 700;

	/* ---- Color: rol ---- */
	--text: #000000;             /* texto principal */
	--surface: #ffffff;          /* fondo de la página */
	--surface-alt: #eeeeee;      /* bandas alternativas */
	--surface-inverse: #000000;  /* banners oscuros y velo de modales */
	--border: #767676;           /* bordes y divisorias */
	--accent: #111111;           /* color de acento: vívido, uso dosificado (botones, detalles) */
	--accent-fill: #333333;      /* relleno de botones */
	--critical: #d32f2f;
	--positive: #007b40;

	/* Color institucional: el que tiene MÁS presencia (fondos, decorativos,
	   epígrafes) -- distinto del acento, que es el vívido y dosificado. Por
	   defecto es el mismo que --accent (ningún tema rompe si no lo separa),
	   pero un tema puede pisarlo para que la identidad "pesada" y el detalle
	   "vívido" sean dos colores distintos. */
	--brand: var(--accent);

	/* Una sola perilla de elasticidad para TODAS las variantes de contraste
	   de acá abajo: qué tan cerca del extremo opuesto (blanco/negro) se corre
	   una variante para que un color de marca funcione arriba de cualquier
	   superficie sin perder su matiz. */
	--contrast-shift: 35%;

	--text-muted: color-mix(in srgb, var(--text) calc(100% - var(--contrast-shift)), var(--surface));
	--accent-on-light: color-mix(in srgb, var(--accent) calc(100% - var(--contrast-shift)), #000);
	--accent-on-dark:  color-mix(in srgb, var(--accent) calc(100% - var(--contrast-shift)), #fff);
	--brand-on-light:  color-mix(in srgb, var(--brand) calc(100% - var(--contrast-shift)), #000);
	--brand-on-dark:   color-mix(in srgb, var(--brand) calc(100% - var(--contrast-shift)), #fff);

	/* ---- Color: pares. El texto que va ENCIMA de cada superficie ---- */
	/* (sobre --surface el texto es --text, por eso no hace falta --on-surface) */
	--on-inverse: #ffffff;       /* sobre fondo oscuro */
	--on-accent-fill: #ffffff;   /* sobre un botón */
	--on-brand: #ffffff;         /* sobre un fondo con --brand */
	--on-media: #ffffff;         /* sobre una foto */

	/* ---- Derivados ---- */
	--border-soft: color-mix(in srgb, var(--border) 33%, transparent);
	--shadow-tint: color-mix(in srgb, var(--text) 25%, transparent);
	--veil: color-mix(in srgb, var(--surface-inverse) 75%, transparent);
	--scrim: color-mix(in srgb, var(--surface-inverse) 45%, transparent);
	--grad-v: linear-gradient(180deg, var(--text) 0%, var(--accent) 100%);

	/* ---- Espaciado in-out: una unidad base + una única razón de
	        crecimiento. Cada escalón es el anterior por --space-ratio --
	        no hay 8 multiplicadores sueltos, hay una base y una elasticidad. ---- */
	--space-x: clamp(.375rem, .3rem + .35vw, .5rem);
	--space-ratio: 1.5;

	--space-1: var(--space-x);                              /* adentro de una unidad de sentido */
	--space-2: calc(var(--space-1) * var(--space-ratio));    /* entre unidades de sentido / entre contenedores y columnas */
	--space-3: calc(var(--space-2) * var(--space-ratio));    /* elemento -> su contenedor */
	--space-4: calc(var(--space-3) * var(--space-ratio));
	--space-5: calc(var(--space-4) * var(--space-ratio));
	--space-6: calc(var(--space-5) * var(--space-ratio));
	--space-7: calc(var(--space-6) * var(--space-ratio));    /* .page <-> viewport */
	--space-8: calc(var(--space-7) * var(--space-ratio));

	/* Ritmo de las secciones: no es un valor propio, es el margen del .page
	   multiplicado por una razón que va de 1:1 (mobile) a 4:3 (desktop
	   ancho) -- la misma proporción, nunca dos números sueltos. */
	--pad-ratio: clamp(1, calc(100vw / 90rem), 1.333);
	--section-pad: calc(var(--space-7) * var(--pad-ratio));

	/* ---- Ritmo del texto: una base + una razón, simétrica hacia
	        adentro (tight) y hacia afuera (wide/loose). ---- */
	--flow: var(--sca-mar);
	--flow-ratio: 1.5;
	--flow-tight: calc(var(--flow) / var(--flow-ratio));
	--flow-wide: calc(var(--flow) * var(--flow-ratio));
	--flow-loose: calc(var(--flow-wide) * var(--flow-ratio));

	/* ---- Profundidad. Cinco capas alcanzan para todo el sistema.
	        <dialog> se pone solo en la capa superior del navegador. ---- */
	--z-media: -2;    /* foto de fondo de una sección */
	--z-scrim: -1;    /* velo sobre esa foto */
	--z-base: 1;
	--z-sticky: 10;   /* flechas del carrusel, botón flotante */
	--z-header: 100;  /* header fijo */
	--z-overlay: 1000;/* menú móvil y velos a pantalla completa */

	--rad-s: .25rem;
	--rad-m: .5rem;
	--rad-l: 1rem;
	--rad-bt: 100rem;

	--sha-s: 0 .125rem .25rem 0 var(--shadow-tint);
	--sha-m: 0 .25rem .75rem 0 var(--shadow-tint);
	--sha-l: 0 .5rem 2rem .125rem var(--shadow-tint);
	--sha-i: inset 0 .125rem .25rem 0 var(--shadow-tint);

	--ani-f: 500ms cubic-bezier(.7, 0, .3, 1);

	/* Alto real del header fijo (padding-block: var(--space-3) arriba y abajo,
	   más la fila de nav/menu que mide --sca-t * 2.125) -- lo usan el offset
	   del scroll y el margen del main. Antes usaba --section-pad en vez de
	   --space-3 * 2: dan valores parecidos en mobile pero muy distintos en
	   desktop (--section-pad es para el ritmo entre secciones, no para el
	   padding del header), dejando ~55px de aire de más entre el header y
	   la primera sección en páginas sin hero. */
	--header-h: calc(var(--space-3) * 2 + var(--sca-t) * 2.125);
}

@media (width <= 960px) {
	:root {
		--ratio: 1.2;
		--space-ratio: 1.4;
	}
}
@media (width <= 380px) {
	:root {
		--ratio: 1.15;
		--space-ratio: 1.3;
	}
}


/**** 3. Layout ****/

.page {
	/* Antes tenía un salto manual de --space-7 a --space-6 en el breakpoint;
	   ahora --space-7 ya es fluido (la base --space-x y la razón cambian
	   solas por breakpoint arriba, en :root), así que un solo valor alcanza. */
	inline-size: 100%;
	max-inline-size: calc(var(--page-w) + 2 * var(--space-7));
	margin-inline: auto;
	padding-inline: var(--space-7);
}

.section {
	padding-block: var(--section-pad);
	scroll-margin-block-start: var(--header-h);

	&.overlap-b {
		padding-block-end: 0;
		margin-block-end: calc(var(--section-pad) * -1);
		position: relative;
		z-index: var(--z-sticky);

		& + .section {
			padding-block-start: calc(var(--section-pad) * 2);
		}
	}
}

/* Dos secciones seguidas del MISMO tipo de fondo se leen como una sola
   banda: se le saca el padding de arriba a la segunda. Una .bg con foto
   queda afuera a propósito -- dos fotos distintas pegadas conviene que
   se noten separadas, aunque compartan la misma clase. */
.section:not(.surface-alt):not(.bg) + .section:not(.surface-alt):not(.bg),
.section.surface-alt + .section.surface-alt,
.section.bg:not(:has(> picture:first-child, > img:first-child))
	+ .section.bg:not(:has(> picture:first-child, > img:first-child)) {
	padding-block-start: 0;
}

/* Grilla de 12 columnas.
   El gap sale del track sizing, así que .col4 mide siempre lo mismo
   sin importar cuántos hermanos tenga al lado. */
.row {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--space-6) var(--space-5);
	align-items: start;

	/* Sin clases de ancho, los hijos se reparten en partes iguales */
	&:not(:has(> :is(.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12))) {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);

		@media (width <= 960px) {
			grid-auto-flow: row;
		}
	}
	&.center {
		align-items: center;
	}
	&.bottom {
		align-items: end;
	}
	&.rtl {
		direction: rtl;

		& > * {
			direction: ltr;
		}
	}
	& > * {
		min-inline-size: 0; /* deja que el contenido largo se achique en vez de desbordar */
	}
}

/* Anchos y desplazamientos. Se usa grid-column-end para que .colN y .offN compongan. */
.col1  { grid-column-end: span 1 }
.col2  { grid-column-end: span 2 }
.col3  { grid-column-end: span 3 }
.col4  { grid-column-end: span 4 }
.col5  { grid-column-end: span 5 }
.col6  { grid-column-end: span 6 }
.col7  { grid-column-end: span 7 }
.col8  { grid-column-end: span 8 }
.col9  { grid-column-end: span 9 }
.col10 { grid-column-end: span 10 }
.col11 { grid-column-end: span 11 }
.col12 { grid-column-end: span 12 }

.off1  { grid-column-start: 2 }
.off2  { grid-column-start: 3 }
.off3  { grid-column-start: 4 }
.off4  { grid-column-start: 5 }
.off5  { grid-column-start: 6 }
.off6  { grid-column-start: 7 }
.off7  { grid-column-start: 8 }

/* .gap1: deja 1 columna de aire después del hermano anterior, sin importar
   su ancho -- a diferencia de .off, no cuenta desde el borde de la fila.
   Solo funciona si el hermano anterior arranca en la columna 1 (sin .off
   propio); si también lleva offset, seguí usando .off en los dos. */
.col1 + .gap1  { grid-column-start: 3 }
.col2 + .gap1  { grid-column-start: 4 }
.col3 + .gap1  { grid-column-start: 5 }
.col4 + .gap1  { grid-column-start: 6 }
.col5 + .gap1  { grid-column-start: 7 }
.col6 + .gap1  { grid-column-start: 8 }
.col7 + .gap1  { grid-column-start: 9 }
.col8 + .gap1  { grid-column-start: 10 }
.col9 + .gap1  { grid-column-start: 11 }
.col10 + .gap1 { grid-column-start: 12 }

/* Un ancho suelto fuera de .row (un h2 angosto, un párrafo de intro) se centra.
   El cálculo replica el de una columna real dentro de .row: 12 columnas se
   reparten el 100% MENOS los 11 gaps entre ellas, y un span de N columnas
   suma N columnas + (N-1) gaps internos -- si no se descuenta el gap, un
   .col8 suelto queda unos px más ancho que uno real dentro de una fila. */
.page > :is(.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11) {
	--track: calc((100% - 11 * var(--space-5)) / 12);
	inline-size: 100%;
	max-inline-size: calc(var(--w) * var(--track) + (var(--w) - 1) * var(--space-5));
	margin-inline: auto;
}
.page > .col1 { --w: 1 }
.page > .col2 { --w: 2 }
.page > .col3 { --w: 3 }
.page > .col4 { --w: 4 }
.page > .col5 { --w: 5 }
.page > .col6 { --w: 6 }
.page > .col7 { --w: 7 }
.page > .col8 { --w: 8 }
.page > .col9 { --w: 9 }
.page > .col10 { --w: 10 }
.page > .col11 { --w: 11 }

@media (width <= 960px) {
	.row {
		grid-template-columns: 1fr;

		& > * {
			grid-column: auto !important;
		}
	}
	.page > [class*="col"] {
		max-inline-size: none;
	}
}

.header + .main,
.header + * .main {
	margin-block-start: var(--header-h);
}

/* Nada cuelga margen al final de su contenedor */
:is(.main, .section, .page, .card, .frame, .row > *) > :last-child {
	margin-block-end: 0;
}


/**** 4. Utilidades de sección ****/

:is(.section, .card, .frame).bg {
	color: var(--on-inverse);
	background-color: var(--surface-inverse);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;

	& :is(h1, h2, h3, h4, h5, h6) {
		color: var(--on-inverse);
	}
	/* Una card clara adentro de una sección oscura vuelve al color de texto normal */
	& :is(.card, .frame):not(.bg) {
		color: var(--text);

		& :is(h1, h2, h3, h4, h5, h6) {
			color: var(--text);
		}
	}
}
:is(.section, .card, .frame).bg.grad-v {
	background-image: var(--grad-v);
}
:is(.section, .card).surface-alt {
	background: var(--surface-alt);
	border-color: transparent;
}

/* Imagen a sangre ocupando la mitad de la sección */
.section.bg-half-l {
	position: relative;

	& > img {
		position: absolute;
		inset-block: 0;
		inset-inline-start: 0;
		inline-size: 50%;
		block-size: 100%;
		object-fit: cover;
	}
	@media (width <= 960px) {
		padding-block-start: 100vw;

		& > img {
			inline-size: 100%;
			block-size: 100vw;
		}
	}
}

/* .center en .row significa "centrar verticalmente" (lo resuelve .row
   mismo), no "centrar el texto" -- se excluye acá para no pisarlo. */
.center:not(.row),
.section.center .row > *,
.card.center {
	text-align: center;

	& :is(img, svg, picture, .frame-media) {
		margin-inline: auto;
	}
}
.left { text-align: left; }
.right { text-align: right; }

/* Secciones tipo cartel: tamaño y alineación son ejes independientes.
   Centrado es lo genérico -- no hace falta clase para pedirlo. .top/.bottom
   cambian dónde se ancla el contenido, sin importar cuál sea el tamaño. */
.section.banner-md,
.section.banner-lg,
.card.banner-md {
	display: grid;
	align-items: center;
	text-align: center;
}
.section.banner-md { min-block-size: 50vh; }
.section.banner-lg { min-block-size: 90vh; }
.card.banner-md { min-block-size: 60vh; }

:is(.banner-md, .banner-lg, .hero).top { align-items: start; }
:is(.banner-md, .banner-lg, .hero).bottom { align-items: end; }

.hr {
	border: 0;
	border-block-start: 1px solid var(--border);
	margin-block: var(--flow);
}
.bg .hr {
	border-color: var(--border-soft);
}

.visuallyhidden:not(:focus):not(:active) {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}


/**** 5. Tipografía ****/

/* La jerarquía vive dentro del contenido (.main y los diálogos):
   el header y el footer tienen su propia escala. */
:is(.main, dialog, .hero) {
	& h1 {
		font-family: var(--fon-h);
		font-size: var(--sca-h1);
		font-weight: var(--fon-w9);
		line-height: var(--sca-lh-h1);
		letter-spacing: -.02em;
		text-wrap: balance;
	}
	& h2 {
		font-family: var(--fon-h);
		font-size: var(--sca-h2);
		font-weight: var(--fon-w7);
		line-height: var(--sca-lh-h2);
		letter-spacing: -.02em;
		text-wrap: balance;
	}
	& h3 {
		font-family: var(--fon-h);
		font-size: var(--sca-h3);
		font-weight: var(--fon-w7);
		line-height: var(--sca-lh-h3);
		letter-spacing: -.02em;
		text-wrap: balance;
	}
	& h4 {
		font-family: var(--fon-h);
		font-size: var(--sca-h4);
		font-weight: var(--fon-w7);
		line-height: var(--sca-lh-h4);
		text-wrap: balance;
	}
	& h5 {
		font-family: var(--fon-h);
		font-size: var(--sca-h5);
		font-weight: var(--fon-w7);
		line-height: var(--sca-lh-h5);
		text-wrap: balance;
	}
	/* h6 es el eyebrow: mismo tamaño que p, pero en negrita y con el color
	   institucional (--brand) -- es presencia de marca, no un link de acento. */
	& h6 {
		font-size: var(--sca-h6);
		font-weight: var(--fon-w9);
		line-height: var(--sca-lh-h6);
		color: var(--brand);
	}
	& :is(p, ul, ol, dl, blockquote) {
		line-height: var(--lh-t);
		text-wrap: pretty;
	}
	/* En fondos con imagen los títulos pesan menos: la foto ya hace el contraste */
	& .bg :is(h4, h5) {
		font-weight: var(--fon-w5);
	}
	& p.small {
		font-size: calc(var(--sca-t) * .8);
	}
	/* El párrafo que sigue a un título grande, y los destacados, entran un punto arriba.
	   text-wrap: balance (no pretty) empareja el largo de las líneas -- clave en una
	   bajada corta y centrada, donde "pretty" deja pasar una línea larga y otra de dos
	   o tres palabras. Balance solo actúa hasta 6 líneas en Chrome: una bajada más larga
	   de lo que pide CONTENIDO.md sigue con el comportamiento normal (pretty, heredado). */
	& :is(h1 + p, h2 + p, p.lead) {
		font-size: calc(var(--sca-t) * 1.125);
		text-wrap: balance;
	}
	/* Link de texto: solo donde hay prosa. Los links de un componente
	   (redes, menú, tarjetas) se pintan con el estilo del componente. */
	& :is(p, .list li, dd) a:not([class]) {
		color: var(--accent);
		text-decoration: underline;
		text-underline-offset: .15em;
		transition: color var(--ani-f);

		&:hover {
			color: var(--accent-fill);
		}
	}
}

/* Listas con marca: la numeración y el bullet se dibujan por CSS */
/* La lista, como bloque, respeta el centrado del contexto (se posiciona
   donde diga el padre) -- pero el texto DE ADENTRO siempre queda a la
   izquierda, para que la viñeta no se separe del texto cuando el contexto
   pide centrado. */
.main :is(ul, ol).list {
	display: inline-block;
	text-align: start;
}
.main :is(ul, ol).list > li {
	padding-inline-start: 1.125em;
	position: relative;
	margin-block-end: var(--flow-tight);
}
.main ol.list {
	counter-reset: ol-list;

	& > li::before {
		counter-increment: ol-list;
		content: counter(ol-list);
		position: absolute;
		inset-inline-start: 0;
		color: var(--accent);
		font-weight: var(--fon-w9);
	}
}
/* Datos de contacto: el término hace de rótulo y el valor de dato.
   :not(.stats) porque .stats también es un <dl> -- sin la exclusión,
   este dt (chico, de rótulo) le gana por especificidad al dt grande
   de las cifras destacadas (.main dl dt es más específico que .stats
   dt solo). */
.main dl:not(.stats) {
	& dt {
		font-size: var(--sca-h6);
		font-weight: var(--fon-w9);
		line-height: var(--sca-lh-h6);
		color: var(--brand);
		margin-block-end: var(--flow-tight);
	}
	& dd + dt {
		margin-block-start: var(--flow);
	}
	& dd a {
		text-decoration: underline;
		text-underline-offset: .15em;
	}
}
.main ul.list > li::before {
	content: '';
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: .3125em;
	inline-size: .75em;
	block-size: .75em;
	background: var(--accent);
}


/**** 6. Ritmo vertical ****/

/* El espaciado no se declara en el HTML: sale de qué elemento sigue a cuál.
   Vale en el contenido (.main), en el hero y dentro de los diálogos. */

:is(.main, .hero, dialog) :is(h1, h2, h3, h4, p, ul, ol, dl, blockquote, figure) {
	margin-block-end: var(--flow);
}
:is(.main, .hero, dialog) :is(h5, h6) {
	margin-block-end: var(--flow-tight);
}

/* Un título seguido de un bloque abre aire */
:is(.main, .hero, dialog) :is(h1, h2, h3, h4) + :is(.row, .card, .frame, .slider-wrapper, .brands, .accordion, details),
:is(.main, .hero, dialog) :is(h1, h2, h3, h4) + p + :is(.row, .card, .frame, .slider-wrapper, .brands, .accordion, details) {
	margin-block-start: var(--space-7);
}
:is(.main, .hero, dialog) .row + * {
	margin-block-start: var(--space-7);
}
:is(.main, .hero, dialog) .row :is(.row + *, * + .row) {
	margin-block-start: var(--space-5);
}
/* Mismo espacio que ya separa el carrusel de sus puntos (.slider-nav) --
   sin esto, lo que venga después de un slider queda pegado a los puntos.
   No se nota en index.html porque ahí el slider siempre cierra la sección. */
:is(.main, .hero, dialog) .slider-wrapper + * {
	margin-block-start: var(--space-5);
}

/* Texto corrido que vuelve a un título: separación mayor */
:is(.main, .hero, dialog) :is(p, ul, ol, blockquote) + :is(h1, h2, h3, h4, h5, h6) {
	margin-block-start: var(--flow-loose);
}
/* Un p.small arriba de un título funciona como antetítulo */
:is(.main, .hero, dialog) p.small + :is(h2, h3, h4) {
	margin-block-start: calc(var(--flow) * -1);
}
/* Antetítulo pegado a su título */
:is(.main, .hero, dialog) :is(h3 + h2, h4 + h3, h5 + h4, h6 + h5) {
	margin-block-start: calc(var(--flow) * -1);
}
/* :not(.slider > *, .quote > *): dentro del carrusel y de la firma de
   testimonio (foto + nombre + cargo) las columnas son celdas de un
   grid, no flujo vertical -- si no se excluye, cada figure detrás de
   otra (todas menos la primera) se corre para abajo, y en .quote el
   cite que sigue a la foto hereda un margen que no le corresponde.
   :not(:is(.bg, .hero) > :is(picture, img):first-child) del lado
   izquierdo: esa foto es un fondo con position:absolute (ver sección
   16), no ocupa lugar en el flujo -- lo que viene "después" de ella en
   el DOM es en realidad lo primero que se ve, y no debería heredar el
   aire pensado para cuando una imagen empuja contenido hacia abajo. */
:is(.main, .hero, dialog) :is(picture, img, .stack, .media, figure):not(:is(.bg, .hero) > :is(picture, img):first-child) + *:not(.slider > *, .quote > *) {
	margin-block-start: var(--flow);
}
:is(.main, .hero, dialog) :not(.bt) + :is(.bt, .bt-text),
:is(.main, .hero, dialog) .bt + .bt {
	margin-block-start: var(--flow-wide);
}
:is(.main, .hero, dialog) .bt + .bt {
	margin-inline-start: var(--flow-tight);
}

/* Títulos y bajadas sueltos en la página (fuera de .row) van centrados
   por defecto -- pero es un default, no una obligación: .left/.right lo
   cancelan (necesitan más especificidad que la regla de abajo para ganarle). */
.page > :is(h1, h2, h3, h4, h5, h6, p) {
	text-align: center;
	margin-inline: auto;
}
/* Sin un .colN explícito, no ocupan las 12 columnas: un título o párrafo
   suelto a todo el ancho de página se ve mal. col8 (66%) es el ancho que
   ya se usaba a mano en la mayoría de los casos reales del sitio -- así
   queda de fábrica en vez de depender de que alguien se acuerde de ponerlo.
   Solo en desktop: en mobile el ancho completo es lo que corresponde. */
.page > :is(h1, h2, h3, h4, h5, h6, p):not([class*="col"]) {
	@media (width > 960px) {
		inline-size: 100%;
		max-inline-size: calc(8 * ((100% - 11 * var(--space-5)) / 12) + 7 * var(--space-5));
	}
}
.page > :is(h1, h2, h3, h4, h5, h6, p).left {
	text-align: left;
	margin-inline: 0;
}
.page > :is(h1, h2, h3, h4, h5, h6, p).right {
	text-align: right;
	margin-inline-start: auto;
	margin-inline-end: 0;
}


/**** 7. Media ****/

/* <picture> solo sirve para negociar formato (avif/webp): no participa del layout */
picture {
	display: contents;
}

.main :is(img, .video, .stack) {
	border-radius: var(--rad-l);
}
/* Una foto de contenido va envuelta en <picture> y ocupa todo su lugar.
   Un <img> suelto es un ícono o un logo: se queda en su tamaño natural. */
.main picture > img {
	inline-size: 100%;
	block-size: auto;
}
.main img.icon {
	border-radius: 0;
}
img.icon + p {
	font-weight: var(--fon-w9);
}
.main p + img.icon {
	margin-block-start: var(--flow-loose);
}

/* Ícono del sprite SVG: hereda tamaño y color del texto */
svg.icon {
	inline-size: 1em;
	block-size: 1em;
	fill: currentColor;
	flex: none;
	display: inline-block;
	vertical-align: -.125em;
}

/* Dos imágenes superpuestas (la grande atrás, la chica adelante y a la derecha) */
.stack {
	position: relative;
	border-radius: 0;

	& > img:first-child,
	& > picture:first-child > img {
		inline-size: 67.5%;
	}
	& > img:nth-child(2),
	& > picture:nth-child(2) > img {
		position: absolute;
		inset-block-start: 50%;
		inset-inline-end: 0;
		translate: 0 -50%;
		inline-size: 45%;
		margin: 0;
	}
}

/* Miniatura de video con overlay de play */
.video {
	position: relative;
	display: block;
	overflow: hidden;

	& > svg.icon,
	&::after {
		position: absolute;
		inset-block-start: 50%;
		inset-inline-start: 50%;
		transform: translate(-50%, -50%);
	}
	& > svg.icon {
		inline-size: 3.5rem;
		block-size: 3.5rem;
		color: #fff;
		filter: drop-shadow(0 0 .5rem #0006);
		transition: scale var(--ani-f);
	}
	&:hover > svg.icon {
		scale: 1.12;
	}
}
.video-wrapper {
	position: relative;
	border-radius: var(--rad-l);
	box-shadow: var(--sha-l);
	overflow: hidden;

	& video {
		display: block;
		inline-size: 100%;
		aspect-ratio: 16 / 9;
		object-fit: cover;
		background: var(--surface-inverse);
	}
	& > button {
		position: absolute;
		inset: 0;
		z-index: var(--z-sticky);
		display: grid;
		place-items: center;
		background: var(--shadow-tint);
		transition: opacity var(--ani-f);
		color: #fff;

		& svg.icon {
			inline-size: 3.5rem;
			block-size: 3.5rem;
		}
		&.hidden {
			opacity: 0;

			&:hover, &:focus-visible {
				opacity: 1;
			}
		}
	}
}


/**** 8. Botones ****/

.bt {
	--bt-bg: var(--accent-fill);
	--bt-fg: var(--surface);

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .625em;
	font-size: var(--sca-t);
	line-height: 1;
	min-block-size: 2.75em;
	padding-inline: 1.5em;
	text-align: center;
	color: var(--bt-fg);
	background: var(--bt-bg);
	border: 1px solid transparent;
	border-radius: var(--rad-bt);
	box-shadow: 0 0 0 0 var(--bt-bg);
	transition: box-shadow var(--ani-f), background-color var(--ani-f), color var(--ani-f);

	&:hover {
		box-shadow: 0 0 0 .25rem var(--bt-bg);
	}
	&.bt-small {
		font-size: calc(var(--sca-t) * .875);
	}
	&.bt-icon {
		inline-size: 2.75em;
		padding-inline: 0;
	}
	/* Botón contorneado */
	&.bt-outline {
		--bt-bg: var(--surface);
		--bt-fg: var(--accent);
		border-color: currentColor;
	}
	&[disabled] {
		--bt-bg: var(--border);
		--bt-fg: var(--surface);
		cursor: not-allowed;
		box-shadow: none;
		opacity: .6;
	}
}
.bt-text {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	font-size: var(--sca-t);
	font-weight: var(--fon-w9);
	line-height: calc(var(--lh-t) * 1.1);
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: .2em;
	border-radius: var(--rad-s);
	transition: color var(--ani-f), opacity var(--ani-f);

	&:hover {
		opacity: .7;
	}
}
p .bt-text {
	display: inline;
	margin-inline-start: .5em;
}

/* Sobre fondo oscuro los botones invierten */
.bg :is(.bt, .bt-text) {
	--bt-bg: var(--on-inverse);
	--bt-fg: var(--surface-inverse);
	color: var(--bt-fg);
}
.bg .bt-text {
	color: var(--on-inverse);
}
.bg .bt.bt-outline {
	--bt-bg: transparent;
	--bt-fg: var(--on-inverse);
	border-color: currentColor;
}
/* …y adentro de una card clara vuelven al estilo normal */
.bg .card:not(.bg) :is(.bt, .bt-text) {
	--bt-bg: var(--accent-fill);
	--bt-fg: var(--surface);
	color: var(--bt-fg);
}
.bg .card:not(.bg) .bt-text {
	color: var(--accent);
}

.bt-fixed {
	position: fixed;
	inset-inline-end: var(--flow);
	inset-block-end: var(--flow);
	z-index: var(--z-sticky);
	inline-size: calc(var(--sca-t) * 3.5);
	block-size: calc(var(--sca-t) * 3.5);
	font-size: calc(var(--sca-t) * 1.5);
	display: grid;
	place-items: center;
	color: var(--surface);
	background: var(--accent-fill);
	border-radius: var(--rad-bt);
	box-shadow: var(--sha-m);
}


/**** 9. Card / frame ****/

.card,
.frame {
	container-type: inline-size;
	/* flex-column + gap en vez de márgenes propios: el espaciado entre los
	   hijos pasa a ser una propiedad del contenedor, no de cada elemento
	   según lo que tenga al lado -- evita toda la familia de bugs de "esta
	   regla de ritmo vertical se filtra a un contexto que no es flujo
	   normal" que fuimos pisando uno por uno (banner CTA, carrusel, .quote,
	   fondos absolutos). Como consecuencia, el sistema global de ritmo
	   vertical (sección 6) no debe aplicar acá: se neutraliza más abajo. */
	display: flex;
	flex-direction: column;
	gap: var(--flow);
	position: relative;
	padding: var(--space-5) var(--space-5);
	border: 1px solid var(--border);
	border-radius: var(--rad-l);
	background: var(--surface);

	/* El ritmo vertical global (sección 6) y reglas propias de algún
	   componente (ej. p.price) son para flujo de documento -- acá el
	   espacio ya lo da el gap del flex, así que se apagan a nivel de hijo
	   directo. No toca al contenido de una lista o un párrafo largo más
	   adentro, que sigue con su propio espaciado interno normal.
	   !important porque son demasiadas reglas dispersas por specifidad
	   variable como para pisarlas una por una sin que se escape alguna
	   (ya pasó: el antetítulo negativo de p.small, el margin de p.price) --
	   mismo criterio que ya usa el proyecto en @media(prefers-reduced-motion)
	   y el grid-column de mobile: un corte limpio, no una guerra de
	   especificidad. .bt:last-child se excluye porque necesita su propio
	   margin-block-start:auto para pegarse abajo. */
	& > *:not(.bt:last-child) {
		margin-block: 0 !important;
	}
	&.bg {
		border-color: transparent;
	}
	& + & {
		margin-block-start: var(--flow);
	}
	/* Adentro de una fila o de un carrusel, el espacio entre cards ya lo da
	   el gap del grid -- sin esto, la segunda y tercera card quedaban
	   corridas hacia abajo respecto de la primera. En index.html no se nota
	   con .slider porque ahí las cards de testimonios van envueltas en
	   <figure>, nunca como hermanas directas del slider. */
	:is(.row, .slider) > & + & {
		margin-block-start: 0;
	}
	/* Ocupar el 100% solo tiene sentido siendo hijo directo de .row -- ahí
	   iguala el alto contra los hermanos. Dentro de otra cosa (un <figure>
	   del carrusel, por ejemplo) no hay hermanos que igualar, y el 100% se
	   estira contra ESE contenedor y no contra la fila: empuja cualquier
	   hermano que venga después (el nombre y la foto de un testimonio, en
	   ese caso) fuera de la caja visible. */
	.row > & {
		block-size: 100%;
	}
	/* Foto de cabecera: sangra hasta el borde. Un ícono suelto no. */
	&:not(.bg) > picture:first-child > img {
		margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) 0;
		inline-size: calc(100% + var(--space-5) * 2);
		max-inline-size: none;
		border-end-start-radius: 0;
		border-end-end-radius: 0;
	}
	/* El botón final se apoya abajo: si la card está estirada (.row > &
	   contra una hermana más alta), el margen automático se come todo el
	   sobrante y lo pega al piso. Si no hay sobrante, se comporta como
	   cualquier otro hijo -- separado por el gap normal. */
	& > .bt:last-child {
		margin-block-start: auto;
	}
	/* Sin esto, el align-items:stretch por default del flex-column estira
	   el botón a todo el ancho de la card -- .bt es inline-flex a propósito,
	   para medir según su contenido, no según el contenedor. */
	& > :is(.bt, .bt-text) {
		align-self: flex-start;
	}
	/* .center ya centra el texto -- el botón tiene que acompañar, no
	   quedarse pegado a la izquierda por el flex-start de arriba. */
	&.center > :is(.bt, .bt-text) {
		align-self: center;
	}
}
/* Card ancha suelta en la página: se comporta como bloque destacado */
.page > :is(.card, .frame) {
	padding: var(--space-7) 8.666%;

	@media (width <= 960px) {
		margin-inline: calc(var(--space-6) * -1);
		padding: var(--space-7) var(--space-6);
		border-radius: 0;
	}
}
/* Una card ancha que termina en un botón arma sola el layout de texto +
   botón a la derecha, centrado -- sin necesitar row/col en el HTML. El
   ::span 999 hace que el botón abarque todas las filas de texto que haya,
   sin importar si son 1, 2 o más. Solo en desktop: en mobile se apila. */
.page > :is(.card, .frame):has(> .bt:last-child) {
	@media (width > 960px) {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		/* row-gap explícito en 0: la base (.card,.frame) trae gap:var(--flow)
		   para el flex-column, que también fija el row-gap -- sin pisarlo acá,
		   con 999 filas reales (grid-row: span 999 más abajo) esos 16px se
		   multiplican por ~998 huecos y la card explota a ~16000px de alto. */
		gap: 0 var(--space-5);

		& > :not(.bt) {
			grid-column: 1;
		}
		& > .bt:last-child {
			grid-column: 2;
			grid-row: 1 / span 999;
			align-self: center;
			/* La base (.card,.frame) le da margin-block-start:auto para
			   pegarse abajo en flex-column -- acá align-self ya lo centra,
			   así que ese auto compite por el mismo espacio libre y termina
			   empujándolo al fondo del área en vez de centrarlo. */
			margin-block-start: 0;
		}
	}
}
.frame {
	border: 0;
	background: none;
	padding-inline: 0;
}
.card h6.badge {
	position: absolute;
	inset-block-start: var(--space-3);
	inset-inline-end: var(--space-3);
	font-size: calc(var(--sca-t) * .75);
	line-height: 1.75em;
	padding-inline: .875em;
	color: var(--surface);
	background: var(--critical);
	border-radius: var(--rad-bt);
	margin: 0;
}

/* Card con ícono al costado. Se acomoda según su propio ancho, no según la columna. */
.card-icon {
	display: grid;
	gap: var(--flow);
	align-items: center;
	grid-template-columns: auto 1fr;
	text-align: start;

	& > img {
		grid-row: span 2;
	}
	& > * {
		margin: 0;
	}
	& > * + * {
		margin-block-start: var(--flow);
	}
	@container (width < 24rem) {
		grid-template-columns: 1fr;
		text-align: center;
		justify-items: center;

		& > img {
			grid-row: auto;
		}
	}
}


/**** 10. Acordeón — <details name="…"> ****/

/* Con el atributo name, el navegador ya cierra los hermanos al abrir uno.
   No hace falta JavaScript. */
.main details {
	border-block-start: 1px solid var(--border);
	padding-block: var(--flow-wide);

	&:last-of-type {
		border-block-end: 1px solid var(--border);
	}
	& summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--flow);
		font-size: calc(var(--sca-t) * 1.125);
		font-weight: var(--fon-w9);
		line-height: var(--lh-t);
		cursor: pointer;
		list-style: none;
		transition: color var(--ani-f);

		&::-webkit-details-marker {
			display: none;
		}
		&::after {
			content: '';
			flex: none;
			inline-size: .75em;
			block-size: .75em;
			border-inline-end: 2px solid currentColor;
			border-block-end: 2px solid currentColor;
			rotate: 45deg;
			translate: 0 -.15em;
			transition: rotate var(--ani-f);
		}
		&:hover {
			color: var(--accent);
		}
	}
	&[open] > summary::after {
		rotate: 225deg;
		translate: 0 .15em;
	}
	/* Animación de apertura. Donde no esté soportada, abre de golpe: no rompe nada. */
	&::details-content {
		block-size: 0;
		overflow: hidden;
		opacity: 0;
		transition: block-size var(--ani-f), opacity var(--ani-f), content-visibility var(--ani-f);
		transition-behavior: allow-discrete;
	}
	&[open]::details-content {
		block-size: auto;
		opacity: 1;
	}
	& :is(p, ul, ol) {
		margin-block-start: var(--flow);
	}
	& > :last-child {
		margin-block-end: 0;
	}
}
.bg .main details,
.main .bg details {
	border-color: var(--border-soft);
}
/* Variante en tarjetas separadas */
.main details.card {
	border: 1px solid var(--border);
	border-radius: var(--rad-l);
	padding: var(--space-5) var(--space-6);
	block-size: auto;

	& + details.card {
		margin-block-start: var(--flow-tight);
	}
}


/**** 11. Modal — <dialog> ****/

/* El navegador se encarga del foco, del Esc y del fondo. */
dialog {
	margin: auto;
	inline-size: calc(100vw - var(--space-5) * 2);
	max-inline-size: calc(var(--sca-t) * 40);
	padding: var(--space-5);
	color: var(--text);
	background: var(--surface);
	border: 0;
	border-radius: var(--rad-m);
	box-shadow: var(--sha-l);
	overflow: visible;

	&::backdrop {
		background: var(--veil);
		backdrop-filter: blur(2px);
	}
	&.full {
		max-inline-size: calc(100vw - var(--space-5) * 2);
		block-size: calc(100vh - var(--space-5) * 2);
	}
	&.wide {
		max-inline-size: calc(var(--sca-t) * 60);
	}
	&.alert {
		text-align: center;
	}
	/* Botón de cierre, arriba y afuera */
	& > .bt-close {
		position: absolute;
		inset-block-end: 100%;
		inset-inline-end: 0;
		display: flex;
		align-items: center;
		gap: .5em;
		font-size: calc(var(--sca-t) * .8);
		line-height: 3;
		color: var(--on-inverse);
	}
	& > :last-child {
		margin-block-end: 0;
	}

	/* Entrada y salida animadas */
	opacity: 0;
	scale: .96;
	transition: opacity var(--ani-f), scale var(--ani-f), overlay var(--ani-f), display var(--ani-f);
	transition-behavior: allow-discrete;

	&[open] {
		opacity: 1;
		scale: 1;

		@starting-style {
			opacity: 0;
			scale: .96;
		}
	}
	&::backdrop {
		opacity: 0;
		transition: opacity var(--ani-f), overlay var(--ani-f), display var(--ani-f);
		transition-behavior: allow-discrete;
	}
	&[open]::backdrop {
		opacity: 1;

		@starting-style {
			opacity: 0;
		}
	}
}


/**** 12. Carrusel — scroll-snap ****/

/* El scroll y el gesto táctil los maneja el navegador.
   El JS solo agrega flechas y puntos: sin JS el carrusel sigue funcionando. */
/* Grid de 2 filas: la foto arriba, los puntos abajo. Las flechas se anclan
   explícitamente a la fila 1 -- así su "50%" se calcula contra la altura
   de la foto sola, sin que el epígrafe ni los puntos corran el centro. */
.slider-wrapper {
	position: relative;
	display: grid;
	grid-template-rows: auto auto;
}
.slider {
	--slides: 1;

	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - (var(--slides) - 1) * var(--space-5)) / var(--slides));
	gap: var(--space-5);
	overflow-x: auto;
	overflow-y: hidden; /* si no se declara, el navegador lo calcula en "auto" solo
	                       por tener overflow-x distinto de visible -- y un scroll
	                       vertical silencioso es peor que un desborde visible */
	overscroll-behavior-inline: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;

	&::-webkit-scrollbar {
		display: none;
	}
	& > * {
		scroll-snap-align: start;
		min-inline-size: 0;
	}
}
@media (prefers-reduced-motion: reduce) {
	.slider {
		scroll-behavior: auto;
	}
}

.slider-prev,
.slider-next {
	position: absolute;
	grid-row: 1 / 2;
	align-self: center;
	z-index: var(--z-sticky);
	inline-size: 3rem;
	block-size: 3rem;
	display: grid;
	place-items: center;
	color: var(--text);
	background: var(--surface);
	border-radius: var(--rad-bt);
	box-shadow: var(--sha-m);
	transition: opacity var(--ani-f), scale var(--ani-f);

	& svg.icon {
		inline-size: 1.25rem;
		block-size: 1.25rem;
	}
	&:hover {
		scale: 1.08;
	}
	&[disabled] {
		opacity: 0;
		pointer-events: none;
	}
	@media (width <= 960px) {
		display: none;
	}
}
.slider-prev {
	inset-inline-start: var(--space-5);
}
.slider-next {
	inset-inline-end: var(--space-5);
}
.bg .slider-prev,
.bg .slider-next,
.hero .slider-prev,
.hero .slider-next {
	color: var(--on-inverse);
	background: transparent;
	box-shadow: inset 0 0 0 1px currentColor;
}

.slider-nav {
	display: flex;
	justify-content: center;
	gap: .75rem;
	margin-block-start: var(--space-5);

	/* El área de toque mide 24px aunque el punto se vea chico */
	& > button {
		flex: none;
		inline-size: 1.5rem;
		block-size: 1.5rem;
		display: grid;
		place-items: center;

		&::before {
			content: '';
			inline-size: .5rem;
			block-size: .5rem;
			border: 1px solid var(--border);
			border-radius: var(--rad-bt);
			transition: background-color var(--ani-f), scale var(--ani-f);
		}
		&[aria-current="true"]::before {
			background: var(--accent-fill);
			border-color: var(--accent-fill);
			scale: 1.2;
		}
	}
}
.bg .slider-nav > button::before {
	border-color: var(--on-inverse);
}
.bg .slider-nav > button[aria-current="true"]::before {
	background: var(--on-inverse);
}


/**** 13. Logos, redes, citas, precios ****/

.brands {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-5) var(--space-6);

	& img {
		inline-size: auto;
		max-block-size: calc(var(--sca-t) * 2.5);
		object-fit: contain;
	}
	& figcaption {
		margin-block-start: .5em;
		font-size: calc(var(--sca-t) * .8);
	}
}
/* Variante deslizable: los mismos logos, en carrusel en vez de reparto
   libre -- útil cuando son demasiados para entrar en una sola fila.
   --slides se define acá (no inline como en los otros .slider) porque
   así sí se puede ajustar por breakpoint: un custom property puesto
   inline en el HTML le gana a cualquier @media del stylesheet. */
.slider.brands {
	--slides: 6;
	display: grid;
	align-items: center;
	/* .brands trae justify-content:center para el reparto libre -- en un
	   grid que desborda, "center" corre todo el set de columnas y deja el
	   primer logo fuera de alcance incluso en scrollLeft:0. */
	justify-content: normal;

	/* La imagen ocupa toda la celda (no solo su ancho natural, como en
	   .brands): scroll-snap-align:start alinea contra el borde de la
	   IMAGEN, no de la celda -- si quedaba angosta y centrada con
	   justify-items, el snap "asentaba" el scroll en ese hueco en vez de
	   en el borde real de la celda. object-fit sigue centrando el logo
	   adentro sin estirarlo. */
	& img {
		inline-size: 100%;
	}

	@media (width <= 640px) {
		--slides: 3;
	}
}

.social {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-block-start: var(--flow);

	& a {
		inline-size: calc(var(--sca-t) * 2.25);
		block-size: calc(var(--sca-t) * 2.25);
		display: grid;
		place-items: center;
		color: var(--surface);
		background: var(--text);
		border-radius: var(--rad-bt);
		transition: opacity var(--ani-f), scale var(--ani-f);

		&:hover {
			scale: 1.1;
			opacity: .85;
		}
	}
}
.bg .social a {
	color: var(--surface-inverse);
	background: var(--on-inverse);
}

/* Firma de testimonio: foto redonda + nombre + cargo */
.quote {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: repeat(2, auto);
	align-items: center;
	column-gap: 1rem;
	margin-block-start: var(--flow-wide);

	& img {
		grid-row: 1 / 3;
		inline-size: 4rem;
		block-size: 4rem;
		object-fit: cover;
		border-radius: var(--rad-bt);
	}
	/* cite y span no necesitan columna propia: al ocupar la foto las 2 filas
	   de la columna 1, el acomodo automático del grid los deja solos en la
	   columna 2 -- nombre arriba, cargo abajo -- sin envolverlos en nada. */
	& cite {
		font-style: normal;
		font-weight: var(--fon-w9);
		line-height: var(--lh-t);
	}
	& cite + span {
		font-size: calc(var(--sca-t) * .8);
		font-weight: var(--fon-w5);
		color: var(--text-muted);
	}
}

/* Pie de una imagen o de un testimonio dentro del carrusel */
.slider figure figcaption {
	margin-block-start: var(--flow);
}
.slider blockquote > :last-child {
	margin-block-end: 0;
}

p.price {
	margin-block: var(--flow-loose) var(--flow-loose);
	line-height: 1;

	& span {
		font-size: 1.5em;
		color: var(--accent);
	}
	& strong {
		font-size: 2.75em;
		letter-spacing: -.02em;
		color: var(--accent);
		margin-inline: .125em;
	}
	& del {
		display: block;
		font-size: calc(var(--sca-t) * 1.1875);
		color: var(--shadow-tint);
		text-decoration: line-through;
		text-decoration-color: var(--critical);
		margin-block-end: .25em;
	}
}

/**** 14. Formularios ****/

.field {
	margin-block-end: var(--flow);

	/* El span suelto es el rótulo de un grupo de opciones (radios/checkboxes),
	   donde no hay un único input al que asociarle un <label for>. Se excluye
	   el label que ENVUELVE un checkbox/radio: ese ya tiene su propio estilo. */
	& > :is(label, span):first-child:not(:has(input)) {
		display: block;
		font-size: var(--sca-h6);
		font-weight: var(--fon-w9);
		line-height: var(--sca-lh-h6);
		color: var(--brand);
		margin-block-end: var(--flow-tight);
	}
	& :is(input, select, textarea) {
		inline-size: 100%;
		padding: 1em 1.25em;
		border: 1px solid var(--border);
		border-radius: var(--rad-s);
		background: var(--surface);
		color: var(--text);
		transition: border-color var(--ani-f), box-shadow var(--ani-f);

		&:hover {
			border-color: var(--accent);
		}
	}
	& textarea {
		resize: vertical;
		min-block-size: 6em;
	}
	/* Validación nativa: solo marca el error después de que el usuario interactuó */
	& :is(input, select, textarea):user-invalid {
		border-color: var(--critical);
	}
	& :is(input, select, textarea):user-valid {
		border-color: var(--positive);
	}
	& .error-msg {
		display: none;
		font-size: calc(var(--sca-t) * .8);
		color: var(--critical);
		margin-block-start: var(--flow-tight);
	}
	& :is(input, select, textarea):user-invalid ~ .error-msg {
		display: block;
	}

	/* Checkbox / radio nativos, coloreados con el tema */
	& label:has(input:is([type="checkbox"], [type="radio"])) {
		display: grid;
		grid-template-columns: auto 1fr;
		gap: .75em;
		align-items: start;
		font-size: calc(var(--sca-t) * .8);
		font-weight: var(--fon-w5);
		color: inherit;
		cursor: pointer;

		& input {
			inline-size: 1.25em;
			block-size: 1.25em;
			accent-color: var(--accent);
			margin-block-start: .1em;
		}
	}
}
.bg .field :is(input, select, textarea) {
	border-color: transparent;
	background: var(--surface);
	color: var(--text);
}
.form {
	& .bt {
		inline-size: 100%;
	}
	& .bt + p {
		font-size: calc(var(--sca-t) * .75);
		line-height: var(--lh-t);
		opacity: .6;
		padding-block: 1rem;
	}
}
.cf-turnstile {
	margin-block: calc(var(--flow) * .75);
}


/**** 15. Header ****/

.header {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: var(--z-header);
	font-size: calc(var(--sca-t) * .875);
	padding-block: var(--space-3);
	background: var(--surface);
	color: var(--text);
	box-shadow: none;
	transition: background var(--ani-f), color var(--ani-f), box-shadow var(--ani-f);

	&.scrolled {
		box-shadow: var(--sha-m);
	}

	& > .page {
		display: flex;
		align-items: center;
		gap: var(--space-5);
	}
	& nav {
		margin-inline: auto;
	}
	& ul {
		display: flex;
		align-items: center;
		gap: calc(var(--sca-t) * 2);
	}
	/* Alto explícito por flex + min-block-size, no por line-height: da un
	   área de toque clara (WCAG 2.5.8) sin depender de la métrica del texto. */
	& :is(nav, .menu) :is(a, button):not(.bt) {
		display: flex;
		align-items: center;
		min-block-size: calc(var(--sca-t) * 2.125);
		transition: color var(--ani-f);

		&:hover {
			color: var(--accent);
		}
	}
	& .bt {
		min-block-size: calc(var(--sca-t) * 2.125);
		padding-inline: var(--sca-t);
	}
}
.header.bg {
	background: var(--surface-inverse);
	color: var(--on-inverse);

	&.scrolled {
		box-shadow: none;
	}
}
.header.transparent:not(.scrolled) {
	background: transparent;
	color: var(--on-media);
	box-shadow: none;
}
.header.transparent + .hero {
	margin-block-start: 0;
	min-block-size: 100svh;
}
.branding {
	font-size: calc(var(--sca-t) * 1.5);
	font-weight: var(--fon-w9);
	line-height: calc(var(--sca-t) * 2.125);
	flex: none;

	& span {
		color: var(--accent);
	}
	& img {
		block-size: calc(var(--sca-t) * 2.625);
		inline-size: auto;
	}
}
.menu {
	display: flex;
	align-items: center;
	gap: var(--sca-t);
	flex: none;
}

/* Submenú: se abre con el mouse y también con el teclado */
.submenu {
	position: relative;

	& > ul {
		position: absolute;
		inset-block-start: 100%;
		inset-inline-start: 50%;
		translate: -50% 0;
		margin-block-start: var(--space-3);
		padding: calc(var(--flow) * .75) calc(var(--flow) * 1.25);
		display: grid;
		gap: var(--flow-tight);
		white-space: nowrap;
		background: var(--surface);
		border-radius: var(--rad-m);
		box-shadow: var(--sha-m);
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--ani-f), visibility var(--ani-f);
		transition-delay: .3s;
	}
	&:has(> button[aria-expanded="true"]) > ul,
	&:is(:hover, :focus-within) > ul {
		opacity: 1;
		visibility: visible;
		transition-delay: 0s;
	}
	& > :is(button, a)::after {
		content: '';
		display: inline-block;
		inline-size: .4em;
		block-size: .4em;
		margin-inline-start: .5em;
		border-inline-end: 2px solid var(--accent);
		border-block-end: 2px solid var(--accent);
		rotate: 45deg;
		translate: 0 -.15em;
		transition: rotate var(--ani-f);
	}
	&:is(:hover, :focus-within) > :is(button, a)::after {
		rotate: 225deg;
	}
}

.bt-menu {
	display: none;
	flex: none;
	margin-inline-start: auto;
	font-size: calc(var(--sca-t) * 1.5);
	color: var(--accent);
}

@media (width <= 960px) {
	.bt-menu {
		display: block;
	}
	/* El menú se muestra según aria-expanded: el JS solo cambia ese atributo.
	   display:none (no solo opacity/visibility) saca el menú cerrado del árbol
	   de accesibilidad y de cualquier chequeo de tamaño de objetivo táctil;
	   la transición de display se anima igual gracias a @starting-style. */
	.header:has(.bt-menu[aria-expanded="false"]) :is(nav, .menu) {
		display: none;
		opacity: 0;
	}
	.header nav {
		position: absolute;
		inset-block-start: 100%;
		inset-inline: 0;
		block-size: 100vh;
		z-index: var(--z-base);
		margin: 0;
		padding: var(--space-5);
		background: var(--surface);
		border-block-start: 1px solid var(--border);
		display: block;
		opacity: 1;
		transition: opacity var(--ani-f), display var(--ani-f) allow-discrete;

		@starting-style {
			opacity: 0;
		}

		& > ul {
			display: grid;
			gap: 0;
		}
		& :is(a, button) {
			min-block-size: calc(var(--sca-t) * 3);
			font-size: var(--sca-t);
		}
	}
	.header.bg nav {
		background: var(--surface-inverse);
	}
	.submenu > ul {
		position: static;
		translate: none;
		opacity: 1;
		visibility: visible;
		white-space: normal;
		background: none;
		box-shadow: none;
		border-radius: 0;
		padding: 0 0 0 var(--flow);
		margin: 0;
	}
	.menu {
		position: fixed;
		inset-inline: var(--space-5);
		inset-block-end: var(--space-5);
		z-index: var(--z-sticky);
		display: flex;
		opacity: 1;
		transition: opacity var(--ani-f), display var(--ani-f) allow-discrete;

		@starting-style {
			opacity: 0;
		}
		& > :not(:last-child) {
			display: none;
		}
		& .bt {
			inline-size: 100%;
		}
	}
}


/**** 16. Hero ****/

.hero {
	position: relative;
	isolation: isolate;
	display: grid;
	align-items: center;
	margin-block-start: var(--header-h);
	min-block-size: calc(100svh - var(--header-h));
	text-align: center;
	overflow: hidden;
	/* padding-block no se declara acá: a pantalla completa lo define
	   .section.bg (más específico, y es lo que YA se aplicaba). En .compact
	   sí hace falta un valor propio, porque ahí no hay min-block-size que
	   domine y el padding pasa a decidir el alto real de la sección. */

	&.compact {
		min-block-size: auto;
		padding-block: var(--section-pad);
		inline-size: calc(100% - var(--space-5) * 3);
		max-inline-size: calc(var(--page-w) + var(--space-5) * 3);
		margin-inline: auto;
		border-radius: var(--rad-l);
	}
	& .slider,
	& .slide {
		block-size: 100%;
	}
	& .slide {
		display: grid;
		align-items: center;
	}
	& .content {
		max-inline-size: 55rem;
		margin-inline: auto;
	}
}

/* La imagen de fondo es un <img> real: el navegador la descubre y la prioriza
   antes que un background-image, que es lo que mide el LCP. */
:is(.section, .card, .frame).bg,
.hero {
	position: relative;
	isolation: isolate;
}
:is(.section, .card, .frame).bg > img:first-child,
:is(.section, .card, .frame).bg > picture:first-child > img,
.hero > img:first-child,
.hero > picture:first-child > img {
	position: absolute;
	inset: 0;
	z-index: var(--z-media);
	inline-size: 100%;
	block-size: 100%;
	max-inline-size: none;
	object-fit: cover;
	border-radius: inherit;
}
/* Velo para que el texto sobre foto tenga contraste real */
:is(.section, .card, .frame).bg:has(> img:first-child)::before,
:is(.section, .card, .frame).bg:has(> picture:first-child)::before,
.hero:has(> img:first-child)::before,
.hero:has(> picture:first-child)::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: var(--z-scrim);
	background: var(--scrim);
	border-radius: inherit;
}


/**** 17. Footer ****/

.footer {
	padding-block: var(--space-6);
	font-size: calc(var(--sca-t) * .8);
	border-block-start: 1px solid var(--border);

	/* Subrayado solo en links de texto (legales, nav); el logo y los
	   íconos de redes ya tienen su propio estilo. */
	& :is(.legal a, nav a) {
		text-decoration: underline;
		text-underline-offset: .2em;
	}
	& .azuite {
		color: var(--accent);
		font-weight: var(--fon-w9);
		text-decoration: none;
	}
}
/* Footer de una sola línea: copyright a la izquierda, firma a la derecha */
.footer > .page:not(:has(.row)) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--flow);

	@media (width <= 960px) {
		justify-content: center;
		text-align: center;
	}
}

/* Volver arriba */
.main > .bt-text:last-child {
	display: flex;
	justify-content: center;
	margin-inline: auto;
	margin-block-start: 20vh;
	line-height: 4rem;
	text-decoration: none;
}


/**** 18. Módulos opcionales ****/

/* Bloqueo de pantalla mientras se procesa algo */
#jslock {
	position: fixed;
	inset: 0;
	z-index: var(--z-overlay);
	background: var(--veil);
}
.loader {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	translate: -50% -50%;
	inline-size: calc(var(--sca-t) * 3);
	block-size: calc(var(--sca-t) * 3);
	border: calc(var(--sca-t) / 4) solid var(--accent-fill);
	border-block-end-color: transparent;
	border-radius: var(--rad-bt);
	animation: spin 1s linear infinite;
}
@keyframes spin {
	to { rotate: 360deg }
}


/**** 19. Cifras destacadas ****/

/* <dl class="stats"> con un <div><dt>+500</dt><dd>clientes</dd></div> por cifra */
.stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: var(--space-6) var(--space-5);
	margin-block: var(--space-5);

	& dt {
		font-family: var(--fon-h);
		font-size: var(--sca-h2);
		font-weight: var(--fon-w9);
		line-height: 1;
		letter-spacing: -.03em;
		color: var(--accent);
		font-variant-numeric: tabular-nums;
	}
	& dd {
		margin-block-start: var(--flow-tight);
		font-size: calc(var(--sca-t) * .9);
		line-height: var(--lh-t);
		color: var(--text-muted);
	}
}


/**** 20. Pasos numerados ****/

/* Va en <ol> porque el orden es información, no decoración */
.steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: var(--space-6);
	counter-reset: paso;
	padding: 0;
	margin-block: var(--space-5);

	& > li {
		list-style: none;
		padding: 0;
		margin: 0;
		position: relative;

		&::before {
			counter-increment: paso;
			content: counter(paso);
			display: grid;
			place-items: center;
			inline-size: 2.5rem;
			block-size: 2.5rem;
			margin-block-end: var(--flow);
			font-family: var(--fon-h);
			font-weight: var(--fon-w9);
			font-variant-numeric: tabular-nums;
			color: var(--on-accent-fill);
			background: var(--accent-fill);
			border-radius: var(--rad-bt);
		}
	}
	& :is(h3, h4) {
		margin-block-end: var(--flow-tight);
	}
	& p:last-child {
		margin-block-end: 0;
	}
}
.bg .steps > li::before {
	color: var(--surface-inverse);
	background: var(--on-inverse);
}


/**** 21. Tablas ****/

/* Siempre dentro de <div class="scroller"> para que no desborde en móvil */
.scroller {
	/* position:relative para que un descendiente position:absolute (p. ej. un
	   texto .visuallyhidden dentro de una celda) quede contenido y recortado
	   acá, en vez de escapar hacia el ancestro posicionado más cercano. */
	position: relative;
	overflow-x: auto;
	margin-block: var(--space-5);
}
.main table {
	inline-size: 100%;
	border-collapse: collapse;
	font-size: calc(var(--sca-t) * .95);
	min-inline-size: 32rem;

	& caption {
		text-align: start;
		font-size: calc(var(--sca-t) * .8);
		color: var(--text-muted);
		padding-block-end: var(--flow);
	}
	& th {
		text-align: start;
		font-weight: var(--fon-w9);
		border-block-end: 2px solid var(--border);
		padding: var(--space-3) var(--space-4) var(--space-3) 0;
		vertical-align: bottom;
	}
	& td {
		padding: var(--space-3) var(--space-4) var(--space-3) 0;
		border-block-end: 1px solid var(--border-soft);
		vertical-align: top;
	}
	& :is(th, td):last-child {
		padding-inline-end: 0;
	}
	& tbody th {
		border-block-end-width: 1px;
	}
}
/* Tabla comparativa: la primera columna rotula y las demás comparan */
.compare {
	& :is(th, td):not(:first-child) {
		text-align: center;
	}
	& td svg.icon {
		inline-size: 1.15em;
		block-size: 1.15em;
		color: var(--positive);
	}
	& td .no {
		color: var(--text-muted);
	}
}


/**** 22. Migas de navegación ****/

.breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35em .6em;
	font-size: calc(var(--sca-t) * .85);
	padding: 0;
	margin-block-end: var(--space-5);
	color: var(--text-muted);

	& > li {
		display: flex;
		align-items: center;
		gap: .6em;
		margin: 0;
	}
	& > li + li::before {
		content: '';
		inline-size: .35em;
		block-size: .35em;
		border-inline-end: 1.5px solid currentColor;
		border-block-start: 1.5px solid currentColor;
		rotate: 45deg;
		opacity: .7;
	}
	& a:hover {
		color: var(--accent);
		text-decoration: underline;
	}
	& [aria-current="page"] {
		color: var(--text);
	}
}


/**** 23. Barra de aviso ****/

/* Va antes del <header>. El header es fixed, así que si se usa .announce hay
   que sumarle su alto a --header-h para que no quede tapado. */
.announce {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-5);
	font-size: calc(var(--sca-t) * .85);
	text-align: center;
	color: var(--on-inverse);
	background: var(--surface-inverse);

	& a {
		text-decoration: underline;
		text-underline-offset: .2em;
	}
	& button {
		margin-inline-start: auto;
		color: inherit;
		opacity: .7;

		&:hover { opacity: 1; }
	}
}


/**** 24. Avisos de estado ****/

/* Para el resultado de un formulario, no para decorar */
.notice {
	display: grid;
	grid-template-columns: auto 1fr;

	&[hidden] { display: none; } /* el atributo hidden gana sobre el display propio */
	gap: var(--space-3);
	align-items: start;
	padding: var(--space-4);
	border: 1px solid currentColor;
	border-radius: var(--rad-m);
	margin-block: var(--space-4);
	font-size: calc(var(--sca-t) * .95);

	& svg.icon {
		inline-size: 1.25em;
		block-size: 1.25em;
		margin-block-start: .12em;
	}
	& > div > :last-child {
		margin-block-end: 0;
	}
	& strong {
		display: block;
	}
}
.notice-ok { color: var(--positive); }
.notice-error { color: var(--critical); }
.notice-info { color: var(--accent); }
.notice :is(p, strong) { color: var(--text); }
.bg .notice :is(p, strong) { color: var(--on-inverse); }

/* Listado sin resultados */
.empty {
	text-align: center;
	padding: var(--space-8) var(--space-5);
	border: 1px dashed var(--border);
	border-radius: var(--rad-l);
	color: var(--text-muted);

	& > :last-child { margin-block-end: 0; }
}


/**** 25. Formulario: campos que faltaban ****/

fieldset {
	border: 0;
	padding: 0;
	margin-block-end: var(--space-4);

	& legend {
		font-size: var(--sca-h6);
		font-weight: var(--fon-w9);
		color: var(--accent);
		margin-block-end: var(--flow-tight);
		padding: 0;
	}
}
.field {
	/* Flecha del select dibujada en CSS, sin imagen */
	& select {
		appearance: none;
		background-image:
			linear-gradient(45deg, transparent 50%, currentColor 50%),
			linear-gradient(135deg, currentColor 50%, transparent 50%);
		background-position:
			calc(100% - 1.35em) 1.35em,
			calc(100% - 1em) 1.35em;
		background-size: .35em .35em, .35em .35em;
		background-repeat: no-repeat;
		padding-inline-end: 3em;
	}
	/* Grupo de opciones */
	& .options {
		display: grid;
		gap: var(--flow-tight);

		& label {
			display: grid;
			grid-template-columns: auto 1fr;
			gap: .75em;
			align-items: center;
			font-size: var(--sca-t);
			font-weight: var(--fon-w5);
			color: inherit;
			cursor: pointer;
			margin: 0;
		}
		& input {
			inline-size: 1.25em;
			block-size: 1.25em;
			accent-color: var(--accent-fill);
		}
	}
	& .help {
		display: block;
		font-size: calc(var(--sca-t) * .8);
		color: var(--text-muted);
		margin-block-start: var(--flow-tight);
		font-weight: var(--fon-w5);
	}
	& label .req {
		color: var(--critical);
		margin-inline-start: .2em;
	}
}

/* Botón trabajando: el texto se reemplaza por un spinner y no se puede clickear dos veces */
.bt[aria-busy="true"] {
	pointer-events: none;
	position: relative;
	color: transparent;

	&::after {
		content: '';
		position: absolute;
		inset-block-start: 50%;
		inset-inline-start: 50%;
		margin: -.6em 0 0 -.6em;
		inline-size: 1.2em;
		block-size: 1.2em;
		border: 2px solid currentColor;
		border-block-end-color: transparent;
		border-radius: var(--rad-bt);
		color: var(--on-accent-fill);
		animation: spin .8s linear infinite;
	}
}


/**** 26. Texto largo (legales, notas) ****/

.prose {
	max-inline-size: 40rem;

	& :is(h2, h3) {
		scroll-margin-block-start: calc(var(--header-h) + var(--space-5));
	}
	& :is(ul, ol) {
		padding-inline-start: 1.25em;

		& li {
			margin-block-end: var(--flow-tight);
			padding: 0;
		}
		& li::marker {
			color: var(--text-muted);
		}
	}
	& blockquote {
		border-inline-start: 3px solid var(--accent);
		padding-inline-start: var(--space-4);
		margin-block: var(--space-5);
		color: var(--text-muted);
	}
	& > :last-child {
		margin-block-end: 0;
	}
}
/* Índice de la página, para textos largos */
.toc {
	padding: var(--space-4) var(--space-5);
	border: 1px solid var(--border);
	border-radius: var(--rad-m);
	margin-block-end: var(--space-6);

	& > p {
		font-size: var(--sca-h6);
		font-weight: var(--fon-w9);
		color: var(--accent);
		margin-block-end: var(--flow-tight);
	}
	& ol {
		padding: 0;
		margin: 0;
		counter-reset: toc;
	}
	& li {
		list-style: none;
		margin-block-end: var(--flow-tight);
		padding-inline-start: 1.5em;
		position: relative;

		&::before {
			counter-increment: toc;
			content: counter(toc) '.';
			position: absolute;
			inset-inline-start: 0;
			color: var(--text-muted);
			font-variant-numeric: tabular-nums;
		}
		&:last-child { margin-block-end: 0; }
	}
	& a { text-decoration: underline; text-underline-offset: .2em; }
}


/**** 27. Mapa (MapLibre GL + OpenFreeMap) ****/

/* Sin .page a propósito: el mapa va de borde a borde. El alto es
   explícito porque MapLibre necesita que su contenedor ya tenga
   tamaño -- no lo calcula a partir de contenido, como una imagen. */
.map {
	display: block;
	block-size: 60vh;
	max-block-size: 40rem;
	background: var(--surface-inverse); /* color de fondo mientras carga */
}
.maplibregl-ctrl-attrib {
	font-family: var(--fon-t);
	font-size: calc(var(--sca-t) * .7);
}


/**** 28. Footer de varias columnas ****/

.footer .row {
	gap: var(--space-6) var(--space-5);
	margin-block-end: var(--space-6);
	align-items: start;
}
.footer nav ul {
	display: grid;
	gap: var(--flow-tight);
	padding: 0;

	& a { text-decoration: none; }
	& a:hover { text-decoration: underline; }
}
.footer :is(h2, h3, h4, p.title) {
	font-size: var(--sca-h6);
	font-weight: var(--fon-w9);
	color: var(--accent);
	margin-block-end: var(--flow);
}
.footer .legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--flow);
	padding-block-start: var(--space-4);
	border-block-start: 1px solid var(--border-soft);
}


/**** 29. Impresión ****/

@media print {
	:root {
		--text: #000;
		--text-muted: #444;
		--surface: #fff;
		--surface-alt: #fff;
		--accent: #000;
		--border: #999;
	}
	.header,
	.footer nav,
	.announce,
	.slider-prev,
	.slider-next,
	.slider-nav,
	.bt-fixed,
	.bt-menu,
	.form,
	.main > .bt-text:last-child {
		display: none !important;
	}
	body {
		font-size: 11pt;
		background: #fff;
		color: #000;
	}
	.section {
		padding-block: 1rem !important;
		break-inside: avoid;
	}
	:is(.section, .card, .frame).bg > :is(img, picture) {
		display: none;
	}
	.section.bg {
		color: #000;
		background: none;

		& :is(h1, h2, h3, h4, h5, h6) { color: #000; }
	}
	.slider {
		display: block;
		overflow: visible;
	}
	/* Los links del contenido muestran su destino */
	.main :is(p, li) a[href^="http"]::after {
		content: ' (' attr(href) ')';
		font-size: .85em;
		color: #555;
		word-break: break-all;
	}
	details {
		break-inside: avoid;

		&::details-content { block-size: auto; opacity: 1; }
	}
	:is(h1, h2, h3) { break-after: avoid; }
	img { max-block-size: 8cm; }
}