/* InmoView · landing
   Papel de plano, tinta y un acento terracota (el de las sillas del comedor del caso real). */
:root {
    --papel: #f2eee6;
    --papel-2: #e8e2d6;
    --tinta: #191815;
    --tinta-2: #55514a;
    --tinta-3: #8a857b;
    --linea: rgba(25, 24, 21, .14);
    --terracota: #b4582f;
    --terracota-2: #d9774a;
    --noche: #121110;
    --noche-2: #1d1b18;
    --claro: #efe9de;
    --serif: 'Instrument Serif', 'Times New Roman', serif;
    --sans: 'Inter Tight', system-ui, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, monospace;
    --borde: 18px;
    --lateral: clamp(16px, 4vw, 56px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 400 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
em { font-style: italic; }
::selection { background: var(--terracota); color: var(--papel); }

/* ── Piezas comunes ── */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2); }
.eyebrow.claro { color: #b9b1a3; }
.punto { width: 7px; height: 7px; border-radius: 50%; background: var(--terracota); box-shadow: 0 0 0 4px rgba(180, 88, 47, .16); }
.titulo-seccion { margin: 0; font: 400 clamp(40px, 6vw, 88px)/0.98 var(--serif); letter-spacing: -.015em; max-width: 16ch; }
.titulo-seccion em, .titular em, .titular-final em, .manifiesto-txt em { color: var(--terracota); }
.titulo-seccion.claro, .texto.claro { color: var(--claro); }
.texto { max-width: 46ch; color: var(--tinta-2); font-size: 18px; }
.seccion-cabecera { margin-bottom: clamp(32px, 5vw, 64px); }

.boton { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px; font: 500 15px/1 var(--sans); text-decoration: none; border: 1px solid transparent; transition: transform .25s, background .25s, color .25s, border-color .25s; cursor: pointer; }
.boton:hover { transform: translateY(-2px); }
.boton:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--terracota); outline-offset: 3px; }
.boton-tinta { background: var(--tinta); color: var(--papel); }
.boton-terracota { background: var(--terracota); color: #fff8f0; }
.boton-terracota:hover { background: #9f4b26; }
.boton-linea { border-color: var(--tinta); color: var(--tinta); background: rgba(242, 238, 230, .6); }
.boton-linea:hover { background: var(--tinta); color: var(--papel); }
.boton.grande { padding: 18px 28px; font-size: 16px; }

/* ── Telón de entrada ── */
.telon { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; align-content: center; gap: 18px; background: var(--noche); color: var(--claro); }
.telon-marca { width: 96px; height: 87px; overflow: visible; }
.telon-txt { margin: 0; font: 400 42px/1 var(--serif); letter-spacing: .01em; }
.telon-txt em { color: var(--terracota-2); }
.sin-telon .telon { display: none; }

/* ── Navegación ── */
.nav { position: fixed; top: 14px; left: var(--lateral); right: var(--lateral); z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 10px 10px 10px 18px; border-radius: 999px; background: rgba(242, 238, 230, .72); backdrop-filter: blur(14px) saturate(1.3); border: 1px solid var(--linea); transition: transform .4s, background .3s; }
.nav.oculta { transform: translateY(-140%); }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-marca { width: 36px; height: 33px; }
.logo-txt { font: 400 26px/1 var(--serif); letter-spacing: .005em; }
.logo-txt em { color: var(--terracota); }
.logo.claro .logo-txt { color: var(--claro); }
.nav-enlaces { display: flex; gap: 28px; font-size: 14.5px; }
.nav-enlaces a { text-decoration: none; color: var(--tinta-2); position: relative; }
.nav-enlaces a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -4px; height: 1px; background: var(--terracota); transition: right .3s; }
.nav-enlaces a:hover { color: var(--tinta); }
.nav-enlaces a:hover::after { right: 0; }
.nav .boton { padding: 11px 18px; font-size: 14px; }

/* ── Hero ── */
.hero { position: relative; height: 210vh; }
.hero-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.rejilla { position: absolute; inset: 0; background-image:
        linear-gradient(var(--linea) 1px, transparent 1px), linear-gradient(90deg, var(--linea) 1px, transparent 1px),
        linear-gradient(rgba(25, 24, 21, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(25, 24, 21, .05) 1px, transparent 1px);
    background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px; background-position: -1px -1px;
    mask-image: radial-gradient(ellipse 80% 70% at 62% 50%, #000 30%, transparent 85%); }
.hero-texto { position: absolute; z-index: 5; left: var(--lateral); top: 50%; transform: translateY(-46%); max-width: min(540px, 38vw); }
.titular { margin: 0 0 22px; font: 400 clamp(46px, 5.5vw, 96px)/0.94 var(--serif); letter-spacing: -.02em; }
.titular .linea { display: block; overflow: hidden; padding-bottom: .06em; }
.titular .linea > span { display: inline-block; }
.hero-sub { margin: 0 0 30px; max-width: 42ch; color: var(--tinta-2); font-size: 18px; }
.hero-botones { display: flex; flex-wrap: wrap; gap: 12px; }

.escenario { position: absolute; z-index: 2; right: 3vw; top: 50%; width: min(56vw, 130vh); aspect-ratio: 965 / 680; transform: translateY(-50%); perspective: 1800px; }
.plano-3d { position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: 50% 55%; }
.capa { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.capa-planta { opacity: 0; filter: drop-shadow(0 30px 40px rgba(25, 24, 21, .18)); }
.capa-plano { clip-path: inset(0 100% 0 0); mix-blend-mode: multiply; }
.escaner { position: absolute; top: -4%; bottom: -4%; left: 0; width: 1px; background: var(--terracota); box-shadow: 0 0 18px 2px rgba(180, 88, 47, .45); opacity: 0; }
.escaner::before, .escaner::after { content: 'LEYENDO PLANO'; position: absolute; left: 8px; font: 500 10px/1 var(--mono); color: var(--terracota); white-space: nowrap; }
.escaner::before { top: 0; }
.escaner::after { content: attr(data-x); bottom: 0; }
.etiquetas .etq { position: absolute; transform: translate(-50%, -50%); display: inline-flex; gap: 8px; align-items: center; padding: 7px 11px; border-radius: 999px; background: rgba(25, 24, 21, .86); color: var(--claro); font: 500 11.5px/1 var(--mono); white-space: nowrap; opacity: 0; }
.etiquetas .etq b { color: var(--terracota-2); font-weight: 500; }

.marcas-esquina span { position: absolute; z-index: 6; font: 500 11px/1 var(--mono); letter-spacing: .12em; color: var(--tinta-3); }
.marcas-esquina span:nth-child(1) { right: var(--lateral); top: 96px; }
.marcas-esquina span:nth-child(2) { right: var(--lateral); top: 116px; }
.marcas-esquina span:nth-child(3) { right: var(--lateral); bottom: 34px; }
.marcas-esquina span:nth-child(4) { left: 50%; bottom: 34px; transform: translateX(-50%); animation: latido 2s ease-in-out infinite; }
@keyframes latido { 50% { opacity: .35; } }

/* ── Manifiesto ── */
.manifiesto { padding: clamp(96px, 14vw, 200px) var(--lateral) clamp(80px, 10vw, 140px); }
.manifiesto-txt { margin: 0 0 clamp(56px, 8vw, 110px); max-width: 24ch; font: 400 clamp(34px, 4.6vw, 68px)/1.08 var(--serif); letter-spacing: -.01em; }
.manifiesto-txt .palabra { display: inline-block; opacity: .14; transition: opacity .3s; }
.cifras { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--tinta); }
.cifra { padding: 26px 24px 0 0; }
.cifra + .cifra { padding-left: 24px; border-left: 1px solid var(--linea); }
.cifra b { display: block; margin-bottom: 10px; font: 400 clamp(56px, 7vw, 104px)/1 var(--serif); font-variant-numeric: tabular-nums; }
.cifra > span { color: var(--tinta-2); font-size: 15px; }

/* ── Cómo funciona ── */
.como { background: var(--papel-2); border-top: 1px solid var(--linea); }
.como-pin { min-height: 100vh; padding: 96px 0 40px; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.como .seccion-cabecera { padding: 0 var(--lateral); margin-bottom: clamp(24px, 4vh, 48px); }
.como .titulo-seccion { font-size: clamp(40px, min(5vw, 8vh), 80px); max-width: none; }
.pasos { display: flex; gap: clamp(20px, 3vw, 40px); padding: 0 var(--lateral); width: max-content; }
.paso { width: min(60vw, calc(50vh * 1.6), 680px); flex: none; display: grid; grid-template-rows: auto 1fr; gap: 22px; }
.paso-img { position: relative; aspect-ratio: 16 / 10; border-radius: var(--borde); overflow: hidden; border: 1px solid var(--linea); background: var(--papel); }
.paso-img > img { width: 100%; height: 100%; object-fit: contain; }
.paso-img.papel { background: #fbf9f4; padding: 22px; }
.paso-img.oscuro { background: radial-gradient(circle at 50% 40%, #2a2723, var(--noche)); padding: 8px; }
.paso-img.abanico { background: #fbf9f4; }
.paso-img.abanico img { position: absolute; width: 52%; height: auto; left: 24%; top: 13%; border-radius: 10px; box-shadow: 0 18px 40px rgba(25, 24, 21, .22); border: 4px solid #fff; }
.paso-img.abanico img:nth-child(1) { transform: rotate(-9deg) translate(-38%, 4%); }
.paso-img.abanico img:nth-child(2) { transform: rotate(7deg) translate(36%, 2%); }
.paso-img.abanico img:nth-child(3) { transform: rotate(-1deg); }
.paso-img.navegador { background: #fff; display: flex; flex-direction: column; }
.paso-img.navegador > img { flex: 1; min-height: 0; object-fit: cover; }
.nav-barra { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--linea); background: #f7f4ee; }
.nav-barra i { width: 9px; height: 9px; border-radius: 50%; background: #d8d2c6; }
.nav-barra .url { margin-left: 10px; flex: 1; padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--linea); font: 400 12px/1 var(--mono); color: var(--tinta-2); }
.paso-txt { display: grid; grid-template-columns: auto 1fr; column-gap: 18px; align-items: baseline; }
.paso-num { grid-row: span 2; font: 400 56px/1 var(--serif); color: var(--terracota); }
.paso h3 { margin: 0 0 6px; font: 500 22px/1.2 var(--sans); letter-spacing: -.01em; }
.paso p { margin: 0; color: var(--tinta-2); max-width: 46ch; }
.como-progreso { position: relative; margin: 28px var(--lateral) 0; height: 1px; background: var(--linea); }
.como-progreso i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: var(--tinta); }

/* ── De renders a vista libre ── */
.renders { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: center; padding: clamp(96px, 12vw, 170px) var(--lateral); }
.mini-lista { margin: 30px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--linea); }
.mini-lista li { display: grid; grid-template-columns: 90px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--linea); color: var(--tinta-2); }
.mini-lista li span { font: 500 11px/1.8 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--terracota); }
.renders-escena { position: relative; aspect-ratio: 16 / 11; }
.pila { position: absolute; left: 0; top: 4%; width: 46%; aspect-ratio: 1200 / 1054; z-index: 2; }
.pila img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 12px; border: 5px solid #fff; box-shadow: 0 20px 44px rgba(25, 24, 21, .2); }
.vista-libre { position: absolute; right: 0; bottom: 0; width: 74%; aspect-ratio: 16 / 10; border-radius: var(--borde); overflow: hidden; background: var(--noche); box-shadow: 0 40px 80px rgba(25, 24, 21, .25); }
.vista-libre img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 1.2s ease, transform 6s ease-out; }
.vista-libre img.activa { opacity: 1; transform: scale(1); }
.sello { position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: rgba(18, 17, 16, .78); color: var(--claro); font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.sello i { width: 7px; height: 7px; border-radius: 50%; background: #5fd38a; animation: latido 1.6s infinite; }
.mira { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px; border: 1.5px solid rgba(255, 255, 255, .85); border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); }
.mira::after { content: ''; position: absolute; inset: 13px; border-radius: 50%; background: #fff; }

/* ── Qué incluye ── */
.incluye { padding: clamp(96px, 12vw, 160px) var(--lateral); border-top: 1px solid var(--linea); }
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(250px, auto); gap: 14px; }
.celda { position: relative; display: flex; flex-direction: column; border-radius: var(--borde); overflow: hidden; background: #fbf9f4; border: 1px solid var(--linea); }
.c-ancha { grid-column: span 2; }
.c-alta { grid-row: span 2; }
.celda.oscura { background: radial-gradient(circle at 50% 35%, #2b2824, var(--noche) 70%); color: var(--claro); border-color: #000; }
.celda-media { position: relative; flex: 1; min-height: 170px; overflow: hidden; }
.celda-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.celda-media.cruce img, .celda-media.superpuesto img { object-fit: contain; padding: 14px; }
.celda-media .encima { opacity: 0; }
.celda-txt { padding: 20px 22px 22px; }
.celda h3 { margin: 0 0 6px; font: 500 19px/1.2 var(--sans); letter-spacing: -.01em; }
.celda p { margin: 0; color: var(--tinta-2); font-size: 15px; }
.celda.oscura p { color: #b9b1a3; }
.deslizador { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; margin-top: 16px; font: 500 11px/1 var(--mono); letter-spacing: .06em; color: #b9b1a3; text-transform: uppercase; }
.deslizador i { position: relative; height: 2px; background: rgba(239, 233, 222, .2); border-radius: 2px; }
.deslizador b { position: absolute; top: 50%; left: 100%; width: 14px; height: 14px; margin: -7px; border-radius: 50%; background: var(--terracota-2); box-shadow: 0 0 0 4px rgba(217, 119, 74, .25); }
.deslizador .valor { font-style: normal; color: var(--claro); min-width: 6ch; text-align: right; }
.kenburns img { animation: kenburns 16s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1.05) translate(0, 0); } to { transform: scale(1.18) translate(-4%, 2%); } }
.teclas { display: flex; gap: 6px; margin-top: 14px; }
.teclas kbd { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: var(--papel); border: 1px solid var(--linea); border-bottom-width: 3px; font: 500 12px/1 var(--mono); transition: transform .12s, background .12s, color .12s; }
.teclas kbd.pulsada { transform: translateY(2px); border-bottom-width: 1px; background: var(--tinta); color: var(--papel); }
.pano { background: url(../img/pano.webp) 0 50% / auto 130% repeat-x; cursor: grab; touch-action: pan-y; }
.pano:active { cursor: grabbing; }
.superficies table { width: 100%; margin-top: 12px; border-collapse: collapse; font-size: 14px; }
.superficies td { padding: 8px 0; border-bottom: 1px solid var(--linea); color: var(--tinta-2); }
.superficies td:last-child { text-align: right; font: 500 13px/1 var(--mono); color: var(--tinta); font-variant-numeric: tabular-nums; }
.superficies tr.total td { border-bottom: 0; padding-top: 12px; color: var(--tinta); font-weight: 600; }
.superficies tr.total td:last-child { color: var(--terracota); }
.superficies .nota { margin-top: 12px; font-size: 13px; color: var(--tinta-3); }
.luz .celda-media img { animation: luz 7s ease-in-out infinite; }
@keyframes luz { 0%, 100% { filter: brightness(1.04) saturate(1.02); } 50% { filter: brightness(.72) saturate(1.25) sepia(.28); } }
.muestras { display: flex; gap: 8px; margin-top: 14px; }
.muestras i { width: 24px; height: 24px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5); }
.muestras i:first-child { box-shadow: 0 0 0 2px var(--papel), 0 0 0 3.5px var(--tinta); }
.enlace { background: var(--terracota); border-color: var(--terracota); color: #fff8f0; justify-content: flex-end; }
.enlace p { color: rgba(255, 248, 240, .82); }
.url-falsa { display: flex; align-items: center; gap: 8px; margin-top: 18px; padding: 12px 14px; border-radius: 12px; background: rgba(255, 248, 240, .14); font: 400 13px/1 var(--mono); }
.url-falsa .candado { font-size: 9px; color: #5fd38a; }

/* ── Vivienda de muestra ── */
.caso { position: relative; padding: clamp(96px, 12vw, 160px) var(--lateral); background: radial-gradient(ellipse 70% 60% at 55% 55%, #2b2824 0%, var(--noche) 70%); color: var(--claro); overflow: hidden; }
.caso-cabecera { position: relative; z-index: 2; }
.caso-escena { position: relative; width: min(1100px, 100%); margin: clamp(-60px, -4vw, -20px) auto 0; }
.caso-escena img { width: 100%; filter: drop-shadow(0 50px 60px rgba(0, 0, 0, .55)); }
.hotspot { position: absolute; display: inline-flex; align-items: center; gap: 10px; transform: translate(-12px, -50%); padding: 8px 12px 8px 8px; border-radius: 999px; background: rgba(18, 17, 16, .82); border: 1px solid rgba(239, 233, 222, .16); font: 500 12px/1 var(--mono); white-space: nowrap; backdrop-filter: blur(6px); }
.hotspot i { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--terracota-2); }
.hotspot i::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid var(--terracota-2); animation: onda 2.2s ease-out infinite; }
@keyframes onda { from { transform: scale(.6); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }
.caso-datos { display: grid; grid-template-columns: repeat(4, 1fr); margin: 40px 0 44px; border-top: 1px solid rgba(239, 233, 222, .2); }
.caso-datos div { padding: 20px 20px 0 0; }
.caso-datos dt { margin-bottom: 8px; font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--terracota-2); }
.caso-datos dd { margin: 0; font: 400 24px/1.2 var(--serif); }

/* ── Para quién ── */
.para { padding: clamp(96px, 12vw, 160px) var(--lateral); }
.para .titulo-seccion { max-width: 20ch; }
.tarjetas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.tarjeta { padding: 28px 24px; border-radius: var(--borde); border: 1px solid var(--linea); background: #fbf9f4; transition: transform .35s, box-shadow .35s, border-color .35s; }
.tarjeta:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(25, 24, 21, .1); border-color: var(--terracota); }
.tarjeta svg { width: 48px; height: 48px; margin-bottom: 40px; }
.traza { fill: none; stroke: var(--tinta); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tarjeta:hover .traza { stroke: var(--terracota); }
.tarjeta h3 { margin: 0 0 8px; font: 400 30px/1.05 var(--serif); }
.tarjeta p { margin: 0; color: var(--tinta-2); font-size: 15.5px; }

/* ── Qué necesito / qué recibes ── */
.intercambio { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(24px, 4vw, 60px); align-items: center; margin: 0 var(--lateral); padding: clamp(56px, 7vw, 90px) 0; border-block: 1px solid var(--tinta); }
.lista-trazo { margin: 0; padding: 0; list-style: none; }
.lista-trazo li { display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--linea); }
.lista-trazo b { font: 400 30px/1.1 var(--serif); font-weight: 400; }
.lista-trazo span { color: var(--tinta-2); font-size: 15px; }
.flecha svg { width: clamp(60px, 9vw, 120px); }
.flecha .traza { stroke: var(--terracota); stroke-width: 1.4; }

/* ── Preguntas ── */
.faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); padding: clamp(96px, 12vw, 160px) var(--lateral); }
.faq-lista details { border-bottom: 1px solid var(--linea); }
.faq-lista details:first-child { border-top: 1px solid var(--linea); }
.faq-lista summary { position: relative; padding: 24px 44px 24px 0; font: 400 26px/1.2 var(--serif); cursor: pointer; list-style: none; }
.faq-lista summary::-webkit-details-marker { display: none; }
.faq-lista summary::after { content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font: 300 28px/1 var(--sans); color: var(--terracota); transition: transform .3s; }
.faq-lista details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-lista p { margin: -6px 0 24px; max-width: 58ch; color: var(--tinta-2); }

/* ── Contacto ── */
.contacto { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: end; padding: clamp(96px, 12vw, 170px) var(--lateral); background: var(--noche); color: var(--claro); }
.titular-final { margin: 0 0 24px; font: 400 clamp(52px, 8vw, 128px)/0.92 var(--serif); letter-spacing: -.02em; }
.formulario { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.formulario label { display: grid; gap: 8px; font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #b9b1a3; }
.formulario .ancho { grid-column: span 2; }
.formulario input, .formulario select, .formulario textarea { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(239, 233, 222, .18); background: var(--noche-2); color: var(--claro); font: 400 16px/1.4 var(--sans); letter-spacing: 0; text-transform: none; }
.formulario textarea { resize: vertical; }
.formulario button { grid-column: span 2; justify-content: center; border: 0; }

/* ── Pie ── */
.pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 34px var(--lateral); background: var(--noche); color: #8f887c; border-top: 1px solid rgba(239, 233, 222, .1); font-size: 14px; }
.pie p { margin: 0; }

/* ── Revelados al hacer scroll ── */
.aparece { opacity: 0; transform: translateY(40px); }

/* ── Móvil y tableta ── */
@media (max-width: 1000px) {
    .nav-enlaces { display: none; }
    .bento { grid-template-columns: repeat(2, 1fr); }
    .tarjetas { grid-template-columns: repeat(2, 1fr); }
    .caso-datos { grid-template-columns: repeat(2, 1fr); }
    .renders, .faq, .contacto { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    body { font-size: 16px; }
    .nav { top: 10px; padding: 8px 8px 8px 14px; }
    .logo-txt { font-size: 22px; }
    .nav .boton { padding: 10px 14px; font-size: 13px; }
    .hero { height: 190vh; }
    .hero-texto { top: 92px; transform: none; max-width: none; right: var(--lateral); }
    .titular { font-size: clamp(40px, 11vw, 56px); }
    .hero-sub { font-size: 16px; margin-bottom: 20px; }
    .hero-botones .boton-linea { display: none; }
    .escenario { right: 50%; transform: translateX(50%); top: auto; bottom: 70px; width: 96vw; }
    .marcas-esquina span:nth-child(1), .marcas-esquina span:nth-child(2), .marcas-esquina span:nth-child(3) { display: none; }
    .marcas-esquina span:nth-child(4) { display: none; }
    .cifras { grid-template-columns: 1fr; }
    .cifra + .cifra { padding-left: 0; border-left: 0; border-top: 1px solid var(--linea); margin-top: 26px; }
    .pasos { flex-direction: column; width: auto; }
    .paso { width: 100%; }
    .bento { grid-template-columns: 1fr; }
    .c-ancha { grid-column: auto; }
    .c-alta { grid-row: auto; }
    .celda-media { min-height: 220px; }
    .tarjetas { grid-template-columns: 1fr; }
    .intercambio { grid-template-columns: 1fr; }
    .flecha { transform: rotate(90deg); justify-self: center; }
    .caso-datos { grid-template-columns: 1fr; }
    .hotspot { font-size: 10px; padding: 6px 9px 6px 6px; }
    .hotspot:nth-of-type(n+4) { display: none; }
    .formulario { grid-template-columns: 1fr; }
    .formulario .ancho, .formulario button { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    html { scroll-behavior: auto; }
}