/* ══════════════════════════════════════════════════════════════
   MF Servicios I+D | Frontend CSS
   Paleta inspirada en Microbial Factory: granate + dorado + cream
   ══════════════════════════════════════════════════════════════ */

/* ── Custom properties (scoped) ─────────────────────────────── */
.mfs-wrap,
.mfs-hero {
    --mfs-red:        #7A1A1A;
    --mfs-red-dk:     #5C1414;
    --mfs-red-soft:   #A02020;
    --mfs-gold:       #D4A33B;
    --mfs-gold-dk:    #B0851F;
    --mfs-gold-soft:  #F0D69A;
    --mfs-cream:      #FAF5EE;
    --mfs-cream-2:    #F5E9DC;
    --mfs-stripe-a:   #EFD9C8;
    --mfs-stripe-b:   #E5C2A8;
    --mfs-text:       #2A1414;
    --mfs-text-soft:  #6B5A55;
    --mfs-border:     #EADBC9;
    --mfs-white:      #ffffff;

    --mfs-radius:     14px;
    --mfs-radius-sm:  10px;
    --mfs-radius-lg:  20px;
    --mfs-shadow:     0 6px 24px rgba(122, 26, 26, 0.08);
    --mfs-shadow-lg:  0 18px 50px rgba(122, 26, 26, 0.18);
    --mfs-trans:      .28s cubic-bezier(.4, 0, .2, 1);

    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    box-sizing: border-box;
}

.mfs-wrap {
    color: var(--mfs-text);
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 16px;
}
.mfs-wrap *,
.mfs-wrap *::before,
.mfs-wrap *::after { box-sizing: border-box; }


/* ── Migas de pan (breadcrumb) ──────────────────────────────── */
.mfs-migas {
    display: flex;
    margin: 0 0 22px;
}
.mfs-migas--claro {
    justify-content: center;
    padding: 0 16px;
}
.mfs-migas--oscuro {
    justify-content: flex-start;
}
.mfs-migas__lista {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    max-width: 100%;
    margin: 0 !important;
    padding: 6px 8px 6px 6px !important;
    list-style: none !important;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--mfs-white) 0%, var(--mfs-cream) 100%);
    border: 1px solid var(--mfs-border);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .9) inset,
        0 6px 18px rgba(122, 26, 26, .07);
    transition: border-color var(--mfs-trans);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.mfs-migas__lista::-webkit-scrollbar { display: none; }

.mfs-migas__item {
    display: flex !important;
    align-items: center;
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    font-size: 13.5px;
    line-height: 1;
    white-space: nowrap;
}
.mfs-migas__item::before,
.mfs-migas__item::marker { content: none !important; }

/* Enlaces --------------------------------------------------- */
.mfs-migas__enlace {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: 999px;
    color: var(--mfs-text-soft) !important;
    font-weight: 600;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: color var(--mfs-trans), background-color var(--mfs-trans), transform var(--mfs-trans);
}
.mfs-migas__enlace:hover,
.mfs-migas__enlace:focus-visible {
    color: var(--mfs-red) !important;
    background: rgba(122, 26, 26, .07);
    transform: translateY(-1px);
}
.mfs-migas__enlace:focus-visible {
    outline: 2px solid var(--mfs-gold);
    outline-offset: 2px;
}

/* Icono de casa: se tiñe de granate al pasar el mouse -------- */
.mfs-migas__casa {
    display: inline-flex;
    color: var(--mfs-gold);
    transition: color var(--mfs-trans), transform var(--mfs-trans);
}
.mfs-migas__enlace:hover .mfs-migas__casa {
    color: var(--mfs-red);
    transform: translateY(-1px);
}

/* Separador -------------------------------------------------- */
.mfs-migas__sep {
    display: flex !important;
    align-items: center;
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 0 2px !important;
    list-style: none !important;
    color: var(--mfs-border);
}
.mfs-migas__sep::before,
.mfs-migas__sep::marker { content: none !important; }

/* Pagina actual: pastilla granate ---------------------------- */
.mfs-migas__actual {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--mfs-red) 0%, var(--mfs-red-dk) 100%);
    color: var(--mfs-white);
    font-weight: 700;
    letter-spacing: .01em;
    box-shadow: 0 4px 14px rgba(122, 26, 26, .28);
}
.mfs-migas__punto {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mfs-gold);
    box-shadow: 0 0 0 3px rgba(212, 163, 59, .28);
    flex: 0 0 auto;
}

