/* ===== Área Vinyl — Design tokens ===== */
:root{
  --navy:#08234C;
  --navy-light:#123566;
  --cream:#F6F4EF;
  --line:#E4E0D6;
  --text:#1B1F27;
  --muted:#6B6F76;
  --gold:#B08D57;
  --radius:10px;
  --maxw:1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cream);
  color:var(--text);
  font-family:'Work Sans', -apple-system, sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:'Fraunces', Georgia, serif;
  font-weight:500;
  margin:0;
  color:var(--navy);
}
a{color:inherit; text-decoration:none;}
img{display:block; max-width:100%;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
.eyebrow{
  font-size:12px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:600;
  margin-bottom:10px;
  display:block;
}

/* Nav */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(246,244,239,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.nav .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 24px;
}
.nav .logo{font-family:'Fraunces',serif; font-size:20px; font-weight:600; color:var(--navy);}
.nav ul{display:flex; gap:32px; list-style:none; margin:0; padding:0;}
.nav a{font-size:14px; color:var(--text); transition:color .2s;}
.nav a:hover{color:var(--gold);}
.nav-cta{
  background:var(--navy) !important; color:#fff !important; padding:10px 20px;
  border-radius:var(--radius); font-size:13px; font-weight:600;
  display:inline-block;
}
.nav-cta:visited, .nav-cta:hover, .nav-cta:active{color:#fff !important;}
.nav-toggle{display:none; background:none; border:none; cursor:pointer;}
@media (max-width:820px){
  .nav ul{position:fixed; top:64px; left:0; right:0; background:var(--cream);
    flex-direction:column; padding:20px 24px; gap:18px; border-bottom:1px solid var(--line);
    transform:translateY(-140%); transition:transform .25s ease; }
  .nav ul.open{transform:translateY(0);}
  .nav-toggle{display:block;}
  .nav-cta{display:none;}
}

/* Hero */
.hero{
  background:radial-gradient(circle at 20% 20%, var(--navy-light), var(--navy) 70%);
  color:#fff;
  padding:110px 24px 90px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background:repeating-linear-gradient(115deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 40px);
  pointer-events:none;
}
.hero .tag{color:#C9B896; font-size:13px; letter-spacing:0.1em; text-transform:uppercase; margin-bottom:18px; display:block;}
.hero h1{color:#fff; font-size:clamp(30px,5vw,52px); line-height:1.15; max-width:760px; margin:0 auto 22px;}
.hero p.sub{color:#B9C3D6; font-size:16px; max-width:520px; margin:0 auto 34px;}
.hero-ctas{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}
.btn{
  padding:13px 26px; border-radius:var(--radius); font-size:14px; font-weight:600;
  cursor:pointer; transition:transform .15s, opacity .15s; border:1px solid transparent;
  display:inline-block;
}
.btn:hover{transform:translateY(-1px);}
.btn-solid{background:#fff; color:var(--navy);}
.btn-outline{background:transparent; color:#fff; border-color:rgba(255,255,255,0.5);}
.btn-navy{background:var(--navy); color:#fff;}
.btn-navy:hover{opacity:.92;}

/* Sections */
section{padding:72px 0;}
.section-head{max-width:560px; margin-bottom:40px;}
.section-head p{color:var(--muted); font-size:15px; margin-top:10px;}

/* Stats */
.stats-hero{
  background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:32px; text-align:center; margin-bottom:20px;
}
.stats-hero .num{font-family:'Fraunces',serif; font-size:44px; color:var(--navy); font-weight:600;}
.stats-hero .desc{color:var(--muted); font-size:14px; margin-top:6px;}
.stats-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.stat-card{background:#fff; border:1px solid var(--line); border-radius:12px; padding:22px 16px; text-align:center;}
.stat-card .num{font-family:'Fraunces',serif; font-size:24px; color:var(--navy); font-weight:600;}
.stat-card .lbl{font-size:12px; color:var(--muted); margin-top:6px;}
@media (max-width:700px){.stats-grid{grid-template-columns:1fr;}}

/* Proceso */
.proceso-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.proceso-card{border:1px solid var(--line); border-radius:12px; padding:24px; background:#fff;}
.proceso-card .step{font-family:'Fraunces',serif; color:var(--gold); font-size:14px; font-weight:600;}
.proceso-card h3{font-size:16px; margin:10px 0 6px;}
.proceso-card p{font-size:13px; color:var(--muted); margin:0;}
@media (max-width:700px){.proceso-grid{grid-template-columns:1fr;}}

/* Showroom filters */
.filters{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:28px;}
.filter-btn{
  border:1px solid var(--line); background:#fff; padding:9px 18px;
  border-radius:30px; font-size:13px; color:var(--muted); cursor:pointer; transition:all .15s;
}
.filter-btn.active{background:var(--navy); color:#fff; border-color:var(--navy);}

.gallery-group{margin-bottom:44px;}
.gallery-group h3{font-size:18px; margin-bottom:14px; display:flex; align-items:center; gap:10px;}
.gallery-group h3::after{content:""; flex:1; height:1px; background:var(--line);}
.gallery-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
@media (max-width:700px){.gallery-grid{grid-template-columns:1fr 1fr;}}

.photo-slot{
  aspect-ratio:4/3; border-radius:12px; background:#fff;
  border:1.5px dashed var(--line); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:8px; color:var(--muted);
}
.photo-slot svg{width:26px; height:26px; opacity:.5;}
.photo-slot span{font-size:11px;}

/* Before/After slider */
.ba-wrap{position:relative; border-radius:14px; overflow:hidden; aspect-ratio:16/9;
  border:1px solid var(--line); user-select:none; max-width:820px; margin:0 auto;}
.ba-before,.ba-after{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:13px; letter-spacing:.08em; text-transform:uppercase;
}
.ba-before{background:#D8D3C6; color:#6B6357;}
.ba-after{background:#EFF3EE; color:#3C5A48;}
.ba-after-clip{position:absolute; inset:0; overflow:hidden;}
.ba-handle{
  position:absolute; top:0; bottom:0; width:3px; background:#fff;
  box-shadow:0 0 0 1px rgba(0,0,0,0.08); cursor:ew-resize;
}
.ba-handle::after{
  content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:38px; height:38px; border-radius:50%; background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.ba-handle-icon{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2;
  font-size:14px; color:var(--navy); pointer-events:none;
}

/* Nosotros */
.team-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:28px;}
@media (max-width:820px){.team-grid{grid-template-columns:repeat(2,1fr);}}
.team-card{text-align:center;}
.team-photo{
  width:100%; aspect-ratio:1; border-radius:14px; background:#E3DFD3;
  display:flex; align-items:center; justify-content:center; margin-bottom:12px; color:var(--muted);
}
.team-photo.pending{border:1.5px dashed var(--line); background:#fff; flex-direction:column; gap:6px;}
.team-photo svg{width:26px; height:26px; opacity:.55;}
.team-photo.pending span{font-size:10px;}
.team-card h4{font-size:15px; margin:0; color:var(--text);}
.team-card .role{font-size:12px; color:var(--muted); margin-top:2px;}
.team-card .note{font-size:11px; color:var(--gold); margin-top:4px;}

.cert-banner{
  background:var(--navy); border-radius:14px; padding:26px; display:flex;
  align-items:center; gap:18px; color:#fff;
}
.cert-banner .icon{
  width:56px; height:56px; border-radius:10px; background:rgba(255,255,255,0.12);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.cert-banner h4{color:#fff; font-size:15px; margin:0 0 4px; font-family:'Work Sans',sans-serif; font-weight:600;}
.cert-banner p{color:#B9C3D6; font-size:12.5px; margin:0;}

/* Footer */
footer{background:var(--navy); color:#fff; padding:44px 0 28px;}
footer .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px;}
footer .brand{font-family:'Fraunces',serif; font-size:18px; font-weight:600;}
footer .tagline{color:#B9C3D6; font-size:12.5px; margin-top:6px; max-width:280px;}
footer .contact{font-size:13px; color:#D8DEE9; display:flex; flex-direction:column; gap:8px; align-items:flex-end;}
footer .contact a{display:flex; align-items:center; gap:8px;}
footer .copy{border-top:1px solid rgba(255,255,255,0.12); margin-top:28px; padding-top:18px;
  text-align:center; font-size:11.5px; color:#8C99AF;}
@media (max-width:700px){footer .wrap{flex-direction:column;} footer .contact{align-items:flex-start;}}