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

body{
font-family:'Playfair Display',serif;
color:#4a4a4a;
overflow-x:hidden;
}


/* ================= HEADER ================= */

.header{
position:fixed;
top:0;
left:0;
width:100%;
padding:20px 50px;
display:flex;
justify-content:space-between;
align-items:center;
z-index:1000;

background:rgba(255,255,255,0.15);
backdrop-filter: blur(10px);
}

.logo{
height:55px;
}


/* ================= NAV ================= */

.nav a{
position:relative;
color:#2f2a5a;
margin-left:30px;
text-decoration:none;
font-size:14px;
letter-spacing:1px;
font-weight:600;
transition:0.3s;
text-shadow:0 1px 2px rgba(255,255,255,0.6);
}

.nav a::after{
content:"";
position:absolute;
left:0;
bottom:-6px;
width:0%;
height:2px;
background:linear-gradient(90deg,#d4af37,#f5d77a,#d4af37);
transition:0.3s;
}

.nav a:hover::after{
width:100%;
}

.nav a:hover{
color:#1a1833;
}


/* ================= HERO BASE ================= */

.hero{
min-height:100vh;
display:flex;
align-items:center;
justify-content:flex-end; /* index a la derecha */
padding:140px 8% 60px;
position:relative;
background:url("fondo_inicio.png") center/cover no-repeat;
}


/* ================= HERO INDEX AJUSTE FINO ================= */

.hero-content{
position:relative;
z-index:2;
max-width:850px;
width:100%;
text-align:center;
margin-right:5%;

/* 🔥 AJUSTE FINO PARA SUBIR EL CONTENIDO */
transform: translateY(-50px);
}


/* ================= HERO MENU (OTRAS PÁGINAS) ================= */

body.menu .hero{
background:url("fondo.png") center/cover no-repeat;
}

body.menu .hero-content{
margin:0 auto;
text-align:center;
transform:none; /* 🔥 evita que suba en otras páginas */
}


/* ================= OVERLAY ================= */

.overlay{
position:absolute;
inset:0;
z-index:1;
pointer-events:none;

background:linear-gradient(
to right,
rgba(0,0,0,0.2),
rgba(0,0,0,0.08),
rgba(255,255,255,0.05)
);
}


/* ================= LOGO ================= */

.hero-logo{

    width: 220px;

    margin-top: 5px;

    margin-bottom: 25px;
}


/* ================= TEXTOS ================= */

h1{
font-family:'Cinzel';
font-size:64px;
color:#2f2a5a;
letter-spacing:2px;
}

h2{
font-size:26px;
color:#6f5aa6;
margin-bottom:40px;
}

.hero-line{
font-weight:600;
font-size:18px;
color:#2f2a5a;
margin-bottom:10px;
}


/* ================= COLUMNAS ================= */

.hero-columns{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:40px;
margin-bottom:40px;
}

.col{
position:relative;
padding:0 25px;
font-size:16px;
line-height:1.6;
}

.hero-columns .col p{
color:#2f2a5a;
font-weight:600;
}


/* ================= ICONOS ================= */

.col::before{
display:block;
font-size:22px;
margin-bottom:12px;
color:#d4af37;
}

.col:nth-child(1)::before{ content:"✦"; }
.col:nth-child(2)::before{ content:"✧"; }
.col:nth-child(3)::before{ content:"✦"; }


/* ================= LINEAS ================= */

.col:not(:last-child)::after{
content:"";
position:absolute;
right:-20px;
top:15%;
width:2px;
height:70%;
background:#d4af37;
}


/* ================= BOTON ================= */

.btn{
display:inline-block;
margin-top:10px;
background:linear-gradient(135deg,#cdb4db,#90caf9);
padding:14px 40px;
border-radius:50px;
color:#2f2a5a;
text-decoration:none;
font-weight:600;
box-shadow:0 10px 25px rgba(0,0,0,0.25);
transition:0.3s;
}

.btn:hover{
transform:translateY(-3px);
box-shadow:0 15px 30px rgba(0,0,0,0.35);
}


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

.whatsapp{
position:fixed;
bottom:20px;
right:20px;
width:65px;
height:65px;
background:#25D366;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 8px 20px rgba(0,0,0,0.25);
z-index:999;
transition:0.3s;
}

.whatsapp img{
width:32px;
}

.whatsapp:hover{
transform:scale(1.1);
}


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

@media(max-width:900px){

.hero{
justify-content:center;
padding:140px 20px 60px;
}

.hero-columns{
grid-template-columns:1fr;
gap:25px;
}

.col::after{
display:none;
}

h1{
font-size:42px;
}

h2{
font-size:20px;
}

}

/* ================= SERVICIOS - FIX FINAL REAL ================= */

/* GRID */
body.menu .grid-servicios{
  display:grid;
  grid-template-columns:repeat(4, 260px);
  justify-content:center;
  gap:30px;
  padding:40px 0 80px;
}


/* ================= CARD ================= */

body.menu .card{
  width:260px;
  height:500px;

  background:#f4f1ee;
  border-radius:18px;

  display:flex;
  flex-direction:column;

  padding:16px;

  box-shadow:0 10px 25px rgba(0,0,0,0.12);
  transition:0.3s;
}

body.menu .card:hover{
  transform:translateY(-5px);
}


/* ================= IMAGEN ================= */

body.menu .card-img{
  background:#f4f1ee;
  padding:10px;
  border-radius:14px;
}

body.menu .card-img img{
  width:100%;
  height:240px;

  object-fit:contain; /* 🔥 NO corta la imagen */
  object-position:center;

  border-radius:12px;
  display:block;
}


/* ================= CONTENIDO ================= */

body.menu .card-body{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;

  flex-grow:1;
  margin-top:10px;
}


/* ================= TITULO ================= */

body.menu .card-body h3{
  font-size:18px;
  color:#2f2a5a;

  margin-bottom:8px;
  min-height:45px;
}


/* ================= TEXTO ================= */

body.menu .card-body p{
  font-size:14px;
  color:#555;
  line-height:1.4;

  min-height:55px;
}


/* ================= BOTÓN ================= */

body.menu .btn-card{
  margin-top:auto;     /* 🔥 SIEMPRE ABAJO */
  margin-bottom:10px;

  padding:10px 22px;

  border-radius:25px;
  border:2px solid #2f2a5a;

  background:#fff;
  color:#2f2a5a;

  font-weight:600;
  font-size:14px;

  text-decoration:none;
  display:inline-block;

  transition:0.3s;
}

body.menu .btn-card:hover{
  background:#2f2a5a;
  color:#fff;
}

/* ================= FIX HERO SERVICIOS ================= */

/* 🔥 fondo en TODA la página */
body.menu{
  background: url("fondo.png") center/cover no-repeat fixed;
}


/* 🔥 achica el hero (cabecera) */
body.menu .hero.hero-servicios{
  background: none;           /* 🔥 elimina fondo duplicado */

  padding:135px 8% 10px;      /* 🔥 baja el título sin taparlo */

  height:auto;
  min-height:0;

  display:flex;
  align-items:center;
  justify-content:center;
}


/* 🔥 texto más cerca */
body.menu .hero.hero-servicios .hero-content{
  transform:none;
}


/* 🔥 elimina separación blanca entre hero y cards */
body.menu main{
  margin-top:-20px; /* 🔥 menos agresivo */
}

/* ================= DETALLE SERVICIOS ================= */

.detalle-servicio{
  padding:40px 20px 80px;
  display:flex;
  justify-content:center;
}

/* caja blanca */
.contenido-servicio{
  background:rgba(255,255,255,0.9);
  backdrop-filter:blur(6px);

  max-width:900px;
  width:100%;

  padding:50px;
  border-radius:20px;

  box-shadow:0 15px 40px rgba(0,0,0,0.15);
}

/* títulos */
.contenido-servicio h3{
  font-family:'Cinzel';
  color:#2f2a5a;
  margin-bottom:15px;
  margin-top:30px;
}

/* texto */
.contenido-servicio p{
  font-size:16px;
  line-height:1.7;
  color:#444;
}

/* ================= BOTÓN DETALLE SERVICIO ================= */

.cta-servicio{
  margin-top:30px;
  display:flex;
  justify-content:center;
}

/* botón pro */
.btn-consultar{
  background:linear-gradient(135deg,#cdb4db,#90caf9);
  color:#2f2a5a;

  padding:14px 36px;
  border-radius:40px;

  font-size:15px;
  font-weight:600;
  text-decoration:none;

  box-shadow:0 10px 25px rgba(0,0,0,0.2);
  transition:0.3s;
}

/* hover */
.btn-consultar:hover{
  transform:translateY(-3px);
  box-shadow:0 15px 30px rgba(0,0,0,0.3);
}

/* ================= CTA PREMIUM ================= */

.cta-servicio{
  margin-top:40px;
  display:flex;
  justify-content:center;
}

/* botón */
.btn-consultar{
  display:inline-flex;
  align-items:center;
  gap:10px;

  background:linear-gradient(135deg,#cdb4db,#90caf9);
  color:#2f2a5a;

  padding:16px 36px;
  border-radius:40px;

  font-size:16px;
  font-weight:600;
  text-decoration:none;

  box-shadow:0 10px 25px rgba(0,0,0,0.25);

  transition:all 0.3s ease;
}

/* icono */
.icono-whatsapp{
  display:flex;
  align-items:center;
  justify-content:center;
}

/* hover */
.btn-consultar:hover{
  transform:translateY(-4px) scale(1.03);
  box-shadow:0 18px 35px rgba(0,0,0,0.35);
}

/* efecto sutil al click */
.btn-consultar:active{
  transform:scale(0.98);
}

body{
  font-family:'Playfair Display', serif;
}

h1, h2, h3{
  font-family:'Cinzel', serif;
}

/* ================= BOTÓN WHATSAPP SERVICIO ================= */

.btn-consultar{
  display:inline-flex;
  align-items:center;
  gap:10px;

  margin-top:20px;

  padding:12px 26px;
  border-radius:30px;

  background:#8FE3B3; /* 🔥 verde pastel */
  color:#1f4f3a;      /* texto más oscuro para contraste suave */

  font-weight:600;
  font-size:14px;

  text-decoration:none;

  transition:0.3s;
}

.btn-consultar:hover{
  background:#7bd9a6; /* un poco más intenso al hover */
  transform:translateY(-2px);
}

/* icono */
.icono-wsp{
  width:20px;
  height:20px;
}

/* ================= AJUSTE TIPOGRAFÍA SERVICIOS ================= */

/* título principal */
body.menu .hero.hero-servicios h1{
  font-size:56px; /* antes ~64 */
}

/* subtítulo */
body.menu .hero.hero-servicios h2{
  font-size:22px; /* antes ~26 */
}

/* línea secundaria */
body.menu .hero.hero-servicios .hero-line{
  font-size:16px; /* antes ~18 */
}

/* contenido */
.contenido-servicio p{
  font-size:15px; /* antes ~16 */
}

/* subtítulos internos */
.contenido-servicio h3{
  font-size:20px;
}

/* ================= AUDIO PLAYER ================= */

#player{
   position:fixed;
  bottom:25px;
  left:25px;
}

  display:flex;
  align-items:center;
  gap:12px;

  padding:12px 18px;

  border-radius:40px;

  background:rgba(255,255,255,0.12);
  backdrop-filter:blur(12px);

  border:1px solid rgba(212,175,55,0.3);

  box-shadow:0 0 20px rgba(212,175,55,0.25);

  z-index:999;
}

/* botón */
#play{
  border:none;
  background:none;
  font-size:18px;
  color:#d4af37;
  cursor:pointer;
  transition:0.3s;
}

/* activo */
#play.active{
  color:#f5d77a;
  transform:scale(1.2);
  text-shadow:0 0 10px rgba(212,175,55,0.8),
              0 0 20px rgba(212,175,55,0.6);
}

