/* ============================================================
   MOBILE-FIXES.CSS  —  Auditoría completa mobile + animaciones
   Cargado después de mobile-refactor.css para máxima prioridad
   ============================================================ */

/* ════════════════════════════════════════════════════════════
   FIX RAÍZ: padding-bottom global para el sticky bar flotante
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    body {
        padding-bottom: 84px !important;
    }

    /* Aire propio en cada sección para que nada quede oculto */
    main>section,
    section:last-of-type,
    .audifonos-cta-section,
    .sobre-mi-section,
    .testimonios-section {
        padding-bottom: 56px !important;
    }
}

/* ════════════════════════════════════════════════════════════
   FIX 4 — Sticky bar: estilo iOS Floating Pill (ex fab-sticky)
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .fab-sticky {
        position: fixed;
        bottom: 16px;
        /* flota con margen, no pegado al borde */
        left: 16px;
        right: 16px;
        width: auto;
        /* pill, no full-width */

        height: 56px;
        border-radius: 28px;
        /* muy redondeado, estilo pill */

        background: #3D1C0A;
        color: #FFFFFF;

        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;

        font-size: 0.95rem;
        font-weight: 700;
        text-decoration: none;

        /* Sombra suave y profunda, no un borde duro */
        box-shadow: 0 8px 24px rgba(61, 28, 10, 0.28),
            0 2px 8px rgba(61, 28, 10, 0.15);

        border: none;
        z-index: 999;

        transition: transform 0.2s ease;
    }

    .fab-sticky:active {
        transform: scale(0.97);
        /* feedback táctil al tocar, como iOS */
    }
}

/* ════════════════════════════════════════════════════════════
   FIX 1 — Card "Empezá con una consulta": sólida, sin dashed
   ════════════════════════════════════════════════════════════ */
.metodologia-cta-card {
    background: #F5EDE4;
    /* mismo crema del fondo de sección */
    border: none !important;
    /* sacar el dashed */
    border-radius: 20px;
    padding: 28px 24px;
    text-align: center;
    box-shadow: 0 2px 12px rgba(61, 28, 10, 0.05);
    /* casi imperceptible */
}

.metodologia-cta-card p {
    font-size: 1rem;
    font-weight: 600;
    color: #3D1C0A;
    margin-bottom: 18px;
}

.metodologia-cta-card .btn-filled {
    width: 100%;
    justify-content: center;
}

/* ════════════════════════════════════════════════════════════
   FIX 2 — Carrusel audífonos: overflow y flex-shrink correctos
   ════════════════════════════════════════════════════════════ */

/* CAUSA 1: asegurar que ningún ancestro bloquee overflow del carrusel */
@media (max-width: 768px) {

    #audifonos,
    #audifonos>.container,
    .phonak-teaser-grid {
        overflow: visible !important;
    }

    /* El carousel wrapper tampoco debe bloquear */
    .apple-carousel {
        overflow: visible !important;
    }
}

/* ════════════════════════════════════════════════════════════
   FIX 1 — CARRUSEL APPLE-STYLE General (Talleres & Audífonos)
   ════════════════════════════════════════════════════════════ */
.apple-carousel {
    position: relative;
    display: none;
    /* Oculto en desktop */
}

