/* =========================
   INDEX - styles
   Paleta:
   fondo: #2b2b2b
   texto: blanco
   principal: #7b65e9
   secundario: #4f4584
   ========================= */

:root{
  --bg: #2b2b2b;
  --text: #ffffff;
  --primary: #7b65e9;
  --secondary: #4f4584;
  --muted: #bfbfbf;
  --glass: rgba(255,255,255,0.06);
}

/* Reset / base */
*{box-sizing:border-box; margin:0; padding:0}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--text);
  font-family: 'Montserrat', sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
  overflow-x: hidden;
}

/* Utility container */
.container{
  width:92%;
  max-width:1200px;
  margin:0 auto;
  padding:40px 0;
}

/* Header */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:999;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 40px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
  transition: all .25s ease;
}

.site-header img.logo {
  height: 48px;
  width: auto;
  object-fit: contain;
  display: block;
  z-index: 1000;
}

.site-header.scrolled{
  padding:10px 30px;
  background: rgba(10,10,10,0.75);
}

.logo{
  font-weight:600;
  letter-spacing:1px;
  color:var(--text);
}

/* nav */
.nav-list{display:flex; gap:18px; list-style:none}
.nav-list a{
  color:var(--muted);
  text-decoration:none;
  font-weight:500;
  font-size:0.95rem;
  padding:6px 8px;
  transition: color .2s ease, transform .2s ease;
}
.nav-list a:hover{ color:var(--text); transform:translateY(-2px) }

/* Social */
.social-buttons{display:flex; gap:10px}
.btn-social{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:50%;
  background:var(--glass);
  transition: transform .18s ease, background .18s ease;
}
.btn-social:hover{ transform:scale(1.05); background: rgba(255,255,255,0.06) }
.btn-social.whatsapp{ background: linear-gradient(135deg,#25D366,#16a34a) }
.btn-social.insta{ background: linear-gradient(135deg,#f09433,#e6683c) }

/* FLOATING WHATSAPP */
.whatsapp-float{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:1200;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  border-radius:50%;
  background:var(--primary);
  box-shadow:0 8px 20px rgba(123,101,233,0.18);
  text-decoration:none;
  transition: transform .18s ease;
}
.whatsapp-float:hover{ transform:translateY(-6px) }

/* HERO */
.hero{
  position:relative;
  min-height:90vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:var(--text);
  padding-top:90px; /* leave space for fixed header */
  overflow:hidden;
}
.hero-media{
  position:absolute; inset:0; z-index:0;
  filter:brightness(.45);
}
.hero-video{
  width:100%;
  height:100%;
  object-fit:cover;
  position:absolute;
  inset:0;
  z-index:0;
  opacity:0.9;
  transition: opacity 0.3s ease;
}
.hero-content{
  position:relative; z-index:2;
  max-width:980px;
  padding:60px 20px;
  backdrop-filter: blur(0);
}
.now-playing{
  color:#fff;
  font-weight:600;
  letter-spacing:2px;
  margin-bottom:16px;
}
#hero-title{
  font-size:2.6rem;
  line-height:1.05;
  margin-bottom:12px;
  font-family: 'Poppins', sans-serif;
  font-weight:600;
}
.hero-sub{ color:var(--muted); margin-bottom:20px; font-size:1.05rem; }

.btn-group{ display:flex; gap:16px; justify-content:center; margin-top:22px; flex-wrap:wrap }
.btn{
  display:inline-block;
  padding:12px 26px;
  border-radius:30px;
  font-weight:600;
  text-decoration:none;
  cursor:pointer;
  border:none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.btn-pink{ background:var(--primary); color:var(--text) }
.btn-dark{ background:#111; color:var(--text); border:1px solid rgba(255,255,255,0.04) }
.btn:hover{ transform:translateY(-3px); box-shadow:0 8px 18px rgba(0,0,0,0.25) }

/* Sections */
.section{ padding:80px 0; }
.section--light{ background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent); }
.section--dark{ background: rgba(0,0,0,0.02); }
.text-center{ text-align:center;}

/* Containers y grids generales */
.container{ width:92%; max-width:1200px; margin:0 auto; padding:40px 0 }
.two-col-grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:center; }
.two-col-grid.text-left .text{ grid-column:1 }
.two-col-grid.text-left .media,
.two-col-grid.text-left .gallery-video,
.two-col-grid.text-left .adapt-media{ grid-column:2 }
.two-col-grid.text-right .text{ grid-column:2 }
.two-col-grid.text-right .media,
.two-col-grid.text-right .gallery-video,
.two-col-grid.text-right .adapt-media{ grid-column:1 }

/* Fondos diferenciados */
.section-bg-light{ background: rgba(123,101,233,0.05) }
.section-bg-dark{ background: rgba(79,69,132,0.05) }

/* Videos e imágenes */
.gallery-video, .adapt-media, .two-col .media{
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 8px 20px rgba(0,0,0,0.3);
  background: rgba(0,0,0,0.05);
}
.gallery-video video, .adapt-media img, .two-col .media img{
  width:100%;
  height:auto;
  max-height:450px;
  object-fit:cover;
  border-radius:10px;
}

/* Two-col layout (Flexbox Fallback)*/
.two-col{ 
  display:flex; 
  gap:28px; 
  align-items:center; 
  flex-wrap:wrap; 
  min-height:70vh; 
}
.two-col .text{ flex:1; min-width:280px }
.two-col .media{ flex:1; min-width:260px }

/* =========================
   ADAPT GRID - imágenes y texto
   ========================= */
.adapt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* PC: dos columnas */
  gap: 28px;
  align-items: center;
}
/*Historia*/
#historia-title {
  text-align: center;
  margin-bottom: 1.5rem;
  margin-top: 0;
}

/* Imagen dentro del grid */
.adapt-media {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
  background: rgba(0,0,0,0.05);
}

/* Imagen responsive */
.adapt-media img {
  width: 100%;
  height: 360px; /* altura por defecto en PC */
  object-fit: cover;
  border-radius: 10px;
}

/* Cards grid for dates */
.cards-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; margin-top:20px }
.card{ background: rgba(255,255,255,0.03); padding:18px; border-radius:10px; min-height:150px; display:flex; flex-direction:column; gap:10px; justify-content:center; cursor:pointer; transition: all 0.3s ease; }
.card h3{ margin-bottom:2px }
.card p{ color:var(--muted) }

