/* styles/overrides/mobile.css
   Capa responsive (solo mobile). Si querés revertir, borrá este archivo. */

/* Evita scroll del fondo cuando el menú está abierto */
body.menu-open {
  height: 100vh;
  overflow: hidden;
}

/* ====================================================================== */
/* 0) Tipografía y base                                                   */
/* ====================================================================== */
@media (max-width: 768px) {
  :root {
    --fs-h1: clamp(28px, 7vw, 36px);
    --fs-h2: clamp(22px, 5.8vw, 28px);
    --fs-h3: clamp(18px, 4.8vw, 22px);
    --fs-p:  clamp(14px, 4vw, 18px);
  }

  h1 { font-size: var(--fs-h1); line-height: 1.15; }
  h2 { font-size: var(--fs-h2); line-height: 1.2;  }
  h3 { font-size: var(--fs-h3); line-height: 1.25; }
  p, li { font-size: var(--fs-p); line-height: 1.6; }

  /* Desactiva efectos hover agresivos en pantallas táctiles */
  @media (hover: none) {
    a:hover, button:hover { transform: none !important; }
  }
}

/* ====================================================================== */
/* 1) Header v2                                                           */
/* ====================================================================== */
@media (max-width: 768px) {
  .header-v2 {
    position: sticky;
    top: 0;
    backdrop-filter: saturate(1.1) blur(8px);
    background: rgba(0,0,0,0.5);
    z-index: 1000;
  }

  .header-v2__toggle { display: inline-flex !important; }

  .header-v2__nav {
    position: fixed;
    inset: calc(clamp(56px, 10vw, 72px)) 0 0 0;
    background: rgba(0,0,0,0.92);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
    padding: 16px clamp(16px, 4vw, 24px);
  }
  .header-v2.is-open .header-v2__nav {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .header-v2__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .header-v2__link {
    display: block;
    padding: 12px 8px;
    border-radius: 10px;
  }
}

/* ====================================================================== */
/* 2) Hero                                                                */
/* ====================================================================== */
@media (max-width: 768px) {
  .hero {
    min-height: 72vh; /* 100vh “duro” da problemas con barras del navegador */
    height: auto;
    padding: 72px 16px 40px;
  }
  .hero::before { background-position: center; background-size: cover; }
  .logo-hero { width: clamp(180px, 48vw, 280px); max-width: 90vw; }
}

/* ====================================================================== */
/* 3) Galería / Marquee debajo del hero                                   */
/*    - más lento, 4:3 y bordes redondeados                               */
/* ====================================================================== */
@media (max-width: 768px) {
  .slider-track { animation-duration: 70s !important; }
  .slider-track img {
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    object-fit: cover;
  }
}
@media (prefers-reduced-motion: reduce) {
  .slider-track { animation: none !important; transform: none !important; }
}

/* ====================================================================== */
/* 4) Infraestructura / Amenities (2×3 en mobile)                         */
/* ====================================================================== */
@media (max-width: 768px) {
  .infraestructura .infra-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    justify-items: center;
    margin-top: 1.5rem;
  }
  .infraestructura .infra-card {
    width: 100% !important;
    max-width: 320px;
    text-align: center;
    padding: 16px 12px;
    border-radius: 16px;
  }
  .infraestructura .infra-card img {
    width: 56px; height: 56px; object-fit: contain;
  }
}

/* ====================================================================== */
/* 5) Vitales (slider interno)                                            */
/* ====================================================================== */
@media (max-width: 768px) {
  .vitales .slide img {
    aspect-ratio: 4 / 3;
    border-radius: 14px;
    object-fit: cover;
  }
  .vitales .flecha { transform: translateY(-50%); }
}

/* ====================================================================== */
/* 6) Ubicación                                                           */
/* ====================================================================== */
@media (max-width: 768px) {
  .ubicacion { padding: 36px 0; }
  .ubicacion__contenedor {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0 16px;
  }
  .ubicacion__imagen,
  .ubicacion__mapa,
  .ubicacion__mapa img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 12px;
  }
  .ubicacion__tarjeta {
    align-self: center;
    max-width: 420px;
    margin-top: -16px; /* más cerca de la imagen sin superponerla */
  }
  .ubicacion__tarjeta .btn-ubicacion {
    width: auto;
    padding: 10px 14px;
    margin-inline: auto;
  }
}