@media (max-width: 768px) {

    .talleres-grid.talleres-stack-wrapper,
    .phonak-teaser-right-grid.phonak-stack-wrapper {
        display: none !important;
    }

    .apple-carousel {
        display: block;
        margin-top: 24px;
    }

    /* CAUSA 2 & 3: track debe desbordar, las cards NO deben encogerse */
    .apple-carousel-track {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        overflow-x: auto !important;
        /* nunca blocked por ancestro */
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 8px 24px 16px;
        margin: 0 -24px;
        width: 100%;
        /* ocupa el ancho del container */
        /* flex-shrink en children se controla abajo con !important */
    }

    .apple-carousel-track::-webkit-scrollbar {
        display: none;
    }

    /* Cards genéricas */
    .apple-card {
        scroll-snap-align: start;
        flex: 0 0 84vw !important;
        /* NO se comprimen */
        flex-shrink: 0 !important;
        max-width: 340px;
        min-height: 380px;
        background: #FFFFFF;
        border-radius: 24px;
        padding: 28px 24px;
        box-shadow: 0 4px 20px rgba(61, 28, 10, 0.06);
        display: flex;
        flex-direction: column;
        gap: 10px;
        box-sizing: border-box;
    }

    /* Cards específicas de audífono */
    .apple-card--audifono {
        flex: 0 0 70vw !important;
        /* forzado, no se achica */
        flex-shrink: 0 !important;
        max-width: 240px;
        min-height: 320px;
        align-items: center;
        text-align: center;
        box-sizing: border-box;
    }

    .apple-card-img {
        width: 90px;
        height: 110px;
        object-fit: contain;
        margin-bottom: 8px;
    }

    .apple-card-link {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        color: #C0613D;
        font-weight: 600;
        font-size: 0.85rem;
        margin-top: 4px;
        text-decoration: none;
    }

    .apple-card-badges {
        display: flex;
        gap: 8px;
    }

    .badge {
        font-size: 0.72rem;
        font-weight: 600;
        color: #3D1C0A;
        background: rgba(61, 28, 10, 0.06);
        padding: 5px 12px;
        border-radius: 50px;
    }

    .badge-urgente {
        font-size: 0.72rem;
        font-weight: 600;
        color: #C0613D;
        width: fit-content;
    }

    .apple-card h3 {
        font-size: 1.2rem;
        font-weight: 800;
        color: #3D1C0A;
        margin: 4px 0 0;
        line-height: 1.25;
    }

    .apple-card p {
        font-size: 0.88rem;
        color: rgba(61, 28, 10, 0.65);
        line-height: 1.55;
        margin: 0;
    }

    .apple-card-actions {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 12px;
    }

    .btn-outline,
    .btn-filled {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        font-weight: 600;
        font-size: 0.9rem;
        padding: 12px;
        border-radius: 50px;
        text-decoration: none;
    }

    .btn-outline {
        border: 1.5px solid rgba(61, 28, 10, 0.2);
        color: #3D1C0A;
    }

    .btn-filled {
        background: #3D1C0A;
        color: #FFFFFF;
        font-weight: 700;
    }

    .apple-carousel-dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 16px;
    }

    .apple-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(61, 28, 10, 0.25);
        transition: all 0.3s ease-out;
    }

    .apple-dot.active {
        background: #C9A84C;
        width: 20px;
        border-radius: 4px;
    }
}

/* ════════════════════════════════════════════════════════════
   FIX FAQ: Legibilidad y Aire
   ════════════════════════════════════════════════════════════ */
.faq-item {
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 10px;
    border: 1px solid rgba(61, 28, 10, 0.08);
}

.faq-question {
    background: #F5EDE4;
    color: #3D1C0A;
    font-weight: 600;
    padding: 18px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.faq-item.open .faq-question {
    background: #3D1C0A;
    color: #FFFFFF !important;
}

.faq-answer {
    background: #FFFFFF !important;
    color: rgba(61, 28, 10, 0.75) !important;
    padding: 0 22px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    font-size: 0.92rem;
    line-height: 1.65;
}

.faq-item.open .faq-answer {
    padding: 18px 22px 24px;
    max-height: 400px;
}

/* ════════════════════════════════════════════════════════════
   FIX Sobre Mí: ocultar crédito de foto en mobile
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    .sobre-mi-photo-credit,
    .sobre-mi-photo-credit * {
        display: none !important;
        visibility: hidden !important;
    }

    .sobre-mi-section {
        padding-top: 32px !important;
    }
}

/* ════════════════════════════════════════════════════════════
   FIX 3 — FOOTER MOBILE: botón WhatsApp legible + acordeón
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    .footer-grid-premium,
    .footer-premium-inner {
        display: none !important;
    }

    .footer-mobile-accordion {
        display: block !important;
    }

    #main-footer {
        padding-bottom: 84px !important;
        background: #3D1C0A;
    }
}

.footer-mobile-accordion {
    display: none;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin-top: 8px;
}

.footer-m-brand {
    padding: 40px 24px 24px;
    color: #FFF;
}

/* FIX 3: botón WhatsApp — blanco sólido sobre fondo marrón */
.footer-m-contacts {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 0 24px 24px;
    width: 100%;
    box-sizing: border-box;
}

.footer-m-contact-pill {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(255, 255, 255, 0.13) !important;
    color: #FDF6F0 !important;
    -webkit-text-fill-color: #FDF6F0 !important;
    font-weight: 600;
    font-size: 0.78rem;
    padding: 12px 6px;
    border-radius: 14px;
    text-decoration: none;
    transition: background 0.2s, transform 0.15s;
    box-sizing: border-box;
}

.footer-m-contact-pill span {
    color: #FDF6F0 !important;
    -webkit-text-fill-color: #FDF6F0 !important;
}

.footer-m-contact-pill:active {
    transform: scale(0.95);
    background: rgba(255, 255, 255, 0.14) !important;
}

.footer-m-contact-pill--wa {
    background: rgba(37, 211, 102, 0.10) !important;
    border-color: rgba(37, 211, 102, 0.28) !important;
}

.footer-m-contact-pill--wa .footer-m-contact-icon svg {
    color: #25D366 !important;
    fill: #25D366 !important;
}

.footer-m-contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #FDF6F0;
    flex-shrink: 0;
}


