/* moovi-contratacion · catalog.css — réplica pixel-perfect de moovi.com
 *
 * Valores extraídos por inspección directa de la página /ofertas-fibra-y-movil/:
 *   Card root      : bg #F8F9FA, border-radius 27px, font Poppins, ls -0.5px
 *   Pill           : bg #D9D3FF, color #001EE4, 16px/500, padding 9px, br 20px
 *   Title H1       : 29px/600, color #001EE4, ls -1px, lh 34.8px
 *   Subtitle       : 13px/300, color #001EE4
 *   Líneas adic    : 13px, color #001EE4
 *   Bloque azul    : ::before linear-gradient(292deg, #001EE4 1%, #001EE4 79%)
 *                    border-radius 30px, padding 12px 0 0
 *   Precio         : 40px/700, color #F3F3F3, ls -1px, lh 48px
 *   Precio nota    : 13px, color #F3F3F3
 *   CTA "Lo quiero": bg #F3F3F3, color #001EE4, 15px/500, padding 9px, br 20px
 *   Saber más      : 13px/500, color #F3F3F3, transparente, br 20px
 *
 * Aislamiento fuerte con `all: unset` y selectores `.mc-catalog ...` para
 * sobrevivir al CSS del tema y de los plugins de Elementor.
 */

.mc-catalog,
.mc-catalog * {
    box-sizing: border-box;
}

.mc-catalog {
    --moovi-blue: #001EE4;
    --moovi-indigo: #1D1550;          /* color secundario del título (números/cantidades) */
    --moovi-blue-2: #3D5BFF;
    --moovi-yellow: #FFCC00;
    --moovi-mint: #6FE3BD;             /* hover del CTA (verde aqua) */
    --moovi-text: #0A1130;
    --moovi-muted: #5b6168;
    --moovi-card-bg: #F8F9FA;
    --moovi-pill-bg: #D9D3FF;
    --moovi-white: #F3F3F3;
    --moovi-card-radius: 27px;
    --moovi-block-radius: 30px;

    font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--moovi-blue);
    margin: 0 auto;
    max-width: 1240px;
    padding: 32px 16px;
    line-height: 1.4;
    letter-spacing: -0.3px;
}

/* ---------- Hero opcional ---------- */
.mc-catalog__hero {
    text-align: center;
    margin: 0 0 32px 0;
    padding: 0 8px;
    color: var(--moovi-text);
}
.mc-catalog__title {
    font-size: 38px;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: var(--moovi-text);
    letter-spacing: -1px;
    line-height: 1.1;
}
.mc-catalog__subtitle {
    font-size: 17px;
    font-weight: 300;
    color: var(--moovi-muted);
    margin: 0 auto;
    max-width: 600px;
    line-height: 1.5;
    letter-spacing: -0.3px;
}
@media (max-width: 600px) {
    .mc-catalog__title { font-size: 26px; }
    .mc-catalog__subtitle { font-size: 14px; }
}

/* ---------- Toggle IVA / IGIC ----------
 * Pill segmentado azul/blanco. Centrado, encima de tabs.
 * El usuario elige entre Península+Baleares (IVA 21%) y Canarias (IGIC 7%).
 */
.mc-catalog .mc-tax-toggle {
    display: flex;
    flex-wrap: nowrap;
    margin: 0 auto 24px;
    padding: 4px;
    background: #fff;
    border: 1.5px solid #e6e8eb;
    border-radius: 9999px;
    width: max-content;
    max-width: 100%;
    gap: 2px;
}
.mc-catalog .mc-tax-toggle__btn {
    all: unset;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: 9999px;
    background: transparent;
    color: var(--moovi-text);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.2px;
    transition: background .15s ease, color .15s ease;
    text-align: center;
    white-space: nowrap;
}
.mc-catalog .mc-tax-toggle__btn:hover {
    color: var(--moovi-blue);
}
.mc-catalog .mc-tax-toggle__btn.is-active {
    background: var(--moovi-blue);
    color: #fff;
}
.mc-catalog .mc-tax-toggle__pct {
    font-weight: 400;
    font-size: 12px;
    opacity: .85;
    margin-left: 2px;
}
@media (max-width: 600px) {
    .mc-catalog .mc-tax-toggle { padding: 3px; }
    .mc-catalog .mc-tax-toggle__btn { padding: 7px 12px; font-size: 12px; }
    .mc-catalog .mc-tax-toggle__pct { display: none; }
}

