/* Growing · piedra, charcoal, oliva y champán (Rebranding v6).
   Base clara de piedra con mucho aire. Charcoal y oliva solo en piezas
   puntuales. El champán, fino y nunca protagonista. La foto manda.
   Ritmo: pantalla completa → aire → cifras → proyectos apilados → oliva →
   carbón (apps) → piedra → foto → contacto. Nunca dos bloques iguales seguidos. */
:root {
  --piedra: #EBE6DC;
  --piedra-clara: #F5F2EC;
  --linea: #D9CFBD;
  --carbon: #2B2A27;
  --carbon-2: #34332F;
  --texto-2: #5F584A;      /* texto secundario: contraste 5,6 sobre piedra */
  --texto-3: #8D8272;      /* solo etiquetas pequeñas en mayúsculas */
  --champan: #A88A4F;
  --champan-osc: #8F6A34;  /* champán para texto: el claro no tiene contraste */
  --champan-claro: #D8BF80;
  --oliva: #3A4032;
  --blanco-roto: #F5F2EC;

  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Manrope", system-ui, sans-serif;
  --margen: clamp(20px, 5vw, 80px);
  --ancho: 1320px;
  --suave: cubic-bezier(.2, .7, .2, 1);
  --alto: 100vh;
}
@supports (height: 100svh) { :root { --alto: 100svh; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
  margin: 0; background: var(--piedra); color: var(--carbon);
  font: 400 17px/1.65 var(--sans); -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility; overflow-x: clip;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; }
/* Cormorant (la de Google Fonts) solo trae números "de estilo antiguo": el 1
   parece una I y el 10 un "IO". Las cifras van en Manrope fina, como Apple. */
.cifra, .num { font-family: var(--sans) !important; font-weight: 200 !important; letter-spacing: -.04em !important; font-variant-numeric: tabular-nums; }
h1, h2, h3 { font-family: var(--serif); font-weight: 300; line-height: 1.02; margin: 0; letter-spacing: -.015em; }
h1 em, h2 em { font-style: italic; color: var(--champan-osc); }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--champan-osc); outline-offset: 3px; }

.saltar { position: absolute; left: -999px; top: 8px; background: var(--carbon); color: var(--piedra); padding: 10px 16px; z-index: 100; }
.saltar:focus { left: 8px; }

.eyebrow {
  font: 500 12px/1.4 var(--sans); letter-spacing: .28em; text-transform: uppercase;
  color: var(--texto-3); margin-bottom: 24px;
}

/* ---------- botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 32px; border: 1px solid var(--carbon); border-radius: 999px;
  background: var(--carbon); color: var(--blanco-roto); text-decoration: none;
  font: 500 12px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase;
  cursor: pointer; transition: background .35s, color .35s, border-color .35s, transform .35s var(--suave);
}
.boton:hover { background: var(--oliva); border-color: var(--oliva); }
.boton:active { transform: scale(.98); }
.boton.linea { background: transparent; color: var(--carbon); }
.boton.linea:hover { background: var(--carbon); color: var(--blanco-roto); }
.boton.claro { background: var(--blanco-roto); color: var(--carbon); border-color: var(--blanco-roto); }
.boton.claro:hover { background: transparent; color: var(--blanco-roto); }
.boton.linea-clara { background: transparent; color: var(--blanco-roto); border-color: rgba(245,242,236,.55); }
.boton.linea-clara:hover { background: var(--blanco-roto); color: var(--carbon); border-color: var(--blanco-roto); }
.boton.fino { min-height: 40px; padding: 0 22px; background: transparent; color: inherit; border-color: currentColor; }
.boton.fino:hover { background: var(--carbon); color: var(--blanco-roto); border-color: var(--carbon); }
.boton[disabled] { opacity: .55; cursor: wait; }

.enlace {
  display: inline-block; text-decoration: none; padding-bottom: 4px;
  font: 500 13px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  border-bottom: 1px solid var(--champan); transition: color .3s, border-color .3s;
}
.enlace:hover { color: var(--champan-osc); }
.enlace.claro { color: var(--blanco-roto); border-color: var(--champan-claro); }
.enlace.claro:hover { color: var(--champan-claro); }
.enlace.claro.suave { border-color: rgba(245,242,236,.4); }

/* ---------- cabecera ---------- */
.cabecera {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: 76px;
  display: flex; align-items: center; gap: 34px; padding: 0 var(--margen);
  color: var(--carbon);
  transition: background .45s, color .45s, border-color .45s, transform .45s var(--suave);
  border-bottom: 1px solid transparent;
}
.cabecera.sobre-foto { color: var(--blanco-roto); }
.cabecera.solida {
  color: var(--carbon);
  background: rgba(235, 230, 220, .86);
  -webkit-backdrop-filter: saturate(1.4) blur(16px); backdrop-filter: saturate(1.4) blur(16px);
  border-bottom-color: rgba(217, 207, 189, .6);
}
.cabecera.oculta { transform: translateY(-100%); }
.logo { display: flex; align-items: center; gap: 14px; text-decoration: none; margin-right: auto; }
.marca { width: 30px; height: 26px; flex: none; }
.palabra { font: 400 22px/1 var(--serif); letter-spacing: .32em; text-transform: uppercase; padding-left: .32em; }
.menu { display: flex; gap: 32px; }
.menu a, .idiomas a {
  text-decoration: none; font: 500 12px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase;
  opacity: .78; transition: opacity .3s;
}
.menu a:hover, .idiomas a:hover { opacity: 1; }
.idiomas { display: flex; gap: 12px; }
.idiomas a[aria-current] { opacity: 1; border-bottom: 1px solid var(--champan); padding-bottom: 3px; }

