/* ==========================================================================
   Labalquimi, S.A. — sistema visual
   Extraído del prototipo aprobado. Tipografía única Barlow, radios suaves,
   sombras mínimas y rejillas fluidas. Breakpoint de navegación: 1080px.
   ========================================================================== */

:root {
	/* Color */
	--fondo:            #FFFFFF;
	--fondo-alterno:    #F8F8F6;
	--fondo-suave:      #F4F4F2;
	--tinta:            #14110F;
	--texto:            #56504A;
	--texto-medio:      #3A342F;
	--texto-tenue:      #8A8880;
	--texto-suave:      #6B6B66;
	--borde:            #E8E8E6;
	--borde-fuerte:     #E0DFDB;
	--amarillo:         #FBCA35;
	--rojo:             #C0201A;
	--whatsapp:         #25D366;
	--whatsapp-oscuro:  #08331A;
	--pie-fondo:        #14110F;
	--pie-texto:        #A39B90;
	--pie-titulo:       #6E675E;
	--pie-claro:        #F7F2EA;

	/* Radios */
	--radio-sm:  9px;
	--radio-md:  12px;
	--radio-lg:  18px;
	--radio-xl:  24px;
	--radio-pill: 999px;

	/* Sombras */
	--sombra-menu: 0 18px 40px rgba(20, 17, 15, 0.11);
	--sombra-flotante: 0 12px 30px rgba(20, 17, 15, 0.26);

	/* Medidas */
	--ancho-max: 1280px;
	--espacio-lateral: clamp(16px, 3vw, 32px);
	--alto-cabecera: 68px;
}

/* ─── Base ─────────────────────────────────────────────────────────────── */

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

html { scroll-behavior: smooth; }

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

body {
	margin: 0;
	background: var(--fondo);
	color: var(--tinta);
	font-family: 'Barlow', system-ui, -apple-system, sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	margin: 0;
	font-weight: 300;
	letter-spacing: -0.01em;
	line-height: 1.15;
	text-wrap: balance;
}

h1 { font-size: clamp(32px, 5vw, 54px); font-weight: 200; }
h2 { font-size: clamp(24px, 3.2vw, 36px); }
h3 { font-size: clamp(19px, 2vw, 23px); font-weight: 400; }

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--rojo); text-decoration: none; }
a:hover { color: var(--tinta); }

ul { margin: 0; padding: 0; list-style: none; }

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

input, select, textarea, button { font-family: inherit; font-size: inherit; }

address { font-style: normal; }

/* Foco visible en todo lo enfocable: requisito de accesibilidad */
:focus-visible {
	outline: 3px solid var(--rojo);
	outline-offset: 2px;
	border-radius: 4px;
}

.visually-hidden {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: var(--espacio-lateral);
	z-index: 200;
	padding: 12px 20px;
	border-radius: 0 0 var(--radio-md) var(--radio-md);
	background: var(--tinta);
	color: var(--amarillo);
	font-weight: 500;
}
.skip-link:focus { top: 0; color: var(--amarillo); }

/* ─── Contenedores y utilidades ────────────────────────────────────────── */

.contenedor {
	max-width: var(--ancho-max);
	margin: 0 auto;
	padding-inline: var(--espacio-lateral);
}

.seccion { padding-block: clamp(44px, 7vw, 88px); }
.seccion--alterna { background: var(--fondo-alterno); }

.kicker {
	display: block;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--texto-tenue);
}

.entradilla {
	font-size: clamp(16px, 1.6vw, 18.5px);
	font-weight: 300;
	line-height: 1.65;
	color: var(--texto);
	max-width: 62ch;
}

