/* ═══════════════════════════════════════════════════════════════════════════
   Clever Homes · tema (26-oct-2026)
   Marca del catálogo: azul noche #062A4F, lima #B5C64A, hueso #ECEBE6, DM Sans.
   Portada oscura con cintas de líneas (el motivo de ondas del catálogo) y secciones
   claras en hueso, como las hojas del catálogo.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --bg:#030D1C; --bg-2:#061A33; --bg-3:#0A2342;
  --panel:rgba(196,218,246,.055); --panel-2:rgba(196,218,246,.10); --panel-solido:#071A31;
  --line:rgba(196,218,246,.12); --line-2:rgba(196,218,246,.22);
  --text:#EEF2F7; --text-2:rgba(226,234,245,.72); --text-3:rgba(226,234,245,.48);
  --acc:#B5C64A; --acc-2:#DCE87F; --acc-ink:#0D1A02; --glow:rgba(181,198,74,.34);
  --navy:#062A4F; --hueso:#ECEBE6;
  --f-display:'DM Sans',system-ui,sans-serif; --f-body:'DM Sans',system-ui,sans-serif; --f-mono:'DM Mono',ui-monospace,monospace;
}
body{ background:radial-gradient(1200px 800px at 80% -10%, #0B2A52 0%, transparent 60%), var(--bg) }
.marca-link{ color:var(--hueso) }
.marca-link svg{ height:36px }

/* ═══ Secciones claras (hueso, como las hojas del catálogo) ═══ */
.claro{ --bg:#ECEBE6; --panel:#fff; --panel-2:#F6F5F1; --line:rgba(6,42,79,.12); --line-2:rgba(6,42,79,.22);
  --text:#062A4F; --text-2:rgba(6,42,79,.74); --text-3:rgba(6,42,79,.5); --acc:#8C9A24; --glow:rgba(140,154,36,.25);
  background:var(--hueso); color:var(--text); color-scheme:light; border-radius:44px 44px 0 0; margin-top:-40px; overflow:hidden }
