/*
 Theme Name:   Tabinor
 Description:  Tema hijo para Tabinor
 Author:       Nestor Pons
 Template:     hello-elementor
 Version:      1.0.0
*/

:root {
  /* =========================
     BRAND COLORS
     ========================= */
  --tn-color-primary: rgb(0, 0, 128);
  /* Azul corporativo TABιNOR */
  --tn-color-secondary: rgb(255, 0, 0);
  /* Rojo corporativo (elipse) */
  --tn-color-primary-contrast: #ffffff;
  --tn-color-auxiliar: #f1b83a;
  --tn-color-auxiliar-dark: #d4a02d;

  /* =========================
     NEUTRALS / UI
     ========================= */
  --tn-color-bg: #ffffff;
  --tn-color-bg-soft: #f7f7f7;
  --tn-color-bg-muted: #f0f0f0;
  --tn-color-text-footer: #ffffff;

  --tn-color-text: #333333;
  --tn-color-text-muted: #666666;
  --tn-color-text-soft: #777777;

  --tn-color-border: #ececec;
  --tn-color-border-soft: #e7e7e7;
  --tn-color-border-strong: #cfcfcf;

  /* =========================
     HEADER / NAV
     ========================= */
  --tn-header-bg: rgba(255, 255, 255, 1);
  --tn-header-bg-scrolled: rgba(255, 255, 255, 0.8);
  --tn-header-shadow: 0 10px 26px rgba(0, 0, 0, 0.08);
  --tn-header-shadow-scrolled: 0 8px 18px rgba(0, 0, 0, 0.1);
  --tn-header-blur: blur(12px);

  --tn-topbar-bg: #ffffff;
  --tn-topbar-font-size: 12px;

  /* =========================
     TYPOGRAPHY
     ========================= */
  --tn-font-base: Arial, Helvetica, sans-serif;
  --tn-font-heading: Arial, Helvetica, sans-serif;

  --tn-font-size-base: 14px;
  --tn-font-size-small: 12px;
  --tn-font-size-nav: 13px;

  --tn-font-weight-regular: 400;
  --tn-font-weight-medium: 500;
  --tn-font-weight-bold: 700;

  --tn-letter-spacing-nav: 0.12em;
  --tn-text-transform-nav: uppercase;

  /* =========================
     ICONS / UI ELEMENTS
     ========================= */
  --tn-icon-size: 13px;
  --tn-caret-size: 12px;
  --tn-social-size: 18px;

  /* =========================
     SPACING / LAYOUT
     ========================= */
  --tn-container-max-width: 90%;
  --tn-container-padding: 18px;

  --tn-gap-xs: 6px;
  --tn-gap-sm: 8px;
  --tn-gap-md: 14px;
  --tn-gap-lg: 18px;
  --tn-gap-xl: 22px;

  /* =========================
     HEADER SIZES
     ========================= */
  --tn-header-padding: 12px;
  --tn-header-padding-scrolled: 8px;
  --tn-header-height-scrolled: 50px;

  --tn-logo-height: 45px;
  --tn-logo-height-scrolled: 35px;

  /* =========================
     TRANSITIONS / MOTION
     ========================= */
  --tn-ease-default: cubic-bezier(0.2, 0.8, 0.2, 1);
  --tn-transition-fast: 0.2s;
  --tn-transition-base: 0.25s;
  --tn-transition-slow: 0.4s;

  /* =========================
     BREAKPOINTS
     ========================= */
  --tn-breakpoint-mobile: 700px;
}

/* Reset de anchos del tema padre para permitir el diseño full-width de TABINOR */
.page-header .entry-title,
.site-footer .footer-inner,
.site-footer:not(.dynamic-footer),
.site-header .header-inner,
.site-header:not(.dynamic-header),
body:not([class*="elementor-page-"]) .site-main {
  max-width: none !important;
  /* Anulamos los 800px */
  width: 100%;
}

/* Aseguramos que nuestro contenedor sea el que mande ahora */
.tn-container {
  max-width: var(--tn-container-max-width);
  /* Tu 90% definido en :root */
  margin-left: auto;
  margin-right: auto;
  padding: 2rem 0;
}

/* Estilos generales para las nuevas secciones */
.tn-alt {
  background-color: #f9f9f9;
}

.tn-tag {
  color: var(--tn-color-primary);
  /* Rojo corporativo para destacar [cite: 4] */
  font-weight: bold;
  text-transform: uppercase;
  font-size: 0.8rem;
}

.tn-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.tn-panel--dark {
  background: var(--tn-color-secondary);
  /* Azul corporativo [cite: 3] */
  color: white;
  padding: 40px;
  border-radius: 8px;
}

.tn-panel--dark h3{
  font-size: 24px;
}

.tn-panel--dark{ 
  font-weight: bold ;
}

.tn-cards {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px 0;
}

.tn-card {
  max-width: 325px;
  background: white;
  padding: 30px;
  border: 1px solid #eee;
  transition: transform 0.3s ease;
}

.tn-card a {
  color: var(--tn-color-text);
}

.tn-card:hover {
  transform: translateY(-10px);
}

/* Proceso */
.tn-process__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  text-align: center;
}

.tn-step-num {
  display: block;
  font-size: 3rem;
  font-weight: 800;
  color: rgba(0, 0, 128, 0.1);
  margin-bottom: -20px;
}

.tn-section {
  margin-bottom: 0;
}

.tn-section-title {
  text-align: center;
  margin-bottom: 50px;
}

.tn-section-title h2 {
  font-weight: bold;
  text-transform: uppercase;
  color: var(--tn-color-secondary);
}

#content {
  width: 90%;
  padding: 2rem 0;
  margin: 0 auto;
  min-height: 65vh;
}
.tn-project-card__cta{
  color: var(--tn-color-primary);
}
@media (max-width: 768px) {
  .tn-two-col {
    grid-template-columns: 1fr;
    /* Una sola columna en móvil */
    gap: 30px;
  }

  .tn-container {
    padding-left: 20px;
    padding-right: 20px;
  }

  .tn-two-col,
  .tn-process__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 580px) {
  .page-header .entry-title,
  .site-footer .footer-inner,
  .site-footer:not(.dynamic-footer),
  .site-header .header-inner,
  .site-header:not(.dynamic-header),
  body:not([class*="elementor-page-"]) .site-main {
    padding-inline-end: 0;
    padding-inline-start: 0;
  }
}

@media (max-width: 460px) {
  .tn-container {
    padding: 0;
  }
}