/* ---------- portada a pantalla completa ---------- */
.portada { position: relative; height: var(--alto); min-height: 560px; overflow: hidden; color: var(--blanco-roto); background: var(--carbon); }
.portada-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 3s var(--suave); }
.portada.lista .portada-media { transform: scale(1); }
.portada::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(20,19,17,.55) 0%, rgba(20,19,17,.25) 45%, rgba(20,19,17,0) 70%),
    linear-gradient(180deg, rgba(20,19,17,.45) 0%, rgba(20,19,17,0) 22%, rgba(20,19,17,0) 50%, rgba(20,19,17,.55) 100%);
}
.portada-capa {
  position: absolute; z-index: 1; left: 0; right: 0; bottom: 0;
  max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen) clamp(56px, 11vh, 120px);
}
.portada .eyebrow { color: var(--champan-claro); }
.portada h1 { font-size: clamp(54px, 9vw, 150px); max-width: 11ch; text-shadow: 0 2px 40px rgba(0,0,0,.18); }
.portada h1 em { color: var(--champan-claro); }
.portada .botones { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 44px; }
.bajar {
  position: absolute; z-index: 1; right: var(--margen); bottom: clamp(56px, 11vh, 120px);
  display: flex; flex-direction: column; align-items: center; gap: 14px; text-decoration: none;
  font: 500 11px/1 var(--sans); letter-spacing: .28em; text-transform: uppercase; opacity: .85;
}
.bajar span { writing-mode: vertical-rl; }
.bajar i { width: 1px; height: 64px; background: linear-gradient(var(--blanco-roto), transparent); animation: gota 2.4s var(--suave) infinite; transform-origin: top; }
@keyframes gota { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------- manifiesto: las palabras se encienden al bajar ---------- */
.manifiesto { padding: clamp(120px, 18vw, 260px) var(--margen) clamp(90px, 12vw, 180px); max-width: 1180px; margin: 0 auto; }
.manifiesto-frase { font: 300 clamp(36px, 5.2vw, 78px)/1.12 var(--serif); letter-spacing: -.01em; }
.pal { color: var(--carbon); transition: color .5s; }
.js .pal { color: #CFC6B6; }
.js .pal.on { color: var(--carbon); }
.manifiesto-sub { max-width: 560px; margin-top: 56px; margin-left: auto; font-size: clamp(17px, 1.35vw, 20px); color: var(--texto-2); }

/* ---------- cifras ---------- */
.cifras { border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.cifras ul {
  list-style: none; margin: 0 auto; padding: 0 var(--margen); max-width: var(--ancho);
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.cifras li { padding: clamp(40px, 5vw, 70px) 0; display: grid; gap: 14px; align-content: start; }
.cifras li + li { border-left: 1px solid var(--linea); padding-left: clamp(20px, 3vw, 44px); }
.cifra { font: 300 clamp(64px, 8vw, 128px)/.9 var(--serif); letter-spacing: -.03em; }
.cifra-t { font: 500 12px/1.5 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--texto-2); max-width: 18ch; }

/* ---------- titulares de sección ---------- */
.titular { max-width: var(--ancho); margin: 0 auto clamp(56px, 7vw, 100px); padding: 0 var(--margen); }
.titular h2, .proximo h2, .lombok h2, .contacto h2, .nosotros h2 { font-size: clamp(46px, 6.4vw, 104px); }

/* ---------- proyectos: tarjetas apiladas a pantalla completa ---------- */
.proyectos { padding-top: clamp(110px, 14vw, 200px); }
.pila { position: relative; }
.proyecto {
  position: sticky; top: 0; height: var(--alto); min-height: 600px; overflow: hidden;
  color: var(--blanco-roto); background: var(--carbon);
}
.p-fondo { position: absolute; inset: 0; }
.p-media { width: 100%; height: 100%; object-fit: cover; }
/* media vertical (el vídeo de Aura): se ve entero a la derecha, sobre su
   propia imagen desenfocada, en vez de recortarla y ampliarla a lo ancho */
.vertical .p-borroso { position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); object-fit: cover; filter: blur(36px) brightness(.6) saturate(1.1); }
.vertical .p-media {
  position: absolute; right: max(var(--margen), calc((100% - var(--ancho)) / 2 + var(--margen))); top: 50%;
  width: auto; height: min(78%, 760px); aspect-ratio: 9 / 16; transform: translateY(-50%);
  border-radius: 6px; box-shadow: 0 40px 90px rgba(0,0,0,.45);
}
.proyecto::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(20,19,17,.5) 0%, rgba(20,19,17,.15) 50%, rgba(20,19,17,0) 75%),
    linear-gradient(180deg, rgba(20,19,17,.3) 0%, rgba(20,19,17,0) 25%, rgba(20,19,17,.1) 55%, rgba(20,19,17,.7) 100%);
}
.p-capa {
  position: relative; z-index: 1; height: 100%; max-width: var(--ancho); margin: 0 auto;
  padding: 110px var(--margen) clamp(48px, 9vh, 100px);
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto; align-items: end; gap: 30px;
}
.p-num { grid-column: 1 / -1; align-self: start; font: 500 12px/1 var(--sans); letter-spacing: .28em; opacity: .8; }
.p-texto { grid-row: 3; max-width: 560px; }
.p-texto .eyebrow { color: rgba(245,242,236,.8); }
.p-texto h3 { font-size: clamp(60px, 8vw, 132px); margin-bottom: 22px; }
.p-desc { font-size: clamp(16px, 1.3vw, 19px); color: rgba(245,242,236,.88); max-width: 460px; }
.estado { color: var(--blanco-roto); }
.estado::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-right: 9px; vertical-align: 1px; background: #9DB08A;
}
.estado-desarrollo::before { background: var(--champan-claro); }
.estado-proximamente::before { background: transparent; border: 1px solid var(--champan-claro); }
.p-galeria { grid-row: 3; grid-column: 2; display: flex; gap: 10px; }
.p-mini { margin: 0; width: clamp(84px, 9vw, 140px); aspect-ratio: 3 / 4; overflow: hidden; border-radius: 4px; box-shadow: 0 12px 30px rgba(0,0,0,.25); }
.p-mini img { width: 100%; height: 100%; object-fit: cover; }
.p-acciones { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 34px; }

