/* Capa móvil final. Se carga después de todos los estilos históricos. */
@media (max-width: 780px) {
  html, html body { max-width: 100%; overflow-x: hidden; }

  html body .site-header {
    position: sticky !important; top: 0 !important; z-index: 1000 !important;
    display: flex !important; align-items: center !important;
    justify-content: space-between !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  }
  html body .menu-button {
    position: absolute !important; top: 13px !important; right: 16px !important;
    display: block !important;
    flex: 0 0 48px !important; width: 48px !important; height: 44px !important;
    padding: 10px !important; z-index: 1002 !important;
  }
  html body .menu-button::before {
    content: "☰" !important; display: block !important;
    color: #111318 !important; font-size: 28px !important;
    line-height: 24px !important; font-weight: 900 !important;
  }
  html body.menu-open .menu-button::before { content: "×" !important; }
  html body .menu-button span { display: none !important; }
  html body .main-nav, html body .header-actions {
    left: 0 !important; right: 0 !important; width: 100% !important;
    margin: 0 !important; background: #fff !important; box-shadow: none !important;
  }
  html body .main-nav {
    top: 70px !important; bottom: 0 !important; z-index: 100 !important;
    max-height: none !important; padding: 24px 24px 210px !important;
    overflow-y: auto !important;
  }
  html body .main-nav a {
    display: block !important; width: 100% !important;
    padding: 9px 0 !important; border-bottom: 1px solid rgba(17,19,24,.11) !important;
    color: #111318 !important; font-size: 21px !important;
    line-height: 1.15 !important; font-weight: 800 !important;
  }
  html body .header-actions {
    top: auto !important; bottom: 0 !important; z-index: 101 !important;
    padding: 16px 22px max(18px, env(safe-area-inset-bottom)) !important;
    border-top: 1px solid rgba(17,19,24,.12) !important;
  }
  html body .header-actions .button {
    width: 100% !important; min-height: 46px !important;
    font-size: 16px !important;
  }
  html body .header-phone { font-size: 18px !important; font-weight: 800 !important; }
  html body.menu-open .main-nav,
  html body.menu-open .header-actions { display: flex !important; }
  html body.menu-open::before {
    content: "" !important; position: fixed !important; inset: 70px 0 0 !important;
    z-index: 98 !important; background: #fff !important;
  }
  html body.menu-open .main-nav { z-index: 100 !important; }
  html body.menu-open .header-actions { z-index: 101 !important; }

  /* En móvil el contenido nunca depende de animaciones para aparecer. */
  html body .reveal, html body .reveal.in-view {
    opacity: 1 !important; visibility: visible !important; transform: none !important;
  }
  html body img, html body video {
    display: block !important; opacity: 1 !important; visibility: visible !important;
  }

  /* Hero y vídeo de las bolitas. */
  html body .hero { min-height: 720px !important; }
  html body .hero-video {
    display: block !important; inset: 0 !important; width: 100% !important;
    height: 100% !important; min-height: 720px !important;
    object-fit: cover !important; opacity: .88 !important;
  }

  /* Bloques numerados: un bloque compacto por pantalla, con flechas. */
  html body .about-principles-carousel {
    display: grid !important; grid-template-columns: 34px minmax(0,1fr) 34px !important;
    gap: 8px !important; align-items: center !important;
  }
  html body .about-principles-arrow {
    display: grid !important; width: 34px !important; height: 34px !important;
  }
  html body .about-principles {
    display: flex !important; gap: 0 !important; overflow-x: auto !important;
    scroll-snap-type: x mandatory !important; scrollbar-width: none !important;
  }
  html body .about-principles::-webkit-scrollbar { display: none !important; }
  html body .about-principles article {
    flex: 0 0 100% !important; width: 100% !important;
    display: grid !important; grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important; scroll-snap-align: center !important;
    height: auto !important; min-height: 0 !important; max-height: 520px !important;
    padding: 0 0 14px !important; overflow: hidden !important;
  }
  html body .about-principles article > div {
    display: grid !important; grid-template-columns: 42px minmax(0,1fr) !important;
    gap: 6px 10px !important; padding: 14px 14px 0 !important;
  }
  html body .about-principles article h3 { font-size: 17px !important; }
  html body .about-principles article p {
    grid-column: 2 !important; font-size: 13px !important; line-height: 1.35 !important;
    display: -webkit-box !important; -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 5 !important; overflow: hidden !important;
  }
  html body .about-principles article img {
    display: block !important; width: calc(100% - 28px) !important;
    height: 180px !important; min-height: 180px !important;
    margin: 0 14px !important; object-fit: cover !important;
  }

  /* Módulos: niente frecce, schede brevi che aprono il dettaglio. */
  html body .module-arrow,
  html body [data-module-carousel],
  html body .module-card::after,
  html body .module-panel .module-card::after,
  html body .module-panel-premium .module-card::after {
    display: none !important; content: none !important;
  }
  html body .module-carousel { display: block !important; padding: 0 12px 18px !important; }
  html body .module-list,
  html body .module-panel-premium .module-list {
    display: grid !important; grid-template-columns: 1fr !important;
    grid-auto-flow: row !important; grid-auto-rows: auto !important;
    gap: 12px !important; overflow: visible !important;
  }
  html body .module-panel .module-card,
  html body .module-panel-premium .module-card {
    display: grid !important; grid-template-columns: 52px minmax(0,1fr) !important;
    height: auto !important; min-height: 0 !important; max-height: none !important;
    padding: 16px !important; gap: 8px 12px !important;
  }
  html body .module-card .module-number { grid-column: 1 !important; grid-row: 1 !important; }
  html body .module-card h3 { grid-column: 2 !important; grid-row: 1 !important; margin: 0 !important; }
  html body .module-card .module-summary {
    grid-column: 1 / -1 !important; display: -webkit-box !important;
    -webkit-box-orient: vertical !important; -webkit-line-clamp: 3 !important;
    overflow: hidden !important; margin: 4px 0 0 !important;
  }

  /* Professores: una scheda per volta con frecce. */
  html body .professor-carousel {
    position: relative !important; display: block !important;
    width: 100% !important; margin-top: 24px !important; padding-bottom: 58px !important;
  }
  html body .professor-arrow {
    position: absolute !important; top: auto !important; bottom: 0 !important;
    display: grid !important; width: 42px !important; height: 42px !important;
    transform: none !important; z-index: 5 !important;
  }
  html body .professor-arrow:first-child { left: calc(50% - 48px) !important; }
  html body .professor-arrow:last-child { right: calc(50% - 48px) !important; }
  html body .professor-grid {
    display: flex !important; gap: 0 !important; overflow-x: auto !important;
    scroll-snap-type: x mandatory !important; scrollbar-width: none !important;
    width: 100% !important; grid-auto-rows: auto !important; margin: 0 !important;
    padding-left: 0 !important; padding-right: 0 !important;
  }
  html body .professor-grid::-webkit-scrollbar { display: none !important; }
  html body .professor-grid article {
    flex: 0 0 100% !important; width: 100% !important; scroll-snap-align: center !important;
    height: auto !important; min-height: 0 !important; max-height: none !important;
    align-self: start !important; overflow: hidden !important;
  }
  html body .professor-grid article img {
    display: block !important; width: 100% !important; height: 280px !important;
    min-height: 280px !important; object-fit: cover !important;
  }

  /* Programas: la foto se muestra por encima del texto. */
  html body .program-grid article {
    display: grid !important; min-height: 0 !important; height: auto !important;
    padding: 0 0 22px !important; overflow: hidden !important;
  }
  html body .program-grid article img {
    display: block !important; width: 100% !important; height: 220px !important;
    min-height: 220px !important; object-fit: cover !important; margin: 0 0 10px !important;
  }
  html body .program-grid article h3,
  html body .program-grid article > p { margin-left: 20px !important; margin-right: 20px !important; }
  html body .program-grid article::after {
    position: static !important; justify-self: start !important;
    margin: 8px 20px 0 !important;
  }

  /* Fotografías, UCAM, logos y galerías. */
  html body .about-media img,
  html body .mba-photo-strip img,
  html body .program-photo-track img,
  html body .ucam-campus-card > img:first-child,
  html body .youtube-testimonial img {
    display: block !important; width: 100% !important; height: auto !important;
    min-height: 190px !important; max-height: none !important;
    aspect-ratio: 4 / 3 !important; object-fit: cover !important;
  }
  html body .ucam-campus-card {
    display: block !important; height: auto !important; min-height: 0 !important;
    overflow: hidden !important;
  }
  html body .ucam-logo,
  html body .ucam-campus-card .ucam-photo-logo {
    display: block !important; opacity: 1 !important; visibility: visible !important;
  }
  html body .company-strip,
  html body .logo-marquee,
  html body .logo-track,
  html body .logo-track span { display: flex !important; visibility: visible !important; opacity: 1 !important; }
  html body .company-strip { flex-direction: column !important; }
  html body .logo-track img {
    display: block !important; width: 76px !important; height: 48px !important;
    object-fit: contain !important; opacity: 1 !important; visibility: visible !important;
  }
  html body .target-values-visual article > img {
    display: block !important; width: 74px !important; height: 74px !important;
    min-height: 74px !important; object-fit: contain !important;
  }

  /* Tutti i video con area visibile e poster. */
  html body .mba-video-card,
  html body .alumni-video-feature,
  html body .program-video-showcase article,
  html body .local-video-grid article,
  html body .testimonial-grid article {
    display: block !important; height: auto !important; min-height: 0 !important;
  }
  html body .mba-video-card video,
  html body .alumni-video-feature video,
  html body .program-video-showcase video,
  html body .local-video-grid video,
  html body .testimonial-grid video {
    display: block !important; width: 100% !important; height: auto !important;
    min-height: 210px !important; max-height: none !important;
    aspect-ratio: 16 / 9 !important; object-fit: cover !important;
    background: #111 !important; opacity: 1 !important; visibility: visible !important;
  }
  html body .program-video-showcase,
  html body .local-video-grid,
  html body .testimonial-grid { grid-template-columns: 1fr !important; }

  /* Galleria fotografica con frecce e una composizione per volta. */
  html body .program-photo-carousel {
    display: grid !important; grid-template-columns: 42px minmax(0,1fr) 42px !important;
    gap: 8px !important; align-items: center !important;
  }
  html body .program-photo-carousel > .carousel-button {
    display: flex !important; position: static !important;
    transform: none !important; margin: 0 !important;
  }
  html body .program-photo-track {
    display: flex !important; gap: 0 !important; width: 100% !important;
    overflow-x: auto !important; scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important; padding: 0 !important;
  }
  html body .program-photo-track::-webkit-scrollbar { display: none !important; }
  html body .program-photo-slide {
    flex: 0 0 100% !important; width: 100% !important;
    display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 8px !important; scroll-snap-align: center !important;
  }
  html body .program-photo-slide img {
    display: block !important; width: 100% !important; height: 118px !important;
    min-height: 118px !important; aspect-ratio: auto !important;
    margin: 0 !important; object-fit: cover !important; border-radius: 10px !important;
  }
  html body .program-photo-slide img:first-child {
    grid-column: 1 / -1 !important; height: 220px !important; min-height: 220px !important;
  }
  html body .program-photo-track > img {
    display: block !important; flex: 0 0 100% !important;
    width: 100% !important; height: 260px !important; min-height: 260px !important;
    max-height: 260px !important; margin: 0 !important;
    aspect-ratio: auto !important; object-fit: cover !important;
    border-radius: 12px !important; scroll-snap-align: center !important;
  }

  /* Testimonios ripristinati come carosello mobile leggero. */
  html body .testimonials-section {
    display: block !important; visibility: visible !important; opacity: 1 !important;
  }
  html body .testimonial-carousel-mobile {
    display: grid !important; grid-template-columns: 42px minmax(0,1fr) 42px !important;
    gap: 8px !important; align-items: center !important; margin-top: 24px !important;
  }
  html body .testimonial-carousel-mobile .testimonial-arrow {
    display: flex !important; position: static !important; transform: none !important;
  }
  html body .testimonial-carousel-mobile .testimonial-grid {
    display: flex !important; gap: 0 !important; width: 100% !important;
    margin: 0 !important; overflow-x: auto !important;
    scroll-snap-type: x mandatory !important; scrollbar-width: none !important;
  }
  html body .testimonial-carousel-mobile .testimonial-grid::-webkit-scrollbar { display: none !important; }
  html body .testimonial-carousel-mobile .testimonial-grid article {
    display: block !important; flex: 0 0 100% !important; width: 100% !important;
    height: auto !important; min-height: 0 !important; max-height: none !important;
    scroll-snap-align: center !important; visibility: visible !important; opacity: 1 !important;
  }
  html body .testimonial-carousel-mobile .testimonial-grid video,
  html body .testimonial-carousel-mobile .testimonial-grid img {
    display: block !important; width: 100% !important; height: 220px !important;
    min-height: 220px !important; object-fit: cover !important;
    visibility: visible !important; opacity: 1 !important;
  }

  html body .media-open-button { display: none !important; }

  html body .mba-section {
    display: grid !important; grid-template-columns: 1fr !important;
    gap: 22px !important; padding-top: 48px !important; padding-bottom: 48px !important;
  }
  html body .mba-section > * { margin-top: 0 !important; margin-bottom: 0 !important; }
  html body .mba-video-card { margin: 0 !important; min-height: 0 !important; }
  html body .mba-photo-strip { margin: 0 !important; gap: 12px !important; }
  html body .mba-photo-strip img:first-child {
    height: 310px !important; min-height: 310px !important;
    aspect-ratio: auto !important; object-fit: cover !important;
    object-position: 50% 22% !important;
  }
  html body .mba-facts { margin: 0 !important; padding: 22px 18px !important; }

  /* Frecce coerenti e centrate in tutta la web mobile. */
  html body .carousel-button,
  html body .about-principles-arrow,
  html body .professor-arrow,
  html body .program-card-arrow,
  html body .program-photo-arrow {
    display: flex !important; align-items: center !important; justify-content: center !important;
    width: 42px !important; height: 42px !important; min-width: 42px !important;
    min-height: 42px !important; padding: 0 0 3px !important;
    border: 0 !important; border-radius: 50% !important;
    font-family: Arial, sans-serif !important; font-size: 27px !important;
    font-weight: 700 !important; line-height: 1 !important;
    text-align: center !important; box-sizing: border-box !important;
  }
  html body [data-module-carousel] { display: none !important; }
  html body .module-carousel > button.module-arrow[data-module-carousel] {
    display: none !important; visibility: hidden !important;
    width: 0 !important; height: 0 !important; min-width: 0 !important; min-height: 0 !important;
    padding: 0 !important; margin: 0 !important;
  }
  html body .module-carousel {
    display: block !important; grid-template-columns: minmax(0, 1fr) !important;
  }

  /* X dei modali perfettamente al centro del pulsante. */
  html body .video-modal-close,
  html body .image-modal-close,
  html body .detail-modal-close,
  html body .chat-close {
    display: flex !important; align-items: center !important; justify-content: center !important;
    width: 44px !important; height: 44px !important; min-width: 44px !important;
    min-height: 44px !important; padding: 0 0 3px !important;
    border-radius: 50% !important; font-family: Arial, sans-serif !important;
    font-size: 30px !important; font-weight: 400 !important; line-height: 1 !important;
    text-align: center !important; box-sizing: border-box !important;
  }
}