* {
     box-sizing: border-box
 }

 body {
     margin: 0;
     font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif
 }

 /* ===== Desktop nav ===== */
 nav {
     position: relative;
     display: flex;
     justify-content: center;
     align-items: center;
     background: rgba(255, 255, 255, 0.85);
     /* fondo semitransparente */
     /*box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
     /* sombra más ligera */
     backdrop-filter: blur(10px);
     /* blur efecto cristal */
     z-index: 2000;
     padding: 0 12px;
 }

 nav ul {
     display: flex;
     justify-content: center;
     align-items: center;
     list-style: none;
     margin: 0;
     padding: 0;
     width: 100%;
     max-width: 1200px;
 }

 .menu-item {
     position: static;
     color: #333;
 }

 .menu-item>a {
     display: inline-block;
     position: relative;
     padding: 1rem 2rem;
     text-decoration: none;
     color: inherit;
     font-weight: 500;
     font-size: 15px;
 }

 .menu-item>a::after {
     content: "";
     position: absolute;
     left: 0;
     right: 0;
     bottom: 0;
     height: 3px;
     background: #9b9b9b;
     transform: scaleX(0);
     transform-origin: left;
     transition: transform .3s ease;
     border-radius: 8px;
 }

 .menu-item:hover>a::after {
     transform: scaleX(1);
 }

 /* ===== Mega-submenu (desktop) ===== */
 .submenu {
     position: absolute;
     left: 0;
     right: 0;
     top: 100%;
     width: 100%;
     background: #fff;
     opacity: 0;
     visibility: hidden;
     transform: translateY(20px);
     transition: all .4s ease;
     box-shadow: 0 10px 30px rgba(0, 0, 0, .1);
     z-index: 1000;
     display: flex;
     justify-content: center;
     background: rgba(255, 255, 255, 0.85);
     backdrop-filter: blur(10px);
 }

 .submenu-container {
     width: 100%;
     max-width: 1200px;
     display: flex;
     gap: 4rem;
     padding: 2rem;
 }

 .submenu-column {
     display: flex;
     flex-direction: column;
     min-width: 180px;
 }

 .submenu-column h4 {
     font-size: 14px;
     color: #888;
     margin: 0 0 10px;
     /*text-transform:uppercase; */
 }

 .submenu-column a {
     font-size: 16px;
     color: #000;
     text-decoration: none;
     margin: 5px 0;
 }

 .submenu-column a:hover {
     color: #00ABC7;
 }

 .menu-item:hover .submenu {
     visibility: visible;
     opacity: 1;
     transform: translateY(0);
 }

 /* ===== Botón hamburguesa (oculto en desktop) ===== */
 .hamburger {
     display: none;
     font-size: 26px;
     cursor: pointer;
     padding: 12px;
     background: none;
     border: 0;
 }

 /* ===== Overlay móvil (solo se muestra con media query) ===== */
 .mobile-overlay {
     display: none;
 }

 @media (max-width:900px) {
     nav {
         justify-content: end;
     }

     nav ul {
         display: none;
     }

     .hamburger {
         display: block;
     }

     /* Overlay que ocupa toda la pantalla */
     .mobile-overlay {
         display: block;
         position: fixed;
         inset: 0;
         background: #fff;
         z-index: 3000;
         transform: translateX(100%);
         opacity: 0;
         pointer-events: none;
         transition: transform .35s ease, opacity .35s ease;
     }

     .mobile-overlay.open {
         transform: translateX(0);
         opacity: 1;
         pointer-events: auto;
     }

     .mobile-stage {
         position: relative;
         width: 100%;
         height: 100%;
         overflow: hidden;
     }

     .panel {
         position: absolute;
         inset: 0;
         overflow: auto;
         padding: 16px 20px 24px;
         display: flex;
         flex-direction: column;
         gap: 8px;
         background: #fff;
         transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
         /* transición más suave */
         transform: translateX(100%);
     }

     .mobile-overlay.level-0 #panel-main {
         transform: translateX(0);
     }

     .mobile-overlay.level-1 #panel-main {
         transform: translateX(-100%);
     }

     .panel[data-panel] {
         transform: translateX(100%);
     }

     .mobile-overlay.level-1 .panel[data-panel].active {
         transform: translateX(0);
     }

     .overlay-header {
         display: flex;
         align-items: center;
         justify-content: space-between;
         padding: 8px 4px 16px;
         border-bottom: 0px solid #eee;
         margin-bottom: 12px;
     }

     .overlay-title {
         font-weight: 700;
         font-size: 18px;
     }

     .btn {
         background: none;
         border: 0;
         padding: 8px 10px;
         font-size: 16px;
         cursor: pointer;
     }

     .btn-strong {
         font-weight: 700;
     }

     .link-row {
         padding: 4px;
         font-size: 18px;
         font-weight: 700;
         text-decoration: none;
         color: #000;
         border-bottom: 0px solid #f1f1f1;
     }

     .link-row:active {
         opacity: .7;
     }

     .submenu {
         display: none !important;
     }
 }

 /* ===== Overlay blur para mega menú (escritorio) ===== */
 .submenu-overlay {
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, 0.2);
     backdrop-filter: blur(18px);
     -webkit-backdrop-filter: blur(20px);
     opacity: 0;
     visibility: hidden;
     transition: opacity .3s ease;
     z-index: 900;
     /* Debajo del submenu (1000) y del nav (2000) */
 }

 .submenu-overlay.open {
     opacity: 1;
     visibility: visible;
 }

 /* Ocultar en móvil: ya usas el overlay móvil propio */
 @media (max-width: 900px) {
     .submenu-overlay {
         display: none !important;
     }
 }

 /* ===== Mega-submenu (desktop) ===== */