/* ---------- Tabs ---------- */
.mc-catalog .mc-tabs {
    all: unset;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin: 24px 0 32px;
}
.mc-catalog .mc-tab {
    all: unset;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 22px;
    border: 1.5px solid #e6e8eb;
    border-radius: 9999px;
    background: #fff;
    color: var(--moovi-text);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.2px;
    transition: all .15s ease;
    user-select: none;
}
.mc-catalog .mc-tab:hover {
    border-color: var(--moovi-blue);
    color: var(--moovi-blue);
}
.mc-catalog .mc-tab.is-active {
    background: var(--moovi-blue);
    color: #fff;
    border-color: var(--moovi-blue);
}
.mc-catalog .mc-tab__count {
    display: inline-block;
    background: rgba(0, 0, 0, .08);
    color: inherit;
    border-radius: 9999px;
    padding: 1px 8px;
    margin-left: 4px;
    font-size: 11px;
    font-weight: 700;
    min-width: 18px;
    text-align: center;
}
.mc-catalog .mc-tab.is-active .mc-tab__count {
    background: rgba(255, 255, 255, .25);
}

/* ---------- Cards container ---------- */
.mc-catalog .mc-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (max-width: 768px) {
    .mc-catalog .mc-cards {
        grid-template-columns: none;
        display: flex;
        gap: 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 16px;
        padding: 4px 16px 20px;
        margin: 0 -16px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .mc-catalog .mc-cards::-webkit-scrollbar { display: none; }
    .mc-catalog .mc-card {
        flex: 0 0 320px;
        scroll-snap-align: start;
    }
}

/* ============== Card (con flip 3D) ============== */
.mc-catalog .mc-card {
    all: unset;
    box-sizing: border-box;
    display: block;
    border-radius: var(--moovi-card-radius);
    padding: 0;
    position: relative;
    transition: transform .25s cubic-bezier(.2,.85,.4,1), box-shadow .25s ease;
    animation: mc-card-in .35s cubic-bezier(.2,.85,.4,1) backwards;
    transform-style: preserve-3d;
    perspective: 1400px;
    /* Altura uniforme entre cards de combo/fibra/móvil/tv */
    min-height: 420px;
    height: 100%;
}
.mc-catalog .mc-card__face {
    background: var(--moovi-card-bg);
    border-radius: var(--moovi-card-radius);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition: transform .55s cubic-bezier(.2,.85,.4,1);
    overflow: hidden;
}
.mc-catalog .mc-card__face--front {
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
    height: 100%;
}
.mc-catalog .mc-card__face--back {
    position: absolute;
    inset: 0;
    transform: rotateY(180deg);
    background: linear-gradient(135deg, var(--moovi-blue) 0%, var(--moovi-indigo) 100%);
    color: var(--moovi-white);
    padding: 28px 26px 24px;
    display: flex;
    flex-direction: column;
    z-index: 0;
}
.mc-catalog .mc-card.is-flipped .mc-card__face--front { transform: rotateY(-180deg); }
.mc-catalog .mc-card.is-flipped .mc-card__face--back  { transform: rotateY(0deg); z-index: 2; }

/* Reverso */
.mc-catalog .mc-card__back-close {
    all: unset;
    cursor: pointer;
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease, transform .12s ease;
    z-index: 3;
}
.mc-catalog .mc-card__back-close:hover {
    background: rgba(255, 255, 255, .28);
    transform: scale(1.05);
}
.mc-catalog .mc-card__back-title {
    all: unset;
    display: block;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin: 4px 0 16px;
    letter-spacing: -0.5px;
    text-align: center;
}
.mc-catalog .mc-card__back-list {
    all: unset;
    display: flex;
    flex-direction: column;
    gap: 9px;
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1 1 auto;
}
.mc-catalog .mc-card__back-list li {
    all: unset;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: -0.2px;
}
.mc-catalog .mc-card__back-list li svg {
    flex-shrink: 0;
    color: #fff;
    opacity: .9;
}
.mc-catalog .mc-card__back-legal {
    margin: 16px 0 0;
    font-size: 12px;
    color: rgba(255, 255, 255, .8);
    text-align: center;
    line-height: 1.4;
}
.mc-catalog .mc-card__back-legal a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.mc-catalog .mc-card__back-legal a:hover { opacity: .85; }
.mc-catalog .mc-card:nth-child(1) { animation-delay: 0ms; }
.mc-catalog .mc-card:nth-child(2) { animation-delay: 60ms; }
.mc-catalog .mc-card:nth-child(3) { animation-delay: 120ms; }
.mc-catalog .mc-card:nth-child(4) { animation-delay: 180ms; }
.mc-catalog .mc-card:nth-child(5) { animation-delay: 240ms; }
.mc-catalog .mc-card:nth-child(n+6) { animation-delay: 300ms; }
@keyframes mc-card-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
.mc-catalog .mc-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(0, 30, 228, .12);
}
.mc-catalog .mc-card.is-destacada {
    box-shadow: 0 6px 24px rgba(0, 30, 228, .16);
}
.mc-catalog .mc-card.is-destacada::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--moovi-card-radius);
    border: 2px solid var(--moovi-blue);
    pointer-events: none;
    z-index: 2;
}

