/* ============================================================
   Sitioideal — Diseño «Envío» (paqueterías, centros de envío, mensajería y venta de guías) · paso 7.z.30
   Va encima de sitio.css. Como mostrador de paquetería: fondo claro con puntitos de mapa, letra de
   señalamiento de carretera (Overpass) en títulos y textos, números de guía en Overpass Mono, una ruta
   punteada con avión que cruza la portada y la foto en una etiqueta de envío pegada en una caja de cartón
   con su cinta y la calcomanía del horario. Abajo de la portada, una cinta de empaque con sus servicios.
   Los servicios son guías con su número, código de barras, tiempo de entrega y línea de corte; las fotos
   son paquetes de cartón con su cinta y su etiqueta. Los títulos llevan una ruta punteada con su caja.
   Los textos usan un tono tinta (el color principal oscurecido) para que siempre se lean.
   HTML propio: app/vistas/sitio/disenos/envio/
   ============================================================ */

.diseno-envio {
    --en-letra: "Overpass", "Archivo", system-ui, sans-serif;
    --en-mono: "Overpass Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
    --en-fondo: color-mix(in srgb, var(--c-fondo) 40%, #F3F5F9);
    --en-alterna: color-mix(in srgb, var(--c-primario) 6%, #E9EDF3);
    --en-blanco: #FFFFFF;
    --en-tinta: color-mix(in srgb, var(--c-primario) 22%, #141A26);
    --en-principal: var(--c-primario);
    --en-carton: #C99B66;
    --en-carton-claro: #DDB888;
    --en-carton-oscuro: #A97B48;
    --en-cinta: color-mix(in srgb, var(--c-acento) 72%, #E9C46A);
    --en-borde: color-mix(in srgb, var(--en-tinta) 13%, transparent);
    --en-borde-fuerte: color-mix(in srgb, var(--en-tinta) 26%, transparent);
    --en-sombra: 0 16px 30px -22px rgba(20, 26, 38, .55), 0 1px 3px rgba(20, 26, 38, .08);

    /* Superficies (sitio.css) */
    --s-fondo: var(--en-fondo);
    --s-alterna: var(--en-alterna);
    --s-tarjeta: var(--en-blanco);
    --s-tarjeta-alterna: var(--en-blanco);
    --s-encabezado: var(--en-blanco);
    --s-texto: var(--en-tinta);
    --s-titulo: var(--en-principal);
    --s-linea: var(--en-borde);
    --s-linea-fuerte: var(--en-borde-fuerte);

    background: var(--en-fondo);
    font-family: var(--en-letra);
    font-size: 1.05rem;
}

/* El color principal para textos: nunca tan claro que no se lea sobre lo claro */
@supports (color: oklch(from red l c h)) {
    .diseno-envio {
        --en-principal: oklch(from var(--c-primario) min(l, .48) c h);
        --en-tinta: oklch(from color-mix(in srgb, var(--c-primario) 22%, #141A26) min(l, .28) c h);
    }
}

/* Letra de señalamiento: Overpass gruesa */
.diseno-envio h1,
.diseno-envio h2,
.diseno-envio h3,
.diseno-envio h4,
.diseno-envio .logo__nombre,
.diseno-envio .especial__titulo,
.diseno-envio .equipo__titulo,
.diseno-envio .persona__nombre,
.diseno-envio .promocion__titulo,
.diseno-envio .servicio__nombre,
.diseno-envio .sucursal__nombre,
.diseno-envio .redes__titulo {
    font-family: var(--en-letra);
    font-stretch: normal;
}
.diseno-envio h1,
.diseno-envio h2,
.diseno-envio h3,
.diseno-envio h4 { font-weight: 800; letter-spacing: -.01em; }

/* ---------- Encabezado ---------- */
.diseno-envio .encabezado {
    border-bottom: 3px solid var(--c-primario);
    background: color-mix(in srgb, var(--en-blanco) 94%, transparent);
    backdrop-filter: saturate(1.2) blur(10px);
}
.diseno-envio .logo__nombre { color: var(--en-tinta); font-weight: 900; letter-spacing: -.01em; }
.diseno-envio .menu { column-gap: 22px; }
.diseno-envio .menu a { color: var(--en-tinta); font-size: .95rem; font-weight: 700; }
.diseno-envio .menu a:hover { color: var(--en-principal); }

/* ---------- Botones ---------- */
.diseno-envio .boton {
    border-radius: 6px;
    font-family: var(--en-letra);
    font-stretch: normal;
    font-weight: 800;
    letter-spacing: .02em;
    transition: transform .12s ease, box-shadow .12s ease;
}
.diseno-envio .boton--principal {
    border: 2px solid transparent;
    background: var(--c-primario);
    color: var(--c-sobre-primario);
    box-shadow: 0 12px 22px -14px color-mix(in srgb, var(--c-primario) 85%, #000);
}
.diseno-envio .boton--secundario {
    border: 2px solid color-mix(in srgb, var(--en-tinta) 72%, transparent);
    background: var(--en-blanco);
    color: var(--en-tinta);
}
.diseno-envio .boton:hover { transform: translateY(-2px); }
.diseno-envio .boton-chico { border-radius: 6px; font-weight: 800; }

@media (prefers-reduced-motion: reduce) {
    .diseno-envio .boton { transition: none; }
    .diseno-envio .boton:hover { transform: none; }
}

/* ---------- Portada ---------- */
.en-portada {
    position: relative;
    padding-top: clamp(40px, 6vw, 84px);
    overflow: hidden;
    background:
        radial-gradient(circle, color-mix(in srgb, var(--en-tinta) 14%, transparent) 1.2px, transparent 1.6px) 0 0 / 22px 22px,
        radial-gradient(60% 70% at 82% 34%, color-mix(in srgb, var(--c-primario) 10%, transparent), transparent 70%),
        var(--en-fondo);
    color: var(--en-tinta);
}

/* La ruta punteada con su avión (solo adorno) */
.en-ruta {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.en-ruta__linea {
    fill: none;
    stroke: color-mix(in srgb, var(--c-primario) 45%, transparent);
    stroke-dasharray: 2 12;
    stroke-linecap: round;
    stroke-width: 3.5;
    vector-effect: non-scaling-stroke;
}
.en-ruta__avion {
    position: absolute;
    top: 9%;
    right: 3%;
    z-index: 0;
    color: var(--c-primario);
    rotate: 8deg;
    pointer-events: none;
}
.en-ruta__avion .icono { width: 46px; height: 46px; fill: currentColor; stroke: none; }

.en-portada__rejilla {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 44px;
    align-items: center;
    padding-bottom: 46px;
}

@media (min-width: 900px) {
    .en-portada__rejilla { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 56px; }
}

/* El giro como la cabeza de una etiqueta (con su sombra dura) */
.en-giro {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    max-width: 100%;
    margin: 0 0 18px;
    padding: 7px 14px 6px 10px;
    border: 2px solid var(--en-tinta);
    border-radius: 4px;
    background: var(--en-blanco);
    box-shadow: 4px 4px 0 var(--en-tinta);
    color: var(--en-tinta);
    font-family: var(--en-mono);
    font-size: .84rem;
    font-weight: 700;
    letter-spacing: .12em;
    line-height: 1.35;
    text-transform: uppercase;
    box-sizing: border-box;
}
.en-giro .icono { flex: none; width: 20px; height: 20px; color: var(--en-principal); }
.en-giro > span { min-width: 0; overflow-wrap: anywhere; }

.en-portada__nombre {
    margin: 0 0 16px;
    color: var(--en-tinta);
    font-size: clamp(2.5rem, 1.3rem + 4.4vw, 4.9rem);
    font-weight: 900 !important;
    line-height: .98;
    letter-spacing: -.02em !important;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}
.en-portada__nombre--medio { font-size: clamp(2.2rem, 1.2rem + 3.6vw, 4.1rem); }
.en-portada__nombre--largo { font-size: clamp(1.9rem, 1.05rem + 2.9vw, 3.4rem); }

.en-portada__eslogan {
    max-width: 38ch;
    margin: 0 0 28px;
    font-size: clamp(1.12rem, 1rem + .5vw, 1.36rem);
    line-height: 1.5;
}

.en-portada__botones { gap: 12px; }
.en-portada__estado { margin-top: 24px; }
.diseno-envio .estado-ahora--claro { border-radius: 6px; border-color: var(--en-borde); background: var(--en-blanco); box-shadow: var(--en-sombra); }

/* La caja de cartón con su cinta y la etiqueta de envío */
.en-portada__visual {
    position: relative;
    justify-self: center;
    width: min(100%, 440px);
    padding: 26px 22px 46px 8px;
    box-sizing: border-box;
}

.en-caja {
    position: relative;
    padding: 20% 9% 10%;
    border-radius: 6px;
    background:
        repeating-linear-gradient(90deg, rgba(90, 55, 20, .045) 0 2px, transparent 2px 7px),
        linear-gradient(165deg, var(--en-carton-claro), var(--en-carton) 55%, var(--en-carton-oscuro));
    box-shadow: 0 34px 44px -28px rgba(40, 26, 10, .75), inset 0 -10px 18px -12px rgba(60, 35, 10, .45);
    rotate: 2deg;
}

/* La unión de las solapas (arriba) y su raya al centro */
.en-caja__solapa {
    position: absolute;
    top: 14%;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(70, 40, 12, .28);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .25);
}
.en-caja__solapa::after {
    content: "";
    position: absolute;
    bottom: 2px;
    left: 50%;
    width: 2px;
    height: 400%;
    max-height: 64px;
    background: rgba(70, 40, 12, .22);
}

/* La cinta de empaque (del color del acento, con su brillo) */
.en-caja__cinta {
    position: absolute;
    top: -4%;
    left: 50%;
    width: 26%;
    height: 36%;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, .22)),
        color-mix(in srgb, var(--en-cinta) 82%, transparent);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
    translate: -50% 0;
}

.en-etiqueta {
    position: relative;
    z-index: 1;
    padding: 10px 10px 12px;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 4px;
    background: var(--en-blanco);
    box-shadow: 0 14px 22px -14px rgba(20, 15, 5, .55);
    color: var(--en-tinta);
    rotate: -4deg;
}

.en-etiqueta__cabeza {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 10px;
    margin-bottom: 8px;
    padding: 0 2px 7px;
    border-bottom: 2.5px solid var(--en-tinta);
    font-family: var(--en-mono);
    text-transform: uppercase;
}
.en-etiqueta__cabeza span { display: inline-flex; align-items: center; gap: 6px; font-family: var(--en-letra); font-size: 1.15rem; font-weight: 900; letter-spacing: .04em; }
.en-etiqueta__cabeza span .icono { width: 20px; height: 20px; color: var(--en-principal); }
.en-etiqueta__cabeza strong { font-size: .64rem; font-weight: 700; letter-spacing: .14em; opacity: .8; }

.en-etiqueta__foto {
    position: relative;
    aspect-ratio: 16 / 11;
    overflow: hidden;
    border-radius: 2px;
    background: var(--en-alterna);
}
.en-etiqueta__foto picture,
.en-etiqueta__foto picture img { width: 100%; height: 100%; }
.en-etiqueta__foto picture img { object-fit: cover; }

/* Sin foto: la inicial y el giro sobre el color principal */
.en-etiqueta__foto--inicial {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 16px;
    background:
        radial-gradient(circle, rgba(255, 255, 255, .16) 1.2px, transparent 1.6px) 0 0 / 16px 16px,
        var(--c-primario);
    color: var(--c-sobre-primario);
    text-align: center;
}
.en-etiqueta__inicial { font-size: clamp(4.5rem, 3rem + 5vw, 7rem); font-weight: 900; line-height: .9; }
.en-etiqueta__subtitulo { font-family: var(--en-mono); font-size: .76rem; font-weight: 700; letter-spacing: .16em; line-height: 1.4; text-transform: uppercase; overflow-wrap: anywhere; }

.en-etiqueta__pie {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: end;
    margin-top: 10px;
    padding: 8px 2px 0;
    border-top: 1.5px dashed var(--en-borde-fuerte);
}
.en-etiqueta__guia { display: flex; flex-direction: column; font-family: var(--en-mono); font-size: .82rem; font-weight: 700; line-height: 1.25; white-space: nowrap; }
.en-etiqueta__guia small { font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; opacity: .7; }

/* El código de barras (solo adorno) */
.en-codigo,
.en-guia__codigo {
    display: block;
    height: 34px;
    background: linear-gradient(90deg,
        currentColor 0 2px, transparent 2px 4px, currentColor 4px 5px, transparent 5px 8px, currentColor 8px 11px,
        transparent 11px 12px, currentColor 12px 13px, transparent 13px 16px, currentColor 16px 18px, transparent 18px 19px,
        currentColor 19px 20px, transparent 20px 23px, currentColor 23px 26px, transparent 26px 27px, currentColor 27px 28px,
        transparent 28px 31px) 0 0 / 31px 100% repeat-x;
    color: var(--en-tinta);
}

/* La calcomanía redonda del horario: el anillo del color del acento y el centro blanco (siempre se lee) */
.en-calcomania {
    position: absolute;
    top: -46px;
    left: -26px;   /* 7.z.34: arriba a la izquierda de la caja (antes abajo a la derecha, donde la tapaba el botón de «Promociones») */
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    width: 150px;
    height: 150px;
    padding: 10px 6px;
    border: 10px solid var(--c-acento);
    border-radius: 50%;
    background: var(--en-blanco);
    box-shadow: 0 12px 20px -12px rgba(20, 15, 5, .65), inset 0 0 0 2px color-mix(in srgb, var(--c-acento) 70%, transparent);
    color: var(--en-tinta);
    line-height: 1.12;
    text-align: center;
    text-decoration: none;
    rotate: -10deg;
    box-sizing: border-box;
}
.en-calcomania .icono { width: 22px; height: 22px; margin-bottom: 2px; color: var(--en-principal); }
.en-calcomania strong { max-width: 104px; font-size: .8rem; font-weight: 900; letter-spacing: .03em; line-height: 1.05; text-transform: uppercase; }
.en-calcomania span { margin-top: 2px; font-size: .66rem; font-weight: 700; white-space: nowrap; }
.en-calcomania span:last-child { margin-top: 0; font-size: .74rem; font-weight: 800; }
.en-calcomania:hover { filter: brightness(1.05); }

/* La cinta de empaque con sus servicios (solo adorno; se mueve despacio) */
.en-cinta {
    position: relative;
    z-index: 1;
    width: 106%;
    margin: 0 0 0 -3%;
    overflow: hidden;
    border-block: 2px solid rgba(0, 0, 0, .08);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 45%),
        var(--en-cinta);
    color: color-mix(in srgb, var(--c-sobre-acento) 88%, transparent);
    rotate: -1.4deg;
}
.en-cinta__texto {
    display: flex;
    gap: 34px;
    width: max-content;
    padding: 13px 0 11px;
    font-family: var(--en-mono);
    font-size: .92rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    white-space: nowrap;
    animation: en-cinta 48s linear infinite;
}
.en-cinta__texto span { display: inline-flex; align-items: center; gap: 34px; }
.en-cinta__texto span::after { content: ""; width: 9px; height: 9px; border: 2px solid currentColor; rotate: 45deg; opacity: .7; }

@keyframes en-cinta {
    from { translate: 0 0; }
    to { translate: calc(-100% / 3) 0; }
}

@media (prefers-reduced-motion: reduce) {
    .en-cinta__texto { animation: none; }
}

@media (max-width: 599.98px) {
    .en-portada__visual { width: min(100%, 340px); padding: 22px 16px 44px 4px; }
    .en-calcomania { width: 128px; height: 128px; top: auto; left: auto; right: -4px; bottom: -30px; padding: 8px 4px; border-width: 8px; rotate: 10deg; }   /* 7.z.34: en el celular, abajo a la derecha */
    .en-calcomania .icono { width: 18px; height: 18px; }
    .en-calcomania strong { max-width: 92px; font-size: .7rem; }
    .en-calcomania span { font-size: .58rem; }
    .en-calcomania span:last-child { font-size: .64rem; }
    .en-ruta { opacity: .55; }
    .en-ruta__avion { top: 2%; right: 2%; }
    .en-ruta__avion .icono { width: 34px; height: 34px; }
    .en-cinta__texto { font-size: .8rem; padding: 11px 0 9px; }
}

/* ---------- Secciones ---------- */
.diseno-envio .seccion { padding-block: clamp(56px, 7vw, 92px); }

.diseno-envio .seccion h2 {
    color: var(--en-tinta);
    font-size: clamp(1.9rem, 1.3rem + 2vw, 2.75rem);
    font-weight: 900;
    line-height: 1.1;
}

/* Una ruta punteada con su caja sobre cada título */
.diseno-envio .seccion h2::before,
.en-cabeza::before {
    content: "";
    display: block;
    width: 96px;
    height: 14px;
    margin-bottom: 12px;
    background:
        linear-gradient(var(--c-primario), var(--c-primario)) right center / 14px 14px no-repeat,
        repeating-linear-gradient(90deg, var(--c-primario) 0 8px, transparent 8px 14px) left center / calc(100% - 22px) 3px no-repeat;
}

.en-cabeza { margin-bottom: 26px; }
.en-cabeza h2 { margin: 0 !important; }
/* En las secciones propias la ruta va arriba de todo (sobre el antetítulo) */
.diseno-envio .en-cabeza h2::before { content: none; }

.en-antetitulo {
    margin: 0 0 8px;
    color: var(--en-principal);
    font-family: var(--en-mono);
    font-size: .88rem;
    font-weight: 700;
    letter-spacing: .16em;
    line-height: 1.3;
    text-transform: uppercase;
}

/* ---------- Servicios: guías de envío ---------- */
.diseno-envio .catalogo__indice a {
    border: 2px solid color-mix(in srgb, var(--en-tinta) 26%, transparent);
    border-radius: 6px;
    background: var(--en-blanco);
    color: var(--en-tinta);
    font-size: .92rem;
    font-weight: 700;
}
.diseno-envio .catalogo__indice a:hover { border-color: var(--en-principal); color: var(--en-principal); background: var(--en-blanco); }

.en-grupo + .en-grupo { margin-top: 50px; }

.en-grupo__nombre {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 6px;
    color: var(--en-tinta);
    font-size: clamp(1.3rem, 1.1rem + .7vw, 1.65rem);
    font-weight: 900;
}
.en-grupo__nombre .icono {
    flex: none;
    width: 36px;
    height: 36px;
    padding: 7px;
    border-radius: 8px;
    background: var(--c-primario);
    color: var(--c-sobre-primario);
    box-sizing: border-box;
}
.en-grupo__descripcion { max-width: 64ch; margin: 0 0 14px; opacity: .85; }

.en-guias {
    display: grid;
    gap: 24px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}
@media (min-width: 640px) {
    .en-guias { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
    .en-guias { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
}

.en-guia {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--en-borde);
    border-radius: 8px;
    background: var(--en-blanco);
    box-shadow: var(--en-sombra);
}
.en-guia--destacada { border-color: color-mix(in srgb, var(--c-primario) 55%, transparent); box-shadow: var(--en-sombra), 0 0 0 1px color-mix(in srgb, var(--c-primario) 35%, transparent); }

/* La cabeza oscura: «Guía Nº 001» y «Más pedido» */
.en-guia__cabeza {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 10px;
    min-height: 44px;
    padding: 8px 16px;
    background: var(--en-tinta);
    color: #FFFFFF;
    box-sizing: border-box;
}
.en-guia__numero { font-family: var(--en-mono); font-size: .92rem; font-weight: 700; letter-spacing: .06em; }
.en-guia__numero small { margin-right: 4px; font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; opacity: .7; }
.en-guia__sello {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px 2px;
    border-radius: 4px;
    background: var(--en-blanco);   /* blanco con raya del acento: siempre se lee, sea cual sea el acento */
    box-shadow: inset 0 -3px 0 var(--c-acento);
    color: var(--en-tinta);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.en-guia__sello .icono { width: 13px; height: 13px; color: var(--c-acento); fill: currentColor; }

.en-guia__codigo { height: 20px; margin: 12px 16px 0; opacity: .82; }

.en-guia__foto {
    position: relative;
    margin: 12px 16px 0;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: 4px;
    background: var(--en-alterna);
}
.en-guia__foto img { width: 100%; height: 100%; object-fit: cover; }

.en-guia__cuerpo { flex: 1; padding: 14px 16px 4px; }
.en-guia__nombre { margin: 0; color: var(--en-tinta); font-size: 1.22rem; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.en-guia__descripcion { margin: 6px 0 0; font-size: 1rem; line-height: 1.55; opacity: .88; }
.en-guia__tiempo {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 10px 0 0;
    padding: 4px 12px 3px 9px;
    border-radius: 999px;
    background: var(--en-alterna);
    color: var(--en-tinta);
    font-size: .92rem;
    font-weight: 700;
}
.en-guia__tiempo small { font-family: var(--en-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.en-guia__tiempo .icono { flex: none; width: 18px; height: 18px; color: var(--en-principal); }
.en-guia .ficha-ver { margin-top: 10px; }

/* El pie de la guía: la línea de corte con sus muescas, el precio y «Cotizar» */
.en-guia__pie {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    padding: 14px 16px 16px;
    border-top: 2px dashed var(--en-borde-fuerte);
}
.en-guia__pie::before,
.en-guia__pie::after {
    content: "";
    position: absolute;
    top: -11px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--s-seccion);
    box-shadow: inset 0 0 0 1px var(--en-borde);
}
.en-guia__pie::before { left: -11px; }
.en-guia__pie::after { right: -11px; }

.en-precio { display: flex; flex-direction: column; margin: 0; color: var(--en-principal); line-height: 1.05; }
.en-precio small { font-family: var(--en-mono); font-size: .66rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; opacity: .8; }
.en-precio strong { font-size: 1.62rem; font-weight: 900; letter-spacing: -.01em; white-space: nowrap; }
.en-precio .en-precio__unidad { margin-top: 2px; font-family: var(--en-letra); font-size: .78rem; letter-spacing: 0; text-transform: none; }
/* Sin precio: la nota */
.en-precio--sin strong,
.en-precio .en-precio__sin { font-size: 1rem; font-weight: 800; white-space: normal; }

.en-cotizar {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 16px;
    border-radius: 6px;
    background: var(--c-primario);
    color: var(--c-sobre-primario);
    font-size: .88rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}
.en-cotizar .icono { width: 16px; height: 16px; }
.en-cotizar:hover { filter: brightness(1.08); }

/* ---------- Galería: paquetes de cartón con su cinta y su etiqueta ---------- */
.en-paquetes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 16px;
    margin: 0;
    padding: 10px 4px 4px;
    list-style: none;
}
@media (min-width: 700px) {
    .en-paquetes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 24px; }
}
@media (min-width: 960px) {
    .en-paquetes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.galeria__mas > .en-paquetes { margin-top: 22px; }

.diseno-envio .en-paquete__enlace {
    position: relative;
    display: block;
    padding: 10px 10px 10px;
    overflow: visible;
    border-radius: 4px;
    background:
        repeating-linear-gradient(90deg, rgba(90, 55, 20, .045) 0 2px, transparent 2px 7px),
        linear-gradient(165deg, var(--en-carton-claro), var(--en-carton));
    box-shadow: var(--en-sombra);
    color: var(--en-tinta);
    text-decoration: none;
}
.diseno-envio .en-paquete__enlace:focus-visible { outline: 3px solid var(--en-principal); outline-offset: 4px; }

/* La tira de cinta de arriba */
.en-paquete__enlace::before {
    content: "";
    position: absolute;
    top: -9px;
    left: 30%;
    z-index: 2;
    width: 40%;
    height: 22px;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 40%),
        color-mix(in srgb, var(--en-cinta) 85%, transparent);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
    rotate: -2deg;
    pointer-events: none;
}

.en-paquete__foto { position: relative; display: block; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 2px; background: var(--en-alterna); }
.en-paquete__foto img { width: 100%; height: 100%; object-fit: cover; }

.en-paquete__etiqueta {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
    margin-top: 9px;
    padding: 6px 8px 5px;
    border-radius: 2px;
    background: var(--en-blanco);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}
.en-paquete__numero { flex: none; font-family: var(--en-mono); font-size: .74rem; font-weight: 700; letter-spacing: .06em; }
.en-paquete__pie { min-width: 0; overflow: hidden; font-size: .86rem; font-weight: 600; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 599.98px) {
    .diseno-envio .en-paquete__enlace { padding: 8px; }
    .en-paquete__etiqueta { flex-direction: column; gap: 1px; padding: 5px 7px 4px; }
    .en-paquete__pie { max-width: 100%; font-size: .8rem; }
    .en-paquete__enlace::before { height: 18px; top: -7px; }
}

/* ---------- Lo demás: tarjetas blancas con borde fino ---------- */
.diseno-envio .testimonio,
.diseno-envio .promocion,
.diseno-envio .pregunta,
.diseno-envio .contacto__item,
.diseno-envio .sucursal,
.diseno-envio .especial__punto,
.diseno-envio .persona,
.diseno-envio .servicio,
.diseno-envio .destacado-tarjeta { border-color: var(--en-borde); border-radius: 8px; box-shadow: var(--en-sombra); }
.diseno-envio .promocion__foto { border-radius: 8px 8px 0 0; }
.diseno-envio .testimonio__texto { font-size: 1.05rem; line-height: 1.6; }
.diseno-envio .testimonio > .icono { color: var(--en-principal); opacity: .25; }
.diseno-envio .testimonio__iniciales,
.diseno-envio .contacto__icono,
.diseno-envio .especial__marca,
.diseno-envio .persona__foto--iniciales,
.diseno-envio .pregunta__signo { border-radius: 6px; background: var(--en-alterna); color: var(--en-principal); }
.diseno-envio .nosotros__foto img { border: 8px solid #fff; border-radius: 4px; box-shadow: var(--en-sombra); }
.diseno-envio .nosotros__desde { border-radius: 6px; background: var(--en-blanco); border: 1px solid var(--en-borde); color: var(--en-tinta); }
.diseno-envio .nosotros__desde strong,
.diseno-envio .nosotros__desde .icono { color: var(--en-principal); }
.diseno-envio .galeria__ver-mas { border-radius: 6px; }
.diseno-envio .mapa { border: 6px solid #fff; border-radius: 8px; box-shadow: var(--en-sombra); }

/* El horario como tablero de mostrador: letra de guía y el día de hoy marcado */
.diseno-envio .horario__tabla { overflow: hidden; border: 2px solid var(--en-tinta); border-radius: 8px; background: var(--en-blanco); }
.diseno-envio .horario__tabla th,
.diseno-envio .horario__tabla td { padding-inline: 18px; }
.diseno-envio .horario__tabla td { font-family: var(--en-mono); font-weight: 700; }
.diseno-envio .horario__tabla tr:last-child th,
.diseno-envio .horario__tabla tr:last-child td { border-bottom: 0; }
.diseno-envio .horario__hoy th,
.diseno-envio .horario__hoy td { background: color-mix(in srgb, var(--c-acento) 18%, var(--en-blanco)); }
.diseno-envio .horario__etiqueta { border-radius: 4px; background: var(--c-primario); color: var(--c-sobre-primario); }

.diseno-envio .pie { border-top: 8px solid var(--en-cinta); background: var(--en-tinta); color: rgba(243, 245, 249, .84); }
.diseno-envio .barra-acciones { background: color-mix(in srgb, var(--en-blanco) 95%, transparent); backdrop-filter: blur(10px); }
.diseno-envio .barra-acciones__boton--principal { border-radius: 6px; font-weight: 800; }

/* ---------- Imagen generada con IA (7.j) ---------- */
/* Dentro de la etiqueta, arriba (abajo va la guía) */
.en-etiqueta__foto > .marca-ia--foto { top: 8px; bottom: auto; }