/* barras */
#player input[type="range"]{
  appearance:none;
  height:3px;
  border-radius:10px;
  background:rgba(212,175,55,0.6);
  cursor:pointer;
}

/* tamaños */
#progress{
  width:100px;
}

#volume{
  width:60px;
}

/* animación sutil */
@keyframes aura {
  0% { box-shadow:0 0 10px rgba(212,175,55,0.3); }
  50% { box-shadow:0 0 25px rgba(212,175,55,0.6); }
  100% { box-shadow:0 0 10px rgba(212,175,55,0.3); }
}

#player{
  animation:aura 4s infinite;
}

.footer{
  width:100%;
  text-align:center;

  padding:18px 10px;

  font-size:13px;
  letter-spacing:1px;

  color:#6f5aa6;

  background:linear-gradient(
    to top,
    rgba(255,255,255,0.15),
    rgba(255,255,255,0.05)
  );

  backdrop-filter:blur(12px);

  border-top:1px solid rgba(212,175,55,0.4);

  box-shadow:0 -5px 20px rgba(0,0,0,0.15);
}

/* ================= SOBRE IRIS ================= */

.sobre-iris{
  display:flex;
  justify-content:center;
  padding:40px 20px 80px;
}

/* CAJA BLANCA CENTRADA */
.iris-container{
  max-width:900px;
  width:100%;

  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(8px);

  padding:50px 45px;
  border-radius:20px;

  box-shadow:0 20px 50px rgba(0,0,0,0.2);
}

