/* =========================
   0) Variables + Utilidades
   ========================= */
:root{
  --gold:#C29249;
  --light:#F2F2F2;
  --black:#0D0D0D;
}

html,body{ scroll-behavior:smooth; }
.py-6{padding-top:4.5rem;padding-bottom:4.5rem}
.py-7{padding-top:6rem;padding-bottom:6rem}
.shadow-xs{box-shadow:0 4px 16px rgba(0,0,0,.04)!important}
.text-muted-90{ color: rgba(0,0,0,.6); }
.text-gold{ color: var(--gold) !important; }

/* =========================
   1) Header / Brand chip
   ========================= */
.brand-chip{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.35rem .75rem; border-radius:9999px;
  background:#0D0D0D; color:#fff !important; text-decoration:none;
  box-shadow:0 6px 18px rgba(0,0,0,.15);
  transition:transform .15s ease, box-shadow .2s ease;
}
.brand-chip:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.18); }
.brand-chip .brand-logo{ font-weight:700; letter-spacing:.2px; }

/* =========================
   2) Hero / Parallax / Device
   ========================= */
.hero{
  background:url('../assets/img/fondo-mapa-b.png') center/cover no-repeat fixed;
  min-height:92vh;
}

@media (max-width: 992px){ .hero{ background-attachment:scroll; } }

.underline{
  position:relative;
  background-image: linear-gradient(transparent 65%, var(--gold) 0);
  background-size:100% 1.1em; background-repeat:no-repeat;
}

.parallax{
  background-attachment:fixed; background-size:cover; background-position:center;
  border-top:1px solid #eee; border-bottom:1px solid #eee;
}
@media (max-width: 992px){ .parallax{ background-attachment:scroll; } }

/* Dispositivo (rotador simple) */
.device{
  position:relative; width:min(360px,92%); aspect-ratio:9/19;
  border:10px solid #111; border-radius:32px; overflow:hidden; background:#000;
  margin-inline:auto; box-shadow:0 24px 48px rgba(0,0,0,.1);
  background-image: url('../assets/img/device.png');
}
.device .screen{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .6s ease}
.device .screen.active{opacity:1}
/* Wrapper con el ratio del PNG real (usa variables para que sea re–utilizable) */
.device-wrap{
  position: relative;
  width: min(420px, 95%);
  aspect-ratio: var(--frame-w) / var(--frame-h);
  margin-inline: auto;
  /* sombra sutil del conjunto */
  filter: drop-shadow(0 24px 48px rgba(0,0,0,.18));
}

/* El marco PNG (no bloquea eventos) */
.device-frame{
  z-index: 101;
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  pointer-events: none;
}

/* “Hueco” de la pantalla dentro del marco PNG */
.device-screen{
  position: absolute;
  top: var(--screen-top, 6%);
  left: var(--screen-left, 6%);
  right: var(--screen-right, 6%);
  bottom: var(--screen-bottom, 7%);
  border-radius: var(--screen-radius, 24px);
  overflow: hidden;
  background: #000;
}

/* Imágenes de pantalla */
.device-screen .screen{
  z-index: 100;
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0; transition: opacity .6s ease;
}
.device-screen .screen.active{ opacity: 1; }

/* =========================
   3) Features (carrusel con card central)
   ========================= */
.features-scroll{
  padding-block:3.5rem; background:#fff; overflow:hidden;
}
.features-track{
  display:grid; grid-auto-flow:column;
  grid-auto-columns:clamp(280px,48vw,380px);
  gap:16px; padding:20px 16px 28px;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; scroll-padding-inline:16px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none; -ms-overflow-style:none;
}
.features-track::-webkit-scrollbar{ display:none; }

.feature-item{
  scroll-snap-align:center;
  background:#fff; border:1px solid #eee; border-radius:18px;
  padding:18px;
  transform:translateY(6px) scale(.96);
  transition:transform .25s ease, border-color .25s ease;
}
.feature-item.is-active{ transform:translateY(-8px) scale(1.02); border-color:var(--gold); }

.feature-accent{ display:block; height:0; } /* relleno */
.feature-item.is-active .feature-accent{
  height:3px; width:38px; border-radius:999px; background:var(--gold); margin-bottom:10px;
}
.feature-icon{
  width:44px;height:44px;border-radius:12px;
  display:grid;place-items:center;background:var(--light);color:var(--black);font-size:1.25rem;
}
.feature-title{ font-weight:800; font-size:1.05rem; margin:10px 0 4px; color:var(--black); }
.feature-desc{ margin:0; color:rgba(0,0,0,.6); }