/* Movil: la pastilla se ajusta y puede deslizarse ------------ */
@media (max-width: 640px) {
    .mfs-migas {
        justify-content: flex-start;
        margin-bottom: 18px;
    }
    .mfs-migas__lista {
        max-width: 100%;
    }
    .mfs-migas__item { font-size: 12.5px; }
    .mfs-migas__enlace { padding: 7px 11px; }
    .mfs-migas__actual { padding: 7px 13px; }
}

@media (prefers-reduced-motion: reduce) {
    .mfs-migas__enlace,
    .mfs-migas__casa { transition: none; }
    .mfs-migas__enlace:hover { transform: none; }
}


/* ══════════════════════════════════════════════════════════════
   Banner de cabecera (hero)
   ══════════════════════════════════════════════════════════════ */
.mfs-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: var(--mfs-hero-alto, 58vh);
    padding: clamp(90px, 11vw, 150px) 0 clamp(84px, 9vw, 130px);
    color: var(--mfs-white);
    background: var(--mfs-red-dk);
    overflow: hidden;
    isolation: isolate;

    /* Ancho completo aunque Elementor limite el contenedor padre. */
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
.mfs-hero *,
.mfs-hero *::before,
.mfs-hero *::after { box-sizing: border-box; }

/* Imagen de fondo con zoom lento --------------------------------- */
.mfs-hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.mfs-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    animation: mfs-hero-zoom 24s ease-in-out infinite alternate;
}
@keyframes mfs-hero-zoom {
    from { transform: scale(1.02); }
    to   { transform: scale(1.12); }
}

/* Velo granate: mantiene el texto legible sobre cualquier foto --- */
.mfs-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: var(--mfs-hero-velo, .78);
    background:
        linear-gradient(100deg, rgba(46, 10, 10, .96) 0%, rgba(92, 20, 20, .80) 44%, rgba(122, 26, 26, .38) 100%),
        linear-gradient(180deg, rgba(42, 20, 20, .40) 0%, rgba(42, 20, 20, 0) 34%);
}

/* Trama sutil de puntos, da textura sin ensuciar ----------------- */
.mfs-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: .16;
    background-image: radial-gradient(rgba(255, 255, 255, .55) 1px, transparent 1px);
    background-size: 22px 22px;
    mask-image: linear-gradient(100deg, #000 0%, transparent 62%);
    -webkit-mask-image: linear-gradient(100deg, #000 0%, transparent 62%);
    pointer-events: none;
}

.mfs-hero__inner {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Eyebrow con greca ---------------------------------------------- */
.mfs-hero__eyebrow {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;
    color: var(--mfs-gold-soft) !important;
    margin: 0 0 16px !important;
    font-family: inherit !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .4);
}
.mfs-hero__greca {
    width: 26px;
    height: 8px;
    flex: 0 0 auto;
    background:
        linear-gradient(90deg, var(--mfs-gold) 0 6px, transparent 6px 10px,
                        var(--mfs-gold) 10px 16px, transparent 16px 20px,
                        var(--mfs-gold) 20px 26px);
    opacity: .95;
}

.mfs-hero__titulo {
    font-size: clamp(40px, 6vw, 72px) !important;
    font-weight: 900 !important;
    line-height: 1.04 !important;
    letter-spacing: -.02em !important;
    color: var(--mfs-white) !important;
    margin: 0 0 18px !important;
    font-family: inherit !important;
    text-shadow: 0 14px 44px rgba(0, 0, 0, .38);
}

.mfs-hero__texto {
    font-size: clamp(15.5px, 1.3vw, 18px) !important;
    line-height: 1.7 !important;
    color: rgba(255, 255, 255, .92) !important;
    max-width: 54ch;
    margin: 0 !important;
    font-family: inherit !important;
    text-shadow: 0 2px 16px rgba(0, 0, 0, .35);
}

/* Boton claro sobre el granate ----------------------------------- */
.mfs-hero__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 30px;
    padding: 15px 30px;
    border-radius: 999px;
    background: var(--mfs-white);
    color: var(--mfs-red) !important;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .28);
    transition: transform var(--mfs-trans), box-shadow var(--mfs-trans), background-color var(--mfs-trans);
}
.mfs-hero__btn svg { transition: transform var(--mfs-trans); }
.mfs-hero__btn:hover,
.mfs-hero__btn:focus-visible {
    background: var(--mfs-gold);
    color: var(--mfs-red-dk) !important;
    transform: translateY(-2px);
    box-shadow: 0 20px 42px rgba(0, 0, 0, .34);
}
.mfs-hero__btn:hover svg { transform: translateX(4px); }
.mfs-hero__btn:focus-visible {
    outline: 3px solid var(--mfs-gold-soft);
    outline-offset: 3px;
}

