/*
Theme Name: Libelium Theme
Theme URI: https://libelium.com
Author: Libelium Web Engineering
Author URI: https://libelium.com
Description: Ultra-lightweight starter theme engineered for Libelium + iris360 corporate ecosystem and Elementor Pro design engine.
Version: 1.0.0
Text Domain: libelium-theme
Tags: elementor-compatible, full-width-template, custom-menu, responsive-layout
*/

/* Reset & CSS Custom Properties — Libelium 2025 Brand Gradient */
:root {
  --fw-semibold: 500;
  --font-display: 'Konnect', 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: 'Konnect', 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: 'JetBrains Mono', 'Space Mono', monospace;

  --deep-violet: #2E1065;
  --violet-700: #5B21B6;
  --violet-600: #6D28D9;
  --violet-500: #7C3AED;
  --violet-400: #8B5CF6;
  --magenta: #C026D3;
  --burgundy: #4B0715;
  --violet-digital: #7D00F4;
  --lavender: #F3E8FF;
  --bg: #FAFAFC;
  --white: #FFFFFF;
  --ink: #15121F;
  --ink-soft: #5B5570;
  --ink-faint: #9994AC;
  --line: #E7E2F3;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-btn: 100px;
  --shadow-sm: 0 1px 2px rgba(21, 18, 31, .05);
  --shadow-md: 0 16px 40px -18px rgba(91, 33, 182, .3);
  --shadow-lg: 0 24px 60px -24px rgba(46, 16, 101, .45);

  --lp-max-width: 1440px;
  --lp-section-pad: 96px;
  --lp-section-pad-mobile: 64px;
  --lp-content-narrow: 620px;
  --lp-content-wide: 860px;

  --brand-gradient: linear-gradient(125deg, #4C2889 0%, #7C1B6B 28%, #B4123F 55%, #E8121F 80%, #FF0800 100%);
  --brand-gradient-soft: var(--brand-gradient);

  --tone-physical: linear-gradient(135deg, var(--burgundy), var(--violet-600), var(--deep-violet));
  --tone-digital: linear-gradient(125deg, #150D5F 0%, #5800C0 52%, #7D00F4 100%);
  --tone-digital-twins: var(--brand-gradient);
  --tone-cross: linear-gradient(135deg, var(--violet-700), var(--burgundy));

  /* Desktop Typography Tokens (Defaults) */
  --font-size-display-hero: 54px;
  --font-size-h1: 48px;
  --font-size-h2: 36px;
  --font-size-h3: 18px;
  --font-size-h4: 18px;
  --font-size-h5: 16px;
  --font-size-h6: 14px;
  --font-size-p: 16px;
  --font-size-subhead: 14.5px;
  --font-size-li: 15px;
  --font-size-eyebrow: 12px;
  --font-size-btn: 14.5px;
}

/* Laptop breakpoint tokens (<= 1366px) */
@media (max-width: 1366px) {
  :root {
    --font-size-display-hero: 44px;
    --font-size-h1: 40px;
    --font-size-h2: 30px;
    --font-size-h3: 16px;
    --font-size-h4: 16px;
    --font-size-h5: 15px;
    --font-size-h6: 13.5px;
    --font-size-p: 15px;
    --font-size-subhead: 14px;
    --font-size-li: 14px;
    --font-size-eyebrow: 11px;
    --font-size-btn: 14px;
  }
}

/* Tablet breakpoint tokens (<= 1024px) */
@media (max-width: 1024px) {
  :root {
    --font-size-display-hero: 38px;
    --font-size-h1: 34px;
    --font-size-h2: 26px;
    --font-size-h3: 16px;
    --font-size-h4: 15px;
    --font-size-h5: 15px;
    --font-size-h6: 13.5px;
    --font-size-p: 15px;
    --font-size-subhead: 13.5px;
    --font-size-li: 14px;
    --font-size-eyebrow: 11px;
    --font-size-btn: 14px;
  }
}

/* Mobile breakpoint tokens (<= 768px) */
@media (max-width: 768px) {
  :root {
    --font-size-display-hero: 34px;
    --font-size-h1: 30px;
    --font-size-h2: 24px;
    --font-size-h3: 16px;
    --font-size-h4: 15px;
    --font-size-h5: 15px;
    --font-size-h6: 13px;
    --font-size-p: 14px;
    --font-size-subhead: 13px;
    --font-size-li: 13.5px;
    --font-size-eyebrow: 11px;
    --font-size-btn: 13.5px;
  }
}

html {
  overflow-x: hidden;
}

/* Sin esto, cualquier widget individual con overflow puntual (badge con efecto
   "magnetic drift", carousel, etc.) infla el layout viewport del documento
   completo, y eso arrastra a TODO position:fixed de ancho 100%/100vw del sitio
   (header incluido) aunque ese elemento en sí no tenga overflow propio. */
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--ink, #0F172A);
}

h1 {
  font-family: var(--font-display);
  font-size: var(--font-size-h1);
  line-height: 1.15;
  font-weight: var(--heading-weight, 500);
}

h2 {
  font-family: var(--font-display);
  font-size: var(--font-size-h2);
  line-height: 1.15;
  font-weight: var(--heading-weight, 500);
}

h3 {
  font-family: var(--font-display);
  font-size: var(--font-size-h3);
  line-height: 1.25;
  font-weight: var(--heading-weight, 500);
}

h4 {
  font-family: var(--font-display);
  font-size: var(--font-size-h4);
  line-height: 1.3;
  font-weight: var(--heading-weight, 500);
}

h5 {
  font-family: var(--font-display);
  font-size: var(--font-size-h5);
  line-height: 1.4;
  font-weight: var(--heading-weight, 500);
}

h6 {
  font-family: var(--font-display);
  font-size: var(--font-size-h6);
  line-height: 1.4;
  font-weight: var(--heading-weight, 500);
}

p {
  font-family: var(--font-body);
  font-size: var(--font-size-p);
  line-height: 1.55;
  font-weight: 400;
  margin-block-start: 0em !important;
  margin-block-end: 0em !important;
}

/* Dentro de Elementor, el <p> hereda del contenedor del widget (donde escriben
   los controles de Tipografía). Sin esto, la regla global `p {}` de arriba
   (match directo) gana al valor heredado y los controles no tienen efecto. */
.elementor-widget-text-editor p,
.elementor-widget-text-editor .elementor-widget-container>p,
.elementor-widget-theme-post-content p {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
}

.wrap {
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 32px;
}