/* Scroll offsets for anchor links */
section, footer, #proceso, #blog, #preguntas, #contacto {
    scroll-margin-top: 80px; /* Default offset */
}
#soluciones {
    scroll-margin-top: -50px; /* offset upwards or downwards */
}
/* Ojo: NO usar scroll-behavior: smooth aquí. El scroll suave nativo se queda
   bloqueado en estas páginas (los enlaces de ancla dejaban de funcionar).
   El suavizado lo hace JS por requestAnimationFrame (index.html y subpage.js). */
html {
    scroll-behavior: auto;
}

:root {
    --primary-font: 'Inter', sans-serif;
    --text-dark: #111111;
    --text-light: #ffffff;
    --nav-bg: rgba(255, 255, 255, 0.65);
    --brand-red: #d92037;
    --brand-navy: #051e3a;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--primary-font);
    background-color: #ffffff;
}

.hero {
    margin: 8px 8px 40px 8px; /* Added bottom margin for dots */
    height: 95vh; /* Extended height */
    min-height: 800px;
    border-radius: 32px;
    padding: 90px 16px 16px 16px; /* espacio para la navbar fija */
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    transition: var(--transition);
}

.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    border-radius: 32px;
    background-color: #111;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.6));
    z-index: -1;
    border-radius: 32px;
}

/* Navbar */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--nav-bg);
    /* La barra acompaña siempre al usuario (el hero le compensa con padding-top) */
    position: fixed;
    top: 12px;
    left: 16px;
    right: 16px;
    z-index: 1200;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 4px 4px 4px 20px; /* Extremely compact navbar */
    border-radius: 100px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    transition: var(--transition);
}

.logo {
    font-size: 22px;
    font-weight: 500;
    color: var(--text-dark);
    letter-spacing: -0.5px;
    flex: 1;
    white-space: nowrap;
}

.logo-img {
    height: 34px;
    width: auto;
    display: block;
}

.footer-logo .logo-img {
    height: 140px;
}

/* Nombre completo en escritorio, "RS" en tablet y móvil (se invierte en la
   media query de 1024px, donde el nav ya no cabe con el nombre entero). */
.logo-short { display: none; }

.nav-links {
    list-style: none;
    display: flex;
    gap: 26px;
    justify-content: center;
}

.nav-links li a {
    text-decoration: none;
    color: #4a4a4a;
    font-weight: 400;
    font-size: 15px;
    white-space: nowrap;
    transition: color 0.3s ease;
}

.nav-links li a:hover {
    color: var(--text-dark);
}

.arrow {
    font-size: 12px;
    margin-left: 4px;
}

.btn-container {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.btn-primary {
    background-color: #111111;
    color: #ffffff;
    text-decoration: none;
    padding: 14px 24px;
    border-radius: 100px;
    font-weight: 400;
    font-size: 15px;
    border: 1px solid #111111;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: #ffffff;
    color: #111111;
}

/* Hero Content */
.hero-content {
    flex-grow: 1;
    display: flex;
    justify-content: space-between;
    padding-top: 40px;
}

.hero-left {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 32px;
}

.btn-secondary {
    background-color: #ffffff;
    color: #000000;
    text-decoration: none;
    padding: 14px 28px;
    border-radius: 100px;
    font-weight: 400;
    font-size: 16px;
    border: 1px solid #ffffff;
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    background-color: #000000;
    color: #ffffff;
    padding: 14px 44px;
    border-color: #000000;
}

.hero-left h1 {
    color: #ffffff;
    font-size: 76px;
    line-height: 1.05;
    font-weight: 600;
    letter-spacing: -2px;
}

.hero-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
}

.right-top {
    height: 20%;
}

.right-middle {
    flex-grow: 1;
    display: flex;
    align-items: center;
}

.description {
    color: #ffffff;
    text-align: right;
    font-size: 18px;
    line-height: 1.5;
    font-weight: 400;
    opacity: 0.9;
}

.right-bottom {
    display: flex;
    align-items: flex-end;
}

.stat {
    color: #ffffff;
    font-size: 160px;
    font-weight: 500;
    line-height: 0.8;
    letter-spacing: -4px;
    margin-right: -8px; /* Alignment tweak based on visual */
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .nav-links {
        display: none;
    }

    /* El nombre completo no cabe junto al menú hamburguesa: volvemos a "RS" */
    .logo-full { display: none; }
    .logo-short { display: inline; }
    .hero-left h1 {
        font-size: 56px;
    }
    .stat {
        font-size: 120px;
    }
}

@media (max-width: 768px) {
    .hero-content {
        flex-direction: column;
        justify-content: flex-end;
        gap: 40px;
    }
    .hero-right {
        align-items: flex-start;
        justify-content: flex-end;
        gap: 24px;
    }
    .right-top {
        display: none;
    }
    .right-middle {
        flex-grow: 0;
    }
    .description {
        text-align: left;
    }
    .hero {
        padding: 24px;
    }
}

/* Impact Section */
.impact-section {
    padding: 120px 5%;
    display: flex;
    flex-direction: column;
    gap: 80px;
}

.impact-content {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 60px;
    align-items: center;
}

.impact-left {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
}

.avatars {
    display: flex;
}

.avatars img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 3px solid #fff;
    margin-left: -20px;
    object-fit: cover;
}

.avatars img:first-child {
    margin-left: 0;
}

.impact-left-text {
    color: #4a4a4a;
    font-size: 15px;
    line-height: 1.5;
    max-width: 160px;
}

.impact-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
}

.badge {
    border: 1px solid #111;
    border-radius: 100px;
    padding: 10px 24px;
    font-size: 15px;
    color: #111;
}

.impact-right h2 {
    font-size: 40px;
    font-weight: 400;
    line-height: 1.25;
    color: #111;
    letter-spacing: -1px;
}

@media (max-width: 992px) {
    .impact-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .impact-right h2 {
        font-size: 32px;
    }
}

/* Solar Section */
.solar-section {
    margin: 8px;
    border-radius: 20px;
    padding: 80px 40px 0 40px;
    display: flex;
    flex-direction: column;
    min-height: 1200px; /* Made twice as long */
    position: relative;
    overflow: hidden;
    background-color: #0d0d0d; /* mientras el vídeo no ha cargado */
}

/* Vídeo de fondo de sección (el fondo era una foto fija) */
.section-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.section-video-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.65));
}

/* Todo el contenido de la sección va por encima del vídeo */
.solar-section > *:not(.section-video):not(.section-video-overlay) {
    position: relative;
    z-index: 2;
}

.solar-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 80px;
}

.solar-header h2 {
    color: #ffffff;
    font-size: 56px;
    font-weight: 500;
    line-height: 1.1;
    max-width: 500px;
    letter-spacing: -1px;
}

.solar-header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    gap: 24px;
    max-width: 320px;
}

.solar-header-right p {
    color: #ffffff;
    font-size: 16px;
    line-height: 1.5;
    opacity: 0.9;
}

.solar-cards {
    display: flex;
    gap: 24px;
    margin-top: auto; /* push to bottom */
    margin-bottom: 40px; /* Keep inside the image */
    padding: 0 40px;
}

.solar-card {
    background-color: #ffffff;
    border-radius: 24px;
    padding: 36px;
    flex: 1;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
    position: relative;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.solar-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.22);
}

.solar-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 28px;
}

/* El icono vive en una cápsula que se invierte al pasar el cursor */
.solar-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #f2f2f2;
    color: #111111;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background-color 0.5s ease, color 0.5s ease;
}

.solar-card:hover .solar-icon {
    background-color: #111111;
    color: #ffffff;
}

.solar-tag {
    font-size: 13px;
    color: #777777;
    border: 1px solid #e6e6e6;
    border-radius: 100px;
    padding: 6px 14px;
    white-space: nowrap;
}

.solar-card h3 {
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 14px;
    color: #111111;
    letter-spacing: -0.5px;
}

.solar-card p {
    color: #555555;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 28px;
}

/* La llamada a la acción queda al pie: así las tres tarjetas la alinean aunque
   sus textos tengan distinta longitud. */
.solar-cta {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: #111111;
}

.solar-arrow {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #111111;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.solar-card:hover .solar-arrow {
    transform: translateX(6px);
}

@media (max-width: 1024px) {
    .solar-header {
        flex-direction: column;
        gap: 40px;
    }
    .solar-header-right {
        align-items: flex-start;
        text-align: left;
    }
    .solar-cards {
        flex-direction: column;
        margin-bottom: 40px;
    }
}

/* Projects Section */
.projects-section {
    /* Sin padding lateral: la scroll experience de videos corre de borde a borde */
    padding: 100px 0 0;
    display: flex;
    flex-direction: column;
    gap: 68px;
    background-color: #f7f7f7;
}

.projects-header {
    padding: 0 5%;
    text-align: center;
}

.projects-header h2 {
    font-size: 48px;
    font-weight: 500;
    line-height: 1.1;
    color: #111111;
    letter-spacing: -1px;
}

/* Mosaico: dos filas de la misma altura (8+4 y 4+8). Antes las tarjetas tenían
   alturas distintas y el pie colgaba debajo, lo que dejaba huecos enormes. */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
}

.card-large {
    grid-column: span 8;
}

.card-small {
    grid-column: span 4;
}

.project-card {
    position: relative;
    height: 440px;
    border-radius: 24px;
    overflow: hidden;
}

.project-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;
    transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.project-card:hover img {
    transform: scale(1.07);
}

/* Velo inferior para que el texto se lea sobre cualquier foto */
.project-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.75) 100%);
    pointer-events: none;
}

.img-large,
.img-small {
    height: 100%;
}

.project-info {
    position: absolute;
    left: 28px;
    bottom: 24px;
    z-index: 2;
}

.project-info h3 {
    font-size: 24px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 4px;
    letter-spacing: -0.5px;
}

.project-info p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 15px;
}

@media (max-width: 992px) {
    .projects-grid {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }
    .projects-header h2 {
        font-size: 34px;
    }
}

/* FAQ Section */
.faq-section {
    padding: 120px 5%;
    display: flex;
    gap: 60px;
    background-color: #ffffff;
    align-items: flex-start;
}
.faq-left {
    flex: 1;
}
.faq-left h2 {
    font-size: 48px;
    font-weight: 500;
    margin-bottom: 24px;
    letter-spacing: -1px;
    line-height: 1.1;
}
.faq-left p {
    font-size: 16px;
    color: #666;
    max-width: 400px;
    line-height: 1.6;
}
.faq-right {
    flex: 1.2;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.faq-item {
    border-bottom: 1px solid #e0e0e0;
    padding: 24px 0;
    cursor: pointer;
}
.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 20px;
    font-weight: 500;
}
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, margin-top 0.4s ease-out;
}
.faq-answer p {
    color: #666;
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
}
.faq-item.active .faq-answer {
    max-height: 200px; /* arbitrary high value */
    margin-top: 16px;
}
.faq-item.active .plus {
    transform: rotate(45deg);
}
.plus {
    font-size: 24px;
    font-weight: 300;
    transition: transform 0.3s ease;
}

