/* ==========================================================================
   WeAreBBV — hoja de estilos única
   1. Tokens · 2. Reset · 3. Layout · 4. Tipografía · 5. Botones
   6. Header/Nav · 7. Hero · 8. Marquee · 9. About · 10. Services
   11. Process · 12. Work · 13. Newsletter · 14. Páginas internas
   15. Case study · 16. Contacto · 17. Footer · 18. Utilidades/animación
   19. Scroll por pantallas · 20. Idioma + NAP · 21. Landing de redes
   22. Landing en modo pantalla completa
   ========================================================================== */

/* ------------------------------- 1. Tokens ------------------------------ */
:root {
  --pink:   #ff0099;
  --fuchsia:#c026d3;
  --violet: #773ffd;
  --indigo: #5b2eff;
  --grad:   linear-gradient(100deg, var(--pink) 0%, var(--fuchsia) 45%, var(--violet) 78%, var(--indigo) 100%);
  --grad-soft: linear-gradient(100deg, rgba(255,0,153,.16), rgba(119,63,253,.16));

  --bg:      #08090c;
  --bg-2:    #0c0e13;
  --bg-3:    #11131a;
  --line:    rgba(255,255,255,.09);
  --line-2:  rgba(255,255,255,.16);

  --fg:      #f4f5f7;
  --fg-mid:  #a9adb8;
  --fg-dim:  #71757f;

  --sans:    'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif:   'Instrument Serif', Georgia, 'Times New Roman', serif;

  --shell:   1240px;
  --gutter:  clamp(1.25rem, 4vw, 2.5rem);
  --radius:  20px;
  --radius-lg: 28px;

  --ease:    cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* -------------------------------- 2. Reset ------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.nav-open { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; padding: 0; }

::selection { background: var(--pink); color: #fff; }

:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #23262f; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #333743; }

/* ------------------------------- 3. Layout ------------------------------ */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell.narrow { max-width: 820px; }

.section { padding-block: clamp(4.5rem, 10vw, 9rem); position: relative; }

.section-head { max-width: 720px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.row {
  max-width: none; display: flex; align-items: flex-end;
  justify-content: space-between; gap: 2rem; flex-wrap: wrap;
}
/* Título a la izquierda, entradilla a la derecha: ahorra alto */
.section-head.split {
  max-width: none;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: end;
}
.section-head.split .lead { margin-top: 0; }
@media (max-width: 900px) {
  .section-head.split { grid-template-columns: 1fr; gap: 1rem; }
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--pink); color: #fff; padding: .75rem 1.25rem; border-radius: 0 0 12px 0;
}
.skip:focus { left: 0; }

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

/* ----------------------------- 4. Tipografía ---------------------------- */
h1, h2, h3, h4 {
  font-family: var(--sans);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.028em;
}

em, .em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.01em;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.h2 { font-size: clamp(2rem, 4.6vw, 3.5rem); }
.h3 { font-size: clamp(1.5rem, 2.8vw, 2.15rem); line-height: 1.12; }

.kicker {
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: 1rem;
}

.lead {
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  color: var(--fg-mid);
  max-width: 62ch;
  margin-top: 1.35rem;
}
.lead-sm { color: var(--fg-mid); margin-bottom: 1.5rem; }

/* ------------------------------ 5. Botones ------------------------------ */
.btn {
  --pad-y: .78rem;
  --pad-x: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: var(--pad-y) var(--pad-x);
  border: 0;
  border-radius: 99px;
  font-family: var(--sans);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: -.01em;
  cursor: pointer;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  white-space: nowrap;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), color .25s;
}
.btn svg {
  width: 18px; height: 18px; fill: none;
  stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .35s var(--ease-out);
}
.btn:hover svg { transform: translateX(4px); }

.btn-sm { --pad-y: .58rem; --pad-x: 1.15rem; font-size: .875rem; }
.btn-lg { --pad-y: 1rem; --pad-x: 2rem; font-size: 1.02rem; }

.btn-grad { color: #fff; background: var(--grad); background-size: 200% 100%; }
.btn-grad::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--grad); background-size: 200% 100%;
  background-position: 100% 0;
  opacity: 0; transition: opacity .4s var(--ease);
}
.btn-grad:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 34px -10px rgba(192,38,211,.65);
}
.btn-grad:hover::after { opacity: 1; }

.btn-ghost {
  color: var(--fg);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line-2);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover {
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.3);
  transform: translateY(-2px);
}

.link-arrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--sans); font-weight: 600; font-size: .98rem;
  color: var(--fg);
  padding-bottom: 3px;
  background-image: var(--grad);
  background-repeat: no-repeat;
  background-size: 0% 2px;
  background-position: 0 100%;
  transition: background-size .45s var(--ease-out);
}
.link-arrow svg {
  width: 18px; height: 18px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .35s var(--ease-out);
}
.link-arrow:hover { background-size: 100% 2px; }
.link-arrow:hover svg { transform: translateX(5px); }

/* --------------------------- 6. Header / Nav ---------------------------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background .4s var(--ease), backdrop-filter .4s, border-color .4s, padding .4s var(--ease);
  border-bottom: 1px solid transparent;
  padding-block: 1.15rem;
}
.site-header.stuck {
  background: rgba(8,9,12,.72);
  backdrop-filter: blur(16px) saturate(150%);
  border-bottom-color: var(--line);
  padding-block: .7rem;
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }

.logo img { width: clamp(140px, 16vw, 180px); height: auto; }

.nav-desktop { display: flex; gap: 2.2rem; }
.nav-desktop a {
  font-family: var(--sans); font-weight: 500; font-size: .95rem;
  color: var(--fg-mid);
  position: relative; padding-block: .35rem;
  transition: color .25s;
}
.nav-desktop a::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px; border-radius: 2px;
  background: var(--grad);
  transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--ease-out);
}
.nav-desktop a:hover { color: var(--fg); }
.nav-desktop a:hover::after,
.nav-desktop a[aria-current]::after { transform: scaleX(1); transform-origin: left; }
.nav-desktop a[aria-current] { color: var(--fg); }

.header-actions { display: flex; align-items: center; gap: .85rem; }

.burger {
  display: none;
  width: 44px; height: 44px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line-2);
  border-radius: 50%;
  cursor: pointer;
  position: relative;
}
.burger span {
  position: absolute; left: 50%; width: 18px; height: 1.8px;
  background: var(--fg); border-radius: 2px;
  transition: transform .35s var(--ease-out), opacity .2s;
}
.burger span:nth-child(1) { transform: translate(-50%, -4px); }
.burger span:nth-child(2) { transform: translate(-50%, 4px); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translate(-50%, 0) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { transform: translate(-50%, 0) rotate(-45deg); }

.mobile-nav {
  position: fixed; inset: 0; z-index: 99;
  background: var(--bg);
  padding: 7rem var(--gutter) 2.5rem;
  display: flex; flex-direction: column; justify-content: space-between;
  opacity: 0; visibility: hidden;
  transition: opacity .35s var(--ease), visibility .35s;
}
.mobile-nav[hidden] { display: flex; }         /* controlado por .open */
.mobile-nav.open { opacity: 1; visibility: visible; }
.mobile-nav nav { display: flex; flex-direction: column; }
.mobile-nav nav a {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--sans); font-size: clamp(1.9rem, 9vw, 2.6rem);
  font-weight: 600; letter-spacing: -.03em;
  padding-block: 1.05rem;
  border-bottom: 1px solid var(--line);
  opacity: 0; transform: translateY(18px);
}
.mobile-nav.open nav a {
  animation: navIn .5s var(--ease-out) forwards;
  animation-delay: calc(var(--i) * 70ms + 100ms);
}
.mobile-nav nav a svg {
  width: 26px; height: 26px; fill: none; stroke: var(--fg-dim);
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.mobile-nav nav a[aria-current] span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mobile-nav-foot { display: flex; flex-direction: column; gap: .35rem; color: var(--fg-mid); }

@keyframes navIn { to { opacity: 1; transform: none; } }

/* -------------------------------- 7. Hero ------------------------------- */
/* Columna: contenido centrado y el marquee siempre pegado abajo,
   tanto en modo pantalla completa como en scroll normal. */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: stretch;
  padding-block: 8rem 0;
  overflow: hidden;
}
.hero-inner { margin-block: auto; }
.hero-media { position: absolute; inset: 0; z-index: -1; }
.hero-media video {
  width: 100%; height: 100%; object-fit: cover;
  opacity: .3; filter: grayscale(.5) contrast(1.1);
}
.hero-veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 15% 10%, rgba(255,0,153,.22), transparent 55%),
    radial-gradient(100% 80% at 85% 20%, rgba(91,46,255,.24), transparent 55%),
    linear-gradient(180deg, rgba(8,9,12,.7) 0%, rgba(8,9,12,.55) 45%, var(--bg) 100%);
}

