/* =========================================================
   ALQEST · COQUETTE — SHOWROOM
   Laptop + celular
   ========================================================= */
:root{
  --cream:#f3eadc;
  --sand:#e8dac5;
  --sand-2:#dccab0;
  --stone:#cdbb9f;
  --ink:#3a2c22;
  --ink-soft:#7a6553;
  --gold:#b08d57;
  --nav-h:76px;
  --serif:"Cormorant Garamond", "Didot", "Bodoni 72", Georgia, serif;
  --sans:"Jost", "Helvetica Neue", Arial, sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--cream);-webkit-text-size-adjust:100%}
body{
  min-height:100vh;min-height:100dvh;
  font-family:var(--sans);color:var(--ink);
  overflow-x:hidden;
  padding-bottom:calc(var(--nav-h) + 24px + env(safe-area-inset-bottom));
  -webkit-tap-highlight-color:transparent;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
[hidden]{display:none!important}

/* ================= FONDO SHOWROOM ================= */
.room{position:fixed;inset:0;z-index:-1;overflow:hidden;
  background:linear-gradient(180deg,#e9ddca 0%,#f1e7d8 18%,#efe3d1 50%,#e7d7bf 66%);
}
.ceiling{position:absolute;left:0;right:0;top:0;height:16%;
  background:linear-gradient(180deg,#e2d4bf,#ebdfcd);
  box-shadow:0 2px 0 rgba(255,255,255,.5), 0 8px 24px rgba(120,95,60,.08);
}
.skylight{position:absolute;top:0;left:50%;width:min(70vw,900px);height:16%;transform:translateX(-50%);
  clip-path:polygon(4% 0,96% 0,88% 100%,12% 100%);
  background:linear-gradient(180deg,#fffefb,#fbf6ec);
  box-shadow:inset 0 0 40px rgba(255,255,255,1);
}
.skylight-glass{position:absolute;inset:0;
  background:
    repeating-linear-gradient(90deg,transparent 0 calc(25% - 2px),rgba(190,170,140,.35) calc(25% - 2px) 25%),
    linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,250,240,.7));
}
.beam{position:absolute;top:15%;left:50%;height:70%;transform:translateX(-50%);
  background:linear-gradient(180deg,rgba(255,253,246,.85),rgba(255,251,240,0));
  filter:blur(18px);pointer-events:none;
}
.beam-1{width:min(62vw,800px);clip-path:polygon(8% 0,92% 0,100% 100%,0 100%);opacity:.55}
.beam-2{width:min(30vw,380px);clip-path:polygon(15% 0,85% 0,100% 100%,0 100%);opacity:.6}
.wall-glow{position:absolute;left:50%;top:30%;width:120vw;height:60%;transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 40%,rgba(255,252,244,.8),rgba(255,252,244,0) 60%);
}
.floor{position:absolute;left:0;right:0;bottom:0;height:34%;
  background:linear-gradient(180deg,#dfcdb2 0%,#eadbc4 30%,#e6d6be 100%);
  border-top:1px solid rgba(255,255,255,.6);
  box-shadow:0 -1px 0 rgba(160,135,100,.25);
}
.floor-shine{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(255,255,255,0) 10%,rgba(255,255,255,.35) 50%,rgba(255,255,255,0) 90%);
  mix-blend-mode:soft-light;
}
.floor-beam{position:absolute;left:50%;top:0;width:min(70vw,880px);height:100%;transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 30%,rgba(255,253,246,.75),rgba(255,253,246,0) 65%);
}
.plant{position:absolute;right:max(1.5vw,10px);bottom:8%;height:min(48vh,430px);width:auto;
  filter:drop-shadow(0 18px 18px rgba(90,70,40,.18));
}

/* ================= ENCABEZADO ================= */
.top{position:relative;padding:22px 20px 6px;text-align:center}
.logo{font-family:var(--serif);font-weight:500;font-size:clamp(46px,7vw,82px);line-height:.95;letter-spacing:.01em;color:var(--ink)}
.sub{font-size:11px;letter-spacing:.55em;padding-left:.55em;color:var(--ink-soft);margin-top:6px}
.view-title{font-family:var(--serif);font-style:italic;font-size:clamp(20px,2.4vw,26px);color:var(--gold);margin-top:6px}
.back-btn{position:absolute;left:16px;top:18px;z-index:5;
  padding:10px 16px;border-radius:999px;font-size:14px;font-weight:500;
  background:rgba(255,255,255,.45);
  -webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 6px 20px rgba(110,85,55,.14), inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform .2s, background .2s;
}
.back-btn:hover{background:rgba(255,255,255,.7);transform:translateY(-1px)}

