/* =========================================================
   VALENZUELA PROPIEDADES — V33 MOBILE
   Navbar + Hero + Search + Swipe cards + Detail responsive
   ========================================================= */

:root{
  --vp-mobile-red:#b40000;
  --vp-mobile-red-dark:#b40000;
  --vp-mobile-ink:#20272d;
}

/* =========================================================
   TABLET / MOBILE HEADER
   ========================================================= */
@media (max-width:991.98px){

  html,body{
    overflow-x:hidden !important;
  }

  /* La barra superior desaparece: el navbar ocupa una sola franja limpia */
  .top-strip{
    display:none !important;
  }

  .header-underlay{
    height:74px !important;
    min-height:74px !important;
    background:#fff !important;
    box-shadow:none !important;
    border:0 !important;
  }

  .main-nav,
  .main-nav.compact,
  body.header-compact .main-nav,
  body.internal-index-shell .main-nav,
  body.internal-index-shell .main-nav.compact{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    height:74px !important;
    min-height:74px !important;
    transform:none !important;
    margin:0 !important;
    padding:0 !important;
    background:#fff !important;
    border:0 !important;
    box-shadow:0 2px 9px rgba(18,25,31,.055) !important;
    z-index:1055 !important;
    overflow:visible !important;
  }

  .main-nav .container-xl,
  .main-nav.compact .container-xl,
  body.internal-index-shell .main-nav .container-xl,
  body.internal-index-shell .main-nav.compact .container-xl{
    position:relative !important;
    width:100% !important;
    max-width:none !important;
    height:74px !important;
    min-height:74px !important;
    margin:0 !important;
    padding:0 14px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    flex-wrap:nowrap !important;
  }

  /* Logo siempre DENTRO del navbar, sin card, sin desbordarse */
  .main-nav .brand-wrap,
  .main-nav.compact .brand-wrap,
  body.internal-index-shell .main-nav .brand-wrap,
  body.internal-index-shell .main-nav.compact .brand-wrap{
    position:relative !important;
    flex:0 0 auto !important;
    min-width:0 !important;
    width:auto !important;
    height:74px !important;
    min-height:74px !important;
    margin:0 !important;
    padding:5px 0 !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    overflow:hidden !important;
    display:flex !important;
    align-items:center !important;
  }

  .main-nav .brand-logo,
  .main-nav.compact .brand-logo,
  body.header-compact .main-nav .brand-logo,
  body.internal-index-shell .main-nav .brand-logo,
  body.internal-index-shell .main-nav.compact .brand-logo{
    position:static !important;
    inset:auto !important;
    display:block !important;
    width:auto !important;
    height:66px !important;
    max-width:118px !important;
    max-height:66px !important;
    margin:0 !important;
    padding:0 !important;
    transform:none !important;
    object-fit:contain !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }

  /* Hamburguesa corporativa */
  .vp-mobile-menu-toggle,
  .navbar-toggler.vp-mobile-menu-toggle{
    position:relative !important;
    z-index:1070 !important;
    width:48px !important;
    height:48px !important;
    min-width:48px !important;
    margin:0 !important;
    padding:0 !important;
    display:grid !important;
    place-items:center !important;
    border:1px solid rgba(180,0,0,.20) !important;
    border-radius:10px !important;
    background:#fff !important;
    box-shadow:none !important;
  }

  .vp-mobile-menu-toggle:focus{
    box-shadow:0 0 0 3px rgba(180,0,0,.10) !important;
  }

  .vp-menu-icon{
    width:25px;
    height:20px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
  }

  .vp-menu-icon span{
    display:block;
    width:100%;
    height:2px;
    border-radius:99px;
    background:var(--vp-mobile-red);
    transition:transform .2s ease,opacity .2s ease;
  }

  .vp-mobile-menu-toggle[aria-expanded="true"] .vp-menu-icon span:nth-child(1){
    transform:translateY(9px) rotate(45deg);
  }
  .vp-mobile-menu-toggle[aria-expanded="true"] .vp-menu-icon span:nth-child(2){
    opacity:0;
  }
  .vp-mobile-menu-toggle[aria-expanded="true"] .vp-menu-icon span:nth-child(3){
    transform:translateY(-9px) rotate(-45deg);
  }

  /* Menú realmente colapsable. Vence reglas antiguas display:flex!important */
  #mainMenu.navbar-collapse{
    position:absolute !important;
    top:74px !important;
    left:12px !important;
    right:12px !important;
    width:auto !important;
    height:auto !important;
    max-height:calc(100vh - 92px) !important;
    overflow-y:auto !important;
    margin:0 !important;
    padding:12px !important;
    background:#fff !important;
    border:1px solid #edf0f2 !important;
    border-radius:12px !important;
    box-shadow:0 16px 34px rgba(18,25,31,.14) !important;
    z-index:1065 !important;
  }

  #mainMenu.navbar-collapse.collapse:not(.show){
    display:none !important;
  }

  #mainMenu.navbar-collapse.collapse.show,
  #mainMenu.navbar-collapse.collapsing{
    display:block !important;
  }

  #mainMenu .navbar-nav{
    width:100% !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    gap:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
  }

  #mainMenu .nav-item{
    width:100% !important;
  }

  #mainMenu .nav-link,
  .main-nav.compact #mainMenu .nav-link,
  body.internal-index-shell #mainMenu .nav-link{
    width:100% !important;
    height:auto !important;
    min-height:44px !important;
    padding:11px 10px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    color:#343b41 !important;
    font-size:.88rem !important;
    font-weight:700 !important;
    text-transform:uppercase !important;
    border-radius:8px !important;
  }

  #mainMenu .nav-link:hover,
  #mainMenu .nav-link.active{
    color:var(--vp-mobile-red) !important;
    background:#fff5f5 !important;
  }

  #mainMenu .nav-link::before,
  #mainMenu .nav-link::after{
    box-shadow:none !important;
  }

  #mainMenu .nav-link.active::before{
    display:none !important;
  }

  #mainMenu .dropdown-menu{
    position:static !important;
    width:100% !important;
    margin:2px 0 8px !important;
    padding:5px !important;
    border:0 !important;
    background:#fafafa !important;
    box-shadow:none !important;
  }

  #mainMenu .dropdown-item{
    padding:10px 12px !important;
    border-radius:7px !important;
    font-size:.86rem !important;
  }

  #mainMenu .btn-contact-nav,
  #mainMenu > .btn-contact-nav,
  body.internal-index-shell #mainMenu .btn-contact-nav{
    width:100% !important;
    min-height:44px !important;
    margin:10px 0 0 !important;
    justify-content:center !important;
    background:#252d34 !important;
    color:#fff !important;
    border-radius:8px !important;
    box-shadow:none !important;
  }

  /* Reserva vertical única: elimina la gran banda blanca móvil */
  body:not(.internal-index-shell) .page-wrap{
    padding-top:74px !important;
    margin-top:0 !important;
  }

  body.internal-index-shell,
  body.internal-index-shell[data-page]{
    padding-top:0 !important;
  }

  body.internal-index-shell .internal-v16-main,
  body.internal-index-shell[data-page] .internal-v16-main{
    padding-top:74px !important;
    margin-top:0 !important;
  }
}

