/*
 * ARGENIO
 * Archivo: /css/modulos.css
 * Estilos para los 22 módulos definidos en /json/modulos.json
 *
 * ESTRUCTURA HTML DE CADA MÓDULO
 * <section class="modulo modulo1 azul">
 *   <div class="modulo-inner"> ...contenido... </div>
 * </section>
 * (modulo + modulo1 a modulo22 + un fondo: blanco, gris o azul)
 * Los nombres anteriores (modulohero1, catalogo2, texto, etc.) siguen funcionando igual.
 *
 *  modulo1  (modulohero1)  : .hero-top > (div h2) (div p) ; .hero-bottom > img
 *  modulo2  (modulohero2)  : img
 *  modulo3  (modulohero3)  : .hero-top > h2 p .btn ; .hero-bottom > img
 *  modulo4  (modulohero4)  : .hero-top > img ; .hero-bottom > h2 p .btn
 *  modulo5  (modulohero5)  : .hero-top > h2 p .btn .btn ; .hero-bottom > img
 *  modulo6  (moduloconimagenizquierda) : .modulo-img > .img-box > img ; .text-box > h2 p .btn
 *  modulo7  (moduloconimagenderecha)   : .modulo-img > .text-box > h2 p .btn ; .img-box > img
 *  modulo8  (modulotitulopyb) : h2 p .btn
 *  modulo9 (catalogo2), modulo10 (catalogo3), modulo11 (catalogo4) :
 *      .catalogo-cabecera > h2 p
 *      .catalogo-grid.catalogo-N > article.catalogo-item > img h3 p .btn
 *  modulo12 (catalogosb2), modulo13 (catalogosb3), modulo14 (catalogosb4) :
 *      igual que los catálogos, sin .btn
 *  modulo15 (texto)  : .texto-columnas.col-2 > .texto-columna (h2 p) + .texto-columna (h3 p h3 p)
 *  modulo16 (texto2) : h2 h3 p
 *  modulo17 (texto3) : .texto-cabecera > h2 h3 ; .texto-columnas.col-2 > .texto-columna (p) x2
 *  modulo18 (texto4) : .texto-columnas.col-2 > .texto-columna (h2 p) x2
 *  modulo19 (texto5) : igual que modulo17
 *  modulo20 (texto6) : .texto-columnas.col-3 > .texto-columna (h2 p) x3
 *  modulo21 (aire)   : vacío
 *  modulo22 (linea)  : hr.linea-separadora
 */

/* =========================================
   1. CONFIGURACIÓN GENERAL DE LOS MÓDULOS
   ========================================= */

.modulo {
    --color-blanco: #FFFFFF;
    --color-azul: #032A59;
    --color-gris: #F8F8F8;
    --color-dorado: #C59146;
    --color-dorado-hover: #E4B25F;
    --color-linea: #C59146;

    --color-fondo: var(--color-blanco);
    --color-texto: var(--color-azul);
    --color-boton: var(--color-dorado);
    --color-boton-texto: var(--color-blanco);
    --color-boton-hover: var(--color-dorado-hover);
    --color-boton-hover-texto: var(--color-azul);
     --color-whatsapp: #25D366;

    box-sizing: border-box;
    width: 100%;
    padding: 80px 24px;
    background-color: var(--color-fondo);
    color: var(--color-texto);
    text-align: center;
    font-family: "Montserrat", sans-serif;
}
/* Botón de WhatsApp: independiente de los módulos */

.boton-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    max-width: 100%;
    margin-top: 20px;
    padding: 14px 24px;
    border: 1px solid var(--color-whatsapp);
    border-radius: 4px;
    background-color: var(--color-whatsapp);
    color: var(--color-blanco);
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: background-color 0.2s ease;
}

.boton-whatsapp:hover {
    background-color: var(--color-whatsapp);
    border-color: var(--color-whatsapp);
    color: var(--color-blanco);
}

