/* ================================================================
   NAT CLINIC — MOBILE RESPONSIVE STYLES
   Solo afecta pantallas ≤ 768px (móviles) y ≤ 480px (pequeños)
   NO modifica ningún estilo para escritorio.
   ================================================================ */

/* ── MENÚ MÓVIL (Lado Derecho) ── */
@media (max-width: 768px) {

    /* ── Botón Hamburguesa ── */
    .mobile-menu-btn,
    .navbar .mobile-menu-btn,
    .navbar:not(.scrolled) .mobile-menu-btn,
    .navbar.scrolled .mobile-menu-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        border-radius: 10px !important;
        background: var(--primary) !important;
        color: white !important;
        border: none !important;
        cursor: pointer !important;
        font-size: 1.2rem !important;
        z-index: 1100 !important;
        position: relative !important;
        transition: all 0.3s ease !important;
        flex-shrink: 0 !important;
        order: 3 !important; /* Mueve el botón al extremo derecho */
        margin-left: auto !important; /* Empuja el botón a la derecha */
    }

    /* ── Overlay oscuro detrás del menú ── */
    .nav-links::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        z-index: -1;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.4s ease;
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
    }

    .nav-links.active::before {
        opacity: 1;
        pointer-events: auto;
        left: -100vw;
        width: 200vw;
    }

    /* ── Panel del Menú (Slide desde la derecha) ── */
    .nav-links {
        position: fixed !important;
        top: 0 !important;
        right: -100% !important; /* Escondido a la derecha */
        left: auto !important;
        width: min(320px, 85vw) !important;
        height: 100dvh !important;
        background: rgba(15, 92, 77, 0.95) !important; /* Glassmorphism Premium */
        backdrop-filter: blur(15px) !important;
        -webkit-backdrop-filter: blur(15px) !important;
        border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        gap: 0 !important;
        padding: 0 !important;
        transition: right 0.4s cubic-bezier(0.77, 0, 0.175, 1) !important;
        z-index: 1050 !important;
        overflow-y: auto;
        overflow-x: hidden;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: none !important;
        box-shadow: -15px 0 40px rgba(0,0,0,0.3) !important;
    }

    .nav-links.active {
        right: 0 !important; /* Entra desde la derecha */
    }

    /* ── Cabecera del panel ── */
    .nav-links::after {
        content: '';
        display: block;
        height: 50px;
    }

    /* ── Botón de cierre (X) ── */
    .mobile-menu-close {
        display: flex !important;
        position: sticky !important;
        top: 0 !important;
        right: 0 !important;
        left: auto !important;
        width: 100% !important;
        height: auto !important;
        padding: 1.5rem 1.5rem 1rem !important;
        background: transparent !important;
        border: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
        border-radius: 0 !important;
        align-items: center !important;
        justify-content: flex-end !important; /* Alineado a la derecha */
        z-index: 1060 !important;
        color: white !important;
        cursor: pointer !important;
        font-size: 1.5rem !important;
        margin: 0 !important;
    }

    .mobile-menu-close i {
        background: transparent !important;
        width: auto !important;
        height: auto !important;
        padding: 0.5rem !important;
    }

    /* ── Items de navegación ── */
    .nav-links > li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        width: 100% !important;
        text-align: left !important;
    }

    /* ── Links de navegación ── */
    .nav-link {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        color: rgba(255, 255, 255, 0.9) !important;
        font-size: 1.2rem !important; /* Más elegante */
        font-family: 'Outfit', 'Inter', sans-serif !important;
        font-weight: 500 !important;
        padding: 1.4rem 2rem !important; /* Más espaciado */
        text-decoration: none !important;
        transition: all 0.3s ease !important;
        width: 100% !important;
        font-style: normal !important;
    }

    .nav-link::after {
        content: '›';
        font-size: 1.3rem;
        opacity: 0.4;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-left: auto !important; /* Empuja a la derecha */
    }

    .nav-link:hover,
    .nav-link.active {
        background: rgba(255, 255, 255, 0.05) !important;
        color: var(--accent) !important;
        padding-left: 1.8rem !important;
    }

    /* ── Submenú Desplegable ── */
    .has-submenu .nav-link::after {
        content: '∨';
        font-size: 0.9rem;
        transition: transform 0.3s ease !important;
        display: inline-flex !important;
    }

    .has-submenu.submenu-open .nav-link::after {
        transform: rotate(180deg) !important;
        opacity: 1 !important;
    }

    .submenu {
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        box-shadow: none !important;
        background: rgba(0, 0, 0, 0.15) !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        width: 100% !important;
        display: none !important; /* Oculto por defecto */
    }

    .has-submenu.submenu-open .submenu {
        display: block !important; /* Mostrar al hacer clic */
    }

    .submenu li {
        padding: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
        width: 100% !important;
    }

    .submenu li a {
        color: rgba(255, 255, 255, 0.75) !important;
        padding: 0.9rem 2rem !important;
        display: block !important;
        font-size: 0.9rem !important; /* Más pequeño para el submenú */
        text-align: left !important;
        font-family: inherit !important;
        font-weight: 400 !important;
        transition: all 0.2s ease !important;
    }

    .submenu li a:hover {
        background: rgba(255, 255, 255, 0.05) !important;
        color: white !important;
        padding-left: 2.5rem !important;
        transform: none !important;
    }

    /* ── Nav Social Wrapper ── */
    .nav-social-wrapper {
        display: flex !important;
        margin: 2rem auto !important;
        padding: 0 1.5rem !important;
        border: none !important;
        justify-content: flex-start !important;
    }
    
    .nav-social-expandable {
        flex-direction: row !important;
        gap: 1.5rem !important;
        position: relative !important;
    }
    
    .nav-social-expandable a {
        color: white !important;
        background: rgba(255, 255, 255, 0.1);
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        font-size: 1.1rem;
        transition: all 0.3s ease;
    }

    /* ── Body: prevenir scroll cuando menú está abierto ── */
    body.menu-open {
        overflow: hidden !important;
    }
}

