/* =========================================================
   RESPONSIVE.CSS LIMPIO
   Dominando tu Vida
   Mobile / Tablet
   Limpieza completa + YouTube mobile nuevo
========================================================= */


/* =========================================================
   BASE MOBILE GLOBAL
========================================================= */

@media (max-width: 768px) {

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html,
  body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
  }

  body {
    min-height: 100%;
  }

  main {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  section,
  header,
  footer {
    max-width: 100%;
  }

  img,
  video,
  canvas,
  svg {
    max-width: 100%;
  }


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

  .main-navbar {
    position: fixed !important;
    top: max(10px, env(safe-area-inset-top)) !important;
    left: 50% !important;

    transform: translateX(-50%) !important;

    width: calc(100% - 20px) !important;
    max-width: none !important;

    padding: 10px 12px !important;
    border-radius: 22px !important;

    z-index: 9998 !important;

    background: rgba(130, 201, 232, 0.48) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;

    backdrop-filter: blur(18px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.2) !important;

    box-shadow:
      0 16px 48px rgba(22, 40, 86, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;

    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .nav-inner {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 44px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 10px !important;
  }

  .nav-brand {
    min-width: 0 !important;
    max-width: calc(100% - 54px) !important;

    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
  }

  .nav-logo-target {
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
  }

  .nav-logo-img,
  .nav-logo-target img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  .nav-brand-text {
    max-width: 145px !important;

    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;

    font-size: 0.78rem !important;
    line-height: 1 !important;
    letter-spacing: -0.02em !important;
  }

  .nav-cta-desktop {
    display: none !important;
  }

  .nav-toggle {
    display: inline-flex !important;
    flex: 0 0 auto !important;
  }

  .nav-menu {
    position: absolute !important;
    top: calc(100% + 12px) !important;
    left: 0 !important;
    right: 0 !important;

    width: 100% !important;
    max-width: 100% !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;

    padding: 14px !important;
    border-radius: 24px !important;

    background: rgba(35, 55, 95, 0.78) !important;

    backdrop-filter: blur(22px) saturate(1.25) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.25) !important;

    border: 1px solid rgba(255, 255, 255, 0.22) !important;

    box-shadow:
      0 24px 60px rgba(13, 21, 44, 0.24),
      inset 0 1px 0 rgba(255,255,255,0.18) !important;

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    transform: translateY(-10px) scale(0.98) !important;
    transform-origin: top center !important;

    transition:
      opacity 0.3s ease,
      visibility 0.3s ease,
      transform 0.3s ease !important;

    overflow: hidden !important;
  }

  .main-navbar.is-menu-open .nav-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;

    transform: translateY(0) scale(1) !important;
  }

  .nav-menu a {
    width: 100% !important;
    max-width: 100% !important;

    padding: 14px 16px !important;

    border-radius: 16px !important;

    color: #ffffff !important;

    font-size: 0.96rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;

    background: rgba(255,255,255,0.08) !important;
  }

  .nav-menu a::after {
    display: none !important;
  }

  .nav-mobile-cta {
    display: inline-flex !important;

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

    margin-top: 4px !important;

    color: #173c69 !important;
    background: rgba(255,255,255,0.92) !important;

    font-weight: 900 !important;
  }


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

  .hero-cinematic,
  .hero-sticky {
    width: 100%;
    min-height: 100dvh !important;
    margin-top: 0 !important;
    padding-top: 0;
    overflow: hidden;
  }

  .hero-sticky {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 96px 20px 72px !important;
  }

  .hero-layer {
    top: -6%;
    height: 112%;
    object-fit: cover;
    object-position: center center;
  }

  .hero-logo-stage {
    transform: translateY(-15vh) !important;
  }

  .logo-assembly {
    width: clamp(150px, 47vw, 220px) !important;
  }

  .hero-content {
    top: 66% !important;
    width: 100%;
    padding-inline: 18px;
  }

  .hero-kicker {
    max-width: 92vw;
    min-height: 34px;
    padding: 0 13px;
    margin-bottom: 16px;

    font-size: 0.68rem;
    letter-spacing: 0.09em;
    white-space: normal;
  }

  .hero-title {
    font-size: clamp(2.75rem, 14vw, 5.4rem) !important;
    line-height: 0.95 !important;
    letter-spacing: -0.07em !important;
  }

  .hero-title .word {
    display: block;
  }

  .hero-subtitle {
    width: min(100%, 340px);
    margin-inline: auto;

    font-size: 0.95rem !important;
    line-height: 1.6 !important;
  }


  /* =========================================================
     HERO TRANSITION MOBILE
  ========================================================= */

  .hero-transition-section {
    min-height: 285px !important;

    margin-top: -72px !important;
    margin-bottom: -88px !important;

    padding: 52px 20px 112px !important;

    overflow: visible;
    position: relative;
    z-index: 4;
  }

  .hero-transition {
    position: relative;
    z-index: 4;
  }

  .hero-transition-actions {
    width: min(100%, 430px) !important;

    flex-direction: column !important;
    gap: 10px !important;

    padding: 12px !important;
    border-radius: 28px !important;
  }

  .transition-btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 56px !important;
    padding: 0 18px !important;
  }


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

  .intro-section {
    margin-top: -1px;

    padding: 142px 20px 92px !important;
    min-height: 100dvh;

    background-attachment: scroll;
  }

  .intro-section::after {
    top: -115px !important;

    width: 100% !important;
    max-width: 100% !important;
    height: 250px !important;
  }

  .intro-grid {
    grid-template-columns: 1fr !important;
    gap: 42px !important;
  }

  .intro-text {
    max-width: 100% !important;
  }

  .section-tag {
    min-height: 34px !important;

    padding: 0 13px !important;
    margin-bottom: 22px !important;

    font-size: 0.68rem !important;
    letter-spacing: 0.11em !important;
  }

  .intro-section .section-title {
    max-width: 100% !important;

    font-size: clamp(2.25rem, 11.5vw, 4rem) !important;
    line-height: 1 !important;
    letter-spacing: -0.06em !important;
  }

  .section-description {
    max-width: 100% !important;
    margin-top: 22px !important;

    font-size: 0.98rem !important;
    line-height: 1.72 !important;
  }

  .section-description + .section-description {
    margin-top: 16px !important;
  }

  .intro-moon {
    top: 76px !important;
    left: 42px !important;
    width: 96px !important;

    transform: translate(
      calc(100vw - 42px),
      calc(100vh - 76px)
    ) scale(0.72);
  }

  .intro-visual {
    min-height: auto !important;
    width: 100% !important;
    max-width: 100% !important;

    overflow: hidden;
  }

  .glass-art-card,
  .intro-art-gallery {
    width: min(100%, 620px) !important;
    min-height: 360px !important;
    border-radius: 34px !important;
  }

  .glass-art-card::before {
    inset: 22px !important;
    border-radius: 26px !important;
  }

  .glass-content {
    inset: 22px !important;
    border-radius: 26px !important;
  }

  .glass-content span {
    font-size: clamp(4.2rem, 18vw, 6.6rem) !important;
  }

  .intro-art-image {
    object-fit: cover !important;
    object-position: center center !important;
  }

  .intro-art-meta {
    left: 22px !important;
    right: 22px !important;
    bottom: 22px !important;
    z-index: 12 !important;
  }

  .intro-art-label {
    font-size: 0.68rem !important;
    letter-spacing: 0.1em !important;
  }

  .intro-art-subtitle {
    max-width: 100% !important;

    font-size: 0.76rem !important;
    line-height: 1.25 !important;

    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;

    overflow: hidden !important;
  }

  .intro-art-placeholder span {
    font-size: clamp(4rem, 18vw, 6rem) !important;
  }

  .intro-art-gallery .orb-01 {
    width: 150px !important;
    height: 150px !important;
    top: 44px !important;
    right: 34px !important;
  }

  .intro-art-gallery .orb-02 {
    width: 210px !important;
    height: 210px !important;
    left: -58px !important;
    bottom: -48px !important;
  }


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

  .experience-section {
    min-height: 100dvh !important;
    overflow: hidden !important;

    position: relative;
    background: #dbe7f5;
  }

  .experience-stage {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    overflow: hidden !important;
    z-index: 1;
  }

  .experience-bg-layer,
  .experience-bg-transition-clone {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
    object-position: center top !important;
  }

  .experience-layer {
    position: absolute !important;
    inset: auto !important;

    width: clamp(720px, 210vw, 1180px) !important;
    height: auto !important;
    max-width: none !important;

    left: 44% !important;
    top: 22% !important;

    transform: translate(-50%, -50%) !important;

    object-fit: contain !important;
    object-position: center center !important;
  }

  .experience-sofa-layer,
  .experience-rug-layer,
  .experience-table-layer,
  .experience-cups-layer,
  .experience-book-layer,
  .experience-plant-layer,
  .experience-painting-layer {
    width: clamp(720px, 210vw, 1180px) !important;
    left: 44% !important;
    top: 22% !important;
    transform: translate(-50%, -50%) !important;
  }

  .experience-content {
    position: relative !important;
    z-index: 10 !important;

    min-height: 100dvh !important;

    padding: 34dvh 20px 48px !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
  }

  .experience-heading {
    max-width: 100% !important;

    margin: 0 auto 28px !important;

    text-align: center !important;

    position: relative;
    z-index: 15;
  }

  .experience-title {
    max-width: 100% !important;

    font-size: clamp(2rem, 9.5vw, 3.6rem) !important;
    line-height: 0.94 !important;
    letter-spacing: -0.07em !important;

    text-align: center !important;

    margin: 0 auto 16px !important;
  }

  .experience-description {
    max-width: 92vw !important;

    margin: 0 auto !important;

    font-size: 0.92rem !important;
    line-height: 1.55 !important;

    text-align: center !important;
  }

  .experience-services {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;

    width: 100% !important;
    max-width: 430px !important;

    margin: 0 auto !important;
    padding-top: 0 !important;

    position: relative;
    z-index: 15;
  }

  .experience-service {
    padding: 14px 16px !important;
    border-radius: 22px !important;

    background: rgba(255, 255, 255, 0.42) !important;

    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
  }

  .experience-service-number {
    font-size: 0.72rem !important;
    margin-bottom: 5px !important;
  }

  .experience-service h3 {
    font-size: 0.95rem !important;
    line-height: 1.08 !important;
    margin-bottom: 4px !important;
  }

  .experience-service p {
    font-size: 0.8rem !important;
    line-height: 1.35 !important;
  }


  /* =========================================================
     YOUTUBE MOBILE NUEVO
     Requiere yt.php con:
     .yt-desktop-experience
     .yt-mobile-experience
  ========================================================= */

  .yt-section {
    position: relative !important;
    isolation: isolate !important;

    width: 100% !important;
    max-width: 100% !important;

    height: auto !important;
    min-height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;

    color: #102033 !important;
  }

  .yt-desktop-experience,
  .yt-pin-stage,
  .yt-intro-layer,
  .yt-content-layer,
  .yt-video-panel,
  .yt-info-panel,
  .yt-carousel-area,
  .yt-carousel,
  .yt-video-frame {
    display: none !important;
  }

  .yt-mobile-experience {
    display: block !important;
    position: relative !important;

    width: 100% !important;
    max-width: 100% !important;

    padding: 112px 16px 92px !important;
    margin: 0 !important;

    overflow: hidden !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  .yt-mobile-container {
    width: 100% !important;
    max-width: 430px !important;

    margin: 0 auto !important;
    padding: 0 !important;

    overflow: hidden !important;
  }

  .yt-mobile-heading {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 0 20px !important;

    overflow: hidden !important;
  }

  .yt-mobile-heading .yt-tag {
    display: inline-flex !important;
    margin-bottom: 18px !important;
  }

  .yt-mobile-heading h2 {
    margin: 0 !important;

    width: 100% !important;
    max-width: 100% !important;

    font-size: clamp(2.35rem, 12vw, 4rem) !important;
    font-weight: 900 !important;
    line-height: 0.92 !important;
    letter-spacing: -0.08em !important;

    color: #102033 !important;

    overflow-wrap: break-word !important;
  }

  .yt-mobile-heading p {
    margin: 18px 0 0 !important;

    width: 100% !important;
    max-width: 100% !important;

    font-size: 0.94rem !important;
    font-weight: 600 !important;
    line-height: 1.55 !important;

    color: rgba(16, 32, 51, 0.62) !important;
  }

  .yt-mobile-featured,
  .yt-mobile-more {
    width: 100% !important;
    max-width: 100% !important;

    border: 1px solid rgba(255, 255, 255, 0.58) !important;
    border-radius: 26px !important;

    background:
      linear-gradient(
        145deg,
        rgba(255,255,255,0.50),
        rgba(255,255,255,0.24)
      ) !important;

    backdrop-filter: blur(22px) !important;
    -webkit-backdrop-filter: blur(22px) !important;

    box-shadow: 0 24px 68px rgba(85, 67, 110, 0.18) !important;

    overflow: hidden !important;
  }

  .yt-mobile-featured {
    padding: 10px !important;
    margin-bottom: 18px !important;
  }

  .yt-mobile-featured-thumb {
    position: relative !important;

    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    aspect-ratio: 16 / 9 !important;

    border-radius: 20px !important;
    background: #101020 !important;

    overflow: hidden !important;
  }

  .yt-mobile-featured-thumb img {
    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
    object-position: center !important;

    display: block !important;
  }

  .yt-mobile-play,
  .yt-mobile-card-thumb .yt-video-play {
    position: absolute !important;

    display: grid !important;
    place-items: center !important;

    border-radius: 999px !important;

    background: rgba(255, 255, 255, 0.92) !important;
    color: #102033 !important;

    font-weight: 900 !important;

    box-shadow: 0 14px 34px rgba(16, 32, 51, 0.22) !important;
  }

  .yt-mobile-play {
    left: 50% !important;
    top: 50% !important;

    width: 56px !important;
    height: 56px !important;

    transform: translate(-50%, -50%) !important;

    font-size: 1.2rem !important;
  }

  .yt-mobile-featured-body {
    width: 100% !important;
    max-width: 100% !important;

    padding: 16px 4px 4px !important;

    overflow: hidden !important;
  }

  .yt-mobile-featured-body h3 {
    margin: 0 !important;

    width: 100% !important;
    max-width: 100% !important;

    font-size: clamp(1.35rem, 6.8vw, 1.9rem) !important;
    font-weight: 900 !important;
    line-height: 1.02 !important;
    letter-spacing: -0.055em !important;

    color: #102033 !important;

    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;

    overflow: hidden !important;
  }

  .yt-mobile-featured-body p {
    margin: 10px 0 0 !important;

    width: 100% !important;
    max-width: 100% !important;

    font-size: 0.86rem !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;

    color: rgba(16, 32, 51, 0.62) !important;

    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;

    overflow: hidden !important;
  }

  .yt-mobile-video-button,
  .yt-mobile-channel-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    max-width: 100% !important;

    min-height: 46px !important;

    padding: 0 18px !important;

    border-radius: 999px !important;

    background: linear-gradient(90deg, #47d2e6, #e64796) !important;
    color: #101020 !important;

    font-size: 0.86rem !important;
    font-weight: 900 !important;
    text-decoration: none !important;
  }

  .yt-mobile-video-button {
    margin-top: 14px !important;
  }

  .yt-mobile-more {
    padding: 20px 14px 22px !important;
  }

  .yt-mobile-more .yt-mini-label {
    display: inline-flex !important;

    margin-bottom: 14px !important;
    padding: 7px 11px !important;

    border-radius: 999px !important;

    background: rgba(162, 215, 236, 0.92) !important;
    color: #101020 !important;

    font-size: 0.64rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
  }

  .yt-mobile-more h3 {
    margin: 0 !important;

    width: 100% !important;
    max-width: 100% !important;

    font-size: clamp(1.6rem, 7vw, 2.15rem) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: -0.065em !important;

    color: #102033 !important;
  }

  .yt-mobile-more p {
    margin: 12px 0 20px !important;

    width: 100% !important;
    max-width: 100% !important;

    font-size: 0.88rem !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;

    color: rgba(16, 32, 51, 0.62) !important;
  }

  .yt-mobile-grid {
    width: 100% !important;
    max-width: 100% !important;

    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;
  }

  .yt-mobile-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    display: block !important;

    border: 1px solid rgba(255, 255, 255, 0.58) !important;
    border-radius: 18px !important;

    background: rgba(255, 255, 255, 0.44) !important;
    color: #102033 !important;

    overflow: hidden !important;
    text-decoration: none !important;
  }

  .yt-mobile-card-thumb {
    position: relative !important;

    width: 100% !important;
    max-width: 100% !important;

    aspect-ratio: 16 / 9 !important;

    background: rgba(16, 32, 51, 0.12) !important;

    overflow: hidden !important;
  }

  .yt-mobile-card-thumb img {
    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
    object-position: center !important;

    display: block !important;
  }

  .yt-mobile-card-thumb .yt-video-play {
    left: 12px !important;
    top: auto !important;
    bottom: 10px !important;

    width: 28px !important;
    height: 28px !important;

    transform: none !important;

    font-size: 0.72rem !important;
  }

  .yt-mobile-card-body {
    width: 100% !important;
    max-width: 100% !important;

    padding: 9px !important;

    overflow: hidden !important;
  }

  .yt-mobile-card-body span {
    display: block !important;

    margin-bottom: 5px !important;

    font-size: 0.52rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.11em !important;
    text-transform: uppercase !important;

    color: #47d2e6 !important;
  }

  .yt-mobile-card-body h4 {
    margin: 0 !important;

    width: 100% !important;
    max-width: 100% !important;

    font-size: 0.78rem !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.03em !important;

    color: #102033 !important;

    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;

    overflow: hidden !important;
  }

  .yt-mobile-channel-button {
    min-height: 48px !important;
    margin-top: 18px !important;
  }

  .yt-mobile-error {
    grid-column: 1 / -1 !important;

    padding: 16px !important;

    border-radius: 18px !important;
    background: rgba(255,255,255,0.45) !important;

    font-size: 0.9rem !important;
    font-weight: 700 !important;
    color: #102033 !important;
  }


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

  .contact-section {
    padding: 92px 16px 112px !important;
  }

  .contact-panel {
    width: 100% !important;
    max-width: 100% !important;

    min-height: auto !important;

    padding: 34px 22px !important;

    border-radius: 34px !important;

    align-items: flex-start !important;
    justify-content: flex-start !important;
    flex-direction: column !important;

    gap: 26px !important;
  }

  .contact-text {
    max-width: 100% !important;
  }

  .contact-text h2 {
    font-size: clamp(2.35rem, 13vw, 4rem) !important;
    line-height: 0.94 !important;
  }

  .contact-text p {
    max-width: 100% !important;

    margin-top: 20px !important;

    font-size: 0.96rem !important;
    line-height: 1.65 !important;
  }

  .contact-actions,
  .btn-primary-contact {
    width: 100% !important;
  }


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

  .site-footer {
    padding: 34px 16px !important;

    flex-direction: column !important;
    align-items: center !important;

    text-align: center !important;
    gap: 14px !important;
  }

  .footer-inner,
  .footer-bottom {
    width: 100% !important;
    max-width: 100% !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;

    text-align: center !important;
    gap: 14px !important;
  }

  .footer-brand {
    justify-content: center !important;
    text-align: center !important;
  }

  .footer-links,
  .footer-social {
    justify-content: center !important;
    flex-wrap: wrap !important;
  }

  .footer-credit {
    width: 100% !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 7px !important;
    flex-wrap: wrap !important;
  }

  .footer-credit-logo {
    width: 95px !important;
    height: auto !important;
  }
}


