/*
Theme Name:   Hello Elementor Child - Publikate Pro
Theme URI:    https://autoadministrable.cl
Description:  Tema hijo de alto rendimiento. Optimizado para Accesibilidad, CLS y SEO.
Author:       SMLN de Publikate.cl
Author URI:   https://publikate.cl
Template:     hello-elementor
Version:      1.0.1
Text Domain:  hello-elementor-child
*/

/* ==============================================================================
   1. VARIABLES Y RESET TÉCNICO (Optimización de Memoria)
   ============================================================================== */
:root {
    --brand-color: #0057ff; /* Ajusta a tu color corporativo principal */
    --text-main: #1d1d1d;
    --bg-light: #ffffff;
    --transition-fast: 0.2s ease-in-out;
}

/* Forzar scroll suave sin necesidad de plugins */
html {
    scroll-behavior: smooth;
}

/* ==============================================================================
   2. FIX CLS (Estabilidad Visual - Nota Google: 0.449 -> 0)
   ============================================================================== */

/* Evitar que el texto "salte" o sea invisible mientras cargan las fuentes de Google */
body, h1, h2, h3, h4, h5, h6, p, a, span {
    font-display: swap !important;
}

/* Reserva de espacio para el logo y evitar saltos en el Header */
.site-logo img, 
.elementor-widget-image img {
    height: auto; /* Mantiene la proporción */
    max-width: 100%;
}

/* Evitar que las imágenes sin cargar deformen el layout */
img {
    content-visibility: auto;
}

/* ==============================================================================
   3. ACCESIBILIDAD (Elevar nota de 50 a 90+)
   ============================================================================== */

/* Mejorar la visibilidad del foco para navegación por teclado (Standard WCAG) */
a:focus, 
button:focus, 
input:focus, 
textarea:focus,
.elementor-button:focus {
    outline: 2px solid var(--brand-color) !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 4px rgba(0, 87, 255, 0.2) !important;
}

/* Asegurar contraste mínimo en textos pequeños (Ajustar según necesidad) */
.elementor-icon-list-text, 
.elementor-post__excerpt {
    color: var(--text-main);
    line-height: 1.6;
}

/* Ocultar elementos de forma accesible para lectores de pantalla */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

/* ==============================================================================
   4. OPTIMIZACIÓN DE ELEMENTOR (Limpieza de "Bloat")
   ============================================================================== */

/* Eliminar sombras pesadas en móviles para mejorar el scroll */
@media (max-width: 767px) {
    .elementor-section, 
    .elementor-column, 
    .elementor-widget-container {
        box-shadow: none !important;
    }
}

/* Evitar overflow horizontal que rompe el responsive */
.elementor-section, .elementor-container {
    max-width: 100vw;
    overflow-x: hidden;
}

/* ==============================================================================
   5. TUS ESTILOS PERSONALIZADOS (Añade aquí tu magia de diseño)
   ============================================================================== */

/* Ejemplo: Botón con efecto moderno sin usar !important */
.pbk-cta-button {
    background-color: var(--brand-color);
    transition: var(--transition-fast);
}

.pbk-cta-button:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
}