.footer-m-acc-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding: 0 24px;
}

.footer-m-acc-item summary {
    padding: 18px 4px;
    color: #FFFFFF;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.98rem;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.footer-m-acc-item summary::-webkit-details-marker {
    display: none;
}

/* Chevron CSS animado */
.footer-m-acc-item summary::after {
    content: '';
    width: 9px;
    height: 9px;
    border-right: 1.5px solid rgba(255, 255, 255, 0.55);
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.55);
    transform: rotate(45deg);
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

.footer-m-acc-item[open] summary::after {
    transform: rotate(-135deg);
}

.footer-m-acc-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0 4px 20px;
}

.footer-m-acc-content a {
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    padding: 8px 0;
    display: block;
    font-size: 0.9rem;
}

/* Contact rows con ícono en el footer accordion */
.footer-m-contact-row {
    display: flex !important;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.65) !important;
}

.footer-m-bottom {
    padding: 20px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 8px;
    text-align: center;
}

.footer-m-bottom p {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8rem;
    margin: 0 0 4px;
}

.footer-m-bottom a {
    color: rgba(255, 255, 255, 0.65);
}

/* ════════════════════════════════════════════════════════════
   ANIMACIONES scroll fade-up
   ════════════════════════════════════════════════════════════ */
[data-animate="fade-up"] {
    opacity: 0;
    transform: translateY(28px);
    transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-animate="fade-up"].is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ════════════════════════════════════════════════════════════
   FIX 2 CRÍTICO — Ancestros del carrusel de audífonos:
   Ninguno puede tener overflow que clip el scroll horizontal
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Ancestros directos del apple-carousel de audífonos */
    #audifonos,
    #audifonos .container,
    .phonak-teaser,
    .phonak-teaser-grid {
        overflow: visible !important;
        overflow-x: visible !important;
    }

    /* El carousel wrapper tampoco debe cortar */
    #audifonosCarousel {
        overflow: visible !important;
    }

    /* El TRACK del carrusel de audífonos: scroll horizontal limpio */
    #audifonosCarousel .apple-carousel-track {
        overflow-x: auto !important;
        overflow-y: visible !important;
        width: 100% !important;
        margin: 0 !important;
        /* sin margin negativo que cause clipping */
        padding: 8px 16px 16px !important;
        box-sizing: border-box !important;
    }

    /* Las cards no se encogen nunca */
    #audifonosCarousel .apple-card {
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        flex: 0 0 72vw !important;
        /* muestra ~1.3 cards a la vez */
        max-width: 230px !important;
        box-sizing: border-box !important;
    }

    /* Asegura que el wrapper del carousel tampoco desborde lateralmente */
    #audifonosCarousel {
        width: 100% !important;
        overflow: hidden !important;
        /* clip externo, el track scrollea internamente */
    }
}

