/* -- index.css -- */

/* ================================================================
   RESET Y BASE
   ================================================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', Arial, sans-serif;
    background: #eef2f7;
    color: #1a2d3d;
    /* El navbar ahora es "fixed" (ver #mainNavbar) y no ocupa espacio en el flujo normal,
       así que hay que dejarle este hueco arriba para que no tape el contenido.
       El hero de home.blade.php lo cancela con un margen negativo para ir detrás del navbar. */
    padding-top: var(--nav-h, 66px);
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
}


/* ================================================================
   NAVBAR (menú superior)
   ================================================================ */

/* Estilo "píldora flotante": el <nav> es solo una franja transparente fija arriba y el
   .container de adentro es la cápsula oscura translúcida. Las clases .navbar-solid y
   .menu-open las usa home_scroll.js / rutas.js, por eso siguen aquí. */
#mainNavbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    padding: 14px 16px 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    pointer-events: none;            /* la franja no bloquea clics; solo la cápsula */
}

#mainNavbar > .container {
    pointer-events: auto;
    max-width: 1240px;
    padding: 8px 28px;
    border-radius: 999px;
    background: rgba(9, 34, 48, .78);
    border: 1px solid rgba(255, 255, 255, .10);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .06);
    transition: background-color .35s ease, box-shadow .35s ease, border-radius .25s ease;
}

/* Al hacer scroll (o con el menú móvil abierto) la cápsula se hace más opaca */
#mainNavbar.navbar-solid > .container,
#mainNavbar.menu-open > .container {
    background: rgba(8, 28, 41, .94);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06);
}

/* Con el menú móvil abierto la cápsula deja de ser tan redonda */
#mainNavbar.menu-open > .container {
    border-radius: 28px;
}

/* Logo (el mismo de antes, ajustado para caber en la cápsula) */
.navbar-brand {
    margin-left: -8px;
    padding: 0;
}

.navbar-brand {
    display: flex;
    align-items: center;
}

.brand-logo-img {
    width: 68px;
    height: 68px;
    border-radius: 18px;
    object-fit: cover;
    margin: -10px 0;
    /* Baja el logo para centrarlo en la cápsula. Sube o baja este valor (px) para afinarlo */
    transform: translateY(5px);
}

/* Icono delante del texto de cada módulo */
.nav-icon {
    margin-right: 10px;
    font-size: .95em;
    opacity: .9;
}

/* Lista de enlaces del centro */
.nav-menu {
    gap: 4px;
}

@media (min-width: 992px) {
    .nav-menu {
        gap: 22px;
    }
}

/* Enlaces (Inicio, Conocenos, Rutas, Planes): texto claro, y el activo va en píldora verde */
.nav-custom {
    color: rgba(255, 255, 255, .92) !important;
    font-size: 1.15rem;
    font-weight: 600;
    padding: 10px 26px !important;
    border-radius: 999px;
    border-bottom: 0;
    transition: color .25s ease, background-color .25s ease, box-shadow .25s ease;
}

.nav-custom:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, .10);
}

/* La clase "active" la cambia home_scroll.js según la sección que se está viendo */
.nav-custom.active {
    color: #fff !important;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    box-shadow: 0 4px 14px rgba(34, 197, 94, .35);
}

/* Botón de login de la derecha: bordes en píldora, igual que la barra */
.nav-login {
    margin-right: -8px;
}

.btn-login {
    background: linear-gradient(135deg, #00b7ff, #2563eb);
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, .25);
    padding: 11px 26px;
    border-radius: 999px;
    font-size: 1.05rem;
    font-weight: 700;
    box-shadow: 0 6px 18px rgba(0, 183, 255, .35);
    transition: all 0.25s ease;
    text-decoration: none;
}

