/* =========================================================
   landing.css — landings SEO
   (terraceria-cancun, pipas-de-agua-cancun, acarreos-materiales-cancun)
   Extraído de los bloques <style> inline (SPEC-002).

   El fondo del hero se parametriza por página mediante
   la variable --landing-hero-img (definida inline en cada landing).
   ========================================================= */

.landing-hero {
    padding-top: clamp(140px, 20vw, 200px);
    padding-bottom: clamp(60px, 10vw, 100px);
    background-image: linear-gradient(rgba(15, 27, 45, 0.83), rgba(15, 27, 45, 0.83)), var(--landing-hero-img, none);
    background-size: cover;
    background-position: center;
    text-align: left;
}

.benefit-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--color-border);
    padding: var(--space-6);
    border-radius: var(--radius-md);
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.benefit-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-accent);
}

.benefit-card i {
    font-size: 2.5rem;
    color: var(--color-accent);
    margin-bottom: var(--space-4);
}

.material-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    margin-top: var(--space-7);
}

.material-item {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    border-left: 4px solid var(--color-accent);
    transition: transform 0.3s ease;
}

.material-item:hover {
    transform: scale(1.02);
}

.material-item h3 {
    color: var(--color-accent);
    margin-bottom: 10px;
}