/* ---------- lo próximo (pieza puntual en oliva) ---------- */
.proximo { position: relative; z-index: 2; background: var(--oliva); color: var(--piedra); padding: clamp(110px, 15vw, 220px) var(--margen); text-align: center; }
.proximo-caja { max-width: 820px; margin: 0 auto; }
.proximo .eyebrow { color: var(--champan-claro); }
.proximo p:not(.eyebrow) { color: rgba(235,230,220,.82); margin: 30px auto 46px; max-width: 560px; }

/* ---------- tecnología propia (carbón) ---------- */
.apps { background: var(--carbon); color: var(--piedra); padding: clamp(110px, 14vw, 200px) 0 clamp(90px, 11vw, 160px); overflow: hidden; }
.apps .eyebrow { color: var(--champan-claro); }
.apps h2 { font-size: clamp(46px, 6.4vw, 104px); max-width: 12ch; }
.apps h2 em { color: var(--champan-claro); }
.apps-texto { max-width: 560px; margin-top: 30px; color: rgba(235,230,220,.78); font-size: clamp(16px, 1.3vw, 19px); }
.dispositivos { position: relative; max-width: 1100px; margin: 0 auto; padding: 0 var(--margen); }
.portatil { width: 86%; }
.portatil-pantalla {
  aspect-ratio: 16 / 10; background: #111; border: 10px solid #1b1a18; border-bottom-width: 14px;
  border-radius: 16px 16px 0 0; overflow: hidden; box-shadow: 0 40px 90px rgba(0,0,0,.45);
}
.portatil-base { height: 16px; margin: 0 -7%; background: linear-gradient(#4a4843, #2a2926); border-radius: 0 0 16px 16px; }
.movil {
  position: absolute; right: var(--margen); bottom: -40px; width: 26%; max-width: 270px;
  aspect-ratio: 9 / 19.5; background: #111; border: 9px solid #1b1a18; border-radius: 42px; overflow: hidden;
  box-shadow: 0 40px 80px rgba(0,0,0,.55), 0 0 0 1px #3a3934;
}
.portatil-pantalla img, .movil-pantalla img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.movil-pantalla { height: 100%; }
.hueco {
  width: 100%; height: 100%; display: grid; place-items: center;
  background:
    linear-gradient(135deg, rgba(168,138,79,.14), rgba(58,64,50,.22)),
    repeating-linear-gradient(0deg, transparent 0 38px, rgba(235,230,220,.05) 38px 39px), #222120;
}
.hueco span { font: 500 11px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: rgba(235,230,220,.45); }
.apps-lista {
  list-style: none; max-width: var(--ancho); margin: clamp(90px, 10vw, 140px) auto 0; padding: 0 var(--margen);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 64px);
}
.apps-lista li { border-top: 1px solid #45423b; padding-top: 28px; }
.apps-lista h3 { font-size: clamp(28px, 2.4vw, 38px); margin-bottom: 14px; }
.apps-lista p { color: rgba(235,230,220,.72); }

/* ---------- método ---------- */
.metodo { padding: clamp(120px, 15vw, 220px) 0 clamp(90px, 11vw, 160px); }
.pasos {
  list-style: none; margin: 0 auto; padding: 0 var(--margen); max-width: var(--ancho);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 64px);
}
.pasos li { border-top: 1px solid var(--carbon); padding-top: 30px; }
.num { display: block; font: 300 clamp(56px, 6vw, 88px)/1 var(--serif); color: var(--champan-osc); margin-bottom: 26px; }
.pasos h3 { font-size: clamp(30px, 2.6vw, 40px); margin-bottom: 16px; }
.pasos p { color: var(--texto-2); }

/* ---------- quiénes somos ---------- */
.nosotros {
  max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen) clamp(120px, 15vw, 220px);
  display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(40px, 7vw, 120px); align-items: center;
}
.nosotros-foto { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; }
.nosotros-foto img { width: 100%; height: 100%; object-fit: cover; }
.nosotros-texto p:not(.eyebrow) { margin-top: 28px; color: var(--texto-2); font-size: clamp(17px, 1.35vw, 20px); max-width: 460px; }

/* ---------- Lombok ---------- */
.lombok { position: relative; min-height: var(--alto); display: flex; align-items: flex-end; overflow: hidden; color: var(--blanco-roto); }
.lombok-foto { position: absolute; inset: -8% 0 0 0; width: 100%; height: 108%; object-fit: cover; will-change: transform; }
.lombok::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(43,42,39,0) 35%, rgba(43,42,39,.72)); }
.lombok-texto { position: relative; z-index: 1; max-width: var(--ancho); width: 100%; margin: 0 auto; padding: 0 var(--margen) clamp(60px, 10vh, 120px); }
.lombok-texto h2 { max-width: 14ch; }
.lombok .eyebrow { color: var(--champan-claro); }
.lombok-texto p:not(.eyebrow) { margin-top: 24px; max-width: 480px; font-size: 19px; }