/* FOTO */
.iris-img{
  text-align:center;
  margin-bottom:30px;
}

.iris-img img{
  width:200px;
  height:200px;
  border-radius:50%;
  object-fit:cover;

  box-shadow:0 10px 25px rgba(0,0,0,0.25);
}

/* TEXTO */
.iris-texto{
  text-align:left;
}

.iris-texto p{
  font-size:15px;
  line-height:1.8;
  color:#444;
  margin-bottom:18px;
}

/* TITULOS */
.iris-texto h3{
  font-family:'Cinzel';
  color:#2f2a5a;
  margin-top:30px;
  margin-bottom:10px;
}

/* FRASE FINAL */
.iris-texto em{
  display:block;
  text-align:center;
  margin-top:25px;
  color:#6f5aa6;
  font-style:italic;
}

/* ================= GALERIA IRIS ================= */

.iris-galeria{
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap:40px;

  margin-top:40px;
  margin-bottom:40px;
}

/* marco base */
.iris-frame{
  position:relative;

  padding:10px;
  border-radius:20px;

  background:linear-gradient(145deg,#d4af37,#f5d77a,#d4af37);

  box-shadow:0 10px 30px rgba(0,0,0,0.3);

  transition:0.4s;
}

/* imagen */
.iris-frame img{
  width:180px;
  height:260px;
  object-fit:cover;

  border-radius:15px;
  display:block;
}

/* efecto mágico */
.iris-frame::after{
  content:"";
  position:absolute;
  inset:-5px;

  border-radius:25px;

  background:radial-gradient(circle, rgba(212,175,55,0.4), transparent 70%);
  opacity:0.6;
  z-index:-1;
}

/* posiciones */

.iris-frame.left{
  transform:rotate(-6deg) translateY(20px);
}

.iris-frame.center{
  transform:scale(1.1);
  z-index:2;
}

.iris-frame.right{
  transform:rotate(6deg) translateY(20px);
}

/* hover (queda increíble) */
.iris-frame:hover{
  transform:scale(1.15) rotate(0deg);
  z-index:3;
}

.iris-nombre{
  text-align:center;
  font-family:'Cinzel';
  color:#2f2a5a;
  margin-bottom:20px;
}

/* ================= TESTIMONIOS ================= */

.testimonios{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:40px;

  padding:40px 20px 80px;
}

/* TEXTO (arriba y abajo) */
.testimonio-texto{
  width:100%;
  display:flex;
  justify-content:center;
}

/* GALERÍA */
.testimonios-galeria{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:25px;
}

/* FILAS */
.fila{
  display:flex;
  justify-content:center;
  gap:20px;
}

/* IMÁGENES (todas iguales) */
.fila img{
  width:180px;
  height:320px;
  object-fit:cover;

  border-radius:18px;
  background:white;
  padding:6px;

  box-shadow:0 15px 35px rgba(0,0,0,0.25);
  transition:0.3s;
}

/* HOVER */
.fila img:hover{
  transform:scale(1.05);
}

/* ================= LIGHTBOX ================= */

#lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.8);

  display:none;
  align-items:center;
  justify-content:center;

  z-index:9999;
}

