/* =========================================================
   HORNERO STUDIOS — Estilos
   ========================================================= */

/* ---------- Tokens de marca ---------- */
:root {
  --noche: #1C1612;        /* fondo oscuro cálido (adobe de noche) */
  --noche-2: #2A211B;      /* superficies sobre oscuro */
  --noche-3: #15100D;      /* footer */
  --barro: #C35B2C;        /* terracota oficial */
  --barro-btn: #B4501F;    /* terracota para botones (contraste con texto blanco) */
  --barro-hover: #9E431A;
  --barro-claro: #E2875A;  /* acento sobre fondos oscuros */
  --barro-texto: #A94A20;  /* acento sobre fondos claros */
  --paja: #D8B98A;
  --crema: #F6F1E7;
  --carbon: #292929;       /* gris oficial */
  /* Ambientación del hero */
  --bruma: #F3ECE1;        /* cielo con bruma (fondo principal) */
  --arena-claro: #EADFCD;  /* arena suave */
  --tinta: #2A2420;        /* texto principal, carbón cálido */
  --tinta-2: #4E443B;      /* texto secundario */
  --tierra: #6B5844;       /* texto terciario y anotaciones */
  --linea: rgba(42, 36, 32, 0.12);
  --linea-fuerte: rgba(42, 36, 32, 0.22);
  --grid-line: rgba(42, 36, 32, 0.045);
  --ocaso-1: #DDA57D;      /* inicio del atardecer */
  --texto-claro-2: #CDBFAE;
  --texto-claro-3: #A89A8B;
  --texto-oscuro-2: #3B3631;
  --texto-oscuro-3: #5E554D;
  --linea-oscura: rgba(216, 185, 138, 0.18);
  --linea-clara: rgba(41, 41, 41, 0.14);

  --font-sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --font-ui: 'Inter', -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

  --header-h: 88px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --radius: 999px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--bruma);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video, svg { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
a { color: var(--barro-claro); }
a:hover { color: #F0A57E; }

:focus-visible { outline: 2px solid var(--barro-claro); outline-offset: 3px; }

.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.mono { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.02em; }
.stack-sm { display: flex; flex-direction: column; gap: 18px; }
.stack-md { display: flex; flex-direction: column; gap: 28px; }
.stack-lg { display: flex; flex-direction: column; gap: 64px; }

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--crema); color: var(--carbon);
  padding: 10px 16px; border-radius: 8px; text-decoration: none;
}
.skip-link:focus { top: 16px; }

/* ---------- Botones y links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 54px; padding: 0 28px;
  border-radius: var(--radius);
  font-family: var(--font-sans); font-size: 16px; font-weight: 700;
  text-decoration: none; cursor: pointer;
  border: 1.5px solid transparent;
  transition: background-color .2s, border-color .2s, color .2s;
}
.btn--sm { min-height: 44px; padding: 0 22px; font-size: 14px; }
.btn--primary { background: var(--barro-btn); color: #fff; }
.btn--primary:hover { background: var(--barro-hover); color: #fff; }
.btn--outline { color: var(--crema); border-color: rgba(216, 185, 138, 0.55); }
.btn--outline:hover { color: var(--barro-claro); border-color: var(--barro-claro); }

.link {
  align-self: flex-start;
  color: var(--barro-texto); font-weight: 600; font-size: 15px;
  text-decoration: none; padding: 10px 0 4px;
  border-bottom: 1.5px solid rgba(169, 74, 32, 0.35);
}
.link:hover { color: #7E3714; border-bottom-color: #7E3714; }

/* ---------- Header ----------
   Barra siempre transparente, solo con los links del menú, centrados.
   El color de los textos se adapta solo al fondo que queda debajo
   (data-header="light" o "dark" en cada sección). */
.header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  pointer-events: none;            /* la barra no bloquea clics; solo los links */
  --nav-ink: var(--carbon);        /* color del link activo / hover */
  --nav-dim: rgba(41, 41, 41, 0.58); /* color de los demás links */
}
.header.on-dark {
  --nav-ink: #FFFFFF;
  --nav-dim: rgba(246, 241, 231, 0.6);
}
.header__inner {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: var(--header-h);
  padding: 0 clamp(20px, 2.6vw, 44px);   /* logo pegado al borde izquierdo */
}
.nav { justify-self: center; }
.nav-toggle { justify-self: end; grid-column: 3; }

/* Logo: dos versiones superpuestas que se funden según el fondo */
.header__logo {
  justify-self: start; grid-column: 1; grid-row: 1;
  position: relative; display: block;
  height: 54px; aspect-ratio: 1060 / 360;
  pointer-events: auto;
}
.header__logo img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  transition: opacity .5s ease;
}
.header__logo .logo--light { opacity: 0; }
.header.on-dark .header__logo .logo--dark { opacity: 0; }
.header.on-dark .header__logo .logo--light { opacity: 1; }
.nav { grid-column: 2; grid-row: 1; }

/* Menú: misma familia que la referencia (Inter), peso medio, en minúscula */
.nav {
  display: flex; align-items: center; gap: clamp(28px, 3.2vw, 52px);
  pointer-events: auto;
}
.nav a:not(.btn) {
  position: relative;
  padding: 12px 2px;
  font-family: var(--font-ui); font-size: 15px; font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--nav-ink);
  text-decoration: none;
}
/* Cuando hay una sección activa, el resto se atenúa (como en la referencia) */
.nav.has-active a:not(.btn) { color: var(--nav-dim); }
.nav.has-active a:not(.btn).is-active,
.nav a:not(.btn):hover { color: var(--nav-ink); }

/* Hover: línea fina que se dibuja de izquierda a derecha y se retira hacia la derecha,
   y "foco": los demás links se atenúan mientras el mouse está sobre el menú */
.nav a:not(.btn)::after {
  content: ""; position: absolute; left: 2px; right: 2px; bottom: 7px;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right center;
  transition: transform .45s var(--ease-out);
}
.nav a:not(.btn):hover::after,
.nav a:not(.btn):focus-visible::after { transform: scaleX(1); transform-origin: left center; }
@media (hover: hover) {
  .nav:hover a:not(.btn):not(:hover) { color: var(--nav-dim); }
}
.nav__cta { display: none; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px; padding: 0;
  background: transparent; border: 0; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  pointer-events: auto;
}
.nav-toggle span { width: 22px; height: 1.5px; background: var(--nav-ink); transition: transform .35s var(--ease-out), opacity .25s, background-color .5s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ---------- Hero: video a pantalla completa ---------- */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  background: #000;
  overflow: hidden;
}
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}
/* Ocultar cualquier control nativo (iOS / Safari / Chrome) */
.hero__video::-webkit-media-controls,
.hero__video::-webkit-media-controls-start-playback-button,
.hero__video::-webkit-media-controls-panel,
.hero__video::-webkit-media-controls-play-button { display: none !important; -webkit-appearance: none; }