/* ================= LAYOUT ================= */
/* IMPORTANTE: .layout, .stage y .display NO deben tener z-index/transform/opacity,
   así la foto con fondo blanco se "funde" con el showroom (mix-blend-mode). */
.layout{display:grid;grid-template-columns:210px minmax(0,1fr) 210px;gap:24px;
  max-width:1120px;margin:0 auto;padding:0 28px;
}
.stage{display:flex;flex-direction:column;align-items:center;min-width:0}

.display{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;
  padding-top:8px;
}
.hero{display:block;
  height:clamp(230px,48vh,500px);width:auto;max-width:100%;object-fit:contain;
  mix-blend-mode:multiply;
  animation:bob 5s ease-in-out infinite;
  position:relative;
  margin-bottom:-26px;
}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -12px}}

.hero-shadow{width:min(46%,320px);height:26px;margin-top:6px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(80,55,30,.38),rgba(80,55,30,0) 70%);
  filter:blur(4px);
  animation:shadow 5s ease-in-out infinite;
  position:relative;
}
@keyframes shadow{0%,100%{scale:1;opacity:1}50%{scale:.86;opacity:.75}}

/* Base baja de piedra */
.pedestal{position:relative;width:min(72%,460px);height:44px;margin-top:-22px;
  border-radius:0 0 50% 50% / 0 0 22px 22px;
  background:linear-gradient(90deg,#bfac90 0%,#dcccb3 30%,#e6d8c3 50%,#d6c5aa 72%,#b9a588 100%);
  box-shadow:0 22px 30px -10px rgba(90,65,35,.3);
}
.pedestal-top{position:absolute;left:0;right:0;top:-22px;height:44px;border-radius:50%;
  background:
    radial-gradient(ellipse at 40% 35%,rgba(255,255,255,.55),rgba(255,255,255,0) 55%),
    radial-gradient(circle at 20% 60%,rgba(150,125,95,.12) 0 2px,transparent 3px),
    radial-gradient(circle at 70% 40%,rgba(150,125,95,.12) 0 2px,transparent 3px),
    linear-gradient(180deg,#ece1cf,#ddcdb4);
  box-shadow:inset 0 -2px 4px rgba(120,95,60,.2), inset 0 2px 2px rgba(255,255,255,.7);
}

/* Barra de info + WhatsApp */
.info-bar{margin-top:28px;display:flex;align-items:center;gap:18px;
  padding:12px 12px 12px 24px;border-radius:999px;max-width:100%;
  background:rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 10px 30px rgba(110,85,55,.15), inset 0 1px 0 rgba(255,255,255,1);
}
.info-text{min-width:0}
.info-name{font-family:var(--serif);font-weight:600;font-size:clamp(20px,2.1vw,26px);line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.info-meta{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-soft);margin-top:3px}
.info-meta strong{color:var(--ink);font-weight:500}
.sep{opacity:.5}
.dot{width:10px;height:10px;border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.9)}
.info-desc{margin-top:12px;max-width:520px;text-align:center;font-size:13.5px;line-height:1.5;color:var(--ink-soft);padding:0 10px}

.wa-btn{flex-shrink:0;display:inline-flex;align-items:center;gap:8px;
  padding:13px 20px;border-radius:999px;text-decoration:none;
  font-size:14.5px;font-weight:500;color:#fff;
  background:linear-gradient(180deg,#2bc76a,#1a9c50);
  box-shadow:0 8px 20px rgba(26,156,80,.35), inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .2s, box-shadow .2s;
}
.wa-btn svg{width:20px;height:20px}
.wa-btn:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(26,156,80,.4), inset 0 1px 0 rgba(255,255,255,.35)}

/* ================= TARJETAS FLOTANTES ================= */
.cards{display:flex;flex-direction:column;gap:16px;
  max-height:calc(100dvh - 150px - var(--nav-h));overflow-y:auto;
  padding:14px 6px 30px;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(180deg,#000 85%,transparent);mask-image:linear-gradient(180deg,#000 85%,transparent);
}
.cards::-webkit-scrollbar{display:none}
.card{position:relative;display:block;width:100%;text-align:left;
  padding:10px 10px 12px;border-radius:22px;
  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 10px 26px rgba(110,85,55,.14), inset 0 1px 0 rgba(255,255,255,1);
  animation:float 6s ease-in-out infinite, cardIn .6s ease both;
  transition:box-shadow .25s, background .25s;
}
.card:hover{background:rgba(255,255,255,.78);box-shadow:0 16px 32px rgba(110,85,55,.2), inset 0 1px 0 #fff}
.card:hover .card-img{scale:1.05}
.card-img{display:block;width:100%;aspect-ratio:1/1;object-fit:contain;
  border-radius:16px;background:#fff;mix-blend-mode:multiply;transition:scale .35s}
.card-name{font-family:var(--serif);font-weight:600;font-size:16.5px;line-height:1.15;margin:8px 4px 2px}
.card-price{font-size:12.5px;color:var(--ink-soft);margin:0 4px}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -6px}}
@keyframes cardIn{from{opacity:0;scale:.92}to{opacity:1;scale:1}}

.empty{text-align:center;font-family:var(--serif);font-size:24px;font-style:italic;color:var(--ink-soft);margin-top:12vh}

/* ================= LIQUID GLASS NAV ================= */
.glass-nav{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%);
  z-index:20;display:flex;gap:6px;padding:7px;border-radius:32px;
  width:max-content;max-width:calc(100vw - 20px);
  background:rgba(255,255,255,.28);
  -webkit-backdrop-filter:blur(28px) saturate(190%);backdrop-filter:blur(28px) saturate(190%);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 14px 40px rgba(100,75,45,.2), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.35);
}
.glass-btn{display:flex;align-items:center;justify-content:center;gap:7px;
  padding:13px 20px;border-radius:26px;font-size:14.5px;font-weight:500;letter-spacing:.02em;
  background:rgba(255,255,255,.22);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
  transition:background .25s, border-color .25s, transform .2s, box-shadow .25s;
}
.glass-btn:hover{background:rgba(255,255,255,.5);transform:translateY(-1px)}
.glass-btn.active{
  background:rgba(255,255,255,.92);border:1.5px solid #fff;
  box-shadow:0 6px 18px rgba(100,75,45,.2), inset 0 1px 0 #fff, 0 0 0 1px rgba(176,141,87,.35);
}
.c{width:10px;height:10px;border-radius:50%;flex-shrink:0;box-shadow:0 0 0 1.5px rgba(255,255,255,.95)}
.c-rojas,.dot.rojas{background:#b3202a}
.c-negras,.dot.negras{background:#1c1a1a}
.c-blancas,.dot.blancas{background:#e9dccb}
.c-colores,.dot.colores{background:conic-gradient(#1f2f57,#2c4a7a,#a8692f,#1f2f57)}
.c-cafes,.dot.cafes{background:#8a5a32}

/* ================= LAPTOP BAJITA ================= */
@media (min-width:901px) and (max-height:760px){
  .top{padding-top:14px}
  .logo{font-size:52px}
  .hero{height:clamp(210px,42vh,420px)}
  .info-bar{margin-top:22px}
  .info-desc{display:none}
}

/* ================= TABLET / CELULAR ================= */
@media (max-width:900px){
  :root{--nav-h:64px}
  .layout{display:flex;flex-direction:column;padding:0;gap:0}
  .stage{order:1;padding:0 16px}
  .cards-left{order:2}
  .cards-right{display:none}
  .top{padding:18px 16px 4px}
  .back-btn{position:static;display:inline-block;margin-bottom:10px;font-size:13px;padding:8px 14px}
  .top:has(.back-btn:not([hidden])){text-align:center}
  .hero{height:clamp(220px,40vh,380px);margin-bottom:-20px}
  .pedestal{width:min(80%,340px);height:34px}
  .pedestal-top{height:36px;top:-18px}
  .info-bar{width:100%;max-width:520px;padding:10px 10px 10px 18px;gap:10px;margin-top:22px}
  .info-name{font-size:19px;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .wa-btn{padding:12px 14px;font-size:13.5px}
  .plant{height:30vh;right:-34px;bottom:36%;opacity:.85}

  /* Tarjetas en tira horizontal deslizable */
  .cards{flex-direction:row;max-height:none;overflow-x:auto;overflow-y:visible;
    gap:12px;padding:20px 16px 18px;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;-webkit-mask-image:none;mask-image:none;
  }
  .card{flex:0 0 138px;scroll-snap-align:start;border-radius:20px;padding:8px 8px 10px}
  .card-name{font-size:15px}
}
@media (max-width:480px){
  .wa-btn{flex-direction:column;gap:2px;padding:9px 14px;font-size:12px;line-height:1.1;text-align:center}
  .wa-btn svg{width:20px;height:20px}
  .glass-nav{gap:3px;padding:5px;border-radius:26px;width:calc(100vw - 16px)}
  .glass-btn{flex:1;flex-direction:column;gap:4px;padding:8px 2px;font-size:12px;border-radius:21px}
  .info-desc{font-size:13px}
}

@media (prefers-reduced-motion:reduce){
  .hero,.hero-shadow,.card{animation:none}
}