/* ============================================================
   SCOLA — Landing "Studio" v2 (maqueta)
   Anatomía tipo Boulder Creative Studios, ADN Scola:
   negro cálido + drench naranja + gris cálido claro.
   Grotesk monolítico (Manrope) + glifos gráficos.
   ============================================================ */
:root{
	--orange:#FD8E25;
	--orange-drench:#E06A1B;
	--black:#0B0908;
	--white:#F5F3EE;
	--light:#E9E6DF;
	--ink:#111008;
	--muted:rgba(245,243,238,0.55);
	--sans:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,sans-serif;
	--mono:'JetBrains Mono',ui-monospace,monospace;
	--serif:'Libre Bodoni',serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
	background:var(--black);
	color:var(--white);
	font-family:var(--sans);
	-webkit-font-smoothing:antialiased;
	overflow-x:clip;
}
a{color:inherit;text-decoration:none}
::selection{background:var(--orange);color:#140A02}

/* Glifos gráficos (bloques estilo Boulder, en Unicode/CSS) */
.g{display:inline-block;background:currentColor;vertical-align:middle}
.g--bar{width:.62em;height:.28em;margin:0 .12em}
.g--sq{width:.22em;height:.22em;margin:0 .14em}
.g--dot{width:.30em;height:.30em;border-radius:50%;margin:0 .12em}
.g--tri{width:0;height:0;background:none;border-left:.34em solid currentColor;border-top:.22em solid transparent;border-bottom:.22em solid transparent;margin:0 .12em}
.g--orange{color:var(--orange)}

/* ---------- Elementos gráficos del brandbook (acentos sutiles) ---------- */
.orn{position:absolute;aspect-ratio:1/1;height:auto;pointer-events:none;z-index:3}
.orn--spin{animation:ornSpin 70s linear infinite}
.orn--spin-r{animation:ornSpin 90s linear infinite reverse}
.orn--float{animation:ornFloat 9s ease-in-out infinite}
@keyframes ornSpin{to{rotate:360deg}}
@keyframes ornFloat{0%,100%{translate:0 0}50%{translate:0 -16px}}
.orn--hero{right:clamp(24px,6vw,90px);bottom:13vh;width:clamp(80px,9.5vw,150px);color:#fff;opacity:.13}
.orn--drench{left:clamp(24px,7vw,110px);top:15vh;width:clamp(48px,5.5vw,84px);color:#140A02;opacity:.32}
.orn--show{right:clamp(20px,5vw,80px);bottom:30px;width:clamp(34px,3.4vw,52px);color:#fff;opacity:.28}
.stmt-bg{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.orn--stats{right:clamp(20px,7vw,110px);top:clamp(76px,9.5vw,130px);width:clamp(44px,4vw,62px);color:var(--orange);opacity:.55}
.orn--talk{right:clamp(16px,5vw,80px);top:34px;width:clamp(120px,14vw,210px);color:#fff;opacity:.15;z-index:0}

.label{
	font-family:var(--mono);font-weight:400;font-size:10px;
	letter-spacing:0.22em;text-transform:uppercase;color:var(--muted);
}

/* ---------- 1 · HERO STATEMENT (negro puro, glitch type) ---------- */
/* El hero vive pineado en un runway de 200vh: la 2ª mitad es el obturador.
   z-index 5: pinta ENCIMA del drench que se asoma por la ranura. */
.hero-wrap{height:200vh;position:relative;z-index:5}
.hero{
	height:100svh;background:var(--black);
	display:flex;align-items:center;justify-content:center;text-align:center;
	position:sticky;top:0;padding:120px clamp(20px,4vw,60px);
	overflow:hidden;will-change:clip-path;
}
.hero h1 .hl{display:block;will-change:transform}
/* Plasma en canvas (sustituto autocontenido del video de fondo) */
.hero-bg,.hero-fg{
	position:absolute;inset:0;width:100%;height:100%;
	z-index:0;pointer-events:none;
}
/* Capa frontal: las esferas más cercanas cruzan POR DELANTE del titular */
.hero-fg{z-index:3}
/* Grano de película encima del plasma, como el video de Boulder */
.hero::after{
	content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
	mix-blend-mode:overlay;opacity:.5;
	background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.hero-inner{position:relative;z-index:2;will-change:transform,opacity}
.hero-foot{z-index:2}
.hero h1{
	font-weight:300;
	font-size:clamp(44px,7.4vw,122px);
	line-height:0.98;letter-spacing:-0.03em;
	color:#fff;
}
.hero h1 .hl{display:block;white-space:nowrap}
.hero h1{text-shadow:0 6px 60px rgba(0,0,0,0.75),0 2px 18px rgba(0,0,0,0.6)}
.hero h1 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--orange)}
.hdot{
	display:inline-block;width:.15em;height:.15em;border-radius:50%;
	background:var(--orange);margin-left:.07em;
}
/* Revelado sutil: cada palabra sube y enfoca, escalonada */
.hero h1 .hw{
	display:inline-block;opacity:0;transform:translateY(22px);filter:blur(10px);
	transition:opacity .8s ease,transform 1.05s var(--ease),filter 1.05s ease;
}
.hero h1.in .hw{opacity:1;transform:none;filter:none}
.hero-foot{
	position:absolute;bottom:30px;left:0;right:0;
	display:flex;justify-content:space-between;padding:0 clamp(20px,3.5vw,44px);
}

/* ---------- G3 · subtítulo y los dos caminos ----------
   El hero sirve a los dos públicos y la bifurcación es explícita. Aparecen
   después del titular, con el mismo revelado escalonado, para que no compitan
   con él en el primer segundo. */
.hero-sub{
	margin:clamp(18px,2.4vw,30px) 0 0;
	max-width:34ch;
	font-size:clamp(15px,1.5vw,19px);
	line-height:1.5;
	color:rgba(255,255,255,.86);
	text-shadow:0 2px 20px rgba(0,0,0,.7);
	opacity:0;transform:translateY(16px);
	transition:opacity .8s ease .42s,transform 1s var(--ease) .42s;
}
.hero h1.in ~ .hero-sub,
.hero-inner:has(h1.in) .hero-sub{opacity:1;transform:none}

.hero-vias{
	display:flex;flex-wrap:wrap;gap:12px;
	margin-top:clamp(20px,2.6vw,30px);
	opacity:0;transform:translateY(16px);
	transition:opacity .8s ease .54s,transform 1s var(--ease) .54s;
}
.hero-inner:has(h1.in) .hero-vias{opacity:1;transform:none}

.hero-via{
	display:inline-flex;align-items:center;
	min-height:50px;padding:14px 26px;
	border-radius:999px;
	font-size:15px;font-weight:600;letter-spacing:.01em;
	text-decoration:none;
	transition:transform .18s ease,background-color .18s ease,border-color .18s ease;
}
.hero-via--eventos{background:var(--orange);color:#1A1410}
.hero-via--eventos:link,.hero-via--eventos:visited{color:#1A1410}
.hero-via--eventos:hover,.hero-via--eventos:focus-visible{background:#ffa04a;color:#1A1410;transform:translateY(-2px)}

.hero-via--negocio{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55)}
.hero-via--negocio:link,.hero-via--negocio:visited{color:#fff}
.hero-via--negocio:hover,.hero-via--negocio:focus-visible{border-color:#fff;background:rgba(255,255,255,.08);color:#fff;transform:translateY(-2px)}

.hero-via:focus-visible{outline:3px solid #fff;outline-offset:3px}
.hero-via--eventos:focus-visible{outline-color:#1A1410}

/* Sin :has() —navegadores viejos— no hay animación de entrada, pero el
   subtítulo y los botones se ven igual. Se degrada a estático, no a invisible. */
@supports not (selector(:has(*))){
	.hero-sub,.hero-vias{opacity:1;transform:none}
}

@media (max-width:600px){
	.hero-sub{max-width:none;font-size:15px}
	.hero-vias{gap:10px}
	.hero-via{flex:1 1 100%;justify-content:center;padding:14px 20px}
}

@media (prefers-reduced-motion:reduce){
	.hero-sub,.hero-vias{transition:none;opacity:1;transform:none}
	.hero-via:hover,.hero-via:focus-visible{transform:none}
}

/* ---------- 2 · ORANGE DRENCH MANIFESTO (pineado, scrub por palabra) ----------
   La sección mide 260vh; el interior queda sticky ocupando el viewport
   mientras el párrafo se "enciende" palabra por palabra según el progreso. */
.drench-wrap{height:400vh;background:var(--orange-drench);position:relative;margin-top:-100vh}
.drench{
	position:sticky;top:0;height:100svh;
	display:flex;align-items:center;justify-content:center;text-align:center;
	padding:0 clamp(20px,5vw,60px);
	position:sticky;overflow:hidden;
}
/* Wordmark gigante: crash-zoom y viaje hacia arriba (coreografía scrubbed) */
.drench-logo{
	position:absolute;left:50%;top:50%;
	width:min(30vw,380px);
	will-change:transform,opacity;pointer-events:none;
	--lgo-m:#fff;--lgo-a:#140A02;
}
.lgo2{display:block;aspect-ratio:377.96/377.6;height:auto}
.drench-logo{aspect-ratio:377.96/377.6}
.drench-logo .lgo2{position:absolute;inset:0;width:100%}
/* Coreografía de entrada del monograma:
   1) el punto de Scola aparece CENTRADO morfeando formas de marca (● ■ ▲)
   2) viaja a su posición real en el monograma
   3) la "la" se descubre con un barrido y el badge MEDIA sube después */
.dl-shape{
	position:absolute;left:50%;top:50%;
	width:17%;aspect-ratio:1;background:#140A02;
	transform:translate(-50%,-50%);opacity:0;
}
.dl-la,.dl-badge,.dl-dot{opacity:0}
/* Construcción del monograma LIGADA AL SCROLL (scrubDrench la controla):
   formas ● ■ ▲ centradas -> el punto viaja -> la "la" se traza -> relleno -> badge */
.dl-la-stroke{
	--lgo-m:transparent;opacity:0;
	stroke:#fff;stroke-width:3.2;fill:none;
	stroke-dasharray:100 100;stroke-dashoffset:100;
	stroke-linecap:round;stroke-linejoin:round;
}
.drench p{will-change:opacity;position:relative}
.drench p{
	max-width:660px;font-size:clamp(17px,1.5vw,22px);line-height:1.62;
	color:#FFF8F0;font-weight:500;
}
/* El párrafo entra en crash-zoom desde fuera de pantalla (como NEED/MORE/PROOF) */
.drench p{will-change:transform,opacity}
.drench p .pl{display:block}
.drench p .pli{display:block}

/* ---------- 3 · PROJECTS SHOWCASE (marco sticky + carrusel) ---------- */
.show{
	position:relative;background:var(--black);height:780vh;
	/* La tarjeta también se limita por la altura útil: en pantallas bajas,
	   si solo mandara el ancho, el botón acabaría montado sobre "Memorable". */
	--card-w:min(66vw,1160px,calc((100svh - var(--card-reserve,330px)) * 16 / 9));
}
.show-stage{position:sticky;top:0;height:100svh;overflow:hidden}
.show-word{
	position:absolute;z-index:6;
	font-weight:700;font-size:clamp(28px,3.6vw,58px);
	letter-spacing:-0.015em;text-transform:uppercase;color:#fff;
}
/* top con clamp: por debajo de la línea del header (colisión medida a 1280px) */
.show-word--tl{top:clamp(92px,11vh,120px);left:clamp(20px,7vw,110px)}
.show-word--tr{top:clamp(92px,11vh,120px);right:clamp(70px,10vw,150px)}
.show-word--bc{bottom:26px;left:50%;transform:translateX(-50%);display:flex;gap:.5em;align-items:center}
.show-word--bc .arr{font-weight:300}
.show-count{
	position:absolute;z-index:6;bottom:34px;left:clamp(20px,7vw,110px);
	font-family:var(--mono);font-size:10px;letter-spacing:0.2em;color:var(--muted);
	text-transform:uppercase;
}
.show-count i{font-style:normal;color:var(--orange)}
/* Bajo ~1100px la ficha y "Memorable" ya no caben en la misma línea */
@media (max-width:1100px){
	.show-word--bc{bottom:62px}
	.show-count{bottom:24px;left:0;right:0;text-align:center}
}
/* Pantallas bajas: la línea inferior se aprieta para dejarle sitio a la tarjeta */
@media (max-height:820px){
	.show-word--bc{font-size:clamp(22px,2.6vw,36px);bottom:18px}
	.show-count{bottom:22px}
}
@media (max-width:1100px) and (max-height:820px){
	.show-word--bc{bottom:50px}
	.show-count{bottom:18px}
}
.show-cta{
	position:absolute;z-index:30;left:50%;transform:translateX(-50%);
	top:calc(50% + var(--card-w) * 9 / 32 + clamp(13px,1.5vw,24px));
	font-family:var(--mono);font-size:10px;letter-spacing:0.2em;text-transform:uppercase;
	color:#fff;border:1.5px solid rgba(255,255,255,0.55);border-radius:999px;
	padding:13px 24px;white-space:nowrap;
	transition:background .3s,color .3s,border-color .3s;
}
.show-cta:hover{background:var(--white);color:#140A02;border-color:var(--white)}

/* Tarjeta central con muescas (notches) arriba/abajo */
.slide{
	position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
	/* Sin transition: la posición se scrubbea frame a frame ligada al scroll */
	will-change:transform;
}
.slide-card{
	position:relative;width:var(--card-w);aspect-ratio:16/9;
	border-radius:22px;overflow:hidden;
	box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08);
	transition:box-shadow .5s ease;cursor:pointer;
}
.slide-media{transition:transform 1.2s var(--ease)}
.slide-card:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,0.16),0 34px 90px rgba(0,0,0,0.55)}
.slide-card:hover .slide-media{transform:scale(1.05)}
.slide-card::before,.slide-card::after{
	content:'';position:absolute;left:50%;transform:translateX(-50%);
	width:30px;height:30px;border-radius:50%;background:var(--black);z-index:3;
}
.slide-card::before{top:-16px}
.slide-card::after{bottom:-16px}
.slide-media{position:absolute;inset:0;background:#151009 center/cover no-repeat}
.slide-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sm--1{background-image:var(--img-quince)}
.sm--2{background-image:var(--img-zz3)}
.sm--3{background-image:var(--img-juan)}
.sm--4{background-image:var(--img-isla)}
.sm--5{background-image:var(--img-preg)}
/* Capa de "fotografía": grano de película + streak de luz + caída inferior.
   El grano es un SVG feTurbulence inline en data-URI, mezclado en overlay. */
.slide-media::before,.tm-media::before,.t-media::before{
	content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
	mix-blend-mode:overlay;opacity:.38;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E"),
		linear-gradient(115deg,rgba(255,255,255,0.16) 0%,transparent 32%),
		linear-gradient(0deg,rgba(0,0,0,0.3) 0%,transparent 38%);
}
.slide-media::after{content:'';position:absolute;inset:0;background:radial-gradient(130% 110% at 50% 40%,transparent 40%,rgba(0,0,0,0.38) 100%)}

.slide-ph{
	position:absolute;inset:auto 16px 14px auto;z-index:2;
	font-family:var(--mono);font-size:9px;letter-spacing:0.2em;color:rgba(255,255,255,0.7);
	text-transform:uppercase;
}
/* Marquee del nombre del proyecto — atraviesa TODO el ancho por encima de la card */
.pn{
	position:absolute;left:0;right:0;top:50%;transform:translateY(-58%);
	z-index:25;overflow:hidden;pointer-events:none;
}
.pn-track{
	display:flex;align-items:center;justify-content:center;gap:.4em;
	width:100%;
	font-weight:300;font-size:clamp(44px,6.6vw,108px);
	letter-spacing:-0.015em;color:#fff;line-height:1;
	white-space:nowrap;
}
.pn-track .pn-g{font-size:.34em;color:var(--orange)}
@keyframes pn{to{transform:translateX(-50%)}}
.slide-tag{
	/* Justo debajo de la banda del marquee (antes caía DENTRO de ella) */
	position:absolute;left:0;right:0;top:calc(50% + clamp(44px,4.9vw,80px));z-index:26;
	text-align:center;font-weight:500;font-size:clamp(12px,1.3vw,19px);
	letter-spacing:0.14em;text-transform:uppercase;color:rgba(255,255,255,0.92);
	pointer-events:none;
}
.pn,.slide-tag{transition:opacity .2s linear}
.peek--r1{right:-60px;top:24%}
.peek--r2{right:-90px;bottom:20%}
.peek--l1{left:-60px;top:30%}
.peek--l2{left:-90px;bottom:24%}

/* ---------- 4 · SERVICES TICKER WALL (fondo claro) ---------- */
.svc{background:var(--light);color:var(--ink);padding:clamp(60px,7vw,104px) 0;overflow:hidden}
.svc-row{
	display:flex;align-items:center;gap:26px;width:max-content;
	padding:7px 0;
}
.svc-row--rev .svc-track{animation-direction:reverse}
.svc-track{display:flex;align-items:center;gap:26px;padding-right:26px;width:max-content;animation:svcm 38s linear infinite}
/* Cada fila desfila a su propio ritmo, como filmstrips independientes */
.svc-row:nth-of-type(1) .svc-track{animation-duration:80s}
.svc-row:nth-of-type(2) .svc-track{animation-duration:56s}
.svc-row:nth-of-type(3) .svc-track{animation-duration:62s}
.svc-row:nth-of-type(4) .svc-track{animation-duration:59s}
.svc-row:nth-of-type(5) .svc-track{animation-duration:58s}
.svc-row:hover .svc-track{animation-play-state:paused}
@keyframes svcm{to{transform:translateX(-50%)}}
.svc-word{
	font-weight:600;font-size:clamp(40px,6.4vw,98px);
	letter-spacing:-0.015em;line-height:1;text-transform:uppercase;white-space:nowrap;
}
/* Círculos: cada fila lleva su propio material, sin repetir ninguna imagen */
.svc-th{
	flex:0 0 auto;width:clamp(84px,8.4vw,126px);aspect-ratio:1;border-radius:50%;
	/* filo mínimo: recorta las fotos claras contra el fondo crema */
	box-shadow:inset 0 0 0 1px rgba(20,10,2,0.10);
	transition:transform .6s var(--ease);
}
.svc-row:hover .svc-th{transform:scale(.95)}
.svc-th:hover{transform:scale(1.05)}
/* fotografía · proyecto del realtor y maternidad */
.wc--ph1{background:#151009 var(--img-ph1) 52% 42%/cover no-repeat}
.wc--ph2{background:#151009 var(--img-ph2) 50% 51%/cover no-repeat}
.wc--ph3{background:#151009 var(--img-ph3) 51% 52%/cover no-repeat}
.wc--ph4{background:#151009 var(--img-ph4) 51% 53%/cover no-repeat}
.wc--ph5{background:#151009 var(--img-ph5) 46% 46%/cover no-repeat}
.wc--ph6{background:#151009 var(--img-ph6) 42% 53%/cover no-repeat}
.wc--ph7{background:#151009 var(--img-ph7) 48% 44%/cover no-repeat}
.wc--ph8{background:#151009 var(--img-ph8) 44% 45%/cover no-repeat}
/* video · bodas */
.wc--vd1{background:#151009 var(--img-vd1) 60% 46%/cover no-repeat}
.wc--vd2{background:#151009 var(--img-vd2) 30% 50%/cover no-repeat}
.wc--vd3{background:#151009 var(--img-vd3) 46% 48%/cover no-repeat}
.wc--vd4{background:#151009 var(--img-vd4) 51% 51%/cover no-repeat}
/* branding · La Isla Random */
.wc--br1{background:#151009 var(--img-br1) 46% 51%/cover no-repeat}
.wc--br2{background:#151009 var(--img-br2) 50% 52%/cover no-repeat}
.wc--br3{background:#151009 var(--img-br3) 40% 47%/cover no-repeat}
.wc--br4{background:#151009 var(--img-br4) 50% 61%/cover no-repeat}
.wc--br5{background:#151009 var(--img-br5) 47% 55%/cover no-repeat}
/* social · gente de las bodas */
.wc--so1{background:#151009 var(--img-so1) 49% 44%/cover no-repeat}
.wc--so2{background:#151009 var(--img-so2) 47% 43%/cover no-repeat}
.wc--so3{background:#151009 var(--img-so3) 54% 42%/cover no-repeat}
.wc--so4{background:#151009 var(--img-so4) 51% 47%/cover no-repeat}
/* eventos · ceremonia y grupo */
.wc--ev1{background:#151009 var(--img-ev1) 52% 47%/cover no-repeat}
.wc--ev2{background:#151009 var(--img-ev2) 53% 46%/cover no-repeat}
.wc--ev3{background:#151009 var(--img-ev3) 52% 51%/cover no-repeat}
.wc--ev4{background:#151009 var(--img-ev4) 49% 46%/cover no-repeat}
.wc--ev5{background:#151009 var(--img-ev5) 51% 47%/cover no-repeat}

/* Un círculo lleva video: el proyecto de concierto y entrevistas del artista,
   que solo existe en movimiento. */
.svc-th--vid{position:relative;overflow:hidden;background:#151009}
.svc-th--vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Círculos de color: puntuación, no relleno. Aros finos y un naranja pequeño. */
.svc-dot{
	flex:0 0 auto;width:clamp(36px,3.6vw,56px);aspect-ratio:1;border-radius:50%;
	transition:transform .6s var(--ease);
}
.svc-row:hover .svc-dot{transform:scale(.95)}
.svc-dot--lg{width:clamp(84px,8.4vw,126px)}
.svc-dot--orange{background:var(--orange)}
.svc-dot--sky{background:#D3DDDE}
.svc-dot--ring{background:none;box-shadow:inset 0 0 0 1.5px rgba(253,142,37,0.55)}
.svc-dot--ringInk{background:none;box-shadow:inset 0 0 0 1.5px rgba(20,10,2,0.16)}
/* Círculos de la sección de principios y foto del testimonio */
.zz--1{background:#151009 var(--img-c1) center/cover no-repeat}
.zz--2{background:#151009 var(--img-c2) center/cover no-repeat}
.zz--3{background:#151009 var(--img-c4) center/cover no-repeat}
.zz--4{background:#151009 var(--img-c3) center/cover no-repeat}
.t-media--wed{background:#151009 var(--img-tmed) center/cover no-repeat}

/* ---------- 4b · SERVICE INDEX (del mockup v2: filas con cortina naranja) ---------- */
.sidx{background:var(--black);color:#fff;padding:clamp(90px,11vw,150px) 0 0}
.sidx-head{
	padding:0 clamp(20px,7vw,110px) clamp(50px,6vw,80px);
	display:flex;justify-content:space-between;align-items:flex-end;
	flex-wrap:wrap;gap:28px;border-bottom:1px solid rgba(245,243,238,0.12);
}
.sidx-head .label{color:var(--orange)}
.sidx-title{
	font-weight:300;font-size:clamp(38px,5.6vw,96px);
	line-height:.98;letter-spacing:-0.02em;color:#fff;
}
.sidx-title em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--orange)}
.sv{
	display:grid;grid-template-columns:130px 1.4fr 1fr auto auto;
	gap:clamp(18px,3vw,60px);align-items:center;
	padding:clamp(38px,4.6vw,72px) clamp(20px,7vw,110px);
	border-bottom:1px solid rgba(245,243,238,0.12);
	position:relative;overflow:hidden;
	transition:padding .4s var(--ease);
}
.sv::before{
	content:'';position:absolute;inset:0;background:var(--orange);
	transform:translateY(101%);transition:transform .5s cubic-bezier(0.7,0,0.3,1);
}
.sv:hover::before{transform:translateY(0)}
.sv:hover{padding-top:clamp(52px,6vw,92px);padding-bottom:clamp(52px,6vw,92px)}
.sv>*{position:relative;z-index:1;transition:color .3s}
.sv-num{font-family:var(--mono);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted)}
.sv-title{
	font-weight:300;font-size:clamp(30px,4.2vw,72px);
	line-height:.98;letter-spacing:-0.02em;color:#fff;
}
.sv-title em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--orange)}
.sv-desc{font-size:clamp(13px,1.15vw,16px);line-height:1.6;color:rgba(245,243,238,0.6);max-width:400px}
.sv-price{font-family:var(--mono);font-size:11px;letter-spacing:0.16em;color:var(--muted);white-space:nowrap}
.sv-arrow{font-size:clamp(20px,1.8vw,26px);color:var(--muted);transition:transform .3s var(--ease),color .3s}
.sv:hover .sv-num,.sv:hover .sv-title,.sv:hover .sv-desc,.sv:hover .sv-price,.sv:hover .sv-arrow{color:#140A02}
.sv:hover .sv-title em{color:#fff}
.sv:hover .sv-arrow{transform:translate(8px,-4px)}
@media(max-width:900px){
	.sv{grid-template-columns:70px 1fr}
	.sv-desc,.sv-price,.sv-arrow{grid-column:2}
}
/* Debe ir DESPUÉS de la de 900px: a igual especificidad gana la última. */
@media(max-width:640px){
	/* En pantalla estrecha la columna fija de 70px dejaba el título en el 63%
	   del ancho y partía "01 / PHOTOGRAPHY" en dos líneas. Se apila. */
	.sv{grid-template-columns:1fr;gap:14px;align-items:start}
	.sv-num,.sv-title,.sv-desc,.sv-price,.sv-arrow{grid-column:1}
}

/* ---------- 5 · STATEMENT GLITCH ---------- */
.stmt{
	position:relative;overflow:hidden;
	background:var(--black);min-height:72svh;
	display:flex;align-items:center;justify-content:center;text-align:center;
	padding:120px clamp(20px,5vw,60px);
}
.stmt h2{
	position:relative;z-index:1;
	font-weight:700;font-size:clamp(30px,4.6vw,74px);
	letter-spacing:-0.02em;line-height:1.06;text-transform:uppercase;max-width:18ch;color:#fff;
}
/* Revelado sutil: cada palabra sube y desenfoca hacia nítido, escalonada */
.stmt h2 .sw{
	display:inline-block;opacity:0;transform:translateY(18px);filter:blur(9px);
	transition:opacity .7s ease,transform .95s var(--ease),filter .95s ease;
}
.stmt h2.in .sw{opacity:1;transform:none;filter:none}

/* ---------- 6 · PRINCIPIOS — filas editoriales (look del portafolio web) ---------- */
.tm{background:var(--black);padding:clamp(50px,6vw,90px) clamp(20px,7vw,110px) clamp(70px,9vw,130px)}
.tm-block{padding:0 0 clamp(64px,8vw,120px)}
.tm-meta{
	display:flex;align-items:center;gap:clamp(18px,2.6vw,42px);
	border-top:1px solid rgba(245,243,238,0.14);
	padding:16px 0 clamp(34px,4.5vw,60px);
	font-family:var(--mono);font-size:11px;font-weight:500;
	letter-spacing:0.22em;text-transform:uppercase;color:rgba(245,243,238,0.8);
	white-space:nowrap;
}
.tm-meta i{font-style:normal;color:var(--orange)}
.tm-meta .dash{flex:0 0 clamp(22px,3vw,46px);height:1px;background:rgba(245,243,238,0.3)}
.tm-grid{
	display:grid;grid-template-columns:0.85fr 1.1fr 1.25fr;
	grid-template-areas:'c t m';
	gap:clamp(28px,4.5vw,72px);align-items:center;
}
.tm-block--rev .tm-grid{grid-template-columns:1.25fr 1.1fr 0.85fr;grid-template-areas:'m t c'}
.tm-copy{grid-area:c}
.tm-title{grid-area:t}
.tm-media{grid-area:m}
.tm-title{
	font-weight:300;font-size:clamp(38px,4.7vw,80px);
	line-height:1.05;letter-spacing:-0.01em;
	text-align:right;min-height:1.1em;
	color:transparent;
	background:linear-gradient(90deg,var(--orange) 0 50%,var(--white) 50% 100%);
	background-size:210% 100%;background-position:100% 0;
	-webkit-background-clip:text;background-clip:text;
	transition:background-position .9s var(--ease);
}
.tm-title:hover{background-position:0 0}
.tm-block--rev .tm-title{text-align:left}
/* Los medios del zigzag son CÍRCULOS; algunos son de color plano (sin foto) */
.tm-media{
	width:min(100%,clamp(240px,30vw,420px));aspect-ratio:1;border-radius:50%;
	overflow:hidden;position:relative;justify-self:center;
}
.tm-media::before{border-radius:50%}
.tm-dots{grid-area:m;display:flex;align-items:center;justify-content:center;gap:clamp(14px,2vw,30px)}
.tm-dots .tm-media{width:auto;flex:0 1 clamp(150px,17vw,260px)}
.tm-dot{
	flex:0 0 auto;border-radius:50%;aspect-ratio:1;
	width:clamp(52px,6.4vw,104px);
}
.tm-dot--orange{background:var(--orange)}
.tm-dot--ink{background:#1b1512;box-shadow:inset 0 0 0 1px rgba(245,243,238,0.16)}
.tm-dot--ring{background:none;box-shadow:inset 0 0 0 2px var(--orange)}
.tm-dot--sm{width:clamp(26px,3vw,46px)}
.tm-copy p{color:rgba(245,243,238,0.75);line-height:1.65;font-size:clamp(14px,1.2vw,17px);max-width:40ch;font-weight:400}
.tm-cta{
	display:inline-block;margin-top:clamp(22px,2.6vw,34px);
	font-family:var(--mono);font-size:10px;letter-spacing:0.2em;text-transform:uppercase;
	color:#fff;border:1.5px solid rgba(255,255,255,0.45);border-radius:999px;
	padding:14px 26px;white-space:nowrap;
	transition:background .3s,color .3s,border-color .3s;
}
.tm-cta:hover{background:var(--white);color:#140A02;border-color:var(--white)}

/* ---------- 6b · INTERLUDIO NARANJA "NEED / MORE / PROOF?" ----------
   Sección pineada: palabras gigantes que se intercambian por pasos de scroll.
   La del medio va dentro de un pill outline enorme. */
.proof{height:460vh;background:var(--orange-drench);position:relative}
.proof-stage{
	position:sticky;top:0;height:100svh;overflow:hidden;
	display:flex;align-items:center;justify-content:center;
}
.proof-word{
	position:absolute;color:#140A02;
	font-weight:600;font-size:clamp(90px,20vw,330px);
	line-height:.9;text-transform:uppercase;letter-spacing:-0.02em;
	opacity:0;transform:scale(0);
	will-change:opacity,transform;white-space:nowrap;
}
.proof-word--pill{
	border:clamp(6px,0.9vw,13px) solid #140A02;border-radius:999px;
	padding:.02em .32em .06em;
}

/* ---------- 7 · CLIENTES (pared de logos reales, 2 filas) ---------- */
.lg-row{display:flex;align-items:center;gap:clamp(48px,6vw,96px);width:max-content;
	padding-right:clamp(48px,6vw,96px);animation:svcm 44s linear infinite}
.lg-mq{overflow:hidden}
.lg-mq+.lg-mq{margin-top:clamp(30px,3.4vw,52px)}
.lg-mq--rev .lg-row{animation-direction:reverse;animation-duration:58s}
.lg-row img{
	height:clamp(34px,3.6vw,54px);width:auto;display:block;flex:0 0 auto;
	opacity:.62;filter:grayscale(1);
	transition:opacity .4s ease,transform .5s var(--ease);
}
.lg-row img:hover{opacity:1;transform:scale(1.06)}
.lg-mq:hover .lg-row{animation-play-state:paused}

/* ---------- 7b · NAME DROPS (wordmarks tipográficos) ---------- */
.drops{background:var(--black);padding:clamp(50px,6vw,80px) 0 clamp(60px,7vw,90px);border-top:1px solid rgba(245,243,238,0.1)}
.drops .label{display:block;text-align:left;padding:0 clamp(20px,7vw,110px);margin-bottom:clamp(30px,4vw,50px)}
/* Los clientes que aún no tienen logo: lista quieta, no cinta. Dos
   marquesinas en el mismo pliegue competían con las fotos, que es lo
   único que debería moverse aquí. */
.drops-names{
	display:flex;flex-wrap:wrap;justify-content:center;
	gap:clamp(12px,1.6vw,22px) clamp(20px,3vw,44px);
	margin-top:clamp(34px,4vw,60px);padding:0 clamp(20px,7vw,110px);
	font-family:var(--mono);font-size:clamp(11px,1.05vw,13px);
	letter-spacing:0.16em;text-transform:uppercase;color:rgba(245,243,238,0.42);
}
.drops-names span{transition:color .35s ease}
.drops-names span:hover{color:var(--orange)}
/* Cada "cliente" con su propio tratamiento tipográfico, como logos reales */

/* ---------- 8 · TESTIMONIALS (zigzag: media + cita grande) ---------- */
.testi{background:var(--black);padding:clamp(90px,12vw,160px) clamp(20px,7vw,110px)}
.testi>.label{display:block;margin-bottom:clamp(40px,6vw,80px)}
.t-row{
	display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(36px,7vw,120px);
	align-items:center;padding:clamp(40px,5vw,80px) 0;
}
.t-row--rev{grid-template-columns:1.15fr 1fr}
.t-media{width:min(100%,440px);aspect-ratio:1;border-radius:50%;position:relative;overflow:hidden;justify-self:center}
.t-media::after{content:'';position:absolute;inset:0;background:radial-gradient(130% 110% at 50% 40%,transparent 45%,rgba(0,0,0,0.35) 100%)}
.t-quote{
	font-weight:500;font-size:clamp(23px,2.9vw,44px);line-height:1.28;
	color:#fff;border:0;margin:0;padding:0;background:none;
}
.t-quote--r{text-align:right;justify-self:end}
.t-text{margin:0;padding:0}
/* Comilla serif de apertura, como acento */
.t-quote::before{
	content:'\201C';display:block;font-family:var(--serif);font-style:italic;
	font-size:clamp(56px,7vw,104px);line-height:.62;color:var(--orange);
	margin-bottom:clamp(6px,1vw,14px);
}
.t-by{
	display:flex;align-items:center;gap:14px;margin-top:clamp(22px,2.6vw,38px);
	font-family:var(--mono);font-size:11px;font-style:normal;font-weight:400;
	letter-spacing:0.18em;text-transform:uppercase;
	background:none;padding:0;border:0;
}
.t-by::before{content:'';flex:0 0 auto;width:clamp(26px,3.4vw,58px);height:1px;background:rgba(255,255,255,0.32)}
.t-by b{font-weight:500;color:#fff}
.t-by i{font-style:normal;color:var(--muted)}
.t-quote--r{display:flex;flex-direction:column;align-items:flex-end}
.t-quote--r .t-by{flex-direction:row-reverse}
.t-card{
	background:#FFFCEF;color:#140A02;border-radius:18px;
	width:min(100%,540px);aspect-ratio:16/10;justify-self:end;
	display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;
}
.t-row--rev .t-card{justify-self:end}
.t-logo{width:min(62%,320px);--lgo-m:#1E1E1E;--lgo-a:var(--orange)}
.stars{
	display:inline-block;
	font-family:var(--mono);font-size:10px;letter-spacing:0.14em;
	background:#140A02;color:var(--white);border-radius:999px;padding:7px 16px;
}

/* ---------- 9 · STATS (estilo awards board) ---------- */
.stats{position:relative;background:var(--black);padding:clamp(80px,10vw,140px) clamp(20px,7vw,110px);border-top:1px solid rgba(245,243,238,0.1)}
.stats h2{
	font-weight:500;font-size:clamp(34px,4.6vw,72px);text-transform:uppercase;
	margin-bottom:clamp(40px,5vw,70px);color:#fff;
}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(245,243,238,0.14);border:1px solid rgba(245,243,238,0.14)}
.stat{background:var(--black);padding:clamp(28px,3.5vw,52px);min-height:210px;display:flex;flex-direction:column;justify-content:space-between}
.stat b{font-weight:600;font-size:clamp(48px,5.8vw,96px);line-height:.95;letter-spacing:-0.03em;color:#fff}
.stat{transition:background .4s ease}
.stat:hover{background:#161210}
.stat span{font-family:var(--mono);font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);max-width:190px}
@media(max-width:860px){.stats-grid{grid-template-columns:1fr 1fr}}

/* ---------- PRELOADER (wordmark + conteo, se libera con clip-path) ---------- */
.loader{
	position:fixed;inset:0;z-index:300;background:var(--black);
	display:flex;align-items:center;justify-content:center;
	transition:clip-path .9s var(--ease);clip-path:inset(0 0 0 0);
}
.loader.done{clip-path:inset(0 0 100% 0);pointer-events:none}
.loader-count{
	position:absolute;bottom:30px;right:clamp(20px,3.5vw,44px);
	font-family:var(--mono);font-size:11px;letter-spacing:0.22em;color:var(--muted);
}

/* Glitch flicker puntual sobre el texto ya descifrado */
@keyframes glitchFlick{0%,94%,100%{opacity:1}95%{opacity:.35}97%{opacity:.85}98%{opacity:.5}}
.glitch-live{animation:glitchFlick 7s steps(1) infinite}

@media (prefers-reduced-motion:reduce){
	.rv,.rv--slide,[data-stagger]>*{opacity:1 !important;transform:none !important;clip-path:none !important;transition:none !important}
	.show-word--bc .arr--r,.show-word--bc .arr--l,.glitch-live{animation:none}
	.cur-morph{transition:opacity .2s ease}
	.svc-track,.pn-track,.lg-row{animation-play-state:paused}
	.orn--spin,.orn--spin-r,.orn--float{animation:none}
	.drench p .pli{transform:none !important}
	.drench p{opacity:1 !important}
	.drench-logo{display:none}
	.hero-inner{transform:none !important;opacity:1 !important}
	.hero{clip-path:none !important}
	.hero h1 .hl{transform:none !important}
	.hero-wrap{height:100svh}
	.drench-wrap{margin-top:0}
	.proof-word{opacity:1;transform:none}
}
@media(max-width:600px){.hero-foot .label:nth-child(2){display:none}}
/* En móvil el header no cabía: el logo llegaba a tocar el switch de idioma
   y el botón de menú quedaba a 5px del borde. */
@media(max-width:520px){
	/* los enlaces del pie eran de 15px: se les da cuerpo para el dedo */
}

@media(max-width:820px){
	.tm-grid,.tm-block--rev .tm-grid{grid-template-columns:1fr;grid-template-areas:'m' 't' 'c'}
	.tm-title,.tm-block--rev .tm-title{text-align:left}
	.tm-meta span:nth-child(4),.tm-meta span:nth-child(5){display:none}
	.t-row,.t-row--rev{grid-template-columns:1fr}
	.t-quote--r{text-align:left;justify-self:start;align-items:flex-start}
	.t-quote--r .t-by{flex-direction:row}
	.tm-block--rev .tm-media{order:0;justify-self:start}
	.show{--card-w:86vw}
	.slide-card{width:var(--card-w)}
	.show{height:640vh}
}