/* Indicador "Deslizá": chico, centrado abajo, aparece al terminar el video */
.hero__cue {
  position: absolute; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 10px);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  min-width: 44px; padding: 10px 14px;
  color: #fff; text-decoration: none;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
  opacity: 0; pointer-events: none;
  transition: opacity .8s ease, transform .8s ease;
}
.hero.is-ended .hero__cue { opacity: 0.9; transform: translate(-50%, 0); pointer-events: auto; }
.hero__cue:hover { color: #fff; opacity: 1; }
.hero__cue .mono { font-size: 11px; letter-spacing: 0.12em; }
.hero__cue-line {
  width: 1px; height: 36px;
  background: linear-gradient(to bottom, #fff, rgba(255, 255, 255, 0));
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
  animation: cue 1.8s ease-in-out infinite;
  transform-origin: top;
}
@keyframes cue {
  0% { transform: scaleY(0); }
  50% { transform: scaleY(1); }
  100% { transform: scaleY(1); opacity: 0; }
}


/* ---------- Marca sobre el video ----------
   Ubicada en el espacio libre de la derecha. Las medidas van en vw
   para que mantenga su lugar respecto del video en cualquier pantalla. */
.hero__brand {
  position: absolute; z-index: 2;
  left: 54%; right: 3.5%; top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  color: var(--carbon);
  pointer-events: none;
}
.hero__wordmark { margin: 0; display: flex; flex-direction: column; align-items: center; }
.hero__word {
  display: flex; overflow: hidden;
  padding: 0.04em 0.02em 0.02em;
  font-family: 'Montserrat', var(--font-sans);
  font-weight: 900; font-size: clamp(36px, 6.6vw, 168px);
  line-height: 0.92; letter-spacing: -0.01em;
}
.hero__word > span {
  display: inline-block;
  transform: translateY(105%);
  transition: transform 1.1s var(--ease-out) calc(var(--i) * 0.06s);
}
.hero__studios {
  margin-top: 0.55em;
  font-family: 'Montserrat', var(--font-sans);
  font-weight: 600; font-size: clamp(13px, 2.15vw, 54px);
  letter-spacing: 0.95em; margin-right: -0.62em; /* compensa el espaciado de la última letra */
  line-height: 1;
  opacity: 0; filter: blur(6px);
  transition: opacity 1.2s ease .55s, filter 1.2s ease .55s, letter-spacing 1.6s var(--ease-out) .55s;
}
.hero__tagline {
  margin-top: clamp(22px, 2.6vw, 48px);
  font-family: var(--font-ui); font-weight: 500;
  font-size: clamp(16px, 1.35vw, 24px); letter-spacing: -0.01em;
  color: rgba(41, 41, 41, 0.78);
  opacity: 0; transform: translateY(10px);
  transition: opacity 1s var(--ease-out) 1.3s, transform 1s var(--ease-out) 1.3s;
}
.hero__actions {
  margin-top: clamp(18px, 1.8vw, 32px);
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  opacity: 0; transform: translateY(10px);
  transition: opacity 1s var(--ease-out) 1.55s, transform 1s var(--ease-out) 1.55s;
}

/* Palabra que va cambiando */
.rotator {
  display: inline-grid; vertical-align: bottom;
  overflow: hidden; text-align: left;
  color: var(--barro-texto); font-weight: 600;
}
.rotator > span {
  grid-area: 1 / 1;
  transform: translateY(100%); opacity: 0;
  transition: transform .7s var(--ease-out), opacity .7s var(--ease-out);
}
.rotator > span.is-current { transform: none; opacity: 1; }
.rotator > span.is-leaving { transform: translateY(-100%); opacity: 0; }

/* Estado visible */
.hero.is-branded .hero__brand { pointer-events: auto; }
.hero.is-branded .hero__word > span { transform: none; }
.hero.is-branded .hero__studios { opacity: 1; filter: none; letter-spacing: 0.62em; }
.hero.is-cta .hero__tagline,
.hero.is-cta .hero__actions { opacity: 1; transform: none; }

/* Botón secundario para fondos claros */
.btn--ghost-dark { color: var(--carbon); border-color: rgba(41, 41, 41, 0.35); background: rgba(255, 255, 255, 0.18); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.btn--ghost-dark:hover { color: var(--carbon); border-color: var(--carbon); background: rgba(255, 255, 255, 0.4); }

/* =========================================================
   AMBIENTACIÓN "BRUMA"
   La página continúa la luz del hero: amanece con bruma cálida
   y atardece hacia el contacto y el footer.
   Lo tecnológico vive en los detalles: líneas finas, marcas de corte,
   índices y anotaciones en monoespaciada, como un plano de obra.
   ========================================================= */

/* Grilla técnica muy sutil y grano de película, compartidos por las secciones */
.section, .intro { position: relative; isolation: isolate; }
.section::before, .intro::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 85%);
          mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 85%);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none;
  opacity: 0.05; mix-blend-mode: multiply;
  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='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Índice de sección: 01 / Soluciones */
.sec-index {
  display: flex; align-items: center; gap: 12px;
  font-size: 12px; font-weight: 500; letter-spacing: 0.08em;
  color: var(--tierra);
}
.sec-index span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 22px; padding: 0 8px;
  border: 1px solid var(--linea); border-radius: 999px;
  color: var(--barro-texto); font-weight: 600;
}
.sec-index::after { content: ""; flex: 0 0 48px; height: 1px; background: var(--linea-fuerte); }

/* Marcas de corte en las esquinas de paneles (detalle de plano técnico) */
.ticks { position: relative; }
.ticks::after {
  content: ""; position: absolute; inset: -7px; pointer-events: none;
  --t: rgba(42, 36, 32, 0.38);
  background:
    linear-gradient(var(--t), var(--t)) top left / 14px 1px no-repeat,
    linear-gradient(var(--t), var(--t)) top left / 1px 14px no-repeat,
    linear-gradient(var(--t), var(--t)) top right / 14px 1px no-repeat,
    linear-gradient(var(--t), var(--t)) top right / 1px 14px no-repeat,
    linear-gradient(var(--t), var(--t)) bottom left / 14px 1px no-repeat,
    linear-gradient(var(--t), var(--t)) bottom left / 1px 14px no-repeat,
    linear-gradient(var(--t), var(--t)) bottom right / 14px 1px no-repeat,
    linear-gradient(var(--t), var(--t)) bottom right / 1px 14px no-repeat;
}

