@charset "utf-8";

/* =====================================================================
   VOCES PTM 2027 · hoja de estilos unica
   ---------------------------------------------------------------------
   Direccion: «sala de control». Carbon profundo, luz naranja de señal,
   salas claras de descanso. Sin frameworks, sin utilidades genericas.

   00 fuentes      04 disposicion
   01 reinicio     05 componentes
   02 tokens       06 secciones del home
   03 base         07 utilidades y movimiento
   ===================================================================== */

@layer reinicio, tokens, base, disposicion, componentes, secciones, utilidades;

/* ------------------------------------------------------------------ */
/* 00 · FUENTES — variables, self-hosted, solo latin y latin-ext        */
/* ------------------------------------------------------------------ */

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

@font-face {
	font-family: "Montserrat Variable";
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url("../fonts/montserrat-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

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

@font-face {
	font-family: "Inter Variable";
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url("../fonts/inter-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------------ */
/* 01 · REINICIO                                                        */
/* ------------------------------------------------------------------ */

@layer reinicio {

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

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

	body,
	h1, h2, h3, h4, p,
	figure, blockquote, dl, dd {
		margin: 0;
	}

	ul[class],
	ol[class] {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	img,
	picture,
	video,
	svg {
		display: block;
		max-width: 100%;
	}

	img {
		height: auto;
	}

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

	button {
		background: none;
		border: 0;
		cursor: pointer;
	}

	:target {
		scroll-margin-top: 6rem;
	}
}

/* ------------------------------------------------------------------ */
/* 02 · TOKENS                                                          */
/* ------------------------------------------------------------------ */

@layer tokens {

	:root {
		/* Naranja corporativo, muestreado del logotipo real. */
		--naranja:        #ff8a00;
		--naranja-luz:    #ffaf07;
		--naranja-hondo:  #f2600a;
		--brasa:          #fc5a08;
		--naranja-tinta:  #a84500;  /* legible sobre fondo claro */

		/* Carbon: negro ligeramente azulado. */
		--carbon-950: #08090c;
		--carbon-900: #0c0e12;
		--carbon-850: #101319;
		--carbon-800: #151922;
		--carbon-700: #1d222c;

		/* Salas claras. */
		--hueso:      #fbf8f4;
		--hueso-2:    #f1ebe2;
		--tinta:      #14161a;

		/* Texto sobre oscuro (por defecto). */
		--texto:   #ffffff;
		--texto-2: #bdb9b4;
		--texto-3: #8c8880;

		--linea:        rgb(255 255 255 / 9%);
		--linea-fuerte: rgb(255 255 255 / 17%);
		--superficie:   rgb(255 255 255 / 4%);
		--acento:       var(--naranja);

		--verde-wa: #25d366;

		--fuente-titulo: "Montserrat Variable", Montserrat, "Segoe UI", system-ui, sans-serif;
		--fuente-texto:  "Inter Variable", Inter, "Segoe UI", system-ui, sans-serif;

		--r-sm: 10px;
		--r-md: 16px;
		--r-lg: 22px;
		--r-xl: 28px;

		--ancho: 1240px;
		--margen: clamp(20px, 5vw, 48px);
		--aire: clamp(4.5rem, 3rem + 5vw, 8rem);

		--sombra-alta: 0 40px 90px -45px rgb(0 0 0 / 90%);
		--sombra-media: 0 20px 45px -28px rgb(0 0 0 / 80%);
		--brillo-naranja: 0 14px 40px -16px rgb(255 138 0 / 55%);

		--transicion: 220ms cubic-bezier(.2, .7, .3, 1);

		color-scheme: dark;
	}
}

/* ------------------------------------------------------------------ */
/* 03 · BASE                                                            */
/* ------------------------------------------------------------------ */

@layer base {

	body {
		background: var(--carbon-900);
		color: var(--texto);
		font-family: var(--fuente-texto);
		font-size: 1.0625rem;
		font-weight: 400;
		line-height: 1.65;
		-webkit-font-smoothing: antialiased;
		overflow-x: hidden;
	}

	h1, h2, h3, h4 {
		font-family: var(--fuente-titulo);
		font-weight: 800;
		line-height: 1.08;
		letter-spacing: -0.022em;
		text-wrap: balance;
	}

	h1 { font-size: clamp(2.3rem, 1.4rem + 3.1vw, 3.75rem); letter-spacing: -0.03em; }
	h2 { font-size: clamp(1.85rem, 1.25rem + 2.1vw, 3.05rem); }
	h3 { font-size: clamp(1.15rem, 1.02rem + 0.5vw, 1.45rem); font-weight: 700; }

	p { text-wrap: pretty; }

	a {
		color: var(--acento);
		text-underline-offset: 3px;
	}

	/* El contorno ya sigue el radio del propio elemento: no se toca aqui,
	   o los botones de pildora se volverian cuadrados al recibir el foco. */
	:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
		outline: 3px solid var(--naranja-luz);
		outline-offset: 3px;
	}

	.sec--clara :where(a, button, input, textarea, summary):focus-visible {
		outline-color: var(--naranja-hondo);
	}

	::selection {
		background: var(--naranja);
		color: var(--carbon-950);
	}
}

/* ------------------------------------------------------------------ */
/* 04 · DISPOSICION                                                     */
/* ------------------------------------------------------------------ */

@layer disposicion {

	.contenedor {
		width: 100%;
		max-width: var(--ancho);
		margin-inline: auto;
		padding-inline: var(--margen);
	}

	.sec {
		position: relative;
		padding-block: var(--aire);
		isolation: isolate;
		/* Los resplandores y la banda de tecnologias se salen a proposito:
		   se recortan aqui para que nunca aparezca scroll horizontal. */
		overflow: hidden;
		overflow: clip;
	}

	.sec--oscura { background: var(--carbon-900); }
	.sec--carbon { background: var(--carbon-850); }

	.sec--honda {
		background:
			radial-gradient(120% 80% at 78% 12%, rgb(255 138 0 / 9%) 0%, transparent 58%),
			var(--carbon-950);
	}

	.sec--clara {
		--texto:   var(--tinta);
		--texto-2: #56514a;
		/* Oscurecido hasta 5.6:1 sobre blanco: con #837d74 el texto terciario
		   se quedaba en 3.9:1 y no pasaba AA. */
		--texto-3: #6b655b;
		--linea:        rgb(20 22 26 / 10%);
		--linea-fuerte: rgb(20 22 26 / 18%);
		--superficie:   rgb(255 255 255 / 70%);
		--acento:       var(--naranja-tinta);

		background:
			radial-gradient(90% 60% at 50% 0%, #fff 0%, transparent 60%),
			var(--hueso);
		color: var(--tinta);
	}

	/* Las paginas interiores necesitan el hueco de la cabecera fija. */
	body:not(.home) .sitio { padding-top: 5.5rem; }

	.sec-head { margin-bottom: clamp(2.25rem, 1.5rem + 2vw, 3.5rem); max-width: 46rem; }
	.sec-head--centro { margin-inline: auto; text-align: center; }
	.sec-head__title { margin-block: 0.65rem 0; }

	.sec-head__lead {
		margin-top: 1.05rem;
		color: var(--texto-2);
		font-size: clamp(1.02rem, 0.98rem + 0.2vw, 1.15rem);
		max-width: 42rem;
	}

	.sec-head--centro .sec-head__lead { margin-inline: auto; }
}

/* ------------------------------------------------------------------ */
/* 05 · COMPONENTES                                                     */
/* ------------------------------------------------------------------ */

@layer componentes {

	/* --- Antetitulo -------------------------------------------------- */

	.kicker {
		display: inline-flex;
		align-items: center;
		gap: 0.65rem;
		margin: 0;
		font-family: var(--fuente-titulo);
		font-size: 0.775rem;
		font-weight: 700;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: var(--acento);
	}

	.kicker__mark {
		width: 26px;
		height: 2px;
		border-radius: 2px;
		background: linear-gradient(90deg, var(--naranja-luz), var(--naranja-hondo));
	}

	.kicker--claro { color: var(--naranja-luz); }

	/* --- Botones ----------------------------------------------------- */

	.btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0.55rem;
		padding: 0.85rem 1.5rem;
		border: 1px solid transparent;
		border-radius: 999px;
		font-family: var(--fuente-titulo);
		font-size: 0.95rem;
		font-weight: 700;
		letter-spacing: -0.005em;
		line-height: 1.2;
		text-decoration: none;
		white-space: nowrap;
		transition: transform var(--transicion), box-shadow var(--transicion),
					background-color var(--transicion), border-color var(--transicion), color var(--transicion);
	}

	.btn:hover { transform: translateY(-2px); }
	.btn:active { transform: translateY(0); }
	.btn .vptm-icon { flex: none; }

	.btn--lg { padding: 1.05rem 1.85rem; font-size: 1.02rem; }
	.btn--sm { padding: 0.6rem 1.05rem; font-size: 0.875rem; }
	.btn--bloque { display: flex; width: 100%; }

	.btn--primario {
		background: linear-gradient(135deg, var(--naranja-luz) 0%, var(--naranja) 48%, var(--naranja-hondo) 100%);
		color: #14100a;
		box-shadow: var(--brillo-naranja);
	}

	.btn--primario:hover { box-shadow: 0 20px 50px -18px rgb(255 138 0 / 75%); }

	.btn--fantasma {
		border-color: var(--linea-fuerte);
		background: rgb(255 255 255 / 4%);
		color: var(--texto);
	}

	.btn--fantasma:hover {
		border-color: rgb(255 175 7 / 55%);
		background: rgb(255 138 0 / 10%);
	}

	.btn--contorno {
		border-color: var(--linea-fuerte);
		background: transparent;
		color: var(--texto);
	}

	.btn--contorno:hover { border-color: var(--acento); color: var(--acento); }

	.btn--wa {
		border-color: rgb(37 211 102 / 42%);
		background: rgb(37 211 102 / 12%);
		color: #96f0b8;
	}

	.btn--wa:hover { background: rgb(37 211 102 / 20%); border-color: rgb(37 211 102 / 70%); }

	.btn--wa.btn--lg {
		background: var(--verde-wa);
		border-color: var(--verde-wa);
		color: #06200f;
		box-shadow: 0 14px 40px -18px rgb(37 211 102 / 70%);
	}

	.btn--wa.btn--lg:hover { background: #33e074; }

	/* --- Enlace con flecha ------------------------------------------- */

	.enlace-flecha {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		font-family: var(--fuente-titulo);
		font-size: 0.92rem;
		font-weight: 700;
		color: var(--acento);
		text-decoration: none;
	}

	.enlace-flecha .vptm-icon { transition: transform var(--transicion); }
	.enlace-flecha:hover .vptm-icon { transform: translateX(4px); }
	.enlace-flecha:hover span { text-decoration: underline; }
	.enlace-flecha--fuerte { font-size: 1.02rem; }

	/* --- Chips ------------------------------------------------------- */

	.chip {
		display: inline-flex;
		align-items: center;
		gap: 0.45rem;
		padding: 0.42rem 0.85rem;
		border: 1px solid var(--linea-fuerte);
		border-radius: 999px;
		background: rgb(255 255 255 / 6%);
		backdrop-filter: blur(6px);
		font-family: var(--fuente-titulo);
		font-size: 0.72rem;
		font-weight: 700;
		letter-spacing: 0.11em;
		text-transform: uppercase;
		color: var(--texto);
	}

	.chip--vivo {
		border-color: rgb(255 138 0 / 45%);
		background: rgb(255 138 0 / 14%);
		color: var(--naranja-luz);
	}

	.chip__punto {
		width: 7px;
		height: 7px;
		border-radius: 50%;
		background: var(--naranja-luz);
		box-shadow: 0 0 0 0 rgb(255 175 7 / 60%);
		animation: latido 2.4s ease-out infinite;
	}

	/* --- Sellos ------------------------------------------------------ */

	.sello {
		display: inline-flex;
		align-items: center;
		gap: 0.4rem;
		margin: 0;
		padding: 0.35rem 0.72rem;
		border-radius: 999px;
		font-size: 0.75rem;
		font-weight: 600;
		line-height: 1.3;
		text-decoration: none;
	}

	.sello--play {
		border: 1px solid rgb(255 175 7 / 40%);
		background: rgb(255 138 0 / 12%);
		color: var(--naranja-luz);
	}

	.sello--play:hover { background: rgb(255 138 0 / 20%); }

	.sello--neutro {
		border: 1px solid var(--linea);
		background: rgb(255 255 255 / 3%);
		color: var(--texto-3);
	}

	/* --- Cabecera ---------------------------------------------------- */

	.salto-contenido {
		position: absolute;
		left: -9999px;
		z-index: 100;
		padding: 0.85rem 1.25rem;
		background: var(--naranja);
		color: var(--carbon-950);
		font-weight: 700;
		text-decoration: none;
	}

	.salto-contenido:focus { left: 1rem; top: 1rem; }

	.cab {
		position: fixed;
		inset-inline: 0;
		top: 0;
		z-index: 50;
		transition: background-color var(--transicion), border-color var(--transicion), backdrop-filter var(--transicion);
		border-bottom: 1px solid transparent;
	}

	/* Velo permanente bajo la cabecera. Es CSS puro a proposito: si el
	   script no llega a ejecutarse, o la pagina se abre ya desplazada por
	   un enlace con ancla, el menu sigue siendo legible igualmente. */
	.cab::before {
		content: "";
		position: absolute;
		inset: 0 0 auto;
		height: 190%;
		background: linear-gradient(180deg, rgb(8 9 12 / 78%) 0%, rgb(8 9 12 / 42%) 46%, rgb(8 9 12 / 0%) 100%);
		pointer-events: none;
		transition: opacity var(--transicion);
	}

	.cab__inner,
	.cab__toggle { position: relative; }

	.cab.esta-fijada {
		background: rgb(10 12 16 / 90%);
		backdrop-filter: blur(14px) saturate(140%);
		border-bottom-color: var(--linea);
	}

	.cab.esta-fijada::before,
	.cab.esta-abierta::before { opacity: 0; }

	.cab__inner {
		display: flex;
		align-items: center;
		gap: clamp(1.25rem, 3vw, 2.75rem);
		max-width: var(--ancho);
		margin-inline: auto;
		padding: 0.95rem var(--margen);
	}

	/* El logotipo se dimensiona SOLO por altura y con el ancho automático.
	   Nada de alturas fijas en el contenedor, overflow ni object-fit: cover:
	   el archivo manda su proporción y aquí solo se decide cuánto ocupa. */
	.cab__marca {
		flex: none;
		display: flex;
		align-items: center;
	}

	.cab__marca img {
		display: block;
		height: 48px;
		width: auto;
		max-width: 100%;
		object-fit: contain;
	}

	.cab__nav {
		display: flex;
		flex: 1;
		align-items: center;
		justify-content: space-between;
		gap: 1.5rem;
	}

	.cab__lista {
		display: flex;
		align-items: center;
		gap: clamp(0.65rem, 1.4vw, 1.6rem);
	}

	.cab__lista a {
		position: relative;
		padding-block: 0.4rem;
		font-family: var(--fuente-titulo);
		font-size: 0.9rem;
		font-weight: 600;
		color: var(--texto-2);
		text-decoration: none;
		transition: color var(--transicion);
	}

	.cab__lista a::after {
		content: "";
		position: absolute;
		inset-inline: 0;
		bottom: 0;
		height: 2px;
		border-radius: 2px;
		background: linear-gradient(90deg, var(--naranja-luz), var(--naranja-hondo));
		transform: scaleX(0);
		transform-origin: left;
		transition: transform var(--transicion);
	}

	.cab__lista a:hover { color: var(--texto); }
	.cab__lista a:hover::after { transform: scaleX(1); }

	.cab__acciones { display: flex; align-items: center; gap: 0.6rem; }

	.cab__toggle {
		display: none;
		padding: 0.5rem;
		color: var(--texto);
		border-radius: 10px;
		border: 1px solid var(--linea-fuerte);
	}

	.cab__toggle-cerrar { display: none; }

	/* --- Marca de agua del pie --------------------------------------- */

	.pie {
		background: var(--carbon-950);
		border-top: 1px solid var(--linea);
		padding-block: clamp(3.5rem, 2.5rem + 3vw, 5rem) 2rem;
	}

	.pie__rejilla {
		display: grid;
		grid-template-columns: 1.5fr 1fr 1fr 1.25fr;
		gap: clamp(2rem, 3vw, 3.5rem);
	}

	/* Un 15 % más de presencia que en la cabecera, misma regla: solo altura. */
	.pie__logo {
		display: block;
		height: 55px;
		width: auto;
		max-width: 100%;
		object-fit: contain;
	}

	.pie__claim {
		margin-top: 1.1rem;
		max-width: 30rem;
		color: var(--texto-3);
		font-size: 0.94rem;
		line-height: 1.6;
	}

	.pie__redes { display: flex; gap: 0.55rem; margin-top: 1.4rem; }

	.pie__redes a {
		display: grid;
		place-items: center;
		width: 40px;
		height: 40px;
		border: 1px solid var(--linea);
		border-radius: 12px;
		color: var(--texto-2);
		transition: color var(--transicion), border-color var(--transicion), background-color var(--transicion);
	}

	.pie__redes a:hover {
		color: var(--naranja-luz);
		border-color: rgb(255 175 7 / 45%);
		background: rgb(255 138 0 / 10%);
	}

	.pie__titulo {
		font-size: 0.78rem;
		font-weight: 700;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--texto);
	}

	.pie__titulo--sep { margin-top: 1.8rem; }

	.pie__lista { margin-top: 1rem; display: grid; gap: 0.6rem; }

	.pie__lista a,
	.pie__lista span {
		color: var(--texto-3);
		font-size: 0.94rem;
		text-decoration: none;
		transition: color var(--transicion);
	}

	.pie__lista a:hover { color: var(--naranja-luz); }

	.pie__lista--datos li {
		display: flex;
		align-items: center;
		gap: 0.55rem;
		color: var(--texto-3);
	}

	.pie__horarios {
		margin-top: 1rem;
		display: grid;
		grid-template-columns: auto 1fr;
		gap: 0.35rem 0.9rem;
		font-size: 0.88rem;
	}

	.pie__horarios dt { color: var(--texto-2); font-weight: 600; }
	.pie__horarios dd { color: var(--texto-3); }

	.pie__base {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 0.75rem;
		margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
		padding-top: 1.5rem;
		border-top: 1px solid var(--linea);
		color: var(--texto-3);
		font-size: 0.85rem;
	}

	.pie__desc { text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.74rem; }

	/* --- Burbuja de WhatsApp ----------------------------------------- */

	.wa-flotante {
		position: fixed;
		right: clamp(14px, 2vw, 26px);
		bottom: clamp(14px, 2vw, 26px);
		z-index: 45;
		display: grid;
		place-items: center;
		width: 54px;
		height: 54px;
		border-radius: 50%;
		background: var(--verde-wa);
		color: #06200f;
		box-shadow: 0 14px 34px -12px rgb(37 211 102 / 65%);
		transition: transform var(--transicion);
	}

	.wa-flotante:hover { transform: scale(1.07); }

	/* --- Mascota ------------------------------------------------------ */
	/*
	   Se usa en tres sitios contados y siempre en el flujo, nunca detrás de
	   un texto. Lleva su propio resplandor naranja por debajo, que es lo que
	   la ata a la identidad del sitio en vez de dejarla como una pegatina.
	*/

	.mascota {
		position: relative;
		display: block;
		flex: none;
		isolation: isolate;
	}

	.mascota::before {
		content: "";
		position: absolute;
		inset: auto 4% -4% 4%;
		z-index: -1;
		height: 46%;
		border-radius: 50%;
		background: radial-gradient(ellipse at 50% 90%, rgb(255 138 0 / 30%) 0%, rgb(255 138 0 / 0%) 70%);
		filter: blur(10px);
	}

	.mascota img {
		display: block;
		width: 100%;
		height: auto;
		filter: drop-shadow(0 22px 26px rgb(0 0 0 / 55%));
	}

	/* --- Player de radio ---------------------------------------------- */

	.rp {
		--rp-acento:      #ff8a00;
		--rp-acento-alto: #ffaf07;
		--rp-tinta-play:  #14100a;  /* icono del botón Play sobre el naranja */
		--rp-fondo:       #111318;
		--rp-fondo-2:     #1a1e24;
		--rp-texto:       #ffffff;
		--rp-apagado:     #b8bdc6;
		--rp-linea:       rgb(255 255 255 / 10%);

		position: relative;
		width: 100%;
		max-width: 380px;
		margin-inline: auto;
		padding: 1.6rem 1.5rem 1.35rem;
		border: 1px solid var(--rp-linea);
		border-radius: 24px;
		background: var(--rp-fondo);
		box-shadow: 0 30px 70px -34px rgb(0 0 0 / 85%), 0 0 0 1px rgb(255 138 0 / 6%);
		overflow: hidden;
		isolation: isolate;
		text-align: center;
	}

	/* La carátula, desenfocada, hace de fondo. El velo carbón evita que el
	   color de una portada cualquiera se lleve por delante la identidad. */
	.rp__fondo {
		position: absolute;
		inset: -60px;
		z-index: 0;
		background-position: center;
		background-size: cover;
		filter: blur(46px) saturate(1.2) brightness(0.8);
		transform: scale(1.18);
		transition: background-image 600ms ease, opacity 600ms ease;
		opacity: 0;
	}

	.rp.tiene-arte .rp__fondo { opacity: 1; }

	.rp__velo {
		position: absolute;
		inset: 0;
		z-index: 1;
		background: linear-gradient(180deg, rgb(17 19 24 / 74%) 0%, rgb(17 19 24 / 86%) 46%, rgb(17 19 24 / 95%) 100%);
	}

	.rp__cuerpo { position: relative; z-index: 2; }

	.rp__caratula {
		width: min(200px, 62%);
		margin: 0 auto 1.35rem;
		border-radius: 16px;
		overflow: hidden;
		background: var(--rp-fondo-2);
		box-shadow: 0 18px 34px -14px rgb(0 0 0 / 70%);
		aspect-ratio: 1;
	}

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

	.rp__pista { margin-bottom: 1.25rem; }

	.rp__titulo-marco {
		position: relative;
		height: 1.9rem;
		margin: 0 0 0.35rem;
		overflow: hidden;
	}

	.rp__titulo {
		display: inline-block;
		white-space: nowrap;
		max-width: 100%;
		font-family: var(--fuente-titulo);
		font-size: 1.18rem;
		font-weight: 700;
		line-height: 1.9rem;
		letter-spacing: -0.015em;
		vertical-align: top;
	}

	.rp__artista { color: var(--rp-texto); }
	.rp__tema    { color: var(--rp-acento); }

	.rp__titulo.se-desliza { animation: rp-desliza 14s linear infinite; }

	.rp__emisora {
		display: inline-flex;
		align-items: center;
		gap: 0.45rem;
		font-size: 0.76rem;
		font-weight: 600;
		letter-spacing: 0.13em;
		text-transform: uppercase;
		color: var(--rp-apagado);
	}

	.rp__punto {
		width: 7px;
		height: 7px;
		border-radius: 50%;
		background: var(--rp-apagado);
		transition: background-color var(--transicion);
	}

	.rp.esta-al-aire .rp__punto {
		background: var(--rp-acento);
		animation: latido 2.2s ease-out infinite;
	}

	.rp__controles {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.5rem;
	}

	.rp__icono {
		display: grid;
		place-items: center;
		width: 44px;
		height: 44px;
		border-radius: 50%;
		color: var(--rp-texto);
		transition: background-color var(--transicion), color var(--transicion);
	}

	.rp__icono:hover { background: rgb(255 255 255 / 8%); }
	.rp__icono[aria-expanded="true"] { background: rgb(255 138 0 / 18%); color: var(--rp-acento-alto); }

	.rp__play {
		position: relative;
		display: grid;
		place-items: center;
		width: 64px;
		height: 64px;
		border-radius: 50%;
		background: var(--rp-acento);
		/* Carbón, no blanco: sobre el naranja da 8:1 (y 10,3:1 en hover),
		   frente al 2,4:1 del icono blanco. El 3:1 que pide WCAG a un
		   elemento gráfico de interfaz se cumple de sobra. */
		color: var(--rp-tinta-play);
		box-shadow: 0 10px 24px -8px rgb(255 138 0 / 30%);
		transition: background-color var(--transicion), transform var(--transicion);
	}

	.rp__play:hover { background: var(--rp-acento-alto); }
	.rp__play:active { transform: scale(0.94); }
	.rp__play-icono { fill: var(--rp-tinta-play); }

	.rp__play.esta-cargando .rp__play-icono { opacity: 0; }

	/* Mismo criterio que el icono Play: tinta carbón sobre el naranja. El arco
	   que gira va sólido (8,02:1 y 10,27:1 en hover) y el aro de fondo usa el
	   mismo color al 45 %, que sobre el botón sigue leyéndose (2,52:1) sin
	   competir con el arco. */
	.rp__play.esta-cargando::after {
		content: "";
		position: absolute;
		width: 24px;
		height: 24px;
		border-radius: 50%;
		border: 3px solid rgb(20 16 10 / 45%);
		border-top-color: var(--rp-tinta-play);
		animation: rp-gira 800ms linear infinite;
	}

	.rp__vol { position: relative; }

	.rp__vol-pop {
		position: absolute;
		bottom: calc(100% + 10px);
		right: 0;
		z-index: 4;
		padding: 0.7rem 0.85rem;
		border: 1px solid var(--rp-linea);
		border-radius: 14px;
		background: var(--rp-fondo-2);
		box-shadow: 0 18px 36px -18px rgb(0 0 0 / 85%);
	}

	.rp__rango {
		display: block;
		width: 104px;
		accent-color: var(--rp-acento);
	}

	.rp__datos {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.6rem;
		margin-top: 1.1rem;
		font-size: 0.78rem;
		font-weight: 600;
		color: var(--rp-apagado);
	}

	.rp__sep { opacity: 0.45; }

	.rp__aviso {
		margin-top: 0.75rem;
		font-size: 0.78rem;
		color: #ffb083;
	}

	.rp__historial {
		position: absolute;
		inset: 0;
		z-index: 5;
		display: flex;
		flex-direction: column;
		padding: 1.35rem 1.25rem 1rem;
		border-radius: inherit;
		background: var(--rp-fondo-2);
		text-align: left;
	}

	.rp__historial[hidden] { display: none; }

	.rp__historial-cab {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		padding-bottom: 0.85rem;
		border-bottom: 1px solid rgb(255 255 255 / 8%);
	}

	.rp__historial-titulo {
		font-size: 0.92rem;
		font-weight: 700;
		color: var(--rp-texto);
	}

	.rp__cerrar {
		display: grid;
		place-items: center;
		width: 32px;
		height: 32px;
		border-radius: 50%;
		color: var(--rp-apagado);
		transition: background-color var(--transicion), color var(--transicion);
	}

	.rp__cerrar:hover { background: rgb(255 255 255 / 8%); color: var(--rp-texto); }

	.rp__historial-lista {
		flex: 1;
		margin: 0;
		padding: 0;
		overflow-y: auto;
		list-style: none;
		overscroll-behavior: contain;
	}

	.rp__historial-lista li {
		padding: 0.6rem 0.15rem;
		border-bottom: 1px solid rgb(255 255 255 / 8%);
		font-size: 0.84rem;
		line-height: 1.4;
		color: var(--rp-apagado);
	}

	.rp__historial-lista li:first-child { color: var(--rp-acento); font-weight: 600; }
	.rp__historial-lista li:last-child { border-bottom: 0; }
	.rp__historial-vacio { color: var(--rp-apagado); font-style: italic; }

	.rp__pie {
		margin-top: 0.9rem;
		font-size: 0.75rem;
		color: var(--texto-3);
		text-align: center;
	}

	/* --- Formulario --------------------------------------------------- */

	.form {
		padding: clamp(1.5rem, 1rem + 2vw, 2.4rem);
		border: 1px solid var(--linea-fuerte);
		border-radius: var(--r-xl);
		background: linear-gradient(180deg, rgb(255 255 255 / 6%), rgb(255 255 255 / 2%));
		backdrop-filter: blur(8px);
		box-shadow: var(--sombra-alta);
	}

	.form__titulo { margin-bottom: 1.25rem; }

	.form__aviso {
		margin-bottom: 1.1rem;
		padding: 0.75rem 1rem;
		border-radius: var(--r-sm);
		font-size: 0.92rem;
	}

	.form__aviso--ok    { background: rgb(37 211 102 / 14%); border: 1px solid rgb(37 211 102 / 40%); color: #9cf0bd; }
	.form__aviso--error { background: rgb(252 90 8 / 14%);  border: 1px solid rgb(252 90 8 / 40%);  color: #ffbd8a; }

	.form__campo { margin-bottom: 0.95rem; }

	.form__label {
		display: block;
		margin-bottom: 0.4rem;
		font-family: var(--fuente-titulo);
		font-size: 0.82rem;
		font-weight: 600;
		letter-spacing: 0.02em;
		color: var(--texto-2);
	}

	.form__input {
		width: 100%;
		padding: 0.8rem 1rem;
		border: 1px solid var(--linea-fuerte);
		border-radius: var(--r-sm);
		background: rgb(8 9 12 / 55%);
		color: var(--texto);
		font-size: 1rem;
		transition: border-color var(--transicion), box-shadow var(--transicion);
	}

	.form__input::placeholder { color: var(--texto-3); }

	.form__input:focus {
		outline: none;
		border-color: var(--naranja);
		box-shadow: 0 0 0 3px rgb(255 138 0 / 22%);
	}

	.form__input--area { resize: vertical; min-height: 5.5rem; }

	.form__ayuda { display: block; margin-top: 0.35rem; font-size: 0.8rem; color: var(--texto-3); }
	.form__nota  { margin-top: 0.9rem; font-size: 0.8rem; color: var(--texto-3); text-align: center; }
	.form__trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
}

/* ------------------------------------------------------------------ */
/* 06 · SECCIONES DEL HOME                                              */
/* ------------------------------------------------------------------ */

@layer secciones {

	/* ============ 01 HERO ============ */

	.hero {
		position: relative;
		display: grid;
		align-items: center;
		min-height: min(94svh, 900px);
		padding-block: clamp(7.5rem, 6rem + 5vw, 10rem) clamp(4rem, 3rem + 3vw, 6rem);
		background: var(--carbon-950);
		isolation: isolate;
		overflow: hidden;
	}

	.hero__media {
		position: absolute;
		inset: 0;
		z-index: 0;
		background-image: url("../img/hero-poster.webp");
		background-size: cover;
		background-position: 60% 42%;
	}

	.hero__video {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 60% 42%;
		opacity: 0;
		transition: opacity 700ms ease;
	}

	.hero__video.esta-listo { opacity: 1; }

	.hero__velo {
		position: absolute;
		inset: 0;
		/* El velo superior es suave: de oscurecer la cabecera ya se encarga
		   .cab::before, y asi el rotulo On Air se sigue viendo encendido. */
		background:
			linear-gradient(180deg, rgb(8 9 12 / 34%) 0%, rgb(8 9 12 / 8%) 16%, rgb(8 9 12 / 0%) 32%),
			linear-gradient(90deg, rgb(8 9 12 / 96%) 0%, rgb(8 9 12 / 90%) 26%, rgb(8 9 12 / 58%) 50%, rgb(8 9 12 / 14%) 70%, rgb(8 9 12 / 46%) 100%),
			linear-gradient(0deg, var(--carbon-900) 0%, rgb(12 14 18 / 40%) 15%, rgb(12 14 18 / 0%) 34%);
	}

	.hero__inner { position: relative; z-index: 2; }
	.hero__copy { max-width: 41rem; }

	.kicker--hero { margin-bottom: 1.1rem; }

	.hero__h1 { margin: 0; }

	.hero__lead {
		margin-top: 1.35rem;
		max-width: 34rem;
		color: #d8d5d0;
		font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.28rem);
		line-height: 1.6;
	}

	.hero__acciones {
		display: flex;
		flex-wrap: wrap;
		gap: 0.8rem;
		margin-top: 2rem;
	}

	.hero__prueba {
		margin-top: 1.4rem;
		color: var(--texto-3);
		font-size: 0.88rem;
		letter-spacing: 0.02em;
	}

	.hero__chips {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
		margin-top: 1.9rem;
	}

	.hero__scroll {
		position: absolute;
		left: 50%;
		bottom: 1.75rem;
		z-index: 2;
		translate: -50% 0;
		display: grid;
		place-items: center;
		width: 26px;
		height: 46px;
		border: 1px solid var(--linea-fuerte);
		border-radius: 999px;
	}

	.hero__scroll-linea {
		width: 3px;
		height: 9px;
		border-radius: 2px;
		background: var(--naranja-luz);
		animation: caer 1.9s ease-in-out infinite;
	}

	/* ============ 02 AUTORIDAD ============ */

	.autoridad__cabecera {
		display: grid;
		grid-template-columns: 1.1fr 1fr;
		gap: clamp(1.5rem, 3vw, 4rem);
		align-items: end;
	}

	.autoridad__titulo { font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.7rem); }
	.autoridad__texto { color: var(--texto-2); font-size: 1.02rem; }

	.cifras {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: clamp(1rem, 2vw, 2rem);
		margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
		padding-block: clamp(1.75rem, 1.5rem + 1vw, 2.5rem);
		border-block: 1px solid var(--linea);
	}

	.cifra__valor {
		display: flex;
		align-items: baseline;
		font-family: var(--fuente-titulo);
		font-size: clamp(2.4rem, 1.6rem + 2.8vw, 4rem);
		font-weight: 800;
		letter-spacing: -0.04em;
		line-height: 1;
		background: linear-gradient(135deg, #fff 8%, var(--naranja-luz) 55%, var(--naranja-hondo) 100%);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}

	.cifra__sufijo { font-size: 0.55em; }

	.cifra__texto {
		margin-top: 0.55rem;
		max-width: 15rem;
		color: var(--texto-3);
		font-size: 0.9rem;
		line-height: 1.45;
	}

	.clientes { margin-top: clamp(2.5rem, 2rem + 2vw, 3.75rem); }

	.clientes__rotulo {
		font-family: var(--fuente-titulo);
		font-size: 0.75rem;
		font-weight: 700;
		letter-spacing: 0.15em;
		text-transform: uppercase;
		color: var(--texto-3);
	}

	.clientes__rejilla {
		display: grid;
		grid-template-columns: repeat(8, 1fr);
		gap: clamp(8px, 1vw, 14px);
		margin-top: 1.3rem;
	}

	.clientes__item {
		display: grid;
		place-items: center;
		aspect-ratio: 1;
		padding: 10px;
		border: 1px solid var(--linea);
		border-radius: var(--r-md);
		background: rgb(255 255 255 / 92%);
		transition: transform var(--transicion), border-color var(--transicion);
	}

	.clientes__item:hover { transform: translateY(-3px); border-color: rgb(255 175 7 / 45%); }
	.clientes__item img { border-radius: 8px; }

	.clientes__paises {
		margin-top: 1.4rem;
		color: var(--texto-3);
		font-size: 0.84rem;
		letter-spacing: 0.02em;
	}

	/* ============ 03 SERVICIOS ============ */

	.bento {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		gap: clamp(12px, 1.2vw, 18px);
	}

	.bento__item {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		overflow: hidden;
		padding: clamp(1.2rem, 1rem + 1vw, 1.9rem);
		border: 1px solid var(--linea);
		border-radius: var(--r-lg);
		background: linear-gradient(180deg, rgb(255 255 255 / 5%), rgb(255 255 255 / 1.5%));
		transition: border-color var(--transicion), transform var(--transicion);
	}

	.bento__item::after {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: inherit;
		background: radial-gradient(80% 60% at 50% 0%, rgb(255 138 0 / 13%), transparent 70%);
		opacity: 0;
		transition: opacity var(--transicion);
		pointer-events: none;
	}

	.bento__item:hover { border-color: rgb(255 175 7 / 34%); transform: translateY(-3px); }
	.bento__item:hover::after { opacity: 1; }

	.bento__item--streaming { grid-column: span 7; grid-row: span 2; min-height: 26rem; }
	.bento__item--apps,
	.bento__item--web { grid-column: span 5; min-height: 12.5rem; }
	.bento__item--secundario { grid-column: span 4; min-height: 0; }

	.bento__visual {
		position: absolute;
		inset: 0 0 auto;
		z-index: 0;
		display: grid;
		place-items: center;
		padding: 1.5rem;
		pointer-events: none;
	}

	.bento__item--streaming .bento__visual {
		inset: 6% clamp(1rem, 2vw, 2.2rem) auto;
		height: 44%;
		padding: 0;
		filter: drop-shadow(0 0 26px rgb(255 138 0 / 22%));
	}

	.bento__item--apps .bento__visual,
	.bento__item--web .bento__visual {
		inset: 0 0 auto auto;
		width: 44%;
		height: 100%;
		padding: 1.1rem 0.6rem 1.1rem 0;
		opacity: 0.7;
	}

	.bento__cuerpo { position: relative; z-index: 1; }

	.bento__icono {
		display: grid;
		place-items: center;
		width: 42px;
		height: 42px;
		margin-bottom: 1rem;
		border: 1px solid rgb(255 175 7 / 30%);
		border-radius: 12px;
		background: rgb(255 138 0 / 10%);
		color: var(--naranja-luz);
	}

	.bento__titulo { margin-bottom: 0.5rem; }

	.bento__texto {
		max-width: 30rem;
		color: var(--texto-2);
		font-size: 0.96rem;
		line-height: 1.55;
	}

	.bento__chips {
		display: flex;
		flex-wrap: wrap;
		gap: 0.35rem;
		margin-top: 0.9rem;
	}

	.bento__chips li {
		padding: 0.25rem 0.6rem;
		border: 1px solid var(--linea);
		border-radius: 999px;
		font-size: 0.72rem;
		font-weight: 600;
		letter-spacing: 0.03em;
		color: var(--texto-3);
	}

	.bento__cuerpo .enlace-flecha { margin-top: 1.1rem; }

	/* Microvisuales */
	.mv { width: 100%; height: 100%; display: grid; place-items: center; }
	.mv svg { width: 100%; height: 100%; overflow: visible; }

	.mv-onda__barra {
		fill: var(--naranja);
		opacity: 0.5;
		animation: pulso-onda 2.6s ease-in-out infinite;
		animation-delay: calc(var(--i) * 90ms);
		transform-box: fill-box;
		transform-origin: center;
	}

	.bento__item:hover .mv-onda__barra { opacity: 0.8; }

	.mv-l     { fill: none; stroke: var(--naranja); stroke-width: 1.6; opacity: 0.7; }
	.mv-f     { fill: rgb(255 255 255 / 12%); stroke: none; }
	.mv-solid { fill: var(--naranja); stroke: none; }
	.mv-arco  { fill: none; stroke: var(--naranja); stroke-width: 1.6; stroke-linecap: round; opacity: 0.4; }

	.servicios__extra {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.6rem 1rem;
		margin-top: clamp(1.75rem, 1.5rem + 1vw, 2.5rem);
		padding-top: 1.6rem;
		border-top: 1px solid var(--linea);
	}

	.servicios__extra-rotulo {
		font-family: var(--fuente-titulo);
		font-size: 0.72rem;
		font-weight: 700;
		letter-spacing: 0.15em;
		text-transform: uppercase;
		color: var(--texto-3);
	}

	.servicios__extra-lista { display: flex; flex-wrap: wrap; gap: 0.4rem; }

	.servicios__extra-lista li {
		padding: 0.3rem 0.75rem;
		border: 1px solid var(--linea);
		border-radius: 999px;
		font-size: 0.82rem;
		color: var(--texto-2);
	}

	/* ============ 04 STREAMING ============ */

	.streaming__inner {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: clamp(2rem, 4vw, 4.5rem);
		align-items: center;
	}

	.streaming__resplandor {
		position: absolute;
		top: -10%;
		right: -8%;
		z-index: -1;
		width: 44rem;
		height: 44rem;
		border-radius: 50%;
		background: radial-gradient(circle, rgb(255 138 0 / 14%) 0%, transparent 65%);
		filter: blur(20px);
		pointer-events: none;
	}

	.streaming .sec-head { margin-bottom: 2rem; }

	.streaming__puntos { display: grid; gap: 1.15rem; }

	.streaming__punto { display: flex; gap: 0.95rem; }

	.streaming__icono {
		flex: none;
		display: grid;
		place-items: center;
		width: 40px;
		height: 40px;
		border: 1px solid rgb(255 175 7 / 28%);
		border-radius: 11px;
		background: rgb(255 138 0 / 9%);
		color: var(--naranja-luz);
	}

	.streaming__punto-titulo { font-size: 1.02rem; font-weight: 700; }
	.streaming__punto-texto { margin-top: 0.2rem; color: var(--texto-2); font-size: 0.94rem; }

	.streaming__acciones { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 2rem; }

	/* Panel ilustrativo */
	.panel { margin: 0; }

	.panel__marco {
		overflow: hidden;
		border: 1px solid var(--linea-fuerte);
		border-radius: var(--r-lg);
		background: linear-gradient(180deg, #13161d 0%, #0a0c10 100%);
		box-shadow: var(--sombra-alta), 0 0 0 1px rgb(255 138 0 / 6%);
	}

	.panel__barra {
		display: flex;
		align-items: center;
		gap: 0.8rem;
		padding: 0.85rem 1.1rem;
		border-bottom: 1px solid var(--linea);
		background: rgb(255 255 255 / 2.5%);
	}

	.panel__estado {
		display: inline-flex;
		align-items: center;
		gap: 0.45rem;
		padding: 0.24rem 0.6rem;
		border: 1px solid rgb(255 90 8 / 45%);
		border-radius: 999px;
		background: rgb(252 90 8 / 14%);
		font-family: var(--fuente-titulo);
		font-size: 0.66rem;
		font-weight: 800;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: #ff9c5c;
	}

	.panel__punto {
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background: #ff5f2e;
		animation: latido-rojo 1.8s ease-out infinite;
	}

	.panel__nombre {
		font-family: var(--fuente-titulo);
		font-size: 0.86rem;
		font-weight: 700;
		color: var(--texto);
	}

	.panel__tag {
		margin-left: auto;
		font-size: 0.72rem;
		letter-spacing: 0.06em;
		color: var(--texto-3);
	}

	.panel__cuerpo { padding: clamp(1.1rem, 1rem + 0.6vw, 1.6rem); display: grid; gap: 1.2rem; }

	.panel__onda {
		display: flex;
		align-items: center;
		gap: 3px;
		height: 96px;
		padding-inline: 2px;
	}

	.panel__barra-onda {
		flex: 1;
		height: var(--h);
		min-height: 6px;
		border-radius: 3px;
		background: linear-gradient(180deg, var(--naranja-luz), var(--naranja-hondo));
		opacity: 0.75;
		transform-origin: center;
		animation: respirar 2.8s ease-in-out infinite;
		animation-delay: calc(var(--i) * 70ms);
	}

	.panel__fuentes { display: flex; gap: 0.5rem; }

	.panel__fuente {
		display: inline-flex;
		align-items: center;
		gap: 0.45rem;
		padding: 0.42rem 0.8rem;
		border: 1px solid var(--linea);
		border-radius: 999px;
		font-size: 0.78rem;
		color: var(--texto-3);
	}

	.panel__fuente--activa {
		border-color: rgb(255 175 7 / 40%);
		background: rgb(255 138 0 / 10%);
		color: var(--naranja-luz);
	}

	.panel__led {
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background: currentColor;
		opacity: 0.55;
	}

	.panel__fuente--activa .panel__led { opacity: 1; box-shadow: 0 0 8px currentColor; }

	.panel__medidores { display: grid; gap: 6px; }

	.panel__medidor {
		height: 6px;
		border-radius: 3px;
		background: rgb(255 255 255 / 7%);
		overflow: hidden;
	}

	.panel__medidor i {
		display: block;
		height: 100%;
		width: calc(var(--n) * 100%);
		border-radius: inherit;
		background: linear-gradient(90deg, var(--naranja-hondo), var(--naranja-luz));
	}

	.panel__protocolos {
		display: flex;
		flex-wrap: wrap;
		gap: 0.35rem;
		padding-top: 1rem;
		border-top: 1px solid var(--linea);
	}

	.panel__protocolos li {
		padding: 0.24rem 0.6rem;
		border: 1px solid var(--linea);
		border-radius: 6px;
		font-family: var(--fuente-titulo);
		font-size: 0.7rem;
		font-weight: 600;
		letter-spacing: 0.05em;
		color: var(--texto-3);
	}

	.panel__pie {
		margin-top: 0.85rem;
		font-size: 0.78rem;
		font-style: italic;
		color: var(--texto-3);
		text-align: center;
	}

	/* ============ 05 PLANES ============ */

	.planes__rejilla {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: clamp(1rem, 2vw, 1.75rem);
		max-width: 58rem;
		margin-inline: auto;
	}

	.plan {
		position: relative;
		display: flex;
		flex-direction: column;
		padding: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem);
		border: 1px solid var(--linea-fuerte);
		border-radius: var(--r-xl);
		background: #fff;
		box-shadow: 0 24px 50px -40px rgb(20 22 26 / 40%);
		transition: transform var(--transicion), box-shadow var(--transicion);
	}

	.plan:hover { transform: translateY(-4px); box-shadow: 0 34px 60px -40px rgb(20 22 26 / 50%); }

	.plan--destacado {
		border-color: var(--naranja);
		box-shadow: 0 26px 60px -34px rgb(255 138 0 / 45%);
	}

	.plan__sello {
		position: absolute;
		top: 0;
		left: 50%;
		translate: -50% -50%;
		padding: 0.3rem 0.85rem;
		border-radius: 999px;
		background: linear-gradient(135deg, var(--naranja-luz), var(--naranja-hondo));
		color: #14100a;
		font-family: var(--fuente-titulo);
		font-size: 0.68rem;
		font-weight: 800;
		letter-spacing: 0.11em;
		text-transform: uppercase;
	}

	.plan__nombre { font-size: 1.5rem; }
	.plan__resumen { margin-top: 0.5rem; color: var(--texto-2); font-size: 0.94rem; }

	.plan__precio {
		display: flex;
		align-items: baseline;
		flex-wrap: wrap;
		gap: 0.4rem;
		margin-top: 1.4rem;
		padding-top: 1.4rem;
		border-top: 1px dashed var(--linea-fuerte);
	}

	.plan__desde {
		font-size: 0.78rem;
		font-weight: 600;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--texto-3);
		width: 100%;
	}

	.plan__cifra {
		font-family: var(--fuente-titulo);
		font-size: clamp(2.4rem, 2rem + 1.6vw, 3.2rem);
		font-weight: 800;
		letter-spacing: -0.04em;
		line-height: 1;
		color: var(--tinta);
	}

	.plan__moneda { font-size: 0.42em; font-weight: 700; vertical-align: super; margin-right: 0.15em; color: var(--texto-2); }
	.plan__periodo { font-size: 0.95rem; color: var(--texto-3); }

	.plan__lista { display: grid; gap: 0.6rem; margin-top: 1.4rem; }

	.plan__lista li {
		display: flex;
		align-items: flex-start;
		gap: 0.55rem;
		font-size: 0.94rem;
		color: var(--texto-2);
	}

	.plan__lista .vptm-icon { flex: none; margin-top: 2px; color: var(--naranja-hondo); }

	.plan .btn { margin-top: auto; margin-block-start: 1.75rem; }
	.plan .btn--contorno { border-color: var(--linea-fuerte); color: var(--tinta); }
	.plan .btn--contorno:hover { border-color: var(--naranja-hondo); color: var(--naranja-tinta); }

	.planes__pie { margin-top: 2.25rem; text-align: center; }
	.planes__nota { margin-top: 0.6rem; font-size: 0.84rem; color: var(--texto-3); }

	/* ============ 06 APLICACIONES ============ */

	.apps__resplandor {
		position: absolute;
		top: 12%;
		left: 50%;
		z-index: -1;
		translate: -50% 0;
		width: min(70rem, 90%);
		height: 34rem;
		border-radius: 50%;
		background: radial-gradient(ellipse, rgb(255 138 0 / 11%) 0%, transparent 65%);
		pointer-events: none;
	}

	.apps__fila {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: clamp(14px, 2.2vw, 34px);
		align-items: start;
	}

	.apps__pieza {
		display: grid;
		gap: 1rem;
		justify-items: center;
		text-align: center;
	}

	.apps__pieza:nth-child(even) { transform: translateY(-30px); }

	.apps__pantalla {
		width: 100%;
		max-width: 250px;
		filter: drop-shadow(0 32px 44px rgb(0 0 0 / 55%));
		transition: transform var(--transicion);
	}

	.apps__pieza:hover .apps__pantalla { transform: translateY(-6px); }

	.apps__nombre { font-size: 1.02rem; }
	.apps__tipo { margin-block: 0.2rem 0.65rem; color: var(--texto-3); font-size: 0.84rem; }

	.apps__publicadas {
		margin-top: clamp(3rem, 2.5rem + 2vw, 4.5rem);
		padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.4rem);
		border: 1px solid var(--linea);
		border-radius: var(--r-xl);
		background: linear-gradient(180deg, rgb(255 255 255 / 4%), rgb(255 255 255 / 1%));
	}

	.apps__publicadas-cab {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		padding-bottom: 1.35rem;
		border-bottom: 1px solid var(--linea);
	}

	.apps__publicadas-titulo { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem); }

	.apps__lista {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 0.4rem 1.5rem;
		margin-top: 1.35rem;
	}

	.apps__lista a {
		display: flex;
		align-items: center;
		gap: 0.6rem;
		padding: 0.55rem 0.2rem;
		border-radius: 8px;
		color: var(--texto-2);
		text-decoration: none;
		transition: color var(--transicion);
	}

	.apps__lista a:hover { color: var(--naranja-luz); }
	.apps__lista-nombre { font-weight: 600; font-size: 0.94rem; }

	.apps__lista-pais {
		margin-left: auto;
		font-size: 0.78rem;
		color: var(--texto-3);
	}

	.apps__lista .vptm-icon { flex: none; opacity: 0.55; }

	.apps__cta {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.5rem 1.1rem;
		margin-top: 1.75rem;
		padding-top: 1.5rem;
		border-top: 1px solid var(--linea);
	}

	.apps__cta-nota { color: var(--texto-3); font-size: 0.86rem; }

	/* ============ 07 ECOSISTEMA ============ */

	.eco__inner {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: clamp(2rem, 4vw, 4.5rem);
		align-items: center;
	}

	.eco__ventajas { display: grid; gap: 0.85rem; margin-block: 1.75rem 2rem; }

	.eco__ventajas li {
		display: flex;
		align-items: flex-start;
		gap: 0.7rem;
		color: var(--texto-2);
		font-size: 0.98rem;
	}

	.eco__ventajas .vptm-icon { flex: none; margin-top: 3px; color: var(--naranja-luz); }

	.eco__orbita {
		position: relative;
		width: min(100%, 34rem);
		margin-inline: auto;
		aspect-ratio: 1;
	}

	.eco__trazos { position: absolute; inset: 0; width: 100%; height: 100%; }

	.eco__anillo {
		fill: none;
		stroke: rgb(255 175 7 / 22%);
		stroke-width: 0.4;
		stroke-dasharray: 1.6 2.4;
	}

	.eco__radios line {
		stroke: rgb(255 255 255 / 11%);
		stroke-width: 0.35;
	}

	.eco__centro {
		position: absolute;
		top: 50%;
		left: 50%;
		translate: -50% -50%;
		display: grid;
		place-items: center;
		gap: 0.3rem;
		width: 33%;
		aspect-ratio: 1;
		border: 1px solid rgb(255 175 7 / 40%);
		border-radius: 50%;
		background: radial-gradient(circle at 50% 30%, rgb(255 138 0 / 22%), rgb(12 14 18 / 96%) 70%);
		box-shadow: 0 0 60px -12px rgb(255 138 0 / 45%), inset 0 0 30px -10px rgb(255 175 7 / 40%);
		text-align: center;
	}

	.eco__centro-punto {
		width: 9px;
		height: 9px;
		border-radius: 50%;
		background: var(--naranja-luz);
		box-shadow: 0 0 0 0 rgb(255 175 7 / 55%);
		animation: latido 2.6s ease-out infinite;
	}

	.eco__centro-texto {
		font-family: var(--fuente-titulo);
		font-size: clamp(0.8rem, 0.7rem + 0.4vw, 1rem);
		font-weight: 800;
		letter-spacing: 0.02em;
	}

	.eco__nodo {
		position: absolute;
		top: var(--y);
		left: var(--x);
		translate: -50% -50%;
		display: flex;
		align-items: center;
		gap: 0.6rem;
		padding: 0.6rem 0.9rem;
		border: 1px solid var(--linea-fuerte);
		border-radius: 999px;
		background: rgb(16 19 25 / 92%);
		backdrop-filter: blur(6px);
		white-space: nowrap;
		box-shadow: var(--sombra-media);
		transition: border-color var(--transicion), transform var(--transicion);
	}

	.eco__nodo:hover { border-color: rgb(255 175 7 / 50%); transform: translate(-50%, -50%) scale(1.04); }

	.eco__nodo-icono { display: grid; place-items: center; color: var(--naranja-luz); }
	.eco__nodo-textos { display: grid; line-height: 1.2; }
	.eco__nodo-textos strong { font-family: var(--fuente-titulo); font-size: 0.86rem; font-weight: 700; }
	.eco__nodo-textos em { font-style: normal; font-size: 0.72rem; color: var(--texto-3); }

	/* ============ 08 PROYECTOS ============ */

	.proyectos__rejilla {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		gap: clamp(1rem, 2vw, 1.75rem);
	}

	.proy {
		overflow: hidden;
		border: 1px solid var(--linea-fuerte);
		border-radius: var(--r-xl);
		background: #fff;
		box-shadow: 0 24px 50px -42px rgb(20 22 26 / 45%);
		transition: transform var(--transicion), box-shadow var(--transicion);
	}

	.proy:hover { transform: translateY(-4px); box-shadow: 0 34px 64px -42px rgb(20 22 26 / 55%); }

	.proy--destacado {
		grid-column: span 12;
		display: grid;
		grid-template-columns: 1.4fr 0.85fr;
		align-items: stretch;
	}

	.proy--secundario { grid-column: span 6; }

	.proy__figura { margin: 0; overflow: hidden; background: var(--hueso-2); }

	.proy__figura img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: top center;
	}

	.proy--destacado .proy__figura img { min-height: 22rem; }
	.proy--secundario .proy__figura img { aspect-ratio: 16 / 9; }

	.proy__cuerpo { padding: clamp(1.4rem, 1.1rem + 1.2vw, 2.2rem); display: flex; flex-direction: column; justify-content: center; }

	.proy__kicker {
		font-family: var(--fuente-titulo);
		font-size: 0.7rem;
		font-weight: 800;
		letter-spacing: 0.15em;
		text-transform: uppercase;
		color: var(--naranja-tinta);
		margin-bottom: 0.5rem;
	}

	.proy__nombre { font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.75rem); }

	.proy__lugar {
		display: flex;
		align-items: center;
		gap: 0.35rem;
		margin-top: 0.4rem;
		font-size: 0.85rem;
		color: var(--texto-3);
	}

	.proy__resumen { margin-top: 0.85rem; color: var(--texto-2); font-size: 0.95rem; }

	.proy__entregado { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 1.1rem; }

	.proy__entregado li {
		padding: 0.28rem 0.7rem;
		border: 1px solid var(--linea-fuerte);
		border-radius: 999px;
		font-size: 0.78rem;
		font-weight: 600;
		color: var(--texto-2);
	}

	.proy__cuerpo .enlace-flecha { margin-top: 1.3rem; align-self: flex-start; }

	/* ============ 09 TECNOLOGIAS ============ */

	/* El desfile es mas ancho que la pantalla: se recorta aqui para que
	   nunca genere scroll horizontal en el documento. */
	.tec { overflow: hidden; }

	.tec { padding-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
	.tec .sec-head { margin-bottom: clamp(2rem, 1.5rem + 1.5vw, 3rem); }

	.tec__banda {
		display: flex;
		width: max-content;
		animation: desfile 46s linear infinite;
		mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	}

	.tec__banda:hover { animation-play-state: paused; }

	.tec__pista { display: flex; gap: clamp(10px, 1.2vw, 18px); padding-inline: calc(clamp(10px, 1.2vw, 18px) / 2); }

	.tec__pieza {
		display: grid;
		gap: 0.2rem;
		padding: 1rem 1.6rem;
		border: 1px solid var(--linea);
		border-radius: var(--r-md);
		background: linear-gradient(180deg, rgb(255 255 255 / 4.5%), rgb(255 255 255 / 1%));
		text-align: center;
		min-width: 11rem;
	}

	.tec__nombre {
		font-family: var(--fuente-titulo);
		font-size: 1.08rem;
		font-weight: 700;
		letter-spacing: -0.01em;
	}

	.tec__grupo {
		font-size: 0.7rem;
		font-weight: 600;
		letter-spacing: 0.13em;
		text-transform: uppercase;
		color: var(--naranja);
		opacity: 0.85;
	}

	/* ============ 10 RECURSOS ============ */

	.recursos__rejilla {
		display: grid;
		grid-template-columns: 1.25fr 1fr;
		gap: clamp(1.25rem, 2.5vw, 2.5rem);
		align-items: start;
	}

	.recursos__lista { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 1.6vw, 1.5rem); }

	.video__fachada {
		position: relative;
		overflow: hidden;
		border: 1px solid var(--linea);
		border-radius: var(--r-md);
		background: var(--carbon-800);
		aspect-ratio: 16 / 9;
	}

	.video__miniatura {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform var(--transicion), filter var(--transicion);
		filter: saturate(0.85) brightness(0.82);
	}

	.video__fachada:hover .video__miniatura { transform: scale(1.04); filter: saturate(1) brightness(0.95); }

	/* Los tutoriales son grabaciones de pantalla: este velo los unifica
	   con el resto de la pagina en vez de dejarlos como capturas sueltas. */
	.video__fachada::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
		background:
			linear-gradient(180deg, rgb(8 9 12 / 8%) 0%, rgb(8 9 12 / 34%) 58%, rgb(8 9 12 / 84%) 100%),
			radial-gradient(72% 72% at 50% 46%, transparent 38%, rgb(8 9 12 / 52%) 100%);
		pointer-events: none;
		transition: opacity var(--transicion);
	}

	.video__fachada:hover::after { opacity: 0.72; }

	.video__boton {
		position: absolute;
		inset: 0;
		z-index: 2;
		display: grid;
		place-items: center;
	}

	.video__play {
		display: grid;
		place-items: center;
		width: 62px;
		height: 62px;
		border-radius: 50%;
		background: linear-gradient(135deg, var(--naranja-luz), var(--naranja-hondo));
		box-shadow: 0 14px 34px -12px rgb(255 138 0 / 75%);
		transition: transform var(--transicion);
	}

	.video__play::after {
		content: "";
		width: 0;
		height: 0;
		margin-left: 4px;
		border-left: 17px solid #14100a;
		border-block: 10px solid transparent;
	}

	.video--mini .video__play { width: 44px; height: 44px; }
	.video--mini .video__play::after { border-left-width: 12px; border-block-width: 7px; margin-left: 3px; }

	.video__fachada:hover .video__play { transform: scale(1.08); }

	.video__fachada iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

	.video__titulo {
		margin-top: 0.85rem;
		font-size: 1.02rem;
		font-weight: 700;
		line-height: 1.35;
	}

	.video--mini .video__titulo { font-size: 0.88rem; font-weight: 600; }

	.video__meta {
		margin-top: 0.3rem;
		font-size: 0.8rem;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--naranja);
	}

	.recursos__pie { margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem); text-align: center; }
	.recursos__pie .enlace-flecha { gap: 0.6rem; }

	/* ============ 11 CIERRE ============ */

	.cierre {
		background:
			radial-gradient(90% 70% at 20% 0%, rgb(255 138 0 / 13%) 0%, transparent 60%),
			var(--carbon-950);
		border-top: 1px solid var(--linea);
	}

	.cierre__resplandor {
		position: absolute;
		bottom: -30%;
		left: -10%;
		z-index: -1;
		width: 40rem;
		height: 40rem;
		border-radius: 50%;
		background: radial-gradient(circle, rgb(252 90 8 / 12%) 0%, transparent 65%);
		pointer-events: none;
	}

	.cierre__inner {
		display: grid;
		grid-template-columns: 1.05fr 0.95fr;
		gap: clamp(2rem, 4vw, 4.5rem);
		align-items: center;
	}

	.cierre__titulo { margin-top: 1rem; font-size: clamp(1.8rem, 1.25rem + 1.7vw, 2.55rem); }
	.cierre__lead { margin-top: 1.2rem; max-width: 32rem; color: var(--texto-2); font-size: 1.05rem; }
	.cierre__texto .btn--wa { margin-top: 2rem; }

	/* Bloque de acompañamiento con la mascota, en el cierre del HOME. */
	.cierre__apoyo {
		display: flex;
		align-items: center;
		gap: 1.1rem;
		margin-top: 2.25rem;
		padding: 0.9rem 1.2rem 0.9rem 0;
		border-left: 2px solid rgb(255 138 0 / 35%);
		padding-left: 1.2rem;
	}

	.cierre__apoyo-texto {
		color: var(--texto-2);
		font-size: 0.94rem;
		line-height: 1.55;
	}

	.cierre__datos { display: grid; gap: 0.7rem; margin-top: 2rem; }

	/* ============ 404 ============ */

	.pagina-404 { min-height: 72svh; display: grid; align-items: center; }

	.pagina-404__inner {
		display: grid;
		grid-template-columns: 1.15fr 0.85fr;
		gap: clamp(2rem, 4vw, 4rem);
		align-items: center;
	}

	.pagina-404__titulo { margin-top: 1rem; font-size: clamp(1.9rem, 1.3rem + 2vw, 3rem); }
	.pagina-404__lead { margin-top: 1.15rem; max-width: 34rem; color: var(--texto-2); font-size: 1.02rem; }
	.pagina-404__acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
	.pagina-404__mascota { display: flex; justify-content: center; }

	.cierre__datos li {
		display: flex;
		align-items: center;
		gap: 0.6rem;
		color: var(--texto-2);
		font-size: 0.94rem;
	}

	.cierre__datos .vptm-icon { flex: none; color: var(--naranja-luz); }
	.cierre__datos a { color: inherit; text-decoration: none; }
	.cierre__datos a:hover { color: var(--naranja-luz); }
}