/* ── REGLAS BASE (sin media query) para elementos que tenían styles inline ── */
.founders-spotlight-grid {
    grid-template-columns: 1fr 1fr;
}

.pharmacy-grid {
    grid-template-columns: 1.2fr 1fr;
}

/* ── TABLET (992px) ── */
@media (max-width: 992px) {

    /* Hero Split Section */
    .hero-split {
        padding-top: 120px !important;
        padding-bottom: 2rem !important;
        align-items: flex-start;
    }

    .hero-split-container {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
        text-align: center !important;
    }

    .hero-split-left {
        padding-right: 0 !important;
        order: 2 !important;
    }

    .hero-split-right {
        height: 45vh !important;
        min-height: 300px !important;
        order: 1 !important;
        margin-top: 1rem !important;
    }

    .hero-split-subtitle {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Founders Section */
    .founders-spotlight-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    .founder-spotlight-card {
        height: 450px !important;
    }

    /* Pharmacy Section */
    .pharmacy-grid {
        grid-template-columns: 1fr !important;
        gap: 3rem !important;
        text-align: center !important;
    }

    .pharmacy-info .section-subtitle {
        text-align: center !important;
    }

    .pharmacy-info h2 {
        text-align: center !important;
    }

    /* Stat cells */
    .stats-strip-inner {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .stat-cell {
        border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    }

    /* Ultra floating dock */
    .ultra-floating-dock {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        margin-top: -50px !important;
    }

    /* Efficiency block */
    .efficiency-block {
        grid-template-columns: 1fr !important;
    }

    .efficiency-media {
        min-height: 260px !important;
    }

    .efficiency-copy {
        padding: 2.5rem 2rem !important;
    }

    /* Experience grid */
    .experience-grid {
        grid-template-columns: 1fr !important;
    }

    .exp-card-turnos,
    .exp-card-musica,
    .exp-card-gastronomia,
    .exp-card-vip,
    .exp-card-financiamiento {
        grid-column: span 1 !important;
    }

    .exp-card-turnos {
        grid-template-columns: 1fr !important;
        min-height: auto !important;
    }

    .exp-card-turnos-img {
        min-height: 280px !important;
        border-radius: 0 0 40px 40px !important;
    }

    .exp-card-financiamiento {
        flex-direction: column !important;
        text-align: center !important;
        gap: 2rem !important;
        padding: 2.5rem 1.5rem !important;
    }

    .exp-financiamiento-text h3 {
        text-align: center !important;
    }

    .exp-financiamiento-options {
        justify-content: center !important;
        width: 100% !important;
        flex-wrap: wrap !important;
        gap: 1.5rem !important;
    }
}

/* ── MÓVIL (768px) ── */
@media (max-width: 768px) {

    /* ── Variables Globales ── */
    :root {
        --section-padding: 5rem 1.2rem;
    }

    /* ── HERO SPLIT ── */
    .hero-split {
        padding-top: 100px !important;
        padding-bottom: 2.5rem !important;
        min-height: auto !important;
    }

    .hero-split-container {
        grid-template-columns: 1fr !important;
        text-align: center !important;
        gap: 1.5rem !important;
    }

    .hero-split-left {
        order: 2 !important;
        padding: 0 1.5rem !important;
    }

    .hero-split-right {
        order: 1 !important;
        height: 40vh !important;
        min-height: 260px !important;
        border-radius: 24px !important;
    }

    .hero-split-subtitle {
        font-size: 1.1rem !important; /* Slightly larger for better clarity */
        line-height: 1.7 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: 100% !important;
        margin-bottom: 3.5rem !important; /* More space before the button */
        color: #444 !important;
        font-weight: 400 !important;
    }

    .hero-split-btn {
        display: block !important;
        text-align: center !important;
        margin-bottom: 2rem !important;
        padding: 0.9rem 2rem !important;
    }

    .hero-pills {
        justify-content: center !important;
        gap: 0.5rem !important;
    }

    .hero-pill {
        font-size: 0.78rem !important;
        padding: 0.4rem 0.9rem !important;
    }

    /* Floating tags en hero — ocultar en móvil pequeño */
    .tag-top,
    .tag-mid,
    .tag-bot {
        transform: scale(0.65) !important;
        transform-origin: top left !important;
    }

    .tag-top { top: 5% !important; left: -5px !important; }
    .tag-mid { top: 38% !important; left: 5px !important; }
    .tag-bot { bottom: 18% !important; right: -5px !important; transform-origin: top right !important; }

    /* Social pills en hero (modo horizontal abajo) */
    .hero-split-social {
        flex-direction: row !important;
        top: auto !important;
        bottom: -20px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        padding: 0.7rem 1.2rem !important;
        gap: 1.2rem !important;
        border-radius: 50px !important;
    }

    /* ── SECCIÓN "POR QUÉ ELEGIRNOS" ── */
    .why-choose-us-reveal {
        padding: 5rem 0 !important;
    }

    .why-choose-us-reveal .container {
        padding: 0 1.5rem;
    }

    /* ── DOCUMENTACIÓN (ANTES/DESPUÉS) ── */
    .ba-carousel-container {
        max-width: 100% !important;
        padding: 0 0.5rem !important;
    }

    .ba-carousel-wrapper {
        border-radius: 20px !important;
    }

    .before-after-card {
        height: 420px !important;
    }

    .ba-overlay {
        padding: 2rem 1.5rem !important;
        background: linear-gradient(transparent, rgba(0,0,0,0.9)) !important;
    }

    .ba-nav {
        width: 32px !important;
        height: 32px !important;
        background: var(--primary) !important;
        color: white !important;
        box-shadow: 0 5px 15px rgba(0,0,0,0.2) !important;
        font-size: 0.8rem !important;
    }

    .ba-nav.ba-prev {
        left: 0.2rem !important;
    }

    .ba-nav.ba-next {
        right: 0.2rem !important;
    }

    .before-after-card {
        height: 480px !important;
    }

    .ba-overlay {
        padding: 1.5rem !important;
    }

    .ba-overlay h4 {
        font-size: 1.3rem !important;
    }

    .ba-overlay p {
        font-size: 0.85rem !important;
    }

    .ba-label-before, .ba-label-after {
        top: 1.5rem !important;
        padding: 0.5rem 1rem !important;
        font-size: 0.75rem !important;
        border-radius: 10px !important;
        letter-spacing: 1px !important;
        text-transform: uppercase !important;
    }

    .ba-label-before { left: 1.5rem !important; }
    .ba-label-after { right: 1.5rem !important; }

    .ba-slide img {
        object-fit: contain !important; /* Cambiamos a contain para que se vea toda la imagen sin recortes */
        background: #000; /* Fondo negro para que no haya espacios blancos alrededor */
    }

    .ba-comparison-container {
        gap: 2px !important; /* Reducimos el espacio entre imágenes */
    }

    .ba-comparison-container > div {
        border-left: 2px solid white !important; /* Línea divisoria más fina */
    }

    .ba-comparison-container div:first-child,
    .ba-comparison-container div:last-child {
        font-size: 0.75rem !important;
    }

    /* ── FOUNDERS SPOTLIGHT ── */
    .founders-spotlight-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    .founder-spotlight-card {
        height: 400px !important;
        border-radius: 30px !important;
    }

    .founder-spotlight-card h3 {
        font-size: 2rem !important;
    }

    /* ── PHARMACY SECTION ── */
    .pharmacy-grid {
        grid-template-columns: 1fr !important;
        gap: 2.5rem !important;
        text-align: center !important;
    }

    .pharmacy-info .section-subtitle,
    .pharmacy-info h2 {
        text-align: center !important;
    }

    .pharmacy-info div[style*="display: flex; flex-direction: column"] {
        align-items: center;
    }

    /* ── EXPERIENCES (BENTO GRID) ── */
    .experiences-section {
        padding: 5rem 1rem !important;
    }

    .experience-grid {
        grid-template-columns: 1fr !important;
    }

    .exp-card-turnos {
        grid-template-columns: 1fr !important;
        min-height: auto !important;
    }

    .exp-card-turnos-content {
        padding: 2rem 1.5rem !important;
    }

    .exp-card-turnos-content h3 {
        font-size: 1.6rem !important;
    }

    .exp-card-turnos-img {
        min-height: 240px !important;
        border-radius: 0 0 30px 30px !important;
    }

    .exp-card-musica-content {
        padding: 2.5rem 1.5rem !important;
    }

    .exp-card-financiamiento {
        flex-direction: column !important;
        text-align: center !important;
        padding: 2rem 1.2rem !important;
        gap: 1.5rem !important;
    }

    .exp-financiamiento-text h3 {
        text-align: center !important;
        font-size: 1.4rem !important;
    }

    .exp-financiamiento-options {
        justify-content: center !important;
        width: 100% !important;
        flex-wrap: wrap !important;
    }

    .exp-card-gastronomia,
    .exp-card-vip {
        min-height: 320px !important;
    }

    /* ── SECCIÓN EFICIENCIA (VIDEO) ── */
    .efficiency-block {
        grid-template-columns: 1fr !important;
        border-radius: 20px !important;
    }

    .efficiency-media {
        min-height: 220px !important;
    }

    .efficiency-copy {
        padding: 2.5rem 1.5rem !important;
    }

    .efficiency-copy h2 {
        font-size: 2rem !important;
        text-align: center !important;
    }

    .efficiency-copy .label,
    .efficiency-copy p {
        text-align: center !important;
    }

    .efficiency-metrics {
        justify-content: center !important;
        gap: 2rem !important;
        padding-left: 0 !important;
        border-left: none !important;
        border-top: 2px solid var(--accent) !important;
        padding-top: 1.5rem !important;
        flex-wrap: wrap !important;
    }

    /* ── ABOUT US (GRID-2) ── */
    #nosotros .grid-2 {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    #nosotros .glass-card {
        right: 0 !important;
        bottom: 1rem !important;
        width: 90% !important;
        margin: 0 auto !important;
        left: 5% !important;
    }

    #nosotros > .container > div:first-child {
        height: 380px !important;
    }

    #nosotros > .container > div:last-child {
        padding-left: 0 !important;
        text-align: center !important;
    }

    #nosotros h2 {
        text-align: center !important;
    }

    #nosotros .section-subtitle {
        text-align: center !important;
    }

    #nosotros ul li {
        justify-content: center !important;
    }

    /* ── CONTACT SECTION ── */
    #contacto .grid-2 {
        grid-template-columns: 1fr !important;
        gap: 2.5rem !important;
    }

    .ultra-form-surface {
        padding: 2rem 1.2rem !important;
    }

    .ultra-form-surface h2 {
        font-size: 1.6rem !important;
    }

    /* Mini cards (Dirección / Teléfono) */
    #contacto .grid-2 > div:last-child > div:first-child {
        grid-template-columns: 1fr !important;
    }

    /* Social connect row */
    #contacto > div:last-child > div:last-child > div:last-child {
        flex-direction: column !important;
        gap: 1rem !important;
        text-align: center !important;
    }

    /* Topic pills */
    .topic-pills-container {
        gap: 0.5rem !important;
    }

    .topic-pill span {
        padding: 0.6rem 1rem !important;
        font-size: 0.85rem !important;
    }

    /* Stat strip */
    .stats-strip-inner {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .stat-cell {
        padding: 1.8rem 1rem !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    }

    .stat-cell:nth-child(even) {
        border-right: none !important;
    }

    /* ── INSURANCE ARC ── */
    .insurance-arc-section {
        padding: 5rem 1rem !important;
    }

    .arc-container {
        height: 300px !important;
    }

    /* ── FOOTER ── */
    footer {
        padding: 3rem 1.5rem 2rem !important;
    }

    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
        text-align: center !important;
    }

    .footer-col h4 {
        font-size: 1.1rem !important;
    }

    .footer-col:first-child > div {
        justify-content: center !important;
    }

    /* ── BRAND STATEMENT ── */
    .brand-statement-section {
        padding: 3.5rem 1.2rem !important;
    }

    .tribute-portrait-container {
        width: 220px !important;
        height: 260px !important;
    }

    .tribute-circle-clip {
        width: 190px !important;
        height: 190px !important;
    }

   .brand-statement-section p {
        font-size: 1.2rem !important;
        padding: 0 0.5rem !important;
        line-height: 1.5 !important;
        font-style: italic !important;
        color: white !important;
    }

    /* ── DEV BANNER ── */
    .dev-banner-section {
        flex-direction: column !important;
        padding: 2rem 1.5rem !important;
        text-align: center !important;
        border-radius: 16px !important;
    }

    .banner-main-phrase {
        font-size: 1.4rem !important;
        text-align: center !important;
    }

    /* ── SECTION GLOBAL PADDING ── */
    .section {
        padding: 4rem 1.2rem !important;
    }

    /* ── HEADINGS ── */
    h1 { font-size: 2.4rem !important; line-height: 1.1 !important; }
    h2 { font-size: 2rem !important; line-height: 1.2 !important; }
    h3 { font-size: 1.6rem !important; }

    /* ── VIDEO TESTIMONIALS ── */
    .video-testimonials-grid {
        grid-template-columns: 1fr !important;
        max-width: 360px !important;
        margin: 0 auto !important;
        gap: 2rem !important;
    }

    /* ── CHATBOT ── */
    .chatbot-container {
        bottom: 80px !important;
        right: 1rem !important;
    }

    .chatbot-window {
        width: calc(100vw - 2rem) !important;
        height: 55vh !important;
        right: 0 !important;
        bottom: 75px !important;
        position: fixed !important;
    }
}