/* ====================================================================== */
/* 7) WhatsApp FAB                                                        */
/* ====================================================================== */
@media (max-width: 768px) {
  .whatsapp-fab {
    right: clamp(16px, 4vw, 24px);
    bottom: calc(clamp(16px, 4vw, 24px) + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 8px 26px rgba(0,0,0,.5); /* sombra oscura, nada de verde */
  }
}

/* ====================================================================== */
/* 4.b) Amenities (en Vitales) – forzar 2×3 en mobile                     */
/*      Aplica a contenedores: .vitales-amenities / .amenities*           */
/* ====================================================================== */
@media (max-width: 768px) {
  .vitales-amenities,
  .amenities,
  .amenities__lista,
  .amenities__grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    justify-items: center;
  }

  .vitales-amenities > *,
  .amenities > *,
  .amenities__lista > *,
  .amenities__grid > * {
    /* Cancelar ancho fijo por flex del CSS original */
    flex: initial !important;
    width: auto !important;
    max-width: none !important;
  }

  .amenity {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    text-align: center;
  }

  /* Tamaño de íconos cómodo en mobile */
  .vitales-amenities img,
  .amenities img,
  .amenities__lista img,
  .amenities__grid img {
    width: 56px !important;
    height: 56px !important;
  }
}

/* ====================================================================== */
/* 8) Footer – ubicar al final en mobile, sin solaparse con el hero       */
/* ====================================================================== */
@media (max-width: 768px) {
  /* Asegurar flujo normal y orden al final en contenedores flex */
  .footer,
  .site-footer {
    display: block;
    width: 100%;
    position: static !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    clear: both;
    order: 1000 !important;       /* si el padre es flex, queda al final */
    align-self: stretch !important;
    margin-top: clamp(24px, 4vw, 40px) !important; /* separarlo del hero */
    padding: 24px 16px;
  }

  /* Colapsar a 1 columna en mobile */
  .footer__grid,
  .footer__cols,
  .footer .grid,
  .site-footer .grid,
  .site-footer__grid {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Asegurar que no haya widths/flex heredados que rompan el layout */
  .footer > *,
  .site-footer > *,
  .footer__grid > *,
  .footer__cols > * {
    flex: initial !important;
    width: auto !important;
    max-width: none !important;
  }
}

/* ====================================================================== */
/* 8.b) Footer (.footer-v1) – fijar al final y sin solaparse en mobile    */
/* ====================================================================== */
@media (max-width: 768px) {
  .footer-v1 {
    display: block;
    width: 100%;
    position: static !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    z-index: auto !important;
    clear: both;
    order: 1000 !important; /* si el contenedor es flex, va al final */
    align-self: stretch !important;
    margin-top: clamp(24px, 4vw, 40px) !important;
  }

  /* Colapsar a 1 columna en mobile */
  .footer-v1__inner {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Evitar anchos/flex heredados que empujen hacia arriba */
  .footer-v1__inner > * {
    flex: initial !important;
    width: auto !important;
    max-width: none !important;
  }
}

/* ====================================================================== */
/* Todos los hijos principales en flujo normal */
  body > header,
  body > section,
  body > main,
  body > div {
    flex: 0 0 auto !important;
  }
  /* Footer al final siempre */
  body > footer,
  body > .footer-v1,
  .footer-v1 {
    margin-top: auto !important;
  }
}

/* ====================================================================== */
/* 8.d) Prevención de solapado: secciones arriba del footer (mobile)      */
/* ====================================================================== */
@media (max-width: 768px) {
  /* Stacking: que las secciones tengan prioridad visual sobre el footer */
  .hero,
  .galeria-slider,
  .mensaje-proyecto,
  .proyecto-mapa,
  .infraestructura,
  .vitales,
  .comercial,
  .conoce-rialto,
  .quienes-somos,
  .formulario {
    position: relative !important;
    z-index: 2 !important;
  }
  .footer-v1 {
    position: relative !important;
    z-index: 1 !important;
    margin-top: clamp(24px, 4vw, 40px) !important;
  }

  /* Espaciado seguro antes del footer (por si el slide usa efectos) */
  .formulario,
  .quienes-somos,
  .conoce-rialto,
  .comercial,
  .vitales {
    padding-bottom: max(24px, 4vw) !important;
  }
}

/* ====================================================================== */
/* 8.e) Aislamiento y stacking fuerte para secciones previas al footer    */
/* ====================================================================== */
@media (max-width: 768px) {
  /* Crear contextos de apilamiento propios */
  .galeria-slider,
  .vitales,
  .comercial,
  .conoce-rialto,
  .quienes-somos,
  .formulario {
    position: relative !important;
    isolation: isolate !important;
    z-index: 100 !important;  /* por encima del footer */
  }

  .footer-v1 {
    position: relative !important;
    z-index: 0 !important;
  }
}

/* ====================================================================== */
/* 1.b) Header v2 (robusto): ocultar panel cuando está cerrado en mobile  */
/* ====================================================================== */
@media (max-width: 768px) {
  /* Asegurar panel full-height y oculto por defecto */
  .header-v2__nav {
    position: fixed;
    inset: calc(clamp(56px, 10vw, 72px)) 0 0 0; /* incluir bottom:0 para cubrir hasta el final */
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
    transform: translateY(-8px) !important;
  }
  .header-v2.is-open .header-v2__nav {
    display: block !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
    transform: translateY(0) !important;
  }
}

/* ====================================================================== */
/* 9) Footer v2: asegurar "Secciones" visible en mobile                   */
/* ====================================================================== */
@media (max-width: 768px) {
  .footer-v2__nav .footer-v2__list,
  .footer-v2__list { 
    display: grid !important; 
    grid-auto-rows: min-content;
  }
}

/* ====================================================================== */
/* 0.b) Navegación: compensación para anclas (offset del header)          */
/* ====================================================================== */
@media (max-width: 768px) {
  :root { --nav-offset: clamp(56px, 10vw, 72px); }
  html { scroll-padding-top: var(--nav-offset); }
}

/* ====================================================================== */
/* 4.c) Amenities ≤480: ajustar gap y tamaño de íconos                    */
/* ====================================================================== */
@media (max-width: 480px) {
  .infraestructura .infra-grid { gap: 20px; }
  .infraestructura .infra-card img { width: 52px; height: 52px; }
}

/* ====================================================================== */
/* 1.c) Header v2 (mobile): forzar layout del menú dentro del panel       */
/* ====================================================================== */
@media (max-width: 768px) {
  /* Toggle visible sí o sí en mobile */
  .header-v2__toggle { display: inline-flex !important; }

  /* El panel ya lo controlamos con .header-v2__nav (fixed). 
     Aseguramos que la LISTA (ul) se vea en columna dentro del panel. */
  .header-v2.is-open .header-v2__nav .header-v2__list,
  .header-v2__nav .header-v2__list {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    /* Neutralizar estilos de dropdown antiguos */
    position: static !important;
    top: auto !important; right: auto !important;
    width: auto !important;
    background: transparent !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }

  /* Links del menú con padding cómodo */
  .header-v2__link { padding: 12px 8px !important; border-radius: 10px; }
  .header-v2__item--social { margin-top: 8px !important; }
}

@media (max-width: 768px) { .header-v2__toggle { display: inline-flex !important; } }

/* ====================================================================== */
/* 1.d) Header v2 (mobile): panel más chico + fondo negro translúcido     */
/* ====================================================================== */
@media (max-width: 768px) {
  .header-v2__nav {
    /* En lugar de cubrir todo, un panel más compacto con scroll interno */
    inset: calc(clamp(56px, 10vw, 72px)) 0 auto 0;
    max-height: min(76vh, calc(100dvh - clamp(56px, 10vw, 72px) - 12px));
    background: rgba(0,0,0,0.72) !important; /* negro translúcido */
    backdrop-filter: saturate(1.15) blur(6px);
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    overflow: auto;
  }

  /* Tono y densidad del menú */
  .header-v2__nav .header-v2__list {
    gap: 8px !important;
  }
  .header-v2__link {
    padding: 10px 8px !important;
    font-size: 0.98rem !important;
  }

  /* Íconos en horizontal dentro del item social */
  .header-v2__item--social {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
  }
  .header-v2__item--social a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
}

/* ====================================================================== */
/* 5) Slides en mobile: 4:3, sin agrandar, y cover correcto               */
/* ====================================================================== */
@media (max-width: 768px) {
  /* Cualquier slide de imágenes */
  .slide { height: auto !important; }
  .slide img,
  .slide picture img,
  .galeria-carrusel .slide img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
    border-radius: 14px;
  }

  /* Tarjeta de Conocé Rialto (video) */
  .conoce-rialto__card {
    aspect-ratio: 4 / 3 !important;
  }
  .conoce-rialto__card iframe {
    width: 100% !important;
    height: 100% !important;
  }
}