/* Panel de vidrio esmerilado sobre la bruma */
.glass {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.28));
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 24px 60px -28px rgba(90, 60, 30, 0.28);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
}

/* ---------- 01 · Intro (justo debajo del video) ---------- */
.intro {
  padding: 120px 0 128px;
  color: var(--tinta);
  background:
    radial-gradient(ellipse 60% 55% at 85% 0%, rgba(255, 244, 222, 0.95), transparent 70%),
    linear-gradient(180deg, #EADFCC 0%, var(--bruma) 55%, var(--bruma) 100%);
}
.intro__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; }
.intro__copy { display: flex; flex-direction: column; gap: 26px; }
.intro__title {
  font-size: clamp(42px, 5.4vw, 80px);
  line-height: 1.0; font-weight: 800; font-stretch: 112%;
  letter-spacing: -0.03em;
  color: var(--tinta);
}
.intro__lead { max-width: 540px; font-size: 19px; line-height: 1.6; color: var(--tinta-2); }
.intro__actions { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 4px; }
.intro__note { font-size: 14px; color: var(--tierra); }
.intro__figure { margin: 0; padding: 36px; border-radius: 28px; }
.blueprint { width: 100%; height: auto; overflow: visible; }

/* ---------- Secciones (base) ---------- */
.section { padding: 128px 0; color: var(--tinta); background: var(--bruma); }
.section h2 {
  font-size: clamp(36px, 4.2vw, 60px);
  line-height: 1.02; font-weight: 800; font-stretch: 110%;
  letter-spacing: -0.03em;
}
.section__head { display: flex; flex-direction: column; gap: 20px; max-width: 760px; }
.section__head p:not(.sec-index) { font-size: 18px; line-height: 1.6; color: var(--tinta-2); }

/* ---------- 02 · Soluciones ---------- */
.section--soluciones {
  background: linear-gradient(180deg, var(--bruma) 0%, #F6F0E6 50%, var(--bruma) 100%);
}
.svc {
  display: grid; grid-template-columns: 1fr 1.25fr 1.15fr; gap: 48px;
  padding: 44px 48px;
  border-radius: 24px;
  transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out);
}
.svc:hover { transform: translateY(-4px); box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 36px 70px -30px rgba(90, 60, 30, 0.35); }
.svc__name { display: flex; flex-direction: column; gap: 16px; }
.svc__icon { width: 52px; height: 52px; fill: none; stroke: var(--barro); stroke-width: 1.6; }
.svc__icon .fill { fill: var(--barro); }
.svc__tag { color: var(--barro-texto); font-size: 12px; letter-spacing: 0.06em; }
.svc h3 { font-size: 34px; line-height: 1.08; font-weight: 800; font-stretch: 108%; letter-spacing: -0.02em; }
.svc__body { display: flex; flex-direction: column; gap: 18px; }
.svc__body > p:first-child { font-size: 17px; line-height: 1.65; color: var(--tinta-2); }
.svc__ideal { font-size: 15px; color: var(--tierra); }
.svc__ideal strong { color: var(--tinta); }
.svc__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; font-size: 15px; line-height: 1.5; color: var(--tinta-2); }
.svc__list li { position: relative; padding-left: 22px; }
.svc__list li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 9px; height: 1px; background: var(--barro);
}
.svc__list li:not(:last-child) { padding-bottom: 12px; border-bottom: 1px solid var(--linea); }

/* ---------- 03 · Proceso: línea de obra con nodos ---------- */
.section--proceso {
  background:
    radial-gradient(ellipse 50% 60% at 10% 100%, rgba(217, 198, 168, 0.55), transparent 70%),
    linear-gradient(180deg, var(--bruma) 0%, var(--arena-claro) 100%);
}
.steps {
  position: relative;
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px;
}
.steps::before {
  content: ""; position: absolute; left: 0; right: 0; top: 7px;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--linea-fuerte) 0 6px, transparent 6px 12px);
}
.step { position: relative; display: flex; flex-direction: column; gap: 14px; padding-top: 40px; }
.step::before {
  content: ""; position: absolute; left: 0; top: 0;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--bruma); border: 1px solid var(--tinta);
}
.step--active::before { background: var(--barro); border-color: var(--barro); box-shadow: 0 0 0 6px rgba(195, 91, 44, 0.14); }
.step__num { color: var(--barro-texto); font-size: 12px; letter-spacing: 0.06em; }
.step h3 { font-size: 28px; font-weight: 800; font-stretch: 108%; letter-spacing: -0.02em; }
.step p { color: var(--tinta-2); }

/* ---------- 04 · Por qué Hornero ---------- */
.section--hornero {
  background:
    radial-gradient(circle at 22% 50%, rgba(255, 246, 228, 0.95) 0%, transparent 45%),
    linear-gradient(180deg, var(--arena-claro) 0%, var(--bruma) 100%);
}
.story { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 80px; align-items: center; }
.story__figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.story__figure img { width: 100%; max-width: 320px; height: auto; filter: drop-shadow(0 30px 40px rgba(120, 60, 25, 0.18)); }
.story__figure figcaption { color: var(--tierra); font-size: 12px; font-style: italic; }
.story__lead { max-width: 620px; font-size: 19px; line-height: 1.65; color: var(--tinta-2); }
.values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; padding-top: 28px; border-top: 1px solid var(--linea-fuerte); }
.values > div { display: flex; flex-direction: column; gap: 10px; }
.values h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.values p { font-size: 15px; color: var(--tierra); }

