/* ─────────────────────────────────────────────────────────────
   Villa Marena · Selector de acabados
   Tema: porcelana fría + un acento petróleo-cyan. Light lock.
   Radios: cards 20px · elementos internos 14px · botones/chips pill.
   ───────────────────────────────────────────────────────────── */
:root{
  --bg:#f4f7f8; --card:#ffffff; --ink:#0f1a20; --muted:#5b6b73; --line:#e1e8eb;
  --accent:#0d7e94; --accent-deep:#0a5f70; --accent-soft:#e3f1f4;
  --radius:20px; --radius-sm:14px;
  --shadow:0 24px 60px -28px rgba(15,42,53,.28);
  --shadow-sm:0 12px 32px -18px rgba(15,42,53,.22);
  --ease:cubic-bezier(.16,1,.3,1);
  --display:"Outfit",system-ui,sans-serif; --body:"Manrope",system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
html{scroll-behavior:smooth}
body{font-family:var(--body); color:var(--ink); line-height:1.55; background:var(--bg); min-height:100vh; padding:0 0 56px}

/* ── Toda la letra estilo "BULL": Anton, MAYÚSCULAS y amarillo ── */
body, body *:not(svg):not(path):not(use){
  font-family:"Anton",system-ui,sans-serif !important;
  text-transform:uppercase !important;
  color:#e8f318 !important;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}

.mockup-badge{position:fixed; top:14px; right:14px; z-index:50; font:700 10px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--accent-deep); background:rgba(255,255,255,.88); border:1px solid var(--line); padding:8px 14px; border-radius:999px; backdrop-filter:blur(8px)}

/* ── Reveals (solo se ocultan si JS confirmó que puede revelarlos) ── */
html.js-reveal .reveal{opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
html.js-reveal .reveal.is-in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none; transition:none}
  #ripples ellipse{animation:none !important}
}

