/**
 * CliniCare Panama - Mobile Responsive CSS
 * Production-quality responsive overrides for WordPress + Elementor site
 *
 * Breakpoints:
 *   - 1024px : Tablet landscape
 *   - 768px  : Tablet portrait / primary mobile
 *   - 480px  : Small phones
 *   - 375px  : iPhone SE / very small devices
 *
 * @package    CliniCare_Suite
 * @version    1.0.0
 * @author     CliniCare Panama
 */

/* ==========================================================================
   0. BASE — Viewport & global mobile foundations (always applied)
   ========================================================================== */

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    scroll-behavior: smooth;
    -webkit-tap-highlight-color: transparent;
}

*,
*::before,
*::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/* Prevent horizontal scroll caused by rogue elements */
body {
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

/* Ensure images never break layout */
img {
    max-width: 100%;
    height: auto;
}

/* ==========================================================================
   1. TABLET LANDSCAPE  (max-width: 1024px)
   ========================================================================== */

@media screen and (max-width: 1024px) {

    /* --- Elementor Container System --- */
    .elementor-section .elementor-container {
        max-width: 100% !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    .e-con.e-parent {
        --padding-inline: 24px;
    }

    /* --- Cotizador 2-column to tighter --- */
    .clinicare-cotizador-layout {
        grid-template-columns: 1fr 320px;
        gap: 24px;
    }

    /* --- Benefit cards: 2 per view at tablet --- */
    .cc-benefit-card {
        flex: 0 0 calc((100% - 18px) / 2);
    }

    /* --- Carousel wrapper padding reduced --- */
    .cc-benefits-carousel-wrapper {
        padding: 0 48px;
    }
}

/* ==========================================================================
   2. PRIMARY MOBILE  (max-width: 768px)
   ========================================================================== */

@media screen and (max-width: 768px) {

    /* ---------------------------------------------------------------
       2.1  GLOBAL TYPOGRAPHY
       --------------------------------------------------------------- */

    body,
    .elementor-widget-text-editor,
    .elementor-widget-text-editor p {
        font-size: 16px !important;
        line-height: 1.65 !important;
    }

    /* Heading scale-down */
    h1, .elementor-heading-title.elementor-size-xxl {
        font-size: 1.75rem !important;
        line-height: 1.25 !important;
    }

    h2, .elementor-heading-title.elementor-size-xl {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
    }

    h3, .elementor-heading-title.elementor-size-large {
        font-size: 1.25rem !important;
        line-height: 1.35 !important;
    }

    h4, h5, h6,
    .elementor-heading-title.elementor-size-medium,
    .elementor-heading-title.elementor-size-small {
        font-size: 1.1rem !important;
        line-height: 1.4 !important;
    }

    /* ---------------------------------------------------------------
       2.2  ELEMENTOR STRUCTURE — Force vertical stacking
       --------------------------------------------------------------- */

    /* Classic Elementor columns */
    .elementor-section .elementor-container {
        flex-direction: column !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .elementor-column {
        width: 100% !important;
        max-width: 100% !important;
        flex-basis: 100% !important;
    }

    /* Override Elementor inline width on columns */
    .elementor-column[style*="width"] {
        width: 100% !important;
    }

    .elementor-widget-wrap,
    .elementor-column-wrap {
        flex-direction: column !important;
    }

    .elementor-row {
        flex-direction: column !important;
    }

    /* Flexbox container system (e-con) */
    .e-con.e-parent,
    .e-con.e-child {
        --flex-direction: column !important;
        --flex-wrap: wrap !important;
        flex-direction: column !important;
        flex-wrap: wrap !important;
    }

    .e-con > .e-con {
        width: 100% !important;
        max-width: 100% !important;
        flex-basis: 100% !important;
    }

    /* Section padding reduction */
    .elementor-section {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .elementor-section.elementor-section-boxed > .elementor-container {
        max-width: 100% !important;
    }

    .elementor-section .elementor-section-inner {
        padding: 0 !important;
    }

    /* Widget spacing */
    .elementor-widget:not(:last-child) {
        margin-bottom: 16px !important;
    }

    /* ---------------------------------------------------------------
       2.3  HEADER / NAVIGATION
       --------------------------------------------------------------- */

    /* Sticky mobile header */
    .elementor-location-header,
    header.site-header,
    #masthead {
        position: sticky !important;
        top: 0 !important;
        z-index: 9999 !important;
        background: #fff !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
    }

    /* Reduce header height on mobile */
    .elementor-location-header .elementor-section,
    .elementor-location-header .e-con {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        min-height: auto !important;
    }

    /* Smaller logo */
    .elementor-location-header .elementor-widget-image img,
    .elementor-location-header .elementor-image img,
    .custom-logo {
        max-height: 40px !important;
        width: auto !important;
    }

    /* Hide desktop nav items */
    .elementor-nav-menu--main,
    .elementor-nav-menu__container,
    nav.elementor-nav-menu--layout-horizontal {
        display: none !important;
    }

    /* Show hamburger toggle */
    .elementor-menu-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        cursor: pointer;
        z-index: 10001;
    }

    .elementor-menu-toggle svg,
    .elementor-menu-toggle i {
        font-size: 24px !important;
        color: #1C4B42 !important;
    }

    /* Mobile menu overlay */
    .elementor-nav-menu--dropdown,
    .elementor-nav-menu__container.elementor-nav-menu__container--dropdown {
        display: none;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        background: rgba(255, 255, 255, 0.98) !important;
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        z-index: 10000 !important;
        padding: 80px 32px 32px !important;
        overflow-y: auto !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 0 !important;
    }

    /* When menu is toggled open */
    .elementor-nav-menu--dropdown.elementor-nav-menu--indicator-classic,
    .elementor-nav-menu__container--dropdown.show,
    .elementor-nav-menu--toggle .elementor-nav-menu--dropdown.elementor-nav-menu--visible {
        display: flex !important;
        animation: ccMobileMenuFadeIn 0.3s ease forwards;
    }

    @keyframes ccMobileMenuFadeIn {
        from {
            opacity: 0;
            transform: translateY(-12px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Mobile menu items styling */
    .elementor-nav-menu--dropdown li,
    .elementor-nav-menu--dropdown .menu-item {
        width: 100% !important;
        text-align: center !important;
        border-bottom: 1px solid rgba(28, 75, 66, 0.08) !important;
    }

    .elementor-nav-menu--dropdown li a,
    .elementor-nav-menu--dropdown .menu-item a {
        display: block !important;
        padding: 18px 16px !important;
        font-size: 1.125rem !important;
        font-weight: 600 !important;
        color: #1C4B42 !important;
        text-decoration: none !important;
        transition: color 0.3s ease, background 0.3s ease !important;
    }

    .elementor-nav-menu--dropdown li a:hover,
    .elementor-nav-menu--dropdown li a:active {
        color: #00b2e2 !important;
        background: rgba(0, 178, 226, 0.06) !important;
    }

    /* Sub-menu inside mobile */
    .elementor-nav-menu--dropdown .sub-menu {
        position: static !important;
        width: 100% !important;
        box-shadow: none !important;
        background: rgba(0, 178, 226, 0.03) !important;
        padding: 0 !important;
    }

    .elementor-nav-menu--dropdown .sub-menu li a {
        padding-left: 32px !important;
        font-size: 1rem !important;
        font-weight: 500 !important;
    }

    /* ---------------------------------------------------------------
       2.4  HERO SECTION
       --------------------------------------------------------------- */

    .cc-benefits-hero {
        min-height: 280px !important;
        max-height: 380px !important;
        aspect-ratio: auto !important;
        margin: 8px !important;
        border-radius: 16px !important;
    }

    .cc-benefits-hero__img {
        border-radius: 16px !important;
        object-position: 65% center !important;
    }

    .cc-benefits-hero__overlay {
        border-radius: 16px !important;
        padding: 0 20px !important;
        background: linear-gradient(
            to right,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(255, 255, 255, 0.88) 45%,
            rgba(255, 255, 255, 0.5) 75%,
            transparent 100%
        ) !important;
    }

    .cc-benefits-hero__content {
        max-width: 85% !important;
    }

    .cc-benefits-hero__title {
        font-size: clamp(1.25rem, 5vw, 1.75rem) !important;
        margin-bottom: 16px !important;
    }

    .cc-benefits-section .cc-benefits-hero__cta,
    .cc-benefits-section a.cc-benefits-hero__cta {
        padding: 14px 28px !important;
        font-size: 0.9375rem !important;
    }

    /* Generic Elementor hero sections */
    .elementor-section[data-settings*="min_height"] {
        min-height: 320px !important;
    }

    /* ---------------------------------------------------------------
       2.5  BENEFITS CAROUSEL
       --------------------------------------------------------------- */

    .cc-benefits-carousel-wrapper {
        margin: -24px 8px 0 !important;
        padding: 0 8px !important;
    }

    /* 1 card per view on mobile */
    .cc-benefit-card {
        flex: 0 0 calc(100% - 16px) !important;
        min-width: calc(100% - 16px) !important;
        scroll-snap-align: center !important;
        margin: 0 8px;
    }

    .cc-benefits-carousel {
        gap: 0 !important;
        padding: 16px 0 24px !important;
        scroll-padding-left: 8px;
    }

    /* Hide arrows on mobile, rely on swipe + dots */
    .cc-benefits-section .cc-carousel-arrow,
    .cc-benefits-section button.cc-carousel-arrow {
        display: none !important;
    }

    /* Larger dots for touch */
    .cc-benefits-section .cc-carousel-dot,
    .cc-benefits-section button.cc-carousel-dot {
        width: 12px !important;
        height: 12px !important;
    }

    .cc-benefits-carousel__dots {
        gap: 10px !important;
        padding: 12px 0 !important;
    }

    /* Card hover disabled on touch */
    .cc-benefit-card:hover {
        transform: none !important;
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    }

    .cc-benefit-card.is-visible:hover {
        transform: none !important;
    }

    /* ---------------------------------------------------------------
       2.6  PLAN CARDS / MEMBERSHIP GRID
       --------------------------------------------------------------- */

    .clinicare-plan-wrapper {
        padding: 16px !important;
    }

    .clinicare-planes-selector {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .clinicare-plan-option-content {
        border-radius: 14px !important;
    }

    .clinicare-plan-option-header {
        padding: 20px 16px !important;
    }

    .clinicare-plan-option-header h4 {
        font-size: 1.25rem !important;
    }

    .clinicare-plan-option-body {
        padding: 16px !important;
    }

    .clinicare-plan-option-precios {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    /* ---------------------------------------------------------------
       2.7  COTIZADOR / AFFILIATION FORMS
       --------------------------------------------------------------- */

    /* Stack sidebar below on mobile */
    .clinicare-cotizador-layout {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .clinicare-cotizador-sidebar {
        position: static !important;
        order: -1;
    }

    .clinicare-cotizador,
    .clinicare-afiliacion {
        padding: 12px !important;
    }

    .clinicare-cotizador-header {
        margin-bottom: 28px !important;
    }

    .clinicare-cotizador-header h2 {
        font-size: 1.5rem !important;
    }

    .clinicare-cotizador-header p {
        font-size: 1rem !important;
    }

    /* Steps */
    .clinicare-cotizador-step {
        padding: 20px 16px !important;
        margin-bottom: 16px !important;
        border-radius: 14px !important;
    }

    .clinicare-step-header {
        gap: 12px !important;
        margin-bottom: 20px !important;
    }

    .clinicare-step-header h3 {
        font-size: 1.1rem !important;
    }

    /* Tipo selector */
    .clinicare-tipo-option-content {
        padding: 16px !important;
        gap: 14px !important;
    }

    .clinicare-tipo-precio .precio-display {
        font-size: 1.25rem !important;
    }

    /* Periodo selector */
    .clinicare-periodo-selector {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .clinicare-periodo-option-content {
        padding: 16px !important;
    }

    /* Dependientes counter */
    .clinicare-counter-value {
        font-size: 2rem !important;
    }

    .clinicare-counter-btn {
        width: 44px !important;
        height: 44px !important;
    }

    /* Resumen sticky card */
    .clinicare-cotizador-resumen {
        padding: 20px !important;
        border-radius: 14px !important;
    }

    /* Generic form inputs */
    .clinicare-cotizador input[type="text"],
    .clinicare-cotizador input[type="email"],
    .clinicare-cotizador input[type="tel"],
    .clinicare-cotizador input[type="number"],
    .clinicare-cotizador input[type="date"],
    .clinicare-cotizador select,
    .clinicare-cotizador textarea,
    .clinicare-afiliacion input[type="text"],
    .clinicare-afiliacion input[type="email"],
    .clinicare-afiliacion input[type="tel"],
    .clinicare-afiliacion input[type="number"],
    .clinicare-afiliacion input[type="date"],
    .clinicare-afiliacion select,
    .clinicare-afiliacion textarea {
        width: 100% !important;
        min-height: 48px !important;
        font-size: 16px !important;
        padding: 12px 14px !important;
        border-radius: 10px !important;
        border: 1.5px solid var(--clinicare-gray-300, #D1D5DB) !important;
        background: #fff !important;
        -webkit-appearance: none !important;
        appearance: none !important;
    }

    .clinicare-cotizador input:focus,
    .clinicare-cotizador select:focus,
    .clinicare-cotizador textarea:focus,
    .clinicare-afiliacion input:focus,
    .clinicare-afiliacion select:focus,
    .clinicare-afiliacion textarea:focus {
        border-color: var(--clinicare-primary, #00b2e2) !important;
        box-shadow: 0 0 0 3px rgba(0, 178, 226, 0.15) !important;
        outline: none !important;
    }

    /* Labels above inputs */
    .clinicare-cotizador label,
    .clinicare-afiliacion label {
        display: block !important;
        margin-bottom: 6px !important;
        font-size: 0.875rem !important;
        font-weight: 600 !important;
    }

    /* Form rows stack vertically */
    .clinicare-form-row,
    .clinicare-form-grid,
    .clinicare-afiliacion .form-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
    }

    /* Elementor form widget */
    .elementor-form .elementor-field-group {
        width: 100% !important;
        flex-basis: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .elementor-field-group .elementor-field {
        width: 100% !important;
        min-height: 48px !important;
        font-size: 16px !important;
    }

    /* ---------------------------------------------------------------
       2.8  PAYMENT SECTION
       --------------------------------------------------------------- */

    /* Payment method tabs */
    .clinicare-metodo-tabs {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .clinicare-metodo-tab {
        width: 100% !important;
        min-height: 52px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 12px !important;
        font-size: 0.9375rem !important;
        font-weight: 600 !important;
        transition: all 0.3s ease !important;
    }

    .clinicare-metodo-tab.active {
        background: linear-gradient(135deg, #00b2e2, #69ca98) !important;
        color: #fff !important;
        box-shadow: 0 4px 16px rgba(0, 178, 226, 0.25) !important;
    }

    /* Payment buttons */
    .clinicare-btn-yappy,
    .clinicare-btn-transferencia,
    .clinicare-btn-ach,
    .clinicare-btn-large {
        width: 100% !important;
        min-height: 52px !important;
        font-size: 1rem !important;
        border-radius: 12px !important;
    }

    /* Payment form fields */
    .clinicare-pago-form input,
    .clinicare-pago-form select {
        width: 100% !important;
        min-height: 48px !important;
        font-size: 16px !important;
    }

    /* Loading overlay */
    .clinicare-loading-overlay {
        border-radius: 14px !important;
    }

    /* ---------------------------------------------------------------
       2.9  BUTTONS / CTAs
       --------------------------------------------------------------- */

    /* All Elementor buttons */
    .elementor-button,
    .elementor-button-wrapper .elementor-button {
        width: 100% !important;
        min-height: 48px !important;
        font-size: 16px !important;
        padding: 14px 24px !important;
        border-radius: 12px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    /* CliniCare-specific buttons */
    .clinicare-btn-continuar,
    .clinicare-btn-continuar-registro,
    .clinicare-btn-cotizar,
    .clinicare-btn-afiliar {
        width: 100% !important;
        min-height: 52px !important;
        font-size: 1rem !important;
        border-radius: 12px !important;
    }

    .clinicare-btn-volver {
        margin-bottom: 16px !important;
    }

    /* ---------------------------------------------------------------
       2.10  IMAGES
       --------------------------------------------------------------- */

    .elementor-image img,
    .elementor-widget-image img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Remove fixed dimensions from Elementor images */
    .elementor-image img[width],
    .elementor-widget-image img[width] {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* ---------------------------------------------------------------
       2.11  FOOTER
       --------------------------------------------------------------- */

    .elementor-location-footer .elementor-container,
    .elementor-location-footer .e-con.e-parent {
        flex-direction: column !important;
    }

    .elementor-location-footer .elementor-column,
    .elementor-location-footer .e-con > .e-con {
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        margin-bottom: 24px !important;
    }

    .elementor-location-footer .elementor-widget-text-editor {
        text-align: center !important;
    }

    .elementor-location-footer .elementor-section {
        padding: 24px 16px !important;
    }

    /* Footer social icons */
    .elementor-location-footer .elementor-social-icons-wrapper {
        justify-content: center !important;
    }

    /* ---------------------------------------------------------------
       2.12  CONFIRMATION CARD (post-payment)
       --------------------------------------------------------------- */

    .clinicare-confirmacion-carta {
        padding: 28px 20px 24px !important;
        margin: 12px !important;
        border-radius: 14px !important;
    }

    .clinicare-carta-logo {
        max-height: 48px !important;
    }

    .clinicare-carta-check-icon {
        width: 52px !important;
        height: 52px !important;
        margin-bottom: 20px !important;
    }

    .clinicare-carta-check-icon svg {
        width: 26px !important;
        height: 26px !important;
    }

    /* ---------------------------------------------------------------
       2.13  FAQ SECTION
       --------------------------------------------------------------- */

    .elementor-toggle .elementor-toggle-title,
    .elementor-accordion .elementor-tab-title {
        font-size: 1rem !important;
        padding: 16px !important;
        min-height: 48px !important;
    }

    .elementor-toggle .elementor-tab-content,
    .elementor-accordion .elementor-tab-content {
        padding: 12px 16px 20px !important;
        font-size: 0.9375rem !important;
        line-height: 1.65 !important;
    }

    /* ---------------------------------------------------------------
       2.14  PRELOADER
       --------------------------------------------------------------- */

    .cc-preloader {
        position: fixed;
        z-index: 99999;
    }

    /* ---------------------------------------------------------------
       2.15  GENERAL MOBILE UX
       --------------------------------------------------------------- */

    /* Safe area insets for notched devices */
    body {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }

    /* No text selection highlight on interactive elements */
    button,
    a,
    .clinicare-metodo-tab,
    .clinicare-plan-option,
    .clinicare-tipo-option,
    .clinicare-periodo-option,
    .cc-carousel-arrow,
    .cc-carousel-dot {
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
    }

    /* Smooth transitions for interactive elements */
    a, button, input, select, textarea {
        transition: all 0.3s ease;
    }

    /* Prevent zoom on input focus (iOS) — already handled by 16px min font-size */

    /* Elementor widget spacing harmonization */
    .elementor-widget-heading {
        margin-bottom: 12px !important;
    }

    .elementor-widget-divider {
        padding: 8px 0 !important;
    }

    /* Elementor spacer reduction */
    .elementor-widget-spacer .elementor-spacer-inner {
        height: 50% !important;
    }

    /* Hide desktop-only elements if tagged */
    .elementor-hidden-mobile,
    .elementor-hidden-phone {
        display: none !important;
    }

    /* Popup adjustments */
    .elementor-popup-modal .dialog-widget-content {
        width: 95vw !important;
        max-width: 95vw !important;
        margin: 8px auto !important;
        border-radius: 16px !important;
    }

    /* Elementor icon-list widget */
    .elementor-icon-list-items {
        flex-direction: column !important;
    }

    .elementor-icon-list-item {
        padding: 6px 0 !important;
    }

    /* Testimonials / reviews widget */
    .elementor-testimonial-wrapper {
        padding: 20px 16px !important;
    }

    /* Counter widget */
    .elementor-counter-number-wrapper {
        font-size: 2rem !important;
    }

    .elementor-counter-title {
        font-size: 0.9375rem !important;
    }

    /* Video embeds responsive */
    .elementor-widget-video .elementor-wrapper,
    .elementor-widget-video iframe {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ==========================================================================
   3. SMALL PHONES  (max-width: 480px)
   ========================================================================== */

@media screen and (max-width: 480px) {

    /* Tighter padding */
    .elementor-section .elementor-container {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .elementor-section {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Typography smaller step */
    h1, .elementor-heading-title.elementor-size-xxl {
        font-size: 1.5rem !important;
    }

    h2, .elementor-heading-title.elementor-size-xl {
        font-size: 1.3rem !important;
    }

    h3, .elementor-heading-title.elementor-size-large {
        font-size: 1.125rem !important;
    }

    /* Hero */
    .cc-benefits-hero {
        min-height: 240px !important;
        max-height: 320px !important;
        margin: 6px !important;
        border-radius: 14px !important;
    }

    .cc-benefits-hero__overlay {
        padding: 0 16px !important;
        border-radius: 14px !important;
    }

    .cc-benefits-hero__img {
        border-radius: 14px !important;
    }

    .cc-benefits-hero__content {
        max-width: 90% !important;
    }

    .cc-benefits-hero__title {
        font-size: 1.2rem !important;
        margin-bottom: 12px !important;
    }

    .cc-benefits-section .cc-benefits-hero__cta,
    .cc-benefits-section a.cc-benefits-hero__cta {
        padding: 12px 22px !important;
        font-size: 0.875rem !important;
    }

    .cc-benefits-hero__cta svg {
        width: 16px !important;
        height: 16px !important;
    }

    /* Carousel wrapper */
    .cc-benefits-carousel-wrapper {
        margin: -16px 4px 0 !important;
        padding: 0 4px !important;
    }

    .cc-benefit-card {
        flex: 0 0 100% !important;
        min-width: 100% !important;
        padding: 22px 18px 20px !important;
    }

    /* Plan cards */
    .clinicare-plan-wrapper {
        padding: 12px !important;
    }

    .clinicare-plan-option-precios {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    /* Form steps */
    .clinicare-cotizador-step {
        padding: 16px 14px !important;
    }

    .clinicare-step-header h3 {
        font-size: 1rem !important;
    }

    .clinicare-step-badge {
        font-size: 0.75rem !important;
        padding: 4px 10px !important;
    }

    /* Cotizador header */
    .clinicare-cotizador-header h2 {
        font-size: 1.3rem !important;
    }

    /* Counter */
    .clinicare-counter-value {
        font-size: 1.75rem !important;
    }

    .clinicare-counter-display {
        min-width: 90px !important;
    }

    /* Resumen */
    .clinicare-cotizador-resumen {
        padding: 16px !important;
    }

    /* Confirmation card */
    .clinicare-confirmacion-carta {
        padding: 24px 16px 20px !important;
        margin: 8px !important;
    }

    /* Payment tabs */
    .clinicare-metodo-tab {
        min-height: 48px !important;
        font-size: 0.875rem !important;
    }

    /* Buttons */
    .elementor-button,
    .elementor-button-wrapper .elementor-button {
        padding: 12px 20px !important;
        font-size: 15px !important;
    }

    /* Footer */
    .elementor-location-footer .elementor-section {
        padding: 20px 12px !important;
    }

    /* Popup */
    .elementor-popup-modal .dialog-widget-content {
        width: 98vw !important;
    }
}

/* ==========================================================================
   4. VERY SMALL DEVICES  (max-width: 375px) — iPhone SE, etc.
   ========================================================================== */

@media screen and (max-width: 375px) {

    /* Even tighter padding */
    .elementor-section .elementor-container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .elementor-section {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* Typography floor */
    h1, .elementor-heading-title.elementor-size-xxl {
        font-size: 1.35rem !important;
    }

    h2, .elementor-heading-title.elementor-size-xl {
        font-size: 1.2rem !important;
    }

    body,
    .elementor-widget-text-editor,
    .elementor-widget-text-editor p {
        font-size: 15px !important;
    }

    /* Hero ultra-compact */
    .cc-benefits-hero {
        min-height: 200px !important;
        max-height: 280px !important;
        margin: 4px !important;
        border-radius: 12px !important;
    }

    .cc-benefits-hero__overlay {
        padding: 0 12px !important;
        border-radius: 12px !important;
    }

    .cc-benefits-hero__img {
        border-radius: 12px !important;
    }

    .cc-benefits-hero__title {
        font-size: 1.1rem !important;
        margin-bottom: 10px !important;
        line-height: 1.35 !important;
    }

    .cc-benefits-section .cc-benefits-hero__cta,
    .cc-benefits-section a.cc-benefits-hero__cta {
        padding: 11px 18px !important;
        font-size: 0.8125rem !important;
        gap: 6px !important;
    }

    /* Cards even tighter */
    .cc-benefit-card {
        padding: 18px 14px 16px !important;
        border-radius: 16px !important;
    }

    /* Steps ultra-compact */
    .clinicare-cotizador-step {
        padding: 14px 12px !important;
        border-radius: 12px !important;
    }

    .clinicare-cotizador-header h2 {
        font-size: 1.2rem !important;
    }

    /* Tipo option compact */
    .clinicare-tipo-option-content {
        padding: 14px 12px !important;
        gap: 10px !important;
    }

    .clinicare-tipo-icon {
        width: 40px !important;
        height: 40px !important;
    }

    .clinicare-tipo-info h4 {
        font-size: 0.9375rem !important;
    }

    .clinicare-tipo-precio .precio-display {
        font-size: 1.125rem !important;
    }

    /* Counter smaller */
    .clinicare-counter-value {
        font-size: 1.5rem !important;
    }

    .clinicare-counter-btn {
        width: 40px !important;
        height: 40px !important;
    }

    .clinicare-counter-btn svg {
        width: 18px !important;
        height: 18px !important;
    }

    /* Payment */
    .clinicare-metodo-tab {
        min-height: 44px !important;
        font-size: 0.8125rem !important;
        border-radius: 10px !important;
    }

    .clinicare-btn-yappy,
    .clinicare-btn-transferencia,
    .clinicare-btn-ach,
    .clinicare-btn-large {
        min-height: 48px !important;
        font-size: 0.9375rem !important;
    }

    /* Confirmation */
    .clinicare-confirmacion-carta {
        padding: 20px 12px 16px !important;
        margin: 6px !important;
        border-radius: 12px !important;
    }

    .clinicare-carta-logo {
        max-height: 40px !important;
    }

    .clinicare-carta-check-icon {
        width: 44px !important;
        height: 44px !important;
    }

    /* Mobile nav items even bigger touch targets */
    .elementor-nav-menu--dropdown li a,
    .elementor-nav-menu--dropdown .menu-item a {
        padding: 16px 12px !important;
    }

    /* Buttons */
    .elementor-button,
    .elementor-button-wrapper .elementor-button {
        padding: 12px 16px !important;
        font-size: 14px !important;
        min-height: 46px !important;
    }

    /* Smaller logo */
    .elementor-location-header .elementor-widget-image img,
    .elementor-location-header .elementor-image img,
    .custom-logo {
        max-height: 34px !important;
    }
}

/* ==========================================================================
   5. LANDSCAPE PHONE ORIENTATION
   ========================================================================== */

@media screen and (max-height: 500px) and (orientation: landscape) {

    .cc-benefits-hero {
        min-height: 180px !important;
        max-height: 240px !important;
    }

    /* Full-screen menu needs scroll in landscape */
    .elementor-nav-menu--dropdown {
        padding-top: 60px !important;
    }

    .elementor-nav-menu--dropdown li a {
        padding: 12px 16px !important;
    }

    .elementor-location-header .elementor-section {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }
}

/* ==========================================================================
   6. DARK MODE SUPPORT (prefers-color-scheme)
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    /* Only apply if the site eventually supports dark mode.
       Currently just a structural placeholder — CliniCare uses light theme. */
}

/* ==========================================================================
   7. REDUCED MOTION PREFERENCE
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .cc-benefits-hero,
    .cc-benefit-card,
    .cc-benefits-hero__cta,
    .elementor-button,
    .clinicare-metodo-tab,
    * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

    .cc-benefit-card:hover,
    .cc-benefit-card.is-visible:hover {
        transform: none !important;
    }

    html {
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   8. PRINT ADJUSTMENTS (mobile print)
   ========================================================================== */

@media print {

    .elementor-location-header,
    .elementor-nav-menu,
    .elementor-menu-toggle,
    .cc-carousel-arrow,
    .cc-benefits-carousel__dots,
    .cc-preloader,
    .clinicare-loading-overlay {
        display: none !important;
    }

    body {
        font-size: 12pt !important;
        overflow: visible !important;
    }

    .cc-benefit-card {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}

/* ==========================================================================
   9. TOUCH-SPECIFIC ENHANCEMENTS
   ========================================================================== */

@media (hover: none) and (pointer: coarse) {

    /* Larger touch targets */
    .elementor-nav-menu--dropdown li a,
    .clinicare-metodo-tab,
    .clinicare-counter-btn,
    .cc-carousel-dot {
        min-height: 44px !important;
        min-width: 44px !important;
    }

    /* Disable hover effects on touch */
    .cc-benefit-card:hover {
        transform: none !important;
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    }

    .clinicare-plan-option:hover .clinicare-plan-option-content {
        border-color: var(--clinicare-gray-200) !important;
        box-shadow: none !important;
    }

    .clinicare-plan-option input:checked + .clinicare-plan-option-content {
        border-color: var(--plan-color, var(--clinicare-primary)) !important;
        box-shadow: 0 0 0 3px rgba(0, 180, 180, 0.2) !important;
    }

    .cc-benefits-section .cc-benefits-hero__cta:hover,
    .cc-benefits-section a.cc-benefits-hero__cta:hover {
        transform: none !important;
    }

    .cc-benefits-section .cc-carousel-arrow:hover,
    .cc-benefits-section button.cc-carousel-arrow:hover {
        transform: translateY(-50%) !important;
    }

    /* Active state feedback instead of hover */
    .elementor-button:active,
    .clinicare-btn-yappy:active,
    .clinicare-btn-transferencia:active,
    .clinicare-btn-ach:active,
    .clinicare-btn-large:active,
    .clinicare-metodo-tab:active {
        transform: scale(0.97) !important;
        opacity: 0.9 !important;
    }

    /* Scrollable areas show inertia hint */
    .cc-benefits-carousel {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }
}

/* ==========================================================================
   10. HIGH DPI / RETINA ADJUSTMENTS
   ========================================================================== */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {

    /* Thinner borders on retina */
    .clinicare-cotizador-step,
    .clinicare-plan-option-content,
    .clinicare-tipo-option-content,
    .clinicare-periodo-option-content {
        border-width: 1px !important;
    }

    .clinicare-plan-option input:checked + .clinicare-plan-option-content,
    .clinicare-tipo-option input:checked + .clinicare-tipo-option-content {
        border-width: 2px !important;
    }
}