/* Mission Section */
.mission-section {
    padding: 60px 5%;
    background-color: #ffffff;
}
.mission-grid {
    display: grid;
    grid-template-columns: 4.5fr 5.5fr;
    gap: 40px;
    align-items: end; /* For top row */
}
.mission-header-left {
    padding-bottom: 24px;
}
.mission-header-right {
    padding-bottom: 24px;
}
.capsule {
    border: 1px solid #111;
    border-radius: 100px;
    padding: 10px 24px;
    font-size: 15px;
    color: #111;
    display: inline-block;
    position: relative;
    padding-left: 34px;
}

.capsule::before {
    content: '';
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--brand-red);
}

.reveal-word {
    color: #999999;
    transition: color 0.2s ease;
}

.mission-header-right h2 {
    font-size: 48px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -1px;
}
.mission-card-light {
    background-color: #f7f7f7;
    border-radius: 32px;
    padding: 40px;
    display: flex;
    justify-content: space-between;
    height: 100%;
}
.card-left-half {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.mission-small-img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: 16px;
}
.card-divider {
    width: 1px;
    background-color: rgba(0,0,0,0.05);
    margin: 0 40px;
}
.card-right-half {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.huge-text {
    font-size: 80px;
    font-weight: 500;
    letter-spacing: -3px;
    color: #111;
    line-height: 1;
}
.card-right-half h3 {
    font-size: 22px;
    margin: 16px 0 8px 0;
    font-weight: 600;
}
.card-right-half p {
    color: #666;
    font-size: 15px;
    margin-bottom: 24px;
    line-height: 1.5;
}
.avatars-scatter {
    position: relative;
    text-align: center;
    padding: 70px 0;
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(60px);
}
.arvora-logo-text {
    font-size: 40px;
    font-weight: 500;
    letter-spacing: -1px;
    color: #111;
    z-index: 2;
}
.av {
    position: absolute;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 3px solid #f7f7f7;
    object-fit: cover;
    top: 50%;
    left: 50%;
    margin-top: -24px;
    margin-left: -24px;
}
@keyframes orbit1 {
    0% { transform: rotate(0deg) translateY(-80px) rotate(0deg); }
    100% { transform: rotate(360deg) translateY(-80px) rotate(-360deg); }
}
@keyframes orbit2 {
    0% { transform: rotate(45deg) translateY(-80px) rotate(-45deg); }
    100% { transform: rotate(405deg) translateY(-80px) rotate(-405deg); }
}
@keyframes orbit3 {
    0% { transform: rotate(90deg) translateY(-80px) rotate(-90deg); }
    100% { transform: rotate(450deg) translateY(-80px) rotate(-450deg); }
}
@keyframes orbit4 {
    0% { transform: rotate(135deg) translateY(-80px) rotate(-135deg); }
    100% { transform: rotate(495deg) translateY(-80px) rotate(-495deg); }
}
@keyframes orbit5 {
    0% { transform: rotate(180deg) translateY(-80px) rotate(-180deg); }
    100% { transform: rotate(540deg) translateY(-80px) rotate(-540deg); }
}
@keyframes orbit6 {
    0% { transform: rotate(225deg) translateY(-80px) rotate(-225deg); }
    100% { transform: rotate(585deg) translateY(-80px) rotate(-585deg); }
}
@keyframes orbit7 {
    0% { transform: rotate(270deg) translateY(-80px) rotate(-270deg); }
    100% { transform: rotate(630deg) translateY(-80px) rotate(-630deg); }
}
@keyframes orbit8 {
    0% { transform: rotate(315deg) translateY(-80px) rotate(-315deg); }
    100% { transform: rotate(675deg) translateY(-80px) rotate(-675deg); }
}

.av-1 { animation: orbit1 15s linear infinite; }
.av-2 { animation: orbit2 15s linear infinite; }
.av-3 { animation: orbit3 15s linear infinite; }
.av-4 { animation: orbit4 15s linear infinite; }
.av-5 { animation: orbit5 15s linear infinite; }
.av-6 { animation: orbit6 15s linear infinite; }
.av-7 { animation: orbit7 15s linear infinite; }
.av-8 { animation: orbit8 15s linear infinite; }

.mission-card-image {
    position: relative;
    border-radius: 32px;
    overflow: hidden;
    height: 100%;
    min-height: 350px;
}
.mission-card-image .bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.overlay-text {
    position: absolute;
    bottom: 40px;
    left: 40px;
    color: #ffffff;
    transition: opacity 0.4s ease;
}

/* Valores fundamentales: se despliegan al pasar el cursor sobre la imagen
   (en pantallas táctiles, al tocarla) */
.valores-lista {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 40px;
    list-style: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    background-color: rgba(1, 30, 58, 0.85);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.valores-lista li {
    color: #ffffff;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: -0.5px;
    padding: 10px 0 10px 26px;
    position: relative;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.valores-lista li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--brand-red);
}

.mission-card-image:hover .valores-lista,
.mission-card-image:active .valores-lista {
    opacity: 1;
}

.mission-card-image:hover .valores-lista li,
.mission-card-image:active .valores-lista li {
    opacity: 1;
    transform: translateY(0);
}

.valores-lista li:nth-child(1) { transition-delay: 0.05s; }
.valores-lista li:nth-child(2) { transition-delay: 0.12s; }
.valores-lista li:nth-child(3) { transition-delay: 0.19s; }
.valores-lista li:nth-child(4) { transition-delay: 0.26s; }
.valores-lista li:nth-child(5) { transition-delay: 0.33s; }

.mission-card-image:hover .overlay-text,
.mission-card-image:active .overlay-text {
    opacity: 0;
}
.huge-text-white {
    font-size: 100px;
    font-weight: 500;
    letter-spacing: -3px;
    line-height: 1;
}

/* Sección "Proceso"
   Antes secuestraba el scroll: la sección medía 300vh, el titular se partía en dos
   mitades que se separaban y las tarjetas subían fijadas. El texto acababa clavado a
   media pantalla. Ahora es una sección normal: titular arriba y tarjetas en rejilla. */
.black-section {
    background-color: #01416A;
    width: 100%;
    padding: 110px 5%;
}
.sticky-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}
/* Los dos tramos del titular: en el rango cinemático se separan; fuera de él son
   texto inline y el h2 se lee como un titular corriente. */
.split-text {
    display: inline;
}

.process-title {
    color: #ffffff;
    font-size: 52px;
    font-weight: 500;
    text-align: center;
    line-height: 1.1;
    letter-spacing: -1.5px;
    max-width: 760px;
    margin-bottom: 70px;
}
.black-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    width: 100%;
}
.process-card {
    background-color: #ffffff;
    border-radius: 32px;
    padding: 8px;
    display: flex;
    flex-direction: column;
}
.process-card img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    border-radius: 20px;
}
.process-text {
    padding: 24px 16px 16px 16px;
}
.process-text h3 {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 16px;
    color: #000;
    letter-spacing: -0.5px;
}
.process-text p {
    color: #4a4a4a;
    font-size: 18px;
    line-height: 1.5;
}

/* Blog Section */
.blog-section {
    padding: 120px 5%;
    background-color: #ffffff;
}
.blog-section h2 {
    text-align: center;
    font-size: 56px;
    font-weight: 500;
    line-height: 1.1;
    margin-bottom: 80px;
    color: #111;
    letter-spacing: -1px;
}
.blog-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.blog-card {
    position: relative;
}
.blog-media {
    height: 400px;
    border-radius: 24px;
    overflow: hidden;
    margin-bottom: 24px;
}
.blog-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.blog-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}
.blog-tag {
    background: #f0f0f0;
    padding: 6px 16px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 500;
    color: #111;
}
.blog-date {
    color: #666;
    font-size: 15px;
}
.blog-card h3 {
    font-size: 28px;
    font-weight: 500;
    color: #111;
    line-height: 1.3;
}

@media (max-width: 992px) {
    .faq-section, .mission-grid, .blog-grid {
        flex-direction: column;
        grid-template-columns: 1fr;
    }
    .mission-header-right h2 {
        text-align: left;
    }
    .mission-card-light {
        flex-direction: column;
    }
    .card-divider {
        width: 100%;
        height: 1px;
        margin: 40px 0;
    }
}

/* Footer Section */
.footer-section {
    background-color: #fafafa;
    color: #111111;
    padding: 40px 5% 24px 5%;
    display: flex;
    flex-direction: column;
    margin: 40px 8px 8px 8px; /* Adds the white background around it */
    border-radius: 32px;
    border: 1px solid #ececec;
}

.footer-top {
    margin-bottom: -48px;
    padding-top: 68px;
    /* El margen negativo encima este bloque sobre los enlaces de abajo y sus
       zonas vacías bloqueaban los clics ("Inicio" no respondía). Los clics
       atraviesan, salvo en el propio formulario de suscripción. */
    pointer-events: none;
}

.footer-top .footer-subscribe {
    pointer-events: auto;
}

.footer-left h2 {
    font-size: 40px; /* Reduced */
    font-weight: 500;
    line-height: 1.1;
    margin-bottom: 32px;
    letter-spacing: -1px;
}

/* Captura de correo del footer (sustituye al antiguo buscador) */
.footer-subscribe {
    position: relative;
    max-width: 360px;
}

.footer-subscribe input {
    width: 100%;
    background-color: #f0f0f0;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 100px;
    padding: 15px 60px 15px 20px;
    color: #111;
    font-size: 14px;
    outline: none;
    transition: border-color 0.3s ease;
}

.footer-subscribe input::placeholder { color: rgba(0, 0, 0, 0.4); }
.footer-subscribe input:focus { border-color: rgba(0, 0, 0, 0.3); }

.footer-subscribe button {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background-color: #111111;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.footer-subscribe button:hover {
    background-color: var(--brand-red);
    transform: translateY(-50%) translateX(3px);
}