/* ════════════════════════════════════════════════════════════
   FIX — Hero: mostrar imagen en mobile superior (especialidades)
   Mejora la conversión y confianza con el elemento humano arriba
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Grids en columna */
    .af-hero-grid,
    .fe-hero-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        text-align: left !important;
    }

    /* Mostrar imágenes arriba, full bleed */
    .af-hero-img-wrap,
    .fe-hero-img-wrap {
        display: block !important;
        order: -1 !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        min-height: 280px !important;
        border-radius: 16px !important;
        overflow: visible !important;
        margin: 0 auto 1.5rem !important;
        box-shadow: none !important;
    }

    .af-hero-img-wrap img,
    .fe-hero-img-wrap img {
        width: 100% !important;
        height: auto !important;
        max-height: 400px !important;
        object-fit: contain !important;
        object-position: center center !important;
        display: block !important;
        border-radius: 16px !important;
    }

    /* Ajustar paddings de héroes */
    .af-hero,
    .fe-hero {
        padding-top: 0 !important;
        padding-bottom: 2rem !important;
    }

    .af-hero-text,
    .fe-hero-text {
        order: 1 !important;
        padding-top: 1.5rem !important;
        text-align: left !important;
    }

    /* Alinear badges a la izquierda */
    .af-hero-badge,
    .fe-hero-badge {
        display: inline-flex !important;
        margin: 0 auto 1.5rem 0 !important;
        align-self: flex-start !important;
        justify-content: flex-start !important;
    }

    /* Títulos compactos */
    .af-hero-title,
    .fe-hero-title {
        font-size: clamp(1.8rem, 8vw, 2.4rem) !important;
        margin-bottom: 0.75rem !important;
        line-height: 1.15 !important;
        text-align: left !important;
    }

    /* Subtítulos contrastantes y legibles */
    .af-hero-subtitle,
    .fe-hero-subtitle {
        color: #3D1C0A !important;
        font-size: 0.95rem !important;
        line-height: 1.55 !important;
        margin-bottom: 1rem !important;
        text-align: left !important;
    }
}

/* ════════════════════════════════════════════════════════════
   FIX — Talleres: ocultar grid desktop en mobile
   El rule anterior usa .talleres-grid.talleres-stack-wrapper
   pero el HTML tiene ambas clases separadas → mismo efecto,
   reforzamos con id y display:none a ambas variantes
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    #talleres .talleres-grid,
    div.talleres-grid.talleres-stack-wrapper {
        display: none !important;
    }

    /* Asegurar que el carrusel de talleres sea visible */
    #talleresCarousel {
        display: block !important;
    }
}

/* ════════════════════════════════════════════════════════════
   FIX — Testimonios CTA: botón "Agendar turno ahora" visible
   El .cta-button tiene fondo blanco/crema por defecto pero en
   este contexto el botón hereda un fondo oscuro → forzar contraste
   ════════════════════════════════════════════════════════════ */
.testimonios-cta .cta-button {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    background: #3D1C0A !important;
    border: none !important;
}

.testimonios-cta .cta-button:hover,
.testimonios-cta .cta-button:active {
    background: #25180e !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* ════════════════════════════════════════════════════════════
   FIX — Phonak "Consultar ahora": en mobile el pseudo-fill
   se activa en :active, pero el texto queda blanco roto;
   simplificamos a un estilo sólido en mobile
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .phonak-wa-link {
        background: transparent !important;
        color: #3D1C0A !important;
        -webkit-text-fill-color: #3D1C0A !important;
        /* Deshabilitar el pseudo-fill animado en mobile */
        overflow: visible !important;
    }

    .phonak-wa-link::before {
        display: none !important;
    }

    .phonak-wa-link:active {
        background: #3D1C0A !important;
        color: #FFFFFF !important;
        -webkit-text-fill-color: #FFFFFF !important;
    }

    .phonak-wa-link span {
        color: inherit !important;
        -webkit-text-fill-color: inherit !important;
    }
}

