/* VARIABLES */
:root {
    --verde-bosque: #1b4332;
    --verde-vivo: #5cb85c;
    --crema-papel: #f4eee1;
}

/* HERO CON FONDO INDIGENA */
.hero-main {
    height: 80vh;
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('../img/fondo_indigena.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.text-sketch {
    font-size: 5rem;
    color: white;
    font-weight: 800;
    margin: 0;
    text-shadow: 4px 4px 0px var(--verde-vivo);
}

.hero-tagline {
    font-size: 1.5rem;
    color: #f0f0f0;
    font-weight: 600;
    font-family: 'Permanent Marker', cursive;
}

/* TITULOS SECCION */
.sketch-title {
    font-family: 'Permanent Marker', cursive;
    font-size: 2.5rem;
    color: var(--verde-bosque);
    text-align: center;
    margin-bottom: 50px;
}

.section-padding { padding: 80px 10%; }
.bg-crema { background-color: var(--crema-papel); }
.bg-verde-claro { background-color: #e8f5e9; }

/* GRID LO QUE HACEMOS */
.grid-hacemos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.card-boceto {
    padding: 30px;
    border: 2px solid var(--verde-bosque);
    border-radius: 15px;
    text-align: center;
    transition: 0.3s;
}

.card-boceto i { font-size: 3rem; color: var(--verde-vivo); margin-bottom: 20px; }
.card-boceto:hover { transform: translateY(-10px); background: white; }

/* CARRUSEL INFINITO */
.carousel-infinite { overflow: hidden; margin-top: 30px; }
.carousel-track {
    display: flex;
    width: calc(300px * 6);
    animation: scrollInfinite 20s linear infinite;
}

.carousel-track img {
    width: 280px;
    height: 180px;
    object-fit: cover;
    margin: 0 10px;
    border: 5px solid white;
    border-radius: 10px;
}

@keyframes scrollInfinite {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-300px * 3)); }
}

/* QUE HACEMOS 01-06 */
.que-hacemos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
}

.que-item span {
    font-family: 'Permanent Marker';
    font-size: 3rem;
    color: var(--verde-vivo);
    display: block;
}

.que-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 15px;
    margin: 10px 0;
}

/* HISTORIAS */
.historias-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.historia-card { background: white; padding: 30px; border-radius: 20px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.btn-read { color: var(--verde-vivo); font-weight: 800; text-decoration: none; }