/* =========================================================
   RAÍZ · Food Design Studio
   Sistema de tokens, tipografía y componentes
   ========================================================= */

:root {
  /* Paleta cromática estricta */
  --papel:     #F5F0E8;
  --papel-2:   #EDE6D8;   /* sutil profundidad sobre papel */
  --papel-3:   #E5DCC9;   /* línea divisoria suave */
  --tinta:     #100E08;
  --tinta-2:   #1A1812;
  --tinta-3:   #2A2620;
  --oro:       #B8933E;
  --oro-2:     #D4B260;   /* hover */
  --terracota: #C8471A;
  --humo:      #7A7060;

  /* Tipografía */
  --display: "Josefin Sans", "Helvetica Neue", sans-serif;
  --serif:   "Lora", "Georgia", serif;
  --mono:    "JetBrains Mono", "DM Mono", "Menlo", monospace;

  /* Espaciado */
  --container-px: clamp(24px, 4vw, 80px);
  --section-py:   clamp(96px, 12vh, 180px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Lenis maneja scroll-behavior; lo nativo entra en conflicto */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-scrolling iframe { pointer-events: none; }

html {
  /* Sin scroll-behavior nativo cuando Lenis está activo */
  scroll-behavior: auto;
  overflow-x: hidden;
  width: 100%;
}

body {
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.5;
  overflow-x: hidden;
  cursor: none;
  /* GPU acceleration hint */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Elementos con paralaje deben hint a GPU */
.hero-atmosphere,
.transition-photo {
  will-change: transform;
  transform: translateZ(0);
}

#vapor-canvas {
  will-change: contents;
}

/* =========================================================
   Imágenes integradas en contenedores
   ========================================================= */
.step-img img,
.feat-img img,
.estudio-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.hero-photo .hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
}
.transition-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* =========================================================
   Cursor personalizado
   ========================================================= */
.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: difference;
  will-change: transform;
}
.cursor-dot {
  width: 6px; height: 6px;
  background: var(--oro);
  border-radius: 50%;
}
.cursor-ring {
  width: 36px; height: 36px;
  border: 1px solid rgba(184, 147, 62, .55);
  border-radius: 50%;
  transition: width .25s cubic-bezier(.2,.7,.2,1), height .25s cubic-bezier(.2,.7,.2,1), border-color .25s, opacity .25s;
  opacity: .9;
}
.cursor-ring.hovering {
  width: 60px; height: 60px;
  border-color: var(--oro);
}
.cursor-dot.hovering {
  width: 14px; height: 14px;
  transition: width .12s, height .12s;
}
@media (max-width: 880px) {
  body { cursor: auto; }
  .cursor-dot, .cursor-ring { display: none; }
}

/* =========================================================
   Tipografía base
   ========================================================= */
.display {
  font-family: var(--display);
  font-weight: 200;
  letter-spacing: -0.01em;
  line-height: 0.95;
}
.italic {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
}
.mono {
  font-family: var(--mono);
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 11px;
}
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--oro);
  font-weight: 400;
}
.gold { color: var(--oro); }
.terra { color: var(--terracota); }
.smoke { color: var(--humo); }

/* =========================================================
   NAV — fondo sólido siempre, adaptativo a zona clara / oscura
   ========================================================= */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 22px var(--container-px);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 40px;
  color: var(--tinta);
  /* Fondo sólido por defecto (zona clara / papel) */
  background: rgba(245, 240, 232, 0.96);
  backdrop-filter: blur(12px) saturate(110%);
  -webkit-backdrop-filter: blur(12px) saturate(110%);
  border-bottom: 1px solid rgba(16, 14, 8, 0.06);
  transition: background .35s ease, color .35s ease, padding .35s ease, border-color .35s ease;
}
.nav.scrolled {
  padding-top: 16px;
  padding-bottom: 16px;
  background: rgba(245, 240, 232, 0.98);
  border-bottom-color: var(--papel-3);
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: inherit;
}
.nav-logo .iso { width: 28px; height: 36px; }
.nav-logo .wordmark {
  font-family: var(--display);
  font-weight: 300;
  font-size: 22px;
  letter-spacing: 0.32em;
  line-height: 1;
}
.nav-logo .sub {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.28em;
  color: var(--humo);
  margin-top: 4px;
}
.nav-links {
  display: flex;
  justify-content: center;
  gap: 56px;
  list-style: none;
}
.nav-links a {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
  position: relative;
  padding: 4px 0;
  transition: color .25s;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 1px;
  background: var(--oro);
  transition: width .35s cubic-bezier(.2,.7,.2,1);
}
.nav-links a:hover::after { width: 100%; }
.nav-right {
  display: flex;
  align-items: center;
  gap: 28px;
}
.lang {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  color: inherit;
  background: none;
  border: none;
  cursor: none;
}
.nav-sep {
  width: 1px; height: 14px;
  background: currentColor;
  opacity: .35;
}
.nav-cta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--oro);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1px solid var(--oro);
}