.footer-subscribe button:hover svg { stroke: #fff; }

.footer-subscribe button:disabled {
    opacity: 0.55;
    cursor: progress;
}

.footer-subscribe button:disabled:hover {
    background-color: #111111;
    transform: translateY(-50%);
}

/* Respuesta del envío. Lo inyecta contact-modal.js como hermano del formulario:
   dentro desplazaría el botón, que se centra respecto al propio formulario. */
.footer-subscribe-aviso {
    max-width: 360px;
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.4;
    /* El pie de página deja pasar los clics; este texto tampoco los necesita. */
    pointer-events: none;
}

.footer-subscribe-aviso[data-tipo="exito"] { color: #1a7f45; }
.footer-subscribe-aviso[data-tipo="error"] { color: var(--brand-red); }

.footer-right {
    width: 400px;
    align-self: flex-start;
}

.footer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
}

.footer-links li {
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

.footer-links li a {
    color: #111;
    text-decoration: none;
    display: flex;
    justify-content: space-between;
    padding: 16px 0; /* Reduced */
    font-size: 15px; /* Reduced */
    transition: opacity 0.3s;
}

.footer-links li a span {
    transition: color 0.3s ease, transform 0.3s ease;
    display: inline-block;
}

.footer-links li a:hover {
    opacity: 0.7;
}

.footer-links li a:hover span {
    color: var(--brand-red);
    transform: translateX(3px);
}

.footer-middle {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 20px;
}

.footer-logo {
    display: flex;
    align-items: center;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(0,0,0,0.1);
    padding-top: 32px;
    font-size: 14px;
    color: rgba(0,0,0,0.55);
}

.footer-bottom a {
    color: rgba(0,0,0,0.75);
    text-decoration: none;
}

.footer-legal {
    display: flex;
    gap: 24px;
    list-style: none;
}

@media (max-width: 992px) {
    .footer-top, .footer-middle, .footer-bottom {
        flex-direction: column;
        gap: 40px;
    }
    .footer-logo .logo-img {
        height: 100px;
    }
}

/* Animations
   Entrada más marcada: más recorrido y una ligera escala. La duración sube poco
   a propósito: si el fade es muy lento, al saltar a una sección con #ancla se ve
   en blanco durante segundos. */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.project-card.animate-on-scroll {
    transform: translateY(10px);
}
.project-card.animate-on-scroll.is-visible {
    transform: translateY(0);
}

/* Las tarjetas de la derecha entran igual, sin desplazamiento lateral */
.projects-grid .project-card:nth-child(even).animate-on-scroll {
    transform: translateY(10px);
}
.projects-grid .project-card:nth-child(even).animate-on-scroll.is-visible {
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .animate-on-scroll,
    .project-card.animate-on-scroll,
    .projects-grid .project-card:nth-child(even).animate-on-scroll {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Number Drop Animation */
.num-container {
    display: inline-flex;
    overflow: hidden;
}
.char-drop {
    display: inline-block;
    transform: translateY(-100%);
    opacity: 0;
}
.is-visible .char-drop {
    animation: dropIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes dropIn {
    0% { transform: translateY(-100%); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

/* ============================================================
   Subpáginas (Nuestra Empresa, RS Leasing, RS Investment)
   Navbar fija + hero + contenido. Reutiliza .navbar y .footer-section
   ============================================================ */
.subpage-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 16px;
    transition: background-color 0.3s ease, backdrop-filter 0.3s ease;
}

/* Franja esmerilada sólo al hacer scroll: sobre el hero la barra queda transparente */
.subpage-nav.scrolled {
    background-color: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
}

.subpage-nav .navbar {
    /* El wrapper .subpage-nav ya es fijo; la navbar fluye dentro de él */
    position: static;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.10);
}

.logo a {
    color: inherit;
    text-decoration: none;
}

.nav-links li a.active {
    color: var(--text-dark);
    font-weight: 600;
    position: relative;
}

.nav-links li a.active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 2px;
    background-color: var(--brand-red);
    border-radius: 2px;
}

.subpage-hero {
    margin: 8px;
    border-radius: 32px;
    padding: 220px 6% 90px 6%;
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    color: var(--text-light);
}

.subpage-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.75) 100%);
}

.subpage-hero > * {
    position: relative;
    z-index: 1;
}

.subpage-hero .badge {
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    padding: 8px 20px;
    border-radius: 100px;
    font-size: 14px;
    margin-bottom: 28px;
}

.subpage-hero h1 {
    font-size: 68px;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -2px;
    max-width: 900px;
    margin-bottom: 24px;
}

.subpage-hero p {
    font-size: 22px;
    line-height: 1.5;
    max-width: 640px;
    color: rgba(255, 255, 255, 0.85);
}

.subpage-content {
    max-width: 1100px;
    margin: 0 auto;
    padding: 100px 5%;
}

.subpage-content .lead {
    font-size: 26px;
    line-height: 1.5;
    color: #111;
    letter-spacing: -0.5px;
    margin-bottom: 32px;
}

.subpage-content p {
    font-size: 19px;
    line-height: 1.7;
    color: #555;
    margin-bottom: 22px;
}

.subpage-content h2 {
    font-size: 42px;
    font-weight: 600;
    letter-spacing: -1px;
    color: #111;
    margin: 80px 0 28px 0;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin-top: 40px;
}

.feature-card {
    background-color: #f6f6f6;
    border: 1px solid #ececec;
    border-radius: 24px;
    padding: 34px;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.feature-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
}

.feature-card svg {
    margin-bottom: 20px;
}

.feature-card h3 {
    font-size: 20px;
    font-weight: 600;
    color: #111;
    margin-bottom: 10px;
}

.feature-card p {
    font-size: 16px;
    line-height: 1.6;
    color: #666;
    margin: 0;
}

.subpage-cta {
    margin: 8px;
    padding: 90px 6% 40px 6%;
    border-radius: 32px;
    background-color: #ffffff;
    text-align: center;
}

.subpage-cta h2 {
    font-size: 48px;
    font-weight: 600;
    letter-spacing: -1.5px;
    color: #111;
    margin-bottom: 18px;
}

.subpage-cta p {
    font-size: 20px;
    color: #666;
    margin-bottom: 34px;
}

/* La otra solución: enlace cruzado entre RS Leasing y RS Investment */
.cross-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 34px 40px;
    border: 1px solid #e6e6e6;
    border-radius: 24px;
    text-decoration: none;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.cross-link:hover {
    background-color: #f6f6f6;
    border-color: #d5d5d5;
}

.cross-link h3 {
    font-size: 24px;
    font-weight: 600;
    color: #111;
    margin-bottom: 6px;
}

.cross-link p {
    font-size: 16px;
    color: #666;
    margin: 0;
}

.cross-link .arrow-circle {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background-color: #111;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

@media (max-width: 992px) {
    .subpage-hero {
        padding: 180px 6% 70px 6%;
    }
    .subpage-hero h1 {
        font-size: 42px;
        letter-spacing: -1px;
    }
    .subpage-content h2 {
        font-size: 32px;
    }
    .nav-links {
        display: none;
    }
}

/* ============================================================
   Menú móvil (hamburguesa)
   ============================================================ */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 46px;
    height: 46px;
    padding: 0 11px;
    margin-left: 12px;
    border: none;
    border-radius: 100px;
    background-color: transparent;
    cursor: pointer;
}

.nav-toggle span {
    display: block;
    height: 2px;
    width: 100%;
    background-color: #111;
    border-radius: 2px;
    transition: transform 0.4s ease, opacity 0.3s ease;
}

body.menu-open .nav-toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
body.menu-open .nav-toggle span:nth-child(2) {
    opacity: 0;
}
body.menu-open .nav-toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 1400;
    background-color: #ffffff;
    padding: 120px 8% 40px 8%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    transform: translateY(-100%);
    transition: transform 0.4s ease;
    overflow-y: auto;
}

body.menu-open .mobile-menu {
    transform: translateY(0);
}

body.menu-open {
    overflow: hidden;
}

.mobile-menu a {
    color: #111;
    text-decoration: none;
    font-size: 34px;
    font-weight: 400;
    letter-spacing: -1px;
    padding: 18px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

body.menu-open .mobile-menu a {
    opacity: 1;
    transform: translateY(0);
}

.mobile-menu a span {
    opacity: 0.5;
    font-size: 24px;
}

.mobile-menu .btn-primary {
    margin-top: 32px;
    align-self: flex-start;
    background-color: #111;
    color: #fff;
    border-color: #111;
    font-size: 17px;
    border-bottom: 1px solid #111;
}

/* El menú abierto tapa la barra: mantenemos visible el botón de cerrar */
body.menu-open .navbar {
    z-index: 1500;
    position: relative;
}
body.menu-open .nav-toggle span {
    background-color: #111;
}
body.menu-open .navbar {
    background-color: transparent;
    box-shadow: none;
}
body.menu-open .logo,
body.menu-open .logo a {
    color: #111;
}
body.menu-open .btn-container {
    display: none;
}

/* ============================================================
   Responsive: iPad (<=1024px) y móvil (<=768px)
   ============================================================ */
@media (max-width: 1024px) {
    .nav-links {
        display: none;
    }
    .nav-toggle {
        display: flex;
    }
    .btn-container {
        display: none;
    }

    /* Las 3 tarjetas de soluciones se apilan (el desplazamiento lateral por JS
       queda desactivado en este ancho, ver index.html). Sin el padding extra de
       la fila: la sección ya pone el suyo y el doble margen las descentraba. */
    .solar-cards {
        grid-template-columns: 1fr;
        display: grid;
        gap: 20px;
        padding: 0;
    }
    .solar-card {
        transform: none !important;
        width: 100%;
    }
    .solar-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 28px;
    }
    .solar-header h2,
    .projects-header h2,
    .blog-section h2 {
        font-size: 42px;
    }

    .projects-grid,
    .blog-grid,
    .mission-grid,
    .faq-section {
        grid-template-columns: 1fr;
        display: grid;
        gap: 24px;
    }

    .impact-content {
        flex-direction: column;
        gap: 40px;
    }
    .impact-right h2 {
        font-size: 32px;
    }

    .hero-left h1 {
        font-size: 46px;
    }
    .hero {
        min-height: 620px;
        height: auto;
        padding-bottom: 40px;
    }
    .stat {
        font-size: 90px !important;
    }

    .footer-top,
    .footer-middle {
        flex-direction: column;
        gap: 40px;
    }
    .footer-right {
        width: 100%;
    }
    .footer-logo .logo-img {
        height: 120px;
    }
}

@media (max-width: 768px) {
    .hero {
        margin: 6px;
        border-radius: 24px;
        min-height: 560px;
    }
    .hero-left h1 {
        font-size: 34px;
        letter-spacing: -1px;
    }
    .description {
        font-size: 16px;
    }
    .stat {
        font-size: 64px !important;
    }

    .impact-section,
    .solar-section,
    .projects-section,
    .blog-section,
    .faq-section,
    .mission-section {
        padding: 70px 6%;
    }

    .solar-header h2,
    .projects-header h2,
    .blog-section h2,
    .faq-left h2 {
        font-size: 32px;
        letter-spacing: -0.5px;
    }

    .project-card img,
    .img-large,
    .img-small {
        height: 260px;
    }

    .blog-media {
        height: 260px;
    }
    .blog-card h3 {
        font-size: 22px;
    }

    .huge-text,
    .huge-text-white {
        font-size: 64px;
    }
    .footer-logo .logo-img {
        height: 90px;
    }
    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        text-align: left;
    }
    .footer-legal {
        flex-wrap: wrap;
        gap: 4px 20px;
    }
    /* 17px de alto era imposible de acertar con el dedo */
    .footer-legal li a {
        display: inline-block;
        padding: 9px 0;
    }
    .footer-links li a {
        padding: 18px 0;
    }
    .mobile-menu a {
        font-size: 26px;
        padding: 14px 0;
    }
}