.btn-login:hover {
    background: linear-gradient(135deg, #22c8ff, #3b82f6);
    box-shadow: 0 8px 24px rgba(0, 183, 255, .5);
    transform: translateY(-1px);
}

/* Botón hamburguesa (celular), en claro para la cápsula oscura */
.navbar-toggler {
    border-color: rgba(255, 255, 255, .35);
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 3px rgba(34, 197, 94, .35);
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

@media (max-width: 991.98px) {
    #mainNavbar { padding: 10px 10px 0; }
    #mainNavbar > .container { padding: 8px 16px; }
    .nav-custom { padding: 10px 18px !important; font-size: 1.05rem; }
}


/* ================================================================
   HERO (carrusel + texto/botones/stats)
   ================================================================ */

:root {
    /* Azul LED (R G B). Cambia solo este valor para cambiar el color de las rayas */
    --led: 0 183 255;
    /* Alto del navbar. home_scroll.js lo mide y lo actualiza; este valor es solo el de respaldo */
    --nav-h: 66px;
}

/* El hero queda FIJO (sticky) detrás del navbar (que ahora flota transparente encima) y
   ocupa toda la pantalla. El resto de la página (.page-content) sube por encima de él al
   hacer scroll: efecto "cortina".
   100svh = alto real visible en móviles (descuenta la barra del navegador); 100vh es el respaldo. */
.hero-carousel {
    position: sticky;
    top: 0;
    /* Cancela el padding-top del body para llegar hasta el borde real de la pantalla,
       y quedar detrás del navbar en vez de debajo de él */
    margin-top: calc(-1 * var(--nav-h));
    z-index: 0;
    overflow: hidden;
    height: 100vh;
    height: 100svh;
    /* Color de respaldo: si por un instante no hay slide visible, no se ve el fondo claro de la página */
    background: #1a2d3d;
}

/* Raya LED superior: a la altura del navbar, justo donde el hero deja de estar tapado por
   él y se ve completo. Su resplandor se abre hacia adentro de la imagen. */
.hero-carousel::before {
    display: none;   /* con el navbar flotante ya no hay borde inferior contra el cual pegar esta raya */
    content: "";
    position: absolute;
    top: var(--nav-h);
    left: 0;
    right: 0;
    height: 2px;
    z-index: 4;
    pointer-events: none;
    background: rgb(var(--led));
    box-shadow:
        0 0 6px 1px rgb(var(--led) / .9),
        0 0 18px 4px rgb(var(--led) / .45);
}

/* Velo oscuro: se va oscureciendo el hero a medida que la página sube y lo cubre.
   --cover va de 0 a 1 y lo actualiza home_scroll.js. */
.hero-carousel::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: #0a1a3a;
    opacity: calc(var(--cover, 0) * .65);
}

/* ================================================================
   PANEL QUE SUBE SOBRE EL HERO (buscador, tarjetas, avisos y footer)
   ================================================================ */
.page-content {
    position: relative;
    z-index: 1;                 /* por encima del hero fijo */
    display: flow-root;         /* evita que el margen negativo de la tarjeta de búsqueda "escape" del panel */
    background: #eef2f7;        /* fondo sólido: es lo que tapa al hero cuando sube */
}

/* Raya LED inferior del hero: ahora va en el borde superior del panel, así viaja con él al subir.
   Su resplandor se abre hacia arriba (sobre el hero) y hacia abajo (sobre el panel). */
.page-content::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 1;                 /* la tarjeta de búsqueda (z-index 2) queda por encima de la raya */
    pointer-events: none;
    background: rgb(var(--led));
    box-shadow:
        0 0 6px 1px rgb(var(--led) / .9),
        0 0 18px 4px rgb(var(--led) / .45);
}

.hero-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    /* El fondo (imagen o degradado) sí llega hasta arriba, detrás del navbar; solo el
       texto/botones se corren hacia abajo para no quedar tapados por él */
    padding-top: var(--nav-h);
    opacity: 0;
    visibility: hidden;
    background: linear-gradient(170deg, #0c3788 8%, #265996 54%, #1a2d3d 92%);
    background-size: cover;
    background-position: center;
    /* Slide que SALE: se queda opaca 0.6s (tapada por la que entra) y luego se oculta de golpe.
       Así nunca se ve el fondo de la página entre una slide y otra. */
    transition: opacity 0s linear 0.6s, visibility 0s linear 0.6s;
}

.hero-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
    /* Slide que ENTRA: aparece con fundido encima de la anterior */
    transition: opacity 0.6s ease, visibility 0s;
}

/* Capa sobre las fotos (slides 2 y 3).
   Antes era un azul casi opaco (~85%) que tapaba la imagen. Ahora solo oscurece la zona
   del texto (izquierda) y se desvanece hacia la derecha, para que la foto se vea.
   Si la quieres aún más suave, baja los .78 / .55 / .10 de abajo; para quitarla del todo,
   borra este bloque completo. */
.hero-slide.has-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(0deg, rgba(12, 30, 62, .35) 0%, rgba(12, 30, 62, 0) 30%),
        linear-gradient(90deg, rgba(12, 30, 62, .78) 0%, rgba(12, 30, 62, .55) 40%, rgba(12, 30, 62, .10) 75%, rgba(12, 30, 62, 0) 100%);
}

/* En pantallas angostas el texto ocupa todo el ancho, así que la capa pasa a ser pareja */
@media (max-width: 768px) {
    .hero-slide.has-bg::before {
        background: rgba(12, 30, 62, .55);
    }
}

/* Con la capa más clara, el texto necesita un poco más de contraste sobre las fotos */
.hero-slide.has-bg .hero-title,
.hero-slide.has-bg .hero-desc {
    text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
}