/* imagen grande */
#lightbox img{
  max-width:90%;
  max-height:90%;
  border-radius:10px;

  box-shadow:0 20px 50px rgba(0,0,0,0.5);
}

/* cerrar */
#close{
  position:absolute;
  top:20px;
  right:30px;

  font-size:40px;
  color:white;
  cursor:pointer;
}

/* ================= CONTACTO ================= */

.contacto{
  display:flex;
  justify-content:center;
  align-items:center;

  padding:80px 20px 100px; /* aire arriba y abajo */
  margin-top:40px;         /* separa del hero */
}

/* CAJA BLANCA */
.iris-container{
  max-width:700px;
  width:100%;

  background:rgba(255,255,255,0.9);
  backdrop-filter:blur(6px);

  padding:40px;
  border-radius:20px;

  box-shadow:0 15px 40px rgba(0,0,0,0.15);
}

/* TEXTO SUPERIOR */
.contacto p{
  text-align:center;
  font-size:15px;
  color:#444;
  margin-bottom:20px;
}

/* FORM */
.contacto form{
  display:flex;
  flex-direction:column;
  gap:15px;
}

/* INPUTS */
.contacto input,
.contacto textarea{
  padding:14px;
  border-radius:12px;
  border:none;

  background:#f4f1ee;
  font-family:'Playfair Display', serif;
  font-size:14px;

  transition:0.3s;
}

