/* ============================
   FONTS
   ============================ */
@font-face {
  font-family: 'Tw Cen MT';
  src: url('../assets/fonts/TwCenMT-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Utendo';
  src: url('../assets/fonts/Utendo-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Utendo';
  src: url('../assets/fonts/Utendo-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ============================
   TOKENS
   ============================ */
:root{
  --orange: #FF4E0E;
  --navy: #161C3B;
  --white: #FFFFFF;
  --beige: #F2E8D4;

  --font-display: 'Tw Cen MT', 'Arial Narrow', sans-serif;
  --font-body: 'Utendo', 'Segoe UI', sans-serif;

  /* Pill is reserved for CTAs only — everything structural uses --radius-sm,
     so the pill reads as a deliberate accent instead of the default shape. */
  --radius-pill: 999px;
  --radius-sm: 10px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* Theme surfaces — the fixed brand-navy blocks (manifesto, contacto, bento
     wide/branding cells) stay literally var(--navy) in both themes by design,
     so only page-level surfaces/text are re-pointed here for the toggle. */
  --surface: var(--white);
  --surface-alt: var(--beige);
  --ink: var(--navy);
  --ink-rgb: 22, 28, 59;
  --nav-bg: rgba(255, 255, 255, 0.97);
  --nav-border: rgba(22, 28, 59, 0.14);
}

:root[data-theme="dark"]{
  --surface: #0B0E1F;
  --surface-alt: #1B2044;
  --ink: #F5F0E6;
  --ink-rgb: 245, 240, 230;
  --nav-bg: rgba(18, 22, 44, 0.92);
  --nav-border: rgba(245, 240, 230, 0.14);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
h1,h2,h3{ font-family: var(--font-display); font-weight: 700; margin: 0; line-height: 1.05; }
p{ margin: 0; }
ul{ margin:0; padding:0; }

.skip-link{
  position:absolute; left:-999px; top:0; z-index:200;
  background:var(--orange); color:var(--white); padding:0.75rem 1.25rem;
}
.skip-link:focus{ left:1rem; top:1rem; }

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

/* Organic grain over every surface — the brand manual calls for "texturas
   orgánicas"; without it every section is flat vector color. */
.grain-overlay{
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

.reveal{ opacity: 1; }

/* Word-by-word reveal: JS wraps each word in a mask + inner span and
   animates .word-inner. If JS never runs, the heading is still plain,
   unwrapped, fully visible text — no hidden-by-default state here. */
.word-mask{ display: inline-block; overflow: hidden; vertical-align: top; }
.word-inner{ display: inline-block; will-change: transform; }

/* Eco del logo en los títulos (manual pág. 10): una letra descolgada en
   naranja, envuelta por main.js durante el split de .word-reveal. */
.letter-drop{
  display: inline-block;
  transform: translateY(0.12em) rotate(9deg);
  color: var(--orange);
}

/* ============================
   TRAZOS ORGÁNICOS (manual pág. 20)
   Subrayados y círculos tipo marcador sobre palabras clave. main.js los
   dibuja con stroke-dashoffset al entrar al viewport; sin JS quedan
   visibles completos desde el inicio.
   ============================ */
.scribble{ position: relative; display: inline-block; }
.scribble svg{
  position: absolute;
  left: -2%;
  width: 104%;
  overflow: visible;
  pointer-events: none;
}
.scribble--underline svg{ bottom: -0.24em; height: 0.32em; }
.scribble--circle svg{
  top: 50%;
  left: -7%;
  width: 114%;
  height: 1.9em;
  transform: translateY(-50%);
}
.scribble path{
  fill: none;
  stroke: var(--orange);
  stroke-width: 3.5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

/* ============================
   BUTTONS
   ============================ */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border-radius: var(--radius-pill);
  padding: 0.85rem 1.75rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.2s var(--ease), background-color 0.2s var(--ease), color 0.2s var(--ease), box-shadow 0.3s var(--ease);
}
.btn:active{ transform: translateY(1px) scale(0.98); }
.btn--primary{
  background: var(--orange);
  color: var(--white);
  box-shadow: 0 4px 20px rgba(255,78,14,0.35);
}
.btn--primary:hover{ background: #e64509; box-shadow: 0 6px 28px rgba(255,78,14,0.55); }
.btn--primary:focus-visible{ outline: 2px solid var(--orange); outline-offset: 3px; }
.btn--lg{ padding: 1.1rem 2.25rem; font-size: 1.05rem; }

/* Glow: reserved for the standalone "Hablemos" CTAs (hero, contacto) — a
   breathing orange halo draws the eye without following the button around
   the whole site, so the persistent nav pill stays calm by comparison. */
.btn--primary.btn--lg{
  animation: btn-glow-pulse 2.6s ease-in-out infinite;
}
.btn--primary.btn--lg:hover{
  animation-play-state: paused;
}
@keyframes btn-glow-pulse{
  0%, 100%{ box-shadow: 0 4px 20px rgba(255,78,14,0.35), 0 0 0 0 rgba(255,78,14,0.35); }
  50%{ box-shadow: 0 4px 20px rgba(255,78,14,0.35), 0 0 26px 8px rgba(255,78,14,0.25); }
}
@media (prefers-reduced-motion: reduce){
  .btn--primary.btn--lg{ animation: none; }
}

/* ============================
   FLOATING NAV
   ============================ */
.floating-nav-wrap{
  position: fixed;
  top: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.floating-nav{
  position: relative;
  display: flex;
  align-items: center;
  height: 48px;
  max-width: 640px;
  width: auto;
  padding: 0 0.5rem 0 1rem;
  background: var(--nav-bg);
  border: 2px solid var(--nav-border);
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 30px rgba(255,78,14,0.12);
  overflow: hidden;
  transition: max-width 1.3s var(--ease), box-shadow 0.6s var(--ease);
}
.floating-nav__mark{
  flex-shrink: 0;
  display: flex;
  align-items: center;
  transition: opacity 0.8s var(--ease), transform 0.9s var(--ease);
}
.floating-nav__mark img{ display: block; height: 1.5rem; width: auto; }
.floating-nav__links{
  display: flex;
  align-items: center;
  gap: 0.15rem;
  margin-left: 0.6rem;
  white-space: nowrap;
  transition: opacity 0.8s var(--ease), transform 0.9s var(--ease);
}
.floating-nav__links a{
  padding: 0.55rem 0.8rem;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 0.9rem;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.floating-nav__links a:hover{ color: var(--orange); }
.floating-nav__cta{
  background: var(--orange);
  color: var(--white) !important;
  padding: 0.55rem 1.1rem !important;
  margin-left: 0.25rem;
}
.floating-nav__cta:hover{ background: #e64509; color: var(--white) !important; }

/* "U rebelde" (manual pág. 10): main.js envuelve una letra de cada link del
   menú; al hover se descuelga y rota como la "u" del logo rompe la
   alineación. También responde a foco de teclado. */
.nav-drop{
  display: inline-block;
  transition: transform 0.35s var(--ease), color 0.35s var(--ease);
}
.floating-nav__links a:hover .nav-drop,
.floating-nav__links a:focus-visible .nav-drop,
.mobile-menu a:hover .nav-drop,
.mobile-menu a:focus-visible .nav-drop{
  transform: translateY(0.16em) rotate(14deg);
  color: var(--orange);
}
/* Dentro de los CTAs naranjas la letra cae en navy para mantener contraste */
.floating-nav__cta:hover .nav-drop,
.floating-nav__cta:focus-visible .nav-drop,
.mobile-menu .btn--primary:hover .nav-drop,
.mobile-menu .btn--primary:focus-visible .nav-drop{
  color: var(--navy);
}

/* ============================
   THEME TOGGLE (light / dark)
   Sun and moon icons are stacked and cross-fade + rotate into each other —
   same swap technique as the hero's gooey headline, scaled down.
   ============================ */
.theme-toggle{
  position: relative;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background: rgba(var(--ink-rgb), 0.08);
  color: var(--ink);
  cursor: pointer;
  margin-left: 0.35rem;
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.theme-toggle:hover{ background: rgba(var(--ink-rgb), 0.16); }
.theme-toggle:active{ transform: scale(0.88); }
.theme-toggle__icon{
  position: absolute;
  font-size: 1.05rem;
  transition: opacity 0.4s var(--ease), transform 0.5s var(--ease);
}
.theme-toggle__icon--sun{ opacity: 1; transform: rotate(0deg) scale(1); }
.theme-toggle__icon--moon{ opacity: 0; transform: rotate(-60deg) scale(0.5); }
[data-theme="dark"] .theme-toggle__icon--sun{ opacity: 0; transform: rotate(60deg) scale(0.5); }
[data-theme="dark"] .theme-toggle__icon--moon{ opacity: 1; transform: rotate(0deg) scale(1); }
@media (prefers-reduced-motion: reduce){
  .theme-toggle__icon{ transition: opacity 0.2s linear; }
}

/* ---- Switch día/noche: fijo arriba a la derecha, con perilla naranja que
   se desliza. Reemplaza el botón satélite que se veía pegado al nav. ---- */
.theme-switch{
  position: fixed;
  top: 1.25rem; right: 1.25rem;
  z-index: 100;
  width: auto; height: auto;
  margin: 0; padding: 0;
  background: transparent;
  border-radius: 0;
}
.theme-switch:hover{ background: transparent; }
.theme-switch__track{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 62px; height: 32px;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  background: var(--nav-bg);
  border: 2px solid var(--nav-border);
  box-shadow: 0 10px 30px rgba(255,78,14,0.14);
  transition: transform 0.2s var(--ease);
}
.theme-switch:hover .theme-switch__track{ transform: scale(1.05); }
.theme-switch:active .theme-switch__track{ transform: scale(0.94); }
.theme-switch__ico{
  position: relative;
  z-index: 2;
  font-size: 0.92rem;
  line-height: 1;
  color: rgba(var(--ink-rgb), 0.4);
  transition: color 0.3s var(--ease);
}
.theme-switch__ico--sun{ color: var(--white); }          /* activo en claro, sobre la perilla */
[data-theme="dark"] .theme-switch__ico--sun{ color: rgba(var(--ink-rgb), 0.4); }
[data-theme="dark"] .theme-switch__ico--moon{ color: var(--navy); }  /* activo en oscuro */
.theme-switch__knob{
  position: absolute;
  z-index: 1;
  top: 50%; left: 3px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--orange);
  transform: translateY(-50%);
  transition: transform 0.4s var(--ease);
}
[data-theme="dark"] .theme-switch__knob{ transform: translate(27px, -50%); }
@media (max-width: 860px){
  .theme-switch{ display: none; } /* móvil usa el toggle del menú */
}

/* Barrido circular al cambiar de tema (View Transitions API): el nuevo tema se
   revela como un círculo que crece desde el switch. Se desactiva la fusión por
   defecto para que se vea el clip-path animado (lo dispara js/main.js). */
::view-transition-old(root),
::view-transition-new(root){ animation: none; mix-blend-mode: normal; }
::view-transition-old(root){ z-index: 0; }
::view-transition-new(root){ z-index: 1; }

/* Mobile menu row variant: icon + label instead of a bare circle */
.theme-toggle--mobile{
  width: 100%;
  height: auto;
  border-radius: 12px;
  flex-direction: row;
  justify-content: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 0.75rem;
  margin-left: 0;
  background: transparent;
}
.theme-toggle--mobile:hover{ background: var(--surface-alt); }
.theme-toggle__icon-wrap{ position: relative; width: 20px; height: 20px; flex-shrink: 0; }
.theme-toggle--mobile .theme-toggle__icon{ font-size: 1.15rem; }
.theme-toggle__label{ font-weight: 700; font-size: 0.95rem; }

.floating-nav__toggle{
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--ink);
  font-size: 1.2rem;
  opacity: 0;
  transform: scale(0.7);
  pointer-events: none;
  cursor: pointer;
  transition: opacity 0.7s var(--ease) 0.3s, transform 0.75s var(--ease) 0.3s;
}

/* Desktop: pill collapses to just the toggle icon while scrolling down */
.floating-nav.is-collapsed{ max-width: 48px; padding: 0; cursor: pointer; }
.floating-nav.is-collapsed:hover{ transform: scale(1.06); }
.floating-nav.is-collapsed .floating-nav__mark,
.floating-nav.is-collapsed .floating-nav__links{
  opacity: 0;
  transform: translateX(-12px);
  pointer-events: none;
}
.floating-nav.is-collapsed .floating-nav__toggle{
  display: flex;
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.mobile-menu{
  position: fixed;
  top: 5.25rem;
  left: 50%;
  width: min(90vw, 320px);
  background: var(--surface);
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(255,78,14,0.2);
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  z-index: 99;
  opacity: 0;
  transform: translateX(-50%) translateY(-14px);
  pointer-events: none;
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.mobile-menu a{
  padding: 0.85rem 0.75rem;
  font-weight: 700;
  border-radius: 12px;
}
.mobile-menu a:not(.btn):hover{ background: var(--surface-alt); }
.mobile-menu .btn{ margin-top: 0.5rem; justify-content: center; }
.mobile-menu.is-open{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

@media (max-width: 860px){
  /* Mobile: pill stays permanently compact (logo + menu button), full nav lives in the mobile-menu card */
  .floating-nav{ width: 48px; max-width: 48px !important; padding: 0 !important; }
  .floating-nav__mark, .floating-nav__links{ display: none; }
  .floating-nav__toggle{ display: flex; opacity: 1; transform: scale(1); pointer-events: auto; }
}
@media (min-width: 861px){
  .mobile-menu{ display: none; }
}

/* ============================
   HERO
   ============================ */
.hero{
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding: 6rem 1.5rem 4rem;
  overflow: hidden;
}
/* ============================
   HERO COLLAGE (manual de marca)
   Capas absolutas sobre el hero. Cada .c-item recibe parallax de cursor
   (transform desde --mx/--my heredadas del contenedor × su profundidad --d) y
   de scroll (--sy, animada por GSAP). El hijo .c-item__float flota en bucle y
   el nieto .c-item__art guarda el arte estático (lo anima la entrada GSAP).
   ============================ */
.hero__collage{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  --mx: 0px; --my: 0px; /* offset del cursor, lo actualiza hero-collage.js */
}
.c-item{
  position: absolute;
  --sy: 0px; /* offset de scroll, lo anima GSAP */
  transform: translate3d(calc(var(--mx) * var(--d)), calc(var(--my) * var(--d) + var(--sy)), 0);
  will-change: transform;
}
.c-item__float{
  animation: c-float var(--fdur, 10s) ease-in-out infinite;
  transform: translateY(0) rotate(var(--rot, 0deg));
}
.c-item__art{
  position: relative;
  transform-origin: center;
}
.c-item__art img{
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}
@keyframes c-float{
  0%,100% { transform: translateY(0) rotate(var(--rot,0deg)); }
  50%     { transform: translateY(calc(var(--famp,12px) * -1)) rotate(calc(var(--rot,0deg) + 1.5deg)); }
}

/* --- Piezas del collage (posición y arte) --- */
.c-item--ghost{ right: -8%; top: 2%; width: clamp(360px, 50vw, 780px); z-index: 0; }
.c-item--ghost .c-item__art img{ opacity: 0.07; }

.c-item--paper{ right: 1%; top: 12%; width: clamp(280px, 34vw, 470px); z-index: 0; }
.c-item--paper .c-item__art{
  aspect-ratio: 4 / 5;
  border-radius: 6px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.5), rgba(255,255,255,0) 55%),
    var(--beige);
  box-shadow: 0 30px 60px rgba(255,78,14,0.18);
}
/* cinta washi sujetando el papel */
.c-item--paper .c-item__art::before,
.c-item--paper .c-item__art::after{
  content: "";
  position: absolute;
  width: 92px; height: 26px;
  background: rgba(255,78,14,0.28);
  border-left: 1px dashed rgba(255,78,14,0.5);
  border-right: 1px dashed rgba(255,78,14,0.5);
}
.c-item--paper .c-item__art::before{ top: -12px; left: 22%; transform: rotate(-7deg); }
.c-item--paper .c-item__art::after{ bottom: -12px; right: 20%; transform: rotate(6deg); }

/* Aro naranja hueco: enmarca a la mascota (portal collage) sin fusionarse con
   su cabeza esférica ni con su plataforma naranja propia. */
.c-item--circle{ right: 3%; top: 17%; width: clamp(300px, 36vw, 520px); z-index: 1; }
.c-item--circle .c-item__art{
  aspect-ratio: 1;
  border-radius: 50%;
  border: clamp(12px, 1.7vw, 24px) solid var(--orange);
}

.c-item--square{ right: 29%; top: 11%; width: clamp(72px, 9vw, 130px); z-index: 1; }
.c-item--square .c-item__art{
  aspect-ratio: 1;
  background: var(--navy);
  border: 3px solid var(--orange);
}

.c-item--dots{ right: 39%; bottom: 15%; width: clamp(96px, 12vw, 160px); z-index: 1; }
.c-item--dots .c-item__art{
  aspect-ratio: 1;
  background-image: radial-gradient(var(--navy) 26%, transparent 27%);
  background-size: 20px 20px;
  opacity: 0.85;
}

.c-item--mascot{ right: 2%; bottom: 0; width: clamp(320px, 40vw, 640px); z-index: 2; }
.c-item--mascot .c-item__art{ filter: drop-shadow(0 26px 46px rgba(255,78,14,0.30)); }
.c-item--mascot .c-item__art img{ aspect-ratio: 1 / 1; }

.c-item--u-big{ right: 40%; top: 39%; width: clamp(96px, 12vw, 175px); z-index: 3; }
.c-item--u-small{ right: 12%; top: 12%; width: clamp(48px, 5vw, 82px); z-index: 3; }

/* Firma del hero: tarjeta con el wordmark completo, pinneada en la esquina
   libre de abajo a la izquierda (fuera de .hero__collage a propósito: no
   necesita parallax de cursor, solo su propio flotar suave + reveal de
   entrada). Se apoya en el fondo real de la sección (var(--surface)), así el
   cambio navy↔blanco entre temas se nota de verdad, igual que en el footer. */
.hero__signature{
  position: absolute;
  z-index: 1;
  left: clamp(1.5rem, 4vw, 3rem);
  bottom: clamp(1.75rem, 5vw, 3.25rem);
  width: clamp(170px, 17vw, 260px);
  transform: rotate(-3deg);
  pointer-events: none;
  animation: c-float 9s ease-in-out infinite;
  --rot: -3deg; --famp: 8px;
}
.hero__signature-logo{
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 34px rgba(255,78,14,0.16));
  transition: opacity 0.6s var(--ease);
}
.hero__signature-logo--white{ position: absolute; inset: 0; opacity: 0; }
:root[data-theme="dark"] .hero__signature-logo--navy{ opacity: 0; }
:root[data-theme="dark"] .hero__signature-logo--white{ opacity: 1; }

@media (max-width: 760px){
  /* El hero ya está ocupado (titular + CTA + mascota) en pantallas chicas;
     agregar la firma ahí competiría por espacio en vez de sumar. */
  .hero__signature{ display: none; }
}
@media (prefers-reduced-motion: reduce){
  .hero__signature{ animation: none; }
}

.hero__grid{
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}
.hero__copy{
  max-width: 640px;
}
.hero__headline{
  position: relative;
  font-size: clamp(2.6rem, 6vw, 5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  min-height: 2.35em; /* reserves space for the two absolutely-positioned gooey lines below */
}
.gooey-defs{ position: absolute; width: 0; height: 0; }
.gooey-wrap{
  position: absolute;
  inset: 0;
  filter: url(#gooeyThreshold);
}
.gooey-text{
  position: absolute;
  inset: 0;
  width: 100%;
  color: var(--ink);
  opacity: 0%;
}
.hero__subtext{
  font-size: clamp(1.05rem, 1.3vw, 1.25rem);
  max-width: 42ch;
  margin: 1.75rem 0 2rem;
  color: rgba(var(--ink-rgb),0.75);
}

/* Pantallas medianas: el collage se recuesta al borde y baja opacidad para no
   pisar el texto; las piezas geométricas sueltas se ocultan y queda solo la
   mascota + disco naranja como firma visual. En móvil todo el collage se atenúa
   al fondo detrás del texto. */
@media (max-width: 900px){
  .c-item--mascot{ width: clamp(240px, 46vw, 380px); }
  .c-item--circle{ right: -6%; width: clamp(200px, 40vw, 300px); }
  .c-item--square,
  .c-item--dots,
  .c-item--u-small{ display: none; }
  .c-item--u-big{ right: 44%; top: 34%; }
}
@media (max-width: 620px){
  .hero__collage{ opacity: 0.42; }
  .c-item--mascot{ right: -12%; bottom: 0; width: clamp(220px, 62vw, 320px); }
  .c-item--paper,
  .c-item--u-big{ display: none; }
}
@media (prefers-reduced-motion: reduce){
  .c-item__float{ animation: none; }
}

/* ============================
   MARQUEE (tagline ribbon)
   Editorial ticker between hero and manifesto. Two identical groups slide
   by exactly -100% of one group's width, so the loop point is invisible.
   ============================ */
.marquee{
  background: var(--orange);
  color: var(--white);
  overflow: hidden;
  padding: 1.1rem 0;
  transform: rotate(-1.2deg) scale(1.02); /* pasted-strip tilt, scaled to hide corner gaps */
}
.marquee__track{
  display: flex;
  width: max-content;
  animation: marquee-slide 22s linear infinite;
}
.marquee__group{
  display: flex;
  align-items: center;
  gap: 2.5rem;
  padding-right: 2.5rem;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 2.2rem);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.marquee__alt{
  color: var(--navy);
}
.marquee__u{
  display: inline-flex;
  align-items: center;
  transform: rotate(12deg) translateY(0.08em);
}
.marquee__u img{
  height: 0.75em;
  width: auto;
  display: block;
}
@keyframes marquee-slide{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .marquee__track{ animation: none; }
}

/* ============================
   MANIFESTO (dark block)
   ============================ */
.manifesto{
  position: relative;
  background: var(--navy);
  color: var(--white);
  padding: 7rem 1.5rem;
  overflow: hidden;
}
.manifesto__inner{ position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; }

/* ---- Collage decorativo de márgenes ----
   .m-deco hace el parallax (transform desde --py, lo anima GSAP) y su hijo
   .m-deco__i flota en bucle (c-float). Solo en desktop ancho, donde hay margen
   libre a los lados del contenido (max-width 1100). */
.manifesto__deco{ position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.m-deco{ position: absolute; will-change: transform; transform: translate3d(0, var(--py, 0px), 0); }
.m-deco__i{ display: block; animation: c-float var(--fdur, 11s) ease-in-out infinite; }

.m-deco--ring{ left: 2.5%; top: 50%; width: clamp(90px, 9vw, 150px); }
.m-deco--ring .m-deco__i{ aspect-ratio: 1; border-radius: 50%; border: clamp(6px, 0.8vw, 10px) solid rgba(255,78,14,0.5); --rot: 0deg; --famp: 16px; --fdur: 12s; }

.m-deco--dots{ right: 3%; top: 38%; width: clamp(90px, 9vw, 140px); }
.m-deco--dots .m-deco__i{ aspect-ratio: 1; opacity: 0.5; background-image: radial-gradient(rgba(255,255,255,0.55) 26%, transparent 27%); background-size: 16px 16px; --rot: -8deg; --famp: 14px; --fdur: 10s; }

.m-deco--square{ left: 5%; top: 15%; width: clamp(46px, 5vw, 84px); }
.m-deco--square .m-deco__i{ aspect-ratio: 1; border: 3px solid rgba(255,78,14,0.6); --rot: 14deg; --famp: 18px; --fdur: 9s; }

.m-deco--u{ right: 5.5%; bottom: 14%; width: clamp(48px, 5.5vw, 92px); }
.m-deco--u .m-deco__i{ --rot: -18deg; --famp: 20px; --fdur: 8s; }
.m-deco--u img{ width: 100%; opacity: 0.9; }

.m-deco--plus{ right: 7%; top: 66%; font-family: var(--font-display); line-height: 1; font-size: clamp(1.6rem, 3vw, 3rem); color: rgba(255,78,14,0.6); }
.m-deco--plus .m-deco__i{ --rot: 0deg; --famp: 14px; --fdur: 10s; }

@media (max-width: 1200px){ .manifesto__deco{ display: none; } }
@media (prefers-reduced-motion: reduce){ .m-deco__i{ animation: none; } }

/* Recurring brand device: the distorted "U" bleeding into dark sections —
   ties the manifesto and contact blocks back to the hero instead of leaving
   them as flat, texture-less color panels. */
.section__u-mark{
  position: absolute;
  font-family: var(--font-display);
  color: rgba(255,78,14,0.14);
  line-height: 1;
  pointer-events: none;
  z-index: 0;
  user-select: none;
}
.section__u-mark--manifesto{
  top: -5rem;
  right: -2rem;
  font-size: clamp(14rem, 28vw, 26rem);
  transform: rotate(8deg);
}
.section__u-mark--contacto{
  bottom: -7rem;
  left: -3rem;
  font-size: clamp(12rem, 24vw, 22rem);
  transform: rotate(-10deg);
}
/* barra naranja de acento sobre la frase-manifiesto */
.manifesto__rule{
  display: block;
  width: 64px; height: 5px;
  background: var(--orange);
  margin-bottom: 1.75rem;
}
/* frase grande a la izquierda + cuerpo como nota de apoyo a la derecha */
.manifesto__lead{
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: end;
}
.manifesto__statement{
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4.2vw, 3.5rem);
  line-height: 1.12;
  max-width: 20ch;
  margin: 0;
}
/* cada palabra se enciende al scroll (js/manifesto.js la anima de tenue→full).
   Colores en reposo por si el JS no corre: blanco, y naranja las potentes. */
.m-w{ display: inline-block; color: rgba(255,255,255,0.9); }
.m-w.m-hot{ color: var(--orange); }
@media (prefers-reduced-motion: reduce){
  .m-w{ color: #fff; }
  .m-w.m-hot{ color: var(--orange); }
}
.manifesto__body{
  max-width: 46ch;
  color: rgba(255,255,255,0.75);
  font-size: 1.1rem;
}
@media (max-width: 860px){
  .manifesto__lead{ grid-template-columns: 1fr; align-items: start; }
  .manifesto__body{ margin-top: 1.5rem; }
}

/* ============================
   MISIÓN → VISIÓN (roll-swap ligado al scroll)
   Un solo bloque que muta de Misión a Visión: el grupo saliente
   (data-roll="out") se desliza hacia arriba y sale por el techo del slot,
   mientras el entrante (data-roll="in") sube desde abajo hacia el mismo
   lugar — "una se convierte en otra", nunca dos bloques separados a la vez.
   js/manifesto.js anima yPercent 0→-100 / 100→0 con GSAP+ScrollTrigger
   (equivalente al roll-swap de Framer Motion). Los valores de abajo son el
   estado de reposo (antes de que corra el JS / si no corre).
   ============================ */
.mv-swap{
  position: relative;
  margin-top: 6rem;
  max-width: 38rem;
}
.mv-swap__eyebrow{
  display: block;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.5);
  margin-bottom: 1rem;
}
/* U rota flotando junto al slot, como firma de marca */
.mv-swap__u{
  position: absolute;
  z-index: 0;
  right: -3rem; top: -2.5rem;
  width: clamp(52px, 6vw, 88px);
  opacity: 0.85;
  --rot: -16deg; --famp: 10px;
  animation: c-float 8s ease-in-out infinite;
}
.mv-swap__u img{ width: 100%; }

.mv-swap__slot{
  position: relative;
  z-index: 1;
  overflow: hidden;
  height: clamp(13.5rem, 24vw, 17.5rem);
}
.mv-swap__word{
  position: absolute;
  inset: 0;
  will-change: transform;
}
/* Estado antes de que corra GSAP: el slot ya recorta con overflow:hidden, así
   que solo hace falta evitar el flash de "Visión" superpuesta a "Misión" en
   el primer frame. El transform lo pone SIEMPRE GSAP (nunca CSS): si el CSS
   también fijara translateY aquí, GSAP lo tomaría como base y lo sumaría al
   suyo, duplicando el desplazamiento. */
.mv-swap__word[data-roll="in"]{ opacity: 0; }

.mv-swap__tag{
  display: block;
  font-family: var(--font-display);
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: -0.01em;
  font-size: clamp(2.6rem, 6vw, 5rem);
  margin: 0 0 1.1rem;
}
.mv-swap__tag--mision{ color: var(--orange); }
/* Visión en contorno: aspiración aún por "rellenar" */
.mv-swap__tag--vision{
  color: transparent;
  -webkit-text-stroke: 2px var(--orange);
  text-stroke: 2px var(--orange);
}
.mv-swap__body{
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.7vw, 1.4rem);
  line-height: 1.32;
  color: rgba(255,255,255,0.8);
  max-width: 34ch;
  margin: 0;
}

@media (prefers-reduced-motion: reduce){
  /* Sin animación: los dos estados se apilan en flujo normal, contenido
     completo visible en vez de ocultarse a mitad de un roll que no corre.
     El JS (que restauraría la opacidad de "in") tampoco corre bajo
     reduced-motion, así que hay que revertir el opacity:0 aquí también. */
  .mv-swap__u{ animation: none; }
  .mv-swap__slot{ height: auto; overflow: visible; }
  .mv-swap__word{ position: static; transform: none !important; opacity: 1 !important; }
  .mv-swap__word[data-roll="out"]{ margin-bottom: 2rem; }
}

@media (max-width: 760px){
  .mv-swap__tag{ font-size: clamp(2.4rem, 12vw, 3.4rem); }
  .mv-swap__u{ display: none; }
}

/* Valores como recortes de collage: tarjetas ligeramente inclinadas que se
   enderezan y se elevan al hover, con una barra naranja que crece a lo ancho.
   La info (título + descripción) siempre visible. */
.values{
  margin-top: clamp(5rem, 10vw, 7rem);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.value{
  position: relative;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-sm);
  padding: 1.8rem 1.5rem 2.6rem;
  overflow: hidden;
  transition: transform 0.4s var(--ease), background 0.4s var(--ease), border-color 0.4s var(--ease), color 0.4s var(--ease);
}
/* barra naranja superior que se extiende al hover */
.value::before{
  content: "";
  position: absolute;
  top: 0; left: 0;
  height: 4px; width: 48px;
  background: var(--orange);
  transition: width 0.45s var(--ease), background 0.4s var(--ease);
}
.value:nth-child(odd){ transform: rotate(-1.2deg); }
.value:nth-child(even){ transform: rotate(1.2deg); margin-top: 2rem; }
.value h3{
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1.05rem, 1.35vw, 1.3rem);
  line-height: 1.05;
  margin: 0.4rem 0 0.6rem;
}
.value p{ color: rgba(255,255,255,0.72); font-size: 0.95rem; transition: color 0.4s var(--ease); }
.value__go{
  position: absolute;
  right: 1.2rem; bottom: 1rem;
  font-family: var(--font-display);
  font-size: 1.4rem; line-height: 1;
  color: var(--orange);
  opacity: 0; transform: translateX(-8px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), color 0.4s var(--ease);
}
/* hover: la tarjeta voltea a naranja sólido — imposible no notarla */
.value:hover,
.value:focus-within{
  transform: rotate(0deg) translateY(-8px);
  background: var(--orange);
  border-color: var(--orange);
  color: var(--navy);
}
.value:hover h3, .value:focus-within h3,
.value:hover p, .value:focus-within p{ color: var(--navy); }
.value:hover::before, .value:focus-within::before{ width: 100%; background: var(--navy); }
.value:hover .value__go, .value:focus-within .value__go{ opacity: 1; transform: translateX(0); color: var(--navy); }

/* CTA que cierra la sección con un llamado real (abre el modal de contacto) */
.values__cta{
  display: inline-flex; align-items: center; gap: 0.7rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  font-family: var(--font-display);
  text-transform: uppercase; letter-spacing: 0.03em;
  font-size: clamp(1.05rem, 1.6vw, 1.4rem);
  color: var(--white);
}
.values__cta span{ color: var(--orange); box-shadow: inset 0 -3px 0 var(--orange); }
.values__cta i{ font-style: normal; color: var(--orange); transition: transform 0.3s var(--ease); }
.values__cta:hover i,
.values__cta:focus-visible i{ transform: translateX(10px); }

@media (max-width: 900px){
  .values{ grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
}
@media (max-width: 560px){
  .values{ grid-template-columns: 1fr; }
  .value{ transform: none !important; margin-top: 0 !important; }
}
@media (prefers-reduced-motion: reduce){
  .value{ transform: none !important; }
  .value__go{ transition: none; }
}

/* ============================
   SECTION HEAD (shared)
   ============================ */
.section__head{
  max-width: 1400px;
  margin: 0 auto;
  padding: 6rem 1.5rem 3rem;
}
.section__head h2{
  font-size: clamp(2rem, 4vw, 3rem);
}
.section__head p{
  margin-top: 1rem;
  max-width: 50ch;
  color: rgba(var(--ink-rgb),0.65);
  font-size: 1.1rem;
}

/* ============================
   SERVICIOS — GALERÍA DE PÓSTERS (scroll horizontal)
   Por defecto (móvil / sin JS / reduced-motion) los pósters se apilan en
   vertical. Cuando js/servicios.js confirma desktop + GSAP, añade
   .hscroll--active: el track pasa a fila, la sección se pinea y se traduce en
   horizontal mientras bajas. Cada póster es un collage a todo color con la
   info siempre visible (título + descripción + entregables).
   ============================ */
.servicios{ padding: 0; }
.hscroll{ position: relative; }
.hscroll__track{ display: flex; flex-direction: column; }

.hpanel{
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  align-content: center;
  gap: clamp(2rem, 6vw, 3.5rem);
  min-height: 78vh;
  padding: clamp(3rem, 9vw, 5rem) 1.5rem;
}
/* fondos fijos en ambos temas (como los bloques navy del manifiesto) */
.hpanel--intro{ background: var(--surface); color: var(--ink); }
.hpanel--beige{ background: var(--beige); color: var(--navy); }
.hpanel--navy{ background: var(--navy); color: var(--beige); }
.hpanel--orange{ background: var(--orange); color: var(--navy); }

/* ---- panel intro ---- */
.hpanel__lead{
  font-family: var(--font-display);
  text-transform: uppercase;
  line-height: 0.85;
  letter-spacing: -0.02em;
  font-size: clamp(3rem, 12vw, 9rem);
  margin: 0;
}
.hpanel__leadsub{
  max-width: 40ch;
  margin-top: 1.6rem;
  font-size: clamp(1.05rem, 1.5vw, 1.4rem);
  color: rgba(var(--ink-rgb), 0.72);
}
.hpanel__hint{
  display: none; /* solo tiene sentido en modo horizontal (ver .hscroll--active) */
  align-items: center; gap: 0.6rem;
  margin-top: 2.6rem;
  text-transform: uppercase; letter-spacing: 0.22em;
  font-size: 0.8rem; font-weight: 700;
  color: var(--orange);
}
.hscroll--active .hpanel__hint{ display: inline-flex; }
.hpanel__hint-arrow{ font-style: normal; animation: hint-nudge 1.4s ease-in-out infinite; }
@keyframes hint-nudge{ 0%,100%{ transform: translateX(0); } 50%{ transform: translateX(10px); } }

/* ---- texto del servicio ---- */
.hpanel__title{
  font-family: var(--font-display);
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: -0.015em;
  font-size: clamp(2.6rem, 7vw, 6rem);
  margin: 0;
}
.hpanel__desc{
  max-width: 34ch;
  margin-top: 1.4rem;
  font-size: clamp(1rem, 1.3vw, 1.3rem);
  line-height: 1.5;
  opacity: 0.85;
}
.hpanel__tags{
  list-style: none;
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  margin-top: 2rem;
}
.hpanel__tags li{
  border: 2px solid currentColor;
  border-radius: var(--radius-pill);
  padding: 0.4rem 1rem;
  font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em;
  opacity: 0.9;
}

/* ---- media collage ---- */
.hpanel__media{ position: relative; display: flex; justify-content: center; }
.hpanel__frame{
  position: relative; z-index: 1;
  width: clamp(240px, 32vw, 440px);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(255,78,14,0.28);
}
.hpanel__frame img{ width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
/* bloque de acento desplazado detrás del marco (lenguaje collage) */
.hpanel__block{
  position: absolute; z-index: 0;
  width: 74%; aspect-ratio: 1;
  top: -7%; left: -7%;
  background: var(--orange);
}
.hpanel--orange .hpanel__block{ background: var(--navy); }
/* la U rota asoma en primer plano */
.hpanel__u{ position: absolute; z-index: 2; width: clamp(56px, 7vw, 112px); right: -4%; bottom: -6%; }
.hpanel__u img{ width: 100%; }
.hpanel--orange .hpanel__u img{ filter: brightness(0) invert(1); } /* U blanca sobre naranja */

/* barra de progreso (solo modo horizontal) */
.hscroll__progress{ display: none; }
.hscroll__bar{ display: block; height: 100%; width: 100%; background: var(--orange); transform: scaleX(0); transform-origin: left; }

/* ============================
   MODO HORIZONTAL (desktop + JS)
   ============================ */
.hscroll--active{ overflow: hidden; }
.hscroll--active .hscroll__track{
  flex-direction: row; flex-wrap: nowrap;
  width: max-content; height: 100vh;
}
.hscroll--active .hpanel{
  flex: 0 0 90vw; width: 90vw; height: 100vh;
  min-height: 0;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center; align-content: center;
  gap: clamp(2rem, 4vw, 5rem);
  padding: clamp(2.5rem, 5vw, 6rem);
}
.hscroll--active .hpanel--intro{ grid-template-columns: 1fr; }
.hscroll--active .hpanel--img-left .hpanel__media{ order: -1; }
/* imagen algo más ancha que el marco para que el parallax interno no descubra bordes */
.hscroll--active .hpanel__frame img{ width: 122%; position: relative; left: -11%; }
.hscroll--active .hscroll__progress{
  display: block;
  position: absolute; left: 0; bottom: 0; width: 100%; height: 5px;
  background: rgba(var(--ink-rgb), 0.12);
  z-index: 5;
}

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

/* ============================
   TRABAJOS - GALLERY
   Static three-column collage. The outer columns are stacked thumbnails,
   the center column leads with one larger photo — everything scrolls with
   the page, no animation beyond the shared hover.
   ============================ */
/* overflow: clip (not hidden) — guards against stray horizontal overflow
   without creating a scroll container, which would break the sticky
   zoom-parallax above the gallery. */
.trabajos{ position: relative; padding-bottom: 6rem; background: var(--surface-alt); overflow: clip; }

/* ============================
   ZOOM PARALLAX (portfolio doorway)
   300vh scroll runway with a sticky viewport: seven collage frames scale at
   different rates (driven by GSAP scrub in main.js), zooming the visitor
   into the work before the gallery below.
   ============================ */
.zoom-parallax{
  position: relative;
  height: 300vh;
  margin-bottom: 4rem;
}
.zoom-parallax__sticky{
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
/* Each item is a full-viewport layer centered on the same point; scaling the
   layer (not the frame) pushes its frame outward from the center, which is
   what makes the collage "explode" past the edges as you scroll. */
.zoom-parallax__item{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
  pointer-events: none;
}
.zoom-parallax__frame{
  position: relative;
  width: 25vw;
  height: 25vh;
  pointer-events: auto;
}
.zoom-parallax__frame img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* B&N como base (manual de marca) — a color completo al pasar el cursor,
     igual que la galería de abajo; el acento naranja del marco central
     (.zoom-parallax__item:nth-child(1)) sigue siendo aparte, no un tinte. */
  filter: grayscale(1) contrast(1.05);
  transition: filter 0.5s var(--ease);
}
.zoom-parallax__frame:hover img{ filter: grayscale(0) contrast(1.05); }
/* The center frame is the doorway — give it the surgical orange accent */
.zoom-parallax__item:nth-child(1) .zoom-parallax__frame{ outline: 3px solid var(--orange); outline-offset: -3px; z-index: 1; }
.zoom-parallax__item:nth-child(2) .zoom-parallax__frame{ top: -30vh; left: 5vw;    width: 35vw; height: 30vh; }
.zoom-parallax__item:nth-child(3) .zoom-parallax__frame{ top: -10vh; left: -25vw;  width: 20vw; height: 45vh; }
.zoom-parallax__item:nth-child(4) .zoom-parallax__frame{             left: 27.5vw; width: 25vw; height: 25vh; }
.zoom-parallax__item:nth-child(5) .zoom-parallax__frame{ top: 27.5vh; left: 5vw;   width: 20vw; height: 25vh; }
.zoom-parallax__item:nth-child(6) .zoom-parallax__frame{ top: 27.5vh; left: -22.5vw; width: 30vw; height: 25vh; }
.zoom-parallax__item:nth-child(7) .zoom-parallax__frame{ top: 22.5vh; left: 25vw;  width: 15vw; height: 15vh; }

/* Without motion (or on small screens) a 300vh runway is just dead scroll:
   collapse to a single static collage screen. */
@media (prefers-reduced-motion: reduce){
  .zoom-parallax{ height: 100vh; }
}
@media (max-width: 900px){
  .zoom-parallax{ display: none; }
}

.sticky-gallery{
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: 0.85fr 1.5fr 0.85fr;
  gap: 1.25rem;
}
.sticky-gallery__side{
  display: grid;
  gap: 1rem;
  align-content: start;
}
.sticky-gallery__center{
  display: grid;
  gap: 1rem;
  align-content: end;
  position: sticky;
  bottom: 2rem;
  align-self: end;
}
/* B&N como base (manual de marca), a color completo al pasar el cursor —
   sin overlay ni tinte, la foto real revelándose entera. */
.photo{
  position: relative;
  display: block;
  overflow: hidden;
  transition: transform 0.5s var(--ease);
}
.photo:hover{ transform: scale(1.02); }
.sticky-gallery img{
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: grayscale(1);
  transition: filter 0.5s var(--ease);
}
.photo:hover img,
.photo:focus-within img{ filter: grayscale(0); }
@media (max-width: 900px){
  .sticky-gallery{ grid-template-columns: 1fr; }
  .sticky-gallery__center{ position: static; }
  .photo--mobile-hide{ display: none; }
}

/* ============================
   EQUIPO
   ============================ */
.equipo{ position: relative; padding-bottom: 7rem; overflow: hidden; }
.section__u-mark--equipo{
  top: 2rem;
  left: -2.5rem;
  font-size: clamp(11rem, 22vw, 19rem);
  transform: rotate(-9deg);
}

/* ---- Marquee de fotos ----
   Mismo truco que .marquee (tagline): contenido duplicado + keyframe
   translateX(-50%) = loop infinito sin salto visible. Se pausa al hover/foco
   para poder leer nombre y cargo con calma. */
.team-marquee{
  position: relative;
  margin-top: 3.5rem;
  overflow: hidden;
}
.team-marquee__track{
  display: flex;
  width: max-content;
  animation: team-marquee-slide 32s linear infinite;
}
.team-marquee:hover .team-marquee__track,
.team-marquee:focus-within .team-marquee__track{ animation-play-state: paused; }
.team-marquee__group{
  display: flex;
  gap: 1.5rem;
  padding-right: 1.5rem;
}
@keyframes team-marquee-slide{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
.team-marquee__fade{
  position: absolute; top: 0; bottom: 0; width: clamp(2rem, 8vw, 8rem);
  z-index: 2; pointer-events: none;
}
.team-marquee__fade--left{ left: 0; background: linear-gradient(90deg, var(--surface), transparent); }
.team-marquee__fade--right{ right: 0; background: linear-gradient(270deg, var(--surface), transparent); }

.team-photo{
  flex: 0 0 auto;
  width: clamp(200px, 20vw, 260px);
  margin: 0;
}
.team-photo__frame{
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  transition: border-color 0.4s var(--ease);
}
.team-photo__frame img{
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1);
  transition: filter 0.5s var(--ease), transform 0.5s var(--ease);
}
.team-photo:hover .team-photo__frame,
.team-photo:focus-within .team-photo__frame{ border-color: var(--orange); }
.team-photo:hover .team-photo__frame img,
.team-photo:focus-within .team-photo__frame img{ filter: grayscale(0); transform: scale(1.04); }
.team-photo figcaption{
  display: flex; flex-direction: column;
  margin-top: 0.75rem;
}
.team-photo__name{ font-weight: 700; font-size: 0.95rem; }
.team-photo__role{ color: rgba(var(--ink-rgb),0.6); font-size: 0.85rem; margin-top: 0.15rem; }

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

/* CTA de cierre (variante clara del .values__cta del manifiesto, para fondos
   de superficie en vez de navy) */
.team-cta{
  display: inline-flex; align-items: center; gap: 0.7rem;
  margin: clamp(2.5rem, 5vw, 3.5rem) 1.5rem 0;
  font-family: var(--font-display);
  text-transform: uppercase; letter-spacing: 0.03em;
  font-size: clamp(1.05rem, 1.6vw, 1.4rem);
  color: var(--ink);
}
.team-cta span{ color: var(--orange); box-shadow: inset 0 -3px 0 var(--orange); }
.team-cta i{ font-style: normal; color: var(--orange); display: inline-block; transition: transform 0.3s var(--ease); }
.team-cta:hover i, .team-cta:focus-visible i{ transform: translateX(10px); }

/* ---- Testimonio ---- */
.testimonial{
  position: relative;
  z-index: 1;
  max-width: 62rem;
  margin: clamp(4rem, 8vw, 6rem) auto 0;
  padding: 0 1.5rem;
}
.testimonial__mark{
  display: block;
  font-family: var(--font-display);
  font-size: clamp(4rem, 8vw, 7rem);
  line-height: 1;
  color: var(--orange);
}
.testimonial__quote{
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.6vw, 2rem);
  line-height: 1.35;
  color: var(--ink);
  margin-top: -1rem;
}
.testimonial__author{ display: flex; flex-direction: column; margin-top: 1.5rem; }
.testimonial__name{ font-weight: 700; }
.testimonial__role{ color: rgba(var(--ink-rgb),0.6); font-size: 0.9rem; margin-top: 0.15rem; }

/* ============================
   CONTACTO (dark block)
   ============================ */
.contacto{ position: relative; background: var(--navy); color: var(--white); padding: 7rem 1.5rem; overflow: hidden; }
.contacto__inner{ position: relative; z-index: 1; max-width: 900px; margin: 0 auto; text-align: center; }
.contacto__inner h2{
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  max-width: 20ch;
  margin: 0 auto;
}
.contacto__inner > p{ margin-top: 1.25rem; color: rgba(255,255,255,0.7); font-size: 1.15rem; }
.contacto__inner .btn{ margin-top: 2.5rem; }

.contacto__details{
  margin-top: 4rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem 2.5rem;
  font-size: 0.95rem;
}
.contacto__details a,
.contacto__details span{
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255,255,255,0.75);
  transition: color 0.2s var(--ease);
}
.contacto__details a:hover{ color: var(--orange); }

/* ============================
   FOOTER (sticky reveal)
   clip-path on .footer establishes a containing block for the fixed child
   inside it (per the CSS Transforms spec, clip-path/transform/filter do
   this same as they do for position:fixed descendants), so .footer__pin
   stays trapped to the footer's own box instead of the viewport. The inner
   sticky element then holds its position while the footer's height scrolls
   past underneath it — a pure-CSS "curtain reveal", no JS involved.
   ============================ */
.footer{
  /* min() caps the box at the viewport height: on screens shorter than
     620px (landscape phones) a fixed 620px box would poke above the
     viewport and clip its own top. Whatever doesn't fit scrolls inside
     .footer__sticky (overflow-y) instead. */
  --footer-h: min(620px, 100vh);
  position: relative;
  height: var(--footer-h);
  width: 100%;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.footer__pin{
  position: fixed;
  bottom: 0;
  left: 0;
  height: var(--footer-h);
  width: 100%;
}
.footer__sticky{
  position: sticky;
  top: calc(100vh - var(--footer-h));
  height: 100%;
  overflow-y: auto;
}
.footer__inner{
  position: relative;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2.5rem;
  padding: 3.5rem 1.5rem 1.75rem;
  background: var(--surface);
  color: var(--ink);
  border-top: 2px solid rgba(var(--ink-rgb), 0.12);
  overflow: hidden;
}

.footer__glow{ position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.footer__glow-blob{ position: absolute; border-radius: 50%; }
.footer__glow-blob--a{
  top: -260px; left: -60px; width: 460px; height: 460px;
  background: radial-gradient(closest-side, rgba(255,78,14,0.09), transparent 75%);
}
.footer__glow-blob--b{
  top: -220px; right: -80px; width: 420px; height: 420px;
  background: radial-gradient(closest-side, rgba(var(--ink-rgb),0.05), transparent 75%);
}

/* Firma de cierre: wordmark completo, gigante y casi transparente, sangrando
   por el borde inferior del footer — una marca de agua, no un elemento de
   contenido (por eso aria-hidden y sin afectar el layout de las columnas).
   Las dos versiones (navy/blanco) se apilan exactas y cruzan en opacidad
   según el tema; el transform de reveal lo anima SOLO js/main.js sobre el
   contenedor .footer__signature — nunca sobre las <img>, para no repetir el
   bug de doble-transform ya visto en el roll-swap de Misión/Visión. */
.footer__signature{
  position: absolute;
  z-index: 0;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
  padding: 0 1.5rem 3.75rem; /* deja la firma completa por encima del copyright */
  transform: translateY(6%) scale(0.94);
  opacity: 0;
}
/* Caja que fija el tamaño; las dos versiones se superponen exactas dentro. */
.footer__signature-inner{
  position: relative;
  width: min(760px, 72vw);
}
.footer__signature-logo{
  display: block;
  width: 100%;
  height: auto;
  transition: opacity 0.6s var(--ease);
}
.footer__signature-logo--navy{ opacity: 0.16; }
.footer__signature-logo--white{ position: absolute; inset: 0; opacity: 0; }
:root[data-theme="dark"] .footer__signature-logo--navy{ opacity: 0; }
:root[data-theme="dark"] .footer__signature-logo--white{ opacity: 0.2; }

@media (max-width: 900px){
  /* A partir de aquí el footer pasa a 2 columnas (más alto): la firma pierde
     su espacio limpio, así que solo se muestra en desktop ancho de una fila. */
  .footer__signature{ display: none; }
}
@media (prefers-reduced-motion: reduce){
  .footer__signature{ transform: none; opacity: 1; }
}

.footer__top{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 3rem;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}
.footer__brand{ max-width: 32ch; }
.footer__mark{ display: inline-block; line-height: 1; }
.footer__mark img{ display: block; height: 2.6rem; width: auto; }
.footer__brand p{
  margin-top: 1.25rem;
  font-size: 0.95rem;
  color: rgba(var(--ink-rgb), 0.7);
}
/* ---- Tarjeta de redes (estilo uiverse/21st.dev): las cajas salen a las
   esquinas al hover, una tras otra. ---- */
.social-card{
  position: relative;
  width: 190px; height: 190px;
  margin-top: 1.75rem;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(255,78,14,0.22);
}
.social-card__bg{
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(135deg, var(--orange), var(--navy));
  transition: transform 0.5s var(--ease);
}
.social-card:hover .social-card__bg{ transform: scale(1.06); }
.social-card__logo{
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 1.15rem;
  color: var(--white);
  transition: opacity 0.4s var(--ease);
}
.social-card:hover .social-card__logo{ opacity: 0.35; }
.social-card__box{
  /* Posición final (esquina) fijada una sola vez, sin animar — el reposo/hover
     se resuelve con transform+opacity (GPU), no moviendo top/left/right/bottom
     en cada frame (eso fuerza layout/reflow y se ve menos fluido). */
  position: absolute;
  z-index: 3;
  width: 54px; height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--white);
  background: rgba(255,255,255,0.22);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 50%;
  box-shadow: rgba(22,28,59,0.25) -6px 6px 20px 0px;
  opacity: 0;
  transform: translate(var(--tx), var(--ty)) scale(0.6);
  transition: transform 0.5s var(--ease), opacity 0.4s var(--ease),
              background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.box1{ top: 10px; left: 10px; --tx: -40px; --ty: -40px; }
.box2{ top: 10px; right: 10px; --tx: 40px; --ty: -40px; }
.box3{ bottom: 10px; left: 10px; --tx: -40px; --ty: 40px; }
.box4{ bottom: 10px; right: 10px; --tx: 40px; --ty: 40px; }
.social-card:hover .social-card__box,
.social-card:focus-within .social-card__box{
  transform: translate(0, 0) scale(1);
  opacity: 1;
}
.social-card__box:hover,
.social-card__box:focus-visible{
  background: var(--white);
  color: var(--orange);
  outline: none;
}

@media (max-width: 900px){
  /* táctil: las redes quedan siempre a la vista en las esquinas */
  .social-card__box{ transform: translate(0, 0) scale(1); opacity: 1; }
  .social-card__logo{ opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce){
  .social-card__box, .social-card__bg, .social-card__logo{ transition: none; }
}

.footer__group h3{
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.footer__group ul{ margin-top: 1.1rem; display: flex; flex-direction: column; gap: 0.65rem; list-style: none; }
.footer__group a,
.footer__group span{
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  color: rgba(var(--ink-rgb), 0.7);
  transition: color 0.2s var(--ease);
}
.footer__group a:hover{ color: var(--orange); }

.footer__bottom{
  position: relative;
  z-index: 1;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.5rem;
  border-top: 2px solid rgba(var(--ink-rgb), 0.1);
  font-size: 0.85rem;
  color: rgba(var(--ink-rgb), 0.55);
}
/* Height stays flat across breakpoints on purpose — calc(100vh - height) in
   .footer__sticky must stay positive, or the sticky box starts already
   "stuck" above the top of the viewport and clips the first content that
   should be visible on entry. Content taller than the box (all stacked on
   mobile) scrolls internally via .footer__sticky's own overflow-y instead
   of growing the box to chase it. */
@media (max-width: 900px){
  .footer__top{ grid-template-columns: 1fr 1fr; row-gap: 2.5rem; }
  .footer__brand{ grid-column: 1 / -1; max-width: none; }
}
@media (max-width: 560px){
  .footer__top{ grid-template-columns: 1fr; row-gap: 2rem; }
  .footer__bottom{ flex-direction: column; align-items: flex-start; }
}

/* ============================
   CONTACT MODAL
   Every "Hablemos" trigger opens this instead of scrolling to #contacto.
   Visibility is driven by the .is-open class (same convention as
   .mobile-menu.is-open) — main.js toggles it and handles focus/Escape/scroll-lock.
   ============================ */
.contact-modal{
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  visibility: hidden;
  pointer-events: none;
}
.contact-modal__overlay{
  position: absolute;
  inset: 0;
  background: rgba(11,14,31,0.6);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.contact-modal__panel{
  position: relative;
  z-index: 1;
  width: min(94vw, 560px);
  max-height: 90vh;
  overflow-y: auto;
  background: var(--surface);
  color: var(--ink);
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(255,78,14,0.28);
  padding: 2.75rem 2.25rem 2.25rem;
  opacity: 0;
  transform: translateY(18px) scale(0.97);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.contact-modal.is-open{
  visibility: visible;
  pointer-events: auto;
}
.contact-modal.is-open .contact-modal__overlay{ opacity: 1; }
.contact-modal.is-open .contact-modal__panel{ opacity: 1; transform: translateY(0) scale(1); }
@media (prefers-reduced-motion: reduce){
  .contact-modal__overlay, .contact-modal__panel{ transition: opacity 0.15s linear; }
  .contact-modal__panel{ transform: none; }
}

.contact-modal__close{
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background: rgba(var(--ink-rgb), 0.08);
  color: var(--ink);
  font-size: 1.05rem;
  cursor: pointer;
  transition: background-color 0.2s var(--ease);
}
.contact-modal__close:hover{ background: rgba(var(--ink-rgb), 0.16); }

/* ---- Collage decor de la nota ---- */
.cm-deco{ position: absolute; pointer-events: none; }
.cm-deco--tape{
  top: -10px; left: 50%;
  width: 108px; height: 26px;
  transform: translateX(-50%) rotate(-2.5deg);
  background: rgba(255,78,14,0.28);
  border-left: 1px dashed rgba(255,78,14,0.5);
  border-right: 1px dashed rgba(255,78,14,0.5);
}
.cm-deco--u{
  right: 1.4rem; bottom: 1.4rem;
  width: clamp(48px, 9vw, 76px);
  opacity: 0.14;
  transform: rotate(-16deg);
}
.cm-deco--u img{ width: 100%; }

.contact-modal__eyebrow{
  display: block;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.78rem;
  color: var(--orange);
  margin-bottom: 0.5rem;
}
.contact-modal__title{
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(2rem, 5vw, 2.9rem);
  line-height: 0.92;
  letter-spacing: -0.01em;
  margin: 0;
}

/* ---- La nota (formulario conversacional) ---- */
.cm-note{
  position: relative;
  z-index: 1;
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.cm-note__line{
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.3vw, 1.5rem);
  line-height: 1.7;
  color: var(--ink);
}
.cm-note__line--full{ margin-top: 0.75rem; }

/* espacios en blanco dentro de la frase */
.cm-blank{ position: relative; display: inline-block; vertical-align: baseline; }
.cm-blank input,
.cm-blank select{
  font-family: var(--font-display);
  font-size: inherit;
  color: var(--orange);
  background: transparent;
  border: none;
  border-bottom: 2px solid rgba(255,78,14,0.45);
  padding: 0 0.15em 0.05em;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.cm-blank input{ width: 5.5em; min-width: 2em; }
.cm-blank input::placeholder{ color: rgba(var(--ink-rgb), 0.32); }
.cm-blank input:focus,
.cm-blank select:focus{ outline: none; border-bottom-color: var(--orange); background: rgba(255,78,14,0.06); }
.cm-blank--select{ position: relative; }
.cm-blank--select select{
  appearance: none;
  -webkit-appearance: none;
  padding-right: 1.1em;
  cursor: pointer;
}
.cm-blank--select::after{
  content: "▾";
  position: absolute;
  right: 0.15em; top: 50%;
  transform: translateY(-55%);
  color: var(--orange);
  font-size: 0.7em;
  pointer-events: none;
}

.cm-note__msg{
  margin-top: 0.4rem;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  background: rgba(var(--ink-rgb), 0.04);
  border: 2px solid rgba(var(--ink-rgb), 0.12);
  border-radius: var(--radius-sm);
  padding: 0.8rem 0.9rem;
  resize: vertical;
  min-height: 4.5rem;
  transition: border-color 0.2s var(--ease);
}
.cm-note__msg::placeholder{ color: rgba(var(--ink-rgb), 0.4); }
.cm-note__msg:focus{ outline: none; border-color: var(--orange); }

/* ---- Vista previa tipo burbuja de WhatsApp ---- */
.cm-preview{
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  margin-top: 1.25rem;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.cm-preview.is-visible{ opacity: 1; transform: translateY(0); }
.cm-preview__avatar{
  flex-shrink: 0;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  background: var(--navy);
  border-radius: 50%;
  overflow: hidden;
}
.cm-preview__avatar img{ width: 60%; }
.cm-preview__bubble{
  position: relative;
  background: var(--surface-alt);
  border-radius: 4px 14px 14px 14px;
  padding: 0.7rem 0.9rem;
  max-width: 100%;
}
.cm-preview__label{
  display: block;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--orange);
  margin-bottom: 0.25rem;
}
.cm-preview__text{
  font-size: 0.92rem;
  line-height: 1.45;
  color: rgba(var(--ink-rgb), 0.85);
  white-space: pre-line;
}

.cm-note__send{
  margin-top: 1.5rem;
  width: 100%;
  gap: 0.6rem;
}
.cm-note__send i{ font-size: 1.1rem; }

/* espejo oculto para auto-ajustar el ancho de los inputs inline */
.cm-mirror{
  position: absolute;
  visibility: hidden;
  white-space: pre;
  pointer-events: none;
  font-family: var(--font-display);
}

/* Campo requerido vacío al intentar enviar: un shake para pedir atención */
.cm-invalid{ animation: cm-shake 0.4s var(--ease); }
@keyframes cm-shake{
  0%, 100%{ transform: translateX(0); }
  20%, 60%{ transform: translateX(-5px); }
  40%, 80%{ transform: translateX(5px); }
}

/* Al enviar, la nota se va volando hacia WhatsApp */
.cm-note.is-sending{
  opacity: 0;
  transform: translateY(-40px) scale(0.96);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
@media (prefers-reduced-motion: reduce){
  .cm-preview, .cm-note.is-sending{ transition: none; }
}