/* ── MÓVIL PEQUEÑO (480px) ── */
@media (max-width: 480px) {

    /* Hero */
    .hero-split {
        padding-top: 90px !important;
    }

    .hero-split-title {
        font-size: 1.8rem !important;
        letter-spacing: -1px !important;
        line-height: 1.2 !important;
    }

    .hero-split-right {
        height: 32vh !important;
        min-height: 220px !important;
        border-radius: 18px !important;
    }

    /* ── Mostrar tags flotantes ('informaciones') en móviles con escala ajustada ── */
    .floating-tag {
        white-space: nowrap !important;
    }

    .hero-custom-slide.active .floating-tag {
        transform: translateY(0) scale(0.65) !important;
    }

    .tag-top {
        top: 15% !important;
        left: 5% !important;
        transform-origin: left center !important;
    }

    .tag-mid {
        top: 45% !important;
        left: 5% !important;
        transform-origin: left center !important;
    }

    .tag-bot {
        bottom: 25% !important;
        right: -10% !important;
        transform-origin: right center !important;
    }

    /* Hero social pills */
    .hero-split-social {
        padding: 0.5rem 1rem !important;
        gap: 0.8rem !important;
    }

    /* Hero pill text */
    .hero-pill {
        font-size: 0.72rem !important;
        padding: 0.3rem 0.75rem !important;
    }

    /* Founders */
    .founder-spotlight-card {
        height: 340px !important;
        border-radius: 24px !important;
    }

    .founder-spotlight-card h3 {
        font-size: 1.6rem !important;
    }

    .founder-spotlight-card > div {
        padding: 2.5rem 1.5rem !important;
    }

    /* Before/After card */
    .before-after-card {
        height: 400px !important;
    }

    /* Contact form */
    .ultra-form-surface {
        padding: 1.5rem 1rem !important;
    }

    /* Grid de dos columnas de info */
    #contacto div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* Topic pills */
    .topic-pill span {
        font-size: 0.78rem !important;
        padding: 0.5rem 0.8rem !important;
    }

    /* Headings */
    h1 { font-size: 2.4rem !important; line-height: 1.1 !important; letter-spacing: -1.5px !important; }
    h2 { font-size: 1.8rem !important; line-height: 1.2 !important; }

    /* Buttons */
    .hero-split-btn {
        font-size: 0.95rem !important;
        padding: 0.85rem 1.5rem !important;
    }

    .btn {
        padding: 0.8rem 1.5rem !important;
        font-size: 0.9rem !important;
    }

    /* Stats strip: 1 col en pantallas muy pequeñas */
    .stats-strip-inner {
        grid-template-columns: 1fr !important;
    }

    .stat-cell {
        border-right: none !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    }

    .stat-cell:last-child {
        border-bottom: none !important;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr !important;
    }

    /* Section padding */
    .section {
        padding: 3rem 1rem !important;
    }

    /* Chatbot window */
    .chatbot-window {
        width: calc(100vw - 1.5rem) !important;
        height: 60vh !important;
    }

    /* Insurance arc */
    .arc-container {
        height: 260px !important;
    }

    .insurance-card-arc {
        flex: 0 0 90px !important;
        width: 90px !important;
        height: 90px !important;
        padding: 10px !important;
    }

    .insurance-card-arc img {
        width: 70px !important;
        height: 40px !important;
    }

    /* Brand statement quote */
    .brand-statement-section p {
        font-size: 0.95rem !important;
    }

    /* Efficiency metrics */
    .efficiency-metrics {
        flex-direction: column !important;
        gap: 1.5rem !important;
        align-items: center !important;
    }

    .efficiency-metric-val {
        font-size: 2.5rem !important;
    }
}