.orb {
  position: absolute; border-radius: 50%;
  filter: blur(90px); pointer-events: none;
  will-change: transform;
}
.orb-a {
  width: 46vw; height: 46vw; max-width: 620px; max-height: 620px;
  background: radial-gradient(circle, rgba(255,0,153,.42), transparent 65%);
  top: -12%; left: -8%;
  animation: float 18s ease-in-out infinite;
}
.orb-b {
  width: 40vw; height: 40vw; max-width: 560px; max-height: 560px;
  background: radial-gradient(circle, rgba(91,46,255,.4), transparent 65%);
  bottom: -18%; right: -6%;
  animation: float 22s ease-in-out infinite reverse;
}
@keyframes float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(4%, -6%) scale(1.12); }
}

.grain {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

.hero-inner { position: relative; z-index: 1; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--sans); font-size: .8rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--fg-mid);
  padding: .5rem 1rem .5rem .8rem;
  border: 1px solid var(--line-2);
  border-radius: 99px;
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(10px);
  margin-bottom: 1.75rem;
}
.eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 0 0 rgba(255,0,153,.6);
  animation: pulse 2.4s infinite;
}
@keyframes pulse {
  70%  { box-shadow: 0 0 0 9px rgba(255,0,153,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,0,153,0); }
}

.hero-title {
  font-size: clamp(2.6rem, 7.6vw, 5.6rem);
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: .98;
  max-width: 16ch;
}
.hero-title .line { display: block; overflow: hidden; padding-bottom: .06em; }
.hero-title .line-in {
  display: block;
  transform: translateY(105%);
  animation: lineUp .95s var(--ease-out) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes lineUp { to { transform: none; } }

.hero-sub { font-size: clamp(1.02rem, 1.6vw, 1.2rem); color: var(--fg-mid); max-width: 54ch; margin-top: 1.75rem; }

.hero-cta { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.25rem; }

.hero-facts {
  display: flex; flex-wrap: wrap; gap: 1.75rem 2.5rem;
  margin-top: 3.5rem; padding-top: 1.75rem;
  border-top: 1px solid var(--line);
  font-size: .92rem; color: var(--fg-mid);
}
.hero-facts strong {
  font-family: var(--sans); font-weight: 600; color: var(--fg);
  display: block; font-size: 1.15rem;
}

/* ------------------------------ 8. Marquee ------------------------------ */
.marquee {
  border-block: 1px solid var(--line);
  background: var(--bg-2);
  padding-block: 1.15rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track { display: flex; width: max-content; animation: scrollX 38s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-group { display: flex; align-items: center; }
.marquee-group span {
  font-family: var(--sans); font-size: clamp(.95rem, 1.6vw, 1.15rem);
  font-weight: 500; letter-spacing: -.01em; color: var(--fg-mid);
  padding-inline: 1.5rem; white-space: nowrap;
}
.marquee-group i {
  font-style: normal; font-size: .7rem;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
@keyframes scrollX { to { transform: translateX(-50%); } }

/* -------------------------------- 9. About ------------------------------ */
.about-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

.pill-row { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.75rem; }
.pill {
  font-family: var(--sans); font-size: .85rem; font-weight: 500;
  padding: .45rem 1rem; border-radius: 99px;
  border: 1px solid var(--line-2);
  background: var(--grad-soft);
  color: var(--fg);
}

.stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem; margin-top: 2.75rem;
  padding-top: 2.25rem; border-top: 1px solid var(--line);
}
.stat-num {
  display: block;
  font-family: var(--sans); font-size: clamp(2rem, 4vw, 2.9rem);
  font-weight: 600; letter-spacing: -.04em; line-height: 1;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
}
.stat-label { display: block; margin-top: .5rem; font-size: .86rem; color: var(--fg-dim); line-height: 1.4; }

.about-media { position: relative; }
.about-media img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
}
.about-media::before {
  content: ''; position: absolute; inset: -1px;
  border-radius: var(--radius-lg);
  background: var(--grad); opacity: .35; z-index: -1;
  filter: blur(26px);
}
.about-media figcaption {
  position: absolute; left: 1.25rem; bottom: 1.25rem;
  font-family: var(--sans); font-size: .8rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .5rem 1rem; border-radius: 99px;
  background: rgba(8,9,12,.72); backdrop-filter: blur(10px);
  border: 1px solid var(--line-2);
}

/* ------------------------------ 10. Services ---------------------------- */
.services { background: var(--bg-2); border-block: 1px solid var(--line); }

/* Tres tarjetas en fila: así la sección entera cabe en una pantalla. */
.service-list {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 1.8vw, 1.5rem);
}

.service {
  display: flex; flex-direction: column;
  padding: clamp(.85rem, 1.4vw, 1.15rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, rgba(255,255,255,.035), rgba(255,255,255,.008));
  transition: border-color .45s var(--ease), transform .45s var(--ease-out);
}
.service:hover { border-color: var(--line-2); transform: translateY(-4px); }

.service-media {
  position: relative; border-radius: var(--radius); overflow: hidden;
  margin-bottom: clamp(.9rem, 1.8vh, 1.35rem);
}
.service-media img {
  width: 100%; aspect-ratio: 16/10; object-fit: cover;
  transition: transform .8s var(--ease-out), filter .6s;
  filter: saturate(1.05);
}
.service:hover .service-media img { transform: scale(1.06); }
.service-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(200deg, transparent 40%, rgba(8,9,12,.55));
}
.service-n {
  position: absolute; z-index: 1; top: 1rem; left: 1rem;
  font-family: var(--sans); font-size: .8rem; font-weight: 700; letter-spacing: .1em;
  padding: .4rem .75rem; border-radius: 99px;
  background: rgba(8,9,12,.7); backdrop-filter: blur(8px);
  border: 1px solid var(--line-2);
}