.mc-catalog .mc-card__highlight {
    position: absolute;
    top: -10px;
    right: 18px;
    background: var(--moovi-yellow);
    color: var(--moovi-text);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .8px;
    padding: 5px 11px;
    border-radius: 9999px;
    z-index: 5;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}

/* ---------- TOP section ----------
 * Espaciado consistente entre badge → título → subtítulo → iconos → texto.
 * `flex: 1 1 auto` empuja el bottom hacia abajo y normaliza altura total.
 * Los iconos ocupan el espacio sobrante y se centran vertical y horizontalmente.
 */
.mc-catalog .mc-card__top {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 14px 14px 12px;     /* lateral más estrecho */
    color: var(--moovi-blue);
    flex: 1 1 auto;
    gap: 4px;
    min-height: 220px;
    justify-content: flex-start;
}

/* Pill etiqueta promo (lavanda + azul) */
.mc-catalog .mc-card__badge {
    all: unset;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--moovi-pill-bg);
    color: var(--moovi-blue);
    font-size: 14px;
    font-weight: 500;
    line-height: 14px;
    letter-spacing: -0.5px;
    padding: 7px 14px;
    border-radius: 20px;
    margin: 0 auto 2px;
}
.mc-catalog .mc-card__badge svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Título: 2 líneas. Cada línea tiene 2 spans con colores distintos:
 *   <span color1>Fibra</span> <span color2>1GB</span>
 *   <span color1>+Móvil</span> <span color2>GBs ilimitados</span>
 * TODO el título es weight 600 — el contraste viene del color, no del peso.
 */
.mc-catalog .mc-card__title {
    all: unset;
    display: flex;
    flex-direction: column;
    gap: 0;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -1px;
    margin: 0;
    text-align: center;
}
.mc-catalog .mc-card__title-line {
    display: block;
}
.mc-catalog .mc-card__title-key {
    color: var(--moovi-blue);
}
.mc-catalog .mc-card__title-value {
    color: var(--moovi-indigo);
    margin-left: 6px;
}

