/* ==========================================================================
   Ajustes propios de LogisMAD sobre la plantilla base.
   Se carga después de responsive.css para poder sobrescribirla.
   ========================================================================== */

/* --- Accesos de contacto en el encabezado (escritorio) --- */
/* Van sobre la franja azul de .header-shape::after, que se pinta
   por encima del contenido: de ahí el z-index y los tonos claros. */
.header-cta {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
}

.header-cta-phone {
    display: flex;
    align-items: center;
    gap: 11px;
    color: #ffffff;
    white-space: nowrap;
}
.header-cta-phone:hover { color: #ffffff; opacity: 0.85; }
.header-cta-phone i {
    font-size: 21px;
    line-height: 1;
    color: #a9c8ee;
}
/* Las dos líneas se centran como bloque para que el rótulo y el número
   queden a la misma altura óptica que el botón contiguo. */
.header-cta-phone > span {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
}
.header-cta-phone small {
    font-size: 11px;
    line-height: 1;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #a9c8ee;
}
.header-cta-phone strong { font-size: 16px; font-weight: 700; line-height: 1; }

.header-cta-quote {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #ffffff;
    color: #1a5096;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    padding: 15px 26px;
    border-radius: 30px;
    white-space: nowrap;
    transition: 0.3s;
}
.header-cta-quote:hover { background: #eaf1fa; color: #143d73; }

/* En pantallas lg el espacio es más justo */
@media (min-width: 992px) and (max-width: 1299px) {
    .header-cta { gap: 14px; }
    .header-cta-phone small { display: none; }
    .header-cta-phone strong { font-size: 14px; }
    .header-cta-quote { padding: 13px 20px; font-size: 14px; }
}

/* --- Accesos de contacto en móvil --- */
/* También necesita elevarse sobre ::before y ::after de .header-shape. */
.header-cta-mobile {
    position: relative;
    z-index: 2;
    display: flex;
    border-top: 1px solid #e4e9f0;
    background: #ffffff;
}
.header-cta-mobile a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 13px 6px;
    font-size: 13px;
    font-weight: 600;
    color: #071c35;
    border-right: 1px solid #e4e9f0;
}
.header-cta-mobile a:last-child { border-right: 0; }
.header-cta-mobile a i { font-size: 15px; color: #1a5096; }
.header-cta-mobile a.is-primary { background: #1a5096; color: #ffffff; }
.header-cta-mobile a.is-primary i { color: #ffffff; }

@media (max-width: 359px) {
    .header-cta-mobile a { font-size: 12px; padding: 12px 4px; }
}

/* La franja azul del encabezado se ensancha para dar cabida al teléfono,
   el botón de cotizar y el acceso a rastreo. La plantilla la deja en
   415px (260px en pantallas medianas), insuficiente para tres elementos. */
@media (min-width: 992px) {
    .header-shape::after { width: 415px; }
}
@media (min-width: 992px) and (max-width: 1299px) {
    .header-shape::after { width: 385px; }
}

/* En pantallas de 1200 a 1320px la franja azul alcanza a morder el correo
   de la barra superior: se comprime la separación entre sus datos. */
@media (min-width: 1200px) and (max-width: 1320px) {
    .header-top-area .header-top-info > span { margin-right: 26px; }
}

/* --- "Cotizar" dentro del menú principal --- */
/* Va en color de marca para diferenciarse del resto de la navegación,
   que es de secciones, mientras que este es una llamada a la acción. */
.main-menu nav > ul > li.menu-cotizar > a {
    color: #1a5096;
    font-weight: 700;
}
.main-menu nav > ul > li.menu-cotizar:hover > a { color: #143d73; }

.mean-container .mean-nav ul li.menu-cotizar > a {
    color: #1a5096;
    font-weight: 700;
}

/* --- Botones del carrusel del inicio --- */
/* La plantilla los maqueta como inline-block y en móvil añade un
   margin-top solo a los blancos: con tres botones eso los descuadra
   entre sí. Se distribuyen como flex para que compartan eje y
   separación uniforme al envolver. */
.slider-area .slider-button {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 15px;
}
.slider-area .slider-button a,
.slider-area .slider-button a.white-btn {
    margin: 0;
}

/* Segundo teléfono de oficinas en la página de contacto: separa las
   dos líneas, que la plantilla dejaba pegadas al no contemplar más de una. */
.contact-us-text h4 + h4 { margin-top: 7px; }