.service-body { display: flex; flex-direction: column; flex: 1; }
.service-body .kicker { margin-bottom: .5rem; }
.service-body .h3 { font-size: clamp(1.15rem, min(1.7vw, 2.6vh), 1.5rem); margin-bottom: .6rem; }
.service-body p { color: var(--fg-mid); font-size: clamp(.86rem, min(1.05vw, 1.7vh), .95rem); }
.service-body .tag-row { margin-top: auto; padding-top: 1.1rem; }

.tag-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.tag-row li {
  font-family: var(--sans); font-size: .78rem; font-weight: 500;
  color: var(--fg-mid);
  padding: .35rem .8rem; border-radius: 99px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
}

/* ------------------------------ 11. Process ----------------------------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.step {
  padding: 1.75rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-2);
  position: relative; overflow: hidden;
  transition: border-color .4s, background .4s;
}
.step::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: var(--grad); transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease-out);
}
.step:hover { border-color: var(--line-2); background: var(--bg-3); }
.step:hover::before { transform: scaleX(1); }
.step-n {
  font-family: var(--sans); font-size: .78rem; font-weight: 700; letter-spacing: .14em;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.step h3 { font-size: 1.2rem; margin: .6rem 0 .5rem; }
.step p { font-size: .92rem; color: var(--fg-mid); }

/* -------------------------------- 12. Work ------------------------------ */
.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }

.work-card {
  display: flex; flex-direction: column;
  padding: 1rem 1rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-2);
  transition: border-color .4s, transform .5s var(--ease-out), background .4s;
}
.work-card:hover { border-color: var(--line-2); background: var(--bg-3); transform: translateY(-6px); }

.work-thumb { border-radius: var(--radius); overflow: hidden; margin-bottom: 1.25rem; }
.work-thumb img {
  width: 100%; aspect-ratio: 16/10; object-fit: cover;
  transition: transform .8s var(--ease-out);
}
.work-card:hover .work-thumb img { transform: scale(1.05); }

.work-meta {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding-inline: .35rem; margin-bottom: .65rem;
  font-family: var(--sans); font-size: .78rem;
}
.work-client { font-weight: 600; }
.work-sector { color: var(--fg-dim); }
.work-sector::before { content: '· '; }

.work-title {
  padding-inline: .35rem;
  font-size: 1.18rem; line-height: 1.25;
  flex: 1;
}
.work-go {
  display: inline-flex; align-items: center; gap: .45rem;
  padding-inline: .35rem; margin-top: 1.25rem;
  font-family: var(--sans); font-size: .88rem; font-weight: 600;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.work-go svg {
  width: 16px; height: 16px; fill: none; stroke: var(--violet);
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .35s var(--ease-out);
}
.work-card:hover .work-go svg { transform: translateX(4px); }

/* ----------------------------- 13. Newsletter --------------------------- */
.news-card {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
  padding: clamp(2rem, 5vw, 4rem);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-2);
  background:
    radial-gradient(90% 140% at 0% 0%, rgba(255,0,153,.2), transparent 60%),
    radial-gradient(90% 140% at 100% 100%, rgba(91,46,255,.24), transparent 60%),
    var(--bg-2);
}
.news-copy p { color: var(--fg-mid); margin-top: 1rem; max-width: 46ch; }

.news-form { display: flex; flex-wrap: wrap; gap: .75rem; }
.news-form input[type=email] {
  flex: 1 1 240px;
  padding: 1rem 1.25rem;
  background: rgba(8,9,12,.6);
  border: 1px solid var(--line-2);
  border-radius: 99px;
  transition: border-color .3s, background .3s;
}
.news-form input[type=email]::placeholder { color: var(--fg-dim); }
.news-form input[type=email]:focus {
  outline: none; border-color: var(--pink); background: rgba(8,9,12,.85);
}
.news-form .form-msg { flex-basis: 100%; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.form-msg {
  font-size: .9rem; min-height: 1.2em; margin-top: .35rem;
  color: var(--fg-mid);
}
.form-msg.ok    { color: #4ade80; }
.form-msg.error { color: #fb7185; }

/* -------------------------- 14. Páginas internas ------------------------ */
.page-hero {
  position: relative; overflow: hidden;
  padding: clamp(8rem, 16vw, 11rem) 0 clamp(3rem, 6vw, 4.5rem);
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}
.page-hero .orb-a { top: -40%; left: 30%; opacity: .7; }
.page-hero .orb-b { bottom: -60%; right: 5%; opacity: .6; }

.page-title {
  font-size: clamp(2.3rem, 6vw, 4.25rem);
  letter-spacing: -.04em; line-height: 1.02;
  max-width: 20ch;
}

.crumbs {
  display: flex; gap: .6rem; flex-wrap: wrap;
  font-size: .84rem; color: var(--fg-dim); margin-bottom: 1.75rem;
}
.crumbs a:hover { color: var(--fg); }
.crumbs span[aria-current] { color: var(--fg-mid); }

/* Listado de casos */
.case-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.75rem, 5vw, 4rem); align-items: center;
}
.case-panel { border-bottom: 1px solid var(--line); }
.case-panel:last-of-type { border-bottom: 0; }
.case-panel.flip .case-row-media { order: 2; }

.case-row-media { display: block; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); }
.case-row-media img {
  width: 100%; aspect-ratio: 16/10; object-fit: cover;
  transition: transform .9s var(--ease-out), filter .6s;
  filter: saturate(1.02);
}
.case-panel:hover .case-row-media img { transform: scale(1.05); }

.case-index {
  font-family: var(--sans); font-size: .78rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg-dim); margin-bottom: .9rem;
}
.case-row-body .h3 { margin-bottom: 1rem; }
.case-row-body > p { color: var(--fg-mid); }
.case-row-body .link-arrow { margin-top: 1.5rem; }

/* --------------------------- 15. Case study ----------------------------- */
.case-facts {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem; margin-top: 2.75rem;
  padding-top: 1.75rem; border-top: 1px solid var(--line);
}
.case-facts dt {
  font-family: var(--sans); font-size: .72rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--fg-dim);
  margin-bottom: .4rem;
}
.case-facts dd { margin: 0; font-size: .95rem; }