/* ====================================================================== */
/* 5.b) Slides mobile (fuerte): 4:3 y tamaños correctos                   */
/* ====================================================================== */
@media (max-width: 768px) {
  /* Carrusel tipo galería (marquee) */
  .slider-marquee { padding-inline: 10px; }
  .slider-track { gap: 10px; }
  .slider-track img {
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
    flex: 0 0 80% !important; /* mostrar de a 1 aprox */
    max-width: none !important;
    margin: 0 !important;
    border-radius: 12px !important;
  }

  /* Carruseles con .slide (VITALES / GALERIA-CARRUSEL) */
  .galeria-carrusel .slide,
  .vitales .slide { height: auto !important; }
  .galeria-carrusel .slide img,
  .vitales .slide img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
    border-radius: 12px !important;
  }

  /* Video/card de Conocé Rialto */
  .conoce-rialto__card { aspect-ratio: 4 / 3 !important; }
  .conoce-rialto__card iframe { width: 100% !important; height: 100% !important; }
}

/* Respeta "reducir movimiento": pausa marquee en mobile */
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .slider-track { animation-play-state: paused !important; }
}

/* ====================================================================== */
/* 5.c) Slides mobile: limitar tamaño para mejor definición                */
/* ====================================================================== */
@media (max-width: 768px) {
  /* Marquee / galería automática */
  .slider-marquee { padding-inline: 12px; }
  .slider-marquee .slider-track { gap: 12px; }
  .slider-marquee .slider-track img {
    width: clamp(240px, 78vw, 360px) !important;
    height: auto !important;
    flex: 0 0 clamp(240px, 78vw, 360px) !important; /* anula 80% anterior */
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
    border-radius: 12px !important;
  }

  /* Carruseles con .slide (VITALES / GALERIA-CARRUSEL) */
  .galeria-carrusel .slide,
  .vitales .slide {
    max-width: clamp(240px, 92vw, 520px);
    margin-inline: auto;
  }
  .galeria-carrusel .slide img,
  .vitales .slide img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
  }

  /* Conocé Rialto */
  .conoce-rialto__card {
    aspect-ratio: 4 / 3 !important;
    max-width: clamp(240px, 92vw, 520px);
    margin-inline: auto;
  }
  .conoce-rialto__card iframe { width: 100% !important; height: 100% !important; }
}

