/* Envolvente — sistema de diseño
   Base verde-sustentable / alta tecnología.
   Provisional hasta recibir manual de marca definitivo. */

:root {
    /* Verdes — sustentabilidad */
    --verde-profundo:   #0B2B1F;
    --verde-bosque:     #14432F;
    --verde-señal:      #2FA36B;
    --verde-brillo:     #6FE3A6;
    --verde-menta:      #E4F6EC;

    /* Neutros técnicos */
    --grafito:          #0E1512;
    --grafito-suave:    #1B2521;
    --acero:            #5B6B64;
    --niebla:           #F4F7F5;
    --blanco:           #FFFFFF;

    /* Acento tecnológico (dato/CTA) */
    --acento-cian:      #3ED6C8;

    --font-titulo:  'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
    --font-cuerpo:  'Inter', 'Segoe UI', system-ui, sans-serif;
    --font-mono:    'JetBrains Mono', 'Courier New', monospace;

    --espaciado-xl: 7rem;
    --espaciado-lg: 5rem;
    --espaciado-md: 3rem;
    --espaciado-sm: 1.5rem;
    --espaciado-xs: 0.75rem;

    --radio:        4px;
    --radio-lg:     16px;
    --sombra-verde: 0 0 40px rgba(47, 163, 107, .25);
    --linea:        1px solid rgba(255,255,255,.08);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--grafito);
    color: var(--niebla);
    font-family: var(--font-cuerpo);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--font-titulo);
    font-weight: 600;
    line-height: 1.15;
    margin: 0 0 1rem;
    letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.4rem, 5vw, 4rem); }
h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
h3 { font-size: 1.3rem; }

p { color: rgba(244,247,245,.82); }

a { color: var(--verde-brillo); text-decoration: none; }
a:hover { color: var(--acento-cian); }

.eyebrow {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .78rem;
    color: var(--verde-señal);
    display: inline-block;
    margin-bottom: .75rem;
}

/* ---------- Header ---------- */
header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(14, 21, 18, .85);
    backdrop-filter: blur(10px);
    border-bottom: var(--linea);
}

header nav {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1.75rem;
    padding: 1rem 1.5rem;
    flex-wrap: wrap;
}

header nav a {
    color: var(--niebla);
    font-size: .92rem;
    font-weight: 500;
}

header nav a.marca {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-family: var(--font-titulo);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--verde-brillo);
    margin-right: auto;
}

header nav a.marca img { display: block; }

header nav a:hover { color: var(--verde-señal); }

.btn, button[type="submit"] {
    display: inline-block;
    background: var(--verde-señal);
    color: var(--grafito);
    font-weight: 600;
    font-family: var(--font-cuerpo);
    border: none;
    border-radius: var(--radio);
    padding: .8rem 1.6rem;
    cursor: pointer;
    transition: background .2s ease, box-shadow .2s ease;
}

.btn:hover, button[type="submit"]:hover {
    background: var(--verde-brillo);
    box-shadow: var(--sombra-verde);
    color: var(--grafito-suave);
}

/* ---------- Layout ---------- */
main { display: block; }

section {
    padding: var(--espaciado-lg) 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

#hero {
    max-width: none;
    text-align: center;
    padding: calc(var(--espaciado-xl) + 2rem) 1.5rem var(--espaciado-xl);
    background:
        radial-gradient(circle at 50% 0%, rgba(47,163,107,.18), transparent 60%),
        linear-gradient(180deg, rgba(11,31,23,.88) 0%, rgba(20,20,20,.92) 100%),
        url('../img/hero-vivienda.jpg') center/cover no-repeat;
    border-bottom: var(--linea);
}

#hero h1 { max-width: 820px; margin-inline: auto; }
#hero p { max-width: 620px; margin: 1rem auto 2rem; font-size: 1.15rem; }

section:nth-of-type(even):not(#hero) { background: var(--grafito-suave); border-radius: var(--radio-lg); }

.seccion-media {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
}

.seccion-media img {
    width: 100%;
    height: auto;
    border-radius: var(--radio-lg);
    display: block;
}

@media (min-width: 860px) {
    .seccion-media { grid-template-columns: 1fr 1fr; }
    .seccion-media.imagen-izquierda img { order: -1; }
}

.enlace-leer-mas {
    display: inline-block;
    margin-top: .5rem;
    font-weight: 600;
    color: var(--verde-brillo);
}

.enlace-leer-mas:hover { color: var(--verde-señal); }

.pagina-hero {
    text-align: center;
    max-width: 760px;
    margin: 0 auto var(--espaciado-sm);
}

.pagina-cta {
    text-align: center;
    margin-top: var(--espaciado-sm);
}

.matriz-ventajas {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 640px) {
    .matriz-ventajas { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 960px) {
    .matriz-ventajas { grid-template-columns: 1fr 1fr 1fr; }
}

.ventaja-card {
    background: var(--grafito-suave);
    border-radius: var(--radio-lg);
    padding: var(--espaciado-sm);
    border: var(--linea);
}

.ventaja-icono {
    width: 32px;
    height: 32px;
    color: var(--acento-cian);
    margin-bottom: 1rem;
}

.ventaja-card h3 {
    font-family: var(--font-titulo);
    font-size: 1.1rem;
    margin: 0 0 .5rem;
    color: var(--niebla);
}

.ventaja-card p {
    margin: 0;
    color: var(--acero);
    font-size: .92rem;
}

.mensaje, .error {
    max-width: 1200px;
    margin: 1rem auto 0;
    padding: .9rem 1.2rem;
    border-radius: var(--radio);
    font-size: .92rem;
}

.mensaje { background: rgba(47,163,107,.15); color: var(--verde-brillo); border: 1px solid rgba(47,163,107,.4); }
.error { background: rgba(230,80,80,.12); color: #ff9d9d; border: 1px solid rgba(230,80,80,.4); }

/* ---------- Forms ---------- */
form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 480px;
}

label { display: flex; flex-direction: column; gap: .4rem; font-size: .9rem; color: var(--acero); }

input, select, textarea {
    background: var(--grafito);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: var(--radio);
    padding: .75rem .9rem;
    color: var(--niebla);
    font-family: var(--font-cuerpo);
    font-size: .95rem;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--verde-señal);
    box-shadow: 0 0 0 3px rgba(47,163,107,.2);
}

textarea { min-height: 120px; resize: vertical; }

/* ---------- Listas de datos (dashboard, ventajas) ---------- */
ul { padding-left: 1.1rem; }
li { margin-bottom: .5rem; }

footer {
    border-top: var(--linea);
    text-align: center;
    padding: var(--espaciado-md) 1.5rem;
    color: var(--acero);
    font-size: .85rem;
}

footer .marca-pie {
    display: block;
    margin: 0 auto .75rem;
    opacity: .7;
}

footer p { margin: 0; }