.case-cover {
  max-width: 1400px; margin: clamp(-3rem, -4vw, -2rem) auto 0;
  padding-inline: var(--gutter);
  position: relative; z-index: 2;
}
.case-cover img {
  width: 100%; aspect-ratio: 16/9; object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-2);
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.9);
}

.case-body .block { padding-block: clamp(1.75rem, 4vw, 2.75rem); }
.case-body .block + .block { border-top: 1px solid var(--line); }
.case-body .h3 { display: flex; align-items: baseline; gap: .9rem; margin-bottom: 1.25rem; }
.case-body .num {
  font-family: var(--sans); font-size: .78rem; font-weight: 700; letter-spacing: .12em;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.case-body > .shell > .block > p { color: var(--fg-mid); }

.strategy-list { display: grid; gap: 1rem; }
.strategy-list li {
  padding: 1.35rem 1.5rem;
  border: 1px solid var(--line);
  border-left: 2px solid transparent;
  border-radius: 14px;
  background: var(--bg-2);
  border-image: none;
  transition: border-color .35s, background .35s, transform .35s var(--ease-out);
}
.strategy-list li:hover { background: var(--bg-3); transform: translateX(4px); }
.strategy-list h3 { font-size: 1.05rem; margin-bottom: .35rem; }
.strategy-list p { font-size: .95rem; color: var(--fg-mid); }

.result-list { display: grid; gap: 1.15rem; }
.result-list li { display: flex; gap: 1rem; align-items: flex-start; }
.result-list svg {
  flex: none; width: 22px; height: 22px; margin-top: .28rem;
  fill: none; stroke: var(--pink); stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.result-list h3 { font-size: 1.05rem; margin-bottom: .25rem; }
.result-list p { font-size: .95rem; color: var(--fg-mid); }

/* Cifras del caso: solo aparecen en los casos que traen datos medidos */
.case-stats { padding-block: clamp(3rem, 7vw, 5rem) 0; }
.case-stats .kicker { margin-bottom: 1.5rem; }

.stat-grid {
  display: grid; gap: .85rem;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.stat-grid li {
  padding: 1.5rem 1.4rem;
  border: 1px solid var(--line); border-radius: 16px;
  background: var(--bg-2);
  transition: background .35s, border-color .35s, transform .35s var(--ease-out);
}
.stat-grid li:hover { background: var(--bg-3); border-color: var(--line-2); transform: translateY(-3px); }
.stat-grid b {
  display: block; margin-bottom: .5rem;
  font-family: var(--sans); font-weight: 600; font-size: clamp(1.9rem, 4.6vw, 2.5rem);
  letter-spacing: -.04em; line-height: 1;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat-grid span { display: block; font-size: .88rem; line-height: 1.45; color: var(--fg-mid); }

/* La cifra que abre manda: ocupa el doble y va sobre el degradado suave */
.stat-grid .is-lead { background: var(--grad-soft); border-color: var(--line-2); }
.stat-grid .is-lead b { font-size: clamp(2.6rem, 7vw, 3.6rem); }
.stat-grid .is-lead span { font-size: .95rem; color: var(--fg); }
@media (min-width: 560px) { .stat-grid .is-lead { grid-column: span 2; } }

.stat-note {
  margin-top: 1.1rem; font-size: .78rem; line-height: 1.6; color: var(--fg-dim);
  max-width: 62ch;
}

/* Top de contenido: ranking numerado */
.top-list { display: grid; gap: .85rem; counter-reset: top; margin-top: 1.5rem; }
.top-list li {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.2rem 1.4rem;
  border: 1px solid var(--line); border-radius: 14px; background: var(--bg-2);
  transition: background .35s, border-color .35s;
}
.top-list li:hover { background: var(--bg-3); border-color: var(--line-2); }
.top-list li::before {
  counter-increment: top; content: counter(top);
  flex: none; width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 9px; background: var(--grad); color: #fff;
  font-family: var(--sans); font-weight: 700; font-size: .85rem; line-height: 1;
}
.top-list h3 { font-size: 1.02rem; margin-bottom: .2rem; }
.top-list p { font-size: .93rem; color: var(--fg-mid); }

.next-case { border-top: 1px solid var(--line); background: var(--bg-2); }
.next-link {
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
}
.next-link .kicker { margin: 0; flex-basis: 100%; }
.next-title {
  font-family: var(--sans); font-weight: 600; letter-spacing: -.03em;
  font-size: clamp(1.4rem, 3.4vw, 2.2rem); line-height: 1.15;
  flex: 1;
  transition: color .3s;
}
.next-link svg {
  flex: none; width: 40px; height: 40px; padding: 9px;
  border: 1px solid var(--line-2); border-radius: 50%;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .4s var(--ease-out), background .3s, border-color .3s;
}
.next-link:hover svg { transform: translateX(6px); background: var(--grad); border-color: transparent; }

/* ------------------------------ 16. Contacto ---------------------------- */
.contact-grid {
  display: grid; grid-template-columns: .85fr 1.15fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: start;
}

.contact-card {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-2);
}
.contact-card h2 {
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--fg-dim); margin-bottom: 1.5rem;
}
.contact-item {
  display: block; padding-block: 1.05rem;
  border-top: 1px solid var(--line);
  transition: padding-left .35s var(--ease-out);
}
.contact-item:first-of-type { border-top: 0; padding-top: 0; }
.contact-item:not(.static):hover { padding-left: .5rem; }
.contact-item span {
  display: block; font-size: .75rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--fg-dim); margin-bottom: .2rem;
}
.contact-item strong {
  font-family: var(--sans); font-weight: 600; font-size: 1.05rem;
  letter-spacing: -.02em;
}
.contact-item:not(.static):hover strong {
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}

.contact-form { display: grid; gap: 1rem; }

.field { position: relative; }
.field input, .field textarea {
  width: 100%;
  padding: 1.6rem 1.25rem .7rem;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  transition: border-color .3s, background .3s;
  resize: vertical;
}
.field textarea { padding-top: 1.9rem; min-height: 150px; }
.field label {
  position: absolute; left: 1.25rem; top: 1.05rem;
  font-size: .95rem; color: var(--fg-dim);
  pointer-events: none;
  transform-origin: left top;
  transition: transform .25s var(--ease-out), color .25s;
}
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--violet); background: var(--bg-3);
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label {
  transform: translateY(-.72rem) scale(.78);
  color: var(--fg-mid);
}
.field.invalid input, .field.invalid textarea { border-color: #fb7185; }
.field-error { font-size: .82rem; color: #fb7185; margin-top: .35rem; }

.contact-form .btn { justify-self: start; margin-top: .5rem; }
.contact-form .btn[data-loading] { pointer-events: none; opacity: .7; }

.socials { display: flex; gap: .6rem; }
.socials a {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--fg-mid);
  transition: color .3s, border-color .3s, transform .35s var(--ease-out), background .3s;
}
.socials a:hover {
  color: #fff; border-color: transparent; background: var(--grad);
  transform: translateY(-3px);
}
.socials svg { width: 17px; height: 17px; }
.socials-lg { margin-top: 1.5rem; }
.socials-lg a { width: 46px; height: 46px; }
.socials-lg svg { width: 19px; height: 19px; }

/* ------------------------------- 17. Footer ----------------------------- */
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--bg-2);
  padding-top: clamp(4rem, 9vw, 7rem);
  position: relative; overflow: hidden;
}
.site-footer::before {
  content: ''; position: absolute; top: -40%; left: 50%;
  transform: translateX(-50%);
  width: 80vw; height: 60vh; pointer-events: none;
  background: radial-gradient(circle, rgba(119,63,253,.18), transparent 65%);
  filter: blur(70px);
}

