/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

/* ============================================================
   GO2BESS · base.css  (GeneratePress child + Elementor V4)
   Fuentes, variables :root y estilos básicos de texto.
   Figma: Go2BESS - Diseño web › Home 01 (node 4060:2731)

   · Los colores son variables de Elementor (color-primary,
     color-accent, color-text, color-border, color-white).
     Aquí solo se usan; no se redefinen.
   · Fuentes: Poppins (texto, menú, botones) y Outfit (títulos).
   · Figma no tiene versión móvil: los tamaños de móvil son una
     propuesta (marcados con «propuesta»).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400&family=Poppins:wght@400;500&display=swap');


/* ------------------------------------------------------------
   1. VARIABLES
   ------------------------------------------------------------ */

:root {
  /* Fuentes */
  --font-body:    'Poppins', system-ui, sans-serif;
  --font-heading: 'Outfit', 'Poppins', system-ui, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium:  500;

  /* Colores derivados (los base están en Elementor) */
  --color-text-muted:   #6b6d70;  /* Figma: negro al 55 % (#7b7c7e, 4,2:1). Oscurecido a 5,3:1 para AA */
  --color-text-soft:    #474f59;  /* Texto de las tarjetas de «¿Qué aporta?» */
  --color-surface-soft: rgb(255 255 255 / 0.9);
  --degradado: linear-gradient(152deg, var(--color-accent, #00f5b2) 0%, var(--color-primary, #6857fb) 100%);

  /* Tamaños de texto · escritorio (Figma) */
  --fs-h1:      48px;
  --fs-h2:      48px;
  --fs-h3:      32px;
  --fs-h4:      26px;
  --fs-eyebrow: 17px;
  --fs-lead:    18px;
  --fs-body:    16px;
  --fs-card:    20px;
  --fs-menu:    15px;
  --fs-btn:     16px;

  --lh-tight:   1.1;
  --lh-heading: 1.18;
  --lh-eyebrow: 1.2;
  --lh-btn:     1.4;
  --lh-body:    1.5;
  --ls-heading: -0.01em;   /* -0,48 px a 48 px */

  /* Medidas */
  --content-width: 1344px;  /* columna de Figma (192 px de margen a 1728) */
  --space-page:    24px;    /* padding lateral escritorio y tablet */
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  30px;
  --space-lg:  60px;
  --space-xl:  100px;
  --radius-btn:  5px;
  --radius-icon: 9px;
  --radius-card: 10px;

  --dur-fast: 0.25s;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Tablet (propuesta) */
@media (max-width: 1024px) {
  :root:root {
    --fs-h1: 40px;
    --fs-h2: 40px;
    --fs-h3: 28px;
    --fs-h4: 24px;
    --space-xl: 80px;
  }
}

/* Móvil (propuesta) */
@media (max-width: 767px) {
  :root:root {
    --fs-h1: 32px;
    --fs-h2: 30px;
    --fs-h3: 24px;
    --fs-h4: 22px;
    --fs-eyebrow: 15px;
    --fs-lead: 16px;
    --fs-card: 17px;
    --space-page: 20px;
    --space-lg: 40px;
    --space-xl: 64px;
  }
}


/* ------------------------------------------------------------
   2. BASE
   ------------------------------------------------------------ */

body {
  background-color: var(--color-white, #fff);
  color: var(--color-text, #0f1114);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

/* Títulos: Outfit regular, interlineado 1,18 */
:is(h1, h2, h3, h4, h5, h6),
.elementor :is(h1, h2, h3, h4, h5, h6) {
  margin: 0;
  color: var(--color-text, #0f1114);
  font-family: var(--font-heading);
  font-weight: var(--font-weight-regular);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}

h1, .elementor h1 { font-size: var(--fs-h1); }
h2, .elementor h2 { font-size: var(--fs-h2); }
h3, .elementor h3 { font-size: var(--fs-h3); }
h4, .elementor h4 { font-size: var(--fs-h4); }

p, .elementor p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

strong, b { font-weight: var(--font-weight-medium); }

a {
  color: var(--color-primary, #6857fb);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease);

  &:hover { color: var(--color-text, #0f1114); }
}


/* ------------------------------------------------------------
   3. CLASES DE TEXTO (poner en el elemento desde Elementor)
   ------------------------------------------------------------ */

/* Antetítulo: «¿Qué es Go2BESS?», «Para quién»… */
.g2b-antetitulo {
  color: var(--color-text, #0f1114);
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--font-weight-medium);
  line-height: var(--lh-eyebrow);
  letter-spacing: 0;
  opacity: 0.6;
}

/* Texto destacado bajo los títulos (18 px) */
.g2b-lead,
.elementor .g2b-lead {
  font-size: var(--fs-lead);
}

/* Texto de tarjetas (20 px, gris azulado) */
.g2b-texto-tarjeta,
.elementor .g2b-texto-tarjeta {
  color: var(--color-text-soft);
  font-family: var(--font-heading);
  font-size: var(--fs-card);
  line-height: 1.4;
}

/* Tipografía secundaria: Poppins en un título (H1 del hero en Figma) */
.g2b-display,
.elementor .g2b-display {
  font-family: var(--font-body);
}

/* Palabras con degradado verde → morado dentro de un título.
   Envolver la palabra en <span class="g2b-degradado"> */
.g2b-degradado {
  background-image: var(--degradado);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}


/* ------------------------------------------------------------
   4. ACCESIBILIDAD
   ------------------------------------------------------------ */

:is(a, button):focus-visible {
  outline: 2px solid var(--color-primary, #6857fb);
  outline-offset: 3px;
}

::selection {
  background-color: var(--color-accent, #00f5b2);
  color: var(--color-text, #0f1114);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}