/* mf-extra.css — megafunsion.com (26/10/2026)
   Componentes nuevos (preguntas frecuentes, fachada de YouTube, galerías, avisos)
   y las clases que reemplazan los estilos que estaban escritos dentro del HTML.
   Regla del sitio: nada de CSS dentro de las páginas; todo va en hojas externas. */

/* ---------- Fachada de YouTube: el video se carga solo al hacer clic ---------- */
.mf-yt{position:relative;width:100%;aspect-ratio:16/9;background:#000;cursor:pointer;overflow:hidden;border-radius:6px}
.mf-yt img{width:100%;height:100%;object-fit:cover;display:block;border:0}
.mf-yt iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
.mf-yt-play{position:absolute;top:50%;left:50%;width:68px;height:48px;margin:-24px 0 0 -34px;border:0;border-radius:12px;background:rgba(0,5,119,.85);cursor:pointer;transition:background .2s}
.mf-yt-play:before{content:"";position:absolute;top:50%;left:50%;margin:-10px 0 0 -6px;border-style:solid;border-width:10px 0 10px 17px;border-color:transparent transparent transparent #fff}
.mf-yt:hover .mf-yt-play,.mf-yt-play:focus{background:#ff0000;outline:none}
.video-responsive .mf-yt{position:absolute;top:0;left:0;height:100%;aspect-ratio:auto;border-radius:0}

/* ---------- Secciones nuevas ---------- */
.mf-sec{padding:50px 0}
.mf-texto{max-width:900px;float:none;margin:0 auto}
.mf-sec-img img{width:100%;height:auto;border-radius:8px;margin-top:10px}
.mf-sec h2.line_primary{margin-bottom:26px}
.mf-pasos{margin:10px 0 18px 22px;padding:0;list-style:decimal outside}
.mf-pasos li{list-style:decimal outside;display:list-item}
.mf-pasos li{margin-bottom:8px;line-height:1.6}
.mf-centro{text-align:center}
.mf-lead{font-size:16px}
.mf-cta-banner{margin-top:18px}
.mf-recomendacion{margin:18px 0;padding:16px 18px;border-left:4px solid #00d8ff;background:#f1f7ff;border-radius:6px}
.mf-recomendacion p{margin:0;line-height:1.6}
.mf-recomendacion a,.mf-aviso a{font-weight:700;text-decoration:underline}
.mf-aviso-sec{padding:24px 0}
.mf-aviso{margin:14px 0 0;padding:14px 18px;background:#fff8e6;border:1px solid #ffe2a0;border-radius:6px;line-height:1.6}
.mf-aviso-sec .mf-aviso{margin:0}

/* Galería y videos */
.mf-galeria{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.mf-foto{margin:0;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.08)}
.mf-foto img{width:100%;height:220px;object-fit:cover;display:block}
.mf-foto figcaption{padding:10px 12px;font-size:13px;line-height:1.4;color:#555}
.mf-videos{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:10px}
.mf-video-item p{margin:8px 0 0;font-size:14px;text-align:center}

/* Preguntas frecuentes */
.mf-faq{padding:50px 0}
.mf-faq-list{max-width:900px;margin:0 auto}
.mf-faq-item{border:1px solid #e3e6f0;border-radius:8px;margin-bottom:10px;background:#fff}
.mf-faq-item summary{cursor:pointer;padding:14px 44px 14px 18px;font-weight:700;color:#000577;list-style:none;position:relative}
.mf-faq-item summary::-webkit-details-marker{display:none}
.mf-faq-item summary:after{content:"+";position:absolute;right:18px;top:12px;font-size:20px;color:#00d8ff}
.mf-faq-item[open] summary:after{content:"–"}
.mf-faq-item p{padding:0 18px 16px;margin:0;line-height:1.6}

/* Enlaces a servicios relacionados */
.mf-relacionados{list-style:none;margin:0 auto 24px;padding:0;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.mf-relacionados li a{display:inline-block;padding:10px 16px;border:1px solid #000577;border-radius:24px;color:#000577;background:#fff}
.mf-relacionados li a:hover{background:#000577;color:#fff}

@media (max-width:991px){.mf-galeria,.mf-videos{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.mf-galeria,.mf-videos{grid-template-columns:1fr}.mf-sec{padding:34px 0}}

/* ---------- Estilos que antes estaban dentro del HTML (convertidos 26/10/2026) ---------- */
.mfs-0214ba{background-color: #F4F4F4 !important;border-radius: 50% !important;flex-grow: 0 !important;height: 40px !important;margin-right: 14px !important;width: 40px !important}
.mfs-209926{display:block !important;height:50px !important;margin:0 auto 12px !important;width:50px !important}
.mfs-223d18{padding-top: 8px !important}
.mfs-2664ae{display: flex !important;flex-direction: row !important;margin-bottom: 14px !important;align-items: center !important}
.mfs-2752fd{width: 200px !important;text-align: center !important}
.mfs-29bf73{color:#3897f0 !important;font-family:Arial,sans-serif !important;font-size:14px !important;font-style:normal !important;font-weight:550 !important;line-height:18px !important}
.mfs-31ed20{width: 0 !important;height: 0 !important;border-top: 8px solid #F4F4F4 !important;border-left: 8px solid transparent !important;transform: translateY(-4px) translateX(8px) !important}
.mfs-32e9a2{background:#FFFFFF !important;line-height:0 !important;padding:0 0 !important;text-align:center !important;text-decoration:none !important;width:100% !important}
.mfs-4ca3ec{background-color: #F4F4F4 !important;border-radius: 50% !important;height: 12.5px !important;width: 12.5px !important;transform: translateX(0px) translateY(7px) !important}
.mfs-4d7c1b{background-color: #F4F4F4 !important;border-radius: 50% !important;flex-grow: 0 !important;height: 20px !important;width: 20px !important}
.mfs-5173d3{padding: 12.5% 0 !important}
.mfs-54f102{font-family:Arial,sans-serif !important;font-size:14px !important;line-height:17px !important}
.mfs-5b79ad{width: 0px !important;border-top: 8px solid #F4F4F4 !important;border-right: 8px solid transparent !important;transform: translateY(16px) !important}
.mfs-5c6cc4{color: #6b6b6b !important}
.mfs-5fc60d{background-color: #F4F4F4 !important;border-radius: 4px !important;flex-grow: 0 !important;height: 14px !important;margin-bottom: 6px !important;width: 100px !important}
.mfs-60e217{padding: 19% 0 !important}
.mfs-74dad6{display: flex !important;flex-direction: column !important;flex-grow: 1 !important;justify-content: center !important;margin-bottom: 24px !important}
.mfs-78a608{background-color: white !important}
.mfs-7df511{display: flex !important;flex-direction: row !important;align-items: center !important}
.mfs-858773{background: transparent !important;padding: 0 !important}
.mfs-8a4735{background-color: #F4F4F4 !important;border-radius: 4px !important;flex-grow: 0 !important;height: 14px !important;width: 144px !important}
.mfs-8aebc1{color:#c9c8cd !important;font-family:Arial,sans-serif !important;font-size:14px !important;font-style:normal !important;font-weight:normal !important;line-height:17px !important;text-decoration:none !important}
.mfs-8df74c{background-color: #F4F4F4 !important;height: 12.5px !important;transform: rotate(-45deg) translateX(3px) translateY(1px) !important;width: 12.5px !important;flex-grow: 0 !important;margin-right: 14px !important;margin-left: 2px !important}
.mfs-903040{margin-left: 8px !important}
.mfs-9b2237{margin-left: auto !important}
.mfs-9b624a{padding:16px !important}
.mfs-abe8bf{margin-right: 0px !important}
.mfs-b07d3a{background-color: #F4F4F4 !important;border-radius: 4px !important;flex-grow: 0 !important;height: 14px !important;margin-bottom: 6px !important;width: 224px !important}
.mfs-b27841{color:#c9c8cd !important;font-family:Arial,sans-serif !important;font-size:14px !important;line-height:17px !important;margin-bottom:0 !important;margin-top:8px !important;overflow:hidden !important;padding:8px 0 7px !important;text-align:center !important;text-overflow:ellipsis !important;white-space:nowrap !important}
.mfs-b3bfe1{display:none !important;visibility:hidden !important}
.mfs-c14224{background-color: #F4F4F4 !important;flex-grow: 0 !important;height: 12px !important;width: 16px !important;transform: translateY(-4px) !important}
.mfs-c4b9db{display: flex !important;flex-direction: column !important;flex-grow: 1 !important;justify-content: center !important}
.mfs-c87db3{background-color: #F4F4F4 !important;border-radius: 50% !important;height: 12.5px !important;width: 12.5px !important;transform: translateX(9px) translateY(-18px) !important}
.mfs-cf5794{background-color: #F4F4F4 !important;border-radius: 4px !important;flex-grow: 0 !important;height: 14px !important;width: 60px !important}
.mfs-d29491{background:#FFF !important;border:0 !important;border-radius:3px !important;box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15) !important;margin: 1px !important;max-width:540px !important;min-width:326px !important;padding:0 !important;width:99.375% !important;width:-webkit-calc(100% - 2px) !important;width:calc(100% - 2px) !important}
.mfs-d3d28f{width: 0 !important;height: 0 !important;border-top: 2px solid transparent !important;border-left: 6px solid #f4f4f4 !important;border-bottom: 2px solid transparent !important;transform: translateX(16px) translateY(-4px) rotate(30deg) !important}
.mfs-fa486a{width: 200px !important}

/* ---------- Banners morados con viento de limpieza (26/10/2026) ----------
   Antes .page_banner8 era un gris plano que parecía un error de carga. */
.page_banner8{position:relative;overflow:hidden;background:radial-gradient(circle at 30% 25%,#7b5ce6 0,#5636c2 42%,#2c1580 100%) !important}
.page_banner8.overlay_3:before{background:rgba(20,8,90,.35) !important}
.mf-banner-canvas{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none}
.page_banner8 > .container{position:relative;z-index:1}
.page_banner8 h1,.page_banner8 h2,.page_banner8 h3,.page_banner8 .mf-h4,.page_banner8 .mf-h5{color:#fff !important}
.page_banner8 p,.page_banner8 .parrafos,.page_banner8 .texto-banner,.page_banner8 li,.page_banner8 span{color:#f3efff !important}
.page_banner8 .page_banner_link a{color:#e6ddff !important}
.page_banner8 a.btn{color:#fff !important}

/* 26/10/2026 (2): el mismo morado con viento en los banners con imagen y en el carrusel del inicio */
.page_banner,.page_banner3,.page_banner4{position:relative;overflow:hidden;background:linear-gradient(135deg,rgba(123,92,230,.88) 0,rgba(86,54,194,.86) 45%,rgba(44,21,128,.92) 100%),url(../images/banner-1.jpg) no-repeat center/cover !important}
.page_banner:before,.page_banner3:before,.page_banner4:before{background:transparent !important}
.page_banner > .container,.page_banner3 > .container,.page_banner4 > .container{position:relative;z-index:1}
.page_banner h1,.page_banner3 h1,.page_banner4 h1{color:#fff !important}
.page_banner p,.page_banner3 p,.page_banner4 p,.page_banner .page_banner_link a,.page_banner .page_banner_link li{color:#efe9ff !important}
.page_banner .page_banner_link li:first-child a{color:#9fe9ff !important}
#slider.mf-carrusel-animado{position:relative;overflow:hidden}
.mf-canvas-carrusel{z-index:5}
#slider .carousel-caption,#slider .quote_form2,#slider .carousel-indicators,#slider .carousel-control{z-index:10}
/* Titulos de dos lineas que se montaban (line-height de la plantilla) */
.full-row h2,.full-row h3{line-height:1.25}

/* 27/10/2026: tarjetas de "servicios recomendados" (.project_item2). El título azul sobre
   gris claro no tenía contraste: el panel ahora sube hasta la mitad, en gris azulado, y el título va en blanco. */
.project_item2_hover{top:50% !important;background:linear-gradient(to bottom,rgba(52,62,120,.62) 0,rgba(24,30,96,.88) 100%) !important}
.project_item2:hover .project_item2_hover{top:0 !important}
.project_item2 .title,.project_item2 .title a,a .project_item2 .title{color:#fff !important;text-shadow:0 1px 3px rgba(0,0,0,.45);font-weight:700}
.project_item2 .line_default::before{background:#00d8ff !important}