/* FOCUS */
.contacto input:focus,
.contacto textarea:focus{
  outline:none;
  box-shadow:0 0 0 2px #cdb4db;
}

/* TEXTAREA */
.contacto textarea{
  min-height:140px;
  resize:none;
}

/* BOTÓN */
.contacto button{
  margin-top:10px;

  padding:16px;
  border:none;
  border-radius:40px;

  background:#25D366;
  color:white;

  font-size:15px;
  font-weight:600;

  cursor:pointer;

  box-shadow:0 10px 25px rgba(0,0,0,0.25);
  transition:0.3s;
}

/* HOVER */
.contacto button:hover{
  transform:translateY(-3px);
  box-shadow:0 15px 30px rgba(0,0,0,0.35);
}

/* CLICK */
.contacto button:active{
  transform:scale(0.98);
}

/* ================= MOBILE FULL ================= */

@media(max-width:900px){

  /* ===== HEADER ===== */
  .header{
    padding:15px 20px;
  }

  .logo{
    height:45px;
  }

  /* ===== NAV SIMPLE (VISIBLE) ===== */
  .nav{
    display:flex;
    flex-direction:column;
    position:absolute;
    top:70px;
    right:15px;

    background:rgba(255,255,255,0.95);
    backdrop-filter:blur(10px);

    padding:15px 20px;
    border-radius:12px;

    box-shadow:0 10px 25px rgba(0,0,0,0.2);
  }

  .nav a{
    margin:8px 0;
    font-size:13px;
  }

  /* ===== HERO ===== */
  .hero{
    min-height:auto;
    padding:100px 20px 40px;

    justify-content:center;
    text-align:center;
  }

  .hero-content{
    margin:0;
    transform:none;
  }

  /* ===== LOGO HERO ===== */
  .hero-logo{
    width:200px;
    margin-bottom:10px;
  }

  /* ===== TITULOS ===== */
  h1{
    font-size:38px;
  }

  h2{
    font-size:18px;
    margin-bottom:20px;
  }

  /* ===== COLUMNAS ===== */
  .hero-columns{
    grid-template-columns:1fr;
    gap:15px;
  }

  .col{
    padding:0;
  }

  .col::after{
    display:none;
  }

  .hero-line{
    font-size:16px;
  }

  .col p{
    font-size:14px;
  }

  /* ===== SERVICIOS ===== */
  body.menu .grid-servicios{
    grid-template-columns:1fr;
    gap:25px;
  }

  body.menu .card{
    width:100%;
    height:auto;
  }

  /* ===== DETALLE ===== */
  .contenido-servicio{
    padding:25px;
  }

  /* ===== GALERIA IRIS ===== */
  .iris-galeria{
    flex-direction:column;
    align-items:center;
    gap:20px;
  }

  .iris-frame{
    transform:none !important;
  }

  .iris-frame img{
    width:200px;
    height:280px;
  }

  /* ===== TESTIMONIOS ===== */
  .fila{
    flex-wrap:wrap;
    justify-content:center;
  }

  .fila img{
    width:45%;
    height:auto;
  }

  /* ===== CONTACTO ===== */
  .contacto{
    padding:60px 15px 80px;
    margin-top:20px;
  }

  .contacto .iris-container{
    padding:25px;
  }

  .contacto input,
  .contacto textarea{
    width:100%;
  }

  /* ===== WHATSAPP ===== */
  .whatsapp{
    width:55px;
    height:55px;
    bottom:15px;
    right:15px;
  }

  .whatsapp img{
    width:28px;
  }

  /* ===== PLAYER ===== */
  #player{
    bottom:15px;
    left:15px;
    padding:8px 12px;
    gap:8px;
  }

  #progress{
    width:70px;
  }

  #volume{
    width:45px;
  }

  /* ===== FOOTER ===== */
  .footer{
    font-size:12px;
    padding:15px;
  }

}