/* ---------- contacto ---------- */
.contacto {
  max-width: var(--ancho); margin: 0 auto; padding: clamp(110px, 14vw, 200px) var(--margen);
  display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(40px, 7vw, 120px); align-items: start;
}
.contacto-intro > p:not(.eyebrow) { color: var(--texto-2); margin-top: 26px; max-width: 420px; }
.canales { margin-top: 40px; display: grid; gap: 16px; justify-items: start; }
.suave { color: var(--texto-2); font-size: 15px; }
.formulario { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 24px; }
.formulario label { display: grid; gap: 10px; font: 500 11px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--texto-2); }
.formulario .ancho { grid-column: 1 / -1; }
.formulario input, .formulario select, .formulario textarea {
  width: 100%; border: 0; border-bottom: 1px solid var(--linea); background: transparent;
  padding: 10px 0 12px; font: 400 17px/1.4 var(--sans); color: var(--carbon); border-radius: 0;
  letter-spacing: 0; text-transform: none; transition: border-color .3s;
}
.formulario select { appearance: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235F584A'/%3E%3C/svg%3E") right 4px center no-repeat; padding-right: 24px; }
.formulario textarea { resize: vertical; }
.formulario input:focus, .formulario select:focus, .formulario textarea:focus { outline: none; border-bottom-color: var(--carbon); }
.formulario .casilla { display: flex; gap: 14px; align-items: flex-start; letter-spacing: 0; text-transform: none; font: 400 14px/1.5 var(--sans); }
.casilla input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--oliva); }
.trampa { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.envio { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.estado-form { font-size: 15px; color: var(--texto-2); }
.estado-form.mal { color: #A24438; }
.gracias { grid-column: 1 / -1; padding: 40px 0; }
.gracias h3 { font-size: clamp(38px, 4vw, 56px); margin-bottom: 16px; }
.gracias p { color: var(--texto-2); }

/* ---------- botón fijo (solo móvil) ---------- */
.fijo { display: none; }

/* ---------- pie ---------- */
.pie { background: var(--carbon); color: var(--piedra); padding: clamp(90px, 11vw, 150px) var(--margen) 50px; }
.pie-marca { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.pie-marca .marca { width: 64px; height: 56px; }
.pie-marca .palabra { font-size: clamp(38px, 5vw, 64px); color: var(--champan-claro); }
.pie-marca .sub { font: 500 11px/1 var(--sans); letter-spacing: .4em; text-transform: uppercase; color: var(--texto-3); }
.pie-frase { text-align: center; font: italic 300 26px/1.3 var(--serif); margin: 50px 0 80px; color: rgba(235,230,220,.8); }
.pie-datos { max-width: var(--ancho); margin: 0 auto; border-top: 1px solid #45423b; padding-top: 28px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 30px; font-size: 13px; color: #b7ae9f; }
.pie-datos a { text-decoration: none; }
.pie-datos a:hover { color: var(--champan-claro); }

/* ---------- aparición al hacer scroll ---------- */
.js .aparece { opacity: 0; transform: translateY(34px); transition: opacity 1.2s var(--suave), transform 1.2s var(--suave); }
.js .aparece.visto { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .aparece, .portada-media, .lombok-foto { transition: none !important; opacity: 1 !important; transform: none !important; }
  .js .pal { color: var(--carbon); }
  .bajar i { animation: none; }
}

/* ---------- tableta ---------- */
@media (max-width: 1000px) {
  .menu { display: none; }
  .cifras ul { grid-template-columns: 1fr 1fr; }
  .cifras li:nth-child(3) { border-left: 0; padding-left: 0; }
  .cifras li:nth-child(n+3) { border-top: 1px solid var(--linea); }
  .p-capa { grid-template-columns: 1fr; }
  .p-galeria { grid-column: 1; grid-row: 2; align-self: end; }
  .contacto, .nosotros { grid-template-columns: 1fr; }
  .apps-lista, .pasos { grid-template-columns: 1fr; }
  .portatil { width: 100%; }
  .movil { width: 30%; right: 4%; bottom: -30px; }
}

/* ---------- móvil ---------- */
@media (max-width: 700px) {
  body { font-size: 16px; }
  .cabecera { height: 64px; gap: 16px; padding: 0 16px; }
  .palabra { font-size: 17px; letter-spacing: .26em; }
  .marca { width: 24px; height: 21px; }
  .idiomas { gap: 10px; }
  .cabecera .boton.fino { display: none; }
  .portada-capa, .titular, .p-capa, .pasos, .contacto, .lombok-texto, .apps-lista, .cifras ul, .nosotros, .dispositivos { padding-left: 16px; padding-right: 16px; }
  .manifiesto, .proximo, .pie { padding-left: 16px; padding-right: 16px; }
  .portada .botones .boton { flex: 1 1 100%; }
  .bajar { display: none; }
  .manifiesto-sub { margin-left: 0; }
  .p-capa { padding-top: 88px; padding-bottom: 96px; }
  .p-galeria { display: none; }
  .vertical .p-media { position: static; transform: none; width: 100%; height: 100%; border-radius: 0; aspect-ratio: auto; }
  .vertical .p-borroso { display: none; }
  .formulario { grid-template-columns: 1fr; }
  .movil { width: 36%; }
  .pie-datos { flex-direction: column; }
  .contacto { padding-bottom: 130px; }

  .fijo {
    display: flex; align-items: center; justify-content: center;
    position: fixed; z-index: 40; left: 16px; right: 16px; bottom: calc(14px + env(safe-area-inset-bottom));
    min-height: 54px; border-radius: 999px; text-decoration: none;
    background: var(--carbon); color: var(--blanco-roto); box-shadow: 0 14px 34px rgba(0,0,0,.28);
    font: 500 12px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase;
    transform: translateY(140%); transition: transform .5s var(--suave);
  }
  .fijo.visible { transform: none; }
}

/* ==========  Añadido con el cuestionario (nov 2026)  ========== */

/* aviso de la unidad en venta, sobre la portada */
.aviso { display: inline-flex; align-items: center; gap: 10px; margin-top: 28px; text-decoration: none; font: 500 14px/1.3 var(--sans); color: var(--blanco-roto); border-bottom: 1px solid rgba(216,191,128,.7); padding-bottom: 5px; }
.aviso i { width: 7px; height: 7px; border-radius: 50%; background: var(--champan-claro); flex: none; animation: latido 2.4s ease-in-out infinite; }
.aviso:hover { color: var(--champan-claro); }
.portada .botones { margin-top: 30px; }
@keyframes latido { 50% { opacity: .35; } }

/* cifras: sufijo y número */
.cifra small { font-size: .42em; font-weight: 300; margin-left: .06em; letter-spacing: 0; }

/* ---------- Aang, la unidad en venta ---------- */
.aang { padding: clamp(100px, 13vw, 190px) 0 clamp(70px, 9vw, 130px); }
.aang-cab, .aang-ficha { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen); }
.aang h2 { font-size: clamp(50px, 7.5vw, 124px); }
.aang-texto { max-width: 620px; margin-top: 28px; font-size: clamp(17px, 1.4vw, 21px); color: var(--texto-2); }
.aang-grande { position: relative; margin: clamp(48px, 6vw, 84px) 0 0; height: min(92vh, 860px); overflow: hidden; }
.aang-grande img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }
.aang-grande figcaption { position: absolute; right: var(--margen); bottom: 18px; font-size: 12px; color: rgba(245,242,236,.92); text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.aang-tira { display: flex; gap: 10px; margin-top: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.aang-tira::-webkit-scrollbar { display: none; }
.aang-tira figure { margin: 0; flex: 1 0 min(44vw, 340px); aspect-ratio: 4 / 3; overflow: hidden; scroll-snap-align: start; }
.aang-tira img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--suave); }
.aang-tira figure:hover img { transform: scale(1.04); }
.aang-ficha { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(44px, 6vw, 96px) clamp(40px, 7vw, 120px); margin-top: clamp(56px, 7vw, 100px); }
.aang-cifra { font: 200 clamp(56px, 7vw, 104px)/1 var(--sans); letter-spacing: -.04em; }
.aang-precio .botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.aang-datos { margin: 0; }
.aang-datos > div { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 16px 0; border-top: 1px solid var(--linea); }
.aang-datos dt { font: 500 11px/1.6 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--texto-3); }
.aang-datos dd { margin: 0; }
.aang-pagos ol { list-style: none; margin: 0; padding: 0; }
.aang-pagos li { display: grid; grid-template-columns: 62px 86px 1fr; gap: 12px; padding: 14px 0; border-top: 1px solid var(--linea); font-size: 15px; align-items: baseline; }
.aang-pagos .pct { color: var(--champan-osc); font-weight: 500; }
.aang-pagos .imp { font-weight: 500; font-variant-numeric: tabular-nums; }
.aang-pagos .txt { color: var(--texto-2); }
.aang-renta-c { font: 200 clamp(34px, 3.6vw, 52px)/1.1 var(--sans); letter-spacing: -.03em; }
.aang-renta-x { margin-top: 14px; color: var(--texto-2); font-size: 14px; max-width: 480px; }

/* ---------- lo que está en marcha ---------- */
.marcha { padding: clamp(110px, 14vw, 200px) 0 clamp(90px, 11vw, 150px); background: var(--piedra); position: relative; z-index: 2; }
.tarjetas { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen); display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2.4vw, 36px); align-items: start; }
.tarjeta figure { margin: 0 0 22px; aspect-ratio: 4 / 5; overflow: hidden; background: var(--linea); }
.tarjeta img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--suave); }
.tarjeta:hover img { transform: scale(1.04); }
.tarjeta.sin-foto { border-top: 1px solid var(--carbon); padding-top: 24px; }
.tarjeta .eyebrow { margin-bottom: 12px; font-size: 11px; letter-spacing: .2em; }
.tarjeta h3 { font-size: clamp(30px, 2.8vw, 42px); margin-bottom: 12px; }
.tarjeta p:not(.eyebrow) { color: var(--texto-2); font-size: 15px; margin-bottom: 18px; }
.estado-osc::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 9px; vertical-align: 1px; background: var(--champan); }
.estado-osc.estado-vendido::before { background: var(--oliva); }

