/* ========================================================================== Yumagic Hello · "puente" entre el CSS heredado (MaxVid/KingComposer) y Elementor Claude, 5-6/9/2026. Aquí van solo reglas de compatibilidad; los estilos de marca siguen en custom-personalizador.css (CSS adicional del Personalizador antiguo). ========================================================================== */ /* --- Alineaciones que KingComposer ponía en filas/columnas --- */ .kc-align-center { text-align: center; } .kc-align-left { text-align: left; } .kc-align-right { text-align: right; } .kc-align-justify { text-align: justify; } /* --- Contenedores migrados: el ancho "boxed" imita al .kc-container (1170px) --- */ .e-con.kc_row > .e-con-inner { max-width: 1170px; } /* --- Bootstrap fija box-sizing y line-height; Elementor los espera así --- */ .elementor-widget-container { box-sizing: border-box; } /* --- Widgets de Elementor que hacen de "feature box" de KingComposer: heredan color/tamaño/fuente del envoltorio (.content-title, .content-desc, ...) --- */ body .content-title .elementor-heading-title, body .content-position .elementor-heading-title { font-size: inherit; font-weight: inherit; color: inherit; line-height: inherit; text-transform: inherit; font-family: inherit; margin: 0; } /* Márgenes de las partes de la feature box: ahora van en el propio widget (conv.py, _margin) para que los márgenes por elemento de KC prevalezcan; aquí solo queda lo que depende del contenedor (#radius, layout 3). (cambiado 6/9 02:05) */ body #radius .e-con .elementor-widget.content-position, body #radius.e-con .elementor-widget.content-position { margin: 0 0 20px; } body .e-con .kc-fb-layout-3 > .e-con.box-right { padding: 0 0 0 25px; --width: auto; width: auto; flex: 1 1 0%; min-width: 0; } /* En móvil Elementor pone flex-wrap:wrap a los contenedores en fila (--flex-wrap-mobile) y el texto saltaba debajo del icono; en la web real el icono y el texto siguen en línea también en móvil. */ body .e-con .kc-fb-layout-3 { --flex-wrap: nowrap; --flex-wrap-mobile: nowrap; flex-wrap: nowrap; } body .e-con .kc-fb-layout-3 > .elementor-widget.content-icon { flex: 0 0 auto; width: auto; } .content-desc .elementor-widget-container { color: inherit; } .content-desc p:last-child { margin-bottom: 0; } /* Iconos de feature box: Elementor los pinta como SVG inline (1em). Tamaños por defecto de KingComposer por layout; el tamaño/color por elemento viene de los ajustes del widget (traducidos de KC). */ .content-icon .elementor-icon { color: inherit; line-height: 1.42857143; } .content-icon .elementor-icon svg { fill: currentColor; height: 1em; width: 1em; margin: 0.21em 0; } .content-icon .elementor-icon i { display: inline-block; width: auto; height: auto; line-height: inherit; } .kc-fb-layout-1 .content-icon .elementor-icon { font-size: 55px; } .kc-fb-layout-3 .content-icon .elementor-icon { font-size: 29px; } .kc-fb-layout-5 .content-icon .elementor-icon { font-size: 18px; } .kc-fb-layout-3 > .content-icon { width: auto; flex: 0 0 auto; } .kc-fb-layout-3 > .box-right { flex: 1 1 auto; } /* (quitado: .kc-feature-boxes .elementor-widget margin 0 anulaba el margin-bottom 25px de .content-desc) */ .kc-feature-boxes .content-position.elementor-widget-heading { width: auto; display: inline-block; } .content-button .elementor-button-wrapper { display: inline-block; } .content-button .elementor-button { line-height: 1.42857143; font-size: 14px; } /* .content-button a en la web real (14px del Personalizador, line-height heredado) */ .kc-fb-layout-2 .content-image img { width: 100%; } /* --- Botones migrados (kc_button -> widget Botón) --- */ .kc-btn .elementor-button { white-space: nowrap; } .elementor-button:hover, .elementor-button:focus { text-decoration: none; } /* (quitado 6/9 01:40: '.elementor-widget-text-editor p:last-child{margin-bottom:0}' — en la web real los bloques de texto KC conservan el margin-bottom 25px del último

