/* ============================================================
   ROUTE PAGE STYLES — horizont-atlantic
   Plantilla SEO unica para 37 rutas mudanzas-de-{origen}-a-{destino}.
   Cargado desde route_view.php via View::registerCssFile.
   ============================================================ */

/* ---------- HERO ---------- */
/* Full-bleed: el hero rompe el padding/margin de cualquier wrapper padre
   (.page-wraper, .page-content, etc.) y ocupa el 100% del viewport,
   ignorando la scrollbar para evitar el overflow horizontal con 100vw. */
.route-hero {
    position: relative;
    min-height: 480px;
    background-color: #6c7785;
    color: #fff;
    display: flex;
    align-items: center;
    overflow: hidden;
    /* Romper fuera de wrappers con max-width o padding lateral */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
/* Si el navegador tiene scrollbar visible, calc(50vw) la incluye y causa
   overflow horizontal. Forzamos el hero al ancho del documento, no del viewport. */
@supports (width: 100dvw) {
    .route-hero {
        width: 100dvw;
        margin-left: calc(50% - 50dvw);
        margin-right: calc(50% - 50dvw);
    }
}
/* Pseudo-element con la imagen + blur sutil: disimula la baja resolucion
   de las imagenes de fallback (350x250) cuando se escalan en pantallas grandes.
   El scale(1.06) compensa los bordes borrosos del blur para que la imagen
   cubra todo el contenedor sin dejar bordes vacios. */
.route-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--route-hero-bg);
    background-size: cover;
    background-position: center;
    filter: blur(2.5px) saturate(1.08);
    transform: scale(1.06);
    z-index: 0;
    will-change: transform;
}
.route-hero-overlay {
    position: absolute; inset: 0;
    z-index: 1;
    background: linear-gradient(135deg, rgba(45,55,70,0.72) 0%, rgba(75,85,100,0.48) 50%, rgba(55,65,80,0.65) 100%);
}
.route-hero-content { position: relative; z-index: 2; padding: 70px 0 60px; }
.route-breadcrumb { font-size: 13px; margin-bottom: 18px; opacity: .9; }
.route-breadcrumb a { color: #fff; text-decoration: none; }
.route-breadcrumb a:hover { text-decoration: underline; }
.route-breadcrumb span { margin: 0 6px; }
.route-hero-title {
    font-size: clamp(28px, 4vw, 46px);
    font-weight: 800;
    line-height: 1.35;
    margin: 0 0 14px;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.route-hero-title strong {
    color: #032843;
    background: #fff;
    padding: 2px 12px;
    border-radius: 6px;
    font-weight: 800;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
    display: inline-block;
    margin: 0 2px;
}
.route-hero-subtitle { font-size: 16px; max-width: 720px; opacity: .96; margin: 6px 0 24px; text-shadow: 0 1px 4px rgba(0,0,0,0.25); }
.route-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- BOTONES HERO ---------- */
.route-btn {
    display: inline-block;
    padding: 13px 26px;
    border-radius: 6px;
    text-decoration: none !important;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .5px;
    text-transform: uppercase;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.route-btn-primary { background: #032843; color: #fff !important; box-shadow: 0 4px 14px rgba(0,0,0,0.22); }
.route-btn-primary:hover { background: #054a7a; transform: translateY(-2px); box-shadow: 0 8px 22px rgba(3,40,67,0.45); }
.route-btn-outline { background: rgba(255,255,255,0.08); color: #fff !important; border: 2px solid rgba(255,255,255,0.7); backdrop-filter: blur(2px); }
.route-btn-outline:hover { background: rgba(255,255,255,0.15); border-color: #fff; }
.route-btn-outline .fa { margin-right: 6px; }

/* ---------- FULL-BLEED SECTIONS (rompen wrapper padre) ---------- */
.route-stats,
.route-section,
.route-services,
.route-why,
.route-tips,
.route-faq,
.route-otras,
.route-provincias,
.route-cta-form-head {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
@supports (width: 100dvw) {
    .route-stats,
    .route-section,
    .route-services,
    .route-why,
    .route-tips,
    .route-faq,
    .route-otras,
    .route-provincias,
    .route-cta-form-head {
        width: 100dvw;
        margin-left: calc(50% - 50dvw);
        margin-right: calc(50% - 50dvw);
    }
}

/* ---------- STATS FLOATING CARDS ---------- */
.route-stats { background: #f6f8fb; padding: 40px 0; position: relative; }
.route-stats-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
    margin-top: -56px;
    position: relative;
    z-index: 5;
}
.route-stat-card {
    background: #fff;
    border-radius: 12px;
    padding: 28px 16px 22px;
    text-align: center;
    box-shadow: 0 6px 22px rgba(3,40,67,0.10);
    transition: transform .25s ease, box-shadow .25s ease;
    display: flex; flex-direction: column; align-items: center;
}
.route-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(3,40,67,0.16);
}
.route-stat-icon {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #032843 0%, #054a7a 100%);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
    margin-bottom: 14px;
    box-shadow: 0 4px 12px rgba(3,40,67,0.30);
}
.route-stat-num {
    display: block;
    font-size: 28px;
    font-weight: 800;
    color: #032843;
    line-height: 1.1;
    letter-spacing: -0.5px;
}
.route-stat-lbl {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    color: #64748b;
    margin-top: 6px;
    letter-spacing: 0.8px;
    font-weight: 600;
}

/* ---------- SECCIONES (titulos + intro) ---------- */
.route-section { padding: 70px 0; }
.route-section .section-head h2 { color: #032843; font-weight: 800; font-size: clamp(22px, 3vw, 32px); line-height: 1.25; margin: 0 0 14px; }
.route-section .section-head.text-white h2 { color: #fff; }
.route-section-intro { max-width: 760px; margin: 0 auto 36px; color: #475569; line-height: 1.6; font-size: 16px; }

/* ---------- SERVICE CARDS (6 servicios) ---------- */
.route-services { background: #f6f8fb; }
.route-services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 40px; }
.route-service-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(3,40,67,0.08);
    transition: transform .25s ease, box-shadow .25s ease;
    display: flex; flex-direction: column;
}
.route-service-card:hover { transform: translateY(-5px); box-shadow: 0 12px 28px rgba(3,40,67,0.15); }
.route-service-img-wrap {
    position: relative;
    margin: 0;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #e2e8f0;
}
.route-service-img-wrap img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}
.route-service-card:hover .route-service-img-wrap img { transform: scale(1.06); }
.route-service-icon-overlay {
    position: absolute;
    left: 18px; bottom: -22px;
    width: 52px; height: 52px;
    border-radius: 12px;
    background: #032843;
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
    box-shadow: 0 6px 16px rgba(3,40,67,0.35);
    z-index: 2;
}
.route-service-body { padding: 34px 24px 26px; flex: 1; }
.route-service-body h3 { color: #032843; font-size: 17px; font-weight: 700; margin: 0 0 10px; line-height: 1.3; }
.route-service-body p { color: #475569; font-size: 14.5px; line-height: 1.6; margin: 0; }

/* ---------- WHY CHOOSE US (foto contenedor Horizont + mascara gris) ---------- */
.route-why {
    position: relative;
    background-image: url('/wp-content/uploads/2021/09/transporte-de-contenedor-a-Canarias.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: scroll;
    background-color: #5a6573;
    /* Mascara grisacea: combina la foto con un tono gris-azulado, desaturando
       sin perder por completo el color original del contenedor. */
    background-blend-mode: luminosity;
    overflow: hidden;
}
/* Capa adicional con gradient gris suave para legibilidad de las cards */
.route-why::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(60,70,85,0.55) 0%, rgba(80,90,105,0.35) 50%, rgba(55,65,80,0.50) 100%);
    z-index: 0;
    pointer-events: none;
}
.route-why .container { position: relative; z-index: 1; }

.route-why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* Gap aumentado: 28px horizontal + 36px vertical para que las cards
       respiren entre filas (antes estaban casi pegadas) */
    column-gap: 28px;
    row-gap: 36px;
    margin-top: 36px;
}
.route-why-item {
    color: #1a2a3f;
    text-align: center;
    padding: 32px 24px;
    background: rgba(255,255,255,0.92);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(15,36,54,0.18);
    backdrop-filter: blur(2px);
    transition: transform .25s ease, box-shadow .25s ease;
}
.route-why-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(15,36,54,0.25);
}
.route-why-item .fa { font-size: 36px; color: #032843; margin-bottom: 14px; }
.route-why-item h3 { color: #032843; font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin: 0 0 10px; }
.route-why-item p { color: #475569; font-size: 14px; line-height: 1.6; margin: 0; }
.route-why .section-head h2 {
    background: rgba(255,255,255,0.92);
    display: inline-block;
    padding: 12px 28px;
    border-radius: 10px;
    color: #032843 !important;
    box-shadow: 0 8px 24px rgba(15,36,54,0.15);
}

/* ---------- TIPS ---------- */
.route-tips { background: #fff; }
.route-tips-list { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 32px; }
.route-tip { display: flex; gap: 18px; padding: 22px; background: #f6f8fb; border-radius: 10px; border-left: 4px solid #032843; }
.route-tip-num { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; background: #032843; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; }
.route-tip h3 { color: #032843; font-size: 16px; font-weight: 700; margin: 0 0 6px; }
.route-tip p { color: #475569; font-size: 14px; line-height: 1.55; margin: 0; }

/* ---------- FAQ con signo "?" decorativo ---------- */
.route-faq { background: #f6f8fb; overflow: hidden; }

/* Layout: aside izquierdo con "?" + accordion derecha (desktop).
   En tablet/movil el aside pasa a background absoluto detras del accordion. */
.route-faq-layout {
    display: grid;
    grid-template-columns: minmax(180px, 0.4fr) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
    margin-top: 36px;
    position: relative;
}

/* Signo "?" gigante decorativo */
.route-faq-mark {
    font-family: 'Georgia', 'Playfair Display', serif;
    font-size: clamp(180px, 22vw, 360px);
    font-weight: 900;
    line-height: 1;
    color: #032843;
    opacity: 0.92;
    text-align: center;
    user-select: none;
    pointer-events: none;
    text-shadow: 0 8px 24px rgba(3, 40, 67, 0.18);
    position: sticky;
    top: 100px;
    align-self: start;
}

.route-faq .faq-prod-accordion { position: relative; z-index: 2; }

/* Tablet (≤ 991px): el "?" se hace background, las FAQ se centran */
@media (max-width: 991px) {
    .route-faq-layout {
        display: block;
        position: relative;
        max-width: 760px;
        margin: 36px auto 0;
        padding: 0 16px;
    }
    .route-faq-mark {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: clamp(280px, 60vw, 480px);
        opacity: 0.07;
        color: #032843;
        text-shadow: none;
        z-index: 0;
        pointer-events: none;
    }
    .route-faq .faq-prod-accordion {
        position: relative;
        z-index: 2;
    }
}

/* Movil (≤ 575px): mantener layout centrado con "?" mas tenue */
@media (max-width: 575px) {
    .route-faq-layout { padding: 0 8px; }
    .route-faq-mark { font-size: clamp(220px, 70vw, 320px); opacity: 0.06; }
}

/* ---------- OTRAS ISLAS (cluster links) ---------- */
.route-otras { background: #fff; }
.route-otras-grid { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 24px; }
.route-otra-chip { display: inline-block; padding: 10px 18px; border-radius: 24px; background: #f6f8fb; color: #032843 !important; text-decoration: none !important; font-size: 13.5px; font-weight: 600; border: 1px solid #e2e8f0; transition: background .2s ease, border-color .2s ease, transform .2s ease; }
.route-otra-chip:hover { background: #032843; color: #fff !important; border-color: #032843; transform: translateY(-2px); }

/* ---------- PROVINCIAS (chips) ---------- */
.route-provincias { background: #f6f8fb; }
.route-provincias-list { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 22px; }
.route-provincia { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border-radius: 6px; background: #fff; color: #032843; font-weight: 600; font-size: 14px; box-shadow: 0 1px 4px rgba(3,40,67,0.07); }
.route-provincia .fa { color: #4FA8DC; }

/* ---------- CTA pre-formulario presupuesto ---------- */
.route-cta-form-head { background: #fff; padding: 70px 0 30px; }
.route-cta-form-head .section-head h2 { color: #032843; font-weight: 800; font-size: clamp(22px, 3vw, 32px); line-height: 1.25; margin: 0 0 14px; }
.route-cta-form-head .section-head p { color: #475569; font-size: 16px; line-height: 1.55; margin: 0; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 991px) {
    .route-services-grid, .route-why-grid { grid-template-columns: repeat(2, 1fr); }
    .route-tips-list { grid-template-columns: 1fr; }
    .route-stats-grid { grid-template-columns: repeat(3, 1fr); margin-top: -40px; gap: 14px; }
    .route-cta-form-head { padding: 50px 0 20px; }
}
@media (max-width: 575px) {
    .route-hero { min-height: 380px; }
    .route-services-grid, .route-why-grid { grid-template-columns: 1fr; }
    .route-stats-grid { grid-template-columns: 1fr 1fr; gap: 12px; margin-top: -32px; }
    .route-stats-grid .route-stat-card:last-child { grid-column: 1 / -1; }
    .route-stat-card { padding: 22px 12px 16px; }
    .route-stat-icon { width: 44px; height: 44px; font-size: 18px; margin-bottom: 10px; }
    .route-stat-num { font-size: 22px; }
    .route-section { padding: 50px 0; }
    .route-cta-form-head { padding: 40px 0 16px; }
}