.rejilla {
	display: grid;
	gap: clamp(18px, 2.4vw, 28px);
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

/* ─── Botones ──────────────────────────────────────────────────────────── */

.boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 13px 22px;
	border: 1px solid transparent;
	border-radius: var(--radio-pill);
	font-size: 14.5px;
	font-weight: 500;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.boton--oscuro { background: var(--tinta); color: var(--amarillo); }
.boton--oscuro:hover { background: var(--rojo); color: #FFF6E8; }

.boton--rojo { background: var(--rojo); color: #FFF6E8; }
.boton--rojo:hover { background: var(--tinta); color: var(--amarillo); }

.boton--linea {
	border-color: var(--borde-fuerte);
	background: var(--fondo);
	color: var(--tinta);
}
.boton--linea:hover { border-color: var(--tinta); color: var(--tinta); }

.boton--whatsapp { background: var(--whatsapp); color: var(--whatsapp-oscuro); }
.boton--whatsapp:hover { background: var(--whatsapp-oscuro); color: #FFFFFF; }

/* ─── Barra superior ───────────────────────────────────────────────────── */

.barra-superior {
	background: var(--tinta);
	color: #E8E2D8;
	font-size: 12.5px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.barra-superior-interior {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px 22px;
	max-width: var(--ancho-max);
	margin: 0 auto;
	padding: 9px var(--espacio-lateral);
	text-align: center;
}

.barra-destacada { color: var(--amarillo); }
.barra-separador { opacity: 0.35; }

/* ─── Cabecera ─────────────────────────────────────────────────────────── */

.cabecera {
	position: sticky;
	top: 0;
	z-index: 90;
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--borde);
}

.cabecera-interior {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	max-width: var(--ancho-max);
	margin: 0 auto;
	padding: 13px var(--espacio-lateral);
}

.marca {
	display: flex;
	align-items: center;
	gap: 11px;
	flex-shrink: 0;
	color: var(--tinta);
}
.marca:hover { color: var(--tinta); }

.marca-logo { width: 44px; height: 44px; object-fit: contain; }

.marca-texto { display: flex; flex-direction: column; line-height: 1.15; }

.marca-nombre {
	font-size: 17px;
	font-weight: 500;
	letter-spacing: 0.01em;
	color: var(--tinta);
}

.marca-bajada {
	font-size: 10.5px;
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--texto-tenue);
}

.cabecera-acciones {
	display: flex;
	align-items: center;
	gap: 9px;
	flex-shrink: 0;
}

.hamburguesa {
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 44px;
	height: 44px;
	border: 1px solid var(--borde-fuerte);
	border-radius: 10px;
	background: var(--fondo);
	cursor: pointer;
}

.hamburguesa-linea {
	width: 18px;
	height: 1.5px;
	background: var(--tinta);
	transition: transform 0.2s ease, opacity 0.2s ease;
}

/* ─── Menú de escritorio ───────────────────────────────────────────────── */

.nav { font-size: 15px; }

.menu { display: flex; align-items: center; gap: 4px; }

.menu-item { position: relative; }

.menu-enlace {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 13px;
	border-radius: 8px;
	color: var(--tinta);
	font-weight: 400;
}
.menu-enlace:hover { background: var(--fondo-suave); color: var(--tinta); }

.menu-item--activo > .menu-enlace,
.menu-item--en-rama > .menu-enlace { color: var(--rojo); }

/* El botón que abre el submenú */
.menu-toggle {
	position: absolute;
	top: 50%;
	right: 2px;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.menu-flecha { transition: transform 0.2s ease; }

@media (min-width: 1081px) {
	.menu-flecha {
		width: 0;
		height: 0;
		border-left: 4px solid transparent;
		border-right: 4px solid transparent;
		border-top: 5px solid #A5A29A;
	}
	/* En los submenús la flecha apunta a la derecha, hacia el nivel siguiente */
	.menu-sub .menu-flecha {
		border-top: 4px solid transparent;
		border-bottom: 4px solid transparent;
		border-left: 5px solid #A5A29A;
		border-right: 0;
	}
}

.menu-item--con-hijas > .menu-enlace { padding-right: 26px; }

/* Submenús */
.menu-sub {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 268px;
	padding: 8px;
	background: var(--fondo);
	border: 1px solid var(--borde);
	border-radius: 14px;
	box-shadow: var(--sombra-menu);
}

.menu-sub .menu-sub {
	top: -8px;
	left: 100%;
	min-width: 250px;
}

@media (min-width: 1081px) {
	.menu-item--con-hijas:hover > .menu-sub,
	.menu-item--con-hijas:focus-within > .menu-sub,
	.menu-item--abierto > .menu-sub { display: block; }
}

.menu-sub .menu-enlace {
	justify-content: space-between;
	padding: 10px 12px;
	border-radius: var(--radio-sm);
	font-size: 14.5px;
}

.menu-item--indice > .menu-enlace { color: var(--texto-suave); }

/* ─── Menú móvil ───────────────────────────────────────────────────────── */

@media (max-width: 1080px) {

	.cabecera-cta { display: none; }
	.hamburguesa { display: flex; }

	.nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		max-height: 76vh;
		overflow-y: auto;
		padding: 8px var(--espacio-lateral) 20px;
		background: var(--fondo);
		border-top: 1px solid var(--borde);
		box-shadow: var(--sombra-menu);
	}

	.nav.esta-abierto { display: block; }

	.menu { flex-direction: column; align-items: stretch; gap: 0; }

	/* El enlace y el botón forman una fila; el submenú salta a la línea de
	   abajo. Así el botón queda a la altura de su propio enlace y no en el
	   centro vertical del bloque cuando el acordeón está abierto. */
	.menu-item {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		border-bottom: 1px solid #EFEFEC;
	}
	.menu-sub .menu-item:last-child { border-bottom: 0; }

	.menu-enlace {
		flex: 1 1 auto;
		padding: 15px 4px;
		border-radius: 0;
		font-size: 16.5px;
	}
	.menu-enlace:hover { background: none; }

	.menu-item--con-hijas > .menu-enlace { padding-right: 8px; }

	.menu-toggle {
		position: static;
		transform: none;
		flex: 0 0 auto;
		width: 44px;
		height: 44px;
	}

	.menu-flecha {
		border: 0;
		width: 13px;
		height: 13px;
		position: relative;
	}
	.menu-flecha::before,
	.menu-flecha::after {
		content: '';
		position: absolute;
		background: #A5A29A;
	}
	.menu-flecha::before { inset: 6px 0 auto 0; height: 1.5px; }
	.menu-flecha::after  { inset: 0 6px 0 auto; width: 1.5px; transition: opacity 0.2s ease; }

	.menu-toggle[aria-expanded='true'] .menu-flecha::after { opacity: 0; }

	.menu-sub {
		display: none;
		position: static;
		flex-basis: 100%;
		min-width: 0;
		padding: 0 0 12px 12px;
		margin-left: 4px;
		border: 0;
		border-left: 1px solid #EFEFEC;
		border-radius: 0;
		box-shadow: none;
	}

	/* En móvil el submenú solo se abre al pulsar, nunca al pasar el ratón:
	   las reglas de hover y foco están limitadas a escritorio. */
	.menu-item--abierto > .menu-sub { display: block; }

	.menu-sub .menu-enlace { padding: 12px 4px; font-size: 15px; color: var(--texto-medio); }
	.menu-sub .menu-sub .menu-enlace { font-size: 14.5px; color: var(--texto-suave); }
}

/* ─── Migas de pan ─────────────────────────────────────────────────────── */

.migas {
	max-width: var(--ancho-max);
	margin: 0 auto;
	padding: 18px var(--espacio-lateral) 0;
}

.migas-lista {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--texto-tenue);
}

.migas-lista li { display: flex; align-items: center; gap: 8px; }

.migas-lista li + li::before {
	content: '/';
	color: var(--borde-fuerte);
}

.migas-lista a { color: var(--texto-tenue); }
.migas-lista a:hover { color: var(--tinta); }
.migas-lista [aria-current='page'] { color: var(--tinta); }

/* ─── Contenido enriquecido (campo body) ───────────────────────────────── */

.contenido-rico { font-weight: 300; line-height: 1.7; color: var(--texto); }
.contenido-rico h2 { margin: 1.6em 0 0.5em; color: var(--tinta); }
.contenido-rico h3 { margin: 1.4em 0 0.4em; color: var(--tinta); }
.contenido-rico h2:first-child, .contenido-rico h3:first-child { margin-top: 0; }
.contenido-rico strong { font-weight: 500; color: var(--tinta); }
.contenido-rico ul, .contenido-rico ol { margin: 0 0 1em; padding-left: 1.3em; }
.contenido-rico ul { list-style: disc; }
.contenido-rico ol { list-style: decimal; }
.contenido-rico li { margin-bottom: 0.4em; }
.contenido-rico img { border-radius: var(--radio-md); }

/* Video incrustado por TextformatterVideoEmbed */
.contenido-rico .video-embed,
.contenido-rico iframe[src*='youtube'],
.contenido-rico iframe[src*='vimeo'] {
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
	border-radius: var(--radio-md);
}

/* ─── Listas de viñetas ────────────────────────────────────────────────── */

.lista-items { display: flex; flex-direction: column; gap: 9px; }

.lista-items li {
	position: relative;
	padding-left: 18px;
	font-size: 15px;
	font-weight: 300;
	color: var(--texto);
}

.lista-items li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 6px;
	height: 6px;
	background: var(--amarillo);
	border-radius: 2px;
}

/* ─── Pie de página ────────────────────────────────────────────────────── */

.pie {
	padding: 44px var(--espacio-lateral) 28px;
	background: var(--pie-fondo);
	color: var(--pie-texto);
}

.pie a { color: var(--pie-texto); }
.pie a:hover { color: var(--pie-claro); }

.pie-interior {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
	gap: 32px;
	max-width: var(--ancho-max);
	margin: 0 auto;
	padding-bottom: 28px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.pie-marca { display: flex; gap: 16px; align-items: start; }
.pie-marca img { width: 50px; height: 50px; object-fit: contain; }

.pie-nombre {
	display: block;
	margin-bottom: 8px;
	font-size: 16px;
	font-weight: 500;
	color: var(--pie-claro);
}

.pie-descripcion {
	max-width: 320px;
	font-size: 13.5px;
	font-weight: 300;
	line-height: 1.55;
}

.pie-columna {
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 14px;
}

.pie-titulo {
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pie-titulo);
}

.pie-etiqueta {
	display: block;
	font-size: 11.5px;
	color: var(--pie-titulo);
}

.pie-redes {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 2px;
}

.red-enlace {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 50%;
	color: var(--pie-texto);
	transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.red-enlace:hover,
.red-enlace:focus-visible {
	background: var(--amarillo);
	border-color: var(--amarillo);
	color: var(--tinta);
}

/* Red sin ícono dibujado: se muestra el nombre, así que deja de ser un círculo */
.red-enlace--texto {
	width: auto;
	height: auto;
	padding: 7px 14px;
	border-radius: 999px;
	font-size: 13px;
}

.pie-direccion {
	font-size: 13.5px;
	font-weight: 300;
	line-height: 1.55;
}

.pie-legal {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
	max-width: var(--ancho-max);
	margin: 0 auto;
	padding-top: 18px;
	font-size: 12.5px;
}

.pie-ley { letter-spacing: 0.05em; }

/* ─── Botón flotante de WhatsApp ───────────────────────────────────────── */

@keyframes waPulso {
	0%, 100% { transform: translateY(0) scale(1); }
	50%      { transform: translateY(-3px) scale(1.05); }
}

@keyframes waAnillo {
	0%   { transform: scale(0.9); opacity: 0.5; }
	100% { transform: scale(1.7); opacity: 0; }
}

.wa-flotante {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 95;
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 13px 20px 13px 14px;
	border-radius: var(--radio-pill);
	background: var(--whatsapp);
	color: var(--whatsapp-oscuro);
	font-size: 14.5px;
	font-weight: 500;
	box-shadow: var(--sombra-flotante);
	animation: waPulso 2.6s ease-in-out infinite;
}

.wa-flotante:hover { color: var(--whatsapp-oscuro); }

.wa-icono {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: var(--radio-pill);
	background: #FFFFFF;
	color: #128C4A;
}

.wa-anillo {
	position: absolute;
	inset: 0;
	border-radius: var(--radio-pill);
	border: 2px solid rgba(255, 255, 255, 0.85);
	animation: waAnillo 2.6s ease-out infinite;
}

@media (max-width: 560px) {
	.wa-flotante { padding: 13px; }
	.wa-texto { display: none; }
}

/* ==========================================================================
   Portada
   ========================================================================== */

/* ─── Banner ───────────────────────────────────────────────────────────── */

.hero {
	position: relative;
	overflow: hidden;
	background: var(--tinta);
	color: #FFFFFF;
}

.hero-fondo { position: absolute; inset: 0; }

.hero-fondo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Degradado de derecha a izquierda sobre la foto, para que el texto se lea */
.hero-fondo::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(20,17,15,0.94) 0%, rgba(20,17,15,0.86) 42%, rgba(20,17,15,0.35) 100%);
}