/* Subtítulo "Llamadas ilimitadas" — 14px, ajustado al lado del título */
.mc-catalog .mc-card__subtitle {
    all: unset;
    display: block;
    font-size: 14px;
    font-weight: 300;
    color: var(--moovi-blue);
    line-height: 1.3;
    letter-spacing: -0.3px;
    margin: 0;
}

/* Iconos + descripción de líneas adicionales —
 * absorbe el sobrante del top y centra el contenido verticalmente
 * para que los iconos queden ópticamente al medio entre título y bottom.
 */
.mc-catalog .mc-card__features {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0;
    width: 100%;
    text-align: center;
    flex: 1 1 auto;
    min-height: 60px;
}
.mc-catalog .mc-card__icons {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--moovi-text);
    flex-shrink: 0;
    min-height: 48px;
}
.mc-catalog .mc-card__icons svg {
    display: block;
    color: var(--moovi-text);
    fill: none;
    stroke: currentColor;
}
/* Iconos personalizados subidos desde el backend (PNG/SVG/etc.) */
.mc-catalog .mc-card__icon-img {
    display: block;
    object-fit: contain;
    flex-shrink: 0;
}
.mc-catalog .mc-card__icon-img--router { width: 76px; height: 64px; }
.mc-catalog .mc-card__icon-img--phone  { width: 36px; height: 60px; }
.mc-catalog .mc-card__icon-img--tv     { width: 64px; height: 52px; }
.mc-catalog--icon-small  .mc-card__icon-img--router { width: 58px; height: 49px; }
.mc-catalog--icon-small  .mc-card__icon-img--phone  { width: 28px; height: 46px; }
.mc-catalog--icon-small  .mc-card__icon-img--tv     { width: 50px; height: 41px; }
.mc-catalog--icon-large  .mc-card__icon-img--router { width: 96px; height: 81px; }
.mc-catalog--icon-large  .mc-card__icon-img--phone  { width: 46px; height: 76px; }
.mc-catalog--icon-large  .mc-card__icon-img--tv     { width: 82px; height: 66px; }
/* Imagen custom dentro de la pill etiqueta promo */
.mc-catalog .mc-card__badge-img {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    object-fit: contain;
}
.mc-catalog .mc-card__icons-plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    font-size: 30px;
    font-weight: 700;
    color: var(--moovi-text);
    line-height: 1;
    margin: 0 2px;
}
.mc-catalog .mc-card__lineadicional {
    font-size: 13px;
    color: var(--moovi-blue);
    line-height: 1.35;
    font-weight: 500;
    letter-spacing: -0.4px;
    max-width: 280px;
    margin: 0 auto;
}

/* ---------- BOTTOM section (azul) ---------- */
.mc-catalog .mc-card__bottom {
    position: relative;
    padding: 14px 18px 12px;
    border-radius: var(--moovi-block-radius);
    color: var(--moovi-white);
    background: linear-gradient(292deg, var(--moovi-blue) 1%, var(--moovi-blue) 79%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
    margin: 0;
    flex-shrink: 0;
}

/* Precio enorme */
.mc-catalog .mc-card__price {
    display: flex;
    align-items: baseline;
    line-height: 1.1;
    color: var(--moovi-white);
    font-weight: 700;
    letter-spacing: -1px;
    font-size: 36px;
    margin: 0;
}
.mc-catalog .mc-card__price-suffix {
    font-size: 15px;
    font-weight: 400;
    margin-left: 4px;
    line-height: 1;
    letter-spacing: -0.3px;
}

/* "Precio para siempre, IVA Incluido" */
.mc-catalog .mc-card__price-note {
    font-size: 12px;
    color: var(--moovi-white);
    font-weight: 400;
    line-height: 1.3;
    margin: 0 0 6px;
    letter-spacing: -0.3px;
    opacity: .92;
}

/* Botón Lo quiero (blanco roto, texto azul) */
.mc-catalog .mc-card__cta {
    all: unset;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--moovi-white);
    color: var(--moovi-blue) !important;
    font-weight: 500;
    font-size: 14px;
    line-height: 14px;
    letter-spacing: -0.5px;
    padding: 8px 20px;
    border-radius: 20px;
    transition: transform .12s ease, background .15s ease, color .15s ease;
    text-align: center;
}
.mc-catalog .mc-card__cta:hover {
    background: var(--moovi-mint);
    color: var(--moovi-text) !important;
    transform: scale(1.03);
}
.mc-catalog .mc-card__cta:active { transform: scale(.97); }
.mc-catalog .mc-card__cta-arrow {
    /* SVG arrow-circle-right inline (FontAwesome solid) — todo en un solo path */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--moovi-blue);
    transition: color .15s ease, transform .12s ease;
}
.mc-catalog .mc-card__cta-arrow svg {
    width: 18px;
    height: 18px;
    display: block;
    fill: currentColor;
}
.mc-catalog .mc-card__cta:hover .mc-card__cta-arrow {
    color: var(--moovi-text);
    transform: translateX(2px);
}

