/* ============================================
   PUFFME — Luxury Canalla (ES)
   Estilo global. Mantiene el video intacto.
   ============================================ */

:root{
  --puff-black:#050506;
  --puff-ink:#0b0b0d;
  --puff-ink-2:#0f0f12;
  --puff-gold:#d6b25e;
  --puff-gold-2:#f3d58a;
  --puff-white:#ffffff;
  --puff-muted:rgba(255,255,255,0.74);
  --puff-muted-2:rgba(255,255,255,0.62);
  --puff-border:rgba(255,255,255,0.14);
  --radius-lg:18px;
  --radius-xl:22px;
  --shadow-xl: 0 26px 90px rgba(0,0,0,0.45);
  --shadow-md: 0 18px 55px rgba(0,0,0,0.32);
}

*{margin:0;padding:0;box-sizing:border-box;}

html,body{height:100%;}

body{
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background:
    radial-gradient(900px 520px at 50% -10%, rgba(214,178,94,0.22), transparent 62%),
    radial-gradient(900px 520px at 10% 20%, rgba(255,255,255,0.06), transparent 55%),
    linear-gradient(180deg, var(--puff-ink) 0%, var(--puff-black) 65%, var(--puff-black) 100%);
  color: var(--puff-white);
  overflow-x: hidden;
}

a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}

.container{width:min(1200px, 92%);margin:0 auto;}

/* ============================================
   TOPBAR
   ============================================ */

.topbar{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 72px;
  z-index: 100;
  background: rgba(5,5,6,0.72);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.topbar__inner{
  height: 72px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 20px;
}

.brand__logo{height:46px;width:auto;object-fit:contain;}

.nav{display:flex;gap:28px;align-items:center;}

.nav__link{
  font-size: 16px;
  font-weight: 500;
  color: rgba(255,255,255,0.86);
  letter-spacing: 0.01em;
  padding-bottom: 8px;
  border-bottom: 2px solid transparent;
  transition: border-color .18s ease, color .18s ease;
}

.nav__link:hover{color: rgba(255,255,255,0.98);border-bottom-color: rgba(214,178,94,0.55);}
.nav__link--active{color: rgba(255,255,255,0.98);border-bottom-color: rgba(214,178,94,0.85);}

/* ============================================
   MAIN + VIDEO (no se toca el iframe)
   ============================================ */

.main{
  min-height: 100vh;
  padding-top: 72px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.video-section{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 54px 0 42px;
}

.video-container{
  width: min(520px, 92vw);
  aspect-ratio: 9 / 16;
  background:#000;
  box-shadow: var(--shadow-xl);
  border-radius: var(--radius-xl);
  overflow:hidden;
  border: 1px solid rgba(255,255,255,0.10);
}

.video-container iframe{width:100%;height:100%;border:0;display:block;}

.hero-copy{
  width: min(720px, 92vw);
  margin: 28px auto 0;
  text-align: center;
}

.hero-tag{
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(24px, 3.2vw, 42px);
  letter-spacing: -0.03em;
  color: rgba(255,255,255,0.96);
}

.hero-sub{
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--puff-muted);
}

.hero-actions{
  margin-top: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ============================================
   SECTIONS
   ============================================ */

.section{padding: 96px 0;}

.section--dark{
  background:
    radial-gradient(900px 520px at 20% 0%, rgba(214,178,94,0.22), transparent 60%),
    radial-gradient(1200px 720px at 80% 30%, rgba(255,255,255,0.06), transparent 55%),
    linear-gradient(180deg, #0b0b0d 0%, #050506 100%);
  color: var(--puff-white);
}

.section--cta{
  padding: 78px 0;
  background:
    radial-gradient(900px 520px at 30% 0%, rgba(214,178,94,0.28), transparent 62%),
    linear-gradient(180deg, #0b0b0d 0%, #060607 100%);
  color: var(--puff-white);
}

/* Typography */
.eyebrow{
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.68);
  margin-bottom: 14px;
}

.h2{
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 600;
  font-size: clamp(32px, 4vw, 54px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin-bottom: 16px;
}

.h2--tight{margin-bottom:10px;}

.h3{font-size: 18px;font-weight: 600;letter-spacing: -0.01em;margin-bottom: 10px;}

.lead{
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255,255,255,0.78);
  max-width: 60ch;
}

.accent{color: var(--puff-gold-2);}

/* Layout */
.grid{display:grid;gap:38px;align-items:center;}
.grid--2{grid-template-columns: 1.1fr 0.9fr;}
.grid--reverse{grid-template-columns: 0.9fr 1.1fr;}

.stack > * + *{margin-top: 14px;}

.bullets{list-style:none;margin-top: 14px;padding:0;}
.bullets li{
  padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.82);
}
.bullets li strong{color: rgba(255,255,255,0.96);}

/* Media placeholders */
.media{width:100%;}

.photo-slot{
  position: relative;
  border-radius: var(--radius-xl);
  border: 1px solid var(--puff-border);
  background:
    radial-gradient(600px 260px at 30% 15%, rgba(214,178,94,0.18), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  height: 420px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding: 26px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.photo-slot span{
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
}

.photo-slot--mini{height: 170px;}

.photo-slot img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius: inherit;
}

.mini-grid{margin-top: 18px;display:grid;grid-template-columns: 1fr 1fr;gap:18px;}

/* Cards */
.cards{margin-top:54px;display:grid;grid-template-columns: repeat(3,1fr);gap:18px;}
.card{
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  padding: 22px 20px;
}
.card p{color: rgba(255,255,255,0.78);line-height:1.55;font-size:15px;}

/* Pills */
.pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(214,178,94,0.16);
  color: rgba(255,255,255,0.92);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  width: fit-content;
  margin-top: 8px;
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 48px;
  padding: 0 24px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.16);
  font-size: 16px;
  font-weight: 600;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.94);
  cursor: pointer;
  transition: transform .18s ease, filter .18s ease, background .18s ease, border-color .18s ease;
}