/* Nav variant on dark sections — fondo oscuro sólido */
.nav.on-dark {
  color: var(--papel);
  background: rgba(16, 14, 8, 0.92);
  border-bottom-color: rgba(245, 240, 232, 0.08);
}
.nav.on-dark.scrolled {
  background: rgba(16, 14, 8, 0.96);
  border-bottom-color: var(--tinta-3);
}
.nav.on-dark .nav-logo .sub { color: rgba(245, 240, 232, 0.55); }
.nav.on-dark .nav-sep { background: rgba(245, 240, 232, 0.35); }

/* =========================================================
   Punto dorado flotante (respira)
   ========================================================= */
.anchor-dot {
  position: fixed;
  left: 36px;
  bottom: 36px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--oro);
  z-index: 90;
  animation: breathe 4s ease-in-out infinite;
}
.anchor-dot::after {
  content: "";
  position: absolute;
  inset: -10px;
  border: 1px solid rgba(184,147,62,.35);
  border-radius: 50%;
  animation: breathe-ring 4s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.08); opacity: .85; }
}
@keyframes breathe-ring {
  0%, 100% { transform: scale(1); opacity: .4; }
  50%      { transform: scale(1.3); opacity: 0; }
}

/* =========================================================
   HERO · torn paper split
   ========================================================= */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 760px;
  background: var(--tinta);
  overflow: hidden;
}

.hero-photo {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 62% 48%, #2a1f12 0%, #150f08 45%, #0a0805 100%);
}
.hero-photo .img-label {
  position: absolute;
  right: var(--container-px);
  top: 50%;
  transform: translateY(-50%);
  color: rgba(245,240,232,.18);
  text-align: right;
}
/* Editorial photo placeholder pattern */
.photo-placeholder {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 65% 45%, rgba(200,71,26,.10) 0%, transparent 35%),
    radial-gradient(circle at 50% 55%, rgba(184,147,62,.08) 0%, transparent 40%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.012) 0 2px, transparent 2px 9px),
    linear-gradient(135deg, #1d1610 0%, #0c0905 70%);
}
.photo-placeholder .label {
  position: absolute;
  left: 50%; bottom: 24px;
  transform: translateX(-50%);
  color: rgba(245,240,232,.32);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  white-space: nowrap;
}
.photo-placeholder .frame {
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(245,240,232,.06);
}

/* HERO illustrative atmospheric "hands plating" composition (no figurative SVG) */
.hero-atmosphere {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 45% at 60% 52%, rgba(200,71,26,.18) 0%, transparent 60%),
    radial-gradient(ellipse 45% 30% at 60% 56%, rgba(184,147,62,.22) 0%, transparent 65%),
    radial-gradient(ellipse 90% 70% at 65% 50%, rgba(20,14,8,0) 0%, #0a0703 100%);
}
.hero-atmosphere::before {
  /* smoke wisps */
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 18% 30% at 55% 25%, rgba(245,240,232,.06) 0%, transparent 60%),
    radial-gradient(ellipse 14% 22% at 68% 18%, rgba(245,240,232,.04) 0%, transparent 60%),
    radial-gradient(ellipse 12% 18% at 72% 32%, rgba(245,240,232,.05) 0%, transparent 60%);
  filter: blur(8px);
  mix-blend-mode: screen;
}
.hero-atmosphere::after {
  /* film grain */
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(rgba(245,240,232,.04) 1px, transparent 1px),
    radial-gradient(rgba(184,147,62,.03) 1px, transparent 1px);
  background-size: 3px 3px, 5px 5px;
  background-position: 0 0, 1px 2px;
  opacity: .6;
}

.hero-paper {
  position: absolute;
  top: 0; bottom: 0;
  left: 0;
  width: 56%;
  background: var(--papel);
  /* torn paper edge via clip-path — right side jagged */
  clip-path: polygon(
    0 0,
    96% 0,
    95.6% 1.5%, 96.2% 3%, 95.1% 4.6%, 96.5% 6.2%, 94.4% 8%, 95.8% 9.5%,
    94.6% 11%, 96.4% 12.6%, 95.2% 14.4%, 96.7% 16%, 94.8% 17.8%, 95.9% 19.4%,
    94.5% 21%, 96.3% 22.8%, 95% 24.5%, 96.6% 26.2%, 94.2% 28%, 95.7% 29.6%,
    94.4% 31.4%, 96.1% 33%, 95% 34.8%, 96.5% 36.5%, 94.6% 38.2%, 95.9% 40%,
    94.3% 41.8%, 96% 43.4%, 95.1% 45.2%, 96.4% 47%, 94.5% 48.6%, 95.8% 50.4%,
    94.2% 52%, 96.2% 53.8%, 95% 55.4%, 96.6% 57.2%, 94.4% 59%, 95.7% 60.6%,
    94.6% 62.4%, 96.3% 64%, 95.1% 65.8%, 96.5% 67.4%, 94.3% 69.2%, 95.9% 71%,
    94.5% 72.6%, 96.1% 74.4%, 95% 76%, 96.4% 77.8%, 94.4% 79.4%, 95.8% 81.2%,
    94.6% 82.8%, 96.2% 84.6%, 95.2% 86.2%, 96.5% 88%, 94.3% 89.6%, 95.7% 91.4%,
    94.5% 93%, 96.3% 94.8%, 95% 96.4%, 96.4% 98%, 94.8% 100%,
    0 100%
  );
  /* paper grain */
  background-image:
    radial-gradient(ellipse at 20% 30%, rgba(184,147,62,.04) 0%, transparent 40%),
    radial-gradient(ellipse at 80% 70%, rgba(122,112,96,.05) 0%, transparent 40%);
}
.hero-paper::after {
  /* extra micro fibres along the torn edge */
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  right: -1%;
  width: 8%;
  background: 
    repeating-linear-gradient(95deg, transparent 0 6px, rgba(16,14,8,.025) 6px 7px),
    radial-gradient(ellipse at left center, rgba(16,14,8,.03) 0%, transparent 70%);
  pointer-events: none;
}