/* ====================================================================== */
/* 6) Ubicación (mobile): imagen y tarjeta del mismo tamaño, centradas    */
/* ====================================================================== */
@media (max-width: 768px) {
  .proyecto-mapa {
    --ubicacion-w: clamp(260px, 92vw, 520px);
  }

  /* Contenedor: pila vertical y centrado */
  .proyecto-mapa .mapa-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    padding-inline: 12px !important;
  }

  /* Imagen: 4:3, centrada, no full-bleed */
  .proyecto-mapa .mapa-proyecto-img {
    width: var(--ubicacion-w) !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
    border-radius: 16px !important;
    margin: 0 auto !important;
  }

  /* Tarjeta flotante: dejar de ser absoluta y ocupar el mismo ancho */
  .proyecto-mapa .tarjeta-flotante {
    position: static !important;
    width: var(--ubicacion-w) !important;
    margin: 0 auto !important;
    padding: 12px 14px !important;
    border-radius: 14px !important;
    background: rgba(0,0,0,0.75) !important;
    backdrop-filter: saturate(1.05) blur(4px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  }

  /* Compactar contenido de la tarjeta para eliminar "espacio blanco" */
  .proyecto-mapa .tarjeta-flotante .bloque-contador {
    margin: 6px 0 !important;
  }
  .proyecto-mapa .tarjeta-flotante .numero-contador {
    font-size: clamp(22px, 7vw, 30px) !important;
    line-height: 1.1 !important;
  }
  .proyecto-mapa .tarjeta-flotante .descripcion {
    font-size: clamp(12px, 3.6vw, 14px) !important;
    line-height: 1.2 !important;
    opacity: 0.9;
  }

  /* Si las etiquetas fijas interfieren, ocultarlas en mobile */
  
}

