/* =========================================================
   TACKYCHAN — AJUSTES MÓVILES
   Solo modifica la presentación en teléfono. Escritorio queda intacto.
   La cabecera global vive en site-header.css + site-navigation.css.
   ========================================================= */

@media (max-width:650px){
  /* El océano se amplía verticalmente en móvil para que al entrar
     solo se vea la zona superior y exista recorrido real hacia abajo. */
  .scene>img{
    width:auto;
    max-width:none;
    height:180vh;
    min-height:180vh;
    min-width:100vw;
    object-fit:cover;
    object-position:center top;
  }

  /* Perfil */
  .home{padding-top:8px}
  .profile-zone{margin-bottom:12px}
  .profile-strip{padding:12px 0 4px}
  .profile-head{gap:12px}
  .avatar{width:74px;height:74px;flex:0 0 74px}
  .profile-copy{min-width:0}
  .profile-copy h1{margin:4px 0 3px;font-size:22px;line-height:1.08}
  .profile-copy p{font-size:14px}
  .profile-copy small{display:block;font-size:12px;line-height:1.35}
  .profile-links{gap:12px;flex-wrap:wrap;margin-top:7px;font-size:11px}
  .profile-zone::before{left:-8px;width:100%;height:205px;opacity:.92}
  .profile-zone::after{left:35px;width:70%;height:115px}

  /* Accesos rápidos: tres por fila y etiquetas legibles sobre el mar. */
  .orbital-nav{justify-content:center;gap:15px 8px;padding:10px 0 18px}
  .orb{flex:0 0 calc(33.333% - 8px);min-width:0;gap:7px}
  .orb-image{width:68px;height:68px}
  .orb small{
    max-width:100%;
    padding:4px 7px;
    border-radius:999px;
    background:rgba(255,255,255,.74);
    box-shadow:0 4px 12px rgba(30,67,96,.09);
    font-size:11px;
    line-height:1.15;
    text-align:center;
    white-space:nowrap;
  }

  /* Carrusel: menos alto y sin el título gigante duplicado. */
  .carousel-card{min-height:0;border-radius:18px}
  .carousel-visual{height:205px}
  .carousel-visual>img{height:205px;min-height:205px;object-fit:cover}
  .slide-title-large{display:none}
  .carousel-copy{padding:16px 17px 20px}
  .section-kicker{font-size:10px;letter-spacing:1.15px}
  .carousel-copy h2{margin:8px 0 7px;font-size:24px}
  .carousel-copy p{margin:0;font-size:13px;line-height:1.45}
  .explore-btn{margin-top:10px;padding:10px 14px;border-radius:11px;font-size:12px}
  .arrow{top:102px;width:34px;height:34px;font-size:27px}
  .arrow.left{left:9px}.arrow.right{right:9px}
  .dots{top:187px;bottom:auto}

  /* Contenido normal */
  .gallery-row{padding-top:26px}
  .gallery-row::before{right:8%;top:17px}
  .row-head{gap:10px}
  .row-head h3{font-size:22px}
  .row-head a{font-size:11px}
  .content-block{padding:13px;border-radius:17px}

  /* Entrada a profundidades */
  .deep-entry{margin-top:28px;padding:18px;gap:12px;border-radius:18px}
  .deep-copy h2{font-size:25px;line-height:1.1}
  .deep-copy p{font-size:13px;line-height:1.5}
  .enter-btn{padding:11px 14px;font-size:12px}
  .deep-badge{height:92px}
  .deep-badge strong{font-size:32px}

  /* El viaje ocupa la pantalla y el texto no se sale en celulares estrechos. */
  .travel-copy{width:90%;white-space:normal;text-align:center;font-size:14px}
  .travel-copy.bottom{font-size:20px}

  /* After Dark móvil */
  .night-nav-simple{height:58px;gap:10px}
  .night-brand-simple{gap:7px;font-size:14px}
  .night-brand-simple img{width:31px;height:31px}
  .night-brand-simple em{font-size:8px}
  .night-main-simple{padding:30px 0 50px}
  .night-title-simple{padding:19px;border-radius:17px}
  .night-title-simple h1{font-size:32px}
  .night-title-simple p{font-size:13px;line-height:1.5}
  .night-grid-simple{gap:11px;margin-top:18px}
  .night-art-simple{height:160px}
  .surface-btn{margin-top:24px}
}

@media (max-width:390px){
  .scene>img{height:190vh;min-height:190vh}
  .avatar{width:68px;height:68px;flex-basis:68px}
  .profile-copy h1{font-size:20px}
  .profile-copy p{font-size:13px}
  .orb-image{width:64px;height:64px}
  .orb small{font-size:10px;padding-inline:6px}
  .carousel-visual,.carousel-visual>img{height:190px;min-height:190px}
  .arrow{top:95px}
  .dots{top:172px}
}

/* Banner tipo Deep Sea: prevalece sobre las reglas del carrusel clásico. */
@media(max-width:760px){
  .carousel-card.carousel-format-deep-banner{height:auto;min-height:0;border-radius:19px}
  .carousel-format-deep-banner .carousel-visual{height:auto;min-height:0;aspect-ratio:16/10}
  .carousel-format-deep-banner .carousel-visual>img{height:100%;min-height:0}
  .carousel-format-deep-banner .carousel-copy{padding:19px 18px 28px}
  .carousel-format-deep-banner .carousel-copy h2{margin:7px 0;font-size:26px}
  .carousel-format-deep-banner .carousel-copy p{font-size:13px;line-height:1.5}
  .carousel-format-deep-banner .arrow{top:32%;width:34px;height:34px;font-size:27px}
  .carousel-format-deep-banner .arrow.left{left:8px}
  .carousel-format-deep-banner .arrow.right{right:8px}
  .carousel-format-deep-banner .dots{top:auto;bottom:12px}
}