/* BOTON HAMBURGUESA */
.menu-toggle{
  display:none;
  font-size:28px;
  color:#2f2a5a;
  cursor:pointer;
}

/* MOBILE */
@media(max-width:900px){

  .menu-toggle{
    display:block;
    font-size:26px;
    cursor:pointer;
    z-index:1001;
  }

  /* 🔥 FORZAMOS OCULTO */
  .nav{
    display:none !important;
  }

  /* 🔥 FORZAMOS MOSTRAR */
  .nav.active{
    display:flex !important;
    flex-direction:column;

    position:absolute;
    top:70px;
    right:20px;

    background:white;
    padding:15px 20px;
    border-radius:12px;

    box-shadow:0 10px 25px rgba(0,0,0,0.2);
  }

}

---TEXTO HERO----

@media(max-width:900px){

  .hero{
    padding:80px 20px 20px; /* 🔥 menos aire arriba y abajo */
  }

  .hero-content{
    transform:none;
    margin-top:-30px; /* 🔥 SUBE TODO */
  }

  .hero-logo{
    width:260px;
    margin-bottom:10px;
  }

  .hero-columns{
    margin-top:10px;
    margin-bottom:20px;
    gap:15px;
  }

  .hero-line{
    font-size:16px;
  }

}

@media(max-width:900px){

  /* 🔥 achica header */
  .header{
    padding:12px 20px;
  }

  /* 🔥 logo header más chico */
  .logo{
    height:40px;
  }

  /* 🔥 HERO más compacto */
  .hero{
    padding:70px 20px 20px; /* menos aire */
    align-items:flex-start; /* 🔥 sube contenido */
  }

  /* 🔥 LOGO CENTRAL */
  .hero-logo{
    width:230px;   /* antes 400 desktop */
    margin-bottom:8px;
  }

  /* 🔥 CONTENIDO SUBE */
  .hero-content{
    margin-top:-20px; /* 🔥 clave */
  }

  /* 🔥 TEXTO MÁS CERCA */
  .hero-columns{
    margin-top:5px;
    margin-bottom:15px;
    gap:12px;
  }

  .hero-line{
    font-size:15px;
  }

  .col{
    font-size:14px;
    line-height:1.5;
  }

}

