/*
Theme Name: Datosfera Hello Elementor Child
Theme URI: https://datosfera.co
Description: Tema hijo de Hello Elementor preparado por Datosfera para InQ House. Contiene sistema visual, utilidades, componentes y personalizaciones del proyecto.
Author: Datosfera
Author URI: https://www.datosfera.co
Template: hello-elementor
Version: 1.5.0
Text Domain: datosfera-hello-elementor-child
*/

/**
 * ==========================================================
 * InQ House — Design System base
 * ==========================================================
 * Este archivo contiene únicamente:
 *  1. Tokens visuales de marca.
 *  2. Base tipográfica y de interfaz.
 *  3. Ajustes globales compatibles con Elementor.
 *  4. Utilidades reutilizables.
 *
 * Fuentes locales:      /assets/css/inq-fonts.css
 * Componentes del sitio: /assets/css/inq-components.css
 * Header / Footer:       /assets/css/inq-header-footer.css
 * Home:                  /assets/css/inq-home.css
 * WooCommerce:           /assets/css/woocommerce.css
 *
 * Evitar colocar CSS específico de una sola sección de Elementor aquí.
 */

/* ==========================================================
   01. TOKENS DE MARCA
   Fuente: Manual de marca InQ House
   ========================================================== */
:root {
    /* Colores oficiales */
    --inq-green-apple: #C5FF93;
    --inq-green-olive: #709140;
    --inq-cream: #FFFAE0;
    --inq-espresso: #472506;
    --inq-terracotta: #C33F2D;
    --inq-white: #FFFFFF;
    --inq-black: #0F0F0E;

    /* Colores semánticos */
    --inq-color-primary: var(--inq-espresso);
    --inq-color-secondary: var(--inq-green-olive);
    --inq-color-accent: var(--inq-green-apple);
    --inq-color-highlight: var(--inq-terracotta);
    --inq-color-bg: var(--inq-cream);
    --inq-color-surface: var(--inq-white);
    --inq-color-text: var(--inq-espresso);
    --inq-color-text-muted: #6d5a4c;
    --inq-color-border: rgba(71, 37, 6, 0.18);

    /* Tipografía
     * Gamoben y Cascadia Mono se cargan desde assets/css/inq-fonts.css.
     * La fuente de lectura general queda deliberadamente neutra: el manual
     * no especifica una tercera familia para párrafos largos.
     */
    --inq-font-display: "Gamoben", "Arial Black", sans-serif;
    --inq-font-mono: "Cascadia Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    --inq-font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* Escala tipográfica fluida */
    --inq-text-xs: clamp(0.72rem, 0.69rem + 0.10vw, 0.80rem);
    --inq-text-sm: clamp(0.82rem, 0.78rem + 0.14vw, 0.92rem);
    --inq-text-base: clamp(0.95rem, 0.90rem + 0.18vw, 1.06rem);
    --inq-text-lg: clamp(1.10rem, 1.00rem + 0.30vw, 1.30rem);
    --inq-text-xl: clamp(1.40rem, 1.18rem + 0.65vw, 1.85rem);
    --inq-text-2xl: clamp(2rem, 1.45rem + 1.7vw, 3.25rem);
    --inq-text-hero: clamp(3rem, 1.9rem + 4.2vw, 6.75rem);

    /* Layout */
    --inq-container: 1240px;
    --inq-container-wide: 1440px;
    --inq-gutter: clamp(20px, 4vw, 64px);
    --inq-section-space: clamp(72px, 8vw, 128px);
    --inq-section-space-sm: clamp(48px, 6vw, 88px);

    /* Forma */
    --inq-radius-sm: 10px;
    --inq-radius-md: 18px;
    --inq-radius-lg: 28px;
    --inq-radius-pill: 999px;

    /* Sombras */
    --inq-shadow-sm: 0 8px 24px rgba(71, 37, 6, 0.08);
    --inq-shadow-md: 0 18px 48px rgba(71, 37, 6, 0.12);

    /* Movimiento */
    --inq-transition: 220ms cubic-bezier(.2, .7, .2, 1);
}

/* ==========================================================
   02. BASE DEL SITIO
   Todo se encapsula bajo .inq-house-site.
   ========================================================== */