.footer-top { position: relative; text-align: center; padding-bottom: clamp(3rem, 7vw, 5rem); }
.footer-title {
  font-size: clamp(2.2rem, 6.5vw, 4.5rem);
  letter-spacing: -.04em; line-height: 1.02;
  margin-bottom: 2rem;
}

.footer-grid {
  position: relative;
  display: grid; grid-template-columns: 1.6fr 1fr 1fr .8fr;
  gap: 2.5rem;
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--line);
}
.footer-brand img { width: 190px; margin-bottom: 1.15rem; }
.footer-brand p { color: var(--fg-dim); font-size: .92rem; max-width: 36ch; }

.footer-col h3 {
  font-size: .72rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--fg-dim); margin-bottom: .85rem;
}
.footer-link-lg {
  font-family: var(--sans); font-weight: 600; font-size: 1.05rem;
  letter-spacing: -.02em;
  background-image: var(--grad);
  background-repeat: no-repeat; background-size: 0% 2px; background-position: 0 100%;
  padding-bottom: 3px;
  transition: background-size .45s var(--ease-out);
}
.footer-link-lg:hover { background-size: 100% 2px; }
.footer-menu { display: grid; gap: .5rem; }
.footer-menu a { color: var(--fg-mid); font-size: .95rem; transition: color .25s; }
.footer-menu a:hover { color: var(--fg); }

.footer-bottom {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1.25rem;
  padding-block: 1.75rem;
  border-top: 1px solid var(--line);
  font-size: .86rem; color: var(--fg-dim);
}

.wa-float {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 90;
  display: grid; place-items: center;
  width: 54px; height: 54px; border-radius: 50%;
  background: #25d366; color: #062e14;
  box-shadow: 0 12px 30px -8px rgba(37,211,102,.6);
  transform: scale(0);
  transition: transform .45s var(--ease-out), box-shadow .3s;
}
.wa-float.show { transform: scale(1); }
.wa-float:hover { box-shadow: 0 16px 40px -8px rgba(37,211,102,.85); }
.wa-float svg { width: 27px; height: 27px; }

/* ------------------------ 18. Utilidades / animación -------------------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.reveal.in { opacity: 1; transform: none; }

/* ======================================================================
   19. Scroll por pantallas completas (solo en <html class="snap">)
   --------------------------------------------------------------------
   Se usa scroll-snap nativo, no captura de la rueda: el teclado
   (PgDn, flechas, Home/End), el trackpad y el gesto táctil siguen
   funcionando como espera el sistema operativo.

   `scroll-snap-stop: always` es lo que impide saltarse pantallas de un
   manotazo: cada gesto avanza exactamente un viewport.

   Solo se activa si la pantalla es lo bastante grande para que quepa
   una sección entera. Por debajo de eso el sitio scrollea normal — con
   `mandatory` en una pantalla pequeña el contenido que sobresale queda
   inalcanzable, y eso es peor que no tener el efecto.
   ====================================================================== */

/* Fuera del modo pantalla completa el índice lateral no pinta nada */
.dots { display: none; }