/* =========================================================
   INDEX — HERO MOBILE
   ========================================================= */
@media (max-width:767.98px){

  body:not(.internal-index-shell) .page-wrap{
    padding-top:74px !important;
  }

  .page-wrap > .hero,
  .hero,
  .hero-carousel,
  .hero-carousel .carousel-inner,
  .hero-carousel .carousel-item,
  .hero-slide{
    min-height:440px !important;
    height:440px !important;
    margin-top:0 !important;
    margin-bottom:0 !important;
  }

  .hero-slide{
    background-position:center center !important;
  }

  .hero-slide .container-xl{
    height:100% !important;
    padding-left:18px !important;
    padding-right:18px !important;
  }

  .hero-slide .hero-content,
  .hero-content{
    max-width:94% !important;
    padding:72px 0 70px !important;
  }

  .hero-slide .eyebrow{
    margin-bottom:10px !important;
    font-size:.78rem !important;
    letter-spacing:.19em !important;
  }

  .hero-slide h1,
  .hero h1{
    font-size:2.15rem !important;
    line-height:1.02 !important;
    letter-spacing:-.045em !important;
  }

  .hero-slide p,
  .hero p{
    margin-top:15px !important;
    font-size:.88rem !important;
    line-height:1.48 !important;
    max-width:94% !important;
  }

  /* Flechas pequeñas y semi transparentes, también en celular */
  .hero-carousel .carousel-control-prev,
  .hero-carousel .carousel-control-next{
    display:grid !important;
    place-items:center !important;
    top:auto !important;
    bottom:18px !important;
    width:40px !important;
    height:40px !important;
    opacity:1 !important;
    border:1px solid rgba(255,255,255,.55) !important;
    border-radius:50% !important;
    background:rgba(255,255,255,.32) !important;
    box-shadow:0 5px 14px rgba(15,23,42,.08) !important;
    backdrop-filter:blur(7px) !important;
    -webkit-backdrop-filter:blur(7px) !important;
  }

  .hero-carousel .carousel-control-prev{
    left:auto !important;
    right:64px !important;
  }

  .hero-carousel .carousel-control-next{
    right:16px !important;
  }

  .hero-carousel .carousel-control-prev-icon,
  .hero-carousel .carousel-control-next-icon{
    width:14px !important;
    height:14px !important;
    opacity:.82 !important;
  }

  .hero-carousel .carousel-indicators{
    left:16px !important;
    right:auto !important;
    bottom:28px !important;
    padding:0 !important;
    margin:0 !important;
    width:auto !important;
    gap:6px !important;
  }

  .hero-carousel .carousel-indicators button{
    width:20px !important;
    height:3px !important;
  }

  /* No dejar huecos arriba/abajo del hero */
  .hero + .search-shell{
    margin-top:0 !important;
  }
}

