/* ============ Reset & helpers ============ */
html, body { max-width:100%; overflow-x:hidden; }
img, iframe { max-width:100%; height:auto; display:block; }
* { margin:0; padding:0; box-sizing:border-box; }

/* ============ Variables ============ */
:root{
  --gold-primary:#d4af37;
  --gold-secondary:#f4d03f;
  --dark-primary:#0a0a0a;
  --dark-secondary:#1a1a1a;
  --dark-tertiary:#2d2d2d;
  --accent-gradient:linear-gradient(135deg,var(--gold-primary) 0%,var(--gold-secondary) 100%);
  --shadow-gold:0 10px 30px rgba(212,175,55,.3);
  --shadow-dark:0 20px 60px rgba(0,0,0,.4);
  --bokeh-bg: url('assets/bg-bokeh.png');
  --header-h: 80px;             /* alto header (desktop) */
}

/* ============ Base ============ */
html{ scroll-behavior:smooth; }
body{
  font-family:'Georgia', serif;
  line-height:1.6;
  color:#333;
  background:#000;
}

/* ============ Header / Nav ============ */
header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:rgba(10,10,10,.95);
  backdrop-filter:blur(20px);
  padding:1rem 0;
  border-bottom:1px solid rgba(212,175,55,.2);
  transition:all .5s cubic-bezier(.4,0,.2,1);
}
header.scrolled{ background:rgba(10,10,10,.98); backdrop-filter:blur(30px); box-shadow:var(--shadow-dark); }

nav{
  max-width:1400px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:0 2rem;
}

.logo-header{ height:60px; width:auto; filter:drop-shadow(0 0 10px rgba(212,175,55,.6)); transition:.3s; }
.logo-header:hover{ filter:drop-shadow(0 0 20px rgba(212,175,55,.8)); transform:scale(1.05); }

.nav-links{ display:flex; align-items:center; list-style:none; gap:2.5rem; }
.nav-links a{
  color:var(--gold-primary); text-decoration:none; font-weight:600; font-size:1.1rem; position:relative;
  padding:.8rem 1.2rem; border-radius:8px; transition:all .4s cubic-bezier(.4,0,.2,1); overflow:hidden;
}
.nav-links a::before{
  content:''; position:absolute; inset:0; width:0; height:100%; left:0; top:0; z-index:-1;
  background:var(--accent-gradient); transition:width .4s cubic-bezier(.4,0,.2,1);
}
.nav-links a:hover::before{ width:100%; }
.nav-links a:hover{ color:var(--dark-primary); transform:translateY(-3px); box-shadow:var(--shadow-gold); }

.social-header{ display:flex; gap:1.25rem; }
.social-link{
  color:var(--gold-primary); font-size:1.5rem; padding:.6rem; border-radius:50%;
  position:relative; overflow:hidden; transition:.4s cubic-bezier(.4,0,.2,1);
}
.social-link::before{
  content:''; position:absolute; left:50%; top:50%; width:0; height:0; border-radius:50%;
  background:var(--accent-gradient); transform:translate(-50%,-50%); z-index:-1; transition:.4s cubic-bezier(.4,0,.2,1);
}
.social-link:hover::before{ width:100%; height:100%; }
.social-link:hover{ color:var(--dark-primary); transform:scale(1.2) rotate(10deg); }

/* ============ Hero ============ */
.hero{
  margin-top:var(--header-h);
  min-height:calc(100svh - var(--header-h));
  background:
    linear-gradient(135deg, rgba(0,0,0,.4) 0%, rgba(212,175,55,.1) 50%, rgba(0,0,0,.6) 100%),
    url('assets/orquesta.jpg');
  background-size:100% 100%, cover;
  background-position:center, center;
  background-attachment:scroll, fixed;     /* fixed solo en desktop (se desactiva en móvil más abajo) */
  position:relative;
  display:flex; align-items:center; justify-content:center;
  text-align:center; overflow:hidden;
  padding:2rem 1rem;
}
.hero::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,.3) 70%);
  z-index:0;   /* debajo de partículas y contenido */
}
.hero .particle{ z-index:1; pointer-events:none; }
.hero-content{ max-width:900px; padding:2rem; position:relative; z-index:2; margin-inline:auto; }
.hero-logo{
  width:min(30vw, 400px); min-width:220px; height:auto; margin:0 auto 2rem;
  filter:drop-shadow(0 0 30px rgba(212,175,55,.8)) drop-shadow(0 10px 40px rgba(0,0,0,.8)) contrast(1.2) brightness(1.1);
  animation:logoFloat 6s ease-in-out infinite alternate;
}
.hero p{
  font-size:clamp(1.25rem, 3vw, 2.2rem);
  color:rgba(255,255,255,.95); margin-bottom:2rem;
  text-shadow:2px 2px 10px rgba(0,0,0,.8); font-weight:300; letter-spacing:1px; animation:textGlow 4s ease-in-out infinite alternate;
}
.cta-button{
  display:inline-block; padding:1.2rem 2.2rem; background:var(--accent-gradient); color:var(--dark-primary);
  text-decoration:none; border-radius:50px; font-weight:700; font-size:1.1rem; transition:all .4s cubic-bezier(.4,0,.2,1);
  box-shadow:var(--shadow-gold); position:relative; overflow:hidden; text-transform:uppercase; letter-spacing:1px; z-index:0;
}
.cta-button::before{
  content:''; position:absolute; inset:0; left:-100%;
  background:linear-gradient(135deg,var(--gold-secondary) 0%, var(--gold-primary) 100%);
  transition:left .4s cubic-bezier(.4,0,.2,1); z-index:-1;
}
.cta-button:hover::before{ left:0; }
.cta-button:hover{ transform:translateY(-4px) scale(1.03); box-shadow:0 15px 50px rgba(212,175,55,.6); }

