/*
 * BOSKA — Home V2
 * Hoja de estilos exclusiva de template-home-v2.php.
 * La V1 sigue usando main.css; no mezclar.
 */

:root {
	--v2-bg: #F7F1E6;
	--v2-cream: #FFF9ED;
	--v2-orange: #FE5F00;
	--v2-blue: #06314A;
	--v2-neon: #E3F256;
	--v2-platform-orange: #FE5F00;
	--v2-orange-dark: #FE5F00;
	--v2-red: #BF3512;
	--v2-black: #200900;
	--v2-dark-bg: #FE5F00;
	--v2-graphite: #232320;
	--v2-white: #FFFFFF;
	--v2-line: rgba(32, 9, 0, 0.14);
	--v2-line-light: rgba(32, 9, 0, 0.25);
	--v2-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
	--v2-radius-lg: 26px;
	--v2-radius-md: 16px;
	--v2-shadow: 0 18px 50px rgba(32, 9, 0, 0.12);
	--v2-max: 1200px;
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	overflow-x: clip;
	scroll-padding-top: 96px;
}

body.v2 {
	margin: 0;
	background: var(--v2-bg);
	color: var(--v2-black);
	font-family: var(--v2-font);
	font-size: 16px;
	line-height: 1.6;
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
}

body.v2.v2-nav-open {
	overflow: hidden;
}

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

a {
	color: inherit;
	text-decoration: none;
}

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

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

.v2-container {
	width: min(calc(100% - 48px), var(--v2-max));
	margin-inline: auto;
}

/* ---------- Tipografía de secciones ---------- */

.v2-kicker {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 18px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--v2-black);
}

.v2-kicker__star {
	color: var(--v2-orange);
	font-size: 15px;
}

.v2-kicker--light {
	color: var(--v2-black);
}

.v2-section-head {
	max-width: 780px;
	margin-bottom: 48px;
}

.v2-section-title {
	margin: 0 0 14px;
	font-size: clamp(38px, 5.6vw, 72px);
	font-weight: 700;
	line-height: 1.03;
	letter-spacing: -0.025em;
}

/* Titulares de secci\00f3n: aparici\00f3n palabra por palabra. */
.v2-title-split .v2-word {
	display: inline-block;
	color: inherit;
	opacity: 0;
	transform: translateY(0.5em);
	transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform, opacity;
}

.v2-reveal.is-visible .v2-title-split .v2-word,
.v2-title-split.is-words-in .v2-word {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.v2-mflow__runner {
		display: none;
	}
	.v2-title-split .v2-word {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Palabra acentuada en naranja dentro de títulos. */
.v2-accent {
	color: var(--v2-orange);
}

.v2-section-sub {
	margin: 0;
	font-size: clamp(16px, 1.6vw, 18px);
	line-height: 1.65;
	color: rgba(32, 9, 0, 0.72);
	font-weight: 400;
}

.v2-editable-note {
	display: inline-block;
	margin-top: 6px;
	padding: 3px 10px;
	background: rgba(254, 95, 0, 0.12);
	border: 1px dashed rgba(254, 95, 0, 0.55);
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--v2-red);
}

/* ---------- Botones y links ---------- */

.v2-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 24px;
	border: 0;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease;
}

.v2-btn--primary {
	padding: 7px 7px 7px 24px;
	gap: 14px;
	background: var(--v2-orange);
	color: var(--v2-white);
}

.v2-btn--primary:hover {
	background: var(--v2-orange-dark);
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(254, 95, 0, 0.35);
}

/* Isologo Boska en blanco a la derecha; gira al hacer hover. */
.v2-btn--primary .v2-btn__mark {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	color: var(--v2-white);
	transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.v2-btn--primary .v2-btn__mark svg {
	display: block;
	width: 100%;
	height: 100%;
}

.v2-btn--primary:hover .v2-btn__mark {
	transform: rotate(360deg);
}

.v2-btn--lg {
	padding: 6px 11px 6px 26px;
	font-size: 15px;
}

.v2-btn--lg .v2-btn__mark {
	width: 36px;
	height: 36px;
}

.v2-link-underline {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 700;
	padding-bottom: 4px;
	border-bottom: 2px solid var(--v2-orange);
	transition: color 180ms ease;
}

.v2-link-underline:hover {
	color: var(--v2-orange);
}

/* Flecha triangular naranja apuntando a la derecha. */
.v2-link-tri {
	width: 13px;
	height: 13px;
	flex-shrink: 0;
	color: var(--v2-orange);
	transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.v2-link-underline:hover .v2-link-tri {
	transform: translateX(4px);
}

.v2-link-underline--light {
	color: var(--v2-black);
	border-bottom-color: var(--v2-black);
}

.v2-link-underline--light:hover {
	color: var(--v2-cream);
}

/* En secciones naranjas la flecha hereda el color del texto para contrastar. */
.v2-link-underline--light .v2-link-tri {
	color: currentColor;
}

/* ---------- Header ---------- */

/* Barra full width discreta: crema con identidad naranja constante. */
.v2-header {
	--hd-bg: rgba(254, 95, 0, 0.97);
	--hd-ink: #FFF9ED;
	--hd-border: rgba(255, 249, 237, 0.28);
	--hd-logo-filter: none;
	--hd-cta-bg: #FFF9ED;
	--hd-cta-ink: #FE5F00;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 40;
	width: 100%;
	background: var(--hd-bg);
	border: 0;
	border-bottom: 1px solid var(--hd-border);
	border-radius: 0;
	box-shadow: 0 5px 18px rgba(32, 9, 0, 0.045);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	transition: background 500ms ease, border-color 500ms ease, box-shadow 260ms ease, top 260ms ease;
	animation: v2-header-drop 700ms cubic-bezier(0.22, 1, 0.36, 1) 150ms both;
}

/* El keyframe final queda en transform:none para que el header no sea
   containing block del overlay mobile (position:fixed). */
@keyframes v2-header-drop {
	from {
		transform: translateY(-160%);
		opacity: 0;
	}

	to {
		transform: none;
		opacity: 1;
	}
}

/* Variante sin transform: en mobile Safari/WebKit una animación de transform
   deja al header como containing block del overlay fixed y el menú no ocupa
   toda la pantalla. En mobile la píldora entra solo con fade. */
@keyframes v2-header-fade {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* Destello periódico que recorre la píldora. */
.v2-header::before {
	display: none;
}

@keyframes v2-header-shine {
	0%, 55% {
		background-position: 130% 0;
	}

	100% {
		background-position: -90% 0;
	}
}

.v2-header.is-scrolled {
	top: 0;
	box-shadow: 0 8px 24px rgba(32, 9, 0, 0.09);
}

/* Temas por sección (los setea v2.js al scrollear). */
.v2-header[data-theme="blue"] {
	--hd-bg: rgba(254, 95, 0, 0.97);
	--hd-ink: #FFF9ED;
	--hd-border: rgba(255, 249, 237, 0.28);
	--hd-cta-bg: #FFF9ED;
	--hd-cta-ink: #FE5F00;
}

.v2-header[data-theme="graphite"] {
	--hd-bg: rgba(254, 95, 0, 0.97);
	--hd-ink: #FFF9ED;
	--hd-border: rgba(255, 249, 237, 0.28);
	--hd-cta-bg: #FFF9ED;
	--hd-cta-ink: #FE5F00;
}

.v2-header[data-theme="neon"] {
	--hd-bg: rgba(254, 95, 0, 0.97);
	--hd-ink: #FFF9ED;
	--hd-border: rgba(255, 249, 237, 0.28);
	--hd-logo-filter: none;
	--hd-cta-bg: #FFF9ED;
	--hd-cta-ink: #FE5F00;
}

.v2-header[data-theme="cream"] {
	--hd-bg: rgba(254, 95, 0, 0.97);
	--hd-ink: #FFF9ED;
	--hd-border: rgba(255, 249, 237, 0.28);
	--hd-logo-filter: none;
	--hd-cta-bg: #FFF9ED;
	--hd-cta-ink: #FE5F00;
}

.v2-header__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 16px;
	width: min(calc(100% - 48px), 1560px);
	min-height: 66px;
	margin-inline: auto;
	padding: 7px 0;
}

.v2-header__brand {
	display: block;
	width: 110px;
	justify-self: start;
	background: #FFF9ED;
	-webkit-mask: url("../../../../uploads/2026/06/logoboska.png") center / contain no-repeat;
	mask: url("../../../../uploads/2026/06/logoboska.png") center / contain no-repeat;
}

.v2-header__brand img {
	display: block;
	width: 100%;
	height: auto;
	opacity: 0;
}

.v2-header__nav {
	justify-self: center;
	margin-left: 0;
}

.v2-header__nav ul {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.v2-header__nav a {
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	padding: 0 13px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--hd-ink);
	transition: background 200ms ease, color 400ms ease, transform 200ms ease;
}

.v2-header__nav ul a:hover,
.v2-header__nav ul a:focus-visible {
	background: color-mix(in srgb, var(--hd-ink) 16%, transparent);
	transform: translateY(-1px);
}

/* Link de la sección visible (scrollspy en v2.js). */
.v2-header__nav ul a.is-active {
	background: color-mix(in srgb, var(--hd-ink) 20%, transparent);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hd-ink) 30%, transparent);
}

/* El CTA hereda los colores del tema activo de la píldora.
   Acá el isologo NO es una chapita de otro color (usa currentColor, como el
   texto), así que lleva padding derecho propio en vez del 7px del botón
   naranja: si no, queda pegado al borde y el botón se ve desbalanceado. */
.v2-header .v2-header__cta.v2-btn--primary {
	justify-self: end;
	padding: 9px 18px 9px 22px;
	gap: 11px;
	background: var(--hd-cta-bg);
	color: var(--hd-cta-ink);
	transition: background 400ms ease, color 400ms ease, transform 200ms ease, box-shadow 200ms ease, filter 200ms ease;
}

.v2-header .v2-header__cta.v2-btn--primary .v2-btn__mark {
	width: 28px;
	height: 28px;
	color: currentColor;
}

.v2-header .v2-header__cta.v2-btn--primary:hover {
	background: var(--hd-cta-bg);
	filter: brightness(0.94);
	box-shadow: 0 10px 24px rgba(32, 9, 0, 0.24);
}

/* Doble clase para ganarle a ".v2-header__nav a" (que setea display). */
.v2-header__nav .v2-header__cta--mobile {
	display: none;
}

/* Redes del menú mobile: ocultas en desktop. */
.v2-header__social {
	display: none;
}

/* Grupo de la derecha: redes + "Hablemos" en la misma celda de la grilla. */
.v2-header__end {
	display: flex;
	align-items: center;
	gap: 14px;
	justify-self: end;
}

/* Redes en la barra (desktop): mismo círculo que la hamburguesa, un punto más
   chicas que el CTA para que no le compitan. */
.v2-header__social--bar {
	display: flex;
	align-items: center;
	gap: 8px;
}

.v2-header__social--bar a {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border: 1px solid color-mix(in srgb, var(--hd-ink) 45%, transparent);
	border-radius: 50%;
	color: var(--hd-ink);
	transition: background 200ms ease, color 200ms ease, border-color 400ms ease;
}

.v2-header__social--bar a:hover,
.v2-header__social--bar a:focus-visible {
	background: var(--hd-cta-bg);
	border-color: var(--hd-cta-bg);
	color: var(--hd-cta-ink);
}

.v2-header__social--bar svg {
	display: block;
	width: 18px;
	height: 18px;
}

/* Selector de idioma: misma píldora y mismos colores de tema que las redes.
   Alto total 36px para que quede alineado con los círculos de la barra. */
.v2-lang {
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 3px;
	border: 1px solid color-mix(in srgb, var(--hd-ink) 45%, transparent);
	border-radius: 999px;
	transition: border-color 400ms ease;
}

.v2-lang__opt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--hd-ink);
	transition: background 200ms ease, opacity 200ms ease, transform 200ms ease;
}

/* Sin texto, el idioma inactivo se distingue por opacidad. */
.v2-lang--bar .v2-lang__opt {
	opacity: 0.45;
}

.v2-lang--bar .v2-lang__opt:hover,
.v2-lang--bar .v2-lang__opt:focus-visible,
.v2-lang--bar .v2-lang__opt.is-active {
	opacity: 1;
}

.v2-lang--bar .v2-lang__opt.is-active {
	background: var(--hd-cta-bg);
}

/* Las banderas ya vienen circulares; el radius es por si se cambia el archivo. */
.v2-lang__flag {
	display: block;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	flex: none;
}

/* Toggle: una sola bandera, la del idioma al que se cambia. Solo en mobile. */
.v2-lang--toggle {
	display: none;
	padding: 0;
	border: 0;
}

.v2-lang--toggle .v2-lang__opt {
	width: 34px;
	height: 34px;
	border: 1px solid color-mix(in srgb, var(--hd-ink) 45%, transparent);
}

.v2-lang--toggle .v2-lang__flag {
	width: 24px;
	height: 24px;
}

.v2-lang--toggle .v2-lang__opt:active {
	transform: scale(0.94);
}

.v2-lang__opt:hover,
.v2-lang__opt:focus-visible {
	background: color-mix(in srgb, var(--hd-ink) 18%, transparent);
}

.v2-lang__opt.is-active {
	background: var(--hd-cta-bg);
	color: var(--hd-cta-ink);
}

/* Sin borde: las barras solas. Se mantienen los 42px para que el área
   táctil siga siendo cómoda aunque no se vea el círculo. */
.v2-header__toggle {
	display: none;
	position: relative;
	width: 42px;
	height: 42px;
	padding: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
}

.v2-header__toggle span:not(.v2-sr-only) {
	position: absolute;
	left: 12px;
	right: 12px;
	height: 2px;
	background: var(--hd-ink);
	border-radius: 2px;
	transition: transform 220ms ease, top 220ms ease, opacity 180ms ease, background 400ms ease;
}

/* El primer span del botón es el texto sr-only: las barras son la 2, 3 y 4. */
.v2-header__toggle span:nth-of-type(2) {
	top: 13px;
}

.v2-header__toggle span:nth-of-type(3) {
	top: 20px;
}

.v2-header__toggle span:nth-of-type(4) {
	top: 27px;
}

/* Con el menú abierto el fondo es naranja: las barras pasan a crema y forman la X. */
.v2-nav-open .v2-header__toggle span:not(.v2-sr-only) {
	background: #FFF9ED;
}

.v2-nav-open .v2-header__toggle span:nth-of-type(2) {
	top: 20px;
	transform: rotate(45deg);
}

.v2-nav-open .v2-header__toggle span:nth-of-type(3) {
	opacity: 0;
}

.v2-nav-open .v2-header__toggle span:nth-of-type(4) {
	top: 20px;
	transform: rotate(-45deg);
}

/* Con un ítem por sección el menú es más largo: compactar en anchos medios
   y pasar al menú móvil antes de que desborde. */
@media (max-width: 1120px) {
	.v2-header__nav ul {
		gap: 2px;
	}

	.v2-header__nav a {
		padding: 0 10px;
		font-size: 11.5px;
	}

	.v2-header__brand img {
		width: 100%;
	}

	.v2-header__brand {
		width: 92px;
	}
}

@media (max-width: 960px) {
	/* Hamburguesa a la izquierda, logo centrado, e idioma + Hablemos a la
	   derecha. El nav va fixed: al estar fuera de flujo no ocupa celda. */
	.v2-header__inner {
		grid-template-columns: auto 1fr auto;
		gap: 10px;
	}

	.v2-header__brand {
		order: 2;
		justify-self: center;
	}

	/* El orden/posición los lleva el grupo, que es el ítem de la grilla. */
	.v2-header__end {
		order: 3;
		justify-self: end;
		gap: 8px;
	}

	/* En la barra mobile no entran las redes ni las dos banderas: el idioma
	   pasa al toggle de una sola. */
	.v2-header__social--bar,
	.v2-lang--bar {
		display: none;
	}

	.v2-lang--toggle {
		display: flex;
	}

	/* Píldora compacta: el isologo baja a 22px para no engordar la barra. */
	.v2-header .v2-header__cta.v2-btn--primary {
		display: inline-flex;
		padding: 7px 14px 7px 17px;
		gap: 9px;
		font-size: 12.5px;
	}

	.v2-header .v2-header__cta.v2-btn--primary .v2-btn__mark {
		width: 22px;
		height: 22px;
	}

	.v2-header__toggle {
		order: 1;
		justify-self: start;
	}

	/* Sin animación de transform en el header: rompe el overlay fixed del menú.
	   Por lo mismo va sin backdrop-filter: un filtro también convierte al header
	   en containing block y el overlay quedaba recortado a la altura de la barra
	   (de ahí que la hamburguesa "no abriera" nada). El fondo ya es opaco al 97%,
	   así que el blur no se nota. */
	.v2-header {
		animation-name: v2-header-fade;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}

	.v2-nav-open .v2-header {
		animation: none;
	}

	/* Los cuatro lados van en longhand a propósito: si el navegador no entiende
	   el shorthand "inset" (Chrome < 87, Safari < 14.1, WebViews viejas de
	   Android) lo descarta entero, el panel se queda sin anclaje y colapsa al
	   ancho de su contenido en la posición estática: el menú angosto. */
	.v2-header__nav {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: -1;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 26px;
		width: 100%;
		max-width: 100%;
		/* El nav es hijo de la grilla del header: si algún navegador lo tratara
		   como ítem posicionado dentro de su celda, el justify-self:center de la
		   regla base también lo encogería. */
		justify-self: stretch;
		padding: 96px 24px 44px;
		background: #FE5F00;
		overflow-y: auto;
		opacity: 0;
		pointer-events: none;
		transition: opacity 220ms ease;
	}

	/* Los márgenes auto centran el grupo si entra y permiten scrollear si no. */
	.v2-header__nav > ul {
		margin-top: auto;
	}

	/* Con el menú abierto el logo queda visible sobre el fondo crema. */
	.v2-nav-open .v2-header__brand {
		position: relative;
		z-index: 52;
	}

	.v2-nav-open .v2-header__brand img {
		filter: none;
	}

	/* Redes bien visibles al pie del menú desplegado.
	   Doble clase para ganarle a ".v2-header__nav a" (display/padding/alto). */
	.v2-header__nav .v2-header__social {
		display: flex;
		gap: 14px;
		margin-top: 8px;
		margin-bottom: auto;
	}

	.v2-header__nav .v2-header__social a {
		display: grid;
		place-items: center;
		width: 50px;
		height: 50px;
		min-height: 0;
		padding: 0;
		border: 1px solid rgba(255, 249, 237, 0.55);
		border-radius: 50%;
		color: #FFF9ED;
		transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
	}

	.v2-header__nav .v2-header__social a:hover,
	.v2-header__nav .v2-header__social a:focus-visible {
		background: #FFF9ED;
		border-color: #FFF9ED;
		color: #FE5F00;
	}

	.v2-header__nav .v2-header__social svg {
		width: 24px;
		height: 24px;
	}

	/* Entrada escalonada de los ítems al desplegar. */
	.v2-header__nav > ul li,
	.v2-header__nav .v2-header__cta--mobile,
	.v2-header__nav .v2-header__social {
		opacity: 0;
		transform: translateY(14px);
		transition: opacity 280ms ease, transform 280ms ease;
	}

	.v2-nav-open .v2-header__nav > ul li,
	.v2-nav-open .v2-header__nav .v2-header__cta--mobile,
	.v2-nav-open .v2-header__nav .v2-header__social {
		opacity: 1;
		transform: none;
	}

	.v2-nav-open .v2-header__nav > ul li:nth-child(1) { transition-delay: 60ms; }
	.v2-nav-open .v2-header__nav > ul li:nth-child(2) { transition-delay: 110ms; }
	.v2-nav-open .v2-header__nav > ul li:nth-child(3) { transition-delay: 160ms; }
	.v2-nav-open .v2-header__nav > ul li:nth-child(4) { transition-delay: 210ms; }
	.v2-nav-open .v2-header__nav > ul li:nth-child(5) { transition-delay: 260ms; }
	.v2-nav-open .v2-header__nav > ul li:nth-child(6) { transition-delay: 310ms; }
	.v2-nav-open .v2-header__nav > ul li:nth-child(7) { transition-delay: 360ms; }
	.v2-nav-open .v2-header__nav .v2-header__cta--mobile { transition-delay: 420ms; }
	.v2-nav-open .v2-header__nav .v2-header__social { transition-delay: 520ms; }

	.v2-nav-open .v2-header__nav {
		z-index: 50;
		opacity: 1;
		pointer-events: auto;
	}

	.v2-header__nav ul {
		flex-direction: column;
		gap: 12px;
		text-align: center;
	}

	.v2-header__nav a {
		min-height: 42px;
		font-size: 18px;
		color: #FFF9ED;
	}

	.v2-header__nav ul a:hover,
	.v2-header__nav ul a:focus-visible,
	.v2-header__nav ul a.is-active {
		background: rgba(255, 249, 237, 0.16);
		color: #FFF9ED;
		box-shadow: none;
	}

	.v2-header__cta {
		display: none;
	}

	/* Doble .v2-header para ganarle a la píldora compacta de la barra. */
	.v2-header .v2-header__nav .v2-header__cta--mobile.v2-btn--primary {
		display: inline-flex;
		justify-content: center;
		padding: 10px 22px;
		gap: 12px;
		font-size: 15px;
		background: #FFF9ED !important;
		color: #FE5F00 !important;
	}

	.v2-header .v2-header__nav .v2-header__cta--mobile.v2-btn--primary .v2-btn__mark {
		width: 28px;
		height: 28px;
	}

	.v2-header__toggle {
		display: block;
		position: relative;
		z-index: 51;
	}
}

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

	.v2-header::before {
		animation: none;
	}
}