.hero-interior {
	position: relative;
	padding-block: clamp(56px, 9vw, 116px);
}

.hero-texto { max-width: 44rem; }

.hero-kicker {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--amarillo);
}

.hero-punto {
	width: 7px;
	height: 7px;
	border-radius: var(--radio-pill);
	background: var(--amarillo);
}

.hero-titulo {
	margin: 16px 0 0;
	color: #FFFFFF;
	font-size: clamp(36px, 6vw, 62px);
	font-weight: 200;
}

.hero-intro {
	max-width: 40rem;
	margin: 18px 0 0;
	font-size: clamp(15.5px, 1.7vw, 18px);
	font-weight: 300;
	line-height: 1.65;
	color: #D6CFC5;
}

.hero-acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 11px;
	margin-top: 26px;
}

.hero-metricas {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 40px;
	margin: 34px 0 0;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.hero-metrica { display: flex; flex-direction: column; gap: 3px; }

.hero-metrica-valor {
	font-size: clamp(20px, 2.4vw, 26px);
	font-weight: 300;
	color: var(--amarillo);
}

.hero-metrica-etiqueta {
	margin: 0;
	font-size: 12.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #A39B90;
}

/* ─── Encabezado de sección ────────────────────────────────────────────── */

/* ─── Cabecera de página interior ──────────────────────────────────────── */

.pagina-cabecera {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 62rem;
}

.pagina-imagen {
	margin: clamp(26px, 3.5vw, 44px) 0 0;
	overflow: hidden;
	border-radius: var(--radio-lg);
}

.pagina-imagen img { display: block; width: 100%; }

/* Medida de lectura cómoda para el cuerpo de texto largo */
.prosa {
	max-width: 68ch;
	margin-top: clamp(26px, 3.5vw, 44px);
}

.seccion-encabezado { margin-bottom: clamp(26px, 3.5vw, 44px); }
.seccion-encabezado h2 { margin-top: 8px; }

.seccion-encabezado--partido {
	display: flex;
	align-items: end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
}

.seccion-encabezado--partido .entradilla { max-width: 34rem; }

.enlace-flecha {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--rojo);
	white-space: nowrap;
}
.enlace-flecha:hover { color: var(--tinta); }