/* Partículas */
.particle{ position:absolute; background:var(--gold-primary); border-radius:50%; opacity:.6; animation:float 8s infinite linear; }
.particle:nth-child(1){width:4px;height:4px;left:10%;animation-delay:0s;}
.particle:nth-child(2){width:6px;height:6px;left:20%;animation-delay:2s;}
.particle:nth-child(3){width:3px;height:3px;left:30%;animation-delay:4s;}
.particle:nth-child(4){width:5px;height:5px;left:40%;animation-delay:1s;}
.particle:nth-child(5){width:4px;height:4px;left:50%;animation-delay:3s;}
.particle:nth-child(6){width:6px;height:6px;left:60%;animation-delay:5s;}
.particle:nth-child(7){width:3px;height:3px;left:70%;animation-delay:1.5s;}
.particle:nth-child(8){width:5px;height:5px;left:80%;animation-delay:3.5s;}
.particle:nth-child(9){width:4px;height:4px;left:90%;animation-delay:2.5s;}

/* ============ Secciones: base + reveal ============ */
.section{
  padding:8rem 2rem; max-width:1400px; margin:0 auto; position:relative;
  opacity:1; transform:translateY(0);
  transition:all 1s cubic-bezier(.4,0,.2,1);
  scroll-margin-top: calc(var(--header-h) + 20px);
}
.section:not(.visible){ opacity:0; transform:translateY(50px); }
.section.visible{ opacity:1; transform:translateY(0); }

/* Línea decorativa */
.section::before{
  content:''; position:absolute; top:-40px; left:0; width:200px; height:2px;
  background:var(--accent-gradient); transform:scaleX(0); transform-origin:left;
  transition:transform 1s cubic-bezier(.4,0,.2,1) .5s;
}
.section.visible::before{ transform:scaleX(1); }

/* Título sección */
.section h2{
  font-size:clamp(2.2rem,5vw,4rem);
  color:var(--gold-primary);
  text-align:left;
  margin:0 0 2rem 0;
  text-transform:uppercase; letter-spacing:2px; font-weight:700;
}
.section h2::after{
  content:''; width:120px; height:6px; background:var(--accent-gradient);
  display:block; margin:1rem 0 0 0; border-radius:3px; animation:pulse 2s ease-in-out infinite alternate;
}

/* ============ About ============ */
.about{
  color:#fff; display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start;
  min-height:100vh;
}
.about-content{ display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; margin-top:2rem; }
.about-text{ font-size:1.2rem; line-height:1.85; color:rgba(255,255,255,.9); }
.about-text h3{ color:var(--gold-primary); font-size:2.2rem; margin-bottom:1.2rem; }
.about-text h4{ color:var(--gold-secondary); font-size:1.5rem; margin:1.5rem 0 .75rem; }
.about-image{ text-align:center; position:relative; }
.about-image::before{ content:''; position:absolute; inset:-20px; background:var(--accent-gradient); border-radius:20px; z-index:-1; opacity:.3; filter:blur(20px); }
.about-image img{ width:100%; max-width:500px; border-radius:20px; box-shadow:var(--shadow-dark); transition:all .5s cubic-bezier(.4,0,.2,1); }
.about-image img:hover{ transform:scale(1.05) rotate(1deg); box-shadow:0 30px 80px rgba(212,175,55,.4); }

