/* ==========================================================================
   Plis Plas Playa — estilos
   ========================================================================== */

:root{
  --navy: #12314f;
  --navy-deep: #0b2138;
  --gold: #e5a13a;
  --gold-deep: #c9832038;
  --cream: #f7ecda;
  --cream-soft: #fbf5ea;
  --white: #ffffff;
  --ink: #16324f;
  --text-soft: #4d5d6e;

  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --container: 1180px;
  --radius: 14px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream-soft);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
h1,h2,h3{ font-family: var(--serif); font-weight:600; margin:0 0 .5em; line-height:1.15; }
p{ margin:0 0 1em; line-height:1.7; color: var(--text-soft); }
a{ color:inherit; text-decoration:none; }
.wrap{ max-width: var(--container); margin: 0 auto; padding: 0 24px; position:relative; z-index:2; }
.center{ text-align:center; }

.eyebrow{
  font-family: var(--sans);
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:.75rem;
  font-weight:600;
  color: var(--gold);
  margin-bottom: 14px;
}

.lead{ font-size:1.1rem; max-width: 640px; }
.center.lead{ margin-left:auto; margin-right:auto; }

/* -------- reveal on scroll -------- */
.reveal{
  opacity:0;
  transform: translateY(24px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.in-view{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* -------- buttons -------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  padding: 15px 30px;
  border-radius: 999px;
  font-weight:600;
  font-size:.95rem;
  letter-spacing:.02em;
  cursor:pointer;
  border: 2px solid transparent;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
  white-space:nowrap;
}
.btn:hover{ transform: translateY(-2px); }
.btn-gold{ background: var(--gold); color: var(--navy-deep); box-shadow: 0 10px 24px -8px rgba(229,161,58,.6); }
.btn-gold:hover{ background:#f0ae49; }
.btn-navy{ background: var(--navy); color: var(--white); }
.btn-navy:hover{ background: var(--navy-deep); }
.btn-outline{ border-color: rgba(255,255,255,.7); color:var(--white); }
.btn-outline:hover{ background: rgba(255,255,255,.12); }
.btn-outline-light{ border-color: rgba(255,255,255,.55); color: var(--white); }
.btn-outline-light:hover{ background: rgba(255,255,255,.14); }
.btn-large{ padding: 18px 38px; font-size:1.05rem; }
.btn-small{ padding: 10px 20px; font-size:.82rem; }

.cta-row{ display:flex; gap:16px; flex-wrap:wrap; margin-top: 28px; }
.cta-row.center{ justify-content:center; }

.link-underline{
  font-weight:600;
  border-bottom: 2px solid var(--gold);
  padding-bottom:2px;
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position: fixed;
  top:0; left:0; right:0;
  z-index: 100;
  padding: 20px 0;
  transition: background .35s var(--ease), padding .35s var(--ease), box-shadow .35s var(--ease);
}
.site-header.scrolled,
.site-header.solid{
  background: rgba(247,236,218,.92);
  backdrop-filter: blur(10px);
  padding: 12px 0;
  box-shadow: 0 4px 24px rgba(18,49,79,.08);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap: 24px; }

.brand{ display:flex; align-items:center; }
.brand-logo{
  height: 46px; width:auto; border-radius:50%;
  box-shadow: 0 6px 18px rgba(11,33,56,.18);
  transition: height .35s var(--ease);
}
.site-header.scrolled .brand-logo,
.site-header.solid .brand-logo{ height: 40px; }

.main-nav{ display:flex; gap: 30px; margin-left:auto; }
.main-nav a{
  font-size:.9rem; font-weight:500;
  color: var(--navy);
  position:relative;
  padding: 4px 0;
}
.site-header:not(.scrolled):not(.solid) .main-nav a{ color: var(--white); text-shadow: 0 1px 5px rgba(0,0,0,.4); }
.main-nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background: var(--gold); transform: scaleX(0); transform-origin:left;
  transition: transform .25s var(--ease);
}
.main-nav a:hover::after{ transform: scaleX(1); }
.main-nav a.active::after{ transform: scaleX(1); background: var(--gold); }

.nav-toggle{ display:none; background:none; border:0; width:34px; height:26px; flex-direction:column; justify-content:space-between; cursor:pointer; padding:0; }
.nav-toggle span{ display:block; height:2px; background: var(--navy); border-radius:2px; }
.site-header:not(.scrolled):not(.solid) .nav-toggle span{ background: var(--white); }

@media (max-width: 920px){
  .main-nav{ position:fixed; top:0; right:0; height:100vh; width:min(320px,80vw);
    background: var(--cream); flex-direction:column; padding: 100px 32px; gap:24px;
    transform: translateX(100%); transition: transform .35s var(--ease); box-shadow: -10px 0 30px rgba(0,0,0,.15); }
  .main-nav.open{ transform: translateX(0); }
  .main-nav a{ color: var(--navy) !important; text-shadow:none !important; font-size:1.1rem; }
  .header-inner .btn-navy{ display:none; }
  .nav-toggle{ display:flex; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative;
  min-height: 100svh;
  display:flex;
  align-items:center;
  overflow:hidden;
  color: var(--white);
}
.hero-media{ position:absolute; inset:0; z-index:0; background: var(--navy-deep); }
.hero-video{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.hero-poster-mobile{ display:none; width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.hero-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(11,33,56,.55) 0%, rgba(11,33,56,.35) 40%, rgba(11,33,56,.75) 100%);
}
@media (max-width: 700px){
  .hero-video{ display:none; }
  .hero-poster-mobile{ display:block; }
}
/* the scroll hint is decorative only — hide it whenever the viewport is too
   short or too narrow for it to reliably clear the hero copy/buttons */
@media (max-width: 700px), (max-height: 760px){
  .scroll-cue{ display:none; }
}


.hero-content{ position:relative; z-index:2; padding-top: 100px; }
.hero h1{ font-size: clamp(2.2rem, 5.5vw, 4rem); color:var(--white); max-width: 16ch; }
.hero h1 em{ font-style:italic; color: var(--gold); }
.hero-copy{ color: rgba(255,255,255,.88); font-size:1.15rem; max-width: 46ch; }

.scroll-cue{
  position:absolute; bottom: 32px; left:50%; transform:translateX(-50%);
  width:26px; height:42px; border:2px solid rgba(255,255,255,.6); border-radius:20px; z-index:2;
}
.scroll-cue span{
  position:absolute; top:6px; left:50%; width:4px; height:8px; margin-left:-2px;
  background: var(--gold); border-radius:2px; animation: scroll-cue 1.8s infinite;
}
@keyframes scroll-cue{ 0%{ opacity:1; transform:translateY(0);} 70%{opacity:0; transform:translateY(14px);} 100%{opacity:0;} }

/* ==========================================================================
   Trust strip
   ========================================================================== */
.trust-strip{ background: var(--navy); color: var(--white); padding: 56px 0; }
.trust-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 36px; }
.trust-item{ text-align:center; }
.trust-item svg{ width:44px; height:44px; color: var(--gold); margin-bottom:14px; }
.trust-item h3{ color:var(--white); font-size:1.1rem; margin-bottom:8px; }
.trust-item p{ color: rgba(255,255,255,.72); font-size:.92rem; margin:0; }
@media (max-width: 860px){ .trust-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px){ .trust-grid{ grid-template-columns: 1fr; } }

/* ==========================================================================
   Parallax sections (generic)
   ========================================================================== */
.parallax-section{
  position:relative;
  min-height: 78vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  color: var(--white);
}
.parallax-bg{
  position:absolute;
  top:-15%; left:0; right:0; height:130%;
  background-size: cover;
  background-position: center;
  will-change: transform;
  z-index:0;
}
.parallax-scrim{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(11,33,56,.72), rgba(11,33,56,.58)); z-index:0; }
.parallax-scrim.light{ background: linear-gradient(180deg, rgba(11,33,56,.15), rgba(11,33,56,.35)); }
.parallax-content{ padding-top: 90px; padding-bottom: 90px; }
.parallax-content h2{ color: var(--white); font-size: clamp(1.7rem, 3.6vw, 2.6rem); max-width: 18ch; }
.parallax-content p.lead{ color: rgba(255,255,255,.85); }

.parallax-showcase{ min-height: 62vh; }

@media (max-width: 700px){
  .parallax-bg{ background-attachment: scroll; }
}

/* quote section */
.parallax-quote{ min-height:60vh; }
.quote-content{ text-align:center; padding-top: 90px; padding-bottom: 90px; }
.quote-mark{ width:56px; height:42px; color: var(--gold); margin: 0 auto 20px; }
.quote-text{ font-family: var(--serif); font-style:italic; font-size: clamp(1.3rem, 2.6vw, 1.9rem); color: var(--white); max-width: 26ch; margin:0 auto 20px; }
.quote-author{ color: var(--gold); font-weight:600; letter-spacing:.05em; text-transform:uppercase; font-size:.85rem; }

/* ==========================================================================
   Generic sections
   ========================================================================== */
.section{ padding: 110px 0; }
.section-alt{ background: var(--cream); }
.section-title{ font-size: clamp(1.8rem, 3.4vw, 2.5rem); max-width: 20ch; margin-left:auto; margin-right:auto; }

/* feature grid */
.feature-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: 28px; margin-top: 56px; }
.feature-card{
  background: var(--white);
  border-radius: var(--radius);
  padding: 34px 32px;
  box-shadow: 0 20px 44px -28px rgba(18,49,79,.35);
  position:relative;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.feature-card:hover{ transform: translateY(-6px); box-shadow: 0 28px 56px -26px rgba(18,49,79,.4); }
.feature-num{ font-family: var(--serif); font-size:1rem; color: var(--gold); font-weight:700; letter-spacing:.05em; }
.feature-card h3{ margin-top:10px; font-size:1.25rem; }
.feature-card p{ margin:0; }
@media (max-width: 720px){ .feature-grid{ grid-template-columns: 1fr; } }

.color-swatches{ display:flex; gap:40px; justify-content:center; margin-top:56px; flex-wrap:wrap; }
.swatch{ display:flex; flex-direction:column; align-items:center; gap:12px; font-weight:600; font-size:.92rem; }
.swatch-chip{ width:72px; height:72px; border-radius:50%; box-shadow: 0 10px 24px -10px rgba(18,49,79,.4); border: 3px solid var(--white); outline: 1px solid rgba(18,49,79,.1); }
.swatch-natural{ background: #ece1cc; }
.swatch-stripe{ background: repeating-linear-gradient(90deg, #24507f 0 10px, #f3ede0 10px 20px); }

/* steps */
.steps{ list-style:none; margin: 56px 0 0; padding:0; max-width: 780px; margin-left:auto; margin-right:auto; }
.step{ display:flex; gap:24px; padding: 22px 0; border-bottom: 1px solid rgba(18,49,79,.12); }
.step:last-child{ border-bottom:0; }
.step-number{
  flex: none;
  width:44px; height:44px; border-radius:50%;
  background: var(--navy); color: var(--white);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--serif); font-weight:700; font-size:1.1rem;
}
.step h3{ font-size:1.1rem; margin-bottom:6px; }
.step p{ margin:0; }
.montaje-cta{ margin-top: 48px; }

/* parts grid (especificaciones page) */
.parts-grid{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap: 14px; margin-top: 48px; max-width: 900px; margin-left:auto; margin-right:auto;
}
.part{
  flex: 1 1 200px; max-width: 260px;
  background: var(--white); border-radius: 999px;
  padding: 12px 22px 12px 12px; text-align:left;
  box-shadow: 0 14px 30px -22px rgba(18,49,79,.35);
  display:flex; flex-direction:row; align-items:center; gap:14px;
  font-weight:500; font-size:.88rem; color: var(--ink);
}
.part-letter{
  flex: none;
  width:36px; height:36px; border-radius:50%;
  background: var(--cream); color: var(--gold); border: 2px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--serif); font-weight:700;
}

/* notice callout */
.notice{
  margin: 40px auto 0; max-width: 780px;
  background: var(--cream); border-left: 4px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 20px 26px; font-size:.95rem; color: var(--ink);
}
.section-alt .notice{ background: var(--white); }

/* page hero (interior pages) */
.page-hero{
  position:relative; min-height: 46vh; display:flex; align-items:flex-end;
  overflow:hidden; color: var(--white);
}
.page-hero-content{ padding-top: 150px; padding-bottom: 56px; max-width: 620px; }
.page-hero-content h1{ color: var(--white); font-size: clamp(2rem, 4.4vw, 3.2rem); }
.page-hero-content .lead{ color: rgba(255,255,255,.85); }
@media (max-width: 600px){
  .page-hero-content{ padding-top: 130px; }
}

/* community */
.community{ position:relative; min-height: 70vh; display:flex; align-items:center; color:var(--white); overflow:hidden; }
.community .parallax-bg{ filter: blur(6px) saturate(.9); }
.community .parallax-scrim{ background: rgba(11,33,56,.55); }
.community-content{ text-align:center; padding-top: 90px; padding-bottom: 90px; }
.community-content h2{ color: var(--white); font-size: clamp(2rem, 4vw, 2.8rem); }
.community-content p{ color: rgba(255,255,255,.85); max-width: 46ch; margin: 0 auto 28px; }

/* final CTA */
.final-cta{ background: var(--navy-deep); color: var(--white); padding: 110px 0; }
.final-cta h2{ color: var(--white); font-size: clamp(2rem, 4vw, 2.8rem); }
.perks{ display:flex; justify-content:center; gap: 56px; margin: 48px 0; flex-wrap:wrap; }
.perk{ display:flex; flex-direction:column; align-items:center; gap:12px; max-width: 200px; text-align:center; font-weight:600; font-size:.92rem; }
.perk svg{ width:40px; height:40px; color: var(--gold); }
.fineprint{ margin-top:24px; color: rgba(255,255,255,.55); font-size:.85rem; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ background: var(--cream); padding: 56px 0 36px; }
.footer-inner{ display:flex; flex-direction:column; align-items:center; gap:22px; text-align:center; }
.footer-logo{ width: 96px; border-radius:50%; box-shadow: 0 8px 22px rgba(18,49,79,.15); }
.footer-nav{ display:flex; gap:24px; flex-wrap:wrap; justify-content:center; font-size:.9rem; font-weight:500; }
.footer-social{ font-weight:600; color: var(--navy); }
.footer-copy{ font-size:.8rem; color: var(--text-soft); margin:0; }

@media (max-width: 600px){
  .cta-row{ flex-direction:column; align-items:stretch; }
  .cta-row .btn{ text-align:center; justify-content:center; }
  .perks{ gap:32px; }
}