/* "Saber más" subrayado */
.mc-catalog .mc-card__more {
    all: unset;
    cursor: pointer;
    color: var(--moovi-white);
    font-size: 12px;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    line-height: 12px;
    letter-spacing: -0.3px;
    padding: 4px 8px;
    border-radius: 20px;
    margin-top: 0;
    transition: opacity .15s ease;
}
.mc-catalog .mc-card__more:hover { opacity: .8; }

/* ---------- Banner superior "+ Línea adicional desde X €/mes" ----------
 * Pill informativa en la cabecera de la card, encima de la zona gris del top.
 * Color: lavanda muy claro (#F4F5FF), texto azul moovi.
 * Esquinas redondeadas SOLO arriba — para acoplar limpiamente al top section.
 */
.mc-catalog .mc-card__addline-tag {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin: 0;
    padding: 7px 10px;
    background: #F4F5FF;
    color: var(--moovi-blue);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    border-radius: var(--moovi-card-radius) var(--moovi-card-radius) 0 0;
    letter-spacing: -0.2px;
    flex-shrink: 0;
}
.mc-catalog .mc-card__addline-tag svg {
    flex-shrink: 0;
    color: var(--moovi-blue);
    opacity: .85;
}
.mc-catalog .mc-card__addline-tag strong {
    font-weight: 700;
    color: var(--moovi-indigo);
    margin-left: 2px;
    white-space: nowrap;
}

/* ---------- Líneas adicionales: tarjeta horizontal ----------
 * Las líneas adicionales se muestran en una grid aparte, ocupando ancho
 * completo del contenedor, una debajo de otra.
 * Layout horizontal: icono · título+meta · precio · CTA.
 * Sin flip-3D, sin permanencia, sin "Saber más".
 */