/* ============ Services ============ */
.services{
  color:#fff; display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start;
  min-height:100vh;
}
.services-container{ width:100%; max-width:1400px; margin:3rem auto 0; }

.service-row{
  display:grid; grid-template-columns:1fr 1fr; gap:4rem; margin-bottom:5rem; align-items:center;
}
/* alternancia automática */
.service-row .service-card{ order:1; }
.service-row .service-image{ order:2; }
.services-container .service-row:nth-of-type(even) .service-card{ order:2; }
.services-container .service-row:nth-of-type(even) .service-image{ order:1; }

/* imagen con efectos como About */
.service-image{ position:relative; text-align:center; border-radius:20px; overflow:visible; box-shadow:var(--shadow-dark); }
.service-image::before{ content:''; position:absolute; inset:-20px; background:var(--accent-gradient); border-radius:20px; z-index:-1; opacity:.3; filter:blur(20px); }
.service-image img{ width:100%; height:300px; object-fit:cover; border-radius:20px; box-shadow:var(--shadow-dark); transition:all .5s cubic-bezier(.4,0,.2,1); }
.service-image img:hover{ transform:scale(1.05) rotate(1deg); box-shadow:0 30px 80px rgba(212,175,55,.4); }

.service-card{
  background:linear-gradient(135deg, rgba(212,175,55,.1) 0%, rgba(26,26,26,.8) 100%);
  backdrop-filter:blur(20px); padding:3rem; border-radius:25px; border:1px solid rgba(212,175,55,.3);
  box-shadow:var(--shadow-dark); transition:all .5s cubic-bezier(.4,0,.2,1); text-align:center; position:relative; overflow:hidden;
}
.service-card::before{
  content:''; position:absolute; inset:0; left:-100%; background:linear-gradient(135deg, rgba(212,175,55,.2) 0%, rgba(244,208,63,.1) 100%);
  transition:left .5s cubic-bezier(.4,0,.2,1); z-index:-1;
}
.service-card:hover::before{ left:0; }
.service-card:hover{ transform:translateY(-12px) scale(1.01); box-shadow:0 25px 70px rgba(212,175,55,.4); border-color:var(--gold-primary); }
.service-icon{ font-size:3.6rem; color:var(--gold-primary); margin-bottom:1.4rem; animation:bounce 2s ease-in-out infinite; }
.service-card h3{ color:var(--gold-primary); margin-bottom:1.2rem; font-size:1.6rem; text-transform:uppercase; letter-spacing:1px; }
.service-card ul{ list-style:none; text-align:left; }
.service-card li{ padding:.7rem 0; color:rgba(255,255,255,.85); font-size:1.05rem; transition:.3s; position:relative; padding-left:2rem; }
.service-card li::before{ content:"♪"; color:var(--gold-primary); font-weight:bold; position:absolute; left:0; animation:pulse 1.5s ease-in-out infinite alternate; }
.service-card li:hover{ color:var(--gold-secondary); transform:translateX(8px); }

/* ============ Gallery ============ */
.gallery{
  color:#fff; display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start;
  min-height:100vh;
}
.gallery-intro{ text-align:center; margin-bottom:3rem; color:rgba(255,255,255,.8); font-size:1.2rem; }
.carousel-container{ position:relative; width:100%; max-width:1200px; margin:3rem auto 0; overflow:hidden; border-radius:25px; box-shadow:var(--shadow-dark); }
.carousel-track{ display:flex; transition:transform .8s cubic-bezier(.4,0,.2,1); /* ancho dinámico lo pone JS */ }
.carousel-slide{ width:100%; position:relative; overflow:hidden; }
.carousel-slide img{ width:100%; height:400px; object-fit:cover; transition:transform .5s ease; }
.carousel-slide:hover img{ transform:scale(1.1); }
.carousel-overlay{
  position:absolute; bottom:0; left:0; right:0; background:linear-gradient(transparent, rgba(0,0,0,.9));
  color:#fff; padding:2rem; transform:translateY(100%); transition:transform .5s cubic-bezier(.4,0,.2,1);
}
.carousel-slide:hover .carousel-overlay{ transform:translateY(0); }
.carousel-overlay h4{ color:var(--gold-primary); font-size:1.4rem; margin-bottom:.4rem; }
.carousel-indicators{ display:flex; justify-content:center; gap:1rem; margin-top:1.4rem; }
.indicator{ width:12px; height:12px; border-radius:50%; background:rgba(212,175,55,.4); cursor:pointer; transition:.3s; }
.indicator.active{ background:var(--gold-primary); transform:scale(1.3); box-shadow:0 0 10px rgba(212,175,55,.8); }