.hero-content {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 56% 44%;
}

.hero-left {
  position: relative;
  padding: 160px var(--container-px) 80px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 2;
}
.hero-title {
  font-family: var(--display);
  font-weight: 200;
  font-size: clamp(64px, 9vw, 148px);
  line-height: 0.92;
  letter-spacing: -0.015em;
  color: var(--tinta);
}
.hero-title .raiz {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--oro);
  font-size: clamp(120px, 16vw, 260px);
  line-height: 0.85;
  letter-spacing: -0.02em;
  margin-top: 4px;
  margin-left: -6px;
}
.hero-sub {
  margin-top: 32px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.5;
  color: var(--tinta-2);
  max-width: 460px;
}
.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  text-decoration: none;
  color: var(--tinta);
  margin-top: 48px;
}
.hero-cta .circ {
  width: 52px; height: 52px;
  border: 1px solid var(--tinta);
  border-radius: 50%;
  display: grid; place-items: center;
  transition: background .35s, color .35s, transform .35s;
}
.hero-cta .circ svg { width: 16px; height: 16px; }
.hero-cta:hover .circ {
  background: var(--tinta);
  color: var(--papel);
  transform: translateY(3px);
}
.hero-cta span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.hero-right {
  position: relative;
  z-index: 1;
}
.hero-quote {
  position: absolute;
  bottom: 56px;
  right: var(--container-px);
  text-align: right;
  color: var(--papel);
  z-index: 3;
}
.hero-quote p {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 1.6vw, 24px);
}
.hero-quote .underline {
  display: inline-block;
  width: 64px; height: 1px;
  background: var(--oro);
  margin-top: 14px;
}

/* =========================================================
   STRIP · transformamos
   ========================================================= */
.strip {
  background: var(--papel);
  padding: 80px var(--container-px) 96px;
  border-bottom: 1px solid var(--papel-3);
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 80px;
  align-items: start;
}
.strip h2 {
  font-family: var(--display);
  font-weight: 200;
  font-size: clamp(22px, 1.8vw, 28px);
  letter-spacing: 0.06em;
  line-height: 1.25;
  text-transform: uppercase;
  position: relative;
  padding-bottom: 24px;
  max-width: 360px;
}
.strip h2::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 48px; height: 1px;
  background: var(--oro);
}
.strip p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.7;
  color: var(--tinta-2);
  max-width: 580px;
}
.strip .filo-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--tinta);
  text-decoration: none;
  border-bottom: 1px solid var(--tinta);
  padding-bottom: 4px;
}
.strip .filo-link .arrow { transition: transform .3s; }
.strip .filo-link:hover .arrow { transform: translateX(6px); }

/* =========================================================
   MANIFIESTO (dark band)
   ========================================================= */
.manifesto {
  background: var(--tinta);
  color: var(--papel);
  padding: var(--section-py) var(--container-px);
  position: relative;
  text-align: center;
}
.manifesto .dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--oro);
  margin: 0 auto 80px;
  position: relative;
}
.manifesto .dot::after {
  content: "";
  position: absolute;
  top: 14px; left: 50%;
  width: 1px; height: 64px;
  background: linear-gradient(to bottom, var(--oro), transparent);
  transform: translateX(-50%);
}
.manifesto .eyebrow { color: var(--oro); margin-bottom: 28px; display: inline-block; }
.manifesto blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3.8vw, 56px);
  line-height: 1.25;
  letter-spacing: -0.005em;
  max-width: 1200px;
  margin: 40px auto 0;
  color: var(--papel);
}
.manifesto blockquote .gold-em {
  color: var(--oro);
  font-style: italic;
}
.manifesto-sub {
  font-family: var(--serif);
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.7;
  color: rgba(245, 240, 232, 0.65);
  max-width: 680px;
  margin: 40px auto 0;
}
.manifesto .signature {
  margin-top: 80px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--humo);
}

/* =========================================================
   MÉTODO
   ========================================================= */
.metodo {
  background: var(--papel);
  padding: var(--section-py) var(--container-px);
}
.metodo-head {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 80px;
  align-items: end;
  margin-bottom: 96px;
}
.metodo-head h2 {
  font-family: var(--display);
  font-weight: 200;
  font-size: clamp(38px, 5vw, 76px);
  line-height: 1;
  letter-spacing: -0.015em;
  max-width: 700px;
}
.metodo-head h2 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--oro);
}
.metodo-head .aside {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.6;
  color: var(--humo);
  border-left: 1px solid var(--oro);
  padding-left: 20px;
  max-width: 320px;
}

