@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

 * {
     box-sizing: border-box
 }

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

     font-family: "Inter", sans-serif !important;

 }

 /* ===== 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: 0.55rem 2rem;
     text-decoration: none;
     color: inherit;
     font-weight: 500;
     font-size: 14px;
     font-weight: 400;
 }

 .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;
 }
 #img-metamorphosis {
     background-position: top;
     background-size: cover;
     background-repeat: no-repeat;
    margin: auto !important;
 }
 /* Ocultar en móvil: ya usas el overlay móvil propio */
 @media (max-width: 900px) {
     .submenu-overlay {
         display: none !important;
     }
      #img-metamorphosis {
        height: 35vh !important;
     background-position: top;
     background-size: cover !important;
     margin: auto;
 }
 }

 /* ===== 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;
 }

 .btn-animation-index:hover {
     animation: ease;
     background-color: rgb(158, 157, 157) !important;
 }