/*
Theme Name:Fearless 2025
Author:Paula Villanueva
Author URI:http://www.paulavillanueva.cl
*/
/* ===================== MENÚ FIJO ===================== */
.fx-nav{
  position: fixed !important; z-index: 2147483647;
  top: 14px; left: 50%; transform: translateX(-50%);
  width: min(96vw, 1280px); height: 60px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 16px; border-radius: 12px;
  background: transparent;
  color: var(--nav-ink, #fff);
  opacity: var(--nav-alpha, 0);
  transition: color .18s linear, opacity .18s linear;
}
.fx-nav a{ color: currentColor; text-decoration:none; font-weight:800; padding:.35rem .5rem; }
.fx-left{  justify-self:start; }
.fx-brand{ justify-self:center; }
.fx-right{ justify-self:end; }
section[id], .fx-anchor{ scroll-margin-top: 80px; }
h1 p{
	margin:0;
}
html {
	--mobile-scale: 1.4;
	--mobile-padding-offset: 0.37;
}

body {
	--swatch-1: rgba(0, 0, 0, 0.85);
	--swatch-2: rgba(0, 0, 0, 0.75);
	--swatch-3: rgba(0, 0, 0, 0.6);
	--swatch-4: rgba(0, 0, 0, 0.4);
	--swatch-5: rgba(0, 0, 0, 0.25);
	background-color: #000000;
}

body.mobile {
}

a:active,
.linked:active,
.zoomable::part(media):active {
	opacity: 0.7;
}

.page a.active {
	color: #ff0000;
}

sub {
	position: relative;
	vertical-align: baseline;
	top: 0.3em;
}

sup {
	position: relative;
	vertical-align: baseline;
	top: -0.4em;
}

.small-caps {
	font-variant: small-caps;
	text-transform: lowercase;
}

ol {
	margin: 0;
	padding: 0 0 0 2.5em;
	list-style-type: decimal-leading-zero;
}

ul {
	margin: 0;
	padding: 0 0 0 2.0em;
}

ul.lineated {
	margin: 0;
	padding: 0;
	list-style-type: none;
	margin: 0 0 0 3em;
	text-indent: -3em;
}

blockquote {
	margin: 0;
	padding: 0 0 0 2em;
}

hr {
	background: rgba(0, 0, 0, 0.6);
	border: 0;
	height: 1px;
	display: block;
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}

.content {
	border-color: rgba(0,0,0,.85);
}

bodycopy {
	font-size: 1.2rem;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.85);
	font-family: "Diatype Variable";
	font-style: normal;
	line-height: 1.2;
	letter-spacing: 0;
	display: block;
	font-variation-settings: 'slnt' 0, 'MONO' 0;
}

bodycopy a {
	color: rgba(0, 0, 0, 0.85);
	border-bottom: 0px solid rgba(127, 127, 127, 0.2);
	text-decoration: underline;
}

bodycopy a:hover {
}

h1 {
	font-family: "Diatype Variable";
	font-style: normal;
	font-weight: 400;
	margin: 0;
	font-size: 4.5rem;
	line-height: 1;
	color: rgba(0, 0, 0, 0.85);
	letter-spacing: -0.02em;
	font-variation-settings: 'slnt' 0, 'MONO' 0;
}

h1 a {
	color: rgba(0, 0, 0, 0.85);
	text-decoration: none;
}

h1 a:hover {
}

h2 {
	font-family: "Diatype Variable";
	font-style: normal;
	font-weight: 440;
	margin: 0;
	color: rgba(0, 0, 0, 0.85);
	font-size: 3.8rem;
	line-height: 1.1;
	letter-spacing: 0em;
	font-variation-settings: 'slnt' 0, 'MONO' 0;
}

h2 a {
	color: rgba(0, 0, 0, 0.85);
	text-decoration: none;
}

h2 a:hover {
}

.caption {
	font-size: 1.1rem;
	font-weight: 500;
	color: rgba(0, 0, 0, 0.85);
	font-family: "Diatype Variable";
	font-style: normal;
	line-height: 1.2;
	letter-spacing: 0em;
	display: block;
	font-variation-settings: 'slnt' 0, 'MONO' 0;
}

.caption a {
	text-decoration: underline;
	color: rgba(0, 0, 0, 0.85);
}

.caption a:hover {
}

media-item .caption {
	margin-top: .5em;
}

gallery-grid .caption,
gallery-columnized .caption,
gallery-justify .caption {
	margin-bottom: 2em;
}

[thumbnail-index] .caption {
	text-align: center;
}

[thumbnail-index] .caption .tags {
	margin-top: 0.25em;
}

.page {
	justify-content: flex-start;
}

.page-content {
	padding: 0rem;
	text-align: left;
}

.mobile [id] .page-layout {
	max-width: 100%;
}

.page-layout {
	align-items: flex-start;
	max-width: 100%;
}

media-item::part(media) {
	border: 0;
	padding: 0;
}

.quick-view {
	height: 100%;
	width: 100%;
	padding: 3rem;
	margin-top: auto;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: auto;
}

.quick-view-background {
	background-color: #ffffff;
}

.quick-view .caption {
	color: rgba(255, 255, 255, 1.0);
	padding: 20px 0;
	text-align: center;
	transition: 100ms opacity ease-in-out;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}

.quick-view .caption-background {
	padding: 0.5rem 1rem;
	display: inline-block;
	background: rgba(0, 0, 0, 0.5);
	border-radius: .5rem;
	text-align: left;
	max-width: 50rem;
}

.mobile .quick-view {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 10px;
}

.mobile .quick-view .caption {
	padding: 10px 0;
}

.mobile .quick-view .caption-background {
	max-width: 100vw;
}

::part(slideshow-nav) {
	--button-size: 30px;
	--button-inset: 20px;
	--button-icon-color: rgba(255, 255, 255, 0.9);
	--button-icon-stroke-width: 1.5px;
	--button-icon-stroke-linecap: none;
	--button-background-color: rgba(87, 87, 87, 0.35);
	--button-background-radius: 50%;
	--button-active-opacity: 0.7;
}

gallery-slideshow::part(slideshow-nav) {
	--button-inset: 15px;
}

.quick-view::part(slideshow-nav) {
}

.wallpaper-slideshow::part(slideshow-nav) {
}

.mobile ::part(slideshow-nav) {
	--button-inset: 10px;
}

.mobile .quick-view::part(slideshow-nav) {
	--button-inset: 25px;
}

shop-product {
	font-size: 1.2rem;
	max-width: 22rem;
	font-family: "Diatype Variable";
	font-style: normal;
	font-weight: 400;
	font-variation-settings: 'slnt' 0, 'MONO' 0;
	letter-spacing: 0em;
	margin-bottom: 1em;
}