.metodo-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 28px;
}
.step {
  display: flex;
  flex-direction: column;
}
.step-img {
  width: 100%;
  aspect-ratio: 4 / 5;
  background: var(--tinta);
  position: relative;
  margin-bottom: 28px;
  overflow: hidden;
}
.step:nth-child(1) .step-img .photo-placeholder { background:
  radial-gradient(circle at 50% 60%, rgba(184,147,62,.10) 0%, transparent 50%),
  repeating-linear-gradient(110deg, rgba(255,255,255,.012) 0 2px, transparent 2px 9px),
  linear-gradient(140deg, #221a10 0%, #0c0905 80%); }
.step:nth-child(2) .step-img .photo-placeholder { background:
  radial-gradient(circle at 40% 55%, rgba(200,71,26,.12) 0%, transparent 55%),
  repeating-linear-gradient(115deg, rgba(255,255,255,.012) 0 2px, transparent 2px 9px),
  linear-gradient(120deg, #1d1610 0%, #0b0805 80%); }
.step:nth-child(3) .step-img .photo-placeholder { background:
  radial-gradient(circle at 55% 50%, rgba(184,147,62,.14) 0%, transparent 50%),
  repeating-linear-gradient(105deg, rgba(255,255,255,.012) 0 2px, transparent 2px 9px),
  linear-gradient(150deg, #20180e 0%, #0a0705 80%); }
.step:nth-child(4) .step-img .photo-placeholder { background:
  radial-gradient(circle at 45% 60%, rgba(122,112,96,.18) 0%, transparent 55%),
  repeating-linear-gradient(120deg, rgba(255,255,255,.012) 0 2px, transparent 2px 9px),
  linear-gradient(130deg, #1c160f 0%, #0a0805 80%); }
.step:nth-child(5) .step-img .photo-placeholder { background:
  radial-gradient(circle at 50% 50%, rgba(200,71,26,.08) 0%, transparent 50%),
  repeating-linear-gradient(125deg, rgba(255,255,255,.012) 0 2px, transparent 2px 9px),
  linear-gradient(135deg, #1f180f 0%, #0c0905 80%); }

.step .num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--oro);
  margin-bottom: 12px;
}
.step .name {
  font-family: var(--display);
  font-weight: 300;
  font-size: 18px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.step .desc {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  line-height: 1.55;
  color: var(--humo);
}

/* =========================================================
   SERVICIOS DESTACADOS (dark)
   ========================================================= */
.servicios-feat {
  background: var(--tinta);
  color: var(--papel);
  padding: var(--section-py) var(--container-px);
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 80px;
}
.servicios-feat .aside-head .eyebrow {
  color: var(--oro);
  display: block;
  margin-bottom: 32px;
}
.servicios-feat .aside-head h2 {
  font-family: var(--display);
  font-weight: 200;
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 64px;
}
.servicios-feat .aside-head .all-cta {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--papel);
  text-decoration: none;
  border-bottom: 1px solid var(--papel);
  padding-bottom: 4px;
  transition: color .25s, border-color .25s;
}
.servicios-feat .aside-head .all-cta:hover {
  color: var(--oro);
  border-color: var(--oro);
}
.servicios-feat .aside-head .all-cta .arrow { transition: transform .3s; }
.servicios-feat .aside-head .all-cta:hover .arrow { transform: translateX(6px); }

.feat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.feat {
  display: flex;
  flex-direction: column;
}
.feat-text { min-height: 175px; }
.feat .num {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--oro);
  letter-spacing: 0.24em;
  margin-bottom: 14px;
}
.feat .ttl {
  font-family: var(--display);
  font-weight: 300;
  font-size: 16px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 14px;
  line-height: 1.25;
}
.feat .desc {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(245,240,232,.62);
  margin-bottom: 24px;
}
.feat-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--tinta-2);
  position: relative;
  overflow: hidden;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.feat:hover .feat-img { transform: translateY(-4px); }
.feat-img::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--oro);
  transition: width .5s cubic-bezier(.2,.7,.2,1);
}
.feat:hover .feat-img::after { width: 100%; }

.feat:nth-child(1) .feat-img .photo-placeholder { background:
  radial-gradient(circle at 45% 60%, rgba(184,147,62,.12) 0%, transparent 50%),
  linear-gradient(140deg, #25190d 0%, #0a0805 75%); }
.feat:nth-child(2) .feat-img .photo-placeholder { background:
  radial-gradient(circle at 55% 50%, rgba(200,71,26,.10) 0%, transparent 55%),
  linear-gradient(125deg, #1b150e 0%, #0a0705 70%); }
.feat:nth-child(3) .feat-img .photo-placeholder { background:
  radial-gradient(circle at 50% 55%, rgba(184,147,62,.16) 0%, transparent 50%),
  linear-gradient(135deg, #281c10 0%, #0c0805 78%); }
.feat:nth-child(4) .feat-img .photo-placeholder { background:
  radial-gradient(circle at 50% 55%, rgba(122,112,96,.14) 0%, transparent 55%),
  linear-gradient(150deg, #1d160f 0%, #0a0705 75%); }

/* CTA prominente hacia /servicios.html — al final de servicios destacados */
.servicios-banner-cta {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 64px;
  padding: 36px 40px;
  background: var(--oro);
  color: var(--tinta);
  text-decoration: none;
  transition: background .35s ease, transform .35s ease;
}
.servicios-banner-cta:hover {
  background: var(--papel);
  transform: translateY(-2px);
}
.servicios-banner-text { display: flex; flex-direction: column; gap: 8px; }
.servicios-banner-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tinta);
  opacity: 0.65;
}
.servicios-banner-title {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(19px, 2.4vw, 26px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--tinta);
}
.servicios-banner-arrow {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--tinta);
  color: var(--oro);
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.servicios-banner-arrow svg { width: 22px; height: 22px; }
.servicios-banner-cta:hover .servicios-banner-arrow { transform: translateX(6px); }

@media (max-width: 768px) {
  .servicios-banner-cta {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 28px 24px;
  }
  .servicios-banner-arrow { align-self: flex-end; }
}

/* =========================================================
   ESTUDIO / SOCIOS
   ========================================================= */
.estudio {
  background: var(--papel);
  padding: var(--section-py) var(--container-px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.estudio-photo {
  aspect-ratio: 4 / 5;
  background: var(--tinta);
  position: relative;
  overflow: hidden;
}
.estudio-photo .photo-placeholder { background:
  radial-gradient(circle at 50% 40%, rgba(184,147,62,.10) 0%, transparent 60%),
  radial-gradient(circle at 30% 70%, rgba(200,71,26,.06) 0%, transparent 50%),
  linear-gradient(135deg, #20180f 0%, #090605 75%); }

.estudio-body .eyebrow { display: block; margin-bottom: 24px; }
.estudio-body h2 {
  font-family: var(--display);
  font-weight: 200;
  font-size: clamp(36px, 4vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin-bottom: 24px;
}
.estudio-body h2 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--oro);
}
.estudio-body .lede {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.65;
  color: var(--humo);
  max-width: 480px;
  margin-bottom: 64px;
}

.socios {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--papel-3);
}
.socio .name {
  font-family: var(--display);
  font-weight: 300;
  font-size: 22px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.socio .role {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--oro);
  margin-bottom: 16px;
}
.socio .bio {
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.6;
  color: var(--tinta-2);
}

/* =========================================================
   CONTACTO
   ========================================================= */
.contacto {
  background: var(--tinta);
  color: var(--papel);
  padding: var(--section-py) var(--container-px);
}
.contacto-head {
  max-width: 900px;
  margin: 0 auto 96px;
  text-align: center;
}
.contacto-head .eyebrow { color: var(--oro); margin-bottom: 28px; display: inline-block; }
.contacto-head h2 {
  font-family: var(--display);
  font-weight: 200;
  font-size: clamp(40px, 5vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin-bottom: 32px;
}
.contacto-head h2 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--oro);
}
.contacto-head p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(245,240,232,.72);
  max-width: 640px;
  margin: 0 auto;
}

.channels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  max-width: 1100px;
  margin: 0 auto 96px;
  border-top: 1px solid var(--tinta-3);
  border-bottom: 1px solid var(--tinta-3);
}
.channel {
  padding: 40px 56px;
  display: flex;
  align-items: center;
  gap: 28px;
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: background .35s;
}
.channel + .channel { border-left: 1px solid var(--tinta-3); }
.channel:hover { background: var(--tinta-2); }
.channel .ico {
  width: 44px; height: 44px;
  border: 1px solid var(--oro);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--oro);
  flex-shrink: 0;
  transition: background .35s, color .35s;
}
.channel:hover .ico { background: var(--oro); color: var(--tinta); }
.channel .label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--humo);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.channel .val {
  font-family: var(--display);
  font-weight: 300;
  font-size: 20px;
  letter-spacing: 0.04em;
}

.form-wrap {
  max-width: 900px;
  margin: 0 auto;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px 72px;
}
.field { position: relative; }
.field.full { grid-column: 1 / -1; }
.field label {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--humo);
  margin-bottom: 14px;
}
.field input,
.field textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--tinta-3);
  color: var(--papel);
  font-family: var(--serif);
  font-size: 17px;
  padding: 8px 0 14px;
  outline: none;
  transition: border-color .3s;
  font-style: italic;
}
.field input::placeholder,
.field textarea::placeholder {
  color: rgba(245,240,232,.32);
  font-style: italic;
}
.field input:focus,
.field textarea:focus { border-color: var(--oro); }
.field textarea { resize: vertical; min-height: 80px; }

.form-submit {
  margin-top: 64px;
  display: flex;
  justify-content: flex-end;
}
.btn-send {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--oro);
  background: none;
  border: none;
  border-bottom: 1px solid var(--oro);
  padding: 6px 0;
  cursor: none;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.btn-send .arrow { transition: transform .3s; }
.btn-send:hover .arrow { transform: translateX(8px); }

/* =========================================================
   FOOTER
   ========================================================= */
.footer {
  background: var(--papel);
  padding: 56px var(--container-px) 32px;
  border-top: 1px solid var(--papel-3);
}
.footer-top {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 48px;
  align-items: start;
  padding-bottom: 32px;
}
.footer-iso {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}
.footer-iso .iso { width: 22px; height: 28px; flex-shrink: 0; }
.footer-iso .quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--tinta-2);
  max-width: 280px;
  line-height: 1.5;
}
.footer-links {
  display: flex;
  gap: 36px;
  justify-content: center;
}
.footer-links a {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--tinta-2);
  text-decoration: none;
}
.footer-social {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-social a {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--tinta-2);
  text-decoration: none;
}
.footer-meta {
  text-align: right;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--humo);
  line-height: 1.8;
}
.footer-bottom {
  border-top: 1px solid var(--papel-3);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--humo);
}