.claro + .seccion:not(.claro){ border-radius:44px 44px 0 0; margin-top:-40px; background:var(--bg) }
.claro .ojo{ color:#6E7A16 }
.acento-oscuro{ color:var(--navy); background:linear-gradient(transparent 64%, rgba(181,198,74,.62) 64%, rgba(181,198,74,.62) 92%, transparent 92%) }
.ondas{ position:absolute; right:-120px; top:-60px; width:720px; height:560px; background:url(/t/ondas.svg) center/contain no-repeat; opacity:.75; pointer-events:none; animation:ondas 14s var(--ease-in-out) infinite alternate }
@keyframes ondas{ to{ transform:translate(-30px, 20px) rotate(-3deg) } }

/* ═══ Portada ═══ */
.heroe{ position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; padding:calc(var(--barra) + 30px) 0 90px; isolation:isolate }
.heroe__cintas{ position:absolute; inset:0; width:100%; height:100%; z-index:-2 }
.heroe__velo{ position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(70% 60% at 22% 45%, rgba(3,13,28,.82), transparent 70%), linear-gradient(180deg, transparent 70%, var(--bg) 100%) }
.heroe__grid{ display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:40px; align-items:center }
.pilares{ display:flex; gap:12px; align-items:center; font:500 13px var(--f-display); letter-spacing:.2em; text-transform:uppercase; margin-bottom:26px; color:var(--text) }
.pilares i{ font-style:normal; color:var(--acc) }
.heroe h1{ max-width:12ch }
.heroe .entrada{ margin:28px 0 36px }
.heroe .entrada b{ color:var(--text); font-weight:500 }
.heroe__cta{ display:flex; gap:12px; flex-wrap:wrap }
.heroe__bajar{ position:absolute; left:50%; bottom:28px; width:26px; height:42px; margin-left:-13px; border-radius:14px; border:1.5px solid var(--line-2) }
.heroe__bajar span{ position:absolute; left:50%; top:9px; width:3px; height:8px; margin-left:-1.5px; border-radius:2px; background:var(--acc); animation:bajar 1.8s var(--ease-in-out) infinite }
@keyframes bajar{ 0%{ transform:translateY(0); opacity:1 } 70%{ transform:translateY(14px); opacity:0 } 100%{ opacity:0 } }

/* órbita 3D de productos */
.orbita{ position:relative; height:560px; perspective:1500px; display:grid; place-items:center }
.orbita__anillo{ position:relative; width:180px; height:230px; transform-style:preserve-3d; animation:orbita 46s linear infinite; transform:rotateX(-10deg) }
.orbita:hover .orbita__anillo{ animation-play-state:paused }
@keyframes orbita{ from{ transform:rotateX(-10deg) rotateY(0) } to{ transform:rotateX(-10deg) rotateY(-360deg) } }
.orbita__item{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:16px 12px; border-radius:22px;
  background:linear-gradient(160deg, rgba(196,218,246,.14), rgba(196,218,246,.03)); border:1px solid rgba(196,218,246,.2); backdrop-filter:blur(6px);
  transform:rotateY(calc(360deg / var(--n) * var(--k))) translateZ(310px); transition:border-color .3s, background .3s; box-shadow:0 30px 60px -30px rgba(0,0,0,.8) }
.orbita__item:hover{ border-color:var(--acc); background:linear-gradient(160deg, rgba(181,198,74,.22), rgba(196,218,246,.04)) }
.orbita__item img{ width:130px; height:130px; object-fit:contain; filter:drop-shadow(0 18px 24px rgba(0,0,0,.5)) }
.orbita__item img.foto{ object-fit:cover; border-radius:14px }
.orbita__item span{ font-size:13px; font-weight:500; text-align:center; line-height:1.25; color:var(--text) }
.orbita__nucleo{ position:absolute; width:170px; height:170px; border-radius:50%; display:grid; place-items:center; align-content:center; text-align:center; pointer-events:none;
  background:radial-gradient(circle at 35% 30%, rgba(220,232,127,.5), rgba(181,198,74,.12) 45%, transparent 70%); box-shadow:0 0 120px 30px rgba(181,198,74,.18) }
.orbita__nucleo span{ font-size:11px; letter-spacing:.5em; color:var(--text-2); padding-left:.5em }
.orbita__nucleo b{ font-size:24px; letter-spacing:.32em; font-weight:500; padding-left:.32em }

/* datos */
.datos{ position:relative; z-index:2; padding:10px 0 70px }
.datos__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--line) }
.datos__grid div{ padding:30px 24px 0 0; border-right:1px solid var(--line); margin-right:24px }
.datos__grid div:last-child{ border-right:0 }
.datos__grid b{ display:block; font:700 clamp(46px,5vw,76px)/1 var(--f-display); letter-spacing:-.04em; color:var(--acc) }
.datos__grid span{ color:var(--text-2); font-size:15px }

