/*
Theme Name:     GQ Child Theme
Theme URI:      https://guadronquijano.com
Description:    Núcleo optimizado para proyectos de Guadrón Quijano S.A.S. de C.V.
Author:         Guadrón Quijano S.A.S. de C.V.
Author URI:     https://guadronquijano.com
Template:       Divi
Version:        1.0.0
Text Domain:    gqchild
License:        GNU General Public License v2 or later
License URI:    http://www.gnu.org/licenses/gpl-2.0.html
Tags:           lightweight, modular, optimized, clean
*/

/* =========================================================
   GQ CHILD THEME — ÍNDICE
   1. Variables del proyecto       ← definir en WPCode
   2. @font-face                   ← definir en WPCode
   3. Base HTML
   4. Sistema tipográfico fluido
   5. Correcciones Divi
   6. Bloqueos CSS frontend
   7. Utilidades
========================================================= */


/* =========================================================
   SECCIÓN 1 — VARIABLES DEL PROYECTO
   ⚠️  No editar aquí. Usar WPCode snippet "GQ: Variables del sitio"

   Ejemplo a copiar en WPCode:
   :root {
     --gq-color-primary:   #d2002b;
     --gq-color-secondary: #1f1b23;
     --gq-color-accent:    #ffffff;
     --gq-font-primary:    'Outfit', sans-serif;
   }
========================================================= */


/* =========================================================
   SECCIÓN 2 — @font-face
   ⚠️  No editar aquí. Usar WPCode snippet "GQ: Fuentes del sitio"

   Convenciones:
   - Rutas: /wp-content/themes/gq-child/fonts/nombre.woff2
   - Siempre incluir font-display: swap
   - Solo los pesos que usa el diseño
   - Formato woff2 únicamente
========================================================= */


/* =========================================================
   SECCIÓN 3 — BASE HTML
========================================================= */

html {
    font-size: 16px;
}

body {
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}


/* =========================================================
   SECCIÓN 4 — SISTEMA TIPOGRÁFICO FLUIDO
   Escala Minor Third (1.2) con clamp()
   Sin breakpoints — fluido entre 320px y 1440px
========================================================= */