shop-product::part(price) {
	color: rgba(0, 0, 0, 0.75);
	line-height: 1.1;
	margin-bottom: 0.5em;
}

shop-product::part(dropdown) {
	width: 100%;
	color: rgba(0, 0, 0, 0.85);
	border: 1px solid rgba(0, 0, 0, 0.2);
	background-color: rgba(255, 255, 255, 0.0);
	background-image: url(https://static.cargo.site/assets/images/select-line-arrows.svg);
	background-repeat: no-repeat;
	background-position: top 0em right .1em;
	line-height: 1.2;
	padding: 0.58em 2em 0.55em 0.9em;
	border-radius: 10em;
	margin-bottom: 0.5em;
}

shop-product::part(button) {
	background: rgba(0, 0, 0, 0.15);
	color: rgba(0, 0, 0, 0.75);
	text-align: left;
	line-height: normal;
	padding: 0.5em 1em;
	cursor: pointer;
	border-radius: 10em;
}

shop-product::part(button):active {
	opacity: .7;
}

audio-player {
	--text-color: rgba(0, 0, 0, 0.85);
	--text-padding: 0 1.2em 0 1.0em;
	--background-color: rgba(255, 255, 255, 0);
	--buffer-background-color: rgba(0, 0, 0, 0.03);
	--progress-background-color: rgba(0, 0, 0, 0.075);
	--border-lines: 1px solid rgba(0, 0, 0, 0.2);
	font-size: 1.2rem;
	width: 32rem;
	height: 2.75em;
	font-family: "Diatype Variable";
	font-style: normal;
	font-weight: 400;
	font-variation-settings: 'slnt' 0, 'MONO' 0;
	line-height: normal;
	letter-spacing: 0em;
	margin-bottom: 0.5em;
	border-radius: 10em;
}

audio-player::part(button) {
	--icon-color: rgba(0, 0, 0, 0.85);
	--icon-size: 32%;
	--play-text: '';
	--pause-text: '';
	width: 3.15em;
	display: inline-flex;
	justify-content: center;
	cursor: pointer;
}

audio-player::part(play-icon) {
	padding-left: 0.6em;
}

audio-player::part(pause-icon) {
	padding-left: 0.4em;
}

audio-player::part(progress-indicator) {
	border-right: 1px solid rgba(0, 0, 0, 0);
	height: 100%;
	cursor: ew-resize;
}

audio-player::part(separator) {
	border-right: var(--border-lines);
}

body.mobile audio-player {
	max-width: 100%;
}

/* ===========================
   1) Registrar las fuentes
   =========================== */

/* Héroe: Thunder Medium LC (WOFF2) */
@font-face{
    font-family:'thundermedium_lc';
    src:url('fonts/thunder-mediumlc-webfont.woff2') format('woff2'),
        url('fonts/thunder-mediumlc-webfont.woff') format('woff');
    font-weight:normal;
    font-style:normal;
	font-display:swap;
}
/* ===========================
   2) Variables de conveniencia
   =========================== */
:root{
  --nav-font:'Rubik',sans-serif;
  --hero-font:'thundermedium_lc';
}

/* ===========================
   3) Aplicación por zonas
   =========================== */

/* MENÚ FIJO: usa Rubik Regular */
.fx-nav,
.fx-nav * ,
.fx-nav a{
  font-family: var(--nav-font) !important;
  font-weight: 400;           /* Rubik Regular */
  letter-spacing: 0.01em;     /* micro tracking opcional */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.fx-nav{ font-size: clamp(14px, 1.4vw, 18px); }  /* tamaño cómodo del menú */

/* HÉROE (FEARLESS): usa Thunder Medium LC */
.word{
  font-family: var(--hero-font) !important;
  font-weight: normal;           /* acorde al archivo “Medium” */
  letter-spacing: 0.005em;    /* ajusta a gusto (puede ser 0 o más negativo) */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ========= OVERLAY (tarjetas) ========= */
/* (Déjalo si usas las 2 tarjetas blancas; si no, puedes borrar todo este bloque) */
:root{
  --card1-top: 39%; --card1-left: 55%; --card1-align: -50%;
  --card1-w: min(108vw, 1565px); --card1-padY: clamp(80px, 1.8vw, 172px); --card1-padX: clamp(20px, 2.6vw, 172px);
  --t1-x: 0px; --t1-y: 14px;

  --card2-top: 67%; --card2-left: -1%; --card2-align: 0%;
  --card2-w: min(58vw, 940px); --card2-padY: clamp(80px, 1.8vw, 172px); --card2-padX: clamp(20px, 2.6vw, 38px);
  --t2-x: 0px; --t2-y: 13px;

  --card-font: clamp(46px, 7.6vw, 160px);
}
#fx-fixed-overlay{
  position: fixed; inset: 0; z-index: 2147483646; pointer-events: none;
}
#fx-fixed-overlay .fx-card{
  position: absolute; box-sizing: border-box; background:#fff; color:#000; box-shadow: 0 10px 30px rgba(0,0,0,.25);
  white-space: nowrap; font-family:'thundermedium_lc';
  font-weight: 500; font-size: var(--card-font) !important; line-height: 1 !important;
  padding-block: var(--padY); padding-inline: var(--padX); opacity: 0;
  transform: translate(calc(var(--align) + var(--dx, 0vw)), -50%); will-change: transform, opacity;
}
#fx-fixed-overlay .fx-t{
  position: absolute; left: 50%; top: 50%;
  transform: translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, 0px)));
  display: inline-block;
}
#fx-fixed-overlay .fx-card--1{ top: var(--card1-top); left: var(--card1-left); width: var(--card1-w); --align: var(--card1-align); --padY: var(--card1-padY); --padX: var(--card1-padX); }
#fx-fixed-overlay .fx-card--1 .fx-t{ --tx: var(--t1-x); --ty: var(--t1-y); }
#fx-fixed-overlay .fx-card--2{ top: var(--card2-top); left: var(--card2-left); width: var(--card2-w); --align: var(--card2-align); --padY: var(--card2-padY); --padX: var(--card2-padX); }
#fx-fixed-overlay .fx-card--2 .fx-t{ --tx: var(--t2-x); --ty: var(--t2-y); }
.fx-t{text-transform:uppercase;}
/* TACHADO SCROLL-SYNC — tarjeta 2 (seguro) */
#fx-fixed-overlay .fx-card--2 .fx-t::after{
  content:"";
  position:absolute;
  left:0; top:50%;
  transform: translateY(-50%);
  height:.14em;
  background:#000;
  width: calc(var(--strike-p, 0) * 100%); /* 0→100% vía JS */
  pointer-events:none;
}


/* === SECCIÓN ROSA pinneada + CREATIVITY BAND (v6) === */

/* =========================
   FEARLESS — CSS LIMPIO
   ========================= */

