/* ==========================================================================
   Viviana Campos — hoja principal
   Requiere tokens.css cargado antes.
   ========================================================================== */

/* --- Reset acotado ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	background: var(--vc-bg);
	color: var(--vc-fg);
	font-family: var(--vc-texto);
	font-size: var(--vc-t-base);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; padding: 0; }

:focus-visible {
	outline: 3px solid var(--vc-naranja);
	outline-offset: 3px;
	border-radius: 4px;
}

/* --- Tipografía ---------------------------------------------------------- */
h1, h2, h3, h4, .display {
	font-family: var(--vc-display);
	font-weight: var(--vc-peso-display);
	letter-spacing: var(--vc-track-display);
	line-height: 1.02;
	text-transform: uppercase;
	text-wrap: balance;
}

h1 { font-size: var(--vc-t-3xl); }
h2 { font-size: var(--vc-t-2xl); }
h3 { font-size: var(--vc-t-xl); }

/* El punto final naranja que cierra cada titular del manual de marca. */
.punto::after { content: "."; color: var(--vc-naranja); }
.resalta { color: var(--vc-naranja); }
.resalta-lav { color: var(--vc-lavanda); }

.apoyo { color: var(--vc-fg-suave); font-size: var(--vc-t-lg); text-wrap: pretty; }

.etiqueta {
	font-size: var(--vc-t-xs);
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--vc-fg-suave);
}

/* --- Layout -------------------------------------------------------------- */
.wrap {
	width: min(100% - (var(--vc-gut) * 2), var(--vc-wrap));
	margin-inline: auto;
}

.seccion {
	background: var(--vc-bg);
	color: var(--vc-fg);
	padding-block: var(--vc-s7);
}

.seccion__head {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	justify-content: space-between;
	gap: var(--vc-s3);
	margin-bottom: var(--vc-s5);
}

.seccion__head p { max-width: 42ch; color: var(--vc-fg-suave); }

.enlace-mas {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-size: var(--vc-t-xs);
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	white-space: nowrap;
}
.enlace-mas svg { transition: transform var(--vc-trans); }
.enlace-mas:hover svg { transform: translateX(4px); }

/* --- Botones ------------------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .625rem;
	padding: .9rem 1.5rem;
	/* Sin esto, un <button class="btn btn--linea"> se quedaba con el gris
	   que el navegador pone por defecto y el texto se volvía ilegible. */
	background: none;
	border: 1px solid transparent;
	border-radius: var(--vc-radio-pill);
	font-size: var(--vc-t-sm);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background var(--vc-trans), color var(--vc-trans),
	            border-color var(--vc-trans), transform var(--vc-trans);
}
.btn svg { flex: none; transition: transform var(--vc-trans); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }

.btn--naranja { background: var(--vc-naranja); color: var(--vc-blanco); }
.btn--naranja:hover { background: #e64a12; }

.btn--claro { background: var(--vc-hueso); color: var(--vc-tinta); }
.btn--claro:hover { background: var(--vc-blanco); }

.btn--oscuro { background: var(--vc-tinta); color: var(--vc-hueso); }
.btn--oscuro:hover { background: #2a2a2a; }

.btn--linea { border-color: currentColor; color: var(--vc-fg); }
.btn--linea:hover { background: var(--vc-fg); color: var(--vc-bg); }

.btn--bloque { width: 100%; }

/* --- Cabecera ------------------------------------------------------------ */
/* Alto real de la cabecera pegajosa. Los indices de los casos se pegan
   justo debajo, y hasta hoy lo hacian con un 66px escrito a mano que ya
   no correspondia: la cabecera mide 85 y el indice se metia 19px debajo
   de ella, medio tapado. El JS la vuelve a medir al cargar y al girar el
   telefono, asi que este valor es solo el punto de partida. */
:root { --vc-alto-cabecera: 85px; }

.cabecera {
	position: sticky;
	top: 0;
	/* Por encima de cualquier cosa interna de una pagina: los indices
	   pegajosos de los casos de proyecto van en z-index 55 y tapaban el
	   menu principal al abrirlo sobre esas paginas. */
	z-index: 100;
	background: var(--vc-hueso);
	color: var(--vc-tinta);
	border-bottom: 1px solid var(--vc-linea);
}

.cabecera__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vc-s3);
	min-height: 76px;
}

.marca { display: flex; align-items: center; gap: .75rem; flex: none; }
.marca__logo { height: 40px; width: auto; }

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }

.nav a {
	position: relative;
	font-size: var(--vc-t-xs);
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding-block: .35rem;
	color: rgba(17, 17, 17, .62);
	transition: color var(--vc-trans);
}
.nav a:hover { color: var(--vc-tinta); }

.nav a[aria-current="page"] { color: var(--vc-tinta); }
.nav a[aria-current="page"]::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 2px;
	background: var(--vc-naranja);
}

.nav-toggle { display: none; background: none; border: 0; padding: .5rem; cursor: pointer; }

/* --- Hero ---------------------------------------------------------------- */
.hero {
	background: var(--vc-tinta);
	color: var(--vc-hueso);
	padding-block: clamp(3rem, 6vw, 5rem) 0;
	overflow: hidden;
}

.hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	align-items: center;
	gap: var(--vc-s5);
}

/* La columna de texto es el contenedor de referencia: la línea de servicios
   se mide contra ella, no contra la ventana. */
.hero__col { container-type: inline-size; }

.hero h1 { margin-bottom: var(--vc-s2); }

/* Una sola línea, siempre. El tamaño se ajusta al ancho de la columna.
   Medido: la cadena completa ocupa ~24.3em, así que 3.9cqw deja margen de
   sobra incluso si se instala la Neue Haas real, algo más ancha que Inter.
   Todas las separaciones van en em para que escalen con la fuente. */
.hero__servicios {
	display: flex;
	flex-wrap: nowrap;
	white-space: nowrap;
	gap: .5em;
	font-size: clamp(.6rem, 3.9cqw, 1.375rem);
	color: rgba(242, 239, 233, .82);
	margin-bottom: var(--vc-s4);
}
.hero__servicios span:not(:last-child)::after {
	content: "·";
	color: var(--vc-naranja);
	margin-left: .5em;
	font-weight: 700;
}

.hero__acciones { display: flex; flex-wrap: wrap; gap: .75rem; }

.hero__media { position: relative; }
.hero__media img { border-radius: var(--vc-radio); }

/* Badges de confianza bajo el hero */
.confianza {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
	gap: var(--vc-s3) var(--vc-s5);
	border-top: 1px solid var(--vc-linea);
	margin-top: var(--vc-s4);
	padding-block: var(--vc-s4);
}

.confianza__item { display: flex; align-items: start; gap: .875rem; }
.confianza__icono { flex: none; width: 28px; height: 28px; color: var(--vc-tinta); }
.confianza__item strong {
	display: block;
	font-size: var(--vc-t-xs);
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	margin-bottom: .2rem;
}
.confianza__item p { font-size: var(--vc-t-xs); color: var(--vc-gris); line-height: 1.45; }

/* --- Rejilla de servicios ------------------------------------------------ */
.servicios {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
	gap: 1rem;
}

.servicio {
	display: flex;
	flex-direction: column;
	gap: .75rem;
	padding: var(--vc-s3);
	min-height: 230px;
	border: 1px solid var(--vc-linea);
	border-radius: var(--vc-radio);
	background: var(--vc-blanco);
	transition: background var(--vc-trans), border-color var(--vc-trans), transform var(--vc-trans);
}
.servicio:hover { transform: translateY(-3px); border-color: var(--vc-tinta); }
.servicio--activo { background: var(--vc-lavanda); border-color: var(--vc-lavanda); }

.servicio__icono { width: 34px; height: 34px; color: var(--vc-tinta); }
.servicio h3 { font-size: 1.0625rem; }
.servicio p { font-size: var(--vc-t-sm); color: var(--vc-fg-suave); line-height: 1.45; }
.servicio__flecha { margin-top: auto; align-self: end; transition: transform var(--vc-trans); }
.servicio:hover .servicio__flecha { transform: translateX(4px); }

/* --- Paquetes ------------------------------------------------------------ */
.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem;
	padding: .3rem;
	border: 1px solid var(--vc-linea-osc);
	border-radius: var(--vc-radio);
	margin-bottom: var(--vc-s4);
}

.tab {
	flex: 1 1 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .8rem 1rem;
	border: 0;
	border-radius: var(--vc-radio-sm);
	background: none;
	color: rgba(242, 239, 233, .7);
	font-size: var(--vc-t-xs);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	cursor: pointer;
	white-space: nowrap;
	transition: background var(--vc-trans), color var(--vc-trans);
}
.tab:hover { color: var(--vc-hueso); }
.tab[aria-selected="true"] { background: var(--vc-lavanda-10); color: var(--vc-hueso); }
.tab svg { width: 18px; height: 18px; flex: none; }

.planes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
	gap: 1rem;
	align-items: stretch;
}

.plan {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--vc-s2);
	padding: var(--vc-s3);
	border: 1px solid var(--vc-linea-osc);
	border-radius: var(--vc-radio);
	background: var(--vc-tinta-suave);
}

.plan--destacado {
	background: var(--vc-lavanda);
	border-color: var(--vc-lavanda);
	color: var(--vc-tinta);
}
.plan--destacado .plan__lista li { color: rgba(17, 17, 17, .82); }
.plan--destacado .plan__desc { color: rgba(17, 17, 17, .72); }

.plan__cinta {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: .3rem .75rem;
	border-radius: var(--vc-radio-pill);
	background: var(--vc-tinta);
	color: var(--vc-hueso);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	white-space: nowrap;
}

.plan__precio { display: flex; align-items: baseline; gap: .4rem; }
.plan__precio b {
	font-family: var(--vc-display);
	font-size: 2.15rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.03em;
	color: var(--vc-naranja);
}
/* Sobre la lavanda del plan destacado el naranja se apaga y pelea con
   el fondo; ahi el que resalta es la tinta. */
.plan--destacado .plan__precio b,
.producto--destacado .plan__precio b { color: var(--vc-tinta); }

@media (min-width: 980px) {
	/* En escritorio caben cinco tarjetas en fila y cada una mide poco
	   mas de 200px: el mismo numero que en el telefono se come la
	   tarjeta. */
	.plan__precio b { font-size: 1.9rem; }
}
.plan__precio span { font-size: var(--vc-t-xs); opacity: .55; letter-spacing: .02em; }

.plan__desc { font-size: var(--vc-t-sm); color: rgba(242, 239, 233, .68); line-height: 1.45; }

.plan__lista { display: grid; gap: .55rem; }
.plan__lista li {
	display: grid;
	grid-template-columns: 18px 1fr;
	gap: .6rem;
	font-size: var(--vc-t-sm);
	color: rgba(242, 239, 233, .8);
	line-height: 1.4;
}
.plan__lista svg { width: 14px; height: 14px; margin-top: .3rem; color: var(--vc-naranja); }

/* Entrada en cadena de cada caracteristica, la misma idea de las listas
   de las paginas de producto. Se dispara al asomar la tarjeta y al
   cambiar de pestana. */
.plan__lista li.escalon {
	opacity: 0;
	transform: translateX(-10px);
	transition: opacity 420ms ease,
			transform 480ms cubic-bezier(.16, .84, .28, 1);
}
.plan__lista li.escalon.dentro { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.plan__lista li.escalon { opacity: 1; transform: none; transition: none; }
}

.plan .btn { margin-top: auto; }

/* Lo que NO entra en el paquete pesa tanto como lo que si: en letra
   chica se lee despues de contratar, que es cuando estorba. */
.planes__notas {
	display: grid;
	gap: .7rem;
	margin-top: var(--vc-s4);
	padding: var(--vc-s3);
	border: 1px solid var(--vc-lavanda-10);
	border-radius: var(--vc-radio);
	background: var(--vc-tinta-suave);
}
.planes__notas::before {
	content: 'Para que no haya sorpresas';
	font-size: var(--vc-t-xs);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--vc-naranja);
}
.planes__notas p {
	position: relative;
	margin: 0;
	max-width: 74ch;
	padding-left: 1.1rem;
	font-size: var(--vc-t-sm);
	line-height: 1.6;
	color: rgba(242, 239, 233, .8);
}
.planes__notas p::before {
	content: '';
	position: absolute;
	left: 0;
	top: .55em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--vc-naranja);
}

/* Banda de ayuda para elegir */
.ayuda {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--vc-s2);
	margin-top: 1rem;
	padding: var(--vc-s2) var(--vc-s3);
	border: 1px solid var(--vc-linea-osc);
	border-radius: var(--vc-radio);
}
.ayuda p { font-size: var(--vc-t-sm); color: rgba(242, 239, 233, .72); }
.ayuda strong { color: var(--vc-hueso); }

/* --- Proyectos ----------------------------------------------------------- */
.proyectos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
	gap: 1rem;
}

.proyecto {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	border-radius: var(--vc-radio);
	overflow: hidden;
	background: var(--vc-tinta);
	isolation: isolate;
}

.proyecto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 500ms cubic-bezier(.2, .6, .2, 1);
}
.proyecto:hover img { transform: scale(1.04); }

.proyecto::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(17,17,17,.88) 0%, rgba(17,17,17,.25) 45%, transparent 70%);
}

.proyecto__texto {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	z-index: 1;
	padding: var(--vc-s3) var(--vc-s2);
	color: var(--vc-hueso);
}
.proyecto__texto h3 { font-size: 1.375rem; margin-bottom: .25rem; }
.proyecto__meta { font-size: var(--vc-t-xs); color: rgba(242,239,233,.7); letter-spacing: .04em; }

/* --- Stats --------------------------------------------------------------- */
.stats-band {
	display: grid;
	grid-template-columns: minmax(240px, .8fr) minmax(0, 2fr);
	gap: var(--vc-s5);
	align-items: center;
}

.stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
	gap: var(--vc-s3);
}

.stat__num {
	font-family: var(--vc-display);
	font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem);
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1;
	margin-bottom: .35rem;
}
.stat:nth-child(odd) .stat__num { color: var(--vc-naranja); }
.stat:nth-child(even) .stat__num { color: var(--vc-lavanda); }
.stat p { font-size: var(--vc-t-xs); letter-spacing: .1em; text-transform: uppercase; color: rgba(242,239,233,.62); line-height: 1.4; }

/* --- Video --------------------------------------------------------------- */
.video-band {
	display: grid;
	grid-template-columns: minmax(240px, .75fr) minmax(0, 2fr);
	gap: var(--vc-s5);
	align-items: center;
}

.videos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: .75rem; }

.video-card {
	position: relative;
	aspect-ratio: 3 / 4;
	border-radius: var(--vc-radio-sm);
	overflow: hidden;
	background: var(--vc-tinta);
}
.video-card img { width: 100%; height: 100%; object-fit: cover; opacity: .88; }

.video-card__play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
}
.video-card__play span {
	display: grid;
	place-items: center;
	width: 44px; height: 44px;
	border-radius: 50%;
	background: rgba(255,255,255,.92);
	color: var(--vc-tinta);
	transition: transform var(--vc-trans);
}
.video-card:hover .video-card__play span { transform: scale(1.12); }

.video-card__nombre {
	position: absolute;
	left: .625rem; bottom: .625rem;
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--vc-blanco);
	text-shadow: 0 1px 6px rgba(0,0,0,.6);
}

/* --- Proceso ------------------------------------------------------------- */
.proceso { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: var(--vc-s3); }

.paso { display: flex; flex-direction: column; gap: .625rem; }

.paso__icono {
	display: grid;
	place-items: center;
	width: 46px; height: 46px;
	border-radius: 50%;
	background: var(--vc-lavanda);
	color: var(--vc-tinta);
}
.paso__num { font-size: var(--vc-t-xs); font-weight: 700; color: var(--vc-fg-suave); }
.paso h3 { font-size: 1rem; }
.paso p { font-size: var(--vc-t-sm); color: var(--vc-fg-suave); line-height: 1.45; }

/* --- CTA final ----------------------------------------------------------- */
.cta-final {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--vc-s4);
}
.cta-final__acciones { display: flex; flex-wrap: wrap; gap: .75rem; }

/* --- Pie ----------------------------------------------------------------- */
.pie {
	background: var(--vc-tinta);
	color: var(--vc-hueso);
	padding-block: var(--vc-s6) var(--vc-s3);
	border-top: 1px solid var(--vc-linea-osc);
}

/* El min() evita el clasico reventon de grid: sin el, la columna de 220px
   mas la de 140px suman 360px y desbordan la pagina en moviles de 390px. */
.pie__grid {
	display: grid;
	grid-template-columns: minmax(min(220px, 100%), 1.4fr) repeat(auto-fit, minmax(min(140px, 100%), 1fr));
	gap: var(--vc-s4);
	padding-bottom: var(--vc-s4);
}

.pie h4 {
	font-size: var(--vc-t-xs);
	letter-spacing: .12em;
	margin-bottom: .875rem;
	color: rgba(242,239,233,.55);
}
.pie ul { display: grid; gap: .5rem; }
.pie li, .pie p { font-size: var(--vc-t-sm); color: rgba(242,239,233,.72); }
.pie a:hover { color: var(--vc-naranja); }
.pie__contacto li { display: flex; align-items: center; gap: .5rem; overflow-wrap: anywhere; }
.pie__contacto svg { width: 14px; height: 14px; flex: none; opacity: .6; }

.pie__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--vc-s2);
	padding-top: var(--vc-s3);
	border-top: 1px solid var(--vc-linea-osc);
	font-size: var(--vc-t-xs);
	color: rgba(242,239,233,.5);
}
.pie__legal ul { display: flex; flex-wrap: wrap; gap: var(--vc-s3); }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 900px) {
	.hero__grid,
	.stats-band,
	.video-band { grid-template-columns: 1fr; }

	.hero__media { order: -1; }

	.nav { display: none; }
	.nav-toggle { display: block; position: relative; z-index: 70; }

	/* Menu a pantalla completa: tipografia grande, numerada, con el CTA
	   abajo. El desplegable de lineas se veia a plantilla de 2010. */
	.nav--abierto {
		display: flex;
		position: fixed;
		inset: 0;
		flex-direction: column;
		justify-content: center;
		align-items: stretch;
		gap: 0;
		z-index: 65;
		padding: 5.5rem var(--vc-gut) calc(3rem + env(safe-area-inset-bottom));
		justify-content: flex-start;
		background: var(--vc-tinta);
		overflow-y: auto;
		animation: vc-menu-entra 240ms cubic-bezier(.2, .7, .2, 1);
	}

	.nav--abierto a {
		display: flex;
		align-items: baseline;
		gap: .8rem;
		padding-block: .55rem;
		border: 0;
		font-family: var(--vc-display);
		font-size: clamp(1.75rem, 9vw, 2.5rem);
		font-weight: 800;
		letter-spacing: -.02em;
		line-height: 1.05;
		text-transform: uppercase;
		color: var(--vc-hueso);
		opacity: 0;
		animation: vc-menu-item 320ms cubic-bezier(.2, .7, .2, 1) forwards;
	}
	.nav--abierto a::before {
		content: counter(vc-menu, decimal-leading-zero);
		counter-increment: vc-menu;
		font-size: .625rem;
		font-weight: 700;
		letter-spacing: .1em;
		color: var(--vc-naranja);
		flex: none;
	}
	.nav--abierto { counter-reset: vc-menu; }

	.nav--abierto a[aria-current="page"] { color: var(--vc-lavanda); }
	.nav--abierto a[aria-current="page"]::after { content: none; }

	/* Escalonado: entran una tras otra. */
	.nav--abierto a:nth-child(1) { animation-delay: 40ms; }
	.nav--abierto a:nth-child(2) { animation-delay: 80ms; }
	.nav--abierto a:nth-child(3) { animation-delay: 120ms; }
	.nav--abierto a:nth-child(4) { animation-delay: 160ms; }
	.nav--abierto a:nth-child(5) { animation-delay: 200ms; }
	.nav--abierto a:nth-child(6) { animation-delay: 240ms; }

	.nav--abierto .btn {
		/* Con margin-top:auto quedaba pegado al borde y el navegador del
		   telefono le comia la mitad. Ahora va justo tras los enlaces. */
		margin-top: 1.5rem;
		padding: 1.05rem 1.5rem;
		font-size: .8125rem;
		opacity: 1;
		animation: none;
		background: var(--vc-naranja);
		border-color: var(--vc-naranja);
		color: var(--vc-blanco) !important;
	}
	.nav--abierto .btn::before { content: none; }

	@keyframes vc-menu-entra { from { opacity: 0; } to { opacity: 1; } }
	@keyframes vc-menu-item {
		from { opacity: 0; transform: translateY(14px); }
		to   { opacity: 1; transform: none; }
	}

	/* Con el menu abierto no se scrollea el fondo. */
	body.menu-abierto { overflow: hidden; }
}

@media (max-width: 560px) {
	.seccion__head { flex-direction: column; align-items: start; }
	.plan--destacado { order: -1; }
	.cta-final { flex-direction: column; align-items: start; }
	.cta-final__acciones .btn { flex: 1 1 100%; }
}

/* --- Impresión ----------------------------------------------------------- */
@media print {
	.cabecera, .pie, .btn { display: none; }
	body { background: #fff; color: #000; }
}

/* ==========================================================================
   Banda de marcas — "confiaron en nosotros"
   ========================================================================== */
.marcas {
	border-top: 1px solid var(--vc-linea);
	padding-block: var(--vc-s3);
	overflow: hidden;
}

.marcas__titulo {
	font-size: var(--vc-t-xs);
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(17, 17, 17, .42);
	text-align: center;
	margin-bottom: var(--vc-s2);
}

/* La cinta lleva la lista dos veces; se desplaza medio ancho y vuelve a
   empezar, así el bucle no tiene costura. */
.marcas__ventana { position: relative; }
.marcas__ventana::before,
.marcas__ventana::after {
	content: "";
	position: absolute;
	top: 0; bottom: 0;
	width: clamp(40px, 8%, 110px);
	z-index: 2;
	pointer-events: none;
}
.marcas__ventana::before { left: 0;  background: linear-gradient(to right, var(--vc-hueso), transparent); }
.marcas__ventana::after  { right: 0; background: linear-gradient(to left,  var(--vc-hueso), transparent); }

.marcas__pista {
	display: flex;
	align-items: center;
	gap: clamp(1.5rem, 4vw, 3.25rem);
	width: max-content;
	animation: vc-desliza var(--vc-marquesina, 18s) linear infinite;
}
.marcas:hover .marcas__pista { animation-play-state: paused; }

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

.marca-item {
	display: inline-flex;
	align-items: center;
	gap: clamp(1.5rem, 4vw, 3.25rem);
	font-family: var(--vc-display);
	font-size: clamp(1rem, 1.6vw, 1.375rem);
	font-weight: 700;
	letter-spacing: -.01em;
	text-transform: uppercase;
	color: rgba(17, 17, 17, .40);
	white-space: nowrap;
	transition: color var(--vc-trans);
}
.marca-item:hover { color: var(--vc-tinta); }

/* El asterisco de marca hace de separador. */
.marca-item::after {
	content: "";
	width: 13px; height: 13px;
	flex: none;
	background: var(--vc-naranja);
	clip-path: polygon(46% 0,54% 0,54% 38%,87% 19%,91% 26%,58% 45%,91% 64%,87% 71%,54% 52%,54% 90%,46% 90%,46% 52%,13% 71%,9% 64%,42% 45%,9% 26%,13% 19%,46% 38%);
}

@media (prefers-reduced-motion: reduce) {
	.marcas__pista { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
}

/* ==========================================================================
   Portada — dos paneles sobre hueso, al estilo de la referencia
   ========================================================================== */
.portada { background: var(--vc-hueso); }

/* El marco va a sangre: ocupa todo el ancho de la ventana, sin radios ni
   margenes. La carta de texto se alinea por dentro con el resto del sitio. */
.portada__marco {
	position: relative;
	display: flex;
	align-items: stretch;
	width: 100%;
	min-height: clamp(460px, 50vw, 620px);
	padding-block: clamp(1rem, 2.2vw, 2rem);
	overflow: hidden;
	background: var(--vc-tinta);
	isolation: isolate;
}

/* Rejilla interna, atada al ancho de contenido del sitio.
   Sin width propio: el que manda es el min() que trae .wrap. */
.portada__contenido {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
	gap: clamp(.75rem, 2vw, 1.75rem);
	align-items: stretch;
}

/* La foto ocupa TODO el fondo de la portada. */
.portada__fondo {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%; height: 100%;
	object-fit: cover;
}

/* Velo suave: sin él, las pastillas blancas se pierden sobre las zonas
   claras de la foto. */
.portada__marco::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(100deg, rgba(17,17,17,.30) 0%, rgba(17,17,17,.10) 34%, rgba(17,17,17,0) 55%);
	pointer-events: none;
}

/* --- Zona izquierda: solo aloja las pastillas flotantes ------------------ */
.portada__visual {
	position: relative;
	z-index: 2;
}

/* Pastillas y tarjetas que "flotan" sobre la foto. */
.flota {
	position: absolute;
	z-index: 2;
	background: rgba(255, 255, 255, .93);
	color: var(--vc-tinta);
	border-radius: var(--vc-radio-pill);
	padding: .5rem .9rem;
	font-size: var(--vc-t-xs);
	font-weight: 600;
	box-shadow: 0 8px 26px rgba(0, 0, 0, .18);
	backdrop-filter: blur(6px);
	white-space: nowrap;
}

.flota--arriba { top: .9rem; left: .9rem; }

.flota--lugar {
	top: .9rem; left: .9rem;
	transform: translateY(3.1rem);
	display: inline-flex;
	align-items: center;
	gap: .4rem;
}
.flota--lugar::before {
	content: "";
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--vc-naranja);
}

.flota--precio {
	left: .9rem;
	bottom: .9rem;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	background: var(--vc-naranja);
	color: var(--vc-blanco);
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* --- Panel derecho: la carta negra con el titular ------------------------ */
.portada__carta {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: clamp(1rem, 2vw, 1.5rem);
	background: var(--vc-tinta);
	color: var(--vc-hueso);
	border-radius: var(--vc-radio-xl);
	padding: clamp(1.25rem, 2.6vw, 2.25rem);
}

.portada__cabeza {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}
.portada__cabeza img { height: 30px; width: auto; }

/* --- Titular con cada palabra en cápsula -------------------------------- */
.capsulas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(.35rem, .8vw, .6rem);
	margin: 0;
	font-size: clamp(1.5rem, 3.4vw, 2.75rem);
}

.capsula {
	display: inline-flex;
	align-items: center;
	padding: .12em .58em .2em;
	border: 2px solid currentColor;
	border-radius: var(--vc-radio-pill);
	font-family: var(--vc-display);
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.1;
	text-transform: uppercase;
	white-space: nowrap;
}
.capsula--naranja {
	background: var(--vc-naranja);
	border-color: var(--vc-naranja);
	color: var(--vc-blanco);
}