.boton-whatsapp:focus-visible {
    outline: 3px solid var(--color-dorado-hover);
    outline-offset: 3px;
}
.modulo *,
.modulo *::before,
.modulo *::after {
    box-sizing: border-box;
}

.modulo-inner {
    width: 100%;
    max-width: 1200px;
    margin-right: auto;
    margin-left: auto;
}

.modulo h1,
.modulo h2,
.modulo h3,
.modulo h4 {
    margin-top: 0;
    margin-bottom: 16px;
    color: inherit;
    font-family: "Inter", sans-serif;
    line-height: 1.25;
}

.modulo h1 {
    font-size: clamp(2rem, 4vw, 3.25rem);
}

.modulo h2 {
    font-size: clamp(1.6rem, 3vw, 2.4rem);
}

.modulo h3 {
    font-size: clamp(1.2rem, 2vw, 1.6rem);
}

.modulo p {
    margin-top: 0;
    margin-bottom: 24px;
    color: inherit;
    font-size: 1rem;
    line-height: 1.6;
}

.modulo p:last-child {
    margin-bottom: 0;
}

.modulo a {
    color: inherit;
}

.modulo img {
    display: block;
    max-width: 100%;
    height: auto;
}

.modulo button,
.modulo .btn {
    display: inline-block;
    padding: 12px 28px;
    border: 1px solid var(--color-boton);
    border-radius: 4px;
    background-color: var(--color-boton);
    color: var(--color-boton-texto);
    font-family: "Montserrat", sans-serif;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}

.modulo button:hover,
.modulo .btn:hover {
    border-color: var(--color-boton-hover);
    background-color: var(--color-boton-hover);
    color: var(--color-boton-hover-texto);
}

.modulo button:focus-visible,
.modulo .btn:focus-visible {
    outline: 3px solid var(--color-azul);
    outline-offset: 3px;
}

/* =========================================
   2. VARIANTES DE FONDO
   ========================================= */

/* Fondo blanco */

.modulo.blanco,
.modulo.fondo-blanco,
.modulo--blanco,
.modulo[data-fondo="blanco"] {
    --color-fondo: var(--color-blanco);
    --color-texto: var(--color-azul);

    background-color: var(--color-fondo);
    color: var(--color-texto);
}

/* Fondo gris */

.modulo.gris,
.modulo.fondo-gris,
.modulo--gris,
.modulo[data-fondo="gris"] {
    --color-fondo: var(--color-gris);
    --color-texto: var(--color-azul);

    background-color: var(--color-fondo);
    color: var(--color-texto);
}

/* Fondo azul */

.modulo.azul,
.modulo.fondo-azul,
.modulo--azul,
.modulo[data-fondo="azul"] {
    --color-fondo: var(--color-azul);
    --color-texto: var(--color-blanco);

    background-color: var(--color-fondo);
    color: var(--color-texto);
}

/* Los botones mantienen el color dorado en los tres fondos. */

.modulo.azul button:focus-visible,
.modulo.azul .btn:focus-visible {
    outline-color: var(--color-blanco);
}

/* =========================================
   3. ALINEACIÓN Y CONTENEDORES
   ========================================= */

.modulo .centrado {
    text-align: center;
}

.modulo .centrado > .btn,
.modulo .centrado > button {
    margin-right: 6px;
    margin-left: 6px;
}

.modulo .flex {
    display: flex;
    gap: 32px;
}

.modulo .flex.center {
    justify-content: center;
    text-align: center;
}

.modulo .flex.middle {
    align-items: center;
}

.modulo .col-2 > *,
.modulo .col-3 > *,
.modulo .col-4 > * {
    min-width: 0;
    flex: 1 1 0;
}

.modulo .col-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
}

.modulo .col-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
}

.modulo .col-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
}

/* =========================================
   4. MÓDULOS HERO 1 A 5
   ========================================= */

/* Hero 1: título y párrafo arriba, imagen abajo. */

.modulohero1 .hero-top,
.modulo1 .hero-top {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 32px;
    margin-bottom: 40px;
}