/* ════════════════════════════════════════════════════════════
   FIX — Talleres carousel: cards de altura uniforme en mobile
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    #talleresCarousel .apple-card {
        height: 400px !important;
        /* un poco más alto para que el texto quepa */
        min-height: unset !important;
        justify-content: flex-start;
    }

    #talleresCarousel .apple-card>p {
        flex: 1;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 5;
        /* aumentamos a 5 líneas */
        line-clamp: 5;
        -webkit-box-orient: vertical;
    }

    #talleresCarousel .apple-card-actions {
        margin-top: auto !important;
    }
}

/* ════════════════════════════════════════════════════════════
   FIX — Talleres carousel: cards de altura uniforme en mobile
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* El track usa align-items: stretch para que todas las cards
       tengan la misma altura automáticamente, sin altura fija */
    #talleresCarousel .apple-carousel-track {
        align-items: stretch !important;
    }

    #talleresCarousel .apple-card {
        height: auto !important;
        min-height: unset !important;
        /* flex column para que los botones queden al fondo */
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
    }

    /* El párrafo crece para empujar los botones al fondo */
    #talleresCarousel .apple-card>p {
        flex-grow: 1 !important;
    }

    #talleresCarousel .apple-card-actions {
        margin-top: auto !important;
        flex-shrink: 0 !important;
    }
}


/* ════════════════════════════════════════════════════════════
   FIX — Audífonos carousel: cards de altura uniforme en mobile
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    #audifonosCarousel .apple-carousel-track {
        align-items: stretch !important;
    }

    #audifonosCarousel .apple-card {
        height: auto !important;
        min-height: unset !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: center !important;
    }

    #audifonosCarousel .apple-card>p {
        flex-grow: 1 !important;
    }

    #audifonosCarousel .apple-card-link {
        margin-top: auto !important;
    }
}


/* FIX — Botón "Revisar datos" estático, sin bugear sobre el textarea */
@media (max-width: 768px) {
    .booking-submit-wrapper {
        position: static !important;
        background: transparent !important;
        padding: 0 !important;
        margin-top: 1rem !important;
        box-shadow: none !important;
    }
}

/* ════════════════════════════════════════════════════════════
   FIX — Feedback táctil en tarjetas de especialidades en mobile
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .especialidad-card:active {
        background: rgba(61, 40, 23, 0.03) !important;
        transform: scale(0.98) !important;
    }
}

/* ════════════════════════════════════════════════════════════
   FIX — Ocultar botones mobile de obras sociales en desktop
   ════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
    .obras-mobile-buttons {
        display: none !important;
    }
}

/* ════════════════════════════════════════════════════════════
   FIX — Ocultar botones desktop de obras sociales en mobile
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .obras-desktop-buttons {
        display: none !important;
    }
}


/* ════════════════════════════════════════════════════════════
   AUDIFONOS PAGE — Carousel mobile (bloque único definitivo)
   ════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {

    .audifonos-carousel-wrapper {
        overflow-x: auto !important;
        overflow-y: visible !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    .audifonos-carousel-wrapper::-webkit-scrollbar {
        display: none !important;
    }

    .audifonos-carousel-track {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        gap: 1rem !important;
        padding: 0.75rem 1.25rem 1.5rem !important;
        width: max-content !important;
        transform: none !important;
    }

    .audifonos-carousel-track .modelo-card {
        flex: 0 0 78vw !important;
        max-width: 300px !important;
        scroll-snap-align: start !important;
        border-radius: 20px !important;
        border: 1px solid rgba(61, 28, 10, 0.07) !important;
        box-shadow: 0 4px 20px rgba(61, 28, 10, 0.08) !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
        overflow: hidden !important;
        background: #fff !important;
        box-sizing: border-box !important;
    }

    .audifonos-carousel-track .modelo-card .modelo-card__image-area {
        background: #F6E9D8 !important;
        height: 160px !important;
        min-height: 160px !important;
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 1.25rem !important;
    }

    .audifonos-carousel-track .modelo-card .modelo-card__image-area img {
        max-height: 120px !important;
        width: auto !important;
        object-fit: contain !important;
        filter: drop-shadow(0 6px 14px rgba(61, 28, 10, 0.18)) !important;
    }

    .audifonos-carousel-track .modelo-card .modelo-card__body {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 1.25rem !important;
        gap: 0.5rem !important;
    }

    .audifonos-carousel-track .modelo-card .modelo-badge {
        font-size: 0.68rem !important;
        padding: 4px 10px !important;
        background: #F5EDE4 !important;
        color: #3D1C0A !important;
        border-radius: 50px !important;
        font-weight: 700 !important;
        align-self: flex-start !important;
    }

    .audifonos-carousel-track .modelo-card .modelo-card__title {
        font-size: 1.05rem !important;
        font-weight: 700 !important;
        color: #2C1810 !important;
        margin: 0 !important;
    }

    .audifonos-carousel-track .modelo-card ul.modelo-card__features {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 5px !important;
        flex: 1 !important;
    }

    .audifonos-carousel-track .modelo-card ul.modelo-card__features li {
        list-style: none !important;
        display: flex !important;
        align-items: flex-start !important;
        gap: 6px !important;
        font-size: 0.82rem !important;
        color: #5A4636 !important;
        line-height: 1.4 !important;
    }

    .audifonos-carousel-track .modelo-card ul.modelo-card__features li::before {
        content: '✓' !important;
        color: #B5703C !important;
        font-weight: 700 !important;
        flex-shrink: 0 !important;
    }

    .audifonos-carousel-track .modelo-card .modelo-card__cta {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        color: #3D1C0A !important;
        font-size: 0.88rem !important;
        font-weight: 700 !important;
        text-decoration: none !important;
        margin-top: auto !important;
        padding-top: 0.75rem !important;
        border-top: 1px solid rgba(61, 28, 10, 0.08) !important;
    }
}




/* ════ SWIPE HINT: transición suave ════ */
.swipe-hint {
    transition: opacity 0.4s ease !important;
}