/* =========================================================
   INDEX — BUSCADOR MOBILE COLAPSABLE
   ========================================================= */
.mobile-search-toggle{
  display:none;
}

@media (max-width:767.98px){
  .search-shell{
    position:relative !important;
    z-index:20 !important;
    margin:-1px 0 0 !important;
    padding:10px 0 12px !important;
    background:#fff !important;
  }

  .search-shell .container-xl{
    padding-left:16px !important;
    padding-right:16px !important;
  }

  .mobile-search-toggle{
    width:100%;
    min-height:48px;
    padding:11px 14px;
    display:flex !important;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    border:1px solid #e5e9ed;
    border-radius:10px;
    background:#fff;
    color:#252d34;
    font-size:.9rem;
    font-weight:800;
    box-shadow:0 5px 15px rgba(18,25,31,.07);
  }

  .mobile-search-toggle > span{
    display:flex;
    align-items:center;
    gap:8px;
  }

  .mobile-search-toggle > span i{
    color:var(--vp-mobile-red);
  }

  .mobile-search-chevron{
    transition:transform .2s ease;
  }

  .mobile-search-toggle[aria-expanded="true"] .mobile-search-chevron{
    transform:rotate(180deg);
  }

  .mobile-search-panel{
    display:none !important;
    padding-top:9px;
  }

  .mobile-search-panel.is-open{
    display:block !important;
  }

  .search-card{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
    margin:0 !important;
    padding:10px !important;
    border-radius:12px !important;
    box-shadow:0 8px 20px rgba(18,25,31,.08) !important;
  }

  .search-field{
    width:100% !important;
    min-height:60px !important;
    padding:9px 11px !important;
    border-right:0 !important;
    border-bottom:1px solid #eef1f3 !important;
  }

  .search-field:last-of-type{
    border-bottom:0 !important;
  }

  .search-field label{
    font-size:.71rem !important;
  }

  .search-field select{
    font-size:.86rem !important;
  }

  .search-submit-wrap{
    width:100% !important;
    padding:0 !important;
  }

  .search-submit{
    width:100% !important;
    min-height:46px !important;
    border-radius:8px !important;
  }
}

/* =========================================================
   INDEX — PROPERTY CAROUSELS TOUCH
   1 card per view on phones
   ========================================================= */
@media (max-width:767.98px){

  .properties-area .container-xl{
    padding-left:16px !important;
    padding-right:16px !important;
  }

  .properties-area.section-pad,
  .property-category-section{
    padding-top:30px !important;
    padding-bottom:34px !important;
  }

  .properties-area .section-head{
    gap:14px !important;
    margin-bottom:16px !important;
  }

  .properties-area .section-title{
    font-size:1.58rem !important;
    line-height:1.08 !important;
  }

  .property-row-dynamic[data-property-carousel]{
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:12px !important;
    width:100% !important;
    margin:0 !important;
    padding:0 1px 7px !important;
    overflow-x:auto !important;
    overflow-y:visible !important;
    scroll-snap-type:x mandatory !important;
    scroll-behavior:smooth !important;
    overscroll-behavior-x:contain !important;
    -webkit-overflow-scrolling:touch !important;
    touch-action:pan-x pan-y !important;
    scrollbar-width:none !important;
  }

  .property-row-dynamic[data-property-carousel]::-webkit-scrollbar{
    display:none !important;
  }

  .property-row-dynamic[data-property-carousel] > [class*="col-"]{
    flex:0 0 100% !important;
    width:100% !important;
    max-width:100% !important;
    min-width:100% !important;
    padding:0 !important;
    scroll-snap-align:start !important;
    scroll-snap-stop:always !important;
  }

  .property-row-dynamic .property-card{
    width:100% !important;
    max-width:none !important;
    height:100% !important;
    margin:0 !important;
  }

  .property-row-dynamic .property-media{
    height:270px !important;
    min-height:270px !important;
  }

  .property-row-dynamic .property-media img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
  }

  .section-actions{
    width:100% !important;
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    gap:8px !important;
  }

  .section-actions .outline-red,
  .section-actions .map-premium-btn{
    min-height:40px !important;
    font-size:.69rem !important;
    padding:9px 11px !important;
  }

  .section-actions .circle-nav,
  .section-actions .circle-nav.red{
    display:grid !important;
    place-items:center !important;
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    border:1px solid rgba(38,45,52,.12) !important;
    background:rgba(255,255,255,.68) !important;
    color:#4d5963 !important;
    box-shadow:0 4px 12px rgba(18,25,31,.07) !important;
    backdrop-filter:blur(7px) !important;
    -webkit-backdrop-filter:blur(7px) !important;
  }
}