.modulohero1 .hero-top > *,
.modulo1 .hero-top > * {
    min-width: 0;
}

.modulohero1 .hero-bottom img,
.modulo1 .hero-bottom img {
    width: 100%;
    max-height: 1080px;
    object-fit: cover;
}

/* Hero 2: imagen completa. */

.modulohero2,
.modulo2 {
    padding: 0;
}

.modulohero2 .modulo-inner,
.modulo2 .modulo-inner {
    max-width: none;
}

.modulohero2 img,
.modulo2 img {
    width: 100%;
    min-height: 1px;
    object-fit: cover;
}

/* Hero 3: texto centrado arriba, imagen abajo. */

.modulohero3 .hero-top,
.modulo3 .hero-top {
    margin-bottom: 40px;
    text-align: center;
}

.modulohero3 .hero-top > *,
.modulo3 .hero-top > * {
    max-width: 900px;
    margin-right: auto;
    margin-left: auto;
}

.modulohero3 .hero-bottom img,
.modulo3 .hero-bottom img {
    width: 100%;
    max-height: 1080px;
    object-fit: cover;
}

/* Hero 4: imagen arriba, texto centrado abajo. */

.modulohero4 .hero-top,
.modulo4 .hero-top {
    margin-bottom: 40px;
}

.modulohero4 .hero-top img,
.modulo4 .hero-top img {
    width: 100%;
    max-height: 1080px;
    object-fit: cover;
}

.modulohero4 .hero-bottom,
.modulo4 .hero-bottom {
    text-align: center;
}

.modulohero4 .hero-bottom > *,
.modulo4 .hero-bottom > * {
    max-width: 900px;
    margin-right: auto;
    margin-left: auto;
}

/* Hero 5: texto y dos botones arriba, imagen abajo. */

.modulohero5 .hero-top,
.modulo5 .hero-top {
    margin-bottom: 40px;
    text-align: center;
}

.modulohero5 .hero-top > *,
.modulo5 .hero-top > * {
    max-width: 900px;
    margin-right: auto;
    margin-left: auto;
}

.modulohero5 .hero-top .btn,
.modulo5 .hero-top .btn,
.modulohero5 .hero-top button,
.modulo5 .hero-top button {
    margin: 6px;
}

.modulohero5 .hero-bottom img,
.modulo5 .hero-bottom img {
    width: 100%;
    max-height: 900px;
    object-fit: cover;
}

/* =========================================
   5. MÓDULOS CON IMAGEN LATERAL
   ========================================= */

.modulo-img {
    display: flex;
    align-items: center;
    gap: 32px;
}

.modulo-img .img-box,
.modulo-img .text-box {
    min-width: 0;
    flex: 1 1 0;
}

.modulo-img .img-box img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.modulo-img .text-box {
    text-align: center;
}

/* Imagen a la izquierda. */

.moduloconimagenizquierda .modulo-img,
.modulo6 .modulo-img {
    flex-direction: row;
}

/* Imagen a la derecha. */

.moduloconimagenderecha .modulo-img,
.modulo7 .modulo-img {
    flex-direction: row;
}

/* =========================================
   6. MÓDULO TÍTULO, PÁRRAFO Y BOTÓN
   ========================================= */

.modulotitulopyb,
.modulo8 {
    text-align: center;
}

.modulotitulopyb .modulo-inner,
.modulo8 .modulo-inner {
    max-width: 900px;
}

.modulotitulopyb .btn,
.modulo8 .btn,
.modulotitulopyb button,
.modulo8 button {
    margin-top: 8px;
}

/* =========================================
   7. CATÁLOGOS CON BOTONES
   MÓDULOS 9, 10 Y 11
   ========================================= */

.catalogo,
.catalogo2,
.modulo9,
.catalogo3,
.modulo10,
.catalogo4,
.modulo11,
.catalogosb2,
.modulo12,
.catalogosb3,
.modulo13,
.catalogosb4,
.modulo14 {
    text-align: center;
}

