/*
Theme Name: CreaAcademy
Theme URI: https://www.creaacademy.es/
Author: Patricia Escabias
Description: Tema a medida para CreaAcademy, academia online de creación de contenido digital. Réplica fiel del diseño original con todo el contenido editable desde el panel de WordPress.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.1
Text Domain: creaacademy
*/

/* ==========================================================================
   Tokens de diseño — extraídos del sitio original (Systeme.io)
   Cualquier cambio de color/tipografía global se hace AQUÍ.
   ========================================================================== */

:root {
    /* --- Tipografía --- */
    --font-base: 'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Escala tipográfica (desktop) */
    --fs-h1: 64px;
    --fs-h2: 48px;
    --fs-h2-sm: 46px;
    --fs-h3: 28px;
    --fs-h4: 24px;
    --fs-lead: 24px;
    --fs-card-title: 22px;
    --fs-body: 18px;
    --fs-small: 16px;
    --fs-eyebrow: 16px;

    --lh-h1: 1.0;
    --lh-h2: 1.13;
    --lh-body: 1.56;

    /* --- Color: marca --- */
    --blue: #0066FF;          /* azul de marca. 4.83:1 sobre blanco -> AA */
    --blue-on-pale: #005BE6;  /* variante para texto sobre fondos azul pálido (AA) */
    --blue-hover: #0052CC;    /* hover: mismo tono ~18% más oscuro */
    --blue-pale: #F0F5FF;
    --blue-soft: #E1EBFF;
    --blue-light: #7FB0FF;
    /* Fondo que llevan incrustado los iconos de curso (#DFEBFF). Al usarlo
       como fondo del <img> se rellenan sus esquinas transparentes y el icono
       queda como una pastilla limpia sobre cualquier color de sección. */
    --icon-tile: #DFEBFF;

    /* --- Color: neutros --- */
    --ink: #0B0C12;           /* titulares, barra de tickers, botón primario */
    --ink-hover: #23252F;
    --navy: #0A1128;
    --text: #4B515E;          /* cuerpo de texto */
    --muted: #6B7280;
    --white: #FFFFFF;

    /* --- Color: superficies --- */
    --bg: #FFFFFF;
    --bg-alt: #F5F7FA;        /* secciones alternas */
    --bg-panel: #F5F7FB;      /* panel del formulario del hero */
    --bg-card: #F1F4F8;       /* items del acordeón FAQ */

    /* --- Color: bordes --- */
    --border: #ECEEF2;        /* tarjetas */
    --border-strong: #E1E1E1; /* botón secundario, panel */
    --border-field: #B0BACA;  /* inputs */

    /* --- Radios --- */
    --r-sm: 5px;
    --r-btn: 8px;
    --r-card: 16px;
    --r-panel: 18px;
    --r-cta: 16px;
    --r-pill: 32px;

    /* --- Espaciado --- */
    --section-y: 80px;
    --section-y-lg: 100px;
    --container: 1200px;
    --gutter: 40px;

    /* --- Sombras y transiciones --- */
    --shadow-card: 0 1px 3px rgba(11, 12, 18, .04);
    --shadow-pop: 0 12px 40px rgba(11, 12, 18, .14);
    --t: .3s ease;
}