* {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
        }

        body {
            background: #f4f7fb;
            color: #222;
        }

        header {
            background: linear-gradient(135deg, #111827, #2f3749);
            color: white;
            padding: 40px 20px;
            text-align: center;
        }

        header h1 {
            font-size: 34px;
            margin-bottom: 10px;
        }

        header p {
            opacity: 0.9;
            font-size: 16px;
        }

        .contenedor {
            width: 95%;
            max-width: 1200px;
            margin: 30px auto;
        }

        .grid-proyectos {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 22px;
        }

        .card {
            background: #a4a6a7;
            border-radius: 18px;
            overflow: hidden;
            box-shadow: 0 10px 25px rgba(0,0,0,0.08);
            transition: 0.3s ease;
            animation: aparecer 0.5s ease;
        }

        .card:hover {
            transform: translateY(-7px);
            box-shadow: 0 15px 35px rgba(0,0,0,0.15);
        }

        .card img {
            width: 100%;
            height: 190px;
            object-fit: cover;
        }

        .card-body {
            padding: 18px;
        }

        .card-body h3 {
            font-size: 21px;
            color: #111827;
            margin-bottom: 10px;
        }

        .estado {
            display: inline-block;
            background: #dbeafe;
            color: #1d4ed8;
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 13px;
            margin-bottom: 12px;
        }

        .detalle {
            font-size: 14px;
            color: #555;
            line-height: 1.5;
            margin-bottom: 12px;
        }

        .geo {
            background: #f1f5f9;
            padding: 10px;
            border-radius: 10px;
            font-size: 13px;
            margin-bottom: 14px;
        }

        .acciones {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .btn {
            border: none;
            padding: 10px 14px;
            border-radius: 10px;
            cursor: pointer;
            font-size: 14px;
            text-decoration: none;
            display: inline-block;
            transition: 0.3s;
        }

        .btn-ver {
            background: #2563eb;
            color: white;
        }

        .btn-ver:hover {
            background: #1d4ed8;
        }

        .btn-link {
            background: #10b981;
            color: white;
        }

        .btn-link:hover {
            background: #059669;
        }

        .modal {
            display: none;
            position: fixed;
            z-index: 999;
            inset: 0;
            background: rgba(0,0,0,0.65);
            padding: 20px;
            overflow-y: auto;
        }

        .modal-contenido {
            background: white;
            max-width: 1000px;
            margin: 40px auto;
            border-radius: 22px;
            padding: 25px;
            position: relative;
            animation: modalEntrada 0.35s ease;
        }

        .cerrar {
            position: absolute;
            top: 15px;
            right: 20px;
            font-size: 28px;
            cursor: pointer;
            color: #444;
        }

        .cerrar:hover {
            color: red;
        }

        .modal-titulo {
            font-size: 26px;
            margin-bottom: 20px;
            color: #111827;
        }

        .modal-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
            gap: 18px;
        }

        .modal-item {
            background: #f8fafc;
            padding: 15px;
            border-radius: 15px;
            border: 1px solid #e5e7eb;
        }

        .modal-item img {
            width: 100%;
            height: 150px;
            object-fit: cover;
            border-radius: 12px;
            margin-bottom: 10px;
        }

        .modal-item h4 {
            margin-bottom: 8px;
            color: #1f2937;
        }

        .modal-item p {
            font-size: 14px;
            color: #555;
            line-height: 1.4;
        }

        .mapa-link {
            display: inline-block;
            margin-top: 10px;
            color: #2563eb;
            text-decoration: none;
            font-size: 14px;
        }

        .sin-datos {
            text-align: center;
            background: white;
            padding: 30px;
            border-radius: 15px;
        }

        @keyframes aparecer {
            from {
                opacity: 0;
                transform: translateY(15px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes modalEntrada {
            from {
                transform: scale(0.92);
                opacity: 0;
            }
            to {
                transform: scale(1);
                opacity: 1;
            }
        }

        @media (max-width: 600px) {
            header h1 {
                font-size: 26px;
            }

            .card img {
                height: 160px;
            }

            .modal-contenido {
                margin: 15px auto;
                padding: 18px;
            }

            .modal-titulo {
                font-size: 22px;
            }

            .acciones {
                flex-direction: column;
            }

            .btn {
                width: 100%;
                text-align: center;
            }
        }
   
:root{
    --chat-primary:#2563eb;
    --chat-dark:#111827;
    --chat-light:#ffffff;
    --chat-bg:#f3f4f6;
    --chat-radius:20px;
}

.chat-float-btn{
    position:fixed;
    right:22px;
    bottom:22px;
    width:64px;
    height:64px;
    border-radius:50%;
    border:none;
    background:var(--chat-primary);
    color:white;
    font-size:28px;
    cursor:pointer;
    z-index:9999;
    box-shadow:0 10px 30px rgba(0,0,0,.25);
    display:flex;
    align-items:center;
    justify-content:center;
}

.chat-modal{
    position:fixed;
    right:22px;
    bottom:100px;
    width:360px;
    height:520px;
    background:var(--chat-light);
    border-radius:var(--chat-radius);
    box-shadow:0 18px 45px rgba(0,0,0,.30);
    z-index:9998;
    display:none;
    overflow:hidden;
    flex-direction:column;
    font-family:Arial, sans-serif;
}

.chat-modal.active{
    display:flex;
}

.chat-header{
    background:var(--chat-primary);
    color:white;
    padding:16px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.chat-header h3{
    margin:0;
    font-size:16px;
}

.chat-close{
    background:none;
    border:none;
    color:white;
    font-size:24px;
    cursor:pointer;
}

.chat-body{
    flex:1;
    padding:15px;
    overflow-y:auto;
    background:var(--chat-bg);
}

.chat-msg{
    max-width:80%;
    padding:10px 13px;
    margin-bottom:10px;
    border-radius:14px;
    font-size:14px;
    line-height:1.4;
}

.chat-msg.bot{
    background:white;
    color:#111827;
    border-bottom-left-radius:4px;
}

.chat-msg.user{
    background:var(--chat-primary);
    color:white;
    margin-left:auto;
    border-bottom-right-radius:4px;
}

.chat-form{
    display:flex;
    gap:8px;
    padding:12px;
    background:white;
    border-top:1px solid #e5e7eb;
}

.chat-form input{
    flex:1;
    border:1px solid #d1d5db;
    border-radius:20px;
    padding:11px 14px;
    outline:none;
    font-size:14px;
}

.chat-form button{
    width:44px;
    height:44px;
    border-radius:50%;
    border:none;
    background:var(--chat-primary);
    color:white;
    cursor:pointer;
    font-size:18px;
}

/* TABLET */
@media(max-width:991px){
    .chat-modal{
        width:95%;
        height:85%;
        right:15px;
        bottom:90px;
    }
	.chat-header h3{
    margin:0;
    font-size:56px;
	}
	.chat-msg{
    max-width:80%;
    padding:10px 13px;
    margin-bottom:10px;
    border-radius:14px;
    font-size:35px;
    line-height:1.4;
	}
	.chat-form input{
    flex:1;
    border:1px solid #d1d5db;
    border-radius:20px;
    padding:11px 14px;
    outline:none;
    font-size:35px;
	height:70px;
	}
	.chat-form button{
    width:64px;
    height:64px;
    border-radius:50%;
    border:none;
    background:var(--chat-primary);
    color:white;
    cursor:pointer;
    font-size:30px;
	}
	.chat-close{
    background:none;
    border:none;
    color:white;
    font-size:64px;
    cursor:pointer;
	}
}

/* MÓVIL: pantalla completa */
@media(max-width:480px){
    .chat-modal{
        width:100%;
        height:100%;
        right:0;
        bottom:0;
        border-radius:0;
    }

    .chat-float-btn{
        right:16px;
        bottom:16px;
        width:58px;
        height:58px;
    }

    .chat-modal.active + .chat-float-btn{
        display:none;
    }
}
:root{
    --chat-primary:#3b82f6;
    --chat-dark:#0f172a;
    --chat-light:#1e293b;
    --chat-bg:#111827;
    --chat-radius:20px;

    --dark:#0f172a;
    --dark-card:#1e293b;
    --dark-soft:#334155;
    --dark-border:#475569;
    --texto:#e2e8f0;
}

/* BODY */
body{
    background:#0f172a;
    color:var(--texto);
}

/* HEADER */
header{
    background:linear-gradient(135deg,#020617,#1e293b);
    color:white;
}

/* CARD */
.card{
    background:var(--dark-card);
    border:1px solid var(--dark-border);
    box-shadow:0 10px 25px rgba(0,0,0,0.45);
}

.card:hover{
    box-shadow:0 15px 35px rgba(0,0,0,0.60);
}

.card-body h3{
    color:#f8fafc;
}

.detalle{
    color:#cbd5e1;
}

/* ESTADO */
.estado{
    background:#1e3a5f;
    color:#93c5fd;
}

/* GEO */
.geo{
    background:#111827;
    border:1px solid var(--dark-border);
    color:#cbd5e1;
}

/* BOTONES */
.btn-ver{
    background:#2563eb;
    color:white;
}

.btn-ver:hover{
    background:#1d4ed8;
}

.btn-link{
    background:#10b981;
    color:white;
}

.btn-link:hover{
    background:#059669;
}

/* MODAL */
.modal{
    background:rgba(0,0,0,0.80);
}

.modal-contenido{
    background:var(--dark-card);
    border:1px solid var(--dark-border);
    color:var(--texto);
}

.modal-titulo{
    color:#f8fafc;
}

.modal-item{
    background:#111827;
    border:1px solid var(--dark-border);
}

.modal-item h4{
    color:#f1f5f9;
}

.modal-item p{
    color:#cbd5e1;
}

.mapa-link{
    color:#60a5fa;
}

.cerrar{
    color:#cbd5e1;
}

.cerrar:hover{
    color:#ef4444;
}

/* CHAT */
.chat-modal{
    background:var(--dark-card);
}

.chat-float-btn{
    background:var(--chat-primary);
}

.chat-header{
    background:linear-gradient(135deg,#1e293b,#2563eb);
}

.chat-msg.bot{
    background:#334155;
    color:#f1f5f9;
}

.chat-msg.user{
    background:var(--chat-primary);
    color:white;
}

.chat-form{
    background:#1e293b;
    border-top:1px solid var(--dark-border);
}

.chat-form input{
    background:#0f172a;
    border:1px solid var(--dark-border);
    color:white;
}

.chat-form input::placeholder{
    color:#94a3b8;
}

.chat-form button{
    background:var(--chat-primary);
}

.chat-body{
    background:#111827;
}

/* SIN DATOS */
.sin-datos{
    background:var(--dark-card);
    color:#f1f5f9;
}