/* ─── Atajos ───────────────────────────────────────────────────────────── */

.rejilla--atajos { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }

.atajo {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 20px 22px;
	border: 1px solid var(--borde);
	border-radius: var(--radio-lg);
	background: var(--fondo);
	color: var(--tinta);
	transition: border-color 0.18s ease, transform 0.18s ease;
}
.atajo:hover { border-color: var(--tinta); color: var(--tinta); transform: translateY(-2px); }

.atajo-titulo { font-size: 16.5px; font-weight: 500; }
.atajo-detalle { font-size: 13.5px; font-weight: 300; color: var(--texto-suave); }
.atajo-flecha { margin-top: 6px; color: var(--rojo); }

/* ─── Acreditaciones ───────────────────────────────────────────────────── */

.acreditacion {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding-left: 16px;
	border-left: 2px solid var(--amarillo);
}

.acreditacion-titulo { font-size: 16px; font-weight: 500; }
.acreditacion-texto { font-size: 14px; font-weight: 300; line-height: 1.55; color: var(--texto); }

/* ─── Tarjetas de servicio ─────────────────────────────────────────────── */

.rejilla--servicios { grid-template-columns: repeat(auto-fit, minmax(min(272px, 100%), 1fr)); }

.tarjeta-servicio {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 22px;
	border: 1px solid var(--borde);
	border-radius: var(--radio-xl);
	background: var(--fondo);
}