/* ====================================================================== */
/* 6.b) Ubicación (mobile): tarjeta compacta + mismo ancho que la imagen  */
/* ====================================================================== */
@media (max-width: 768px) {
  .ubicacion { --ubic-w: clamp(260px, 92vw, 520px); }

  .ubicacion__contenedor {
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
    padding-inline: 12px !important;
  }

  .ubicacion__mapa img {
    width: var(--ubic-w) !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
    border-radius: 16px !important;
  }

  .ubicacion__tarjeta {
    flex: 0 0 auto !important;   /* quita el 440px heredado */
    width: var(--ubic-w) !important;
    margin: 0 auto !important;
    padding: clamp(16px, 4vw, 20px) clamp(14px, 4vw, 18px) !important;
    border-radius: 16px !important;
  }

  .ubicacion__tarjeta h2 { margin-bottom: 10px !important; font-size: clamp(18px, 5vw, 20px) !important; }
  .ubicacion__tarjeta p  { margin-bottom: 12px !important; font-size: clamp(13px, 3.6vw, 15px) !important; line-height: 1.45 !important; }
  .ubicacion__tarjeta .btn-ubicacion,
  .ubicacion__tarjeta .btn-ubicacion a {
    display: inline-block !important;
    min-width: 52%;
    text-align: center;
    padding: 10px 14px !important;
  }
}

/* ====================================================================== */
/* 0.c) Splash (mobile): tamaño y centrado correcto                       */
/* ====================================================================== */
@media (max-width: 768px) {
  #splash-screen {
    padding: env(safe-area-inset-top) 16px env(safe-area-inset-bottom);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #splash-screen img {
    width: clamp(150px, 46vw, 240px) !important;
    max-width: 70vw !important;
    height: auto !important;
    animation-duration: 1.4s !important;
  }
}
@media (max-width: 480px) {
  #splash-screen img {
    width: clamp(140px, 44vw, 210px) !important;
  }
}


/* ====================================================================== */
/* 0.d) Splash (mobile): centrado absoluto vertical + horizontal          */
/* ====================================================================== */
@media (max-width: 768px) {
  #splash-screen {
    position: fixed !important;
    inset: 0 !important;
    display: grid !important;
    place-items: center !important;
    min-height: 100dvh !important;
    height: 100dvh !important; /* fallback */
    padding: calc(env(safe-area-inset-top) + 8px) 16px calc(env(safe-area-inset-bottom) + 8px);
    text-align: center;
  }
  #splash-screen > * { margin: 0 auto !important; transform: none !important; }
  #splash-screen img {
    width: clamp(140px, 46vw, 220px) !important;
    height: auto !important;
  }
}


/* ====================================================================== */
/* 0.e) WhatsApp FAB (mobile): tamaño y posición seguros                   */
/* ====================================================================== */
@media (max-width: 768px) {
  /* Detectar las clases comunes */
  .whatsapp-fab,
  .whatsapp,
  .btn-whatsapp,
  .wa-btn,
  a[href*="wa.me"],
  a[href*="api.whatsapp.com"] {
    position: fixed !important;
    right: clamp(12px, 4vw, 18px) !important;
    bottom: clamp(14px, 5vw, 22px) !important;
    width: clamp(44px, 12vw, 56px) !important;
    height: clamp(44px, 12vw, 56px) !important;
    border-radius: 999px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 60 !important; /* por debajo del menú (que usa >100) y por encima del contenido */
    box-shadow: 0 6px 18px rgba(0,0,0,0.28) !important;
    background: #25D366 !important;
  }
  /* Imágen/SVG interno */
  .whatsapp-fab img,
  .whatsapp-fab svg,
  .whatsapp img,
  .whatsapp svg,
  .btn-whatsapp img,
  .btn-whatsapp svg {
    width: 60% !important;
    height: 60% !important;
  }

  /* No interferir con el footer ni con el menú abierto */
  .header-v2.is-open .whatsapp-fab,
  .header-v2.is-open .whatsapp,
  .header-v2.is-open .btn-whatsapp { 
    z-index: 10 !important; /* queda detrás del panel del menú */
  }
}

/* ====================================================================== */
/* 0.f) Fix overflow horizontal: full-bleed mapa -> layout content width  */
/* ====================================================================== */
@media (max-width: 768px) {
  .proyecto-mapa .mapa-container {
    position: relative !important;
    width: 100% !important;
    left: auto !important;
    right: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: hidden !important;
    box-sizing: border-box;
    padding-inline: 12px;
  }
  .proyecto-mapa .mapa-proyecto-img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
    border-radius: 16px !important;
  }
  html, body { overflow-x: hidden !important; }
}