@media (min-width: 901px) and (min-height: 640px) {

  html.snap {
    scroll-snap-type: y mandatory;
    scroll-padding-top: 0;
  }

  .snap .panel {
    min-height: 100svh;
    display: flex;
    align-items: center;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    padding-block: clamp(5.5rem, 11vh, 7.5rem) clamp(2.5rem, 6vh, 4rem);
  }
  .snap .panel > .shell { width: 100%; }

  /* --- Densidad: el tipo se ajusta también al alto, no solo al ancho --- */
  .snap .panel .h2 {
    font-size: clamp(1.8rem, min(3.9vw, 5.4vh), 3.1rem);
  }
  .snap .panel .lead {
    font-size: clamp(.92rem, min(1.25vw, 1.9vh), 1.08rem);
    margin-top: clamp(.7rem, 1.6vh, 1.2rem);
  }
  .snap .panel .kicker { margin-bottom: clamp(.5rem, 1.2vh, .9rem); }
  .snap .panel .section-head { margin-bottom: clamp(1.5rem, 4vh, 3rem); }

  /* --- Hero: el marquee hace de borde inferior, no de sección aparte --- */
  .snap .hero { align-items: stretch; padding-block: clamp(5.5rem, 11vh, 7.5rem) 0; }
  .snap .hero .marquee {
    border-bottom: 0;
    background: rgba(12,14,19,.55);
    backdrop-filter: blur(10px);
    padding-block: clamp(.7rem, 1.6vh, 1.1rem);
  }
  .snap .hero-title { font-size: clamp(2.4rem, min(6.2vw, 8vh), 5.2rem); }
  .snap .hero-sub   { margin-top: clamp(.9rem, 2.4vh, 1.75rem); }
  .snap .hero-facts { margin-top: clamp(1.25rem, 3.4vh, 3rem); padding-top: clamp(.9rem, 2.2vh, 1.75rem); }
  .snap .hero-cta   { margin-top: clamp(1.1rem, 2.8vh, 2.25rem); }
  .snap .eyebrow    { margin-bottom: clamp(.8rem, 2vh, 1.75rem); }

  /* --- About --- */
  .snap .about-media img { aspect-ratio: 4/5; max-height: 62vh; }
  .snap .stats { margin-top: clamp(1.25rem, 3vh, 2.75rem); padding-top: clamp(1rem, 2.5vh, 2.25rem); }
  .snap .stat-num { font-size: clamp(1.6rem, min(3vw, 4.4vh), 2.7rem); }
  .snap .pill-row { margin-top: clamp(.9rem, 2.2vh, 1.75rem); }

  /* --- Servicios: la imagen cede alto para que quepan las 3 tarjetas --- */
  .snap .service-media img { aspect-ratio: 16/9; max-height: 22vh; }
  .snap .service-media { margin-bottom: clamp(.7rem, 1.6vh, 1.1rem); }
  .snap .service-body .tag-row { padding-top: clamp(.7rem, 1.8vh, 1.1rem); }

  /* --- Work: tarjetas más bajas para que quepan con el encabezado --- */
  .snap .work-thumb img { aspect-ratio: 16/11; }
  .snap .work-title { font-size: clamp(1rem, min(1.35vw, 2.1vh), 1.18rem); }
  .snap .work-go { margin-top: clamp(.75rem, 2vh, 1.25rem); }

  /* --- Process: las tarjetas se estiran para llenar la pantalla --- */
  .snap .steps { min-height: min(44vh, 380px); }
  .snap .step {
    display: flex; flex-direction: column;
    padding: clamp(1.25rem, 3vh, 2rem) clamp(1.1rem, 1.6vw, 1.6rem);
  }
  .snap .step-n { font-size: clamp(.85rem, min(1.1vw, 1.7vh), 1rem); }
  /* Número arriba, texto abajo: la tarjeta se llena a propósito */
  .snap .step h3 {
    font-size: clamp(1.1rem, min(1.6vw, 2.5vh), 1.4rem);
    margin-block: auto .5rem;
    padding-top: clamp(1rem, 3vh, 2rem);
  }
  .snap .step p  { font-size: clamp(.84rem, min(1.05vw, 1.65vh), .95rem); }

  /* --- Newsletter: la tarjeta gana cuerpo en pantalla completa --- */
  .snap .news-card { padding: clamp(2.25rem, 6vh, 4rem) clamp(2rem, 4vw, 4rem); }

  /* --- Portadas de página (case studies, contacto) --- */
  .snap .page-hero { border-bottom: 0; }
  .snap .page-title { font-size: clamp(2.2rem, min(5.6vw, 7.8vh), 4.25rem); }

  /* --- Un caso por pantalla ---
     La imagen pasa a mandar en alto (no en proporción) para que el caso
     ocupe la pantalla de verdad en vez de flotar en el centro. */
  .snap .case-row-media img {
    aspect-ratio: auto;
    height: clamp(260px, 64vh, 640px);
    max-height: none;
    object-fit: cover;
  }
  .snap .case-row-body .h3 { font-size: clamp(1.35rem, min(2.4vw, 3.6vh), 2.15rem); }
  .snap .case-row-body > p { font-size: clamp(.88rem, min(1.15vw, 1.8vh), 1rem); }
  .snap .case-row-body .tag-row { margin-top: clamp(.9rem, 2.4vh, 1.5rem); }
  .snap .case-row-body .link-arrow { margin-top: clamp(1rem, 2.8vh, 1.5rem); }

  /* --- Contacto: la tarjeta y el formulario a la misma altura --- */
  .snap .contact-grid { align-items: stretch; }
  .snap .contact-side { display: flex; flex-direction: column; }
  .snap .contact-item { padding-block: clamp(.7rem, 1.8vh, 1.05rem); }
  .snap .contact-form { gap: clamp(.6rem, 1.6vh, 1rem); }
  .snap .field input, .snap .field textarea { padding-top: clamp(1.35rem, 3vh, 1.6rem); }
  .snap .field textarea { min-height: clamp(96px, 18vh, 150px); }

  /* --- Footer como pantalla final: contenido repartido de arriba abajo --- */
  /* Se replica el padding del panel para anular el del footer normal,
     si no el título quedaría por debajo de la cabecera fija. */
  .snap .site-footer {
    padding-top: clamp(5.5rem, 11vh, 7.5rem);
    padding-bottom: clamp(2rem, 5vh, 3rem);
  }
  .snap .site-footer > .shell {
    align-self: stretch;
    display: flex; flex-direction: column; justify-content: space-between;
    gap: clamp(1rem, 3vh, 2.5rem);
  }
  .snap .footer-top { padding-bottom: 0; }
  .snap .footer-title { font-size: clamp(2rem, min(5.4vw, 7.5vh), 4.2rem); margin-bottom: clamp(1rem, 3vh, 2rem); }
  .snap .footer-grid { padding-block: clamp(1.25rem, 3.5vh, 3rem); }

  /* --- Índice lateral de pantallas --- */
  .dots {
    position: fixed; z-index: 80;
    right: clamp(.9rem, 2vw, 1.6rem); top: 50%;
    transform: translateY(-50%);
    display: flex; flex-direction: column; gap: .85rem;
  }
  .dots a {
    position: relative;
    display: grid; place-items: center;
    width: 22px; height: 22px;
  }
  .dots a > span[aria-hidden] {
    width: 7px; height: 7px; border-radius: 50%;
    background: rgba(255,255,255,.28);
    transition: background .35s var(--ease), transform .45s var(--ease-out);
  }
  .dots a:hover > span[aria-hidden] { background: rgba(255,255,255,.6); transform: scale(1.3); }
  .dots a[aria-current] > span[aria-hidden] {
    background: var(--grad);
    transform: scale(1.7);
  }
  /* Etiqueta al pasar el ratón */
  .dots a::after {
    content: attr(data-label);
    position: absolute; right: calc(100% + .6rem);
    white-space: nowrap;
    font-family: var(--sans); font-size: .72rem; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase;
    padding: .3rem .6rem; border-radius: 99px;
    background: rgba(8,9,12,.85); border: 1px solid var(--line-2);
    backdrop-filter: blur(8px);
    opacity: 0; transform: translateX(6px);
    pointer-events: none;
    transition: opacity .3s var(--ease), transform .3s var(--ease-out);
  }
  .dots a:hover::after, .dots a:focus-visible::after { opacity: 1; transform: none; }
}