/* =========================================================
   DETAIL + INTERNAL PAGES MOBILE
   ========================================================= */
@media (max-width:767.98px){

  body.internal-index-shell .internal-v16-main,
  body.internal-index-shell[data-page] .internal-v16-main{
    padding-top:74px !important;
  }

  body[data-page="detalle"] .detail-page-head{
    margin:0 !important;
    padding:8px 0 !important;
  }

  body[data-page="detalle"] .detail-page-head .container-xl,
  body[data-page="detalle"] .detail-gallery-section,
  body[data-page="detalle"] .detail-layout-section,
  body[data-page="detalle"] .similar-section .container-xl{
    padding-left:12px !important;
    padding-right:12px !important;
  }

  body[data-page="detalle"] .detail-gallery-section{
    margin-top:0 !important;
    padding-top:8px !important;
  }

  body[data-page="detalle"] .property-gallery-mobile{
    width:100% !important;
    border-radius:13px !important;
  }

  body[data-page="detalle"] .property-gallery-mobile-slide{
    aspect-ratio:4/3 !important;
  }

  body[data-page="detalle"] .detail-v32-grid{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    gap:14px !important;
    width:100% !important;
    min-width:0 !important;
  }

  body[data-page="detalle"] .detail-v32-main,
  body[data-page="detalle"] .detail-v32-sidebar{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  body[data-page="detalle"] .detail-v32-title-card,
  body[data-page="detalle"] .detail-v32-content-card,
  body[data-page="detalle"] .features-card,
  body[data-page="detalle"] .detail-v32-media-card,
  body[data-page="detalle"] .detail-v32-location-card,
  body[data-page="detalle"] .detail-v32-contact-card{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    padding:14px !important;
    border-radius:13px !important;
  }

  body[data-page="detalle"] .detail-v32-title-grid{
    grid-template-columns:minmax(0,1fr) !important;
    gap:14px !important;
  }

  body[data-page="detalle"] .detail-v32-title-card h1{
    overflow-wrap:anywhere !important;
    word-break:normal !important;
    font-size:1.55rem !important;
    line-height:1.12 !important;
  }

  body[data-page="detalle"] .detail-location{
    font-size:.84rem !important;
    line-height:1.45 !important;
  }

  body[data-page="detalle"] .detail-v32-actions,
  body[data-page="detalle"] .detail-v34-actions{
    width:100% !important;
    max-width:none !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
  }

  body[data-page="detalle"] .detail-v32-actions-row,
  body[data-page="detalle"] .detail-v34-actions-row{
    width:100% !important;
    max-width:none !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
  }

  body[data-page="detalle"] .detail-v32-actions > *,
  body[data-page="detalle"] .detail-v32-actions-row > *,
  body[data-page="detalle"] .detail-v34-actions > *,
  body[data-page="detalle"] .detail-v34-actions-row > *{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
  }

  body[data-page="detalle"] .detail-v32-metrics{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
  }

  body[data-page="detalle"] .detail-v32-metrics .metric-card{
    min-width:0 !important;
    min-height:82px !important;
    padding:11px !important;
  }

  body[data-page="detalle"] .contact-agent{
    min-width:0 !important;
  }

  body[data-page="detalle"] .contact-agent > div:last-child{
    min-width:0 !important;
  }

  body[data-page="detalle"] .contact-agent strong,
  body[data-page="detalle"] .contact-agent span{
    overflow-wrap:anywhere !important;
  }

  body[data-page="detalle"] .contact-quick-actions{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
  }

  body[data-page="detalle"] .contact-form .form-control,
  body[data-page="detalle"] .contact-form textarea,
  body[data-page="detalle"] .contact-form input{
    width:100% !important;
    max-width:100% !important;
  }

  body[data-page="detalle"] .map-frame{
    height:260px !important;
  }

  body[data-page="detalle"] .similar-section{
    padding-top:24px !important;
    padding-bottom:28px !important;
  }
}

@media (max-width:420px){
  .hero-slide h1,
  .hero h1{
    font-size:1.92rem !important;
  }

  .property-row-dynamic .property-media{
    height:245px !important;
    min-height:245px !important;
  }

  body[data-page="detalle"] .detail-v32-actions-row,
  body[data-page="detalle"] .detail-v34-actions-row,
  body[data-page="detalle"] .contact-quick-actions{
    grid-template-columns:1fr !important;
  }
}