/* Newsletter form */
#newsletter-form{ display:flex; gap:12px; margin-top:10px }
#newsletter-form input{
  background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06);
  color:var(--text); padding:10px 12px; border-radius:8px; flex:1;
}
#newsletter-form button{ white-space:nowrap }

/* Map iframe */
.map-wrap{ margin-top:22px; border-radius:10px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,0.45) }
.map-wrap iframe{ width:100%; height:350px; border:0 }

/* Gallery */
.gallery-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:12px; align-items:start }
.gallery-grid img{ width:100%; height:220px; object-fit:cover; border-radius:8px } 

/* Team / testimonials */
.testimonials{ display:flex; gap:18px; flex-wrap:wrap }
.testimonials blockquote{
  background: rgba(255,255,255,0.03);
  padding:18px; border-radius:10px; min-width:220px; color:var(--muted);
}

/* CTA final */
.section-cta{ background: linear-gradient(180deg, rgba(123,101,233,0.06), rgba(0,0,0,0.03)); padding:60px 0 }
.cta-grid{ display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap }
.cta-actions{ display:flex; gap:12px }
.final-image img{ width:100%; height:260px; object-fit:cover; border-radius:8px; margin-top:18px }

/* Footer */
footer{ padding:40px 0; background:#080808; color:var(--muted) }
.footer-grid{ display:flex; justify-content:space-between; gap:18px; align-items:flex-start; flex-wrap:wrap }
.footer-left .logo{ color:var(--text); font-weight:700; margin-bottom:8px }

/* EVITA-like section adjustments */
.evita-section{ transition: all .4s ease; }

/* Small helpers */
.lead{ font-size:1.05rem; color:var(--muted); max-width:900px }

/* ===========================
   TARJETAS EXPANDIBLES
   =========================== */
.card p, .card form, .card div {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 0.4s ease;
}
.card.expanded p,
.card.expanded form,
.card.expanded div {
  opacity: 1;
}

/* Fondos Blur*/
.section-blur-gradient {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: 100px 0;
}
.section-blur-gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(146, 125, 250, 0.382), rgba(79,69,132,0.25));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: -1;
}

/* =========================
   RESPONSIVE
   ========================= */