.features-fader{ position:absolute; top:0; bottom:0; width:48px; pointer-events:none; }
.features-fader.left { left:0;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.features-fader.right{ right:0; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

.features-ctrl{ display:flex; gap:8px; justify-content:center; margin-top:16px; }
.features-ctrl .btn-arrow{
  width:42px;height:42px;border-radius:999px;border:1px solid #e7e7e7;background:#fff;color:var(--black);
}
.features-ctrl .btn-arrow:hover{ border-color:var(--gold); }

@media (max-width:576px){ .features-track{ grid-auto-columns:85%; } }

/* =========================
   4) Screens (galería minimal)
   ========================= */
.screens-section{ background:#f9f9f9; padding-top:4.5rem; padding-bottom:4.5rem; overflow:hidden; }
.screens-header .lead{ color:rgba(0,0,0,.6); }

.screens-track{
  display:grid; grid-auto-flow:column;
  grid-auto-columns:clamp(300px,52vw,460px);
  gap:20px; padding:18px 18px 28px;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; scroll-padding-inline:18px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none; -ms-overflow-style:none;
}
.screens-track::-webkit-scrollbar{ display:none; }

.screen-card{
  scroll-snap-align:center; background:transparent;
  transform:translateY(6px) scale(.98);
  transition:transform .25s ease;
}
.screen-card.is-active{ transform:translateY(-6px) scale(1.02); }

/* .screen-figure{ border-radius:22px; overflow:hidden; background:#000; } */
.screen-figure img{
  width:100%; height:auto; display:block;
  aspect-ratio:9/19; object-fit:cover; border-radius:22px; border:none;
}

.screen-body{ margin-top:12px; padding:0 6px; }
.screen-title{ margin:0 0 4px; font-weight:800; color:#0D0D0D; }
.screen-desc{ margin:0 0 10px; color:rgba(0,0,0,.6); }

.screen-chips{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{
  font-size:.96rem; font-weight:800; padding:.45rem .9rem;
  border-radius:999px; background:#fff; color:#0D0D0D; border:1px solid #e7e7e7;
}
.chip--gold{ border-color:var(--gold); }

.screens-fader{ position:absolute; top:0; bottom:0; width:56px; pointer-events:none; }
.screens-fader.left { left:0;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.screens-fader.right{ right:0; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

.screens-ctrl{ display:flex; gap:8px; justify-content:center; margin-top:12px; }
.screens-ctrl .btn-arrow{
  width:42px;height:42px;border-radius:999px;border:1px solid #e7e7e7;background:#fff;color:var(--black);
}
.screens-ctrl .btn-arrow:hover{ border-color:var(--gold); }

@media (max-width:576px){ .screens-track{ grid-auto-columns:90%; } }

/* =========================
   5) Apple Watch (sección)
   ========================= */
.watch-section{ background:#fff; padding-top:4.5rem; padding-bottom:4.5rem; }
.badge-watch{
  display:inline-flex; align-items:center; gap:.35rem;
  background:#0D0D0D; color:#fff; padding:.4rem .75rem; border-radius:9999px;
  font-weight:700; letter-spacing:.2px; font-size:.875rem; box-shadow:0 6px 18px rgba(0,0,0,.12);
}

/* Marco del reloj (proporción realista) */
.watch-frame{
  position:relative; width:clamp(170px,18vw,240px); aspect-ratio:.82/1;
  margin-inline:auto; border-radius:34px; background:#111; border:8px solid #111; padding:10px;
  box-shadow:0 18px 36px rgba(0,0,0,.12); overflow:hidden;
}
.watch-frame img{ width:100%; height:100%; object-fit:cover; border-radius:22px; }
.watch-41mm{ width:clamp(160px,16vw,220px); }
.watch-45mm{ width:clamp(180px,19vw,260px); }
@media (max-width:992px){ .watch-frame{ width:clamp(160px,45vw,220px); } }

.watch-list li{ position:relative; padding-left:28px; margin:.4rem 0; }
.watch-list li::before{
  content:''; position:absolute; left:0; top:.5em; width:10px; height:10px; border-radius:50%; background:var(--gold);
}
ul li::marker {
  color: var(--gold);
}

/* =========================
   6) Contacto
   ========================= */
.contact-section{ padding-top:4.5rem; padding-bottom:4.5rem; background:#f9f9f9; }
.contact-card,
.contact-form{
  border:1px solid #eee; border-radius:16px; padding:1.5rem; background:#fff;
}
.contact-card + .contact-card{ margin-top:1rem; }

.icon-badge{
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:var(--light); color:var(--black); font-size:1.1rem;
}
.contact-form .form-control,
.contact-form .form-select{ border-radius:10px; border-color:#e7e7e7; }
.contact-form .form-control:focus,
.contact-form .form-select:focus{
  border-color:var(--gold); box-shadow:0 0 0 .2rem rgba(194,146,73,.18);
}
.contact-form .form-check-input:checked{ background-color:var(--gold); border-color:var(--gold); }

.btn-gold{
  background:var(--gold); color:var(--black); border:1px solid var(--gold);
}
.btn-gold:hover,.btn-gold:focus{ background:#b88741; border-color:#b88741; color:var(--black); }

/* =========================
   7) Separadores
   ========================= */
.sep-hr{
  border:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(13,13,13,.10),transparent);
  margin:56px 0;
}
.sep-band{
  height:64px; background:var(--light);
  border-top:1px solid rgba(13,13,13,.06);
  border-bottom:1px solid rgba(13,13,13,.06);
  margin:48px 0;
}
.sep-wave{ line-height:0; margin:48px 0; }
.sep-wave svg{ display:block; width:100%; height:48px; }

/* Cards más suaves en bg-light */
.bg-light .border.rounded-4 { border-color: #eee; }

/* Listas del brief un poco más aireadas */
.lh-lg li + li { margin-top: .25rem; }

/* Botón flotante */
.wa-float{
  position: fixed;
  right: 18px; bottom: 18px;
  width: 56px; height: 56px;
  border-radius: 999px;
  background: #25D366;          /* verde WhatsApp */
  color: #fff;
  display: grid; place-items: center;
  z-index: 1060;                 /* por encima de offcanvas/modals */
  box-shadow: 0 12px 28px rgba(0,0,0,.22);
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.wa-float:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(0,0,0,.26);
}
.wa-float:active{ transform: translateY(0); }

/* Aparición tras scroll (opcional) */
.wa-float.is-hidden{
  opacity: 0; pointer-events: none;
  transform: translateY(8px) scale(.96);
}
[data-aos] { will-change: transform, opacity; }