/*
Theme Name: VR-Lab Custom Theme
Author: Karhy259
Description: Tema personalizado a medida para VR-Lab con soporte WooCommerce y Elementor.
Version: 1.0.0
*/

/* IMPORTACIÓN DE FUENTES */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

/* MÓDULOS CSS GLOBALES */
@import url('assets/css/banner.css');
@import url('assets/css/breadcrumbs.css'); 
@import url('assets/css/content.css');     
@import url('assets/css/cta.css');
@import url('assets/css/empty-page.css');
@import url('assets/css/footer.css');
@import url('assets/css/header.css');
@import url('assets/css/kits.css');
@import url('assets/css/page-experiencias.css');
@import url('assets/css/platform.css');
@import url('assets/css/worlds.css');
@import url('assets/css/blocks.css');
@import url('assets/css/certificados.css');
@import url('assets/css/forms.css');

/* PALETA CROMÁTICA Y TIPOGRAFÍAS (Variables CSS) */
:root {
  /* Colors - Manual de Marca */
  --azul:               #29ABE2;
  --verde:              #8CC63E;
  --amarillo:           #F5C04A;
  --morado:             #9226C7;
  --magenta:            #F012A5;
  --coral:              #FF4040;
  --gris:               #F2F2F2;
  --negro:              #000000;

  /* Colors - Cabecera / Menú */
  --azul-fondo-oscuro:  #030a16;
  --verde-neon:         #A3E635;
  --verde-hover:        #92E3A9;
  --blanco:             #FFFFFF;

  /* Colors - Extras */
  --vrlab-cta-bg-color: #020d20;
  --vrlab-green-accent: #10b981;

  /* Typography */
  --font-principal:  'Montserrat', sans-serif;
  --font-secundaria: 'Montserrat', sans-serif;
  --font-web:        'Poppins', sans-serif;
  --font-sistema:    Arial, Helvetica, sans-serif;
}

/* REGLAS BASE GLOBALES */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Estructura Sticky Footer Flexbox */
html {
  height: 100%;
}

body {
  font-family: var(--font-web);
  font-weight: 400;
  color: var(--negro);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  
  /* Flexbox para mantener el footer en la parte inferior */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* El contenido principal toma el espacio libre sobrante */
main,
#main,
#primary,
.site-main,
#content,
.page-experiencias-container {
  flex: 1 0 auto;
}

/* El footer no se encoge jamás */
footer,
.site-footer,
#colophon {
  flex-shrink: 0;
}

/* Encabezados y Títulos */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-principal);
  font-weight: 700;
  margin-top: 0;
}

h2, h3 {
  font-weight: 600;
}

/* Párrafos y elementos de texto */
p, li, span, input, textarea {
  font-family: var(--font-web);
}

/* Clases utilitarias de fuentes */
.font-principal  { font-family: var(--font-principal); }
.font-secundaria { font-family: var(--font-secundaria); font-weight: 400; }
.font-web        { font-family: var(--font-web); }
.font-sistema    { font-family: var(--font-sistema); }

/* Clases utilitarias de texto */
.text-azul        { color: var(--azul); }
.text-verde       { color: var(--verde); }
.text-amarillo    { color: var(--amarillo); }
.text-morado      { color: var(--morado); }
.text-magenta     { color: var(--magenta); }
.text-coral       { color: var(--coral); }
.text-verde-neon  { color: var(--verde-neon); }

/* Clases utilitarias de fondo */
.bg-azul         { background-color: var(--azul); }
.bg-verde        { background-color: var(--verde); }
.bg-gris         { background-color: var(--gris); }
.bg-fondo-oscuro { background-color: var(--azul-fondo-oscuro); }