/* ── Hero · video en la mitad derecha, resto degradado a negro ── */
.hero{position:relative; overflow:hidden; background:#05090c; min-height:min(92vh,860px); display:flex; align-items:center; padding:clamp(96px,13vw,150px) 28px clamp(72px,9vw,110px)}
/* El video sólo ocupa ~55% derecho: al no escalarse a todo el ancho se ve más nítido. */
.hero-bg-video{position:absolute; top:0; right:0; width:56%; height:100%; object-fit:cover; z-index:0; background:#05090c}
/* Degradado que funde el borde izquierdo del video hacia negro (y un toque abajo). */
.hero-veil{position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(90deg,#05090c 0%,#05090c 40%,rgba(5,9,12,.72) 52%,rgba(5,9,12,.28) 66%,rgba(5,9,12,0) 82%,rgba(5,9,12,.35) 100%),linear-gradient(0deg,rgba(5,9,12,.5) 0%,rgba(5,9,12,0) 38%)}
.hero-layout{position:relative; z-index:2; max-width:1180px; width:100%; margin:0 auto}
.hero-content{color:#fff; padding:0; max-width:620px}
.eyebrow{margin:0 0 16px; font-size:.72rem; letter-spacing:.28em; text-transform:uppercase; color:#7fd6b2; font-weight:700}
.hero-title{margin:0; font-family:var(--display); font-weight:700; font-size:clamp(2.8rem,6.8vw,5.2rem); letter-spacing:-.02em; line-height:.92; text-transform:uppercase; display:flex; flex-direction:column}
.hero-title span{display:block}
.hero-title span:last-child{color:#7fd6b2; font-weight:600; letter-spacing:.01em}
.hero-sub{margin:24px 0 0; max-width:42ch; font-size:clamp(1rem,1.4vw,1.12rem); line-height:1.6; color:rgba(255,255,255,.82)}
.hero-cta{display:inline-flex; align-items:center; gap:8px; margin-top:30px; font-weight:800; font-size:.9rem; letter-spacing:.02em; color:var(--ink); background:#fff; padding:15px 30px; border-radius:999px; text-decoration:none; transition:transform .18s var(--ease), box-shadow .18s var(--ease)}
.hero-cta:hover{transform:translateY(-2px); box-shadow:0 18px 40px -14px rgba(0,0,0,.5)}
.hero-cta:active{transform:translateY(0) scale(.98)}
/* ── Animación de entrada del hero ── */
@keyframes heroUp{from{opacity:0; transform:translateY(26px)}to{opacity:1; transform:none}}
@keyframes heroFade{from{opacity:0}to{opacity:1}}
.hero-content .eyebrow,.hero-title span,.hero-sub,.hero-cta{opacity:0; animation:heroUp .8s var(--ease) forwards}
.hero-content .eyebrow{animation-delay:.1s}
.hero-title span:first-child{animation-delay:.22s}
.hero-title span:last-child{animation-delay:.34s}
.hero-sub{animation-delay:.5s}
.hero-cta{animation-delay:.62s}
.hero-bg-video{opacity:0; animation:heroFade 1.2s var(--ease) .1s forwards}
@media (prefers-reduced-motion: reduce){
  .hero-content .eyebrow,.hero-title span,.hero-sub,.hero-cta,.hero-bg-video{opacity:1; animation:none}
}

/* ── Encabezados de sección ── */
.section-head,.mats-head{max-width:1180px; margin:0 auto 30px; padding:0 28px}
.section-head h2,.mats-head h2{margin:0; font-family:var(--display); font-weight:600; font-size:clamp(1.7rem,3.4vw,2.4rem); letter-spacing:-.025em; line-height:1.08}
.section-head p,.mats-head p{margin:12px 0 0; color:var(--muted); font-size:.98rem; max-width:56ch}

/* ── Materiales · video completo (a lo ancho) + esfera sincronizada ── */
.mats{margin-top:88px}
.mats-stage{max-width:1180px; margin:0 auto; padding:0 28px; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(24px,3.5vw,40px); align-items:start}
.mats-video{position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); background:#07191f; line-height:0}
.mats-video-el{display:block; width:100%; height:auto}
/* Tinte localizado sobre el AGUA de la alberca (la imagen mantiene proporción,
   así que los % siguen alineados en cualquier tamaño). */
.mats-video-tint{position:absolute; left:25.5%; top:35%; width:33%; height:23%; z-index:1; pointer-events:none; mix-blend-mode:color; opacity:.8; background:#2f8fb0; border-radius:6px; filter:blur(4px); transition:background .55s var(--ease), opacity .55s var(--ease)}
.mats-video-veil{position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(to top, rgba(7,25,31,.42) 0%, rgba(7,25,31,.02) 32%, transparent 100%)}
.mats-video-tag{position:absolute; left:20px; bottom:20px; z-index:3; font:800 .8rem/1 var(--body); letter-spacing:.08em; text-transform:uppercase; color:var(--accent-deep); background:rgba(255,255,255,.95); padding:11px 20px; border-radius:999px; box-shadow:0 8px 22px rgba(0,0,0,.28); transition:color .3s}

.mats-panel{display:flex; flex-direction:column; gap:18px}
.mats-side{display:flex; flex-direction:column; gap:18px}
.orb-float{position:relative; aspect-ratio:16/11; background:none; border:0; box-shadow:none; overflow:visible}
.orb-canvas{position:absolute; inset:0; width:100%; height:100%; display:block; cursor:grab; touch-action:none}
.orb-canvas.is-grabbing{cursor:grabbing}
.orb-hint{position:absolute; bottom:0; left:50%; transform:translateX(-50%); font-size:.66rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); pointer-events:none}

.finish-tabs{display:flex; gap:10px; flex-wrap:wrap}
.finish-tab{flex:1 1 auto; display:flex; align-items:center; gap:9px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm); padding:11px 14px; cursor:pointer; font:inherit; color:inherit; transition:transform .16s var(--ease), border-color .16s, box-shadow .16s}
.finish-tab:hover{transform:translateY(-2px); border-color:rgba(13,126,148,.45)}
.finish-tab.is-active{border-color:var(--accent); box-shadow:0 0 0 2px rgba(13,126,148,.2)}
.ft-dot{width:18px; height:18px; border-radius:50%; flex:none; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08), inset 0 -4px 7px rgba(0,0,0,.14)}
.ft-name{font-weight:800; font-size:.82rem; white-space:nowrap}
.ft-badge{margin-left:auto; font-size:.6rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}

.finish-info{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px 24px}
.fi-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.fi-badge{display:inline-block; font-size:.62rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-deep); background:var(--accent-soft); padding:5px 11px; border-radius:999px; margin-bottom:6px}
.fi-head h3{margin:0; font-family:var(--display); font-weight:600; font-size:1.3rem; letter-spacing:-.015em}
.fi-price{font-weight:800; font-size:1.15rem; color:var(--accent-deep); white-space:nowrap}
.fi-price small{font-weight:600; font-size:.72rem; color:var(--muted)}
.fi-desc{margin:12px 0 0; font-size:.9rem; color:var(--muted); line-height:1.55}
.fi-kpi{list-style:none; margin:16px 0 0; padding:16px 0 0; border-top:1px solid var(--line); display:grid; grid-template-columns:1fr 1fr; gap:12px 18px}
.fi-kpi span{display:block; font-size:.62rem; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); font-weight:700}
.fi-kpi b{font-size:.88rem}
.fi-pick{margin-top:18px; width:100%; font:inherit; font-weight:800; font-size:.86rem; color:#fff; background:var(--accent); border:0; border-radius:999px; padding:14px; cursor:pointer; transition:background .16s, transform .12s}
.fi-pick:hover{background:var(--accent-deep)}
.fi-pick:active{transform:scale(.99)}
.fi-pick.is-done{background:var(--accent-deep)}

/* ── Perfil del remate · imagen/video completo ── */
.edge-showcase{max-width:1240px; margin:96px auto 0; padding:0 28px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,420px); gap:56px; align-items:center}
.edge-media-full{position:relative; width:100%; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); background:#0b2730; line-height:0; justify-self:center}
.edge-video-full{display:block; width:100%; height:auto}
.edge-tag{position:absolute; left:18px; bottom:18px; z-index:2; font:800 .74rem/1 var(--body); letter-spacing:.1em; text-transform:uppercase; color:var(--accent-deep); background:rgba(255,255,255,.94); padding:10px 18px; border-radius:999px; box-shadow:0 6px 18px rgba(0,0,0,.18)}
.edge-panel h2{margin:0; font-family:var(--display); font-weight:600; font-size:clamp(1.6rem,3.2vw,2.3rem); letter-spacing:-.025em; line-height:1.08}
.edge-lead{margin:14px 0 24px; color:var(--muted); font-size:.96rem; max-width:48ch}
.edge-opts{display:flex; flex-direction:column; gap:12px}
.edge-opt{position:relative; display:flex; align-items:center; gap:16px; text-align:left; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm); padding:16px 18px; cursor:pointer; transition:transform .18s var(--ease), border-color .18s, box-shadow .18s; font:inherit; color:inherit}
.edge-opt:hover{transform:translateY(-2px); border-color:rgba(13,126,148,.45); box-shadow:var(--shadow-sm)}
.edge-opt.is-active{border-color:var(--accent); box-shadow:0 0 0 2px rgba(13,126,148,.2)}
.edge-opt:active{transform:scale(.99)}
.edge-opt svg{width:52px; height:30px; flex:none; color:#c9d4da; transition:color .18s}
.edge-opt svg path{fill:currentColor; stroke:rgba(15,26,32,.22); stroke-width:1.5}
.edge-opt.is-active svg{color:var(--accent)}
.edge-txt{flex:1}
.edge-txt b{display:block; font-size:.98rem; font-weight:800}
.edge-txt small{display:block; margin-top:3px; color:var(--muted); font-size:.8rem; line-height:1.45}
.edge-check{flex:none; width:22px; height:22px; border-radius:50%; background:var(--accent); color:#fff; font-size:12px; display:none; align-items:center; justify-content:center}
.edge-opt.is-active .edge-check{display:flex}

/* ── Configurador ── */
.studio-wrap{margin-top:96px}
.studio{max-width:1180px; margin:0 auto; padding:0 28px; display:grid; grid-template-columns:1.35fr 1fr; gap:24px; align-items:start}
.stage{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); overflow:hidden; position:sticky; top:16px}
.stage-toolbar{display:flex; justify-content:space-between; gap:10px; padding:14px 18px; border-bottom:1px solid var(--line); flex-wrap:wrap}
.stage-label{font:700 .7rem/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); align-self:center}
.seg{display:inline-flex; background:#eef3f5; border-radius:999px; padding:3px}
.seg-btn{border:0; background:none; font:inherit; font-size:.8rem; font-weight:700; color:var(--muted); padding:7px 16px; border-radius:999px; cursor:pointer; transition:background .15s, color .15s}
.seg-btn.active{background:var(--ink); color:#fff}
.stage-inner{position:relative}
#pool{display:block; width:100%; height:auto; background:#cfe6ef; transition:background .6s}
#water-surface,#coping,#coping-lip,#waterline{transition:fill .5s ease}
#ripples ellipse{animation:shimmer 6s ease-in-out infinite}
#ripples ellipse:nth-child(2){animation-delay:-2s} #ripples ellipse:nth-child(3){animation-delay:-4s}
@keyframes shimmer{0%,100%{transform:translateX(0);opacity:.16}50%{transform:translateX(14px);opacity:.32}}
.stage-caption{position:absolute; left:16px; bottom:16px; display:flex; gap:8px; flex-wrap:wrap}
.chip{font-size:.7rem; font-weight:700; color:#fff; background:rgba(10,63,75,.82); padding:6px 12px; border-radius:999px; backdrop-filter:blur(4px)}

.config{display:flex; flex-direction:column; gap:16px}
.config-block{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px}
.block-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px}
.block-head h3{margin:0; font-family:var(--display); font-weight:600; font-size:1.08rem; letter-spacing:-.01em}
.hint{font-size:.68rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; font-weight:700}

.swatches{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.swatches.sm{grid-template-columns:repeat(4,1fr)}
.swatch{position:relative; border:1px solid var(--line); border-radius:var(--radius-sm); padding:11px; background:#fff; cursor:pointer; text-align:left; transition:transform .16s var(--ease), border-color .16s, box-shadow .16s; display:flex; gap:11px; align-items:center; font:inherit; color:inherit}
.swatches.sm .swatch{flex-direction:column; text-align:center; gap:6px; padding:9px}
.swatch:hover{transform:translateY(-2px); border-color:rgba(13,126,148,.45)}
.swatch.active{border-color:var(--accent); box-shadow:0 0 0 2px rgba(13,126,148,.2)}
.swatch .dot{width:38px; height:38px; border-radius:12px; flex:none; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08), inset 0 -6px 10px rgba(0,0,0,.12)}
.swatches.sm .swatch .dot{width:100%; height:26px; border-radius:8px}
.swatch .meta{display:flex; flex-direction:column; gap:2px; min-width:0}
.swatch .name{font-weight:800; font-size:.85rem}
.swatch .price{font-size:.73rem; color:var(--muted)}
.swatch .tick{position:absolute; top:8px; right:8px; width:17px; height:17px; border-radius:50%; background:var(--accent); color:#fff; font-size:10px; display:none; align-items:center; justify-content:center}
.swatch.active .tick{display:flex}
.block-desc{margin:12px 0 0; font-size:.84rem; color:var(--muted); min-height:1.1em}

/* Resumen */
.summary{background:linear-gradient(165deg,#0c6e81,#083b49); color:#eaf6f8; border-radius:var(--radius); padding:22px; box-shadow:var(--shadow)}
.sum-head{font-family:var(--display); font-weight:600; font-size:1.2rem; color:#fff; margin-bottom:14px; letter-spacing:-.01em}
.sum-chips{display:flex; flex-direction:column; gap:8px; margin-bottom:14px}
.sum-chip{display:flex; align-items:baseline; justify-content:space-between; gap:12px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); border-radius:var(--radius-sm); padding:10px 14px}
.sum-chip small{font-size:.64rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(234,246,248,.72); font-weight:700}
.sum-chip b{font-size:.9rem; color:#fff; text-align:right}
.cost-list{border-top:1px solid rgba(255,255,255,.16); padding-top:10px; margin-bottom:6px}
.cost-row{display:flex; justify-content:space-between; gap:12px; padding:5px 0; font-size:.82rem}
.cost-row span{color:rgba(234,246,248,.72)}
.summary-actions{display:flex; gap:10px; margin-top:16px}
.btn{flex:1; font:inherit; font-weight:800; font-size:.86rem; border-radius:999px; padding:13px; cursor:pointer; transition:transform .12s, filter .16s; border:1px solid transparent}
.btn.solid{background:#fff; color:var(--accent-deep)}
.btn.solid:hover{filter:brightness(.96)}
.btn.solid:active{transform:scale(.98)}
.summary-note{margin:14px 0 0; font-size:.7rem; color:rgba(234,246,248,.55); line-height:1.4}

.toast{position:fixed; bottom:22px; left:50%; transform:translateX(-50%); background:var(--ink); color:#fff; padding:12px 22px; border-radius:999px; font-size:.86rem; z-index:9999; box-shadow:0 16px 40px rgba(0,0,0,.3)}

/* ── Responsive ── */
@media (max-width:980px){
  .studio{grid-template-columns:1fr}
  .stage{position:relative; top:0}
  .mats-stage{grid-template-columns:1fr}
  .mats-panel{gap:24px}
}
@media (max-width:820px){
  .mats{margin-top:64px}
  .edge-showcase{margin-top:72px; grid-template-columns:1fr; gap:32px}
  .edge-media-full{order:-1; max-width:340px}
  .studio-wrap{margin-top:72px}
  .hero{min-height:min(88vh,720px); padding:104px 24px 72px}
  .hero-bg-video{width:100%; right:auto; left:0}
  .hero-veil{background:linear-gradient(180deg,rgba(5,9,12,.4) 0%,rgba(5,9,12,.2) 30%,rgba(5,9,12,.72) 74%,#05090c 100%)}
  .section-head,.mats-head{padding:0 24px}
  .mats-stage,.studio,.edge-showcase{padding-left:24px; padding-right:24px}
  .finish-tabs{flex-direction:column}
  .ft-name{white-space:normal}
}