.btn:hover{transform: translateY(-1px);background: rgba(255,255,255,0.09);border-color: rgba(255,255,255,0.22);}

.btn--gold{
  background: linear-gradient(180deg, var(--puff-gold-2), var(--puff-gold));
  border: 1px solid rgba(0,0,0,0.25);
  color: #111;
}

.btn--gold:hover{filter: brightness(1.03);}

.btn--ghost{background: transparent;border-color: rgba(255,255,255,0.22);}
.btn--ghost:hover{background: rgba(255,255,255,0.06);}

.btn--black{background: rgba(255,255,255,0.10);border-color: rgba(255,255,255,0.20);}

.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px;}

/* CTA block */
.cta{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 22px;
  padding: 26px 24px;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05);
}

.cta__copy .lead{margin-top:8px;}
.cta__actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}

/* Fine print block */
.fine{
  margin-top: 14px;
  border-radius: 16px;
  border: 1px dashed rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.04);
  padding: 16px 16px;
}

.fine p{font-size:14px;color: rgba(255,255,255,0.72);line-height:1.55;}
.fine p + p{margin-top:10px;}

/* ============================================
   CONTACT PAGE
   ============================================ */

.contact-section{width:100%;display:flex;align-items:center;justify-content:center;padding: 40px 0 60px;}

.contact-card{
  width: min(560px, 92vw);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: var(--shadow-md);
  padding: 32px 28px;
  background: rgba(255,255,255,0.06);
  border-radius: var(--radius-xl);
}

.contact-title{
  margin: 0 0 24px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.contact-row{display:flex;flex-direction:column;gap:6px;padding:16px 0;border-top:1px solid rgba(255,255,255,0.10);}
.contact-row:first-of-type{border-top:none;}

.contact-label{font-size:12px;color: rgba(255,255,255,0.62);letter-spacing:0.12em;text-transform:uppercase;}

.contact-value{font-size:20px;font-weight:600;color: rgba(255,255,255,0.92);transition: color .18s ease;}
.contact-value:hover{color: var(--puff-gold-2);}

/* ============================================
   WHATSAPP FLOAT
   ============================================ */

.wa-float{
  position: fixed;
  right: 26px;
  bottom: 26px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #25D366;
  box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4), 0 4px 15px rgba(0, 0, 0, 0.25);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 200;
  transition: transform .18s ease, box-shadow .18s ease;
}

.wa-float:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 35px rgba(37, 211, 102, 0.5), 0 6px 20px rgba(0, 0, 0, 0.30);
}

.wa-float svg{width:36px;height:36px;color:#fff;}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 980px){
  .grid--2, .grid--reverse{grid-template-columns: 1fr;}
  .cards{grid-template-columns: 1fr;}
  .photo-slot{height: 360px;}
  .cta{flex-direction: column;align-items:flex-start;}
}

@media (max-width: 768px){
  .topbar{height:64px;}
  .topbar__inner{height:64px;}
  .brand__logo{height:38px;}
  .nav{gap:18px;}
  .nav__link{font-size:14px;}
  .main{padding-top:64px;}
  .video-container{width:94vw;}
  .wa-float{width:64px;height:64px;right:18px;bottom:18px;}
  .wa-float svg{width:32px;height:32px;}
}

@media (max-width: 520px){
  .section{padding: 72px 0;}
  .mini-grid{grid-template-columns: 1fr;}
  .photo-slot--mini{height: 150px;}
}