.hero-slide.has-bg .hero-desc {
    color: rgba(255, 255, 255, .88);
}

.hero-slide.has-bg .hero-tag {
    color: rgba(255, 255, 255, .8);
    border-color: rgba(255, 255, 255, .35);
}

.hero-slide .container {
    position: relative;
    z-index: 2;
}

/* El texto sube un poco y se desvanece mientras el panel cubre el hero */
.hero-slide .container {
    transform: translateY(calc(var(--cover, 0) * -36px));
    opacity: calc(1 - var(--cover, 0) * 1.2);
}

.hero-dots {
    position: absolute;
    bottom: 46px;
    left: 0;
    right: 0;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: 8px;
}

/* Antes eran puntos que solo cambiaban de color. Ahora son barritas que se ven
   vacías, llenas (ya reproducidas) o llenándose en vivo (la que está activa):
   ver DURACION_SLIDE y showSlide() en hero_carousel.js. */
.hero-dot {
    position: relative;
    width: 34px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .3);
    border: none;
    padding: 0;
    cursor: pointer;
    overflow: hidden;
}

.hero-dot-fill {
    position: absolute;
    inset: 0;
    width: 0%;
    background: #22c55e;
    border-radius: inherit;
}

.hero {
    padding: 68px 0 60px;
    background: linear-gradient(170deg, #0c3788 8%, #265996 54%, #1a2d3d 92%);
}

.hero-tag {
    display: inline-block;
    background: transparent;
    color: rgba(255, 255, 255, 0.45);
    border: 2px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    font-size: 0.66rem;
    font-weight: 700;
    padding: 5px 13px;
    margin-bottom: 22px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.hero-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.9rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.1;
    margin-bottom: 16px;
    max-width: 580px;
}

/* Palabras resaltadas del título: azul claro (se lee bien sobre el fondo azul oscuro) */
.hero-accent {
    color: rgb(var(--led));
}

.hero-desc {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 30px;
    max-width: 460px;
}

.hero-btns {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.btn-hero-primary {
    background: #22c55e;
    color: #fff;
    padding: 11px 24px;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.25s ease;
}

.btn-hero-primary:hover {
    background: #16a34a;
    transform: translateY(-2px);
}

.btn-hero-secondary {
    border: 2px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.25s ease;
}

.btn-hero-secondary i {
    margin-left: 6px;
    font-size: 0.75rem;
}

.btn-hero-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.hero-stats {
    display: flex;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
}

.hero-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hero-stat-num {
    font-family: 'Space Grotesk', sans-serif;
    color: #22c55e;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
}

.hero-stat-label {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.75rem;
}

/* Si la pantalla es muy baja el hero no cabe "fijo": se desactiva el efecto y se comporta como antes */
@media (max-height: 600px) {
    .hero-carousel {
        position: relative;
        top: auto;
        height: 500px;
    }
    .hero-slide { padding-top: 0; }
    .hero-carousel::after { display: none; }
    .hero-slide .container {
        transform: none;
        opacity: 1;
    }
}

@media (max-width: 992px) {
    .hero-title { font-size: 2.3rem; }
}
@media (max-width: 576px) {
    .hero { padding: 50px 0 40px; }
    .hero-title { font-size: 1.9rem; }
    .hero-stats { gap: 22px; }
}


/* ================================================================
   BARRA DE BÚSQUEDA - tarjeta sobrepuesta al hero
   ================================================================ */

.search-section {
    padding: 0 0 24px;
}

.search-card {
    /* Dark blue like footer */
    background: linear-gradient(170deg, #0c3788 8%, #0a1f6e 42%, #0a1a3a 92%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3), 0 0 24px rgba(0, 183, 255, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    padding: 24px;
    margin-top: -28px;
    position: relative;
    z-index: 2;
}

.search-label {
    color: #00c8ff;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.search-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 20px;
}

.search-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 183, 255, 0.15);
    border-radius: 12px;
    color: #00c8ff;
    font-size: 1.25rem;
}

.search-subtitle {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    margin: 0;
}

.search-box {
    background: rgba(255, 255, 255, 0.06);
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    display: flex;
    align-items: center;
    padding: 13px 14px;
    gap: 10px;
    position: relative;
    transition: border 0.25s ease, box-shadow 0.25s ease;
}

.search-box:focus-within {
    border-color: #00c8ff;
    box-shadow: 0 0 0 3px rgba(0, 200, 255, 0.15), 0 0 14px 2px rgba(0, 200, 255, 0.35);
}

.search-dot {
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background: #00c8ff;
    flex-shrink: 0;
}

.search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #ffffff;
    font-size: 0.88rem;
}

.search-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.search-btn {
    background: #00c8ff;
    color: #031a26;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    flex-shrink: 0;
    position: relative;
    transition: all 0.25s ease;
}