/* espacios */
.espacios{ grid-auto-rows:minmax(240px,auto) }
.espacio{ --bg:#062A4F; background:linear-gradient(160deg, #0A3561 0%, #051C36 100%); border-color:transparent; color:#EEF2F7; min-height:260px; justify-content:space-between }
.espacio::after{ background:radial-gradient(520px circle at var(--mx,50%) var(--my,50%), rgba(181,198,74,.28), transparent 50%) }
.espacio--grande{ grid-column:1 / 8; grid-row:1 / 3; min-height:560px }
.espacio--alto{ grid-column:8 / 13 }
.espacio--ancho{ grid-column:8 / 13 }
.espacio--chico{ grid-column:1 / 13; min-height:220px; flex-direction:row; align-items:center }
.espacio img{ position:absolute; right:-4%; bottom:-6%; width:58%; max-width:360px; opacity:.95; transition:transform .9s var(--ease-out); pointer-events:none }
.espacio--grande img{ width:74%; max-width:520px; right:-2%; bottom:-4% }
.espacio--chico img{ width:240px; right:6%; bottom:auto; top:50%; transform:translateY(-50%) }
.espacio:hover img{ transform:translateY(-10px) scale(1.04) }
.espacio--chico:hover img{ transform:translateY(-54%) scale(1.04) }
.espacio__n{ font-size:12px; letter-spacing:.2em; color:#B5C64A }
.espacio__txt{ position:relative; z-index:1; max-width:24ch }
.espacio h3{ font:700 clamp(28px,3vw,44px)/1 var(--f-display); letter-spacing:-.03em; margin:14px 0 8px }
.espacio p{ color:rgba(226,234,245,.72); font-size:15px }
.espacio__pie{ position:relative; z-index:1; display:flex; align-items:center; gap:14px; font:500 12px var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:rgba(226,234,245,.6); margin-top:22px }
.espacio__ir{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:#B5C64A; color:#0D1A02; transition:transform .45s var(--ease-out) }
.espacio__ir svg{ width:18px; height:18px }
.espacio:hover .espacio__ir{ transform:rotate(-45deg) }

/* acceso inteligente */
.acceso{ overflow:hidden }
.acceso__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(30px,5vw,80px); align-items:center }
.acceso .entrada{ margin:22px 0 28px }
.metodos{ display:grid; gap:8px }
.metodo{ position:relative; display:flex; gap:16px; align-items:flex-start; text-align:left; padding:16px 18px; border-radius:16px; border:1px solid var(--line); background:var(--panel); overflow:hidden; transition:background .35s, border-color .35s }
.metodo b{ display:block; font-size:16px; font-weight:600 }
.metodo small{ display:block; font-size:14px; color:var(--text-2); max-height:0; opacity:0; overflow:hidden; transition:max-height .5s var(--ease-out), opacity .4s }
.metodo__n{ font-size:12px; color:var(--text-3); padding-top:3px }
.metodo[aria-selected="true"]{ background:var(--panel-2); border-color:color-mix(in srgb, var(--acc) 40%, transparent) }
.metodo[aria-selected="true"] small{ max-height:60px; opacity:1; margin-top:4px }
.metodo[aria-selected="true"] .metodo__n{ color:var(--acc) }
.metodo__barra{ position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--acc) }
.metodo[aria-selected="true"] .metodo__barra{ animation:barraMetodo var(--ciclo,3800ms) linear forwards }
@keyframes barraMetodo{ to{ width:100% } }
.consola{ position:relative; aspect-ratio:1/1.02; border-radius:32px; border:1px solid var(--line-2); overflow:hidden; isolation:isolate;
  background:radial-gradient(60% 50% at 50% 42%, rgba(181,198,74,.16), transparent 70%), linear-gradient(160deg, #0A2546, #040F20) }
.consola::after{ content:''; position:absolute; inset:0; z-index:-1; background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(181,198,74,.16), transparent 50%) }
.consola__rejilla{ position:absolute; inset:0; z-index:-1; background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size:36px 36px; mask-image:radial-gradient(65% 55% at 50% 45%, #000 30%, transparent 80%) }
.consola__estado{ position:absolute; top:22px; left:22px; display:flex; align-items:center; gap:10px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-2) }
.consola__estado i{ width:8px; height:8px; border-radius:50%; background:var(--acc); box-shadow:0 0 12px var(--acc); animation:pulso 1.6s infinite }
.consola__visor{ position:absolute; inset:14% 18% 26%; display:grid; place-items:center }
.vis{ position:absolute; width:100%; height:100%; opacity:0; transform:scale(.9); transition:opacity .5s, transform .6s var(--ease-out); fill:none; stroke-linecap:round; stroke-linejoin:round }
.vis.activo{ opacity:1; transform:none }
.vis .o{ stroke:#DCE6F2; stroke-width:3 }
.vis .o2{ stroke:#8FA6C2; stroke-width:2.5 }
.vis .ac{ stroke:#B5C64A; stroke-width:5 }
.vis.activo .dibuja{ stroke-dasharray:60; stroke-dashoffset:60; animation:traza 1s .3s var(--ease-out) forwards }
.vis .pulso{ stroke:#B5C64A; stroke-width:2; opacity:.0; transform-origin:100px 86px }
.vis.activo .pulso{ animation:pulsoVis 2s .2s infinite }
@keyframes pulsoVis{ 0%{ opacity:.8; transform:scale(.6) } 100%{ opacity:0; transform:scale(1.5) } }
.huella path{ stroke:#B5C64A; stroke-width:3.2 }
.escaner{ fill:#DCE87F; filter:drop-shadow(0 0 8px #B5C64A) }
.vis.activo .escaner{ animation:escaner 1.6s var(--ease-in-out) infinite alternate }
@keyframes escaner{ from{ transform:translateY(-44px) } to{ transform:translateY(46px) } }
.nfc path{ stroke:#B5C64A; stroke-width:3.5; opacity:.2 }
.vis.activo .nfc path{ animation:nfc 1.4s infinite }
.vis.activo .nfc path:nth-child(2){ animation-delay:.2s } .vis.activo .nfc path:nth-child(3){ animation-delay:.4s }
@keyframes nfc{ 0%,100%{ opacity:.15 } 40%{ opacity:1 } }
.teclas rect{ fill:rgba(196,218,246,.08); stroke:#8FA6C2; stroke-width:1.6 }
.vis.activo .teclas rect{ animation:tecla 2.4s calc(var(--t) * 90ms) infinite }
@keyframes tecla{ 0%,100%{ fill:rgba(196,218,246,.08) } 8%{ fill:#B5C64A } 20%{ fill:rgba(196,218,246,.08) } }
.codigo-txt{ fill:#B5C64A; font:700 22px var(--f-mono); letter-spacing:6px }
.llave{ transform-origin:70px 100px }
.vis.activo .llave{ animation:llave 2.2s var(--ease-in-out) infinite }
@keyframes llave{ 0%,20%{ transform:translateX(0) rotate(0) } 50%{ transform:translateX(16px) rotate(0) } 75%,100%{ transform:translateX(16px) rotate(-90deg) } }
.consola__producto{ position:absolute; right:-6%; bottom:-8%; width:46%; opacity:.9; filter:drop-shadow(0 30px 40px rgba(0,0,0,.6)); transform:rotate(-8deg); pointer-events:none }

/* ducha: termostato */
.ducha__grid{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(30px,5vw,80px); align-items:center }
.ducha .entrada{ margin:22px 0 26px }
.termostato{ position:relative; aspect-ratio:1/1; max-width:520px; width:100%; margin:0 auto; border-radius:50%; isolation:isolate;
  background:radial-gradient(circle, #0B2747 0%, #051327 62%, transparent 63%) }
.termostato::before{ content:''; position:absolute; inset:6%; border-radius:50%; z-index:-1; box-shadow:0 0 120px 10px color-mix(in srgb, var(--tcol,#B5C64A) 26%, transparent); transition:box-shadow .5s }
.termostato svg{ width:100%; height:100%; overflow:visible }
.term-pista{ fill:none; stroke:rgba(196,218,246,.1); stroke-width:16; stroke-linecap:round; stroke-dasharray:556 742; transform:rotate(135deg); transform-origin:150px 150px }
.term-arco{ fill:none; stroke-width:16; stroke-linecap:round; stroke-dasharray:var(--arco,300) 742; transform:rotate(135deg); transform-origin:150px 150px; transition:stroke-dasharray .25s var(--ease-out); filter:drop-shadow(0 0 10px rgba(181,198,74,.5)) }
.term-marcas line{ stroke:rgba(196,218,246,.3); stroke-width:1.5 }
.term-perilla{ fill:#fff; stroke:#B5C64A; stroke-width:4; filter:drop-shadow(0 0 10px rgba(181,198,74,.8)); transition:transform .25s var(--ease-out) }
.termostato__lectura{ position:absolute; inset:0; display:grid; place-items:center; align-content:center; text-align:center; pointer-events:none }
.termostato__lectura b{ font:700 clamp(64px,8vw,104px)/1 var(--f-display); letter-spacing:-.05em; font-variant-numeric:tabular-nums }
.termostato__lectura small{ font-size:11.5px; letter-spacing:.24em; color:var(--text-3) }
.termostato__lectura small[data-temp-txt]{ color:var(--acc); margin-top:6px }
.termostato__rango{ position:absolute; left:18%; right:18%; bottom:6%; accent-color:#B5C64A }
.salidas{ list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:30px }
.salidas li{ display:flex; gap:14px; padding:18px; border-radius:18px; border:1px solid var(--line); background:var(--panel); transition:border-color .3s, transform .4s var(--ease-out) }
.salidas li:hover{ border-color:color-mix(in srgb, var(--acc) 45%, transparent); transform:translateY(-3px) }
.salidas li > span{ font-size:12px; color:var(--acc); padding-top:3px }
.salidas b{ font-size:15.5px; font-weight:600 }
.salidas p{ font-size:13.5px; color:var(--text-2); margin-top:4px }

/* pasos */
.pasos3{ list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; counter-reset:p; position:relative }
.pasos3::before{ content:''; position:absolute; top:34px; left:6%; right:6%; height:1.5px; background:repeating-linear-gradient(90deg, var(--line-2) 0 8px, transparent 8px 16px) }
.pasos3 li{ position:relative; background:#fff; border-radius:28px; padding:28px; border:1px solid var(--line); box-shadow:0 30px 60px -40px rgba(6,42,79,.35) }
.pasos3 li > span{ display:inline-grid; place-items:center; width:46px; height:46px; border-radius:50%; background:var(--navy); color:#B5C64A; font-size:14px; margin-bottom:18px }
.pasos3 h3{ font:700 28px var(--f-display); letter-spacing:-.02em; margin-bottom:8px }
.pasos3 p{ color:var(--text-2) }

/* proyecto (cierre) */
.proyecto{ position:relative; overflow:hidden; isolation:isolate; padding:clamp(110px,14vw,200px) 0; text-align:center; border-radius:44px 44px 0 0; margin-top:-40px; background:var(--bg) }
.proyecto__cintas{ opacity:.9 }
.proyecto .t-xl{ margin:20px auto 18px; max-width:14ch }
.proyecto__cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:36px }

/* catálogo: cabecera */
.cat-cab{ padding:calc(var(--barra) + 56px) 0 30px; position:relative; z-index:2 }
.cat-cab .t-l{ margin:16px 0 32px; max-width:15ch }
.cat-herramientas{ display:grid; gap:16px }
.cat-buscar{ display:flex; align-items:center; gap:12px; height:60px; padding:0 22px; border-radius:999px; background:var(--panel); border:1px solid var(--line-2); max-width:620px; transition:border-color .25s, box-shadow .25s }
.cat-buscar:focus-within{ border-color:var(--acc); box-shadow:0 0 0 5px color-mix(in srgb, var(--acc) 14%, transparent) }
.cat-buscar svg{ width:20px; height:20px; color:var(--text-3) }
.cat-buscar input{ flex:1; height:100%; border:0; outline:0; background:transparent; font-size:16px }
.cat-chips{ display:flex; gap:8px; flex-wrap:wrap }

.pie__gigante{ font-weight:500; letter-spacing:-.04em }

@media (max-width:1000px){
  .heroe__grid,.acceso__grid,.ducha__grid{ grid-template-columns:1fr }
  .orbita{ height:430px; order:-1 }
  .orbita__anillo{ width:140px; height:180px }
  .orbita__item{ transform:rotateY(calc(360deg / var(--n) * var(--k))) translateZ(230px) }
  .orbita__item img{ width:96px; height:96px }
  .datos__grid{ grid-template-columns:1fr 1fr }
  .datos__grid div:nth-child(2){ border-right:0 }
  .espacio--grande,.espacio--alto,.espacio--ancho,.espacio--chico{ grid-column:auto; grid-row:auto; min-height:300px }
  .espacio--chico img{ width:44%; top:auto; bottom:-6%; transform:none; right:-4% }
  .espacio--chico{ flex-direction:column; align-items:flex-start }
  .pasos3{ grid-template-columns:1fr }
  .pasos3::before{ display:none }
}
@media (max-width:640px){
  .heroe{ padding-top:calc(var(--barra) + 10px) }
  .orbita{ height:330px }
  .orbita__anillo{ width:112px; height:146px }
  .orbita__item{ transform:rotateY(calc(360deg / var(--n) * var(--k))) translateZ(170px); padding:10px 8px; border-radius:16px }
  .orbita__item img{ width:72px; height:72px }
  .orbita__item span{ font-size:11px }
  .orbita__nucleo{ width:110px; height:110px }
  .orbita__nucleo b{ font-size:16px }
  .salidas{ grid-template-columns:1fr }
  .datos__grid b{ font-size:44px }
  .claro,.proyecto,.claro + .seccion:not(.claro){ border-radius:28px 28px 0 0 }
  .espacio img{ width:52% }
}
@media (prefers-reduced-motion:reduce){ .orbita__anillo{ animation:none } }
/* la cinta no queda tapada por la sección clara que sube */
.cinta + .claro{ margin-top:0 }

/* ── ajustes tras la revisión visual (26-oct) ── */
.espacio__txt{ max-width:min(24ch, 56%) }
.espacio--alto img,.espacio--ancho img{ width:48%; right:-3%; bottom:-8% }
.espacio--chico{ flex-direction:column; align-items:flex-start }
.espacio--chico .espacio__txt{ max-width:46% }
.espacio--chico img{ width:300px; right:20%; top:50%; bottom:auto; transform:translateY(-50%) }
.espacio--chico .espacio__pie{ position:absolute; right:clamp(22px,2.6vw,34px); bottom:clamp(22px,2.6vw,34px); margin:0 }
.pie__gigante{ font-size:clamp(56px,12.6vw,196px) }
@media (max-width:1000px){
  .orbita{ order:0; height:400px; margin-top:10px }
  .espacio__txt,.espacio--chico .espacio__txt{ max-width:62% }
  .espacio--chico img{ width:44%; right:-4%; top:auto; bottom:-6%; transform:none }
  .espacio--chico .espacio__pie{ position:relative; right:auto; bottom:auto; margin-top:22px }
}
@media (max-width:640px){
  .orbita{ height:320px; margin-top:0 }
  .heroe{ min-height:auto }
  .heroe .entrada{ margin:20px 0 26px }
}

/* ═══════════════════════════════════════════════════════════════════════════
   27-oct · FOTOS REALES PRIMERO (dueño: «las imágenes HD del catálogo son lo más importante»)
   Arco (el marco en arco del catálogo) en la portada, vitrina horizontal y espacios con foto.
   ═══════════════════════════════════════════════════════════════════════════ */
/* arco de la portada */
.arco{ position:relative; width:100%; max-width:520px; justify-self:end; margin-top:10px }
.arco__linea{ position:absolute; inset:-14px -14px auto -14px; width:calc(100% + 28px); height:auto; z-index:0; pointer-events:none; overflow:visible }
.arco__linea path{ fill:none; stroke:var(--acc); stroke-width:1.4; stroke-dasharray:1700; stroke-dashoffset:1700; animation:arcoTraza 2.6s .4s var(--ease-out) forwards }
@keyframes arcoTraza{ to{ stroke-dashoffset:0 } }
.arco__marco{ position:relative; z-index:1; aspect-ratio:520/660; border-radius:999px 999px 26px 26px; overflow:hidden; background:var(--bg-2); box-shadow:0 60px 140px -40px rgba(0,0,0,.85), 0 0 0 1px rgba(196,218,246,.14) }
.arco__foto{ position:absolute; inset:0; opacity:0; transition:opacity 1.2s var(--ease-in-out); pointer-events:none }
.arco__foto.activo{ opacity:1; pointer-events:auto }
.arco__foto img{ width:100%; height:100%; object-fit:cover; transform:scale(1.12); transition:transform 7s linear }
.arco__foto.activo img{ transform:scale(1) }
.arco__marco::after{ content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, transparent 55%, rgba(3,13,28,.55)) }
.arco__ficha{ position:absolute; z-index:2; left:-34px; bottom:44px; display:grid; gap:4px; padding:16px 20px 16px 18px; min-width:230px; max-width:290px; border-radius:18px;
  background:color-mix(in srgb, var(--panel-solido) 80%, transparent); backdrop-filter:blur(18px) saturate(1.4); -webkit-backdrop-filter:blur(18px) saturate(1.4); border:1px solid var(--line-2); box-shadow:0 30px 60px -20px rgba(0,0,0,.6) }
.arco__ficha span{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--acc) }
.arco__ficha b{ font:600 19px/1.2 var(--f-display); letter-spacing:-.01em }
.arco__ficha a{ display:inline-flex; align-items:center; gap:8px; font-size:13.5px; color:var(--text-2); margin-top:4px }
.arco__ficha a svg{ width:15px; height:15px; transition:transform .3s var(--ease-out) }
.arco__ficha a:hover{ color:var(--acc) } .arco__ficha a:hover svg{ transform:translateX(4px) }
.arco__ficha.cambia{ animation:fichaCambia .7s var(--ease-out) }
@keyframes fichaCambia{ 0%{ opacity:0; transform:translateY(10px) } 100%{ opacity:1; transform:none } }
.arco__puntos{ position:absolute; z-index:2; right:20px; bottom:22px; display:flex; gap:6px }
.arco__puntos button{ width:30px; height:22px; display:grid; place-items:center }
.arco__puntos i{ display:block; width:100%; height:3px; border-radius:2px; background:rgba(255,255,255,.35); overflow:hidden; position:relative }
.arco__puntos button.activo i::after{ content:''; position:absolute; inset:0; background:var(--acc); transform-origin:left; animation:puntoArco 5.5s linear forwards }
@keyframes puntoArco{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }

/* órbita: tarjetas con foto (si hay pocas fotos) */
.orbita__item.con-foto{ padding:0; overflow:hidden; justify-content:flex-end }
.orbita__item.con-foto img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:0; filter:none }
.orbita__item.con-foto span{ position:relative; width:100%; padding:30px 10px 12px; background:linear-gradient(180deg, transparent, rgba(3,13,28,.85)) }

/* vitrina horizontal */
.vitrina{ position:relative; z-index:2; height:calc(var(--alto, 100vh)) }
.vitrina__fija{ position:sticky; top:0; height:100vh; display:flex; flex-direction:column; justify-content:center; gap:clamp(18px,3vh,34px); overflow:hidden; padding-top:var(--barra) }
.vitrina__cab{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap }
.vitrina__cab .t-l{ margin-top:14px; max-width:15ch }
.vitrina__ayuda{ font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--text-3) }
.vitrina__ayuda span{ color:var(--acc) }
.vitrina__ventana{ overflow:hidden }
.vitrina__pista{ display:flex; gap:clamp(16px,2vw,28px); padding:0 var(--gutter); width:max-content; will-change:transform }
.vitrina__panel{ position:relative; flex:none; width:min(64vw, 980px); height:min(62vh, 640px); border-radius:30px; overflow:hidden; isolation:isolate; display:block; background:var(--bg-2);
  box-shadow:0 50px 120px -50px rgba(0,0,0,.9), 0 0 0 1px rgba(196,218,246,.12) }
.vitrina__foto{ position:absolute; inset:0; z-index:-1 }
.vitrina__foto img{ width:100%; height:100%; object-fit:cover; transform:scale(1.08) translateX(var(--px, 0)); transition:transform 1.4s var(--ease-out) }
.vitrina__panel:hover .vitrina__foto img{ transform:scale(1.12) translateX(var(--px, 0)) }
.vitrina__panel::after{ content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(3,13,28,.82) 0%, rgba(3,13,28,.35) 42%, transparent 70%) }
.vitrina__txt{ position:absolute; left:clamp(22px,3vw,44px); bottom:clamp(22px,3vw,44px); max-width:min(420px, 70%); display:grid; gap:10px }
.vitrina__txt span.mono{ font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--acc) }
.vitrina__txt h3{ font:700 clamp(28px,3.2vw,52px)/1 var(--f-display); letter-spacing:-.035em }
.vitrina__txt p{ color:rgba(238,242,247,.82); font-size:16px }
.vitrina__ir{ display:inline-flex; align-items:center; gap:10px; margin-top:6px; height:46px; width:max-content; padding:0 20px; border-radius:999px; background:var(--acc); color:var(--acc-ink); font-weight:600; font-size:14.5px; transition:transform .35s var(--ease-out) }
.vitrina__ir svg{ width:16px; height:16px }
.vitrina__panel:hover .vitrina__ir{ transform:translateX(6px) }
.vitrina__progreso{ height:2px; background:var(--line); border-radius:2px; overflow:hidden }
.vitrina__progreso i{ display:block; height:100%; width:100%; background:var(--acc); transform-origin:left; transform:scaleX(var(--prog, 0)) }

/* espacios con foto */
.espacio--foto{ background:#051C36 }
.espacio--foto .espacio__foto{ position:absolute; inset:0; width:100%; height:100%; max-width:none; right:auto; bottom:auto; top:auto; object-fit:cover; opacity:1; transform:scale(1.02); z-index:0; transition:transform 1.4s var(--ease-out) }
.espacio--foto:hover .espacio__foto{ transform:scale(1.08) }
.espacio--foto::before{ content:''; position:absolute; inset:0; z-index:0; background:linear-gradient(180deg, rgba(3,13,28,.1) 30%, rgba(3,13,28,.86) 100%) }
.espacio--foto .espacio__n,.espacio--foto .espacio__txt,.espacio--foto .espacio__pie{ position:relative; z-index:1 }
.espacio--foto .espacio__txt{ max-width:min(30ch, 90%) }
.espacio--chico.espacio--foto .espacio__foto{ width:100%; transform:none; top:0 }
.espacio--chico.espacio--foto:hover .espacio__foto{ transform:scale(1.05) }

/* foto real de la cerradura en la consola */
.consola__foto{ position:absolute; right:-4%; bottom:-6%; width:44%; aspect-ratio:4/5; border-radius:24px; overflow:hidden; transform:rotate(-6deg); box-shadow:0 40px 80px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(196,218,246,.2); transition:transform .8s var(--ease-out) }
.consola__foto img{ width:100%; height:100%; object-fit:cover }
.consola:hover .consola__foto{ transform:rotate(-2deg) translateY(-8px) }

/* ducha: la foto real en arco y el termostato encima */
.ducha__escena{ position:relative }
.ducha__escena.con-foto{ padding:0 0 70px 0 }
.ducha__foto{ position:relative; aspect-ratio:4/5; border-radius:999px 999px 28px 28px; overflow:hidden; max-width:480px; box-shadow:0 60px 120px -40px rgba(0,0,0,.85), 0 0 0 1px rgba(196,218,246,.14) }
.ducha__foto img{ width:100%; height:100%; object-fit:cover }
.ducha__escena.con-foto .termostato{ position:absolute; right:-10px; bottom:0; width:62%; max-width:310px; margin:0;
  background:radial-gradient(circle, rgba(11,39,71,.96) 0%, rgba(5,19,39,.96) 62%, transparent 63%); filter:drop-shadow(0 30px 50px rgba(0,0,0,.6)) }
.ducha__escena.con-foto .termostato__lectura b{ font-size:clamp(44px,4.6vw,64px) }
.ducha__escena.con-foto .termostato__rango{ display:none }

@media (max-width:1000px){
  .arco{ justify-self:center; max-width:440px; margin:10px auto 0 }
  .arco__ficha{ left:-6px }
  .ducha__foto{ margin:0 auto }
}
@media (max-width:820px){
  .vitrina{ height:auto }
  .vitrina__fija{ position:relative; height:auto; padding:70px 0 40px }
  .vitrina__ventana{ overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch }
  .vitrina__ventana::-webkit-scrollbar{ display:none }
  .vitrina__pista{ transform:none!important }
  .vitrina__panel{ width:84vw; height:64vh; max-height:560px; scroll-snap-align:center; border-radius:24px }
  .vitrina__txt{ max-width:none; right:22px }
}
@media (max-width:640px){
  .arco{ max-width:340px }
  .arco__ficha{ position:relative; left:auto; bottom:auto; margin:-40px 14px 0; max-width:none }
  .arco__puntos{ bottom:auto; top:calc(100% - 118px) }
  .ducha__escena.con-foto .termostato{ width:56%; right:0 }
}
@media (prefers-reduced-motion:reduce){
  .vitrina{ height:auto } .vitrina__fija{ position:relative; height:auto; padding:70px 0 40px }
  .vitrina__ventana{ overflow-x:auto; scroll-snap-type:x mandatory } .vitrina__panel{ scroll-snap-align:center }
}
/* ajustes tras la prueba con fotos (27-oct) */
.espacio--foto .espacio__foto{ top:0; left:0; right:0; bottom:0 }
.vitrina + .claro{ margin-top:0 }
.vitrina__panel{ width:min(56vw, 900px) }
@media (max-width:820px){ .vitrina__panel{ width:84vw } }