/* ===== CONFIG DEL PIN (#message) ===== */
#message{
  /* recorrido total de la sección “pinneada” */
  --pin-scroll: 660vh;

  /* franja/imagen */
  --band-top: 60%;
  --band-shift: 0vh;                 /* mueve la franja sin pelear con top */
  --band-width: 110vw;               /* overscan para evitar bordes */
  --band-h0: 11vh;                   /* alto inicial franja */
  --band-h1: 102vh;                  /* alto final (un pelín más de 100) */
  --band-start-x: -120vw;            /* desde dónde entra */
  --band-end-x: 0vw;                 /* centro */

  /* tiempos (0–1 dentro del pin) */
  --t-enter-a: .12;
  --t-enter-b: .25;
  --t-grow-a:  .30;
  --t-grow-b:  .60;
  --t-hold-a:  .60;
  --t-hold-b:  .82;

  /* desactiva cualquier fade de la imagen (usamos cortina/piso) */
  --t-fade-a: 2;
  --t-fade-b: 2.1;

  /* cortina (overlay) y piso (negro bajo la franja) */
  --wipe-a:  .86;   /* empieza a entrar la cortina (derecha→izquierda) */
  --wipe-b:  .95;   /* la cortina ya cubre por completo */
  --wipe-f:  .985;  /* pequeño fade-out al final si quieres */

  --floor-a: .93;   /* el piso negro aparece antes que retiremos cortina */
  --floor-b: .97;

  /* copy sobre la cortina (si lo usas) */
  --copy-floor-a: .88;  /* empieza a verse cuando el piso casi cubre */
  --copy-floor-b: .98;  /* a tope */
  --copy-y0: 18;        /* offset inicial en px para flotado */
}

/* ===== LAYOUT DEL PIN ===== */
#message{ min-height:0 !important; height: var(--pin-scroll) !important; }
#message .fx-msg__pin{ position: sticky; top:0; height:100vh; overflow:clip; isolation:isolate; }
#message .fx-msg__inner{ position:absolute; inset:0; }

/* ===== FRANJA/IMAGEN ===== */
/* ===== FRANJA/IMAGEN ===== */
#fx-crea-band{
  position:absolute; left:50%; top: var(--band-top);
  transform: translate(-50%, calc(-50% + var(--band-shift)));
  width: var(--band-width);
  pointer-events:none; z-index:6;
  visibility: visible !important;   /* ← clave */
}

/* extra por si quedó rastro de opacidad en algún build viejo */
#fx-crea-band__bar{ opacity: 1 !important; }

/* --- ahora la franja es BLANCA sólida; la imagen va en una capa interna --- */
#fx-crea-band__bar{
  position: relative;
  width: 100%;
  height: var(--band-h0);
  background: #fff !important;                 /* ← franja blanca 100% */
  transform: translate3d(var(--band-x, 0), 0, 0);
  will-change: transform, height;
  overflow: hidden;
}

/* capa de imagen, oculta al inicio (se hace 0→1 por JS) */
#fx-crea-band__bar .fx-band-img{
  position: absolute; inset: 0;
  background: var(--band-img, none) center/cover no-repeat;
  opacity: var(--img-o, 0);
  will-change: opacity;
  pointer-events: none;
}

/* mata restos muy viejos */
#crea-band, .crea-band, body > #fx-crea-band{ display:none !important; }

/* ===== COPY DURANTE EL HOLD (si aún lo usas) ===== */
#fx-hold-copy{
  position:absolute; inset:0; display:grid;
  grid-template-columns:1fr 1fr; align-items:center;
  gap: clamp(16px, 4vw, 64px);
  padding: clamp(32px, 8vh, 140px) clamp(24px, 6vw, 80px);
  pointer-events:none; z-index:7;
  opacity: var(--hold-o, 0);
}
#fx-hold-copy .hold{
  font-family:'thundermedium_lc';
  font-weight:normal; font-size: clamp(28px, 4.2vw, 96px);
  line-height:.96; color:#fff; text-transform:lowercase; letter-spacing:.01em;
}
#fx-hold-copy .hold--left{ text-align:left; width:60%;}
#fx-hold-copy .hold--right{ text-align:right; width:60%; margin-left:auto;}


/* ===== PISO Y CORTINA NEGRA (dentro del pin) ===== */
/* Piso (debajo de franja/copy; encima del rosa) */
#message .fx-msg__pin::before{
  content:""; position:absolute; inset:0; background:#000;
  z-index:5; pointer-events:none; opacity: var(--floor-o, 0);
  will-change: opacity;
}
/* Cortina (encima de todo) — overscan adaptativo */
:root{
  /* valor base; JS lo ajusta según devicePixelRatio */
  --overscan: 4px;
}
/* Cortina NEGRA a pantalla completa (no se clipea por el pin) */
#message .fx-msg__pin::after{
  content:"";
  position: fixed;                 /* ← deja de depender del box del pin */
  inset: -4px;                     /* overscan en los 4 lados */
  background:#000;
  z-index: 9;                      /* sigue debajo de #fx-curtain-headline (z:10) */
  pointer-events:none;
  opacity: var(--wipe-o, 1);

  /* Se abre de derecha→izquierda usando la MISMA variable --wipe-p */
  clip-path: inset(0 0 0 calc((1 - var(--wipe-p, 0)) * 100%));
  -webkit-clip-path: inset(0 0 0 calc((1 - var(--wipe-p, 0)) * 100%));

  will-change: clip-path, opacity;
  backface-visibility: hidden;
}

/* ===== COPY SOBRE LA CORTINA (opcional) ===== */
#fx-curtain-copy{
  position:absolute; inset:0; display:grid;
  grid-template-columns:1fr 1fr; align-items:center;
  gap: clamp(16px, 4vw, 64px);
  padding: clamp(32px, 8vh, 140px) clamp(24px, 6vw, 80px);
  pointer-events:none; z-index:10;
  opacity: var(--copy-o, 0);
  transform: translateY(var(--copy-y, 18px));
  will-change: opacity, transform;
}
#fx-curtain-copy .hold{
  font-family:'thundermedium_lc';
  font-weight:normal; font-size: clamp(28px, 5.2vw, 96px);
  line-height:.96; color:#fff; text-transform:lowercase; letter-spacing:.01em;
}
#fx-curtain-copy .hold--left{ text-align:left; }
#fx-curtain-copy .hold--right{ text-align:right; }

