/* =========================================================
   PÁGINAS DE SERVICIOS
   Paquetería · Bazar · Loterías · Contacto
========================================================= */

.service-page{
    min-height:100vh;
    padding-top:156px;
    background:
        linear-gradient(rgba(235,238,240,.32),rgba(235,238,240,.32)),
        url('../images/home.webp') center center / cover fixed no-repeat;
}

.service-hero{
    padding:64px 4% 46px;
    border-bottom:1px solid rgba(255,255,255,.20);
    background:rgba(255,255,255,.10);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
}

.service-hero-inner{
    width:min(1180px,92%);
    margin:auto;
    max-width:850px;
}

.service-kicker{
    display:block;
    margin-bottom:12px;
    color:#8b0f1c;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.22em;
}

.service-hero h1{
    margin:0;
    font-size:clamp(42px,6vw,78px);
    line-height:1;
    font-weight:400;
    text-transform:uppercase;
    letter-spacing:.02em;
}

.service-hero p{
    max-width:700px;
    margin:20px 0 0;
    color:#2d3237;
    font-size:17px;
    line-height:1.65;
}

.service-content{
    padding:46px 0 64px;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
}

.service-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}

.service-grid-4{
    grid-template-columns:repeat(4,1fr);
}

.service-card,
.contact-card{
    position:relative;
    min-height:220px;
    padding:28px 26px;
    border:1px solid rgba(255,255,255,.42);
    background:rgba(255,255,255,.18);
    box-shadow:0 18px 38px rgba(20,24,28,.06);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
}

.service-card::before,
.contact-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:2px;
    background:linear-gradient(90deg,transparent,#8b0f1c,transparent);
    opacity:.50;
}

.service-number,
.contact-label{
    display:block;
    margin-bottom:18px;
    color:#8b0f1c;
    font-size:11px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.14em;
}

.service-card h2{
    margin:0 0 14px;
    font-size:20px;
    font-weight:500;
    text-transform:uppercase;
    letter-spacing:.035em;
}

.service-card p,
.contact-card p{
    color:#555e67;
    font-size:14px;
    line-height:1.65;
}

.service-card-featured{
    background:linear-gradient(145deg,rgba(255,255,255,.25),rgba(139,15,28,.045));
}

.service-cta-inline{
    width:min(1180px,92%);
    margin:32px auto 0;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
}

.service-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:12px 24px;
    border:1px solid #8b0f1c;
    background:#8b0f1c;
    color:#fff;
    text-decoration:none;
    text-transform:uppercase;
    letter-spacing:.07em;
    font-size:12px;
    transition:.22s ease;
}

.service-btn:hover{
    background:#6f0b16;
    border-color:#6f0b16;
}

.service-link{
    color:#8b0f1c;
    font-size:13px;
    font-weight:600;
    text-decoration:none;
}

.service-note{
    width:min(900px,92%);
    margin:30px auto 0;
    padding:20px 24px;
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:16px;
    background:rgba(255,255,255,.16);
    border:1px solid rgba(255,255,255,.36);
}

.service-note strong{
    color:#8b0f1c;
}

.service-note span{
    color:#4e555d;
    font-size:14px;
}

.service-note a{
    color:#8b0f1c;
    text-decoration:none;
    font-size:12px;
    font-weight:600;
}

/* Contacto */

.contact-grid{
    display:grid;
    grid-template-columns:1.25fr 1fr 1fr;
    gap:18px;
}