/* ---------- quiénes somos ---------- */
.historia { padding: clamp(120px, 15vw, 220px) 0 clamp(60px, 8vw, 110px); }
.historia-rejilla { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen); display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(40px, 7vw, 120px); align-items: start; }
.historia-foto { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; position: sticky; top: 100px; }
.historia-foto img { width: 100%; height: 100%; object-fit: cover; }
.historia-texto p { font-size: clamp(17px, 1.3vw, 19px); color: var(--texto-2); margin-bottom: 24px; }
.historia-texto h3 { font-size: clamp(32px, 3vw, 46px); margin: 48px 0 18px; }
.equipo { max-width: var(--ancho); margin: clamp(70px, 9vw, 130px) auto 0; padding: 0 var(--margen); }
.equipo h3 { font-size: clamp(32px, 3vw, 46px); margin-bottom: 12px; }
.equipo > p { color: var(--texto-2); }
.equipo ul { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 clamp(24px, 3vw, 48px); }
.equipo li { display: grid; gap: 4px; padding: 18px 0; border-top: 1px solid var(--linea); }
.equipo strong { font-weight: 500; }
.equipo span { color: var(--texto-2); font-size: 14px; }

/* ---------- garantías ---------- */
.garantias { max-width: var(--ancho); margin: clamp(60px, 7vw, 100px) auto 0; padding: 0 var(--margen); }
.garantias ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 clamp(20px, 3vw, 44px); }
.garantias li { border-top: 1px solid var(--linea); padding: 18px 0; font-size: 16px; }

/* ---------- datos de Lombok ---------- */
.lombok-datos { max-width: var(--ancho); margin: 0 auto; padding: clamp(70px, 9vw, 130px) var(--margen) 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 64px); }
.lombok-datos h3 { font-size: clamp(28px, 2.4vw, 38px); margin-bottom: 14px; }
.lombok-datos p { color: var(--texto-2); }

/* ---------- opiniones ---------- */
.opiniones { max-width: 980px; margin: 0 auto; padding: clamp(100px, 13vw, 180px) var(--margen) 0; }
.opiniones blockquote { margin: 0 0 56px; font: 300 clamp(28px, 3.4vw, 48px)/1.2 var(--serif); }
.opiniones footer { margin-top: 18px; font: 500 12px/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--texto-3); }

