@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

:root {
    --gold-primary: #d4af37;
    --gold-light: #f7eabc;
    --gold-dark: #b8860b;
    --dark: #222;
    --light: #ffffff;
    --gray: #f6f6f6;
}

/*--------------------------------------------------------------
  RESET + FIX DESBORDAMIENTO
--------------------------------------------------------------*/
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Montserrat', sans-serif; }
html { scroll-behavior: smooth; overflow-x: clip; }   /* sin scroll lateral */
body { background: var(--light); width: 100%; overflow-x: hidden; }

/*--------------------------------------------------------------
  CONTENEDOR GENÉRICO
--------------------------------------------------------------*/
.container { max-width: 1200px; width: 100%; margin: 0 auto; padding: 0 15px; }

/*--------------------------------------------------------------
  HEADER
--------------------------------------------------------------*/
.header { position: fixed; top: 0; left: 0; width: 100%; background: transparent;
          box-shadow: none; z-index: 1000; transition: all .3s ease; padding: 10px 0; }
.header.scrolled { background: rgba(255,255,255,.95);
                   box-shadow: 0 2px 10px rgba(0,0,0,.1); padding: 5px 0; }

.header-container { max-width: 1200px; width: 100%; margin: 0 auto;
                    padding: 0 15px; display: flex; justify-content: space-between; align-items: center; }

.logo { display: flex; align-items: center; }
.logo-img { height: 60px; margin-right: 8px; border-radius: 20%; }
.logo-text { font-size: clamp(18px, 2.5vw, 22px); font-weight: 700; color: var(--light); }
.header.scrolled .logo-text { color: var(--dark); }
.logo-text span { color: var(--gold-primary); }

/* navegación desktop */
.nav-menu { display: flex; list-style: none; }
.nav-item { margin-left: 25px; }
.nav-link { color: var(--light); text-decoration: none; font-weight: 500;
            font-size: clamp(14px, 1.8vw, 15px); position: relative; transition: color .3s ease; }
.header.scrolled .nav-link { color: var(--dark); }
.nav-link:hover { color: var(--gold-primary); }
.header.scrolled .nav-link:hover { color: var(--gold-primary); }
.nav-link::after { content: ''; position: absolute; left: 0; bottom: -5px; width: 0; height: 2px;
                   background: var(--gold-primary); transition: width .3s ease; }
.nav-link:hover::after { width: 100%; }

/* botón cerrar dentro del off-canvas */
.close-menu { display: none; position: absolute; top: 10px; right: 15px; padding: 10px;
              font-size: 24px; cursor: pointer; color: var(--dark); z-index: 1001; }

/* hamburguesa (oculta en desktop) */
.hamburger { display: none; cursor: pointer; z-index: 1001; }
.bar { width: 25px; height: 3px; margin: 5px auto; background: var(--light); transition: all .3s ease; }
.header.scrolled .bar { background: var(--dark); }
.hamburger.active .bar:nth-child(2) { opacity: 0; }
.hamburger.active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger.active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/*--------------------------------------------------------------
  HERO
--------------------------------------------------------------*/
.hero { width: 100%; height: 100vh; overflow: hidden;
        background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)),
                    url('Imagenes/fondohiru.jpg') center/cover no-repeat;
        display: flex; align-items: center; justify-content: center; text-align: center; color: var(--light); }
.hero-content { max-width: 800px; width: 90%; padding: 0 15px;
               opacity: 0; transform: translateY(50px); animation: fadeInUp 1s forwards .5s; }
.hero-title { font-size: clamp(28px, 5vw, 48px); font-weight: 700; margin-bottom: 20px;
             background: linear-gradient(to right, var(--gold-light), var(--gold-primary), var(--gold-dark));
             -webkit-background-clip: text; -webkit-text-fill-color: transparent;
             text-shadow: 0 2px 10px rgba(0,0,0,.2); }
.hero-subtitle { font-size: clamp(16px, 2.5vw, 20px); margin-bottom: 25px; }
.btn { display: inline-block; padding: 12px 25px; border-radius: 50px; background: var(--gold-primary);
      color: var(--light); border: 2px solid var(--gold-primary); font-weight: 600;
      text-transform: uppercase; letter-spacing: 1px; transition: all .3s ease; }