/* ====================================================================== */
/* 7) Comercial (mobile): botones alineados, 1 por fila, 100% de ancho    */
/* ====================================================================== */
@media (max-width: 768px) {
  .comercial__botones {
    display: grid !important;
    grid-template-columns: 1fr !important; justify-items: center;
    gap: 12px !important;
    width: 100%;
    max-width: clamp(260px, 92vw, 520px);
    margin-inline: auto;
  }
  .comercial__botones .btn {
    
    justify-content: center;
    align-items: center;
    min-height: 44px;
    border-radius: 10px;
  }
  .comercial__botones a.btn,
  .comercial__botones button.btn {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 768px) {
  .comercial__botones .btn.btn--claro,
  .comercial__botones .btn.btn--claro[href*="wa.me"] {
    background-color: #fff !important;
    color: #121212 !important;
    border: none !important;
  }
}

/* 7.b) Comercial (mobile): ambos botones blancos, centrados, ancho por contenido */
@media (max-width: 768px) {
  .comercial__botones { justify-items: center !important; }
  .comercial__botones a.btn.btn--claro,
  .comercial__botones button.btn.btn--claro,
  .comercial__botones a.btn.btn--claro[href*="wa.me"],
  .comercial__botones a.btn.btn--claro[aria-label*="WhatsApp"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    max-width: min(92%, 340px);
    margin-inline: auto !important;
    background: #fff !important;
    color: #121212 !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 12px 20px !important;
    box-shadow: none !important;
  }
}

/* 7.c) Comercial (mobile): centrados y ancho por contenido */
@media (max-width: 768px) {
  .comercial__botones { justify-items: center !important; gap: 12px !important; }
  .comercial__botones a.btn.btn--claro,
  .comercial__botones button.btn.btn--claro { width: auto !important; max-width: min(92%, 340px); }
}


/* 7.e) Comercial (mobile): centrado real para btn--pill */
@media (max-width: 768px) {
  .comercial__botones { justify-content: center !important; gap: 12px !important; }
  .comercial__botones .btn--pill { width: auto !important; max-width: min(92%, 340px); }
}

/* ====================================================================== */
/* 6.c) Ubicación (mobile): imagen y tarjeta centradas con mismo ancho    */
/* ====================================================================== */
@media (max-width: 768px) {
  /* Ancho común y centrado para ambas implementaciones */
  .proyecto-mapa, .ubicacion { --ubic-w: clamp(260px, 92vw, 520px); }

  /* Contenedor en columna y centrado */
  .proyecto-mapa .mapa-container,
  .ubicacion__contenedor {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    padding-inline: 12px !important;
    margin-inline: auto !important;
    width: 100% !important;
    box-sizing: border-box;
  }

  /* Imagen del mapa: mismo ancho y centrada */
  .proyecto-mapa .mapa-proyecto-img,
  .ubicacion__mapa img {
    width: var(--ubic-w) !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 auto !important;
    border-radius: 16px !important;
  }

  /* Tarjeta: no absoluta, mismo ancho, compacta y centrada */
  .proyecto-mapa .tarjeta-flotante,
  .ubicacion__tarjeta {
    position: static !important;
    flex: 0 0 auto !important;
    width: var(--ubic-w) !important;
    margin: 0 auto !important;
    padding: clamp(14px, 4vw, 18px) clamp(14px, 5vw, 20px) !important;
    border-radius: 16px !important;
    background: rgba(0,0,0,0.72) !important;
    backdrop-filter: saturate(1.05) blur(4px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.22);
  }

  /* Compactar tipografías/espaciados de la tarjeta */
  .proyecto-mapa .tarjeta-flotante h2,
  .ubicacion__tarjeta h2 { margin: 0 0 8px !important; }
  .proyecto-mapa .tarjeta-flotante p,
  .ubicacion__tarjeta p { margin: 6px 0 !important; line-height: 1.4 !important; }

  /* Evitar overlays o etiquetas que desplacen la vista en mobile */
  
}

/* ====================================================================== */
/* 6.c.2) Ubicación (mobile) refinado: tarjeta blanca centrada            */
/* ====================================================================== */
@media (max-width: 768px) {
  .ubicacion { --ubic-w: clamp(260px, 92vw, 520px); }

  .ubicacion__contenedor {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    padding-inline: 12px !important;
    margin-inline: auto !important;
    width: 100% !important;
    box-sizing: border-box;
  }

  .ubicacion__mapa img {
    width: var(--ubic-w) !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 auto !important;
    border-radius: 16px !important;
  }

  /* Tarjeta blanca, sin overlay, igual ancho que la imagen y centrada */
  .ubicacion__tarjeta {
    position: static !important;
    flex: 0 0 auto !important;
    width: var(--ubic-w) !important;
    margin: 0 auto !important;
    padding: clamp(14px, 4vw, 18px) clamp(16px, 5vw, 22px) !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    color: #111 !important;
    box-shadow: 0 10px 28px rgba(0,0,0,0.14);
  }
  .ubicacion__tarjeta h2 { text-align: center; margin: 0 0 10px !important; }
  .ubicacion__tarjeta p { margin: 6px 0 !important; line-height: 1.45 !important; }
  .ubicacion__tarjeta .btn { margin-inline: auto !important; }

  /* Proyecto-mapa: solo centrar/tamaño, mantener su estética original */
  .proyecto-mapa { --ubic-w: clamp(260px, 92vw, 520px); }
  .proyecto-mapa .mapa-proyecto-img {
    width: var(--ubic-w) !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 auto !important;
    border-radius: 16px !important;
  }
  .proyecto-mapa .tarjeta-flotante {
    position: static !important;
    width: var(--ubic-w) !important;
    margin: 0 auto !important;
    padding: clamp(12px, 4vw, 18px) clamp(14px, 5vw, 20px) !important;
    border-radius: 16px !important;
    /* mantiene colores translúcidos originales en su CSS */
  }
}

/* ====================================================================== */
/* 6.c.3) Ubicación (mobile): centrar CTA y asegurar igual ancho          */
/* ====================================================================== */
@media (max-width: 768px) {
  /* Igual ancho real (incluye padding) */
  .ubicacion__tarjeta,
  .ubicacion__mapa img {
    box-sizing: border-box !important;
  }

  /* CTA centrado como píldora */
  .ubicacion__tarjeta .btn,
  .ubicacion__tarjeta a.btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin-inline: auto !important;
    width: auto !important;
    max-width: min(92%, 340px);
    text-align: center;
  }

  /* Ajuste fino de tipografías/espaciado para evitar "aire" extra */
  .ubicacion__tarjeta h2 { text-align: center; margin-bottom: 10px !important; }
  .ubicacion__tarjeta p { margin: 6px 0 12px !important; line-height: 1.45 !important; }
  .ubicacion__tarjeta { box-shadow: 0 10px 26px rgba(0,0,0,.14); }
}