/* La sección de proceso deja de secuestrar el scroll en pantallas pequeñas:
   las tarjetas fluyen como una lista normal (ver index.html). */
@media (max-width: 900px) {
    .black-section {
        height: auto;
        padding: 80px 6%;
    }
    .sticky-container {
        position: static;
        height: auto;
        display: block;
    }
    .black-cards {
        position: static;
        transform: none !important;
        display: flex;
        flex-direction: column;
        gap: 24px;
    }
    .process-card {
        width: 100%;
        flex-direction: column;
    }
    .process-card img {
        width: 100%;
        height: 220px;
    }
}

/* ============================================================
   Bloques de subpágina (mismo vocabulario visual que el inicio:
   franjas alternas, imágenes grandes, cifras, galería y banda oscura)
   ============================================================ */
.sp-section {
    padding: 110px 5%;
}

.sp-section.alt {
    background-color: #ffffff;
}

.sp-head {
    max-width: 1200px;
    margin: 0 auto 60px auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 40px;
}

.sp-head h2 {
    font-size: 52px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -1.5px;
    color: #111;
    max-width: 620px;
}

.sp-head p {
    color: #666;
    font-size: 18px;
    line-height: 1.6;
    max-width: 380px;
}

/* Bloque partido: imagen + texto, alternando lados */
.sp-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.sp-split-media {
    border-radius: 28px;
    overflow: hidden;
    height: 520px;
}

.sp-split-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.sp-split-media:hover img {
    transform: scale(1.07);
}

.sp-split.reverse .sp-split-media {
    order: 2;
}

.sp-split h3 {
    font-size: 40px;
    font-weight: 500;
    letter-spacing: -1px;
    color: #111;
    margin-bottom: 22px;
    line-height: 1.15;
}

.sp-split p {
    font-size: 18px;
    line-height: 1.7;
    color: #555;
    margin-bottom: 18px;
}

.sp-list {
    list-style: none;
    margin-top: 28px;
}

.sp-list li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 14px 0;
    border-top: 1px solid #e8e8e8;
    color: #333;
    font-size: 17px;
}

.sp-list li::before {
    content: "→";
    color: #111;
    flex-shrink: 0;
}

/* Cifras */
.sp-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
}

.sp-stats-2 {
    grid-template-columns: repeat(2, 1fr);
}

.sp-stat {
    background-color: #fff;
    border: 1px solid #ececec;
    border-radius: 24px;
    padding: 44px 36px;
}

.sp-stat .num {
    font-size: 68px;
    font-weight: 500;
    letter-spacing: -3px;
    line-height: 1;
    color: #111;
    margin-bottom: 16px;
}

.sp-stat h4 {
    font-size: 19px;
    font-weight: 600;
    color: #111;
    margin-bottom: 8px;
}

.sp-stat p {
    font-size: 16px;
    line-height: 1.6;
    color: #666;
}

/* Galería tipo mosaico */
.sp-gallery {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-auto-rows: 300px;
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
}

.sp-tile {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
}

.sp-tile.tall {
    grid-row: span 2;
}

.sp-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.sp-tile:hover img {
    transform: scale(1.09);
}

.sp-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.75) 100%);
}

/* Sin el right, el título se pegaba al borde derecho del mosaico en móvil
   ("Flotillas y camiones de carga" no cabía en el ancho de un teléfono). */
.sp-tile-caption {
    position: absolute;
    left: 28px;
    right: 24px;
    bottom: 24px;
    z-index: 2;
    color: #fff;
}

.sp-tile-caption h4 {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 4px;
}

.sp-tile-caption p {
    font-size: 15px;
    opacity: 0.8;
}

/* Banda oscura con pasos numerados */
.sp-dark {
    background-color: #f8f8f8;
    color: #111;
    margin: 8px;
    border-radius: 32px;
    padding: 110px 6%;
    border: 1px solid #ececec;
}

.sp-dark h2 {
    font-size: 52px;
    font-weight: 500;
    letter-spacing: -1.5px;
    line-height: 1.1;
    max-width: 700px;
    margin: 0 auto 70px auto;
    text-align: center;
}

.sp-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    max-width: 1200px;
    margin: 0 auto;
}

.sp-steps-9 {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 48px;
}

.sp-step {
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    padding-top: 28px;
}

.sp-step .step-num {
    font-size: 15px;
    opacity: 0.5;
    margin-bottom: 20px;
}

.sp-step h4 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 12px;
}

.sp-step p {
    font-size: 16px;
    line-height: 1.7;
    color: rgba(0, 0, 0, 0.6);
}

@media (max-width: 1024px) {
    .sp-section {
        padding: 70px 6%;
    }
    .sp-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
    .sp-head h2,
    .sp-dark h2 {
        font-size: 34px;
        letter-spacing: -0.5px;
    }
    .sp-split {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .sp-split.reverse .sp-split-media {
        order: 0;
    }
    .sp-split-media {
        height: 320px;
    }
    .sp-split h3 {
        font-size: 28px;
    }
    .sp-stats,
    .sp-steps {
        grid-template-columns: 1fr;
    }
    .sp-gallery {
        grid-template-columns: 1fr;
        grid-auto-rows: 240px;
    }
    .sp-tile.tall {
        grid-row: span 1;
    }
    .sp-dark {
        padding: 70px 6%;
    }
    .subpage-hero h1 {
        font-size: 40px;
    }
    .subpage-hero {
        padding: 160px 7% 60px 7%;
    }
    .subpage-hero p {
        font-size: 18px;
    }
    .subpage-cta h2 {
        font-size: 32px;
    }
    .cross-link {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        gap: 20px;
    }
}

/* En móvil/tablet la barra del inicio se queda fija: si no, al bajar por el hero
   desaparece y la hamburguesa (única navegación en ese ancho) se vuelve inalcanzable. */
@media (max-width: 1024px) {
    /* Antes esta regla apuntaba a .hero, que se retiró con el vídeo del auto de
       lujo. Sin ella la navbar del inicio conservaba el width:100% de la regla
       base junto con left/right:16px y se salía 11px por la derecha, justo por
       donde cae el botón hamburguesa. */
    .flota-hero .navbar {
        position: fixed;
        top: 10px;
        left: 10px;
        right: 10px;
        width: auto;
        max-width: none;
        z-index: 1200;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
    }
}

/* En móvil, la entrada lateral de las tarjetas (translateX) las sacaba del viewport
   y generaba scroll horizontal: entran en vertical. El overflow-x del body corta
   además el desborde decorativo (marquee de logos, avatares en órbita). */
@media (max-width: 1024px) {
    body {
        overflow-x: hidden;
    }
    .project-card.animate-on-scroll,
    .projects-grid .project-card:nth-child(even).animate-on-scroll {
        transform: translateY(10px);
    }
    .project-card.animate-on-scroll.is-visible,
    .projects-grid .project-card:nth-child(even).animate-on-scroll.is-visible {
        transform: translateY(0);
    }
}

/* ============================================================
   Sección "Nuestros valores" (banda oscura, lista numerada)
   Sustituye a la rejilla de 5 tarjetas iguales, que quedaba plana.
   ============================================================ */
.values-section {
    background-color: #fafafa;
    color: #111111;
    margin: 8px;
    border-radius: 32px;
    padding: 110px 6%;
    border: 1px solid #ececec;
}

.values-inner {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 70px;
    max-width: 1200px;
    margin: 0 auto;
    align-items: start;
}

.values-left {
    position: sticky;
    top: 110px;
}

.values-left .badge {
    display: inline-block;
    border-color: rgba(0, 0, 0, 0.25);
    color: #111;
    margin-bottom: 26px;
}

.values-left h2 {
    font-size: 46px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -1.5px;
    margin-bottom: 20px;
}

.values-left p {
    font-size: 17px;
    line-height: 1.7;
    color: rgba(0, 0, 0, 0.6);
}

.values-media {
    height: 260px;
    border-radius: 24px;
    overflow: hidden;
    margin-top: 40px;
}

.values-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.values-media:hover img {
    transform: scale(1.08);
}

.values-list {
    list-style: none;
}

.value-row {
    display: flex;
    gap: 26px;
    align-items: flex-start;
    padding: 28px 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 18px;
    transition: background-color 0.3s ease, padding-left 0.3s ease;
}

.value-row:last-child {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.value-row:hover {
    background-color: rgba(0, 0, 0, 0.04);
    padding-left: 30px;
}

.value-num {
    font-size: 14px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.4);
    padding-top: 8px;
    min-width: 32px;
    transition: color 0.3s ease;
}

.value-row:hover .value-num {
    color: #111111;
}

.value-row h3 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 8px;
}

.value-row p {
    font-size: 16px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 1024px) {
    .values-section {
        padding: 70px 6%;
    }
    .values-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .values-left {
        position: static;
    }
    .values-left h2 {
        font-size: 32px;
        letter-spacing: -0.5px;
    }
    .values-media {
        height: 220px;
    }
    .value-row {
        padding: 22px 14px;
        gap: 16px;
    }
    .value-row h3 {
        font-size: 20px;
    }
}

/* Los valores se enumeran sin descripción (como en la web original): filas más
   compactas, con el nombre centrado respecto al número. */
.value-row {
    align-items: center;
}

.value-row h3 {
    font-size: 30px;
    font-weight: 500;
    letter-spacing: -0.5px;
    margin-bottom: 0;
}

.value-num {
    padding-top: 0;
}

@media (max-width: 1024px) {
    .value-row h3 {
        font-size: 22px;
    }
}

/* Mosaico de casos en pantallas pequeñas: una columna y tarjetas más bajas */
@media (max-width: 1024px) {
    .projects-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .card-large,
    .card-small {
        grid-column: span 1;
    }
    .project-card {
        height: 300px;
    }
    .project-card img,
    .img-large,
    .img-small {
        height: 100%;
    }
    .project-info h3 {
        font-size: 20px;
    }
}

@media (max-width: 768px) {
    .project-card {
        height: 240px;
    }
    .project-info {
        left: 20px;
        bottom: 18px;
    }
}

/* ============================================================
   "Por qué elegirnos" (mission-section) en tablet y móvil.
   La tarjeta está pensada para dos columnas de escritorio: al apilarse quedaba
   larguísima, con la imagen y el botón sueltos arriba y los avatares en órbita
   (decorativos, con geometría fija) amontonados y cortados.
   ============================================================ */