.swipe-hint.hidden {
    opacity: 0 !important;
    pointer-events: none !important;
}


/* ════════════════════════════════════════════════════════════
   OBRAS MODAL — Chip grid compacto (reemplaza obras-modal-grid)
   ════════════════════════════════════════════════════════════ */
.obras-chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin: 0 auto 2rem;
    max-width: 560px;
}

.obras-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #F5EDE4;
    border: 1px solid rgba(61, 28, 10, 0.12);
    color: #3D1C0A;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 50px;
    white-space: nowrap;
    transition: background 0.2s ease, transform 0.15s ease;
}

.obras-chip::before {
    content: '✓';
    color: #B5703C;
    font-weight: 700;
    font-size: 0.75rem;
}

.obras-chip--muted {
    background: transparent;
    border-color: rgba(61, 28, 10, 0.08);
    color: rgba(61, 28, 10, 0.5);
    font-style: italic;
    font-weight: 500;
}

.obras-chip--muted::before {
    content: '';
}


/* ════════════════════════════════════════════════════════════
   FAQ — Hidden/Visible móvil + botón "Ver más"
   ════════════════════════════════════════════════════════════ */

/* En desktop: siempre visible */
.faq-item.faq-hidden-mobile {
    display: block;
}

/* En mobile: ocultar por defecto */
@media (max-width: 767px) {
    .faq-item.faq-hidden-mobile {
        display: none !important;
    }

    .faq-item.faq-hidden-mobile.faq-visible {
        display: block !important;
    }

    /* El botón "Ver más" solo en mobile */
    .faq-show-more-btn {
        display: inline-flex !important;
        align-items: center;
        gap: 6px;
        background: transparent !important;
        border: 1.5px solid rgba(61, 28, 10, 0.2) !important;
        color: #3D1C0A !important;
        font-size: 0.88rem !important;
        font-weight: 600 !important;
        padding: 10px 22px !important;
        border-radius: 50px !important;
        cursor: pointer;
        transition: background 0.2s ease, border-color 0.2s ease;
        box-shadow: none !important;
    }

    .faq-show-more-btn:hover {
        background: rgba(61, 28, 10, 0.05) !important;
        border-color: rgba(61, 28, 10, 0.35) !important;
        color: #3D1C0A !important;
    }
}

/* En desktop: ocultar el botón ver más */
@media (min-width: 768px) {

    #faq-show-more-btn,
    .faq-show-more-btn {
        display: none !important;
    }
}

