:root{
  --bg: #0b0b0f;
  --panel: #11111a;
  --panel-2: #0f0f17;
  --text: #f3f4f6;
  --muted: rgba(243,244,246,.82);

  --gold: #d7b56d;
  --gold-2: #f0d9a6;
  --wine: #7b1930;

  --border: rgba(255,255,255,.10);
  --shadow: 0 14px 40px rgba(0,0,0,.35);
  --radius: 18px;
}

*{ box-sizing: border-box; }
html { scroll-behavior: smooth; }

body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--text);
  background: radial-gradient(1200px 600px at 10% -10%, rgba(123,25,48,.35), transparent 60%),
              radial-gradient(900px 500px at 90% 10%, rgba(215,181,109,.25), transparent 60%),
              var(--bg);
}

.bg-app{ background-color: var(--bg); }

/* Accesibilidad: skip link */
.skip-link{
  position:absolute;
  left:-999px; top:0;
  background: var(--gold);
  color:#151515;
  padding:.6rem .8rem;
  border-radius: 10px;
  z-index: 9999;
}
.skip-link:focus{ left: 12px; top: 12px; }

.section-pad{ padding: 4.75rem 0; }
.section-alt{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
}

.text-gold{ color: var(--gold) !important; }
.text-wine{ color: #ffb3c3; }
.text-muted{ color: var(--muted) !important; }
.lead{ color: var(--muted) !important; line-height: 1.58; }
.border-soft{ border-color: var(--border) !important; }

/* Focus visible (accesibilidad + UX) */
.btn:focus-visible,
.nav-link:focus-visible,
.social-btn:focus-visible,
.contact-card:focus-visible,
.gallery-item:focus-visible,
.quicklink:focus-visible{
  outline: 3px solid rgba(215,181,109,.45);
  outline-offset: 3px;
}

.nav-blur{
  backdrop-filter: blur(10px);
  background: rgba(11,11,15,.58);
  border-bottom: 1px solid var(--border);
}

.navbar .nav-link{
  color: rgba(255,255,255,.82);
  font-weight: 600;
  letter-spacing: .2px;
}
.navbar .nav-link:hover{ color: #ffffff; }

.navbar-brand .brand-text{ font-weight: 800; letter-spacing: .2px; }
.brand-mark{
  width: 12px; height: 12px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, var(--gold-2), var(--gold));
  box-shadow: 0 0 0 6px rgba(215,181,109,.12);
}

/* Buttons */
.btn{
  border-radius: 14px;
  font-weight: 750;
  letter-spacing: .2px;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.btn:active{ transform: translateY(1px); }

.btn-gold{
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  border: 0;
  color: #181818;
  box-shadow: 0 14px 34px rgba(215,181,109,.20);
}
.btn-gold:hover{ transform: translateY(-1px); box-shadow: 0 18px 42px rgba(215,181,109,.24); }

.btn-wine{
  background: linear-gradient(180deg, #a42845, var(--wine));
  border: 0;
  color: #fff;
  box-shadow: 0 12px 30px rgba(123,25,48,.22);
}
.btn-wine:hover{ transform: translateY(-1px); }

.btn-soft{
  background: rgba(255,255,255,.07);
  border: 1px solid var(--border);
  color: rgba(255,255,255,.92);
}
.btn-soft:hover{ background: rgba(255,255,255,.11); transform: translateY(-1px); }

.btn-outline-light{
  border-color: rgba(255,255,255,.40) !important;
  color: rgba(255,255,255,.92) !important;
}
.btn-outline-light:hover{
  background: rgba(255,255,255,.10) !important;
  transform: translateY(-1px);
}

.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .45rem .75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.92);
  font-weight: 800;
  text-shadow: 0 10px 30px rgba(0,0,0,.45);
}

/* =========================
   HERO VIDEO (premium)
   ========================= */
.hero-video{
  position: relative;
  min-height: 86vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}

.video-layer{
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #000;
}

.hero-video-el{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  filter: saturate(1.05) contrast(1.05);
}

.hero-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(11,11,15,.82) 0%, rgba(11,11,15,.64) 55%, rgba(11,11,15,.58) 100%),
    radial-gradient(900px 520px at 25% 30%, rgba(215,181,109,.18), transparent 60%),
    radial-gradient(1000px 560px at 70% 40%, rgba(123,25,48,.16), transparent 65%);
}

.hero-content{
  position: relative;
  z-index: 2;
  padding: 5rem 0 3.5rem;
}

.hero-video h2{
  text-shadow: 0 14px 40px rgba(0,0,0,.55);
}

.hero-controls{ margin-top: 1.25rem; }

/* Trust bar */
.trust-bar{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:.75rem;
}
.trust-item{
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  border-radius: 14px;
  padding: .85rem .9rem;
  display:flex;
  align-items:center;
  gap:.55rem;
  color: rgba(255,255,255,.92);
}
.trust-item i{ color: var(--gold); }