.catalogo-cabecera {
    max-width: 900px;
    margin: 0 auto 40px;
}

.catalogo-grid {
    display: grid;
    gap: 32px;
    align-items: start;
}

.catalogo-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.catalogo-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.catalogo-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.catalogo-item {
    min-width: 0;
    text-align: center;
}

.catalogo-item img {
    width: 100%;
    margin-bottom: 16px;
    object-fit: cover;
}

.catalogo-item h3 {
    margin-bottom: 12px;
}

.catalogo-item p {
    margin-bottom: 20px;
}

.catalogo-item .btn,
.catalogo-item button {
    margin-top: 4px;
}

/* =========================================
   8. CATÁLOGOS SIN BOTONES
   MÓDULOS 12, 13 Y 14
   ========================================= */

.catalogosb2 .catalogo-grid,
.modulo12 .catalogo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.catalogosb3 .catalogo-grid,
.modulo13 .catalogo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.catalogosb4 .catalogo-grid,
.modulo14 .catalogo-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.catalogosb2 .catalogo-item,
.modulo12 .catalogo-item,
.catalogosb3 .catalogo-item,
.modulo13 .catalogo-item,
.catalogosb4 .catalogo-item,
.modulo14 .catalogo-item {
    min-width: 0;
    text-align: center;
}

/* =========================================
   9. MÓDULO TEXTO
   MÓDULO 15: DOS COLUMNAS DESIGUALES
   ========================================= */

.texto .texto-columnas,
.modulo15 .texto-columnas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 32px;
}

.texto .texto-columnas > *,
.modulo15 .texto-columnas > * {
    min-width: 0;
}

/* =========================================
   10. MÓDULO TEXTO2
   MÓDULO 16: CONTENIDO CENTRADO
   ========================================= */

.texto2,
.modulo16 {
    text-align: center;
}

.texto2 .modulo-inner,
.modulo16 .modulo-inner {
    max-width: 900px;
}

.texto2 h3,
.modulo16 h3 {
    margin-bottom: 16px;
}

/* =========================================
   11. MÓDULO TEXTO3
   MÓDULO 17: CABECERA Y DOS COLUMNAS
   ========================================= */

.texto3 .texto-cabecera,
.modulo17 .texto-cabecera {
    margin-bottom: 32px;
}

.texto3 .texto-columnas,
.modulo17 .texto-columnas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
}

.texto3 .texto-columnas > *,
.modulo17 .texto-columnas > * {
    min-width: 0;
}

/* =========================================
   12. MÓDULO TEXTO4
   MÓDULO 18: DOS COLUMNAS
   ========================================= */

.texto4 .texto-columnas,
.modulo18 .texto-columnas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
}

.texto4 .texto-columnas > *,
.modulo18 .texto-columnas > * {
    min-width: 0;
}

/* =========================================
   13. MÓDULO TEXTO5
   MÓDULO 19: CABECERA Y DOS COLUMNAS
   ========================================= */

.texto5 .texto-cabecera,
.modulo19 .texto-cabecera {
    margin-bottom: 32px;
}

.texto5 .texto-columnas,
.modulo19 .texto-columnas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
}

.texto5 .texto-columnas > *,
.modulo19 .texto-columnas > * {
    min-width: 0;
}

/* =========================================
   14. MÓDULO TEXTO6
   MÓDULO 20: TRES COLUMNAS
   ========================================= */

.texto6 .texto-columnas,
.modulo20 .texto-columnas {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
}

.texto6 .texto-columnas > *,
.modulo20 .texto-columnas > * {
    min-width: 0;
}

/* =========================================
   15. MÓDULO AIRE
   MÓDULO 21
   ========================================= */

.modulo.aire,
.modulo.modulo21 {
    min-height: 50px;
    padding-top: 25px;
    padding-bottom: 25px;
}

.modulo.aire .modulo-inner,
.modulo.modulo21 .modulo-inner {
    min-height: 0;
}