.tarjeta-servicio-cabecera {
	display: flex;
	align-items: start;
	justify-content: space-between;
	gap: 10px;
}

.etiqueta {
	flex-shrink: 0;
	padding: 4px 10px;
	border-radius: var(--radio-pill);
	background: var(--amarillo);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--tinta);
}

.tarjeta-servicio-foto {
	overflow: hidden;
	border-radius: var(--radio-md);
	background: var(--fondo-alterno);
}

.tarjeta-servicio-foto img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.tarjeta-servicio-texto {
	font-size: 14.5px;
	font-weight: 300;
	line-height: 1.6;
	color: var(--texto);
}

.lista-items--compacta li { font-size: 14px; }

.tarjeta-servicio-pie {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid var(--borde);
}

.tarjeta-servicio-nota { font-size: 12.5px; color: var(--texto-tenue); }

/* ─── Bloque partido: texto a un lado, imagen al otro ──────────────────── */

.bloque-partido {
	display: grid;
	align-items: center;
	gap: clamp(24px, 4vw, 56px);
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}

/* La imagen va primero en el código; en pantallas anchas se manda a la
   izquierda para alternar el ritmo entre secciones. */
.bloque-partido--invertido .bloque-partido-figura { order: -1; }

.bloque-partido--estrecho { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); align-items: start; }