@media(max-width:900px){

  /* contenedor general */
  body.menu .grid-servicios{
    grid-template-columns:1fr; /* 1 columna */
    gap:25px;

    padding:20px 15px 60px; /* 🔥 aire lateral */
  }

  /* card */
  body.menu .card{
    width:100%;         /* ocupa el ancho disponible */
    max-width:320px;    /* 🔥 NO se estira demasiado */
    margin:0 auto;      /* 🔥 centrada */
  }

}

/* ================= MOBILE INICIO FINAL ================= */

@media (max-width:900px){

  /* HERO */
  .hero{
    min-height:100vh;
    padding:100px 20px 60px;

    display:flex;
    justify-content:center;
    align-items:center;
  }

  .hero-content{
    width:100%;
    max-width:340px;

    margin:0 auto;
    transform:none;

    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:20px;
  }

  .hero-logo{
    width:200px;
  }

  /* TEXTO */
  .hero-columns{
    width:100%;

    background:rgba(255,255,255,0.65);
    backdrop-filter:blur(12px);

    padding:20px;
    border-radius:18px;

    display:flex;
    flex-direction:column;
    gap:16px;
  }

  .hero-line,
  .hero-columns p{
    color:#1f1c3a;
    font-size:14px;
    line-height:1.5;
  }

  /* TESTIMONIOS */
  body.menu .hero.hero-servicios h1{
    font-size:30px;
    text-align:center;
    padding:0 10px;
  }

}

/* BOTÓN MÚSICA - FIJO Y SIMPLE */
#music-btn{
  position:fixed;

  bottom:25px;
  left:25px;

  width:48px;
  height:48px;

  border-radius:50%;
  border:none;

  background:radial-gradient(circle, #f5d77a, #d4af37);

  display:flex;
  align-items:center;
  justify-content:center;

  cursor:pointer;

  box-shadow:
    0 0 10px rgba(212,175,55,0.6),
    0 8px 20px rgba(0,0,0,0.25);

  z-index:9999;
}

/* icono */
#music-btn::after{
  content:"♪";
  font-size:18px;
  color:#2f2a5a;
}

/* activo */
#music-btn.active::after{
  content:"♫";
}

/* contenedor relativo para las ondas */
#music-btn{
  position:fixed;
}

/* ondas */
#music-btn::before{
  content:"";
  position:absolute;

  width:100%;
  height:100%;

  border-radius:50%;

  background:rgba(212,175,55,0.4);

  transform:scale(1);
  opacity:0;

  z-index:-1;
}

/* cuando está activo */
#music-btn.active::before{
  animation:ondas 1.8s infinite;
}

/* animación */
@keyframes ondas{
  0%{
    transform:scale(1);
    opacity:0.6;
  }
  70%{
    transform:scale(2.2);
    opacity:0;
  }
  100%{
    opacity:0;
  }
}

/* ================= FIX COLUMNAS HERO ================= */

/* 🔥 GRID */
.hero-columns{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
  margin-bottom:40px;
}

/* 🔥 TODAS LAS COLUMNAS (FORZADO) */
.hero-columns .col{
  position:relative;

  padding:20px;
  border-radius:16px;

  /* 🔥 FONDO UNIFICADO (EL CORRECTO) */
  background:rgba(255,255,255,0.28) !important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);

  box-shadow:0 10px 30px rgba(0,0,0,0.15);
}

/* 🔥 FORZAR TAMBIÉN LA PRIMERA (ACÁ ESTABA EL BUG) */
.hero-columns .col:first-child{
  background:rgba(255,255,255,0.28) !important;
}

/* 🔥 ELIMINAR FONDOS INTERNOS */
.hero-columns .col p,
.hero-columns .col span,
.hero-columns .col div{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}

/* 🔥 TEXTO */
.hero-columns .col p{
  color:#2f2a5a;
  font-weight:600;
  text-align:center;
}

/* 🔥 ICONO */
.col::before{
  display:block;
  font-size:22px;
  margin-bottom:12px;
  color:#d4af37;
}

/* 🔥 SEPARADORES */
.col:not(:last-child)::after{
  content:"";
  position:absolute;
  right:-20px;
  top:15%;
  width:2px;
  height:70%;
  background:#d4af37;
}