/* ============ Video ============ */
/* ===== Video Slider ===== */
.video-section{ color:#fff; display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; padding:8rem 2rem; }
.video-intro{ color:rgba(255,255,255,.8); font-size:1.2rem; margin-bottom:2rem; }

.video-slider{
  width:min(1200px,92vw);
  margin:3rem auto 0;
  position:relative;
  /* para que los botones floten bien */
}

.video-track{
  display:flex;
  transition:transform .6s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}

.video-slide{
  flex:0 0 100%;
  padding:0;   /* sin sangrías */
}

.video-frame{
  position:relative;
  aspect-ratio:16/9;
  border-radius:25px;
  overflow:hidden;
  box-shadow:var(--shadow-dark);
}
.video-frame::before{
  content:'';
  position:absolute; inset:-3px;
  background:var(--accent-gradient);
  border-radius:25px;
  z-index:-1;
}
.video-frame iframe{
  width:100%; height:100%;
  display:block; border:none; border-radius:0;
}

/* Botones prev/next */
.video-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(212,175,55,.6);
  background:rgba(10,10,10,.65);
  color:var(--gold-primary);
  font-size:28px; line-height:1;
  display:grid; place-items:center;
  cursor:pointer; z-index:3;
  transition:.25s ease;
  backdrop-filter:blur(6px);
}
.video-btn:hover{ background:rgba(10,10,10,.85); transform:translateY(-50%) scale(1.05); }
.video-btn.prev{ left:8px; }
.video-btn.next{ right:8px; }

/* Dots */
.video-indicators{
  display:flex; justify-content:center; gap:.6rem; margin-top:1rem;
}
.video-indicator{
  width:10px; height:10px; border-radius:50%;
  background:rgba(212,175,55,.4);
  cursor:pointer; transition:.25s ease;
}
.video-indicator.active{
  background:var(--gold-primary);
  transform:scale(1.25);
  box-shadow:0 0 10px rgba(212,175,55,.8);
}

/* Mobile */
@media (max-width:768px){
  .video-section{ padding:4.5rem 1rem; }
  .video-btn{ width:38px; height:38px; font-size:24px; }
  .video-frame{ border-radius:18px; }
  .video-frame::before{ border-radius:18px; }
}


/* ============ Contact ============ */
.contact{
  color:#fff; min-height:100vh;
  display:grid; grid-template-columns:2fr 1fr; gap:2rem 3rem; align-items:start;
}
.contact > h2{ grid-column:1 / -1; }
.contact-form{
  margin:0; max-width:none; padding:2rem;
  background:rgba(212,175,55,.1); backdrop-filter:blur(20px);
  border:1px solid rgba(212,175,55,.3); border-radius:25px; box-shadow:var(--shadow-dark);
}
.form-group{ margin-bottom:1rem; }
.form-group label{ display:block; margin-bottom:.6rem; color:var(--gold-primary); font-weight:600; font-size:1.05rem; }
.form-group input, .form-group textarea, .form-group select{
  width:100%; padding:.9rem 1rem; border:2px solid rgba(212,175,55,.3); border-radius:12px;
  background:rgba(45,45,45,.8); color:#fff; font-size:1rem; transition:all .2s cubic-bezier(.4,0,.2,1); backdrop-filter:blur(10px);
}
.form-group textarea{ min-height:140px; resize:vertical; }
.form-group input:focus, .form-group textarea:focus, .form-group select:focus{
  outline:none; border-color:var(--gold-primary); box-shadow:0 0 12px rgba(212,175,55,.35); transform:translateY(-1px);
}
.submit-btn{
  width:100%; padding:1.1rem 1.25rem; background:var(--accent-gradient); color:var(--dark-primary);
  border:none; border-radius:12px; font-size:1.05rem; font-weight:700; cursor:pointer; transition:all .25s cubic-bezier(.4,0,.2,1);
  text-transform:uppercase; letter-spacing:.5px;
}
.submit-btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-gold); }
.contact-info{
  text-align:center; margin-top:0; padding:2rem;
  background:rgba(212,175,55,.1); border-radius:20px; border:1px solid rgba(212,175,55,.3);
  backdrop-filter:blur(20px); height:fit-content;
}
.contact-info h3{ color:var(--gold-primary); font-size:1.6rem; margin-bottom:1rem; }
.contact-info p{ font-size:1.05rem; margin-bottom:.75rem; }
.contact-info a{ color:var(--gold-primary); text-decoration:none; transition:.3s; }
.contact-info a:hover{ color:var(--gold-secondary); text-shadow:0 0 10px rgba(212,175,55,.6); }
.contact-promise{ margin-top:1rem; font-style:italic; color:var(--gold-primary); }