/* =========================================================
   REVEALS
   ========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
}
.reveal.in { opacity: 1; transform: none; }

.reveal-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--d, 0ms);
}
.reveal-words.in .reveal-word { opacity: 1; transform: none; }

/* =========================================================
   /SERVICIOS PAGE
   ========================================================= */
.servicios-hero {
  background: var(--papel);
  padding: 220px var(--container-px) 120px;
  border-bottom: 1px solid var(--papel-3);
}
.servicios-hero .crumb {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--humo);
  margin-bottom: 56px;
}
.servicios-hero .crumb a { color: inherit; text-decoration: none; }
.servicios-hero .crumb .sep { margin: 0 16px; color: var(--oro); }
.servicios-hero .layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 96px;
  align-items: end;
}
.servicios-hero h1 {
  font-family: var(--display);
  font-weight: 200;
  font-size: clamp(56px, 8vw, 132px);
  line-height: 0.94;
  letter-spacing: -0.018em;
}
.servicios-hero h1 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--oro);
}
.servicios-hero .lede {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.7;
  color: var(--tinta-2);
  max-width: 440px;
  border-left: 1px solid var(--oro);
  padding-left: 24px;
}

/* Editorial list — like an author's menu card */
.serv-list {
  background: var(--papel);
  padding: 80px var(--container-px) 120px;
}
.serv-list .head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--papel-3);
  margin-bottom: 0;
}
.serv-list .head .eyebrow { color: var(--oro); }
.serv-list .head .total {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--humo);
  text-transform: uppercase;
}

