/*
 * ITG Energy — Compresores Industriales
 * Design tokens extraídos de Minemo (ThemetechMount) con valores de ITG Energy.
 *
 * Minemo define sus estilos vía CSS custom properties (--prt-*).
 * Aquí declaramos los mismos tokens con los valores de ITG y
 * los aplicamos sobre la estructura de ForgeCore/Tailwind.
 *
 * Referencia: Minemo/css/main.css + Minemo/css/dynamic-style.php
 */

/* ── Fondo beige Minemo (prt-bgcolor-grey = #faf7f4, no gris) ─ */
.itg-section--light,
.itg-form-section,
.itg-credibility {
    background: var(--prt-greycolor, #faf7f4) !important;
}

/* ── Fuente adicional: Krona One (botones/nav en Minemo) ────── */
@import url('https://fonts.googleapis.com/css2?family=Krona+One&display=swap');

/* ════════════════════════════════════════════════════════════════
   1. VARIABLES — Minemo + ITG Energy
   (mismos nombres que usa dynamic-style.php del tema padre)
   ════════════════════════════════════════════════════════════════ */
:root {
  /* Colores */
  --prt-skincolor:        #00a0df;
  --prt-secondarycolor:   #000000;
  --prt-greycolor:        #faf7f4;
  --prt-bordercolor:      #e3e3e3;
  --prt-whitecolor:       #ffffff;

  /* Tipografía body */
  --body-font-family:     'Segoe UI', Arial, Helvetica, sans-serif;
  --body-font-size:       16px;
  --body-line-height:     26px;
  --body-fonts-color:     #0a0a0a;

  /* Tipografía headings */
  --special-element-fontfamily: 'Viga', Arial, Helvetica, sans-serif;
  --special-element-fontweight: 700;

  /* H3 / H4 exactos del design-system */
  --h3-fontsize:         30px;
  --h3-font-line-height: 40px;
  --h4-fontsize:         20px;
  --h4-font-line-height: 30px;

  /* Botones — Minemo button variables */
  --prt-button-shape:     10px;      /* 'rounded' en opciones de Minemo */
  --button-font-family:   'Krona One', Arial, Helvetica, sans-serif;
  --button-font-weight:   400;
  --button_fontsize:      12px;
  --button-text-transform: uppercase;
  --button-topbottom-padding: 12px;

  /* Sombra Minemo servicebox */
  --minemo-shadow-box:    0px 0px 7px 0px rgba(43, 52, 59, 0.08);
  --minemo-shadow-hover:  0 5px 35px rgba(0, 0, 0, 0.10);
}

/* ════════════════════════════════════════════════════════════════
   2. BODY — tipografía base
   ════════════════════════════════════════════════════════════════ */
body {
  font-family:  var(--body-font-family);
  font-size:    var(--body-font-size);
  line-height:  var(--body-line-height);
  color:        var(--body-fonts-color);
}

/* ════════════════════════════════════════════════════════════════
   3. BOTONES — Krona One, 10px radius, 12px
   ForgeCore genera: <a class="... tracking-widest ...">
   ════════════════════════════════════════════════════════════════ */
a[class*="tracking-widest"],
button[class*="tracking-widest"] {
  font-family:     var(--button-font-family) !important;
  font-size:       var(--button_fontsize) !important;
  font-weight:     var(--button-font-weight) !important;
  text-transform:  var(--button-text-transform) !important;
  border-radius:   var(--prt-button-shape) !important;
  letter-spacing:  0.10em !important;
}

/* ════════════════════════════════════════════════════════════════
   4. HEADER — borde inferior con skincolor (igual que Minemo nav)
   ════════════════════════════════════════════════════════════════ */
header.sticky {
  border-bottom-color: var(--prt-skincolor) !important;
  border-bottom-width: 3px !important;
}

/* ════════════════════════════════════════════════════════════════
   5. TRUST STRIP — borde inferior skincolor
   ════════════════════════════════════════════════════════════════ */
section.border-b-4.border-industrial-dark {
  border-bottom-color: var(--prt-skincolor) !important;
  border-bottom-width: 3px !important;
}

/* ════════════════════════════════════════════════════════════════
   6. GRIDS / CARDS EN SECCIONES CLARAS
   Minemo: box-shadow 0px 0px 7px 0px rgba(43,52,59,.08), sin borde duro
   ForgeCore: border-4 border-industrial-dark (4px negro pesado)
   ════════════════════════════════════════════════════════════════ */

/* Contenedor exterior de grids en fondo blanco/surface */
.bg-white        > div > div.border-4.border-industrial-dark,
.bg-surface-low  > div > div.border-4.border-industrial-dark {
  border:        1px solid var(--prt-bordercolor) !important;
  box-shadow:    var(--minemo-shadow-box);
  border-radius: 10px;
  overflow:      hidden;
}

/* Divisores internos horizontales en fondo claro */
.bg-white       [class*="border-b-4"][class*="border-industrial-dark"],
.bg-surface-low [class*="border-b-4"][class*="border-industrial-dark"] {
  border-bottom: 1px solid var(--prt-bordercolor) !important;
}

/* Divisores internos verticales en fondo claro */
.bg-white       [class*="border-r-4"][class*="border-industrial-dark"],
.bg-surface-low [class*="border-r-4"][class*="border-industrial-dark"] {
  border-right: 1px solid var(--prt-bordercolor) !important;
}

/* Hover en cards de secciones claras — sombra Minemo hover */
.bg-white       [class*="hover:bg-industrial-dark"]:hover,
.bg-surface-low [class*="hover:bg-industrial-dark"]:hover {
  box-shadow:    var(--minemo-shadow-hover);
  border-color:  var(--prt-skincolor) !important;
}

/* ════════════════════════════════════════════════════════════════
   7. CHECKLIST CREDIBILIDAD — border-4 oscuro → Minemo style
   ════════════════════════════════════════════════════════════════ */
.bg-white .border-4.border-industrial-dark {
  border:        1px solid var(--prt-bordercolor) !important;
  box-shadow:    var(--minemo-shadow-box);
  border-radius: 10px;
}
.bg-white .border-b-4.border-industrial-dark {
  border-bottom: 1px solid var(--prt-bordercolor) !important;
}

/* ════════════════════════════════════════════════════════════════
   8. SECCIONES OSCURAS — mantener fondo oscuro, ajustar detalles
   ════════════════════════════════════════════════════════════════ */

/* Grid dots con tono de marca en vez de negro */
.industrial-grid {
  background-image: radial-gradient(rgba(0, 160, 223, 0.09) 1px, transparent 1px);
  background-size:  32px 32px;
}

/* Grids en secciones dark: mantener bordes blancos/sutiles */
.bg-industrial-dark [class*="border-b-4"][class*="border-white"] {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
.bg-industrial-dark [class*="border-r-4"][class*="border-white"] {
  border-right-color: rgba(255, 255, 255, 0.08) !important;
}
.bg-industrial-dark .border-4.border-white\/10 {
  border-color: rgba(255, 255, 255, 0.06) !important;
}

/* ════════════════════════════════════════════════════════════════
   9. HERO — detalles decorativos
   ════════════════════════════════════════════════════════════════ */
/* Label badge redondeado */
section .inline-block.bg-primary {
  border-radius: 4px;
}
/* Watermark con tono de marca */
section .pointer-events-none.select-none {
  color: rgba(0, 160, 223, 0.06) !important;
}

/* ════════════════════════════════════════════════════════════════
   10. TIPOGRAFÍA — headings en secciones claras
   Minemo usa 50px para h1/h2, 30px h3, 20px h4
   ════════════════════════════════════════════════════════════════ */
.bg-white       h2.font-headline,
.bg-surface-low h2.font-headline {
  font-size:      clamp(32px, 4vw, 50px) !important;
  letter-spacing: -0.01em;
  line-height:    1.1;
}

/* ════════════════════════════════════════════════════════════════
   11. TRUST STRIP — separadores verticales Minemo-style
   ════════════════════════════════════════════════════════════════ */
.border-r.border-industrial-dark\/10 {
  border-right-color: var(--prt-bordercolor) !important;
  border-right-width: 1px !important;
}

/* ════════════════════════════════════════════════════════════════
   12. FORMULARIO — card oscuro con acento skincolor
   ════════════════════════════════════════════════════════════════ */
.border-b-8.border-primary {
  border-bottom-color: var(--prt-skincolor) !important;
  border-bottom-width: 4px !important;
  border-radius: 0 0 10px 10px;
}

/* ════════════════════════════════════════════════════════════════
   13. FOOTER — separadores sutiles
   ════════════════════════════════════════════════════════════════ */
footer .border-t {
  border-top-color: rgba(0, 160, 223, 0.12) !important;
}