/* ============ Footer ============ */
footer{ background:var(--dark-primary); color:#fff; padding:4rem 2rem 2rem; border-top:1px solid rgba(212,175,55,.2); }
.footer-content{ max-width:1400px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:3rem; }
.footer-section h3{ color:var(--gold-primary); margin-bottom:1.5rem; font-size:1.5rem; }
.footer-section p{ margin-bottom:.5rem; color:rgba(255,255,255,.8); }
.footer-social{ display:flex; gap:1.5rem; margin-top:1.5rem; }
.footer-social a{ color:var(--gold-primary); font-size:2rem; transition:.4s cubic-bezier(.4,0,.2,1); display:block; padding:.5rem; border-radius:50%; }
.footer-social a:hover{ color:var(--gold-secondary); transform:scale(1.3) rotate(15deg); text-shadow:0 0 20px rgba(212,175,55,.8); }
.footer-bottom{
  border-top:1px solid rgba(212,175,55,.2); margin-top:3rem; padding-top:2rem; color:rgba(255,255,255,.6);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; text-align:center;
}
.code-btn{
  background:rgba(212,175,55,.1); color:var(--gold-primary); padding:.8rem 1.5rem; border:1px solid var(--gold-primary);
  border-radius:8px; text-decoration:none; font-size:1rem; transition:.4s cubic-bezier(.4,0,.2,1); backdrop-filter:blur(10px);
}
.code-btn:hover{ background:var(--gold-primary); color:var(--dark-primary); transform:translateY(-2px); box-shadow:var(--shadow-gold); }

/* ============ Bokeh en secciones ============ */
.about, .services, .gallery, .video-section, .contact{
  background-image:
    linear-gradient(135deg, rgba(10,10,10,0.90) 0%, rgba(26,26,26,0.96) 100%),
    var(--bokeh-bg);
  background-size:100% 100%, cover;
  background-position:center, center;
  background-repeat:no-repeat, no-repeat;
  background-attachment:scroll, fixed;   /* parallax leve desktop */
  background-blend-mode:overlay;
}
@keyframes bokehPan {
  0%   { background-position:center, center; }
  50%  { background-position:center, 52% 48%; }
  100% { background-position:center, center; }
}
.about, .services, .gallery, .video-section, .contact{ animation:bokehPan 24s ease-in-out infinite; }

/* ============ Hamburguesa ============ */
.hamburger{
  display:none; border:0; background:transparent; cursor:pointer; padding:.5rem; margin-left:.5rem;
}
.hamburger span{
  display:block; width:26px; height:2px; background:var(--gold-primary);
  border-radius:2px; margin:6px 0; transition:.25s ease;
}
.hamburger.active span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.hamburger.active span:nth-child(2){ opacity:0; }
.hamburger.active span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }
.no-scroll{ overflow:hidden !important; height:100%; }

/* ============ Animations ============ */
@keyframes logoFloat{
  from{ transform:translateY(0) scale(1); filter:drop-shadow(0 0 30px rgba(212,175,55,.8)) drop-shadow(0 10px 40px rgba(0,0,0,.8)) contrast(1.2) brightness(1.1); }
  to{ transform:translateY(-10px) scale(1.02); filter:drop-shadow(0 0 40px rgba(212,175,55,1)) drop-shadow(0 15px 50px rgba(0,0,0,.9)) contrast(1.3) brightness(1.2); }
}
@keyframes textGlow{ from{ text-shadow:2px 2px 10px rgba(0,0,0,.8);} to{ text-shadow:2px 2px 10px rgba(0,0,0,.8), 0 0 20px rgba(212,175,55,.5);} }
@keyframes float{ from{ transform:translateY(100vh) rotate(0); opacity:0;} 10%{opacity:.6;} 90%{opacity:.6;} to{ transform:translateY(-10px) rotate(360deg); opacity:0;} }
@keyframes pulse{ from{ transform:scaleX(1); opacity:1;} to{ transform:scaleX(1.1); opacity:.8;} }
@keyframes bounce{ 0%,20%,50%,80%,100%{transform:translateY(0);} 40%{transform:translateY(-10px);} 60%{transform:translateY(-5px);} }