/* ===== SECCIÓN NEGRA POST PIN ===== */
.fx-section--black{
  background:#000; color:#fff;
  min-height:140vh; display:flex; align-items:center; justify-content:center;
  width:100vw; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw;
}
.fx-section--black .inner{
  width:100%; max-width:min(92vw, 1280px);
  margin:0 auto; padding: clamp(48px, 10vh, 140px) 24px;
}
.fx-black-copy{
  margin:0; text-align:center;
  font-family:'thundermedium_lc';
  font-weight:normal; font-size: clamp(40px, 8.6vw, 180px);
  line-height:.9; letter-spacing:.01em;
  opacity:0; transform: translateY(10px);
  transition: opacity .35s ease-out, transform .35s ease-out;
}
.fx-black-copy.is-visible{ opacity:1; transform:none; }

/* ===== RESETS MÍNIMOS ===== */
html, body{ margin:0; padding:0; }

/* ===== Headline sobre la cortina ===== */
#fx-curtain-headline{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  padding: clamp(48px, 10vh, 140px) clamp(24px, 6vw, 80px);
  pointer-events:none;
  z-index: 10;                    /* Cortina está en 9 → esto encima */
  opacity: var(--hl-o, 0);
  transform: translateY(var(--hl-y, 12px));
  transition: opacity .001s linear, transform .001s linear; /* animamos por JS */
}

#fx-curtain-headline .hl{
  margin:0;
  max-width: min(92vw, 1400px);
  text-align:center;
  font-family:'thundermedium_lc';
  font-weight:normal;
  font-size: clamp(40px, 6.5vw, 180px);
  line-height: 0.9;
  letter-spacing: 0.01em;
  color:#fff;
  text-transform: uppercase;
}

/* Perillas del fade del titular (línea de tiempo del pin 0–1) */
#message{
  --hl-a: .945;   /* empieza a aparecer */
  --hl-b: .995;   /* 100% visible */
  --hl-y0: 14;    /* desplazamiento inicial (px) hacia abajo */
}

#message{ --band-h1: 104vh !important; --band-top: 50% !important; }
#fx-crea-band{ width: 112vw !important; }
#message .fx-msg__pin{ overflow: clip !important; }

/* Consistencia tipografía menú (por si alguna página no la tenía cargada) */
:root{ --nav-font:'Rubik',sans-serif; }
.fx-nav, .fx-nav *, .fx-nav a{ font-family: var(--nav-font) !important; font-weight: 400 !important; letter-spacing: .01em; }

/* Tachar link de la página actual */
.fx-nav a.current-menu-item{
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-underline-offset: .25em;
}
.fx-nav li{
	list-style:none;
}
/* ============ Thunder HC (TTF) ============ */
@font-face{
    font-family:'thunderregular';
    src:url('fonts/thunder-hc-webfont.woff2') format('woff2'),
        url('fonts/thunder-hc-webfont.woff') format('woff');
    font-weight:normal;
    font-style:normal;
	font-display:swap;
}
/* ============ Fondo fijo para páginas internas ============ */
/* El JS crea #fx-pg-bg y le pone la imagen. El blur se controla con
   variables CSS (y opcionalmente con la clase .has-cta-blur). */
#fx-pg-bg{
  position: fixed; inset: 0; z-index: 0;
  background: center var(--bg-y, 50%) / cover no-repeat #000;
  pointer-events: none;
  filter: var(--bg-filter, none);
  transform: scale(var(--bg-scale, 1));
  transition: filter .25s ease, transform .25s ease;
  will-change: filter, transform;
}
/* Fallback por clase (si tu JS la usa, solo define las variables) */
.has-cta-blur #fx-pg-bg{
  --bg-filter: blur(7px) brightness(.98) saturate(1.02);
  --bg-scale: 1.015;
}

/* ============ CTA Companies (overlay centrado) — BLOQUE ÚNICO ============ */
/* Perillas rápidas (ajústalas a gusto) */
#fx-comp-cta{
  /* H1 */
  --cta-h1-lh: 0.87;                     /* interlineado del titular */
  --strike-thickness: .14em;             /* grosor de la línea del tachado */
  --strike-y: 52%;                       /* altura del tachado (0–100%) */

  /* Stickers (tipografía + tamaños) */
  --sticker-ff:'Rubik',sans-serif;;
  --sticker-fw: 500;                     /* 300/400/500/700 */
  --sticker-fs-min: 9px;
  --sticker-fs-vw:  1.8vw;
  --sticker-fs-max: 30px;

  --sticker-padY-min: 16px;
  --sticker-padY-vh:  2.4vh;
  --sticker-padY-max: 26px;

  --sticker-padX-min: 28px;
  --sticker-padX-vw:  3.6vw;
  --sticker-padX-max: 48px;

  --sticker-gap-min: 14px;
  --sticker-gap-vw:  1.8vw;
  --sticker-gap-max: 24px;

  --sticker-hover-scale: 1.09;          /* efecto “grow” al hover/focus */
}

/* Wrapper del CTA centrado y clickeable */
#fx-comp-cta{
  position: fixed; inset: 0; z-index: 9;
  display: grid; place-items: center;
  pointer-events: none;                  /* el wrapper no bloquea interacción */
}
#fx-comp-cta .inner{
  pointer-events: auto;                  /* el contenido sí es clickable */
  max-width: min(1400px, 94vw);
  margin: 0 auto; text-align: center;
  padding: clamp(12px, 2.8vh, 28px);
}

/* Titular con Thunder HC (súper grande) */
#fx-comp-cta h1{
  margin: 0 0 clamp(22px, 3.2vh, 36px);
  font-family:'thunderregular' !important;
  font-weight:normal !important;
  font-size: clamp(48px, 8.6vw, 148px) !important;
  line-height: var(--cta-h1-lh) !important;
  letter-spacing: .01em;
  color: #fff;
  text-shadow: 0 12px 38px rgba(0,0,0,.36);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Tachado ULTRA opaco animado (sin opacidad rara) */
#fx-comp-cta h1 strong{
  position: relative;
  display: inline-block;
  white-space: nowrap;
  text-decoration: none !important;      /* neutraliza <s> */
}
#fx-comp-cta h1 strong::after{
  content:"";
  position:absolute;
  left:0; top:var(--strike-y);
  transform: translateY(-50%);
  height: var(--strike-thickness);
  width: 0%;
  background:#fff;                       /* 100% opaco */
  pointer-events:none;
  transition: width .25s ease;
}
html.has-cta-blur #fx-comp-cta h1 strong::after,
body.has-cta-blur #fx-comp-cta h1 strong::after{
  width: 100%;
}

/* Fila de stickers */
#fx-comp-cta .fx-stickers{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap: clamp(var(--sticker-gap-min), var(--sticker-gap-vw), var(--sticker-gap-max));
}

