/**
 * Page-specific styles
 * Extracted from inline <style> blocks in page templates.
 *
 * @package Ecocan
 * @since 2.20
 */

/* ----------------------------------------
   Flat hero variant
   Used on: tienda, carrito, checkout, default
   ---------------------------------------- */
.hero--flat {
    background: var(--color-bg-light, #f7f7f7);
    border-top: 1px solid rgba(0,0,0,0.1);
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

.hero--flat::before {
    background: none;
}

.hero--flat .hero-content {
    min-height: unset;
    padding-top: 72px;
}

.hero--flat .hero-content h1 {
    color: var(--color-text, #202020);
}

/* ----------------------------------------
   Servicios page
   ---------------------------------------- */
.pregunta:first-of-type {
    border-top: 1px solid rgba(0,0,0,0.1);
    padding-top: 8px;
}

.habitos {
    background-color: var(--color-bg-lighter, #f1f1f1);
}

/* ----------------------------------------
   Tienda page — FAQ hero content layout
   ---------------------------------------- */
.hero-content-faq {
    max-width: 1280px;
    margin: 0 auto;
    width: 90%;
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 32px;
    align-content: flex-end;
    text-align: center;
    min-height: 50vh;
    padding-bottom: 96px;
    position: relative;
    z-index: 2;
}

.hero-content-faq h1 {
    color: #fefefe;
    font-size: calc(36px + 1vw);
    line-height: 120%;
    font-weight: 400;
    margin: 0;
}

/* ----------------------------------------
   Tienda section variants
   ---------------------------------------- */
.tienda--shop {
    background-color: var(--color-bg-light, #f7f7f7);
    padding: 0;
}

.tienda--white {
    background-color: #ffffff;
}

.tienda--default {
    background-color: var(--color-bg-light, #f7f7f7);
    padding: 48px 0 96px 0;
}