/* ============ Mobile (≤768px) ============ */
@media (max-width:768px){

  :root{ --header-h: 64px; }                 /* header más compacto */

  /* Header */
  .social-header{ display:none; }            /* limpia el header */
  .hamburger{ display:block; }

  /* Panel de navegación móvil */
  .nav-links{
    position:fixed; top:var(--header-h); left:0; right:0;
    display:flex; flex-direction:column; gap:.25rem;
    padding:.75rem 1rem;
    background:rgba(10,10,10,.96);
    backdrop-filter:blur(16px);
    border-bottom:1px solid rgba(212,175,55,.25);
    transform:translateY(-120%); transition:transform .3s ease;
    z-index:999;
  }
  .nav-links.open{ transform:translateY(0); }
  .nav-links li{ list-style:none; }
  .nav-links a{ display:block; padding:.85rem 1rem; font-size:1.05rem; }

  /* Hero centrado y sin fixed bg en iOS */
  .hero{
    background-attachment:scroll, scroll;
    padding:2rem 1rem;
  }
  .hero-logo{ width:60vw; min-width:200px; margin-bottom:1.5rem; }

  /* Secciones: evitar huecos por min-height */
  .about, .services, .gallery, .video-section, .contact{
    min-height:auto !important;
    background-attachment:scroll, scroll;    /* quita fixed en móvil */
  }

  /* About apilado */
  .about-content{ grid-template-columns:1fr; text-align:center; gap:2rem; }
  .about-text{ font-weight:400; font-size:1.05rem; }
  .about-image::before{ inset:-12px; filter:blur(14px); }

  /* Services: una columna, sin huecos */
  .services{ padding:4rem 1rem; }
  .services-container{ margin-top:1.5rem; }
  .service-row{ grid-template-columns:1fr; gap:1.4rem; }
  .service-image img{ height:clamp(220px,45vw,300px); }
  .service-image::before{ inset:-12px; filter:blur(14px); }

  /* Contact apilado */
  .contact{ grid-template-columns:1fr; gap:1.25rem; }
  .contact > h2{ grid-column:1; }
}

/* ============ Tablet (≤1024px) ============ */
@media (max-width:1024px){
  .contact{ grid-template-columns:1fr; }
  .contact > h2{ grid-column:1; }
}

/* ---- Fix móvil: desactiva el reveal en phones ---- */
@media (max-width: 768px){
  .section{
    opacity: 1 !important;
    transform: none !important;
  }
  .section::before{
    transform: scaleX(1) !important;
  }
}

/* Poster (miniatura) con botón play */
.video-frame{ position:relative; }
.video-poster{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  border:0; cursor:pointer;
}
.video-poster::after{
  content:""; position:absolute; inset:0; background:rgba(0,0,0,.25);
}
.video-poster .play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:68px; height:68px; border-radius:50%;
  display:grid; place-items:center;
  font-size:28px; line-height:1; color:#000;
  background:var(--gold-primary);
  box-shadow:0 10px 30px rgba(212,175,55,.35);
}
.video-poster:hover .play{ transform:translate(-50%,-50%) scale(1.06); }