.btn:hover { background: transparent; color: var(--gold-primary);
             transform: translateY(-5px); box-shadow: 0 10px 20px rgba(212,175,55,.3); }

/*--------------------------------------------------------------
  SECCIONES  (About, Services, Equipment, Gallery, etc.)
--------------------------------------------------------------*/
/*  —————— ABOUT —————— */
.about { padding: 80px 0; background: var(--light); }
.section-title { font-size: clamp(24px, 4vw, 32px); font-weight: 700; text-align: center;
                 margin-bottom: 40px; color: var(--dark); position: relative; }
.section-title::after { content: ''; position: absolute; bottom: -10px; left: 50%;
                        transform: translateX(-50%); width: 80px; height: 3px; background: var(--gold-primary); }
.about-content { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.about-image { flex: 1; min-width: 300px; opacity: 0; transform: translateX(-50px); }
.about-image.animate { animation: fadeInLeft 1s forwards; }
.about-image img { width: 100%; border-radius: 10px; object-fit: cover;
                  box-shadow: 0 10px 30px rgba(0,0,0,.1); }
.about-text { flex: 1; min-width: 300px; padding: 0 15px; opacity: 0; transform: translateX(50px); }
.about-text.animate { animation: fadeInRight 1s forwards; }
.about-text h3 { font-size: clamp(22px, 3vw, 26px); font-weight: 600; margin-bottom: 15px; }
.about-text p { font-size: clamp(14px, 1.8vw, 15px); line-height: 1.7; margin-bottom: 15px; color: #555; }
.highlight { color: var(--gold-primary); font-weight: 700; }

/*  —————— SERVICES —————— */
.services { padding: 80px 0; background: var(--gray); }
.services-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
                      gap: 25px; justify-items: center; }
.service-card { width: 100%; max-width: 350px; overflow: hidden; border-radius: 10px; background: var(--light);
                box-shadow: 0 10px 30px rgba(0,0,0,.1); transition: all .3s ease;
                opacity: 0; transform: translateY(30px); }
.service-card.animate { animation: fadeInUp .8s forwards; }
.service-card:hover { transform: translateY(-10px); box-shadow: 0 15px 40px rgba(212,175,55,.2); }
.service-icon { height: 80px; display: flex; align-items: center; justify-content: center; background: var(--gold-light); }
.service-icon i { font-size: 36px; color: var(--gold-primary); }
.service-content { text-align: center; padding: 20px; }
.service-title { font-size: clamp(16px, 2vw, 18px); font-weight: 600; margin-bottom: 12px; color: var(--dark); }
.service-text { font-size: clamp(12px, 1.6vw, 13px); color: #555; line-height: 1.6; margin-bottom: 15px; }
.service-link { color: var(--gold-primary); font-weight: 600; text-decoration: none; transition: all .3s ease; }
.service-link:hover { color: var(--gold-dark); transform: translateX(5px); }

/*  —————— EQUIPMENT —————— */
.equipment { padding: 80px 0; background: var(--light); }
.equipment-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
                       gap: 25px; justify-items: center; }
.equipment-item { width: 100%; max-width: 350px; margin-bottom: 30px; opacity: 0; transform: scale(.9); }
.equipment-item.animate { animation: zoomIn .8s forwards; }
.equipment-image { position: relative; height: 220px; overflow: hidden; border-radius: 10px;
                   box-shadow: 0 10px 30px rgba(0,0,0,.1); margin-bottom: 15px; }
.equipment-image img { width: 100%; height: 100%; object-fit: cover; transition: all .5s ease; }
.equipment-image .hover-img { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; }
.equipment-item:hover .primary-img { opacity: 0; }
.equipment-item:hover .hover-img { opacity: 1; }
.equipment-title { font-size: clamp(18px, 2.2vw, 20px); font-weight: 600; margin-bottom: 8px; }
.equipment-description { font-size: clamp(12px, 1.6vw, 13px); line-height: 1.6; color: #555; }

/*  —————— EQUIPMENT GALLERY —————— */
.equipment-gallery { padding: 80px 0; background: var(--dark); position: relative; overflow: hidden; }
.equipment-gallery::before { content: ''; position: absolute; inset: 0;
                             background: url('/api/placeholder/100/100') center/30px repeat; opacity: .03; }
.section-subtitle { text-align: center; font-size: clamp(14px, 1.8vw, 16px); color: var(--gold-primary);
                    margin-bottom: 40px; max-width: 700px; margin-inline: auto; }
.equipment-gallery .section-title { color: var(--light); }
.gallery-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
                     gap: 20px; margin-bottom: 40px; }
.gallery-item { position: relative; height: 220px; border-radius: 10px; overflow: hidden;
                box-shadow: 0 15px 30px rgba(0,0,0,.2); opacity: 0; transform: scale(.95);
                transition: all .5s ease; }
.gallery-item.animate { animation: zoomIn .8s forwards; }
.gallery-image { position: relative; width: 100%; height: 100%; }
.gallery-image img { width: 100%; height: 100%; object-fit: cover; transition: all .5s ease; }
.gallery-image .hover-img { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; }
.gallery-item:hover .primary-img { opacity: 0; }
.gallery-item:hover .hover-img { opacity: 1; }
.gallery-overlay { position: absolute; inset: 0; display: flex; align-items: flex-end;
                   background: linear-gradient(to top, rgba(0,0,0,.8), transparent);
                   opacity: 0; transition: opacity .3s ease; }
.gallery-item:hover .gallery-overlay { opacity: 1; }
.gallery-item:hover .gallery-image img { transform: scale(1.1); }
.gallery-info { padding: 15px; width: 100%; transform: translateY(20px); transition: all .3s ease; }
.gallery-item:hover .gallery-info { transform: translateY(0); }
.gallery-info h3 { color: var(--gold-primary); font-size: clamp(14px, 1.8vw, 16px); font-weight: 600; margin-bottom: 5px; }
.gallery-info p { color: var(--light); font-size: clamp(12px, 1.6vw, 13px); }
.gallery-button { text-align: center; }

/*  —————— FACILITIES TOUR —————— */
.facilities-tour { padding: 80px 0; text-align: center; background: var(--light); }
.video-container { position: relative; max-width: 800px; margin: 0 auto; overflow: hidden;
                   border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.1);
                   padding-bottom: 56.25%; /* 16:9 aspect ratio (315/560) */ 
                   height: 0; }