/* Hero card */
.hero-card{
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: var(--shadow);
  overflow: hidden;
}
.hero-card-top{
  display:flex;
  justify-content: space-between;
  gap: .5rem;
  padding: 1rem;
  border-bottom: 1px solid var(--border);
  background: rgba(0,0,0,.18);
}
.pill{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.35rem .55rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.92);
  font-size: .85rem;
  white-space: nowrap;
}
.pill-wine{ background: rgba(123,25,48,.25); border-color: rgba(255,255,255,.14); }
.hero-card-body{ padding: 1.1rem 1rem; }
.hero-card-foot{ padding: .9rem 1rem; border-top: 1px solid var(--border); background: rgba(0,0,0,.12); }

/* Quicklinks */
.hero-quicklinks{
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}
.quicklink{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.55rem .75rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.92);
  text-decoration:none;
  font-weight: 750;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.quicklink:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.08);
  border-color: rgba(215,181,109,.22);
}
.quicklink i{ color: var(--gold-2); }

/* Sections */
.section-title p{
  max-width: 60ch;
  font-size: 1.02rem;
  letter-spacing: .1px;
}

/* Features */
.features{ display:grid; gap:.85rem; }
.feature-card{
  display:flex;
  gap:.85rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255,255,255,.04);
}
.feature-card i{ font-size: 1.35rem; margin-top: .1rem; }

/* About panel */
.about-panel{
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  padding: 1.25rem;
  box-shadow: var(--shadow);
}
.about-panel-header{ display:flex; align-items:center; justify-content: space-between; gap:.75rem; }
.badge-gold{
  background: rgba(215,181,109,.16);
  color: var(--gold-2);
  border: 1px solid rgba(215,181,109,.25);
  padding: .45rem .7rem;
  border-radius: 999px;
  font-weight: 800;
}
.checklist{ list-style:none; padding:0; display:grid; gap:.7rem; }
.checklist li{ display:flex; gap:.6rem; align-items:flex-start; color: rgba(255,255,255,.92); }
.checklist i{ color: var(--gold); font-size: 1.15rem; margin-top: .05rem; }
.about-panel-cta{ display:flex; flex-wrap: wrap; gap:.75rem; }

/* ============================================
   SERVICIOS con FONDO DE IMAGEN (legible)
   ============================================ */
.services-bg{
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.services-bg-media{
  position: absolute;
  inset: -8% 0;
  z-index: 0;
  will-change: transform;
}

.services-bg-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  filter: saturate(1.02) contrast(1.06);
}

.services-bg-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(11,11,15,.70), rgba(11,11,15,.78)),
    radial-gradient(900px 520px at 25% 30%, rgba(215,181,109,.16), transparent 60%),
    radial-gradient(1000px 560px at 70% 40%, rgba(123,25,48,.14), transparent 65%);
}

.services-bg .container{
  position: relative;
  z-index: 2;
}

/* Services cards */
.service-card{
  height: 100%;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(17,17,26,.72);
  backdrop-filter: blur(6px);
  padding: 1.2rem;
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.service-card:hover{
  transform: translateY(-3px);
  background: rgba(17,17,26,.82);
  border-color: rgba(215,181,109,.22);
}

.service-icon{
  width: 44px; height: 44px;
  border-radius: 14px;
  display:grid; place-items:center;
  background: rgba(215,181,109,.12);
  border: 1px solid rgba(215,181,109,.18);
  margin-bottom: .8rem;
}
.service-icon i{ color: var(--gold-2); font-size: 1.25rem; }
.service-cta{
  background: linear-gradient(180deg, rgba(123,25,48,.24), rgba(17,17,26,.72));
}

/* ============================================
   INTEGRANTES (7 cards con foto)
   ============================================ */
.member-card{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
  height: 100%;
}
.member-card:hover{
  transform: translateY(-3px);
  border-color: rgba(215,181,109,.22);
  background: rgba(255,255,255,.06);
}

.member-photo{
  position: relative;
  aspect-ratio: 1 / 1;
  background: rgba(0,0,0,.25);
}
.member-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.02) contrast(1.05);
}
.member-photo::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.35));
  pointer-events:none;
}

.member-body{
  padding: .85rem .9rem 1rem;
}

.members-cta{
  border-radius: calc(var(--radius) + 6px);
  border: 1px solid rgba(215,181,109,.22);
  background: radial-gradient(520px 220px at 20% 20%, rgba(215,181,109,.18), transparent 60%),
              linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  padding: 1.2rem 1.2rem;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 1rem;
  box-shadow: var(--shadow);
}

/* ============================================
   GALERÍA (CORREGIDA para 1..13 + v-1..v-5)
   - Ahora soporta <img> reales dentro del button
   - Videos usan thumb (no cargan mp4 en grid)
   ============================================ */
.gallery-grid{
  display:grid;
  gap: .85rem;
  grid-template-columns: repeat(2, minmax(0,1fr));
}

.gallery-item{
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow:hidden;
  position: relative;
  background: rgba(255,255,255,.03);
  box-shadow: 0 10px 26px rgba(0,0,0,.25);
  transition: transform .18s ease, border-color .18s ease;
  padding: 0;
}

