/* =========================================================
   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;
    }
}

/* =========================================================
   PAQUETERÍA - BLOQUES ESPECÍFICOS
========================================================= */

.carrier-section{
    padding:42px 0 12px;
}

.carrier-head{
    width:min(1180px,92%);
    margin:0 auto 24px;
    text-align:center;
}

.carrier-head span{
    display:block;
    margin-bottom:8px;
    color:#8b0f1c;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.20em;
}

.carrier-head h2{
    margin:0;
    font-size:clamp(28px,4vw,42px);
    font-weight:400;
}

.carrier-head p{
    max-width:700px;
    margin:12px auto 0;
    color:#555e67;
    font-size:14px;
    line-height:1.6;
}

/* =========================================================
   OPERADORES DE PAQUETERÍA - DISTRIBUCIÓN DE TARJETAS
   Escritorio: 5 columnas x 2 filas para los 10 operadores.
   Los breakpoints inferiores se mantienen sin cambios:
   2 columnas en tablet/móvil, preservando el responsive actual.
========================================================= */

.carrier-grid{
    width:min(1280px,94%);
    margin:auto;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:14px;
}

.carrier-card{
    min-height:112px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:18px;
    border:1px solid rgba(255,255,255,.42);
    background:rgba(255,255,255,.18);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    box-shadow:0 14px 30px rgba(20,24,28,.05);
    transition:
        transform .22s ease,
        background .22s ease,
        border-color .22s ease;
}

.carrier-card:hover{
    transform:translateY(-3px);
    background:rgba(255,255,255,.28);
    border-color:rgba(139,15,28,.18);
}

.carrier-card img{
    display:block;
    /* Tamaño ligeramente más contenido para la cuadrícula de 5 columnas. */
    max-width:135px;
    max-height:50px;
    width:auto;
    height:auto;
    object-fit:contain;
    filter:saturate(.96);
}

.carrier-fallback{
    display:none;
    color:#2a2f34;
    font-size:15px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.06em;
}

.carrier-card img.is-missing{
    display:none;
}

.carrier-card img.is-missing + .carrier-fallback{
    display:block;
}

.parcel-actions{
    width:min(1180px,92%);
    margin:34px auto 0;
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:18px;
}

.parcel-panel{
    padding:26px;
    border:1px solid rgba(255,255,255,.42);
    background:rgba(255,255,255,.16);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
}

.parcel-panel h3{
    margin:0 0 10px;
    color:#8b0f1c;
    font-size:18px;
    font-weight:500;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.parcel-panel p{
    color:#515962;
    font-size:14px;
    line-height:1.65;
}

.parcel-list{
    margin:16px 0 0;
    padding:0;
    list-style:none;
    display:grid;
    gap:10px;
}

.parcel-list li{
    position:relative;
    padding-left:18px;
    color:#343a40;
    font-size:14px;
}

.parcel-list li::before{
    content:"";
    position:absolute;
    left:0;
    top:.7em;
    width:6px;
    height:6px;
    border-radius:50%;
    background:#8b0f1c;
}

.parcel-location{
    margin-top:18px;
    display:grid;
    gap:8px;
}

.parcel-location strong{
    color:#171a1f;
    font-size:15px;
}

.parcel-location span{
    color:#555e67;
    font-size:14px;
}

.parcel-buttons{
    margin-top:20px;
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

.parcel-btn-secondary{
    background:transparent;
    color:#8b0f1c;
}

.parcel-btn-secondary:hover{
    background:#8b0f1c;
    color:#fff;
}

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

    .parcel-actions{
        grid-template-columns:1fr;
    }
}

@media(max-width:520px){
    .carrier-grid{
        grid-template-columns:1fr 1fr;
        gap:10px;
    }

    .carrier-card{
        min-height:92px;
        padding:14px;
    }

    .carrier-card img{
        max-width:110px;
        max-height:42px;
    }
}


/* =========================================================
   FONDO EXCLUSIVO PAQUETERÍA
========================================================= */

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

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

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

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


/* =========================================================
   PAQUETERÍA · IGUALACIÓN ÓPTICA DE LOGOS
   Los archivos tienen proporciones distintas. Estos tamaños
   compensan visualmente cada marca sin recortar las imágenes.
========================================================= */

.carrier-card img{
    width:125px;
    height:50px;
    max-width:100%;
    max-height:50px;
    object-fit:contain;
}

/* Correcciones ópticas individuales */
.carrier-card img[alt="GLS"]{ width:92px; height:42px; }
.carrier-card img[alt="UPS"]{ width:72px; height:48px; }
.carrier-card img[alt="DHL"]{ width:118px; height:42px; }
.carrier-card img[alt="Correos Express"]{ width:126px; height:46px; }
.carrier-card img[alt="MRW"]{ width:112px; height:44px; }
.carrier-card img[alt="CTT"]{ width:105px; height:44px; }
.carrier-card img[alt="Celeritas"]{ width:122px; height:44px; }
.carrier-card img[alt="Amazon"]{ width:105px; height:44px; }
.carrier-card img[alt="Nacex"]{ width:116px; height:44px; }
.carrier-card img[alt="Ecoscooting"]{ width:122px; height:44px; }

@media(max-width:520px){
    .carrier-card img{
        max-width:110px;
        max-height:44px;
    }

    .carrier-card img[alt="GLS"]{ max-width:88px; }
    .carrier-card img[alt="UPS"]{ max-width:68px; }
}


/* =========================================================
   PAQUETERÍA · MAPA INTEGRADO
   Sustituye la dirección escrita por una referencia visual
   directa a Google Maps, manteniendo el estilo transparente.
========================================================= */

.parcel-map{
    width:100%;
    height:190px;
    margin-top:18px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.42);
    background:rgba(255,255,255,.10);
}

.parcel-map iframe{
    display:block;
    width:100%;
    height:100%;
    border:0;
    filter:saturate(.72) contrast(.94);
}

@media(max-width:620px){
    .parcel-map{
        height:180px;
    }
}