. Especificidad 0,3,1 para ganarles sin depender del orden de los .mi-fase-row .mi-fase-num{display:flex !important;align-items:center !important; justify-content:center !important;} .mi-badge{margin-left:auto;margin-right:auto;} .elementor-element-ad39cc8 .swiper-pagination-bullet{width:6px;height:6px;opacity:1;} .elementor-element-ad39cc8 .swiper-pagination-bullet-active{background:#FFFFFF;} .elementor-element-ad39cc8 .e-n-carousel{--e-n-carousel-slide-height:auto;} /* ============================================================ Landing Metro — Programa Corporativo de Innovación Abierta Estilos de apoyo. TODO el contenido vive en widgets nativos de Elementor; aquí solo va lo que el panel no puede declarar. ============================================================ */ .mi-sec, .mi-sec *{min-width:0;overflow-wrap:break-word;} .mi-sec .elementor-widget-text-editor p{margin:0;} .mi-sec .elementor-widget-text-editor p + p{margin-top:.7em;} .mi-sec .elementor-widget-heading .elementor-heading-title{margin:0;} .mi-sec .elementor-widget-container{min-width:0;} /* --- header / nav ------------------------------------------------ */ .mi-header{position:relative;z-index:5;} /* --- menu de WordPress (widget nav-menu) ------------------------- */ .mi-nav-links .elementor-nav-menu--main .elementor-item{padding:0;} .mi-nav-links .elementor-nav-menu--dropdown{box-shadow:none;} .mi-nav-pill{flex-wrap:nowrap;} .mi-nav-cta .elementor-button{white-space:nowrap;} .mi-link-terms .elementor-button{padding:0;text-decoration:underline;text-underline-offset:5px;} /* el icono del Figma es un documento de contorno 11x14, no el solido de Font Awesome: se sustituye por el vector exacto extraido del .fig */ .mi-link-terms .elementor-button-icon{ width:11px;height:14px;display:inline-block; background:url("data:image/svg+xml,") no-repeat center/11px 14px;} .mi-link-terms .elementor-button-icon svg, .mi-link-terms .elementor-button-icon i{display:none;} /* --- botones ----------------------------------------------------- */ .mi-btn .elementor-button,.mi-btn-dark .elementor-button,.mi-btn-mini .elementor-button{ display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.2;} .mi-btn-ghost .elementor-button{background-color:transparent;} /* --- hero -------------------------------------------------------- */ .mi-hero{position:relative;} .mi-hero-body{position:relative;z-index:2;} .mi-badge .elementor-widget-text-editor{width:100%;} .mi-hero-opera{position:relative;z-index:2;margin-top:auto;} /* los logos no se encogen: en una fila nowrap con el menu en linea el navegador los reducia hasta 0 antes de desbordar la fila (medido a 820) */ .mi-logo-metro,.mi-logo-estratek{flex-shrink:0;} .mi-logo-metro img,.mi-logo-estratek img{max-width:none;} /* --- iconos circulares ------------------------------------------- */ .mi-reto-icon .elementor-icon,.mi-benef-icon .elementor-icon,.mi-social .elementor-icon{ display:flex;align-items:center;justify-content:center;} .mi-reto-icon .elementor-icon{width:38px;height:38px;} .mi-benef-icon .elementor-icon{width:38px;height:38px;} .mi-social .elementor-icon{width:31px;height:31px;} /* --- retos: circuito decorativo del Figma ------------------------------ Cada corchete va anclado a la esquina de SU tarjeta, no a la rejilla. Medido sobre mi-deco-retos.svg: los corchetes sobresalen 3,5-4 px de la esquina (medio trazo de 8) y los segmentos 3-4 px del borde. Al ser piezas de tamano fijo ancladas a esquinas, valen igual con 3, 2 o 1 columna. En el Figma el corchete se dibuja SOBRE la tarjeta, no detras. */ .mi-retos-grid{position:relative;z-index:0;} .mi-reto-card{position:relative;z-index:1;} .mi-reto-card::after{ content:"";position:absolute;inset:-4px;pointer-events:none;z-index:2; background-repeat:no-repeat;} /* 1 · corchete verde arriba-izquierda + segmento verde en el borde superior */ .mi-reto-card-1::after{ background-image:url("data:image/svg+xml,"),url("data:image/svg+xml,"); background-size:71.53px 76px,57px 8px; background-position:left 0.47px top 0.5px,left 88px top 1px;} /* 2 · corchete cian abajo-derecha + segmento cian en el borde inferior */ .mi-reto-card-2::after{ background-image:url("data:image/svg+xml,"),url("data:image/svg+xml,"); background-size:71.53px 76px,57px 8px; background-position:right 0.47px bottom 1px,left 125px bottom 1px;} /* 3 · corchete naranja arriba-derecha + segmento naranja en el borde derecho */ .mi-reto-card-3::after{ background-image:url("data:image/svg+xml,"),url("data:image/svg+xml,"); background-size:76px 71.53px,8px 57px; background-position:right 0px top 1px,right 0px top 85px;} /* 4 · corchete amarillo abajo-derecha + segmento amarillo en el borde inferior */ .mi-reto-card-4::after{ background-image:url("data:image/svg+xml,"),url("data:image/svg+xml,"); background-size:71.53px 76px,57px 8px; background-position:right 0.47px bottom 0px,left 138px bottom 0px;} /* 5 · corchete verde arriba-derecha + segmento verde en el borde derecho */ .mi-reto-card-5::after{ background-image:url("data:image/svg+xml,"),url("data:image/svg+xml,"); background-size:76px 71.53px,8px 57px; background-position:right 0px top 0px,right 0px top 84px;} /* 6 · corchete cian abajo-izquierda + segmento cian en el borde izquierdo */ .mi-reto-card-6::after{ background-image:url("data:image/svg+xml,"),url("data:image/svg+xml,"); background-size:76px 71.53px,8px 57px; background-position:left 0px bottom 0.47px,left 0px top 77px;} /* --- Retos: linea decorativa vertical del lado derecho (Figma x 1167..1290, y 121..1661). Anclada al eje del contenido, no al borde del viewport --- */ .mi-retos{position:relative;} .mi-retos::after{ /* anclada por su extremo DERECHO al eje del contenido: el tramo horizontal se sale de pantalla por la izquierda en cualquier ancho, como en el Figma (arranca en x -1193) */ content:"";position:absolute;top:-933px;right:calc(50% - 570px);width:2483px;height:1764px; background-image:url("data:image/svg+xml,"); background-repeat:no-repeat;background-position:right top;background-size:2483px 1764px; pointer-events:none;z-index:0;} /* --- El Programa: la foto va recortada con la silueta escalonada del Figma (nodo "clippath", 382x367), no con un rectangulo redondeado --- */ .mi-foto-programa img{ width:100% !important;aspect-ratio:382/367;height:auto !important; object-fit:cover !important;object-position:center center !important; -webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,"); -webkit-mask-size:100% 100%;mask-size:100% 100%; -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;} /* --- línea de tiempo (carrusel) ---------------------------------- */ /* --- cronograma -------------------------------------------------- */ /* La moldura del cronograma son 4 corchetes de esquina mas 2 segmentos, todos de tamano fijo: anclados a las esquinas del propio bloque valen a cualquier ancho. Los segmentos horizontales se centran, que es donde caen en el Figma (x 671 de un bloque 229..1205: 442 desde la izquierda de 976, casi el centro). */ .mi-tabla{position:relative;z-index:0;--deco-k:1;} /* La moldura se escala con la tabla. A 1440 la tabla mide 976 y los corchetes 100: un 10 % de su ancho. A 393 la tabla mide 361, y los mismos 100 px son un 28 %: los brazos casi se juntan y no se parece al escritorio. El factor --deco-k mantiene la proporcion; no baja de 0,55 para que el trazo siga leyendose. */ .mi-tabla::after{ content:"";position:absolute; inset:calc(-13px*var(--deco-k)) calc(-13px*var(--deco-k)) calc(-9px*var(--deco-k)) calc(-13px*var(--deco-k)); /* como en Retos: en el Figma la moldura se dibuja SOBRE la tabla. Con z-index:-1 el cuerpo blanco tapaba la mitad del trazo y solo se veia una astilla de 5,5 px del corchete. */ pointer-events:none;z-index:2;background-repeat:no-repeat; background-image:url("data:image/svg+xml,"),url("data:image/svg+xml,"),url("data:image/svg+xml,"), url("data:image/svg+xml,"),url("data:image/svg+xml,"),url("data:image/svg+xml,"); background-size:calc(100.38px*var(--deco-k)) calc(108.5px*var(--deco-k)), calc(100px*var(--deco-k)) calc(108.5px*var(--deco-k)), calc(108.5px*var(--deco-k)) calc(100.38px*var(--deco-k)), calc(108.5px*var(--deco-k)) calc(100px*var(--deco-k)), calc(102px*var(--deco-k)) calc(10px*var(--deco-k)), calc(102px*var(--deco-k)) calc(10px*var(--deco-k)); background-position: left calc(7.12px*var(--deco-k)) top calc(7.5px*var(--deco-k)), right calc(8px*var(--deco-k)) top calc(7.5px*var(--deco-k)), left calc(7px*var(--deco-k)) bottom calc(6.62px*var(--deco-k)), right calc(8.5px*var(--deco-k)) bottom calc(8px*var(--deco-k)), center top calc(9px*var(--deco-k)), center bottom calc(8px*var(--deco-k));} .mi-tabla-head,.mi-tabla-body{position:relative;z-index:1;} .mi-fase-num .elementor-widget-heading{width:100%;} /* --- preguntas frecuentes (nested accordion) --------------------- */ .mi-faq .e-n-accordion-item, .mi-faq .e-n-accordion-item-title, .mi-faq details.e-n-accordion-item{background:#EEF4F4 !important;border:0;} .mi-faq .e-n-accordion-item{border-radius:30px;margin-bottom:10px;overflow:hidden; box-shadow:none;} .mi-faq .e-n-accordion-item:last-child{margin-bottom:0;} .mi-faq details[open]{margin-bottom:21px;} .mi-faq .e-n-accordion-item-title{ min-height:73px;padding:17px 45px 17px 38px;gap:20px;cursor:pointer; display:flex;align-items:center;justify-content:space-between;border:0;} .mi-faq .e-n-accordion-item-title-text{flex:1 1 auto;text-align:left; font-family:"Carlito",sans-serif;font-size:18px;font-weight:700;line-height:1; letter-spacing:-.36px;color:#000000;} .mi-faq .e-n-accordion-item-title-icon{ width:38px;height:38px;min-width:38px;border-radius:50%;background:#76BC21; display:flex;align-items:center;justify-content:center;} .mi-faq .e-n-accordion-item-title-icon svg, .mi-faq .e-n-accordion-item-title-icon i{width:15px;height:15px;font-size:15px;fill:#000000;color:#000000;} .mi-faq details[open] > .e-n-accordion-item-title{padding-bottom:17px;border-bottom:0;} /* --- formulario -------------------------------------------------- */ /* TRAMPA: la capa de fondo de un contenedor es su ::before, absoluto, SIN pointer-events:none, y se dibuja por encima de los hijos que no esten posicionados. Peor: se activa con content:var(--background-overlay), y las variables CSS HEREDAN, asi que la capa de la seccion se cuela en TODOS los contenedores de dentro (la tarjeta incluida) y cada ::before se come los clics de sus etiquetas y campos. Medido con elementFromPoint: sobre el centro del input respondia el div de la tarjeta, no el input. Se corta por los dos lados: la capa de la seccion deja pasar el puntero y la herencia se anula en los contenedores hijos. */ .mi-cta-form::before{pointer-events:none;} .mi-cta-form .e-con::before{content:none;} .mi-form-card{position:relative;z-index:2;} .mi-form .elementor-field-group{margin-bottom:0;} .mi-form .elementor-field-label{ margin-bottom:6px;font-family:"Carlito",sans-serif;font-size:12px;font-weight:700;} .mi-form .elementor-field-textual{ height:40px;padding:0 20px; font-family:"Carlito",sans-serif;font-size:12px;font-weight:700;} .mi-form textarea.elementor-field-textual{height:90px;padding:12px 20px;line-height:1.4; resize:none;} .mi-form .elementor-field-textual::placeholder{color:#A09E9E !important;opacity:1;} .mi-form select.elementor-field-textual{color:#A09E9E !important;} .mi-form .elementor-field-textual:focus{border-color:#76BC21 !important;outline:2px solid rgba(118,188,33,.25);} .mi-form .elementor-field-type-acceptance .elementor-field-option{ display:flex;gap:10px;align-items:flex-start;cursor:pointer;padding:6px 0;min-height:32px;} .mi-form .elementor-field-type-acceptance input[type=checkbox]{ /* el Figma marcaba 11px, pero por debajo de 18 el objetivo de clic no es usable */ width:18px !important;height:18px !important;min-width:18px;margin:1px 0 0 0; border:1px solid #6B6969 !important;border-radius:3px !important; appearance:none;-webkit-appearance:none;background:#fff !important;cursor:pointer;flex:0 0 18px; position:relative;display:inline-block;} .mi-form .elementor-field-type-acceptance input[type=checkbox]:checked{ background:#76BC21 !important;border-color:#76BC21 !important;} .mi-form .elementor-field-type-acceptance input[type=checkbox]:checked::after{ content:"";position:absolute;left:5px;top:1px;width:5px;height:10px; border:solid #fff !important;border-width:0 2px 2px 0 !important;transform:rotate(45deg);} .mi-form .elementor-field-type-acceptance input[type=checkbox]:focus-visible{ outline:2px solid #76BC21;outline-offset:2px;} .mi-form .elementor-field-type-acceptance label{ font-family:"Carlito",sans-serif;font-size:12px;font-weight:400;line-height:1.4; color:#6B6969 !important;cursor:pointer;flex:1 1 auto;} .mi-form .elementor-field-type-submit{margin-top:0;} .mi-form .elementor-button[type=submit]{width:100%;min-height:46px;border-radius:21px;} /* barra de progreso: 22px para que el porcentaje se lea */ .mi-form .e-form__indicators__indicator__progress{ height:22px !important;border-radius:11px !important;overflow:hidden;background:#EEF4F4;} .mi-form .e-form__indicators__indicator__progress__meter{ height:22px !important;border-radius:11px !important;background:#76BC21; font-family:"Carlito",sans-serif;font-size:12px;font-weight:700;color:#000000; display:flex;align-items:center;justify-content:flex-end;padding-right:10px; min-width:44px;transition:width .3s ease;} .mi-form .e-form__indicators{margin-bottom:18px;} /* --- red de seguridad: geometrias fijas que el panel de contenedor no siempre expone (alturas exactas y centrado) ---------------- */ .mi-tabla,.mi-faq-wrap{margin-left:auto;margin-right:auto;} .mi-tl-bar{min-height:270px;align-self:stretch;} .mi-bars > .e-con,.mi-foot-bars .e-con{min-height:10px;} .mi-vline{min-height:44px;} .mi-vline-lg{min-height:67px;} .mi-foot-logos .elementor-widget-text-editor{flex:0 0 auto;} .mi-programa-row{--align-items:flex-start;} .mi-foto-col{align-self:flex-start;} .mi-fase-num{min-height:38px;} /* el numero de fase se centra en su circulo en TODAS las vistas: las reglas de text-align:left de tablet y movil alcanzaban tambien a este
. Especificidad 0,3,1 para ganarles sin depender del orden de los .mi-fase-row .mi-fase-num{display:flex !important;align-items:center !important; justify-content:center !important;} .mi-badge{margin-left:auto;margin-right:auto;} /* --- footer ------------------------------------------------------ */ .mi-foot-divider{margin-top:37px;} .mi-footer .mi-vline{align-self:center;} /* --- tablet ------------------------------------------------------ */ /* ================= RESPONSIVE ===================================== UN SOLO bloque por anchura. Antes habia dos de 1024, dos de 767 y dos de 430: el mismo .elementor-2005 .elementor-element.elementor-element-1d304783 se declaraba en ambos y ganaba el ultimo sin que se viera. La cabecera llevaba flex-direction:column y column-reverse a la vez. La disposicion va ahora en los controles nativos del contenedor (editables en Elementor); aqui solo queda lo que no tiene control: pseudoelementos, hijos internos de widget y ajustes finos. =============================================================== */ .elementor-element-4502f26f{margin-left:auto;margin-right:auto;--margin-left:auto;--margin-right:auto;} .elementor-element-777cc4ea{width:100%;--width:100%;} .elementor-element-338f3f83{width:100%;--width:100%;} .elementor-element-1ff44b28{width:100%;--width:100%;} /* --- preguntas frecuentes (nested accordion) --------------------- */ .mi-faq .e-n-accordion-item, .mi-faq .e-n-accordion-item-title, .mi-faq details.e-n-accordion-item{background:#EEF4F4 !important;border:0;} .mi-faq .e-n-accordion-item{border-radius:30px;margin-bottom:10px;overflow:hidden; box-shadow:none;} .mi-faq .e-n-accordion-item:last-child{margin-bottom:0;} .mi-faq details[open]{margin-bottom:21px;} .mi-faq .e-n-accordion-item-title{ min-height:73px;padding:17px 45px 17px 38px;gap:20px;cursor:pointer; display:flex;align-items:center;justify-content:space-between;border:0;} .mi-faq .e-n-accordion-item-title-text{flex:1 1 auto;text-align:left; font-family:"Carlito",sans-serif;font-size:18px;font-weight:700;line-height:1; letter-spacing:-.36px;color:#000000;} .mi-faq .e-n-accordion-item-title-icon{ width:38px;height:38px;min-width:38px;border-radius:50%;background:#76BC21; display:flex;align-items:center;justify-content:center;} .mi-faq .e-n-accordion-item-title-icon svg, .mi-faq .e-n-accordion-item-title-icon i{width:15px;height:15px;font-size:15px;fill:#000000;color:#000000;} .mi-faq details[open] > .e-n-accordion-item-title{padding-bottom:17px;border-bottom:0;} .elementor-element-cea9be3{margin-left:auto;margin-right:auto;--margin-left:auto;--margin-right:auto;} /* --- formulario -------------------------------------------------- */ /* TRAMPA: la capa de fondo de un contenedor es su ::before, absoluto, SIN pointer-events:none, y se dibuja por encima de los hijos que no esten posicionados. Peor: se activa con content:var(--background-overlay), y las variables CSS HEREDAN, asi que la capa de la seccion se cuela en TODOS los contenedores de dentro (la tarjeta incluida) y cada ::before se come los clics de sus etiquetas y campos. Medido con elementFromPoint: sobre el centro del input respondia el div de la tarjeta, no el input. Se corta por los dos lados: la capa de la seccion deja pasar el puntero y la herencia se anula en los contenedores hijos. */ .mi-cta-form::before{pointer-events:none;} .mi-cta-form .e-con::before{content:none;} .mi-form-card{position:relative;z-index:2;} .mi-form .elementor-field-group{margin-bottom:0;} .mi-form .elementor-field-label{ margin-bottom:6px;font-family:"Carlito",sans-serif;font-size:12px;font-weight:700;} .mi-form .elementor-field-textual{ height:40px;padding:0 20px; font-family:"Carlito",sans-serif;font-size:12px;font-weight:700;} .mi-form textarea.elementor-field-textual{height:90px;padding:12px 20px;line-height:1.4; resize:none;} .mi-form .elementor-field-textual::placeholder{color:#A09E9E !important;opacity:1;} .mi-form select.elementor-field-textual{color:#A09E9E !important;} .mi-form .elementor-field-textual:focus{border-color:#76BC21 !important;outline:2px solid rgba(118,188,33,.25);} .mi-form .elementor-field-type-acceptance .elementor-field-option{ display:flex;gap:10px;align-items:flex-start;cursor:pointer;padding:6px 0;min-height:32px;} .mi-form .elementor-field-type-acceptance input[type=checkbox]{ /* el Figma marcaba 11px, pero por debajo de 18 el objetivo de clic no es usable */ width:18px !important;height:18px !important;min-width:18px;margin:1px 0 0 0; border:1px solid #6B6969 !important;border-radius:3px !important; appearance:none;-webkit-appearance:none;background:#fff !important;cursor:pointer;flex:0 0 18px; position:relative;display:inline-block;} .mi-form .elementor-field-type-acceptance input[type=checkbox]:checked{ background:#76BC21 !important;border-color:#76BC21 !important;} .mi-form .elementor-field-type-acceptance input[type=checkbox]:checked::after{ content:"";position:absolute;left:5px;top:1px;width:5px;height:10px; border:solid #fff !important;border-width:0 2px 2px 0 !important;transform:rotate(45deg);} .mi-form .elementor-field-type-acceptance input[type=checkbox]:focus-visible{ outline:2px solid #76BC21;outline-offset:2px;} .mi-form .elementor-field-type-acceptance label{ font-family:"Carlito",sans-serif;font-size:12px;font-weight:400;line-height:1.4; color:#6B6969 !important;cursor:pointer;flex:1 1 auto;} .mi-form .elementor-field-type-submit{margin-top:0;} .mi-form .elementor-button[type=submit]{width:100%;min-height:46px;border-radius:21px;} /* barra de progreso: 22px para que el porcentaje se lea */ .mi-form .e-form__indicators__indicator__progress{ height:22px !important;border-radius:11px !important;overflow:hidden;background:#EEF4F4;} .mi-form .e-form__indicators__indicator__progress__meter{ height:22px !important;border-radius:11px !important;background:#76BC21; font-family:"Carlito",sans-serif;font-size:12px;font-weight:700;color:#000000; display:flex;align-items:center;justify-content:flex-end;padding-right:10px; min-width:44px;transition:width .3s ease;} .mi-form .e-form__indicators{margin-bottom:18px;} /* ===================================================================== NOTA sobre el FAQ, para que no se vuelva a tocar sin querer Aqui hubo un bloque que le ponia al panel del acordeon padding 0/38/54/38 y una sangria de 229 px al texto, sacados del Figma. Paola lo rechazo: en la pagina real deja huecos que no debe tener. El FAQ se queda tal y como viene de su export estable, sin CSS anadido por nosotros. Si alguna vez hay que darle estilo al panel, la unica via valida es por ESTRUCTURA y anclada al widget: .mi-faq .e-n-accordion-item > .e-con Nunca por una clase puesta en el contenedor del panel: Elementor la borra al editar los items. Es el mismo .elementor-2005 .elementor-element.elementor-element-1d304783 que usa Elementor en su control de padding (nested-accordion.php, linea 496), que va con :where() y por tanto con especificidad cero. ===================================================================== */ /* --- casillas: el estado marcado no se veia ---------------------------- */ /* Elementor emite el color de fondo de los campos con esta forma: .elementor-1497 .elementor-element.elementor-element-XXXX .elementor-field-group .elementor-field:not(.elementor-select-wrapper) Son SEIS clases (0,6,0) y la casilla lleva .elementor-field, asi que ese background:#FFFFFF le ganaba a nuestro :checked, que solo suma 0,4,1. La casilla se quedaba blanca al marcarla y parecia que el clic no hacia nada: el clic funcionaba, lo que faltaba era el acuse de recibo. Con !important deja de ser una pelea de especificidad. Afecta igual a la seleccion multiple de retos, que tambien son casillas. */ .mi-form .elementor-field-type-acceptance input[type=checkbox], .mi-form .elementor-field-type-checkbox input[type=checkbox]{ background-color:#FFFFFF !important;} .mi-form .elementor-field-type-acceptance input[type=checkbox]:checked, .mi-form .elementor-field-type-checkbox input[type=checkbox]:checked{ background-color:#76BC21 !important;border-color:#76BC21 !important;} .mi-form .elementor-field-type-acceptance input[type=checkbox]:checked::after, .mi-form .elementor-field-type-checkbox input[type=checkbox]:checked::after{ border-color:#FFFFFF !important;} /* --- CTA: la tarjeta del formulario ------------------------------------ */ /* A 1440 el texto va a la izquierda y la tarjeta a la derecha. Por debajo la fila se apila, pero la tarjeta seguia anclada a la izquierda con 455 px fijos y dejaba un vacio enorme a su derecha. */ @media (max-width:767px){.elementor-element-2de99f0b{width:fit-content;--width:fit-content;max-width:100%;}} @media (max-width:767px){.elementor-element-4a9c9f89{width:fit-content;--width:fit-content;max-width:100%;}} @media (max-width:1024px){.elementor-element-5df436d{width:100%;--width:100%;}} @media (max-width:767px){.elementor-element-5df436d{width:100%;--width:100%;}} @media. */ .mi-fase-row .mi-fase-num .elementor-widget-heading p{ text-align:center !important;line-height:1 !important;margin:0 !important;} @media (max-width:1024px){.elementor-element-408f3793{width:100%;--width:100%;}} @media (max-width:767px){.elementor-element-408f3793{width:100%;--width:100%;}} @media (max-width:767px){.elementor-element-12da624e{width:fit-content;--width:fit-content;max-width:100%;}} @media (max-width:767px){.elementor-element-48b9d90d{width:fit-content;--width:fit-content;max-width:100%;}} @media (max-width:767px){.elementor-element-218c2b13{width:fit-content;--width:fit-content;max-width:100%;}} @media (max-width:767px){.elementor-element-349c16f7{width:fit-content;--width:fit-content;max-width:100%;}} @media (max-width:767px){.elementor-element-41fcfff0{width:fit-content;--width:fit-content;max-width:100%;}} @media (max-width:1024px){.elementor-element-59589353{width:100%;--width:100%;}} @media (max-width:767px){.elementor-element-59589353{width:100%;--width:100%;}} @media (max-width:1024px){.elementor-element-4e569ded{width:auto;--width:auto;max-width:100%;}} @media (max-width:767px){.elementor-element-4e569ded{width:auto;--width:auto;max-width:100%;}} @media (max-width:1024px){.elementor-element-165c3ad4{width:auto;--width:auto;max-width:100%;}} @media (max-width:767px){.elementor-element-165c3ad4{width:auto;--width:auto;max-width:100%;}} @media (max-width:1024px){.elementor-element-e08ec19{width:auto;--width:auto;max-width:100%;}} @media (max-width:767px){.elementor-element-e08ec19{width:auto;--width:auto;max-width:100%;}} @media (max-width:1024px){.elementor-element-24ad67b6{width:auto;--width:auto;max-width:100%;}} @media (max-width:767px){.elementor-element-24ad67b6{width:auto;--width:auto;max-width:100%;}} @media (max-width:1024px){.elementor-element-6eab7483{width:auto;--width:auto;max-width:100%;}} @media (max-width:767px){.elementor-element-6eab7483{width:auto;--width:auto;max-width:100%;}} @media (max-width:1024px){.elementor-element-52221e93{width:auto;--width:auto;max-width:100%;}} @media (max-width:767px){.elementor-element-52221e93{width:auto;--width:auto;max-width:100%;}} @media (max-width:1024px){.elementor-element-4502f26f{width:100%;--width:100%;}} @media (max-width:767px){.elementor-element-4502f26f{width:100%;--width:100%;}} @media (max-width:767px){.elementor-element-381972c{width:33%;--width:33%;}} @media (max-width:767px){.elementor-element-5697729e{width:34%;--width:34%;}} @media (max-width:767px){.elementor-element-22f79e67{width:33%;--width:33%;}} @media (max-width:767px){.elementor-element-440d6a1a{width:100%;--width:100%;}} @media (max-width:767px){.elementor-element-101ceab5{width:100%;--width:100%;}} @media (max-width:767px){.elementor-element-18512daf{width:100%;--width:100%;}} @media (max-width:767px){.elementor-element-56a5c25f{width:33%;--width:33%;}} @media (max-width:767px){.elementor-element-1ee369b7{width:34%;--width:34%;}} @media (max-width:767px){.elementor-element-6374796b{width:33%;--width:33%;}} @media (max-width:767px){.elementor-element-4e6e1344{width:100%;--width:100%;}} @media (max-width:767px){.elementor-element-1a122ed2{width:100%;--width:100%;}} @media (max-width:767px){.elementor-element-7ab43fd3{width:100%;--width:100%;}} @media (max-width:767px){.elementor-element-1e806afa{width:100%;--width:100%;}} @media (max-width:767px){.elementor-element-7fd926b0{width:100%;--width:100%;}} @media (max-width:767px){.elementor-element-73677b6a{width:100%;--width:100%;}} @media (max-width:767px){.elementor-element-4a7eb893{width:100%;--width:100%;}} @media (max-width:767px){.elementor-element-4f190925{width:100%;--width:100%;}} @media (max-width:767px){.elementor-element-659656a6{width:100%;--width:100%;}} @media (max-width:767px){.elementor-element-4220752b{width:33%;--width:33%;}} @media (max-width:767px){.elementor-element-28556e2c{width:34%;--width:34%;}} @media (max-width:767px){.elementor-element-515a59a1{width:33%;--width:33%;}} @media (max-width:767px){.elementor-element-2dacc453{width:100%;--width:100%;}} @media (max-width:767px){.elementor-element-707195d2{width:100%;--width:100%;}} @media (max-width:767px){.elementor-element-30444e66{width:100%;--width:100%;}} @media (max-width:767px){.elementor-element-52001f84{width:100%;--width:100%;}} @media (max-width:767px){.elementor-element-6d95d244{width:100%;--width:100%;}} @media (max-width:767px){.elementor-element-3e4d95f6{width:100%;--width:100%;}} @media (max-width:1024px){.elementor-element-cea9be3{width:100%;--width:100%;}} @media (max-width:767px){.elementor-element-cea9be3{width:100%;--width:100%;}} @media (max-width:1024px){ /* los anchos del diseno (330/364/282 = 976) no caben por debajo de 1024 y la columna de fechas se salia de la caja. Se reparten en proporcion y la de fechas se lleva 240: "26 de octubre a 15 de diciembre de 2026" mide 270 a 16 px, asi que con 190 partia mal y con 240 entra en dos renglones. */ .mi-tabla-rotulos > .e-con,.mi-fase-row > .e-con{width:auto !important; --width:auto !important;max-width:none !important;flex:1 1 0;min-width:0;} .mi-tabla-rotulos > .e-con:first-child,.mi-fase-row > .e-con:first-child{ flex:0 0 96px;padding-left:16px !important;} .mi-fase-row > .e-con:last-child,.mi-tabla-rotulos > .e-con:last-child{ flex:0 0 240px;} /* y el texto de dentro tampoco puede llevar ancho fijo */ .mi-fase-row .elementor-widget-text-editor{width:auto !important; --width:auto !important;max-width:100% !important;} /* nada se recorta: si algo no cabe, que parta, no que desaparezca */ .mi-tabla,.mi-tabla-body,.mi-fase-row{overflow:visible !important;} } @media (max-width:767px){ /* con la fila en ficha los rotulos de columna ya no describen ninguna columna, y "NOMBRE DE LA ETAPA" caia en 75 px partiendo las palabras */ .mi-tabla-rotulos{display:none;} /* la fila pasa a ficha: numero y etapa arriba, fecha debajo */ .mi-fase-row{display:grid !important;grid-template-columns:38px 1fr; grid-template-areas:"num etapa" ". fecha";gap:4px 14px;align-items:center; padding:18px 22px !important;min-height:0 !important;} .mi-fase-row > .e-con:nth-child(1){grid-area:num;padding:0 !important;} .mi-fase-row > .e-con:nth-child(2){grid-area:etapa;padding:0 !important;} .mi-fase-row > .e-con:nth-child(3){grid-area:fecha;padding:0 !important;} .mi-fase-row p{text-align:left !important;} /* la fecha se alineaba centrada bajo la etapa y quedaba descolocada: los dos bloques de la ficha se estiran y arrancan en el mismo margen */ .mi-fase-row > .e-con{--align-items:stretch !important; align-items:stretch !important;text-align:left !important;} .mi-fase-row .elementor-widget-text-editor{width:100% !important; --width:100% !important;max-width:100% !important;} } @media (max-width:430px){ .mi-fase-row{grid-template-columns:32px 1fr;padding:14px 16px !important;} } @media (max-width:1024px){ .mi-cta-form .mi-form-card,.mi-cta-form .mi-form{ width:100% !important;--width:100% !important;max-width:560px !important; margin-left:auto !important;margin-right:auto !important;} .mi-cta-form .mi-cta-texto{text-align:center;} .mi-cta-form .mi-cta-texto p{margin-left:auto;margin-right:auto;} } @media (max-width:1024px){.elementor-element-34b5f5fc{width:100%;--width:100%;}} @media (max-width:767px){.elementor-element-34b5f5fc{width:100%;--width:100%;}} @media (max-width:1024px){.elementor-element-7a1def05{width:100%;--width:100%;}} @media (max-width:767px){.elementor-element-7a1def05{width:100%;--width:100%;}} /* El corchete de la tarjeta va en ::after con z-index 2, encima de la tarjeta como en el Figma. El contenido sube por encima para que nunca lo tape. */ /* Y la linea decorativa de la SECCION cruzaba el texto: se aisla la seccion y el circuito pasa detras de todo su contenido. */ .mi-retos{isolation:isolate;} .mi-retos::after{z-index:-1 !important;} .mi-reto-card > *{position:relative;z-index:3;} /* Cabecera en movil: el espaciador de 60 y la pildora de 903 no caben en 393. El espaciador desaparece y la pildora se ajusta, como el logo. */ @media (max-width:1024px){ .mi-nav-spacer{display:none;} .mi-nav-pill{width:auto !important;--width:auto !important;flex:1 1 auto;min-width:0;} .mi-logo-metro{flex:0 0 auto;} } /* En el Figma las seis tarjetas miden 210 y el boton esta a la misma altura en todas. Con el contenido real los nombres ocupan 1, 2 o 3 renglones y el boton caia a alturas distintas dentro de la misma fila (501, 468 y 484). Pegado al fondo, la rejilla iguala las tarjetas de cada fila y los botones vuelven a alinearse, que es lo que hace el diseno. */ /* Las seis tarjetas SIEMPRE del mismo alto, se cambie el texto que se cambie. El control de filas del contenedor ya emite repeat(N,1fr), pero eso solo iguala las FILAS: para que cada tarjeta ocupe su fila entera hace falta que se estire, y basta un align-self heredado para que no lo haga. Se fuerza en los tres sitios donde puede fallar. */ .mi-retos-grid{align-items:stretch !important;--align-items:stretch !important;} .mi-retos-grid > .e-con{align-self:stretch !important;height:100% !important; min-width:0;} .mi-reto-card{display:flex !important;flex-direction:column !important;} /* con las tarjetas igualadas, el boton tiene que ir al fondo o queda flotando a media altura en las que llevan menos texto. El hueco del Figma (15 px) pasa a ser el minimo. */ .mi-reto-card .elementor-widget-button{margin-top:auto !important;} /* VER MAS: el Figma le da 57 px de ancho y el texto mide 53. Con dos pixeles de margen por lado, cualquier diferencia de render lo parte en dos lineas. nowrap lo impide sin tocar el ancho del diseno. */ .mi-btn-mini .elementor-button{white-space:nowrap;}/* End custom CSS */