/* ---------- Hero ---------- */

.v2-hero {
	position: relative;
	isolation: isolate;
	padding: 150px 0 40px;
}

/* Compatibilidad con HTML cacheado: nunca mostrar la lluvia anterior en el hero. */
.v2-hero > .v2-hero__icon-rain,
.v2-hero > .v2-cases__icon-rain {
	display: none !important;
}

/* Trama fija: cada ícono pulsa de forma independiente sin cambiar de posición. */
.v2-hero__pattern {
	position: absolute;
	inset: 0;
	z-index: -1;
	display: grid;
	grid-template-columns: repeat(auto-fill, 84px);
	grid-auto-rows: 84px;
	justify-content: space-evenly;
	align-content: start;
	overflow: hidden;
	pointer-events: none;
	/* La trama se desvanece antes del carrusel para no verse detrás de los videos. */
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 68%);
	mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 68%);
}

.v2-hero__pattern i {
	display: block;
	width: 84px;
	height: 84px;
	background: #FE5F00;
	-webkit-mask: url("../../../../uploads/cropped-eqweqweqwewq.png") center / contain no-repeat;
	mask: url("../../../../uploads/cropped-eqweqweqwewq.png") center / contain no-repeat;
	opacity: 0.065;
	animation: v2HeroPatternFadeIn var(--v2-pattern-duration) linear var(--v2-pattern-delay) infinite;
	will-change: opacity;
}

@keyframes v2HeroPatternFadeIn {
	0%, 60%, 100% {
		opacity: 0.065;
	}
	60.01%, 82% {
		opacity: 0;
	}
	92% {
		opacity: 0.065;
	}
}

.v2-hero__title {
	margin: 0 0 26px;
	/* Tres líneas: tope más bajo que el original de dos para no estirar el hero. */
	font-size: clamp(32px, 5.2vw, 68px);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -0.025em;
}

/* Dos líneas fijas, cada una se revela deslizándose desde abajo (máscara). */
.v2-line {
	display: block;
	overflow: hidden;
	/* Reserva para descendentes (g, p, y) dentro de la máscara animada. */
	padding-bottom: 0.12em;
	margin-bottom: -0.12em;
	white-space: nowrap;
}

.v2-line__inner {
	display: inline-block;
	transform: translateY(115%);
	animation: v2LineIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.v2-line:nth-child(1) .v2-line__inner { animation-delay: 0.1s; }
.v2-line:nth-child(2) .v2-line__inner { animation-delay: 0.3s; }
.v2-line:nth-child(3) .v2-line__inner { animation-delay: 0.5s; }

@keyframes v2LineIn {
	to {
		transform: translateY(0);
	}
}

.v2-hero__accent {
	color: var(--v2-orange);
}

/* Palabra rotativa: Probamos → Medimos → Encontramos.
   El JS activa la palabra y ajusta el ancho al de la palabra visible,
   así el texto que sigue queda pegado sin hueco. */
.v2-rotator {
	display: inline-grid;
	overflow: hidden;
	padding-bottom: 0.12em;
	margin-bottom: -0.12em;
	color: var(--v2-orange);
	transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.v2-rotator__word {
	grid-area: 1 / 1;
	width: max-content;
	justify-self: start;
	opacity: 0;
	transform: translateY(0.5em);
	transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.v2-rotator__word.is-active {
	opacity: 1;
	transform: translateY(0);
}

.v2-rotator__word.is-leaving {
	opacity: 0;
	transform: translateY(-0.5em);
}

/* Texto completo solo para lectores de pantalla. */
.v2-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* En pantallas chicas las frases no entran en una línea: permitir salto. */
@media (max-width: 760px) {
	.v2-line {
		white-space: normal;
	}
}

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

	.v2-rotator__word,
	.v2-rotator {
		transition: none;
	}
}

.v2-hero__sub {
	max-width: 560px;
	margin: 0 0 34px;
	font-size: clamp(17px, 1.8vw, 20px);
	line-height: 1.6;
	color: rgba(32, 9, 0, 0.75);
	font-weight: 400;
}

.v2-hero__sub strong {
	color: var(--v2-black);
}

.v2-hero__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 26px;
	margin-bottom: 64px;
}

/* ---------- Marquee de reels ---------- */

/* Banda diagonal: las tarjetas van rectas y la cinta completa se inclina. */
.v2-reel-marquee {
	margin: 10px -3vw 0;
	padding: 34px 0 40px;
	transform: rotate(-1.25deg);
}

.v2-reel-track {
	display: flex;
	width: max-content;
}

[data-v2-marquee].is-active .v2-reel-track {
	animation: v2-marquee 55s linear infinite;
}

[data-v2-marquee]:hover .v2-reel-track {
	animation-play-state: paused;
}

@keyframes v2-marquee {
	to {
		transform: translateX(calc(-100% / 3));
	}
}

.v2-reel-set {
	display: flex;
	gap: 22px;
	padding-right: 22px;
}

.v2-reel-card {
	width: clamp(140px, 12.5vw, 172px);
	aspect-ratio: 9 / 16;
	overflow: hidden;
	background: var(--v2-black);
	border: 1px solid rgba(32, 9, 0, 0.2);
	border-radius: 22px;
	box-shadow: var(--v2-shadow);
	transition: transform 260ms ease;
}

.v2-reel-card video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.v2-reel-card:hover {
	transform: translateY(-6px) scale(1.03);
}

/* ---------- Banda de confianza ---------- */

.v2-trust {
	padding: 48px 0;
}

.v2-logo-strip {
	overflow: hidden;
	/* Reserva la altura de la banda para que no salte mientras cargan los logos. */
	min-height: 64px;
}

.v2-logo-strip__track {
	display: flex;
	width: max-content;
	animation: v2-marquee-half 30s linear infinite;
}

.v2-logo-strip:hover .v2-logo-strip__track {
	animation-play-state: paused;
}

@keyframes v2-marquee-half {
	to {
		transform: translateX(-50%);
	}
}

.v2-logo-strip__set {
	display: flex;
	align-items: center;
	gap: clamp(44px, 6vw, 90px);
	padding-right: clamp(44px, 6vw, 90px);
}

.v2-logo-strip__item {
	margin: 0;
}

/* Logos teñidos del naranja BOSKA; en hover vuelven a su color original. */
.v2-logo-strip__item img {
	height: 44px;
	width: auto;
	filter: brightness(0) saturate(100%) invert(43%) sepia(61%) saturate(751%) hue-rotate(-25deg) brightness(105%) contrast(96%);
	transition: filter 350ms ease;
}

.v2-logo-strip__item img:hover {
	filter: none;
}

/* ---------- Secciones oscuras ---------- */

.v2-dark {
	background: var(--v2-dark-bg);
	color: var(--v2-black);
}

/* Dentro de las secciones naranjas, los acentos pasan a negro/crema. */
.v2-dark .v2-btn--primary {
	background: var(--v2-black);
	color: var(--v2-cream);
}

.v2-dark .v2-btn--primary:hover {
	background: #000;
	box-shadow: 0 12px 28px rgba(32, 9, 0, 0.3);
}

/* ---------- Cómo trabajamos ---------- */

.v2-system {
	padding: 96px 0;
}

.v2-system__grid {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: clamp(40px, 6vw, 90px);
	align-items: center;
}

.v2-system__video {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--v2-graphite);
	border: 1px solid var(--v2-line-light);
	border-radius: var(--v2-radius-lg);
}

.v2-system__video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.v2-system__title {
	margin: 0 0 20px;
	font-size: clamp(32px, 4.4vw, 54px);
	font-weight: 700;
	line-height: 1.06;
	letter-spacing: -0.025em;
	color: var(--v2-cream);
}

.v2-system__text {
	margin: 0 0 26px;
	font-size: 17px;
	line-height: 1.7;
	color: rgba(32, 9, 0, 0.82);
	font-weight: 400;
}

.v2-system__bullets {
	margin: 0 0 34px;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 12px;
}

.v2-system__bullets li {
	position: relative;
	padding-left: 28px;
	font-size: 15.5px;
	font-weight: 600;
}

.v2-system__bullets li::before {
	content: "✳";
	position: absolute;
	left: 0;
	color: var(--v2-cream);
}

/* ---------- Nuestro método: diagrama animado de 4 etapas ---------- */

.v2-method {
	padding: clamp(70px, 8vw, 110px) 0;
	background-color: var(--v2-cream);
	/* Trama de cuadrícula sutil en naranja. */
	background-image:
		linear-gradient(to right, rgba(254, 95, 0, 0.07) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(254, 95, 0, 0.07) 1px, transparent 1px);
	background-size: 44px 44px;
	color: #06314A;
}

.v2-method__head {
	max-width: 820px;
	margin: 0 auto clamp(10px, 1.4vw, 16px);
	text-align: center;
}

.v2-method__title {
	margin: 0;
	font-size: clamp(32px, 4.8vw, 60px);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: #200900;
}

.v2-method__title span {
	color: var(--v2-orange);
}

/* Escenario del diagrama. */
.v2-method__diagram {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) clamp(210px, 24vw, 270px) minmax(0, 1fr);
	grid-template-rows: 1fr 1fr;
	gap: clamp(70px, 9vw, 120px) clamp(20px, 3vw, 46px);
	padding: clamp(16px, 2.5vw, 40px);
	min-height: clamp(480px, 52vw, 620px);
}

.v2-method__lines {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
}

/* Líneas: se dibujan al entrar en viewport. */
.v2-mline {
	fill: none;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
}

.v2-mline--diag {
	stroke: rgba(6, 49, 74, 0.3);
	stroke-width: 1.5;
}

/* Flujo de datos: guiones naranjas con cortes recorriendo los conectores. */
.v2-mline--flow {
	stroke: var(--v2-orange);
	stroke-width: 2.5;
	stroke-dasharray: 0.06 0.06;
	stroke-dashoffset: 1;
	opacity: 0;
}

.v2-reveal.is-visible .v2-mline--diag {
	animation: v2LineDraw 0.9s ease forwards;
}

.v2-reveal.is-visible .v2-mline--flow {
	animation: v2LineFlow 2.2s linear 0.9s infinite;
}

@keyframes v2LineDraw {
	to {
		stroke-dashoffset: 0;
	}
}

@keyframes v2LineFlow {
	0% {
		opacity: 1;
		stroke-dashoffset: 1;
	}
	100% {
		opacity: 1;
		stroke-dashoffset: 0;
	}
}

/* Píldoras de flujo sobre los conectores. */
.v2-method__pill {
	position: absolute;
	z-index: 2;
	padding: 8px 18px;
	background: #06314A;
	border-radius: 999px;
	color: #E3F256;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	box-shadow: 0 8px 20px rgba(6, 49, 74, 0.25);
	opacity: 0;
	transform: scale(0.7);
}

.v2-reveal.is-visible .v2-method__pill {
	animation: v2PillPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.v2-reveal.is-visible .v2-method__pill--top { animation-delay: 0.5s; }
.v2-reveal.is-visible .v2-method__pill--right { animation-delay: 0.7s; }
.v2-reveal.is-visible .v2-method__pill--bottom { animation-delay: 0.9s; }
.v2-reveal.is-visible .v2-method__pill--left { animation-delay: 1.1s; }

@keyframes v2PillPop {
	to {
		opacity: 1;
		transform: scale(1);
	}
}

.v2-method__pill--top { top: 15.3%; left: 50%; translate: -50% -50%; }
.v2-method__pill--bottom { top: 84.7%; left: 50%; translate: -50% -50%; }
.v2-method__pill--right { top: 50%; left: 83%; translate: -50% -50%; }
.v2-method__pill--left { top: 50%; left: 17%; translate: -50% -50%; }

/* Flechas de dirección sobre los conectores (sentido horario). */
.v2-method__dir {
	--dir: 0deg;
	position: absolute;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	background: var(--v2-orange);
	border-radius: 50%;
	color: var(--v2-white);
	box-shadow: 0 6px 16px rgba(254, 95, 0, 0.4);
	opacity: 0;
	transform: scale(0.6);
}

.v2-method__dir svg {
	width: 13px;
	height: 13px;
	animation: v2DirSlide 1.4s ease-in-out infinite;
}

/* Slide direccional: la flecha entra, avanza y sale hacia la tarjeta destino. */
@keyframes v2DirSlide {
	0% {
		opacity: 0;
		transform: rotate(var(--dir)) translateX(-7px);
	}
	25% {
		opacity: 1;
	}
	75% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: rotate(var(--dir)) translateX(7px);
	}
}