.video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%;
                          opacity: 0; transform: scale(.95); animation: zoomIn .8s forwards; }
.video-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
                 background: rgba(0,0,0,.3); transition: opacity .3s ease; }
.video-container:hover .video-overlay { opacity: 0; }
.play-button { width: 80px; height: 80px; border-radius: 50%; font-size: 50px; color: var(--gold-primary);
               background: rgba(255,255,255,.9); display: flex; align-items: center; justify-content: center;
               cursor: pointer; transition: all .3s ease; }
.play-button:hover { background: var(--light); transform: scale(1.1); }

/*  —————— TESTIMONIALS —————— */
.testimonials { padding: 80px 0; background: var(--gray); position: relative; overflow: hidden; }
.testimonials::before { content: ''; position: absolute; inset: 0;
                        background: url('/api/placeholder/300/300') center/contain repeat; opacity: .03; }
.testimonial-container { max-width: 800px; margin: 0 auto; padding: 0 15px; }
.testimonial-item { background: var(--light); padding: 30px; border-radius: 10px; text-align: center;
                    box-shadow: 0 10px 30px rgba(0,0,0,.05); opacity: 0; transform: translateY(30px); }
.testimonial-item.animate { animation: fadeInUp .8s forwards; }
.testimonial-text { font-size: clamp(14px, 1.8vw, 16px); line-height: 1.7; font-style: italic; color: #555;
                   margin-bottom: 25px; position: relative; }
.testimonial-text::before,
.testimonial-text::after { content: '"'; font-size: 50px; color: var(--gold-light); line-height: 0; position: absolute; }
.testimonial-text::before { top: 15px; left: -15px; }
.testimonial-text::after { bottom: -10px; right: -15px; }
.testimonial-author { font-size: clamp(14px, 1.8vw, 16px); font-weight: 600; margin-bottom: 5px; color: var(--dark); }
.testimonial-position { font-size: clamp(12px, 1.6vw, 13px); color: var(--gold-primary); }