/* Onda inferior que funde el hero con la seccion ------------------ */
.mfs-hero__onda {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    z-index: 4;
    line-height: 0;
    pointer-events: none;
}
.mfs-hero__onda svg {
    width: 100%;
    height: clamp(38px, 5vw, 76px);
    display: block;
}
.mfs-hero__onda path { fill: var(--mfs-cream); }

/* El wrap se pega al hero cuando este existe --------------------- */
.mfs-hero + .mfs-wrap { padding-top: 44px; }

@media (max-width: 900px) {
    .mfs-hero {
        min-height: 0;
        padding: clamp(76px, 14vw, 110px) 0 clamp(70px, 12vw, 100px);
    }
    .mfs-hero__texto { max-width: 100%; }
}

@media (max-width: 640px) {
    .mfs-hero__inner { padding: 0 20px; }
    .mfs-hero__titulo { font-size: clamp(34px, 10vw, 46px) !important; }
    .mfs-hero__btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .mfs-hero__img { animation: none; }
    .mfs-hero__btn { transition: none; }
    .mfs-hero__btn:hover { transform: none; }
}


/* Variante oscura: pastilla de vidrio sobre la foto del hero ---- */
.mfs-migas--oscuro .mfs-migas__lista {
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .24);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 8px 26px rgba(0, 0, 0, .22);
}
.mfs-migas--oscuro .mfs-migas__enlace {
    color: rgba(255, 255, 255, .82) !important;
}
.mfs-migas--oscuro .mfs-migas__enlace:hover,
.mfs-migas--oscuro .mfs-migas__enlace:focus-visible {
    color: var(--mfs-white) !important;
    background: rgba(255, 255, 255, .18);
}
.mfs-migas--oscuro .mfs-migas__casa {
    color: var(--mfs-gold-soft);
}
.mfs-migas--oscuro .mfs-migas__enlace:hover .mfs-migas__casa {
    color: var(--mfs-white);
}
.mfs-migas--oscuro .mfs-migas__sep {
    color: rgba(255, 255, 255, .38);
}
.mfs-migas--oscuro .mfs-migas__actual {
    background: rgba(255, 255, 255, .96);
    color: var(--mfs-red-dk);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .26);
}
.mfs-migas--oscuro .mfs-migas__punto {
    background: var(--mfs-gold-dk);
    box-shadow: 0 0 0 3px rgba(212, 163, 59, .32);
}
.mfs-migas--oscuro .mfs-migas__enlace:focus-visible {
    outline-color: var(--mfs-gold-soft);
}

/* ── Header ─────────────────────────────────────────────────── */
.mfs-header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
    padding: 0 16px;
}
.mfs-eyebrow {
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: .18em !important;
    color: var(--mfs-gold) !important;
    text-transform: uppercase !important;
    margin: 0 0 14px !important;
    font-family: inherit !important;
}
.mfs-title {
    font-size: clamp(28px, 4vw, 40px) !important;
    font-weight: 800 !important;
    color: var(--mfs-red) !important;
    line-height: 1.15 !important;
    margin: 0 0 18px !important;
    letter-spacing: -.01em !important;
    font-family: inherit !important;
}
.mfs-intro {
    font-size: 15.5px !important;
    line-height: 1.65 !important;
    color: var(--mfs-text-soft) !important;
    margin: 0 !important;
    font-weight: 400 !important;
    font-family: inherit !important;
}

/* ── Grid ───────────────────────────────────────────────────── */
.mfs-grid {
    display: grid;
    gap: 28px;
    padding: 0;
    list-style: none;
    margin: 0 0 60px;
}
.mfs-cols-2 { grid-template-columns: repeat(2, 1fr); }
.mfs-cols-3 { grid-template-columns: repeat(3, 1fr); }
.mfs-cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
    .mfs-cols-3, .mfs-cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .mfs-cols-2, .mfs-cols-3, .mfs-cols-4 { grid-template-columns: 1fr; }
    .mfs-grid { gap: 20px; }
    .mfs-header { margin-bottom: 36px; }
}