/* Stickers cuadrados, sin “empalmes”, con tipografía Rubik */
#fx-comp-cta .fx-sticker{
  font-family: var(--sticker-ff) !important;
  font-weight: var(--sticker-fw) !important;
  font-size: clamp(var(--sticker-fs-min), var(--sticker-fs-vw), var(--sticker-fs-max)) !important;
  line-height: 1;
  text-decoration: none;
  text-transform:lowercase;
  padding: clamp(var(--sticker-padY-min), var(--sticker-padY-vh), var(--sticker-padY-max))
           clamp(var(--sticker-padX-min), var(--sticker-padX-vw), var(--sticker-padX-max));
  background:#ffa3cb; color:#000;
  border: none; border-radius: 0;        /* sin bordes redondeados */
  box-shadow: 0 12px 22px rgba(0,0,0,.35);

  transform: translateZ(0) scale(1);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
#fx-comp-cta .fx-sticker:hover,
#fx-comp-cta .fx-sticker:focus{
  transform: scale(var(--sticker-hover-scale));
  box-shadow: 0 16px 26px rgba(0,0,0,.38);
  filter: saturate(1.06);
}
/* =========================
   CTA genérico (Companies + Startups)
   ========================= */

/* Perillas (mismos valores para ambas páginas; cámbialos si quieres
   que Startups tenga otros tamaños: duplica este bloque por id) */
#fx-comp-cta,
#fx-start-cta{
  /* H1 */
  --cta-h1-lh: 0.87;
  --strike-thickness: .14em;
  --strike-y: 52%;

  /* Stickers */
  --sticker-ff:'Rubik',sans-serif;
  --sticker-fw: 400;
  --sticker-fs-min: 9px;
  --sticker-fs-vw:  1.8vw;
  --sticker-fs-max: 30px;

  --sticker-padY-min: 16px;
  --sticker-padY-vh:  2.4vh;
  --sticker-padY-max: 26px;

  --sticker-padX-min: 28px;
  --sticker-padX-vw:  3.6vw;
  --sticker-padX-max: 48px;

  --sticker-gap-min: 14px;
  --sticker-gap-vw:  1.8vw;
  --sticker-gap-max: 24px;

  --sticker-hover-scale: 1.09;
}

/* Wrapper y layout */
#fx-comp-cta, #fx-start-cta{
  position: fixed; inset: 0; z-index: 9;
  display: grid; place-items: center;
  pointer-events: none;
}
#fx-comp-cta .inner, #fx-start-cta .inner{
  pointer-events: auto;
  max-width: min(1400px, 94vw);
  margin: 0 auto; text-align: center;
  padding: clamp(12px, 2.8vh, 28px);
}

/* H1 con Thunder + interlineado */
#fx-comp-cta h1, #fx-start-cta h1{
	margin: 0 0 clamp(22px, 3.2vh, 36px);
	font-family:'thunderregular'; !important;
	font-weight: normal !important;
	font-size: clamp(48px, 8.6vw, 148px) !important;
	line-height: var(--cta-h1-lh) !important;
	letter-spacing: .01em; color:#fff;
	text-shadow: 0 12px 38px rgba(0,0,0,.36);
}

/* Tachado 100% opaco animado (sin opacidad rara) */
#fx-comp-cta h1 strong, #fx-start-cta h1 strong{
  position: relative; display:inline-block; white-space:nowrap;
  text-decoration: none !important;
  font-weight:normal;
}
#fx-comp-cta h1 strong::after, #fx-start-cta h1 strong::after{
  content:""; position:absolute; left:0; top:var(--strike-y);
  transform: translateY(-50%);
  height: var(--strike-thickness); width:0%;
  background:#fff; pointer-events:none;
  transition: width .25s ease;
}
html.has-cta-blur #fx-comp-cta h1 strong::after,
body.has-cta-blur #fx-comp-cta h1 strong::after,
html.has-cta-blur #fx-start-cta h1 strong::after,
body.has-cta-blur #fx-start-cta h1 strong::after{
  width:100%;
}

/* Stickers */
#fx-comp-cta .fx-stickers, #fx-start-cta .fx-stickers{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap: clamp(var(--sticker-gap-min), var(--sticker-gap-vw), var(--sticker-gap-max));
}
#fx-comp-cta .fx-sticker, #fx-start-cta .fx-sticker{
  font-family: var(--sticker-ff) !important;
  font-weight: var(--sticker-fw) !important;
  font-size: clamp(var(--sticker-fs-min), var(--sticker-fs-vw), var(--sticker-fs-max)) !important;
  line-height:1; text-decoration:none;

  padding: clamp(var(--sticker-padY-min), var(--sticker-padY-vh), var(--sticker-padY-max))
           clamp(var(--sticker-padX-min), var(--sticker-padX-vw), var(--sticker-padX-max));
  background:#ffa3cb; color:#000; border:0; border-radius:0;
  box-shadow: 0 12px 22px rgba(0,0,0,.35);

  transform: translateZ(0) scale(1);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
#fx-comp-cta .fx-sticker:hover, #fx-comp-cta .fx-sticker:focus,
#fx-start-cta .fx-sticker:hover, #fx-start-cta .fx-sticker:focus{
  transform: scale(var(--sticker-hover-scale));
  box-shadow: 0 16px 26px rgba(0,0,0,.38);
  filter: saturate(1.06);
}

/* =========================
   STARTUPS — titular en 2 líneas
   ========================= */

/* ancho del contenedor + tamaño/leading del H1 */
#fx-start-cta .inner{
  max-width: min(1760px, 98vw);
}
#fx-start-cta h1{
  font-size: clamp(48px, 8.0vw, 140px) !important;
  line-height: 0.87 !important;
  letter-spacing: 0;
}

/* salto manual solo en desktop */
#fx-start-cta .br-desktop{ display: inline; }

/* “fixed to keep innovating.” va siempre junto */
#fx-start-cta .nowrap{
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
}

/* móviles: libera el salto y permite cortar la frase */
@media (max-width: 700px){
  #fx-start-cta .br-desktop{ display: none; }
  #fx-start-cta .nowrap{ white-space: normal; }
}
/* ===== Callbar unificada (Home + Internas) ===== */
#fx-callbar{
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 2147483646;
  transform: translateY(100%); /* internas: oculta hasta abrir */
  transition: transform .28s ease, opacity .28s ease;
  opacity: 1;
  background: rgba(0,0,0,.86);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255,255,255,.18);
  padding: 10px 12px; /* respiración perimetral */
}
#fx-callbar .wrap{
  max-width: min(1280px, 92vw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr 1fr 1fr auto;
  gap: 14px;
  align-items: center;
}
#fx-callbar .wrap br{
	display:none;
}
#fx-callbar .wrap p, .wpcf7,.wpcf7-form{
	display:contents;
}
#fx-callbar .form-control{
	width:100%;
}
.wpcf7-form-control-wrap{
	display:inline-block;
}