/* ---------- preguntas ---------- */
.faq { padding: clamp(110px, 14vw, 200px) 0 0; }
.faq-lista { max-width: 980px; margin: 0 auto; padding: 0 var(--margen); }
.faq details { border-top: 1px solid var(--linea); }
.faq details:last-of-type { border-bottom: 1px solid var(--linea); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 26px 0; font: 400 clamp(23px, 2.2vw, 32px)/1.2 var(--serif); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 200 26px/1 var(--sans); color: var(--champan-osc); transition: transform .35s var(--suave); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 28px; max-width: 760px; color: var(--texto-2); }
.faq-aviso { margin-top: 24px; font-size: 13px; color: var(--texto-2); }
.estado-form a { color: inherit; font-weight: 500; }

.contacto { padding-top: clamp(100px, 13vw, 180px); }

@media (max-width: 1000px) {
  .aang-ficha, .historia-rejilla { grid-template-columns: 1fr; }
  .historia-foto { position: static; aspect-ratio: 4 / 3.6; }
  .tarjetas { grid-template-columns: 1fr 1fr; }
  .lombok-datos { grid-template-columns: 1fr; }
  .garantias ul { grid-template-columns: 1fr 1fr; }
  .equipo ul { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .aang-cab, .aang-ficha, .tarjetas, .historia-rejilla, .equipo, .garantias, .lombok-datos, .faq-lista, .opiniones { padding-left: 16px; padding-right: 16px; }
  .aang-grande { height: 62vh; }
  .aang-tira figure { flex-basis: 74vw; }
  .aang-datos > div { grid-template-columns: 1fr; gap: 6px; }
  .aang-pagos li { grid-template-columns: 52px 76px 1fr; font-size: 14px; }
  .aang-precio .botones .boton { flex: 1 1 100%; }
  .tarjetas, .equipo ul, .garantias ul { grid-template-columns: 1fr; }
  .tarjeta figure { aspect-ratio: 4 / 3; }
  .faq summary { padding: 22px 0; }
}

/* ==========  Movimiento (nov 2026): que se quiera ver hasta el final  ========== */

/* barra de progreso de la página */
.progreso { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 60; pointer-events: none; }
.progreso i { display: block; height: 100%; background: linear-gradient(90deg, var(--champan-osc), var(--champan-claro)); transform: scaleX(0); transform-origin: left; }

/* ---------- portada: fotos que se funden con zoom lento ---------- */
.pases, .pase { position: absolute; inset: 0; }
.pase { opacity: 0; transition: opacity 1.6s ease; overflow: hidden; }
.pase.activo { opacity: 1; z-index: 1; }
.pase img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); }
.pase.activo img { animation: acercar 8s linear forwards; }
@keyframes acercar { to { transform: scale(1.12); } }
.portada::after {
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(20,19,17,.62) 0%, rgba(20,19,17,.28) 42%, rgba(20,19,17,0) 68%),
    linear-gradient(180deg, rgba(20,19,17,.42) 0%, rgba(20,19,17,0) 20%, rgba(20,19,17,0) 48%, rgba(20,19,17,.66) 100%) !important;
}
.portada-capa { z-index: 2; padding-bottom: clamp(84px, 13vh, 130px); }
.portada h1 { font-size: clamp(46px, 6.6vw, 104px); max-width: 13ch; }
.bajar { z-index: 2; bottom: clamp(84px, 13vh, 130px); }
.pases-pie { position: absolute; z-index: 2; left: 0; right: 0; bottom: 26px; max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen); display: flex; gap: 12px; color: var(--blanco-roto); }
.pp { flex: 1; display: grid; gap: 8px; opacity: .7; transition: opacity .5s; }
.pp.activo { opacity: 1; }
.pp i { display: block; height: 2px; background: rgba(245,242,236,.32); position: relative; overflow: hidden; }
.pp i::after { content: ""; position: absolute; inset: 0; background: var(--blanco-roto); transform: scaleX(0); transform-origin: left; }
.pp.activo i::after { animation: llenar 6s linear forwards; }
.pp.hecho i::after { transform: scaleX(1); }
@keyframes llenar { to { transform: scaleX(1); } }
.pp b { font: 500 11px/1.2 var(--sans); letter-spacing: .12em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* entrada de los textos de la portada, uno tras otro */
.js .portada-capa > * { opacity: 0; transform: translateY(26px); animation: subir 1.2s var(--suave) forwards; }
.js .portada-capa > *:nth-child(2) { animation-delay: .15s; }
.js .portada-capa > *:nth-child(3) { animation-delay: .4s; }
.js .portada-capa > *:nth-child(4) { animation-delay: .55s; }
@keyframes subir { to { opacity: 1; transform: none; } }

/* ---------- recorridos: la imagen se queda quieta y cambia al bajar ---------- */
.recorrido { position: relative; height: calc(var(--n) * 85 * var(--vh, 1vh)); }
.r-fijo { position: sticky; top: 0; height: var(--alto); overflow: hidden; }
.r-img { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; }
.r-img.activo { opacity: 1; }
.r-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 2.6s var(--suave); }
.r-img.activo img { transform: scale(1); }
.r-barra { height: 2px; background: rgba(245,242,236,.28); }
.r-barra i { display: block; height: 100%; background: var(--champan-claro); transform: scaleX(var(--p, 0)); transform-origin: left; }

