.contenedor-imagen {
    position: relative;
}


/* ESTADO SOBRE LA IMAGEN */

.estado-obra {
    position: absolute;

    top: 15px;
    left: 15px;

    z-index: 20;

    padding: 6px 14px;

    border-radius: 20px;

    font-family: Arial, sans-serif;

    font-size: 11px;

    font-weight: bold;

    letter-spacing: 1px;

    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.20);
}


/* DISPONIBLE */

.estado-obra.disponible {

    background: #d9f5df;

    color: #16803a;

    border: 1px solid #8ed6a0;
}


/* VENDIDA */

.estado-obra.vendida {

    background: #f8d7da;

    color: #b4232c;

    border: 1px solid #e59aa0;
}


/* PANEL INFERIOR */

.informacion {

    padding: 15px 15px 12px;

    text-align: center;
}


/* TITULO */

.informacion h2 {

    margin: 0;

    font-size: 23px;
}


/* PRECIO */

.informacion .precio {

    margin: 10px 0 0;
}


.enlace-obra {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.enlace-obra .imagen-obra {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.enlace-obra .overlay-obra {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(38, 59, 91, 0.65);

    opacity: 0;
    transition: opacity 0.3s ease;
}

.enlace-obra:hover .overlay-obra {
    opacity: 1;
}

.enlace-obra .overlay-obra span {
    color: white;
    border: 1px solid white;
    padding: 14px 25px;

    font-family: Georgia, serif;
    font-size: 13px;
    letter-spacing: 3px;
}
        /* =====================================================
           PALETA ANDRÉS CHÁVEZ
        ===================================================== */

        :root {

            --azul: #263B5B;

            --lavanda: #E8E1EC;

            --superficie: #F4F1F7;

            --magenta: #E15B9B;

            --texto: #263858;

            --blanco: #ffffff;

        }


        /* =====================================================
           GENERAL
        ===================================================== */

        * {

            margin: 0;
            padding: 0;

            box-sizing: border-box;

        }


        html {

            scroll-behavior: smooth;

        }


        body {

            margin: 0;

            font-family:
                Georgia,
                "Times New Roman",
                serif;

            background: var(--lavanda);

            color: var(--texto);

        }


        /* =====================================================
           MENÚ
        ===================================================== */

        .navbar {

            width: 100%;

            height: 86px;

            background: var(--azul);

            display: flex;

            align-items: center;

            padding: 0 6%;

            gap: 35px;

            position: sticky;

            top: 0;

            z-index: 1000;

        }


        /* LOGO */

        .logo {

            width: 220px;

            flex-shrink: 0;

        }


        .logo img {

            width: 100%;

            display: block;

        }


        /* MENÚ */

        .menu {

            flex: 1;

            display: flex;

            justify-content: center;

            align-items: center;

            gap: 35px;

        }


        .menu a {

            position: relative;

            color: white;

            text-decoration: none;

            font-size: 14px;

            letter-spacing: .3px;

            padding: 32px 0 27px;

            white-space: nowrap;

            transition: .3s;

        }


        .menu a:hover {

            color: #f0a6c9;

        }


        /* PÁGINA ACTIVA */

        .menu a.activo {

            color: white;

        }


        .menu a.activo::after {

            content: "";

            position: absolute;

            left: 0;

            right: 0;

            bottom: 14px;

            height: 2px;

            background: var(--magenta);

        }


        /* REDES */

        .redes {

            display: flex;

            gap: 20px;

        }


        .redes a {

            color: white;

            font-size: 22px;

            text-decoration: none;

            transition: .3s;

        }


        .redes a:hover {

            color: var(--magenta);

        }


        /* =====================================================
           CABECERA DE OBRAS
        ===================================================== */

        .encabezado-obras {

            text-align: center;

            padding: 75px 20px 50px;

            background: var(--lavanda);

        }


        .encabezado-obras .pequeno {

            font-size: 14px;

            letter-spacing: 5px;

            margin-bottom: 25px;

            color: var(--texto);

        }


        .encabezado-obras h1 {

            font-size: 50px;

            font-weight: normal;

            margin-bottom: 20px;

            color: var(--texto);

        }


        .linea-titulo {

            width: 65px;

            height: 2px;

            background: var(--magenta);

            margin: 0 auto 25px;

        }


        .encabezado-obras p {

            font-size: 17px;

            color: #555c6d;

            max-width: 600px;

            margin: auto;

            line-height: 1.6;

        }


        /* =====================================================
           CONTENEDOR
        ===================================================== */

        .contenedor-obras {

            max-width: 1350px;

            margin: auto;

            padding: 20px 5% 90px;

        }


        /* =====================================================
           GRID
        ===================================================== */

        .grid-obras {

            display: grid;

            grid-template-columns:
                repeat(3, 1fr);

            gap: 35px;

        }


        /* =====================================================
           TARJETA
        ===================================================== */

        .tarjeta {

            background: var(--superficie);

            overflow: hidden;

            position: relative;

            transition:
                transform .4s ease,
                box-shadow .4s ease;

            border: 1px solid rgba(38,59,91,.08);

        }


        .tarjeta:hover {

            transform: translateY(-8px);

            box-shadow:
                0 18px 40px
                rgba(38,59,91,.18);

        }


        /* =====================================================
           IMAGEN
        ===================================================== */

        .contenedor-imagen {

            position: relative;

            width: 100%;

            height: 400px;

            overflow: hidden;

        }


        .imagen-obra {

            width: 100%;

            height: 100%;

            object-fit: cover;

            display: block;

            transition:
                transform .6s ease;

        }


        .tarjeta:hover .imagen-obra {

            transform: scale(1.06);

        }


        /* =====================================================
           CAPA SOBRE IMAGEN
        ===================================================== */

        .overlay-obra {

            position: absolute;

            inset: 0;

            background:
                rgba(38,59,91,.70);

            display: flex;

            align-items: center;

            justify-content: center;

            opacity: 0;

            transition: .4s;

        }


        .tarjeta:hover .overlay-obra {

            opacity: 1;

        }


        .overlay-obra span {

            border: 1px solid white;

            padding: 13px 28px;

            color: white;

            font-size: 12px;

            letter-spacing: 3px;

        }


        /* =====================================================
           INFORMACIÓN
        ===================================================== */

        .informacion {

            padding: 25px 25px 30px;

            text-align: center;

            background: var(--superficie);

        }


        .informacion h2 {

            color: var(--texto);

            font-size: 23px;

            font-weight: normal;

            margin-bottom: 12px;

        }


        /* LÍNEA DECORATIVA */

        .linea-obra {

            width: 40px;

            height: 2px;

            background: var(--magenta);

            margin: 0 auto 15px;

        }


        /* PRECIO */

        .precio {

            color: var(--texto);

            font-size: 19px;

            margin-bottom: 20px;

        }


        /* =====================================================
           BOTÓN VER OBRA
        ===================================================== */

        .btn-ver {

            display: inline-block;

            padding: 12px 28px;

            border: 1px solid var(--azul);

            color: var(--azul);

            text-decoration: none;

            font-size: 13px;

            letter-spacing: 2px;

            transition: .3s;

        }


        .btn-ver:hover {

            background: var(--azul);

            color: white;

        }


        /* =====================================================
           SIN OBRAS
        ===================================================== */

        .sin-obras {

            grid-column: 1 / -1;

            text-align: center;

            padding: 80px 20px;

            font-size: 20px;

            color: #666;

        }


        /* =====================================================
           VOLVER
        ===================================================== */

        .volver {

            display: block;

            width: fit-content;

            margin: 55px auto 0;

            color: var(--azul);

            text-decoration: none;

            font-size: 14px;

            letter-spacing: 1px;

            transition: .3s;

        }


        .volver:hover {

            color: var(--magenta);

        }


        /* =====================================================
           FOOTER
        ===================================================== */

        .footer {

            width: 100%;

        }


        .footer-contacto {

            background: var(--azul);

            color: white;

            text-align: center;

            padding: 55px 20px;

        }


        .footer-contacto h2 {

            font-size: 25px;

            font-weight: normal;

            letter-spacing: 5px;

            margin-bottom: 25px;

        }


        .footer-redes {

            display: flex;

            justify-content: center;

            gap: 20px;

            margin-bottom: 25px;

        }


        .footer-redes a {

            width: 42px;

            height: 42px;

            border: 1px solid white;

            border-radius: 50%;

            display: flex;

            align-items: center;

            justify-content: center;

            color: white;

            text-decoration: none;

            font-size: 19px;

            transition: .3s;

        }


        .footer-redes a:hover {

            background: var(--magenta);

            border-color: var(--magenta);

        }


        .footer-contacto p {

            margin: 8px 0;

            font-size: 14px;

            letter-spacing: 1px;

        }


        .copyright {

            margin-top: 25px !important;

            font-size: 12px !important;

            opacity: .7;

        }


        /* =====================================================
           WHATSAPP
        ===================================================== */

        .whatsapp-flotante {

            position: fixed;

            right: 25px;

            bottom: 25px;

            width: 60px;

            height: 60px;

            background: #25D366;

            border-radius: 50%;

            display: flex;

            align-items: center;

            justify-content: center;

            color: white;

            font-size: 31px;

            text-decoration: none;

            z-index: 9999;

            box-shadow:
                0 5px 20px
                rgba(0,0,0,.25);

            transition: .3s;

        }


        .whatsapp-flotante:hover {

            transform: scale(1.1);

            color: white;

        }


        /* =====================================================
           RESPONSIVE
        ===================================================== */

        @media (max-width: 1100px) {

            .navbar {

                padding: 0 3%;

            }


            .logo {

                width: 180px;

            }


            .menu {

                gap: 20px;

            }


            .menu a {

                font-size: 12px;

            }


            .grid-obras {

                grid-template-columns:
                    repeat(2, 1fr);

            }

        }


        @media (max-width: 750px) {

            .navbar {

                height: auto;

                min-height: 75px;

                padding: 12px 20px;

                flex-wrap: wrap;

            }


            .logo {

                width: 180px;

            }


            .redes {

                margin-left: auto;

            }


            .menu {

                order: 3;

                width: 100%;

                overflow-x: auto;

                justify-content: flex-start;

                gap: 25px;

            }


            .menu a {

                padding: 10px 0;

            }


            .grid-obras {

                grid-template-columns: 1fr;

            }


            .encabezado-obras h1 {

                font-size: 38px;

            }


            .contenedor-imagen {

                height: 380px;

            }

        }


        @media (max-width: 500px) {

            .encabezado-obras {

                padding: 55px 20px 35px;

            }


            .encabezado-obras h1 {

                font-size: 32px;

            }


            .encabezado-obras .pequeno {

                font-size: 11px;

                letter-spacing: 3px;

            }


            .encabezado-obras p {

                font-size: 15px;

            }


            .contenedor-imagen {

                height: 330px;

            }


            .whatsapp-flotante {

                width: 54px;

                height: 54px;

                right: 18px;

                bottom: 18px;

                font-size: 27px;

            }

        }