/* ── Card ───────────────────────────────────────────────────── */
.mfs-card {
    background: var(--mfs-white);
    border-radius: var(--mfs-radius);
    overflow: hidden;
    box-shadow: var(--mfs-shadow);
    display: flex;
    flex-direction: column;
    transition: transform var(--mfs-trans), box-shadow var(--mfs-trans);
    position: relative;
    border: 1px solid var(--mfs-border);
}
.mfs-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--mfs-shadow-lg);
}

/* Card head: imagen del servicio (auto-generada o personalizada) */
.mfs-card__head {
    position: relative;
    height: 180px;
    background: var(--mfs-stripe-a);
    overflow: hidden;
}
.mfs-card__head--image { background: #EADBC9; }
.mfs-card__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s cubic-bezier(.2,.7,.3,1);
}
.mfs-card:hover .mfs-card__image { transform: scale(1.06); }
.mfs-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(122,26,26,0.0) 35%, rgba(122,26,26,0.55) 100%);
    pointer-events: none;
    z-index: 1;
}
.mfs-card__pattern {
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        -45deg,
        var(--mfs-stripe-a) 0,
        var(--mfs-stripe-a) 22px,
        var(--mfs-stripe-b) 22px,
        var(--mfs-stripe-b) 44px
    );
    opacity: .9;
}
.mfs-card__icon {
    position: relative;
    z-index: 2;
    width: 62px;
    height: 62px;
    background: rgba(255,255,255,.85);
    border-radius: 50%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(122, 26, 26, 0.15);
    backdrop-filter: blur(2px);
    margin: 44px auto;
}
.mfs-card__icon svg,
.mfs-card__icon svg * {
    stroke: var(--mfs-red) !important;
    fill: none !important;
}
.mfs-card__num {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    background: var(--mfs-red) !important;
    color: var(--mfs-white) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .1em !important;
    padding: 5px 11px !important;
    border-radius: 20px !important;
    line-height: 1 !important;
    font-family: inherit !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

/* Card body */
.mfs-card__body {
    padding: 24px 24px 26px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.mfs-card__title {
    font-size: 19px !important;
    font-weight: 800 !important;
    color: var(--mfs-red) !important;
    margin: 0 0 10px !important;
    line-height: 1.3 !important;
    font-family: inherit !important;
}
.mfs-card__desc {
    font-size: 14.5px !important;
    color: var(--mfs-text-soft) !important;
    line-height: 1.6 !important;
    margin: 0 0 20px !important;
    flex: 1;
    font-family: inherit !important;
    font-weight: 400 !important;
}

/* CTA "Saber más →" (text link en granate) */
.mfs-card__cta {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--mfs-red) !important;
    text-decoration: none !important;
    cursor: pointer;
    align-self: flex-start;
    padding: 4px 0;
    border: none !important;
    background: transparent !important;
    transition: color var(--mfs-trans), gap var(--mfs-trans);
    font-family: inherit !important;
}
.mfs-card__cta:hover,
.mfs-card__cta:focus {
    color: var(--mfs-red-dk) !important;
    gap: 10px;
}
.mfs-card__cta svg {
    flex-shrink: 0;
    transition: transform var(--mfs-trans);
}
.mfs-card__cta:hover svg { transform: translateX(2px); }
.mfs-card__cta svg,
.mfs-card__cta svg * {
    stroke: currentColor !important;
    fill: none !important;
}

/* ── Banner CTA inferior (recreado de imagen 2) ─────────────── */
.mfs-banner {
    background: var(--mfs-red) !important;
    color: var(--mfs-white) !important;
    border-radius: var(--mfs-radius-lg);
    padding: 38px 44px;
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 30px;
    align-items: center;
    box-shadow: 0 20px 50px rgba(122, 26, 26, 0.22);
    position: relative;
    overflow: hidden;
}
.mfs-banner::before {
    /* Sutil patrón de rayas diagonales en esquina inferior derecha */
    content: '';
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        -45deg,
        transparent 0,
        transparent 28px,
        rgba(255,255,255,.04) 28px,
        rgba(255,255,255,.04) 56px
    );
    pointer-events: none;
}
.mfs-banner__icon {
    width: 130px;
    height: 130px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}