.serv-row {
  border-bottom: 1px solid var(--papel-3);
  padding: 38px 0;
  display: grid;
  grid-template-columns: 80px 1fr 60px;
  gap: 56px;
  align-items: start;
  position: relative;
  cursor: none;
  transition: padding .4s cubic-bezier(.2,.7,.2,1);
}
.serv-row::before {
  content: "";
  position: absolute;
  left: -32px; top: 0;
  width: 2px; height: 0;
  background: var(--oro);
  transition: height .5s cubic-bezier(.2,.7,.2,1);
}
.serv-row:hover::before,
.serv-row.open::before { height: 100%; }

.serv-row .code {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.24em;
  color: var(--oro);
  padding-top: 6px;
}
.serv-row .ttl {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(22px, 2.4vw, 32px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 12px;
  line-height: 1.15;
}
.serv-row .short {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.6;
  color: var(--humo);
  max-width: 720px;
}
.serv-row .arr {
  font-family: var(--mono);
  font-size: 18px;
  color: var(--tinta-2);
  text-align: right;
  padding-top: 6px;
  transition: transform .4s, color .3s;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.serv-row .arr-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border: 1px solid var(--tinta-3);
  border-radius: 50%;
  font-size: 16px;
  line-height: 1;
  transition: border-color .3s, background .3s, color .3s, transform .4s cubic-bezier(.2,.7,.2,1);
}
.serv-row .arr-label {
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--humo);
  opacity: 0;
  transition: opacity .3s;
}
.serv-row:hover .arr-icon,
.serv-row.open .arr-icon {
  color: var(--oro);
  border-color: var(--oro);
  transform: rotate(45deg);
}
.serv-row:hover .arr-label,
.serv-row.open .arr-label { opacity: 1; }
.serv-row.open .arr-label { color: var(--oro); }
.serv-row:hover .arr,
.serv-row.open .arr { color: var(--oro); }

.serv-row .expand {
  grid-column: 2 / 3;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .6s cubic-bezier(.2,.7,.2,1), margin-top .4s ease;
  margin-top: 0;
  overflow: hidden;
}
.serv-row.open .expand {
  grid-template-rows: 1fr;
  margin-top: 32px;
}
.serv-row .expand-inner {
  min-height: 0;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 8px;
}
.serv-row .long {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.75;
  color: var(--tinta-2);
}
.serv-row .block-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--oro);
  text-transform: uppercase;
  margin-bottom: 16px;
  display: block;
}
.serv-row .entregables { list-style: none; }
.serv-row .entregables li {
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.55;
  color: var(--tinta-2);
  padding: 8px 0;
  padding-left: 22px;
  position: relative;
  border-bottom: 1px dashed var(--papel-3);
}
.serv-row .entregables li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--oro);
}
.serv-row .duration {
  font-family: var(--display);
  font-weight: 300;
  font-size: 26px;
  letter-spacing: 0.04em;
  color: var(--tinta);
  margin-bottom: 8px;
}
.serv-row .duration em {
  font-family: var(--serif);
  font-style: italic;
  color: var(--oro);
}
.serv-row .duration-note {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: var(--humo);
}
.serv-row .duration-relative {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--humo);
}

