/**
 * ConlineWeb — Cards móvil (≤968px): icono al lado del título
 * Carga al final del footer (después de cw-type-mobile.css).
 */

@media (max-width: 968px) {
    /* ——— Filas título + icono ——— */
    :is(
        .card-svc__title-row,
        .cw-home-deliver__title-row,
        .feature-title-row,
        .feature,
        .contact-info-card__head,
        .cw-pkg-note,
        .sw-signals-list li,
        .card-header
    ) {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 0.65rem !important;
        text-align: left !important;
    }

    :is(.feature, .cw-pkg-note, .contact-info-card__head) {
        align-items: flex-start !important;
    }

    .card-header .card-icon,
    :is(.terms-card, .policy-card) .card-header .card-icon {
        flex-shrink: 0;
        margin: 0 !important;
    }

    /* Servicios home (rail): icono centrado junto al bloque título */
    :is(.card-svc__title-row, body.page-home .cards-container--rail .card-svc__title-row) {
        display: grid !important;
        grid-template-columns: auto 1fr !important;
        grid-template-areas: "icon heading" !important;
        align-items: center !important;
        gap: 0.55rem !important;
        width: 100%;
        min-width: 0;
    }

    :is(.card-svc__title-row, body.page-home .cards-container--rail .card-svc__title-row) :is(.card-icon, .improved-icon) {
        grid-area: icon !important;
        align-self: center !important;
        margin: 0 !important;
        flex-shrink: 0;
    }

    :is(.card-svc__heading, body.page-home .cards-container--rail .card-svc__heading) {
        grid-area: heading !important;
        min-width: 0;
        width: auto !important;
    }

    /* Beneficios home: icono al lado del h3 (no debajo) */
    body.page-home .home-benefits__card {
        display: grid !important;
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "icon title"
            "text text";
        column-gap: 0.65rem;
        row-gap: 0.4rem;
        align-items: center;
    }

    body.page-home .home-benefits__card-head {
        display: contents;
    }

    body.page-home .home-benefits__index {
        display: none;
    }

    body.page-home .home-benefits__icon {
        grid-area: icon;
        align-self: center;
    }

    body.page-home .home-benefits__card-title {
        grid-area: title;
        margin: 0 !important;
        align-self: center;
    }

    body.page-home .home-benefits__card-text {
        grid-area: text;
    }

    /* Paquetes / uso frecuente: <i> + h3 en fila */
    .sw-use-card {
        display: grid !important;
        grid-template-columns: auto 1fr;
        column-gap: 0.65rem;
        row-gap: 0.35rem;
        align-items: start;
    }

    .sw-use-card > i {
        grid-column: 1;
        grid-row: 1;
        align-self: center;
        margin: 0 !important;
        flex-shrink: 0;
    }

    .sw-use-card > h3 {
        grid-column: 2;
        grid-row: 1;
        align-self: center;
        margin: 0 0 0.15rem !important;
    }

    .sw-use-card > :is(p, a, .web-card-btn, .shop-card-btn) {
        grid-column: 1 / -1;
    }

    /* Cards clásicas con icono (todas las variantes de contenedor) */
    :is(
        .cards-container,
        .cards-grid-balanced,
        .cw-pkg-cards
    ) > .card:has(.card-icon-container),
    :is(.cards-container, .cards-grid-balanced) > .card:has(> .card-icon) {
        display: grid !important;
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "icon title"
            "body body"
            "cta cta";
        column-gap: 0.65rem;
        row-gap: 0.45rem;
        align-items: start;
    }

    :is(.cards-container, .cards-grid-balanced) .card-icon-container,
    :is(.cards-container, .cards-grid-balanced) > .card > .card-icon {
        grid-area: icon !important;
        align-self: center !important;
        margin: 0 !important;
        flex-shrink: 0;
    }

    :is(.cards-container, .cards-grid-balanced) > .card:has(.card-icon-container) .card-content,
    :is(.cards-container, .cards-grid-balanced) > .card:has(> .card-icon) .card-content {
        display: contents;
    }

    :is(.cards-container, .cards-grid-balanced) .card-content :is(h2, h3) {
        grid-area: title;
        margin: 0 !important;
        align-self: center;
        min-width: 0;
    }

    :is(.cards-container, .cards-grid-balanced) .card-content :is(p, ul, ol, blockquote) {
        grid-area: body;
    }

    :is(.cards-container, .cards-grid-balanced) .card-content :is(.card-button, .modern-button, a.card-button) {
        grid-area: cta;
        justify-self: start;
    }

    :is(.cards-container, .cards-grid-balanced) > .card:has(> .card-icon) > :is(h2, h3) {
        grid-area: title;
        margin: 0 !important;
        align-self: center;
    }

    :is(.cards-container, .cards-grid-balanced) > .card:has(> .card-icon) > :is(p, ul, ol) {
        grid-area: body;
    }

    /* Anula márgenes que apilan icono en index.css / páginas */
    .card-icon-container,
    .cards-container .card-icon-container,
    .cards-container:not(.cards-container--rail) .card-icon-container {
        margin-bottom: 0 !important;
    }

    /* Iguala especificidad de index.css para garantizar margin:0 y tamaño de h3 */
    .cards-container:not(.cards-container--rail):not(.cards-grid-balanced) .card-icon-container {
        margin: 0 !important;
    }

    .cards-container:not(.cards-container--rail):not(.cards-grid-balanced) .card-icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 1.1rem !important;
        border-radius: 12px !important;
        margin: 0 !important;
    }

    .cards-container:not(.cards-container--rail):not(.cards-grid-balanced) .card h3 {
        font-size: var(--cw-title-card) !important;
        line-height: 1.32 !important;
        margin-bottom: 0.25rem !important;
    }

    /* ——— Módulo IA: layout móvil legible (estado + home) ——— */
    .ia-module {
        margin: clamp(1.5rem, 5vw, 2.25rem) clamp(0.85rem, 4vw, 1.25rem) !important;
        padding: clamp(1.5rem, 5vw, 2.25rem) clamp(1rem, 4vw, 1.35rem) !important;
        border-radius: 22px !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .ia-header {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 0.85rem !important;
        margin-bottom: 1.15rem !important;
    }

    .ia-icon {
        width: 52px !important;
        height: 52px !important;
        font-size: 1.45rem !important;
        margin: 0 auto !important;
        border-radius: 14px !important;
    }

    .ia-text {
        width: 100% !important;
    }

    .ia-title {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        font-size: var(--cw-title-section) !important;
        line-height: 1.28 !important;
    }

    .ia-subtitle {
        text-align: center !important;
        font-size: clamp(0.78rem, 3vw, 0.92rem) !important;
        letter-spacing: 0.6px !important;
        margin: 0.35rem auto 0 !important;
    }

    .ia-content {
        text-align: center !important;
        padding-left: 0 !important;
        margin: 1.15rem auto 1.5rem !important;
        max-width: 42ch !important;
        font-size: clamp(0.92rem, 3.4vw, 1.05rem) !important;
        line-height: 1.6 !important;
    }

    .ia-highlights {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
        margin-top: 0.5rem !important;
    }

    .ia-highlight {
        display: grid !important;
        grid-template-columns: auto 1fr !important;
        column-gap: 0.75rem !important;
        row-gap: 0.2rem !important;
        align-items: start !important;
        text-align: left !important;
        padding: 1rem 1.05rem !important;
        border-radius: 16px !important;
        background: rgba(255, 255, 255, 0.04) !important;
        border: 1px solid rgba(0, 243, 255, 0.16) !important;
    }

    .ia-highlight-icon,
    .ia-highlight > i:first-child {
        grid-column: 1 !important;
        grid-row: 1 !important;
        align-self: center !important;
        margin: 0 !important;
        flex-shrink: 0;
        width: 40px !important;
        height: 40px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 12px !important;
        background: rgba(0, 243, 255, 0.12) !important;
        border: 1px solid rgba(0, 243, 255, 0.22) !important;
        font-size: 1.1rem !important;
        color: var(--neon-blue) !important;
    }

    .ia-highlight h4 {
        grid-column: 2 !important;
        grid-row: 1 !important;
        align-self: center !important;
        margin: 0 !important;
        font-size: var(--cw-title-card) !important;
        line-height: 1.3 !important;
        text-align: left !important;
    }

    .ia-highlight p {
        grid-column: 1 / -1 !important;
        margin: 0.35rem 0 0 !important;
        font-size: clamp(0.86rem, 3.2vw, 0.95rem) !important;
        line-height: 1.5 !important;
        text-align: left !important;
        color: rgba(255, 255, 255, 0.72) !important;
    }

    .ia-module .home-inline-ctas {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.65rem !important;
        margin-top: 1.35rem !important;
        width: 100% !important;
    }

    .ia-module .home-inline-ctas .hero-pillar-btn {
        width: 100% !important;
        justify-content: center !important;
        min-height: 46px !important;
    }

    /* ——— Integraciones / Automatización inteligente ——— */
    .integrations-section {
        margin: clamp(1.5rem, 5vw, 2.25rem) clamp(0.85rem, 4vw, 1.25rem) !important;
        padding: clamp(1.5rem, 5vw, 2.25rem) clamp(1rem, 4vw, 1.35rem) !important;
        border-radius: 22px !important;
        box-sizing: border-box !important;
    }

    .integrations-header {
        text-align: center !important;
        margin-bottom: 1.25rem !important;
    }

    .integrations-badge {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.4rem !important;
        margin: 0 auto 0.85rem !important;
    }

    .integrations-title {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        font-size: var(--cw-title-section) !important;
        line-height: 1.28 !important;
    }

    .integrations-subtitle {
        text-align: center !important;
        margin: 0.55rem auto 0 !important;
        max-width: 42ch !important;
        font-size: clamp(0.9rem, 3.3vw, 1.05rem) !important;
        line-height: 1.55 !important;
    }

    .integrations-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }

    .integration-card {
        min-width: 0 !important;
        width: 100% !important;
    }

    .integration-card .card-inner {
        display: grid !important;
        grid-template-columns: auto 1fr !important;
        grid-template-areas:
            "icon title"
            "text text"
            "stats stats";
        column-gap: 0.75rem !important;
        row-gap: 0.3rem !important;
        align-items: start !important;
        padding: 1.05rem 1.1rem !important;
        text-align: left !important;
    }

    .integration-card .card-icon-glow {
        grid-area: icon !important;
        margin: 0 !important;
        align-self: center !important;
        width: 42px !important;
        height: 42px !important;
        font-size: 1.15rem !important;
        flex-shrink: 0;
    }

    .integration-card .card-inner h3 {
        grid-area: title !important;
        align-self: center !important;
        margin: 0 !important;
        font-size: var(--cw-title-card) !important;
        line-height: 1.3 !important;
        text-align: left !important;
    }

    .integration-card .card-inner p {
        grid-area: text !important;
        margin: 0.15rem 0 0 !important;
        font-size: clamp(0.86rem, 3.2vw, 0.95rem) !important;
        line-height: 1.5 !important;
        text-align: left !important;
    }

    .integration-card .card-stats {
        grid-area: stats !important;
        margin-top: 0.35rem !important;
    }

    .integration-card .card-stats span {
        font-size: clamp(0.72rem, 2.8vw, 0.82rem) !important;
    }

    body.page-home .home-why__item {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "top title"
            "text text";
        column-gap: 0.55rem;
        row-gap: 0.35rem;
        align-items: center;
    }

    body.page-home .home-why__item-top {
        grid-area: top;
    }

    body.page-home .home-why__item-title {
        grid-area: title;
        margin: 0;
    }

    body.page-home .home-why__item-text {
        grid-area: text;
    }

    /* ——— Pasos del proceso (número badge al lado del h3) ——— */
    .sw-process-step {
        display: grid !important;
        grid-template-columns: auto 1fr;
        column-gap: 0.65rem;
        row-gap: 0.3rem;
        align-items: start;
    }

    .sw-process-step .sw-process-num {
        grid-column: 1;
        grid-row: 1;
        align-self: center !important;
        margin-bottom: 0 !important;
        flex-shrink: 0;
    }

    .sw-process-step > h3 {
        grid-column: 2;
        grid-row: 1;
        align-self: center !important;
        margin: 0 0 0.1rem !important;
    }

    .sw-process-step > p,
    .sw-process-step > .proceso-step-time {
        grid-column: 1 / -1;
    }

    /* ——— Service cards (agencia-mx: icon-container + service-content) ——— */
    .service-card:has(.service-icon-container) {
        display: grid !important;
        grid-template-columns: auto 1fr;
        column-gap: 0.75rem;
        align-items: start;
    }

    .service-card > .service-icon-container {
        grid-column: 1 !important;
        grid-row: 1 !important;
        margin-bottom: 0 !important;
        align-self: center !important;
    }

    .service-card > .service-icon-container .service-icon,
    .service-card > .service-icon-container i.service-icon {
        width: 48px !important;
        height: 48px !important;
        font-size: 1.4rem !important;
        border-radius: 12px !important;
    }

    /* agencia-de-desarrollo-web-mx: service-content al lado del icono */
    .service-card > .service-content {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    /* flyer: h3 + p + div como hermanos directos del icono */
    .service-card:has(.service-icon-container) > .service-title,
    .service-card:has(.service-icon-container) > h3 {
        grid-column: 2 !important;
        grid-row: 1 !important;
        margin: 0 !important;
        align-self: center !important;
    }

    .service-card:has(.service-icon-container) > p,
    .service-card:has(.service-icon-container) > .service-description,
    .service-card:has(.service-icon-container) > .service-feature {
        grid-column: 1 / -1 !important;
    }

    /* ——— Guarantee cards (agencia-de-desarrollo-web-mx): icono grande al lado del título ——— */
    .guarantee-card {
        display: grid !important;
        grid-template-columns: auto 1fr;
        column-gap: 0.65rem;
        row-gap: 0.3rem;
        align-items: start;
        text-align: left !important;
    }

    .guarantee-card .guarantee-icon {
        grid-column: 1 !important;
        grid-row: 1 !important;
        align-self: center !important;
        margin-bottom: 0 !important;
        font-size: 1.75rem !important;
    }

    .guarantee-card .guarantee-title {
        grid-column: 2 !important;
        grid-row: 1 !important;
        align-self: center !important;
        margin: 0 !important;
    }

    .guarantee-card > p,
    .guarantee-card > .guarantee-description {
        grid-column: 1 / -1 !important;
    }

    /* ——— Mx-hub service cards: icono al lado del título ——— */
    .mx-hub-service {
        display: grid !important;
        grid-template-columns: auto 1fr;
        column-gap: 0.6rem;
        row-gap: 0.25rem;
        align-items: start;
        min-height: unset !important;
    }

    .mx-hub-service .mx-hub-service-icon {
        grid-column: 1 !important;
        grid-row: 1 !important;
        align-self: center !important;
    }

    .mx-hub-service h3 {
        grid-column: 2 !important;
        grid-row: 1 !important;
        align-self: center !important;
        margin: 0 !important;
    }

    .mx-hub-service > p,
    .mx-hub-service > .mx-hub-service-cta {
        grid-column: 1 / -1 !important;
    }

    /* ——— Mx-hub portal cards: icono al lado del cuerpo ——— */
    .mx-hub-portal {
        flex-direction: row !important;
        align-items: center !important;
        gap: 0.75rem !important;
        min-height: unset !important;
        padding: 1.15rem !important;
    }

    .mx-hub-portal-icon {
        flex-shrink: 0;
        width: 44px !important;
        height: 44px !important;
        font-size: 1.1rem !important;
    }

    .mx-hub-portal-body {
        flex: 1;
        min-width: 0;
    }

    .mx-hub-portal-body h3 {
        font-size: 1rem !important;
        margin-bottom: 0.3rem !important;
    }

    .mx-hub-portal-arrow {
        flex-shrink: 0;
        margin-left: auto;
    }

    /* ——— Mx-svc-links cards: icono al lado del body ——— */
    .mx-svc-links-card {
        flex-direction: row !important;
        align-items: center !important;
        gap: 0.65rem !important;
        min-height: unset !important;
    }

    /* Override de alta especificidad: page-home fuerza column con body.mx-mexico.page-home */
    body.mx-mexico.page-home .mx-svc-links-card,
    body.mx-mexico .mx-svc-links-card {
        flex-direction: row !important;
        align-items: center !important;
        min-height: unset !important;
        gap: 0.65rem !important;
    }

    body.mx-mexico.page-home .mx-svc-links-body,
    body.mx-mexico .mx-svc-links-body {
        width: auto !important;
        flex: 1;
        min-width: 0;
    }

    body.mx-mexico.page-home .mx-svc-links-arrow,
    body.mx-mexico .mx-svc-links-arrow {
        margin-top: 0 !important;
        align-self: center !important;
    }

    .mx-svc-links-icon {
        flex-shrink: 0;
        width: 40px !important;
        height: 40px !important;
        font-size: 1rem !important;
    }

    .mx-svc-links-body {
        flex: 1;
        min-width: 0;
    }

    .mx-svc-links-body strong {
        line-height: 1.3;
    }

    .mx-svc-links-body span {
        font-size: 0.78rem !important;
        -webkit-line-clamp: 2 !important;
    }

    .mx-svc-links-arrow {
        flex-shrink: 0;
        margin-left: auto;
    }

    /* ——— mx-svc-geo-benefit: icono al lado del h3 ——— */
    .mx-svc-geo-benefit {
        display: grid !important;
        grid-template-columns: auto 1fr;
        column-gap: 0.65rem;
        row-gap: 0.25rem;
        align-items: start;
    }

    .mx-svc-geo-benefit i {
        grid-column: 1;
        grid-row: 1;
        align-self: center !important;
        margin-bottom: 0 !important;
        font-size: 1.2rem !important;
        flex-shrink: 0;
    }

    .mx-svc-geo-benefit h3 {
        grid-column: 2;
        grid-row: 1;
        align-self: center !important;
        margin: 0 0 0.1rem !important;
        font-size: var(--cw-title-card) !important;
    }

    .mx-svc-geo-benefit p {
        grid-column: 1 / -1;
    }

    /* ——— mx-svc-geo-pillar: mantener icono al lado del contenido en móvil ——— */
    .mx-svc-geo-pillar {
        flex-direction: row !important;
        align-items: flex-start !important;
    }

    .mx-svc-geo-pillar-icon {
        flex-shrink: 0;
        width: 44px !important;
        height: 44px !important;
        font-size: 1.15rem !important;
    }

    /* ——— Botones táctiles ≥44px (override index.css / home-ui) ——— */
    .card-button,
    .modern-button,
    .cards-container .card-button,
    .cards-container .modern-button,
    .cards-container:not(.cards-container--rail):not(.cards-grid-balanced) .card-button,
    .cards-container:not(.cards-container--rail):not(.cards-grid-balanced) .modern-button,
    .cards-container--rail .card-button,
    .hero-pillar-btn {
        min-height: var(--cw-btn-h-sm, 44px) !important;
        font-size: clamp(0.75rem, 2.6vw, 0.85rem) !important;
        padding-block: 0.55rem !important;
    }
}