/*  —————— CONTACT —————— */
.contact { padding: 80px 0; background: var(--light); }
.contact-container { display: flex; flex-wrap: wrap; gap: 30px; align-items: flex-start; }
.contact-info { flex: 1; min-width: 300px; padding-right: 15px; opacity: 0; transform: translateX(-30px); }
.contact-info.animate { animation: fadeInLeft .8s forwards; }
.contact-form { flex: 1; min-width: 300px; opacity: 0; transform: translateX(30px); }
.contact-form.animate { animation: fadeInRight .8s forwards; }
.contact-title { font-size: clamp(22px, 3vw, 26px); font-weight: 600; margin-bottom: 15px; }
.contact-text { font-size: clamp(14px, 1.8vw, 15px); line-height: 1.7; color: #555; margin-bottom: 25px; }
.contact-details { list-style: none; margin-bottom: 25px; }
.contact-details li { display: flex; align-items: center; margin-bottom: 12px;
                     font-size: clamp(14px, 1.8vw, 15px); color: #555; }
.contact-details i { width: 35px; height: 35px; border-radius: 50%;
                    background: var(--gold-light); color: var(--gold-primary);
                    display: flex; align-items: center; justify-content: center; margin-right: 12px; }
.social-links { display: flex; }
.social-link { width: 35px; height: 35px; border-radius: 50%; margin-right: 8px;
               background: var(--gold-light); color: var(--gold-primary);
               display: flex; align-items: center; justify-content: center; text-decoration: none;
               transition: all .3s ease; }
.social-link:hover { background: var(--gold-primary); color: var(--light); transform: translateY(-5px); }
.form-group { margin-bottom: 15px; }
.form-control { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 5px;
               font-size: clamp(14px, 1.8vw, 15px); color: var(--dark); transition: all .3s ease; }
.form-control:focus { border-color: var(--gold-primary); box-shadow: 0 0 10px rgba(212,175,55,.2); outline: none; }
textarea.form-control { resize: vertical; min-height: 120px; }
.btn-submit { background: var(--gold-primary); color: var(--light); border: none; border-radius: 50px;
              padding: 12px 25px; font-size: clamp(14px, 1.8vw, 15px); font-weight: 600; cursor: pointer;
              text-transform: uppercase; letter-spacing: 1px; transition: all .3s ease; }
.btn-submit:hover { background: var(--gold-dark); transform: translateY(-5px);
                    box-shadow: 0 10px 20px rgba(212,175,55,.3); }

/*--------------------------------------------------------------
  FOOTER
--------------------------------------------------------------*/
.footer { background: var(--dark); padding: 40px 0 0; color: var(--light); position: relative; }
.footer::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 5px;
                  background: linear-gradient(to right, var(--gold-dark), var(--gold-primary),
                                              var(--gold-light), var(--gold-primary), var(--gold-dark)); }
.footer-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.footer-logo .logo-text { font-size: clamp(18px, 2.5vw, 22px); font-weight: 700; }
.footer-logo .logo-text span { color: var(--gold-primary); }
.footer-text { max-width: 280px; font-size: clamp(12px, 1.6vw, 13px); line-height: 1.7; color: #999; margin-bottom: 15px; }
.footer-title { font-size: clamp(16px, 2vw, 18px); font-weight: 600; margin-bottom: 15px; color: var(--light); }
.footer-menu { list-style: none; }
.footer-menu li { margin-bottom: 8px; }
.footer-menu a { color: #999; text-decoration: none; font-size: clamp(12px, 1.6vw, 13px); transition: all .3s ease; }
.footer-menu a:hover { color: var(--gold-primary); padding-left: 5px; }
.footer-newsletter p { font-size: clamp(12px, 1.6vw, 13px); line-height: 1.7; color: #999; margin-bottom: 15px; }
.newsletter-form { display: flex; }
.newsletter-input { flex: 1; padding: 10px 12px; background: #333; border: none; color: var(--light);
                   font-size: clamp(12px, 1.6vw, 13px); border-radius: 5px 0 0 5px; }
.newsletter-input:focus { outline: none; }
.newsletter-btn { background: var(--gold-primary); color: var(--light); border: none; padding: 0 15px;
                  border-radius: 0 5px 5px 0; cursor: pointer; transition: all .3s ease; }
.newsletter-btn:hover { background: var(--gold-dark); }
.copyright { margin-top: 20px; text-align: center; padding: 15px 0; font-size: clamp(12px, 1.6vw, 13px);
             color: #888; border-top: 1px solid #333; }
.copyright a { color: var(--gold-primary); text-decoration: none; }

/*--------------------------------------------------------------
  BACK-TO-TOP
--------------------------------------------------------------*/
.back-to-top { position: fixed; bottom: 15px; right: 15px; width: 45px; height: 45px; border-radius: 50%;
               background: var(--gold-primary); color: var(--light); display: flex; align-items: center;
               justify-content: center; text-decoration: none; opacity: 0; visibility: hidden;
               transition: all .3s ease; z-index: 999; }
.back-to-top.active { opacity: 1; visibility: visible; }
.back-to-top:hover { background: var(--gold-dark); transform: translateY(-5px); }

/*--------------------------------------------------------------
  ANIMACIONES
--------------------------------------------------------------*/
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes fadeInLeft { from { opacity: 0; transform: translateX(-50px); } to { opacity: 1; transform: none; } }
@keyframes fadeInRight { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: none; } }
@keyframes zoomIn { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }

/*--------------------------------------------------------------
  DROPDOWN (desktop)
--------------------------------------------------------------*/
.dropdown { position: relative; }
.submenu { position: absolute; left: 0; top: 110%; min-width: 230px; list-style: none; background: var(--light);
           border: 1px solid #eee; border-radius: 6px; box-shadow: 0 8px 25px rgba(0,0,0,.08);
           opacity: 0; visibility: hidden; transform: translateY(10px); transition: all .25s; z-index: 999; }
.dropdown:hover .submenu { opacity: 1; visibility: visible; transform: none; }
.submenu li a { display: block; padding: 12px 18px; font-size: 14px; color: var(--dark); text-decoration: none; }
.submenu li a:hover { background: var(--gray); color: var(--gold-primary); }

/*--------------------------------------------------------------
  RESPONSIVE
--------------------------------------------------------------*/
/* ≥1200 px -> desktop grande (sin cambios) */
@media (max-width: 1200px) {
    .container { max-width: 960px; }
    .equipment-container { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}

/* 0-991 px → tablet + móvil grande (se muestra la hamburguesa) */
@media (max-width: 991px) {

    /* mostrar botón */
    .hamburger { display: block; margin-left: 10px; }

    /* Off-canvas */
    .nav-menu { position: fixed; inset: 0; width: 100vw; height: 100vh; background: var(--light);
                display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
                padding: 60px 0; transform: translateX(100%); transition: transform .35s ease; z-index: 1000; }
    .nav-menu.active { transform: translateX(0); }
    .nav-item { margin: 15px 0; }
    .nav-link { color: var(--dark); font-size: 16px; }
    .close-menu { display: block; }

    /* dropdown dentro del canvas */
    .dropdown .submenu { position: static; opacity: 1; visibility: visible; transform: none; background: transparent;
                        border: none; box-shadow: none; max-height: 0; overflow: hidden; transition: max-height .3s; }
    .dropdown.open .submenu { max-height: 600px; }
    .dropdown-toggle::after { content: '▸'; margin-left: 6px; }
    .dropdown.open .dropdown-toggle::after { content: '▾'; }

    /* ajustes que antes estaban en 992 y 768 */
    .hero { height: 80vh; }
    .hero-title { font-size: clamp(26px, 4.5vw, 36px); }
    .hero-subtitle { font-size: clamp(14px, 2.5vw, 18px); }
    .about-image, .about-text, .contact-info, .contact-form { flex: 100%; min-width: 100%; }
    .about-image { text-align: center; margin-bottom: 30px; }
    .contact-info { text-align: center; margin-bottom: 30px; }
    .contact-details, .social-links { justify-content: center; }
    .gallery-container, .equipment-container { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
    .section-title { font-size: clamp(20px, 3.5vw, 28px); }
    .equipment-item { max-width: 100%; }
    .footer-container { grid-template-columns: 1fr; text-align: center; }
    .footer-logo, .footer-links, .footer-newsletter { margin-bottom: 20px; }
}

/* ≤576 px → móvil pequeño */
@media (max-width: 576px) {
    .logo-img { height: 50px; }
    .logo-text { font-size: clamp(16px, 2.5vw, 18px); }
    .hero { height: 70vh; }
    .hero-title { font-size: clamp(22px, 6vw, 30px); }
    .hero-subtitle { font-size: clamp(12px, 3vw, 16px); }
    .btn { padding: 10px 20px; font-size: clamp(12px, 1.8vw, 14px); }
    .about, .services, .equipment, .equipment-gallery, .testimonials, .contact { padding: 60px 0; }
    .services-container, .equipment-container, .gallery-container { grid-template-columns: 1fr; }
    .service-card, .equipment-item, .gallery-item { max-width: 100%; }
    .contact-details li { font-size: clamp(12px, 1.6vw, 14px); }
    .form-control { padding: 10px; font-size: clamp(12px, 1.6vw, 14px); }
    .btn-submit { padding: 10px 20px; font-size: clamp(12px, 1.6vw, 14px); }
}

/* ────────────────────────────────────────────────────────────
   PARCHE 100 % HAMBURGUESA ▸ visible ≤ 991 px
   (No toca nada en desktop, solo añade prioridad en móvil)
──────────────────────────────────────────────────────────────*/
.hamburger {
    display: none;                 /* oculto en desktop */
    cursor: pointer;
    z-index: 1001;
    background: none;
    border: none;
    padding: 10px;
}
.bar {
    width: 25px;
    height: 3px;
    margin: 5px auto;
    display: block;                /* obligamos a que se vea */
    background: var(--light);      /* barras claras sobre el hero */
    transition: all .3s ease;
}
.header.scrolled .bar { background: var(--dark); } /* barras oscuras con fondo blanco */

/*  ≤ 991 px  →   forzamos que aparezca */
@media (max-width: 991px) {
    .hamburger {
        display: block !important; /* ↑↑ rompe cualquier otro display ↓↓ */
        position: relative;
        z-index: 1002;             /* por encima del off-canvas */
    }
    /* Animación de ☰ a ✕ */
    .hamburger.active .bar:nth-child(2) { opacity: 0; }
    .hamburger.active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .hamburger.active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}

/* Centrado del submenú en vista móvil */
@media (max-width: 991px) {
  /* Estilos generales para los ítems del menú principal */
  .menu > ul > li {
      margin: 10px 0; /* Margen uniforme para todos los ítems principales */
      list-style: none;
  }

  .menu > ul > li > a {
      display: block;
      text-align: center;
      padding: 10px 0;
      font-size: 15px;
  }

  /* Estilos para el dropdown en modo móvil */
  .dropdown .submenu {
      position: static;
      width: 100%;
      max-width: 100%;
      text-align: center; /* Centrar el texto de los ítems */
      margin: 0 auto;
      padding: 5px 0; /* Reducir padding para ajustar espacio */
      background: transparent; /* Fondo transparente */
      border-radius: 8px;
      box-shadow: none;
      border: none;
  }
  
  /* Añadir margen y padding para mejor espaciado visual en submenú */
  .dropdown .submenu li {
      margin: 5px 0;
      list-style: none; /* Asegurar que no haya viñetas */
  }
  
  /* Centrar todos los ítems del submenú */
  .dropdown .submenu li a {
      padding: 10px 15px;
      display: block; /* Usar block para centrado uniforme */
      font-size: 15px;
      width: 100%; /* Ocupar todo el ancho para alineación uniforme */
      margin: 0 auto;
      border-radius: 4px;
      text-align: center; /* Asegurar centrado del texto */
  }
  
  /* Ajustar el dropdown-toggle para evitar desalineación */
  .dropdown-toggle {
      display: block;
      width: 100%;
      text-align: center;
  }
  
  /* Mejorar visualmente los ítems del submenú al hacer hover */
  .dropdown .submenu li a:hover {
      background: rgba(212, 175, 55, 0.1); /* Variante suave del color dorado */
  }
  
  /* Animación suave para la apertura del submenú */
  .dropdown.open .submenu {
      animation: fadeIn 0.3s ease-in-out;
  }
  
  /* Indicador de expansión para el submenú */
  .dropdown-toggle::after {
      display: inline-block;
      margin-left: 6px;
      vertical-align: middle;
      transition: transform 0.3s;
  }
  
  .dropdown.open .dropdown-toggle::after {
      transform: rotate(90deg);
  }
}
/* Animación para la aparición del submenú */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Corrección para la línea vertical en menú móvil */
@media (max-width: 991px) {
    /* Eliminar la línea vertical en la navegación móvil */
    .nav-menu {
        background-image: none !important;
    }
    
    /* Revisar si hay una línea después de cada elemento de navegación */
    .nav-link::after {
        display: none !important;
    }
    
    /* Caso específico - la línea vertical podría ser un pseudo-elemento */
    .nav-item::before,
    .nav-item::after {
        display: none !important;
    }
    
    /* Eliminar cualquier borde que pueda estar causando la línea */
    .nav-item, 
    .nav-link {
        border: none !important;
    }
    
    /* En caso de que sea un div o span decorativo */
    .nav-menu .vertical-line,
    .nav-menu > li > a > .line {
        display: none !important;
    }
    
    /* Solución específica para el submenú */
    .dropdown-toggle::after {
        content: "▾" !important; /* Solo mostrar el símbolo, no una línea */
        border: none !important;
        background: none !important;
        width: auto !important;
        height: auto !important;
        position: static !important;
    }
}
/* ==========================================================
   OTROS ESTUDIOS – estilos para miniaturas
========================================================== */
.other-studies .service-card {
  padding: 0;                 /* quitamos relleno superior para que la imagen toque los bordes */
  overflow: hidden;           /* esconde el zoom de la imagen */
}

.study-img {                  /* contenedor de la miniatura */
  width: 100%;
  height: 170px;              /* ajusta a gusto */
  overflow: hidden;
}

.study-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;          /* recorte centrado */
  transition: transform .5s ease;
}

.service-card:hover .study-img img {
  transform: scale(1.08);     /* zoom suave al pasar el ratón */
}

/* texto un poco separado de la imagen */
.other-studies .service-content {
  padding: 18px 20px 22px;
}

/* WhatsApp Floating Button */
.whatsapp-float {
    position: fixed;
    top: 50%; /* Centrado vertical */
    right: 20px;
    transform: translateY(-50%); /* Ajuste para centrar el botón */
    width: 60px;
    height: 60px;
    background: #25D366; /* Color oficial de WhatsApp */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 1000; /* Por encima de otros elementos */
    transition: transform 0.3s ease, background 0.3s ease;
    margin-bottom: 70px; /* Espacio para no superponerse con el botón Back to Top */
}

.whatsapp-float:hover {
    transform: translateY(-50%) scale(1.1); /* Mantiene el centrado y agrega efecto de agrandamiento */
    background: #20b358; /* Color más oscuro al hover */
}

.whatsapp-icon {
    width: 35px;
    height: 35px;
    object-fit: contain;
}

/* WhatsApp Tooltip */
.whatsapp-tooltip {
    position: absolute;
    bottom: 80px;
    right: 0;
    background: var(--dark);
    color: var(--light);
    padding: 8px 12px;
    border-radius: 5px;
    font-size: 14px;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

.whatsapp-tooltip::after {
    content: '';
    position: absolute;
    bottom: -5px;
    right: 15px;
    border-width: 5px;
    border-style: solid;
    border-color: var(--dark) transparent transparent transparent;
}

/* Responsive adjustments for WhatsApp button */
@media (max-width: 576px) {
    .whatsapp-float {
        width: 50px;
        height: 50px;
        right: 15px;
        margin-bottom: 60px; /* Ajuste para móviles */
    }
    .whatsapp-icon {
        width: 30px;
        height: 30px;
    }
    .whatsapp-tooltip {
        font-size: 12px;
        padding: 6px 10px;
    }
}