.contact-card-primary{
    grid-row:span 2;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.contact-value{
    display:block;
    margin-bottom:10px;
    color:#171a1f;
    font-size:clamp(20px,3vw,30px);
    font-weight:500;
    text-decoration:none;
}

.contact-card-primary .service-btn{
    align-self:flex-start;
    margin-top:20px;
}

.contact-list{
    margin:0;
    padding-left:18px;
    color:#555e67;
    font-size:14px;
    line-height:1.8;
}

@media(max-width:1000px){
    .service-grid,
    .service-grid-4{
        grid-template-columns:repeat(2,1fr);
    }

    .contact-grid{
        grid-template-columns:1fr 1fr;
    }

    .contact-card-primary{
        grid-row:auto;
    }
}

@media(max-width:850px){
    .service-page{
        padding-top:124px;
    }
}

@media(max-width:620px){
    .service-page{
        padding-top:100px;
    }

    .service-hero{
        padding:46px 4% 34px;
    }

    .service-hero h1{
        font-size:42px;
    }

    .service-hero p{
        font-size:15px;
    }

    .service-grid,
    .service-grid-4,
    .contact-grid{
        grid-template-columns:1fr;
    }

    .service-card,
    .contact-card{
        min-height:auto;
    }

    .service-note{
        grid-template-columns:1fr;
        text-align:center;
    }

    .contact-card-primary .service-btn{
        align-self:stretch;
    }
}

/* =========================================================
   FONDO EXCLUSIVO BAZAR
========================================================= */

.bazar-page{
    background:
        linear-gradient(rgba(235,238,240,.24),rgba(235,238,240,.24)),
        url('../images/bazar.png') center center / cover fixed no-repeat;
}

.bazar-page .service-page{
    background:transparent;
}

.bazar-page .service-hero,
.bazar-page .service-content{
    background:rgba(255,255,255,.06);
}

.bazar-page .site-footer{
    background:rgba(24,27,31,.46);
}


/* =========================================================
   TARJETAS BAZAR CON IMÁGENES
   Sustituye el fondo transparente por imágenes reales.
========================================================= */

.bazar-page .service-card-image{
    position:relative;
    overflow:hidden;
    min-height:260px;
    padding:0;
    display:flex;
    align-items:flex-end;
    border:1px solid rgba(255,255,255,.38);
    background-color:transparent;
    background-position:center center;
    background-size:cover;
    background-repeat:no-repeat;
    box-shadow:0 18px 40px rgba(20,24,28,.10);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
}

.bazar-page .service-card-image::before{
    content:"";
    position:absolute;
    inset:0;
    height:auto;
    background:
        linear-gradient(
            180deg,
            rgba(12,14,18,.04) 0%,
            rgba(12,14,18,.18) 46%,
            rgba(12,14,18,.72) 100%
        );
    opacity:1;
    z-index:1;
}

.bazar-page .service-card-image > *{
    position:relative;
    z-index:2;
}

.bazar-page .service-card-image .service-number{
    position:absolute;
    top:18px;
    left:20px;
    color:#ffffff;
    text-shadow:0 2px 8px rgba(0,0,0,.35);
}

.bazar-page .service-card-image h2{
    width:100%;
    margin:0;
    padding:84px 22px 8px;
    color:#ffffff;
    text-shadow:0 2px 12px rgba(0,0,0,.42);
}

.bazar-page .service-card-image p{
    width:100%;
    margin:0;
    padding:0 22px 22px;
    color:rgba(255,255,255,.90);
    text-shadow:0 2px 10px rgba(0,0,0,.36);
}

.bazar-page .service-card-papeleria{
    background-image:url('../images/papeleria.png');
}

.bazar-page .service-card-colegio{
    background-image:url('../images/colegio.png');
}

.bazar-page .service-card-oficina{
    background-image:url('../images/oficina.png');
}

.bazar-page .service-card-material{
    background-image:url('../images/material.png');
}

.bazar-page .service-card-image:hover{
    transform:translateY(-4px);
    box-shadow:0 22px 46px rgba(20,24,28,.16);
}

@media(max-width:620px){
    .bazar-page .service-card-image{
        min-height:220px;
    }
}


/* =========================================================
   TARJETAS BAZAR - SOLO TÍTULOS + CAPA ELEGANTE
========================================================= */

.bazar-page .service-card-image p{
    display:none !important;
}

.bazar-page .service-card-image{
    min-height:260px;
    align-items:flex-end;
    isolation:isolate;
    transition:
        transform .35s ease,
        box-shadow .35s ease,
        filter .35s ease;
}

/* Capa translúcida para unificar las fotografías */
.bazar-page .service-card-image::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.05) 0%,
            rgba(30,32,36,.16) 52%,
            rgba(18,20,24,.52) 100%
        );
    backdrop-filter:saturate(.90) brightness(.96);
    -webkit-backdrop-filter:saturate(.90) brightness(.96);
    transition:
        background .35s ease,
        backdrop-filter .35s ease,
        -webkit-backdrop-filter .35s ease;
}

/* Marco interior muy fino, tipo cristal */
.bazar-page .service-card-image::after{
    content:"";
    position:absolute;
    inset:10px;
    z-index:1;
    pointer-events:none;
    border:1px solid rgba(255,255,255,.16);
}

/* Número */
.bazar-page .service-card-image .service-number{
    position:absolute;
    top:18px;
    left:20px;
    z-index:2;
    margin:0;
    color:rgba(255,255,255,.82);
    text-shadow:0 2px 8px rgba(0,0,0,.28);
}

/* Título */
.bazar-page .service-card-image h2{
    position:relative;
    z-index:2;
    width:100%;
    margin:0;
    padding:22px;
    color:#ffffff;
    font-size:22px;
    line-height:1.15;
    font-weight:500;
    letter-spacing:.04em;
    text-shadow:0 2px 12px rgba(0,0,0,.48);
}