/* —— perillas rápidas ——————————————————— */
#fx-callbar{ --h: 52px; --rad: 12px; --ink: #fff; --ink-dim:#bdbdbd; --field-bg: rgba(255,255,255,.04); }
@media (min-width: 1280px){ #fx-callbar{ --h: 56px; } }

/* Marca (SVG) */
#fx-callbar .brand{
  display:flex; align-items:center; gap:10px; color:var(--ink);
}
#fx-callbar .brand svg,
#fx-callbar .brand img{
  display:block; height: auto;
  width: var(--logo-w, 112px);
}

/* Inputs + botón */
#fx-callbar input,
#fx-callbar button.send{
  height: var(--h); border-radius: var(--rad);
  border: 1px solid rgba(255,255,255,.36);
  background: var(--field-bg);
  color: var(--ink);
  font:400 15px/1.1 'Rubik',sans-serif;
  padding: 0 16px;
  outline: none;
}
#fx-callbar input::placeholder{ color: var(--ink-dim); opacity:.95; }
#fx-callbar input:focus{ border-color: rgba(255,255,255,.6); background: rgba(255,255,255,.06); }

/* Botón Send (sólido) */
#fx-callbar .wpcf7-submit{
  background: #fff; color:#000; border-color:#fff;
  font-weight: 700; padding: 0 22px; cursor: pointer;
}
#fx-callbar .wpcf7-submit:hover, #fx-callbar .wpcf7-submit:focus{
	background:#fff !important;
	border:1px solid #fff !important;
	outline:none;
	color:#000;
	box-shadow:none !important;
}
#fx-callbar button.send:disabled{ opacity:.6; cursor: default; }
.wpcf7-not-valid-tip{
	font-family:'Rubik',serif;
	font-weight:300;
	font-size:12px !important;
	line-height:16px !important;
	color:#c00 !important;
}
.wpcf7-response-output{
	background:none !important;
	border:none !important;
	padding:0 !important;
	margin:0 !important;
	text-align:left;
	font-family:'Rubik',serif;
	font-weight:300;
	color:#fff;
	font-size:12px;
	line-height:16px;
	margin-top:0 !important;
}
.wpcf7-spinner{
	margin:0 !important;
}
/* Botón cerrar (solo internas) */
#fx-callbar .close{
  position: absolute; right: 16px; top: -46px;
  width: 38px; height: 38px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(0,0,0,.85);
  color:#fff; font-size: 22px; line-height: 1; cursor: pointer;
  display: none; /* por defecto oculto (Home no la muestra) */
}

/* Estados: Home visible siempre, Internas al abrir; blur sincronizado */
.fx-callbar--home{ transform: translateY(0) !important; }
.has-callbar #fx-callbar{ transform: translateY(0); }
.has-callbar .close{ display: block; }

/* Compacto en móviles */
@media (max-width: 780px){
  #fx-callbar .wrap{
    grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto;
    gap: 10px;
  }
  #fx-callbar .brand{ grid-column: 1 / -1; }
  #fx-callbar input#f-topic{ grid-column: 1 / -1; }
  #fx-callbar button.send{ grid-column: 2 / -1; }
}

/* (opcional) Si quieres el logo más grande solo en Home */
.fx-callbar--home .brand{ --logo-w: 132px; }

/* Mostrar la X sólo cuando la barra esté abierta (internas) */
.has-callbar #fx-callbar .close{ display:block; }

/* Logo más grande en Home; internas usan el default */
#fx-callbar .brand{ --logo-w: 112px; }
.fx-callbar--home .brand{ --logo-w: 140px; }  /* ajústalo a gusto */

/* Asegura el estilo "sólido" del botón (por si quedó otro estilo anterior) */
#fx-callbar button.send{
  background:#fff !important; color:#000 !important; border-color:#fff !important;
  font-weight:800; padding:0 22px; cursor:pointer;
}

/* Oculta el fallback de texto del logo (evita FEARLESS duplicado) */
#fx-callbar .brand-fallback{ 
  position:absolute; width:1px; height:1px; overflow:hidden; 
  clip:rect(0 0 0 0); white-space:nowrap;
}

/* Asegura el look del botón Send tanto en main como en internas */
#fx-callbar button.send,
#fx-callbar #f-send-home{
  background:#fff !important; color:#000 !important; border-color:#fff !important;
  font-weight:600; padding:0 22px; cursor:pointer;
}

/* Logo size: home más grande, internas default */
#fx-callbar .brand{ --logo-w: 112px; }
.fx-callbar--home .brand{ --logo-w: 140px; } /* sube a 160px si lo quieres más grande */

/* La X sólo aparece cuando la barra modal está abierta (internas) */
.has-callbar #fx-callbar .close{ display:block; }

/* Blur del bg si hay CTA activo o la callbar está abierta */
html.has-cta-blur  #fx-pg-bg,
body.has-cta-blur  #fx-pg-bg,
html.has-callbar   #fx-pg-bg,
body.has-callbar   #fx-pg-bg{
  --bg-filter: blur(7px) brightness(.98) saturate(1.02);
  --bg-scale: 1.015;
}

/* (por si alguna página usa #fx-page-bg en vez de #fx-pg-bg) */
html.has-cta-blur  #fx-page-bg,
body.has-cta-blur  #fx-page-bg,
html.has-callbar   #fx-page-bg,
body.has-callbar   #fx-page-bg{
  filter: blur(7px) brightness(.98) saturate(1.02);
  transform: scale(1.015);
  transition: filter .25s ease, transform .25s ease;
}

/*extras para sección cortina */
#fx-crea-band{ visibility: visible !important; }
#fx-crea-band__bar{ opacity: 1 !important; }

/* ===== KILL-SEAM — máscara fija en los bordes ===== */
html::before,
html::after{
  content:"";
  position: fixed;
  top: -12px;               /* overscan para sub-píxel */
  bottom: -12px;
  width: 12px;              /* puedes bajar a 8px si quieres */
  background: #000;         /* mismo negro de la cortina */
  pointer-events: none;     /* no bloquea el scroll/clicks */
  z-index: 2147483640;      /* sobre el pin, debajo de modales si los tuvieras */
}
html::before{ left: -12px; }
html::after{  right: -12px; }

/* GUTTERS NEGROS FIJOS para matar fugas sub-pixel en los bordes */
body::before,
body::after{
  content:"";
  position: fixed;           /* cubre la ventana, no el pin */
  top: -2px;                 /* overscan */
  bottom: -2px;
  width: 6px;                /* ajusta a 4–8px si hace falta */
  background:#000;
  z-index: 9;                /* debajo del titular (z:10), encima de todo lo demás */
  pointer-events: none;
  transform: translateZ(0);  /* evita seams por compositing */
}
body::before{ left: -2px; }  /* borde izquierdo */
body::after { right: -2px; } /* borde derecho  */

