/* * Franjas: el EFECTO de los contenedores de Elementor, sin portar Elementor. * * En WordPress la cabecera y el pie viven dentro de contenedores `.e-con` * (plantillas 4253 y 40) cuyo aspecto sale de decenas de variables CSS del * framework de contenedores. Aqui se escribe el resultado computado, medido en * produccion a 1440 / 834 / 390 px. * * REPRODUCIR LA FRANJA DE LA CABECERA NO ES OPCIONAL * Por encima de 981 px la cabecera se sale del contenedor con el truco clasico * de ancho completo: width:100vw + margin-left:50% + translateX(-50%). Ese 50% * se calcula sobre el ANCHO DEL PADRE. En produccion el padre es el interior * del contenedor -1140 px-, asi que margin-left resulta 570px. Si la cabecera * colgara directamente del , el mismo 50% daria 712,5px y, aunque acabe * en el mismo sitio en pantalla, la caja de maquetacion se desplaza y el * scrollWidth del se dispara. Por eso la cabecera lleva su franja y su * interior, igual que en produccion. * * Valores reproducidos: * franja display flex columna, ancho 100%, max-width 100% * interior max-width min(100%, --ob-con-max), centrado, ancho 100%, * flex columna, gap 20px * --ob-con-max 1140px, 1024px por debajo de 1025px, 767px por debajo de 768px * (kit 6: --container-max-width) * padding por defecto 10px (Elementor: --container-default-padding-*) * * Franjas concretas: * cabecera .elementor-element-8add98c margenes y padding a 0 * zonas .elementor-element-1a42347 fondo var(--e-global-color-secondary) * padding en linea 10px, interior 10px en bloque * espaciador .elementor-element-eff1140 10px (arriba) * espaciador .elementor-element-dbbf34b 20px (abajo, 0px por debajo de 768px) * oscura .elementor-element-fcb8c2f e-con-full, sin padding * credito .elementor-element-0c0ebab fondo #050505, mismo interior * * ESTO NO ES CSS COPIADO: es una reconstruccion, y por eso se comprueba * midiendo (scripts/validate/huella-prod-header-footer.txt). */ :root { --ob-con-max: 1140px; --ob-con-gap: 20px; --ob-con-pad: 10px; } @media (max-width: 1024px) { :root { --ob-con-max: 1024px; } } @media (max-width: 767px) { :root { --ob-con-max: 767px; } } .ob-band { display: flex; flex-direction: column; width: 100%; max-width: 100%; min-width: 0; position: relative; overflow: visible; } /* * Nivel "widget". En WordPress cada pieza cuelga de un div * .elementor-element.elementor-widget dentro del interior del contenedor. * No es decorativo: al haber un bloque intermedio, la pieza deja de ser un * item flex y su min-height computa 0px en vez de auto, que es justo la * diferencia que se veia al medir la cabecera contra produccion. */ .ob-widget { display: block; width: 100%; max-width: 100%; min-width: 0; } .ob-con-inner { display: flex; flex-direction: column; width: 100%; height: 100%; margin: 0 auto; max-width: min(100%, var(--ob-con-max)); padding-inline: 0; row-gap: var(--ob-con-gap); column-gap: var(--ob-con-gap); } /* --- cabecera: contenedor 8add98c, con todos los margenes y paddings a 0 --- */ .ob-header-band, .ob-header-band > .ob-con-inner { padding: 0; margin-block: 0; } .ob-header-band > .ob-con-inner { margin-inline: auto; } /* --- pie: las tres franjas --- */ .ob-footer-areas-band, .ob-footer-credit-band { padding-inline: var(--ob-con-pad); } .ob-footer-areas-band > .ob-con-inner, .ob-footer-credit-band > .ob-con-inner { padding-block: var(--ob-con-pad); } /* * La franja oscura es e-con-full: no tiene interior, asi que el gap de 20px * vive en la propia franja. Las franjas con caja lo llevan en su interior y * ellas mismas se quedan con gap normal, igual que en produccion. */ .ob-footer-dark-band { padding: 0; row-gap: var(--ob-con-gap); column-gap: var(--ob-con-gap); } .ob-footer-areas-band { background-color: #f9f5f2; } .ob-footer-credit-band { background-color: #050505; } /* Espaciadores: widgets spacer de Elementor. */ .ob-footer-spacer { width: 100%; } .ob-footer-spacer--top { height: 10px; } .ob-footer-spacer--bottom { height: 20px; } @media (max-width: 767px) { .ob-footer-spacer--bottom { height: 0; } } /* * Credito: widget text-editor 59c9fa3. El margen inferior de 14,4px del * parrafo lo pone p{margin-block-end:.9rem} de hello-elementor (base-wp.css). * * El enlace a Bolmia NO lleva color propio: se queda con el a{color:#c36} del * tema, que es exactamente lo que pinta produccion hoy -comprobado: * rgb(204, 51, 102)-. No se "arregla": se reproduce. */ .ob-footer-credit { width: 100%; text-align: center; font-family: 'Montserrat', Sans-serif; font-size: 12px; font-weight: 500; color: #9c9c9c; } /* * Envoltura en movil. Por debajo de 768px Elementor pone flex-wrap:wrap en el * interior de los contenedores, en los e-con-full y en los widgets: * * @media (max-width:767px){.e-con.e-flex{--flex-wrap:var(--flex-wrap-mobile)}} * .e-con.e-flex > .e-con-inner{flex-wrap:var(--flex-wrap)} * .elementor-element:where(.e-con-full,.elementor-widget){flex-wrap:var(--flex-wrap)} * * con --flex-wrap-mobile:wrap. Las franjas con caja NO envuelven * (.e-con-boxed.e-flex{flex-wrap:nowrap}), y por encima de 768px --flex-wrap no * tiene valor, asi que todo vuelve a nowrap. Se reproduce tal cual. */ @media (max-width: 767px) { .ob-con-inner, .ob-footer-dark-band, .ob-widget { flex-wrap: wrap; } } /* * Reclamo del mega-menu: mismo aspecto, sin ser un encabezado. * * En produccion ese texto es un

y su aspecto sale de DOS hojas a la vez: * base-wp.css h1..h6{color:inherit;font-family:inherit;font-weight:500;...} * header.css .ob-mega-panel__aside h3{margin:0;font-size:1.45rem; * line-height:1.08;letter-spacing:-.03em;color:var(--ob-black)} * Al dejar de ser un encabezado deja de recibir las dos, asi que aqui se * escribe el resultado COMPUTADO de esa suma, que es lo que hace el resto de * este fichero con los contenedores de Elementor. * * La regla vive aqui y no en header.css porque header.css es copia literal de * produccion y "npm run extract:global" lo regenera: un cambio a mano * desapareceria en la siguiente extraccion, y sin avisar. * * Comprobado midiendo, no razonando: las 514 propiedades computadas del * elemento coinciden con las del

de produccion a 1440 px, y su caja es la * misma. Lo vigila scripts/validate/test-headings-globales.mjs. */ .ob-mega-panel__heading{margin:0;font-size:1.45rem;font-weight:500;line-height:1.08;letter-spacing:-.03em;color:var(--ob-black)}