.bloque-partido-texto { display: flex; flex-direction: column; align-items: start; gap: 16px; }
.bloque-partido-texto h2 { margin: 0; }
.bloque-partido-texto .entradilla { margin: 0; }

.bloque-partido-figura { margin: 0; }

.bloque-partido-figura img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radio-xl);
}

.bloque-partido-figura figcaption {
	margin-top: 10px;
	font-size: 12.5px;
	font-weight: 300;
	color: var(--texto-tenue);
}

.lista-items--destacada li { font-size: 15.5px; }

/* ─── Pasos ────────────────────────────────────────────────────────────── */

.rejilla--pasos { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }

.paso {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-top: 16px;
	border-top: 2px solid var(--tinta);
}

.paso-numero { font-size: 13px; font-weight: 500; color: var(--rojo); }
.paso-titulo { font-size: 17px; font-weight: 400; }
.paso-texto { font-size: 14px; font-weight: 300; line-height: 1.6; color: var(--texto); }

/* ─── Sectores ─────────────────────────────────────────────────────────── */

.rejilla--sectores { grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); }

.sector {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px 18px;
	border-radius: var(--radio-md);
	background: var(--fondo);
	border: 1px solid var(--borde);
}

.seccion--alterna .sector { background: var(--fondo); }

.sector-nombre { font-size: 15px; font-weight: 500; }
.sector-detalle { font-size: 13px; font-weight: 300; color: var(--texto-suave); }

/* ─── Calidad ──────────────────────────────────────────────────────────── */