/* ------------------------------------------------------------------ */
/* 07 · UTILIDADES Y MOVIMIENTO                                         */
/* ------------------------------------------------------------------ */

@layer utilidades {

	.u-visualmente-oculto {
		position: absolute !important;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	@keyframes latido {
		0%   { box-shadow: 0 0 0 0 rgb(255 175 7 / 55%); }
		70%  { box-shadow: 0 0 0 9px rgb(255 175 7 / 0%); }
		100% { box-shadow: 0 0 0 0 rgb(255 175 7 / 0%); }
	}

	@keyframes latido-rojo {
		0%   { box-shadow: 0 0 0 0 rgb(255 95 46 / 65%); }
		70%  { box-shadow: 0 0 0 7px rgb(255 95 46 / 0%); }
		100% { box-shadow: 0 0 0 0 rgb(255 95 46 / 0%); }
	}

	@keyframes caer {
		0%   { transform: translateY(-6px); opacity: 0; }
		35%  { opacity: 1; }
		100% { transform: translateY(7px); opacity: 0; }
	}

	@keyframes respirar {
		0%, 100% { transform: scaleY(0.6); opacity: 0.5; }
		50%      { transform: scaleY(1);   opacity: 0.95; }
	}

	@keyframes pulso-onda {
		0%, 100% { transform: scaleY(0.55); }
		50%      { transform: scaleY(1); }
	}

	@keyframes desfile {
		from { transform: translateX(0); }
		to   { transform: translateX(-50%); }
	}

	@keyframes rp-gira {
		to { transform: rotate(360deg); }
	}

	/* Solo se activa cuando el título no cabe, y nunca con movimiento reducido. */
	@keyframes rp-desliza {
		0%, 12%   { transform: translateX(0); }
		88%, 100% { transform: translateX(var(--recorrido, 0)); }
	}

	/* --- Aparicion al hacer scroll (la activa app.js) ----------------- */

	.aparece {
		opacity: 0;
		transform: translateY(18px);
		transition: opacity 640ms ease, transform 640ms cubic-bezier(.2, .7, .3, 1);
	}

	.aparece.esta-visible { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ */
/* RESPONSIVE — 1024 / 834 (tablet) / 700 / 390 (movil)                 */
/* ------------------------------------------------------------------ */

@media (max-width: 1180px) {

	.bento__item--streaming { grid-column: span 12; grid-row: auto; min-height: 22rem; }
	.bento__item--apps,
	.bento__item--web { grid-column: span 6; }
	.apps__lista { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {

	.cab__marca img { height: 44px; }
	.cab__toggle { display: block; margin-left: auto; }

	.cab__nav {
		position: fixed;
		inset: 0 0 auto;
		z-index: -1;
		display: grid;
		align-content: start;
		gap: 1.75rem;
		padding: 6.5rem var(--margen) 2.5rem;
		background: rgb(8 9 12 / 97%);
		backdrop-filter: blur(16px);
		border-bottom: 1px solid var(--linea);
		clip-path: inset(0 0 100% 0);
		transition: clip-path 320ms cubic-bezier(.3, .8, .3, 1);
	}

	.cab.esta-abierta .cab__nav { clip-path: inset(0 0 0 0); }
	.cab.esta-abierta .cab__toggle-abrir { display: none; }
	.cab.esta-abierta .cab__toggle-cerrar { display: block; }

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

	.cab__lista li + li { border-top: 1px solid var(--linea); }

	.cab__lista a {
		display: block;
		padding-block: 1rem;
		font-size: 1.2rem;
		font-weight: 700;
		color: var(--texto);
	}

	.cab__lista a::after { display: none; }
	.cab__acciones { flex-direction: column; align-items: stretch; }
	.cab__acciones .btn { justify-content: center; padding-block: 0.9rem; font-size: 1rem; }

	.autoridad__cabecera { grid-template-columns: 1fr; align-items: start; }
	.cifras { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem; }
	.clientes__rejilla { grid-template-columns: repeat(6, 1fr); }

	.streaming__inner,
	.eco__inner,
	.cierre__inner { grid-template-columns: 1fr; }

	.streaming__panel,
	.eco__diagrama { max-width: 34rem; margin-inline: auto; width: 100%; }

	.proy--destacado { grid-template-columns: 1fr; }
	.proy--destacado .proy__figura img { min-height: 0; aspect-ratio: 16 / 8; }

	.recursos__rejilla { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {

	/* La mascota del cierre se retira en columna única: alargaba el móvil
	   sin aportar nada al formulario, que es lo que importa ahí. */
	.cierre__apoyo { display: none; }
	.pagina-404__inner { grid-template-columns: 1fr; text-align: center; }
	.pagina-404__lead { margin-inline: auto; }
	.pagina-404__acciones { justify-content: center; }
	.pagina-404__mascota { order: -1; }
}

@media (max-width: 860px) {

	.bento__item--apps,
	.bento__item--web,
	.bento__item--secundario { grid-column: span 12; }

	/* En columna unica el microvisual dejaria de ser fondo y taparia el
	   texto: la onda pasa a formar parte del flujo y el resto se retira. */
	.bento__item--streaming { min-height: 0; justify-content: flex-start; }

	.bento__item--streaming .bento__visual {
		position: relative;
		inset: auto;
		width: 100%;
		height: 92px;
		padding: 0;
		margin-bottom: 1.2rem;
	}

	.bento__item--apps .bento__visual,
	.bento__item--web .bento__visual { display: none; }

	.planes__rejilla { grid-template-columns: 1fr; max-width: 30rem; }
	.proy--secundario { grid-column: span 12; }

	.pie__rejilla { grid-template-columns: 1fr 1fr; }
	.pie__marca { grid-column: span 2; }
}

@media (max-width: 700px) {

	:root { --aire: clamp(3.5rem, 2.5rem + 6vw, 5rem); }

	.hero {
		align-items: end;
		min-height: 92svh;
		padding-block: 7rem 3.5rem;
	}

	.hero__media {
		background-image: url("../img/hero-poster-mobile.webp");
		background-position: 50% 28%;
	}

	.hero__video { object-position: 50% 28%; }

	.hero__velo {
		background:
			linear-gradient(180deg, rgb(8 9 12 / 88%) 0%, rgb(8 9 12 / 32%) 16%, rgb(8 9 12 / 6%) 34%, rgb(8 9 12 / 62%) 58%, rgb(12 14 18 / 95%) 80%, var(--carbon-900) 100%);
	}

	.hero__h1 { font-size: clamp(2.05rem, 1.4rem + 4vw, 2.8rem); }
	.hero__lead { font-size: 1.02rem; }
	.hero__acciones { margin-top: 1.6rem; }
	.hero__acciones .btn { flex: 1 1 auto; }
	.hero__chips { margin-top: 1.4rem; }
	.hero__scroll { display: none; }

	.cifras { grid-template-columns: repeat(2, 1fr); }
	.clientes__rejilla { grid-template-columns: repeat(4, 1fr); }

	/* Las apps pasan a carrusel horizontal con anclaje. */
	.apps__escaparate {
		margin-inline: calc(var(--margen) * -1);
		padding-inline: var(--margen);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: thin;
	}

	.apps__fila { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 62vw; }
	.apps__pieza { scroll-snap-align: center; }
	.apps__pieza:nth-child(even) { transform: none; }
	.apps__lista { grid-template-columns: 1fr; }

	.recursos__lista { grid-template-columns: 1fr 1fr; }

	/* Los nodos sobresalen del circulo: se le reserva ese margen. */
	.eco__diagrama { padding-inline: 2.4rem; }
	.eco__nodo { padding: 0.45rem 0.7rem; }
	.eco__nodo-textos em { display: none; }

	.panel__barra { flex-wrap: wrap; gap: 0.5rem 0.7rem; }
	.panel__tag { display: none; }

	.pie__rejilla { grid-template-columns: 1fr; }
	.pie__marca { grid-column: auto; }
	.pie__base { flex-direction: column; }

	.tec__pieza { min-width: 9rem; padding: 0.85rem 1.2rem; }

	.rp { max-width: 100%; }
	.rp__caratula { width: min(220px, 58%); }

	/* Los controles se meten hacia dentro: en móvil la burbuja flotante de
	   WhatsApp vive en la esquina inferior derecha y llegaba a taparlos. */
	.rp__controles { padding-inline: 1.1rem; }
}

@media (max-width: 420px) {

	.cab__marca img { height: 40px; }
	.pie__logo { height: 48px; }
	.clientes__rejilla { grid-template-columns: repeat(3, 1fr); }
	.hero__acciones .btn { width: 100%; }
	.video--mini .video__titulo { font-size: 0.8rem; }
	.eco__diagrama { padding-inline: 2rem; }
}

/* ------------------------------------------------------------------ */
/* MOVIMIENTO REDUCIDO — se respeta en todo el sitio                    */
/* ------------------------------------------------------------------ */

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

	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	.aparece { opacity: 1; transform: none; }

	.hero__video { transition: none; }

	/* La banda de tecnologias deja de desfilar y se lee como rejilla. */
	.tec__banda {
		width: auto;
		animation: none;
		mask-image: none;
	}

	.tec__pista { flex-wrap: wrap; justify-content: center; }
	.tec__pista + .tec__pista { display: none; }

	.panel__barra-onda { transform: scaleY(0.85); opacity: 0.8; }
	.mv-onda__barra { transform: none; opacity: 0.4; }

	/* Los pulsos decorativos se apagan del todo, no solo se acortan. */
	.chip__punto,
	.panel__punto,
	.eco__centro-punto,
	.hero__scroll-linea,
	.panel__barra-onda,
	.mv-onda__barra,
	.rp .rp__punto {
		animation: none !important;
	}

	/* El título del player no se desliza: se corta con puntos suspensivos. */
	.rp__titulo.se-desliza { animation: none !important; }

	.rp__titulo {
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* Con movimiento reducido el aro deja de girar del todo. En su lugar, un
	   indicador estático de tres puntos: dice lo mismo —«esto está trabajando»—
	   sin nada en movimiento, y en la misma tinta carbón (8,02:1). */
	.rp__play.esta-cargando::after {
		content: "•••";
		width: auto;
		height: auto;
		border: 0;
		border-radius: 0;
		color: var(--rp-tinta-play);
		font-family: var(--fuente-texto);
		font-size: 15px;
		font-weight: 700;
		letter-spacing: 1px;
		line-height: 1;
		animation: none !important;
	}

	.hero__scroll-linea { opacity: 1; }
}

/* ------------------------------------------------------------------ */
/* IMPRESION                                                            */
/* ------------------------------------------------------------------ */

@media print {

	.cab, .wa-flotante, .hero__media, .hero__scroll, .video__boton { display: none !important; }
	body { background: #fff; color: #000; }
}