.gallery-item:hover{
  transform: translateY(-3px);
  border-color: rgba(215,181,109,.22);
}

/* IMÁGENES reales */
.gallery-item img{
  width: 100%;
  height: 100%;
  display:block;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  filter: saturate(1.02) contrast(1.04);
}

/* VIDEOS: thumb visual sin cargar mp4 en grid */
.gallery-video-thumb{
  width: 100%;
  aspect-ratio: 4 / 3;
  display:grid;
  place-items:center;
  position: relative;
  background:
    radial-gradient(120px 120px at 25% 30%, rgba(215,181,109,.22), transparent 65%),
    radial-gradient(140px 140px at 70% 60%, rgba(123,25,48,.18), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}

.play-badge{
  width: 54px;
  height: 54px;
  border-radius: 18px;
  display:grid;
  place-items:center;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  box-shadow: 0 14px 30px rgba(0,0,0,.35);
}
.play-badge i{ font-size: 1.8rem; }

.video-label{
  position:absolute;
  left: 12px;
  bottom: 12px;
  padding: .3rem .55rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.28);
  color: rgba(255,255,255,.92);
  font-weight: 800;
  font-size: .85rem;
}

/* Modal media (nuevo) */
.modal-media{
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.25);
}
.modal-media img,
.modal-media video{
  width: 100%;
  height: auto;
  display:block;
  background: #000;
}
.modal-media video{
  aspect-ratio: 16 / 9;
}

/* Beneficios + CTA */
.benefits{ display:grid; gap:.85rem; }
.benefit{
  display:flex;
  gap:.85rem;
  padding: 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
}
.benefit i{ font-size: 1.25rem; margin-top: .05rem; }

.cta-box{
  border-radius: calc(var(--radius) + 6px);
  border: 1px solid rgba(215,181,109,.22);
  background: radial-gradient(500px 220px at 20% 20%, rgba(215,181,109,.20), transparent 60%),
              linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  padding: 1.4rem;
  box-shadow: var(--shadow);
}
.cta-mini{ display:flex; align-items:center; gap:.5rem; }

/* Contact */
.contact-cards{ display:grid; gap:.85rem; }
.contact-card{
  text-decoration:none;
  color: rgba(255,255,255,.95);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  border-radius: var(--radius);
  padding: .95rem 1rem;
  display:flex;
  align-items:center;
  gap:.75rem;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.contact-card:hover{ transform: translateY(-2px); border-color: rgba(215,181,109,.22); background: rgba(255,255,255,.06); }
.contact-card i{ font-size: 1.25rem; }

.social{ display:flex; gap:.6rem; }
.social-btn{
  width: 44px; height: 44px;
  display:grid; place-items:center;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.92);
  text-decoration:none;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.social-btn:hover{ transform: translateY(-2px); border-color: rgba(215,181,109,.22); background: rgba(255,255,255,.06); }

.form-shell{
  border-radius: calc(var(--radius) + 6px);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  padding: 1.4rem;
  box-shadow: 0 14px 40px rgba(0,0,0,.28);
}
.form-label{ color: rgba(255,255,255,.90); font-weight: 800; }
.form-control, .form-select{
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
  border-radius: 14px;
  padding: .8rem .9rem;
}
.form-control::placeholder{ color: rgba(255,255,255,.48); }
.form-control:focus, .form-select:focus{
  box-shadow: 0 0 0 .25rem rgba(215,181,109,.18);
  border-color: rgba(215,181,109,.35);
}
.invalid-feedback{ color: #ffb3c3; }

/* Modal */
.modal-dark{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* FAB */
.fab-whatsapp{
  position: fixed;
  right: 18px; bottom: 18px;
  width: 56px; height: 56px;
  border-radius: 18px;
  display:grid; place-items:center;
  text-decoration:none;
  color:#fff;
  background: linear-gradient(180deg, #27d16a, #1fa857);
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.16);
  z-index: 999;
  transition: transform .18s ease;
}
.fab-whatsapp:hover{ transform: translateY(-3px); }
.fab-whatsapp i{ font-size: 1.4rem; }

/* GSAP will animate these */
.reveal{ opacity: 0; transform: translateY(12px); }
.hero-anim{ opacity: 0; }

/* Responsive */
@media (min-width: 576px){
  .gallery-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (min-width: 992px){
  .section-pad{ padding: 5.25rem 0; }
  .gallery-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (max-width: 575.98px){
  .hero-video{ min-height: 92vh; }
  .hero-content{ padding: 4.25rem 0 3rem; }
  .display-5{ font-size: clamp(2rem, 6.2vw, 2.75rem); }
  .trust-bar{ grid-template-columns: 1fr; }
  .members-cta{ flex-direction: column; align-items: flex-start; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .hero-video-el{ transform: none; }
  .services-bg-media{ transform: none !important; }
  .services-bg-media img{ transform: none !important; }

  .btn, .service-card, .gallery-item, .contact-card, .social-btn, .fab-whatsapp, .quicklink, .member-card{
    transition: none !important;
  }
  .reveal, .hero-anim{
    opacity: 1 !important;
    transform: none !important;
  }
}