.mc-catalog .mc-card.is-linea-adicional {
    grid-column: 1 / -1;             /* tarjetas horizontales: ancho completo */
    min-height: 0;                   /* override del min-height de cards normales */
    height: auto;
    perspective: none;
    transform-style: flat;
}
.mc-catalog .mc-card.is-linea-adicional::before {
    /* etiqueta sobria arriba a la izquierda */
    content: 'Línea adicional';
    position: absolute;
    top: -10px;
    left: 18px;
    background: var(--moovi-pill-bg);
    color: var(--moovi-blue);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .8px;
    padding: 4px 10px;
    border-radius: 9999px;
    z-index: 5;
}
.mc-catalog .mc-card.is-linea-adicional .mc-card__face--front {
    flex-direction: row;
    align-items: stretch;
    height: auto;
    background: #fff;
    border: 1.5px solid #e6e8eb;
    border-radius: var(--moovi-card-radius);
}
.mc-catalog .mc-card.is-linea-adicional .mc-card__top {
    flex: 1 1 auto;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    padding: 18px 24px;
    gap: 18px;
    min-height: 0;
    background: transparent;
}
/* Icono compacto a la izquierda dentro del top */
.mc-catalog .mc-card.is-linea-adicional .mc-card__top::before {
    content: '';
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--moovi-pill-bg) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='52' viewBox='0 0 34 58' fill='none' stroke='%23001EE4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='3' width='26' height='52' rx='3.5'/><line x1='14' y1='9' x2='20' y2='9'/></svg>") center/22px no-repeat;
}
.mc-catalog .mc-card.is-linea-adicional .mc-card__title {
    font-size: 18px;
    font-weight: 600;
    color: var(--moovi-text);
    text-align: left;
    letter-spacing: -0.5px;
    line-height: 1.25;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
}
.mc-catalog .mc-card.is-linea-adicional .mc-card__title-key {
    color: var(--moovi-text);
}
.mc-catalog .mc-card.is-linea-adicional .mc-card__title-value {
    color: var(--moovi-blue);
    margin-left: 0;
}
.mc-catalog .mc-card.is-linea-adicional .mc-card__title-line {
    display: inline;
}
.mc-catalog .mc-card.is-linea-adicional .mc-card__subtitle,
.mc-catalog .mc-card.is-linea-adicional .mc-card__features,
.mc-catalog .mc-card.is-linea-adicional .mc-card__badge,
.mc-catalog .mc-card.is-linea-adicional .mc-card__price-note,
.mc-catalog .mc-card.is-linea-adicional .mc-card__more,
.mc-catalog .mc-card.is-linea-adicional .mc-card__face--back,
.mc-catalog .mc-card.is-linea-adicional .mc-card__highlight { display: none !important; }
.mc-catalog .mc-card.is-linea-adicional .mc-card__bottom {
    padding: 18px 22px;
    background: none;
    color: var(--moovi-text);
    flex-direction: row;
    gap: 16px;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
    border-radius: 0;
    border-left: 1px solid #e6e8eb;
}
.mc-catalog .mc-card.is-linea-adicional .mc-card__price {
    color: var(--moovi-blue);
    font-size: 26px;
    line-height: 1;
    margin: 0;
}
.mc-catalog .mc-card.is-linea-adicional .mc-card__price-suffix {
    color: var(--moovi-muted);
    font-size: 13px;
}
.mc-catalog .mc-card.is-linea-adicional .mc-card__cta {
    background: var(--moovi-blue);
    color: #fff !important;
    padding: 10px 20px;
    font-size: 14px;
    line-height: 14px;
}
.mc-catalog .mc-card.is-linea-adicional .mc-card__cta:hover {
    background: var(--moovi-mint);
    color: var(--moovi-text) !important;
}
.mc-catalog .mc-card.is-linea-adicional .mc-card__cta-arrow {
    color: #fff;
}
.mc-catalog .mc-card.is-linea-adicional .mc-card__cta:hover .mc-card__cta-arrow {
    color: var(--moovi-text);
}
.mc-catalog .mc-card.is-linea-adicional:hover {
    transform: none;
    box-shadow: 0 8px 22px rgba(0, 30, 228, .08);
}
@media (max-width: 768px) {
    .mc-catalog .mc-card.is-linea-adicional {
        flex: 0 0 100%;
        scroll-snap-align: none;
    }
    .mc-catalog .mc-card.is-linea-adicional .mc-card__face--front {
        flex-direction: column;
    }
    .mc-catalog .mc-card.is-linea-adicional .mc-card__bottom {
        border-left: none;
        border-top: 1px solid #e6e8eb;
        padding: 14px 22px;
        justify-content: space-between;
    }
}

/* ---------- Variantes de tamaño de iconos (admin > Apariencia) ---------- */
.mc-catalog--icon-small .mc-card__icon-svg--router { width: 58px; height: 49px; }
.mc-catalog--icon-small .mc-card__icon-svg--phone  { width: 28px; height: 46px; }
.mc-catalog--icon-small .mc-card__icon-svg--tv     { width: 50px; height: 41px; }
.mc-catalog--icon-small .mc-card__icons            { min-height: 50px; }
.mc-catalog--icon-small .mc-card__icons-plus       { font-size: 22px; }

