/*
Theme Name: AFYS - Hello Elementor Child
Theme URI: https://afys.cl/
Description: Tema hijo optimizado para el sitio web de AFYS con arquitectura de datos en JetEngine, soporte para modo oscuro automático y optimización WPO.
Author: AFYS AG
Author URI: https://afys.cl/
Template: hello-elementor
Version: 1.0.0
Text Domain: afys-child
*/

/* ==========================================================================
   1. TOKENS Y VARIABLES GLOBALES DEL SISTEMA DE DISEÑO AFYS
   ========================================================================== */
:root {
  /* Paleta de Colores Oficial */
  --brand: #0E3266;
  --brand-dp: #0A2447;
  --brand-lt: #174A8F;
  --teal: #4F998B;
  --teal-dk: #3C7E72;
  --teal-soft: #E6F1EE;
  --amber: #B8721C;
  --amber-soft: #FBF1E2;
  --ink: #12253C;
  --ink-2: #3D5065;
  --muted: #68788D;
  --line: #DBE3EC;
  --line-2: #EDF1F6;
  --ground: #F3F6FA;
  --paper: #FFFFFF;
  --raise: #FFFFFF;
  --link: #12406F;
  --on-brand: #EAF1FA;
  --on-brand-mut: #A8BFDC;

  /* Tipografías Oficiales */
  --font-heading: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Code", monospace;

  /* Layout y Sombras */
  --shadow: 0 1px 2px rgba(14, 50, 102, 0.06), 0 8px 24px -12px rgba(14, 50, 102, 0.22);
  --maxw: 1180px;
  --rad: 10px;

  /* Mapeo con Variables de Elementor */
  --e-global-color-primary: var(--brand);
  --e-global-color-secondary: var(--teal);
  --e-global-color-text: var(--ink);
  --e-global-color-accent: var(--brand-lt);

  --e-global-typography-primary-font-family: var(--font-heading);
  --e-global-typography-primary-font-weight: 600;
  --e-global-typography-secondary-font-family: var(--font-heading);
  --e-global-typography-secondary-font-weight: 600;
  --e-global-typography-text-font-family: var(--font-body);
  --e-global-typography-text-font-weight: 400;
  --e-global-typography-accent-font-family: var(--font-mono);
  --e-global-typography-accent-font-weight: 500;
}

/* Soporte Nativo para Esquema Oscuro Automático */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand: #0F2F5C;
    --brand-dp: #081A31;
    --brand-lt: #2C6BB5;
    --teal: #6DB5A6;
    --teal-dk: #4F998B;
    --teal-soft: #14302C;
    --amber: #D6973F;
    --amber-soft: #2E2416;
    --ink: #E7EEF7;
    --ink-2: #BCCBDC;
    --muted: #8FA2B8;
    --line: #23374F;
    --line-2: #1A2C42;
    --ground: #0A1626;
    --paper: #0F2035;
    --raise: #132741;
    --link: #8CB8ED;
    --on-brand: #EAF1FA;
    --on-brand-mut: #A8BFDC;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 28px -14px rgba(0,0,0,.7);
  }
}

:root[data-theme="dark"] {
  --brand: #0F2F5C;
  --brand-dp: #081A31;
  --brand-lt: #2C6BB5;
  --teal: #6DB5A6;
  --teal-dk: #4F998B;
  --teal-soft: #14302C;
  --amber: #D6973F;
  --amber-soft: #2E2416;
  --ink: #E7EEF7;
  --ink-2: #BCCBDC;
  --muted: #8FA2B8;
  --line: #23374F;
  --line-2: #1A2C42;
  --ground: #0A1626;
  --paper: #0F2035;
  --raise: #132741;
  --link: #8CB8ED;
  --on-brand: #EAF1FA;
  --on-brand-mut: #A8BFDC;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 28px -14px rgba(0,0,0,.7);
}

/* ==========================================================================
   2. ESTILOS TIPOGRÁFICOS Y ESTRUCTURALES BASE
   ========================================================================== */
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -0.014em;
  text-wrap: balance;
  color: var(--ink);
  margin: 0;
}

h1 {
  font-size: clamp(2rem, 1.3rem + 2.5vw, 3.05rem);
  line-height: 1.1;
  letter-spacing: -0.026em;
}

h2 {
  font-size: clamp(1.45rem, 1.1rem + 1.3vw, 2.05rem);
  line-height: 1.18;
}

h3 {
  font-size: 1.14rem;
  line-height: 1.3;
}

h4 {
  font-size: 0.98rem;
  line-height: 1.35;
}

p {
  margin: 0;
}

a {
  color: var(--link);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Primitivas */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 20px;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--teal-dk);
  margin: 0;
}

.lede {
  font-size: 1.1rem;
  color: var(--ink-2);
  max-width: 62ch;
}

.small {
  font-size: 0.9rem;
  color: var(--muted);
}

.tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3em 0.6em;
  border-radius: 4px;
  background: var(--teal-soft);
  color: var(--teal-dk);
}

/* Botones del Sistema de Diseño */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.66em 1.25em;
  border-radius: 7px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1.5px solid transparent;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.btn-p {
  background: var(--brand);
  color: #ffffff;
}

.btn-p:hover {
  background: var(--brand-lt);
}

.btn-s {
  background: transparent;
  color: var(--link);
  border-color: var(--line);
}

.btn-s:hover {
  border-color: var(--teal);
  color: var(--teal-dk);
}

.btn-t {
  background: var(--teal-dk);
  color: #ffffff;
}

.btn-t:hover {
  background: var(--teal);
}

.btn-g {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.35);
}

.btn-g:hover {
  background: rgba(255, 255, 255, 0.22);
}

/* Muro de Socios - Fondo Blanco Fijo para Logotipos */
.wall div {
  background: #ffffff !important;
  border: 1px solid var(--line);
  border-radius: 8px;
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 14px;
}

.wall img {
  max-height: 42px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}