/* ====================================================================== */
/* 6.c.4) Ubicación (mobile): gutters simétricos y bloques centrados      */
/* ====================================================================== */
@media (max-width: 768px) {
  /* 1) Gutter simétrico en la sección */
  .ubicacion,
  .proyecto-mapa {
    --ubic-gutter: clamp(16px, 4vw, 20px);
    padding-left: var(--ubic-gutter) !important;
    padding-right: var(--ubic-gutter) !important;
  }

  /* 2) Evitar doble padding en contenedores internos */
  .ubicacion__contenedor,
  .proyecto-mapa .mapa-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-inline: auto !important;
    width: 100% !important;
    max-width: none;
  }

  /* 3) Centrar y dar el MISMO ancho real a imagen y tarjeta */
  .ubicacion__mapa img,
  .ubicacion__tarjeta,
  .proyecto-mapa .mapa-proyecto-img,
  .proyecto-mapa .tarjeta-flotante {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 520px;
    margin-inline: auto !important;
  }

  /* 4) Anular offsets residuales del full-bleed */
  .proyecto-mapa .mapa-container,
  .ubicacion__mapa,
  .ubicacion__tarjeta {
    left: auto !important;
    right: auto !important;
  }
}

/* ====================================================================== */
}

/* ====================================================================== */
/* 8.B) Proyecto-mapa (mobile): overlays dentro del mapa + tap-to-open    */
/* ====================================================================== */
@media (max-width: 768px) {
  /* El contenedor actúa como contexto de posición */
  .proyecto-mapa .mapa-container { position: relative !important; }
  .proyecto-mapa .mapa-stage, .proyecto-mapa .mapa-wrapper { position: relative !important; }

  /* Imagen con proporción estable y bordes suaves */
  .proyecto-mapa .mapa-proyecto-img {
    display: block;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 16px;
  }

  /* Etiquetas: absolutas sobre el mapa, ancladas al centro del pin */
  .proyecto-mapa .etiqueta-fija {
    position: absolute !important;
    transform: translate(calc(-50% + var(--nudge-x, 0px)), calc(-50% + var(--nudge-y, 0px)));
    z-index: 2;
    /* Chip compacto visible por defecto en mobile */
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    background: rgba(255,255,255,.95);
    color: #111;
    border-radius: 999px;
    box-shadow: 0 6px 16px rgba(0,0,0,.12);
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto;
    max-width: 66vw; /* evitar chips larguísimos */
    white-space: nowrap;
  }
  .proyecto-mapa .etiqueta-fija .etiqueta-hover {
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: .1px;
    white-space: nowrap;
  }
  /* Estado abierto (tap) un poquito más destacado */
  .proyecto-mapa .etiqueta-fija.is-open { box-shadow: 0 8px 20px rgba(0,0,0,.18); }

  /* Tarjeta descriptiva grande debajo del mapa (flujo normal) */
  .proyecto-mapa .tarjeta-flotante {
    position: static !important;
    margin-top: 12px;
  }

  /* Seguridad ante desbordes horizontales */
  .proyecto-mapa { overflow-x: hidden; }
}