/* medium = default (76×64 / 36×60 / 64×52) */
.mc-catalog--icon-medium .mc-card__icons           { min-height: 60px; }

.mc-catalog--icon-large .mc-card__icon-svg--router { width: 96px; height: 81px; }
.mc-catalog--icon-large .mc-card__icon-svg--phone  { width: 46px; height: 76px; }
.mc-catalog--icon-large .mc-card__icon-svg--tv     { width: 82px; height: 66px; }
.mc-catalog--icon-large .mc-card__icons            { min-height: 78px; }
.mc-catalog--icon-large .mc-card__icons-plus       { font-size: 34px; }

/* ---------- Empty / error ---------- */
.mc-catalog .mc-empty,
.mc-catalog .mc-error {
    text-align: center;
    padding: 32px 16px;
    color: var(--moovi-muted);
    font-size: 14px;
    grid-column: 1 / -1;
}
.mc-catalog .mc-error {
    background: #fee;
    border: 1px solid #fcc;
    border-radius: 12px;
    color: #c00;
}

/* ============================================================================
   v0.7.1 — Layout LISTA horizontal con pill negro estilo moovi.com
   Activado con atributo lista="1" en [moovi_tarifas]
============================================================================ */

.mc-catalog--list .mc-cards {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  overflow: visible !important;
}

.mc-catalog--list .mc-card,
.mc-catalog--list .mc-card.is-destacada,
.mc-catalog--list .mc-card.is-linea-adicional {
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: 720px !important;
  margin: 0 auto !important;
  height: auto !important;
  min-height: 0 !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  perspective: none !important;
  transform: none !important;
}