/* recorrido por el apartamento */
.tour { margin-top: clamp(48px, 6vw, 84px); }
.tour .r-fijo { background: var(--carbon); color: var(--blanco-roto); }
.tour .r-fijo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(20,19,17,.15) 0%, rgba(20,19,17,0) 40%, rgba(20,19,17,.72) 100%); }
.tour-capa { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen) 34px; }
.tour-guia { position: absolute; right: var(--margen); bottom: 96px; font: 500 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; opacity: .85; }
.tour-paso { position: absolute; left: var(--margen); right: var(--margen); bottom: 74px; max-width: 620px; opacity: 0; transform: translateY(24px); transition: opacity .7s, transform .9s var(--suave); }
.tour-paso.activo { opacity: 1; transform: none; }
.num-p { font: 500 12px/1 var(--sans); letter-spacing: .24em; opacity: .85; }
.tour-paso h3 { font-size: clamp(46px, 6vw, 92px); margin: 14px 0 10px; }
.tour-paso p { font-size: clamp(17px, 1.4vw, 21px); }
.tour-render { margin-top: 10px; font-size: 11px; opacity: .75; }

/* paso a paso */
.pasos-r .r-fijo { display: grid; grid-template-columns: 1fr 1fr; align-items: center; background: var(--piedra); }
.pasos-fotos { position: relative; height: 100%; overflow: hidden; }
.pasos-lista { list-style: none; margin: 0; padding: 0 var(--margen); display: grid; gap: clamp(8px, 1.6vh, 18px); align-content: center; }
.pasos-lista .r-paso { display: grid; grid-template-columns: 54px 1fr; gap: 12px; opacity: .3; transition: opacity .6s; }
.pasos-lista .r-paso.activo, .pasos-lista .r-paso.visto-ya { opacity: 1; }
.pasos-lista .r-paso.visto-ya { opacity: .55; }
.pasos-lista .num { font-size: clamp(24px, 2.4vw, 34px); margin: 0; }
.pasos-lista h3 { font-size: clamp(23px, 2.2vw, 34px); }
.pasos-lista .r-paso p { max-height: 0; overflow: hidden; color: var(--texto-2); font-size: 15px; transition: max-height .7s var(--suave), margin .7s; }
.pasos-lista .r-paso.activo p { max-height: 120px; margin-top: 8px; }
.pasos-nota { color: var(--texto-2); font-size: 14px; margin-top: 8px; }
.pasos-r .r-barra { position: absolute; left: 0; right: 0; bottom: 0; background: var(--linea); }
.pasos-r .r-barra i { background: var(--champan-osc); }
.metodo { padding-bottom: clamp(60px, 8vw, 110px); }

/* calculadora */
.sim-fila { display: grid; gap: 10px; margin-bottom: 18px; }
.sim-fila > span { font: 500 11px/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--texto-3); }
.sim-fila > div { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 44px; padding: 0 20px; border: 1px solid var(--linea); border-radius: 999px; background: transparent; color: var(--carbon); font: 500 14px/1 var(--sans); cursor: pointer; transition: background .3s, color .3s, border-color .3s; }
.chip:hover { border-color: var(--carbon); }
.chip.activo { background: var(--carbon); color: var(--blanco-roto); border-color: var(--carbon); }
.sim-res { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 18px 0; border-top: 1px solid var(--linea); }
.sim-c { display: block; font: 200 clamp(36px, 4vw, 58px)/1.1 var(--sans); letter-spacing: -.03em; }
.sim-res small { font-size: 13px; color: var(--texto-2); }

/* cinta de fotos */
.cinta { position: relative; z-index: 2; background: var(--piedra); padding: clamp(70px, 9vw, 130px) 0 0; overflow: hidden; display: grid; gap: 10px; }
.cinta-fila { display: flex; gap: 10px; width: max-content; will-change: transform; }
.cinta-fila figure { margin: 0; width: clamp(200px, 24vw, 340px); aspect-ratio: 4 / 3; overflow: hidden; flex: none; }
.cinta-fila img { width: 100%; height: 100%; object-fit: cover; }

/* línea de tiempo de Lombok */
.lombok-datos { display: block; }
.lombok-datos > h3 { font-size: clamp(32px, 3vw, 46px); margin-bottom: 44px; }
.crono { list-style: none; margin: 0; padding: 28px 0 0; position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.linea-t { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--linea); }
.linea-t i { display: block; height: 100%; background: var(--champan-osc); transform: scaleX(var(--p, 0)); transform-origin: left; }
.hito { opacity: .25; transform: translateY(14px); transition: opacity .7s, transform .9s var(--suave); }
.hito.visto { opacity: 1; transform: none; }
.hito b { display: block; font: 200 clamp(28px, 3vw, 44px)/1.1 var(--sans); letter-spacing: -.02em; margin-bottom: 10px; }
.hito p { font-size: 15px; }
.lombok-zona { margin-top: 44px; color: var(--texto-2); }
.lombok-zona strong { font-weight: 500; color: var(--carbon); }

/* las imágenes se abren al entrar */
.js .tarjeta figure, .js .historia-foto { clip-path: inset(10% 6% 10% 6%); transition: clip-path 1.4s var(--suave); }
.js .tarjeta.visto figure, .js .historia-foto.visto { clip-path: inset(0); }
.p-media { will-change: transform; transform-origin: center; }