/* Centrado robusto del hero (incluye móviles) */
.hero{
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero-content{
  margin:0 auto;
  text-align:center;
}

/* Menos carga en móvil: oculta partículas en secciones (opcional) */
@media (max-width:768px){
  .section .particle{ display:none; }
}


/* Fallback opcional al aspect-ratio (antiguos Safari/Android) */
.video-slider{
  position: relative;
}
.video-slider::before{
  content:"";
  display:block;
  padding-top:56.25%; /* 16:9 */
}

/* ====== VIDEO SLIDER — limpio y sin scroll raro ====== */
.video-slider{
  position:relative;
  width:min(1200px, 92vw);
  margin:3rem auto 0;
  border-radius:25px;
  overflow:hidden;
  box-shadow:var(--shadow-dark);
  aspect-ratio:16/9;        /* proporción estable */
  min-height:320px;         /* fallback alto mínimo */
  background:rgba(0,0,0,.35);
}

/* Fallback de altura si un navegador ignora aspect-ratio */
@supports not (aspect-ratio: 16/9) {
  .video-slider::before{
    content:"";
    display:block;
    padding-top:56.25%;     /* 16:9 */
  }
}

.video-track{
  position:absolute;        /* SOLO el track es absoluto */
  inset:0;
  display:flex;
  height:100%;
  transition:transform .6s cubic-bezier(.4,0,.2,1);
  will-change:transform;
  overflow:hidden;          /* sin scroll interno */
}

.video-slide{
  flex:0 0 100%;
  height:100%;
}
.video-frame{
  position:relative;
  width:100%;
  height:100%;
}
.video-frame iframe{
  width:100%;
  height:100%;
  display:block;
  border:none;
}

.video-nav{
  position:absolute;
  top:50%; transform:translateY(-50%);
  width:44px; height:44px;
  display:grid; place-items:center;
  border-radius:50%;
  border:1px solid rgba(212,175,55,.6);
  background:rgba(10,10,10,.55);
  color:var(--gold-primary);
  cursor:pointer; z-index:3;
  transition:background .2s ease, transform .2s ease;
}
.video-nav:hover{ background:rgba(10,10,10,.75); transform:translateY(-50%) scale(1.03); }
.video-nav.prev{ left:10px; }
.video-nav.next{ right:10px; }

.video-indicators{
  position:absolute; left:50%; bottom:10px; transform:translateX(-50%);
  display:flex; gap:8px; z-index:3;
}
.video-indicator{
  width:8px; height:8px; border-radius:50%;
  background:rgba(212,175,55,.45);
  transition:transform .2s ease, background .2s ease;
}
.video-indicator.active{ background:var(--gold-primary); transform:scale(1.25); }

/* Móvil: tamaño equilibrado */
@media (max-width:768px){
  .video-slider{ width:96vw; border-radius:16px; }
  .video-nav{ width:36px; height:36px; }
}

/* Anti-scroll horizontal global por seguridad */
html, body { max-width:100%; overflow-x:hidden; }

.video-slider{
  position:relative;
  width:min(1200px, 92vw);
  margin:3rem auto 0;
  border-radius:25px;
  overflow:hidden;
  box-shadow:var(--shadow-dark);
  aspect-ratio:16/9;
  background:#000; /* negro de fondo mientras carga */
}
.video-track{
  position:absolute; inset:0;
  display:flex; height:100%;
  transition:transform .6s cubic-bezier(.4,0,.2,1);
  overflow:hidden;
}
.video-slide{ flex:0 0 100%; height:100%; }
.video-frame{ position:relative; width:100%; height:100%; }
.video-frame iframe{ width:100%; height:100%; border:none; display:block; }

/* Miniatura + botón play */
.video-thumb{
  position:relative;
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  background:#000;
}
.video-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Botón play */
.video-play{
  position:absolute;
  display:grid; place-items:center;
  width:72px; height:72px; border-radius:50%;
  border:1px solid rgba(212,175,55,.7);
  background:rgba(10,10,10,.55);
  color:var(--gold-primary);
  font-size:28px; line-height:1;
  cursor:pointer; z-index:2;
  transition:transform .2s ease, background .2s ease;
}
.video-play:hover{ transform:scale(1.06); background:rgba(10,10,10,.75); }

/* Link fallback */
.video-open-link{
  position:absolute; right:12px; bottom:12px;
  font-size:.9rem; text-decoration:none;
  color:var(--gold-primary);
  background:rgba(10,10,10,.55);
  border:1px solid rgba(212,175,55,.4);
  padding:.35rem .6rem; border-radius:8px;
}
.video-open-link:hover{ background:rgba(10,10,10,.75); }

/* === VIDEO SLIDER === */
.yt-slider{ max-width:min(1200px,92vw); margin:2rem auto 0; }
.yt-viewport{
  position:relative; width:100%; aspect-ratio:16/9;
  border-radius:20px; overflow:hidden; box-shadow:var(--shadow-dark);
  background:#000; /* fondo por si la mini tarda */
}
.yt-track{
  height:100%;
  display:flex; will-change:transform;
  transition:transform .45s cubic-bezier(.4,0,.2,1);
}
.yt-slide{
  flex:0 0 100%;
  height:100%;
  position:relative;
}

/* Póster visible SIEMPRE; si un adblock bloquea iframes, esto se sigue viendo */
.yt-poster{
  position:absolute; inset:0; display:grid; place-items:center;
  background:#000;
}
.yt-poster img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; display:block;
}

/* Botón play */
.yt-play{
  z-index:2; cursor:pointer;
  width:74px; height:74px; border-radius:50%;
  border:1px solid rgba(212,175,55,.75);
  background:rgba(10,10,10,.55);
  color:var(--gold-primary); font-size:28px; line-height:1;
  display:grid; place-items:center; transition:transform .2s ease, background .2s ease;
}
.yt-play:hover{ transform:scale(1.06); background:rgba(10,10,10,.75); }

/* Contenedor del iframe (rellena al 100%) */
.yt-frame, .yt-frame iframe{
  position:absolute; inset:0; width:100%; height:100%;
}
.yt-frame{ display:none; }           /* se muestra al hacer click */
.yt-frame.active{ display:block; }
.yt-poster.hidden{ display:none; }   /* se oculta cuando se carga el iframe */

