/*
Theme Name: OneKlic Child
Theme URI: https://www.justoneklic.com
Description: Child theme de Hello Elementor para OneKlic. Contiene las variables de marca, las fuentes locales (Jura y Manrope) y los estilos personalizados del sitio.
Author: OneKlic
Author URI: https://www.justoneklic.com
Template: hello-elementor
Version: 1.0.0
Text Domain: oneklic-child
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
*/

/* ============================================================
   1. FUENTES LOCALES
   Sube los .woff2 a la carpeta /fonts/ del child theme.
   Nombres esperados (renombra tus archivos a estos):
     jura-400.woff2, jura-500.woff2, jura-600.woff2, jura-700.woff2
     manrope-400.woff2, manrope-500.woff2, manrope-600.woff2,
     manrope-700.woff2, manrope-800.woff2
   ============================================================ */

@font-face {
  font-family: 'Jura';
  src: url('fonts/jura-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Jura';
  src: url('fonts/jura-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Jura';
  src: url('fonts/jura-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Jura';
  src: url('fonts/jura-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('fonts/manrope-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('fonts/manrope-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('fonts/manrope-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('fonts/manrope-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('fonts/manrope-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   2. VARIABLES DE MARCA
   Nomenclatura tomada de la guía de marca OneKlic v1.
   ============================================================ */

:root {
  /* Color */
  --ok-klic-blue: #18A8F5;
  --ok-quantum-navy: #001830;
  --ok-one-gray: #808088;
  --ok-warm-base: #FBFAF8;

  /* Gris de cuerpo: versión accesible de One gray (contraste 6.6:1
     sobre warm base; el #808088 original queda en 3.8:1 y solo
     cumple para texto grande). */
  --ok-body-text: #5A5A62;

  /* Gradientes de firma */
  --ok-gradient-energy: linear-gradient(135deg, #18A8F5 0%, #4A7FD4 100%);
  --ok-gradient-field: linear-gradient(160deg, #001830 0%, #0A2947 100%);

  /* Tipografía */
  --ok-font-display: 'Jura', sans-serif;
  --ok-font-sans: 'Manrope', sans-serif;
}

/* ============================================================
   3. ESTILOS PERSONALIZADOS DEL SITIO
   Agrega aquí lo que no puedas resolver desde el panel de
   Elementor. Todo lo tipográfico y de color debería salir de
   Configuración del sitio, no de este archivo.
   ============================================================ */

/* Respetar la preferencia de movimiento reducido del sistema. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Foco visible por teclado (accesibilidad). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--ok-klic-blue);
  outline-offset: 2px;
}