body.inq-house-site {
    background: var(--inq-color-bg);
    color: var(--inq-color-text);
    font-family: var(--inq-font-body);
    font-size: var(--inq-text-base);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.inq-house-site ::selection {
    background: var(--inq-green-apple);
    color: var(--inq-black);
}

body.inq-house-site a {
    color: inherit;
    text-underline-offset: 0.18em;
}

body.inq-house-site img,
body.inq-house-site svg {
    max-width: 100%;
}

/* Encabezados. Elementor puede sobrescribir tamaños; estas reglas fijan la voz tipográfica. */
body.inq-house-site h1,
body.inq-house-site h2,
body.inq-house-site h3,
body.inq-house-site h4,
body.inq-house-site h5,
body.inq-house-site h6,
body.inq-house-site .inq-display {
    color: var(--inq-color-primary);
    font-family: var(--inq-font-display);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 0.98;
    text-wrap: balance;
}

body.inq-house-site p {
    text-wrap: pretty;
}

/* ==========================================================
   03. AJUSTES ELEMENTOR
   Usar clases CSS en Avanzado > Clases CSS.
   ========================================================== */
body.inq-house-site .e-con.inq-container,
body.inq-house-site .inq-container > .e-con-inner {
    width: min(100% - (var(--inq-gutter) * 2), var(--inq-container));
    margin-inline: auto;
}

body.inq-house-site .e-con.inq-container-wide,
body.inq-house-site .inq-container-wide > .e-con-inner {
    width: min(100% - (var(--inq-gutter) * 2), var(--inq-container-wide));
    margin-inline: auto;
}

body.inq-house-site .inq-section {
    padding-block: var(--inq-section-space);
}

body.inq-house-site .inq-section-sm {
    padding-block: var(--inq-section-space-sm);
}

/* Evita saltos laterales por elementos decorativos. */
body.inq-house-site,
body.inq-house-site .elementor {
    overflow-x: clip;
}

/* ==========================================================
   04. UTILIDADES DE COLOR
   ========================================================== */
.inq-bg-cream { background-color: var(--inq-cream); }
.inq-bg-apple { background-color: var(--inq-green-apple); }
.inq-bg-olive { background-color: var(--inq-green-olive); }
.inq-bg-espresso { background-color: var(--inq-espresso); }
.inq-bg-terracotta { background-color: var(--inq-terracotta); }
.inq-bg-black { background-color: var(--inq-black); }
.inq-bg-white { background-color: var(--inq-white); }

.inq-text-apple { color: var(--inq-green-apple) !important; }
.inq-text-olive { color: var(--inq-green-olive) !important; }
.inq-text-espresso { color: var(--inq-espresso) !important; }
.inq-text-terracotta { color: var(--inq-terracotta) !important; }
.inq-text-cream { color: var(--inq-cream) !important; }
.inq-text-white { color: var(--inq-white) !important; }
.inq-text-black { color: var(--inq-black) !important; }

/* ==========================================================
   05. UTILIDADES DE TEXTO / ESPACIADO
   ========================================================== */
.inq-eyebrow {
    font-family: var(--inq-font-mono);
    font-size: var(--inq-text-xs);
    font-weight: 600;
    letter-spacing: 0.14em;
    line-height: 1.25;
    text-transform: uppercase;
}

.inq-mono,
.inq-tagline {
    font-family: var(--inq-font-mono) !important;
}

.inq-tagline {
    font-size: var(--inq-text-xs);
    font-weight: 400;
    letter-spacing: .12em;
    line-height: 1.3;
    text-transform: uppercase;
}

.inq-lead {
    font-size: var(--inq-text-lg);
    line-height: 1.55;
}

.inq-max-copy {
    max-width: 68ch;
}

.inq-radius-sm { border-radius: var(--inq-radius-sm); }
.inq-radius-md { border-radius: var(--inq-radius-md); }
.inq-radius-lg { border-radius: var(--inq-radius-lg); }

/* ==========================================================
   06. ACCESIBILIDAD
   ========================================================== */
body.inq-house-site :focus-visible {
    outline: 3px solid var(--inq-terracotta);
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
    body.inq-house-site *,
    body.inq-house-site *::before,
    body.inq-house-site *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ==========================================================
   07. RESPONSIVE BASE
   ========================================================== */
@media (max-width: 767px) {
    :root {
        --inq-gutter: 20px;
        --inq-section-space: 64px;
        --inq-section-space-sm: 44px;
        --inq-radius-lg: 22px;
    }
}