/* Controles */
.yt-nav{
  margin-top:.75rem;
  width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(212,175,55,.5);
  background:rgba(10,10,10,.4); color:var(--gold-primary);
  cursor:pointer;
}
.yt-nav:hover{ background:rgba(10,10,10,.65); }
.yt-prev{ margin-right:.5rem; }
.yt-dots{ display:flex; justify-content:center; gap:.5rem; margin-top:1rem; }
.yt-dot{
  width:10px; height:10px; border-radius:50%;
  background:rgba(212,175,55,.35);
  cursor:pointer; transition:transform .2s ease, background .2s ease;
}
.yt-dot.active{ background:var(--gold-primary); transform:scale(1.2); }

/* Móvil: quepa perfecto */
@media (max-width:768px){
  .yt-slider{ margin-top:1rem; }
  .yt-nav{ width:40px; height:40px; }
}

/* === VIDEO SLIDER (parche de tamaño) === */
.yt-slider{
  width:min(1200px,92vw);      /* ancho explícito, no sólo max-width */
  max-width:100%;
  margin:2rem auto 0;
}

.yt-viewport{
  position:relative;
  width:100%;
  /* Fallback universal a aspect-ratio */
  /* (dejamos aspect-ratio también, por si el navegador sí lo soporta) */
  aspect-ratio:16/9;
  border-radius:20px;
  overflow:hidden;
  box-shadow:var(--shadow-dark);
  background:#000;
  min-height:220px;            /* por si la pantalla es muy angosta */
}

/* Fallback: crea la altura 16:9 con padding (si aspect-ratio falla) */
.yt-viewport::before{
  content:"";
  display:block;
  padding-top:56.25%;          /* 9 / 16 = 0.5625 */
}

/* Pone el track encima ocupando toda el área real */
.yt-track{
  position:absolute;
  inset:0;
  height:100%;
  display:flex;
  will-change:transform;
  transition:transform .45s cubic-bezier(.4,0,.2,1);
}

.yt-slide{
  flex:0 0 100%;
  height:100%;
  position:relative;
}

.yt-poster{
  position:absolute; inset:0; display:grid; place-items:center;
  background:#000;
}
.yt-poster img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; display:block;
}

/* botón play */
.yt-play{
  z-index:2; cursor:pointer;
  width:74px; height:74px; border-radius:50%;
  border:1px solid rgba(212,175,55,.75);
  background:rgba(10,10,10,.55);
  color:var(--gold-primary); font-size:28px; line-height:1;
  display:grid; place-items:center; transition:transform .2s ease, background .2s ease;
}
.yt-play:hover{ transform:scale(1.06); background:rgba(10,10,10,.75); }

/* iframe a toda el área */
.yt-frame,
.yt-frame iframe{
  position:absolute; inset:0; width:100%; height:100%;
}
.yt-frame{ display:none; }
.yt-frame.active{ display:block; }
.yt-poster.hidden{ display:none; }

/* Controles */
.yt-nav{
  margin-top:.75rem;
  width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(212,175,55,.5);
  background:rgba(10,10,10,.4); color:var(--gold-primary);
  cursor:pointer;
}
.yt-nav:hover{ background:rgba(10,10,10,.65); }
.yt-prev{ margin-right:.5rem; }
.yt-dots{ display:flex; justify-content:center; gap:.5rem; margin-top:1rem; }
.yt-dot{
  width:10px; height:10px; border-radius:50%;
  background:rgba(212,175,55,.35);
  cursor:pointer; transition:transform .2s ease, background .2s ease;
}
.yt-dot.active{ background:var(--gold-primary); transform:scale(1.2); }

@media (max-width:768px){
  .yt-slider{ width:94vw; }
  .yt-nav{ width:40px; height:40px; }
}
/* Contenedor principal de "Nosotros" → ahora apila filas */
.about-content{
  display:flex;
  flex-direction:column;
  gap:5rem;
  margin-top:2rem;
}

/* Cada fila: 2 columnas */
.about-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:5rem;
  align-items:center;
}

/* Fila alternada: invierte órdenes */
.about-row.reverse .about-text{ order:2; }
.about-row.reverse .about-image{ order:1; }

/* Responsive: apilar en móvil */
@media (max-width:768px){
  .about-row{
    grid-template-columns:1fr;
    gap:2rem;
    text-align:center;
  }
  .about-row.reverse .about-text,
  .about-row.reverse .about-image{
    order:initial;
  }
}



#reviews .review-item{border:1px solid #e6e6e6;padding:1rem;border-radius:10px;margin:.8rem 0;background:#fff}
#reviews img.avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;margin-right:.5rem}
#reviews .review-head{display:flex;align-items:center;gap:.5rem}
#reviews .small{color:#777;margin-left:.3rem}
#reviews textarea,input{width:100%;max-width:100%}