/* Secciones específicas del template del home (routes_home.js).
   Separado de products.css a propósito: products.css es del grid de tarjetas
   de producto (se usa en home Y en #productos), esto es exclusivo del layout
   del home. Si el home crece con más secciones (banners, testimonios, etc.),
   van aquí — no en products.css ni de vuelta en router.js. */

/* --- Franja de sellos de confianza --- */
.trust-badges {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    /* Siempre en una sola línea, como el sitio original — si no caben todos
       en móvil angosto, se desplaza horizontalmente en vez de partirse en filas. */
    gap: 10px;
    padding: 30px 10px;
    opacity: 0.9;
    overflow-x: auto;
    background-color: #FFFFFF;
    max-width: none;
    width: 100%;
}

.trust-badges img {
    width: auto;
    object-fit: contain;
    /* Escala de gris en TODOS los sellos (antes solo algunos la tenían) */
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    flex-shrink: 0;
    /* Evita que se compriman al forzar una sola línea */
}

/* Tamaños por logo (mismos valores que ya tenías definidos, con un techo en
   px para que no se disparen en monitores ultra anchos — un vw puro sin
   límite superior se vuelve enorme pasados los ~1800px de ancho). El orden
   en el HTML es: INAH, UNESCO, SECTUR, CDMX, Distintivo M. */
.trust-badges img:nth-child(1) {
    height: clamp(3.5vw, 3.5vw, 3.5vw);
}

/* INAH */
.trust-badges img:nth-child(2) {
    height: clamp(4vw, 4vw, 4vw);
}

/* UNESCO */
.trust-badges img:nth-child(3) {
    height: clamp(3.5vw, 3.5vw, 3.5vw);
}

/* SECTUR */
.trust-badges img:nth-child(4) {
    height: clamp(6.5vw, 6.5vw, 6.5vw);
}

/* CDMX */
.trust-badges img:nth-child(5) {
    height: clamp(6.5vw, 6.5vw, 6.5vw);
}

/* Distintivo M */

/* --- Tarjetas de categoría rápida --- */
.quick-categories {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 20px;
}

.quick-category-card {
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 25px 20px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
    min-height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.quick-category-card:hover {
    transform: translateY(-6px);
    border-color: var(--accent-gold);
}

.quick-category-card h3 {
    color: #FFFFFF;
    margin-bottom: 10px;
    font-size: 1.1rem;
}

.quick-category-card p {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 18px;
    min-height: 40px;
}

/* --- Título de la sección de tours destacados (ahora sobre fondo claro) --- */
.features h2 {
    color: var(--primary);
}

/* --- Safe Travel --- */
.safe-travel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px;
    padding: 50px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    /* Imagen real confirmada: 20241001-quetzalcoatl-tejedoras.webp.
       background-attachment: fixed a propósito — mismo efecto parallax que el
       hero (la imagen se queda fija y la página se desplaza encima). Nota:
       iOS Safari ignora background-attachment:fixed y simplemente lo trata
       como scroll — no rompe nada, solo no se ve el parallax ahí. */
    background-image: linear-gradient(rgba(0, 20, 40, 0.55), rgba(0, 20, 40, 0.55)), url('/images/20241001-quetzalcoatl-tejedoras.webp');
    background-size: cover;
    background-position: center 20%;
    background-attachment: scroll;
}

.safe-travel-text h4 {
    color: var(--accent-gold);
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.safe-travel-text h2 {
    color: #FFFFFF;
    margin-bottom: 12px;
}

.safe-travel-text p {
    color: rgba(255, 255, 255, 0.75);
    max-width: 500px;
    font-size: 0.95rem;
}

.safe-travel-badges {
    display: flex;
    gap: 25px;
    align-items: center;
}

.safe-travel-badges img {
    height: 55px;
    width: auto;
}

/* --- 4 beneficios --- */
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    padding: 50px 20px;
    text-align: center;
}

.benefit-icon {
    /* Ahora es un <img> real (20240913-globe/quality/tag/lock.webp), antes
       era un emoji en <span>. Mismo nombre de clase para no tocar el JS de
       más arriba en la cadena de cambios, solo el tipo de elemento cambió. */
    display: block;
    margin: 0 auto 12px;
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.benefit-item h5 {
    color: var(--primary);
    font-size: 0.95rem;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.benefit-item p {
    font-size: 0.85rem;
    color: rgba(0, 0, 0, 0.65);
}

/* Tablet */
@media (max-width: 992px) {
    .safe-travel {
        background-position: center -45vw;
        background-attachment: scroll;
    }
}

/* Mobile — reusa tu media query existente de 768px, solo agrega la línea background-position: center 60%; */
@media (max-width: 768px) {
    .quick-categories {
        grid-template-columns: 1fr;
    }

    .benefits-grid {
        grid-template-columns: 1fr;
    }

    .safe-travel {
        flex-direction: column;
        text-align: center;
        background-position: center -25vw;
        background-attachment: scroll;
    }

    .safe-travel-text p {
        max-width: none;
    }
}