/* Botón circular de flecha, el remate del titular. */
.btn-circulo {
	display: inline-grid;
	place-items: center;
	width: clamp(42px, 3.6vw, 56px);
	aspect-ratio: 1;
	flex: none;
	border: 0;
	border-radius: 50%;
	background: var(--vc-naranja);
	color: var(--vc-blanco);
	cursor: pointer;
	transition: transform var(--vc-trans), background var(--vc-trans);
}
.btn-circulo:hover { transform: rotate(45deg); background: #e04607; }

/* --- Lista de puntos con símbolo ---------------------------------------- */
.puntos { display: grid; gap: .5rem; }
.puntos li {
	display: grid;
	grid-template-columns: 1.15em 1fr;
	gap: .55rem;
	align-items: start;
	font-size: var(--vc-t-sm);
	color: rgba(242, 239, 233, .74);
	line-height: 1.45;
}
.puntos i {
	font-style: normal;
	font-weight: 700;
	color: var(--vc-naranja);
	text-align: center;
}

.portada__acciones {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem 1.25rem;
}

.enlace-texto {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	font-size: var(--vc-t-sm);
	font-weight: 600;
	color: rgba(242, 239, 233, .8);
}
.enlace-texto:hover { color: var(--vc-hueso); }
.enlace-texto svg { transition: transform var(--vc-trans); }
.enlace-texto:hover svg { transform: translateX(4px); }

/* --- Pie de la carta: avatares + frase ----------------------------------- */
.portada__pie {
	display: flex;
	align-items: center;
	gap: .875rem;
	margin-top: auto;
	padding-top: clamp(.75rem, 2vw, 1.25rem);
	border-top: 1px solid var(--vc-linea-osc);
	font-size: var(--vc-t-xs);
	color: rgba(242, 239, 233, .6);
}

.avatares { display: flex; flex: none; }
.avatares span {
	width: 34px; height: 34px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 2px solid var(--vc-tinta);
	background: var(--vc-lavanda);
	color: var(--vc-tinta);
	font-family: var(--vc-display);
	font-size: .625rem;
	font-weight: 800;
	overflow: hidden;
}
.avatares span + span { margin-left: -12px; }
.avatares span:nth-child(2) { background: var(--vc-naranja); color: var(--vc-blanco); }
.avatares span:nth-child(3) { background: var(--vc-hueso); }

/* ==========================================================================
   Tarjetas de proyecto numeradas
   ========================================================================== */
.rejilla-proyectos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(clamp(240px, 27%, 320px), 1fr));
	gap: clamp(.6rem, 1vw, .875rem);
}

.pcard {
	--forma: 22px;
	display: flex;
	flex-direction: column;
	gap: .875rem;
	padding: .8rem;
	border-radius: var(--vc-radio-xl);
	aspect-ratio: 3 / 3.55;
	background: var(--vc-blanco);
	color: var(--vc-tinta);
	transition: transform var(--vc-trans);
}
.pcard:hover { transform: translateY(-5px); }

.pcard--lavanda { background: var(--vc-lavanda); }
.pcard--tinta   { background: var(--vc-tinta); color: var(--vc-hueso); }
.pcard--hueso   { background: #e7e2d8; }

/* El recorte orgánico: cada tarjeta curva una esquina distinta, que es lo
   que da sensación de collage en vez de rejilla. */
.pcard--a { --forma: 18px 18px 120px 18px; }
.pcard--b { --forma: 18px 18px 18px 120px; }
.pcard--c { --forma: 120px 18px 18px 18px; }
.pcard--d { --forma: 18px 120px 18px 18px; }

.pcard__media {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	border-radius: var(--forma);
	overflow: hidden;
	background: var(--vc-tinta);
}
.pcard__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 520ms cubic-bezier(.2, .6, .2, 1);
}
.pcard:hover .pcard__media img { transform: scale(1.06); }

.pcard__etiqueta {
	position: absolute;
	top: .6rem; left: .6rem;
	z-index: 2;
	padding: .32rem .7rem;
	border-radius: var(--vc-radio-pill);
	background: rgba(255, 255, 255, .93);
	color: var(--vc-tinta);
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .06em;
	white-space: nowrap;
}

.pcard__flecha {
	position: absolute;
	top: .6rem; right: .6rem;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 34px; height: 34px;
	border-radius: 50%;
	background: var(--vc-blanco);
	color: var(--vc-tinta);
	transition: transform var(--vc-trans), background var(--vc-trans), color var(--vc-trans);
}
.pcard:hover .pcard__flecha {
	transform: rotate(45deg);
	background: var(--vc-naranja);
	color: var(--vc-blanco);
}

.pcard__pie {
	flex: none;
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: .75rem;
}

.pcard__num {
	display: block;
	font-family: var(--vc-display);
	font-size: .8125rem;
	font-weight: 800;
	opacity: .5;
	margin-bottom: .1rem;
}
.pcard__titulo {
	font-family: var(--vc-display);
	font-size: clamp(1rem, 1.5vw, 1.25rem);
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.05;
	text-transform: uppercase;
}
.pcard__servicio { display: block; font-size: .6875rem; opacity: .62; margin-top: .2rem; }

.pcard__explorar {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .42rem .8rem;
	border-radius: var(--vc-radio-pill);
	background: var(--vc-tinta);
	color: var(--vc-hueso);
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.pcard--tinta .pcard__explorar { background: var(--vc-hueso); color: var(--vc-tinta); }
.pcard__explorar::after {
	content: "";
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--vc-naranja);
}

/* --- Portada y tarjetas en pantallas chicas ------------------------------ */
@media (max-width: 900px) {
	.portada__contenido { grid-template-columns: 1fr; }
	.portada__marco { min-height: 0; }
	/* En vertical la foto va arriba y la carta debajo, como se lee. */
	.portada__visual { min-height: 260px; order: 0; }
	.capsulas { font-size: clamp(1.4rem, 6.4vw, 2.25rem); }
}

@media (max-width: 560px) {
	.pcard { aspect-ratio: 3 / 3.9; }
}

/* ==========================================================================
   Páginas de servicio
   ========================================================================== */

/* --- Migas de pan -------------------------------------------------------- */
.migas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .45rem;
	font-size: var(--vc-t-xs);
	color: rgba(242, 239, 233, .55);
}
.migas a:hover { color: var(--vc-hueso); }
.migas span { opacity: .5; }

/* --- Caso de éxito: foto y texto alternando ------------------------------ */
.caso {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: clamp(1.25rem, 3vw, 3rem);
	align-items: center;
}
.caso + .caso { margin-top: var(--vc-s6); }

/* El segundo caso invierte el orden para que la página no se lea en zigzag
   siempre igual. */
.caso:nth-child(even) .caso__media { order: 2; }

.caso__media {
	position: relative;
	border-radius: var(--vc-radio-xl);
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--vc-tinta);
}
.caso__media img { width: 100%; height: 100%; object-fit: cover; }

.caso__marca {
	position: absolute;
	top: .8rem; left: .8rem;
	padding: .35rem .75rem;
	border-radius: var(--vc-radio-pill);
	background: rgba(255, 255, 255, .94);
	color: var(--vc-tinta);
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.caso h3 { font-size: var(--vc-t-2xl); margin-bottom: .75rem; }
.caso__texto > p { color: var(--vc-fg-suave); margin-bottom: 1.25rem; max-width: 46ch; }

.caso__datos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr));
	gap: 1rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--vc-linea);
}
.caso__datos b {
	display: block;
	font-family: var(--vc-display);
	font-size: 1.375rem;
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--vc-naranja);
}
.caso__datos span {
	font-size: var(--vc-t-xs);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--vc-fg-suave);
}

/* --- Tabla comparativa de paquetes -------------------------------------- */
.tabla-envoltura {
	overflow-x: auto;
	border-radius: var(--vc-radio);
	border: 1px solid var(--vc-linea-osc);
	-webkit-overflow-scrolling: touch;
}

.comparativa {
	width: 100%;
	min-width: 620px;
	border-collapse: collapse;
	font-size: var(--vc-t-sm);
}

.comparativa th,
.comparativa td {
	padding: .85rem 1rem;
	text-align: left;
	border-bottom: 1px solid var(--vc-linea-osc);
	vertical-align: middle;
}

.comparativa thead th {
	position: sticky;
	top: 0;
	background: var(--vc-tinta-suave);
	font-family: var(--vc-display);
	font-size: .8125rem;
	font-weight: 800;
	letter-spacing: -.01em;
	text-transform: uppercase;
	white-space: nowrap;
}
.comparativa thead th:first-child { text-align: left; }

/* La columna del plan recomendado se marca de arriba a abajo. */
.comparativa .destacada {
	background: rgba(201, 182, 255, .10);
	box-shadow: inset 1px 0 0 var(--vc-lavanda), inset -1px 0 0 var(--vc-lavanda);
}
.comparativa thead .destacada { background: rgba(201, 182, 255, .18); color: var(--vc-lavanda); }

.comparativa tbody th {
	font-weight: 500;
	color: rgba(242, 239, 233, .82);
}
.comparativa td { text-align: center; }
.comparativa tbody tr:last-child th,
.comparativa tbody tr:last-child td { border-bottom: 0; }

.si  { color: var(--vc-naranja); font-weight: 700; }
.no  { color: rgba(242, 239, 233, .28); }
.dato { font-weight: 600; color: var(--vc-hueso); }

.grupo th {
	background: rgba(255, 255, 255, .04);
	font-family: var(--vc-display);
	font-size: .6875rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(242, 239, 233, .5);
}

/* --- Preguntas frecuentes ------------------------------------------------ */
.faq { display: grid; gap: .6rem; max-width: 780px; }

.faq details {
	border: 1px solid var(--vc-linea);
	border-radius: 18px;
	background: var(--vc-blanco);
	overflow: hidden;
	transition: border-color var(--vc-trans), box-shadow var(--vc-trans);
}

.faq details:hover { border-color: rgba(17, 17, 17, .22); }

.faq details[open] {
	border-color: var(--vc-naranja);
	box-shadow: 0 10px 30px rgba(17, 17, 17, .09);
}

.faq summary {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.15rem 1.25rem;
	cursor: pointer;
	font-weight: 600;
	line-height: 1.3;
	list-style: none;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
	content: "+";
	flex: none;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	margin-top: -1px;
	border-radius: 50%;
	background: var(--vc-hueso);
	color: var(--vc-tinta);
	font-size: 1.05rem;
	line-height: 1;
	transition: transform var(--vc-trans), background var(--vc-trans), color var(--vc-trans);
}

.faq details[open] summary::after {
	transform: rotate(45deg);
	background: var(--vc-naranja);
	color: var(--vc-blanco);
}

.faq details > p {
	margin: 0;
	padding: 0 1.25rem 1.25rem;
	color: var(--vc-gris);
	font-size: .875rem;
	line-height: 1.6;
	max-width: 62ch;
}

/* En tres columnas las preguntas miden distinto y las tarjetas cerradas
   quedaban desparejas. Se les da un alto minimo comun para que la rejilla
   se lea como rejilla; el texto se alinea arriba y el signo tambien. */
@media (min-width: 900px) {
	.faq {
		grid-template-columns: repeat(3, 1fr);
		gap: .75rem;
		max-width: none;
		align-items: start;
	}

	.faq summary { min-height: 5.75rem; }
}

@media (max-width: 899px) {
	.faq { max-width: 780px; margin-inline: auto; }
}

/* --- Lo que incluye: rejilla de puntos ---------------------------------- */
.incluye {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
	gap: 1rem;
}

.incluye__item {
	padding: 1.15rem;
	border: 1px solid var(--vc-linea);
	border-radius: var(--vc-radio);
	background: var(--vc-blanco);
}
.incluye__item svg { width: 30px; height: 30px; color: var(--vc-naranja); margin-bottom: .7rem; }
.incluye__item h3 { font-size: 1rem; margin-bottom: .35rem; }
.incluye__item p { font-size: var(--vc-t-sm); color: var(--vc-fg-suave); line-height: 1.45; }

@media (max-width: 800px) {
	.caso { grid-template-columns: 1fr; }
	.caso:nth-child(even) .caso__media { order: 0; }
}

/* Texto solo para lectores de pantalla (el <caption> de la comparativa). */
.visually-hidden {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --- Pie: la rejilla se reduce por pasos en pantallas estrechas ---------- */
@media (max-width: 760px) {
	.pie__grid { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }
}

@media (max-width: 520px) {
	.pie__grid { grid-template-columns: 1fr; gap: var(--vc-s3); }
	.pie__legal { flex-direction: column; align-items: flex-start; }
}

/* --- Pastillas dentro de la carta (solo en movil) ------------------------
   Sobre una foto pequena estorban; dentro de la carta se leen mejor y
   dejan la imagen limpia. El traslado del nodo lo hace main.js. */
.portada__pastillas { display: none; }

@media (max-width: 900px) {
	.portada__pastillas {
		display: flex;
		flex-wrap: wrap;
		gap: .4rem;
	}

	.portada__pastillas .flota {
		position: static;
		inset: auto;
		transform: none;
		background: rgba(242, 239, 233, .09);
		border: 1px solid var(--vc-linea-osc);
		color: rgba(242, 239, 233, .85);
		box-shadow: none;
		backdrop-filter: none;
		white-space: normal;
		padding: .42rem .8rem;
	}

	.portada__pastillas .flota--precio {
		background: var(--vc-naranja);
		border-color: var(--vc-naranja);
		color: var(--vc-blanco);
	}
}

/* ==========================================================================
   MÓVIL — reescritura
   En vertical todo se apilaba y la home medía 14.7 pantallas de scroll.
   Aquí las listas largas pasan a carrusel horizontal, la portada se comprime
   a una pantalla y el CTA vive fijo abajo.
   ========================================================================== */
@media (max-width: 900px) {

	/* --- Portada: que quepa el gancho completo sin scroll ---------------- */
	.portada__marco { min-height: 0; padding-block: 0; }
	.portada__contenido { grid-template-columns: 1fr; gap: 0; }

	/* La foto de fondo se ve en esta franja; la carta monta encima. */
	/* Antes 46vw: la foto empujaba la carta fuera de la primera pantalla. */
	.portada__visual { min-height: 30vw; max-height: 150px; order: 0; }

	.portada__carta {
		margin-top: -2.25rem;
		padding: 1.15rem 1.15rem 1.35rem;
		gap: .8rem;
	}

	/* El logo ya está en la cabecera fija: repetirlo aquí solo gasta alto. */
	.portada__cabeza { display: none; }

	.capsulas { font-size: clamp(1.5rem, 7.6vw, 2.1rem); gap: .28rem; }
	.capsula { padding: .08em .45em .14em; border-width: 2px; }
	.btn-circulo { display: none; }

	.portada__pastillas { gap: .3rem; }
	.portada__pastillas .flota { font-size: .6875rem; padding: .3rem .6rem; }

	.puntos { gap: .35rem; }
	.puntos li { font-size: .8125rem; grid-template-columns: 1em 1fr; gap: .45rem; }

	/* Los avatares no aportan en pantalla chica y cuestan 70px. */
	.portada__pie { display: none; }

	.portada__acciones { gap: .5rem; }
	.portada__acciones .btn { flex: 1 1 100%; }
	.enlace-texto { justify-content: center; width: 100%; }

	/* --- Secciones más cortas -------------------------------------------- */
	.seccion { padding-block: clamp(2.5rem, 9vw, 3.5rem); }
	.seccion__head { margin-bottom: 1.25rem; gap: .5rem; }

	/* --- Carrusel: patrón común para las listas largas -------------------
	   Se sale del .wrap a los lados para que las tarjetas lleguen al borde,
	   y deja asomar la siguiente: eso es lo que dice "hay más, desliza". */
	.planes,
	.rejilla-proyectos,
	.videos,
	.servicios {
		display: flex;
		gap: .625rem;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-left: var(--vc-gut);
		margin-inline: calc(var(--vc-gut) * -1);
		padding-inline: var(--vc-gut);
		padding-bottom: .5rem;
		scrollbar-width: none;
	}
	.planes::-webkit-scrollbar,
	.rejilla-proyectos::-webkit-scrollbar,
	.videos::-webkit-scrollbar,
	.servicios::-webkit-scrollbar { display: none; }

	.planes > *,
	.rejilla-proyectos > *,
	.videos > *,
	.servicios > * {
		scroll-snap-align: start;
		flex: 0 0 auto;
	}

	.planes > *          { width: 82%; }
	.rejilla-proyectos > * { width: 66%; }
	.videos > *          { width: 42%; }
	.servicios > *       { width: 58%; min-height: 0; }

	.pcard { aspect-ratio: 3 / 3.7; }
	.servicio { padding: 1rem; gap: .5rem; }
	.servicio h3 { font-size: .9375rem; }
	.servicio p { font-size: .8125rem; }

	/* Pista visual de que se desliza. */
	.seccion__head::after {
		content: "Desliza →";
		align-self: end;
		font-size: .625rem;
		font-weight: 700;
		letter-spacing: .1em;
		text-transform: uppercase;
		color: var(--vc-fg-suave);
		white-space: nowrap;
	}
	.seccion__head:not(.con-desliza)::after { content: none; }

	/* --- Pestañas de paquetes: también en fila deslizable ---------------- */
	.tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		margin-inline: calc(var(--vc-gut) * -1);
		padding-inline: var(--vc-gut);
		border: 0;
		border-radius: 0;
		margin-bottom: 1rem;
	}
	.tabs::-webkit-scrollbar { display: none; }
	.tab { flex: 0 0 auto; border: 1px solid var(--vc-linea-osc); }

	/* --- Bandas de dos columnas ------------------------------------------ */
	.stats { grid-template-columns: 1fr 1fr; gap: 1rem; }
	.proceso { grid-template-columns: 1fr 1fr; gap: 1.25rem 1rem; }
	.confianza {
		grid-template-columns: 1fr;
		gap: .75rem;
		margin-top: var(--vc-s3);
		padding-block: var(--vc-s3);
	}
	.confianza__item { align-items: center; gap: .6rem; }
	.confianza__icono { width: 22px; height: 22px; }
	.confianza__item p { display: none; }   /* el titular ya lo dice todo */

	.ayuda { flex-direction: column; align-items: stretch; text-align: center; }
	.ayuda .btn { width: 100%; }

	/* --- Barra fija de venta ---------------------------------------------
	   Sin esto hay que recorrer media página para volver a un botón. */
	.barra-venta {
		position: fixed;
		inset: auto 0 0 0;
		z-index: 60;
		display: flex;
		align-items: center;
		gap: .5rem;
		padding: .6rem var(--vc-gut) calc(.6rem + env(safe-area-inset-bottom));
		background: rgba(17, 17, 17, .93);
		backdrop-filter: blur(10px);
		border-top: 1px solid var(--vc-linea-osc);
		transform: translateY(110%);
		transition: transform 260ms cubic-bezier(.2, .6, .2, 1);
	}
	.barra-venta.visible { transform: translateY(0); }

	/* Una sola linea: a 109px de alto se comia el 13% de la pantalla. */
	.barra-venta__precio {
		flex: 1 1 auto;
		min-width: 0;
		line-height: 1.1;
		color: var(--vc-hueso);
		overflow: hidden;
	}
	.barra-venta__precio b {
		display: block;
		font-family: var(--vc-display);
		font-size: .8125rem;
		font-weight: 800;
		letter-spacing: -.01em;
		text-transform: uppercase;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.barra-venta__precio span {
		display: block;
		font-size: .5625rem;
		letter-spacing: .08em;
		text-transform: uppercase;
		color: rgba(242, 239, 233, .5);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.barra-venta .btn { flex: 0 0 auto; padding: .6rem .9rem; font-size: .6875rem; }
	.barra-venta .btn--claro { padding: .6rem .7rem; }

	/* Reserva medida contra el alto real de la barra, no a ojo. */
	body { padding-bottom: 76px; }
}

/* En escritorio la barra fija no existe. */
@media (min-width: 901px) {
	.barra-venta { display: none; }
}

/* En pantallas de 360px o menos la barra va muy justa: se aprieta un poco.
   Con el precio real ("Desde $8,900") sobra sitio; aprieta el marcador. */
@media (max-width: 360px) {
	.barra-venta { gap: .4rem; padding-inline: .9rem; }
	.barra-venta__precio b { font-size: .75rem; }
	.barra-venta .btn { padding: .55rem .7rem; font-size: .625rem; }
}

/* ==========================================================================
   Jerarquía de la portada
   Antes todo pesaba igual (pastillas, 4 cápsulas y 3 viñetas, todo en
   mayúscula y grueso) y no había dónde mirar primero. Ahora hay 4 niveles:
   antetítulo callado -> titular -> entrada -> acción.
   ========================================================================== */

/* Nivel 4 — antetítulo: solo ubica, no compite. */
.portada__pastillas {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
	order: -1;
}
.portada__pastillas .flota {
	position: static;
	inset: auto;
	transform: none;
	padding: .28rem .6rem;
	background: transparent;
	border: 1px solid var(--vc-linea-osc);
	box-shadow: none;
	backdrop-filter: none;
	font-size: .625rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgba(242, 239, 233, .55);
	white-space: nowrap;
}

/* Nivel 1 — titular. Las tres primeras cápsulas se apagan para que el ojo
   caiga en la naranja, que es la que remata la promesa. */
.capsula {
	border-width: 1.5px;
	border-color: rgba(242, 239, 233, .38);
	color: rgba(242, 239, 233, .82);
}
.capsula--naranja {
	border-width: 1.5px;
	border-color: var(--vc-naranja);
	color: var(--vc-blanco);
}

/* Nivel 2 — entrada: la frase que de verdad vende. */
.portada__entrada {
	max-width: 46ch;
	font-size: clamp(.9375rem, 1.15vw, 1.0625rem);
	line-height: 1.5;
	color: rgba(242, 239, 233, .72);
}
.portada__entrada b { color: var(--vc-hueso); font-weight: 600; }

/* ==========================================================================
   Banda de marcas con logos reales
   Van todos en un solo tono: en color, unos desaparecían sobre el hueso y
   otros sobre el negro. Monocromo iguala y se ve de estudio.
   ========================================================================== */
/* Equilibrio optico: a igual altura, un logo horizontal (Capibaras, 5.4 de
   proporcion) aplasta a uno compacto (Vanys, 1.3). Con tope de alto Y de
   ancho, los anchos bajan de altura solos y todos pesan parecido. */
.marca-logo {
	max-height: 34px;
	max-width: 150px;
	width: auto;
	height: auto;
	flex: none;
	filter: brightness(0);
	opacity: .38;
	transition: opacity var(--vc-trans);
}
.marca-logo:hover { opacity: .8; }

/* ==========================================================================
   Tira de confianza: horizontal, chica y deslizable
   ========================================================================== */
.confianza {
	display: flex;
	gap: .5rem;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	border-top: 1px solid var(--vc-linea);
	margin-top: var(--vc-s3);
	margin-inline: calc(var(--vc-gut) * -1);
	padding: var(--vc-s3) var(--vc-gut);
}
.confianza::-webkit-scrollbar { display: none; }

.confianza__item {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .45rem .8rem;
	border: 1px solid var(--vc-linea);
	border-radius: var(--vc-radio-pill);
	background: var(--vc-blanco);
	white-space: nowrap;
}
.confianza__icono { width: 17px; height: 17px; color: var(--vc-naranja); }
.confianza__item strong {
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	margin: 0;
}
.confianza__item p { display: none; }   /* el titular ya lo dice */

@media (max-width: 900px) {
	.portada__pastillas { gap: .3rem; }
	.portada__pastillas .flota { font-size: .5625rem; padding: .24rem .55rem; }

	.portada__entrada { font-size: .875rem; line-height: 1.45; }

	.marca-logo { max-height: 24px; max-width: 105px; opacity: .42; }
	.marcas__pista { --vc-marquesina: 11s; }

	.confianza { margin-top: var(--vc-s2); padding-block: var(--vc-s2); }
	.confianza__item { padding: .38rem .7rem; }
	.confianza__item strong { font-size: .625rem; }
	.confianza__icono { width: 15px; height: 15px; }
}

/* ==========================================================================
   AJUSTES — confianza sobre la imagen, lila en la paleta, cinta sin cortar
   ========================================================================== */

/* --- Tira de confianza: ahora flota sobre la foto, arriba ---------------- */
.confianza {
	position: absolute;
	inset: clamp(.9rem, 2vw, 1.4rem) 0 auto 0;
	z-index: 3;
	display: flex;
	gap: .5rem;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	border: 0;
	margin: 0 auto;
	padding: 0;
	/* Se sale del ancho de contenido a los lados para que el ultimo chip
	   asome en el borde y se entienda que hay mas. */
	scroll-padding-left: var(--vc-gut);
}
.confianza::-webkit-scrollbar { display: none; }

.confianza__item {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .42rem .8rem;
	border: 0;
	border-radius: var(--vc-radio-pill);
	background: rgba(255, 255, 255, .93);
	backdrop-filter: blur(8px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, .16);
	color: var(--vc-tinta);
	white-space: nowrap;
	scroll-snap-align: start;
}

.confianza__icono { width: 16px; height: 16px; }
.confianza__item strong {
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	margin: 0;
}
.confianza__item p { display: none; }

/* El lila entra aqui: los tres chips alternan los dos acentos de marca
   en vez de ser todo naranja. */
.confianza__item:nth-child(1) .confianza__icono { color: var(--vc-naranja); }
.confianza__item:nth-child(2) .confianza__icono { color: #7b5cd6; }
.confianza__item:nth-child(3) .confianza__icono { color: var(--vc-naranja); }

/* La carta baja para no quedar debajo de los chips. */
.portada__contenido { padding-top: clamp(2.6rem, 5vw, 3.4rem); }

/* --- Banda de marcas: 50% mas grande ------------------------------------ */
.marca-logo {
	max-height: 51px;
	max-width: 225px;
}

/* En movil el "hover" lo dispara el dedo y la cinta se queda parada.
   Solo se pausa donde hay raton de verdad. */
.marcas:hover .marcas__pista { animation-play-state: running; }
@media (hover: hover) and (pointer: fine) {
	.marcas:hover .marcas__pista { animation-play-state: paused; }
}
.marca-logo { pointer-events: none; }

/* El titulo de la banda, en lila. */
.marcas__titulo { color: #7b5cd6; }

/* --- Mas lila repartido ------------------------------------------------- */
.enlace-texto:hover { color: var(--vc-lavanda); }
.enlace-mas:hover { color: #7b5cd6; }
.pcard__explorar::after { background: var(--vc-lavanda); }
.pcard--lavanda .pcard__explorar::after { background: var(--vc-naranja); }

/* El punto de la pastilla de ubicacion tambien. */
.flota--lugar::before { background: var(--vc-lavanda); }

@media (max-width: 900px) {

	/* --- Carta a sangre: la foto llega al borde y la carta se quedaba
	   metida 20px, por eso se veia descentrada. -------------------------- */
	.portada__contenido {
		width: 100%;
		max-width: none;
		padding-top: 3.1rem;
	}
	.portada__carta {
		border-radius: var(--vc-radio-xl) var(--vc-radio-xl) 0 0;
		margin-top: -1.6rem;
		padding: 1.25rem var(--vc-gut) 1.5rem;
	}

	.confianza { inset: .8rem 0 auto 0; padding-inline: var(--vc-gut); }
	.confianza__item { padding: .36rem .7rem; }
	.confianza__item strong { font-size: .625rem; }
	.confianza__icono { width: 14px; height: 14px; }

	.marca-logo { max-height: 36px; max-width: 158px; }

	/* --- La cinta "MAS ELEGIDO" sobresale 13px del plan y el carrusel,
	   con overflow auto, la cortaba. Se le hace sitio arriba. ------------- */
	.planes { padding-top: 16px; }
}

/* ==========================================================================
   SIMETRIA DE LA PORTADA, LINEA LILA Y SELLO DE MARCA
   ========================================================================== */

/* La foto asoma arriba Y abajo de la carta: antes solo arriba y se veia cojo. */
/* Antes 4.6rem por lado: el bloque medía 958px y la carta ocupaba solo el
   78%, con 105px de aire arriba que se sentían vacíos. */
.portada__contenido {
	padding-top: clamp(1.5rem, 2.6vw, 2.25rem);
	padding-bottom: clamp(1.5rem, 2.6vw, 2.25rem);
}

/* Los chips bajan al centro de la franja superior de foto, no pegados al borde. */
.confianza { inset: clamp(.8rem, 1.6vw, 1.1rem) 0 auto 0; }

/* Linea lila que corta entre la foto y el beige. */
.portada__marco { border-bottom: 3px solid var(--vc-lavanda); }

/* El titulo de la banda vuelve a negro. */
.marcas__titulo { color: rgba(17, 17, 17, .58); }

/* --- Sello con el isotipo junto al titular ------------------------------ */
.titulo-con-marca {
	display: flex;
	align-items: center;
	gap: .875rem;
	min-width: 0;
}

.sello {
	flex: none;
	display: grid;
	place-items: center;
	width: clamp(46px, 5vw, 62px);
	aspect-ratio: 1;
	border-radius: 18px;
	background: var(--vc-blanco);
	border: 1px solid var(--vc-linea);
	box-shadow: 0 6px 18px rgba(17, 17, 17, .10);
}
.sello img { width: 55%; height: auto; }

@media (max-width: 900px) {
	/* La columna de la foto ya esta vacia (pastillas dentro de la carta y
	   chips flotando): en vertical solo desequilibraba, sumando alto arriba. */
	.portada__visual { display: none; }

	/* Ahora las franjas salen del padding y son identicas. */
	.portada__contenido { padding-block: 5.5rem; }

	/* La carta deja de ir pegada al fondo: ahora flota entre las dos franjas. */
	.portada__carta {
		border-radius: var(--vc-radio-xl);
		margin-top: 0;
	}

	/* Centrados en la franja de foto de arriba. */
	.confianza { inset: 1.9rem 0 auto 0; }

	.sello { width: 58px; border-radius: 18px; }
	.titulo-con-marca { gap: .6rem; }
}

/* ==========================================================================
   PIEZAS DE EMBUDO — cupos, testimonios, regalo y cuestionario
   ========================================================================== */

/* --- Aviso de cupos ------------------------------------------------------ */
.cupos {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin-bottom: .7rem;
	padding: .35rem .75rem;
	border: 1px solid rgba(252, 84, 9, .45);
	border-radius: var(--vc-radio-pill);
	background: rgba(252, 84, 9, .12);
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--vc-naranja);
}
.cupos b { font-weight: 800; }
.cupos i {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--vc-naranja);
	animation: vc-latido 1.8s ease-in-out infinite;
}
@keyframes vc-latido { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* --- Testimonios --------------------------------------------------------- */
.testimonios {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
	gap: 1rem;
}

.testimonio {
	display: flex;
	flex-direction: column;
	gap: .75rem;
	margin: 0;
	padding: 1.5rem;
	border: 1px solid var(--vc-linea);
	border-radius: var(--vc-radio-xl);
	background: var(--vc-blanco);
}
.testimonio__estrellas { color: var(--vc-naranja); letter-spacing: .1em; font-size: .875rem; }
.testimonio blockquote {
	margin: 0;
	font-size: var(--vc-t-sm);
	line-height: 1.55;
	color: var(--vc-fg-suave);
}
.testimonio figcaption { margin-top: auto; padding-top: .5rem; border-top: 1px solid var(--vc-linea); }
.testimonio figcaption b { display: block; font-size: var(--vc-t-sm); }
.testimonio figcaption span { font-size: var(--vc-t-xs); color: var(--vc-fg-suave); }

/* --- El regalo ----------------------------------------------------------- */
.regalo {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: center;
}

.regalo__lista { display: grid; gap: .5rem; }
.regalo__lista li {
	display: flex;
	align-items: center;
	gap: .55rem;
	font-size: var(--vc-t-sm);
	color: rgba(17, 17, 17, .78);
}
.regalo__lista svg { flex: none; color: var(--vc-tinta); }

.regalo__form {
	display: grid;
	gap: .65rem;
	padding: clamp(1.25rem, 3vw, 1.75rem);
	border-radius: var(--vc-radio-xl);
	background: var(--vc-tinta);
	color: var(--vc-hueso);
}
.regalo__form label { display: grid; gap: .3rem; }
.regalo__form label span {
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(242, 239, 233, .55);
}
.regalo__form input {
	padding: .8rem .9rem;
	border: 1px solid var(--vc-linea-osc);
	border-radius: var(--vc-radio-sm);
	background: rgba(255, 255, 255, .06);
	color: var(--vc-hueso);
	font-size: var(--vc-t-sm);
}
.regalo__form input::placeholder { color: rgba(242, 239, 233, .35); }
.regalo__form input:focus-visible { outline: 2px solid var(--vc-naranja); outline-offset: 1px; }
.regalo__form input[aria-invalid="true"] { border-color: var(--vc-naranja); }

.regalo__nota { font-size: .625rem; line-height: 1.4; color: rgba(242, 239, 233, .45); }
.regalo__ok, .quiz__ok {
	padding: .7rem .8rem;
	border-radius: var(--vc-radio-sm);
	background: rgba(201, 182, 255, .16);
	color: var(--vc-lavanda);
	font-size: var(--vc-t-sm);
}

/* --- Modal del cuestionario ---------------------------------------------- */
.modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: var(--vc-gut); }
.modal[hidden] { display: none; }
.modal__fondo { position: absolute; inset: 0; background: rgba(17, 17, 17, .72); backdrop-filter: blur(4px); }

.modal__caja {
	position: relative;
	z-index: 1;
	width: min(100%, 520px);
	max-height: 90vh;
	overflow-y: auto;
	padding: clamp(1.5rem, 4vw, 2.25rem);
	border-radius: var(--vc-radio-xl);
	background: var(--vc-tinta);
	color: var(--vc-hueso);
	animation: vc-modal 240ms cubic-bezier(.2, .7, .2, 1);
}
@keyframes vc-modal { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }

.modal__cerrar {
	position: absolute;
	top: .9rem; right: .9rem;
	display: grid;
	place-items: center;
	width: 34px; height: 34px;
	border: 1px solid var(--vc-linea-osc);
	border-radius: 50%;
	background: none;
	color: var(--vc-hueso);
	cursor: pointer;
}
.modal__cerrar:hover { background: rgba(255, 255, 255, .08); }

.quiz__barra { height: 3px; border-radius: 999px; background: rgba(255, 255, 255, .12); margin-bottom: 1.1rem; overflow: hidden; }
.quiz__barra span { display: block; height: 100%; width: 25%; background: var(--vc-naranja); transition: width 260ms cubic-bezier(.2,.6,.2,1); }

.quiz__paso { font-size: .625rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(242,239,233,.45); margin-bottom: .4rem; }
.quiz__titulo { font-size: clamp(1.25rem, 4vw, 1.625rem); margin-bottom: 1.1rem; }

.quiz__opciones { display: grid; gap: .5rem; }
.quiz__opciones button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	width: 100%;
	padding: .95rem 1.1rem;
	border: 1px solid var(--vc-linea-osc);
	border-radius: var(--vc-radio);
	background: rgba(255, 255, 255, .04);
	color: var(--vc-hueso);
	font-size: var(--vc-t-sm);
	font-weight: 500;
	text-align: left;
	cursor: pointer;
	transition: background var(--vc-trans), border-color var(--vc-trans), transform var(--vc-trans);
}
.quiz__opciones button::after { content: "→"; color: var(--vc-naranja); opacity: 0; transition: opacity var(--vc-trans); }
.quiz__opciones button:hover { background: rgba(201, 182, 255, .12); border-color: var(--vc-lavanda); transform: translateX(3px); }
.quiz__opciones button:hover::after { opacity: 1; }

.quiz__recomienda { font-size: .625rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--vc-lavanda); }
.quiz__paquete { font-size: clamp(1.5rem, 5vw, 2rem); color: var(--vc-naranja); margin: .2rem 0 .6rem; }
.quiz__porque { font-size: var(--vc-t-sm); line-height: 1.5; color: rgba(242,239,233,.72); margin-bottom: 1.1rem; }
.quiz__form { display: grid; gap: .55rem; margin-bottom: .25rem; }
.quiz__form input {
	padding: .8rem .9rem;
	border: 1px solid var(--vc-linea-osc);
	border-radius: var(--vc-radio-sm);
	background: rgba(255, 255, 255, .06);
	color: var(--vc-hueso);
	font-size: var(--vc-t-sm);
}
.quiz__form input::placeholder { color: rgba(242,239,233,.35); }

body.modal-abierto { overflow: hidden; }

@media (max-width: 900px) {
	.regalo { grid-template-columns: 1fr; }

	.testimonios {
		display: flex;
		gap: .625rem;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		margin-inline: calc(var(--vc-gut) * -1);
		padding-inline: var(--vc-gut);
		scroll-padding-left: var(--vc-gut);
	}
	.testimonios::-webkit-scrollbar { display: none; }
	.testimonio { flex: 0 0 82%; scroll-snap-align: start; padding: 1.15rem; }

	.cupos { font-size: .625rem; }
	.modal__caja { max-height: 86vh; }
}

/* ==========================================================================
   TARJETAS DE PRODUCTO — se vende el resultado, no el nivel
   ========================================================================== */
.productos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
	gap: 1rem;
	align-items: stretch;
}