/* caso de tachado */
/* Strike: variables de posición y grosor */
#fx-fixed-overlay .fx-card--2 .fx-t::after{
  content:"";
  position:absolute;
  left:0;
  top: var(--strike-y, 50%);                 /* % de la altura del texto */
  transform: translateY(calc(-50% + var(--strike-dy, 0px)));
  height: var(--strike-thickness, .14em);    /* grosor de la línea */
  background:#000;
  width: calc(var(--strike-p, 0) * 100%);
  pointer-events:none;
}

/* Ajuste fino para la tarjeta 2 (mueve y afina el trazo) */
#fx-fixed-overlay .fx-card--2{
  --strike-y: 42%;          /* súbelo/bájalo: 0% arriba, 100% abajo. Prueba 44–52% */
  --strike-dy: 0px;         /* microdesplazamiento si hace falta: ej. 2px / -2px */
  --strike-thickness: 0.15em;/* grosor del trazo */
}

/* mobile */
/* ==== MOBILE NAV – base: SIEMPRE oculto ==== */
#fx-nav-mobile{ display:none; }

/* ==== MOBILE NAV – se muestra y estiliza solo ≤820px ==== */
@media (max-width:820px){
  /* Perillas */
  :root{
    --mnav-top: 20px;
    --mnav-padY: 12px;
    --mnav-padX: 12px;
    --mnav-logo-h: 47px;
    --mnav-gap: 6px;
    --mnav-links-gap: 1px;
    --mnav-fs-min: 16px;
    --mnav-fs-vw:  4.6vw;
    --mnav-fs-max: 22px;
    --mnav-uppercase: none;     /* uppercase | none */
    --mnav-bg: transparent;     /* p.ej. rgba(0,0,0,.22) */
  }

  /* Oculta nav desktop en mobile */
  .fx-nav{ display:none !important; }

  /* Muestra y posiciona el mobile */
  #fx-nav-mobile{
    display:grid;
    position: fixed; left:0; right:0; top: var(--mnav-top);
    z-index: 2147483647;
    place-items: center;
    padding: var(--mnav-padY) var(--mnav-padX);
    background: var(--mnav-bg);
  }
  #fx-nav-mobile .box{ display:grid; gap: var(--mnav-gap); justify-items:center; }
  #fx-nav-mobile .brand{ display:inline-flex; align-items:center; justify-content:center; }
  #fx-nav-mobile .brand img{ display:block; height: var(--mnav-logo-h); width:auto; }
  #fx-nav-mobile .links{ display:grid; gap: var(--mnav-links-gap); }
  #fx-nav-mobile .links a{
    text-decoration:none; color:#fff; text-align:center;
    font-family:'Rubik',sans-serif;
    text-transform: var(--mnav-uppercase);
    font-size: clamp(var(--mnav-fs-min), var(--mnav-fs-vw), var(--mnav-fs-max));
  }

  /* Empuje para no tapar contenido */
  body{ padding-top: calc(var(--mnav-top) + var(--mnav-logo-h) + var(--mnav-padY)*2 + 10px); }
  section[id], .fx-anchor{ scroll-margin-top: 84px; }

  /* Tachado link activo */
  #fx-nav-mobile a.current-menu-item{
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    text-underline-offset: .25em;
  }
}

/* ===================== HERO (intro) ===================== */
:root{
  --bg:#000; --ink:#fff; --surface:#000;
  --title-size: clamp(160px, 26vw, 740px);
  --title-weight:900;
  --word-target-frac: 0.65;

  /* Posición fina del rectángulo/video sobre EARLES */
  --cover-shift: -18px;
  --cover-vshift: -31px;

  /* Escalas iniciales/objetivo del rectángulo */
  --start-sx: 0.950;
  --start-sy: 0.25;
  --target-sy: 0.83;
  --push-factor: 0.07;

  /* Posición del video dentro del rectángulo */
  --videoPosX: 50%;
  --videoPosY: 50%;

  /* Nudge del wordmark FEARLESS */
  --word-ox: 48px;
  --word-oy: 0px;

  /* Altura total del hero (controla el “dwell” de scroll) */
  --hero-h: 520vh;
}

.hero-uzik{
  position:relative; height: var(--hero-h);
  width:100vw; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw;
}
.hero-uzik__stage{
  position:sticky; top:0; height:100vh; background:var(--bg);
  overflow:clip; isolation:isolate;
}

/* Texto FEARLESS */
.word{
  position:absolute; top:50%; left:50%;
  transform: translate(calc(-50% + var(--word-ox)), calc(-50% + var(--word-oy))) scale(var(--wordScale,1));
  transform-origin:50% 50%;
  display:flex; align-items:center; gap:0;
  color:var(--ink); font-size:var(--title-size);
  font-weight:var(--title-weight); line-height:.9;
  pointer-events:none; z-index:1;
}
.word .ch, .word .midletters{ display:block; white-space:nowrap; }
.ch--F{ transform: translateX(calc(var(--pushX,0px) * -1)); }
.ch--S{ transform: translateX(var(--pushX,0px)); }

/* Rectángulo + video (tamaño lo maneja el JS del hero) */
.cover{
  position:absolute;
  left:var(--coverLeft,50%); top:var(--coverTop,50%);
  width:var(--baseW,0px); height:var(--baseH,0px);
  transform: translate(-50%,-50%) scaleX(var(--sx,1)) scaleY(var(--sy,.28));
  transform-origin:50% 50%;
  background:var(--surface);
  border-radius:0;
  opacity: var(--coverOpacity,0);
  z-index:2;
  overflow:hidden;
  will-change: transform, width, height, left, top, opacity;
}
.cover--video{
  background: transparent !important;
  z-index: 3;
  opacity: var(--videoOpacity, 0);
  pointer-events: none;
  will-change: transform, opacity;
}
#coverVideoPlane{ width: 100%; height: 100%; transform-origin: 50% 50%; transform: scaleX(var(--planeSx, 1)) scaleY(var(--planeSy, 1)); }
#coverVideoEl{ width: 100%; height: 100%; object-fit: cover; object-position: var(--videoPosX) var(--videoPosY); }

/* ===== SECCIÓN MENSAJE (fondo rosa) ===== */
:root{
  --msg-bg: #ff8fc3;
  --msg-ink: #fff;
  --msg-size: clamp(48px, 9vw, 220px);
  --msg-line: 0.9;
  --msg-weight: 500;
  --msg-maxw: min(1700px, 96vw);
  --msg-padX: clamp(24px, 6vw, 20px);
  --msg-padY: clamp(32px, 10vh, 140px);
  --msg-valign: center;
  --msg-align: left;
  --msg-tx: 0px;
  --msg-ty: 0px;
}