.search-btn:hover {
    background: #00d6ff;
    box-shadow: 0 0 14px rgba(0, 200, 255, 0.6);
}

/* Mientras buscar_rutas_index.js espera la respuesta: se oculta la lupa y gira
   un spinner en su lugar; el botón no se puede volver a pulsar mientras tanto */
.search-btn.is-loading {
    cursor: wait;
    pointer-events: none;
}

.search-btn.is-loading i {
    visibility: hidden;
}

.search-btn.is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: girar-spinner .6s linear infinite;
}

@keyframes girar-spinner {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .search-btn.is-loading::after {
        animation: none;
    }
}


/* ================================================================
   TABLA DE RESULTADOS DE BÚSQUEDA (inside dark card)
   ================================================================ */

.search-results {
    margin-top: 16px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
}

.results-title {
    padding: 12px 16px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.78rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.results-title span {
    color: #00c8ff;
    font-weight: 700;
}

.results-table {
    width: 100%;
    border-collapse: collapse;
}

.results-table th {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.72rem;
    padding: 10px 14px;
    text-align: left;
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.results-table td {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.78rem;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.results-table tr:last-child td {
    border-bottom: none;
}

.results-table tr:hover td {
    background: rgba(0, 200, 255, 0.1);
}

.ruta-badge {
    background: rgba(0, 200, 255, 0.2);
    color: #00c8ff;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.68rem;
    font-weight: 700;
}

/* ================================================================
   MV FINDER (Planifica tu recorrido) - inside dark card
   ================================================================ */
.mv-finder { display: flex; flex-direction: column; gap: 18px; }
.mv-finder-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 4px;
}
.mv-finder-head strong {
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
}
.mv-finder-head span {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
}
.mv-field-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.mv-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mv-field label {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.8rem;
    font-weight: 600;
}
.mv-field select {
    background: rgba(255, 255, 255, 0.08);
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    color: #ffffff;
    font-size: 0.95rem;
    padding: 12px 14px;
    outline: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.mv-field select::placeholder { color: rgba(255, 255, 255, 0.4); }
.mv-field select:hover { border-color: rgba(255, 255, 255, 0.25); }
.mv-field select:focus {
    border-color: #00c8ff;
    box-shadow: 0 0 0 4px rgba(0, 200, 255, 0.2);
}
.mv-field select option { background: #0a1a3a; color: #ffffff; }
.mv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: all 0.25s ease;
}
.mv-btn-primary {
    background: #00c8ff;
    color: #031a26;
    box-shadow: 0 6px 20px rgba(0, 183, 255, 0.3);
    margin-top: 6px;
}
.mv-btn-primary:hover {
    background: #00d6ff;
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0, 183, 255, 0.4);
}
.mv-btn-primary:active { transform: translateY(0); }
.mv-finder-result {
    margin-top: 12px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.85rem;
    display: none;
}
.mv-finder-result:not(:empty) { display: block; }


/* ================================================================
   RUTAS MÁS CERCANAS + TU PRÓXIMA BUSETA - Home
   ================================================================ */

.nearby-section {
    padding: 16px 0 32px;
}

.section-header {
    text-align: center;
    margin-bottom: 32px;
}

.section-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: #1a2d3d;
    margin-bottom: 8px;
    letter-spacing: -0.02em;
}

.section-subtitle {
    font-size: 1rem;
    color: #6b7a8d;
    font-weight: 400;
    max-width: 520px;
    margin: 0 auto;
}

.nearby-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.nearby-card {
    background: #ffffff;
    border: 2px solid #dde3ec;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(26, 45, 61, 0.06), 0 2px 4px rgba(26, 45, 61, 0.04);
    padding: 0;
    overflow: hidden;
    transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.15s ease;
}

.nearby-card:hover {
    box-shadow: 0 8px 20px rgba(26, 45, 61, 0.08), 0 3px 6px rgba(26, 45, 61, 0.05);
    border-color: #cbd5e1;
    transform: translateY(-2px);
}

.card-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 24px 24px 16px;
}

.card-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef2f7;
    border-radius: 12px;
    color: #2563eb;
    font-size: 1.25rem;
}

.card-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    color: #1a2d3d;
    margin: 0 0 4px;
}

.card-subtitle {
    font-size: 0.8rem;
    color: #94a3b8;
    margin: 0;
}

