/* ===========================================================================
   COMPLEMENTOS
   ---------------------------------------------------------------------------
   Estilos de las partes que se agregaron después del diseño original:
   el recorrido 360°, los avisos del formulario y el formulario del CRM.

   Se mantiene aparte para no tocar laisla.css, que se genera desde
   laisla.scss. Lo que se escriba acá no se pierde al recompilar el SCSS.
   ========================================================================= */


/* --- Enlace para saltar al contenido (lectores de pantalla y teclado) --- */
.salto-contenido {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 10000;
    padding: 12px 20px;
    background: #fff;
    color: #111;
    text-decoration: none;
}

.salto-contenido:focus {
    left: 10px;
    top: 10px;
}


/* --- Recorrido 360° ----------------------------------------------------- */
#recorrido-360 {
    padding: 60px 0;
}

.tour360 {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 320px;
    overflow: hidden;
    border-radius: 6px;
    background-color: #1c2b23;
    background-image: url('../images/foto-proyecto.webp');
    background-size: cover;
    background-position: center;
}

.tour360-abrir {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
    justify-content: center;
    width: 100%;
    border: 0;
    padding: 0;
    cursor: pointer;
    background: rgba(12, 28, 20, 0.45);
    color: #fff;
    font-size: 1.05rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: background-color 0.3s ease;
}

.tour360-abrir:hover,
.tour360-abrir:focus-visible {
    background: rgba(12, 28, 20, 0.25);
}

.tour360-icono {
    width: 70px;
    height: 70px;
}

.tour360-cargado {
    background-image: none;
}

.tour360-marco {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* El enlace para abrir el recorrido en otra pestaña usa el mismo botón que el
   resto del sitio. Lo único propio es dejarlo partir en dos líneas en
   pantallas chicas: el texto es largo y los botones de estos sitios están
   definidos en una sola línea. */
.tour360-boton {
    white-space: normal;
}

@media (max-width: 575px) {
    .tour360-boton {
        max-width: 100%;
        line-height: 1.3;
    }
}

@media (max-width: 575px) {
    .tour360 {
        aspect-ratio: 4 / 3;
    }

    .tour360-abrir {
        font-size: 0.9rem;
    }

    .tour360-icono {
        width: 54px;
        height: 54px;
    }
}


/* --- Avisos del formulario propio -------------------------------------- */
.form-aviso {
    margin-bottom: 1rem;
    padding: 12px 16px;
    border-radius: 4px;
    font-size: 0.95rem;
    line-height: 1.4;
}

.form-aviso-error {
    border: 1px solid #c0392b;
    background: #fdecea;
    color: #8e2b20;
}


/* --- Formulario que viene del CRM -------------------------------------- */
/* Pipedrive trae sus propios estilos; acá solo se le da el ancho y el aire
   que necesita para no quedar pegado al borde de la sección.              */
.formulario-crm {
    position: relative;
    z-index: 2;
    width: 100%;
    min-height: 320px;
}

.formulario-crm iframe {
    width: 100% !important;
    border: 0;
}


/* --- Mapa interactivo de lotes (si el sitio lo usa) -------------------- */
.mapa-interactivo iframe {
    display: block;
    width: 100%;
    min-height: 500px;
    border: 0;
    border-radius: 6px;
}


/* --- Páginas de mensaje: gracias y 404 --------------------------------- */
.pagina-mensaje {
    min-height: 100vh;
    padding: 60px 0;
    text-align: center;
}

.pagina-mensaje .logo-mensaje {
    width: 260px;
    max-width: 70%;
    height: auto;
    margin: 0 auto 2.5rem;
}

.pagina-mensaje p {
    margin: 0 auto 2rem;
    max-width: 38rem;
}

.acciones-mensaje {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.acciones-mensaje .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


/* ===========================================================================
   AJUSTES POR CAMBIO DE ETIQUETAS
   ---------------------------------------------------------------------------
   Para que Google y los lectores de pantalla entiendan bien la página, los
   títulos pasaron a usar las etiquetas correctas (h1 para el título principal,
   h2 para cada sección). El diseño NO cambia: estas reglas hacen que las
   etiquetas nuevas se vean exactamente igual que antes.
   ========================================================================= */

/* El título principal del hero era un h2 y ahora es el h1 de la página. */
.banner-promo h1 {
    margin: 6px 0 0 0;
    padding: 0;
    font-size: 48px;
    color: #fff;
    text-align: center;
}

/* La segunda línea de la frase de "Somos parte" era un h3 y ahora es un
   párrafo, porque es la continuación de la misma frase, no un título nuevo. */
section#somosparte p.titulo.script {
    margin: 0;
    padding: 0;
}

@media (max-width: 991px) {
    .banner-promo h1 {
        font-size: 34px;
    }
}


/* ===========================================================================
   RED DE SEGURIDAD DE LAS ANIMACIONES
   ---------------------------------------------------------------------------
   Los bloques con animación de aparición arrancan invisibles y el JavaScript
   los muestra cuando el visitante llega a ellos. Si el JavaScript no corre
   (bloqueado, con error, o una conexión que lo corta), sin esto el contenido
   quedaría invisible para siempre.

   La cabecera de la página marca el documento con la clase "js" apenas
   comprueba que hay JavaScript. Si esa marca no está, se muestra todo.
   ========================================================================= */

html:not(.js) [class*="fade-in"] {
    opacity: 1 !important;
    transform: none !important;
}


/* ===========================================================================
   MENOS MOVIMIENTO PARA QUIEN LO PIDE
   ---------------------------------------------------------------------------
   Hay personas que configuran el sistema para reducir las animaciones, porque
   les provocan mareo o malestar. El navegador avisa y acá se respeta.
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    [class*="fade-in"] {
        opacity: 1 !important;
        transform: none !important;
    }
}


/* ===========================================================================
   FOCO VISIBLE AL NAVEGAR CON TECLADO
   ---------------------------------------------------------------------------
   Para que quien navega con la tecla Tab vea siempre dónde está parado.
   ========================================================================= */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
.btn:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 2px;
}