@media (max-width: 1024px) {
    .mission-section {
        padding: 70px 6%;
    }
    .mission-grid {
        gap: 24px;
    }
    .mission-header-right h2 {
        font-size: 32px;
        letter-spacing: -0.5px;
    }
    /* El titular lleva un <br> pensado para escritorio: aquí estorba */
    .mission-header-right h2 br {
        display: none;
    }

    .mission-card-light {
        padding: 28px;
        height: auto;
        gap: 24px;
    }
    .card-left-half {
        gap: 20px;
    }
    .mission-small-img {
        height: 200px;
    }
    .card-left-half .btn-primary {
        align-self: flex-start;
        margin-top: 0 !important;
    }

    .huge-text,
    .huge-text-white {
        font-size: 56px;
        letter-spacing: -2px;
    }
    .card-right-half p {
        margin-bottom: 0;
    }

    /* Los avatares orbitando dependen de una geometría fija: en pantallas
       pequeñas se solapan y se salen. Son decorativos, así que se ocultan. */
    .avatars-scatter {
        display: none;
    }

    .mission-card-image {
        height: 320px;
    }
    .overlay-text {
        left: 24px;
        bottom: 24px;
    }
}

@media (max-width: 768px) {
    .mission-card-light {
        padding: 22px;
    }
    .mission-small-img {
        height: 170px;
    }
    .huge-text,
    .huge-text-white {
        font-size: 46px;
    }
    .mission-card-image {
        height: 260px;
    }
}

/* Tarjetas del proceso, ahora en rejilla de tres */
.black-cards .process-card img {
    height: 240px;
}

/* El botón vivía pegado a la imagen. En escritorio lo empujamos al pie de la
   tarjeta; en pantallas pequeñas le damos aire respecto a la imagen. */
.card-left-half {
    gap: 24px;
}

.card-left-half .btn-primary {
    align-self: flex-start;
    margin-top: auto;
}

@media (max-width: 1024px) {
    .card-left-half .btn-primary {
        margin-top: 4px !important;
    }
    .process-title {
        font-size: 32px;
        letter-spacing: -0.5px;
        margin-bottom: 40px;
    }
    .black-section {
        padding: 70px 6%;
    }
    .black-cards {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .black-cards .process-card img {
        height: 220px;
    }
}

/* Las tarjetas entran desplazadas lateralmente y durante la animación asoman unos
   píxeles fuera del viewport, provocando scroll horizontal. Recortamos en la sección.
   Usamos clip (no hidden) para no crear un contenedor de scroll que rompa los sticky. */
.projects-section {
    overflow-x: clip;
}

/* ==========================================================================
   Modal de contacto (markup inyectado por contact-modal.js)
   ========================================================================== */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background-color: rgba(10, 10, 10, 0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    overflow-y: auto;
}

.modal-overlay.is-open { opacity: 1; }
.modal-overlay[hidden] { display: none; }

body.modal-open { overflow: hidden; }

.modal-card {
    position: relative;
    width: 100%;
    max-width: 560px;
    background-color: #fff;
    border-radius: 28px;
    padding: 44px 44px 38px;
    transform: translateY(30px) scale(0.97);
    opacity: 0;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
}

.modal-overlay.is-open .modal-card {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.modal-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background-color: #f1f1f1;
    color: #111;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.modal-close:hover {
    background-color: #111;
    color: #fff;
    transform: rotate(90deg);
}

.modal-badge {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 100px;
    background-color: #f1f1f1;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #555;
}

.modal-card h2 {
    font-size: 34px;
    font-weight: 500;
    letter-spacing: -1px;
    margin: 16px 0 10px;
    color: var(--text-dark);
}

.modal-lead {
    color: #666;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 26px;
}

.modal-channels {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 28px;
}

.modal-channel {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    border: 1px solid #e6e6e6;
    border-radius: 16px;
    text-decoration: none;
    transition: border-color 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
}

.modal-channel:hover {
    border-color: #111;
    background-color: #fafafa;
    transform: translateY(-3px);
}

.modal-channel-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #999;
}

.modal-channel-value {
    font-size: 13px;
    color: var(--text-dark);
    font-weight: 500;
    word-break: break-word;
}

.modal-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    border-top: 1px solid #eee;
    padding-top: 26px;
}

.modal-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.modal-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #555;
}

.modal-form input,
.modal-form textarea {
    font-family: inherit;
    font-size: 15px;
    color: var(--text-dark);
    padding: 13px 16px;
    border: 1px solid #e2e2e2;
    border-radius: 14px;
    outline: none;
    background-color: #fafafa;
    transition: border-color 0.3s ease, background-color 0.3s ease;
    resize: vertical;
}

.modal-form input:focus,
.modal-form textarea:focus {
    border-color: #111;
    background-color: #fff;
}

.modal-submit {
    align-self: flex-start;
    margin-top: 6px;
    cursor: pointer;
    font-family: inherit;
}

.modal-note {
    font-size: 12px;
    color: #999;
}

@media (max-width: 768px) {
    .modal-card { padding: 36px 24px 30px; border-radius: 22px; }
    .modal-card h2 { font-size: 28px; }
    .modal-channels { grid-template-columns: 1fr; }
    .modal-row { grid-template-columns: 1fr; }
    .modal-submit { align-self: stretch; text-align: center; }
}

/* ==========================================================================
   Páginas legales (aviso-privacidad, políticas, términos)

   Dos estados conviven:
   - .legal-doc  documento publicado: índice fijo a la izquierda y texto a la
                 derecha (aviso de privacidad, términos y condiciones).
   - .legal-body índice a la espera del texto definitivo (políticas).
   ========================================================================== */
.legal-hero {
    padding: 190px 5% 90px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    background-color: #f6f6f6;
}

.legal-hero h1 {
    font-size: 58px;
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -2px;
    color: var(--text-dark);
}

.legal-hero p {
    font-size: 18px;
    color: #666;
    max-width: 620px;
    line-height: 1.6;
}

.legal-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

.legal-note {
    background-color: #f6f6f6;
    color: #111;
    border: 1px solid #ececec;
    border-radius: 24px;
    padding: 38px;
}

.legal-note h3 {
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 14px;
}

.legal-note p {
    color: rgba(0, 0, 0, 0.6);
    line-height: 1.7;
    font-size: 15px;
}

.legal-note a {
    color: #111;
    text-decoration: underline;
}

.legal-outline {
    list-style: none;
    counter-reset: legal;
}

.legal-outline li {
    counter-increment: legal;
    display: flex;
    gap: 18px;
    align-items: baseline;
    padding: 20px 0;
    border-bottom: 1px solid #e8e8e8;
    font-size: 17px;
    color: var(--text-dark);
}

.legal-outline li::before {
    content: counter(legal, decimal-leading-zero);
    font-size: 13px;
    font-weight: 600;
    color: #bbb;
    min-width: 26px;
}

.legal-hero .legal-fecha {
    font-size: 14px;
    color: #999;
}

/* --- Documento legal publicado --- */

.legal-doc {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 70px;
    align-items: start;
    max-width: 1300px;
    margin: 0 auto;
}

.legal-indice {
    position: sticky;
    /* Por debajo de la navbar fija */
    top: 120px;
}

.legal-indice h2 {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #999;
    margin-bottom: 18px;
}

.legal-indice ol {
    list-style: none;
    counter-reset: indice;
}

.legal-indice li { counter-increment: indice; }

.legal-indice a {
    display: flex;
    gap: 12px;
    padding: 9px 0;
    font-size: 14px;
    line-height: 1.4;
    color: #666;
    text-decoration: none;
    transition: color 0.25s ease;
}

.legal-indice a::before {
    content: counter(indice, decimal-leading-zero);
    font-size: 11px;
    font-weight: 600;
    color: #ccc;
    min-width: 20px;
    padding-top: 2px;
}

.legal-indice a:hover { color: var(--brand-red); }
.legal-indice a:hover::before { color: var(--brand-red); }

.legal-texto {
    max-width: 760px;
    font-size: 16px;
    line-height: 1.75;
    color: #444;
}

.legal-texto > p:first-child {
    font-size: 18px;
    color: #333;
    margin-bottom: 8px;
}

.legal-texto h2 {
    font-size: 26px;
    font-weight: 500;
    letter-spacing: -0.5px;
    line-height: 1.25;
    color: var(--text-dark);
    margin: 56px 0 18px;
    /* El titular no queda debajo de la navbar fija al saltar desde el índice */
    scroll-margin-top: 110px;
}

.legal-texto h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-dark);
    margin: 32px 0 12px;
}

.legal-texto p { margin-bottom: 18px; }

.legal-texto ol,
.legal-texto ul {
    margin: 0 0 22px 0;
    padding-left: 0;
    list-style: none;
}

.legal-texto li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 14px;
}

.legal-texto li::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 12px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--brand-red);
}

/* Incisos con su propia letra o número: se respeta el marcador */
.legal-texto ol.legal-incisos { list-style: none; counter-reset: inciso; }
.legal-texto ol.legal-incisos li { counter-increment: inciso; }
.legal-texto ol.legal-incisos li::before {
    content: counter(inciso, lower-alpha) ")";
    background: none;
    width: auto;
    height: auto;
    top: 0;
    left: 0;
    font-weight: 600;
    color: var(--brand-red);
}

.legal-texto strong { color: var(--text-dark); font-weight: 600; }

