/* ============================================
   RESPONSIVE - MÓVILES (≤ 768px)
   ============================================ */

@media (max-width: 768px) {
  html,
  body {
    margin: 0 !important;
    padding: 0 !important;
    background: #0f2d07 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .t-rminos-de-uso {
    position: relative !important;
    width: 100% !important;
    min-height: 100vh !important;
    background: #0f2d07 !important;
    padding: 96px 20px 48px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 32px !important;
    box-sizing: border-box !important;
  }

  .capa-1,
  .capa-12,
  .capa-13,
  .capa-14 {
    display: none !important;
  }

  /* ========================================
     PANES DECORATIVOS
     ======================================== */
  .pan-decorativo {
    position: fixed !important;
    width: clamp(80px, 22vw, 120px) !important;
    height: auto !important;
    max-width: 150px !important;
    opacity: 0.4 !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }

  .pan-decorativo.pan-1 {
    display: none !important;
  }

  .pan-decorativo.pan-2 {
    top: 30% !important;
    width: 18% !important;
    left: -9% !important;
    transform: rotate(33deg) !important;
  }

  .pan-decorativo.pan-3 {
    bottom: -2.5% !important;
    left: 0% !important;
    width: 12% !important;
    transform: rotate(21deg) !important;
  }

  .pan-decorativo.pan-4 {
    bottom: 5% !important;
    right: -5% !important;
    transform: scalex(-1) rotate(19deg) !important;
    width: 16% !important;
  }

  /* ========================================
     ADORNOS DE FONDO - RAMAS Y ESFERAS
     ======================================== */
  
  /* Ramas decorativas laterales */
  .frame-102,
  .frame-103 {
    position: fixed !important;
    width: clamp(140px, 38vw, 220px) !important;
    height: auto !important;
    z-index: 1 !important;
    opacity: 0.85 !important;
    display: block !important;
    pointer-events: none !important;
  }

  .frame-102 {
    transform: rotate(49deg) !important;
    width: clamp(140px, 35vw, 200px) !important;
    left: -8% !important;
    top: -11% !important;
  }

  .frame-103 {
    transform: rotate(31deg) !important;
    opacity: 0.7 !important;
    bottom: 22% !important;
    right: -26% !important;
    width: 54% !important;
    position: fixed !important;
    height: auto !important;
    z-index: 1 !important;
    display: block !important;
    pointer-events: none !important;
  }

  .frame-102 img,
  .frame-103 img,
  .frame-104 img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  /* Nueva rama solo visible en móvil */
  .frame-104 {
    position: fixed !important;
    width: clamp(140px, 38vw, 220px) !important;
    height: auto !important;
    z-index: 1 !important;
    opacity: 0.85 !important;
    display: block !important;
    pointer-events: none !important;
    left: -20% !important;
    top: 45% !important;
  }

  /* Esfera decorativa 1 */
  .esfera {
    transform: scaleX(-1) rotate(58deg);
    position: fixed !important;
    top: 29% !important;
    right: -33% !important;
    width: 60%;
    height: auto !important;
    opacity: 1 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    display: block !important;
    animation: float 4s ease-in-out infinite !important;
  }

  /* Esfera decorativa 2 */
  .esfera2 {
    position: fixed !important;
    bottom: 11% !important;
    left: -19% !important;
    width: clamp(146px, 48vw, 103px) !important;
    height: auto !important;
    opacity: 1 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    display: block !important;
    filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.25)) !important;
    animation: float 5s ease-in-out infinite 1s !important;
  }

  .hamburguesa {
    position: fixed !important;
    top: 3% !important;
    right: 4% !important;
    width: 32px !important;
    height: 26px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: center !important;
    cursor: pointer !important;
    z-index: 100 !important;
  }

  .rectangle-5,
  .rectangle-6,
  .rectangle-7 {
    width: 100% !important;
    height: 4px !important;
    border-radius: 999px !important;
    background: #fef8cf !important;
    position: static !important;
  }

  .back {
    position: fixed !important;
    top: 3% !important;
    left: 4% !important;
    z-index: 100 !important;
    text-decoration: none !important;
  }

  .frame-90 {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 20px !important;
    border-radius: 999px !important;
    background: #fef8cf !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25) !important;
  }

  .arrow-back {
    width: 20px !important;
    height: 20px !important;
  }

  .regresar {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #0f2d07 !important;
  }

  /* Logo Banner - Based on desktop layout proportions */
  .titular {
    order: 0 !important;
    width: 100% !important;
    max-width: clamp(300px, 90vw, 500px) !important;
    height: clamp(90px, 30vw, 135px) !important;
    position: relative !important;
    margin: 12px auto 20px !important;
    padding: 0 15px !important;
    box-sizing: border-box !important;
  }

  .titular .layer-1 {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
  }

  /* group37 - Main logo (similar to group46 in elegir-voz) */
  .titular .layer-1 .group37 {
    display: block !important;
    position: absolute !important;
    width: 87% !important;
    height: auto !important;
    top: 25% !important;
    left: 7.25% !important;
    right: 5.72% !important;
    z-index: 2 !important;
    overflow: visible !important;
  }

  /* group38 - Large musical note OVERLAYING (similar to group47) */
  .titular .layer-1 .group38 {
    display: block !important;
    position: absolute !important;
    width: 87% !important;
    height: auto !important;
    top: 23% !important;
    left: 6.46% !important;
    right: 6.51% !important;
    z-index: 5 !important;
    overflow: visible !important;
    opacity: 1 !important;
  }

  /* group42 - Part of logo (similar to group51) */
  .titular .layer-1 .group42 {
    display: block !important;
    position: absolute !important;
    width: 15% !important;
    height: auto !important;
    top: 11% !important;
    left: 12.62% !important;
    right: 72.44% !important;
    z-index: 3 !important;
    overflow: visible !important;
  }

  /* vector69 - Supán logo (similar to vector87) */
  .titular .layer-1 .vector69 {
    display: block !important;
    position: absolute !important;
    width: 6% !important;
    height: auto !important;
    top: 53% !important;
    left: 93.95% !important;
    right: 0% !important;
    z-index: 4 !important;
    overflow: visible !important;
  }

  /* Small decorative notes - positioned like desktop */
  .titular .layer-1 .group39 {
    display: block !important;
    position: absolute !important;
    width: 7.23% !important;
    height: auto !important;
    top: 68.54% !important;
    left: 2.37% !important;
    right: 90.4% !important;
    z-index: 2 !important;
    overflow: visible !important;
  }

  .titular .layer-1 .group40 {
    display: block !important;
    position: absolute !important;
    width: 13.45% !important;
    height: auto !important;
    top: 0% !important;
    left: 81.93% !important;
    right: 4.63% !important;
    z-index: 2 !important;
    overflow: visible !important;
  }

  .titular .layer-1 .group41 {
    display: block !important;
    position: absolute !important;
    width: 5.81% !important;
    height: auto !important;
    top: 40.99% !important;
    left: 0% !important;
    right: 94.19% !important;
    z-index: 2 !important;
    overflow: visible !important;
  }

  .frame-111 {
    width: 100% !important;
    max-width: 620px !important;
    background: rgba(16, 41, 10, 0.92) !important;
    border-radius: 24px !important;
    padding: 28px 24px !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    z-index: 100 !important;
  }

  .t-rminos-de-uso2 {
    font-size: clamp(22px, 5vw, 28px) !important;
    font-weight: 800 !important;
    color: #fef8cf !important;
    text-align: center !important;
    margin: 0 !important;
    z-index: 101 !important;
    position: relative !important;
  }

  .lorem-ipsum-dolor-sit-amet-consectetuer-adipiscing-elit-sed-diam-nonummy-nibh-euismod-tincidunt-ut-laoreet-dolore-magna-aliquam-erat-volutpat-ut-wisi-enim-ad-minim-veniam-quis-nostrud-exerci-tation-ullamcorper-suscipit-lobortis-nisl-ut-aliquip-ex-ea-commodo-consequat-duis-autem-vel-eum-iriure-dolor-in-hendrerit-in-vulputate-velit-esse-molestie-consequat-vel-illum-dolore-eu-feugiat-nulla-facilisis-at-vero-eros-et-accumsan-et-iusto-odio-dignissim-qui-blandit-praesent-luptatum-zzril-delenit-augue-duis-dolore-te-feugait-nulla-facilisi-lorem-ipsum-dolor-sit-amet-cons-ectetuer-adipiscing-elit-sed-diam-nonummy-nibh-euismod-tincidunt-ut-laoreet-dolore-lorem-ipsum-dolor-sit-amet-consectetuer-adipiscing-elit-sed-diam-nonummy-nibh-euismod-tincidunt-ut-laoreet-dolore {
    font-size: clamp(14px, 3.6vw, 16px) !important;
    line-height: 1.6 !important;
    color: rgba(254, 248, 207, 0.92) !important;
    margin: 0 !important;
    z-index: 101 !important;
    position: relative !important;
  }
}

@media (max-width: 480px) {
  .t-rminos-de-uso {
    padding: 90px 18px 40px !important;
    gap: 28px !important;
  }

  .frame-111 {
    padding: 24px 20px !important;
    border-radius: 20px !important;
  }

  .t-rminos-de-uso2 {
    font-size: 22px !important;
  }
}