/*
Theme Name: Tec-Alum
Theme URI: https://tec-alum.cl
Author: Tec-Alum SpA
Author URI: https://tec-alum.cl
Description: Tema corporativo premium para Vidrios y Aluminios Tec-Alum SpA. Diseñado para trabajar con Elementor y Pro-Elements. Mobile-first, optimizado para conversión comercial.
Version: 1.0.0
Requires at least: 6.3
Tested up to: 6.7
Requires PHP: 8.0
License: Privado
Tags: elementor, full-width-template, custom-colors, custom-fonts, responsive-layout, woocommerce
Text Domain: tecalum
*/

/* ─────────────────────────────────────────
   DESIGN TOKENS — Sistema de diseño Tec-Alum
   ───────────────────────────────────────── */
:root {
  /* Colores Primarios — Azul Corporativo */
  --ta-primary:              #00346f;
  --ta-primary-dark:         #001b3f;
  --ta-primary-container:    #004a99;
  --ta-on-primary:           #ffffff;
  --ta-on-primary-container: #9bbdff;
  --ta-primary-fixed:        #d7e2ff;
  --ta-primary-fixed-dim:    #abc7ff;
  --ta-inverse-primary:      #abc7ff;

  /* Colores Secundarios — Gris Acero */
  --ta-secondary:              #48626e;
  --ta-secondary-dark:         #021f29;
  --ta-secondary-container:    #cbe7f5;
  --ta-on-secondary:           #ffffff;
  --ta-on-secondary-container: #4e6874;
  --ta-secondary-fixed:        #cbe7f5;
  --ta-secondary-fixed-dim:    #afcbd8;

  /* Colores Terciarios — Naranja Acento CTA */
  --ta-tertiary:              #c95e00;
  --ta-tertiary-dark:         #8f3d00;
  --ta-tertiary-container:    #ff8534;
  --ta-on-tertiary:           #ffffff;
  --ta-on-tertiary-container: #ffffff;
  --ta-tertiary-fixed:        #ffdcc6;
  --ta-tertiary-fixed-dim:    #ffb786;

  /* Superficies y Fondos */
  --ta-background:                  #f9f9f9;
  --ta-surface:                     #f9f9f9;
  --ta-surface-bright:              #ffffff;
  --ta-surface-dim:                 #dadada;
  --ta-surface-container-lowest:    #ffffff;
  --ta-surface-container-low:       #f3f3f4;
  --ta-surface-container:           #eeeeee;
  --ta-surface-container-high:      #e8e8e8;
  --ta-surface-container-highest:   #e2e2e2;
  --ta-surface-variant:             #dce3ed;
  --ta-inverse-surface:             #2f3131;
  --ta-inverse-on-surface:          #f0f1f1;

  /* Texto */
  --ta-on-surface:          #1a1c1c;
  --ta-on-surface-variant:  #424751;
  --ta-on-background:       #1a1c1c;

  /* Bordes */
  --ta-outline:         #737783;
  --ta-outline-variant: #c2c6d3;

  /* Error */
  --ta-error:              #ba1a1a;
  --ta-on-error:           #ffffff;
  --ta-error-container:    #ffdad6;
  --ta-on-error-container: #93000a;

  /* Misceláneos */
  --ta-surface-tint:   #255dad;
  --ta-scrim:          rgba(0, 0, 0, 0.6);

  /* ── Tipografía ── */
  --ta-font-display: 'Montserrat', 'Segoe UI', sans-serif;
  --ta-font-body:    'Inter', 'Segoe UI', system-ui, sans-serif;

  /* Tamaños de fuente */
  --ta-fs-display:       clamp(36px, 5vw, 56px);
  --ta-lh-display:       1.14;
  --ta-fs-headline-lg:   clamp(24px, 3vw, 32px);
  --ta-lh-headline-lg:   1.25;
  --ta-fs-headline-md:   clamp(20px, 2.5vw, 24px);
  --ta-lh-headline-md:   1.33;
  --ta-fs-body-lg:       18px;
  --ta-lh-body-lg:       1.56;
  --ta-fs-body-md:       16px;
  --ta-lh-body-md:       1.5;
  --ta-fs-label-sm:      12px;
  --ta-lh-label-sm:      1.33;

  /* ── Espaciado ── */
  --ta-section-y:       clamp(60px, 8vw, 120px);
  --ta-container-x:     clamp(16px, 4.5vw, 64px);
  --ta-max-width:       1440px;
  --ta-gutter:          24px;

  /* ── Bordes redondeados ── */
  --ta-radius:      4px;
  --ta-radius-md:   8px;
  --ta-radius-lg:   12px;
  --ta-radius-xl:   16px;
  --ta-radius-full: 9999px;

  /* ── Sombras ── */
  --ta-shadow-sm:  0 1px 3px rgba(0,52,111,0.08), 0 1px 2px rgba(0,52,111,0.06);
  --ta-shadow-md:  0 4px 12px rgba(0,52,111,0.10), 0 2px 4px rgba(0,52,111,0.08);
  --ta-shadow-lg:  0 10px 30px rgba(0,52,111,0.12), 0 4px 8px rgba(0,52,111,0.08);
  --ta-shadow-xl:  0 20px 50px rgba(0,52,111,0.15), 0 8px 16px rgba(0,52,111,0.10);
  --ta-shadow-cta: 0 8px 24px rgba(201,94,0,0.35);

  /* ── Transiciones ── */
  --ta-ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --ta-ease-out:   cubic-bezier(0, 0, 0.2, 1);
  --ta-ease-in:    cubic-bezier(0.4, 0, 1, 1);
  --ta-duration:   300ms;
  --ta-duration-slow: 500ms;
  --ta-transition: var(--ta-duration) var(--ta-ease);
}

/* ─────────────────────────────────────────
   BASE RESET
   ───────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
  width: 100%;
  font-family: var(--ta-font-body);
  font-size: var(--ta-fs-body-md);
  line-height: var(--ta-lh-body-md);
  color: var(--ta-on-surface);
  background-color: var(--ta-background);
  overflow-x: hidden;
}

img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--ta-primary);
  text-decoration: none;
  transition: color var(--ta-transition);
}

a:hover {
  color: var(--ta-primary-container);
}

ul, ol {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

/* ─────────────────────────────────────────
   ELEMENTOR — Compatibilidad base
   ───────────────────────────────────────── */
.elementor-section.elementor-section-full_width,
.elementor-section.elementor-section-boxed > .elementor-container {
  max-width: var(--ta-max-width);
}

.e-con,
.e-container {
  --container-max-width: var(--ta-max-width);
}

/* Evitar que Elementor rompa el overflow horizontal */
.elementor-section-wrap,
.elementor-inner-section {
  overflow-x: clip;
}

/* ─────────────────────────────────────────
   BODY / PAGE — Elementor full-width
   ───────────────────────────────────────── */
.ta-site-content {
  min-height: calc(100vh - 80px);
}

/* Cuando Elementor Theme Builder está activo */
.elementor-header-footer--active .ta-site-header,
.elementor-header-footer--active .ta-site-footer {
  display: none;
}

/* ─────────────────────────────────────────
   SELECCIÓN DE TEXTO
   ───────────────────────────────────────── */
::selection {
  background-color: var(--ta-primary-fixed);
  color: var(--ta-primary-dark);
}

/* ─────────────────────────────────────────
   SCROLLBAR PERSONALIZADO
   ───────────────────────────────────────── */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--ta-surface-container-low);
}
::-webkit-scrollbar-thumb {
  background: var(--ta-primary);
  border-radius: var(--ta-radius-full);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--ta-primary-container);
}