.legal-texto a {
    color: var(--text-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.legal-texto a:hover { color: var(--brand-red); }

/* Recuadro de contacto al final del documento */
.legal-contacto {
    margin-top: 56px;
    padding: 30px 34px;
    background-color: #f6f6f6;
    border: 1px solid #ececec;
    border-radius: 20px;
}

.legal-contacto p { margin-bottom: 8px; }
.legal-contacto p:last-child { margin-bottom: 0; }

@media (max-width: 992px) {
    .legal-hero { padding: 150px 5% 70px; }
    .legal-hero h1 { font-size: 42px; letter-spacing: -1px; }
    .legal-body { grid-template-columns: 1fr; gap: 36px; }
    .legal-note { padding: 30px 24px; }

    .legal-doc { grid-template-columns: 1fr; gap: 40px; }
    /* En móvil el índice deja de ser barra lateral y pasa a ser una tarjeta */
    .legal-indice {
        position: static;
        background-color: #f6f6f6;
        border: 1px solid #ececec;
        border-radius: 20px;
        padding: 26px 24px;
    }
    .legal-texto { font-size: 15px; }
    .legal-texto h2 { font-size: 22px; margin-top: 44px; }
    .legal-contacto { padding: 26px 22px; }
}

/* ==========================================================================
   Sección "Proceso": animación cinemática (titular que se parte y tarjetas que
   suben) SOLO en el rango donde se ve bien. Necesita ancho para que los dos
   tramos del titular quepan en una línea, y alto para que la sección fijada no
   deje el texto clavado a media pantalla — que fue el problema en móvil.
   Por debajo de este rango manda el layout estático: titular + rejilla.
   Si cambias este umbral, cambia también PROCESO_MQ en index.html.
   ========================================================================== */
@media (min-width: 1100px) and (min-height: 720px) {
    .black-section {
        height: 300vh;
        padding: 0;
        position: relative;
    }

    .sticky-container {
        position: sticky;
        top: 0;
        height: 100vh;
        justify-content: center;
        overflow: hidden;
        padding: 0 5%;
        max-width: none;
    }

    .process-title {
        position: absolute;
        top: 50%;
        display: flex;
        flex-direction: column;
        width: 100%;
        z-index: 10;
        font-size: 56px;
        letter-spacing: -1px;
        max-width: none;
        margin-bottom: 0;
    }

    /* El observador de scroll le añade .animate-on-scroll al h2; su transform
       pisaría el centrado vertical, así que aquí lo fijamos nosotros. */
    .process-title.animate-on-scroll,
    .process-title.animate-on-scroll.is-visible {
        transform: translateY(-50%);
        opacity: 1;
    }

    .split-text {
        display: block;
        white-space: nowrap;
        will-change: transform, opacity;
    }

    .black-cards {
        display: flex;
        flex-direction: column;
        gap: 40px;
        width: 100%;
        max-width: 600px;
        position: absolute;
        top: 100vh;
        z-index: 5;
        will-change: transform;
    }

    .black-cards .process-card img {
        height: 350px;
    }
}

/* ==========================================================================
   Artículos del blog (blog-*.html) — las cuatro páginas usan esta plantilla
   ========================================================================== */
a.blog-card {
    text-decoration: none;
    color: inherit;
    display: block;
}

a.blog-card .blog-media img {
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

a.blog-card:hover .blog-media img {
    transform: scale(1.05);
}

a.blog-card:hover h3 {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.article-hero {
    min-height: 620px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    padding: 0 5% 80px;
    margin: 8px;
    border-radius: 24px;
}

.article-hero-inner {
    max-width: 900px;
}

.article-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 15px;
}

.article-meta .blog-tag {
    background: #fff;
    color: #111;
}

.article-dot { opacity: 0.5; }

.article-hero h1 {
    color: #fff;
    font-size: 58px;
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -1.5px;
    margin-bottom: 22px;
}

.article-hero p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 20px;
    line-height: 1.6;
    max-width: 700px;
}

.article-body {
    max-width: 760px;
    margin: 0 auto;
    padding: 100px 5%;
}

.article-lead {
    font-size: 22px;
    line-height: 1.6;
    color: #333;
    margin-bottom: 44px;
}

.article-body h2 {
    font-size: 32px;
    font-weight: 500;
    letter-spacing: -0.8px;
    color: var(--text-dark);
    margin: 48px 0 18px;
}

.article-body p {
    font-size: 17px;
    line-height: 1.8;
    color: #555;
    margin-bottom: 18px;
}

.article-list {
    list-style: none;
    margin: 24px 0 8px;
}

.article-list li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 14px;
    font-size: 17px;
    line-height: 1.7;
    color: #555;
}

.article-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 11px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #111;
}

.article-list strong { color: var(--text-dark); font-weight: 600; }

.article-quote {
    border-left: 3px solid #111;
    padding: 6px 0 6px 28px;
    margin: 48px 0;
    font-size: 24px;
    line-height: 1.5;
    font-weight: 500;
    color: var(--text-dark);
    letter-spacing: -0.4px;
}

.article-figure {
    margin: 56px 0;
    border-radius: 24px;
    overflow: hidden;
}

.article-figure img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    display: block;
}

.article-cta {
    background-color: #f6f6f6;
    border: 1px solid #ececec;
    border-radius: 24px;
    padding: 44px;
    text-align: center;
    margin-top: 20px;
}

.article-cta h3 {
    color: #111;
    font-size: 26px;
    font-weight: 500;
    margin-bottom: 10px;
}

.article-cta p {
    color: rgba(0, 0, 0, 0.6);
    margin-bottom: 26px;
}

.article-cta .btn-primary {
    display: inline-block;
    background-color: #111;
    color: #fff;
    border-color: #111;
}

.article-cta .btn-primary:hover {
    background-color: transparent;
    color: #111;
}

.article-related {
    padding: 30px 5% 120px;
    background-color: #fff;
}

.article-related h2 {
    font-size: 40px;
    font-weight: 500;
    letter-spacing: -1px;
    color: var(--text-dark);
    margin-bottom: 50px;
    text-align: center;
}

/* auto-fit y no repeat(3): al retirarse el artículo de inversión quedan 2
   relacionados y con tres columnas fijas se veía un hueco al final de la fila. */
.related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 32px;
    max-width: 1300px;
    margin: 0 auto;
}

.related-grid .blog-media { height: 260px; }
.related-grid .blog-card h3 { font-size: 22px; }

/* ===== Blog: listado propio (/blog) ===== */

.blog-listado-header {
    /* La navbar de subpágina es fija: el titular arranca por debajo de ella */
    padding: 190px 5% 0;
    max-width: 1300px;
    margin: 0 auto;
}

.blog-listado-header h1 {
    font-size: 52px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -1.5px;
    margin: 18px 0 16px;
    color: var(--text-dark);
}

.blog-listado-header p {
    font-size: 18px;
    color: #666;
    max-width: 620px;
}

.blog-listado {
    padding: 60px 5% 120px;
    max-width: 1300px;
    margin: 0 auto;
}

.blog-listado-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 32px;
}

.blog-listado-grid .blog-media { height: 260px; }
.blog-listado-grid .blog-card h3 { font-size: 22px; }

/* Enlace al listado completo desde la portada */
.blog-ver-todos {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 48px;
    font-size: 16px;
    font-weight: 500;
    color: var(--text-dark);
    text-decoration: none;
    transition: gap 0.3s ease, color 0.3s ease;
}

.blog-ver-todos:hover {
    gap: 14px;
    color: var(--brand-red);
}

/* Mientras carga blog.json, y cuando no hay nada que mostrar */
.blog-vacio {
    padding: 40px 0;
    color: #888;
    font-size: 16px;
    text-align: center;
    grid-column: 1 / -1;
}

