/* Página Papelería · Parada 003
       Paleta T314 (crema / negro / mostaza / cobre), mismo patrón de variables
       locales que css/pages/index.css. Esta hoja es autónoma: papeleria.php no
       carga index.css, así que los componentes de Home que se reutilizan aquí
       (tarjetas de necesidad, bloques partidos, trust items, botones) se
       redeclaran con la misma receta visual, escopeados a .papeleria-page. */
    .papeleria-page {
        --mostaza: var(--accent-color, #c9a227);
        --mostaza-oscuro: #b3901f;
        --crema: var(--bg-cream, #f9f7f2);
        --negro: var(--text-color, #2D2D2D);
        --texto-suave: #6b6558;
        --cobre: #a8622e;
        font-family: var(--font-secondary);
    }
    .papeleria-page .font-display {
        font-family: var(--font-primary);
    }
    .papeleria-page .eyebrow {
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        font-weight: 600;
        color: var(--mostaza-oscuro);
    }

    /* Hero split: texto + imagen contenida, con espacio para la cabecera fija */
    .papeleria-page .hero-split {
        padding-top: calc(var(--header-height, 110px) + 2.5rem);
        padding-bottom: 3rem;
        background: var(--crema);
    }
    .papeleria-page .hero-split-media {
        aspect-ratio: 4/3;
        overflow: hidden;
        border-radius: 0.25rem;
        box-shadow: 0 14px 34px rgba(0, 0, 0, 0.1);
    }
    .papeleria-page .hero-split-media picture {
        display: contents;
    }
    .papeleria-page .hero-split-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* Botones (misma receta que Home 314) */
    .papeleria-page .btn-accent {
        display: inline-block;
        background: var(--mostaza);
        color: #1f1a08;
        font-weight: 600;
        padding: 12px 28px;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        transition: all 0.2s;
        box-shadow: 0 4px 14px rgba(201, 162, 39, 0.3);
    }
    .papeleria-page .btn-accent:hover {
        background: var(--mostaza-oscuro);
        color: #fff;
        transform: scale(1.02);
    }
    .papeleria-page .btn-outline-dark {
        display: inline-block;
        border: 1px solid rgba(0, 0, 0, 0.15);
        color: var(--texto-suave);
        font-weight: 500;
        padding: 11px 26px;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        transition: all 0.2s;
    }
    .papeleria-page .btn-outline-dark:hover {
        border-color: var(--mostaza-oscuro);
        color: var(--mostaza-oscuro);
    }
    .papeleria-page .btn-outline-light {
        display: inline-block;
        border: 1px solid rgba(255, 255, 255, 0.6);
        color: #fff;
        font-weight: 500;
        padding: 11px 26px;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        transition: all 0.2s;
    }
    .papeleria-page .btn-outline-light:hover {
        background: rgba(255, 255, 255, 0.12);
        border-color: #fff;
    }

    /* Tarjetas de "¿Qué necesitas hoy?": todas icono + degradado mostaza
       (aquí ninguna tiene foto propia, a diferencia de Home). */
    .papeleria-page .need-card {
        display: block;
        background: linear-gradient(135deg, var(--mostaza) 0%, var(--mostaza-oscuro) 100%);
        border-radius: 0.25rem;
        padding: 1.5rem 1.25rem;
        min-height: 168px;
        transition: transform 0.25s ease, box-shadow 0.25s ease;
    }
    .papeleria-page .need-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
    }
    .papeleria-page .need-card-icon {
        width: 2.4rem;
        height: 2.4rem;
        border-radius: 9999px;
        background: rgba(255, 255, 255, 0.92);
        color: var(--mostaza-oscuro);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
        margin-bottom: 0.75rem;
    }
    .papeleria-page .need-card h3 {
        font-family: var(--font-primary);
        font-weight: 700;
        font-size: 1.05rem;
        color: #fff;
        margin-bottom: 0.35rem;
    }
    .papeleria-page .need-card p {
        font-size: 0.78rem;
        line-height: 1.4;
        color: rgba(255, 255, 255, 0.85);
    }

    /* Sello circular decorativo (bloque de listas escolares) */
    .papeleria-page .sello-decorativo {
        width: 72px;
        margin-bottom: 1.25rem;
        transform: rotate(-6deg);
    }
    .papeleria-page .sello-decorativo img {
        width: 100%;
        height: auto;
        display: block;
    }
    .papeleria-page .lista-nota {
        background: #fff;
        border: 1px solid rgba(0, 0, 0, 0.06);
        border-radius: 0.25rem;
        padding: 1.75rem;
    }

    /* Papelería para cada momento */
    .papeleria-page .momento-card {
        background: #fff;
        border: 1px solid rgba(0, 0, 0, 0.06);
        border-radius: 0.25rem;
        padding: 1.5rem 1.1rem;
        text-align: center;
    }
    .papeleria-page .momento-icon {
        font-size: 1.6rem;
        color: var(--mostaza-oscuro);
        margin-bottom: 0.6rem;
    }
    .papeleria-page .momento-card h3 {
        font-family: var(--font-primary);
        font-weight: 700;
        font-size: 0.95rem;
        color: var(--negro);
        margin-bottom: 0.35rem;
    }
    .papeleria-page .momento-card p {
        font-size: 0.72rem;
        line-height: 1.4;
        color: var(--texto-suave);
    }

    /* Visual fotográfico de los bloques partidos (impresión, confianza local):
       mismo patrón que css/pages/index.css .block-visual. */
    .papeleria-page .block-visual {
        aspect-ratio: 14/9;
        overflow: hidden;
        border-radius: 0.25rem;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    }
    .papeleria-page .block-visual picture {
        display: contents;
    }
    .papeleria-page .block-visual img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    @media (max-width: 767px) {
        .papeleria-page .block-visual--print {
            aspect-ratio: 4/5;
        }
    }

    /* Recomendaciones Tranvía314 */
    .papeleria-page .reco-card {
        display: flex;
        align-items: center;
        gap: 0.85rem;
        background: var(--crema);
        border-radius: 0.25rem;
        padding: 1.1rem 1.25rem;
    }
    .papeleria-page .reco-icon {
        font-size: 1.2rem;
        color: var(--cobre);
        flex-shrink: 0;
    }
    .papeleria-page .reco-card p {
        font-size: 0.85rem;
        color: var(--negro);
        line-height: 1.35;
    }

    /* Confianza local (mismo patrón .trust-item de Home) */
    .papeleria-page .trust-item {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
    .papeleria-page .trust-icon {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: rgba(201, 162, 39, 0.15);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--mostaza-oscuro);
        margin-bottom: 8px;
    }