/* ============================================================
   MOBILE / _hero.css
   Tarea 1: Hero slider responsive (clases reales del Blade)
   Tarea 2: Feature banner bajo el hero
   ============================================================ */

/* ══════════════════════════════════════════════════════════════
   TAREA 1 — Hero slider
   ══════════════════════════════════════════════════════════════ */

/* ── Móvil (< 640px): 55–70% del viewport ─────────────────── */
@media (max-width: 639px) {

    /* Contenedor: FIX PRINCIPAL del efecto zoom
       era min-height: 480px en figma-inicio.css */
    .hero-slider-figma {
        height: 62vh;
        min-height: 220px;
        max-height: 380px;
    }

    /* Contenido centrado con padding lateral */
    .hero-content-inner {
        padding: 0 20px 28px;
        max-width: 100%;
    }

    /* Eyebrow (etiqueta pequeña) */
    .hero-eyebrow {
        margin-bottom: 8px;
        gap: 6px;
    }

    .hero-eyebrow-text {
        font-size: 0.65rem;
        letter-spacing: 0.18em;
    }

    .hero-eyebrow-line {
        width: 20px;
    }

    /* Título principal: 2 niveles menos que desktop */
    h1.hero-title {
        font-size: clamp(1.5rem, 7vw, 2.2rem);
        line-height: 1.15;
        margin-bottom: 10px;
    }

    /* Subtítulo: se acorta pero no desaparece */
    p.hero-subtitle {
        font-size: 0.82rem;
        line-height: 1.5;
        margin-bottom: 18px;
        max-width: 90%;
        /* Limitar a 2 líneas para no saturar */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* CTAs: en columna en pantallas muy pequeñas, fila si caben */
    .hero-ctas {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
    }

    /* CTA principal */
    .hero-slider-figma .hero-btn-primary {
        min-height: 38px;
        padding: 8px 14px;
        /* Más compacto para caber en fila */
        font-size: 0.65rem;
        letter-spacing: 0.08em;
        width: auto !important;
        white-space: nowrap;
        /* Evita que el texto se parta en 2 líneas */
    }

    /* CTA secundario */
    .hero-slider-figma .hero-btn-secondary {
        min-height: 38px;
        padding: 8px 14px;
        font-size: 0.65rem;
        letter-spacing: 0.08em;
        width: auto !important;
        white-space: nowrap;
        /* Evita que el texto se parta en 2 líneas */
    }

    /* Botones lado a lado */
    .hero-slider-figma .hero-ctas {
        flex-direction: row !important;
        flex-wrap: nowrap;
        /* No permite que bajen a una nueva fila */
        gap: 8px;
    }

    /* Botones de navegación del slider */
    .hero-nav-btn {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .hero-nav-prev {
        left: 8px;
    }

    .hero-nav-next {
        right: 8px;
    }

    /* Indicadores (dots) más pequeños */
    .hero-indicators {
        bottom: 10px;
        gap: 5px;
    }

    /* Contador: ocultar en móvil pequeño (ahorra espacio) */
    .hero-counter {
        display: none;
    }

    /* ── Baja todo el bloque al fondo del Hero y lo acerca al margen izquierdo */
    .hero-slider-figma .hero-content {
        bottom: 0 !important;
        padding: 0 16px 18px 0 !important;
        /* 0 izquierda: pegado al borde como la flecha < */
    }
}

/* ── Tablet (640px – 1023px): 60% del viewport ─────────────── */
@media (min-width: 640px) and (max-width: 1023px) {

    .hero-slider-figma {
        height: 60vh;
        min-height: 360px;
        max-height: 520px;
    }

    h1.hero-title {
        font-size: clamp(2rem, 5vw, 2.8rem);
    }

    p.hero-subtitle {
        font-size: 0.9rem;
    }

    .hero-btn-primary,
    .hero-btn-secondary {
        min-height: 44px;
        padding: 11px 22px;
    }
}

/* ══════════════════════════════════════════════════════════════
   TAREA 2 — Feature banner (Descuentos, Garantía, etc.)
   Clases: .feature-banner-figma, .feature-grid, .feature-item,
           .feature-icon, .feature-title, .feature-desc
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 639px) {

    .feature-banner-figma {
        padding: 20px 0 24px;
    }

    /* Grid → columna de mini-cards */
    .feature-grid {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    /* Cada beneficio: fila con icono a la izquierda */
    .feature-item {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        padding: 14px 16px;
        border-bottom: 1px solid rgba(212, 175, 55, 0.1);
    }

    .feature-item:last-child {
        border-bottom: none;
    }

    /* Icono: tamaño fijo y alineado arriba */
    .feature-icon {
        width: 36px;
        height: 36px;
        min-width: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .feature-icon svg {
        width: 22px;
        height: 22px;
    }

    /* Texto a la derecha del icono */
    .feature-item>div:last-child {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
    }

    .feature-title {
        font-size: 0.85rem;
        font-weight: 600;
        line-height: 1.3;
        margin: 0;
    }

    .feature-desc {
        font-size: 0.75rem;
        line-height: 1.4;
        margin: 0;
        opacity: 0.75;
    }
}

/* ── Tablet: 2 columnas ─────────────────────────────────────── */
@media (min-width: 640px) and (max-width: 1023px) {

    .feature-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0;
    }

    .feature-item {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 16px 20px;
    }

    .feature-icon {
        width: 36px;
        height: 36px;
        min-width: 36px;
        flex-shrink: 0;
    }
}