.submenu {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    width: 100%;
    background: #fff;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px); /* empieza hacia ARRIBA */
    transition: all .45s ease;
   box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.15);     
    z-index: 1000;
    display: flex;
    justify-content: center;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
}

.menu-item:hover .submenu {
    visibility: visible;
    opacity: 1;
    transform: translateY(0); /* baja suavemente */
}

/* ===== Overlay blur para mega menú (escritorio) ===== */
.submenu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
     backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(20px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease;
    z-index: 900; /* debajo del submenu (1000) y nav (2000) */
}

/* cuando un submenu está abierto, se activa el overlay */
.menu-item:hover ~ .submenu-overlay,
.submenu:hover ~ .submenu-overlay {
    opacity: 1;
    visibility: visible;
}

/* Ocultar en móvil: ya usas el overlay móvil propio */
@media (min-width:901px) {

.card-app:hover {
  z-index: 3; 
  transform: scale(1.05);
}
    
}
@media (max-width: 900px) {
    .submenu-overlay {
        display: none !important;
    }
}
.card-section-img{
    height: 60vh !important; 
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
.card-section-img-md{
    height: 50vh !important; 
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}



/* --- Contenedor general --- */
.carousel-app {
  position: relative;
  /* OJO: visible para que el scale del hover NO se recorte */
  overflow: visible;
  padding-block: 2rem;
}

/* --- Pista del carrusel --- */
.carousel-track {
  display: flex;
  gap: 1.6rem;
  padding-inline: 8vw;              /* respiración lateral */
  overflow-x: auto;
  overflow-y: visible;               /* evita recorte vertical */
  scroll-snap-type: x mandatory;     /* efecto snap */
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  user-select: none;
  touch-action: pan-x;               /* habilita gesto horizontal en táctil */
}

/* Ocultar barra de scroll */
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track { scrollbar-width: none;  /*touch-action: pan-x !important;  /* Solo gestos horizontales */
  -webkit-overflow-scrolling: touch; /* Desplazamiento suave en iOS */ /*overscroll-behavior: contain; */}

/* --- Card --- */
.card-app {
  position: relative;
  flex: 0 0 clamp(280px, 38vw, 520px);
  height: 63vh;
  border-radius: 24px;
  overflow: hidden;
  background: #eee;
  box-shadow: 0 10px 22px -12px rgba(0,0,0,.25);
  transform-origin: center center;
  transition:
    transform .35s cubic-bezier(.22,1,.36,1),
    box-shadow .35s ease,
    filter .35s ease;
  will-change: transform;
}

.card-app img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Texto opcional sobre la imagen */
.card__text {
  position: absolute;
  inset: 16px 16px auto 16px;
  color: #111;
  text-shadow: 0 1px 2px rgba(255,255,255,.75);
}
.card__text--light { color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.4); }
/*
.card-app:hover {
  z-index: 3; /* se apila sobre las demás 
  transform: scale(1.05);
} */

/* Cursor al arrastrar y desactiva el snap mientras se arrastra */
.carousel-track:active { cursor: grabbing; }
.carousel-track.dragging { scroll-snap-type: none; }


#macCarousel {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: auto; /* evita el momentum nativo de iOS */
  touch-action: pan-x; /* solo swipe horizontal */
  scrollbar-width: none; /* Firefox */
}



.card-app {
  height: 60vh;
  scroll-snap-align: start;
  border-radius: 1rem;
  overflow: hidden;
  background: #eee;
}