/* Theme Name: Hello Elementor Child (Fixed) Theme URI: https://elementor.com/ Description: Child theme for Hello Elementor with robust enqueue. Author: You Template: hello-elementor Version: 2.0.0 Text Domain: hello-elementor-child-fixed */ /* TEST RULE: If the child CSS is loading, the body outline will appear temporarily. */ /* =========================================== TIPOGRAFÍA FLUIDA (500px ↔ 1440px) - Fallback por viewport (siempre activo) - Container Queries (opcional, si el navegador soporta) - Diseñado para Hello + Elementor ------------------------------------------- Cómo funciona: clamp(MINpx, MINpx + (delta * progreso), MAXpx) progreso = (100vw - 500px) / (1440 - 500) Cambia MIN/MAX por etiqueta en :root y listo. =========================================== */ :root{ /* ----- Rango de fluididad global ----- */ --w-min: 500; /* ancho mínimo donde empieza a escalar */ --w-max: 1440; /* ancho máximo donde deja de escalar */ --w-range: calc(var(--w-max) - var(--w-min)); /* ----- Base del documento ----- */ --fs-base-min: 12; /* px a 500px */ --fs-base-max: 16; /* px a 1440px */ /* ----- Titulares ----- */ --h1-min: 36; --h1-max: 64; /* pedido: 36 → 48 */ --h2-min: 30; --h2-max: 44; --h3-min: 16; --h3-max: 24; --h4-min: 16; --h4-max: 20; --h5-min: 14; --h5-max: 16; /* ----- Texto, botones y menús ----- */ --p-min: 14; --p-max: 16; --btn-min: 14; --btn-max: 18; --menu-min:14; --menu-max:16; --menusecondary-min:12; --menusecondary-max:16; /* ----- Slide heading (ej. hero/slider full) ----- */ --slideH-min: 32; --slideH-max: 62; /* Line-height recomendados (ajusta a gusto) */ --lh-title: 1.15; --lh-text: 1.6; /*Notas , Small*/ --notes-min: 5; --fs-base-max: 12; } /* ------------------------------------------- Helper de progreso (viewport) -------------------------------------------- */ @media (min-width: 0px){ :root{ /* Progreso entre 0 y 1 en el rango 500–1440 */ --prog: calc( (100vw - (var(--w-min)*1px)) / var(--w-range) ); } } /* ------------------------------------------- Documento (tamaño base y copy) -------------------------------------------- */ html{ /* Base fluida (12→16) */ font-size: clamp(var(--fs-base-min)*1px, calc(var(--fs-base-min)*1px + ((var(--fs-base-max) - var(--fs-base-min)) * var(--prog))), var(--fs-base-max)*1px); } body{ font-size: clamp(var(--p-min)*1px, calc(var(--p-min)*1px + ((var(--p-max) - var(--p-min)) * var(--prog))), var(--p-max)*1px); line-height: var(--lh-text); } /* ------------------------------------------- Compatibilidad con widgets de títulos Elementor (aplica tamaños H* también a .elementor-heading-title) -------------------------------------------- .elementor-widget-heading h1.elementor-heading-title, .elementor-heading-title.h1{ font-size: inherit; line-height: inherit; } .elementor-widget-heading h2.elementor-heading-title, .elementor-heading-title.h2{ font-size: inherit; line-height: inherit; } .elementor-widget-heading h3.elementor-heading-title, .elementor-heading-title.h3{ font-size: inherit; line-height: inherit; } .elementor-widget-heading h4.elementor-heading-title, .elementor-heading-title.h4{ font-size: inherit; line-height: inherit; } .elementor-widget-heading h5.elementor-heading-title, .elementor-heading-title.h5{ font-size: inherit; line-height: inherit; } */ /* ------------------------------------------- Titulares HTML -------------------------------------------- */ h1, .elementor-widget-heading h1.elementor-heading-title, .elementor-heading-title.h1{ font-size: clamp(var(--h1-min)*1px, calc(var(--h1-min)*1px + ((var(--h1-max) - var(--h1-min)) * var(--prog))), var(--h1-max)*1px); line-height: var(--lh-title); } h2, .elementor-widget-heading h2.elementor-heading-title, .elementor-heading-title.h2{ font-size: clamp(var(--h2-min)*1px, calc(var(--h2-min)*1px + ((var(--h2-max) - var(--h2-min)) * var(--prog))), var(--h2-max)*1px); line-height: var(--lh-title); } h3, .elementor-widget-heading h3.elementor-heading-title, .elementor-heading-title.h3{ font-size: clamp(var(--h3-min)*1px, calc(var(--h3-min)*1px + ((var(--h3-max) - var(--h3-min)) * var(--prog))), var(--h3-max)*1px); line-height: var(--lh-title); } h4, .elementor-widget-heading h4.elementor-heading-title, .elementor-heading-title.h4{ font-size: clamp(var(--h4-min)*1px, calc(var(--h4-min)*1px + ((var(--h4-max) - var(--h4-min)) * var(--prog))), var(--h4-max)*1px); line-height: 1.3; } h5, .elementor-widget-heading h5.elementor-heading-title, .elementor-heading-title.h5{ font-size: clamp(var(--h5-min)*1px, calc(var(--h5-min)*1px + ((var(--h5-max) - var(--h5-min)) * var(--prog))), var(--h5-max)*1px); line-height: 1.35; } /* ------------------------------------------- Copy general -------------------------------------------- */ p, li{ line-height: var(--lh-text); } /* ------------------------------------------- Botones y menús (Elementor + genéricos) -------------------------------------------- */ button, input[type="submit"], a.elementor-button, .elementor-button{ font-size: clamp(var(--btn-min)*1px, calc(var(--btn-min)*1px + ((var(--btn-max) - var(--btn-min)) * var(--prog))), var(--btn-max)*1px); } .mainmenu li a, .secondarymenu li a{ font-size: clamp(var(--menusecondary-min)*1px, calc(var(--menusecondary-min)*1px + ((var(--menusecondary-max) - var(--menusecondary-min)) * var(--prog))), var(--menusecondary-max)*1px); } /* ========================================================================= OPCIONAL: CONTAINER QUERIES (para secciones que deben escalar por el ancho del CONTENEDOR y no por el viewport) - Soportado en navegadores modernos. - Útil en sliders, contenedores 100% o layouts complejos. Uso: 1) Añade la clase .cq a la sección/columna/widget que será contenedor. 2) Ajusta min/max y reglas internas según necesidad. =========================================================================== */ @supports (container-type: inline-size){ /* 1) Marca cualquier caja como “contenedor” de consulta */ .cq{ container-type: inline-size; } /* 2) Ejemplo: titular de slider escala 36→72 según el ancho del contenedor */ .cq .slide-title{ font-size: clamp(var(--slideH-min)*1px, calc(var(--slideH-min)*1px + ((var(--slideH-max) - var(--slideH-min)) * ((100cqi - (var(--w-min)*1px)) / var(--w-range)))), var(--slideH-max)*1px); line-height: var(--lh-title); } /* Topes duros cuando el contenedor es <500 o >1440 */ @container (max-width: 500px){ .cq .slide-title{ font-size: calc(var(--slideH-min)*1px); } } @container (min-width: 1440px){ .cq .slide-title{ font-size: calc(var(--slideH-max)*1px); } } /* Ejemplo específico para Elementor Slides */ .elementor-slides .swiper-slide-inner{ container-type: inline-size; } .elementor-slides .swiper-slide-inner .elementor-slide-heading{ font-size: clamp(var(--slideH-min)*1px, calc(var(--slideH-min)*1px + ((var(--slideH-max) - var(--slideH-min)) * ((100cqi - (var(--w-min)*1px)) / var(--w-range)))), var(--slideH-max)*1px); line-height: var(--lh-title); margin-top:0; } } /* ========================================================================= NOTAS: - Para cambiar tamaños: edita solo las variables --*-min / --*-max. - Elementor (Ajustes → Avanzado): usa “Archivo externo” y luego Herramientas → “Regenerar CSS y datos”. - Si un widget trae tamaños en línea, tus reglas pueden necesitar mayor especificidad (o eliminar el tamaño en el widget). =========================================================================== */ @media (max-width: 500px){ small{ font-size:60%; } }