/* En mobile: estilos del botón Ver más — ID supera al reset global de index.css */
@media (max-width: 767px) {
    .faq-item.faq-hidden-mobile {
        display: none !important;
    }

    .faq-item.faq-hidden-mobile.faq-visible {
        display: block !important;
    }

    #faq-show-more-btn,
    #symptoms-show-more-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        /* Override global reset dark background */
        background: transparent !important;
        background-image: none !important;
        /* Border outline, pill shape */
        border: 1.5px solid rgba(61, 28, 10, 0.25) !important;
        border-radius: 50px !important;
        /* Text visible */
        color: #3D1C0A !important;
        -webkit-text-fill-color: #3D1C0A !important;
        /* Typography — inherit site font */
        font-family: 'Plus Jakarta Sans', sans-serif !important;
        font-size: 0.88rem !important;
        font-weight: 600 !important;
        letter-spacing: 0.01em !important;
        /* Spacing */
        padding: 10px 24px !important;
        /* Remove shadows */
        box-shadow: none !important;
        cursor: pointer;
        transition: background 0.2s ease, border-color 0.2s ease;
    }

    #faq-show-more-btn:hover,
    #faq-show-more-btn:active,
    #symptoms-show-more-btn:hover,
    #symptoms-show-more-btn:active {
        background: rgba(61, 28, 10, 0.06) !important;
        border-color: rgba(61, 28, 10, 0.4) !important;
        color: #3D1C0A !important;
        -webkit-text-fill-color: #3D1C0A !important;
    }

    .btn-ver-mas {
        background: transparent !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        color: #3D1C0A !important;
        -webkit-text-fill-color: #3D1C0A !important;
        display: inline-flex !important;
        text-decoration: underline !important;
        width: auto !important;
        min-width: 0 !important;
        padding: 0 !important;
        margin-top: 8px !important;
    }
}


/* ============================================================
   FIX — Hero Mobile improvements + Desktop empty space close
   ============================================================ */

/* Mobile improvements (< 769px) */
@media (max-width: 768px) {

    /* Grid pasa a columna */
    #hero-section .hero-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }

    /* Imagen va primero visualmente */
    #hero-section .hero-image-wrapper {
        order: -1 !important;
        width: calc(100% + 40px) !important;
        /* sangría full-bleed */
        margin-left: -20px !important;
        margin-right: -20px !important;
        margin-top: -20px !important;
        /* pega al borde superior del hero */
        border-radius: 0 !important;
        overflow: hidden !important;
        aspect-ratio: 4/3 !important;
        max-height: 280px !important;
    }

    #hero-section .hero-image-wrapper img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center top !important;
        display: block !important;
        border-radius: 0 !important;
    }

    /* Texto debajo, con padding propio */
    #hero-section .hero-content {
        order: 1 !important;
        padding-top: 1.25rem !important;
        text-align: left !important;
    }

    /* Badge "FONOAUDIOLOGÍA INTEGRAL" centrado en mobile */
    #hero-section .trust-badge {
        display: flex !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 1.5rem !important;
        width: fit-content !important;
        align-self: center !important;
    }

    /* Rating de estrellas alineado a la izquierda */
    #hero-section .hero-stars {
        justify-content: flex-start !important;
    }

    /* Título más compacto en mobile */
    #hero-section .hero-headline {
        font-size: clamp(1.8rem, 8vw, 2.4rem) !important;
        margin-bottom: 0.75rem !important;
        line-height: 1.15 !important;
    }

    /* Subtítulo */
    #hero-section .hero-subtitle {
        font-size: 0.95rem !important;
        margin-bottom: 1rem !important;
    }

    /* Botón CTA full width */
    #hero-section .hero-cta-primary {
        width: 100% !important;
        justify-content: center !important;
    }


    /* Padding superior reducido para que pegue al navbar */
    #hero-section {
        padding-top: 0 !important;
        padding-bottom: 2rem !important;
    }
}