h1, .h1 {
    font-size: clamp(2.027rem, 4vw + 1rem, 3.052rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
}

h2, .h2 {
    font-size: clamp(1.688rem, 3vw + 0.8rem, 2.441rem);
    line-height: 1.2;
    letter-spacing: -0.015em;
}

h3, .h3 {
    font-size: clamp(1.406rem, 2.5vw + 0.6rem, 1.953rem);
    line-height: 1.25;
    letter-spacing: -0.01em;
}

h4, .h4 {
    font-size: clamp(1.172rem, 2vw + 0.5rem, 1.563rem);
    line-height: 1.3;
}

h5, .h5 {
    font-size: clamp(1rem, 1.5vw + 0.4rem, 1.25rem);
    line-height: 1.35;
}

h6, .h6 {
    font-size: clamp(0.875rem, 1vw + 0.3rem, 1rem);
    line-height: 1.4;
}

p,
.et_pb_text,
.et_pb_module p {
    font-size: clamp(1rem, 1vw + 0.75rem, 1.125rem);
    line-height: 1.7;
    font-weight: 400;
}

small,
.text-small {
    font-size: clamp(0.75rem, 0.5vw + 0.65rem, 0.875rem);
    line-height: 1.5;
}

.lead,
.text-lead {
    font-size: clamp(1.125rem, 1.5vw + 0.8rem, 1.375rem);
    line-height: 1.6;
    font-weight: 400;
}


/* =========================================================
   SECCIÓN 5 — CORRECCIONES DIVI
========================================================= */

/* Forzar font-family del proyecto en todos los módulos Divi.
   La variable --gq-font-primary se define en WPCode. */
body,
body p,
.et_pb_text,
.et_pb_module,
.et_pb_module p,
.et_pb_module h1,
.et_pb_module h2,
.et_pb_module h3,
.et_pb_module h4,
.et_pb_module h5,
.et_pb_module h6 {
    font-family: var(--gq-font-primary, Arial, Helvetica, sans-serif) !important;
}

/* Neutralizar Open Sans hardcodeado en algunos módulos de Divi */
.et-pb-icon,
.et_pb_contact_field input,
.et_pb_contact_field textarea,
.et_pb_contact_field select {
    font-family: var(--gq-font-primary, Arial, Helvetica, sans-serif) !important;
}

/* Quitar el fade/flash en el módulo de código de Divi.
   Divi aplica animaciones de entrada a et_pb_code causando
   un parpadeo visible en la carga inicial. */
.et_pb_code,
.et_pb_code .et_pb_code_inner {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: none !important;
}

/* Neutralizar el outline de focus en contenedores de Divi.
   Divi agrega outline visible en secciones/rows al hacer click
   en el builder, lo que a veces escapa al frontend. */
.et_pb_section:focus,
.et_pb_row:focus,
.et_pb_column:focus,
.et_pb_module:focus {
    outline: none;
}


/* =========================================================
   SECCIÓN 6 — BLOQUEOS CSS FRONTEND

   Esta sección complementa los wp_dequeue_style() del functions.php.
   Algunos estilos de Divi se inyectan inline o muy tarde en el
   ciclo y no pueden bloquearse vía PHP — se neutralizan aquí.

   REGLA: nunca usar !important salvo que Divi lo use primero.
   REGLA: documentar cada bloqueo con la razón exacta.
   REGLA: si un elemento se usa en algún proyecto, comentar
          el bloqueo en ese sitio vía WPCode — no tocar este archivo.
========================================================= */

/* --- 6.1 Animaciones de entrada de Divi ---
   Divi carga animations.css y legacy_animations.css aunque el
   panel de Performance tenga las animaciones desactivadas.
   Se neutralizan aquí para garantizar que el contenido sea
   visible inmediatamente sin depender del panel. */
.et-animated,
.et_pb_animation_top,
.et_pb_animation_bottom,
.et_pb_animation_left,
.et_pb_animation_right,
.et_pb_animation_fade,
.et_animated.et_pb_animation_top,
.et_animated.et_pb_animation_bottom,
.et_animated.et_pb_animation_left,
.et_animated.et_pb_animation_right {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* --- 6.2 Back to top button ---
   Divi genera este elemento en el DOM aunque la opción esté
   desactivada en el panel en ciertas versiones del tema.
   Garantizamos que nunca sea visible. */
#et-back-to-top {
    display: none !important;
}

/* --- 6.3 Magnific Popup overlay ---
   Divi carga magnific_popup.css globalmente para su lightbox.
   Si no se usan galerías con lightbox, el overlay puede
   activarse accidentalmente. Se deshabilita el overlay base. */
.mfp-bg,
.mfp-wrap {
    display: none !important;
}

/* --- 6.4 Post formats ---
   Divi carga post_formats.css en todas las páginas incluyendo
   las construidas con el builder que nunca usan formatos de post.
   Se ocultan los contenedores de formato que no aplican. */
.et_quote_content,
.et_link_content,
.et_audio_content,
.et_video_content {
    display: none;
}

/* --- 6.5 Comentarios de Divi ---
   Si los comentarios están cerrados globalmente en WordPress,
   el módulo de comentarios de Divi puede seguir generando
   espacio visual vacío. */
.et_pb_comments_module:empty {
    display: none;
}

/* --- 6.6 wp-mediaelement ---
   WordPress carga estilos del reproductor nativo cuando detecta
   shortcodes de audio/video. En proyectos sin media nativa
   de WP estos controles nunca aparecen pero ocupan CSS. */
.mejs-container,
.mejs-controls {
    display: none;
}

/* --- 6.7 Secondary navigation de Divi ---
   Divi carga secondary_nav.css cuando hay una barra de
   navegación secundaria habilitada en el panel. Si no se usa,
   el contenedor existe pero debe ser invisible. */
#et-secondary-nav:empty {
    display: none;
}


/* =========================================================
   SECCIÓN 7 — UTILIDADES
========================================================= */

/* Accesibilidad: ocultar visualmente pero legible por screen readers */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Contenedor fluido con max-width controlado */
.gq-container {
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2rem);
}

/* Reset de lista para navegaciones */
.gq-list-reset {
    list-style: none;
    margin: 0;
    padding: 0;
}