/* ── REGLAS DE ADAPTACIÓN GLOBAL Y CORRECCIONES DE DESBORDAMIENTO ── */
@media (max-width: 768px) {
    /* Forzar todas las grillas principales a 1 columna */
    .services-grid,
    .team-showcase-grid,
    .contact-grid,
    .gallery-grid,
    .cases-grid,
    .grid-2 {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    /* Apilar correctamente las tarjetas flotantes de la "Promesa" */
    .feature-dock {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        padding: 0 0.5rem !important;
    }

    .feature-tab {
        flex: none !important;
        width: 100% !important;
        min-height: 120px !important;
        padding: 1.2rem 0.8rem !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        border-radius: 20px !important;
        background: #f8f9f8 !important;
        border: 1px solid rgba(0,0,0,0.05) !important;
    }

    .feature-tab.active {
        background: white !important;
        border-color: var(--primary) !important;
        box-shadow: 0 10px 25px rgba(15, 92, 77, 0.1) !important;
    }

    .feature-tab h5 {
        font-size: 0.85rem !important;
        margin-top: 10px !important;
        font-weight: 600 !important;
    }

    .feature-tab .promesa-icon-wrapper {
        margin-bottom: 0 !important;
    }

    .feature-projection-panel {
        margin-top: 2rem !important;
        padding: 2rem 1.5rem !important;
        border-radius: 25px !important;
        background: #fdfdfd !important;
        border: 1px solid rgba(15, 92, 77, 0.1) !important;
    }

    .feature-projection-panel h3 {
        font-size: 1.5rem !important;
        margin-bottom: 1rem !important;
        color: var(--primary) !important;
    }

    .feature-projection-panel p {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
        color: #555 !important;
    }

    /* Global Typography Optimization */
    h1, h2, h3 {
        letter-spacing: -0.5px !important;
        line-height: 1.2 !important;
    }

    .section-subtitle {
        font-size: 0.75rem !important;
        letter-spacing: 2px !important;
        margin-bottom: 0.5rem !important;
    }

    /* Better spacing for sections */
    .section {
        padding: 4rem 1.5rem !important;
    }

    /* Safe area padding for newer phones */
    body {
        padding-bottom: env(safe-area-inset-bottom);
    }

    /* Improve button touch targets */
    .btn, .ba-nav, .mobile-menu-btn, .hero-split-btn {
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.8rem 2rem !important;
        font-weight: 600 !important;
        border-radius: 50px !important;
    }

    .hero-split-btn {
        width: 90% !important;
        max-width: 320px !important;
        margin: 0 auto 3rem !important;
        font-size: 1rem !important;
    }

    .feature-tab {
        flex: 1 1 calc(50% - 15px) !important;
        min-width: 130px !important;
        margin: 0 !important;
    }

    /* Reducir padding masivo de cualquier section que no tenga la clase .section */
    section,
    header:not(.navbar) {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
        padding-left: 1.2rem !important;
        padding-right: 1.2rem !important;
        overflow-x: hidden !important; /* Previene desbordamiento lateral */
    }

    /* Asegurar que el título principal de Index sea fluido */
    .hero-split-title {
        font-size: clamp(2.2rem, 8vw, 2.8rem) !important;
        line-height: 1.1 !important;
        letter-spacing: -2px !important;
    }

    /* Transformar el sidebar del equipo en horizontal */
    .team-sidebar {
        flex-direction: row !important;
        overflow-x: auto !important;
        padding-bottom: 1rem !important;
        gap: 1rem !important;
    }

    .team-nav-item {
        flex: 0 0 auto !important;
        flex-direction: column !important;
        text-align: center !important;
        padding: 0.5rem !important;
        border-radius: 12px !important;
    }

    .team-nav-info {
        display: none !important; /* Ocultar el texto en la miniatura para ahorrar espacio o mostrar solo el rol */
    }

    /* Opcional: mostrar solo el rol si es muy pequeño */
    .team-detail-card {
        padding: 1.5rem !important;
        display: flex !important;
        flex-direction: column !important;
    }
}