/* ------------------------------ Responsive ------------------------------ */
@media (max-width: 1040px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .work-grid { grid-template-columns: repeat(2, 1fr); }
  .service-list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .nav-desktop { display: none; }
  .burger { display: block; }
  .header-actions .btn-sm { display: none; }

  .about-grid { grid-template-columns: 1fr; }
  .about-media { order: -1; }
  .about-media img { aspect-ratio: 16/11; }

  .service-list { grid-template-columns: 1fr; }

  .case-row { grid-template-columns: 1fr; }
  .case-panel.flip .case-row-media { order: 0; }

  .contact-grid { grid-template-columns: 1fr; }
  .news-card { grid-template-columns: 1fr; }
  .case-facts { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  html { scroll-padding-top: 76px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stats .stat:last-child { grid-column: span 2; }
  .work-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .hero-facts { gap: 1.25rem 2rem; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .wa-float { width: 50px; height: 50px; }
}

/* --------------------- Preferencia de movimiento reducido --------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero-title .line-in { transform: none; }
  .marquee-track { animation: none; }
  .mobile-nav nav a { opacity: 1; transform: none; }
}

/* ======================================================================
   20. Selector de idioma, NAP en el pie y enlaces de servicio
   ====================================================================== */

.lang-switch {
  display: grid; place-items: center;
  min-width: 38px; height: 34px; padding-inline: .6rem;
  border: 1px solid var(--line-2); border-radius: 999px;
  font-family: var(--sans); font-size: .74rem; font-weight: 600;
  letter-spacing: .1em; color: var(--fg-mid);
  transition: color .25s, border-color .25s, background-color .25s;
}
.lang-switch:hover { color: var(--fg); border-color: var(--fg-dim); background: rgba(255,255,255,.05); }

.footer-note {
  margin-top: 1.25rem; font-size: .9rem; color: var(--fg-dim);
  max-width: 46ch; margin-inline: auto;
}
.footer-address {
  font-style: normal; font-size: .92rem; line-height: 1.7; color: var(--fg-mid);
}
.footer-address strong { color: var(--fg); font-weight: 600; }
.footer-hours { font-size: .88rem; line-height: 1.75; color: var(--fg-mid); }
.footer-h3-gap { margin-top: 1.5rem; }
.footer-link {
  display: inline-block; margin-top: .75rem;
  font-size: .9rem; color: var(--fg-mid);
  border-bottom: 1px solid var(--line-2); padding-bottom: 2px;
  transition: color .25s, border-color .25s;
}
.footer-link:hover { color: var(--fg); border-color: var(--fg); }

.service-link {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: 1.35rem;
  font-family: var(--sans); font-weight: 600; font-size: .95rem;
  letter-spacing: -.01em; color: var(--fg);
}
.service-link svg {
  width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2;
  transition: transform .35s var(--ease-out);
}
.service-link:hover svg { transform: translateX(5px); }

.case-cross {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--grad-soft);
  padding: clamp(1.75rem, 4vw, 2.5rem);
}
.case-cross p { color: var(--fg-mid); margin-block: .85rem 1.5rem; max-width: 52ch; }

/* Campo <select> con el mismo tratamiento que el resto del formulario */
.field-select { position: relative; }
.field-select select {
  width: 100%; appearance: none;
  padding: 1.6rem 2.75rem .7rem .95rem;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line); border-radius: 14px;
  color: var(--fg); font-family: var(--body); font-size: 1rem;
  transition: border-color .25s, background-color .25s;
}
.field-select select:focus-visible { outline: none; border-color: var(--violet); background: rgba(255,255,255,.05); }
.field-select option { background: var(--bg-2); color: var(--fg); }
.field-select::after {
  content: ''; position: absolute; right: 1.1rem; top: 55%;
  width: 9px; height: 9px; pointer-events: none;
  border-right: 2px solid var(--fg-dim); border-bottom: 2px solid var(--fg-dim);
  transform: translateY(-50%) rotate(45deg);
}
/* La etiqueta del select va siempre arriba: un <select> nunca está vacío. */
.field-select label {
  position: absolute; left: .95rem; top: .55rem;
  font-size: .72rem; letter-spacing: .04em; color: var(--fg-dim);
  pointer-events: none;
}

/* --- Ajuste de alto tras añadir NAP al pie y enlace en Servicios --------
   El pie creció con la dirección y el horario, y la primera tarjeta de
   Servicios con el enlace a los planes. En modo pantalla completa eso los
   sacaba del viewport, así que aquí recuperan el alto apretando el aire,
   no quitando contenido. */
@media (min-width: 901px) and (min-height: 640px) {
  .snap .site-footer {
    padding-top: clamp(2.5rem, 6vh, 4rem);
    padding-bottom: clamp(1.5rem, 3.5vh, 2.5rem);
  }
  .snap .footer-top    { padding-bottom: clamp(1.25rem, 3vh, 2.25rem); }
  .snap .footer-note   { margin-top: clamp(.6rem, 1.6vh, 1rem); }
  .snap .footer-grid   { padding-block: clamp(1rem, 2.4vh, 1.75rem); }
  .snap .footer-bottom { padding-block: clamp(1rem, 2.4vh, 1.5rem); }
  .snap .service-link  { margin-top: clamp(.6rem, 1.6vh, 1rem); }
}

/* ======================================================================
   21. Landing de redes sociales
   ====================================================================== */

.smm-hero .page-title em { display: inline; }
.smm-hero .hero-cta { margin-top: 2rem; }
.smm-note { margin-top: 1.5rem; font-size: .92rem; color: var(--fg-dim); max-width: 52ch; }

.smm-pain { background: var(--bg-2); border-block: 1px solid var(--line); }
.pain-list { display: grid; gap: .85rem; margin-top: 1.75rem; list-style: none; padding: 0; }
.pain-list li {
  position: relative; padding-left: 2rem;
  color: var(--fg-mid); font-size: clamp(1rem, 1.6vw, 1.12rem); line-height: 1.6;
}
.pain-list li::before {
  content: ''; position: absolute; left: 0; top: .55em;
  width: 10px; height: 2px; background: var(--grad); border-radius: 2px;
}

/* --- Planes --- */
.plan-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem; margin-top: clamp(2.5rem, 5vw, 3.5rem);
  align-items: start;
}
.plan-card {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(1.75rem, 3vw, 2.25rem);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--bg-2);
  transition: border-color .35s, transform .45s var(--ease-out);
}
.plan-card:hover { border-color: var(--line-2); transform: translateY(-4px); }

/* El plan del medio va destacado a propósito: es el que sube el ticket medio. */
.plan-featured {
  border-color: transparent;
  background:
    linear-gradient(var(--bg-3), var(--bg-3)) padding-box,
    var(--grad) border-box;
  border: 1px solid transparent;
}
.plan-badge {
  position: absolute; top: -.75rem; left: 50%; transform: translateX(-50%);
  padding: .3rem .8rem; border-radius: 999px;
  background: var(--grad); color: #fff;
  font-family: var(--sans); font-size: .68rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
}

.plan-name {
  font-family: var(--sans); font-size: 1.3rem; font-weight: 600;
  letter-spacing: -.02em; margin-bottom: .5rem;
}
.plan-tagline { color: var(--fg-dim); font-size: .92rem; line-height: 1.55; min-height: 3.2em; }
.plan-price { display: flex; align-items: baseline; gap: .35rem; margin-top: 1.5rem; }
.plan-amount {
  font-family: var(--sans); font-size: clamp(2.4rem, 4vw, 3rem); font-weight: 700;
  letter-spacing: -.04em; line-height: 1;
}
.plan-period { color: var(--fg-dim); font-size: .95rem; }
.plan-meta {
  margin-top: .4rem; font-size: .85rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--fg-dim);
}

.plan-features {
  display: grid; gap: .7rem; list-style: none; padding: 0;
  margin: 1.75rem 0; padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  flex: 1;
}
.plan-features li { display: flex; gap: .65rem; font-size: .93rem; line-height: 1.5; color: var(--fg-mid); }
.plan-features svg {
  flex: none; width: 17px; height: 17px; margin-top: .18em;
  fill: none; stroke: var(--pink); stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.plan-cta { width: 100%; justify-content: center; }

/* --- FAQ --- */
.faq-list { margin-top: 2.5rem; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.35rem 0; cursor: pointer; list-style: none;
  font-family: var(--sans); font-size: clamp(1rem, 1.8vw, 1.15rem); font-weight: 600;
  letter-spacing: -.02em;
  transition: color .25s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--pink); }
.faq-item summary svg {
  flex: none; width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
  transition: transform .35s var(--ease-out);
}
.faq-item[open] summary svg { transform: rotate(180deg); }
.faq-item p { padding-bottom: 1.5rem; color: var(--fg-mid); line-height: 1.7; max-width: 68ch; }

