/* ============================================================
   HOME Spicy4Tuna · v3
   Construida sobre las especificaciones extraídas del código real
   de lxlcreative (sistema de alineación y hero), tabella (acordeón
   de miembros), koffiracha (bloque de producto) y lusion (cards con
   física). Loader/topbar/smenu portados del propio sitio.
   ============================================================ */
@font-face{
  font-family:'Mastery';
  src:url('../fonts/mastery.woff2') format('woff2');
  font-weight:400;font-display:swap;
}

/* Selección de texto: naranja de marca con tinta negra (7,9:1 de
   contraste; en blanco se quedaba en 2,9:1). Misma regla en todas las
   hojas del sitio, que cada página carga las suyas. */
::selection{background:#ff5f00;color:#0b0c0f;text-shadow:none}

:root{
  --bg:#0b0c0f; --ink:#fff; --ink2:#c3c9d4; --muted:#8b93a1;
  --accent:#ff5f00; --acc:#ff5f00;
  --surface-dark:#14161b; --surface-btn:#1f2229;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.16);
  --font-d:'Poppins',sans-serif; --font-script:'Mastery',cursive;
  --font-m:ui-monospace,'Cascadia Mono',Consolas,monospace;

  /* sistema lxl: interpola entre 320px y 2560px de viewport */
  --site--margin:clamp(1.25rem, calc(1.25rem + 1.787*((100vw - 20rem)/140)), 3.037rem);
  --max-width--main:81.25rem;   /* 1300px: el contenido no se estira mas alla */
  --site--gutter:.75rem;
  --space--section-main:clamp(6rem, calc(6rem + 8.571*((100vw - 20rem)/140)), 14.571rem);
  --space--section-small:clamp(3rem, calc(3rem + 4.287*((100vw - 20rem)/140)), 7.287rem);
  --space--page-top:clamp(8rem, calc(8rem + 12.142*((100vw - 20rem)/140)), 20.142rem);
  --space--inner-padding:clamp(1rem, calc(1rem + .358*((100vw - 20rem)/140)), 1.358rem);
  --space--2:clamp(1.75rem, calc(1.75rem + .358*((100vw - 20rem)/140)), 2.108rem);
  --space--2-5:clamp(2.25rem, calc(2.25rem + .358*((100vw - 20rem)/140)), 2.608rem);
  --space--5:clamp(4rem, calc(4rem + 1.429*((100vw - 20rem)/140)), 5.429rem);
  --radius--main:.75rem;

  --fs-display:clamp(2rem, calc(2rem + 2.858*((100vw - 20rem)/140)), 4.858rem);
  --fs-h1:clamp(1.75rem, calc(1.75rem + 1.787*((100vw - 20rem)/140)), 3.537rem);
  --fs-h2:clamp(1.5rem, calc(1.5rem + 1.071*((100vw - 20rem)/140)), 2.571rem);
  --fs-text:clamp(1rem, calc(1rem + .179*((100vw - 20rem)/140)), 1.179rem);
  --fs-decl:clamp(2.4rem, calc(2.4rem + 6.1*((100vw - 20rem)/140)), 8.5rem);
  --topbar-h:89px;

  /* variables que el CSS portado del sitio espera */
  --accent-deep:#b34100; --accent-text:#ff7a2e; --panel:#14161c;

  /* lenguaje de cards (referencia reactbits): panel de sección + ventana */
  --card:#1a1e26;                      /* el gris más clarito de la casa */
  --card-line:rgba(255,255,255,.14);
  --panel-line:rgba(255,255,255,.08);
  --radius-panel:24px; --radius-card:16px;
}
*{box-sizing:border-box}
html{overflow-x:clip;scrollbar-gutter:stable}
/* overflow-x:clip impide que el overflow:hidden del body llegue al
   viewport: con un overlay abierto se esconde aquí la barra de la página
   (si no, convive con la del overlay — doble barra) */
html:has(body.menu-open){overflow-y:hidden}
body{margin:0;background:var(--bg);color:var(--ink);overflow-x:clip;
  font:400 17px/1.65 var(--font-d);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input{font-family:var(--font-d)}
img{max-width:100%}
em,strong{font-synthesis:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* la palabra de marca: SOLO una o dos por titular, sin acentos (Mastery no los trae).
   Patrón acento de lxl: 1.8em, line-height .7, márgenes negativos compensados */
.u-accent{font-family:var(--font-script);font-weight:400;font-synthesis:none;font-style:normal;
  text-transform:none;color:var(--accent);font-size:1.15em;line-height:.7;
  display:inline-block;vertical-align:.02em;padding:0 .05em}

/* La puntuación pegada a una palabra-acento viaja con ella: nunca un punto
   o coma huérfanos al principio de línea */
.u-keep{white-space:nowrap}

/* ── sistema de alineación (lxl): TODO cae en las mismas dos líneas ── */
.u-section{padding-top:var(--space--section-main);padding-bottom:var(--space--section-main);
  display:flex;flex-flow:column;justify-content:center;align-items:stretch}
.u-container{max-width:var(--max-width--main);width:calc(100% - var(--site--margin)*2);
  margin-inline:auto;display:flex;flex-flow:column;justify-content:center;
  row-gap:var(--space--5)}

/* chips de recurso pendiente */
.chip-pendiente{position:absolute;bottom:14px;left:14px;top:auto;z-index:5;font-size:.68rem;
  font-weight:600;letter-spacing:.07em;color:rgba(255,255,255,.85);
  background:rgba(8,9,12,.62);border:1px solid rgba(255,255,255,.14);
  border-radius:99px;padding:.32rem .8rem;backdrop-filter:blur(6px);white-space:nowrap}

.sky{position:fixed;inset:0;z-index:-2;background:var(--bg);overflow:hidden}
.grain{
  position:fixed;inset:-50%;z-index:80;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ld-ghost{fill:none;stroke:rgba(255,255,255,.2);stroke-width:2.2;stroke-linejoin:round}
.hide-m{display:none}

/* ══ PORTADO DEL SITIO: loader + topbar + smenu, COMPLETO (C1/C2) ══ */


/* ---------- atmósfera: grid técnico + glows ---------- */
.sky{position:fixed;inset:0;z-index:-2;background:var(--bg);overflow:hidden}

.sky::before{ /* grid */
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 34%, #000 0%, transparent 78%);
}

.sky i{position:absolute;border-radius:50%;filter:blur(110px);opacity:.32;animation:drift 30s ease-in-out infinite alternate}

.sky i:nth-child(1){width:52vw;height:52vw;left:-16vw;top:-24vw;background:#3d1e08}

.sky i:nth-child(2){width:44vw;height:44vw;right:-14vw;top:-12vw;background:#101d33}

.sky i:nth-child(3){width:46vw;height:46vw;left:26vw;bottom:-30vw;background:#1c1026}

.sky i:nth-child(4){width:30vw;height:30vw;right:6vw;bottom:-12vw;background:#25130a;animation-delay:-10s}

.sky::after{ /* viñeta */
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 120% 90% at 50% 40%, transparent 55%, rgba(0,0,0,.55) 100%);
}

.grain{
  position:fixed;inset:-50%;z-index:80;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* una sola transición: el contenido se funde a la vez que el loader se va */
html.cargando main,html.cargando .topbar,html.cargando .footer{opacity:0}

main,.topbar,.footer{transition:opacity .5s ease}

.loader{
  position:fixed;inset:0;z-index:200;
  display:grid;place-items:center;
  background:var(--bg);
  transition:opacity .6s ease,visibility .6s;
}

.loader.is-out{opacity:0!important;visibility:hidden}

.loader::before{ /* brasa cálida detrás del logo */
  content:"";position:absolute;width:34vmin;height:34vmin;border-radius:50%;
  background:radial-gradient(circle,rgba(255,95,0,.2),rgba(255,95,0,.05) 45%,transparent 70%);
  filter:blur(30px);animation:ld-brasa 2.6s ease-in-out infinite;
}

.ld-logo{
  position:relative;
  height:clamp(104px,17vmin,158px);width:auto;overflow:visible;
  transform-origin:50% 78%;
}

/* silueta tenue: se ve el logo entero desde el primer momento */
.ld-ghost{fill:none;stroke:rgba(255,255,255,.2);stroke-width:2.2;stroke-linejoin:round}

.ld-fuego{fill:#FC5000}
   /* el naranja del logo, sin gradientes */
.ld-letra{fill:#fff}

.ld-linea{opacity:.9;mix-blend-mode:screen}

/* chispas que suben desde la llama */
.ld-spark{
  position:absolute;top:38%;width:3px;height:3px;border-radius:50%;
  background:var(--accent);opacity:0;box-shadow:0 0 6px 1px rgba(255,95,0,.8);
  animation:ld-spark 2.8s ease-out infinite;
}

.ld-spark:nth-child(1){left:calc(50% - 15px);animation-delay:.3s}

.ld-spark:nth-child(2){left:calc(50% + 11px);animation-delay:1.3s}

.ld-spark:nth-child(3){left:50%;animation-delay:2.1s}

/* al terminar: el logo respira hondo y se va */
.loader.is-out .ld-logo{animation:ld-final .6s cubic-bezier(.2,1.4,.4,1) forwards}

.loader.is-out::before{animation:ld-final-brasa .6s ease-out forwards}


@keyframes ld-brasa{0%,100%{opacity:.65;transform:scale(1)}50%{opacity:1;transform:scale(1.1)}}

@keyframes ld-spark{
  0%{opacity:0;transform:translateY(0) scale(.5)}
  15%{opacity:1}
  100%{opacity:0;transform:translateY(-72px) scale(.15)}
}

@keyframes ld-final{to{transform:scale(1.28);opacity:0}}

@keyframes ld-final-brasa{to{opacity:0;transform:scale(1.5)}}
@media (prefers-reduced-motion:reduce){

  .loader::before,.ld-spark{animation:none}

  .ld-spark{display:none}
}


/* ---------- topbar ---------- */
.topbar{position:fixed;top:0;left:0;right:0;z-index:70;background:none;padding:25.5px var(--site--margin) 0;display:flex;align-items:center;justify-content:space-between;gap:27.2px;height:auto;pointer-events:none}

/* con el menú abierto sí se pega arriba: si no, tras bajar la página el botón
   de cerrar quedaba fuera de la vista */
body.menu-open .topbar{position:absolute;top:0;left:0;right:0;background:none;position:fixed;top:0;left:0;right:0}

.brand{font-weight:800;letter-spacing:-.01em;font-size:17.0px;display:inline-flex;align-items:center}

.brand img{height:52px;width:auto;display:block}

.brand span{color:var(--accent)}

.topnav{line-height:1;display:flex;align-items:center;gap:30.6px;font-size:13.94px;font-weight:500}

.topnav a{color:var(--muted);transition:color .2s}

.topnav a:hover{color:var(--ink)}

.topnav sup{font-family:var(--font-m);font-size:9.86px;color:var(--accent-text);margin-left:2px}

.topnav-yt{color:var(--accent-text);font-weight:600}

.topnav-yt:hover{color:var(--accent)}


/* ============ MENÚ ESCALONADO ============ */
.smenu-toggle{
  line-height:1;
  display:inline-flex;align-items:center;gap:7.65px;
  color:var(--accent-text);font-weight:600;font-size:13.94px;
  transition:color .3s;
}

.smenu-toggle:hover .smenu-flame{transform:scale(1.15) rotate(-6deg)}

.smenu-flame{width:26px;height:26px;flex:none;transition:transform .3s, color .3s;color:var(--accent)}

body.menu-open .smenu-toggle{color:#1a1512}

body.menu-open .smenu-flame{color:#1a1512;transform:rotate(20deg)}

.smenu-textwrap{display:inline-block;height:1em;overflow:hidden;line-height:1;position:relative;top:.02em}

.smenu-textinner{display:flex;flex-direction:column;line-height:1;transition:transform .5s cubic-bezier(.2,.8,.2,1)}

.smenu-textinner span{display:block;height:1em}

body.menu-open .smenu-textinner{transform:translateY(-1em)}


.smenu{position:fixed;inset:0;z-index:60;pointer-events:none;visibility:hidden}

.smenu.is-open{pointer-events:auto}

.smenu-prelayer,.smenu-panel{
  position:absolute;top:0;right:0;bottom:0;
  width:clamp(300px,38vw,460px);
  transform:translateX(102%);
}

.smenu-pre1{background:#1a1512}

.smenu-pre2{background:var(--accent-deep,#b34100)}

.smenu-panel{
  background:var(--accent);
  display:flex;flex-direction:column;
  padding:119.0px 44.2px 37.4px;
  overflow-y:auto;
}

.smenu-list{list-style:none;display:flex;flex-direction:column;gap:11.9px;counter-reset:smi}

.smenu-list li{overflow:hidden}

.smenu-item{
  position:relative;display:inline-block;
  font-weight:800;font-size:clamp(30.0px,2.45vw,39.0px);
  letter-spacing:-.03em;line-height:1;text-transform:uppercase;
  color:#180f08;
  transition:color .25s;
}

.smenu-item:hover{color:#fff}

.smenu-label{display:inline-block;will-change:transform;transform-origin:50% 100%}

.smenu-socials{margin-top:auto;padding-top:34.0px}

.smenu-socials-title{font-size:13.6px;font-weight:600;color:rgba(24,15,8,.6);margin-bottom:11.9px;text-transform:uppercase;letter-spacing:.08em}

.smenu-socials ul{list-style:none;display:flex;gap:22.1px;flex-wrap:wrap}

.smenu-socials a{font-weight:600;font-size:17.85px;color:#180f08;transition:color .25s}

.smenu-socials a:hover{color:#fff}

body.menu-open .topnav a{color:#1a1512}

body.menu-open .topnav sup{color:rgba(26,21,18,.6)}

body.menu-open .topnav-yt{color:#1a1512}
@media (max-width:640px){

  .smenu-prelayer,.smenu-panel{width:100%}

  .smenu-panel{padding:102.0px 27.2px 34.0px}

  .smenu-item{font-size:29.2px}

  body.menu-open .brand img{filter:brightness(0)}
}
@media (max-width:640px){

  .topbar{position:absolute;top:0;left:0;right:0;background:none;gap:15.3px;padding:9.35px 11.9px 9.35px 18.7px}

  .topnav{gap:13.6px;font-size:13.26px}

  .topnav .hide-m{display:none}
}

/* ── 1 · HERO (composición lxl: 50/50, H1 centrado, wordmark gigante) ── */
.hero_wrap{min-height:100svh;padding-top:0;padding-bottom:0;
  display:flex;flex-flow:column;position:relative;overflow:clip}
.hero_layout{flex:1;display:flex}
.hero_visual_wrap{position:relative;z-index:1;width:50%;padding:var(--space--inner-padding)}
/* los audífonos girando, flotando un poquito por encima del H1 (asset real
   de Humberto: 100 frames webp con alfa pintados en canvas a 24fps).
   El wrap lleva la entrada GSAP; el canvas, la flotación CSS: sin pisarse */
/* montados sobre el titular: las almohadillas tocan la primera línea */
.hero_flotwrap{display:block;line-height:0;margin-bottom:-4.4rem;
  position:relative;z-index:2}
.hero_flot{width:clamp(170px,17.5vw,285px);height:auto;pointer-events:none;
  filter:drop-shadow(0 26px 40px rgba(0,0,0,.55));
  animation:flotAud 6s ease-in-out infinite}
@keyframes flotAud{50%{transform:translateY(-12px) rotate(2deg)}}
@media (max-width:991px){
  /* los audífonos son EL visual del hero móvil, pero nunca deben acercarse
     al logo ni al botón del menú */
  .hero_flot{width:clamp(120px,29vw,165px)}
  .hero_flotwrap{margin-top:0;margin-bottom:-.5rem}
}
/* el contenido del hero baja para no quedar bajo el header superpuesto */
.hero_contain{padding-top:calc(var(--topbar-h) + var(--space--2))}
.hero_visual{border-radius:var(--radius--main);width:100%;height:100%;overflow:clip;
  position:relative;background:var(--surface-dark)}
.hero_visual .u-image-wrapper{position:absolute;inset:0}
.hero_visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero_content{z-index:2;width:50%;display:flex;flex-flow:column}
.hero_contain{max-width:none;width:calc(100% - var(--site--margin)*2);margin-inline:auto;padding-block:0;
  display:flex;flex-flow:column;justify-content:center;align-items:center;
  flex:1;position:relative;row-gap:0;
  /* centrado óptico: el hueco real va del borde visible de la foto (mitad
     menos su gutter interno) a la línea de margen derecha; el centro de la
     mitad queda (gutter+margen)/2 a la derecha del centro óptico */
  left:calc((var(--space--inner-padding) + var(--site--margin))/-2)}
/* tres líneas con presencia; el cuerpo debajo va a DOS líneas (max-width
   calibrado para el texto actual) */
.hero_title h1{font-family:var(--font-d);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.7rem,2.9vw,3.15rem);line-height:1.1;text-wrap:balance;text-align:center;
  color:var(--ink);margin:var(--space--2-5) 0 var(--space--2)}
.hero_sub{font-size:var(--fs-text);color:var(--ink2);text-align:center;line-height:1.6;
  margin:0 0 var(--space--2);max-width:36rem}
.hero_ctas{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center}
/* el único CTA del hero: el alta a la newsletter */
.hero_alta{display:flex;flex-flow:column;align-items:center;gap:.9rem;
  width:100%;max-width:31rem;margin-inline:auto}
.hero_form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.6rem;width:100%}
.hero_form input{height:58px;padding:0 1.3rem;border-radius:99px;
  border:1px solid var(--line2);background:rgba(0,0,0,.45);color:var(--ink);
  font-size:1rem;min-width:0;transition:border-color .3s,background .3s}
.hero_form input::placeholder{color:var(--muted)}
.hero_form input:focus{outline:none;border-color:var(--accent);background:rgba(0,0,0,.62)}
.hero_ok{margin:0;font-size:1.02rem;font-weight:600;color:var(--accent-text);text-align:center}
@media (max-width:520px){
  .hero_form{grid-template-columns:1fr}
  .hero_form .btn{justify-content:center;width:100%}
}
@media (max-width:991px){
  /* en móvil el hero va sin fotos: solo audífonos, textos y botones,
     centrados a pantalla casi completa */
  .hero_layout{flex-flow:column;justify-content:center}
  .hero_visual_wrap{display:none}
  .hero_content{width:100%}
  .hero_wrap{min-height:100svh;padding-bottom:0}
  /* el bloque arranca DEBAJO del header con aire de sobra: centrarlo hacía
     que, al no caber, se desbordara hacia arriba y los audífonos acabaran
     pegados al botón del menú */
  .hero_contain{width:calc(100% - var(--site--margin)*2);margin-inline:auto;left:0}
  /* un solo botón: dos apilados recargaban el bloque y lo empujaban */
  .hero_ctas .btn--fant{display:none}
  /* los <br> se MANTIENEN: ocultarlos pegaba las palabras ("NEGOCIOSY") */
  /* en móvil el salto forzado deja "INTERNET" huérfana: se oculta (hay un
     espacio antes, así no se pegan palabras) y el balanceo reparte solo */
  .hero_title h1{font-size:clamp(1.6rem,7.2vw,2.4rem);line-height:1.12;white-space:normal}
  .hero_title h1 br{display:none}
  }

/* botones simples (hero, extra) */





/* ── 2 · vídeo que crece con manifiesto (lxl, contrato de alineación) ── */
.vz_wrap{padding-bottom:0}
.vz_contain{row-gap:0}
.vz-start{width:min(46vw,660px);aspect-ratio:3/2;margin:0 auto;position:relative;
  border-radius:var(--radius--main)}
.vz-content{position:absolute;inset:0;overflow:hidden;border-radius:var(--radius--main);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.75);will-change:transform;z-index:5;
  /* el vídeo se disuelve por abajo en vez de cortarse: así deja ver el fondo
     real (glows + grano) y no hay banda de color plano ni borde duro */
  --mfin:104%;
  -webkit-mask-image:linear-gradient(to bottom,#000 55%,#000 var(--mfin),transparent 100%);
  mask-image:linear-gradient(to bottom,#000 55%,#000 var(--mfin),transparent 100%)}
.vz-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* el vídeo real (vimeo en modo background): cubre la caja como object-fit
   cover gracias a las unidades de contenedor; la miniatura de abajo queda
   de póster mientras carga. Sin eventos de puntero: es ambiente */
.vz-content{container-type:size}
.vz-video{position:absolute;inset:0;overflow:hidden}
.vz-video iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:max(100cqw,177.78cqh);height:max(100cqh,56.25cqw);
  border:0;pointer-events:none}
.vz-dark{position:absolute;inset:0;background:#06070a;opacity:.12}
.vz-end{width:100vw;height:100dvh;margin-top:clamp(4rem,10vh,7rem);align-self:center}
.vz-texto{position:relative;z-index:6;text-align:center;padding-bottom:46dvh;
  max-width:62rem;margin-inline:auto}
.manifiesto{font-size:var(--fs-h1);font-weight:800;text-transform:uppercase;
  line-height:1.12;color:#fff;margin:0;text-wrap:balance}
.vz-desc{font-size:var(--fs-text);color:var(--ink2);max-width:44rem;
  margin:var(--space--2-5) auto 0;line-height:1.65}
@media (max-width:991px){
  .vz-start,.vz-end{display:none}
  .vz-texto{margin-top:0;padding-top:0;padding-bottom:0}
}

/* ── el panel de sección y la "ventana" (referencia reactbits) ──
   El panel es la caja redondeada grande que contiene una sección entera;
   la ventana es la card con barra de título arriba y media debajo. Las
   cards traseras pueden asomar cortadas por el borde del panel: es el
   look de la referencia, no un bug. */
.panel{position:relative;background:var(--panel);border:1px solid var(--panel-line);
  border-radius:var(--radius-panel);overflow:clip;
  padding:clamp(1.5rem,4vw,4rem)}

/* ── 3 · LOS CHICOS (card-stack lxl: pista 450vh, sticky, perspective) ── */
.stack_wrap{position:relative}
.stack_track{height:320vh}
.stack_sticky{position:sticky;top:0;height:100dvh;display:flex;align-items:stretch}
.stack_contain{justify-content:center}
/* mismo ancho que el resto del sitio: el tope lo pone el u-container
   (--max-width--main), sin cap propio ni sangrado extra a la izquierda */
.stack_layout{display:flex;gap:var(--space--5);align-items:center;min-height:70dvh;
  width:100%}
.stack_content{width:50%}
.stack_kicker{font-size:.95rem;color:var(--muted);margin:0 0 1rem}
.stack_title{font-size:var(--fs-h1);font-weight:800;text-transform:uppercase;
  line-height:1.08;margin:0 0 var(--space--2);text-wrap:balance}
.stack_persona{border-left:2px solid var(--accent);padding-left:1.4rem;max-width:34rem}
.sp-nombre{font-size:1.5rem;font-weight:800;text-transform:uppercase;margin:0 0 .2rem}
.sp-titulo{font-size:1.02rem;font-weight:600;color:var(--accent);margin:0 0 .8rem}
.sp-bio{font-size:1rem;color:var(--ink2);line-height:1.65;margin:0}
.stack_visual_wrap{width:50%;display:flex;justify-content:center}
.stack_list{position:relative;width:60%;max-width:30rem;aspect-ratio:4/5;
  perspective:25vw}
/* sin clip en la card: la firma puede sobresalir; el redondeo lo lleva
   la propia foto */
.stack_item{position:absolute;inset:0;border-radius:.75rem;
  will-change:transform;background:var(--surface-dark);
  box-shadow:0 30px 60px -25px rgba(0,0,0,.7)}
.stack_foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  border-radius:.75rem}
/* el nombre firmado encima: script grande que asoma por la esquina.
   Cada card firma en una esquina DISTINTA para que en la pila los nombres
   no se solapen entre sí */
.stack_nombre{position:absolute;top:-1.3rem;left:-1.5rem;z-index:2;
  font-family:var(--font-script);font-weight:400;font-synthesis:none;
  font-size:clamp(3.1rem,4.9vw,5rem);line-height:1;color:var(--accent);
  transform:rotate(-7deg);transform-origin:left top;
  text-shadow:0 4px 22px rgba(0,0,0,.45)}
.stack_item:nth-child(1) .stack_nombre{top:auto;left:auto;bottom:-.9rem;right:-1.2rem;
  transform:rotate(6deg);transform-origin:right bottom}     /* Marc */
.stack_item:nth-child(2) .stack_nombre{top:auto;bottom:-.9rem;
  transform:rotate(-6deg);transform-origin:left bottom}      /* Alvaro */
.stack_item:nth-child(3) .stack_nombre{left:auto;right:-1.2rem;
  transform:rotate(7deg);transform-origin:right top}         /* Willy */
/* la 4 (Euge, la de arriba) firma en su esquina superior izquierda */
@media (max-width:900px){
  /* el manifiesto queda justo encima: la sección necesita respirar antes
     de que aparezca el primer spicy */
  .stack_wrap{padding-top:clamp(3rem,9vh,6rem)}
  .stack_layout{flex-direction:column;gap:2rem;justify-content:center}
  .stack_content,.stack_visual_wrap{width:100%}
  /* el visual arriba: la card que sale vuela hacia arriba y fuera,
     en vez de cruzar por encima del texto */
  .stack_visual_wrap{order:-1}
  .stack_list{width:min(64%,300px)}
  .stack_track{height:300vh}
}

/* ── 6 · PATROCINADORES (lusion: grid 12, cards con física) ── */
.patro_cab{max-width:46rem}
.patro_cab h2{font-size:var(--fs-h1);font-weight:800;text-transform:uppercase;
  line-height:1.06;margin:0 0 1rem;text-wrap:balance}
.patro_cab p{color:var(--muted);margin:0;line-height:1.65;max-width:38rem}
.patro_grid{display:grid;grid-template-columns:repeat(12,1fr);gap:3.5rem 2.2rem}
.p-card{grid-column:span 6;display:block;position:relative}
/* alineadas: sin escalonado */
.p-card_main{display:block;position:relative;padding-top:100%;overflow:hidden;
  clip-path:inset(15% round 20px);will-change:clip-path,transform}
.p-card_img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  will-change:transform}
.p-card_img.is-blur{filter:blur(clamp(4px,1vh,8px));opacity:0}
/* overlay marcado para que el logo respire sobre cualquier foto */
.p-card_main::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(8,9,12,.22) 0%,rgba(8,9,12,.62) 100%)}
.p-card_marca{position:absolute;inset:0;display:grid;place-items:center;z-index:2;
  pointer-events:none}

/* el logo de la marca, centrado y quieto sobre el arte con parallax:
   max en ambos ejes para que convivan logos anchos y verticales */
.p-card_marca img{max-width:44%;max-height:30%;width:auto;height:auto;
  opacity:.95;filter:drop-shadow(0 8px 24px rgba(0,0,0,.45))}
.p-card_footer{padding:1rem .2rem 0}
.p-line1{font:600 max(.82vw,.74rem) var(--font-d);letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);min-height:1.2em}
.p-line2{font:800 min(3vw,2.4rem) var(--font-d);height:1.15em;overflow:hidden;margin-bottom:.35rem;
  position:relative;color:#fff;margin-top:.25rem;text-transform:uppercase}
.p-line2_icon{position:absolute;width:.8em;height:.8em;top:calc(50% - .48em);left:-1em;
  color:var(--accent);will-change:transform;font-style:normal}
.p-line2_inner{display:inline-block}
.p-line2 .col{display:inline-block;position:relative;height:1em;white-space:pre;
  will-change:transform}
/* los señuelos del roll: fuera del flujo para no ensanchar la columna */
.p-line2 .col_alt{position:absolute;left:0;top:100%;display:block;white-space:pre}
@media (max-width:991px){
  /* una sola columna: con 12 columnas los huecos (11 x 2.2rem) sumaban
     más que el ancho disponible y la card se salía por la derecha */
  .patro_grid{grid-template-columns:1fr;gap:2.6rem}
  .p-card{grid-column:auto}
  .p-line1{font-size:.72rem}
  .p-line2{font-size:1.6rem}
}
.patro_cta{text-align:center}

/* ── 7 · newsletter + footer ── */
.news_contain{text-align:center;max-width:60rem;row-gap:0}






.news-ok{color:var(--accent);font-weight:600}
.pie_wrap{border-top:1px solid var(--line);padding-top:0;padding-bottom:0}
.pie_contain{row-gap:1.4rem;padding:3rem 0 3.4rem}








/* el logo del header entra al dejar el hero: así la imagen del hero luce con
   el mismo espaciado por los cuatro lados (patrón lxl) */

/* geometría del nav copiada de lxl: barra de 3rem dentro de un wrap fijo */
.topbar > *{pointer-events:auto}
.topbar{min-height:calc(51px + 25.5px)}
/* el contenido del hero se centra en la pantalla: sin colchón artificial arriba */
.hero_contain{padding-top:0}
@media (max-width:991px){
  .topbar{padding-top:18px;min-height:auto}
}

/* ── header: Newsletter · logo centrado · Menú ── */
.topbar{gap:1rem}
.tb-der{display:flex;align-items:center;gap:clamp(1.2rem,2.4vw,2.2rem)}
.brand{display:block;width:min(142px,27vw);line-height:0;flex:none}
.brand-svg{display:block;width:100%;height:auto;color:var(--ink);overflow:visible}
/* piezas del logo: entran por separado */
.brand-letras{opacity:0}
.brand-llama{opacity:0;transform-box:fill-box;transform-origin:50% 90%}
/* el menú, más grande */
/* el menú como píldora glass (patrón lusion) con el fueguito de marca */
.smenu-toggle{display:inline-flex;align-items:center;gap:.5rem;line-height:1;
  font-size:1rem;font-weight:600;letter-spacing:-.005em;color:#fff;
  padding:.68rem 1.1rem .68rem 1.3rem;border-radius:99px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
  margin-right:clamp(.2rem,1.2vw,1.1rem);
  transition:background .3s ease,border-color .3s ease,transform .3s cubic-bezier(.625,.05,0,1)}
.smenu-toggle:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.3);
  transform:translateY(-1px)}
body.menu-open .smenu-toggle{background:rgba(24,15,8,.22);border-color:rgba(24,15,8,.3)}
.smenu-flame{width:26px;height:26px;flex:none;margin-top:-1px}
@media (max-width:991px){
  .brand{width:min(88px,24vw)}
  .smenu-toggle{font-size:.88rem;padding:.52rem .9rem .52rem 1rem;gap:.42rem}
  .smenu-flame{width:17px;height:23px}
  .topbar{padding-top:16px}
}

/* velo del header: aparece al bajar para que el logo y el menú se lean
   siempre, pase lo que pase debajo */
.topbar{--velo:0}
.topbar::before{content:"";position:absolute;left:0;right:0;top:0;z-index:-1;opacity:var(--velo);
  height:150%;
  background:linear-gradient(to bottom,rgba(8,9,12,.88) 0%,rgba(8,9,12,.72) 42%,
    rgba(8,9,12,.4) 72%,transparent 100%);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  -webkit-mask-image:linear-gradient(to bottom,#000 62%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 62%,transparent 100%);
  transition:none;pointer-events:none}

.topbar{padding-bottom:14px}

/* la barra ya es fija en esta página: se anula la compensación del menú */
body.menu-open{padding-top:0!important}
/* con el menú abierto el velo del header sobra: oscurecía el panel naranja
   y el botón Cerrar no se terminaba de ver */
body.menu-open .topbar::before{opacity:0}

/* todo el menú alineado a la misma línea que "Síguenos" */
.smenu-list li,.smenu-item{padding-left:0;margin-left:0}
.smenu-list{padding-left:0}
.smenu-socials ul{padding-left:0;margin-left:0}
.smenu-socials{padding-left:0}
/* la primera capa del menú, más clara: así se ve el barrido en cascada */
.smenu-pre1{background:#4a3c33}

/* el botón del menú: ligero y en mayúsculas */
.smenu-toggle{font-weight:300;text-transform:uppercase;letter-spacing:.06em;font-size:.94rem}
.smenu-textwrap,.smenu-textinner span{font-weight:300}

/* el fuego del logo dentro de la píldora: respira y se aviva al pasar */
.smenu-flame{width:22px;height:30px;flex:none;overflow:visible;color:var(--accent)}
.fuego-cuerpo{transform-box:fill-box;transform-origin:50% 92%;
  animation:fuego-late 2.4s ease-in-out infinite}
@keyframes fuego-late{
  0%,100%{transform:scaleY(1) scaleX(1) rotate(0deg)}
  35%{transform:scaleY(1.07) scaleX(.97) rotate(-1.6deg)}
  70%{transform:scaleY(.96) scaleX(1.03) rotate(1.2deg)}
}
.smenu-toggle:hover .smenu-flame{color:#ff7a2e}
.smenu-toggle:hover .fuego-cuerpo{animation-duration:1.1s}
@media (prefers-reduced-motion:reduce){.fuego-cuerpo{animation:none}}
@media (max-width:991px){.smenu-flame{width:19px;height:26px}}

/* el gesto de la biblioteca, portado: la pieza se levanta, se inclina un punto
   y se enciende con el halo naranja de marca */


.p-card:hover .p-card_main{
  filter:drop-shadow(0 26px 44px rgba(0,0,0,.5)) drop-shadow(0 16px 54px rgba(255,95,0,.22))}
/* (el glow al pasar por la foto del hero se quitó: el recorte de la sección
   lo cortaba en seco y quedaba peor que no tenerlo) */

/* ── botones: un solo componente para toda la página ── */
.btn{display:inline-flex;align-items:center;gap:.7rem;height:58px;padding:0 1.7rem;
  border-radius:99px;font:600 1rem/1 var(--font-d);white-space:nowrap;cursor:pointer;
  border:1px solid transparent;text-decoration:none;
  transition:transform .35s cubic-bezier(.625,.05,0,1),background .3s,border-color .3s}
.btn:hover{transform:translateY(-2px)}
.btn_f{font-style:normal;font-size:1.15em;display:inline-block;
  transition:transform .35s cubic-bezier(.625,.05,0,1)}
.btn:hover .btn_f{transform:translateX(5px)}
.btn--acc{background:var(--accent);color:#0b0c0f}
.btn--acc:hover{background:#ff7620}
.btn--fant{background:rgba(255,255,255,.07);color:var(--ink);border-color:rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.btn--fant:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.3)}
.btn--negro{background:#0b0c0f;color:#fff}
.btn--negro:hover{background:#1a1d24}

/* ═══════════════════════════════════════════════════════════════════════
   MITAD INFERIOR DE LA PÁGINA
   Reescrita entera: las reglas anteriores se perdieron en una limpieza y
   estas secciones estaban renderizando con los estilos por defecto del
   navegador. Un solo idioma para todas: fondo oscuro de la casa, el naranja
   SOLO como acento puntual (nunca como campo), y los bordes exteriores de
   cada bloque cayendo en las mismas dos líneas de margen.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── cabecera de sección: el mismo componente en todas ── */
.sec_cab{display:flex;flex-flow:column;gap:var(--space--inner-padding);
  margin-bottom:var(--space--5);max-width:64rem}
.eyebrow{display:flex;align-items:center;gap:.8rem;margin:0;
  font-size:.78rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);line-height:1}
/* la marquita naranja ancla el arranque de sección a la línea de margen */
.eyebrow::before{content:"";flex:none;width:1.6rem;height:2px;background:var(--accent)}
.sec_tit{margin:0;font-family:var(--font-d);font-weight:800;text-transform:uppercase;
  font-size:var(--fs-h1);line-height:1.02;letter-spacing:-.022em;color:var(--ink);
  text-wrap:balance}
.sec_desc{margin:0;font-size:var(--fs-text);line-height:1.62;color:var(--ink2);
  max-width:38rem}

/* variante en fila: titular pegado al margen izquierdo, entradilla al derecho */
.sec_cab--fila{max-width:none}
@media (min-width:900px){
  .sec_cab--fila{flex-flow:row;align-items:flex-end;justify-content:space-between;
    gap:var(--space--5)}
  .sec_cab--fila>div{flex:1 1 auto;min-width:0}
  .sec_cab--fila .sec_desc{flex:0 1 24rem;margin-bottom:.35rem}
}

/* ── 4 · DECLARACIÓN: el pico tipográfico de la página ──
   Centrada: es el único momento de la home que respira en el eje, para no
   llevarlo todo a los bordes */
/* texto a la izquierda en la línea del sitio; el micro va a la derecha */
.decl .u-container{align-items:flex-start;text-align:left;row-gap:.5rem}
.decl_l{margin:0;font-family:var(--font-d);font-weight:800;text-transform:uppercase;
  font-size:var(--fs-decl);
  line-height:.94;letter-spacing:-.035em;color:var(--ink)}

/* ══════════════════════════════════════════════════════════
   5 · HERRAMIENTAS — sin cajas: texto a un lado, mockup de
   contenido real al otro, con mucho aire entre bloques.
   ══════════════════════════════════════════════════════════ */
/* A partir del divisor es OTRO capítulo: fondo propio opaco (sin el grid
   del cielo) y la línea a sangre marcando el cambio, con el micro 3D de pie
   sobre ella, anclado al final del titular de la declaración */
.tools,.patro,.muro,.news,.pie{background:#0e1015}
.tools{position:relative;border-top:1px solid var(--line)}
.mic3d{position:absolute;top:1px;
  left:calc(max(var(--site--margin),(100% - var(--max-width--main))/2) + var(--fs-decl)*9.6 - 54px);
  transform:translateY(-100%);
  width:clamp(140px,13.5vw,215px);height:auto;pointer-events:none;z-index:2;
  filter:drop-shadow(0 30px 36px rgba(0,0,0,.55))}
@media (max-width:991px){
  .decl .u-container{align-items:center;text-align:center}
  .decl{padding-bottom:calc(3.5rem + 2.6*clamp(110px,28vw,170px))}
  .mic3d{left:50%;right:auto;transform:translate(-50%,-100%);
    width:clamp(110px,28vw,170px)}
}

.patro_pie{margin-top:var(--space--5);display:flex;justify-content:center}

/* la cabecera de la sección, centrada */
.tools .sec_cab{align-items:center;text-align:center;max-width:44rem;
  margin-inline:auto;margin-bottom:clamp(3.5rem,8vh,6rem)}
/* Las herramientas van una debajo de otra y con tres bloques se leían como
   un bloque continuo. Una línea fina entre ellas las separa sin ruido: el
   hueco se parte en dos mitades para que el filete quede centrado, no
   pegado al que empieza. Mismo trazo que el divisor de la biblioteca. */
.tools_list{display:flex;flex-flow:column;gap:clamp(3.4rem,8vh,6rem)}
.tools_list .tool+.tool{
  padding-top:clamp(3.4rem,8vh,6rem);
  border-top:1px solid transparent;
  border-image:linear-gradient(90deg,transparent,rgba(255,255,255,.16) 14%,
    rgba(255,255,255,.16) 86%,transparent) 1;
}
.tool{display:grid;gap:clamp(2.5rem,7vw,7.5rem);align-items:center}
@media (min-width:960px){
  .tool{grid-template-columns:minmax(0,1fr) minmax(0,1.06fr)}
  .tool--inv .tool_txt{order:2}
}
.tool_txt{display:flex;flex-flow:column;align-items:flex-start;gap:1.9rem}
.tool_h{margin:0;font-family:var(--font-d);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.75rem,2.85vw,2.85rem);line-height:1.06;letter-spacing:-.022em;
  color:var(--ink);text-wrap:balance}
.tool_p{margin:0;font-size:var(--fs-text);line-height:1.62;color:var(--ink2);
  max-width:31rem}
.tool_txt .btn{margin-top:.5rem}
.tool_demo{position:relative}

/* — mockup 1: la búsqueda del Archivo — */
.ar_barra{display:flex;align-items:center;gap:.7rem;height:3.2rem;padding:0 1.15rem;
  border:1px solid var(--line2);border-radius:99px;background:rgba(0,0,0,.45);
  font-size:1rem;color:var(--ink)}
.ar_lupa{flex:none;width:1.05rem;height:1.05rem;stroke:var(--muted);stroke-width:2;fill:none}
.ar_q{white-space:nowrap;font-weight:500}
.ar_caret{width:2px;height:1.15em;background:var(--accent);display:inline-block;
  animation:toolParpadeo 1s steps(2,start) infinite}
@keyframes toolParpadeo{to{opacity:0}}
.tool.is-listo .ar_caret{animation-play-state:paused;opacity:0}
.ar_res{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:.95rem}
.ar_fila{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1.1rem;
  align-items:center;padding:.85rem 1rem .85rem .85rem;border-radius:14px;
  background:rgba(255,255,255,.04);border:1px solid transparent;
  opacity:0;transform:translateY(10px);transition:background .3s,border-color .3s}
.tool.is-listo .ar_fila{opacity:1;transform:none;
  transition:opacity .55s cubic-bezier(.3,.9,.3,1) calc(var(--i,0)*.1s + .12s),
             transform .55s cubic-bezier(.3,.9,.3,1) calc(var(--i,0)*.1s + .12s),
             background .3s,border-color .3s}
.ar_fila:hover{background:rgba(255,255,255,.075);border-color:var(--line2)}
.ar_mini{flex:none;width:84px;aspect-ratio:16/9;object-fit:cover;border-radius:8px}
.ar_txt{min-width:0;display:flex;flex-flow:column;gap:.18rem}
.ar_txt b{font-size:.88rem;font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ar_txt>span{font-size:.8rem;line-height:1.45;color:#a2aab8;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ar_txt mark{background:none;color:var(--accent-text);font-weight:600}
.ar_min{flex:none;font-family:var(--font-m);font-size:.74rem;font-weight:600;
  padding:.32rem .58rem;border-radius:7px;background:rgba(255,95,0,.14);
  color:var(--accent-text)}
.ar_cont{margin:1.5rem 0 0;font-size:.82rem;color:var(--muted);
  opacity:0;transform:translateY(8px)}
.tool.is-listo .ar_cont{opacity:1;transform:none;
  transition:opacity .5s ease .55s,transform .5s cubic-bezier(.3,.9,.3,1) .55s}
.ar_cont b{color:var(--ink);font-variant-numeric:tabular-nums}

/* — mockup 2: la balda — solo las tres portadas, grandes y juntas — */
.bi_balda{list-style:none;margin:0;padding:0;display:flex;justify-content:center;
  align-items:flex-end;perspective:1100px}
.bi_libro{flex:0 0 auto;width:34%;margin-inline:-3.2%;
  transform:rotate(var(--rot,0deg)) translateY(var(--sube,0));
  transform-origin:bottom center;
  transition:transform .55s cubic-bezier(.3,.9,.3,1),filter .55s}
.bi_libro:nth-child(1){--rot:-7deg;--sube:6px;z-index:1}
.bi_libro:nth-child(2){--rot:0deg;z-index:3}
.bi_libro:nth-child(3){--rot:7deg;--sube:6px;z-index:2}
.bi_libro img{display:block;width:100%;height:auto}
.bi_libro:hover{transform:rotate(0deg) translateY(-20px) scale(1.05);z-index:4}
/* Los carteles son más estrechos que un libro y llevan su propio borde de
   papel en el mockup, así que piden algo más de ancho.

   Pero al subir el ancho y bajar el solape se salían de la caja por los dos
   lados: a 393 px el primero empezaba en −12 y el tercero acababa en 405.
   La culpa no es solo del ancho: girar un cartel 7° ENSANCHA su caja. Para un
   cartel de proporción 2:3, la caja pasa a medir w·cos7° + h·sen7° ≈ 1,17w,
   o sea un 8,6% de más asomando por cada lado, que el ancho declarado no ve.

   Y el solape negativo tiraba además de los extremos: el primer cartel lleva
   un margen izquierdo negativo que lo saca del centrado, y el último igual por
   la derecha. Así que el solape se queda SOLO entre carteles, y la balda
   reserva con padding el vuelo que el giro no declara. */
.bi_balda--cine{padding-inline:9%}
.bi_balda--cine .bi_libro{width:38%;margin-inline:-3%}
.bi_balda--cine .bi_libro:first-child{margin-left:0}
.bi_balda--cine .bi_libro:last-child{margin-right:0}
@media (max-width:959px){
  .ar_mini{width:68px}
}

/* ── 7 · inversiones: cabecera pegada a las cards ── */
.inv_cont{row-gap:1.6rem}
.p-card_marca img{max-width:52%;max-height:34%;width:auto;height:auto;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,.5))}

/* ── 7b · el muro de patrocinadores: foco naranja que sigue al cursor ── */
.muro_cont{row-gap:1.6rem}
.muro .sec_cab{align-items:center;text-align:center;max-width:44rem;margin-inline:auto}
.muro_grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--site--gutter)}
@media (max-width:900px){.muro_grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:540px){.muro_grid{grid-template-columns:1fr}}
.muro_tile{position:relative;display:flex;align-items:center;
  justify-content:center;min-height:clamp(150px,20vw,210px);padding:1.4rem;
  border-radius:var(--radius-card);border:1px solid var(--panel-line);
  background:var(--panel);overflow:hidden;
  transition:background .35s,border-color .35s}
.muro_tile:hover{background:var(--accent);border-color:var(--accent)}
.muro_logo{position:relative;z-index:1;max-width:58%;max-height:44%;width:auto;height:auto;
  opacity:.55;filter:grayscale(1);
  transition:opacity .35s,transform .45s cubic-bezier(.625,.05,0,1)}
.muro_tile:hover .muro_logo{opacity:0;transform:translateY(-26px)}
.muro_info{position:absolute;inset:0;z-index:2;display:flex;flex-flow:column;
  align-items:center;justify-content:center;gap:.55rem;text-align:center;
  padding:1.3rem 1.6rem;opacity:0;transform:translateY(12px);
  transition:opacity .35s,transform .45s cubic-bezier(.625,.05,0,1)}
.muro_tile:hover .muro_info{opacity:1;transform:none}
.muro_info span{font-size:clamp(.95rem,1.15vw,1.1rem);line-height:1.5;color:#0b0c0f;
  font-weight:600;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden}
.muro_info i{font-style:normal;font-size:.85rem;font-weight:400;color:#0b0c0f;
  border-bottom:1px solid rgba(11,12,15,.55);padding-bottom:2px;margin-top:.9rem}
@media (hover:none){
  .muro_logo{opacity:.85;filter:none}
  .muro_info{display:none}
}

/* ── 8 · NEWSLETTER ── */
/* caja angosta, todo centrado y el formulario debajo */
.news_caja{display:flex;flex-flow:column;align-items:center;text-align:center;
  gap:var(--space--2);width:100%;max-width:60rem;margin-inline:auto;
  padding:clamp(2.2rem,4.5vw,3.8rem) clamp(1.5rem,4vw,3.5rem);
  border:1px solid var(--panel-line);border-radius:var(--radius-panel);
  background:var(--panel)}
.news_txt{display:flex;flex-flow:column;align-items:center;gap:var(--space--inner-padding)}
.news_txt .sec_desc{max-width:34rem}
.news_form{display:grid;gap:.75rem;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;justify-content:center;width:100%;max-width:34rem}
.news_form input{height:58px;padding:0 1.35rem;border-radius:99px;
  border:1px solid var(--line2);background:rgba(0,0,0,.42);color:var(--ink);
  font-size:1rem;min-width:0;transition:border-color .3s,background .3s}
.news_form input::placeholder{color:var(--muted)}
.news_form input:focus{outline:none;border-color:var(--accent);background:rgba(0,0,0,.6)}
.news_nota{grid-column:1/-1;margin:0;font-size:.8rem;color:var(--muted)}
@media (max-width:520px){
  .news_form{grid-template-columns:1fr}
  .news_form .btn{justify-content:center}
}
/* ── 9 · PIE (logo real en gradiente + CTA grande + fila de enlaces) ── */
.pie{border-top:1px solid var(--line);padding-top:var(--space--section-small);overflow:clip}
.pie .u-container{row-gap:0}   /* el ritmo lo ponen los padding de cada fila */
.pie_cta{display:flex;flex-flow:row wrap;align-items:center;justify-content:space-between;
  gap:1.6rem var(--space--5);padding-bottom:var(--space--5)}
.pie_gran{margin:0;font-weight:800;text-transform:uppercase;
  font-size:clamp(1.6rem,3vw,2.9rem);line-height:1.12;letter-spacing:-.02em;
  max-width:15em;text-wrap:balance}
.pie_bajo{display:flex;flex-flow:row wrap;justify-content:space-between;align-items:center;
  gap:.8rem 2rem;padding-block:1.4rem;border-top:1px solid var(--line)}
.pie_nav,.pie_social{display:flex;flex-flow:row wrap;gap:.5rem 1.9rem}
.pie_nav a,.pie_social a{font-size:.98rem;font-weight:500;color:var(--ink2);transition:color .3s}
.pie_nav a:hover,.pie_social a:hover{color:var(--ink)}
.pie_legal{display:flex;flex-flow:row wrap;justify-content:space-between;gap:.6rem 2rem;
  padding-block:1.2rem;border-top:1px solid var(--line);font-size:.85rem;color:var(--muted)}
.pie_nota{font-variant-numeric:tabular-nums}
.pie_leyes{display:flex;gap:1.5rem}
.pie_leyes a{color:var(--muted);transition:color .3s}
.pie_leyes a:hover{color:var(--ink)}
/* el logo real a sangre, fundiéndose hacia abajo y PEGADO al borde inferior:
   se hunde un poco bajo el borde (el clip del pie lo corta) para que las
   letras besen el final de la página en su zona ya fundida */
/* el logo real a sangre, fundiéndose hacia abajo. El translateY hunde el
   aire del svg (~13%) + sangrado y el clip del pie corta las letras */
.pie_marca{display:block;width:100%;height:auto;margin-top:var(--space--2-5);
  transform:translateY(2.7vw);
  -webkit-mask-image:linear-gradient(#000 25%,transparent 100%);
  mask-image:linear-gradient(#000 25%,transparent 100%)}
@media (max-width:700px){
  /* enlaces del pie en dos columnas limpias, no en filas que se parten */
  .pie_bajo{flex-flow:column;align-items:stretch;gap:1.4rem}
  .pie_nav,.pie_social{display:grid;grid-template-columns:1fr 1fr;gap:.9rem 1rem}
  .pie_legal{flex-flow:column;align-items:flex-start;gap:.7rem}
  .pie_leyes{gap:1.2rem}
}
@media (max-width:700px){
  .pie_cta{flex-flow:column;align-items:flex-start}
  .pie_bajo,.pie_legal{flex-flow:column;align-items:flex-start}
}

/* ── el crédito del estudio: barra propia aislada al final de la página;
   el logo gigante sangra contra su borde superior ── */
.credito_barra{position:relative;z-index:2;background:#0a0b0e;
  border-top:1px solid var(--line);padding:1.05rem 1rem;
  display:flex;justify-content:center}
/* en móvil el crédito va CENTRADO y el botón de subir se eleva por
   encima de la barra para no pisarlo */
@media (max-width:700px){
  .credito_barra{justify-content:center;padding:1.05rem 1rem}
}
.credito{position:relative;display:inline-flex;align-items:center;
  font-size:.95rem;color:var(--muted);white-space:nowrap;transition:color .3s}
.credito b{font-weight:700;color:var(--accent)}   /* color plano */
.credito::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1.5px;
  background:var(--accent);transform:scaleX(0);transform-origin:left center;
  transition:transform .45s cubic-bezier(.625,.05,0,1)}
.credito:hover{color:var(--ink)}
.credito:hover::after{transform:scaleX(1)}

/* ── botón flotante de subir con aro de progreso del scroll ── */
.subir{position:fixed;right:1.3rem;bottom:1.3rem;z-index:90;width:52px;height:52px;
  border-radius:50%;border:none;background:rgba(11,12,15,.6);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--ink);
  display:grid;place-items:center;cursor:pointer;opacity:0;visibility:hidden;
  transform:translateY(10px);pointer-events:none;
  box-shadow:0 0 18px rgba(255,95,0,.18);
  transition:opacity .35s,transform .35s,visibility .35s,box-shadow .3s}
.subir_flecha{width:22px;height:22px}
/* el aro: pista tenue + progreso naranja que se llena con el scroll */
.subir_aro{position:absolute;inset:0;width:100%;height:100%;
  transform:rotate(-90deg)}
.subir_pista,.subir_prog{fill:none;stroke-width:2.5}
.subir_pista{stroke:rgba(255,95,0,.18)}
.subir_prog{stroke:var(--accent);stroke-linecap:round;
  stroke-dasharray:150.8;stroke-dashoffset:150.8}
.subir.is-vis{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.subir:hover{box-shadow:0 0 26px rgba(255,95,0,.4)}
/* en móvil el botón se eleva sobre la barra del crédito */
@media (max-width:700px){
  .subir{bottom:4.4rem;right:1rem;width:46px;height:46px}
}

/* ── barra de scroll de la casa ── */
html{scrollbar-color:#ff5f00 #0e1015;scrollbar-width:thin}
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:#0b0c0f}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#ff7620,#c74b00);
  border-radius:99px;border:3px solid #0b0c0f}
::-webkit-scrollbar-thumb:hover{background:#ff7620}

/* ── las ascuas del cursor (canvas de js/ascuas.js) ── */
.ascuas{position:fixed;inset:0;z-index:150;pointer-events:none;mix-blend-mode:screen}

/* ── móvil: el menú desplegado, con la lista centrada verticalmente y
   las redes ancladas abajo (al final, para ganar la cascada) ── */
@media (max-width:640px){
  .smenu-panel{justify-content:center;padding:5.5rem 1.7rem 2rem}
  .smenu-list{flex:0 0 auto}
  .smenu-socials{position:absolute;left:1.7rem;right:1.7rem;bottom:2rem;
    margin-top:0;padding-top:0}
}

/* con el menú abierto el logo va sobre naranja: sus piezas se oscurecen
   (la regla original apuntaba a un <img> y aquí el logo es SVG inline) */
body.menu-open .brand-svg{color:#1a1512}
body.menu-open .brand-llama{fill:#1a1512}

/* ── móvil: el hero arranca debajo del header con aire de sobra.
   Va al final a propósito: más arriba hay un .hero_contain{padding-top:0}
   que anulaba esta separación y dejaba los audífonos pegados al menú. ── */
@media (max-width:991px){
  .hero_contain{justify-content:flex-start;
    padding-top:calc(var(--topbar-h) + 2.6rem);padding-bottom:2rem}
}
@media (max-width:991px) and (max-height:700px){
  /* pantallas cortas: todo un punto más compacto para que quepa */
  .hero_contain{padding-top:calc(var(--topbar-h) + 1.4rem)}
  .hero_flot{width:clamp(104px,25vw,140px)}
  .hero_title h1{font-size:clamp(1.5rem,6.4vw,2rem)}
}

/* ── menú desplegado: item pendiente, redes con logo y más aire ── */
.smenu-item.is-off{color:rgba(24,15,8,.42);cursor:default;
  display:inline-flex;align-items:baseline;gap:.6rem}
.smenu-item.is-off:hover{color:rgba(24,15,8,.42)}
/* las redes, con su logo: en texto la "X" se quedaba sola en otra línea */
.smenu-socials ul{display:flex;gap:1.1rem;align-items:center;flex-wrap:nowrap}
.smenu-socials a{display:grid;place-items:center;width:44px;height:44px;
  border-radius:12px;border:1px solid rgba(24,15,8,.22);color:#180f08;
  transition:background .25s,border-color .25s}
.smenu-socials a svg{width:21px;height:21px;display:block}
.smenu-socials a:hover{background:rgba(24,15,8,.1);border-color:rgba(24,15,8,.4)}

@media (max-width:640px){
  /* el bloque sube un punto y las redes dejan de estar pegadas al menú */
  .smenu-panel{justify-content:flex-start;padding-top:6.5rem}
  .smenu-socials{bottom:2.4rem}
  .smenu-socials-title{margin-bottom:1rem}
}

/* la manuscrita va inclinada: necesita algo más de aire a la derecha
   cuando le sigue texto en la misma línea (hero) */
.hero_title h1 .u-accent{padding-right:.24em}

/* ── "Saber más" del equipo: lleva a la landing equipo.html ──
   (la ficha-popup .fe-* se retiró a petición de Humberto) */
.sp-ficha{margin-top:1.6rem}
.sp-ficha:hover{
  border-color:rgba(255,95,0,.55);
  box-shadow:0 12px 30px -14px rgba(255,95,0,.45);
}