.mfs-banner__icon svg,
.mfs-banner__icon svg * {
    stroke: var(--mfs-gold) !important;
    fill: none !important;
}
.mfs-banner__content {
    position: relative;
    z-index: 2;
}
.mfs-banner__title {
    font-size: clamp(22px, 2.5vw, 28px) !important;
    font-weight: 800 !important;
    color: var(--mfs-white) !important;
    margin: 0 0 12px !important;
    line-height: 1.25 !important;
    font-family: inherit !important;
}
.mfs-banner__desc {
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: rgba(255,255,255,.88) !important;
    margin: 0 0 22px !important;
    max-width: 600px;
    font-weight: 400 !important;
    font-family: inherit !important;
}

/* Botón dorado (idéntico al de la imagen) */
.mfs-banner__btn,
.mfs-modal__cta {
    display: inline-block !important;
    background: var(--mfs-gold) !important;
    color: var(--mfs-red-dk) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    padding: 13px 26px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    transition: background var(--mfs-trans), transform var(--mfs-trans), box-shadow var(--mfs-trans);
    box-shadow: 0 4px 14px rgba(212, 163, 59, 0.35);
    border: none !important;
    cursor: pointer;
    font-family: inherit !important;
    line-height: 1.2 !important;
}
.mfs-banner__btn:hover,
.mfs-banner__btn:focus,
.mfs-modal__cta:hover,
.mfs-modal__cta:focus {
    background: var(--mfs-gold-dk) !important;
    color: var(--mfs-red-dk) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(212, 163, 59, 0.45);
}

@media (max-width: 720px) {
    .mfs-banner {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 30px 26px;
        text-align: center;
    }
    .mfs-banner__icon {
        width: 80px;
        height: 80px;
        margin: 0 auto;
    }
    .mfs-banner__desc { max-width: none; }
}

/* ══════════════════════════════════════════════════════════════
   MODAL — Ventana emergente
   ══════════════════════════════════════════════════════════════ */
.mfs-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 999999 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    margin: 0 !important;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
}
.mfs-modal[hidden] { display: none !important; }

.mfs-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(36, 8, 8, 0.62);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    cursor: pointer;
    animation: mfs-fade-in .25s ease-out;
}

.mfs-modal__box {
    position: relative;
    background: var(--mfs-white) !important;
    border-radius: var(--mfs-radius-lg);
    width: 100%;
    max-width: 580px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 30px 90px rgba(36, 8, 8, 0.4);
    animation: mfs-slide-up .35s cubic-bezier(.4, 0, .2, 1);
    color: var(--mfs-text);
    border: 1px solid var(--mfs-border);
}

@keyframes mfs-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes mfs-slide-up {
    from { opacity: 0; transform: translateY(28px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Close button */
.mfs-modal__close {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1.5px solid var(--mfs-border) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: background .2s, border-color .2s, transform .2s !important;
    z-index: 10;
    line-height: 1 !important;
    min-height: unset !important;
    min-width: unset !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.08) !important;
}
.mfs-modal__close:hover {
    background: var(--mfs-red) !important;
    border-color: var(--mfs-red) !important;
    transform: rotate(90deg);
}
.mfs-modal__close svg line { stroke: var(--mfs-red) !important; transition: stroke .2s; }
.mfs-modal__close:hover svg line { stroke: var(--mfs-white) !important; }

/* Modal head: imagen hero del servicio */
.mfs-modal__head {
    position: relative;
    height: 200px;
    background: #EADBC9;
    overflow: hidden;
    border-radius: var(--mfs-radius-lg) var(--mfs-radius-lg) 0 0;
}
.mfs-modal__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mfs-modal__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(122,26,26,0.0) 40%, rgba(36,8,8,0.45) 100%);
    pointer-events: none;
}
.mfs-modal__pattern {
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        -45deg,
        var(--mfs-stripe-a) 0,
        var(--mfs-stripe-a) 22px,
        var(--mfs-stripe-b) 22px,
        var(--mfs-stripe-b) 44px
    );
    opacity: .9;
}
.mfs-modal__icon {
    position: relative;
    z-index: 2;
    width: 72px;
    height: 72px;
    background: var(--mfs-white);
    border-radius: 50%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(122, 26, 26, 0.18);
}
.mfs-modal__icon svg,
.mfs-modal__icon svg * {
    stroke: var(--mfs-red) !important;
    fill: none !important;
}