.blog-vacio-bloque {
    padding: 220px 5% 140px;
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

.blog-vacio-bloque h1 {
    font-size: 40px;
    font-weight: 500;
    letter-spacing: -1px;
    margin-bottom: 14px;
    color: var(--text-dark);
}

.blog-vacio-bloque p {
    color: #666;
    font-size: 17px;
    margin-bottom: 28px;
}

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

@media (max-width: 1024px) {
    .blog-listado-header { padding-top: 150px; }
    .blog-listado-header h1 { font-size: 38px; letter-spacing: -1px; }
    .blog-listado { padding: 44px 6% 90px; }
    .blog-listado-grid { grid-template-columns: 1fr; gap: 32px; }
    .blog-listado-grid .blog-media { height: 240px; }
    .blog-vacio-bloque { padding: 170px 6% 100px; }
    .blog-vacio-bloque h1 { font-size: 30px; }
}

@media (max-width: 1024px) {
    .article-hero { min-height: 480px; padding: 0 6% 60px; }
    .article-hero h1 { font-size: 38px; letter-spacing: -1px; }
    .article-hero p { font-size: 17px; }
    .article-body { padding: 70px 6%; }
    .article-lead { font-size: 19px; }
    .article-body h2 { font-size: 26px; }
    .article-quote { font-size: 20px; margin: 36px 0; }
    .article-figure img { height: 280px; }
    .article-cta { padding: 34px 24px; }
    .article-related { padding: 20px 6% 80px; }
    .article-related h2 { font-size: 30px; }
    .related-grid { grid-template-columns: 1fr; gap: 40px; }
    .related-grid .blog-media { height: 240px; }
}

/* ===== Testimonios (marquesina) ===== */
.wbm-testi-marquesina { color: #161b26; padding-block: clamp(70px, 8vw, 110px); padding-inline: clamp(16px, 4vw, 40px); background: #f4f7fc; }
.wbm-testi-marquesina__inner { max-width: none; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(28px, 4vw, 44px); }
.wbm-testi-marquesina__head { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; max-width: 1160px; margin-inline: auto; }
.wbm-testi-marquesina__pill { display: inline-block; padding: 5px 14px; font-size: 13px; font-weight: 600; letter-spacing: .04em; color: #4a5365; background: #fff; border: 1px solid #e8edf6; border-radius: 999px; box-shadow: 0 4px 14px rgba(40,70,160,.06); }
.wbm-testi-marquesina__title { margin: 0; font-size: clamp(1.9rem, 4.2vw, 3.1rem); line-height: 1.15; font-weight: 650; letter-spacing: -.02em; max-width: 20ch; text-wrap: balance; }
.wbm-testi-marquesina__desc { margin: 0; font-size: clamp(1rem, 1.6vw, 1.15rem); line-height: 1.45; color: #4a5365; max-width: 52ch; text-wrap: balance; }
.wbm-testi-marquesina__rows { display: flex; flex-direction: column; gap: 20px; }
.wbm-testi-marquesina__row { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.wbm-testi-marquesina__track { display: flex; width: max-content; animation: wbm-testi-marquesina-left 36s linear infinite; }
.wbm-testi-marquesina__track--reverse { animation-name: wbm-testi-marquesina-right; animation-duration: 42s; }
.wbm-testi-marquesina__group { display: flex; gap: 20px; padding-right: 20px; }
@keyframes wbm-testi-marquesina-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes wbm-testi-marquesina-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.wbm-testi-marquesina__item { margin: 0; width: min(320px, 78vw); flex-shrink: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; padding: clamp(22px, 3vw, 30px); background: #fff; border: 1px solid #e8edf6; border-radius: 18px; box-shadow: 0 12px 32px rgba(40,70,160,.07); }
.wbm-testi-marquesina__quote { margin: 0; font-size: 1.06rem; line-height: 1.5; color: #2a3140; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.wbm-testi-marquesina__meta { display: flex; align-items: center; gap: 12px; min-width: 0; }
.wbm-testi-marquesina__avatar { flex-shrink: 0; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; font-size: .82rem; font-weight: 700; color: var(--exim-primary, #01416A); background: color-mix(in srgb, var(--exim-primary, #01416A) 12%, #fff); }
.wbm-testi-marquesina__who { display: flex; flex-direction: column; min-width: 0; }
.wbm-testi-marquesina__author { font-weight: 650; font-size: .98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wbm-testi-marquesina__role { font-size: .9rem; color: #6a7385; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (prefers-reduced-motion: reduce) { .wbm-testi-marquesina__track { animation: none; } }

/* ==========================================================================
   Scroll experience de unidades ("Potenciamos el crecimiento")
   La mecánica vive en fleet-scroll.js; aquí el marco sticky, el crossfade
   entre capítulos y el modo apilado (.fleet-plain) para móvil/reduced-motion.
   ========================================================================== */
.fleet-scroll {
    /* ~150vh de recorrido por capítulo; el sticky descuenta 100vh */
    height: 700vh;
}

.fleet-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    /* svh: los toolbars del navegador móvil no hacen brincar el marco */
    height: 100svh;
    overflow: hidden;
    background-color: #0a0a0a;
}

.fleet-chapter {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.fleet-chapter.is-active {
    opacity: 1;
    pointer-events: auto;
}

.fleet-chapter video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.fleet-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 140px 5% 60px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.65), transparent);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.fleet-tag {
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 100px;
    padding: 8px 20px 8px 32px;
    font-size: 14px;
    color: #fff;
    position: relative;
}

.fleet-tag::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--brand-red);
}

.fleet-caption h3 {
    color: #fff;
    font-size: 56px;
    font-weight: 500;
    letter-spacing: -1.5px;
    line-height: 1.05;
}

/* El CTA "se habilita" cuando el capítulo llega a su frame final */
.fleet-cta {
    opacity: 0;
    transform: translateY(14px);
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.4s ease,
                background-color 0.3s ease, color 0.3s ease, padding 0.3s ease;
}

.fleet-chapter.is-ready .fleet-cta {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.fleet-dots {
    position: absolute;
    right: 28px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fleet-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.35);
    transition: all 0.3s ease;
}

.fleet-dots span.is-active {
    background-color: #fff;
    height: 24px;
    border-radius: 100px;
}

/* Modo apilado: móvil, tablet o prefers-reduced-motion */
.fleet-plain {
    height: auto;
}

.fleet-plain .fleet-sticky {
    position: static;
    height: auto;
    overflow: visible;
    background: none;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0 5%;
}

.fleet-plain .fleet-chapter {
    position: relative;
    opacity: 1;
    pointer-events: auto;
    border-radius: 24px;
    overflow: hidden;
    background-color: #0a0a0a;
}

.fleet-plain .fleet-chapter video {
    aspect-ratio: 16 / 9;
    height: auto;
}

/* El caption deja de sobreponerse al video: en tarjeta va debajo, así el
   título nunca se recorta por alto que sea */
.fleet-plain .fleet-caption {
    position: static;
    padding: 22px 22px 26px;
    background: none;
}

.fleet-plain .fleet-caption h3 {
    font-size: 30px;
    letter-spacing: -0.5px;
}

.fleet-plain .fleet-cta {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.fleet-plain .fleet-dots {
    display: none;
}

/* Anclas de detalle en RS Leasing: despejan la barra de navegación fija */
.sp-detail {
    scroll-margin-top: 90px;
}

/* ==========================================================================
   Sección de contacto (#contacto) y botón flotante de WhatsApp
   ========================================================================== */
.contacto-section {
    padding: 120px 5%;
    display: flex;
    gap: 60px;
    background-color: #ffffff;
    align-items: stretch;
}

.contacto-left {
    flex: 1;
}

.contacto-left h2 {
    font-size: 48px;
    font-weight: 500;
    letter-spacing: -1px;
    line-height: 1.1;
    margin: 24px 0;
}

.contacto-left > p {
    font-size: 16px;
    color: #666;
    max-width: 420px;
    line-height: 1.6;
    margin-bottom: 36px;
}

.contacto-medios {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.contacto-medio {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 20px;
    border: 1px solid #e6e6e6;
    border-radius: 18px;
    background-color: #fafafa;
    text-decoration: none;
    transition: border-color 0.3s ease, background-color 0.3s ease, transform 0.3s ease;
}

a.contacto-medio:hover {
    border-color: #111;
    background-color: #ffffff;
    transform: translateY(-2px);
}

.contacto-medio-icono {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #f0f0f0;
    color: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contacto-medio-texto {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.contacto-medio-label {
    font-size: 13px;
    font-weight: 500;
    color: #999;
}

.contacto-medio-valor {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-dark);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.contacto-mapa {
    flex: 1.1;
    min-height: 460px;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}

.contacto-mapa iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* Botón flotante de WhatsApp (lo inyecta contact-modal.js en todas las páginas) */
.whatsapp-float {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 950;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background-color: #25d366;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.whatsapp-float:hover {
    transform: scale(1.08);
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.3);
}

@media (max-width: 1024px) {
    .contacto-section {
        flex-direction: column;
        gap: 40px;
        padding: 80px 5%;
    }
    .contacto-mapa {
        min-height: 340px;
    }
}

@media (max-width: 768px) {
    .contacto-left h2 {
        font-size: 36px;
    }
    .whatsapp-float {
        right: 16px;
        bottom: 16px;
        width: 54px;
        height: 54px;
    }
}

/* ==========================================================================
   Sección de cotización (#cotizar)
   El formulario le pega a /api/cotizar (ver api/cotizar.js); aquí sólo la capa
   visual, calcada del lenguaje del sitio: capsule, inputs del modal y pills.
   ========================================================================== */
.cotizador-section {
    padding: 120px 5%;
    display: flex;
    gap: 60px;
    background-color: #f6f6f6;
    align-items: flex-start;
}

.cotizador-left {
    flex: 1;
    position: sticky;
    top: 120px;
}

.cotizador-left h2 {
    font-size: 48px;
    font-weight: 500;
    letter-spacing: -1px;
    line-height: 1.1;
    margin: 24px 0;
}

.cotizador-left p {
    font-size: 16px;
    color: #666;
    max-width: 400px;
    line-height: 1.6;
}

.cotizador-right {
    flex: 1.2;
    background-color: #ffffff;
    border-radius: 28px;
    padding: 40px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.06);
}

.cotizador-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.cot-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.cotizador-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #555;
}

.cotizador-form input[type="text"],
.cotizador-form input[type="tel"],
.cotizador-form input[type="email"],
.cotizador-form select {
    font-family: inherit;
    font-size: 15px;
    color: var(--text-dark);
    padding: 13px 16px;
    border: 1px solid #e2e2e2;
    border-radius: 14px;
    outline: none;
    background-color: #fafafa;
    transition: border-color 0.3s ease, background-color 0.3s ease;
    width: 100%;
}

.cotizador-form select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23555' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 42px;
    cursor: pointer;
}

.cotizador-form select:invalid {
    color: #999; /* el placeholder "Elige una opción" se ve como los demás */
}

.cotizador-form input:focus,
.cotizador-form select:focus {
    border-color: #111;
    background-color: #fff;
}

/* El atributo hidden debe ganarle a los display propios de estos bloques */
.cotizador-form label[hidden],
.cotizador-form[hidden],
.cot-exito[hidden] {
    display: none;
}

/* Colapso suave del formulario tras cotizar, y aparición del mensaje */
.cotizador-form {
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.cotizador-form.cot-colapsado {
    opacity: 0;
    transform: translateY(-12px);
    pointer-events: none;
}

.cot-exito {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.cot-exito.cot-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Campos de dinero: el "$" vive dentro del mismo marco que el input */
.cot-money {
    display: flex;
    align-items: center;
    border: 1px solid #e2e2e2;
    border-radius: 14px;
    background-color: #fafafa;
    transition: border-color 0.3s ease, background-color 0.3s ease;
    overflow: hidden;
}

.cot-money:focus-within {
    border-color: #111;
    background-color: #fff;
}

.cot-money .cot-currency {
    padding-left: 16px;
    font-size: 15px;
    color: #999;
}

.cotizador-form .cot-money input {
    border: none;
    background: transparent;
    padding-left: 6px;
}

.cot-hint {
    font-size: 12px;
    font-weight: 400;
    color: #999;
}

.cot-error {
    font-style: normal;
    font-size: 12px;
    font-weight: 500;
    color: var(--brand-red);
}

.cot-invalido input,
.cot-invalido select,
.cot-invalido .cot-money {
    border-color: var(--brand-red);
}

.cot-plazos {
    border: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cot-plazos legend {
    font-size: 13px;
    font-weight: 500;
    color: #555;
    margin-bottom: 6px;
}

.cot-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cot-pill input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.cot-pill span {
    display: inline-block;
    padding: 11px 22px;
    border: 1px solid #e2e2e2;
    border-radius: 100px;
    font-size: 14px;
    color: var(--text-dark);
    background-color: #fafafa;
    cursor: pointer;
    transition: all 0.3s ease;
}

.cot-pill input:checked + span {
    background-color: #111;
    border-color: #111;
    color: #fff;
}

.cot-pill input:focus-visible + span {
    outline: 2px solid #111;
    outline-offset: 2px;
}

.cot-flotilla {
    flex-direction: row !important;
    align-items: center;
    gap: 10px !important;
    cursor: pointer;
}

.cot-flotilla input {
    width: 18px;
    height: 18px;
    accent-color: #111;
    cursor: pointer;
}

.cot-flotilla span {
    font-size: 14px;
    color: var(--text-dark);
}

.cot-flotilla-nota {
    font-size: 12px;
    color: #999;
    line-height: 1.5;
    margin-top: -8px;
}

.cot-submit {
    align-self: flex-start;
    margin-top: 6px;
    cursor: pointer;
    font-family: inherit;
}

.cot-submit:disabled {
    opacity: 0.55;
    cursor: wait;
}

/* Panel de éxito: sustituye al formulario tras un envío correcto */
.cot-exito-titulo {
    font-size: 26px;
    font-weight: 500;
    letter-spacing: -0.5px;
    line-height: 1.25;
    margin-bottom: 24px;
}

.cot-exito-nota {
    font-size: 14px;
    color: #999;
    line-height: 1.6;
    margin-bottom: 28px;
}

.cot-otra {
    cursor: pointer;
    font-family: inherit;
}

/* La scroll experience corre igual en móvil que en PC; sólo se adapta la
   tipografía y el espacio del caption a pantallas chicas */
@media (max-width: 768px) {
    .fleet-caption {
        /* Deja sitio a la derecha para los puntos y evita que el título llegue
           al borde: "Camiones y Vehículos de Carga" es el más largo de los cuatro. */
        padding: 90px 6% 40px;
        gap: 10px;
    }
    .fleet-caption h3 {
        font-size: 26px;
        letter-spacing: -0.5px;
        max-width: 88%;
    }
    .fleet-tag {
        font-size: 13px;
        padding: 7px 16px 7px 28px;
    }
    .fleet-tag::before {
        left: 12px;
    }
    .fleet-dots {
        right: 14px;
    }
}

@media (max-width: 1024px) {
    .cotizador-section {
        flex-direction: column;
        gap: 40px;
        padding: 80px 5%;
        /* En columna, align-items controla el eje horizontal: con el flex-start
           de la regla base las dos columnas se ajustaban al ancho de su CONTENIDO,
           y la cinta de marcas (width: max-content, 2160px) estiraba la sección
           entera hasta desbordar la página. Con stretch ocupan el ancho disponible. */
        align-items: stretch;
    }
    .cotizador-left {
        position: static;
        min-width: 0;
    }
    .cotizador-right {
        min-width: 0;
    }
}

@media (max-width: 768px) {
    .cotizador-left h2 {
        font-size: 36px;
    }
    .cotizador-right {
        padding: 28px 20px;
        border-radius: 22px;
    }
    .cot-row {
        grid-template-columns: 1fr;
    }
    .cot-submit {
        align-self: stretch;
        text-align: center;
    }
}

/* ==========================================================================
   Portada: carrusel horizontal de categorías (sustituye al hero de vídeo).
   La mecánica vive en flota-carrusel.js. Reutiliza .fleet-chapter, .fleet-caption,
   .fleet-tag y .fleet-cta del bloque de flota que antes estaba a media página.
   ========================================================================== */
.flota-hero {
    position: relative;
    margin: 8px;
    height: 92vh;
    min-height: 640px;
    border-radius: 32px;
    overflow: hidden;
    background-color: #0a0a0a; /* mientras el primer poster no ha pintado */
}

.flota-carrusel {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

/* Pista: los cuatro vídeos son elementos hermanos en fila y la pista se desplaza
   a la izquierda. El transform lo pone el JS: translateX(-i * 100%). */
.flota-pista {
    position: absolute;
    inset: 0;
    display: flex;
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

/* Pisa el position:absolute/inset:0/opacity:0 del bloque antiguo, que hacía
   crossfade de los cuatro capítulos sobre el mismo hueco. */
.flota-pista .fleet-chapter {
    position: relative;
    inset: auto;
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    opacity: 1;
    pointer-events: auto;
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    .flota-pista { transition: none; }
}

/* Velo superior: el rótulo tiene que leerse sobre cualquier fotograma, y los
   cuatro vídeos son muy distintos entre sí. Abajo no hace falta porque
   .fleet-caption ya trae su propio degradado. Va sobre la pista, no dentro. */
.flota-carrusel::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(to bottom,
        rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.12) 30%, rgba(0, 0, 0, 0) 52%);
}

/* Rótulo de una línea, arriba a la derecha: acompaña sin tapar el vídeo. Sigue
   siendo el único h1 de la página, sólo que discreto. */
.flota-rotulo {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3;
    max-width: 62%;
    padding: 116px 5% 0 0;
    text-align: right;
    color: #ffffff;
    font-size: 26px;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -0.3px;
    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5);
}

@media (min-width: 1025px) {
    /* En escritorio cabe de sobra en una línea; en pantallas chicas se deja partir */
    .flota-rotulo { white-space: nowrap; }
}

/* El rótulo de categoría viaja con su vídeo y va por encima del velo */
.flota-carrusel .fleet-caption {
    z-index: 3;
}

/* Puntos en horizontal, acompañando el movimiento de la pista. Van abajo a la
   derecha para no chocar con el caption, que ocupa la esquina izquierda. */
.flota-puntos {
    position: absolute;
    right: calc(5% - 8px); /* compensa el padding lateral de la zona de toque */
    bottom: 46px;
    z-index: 4;
    display: flex;
    gap: 0; /* la separación la da el padding de cada botón */
}

/* El punto se ve de 8px pero la zona de toque mide 24x40: el padding la agranda y
   background-clip evita que el color se extienda a él. Con 8x8 era intocable en
   un teléfono. */
.flota-puntos button {
    box-sizing: content-box;
    width: 8px;
    height: 8px;
    padding: 16px 8px;
    border: none;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.4);
    background-clip: content-box;
    cursor: pointer;
    transition: width 0.3s ease, background-color 0.3s ease, border-radius 0.3s ease;
}

.flota-puntos button.is-active {
    background-color: #ffffff;
    width: 26px;
    border-radius: 100px;
}

.flota-puntos button:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
}

@media (max-width: 1024px) {
    .flota-hero {
        height: auto;
        min-height: 600px;
    }
    .flota-rotulo {
        padding: 100px 6% 0 0;
        max-width: 78%;
        font-size: 19px;
    }
    .flota-puntos {
        right: 6%;
        bottom: 26px;
    }
}

@media (max-width: 768px) {
    .flota-hero {
        margin: 6px;
        min-height: 540px;
        border-radius: 24px;
    }
    .flota-rotulo {
        padding: 92px 6% 0 0;
        max-width: 84%;
        font-size: 16px;
    }
}

/* ==========================================================================
   Segunda sección: el CTA de cotizar, que antes iba encima del vídeo.
   ========================================================================== */
/* Fondo blanco y sin margen/radio: se comporta como el resto de las secciones
   claras del sitio (.faq-section, .blog-section), sólo más baja. */
.cta-cotiza {
    padding: 62px 5%;
    background-color: #ffffff;
    text-align: center;
}

.cta-cotiza-inner {
    max-width: 620px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.cta-cotiza h2 {
    color: #111111;
    font-size: 38px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -1px;
}

.cta-cotiza p {
    color: #666666;
    font-size: 17px;
    line-height: 1.6;
}

/* El azul de marca se queda como acento fino entre el texto y el botón: sustituye
   al fondo azul y a la píldora que había antes. */
.cta-cotiza-raya {
    display: block;
    width: 56px;
    height: 3px;
    border-radius: 3px;
    background-color: #01416A;
    margin: 4px 0 2px;
}

.cta-cotiza-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 17px 40px;
    border: 1px solid var(--brand-red);
    border-radius: 100px;
    background-color: var(--brand-red);
    color: #ffffff;
    font-size: 17px;
    font-weight: 500;
    text-decoration: none;
    /* Misma animación que "Conoce más" en el hero: crece el padding e invierte color */
    transition: all 0.3s ease;
}

.cta-cotiza-btn:hover {
    padding: 17px 56px;
}

.cta-cotiza-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
}

.cta-cotiza-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 17px 32px;
    border: 1px solid #25D366;
    border-radius: 100px;
    background-color: #25D366;
    color: #ffffff;
    font-size: 17px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
}

.cta-cotiza-whatsapp:hover {
    padding: 17px 48px;
}

@media (max-width: 1024px) {
    .cta-cotiza { padding: 52px 6%; }
    .cta-cotiza h2 { font-size: 30px; letter-spacing: -0.5px; }
    .cta-cotiza p { font-size: 16px; }
}

@media (max-width: 768px) {
    .cta-cotiza { padding: 44px 6%; }
    .cta-cotiza h2 { font-size: 26px; }
    .cta-cotiza-btn { padding: 15px 32px; font-size: 16px; }
}

/* ==========================================================================
   Precios preferenciales + cinta de marcas, en la columna de texto del
   cotizador. Antes era una banda roja dentro del formulario y estorbaba.
   ========================================================================== */
.cot-preferenciales {
    margin-top: 30px;
    padding-top: 22px;
    border-top: 1px solid #e2e2e2;
}

.cot-preferenciales p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-dark);
    max-width: 400px;
}

.cot-preferenciales strong {
    font-weight: 600;
}

/* Cápsula roja, con el mismo patrón que .btn-primary del sitio (fondo y borde del
   mismo color, y al pasar el cursor se invierte). No un enlace subrayado. */
.btn-preferenciales {
    display: inline-block;
    margin-top: 14px;
    padding: 12px 26px;
    border: 1px solid var(--brand-red);
    border-radius: 100px;
    background-color: var(--brand-red);
    color: #ffffff;
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-preferenciales:hover {
    background-color: #ffffff;
    color: var(--brand-red);
}

/* Cinta contenida (no de borde a borde como la de prensa de arriba). El juego de
   marcas va duplicado en el HTML y el padding-right de cada marca hace el hueco,
   así el -50% cae exacto y el bucle no da un salto al reiniciarse. */
.marcas-cinta {
    margin-top: 18px;
    max-width: 420px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marcas-pista {
    display: flex;
    width: max-content;
    animation: marcas-desfile 30s linear infinite;
}

/* Los SVG vienen en gris horneado (el CSS no alcanza el interior de un <img>).
   El padding-right hace el hueco entre logos: así el ancho total es exactamente
   dos juegos y el -50% de la animación cae justo. */
.marcas-pista img {
    flex-shrink: 0;
    height: 26px;
    width: 26px;
    padding-right: 34px;
    box-sizing: content-box;
}

@keyframes marcas-desfile {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

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

@media (max-width: 1024px) {
    .marcas-cinta { max-width: 100%; }
    .cot-preferenciales p { max-width: none; }
}

/* ==========================================================================
   Zonas de toque en móvil. Van al final del archivo a propósito: las reglas
   base de .logo a y .cot-flotilla input aparecen más abajo que la media query
   de 768px, así que ahí un override con la misma especificidad perdía por orden.
   ========================================================================== */
@media (max-width: 768px) {
    .logo a {
        display: inline-block;
        padding: 5px 0;
    }
    .cot-flotilla {
        padding: 6px 0;
    }
    .cot-flotilla input {
        width: 22px;
        height: 22px;
    }
}

/* ==========================================================================
   Páginas de cotizador por canal (/instagram, /facebook, /google, /referido,
   /whatsapp)

   Una sola pantalla: logo, titular, formulario y pie mínimo. Sin navbar y sin
   secciones, porque quien llega viene de un "Cotiza ahora" de una historia y
   cualquier otro enlace es una fuga. Reutiliza .cotizador-right y todo el
   bloque .cot-* del cotizador del inicio, así el formulario se ve idéntico.
   ========================================================================== */
.pagina-canal {
    background-color: #f6f6f6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.canal-cabecera {
    padding: 28px 5% 0;
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
}

.canal-cabecera .logo-img {
    height: 38px;
    width: auto;
    display: block;
}

.canal-main {
    flex: 1;
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    padding: 40px 5% 60px;
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 56px;
    align-items: start;
}

.canal-intro {
    /* Acompaña al formulario mientras se llena, en lugar de irse hacia arriba */
    position: sticky;
    top: 40px;
}

.canal-intro h1 {
    font-size: 46px;
    font-weight: 500;
    letter-spacing: -1.5px;
    line-height: 1.1;
    color: var(--text-dark);
    margin: 22px 0;
}

.canal-intro p {
    font-size: 16px;
    color: #666;
    line-height: 1.6;
    max-width: 380px;
}

.canal-pie {
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    padding: 0 5% 48px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: flex-start;
}

.canal-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    border-radius: 100px;
    background-color: #ffffff;
    border: 1px solid #e6e6e6;
    color: var(--text-dark);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: border-color 0.3s ease, transform 0.3s ease;
}

.canal-whatsapp:hover {
    border-color: #25d366;
    transform: translateY(-2px);
}

.canal-whatsapp svg { color: #25d366; }

.canal-legal,
.canal-copy {
    font-size: 13px;
    color: #8a8a8a;
    line-height: 1.6;
}

.canal-legal a {
    color: #666;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.canal-legal a:hover { color: var(--brand-red); }

@media (max-width: 900px) {
    /* En celular el titular va arriba y el formulario debajo: es el orden en que
       se lee, y el sticky no tiene sentido cuando ocupa la pantalla completa. */
    .canal-main {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 28px 5% 44px;
    }
    .canal-intro { position: static; }
    .canal-intro h1 { font-size: 34px; letter-spacing: -1px; margin: 16px 0 12px; }
    .canal-intro p { font-size: 15px; max-width: none; }
    .canal-cabecera { padding-top: 22px; }
    .canal-cabecera .logo-img { height: 32px; }
    .cotizador-right { padding: 26px 20px; border-radius: 22px; }
    .canal-pie { padding-bottom: 36px; }
}