.v2-reveal.is-visible .v2-method__dir {
	animation: v2PillPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.v2-reveal.is-visible .v2-method__dir--right { animation-delay: 0.6s; }
.v2-reveal.is-visible .v2-method__dir--down { animation-delay: 0.8s; }
.v2-reveal.is-visible .v2-method__dir--back { animation-delay: 1s; }
.v2-reveal.is-visible .v2-method__dir--up { animation-delay: 1.2s; }

/* Como en la referencia: cada flecha al final de su línea, tocando la tarjeta destino. */
.v2-method__dir--right { top: 15.3%; left: 65.5%; translate: -50% -50%; --dir: 0deg; }
.v2-method__dir--down { top: 61%; left: 83%; translate: -50% -50%; --dir: 90deg; }
.v2-method__dir--back { top: 84.7%; left: 34.5%; translate: -50% -50%; --dir: 180deg; }
.v2-method__dir--up { top: 39.5%; left: 17%; translate: -50% -50%; --dir: 270deg; }

/* Tarjetas de etapa en las esquinas. */
.v2-mcard {
	position: relative;
	z-index: 1;
	max-width: 360px;
	padding: clamp(20px, 2.2vw, 30px);
	background: var(--v2-cream);
	border: 2px solid #E3F256;
	border-radius: 18px;
	box-shadow: 0 14px 34px rgba(6, 49, 74, 0.1);
	opacity: 0;
	transform: translateY(18px);
}

.v2-reveal.is-visible .v2-mcard {
	animation: v2CardIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.v2-reveal.is-visible .v2-mcard--1 { animation-delay: 0.1s; }
.v2-reveal.is-visible .v2-mcard--2 { animation-delay: 0.25s; }
.v2-reveal.is-visible .v2-mcard--4 { animation-delay: 0.4s; }
.v2-reveal.is-visible .v2-mcard--3 { animation-delay: 0.55s; }

@keyframes v2CardIn {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.v2-mcard--1 { grid-area: 1 / 1; justify-self: start; align-self: start; }
.v2-mcard--2 { grid-area: 1 / 3; justify-self: end; align-self: start; }
.v2-mcard--3 { grid-area: 2 / 1; justify-self: start; align-self: end; }
.v2-mcard--4 { grid-area: 2 / 3; justify-self: end; align-self: end; }

/* Encabezado de tarjeta: ícono + título en fila, descripción debajo. */
.v2-mcard__head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 12px;
}

/* Ícono en naranja de marca (recoloreado vía máscara). */
.v2-mcard__icon {
	flex-shrink: 0;
	width: clamp(44px, 4vw, 56px);
	aspect-ratio: 1;
	background: var(--v2-orange);
	-webkit-mask: var(--icon) no-repeat center / contain;
	mask: var(--icon) no-repeat center / contain;
}

.v2-mcard__title {
	margin: 0;
	font-size: clamp(17px, 1.7vw, 21px);
	font-weight: 600;
	color: var(--v2-orange);
}

.v2-mcard p {
	margin: 0;
	font-size: clamp(13.5px, 1.3vw, 15px);
	line-height: 1.55;
	color: rgba(6, 49, 74, 0.8);
}

/* Motor central. */
.v2-method__core {
	grid-row: 1 / 3;
	grid-column: 2;
	place-self: center;
	z-index: 1;
	display: grid;
	place-content: center;
	gap: 4px;
	width: clamp(170px, 19vw, 230px);
	aspect-ratio: 1;
	background: var(--v2-orange);
	border-radius: 50%;
	color: var(--v2-white);
	text-align: center;
	box-shadow: 0 0 0 0 rgba(254, 95, 0, 0.35);
	opacity: 0;
	transform: scale(0.6);
}

.v2-reveal.is-visible .v2-method__core {
	animation:
		v2CoreIn 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) 0.35s forwards,
		v2CorePulse 2.8s ease-out 1.4s infinite;
}

/* Wordmark BOSKA recoloreado a crema vía máscara (el PNG original es naranja). */
.v2-method__logo {
	justify-self: center;
	width: clamp(110px, 12vw, 150px);
	aspect-ratio: 1330 / 318;
	background: var(--v2-cream);
	-webkit-mask: url("../../../../uploads/2026/06/logoboska.png") no-repeat center / contain;
	mask: url("../../../../uploads/2026/06/logoboska.png") no-repeat center / contain;
}

.v2-method__core small {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #E3F256;
}

@keyframes v2CoreIn {
	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes v2CorePulse {
	0% {
		box-shadow: 0 0 0 0 rgba(254, 95, 0, 0.35);
	}
	70%, 100% {
		box-shadow: 0 0 0 26px rgba(254, 95, 0, 0);
	}
}

.v2-method__cta {
	margin-top: clamp(30px, 4vw, 48px);
	text-align: center;
}

/* Móvil: conserva la esencia del diagrama (flujo cíclico + flechas + motor
   Boska en el centro del proceso), en formato vertical legible. */
@media (max-width: 900px) {
	.v2-method__diagram {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0;
		min-height: 0;
		max-width: 420px;
		margin: 0 auto;
		padding-bottom: 44px;
	}

	.v2-method__lines,
	.v2-method__pill,
	.v2-method__dir {
		display: none;
	}

	/* Motor Boska: centrado en medio del proceso, logo contenido en el círculo. */
	.v2-method__core {
		order: 3;
		align-self: center;
		width: 150px;
		height: 150px;
		margin: 0 0 40px;
	}

	.v2-method__logo {
		width: 94px;
	}

	.v2-mcard {
		max-width: none;
		width: 100%;
		margin: 0 0 40px;
	}

	.v2-mcard--1 { order: 1; }
	.v2-mcard--2 { order: 2; }
	.v2-mcard--4 { order: 4; }
	.v2-mcard--3 { order: 5; margin-bottom: 0; }

	/* Número de paso (esquina superior derecha, lejos del ícono). */
	.v2-mcard::before {
		position: absolute;
		top: -14px;
		right: 18px;
		z-index: 3;
		display: grid;
		place-items: center;
		width: 32px;
		height: 32px;
		border-radius: 50%;
		background: var(--v2-orange);
		color: var(--v2-cream);
		font-size: 14px;
		font-weight: 700;
		line-height: 1;
	}

	.v2-mcard--1::before { content: "01"; }
	.v2-mcard--2::before { content: "02"; }
	.v2-mcard--4::before { content: "03"; }
	.v2-mcard--3::before { content: "04"; }

	/* Flecha de flujo hacia el siguiente paso (incluye la salida del motor). */
	.v2-mcard::after,
	.v2-method__core::after {
		content: "";
		position: absolute;
		left: 50%;
		bottom: -27px;
		transform: translateX(-50%);
		width: 0;
		height: 0;
		border-left: 9px solid transparent;
		border-right: 9px solid transparent;
		border-top: 11px solid var(--v2-orange);
	}

	/* Cierre del ciclo: el proceso se repite. */
	.v2-mcard--3::after {
		content: "↻ El proceso se repite y mejora";
		bottom: -44px;
		width: max-content;
		max-width: 92%;
		height: auto;
		padding: 7px 14px;
		border: none;
		border-radius: 999px;
		background: rgba(6, 49, 74, 0.08);
		color: rgba(6, 49, 74, 0.72);
		font-size: 12.5px;
		font-weight: 600;
		white-space: nowrap;
	}
}

/* Móvil: las flechas del flujo aparecen en secuencia, construyendo el ciclo. */
@keyframes v2ArrowIn {
	from { opacity: 0; transform: translate(-50%, -8px) scale(0.6); }
	to   { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

@media (max-width: 900px) {
	.v2-mcard::after,
	.v2-method__core::after {
		opacity: 0;
	}

	.v2-reveal.is-visible .v2-mcard::after,
	.v2-reveal.is-visible .v2-method__core::after {
		animation: v2ArrowIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
	}

	.v2-reveal.is-visible .v2-mcard--1::after { animation-delay: 0.55s; }
	.v2-reveal.is-visible .v2-mcard--2::after { animation-delay: 0.8s; }
	.v2-reveal.is-visible .v2-method__core::after { animation-delay: 1.15s; }
	.v2-reveal.is-visible .v2-mcard--4::after { animation-delay: 1.45s; }
	.v2-reveal.is-visible .v2-mcard--3::after { animation-delay: 1.7s; }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
	.v2-mcard::after,
	.v2-method__core::after {
		opacity: 1;
		animation: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.v2-mline,
	.v2-method__pill,
	.v2-method__dir,
	.v2-mcard,
	.v2-method__core {
		animation: none !important;
		opacity: 1;
		transform: none;
		stroke-dashoffset: 0;
	}

	/* Las flechas conservan su rotación direccional, sin vaivén. */
	.v2-method__dir svg {
		animation: none !important;
		transform: rotate(var(--dir));
	}

	.v2-mline--flow {
		opacity: 0;
	}
}

/* ---------- Proceso interactivo ---------- */

.v2-sec-off { display: none !important; }
.v2-secswitch { display: flex; justify-content: flex-end; gap: 7px; height: 0; position: relative; z-index: 20; transform: translateY(16px); }
.v2-secswitch button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: rgba(32, 9, 0, 0.1); cursor: pointer; transition: background 200ms ease, transform 200ms ease; }
.v2-secswitch button:hover { background: rgba(32, 9, 0, 0.4); transform: scale(1.3); }
.v2-secswitch button.is-active { background: rgba(32, 9, 0, 0.25); }
.v2-steps { padding: clamp(78px, 9vw, 128px) 0; background: #F7F1E6; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'%3E%3Cg fill='none' stroke='%23200900' stroke-opacity='0.055' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(28 34) rotate(-10)'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1 1.1 7.8 7.7 7.8-7.7 1-1.1a5.5 5.5 0 0 0 0-7.8z'/%3E%3C/g%3E%3Cg transform='translate(160 22) rotate(8)'%3E%3Cpath d='M4 9h16M4 15h16M10 3 8 21M16 3l-2 18'/%3E%3C/g%3E%3Cg transform='translate(258 62) rotate(-6)'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M10 8l6 4-6 4z'/%3E%3C/g%3E%3Cg transform='translate(58 150) rotate(6)'%3E%3Cpath d='M22 2 11 13M22 2 15 22l-4-9-9-4z'/%3E%3C/g%3E%3Cg transform='translate(188 152) rotate(-8)'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-8.4 8.4 8.6 8.6 0 0 1-3.8-.9L3 21l1.9-5.7a8.4 8.4 0 1 1 16.1-3.8z'/%3E%3C/g%3E%3Cg transform='translate(278 206) rotate(10)'%3E%3Cpath d='M3 17l6-6 4 4 7-7M16 8h4v4'/%3E%3C/g%3E%3Cg transform='translate(32 252) rotate(-8)'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9M13.7 21a2 2 0 0 1-3.4 0'/%3E%3C/g%3E%3Cg transform='translate(152 260) rotate(6)'%3E%3Cpath d='M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); background-size: 320px 320px; border-top: 1px solid var(--v2-line); border-bottom: 1px solid var(--v2-line); }
.v2-steps__layout { display: grid; grid-template-columns: minmax(360px, 0.9fr) minmax(0, 1fr); gap: clamp(50px, 9vw, 140px); align-items: center; }
.v2-steps__content { order: 2; }
.v2-steps__visual { order: 1; }
.v2-steps__content h2 { margin: 0 0 34px; font-size: clamp(36px, 4.1vw, 58px); font-weight: 700; line-height: 1.02; letter-spacing: -0.025em; }
.v2-steps__content h2 span, .v2-steps__eyebrow { color: var(--v2-orange); }
.v2-steps__content h2 .v2-steps__titleline { display: block; white-space: nowrap; }
.v2-steps__content h2 .v2-steps__titleline--dark { color: #200900; }
.v2-steps__content h2 .v2-steps__titleline b { color: var(--v2-orange); font-weight: inherit; }
.v2-steps__list > .v2-steps__item:nth-child(1) { --step-accent: #FE5F00; }
.v2-steps__list > .v2-steps__item:nth-child(2) { --step-accent: #06314A; }
.v2-steps__list > .v2-steps__item:nth-child(3) { --step-accent: #BB3A13; }
.v2-steps__eyebrow { margin: 0 0 14px; font-size: 13px; font-weight: 700; text-transform: uppercase; }
.v2-steps__list { border-top: 1px solid rgba(32, 9, 0, 0.2); }
.v2-steps__item { display: grid; grid-template-columns: minmax(0, 1fr) 30px; gap: 14px; width: 100%; padding: 20px 0; background: transparent; border: 0; border-bottom: 1px solid rgba(32, 9, 0, 0.2); color: var(--v2-black); text-align: left; cursor: pointer; }
.v2-steps__copy { display: grid; }
.v2-steps__copy strong { font-size: clamp(18px, 1.7vw, 22px); line-height: 1.25; }
.v2-steps__copy small { display: block; max-height: 0; padding-top: 0; overflow: hidden; font-size: 15px; line-height: 1.5; color: rgba(32, 9, 0, 0.68); opacity: 0; transition: max-height 260ms ease, padding-top 260ms ease, opacity 200ms ease; }
.v2-steps__item.is-active .v2-steps__copy small { max-height: 220px; padding-top: 10px; opacity: 1; }
.v2-steps__arrow { align-self: center; width: 20px; height: 20px; color: rgba(32, 9, 0, 0.3); transition: transform 260ms ease, color 220ms ease; }
.v2-steps__arrow svg { display: block; width: 100%; height: 100%; }
.v2-steps__item:hover .v2-steps__arrow { color: var(--step-accent); }
.v2-steps__item.is-active .v2-steps__arrow { color: var(--step-accent); transform: rotate(90deg); }
.v2-steps__visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 530px; }
.v2-steps__blocks { position: relative; width: min(100%, 440px); aspect-ratio: 440 / 460; }
.v2-steps__block { position: absolute; left: 0; width: 100%; filter: drop-shadow(0 12px 18px rgba(32, 9, 0, 0.08)); transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), filter 260ms ease; }
.v2-steps__block svg { display: block; width: 100%; height: auto; }
.v2-steps__block svg path { transition: fill 260ms ease, stroke 260ms ease; }
.v2-steps__block:nth-child(1) { top: 0; z-index: 4; }
.v2-steps__block:nth-child(2) { top: 5.7%; z-index: 3; --step-accent: #FE5F00; }
.v2-steps__block:nth-child(3) { top: 18.3%; z-index: 2; --step-accent: #06314A; }
.v2-steps__block:nth-child(4) { top: 30.9%; z-index: 1; --step-accent: #BB3A13; }
.v2-steps__block.is-above { transform: translateY(-150px); }
.v2-steps__block svg [fill="white"] { fill: #FFF9ED; }
.v2-steps__block svg [fill="#F76918"] { fill: #CFCDCC; }
.v2-steps__block svg [stroke="#F26A21"] { stroke: #CFCDCC; }
.v2-steps__block.is-active svg [fill="#F76918"] { fill: var(--step-accent, var(--v2-orange)); }
.v2-steps__block.is-active svg [stroke="#F26A21"] { stroke: var(--step-accent, var(--v2-orange)); }
.v2-steps__blocklabel { position: absolute; top: 84%; left: 56%; transform: skewY(-31deg); transform-origin: 0 0; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #8a8683; pointer-events: none; }
.v2-steps__block.is-active .v2-steps__blocklabel { color: var(--v2-black); }
.v2-steps__copy small b { display: block; margin-bottom: 6px; font-weight: 600; color: var(--step-accent, var(--v2-black)); }
@media (max-width: 900px) { .v2-steps__layout { grid-template-columns: 1fr; }.v2-steps__content { order: 1; }.v2-steps__visual { order: 2; min-height: 470px; } }
@media (max-width: 620px) { .v2-steps { padding: 72px 0; }.v2-steps__item { grid-template-columns: minmax(0, 1fr) 28px; }.v2-steps__visual { min-height: 420px; }.v2-steps__blocks { width: min(100%, 340px); }.v2-steps__block.is-above { transform: translateY(-104px); }.v2-steps__blocklabel { font-size: 10px; } }

/* ---------- Winners wall ---------- */

.v2-wall {
	padding: 96px 0;
}

.v2-wall__head {
	display: grid;
	grid-template-columns: minmax(0, 780px) auto;
	align-items: center;
	justify-content: space-between;
	gap: clamp(36px, 8vw, 120px);
	margin-bottom: 48px;
}

.v2-wall__head .v2-section-title { margin-bottom: 14px; }

.v2-wall__partner-logo {
	display: block;
	width: clamp(112px, 11vw, 150px);
	height: auto;
	max-height: 150px;
	object-fit: contain;
	background: #FFFFFF;
	padding: 12px 16px;
	border-radius: 14px;
	box-shadow: 0 8px 22px rgba(32, 9, 0, 0.1);
}

@media (max-width: 700px) {
	.v2-wall__head {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 20px;
	}

	.v2-wall__partner-logo { width: clamp(76px, 20vw, 104px); }
}

@media (max-width: 480px) {
	.v2-wall__head { align-items: end; }
	.v2-wall__partner-logo { width: 72px; margin-bottom: 4px; }
}

.v2-wall__partner {
	position: fixed;
	bottom: 24px;
	left: 21px;
	z-index: 32;
	display: flex;
	align-items: center;
	gap: 15px;
	width: min(279px, calc(100% - 48px));
	padding: 11px 17px 11px 11px;
	background: rgba(255, 255, 255, 0.97);
	border: 1px solid rgba(254, 95, 0, 0.28);
	border-radius: 16px;
	box-shadow: 0 16px 38px rgba(32, 9, 0, 0.2);
	opacity: 0;
	transform: translateY(24px);
	pointer-events: none;
	transition: opacity 360ms ease, transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
	backdrop-filter: blur(10px);
}

.v2-wall__partner.is-visible {
	opacity: 1;
	transform: none;
}

.v2-wall__partner img {
	position: relative;
	z-index: 4;
	width: 78px;
	height: 78px;
	object-fit: contain;
	border-radius: 8px;
}

.v2-wall__partner-copy {
	position: relative;
	z-index: 4;
	color: var(--v2-black);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.025em;
}

.v2-wall__partner-copy strong {
	color: var(--v2-orange);
	font-size: inherit;
	font-weight: 650;
	letter-spacing: inherit;
}

.v2-wall__partner-confetti {
	position: absolute;
	top: 50%;
	left: 60px;
	z-index: 3;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

.v2-wall__partner-confetti i {
	--confetti-color: var(--v2-orange);
	position: absolute;
	width: 8px;
	height: 18px;
	background: var(--confetti-color);
	border-radius: 999px;
	opacity: 0;
}

.v2-wall__partner-confetti i:nth-child(3n + 2) { --confetti-color: #E3F256; }
.v2-wall__partner-confetti i:nth-child(3n) { --confetti-color: #06314A; }
.v2-wall__partner-confetti i:nth-child(1) { --confetti-x: -78px; --confetti-y: -86px; --confetti-r: -120deg; }
.v2-wall__partner-confetti i:nth-child(2) { --confetti-x: -45px; --confetti-y: -112px; --confetti-r: 80deg; }
.v2-wall__partner-confetti i:nth-child(3) { --confetti-x: -8px; --confetti-y: -102px; --confetti-r: 160deg; }
.v2-wall__partner-confetti i:nth-child(4) { --confetti-x: 32px; --confetti-y: -105px; --confetti-r: 240deg; }
.v2-wall__partner-confetti i:nth-child(5) { --confetti-x: 72px; --confetti-y: -78px; --confetti-r: 310deg; }
.v2-wall__partner-confetti i:nth-child(6) { --confetti-x: 94px; --confetti-y: -36px; --confetti-r: 420deg; }
.v2-wall__partner-confetti i:nth-child(7) { --confetti-x: 87px; --confetti-y: 28px; --confetti-r: 160deg; }
.v2-wall__partner-confetti i:nth-child(8) { --confetti-x: 50px; --confetti-y: 62px; --confetti-r: -220deg; }
.v2-wall__partner-confetti i:nth-child(9) { --confetti-x: 5px; --confetti-y: 75px; --confetti-r: 290deg; }
.v2-wall__partner-confetti i:nth-child(10) { --confetti-x: -42px; --confetti-y: 66px; --confetti-r: 170deg; }
.v2-wall__partner-confetti i:nth-child(11) { --confetti-x: -80px; --confetti-y: 32px; --confetti-r: -300deg; }
.v2-wall__partner-confetti i:nth-child(12) { --confetti-x: -98px; --confetti-y: -28px; --confetti-r: 230deg; }

.v2-wall__partner.is-visible .v2-wall__partner-confetti i {
	animation: v2-partner-confetti 900ms cubic-bezier(0.2, 0.75, 0.25, 1) 260ms both;
}

@keyframes v2-partner-confetti {
	0% { opacity: 0; transform: translate(0, 0) rotate(0) scale(0.4); }
	18% { opacity: 1; }
	75% { opacity: 1; }
	100% { opacity: 0; transform: translate(var(--confetti-x), var(--confetti-y)) rotate(var(--confetti-r)) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.v2-wall__partner.is-visible .v2-wall__partner-confetti i { animation: none; }
}

@media (max-width: 620px) {
	.v2-wall__partner { bottom: 12px; left: 12px; gap: 11px; width: min(250px, calc(100% - 24px)); padding: 8px 12px 8px 8px; }
	.v2-wall__partner img { width: 58px; height: 58px; }
	.v2-wall__partner-copy { font-size: 15px; }
	.v2-wall__partner-confetti { left: 46px; }
}

.v2-wall__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 34px;
}

.v2-wall__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.v2-wall__filter {
	--v2-filter-color: var(--v2-orange);
	--v2-filter-text: var(--v2-cream);
	--v2-filter-active-text: var(--v2-cream);
	display: inline-flex;
	align-items: center;
	min-height: 42px;
	padding: 8px 20px;
	background: var(--v2-filter-color);
	border: 0;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	color: var(--v2-filter-text);
	cursor: pointer;
	opacity: 0.72;
	transition: transform 200ms ease, opacity 200ms ease, box-shadow 200ms ease;
}

.v2-wall__filter:hover {
	opacity: 1;
	transform: translateY(-2px);
	box-shadow: 0 12px 28px color-mix(in srgb, var(--v2-filter-color) 34%, transparent);
}

.v2-wall__filter.is-active {
	color: var(--v2-filter-active-text);
	opacity: 1;
	box-shadow: 0 10px 24px color-mix(in srgb, var(--v2-filter-color) 32%, transparent);
}

.v2-wall__hint {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	color: rgba(32, 9, 0, 0.55);
}

.v2-wall__hint-icon {
	width: 22px;
	height: 22px;
	flex: 0 0 22px;
	fill: none;
	stroke: var(--v2-orange);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.v2-wall__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
}

.v2-tile {
	position: relative;
	transition: transform 240ms ease, opacity 240ms ease;
}

.v2-tile.is-hidden {
	display: none;
}

/* Cada pieza vive dentro del mockup de celular (contorno-celular.png). */
.v2-tile__media {
	position: relative;
	aspect-ratio: 1188 / 2304;
	overflow: hidden;
	background:
		radial-gradient(circle at 50% 42%, rgba(254, 95, 0, 0.22), transparent 34%),
		var(--v2-cream);
	border-radius: 11% / 5.5%;
	transition: transform 240ms ease, filter 240ms ease;
}

.v2-tile:hover .v2-tile__media {
	transform: translateY(-6px);
	filter: drop-shadow(0 22px 30px rgba(32, 9, 0, 0.22));
}

.v2-tile__media video,
.v2-tile__visual {
	position: absolute;
	inset: 1.4% 3% 1.6%;
	width: 94%;
	height: 97%;
	object-fit: cover;
	background: transparent;
	border-radius: 11% / 5.5%;
}

/* Las piezas estáticas se muestran completas; no se recortan como los videos. */
.v2-tile__visual {
	object-fit: contain;
	background: #fff;
}

.v2-tile.is-video-error video {
	visibility: hidden;
}

.v2-tile__frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.v2-tile__tags {
	position: absolute;
	left: 9%;
	right: 9%;
	bottom: 10%;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.v2-chip {
	display: inline-block;
	padding: 5px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
}

.v2-chip--platform {
	background: var(--v2-platform-orange);
	color: var(--v2-white);
}

.v2-tile[data-platform="google"] .v2-chip--platform {
	background: var(--v2-blue);
	color: var(--v2-white);
}

.v2-tile[data-platform="meta"] .v2-chip--platform {
	background: var(--v2-neon);
	color: var(--v2-black);
}

.v2-tile[data-platform="tiktok"] .v2-chip--platform {
	background: var(--v2-platform-orange);
	color: var(--v2-white);
}

.v2-tile[data-platform="linkedin"] .v2-chip--platform {
	background: var(--v2-blue);
	color: var(--v2-white);
}

.v2-chip--brand {
	background: rgba(255, 249, 237, 0.92);
	color: var(--v2-black);
}

.v2-chip--badge {
	position: absolute;
	top: 6.5%;
	left: 9%;
	background: var(--v2-black);
	color: var(--v2-cream);
}

.v2-chip--soon {
	background: rgba(254, 95, 0, 0.14);
	color: var(--v2-red);
	border: 1px dashed rgba(254, 95, 0, 0.5);
}

.v2-tile__sound {
	position: absolute;
	top: 6.5%;
	right: 9%;
	width: 34px;
	height: 34px;
	background: rgba(32, 9, 0, 0.6);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	opacity: 1;
	transition: transform 200ms ease, background 200ms ease;
}

.v2-tile__sound:hover {
	transform: scale(1.08);
}

.v2-tile.is-playing .v2-tile__sound {
	background: var(--v2-platform-orange);
}

.v2-tile__sound:focus-visible {
	outline: 2px solid var(--v2-neon);
	outline-offset: 3px;
}

.v2-tile__sound-icon {
	display: block;
	width: 18px;
	height: 18px;
	margin: auto;
	fill: none;
	stroke: var(--v2-white);
	stroke-width: 2.25;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.v2-tile__sound-icon--on {
	display: none;
}

.v2-tile.is-playing .v2-tile__sound-icon--muted {
	display: none;
}

.v2-tile.is-playing .v2-tile__sound-icon--on {
	display: block;
}

/* ---------- Proceso ---------- */

.v2-process {
	padding: 96px 0;
	background: var(--v2-cream);
	border-top: 1px solid var(--v2-line);
	border-bottom: 1px solid var(--v2-line);
}

.v2-process__track {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 26px;
	padding: 44px 34px 58px;
	border: 2px dashed rgba(254, 95, 0, 0.5);
	border-radius: var(--v2-radius-lg);
}

.v2-process__line {
	position: absolute;
	top: 66px;
	left: 8%;
	right: 8%;
	height: 0;
	border-top: 2px dashed rgba(32, 9, 0, 0.18);
}

.v2-step {
	position: relative;
	z-index: 1;
}

.v2-step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-bottom: 16px;
	background: var(--v2-orange);
	color: var(--v2-white);
	border-radius: 50%;
	font-size: 15px;
	font-weight: 800;
	box-shadow: 0 0 0 8px var(--v2-cream);
}

.v2-step__title {
	margin: 0 0 8px;
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.v2-step__desc {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: rgba(32, 9, 0, 0.7);
}

.v2-process__loop {
	position: absolute;
	bottom: -14px;
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
	padding: 4px 16px;
	background: var(--v2-cream);
	border: 1px solid rgba(254, 95, 0, 0.5);
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--v2-orange);
}

/* ---------- Equipo ---------- */

.v2-team {
	padding: clamp(88px, 10vw, 140px) 0;
	background: var(--v2-orange);
	color: var(--v2-cream);
}

.v2-team__head {
	max-width: 900px;
	margin: 0 auto clamp(46px, 6vw, 74px);
	text-align: center;
}

.v2-team__kicker {
	margin: 0 0 18px;
	color: var(--v2-cream);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.v2-team__title {
	margin: 0;
	font-size: clamp(42px, 6vw, 76px);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -0.04em;
}

.v2-team__title span {
	color: #121210;
}

.v2-team__intro {
	max-width: 680px;
	margin: 24px auto 0;
	color: #FFF9ED;
	font-size: clamp(16px, 1.6vw, 19px);
	line-height: 1.65;
}

/* 12 columnas para poder repartir 3 cards arriba (span 4) y 4 abajo (span 3)
   con los 7 integrantes. */
.v2-team__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 72px 18px;
}

.v2-team__card {
	grid-column: span 3;
}

.v2-team__card:nth-child(-n + 3) {
	grid-column: span 4;
}

.v2-team__card {
	overflow: visible;
	background: var(--v2-cream);
	border: 1px solid rgba(18, 18, 16, 0.14);
	border-radius: 20px;
	transition: transform 260ms ease, border-color 260ms ease, box-shadow 260ms ease;
}

.v2-team__card:hover {
	transform: translateY(-7px);
	border-color: rgba(255, 249, 237, 0.9);
	box-shadow: 0 22px 44px rgba(0, 0, 0, 0.28);
}

.v2-team__visual {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	aspect-ratio: 62 / 58;
	background: var(--v2-cream);
	border-radius: 20px 20px 0 0;
	overflow: visible;
}

.v2-team__visual::after {
	display: none;
}

.v2-team__visual img {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: auto;
	height: 112%;
	max-width: none;
	object-fit: contain;
	object-position: center bottom;
	display: block;
}

.v2-team__visual svg {
	position: relative;
	z-index: 2;
	width: 82px;
	height: 82px;
	fill: none;
	stroke: var(--v2-cream);
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.v2-team__role {
	margin: 6px 0 0;
	color: var(--v2-orange);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
}

.v2-team__body {
	padding: 18px 20px 20px;
}

.v2-team__body h3 {
	margin: 0;
	color: #121210;
	font-size: 20px;
	line-height: 1.15;
}

@media (max-width: 980px) {
	.v2-team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* Se anulan los spans del layout 3+4: acá vale una card por columna. */
	.v2-team__card,
	.v2-team__card:nth-child(-n + 3) { grid-column: auto; }
	/* Con 7 integrantes la última card queda sola: la centramos. */
	.v2-team__card:last-child:nth-child(2n + 1) {
		grid-column: 1 / -1;
		justify-self: center;
		width: calc(50% - 9px);
	}
}

/* En mobile el equipo se mantiene en dos columnas: una sola columna obligaba a
   scrollear ocho tarjetas gigantes. Se achican tipografías y paddings. */
@media (max-width: 560px) {
	.v2-team { padding: 72px 0; }
	.v2-team__head { text-align: left; }
	.v2-team__intro { margin-left: 0; }
	.v2-team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 12px; }
	.v2-team__card:last-child:nth-child(2n + 1) { width: calc(50% - 6px); }
	.v2-team__card { border-radius: 16px; }
	.v2-team__visual { border-radius: 16px 16px 0 0; }
	.v2-team__body { padding: 12px 13px 14px; }
	.v2-team__body h3 { font-size: 15px; }
	.v2-team__role { margin-top: 4px; font-size: 11.5px; line-height: 1.3; }
}

/* ---------- Casos ---------- */

.v2-cases {
	position: relative;
	padding: 96px 0;
	background: #FFF9ED;
	overflow: hidden;
	isolation: isolate;
}

.v2-cases > .v2-container {
	position: relative;
	z-index: 2;
}

.v2-cases__icon-rain {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	pointer-events: none;
}

.v2-cases__rain-icon {
	position: absolute;
	bottom: -90px;
	left: var(--rain-left);
	width: var(--rain-size);
	aspect-ratio: 1;
	background: #bb3a13;
	-webkit-mask-image: var(--rain-icon);
	mask-image: var(--rain-icon);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	opacity: 0;
}

.v2-cases__rain-icon:nth-child(4n + 1) { background: #bb3a13; }
.v2-cases__rain-icon:nth-child(4n + 2) { background: #06314a; }
.v2-cases__rain-icon:nth-child(4n + 3) { background: #e3f256; }
.v2-cases__rain-icon:nth-child(4n)     { background: #FE5F00; }

.is-icon-raining .v2-cases__rain-icon {
	animation: v2IconRainUp var(--rain-duration) cubic-bezier(0.22, 0.7, 0.32, 1) var(--rain-delay) 1 both;
}

.v2-cases__rain-icon:nth-child(1)  { --rain-left: 3%;  --rain-size: 42px; --rain-delay: 0s;    --rain-duration: 2.5s; }
.v2-cases__rain-icon:nth-child(2)  { --rain-left: 11%; --rain-size: 58px; --rain-delay: 0.55s; --rain-duration: 3s; }
.v2-cases__rain-icon:nth-child(3)  { --rain-left: 19%; --rain-size: 34px; --rain-delay: 0.2s;  --rain-duration: 2.7s; }
.v2-cases__rain-icon:nth-child(4)  { --rain-left: 27%; --rain-size: 50px; --rain-delay: 0.9s;  --rain-duration: 2.6s; }
.v2-cases__rain-icon:nth-child(5)  { --rain-left: 35%; --rain-size: 40px; --rain-delay: 0.35s; --rain-duration: 3.1s; }
.v2-cases__rain-icon:nth-child(6)  { --rain-left: 43%; --rain-size: 62px; --rain-delay: 1.1s;  --rain-duration: 2.8s; }
.v2-cases__rain-icon:nth-child(7)  { --rain-left: 50%; --rain-size: 36px; --rain-delay: 0.05s; --rain-duration: 3s; }
.v2-cases__rain-icon:nth-child(8)  { --rain-left: 57%; --rain-size: 48px; --rain-delay: 0.7s;  --rain-duration: 2.5s; }
.v2-cases__rain-icon:nth-child(9)  { --rain-left: 64%; --rain-size: 56px; --rain-delay: 0.3s;  --rain-duration: 3.2s; }
.v2-cases__rain-icon:nth-child(10) { --rain-left: 71%; --rain-size: 38px; --rain-delay: 1.25s; --rain-duration: 2.7s; }
.v2-cases__rain-icon:nth-child(11) { --rain-left: 77%; --rain-size: 52px; --rain-delay: 0.45s; --rain-duration: 2.9s; }
.v2-cases__rain-icon:nth-child(12) { --rain-left: 83%; --rain-size: 34px; --rain-delay: 0.95s; --rain-duration: 2.6s; }
.v2-cases__rain-icon:nth-child(13) { --rain-left: 88%; --rain-size: 60px; --rain-delay: 0.15s; --rain-duration: 3.1s; }
.v2-cases__rain-icon:nth-child(14) { --rain-left: 93%; --rain-size: 44px; --rain-delay: 0.75s; --rain-duration: 2.8s; }
.v2-cases__rain-icon:nth-child(15) { --rain-left: 97%; --rain-size: 32px; --rain-delay: 1.35s; --rain-duration: 2.5s; }

@keyframes v2IconRainUp {
	0% {
		opacity: 0;
		transform: translate3d(0, 0, 0) rotate(-8deg);
	}
	14% {
		opacity: 0.72;
	}
	78% {
		opacity: 0.58;
	}
	100% {
		opacity: 0;
		transform: translate3d(18px, calc(-100vh - 260px), 0) rotate(18deg);
	}
}

.v2-cases__title .v2-rotator {
	vertical-align: baseline;
}

.v2-cases__list {
	border-top: 1px solid var(--v2-line);
}

.v2-case {
	display: grid;
	grid-template-columns: 180px 1fr auto;
	align-items: center;
	gap: clamp(20px, 3vw, 40px);
	padding: 26px 10px;
	border-bottom: 1px solid var(--v2-line);
	border-radius: 14px;
	transition: background 200ms ease, transform 200ms ease;
}

.v2-case:hover {
	background: var(--v2-cream);
	transform: translateX(4px);
}

.v2-case__thumb {
	width: 180px;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: 14px;
	background: var(--v2-graphite);
}

.v2-case__thumb video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.v2-case__logo {
	width: auto;
	max-width: 170px;
	height: 36px;
	margin: 0 0 14px;
	object-fit: contain;
	object-position: left center;
}

.v2-case__logo-text {
	display: block;
	margin: 0 0 14px;
	font-size: 20px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.08em;
	color: var(--v2-black);
}

.v2-case__meta {
	margin: 0 0 6px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--v2-orange);
}

.v2-case__title {
	margin: 0 0 6px;
	font-size: clamp(21px, 2.6vw, 30px);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

.v2-case__desc {
	margin: 0;
	font-size: 14.5px;
	color: rgba(32, 9, 0, 0.65);
}

.v2-case__arrow {
	display: inline-flex;
	width: 30px;
	height: 30px;
	color: var(--v2-black);
	transition: transform 200ms ease, color 200ms ease;
}

.v2-case__arrow svg {
	display: block;
	width: 100%;
	height: 100%;
}

.v2-case:hover .v2-case__arrow {
	transform: translateX(6px);
	color: var(--v2-orange);
}

/* ---------- Variante de casos: cards apilables ---------- */

.v2-cases-stack {
	position: relative;
	isolation: isolate;
	padding: 110px 0 140px;
	background: #FFF9ED;
	color: var(--v2-black);
}

.v2-cases-stack > .v2-container {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(250px, 0.38fr) minmax(0, 1fr);
	gap: clamp(36px, 5vw, 72px);
	align-items: start;
}

.v2-cases-stack__head {
	position: sticky;
	top: 108px;
	max-width: 360px;
	margin: 0;
}

.v2-cases-stack__head .v2-section-sub {
	color: rgba(32, 9, 0, 0.72);
}

/* Mismo tratamiento que el kicker de testimonios. */
.v2-cases-stack__head .v2-kicker {
	color: var(--v2-orange);
	font-weight: 500;
}

.v2-cases-stack__head .v2-section-title {
	color: var(--v2-black);
	/* Un poco más chico que el resto: la columna es angosta (360px) y la palabra
	   rotativa más larga ("creatividad") necesita entrar al lado de "por". */
	font-size: clamp(26px, 3.1vw, 42px);
}

.v2-cases-stack__head .v2-section-title span {
	color: var(--v2-orange);
}

.v2-cases-stack__icon-rain {
	z-index: 1;
}

.v2-cases-stack__icon-rain .v2-cases__rain-icon {
	top: min(82vh, 760px);
	bottom: auto;
}

.v2-cases-stack__list {
	position: relative;
	width: 100%;
	min-width: 0;
}

.v2-cases-stack__card {
	position: sticky;
	display: grid;
	grid-template-columns: minmax(250px, 0.72fr) minmax(0, 1.28fr);
	min-height: min(52vh, 460px);
	margin-bottom: 34px;
	overflow: hidden;
	background: #FFF9ED;
	border: 1px solid rgba(32, 9, 0, 0.12);
	border-radius: 24px;
	box-shadow: 0 22px 55px rgba(32, 9, 0, 0.14);
}

.v2-cases-stack__card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	z-index: 4;
	height: 7px;
	background: var(--stack-accent);
	border-radius: 23px 23px 0 0;
	pointer-events: none;
}

.v2-cases-stack__card--1 {
	--stack-accent: #FE5F00;
	--stack-accent-ink: #FFF9ED;
	top: 84px;
	z-index: 1;
	color: var(--v2-black);
}

.v2-cases-stack__card--2 {
	--stack-accent: #FE5F00;
	--stack-accent-ink: #FFF9ED;
	top: 100px;
	z-index: 2;
	color: var(--v2-black);
}

.v2-cases-stack__card--3 {
	--stack-accent: #FE5F00;
	--stack-accent-ink: #FFF9ED;
	top: 116px;
	z-index: 3;
	color: var(--v2-black);
}

.v2-cases-stack__media {
	position: relative;
	min-height: 100%;
	min-width: 0;
	overflow: hidden;
	background: #200900;
}

.v2-cases-stack__media video {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.v2-cases-stack__body {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	padding: clamp(28px, 4vw, 46px);
}

.v2-cases-stack__logo-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	height: auto;
	margin-bottom: 22px;
	padding: 0;
}

/* La altura sale inline de boska_logo_height(): acá solo se limita el ancho. */
.v2-cases-stack__brand-logo {
	width: auto;
	max-width: 170px;
	object-fit: contain;
}

.v2-cases-stack__logo-plus {
	font-size: 20px;
	font-weight: 400;
	line-height: 1;
	color: var(--v2-orange);
}

.v2-cases-stack__platform-logo {
	width: 27px;
	height: 27px;
	object-fit: contain;
}

.v2-cases-stack__platform-logo[src*="meta-logo"] {
	width: 40px;
	height: 24px;
}

.v2-cases-stack__meta {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.v2-cases-stack__title {
	max-width: 660px;
	margin: 0 0 22px;
	font-size: clamp(25px, 2.5vw, 27px);
	font-weight: 500;
	line-height: 1.02;
	letter-spacing: -0.035em;
}

.v2-cases-stack__title-blue {
	color: #FE5F00;
}

.v2-cases-stack__title-orange {
	color: #FE5F00;
}

.v2-cases-stack__title-fluor {
	color: #FE5F00;
}

.v2-cases-stack__desc {
	max-width: 620px;
	margin: 0;
	font-size: clamp(16px, 1.7vw, 20px);
	line-height: 1.6;
	opacity: 0.82;
}

.v2-cases-stack__metrics {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	width: min(100%, 540px);
	border: 1px solid rgba(6, 49, 74, 0.14);
	border-radius: 14px;
	overflow: hidden;
}

.v2-cases-stack__metric {
	display: grid;
	align-content: center;
	min-height: 88px;
	padding: 14px 18px;
	background: #FFF9ED;
}

.v2-cases-stack__metric:nth-child(2),
.v2-cases-stack__metric:nth-child(3) {
	background: var(--stack-accent);
}

.v2-cases-stack__metric:nth-child(odd) {
	border-right: 1px solid rgba(6, 49, 74, 0.12);
}

/* Borde inferior solo si abajo hay otra fila (los casos traen 2, 3 o 4 KPIs). */
.v2-cases-stack__metric:nth-last-child(n+3) {
	border-bottom: 1px solid rgba(6, 49, 74, 0.12);
}

/* Cantidad impar: el último KPI ocupa la fila entera en vez de dejar un hueco. */
.v2-cases-stack__metric:last-child:nth-child(odd) {
	grid-column: 1 / -1;
	border-right: 0;
}

.v2-cases-stack__metric strong {
	display: block;
	margin-bottom: 4px;
	font-size: clamp(20px, 2vw, 22px);
	font-weight: 600;
	line-height: 0.95;
	letter-spacing: -0.04em;
	color: #121210;
}

.v2-cases-stack__metric span {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(18, 18, 16, 0.75);
}

.v2-cases-stack__metric:nth-child(2) strong,
.v2-cases-stack__metric:nth-child(3) strong,
.v2-cases-stack__metric:nth-child(2) span,
.v2-cases-stack__metric:nth-child(3) span {
	color: var(--stack-accent-ink);
}

/* Tres KPIs: tríptico de columnas iguales con el del medio en cremita y los de
   los costados en naranja (en vez de dejar el tercero ocupando una fila entera).
   Solo de tablet para arriba: en mobile tres columnas quedan ilegibles y vuelve
   a valer el layout de dos. */
@media (min-width: 641px) {
	.v2-cases-stack__metrics--trip {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.v2-cases-stack__metrics--trip .v2-cases-stack__metric {
		padding: 14px 15px;
		background: var(--stack-accent);
		border-right: 1px solid rgba(6, 49, 74, 0.12);
		border-bottom: 0;
	}

	.v2-cases-stack__metrics--trip .v2-cases-stack__metric:last-child {
		grid-column: auto;
		border-right: 0;
	}

	.v2-cases-stack__metrics--trip .v2-cases-stack__metric:nth-child(2) {
		background: #FFF9ED;
	}

	.v2-cases-stack__metrics--trip .v2-cases-stack__metric strong,
	.v2-cases-stack__metrics--trip .v2-cases-stack__metric span {
		color: var(--stack-accent-ink);
	}

	.v2-cases-stack__metrics--trip .v2-cases-stack__metric:nth-child(2) strong {
		color: #121210;
	}

	.v2-cases-stack__metrics--trip .v2-cases-stack__metric:nth-child(2) span {
		color: rgba(18, 18, 16, 0.75);
	}
}

/* Disparador del pop-up con la redacción completa del caso. */
.v2-cases-stack__more {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 20px;
	padding: 11px 20px;
	background: transparent;
	border: 1px solid rgba(32, 9, 0, 0.28);
	border-radius: 999px;
	color: var(--v2-black);
	font: inherit;
	font-size: 12px;
	font-weight: 750;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}

.v2-cases-stack__more:hover,
.v2-cases-stack__more:focus-visible {
	background: var(--v2-orange);
	border-color: var(--v2-orange);
	color: var(--v2-cream);
}

.v2-cases-stack__more .v2-divider__arrow {
	width: 15px;
	height: 15px;
	margin: 0;
	transition: transform 200ms ease;
}

.v2-cases-stack__more:hover .v2-divider__arrow { transform: translateX(3px); }

/* ---------- Pop-up de caso de éxito ---------- */

.v2-casemodal {
	width: min(920px, calc(100vw - 32px));
	max-width: none;
	max-height: min(88vh, 900px);
	padding: 0;
	background: transparent;
	border: 0;
	overflow: visible;
	color: var(--v2-black);
}

.v2-casemodal::backdrop {
	background: rgba(15, 5, 0, 0.62);
	backdrop-filter: blur(3px);
}

.v2-casemodal[open] .v2-casemodal__panel {
	animation: v2CaseModalIn 280ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes v2CaseModalIn {
	from { opacity: 0; transform: translateY(16px) scale(0.985); }
	to { opacity: 1; transform: none; }
}

.v2-casemodal__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	max-height: min(88vh, 900px);
	overflow: hidden;
	background: #FFF9ED;
	border: 1px solid rgba(32, 9, 0, 0.12);
	border-radius: 24px;
	box-shadow: 0 40px 90px rgba(15, 5, 0, 0.38);
}

.v2-casemodal__panel::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	z-index: 3;
	height: 7px;
	background: var(--v2-orange);
	border-radius: 23px 23px 0 0;
	pointer-events: none;
}

.v2-casemodal__close {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 4;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	background: #FFF9ED;
	border: 1px solid rgba(32, 9, 0, 0.2);
	border-radius: 50%;
	color: var(--v2-black);
	cursor: pointer;
	transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}

.v2-casemodal__close:hover {
	background: var(--v2-orange);
	border-color: var(--v2-orange);
	color: var(--v2-cream);
}

.v2-casemodal__close svg { width: 17px; height: 17px; }

/* Cabecera fija compacta: se llevaba más de la mitad del alto del panel y dejaba
   muy poco aire al texto scrolleable de abajo. */
.v2-casemodal__head {
	flex: 0 0 auto;
	padding: clamp(22px, 2.6vw, 30px) clamp(24px, 4vw, 48px) clamp(16px, 1.8vw, 20px);
	border-bottom: 1px solid rgba(32, 9, 0, 0.1);
}

.v2-casemodal__logo {
	display: inline-flex;
	margin-bottom: 11px;
}

/* La altura sale inline de boska_logo_height(): acá solo se limita el ancho. */
.v2-casemodal__logo img {
	width: auto;
	max-width: 180px;
	object-fit: contain;
}

.v2-casemodal__eyebrow {
	margin: 0 0 7px;
	color: var(--v2-orange);
	font-size: 11px;
	font-weight: 750;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

/* Más ancho que antes (640px) para que el título entre en dos líneas y no en
   tres: gana alto la parte scrolleable sin tocar el cuerpo de la tipografía. */
.v2-casemodal__title {
	max-width: 780px;
	margin: 0;
	font-size: clamp(24px, 3.2vw, 34px);
	font-weight: 600;
	line-height: 1.06;
	letter-spacing: -0.035em;
}

.v2-casemodal__kpis {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin-top: 15px;
}

/* Naranja pleno con texto crema, como las tarjetas de la sección de casos. */
.v2-casemodal__kpi {
	flex: 1 1 150px;
	padding: 10px 12px;
	background: var(--v2-orange);
	border: 1px solid var(--v2-orange);
	border-radius: 12px;
}

.v2-casemodal__kpi strong {
	display: block;
	margin-bottom: 3px;
	color: var(--v2-cream);
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.04em;
}

.v2-casemodal__kpi span {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--v2-cream);
}

.v2-casemodal__body {
	flex: 1 1 auto;
	padding: clamp(24px, 3.4vw, 38px) clamp(24px, 4vw, 48px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.v2-casemodal__section + .v2-casemodal__section { margin-top: 30px; }

.v2-casemodal__section h4 {
	margin: 0 0 12px;
	color: var(--v2-orange);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.v2-casemodal__section p {
	margin: 0 0 13px;
	max-width: 720px;
	color: rgba(32, 9, 0, 0.82);
	font-size: 15.5px;
	line-height: 1.66;
}

.v2-casemodal__section p:last-child { margin-bottom: 0; }
.v2-casemodal__lead { font-weight: 650; color: var(--v2-black) !important; }

.v2-casemodal__section ul {
	margin: 0 0 15px;
	padding: 0;
	list-style: none;
}

.v2-casemodal__section li {
	position: relative;
	padding-left: 22px;
	margin-bottom: 8px;
	color: rgba(32, 9, 0, 0.82);
	font-size: 15.5px;
	line-height: 1.6;
}

.v2-casemodal__section li::before {
	content: "";
	position: absolute;
	top: 9px;
	left: 4px;
	width: 7px;
	height: 7px;
	background: var(--v2-orange);
	border-radius: 2px;
}

.v2-casemodal__section li strong { color: var(--v2-black); font-weight: 750; }

.v2-casemodal__foot {
	flex: 0 0 auto;
	padding: 18px clamp(24px, 4vw, 48px);
	background: rgba(32, 9, 0, 0.035);
	border-top: 1px solid rgba(32, 9, 0, 0.1);
}

body.v2-modal-open { overflow: hidden; }

@media (max-width: 640px) {
	.v2-casemodal {
		width: 100vw;
		max-width: 100vw;
		max-height: 92vh;
		margin: auto 0 0;
	}
	.v2-casemodal__panel {
		max-height: 92vh;
		border-radius: 22px 22px 0 0;
	}
	.v2-casemodal__kpi { flex: 1 1 130px; }
	.v2-casemodal__foot .v2-btn { width: 100%; justify-content: center; }

	.v2-cases-stack__more { width: 100%; justify-content: center; }
	.v2-cases-stack__metric { min-height: 80px; padding: 12px 14px; }
	.v2-cases-stack__metric span { font-size: 10px; }
}

/* ---------- Testimonios ---------- */

.v2-quotes {
	position: relative;
	isolation: isolate;
	padding: 96px 0;
	overflow: hidden;
}

.v2-quotes::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--v2-cream);
	-webkit-mask-image: url("../../../../uploads/qeqwewqazul.png");
	mask-image: url("../../../../uploads/qeqwewqazul.png");
	-webkit-mask-size: 96px 96px;
	mask-size: 96px 96px;
	-webkit-mask-repeat: repeat;
	mask-repeat: repeat;
	opacity: 0.045;
	pointer-events: none;
}

.v2-quotes > .v2-container {
	position: relative;
	z-index: 1;
}

.v2-quotes > .v2-container > .v2-kicker {
	display: flex;
	justify-content: center;
	text-align: center;
	color: var(--v2-cream);
}

.v2-quotes__slider {
	position: relative;
	max-width: 860px;
	margin-inline: auto;
	text-align: center;
}

.v2-quotes__stage {
	display: flex;
	align-items: stretch;
	gap: 30px;
	transition: transform 640ms cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}

.v2-quote {
	margin: 0;
	opacity: 0.28;
	transform: scale(0.9);
	transition: opacity 520ms ease, transform 520ms ease;
}

.v2-quote.is-active {
	opacity: 1;
	transform: scale(1);
}

.v2-quote:not(.is-active) {
	pointer-events: none;
}

.v2-quote__mark {
	display: block;
	width: 72px;
	height: auto;
	margin: 0 auto 22px;
	fill: none;
	stroke: var(--v2-cream);
	stroke-width: 4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.v2-quote__mark-base {
	opacity: 0.2;
}

.v2-quote__mark-progress path {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
}

.v2-quote.is-active .v2-quote__mark-progress path {
	animation: v2QuoteTrace 6s linear forwards;
}

.v2-quote.is-active .v2-quote__mark-progress path:nth-child(2) {
	animation-delay: 240ms;
	animation-duration: 5.76s;
}

@keyframes v2QuoteTrace {
	to {
		stroke-dashoffset: 0;
	}
}

.v2-quote__text {
	margin: 0 0 30px;
	font-size: clamp(22px, 3.2vw, 36px);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.02em;
	color: var(--v2-cream);
}

.v2-quote__author {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	text-align: left;
}


.v2-quote__id {
	display: grid;
	line-height: 1.35;
}

.v2-quote__id strong {
	font-size: 15.5px;
}

.v2-quote__id span {
	font-size: 13.5px;
	color: rgba(32, 9, 0, 0.7);
}

.v2-quotes__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	margin-top: 40px;
}

.v2-quotes__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	background: transparent;
	border: 1px solid rgba(255, 249, 237, 0.65);
	border-radius: 50%;
	color: var(--v2-cream);
	font-size: 18px;
	cursor: pointer;
	transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}

.v2-quotes__arrow:hover {
	background: var(--v2-black);
	border-color: var(--v2-black);
	color: var(--v2-cream);
}

.v2-quotes__arrow svg {
	display: block;
	width: 20px;
	height: 20px;
}

.v2-quotes__arrow--prev svg {
	transform: rotate(180deg);
}

.v2-quotes__dots {
	display: flex;
	gap: 8px;
}

.v2-quotes__dot {
	width: 9px;
	height: 9px;
	padding: 0;
	background: rgba(255, 249, 237, 0.45);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: background 180ms ease, transform 180ms ease;
}

.v2-quotes__dot.is-active {
	background: var(--v2-cream);
	transform: scale(1.25);
}

.v2-quotes__cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
	margin-top: 72px;
	padding-top: 44px;
	border-top: 1px solid var(--v2-line-light);
}

.v2-quotes__cta-title {
	margin: 0;
	font-size: clamp(26px, 3.4vw, 40px);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--v2-cream);
}

/* Testimonios editoriales: idea principal + reseña ampliable. */
.v2-quotes {
	padding: clamp(82px, 9vw, 126px) 0;
	background: #F7F1E6;
}

.v2-quotes__head {
	max-width: 1080px;
	margin: 0 auto clamp(34px, 5vw, 58px);
	text-align: center;
}

.v2-quotes__head .v2-kicker {
	justify-content: center;
	margin-bottom: 14px;
	color: var(--v2-orange);
	font-weight: 500;
}

.v2-quotes__head h2 {
	margin: 0;
	color: var(--v2-cream);
	font-size: clamp(38px, 5.5vw, 72px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.035em;
}

.v2-quotes__head h2 span { color: var(--v2-orange); }

.v2-quotes__slider {
	max-width: 1240px;
	text-align: left;
	overflow: hidden;
}

.v2-quote {
	flex: 0 0 min(920px, 84%);
	display: grid;
	/* 300px (antes 228) para que el logo de la marca entre más grande sin
	   deformarse: los wordmarks anchos (muse, workana) topaban con el ancho. */
	grid-template-columns: 300px minmax(0, 1fr);
	min-height: 430px;
	overflow: hidden;
	background: rgba(255, 249, 237, 0.055);
	border: 1px solid rgba(255, 249, 237, 0.22);
	border-radius: 22px;
	box-shadow: 0 26px 70px rgba(0, 0, 0, 0.2);
}

/* La franja solo lleva la marca, así que va centrada y ocupa el alto entero. */
.v2-quote__rail {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 22px;
	padding: 34px 26px;
	background: var(--v2-orange);
	border-right: 1px solid rgba(255, 249, 237, 0.2);
}

.v2-quote__brands {
	display: grid;
	width: 100%;
	gap: 8px;
}

.v2-quote__brand-logos {
	display: grid;
	width: 100%;
	gap: 9px;
}

.v2-quote__brand-logos > span {
	display: grid;
	place-items: center;
	width: 100%;
	min-height: 42px;
	padding: 4px 0;
	background: transparent;
}

/* La altura sale inline de boska_logo_height(): acá solo se limita el ancho. */
.v2-quote__brand-logos img {
	display: block;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	filter: brightness(0) saturate(100%) invert(96%) sepia(8%) saturate(514%) hue-rotate(334deg) brightness(108%) contrast(102%);
}

.v2-quote__brands span,
.v2-quote__company {
	display: block;
	width: 100%;
	padding: 8px 10px;
	border: 1px solid rgba(255, 249, 237, 0.54);
	border-radius: 999px;
	color: var(--v2-cream);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: 0.06em;
	text-align: center;
	text-transform: uppercase;
}

.v2-quote__content {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: clamp(34px, 5vw, 58px);
}

.v2-quote__mark {
	position: absolute;
	top: 25px;
	right: 30px;
	width: 70px;
	margin: 0;
	stroke: var(--v2-orange);
	opacity: 0.2;
}

.v2-quote__text {
	position: relative;
	z-index: 1;
	max-width: 760px;
	margin: 0 0 28px;
	padding-right: 54px;
	color: var(--v2-cream);
	font-size: clamp(30px, 4vw, 32px);
	font-weight: 650;
	line-height: 1.08;
	letter-spacing: -0.035em;
}

.v2-quote__details {
	margin: 0 0 28px;
	border-top: 1px solid rgba(255, 249, 237, 0.22);
	border-bottom: 1px solid rgba(255, 249, 237, 0.22);
}

.v2-quote__details summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 15px 0;
	color: var(--v2-orange);
	font-size: 12px;
	font-weight: 750;
	letter-spacing: 0.13em;
	list-style: none;
	text-transform: uppercase;
	cursor: pointer;
}

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

.v2-quote__details summary .v2-divider__arrow {
	width: 18px;
	height: 18px;
	margin: 0;
	transform: rotate(90deg);
	transition: transform 220ms ease;
}

.v2-quote__details[open] summary .v2-divider__arrow { transform: rotate(-90deg); }

.v2-quote__full {
	padding: 5px 0 22px;
	animation: v2QuoteFullIn 320ms ease both;
}

.v2-quote__full p {
	max-width: 800px;
	margin: 0 0 13px;
	color: rgba(255, 249, 237, 0.8);
	font-size: 15px;
	line-height: 1.62;
}

.v2-quote__full p:last-child { margin-bottom: 0; }

/* El cierre en negrita es un remate: solo cuando la reseña tiene varios párrafos.
   Si el "leer más" trae uno solo, se leería toda la reseña en bold. */
.v2-quote__full p:last-child:not(:only-child) { color: var(--v2-cream); font-weight: 650; }

@keyframes v2QuoteFullIn {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: none; }
}

.v2-quote__author {
	justify-content: flex-start;
	margin-top: auto;
	padding-top: 2px;
}

.v2-quote__id strong {
	color: var(--v2-cream);
	font-size: 14px;
	font-weight: 750;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.v2-quote__id span {
	margin-top: 3px;
	color: rgba(255, 249, 237, 0.62);
	font-size: 12px;
}

.v2-quotes__controls { margin-top: 30px; }
.v2-quotes__arrow:hover { background: var(--v2-orange); border-color: var(--v2-orange); }

@media (max-width: 760px) {
	/* La card ocupa todo el ancho del contenedor, igual que las de casos de
	   éxito: el 84% de la base dejaba asomar las vecinas y en pantalla chica
	   se comía demasiado ancho útil. El carrusel sigue centrando la activa por
	   su ancho real, así que no depende del asomo. */
	.v2-quote { grid-template-columns: 1fr; flex-basis: 100%; }
	.v2-quote__rail {
		flex-direction: row;
		align-items: center;
		padding: 18px 20px;
		border-right: 0;
		border-bottom: 1px solid rgba(255, 249, 237, 0.2);
	}
	.v2-quote__brands { display: flex; justify-content: center; flex-wrap: wrap; }
	.v2-quote__brand-logos { display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 16px; }
	.v2-quote__brand-logos > span { width: auto; min-height: 0; padding: 0; }
	.v2-quote__brands span,
	.v2-quote__company { width: auto; padding: 7px 9px; }
	.v2-quote__content { padding: 30px 24px; }
	.v2-quote__mark { top: 18px; right: 20px; width: 46px; }
	.v2-quote__text { padding-right: 30px; font-size: clamp(19px, 5vw, 23px); line-height: 1.18; }
	.v2-quote__full p { font-size: 14px; }
}

@media (max-width: 460px) {
	.v2-quotes__head { text-align: left; }
	.v2-quotes__head .v2-kicker { justify-content: flex-start; }
	.v2-quote__brands { gap: 5px; }
	.v2-quote__brands span { font-size: 9px; }
	.v2-quote__content { padding: 27px 20px; }
	.v2-quote__text { font-size: 19px; }
}

/* ---------- Testimonios sobre fondo claro (#F7F1E6) ---------- */
.v2-quotes > .v2-container > .v2-kicker { color: var(--v2-orange); }
.v2-quotes__head h2 { color: var(--v2-black); }
.v2-quotes__head h2 span { color: var(--v2-orange); }

.v2-quote {
	background: #FFF9ED;
	border-color: rgba(32, 9, 0, 0.1);
	box-shadow: 0 22px 54px rgba(32, 9, 0, 0.12);
}

/* La franja lateral sigue en naranja. */
.v2-quote__rail { background: var(--v2-orange); }

/* Un solo logo: más aire alrededor (el tamaño ya viene de la altura inline). */
.v2-quote__brand-logos:has(> span:only-child) > span { min-height: 78px; }

.v2-quote__text { color: var(--v2-black); font-weight: 500; }
.v2-quote__text strong, .v2-quote__text b { font-weight: 700; }
.v2-quote__id strong { color: var(--v2-black); }
.v2-quote__id span { color: rgba(32, 9, 0, 0.6); }
.v2-quote__details { border-color: rgba(32, 9, 0, 0.14); }
.v2-quote__full p { color: rgba(32, 9, 0, 0.72); }
.v2-quote__full p:last-child:not(:only-child) { color: var(--v2-black); }

.v2-quotes__arrow { border-color: rgba(32, 9, 0, 0.35); color: var(--v2-black); }
.v2-quotes__arrow:hover { background: var(--v2-black); border-color: var(--v2-black); color: var(--v2-cream); }
.v2-quotes__dot { background: rgba(32, 9, 0, 0.22); }
.v2-quotes__dot.is-active { background: var(--v2-orange); }

/* ---------- Tres pilares ---------- */

.v2-pillars3 {
	position: relative;
	isolation: isolate;
	padding: 96px 0;
	background: #FFF9ED !important;
	overflow: hidden;
}

/* Trama crema del isotipo sobre el fondo naranja. */
.v2-pillars3::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--v2-cream);
	-webkit-mask-image: url("../../../../uploads/qeqwewqazul.png");
	mask-image: url("../../../../uploads/qeqwewqazul.png");
	-webkit-mask-size: 92px 92px;
	mask-size: 92px 92px;
	-webkit-mask-repeat: repeat;
	mask-repeat: repeat;
	opacity: 0.045;
	pointer-events: none;
}

.v2-pillars3 > .v2-container {
	position: relative;
	z-index: 1;
}

.v2-pillars3 .v2-section-title {
	color: #200900;
	font-weight: 700;
}

.v2-pillars3 .v2-section-title > .v2-accent {
	color: var(--v2-orange);
	font-weight: 700 !important;
}

/* Separador dinámico de frases entre pilares y medios. */
.v2-pillars3__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(18px, 2.2vw, 28px);
}

/* Tarjetas pilar editoriales: base clara, mucho aire y un acento por concepto. */
.v2-pil {
	--pil-accent: #06314A;
	position: relative;
	display: grid;
	grid-template-rows: auto auto auto 1fr;
	gap: 14px;
	align-content: start;
	overflow: hidden;
	min-height: 370px;
	padding-top: clamp(150px, 13vw, 180px);
	padding: clamp(32px, 3vw, 44px);
	background: #FFFDF8;
	border: 0;
	border-radius: 30px;
	box-shadow: 0 22px 55px rgba(6, 49, 74, 0.1);
}

.v2-pil--blue {
	--pil-accent: #06314A;
}

.v2-pil--orange {
	--pil-accent: #FE5F00;
}

.v2-pil--red {
	--pil-accent: #BB3A13;
}


.v2-pil__mark {
	position: absolute;
	z-index: 0;
	top: -46px;
	right: -42px;
	width: 205px;
	height: 205px;
	padding: 0;
	background: var(--pil-accent);
	-webkit-mask: var(--pil-mark-url) center / contain no-repeat;
	mask: var(--pil-mark-url) center / contain no-repeat;
	opacity: 0.16;
	pointer-events: none;
	transform: rotate(0deg);
	transform-origin: center;
	transition: transform 650ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

.v2-pil:hover .v2-pil__mark {
	transform: rotate(180deg);
}

.v2-pil__title {
	position: relative;
	z-index: 1;
	margin: 12px 0 0;
	font-size: clamp(28px, 2.7vw, 38px);
	font-weight: 700;
	letter-spacing: -0.035em;
	color: #101B2D;
}

.v2-pil__claim {
	position: relative;
	z-index: 1;
	margin: 0;
	font-size: clamp(16px, 1.4vw, 18px);
	font-weight: 500;
	line-height: 1.5;
	color: var(--pil-accent);
}

.v2-pil__rule {
	position: relative;
	z-index: 1;
	display: block;
	width: 68px;
	height: 2px;
	margin: 14px 0 8px;
	background: var(--pil-accent);
	opacity: 0.65;
}

.v2-pil__desc {
	position: relative;
	z-index: 1;
	margin: 0;
	font-size: 16px;
	line-height: 1.65;
	color: rgba(16, 27, 45, 0.82);
}

/* ---------- Pilares: acordeón autoplay en loop ---------- */
.v2-pillars3__grid.is-accordion .v2-pil {
	cursor: pointer;
	transition: box-shadow 0.45s ease, transform 0.45s ease;
}

.v2-pillars3__grid.is-accordion .v2-pil__rule,
.v2-pillars3__grid.is-accordion .v2-pil__desc {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.v2-pillars3__grid.is-accordion .v2-pil.is-open .v2-pil__rule,
.v2-pillars3__grid.is-accordion .v2-pil.is-open .v2-pil__desc {
	opacity: 1;
	transform: none;
}

.v2-pillars3__grid.is-accordion .v2-pil.is-open {
	transform: translateY(-4px);
	box-shadow: 0 30px 66px rgba(6, 49, 74, 0.2);
}

.v2-pillars3__grid.is-accordion .v2-pil.is-open .v2-pil__mark {
	transform: rotate(180deg);
}

.v2-pillars3__grid.is-accordion .v2-pil:not(.is-open) {
	box-shadow: 0 16px 40px rgba(6, 49, 74, 0.08);
}

/* Barra de progreso del pilar activo. */
.v2-pil__progress {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 3;
	width: 100%;
	height: 4px;
	background: var(--pil-accent);
	transform: scaleX(0);
	transform-origin: left center;
}

@media (prefers-reduced-motion: reduce) {
	.v2-pillars3__grid.is-accordion .v2-pil__rule,
	.v2-pillars3__grid.is-accordion .v2-pil__desc {
		opacity: 1;
		transform: none;
	}

	.v2-pil__progress {
		display: none;
	}
}

/* ---------- FAQ ---------- */

.v2-faq {
	padding: clamp(56px, 6.5vw, 84px) 0;
	background: var(--v2-cream);
}

.v2-faq__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.22fr) minmax(260px, 0.78fr);
	gap: clamp(50px, 9vw, 138px);
	align-items: start;
	width: min(calc(100% - 48px), var(--v2-max));
}

.v2-faq__intro {
	order: 2;
	position: sticky;
	top: 116px;
	max-width: 390px;
}

.v2-faq__list {
	order: 1;
}

.v2-faq__title {
	margin: 0 0 20px;
	font-size: clamp(42px, 5vw, 72px);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -0.025em;
	color: #121210;
}

.v2-faq__title span {
	color: var(--v2-orange);
}

.v2-faq__sub {
	margin: 0;
	max-width: 340px;
	font-size: 17px;
	line-height: 1.55;
	color: rgba(32, 9, 0, 0.7);
}

.v2-faq__list {
	display: grid;
	gap: 0;
	border-top: 1px solid rgba(32, 9, 0, 0.2);
}

.v2-faq__item {
	border-bottom: 1px solid rgba(32, 9, 0, 0.2);
}

.v2-faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 0;
	font-size: clamp(14.5px, 1.25vw, 16px);
	font-weight: 700;
	letter-spacing: 0;
	color: var(--v2-black);
	cursor: pointer;
	list-style: none;
	transition: color 180ms ease;
}

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

.v2-faq__item summary:hover {
	color: var(--v2-orange-dark);
}

.v2-faq__icon {
	position: relative;
	flex: 0 0 auto;
	width: 23px;
	height: 23px;
	background: transparent;
	border: 1.5px solid var(--v2-black);
	border-radius: 50%;
	transition: transform 240ms ease, background 240ms ease, border-color 240ms ease;
}

.v2-faq__icon::before,
.v2-faq__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 9px;
	height: 1.5px;
	background: var(--v2-black);
	transform: translate(-50%, -50%);
	transition: background 240ms ease;
}

.v2-faq__icon::after {
	transform: translate(-50%, -50%) rotate(90deg);
	transition: transform 240ms ease;
}

.v2-faq__item[open] .v2-faq__icon {
	background: var(--v2-orange);
	border-color: var(--v2-orange);
	transform: rotate(45deg);
}

.v2-faq__item[open] .v2-faq__icon::before,
.v2-faq__item[open] .v2-faq__icon::after {
	background: var(--v2-white);
}

.v2-faq__answer {
	padding: 0 48px 15px 0;
}

.v2-faq__answer p {
	margin: 0;
	max-width: 700px;
	font-size: 14px;
	line-height: 1.58;
	color: rgba(32, 9, 0, 0.72);
}

.v2-faq__answer .v2-faq__points {
	margin: 0;
	padding: 0;
	max-width: 700px;
	list-style: none;
}

.v2-faq__answer .v2-faq__points li {
	position: relative;
	margin: 0 0 8px;
	padding-left: 18px;
	font-size: 14px;
	line-height: 1.58;
	color: rgba(32, 9, 0, 0.72);
}

.v2-faq__answer .v2-faq__points li:last-child { margin-bottom: 0; }

.v2-faq__answer .v2-faq__points li::before {
	content: "";
	position: absolute;
	top: 9px;
	left: 3px;
	width: 6px;
	height: 6px;
	background: var(--v2-orange);
	border-radius: 2px;
}

.v2-faq__answer .v2-faq__points strong {
	color: var(--v2-black);
	font-weight: 750;
}

/* ---------- Contacto ---------- */

.v2-contact {
	position: relative;
	padding: 108px 0;
	background: var(--v2-cream);
	overflow: hidden;
}

.v2-contact__grid {
	position: relative;
	z-index: 1;
	max-width: 760px;
	margin-inline: auto;
}

.v2-contact__pattern {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.v2-contact__pattern span {
	position: absolute;
	inset: 0;
	background: var(--v2-orange);
	-webkit-mask: url("../../../../uploads/cropped-eqweqweqwewq.png") center / 92px repeat;
	mask: url("../../../../uploads/cropped-eqweqweqwewq.png") center / 92px repeat;
	opacity: 0.045;
}

.v2-contact__copy {
	max-width: 680px;
	margin: 0 auto 30px;
	text-align: center;
}

.v2-contact__title {
	margin: 0 0 12px;
	font-size: clamp(34px, 4.2vw, 54px);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.025em;
}

.v2-contact__title span {
	color: var(--v2-orange);
}

.v2-contact__text {
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
	color: rgba(32, 9, 0, 0.72);
}

.v2-form {
	padding: 26px;
	background: rgba(255, 249, 237, 0.92);
	border: 1px solid rgba(32, 9, 0, 0.14);
	border-radius: 8px;
	box-shadow: 0 22px 52px rgba(32, 9, 0, 0.1);
}

.v2-contact .v2-form.v2-reveal {
	transform: translateY(42px);
	transition-duration: 720ms;
}

.v2-contact .v2-form.v2-reveal.is-visible {
	transform: translateY(0);
}

.v2-form__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-bottom: 14px;
}

.v2-form__full {
	grid-column: 1 / -1;
}

.v2-form input,
.v2-form select,
.v2-form textarea {
	width: 100%;
	padding: 15px 16px;
	background: var(--v2-white);
	border: 1px solid var(--v2-line);
	border-radius: 8px;
	font-size: 14.5px;
	color: var(--v2-black);
	transition: border-color 160ms ease, box-shadow 160ms ease;
}

.v2-form input:focus,
.v2-form select:focus,
.v2-form textarea:focus {
	outline: none;
	border-color: var(--v2-orange);
	box-shadow: 0 0 0 3px rgba(254, 95, 0, 0.18);
}

.v2-form textarea {
	min-height: 112px;
	resize: vertical;
}

.v2-form__submit {
	width: 100%;
	justify-content: center;
}

/* ---------- Footer ---------- */

.v2-footer {
	padding: clamp(64px, 8vw, 100px) 0 24px;
	background: #200900;
	color: var(--v2-cream);
}

.v2-footer__top {
	display: grid;
	grid-template-columns: minmax(260px, 1.7fr) repeat(3, minmax(130px, 0.7fr));
	gap: clamp(32px, 5vw, 72px);
	padding-bottom: 48px;
}

.v2-footer__brand img {
	width: clamp(140px, 15vw, 190px);
	height: auto;
	filter: brightness(0) invert(1);
}

.v2-footer__brand p {
	max-width: 310px;
	margin: 22px 0 0;
	color: rgba(255, 249, 237, 0.72);
	font-size: 15px;
}

.v2-footer__nav,
.v2-footer__contact,
.v2-footer__networks {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 9px;
}

.v2-footer__top strong {
	margin-bottom: 7px;
	color: #FFF9ED;
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.v2-footer__nav a,
.v2-footer__contact a {
	color: rgba(255, 249, 237, 0.8);
	font-size: 14px;
	transition: color 180ms ease, transform 180ms ease;
}

.v2-footer__nav a:hover,
.v2-footer__contact a:hover {
	color: #FFF9ED;
	transform: translateX(3px);
}

.v2-footer__partner {
	display: block;
	width: fit-content;
	margin: 0 0 24px;
}

/* Placa blanca redondeada, igual que el sello de la sección Medios
   (.v2-wall__partner-logo): el PNG es transparente y sobre el footer oscuro
   se perdía. */
.v2-footer__partner img {
	display: block;
	width: 110px;
	height: auto;
	max-height: none;
	object-fit: contain;
	padding: 12px 16px;
	background: #FFFFFF;
	border-radius: 14px;
	box-shadow: 0 8px 22px rgba(32, 9, 0, 0.1);
}

.v2-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 249, 237, 0.14);
	color: rgba(255, 249, 237, 0.58);
	font-size: 13px;
}

.v2-footer__social {
	display: flex;
	align-items: center;
	gap: 10px;
}

.v2-footer__social a {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border: 1px solid rgba(255, 249, 237, 0.45);
	border-radius: 50%;
	color: #FFF9ED;
	transition: color 160ms ease, transform 160ms ease, background 160ms ease;
}

.v2-footer__social a:hover {
	background: #FFF9ED;
	color: #121210;
	transform: translateY(-2px);
}

.v2-footer__social svg {
	display: block;
	width: 21px;
	height: 21px;
}

@media (max-width: 900px) {
	.v2-footer__top { grid-template-columns: 1.5fr 1fr 1fr; }
	.v2-footer__networks { grid-column: 2 / -1; }
}

@media (max-width: 620px) {
	.v2-footer__top { grid-template-columns: 1fr 1fr; }
	.v2-footer__brand { grid-column: 1 / -1; }
	.v2-footer__networks { grid-column: 1 / -1; }
	.v2-footer__bottom { align-items: flex-start; flex-direction: column; }
}

/* ---------- Animaciones de aparición ---------- */

.v2-reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 600ms ease, transform 600ms ease;
}

.v2-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
	.v2-wall__grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.v2-process__track {
		grid-template-columns: repeat(2, 1fr);
		gap: 34px 26px;
	}

	.v2-process__line {
		display: none;
	}

	.v2-system__grid,
	.v2-faq__grid,
	.v2-contact__grid {
		grid-template-columns: 1fr;
	}

	.v2-faq__intro {
		order: 1;
		position: static;
		max-width: 600px;
	}

	.v2-faq__list {
		order: 2;
	}

	.v2-pillars3__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 720px) {
	html {
		scroll-padding-top: 80px;
	}

	.v2-container {
		width: calc(100% - 40px);
	}

	.v2-header__inner {
		width: calc(100% - 40px);
	}

	.v2-pil {
		grid-template-rows: auto auto auto auto;
		min-height: 0;
		padding: 130px 28px 36px;
		border-radius: 24px;
	}

	.v2-pil__mark {
		width: 170px;
		height: 170px;
	}

	/* El menú mobile (overlay, colores, CTA y toggle) lo define el bloque de
	   960px: acá se repetía con el fondo crema del tema viejo y el texto,
	   también crema, quedaba invisible. */

	.v2-header__nav ul a {
		font-size: 22px;
	}

	/* Hero más alto: ocupa casi toda la pantalla con el contenido centrado. */
	.v2-hero {
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-height: 88vh;
		min-height: 88svh;
		padding-top: 112px;
		padding-bottom: 28px;
	}

	/* Título grande: las líneas pueden partirse para ganar tamaño. */
	.v2-hero__title {
		margin-bottom: 30px;
		font-size: clamp(34px, 10.8vw, 50px);
		line-height: 1.08;
	}

	.v2-line {
		white-space: normal;
	}

	/* "los anuncios" no se separa: la palabra rotativa queda sola arriba
	   y "los anuncios" baja completo a la segunda línea. */
	.v2-nowrap {
		white-space: nowrap;
	}

	.v2-hero__actions {
		gap: 18px;
		margin-bottom: 44px;
	}

	/* En mobile el carrusel queda inclinado y corriendo solo, como en desktop. */
	.v2-reel-marquee {
		margin: 16px -4vw 0;
		padding: 18px 0 26px;
	}

	[data-v2-marquee].is-active .v2-reel-track {
		animation-duration: 38s;
	}

	.v2-reel-set {
		gap: 12px;
		padding-right: 12px;
	}

	.v2-reel-card {
		width: clamp(96px, 30vw, 132px);
		border-radius: 16px;
	}

	.v2-system,
	.v2-wall,
	.v2-process,
	.v2-cases,
	.v2-quotes,
	.v2-pillars3,
	.v2-faq,
	.v2-contact {
		padding: 64px 0;
	}

	.v2-wall__grid {
		grid-template-columns: 1fr 1fr;
		gap: 14px;
	}

	.v2-process__track {
		grid-template-columns: 1fr;
		padding: 34px 24px 48px;
	}

	.v2-case {
		grid-template-columns: 110px 1fr;
	}

	.v2-case__thumb {
		width: 110px;
	}

	.v2-case__arrow {
		display: none;
	}

	.v2-cases-stack {
		padding: 72px 0 100px;
	}

	.v2-cases-stack > .v2-container {
		display: block;
	}

	.v2-cases-stack__head {
		position: static;
		max-width: none;
		margin-bottom: 42px;
	}

	/* Mismo cuerpo que el título de testimonios: con el clamp de la sección
	   (mínimo 28px) quedaba bastante más chico que el resto de los títulos. */
	.v2-cases-stack__head .v2-section-title {
		font-size: clamp(38px, 5.5vw, 72px);
	}

	.v2-cases-stack__head .v2-kicker {
		margin-bottom: 12px;
	}

	.v2-cases-stack__card {
		grid-template-columns: 1fr;
		min-height: 0;
		border-radius: 22px;
	}

	.v2-cases-stack__card--1 { top: 76px; }
	.v2-cases-stack__card--2 { top: 88px; }
	.v2-cases-stack__card--3 { top: 100px; }

	.v2-cases-stack__media {
		height: 44vh;
		min-height: 300px;
	}

	.v2-cases-stack__media video {
		min-height: 100%;
	}

	.v2-cases-stack__body {
		padding: 32px 26px 38px;
	}

	.v2-cases-stack__logo-wrap {
		margin-bottom: 24px;
	}

	.v2-form {
		padding: 24px 20px;
	}

	.v2-form__grid {
		grid-template-columns: 1fr;
	}

	.v2-faq__answer {
		padding-right: 0;
	}
}

/* Casos de éxito en celular: el video de 44vh + el cuerpo dejaban cards más
   altas que la pantalla, y el apilado sticky perdía sentido. Se recorta el
   video a una proporción fija y se compacta todo para que cada card entre
   completa en el viewport. Va después del bloque de 720px para poder pisarlo. */
@media (max-width: 640px) {
	.v2-cases-stack { padding: 56px 0 80px; }
	.v2-cases-stack__head { margin-bottom: 30px; }
	.v2-cases-stack__card { margin-bottom: 20px; border-radius: 18px; }
	.v2-cases-stack__card--1 { top: 70px; }
	.v2-cases-stack__card--2 { top: 78px; }
	.v2-cases-stack__card--3 { top: 86px; }

	/* Los tres videos son verticales (9:16). Con 16/10 se veía apenas un tercio
	   del encuadre y quedaba raro; 1/1 muestra bastante más de la pieza sin que
	   la card supere el alto de pantalla. El punto de interés de los reels está
	   algo por encima del centro, así que el crop se corre hacia arriba. */
	.v2-cases-stack__media {
		height: auto;
		min-height: 0;
		aspect-ratio: 1 / 1;
	}

	.v2-cases-stack__media video {
		object-position: center 42%;
	}

	.v2-cases-stack__body { padding: 20px 18px 22px; }
	.v2-cases-stack__logo-wrap { margin-bottom: 14px; gap: 9px; }
	.v2-cases-stack__brand-logo { max-width: 140px; }
	.v2-cases-stack__platform-logo { width: 22px; height: 22px; }
	.v2-cases-stack__platform-logo[src*="meta-logo"] { width: 33px; height: 20px; }
	.v2-cases-stack__logo-plus { font-size: 16px; }

	.v2-cases-stack__title { margin-bottom: 15px; font-size: 20px; line-height: 1.08; }
	.v2-cases-stack__metric { min-height: 66px; padding: 10px 12px; }
	.v2-cases-stack__metric strong { margin-bottom: 2px; font-size: 18px; }
	.v2-cases-stack__metric span { font-size: 9px; letter-spacing: 0.04em; }
	.v2-cases-stack__more { margin-top: 14px; padding: 10px 16px; font-size: 10.5px; }
}

/* ---------- Accesibilidad / movimiento reducido ---------- */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.v2-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	[data-v2-marquee].is-active .v2-reel-track,
	.v2-logo-strip__track {
		animation: none;
	}
}

/* ---------- Contacto V2: tarjeta centrada + cards de contacto ---------- */
.v2-contact2 { position: relative; padding: clamp(78px, 9vw, 128px) 0; background: #FE5F00; overflow: hidden; }
.v2-contact2::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: -160px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='%23FFFFFF' fill-opacity='0.09'%3E%3Cpath transform='translate(16 14) scale(1.7)' d='M4 3 Q8 10 4 17 L18 10 Z'/%3E%3Cpath transform='translate(94 86) scale(1.7) rotate(-8 11 10)' d='M4 3 Q8 10 4 17 L18 10 Z'/%3E%3C/g%3E%3C/svg%3E"); background-size: 160px 160px; animation: v2-arrow-drift 28s linear infinite; pointer-events: none; }
.v2-contact2 > .v2-container { position: relative; z-index: 1; }
.v2-contact2__layout { display: grid; grid-template-columns: minmax(280px, 0.82fr) minmax(480px, 1.18fr); align-items: start; gap: clamp(48px, 8vw, 120px); }
@keyframes v2-arrow-drift { to { transform: translateX(160px); } }
@media (prefers-reduced-motion: reduce) { .v2-contact2::before { animation: none; } }
.v2-contact2__title { color: var(--v2-cream); }
.v2-contact2__head { position: static; max-width: 460px; margin: 0; text-align: left; }
.v2-contact2__title { margin: 0 0 24px; font-size: clamp(38px, 4vw, 56px); font-weight: 700; line-height: 1.02; letter-spacing: -0.035em; text-transform: uppercase; }
.v2-contact2__intro { max-width: 440px; margin: 0; color: rgba(255, 249, 237, 0.84); font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6; }
.v2-contact2__cup { --cup-rotation: 6deg; position: absolute; bottom: -170px; left: max(10px, calc((100% - var(--v2-max)) / 2 + 18px)); z-index: 2; display: block; width: clamp(380px, 40vw, 520px); height: auto; margin: 0; opacity: 0; filter: drop-shadow(0 24px 36px rgba(32, 9, 0, 0.22)); transform: rotate(var(--cup-rotation)) translateY(85%); pointer-events: none; }
.v2-contact2__cup.is-visible { animation: v2-contact-cup-rise 1.15s cubic-bezier(0.22, 1, 0.36, 1) 0.25s forwards; }
@keyframes v2-contact-cup-rise { to { opacity: 1; transform: rotate(var(--cup-rotation)) translateY(0); } }
@media (prefers-reduced-motion: reduce) { .v2-contact2__cup { opacity: 1; transform: rotate(var(--cup-rotation)); } .v2-contact2__cup.is-visible { animation: none; } }
.v2-form2 { position: relative; width: 100%; max-width: none; margin: 0; }
.v2-form2__cup { position: absolute; top: -104px; right: -66px; width: clamp(120px, 14vw, 175px); height: auto; transform: rotate(9deg); filter: drop-shadow(0 16px 24px rgba(32, 9, 0, 0.18)); pointer-events: none; animation: v2-cup-float 5.5s ease-in-out infinite; }
@keyframes v2-cup-float { 0%, 100% { transform: rotate(9deg) translateY(0); } 50% { transform: rotate(5deg) translateY(-14px); } }
@media (prefers-reduced-motion: reduce) { .v2-form2__cup { animation: none; } }
@media (max-width: 1040px) { .v2-form2__cup { right: 8px; } }
@media (max-width: 620px) { .v2-form2__cup { display: none; } }
.v2-form2__row { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; }
.v2-form2__field { display: block; margin-bottom: 17px; }
.v2-form2__conditional[hidden] { display: none; }
.v2-form2__field > span:first-child { display: block; margin: 0 0 7px; color: var(--v2-cream); font-size: 12px; font-weight: 700; letter-spacing: 0.03em; }
.v2-form2__field input, .v2-form2__field textarea, .v2-form2__field select { width: 100%; padding: 14px 16px; background: var(--v2-cream); border: 1px solid transparent; border-radius: 8px; font: inherit; font-size: 15px; color: var(--v2-black); transition: border-color 180ms ease, box-shadow 180ms ease; }
.v2-form2__field input::placeholder, .v2-form2__field textarea::placeholder { color: rgba(32, 9, 0, 0.38); }
.v2-form2__field input:focus, .v2-form2__field textarea:focus, .v2-form2__field select:focus { border-color: var(--v2-black); outline: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35); }
.v2-form2__field textarea { resize: vertical; min-height: 120px; }
.v2-form2__field select:invalid { color: rgba(32, 9, 0, 0.38); }
/* Etiqueta compartida por los grupos del formulario (checks, rango). */
.v2-form2__checks legend, .v2-form2__budget legend { margin: 0 0 9px; padding: 0; color: var(--v2-cream); font-size: 12px; font-weight: 700; letter-spacing: 0.03em; }

/* Medios: chips seleccionables en grilla 2×2, así el ancho no depende del
   estado y nada se reacomoda al marcar. El checkbox nativo va oculto. */
.v2-form2__checks { margin: 0 0 17px; padding: 0; border: 0; }
.v2-form2__options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.v2-form2__chip { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px 18px; background: var(--v2-cream); border-radius: 999px; font-size: 15px; font-weight: 600; line-height: 1; color: var(--v2-black); cursor: pointer; user-select: none; box-shadow: inset 0 0 0 2px transparent; transition: background-color 200ms ease, transform 200ms ease, box-shadow 200ms ease; }
.v2-form2__chip input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
.v2-form2__chip-icon { flex: 0 0 auto; width: 19px; height: 19px; opacity: 0.55; transition: opacity 200ms ease; }
.v2-form2__chip-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-form2__chip-tick { flex: 0 0 auto; width: 16px; height: 16px; margin-left: auto; opacity: 0; transform: scale(0.55); transition: opacity 160ms ease, transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.v2-form2__chip:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 2px transparent, 0 6px 14px rgba(32, 9, 0, 0.16); }
.v2-form2__chip:has(input:checked) { background: var(--v2-neon); box-shadow: inset 0 0 0 2px var(--v2-black); }
.v2-form2__chip:has(input:checked):hover { box-shadow: inset 0 0 0 2px var(--v2-black), 0 6px 14px rgba(32, 9, 0, 0.16); }
.v2-form2__chip:has(input:checked) .v2-form2__chip-icon { opacity: 1; }
.v2-form2__chip:has(input:checked) .v2-form2__chip-tick { opacity: 1; transform: scale(1); }
.v2-form2__chip:has(input:focus-visible) { outline: 3px solid rgba(255, 249, 237, 0.75); outline-offset: 2px; }
@media (max-width: 620px) { .v2-form2__options { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .v2-form2__chip, .v2-form2__chip-tick { transition: none; } }

/* Rango de inversión: aparece recién al elegir un medio (v2.js saca el
   [hidden] y suma .is-open en el frame siguiente para que anime). */
.v2-form2__budget { margin: 0 0 17px; padding: 0; border: 0; }
.v2-form2__budget[hidden] { display: none; }
.v2-form2__budget:not(.is-open) { opacity: 0; transform: translateY(-6px); }
.v2-form2__budget.is-open { opacity: 1; transform: none; transition: opacity 320ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1); }
@media (prefers-reduced-motion: reduce) { .v2-form2__budget:not(.is-open) { opacity: 1; transform: none; } .v2-form2__budget.is-open { transition: none; } }
.v2-form2__segments { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.v2-form2__segment { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 13px 16px; background: var(--v2-cream); border-radius: 10px; color: var(--v2-black); cursor: pointer; box-shadow: inset 0 0 0 2px transparent; transition: background-color 200ms ease, transform 200ms ease, box-shadow 200ms ease; }
.v2-form2__segment input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
.v2-form2__segment-main { font-size: 15px; font-weight: 700; line-height: 1.1; }
.v2-form2__segment-sub { font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; color: rgba(32, 9, 0, 0.5); transition: color 200ms ease; }
.v2-form2__segment:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 2px transparent, 0 6px 14px rgba(32, 9, 0, 0.16); }
.v2-form2__segment:has(input:checked) { background: var(--v2-neon); box-shadow: inset 0 0 0 2px var(--v2-black); }
.v2-form2__segment:has(input:checked):hover { box-shadow: inset 0 0 0 2px var(--v2-black), 0 6px 14px rgba(32, 9, 0, 0.16); }
.v2-form2__segment:has(input:checked) .v2-form2__segment-sub { color: rgba(32, 9, 0, 0.72); }
.v2-form2__segment:has(input:focus-visible) { outline: 3px solid rgba(255, 249, 237, 0.75); outline-offset: 2px; }
@media (max-width: 620px) { .v2-form2__segments { grid-template-columns: 1fr; } .v2-form2__segment { flex-direction: row; align-items: baseline; gap: 8px; } }
@media (prefers-reduced-motion: reduce) { .v2-form2__segment { transition: none; } }

.v2-form2__phone { display: grid !important; grid-template-columns: 92px 1fr; gap: 8px; margin: 0 !important; }
.v2-form2__phone select { padding-inline: 12px; }
.v2-form2__actions { display: flex; justify-content: flex-start; margin-top: 8px; }

/* Honeypot: fuera de pantalla, no con display:none (algunos bots lo detectan). */
.v2-form2__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Respuesta del envío (la escribe v2.js). */
.v2-form2__status { margin: 14px 0 0; padding: 12px 16px; border-radius: 10px; background: var(--v2-cream); font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--v2-black); }
.v2-form2__status.is-error { background: #FFE6DE; color: var(--v2-red); }
.v2-form2__actions .v2-btn--primary { padding: 18px 32px; gap: 0; background: var(--v2-cream); font-size: 22px; color: var(--v2-orange); }
.v2-form2__actions .v2-btn--primary .v2-btn__mark { width: 54px; height: 54px; color: var(--v2-orange); }
.v2-form2__actions .v2-btn--primary:hover { background: var(--v2-cream); color: var(--v2-orange); box-shadow: 0 12px 28px rgba(32, 9, 0, 0.22); }
.v2-form2__actions .v2-btn--primary:hover .v2-btn__mark { color: var(--v2-orange); }
.v2-contact2__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: clamp(40px, 5vw, 68px); }
.v2-ccard { display: flex; align-items: center; gap: 18px; padding: 22px 26px; border-radius: 14px; text-decoration: none; transition: transform 260ms ease, box-shadow 260ms ease; }
.v2-ccard:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(32, 9, 0, 0.18); }
.v2-ccard__icon { flex: 0 0 auto; display: grid; place-items: center; }
.v2-ccard__icon svg { width: 28px; height: 28px; }
.v2-ccard__body { min-width: 0; }
.v2-ccard__body strong { display: block; margin-bottom: 3px; font-size: 18px; font-weight: 700; }
.v2-ccard__body span { display: block; font-size: 14px; opacity: 0.92; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-ccard--orange { background: #06314A; color: var(--v2-white); }
.v2-ccard--pink { background: #BB3A13; color: var(--v2-white); }
.v2-ccard--green { background: var(--v2-neon); color: var(--v2-black); }
@media (max-width: 900px) {
	.v2-contact2__layout { grid-template-columns: 1fr; gap: 44px; }
	.v2-contact2__head { position: static; max-width: 680px; }
	.v2-contact2__cup { --cup-rotation: -6deg; right: -24px; bottom: -72px; left: auto; width: 245px; }
	.v2-contact2__cards { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
	.v2-form2__row { grid-template-columns: 1fr; column-gap: 0; }
}

/* ---------- Separadores animados entre secciones (estilo text-marquee) ---------- */
.v2-divider { position: relative; z-index: 5; width: 106%; margin: max(-2vw, -34px) 0 max(-2vw, -34px) -3%; padding: clamp(8px, 1.1vw, 13px) 0; overflow: hidden; border-top: 1px solid var(--v2-black); border-bottom: 1px solid var(--v2-black); }
.v2-divider--orange { background: var(--v2-orange); color: var(--v2-cream); transform: rotate(-1.4deg); }
.v2-divider--dark { background: var(--v2-neon); color: var(--v2-black); transform: rotate(1.2deg); }
.v2-divider__track { display: flex; width: max-content; animation: v2-divider-scroll 30s linear infinite; will-change: transform; }
.v2-divider:hover .v2-divider__track { animation-play-state: paused; }
.v2-divider--dark .v2-divider__track { animation-direction: reverse; }
.v2-divider__group { display: flex; align-items: center; font-size: clamp(18px, 2.2vw, 30px); font-weight: 700; line-height: 1; text-transform: uppercase; white-space: nowrap; }
.v2-divider__group span { padding: 0 clamp(13px, 1.6vw, 22px); }
.v2-divider__arrow { flex: 0 0 auto; width: clamp(14px, 1.6vw, 22px); height: clamp(14px, 1.6vw, 22px); }
.v2-divider--orange .v2-divider__arrow { color: var(--v2-neon); }
.v2-divider--dark .v2-divider__arrow { color: var(--v2-orange); }
@keyframes v2-divider-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .v2-divider__track { animation: none; } }

/* ==========================================================================
   FONDOS OFF — patterns y cuadrícula ocultos a pedido (2026-07).
   Para volver a sumar alguno, borrar su línea de este bloque.
   ========================================================================== */

/* Hero: trama de isotipos naranjas. */
.v2-hero__pattern { display: none !important; }

/* Método: cuadrícula naranja de fondo. */
.v2-method { background-image: none !important; }

/* Pilares (steps): garabatos SVG de fondo. */
.v2-steps { background-image: none !important; }

/* Testimonios: trama de isotipos crema. */
.v2-quotes::before { display: none !important; }

/* Recursos (pillars3): trama de isotipos crema. */
.v2-pillars3::before { display: none !important; }

/* Contacto: flechas animadas de fondo. */
.v2-contact2::before { display: none !important; }

/* Contacto V1 (por si se reusa): trama de isotipos. */
.v2-contact__pattern { display: none !important; }

/* ==========================================================================
   Isotipo PNG (qeqwewqazul.png) en los botones, en lugar del SVG #boskaMark.
   Se usa como máscara sobre currentColor para conservar el color de cada
   botón (blanco en naranjas, naranja en el form) y el giro al hover.
   ========================================================================== */

.v2-btn__mark svg,
.v2-wall__filter-mark svg {
	display: none !important;
}

.v2-btn__mark::before,
.v2-wall__filter-mark::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: currentColor;
	-webkit-mask: url("../../../../uploads/qeqwewqazul.png") center / contain no-repeat;
	mask: url("../../../../uploads/qeqwewqazul.png") center / contain no-repeat;
}

/* ==========================================================================
   MÉTODO (.v2-mflow): un solo SVG con los círculos punteados pegados, la curva
   serpenteante con flechas y los números 01-04 en las uniones; los íconos van
   superpuestos en HTML (mask + currentColor).
   ========================================================================== */

.v2-mflow {
	margin-top: 0;
}

.v2-mflow__band {
	position: relative;
	max-width: 960px;
	margin: 0 auto clamp(-8px, -0.5vw, -4px);
}

.v2-mflow__band svg {
	display: block;
	width: 100%;
	height: auto;
}

/* Ícono superpuesto al centro de cada círculo del SVG. El left de cada uno va
   inline en la plantilla y sale del cx del círculo sobre el ancho del viewBox
   (125/880, 335/880, 545/880, 755/880); el top: 50% cae justo porque el
   viewBox "0 -15 880 270" deja los centros (y=120) exactamente al medio. */
.v2-mflow__band .v2-mflow__icon {
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
}

.v2-mflow__icon {
	width: 9%;
	aspect-ratio: 1;
	background: #06314A;
	-webkit-mask: var(--icon) no-repeat center / contain;
	mask: var(--icon) no-repeat center / contain;
}

.v2-mflow__legend {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(14px, 2vw, 28px);
	max-width: 960px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.v2-mflow__item {
	text-align: center;
}

/* Círculo compacto por ítem: solo se ve en mobile, cuando la banda se oculta. */
.v2-mflow__mcircle {
	display: none;
}

/* Banda tipo cinta con puntas en flecha. */
.v2-mflow__label {
	display: inline-block;
	margin: 0 0 10px;
	padding: 9px 26px;
	background: var(--v2-orange);
	color: var(--v2-cream);
	font-size: clamp(14px, 1.3vw, 16px);
	font-weight: 700;
	letter-spacing: 0.01em;
	clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%);
}

.v2-mflow__desc {
	max-width: 230px;
	margin: 0 auto;
	font-size: clamp(13.5px, 1.2vw, 15px);
	line-height: 1.55;
	color: rgba(6, 49, 74, 0.78);
}

/* Recorrido de la línea de tiempo mobile: el punto baja el tramo durante el
   primer 30% del ciclo (≈2.2s) y el resto del tiempo queda estacionado fuera
   de vista, para que se lea un solo punto avanzando de paso en paso. */
@keyframes v2-mflow-run {
	0% { background-position: 0 0%, 5px 0; }
	30% { background-position: 0 100%, 5px 0; }
	30.01%, 100% { background-position: 0 -20px, 5px 0; }
}

@keyframes v2-mflow-ring-spin {
	to { transform: rotate(360deg); }
}

/* Destello del círculo cuando el punto llega: el punteado se tiñe de naranja
   y suelta un halo que se expande. */
@keyframes v2-mflow-ring-hit {
	0% { border-color: var(--v2-orange); box-shadow: 0 0 0 0 rgba(254, 95, 0, 0.3); }
	16% { border-color: var(--v2-orange); box-shadow: 0 0 0 9px rgba(254, 95, 0, 0); }
	32%, 100% { border-color: rgba(6, 49, 74, 0.4); box-shadow: 0 0 0 0 rgba(254, 95, 0, 0); }
}

/* En mobile la banda horizontal no se lee: se oculta y los cuatro pasos pasan
   a ser una línea de tiempo vertical, con el círculo a la izquierda, el texto
   a la derecha y un hilo punteado uniendo cada paso con el siguiente. */
@media (max-width: 680px) {
	.v2-mflow__band {
		display: none;
	}

	/* Medida acotada y centrada: el riel de círculos deja de apoyarse contra el
	   borde del contenedor y el bloque queda centrado bajo el título (que va
	   centrado), sin salirse de la grilla de contenido. */
	/* Mismo cuerpo que los títulos .v2-section-title ("Medios en los que
	   publicitamos"), que en mobile quedan en 38px. */
	.v2-method__title {
		font-size: clamp(38px, 5.6vw, 72px);
	}

	/* Con la banda oculta, la lista queda pegada al título: le damos aire. */
	.v2-mflow {
		margin-top: 32px;
	}

	/* El bloque va centrado y corrido unos píxeles a la derecha: el riel de
	   círculos pesa más que el texto y sin ese desplazamiento el conjunto se
	   lee volcado a la izquierda respecto del título. */
	.v2-mflow__legend {
		position: relative;
		left: 14px;
		grid-template-columns: 1fr;
		row-gap: 0;
		max-width: 302px;
		margin-inline: auto;
	}

	/* Círculo a la izquierda, texto a la derecha. El gap va solo entre columnas:
	   en shorthand también separaba la cinta de la bajada y las despegaba. */
	.v2-mflow__item {
		position: relative;
		display: grid;
		grid-template-columns: 68px minmax(0, 1fr);
		align-items: start;
		column-gap: 15px;
		row-gap: 0;
		padding-bottom: 30px;
		text-align: left;
	}

	.v2-mflow__item:last-child {
		padding-bottom: 0;
	}

	/* Hilo punteado entre un paso y el siguiente, con el punto naranja que lo
	   recorre: el mismo recorrido del diagrama de desktop, en vertical y
	   encadenado con delays sobre un ciclo único de 7.2s.
	   El punto es una capa de background y no un elemento aparte: viaja con
	   background-position en %, que resuelve la altura variable de cada tramo
	   sin calc ni JS, y fuera de su turno se estaciona en -20px, donde el
	   recorte del fondo lo deja invisible. */
	.v2-mflow__item:not(:last-child)::before {
		content: "";
		position: absolute;
		top: 74px;
		bottom: 4px;
		left: 28px;
		width: 12px;
		background-image:
			radial-gradient(circle at 6px 6px, var(--v2-orange) 4.5px, transparent 5px),
			linear-gradient(rgba(6, 49, 74, 0.38) 55%, transparent 0);
		background-repeat: no-repeat, repeat-y;
		background-size: 12px 12px, 2px 9px;
		background-position: 0 -20px, 5px 0;
		animation: v2-mflow-run 7.2s linear infinite;
	}

	.v2-mflow__item:nth-child(2)::before { animation-delay: 2.4s; }
	.v2-mflow__item:nth-child(3)::before { animation-delay: 4.8s; }

	/* Círculo a la izquierda, ocupando las dos filas del texto. */
	.v2-mflow__mcircle {
		position: relative;
		display: grid;
		place-items: center;
		grid-column: 1;
		grid-row: 1 / span 2;
		width: 68px;
		aspect-ratio: 1;
		margin: 0;
		border: 0;
		border-radius: 50%;
	}

	/* El punteado del círculo vive en el ::before para poder girarlo sin
	   arrastrar el ícono, y para que el destello al llegar el punto no pelee
	   con el giro (uno anima transform, el otro color y halo). */
	.v2-mflow__mcircle::before {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		border: 2px dashed rgba(6, 49, 74, 0.4);
		border-radius: 50%;
		animation: v2-mflow-ring-spin 24s linear infinite, v2-mflow-ring-hit 7.2s ease-out infinite;
	}

	/* Cada delay es el instante en que el punto llega a ese círculo. */
	.v2-mflow__item:nth-child(2) .v2-mflow__mcircle::before { animation-delay: 0s, 2.2s; }
	.v2-mflow__item:nth-child(3) .v2-mflow__mcircle::before { animation-delay: 0s, 4.6s; }
	.v2-mflow__item:nth-child(4) .v2-mflow__mcircle::before { animation-delay: 0s, 7s; }

	.v2-mflow__mcircle .v2-mflow__icon {
		width: 48%;
	}

	.v2-mflow__mnum {
		position: absolute;
		top: -7px;
		left: -7px;
		display: grid;
		place-items: center;
		width: 25px;
		aspect-ratio: 1;
		background: var(--v2-orange);
		border-radius: 50%;
		color: var(--v2-cream);
		font-size: 11px;
		font-style: normal;
		font-weight: 700;
	}

	.v2-mflow__label {
		grid-column: 2;
		grid-row: 1;
		justify-self: start;
		margin: 10px 0 8px;
		padding: 7px 20px;
		font-size: 14px;
	}

	/* text-wrap: balance reparte las líneas en vez de dejar una larga y un
	   colgajo de dos palabras abajo. Los navegadores que no lo soportan lo
	   ignoran y cortan como siempre. */
	.v2-mflow__desc {
		grid-column: 2;
		grid-row: 2;
		max-width: none;
		margin: 0;
		text-wrap: balance;
		font-size: 14px;
	}
}

/* Va después del bloque mobile y con la misma especificidad: si no, las reglas
   de arriba (con :not() y más clases) le ganarían y el recorrido seguiría
   animando igual. */
@media (prefers-reduced-motion: reduce) {
	.v2-mflow__item:not(:last-child)::before,
	.v2-mflow__item .v2-mflow__mcircle::before {
		animation: none;
	}
}

/* ---------- Tercera variante de Nuestros pilares: editorial + carrusel ---------- */
.v2-pillarshow {
	padding: clamp(76px, 8vw, 118px) 0;
	background: #F7F1E6;
	border-top: 1px solid rgba(32, 9, 0, 0.1);
	border-bottom: 1px solid rgba(32, 9, 0, 0.1);
}

.v2-pillarshow__layout {
	display: grid;
	grid-template-columns: minmax(330px, 0.82fr) minmax(460px, 1.18fr);
	gap: clamp(48px, 7vw, 108px);
	align-items: center;
}

.v2-pillarshow__eyebrow {
	margin: 0 0 20px;
	color: var(--v2-orange);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.v2-pillarshow__content h2 {
	margin: 0;
	color: #200900;
	font-size: clamp(42px, 4.2vw, 66px);
	font-weight: 700;
	line-height: 0.98;
	letter-spacing: -0.035em;
}

.v2-pillarshow__content h2 span { color: var(--v2-orange); }

.v2-pillarshow__content h2 .v2-pillarshow__titleline {
	display: block;
	white-space: nowrap;
}

.v2-pillarshow__content h2 .v2-pillarshow__titleline--dark { color: #200900; }
.v2-pillarshow__content h2 .v2-pillarshow__titleline b { color: var(--v2-orange); font-weight: inherit; }

.v2-pillarshow__intro {
	max-width: 520px;
	margin: 25px 0 30px;
	color: rgba(32, 9, 0, 0.72);
	font-size: clamp(16px, 1.25vw, 19px);
	line-height: 1.55;
}

.v2-pillarshow__nav {
	display: grid;
	border-top: 1px solid rgba(32, 9, 0, 0.16);
}

.v2-pillarshow__item {
	border-bottom: 1px solid rgba(32, 9, 0, 0.16);
}

.v2-pillarshow__tab {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 16px 0;
	border: 0;
	border-bottom: 0;
	background: transparent;
	color: rgba(32, 9, 0, 0.48);
	font: inherit;
	font-size: clamp(17px, 1.35vw, 21px);
	font-weight: 650;
	text-align: left;
	cursor: pointer;
	transition: color 220ms ease, padding 220ms ease;
}

.v2-pillarshow__tab .v2-divider__arrow {
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
	margin: 0;
	color: currentColor;
	transition: transform 220ms ease;
}

.v2-pillarshow__tab:hover,
.v2-pillarshow__tab.is-active { color: var(--v2-orange); }
.v2-pillarshow__tab.is-active { padding-left: 8px; }
.v2-pillarshow__tab:hover .v2-divider__arrow,
.v2-pillarshow__tab.is-active .v2-divider__arrow { transform: translateX(5px); }

.v2-pillarshow__panel h3 {
	max-width: 520px;
	margin: 0 0 8px;
	color: #200900;
	font-size: clamp(17px, 1.25vw, 20px);
	line-height: 1.35;
}

.v2-pillarshow__panel p {
	max-width: 540px;
	margin: 0;
	color: rgba(32, 9, 0, 0.68);
	font-size: 15px;
	line-height: 1.58;
}

.v2-pillarshow__panel {
	padding: 0 34px 20px 8px;
}

.v2-pillarshow__panel.is-active { animation: v2PillarCopyIn 420ms ease both; }

@keyframes v2PillarCopyIn {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}

.v2-pillarshow__slides {
	position: relative;
	min-height: clamp(560px, 48vw, 680px);
	overflow: hidden;
	border-radius: 26px;
	background: #200900;
	box-shadow: 0 28px 70px rgba(32, 9, 0, 0.18);
}

.v2-pillarshow__slide {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	transform: scale(1.035);
	transition: opacity 700ms ease, transform 1.1s ease;
}

.v2-pillarshow__slide.is-active {
	opacity: 1;
	transform: scale(1);
	z-index: 1;
}

.v2-pillarshow__slide::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 34%;
	background: linear-gradient(to top, rgba(32, 9, 0, 0.42), transparent);
	pointer-events: none;
}

.v2-pillarshow__slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.v2-pillarshow__dots {
	position: absolute;
	right: 24px;
	bottom: 24px;
	z-index: 4;
	display: flex;
	align-items: center;
	gap: 8px;
}

.v2-pillarshow__dots button {
	position: relative;
	width: 9px;
	height: 9px;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 249, 237, 0.55);
	cursor: pointer;
	transition: width 260ms ease, background 260ms ease;
}

.v2-pillarshow__dots button.is-active {
	width: 68px;
	background: rgba(255, 249, 237, 0.35);
}

.v2-pillarshow__dots button.is-active::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: #FFF9ED;
	transform: scaleX(0);
	transform-origin: left;
}

.v2-pillarshow__dots button.is-running::after {
	animation: v2PillarProgress var(--v2-pillar-duration, 5200ms) linear forwards;
}

@keyframes v2PillarProgress { to { transform: scaleX(1); } }

@media (max-width: 980px) {
	.v2-pillarshow__layout {
		grid-template-columns: 1fr;
		gap: 38px;
	}

	.v2-pillarshow__slides { min-height: min(72vw, 610px); }
}

@media (max-width: 600px) {
	.v2-pillarshow { padding: 64px 0; }
	/* Mismo cuerpo que los títulos .v2-section-title ("Medios en los que
	   publicitamos"): el 12vw lo estiraba bastante más que el resto. */
	.v2-pillarshow__content h2 { font-size: clamp(38px, 5.6vw, 52px); }
	.v2-pillarshow__intro { margin: 20px 0 24px; }
	.v2-pillarshow__tab { padding: 14px 0; }
	.v2-pillarshow__panel { padding-right: 8px; padding-bottom: 18px; }
	.v2-pillarshow__slides { min-height: 112vw; border-radius: 18px; }
	.v2-pillarshow__dots { right: 18px; bottom: 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.v2-pillarshow__slide,
	.v2-pillarshow__panel.is-active,
	.v2-pillarshow__dots button.is-running::after { animation: none; transition: none; }
	.v2-pillarshow__dots button.is-active::after { transform: scaleX(1); }
}

/* ---------- Páginas legales (template-legal.php) ---------- */

.v2-legal {
	padding: clamp(120px, 14vw, 180px) 0 clamp(64px, 8vw, 96px);
	background: var(--v2-bg);
	color: var(--v2-black);
}

.v2-legal__head {
	max-width: 760px;
	padding-bottom: clamp(28px, 4vw, 40px);
	border-bottom: 1px solid var(--v2-line);
}

.v2-legal__title {
	margin: 18px 0 10px;
	font-size: clamp(34px, 5.4vw, 58px);
	font-weight: 700;
	line-height: 1.04;
	letter-spacing: -0.02em;
}

.v2-legal__meta {
	margin: 0;
	color: rgba(32, 9, 0, 0.55);
	font-size: 14px;
}

.v2-legal__body {
	max-width: 760px;
	margin-top: clamp(32px, 4vw, 48px);
	font-size: 16.5px;
	line-height: 1.75;
	color: rgba(32, 9, 0, 0.86);
}

.v2-legal__body > *:first-child { margin-top: 0; }

.v2-legal__body h2 {
	margin: clamp(38px, 5vw, 54px) 0 14px;
	font-size: clamp(22px, 2.6vw, 28px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--v2-black);
}

.v2-legal__body h3 {
	margin: 28px 0 10px;
	font-size: 18px;
	font-weight: 700;
	color: var(--v2-black);
}

.v2-legal__body p { margin: 0 0 18px; }

.v2-legal__body ul,
.v2-legal__body ol {
	margin: 0 0 20px;
	padding-left: 22px;
}

.v2-legal__body li { margin-bottom: 9px; }

.v2-legal__body strong { font-weight: 700; color: var(--v2-black); }

.v2-legal__body a {
	color: var(--v2-red);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.v2-legal__body a:hover { color: var(--v2-orange); }

.v2-legal__body hr {
	height: 1px;
	margin: clamp(36px, 5vw, 52px) 0;
	border: 0;
	background: var(--v2-line);
}

.v2-legal__back { margin-top: clamp(40px, 5vw, 56px); }

/* Links legales del pie: van al extremo derecho de la línea de copyright. */
.v2-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
}

.v2-footer__legal a {
	font-size: 12px;
	font-weight: 500;
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 160ms ease;
}

.v2-footer__legal a:hover { color: #FFF9ED; }

@media (max-width: 720px) {
	.v2-legal { padding-top: clamp(104px, 26vw, 132px); }
	.v2-legal__body { font-size: 16px; }
}

/* ---------- Instagram: carrusel con markup propio (inc/instagram.php) ---------- */

/* Mismo aire arriba y abajo: el carrusel respira igual contra el formulario
   que contra el footer. */
.v2-ig {
	padding: clamp(19px, 2.2vw, 27px) 0;
	background: var(--v2-bg);
	overflow: hidden;
}

/* Viewport a sangre: las placas se cortan contra los bordes de la pantalla. */
.v2-ig__viewport {
	position: relative;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%);
}

/* El track trae el set de placas dos veces desde PHP: al correr media vuelta
   entera empalma con la copia y el loop no muestra el corte.
   La separación va como margin y no como gap para que ese 50% sea exacto. */
.v2-ig__track {
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	animation: v2-ig-marquee calc(var(--v2-ig-count, 14) * 3.4s) linear infinite;
	will-change: transform;
}

.v2-ig__viewport:hover .v2-ig__track,
.v2-ig__viewport:focus-within .v2-ig__track {
	animation-play-state: paused;
}

@keyframes v2-ig-marquee {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(-50%, 0, 0); }
}

.v2-ig__link {
	flex: 0 0 auto;
	margin-right: 16px;
	display: block;
}

.v2-ig__item {
	position: relative;
	width: clamp(210px, 22vw, 272px);
	margin: 0;
	aspect-ratio: 4 / 5;
	border-radius: 14px;
	overflow: hidden;
	background: rgba(32, 9, 0, 0.08);
	box-shadow: 0 10px 28px rgba(32, 9, 0, 0.14);
}

.v2-ig__item img,
.v2-ig__item video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.v2-ig__badge {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	background: rgba(32, 9, 0, 0.55);
	color: var(--v2-cream);
	backdrop-filter: blur(4px);
	pointer-events: none;
}

.v2-ig__badge svg { width: 16px; height: 16px; }

/* El texto ya viene recortado desde PHP; el max-height es el respaldo para que
   nunca asome un tercer renglón partido al medio. */
.v2-ig__caption {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 3;
	margin: 0;
	padding: 30px 13px 12px;
	background: linear-gradient(180deg, rgba(32, 9, 0, 0) 0%, rgba(32, 9, 0, 0.72) 45%, rgba(32, 9, 0, 0.93) 100%);
	color: var(--v2-cream);
	font-size: 12.5px;
	line-height: 1.32;
	font-weight: 500;
	text-align: left;
	pointer-events: none;
	max-height: calc((12.5px * 1.32 * 2) + 42px);
	overflow: hidden;
}

.v2-ig__caption span {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

@media (max-width: 720px) {
	.v2-ig__viewport {
		-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
		mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
	}
	.v2-ig__link { margin-right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
	.v2-ig__track { animation: none; }
	.v2-ig__viewport { overflow-x: auto; scrollbar-width: none; }
	.v2-ig__viewport::-webkit-scrollbar { display: none; }
}