/* arranque */
.arranque {
  background: var(--tinta);
  color: var(--papel);
  padding: var(--section-py) var(--container-px);
}
.arranque-head {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 80px;
  align-items: end;
  margin-bottom: 96px;
}
.arranque-head .eyebrow { color: var(--oro); margin-bottom: 28px; display: block; }
.arranque-head h2 {
  font-family: var(--display);
  font-weight: 200;
  font-size: clamp(36px, 4.5vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.01em;
}
.arranque-head h2 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--oro);
}
.arranque-head p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(245,240,232,.7);
  max-width: 380px;
}
.arranque-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px;
  position: relative;
}
.arranque-steps::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, var(--tinta-3), var(--oro), var(--tinta-3));
}
.arranque-step {
  position: relative;
  padding-top: 56px;
}
.arranque-step::before {
  content: "";
  position: absolute;
  top: 8px; left: 0;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--tinta);
  border: 1px solid var(--oro);
}
.arranque-step .n {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--oro);
  margin-bottom: 18px;
  display: block;
}
.arranque-step .t {
  font-family: var(--display);
  font-weight: 300;
  font-size: 19px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 14px;
  line-height: 1.2;
}
.arranque-step .d {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(245,240,232,.6);
}
.arranque-cta {
  margin-top: 96px;
  display: flex;
  justify-content: center;
}
.arranque-cta a {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--oro);
  text-decoration: none;
  border: 1px solid var(--oro);
  padding: 22px 48px;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  transition: background .35s, color .35s;
}
.arranque-cta a:hover { background: var(--oro); color: var(--tinta); }
.arranque-cta .arrow { transition: transform .3s; }
.arranque-cta a:hover .arrow { transform: translateX(8px); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1100px) {
  .nav-links { gap: 28px; }
  .metodo-grid { grid-template-columns: repeat(3, 1fr); gap: 36px 24px; }
  .servicios-feat { grid-template-columns: 1fr; gap: 56px; }
  .feat-grid { grid-template-columns: repeat(2, 1fr); }
  .arranque-steps { grid-template-columns: repeat(2, 1fr); gap: 56px 36px; }
  .arranque-steps::before { display: none; }
}
@media (max-width: 768px) {
  /* === NAV MÓVIL — botón hamburguesa === */
  .nav {
    grid-template-columns: auto 1fr auto;
    gap: 16px;
    padding: 16px var(--container-px);
  }
  .nav-logo .sub { display: none; }
  .nav-logo .wordmark { font-size: 18px; letter-spacing: 0.32em; }
  .nav-logo .iso { width: 22px; height: 28px; }
  .nav-right { gap: 12px; }
  .nav-right .lang, .nav-right .nav-sep { display: none; }
  .nav-right .nav-cta { font-size: 10px; letter-spacing: 0.24em; }

  /* Menú móvil desplegable */
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: rgba(245, 240, 232, 0.98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--papel-3);
    padding: 8px 0 24px;
    margin: 0;
  }
  .nav.on-dark .nav-links {
    background: rgba(16, 14, 8, 0.96);
    border-bottom-color: var(--tinta-3);
  }
  .nav-links.open { display: flex; }
  .nav-links li {
    padding: 16px var(--container-px);
    border-top: 1px solid rgba(16, 14, 8, 0.06);
  }
  .nav.on-dark .nav-links li { border-top-color: rgba(245,240,232,.08); }
  .nav-links a { font-size: 12px; }
  .nav-links a::after { display: none; }

  /* Botón hamburguesa */
  .nav-toggle {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
  }
  .nav-toggle span {
    display: block;
    width: 20px;
    height: 1px;
    background: currentColor;
    transition: transform .3s, opacity .3s;
  }
  .nav-toggle.open span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { transform: translateY(-3px) rotate(-45deg); }

  /* === HERO MÓVIL — orden y dimensiones corregidas === */
  .hero {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 0;
    overflow: visible;
  }
  .hero-content {
    grid-template-columns: 1fr;
    display: contents;
  }
  /* Hero-paper visible primero (con título y CTA), torn-paper desactivado */
  .hero-paper {
    display: none;
  }
  .hero-left {
    order: 1;
    background: var(--papel);
    padding: 96px var(--container-px) 60px;
    position: relative;
    z-index: 2;
    display: block;
  }
  .hero-left > div:first-child { display: none; } /* removemos el spacer */

  /* FIX: hero-photo pasa de absoluto (detrás de todo) a bloque real en el flujo,
     visible entre el título y la frase — antes quedaba oculta detrás de los
     fondos sólidos de hero-left y hero-right */
  .hero-photo {
    position: relative;
    order: 2;
    height: 55vh;
    min-height: 380px;
    width: 100%;
    inset: auto;
  }

  /* hero-right ahora solo contiene la frase — ya no necesita altura de foto */
  .hero-right {
    order: 3;
    height: auto;
    min-height: 0;
    position: relative;
  }
  .hero-quote {
    position: relative;
    bottom: 0;
    right: 0;
    width: 100%;
    padding: 40px var(--container-px) 56px;
    background: var(--tinta);
    color: var(--papel);
    text-align: center;
  }
  .hero-quote .underline { margin: 16px auto 0; }
  .hero-title { font-size: clamp(56px, 14vw, 96px); line-height: 0.92; }
  .hero-cta { margin-top: 32px; }

  /* === Resto secciones === */
  .strip { grid-template-columns: 1fr; gap: 32px; padding: 56px var(--container-px) 64px; }
  .metodo-head { grid-template-columns: 1fr; gap: 32px; }
  .metodo-grid { grid-template-columns: 1fr; gap: 56px; }
  .estudio { grid-template-columns: 1fr; }
  .socios { grid-template-columns: 1fr; }
  .channels { grid-template-columns: 1fr; }
  .channel + .channel { border-left: none; border-top: 1px solid var(--tinta-3); }
  .form-grid { grid-template-columns: 1fr; gap: 40px; }
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
  .footer-links { justify-content: flex-start; flex-wrap: wrap; }
  .footer-meta { text-align: left; }
  .servicios-hero .layout { grid-template-columns: 1fr; gap: 40px; }

  /* === SERVICIOS · arreglo de corte de texto === */
  .serv-row {
    grid-template-columns: 48px 1fr 36px;
    gap: 14px;
    padding: 28px 0;
    align-items: start;
  }
  .serv-row .ttl { font-size: 22px; line-height: 1.2; }
  .serv-row .short { font-size: 14px; margin-top: 8px; }
  .serv-row .expand-inner {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-top: 24px;
  }
  .serv-row .block-label { font-size: 9px; }

  .arranque-head { grid-template-columns: 1fr; }
  .arranque-steps { grid-template-columns: 1fr; }

  .transition-band { height: 60vh; min-height: 420px; }
  .transition-text { font-size: 20px; padding: 0 var(--container-px); }

  /* Servicios destacados móvil */
  .feat-grid { grid-template-columns: 1fr; gap: 40px; }
  .feat { grid-template-columns: 1fr; gap: 16px; }
  .aside-head { grid-template-columns: 1fr; gap: 16px; }
}