/* =========================================
   16. MÓDULO LÍNEA
   MÓDULO 22
   ========================================= */

.modulo.linea,
.modulo.modulo22 {
    padding-top: 25px;
    padding-bottom: 25px;
}

.modulo.linea .linea-separadora,
.modulo.modulo22 .linea-separadora {
    display: block;
    width: 80%;
    height: 0;
    margin: 0 auto;
    border: 0;
    border-top: 2px solid var(--color-linea);
}

/* =========================================
   MÓDULO 24: FORMULARIO
   Archivo: /css/modulos.css
   ========================================= */

.modulo24 .formulario {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    text-align: left;
}

.modulo24 .formulario-grupo {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    margin-bottom: 24px;
}

.modulo24 .formulario label {
    display: block;
    color: inherit;
    font-family: "Montserrat", sans-serif;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
}

.modulo24 .formulario input,
.modulo24 .formulario select,
.modulo24 .formulario textarea {
    display: block;
    width: 100%;
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid var(--color-dorado);
    border-radius: 4px;
    background-color: var(--color-blanco);
    color: var(--color-azul);
    font-family: "Montserrat", sans-serif;
    font-size: 1rem;
    line-height: 1.5;
}

.modulo24 .formulario textarea {
    min-height: 150px;
    resize: vertical;
}

.modulo24 .formulario input::placeholder,
.modulo24 .formulario textarea::placeholder {
    color: var(--color-azul);
    opacity: 0.7;
}

.modulo24 .formulario input:focus-visible,
.modulo24 .formulario select:focus-visible,
.modulo24 .formulario textarea:focus-visible {
    outline: 2px solid var(--color-dorado-hover);
    outline-offset: 2px;
}

.modulo24 .formulario input[type="checkbox"],
.modulo24 .formulario input[type="radio"] {
    width: 20px;
    min-width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--color-dorado);
}

