/* ==========================================================================
   Brutal Studios — custom.css
   Solo lo que Tailwind no resuelve: @font-face, escala tipográfica con clamp(),
   componentes globales (botones), elementos decorativos brutalistas.
   ========================================================================== */

/* ===== Fuentes locales =================================================== */

@font-face {
	font-family: 'Mickon';
	src: url('../fonts/Mickon-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Mickon';
	src: url('../fonts/Mickon-BoldSlant.woff2') format('woff2');
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Bricolage Grotesque';
	src: url('../fonts/BricolageGrotesque-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Bricolage Grotesque';
	src: url('../fonts/BricolageGrotesque-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Bricolage Grotesque';
	src: url('../fonts/BricolageGrotesque-ExtraBold.woff2') format('woff2');
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}


/* ===== Base ============================================================== */

html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	scroll-behavior: smooth;
}

body {
	font-family: 'Bricolage Grotesque', system-ui, sans-serif;
	color: #1A1A1A;
	background: #FFFFFF;
}


/* ===== Escala tipográfica ================================================
   Fórmula: clamp(MIN_MOBILE, calc(SIZE_PX * 100vw / 1920), MAX_DESKTOP)
   Diseño base 1920 px. Escala lineal con el viewport, respetando proporciones.
   ========================================================================= */

.text-display {
	font-family: 'Mickon', sans-serif;
	font-weight: 700;
	font-size: clamp(48px, calc(160 * 100vw / 1920), 200px);
	line-height: 0.99; /* 158/160 */
	letter-spacing: 0;
}

.text-h1 {
	font-family: 'Mickon', sans-serif;
	font-weight: 700;
	font-size: clamp(44px, calc(160 * 100vw / 1920), 200px);
	line-height: 0.875; /* 140/160 */
	letter-spacing: 0;
}

.text-h2 {
	font-family: 'Mickon', sans-serif;
	font-weight: 700;
	font-size: clamp(36px, calc(100 * 100vw / 1920), 120px);
	line-height: 0.96; /* 96/100 */
	letter-spacing: 0;
}

.text-h3 {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 700;
	font-size: clamp(36px, calc(100 * 100vw / 1920), 120px);
	line-height: 0.8; /* 80/100 */
	letter-spacing: 0.04em; /* +4 del token Body 0 */
}

.text-h4 {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 700;
	font-size: clamp(28px, calc(50 * 100vw / 1920), 60px);
	line-height: 1.2; /* 60/50 */
}

.text-lead {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 800;
	font-size: clamp(24px, calc(45 * 100vw / 1920), 54px);
	line-height: 1; /* 45/45 */
}

.text-body-lg {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 800;
	font-size: clamp(20px, calc(33 * 100vw / 1920), 40px);
	line-height: 1.36; /* 45/33 */
}

.text-body-md {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 800;
	font-size: clamp(20px, calc(30 * 100vw / 1920), 36px);
	line-height: 2; /* 60/30 */
}

.text-body {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 400;
	font-size: clamp(16px, calc(20 * 100vw / 1920), 22px);
	line-height: 1.4;
}

.text-caption {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 400;
	font-size: clamp(14px, calc(20 * 100vw / 1920), 22px);
	line-height: 0.975; /* 19.5/20 */
}


/* ===== Botones — componente global =======================================
   Tres variantes detectadas en Figma:
   - .btn--primary       (azul, texto blanco, círculo blanco + flecha azul)
   - .btn--secondary     (amarillo, texto negro, círculo blanco + flecha negra)
   - .btn--ghost         (blanco, texto negro, círculo azul + flecha blanca)

   El "círculo con flecha" es decoración visual; se renderiza con .btn__icon.
   ========================================================================= */

.btn {
	display: inline-flex;
	align-items: center;
	gap: clamp(12px, calc(20 * 100vw / 1920), 24px);
	padding: clamp(10px, calc(14 * 100vw / 1920), 18px) clamp(20px, calc(28 * 100vw / 1920), 36px);
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 700;
	font-size: clamp(14px, calc(18 * 100vw / 1920), 20px);
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	border-radius: 9999px;
	transition: transform 200ms ease, box-shadow 200ms ease, background-color 200ms ease;
	cursor: pointer;
	border: none;
	will-change: transform;
}

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

.btn__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(28px, calc(42 * 100vw / 1920), 48px);
	height: clamp(28px, calc(42 * 100vw / 1920), 48px);
	border-radius: 9999px;
	flex-shrink: 0;
}
.btn__icon svg { width: 50%; height: 50%; }

/* Primary — azul */
.btn--primary {
	background-color: #5A65E7;
	color: #FFFFFF;
}
.btn--primary .btn__icon { background-color: #FFFFFF; color: #5A65E7; }
.btn--primary:hover { background-color: #4851B9; }

/* Secondary — amarillo */
.btn--secondary {
	background-color: #FFE700;
	color: #1A1A1A;
}
.btn--secondary .btn__icon { background-color: #FFFFFF; color: #1A1A1A; }
.btn--secondary:hover { background-color: #FFEC66; }

/* Ghost — fondo blanco */
.btn--ghost {
	background-color: #FFFFFF;
	color: #1A1A1A;
	box-shadow: inset 0 0 0 2px #1A1A1A;
}
.btn--ghost .btn__icon { background-color: #5A65E7; color: #FFFFFF; }
.btn--ghost:hover { background-color: #F2F2F2; }


/* ===== Sombras brutalistas ===============================================
   Offset-y = 0 intencional (efecto sticker desplazado lateral).
   ========================================================================= */

.shadow-bs-soft   { box-shadow: 2px 0 2px 0 rgba(0,0,0,0.15); }
.shadow-bs-medium { box-shadow: 8px 0 4px 0 rgba(0,0,0,0.15); }
.shadow-bs-strong { box-shadow: 16px 0 8px 0 rgba(0,0,0,0.20); }


/* ===== Elementos decorativos brutalistas ================================= */

.rotate-tilt    { transform: rotate(-3deg); }
.rotate-tilt-r  { transform: rotate(3deg); }
.rotate-tilt-lg { transform: rotate(-6deg); }

/* Foto estilo polaroid */
.polaroid {
	background: #FFFFFF;
	padding: clamp(8px, calc(16 * 100vw / 1920), 20px);
	padding-bottom: clamp(32px, calc(56 * 100vw / 1920), 64px);
	box-shadow: 8px 0 4px 0 rgba(0,0,0,0.15);
}
.polaroid img {
	display: block;
	width: 100%;
	height: auto;
}

/* Sticker / etiqueta pill amarilla */
.sticker {
	display: inline-block;
	padding: clamp(6px, calc(10 * 100vw / 1920), 14px) clamp(14px, calc(24 * 100vw / 1920), 32px);
	background-color: #FFE700;
	color: #1A1A1A;
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	border-radius: 9999px;
	box-shadow: 2px 0 2px 0 rgba(0,0,0,0.15);
}


/* ===== Container =========================================================
   Padding lateral proporcional al diseño 1920 (88 px @ 1920).
   ========================================================================= */

.bs-container {
	width: 100%;
	max-width: 1920px;
	margin-inline: auto;
	padding-inline: clamp(20px, calc(88 * 100vw / 1920), 88px);
}


/* Soporte de viewport dinámico para evitar que en mobile/safari el
   100vh incluya la URL bar y el hero quede más alto que la pantalla
   visible. dvh = viewport real con URL bar dinámica. Caer en vh si el
   navegador no soporta dvh. */
.bs-page-hero {
	min-height: 100vh;
	min-height: 100dvh;
}


/* ===== Header sticky =====================================================
   Desktop (lg+): fondo SIEMPRE transparente — el menú vive en su propia
   pill blanca y no necesita un sticky bar detrás.
   Mobile/tablet (< lg): al hacer scroll aparece fondo blanco semitransparente
   para mejorar legibilidad sobre el contenido.
   ========================================================================= */

.bs-header {
	background: transparent;
}
@media (max-width: 1023px) {
	.bs-header.is-scrolled {
		background: rgba(255, 255, 255, 0.95);
		backdrop-filter: blur(8px);
		box-shadow: 2px 0 2px 0 rgba(0, 0, 0, 0.08);
	}
}


/* ===== Hero — estado inicial para la animación de entrada ================
   Con .js (añadido síncrono en el <head>) ocultamos TODOS los elementos que
   GSAP anima en la entrada, así no hay flash antes de que arranque la timeline.
   - Línea 1 (.bs-hero__line--mask): mask reveal → translateY(110%) + opacity 0.
   - Línea 2 (sin --mask, contiene polaroid + sticker): solo opacity 0. GSAP le
     aplica el y:50 al iniciar; NO le ponemos translateY para no romper el
     layout de la polaroid que escala en scroll.
   Bajo prefers-reduced-motion, main.js fuerza opacity:1 en .bs-hero__line-inner,
   pretitle y bottom, así que se ven sin animación.
   ========================================================================= */

.js .bs-hero__line--mask .bs-hero__line-inner {
	transform: translateY(110%);
	opacity: 0;
}
.js .bs-hero__line:not(.bs-hero__line--mask) .bs-hero__line-inner {
	opacity: 0;
}
.js [data-bs-hero-pretitle],
.js [data-bs-hero-bottom] {
	opacity: 0;
}


/* ===== Marquee infinito ================================================== */

.bs-marquee {
	overflow: hidden;
	width: 100%;
}

.bs-marquee__track {
	display: flex;
	width: max-content;
	will-change: transform;
	gap: clamp(40px, calc(80 * 100vw / 1920), 100px);
}

.bs-marquee__item {
	display: flex;
	align-items: center;
	flex: none;
	gap: clamp(40px, calc(80 * 100vw / 1920), 100px);
}

.bs-marquee__dot {
	display: inline-block;
	width: clamp(20px, calc(40 * 100vw / 1920), 60px);
	height: clamp(20px, calc(40 * 100vw / 1920), 60px);
	border-radius: 9999px;
	flex-shrink: 0;
}

/* Texto outline (solo borde) */
.bs-marquee__text--outline {
	-webkit-text-stroke: 2px currentColor;
	color: transparent !important;
}


/* ===== Reveal genérico (cards en scroll) =================================
   IMPORTANTE: NO ocultamos por CSS. El estado inicial lo pone GSAP con
   gsap.set() solo si el módulo carga. Si GSAP falla, las cards se ven.
   ========================================================================= */


/* ===== Servicios brutales — layout asimétrico ============================
   Desktop: posicionado absoluto con tres slots fijos del diseño.
   Mobile: stack vertical natural.
   ========================================================================= */

.bs-servicios__layout {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 80px;
}

@media (min-width: 768px) {
	.bs-servicios__layout {
		display: block;
		position: relative;
		/* Altura suficiente para Producción + Campañas (a media altura) + IP
		   bien separada debajo. Tiene en cuenta que las cards están rotadas
		   y necesitan margen vertical extra. */
		height: clamp(1300px, calc(1620 * 100vw / 1920), 1820px);
	}

	.bs-servicios__card {
		position: absolute;
	}

	/* Producción de contenido — arriba a la derecha */
	.bs-servicios__card--prod {
		top: 0;
		right: 0;
	}

	/* Campañas con creadores — izquierda, ~media altura de Producción */
	.bs-servicios__card--camp {
		top: clamp(280px, calc(400 * 100vw / 1920), 480px);
		left: 0;
	}

	/* Creación de IP propia — centrada horizontalmente, claramente debajo
	   de las otras dos. Está anclada al bottom del layout. */
	.bs-servicios__card--ip {
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
	}
}


/* ===== Quiénes somos — deck de fichas ====================================
   NO ocultamos las fichas con CSS. El estado inicial lo aplica GSAP con
   gsap.set() dentro de initQuienesScale, solo si el módulo carga.
   Si GSAP fallara, las fichas se ven en su posición natural (degradación
   elegante en vez de cards invisibles para siempre).
   ========================================================================= */


/* ===== Proyectos — carrusel horizontal ===================================
   Desktop: pin + scrub (GSAP) — overflow visible para que el pin no clipee.
   Mobile: scroll horizontal nativo con snap.
   ========================================================================= */

.bs-proyectos__scroll {
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.bs-proyectos__scroll::-webkit-scrollbar {
	display: none;
}

/* Focus state: la card centrada sube y reduce opacidad del overlay */
.bs-card-proyecto.is-focused {
	transform: translateY(-24px);
}
.bs-card-proyecto.is-focused .bs-card-proyecto__overlay {
	opacity: 0;
}


/* ===== Scroll cue (flecha del hero) ====================================== */

.bs-scroll-cue {
	color: inherit;
	transition: opacity 200ms ease;
}
.bs-scroll-cue:hover { opacity: 0.7; }


/* ==========================================================================
   Componentes por sección — todas las clases que antes vivían como style="..."
   inline ahora viven aquí. Lo dinámico (rotaciones por instancia, alturas
   por ficha, colores de marquee) usa CSS custom properties que el PHP rellena.
   ========================================================================== */


/* ===== Hero ============================================================== */

.bs-hero {
	background: linear-gradient(180deg, rgba(90, 101, 231, 0.07) 5.7%, rgba(255, 255, 255, 0.2) 38.1%), #FFFFFF;
	min-height: 100vh;
}

.bs-hero__container {
	padding-top:    clamp(140px, calc(220 * 100vw / 1920), 260px);
	padding-bottom: clamp(60px,  calc(80  * 100vw / 1920), 110px);
}

.bs-hero__pretitle-line {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 400;
	font-size:   clamp(20px, calc(32 * 100vw / 1920), 36px);
	line-height: 1;
}
.bs-hero__pretitle-line--brand {
	font-weight: 600;
}

.bs-hero__headline {
	font-size:   clamp(48px, calc(120 * 100vw / 1920), 140px);
	line-height: 0.85;
}

.bs-hero__polaroid {
	width:        clamp(120px, calc(337 * 100vw / 1920), 360px);
	aspect-ratio: 337 / 190;
}

.bs-hero__creadores {
	padding:   0.1em 0.45em;
	transform: rotate(4deg);
	color:     #5A65E7;
}

.bs-hero__subhead {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 500;
	font-size:   clamp(20px, calc(35 * 100vw / 1920), 40px);
	line-height: 1;
}


/* ===== Quiénes somos ==================================================== */

.bs-quienes {
	min-height: 100vh;
}

.bs-quienes__pill {
	top:  clamp(80px, calc(120 * 100vw / 1920), 140px);
	left: clamp(20px, calc(88  * 100vw / 1920), 88px);
}

.bs-quienes__video-frame {
	width: clamp(280px, calc(520 * 100vw / 1920), 600px);
}


/* ===== Quiénes somos — deck de fichas =================================== */

.bs-quienes-cards {
	z-index: 100;
}

.bs-quienes-cards__card {
	height:       var(--card-height);
	border:       clamp(3px, calc(5 * 100vw / 1920), 6px) solid var(--card-border, #363D8B);
	border-bottom: 0;
	border-radius: clamp(24px, calc(40 * 100vw / 1920), 56px)
	               clamp(24px, calc(40 * 100vw / 1920), 56px) 0 0;
	z-index:      var(--card-z, auto);
}

.bs-quienes-cards__text {
	max-width:   clamp(220px, calc(584 * 100vw / 1920), 620px);
	font-size:   clamp(18px,  calc(60  * 100vw / 1920), 64px);
	line-height: 1.1;
}

.bs-quienes-cards__image {
	width:         clamp(180px, calc(793 * 100vw / 1920), 840px);
	aspect-ratio:  793 / 451;
	border-radius: clamp(20px, calc(40 * 100vw / 1920), 48px);
}

.bs-quienes-cards__num {
	font-size:           clamp(70px, calc(170 * 100vw / 1920), 200px);
	color:               transparent;
	-webkit-text-stroke: clamp(1.5px, calc(2.5 * 100vw / 1920), 3px) var(--card-stroke, #5A65E7);
}


/* ===== Servicios ======================================================== */

.bs-servicios {
	padding-top: clamp(120px, calc(280 * 100vw / 1920), 320px);
}

.bs-servicios__title {
	font-size:   clamp(36px, calc(100 * 100vw / 1920), 120px);
	line-height: 1.01;
}

.bs-card-servicio__rotate {
	transform: rotate(var(--rotate, 0deg));
}

.bs-card-servicio__inner {
	border: 12px solid #5A65E7;
	width:  clamp(280px, calc(752 * 100vw / 1920), 800px);
}

.bs-card-servicio__title {
	font-weight: 800;
	font-size:   clamp(18px, calc(40 * 100vw / 1920), 44px);
	line-height: 1.1;
}


/* ===== Proyectos ======================================================== */

.bs-proyectos {
	min-height: 120vh;
}

.bs-proyectos__burst {
	top:       clamp(60px,  calc(120 * 100vw / 1920), 160px);
	right:     clamp(40px,  calc(80  * 100vw / 1920), 120px);
	width:     clamp(140px, calc(239 * 100vw / 1920), 260px);
	transform: rotate(15deg);
}

.bs-proyectos__title {
	font-size:   clamp(40px, calc(100 * 100vw / 1920), 120px);
	line-height: 0.96;
}

.bs-proyectos__description {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 500;
	font-size:   clamp(16px, calc(20 * 100vw / 1920), 22px);
	line-height: 1.4;
}

.bs-proyectos__pill-label {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 700;
	font-size:   18px;
	line-height: 20px;
}

.bs-proyectos__track {
	width: max-content;
	padding-inline: clamp(20px, calc(88 * 100vw / 1920), 88px);
}

/* card-proyecto: big vs preview vía modifier classes */
.bs-card-proyecto--big {
	width: clamp(220px, calc(358 * 100vw / 1920), 380px);
}
.bs-card-proyecto--big .bs-card-proyecto__media {
	aspect-ratio: 358 / 419;
}
.bs-card-proyecto--preview {
	width: clamp(240px, calc(384 * 100vw / 1920), 410px);
}
.bs-card-proyecto--preview .bs-card-proyecto__media {
	aspect-ratio: 384 / 441;
}

.bs-card-proyecto__meta {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 500;
	font-size:   20px;
	line-height: 19px;
}
.bs-card-proyecto__name {
	font-size:   clamp(22px, calc(30 * 100vw / 1920), 32px);
	line-height: 1;
}


/* ===== Página Proyectos — Archive ======================================= */

/* Barra de filtros — fila de pills centrada. Wrap en mobile. */
.bs-proy-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(8px, calc(16 * 100vw / 1920), 20px);
}

.bs-proy-filter {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: clamp(8px, calc(12 * 100vw / 1920), 14px)
	         clamp(18px, calc(28 * 100vw / 1920), 32px);
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 500;
	font-size:   clamp(14px, calc(18 * 100vw / 1920), 20px);
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #5A65E7;                 /* bs-blue */
	background-color: transparent;
	border: 1px solid #5A65E7;
	border-radius: 9999px;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.bs-proy-filter:hover {
	background-color: rgba(90, 101, 231, 0.08);
}
.bs-proy-filter.is-active {
	background-color: #FFE700;      /* bs-yellow */
	color: #12142E;                 /* bs-blue-800 */
	border-color: #FFE700;
}

/* Grid de cards — 1 col mobile, 2 tablet, 3 desktop. */
.bs-proy-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(32px, calc(60 * 100vw / 1920), 80px) clamp(20px, calc(40 * 100vw / 1920), 60px);
}
@media (min-width: 640px) {
	.bs-proy-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.bs-proy-grid { grid-template-columns: repeat(3, 1fr); }
}


/* Card archive de proyecto — imagen + pills + título + cliente. */
.bs-card-proyecto-archive {
	display: block;
}

.bs-card-proyecto-archive__media {
	aspect-ratio: 540 / 380;
	background-color: #DEE0FA; /* bs-blue-100 — placeholder color */
}

/* Degradado azul desde el bottom hacia el 30% de la imagen, para que los
   pills contrasten contra cualquier foto. */
.bs-card-proyecto-archive__gradient {
	position: absolute;
	inset: auto 0 0 0;
	height: 38%;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		to top,
		rgba(90, 101, 231, 0.95) 0%,
		rgba(90, 101, 231, 0.65) 45%,
		rgba(90, 101, 231, 0)    100%
	);
}

.bs-card-proyecto-archive__pills {
	position: absolute;
	bottom: clamp(12px, calc(22 * 100vw / 1920), 28px);
	left:   clamp(12px, calc(22 * 100vw / 1920), 28px);
	right:  clamp(12px, calc(22 * 100vw / 1920), 28px);
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	gap: clamp(6px, calc(10 * 100vw / 1920), 12px);
	pointer-events: none;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bs-card-proyecto-archive__pill {
	display: inline-flex;
	align-items: center;
	padding: clamp(4px, calc(6 * 100vw / 1920), 8px)
	         clamp(10px, calc(14 * 100vw / 1920), 16px);
	background-color: transparent;
	color: #FFE700; /* bs-yellow */
	border: 1px solid #FFE700;
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 600;
	font-size:   clamp(11px, calc(14 * 100vw / 1920), 16px);
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-radius: 9999px;
	white-space: nowrap;
}

.bs-card-proyecto-archive__title {
	margin-top: clamp(16px, calc(24 * 100vw / 1920), 30px);
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 800;
	font-size:   clamp(18px, calc(26 * 100vw / 1920), 30px);
	line-height: 1.15;
	text-transform: uppercase;
	color: #5A65E7; /* bs-blue — color web oficial */
}

.bs-card-proyecto-archive__client {
	margin-top: clamp(6px, calc(8 * 100vw / 1920), 12px);
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 500;
	font-size:   clamp(13px, calc(16 * 100vw / 1920), 18px);
	line-height: 1.3;
	color: #686868; /* bs-neutral-80 */
}

/* Estado "ocultando" durante filtrado — lo aplica el JS. */
.bs-card-proyecto-archive.is-hiding {
	pointer-events: none;
}


/* ===== Header =========================================================== */

.bs-logo {
	/* Display block (override del a inline default) para que la imagen
	   no genere baseline gap. */
	display: inline-block;
}

/* Logo SVG del header — altura proporcional al pill blanco. Figma usa
   261×63 (aspect 4.14). Mantenemos el alto similar al "BRUTAL" texto
   anterior pero ahora con la subtítulo "STUDIOS" incorporada. */
.bs-logo img {
	height: clamp(36px, calc(50 * 100vw / 1920), 60px);
	width:  auto;
}

/* Logo del overlay mobile — un poco más grande porque tiene más sitio.
   El sizing va en la <img> interior porque .bs-overlay__logo ahora es el
   enlace <a> que la envuelve (mismo patrón que .bs-logo / .bs-logo img). */
.bs-overlay__logo img {
	height: clamp(40px, calc(60 * 100vw / 1920), 72px);
	width:  auto;
}

.bs-header__nav-link {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 400;
	font-size:   clamp(14px, calc(17 * 100vw / 1920), 18px);
	line-height: 1;
}

.bs-hablemos {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 500;
	font-size:   clamp(14px, calc(17 * 100vw / 1920), 18px);
	line-height: 1;
}


/* ===== Footer =========================================================== */

/* Grid del footer — proporción del logo escala con viewport para que en
   pantallas pequeñas (1024-1399px) las columnas de la derecha (LINKS y
   CONNECT) no queden minúsculas. Breakpoints:
     - mobile  (<768):       1 columna apilada
     - tablet  (768-1399):   logo 50% + menu 25% + social 25%
     - desktop (1400+):      logo 60% + menu 20% + social 20% (proporción Figma)
   ========================================================================= */
.bs-footer__grid {
	grid-template-columns: 1fr;
}
@media (min-width: 768px) {
	.bs-footer__grid {
		grid-template-columns: 50% 1fr 1fr;
	}
}
@media (min-width: 1400px) {
	.bs-footer__grid {
		grid-template-columns: 60% 1fr 1fr;
	}
}

/* Logo gigante del footer — SVG blanco con cracks azules sobre el bg
   azul. Aspect del asset Figma: 1043×249 ≈ 4.19, altura auto.
   El max-width escala con viewport para no superar el tamaño Figma
   (1043 @ 1920) y para que en pantallas medianas no sea desproporcionado. */
.bs-footer__brand {
	width:  100%;
	height: auto;
	max-width: clamp(420px, calc(1043 * 100vw / 1920), 1100px);
}

/* ===== Footer — alineación mobile (<768) ================================
   En mobile el grid pasa a 1 columna apilada. Todos los elementos
   (logo, sticker "Links", lista de enlaces, sticker "Connect", iconos
   sociales y barra legal) quedan centrados horizontalmente.
   ========================================================================= */
@media (max-width: 767px) {
	.bs-footer__logo,
	.bs-footer__menu,
	.bs-footer__social {
		text-align: center;
	}
	/* Logo centrado */
	.bs-footer__brand {
		margin-inline: auto;
	}
	/* Sticker "Links" / "Connect" — son inline-flex por defecto, el
	   text-align: center del padre no los centra. Forzamos mx auto. */
	.bs-footer__menu > .sticker,
	.bs-footer__social > .sticker {
		display: block;
		width: fit-content;
		margin-inline: auto;
	}
	/* Iconos sociales: el <ul> es flex row con items-center; añadimos
	   justify-content: center para centrar la fila completa. */
	.bs-footer__social ul {
		justify-content: center;
	}
	/* Barra legal: copyright + lista de enlaces legales centrados. El
	   contenedor flex pasa de items-start a items-center vía Tailwind
	   (modificado en el template). */
	.bs-footer__legal ul {
		justify-content: center;
	}
}


/* ===== CTA banner ======================================================= */

.bs-cta__sticker {
	font-size:   inherit;
	font-family: 'Mickon', sans-serif;
	padding:     0.1em 0.4em;
}


/* ===== Sticker grande (modifier de .sticker) ============================
   Variante grande usada en hero de Servicios ("CREAMOS HISTORIAS") y
   reutilizable en otros heros donde haga falta una pill display.
   ========================================================================= */

.sticker--lg {
	font-family: 'Mickon', sans-serif;
	font-weight: 700;
	font-size:   clamp(40px, calc(80 * 100vw / 1920), 100px);
	line-height: 1;
	padding:     clamp(14px, calc(24 * 100vw / 1920), 32px)
	             clamp(28px, calc(56 * 100vw / 1920), 72px);
	border-radius: 9999px;
	letter-spacing: 0;
	text-transform: none;
	/* Los sticker grandes son frases cortas que SIEMPRE caben en una sola
	   línea en el diseño (Figma). Forzamos nowrap para evitar saltos en
	   viewports donde el clamp baja la fuente pero el contenedor sigue
	   suficientemente ancho. En mobile (max-width: 640px) liberamos el
	   wrap para no desbordar el viewport. */
	white-space: nowrap;
}
@media (max-width: 640px) {
	.sticker--lg {
		white-space: normal;
	}
}

/* Variante outline: sin fondo, con borde grueso. El borde lee var
   --sticker-border (por defecto bs-blue) — así el text-color puede ser
   distinto al borde (ej. texto amarillo + borde azul). */
.sticker--outline {
	background-color: transparent !important;
	box-shadow:       none !important;
	border:           clamp(2px, calc(3 * 100vw / 1920), 4px) solid var(--sticker-border, #5A65E7);
}


/* ===== Página Be Brutal — fotos con marco azul =========================
   Compartido entre las secciones "Cómo colaborar" y "Trabaja con nosotros":
   foto con borde solid bs-blue 5px y border-radius 40px (proporcional).
   ========================================================================= */

.bs-bb-photo {
	border: clamp(3px, calc(5 * 100vw / 1920), 6px) solid #5A65E7;
	border-radius: clamp(24px, calc(40 * 100vw / 1920), 48px);
	overflow: hidden;
	/* aspect-ratio se setea inline por sección (cada foto del Figma tiene
	   proporciones distintas: 791/412 en Cómo colaborar, 605/454 en
	   Trabaja con nosotros). */
}


/* ===== Página Brutal Studios — Process divisor ==========================
   Barra horizontal bs-blue sólido al inicio que fade a bs-blue-200 al final.
   Da sensación de "progreso" debajo de los 3 pasos numerados.
   ========================================================================= */

.bs-bs-process__divider {
	height: clamp(4px, calc(8 * 100vw / 1920), 10px);
	border-radius: 9999px;
	background: linear-gradient(
		to right,
		#5A65E7 0%,
		#5A65E7 60%,
		#BDC1F5 60%,
		#BDC1F5 100%
	);
}


/* ===== Página Brutal Studios — Intro ====================================
   Texto destacado con stroke aplicado al TEXTO (no al contenedor):
   amarillo con borde azul (-webkit-text-stroke). Mismo patrón que los
   números 01/02/03 outline.
   ========================================================================= */

.bs-bs-intro__claim {
	font-family: 'Mickon', sans-serif;
	font-weight: 700;
	font-style:  italic;
	font-size:   clamp(20px, calc(50 * 100vw / 1920), 64px);
	line-height: 1.1;
	letter-spacing: 0;
	color: #FFE700; /* bs-yellow */
	-webkit-text-stroke: clamp(1px, calc(1.8 * 100vw / 1920), 2.2px) #5A65E7; /* bs-blue */
	text-transform: uppercase;
	max-width: clamp(280px, calc(900 * 100vw / 1920), 1000px);
	margin-inline: auto;
}


/* ===== Página Brutal Studios — Team =====================================
   Layout: nombres flanqueando las dos fotos centradas, pegadas con overlap.
   ========================================================================= */

/* Pattern decorativo de letras "B" sobre fondo blanco. Las B's en
   bs-yellow saturado pero con opacity ~0.2 → apenas perceptibles, como
   pide el diseño. */
.bs-bs-team__pattern {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-template-rows: repeat(5, 1fr);
	pointer-events: none;
	user-select: none;
	overflow: hidden;
	opacity: 0.2;
}
.bs-bs-team__pattern > span {
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Mickon', sans-serif;
	font-weight: 700;
	font-style: italic;
	color: #FFE700; /* bs-yellow saturado (la opacity del padre lo atenúa) */
	font-size: clamp(60px, 13vw, 240px);
	line-height: 0.8;
}

/* Nombres "PABLO RODRÍGUEZ" / "JULIO FLORES" — absolute top-left y
   top-right, independientes de las fotos. */
.bs-bs-team__name {
	font-family: 'Mickon', sans-serif;
	font-weight: 700;
	font-size:   clamp(28px, calc(60 * 100vw / 1920), 76px);
	line-height: 0.92;
	letter-spacing: 0;
	color: #5A65E7;
	text-transform: uppercase;
	margin: 0;
	position: relative; /* default mobile: inline en flujo */
	text-align: center;
}

@media (min-width: 1024px) {
	.bs-bs-team__name {
		position: absolute;
		top: clamp(180px, calc(280 * 100vw / 1920), 360px);
		z-index: 2;
	}
	.bs-bs-team__name--left {
		left: clamp(40px, calc(120 * 100vw / 1920), 180px);
		text-align: left;
	}
	.bs-bs-team__name--right {
		right: clamp(40px, calc(120 * 100vw / 1920), 180px);
		text-align: right;
	}
}

/* Wrapper de fotos — flex centrado horizontalmente, pegado al bottom de
   la sección (la sección tiene padding-bottom: 0). */
.bs-bs-team__photos {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: clamp(24px, 4vw, 40px);
	margin-top: clamp(40px, 8vw, 80px);
	position: relative;
	z-index: 1;
}
@media (min-width: 1024px) {
	.bs-bs-team__photos {
		flex-direction: row;
		align-items: flex-end;
		justify-content: center;
		gap: 0;
		margin-top: 0;
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
	}
}

/* Cada foto va en un wrapper con MISMO ancho y MISMO aspect-ratio. La
   <img> dentro usa object-fit: contain + object-position: bottom para
   que la persona quede pegada al bottom del wrapper sin importar la
   relación de aspecto del archivo original. */
.bs-bs-team__photo-wrap {
	position: relative;
	width: clamp(220px, calc(520 * 100vw / 1920), 600px);
	aspect-ratio: 7 / 8;
	overflow: hidden;
}
.bs-bs-team__photo-wrap img {
	position: absolute;
	inset: 0;
	width: 100%;
	/* La altura la define el MISMO aspect-ratio que el wrap (no height:100%).
	   Motivo: un <img> (elemento reemplazado) con height:100% contra un padre
	   dimensionado por aspect-ratio cae a su alto INTRÍNSECO y deja un hueco
	   en el bottom (foto izquierda) o desborda (derecha). Con width:100% +
	   aspect-ratio:7/8 la caja del img = caja del wrap exacta y object-fit:cover
	   recorta sin huecos → el pie de la foto queda flush con el bottom. */
	height: auto;
	aspect-ratio: 7 / 8;
	object-fit: cover;
	object-position: bottom center;
	display: block;
	margin: 0;
}

/* Pablo va POR DELANTE de Julio. */
.bs-bs-team__photo-wrap--pablo { z-index: 2; }
.bs-bs-team__photo-wrap--julio { z-index: 1; }

/* ---- Triggers (nombre + foto): hover scale + cursor pointer ----
   Cada elemento clickable abre el modal del founder correspondiente. */
.bs-bs-team__trigger {
	cursor: pointer;
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	transform-origin: center center;
	outline: 0;
}
.bs-bs-team__name.bs-bs-team__trigger:hover,
.bs-bs-team__name.bs-bs-team__trigger:focus-visible {
	transform: scale(1.06);
	color: #4851B9;
}
.bs-bs-team__photo-wrap.bs-bs-team__trigger:hover,
.bs-bs-team__photo-wrap.bs-bs-team__trigger:focus-visible {
	transform: scale(1.03);
}
/* En desktop la foto de Julio tiene margin-left negativo. El scale
   sobre la foto NO debe alterar ese offset (el origen sigue siendo el
   centro), así que solo escala visualmente. */
@media (min-width: 1024px) {
	.bs-bs-team__photo-wrap--julio.bs-bs-team__trigger:hover,
	.bs-bs-team__photo-wrap--julio.bs-bs-team__trigger:focus-visible {
		transform: scale(1.03);
		z-index: 3; /* sube por encima de Pablo al estar activo */
	}
}
.bs-bs-team__trigger:focus-visible {
	outline: 2px solid #5A65E7;
	outline-offset: 6px;
	border-radius: 6px;
}


/* ===== Modal de founders (Pablo / Julio) ================================
   Modal full-screen blanco con pattern decorativo, swirl lila y layout
   2 cols (texto + foto). Julio usa el modifier `--julio` que invierte
   el orden de las columnas y voltea el swirl horizontalmente.
   ========================================================================= */

.bs-team-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
	            visibility 0s linear 0.35s;
}
.bs-team-modal[aria-hidden="false"] {
	visibility: visible;
	opacity: 1;
	transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
	            visibility 0s linear 0s;
}

.bs-team-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(11, 11, 11, 0.5);
}

.bs-team-modal__content {
	position: absolute;
	inset: 0;
	background: #FFFFFF;
	overflow: hidden;
	display: flex;
	align-items: center;
}

/* Botón cerrar — top-right, redondo con fondo blanco semitransparente. */
.bs-team-modal__close {
	position: absolute;
	top:   clamp(16px, calc(32 * 100vw / 1920), 40px);
	right: clamp(16px, calc(32 * 100vw / 1920), 40px);
	z-index: 5;
	width: clamp(40px, calc(56 * 100vw / 1920), 64px);
	height: clamp(40px, calc(56 * 100vw / 1920), 64px);
	border-radius: 9999px;
	border: 0;
	background: rgba(255, 255, 255, 0.9);
	color: #12142E;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
	transition: background 0.2s ease, transform 0.2s ease;
}
.bs-team-modal__close:hover {
	background: #FFE700;
	transform: scale(1.08);
}
.bs-team-modal__close:focus-visible {
	outline: 2px solid #5A65E7;
	outline-offset: 3px;
}
.bs-team-modal__close svg {
	width: 50%;
	height: 50%;
}

/* Pattern de letras B (igual que la sección team, opacity 0.1). */
.bs-team-modal__pattern {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-template-rows: repeat(5, 1fr);
	opacity: 0.1;
	pointer-events: none;
	user-select: none;
}
.bs-team-modal__pattern > span {
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Mickon', sans-serif;
	font-weight: 700;
	font-style: italic;
	color: #FFE700;
	font-size: clamp(60px, 13vw, 240px);
	line-height: 1;
}

/* Swirl lila — decorativo grande detrás del contenido. La parte donde
   se "corta" el SVG queda PEGADA al borde lateral del modal (el SVG
   se extiende más allá del viewport por la izquierda/derecha), así el
   corte no se ve como un recorte arbitrario sino como continuación
   fuera de pantalla. Julio lo voltea horizontalmente. */
.bs-team-modal__swirl {
	position: absolute;
	z-index: 1;
	width:  clamp(500px, calc(1055 * 100vw / 1920), 1300px);
	height: auto;
	pointer-events: none;
	user-select: none;
	opacity: 0.5;
}
.bs-team-modal--pablo .bs-team-modal__swirl {
	bottom: clamp(60px, calc(120 * 100vh / 1088), 200px);
	/* `right: negativo` saca la mitad del swirl por el borde derecho
	   — la curva continúa "fuera" del modal en vez de cortarse a la
	   mitad de un trazo. */
	right:  clamp(-260px, calc(-200 * 100vw / 1920), -120px);
}
.bs-team-modal--julio .bs-team-modal__swirl {
	bottom: clamp(60px, calc(120 * 100vh / 1088), 200px);
	left:   clamp(-260px, calc(-200 * 100vw / 1920), -120px);
	transform: scaleX(-1);
}

/* Texto: bloque absolute, vertical-center.
   Pablo  → izquierda (text-align left, max-width ~50%).
   Julio  → derecha   (text-align right). */
.bs-team-modal__text {
	position: absolute;
	z-index: 3;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
	max-width: clamp(280px, calc(867 * 100vw / 1920), 920px);
	padding-inline: clamp(20px, calc(60 * 100vw / 1920), 88px);
}
.bs-team-modal--pablo .bs-team-modal__text {
	left:  clamp(0px, calc(40 * 100vw / 1920), 60px);
	text-align: left;
}
.bs-team-modal--julio .bs-team-modal__text {
	right: clamp(0px, calc(40 * 100vw / 1920), 60px);
	text-align: right;
	max-width: clamp(280px, calc(727 * 100vw / 1920), 800px);
}

.bs-team-modal__name {
	font-family: 'Mickon', sans-serif;
	font-weight: 700;
	font-size:   clamp(36px, calc(98 * 100vw / 1920), 120px);
	line-height: 1.03;
	color: #5A65E7;
	text-transform: uppercase;
	margin: 0 0 clamp(24px, calc(60 * 100vw / 1920), 80px);
}
.bs-team-modal__bio {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 400;
	color: #000000;
}
.bs-team-modal__bio p {
	font-size:   clamp(15px, calc(20 * 100vw / 1920), 22px);
	line-height: 1.7;
	margin: 0 0 clamp(14px, calc(20 * 100vw / 1920), 26px);
}
.bs-team-modal__bio p:last-child { margin-bottom: 0; }

/* Foto: ANCLADA al borde inferior y al lateral (right para Pablo,
   left para Julio). Sin recortes — la imagen se muestra completa
   pegada a las dos esquinas. height auto mantiene la proporción. */
.bs-team-modal__photo {
	position: absolute;
	z-index: 2;
	bottom: 0;
	display: block;
	height: auto;
	pointer-events: none;
	user-select: none;
}
/* Tamaños siempre por debajo del width nativo del PNG (Pablo 1070,
   Julio 1186) para evitar upscaling → la imagen se ve nítida. Un
   pequeño inset lateral (right/left) hace que la foto NO quede flush
   con el lateral, sino "centrada" en su mitad del modal. */
.bs-team-modal--pablo .bs-team-modal__photo {
	right: clamp(0px, calc(60 * 100vw / 1920), 100px);
	width: clamp(360px, calc(880 * 100vw / 1920), 1040px);
}
.bs-team-modal--julio .bs-team-modal__photo {
	left:  clamp(0px, calc(60 * 100vw / 1920), 100px);
	width: clamp(360px, calc(940 * 100vw / 1920), 1140px);
}

/* En mobile/tablet (<1024) — texto NO absolute (apilado normal arriba),
   foto sigue al final pero más pequeña para que entre el texto encima
   sin solaparse. */
@media (max-width: 1023px) {
	/* Columna fullscreen: texto arriba (scrollea si la bio es larga) y foto
	   SIEMPRE pegada al bottom de la pantalla. */
	.bs-team-modal__content {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		overflow: hidden;
	}
	.bs-team-modal__text {
		position: relative;
		top: auto;
		left: auto;
		right: auto;
		transform: none;
		max-width: 100%;
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		padding: clamp(80px, calc(94 * 100vw / 1920), 120px) clamp(20px, 5vw, 40px) 16px;
		text-align: left;
	}
	.bs-team-modal--julio .bs-team-modal__text {
		text-align: left;
		max-width: 100%;
	}
	/* Foto anclada al bottom del viewport, centrada. !important para anular
	   los right/left/width de las reglas --pablo / --julio (más específicas). */
	.bs-team-modal__photo {
		position: relative;
		flex: 0 0 auto;
		top:    auto !important;
		bottom: auto !important;
		left:   auto !important;
		right:  auto !important;
		width:  100% !important;
		max-width: 360px;
		margin: 0 auto;
		display: block;
	}
	.bs-team-modal__swirl {
		display: none;
	}
}

/* Lock del scroll del body cuando hay un modal abierto */
body.bs-modal-open {
	overflow: hidden;
}

/* Reduced motion: sin animación, cambio inmediato */
@media (prefers-reduced-motion: reduce) {
	.bs-bs-team__trigger,
	.bs-team-modal,
	.bs-team-modal__close {
		transition-duration: 0.01s;
	}
	.bs-bs-team__name.bs-bs-team__trigger:hover,
	.bs-bs-team__photo-wrap.bs-bs-team__trigger:hover {
		transform: none;
	}
}

@media (min-width: 1024px) {
	/* Julio se mete un poco DETRÁS de Pablo con margin-left negativo. */
	.bs-bs-team__photo-wrap--julio {
		margin-left: clamp(-140px, calc(-120 * 100vw / 1920), -60px);
	}
}


/* ===== Páginas legales (page.php) ========================================
   Template genérico usado por las páginas editables desde Gutenberg
   (Política de Privacidad, Aviso Legal, Política de Cookies). Layout
   simple, max-width cómodo para lectura, jerarquía tipográfica clara
   para SEO y accesibilidad.
   ========================================================================= */

.bs-legal-page {
	background: #FFFFFF;
}

/* Hero: solo el título (H1). Pequeño bg gradient azul claro como en los
   page-hero genéricos para que la marca sea consistente. */
.bs-legal-hero {
	background: linear-gradient(180deg, rgba(90, 101, 231, 0.07) 0%, rgba(255, 255, 255, 0) 80%), #FFFFFF;
	padding-top:    clamp(140px, calc(220 * 100vw / 1920), 280px);
	padding-bottom: clamp(40px, calc(80 * 100vw / 1920), 120px);
}

/* H1 alineado con el contenido — comparte el mismo max-width y margin
   auto que `.bs-legal-content__inner` para que su borde izquierdo coincida
   con el inicio del primer párrafo, h2, etc. */
.bs-legal-hero__title {
	font-family: 'Mickon', sans-serif;
	font-weight: 700;
	font-size:   clamp(40px, calc(96 * 100vw / 1920), 120px);
	line-height: 0.95;
	color: #12142E;
	text-transform: uppercase;
	letter-spacing: 0;
	margin: 0 auto;
	max-width: clamp(320px, calc(1140 * 100vw / 1920), 1200px);
}

/* Contenedor del contenido del editor — ancho amplio (1140px @ 1920,
   cap a 1200) para aprovechar la página y no apretar el texto. */
.bs-legal-content {
	padding-top:    clamp(40px, calc(60 * 100vw / 1920), 100px);
	padding-bottom: clamp(80px, calc(120 * 100vw / 1920), 160px);
}

.bs-legal-content__inner {
	max-width: clamp(320px, calc(1140 * 100vw / 1920), 1200px);
	margin-inline: auto;
	color: #12142E;
}

/* Tipografía interior — h2 grande, h3 medio, párrafos cómodos */
.bs-legal-content__inner h2 {
	font-family: 'Mickon', sans-serif;
	font-weight: 700;
	font-size:   clamp(26px, calc(40 * 100vw / 1920), 48px);
	line-height: 1.1;
	color: #5A65E7;
	text-transform: uppercase;
	margin-top:    clamp(40px, calc(60 * 100vw / 1920), 80px);
	margin-bottom: clamp(16px, calc(24 * 100vw / 1920), 32px);
}
.bs-legal-content__inner h2:first-child {
	margin-top: 0;
}

.bs-legal-content__inner h3 {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 700;
	font-size:   clamp(20px, calc(26 * 100vw / 1920), 30px);
	line-height: 1.2;
	color: #12142E;
	margin-top:    clamp(28px, calc(40 * 100vw / 1920), 52px);
	margin-bottom: clamp(12px, calc(18 * 100vw / 1920), 22px);
}

.bs-legal-content__inner p {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 400;
	font-size:   clamp(15px, calc(17 * 100vw / 1920), 19px);
	line-height: 1.65;
	color: #12142E;
	margin: 0 0 clamp(14px, calc(20 * 100vw / 1920), 26px);
}

.bs-legal-content__inner strong {
	font-weight: 700;
	color: #12142E;
}

.bs-legal-content__inner a {
	color: #5A65E7;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	transition: color 0.15s ease;
}
.bs-legal-content__inner a:hover {
	color: #4851B9;
}

/* Listas — bullet azul + indentación cómoda */
.bs-legal-content__inner ul,
.bs-legal-content__inner ol {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 400;
	font-size:   clamp(15px, calc(17 * 100vw / 1920), 19px);
	line-height: 1.65;
	color: #12142E;
	margin: 0 0 clamp(14px, calc(20 * 100vw / 1920), 26px);
	padding-left: 1.5em;
}
.bs-legal-content__inner ul { list-style: none; }
.bs-legal-content__inner ul li {
	position: relative;
	margin-bottom: 0.55em;
}
.bs-legal-content__inner ul li::before {
	content: '';
	position: absolute;
	left: -1em;
	top: 0.65em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #5A65E7;
}
.bs-legal-content__inner ol li {
	margin-bottom: 0.55em;
}

/* Tablas (Política de Cookies) — borde + zebra */
.bs-legal-content__inner .wp-block-table,
.bs-legal-content__inner table {
	width: 100%;
	margin: clamp(18px, calc(28 * 100vw / 1920), 36px) 0;
	border-collapse: collapse;
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: clamp(13px, calc(15 * 100vw / 1920), 17px);
}
.bs-legal-content__inner table thead th {
	background: #5A65E7;
	color: #FFFFFF;
	font-weight: 700;
	text-align: left;
	padding: clamp(10px, calc(14 * 100vw / 1920), 18px);
	border: 1px solid #5A65E7;
}
.bs-legal-content__inner table tbody td {
	padding: clamp(10px, calc(12 * 100vw / 1920), 16px);
	border: 1px solid #DEE0FA;
	vertical-align: top;
}
.bs-legal-content__inner table tbody tr:nth-child(even) {
	background: #F4F5FD;
}

/* Separadores hr — línea sutil azul claro */
.bs-legal-content__inner hr {
	border: 0;
	border-top: 1px solid #DEE0FA;
	margin: clamp(28px, calc(40 * 100vw / 1920), 56px) 0;
}

/* Última actualización — pequeño bloque resaltado encima del contenido */
.bs-legal-content__inner .bs-legal-updated {
	display: inline-block;
	background: #DEE0FA;
	color: #5A65E7;
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 700;
	font-size: clamp(13px, calc(14 * 100vw / 1920), 15px);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 8px 16px;
	border-radius: 9999px;
	margin-bottom: clamp(24px, calc(40 * 100vw / 1920), 60px);
}


/* ===== Página Servicios — Hero =========================================== */

.bs-page-hero {
	min-height: 100vh;
	background: linear-gradient(180deg, rgba(90, 101, 231, 0.07) 0%, rgba(255, 255, 255, 0) 55%), #FFFFFF;
}

/* Columna de texto del hero: centrada en mobile, alineada a la izquierda
   en desktop (la imagen ocupa la mitad derecha). El contenido interno se
   alinea con text-align: center. */
.bs-page-hero__col {
	max-width: clamp(420px, calc(924 * 100vw / 1920), 1040px);
	text-align: center;
	margin-inline: auto;
}
@media (min-width: 768px) {
	.bs-page-hero__col {
		margin-left: 0;
		margin-right: auto;
	}
}

/* Label "SERVICIOS BRUTALES" — texto plano (no pill), tracking ancho. */
.bs-page-hero__label {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 500;
	font-size:   clamp(14px, calc(30 * 100vw / 1920), 36px);
	letter-spacing: 0.13em; /* ≈ 4px sobre 30px */
	color: #12142E; /* bs-blue-800 */
	text-transform: uppercase;
}

.bs-page-hero__title {
	font-family: 'Mickon', sans-serif;
	font-weight: 700;
	font-size:   clamp(46px, calc(100 * 100vw / 1920), 120px);
	line-height: 0.85; /* Mickon Bold visual ≈ 83/100 */
	letter-spacing: 0;
	color: #12142E; /* bs-blue-800 */
	text-shadow: 0 4px 4px rgba(0, 0, 0, 0.18);
	text-transform: uppercase;
	display: flex;
	flex-direction: column;
	gap: clamp(8px, calc(23 * 100vw / 1920), 28px);
}

/* ---- Modifier `--text-md` ----
   Tipografía reducida del hero para páginas con frases largas en el
   sticker (Be Brutal "CREAMOS EXPERIENCIAS", Contacto "CREAMOS
   ENCUENTROS"). Convive con --bb / --co que gestionan posiciones de
   decoratives. Una sola fuente de verdad para el tamaño chico. */
.bs-page-hero--text-md .bs-page-hero__label {
	font-size: clamp(13px, calc(24 * 100vw / 1920), 28px);
}
.bs-page-hero--text-md .bs-page-hero__title {
	font-size:   clamp(38px, calc(82 * 100vw / 1920), 100px);
	line-height: 0.88;
}
.bs-page-hero--text-md .sticker--lg {
	font-size: clamp(26px, calc(58 * 100vw / 1920), 72px);
	padding:   clamp(12px, calc(20 * 100vw / 1920), 26px)
	           clamp(22px, calc(44 * 100vw / 1920), 56px);
}

/* Estado inicial para las líneas del título con mask reveal — solo cuando
   JS está activo. Sin .js (no JS o GSAP no carga), se ven en su sitio. */
.js [data-bs-page-hero-line] {
	transform: translateY(110%);
	opacity: 0;
}

/* Modifier --mirror: invierte el lado del contenido para páginas con
   imagen a la izquierda y texto a la derecha (ej. Proyectos). */
@media (min-width: 768px) {
	.bs-page-hero--mirror .bs-page-hero__col {
		margin-left: auto;
		margin-right: 0;
	}
}

/* Decorativos absolute — posición por defecto (imagen y blob a la derecha,
   @ sticker a la izquierda). El modifier --mirror invierte los lados. */
.bs-page-hero__blob {
	top:   clamp(60px,  calc(100 * 100vw / 1920), 140px);
	right: clamp(-60px, calc(-40 * 100vw / 1920), -20px);
	width: clamp(300px, calc(770 * 100vw / 1920), 820px);
}
.bs-page-hero__people {
	top:   clamp(80px,  calc(190  * 100vw / 1920), 230px);
	right: clamp(-80px, calc(-100 * 100vw / 1920), -40px);
	width: clamp(420px, calc(1010 * 100vw / 1920), 1100px);
}
.bs-page-hero__at {
	top:       clamp(280px, calc(370 * 100vw / 1920), 430px);
	left:      clamp(12px,  calc(81  * 100vw / 1920), 88px);
	width:     clamp(110px, calc(192 * 100vw / 1920), 220px);
	transform: rotate(-11.88deg);
}

.bs-page-hero--mirror .bs-page-hero__blob {
	top:   clamp(140px,  calc(220 * 100vw / 1920), 280px);
	right: auto;
	left:  clamp(-100px, calc(-66 * 100vw / 1920), -40px);
	width: clamp(380px,  calc(914 * 100vw / 1920), 980px);
}
.bs-page-hero--mirror .bs-page-hero__people {
	top:   clamp(80px,   calc(190  * 100vw / 1920), 230px);
	right: auto;
	left:  clamp(-180px, calc(-175 * 100vw / 1920), -100px);
	width: clamp(460px,  calc(1110 * 100vw / 1920), 1200px);
}
.bs-page-hero--mirror .bs-page-hero__at {
	left:      auto;
	right:     clamp(20px, calc(131 * 100vw / 1920), 140px);
	top:       clamp(300px, calc(400 * 100vw / 1920), 460px);
	transform: rotate(11.88deg);
}


/* ===== Page hero MOBILE (<768px) ========================================
   Hero SIEMPRE fullscreen: texto centrado horizontalmente en la parte
   superior y foto anclada al bottom del viewport (a ancho completo,
   centrada). Blob y @-sticker se ocultan — añadirían ruido visual en
   pantallas pequeñas.
   ========================================================================= */
@media (max-width: 767px) {
	.bs-page-hero {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		min-height: 100dvh;
		padding-bottom: 0;
	}

	/* Container de texto pasa primero en flex order. Reduzco el padding-top
	   para que el header fijo no quede demasiado lejos del contenido. */
	.bs-page-hero > .bs-container {
		order: 1;
		padding-top:    clamp(96px, 24vw, 160px) !important;
		padding-bottom: clamp(16px, 5vw, 32px) !important;
	}

	/* Texto centrado horizontalmente. */
	.bs-page-hero__col {
		text-align: center !important;
		margin-inline: auto;
		max-width: 100%;
	}
	/* El título es flex column → centrar también sus líneas. */
	.bs-page-hero__title {
		align-items: center;
	}

	/* Foto: SIEMPRE pegada al bottom del viewport, centrada horizontalmente.
	   Anula TODAS las posiciones absolute heredadas (defaults, --mirror,
	   --bb, --co). */
	.bs-page-hero__people {
		order: 2;
		position: absolute !important;
		top:    auto !important;
		bottom: 0 !important;
		left:   50% !important;
		right:  auto !important;
		width:  100% !important;
		max-width: 540px;
		height: auto;
		margin: 0 !important;
		display: block;
		transform: translateX(-50%) !important;
	}

	/* Decoratives ocultos en mobile — ruido visual innecesario. */
	.bs-page-hero__blob,
	.bs-page-hero__at {
		display: none !important;
	}
}


/* ===== Página Be Brutal — overrides del hero ===========================
   Diferencias respecto al hero genérico (servicios/proyectos/about):
   - Tipografías más pequeñas — "CREAMOS EXPERIENCIAS" es la frase más
     larga del proyecto y tiene que caber en una sola línea.
   - People image flush bottom + right del viewport (imagen completa visible).
   - Smiley pequeño a la izquierda del título, sin solaparlo.
   - Blob lila apenas asomando como acento decorativo detrás de la imagen.
   ========================================================================= */

/* Tipografía: usa el modifier global `--text-md` (ver arriba). */

/* Smiley a la izquierda del título y a la altura de la primera línea
   "NO HACEMOS". Pegado al bloque del título centrado (no al borde del
   viewport) — `left` calculado para quedar justo antes del texto sin
   solaparlo. Sin rotación. */
.bs-page-hero--bb .bs-page-hero__at {
	top:       clamp(180px, calc(380 * 100vw / 1920), 440px);
	left:      clamp(40px,  calc(220 * 100vw / 1920), 260px);
	width:     clamp(48px,  calc(88  * 100vw / 1920), 108px);
	transform: none;
}

/* People image: ANCLADA al borde bottom-right del viewport (imagen completa
   visible, sin recortes). La fuente está cropeada al contenido (990×780,
   aspect 1.27 — yellow outline pegado a los bordes derecho e inferior, sin
   whitespace alrededor), con la mujer a la izquierda + hombre a la derecha.
   `top: auto` anula el valor heredado del hero genérico. */
.bs-page-hero--bb .bs-page-hero__people {
	top:    auto;
	bottom: 0;
	right:  0;
	width:  clamp(440px, calc(900 * 100vw / 1920), 1000px);
}

/* Blob lila — acento decorativo detrás de la imagen, también anclado a
   la zona bottom-right para envolverla por detrás. Solo asoman trozos
   curvos por los bordes (color #BDC1F5 viene en el SVG). */
.bs-page-hero--bb .bs-page-hero__blob {
	top:    auto;
	bottom: clamp(-40px,  calc(80   * 100vw / 1920), 140px);
	right:  clamp(-180px, calc(-100 * 100vw / 1920), -40px);
	width:  clamp(380px,  calc(780  * 100vw / 1920), 860px);
}


/* ===== Página Contacto — overrides del hero ============================
   Layout MIRROR (foto izquierda, texto derecha).
   - Foto = chica con móvil + outline azul integrado. Anclada bottom-left
     (similar al patrón be-brutal pero en el lado opuesto).
   - Blob = swirl amarillo (#FFE700) detrás de la foto, asomando.
   - @ sticker = mano con móvil a la DERECHA del título "NO HACEMOS
     PUBLICIDAD" (no rotado).
   - Sticker grande "CREAMOS ENCUENTROS" hereda .sticker--lg con bg amarillo
     y texto azul (colores invertidos vs Be Brutal).
   ========================================================================= */

/* Tipografía: usa el modifier global `--text-md` (ver arriba). */

/* People image (chica con móvil): flush bottom + left del viewport. Width
   contenida (700px @ 1920) para que la imagen completa entre dentro del
   viewport sin recortarse arriba ni a los lados. */
.bs-page-hero--co .bs-page-hero__people {
	top:    auto;
	bottom: 0;
	left:   0;
	right:  auto;
	width:  clamp(380px, calc(720 * 100vw / 1920), 820px);
}

/* Blob amarillo: detrás de la foto, asomando por el lateral superior. */
.bs-page-hero--co .bs-page-hero__blob {
	top:    auto;
	bottom: clamp(-40px,  calc(120 * 100vw / 1920), 180px);
	left:   clamp(-180px, calc(-100 * 100vw / 1920), -40px);
	right:  auto;
	width:  clamp(380px,  calc(820 * 100vw / 1920), 920px);
}

/* @ sticker = mano-con-móvil a la DERECHA del título, a la altura
   intermedia del bloque texto (figma x=1592, y=497, w=241). Sin rotación.
   Anula la posición --mirror del page-hero genérico. */
.bs-page-hero--co .bs-page-hero__at {
	top:       clamp(160px, calc(420 * 100vw / 1920), 500px);
	right:     clamp(8px,   calc(80  * 100vw / 1920), 100px);
	left:      auto;
	width:     clamp(120px, calc(220 * 100vw / 1920), 260px);
	transform: none;
}


/* ===== Página Contacto — Sección Formulario ============================
   - Título Mickon Bold con foto pequeña embebida entre "ALGO" y "BRUTAL".
   - Foto del equipo dcha con marco amarillo 9px + radius 40px.
   - Smiley azul decorativo arriba-izquierda de la foto, rotado 8.45deg.
   ========================================================================= */

.bs-co-form-section {
	position: relative;
	background: #FFFFFF;
}

/* Título "CONSTRUYAMOS ALGO / [foto] BRUTAL !!" — Mickon Bold 100px en
   Figma. Escalado responsive. */
.bs-co-title {
	font-family: 'Mickon', sans-serif;
	font-weight: 700;
	font-size:   clamp(40px, calc(100 * 100vw / 1920), 120px);
	line-height: 1.01; /* leading 101px sobre 100px */
	letter-spacing: 0;
	color: #5A65E7; /* bs-blue */
}

.bs-co-title__line {
	display: block;
}

/* Segunda línea: [foto] BRUTAL !! — items inline alineados al baseline.
   Gap entre foto y "BRUTAL", y entre "BRUTAL" y "!!". */
.bs-co-title__line--with-photo {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: clamp(12px, calc(28 * 100vw / 1920), 36px);
}

/* Foto embebida en el título — aspect 324/87 (figma), rounded-[20px]. */
.bs-co-title__photo {
	display: block;
	height:  clamp(50px, calc(87 * 100vw / 1920), 100px);
	width:   auto;
	aspect-ratio: 324 / 87;
	object-fit: cover;
	border-radius: clamp(14px, calc(20 * 100vw / 1920), 24px);
}

.bs-co-title__word,
.bs-co-title__bang {
	display: inline-block;
}

/* Aside: foto + smiley decorativo. Es un grid item; con flex column la
   foto interior se estira al alto de la columna (= al alto del form),
   garantizando que ambas columnas tengan la misma altura. */
.bs-co-form-aside {
	position: relative;
	display: flex;
	flex-direction: column;
}

/* Smiley azul SVG decorativo arriba-izquierda de la foto, rotado 8.45° */
.bs-co-form-aside__smiley {
	top:       clamp(-30px, calc(-140 * 100vw / 1920), -60px);
	left:      clamp(-30px, calc(-40 * 100vw / 1920), -16px);
	width:     clamp(80px,  calc(220 * 100vw / 1920), 260px);
	transform: rotate(8.45deg);
}

/* Foto con marco amarillo grueso (9px en Figma) + radius 40px. En desktop
   crece para igualar la altura del form (flex: 1). En mobile mantiene el
   aspect ratio del Figma (554/641) para no quedar minúscula. */
.bs-co-form-aside__photo {
	border: clamp(5px, calc(9 * 100vw / 1920), 10px) solid #FFE700;
	border-radius: clamp(24px, calc(40 * 100vw / 1920), 48px);
	background: #FFFFFF;
	aspect-ratio: 554 / 641;
	overflow: hidden;
}
@media (min-width: 1024px) {
	.bs-co-form-aside__photo {
		/* En desktop la foto crece sólo lo necesario para igualar la altura
		   del formulario — sin `min-height`, el grid row se determina por
		   el alto natural del form y la foto se ajusta a ese tamaño. */
		flex: 1;
		aspect-ratio: auto;
	}
}


/* ===== Página Contacto — Fluent Forms overrides =========================
   Sobreescribe los estilos default de Fluent Forms (.ff-el-*) para que
   los inputs, textarea, checkboxes y submit coincidan con el diseño:
   - Inputs: bg #DEE0FA (bs-blue-100), placeholder #9CA3F1 (bs-blue-300),
     rounded pill (50px), font Bricolage 15px, padding inline ~54px.
   - Textarea: rounded 30px, alto mayor.
   - Checkboxes: cuadrado 13×13 con border bs-blue, texto Bricolage 12px azul.
   - Submit: bg #9CA3F1 (bs-blue-300), full-width, texto blanco 18px,
     rounded pill.
   Todos los selectores van scoped bajo `.bs-co-form` para no afectar a
   posibles otros formularios futuros en otras páginas.
   ========================================================================= */

.bs-co-form .ff-el-group {
	margin-bottom: clamp(10px, calc(18 * 100vw / 1920), 22px);
}

/* Los grupos que contienen un checkbox (consent + newsletter) van más
   juntos entre sí — texto corto, no necesita el margin estándar de los
   inputs. Reduce a ~5px en mobile y ~8px en desktop. */
.bs-co-form .ff-el-group:has(input[type="checkbox"]) {
	margin-bottom: clamp(2px, calc(6 * 100vw / 1920), 8px);
}

/* También quitamos el padding/margin interior de los divs anidados que
   Fluent Forms inyecta alrededor de cada checkbox (.ff-el-form-check). */
.bs-co-form .ff-el-form-check {
	margin: 0;
	padding: 0;
}
.bs-co-form .ff-el-form-check .ff-el-form-check {
	margin-top: 2px;
}
.bs-co-form .ff-el-form-check-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	line-height: 1.3;
	margin: 0;
}

/* Fluent Forms inyecta un .ff-el-image-input-src de 200×200 cuando la
   opción de checkbox tiene "image option" habilitado. En el form de
   Contacto no usamos imágenes — la hacemos invisible por si el flag
   se cuela en algún update futuro. */
.bs-co-form .ff-el-image-input-src,
.bs-co-form .ff_el_checkable_photo_holders {
	display: none !important;
}

/* Espacio extra entre el último checkbox y el botón submit — no es un
   campo más, es la acción primaria, conviene separarlo. */
.bs-co-form button[type="submit"],
.bs-co-form input[type="submit"],
.bs-co-form .ff-btn-submit {
	margin-top: clamp(20px, calc(32 * 100vw / 1920), 40px);
}

.bs-co-form .ff-el-form-control,
.bs-co-form input[type="text"],
.bs-co-form input[type="email"],
.bs-co-form input[type="tel"],
.bs-co-form input[type="number"],
.bs-co-form textarea,
.bs-co-form select {
	background: #DEE0FA;
	border: 0;
	border-radius: 50px;
	box-shadow: 0 4px 4px 0 rgba(156, 163, 241, 0.10);
	padding: clamp(16px, calc(20 * 100vw / 1920), 24px)
	         clamp(20px, calc(54 * 100vw / 1920), 64px);
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 400;
	font-size:   clamp(14px, calc(15 * 100vw / 1920), 16px);
	color: #12142E;
	width: 100%;
	min-height: clamp(48px, calc(58 * 100vw / 1920), 64px);
	transition: box-shadow 0.2s ease, background 0.2s ease;
}

.bs-co-form .ff-el-form-control:focus,
.bs-co-form input:focus,
.bs-co-form textarea:focus,
.bs-co-form select:focus {
	outline: 0;
	background: #E8EAFB;
	box-shadow: 0 0 0 2px #5A65E7;
}

/* Textarea más redondeada que los inputs (el diseño la quiere con esquinas
   visualmente suaves). !important para ganar a los defaults de Fluent
   Forms que aplican border-radius vía .ff-el-form-control. */
.bs-co-form textarea,
.bs-co-form textarea.ff-el-form-control {
	min-height: clamp(140px, calc(186 * 100vw / 1920), 220px);
	border-radius: clamp(28px, calc(40 * 100vw / 1920), 48px) !important;
	resize: vertical;
	padding-top:    clamp(18px, calc(24 * 100vw / 1920), 28px);
	padding-bottom: clamp(18px, calc(24 * 100vw / 1920), 28px);
}

/* Placeholder color */
.bs-co-form ::placeholder { color: #9CA3F1; opacity: 1; }
.bs-co-form ::-webkit-input-placeholder { color: #9CA3F1; }
.bs-co-form ::-moz-placeholder { color: #9CA3F1; opacity: 1; }

/* Labels ocultos (el diseño usa solo placeholders), pero mantenidos en el
   DOM para accesibilidad. */
.bs-co-form .ff-el-input--label {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Fila 2 columnas para Tipo de proyecto + Presupuesto.
   Fluent Forms usa .ff-t-cell para celdas de fila. */
.bs-co-form .ff-t-container { display: flex; gap: clamp(20px, calc(57 * 100vw / 1920), 64px); }
.bs-co-form .ff-t-cell { flex: 1; }
@media (max-width: 640px) {
	.bs-co-form .ff-t-container { flex-direction: column; gap: 0; }
}

/* Checkboxes — cuadrado 13×13 con border bs-blue, texto Bricolage 12px azul. */
.bs-co-form .ff-el-form-check,
.bs-co-form .ff_list_inline,
.bs-co-form .ff_list_buttons {
	padding-left: 0;
}

.bs-co-form input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width:  clamp(11px, calc(13 * 100vw / 1920), 16px);
	height: clamp(11px, calc(13 * 100vw / 1920), 16px);
	border: 1px solid #5A65E7;
	border-radius: 3px;
	background: transparent;
	margin-right: 10px;
	cursor: pointer;
	vertical-align: middle;
	position: relative;
}
.bs-co-form input[type="checkbox"]:checked {
	background: #5A65E7;
}
.bs-co-form input[type="checkbox"]:checked::after {
	content: '';
	position: absolute;
	left: 3px;
	top: 0px;
	width: 4px;
	height: 8px;
	border: solid #FFFFFF;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.bs-co-form .ff-el-form-check label,
.bs-co-form .ff_list_inline label,
.bs-co-form .ff_list_buttons label {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 400;
	font-size:   clamp(11px, calc(12 * 100vw / 1920), 14px);
	color: #5A65E7;
	letter-spacing: -0.01em;
	cursor: pointer;
}

/* Submit "Enviar" — pill amarilla... no, en Figma es azul claro. Texto
   blanco. Full width. */
.bs-co-form button[type="submit"],
.bs-co-form input[type="submit"],
.bs-co-form .ff-btn-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: clamp(48px, calc(58 * 100vw / 1920), 64px);
	background: #9CA3F1;
	color: #FFFFFF;
	border: 0;
	border-radius: 50px;
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 400;
	font-size:   clamp(15px, calc(18 * 100vw / 1920), 20px);
	letter-spacing: -0.01em;
	cursor: pointer;
	box-shadow: 0 4px 4px 0 rgba(156, 163, 241, 0.10);
	transition: background 0.2s ease, transform 0.15s ease;
}
.bs-co-form button[type="submit"]:hover,
.bs-co-form input[type="submit"]:hover,
.bs-co-form .ff-btn-submit:hover {
	background: #5A65E7;
}
.bs-co-form button[type="submit"]:active,
.bs-co-form input[type="submit"]:active,
.bs-co-form .ff-btn-submit:active {
	transform: translateY(1px);
}

/* Mensajes de error / éxito de Fluent Forms */
.bs-co-form .ff-el-is-error .text-danger,
.bs-co-form .error,
.bs-co-form .ff-el-tooltip {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 13px;
	color: #E33;
	margin-top: 6px;
}
.bs-co-form .ff-message-success {
	background: #DEE0FA;
	color: #12142E;
	padding: 16px 24px;
	border-radius: 16px;
}


/* ===== Página Servicios — Sección "Servicios brutales" ==================
   bg lila claro (bs-blue-100), pattern decorativo de BRUTAL outline detrás
   y 3 cards numeradas.
   ========================================================================= */

.bs-servicios-lista {
	position: relative;
	overflow: hidden;
	background-color: #DEE0FA; /* bs-blue-100 */
}

.bs-servicios-lista__pattern {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: clamp(40px, calc(80 * 100vw / 1920), 120px);
}
.bs-servicios-lista__pattern .bs-marquee {
	transform: rotate(-2deg);
	overflow: visible; /* En modo pattern estático queremos ver toda la línea de texto. */
}
.bs-servicios-lista__pattern .bs-marquee__text {
	font-size: clamp(80px, calc(220 * 100vw / 1920), 280px);
	line-height: 0.9;
}
.bs-servicios-lista__pattern .bs-marquee__item {
	gap: clamp(40px, calc(80 * 100vw / 1920), 120px);
}

.bs-servicios-lista__content {
	position: relative;
	z-index: 1;
}

/* Grid 3 columnas en desktop, stack en mobile. Tamaño de cards fijo. */
.bs-servicios-lista__cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(32px, 6vw, 64px);
}
@media (min-width: 768px) {
	.bs-servicios-lista__cards {
		grid-template-columns: repeat(3, 1fr);
		gap: clamp(40px, calc(92 * 100vw / 1920), 100px);
	}
}

.bs-servicios-lista__title {
	font-family: 'Mickon', sans-serif;
	font-weight: 700;
	font-size:   clamp(48px, calc(140 * 100vw / 1920), 160px);
	line-height: 0.96;
	letter-spacing: 0;
}


/* ===== Card servicio numerada (01/02/03) ================================
   Estructura:
     - .bs-card-servicio-num             — wrapper (aspect-ratio, sin borde,
                                            overflow visible para el sticker)
     - .bs-card-servicio-num__base       — la color card (siempre visible,
                                            con número + título, borde + radius)
     - .bs-card-servicio-num__hover      — wrapper del overlay (rotación al
                                            hacer hover, sticker dentro)
       - .bs-card-servicio-num__hover-card — la image card (borde + radius
                                              + foto + bullets panel inside)
       - .bs-card-servicio-num__sticker  — extiende fuera del image-card
   En hover (o focus por teclado) el wrapper hover gana opacity 1 y rota
   levemente → se ve la image card encima de la color card.
   ========================================================================= */

.bs-card-servicio-num {
	position: relative;
	aspect-ratio: 516 / 602;
	width: 100%;
	display: block;
	/* overflow:visible para que el sticker y la rotación de la image card
	   puedan asomar fuera del bounding box del wrapper. */
	overflow: visible;
	outline: 0;
}
.bs-card-servicio-num:focus-visible {
	outline: 3px solid #5A65E7;
	outline-offset: 6px;
	border-radius: clamp(24px, calc(44 * 100vw / 1920), 60px);
}

/* ---- Color card base (siempre visible, debajo del hover overlay) ---- */
.bs-card-servicio-num__base {
	position: absolute;
	inset: 0;
	border:        clamp(2px, calc(4 * 100vw / 1920), 5px) solid #12142E;
	border-radius: clamp(20px, calc(40 * 100vw / 1920), 56px);
	overflow: hidden;
	background: var(--bs-card-bg, #5A65E7);
}

.bs-card-servicio-num__num {
	position: absolute;
	top: 18%;
	left: 50%;
	transform: translateX(-50%);
	font-family: 'Mickon', sans-serif;
	font-style:  italic;
	font-weight: 700;
	font-size:   clamp(60px, calc(130 * 100vw / 1920), 150px);
	line-height: 0.74;
	color: transparent;
	-webkit-text-stroke: clamp(2px, calc(3 * 100vw / 1920), 4px) var(--num-stroke, #5A65E7);
	user-select: none;
	margin: 0;
}

.bs-card-servicio-num__title {
	position: absolute;
	bottom: 11%;
	left:   8%;
	right:  8%;
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 800;
	font-size:   clamp(22px, calc(55 * 100vw / 1920), 64px);
	line-height: 1.2;
	text-transform: uppercase;
	margin: 0;
}

/* ---- Hover overlay ---- */

/* Wrapper de la image card y el sticker. Mismo bounding box que el
   base, pero rotado y oculto por defecto. En hover/focus aparece. */
.bs-card-servicio-num__hover {
	position: absolute;
	inset: 0;
	opacity: 0;
	transform: rotate(0deg);
	transform-origin: 50% 60%;
	transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
	            transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
	pointer-events: none;
	/* Sin overflow → el sticker puede asomar fuera. */
}
.bs-card-servicio-num:hover .bs-card-servicio-num__hover,
.bs-card-servicio-num:focus-visible .bs-card-servicio-num__hover,
.bs-card-servicio-num:focus-within .bs-card-servicio-num__hover {
	opacity: 1;
	transform: rotate(var(--bs-card-hover-rot, -5.47deg));
}

/* Image card propia: el "papel" rotado con la foto y los bullets. Misma
   dimensión que el base, hereda borde y radius. overflow:hidden para
   que la foto y el panel queden dentro del marco. */
.bs-card-servicio-num__hover-card {
	position: absolute;
	inset: 0;
	border:        clamp(2px, calc(4 * 100vw / 1920), 5px) solid #12142E;
	border-radius: clamp(20px, calc(40 * 100vw / 1920), 56px);
	overflow: hidden;
	background: #FFFFFF;
}

.bs-card-servicio-num__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Panel blanco con bullets en la parte inferior (dentro de hover-card). */
.bs-card-servicio-num__bullets {
	position: absolute;
	left:   clamp(10px, calc(24 * 100vw / 1920), 32px);
	right:  clamp(10px, calc(24 * 100vw / 1920), 32px);
	bottom: clamp(10px, calc(24 * 100vw / 1920), 32px);
	z-index: 2;
	margin: 0;
	padding: clamp(14px, calc(24 * 100vw / 1920), 32px) clamp(14px, calc(22 * 100vw / 1920), 30px);
	background: #FFFFFF;
	border: clamp(2px, calc(3 * 100vw / 1920), 4px) solid #12142E;
	border-radius: clamp(16px, calc(28 * 100vw / 1920), 36px);
	list-style: none;
}
.bs-card-servicio-num__bullets li {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 400;
	font-size:   clamp(11px, calc(18 * 100vw / 1920), 22px);
	line-height: 1.4;
	color: #12142E;
	text-transform: uppercase;
	padding-left: 1.2em;
	position: relative;
	margin-bottom: 0.35em;
}
.bs-card-servicio-num__bullets li:last-child { margin-bottom: 0; }
.bs-card-servicio-num__bullets li::before {
	content: '●';
	position: absolute;
	left: 0;
	top: 0;
	color: var(--bs-card-bullet, #5A65E7);
	font-size: 1em;
	line-height: 1.4;
}

/* Sticker: hijo del wrapper de hover (no del hover-card) para poder
   asomar fuera del marco de la image card sin verse cortado. Posiciones
   ajustadas a top-right del hover-card. */
.bs-card-servicio-num__sticker {
	position: absolute;
	top:    clamp(-30px, calc(-50 * 100vw / 1920), -16px);
	right:  clamp(-30px, calc(-40 * 100vw / 1920), -10px);
	width:  clamp(70px,  calc(140 * 100vw / 1920), 170px);
	height: auto;
	z-index: 5;
	pointer-events: none;
	user-select: none;
}

/* ---- Variantes por modifier — colores del DS ---- */

.bs-card-servicio-num--yellow {
	--bs-card-bg: #FFE700;
	--num-stroke: #5A65E7;
	--bs-card-bullet: #5A65E7;
	--bs-card-hover-rot: -5.47deg;
}
.bs-card-servicio-num--yellow .bs-card-servicio-num__title {
	color: #5A65E7;
}

.bs-card-servicio-num--blue {
	--bs-card-bg: #5A65E7;
	--num-stroke: #FFFFFF;
	--bs-card-bullet: #FFE700;
	--bs-card-hover-rot: -6.75deg;
}
.bs-card-servicio-num--blue .bs-card-servicio-num__title {
	color: #FFFFFF;
}

.bs-card-servicio-num--lila {
	--bs-card-bg: #9CA3F1;
	--num-stroke: #FFFFFF;
	--bs-card-bullet: #5A65E7;
	--bs-card-hover-rot: -7.68deg;
}
.bs-card-servicio-num--lila .bs-card-servicio-num__title {
	color: #FFFFFF;
}

/* Reduced motion: aparece sin rotación (solo fade). */
@media (prefers-reduced-motion: reduce) {
	.bs-card-servicio-num__hover {
		transition-duration: 0.01s;
	}
	.bs-card-servicio-num:hover .bs-card-servicio-num__hover,
	.bs-card-servicio-num:focus-visible .bs-card-servicio-num__hover,
	.bs-card-servicio-num:focus-within .bs-card-servicio-num__hover {
		transform: rotate(0deg);
	}
}


/* ===== Marquee — colores configurables vía CSS variables ================ */

.bs-marquee__text {
	color: var(--bs-marquee-color, currentColor);
}

.bs-marquee__dot {
	background-color: var(--bs-marquee-dot, currentColor);
}


/* ===== Accesibilidad ===================================================== */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.btn { transition: none; }
	.btn:hover { transform: none; }
}

:focus-visible {
	outline: 3px solid #5A65E7;
	outline-offset: 3px;
}


/* =========================================================================
   ===== MOBILE PASS PROFESIONAL (<768px) =================================
   =========================================================================
   Bloque comprehensive que ataca el patrón general en mobile en vez de
   componente a componente. Reglas ordenadas de más genéricas a más
   específicas. Principio: en mobile TODO va centrado, paddings agresivamente
   reducidos, fuentes en su clamp inferior, grids 2-3 cols → 1 col stacked,
   decoratives ocultos para reducir ruido visual.
   ========================================================================= */

@media (max-width: 767px) {

	/* ---- Container & sección base ---------------------------------------
	   Padding lateral más respirable que clamp inferior actual. */
	.bs-container {
		padding-inline: 20px;
	}

	/* Centrado horizontal global de bloques de texto y headings dentro
	   de secciones. Aplica a todos los <section> y a sus contenedores
	   internos. */
	section .bs-container,
	section .bs-container > div,
	section .bs-container > p,
	section .bs-container > h1,
	section .bs-container > h2,
	section .bs-container > h3,
	section .bs-container > ul,
	section .bs-container > ol {
		text-align: center;
	}

	/* Pills inline-flex se centran solos cuando el padre es text-align
	   center y el inline-flex hereda el comportamiento. */
	section .bs-container .inline-flex,
	section .bs-container > .w-fit {
		margin-inline: auto;
	}


	/* ---- Home hero (.bs-hero) -----------------------------------------
	   Mobile: imagen vertical fullscreen como fondo + overlay oscuro + todo
	   el texto del headline/pretitle/subhead en blanco para legibilidad.
	   La polaroid inline desaparece (la sustituye el bg fullscreen) y el
	   pin de scale-to-fullscreen NO corre en mobile (initHeroScale está
	   gated a >=768px). */
	.bs-hero {
		min-height: 100vh;
		min-height: 100dvh;
	}
	.bs-hero__overlay {
		background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.25) 40%, rgba(0,0,0,0.55) 100%);
	}
	.bs-hero__container {
		padding-top:    96px;
		padding-bottom: 32px;
	}
	.bs-hero__headline {
		font-size:   clamp(34px, 9vw, 52px);
		line-height: 0.92;
		color: #FFFFFF !important;
	}
	/* Sub-spans del headline (estudio creativo, la era de…) también blancos. */
	.bs-hero__headline .text-bs-blue-800,
	.bs-hero__headline > span,
	.bs-hero__headline span span:not(.bs-hero__creadores):not(.bs-hero__polaroid) {
		color: #FFFFFF !important;
	}
	.bs-hero__pretitle-line {
		font-size:   clamp(16px, 4.5vw, 22px);
		color: #FFFFFF !important;
	}
	.bs-hero__subhead {
		font-size:   clamp(16px, 4.5vw, 22px);
		color: #FFFFFF !important;
	}
	/* Polaroid inline oculta — la sustituye el bg vertical. */
	.bs-hero__polaroid {
		display: none !important;
	}
	.bs-hero__creadores {
		font-size: 0.85em;
	}
	/* Flecha de scroll cue: también blanca en mobile sobre la foto. */
	[data-bs-scroll-arrow] a {
		color: #FFFFFF !important;
	}

	/* ---- Quiénes somos -------------------------------------------------
	   Mobile: vídeo centrado SIN escalado (initQuienesScale salta su fase
	   de scale en <768px). El pill "¿Quiénes somos?" se queda absolute
	   centrado arriba. Al hacer scroll, las 3 fichas suben desde abajo
	   con la misma animación de desktop, ocupando hasta 90vh la última
	   (la más visible cuando el stack está completo). */
	.bs-quienes {
		min-height: 100vh;
		min-height: 100dvh;
	}
	.bs-quienes__pill {
		top: clamp(72px, 12vh, 100px) !important;
		left: 50% !important;
		right: auto !important;
		transform: translateX(-50%);
		margin: 0;
	}
	.bs-quienes__video-frame {
		width: 100%;
		max-width: 360px;
		margin-inline: auto;
	}

	/* Cards: pin-stack (igual que desktop). Anchored bottom: 0, suben con
	   yPercent. Heights pensadas para que la última (01, topmost) ocupe
	   exactamente 90vh; 02 ocupa 95vh y 03 ocupa 100vh → cada una asoma
	   5vh por encima de la siguiente cuando el stack está montado. */
	.bs-quienes-cards__card {
		border-radius: clamp(24px, 8vw, 40px) clamp(24px, 8vw, 40px) 0 0 !important;
		padding: 32px 20px;
	}
	.bs-quienes-cards__card[data-bs-quienes-card="0"] { height: 100vh !important; height: 100dvh !important; }
	.bs-quienes-cards__card[data-bs-quienes-card="1"] { height: 95vh !important; height: 95dvh !important; }
	.bs-quienes-cards__card[data-bs-quienes-card="2"] { height: 90vh !important; height: 90dvh !important; }

	/* Dentro de cada card: flex column, título arriba + imagen debajo
	   (simplificación mobile — los tres layouts horizontales del desktop
	   no caben bien en pantallas estrechas). */
	.bs-quienes-cards__card .bs-container {
		flex-direction: column !important;
		height: 100% !important;
		justify-content: center !important;
		align-items: center !important;
		gap: 28px !important;
		padding-inline: 8px;
	}
	.bs-quienes-cards__text {
		order: 1;
		max-width: 100%;
		font-size: clamp(22px, 6vw, 30px);
		line-height: 1.15;
		text-align: center;
	}
	.bs-quienes-cards__image {
		order: 2;
		width: 100%;
		max-width: 320px;
		aspect-ratio: 793 / 451;
		border-radius: clamp(16px, 5vw, 28px);
	}
	.bs-quienes-cards__num {
		display: none;
	}


	/* ---- Brutal Studios — Team -----------------------------------------
	   Mismo layout que desktop pero a escala mobile: las dos fotos lado a
	   lado pegadas al bottom (con overlap), y los nombres absolute encima
	   de las fotos — uno a la izquierda y otro a la derecha — con tipografía
	   más pequeña. La sección necesita min-height porque nombres y fotos
	   son absolute (no aportan altura al flujo). */
	.bs-bs-team {
		padding-bottom: 0 !important;
		min-height: clamp(340px, 56vh, 480px) !important;
	}
	.bs-bs-team__name {
		position: absolute !important;
		top: clamp(126px, 32vw, 196px);
		z-index: 2;
		font-size: clamp(18px, 6vw, 30px) !important;
		margin: 0;
	}
	.bs-bs-team__name--left {
		left: clamp(12px, 4vw, 28px);
		right: auto;
		text-align: left !important;
	}
	.bs-bs-team__name--right {
		right: clamp(12px, 4vw, 28px);
		left: auto;
		text-align: right !important;
	}
	.bs-bs-team__photos {
		position: absolute !important;
		bottom: 0;
		left: 50% !important;
		transform: translateX(-50%) !important;
		flex-direction: row !important;
		align-items: flex-end !important;
		justify-content: center !important;
		gap: 0 !important;
		margin-top: 0 !important;
	}
	.bs-bs-team__photo-wrap {
		width: 47vw;
		max-width: 270px;
	}
	/* Julio un poco DETRÁS de Pablo con overlap (como desktop). */
	.bs-bs-team__photo-wrap--julio {
		margin-left: clamp(-60px, -9vw, -30px) !important;
	}


	/* ---- Be Brutal — sección colaborar / trabajar ----------------------
	   Grid se stackea via Tailwind grid-cols-1, solo aseguramos centrado. */
	.bs-bb-colaborar,
	.bs-bb-trabajar {
		padding-block: 48px !important;
		text-align: center;
	}
	.bs-bb-colaborar h2,
	.bs-bb-trabajar h2 {
		font-size: clamp(34px, 10vw, 56px) !important;
	}
	.bs-bb-colaborar p,
	.bs-bb-trabajar p {
		text-align: center;
		font-size: clamp(15px, 4.2vw, 18px) !important;
	}
	.bs-bb-photo {
		max-width: 480px;
		margin: 0 auto;
	}


	/* ---- Servicios brutales (cards 01/02/03) ---------------------------
	   Grid → 1 col centered. Las cards quedan demasiado anchas; les ponemos
	   max-width para que mantengan proporciones cómodas. El hover/flip de
	   las cards solo aplica si hay puntero fino, así que en mobile el
	   estado por defecto es el frente (color + número + título). */
	.bs-servicios-lista__cards {
		grid-template-columns: 1fr !important;
		gap: 24px !important;
		justify-items: center;
	}
	.bs-card-servicio-num {
		max-width: 380px;
	}
	.bs-servicios-lista__title {
		font-size: clamp(40px, 12vw, 72px) !important;
		text-align: center;
	}


	/* ---- Servicios HOME (cards alternativas con sticker) -------------- */
	.bs-card-servicio {
		max-width: 380px;
		margin-inline: auto !important;
	}


	/* ---- Proyectos HOME (carrusel) -------------------------------------
	   Mobile: scroll horizontal nativo, info de cada card SIEMPRE visible
	   en flujo normal debajo de la imagen (no absolute → no se corta por
	   el implícito overflow-y del contenedor scroll-x). */
	.bs-proyectos {
		min-height: auto;
		height: auto;
		padding-bottom: 80px;
	}
	.bs-card-proyecto {
		display: flex;
		flex-direction: column;
	}
	.bs-card-proyecto__info {
		position: static !important;
		top: auto !important;
		margin-top: 16px;
		opacity: 1 !important;
		transform: none !important;
	}
	.bs-card-proyecto__meta {
		font-size: 16px;
		line-height: 1.2;
	}
	.bs-card-proyecto__name {
		font-size: clamp(22px, 5.5vw, 28px);
	}


	/* ---- Proyectos (archive) -------------------------------------------
	   Cards en grid → 1 col centered. */
	.bs-proyectos-grid {
		grid-template-columns: 1fr !important;
		gap: 24px !important;
	}
	.bs-proyectos-filters {
		flex-wrap: wrap;
		justify-content: center;
	}


	/* ---- Contacto — sección formulario ---------------------------------
	   Título "CONSTRUYAMOS ALGO BRUTAL !!" tiene foto embedded entre
	   palabras. En mobile la foto se reduce y el título centra. */
	.bs-co-title {
		font-size: clamp(34px, 11vw, 56px) !important;
		text-align: center;
	}
	.bs-co-title__line--with-photo {
		justify-content: center;
	}
	.bs-co-title__photo {
		height: clamp(36px, 8vw, 56px);
	}
	.bs-co-form-aside__smiley {
		display: none; /* decorativo, no es esencial en mobile */
	}


	/* ---- CTA banner ----------------------------------------------------
	   Centrar título + botón, reducir padding vertical. */
	.bs-cta-banner {
		padding-block: 48px !important;
	}
	.bs-cta-banner__title {
		font-size: clamp(32px, 10vw, 56px) !important;
		text-align: center;
	}


	/* ---- Marquee / banners decorativos ---------------------------------
	   Reducir velocidad de scroll en mobile (más legibilidad). */
	.bs-marquee__track {
		animation-duration: 30s;
	}


	/* ---- Botones ------------------------------------------------------- */
	.btn {
		font-size: clamp(14px, 4vw, 17px);
		padding: 12px 20px;
	}
	.btn__icon {
		width: clamp(28px, 7vw, 36px);
		height: clamp(28px, 7vw, 36px);
	}


	/* ---- Imágenes globales — protección de aspect ratio ----------------
	   Cualquier <img> dentro de secciones nunca se deforma — el display
	   block + height auto preserva la proporción aunque CSS le aplique
	   width. */
	section img:not([class*="absolute"]) {
		max-width: 100%;
		height: auto;
		display: block;
	}
}


/* =========================================================================
   ===== TABLET (768-1023) — ajustes intermedios ===========================
   ========================================================================= */

@media (min-width: 768px) and (max-width: 1023px) {
	.bs-hero__headline {
		font-size: clamp(52px, 8vw, 90px);
	}
	.bs-page-hero__title {
		font-size: clamp(54px, 7.5vw, 84px);
	}
	.bs-page-hero--text-md .bs-page-hero__title {
		font-size: clamp(46px, 6.5vw, 72px);
	}
}