@media (prefers-reduced-motion: reduce) {
  .pase.activo img, .pp.activo i::after { animation: none; }
  .js .portada-capa > * { animation: none; opacity: 1; transform: none; }
  .r-img img { transition: none; transform: none; }
  .js .tarjeta figure, .js .historia-foto { clip-path: none; }
  .hito { opacity: 1; transform: none; }
}
@media (max-width: 1000px) {
  .pasos-r .r-fijo { grid-template-columns: 1fr; grid-template-rows: 38% 1fr; align-items: start; }
  .pasos-lista { padding-top: 18px; gap: 6px; }
  .pasos-lista .r-paso { grid-template-columns: 40px 1fr; }
  .crono { grid-template-columns: 1fr; padding: 0 0 0 26px; gap: 22px; }
  .linea-t { left: 0; right: auto; width: 1px; top: 0; bottom: 0; height: auto; }
  .linea-t i { width: 100%; height: 100%; transform: scaleY(var(--p, 0)); transform-origin: top; }
}
@media (max-width: 700px) {
  .portada h1 { font-size: clamp(44px, 13vw, 60px); }
  .pases-pie { padding: 0 16px; gap: 6px; bottom: 18px; }
  .pp b { display: none; }
  .portada-capa { padding-bottom: 46px; }
  .portada .botones { margin-top: 20px; }
  .tour-capa { padding: 0 16px 96px; }
  .tour-paso { left: 16px; right: 16px; bottom: 140px; }
  .tour-guia { display: none; }
  .pasos-lista { padding-left: 16px; padding-right: 16px; }
  .pasos-lista h3 { font-size: 21px; }
  .pasos-nota { display: none; }
  .cinta { padding-top: 50px; }
}

/* ==========  Movimiento fácil de entender (nov 2026)  ========== */
.w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .14em; margin-bottom: -.14em; }
.w > span { display: inline-block; transition: transform 1s var(--suave); transition-delay: var(--d, 0s); }
.js .aparece:not(.visto) .w > span { transform: translateY(115%); }

/* los proyectos: primero la foto, luego el texto, luego las miniaturas */
.js .p-texto > *, .js .p-num { transition: opacity .9s var(--suave), transform .9s var(--suave); }
.js .p-texto > :nth-child(2) { transition-delay: .1s; } .js .p-texto > :nth-child(3) { transition-delay: .2s; } .js .p-texto > :nth-child(4) { transition-delay: .3s; }
.js .proyecto:not(.llego) .p-texto > *, .js .proyecto:not(.llego) .p-num { opacity: 0; transform: translateY(30px); }
.js .p-mini { transition: opacity .8s var(--suave), transform .8s var(--suave); }
.js .p-mini:nth-child(1) { transition-delay: .35s; } .js .p-mini:nth-child(2) { transition-delay: .47s; } .js .p-mini:nth-child(3) { transition-delay: .59s; }
.js .proyecto:not(.llego) .p-mini { opacity: 0; transform: translateY(24px) scale(.94); }

/* el plan de pagos, dibujado */
.pago-barra { display: flex; gap: 3px; height: 8px; margin-bottom: 18px; }
.pago-barra span { display: block; background: var(--linea); overflow: hidden; }
.pago-barra i { display: block; height: 100%; background: var(--champan-osc); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--suave); transition-delay: var(--d, 0s); }
.aang-pagos.visto .pago-barra i { transform: scaleX(1); }

/* la historia */
.historia { padding-bottom: clamp(60px, 8vw, 110px); }
.historia-r .r-fijo { display: grid; grid-template-columns: 1fr 1fr; align-items: center; background: var(--piedra); }
.historia-frases { position: relative; height: 60%; margin: 0 var(--margen); }
.historia-frases .r-paso { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; opacity: 0; transform: translateY(26px); transition: opacity .7s, transform .9s var(--suave); }
.historia-frases .r-paso.activo { opacity: 1; transform: none; }
.historia-frases h3 { font-size: clamp(42px, 5.2vw, 84px); margin-bottom: 22px; }
.historia-frases p { font-size: clamp(18px, 1.5vw, 22px); color: var(--texto-2); max-width: 500px; }
.historia-r .r-barra { position: absolute; left: 0; right: 0; bottom: 0; background: var(--linea); }
.historia-r .r-barra i { background: var(--champan-osc); }
.historia-r .r-img img { object-position: center 40%; }

/* del dibujo a la realidad */
.sueno { position: relative; z-index: 2; background: var(--carbon); color: var(--piedra); padding: clamp(90px, 11vw, 160px) var(--margen); display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(40px, 7vw, 120px); align-items: center; }
.sueno-texto { max-width: 620px; margin-left: auto; }
.sueno .eyebrow { color: var(--champan-claro); }
.sueno h2 { font-size: clamp(46px, 6.4vw, 104px); }
.sueno-texto > p:not(.eyebrow) { margin-top: 26px; font-size: clamp(18px, 1.5vw, 22px); color: rgba(235,230,220,.8); }
.sueno-video { max-width: 360px; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 8px; box-shadow: 0 40px 90px rgba(0,0,0,.45); }
.sueno-video video { width: 100%; height: 100%; object-fit: cover; }

.tarjeta video { width: 100%; height: 100%; object-fit: cover; }

@media (prefers-reduced-motion: reduce) {
  .js .aparece:not(.visto) .w > span, .js .proyecto:not(.llego) .p-texto > *, .js .proyecto:not(.llego) .p-num, .js .proyecto:not(.llego) .p-mini { opacity: 1; transform: none; }
  .pago-barra i { transform: none; }
}
@media (max-width: 1000px) {
  .historia-r .r-fijo { grid-template-columns: 1fr; grid-template-rows: 50% 1fr; }
  .historia-frases { height: 100%; }
  .sueno { grid-template-columns: 1fr; justify-items: start; }
  .sueno-texto { margin-left: 0; }
}
@media (max-width: 700px) {
  .historia-frases { margin: 0 16px; }
  .historia-frases .r-paso { justify-content: flex-start; padding-top: 22px; }
  .historia-frases h3 { font-size: 36px; margin-bottom: 12px; }
  .sueno { padding-left: 16px; padding-right: 16px; padding-bottom: 110px; }
  .sueno-video { max-width: 100%; }
}

/* al cambiar de frase, la anterior se va antes de que llegue la siguiente */
.historia-frases .r-paso { transition: opacity .25s, transform .3s; }
.historia-frases .r-paso.activo { transition: opacity .7s .25s, transform .9s var(--suave) .25s; }
.tour-paso { transition: opacity .25s, transform .3s; }
.tour-paso.activo { transition: opacity .7s .25s, transform .9s var(--suave) .25s; }