:root{
    --primary: #a595f5;
    --accent: #f57905;
    --accent-hover: #d96804;
    --bg-light: #fafafa;
    --text: #1b263b;
    --white: #ffffff;
    --gray: #e0e0e0;
    --font: 'Inter', sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);color:var(--text);background:var(--bg-light)
    ;line-height:1.6}
.container{width:90%;max-width:1140px;margin:auto}
a{text-decoration:none;color:inherit}

/* NAVBAR con fondo corporativo */
.navbar{
    background: #b0aeb4;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
    position: sticky;
    top: 0;
    z-index: 1000;
}
.nav-container{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
}
.logo{
    height: 40px;
    /* filter: brightness(0) invert(1);  logo blanco sobre fondo oscuro */
}
.nav-menu {
    display: flex;
    gap: 25px; /* Ajusta este valor según el espacio que necesites */
    text-decoration: none; /* Opcional: para quitar subrayados */
}
.nav-menu a{
    color: var(--white);
    font-weight: 600;
}
.nav-menu a:hover{
    color: var(--text);
}
.cta-button{
    background: var(--accent);
    color: var(--white);
    padding: .75rem 1.5rem;
    border-radius: 4px;
    font-weight: 600;
    transition: background .3s;
}
.cta-button:hover{
    background: var(--accent-hover);
}
/* HERO */
.hero{padding:4rem 0;background:var(--white)}
.hero-container{display:flex;flex-wrap:wrap;align-items:center;gap:2rem}
.hero-text{flex:1 1 400px}
.hero-text h1{font-size:2.4rem;margin-bottom:1rem;color:var(--pr--white)}
.hero-text p{font-size:1.1rem;margin-bottom:2rem}
.hero-image{flex:1 1 400px}
.hero-image img{width:100%;border-radius:8px}

/* VALOR */
.valor{padding:3.5rem 0}
.valor h2{text-align:center;margin-bottom:2rem}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem}
.card{background:var(--white);padding:2rem;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.05);text-align:center}
.card .icon{font-size:2rem;margin-bottom:1rem}

/* FUNCIONES */
.funciones{padding:3.5rem 0;background:var(--white)}
.funciones h2{text-align:center;margin-bottom:2rem}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem}
.item{background:var(--bg-light);padding:2rem;border-radius:8px;text-align:center}
.item .icon{font-size:2.5rem;margin-bottom:1rem;color:var(--accent)}

/* DEMO */
.demo{padding:3.5rem 0}
.demo h2{text-align:center;margin-bottom:2rem}
.form-demo{display:grid;gap:1rem;max-width:500px;margin:auto}
.form-demo input{padding:.75rem;border:1px solid var(--gray);border-radius:4px;font-size:1rem}
.full{width:100%}

/* FOOTER */
.footer{
    background:var(--primary);color:var(--white);
    text-align:center;
    padding:2rem 0;
    font-size:.9rem
}

/* RESPONSIVE */
@media(max-width:768px){
    .nav-container{flex-direction:column;align-items:flex-start}
    .hero-container{flex-direction:column}
}
/* Imágenes grandes en tarjetas VALOR */
.card-img-large{
    width: 25%;               /* usa todo el ancho disponible */
    max-width: 320px;          /* límite para no pixelar */
    height: auto;
    margin: 0 auto 1.5rem;     /* centrado y separación */
    display: block;

}
/* ===== Separación visual con color corporativo ===== */

/* Hero → ya es blanca, se mantiene */
.hero{background:var(--white)}

/* Valor → fondo corporativo claro */
.valor{
    background:#b0aeb4;
    color:var(--white);
}
.valor h2{color:var(--white)}
.valor .card{background:var(--white);color:var(--text)} /* tarjetas blancas para contraste */

/* Funciones → fondo blanco */
.funciones{background:var(--white)}

/* Demo → fondo corporativo oscuro */
.demo{
    background:#b0aeb4; /* una tonalidad más oscura que #4b446e para no saturar */
    color:var(--white);
}
.demo h2{color:var(--white)}
.form-demo input{background:var(--white);border:none;border-radius:4px}

/* Footer → fondo corporativo full */
.footer{background:#b0aeb4}
/* Fuerza al logo a verse blanco sobre fondo oscuro */
.logo {
    height: 44px;
    
}
/* Estilos por defecto (para escritorio y tabletas): Diseño 2x2 */
.cards {
    display: grid; 
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr; 
    width: 100%;
    min-height: 80vh; 
    gap: 20px;
}

/* --- Media Query para dispositivos con un ancho máximo de 768px (Móviles) --- */
@media (max-width: 768px) {
    .cards {
        /* Se cambia a una sola columna */
        grid-template-columns: 1fr;
        
        /* Se deja que la altura sea automática para que se adapte al contenido */
        grid-template-rows: auto; 
        
        /* La altura mínima ya no necesita ser fija para móviles */
        min-height: auto;
    }
    
    /* Opcional: Estilos para la imagen en móvil */
    .card-img-large {
        max-width: 100%; /* Asegura que la imagen no exceda el ancho de la tarjeta */
        height: auto;
    }
}
/* Fondo boton */
.fondob{
    background-color: #d96804;
    padding: 3px 8px;
    border-radius: 4px;
    text-decoration: none;
    color: inherit
}