/* Modal inner content */
.mfs-modal__inner {
    padding: 28px 32px 32px;
}
.mfs-modal__num {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: .14em !important;
    color: var(--mfs-gold) !important;
    text-transform: uppercase !important;
    margin: 0 0 8px !important;
    font-family: inherit !important;
}
.mfs-modal__title {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: var(--mfs-red) !important;
    margin: 0 0 12px !important;
    line-height: 1.2 !important;
    font-family: inherit !important;
    letter-spacing: -.01em !important;
}
.mfs-modal__desc {
    font-size: 14.5px !important;
    color: var(--mfs-text-soft) !important;
    margin: 0 0 22px !important;
    line-height: 1.65 !important;
    font-family: inherit !important;
    font-weight: 400 !important;
}

/* Lista de features dentro del modal */
.mfs-modal__features {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 26px !important;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mfs-modal__feature {
    display: flex;
    gap: 12px;
    background: var(--mfs-cream);
    border: 1px solid var(--mfs-border);
    border-radius: var(--mfs-radius-sm);
    padding: 14px 16px;
    transition: border-color .25s, background .25s;
    list-style: none !important;
}
.mfs-modal__feature:hover {
    border-color: var(--mfs-gold);
    background: var(--mfs-cream-2);
}
.mfs-modal__check {
    flex-shrink: 0;
    margin-top: 1px;
    line-height: 1;
}
.mfs-modal__check svg,
.mfs-modal__check svg * {
    stroke: var(--mfs-gold) !important;
    fill: none !important;
}
.mfs-modal__feature strong {
    display: block !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: var(--mfs-red) !important;
    margin-bottom: 3px !important;
    font-family: inherit !important;
}
.mfs-modal__feature p {
    font-size: 13px !important;
    color: var(--mfs-text-soft) !important;
    margin: 0 !important;
    line-height: 1.5 !important;
    font-family: inherit !important;
    font-weight: 400 !important;
}

/* Botón CTA dentro del modal (dorado, full width opcional) */
.mfs-modal__cta {
    display: block !important;
    width: 100%;
    text-align: center;
    padding: 15px 26px !important;
    font-size: 15px !important;
    border-radius: 10px !important;
}

/* Scrollbar modal */
.mfs-modal__box::-webkit-scrollbar { width: 6px; }
.mfs-modal__box::-webkit-scrollbar-track { background: transparent; }
.mfs-modal__box::-webkit-scrollbar-thumb {
    background: var(--mfs-stripe-b);
    border-radius: 3px;
}

@media (max-width: 600px) {
    .mfs-modal__inner { padding: 24px 22px 26px; }
    .mfs-modal__title { font-size: 21px !important; }
    .mfs-modal__head  { height: 150px; }
    .mfs-card__head   { height: 150px; }
    .mfs-modal__icon  { width: 60px; height: 60px; }
}

/* ── Accesibilidad ─────────────────────────────────────────── */
.mfs-card__cta:focus-visible,
.mfs-modal__close:focus-visible,
.mfs-modal__cta:focus-visible,
.mfs-banner__btn:focus-visible {
    outline: 3px solid var(--mfs-gold) !important;
    outline-offset: 3px;
}

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .mfs-card,
    .mfs-card__cta,
    .mfs-modal__box,
    .mfs-modal__backdrop,
    .mfs-modal__close,
    .mfs-banner__btn,
    .mfs-modal__cta {
        transition: none !important;
        animation: none !important;
    }
}

/* ── Sin franja blanca sobre el banner ──────────────────────── */
.mfs-sin-hueco {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
.elementor-widget-shortcode:has(> .elementor-widget-container > .mfs-hero:first-child),
.elementor-widget-container:has(> .mfs-hero:first-child),
.elementor-widget-wrap:has(> .elementor-widget:first-child .mfs-hero),
.elementor-column:has(> .elementor-widget-wrap > .elementor-widget:first-child .mfs-hero),
.entry-content:has(> .mfs-hero:first-child),
.page-content:has(> .mfs-hero:first-child) {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
.mfs-hero { margin-top: 0 !important; }