.producto {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .7rem;
	padding: var(--vc-s3);
	border: 1px solid var(--vc-linea-osc);
	border-radius: var(--vc-radio-xl);
	background: var(--vc-tinta-suave);
	transition: border-color var(--vc-trans), transform var(--vc-trans);
}
.producto:hover { transform: translateY(-4px); border-color: var(--vc-lavanda); }

.producto--destacado {
	background: var(--vc-lavanda);
	border-color: var(--vc-lavanda);
	color: var(--vc-tinta);
}
.producto--destacado .producto__promesa,
.producto--destacado .producto__para { color: rgba(17, 17, 17, .74); }
.producto--destacado .plan__lista li { color: rgba(17, 17, 17, .82); }
.producto--destacado .plan__lista svg { color: var(--vc-tinta); }

.producto__icono { width: 30px; height: 30px; color: var(--vc-naranja); }
.producto--destacado .producto__icono { color: var(--vc-tinta); }

.producto h3 { font-size: 1.25rem; }
.producto__promesa { font-size: var(--vc-t-sm); line-height: 1.45; color: rgba(242, 239, 233, .7); }

.producto__para {
	font-size: var(--vc-t-xs);
	line-height: 1.45;
	padding: .55rem .7rem;
	border-radius: var(--vc-radio-sm);
	background: rgba(255, 255, 255, .05);
	color: rgba(242, 239, 233, .62);
}
.producto--destacado .producto__para { background: rgba(17, 17, 17, .08); }
.producto__para b { color: inherit; opacity: .9; }

.producto .plan__lista { margin-top: .2rem; }
.producto .btn { margin-top: auto; }

/* ==========================================================================
   PÁGINA DE PRODUCTO
   ========================================================================== */
.portada__marco--producto { background: var(--vc-tinta); }
.portada__marco--producto .portada__contenido { padding-block: clamp(2rem, 4vw, 3rem); }
.portada__marco--producto .portada__visual { display: none; }
.portada__marco--producto .portada__carta {
	grid-column: 1 / -1;
	max-width: 720px;
}

.titulo-producto { font-size: clamp(2rem, 6vw, 3.25rem); }

.precio-grande { display: flex; align-items: baseline; gap: .5rem; }
.precio-grande b {
	font-family: var(--vc-display);
	font-size: clamp(1.75rem, 5vw, 2.5rem);
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--vc-naranja);
}
.precio-grande span { font-size: var(--vc-t-xs); letter-spacing: .06em; text-transform: uppercase; opacity: .6; }


.precio-caja {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
	gap: 1rem;
	margin-bottom: 1rem;
}
.precio-caja > div {
	padding: var(--vc-s3);
	border: 1px solid var(--vc-linea-osc);
	border-radius: var(--vc-radio-xl);
	background: var(--vc-tinta-suave);
}
.precio-caja__anual p { font-size: var(--vc-t-sm); color: rgba(242, 239, 233, .78); line-height: 1.5; }
.precio-caja__nota { font-size: var(--vc-t-xs) !important; color: rgba(242, 239, 233, .45) !important; margin-top: .5rem; }

@media (max-width: 900px) {
	.productos {
		display: flex;
		gap: .625rem;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		margin-inline: calc(var(--vc-gut) * -1);
		padding: 16px var(--vc-gut) .5rem;
		scroll-padding-left: var(--vc-gut);
	}
	.productos::-webkit-scrollbar { display: none; }
	.producto { flex: 0 0 84%; scroll-snap-align: start; }

	.portada__marco--producto .portada__carta { max-width: none; }
}

/* ==========================================================================
   URGENCIA EN LAS PÁGINAS DE PRODUCTO
   ========================================================================== */

/* El mockup ocupa la columna izquierda de la portada del producto. */
.portada__marco--producto .portada__contenido { padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.portada__marco--producto .portada__carta { grid-column: auto; max-width: none; }

.portada__visual--mockup {
	display: grid !important;
	place-items: center;
	padding: .5rem;
}
.portada__visual--mockup img {
	width: 100%;
	max-width: 420px;
	height: auto;
	border-radius: var(--vc-radio);
	filter: drop-shadow(0 24px 48px rgba(0, 0, 0, .45));
}

/* Anclaje de precio: da referencia de contra qué comparar. */
.ancla {
	font-size: var(--vc-t-sm);
	color: var(--vc-lavanda);
	margin-top: -.4rem;
}

/* --- Por qué ahora ------------------------------------------------------- */
.razones {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: var(--vc-s3);
}
.razon { display: flex; flex-direction: column; gap: .4rem; }
.razon__num {
	font-family: var(--vc-display);
	font-size: 1.75rem;
	font-weight: 800;
	color: rgba(17, 17, 17, .22);
	line-height: 1;
}
.razon h3 { font-size: 1.0625rem; }
.razon p { font-size: var(--vc-t-sm); line-height: 1.5; color: rgba(17, 17, 17, .72); }

.garantia {
	display: flex;
	align-items: flex-start;
	gap: .875rem;
	margin-top: var(--vc-s4);
	padding: var(--vc-s3);
	border-radius: var(--vc-radio-xl);
	background: rgba(17, 17, 17, .07);
}
.garantia svg { flex: none; color: var(--vc-tinta); margin-top: .1rem; }
.garantia p { font-size: var(--vc-t-sm); line-height: 1.5; color: rgba(17, 17, 17, .78); }

/* Testimonio pegado al precio: es donde se decide. */
.testimonio--precio {
	max-width: 560px;
	margin-bottom: 1rem;
	background: var(--vc-tinta-suave);
	border-color: var(--vc-linea-osc);
}
.testimonio--precio blockquote { color: rgba(242, 239, 233, .72); }
.testimonio--precio figcaption { border-top-color: var(--vc-linea-osc); }
.testimonio--precio figcaption span { color: rgba(242, 239, 233, .5); }

@media (max-width: 900px) {
	.portada__marco--producto .portada__contenido { grid-template-columns: 1fr; }
	.portada__visual--mockup { display: grid !important; padding: 0 0 1rem; }
	.portada__visual--mockup img { max-width: 240px; }
	.razones { gap: var(--vc-s2); }
	.garantia { margin-top: var(--vc-s3); }
}

/* --- Galería de capturas reales ----------------------------------------- */
.capturas {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: 1.25rem;
	align-items: start;
}

.captura { margin: 0; }
.captura img {
	width: 100%;
	height: auto;
	border-radius: var(--vc-radio);
	box-shadow: 0 14px 34px rgba(17, 17, 17, .16);
}
.captura figcaption {
	margin-top: .7rem;
	font-size: var(--vc-t-sm);
	line-height: 1.45;
	color: var(--vc-fg-suave);
}
.captura figcaption b { display: block; color: var(--vc-tinta); margin-bottom: .15rem; }

/* La del celular es angosta: no debe estirarse como las de escritorio. */
.captura:last-child img { max-width: 240px; }
.captura:last-child { display: flex; flex-direction: column; align-items: center; text-align: center; }

@media (max-width: 900px) {
	.capturas { gap: 1.5rem; }
	.captura:last-child img { max-width: 200px; }
}

/* ==========================================================================
   PRECIO Y MARCA DEL CLIENTE
   (se conservaron al borrar las portadas de producto viejas)
   ========================================================================== */
.precio-grande { justify-content: center; margin-top: .5rem; }
.precio-grande { justify-content: flex-start; margin-top: .3rem; }
.marca-cliente {
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	padding: .7rem 1.1rem .7rem .8rem;
	border-radius: var(--vc-radio-pill);
	background: var(--vc-tinta);
	transition: transform var(--vc-trans);
}
.marca-cliente:hover { transform: translateY(-2px); }
.marca-cliente img { height: 34px; width: auto; }
.marca-cliente span {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--vc-hueso);
	white-space: nowrap;
}
.marca-cliente svg { transition: transform var(--vc-trans); }
.marca-cliente:hover svg { transform: translate(2px, -2px); }
.marca-cliente { width: 100%; justify-content: center; }

/* ==========================================================================
   PROCESO Y MARCA EN MOVIL
   (se rescato de la media query de la portada de producto v2, que se borro)
   ========================================================================== */
@media (max-width: 900px) {
	/* Los pasos se veían apretados y sin jerarquía en vertical. */
	.proceso--pasos { grid-template-columns: 1fr; gap: 1.25rem; }
	.proceso--pasos .paso { padding-left: 3rem; }
	.proceso--pasos .paso__num { width: 34px; height: 34px; font-size: .75rem; }
	.pasos__cta { width: 100%; margin-top: var(--vc-s3); }

	.marca-cliente { width: 100%; justify-content: center; }
}

/* ==========================================================================
   MURO DE DISEÑOS — dos filas en sentidos opuestos
   ========================================================================== */