/* ---------- 05 · Contacto: empieza el atardecer ---------- */
.section--contacto {
  padding-bottom: 160px;
  background: linear-gradient(180deg, var(--bruma) 0%, #EEDCC4 45%, #E6BE98 82%, var(--ocaso-1) 100%);
}
.section--contacto::before { -webkit-mask-image: linear-gradient(#000, transparent 70%); mask-image: linear-gradient(#000, transparent 70%); }
.contact { display: grid; grid-template-columns: 1fr 1.15fr; gap: 64px; align-items: start; }
.contact__lead { max-width: 460px; font-size: 18px; line-height: 1.6; color: var(--tinta-2); }
.channels { margin: 0; padding: 0; list-style: none; }
.channels li { display: flex; flex-direction: column; gap: 4px; padding: 18px 0; }
.channels li:not(:last-child) { border-bottom: 1px solid var(--linea-fuerte); }
.channels .mono { font-size: 12px; color: var(--tierra); }
.channels a { font-size: 19px; font-weight: 600; color: var(--tinta); text-decoration: none; }
.channels a:hover { color: var(--barro-texto); }

.form { display: flex; flex-direction: column; gap: 22px; padding: 40px; border-radius: 28px; }
.form label { display: flex; flex-direction: column; gap: 8px; font-size: 14px; font-weight: 500; color: var(--tinta); }
.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.form .btn { align-self: flex-start; }
.form__status { font-size: 14px; color: var(--barro-texto); min-height: 1.4em; }

.field {
  width: 100%;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(42, 36, 32, 0.14);
  border-radius: 12px;
  color: var(--tinta);
  font-family: var(--font-ui); font-size: 16px;
  transition: border-color .25s, background-color .25s, box-shadow .25s;
}
.field::placeholder { color: #8E7D6C; }
.field:hover { border-color: rgba(42, 36, 32, 0.28); }
.field:focus { outline: none; background: rgba(255, 255, 255, 0.9); border-color: var(--barro); box-shadow: 0 0 0 4px rgba(195, 91, 44, 0.14); }
textarea.field { resize: vertical; }

.pills { margin: 0; padding: 0; border: 0; }
.pills legend { padding: 0; margin-bottom: 12px; font-size: 14px; font-weight: 500; color: var(--tinta); }
.pills__row { display: flex; flex-wrap: wrap; gap: 10px; }
.form label.pill { position: relative; display: inline-flex; gap: 0; }
.pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pill span {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 18px;
  border-radius: var(--radius);
  border: 1px solid rgba(42, 36, 32, 0.2);
  background: rgba(255, 255, 255, 0.35);
  color: var(--tinta); font-size: 14px; cursor: pointer;
  transition: background-color .25s, border-color .25s, color .25s;
}
.pill span:hover { border-color: rgba(42, 36, 32, 0.4); }
.pill input:checked + span { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.pill input:focus-visible + span { outline: 2px solid var(--barro); outline-offset: 2px; }

/* ---------- Footer: el ocaso ---------- */
.footer {
  position: relative;
  color: #F3E7D8;
  background: linear-gradient(180deg, var(--ocaso-1) 0%, #A3593A 14%, #4A2C20 46%, #1E1613 100%);
  padding: 140px 0 calc(32px + env(safe-area-inset-bottom, 0px));
}
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; }
.footer__logo { height: 50px; width: auto; }
.footer__claim { max-width: 380px; font-size: 24px; line-height: 1.25; font-weight: 700; font-stretch: 108%; letter-spacing: -0.01em; }
.footer__col { display: flex; flex-direction: column; gap: 12px; font-size: 15px; color: #EADCCB; }
.footer__col .mono { margin-bottom: 4px; font-size: 12px; color: #BFA894; }
.footer__col a { color: #EADCCB; text-decoration: none; }
.footer__col a:hover { color: #FFFFFF; }
.footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  padding-top: 24px; border-top: 1px solid rgba(243, 231, 216, 0.14);
  font-size: 12px; color: #BFA894;
}
.footer__bottom a { color: #BFA894; text-decoration: none; }
.footer__bottom a:hover { color: #fff; }

/* WhatsApp flotante */
.wa-float {
  position: fixed; z-index: 40;
  right: 24px; bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  width: 58px; height: 58px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--barro-btn);
  box-shadow: 0 14px 34px -10px rgba(120, 50, 20, 0.55);
}
.wa-float:hover { background: var(--barro-hover); }
.wa-float svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* =========================================================
   EXPERIENCIA DE ENTRADA
   1) Arranca el video  2) A los 7 s aparece el header y se libera el scroll
   ========================================================= */

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

/* Durante los primeros segundos del video: no se puede scrollear ni tocar nada */
html.is-locked, html.is-locked body { overflow: hidden; height: 100%; }
html.is-locked main > :not(.hero),
html.is-locked .footer,
html.is-locked .wa-float { pointer-events: none; }
html.is-locked .wa-float { opacity: 0; }
.wa-float { transition: opacity .8s ease, background-color .2s; }

/* Header: oculto durante la intro y aparece en cascada a los 5 s del video */
.header__logo,
.nav > *,
.nav-toggle {
  transition:
    opacity 1.1s var(--ease-out) var(--d, 0s),
    transform 1.1s var(--ease-out) var(--d, 0s),
    color .5s ease 0s;
}
.header__logo { --d: 0s; }
.nav > :nth-child(1) { --d: .12s; }
.nav > :nth-child(2) { --d: .2s; }
.nav > :nth-child(3) { --d: .28s; }
.nav > :nth-child(4) { --d: .36s; }

.header.is-intro .header__logo,
.header.is-intro .nav,
.header.is-intro .nav-toggle { pointer-events: none; }
.header.is-intro .header__logo,
.header.is-intro .nav > *,
.header.is-intro .nav-toggle { opacity: 0; transform: translateY(-12px); }


/* =========================================================
   MEJORAS DE DISEÑO · v2
   ========================================================= */

/* Palabra destacada en titulares */
.section h2 em, .intro__title em { font-style: normal; color: var(--barro-texto); }
.section__head--split {
  max-width: none;
  display: grid; grid-template-columns: 1.3fr 1fr; align-items: end; gap: 32px 64px;
}
.section__head--split > p { max-width: 420px; justify-self: end; }

/* ---------- Aparición al hacer scroll ---------- */
[data-reveal] {
  opacity: 0; transform: translateY(28px);
  filter: blur(4px);
  transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out), filter 1.1s var(--ease-out);
  transition-delay: var(--rd, 0s);
}
[data-reveal].is-in { opacity: 1; transform: none; filter: none; }

/* ---------- Tarjetas flotantes del inicio ---------- */
.intro__figure { position: relative; }
.float-card {
  position: absolute; z-index: 2;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px 12px 12px; border-radius: 16px;
  min-width: 230px;
  font-family: var(--font-ui);
  animation: floaty 7s ease-in-out infinite;
}
.float-card b { display: block; font-size: 14px; font-weight: 600; color: var(--tinta); }
.float-card small { display: block; font-size: 12.5px; color: var(--tierra); }
.float-card em { margin-left: auto; align-self: flex-start; font-style: normal; font-size: 10.5px; color: var(--tierra); }
.fc__icon {
  flex: none; width: 36px; height: 36px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
}
.fc__icon svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fc__icon--sale { background: var(--barro); }
.fc__icon--chat { background: var(--tinta); }
.fc__icon--ship { background: #8A6A4A; }
.float-card--1 { top: 8%; left: -9%; }
.float-card--2 { top: 44%; right: -10%; animation-delay: -2.3s; }
.float-card--3 { bottom: 6%; left: 4%; animation-delay: -4.6s; }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Las tarjetas entran una por una cuando aparece la sección */
.intro__figure .float-card { opacity: 0; transition: opacity 1s var(--ease-out); }
.intro__figure.is-in .float-card { opacity: 1; }
.intro__figure.is-in .float-card--1 { transition-delay: .5s; }
.intro__figure.is-in .float-card--2 { transition-delay: .8s; }
.intro__figure.is-in .float-card--3 { transition-delay: 1.1s; }

/* ---------- Explorador de soluciones ---------- */
.svc-explorer { display: grid; grid-template-columns: 1fr 1.08fr; gap: 56px; align-items: start; }
.svc-tabs { display: flex; flex-direction: column; border-top: 1px solid var(--linea-fuerte); }
.svc-tab {
  display: grid; grid-template-columns: 44px 1fr 44px; gap: 16px; align-items: start;
  width: 100%; padding: 28px 0;
  background: none; border: 0; border-bottom: 1px solid var(--linea-fuerte);
  text-align: left; cursor: pointer; color: inherit; font: inherit;
}
.svc-tab__num { padding-top: 14px; font-size: 12px; color: var(--tierra); transition: color .4s; }
.svc-tab__main { display: flex; flex-direction: column; gap: 6px; }
.svc-tab__tag { font-size: 11.5px; letter-spacing: 0.06em; color: var(--barro-texto); opacity: 0; transform: translateY(6px); transition: opacity .5s, transform .5s var(--ease-out); }
.svc-tab__title {
  font-size: clamp(32px, 3.6vw, 52px); line-height: 1; font-weight: 800; font-stretch: 110%;
  letter-spacing: -0.03em;
  color: rgba(42, 36, 32, 0.28);
  transition: color .5s var(--ease-out);
}
.svc-tab__body {
  display: block; max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height .7s var(--ease-out), opacity .5s ease;
}
.svc-tab__desc { display: block; max-width: 460px; padding-top: 10px; font-size: 16px; line-height: 1.6; color: var(--tinta-2); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 14px; }
.chips span {
  padding: 5px 12px; border-radius: 999px; border: 1px solid var(--linea-fuerte);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--tinta-2);
}
.svc-tab__arrow {
  margin-top: 8px; width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--linea-fuerte); color: var(--tierra);
  transition: background-color .4s, color .4s, border-color .4s, transform .5s var(--ease-out);
}
.svc-tab__arrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.svc-tab:hover .svc-tab__title { color: rgba(42, 36, 32, 0.6); }
.svc-tab.is-active .svc-tab__num { color: var(--barro-texto); }
.svc-tab.is-active .svc-tab__tag { opacity: 1; transform: none; }
.svc-tab.is-active .svc-tab__title { color: var(--tinta); }
.svc-tab.is-active .svc-tab__body { max-height: 260px; opacity: 1; transition-delay: 0s, .15s; }
.svc-tab.is-active .svc-tab__arrow { background: var(--tinta); border-color: var(--tinta); color: #fff; transform: rotate(45deg); }
.svc-tab:focus-visible { outline: 2px solid var(--barro); outline-offset: 4px; border-radius: 8px; }

.svc-stage {
  position: sticky; top: calc(var(--header-h) + 24px);
  padding: 56px 28px 28px; border-radius: 28px;
  display: flex; flex-direction: column; gap: 22px;
}
.svc-stage__label { position: absolute; top: 20px; left: 28px; font-size: 11px; letter-spacing: 0.06em; color: var(--tierra); }
.svc-stage__cta { align-self: flex-start; }
.svc-preview { position: relative; }
.svc-preview[hidden] { display: none; }
.svc-preview.is-active .mock { animation: mockIn .8s var(--ease-out); }
@keyframes mockIn { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }

/* Ventana de navegador */
.mock {
  border-radius: 16px; overflow: hidden;
  background: #FFFDF9;
  border: 1px solid rgba(42, 36, 32, 0.1);
  box-shadow: 0 30px 60px -30px rgba(90, 60, 30, 0.35);
  font-family: var(--font-ui);
}
.mock__bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; background: #EFE7DA; border-bottom: 1px solid rgba(42, 36, 32, 0.08); }
.mock__bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(42, 36, 32, 0.18); }
.mock__bar i:first-child { background: var(--barro); }
.mock__url { margin-left: 10px; flex: 1; padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.7); font-size: 11px; color: var(--tierra); }
.mock__body { padding: 20px; min-height: 300px; color: var(--tinta); }
.mock small { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tierra); }

/* Landing */
.ml__nav { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; font-size: 13px; }
.ml__nav span { width: 34px; height: 6px; border-radius: 3px; background: rgba(42, 36, 32, 0.12); }
.ml__nav b { margin-right: auto; }
.ml__nav em { font-style: normal; font-size: 11px; font-weight: 600; padding: 5px 12px; border-radius: 999px; background: var(--tinta); color: #fff; }
.ml__hero { display: grid; grid-template-columns: 1.25fr 1fr; gap: 16px; align-items: center; padding: 22px; border-radius: 14px; background: linear-gradient(135deg, #F6E3CF, #EBC8A6); }
.ml__copy strong { display: block; margin: 8px 0; font-family: var(--font-sans); font-size: 22px; line-height: 1.05; font-weight: 800; letter-spacing: -0.02em; }
.ml__copy p { margin: 0 0 14px; font-size: 12px; color: var(--tinta-2); }
.ml__cta { display: inline-block; padding: 8px 16px; border-radius: 999px; background: var(--barro); color: #fff; font-size: 12px; font-weight: 600; animation: pulse 2.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(195, 91, 44, 0.4); } 50% { box-shadow: 0 0 0 8px rgba(195, 91, 44, 0); } }
.ml__form { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.85); }
.ml__field { padding: 7px 10px; border-radius: 8px; border: 1px solid rgba(42, 36, 32, 0.12); font-size: 11px; color: #9A8B7B; }
.ml__send { padding: 7px; border-radius: 8px; background: var(--tinta); color: #fff; font-size: 11px; font-weight: 600; text-align: center; }
.ml__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding-top: 14px; }
.ml__stats span { padding: 10px 12px; border-radius: 10px; background: #F5EEE3; font-size: 11px; color: var(--tierra); }
.ml__stats b { display: block; font-size: 16px; color: var(--tinta); }

/* Tienda */
.mock-store { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; }
.ms__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ms__item { display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.ms__item small { text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--barro-texto); }
.ms__img { display: block; aspect-ratio: 1; border-radius: 12px; margin-bottom: 6px; }
.ms__img--1 { background: radial-gradient(circle at 50% 60%, #C35B2C 0 28%, transparent 29%), linear-gradient(160deg, #F3E1CC, #E5C7A5); }
.ms__img--2 { background: linear-gradient(90deg, transparent 38%, #2A2420 38% 62%, transparent 62%) center / 100% 70% no-repeat, linear-gradient(160deg, #EDE3D4, #D9C6A8); }
.ms__img--3 { background: radial-gradient(ellipse 30% 40% at 50% 55%, #6F8A4E 0 99%, transparent 100%), linear-gradient(160deg, #F1E8DA, #E2D3BB); }
.ms__img--4 { background: linear-gradient(60deg, transparent 47%, #8A6A4A 47% 53%, transparent 53%), linear-gradient(160deg, #F6EEE2, #E8D7BF); }
.ms__cart { display: flex; flex-direction: column; gap: 9px; padding: 16px; border-radius: 14px; background: #F5EEE3; font-size: 12px; }
.ms__line { display: flex; justify-content: space-between; gap: 8px; color: var(--tinta-2); }
.ms__ship span:last-child { color: #4E7A3A; font-weight: 600; }
.ms__total { display: flex; justify-content: space-between; padding-top: 9px; border-top: 1px solid rgba(42, 36, 32, 0.12); }
.ms__total b { font-size: 16px; }
.ms__pay { margin-top: 4px; padding: 10px; border-radius: 10px; background: #2D7FD8; color: #fff; font-weight: 600; text-align: center; }
.ms__note { font-size: 10.5px; color: var(--tierra); text-align: center; }

/* Web integral */
.mw__nav { display: flex; align-items: center; gap: 14px; padding-bottom: 16px; font-size: 12px; color: var(--tierra); }
.mw__nav b { margin-right: auto; color: var(--tinta); font-size: 13px; }
.mw__nav span { padding-bottom: 3px; border-bottom: 1.5px solid transparent; transition: color .3s, border-color .3s; }
.mw__nav span.is-on { color: var(--tinta); border-bottom-color: var(--barro); }
.mw__hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 22px; border-radius: 14px; background: linear-gradient(135deg, #2A2420, #5A3B28); color: #fff; }
.mw__hero strong { max-width: 260px; font-family: var(--font-sans); font-size: 20px; line-height: 1.08; font-weight: 800; letter-spacing: -0.02em; }
.mw__cta { flex: none; padding: 7px 14px; border-radius: 999px; background: #fff; color: var(--tinta); font-size: 11px; font-weight: 600; }
.mw__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 12px 0; }
.mw__cards span { height: 46px; border-radius: 10px; background: #F5EEE3; }
.mw__serp { padding: 14px; border-radius: 12px; border: 1px solid rgba(42, 36, 32, 0.1); }
.mw__result { display: flex; flex-direction: column; gap: 3px; padding-top: 8px; }
.mw__result i { font-style: normal; font-size: 11px; color: #4E7A3A; }
.mw__result b { font-size: 14px; color: #1F4FA8; font-weight: 500; }
.mw__result span { font-size: 11.5px; color: var(--tierra); }

/* Aviso flotante sobre la vista previa */
.toast {
  position: absolute; right: -18px; bottom: -18px; z-index: 3;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: 14px;
  background: var(--tinta); color: #fff; font-family: var(--font-ui);
  box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.5);
  animation: toastIn .9s var(--ease-out) .5s both;
}
.toast b { display: block; font-size: 13px; font-weight: 600; }
.toast small { display: block; font-size: 11.5px; color: rgba(255, 255, 255, 0.65); }
.toast__dot { width: 9px; height: 9px; border-radius: 50%; background: #7BC46A; box-shadow: 0 0 0 4px rgba(123, 196, 106, 0.2); }
@keyframes toastIn { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }

/* ---------- Proceso: la línea se dibuja y los nodos se encienden ---------- */
.steps[data-reveal] { filter: none; transform: none; opacity: 1; }
.steps::before { transform: scaleX(0); transform-origin: left; transition: transform 1.8s var(--ease-out); }
.steps.is-in::before { transform: scaleX(1); }
.step { opacity: 0; transform: translateY(20px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.step::before { transform: scale(0); transition: transform .6s var(--ease-out), background-color .6s, border-color .6s; }
.steps.is-in .step { opacity: 1; transform: none; }
.steps.is-in .step::before { transform: scale(1); background: var(--barro); border-color: var(--barro); }
.steps.is-in .step:nth-child(1), .steps.is-in .step:nth-child(1)::before { transition-delay: .2s; }
.steps.is-in .step:nth-child(2), .steps.is-in .step:nth-child(2)::before { transition-delay: .6s; }
.steps.is-in .step:nth-child(3), .steps.is-in .step:nth-child(3)::before { transition-delay: 1s; }
.steps.is-in .step:nth-child(4), .steps.is-in .step:nth-child(4)::before { transition-delay: 1.4s; }

/* ---------- Dudas frecuentes ---------- */
.section--faq { background: linear-gradient(180deg, var(--bruma) 0%, #F6F0E6 100%); }
.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.faq__item { border-radius: 20px; overflow: hidden; }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 24px 26px; cursor: pointer; list-style: none;
  font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--tinta);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:focus-visible { outline: 2px solid var(--barro); outline-offset: -4px; border-radius: 20px; }
.faq__icon { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--linea-fuerte); transition: background-color .4s, border-color .4s, transform .5s var(--ease-out); }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: var(--tinta); transform: translate(-50%, -50%); transition: background-color .4s; }
.faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item[open] .faq__icon { background: var(--barro); border-color: var(--barro); transform: rotate(45deg); }
.faq__item[open] .faq__icon::before, .faq__item[open] .faq__icon::after { background: #fff; }
.faq__a { padding: 0 26px 26px; }
.faq__a p { max-width: 520px; font-size: 15.5px; line-height: 1.65; color: var(--tinta-2); }
.faq__item[open] .faq__a { animation: faqIn .6s var(--ease-out); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- Footer: firma gigante ---------- */
.footer__mark {
  margin: 24px 0 0;
  display: flex; flex-direction: column; align-items: center;
  font-family: 'Montserrat', var(--font-sans); font-weight: 900;
  font-size: clamp(64px, 17.5vw, 300px); line-height: .82; letter-spacing: -0.03em;
  background: linear-gradient(180deg, #F3E7D8 10%, #DDA57D 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  user-select: none;
}
.footer__mark span {
  margin-top: .32em;
  font-size: .14em; font-weight: 600; letter-spacing: .9em; margin-right: -.9em; line-height: 1;
  -webkit-text-fill-color: #DDA57D;
}

/* Sin animaciones si la persona lo pidió */
@media (prefers-reduced-motion: reduce) {
  [data-reveal], .step, .step::before, .steps::before, .intro__figure .float-card { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .float-card, .ml__cta, .toast, .svc-preview.is-active .mock { animation: none !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .svc, .story, .contact, .footer__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .values { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .steps::before { display: none; }
  .section__head--split { grid-template-columns: minmax(0, 1fr); }
  .section__head--split > p { justify-self: start; }
  .svc-explorer { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .svc-stage { position: relative; top: 0; }
  .faq { grid-template-columns: minmax(0, 1fr); }
  .float-card--1 { left: 0; } .float-card--2 { right: 0; }
  .svc { padding: 32px 28px; gap: 28px; }
  .intro__figure { padding: 20px; }

  .nav-toggle { display: flex; }
  .nav {
    position: absolute; top: 100%; left: 12px; right: 12px;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px 22px 22px;
    background: rgba(28, 22, 18, 0.96);
    border: 1px solid var(--linea-oscura);
    border-radius: 18px;
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav .nav__cta { display: inline-flex; margin-top: 18px; }
  .nav a:not(.btn),
  .nav.has-active a:not(.btn) { padding: 16px 0; font-size: 17px; color: #E9DFD2; border-bottom: 1px solid var(--linea-oscura); }
  .nav.has-active a:not(.btn).is-active { color: #FFFFFF; }
  .nav a:not(.btn)::after { display: none; }
}

/* Tablet y celular: el video se ve entero (16:9), sin recortar el logo */
@media (max-width: 860px) {
  .hero__cue { display: none; }
  .intro { padding: 72px 0; }
  .intro__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
}

@media (max-width: 560px) {
  .wrap { padding: 0 20px; }
  .section { padding: 80px 0; }
  .steps, .form__grid { grid-template-columns: minmax(0, 1fr); }
  .form { padding: 24px; border-radius: 22px; }
  .float-card { display: none; }
  .svc-stage { padding: 48px 14px 18px; }
  .mock__body { padding: 14px; min-height: 0; }
  .ml__hero, .mock-store { grid-template-columns: minmax(0, 1fr); }
  .toast { right: 8px; bottom: -14px; }
  .svc-tab { grid-template-columns: 30px 1fr 42px; gap: 10px; }
  .section { padding: 96px 0; }
  .hero__lead { font-size: 17px; }
  .header__logo { height: 40px; }
  .hero__actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
  .hero__cue-line { animation: none; }
  .hero__word > span, .hero__studios, .hero__tagline, .hero__actions { transition: none !important; }
}


/* =========================================================
   TEMA "NOCHE AZUL" · alineado con el hero del hornero en vuelo
   Base: azul noche casi negro. Tecnología: azul eléctrico de las alas.
   Calidez de marca: el cobre/terracota del cuerpo del hornero.
   ========================================================= */
:root {
  --bruma: #050A14;          /* fondo principal */
  --arena-claro: #08101F;    /* fondo alternativo */
  --tinta: #EAF0FA;          /* texto principal */
  --tinta-2: #A9B6CC;        /* texto secundario */
  --tierra: #7D8BA5;         /* anotaciones */
  --linea: rgba(140, 180, 255, 0.12);
  --linea-fuerte: rgba(140, 180, 255, 0.22);
  --grid-line: rgba(110, 160, 255, 0.05);
  --barro-texto: #E8915F;    /* acento cálido sobre oscuro */
  --azul: #5B9BFF;           /* acento tecnológico */
  --azul-claro: #A9C8FF;
  --azul-glow: rgba(91, 155, 255, 0.35);
  --ocaso-1: #050A14;
}
body { background: var(--bruma); color: var(--tinta); }
body::after { mix-blend-mode: overlay; opacity: 0.07; }
::selection { background: var(--azul); color: #fff; }
:focus-visible { outline-color: var(--azul); }

/* ---------- Hero: video desenfocado + marca centrada ---------- */
.hero { background: #02080F; }
.hero__video {
  filter: blur(2.5px) saturate(112%) brightness(0.92);   /* desenfoque sutil */
  transform: scale(1.04);   /* evita bordes claros por el desenfoque */
}
/* Grano de película sobre el video (lo dibuja main.js en un canvas) */
.hero__grain {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  pointer-events: none;
}
.hero__cue { z-index: 3; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 55% at 50% 50%, rgba(2, 8, 15, 0.15), rgba(2, 8, 15, 0.65) 100%),
    linear-gradient(180deg, rgba(2, 8, 15, 0) 70%, var(--bruma) 100%);
}
.hero__brand {
  left: 50%; right: auto; top: 50%;
  width: min(94vw, 1200px);
  transform: translate(-50%, -50%);
  color: #FFFFFF;
}
.hero__word {
  font-size: clamp(52px, 10vw, 210px);
}
/* El resplandor va en el contenedor: así no lo recorta la máscara de las letras (era el rectángulo) */
.hero__wordmark { filter: drop-shadow(0 0 38px rgba(91, 155, 255, 0.32)); }
/* Frase: "Construimos tu" y la palabra que rota, alineadas en la misma línea de base */
.hero__tagline > span[aria-hidden="true"] { display: inline-flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 0 .3em; }
.rotator { vertical-align: baseline; }
.hero__studios { color: var(--azul-claro); font-size: clamp(14px, 2.3vw, 46px); }
.hero__tagline { color: rgba(234, 240, 250, 0.82); }
.rotator { color: var(--barro-texto); }
.hero__word > span { transition-duration: .9s; transition-delay: calc(var(--i) * 0.045s); }
.hero__studios { transition-delay: .3s, .3s, .3s; }
.hero__tagline { transition-delay: 0s; }
.hero__actions { transition-delay: .22s; }
.btn--ghost-dark { color: var(--tinta); border-color: rgba(234, 240, 250, 0.3); background: rgba(255, 255, 255, 0.04); }
.btn--ghost-dark:hover { color: #fff; border-color: #fff; background: rgba(255, 255, 255, 0.08); }
.btn--primary { box-shadow: 0 10px 30px -12px rgba(195, 91, 44, 0.7); }

/* ---------- Superficies ---------- */
.glass {
  background: linear-gradient(160deg, rgba(22, 36, 66, 0.72), rgba(10, 17, 32, 0.55));
  border: 1px solid rgba(140, 180, 255, 0.16);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 30px 70px -30px rgba(0, 0, 0, 0.75);
}
.ticks::after { --t: rgba(140, 180, 255, 0.5); }
.sec-index span { color: var(--azul-claro); border-color: rgba(140, 180, 255, 0.3); }
.svc-tab__tag, .step__num { color: var(--azul-claro); }

/* ---------- Fondos de sección ---------- */
.intro {
  background:
    radial-gradient(ellipse 50% 60% at 80% 30%, rgba(91, 155, 255, 0.10), transparent 70%),
    linear-gradient(180deg, var(--bruma) 0%, #060C18 100%);
}
.section { background: var(--bruma); }
.section--soluciones { background: radial-gradient(ellipse 60% 50% at 75% 40%, rgba(91, 155, 255, 0.09), transparent 70%), #060C18; }
.section--proceso { background: radial-gradient(ellipse 50% 60% at 15% 100%, rgba(91, 155, 255, 0.10), transparent 70%), linear-gradient(180deg, #060C18, var(--arena-claro)); }
.section--hornero { background: radial-gradient(circle at 22% 50%, rgba(208, 120, 70, 0.16) 0%, transparent 42%), linear-gradient(180deg, var(--arena-claro), var(--bruma)); }
.section--faq { background: linear-gradient(180deg, var(--bruma), #060C18); }
.section--contacto { background: radial-gradient(ellipse 70% 60% at 50% 100%, rgba(91, 155, 255, 0.14), transparent 70%), linear-gradient(180deg, #060C18, #04070F); }

/* ---------- Detalles ---------- */
.svc-tab__title { color: rgba(234, 240, 250, 0.22); }
.svc-tab:hover .svc-tab__title { color: rgba(234, 240, 250, 0.55); }
.svc-tab.is-active .svc-tab__arrow { background: var(--azul); border-color: var(--azul); color: #fff; box-shadow: 0 0 24px var(--azul-glow); }
.story__figure img { filter: drop-shadow(0 0 50px rgba(208, 120, 70, 0.25)); }
.fc__icon--chat { background: #2B4C8C; }
.fc__icon--ship { background: #3B6FD0; }
.toast { background: #0B1426; border: 1px solid rgba(140, 180, 255, 0.2); }
.step::before { background: var(--bruma); border-color: rgba(140, 180, 255, 0.5); }
.steps.is-in .step::before { box-shadow: 0 0 0 6px rgba(195, 91, 44, 0.16); }

/* Las vistas previas siguen siendo "sitios de clientes" claros: recuperan sus colores propios */
.mock { --tinta: #2A2420; --tinta-2: #4E443B; --tierra: #6B5844; --barro-texto: #A94A20; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.8); }

/* Formulario */
.field { background: rgba(5, 10, 20, 0.6); border-color: rgba(140, 180, 255, 0.18); color: var(--tinta); }
.field::placeholder { color: #66748E; }
.field:hover { border-color: rgba(140, 180, 255, 0.32); }
.field:focus { background: rgba(5, 10, 20, 0.85); border-color: var(--azul); box-shadow: 0 0 0 4px rgba(91, 155, 255, 0.18); }
.pill span { background: rgba(255, 255, 255, 0.03); border-color: rgba(140, 180, 255, 0.22); color: var(--tinta); }
.pill span:hover { border-color: rgba(140, 180, 255, 0.45); }
.pill input:checked + span { background: var(--barro); border-color: var(--barro); color: #fff; }
.pill input:focus-visible + span { outline-color: var(--azul); }

/* Footer */
.footer {
  color: var(--tinta);
  background: radial-gradient(ellipse 60% 70% at 50% 100%, rgba(91, 155, 255, 0.16), transparent 70%), #03060D;
  padding-top: 112px;
  border-top: 1px solid var(--linea);
}
.footer__col, .footer__col a { color: #C3CEDF; }
.footer__col .mono, .footer__bottom, .footer__bottom a { color: var(--tierra); }
.footer__bottom { border-top-color: var(--linea); }
.footer__mark { background: linear-gradient(180deg, #EAF0FA 15%, #4F7FD6 100%); -webkit-background-clip: text; background-clip: text; }
.footer__mark span { -webkit-text-fill-color: var(--azul-claro); }

/* =========================================================
   SECUENCIA DE ENTRADA DEL HERO
   1) is-lit:     el video aparece desde negro, con un "foco" que se ajusta
   2) is-branded: HORNERO STUDIOS
   3) is-cta:     frase, botones y menú
   ========================================================= */
.hero__video {
  opacity: 0;
  filter: blur(16px) saturate(112%) brightness(0.6);
  transform: scale(1.16);
  /* La imagen empieza a verse de inmediato (curva rápida al inicio) */
  transition: opacity 1.2s var(--ease-out), filter 1.9s var(--ease-out), transform 2.5s var(--ease-out);
}
.hero.is-lit .hero__video {
  opacity: 1;
  filter: blur(2.5px) saturate(112%) brightness(0.92);
  transform: scale(1.04);
}
/* Terminada la entrada, el video responde al scroll sin demora */
.hero.is-settled .hero__video { transition: none; }
.hero__grain { opacity: 0; transition: opacity 1.6s ease .2s; }
.hero.is-lit .hero__grain { opacity: 1; }

/* HORNERO más dramático: las letras suben y se enfocan */
.hero__word > span { filter: blur(10px); opacity: 0; transition: transform 1.2s var(--ease-out) calc(var(--i) * 0.07s), filter 1.2s var(--ease-out) calc(var(--i) * 0.07s), opacity .9s ease calc(var(--i) * 0.07s); }
.hero.is-branded .hero__word > span { filter: none; opacity: 1; }
.hero__studios { transition-delay: .55s, .55s, .55s; }

@media (prefers-reduced-motion: reduce) {
  .hero__video, .hero__grain, .hero__word > span { transition: none !important; }
}