/* Route list */
.route-list {
    list-style: none;
    margin: 0;
    padding: 0 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.route-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.route-row:hover {
    border-color: #3b82f6;
    background: #eff6ff;
    transform: translateX(4px);
}

.route-badge {
    width: 44px;
    height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #2563eb;
    color: #000000;
    font-size: 0.875rem;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
}

.route-info { flex: 1; min-width: 0; }

.route-name {
    display: block;
    font-weight: 600;
    color: #1a2d3d;
    font-size: 0.9rem;
    margin-bottom: 2px;
}

.route-path {
    display: block;
    font-size: 0.775rem;
    color: #6b7a8d;
}

.route-path i { font-size: 0.65rem; margin: 0 6px; color: #cbd5e1; }

.route-time {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #000000;
    white-space: nowrap;
}

/* Buseta list */
.buseta-list {
    list-style: none;
    margin: 0;
    padding: 0 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.buseta-card {
    padding: 16px;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.buseta-card:hover {
    border-color: #3b82f6;
    box-shadow: 0 4px 12px rgba(26, 45, 61, 0.06);
}

.buseta-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.buseta-info { display: flex; flex-direction: column; gap: 3px; }

.buseta-name {
    font-weight: 700;
    color: #1a2d3d;
    font-size: 1rem;
}

.buseta-plate {
    font-size: 0.8rem;
    color: #6b7a8d;
    font-family: 'Space Grotesk', monospace;
    letter-spacing: 0.03em;
}

.buseta-status {
    flex-shrink: 0;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: #dcfce7;
    color: #16a34a;
    animation: pulse-ring 2.5s ease-out infinite;
}

.buseta-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 10px;
    border-top: 2px solid #e2e8f0;
}

.buseta-rating { display: flex; align-items: center; gap: 8px; }

.stars { color: #f59e0b; font-size: 0.75rem; letter-spacing: 1px; }

.rating-num { font-weight: 600; color: #1a2d3d; font-size: 0.85rem; }

.rating-trips { font-size: 0.7rem; color: #94a3b8; }

.buseta-eta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 0.775rem;
    font-weight: 600;
    color: #000000;
    background: #fffbeb;
}

/* Card link */
.card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 24px 24px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #2563eb;
    text-decoration: none;
    transition: color 0.2s ease, gap 0.2s ease;
}

.card-link:hover { color: #1d4ed8; gap: 12px; }

@keyframes pulse-ring {
    0% { box-shadow: 0 0 0 3px currentColor, 0 0 0 0 currentColor; }
    100% { box-shadow: 0 0 0 3px currentColor, 0 0 0 12px transparent; }
}

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


/* ================================================================
   AVISOS SECTION - Home
   ================================================================ */

.avisos-section {
    padding: 16px 0 32px;
}

.avisos-card {
    background: #ffffff;
    border: 2px solid #dde3ec;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(26, 45, 61, 0.06), 0 2px 4px rgba(26, 45, 61, 0.04);
    padding: 0;
    overflow: hidden;
    transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.15s ease;
}

.avisos-card:hover {
    box-shadow: 0 8px 20px rgba(26, 45, 61, 0.08), 0 3px 6px rgba(26, 45, 61, 0.05);
    border-color: #cbd5e1;
    transform: translateY(-2px);
}

.aviso-list {
    list-style: none;
    margin: 0;
    padding: 0 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.aviso-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.aviso-row:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(26, 45, 61, 0.06);
}

.aviso-indicator {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-top: 3px;
    box-shadow: 0 0 0 3px currentColor;
    animation: pulse-ring 2.5s ease-out infinite;
}

.aviso-critical .aviso-indicator { color: #ef4444; }
.aviso-warning .aviso-indicator { color: #f59e0b; }
.aviso-normal .aviso-indicator { color: #16a34a; }

.aviso-content { flex: 1; min-width: 0; }

.aviso-title {
    display: block;
    font-weight: 500;
    color: #1a2d3d;
    font-size: 0.9rem;
    margin-bottom: 4px;
}

.aviso-meta {
    display: block;
    font-size: 0.775rem;
    color: #6b7a8d;
}

.aviso-badge {
    flex-shrink: 0;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.aviso-critical .aviso-badge { background: #fef2f2; color: #ef4444; }
.aviso-warning .aviso-badge { background: #fffbeb; color: #f59e0b; }
.aviso-normal .aviso-badge { background: #f0fdf4; color: #16a34a; }


/* ================================================================
   PULSE ANIMATION
   ================================================================ */
@keyframes pulse-ring {
    0% { box-shadow: 0 0 0 3px currentColor, 0 0 0 0 currentColor; }
    100% { box-shadow: 0 0 0 3px currentColor, 0 0 0 12px transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .buseta-status,
    .aviso-indicator { animation: none; }
}


/* ================================================================
   APARECER AL HACER SCROLL — las tarjetas con ".scroll-reveal" están
   ocultas al cargar y se revelan con un fundido + leve subida cuando
   el usuario llega hasta ellas. home_scroll.js le agrega ".is-visible"
   la primera vez que entran en pantalla.
   ================================================================ */
.scroll-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .6s ease, transform .6s ease;
}

.scroll-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* La segunda tarjeta (Tu próxima buseta) aparece un poco después que
   la primera, para que no salten las dos exactamente a la vez */
.nearby-grid .nearby-card:nth-child(2) {
    transition-delay: .12s;
}

@media (prefers-reduced-motion: reduce) {
    .scroll-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


/* ================================================================
   CÓMO CONOCERNOS (#nosotros)
   Presenta qué es CFV. Usa las mismas tarjetas blancas de bordes
   suaves del resto del home; solo el panel de la ruta lleva el
   degradado azul del hero. Los bloques con ".scroll-reveal" los
   revela home_scroll.js al llegar a ellos.
   ================================================================ */

/* Scroll suave al ir a una sección desde el navbar o los botones (solo si el usuario no pidió menos movimiento) */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

.nosotros-section {
    padding: 30px 0 60px;
    /* Al saltar aquí desde el navbar (fijo), deja un respiro para que el título no quede tapado */
    scroll-margin-top: calc(var(--nav-h, 66px) - 40px);
}

/* --- Encabezado --- */
.nosotros-head {
    max-width: 740px;
    margin: 0 auto 44px;
    text-align: center;
}

.nosotros-tag {
    display: inline-block;
    margin-bottom: 14px;
    padding: 5px 13px;
    border: 2px solid #dde3ec;
    border-radius: 20px;
    background: #fff;
    color: #6b7a8d;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.nosotros-title {
    margin-bottom: 14px;
    color: #1a2d3d;
    font-family: 'Space Grotesk', 'Inter', Arial, sans-serif;
    font-size: clamp(1.6rem, 3.2vw, 2.3rem);
    font-weight: 700;
    line-height: 1.2;
}

/* Palabras resaltadas del título de "Nosotros": azul (el fondo es claro) */
.nosotros-accent { color: #2563eb; }

.nosotros-lead {
    color: #5a6b7d;
    font-size: 1.12rem;
    line-height: 1.75;
}

/* --- Bloque principal: texto + ilustración --- */
.nosotros-main {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 36px;
    align-items: center;
    margin-bottom: 28px;
}

.nosotros-subtitulo {
    margin-bottom: 12px;
    color: #1a2d3d;
    font-family: 'Space Grotesk', 'Inter', Arial, sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
}

/* Párrafo de texto corrido (Quiénes somos, ¿Por qué nace CFV?, ¿Qué nos diferencia?) */
.nosotros-parrafo {
    margin-bottom: 18px;
    color: #4a5b6c;
    font-size: 1.05rem;
    line-height: 1.75;
}

.nosotros-checks {
    display: flex;
    flex-direction: column;
    gap: 14px;
    list-style: none;
}

.nosotros-checks li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: #4a5b6c;
    font-size: 1.02rem;
    line-height: 1.65;
}

.nosotros-checks i {
    margin-top: 3px;
    color: #22c55e;
    font-size: 1rem;
}

/* --- Panel de la ruta animada --- */
.nosotros-visual {
    position: relative;
    aspect-ratio: 7 / 5;
    overflow: hidden;
    border-radius: 16px;
    background:
        radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px) 0 0 / 22px 22px,   /* puntitos de cuadrícula */
        linear-gradient(170deg, #0c3788 8%, #265996 54%, #1a2d3d 92%);                   /* mismo degradado del hero */
    box-shadow: 0 18px 40px rgba(12, 55, 136, .22);
}

/* Raya LED superior del panel, igual a la del hero */
.nosotros-visual::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: rgb(var(--led));
    box-shadow: 0 0 6px 1px rgb(var(--led) / .9), 0 0 18px 4px rgb(var(--led) / .45);
}

.nosotros-svg {
    display: block;
    width: 100%;
    height: 100%;
}

.ruta-base {
    fill: none;
    stroke: rgba(255, 255, 255, .16);
    stroke-width: 6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Línea activa: empieza "borrada" (offset = 1) y se dibuja al pasar a 0 */
.ruta-activa {
    fill: none;
    stroke: rgb(var(--led));
    stroke-width: 6;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    filter: drop-shadow(0 0 5px rgb(var(--led) / .8));
}

.nosotros-visual.is-visible .ruta-activa {
    animation: nosotros-dibujar 2.4s ease .3s forwards;
}

/* Paradas: nacen en tamaño 0 y "saltan" a su lugar, cada una con su propio retraso (--d) */
.ruta-parada {
    transform: scale(0);
    transform-box: fill-box;
    transform-origin: center;
}

.ruta-parada circle {
    fill: #fff;
    stroke: rgb(var(--led));
    stroke-width: 4;
}

.nosotros-visual.is-visible .ruta-parada {
    animation: nosotros-parada .45s cubic-bezier(.34, 1.56, .64, 1) var(--d, 0s) forwards;
}

/* Parada final (destino): verde, con un anillo extra que crece y se desvanece en bucle */
.ruta-parada-final circle {
    fill: #22c55e;
    stroke: #fff;
}

.ruta-parada .ruta-anillo {
    fill: none;
    stroke: #22c55e;
    stroke-width: 3;
    transform-box: fill-box;
    transform-origin: center;
    animation: nosotros-anillo 2.2s ease-out infinite;
}

.ruta-texto {
    fill: rgba(255, 255, 255, .85);
    font-family: 'Inter', Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    opacity: 0;
    transition: opacity .5s ease 1.2s;
}

.ruta-texto-fin { text-anchor: end; }

.nosotros-visual.is-visible .ruta-texto { opacity: 1; }

/* Bus: oculto hasta que empieza el recorrido */
.ruta-bus {
    opacity: 0;
    transition: opacity .4s ease 1s;
}

.ruta-bus rect { fill: #22c55e; }
.ruta-bus .ruta-bus-vidrio { fill: #fff; opacity: .9; }

.nosotros-visual.is-visible .ruta-bus { opacity: 1; }

/* Etiquetas flotantes sobre el panel */
.nosotros-chip {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 20px;
    background: rgba(255, 255, 255, .14);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    animation: nosotros-flotar 4.5s ease-in-out infinite;
}

.nosotros-chip-1 { top: 16px; left: 16px; }
.nosotros-chip-2 { right: 16px; bottom: 16px; animation-delay: -2s; }

.nosotros-chip-punto {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    --pulso: 34 197 94;
    animation: pulso-anillo 2.2s ease-out infinite;
}

/* --- Cifras --- */
.nosotros-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: 28px;
    border: 2px solid #dde3ec;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(26, 45, 61, 0.05);
}

.nosotros-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 22px 12px;
}

/* Línea divisoria entre cifras */
.nosotros-stat + .nosotros-stat { border-left: 2px solid #eef2f7; }

.nosotros-num {
    color: #0c3788;
    font-family: 'Space Grotesk', 'Inter', Arial, sans-serif;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
}

.nosotros-stat-label {
    color: #6b7a8d;
    font-size: 0.88rem;
    font-weight: 600;
    text-align: center;
}

/* --- Tarjetas (pilares y misión/visión) --- */
.nosotros-pilares {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 52px;
}

.nosotros-mv {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 52px;
}

.nosotros-impacto {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 52px;
}

.nosotros-card {
    padding: 22px;
    border: 2px solid #dde3ec;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(26, 45, 61, 0.05);
}

/* Estas tarjetas se revelan con animación (en vez de transición) para no chocar con su efecto al pasar el mouse.
   "backwards" hace que esperen su retraso invisibles y, al terminar, queden en su estado normal. */
.nosotros-card.scroll-reveal {
    transform: none;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.nosotros-card.scroll-reveal.is-visible {
    animation: nosotros-subir .6s ease var(--retraso, 0s) backwards;
}

.nosotros-card:hover {
    transform: translateY(-6px);
    border-color: #22c55e;
    box-shadow: 0 14px 30px rgba(26, 45, 61, .12);
}

.nosotros-card-icono {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    border-radius: 12px;
    background: #eef2f7;
    color: #0c3788;
    font-size: 1.05rem;
    transition: background-color .25s ease, color .25s ease, transform .25s ease;
}

/* Al pasar el mouse el icono se llena de verde y se inclina un poco */
.nosotros-card:hover .nosotros-card-icono {
    background: #22c55e;
    color: #fff;
    transform: rotate(-8deg) scale(1.08);
}

.nosotros-card h4 {
    margin-bottom: 8px;
    color: #1a2d3d;
    font-size: 1.12rem;
    font-weight: 700;
}

.nosotros-card p {
    color: #5a6b7d;
    font-size: 0.97rem;
    line-height: 1.7;
}

/* --- Encabezados de sub-sección (¿Qué nos diferencia?, Nuestro impacto) --- */
.nosotros-seccion-head {
    max-width: 680px;
    margin: 0 auto 26px;
    text-align: center;
}

.nosotros-seccion-titulo {
    margin-bottom: 12px;
    color: #1a2d3d;
    font-family: 'Space Grotesk', 'Inter', Arial, sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.25;
}

.nosotros-seccion-head .nosotros-parrafo { margin-bottom: 20px; }

/* --- Etiquetas (chips) --- */
.nosotros-etiquetas {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.nosotros-seccion-head .nosotros-etiquetas { justify-content: center; }

.nosotros-etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 2px solid #dde3ec;
    border-radius: 22px;
    background: #fff;
    color: #1a2d3d;
    font-size: 0.92rem;
    font-weight: 600;
}

.nosotros-etiqueta i { color: #0c3788; font-size: .85rem; }

/* Las de "¿Qué nos diferencia?" van en verde suave, como lo positivo */
.nosotros-etiqueta-ok {
    border-color: #bbf0cf;
    background: #f0fdf4;
    color: #166534;
}

/* --- ¿Por qué nace CFV? --- */
.nosotros-porque {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 32px;
    align-items: center;
    margin-bottom: 52px;
    padding: 32px;
    border: 2px solid #dde3ec;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(26, 45, 61, 0.05);
}

.nosotros-porque .nosotros-parrafo { margin-bottom: 0; }

/* --- Llamado a la acción --- */
.nosotros-cta {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    overflow: hidden;
    padding: 28px 32px;
    border-radius: 16px;
    background: linear-gradient(170deg, #0c3788 8%, #265996 54%, #1a2d3d 92%);
    color: #fff;
}

.nosotros-cta::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: rgb(var(--led));
    box-shadow: 0 0 6px 1px rgb(var(--led) / .9), 0 0 18px 4px rgb(var(--led) / .45);
}

.nosotros-cta h3 {
    margin-bottom: 4px;
    font-family: 'Space Grotesk', 'Inter', Arial, sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
}

.nosotros-cta p {
    color: rgba(255, 255, 255, .75);
    font-size: 1rem;
}

.nosotros-cta-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.nosotros-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.25s ease;
}

.nosotros-btn i { transition: transform .25s ease; }
.nosotros-btn:hover i { transform: translateX(4px); }   /* la flecha se adelanta al pasar el mouse */

.nosotros-btn-primario { background: #22c55e; color: #fff; }
.nosotros-btn-primario:hover { background: #16a34a; color: #fff; transform: translateY(-2px); }

.nosotros-btn-claro { border: 2px solid rgba(255, 255, 255, .25); color: #fff; }
.nosotros-btn-claro:hover { background: rgba(255, 255, 255, .1); color: #fff; transform: translateY(-2px); }

/* ================================================================
   CÓMO CONOCERNOS — resumen del index + vista completa
   ================================================================ */

/* Botón "Conocer más" que cierra el resumen del index */
.nosotros-vermas {
    display: flex;
    justify-content: center;
    margin-top: 8px;
}

/* En la vista completa (/conocenos) no hay hero arriba: más aire bajo el navbar fijo */
.nosotros-section-pagina {
    padding-top: 56px;
}

/* --- Animaciones de esta sección --- */
@keyframes nosotros-dibujar { to { stroke-dashoffset: 0; } }

@keyframes nosotros-parada { to { transform: scale(1); } }

@keyframes nosotros-anillo {
    0%   { opacity: .8; transform: scale(1); }
    100% { opacity: 0;  transform: scale(2.8); }
}

@keyframes nosotros-subir {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes nosotros-flotar {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

/* Con "menos movimiento" todo se muestra ya terminado y sin animar (el bus tampoco arranca) */
@media (prefers-reduced-motion: reduce) {
    .ruta-activa { stroke-dashoffset: 0; animation: none !important; }
    .ruta-parada { transform: none; animation: none !important; }
    .ruta-anillo { display: none; }
    .nosotros-chip-punto,
    .nosotros-chip { animation: none; }
    .ruta-texto { opacity: 1; transition: none; }
    .ruta-bus { display: none; }
    .nosotros-card.scroll-reveal.is-visible { animation: none; }
    .nosotros-card:hover,
    .nosotros-card:hover .nosotros-card-icono { transform: none; }
}

/* --- Responsive de esta sección --- */
@media (max-width: 992px) {
    .nosotros-main { grid-template-columns: 1fr; }
    .nosotros-pilares { grid-template-columns: 1fr 1fr; }
    .nosotros-porque { grid-template-columns: 1fr; gap: 20px; }
    .nosotros-cta { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 576px) {
    .section-title { font-size: 1.35rem; }
    .search-box { padding: 12px 14px; }
    .search-btn { width: 44px; height: 44px; }
    .mv-field-group { grid-template-columns: 1fr; }
    .nosotros-subtitle { font-size: 1.25rem; }
    .nosotros-checks li { font-size: 0.9rem; }
    .nosotros-main { grid-template-columns: 1fr; }
    .nosotros-texto { order: 1; }
    .nosotros-visual { order: 2; max-width: 100%; margin: 16px auto 0; }
}


/* Responsive */
@media (max-width: 992px) {
    .nearby-grid { grid-template-columns: 1fr; }
}
@media (max-width: 576px) {
    .search-card { margin-top: -20px; padding: 18px; }
}