.muro {
	display: grid;
	gap: .6rem;
	margin-top: var(--vc-s5);
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
	        mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.muro__fila { overflow: hidden; }
.muro__tira {
	display: flex;
	gap: .6rem;
	width: max-content;
	animation: vc-muro 52s linear infinite;
}
.muro__fila--inversa .muro__tira { animation-direction: reverse; animation-duration: 62s; }

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

.muro img {
	width: clamp(120px, 14vw, 190px);
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 12px;
	flex: none;
}

@media (hover: hover) and (pointer: fine) {
	.muro:hover .muro__tira { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
	.muro__tira { animation: none; }
	.muro__fila { overflow-x: auto; scrollbar-width: none; }
}

/* ==========================================================================
   CARRUSEL DE PRODUCTOS EN ESCRITORIO
   Con 5 tarjetas la rejilla saltaba a dos filas y quedaba una suelta.
   ========================================================================== */
.carrusel-marco { position: relative; }

@media (min-width: 901px) {
	.productos {
		display: flex;
		gap: 1rem;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		scrollbar-width: none;
		padding-block: 16px .5rem;
		/* El difuminado del borde deja asomar la siguiente tarjeta. */
		-webkit-mask-image: linear-gradient(to right, #000 92%, transparent);
		        mask-image: linear-gradient(to right, #000 92%, transparent);
	}
	.productos::-webkit-scrollbar { display: none; }
	.productos > .producto { flex: 0 0 calc((100% - 3rem) / 3.4); scroll-snap-align: start; }

	.carrusel-flecha {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		z-index: 4;
		display: grid;
		place-items: center;
		width: 46px; height: 46px;
		border: 1px solid var(--vc-linea-osc);
		border-radius: 50%;
		background: rgba(17, 17, 17, .88);
		backdrop-filter: blur(6px);
		color: var(--vc-hueso);
		cursor: pointer;
		transition: background var(--vc-trans), opacity var(--vc-trans), transform var(--vc-trans);
	}
	.carrusel-flecha:hover { background: var(--vc-naranja); border-color: var(--vc-naranja); }
	.carrusel-flecha[disabled] { opacity: .25; pointer-events: none; }
	.carrusel-flecha--izq { left: -14px; }
	.carrusel-flecha--der { right: -14px; }
	.carrusel-flecha--izq svg { transform: rotate(180deg); }
}

@media (max-width: 900px) {
	.carrusel-flecha { display: none; }
	.muro img { width: clamp(104px, 30vw, 140px); }
	.muro { margin-top: var(--vc-s4); }
}

/* ==========================================================================
   Línea lila bajo la cabecera, para amarrar con la de la portada
   ========================================================================== */
.cabecera { border-bottom: 9px solid var(--vc-lavanda); }

/* ==========================================================================
   TARJETA DE PROYECTO — el marco es la propia foto desenfocada
   Un color fijo en el marco chocaba con fotos de paletas muy distintas.
   Tomando la misma imagen, cada tarjeta combina consigo misma siempre.
   ========================================================================== */
.pcard {
	position: relative;
	overflow: hidden;
	background: var(--vc-tinta);
	color: var(--vc-hueso);
	isolation: isolate;
}

.pcard__fondo {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: blur(26px) saturate(1.5) brightness(.72);
	transform: scale(1.25);
	pointer-events: none;
}
/* Velo para que el texto se lea sobre cualquier foto. */
.pcard::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to top, rgba(17,17,17,.72), rgba(17,17,17,.18));
}
.pcard__media, .pcard__pie { position: relative; z-index: 2; }

.pcard__titulo, .pcard__num, .pcard__servicio { color: var(--vc-hueso); }
.pcard__explorar { background: var(--vc-hueso); color: var(--vc-tinta); }
.pcard__explorar::after { background: var(--vc-naranja); }

/* ==========================================================================
   CARRUSEL DE PROYECTOS
   ========================================================================== */
.rejilla-proyectos {
	display: flex;
	gap: 1rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding-block: .25rem .5rem;
	-webkit-mask-image: linear-gradient(to right, #000 93%, transparent);
	        mask-image: linear-gradient(to right, #000 93%, transparent);
}
.rejilla-proyectos::-webkit-scrollbar { display: none; }
.rejilla-proyectos > .pcard {
	flex: 0 0 calc((100% - 3rem) / 3.35);
	scroll-snap-align: start;
}

/* --- Flechas más afuera de las tarjetas --------------------------------- */
@media (min-width: 901px) {
	.carrusel-marco { position: relative; }
	.carrusel-flecha--izq { left: -26px; }
	.carrusel-flecha--der { right: -26px; }
	.carrusel-flecha {
		width: 50px; height: 50px;
		background: var(--vc-hueso);
		border-color: var(--vc-linea);
		color: var(--vc-tinta);
		box-shadow: 0 6px 20px rgba(17,17,17,.18);
	}
	.vc-oscuro .carrusel-flecha {
		background: var(--vc-tinta-suave);
		border-color: var(--vc-linea-osc);
		color: var(--vc-hueso);
	}
	/* Al llegar al final vuelve al inicio, por eso ya no se apaga. */
	.carrusel-flecha[disabled] { opacity: 1; pointer-events: auto; }
	.carrusel-flecha--der.al-final svg { transform: rotate(180deg); }
	.carrusel-flecha--izq.al-inicio svg { transform: rotate(0deg); }
}

@media (max-width: 900px) {
	.rejilla-proyectos > .pcard { flex: 0 0 66%; }
}

/* El <picture> tiene que comportarse igual que la imagen que envuelve. */
.portada__fondo-marco { position: absolute; inset: 0; z-index: 0; display: block; }

@media (max-width: 900px) {
	/* La foto se veía en dos franjas de 88px: no se distinguía nada.
	   Arriba se le da altura real y abajo queda un filo de remate. */
	.portada__contenido { padding-top: 300px; padding-bottom: 3.5rem; }
	.portada__fondo { object-position: center 26%; }
	.confianza { inset: 1.9rem 0 auto 0; }
}

/* ==========================================================================
   VIDEOS — uno se reproduce y los demás esperan al lado
   ========================================================================== */
.videoteca {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: clamp(1.25rem, 3vw, 2.5rem);
	align-items: center;
}

.videoteca__principal {
	position: relative;
	border-radius: var(--vc-radio-xl);
	overflow: hidden;
	background: var(--vc-tinta);
	aspect-ratio: 9 / 16;
	max-height: 68vh;
	margin-inline: auto;
	width: 100%;
	max-width: 380px;
}
.videoteca__principal video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.videoteca__pie {
	position: absolute;
	inset: auto 0 0 0;
	padding: 2.5rem .9rem .9rem;
	background: linear-gradient(to top, rgba(17,17,17,.9), transparent);
	color: var(--vc-hueso);
	pointer-events: none;
}
.videoteca__pie b { display: block; font-family: var(--vc-display); font-size: 1rem; text-transform: uppercase; letter-spacing: -.01em; }
.videoteca__pie span { font-size: .6875rem; opacity: .7; letter-spacing: .06em; text-transform: uppercase; }

/* Barrita de avance del que se está reproduciendo */
.videoteca__avance {
	position: absolute;
	inset: auto 0 0 0;
	height: 3px;
	background: rgba(255,255,255,.2);
	z-index: 2;
}
.videoteca__avance span { display: block; height: 100%; width: 0; background: var(--vc-naranja); }

.videoteca__lista { position: relative; }

.videoteca__pista {
	display: flex;
	gap: .6rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding-block: .25rem;
}
.videoteca__pista::-webkit-scrollbar { display: none; }

.mini {
	position: relative;
	flex: 0 0 30%;
	scroll-snap-align: start;
	border: 0;
	padding: 0;
	border-radius: var(--vc-radio);
	overflow: hidden;
	background: var(--vc-tinta);
	aspect-ratio: 9 / 16;
	cursor: pointer;
	opacity: .55;
	transition: opacity var(--vc-trans), transform var(--vc-trans);
}
.mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mini:hover { opacity: .85; transform: translateY(-3px); }
.mini[aria-current="true"] { opacity: 1; box-shadow: inset 0 0 0 3px var(--vc-naranja); }

.mini__nombre {
	position: absolute;
	inset: auto 0 0 0;
	padding: 1.5rem .5rem .5rem;
	background: linear-gradient(to top, rgba(17,17,17,.85), transparent);
	color: var(--vc-hueso);
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-align: left;
}

@media (max-width: 900px) {
	.videoteca { grid-template-columns: 1fr; gap: 1rem; }
	.videoteca__principal { max-width: 100%; max-height: none; }
	.mini { flex: 0 0 26%; }
}

/* --- Control de sonido de la videoteca ----------------------------------
   Los videos arrancan solos, y para eso el navegador exige silencio. El
   sonido solo puede activarlo la persona, con un gesto. De ahí el botón. */
.video-sonido {
	position: absolute;
	top: .75rem; right: .75rem;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .5rem .8rem;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: var(--vc-radio-pill);
	background: rgba(17, 17, 17, .6);
	backdrop-filter: blur(8px);
	color: var(--vc-hueso);
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background var(--vc-trans), border-color var(--vc-trans);
}
.video-sonido:hover { background: rgba(17, 17, 17, .82); }
.video-sonido[aria-pressed="true"] {
	background: var(--vc-naranja);
	border-color: var(--vc-naranja);
	color: var(--vc-blanco);
}
/* Con el sonido puesto el texto sobra: basta el icono. */
.video-sonido[aria-pressed="true"] span { display: none; }

/* Un latido suave al principio, para que se note que se puede activar. */
@media (prefers-reduced-motion: no-preference) {
	.video-sonido[aria-pressed="false"] { animation: vc-recuerda 3.2s ease-in-out 2s 3; }
}
@keyframes vc-recuerda {
	0%, 100% { transform: none; }
	6%  { transform: scale(1.06); }
	12% { transform: none; }
}

@media (max-width: 560px) {
	.video-sonido span { display: none; }
	.video-sonido { padding: .55rem; }
}

/* --- Videos horizontales en la videoteca --------------------------------
   El recap es 16:9 y los demás verticales: el marco se adapta al que toca
   en vez de recortar a la fuerza. */
.videoteca__principal--h {
	aspect-ratio: 16 / 9;
	max-width: 640px;
	max-height: none;
}
.videoteca__principal--h video { object-fit: contain; background: #000; }

.mini--ancha { aspect-ratio: 16 / 9; flex: 0 0 46%; align-self: center; }

@media (max-width: 900px) {
	.mini--ancha { flex: 0 0 42%; }
}

/* --- Cabecera de la lista de videos: contador y flechas ----------------- */
.videoteca__cabeza {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: .75rem;
}
.videoteca__contador {
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(17, 17, 17, .55);
}
.videoteca__contador b { color: var(--vc-tinta); font-size: 1rem; }

.videoteca__flechas { display: flex; gap: .5rem; }
.videoteca__flechas .carrusel-flecha {
	position: static;
	transform: none;
	width: 42px; height: 42px;
	background: var(--vc-tinta);
	border-color: var(--vc-tinta);
	color: var(--vc-hueso);
	display: grid;
}
.videoteca__flechas .carrusel-flecha:hover { background: var(--vc-naranja); border-color: var(--vc-naranja); }
.videoteca__flechas .carrusel-flecha:first-child svg { transform: rotate(180deg); }

/* La tira ya no necesita flechas propias: se recorre sola al cambiar. */
.videoteca__pista { scroll-padding-inline: 0; }

/* ==========================================================================
   VISOR DE VIDEO A PANTALLA COMPLETA
   En el celular un reproductor chico reproduciéndose solo se ve pobre y no
   puede llevar sonido. Con un toque se abre grande, y ahí sí hay audio:
   el navegador lo permite porque hubo un gesto de la persona.
   ========================================================================== */
.visor {
	position: fixed;
	inset: 0;
	z-index: 90;
	display: grid;
	place-items: center;
	padding: clamp(.5rem, 3vw, 2rem);
}
.visor[hidden] { display: none; }

.visor__fondo {
	position: absolute;
	inset: 0;
	border: 0;
	background: rgba(9, 9, 10, .93);
	backdrop-filter: blur(6px);
	cursor: pointer;
}

.visor__caja {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	width: min(100%, 480px);
	max-height: 92vh;
	border-radius: var(--vc-radio-xl);
	overflow: hidden;
	background: #000;
	animation: vc-visor 240ms cubic-bezier(.2, .7, .2, 1);
}
@keyframes vc-visor { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

.visor__caja video {
	width: 100%;
	max-height: 78vh;
	display: block;
	background: #000;
}
/* Los horizontales no deben estirarse a lo alto. */
.visor--horizontal .visor__caja { width: min(100%, 900px); }

/* Visor de opiniones: la captura se muestra completa y, si es muy ancha,
   se agranda y se puede arrastrar de lado para leerla. */
.visor-op__caja {
	position: relative;
	width: min(100%, 900px);
	max-height: 88vh;
	display: flex;
	flex-direction: column;
	background: var(--vc-tinta);
	border-radius: var(--vc-radio-xl);
	overflow: hidden;
}

.visor-op__lienzo {
	flex: 1 1 auto;
	overflow: auto;
	overscroll-behavior: contain;
	background: var(--vc-blanco);
	display: flex;
	align-items: center;
	-webkit-overflow-scrolling: touch;
}

.visor-op__lienzo img {
	display: block;
	width: 100%;          /* JS lo sube cuando la captura es muy ancha */
	max-width: none;
	height: auto;
	margin: auto;
}

.visor-op__pista {
	position: absolute;
	left: 50%;
	top: 1rem;
	transform: translateX(-50%);
	background: rgba(17,17,17,.82);
	color: var(--vc-blanco);
	font-size: .6875rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: .35rem .7rem;
	border-radius: 999px;
	pointer-events: none;
	transition: opacity 400ms ease;
}

.visor__cerrar {
	position: absolute;
	top: .7rem; right: .7rem;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 40px; height: 40px;
	border: 0;
	border-radius: 50%;
	background: rgba(17, 17, 17, .7);
	backdrop-filter: blur(6px);
	color: var(--vc-hueso);
	cursor: pointer;
}
.visor__cerrar:hover { background: var(--vc-naranja); }

.visor__pie {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .9rem 1rem;
	background: var(--vc-tinta);
	color: var(--vc-hueso);
}
.visor__pie b {
	display: block;
	font-family: var(--vc-display);
	font-size: .9375rem;
	text-transform: uppercase;
	letter-spacing: -.01em;
}
.visor__pie span { font-size: .6875rem; opacity: .6; letter-spacing: .06em; text-transform: uppercase; }

.visor__nav { display: flex; align-items: center; gap: .5rem; flex: none; }
.visor__nav button {
	display: grid;
	place-items: center;
	width: 36px; height: 36px;
	border: 1px solid var(--vc-linea-osc);
	border-radius: 50%;
	background: none;
	color: var(--vc-hueso);
	cursor: pointer;
}
.visor__nav button:hover { background: var(--vc-naranja); border-color: var(--vc-naranja); }
.visor__nav button:first-child svg { transform: rotate(180deg); }
.visor__nav span { font-size: .6875rem; font-weight: 700; opacity: .6; min-width: 3ch; text-align: center; }

body.visor-abierto { overflow: hidden; }

/* ==========================================================================
   VIDEOTECA EN MÓVIL — fila horizontal, sin reproductor chico
   ========================================================================== */
@media (max-width: 900px) {
	/* El reproductor grande sale: en pantalla chica no aportaba y no podía
	   llevar sonido. Se queda la fila y el visor a pantalla completa. */
	.videoteca__principal { display: none; }
	.videoteca { display: block; }

	.videoteca__cabeza { margin-bottom: .875rem; }
	.videoteca__flechas { display: none; }

	.videoteca__pista {
		gap: .625rem;
		margin-inline: calc(var(--vc-gut) * -1);
		padding-inline: var(--vc-gut);
		scroll-padding-left: var(--vc-gut);
	}

	.mini {
		flex: 0 0 58%;
		opacity: 1;
		border-radius: var(--vc-radio-xl);
	}
	.mini--ancha { flex: 0 0 82%; }
	.mini[aria-current="true"] { box-shadow: none; }

	/* Botón de reproducir encima: deja claro que hay que tocar. */
	.mini::after {
		content: "";
		position: absolute;
		top: 50%; left: 50%;
		width: 54px; height: 54px;
		transform: translate(-50%, -50%);
		border-radius: 50%;
		background: rgba(255, 255, 255, .92)
			url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23111'%3E%3Cpath d='M9 6.5 18 12l-9 5.5z'/%3E%3C/svg%3E") center / 22px no-repeat;
		box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
	}
	.mini:active::after { transform: translate(-50%, -50%) scale(.92); }

	.mini__nombre { font-size: .6875rem; padding: 2rem .7rem .7rem; }
}


/* La sección de video va en blanco, con una franja lila gruesa abajo que
   la separa del negro que sigue. */
#video {
	background: var(--vc-hueso);
	border-bottom: 16px solid var(--vc-lavanda);
	overflow-x: hidden;
	overflow-x: clip;
}


/* El reproductor grande invita a abrirse a pantalla completa. */
.videoteca__principal { cursor: zoom-in; }
.videoteca__ampliar {
	position: absolute;
	bottom: .75rem; right: .75rem;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 38px; height: 38px;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 50%;
	background: rgba(17, 17, 17, .6);
	backdrop-filter: blur(8px);
	color: var(--vc-hueso);
	cursor: pointer;
	transition: background var(--vc-trans);
}
.videoteca__ampliar:hover { background: var(--vc-naranja); border-color: var(--vc-naranja); }
@media (max-width: 900px) { .videoteca__ampliar { display: none; } }

/* --- La foto del hero, completa en el celular ---------------------------
   Con object-fit:cover en una franja fija siempre se recortaba. En vertical
   la foto sale del fondo y pasa a ser un bloque normal, con su proporción
   real: se ve entera y la carta queda debajo. */
@media (max-width: 900px) {
	.portada__fondo-marco {
		position: relative;
		inset: auto;
		display: block;
		width: 100%;
	}
	.portada__fondo {
		position: relative;
		width: 100%;
		height: auto;
		object-fit: contain;
		object-position: center;
	}
	.portada__marco { display: block; padding-block: 0; }
	.portada__contenido { padding-top: 0; padding-bottom: 0; }
	.portada__carta { border-radius: 0; margin-top: 0; }

	/* Los chips flotan sobre la foto, que ahora tiene altura propia. */
	.confianza { inset: 1rem 0 auto 0; }
}

/* ==========================================================================
   OPINIONES — dos filas que corren solas, en sentidos opuestos
   Van chicas a propósito: se leen de un vistazo y la cantidad es el mensaje.
   ========================================================================== */
.opiniones {
	display: grid;
	gap: .5rem;
	margin-top: var(--vc-s4);
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
	        mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}
.opiniones__fila { overflow: hidden; }

.opiniones__tira {
	display: flex;
	gap: .5rem;
	width: max-content;
	animation: vc-opiniones 46s linear infinite;
}
.opiniones__fila--inversa .opiniones__tira { animation-direction: reverse; animation-duration: 54s; }

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

.opiniones img {
	height: clamp(120px, 13vw, 165px);
	width: auto;
	max-width: none;
	flex: none;
	border-radius: 10px;
	background: #0b141a;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
}

@media (hover: hover) and (pointer: fine) {
	.opiniones:hover .opiniones__tira { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
	.opiniones__tira { animation: none; }
	.opiniones__fila { overflow-x: auto; scrollbar-width: none; }
}

@media (max-width: 900px) {
	.opiniones img { height: 108px; }
	.opiniones__tira { animation-duration: 24s; }
	.opiniones__fila--inversa .opiniones__tira { animation-duration: 29s; }
}

/* --- Opinión ampliada al tocarla ----------------------------------------
   Crece de alto y, como el ancho va en auto, empuja a las vecinas dentro de
   su fila. La fila se pausa mientras tanto y sigue sola a los 4 segundos. */
.opiniones img {
	cursor: zoom-in;
	transition: height 340ms cubic-bezier(.2, .7, .2, 1),
	            box-shadow var(--vc-trans);
}
.opiniones img.ampliada {
	height: clamp(280px, 34vw, 430px);
	cursor: zoom-out;
	box-shadow: 0 18px 46px rgba(0, 0, 0, .55);
	position: relative;
	z-index: 2;
}
.opiniones img:focus-visible { outline: 3px solid var(--vc-naranja); outline-offset: 3px; }

.opiniones__fila--quieta .opiniones__tira { animation-play-state: paused; }

@media (max-width: 900px) {
	.opiniones img.ampliada { height: 300px; }
}

/* ==========================================================================
   ETIQUETA DE CURSOR "¡Dale click!" (solo con ratón)
   ========================================================================== */
.cursor-etiqueta {
	position: fixed;
	top: 0; left: 0;
	z-index: 70;
	display: none;
	padding: .45rem .8rem;
	border-radius: var(--vc-radio-pill);
	background: var(--vc-naranja);
	color: var(--vc-blanco);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	white-space: nowrap;
	pointer-events: none;
	box-shadow: 0 6px 18px rgba(252, 84, 9, .45);
	transform: translate(-50%, -160%);
}
@media (hover: hover) and (pointer: fine) {
	.cursor-etiqueta.visible { display: block; }
	/* Se esconde el cursor del sistema para que mande la etiqueta. */
	.opiniones img { cursor: none; }
	.opiniones img.ampliada { cursor: none; }
}

/* ==========================================================================
   OPINIONES EN MÓVIL — una a la vez, grande, cambiando sola
   Dos filas chiquitas en un teléfono no se leían. Aquí se ve una completa
   y va rotando.
   ========================================================================== */
@media (max-width: 900px) {
	/* Una a la vez, pero asomando la anterior y la siguiente: se ve que hay
	   mas y se puede deslizar o tocar. La tarjeta se limita por el ANCHO,
	   nunca por el alto, para que la captura entre completa y no se corte. */
	.opiniones {
		display: flex;
		align-items: center;
		gap: .8rem;
		height: auto;
		min-height: 74vw;
		margin-top: var(--vc-s3);
		padding: .5rem 15vw;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		scrollbar-width: none;
		-webkit-mask-image: none;
		        mask-image: none;
	}
	.opiniones::-webkit-scrollbar { display: none; }

	/* Las dos filas del escritorio se aplanan en una sola tira */
	.opiniones__fila,
	.opiniones__tira { display: contents; animation: none; }

	.opiniones img {
		position: static;
		flex: 0 0 70vw;
		width: 70vw;
		height: auto;
		max-width: none;
		max-height: 74vw;
		object-fit: contain;
		/* A .4 las de los lados parecian rotas, no "en segundo plano". */
		opacity: .78;
		visibility: visible;
		transform: scale(.96);
		transform-origin: center;
		scroll-snap-align: center;
		transition: opacity 320ms ease, transform 320ms ease;
		cursor: pointer;
	}
	.opiniones img.activa { opacity: 1; transform: scale(1); }

	/* Las copias solo existen para el carrusel infinito del escritorio */
	.opiniones img[aria-hidden="true"] { display: none; }
	.opiniones img.ampliada { transform: scale(1); }

	.opiniones__puntos {
		display: flex;
		justify-content: center;
		gap: .35rem;
		margin-top: .875rem;
	}
	.opiniones__puntos button {
		width: 7px; height: 7px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: rgba(242, 239, 233, .28);
		cursor: pointer;
		transition: background var(--vc-trans), width var(--vc-trans);
	}
	.opiniones__puntos button[aria-current="true"] {
		width: 20px;
		border-radius: 999px;
		background: var(--vc-naranja);
	}
}

@media (min-width: 901px) {
	.opiniones__puntos { display: none; }
}

/* La franja usa 100vw, que en escritorio incluye el ancho de la barra de
   scroll y provocaba desbordamiento lateral. Se recorta en la sección:
   clip no crea contenedor de scroll, hidden queda de respaldo. */
#video { overflow-x: hidden; overflow-x: clip; }

/* ==========================================================================
   "IT'S ME!" — cartel pixel art sobre su cabeza en la foto del hero
   ========================================================================== */
.soy-yo {
	position: absolute;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .35rem;
	pointer-events: none;
	/* Aparece de golpe: steps() en vez de una curva suave, para que se sienta
	   de videojuego y no un fundido. */
	opacity: 0;
	animation: soy-yo-entra 260ms steps(4, end) 1.4s forwards,
	           soy-yo-flota 2.6s steps(2, end) 1.7s infinite;

	/* Escritorio: la foto va recortada a los lados, así que su cabeza
	   cae cerca del 36% del ancho del bloque. */
	left: 36%;
	top: 8%;
	transform: translateX(-50%);
}

.soy-yo__globo {
	font-family: "Press Start 2P", "Courier New", monospace;
	font-size: clamp(9px, 1vw, 13px);
	line-height: 1;
	letter-spacing: 0;
	padding: .7em .8em .6em;
	background: var(--vc-naranja);
	color: #fff;
	white-space: nowrap;
	/* Borde de píxeles: cuatro sombras cuadradas, sin redondear nada. */
	box-shadow:
		0 -4px 0 0 #111, 0 4px 0 0 #111,
		-4px 0 0 0 #111, 4px 0 0 0 #111,
		0 8px 0 0 rgba(17, 17, 17, .25);
	image-rendering: pixelated;
}

.soy-yo__flecha {
	width: clamp(16px, 1.6vw, 22px);
	height: auto;
	margin-top: .45rem;
	filter: drop-shadow(0 2px 0 rgba(17, 17, 17, .3));
}

@keyframes soy-yo-entra {
	from { opacity: 0; transform: translateX(-50%) translateY(-8px) scale(.6); }
	to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes soy-yo-flota {
	0%, 100% { margin-top: 0; }
	50%      { margin-top: 6px; }
}

@media (prefers-reduced-motion: reduce) {
	.soy-yo { opacity: 1; animation: none; transform: translateX(-50%); }
}

@media (max-width: 900px) {
	/* En vertical la foto se ve completa: su cabeza queda al 72% del ancho. */
	.soy-yo { left: 71%; top: 2%; }
	.soy-yo__globo { font-size: 10px; box-shadow: 0 -3px 0 0 #111, 0 3px 0 0 #111, -3px 0 0 0 #111, 3px 0 0 0 #111; }
	.soy-yo__flecha { width: 16px; }
}

/* ==========================================================================
   PORTADA COMPACTA — que la banda de marcas entre en la primera pantalla
   ========================================================================== */
.portada__carta { gap: clamp(.6rem, 1.2vw, .9rem); padding: clamp(1.1rem, 2vw, 1.6rem); }
.portada__cabeza img { height: 26px; }
.capsulas { font-size: clamp(1.4rem, 2.6vw, 2.1rem); gap: clamp(.3rem, .6vw, .45rem); }
.portada__entrada { font-size: clamp(.875rem, 1vw, .9375rem); line-height: 1.45; }
.portada__pie { padding-top: .7rem; }
.btn-circulo { width: clamp(38px, 3vw, 46px); }

/* ==========================================================================
   TITULAR ANIMADO — las cápsulas se encienden y luego dialogan
   ========================================================================== */
.titular { display: grid; }
/* Centrado vertical: el alto de la celda lo fija el titular de cuatro
   cápsulas, así que el diálogo (que son dos) quedaba pegado arriba
   con un hueco debajo. */
.titular > * { grid-area: 1 / 1; align-content: center; }

/* Cada cápsula se enciende por turnos. */
.capsula {
	transition: background-color 260ms ease, border-color 260ms ease, color 260ms ease;
}
.capsula.encendida {
	background: var(--vc-naranja);
	border-color: var(--vc-naranja);
	color: var(--vc-blanco);
}

/* El diálogo comparte celda con las cápsulas: se cruzan sin saltos. */
.capsulas--dialogo {
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 320ms ease;
}
.capsulas--dialogo.visible { opacity: 1; visibility: visible; }
#capsulas-base { transition: opacity 320ms ease; }
#capsulas-base.oculto { opacity: 0; visibility: hidden; }

.capsula--pregunta { border-color: rgba(242, 239, 233, .38); color: rgba(242, 239, 233, .82); }
.capsula--respuesta {
	background: var(--vc-naranja);
	border-color: var(--vc-naranja);
	color: var(--vc-blanco);
}
.capsula--pregunta:empty, .capsula--respuesta:empty { display: none; }

@media (prefers-reduced-motion: reduce) {
	.capsulas--dialogo { display: none; }
	#capsulas-base { opacity: 1 !important; visibility: visible !important; }
}

@media (max-width: 900px) {
	.capsulas { font-size: clamp(1.35rem, 6.4vw, 1.9rem); }
}

/* --- Titular: correcciones ----------------------------------------------
   "Resultados." ya no nace naranja; la enciende la animación como a las
   demás. Solo si alguien tiene animaciones reducidas se pinta fija, para
   que el titular no pierda su acento. */
@media (prefers-reduced-motion: reduce) {
	.capsula--final {
		background: var(--vc-naranja);
		border-color: var(--vc-naranja);
		color: var(--vc-blanco);
	}
}

/* Las preguntas son largas y con nowrap se salían de la carta.
   Aquí sí pueden partirse en dos renglones. */
.capsulas--dialogo {
	max-width: 100%;
	align-items: flex-start;
	align-content: center;
}
.capsulas--dialogo .capsula {
	white-space: normal;
	max-width: 100%;
	text-wrap: balance;
	line-height: 1.08;
	padding: .18em .5em .24em;
}
.capsula--pregunta { font-size: .82em; }

/* ==========================================================================
   ALCANCE — modulos numerados, cifras duras y lo que no entra
   ========================================================================== */
.modulos {
	list-style: none;
	margin: var(--vc-s4) 0 0;
	padding: 0;
	display: grid;
	gap: .6rem;
}

@media (min-width: 900px) {
	.modulos { grid-template-columns: 1fr 1fr; gap: .6rem 1.5rem; }
}

.modulo {
	display: flex;
	gap: 1rem;
	align-items: baseline;
	padding: 1rem 1.15rem;
	background: var(--vc-blanco);
	border-radius: 16px;
}

.modulo__n {
	flex: none;
	font-family: var(--vc-display);
	font-size: 1.05rem;
	font-weight: 800;
	color: var(--vc-naranja);
	font-variant-numeric: tabular-nums;
}

.modulo__txt h3 {
	margin: 0 0 .2rem;
	font-size: 1rem;
	line-height: 1.2;
}

.modulo__txt p {
	margin: 0;
	font-size: .875rem;
	color: var(--vc-gris);
	line-height: 1.45;
}

/* --- Cifras: los limites duros, de un vistazo --------------------------- */
.cifras {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 1px;
	margin-top: var(--vc-s3);
	background: var(--vc-tinta);
	border-radius: 18px;
	overflow: hidden;
}

.cifra {
	background: var(--vc-tinta);
	color: var(--vc-hueso);
	padding: 1.1rem 1rem;
	text-align: center;
}

.cifra b {
	display: block;
	font-family: var(--vc-display);
	font-size: 1.15rem;
	line-height: 1.1;
	color: var(--vc-lavanda);
	text-wrap: balance;
}

.cifra span {
	display: block;
	margin-top: .35rem;
	font-size: .72rem;
	letter-spacing: .05em;
	text-transform: uppercase;
	opacity: .72;
}

/* --- Lo que no entra ---------------------------------------------------- */
.fuera {
	margin-top: var(--vc-s3);
	padding: 1.5rem;
	background: var(--vc-blanco);
	border-radius: 20px;
	/* borde naranja al canto: se lee como advertencia sin gritar */
	border-left: 6px solid var(--vc-naranja);
}

.fuera h3 {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 0;
	font-size: 1.05rem;
}

.fuera h3 svg { color: var(--vc-naranja); flex: none; }

.fuera__pie {
	margin: .4rem 0 1.1rem;
	font-size: .875rem;
	color: var(--vc-gris);
	max-width: 62ch;
}

.fuera ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .7rem;
}

@media (min-width: 760px) {
	.fuera ul { grid-template-columns: 1fr 1fr; gap: .7rem 1.75rem; }
}

.fuera li {
	display: flex;
	gap: .65rem;
	align-items: baseline;
}

.fuera li svg {
	flex: none;
	width: 15px;
	height: 15px;
	color: var(--vc-naranja);
	opacity: .75;
}

.fuera li b { display: block; font-size: .9375rem; }

.fuera li span {
	display: block;
	font-size: .8125rem;
	color: var(--vc-gris);
	line-height: 1.45;
}

/* --- Ejemplos, solo en "a la medida" ------------------------------------ */
.alcance__ejemplos {
	margin-top: var(--vc-s3);
	padding: 1.35rem 1.5rem;
	background: var(--vc-lavanda);
	border-radius: 20px;
}

.alcance__ejemplos h3 { margin: 0 0 .75rem; font-size: 1.05rem; }

.alcance__ejemplos ul {
	margin: 0;
	padding-left: 1.1rem;
	display: grid;
	gap: .4rem;
	font-size: .9375rem;
}

@media (min-width: 760px) {
	.alcance__ejemplos ul { grid-template-columns: 1fr 1fr; gap: .4rem 1.75rem; }
}

@media (max-width: 520px) {
	.modulo { padding: .85rem 1rem; gap: .75rem; }
	.fuera  { padding: 1.15rem 1.15rem 1.15rem 1rem; }
	.cifra  { padding: .9rem .75rem; }
	.cifra b { font-size: 1rem; }
}

/* ==========================================================================
   MAQUETA DE LANDING — landing de ejemplo completa, a lo ancho
   Se enciende modulo por modulo con el scroll de la pagina. Sin scroll
   propio: el anterior iba en una ventanita y no se lucia.
   ========================================================================== */
/* .wrap fija el ancho con `width`, no con `max-width`: un max-width aqui
   no lo pisaba y la seccion se quedaba en los 1200 de siempre. */
.wrap--ancho { width: min(100% - (var(--vc-gut) * 2), 1400px); }

.demo {
	margin-top: var(--vc-s4);
	/* Una sola columna: la maqueta ocupa todo el ancho y las notas flotan
	   encima. Antes iban en una columna al lado y le robaban espacio. */
	border-radius: 0 0 18px 18px;
	box-shadow: 0 22px 60px rgba(0, 0, 0, .11);
}

/* --- Barra del navegador ------------------------------------------------- */
.navegador {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: .6rem .85rem;
	background: #d9d4c9;
	border-radius: 14px 14px 0 0;
}

.navegador__luz {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--vc-blanco);
	opacity: .8;
}

.navegador__url {
	margin-left: .5rem;
	flex: 1;
	background: var(--vc-blanco);
	border-radius: 999px;
	padding: .2rem .8rem;
	font-size: .75rem;
	color: var(--vc-gris);
}

/* --- Cada modulo de la landing de ejemplo -------------------------------- */
.lp {
	position: relative;   /* bloque contenedor del popup .lpnota */
	background: var(--vc-blanco);
	padding: clamp(1.5rem, 3.4vw, 2.75rem);
	opacity: .34;
	filter: saturate(.15);
	transition: opacity 460ms ease, filter 460ms ease;
}

.lp + .lp, .lpnota + .lp { border-top: 1px solid #eeece7; }

.lp.encendido { opacity: 1; filter: none; }

/* La ultima cierra la ventana del navegador */
.lp:last-of-type { border-radius: 0 0 14px 14px; }

.lp__etiqueta {
	position: absolute;
	top: .8rem;
	right: .9rem;
	z-index: 2;
	background: var(--vc-naranja);
	color: var(--vc-blanco);
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	padding: .25rem .6rem;
	border-radius: 999px;
	opacity: 0;
	transform: translateY(-5px);
	transition: opacity 340ms ease 140ms, transform 340ms ease 140ms;
}

.lp.encendido .lp__etiqueta { opacity: 1; transform: none; }

.lp__num { display: none; }          /* solo en movil */
.lp__barra { display: contents; }    /* en escritorio no es caja */

/* --- La nota, como popup encima del diseno ------------------------------
   Aparece cuando su modulo se enciende y se monta un poco sobre la maqueta,
   para que se lea como una anotacion sobre la pagina y no como una leyenda
   aparte. */
.lpnota {
	position: absolute;
	z-index: 4;
	top: 50%;
	right: clamp(.75rem, 2.5vw, 2rem);
	width: min(310px, 40%);
	/* En escritorio se recolocan alternando lado y colgando fuera; los
	   porcentajes van mas abajo, en el bloque de min-width 1100px. */
	padding: 1rem 1.15rem;
	background: var(--vc-blanco);
	border-radius: 18px;
	box-shadow: 0 16px 40px rgba(17, 17, 17, .17);
	/* Franja naranja al canto: la ata a la marca de Viviana y la separa
	   del pastel del cliente de ejemplo. */
	border-left: 5px solid var(--vc-naranja);
	opacity: 0;
	transform: translateY(-50%) translateX(18px) scale(.97);
	pointer-events: none;
	transition: opacity 380ms ease, transform 460ms cubic-bezier(.2, .8, .3, 1);
	cursor: pointer;
}

.lpnota.activa {
	opacity: 1;
	transform: translateY(-50%) translateX(0) scale(1);
	pointer-events: auto;
}

/* --- Los popups cuelgan fuera y van alternando lado ----------------------
   Medio cuadro afuera resalta mas y deja de tapar el contenido de la
   maqueta. Alternar lado evita que se lean como una columna y obliga al
   ojo a cruzar el diseno en cada paso.

   La maqueta se angosta al 82% para dejar ese margen: si colgaran sobre el
   ancho completo, la parte de fuera empujaria scroll horizontal a toda la
   pagina. Se usa [data-m] y no :nth-of-type porque la barra del navegador
   es otro div y correria la cuenta. */
@media (min-width: 1100px) {
	.demo { width: 82%; margin-inline: auto; }

	.lpnota { width: min(310px, 30%); }

	.lp[data-m="1"] .lpnota,
	.lp[data-m="3"] .lpnota,
	.lp[data-m="5"] .lpnota,
	.lp[data-m="7"] .lpnota {
		right: -9%;
		left: auto;
	}

	.lp[data-m="2"] .lpnota,
	.lp[data-m="4"] .lpnota,
	.lp[data-m="6"] .lpnota {
		left: -9%;
		right: auto;
		/* La franja naranja pasa al otro canto, del lado que cuelga */
		border-left: none;
		border-right: 5px solid var(--vc-naranja);
	}

	/* Los de la izquierda entran desde la izquierda */
	.lp[data-m="2"] .lpnota,
	.lp[data-m="4"] .lpnota,
	.lp[data-m="6"] .lpnota { transform: translateY(-50%) translateX(-18px) scale(.97); }

	.lp[data-m="2"] .lpnota.activa,
	.lp[data-m="4"] .lpnota.activa,
	.lp[data-m="6"] .lpnota.activa { transform: translateY(-50%) translateX(0) scale(1); }
}

/* --- Latido del popup ----------------------------------------------------
   La tarjeta es blanca sobre una maqueta llena de color y se perdia. El aro
   late dos veces y descansa, como un pulso: llama la atencion sin quedarse
   parpadeando encima.

   Se anima un ::after y no la tarjeta, porque .lpnota ya usa transform para
   colocarse y una animacion sobre la misma propiedad la desplazaria. */
.lpnota::after {
	content: "";
	position: absolute;
	inset: -3px;
	border-radius: 21px;
	border: 2px solid var(--vc-naranja);
	opacity: 0;
	pointer-events: none;
}

.lpnota.activa::after {
	animation: lpnota-latido 1.3s ease-out infinite;
}

@keyframes lpnota-latido {
	0%          { opacity: 0;   transform: scale(1); }
	8%          { opacity: .62; transform: scale(1); }
	30%         { opacity: 0;   transform: scale(1.07); }
	38%         { opacity: .42; transform: scale(1); }
	62%, 100%   { opacity: 0;   transform: scale(1.07); }
}

/* El numero tambien respira, para que el ojo caiga ahi primero */
.lpnota.activa .lpnota__n {
	animation: lpnota-numero 1.3s ease-out infinite;
}

@keyframes lpnota-numero {
	0%, 62%, 100% { transform: scale(1); }
	8%, 38%       { transform: scale(1.18); }
	30%           { transform: scale(1); }
}

.lpnota__n {
	display: inline-block;
	font-family: var(--vc-display);
	font-size: .8125rem;
	font-weight: 800;
	color: var(--vc-naranja);
	font-variant-numeric: tabular-nums;
	letter-spacing: .06em;
	transform-origin: left center;
}

.lpnota h3 {
	margin: .1rem 0 .3rem;
	font-size: 1.0625rem;
	line-height: 1.18;
	text-transform: none;
}

.lpnota p {
	margin: 0;
	font-size: .8125rem;
	color: var(--vc-gris);
	line-height: 1.5;
}

.demo__pie {
	margin: 1rem 0 0;
	font-size: .75rem;
	color: var(--vc-gris);
	text-align: center;
}

/* ==========================================================================
   Interiores de la landing de ejemplo (psicologa)
   Estilo pastel de la referencia: esquinas muy redondeadas, palabras en
   manuscrita, calcomanias giradas, puntos flotando y fotos recortadas.

   Los colores de aqui NO son la paleta de la marca: son del cliente
   imaginario. Viven bajo .lp y no se escapan al resto del sitio.
   ========================================================================== */
.lp {
	--pastel-lila:     #e8e3ff;
	--pastel-rosa:     #ffe1ec;
	--pastel-amarillo: #ffeeb8;
	--pastel-menta:    #d6f2e4;
	--pastel-tinta:    #2e2a5c;
	--pastel-suave:    #f4f2ff;
	--manuscrita: "Caveat", "Segoe Script", cursive;
}

.lp h4 {
	margin: 0 0 .5rem;
	/* La regla global h1..h4 del tema fuerza mayusculas. La maqueta es de
	   otra marca y va como se escribio. */
	text-transform: none;
	font-family: var(--vc-display);
	font-size: clamp(1.2rem, 2.4vw, 1.75rem);
	line-height: 1.16;
	letter-spacing: -.015em;
	color: var(--pastel-tinta);
}

/* Las palabras sueltas en manuscrita de color, como en la referencia */
.lp h4 em {
	font-family: var(--manuscrita);
	font-style: normal;
	font-size: 1.32em;
	line-height: .8;
	color: #f0a500;
}

.lp h4 .lp-em--2 { color: #8b7bd8; }

.lp p { margin: 0 0 .6rem; font-size: .9375rem; line-height: 1.55; color: #55527a; }

.lp-titulo {
	text-align: center;
	margin-bottom: .2rem !important;
}

.lp-subtitulo {
	text-align: center;
	font-family: var(--manuscrita);
	font-size: 1.15rem !important;
	color: #8b7bd8 !important;
	margin-bottom: 1rem !important;
}

/* --- Botones, notas, chips ---------------------------------------------- */
.lp-btn {
	display: inline-block;
	margin-top: .4rem;
	padding: .65rem 1.5rem;
	background: var(--pastel-tinta);
	color: #fff;
	border-radius: 999px;
	font-size: .875rem;
	font-weight: 700;
}

.lp-btn--grande { padding: .8rem 2rem; font-size: .9375rem; width: 100%; text-align: center; }

.lp-nota { display: block; margin-top: .55rem; font-size: .75rem; color: #8b88a8; }

.lp-chip {
	display: inline-block;
	padding: .12rem .5rem;
	background: var(--pastel-amarillo);
	border-radius: 999px;
	font-size: .625rem;
	font-style: normal;
	font-weight: 700;
	color: #8a6b00;
	vertical-align: middle;
}

/* --- Puntos flotando ----------------------------------------------------- */
.lp-dot { position: absolute; border-radius: 50%; }
.lp-dot--a { width: 30px; height: 30px; background: var(--pastel-rosa); top: 6%; left: 20%; }
.lp-dot--b { width: 16px; height: 16px; background: var(--pastel-amarillo); top: 22%; right: 16%; }
.lp-dot--c { width: 22px; height: 22px; border: 5px solid var(--pastel-lila); top: 62%; right: 26%; }
.lp-dot--d { width: 26px; height: 26px; background: var(--pastel-menta); top: 4%; right: 8%; }

/* --- Fotos recortadas ---------------------------------------------------- */
.lp-recorte {
	position: relative;
	flex: none;
	width: clamp(84px, 15%, 136px);
	aspect-ratio: 3 / 4;
	margin: 0;
	display: grid;
	place-items: end center;
	overflow: hidden;   /* los hombros salen del marco: se recortan */
}

/* Circulo de color detras, como los de la referencia */
.lp-recorte::before {
	content: "";
	position: absolute;
	inset: auto 0 12% 0;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--pastel-lila);
}

.lp-recorte--der::before { background: var(--pastel-menta); }
.lp-recorte--cierre::before { background: var(--pastel-rosa); }

/* Silueta: cabeza y hombros, sin foto */
.lp-cara {
	position: relative;
	z-index: 1;
	width: 46%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: #cfc7f2;
	margin-bottom: 26%;
}

.lp-cara::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 116%;
	width: 215%;
	aspect-ratio: 2 / 1.2;
	transform: translateX(-50%);
	border-radius: 50% 50% 0 0;
	background: #cfc7f2;
}

.lp-recorte--der .lp-cara,
.lp-recorte--der .lp-cara::after { background: #a8ddc4; }

.lp-recorte--cierre .lp-cara,
.lp-recorte--cierre .lp-cara::after { background: #f5b9cf; }

/* --- Menu de la landing de ejemplo --------------------------------------- */
.lp-nav {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.4rem;
	font-size: .75rem;
}

.lp-nav__marca {
	display: flex;
	align-items: center;
	gap: .4rem;
	font-weight: 800;
	line-height: 1.05;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: var(--pastel-tinta);
	font-size: .625rem;
}

.lp-nav__marca i {
	width: 18px;
	height: 18px;
	border-radius: 50% 50% 50% 2px;
	background: #b9a8f0;
	flex: none;
}

.lp-nav__links { display: flex; gap: .5rem; margin-left: auto; color: #6b6890; }

.lp-nav__links a { padding: .2rem .5rem; }

.lp-nav__on {
	background: #fff;
	border: 1px solid #ddd8f5;
	border-radius: 999px;
	color: var(--pastel-tinta);
	font-weight: 600;
}

.lp-nav__cta {
	padding: .3rem .8rem;
	background: #b9a8f0;
	color: #fff;
	border-radius: 999px;
	font-weight: 600;
}

/* --- 1. Portada ---------------------------------------------------------- */
.lp-portada {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(.5rem, 2vw, 1.5rem);
	text-align: center;
}

.lp-portada__txt { flex: 1; min-width: 0; }
.lp-portada__txt p { max-width: 42ch; margin-left: auto; margin-right: auto; }

/* --- 2. El problema ------------------------------------------------------ */
.lp-problema { position: relative; text-align: center; }

.lp-marcas {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .35rem;
	margin: .9rem 0;
}

/* Franjas de color sobre el texto, como el bloque final de la referencia */
.lp-marca {
	display: inline-block;
	padding: .2rem .7rem;
	border-radius: 999px;
	font-size: .9375rem;
	font-weight: 600;
	color: var(--pastel-tinta);
}

.lp-marca--rosa     { background: var(--pastel-rosa); }
.lp-marca--amarillo { background: var(--pastel-amarillo); }
.lp-marca--menta    { background: var(--pastel-menta); }
.lp-marca--lila     { background: var(--pastel-lila); }
.lp-marca--blanco   { background: #fff; }

.lp-problema__cierre {
	font-weight: 700;
	color: var(--pastel-tinta) !important;
	font-size: 1rem !important;
}

/* --- 3. Lo que ofreces --------------------------------------------------- */
.lp-stickers {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: .5rem;
	margin-bottom: 1rem;
}

/* Calcomanias giradas */
.lp-sticker {
	padding: .28rem .85rem;
	border-radius: 999px;
	font-size: .75rem;
	font-weight: 600;
	color: var(--pastel-tinta);
}

.lp-sticker--rosa     { background: var(--pastel-rosa); transform: rotate(-4deg); }
.lp-sticker--menta    { background: var(--pastel-menta); transform: rotate(3deg); }
.lp-sticker--amarillo { background: var(--pastel-amarillo); transform: rotate(-2deg); }

.lp-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }

.lp-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 1rem;
	border-radius: 20px;
	min-height: 190px;
}

.lp-card--lila     { background: var(--pastel-lila); }
.lp-card--amarillo { background: var(--pastel-amarillo); margin-top: -14px; }
.lp-card--rosa     { background: var(--pastel-rosa); }

.lp-card b {
	font-size: .9375rem;
	line-height: 1.2;
	color: var(--pastel-tinta);
}

/* Hueco de la foto del programa */
.lp-card__foto {
	flex: 1;
	margin: .6rem 0 .5rem;
	border-radius: 14px;
	background: rgba(255, 255, 255, .55);
}

.lp-flecha {
	width: 26px;
	height: 26px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: #fff;
	color: var(--pastel-tinta);
	font-style: normal;
	font-size: .75rem;
}

/* --- 4. La prueba -------------------------------------------------------- */
.lp-experto {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: .75rem 1rem;
	background: var(--pastel-suave);
	border-radius: 20px;
	margin-bottom: .8rem;
}

.lp-experto__caras { flex: none; text-align: center; }

.lp-experto__caras span {
	display: inline-block;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 2px solid #fff;
	background: #cfc7f2;
	margin-left: -9px;
	vertical-align: middle;
}

.lp-experto__caras span:nth-child(2) { background: #f5b9cf; }
.lp-experto__caras span:nth-child(3) { background: #a8ddc4; }
.lp-experto__caras span:nth-child(4) { background: #ffd97a; }

.lp-experto__caras b {
	display: block;
	margin-top: .35rem;
	font-size: .625rem;
	color: #6b6890;
	line-height: 1.3;
}

.lp-experto__foto {
	position: relative;
	flex: none;
	width: 62px;
	aspect-ratio: 3 / 4;
	margin: 0;
	display: grid;
	place-items: end center;
	overflow: hidden;
}

.lp-experto__foto::before {
	content: "";
	position: absolute;
	inset: auto 0 6% 0;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--pastel-lila);
}

.lp-experto__txt { flex: 1; min-width: 0; }

.lp-experto__txt > b {
	display: block;
	font-size: .9375rem;
	color: var(--pastel-tinta);
	margin-bottom: .15rem;
}

.lp-experto__txt > span {
	display: block;
	font-size: .75rem;
	color: #6b6890;
	line-height: 1.45;
}

.lp-experto__sellos { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .45rem; }

.lp-experto__sellos i {
	padding: .18rem .55rem;
	background: #fff;
	border-radius: 999px;
	font-size: .625rem;
	font-style: normal;
	color: #6b6890;
}

.lp-citas { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }

.lp-cita {
	padding: .9rem 1rem;
	background: var(--pastel-suave);
	border-radius: 18px;
}

.lp-cita p { font-size: .8125rem; margin-bottom: .55rem; }

.lp-firma { display: flex; align-items: center; gap: .45rem; font-size: .75rem; color: var(--pastel-tinta); }

.lp-firma span { width: 22px; height: 22px; border-radius: 50%; background: #cfc7f2; }

/* --- 5. Cómo funciona ---------------------------------------------------- */
.lp-pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }

.lp-paso { padding: 1rem .9rem; border-radius: 20px; }

.lp-paso--lila     { background: var(--pastel-lila); }
.lp-paso--menta    { background: var(--pastel-menta); margin-top: 14px; }
.lp-paso--amarillo { background: var(--pastel-amarillo); }

.lp-paso b {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	margin-bottom: .5rem;
	border-radius: 50%;
	background: #fff;
	color: var(--pastel-tinta);
	font-size: .8125rem;
}

.lp-paso strong { display: block; margin-bottom: .2rem; font-size: .9375rem; color: var(--pastel-tinta); }
.lp-paso span { font-size: .8125rem; color: #55527a; line-height: 1.45; }

/* --- 6. Preguntas frecuentes --------------------------------------------- */
.lp-faq { display: grid; gap: .4rem; max-width: 40rem; margin: 0 auto; }

.lp-faq__fila {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: .75rem;
	padding: .75rem 1rem;
	background: var(--pastel-suave);
	border-radius: 16px;
	font-size: .875rem;
	color: var(--pastel-tinta);
}

.lp-faq__fila--abierta { background: var(--pastel-lila); }

.lp-faq__fila span {
	display: block;
	margin-top: .3rem;
	font-size: .8125rem;
	color: #55527a;
	line-height: 1.5;
	font-weight: 400;
}

.lp-faq__fila i { font-style: normal; color: #8b7bd8; font-weight: 700; flex: none; }

/* --- 7. El cierre -------------------------------------------------------- */
.lp-cierre {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.1rem;
	background: var(--pastel-suave);
	border-radius: 24px;
}

.lp-cierre__izq { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; }

.lp-cierre__izq .lp-marca { font-size: 1rem; }

.lp-form { flex: 1; min-width: 0; }

.lp-input {
	display: block;
	margin-bottom: .5rem;
	padding: .6rem 1rem;
	background: var(--pastel-lila);
	border-radius: 999px;
	font-size: .8125rem;
	color: #8b88a8;
}

.lp-recorte--cierre { width: clamp(70px, 13%, 110px); }

/* --- Movil --------------------------------------------------------------- */
@media (max-width: 720px) {
	/* Se aprieta el aire, no el contenido */
	.lp h4 { font-size: 1.15rem; }
	.lp p { font-size: .9375rem; margin-bottom: .5rem; }

	.lp-nav__links { display: none; }

	.lp-portada { flex-direction: row; }
	.lp-recorte { width: 74px; }
	.lp-recorte--der { display: none; }

	.lp-cards, .lp-pasos, .lp-citas { grid-template-columns: 1fr; gap: .5rem; }
	.lp-card--amarillo, .lp-paso--menta { margin-top: 0; }
	.lp-card { min-height: 0; flex-direction: row; align-items: center; gap: .7rem; }
	.lp-card__foto { flex: none; width: 62px; height: 52px; margin: 0; }
	.lp-card b { flex: 1; }

	.lp-experto { flex-wrap: wrap; gap: .7rem; }
	.lp-experto__caras { order: 3; }

	.lp-cierre { flex-direction: column; align-items: stretch; }
	.lp-recorte--cierre { display: none; }

	.lpnota h3 { font-size: .9375rem; }
	.lpnota p { font-size: .8125rem; }
	.lp-titulo { margin-bottom: .2rem !important; }
}

/* ==========================================================================
   MODULOS EN MOVIL — la maqueta se recorre sola, como un video
   Sustituye a la pila. El problema no era la tarjeta sino meter maqueta y
   explicacion juntas en 375px: aqui se turnan en el tiempo.
   ========================================================================== */
@media (max-width: 979px) {
	.demo {
		position: relative;
		display: block;
		overflow: hidden;
		border-radius: 18px;
		/* sin pie negro: el marco cierra abajo */
		background: var(--vc-blanco);
		box-shadow: 0 14px 36px rgba(17, 17, 17, .12);
	}

	/* La ventana por la que se ve pasar la maqueta */
	.demo { height: auto; }

	.navegador { display: flex; border-radius: 18px 18px 0 0; }

	/* La tira: todas las tarjetas una tras otra, movidas por el JS */
	.lp {
		position: static;
		display: block;
		height: auto;
		min-height: 0;
		padding: 0;
		background: none;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		opacity: 1;
		overflow: visible;
	}

	.lp::after { display: none; }
	.lp__barra { display: none; }        /* el rotulo vive abajo, en el letrero */
	.lpnota { display: none; }           /* la explicacion tambien */

	.lp__fiel {
		margin: 0;
		padding: 1.1rem 1rem;
		border-top: 1px solid #eeece7;
	}

	.lp:first-child .lp__fiel { border-top: 0; }
	.lp__fiel > * + * { margin-top: .8rem; padding-top: .8rem; border-top: 1px solid #f1efea; }

	/* --- El marco del "video" ------------------------------------------ */
	.cine {
		position: relative;
		/* vh primero como respaldo: si el navegador no entiende svh tira la
		   declaracion y el marco se queda con la altura del contenido, o sea
		   sin recorrido que enseñar. */
		height: 46vh;
		height: 46svh;
		min-height: 300px;
		max-height: 420px;
		overflow: hidden;
		background: var(--vc-blanco);
	}

	.cine__tira { will-change: transform; }

	/* Se difumina arriba y abajo para que no se corte en seco */
	.cine::before,
	.cine::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		height: 42px;
		pointer-events: none;
		z-index: 2;
	}

	.cine::before { top: 0; background: linear-gradient(var(--vc-blanco), transparent); }
	.cine::after { bottom: 0; background: linear-gradient(transparent, var(--vc-blanco)); }

	/* --- La etiqueta, flotando sobre la maqueta -------------------------
	   Antes era una barra negra debajo del marco: cortaba el bloque en dos y
	   se veia como un pie pegado. Aqui va encima, con el fondo desenfocado,
	   y solo aparece cuando el recorrido se detiene en un modulo. */
	.cine__eti {
		position: absolute;
		z-index: 3;
		left: .8rem;
		bottom: .8rem;
		max-width: calc(100% - 4.5rem);
		padding: .6rem .9rem;
		border-radius: 14px;
		background: rgba(255, 255, 255, .72);
		-webkit-backdrop-filter: blur(14px) saturate(1.4);
		        backdrop-filter: blur(14px) saturate(1.4);
		box-shadow: 0 8px 24px rgba(17, 17, 17, .14);
		opacity: 0;
		transform: translateY(10px) scale(.96);
		transition: opacity 300ms ease, transform 420ms cubic-bezier(.2, .8, .3, 1);
		pointer-events: none;
	}

	.cine__eti--dentro { opacity: 1; transform: none; }

	.cine__eti b {
		display: block;
		font-family: var(--vc-display);
		font-size: .9375rem;
		line-height: 1.15;
		color: var(--vc-tinta);
		text-transform: none;
	}

	.cine__eti i {
		display: block;
		margin-top: .1rem;
		font-style: normal;
		font-size: .625rem;
		letter-spacing: .07em;
		text-transform: uppercase;
		color: var(--vc-naranja);
		font-weight: 700;
	}

	/* --- Los puntos de avance ------------------------------------------ */
	.cine__puntos {
		position: absolute;
		z-index: 3;
		right: .8rem;
		bottom: 1.1rem;
		display: flex;
		flex-direction: column;
		gap: .3rem;
	}

	.cine__puntos i {
		width: 6px;
		height: 6px;
		border-radius: 999px;
		background: rgba(17, 17, 17, .2);
		transition: height 320ms ease, background 320ms ease;
	}

	.cine__puntos i.ahi { height: 18px; background: var(--vc-naranja); }

	.cine-pausa {
		position: absolute;
		z-index: 4;
		right: .7rem;
		top: .7rem;
		display: grid;
		place-items: center;
		width: 38px;
		height: 38px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: rgba(17, 17, 17, .82);
		color: var(--vc-hueso);
		cursor: pointer;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cine { height: auto; min-height: 0; }
	.cine::before, .cine::after { display: none; }
	.cine-pausa { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.lp, .lpnota, .lp__etiqueta { transition: none; }
	.lpnota.activa::after,
	.lpnota.activa .lpnota__n { animation: none; }
	/* Sin latido, el aro se queda fijo para que igual se distinga */
	.lpnota.activa::after { opacity: .5; }
}

/* --- Titulo que se escribe solo y se subraya ------------------------------
   El texto completo ya viene en el HTML: el JS solo lo revela. Asi el
   buscador y un lector de pantalla lo tienen entero aunque el JS no corra,
   y sobre todo, la caja mide lo mismo desde el primer cuadro: antes crecia
   de uno a dos renglones y empujaba el parrafo de abajo. */
.teclea {
	position: relative;
	display: inline-block;
	max-width: 100%;
}

/* Lo que falta por escribir sigue ocupando su lugar, invisible */
.teclea__resto { opacity: 0; }
.teclea--listo .teclea__resto { opacity: 1; }

/* El cursor solo existe mientras escribe */
.teclea--escribiendo .teclea__ok::after {
	content: "";
	display: inline-block;
	width: .06em;
	height: .85em;
	margin-left: .04em;
	margin-right: -.1em;   /* no empuja al resto del texto */
	background: var(--vc-naranja);
	vertical-align: baseline;
	animation: teclea-cursor .75s steps(1) infinite;
}

@keyframes teclea-cursor {
	0%, 49%   { opacity: 1; }
	50%, 100% { opacity: 0; }
}

/* El signo final aparece cuando termina de escribir */
.teclea .resalta {
	opacity: 0;
	transition: opacity 200ms ease;
}

.teclea--listo .resalta { opacity: 1; }

/* Subrayado a mano alzada. El JS le da posicion y ancho: va sobre el
   ultimo renglon nada mas, no cruzando todo el bloque. */
.subraya {
	position: absolute;
	left: 0;
	top: 100%;
	width: 100%;
	height: .3em;
	color: var(--vc-lavanda);
	overflow: visible;
	pointer-events: none;
}

.subraya path {
	stroke-dasharray: 300;
	stroke-dashoffset: 300;
}

.teclea--subrayado .subraya path {
	animation: subraya-traza 520ms cubic-bezier(.4, 0, .2, 1) forwards;
}

@keyframes subraya-traza {
	to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.teclea--escribiendo .teclea__ok::after { display: none; }
	.teclea .resalta,
	.teclea__resto { opacity: 1; }
	.subraya path { stroke-dashoffset: 0; }
	.teclea--subrayado .subraya path { animation: none; }
}

/* ==========================================================================
   PORTADA DE PRODUCTO — centrada, con el producto grande y los datos duros
   flotando alrededor. Antes iba a dos columnas y del lado derecho enseniaba
   siempre la tienda de Bien Bonito, hasta en el producto de Landing.
   ========================================================================== */
.portada--prod {
	position: relative;
	background: var(--vc-hueso);
	color: var(--vc-tinta);
	text-align: center;
	padding-block: clamp(1rem, 2vw, 1.5rem) clamp(1.75rem, 3.5vw, 3rem);
	overflow: hidden;
}

.portada--prod .migas,
.portada--prod .migas a { color: var(--vc-gris); }
.portada--prod .migas { justify-content: center; margin-bottom: clamp(1rem, 2.5vw, 1.75rem); }

.prod-hero { position: relative; z-index: 1; }

/* Pastilla de arriba, como la de la referencia */
.prod-hero__pill {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .35rem .95rem .35rem .55rem;
	background: var(--vc-blanco);
	border: 1px solid rgba(17, 17, 17, .09);
	border-radius: 999px;
	font-size: .8125rem;
	font-weight: 600;
	box-shadow: 0 3px 12px rgba(17, 17, 17, .05);
}

.prod-hero__pill i {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--vc-lavanda);
	flex: none;
}

.prod-hero__titulo {
	margin: clamp(.6rem, 1.2vw, .9rem) 0 0;
	font-size: clamp(1.75rem, 4.4vw, 3.1rem);
	line-height: 1;
	text-wrap: balance;
}

.prod-hero__promesa {
	margin: .45rem auto 0;
	max-width: 68ch;
	font-size: clamp(.9375rem, 1.25vw, 1.0625rem);
	color: var(--vc-gris);
	line-height: 1.5;
}

.prod-hero__precio {
	display: block;
	text-align: center;
	margin: clamp(.6rem, 1.3vw, .9rem) 0 0;
}

.prod-hero__precio b {
	font-family: var(--vc-display);
	display: block;
	font-size: clamp(2.4rem, 5.6vw, 3.9rem);
	line-height: .9;
	color: var(--vc-naranja);
	letter-spacing: -.02em;
}

.prod-hero__precio span {
	display: block;
	margin-top: .2rem;
	font-size: .75rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--vc-gris);
}

.prod-hero__acciones {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .7rem;
	margin-top: .7rem;
}

/* Boton secundario: contorno suave sobre el hueso */
.btn--fantasma {
	background: var(--vc-blanco);
	color: var(--vc-tinta);
	border: 1px solid rgba(17, 17, 17, .12);
}

.btn--fantasma:hover { background: var(--vc-tinta); color: var(--vc-hueso); border-color: var(--vc-tinta); }

.prod-hero__quien {
	margin: .55rem auto 0;
	max-width: 84ch;
	font-size: .8125rem;
	color: var(--vc-gris);
	line-height: 1.5;
}

.prod-hero__quien b { color: var(--vc-tinta); }

/* --- La escena: producto al centro, datos flotando ----------------------- */
.prod-hero__escena {
	position: relative;
	margin-top: clamp(.7rem, 1.4vw, 1rem);
	padding-bottom: 0;
}

/* Resplandor lila-naranja detras del titular. Antes vivia detras de la
   maqueta; ahi competia con el producto y dejaba el titulo sobre beige
   plano. Arriba llena la zona del titular, que es donde debe caer el ojo
   al entrar, y va derivando despacio para que no parezca una mancha fija. */
.prod-hero__brillo {
	position: absolute;
	left: 50%;
	top: -6%;
	width: min(140%, 1500px);
	height: 78%;
	transform: translateX(-50%);
	background:
		radial-gradient(closest-side, rgba(201, 182, 255, .95), transparent 70%),
		radial-gradient(closest-side, rgba(252, 84, 9, .40), transparent 68%),
		radial-gradient(closest-side, rgba(201, 182, 255, .55), transparent 72%);
	background-size: 62% 78%, 48% 62%, 44% 58%;
	background-position: 12% 32%, 84% 48%, 52% 84%;
	background-repeat: no-repeat;
	filter: blur(52px);
	pointer-events: none;
	z-index: 0;
	animation: brillo-deriva 22s ease-in-out infinite alternate;
}

/* Se mueven las manchas dentro del degradado, no el elemento: asi se
   deforma como humo en vez de deslizarse como un bloque. */
@keyframes brillo-deriva {
	from { background-position: 12% 32%, 84% 48%, 52% 84%; }
	to   { background-position: 26% 46%, 68% 30%, 38% 70%; }
}

@media (prefers-reduced-motion: reduce) {
	.prod-hero__brillo { animation: none; }
}

.prod-hero__marco {
	position: relative;
	z-index: 1;
	margin: 0 auto;
	width: min(100%, 780px);
	border-radius: 16px 16px 0 0;
	overflow: hidden;
	box-shadow: 0 26px 70px rgba(17, 17, 17, .22);
}

.prod-hero__marco img { display: block; width: 100%; height: auto; }

/* --- Tarjetas de dato, una en cada esquina -------------------------------
   Se llaman .hdato y no .dato porque .dato ya existia (banda oscura de la
   home) con color hueso, y las dejaba en blanco sobre blanco. */
.hdato {
	position: absolute;
	z-index: 2;
	padding: .7rem .95rem;
	border-radius: 14px;
	box-shadow: 0 12px 30px rgba(17, 17, 17, .13);
	text-align: left;
	max-width: 200px;
	color: var(--vc-tinta);
}

.hdato__k {
	display: block;
	font-size: .625rem;
	letter-spacing: .07em;
	text-transform: uppercase;
	opacity: .62;
	margin-bottom: .2rem;
}

.hdato__v {
	display: block;
	min-height: 1.15em;   /* el hueco no cambia mientras se escribe */
	font-family: var(--vc-display);
	font-size: .9375rem;
	line-height: 1.15;
	text-transform: none;
	color: var(--vc-tinta);
}

/* Cursor mientras teclea */
.hdato--tecleando .hdato__v::after {
	content: "";
	display: inline-block;
	width: .09em;
	height: .8em;
	margin-left: .05em;
	background: currentColor;
	animation: teclea-cursor .7s steps(1) infinite;
}

/* Flotan un poco, cada una a su ritmo. Sin esto se leen como cuatro
   pegatinas puestas; moviendose parecen estar suspendidas alrededor. */
@media (min-width: 1081px) {
	.hdato { animation: hdato-flota 5.5s ease-in-out infinite; }
	.hdato--der-a { animation-duration: 6.4s; animation-delay: -1.2s; }
	.hdato--izq-b { animation-duration: 7.1s; animation-delay: -2.6s; }
	.hdato--der-b { animation-duration: 6s;   animation-delay: -3.4s; }
}

@keyframes hdato-flota {
	0%, 100% { transform: translateY(0)     rotate(0deg); }
	50%      { transform: translateY(-11px) rotate(-.7deg); }
}

@media (prefers-reduced-motion: reduce) {
	.hdato { animation: none; }
}

/* Cada una con su color, para que no sean cuatro cuadros blancos */
.hdato--izq-a { background: var(--vc-lavanda); left: 1%;  top: 23%; }
.hdato--der-a { background: #ffd9c2;           right: 1%; top: 21%; }
.hdato--izq-b { background: #ece5ff;           left: 7%;  top: 37%; }
.hdato--der-b { background: var(--vc-naranja); right: 7%; top: 35%; color: var(--vc-blanco); }

.hdato--der-b .hdato__v { color: var(--vc-blanco); }
.hdato--der-b .hdato__k { opacity: .8; }

/* Debajo de 1080 el mockup ya no deja hueco a los lados: las tarjetas se
   bajan a una rejilla, que es mas legible que apretarlas encima. */
@media (max-width: 1080px) {
	.prod-hero__escena {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: .6rem;
	}

	.prod-hero__marco { grid-column: 1 / -1; border-radius: 18px; }

	/* Fuera en el telefono: apiladas dejaban de leerse como datos flotando
	   alrededor del producto y quedaban como otra lista mas. Los mismos
	   datos ya estan en los cuadros de "Que incluye", justo debajo. */
	.hdato { display: none; }
}



/* --- La fila de cuadros con todo lo que incluye --------------------------
   Va en la portada, sin bajar: responde "que me llevo por ese precio". */
.hlista__rotulo {
	position: relative;
	z-index: 3;   /* la maqueta y su sombra le pasaban por encima */
	margin: clamp(1rem, 2vw, 1.5rem) 0 .5rem;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--vc-naranja);
}

.hlista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .38rem;
}

.hlista__c {
	display: flex;
	align-items: center;
	gap: .4rem;
	/* Alto fijo a proposito: al crecer solo cambia de ancho. Si tambien
	   creciera de alto, la fila cambiaria de altura a media transicion y
	   empujaria hacia abajo toda la pagina. */
	height: 2.6rem;
	box-sizing: border-box;
	padding: 0 .72rem;
	background: var(--vc-blanco);
	border: 1px solid rgba(17, 17, 17, .07);
	border-radius: 999px;
	font-size: .8125rem;
	line-height: 1.2;
	text-align: left;
}

.hlista__c svg {
	width: 15px;
	height: 15px;
	flex: none;
	color: var(--vc-naranja);
}

/* Uno a la vez crece y empuja a los demas. Se cambia el tamanio real y no
   un scale, porque un scale no reflota la fila: no empujaria nada. */
.hlista__c {
	transition: padding 340ms cubic-bezier(.3, .8, .3, 1),
	            font-size 340ms cubic-bezier(.3, .8, .3, 1),
	            box-shadow 340ms ease, border-color 340ms ease;
	will-change: padding;
}

.hlista__c--grande {
	padding: 0 1.5rem;
	font-size: 1.0625rem;
	border-color: var(--vc-naranja);
	box-shadow: 0 8px 22px rgba(252, 84, 9, .18);
}

.hlista__c--grande svg { width: 21px; height: 21px; }

@media (max-width: 620px) {
	.hlista { gap: .35rem; }
	.hlista__c { padding: .4rem .65rem; font-size: .75rem; }
}

/* ==========================================================================
   QUE INCLUYE — se veia plano: tarjetas blancas iguales en fila.
   Ahora el icono va en pastilla de color y las tarjetas alternan tono.
   ========================================================================== */
.incluye__item {
	position: relative;
	background: var(--vc-blanco);
	border-radius: 18px;
	padding: 1.35rem 1.25rem;
	transition: transform 240ms ease, box-shadow 240ms ease;
}

.incluye__item:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(17, 17, 17, .1); }

/* El icono, dentro de una pastilla de color que va rotando */
.incluye__item svg {
	width: 42px;
	height: 42px;
	padding: 10px;
	margin-bottom: .85rem;
	border-radius: 13px;
	background: var(--vc-lavanda);
	color: var(--vc-tinta);
	box-sizing: border-box;
}

.incluye__item:nth-child(3n+2) svg { background: #ffe1ec; }
.incluye__item:nth-child(3n+3) svg { background: #ffeeb8; }

/* Una de cada cuatro va en oscuro, para que la fila no sea una sola mancha */
.incluye__item:nth-child(4n+1) {
	background: var(--vc-tinta);
	color: var(--vc-hueso);
}

.incluye__item:nth-child(4n+1) h3 { color: var(--vc-hueso); }
.incluye__item:nth-child(4n+1) p  { color: rgba(242, 239, 233, .72); }
.incluye__item:nth-child(4n+1) svg { background: var(--vc-naranja); color: var(--vc-blanco); }

.incluye__item h3 { margin: 0 0 .35rem; font-size: .9375rem; line-height: 1.2; }
.incluye__item p  { margin: 0; font-size: .875rem; color: var(--vc-gris); line-height: 1.5; }

/* Las cifras, ahora aqui: es donde se preguntan */
#incluye .cifras { margin-top: 1.25rem; }

/* ==========================================================================
   EL PROBLEMA — banner negro. Antes era un parrafo suelto sobre el hueso y
   se leia como relleno entre dos secciones con mas peso visual.
   ========================================================================== */
.banner-prob {
	background: var(--vc-tinta);
	color: var(--vc-hueso);
	padding-block: clamp(2.5rem, 5.5vw, 4.25rem);
}

/* El .wrap normal, para que el negro salga a todo lo ancho de la pagina.
   Solo el texto se limita, para que no queden renglones kilometricos. */
.banner-prob .wrap { text-align: center; }

.banner-prob__rotulo {
	margin: 0 0 .75rem;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--vc-lavanda);
}

.banner-prob__txt {
	margin: 0 auto;
	max-width: 60ch;
	font-size: clamp(1.125rem, 2.1vw, 1.625rem);
	line-height: 1.4;
	color: var(--vc-hueso);
	text-wrap: pretty;
}

/* ==========================================================================
   MINI LANDING DE LA PORTADA — se recorre sola, de arriba abajo y de vuelta
   Sustituye a la captura de una tienda de aromas, que ni explicaba el
   producto ni respetaba la paleta.
   ========================================================================== */
.mini-barra {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: .45rem .6rem;
	background: #ded9ce;
}

.mini-barra span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--vc-blanco);
	opacity: .85;
}

.mini-barra i {
	flex: 1;
	margin-left: .35rem;
	padding: .1rem .5rem;
	background: var(--vc-blanco);
	border-radius: 999px;
	font-size: .5625rem;
	font-style: normal;
	color: var(--vc-gris);
	text-align: left;
}

.mini-visor {
	height: 180px;
	overflow: hidden;
	background: var(--vc-blanco);
}

/* Sube y baja en bucle. alternate hace la vuelta sin salto. */
.mini-tira {
	animation: mini-recorre 15s ease-in-out infinite alternate;
}

@keyframes mini-recorre {
	from { transform: translateY(0); }
	to   { transform: translateY(calc(-100% + 180px)); }
}

.mb {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 7px;
	padding: 18px 20px;
	border-bottom: 1px solid #f0eee9;
}

.mb-l { display: block; height: 11px; border-radius: 3px; background: var(--vc-tinta); }
.mb-t { display: block; height: 5px;  border-radius: 3px; background: #cfccc4; }
.mb-l--c { align-self: center; }

.mb-btn {
	width: 96px;
	height: 22px;
	margin-top: 4px;
	border-radius: 999px;
	background: var(--vc-naranja);
}

.mb-btn--g { width: 130px; height: 26px; align-self: center; }

.mb--foto { height: 92px; padding: 0; background: var(--vc-lavanda); }

.mb-fila { display: flex; gap: 8px; width: 100%; }

.mb-card {
	flex: 1;
	height: 46px;
	border-radius: 8px;
	background: var(--vc-hueso);
	border: 1px solid #eae7e0;
}

.mb-paso {
	flex: 1;
	height: 34px;
	border-radius: 8px;
	background: var(--vc-hueso);
	border-top: 3px solid var(--vc-lavanda);
}

.mb--cita { background: var(--vc-hueso); }

.mb-avatar {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--vc-lavanda);
}

.mb-faq {
	display: block;
	width: 100%;
	height: 20px;
	border-radius: 6px;
	background: var(--vc-hueso);
}

.mb--cierre { align-items: center; }

/* El marco deja de ser una figura con imagen: ahora es una caja */
.prod-hero__marco { background: var(--vc-blanco); }

@media (max-width: 620px) {
	.mini-visor { height: 210px; }
	@keyframes mini-recorre {
		from { transform: translateY(0); }
		to   { transform: translateY(calc(-100% + 210px)); }
	}
	.mb { padding: 13px 14px; gap: 5px; }
	.mb--foto { height: 68px; }
}

@media (prefers-reduced-motion: reduce) {
	.mini-tira { animation: none; }
}

/* ==========================================================================
   LA RUTA — linea del tiempo de 3 + 3 que se llena sola
   Iba en una columna de 780px mientras la seccion de arriba mide 1400, y el
   salto de ancho entre secciones se notaba. Ahora coinciden.
   ========================================================================== */
.ruta {
	list-style: none;
	margin: var(--vc-s4) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2.5rem 3rem;
}

.ruta__paso {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 1.35rem 1.4rem;
	background: var(--vc-blanco);
	border-radius: 18px;
	overflow: hidden;   /* contiene la capa de relleno */
}

/* La capa que pinta el recuadro de beige, de izquierda a derecha */
.ruta__relleno {
	position: absolute;
	inset: 0;
	background: #e7e2d8;
	transform: scaleX(0);
	transform-origin: left center;
	pointer-events: none;
}

.ruta__paso--llenando .ruta__relleno {
	transform: scaleX(1);
	transition: transform 3000ms linear;
}

.ruta__paso--lleno .ruta__relleno { transform: scaleX(1); transition: none; }

/* El tramo de carril que sale de cada paso hacia el siguiente. El 3 y el 6
   cierran renglon y no llevan. */
.ruta__paso::after {
	content: "";
	position: absolute;
	left: 100%;
	top: 2.5rem;
	width: 3rem;
	height: 3px;
	background: rgba(17, 17, 17, .12);
	transition: background 420ms ease;
}

.ruta__paso:nth-child(3n)::after { display: none; }

.ruta__paso--lleno::after,
.ruta__paso--llenando::after { background: var(--vc-naranja); }

.ruta__n {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	margin-bottom: .8rem;
	border-radius: 50%;
	background: var(--vc-hueso);
	font-family: var(--vc-display);
	font-size: .8125rem;
	font-weight: 800;
	color: var(--vc-gris);
	font-variant-numeric: tabular-nums;
	transition: background 320ms ease, color 320ms ease, box-shadow 320ms ease;
}

.ruta__paso--llenando .ruta__n,
.ruta__paso--lleno .ruta__n {
	background: var(--vc-naranja);
	color: var(--vc-blanco);
}

/* El que corre ahora, con un halo */
.ruta__paso--llenando .ruta__n { box-shadow: 0 0 0 6px rgba(252, 84, 9, .18); }

.ruta__paso > div { position: relative; z-index: 1; }

.ruta__paso h3 { margin: 0 0 .35rem; font-size: 1rem; line-height: 1.2; }

.ruta__paso p {
	margin: 0;
	font-size: .875rem;
	color: var(--vc-gris);
	line-height: 1.5;
}

.ruta__cta { margin-top: var(--vc-s4); }

@media (max-width: 900px) {
	.ruta { grid-template-columns: 1fr 1fr; gap: 2rem 2.5rem; }
	.ruta__paso:nth-child(3n)::after { display: block; }
	.ruta__paso:nth-child(2n)::after { display: none; }
	.ruta__paso::after { width: 2.5rem; }
}

@media (max-width: 620px) {
	.ruta { grid-template-columns: 1fr; gap: 1.75rem; }
	.ruta__paso { padding: 1.05rem 1.15rem; }

	/* En una columna el tramo baja en vez de ir de lado */
	.ruta__paso::after,
	.ruta__paso:nth-child(2n)::after,
	.ruta__paso:nth-child(3n)::after { display: block; }

	.ruta__paso::after {
		left: 2.3rem;
		top: 100%;
		width: 3px;
		height: 1.75rem;
	}

	.ruta__paso:last-child::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.ruta__relleno, .ruta__paso::after, .ruta__n { transition: none; }
}

/* --- Muestras de "Asi se ve funcionando" --------------------------------
   Cada una enseña una landing dibujada en miniatura con el color de su giro.
   Antes eran cinco lineas de texto para decir "aqui iria un ejemplo".
   ------------------------------------------------------------------------ */
.muestras {
	margin-top: var(--vc-s4);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
}

.muestra {
	display: block;
	background: var(--vc-blanco);
	border-radius: 20px;
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	transition: transform 260ms ease, box-shadow 260ms ease;
}

.muestra:hover { transform: translateY(-5px); box-shadow: 0 18px 42px rgba(17, 17, 17, .14); }

/* --- La ventana de la vista previa --------------------------------------- */
.muestra__vista { display: block; background: var(--suave); }

.muestra__barra {
	display: flex;
	gap: 4px;
	padding: .5rem .65rem;
	background: rgba(17, 17, 17, .07);
}

.muestra__barra i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--vc-blanco);
	opacity: .9;
}

.muestra__lienzo {
	display: block;
	padding: .85rem .9rem 1.1rem;
	background: var(--vc-blanco);
}

/* La portada de la landing de ejemplo: franja de color, titular y boton */
.v-hero {
	position: relative;
	display: block;
	height: 76px;
	margin-bottom: .7rem;
	border-radius: 8px;
	background: var(--suave);
	overflow: hidden;
}

.v-hero b {
	position: absolute;
	left: 10px;
	top: 16px;
	width: 58%;
	height: 9px;
	border-radius: 3px;
	background: var(--acento);
}

.v-hero s {
	position: absolute;
	left: 10px;
	top: 31px;
	width: 40%;
	height: 9px;
	border-radius: 3px;
	background: var(--acento);
	opacity: .55;
}

.v-hero em {
	position: absolute;
	left: 10px;
	bottom: 12px;
	width: 52px;
	height: 15px;
	border-radius: 999px;
	background: var(--vc-naranja);
}

.v-fila { display: flex; gap: 5px; margin-bottom: .6rem; }

.v-fila i {
	flex: 1;
	height: 30px;
	border-radius: 6px;
	background: var(--suave);
}

.v-l {
	display: block;
	height: 5px;
	margin-bottom: 5px;
	border-radius: 3px;
	background: rgba(17, 17, 17, .11);
}

/* --- El pie de la tarjeta ------------------------------------------------ */
.muestra__pie {
	display: block;
	padding: .95rem 1.1rem 1.15rem;
	border-top: 1px solid rgba(17, 17, 17, .06);
}

.muestra__pie b {
	display: block;
	font-family: var(--vc-display);
	font-size: 1.0625rem;
	line-height: 1.15;
}

.muestra__pie i {
	display: block;
	margin-top: .2rem;
	font-style: normal;
	font-size: .75rem;
	color: var(--vc-gris);
}

.muestras__pie {
	margin-top: 1.1rem;
	font-size: .75rem;
	color: var(--vc-gris);
	text-align: center;
}

@media (max-width: 780px) {
	.muestras { grid-template-columns: 1fr; gap: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
	.muestra { transition: none; }
}

/* --- Mantenimiento, dentro de la caja de precio -------------------------- */
.mantenimiento {
	margin-top: 1.1rem;
	padding: 1rem 1.15rem;
	background: rgba(242, 239, 233, .08);
	border-left: 4px solid var(--vc-lavanda);
	border-radius: 0 12px 12px 0;
}

.mantenimiento > b {
	display: block;
	margin-bottom: .35rem;
	font-size: .9375rem;
	color: var(--vc-hueso);
}

.mantenimiento p {
	margin: 0;
	font-size: .875rem;
	line-height: 1.55;
	color: rgba(242, 239, 233, .72);
}

.mantenimiento p b { color: var(--vc-lavanda); }

/* --- El salto al contenido: solo para el teclado -------------------------
   Se veia en la esquina de todas las paginas. Sigue existiendo (es como
   quien navega con teclado se brinca el menu), pero solo aparece al
   enfocarlo con el tabulador. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	position: fixed;
	z-index: 999;
	top: .75rem;
	left: .75rem;
	width: auto;
	height: auto;
	margin: 0;
	padding: .6rem 1.1rem;
	clip-path: none;
	background: var(--vc-tinta);
	color: var(--vc-hueso);
	border-radius: 999px;
	font-size: .875rem;
	font-weight: 700;
	text-decoration: none;
}

@media (max-width: 780px) {
	.muestras { grid-template-columns: 1fr; }
}

/* ==========================================================================
   MOVIL — pasada de legibilidad
   Habia 51 textos por debajo de 13px y enlaces de 19px de alto. En una
   pantalla de mano eso no se lee ni se atina: se sube el piso de ambos.
   ========================================================================== */
@media (max-width: 720px) {
	/* Piso de tamanio de letra: nada por debajo de 13px en texto corrido */
	.lp p, .lp-card span, .lp-paso span, .lp-cita p,
	.hlista__c, .muestra__pie i, .cifra span,
	.ruta__paso p, .faq details > p, .fuera li span {
		font-size: .8125rem;
	}

	.prod-hero__quien, .demo__pie, .muestras__pie, .precio-caja__nota {
		font-size: .8125rem;
		line-height: 1.55;
	}

	/* Objetivos tactiles: 44px es la recomendacion, 40 el minimo decente */
	.migas a,
	.pie__grid a,
	.pie__legal a {
		display: inline-block;
		padding-block: .55rem;
	}

	.faq summary { min-height: 3.25rem; padding: 1rem 1.1rem; }

	/* Titulares: en movil el clamp los dejaba casi del tamanio del texto */
	.seccion__head h2 { font-size: clamp(1.6rem, 8vw, 2.1rem); line-height: 1.05; }
	.seccion__head p { font-size: .9375rem; }

	/* Secciones mas apretadas: la pagina medía 14 pantallas */
	.seccion { padding-block: clamp(2rem, 7vw, 2.75rem); }
	.seccion__head { margin-bottom: 1.1rem; }

	/* La ruta ocupaba 1.8 pantallas */
	.ruta { gap: 1.25rem; }
	.ruta__paso { padding: 1rem 1.1rem; }
	.ruta__paso p { margin-top: .15rem; }

	/* El precio */
	.precio-caja { padding: 1.35rem 1.25rem; }
	.mantenimiento { padding: .85rem 1rem; }
}

@media (max-width: 420px) {
	.hlista__c { font-size: .78125rem; padding: 0 .6rem; height: 2.4rem; }
}

@media (max-width: 720px) {
	/* Rotulos propios: los de dentro de la maqueta se quedan chicos porque
	   son parte del dibujo, pero estos los tiene que leer la persona. */
	.lp__etiqueta { font-size: .71875rem; padding: .28rem .65rem; }
	.hdato__k { font-size: .6875rem; }
	.hlista__rotulo, .banner-prob__rotulo { font-size: .75rem; }
}

/* ==========================================================================
   "QUE INCLUYE" EN MOVIL — lista, no pastillas
   Las pastillas se leen bien cuando caben en dos filas. En 375px se parten
   en cinco o seis renglones desordenados y dejan de parecer una lista.
   ========================================================================== */
@media (max-width: 720px) {
	.hlista__rotulo {
		text-align: left;
		margin-bottom: .6rem;
		padding-left: .1rem;
	}

	.hlista {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: .4rem;
		justify-content: stretch;
		min-height: 0 !important;   /* la reserva del carrusel no aplica aqui */
		background: var(--vc-blanco);
		border-radius: 16px;
		padding: .85rem .8rem;
	}

	.hlista__c {
		height: auto;
		min-height: 0;
		padding: 0;
		background: none;
		border: 0;
		border-radius: 0;
		align-items: flex-start;
		gap: .45rem;
		font-size: .8125rem;
		line-height: 1.3;
		text-align: left;
	}

	.hlista__c svg { width: 14px; height: 14px; margin-top: .15rem; }

	/* El que rota se marca con color, no creciendo: en rejilla fija no hay
	   a donde empujar y crecer solo desalinearia la columna. */
	/* Solo cambia de color. La negrita ensancha el texto, y en la rejilla
	   eso reparte distinto los renglones y empuja hacia abajo la pagina. */
	.hlista__c--grande {
		padding: 0;
		font-size: .8125rem;
		border: 0;
		box-shadow: none;
		color: var(--vc-naranja);
	}

	.hlista__c--grande svg { transform: scale(1.15); }

	.hlista__c--grande svg { width: 14px; height: 14px; }
}

@media (max-width: 340px) {
	.hlista { grid-template-columns: 1fr; }
}

/* ==========================================================================
   ENTRADAS AL BAJAR
   Cada bloque entra al aparecer: da ritmo y marca donde empieza una cosa y
   acaba otra.

   En el telefono el gesto es amplio —desplazamiento largo y desenfoque—
   porque todo llega apilado y de uno en uno. En escritorio se ven varias
   secciones a la vez, asi que ahi el mismo gesto se vuelve ruido: entra con
   un empuje corto y sin desenfoque.
   ========================================================================== */
.aparece {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 520ms ease,
	            transform 620ms cubic-bezier(.16, .84, .28, 1);
}

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

/* Los hermanos de una misma fila entran escalonados */
.aparece.dentro:nth-child(2) { transition-delay: 70ms; }
.aparece.dentro:nth-child(3) { transition-delay: 140ms; }
.aparece.dentro:nth-child(4) { transition-delay: 210ms; }
.aparece.dentro:nth-child(5) { transition-delay: 280ms; }
.aparece.dentro:nth-child(6) { transition-delay: 350ms; }

/* En el telefono, el gesto amplio de siempre */
@media (max-width: 979px) {
	.aparece {
		transform: translateY(22px);
		filter: blur(6px);
		transition: opacity 620ms ease,
		            transform 780ms cubic-bezier(.16, .84, .28, 1),
		            filter 620ms ease;
	}
}

@media (prefers-reduced-motion: reduce) {
	.aparece { opacity: 1; transform: none; transition: none; }
}

/* --- Volver arriba ------------------------------------------------------ */
.subir {
	position: fixed;
	z-index: 60;
	right: 1rem;
	bottom: 1rem;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--vc-tinta);
	color: var(--vc-hueso);
	cursor: pointer;
	box-shadow: 0 8px 24px rgba(17, 17, 17, .28);
	opacity: 0;
	transform: translateY(14px) scale(.9);
	pointer-events: none;
	transition: opacity 260ms ease, transform 320ms cubic-bezier(.2, .8, .3, 1);
}

.subir--visible {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.subir:hover { background: var(--vc-naranja); color: var(--vc-blanco); }

@media (prefers-reduced-motion: reduce) {
	.subir { transition: none; }
}

/* --- La rejilla de la portada del Catalogo -------------------------------
   Landing enseña una landing recorriendose; para un catalogo eso no dice
   nada. Aqui lo que vende es ver la rejilla llena de producto. */
.mini-cat { padding: 10px; background: var(--vc-blanco); }

.mini-cat__barra { display: flex; gap: 5px; margin-bottom: 8px; }

.mini-cat__barra b {
	height: 14px;
	border-radius: 999px;
	background: var(--vc-hueso);
}

.mini-cat__barra b:nth-child(1) { width: 42px; background: var(--vc-tinta); }
.mini-cat__barra b:nth-child(2) { width: 34px; }
.mini-cat__barra b:nth-child(3) { width: 38px; }

.mini-cat__rejilla {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 5px;
}

.mini-cat__rejilla i {
	display: block;
	aspect-ratio: 1;
	border-radius: 6px;
	background-color: var(--vc-hueso);
	background-size: cover;
	background-position: center;
	/* Entran escalonadas, como si la rejilla se fuera cargando */
	opacity: 0;
	animation: mini-cat-entra 520ms ease forwards;
}

.mini-cat__rejilla i:nth-child(n)   { animation-delay: calc(60ms * var(--i, 0)); }
.mini-cat__rejilla i:nth-child(1)  { --i: 1; }
.mini-cat__rejilla i:nth-child(2)  { --i: 2; }
.mini-cat__rejilla i:nth-child(3)  { --i: 3; }
.mini-cat__rejilla i:nth-child(4)  { --i: 4; }
.mini-cat__rejilla i:nth-child(5)  { --i: 5; }
.mini-cat__rejilla i:nth-child(6)  { --i: 6; }
.mini-cat__rejilla i:nth-child(7)  { --i: 7; }
.mini-cat__rejilla i:nth-child(8)  { --i: 8; }
.mini-cat__rejilla i:nth-child(9)  { --i: 9; }
.mini-cat__rejilla i:nth-child(10) { --i: 10; }
.mini-cat__rejilla i:nth-child(11) { --i: 11; }
.mini-cat__rejilla i:nth-child(12) { --i: 12; }

@keyframes mini-cat-entra {
	from { opacity: 0; transform: scale(.9); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.mini-cat__rejilla i { opacity: 1; animation: none; }
}

/* ==========================================================================
   LO QUE LLEVA EL CATÁLOGO — cinco recuadros animados
   Para una landing tenia sentido la fila: una landing ES una secuencia. Un
   catalogo no; sus cosas estan todas a la vez, asi que van en recuadros y
   cada uno se anima al entrar en pantalla.

   Las animaciones arrancan con la clase .anda, que pone el JS: si corrieran
   desde el principio, la mitad habrian terminado antes de que nadie baje.
   ========================================================================== */
/* Una por renglon y alternando lado. En rejilla de tres quedaban chicas y
   sobre el mismo beige de la seccion: las animaciones se perdian. */
.rasgos-anim {
	margin-top: var(--vc-s4);
	display: grid;
	gap: 1rem;
}

.rasgo-a {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	align-items: center;
	background: var(--vc-blanco);
	border-radius: 24px;
	overflow: hidden;
	box-shadow: 0 3px 14px rgba(17, 17, 17, .05);
}

/* Zigzag: en las pares el dibujo se va a la derecha */
.rasgo-a:nth-child(even) .rasgo-a__demo { order: 2; }

.rasgo-a__demo {
	position: relative;
	height: 300px;
	display: grid;
	place-items: center;
	padding: 1.5rem;
	overflow: hidden;
	/* Fondo propio, con un resplandor de marca: sobre el beige de la seccion
	   los dibujos se veian flotando en el vacio. */
	background:
		radial-gradient(circle at 30% 30%, rgba(201, 182, 255, .5), transparent 62%),
		radial-gradient(circle at 78% 74%, rgba(252, 84, 9, .16), transparent 58%),
		#f2eee7;
}

/* El texto, centrado con el dibujo y con aire: en fila completa se veia
   chico y arrinconado arriba, con medio recuadro vacio. */
.rasgo-a__txt {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 2.5rem clamp(2rem, 3.4vw, 3.25rem);
}

.rasgo-a h3 {
	margin: .55rem 0 .7rem;
	font-size: clamp(1.35rem, 1.9vw, 1.75rem);
	line-height: 1.2;
	text-wrap: balance;
}

.rasgo-a p {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.6;
	max-width: 38ch;
}

/* Los dibujos, mas grandes al tener el renglon entero */
.rasgo-a__demo .rg-tienda { width: 132px; }
.rasgo-a__demo .rg-card { width: 152px; }
.rasgo-a__demo .rg-rejilla { max-width: 210px; }
.rasgo-a__demo .rg-rejilla--filtra { max-width: 168px; }
.rasgo-a__demo .rg-chat { width: 118px; }

.rasgo-a__n {
	font-family: var(--vc-display);
	font-size: .875rem;
	font-weight: 800;
	color: var(--vc-naranja);
	letter-spacing: .1em;
}

.rasgo-a p { color: var(--vc-gris); }

/* --- Piezas comunes de los dibujos --------------------------------------- */
.rg { position: relative; width: 100%; height: 100%; display: grid; place-items: center; }

.rg-tienda {
	width: 104px;
	padding: 8px;
	border-radius: 10px;
	background: var(--vc-blanco);
	box-shadow: 0 4px 14px rgba(17, 17, 17, .1);
}

.rg-cab { display: flex; align-items: center; gap: 5px; margin-bottom: 7px; }
.rg-cab b { flex: 1; height: 6px; border-radius: 3px; background: #ddd8d0; }

.rg-logo {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #ddd8d0;
	transition: background 460ms ease;
}

.rg-fila { display: flex; gap: 4px; margin-bottom: 7px; }

.rg-fila i {
	flex: 1;
	aspect-ratio: 1;
	border-radius: 5px;
	background: #ece8e2;
	transition: background 460ms ease;
}

.rg-btn {
	display: block;
	width: 48px;
	height: 13px;
	border-radius: 999px;
	background: #ddd8d0;
	transition: background 460ms ease;
}

/* --- 1. La marca que se transforma --------------------------------------- */
.rg--marca { grid-template-columns: 1fr auto 1fr; gap: .5rem; }

.rg-flecha { position: relative; width: 34px; height: 34px; }

.rg-flecha::after {
	content: "";
	position: absolute;
	inset: 0;
	background: no-repeat center/18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
	opacity: .35;
}

/* Las gotas: el logo y los dos colores que caen sobre la tienda de la derecha */
.rg-gota {
	position: absolute;
	top: -22px;
	left: 50%;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	opacity: 0;
	transform: translateX(-50%);
}

.rg-gota--logo { background: var(--vc-tinta); }
.rg-gota--c1   { background: #e07a9c; }
.rg-gota--c2   { background: #ffeaf1; }

.anda .rg-gota { animation: rg-cae 2.6s ease-in-out infinite; }
.anda .rg-gota--c1 { animation-delay: .35s; }
.anda .rg-gota--c2 { animation-delay: .7s; }

@keyframes rg-cae {
	0%       { opacity: 0; transform: translate(-50%, 0) scale(.6); }
	18%      { opacity: 1; transform: translate(-50%, 14px) scale(1); }
	46%      { opacity: 1; transform: translate(-50%, 46px) scale(1); }
	60%, 100% { opacity: 0; transform: translate(-50%, 52px) scale(.4); }
}

/* La tienda de la derecha se pinta cuando llegan las gotas */
.anda .rg-tienda--marca .rg-logo { animation: rg-pinta-logo 2.6s ease-in-out infinite; }
.anda .rg-tienda--marca .rg-fila i { animation: rg-pinta-foto 2.6s ease-in-out infinite; }
.anda .rg-tienda--marca .rg-fila i:nth-child(2) { animation-delay: .1s; }
.anda .rg-tienda--marca .rg-fila i:nth-child(3) { animation-delay: .2s; }
.anda .rg-tienda--marca .rg-btn { animation: rg-pinta-btn 2.6s ease-in-out infinite; }
.anda .rg-tienda--marca .rg-cab b { animation: rg-pinta-btn 2.6s ease-in-out infinite; }

@keyframes rg-pinta-logo {
	0%, 24%  { background: #ddd8d0; }
	42%, 88% { background: var(--vc-tinta); }
	100%     { background: #ddd8d0; }
}

@keyframes rg-pinta-foto {
	0%, 32%  { background: #ece8e2; }
	50%, 88% { background: #ffeaf1; }
	100%     { background: #ece8e2; }
}

@keyframes rg-pinta-btn {
	0%, 40%  { background: #ddd8d0; }
	58%, 88% { background: #e07a9c; }
	100%     { background: #ddd8d0; }
}

/* --- 2. Foto, precio y contacto ------------------------------------------ */
.rg--ficha { place-items: center; }

.rg-card {
	position: relative;
	width: 118px;
	padding: 9px;
	border-radius: 12px;
	background: var(--vc-blanco);
	box-shadow: 0 6px 20px rgba(17, 17, 17, .12);
}

.rg-card__foto {
	display: block;
	aspect-ratio: 1;
	border-radius: 8px;
	background: #ffeaf1 no-repeat center/cover;
	margin-bottom: 7px;
}

.rg-card__precio {
	display: block;
	margin-bottom: 6px;
	font-family: var(--vc-display);
	font-size: .9375rem;
	text-transform: none;
}

.rg-card__wa {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 4px 6px;
	border-radius: 999px;
	background: #25d366;
	color: #fff;
	font-size: .5625rem;
	font-weight: 700;
}

.anda .rg-card__wa { animation: rg-late 2.2s ease-out infinite; }

@keyframes rg-late {
	0%, 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .5); }
	40%      { box-shadow: 0 0 0 9px rgba(37, 211, 102, 0); }
}

.rg-globo {
	position: absolute;
	right: 4px;
	bottom: 18px;
	padding: .3rem .6rem;
	border-radius: 12px 12px 3px 12px;
	background: var(--vc-tinta);
	color: var(--vc-hueso);
	font-size: .5625rem;
	opacity: 0;
}

.anda .rg-globo { animation: rg-globo 2.2s ease-out infinite; }

@keyframes rg-globo {
	0%, 30%   { opacity: 0; transform: translateY(6px) scale(.9); }
	48%, 82%  { opacity: 1; transform: none; }
	100%      { opacity: 0; transform: translateY(6px) scale(.9); }
}

/* --- 3. El pedido que llega armado --------------------------------------- */
.rg--pedido { grid-template-columns: 1fr 1fr; gap: .6rem; }

.rg-vuela {
	position: absolute;
	left: 14%;
	top: 30%;
	width: 20px;
	height: 20px;
	border-radius: 5px;
	background: #ffeaf1;
	opacity: 0;
}

.anda .rg-vuela { animation: rg-vuela 3s ease-in-out infinite; }
.anda .rg-vuela--2 { animation-delay: .4s; background: #e07a9c; }
.anda .rg-vuela--3 { animation-delay: .8s; background: #ffd9c2; }

@keyframes rg-vuela {
	0%       { opacity: 0; transform: translate(0, 0) scale(.7); }
	14%      { opacity: 1; transform: translate(0, 0) scale(1); }
	40%      { opacity: 1; transform: translate(30px, -18px) scale(.6); }
	52%, 100% { opacity: 0; transform: translate(34px, -22px) scale(.3); }
}

.rg-carro {
	position: absolute;
	left: 34%;
	top: 12%;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--vc-blanco);
	color: var(--vc-tinta);
	box-shadow: 0 4px 14px rgba(17, 17, 17, .12);
}

.rg-carro__n {
	position: absolute;
	top: -3px;
	right: -3px;
	display: grid;
	place-items: center;
	width: 17px;
	height: 17px;
	border-radius: 50%;
	background: var(--vc-naranja);
	color: #fff;
	font-style: normal;
	font-size: .5625rem;
	font-weight: 700;
	transform: scale(0);
}

.anda .rg-carro__n { animation: rg-cuenta 3s ease-out infinite; }

@keyframes rg-cuenta {
	0%, 40%  { transform: scale(0); }
	52%      { transform: scale(1.25); }
	60%, 100% { transform: scale(1); }
}

.rg-chat {
	position: absolute;
	right: 8%;
	bottom: 12%;
	width: 96px;
	padding: 8px 9px;
	border-radius: 10px 10px 10px 3px;
	background: #dcf8c6;
	opacity: 0;
}

.anda .rg-chat { animation: rg-chat 3s ease-out infinite; }

@keyframes rg-chat {
	0%, 58%   { opacity: 0; transform: translateY(8px); }
	70%, 92%  { opacity: 1; transform: none; }
	100%      { opacity: 0; transform: translateY(8px); }
}

.rg-chat__l {
	display: block;
	height: 4px;
	margin-bottom: 4px;
	border-radius: 2px;
	background: rgba(17, 17, 17, .22);
}

.rg-chat__l:nth-child(2) { width: 82%; }
.rg-chat__l:nth-child(3) { width: 64%; }

.rg-chat__total {
	display: block;
	width: 44%;
	height: 6px;
	border-radius: 3px;
	background: var(--vc-tinta);
}

/* --- 4. Cien productos ---------------------------------------------------- */
.rg-rejilla {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 4px;
	width: 100%;
	max-width: 160px;
}

.rg-rejilla i {
	aspect-ratio: 1;
	border-radius: 4px;
	background: #ffeaf1;
	opacity: 0;
	transform: scale(.6);
}

.anda .rg--cien .rg-rejilla i { animation: rg-pop 3.4s ease-out infinite; }

.rg--cien .rg-rejilla i:nth-child(n)    { animation-delay: calc(70ms * var(--k, 0)); }
.rg--cien .rg-rejilla i:nth-child(1)  { --k: 1; }
.rg--cien .rg-rejilla i:nth-child(2)  { --k: 2; }
.rg--cien .rg-rejilla i:nth-child(3)  { --k: 3; }
.rg--cien .rg-rejilla i:nth-child(4)  { --k: 4; }
.rg--cien .rg-rejilla i:nth-child(5)  { --k: 5; }
.rg--cien .rg-rejilla i:nth-child(6)  { --k: 6; }
.rg--cien .rg-rejilla i:nth-child(7)  { --k: 7; }
.rg--cien .rg-rejilla i:nth-child(8)  { --k: 8; }
.rg--cien .rg-rejilla i:nth-child(9)  { --k: 9; }
.rg--cien .rg-rejilla i:nth-child(10) { --k: 10; }
.rg--cien .rg-rejilla i:nth-child(11) { --k: 11; }
.rg--cien .rg-rejilla i:nth-child(12) { --k: 12; }
.rg--cien .rg-rejilla i:nth-child(13) { --k: 13; }
.rg--cien .rg-rejilla i:nth-child(14) { --k: 14; }
.rg--cien .rg-rejilla i:nth-child(15) { --k: 15; }
.rg--cien .rg-rejilla i:nth-child(16) { --k: 16; }
.rg--cien .rg-rejilla i:nth-child(17) { --k: 17; }
.rg--cien .rg-rejilla i:nth-child(18) { --k: 18; }

@keyframes rg-pop {
	0%       { opacity: 0; transform: scale(.6); }
	14%, 82% { opacity: 1; transform: none; }
	100%     { opacity: 0; transform: scale(.6); }
}

.rg-cuenta {
	position: absolute;
	right: 10px;
	bottom: 8px;
	font-family: var(--vc-display);
	font-size: 1.5rem;
	color: var(--vc-naranja);
	text-transform: none;
}

/* --- 5. Categorías -------------------------------------------------------- */
.rg--cats { grid-template-rows: auto 1fr; gap: .7rem; align-content: center; }

.rg-chips { display: flex; gap: 4px; justify-content: center; }

.rg-chip {
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--vc-blanco);
	font-style: normal;
	font-size: .5625rem;
	font-weight: 700;
	color: var(--vc-gris);
	transition: background 300ms ease, color 300ms ease;
}

.anda .rg-chip:nth-child(1) { animation: rg-chip 5.4s ease-out infinite; }
.anda .rg-chip:nth-child(2) { animation: rg-chip 5.4s ease-out infinite 1.8s; }
.anda .rg-chip:nth-child(3) { animation: rg-chip 5.4s ease-out infinite 3.6s; }

@keyframes rg-chip {
	0%, 32%   { background: var(--vc-blanco); color: var(--vc-gris); }
	4%, 30%   { background: var(--vc-tinta); color: var(--vc-hueso); }
	33%, 100% { background: var(--vc-blanco); color: var(--vc-gris); }
}

.rg-rejilla--filtra { grid-template-columns: repeat(3, 1fr); max-width: 128px; }
.rg-rejilla--filtra i { opacity: 1; transform: none; }
.rg-rejilla--filtra i[data-c="a"] { background: #e07a9c; }
.rg-rejilla--filtra i[data-c="b"] { background: #ffd9c2; }
.rg-rejilla--filtra i[data-c="c"] { background: var(--vc-lavanda); }

/* Al pasar cada categoria, las que no son se apagan */
.anda .rg-rejilla--filtra i[data-c="a"] { animation: rg-filtra-a 5.4s ease-out infinite; }
.anda .rg-rejilla--filtra i[data-c="b"] { animation: rg-filtra-b 5.4s ease-out infinite; }
.anda .rg-rejilla--filtra i[data-c="c"] { animation: rg-filtra-c 5.4s ease-out infinite; }

@keyframes rg-filtra-a {
	0%, 32%   { opacity: 1; transform: none; }
	36%, 63%  { opacity: 1; transform: none; }
	67%, 96%  { opacity: .16; transform: scale(.86); }
	100%      { opacity: 1; transform: none; }
}

@keyframes rg-filtra-b {
	0%, 32%   { opacity: 1; transform: none; }
	36%, 63%  { opacity: .16; transform: scale(.86); }
	67%, 96%  { opacity: 1; transform: none; }
	100%      { opacity: 1; transform: none; }
}

@keyframes rg-filtra-c {
	0%, 32%   { opacity: 1; transform: none; }
	36%, 96%  { opacity: .16; transform: scale(.86); }
	100%      { opacity: 1; transform: none; }
}

/* --- Pantallas chicas ----------------------------------------------------- */
@media (max-width: 820px) {
	.rasgo-a { grid-template-columns: 1fr; }
	.rasgo-a:nth-child(even) .rasgo-a__demo { order: 0; }
	.rasgo-a__demo { height: 205px; padding: 1.1rem; }
	.rasgo-a__txt { padding: 1.4rem 1.4rem 1.6rem; }
	.rasgo-a h3 { font-size: 1.1875rem; }
	.rasgo-a p { font-size: .9375rem; max-width: none; }
	.rasgo-a__demo .rg-tienda { width: 108px; }
	.rasgo-a__demo .rg-card { width: 124px; }
}

@media (prefers-reduced-motion: reduce) {
	.anda .rg-gota, .anda .rg-card__wa, .anda .rg-globo, .anda .rg-vuela,
	.anda .rg-carro__n, .anda .rg-chat, .anda .rg--cien .rg-rejilla i,
	.anda .rg-chip, .anda .rg-rejilla--filtra i,
	.anda .rg-tienda--marca .rg-logo, .anda .rg-tienda--marca .rg-fila i,
	.anda .rg-tienda--marca .rg-btn, .anda .rg-tienda--marca .rg-cab b {
		animation: none;
	}

	/* Sin animacion se enseña el estado final, que es el que explica */
	.rg-gota, .rg-vuela, .rg-globo, .rg-chat { opacity: 1; }
	.rg-carro__n { transform: scale(1); }
	.rg--cien .rg-rejilla i { opacity: 1; transform: none; }
	.rg-tienda--marca .rg-logo { background: var(--vc-tinta); }
	.rg-tienda--marca .rg-fila i { background: #ffeaf1; }
	.rg-tienda--marca .rg-btn, .rg-tienda--marca .rg-cab b { background: #e07a9c; }
}

/* --- El caso real: un catalogo que se puede abrir ------------------------ */
.caso-real {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	align-items: stretch;
	margin-top: var(--vc-s4);
	background: var(--vc-blanco);
	border-radius: 24px;
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	box-shadow: 0 14px 38px rgba(17, 17, 17, .1);
	transition: transform 260ms ease, box-shadow 260ms ease;
}

.caso-real:hover { transform: translateY(-4px); box-shadow: 0 22px 52px rgba(17, 17, 17, .16); }

.caso-real__foto { margin: 0; overflow: hidden; }
.caso-real__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.caso-real:hover .caso-real__foto img { transform: scale(1.04); }

.caso-real__txt {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 2.25rem 2.25rem;
}

.caso-real__eti {
	align-self: flex-start;
	padding: .25rem .7rem;
	border-radius: 999px;
	background: var(--vc-lavanda);
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
}

.caso-real h3 { margin: .8rem 0 .5rem; font-size: 1.5rem; }
.caso-real p { margin: 0; font-size: .9375rem; color: var(--vc-gris); line-height: 1.55; }

.caso-real__ver {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin-top: 1.2rem;
	font-size: .875rem;
	font-weight: 700;
	color: var(--vc-naranja);
}

.caso-real:hover .caso-real__ver svg { transform: translateX(3px); }
.caso-real__ver svg { transition: transform 200ms ease; }

@media (max-width: 820px) {
	.caso-real { grid-template-columns: 1fr; }
	.caso-real__foto { aspect-ratio: 16 / 9; }
	.caso-real__txt { padding: 1.4rem 1.4rem 1.6rem; }
	.caso-real h3 { font-size: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
	.caso-real, .caso-real__foto img, .caso-real__ver svg { transition: none; }
}

/* ==========================================================================
   PORTADA A DOS COLUMNAS — solo el Catálogo
   La de Landing es centrada. Esta reparte: texto a la izquierda, producto a
   la derecha y una tarjeta flotando encima con el dato que mas pesa. Asi las
   cinco paginas no se ven calcadas, pero se queda en la misma linea —misma
   tipografia, misma paleta, mismas esquinas.
   ========================================================================== */
@media (min-width: 1000px) {
	.portada--lado .prod-hero {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
		grid-template-areas:
			"migas  escena"
			"texto  escena"
			"lista  lista";
		column-gap: clamp(2rem, 4vw, 3.5rem);
		align-items: center;
		text-align: left;
	}

	.portada--lado .migas { grid-area: migas; justify-content: flex-start; align-self: end; }

	.portada--lado .prod-hero__pill,
	.portada--lado .prod-hero__titulo,
	.portada--lado .prod-hero__promesa,
	.portada--lado .prod-hero__precio,
	.portada--lado .prod-hero__acciones,
	.portada--lado .prod-hero__quien { grid-column: 1; }

	.portada--lado .prod-hero__pill { grid-row: 2; justify-self: start; }
	.portada--lado .prod-hero__titulo { grid-row: 3; }
	.portada--lado .prod-hero__promesa { grid-row: 4; margin-inline: 0; }
	.portada--lado .prod-hero__precio { grid-row: 5; text-align: left; }
	.portada--lado .prod-hero__acciones { grid-row: 6; justify-content: flex-start; }
	.portada--lado .prod-hero__quien { grid-row: 7; margin-inline: 0; }

	.portada--lado .prod-hero__escena {
		grid-area: escena;
		grid-row: 2 / 8;
		margin-top: 0;
	}

	.portada--lado .hlista__rotulo,
	.portada--lado .hlista { grid-area: lista; }
	.portada--lado .hlista__rotulo { grid-row: 8; text-align: left; }
	.portada--lado .hlista { grid-row: 9; justify-content: flex-start; }

	.portada--lado .prod-hero__titulo {
		font-size: clamp(2.2rem, 4.2vw, 3.4rem);
		text-wrap: balance;
	}

	/* El titular a dos tonos, como en la referencia: la segunda mitad en
	   gris para que la primera pese mas. */
	.portada--lado .prod-hero__titulo .resalta { color: var(--vc-naranja); }

	.portada--lado .prod-hero__marco { width: 100%; }

	/* Las tarjetas de dato dejan de rodear y se apoyan sobre la imagen, como
	   la tarjeta flotante de la referencia. */
	.portada--lado .hdato {
		top: auto;
		bottom: -14px;
	}

	.portada--lado .hdato--izq-a { left: -22px; bottom: 22%; top: auto; }
	.portada--lado .hdato--der-a { right: -22px; top: 14%; bottom: auto; }
	.portada--lado .hdato--izq-b { left: 6%; bottom: -18px; top: auto; }
	.portada--lado .hdato--der-b { right: 6%; bottom: -18px; top: auto; }
}

/* ==========================================================================
   EL MENU QUE SE DESPLIEGA
   Paquetes, Proyectos y Servicios abren un panel al pasar el cursor. El
   enlace de arriba sigue bajando a su seccion, igual que antes, y el panel
   termina en "Ver todo" para quien busque justo eso.

   Se abre tambien con el foco del teclado (:focus-within), asi que se puede
   recorrer con Tab sin raton.
   ========================================================================== */
.nav__item {
	position: relative;
	display: flex;
	align-items: center;
}

.nav__item > a {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
}

.nav__chev { transition: transform 200ms ease; }
.nav__item:hover .nav__chev,
.nav__item:focus-within .nav__chev { transform: rotate(180deg); }

.submenu {
	position: absolute;
	top: 100%;
	left: 50%;
	z-index: 60;
	width: 290px;
	padding: .5rem;
	transform: translate(-50%, 6px);
	border-radius: 16px;
	background: var(--vc-blanco);
	box-shadow: 0 18px 44px rgba(17, 17, 17, .16);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
}

/* El hueco entre el enlace y el panel se cubre con un puente invisible: sin
   el, el menu se cierra al cruzarlo con el raton. */
.submenu::before {
	content: "";
	position: absolute;
	inset: -14px 0 auto 0;
	height: 14px;
}

.nav__item:hover .submenu,
.nav__item:focus-within .submenu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translate(-50%, 0);
}

.submenu__lista { display: grid; gap: 2px; }

.submenu__op {
	display: flex;
	align-items: center;
	gap: .7rem;
	padding: .55rem .65rem;
	border-radius: 11px;
	color: var(--vc-tinta);
	text-decoration: none;
	transition: background 160ms ease;
}

.submenu__op:hover { background: #f4f1ec; }

.submenu__i {
	flex: 0 0 auto;
	width: 19px;
	height: 19px;
	color: var(--vc-naranja);
}

.submenu__op span { display: block; min-width: 0; }
.submenu__op b {
	display: block;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
}

.submenu__op i {
	display: block;
	margin-top: .1rem;
	font-size: .6875rem;
	font-style: normal;
	line-height: 1.35;
	color: var(--vc-gris);
	letter-spacing: 0;
	text-transform: none;
}

/* Proyectos no lleva icono: el nombre ya identifica */
.submenu--proy .submenu__op { padding-left: .8rem; }

.submenu__todo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: .35rem;
	padding: .6rem .8rem;
	border-top: 1px solid #ece7df;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--vc-naranja);
	text-decoration: none;
}

.submenu__todo svg { transition: transform 180ms ease; }
.submenu__todo:hover svg { transform: translateX(3px); }

/* En pantallas de tacto no hay "pasar el cursor": el enlace baja a su
   seccion, que es lo que hacia antes, y el panel no estorba. */
@media (max-width: 900px), (hover: none) {
	.submenu { display: none; }
	.nav__chev { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.submenu, .nav__chev, .submenu__todo svg { transition: none; }
}

/* Los logos cuadrados quedaban a la mitad que los anchos: el tope de la tira
   es de alto, no de area, asi que uno de 1:1 a 51 px pinta mucho menos que
   uno de 6:1 a 225 px. A estos se les deja crecer a lo alto. */
.marca-logo--alto { max-height: 78px; max-width: 78px; }

@media (max-width: 900px) {
	.marca-logo--alto { max-height: 52px; max-width: 52px; }
}

/* La barra fija de la home: un mensaje centrado en vez del precio, que
   ademas nunca se lleno y salia como "Desde [TU PRECIO]". */
@media (max-width: 900px) {
	.barra-venta__recado {
		flex: 1 1 auto;
		min-width: 0;
		line-height: 1.25;
		color: var(--vc-hueso);
	}

	.barra-venta__recado b {
		display: block;
		font-family: var(--vc-display);
		font-size: .8125rem;
		font-weight: 800;
		letter-spacing: -.01em;
	}

	.barra-venta__recado span {
		display: block;
		font-size: .625rem;
		color: rgba(242, 239, 233, .62);
	}
}

/* ==========================================================================
   DIBUJOS DE LA TIENDA EN LÍNEA
   Reusan las piezas .rg del catálogo donde sirven. Cada uno arranca cuando
   su recuadro entra en pantalla (la clase .anda la pone el observador), no
   antes: si corren todos a la vez no se mira ninguno.
   ========================================================================== */

/* --- 01 · Vitrina: la rejilla y una ficha que sale al frente ------------- */
.rg--vitrina { display: grid; place-items: center; }

.rg--vitrina .rg-tienda {
	width: 150px;
	transform: translate(-16px, 6px);
}

.rg--vitrina .rg-card {
	position: absolute;
	right: 14%;
	bottom: 12%;
	width: 118px;
	opacity: 0;
	transform: translateY(14px) scale(.94);
	transition: opacity 420ms ease, transform 420ms cubic-bezier(.2, .8, .3, 1);
}

.anda .rg--vitrina .rg-card { opacity: 1; transform: none; transition-delay: 380ms; }

.rg-card__var { display: flex; gap: 4px; margin-top: 6px; }
.rg-card__var i {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #d9d2c6;
}
.rg-card__var i:nth-child(1) { background: var(--vc-naranja); }
.rg-card__var i:nth-child(2) { background: var(--vc-lavanda); }

/* --- 02 · Cobro: el total, las vías de pago y la palomita ---------------- */
.rg--cobro { display: grid; place-items: center; }

.rg-tpv {
	width: 178px;
	padding: 14px;
	border-radius: 14px;
	background: var(--vc-blanco);
	box-shadow: 0 8px 22px rgba(17, 17, 17, .12);
}

.rg-tpv__l { display: block; width: 54%; height: 6px; border-radius: 3px; background: #e6e0d6; }

.rg-tpv__total {
	display: block;
	margin: 9px 0 11px;
	font-family: var(--vc-display);
	font-size: 1.3rem;
	font-weight: 800;
	color: var(--vc-tinta);
}

.rg-tpv__vias { display: flex; gap: 5px; }

.rg-via {
	width: 30px;
	height: 20px;
	border-radius: 4px;
	background: #ece7df;
	opacity: .35;
}

.rg-via--tarjeta  { background: #2b6cb0; }
.rg-via--oxxo     { background: #d63a2f; }
.rg-via--transfer { background: #2f855a; }
.rg-via--paypal   { background: #1a3a7a; }

/* Se encienden una tras otra */
.anda .rg--cobro .rg-via { animation: rg-enciende 1.9s ease-in-out infinite; }
.anda .rg--cobro .rg-via--oxxo     { animation-delay: .16s; }
.anda .rg--cobro .rg-via--transfer { animation-delay: .32s; }
.anda .rg--cobro .rg-via--paypal   { animation-delay: .48s; }

@keyframes rg-enciende {
	0%, 60%, 100% { opacity: .28; }
	18%, 40%      { opacity: 1; }
}

.rg-tpv__btn {
	display: block;
	height: 24px;
	margin-top: 11px;
	border-radius: 7px;
	background: var(--vc-tinta);
}

.rg-palomita {
	position: absolute;
	right: 18%;
	bottom: 18%;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: #2f855a;
	color: #fff;
	opacity: 0;
	transform: scale(.5);
}

.anda .rg-palomita { animation: rg-sella 1.9s ease-in-out .95s infinite; }

@keyframes rg-sella {
	0%        { opacity: 0; transform: scale(.5); }
	14%, 55%  { opacity: 1; transform: scale(1); }
	72%, 100% { opacity: 0; transform: scale(1.15); }
}

/* --- 03 · Envío: código postal, ruta y fecha ----------------------------- */
.rg--envio {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .55rem;
}

.rg-cp { display: flex; gap: 4px; }
.rg-cp i {
	width: 21px;
	height: 27px;
	border-radius: 5px;
	background: var(--vc-blanco);
	box-shadow: inset 0 0 0 1.5px #ded7cb;
}

.anda .rg-cp i { animation: rg-teclea 2.4s steps(1) infinite; }
.anda .rg-cp i:nth-child(2) { animation-delay: .13s; }
.anda .rg-cp i:nth-child(3) { animation-delay: .26s; }
.anda .rg-cp i:nth-child(4) { animation-delay: .39s; }
.anda .rg-cp i:nth-child(5) { animation-delay: .52s; }

@keyframes rg-teclea {
	0%, 24%   { box-shadow: inset 0 0 0 1.5px #ded7cb; }
	26%, 100% { box-shadow: inset 0 0 0 1.5px var(--vc-tinta); }
}

.rg-ruta { position: relative; display: block; color: #b9b1a4; }

.rg-caja {
	position: absolute;
	top: 24px;
	left: 4px;
	width: 15px;
	height: 15px;
	border-radius: 3px;
	background: var(--vc-naranja);
	opacity: 0;
}

.anda .rg-caja { animation: rg-viaja 2.4s cubic-bezier(.5, 0, .5, 1) .7s infinite; }

@keyframes rg-viaja {
	0%   { transform: translate(0, 0); opacity: 0; }
	10%  { opacity: 1; }
	50%  { transform: translate(58px, -24px); }
	90%  { opacity: 1; }
	100% { transform: translate(118px, 0); opacity: 0; }
}

.rg-fecha {
	font-size: .75rem;
	font-weight: 700;
	color: var(--vc-gris);
	opacity: 0;
	transform: translateY(5px);
	transition: opacity 320ms ease, transform 320ms ease;
}
.rg-fecha span { color: var(--vc-tinta); }
.anda .rg-fecha { opacity: 1; transform: none; transition-delay: 1.5s; }

/* --- 04 · Inventario y cupones ------------------------------------------ */
.rg--stock {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .6rem;
}

.rg-fila-stock {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .5rem .85rem;
	border-radius: 11px;
	background: var(--vc-blanco);
	box-shadow: 0 6px 18px rgba(17, 17, 17, .1);
}

.rg-etiq {
	font-size: .625rem;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--vc-gris);
}

.rg-cuenta--baja { font-size: 1.15rem; color: var(--vc-tinta); }

.rg-agotado {
	padding: .25rem .6rem;
	border-radius: 999px;
	background: #d63a2f;
	color: #fff;
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	opacity: 0;
	transform: scale(.8);
	transition: opacity 300ms ease, transform 300ms cubic-bezier(.2, .9, .3, 1);
}
.anda .rg-agotado { opacity: 1; transform: none; transition-delay: 1.7s; }

.rg-cupon {
	position: relative;
	display: grid;
	place-items: center;
	width: 74px;
	height: 38px;
	border-radius: 8px;
	background: var(--vc-naranja);
	color: #fff;
}
.rg-cupon b { font-family: var(--vc-display); font-size: .9rem; font-weight: 800; }

/* Las muescas del cupón, a los lados */
.rg-cupon__corte::before,
.rg-cupon__corte::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 11px;
	height: 11px;
	margin-top: -5.5px;
	border-radius: 50%;
	background: #f2eee7;
}
.rg-cupon__corte::before { left: -5.5px; }
.rg-cupon__corte::after  { right: -5.5px; }

.anda .rg-cupon { animation: rg-late 2.6s ease-in-out 2s infinite; }
@keyframes rg-late {
	0%, 100%  { transform: rotate(-3deg) scale(1); }
	50%       { transform: rotate(3deg) scale(1.06); }
}

/* --- 05 · Los tres correos --------------------------------------------- */
.rg--correos {
	display: flex;
	flex-direction: column;
	gap: .45rem;
	width: 100%;
	max-width: 210px;
}

.rg-sobre {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .5rem .7rem;
	border-radius: 10px;
	background: var(--vc-blanco);
	box-shadow: 0 5px 15px rgba(17, 17, 17, .08);
	font-size: .6875rem;
	font-weight: 700;
	color: var(--vc-tinta);
	opacity: 0;
	transform: translateX(-14px);
	transition: opacity 380ms ease, transform 380ms cubic-bezier(.2, .8, .3, 1);
}

.rg-sobre i {
	flex: none;
	width: 20px;
	height: 14px;
	border-radius: 3px;
	background: var(--vc-lavanda);
	box-shadow: inset 0 0 0 1.5px rgba(17, 17, 17, .18);
}
.rg-sobre--2 i { background: #9ad3b0; }
.rg-sobre--3 i { background: var(--vc-naranja); }

.anda .rg-sobre { opacity: 1; transform: none; }
.anda .rg-sobre--1 { transition-delay: .25s; }
.anda .rg-sobre--2 { transition-delay: .75s; }
.anda .rg-sobre--3 { transition-delay: 1.25s; }

/* --- 06 · El panel ----------------------------------------------------- */
.rg--panel { display: grid; place-items: center; }

.rg-panel {
	display: flex;
	width: 190px;
	height: 118px;
	border-radius: 12px;
	overflow: hidden;
	background: var(--vc-blanco);
	box-shadow: 0 8px 22px rgba(17, 17, 17, .12);
}

.rg-panel__lado {
	flex: none;
	width: 42px;
	padding: 10px 8px;
	display: flex;
	flex-direction: column;
	gap: 7px;
	background: var(--vc-tinta);
}
.rg-panel__lado i { height: 6px; border-radius: 3px; background: rgba(242, 239, 233, .3); }
.rg-panel__lado i:first-child { background: var(--vc-naranja); }

.rg-panel__cuerpo { flex: 1; padding: 11px; display: flex; flex-direction: column; gap: 10px; }

.rg-kpi { display: flex; align-items: baseline; gap: 6px; }
.rg-kpi .rg-cuenta { font-size: 1.25rem; }
.rg-kpi i { flex: 1; height: 5px; border-radius: 3px; background: #eae4da; }

.rg-barras { display: flex; align-items: flex-end; gap: 5px; height: 46px; }
.rg-barras i {
	flex: 1;
	border-radius: 3px 3px 0 0;
	background: var(--vc-lavanda);
	height: 22%;
	transform-origin: bottom;
	transition: height 520ms cubic-bezier(.2, .8, .3, 1);
}
.anda .rg-barras i:nth-child(1) { height: 38%; transition-delay: .30s; }
.anda .rg-barras i:nth-child(2) { height: 62%; transition-delay: .40s; }
.anda .rg-barras i:nth-child(3) { height: 46%; transition-delay: .50s; }
.anda .rg-barras i:nth-child(4) { height: 84%; transition-delay: .60s; background: var(--vc-naranja); }
.anda .rg-barras i:nth-child(5) { height: 58%; transition-delay: .70s; }
.anda .rg-barras i:nth-child(6) { height: 72%; transition-delay: .80s; }

.rg-play {
	position: absolute;
	right: 18%;
	bottom: 15%;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--vc-naranja);
	color: #fff;
	box-shadow: 0 6px 16px rgba(252, 84, 9, .38);
}
.anda .rg-play { animation: rg-pulso 2.4s ease-in-out 1s infinite; }
@keyframes rg-pulso {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
	.rg--vitrina .rg-card,
	.rg-fecha, .rg-agotado, .rg-sobre { opacity: 1; transform: none; transition: none; }
	.rg-palomita, .rg-caja { opacity: 1; transform: none; }
	.anda .rg-via, .anda .rg-cp i, .anda .rg-caja, .anda .rg-cupon,
	.anda .rg-play, .anda .rg-palomita { animation: none; }
	.rg-via { opacity: 1; }
	.rg-barras i { transition: none; }
}

/* ==========================================================================
   PORTADA EN ABANICO — solo la Tienda en línea
   Landing va centrada, Catálogo a dos columnas y esta abre con producto de
   verdad desplegado en abanico. Las tres se quedan en la misma línea —misma
   tipografía, misma paleta, mismas esquinas— pero ninguna se lee como la
   copia de la otra.

   El titular pesa más que en las demás a propósito: aquí la escena de abajo
   es la que argumenta, así que arriba basta una frase grande.
   ========================================================================== */
.portada--abanico .prod-hero { text-align: center; }

.portada--abanico .prod-hero__titulo {
	font-size: clamp(2.4rem, 6.4vw, 5rem);
	line-height: 1.02;
	letter-spacing: -.03em;
	text-wrap: balance;
	max-width: 15ch;
	margin-inline: auto;
}

.portada--abanico .prod-hero__promesa {
	max-width: 46ch;
	margin-inline: auto;
	font-size: clamp(1rem, 1.5vw, 1.125rem);
}

.portada--abanico .prod-hero__acciones { justify-content: center; }

/* --- El abanico ---------------------------------------------------------
   Cartas superpuestas con rotación creciente hacia los lados. Se colocan
   con margen negativo en vez de posición absoluta para que la fila mida
   sola y no haya que fijarle un alto a mano. */
.prod-hero__escena--abanico {
	/* La rejilla de .prod-hero__escena existe para colocar el navegador y
	   sus cuatro tarjetas flotantes. Aqui solo hay cartas y pie, y esa
	   rejilla los ponia lado a lado. */
	display: block;
	margin-top: clamp(2rem, 4vw, 3.2rem);
	/* Recorta a lo ancho para que las cartas de los extremos no saquen barra
	   horizontal. Por abajo ya no corta nada: el relleno del abanico deja
	   sitio de sobra para la sombra. */
	overflow: hidden;
	padding-inline: var(--vc-gut);
}

.abanico {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	/* Abajo hace falta sitio de sobra: las cartas de los extremos bajan 26 px
	   al girar y su sombra difumina otros 34. Con menos, el recorte del
	   contenedor la cortaba en seco y dejaba una franja gris. */
	padding-block: 2.4rem 4.5rem;
}

.abanico__c {
	width: clamp(104px, 13vw, 178px);
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: 14px;
	background: #e7e2d8;
	box-shadow: 0 14px 34px rgba(17, 17, 17, .22);
	transition: transform 420ms cubic-bezier(.2, .8, .3, 1);
}

/* Se montan unas sobre otras */
.abanico__c + .abanico__c { margin-left: clamp(-46px, -3.6vw, -26px); }

/* El abanico: gira más y baja más cuanto más lejos del centro */
.abanico__c--1 { transform: rotate(-15deg) translateY(26px); z-index: 1; }
.abanico__c--2 { transform: rotate(-10deg) translateY(13px); z-index: 2; }
.abanico__c--3 { transform: rotate(-5deg)  translateY(4px);  z-index: 3; }
.abanico__c--4 { transform: rotate(0deg)   translateY(-6px); z-index: 4; }
.abanico__c--5 { transform: rotate(5deg)   translateY(4px);  z-index: 3; }
.abanico__c--6 { transform: rotate(10deg)  translateY(13px); z-index: 2; }
.abanico__c--7 { transform: rotate(15deg)  translateY(26px); z-index: 1; }

/* Al pasar el cursor, la carta se endereza y sube al frente */
@media (hover: hover) and (pointer: fine) {
	.abanico__c:hover {
		transform: rotate(0deg) translateY(-22px) scale(1.06);
		z-index: 9;
		box-shadow: 0 26px 54px rgba(17, 17, 17, .3);
	}
}

/* Entran desplegándose al cargar: parten apiladas y se abren */
@media (prefers-reduced-motion: no-preference) {
	.abanico__c { animation: abanico-abre 760ms cubic-bezier(.2, .8, .3, 1) backwards; }
	.abanico__c--1 { animation-delay: .30s; }
	.abanico__c--2 { animation-delay: .24s; }
	.abanico__c--3 { animation-delay: .18s; }
	.abanico__c--4 { animation-delay: .12s; }
	.abanico__c--5 { animation-delay: .18s; }
	.abanico__c--6 { animation-delay: .24s; }
	.abanico__c--7 { animation-delay: .30s; }
}

@keyframes abanico-abre {
	from { opacity: 0; transform: rotate(0deg) translateY(40px) scale(.9); }
}

.abanico__pie {
	margin: 0;
	font-size: .8125rem;
	color: var(--vc-gris);
	text-align: center;
}
.abanico__pie b { color: var(--vc-tinta); }

@media (max-width: 820px) {
	.abanico { padding-block: 1.6rem 3rem; }
	.abanico__c { border-radius: 11px; box-shadow: 0 8px 20px rgba(17, 17, 17, .2); }
	.abanico__c + .abanico__c { margin-left: -22px; }
	.abanico__c--1 { transform: rotate(-13deg) translateY(17px); }
	.abanico__c--2 { transform: rotate(-9deg)  translateY(9px); }
	.abanico__c--3 { transform: rotate(-4deg)  translateY(3px); }
	.abanico__c--4 { transform: rotate(0deg)   translateY(-4px); }
	.abanico__c--5 { transform: rotate(4deg)   translateY(3px); }
	.abanico__c--6 { transform: rotate(9deg)   translateY(9px); }
	.abanico__c--7 { transform: rotate(13deg)  translateY(17px); }
}

/* En pantallas estrechas siete cartas se vuelven astillas: se quitan las
   de los extremos y quedan cinco que aún se distinguen. */
@media (max-width: 560px) {
	.abanico__c--1, .abanico__c--7 { display: none; }
	.abanico__c { width: clamp(88px, 22vw, 118px); }
}

/* ==========================================================================
   TIRA HORIZONTAL — qué se ve en una tienda de verdad
   Capturas reales de bienbonito.com.mx. Se recorre a lo ancho porque cada
   pantalla se entiende sola y el orden no importa: es un vistazo, no un
   recorrido.
   ========================================================================== */
.tira-real {
	display: flex;
	gap: 1rem;
	margin-top: var(--vc-s3);
	padding: .25rem var(--vc-gut) 1.4rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	scrollbar-color: rgba(17, 17, 17, .22) transparent;
	/* Sale del wrap para que la primera y la última asomen por las orillas */
	margin-inline: calc(var(--vc-gut) * -1);
	/* Cada tarjeta mide lo suyo. Estiradas al alto de la mas alta —la del
	   celular, que es vertical— las demas quedaban con medio palmo de blanco
	   debajo del texto. */
	align-items: flex-start;
}

.tira-real::-webkit-scrollbar { height: 7px; }
.tira-real::-webkit-scrollbar-thumb { background: rgba(17, 17, 17, .22); border-radius: 4px; }

.tira-real__it {
	flex: 0 0 auto;
	width: min(420px, 78vw);
	scroll-snap-align: center;
	display: flex;
	flex-direction: column;
	background: var(--vc-blanco);
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 4px 18px rgba(17, 17, 17, .06);
}

.tira-real__foto {
	margin: 0;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #ece7df;
}

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

.tira-real__txt { padding: 1rem 1.15rem 1.25rem; }

.tira-real__n {
	font-family: var(--vc-display);
	font-size: .6875rem;
	font-weight: 800;
	letter-spacing: .09em;
	color: var(--vc-naranja);
}

.tira-real__txt h4 {
	margin: .3rem 0 .35rem;
	font-size: 1rem;
	line-height: 1.25;
}

.tira-real__txt p {
	margin: 0;
	font-size: .875rem;
	line-height: 1.5;
	color: var(--vc-gris);
}

.tira-real__aviso {
	margin: .1rem 0 0;
	font-size: .75rem;
	color: var(--vc-gris);
	text-align: center;
}

@media (max-width: 620px) {
	.tira-real__it { width: 82vw; }
	.tira-real__txt { padding: .85rem 1rem 1.1rem; }
	.tira-real__txt h4 { font-size: .9375rem; }
	.tira-real__txt p { font-size: .8125rem; }
}

@media (prefers-reduced-motion: reduce) {
	.abanico__c { animation: none; transition: none; }
}

/* Los dibujos salían minúsculos: ocupaban como un tercio de un recuadro de
   300 px de alto y de casi 600 de ancho. Se escalan desde el centro —son
   formas CSS y SVG, así que suben de tamaño sin perder filo— y el recuadro
   crece para que respiren. */
.rasgo-a__demo { height: 340px; }
.rasgo-a__demo .rg { transform: scale(1.45); }

@media (max-width: 820px) {
	.rasgo-a__demo { height: 235px; }
	.rasgo-a__demo .rg { transform: scale(1.2); }
}

/* Estos tres son flex en columna y arrancaban pegados arriba: dentro de un
   recuadro de 340 px el dibujo se iba al borde, y escalado 1.45 desde el
   centro se salia. Centrados en los dos ejes ya no. */
.rg--envio,
.rg--stock,
.rg--correos {
	justify-content: center;
	align-items: center;
	height: 100%;
}

/* El escalado necesita punto de giro en el centro y sitio alrededor */
.rasgo-a__demo .rg { transform-origin: center center; }

/* El icono del menu: los dos dibujos van puestos y se enseña el que toca.
   Antes se cambiaba con svg.innerHTML, que crea los nodos en el espacio de
   nombres equivocado y a veces no pintaba nada: quedaba la hamburguesa con
   el menu abierto y no habia tache para cerrarlo. */
.nav-toggle__cerrar { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__abrir { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__cerrar { display: block; }

/* Y que quede siempre por encima del panel abierto */
.nav-toggle { position: relative; z-index: 80; }

/* Las cartas del abanico no deben encogerse: el flex las dejaba en 60 px de
   ancho en un telefono, hechas astillas y desalineadas. */
.abanico__c { flex: none; }

@media (max-width: 560px) {
	.abanico__c { width: clamp(76px, 21vw, 100px); }
	.abanico__c + .abanico__c { margin-left: -26px; }

	/* La primera esta oculta, pero sigue contando como hermana: sin esto la
	   segunda hereda el margen negativo y corre el abanico entero. La clase
	   va doblada porque el selector de hermano pesa mas que una sola. */
	.abanico__c.abanico__c--2 { margin-left: 0; }

	/* Giros mas suaves. A 13 grados una carta ocupa 26 px mas de ancho real
	   del que mide, y las de los extremos se salian de la pantalla. */
	.abanico__c--2 { transform: rotate(-9deg) translateY(12px); }
	.abanico__c--3 { transform: rotate(-4.5deg) translateY(5px); }
	.abanico__c--4 { transform: rotate(0deg) translateY(-3px); }
	.abanico__c--5 { transform: rotate(4.5deg) translateY(5px); }
	.abanico__c--6 { transform: rotate(9deg) translateY(12px); }
}

/* El tache del visor: traslucido sobre una captura con mucho ruido no se
   distinguia. Solido y con aro, se ve sobre cualquier fondo. */
.visor__cerrar {
	background: var(--vc-tinta);
	box-shadow: 0 0 0 2px rgba(242, 239, 233, .9), 0 4px 14px rgba(0, 0, 0, .3);
}

@media (max-width: 700px) {
	/* Fijo a la pantalla, no a la tarjeta: dentro caia sobre la captura y
	   tapaba el final del comentario, que es lo que se quiere leer. */
	.visor-op .visor__cerrar {
		position: fixed;
		width: 46px;
		height: 46px;
		top: calc(.7rem + env(safe-area-inset-top));
		right: .7rem;
	}

	/* Entera, sin recorte: en el telefono el lienzo no hace de ventana. */
	.visor-op__lienzo { overflow: hidden; }
	.visor-op__lienzo img { width: 100% !important; max-height: 78vh; object-fit: contain; }
}

/* Los contadores de la tienda van dentro de su caja, no sueltos en la
   esquina: .rg-cuenta es absoluto porque en el catalogo es el "100" que
   flota, y aqui heredarlo mandaba el numero al borde del recuadro. */
.rg-cuenta--baja,
.rg-kpi .rg-cuenta {
	position: static;
	right: auto;
	bottom: auto;
}

/* --- El tache del menu de celular --------------------------------------
   .cabecera tiene z-index 50 y por tanto contexto de apilado propio: el
   z-index 80 del boton solo vale dentro de ella, y la cabecera entera cae
   debajo del panel (65). Por eso no habia con que cerrar el menu.
   Abierto el menu, la cabecera sube y se queda sin fondo. */
@media (max-width: 900px) {
	body.menu-abierto .cabecera {
		z-index: 95;
		background: transparent;
		border-bottom-color: transparent;
		box-shadow: none;
	}

	/* El logo es negro: sobre el panel oscuro no se veria y solo estorba. */
	body.menu-abierto .cabecera .marca {
		opacity: 0;
		pointer-events: none;
	}

	body.menu-abierto .nav-toggle { color: var(--vc-hueso); }
}

/* El pie, mas corto en el telefono. Servicios y Navegacion son dos listas
   largas que en una pantalla estrecha solo alargan el recorrido: lo que
   sirve ahi abajo es el contacto. En escritorio se quedan. */
@media (max-width: 900px) {
	.pie__grid > div:nth-child(2),
	.pie__grid > div:nth-child(3) { display: none; }

	.pie__grid { gap: var(--vc-s3); }
}