.mc-catalog--list .mc-card__face {
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  backface-visibility: visible !important;
  height: auto !important;
  display: block !important;
}
.mc-catalog--list .mc-card__face--back { display: none !important; }
.mc-catalog--list .mc-card__face--front {
  display: grid !important;
  grid-template-columns: 88px 1fr 168px !important;
  align-items: stretch !important;
  gap: 0 !important;
  background: var(--mc-soft, #F4F5FF) !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  padding: 0 !important;
  border: 1px solid #DDE1F5 !important;
}

/* Pill superior "+ Línea adicional" — la metemos como sub-texto en el contenido
   en lugar de banner full width arriba, para no romper el row */
.mc-catalog--list .mc-card__addline-tag { display: none !important; }

/* Top: badge promo lo escondemos en lista (espacio reducido) */
.mc-catalog--list .mc-card__badge { display: none !important; }
.mc-catalog--list .mc-card__highlight {
  position: absolute !important;
  top: 6px !important;
  left: 12px !important;
  background: #001EE4 !important;
  color: #fff !important;
  font-size: 10px !important;
  padding: 3px 8px !important;
  border-radius: 999px !important;
  z-index: 2 !important;
}

/* Columna 1: ICONOS (router/phone/tv) */
.mc-catalog--list .mc-card__top {
  grid-column: 1 / 4 !important;
  display: contents !important;
}
.mc-catalog--list .mc-card__icons {
  grid-column: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px 8px !important;
  background: transparent !important;
  color: #0A1130 !important;
  margin: 0 !important;
}
.mc-catalog--list .mc-card__icons svg { max-width: 64px !important; max-height: 56px !important; }
.mc-catalog--list .mc-card__icons-plus { font-size: 18px !important; padding: 0 4px !important; }

/* Columna 2: TÍTULO + sub */
.mc-catalog--list .mc-card__title {
  grid-column: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 0 !important;
  padding: 14px 12px !important;
  margin: 0 !important;
  text-align: left !important;
}
.mc-catalog--list .mc-card__title-line {
  display: block !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: -.02em !important;
}
.mc-catalog--list .mc-card__title-key {
  color: #001EE4 !important;
  font-weight: 800 !important;
}
.mc-catalog--list .mc-card__title-value {
  color: #0A1130 !important;
  font-weight: 800 !important;
  margin-left: 6px !important;
}
.mc-catalog--list .mc-card__subtitle {
  grid-column: 2 !important;
  font-size: 13px !important;
  color: #0A1130 !important;
  font-weight: 600 !important;
  margin: 4px 0 0 !important;
  padding: 0 12px !important;
  text-align: left !important;
}
.mc-catalog--list .mc-card__features {
  grid-column: 2 !important;
  margin: 4px 0 0 !important;
  padding: 0 12px 14px !important;
  background: transparent !important;
  display: block !important;
  text-align: left !important;
}
.mc-catalog--list .mc-card__features .mc-card__icons { display: none !important; }
.mc-catalog--list .mc-card__lineadicional {
  display: block !important;
  font-size: 11.5px !important;
  color: #5b6168 !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
}

/* Columna 3: PILL NEGRO con precio */
.mc-catalog--list .mc-card__bottom {
  grid-column: 3 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  background: #0A1130 !important;
  color: #fff !important;
  padding: 18px 14px !important;
  border-radius: 18px !important;
  margin: 8px 8px 8px 0 !important;
  position: relative !important;
  text-align: center !important;
  min-width: 152px !important;
}
.mc-catalog--list .mc-card__price {
  display: flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 0 !important;
  margin: 0 0 4px !important;
}
.mc-catalog--list .mc-card__price-amount {
  color: #fff !important;
  font-size: 38px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -.02em !important;
  position: relative !important;
}
/* Reemplazar la coma del "9,90" por una apóstrofe + cents pequeños */
.mc-catalog--list .mc-card__price-suffix {
  display: none !important;
}
.mc-catalog--list .mc-card__price::after {
  content: "€/mes\\AIVA inc." !important;
  white-space: pre-line !important;
  font-size: 9px !important;
  color: rgba(255,255,255,.85) !important;
  font-weight: 600 !important;
  text-align: left !important;
  margin-left: 4px !important;
  margin-top: 2px !important;
  align-self: flex-start !important;
  line-height: 1.2 !important;
}
.mc-catalog--list .mc-card__price-note {
  font-size: 10px !important;
  color: rgba(255,255,255,.85) !important;
  font-weight: 500 !important;
  margin: 6px 0 0 !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
}
.mc-catalog--list .mc-card__cta,
.mc-catalog--list .mc-card__more { display: none !important; }

/* Toda la card es clicable hacia el CTA */
.mc-catalog--list .mc-card {
  cursor: pointer !important;
  transition: transform .2s, box-shadow .2s !important;
}
.mc-catalog--list .mc-card:hover {
  transform: translateY(-2px) !important;
}
.mc-catalog--list .mc-card:hover .mc-card__face--front {
  border-color: #001EE4 !important;
  box-shadow: 0 8px 24px rgba(0, 30, 228, .14) !important;
}

/* Mobile: stack icon arriba, texto abajo, pill full-width abajo */
@media (max-width: 600px) {
  .mc-catalog--list .mc-card__face--front {
    grid-template-columns: 64px 1fr !important;
    grid-template-areas:
      "icon    title"
      "bottom  bottom" !important;
  }
  .mc-catalog--list .mc-card__icons { grid-area: icon !important; padding: 14px 4px !important; }
  .mc-catalog--list .mc-card__title { grid-area: title !important; padding: 12px 12px 0 0 !important; }
  .mc-catalog--list .mc-card__subtitle,
  .mc-catalog--list .mc-card__features { grid-column: 2 !important; }
  .mc-catalog--list .mc-card__bottom {
    grid-area: bottom !important;
    margin: 0 !important;
    border-radius: 0 0 18px 18px !important;
    padding: 14px 12px !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
  .mc-catalog--list .mc-card__price-note { margin: 0 !important; }
}