/* Hover: la imagen se aclara ligeramente */
.bazar-page .service-card-image:hover{
    transform:translateY(-4px);
    box-shadow:
        0 24px 48px rgba(20,24,28,.16),
        inset 0 1px 0 rgba(255,255,255,.18);
}

.bazar-page .service-card-image:hover::before{
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.02) 0%,
            rgba(24,26,30,.08) 52%,
            rgba(18,20,24,.36) 100%
        );
    backdrop-filter:saturate(1) brightness(1.02);
    -webkit-backdrop-filter:saturate(1) brightness(1.02);
}

@media(max-width:620px){
    .bazar-page .service-card-image{
        min-height:220px;
    }

    .bazar-page .service-card-image h2{
        padding:18px;
        font-size:19px;
    }

    .bazar-page .service-card-image::after{
        inset:8px;
    }
}


/* =========================================================
   CUADERNILLOS RUBIO · BLOQUE DESTACADO
   - Se diferencia de las tarjetas normales sin romper la estética.
   - Mantiene cristal, transparencias y tipografía de Bazar.
   - El amarillo se usa únicamente como pequeño acento visual.
   - Toda la franja es pulsable y lleva a cuadernillos-rubio.php.
========================================================= */

.rubio-feature{
    position:relative;
    width:min(1180px,92%);
    min-height:300px;
    margin:34px auto 0;

    display:grid;
    grid-template-columns:minmax(300px,.9fr) minmax(360px,1.1fr);
    align-items:stretch;

    overflow:hidden;
    border:1px solid rgba(255,255,255,.42);
    background:
        linear-gradient(
            120deg,
            rgba(255,255,255,.24),
            rgba(255,255,255,.12)
        );

    box-shadow:0 20px 44px rgba(20,24,28,.09);
    backdrop-filter:blur(15px);
    -webkit-backdrop-filter:blur(15px);

    color:#171a1f;
    text-decoration:none;

    transition:
        transform .32s ease,
        box-shadow .32s ease,
        border-color .32s ease;
}

/* Línea superior: pequeño guiño al amarillo reconocible de Rubio,
   sin convertir la sección en un bloque amarillo. */
.rubio-feature::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    z-index:3;
    height:3px;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(245,196,0,.92),
        transparent
    );
}

/* Imagen reservada para la composición de Cuadernillos Rubio.
   Si todavía no existe, el fondo de cristal sigue siendo válido
   y no rompe la página. */
.rubio-feature-image{
    min-height:300px;
    background:
        linear-gradient(
            90deg,
            rgba(18,20,24,.04),
            rgba(18,20,24,.12)
        ),
        url('../images/cuadernillos-rubio.png') center / cover no-repeat;
}

/* Texto: limpio, con aire y alineado con el lenguaje visual actual. */
.rubio-feature-content{
    position:relative;
    padding:44px clamp(30px,5vw,68px);

    display:flex;
    flex-direction:column;
    justify-content:center;

    background:rgba(255,255,255,.10);
}

.rubio-kicker{
    display:block;
    margin-bottom:13px;

    color:#8b0f1c;
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.16em;
}

.rubio-feature h2{
    margin:0 0 15px;

    color:#171a1f;
    font-size:clamp(30px,4vw,48px);
    line-height:1.05;
    font-weight:400;
    text-transform:uppercase;
    letter-spacing:.025em;
}

.rubio-feature p{
    max-width:560px;
    margin:0;

    color:#4e555d;
    font-size:15px;
    line-height:1.65;
}

.rubio-link{
    display:inline-block;
    align-self:flex-start;
    margin-top:24px;

    color:#8b0f1c;
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.08em;
}

/* Hover muy contenido: mantiene el estilo premium de la página. */
.rubio-feature:hover{
    transform:translateY(-4px);
    border-color:rgba(245,196,0,.34);
    box-shadow:0 25px 52px rgba(20,24,28,.14);
}

.rubio-feature:hover .rubio-link{
    text-decoration:underline;
    text-underline-offset:4px;
}

/* =========================================================
   RESPONSIVE CUADERNILLOS RUBIO
========================================================= */

@media(max-width:850px){
    .rubio-feature{
        grid-template-columns:1fr 1fr;
        min-height:270px;
    }

    .rubio-feature-image{
        min-height:270px;
    }

    .rubio-feature-content{
        padding:34px 28px;
    }
}

@media(max-width:620px){
    .rubio-feature{
        grid-template-columns:1fr;
        margin-top:24px;
    }

    .rubio-feature-image{
        min-height:220px;
    }

    .rubio-feature-content{
        padding:28px 22px 32px;
    }

    .rubio-feature h2{
        font-size:30px;
    }
}