.descargas { display: flex; flex-direction: column; gap: 8px; }

.descarga {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	border: 1px solid var(--borde-fuerte);
	border-radius: var(--radio-md);
	font-size: 14.5px;
	color: var(--tinta);
}
.descarga:hover { border-color: var(--tinta); color: var(--tinta); }

.descarga-tipo {
	padding: 2px 7px;
	border-radius: 5px;
	background: var(--rojo);
	color: #FFF6E8;
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.06em;
}

/* ─── Equipo del laboratorio ───────────────────────────────────────────── */

.rejilla--equipo { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }

.persona {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--fondo);
	border: 1px solid var(--borde);
	border-radius: var(--radio-md);
}

.seccion--alterna .persona { background: var(--fondo); }

.persona-retrato {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 3 / 4;
	background: var(--fondo-alterno);
}

.persona-retrato img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Sin foto: la inicial del nombre sostiene la tarjeta */
.persona-inicial {
	font-size: clamp(40px, 7vw, 64px);
	font-weight: 200;
	color: var(--texto-tenue);
}

.persona-datos {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 18px 20px 20px;
}

.persona-cargo {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--rojo);
}

.persona-nombre { font-size: 17px; font-weight: 400; color: var(--tinta); }

.persona-ficha { margin-top: 8px; }

.persona-ver {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 0;
	border-top: 1px solid var(--borde);
	font-size: 13.5px;
	font-weight: 500;
	color: var(--texto-suave);
	cursor: pointer;
	list-style: none;
}

.persona-ver::-webkit-details-marker { display: none; }
.persona-ficha[open] .persona-ver { color: var(--tinta); }

.persona-detalle {
	display: flex;
	flex-direction: column;
	align-items: start;
	gap: 10px;
	padding-bottom: 4px;
	font-size: 13.5px;
	font-weight: 300;
	line-height: 1.6;
	color: var(--texto);
}

.persona-idoneidad {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 9px 12px;
	background: var(--fondo-alterno);
	border-radius: 8px;
	font-size: 13px;
	color: var(--tinta);
}

.persona-idoneidad-rotulo {
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--texto-tenue);
}

/* ─── Página de descargas ──────────────────────────────────────────────── */

.rejilla--documentos { grid-template-columns: repeat(auto-fit, minmax(min(268px, 100%), 1fr)); }

.documento {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 22px;
	background: var(--fondo);
	border: 1px solid var(--borde);
	border-radius: var(--radio-md);
}

.documento-cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.documento-tipo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	padding: 4px 9px;
	background: var(--amarillo);
	border-radius: 6px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.08em;
	color: var(--tinta);
}

/* Fila sin archivo: es una entrada de consulta, no una descarga */
.documento-tipo--ref {
	background: transparent;
	border: 1px solid var(--borde);
	color: var(--texto-tenue);
}

.documento-nota {
	font-size: 12px;
	font-weight: 300;
	text-align: right;
	color: var(--texto-tenue);
}

.documento-titulo { font-size: 16.5px; font-weight: 500; color: var(--tinta); }

.documento-texto {
	font-size: 14px;
	font-weight: 300;
	line-height: 1.6;
	color: var(--texto);
}

/* Empuja la acción al fondo para que todas las tarjetas la alineen */
.documento-accion {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding-top: 6px;
	font-size: 14px;
	font-weight: 500;
	color: var(--rojo);
}

.documento-accion:hover { color: var(--tinta); }

.compromisos { display: flex; flex-direction: column; gap: 14px; }

.compromiso {
	display: flex;
	gap: 14px;
	padding: 16px 18px;
	border-radius: var(--radio-lg);
	background: var(--fondo);
	border: 1px solid var(--borde);
}

.compromiso-numero {
	flex-shrink: 0;
	font-size: 13px;
	font-weight: 500;
	color: var(--amarillo);
}

.compromiso-texto { font-size: 14px; font-weight: 300; line-height: 1.6; color: var(--texto); }