/* ====================================================================== */
/* 8.B.2) Proyecto-mapa (mobile): overlays DENTRO del mapa (enforced)     */
/* ====================================================================== */
@media (max-width: 768px) {
  /* El contenedor del mapa actúa como contexto de posición y no grid */
  .proyecto-mapa .mapa-container {
    position: relative !important;
    display: block !important;
  }
  .proyecto-mapa .mapa-stage, .proyecto-mapa .mapa-wrapper { position: relative !important; }

  /* Imagen: base */
  .proyecto-mapa .mapa-proyecto-img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 16px;
  }

  /* Etiquetas: absolutas sobre la imagen (usamos top/left existentes) */
  .proyecto-mapa .mapa-container .etiqueta-fija,
  .proyecto-mapa .mapa-stage .etiqueta-fija,
  .proyecto-mapa .mapa-wrapper .etiqueta-fija {
    position: absolute !important;
    transform: translate(calc(-50% + var(--nudge-x, 0px)), calc(-50% + var(--nudge-y, 0px))) !important;
    z-index: 2 !important;
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    border-radius: 999px;
    background: rgba(255,255,255,0.92);
    color: #111;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    opacity: 1 !important;
    visibility: visible !important;
    white-space: nowrap;
    max-width: 60vw;
  }
  .proyecto-mapa .etiqueta-fija .etiqueta-hover {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    font-size: 11px;
    line-height: 1.2;
    letter-spacing: .1px;
    white-space: nowrap;
  }

  /* Tarjeta descriptiva debajo del mapa */
  .proyecto-mapa .tarjeta-flotante { position: static !important; margin-top: 12px; }
}

/* ====================================================================== */
/* 8.B.var) Proyecto-mapa (mobile): posicionamiento por variables --x/--y */
/* ====================================================================== */
@media (max-width: 768px) {
  /* Las etiquetas se posicionan con variables CSS relativas al mapa */
  .proyecto-mapa .mapa-container { position: relative !important; }
  .proyecto-mapa .etiqueta-fija {
    position: absolute !important;
    top:  var(--y, 50%);
    left: var(--x, 50%);
    transform: translate(-50%, -50%) !important;
    z-index: 2;
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    font-size: 11px;
    line-height: 1.2;
    border-radius: 999px;
    background: rgba(255,255,255,0.92);
    color: #111;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    white-space: nowrap;
  }

  /* Valores por defecto (tomados del desktop) — puedes editarlos libremente */
  .proyecto-mapa .etiqueta-comercial  { --x: 44%; --y: 34%; }
  .proyecto-mapa .etiqueta-verde      { --x: 65%; --y: 44%; }
  .proyecto-mapa .etiqueta-bicisenda  { --x: 33%; --y: 53%; }
  .proyecto-mapa .etiqueta-club       { --x: 47%; --y: 55%; }
  .proyecto-mapa .etiqueta-acceso     { --x: 74%; --y: 60%; }
  .proyecto-mapa .etiqueta-deportivos { --x: 60%; --y: 72%; }
  .proyecto-mapa .etiqueta-educativo  { --x: 46%; --y: 86%; }
}