@media (max-width:900px){

  /* HERO GENERAL */
  .hero{
    padding:90px 20px 40px;
    align-items:flex-start;
  }

  .hero-content{
    max-width:100%;
    margin:0 auto;
    transform:none;
  }

  .hero-logo{
    width:220px;
    margin-bottom:15px;
  }

  /* 🔥 COLUMNAS → UNA SOLA COLUMNA */
  .hero-columns{
    display:flex;
    flex-direction:column;
    gap:15px;

    margin-top:15px;
    margin-bottom:25px;

    background:none; /* 🔥 sacamos fondo global */
    backdrop-filter:none;
    padding:0;
  }

  /* 🔥 CARDS (más compactas) */
  .hero-columns .col{
    width:100%;
    padding:16px;

    border-radius:14px;

    background:rgba(255,255,255,0.75); /* 🔥 más sólido en mobile */
    backdrop-filter:blur(6px);

    box-shadow:0 8px 20px rgba(0,0,0,0.15);
  }

  /* 🔥 TEXTO */
  .hero-columns .col p{
    font-size:14px;
    line-height:1.5;
  }

  /* 🔥 SACAR LÍNEAS VERTICALES */
  .col::after{
    display:none;
  }

  /* 🔥 ICONO MÁS CHICO */
  .col::before{
    font-size:18px;
    margin-bottom:8px;
  }

  /* 🔥 BOTÓN */
  .btn{
    width:100%;
    text-align:center;
    padding:14px;
  }

}

/* =========================
   HERO PRINCIPAL
========================= */

.hero{

    min-height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 120px 20px 70px;

    position: relative;

}

/* =========================
   CONTENIDO HERO
========================= */

.hero-content{

    width: 100%;
    max-width: 1200px;

    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;

    text-align: center;

    position: relative;
    z-index: 5;

}

/* =========================
   LOGO
========================= */

.hero-logo{

    width: 260px;

    margin-bottom: 50px;

    display: block;

    position: relative;
    top: 40px;

    filter:
    drop-shadow(0 0 25px rgba(255,215,120,.20));

}

/* =========================
   VIDEO
========================= */

.floating-video{

    width: 800px;
    height: 500px;

    margin: 0 auto 35px auto;

    border-radius: 26px;

    overflow: hidden;

    border:
    2px solid rgba(212,175,55,.55);

    background:
    rgba(10,10,10,.25);

    box-shadow:
    0 0 30px rgba(255,215,120,.20),
    0 0 70px rgba(180,120,255,.16);

}

/* VIDEO */

.floating-video video{

    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    background: #000;

}

/* =========================
   COLUMNAS TEXTO
========================= */

.hero-columns{

    width: 100%;

    display: flex;

    justify-content: center;
    align-items: stretch;

    gap: 18px;

    flex-wrap: wrap;

    margin-bottom: 50px;

}

/* TARJETAS */

.hero-columns .col{

    width: 300px;

    min-height: 140px;

    padding: 24px 22px;

    border-radius: 22px;

    background:
    rgba(255,255,255,.18);

    backdrop-filter: blur(10px);

    box-shadow:
    0 10px 30px rgba(0,0,0,.10);

    text-align: center;

    display: flex;
    justify-content: center;
    align-items: center;

}

/* TEXTO */

.hero-columns p{

    margin: 0;

    line-height: 1.7;
}

/* =========================
   BOTON
========================= */

.btn{

    margin-top: 10px;

}

/* =========================
   MOBILE
========================= */

@media(max-width: 900px){

    .hero{

        padding:
        90px 20px 50px;
    }

    /* LOGO */

    .hero-logo{

    width: 220px;

    margin-top: -45px;

    margin-bottom: 25px;
}

    /* VIDEO */

    .floating-video{

        width: 100%;
        max-width: 360px;

        height: 210px;

        margin-bottom: 25px;
    }

    /* COLUMNAS */

    .hero-columns{

        flex-direction: column;

        align-items: center;

        gap: 14px;
    }

    .hero-columns .col{

        width: 100%;

        min-height: auto;
    }

}