/* ─── Lista de insumos a dos columnas ──────────────────────────────────── */

.lista-items--dos-columnas {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
	gap: 9px 22px;
}

/* ─── Banda del catálogo ───────────────────────────────────────────────── */

.banda-catalogo { background: var(--tinta); color: #FFFFFF; }
.banda-catalogo h2 { color: #FFFFFF; margin-top: 8px; }
.banda-catalogo .kicker { color: var(--amarillo); }

.banda-catalogo-interior {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 24px;
}

.banda-catalogo-texto {
	max-width: 46rem;
	margin-top: 12px;
	font-size: 15px;
	font-weight: 300;
	line-height: 1.65;
	color: #D6CFC5;
}

.boton--amarillo { background: var(--amarillo); color: var(--tinta); }
.boton--amarillo:hover { background: #FFFFFF; color: var(--tinta); }

/* ─── Artículos ────────────────────────────────────────────────────────── */

.rejilla--articulos { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }

.tarjeta-articulo {
	border: 1px solid var(--borde);
	border-radius: var(--radio-xl);
	overflow: hidden;
	background: var(--fondo);
	transition: border-color 0.18s ease;
}
.tarjeta-articulo:hover { border-color: var(--tinta); }

.tarjeta-articulo a { display: block; color: var(--tinta); }

.tarjeta-articulo-foto { background: var(--fondo-alterno); }

.tarjeta-articulo-foto img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.tarjeta-articulo-meta {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 18px 20px 0;
	font-size: 11.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--texto-tenue);
}

.tarjeta-articulo-titulo {
	padding: 8px 20px 0;
	font-size: 19px;
	font-weight: 400;
	line-height: 1.3;
}

.tarjeta-articulo-texto {
	padding: 10px 20px 20px;
	font-size: 14px;
	font-weight: 300;
	line-height: 1.6;
	color: var(--texto);
}

/* ─── Galería ──────────────────────────────────────────────────────────── */

.rejilla--galeria { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }

.galeria-item { margin: 0; }

.galeria-item img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radio-lg);
}

.galeria-item figcaption {
	margin-top: 9px;
	font-size: 13px;
	font-weight: 300;
	color: var(--texto-suave);
}

/* ─── Acordeón de preguntas ────────────────────────────────────────────── */

.acordeon { display: flex; flex-direction: column; }

.acordeon-item { border-bottom: 1px solid var(--borde); }

.acordeon-pregunta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 17px 2px;
	font-size: 16px;
	font-weight: 400;
	color: var(--tinta);
	cursor: pointer;
	list-style: none;
}

.acordeon-pregunta::-webkit-details-marker { display: none; }

.acordeon-signo {
	position: relative;
	flex-shrink: 0;
	width: 13px;
	height: 13px;
}
.acordeon-signo::before,
.acordeon-signo::after {
	content: '';
	position: absolute;
	background: var(--texto-tenue);
}
.acordeon-signo::before { inset: 6px 0 auto 0; height: 1.5px; }
.acordeon-signo::after  { inset: 0 6px 0 auto; width: 1.5px; transition: opacity 0.2s ease; }

/* El signo pasa de + a − al abrir, tanto en el acordeón de preguntas
   frecuentes como en las fichas del equipo. */
.acordeon-item[open] .acordeon-signo::after,
.persona-ficha[open] .acordeon-signo::after { opacity: 0; }

.acordeon-respuesta {
	padding: 0 2px 18px;
	font-size: 14.5px;
	font-weight: 300;
	line-height: 1.65;
	color: var(--texto);
}

/* ─── Mapa ─────────────────────────────────────────────────────────────── */

.mapa {
	overflow: hidden;
	border: 1px solid var(--borde);
	border-radius: var(--radio-xl);
}

.mapa iframe {
	display: block;
	width: 100%;
	height: clamp(300px, 34vw, 440px);
	border: 0;
}