/* =========================================================
   TABLET
   YouTube mantiene desktop/pin desde 769px hacia arriba
========================================================= */

@media (min-width: 769px) and (max-width: 1100px) {

  .yt-mobile-experience {
    display: none !important;
  }

  .yt-desktop-experience {
    display: block !important;
  }

  .yt-section {
    width: 100% !important;
    max-width: 100% !important;

    min-height: 235vh !important;

    padding-inline: 18px !important;

    overflow: hidden !important;
  }

  .yt-pin-stage {
    width: 100% !important;
    max-width: 100% !important;

    height: 100svh !important;
    min-height: 100svh !important;

    overflow: hidden !important;
  }

  .yt-container {
    width: min(100%, 860px) !important;
    max-width: 100% !important;

    margin-inline: auto !important;

    overflow: hidden !important;
  }

  .yt-content-layer {
    align-items: flex-start !important;
    justify-content: center !important;

    padding-top: 82px !important;
    padding-bottom: 34px !important;

    overflow: hidden !important;
  }

  .yt-content {
    width: 100% !important;
    max-width: 100% !important;

    grid-template-columns: 1fr !important;
    gap: 16px !important;

    max-height: calc(100svh - 130px) !important;

    overflow: hidden !important;
  }

  .yt-video-panel,
  .yt-info-panel {
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    min-width: 0 !important;

    overflow: hidden !important;
  }

  .yt-carousel.yt-carousel-side {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(168px, 210px) !important;
    grid-template-columns: unset !important;
    gap: 12px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    max-height: none !important;

    padding-right: 0 !important;
    padding-bottom: 12px !important;

    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .yt-video-card {
    display: block !important;
    min-height: auto !important;
    scroll-snap-align: start !important;
  }

  .yt-video-thumb {
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    min-height: auto !important;
  }

  .yt-video-card-body {
    padding: 11px 12px 13px !important;
  }
}


/* =========================================================
   CELULARES ANGOSTOS
========================================================= */

@media (max-width: 480px) {

  .main-navbar {
    width: calc(100% - 16px) !important;
    padding: 10px 12px !important;
    transform: translateX(-50%) !important;
  }

  .nav-logo-target {
    width: 38px !important;
    height: 38px !important;
  }

  .nav-toggle {
    width: 40px !important;
    height: 40px !important;
  }

  .nav-brand-text {
    max-width: 130px !important;
    font-size: 0.76rem !important;
  }

  .hero-sticky {
    padding: 88px 16px 64px !important;
  }

  .hero-logo-stage {
    transform: translateY(-17vh) !important;
  }

  .logo-assembly {
    width: clamp(140px, 50vw, 200px) !important;
  }

  .hero-content {
    top: 67% !important;
    padding-inline: 16px;
  }

  .hero-title {
    font-size: clamp(2.55rem, 15vw, 4.6rem) !important;
  }

  .hero-subtitle {
    font-size: 0.9rem !important;
  }

  .hero-transition-section {
    min-height: 270px !important;

    margin-top: -82px !important;
    margin-bottom: -92px !important;

    padding: 46px 16px 108px !important;
  }

  .intro-section {
    padding: 132px 16px 84px !important;
  }

  .intro-section::after {
    top: -105px !important;

    width: 100% !important;
    max-width: 100% !important;
    height: 235px !important;
  }

  .intro-grid {
    gap: 46px !important;
  }

  .intro-moon {
    top: 64px !important;
    left: 22px !important;
    width: 74px !important;

    transform: translate(
      calc(100vw - 22px),
      calc(100vh - 64px)
    ) scale(0.72);
  }

  .glass-art-card,
  .intro-art-gallery {
    min-height: 320px !important;
    border-radius: 32px !important;
  }

  .glass-art-card::before {
    inset: 18px !important;
    border-radius: 24px !important;
  }

  .glass-content {
    inset: 18px !important;
    border-radius: 24px !important;
  }

  .glass-content span {
    font-size: clamp(3.9rem, 18vw, 5.8rem) !important;
  }

  .intro-art-meta {
    left: 18px !important;
    right: 18px !important;
    bottom: 18px !important;
  }

  .intro-art-label {
    font-size: 0.62rem !important;
  }

  .intro-art-subtitle {
    font-size: 0.72rem !important;
  }

  .intro-art-placeholder span {
    font-size: clamp(3.8rem, 19vw, 5.5rem) !important;
  }

  .intro-art-gallery .orb-01 {
    width: 130px !important;
    height: 130px !important;
    top: 38px !important;
    right: 28px !important;
  }

  .intro-art-gallery .orb-02 {
    width: 185px !important;
    height: 185px !important;
    left: -52px !important;
    bottom: -44px !important;
  }

  .experience-section {
    min-height: 100dvh !important;
  }

  .experience-layer,
  .experience-sofa-layer,
  .experience-rug-layer,
  .experience-table-layer,
  .experience-cups-layer,
  .experience-book-layer,
  .experience-plant-layer,
  .experience-painting-layer {
    width: clamp(620px, 205vw, 900px) !important;
    left: 42% !important;
    top: 21% !important;
    transform: translate(-50%, -50%) !important;
  }

  .experience-content {
    min-height: 100dvh !important;
    padding: 31dvh 16px 42px !important;
  }

  .experience-heading {
    margin-bottom: 24px !important;
  }

  .experience-title {
    font-size: clamp(1.85rem, 10vw, 2.9rem) !important;
    line-height: 0.95 !important;
  }

  .experience-description {
    font-size: 0.86rem !important;
    line-height: 1.5 !important;
  }

  .experience-services {
    gap: 9px !important;
  }

  .experience-service {
    padding: 13px 14px !important;
    border-radius: 20px !important;
  }

  .experience-service h3 {
    font-size: 0.9rem !important;
  }

  .experience-service p {
    font-size: 0.78rem !important;
  }

  .yt-mobile-experience {
    padding: 102px 12px 84px !important;
  }

  .yt-mobile-heading h2 {
    font-size: clamp(2.15rem, 12vw, 3.4rem) !important;
  }

  .yt-mobile-grid {
    gap: 8px !important;
  }

  .yt-mobile-card-body h4 {
    font-size: 0.72rem !important;
  }
}


/* =========================================================
   CELULARES MUY ANGOSTOS
========================================================= */

@media (max-width: 380px) {

  .yt-mobile-grid {
    grid-template-columns: 1fr !important;
  }

  .yt-mobile-experience {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}