.modulo24 .formulario-opcion {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.modulo24 .formulario-opcion label {
    font-weight: 400;
    cursor: pointer;
}

.modulo24 .formulario .formulario-boton {
    display: inline-block;
    width: auto;
    max-width: 100%;
    padding: 12px 28px;
    border: 1px solid var(--color-boton);
    border-radius: 4px;
    background-color: var(--color-boton);
    color: var(--color-boton-texto);
    font-family: "Montserrat", sans-serif;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    cursor: pointer;
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}

.modulo24 .formulario .formulario-boton:hover {
    border-color: var(--color-boton-hover);
    background-color: var(--color-boton-hover);
    color: var(--color-boton-hover-texto);
}

.modulo24 .formulario .formulario-boton:focus-visible {
    outline: 3px solid var(--color-dorado-hover);
    outline-offset: 3px;
}

/* Fondo azul: campos blancos y texto legible. */

.modulo24.azul .formulario label {
    color: var(--color-blanco);
}

/* Responsive: campos y botón adaptados al celular. */

@media (max-width: 600px) {
    .modulo24 .formulario {
        max-width: 100%;
    }

    .modulo24 .formulario-grupo {
        margin-bottom: 20px;
    }

    .modulo24 .formulario .formulario-boton {
        width: 100%;
    }
}

/* Accesibilidad: respeta la preferencia de movimiento reducido. */

@media (prefers-reduced-motion: reduce) {
    .modulo24 .formulario .formulario-boton {
        transition: none;
    }
}

/* =========================================
   MÓDULO 23: CARRUSEL DE FOTOS
   Archivo: /css/modulos.css
   ========================================= */

.modulo23 .carrusel-fotos {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Foto principal */

.modulo23 .carrusel-fotos-principal {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.modulo23 .carrusel-fotos-principal img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    object-position: center;
}

/* Tira horizontal de miniaturas */

.modulo23 .carrusel-fotos-miniaturas {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 2px 12px;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

/* Cada miniatura es seleccionable */

.modulo23 .carrusel-fotos-miniatura {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 110px;
    padding: 4px;
    border: 2px solid var(--color-dorado);
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    overflow: hidden;
}

.modulo23 .carrusel-fotos-miniatura img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.modulo23 .carrusel-fotos-miniatura:hover {
    border-color: var(--color-dorado-hover);
}

.modulo23 .carrusel-fotos-miniatura[aria-pressed="true"] {
    border-color: var(--color-dorado-hover);
    border-width: 3px;
}

.modulo23 .carrusel-fotos-miniatura:focus-visible {
    outline: 2px solid var(--color-dorado-hover);
    outline-offset: 3px;
}

/* Adaptación a pantallas pequeñas */

@media (max-width: 600px) {
    .modulo23 .carrusel-fotos {
        gap: 14px;
    }

    .modulo23 .carrusel-fotos-principal img {
        max-height: 65vh;
    }

    .modulo23 .carrusel-fotos-miniaturas {
        gap: 8px;
    }

    .modulo23 .carrusel-fotos-miniatura {
        width: 120px;
        height: 90px;
    }
}

/* Respeto por la preferencia de movimiento reducido */

@media (prefers-reduced-motion: reduce) {
    .modulo23 .carrusel-fotos-miniaturas {
        scroll-behavior: auto;
    }
}
/* ==================================================
   ICONOS DE TIPO DE PROPIEDAD
================================================== */

.modulo6 .modulo-img .img-box .icono-tipo-propiedad {
    width: 50px;
    height: 50px;
    object-fit: contain;
    display: block;
    margin: 0 auto 12px;
}

.modulo6 .modulo-img .text-box .tipo-propiedad-detalle {
    display: flex;
    align-items: center;
    gap: 12px;
}

.modulo6 .modulo-img .text-box .tipo-propiedad-detalle img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    flex-shrink: 0;
}


/* ==================================================
   ICONOS DE CATÁLOGOS
================================================== */

.modulo12 .catalogo-item img,
.modulo13 .catalogo-item img,
.modulo14 .catalogo-item img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    display: block;
    margin: 0 auto 12px;
}


/* ==================================================
   CATÁLOGO DE 2 CARACTERÍSTICAS
================================================== */

.modulo12 .catalogo-grid.catalogo-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.modulo12 .catalogo-grid.catalogo-2 .catalogo-item {
    text-align: center;
}


/* ==================================================
   CATÁLOGO DE 3 CARACTERÍSTICAS
================================================== */

.modulo13 .catalogo-grid.catalogo-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.modulo13 .catalogo-grid.catalogo-3 .catalogo-item {
    text-align: center;
}


/* ==================================================
   CATÁLOGO DE 4 CARACTERÍSTICAS
================================================== */

.modulo14 .catalogo-grid.catalogo-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.modulo14 .catalogo-grid.catalogo-4 .catalogo-item {
    text-align: center;
}


/* ==================================================
   ADAPTACIÓN A PANTALLAS MEDIANAS
================================================== */

@media (max-width: 768px) {
    .modulo14 .catalogo-grid.catalogo-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* ==================================================
   ADAPTACIÓN A CELULARES
================================================== */

@media (max-width: 480px) {
    .modulo12 .catalogo-grid.catalogo-2,
    .modulo13 .catalogo-grid.catalogo-3,
    .modulo14 .catalogo-grid.catalogo-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
}

/* =========================================
   MÓDULO 6-A4: FICHA DE PROPIEDAD
   Imagen izquierda + información derecha
   Archivo: /css/modulos.css
   ========================================= */

.modulo6-a4 .modulo-inner {
    max-width: 1400px;
}

.modulo6-a4 .modulo-img {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 40px;
}

/* Columna izquierda: fotografía principal */

.modulo6-a4 .img-box {
    min-width: 0;
    width: 100%;
}

.modulo6-a4 .img-box img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 800px;
    aspect-ratio: auto;
    object-fit: contain;
    object-position: center;
}

/* Columna derecha: información de la propiedad */

.modulo6-a4 .text-box {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    width: 100%;
    text-align: left;
}

/* Icono de tipo de propiedad + operación */

.modulo6-a4 .tipo-propiedad-detalle {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    color: var(--color-azul);
    font-weight: 600;
}

.modulo6-a4 .tipo-propiedad-detalle img {
    display: block;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    object-fit: contain;
}

/* Título SEO: dirección, ciudad y operación */

.modulo6-a4 .titulo-propiedad {
    margin: 0 0 24px;
    color: var(--color-azul);
    font-weight: 700;
    text-align: left;
}

/* Precio */

.modulo6-a4 .precio-propiedad {
    align-self: center;
    max-width: 100%;
    margin: 0 auto 28px;
    padding: 14px 32px;
    border: 1px solid var(--color-dorado);
    border-radius: 4px;
    background-color: var(--color-dorado);
    color: var(--color-blanco);
    font-size: clamp(1.2rem, 2vw, 1.8rem);
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
}

/* Título descriptivo */

.modulo6-a4 .titulo-contenido {
    margin-bottom: 16px;
    color: var(--color-azul);
    text-align: left;
}

/* Descripción y contenido */

.modulo6-a4 .descripcion-propiedad,
.modulo6-a4 .contenido-propiedad {
    color: var(--color-azul);
    text-align: left;
    overflow-wrap: anywhere;
}

.modulo6-a4 .descripcion-propiedad {
    margin-bottom: 20px;
}

/* Botón de WhatsApp */

.modulo6-a4 .boton-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    gap: 10px;
    max-width: 100%;
    margin-top: 20px;
    padding: 14px 24px;
    border: 1px solid var(--color-whatsapp, #25D366);
    border-radius: 4px;
    background-color: var(--color-whatsapp, #25D366);
    color: var(--color-blanco);
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: background-color 0.2s ease;
}

.modulo6-a4 .boton-whatsapp:hover {
    background-color: var(--color-azul);
    border-color: var(--color-azul);
    color: var(--color-blanco);
}

.modulo6-a4 .boton-whatsapp:focus-visible {
    outline: 3px solid var(--color-dorado-hover);
    outline-offset: 3px;
}

/* Tablet */

@media (max-width: 992px) {
    .modulo6-a4 .modulo-img {
        gap: 24px;
    }

    .modulo6-a4 .img-box img {
        max-height: 650px;
    }
}

/* Celular */

@media (max-width: 600px) {
    .modulo6-a4 .modulo-img {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .modulo6-a4 .img-box img {
        max-height: 65vh;
    }

    .modulo6-a4 .titulo-propiedad {
        font-size: clamp(1.6rem, 7vw, 2.2rem);
    }

    .modulo6-a4 .precio-propiedad {
        align-self: stretch;
        width: 100%;
        margin-bottom: 24px;
    }

    .modulo6-a4 .boton-whatsapp {
        align-self: stretch;
        width: 100%;
    }
}

/* Accesibilidad */

@media (prefers-reduced-motion: reduce) {
    .modulo6-a4 .boton-whatsapp {
        transition: none;
    }
}

/* =========================================
   17. RESPONSIVE: TABLET
   ========================================= */

@media (max-width: 992px) {
    .modulo {
        padding: 64px 24px;
    }

    .modulohero1 .hero-top,
    .modulo1 .hero-top {
        gap: 24px;
    }

    .catalogo-3,
    .catalogo-4,
    .catalogosb3 .catalogo-grid,
    .modulo13 .catalogo-grid,
    .catalogosb4 .catalogo-grid,
    .modulo14 .catalogo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .modulo .col-3,
    .modulo .col-4,
    .texto6 .texto-columnas,
    .modulo20 .texto-columnas {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .modulohero2,
    .modulo2 {
        padding: 0;
    }
}
/* ========================================
   CATÁLOGOS DE ICONOS
   ======================================== */

.catalogo-iconos1,
.catalogo-iconos2,
.catalogo-iconos3,
.catalogo-iconos4 {
    display: grid;
    width: 100%;
    gap: 24px;
}

.catalogo-iconos1 {
    grid-template-columns: 1fr;
}

.catalogo-iconos2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.catalogo-iconos3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.catalogo-iconos4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* ELEMENTO DEL CATÁLOGO */

.catalogo-icono {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    min-width: 0;
}

.catalogo-icono img {
    display: block;
    width: 40px;
    height: 40px;
    object-fit: contain;
    flex-shrink: 0;
}

.catalogo-icono h3 {
    margin: 0;
}

.catalogo-icono p {
    margin: 0;
}

/* ADAPTACIÓN A PANTALLAS PEQUEÑAS */

@media (max-width: 600px) {
    .catalogo-iconos3,
    .catalogo-iconos4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* =========================================
   18. RESPONSIVE: CELULARES
   ========================================= */

@media (max-width: 600px) {
    .modulo {
        padding: 48px 16px;
    }

    .modulohero1 .hero-top,
    .modulo1 .hero-top,
    .modulo .col-2,
    .modulo .col-3,
    .modulo .col-4,
    .catalogo-2,
    .catalogo-3,
    .catalogo-4,
    .catalogosb2 .catalogo-grid,
    .modulo12 .catalogo-grid,
    .catalogosb3 .catalogo-grid,
    .modulo13 .catalogo-grid,
    .catalogosb4 .catalogo-grid,
    .modulo14 .catalogo-grid,
    .texto .texto-columnas,
    .modulo15 .texto-columnas,
    .texto3 .texto-columnas,
    .modulo17 .texto-columnas,
    .texto4 .texto-columnas,
    .modulo18 .texto-columnas,
    .texto5 .texto-columnas,
    .modulo19 .texto-columnas,
    .texto6 .texto-columnas,
    .modulo20 .texto-columnas {
        grid-template-columns: minmax(0, 1fr);
    }

    .modulo-img {
        flex-direction: column;
        gap: 24px;
    }

    .moduloconimagenizquierda .modulo-img,
    .modulo6 .modulo-img,
    .moduloconimagenderecha .modulo-img,
    .modulo7 .modulo-img {
        flex-direction: column;
    }

    .modulo-img .img-box,
    .modulo-img .text-box {
        width: 100%;
        flex: 1 1 auto;
    }

    .modulohero1 .hero-top,
    .modulo1 .hero-top {
        gap: 16px;
        margin-bottom: 24px;
    }

    .modulohero3 .hero-top,
    .modulo3 .hero-top,
    .modulohero4 .hero-top,
    .modulo4 .hero-top,
    .modulohero5 .hero-top,
    .modulo5 .hero-top {
        margin-bottom: 24px;
    }

    .modulohero2,
    .modulo2 {
        padding: 0;
    }

    .modulohero2 img,
    .modulo2 img,
    .modulohero3 .hero-bottom img,
    .modulo3 .hero-bottom img,
    .modulohero4 .hero-top img,
    .modulo4 .hero-top img,
    .modulohero5 .hero-bottom img,
    .modulo5 .hero-bottom img {
        max-height: none;
    }

    .catalogo-cabecera,
    .texto3 .texto-cabecera,
    .modulo17 .texto-cabecera,
    .texto5 .texto-cabecera,
    .modulo19 .texto-cabecera {
        margin-bottom: 24px;
    }

    .modulo.aire,
    .modulo.modulo21 {
        min-height: 32px;
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .modulo.linea,
    .modulo.modulo22 {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .modulo.linea .linea-separadora,
    .modulo.modulo22 .linea-separadora {
        width: 80%;
    }
}

/* =========================================
   19. ACCESIBILIDAD: MOVIMIENTO REDUCIDO
   ========================================= */

@media (prefers-reduced-motion: reduce) {
    .modulo button,
    .modulo .btn {
        transition: none;
    }
}