/* Desktop improvements (>= 769px) */
@media (min-width: 769px) {
    #hero-section .hero-grid {
        align-items: stretch !important;
        min-height: 75vh !important;
    }

    #hero-section .hero-image-wrapper {
        height: 100% !important;
        min-height: 500px !important;
    }

    #hero-section .hero-image-wrapper img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center top !important;
    }
}

#sticky-mobile-cta,
.fab-sticky {
    transition: opacity 0.35s ease, transform 0.35s ease !important;
}

/* ════════════════════════════════════════════════════════════
   SPECIALTY PAGES — Scrollable Horizontal Subnav Chips (Mobile)
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

      .af-subnav,
    .sub-nav-anchors {
        position: sticky !important;
        top: 68px !important;      /* antes 60px — ajustar al alto real del navbar */
        background: #FFFFFF !important;
        border-bottom: 1px solid rgba(61, 28, 10, 0.08) !important;
        padding: 0.5rem 0 !important;
        z-index: 999 !important;    /* antes 90 — por debajo del navbar (1000) pero por encima de todo lo demás */
        width: 100% !important;
        display: block !important;
    }

    .af-subnav__track,
    .sub-nav-container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        padding: 0 20px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        width: auto !important;
        max-width: 100% !important;
    }

    .af-subnav__track::-webkit-scrollbar,
    .sub-nav-container::-webkit-scrollbar {
        display: none !important;
    }

    .af-subnav__chip,
    .sub-nav-link {
        flex-shrink: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        padding: 8px 16px !important;
        border-radius: 100px !important;
        font-size: 0.82rem !important;
        font-weight: 600 !important;
        color: #3D1C0A !important;
        text-decoration: none !important;
        background: #F5EDE4 !important;
        border: 1px solid rgba(61, 28, 10, 0.1) !important;
        transition: background 0.2s ease, color 0.2s ease !important;
        white-space: nowrap !important;
    }

    .af-subnav__chip:hover,
    .af-subnav__chip.active,
    .sub-nav-link:hover,
    .sub-nav-link.active {
        background: #3D1C0A !important;
        color: #FFFFFF !important;
        border-color: #3D1C0A !important;
    }
}


/* ════════════════════════════════════════════════════════════
   FIX — Dropdown "Especialidades": tap-to-toggle en vez de hover
   El hover-CSS en mobile queda "pegado" y bloquea toques debajo
   ════════════════════════════════════════════════════════════ */
@media (hover: none), (pointer: coarse) {
    .nav-dropdown-menu {
        opacity: 0;
        pointer-events: none;
        transform: translateX(-50%) translateY(10px);
    }

    .nav-dropdown-item.dropdown-open .nav-dropdown-menu {
        opacity: 1;
        pointer-events: all;
        transform: translateX(-50%) translateY(0);
    }

    .nav-dropdown-item.dropdown-open .nav-dropdown-chevron {
        transform: rotate(180deg);
    }
}

/* ════════════════════════════════════════════════════════════
   FIX — Área táctil más generosa en sub-nav chips
   ════════════════════════════════════════════════════════════ */
.sub-nav-link,
.af-subnav__chip {
    min-height: 40px;
    -webkit-tap-highlight-color: rgba(61, 28, 10, 0.08);
    touch-action: manipulation;
}

/* Hero image: rectangular professional appearance in mobile */
@media (max-width: 768px) {
    #hero-section .hero-image-wrapper {
        display: block !important;
        order: -1 !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        min-height: 280px !important;
        border-radius: 16px !important;
        overflow: visible !important;
        margin: 0 auto 1.5rem !important;
        animation: none !important;
    }

    #hero-section .hero-image-wrapper img {
        width: 100% !important;
        height: auto !important;
        max-height: 400px !important;
        object-fit: contain !important;
        object-position: center center !important;
        display: block !important;
        border-radius: 16px !important;
    }

    /* Badge: chip simple debajo de la imagen */
    #hero-section .hero-badge-floating {
        position: static !important;
        display: flex !important;
        width: fit-content !important;
        margin: 0 auto 20px !important;
        background: #FFFFFF !important;
        border: 1px solid rgba(61,28,10,0.12) !important;
        box-shadow: 0 4px 14px rgba(61,28,10,0.08) !important;
    }
}