@media (min-width:1201px) {
  #hero-title{ font-size:3.6rem }
  .hero-sub{ font-size:1.15rem }
  .gallery-grid{ grid-template-columns: repeat(4,1fr) }
  .cards-grid{ grid-template-columns: repeat(3,1fr) }
  .adapt-grid{ grid-template-columns:1fr 1fr }
}

@media (min-width:769px) and (max-width:1200px){
  .container{ padding-left:28px; padding-right:28px }
  #hero-title{ font-size:3rem }
  .nav-list{ gap:12px }
  .gallery-grid{ grid-template-columns: repeat(3,1fr) }
  .cards-grid{ grid-template-columns: repeat(2,1fr) }
  .adapt-grid{ grid-template-columns:1fr 1fr; gap:20px; } /* imagen al lado */
  .two-col{ flex-direction:column; align-items:center; text-align:center }
  #historia-title {
    margin-bottom: 2.5rem;
  }
}

@media (max-width:1024px){
  .site-header{ padding:10px 20px }
  #hero-title{ font-size:2.4rem }
  .container{ padding:28px 0 }
  .cards-grid{ grid-template-columns: 1fr }
  .gallery-grid{ grid-template-columns: repeat(2,1fr) }
  .adapt-media img{ height:260px }
  .two-col{ gap:18px }
  .evita-section{ min-height:auto; padding:80px 0 }
}

@media (max-width:768px){
  .site-header{ flex-direction:row; gap:12px; padding:10px 16px; justify-content:space-between }
  .nav-list{ display:none }
  .hero{ min-height:80vh; padding-top:78px }
  #hero-title{ font-size:2rem }
  .gallery-grid{ grid-template-columns: 1fr; }
  #historia-title {
    text-align: center;
    margin-bottom: 1rem;
  }
  #historia .two-col-grid {
    grid-template-columns: 1fr;
  }
  #historia .text {
    text-align: center;
  }
  
  /* Apilamiento para secciones de dos columnas */
  .two-col, .two-col-grid, .adapt-grid{
    grid-template-columns: 1fr;
    flex-direction: column;
    text-align: center;
    gap: 28px;
  }

  /* Imagen siempre encima */
  .adapt-media { order: -1; }
  .adapt-media img{ width:100%; height:auto; max-height:none; }

  .btn-group{ flex-direction:column }
}

@media (max-width:480px){
  #hero-title{ font-size:1.6rem }
  .hero-sub{ font-size:.95rem }
  .btn{ padding:10px 16px }
  .gallery-grid img{ height:100% }
  .final-image img{ height:100% }
}

/* Scroll reveal / fade utility */
[data-sr]{ opacity:0; transform: translateY(10px); transition: opacity .6s ease, transform .6s ease; }
.sr-visible{ opacity:1 !important; transform:none !important; }

/* 🔘 Botón adaptable para cualquier sección */
.btn-whatsapp {
  display: inline-block;
  background: linear-gradient(135deg, #25D366, #128C7E);
  color: #fff;
  font-weight: 600;
  padding: 0.9rem 1.6rem;
  border-radius: 2rem;
  text-decoration: none;
  font-size: 1.05rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(37, 211, 102, 0.3);
  position: relative;
  z-index: 2;
}

.btn-center {
  text-align: center;
  margin-top: 2rem;
}

.btn-whatsapp:hover {
  background: linear-gradient(135deg, #20ba5a, #0e765f);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 14px rgba(37, 211, 102, 0.4);
}

/* Animación sutil de pulso brillante */
.pulse {
  animation: pulseGlow 2.8s infinite ease-in-out;
}

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 10px rgba(37, 211, 102, 0.3), 0 0 20px rgba(37, 211, 102, 0.2);
  }
  50% {
    box-shadow: 0 0 20px rgba(37, 211, 102, 0.6), 0 0 40px rgba(37, 211, 102, 0.4);
  }
}

.btn-center {
  text-align: center;
  margin-top: 2rem;
}

@media (max-width: 768px) {
  .btn-whatsapp {
    display: block;
    width: fit-content;
    margin: 1.5rem auto;
    font-size: 1rem;
  }
}

/* Versión responsive: centrado si va dentro de contenedores estrechos */
.btn-whatsapp {
  text-align: center;
}

@media (max-width: 768px) {
  .btn-whatsapp {
    display: block;
    width: fit-content;
    margin: 1.5rem auto;
    font-size: 1rem;
  }
}