; quitarlo comprimía los bloques, sobre todo en móvil) */ /* --- Bloques HTML con la maquetación antigua (Bootstrap .container dentro de un contenedor "full") --- */ .elementor-widget-html .container { width: 100%; max-width: 1170px; } /* --- Cabecera (Theme Builder) --- */ .yh-header { background: #000; } .yh-header .elementor-nav-menu--main .elementor-item { font-family: Poppins, sans-serif; font-size: 14px; color: #fff; padding: 23px 5px; white-space: nowrap; } .yh-header .elementor-nav-menu--main .sub-arrow { padding-inline-start: 2px; font-size: 9px; } .yh-header .elementor-nav-menu--main .sub-arrow i { font-size: 9px; } .yh-header .elementor-nav-menu--main .elementor-item:hover, .yh-header .elementor-nav-menu--main .elementor-item.elementor-item-active { color: #e43b85; } .yh-header .elementor-nav-menu--dropdown { background: #fff; box-shadow: 0 5px 10px 0 rgba(83, 82, 82, .1); } .yh-header .elementor-nav-menu--dropdown a { font-family: Poppins, sans-serif; color: #696969; font-size: 14px; } .yh-header .elementor-nav-menu--dropdown a:hover { color: #fff; background: #e43b85; } .yh-header .elementor-menu-toggle { color: #fff; } .yh-header .elementor-nav-menu--dropdown.elementor-nav-menu__container { background: #000; } .yh-header .elementor-nav-menu--dropdown.elementor-nav-menu__container a { color: #fff; } .yh-header .elementor-widget-image img { max-height: 65px; width: auto; } /* --- Pie (Theme Builder), mismas clases que el tema viejo --- */ #footer-area.footer-area-section { background: #000; } #footer-area .footer-content { color: #999; } #footer-area .footer-content a { color: #999; } #footer-area .footer-content a:hover { color: #e43b85 !important; } #footer-area .widgettitle { color: #fff; font-size: 24px; font-family: Poppins, sans-serif; } #footer-area .elementor-widget-text-editor p.widgettitle { margin-bottom: 40px; } /* como .mb40 en la web real */ @media (max-width: 767px) { #footer-area .elementor-widget-text-editor p.widgettitle { margin-bottom: 25px; } } #footer-area .footer-social ul { padding: 0; margin: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px; } /* los ya llevan margin-right 20px (MaxVid) */ #footer-area .footer-social li a i { font-size: 26px; color: #999; } #footer-area .footer-social li a:hover i { color: #e43b85; } #footer-area .copy-right-text { text-align: center; color: #999; } #footer-area .copy-right-text p { margin: 0; } #footer-area .elementor-widget-text-editor p { margin-bottom: 25px; } /* p{margin:0 0 25px} de MaxVid */ #footer-area .elementor-widget-text-editor p:last-child { margin-bottom: 0; } /* --- Blog: rejilla heredada --- */ .yh-blog-grid .blog-section-pic img { width: 100%; height: auto; } .yh-blog-grid .blog-section-text { padding: 30px; } .yh-blog-grid .blog-tilte a { color: #000; font-weight: 700; } .yh-blog-grid .blog-tilte a:hover { color: #e43b85; } .yh-blog-grid .view-button { background: none !important; padding: 0; margin: 0; } .yh-blog-grid .view-button a { color: #000; } .yh-pagination .nav-links { display: flex; gap: 8px; justify-content: center; margin: 20px 0 40px; } .yh-pagination .page-numbers { padding: 6px 12px; border: 1px solid #e43b85; border-radius: 6px; color: #e43b85; } .yh-pagination .page-numbers.current { background: #e43b85; color: #fff; } .yh-hero-blog #page-breadcrum, .yh-hero-portfolio #page-breadcrum { background-size: cover !important; } /* --- Portfolio: listado heredado --- */ .yh-portfolio .yh-filter-title { font-size: 18px; font-weight: 700; margin: 0 0 15px; } .yh-portfolio .nav-gallery li { cursor: pointer; } .yh-portfolio .yh-filtr-container { display: flex; flex-wrap: wrap; } .yh-portfolio .filtr-item { margin-bottom: 30px; } .yh-portfolio .item-wrap img { width: 100%; height: auto; } .yh-portfolio .filteredOut { display: none; } .yh-portfolio .portfolio-item-title a { color: #000; } .yh-portfolio .portfolio-item-title a:hover { color: #e43b85; } @media (max-width: 991px) { .yh-portfolio .portfolio-tab-button { margin-bottom: 20px; } .yh-portfolio .nav-gallery li { display: inline-block; margin: 0 12px 8px 0; } } /* --- Blog single: la entrada dentro de Elementor conserva las clases del tema viejo --- */ .blog-single-content-desc img { max-width: 100%; height: auto; } /* --- Formulario de comentarios (Hello): un poco de aire --- */ .comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea { width: 100%; } /* --- Feature boxes: márgenes/altura de línea que Elementor pisa con más especificidad (añadido 6/9 00:40) --- */ body .content-title .elementor-heading-title, body .content-position .elementor-heading-title { font-size: inherit; font-weight: inherit; color: inherit; line-height: inherit; text-transform: inherit; font-family: inherit; margin: 0; } body #radius .e-con .elementor-widget.content-position, body #radius.e-con .elementor-widget.content-position { margin: 0 0 20px; } body .e-con .kc-fb-layout-3 > .e-con.box-right { padding: 0 0 0 25px; --width: auto; width: auto; flex: 1 1 0%; min-width: 0; } /* En móvil Elementor pone flex-wrap:wrap a los contenedores en fila (--flex-wrap-mobile) y el texto saltaba debajo del icono; en la web real el icono y el texto siguen en línea también en móvil. */ body .e-con .kc-fb-layout-3 { --flex-wrap: nowrap; --flex-wrap-mobile: nowrap; flex-wrap: nowrap; } body .e-con .kc-fb-layout-3 > .elementor-widget.content-icon { flex: 0 0 auto; width: auto; } /* ========================================================================== Tarifas: tabla comparativa tipo SaaS (solo escritorio; en tablet/móvil se muestran las tarjetas originales) ========================================================================== */ .yh-tarifas-wrap { width: 100%; overflow-x: auto; } table.yh-tarifas { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid #dddddd; border-radius: 10px; overflow: hidden; color: #666; font-size: 14px; table-layout: fixed; background: #fff; } table.yh-tarifas th, table.yh-tarifas td { border: 0; border-top: 1px solid #eee; padding: 10px 14px; vertical-align: middle; text-align: center; font-weight: 400; text-transform: none; } table.yh-tarifas span, table.yh-tarifas p, table.yh-tarifas small, table.yh-tarifas em { text-align: inherit; } table.yh-tarifas thead th { border-top: 0; vertical-align: top; padding: 0; } table.yh-tarifas .yh-t-concept { text-align: left; width: 28%; color: #000; padding-left: 20px; } table.yh-tarifas .yh-t-corner { background: #fff; } table.yh-tarifas .yh-t-corner-txt { display: block; padding: 24px 20px 0; font-family: Poppins, sans-serif; font-size: 16px; color: #000; } table.yh-tarifas thead th.yh-t-plan { background: #fdebf4; border-left: 1px solid #fff; } table.yh-tarifas thead th.yh-t-highlight { background: #e43b85; color: #fff; } table.yh-tarifas .yh-t-head { padding: 15px 14px 16px; } table.yh-tarifas .yh-t-label { font-size: 12px; text-transform: uppercase; letter-spacing: .02em; margin: 0 0 4px; color: #666; } table.yh-tarifas .yh-t-highlight .yh-t-label, table.yh-tarifas .yh-t-highlight .yh-t-desc, table.yh-tarifas .yh-t-highlight .yh-t-note { color: #fff; } table.yh-tarifas .yh-t-name { font-size: 22px; margin: 0 0 6px; line-height: 1.2; } table.yh-tarifas .yh-t-highlight .yh-t-name { color: #fff !important; } table.yh-tarifas .yh-t-desc { font-size: 13px; color: #666; margin: 0 0 8px; min-height: 2.6em; } table.yh-tarifas .yh-t-price { font-size: 14px; margin: 0; } table.yh-tarifas .yh-t-price big { font-size: 24px; } table.yh-tarifas .yh-t-highlight .yh-t-price, table.yh-tarifas .yh-t-highlight .yh-t-price big { color: #fff !important; } table.yh-tarifas .yh-t-note { margin: 4px 0 0; } table.yh-tarifas .yh-t-note small { color: #666 !important; font-size: 11px; } table.yh-tarifas .yh-t-highlight .yh-t-note small { color: #fff !important; } table.yh-tarifas tr.yh-t-section th { text-align: left; background: #f7f7f7; padding: 12px 20px 8px; border-top: 1px solid #ddd; } table.yh-tarifas tr.yh-t-section small.pink { font-size: 12px; font-weight: 700; letter-spacing: .04em; } table.yh-tarifas td.yh-t-highlight { background: #fff5f9; } table.yh-tarifas .yh-t-yes i.fa-check { color: #e43b85; font-size: 16px; } table.yh-tarifas .yh-t-val { display: inline; font-size: 13px; color: #333; margin-left: 4px; } table.yh-tarifas .yh-t-dash { color: #c8c8c8; font-size: 16px; } table.yh-tarifas tbody tr:hover td { background: #fafafa; } table.yh-tarifas tbody tr:hover td.yh-t-highlight { background: #fdebf4; } table.yh-tarifas tr.yh-t-compromiso td { vertical-align: top; text-align: left; font-size: 12px; } table.yh-tarifas tr.yh-t-compromiso .gris { margin: 0; padding: 0; background: none; } table.yh-tarifas tr.yh-t-cta td { padding: 18px 10px 22px; } table.yh-tarifas tr.yh-t-cta .kc_button { display: inline-block; background: #fff; border: 1px solid #e43b85; color: #e43b85 !important; border-radius: 10px !important; padding: 5px 25px; font-size: 14px; line-height: 30px; white-space: nowrap; } table.yh-tarifas tr.yh-t-cta .kc_button:hover, table.yh-tarifas tr.yh-t-cta td.yh-t-highlight .kc_button { background: #e43b85 !important; color: #fff !important; } table.yh-tarifas tr.yh-t-cta td.yh-t-highlight .kc_button:hover { background: #fff !important; color: #e43b85 !important; } @media (max-width: 1024px) { .yh-tarifas-row { display: none !important; } } /* --- Cajas "pulido de diseño" (Análisis RRSS, Creatividades): mismo lenguaje que las cajas de la home --- */ .yh-box .elementor-widget-icon .elementor-icon { color: #e43b85; } .yh-box .yh-box-text .elementor-heading-title { text-align: left; } .yh-box-col { min-width: 0; } /* --- Tarifas v2: cabecera en tres cajetines (nombre / precio / frase) y 5 columnas (incluye Paid B2B) --- */ table.yh-tarifas-v2 { table-layout: fixed; } table.yh-tarifas-v2 .yh-t-concept { width: 22%; } table.yh-tarifas-v2 thead th.yh-t-plan, table.yh-tarifas-v2 thead td.yh-t-plan { background: #fff; color: inherit; padding: 3px 6px; vertical-align: top; border-left: 1px solid #eee; border-top: 0; height: 1px; /* height:1px: truco para que .yh-t-box pueda medir 100% de la celda */ } table.yh-tarifas-v2 thead tr.yh-t-hr-name th.yh-t-plan { padding-top: 10px; } table.yh-tarifas-v2 thead tr.yh-t-hr-desc td.yh-t-plan { padding-bottom: 12px; } table.yh-tarifas-v2 thead th.yh-t-highlight, table.yh-tarifas-v2 thead td.yh-t-highlight { background: #fff5f9; color: inherit; } table.yh-tarifas-v2 thead tr.yh-t-hr td { border-top: 0; } table.yh-tarifas-v2 .yh-t-box { border-radius: 10px; padding: 10px 8px; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; } table.yh-tarifas-v2 .yh-t-box-name { background: #fdebf4; } table.yh-tarifas-v2 .yh-t-highlight .yh-t-box-name { background: #e43b85; } table.yh-tarifas-v2 .yh-t-highlight .yh-t-box-name .yh-t-label, table.yh-tarifas-v2 .yh-t-highlight .yh-t-box-name .yh-t-name { color: #fff !important; } table.yh-tarifas-v2 .yh-t-b2b .yh-t-box-name { background: #fff; border: 1px solid #e3e3e3; } table.yh-tarifas-v2 .yh-t-label { font-size: 10px; letter-spacing: .04em; margin: 0 0 2px; color: #666; text-transform: uppercase; line-height: 1.3; } table.yh-tarifas-v2 .yh-t-name { font-size: 20px; margin: 0; line-height: 1.15; } table.yh-tarifas-v2 .yh-t-box-price { background: #fff; border: 1px solid #eee; } table.yh-tarifas-v2 .yh-t-price { margin: 0; line-height: 1.1; } table.yh-tarifas-v2 .yh-t-desde { font-size: 12px; color: #666; } table.yh-tarifas-v2 .yh-t-price big { font-size: 20px; } table.yh-tarifas-v2 .yh-t-note { margin: 4px 0 0; } table.yh-tarifas-v2 .yh-t-note small { font-size: 10px; color: #666 !important; line-height: 1.3; display: block; } table.yh-tarifas-v2 .yh-t-box-desc { background: transparent; padding: 2px 6px 0; } table.yh-tarifas-v2 .yh-t-desc { font-size: 11px; color: #666; margin: 0; line-height: 1.35; min-height: 0; } table.yh-tarifas-v2 tbody th.yh-t-concept { font-size: 13px; padding-left: 16px; } table.yh-tarifas-v2 td { padding: 9px 6px; font-size: 13px; } table.yh-tarifas-v2 .yh-t-val { font-size: 12px; } table.yh-tarifas-v2 tr.yh-t-compromiso td { font-size: 12px; line-height: 1.4; padding: 10px 8px; } table.yh-tarifas-v2 tr.yh-t-cta .kc_button { padding: 4px 12px; font-size: 13px; white-space: normal; line-height: 22px; } table.yh-tarifas-v2 .yh-t-highlight .yh-t-price, table.yh-tarifas-v2 .yh-t-highlight .yh-t-price big { color: #e43b85 !important; } table.yh-tarifas-v2 .yh-t-highlight .yh-t-desde { color: #666 !important; } table.yh-tarifas-v2 .yh-t-highlight .yh-t-desc, table.yh-tarifas-v2 .yh-t-highlight .yh-t-note, table.yh-tarifas-v2 .yh-t-highlight .yh-t-note small { color: #666 !important; } /* --- 404: la cabecera ya no es fija, así que la franja negra no necesita los 76px que antes quedaban tapados --- */ .yh-hero-404 #page-breadcrum { padding-bottom: 254px; } @media (max-width: 767px) { .yh-hero-404 #page-breadcrum { padding-bottom: 220px; } } .yh-404 .error-text h2 { margin-top: 0; } /* botón rosa genérico (mismo estilo que los botones KC de la web: rosa, radio 10, hover blanco) */ .yh-btn-pink { display: inline-block; background: #e43b85; color: #fff !important; border: 1px solid #e43b85; border-radius: 10px; padding: 5px 25px; line-height: 30px; font-size: 14px; font-family: Poppins, sans-serif; text-decoration: none !important; transition: all .3s; } .yh-btn-pink:hover { background: #fff; color: #e43b85 !important; } /* --- Acordeones KC -> widget Toggle (todo cerrado al cargar, como data-closeall="true" en KC) --- */ .kc_accordion_wrapper .elementor-toggle .elementor-tab-title { padding: 10px 15px; border: 1px solid #e0e0e0; } .kc_accordion_wrapper .elementor-toggle .elementor-toggle-item { margin-bottom: 8px; } .kc_accordion_wrapper .elementor-toggle .elementor-tab-content { padding: 15px; border-top: 0; margin: 0; } .kc_accordion_wrapper .elementor-toggle .elementor-tab-content p:last-child { margin-bottom: 0; } /* .kc_accordion_wrapper p{margin-bottom:0} en el Personalizador */ .kc_accordion_wrapper .elementor-toggle .elementor-toggle-icon { font-size: 14px; line-height: 30px; } .kc_accordion_wrapper .elementor-toggle .elementor-toggle-icon svg { width: 14px; height: 14px; vertical-align: middle; } /* --- Video de la portada (.vimeo-wrapper): en la web antigua se dimensionaba con padding-bottom:56.25% y height:0. Dentro de los contenedores flex de Elementor en movil (flex-wrap:wrap) ese padding no cuenta para la altura y el contenedor medía 0 px: el texto siguiente se montaba sobre el vídeo (detectado por Dídac 6/9). Con aspect-ratio el bloque mide siempre 16:9. --- */ .elementor-widget-html .vimeo-wrapper { height: auto; padding-bottom: 0; aspect-ratio: 16 / 9; } @supports not (aspect-ratio: 16 / 9) { .elementor-widget-html .vimeo-wrapper { height: 0; padding-bottom: 56.25%; } } /* Quick links de la ficha del portfolio: que "Postproducción" quepa en una línea (la columna es 30 px más estrecha que en el tema antiguo) */ .service-single-list li { padding-left: 24px; padding-right: 16px; } .service-single-list .service-icon i { margin-right: 18px; } .service-single-list .service-icon h3 { white-space: nowrap; } /* --- Formulario de comentarios (widget Post Comments de Elementor Pro + comments.php del tema hijo) --- */ #comments #reply-title, #comments .title-comments { margin: 0 0 20px; font-size: 24px; } #comments .logged-in-as, #comments .comment-notes { margin: 0 0 20px; font-size: 14px; color: #666; } #comments .comment-form label { display: block; margin-bottom: 6px; font-weight: 600; } #comments .comment-form input[type="text"], #comments .comment-form input[type="email"], #comments .comment-form input[type="url"], #comments .comment-form textarea { width: 100%; border: 1px solid #e5e5e5; background: #f6f6f6; padding: 12px 15px; border-radius: 6px; font-family: Poppins, sans-serif; font-size: 15px; } #comments .comment-form textarea { min-height: 150px; } #comments .comment-form p { margin: 0 0 18px; } #comments .comment-form .form-submit { text-align: left; margin-top: 10px; } #comments .comment-form-cookies-consent { display: flex; gap: 8px; align-items: flex-start; } #comments .comment-form-cookies-consent label { display: inline; font-weight: 400; margin: 0; font-size: 14px; color: #666; } #comments .comment-form .submit { width: auto; display: inline-block; background: #e43b85; color: #fff; border: 1px solid #e43b85; border-radius: 10px; padding: 5px 30px; font-family: Poppins, sans-serif; font-size: 14px; line-height: 30px; cursor: pointer; transition: all .3s; } #comments .comment-form .submit:hover { background: #fff; color: #e43b85; } #comments .comment-list { list-style: none; padding: 0; margin: 0 0 30px; } #comments .comment-list .comment-body { border: 1px solid #eee; border-radius: 10px; padding: 20px; margin-bottom: 15px; } /* --- Tarifas: columna Paid B2B "enmarcada" en gris (es una tarifa aparte: solo paid, sin social media). Petición de Dídac 6/9. Solo el marco/fondo es gris: nombre, precio, checks y botón siguen en rosa para que no parezca desactivada (Dídac 6/9 11:00). --- */ table.yh-tarifas-v2 thead th.yh-t-b2b, table.yh-tarifas-v2 thead td.yh-t-b2b { background: #f4f4f4; border-left: 2px solid #ddd; } table.yh-tarifas-v2 thead th.yh-t-b2b { border-top: 2px solid #ddd; border-top-right-radius: 12px; } table.yh-tarifas-v2 thead .yh-t-b2b .yh-t-box-price { background: #fff; border-color: #e3e3e3; } table.yh-tarifas-v2 td.yh-t-b2bcol { background: #f4f4f4; border-left: 2px solid #ddd; } table.yh-tarifas-v2 tr:last-child td.yh-t-b2bcol { border-bottom: 2px solid #ddd; } /* tarjeta móvil B2B: cabecera gris en vez de rosa */ #tarifas .our-pricing div.grisita { background: #f1f1f1; margin: 0 -20px; padding: 15px 20px 16px; border-radius: 10px 10px 0 0; } .our-pricing.yh-b2b-card { border: 2px solid #ddd; } /* --- Móvil: Elementor pone flex-wrap:wrap a TODOS los contenedores (--flex-wrap-mobile). En un contenedor en columna con wrap, un widget sin anchura propia (el vídeo 16:9 de la portada, iconos...) mide 0 px de alto y lo siguiente se le monta encima. Todas las filas convertidas ya van en columna en móvil (sus hijas con anchura 100 %), así que el wrap no hace falta; los contenedores que lo fijen a mano en el editor siguen mandando (su CSS tiene más prioridad). --- */ @media (max-width: 767px) { .e-con.e-flex { --flex-wrap-mobile: nowrap; } } /* --- Lightbox de vídeo (portfolio): el plugin Top Bar (barra rosa) es fixed con z-index 99998 y tapaba la X de cerrar del lightbox de Elementor (z-index 9999). El lightbox pasa por encima de la barra y la X se ve más grande. --- */ .dialog-widget.dialog-lightbox-widget { z-index: 100000 !important; } .dialog-lightbox-widget .dialog-lightbox-close-button { top: 18px; right: 22px; width: 44px; height: 44px; font-size: 32px; color: #fff; opacity: .95; } .dialog-lightbox-widget .dialog-lightbox-close-button svg { width: 30px; height: 30px; fill: #fff; } .dialog-lightbox-widget .dialog-lightbox-close-button:hover { color: #e43b85; } .dialog-lightbox-widget .dialog-lightbox-close-button:hover svg { fill: #e43b85; } /* --- Filas de tarjetas (columnas con borde): misma altura y última caja (Métrica / resultado) pegada abajo --- */ .yh-cards-row > .e-con-inner > .kc_column > .e-con:last-child, .yh-cards-row > .kc_column > .e-con:last-child { margin-top: auto; } /* --- Columnas-caja (Sin Yumagic / Con Yumagic, Encajamos contigo si / Probablemente no): las dos columnas miden lo mismo (stretch en el contenedor) y, si el bloque HTML termina en un párrafo (la caja blanca "Resultado"), ese párrafo se pega abajo para que quede a la misma altura en las dos cajas --- */ .yh-boxcols-row > .e-con-inner > .kc_column > .elementor-widget-html, .yh-boxcols-row > .kc_column > .elementor-widget-html { flex: 1 1 auto; display: flex; flex-direction: column; } .yh-boxcols-row .kc_column > .elementor-widget-html > p:last-child { margin-top: auto !important; } .yh-boxcols-row .kc_column > .elementor-widget-html > :nth-last-child(2) { margin-bottom: 20px; } /* --- Tarjetas en flex (servicios de la portada, 3 por línea, última línea centrada): el CSS legado de KC (.kc-fb-layout-5{width:100%;float:left}) pisaba la anchura de Elementor; el margen inferior de KC se sustituye por el hueco (gap) del contenedor para que todas las tarjetas de una línea midan lo mismo. En móvil, a una por línea. --- */ .yh-cards-flex > .e-con-inner > .e-con, .yh-cards-flex > .e-con { width: var(--width); float: none; min-width: 0; margin-bottom: 0 !important; } /* --- Filas de logos en móvil: rejilla de dos columnas (las columnas pasan a display:contents y cada logo ocupa el 50 %) --- */ @media (max-width: 767px) { .yh-logos-row > .e-con-inner > .kc_column, .yh-logos-row > .kc_column { display: contents; } .yh-logos-row .elementor-widget-image { width: 50% !important; max-width: 50%; flex: 0 0 50%; padding: 8px 12px; box-sizing: border-box; text-align: center; } .yh-logos-row .elementor-widget-image img { max-width: 150px; max-height: 70px; width: auto; height: auto; object-fit: contain; } } /* --- Botón de play del portfolio: ahora es