/* Hide hamburguesa en desktop */
.nav-toggle { display: none; }

/* =========================================================
   CANVAS DE VAPOR (hero)
   ========================================================= */
#vapor-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.6;
}

/* Si se carga una imagen real para el hero, ya está estilada arriba */

/* =========================================================
   BANDA DE TRANSICIÓN · entre manifiesto y método
   ========================================================= */
.transition-band {
  position: relative;
  width: 100%;
  height: 80vh;
  min-height: 560px;
  background: var(--tinta);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.transition-photo {
  position: absolute;
  inset: -10% 0;
  width: 100%;
  height: 120%;
  will-change: transform;
  transition: transform 0.05s linear;
}
.transition-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.55;
}
.transition-placeholder {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 40%, rgba(184,147,62,.20) 0%, transparent 55%),
    radial-gradient(ellipse 50% 35% at 60% 60%, rgba(200,71,26,.12) 0%, transparent 60%),
    radial-gradient(ellipse 90% 70% at 50% 50%, rgba(20,14,8,0.2) 0%, #0a0703 95%);
}
.transition-placeholder::before {
  /* wisps de vapor en CSS */
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 20% 35% at 35% 30%, rgba(245,240,232,.07) 0%, transparent 60%),
    radial-gradient(ellipse 16% 28% at 60% 22%, rgba(245,240,232,.05) 0%, transparent 60%),
    radial-gradient(ellipse 14% 24% at 50% 50%, rgba(245,240,232,.06) 0%, transparent 60%),
    radial-gradient(ellipse 18% 30% at 75% 40%, rgba(245,240,232,.04) 0%, transparent 60%);
  filter: blur(10px);
  mix-blend-mode: screen;
}
.transition-placeholder::after {
  /* film grain */
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(rgba(245,240,232,.04) 1px, transparent 1px),
    radial-gradient(rgba(184,147,62,.03) 1px, transparent 1px);
  background-size: 3px 3px, 5px 5px;
  background-position: 0 0, 1px 2px;
  opacity: .5;
}
.transition-placeholder .label {
  position: absolute;
  left: 50%; bottom: 32px;
  transform: translateX(-50%);
  color: rgba(245,240,232,.28);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  white-space: nowrap;
}

.transition-overlay {
  position: relative;
  z-index: 2;
  max-width: 880px;
  padding: 0 var(--container-px);
  text-align: center;
  color: var(--papel);
}
.transition-text {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--papel);
}
.transition-text em {
  color: var(--oro);
  font-style: italic;
}
.transition-underline {
  display: block;
  width: 48px;
  height: 1px;
  background: var(--oro);
  margin: 32px auto 0;
}

/* Dark overlay sobre la foto para mantener legibilidad del texto */
.transition-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(16,14,8,0.55) 0%, rgba(16,14,8,0.3) 40%, rgba(16,14,8,0.3) 60%, rgba(16,14,8,0.65) 100%);
  pointer-events: none;
  z-index: 1;
}