/* --- CTA final --- */
.smm-cta-card {
  padding: clamp(2rem, 5vw, 3.5rem);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--bg-2); text-align: center;
}
.smm-cta-card .lead { margin-inline: auto; max-width: 52ch; }
.smm-form { margin-top: 2.5rem; text-align: left; }
.smm-or { margin: 1.75rem 0 1rem; font-size: .9rem; color: var(--fg-dim); }

@media (max-width: 1040px) {
  .plan-grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
  .plan-tagline { min-height: 0; }
  .plan-badge { left: auto; right: 1.5rem; transform: none; }
}

@media (max-width: 640px) {
  .lang-switch { min-width: 34px; height: 30px; font-size: .68rem; }
}

/* Pie del formulario de la landing: enviar y WhatsApp en la misma línea */
.smm-form-foot {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: .9rem 1.25rem; margin-top: .5rem;
}
.smm-or { font-size: .9rem; color: var(--fg-dim); }

/* ======================================================================
   22. Landing de redes en modo pantalla completa
   --------------------------------------------------------------------
   Mismo comportamiento que el resto del sitio: un gesto, una pantalla.

   Las dos secciones densas no caben tal cual en 640 px de alto, así que
   aquí cambian de forma en vez de recortarse: la FAQ pasa a dos columnas
   y el formulario reparte los campos cortos en dos. Además ambas llevan
   `overflow-y: auto` como red de seguridad — si alguien abre varias
   preguntas a la vez, el panel scrollea por dentro y nada queda
   inalcanzable.
   ====================================================================== */

/* --- El umbral de esta página es más alto --------------------------------
   El resto del sitio activa el scroll por pantallas a partir de 640 px de
   alto. Aquí no llega: el panel de planes son tres tarjetas con seis
   ventajas cada una y a 640 px se sale 48 px del viewport. Forzar el snap
   ahí dejaría el final de las tarjetas —el botón, justo lo que hay que
   pulsar— fuera de alcance.

   Entre 640 y 719 px, esta página scrollea normal. Es el mismo criterio que
   ya sigue el sitio en móvil: antes sin efecto que con contenido
   inalcanzable. */
@media (min-width: 901px) and (min-height: 640px) and (max-height: 719px) {
  html.snap-dense { scroll-snap-type: none; }

  .snap-dense .panel {
    min-height: 0;
    display: block;
    scroll-snap-align: none;
    scroll-snap-stop: normal;
    padding-block: clamp(4rem, 9vh, 6rem) clamp(3rem, 7vh, 5rem);
  }
  .snap-dense .dots { display: none; }
}

@media (min-width: 901px) and (min-height: 720px) {

  /* --- Hero: las migas no deben comerse alto --- */
  .snap .smm-hero .crumbs { margin-bottom: clamp(.9rem, 2.2vh, 1.5rem); }
  .snap .smm-note { margin-top: clamp(1rem, 2.6vh, 1.75rem); }

  /* --- Dolor: la lista se estira y respira, es una sola idea --- */
  .snap .smm-pain .h3 { font-size: clamp(1.5rem, min(3vw, 4.2vh), 2.4rem); }
  .snap .pain-list { gap: clamp(.9rem, 2.4vh, 1.6rem); margin-top: clamp(1.5rem, 4vh, 2.75rem); }
  .snap .pain-list li { font-size: clamp(1rem, min(1.5vw, 2.3vh), 1.35rem); }

  /* --- Planes: las 3 tarjetas tienen que caber con encabezado y todo ---
     Los dos paneles más densos (planes y formulario) llevan el encabezado
     más apretado que el resto: con el aire por defecto se pasaban unos
     píxeles del viewport y cada parada del scroll quedaba descuadrada. */
  .snap .smm-plans .section-head,
  .snap .smm-cta .section-head { margin-bottom: clamp(1rem, 2.6vh, 2rem); }

  .snap .plan-grid { gap: clamp(1rem, 1.6vw, 1.5rem); margin-top: clamp(1rem, 2.4vh, 1.75rem); }
  .snap .plan-card { padding: clamp(1.25rem, 2.6vh, 2rem) clamp(1.1rem, 1.5vw, 1.75rem); }
  .snap .plan-tagline {
    font-size: clamp(.8rem, min(1vw, 1.55vh), .92rem);
    min-height: 0;
  }
  .snap .plan-price { margin-top: clamp(.8rem, 2.2vh, 1.5rem); }
  .snap .plan-amount { font-size: clamp(1.9rem, min(3.2vw, 4.6vh), 2.9rem); }
  .snap .plan-features {
    gap: clamp(.4rem, 1.1vh, .7rem);
    margin-block: clamp(.7rem, 1.8vh, 1.4rem);
    padding-top: clamp(.7rem, 1.8vh, 1.3rem);
  }
  .snap .plan-features li { font-size: clamp(.8rem, min(1vw, 1.55vh), .93rem); }
  .snap .plan-features svg { width: 15px; height: 15px; }

  /* --- FAQ: dos columnas, y el panel scrollea por dentro si hace falta --- */
  .snap .smm-faq { overflow-y: auto; }
  .snap .smm-faq .shell.narrow { max-width: var(--shell); }
  .snap .faq-list {
    display: grid; grid-template-columns: 1fr 1fr;
    column-gap: clamp(2rem, 4vw, 3.5rem);
    margin-top: clamp(1.25rem, 3vh, 2rem);
    border-top: 0;
  }
  /* Con dos columnas el borde superior de la lista se vería partido: cada
     pregunta se cierra con el suyo y la rejilla queda limpia. */
  .snap .faq-item:nth-child(-n+2) { border-top: 1px solid var(--line); }
  .snap .faq-item summary {
    padding-block: clamp(.7rem, 1.8vh, 1.15rem);
    font-size: clamp(.9rem, min(1.15vw, 1.8vh), 1.05rem);
  }
  .snap .faq-item p {
    padding-bottom: clamp(.8rem, 2vh, 1.35rem);
    font-size: clamp(.85rem, min(1.05vw, 1.6vh), .95rem);
  }

  /* --- Formulario: campos cortos en dos columnas --- */
  .snap .smm-cta { overflow-y: auto; }
  .snap .smm-cta .shell.narrow { max-width: 940px; }
  .snap .smm-cta-card { padding: clamp(1.5rem, 3.6vh, 2.5rem) clamp(2rem, 4vw, 3.5rem); }
  .snap .smm-form {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: clamp(.7rem, 1.8vh, 1.1rem) 1.25rem;
    margin-top: clamp(1rem, 2.6vh, 1.75rem);
  }
  .snap .smm-form .field-wide,
  .snap .smm-form .smm-form-foot,
  .snap .smm-form .form-msg { grid-column: 1 / -1; }
  .snap .smm-form-foot { justify-content: center; }
  .snap .smm-cta-card .h2 { font-size: clamp(1.7rem, min(3.4vw, 4.8vh), 2.8rem); }
}