.fx-msg{
  background: var(--msg-bg);
  color: var(--msg-ink);
  min-height: 100vh;
  width: 100vw;
  position: relative; left: 50%; right: 50%;
  margin-left: -50vw; margin-right: -50vw;
  display: flex;
  align-items: var(--msg-valign);
}
.fx-msg__inner{ width: 100%; max-width: var(--msg-maxw); margin: 0 auto; padding: var(--msg-padY) var(--msg-padX); position: relative; }
.fx-msg__nudge{ transform: translate(var(--msg-tx), var(--msg-ty)); }
.fx-msg__text p{
  margin: 0;
  font-family:'thundermedium_lc';
  font-weight:normal;
  font-size: var(--msg-size);
  line-height: var(--msg-line);
  text-transform: uppercase;
  text-align: var(--msg-align);
  letter-spacing: 0.01em;
}

bodycopy {--font-size: 1.2rem;}
bodycopy, bodycopy * {font-size: calc(var(--font-scale) * var(--font-size));}
h1 {--font-size: 4.5rem;}
h1 {font-size: calc(var(--font-scale) * var(--font-size));}
h2 {--font-size: 3.8rem;}
h2 {font-size: calc(var(--font-scale) * var(--font-size));}
.caption {--font-size: 1.1rem;}
.caption {font-size: calc(var(--font-scale) * var(--font-size));}
shop-product {--font-size: 1.2rem;}
shop-product {font-size: calc(var(--font-scale) * var(--font-size));}
audio-player {--font-size: 1.2rem;}
audio-player {font-size: calc(var(--font-scale) * var(--font-size));}
.fx-nav {--font-size: clamp(14px, 1.4vw, 18px);}
.fx-nav {font-size: calc(var(--font-scale) * var(--font-size));}
#fx-fixed-overlay .fx-card {--font-size: var(--card-font) ;}
#fx-fixed-overlay .fx-card {font-size: calc(var(--font-scale) * var(--font-size));}
#fx-hold-copy .hold {--font-size: clamp(28px, 4.2vw, 96px);}
#fx-hold-copy .hold {font-size: calc(var(--font-scale) * var(--font-size));}
#fx-curtain-copy .hold {--font-size: clamp(28px, 5.2vw, 96px);}
#fx-curtain-copy .hold {font-size: calc(var(--font-scale) * var(--font-size));}
.fx-black-copy {--font-size: clamp(40px, 8.6vw, 180px);}
.fx-black-copy {font-size: calc(var(--font-scale) * var(--font-size));}
#fx-curtain-headline .hl {--font-size: clamp(40px, 6.5vw, 180px);}
#fx-curtain-headline .hl {font-size: calc(var(--font-scale) * var(--font-size));}
#fx-comp-cta h1 {--font-size: clamp(48px, 8.6vw, 148px);}
#fx-comp-cta h1 {font-size: calc(var(--font-scale) * var(--font-size));}
#fx-comp-cta .fx-sticker {--font-size: clamp(var(--sticker-fs-min), var(--sticker-fs-vw), var(--sticker-fs-max)) ;}
#fx-comp-cta .fx-sticker {font-size: calc(var(--font-scale) * var(--font-size));}
#fx-comp-cta h1, #fx-start-cta h1 {--font-size: clamp(48px, 8.6vw, 148px);}
#fx-comp-cta h1, #fx-start-cta h1 {font-size: calc(var(--font-scale) * var(--font-size));}
#fx-comp-cta .fx-sticker, #fx-start-cta .fx-sticker {--font-size: clamp(var(--sticker-fs-min), var(--sticker-fs-vw), var(--sticker-fs-max)) ;}
#fx-comp-cta .fx-sticker, #fx-start-cta .fx-sticker {font-size: calc(var(--font-scale) * var(--font-size));}
#fx-start-cta h1 {--font-size: clamp(48px, 8vw, 140px);}
#fx-start-cta h1 {font-size: calc(var(--font-scale) * var(--font-size));}
#fx-callbar input, #fx-callbar button.send {--font-size: 15px;}
#fx-callbar input, #fx-callbar button.send {font-size: calc(var(--font-scale) * var(--font-size));}
#fx-callbar .close {--font-size: 22px;}
#fx-callbar .close {font-size: calc(var(--font-scale) * var(--font-size));}
a.caption { text-decoration: underline; color: rgba(0, 0, 0, 0.85); }

/* ===================== FOOTER ===================== */
.fx-footer{ background:#000; color:#fff; border-top: 2px solid #fff; }
.fx-footer__inner{
  display:grid; grid-template-columns: auto 1fr; align-items:center; column-gap: 72px;
  width: min(96vw, 1280px); margin: 0 auto; padding: 22px 16px;
}
.fx-footer__brand img{ display:block; width:auto; height: 40px; }
.fx-footer__form{ display:grid; grid-template-columns: 1.2fr 0.9fr 1.6fr auto; gap: 18px; align-items:center; }
.fx-footer__form input{
  background: transparent; color: #fff; border: 2px solid #fff; border-radius: 6px; padding: 12px 14px; font: inherit; outline: none;
}
.fx-footer__form input::placeholder{ color:#ddd; }
.fx-footer__form input:focus{ border-color:#fff; box-shadow: 0 0 0 2px rgba(255,255,255,.15) inset; }
.fx-footer__form button{ background: transparent; color:#fff; border: 2px solid #fff; border-radius: 6px; padding: 12px 18px; cursor: pointer; }
.fx-footer__form button:hover{ background:#fff; color:#000; }
.fx-footer__form button:disabled{ opacity:.6; cursor:default; }

/* Accesibilidad */
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* Elimina hairline entre video y rosa en algunos GPUs */
.hero-uzik{ margin-bottom: -12px; }
.hero-uzik__stage{ transform: translateZ(0); }

/* ===== SECCIÓN ROSA pinneada ===== */
#message{ --msg-scroll: 260vh; }
.fx-msg.fx-msg--pin{
  position: relative;
  height: var(--msg-scroll);
  width: 100vw; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw;
  display:block; background: var(--msg-bg, #ff8fc3); color: var(--msg-ink, #fff);
}
.fx-msg__pin{ position: sticky; top: 0; height: 100vh; display: flex; align-items: center; isolation: isolate; overflow: clip; }

/* ===== PISO Y CORTINA NEGRA (anti-pestañeo) ===== */
#message .fx-msg__pin{ overflow: clip; }

/* Piso (debajo de franja/copy; encima del rosa) */
#message .fx-msg__pin::before{
  content:""; position:absolute; inset:0; background:#000;
  z-index:5; pointer-events:none; opacity: var(--floor-o, 0);
  will-change: opacity;
}

/* Si existiera la franja vieja (#crea-band) en tu CSS: apágala */
#crea-band, #crea-band .crea-band__img{ display:none !important; }