/* =========================================================
   01-BASE.CSS
   Carrocerías Hernández
   Base global: fuentes, variables, reset, body, tipografía,
   enlaces, imágenes y contenedor maestro.

   NOTA DE TRABAJO:
   Este archivo NO debe contener header, footer, botones,
   tarjetas, banners, animaciones, grids ni secciones.
   Eso se trabajará en hojas posteriores.
========================================================= */


/* =========================================================
   1. FUENTES
   Myriad Pro es la familia principal detectada/definida
   para el sitio. En el HTML solo se precargan Regular y Bold
   por rendimiento; Light y Semibold quedan disponibles vía CSS.
========================================================= */

@font-face{
  font-family: "Myriad Pro";
  src: url("../fonts/myriadpro-light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "Myriad Pro v2";
  src: url("../fonts/myriadpro-light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "MyriadPro";
  src: url("../fonts/myriadpro-light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "Myriad Pro";
  src: url("../fonts/myriadpro-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "Myriad Pro v2";
  src: url("../fonts/myriadpro-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "MyriadPro";
  src: url("../fonts/myriadpro-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "Myriad Pro";
  src: url("../fonts/myriadpro-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "Myriad Pro v2";
  src: url("../fonts/myriadpro-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "MyriadPro";
  src: url("../fonts/myriadpro-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "Myriad Pro";
  src: url("../fonts/myriadpro-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "Myriad Pro v2";
  src: url("../fonts/myriadpro-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "MyriadPro";
  src: url("../fonts/myriadpro-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* =========================================================
   2. VARIABLES GLOBALES
   Centralización de colores, tamaños, bordes y transiciones.
   Los comentarios indican el uso visual detectado o previsto.
========================================================= */

:root{

  /* -------------------------
     FUENTE GLOBAL
  ------------------------- */

  --font-primary: "Myriad Pro v2", "MyriadPro", "Myriad Pro", Arial, Helvetica, sans-serif;


  /* -------------------------
     COLORES CORPORATIVOS
  ------------------------- */

  --color-primary: #003B71;
  /* Azul institucional principal: theme-color, encabezados, fondos fuertes y elementos corporativos. */

  --color-primary-dark: #002B52;
  /* Azul más profundo: fondos oscuros, footer o variantes de contraste. */

  --color-banner-primary: #001E50;
  --color-primary-soft: #EAF1F8;
  --color-purpose-panel: #E5EEF7;
  /* Azul muy claro: fondos suaves, bloques de apoyo o áreas secundarias. */

  --color-accent: #C40012;
  /* Rojo de acento: usado visualmente en casos de éxito/detalles destacados. */

  --color-accent-dark: #99000E;
  /* Rojo profundo: posible hover o contraste del acento rojo. */


  /* -------------------------
     COLORES NEUTROS
  ------------------------- */

  --color-white: #FFFFFF;
  /* Blanco base: fondos limpios, texto sobre fondos oscuros y áreas principales. */

  --color-black: #000000;
  /* Negro puro: uso mínimo, solo cuando se requiera contraste máximo. */

  --color-text: #1F1F1F;
  /* Texto principal: párrafos, contenido general y textos largos. */

  --color-text-soft: #555555;
  /* Texto secundario: bajadas, descripciones, textos de apoyo. */

  --color-text-light: #FFFFFF;
  /* Texto sobre fondos azules/oscuros. */

  --color-gray-100: #F7F7F7;
  /* Fondo gris muy claro: áreas suaves, separadores visuales o fondos alternos. */

  --color-section-muted: #F3F3F3;
  --color-panel-soft: #F7F9FC;
  --color-gray-200: #EEEEEE;
  /* Bordes claros: logos de clientes, tarjetas suaves, separadores. */

  --color-divider-soft: #E2E2E2;
  --color-divider-light: #F1F1F1;
  --color-border-soft: #E6E6E6;
  --color-gray-300: #DDDDDD;
  /* Bordes medios: divisiones, líneas superiores, cajas o módulos con borde. */

  --color-gray-400: #BDBDBD;
  /* Gris de apoyo: líneas decorativas o bordes con más presencia. */

  --color-slider-dot: #D6D6D6;
  --color-social-block: #C8D1DD;
  --color-success-copy: #334155;
  --color-success-client: #0E2742;
  --color-success-highlight: #39424E;
  --color-success-body: #2F3740;
  --color-dark-line: #111111;
  --color-button-blue: #245DA0;
  --color-logo-border: #C8C8C8;
  --color-faq-heading-line: rgba(11, 44, 95, 0.45);
  --color-form-border: #CACACA;
  --color-footer-divider: #E7E7E7;
  --color-modal-overlay: rgba(0,30,80,.62);
  --color-gray-700: #4A4A4A;
  /* Texto gris fuerte: subtítulos o información secundaria con buena lectura. */


  /* -------------------------
     COLORES DE INTERACCIÓN
  ------------------------- */

  --color-link: var(--color-primary);
  /* Enlaces generales. */

  --color-link-hover: var(--color-accent);
  /* Hover de enlaces/menú cuando se requiera acento visual. */

  --color-menu-text: #1F1F1F;
  /* Texto de menú en estado normal. */

  --color-menu-hover: var(--color-primary);
  /* Hover del menú principal. */

  --color-menu-divider: var(--color-gray-300);
  --color-topbar-hover: rgba(255,255,255,.86);
  --color-mobile-control-bg: var(--color-section-muted);
  --color-mobile-action-bg: #DEDEDE;
  --color-mobile-menu-text: #33373D;
  --color-mobile-submenu-bg: #F4F4F4;
  --color-mobile-submenu-border: #D3D3D3;
  /* Divisiones pequeñas del menú y línea cercana al logo. */


  /* -------------------------
     BORDES Y LÍNEAS
  ------------------------- */

  --border-light: 1px solid var(--color-gray-200);
  /* Bordes suaves: logos, módulos claros, tarjetas discretas. */

  --border-base: 1px solid var(--color-gray-300);
  /* Borde general: divisores, cajas, áreas con separación visible. */

  --border-strong: 1px solid var(--color-gray-400);
  /* Borde más marcado: títulos con línea o módulos que requieren presencia. */

  --feature-bg-1: #FDFDFD;
  --feature-bg-2: #FBFBFB;
  --feature-bg-3: #FDFEFE;
  --feature-bg-4: #FCFCFC;
  --section-title-border-color: #D9D9D9;
  /* Borde gris usado en títulos principales enmarcados. */

  --feature-divider-color: #E3E3E3;
  /* Separadores verticales/horizontales de beneficios. */

  --feature-card-shadow: 0 18px 50px rgba(0,0,0,.06);
  --shadow-footer-legal: 0 16px 49px -5px rgba(235, 235, 235, 0.65);
  --shadow-social-icon: 0 0 81px -5px rgba(79, 89, 104, 0.35);
  --shadow-social-icon-hover: 0 0 58px -8px rgba(79, 89, 104, 0.42);
  --shadow-button-hover: 0 0 28px -14px rgba(79, 89, 104, 0.55);
  --shadow-success-arrow: 0 8px 18px rgba(0, 0, 0, 0.06);
  --shadow-purpose-panel: 0 8px 15px rgba(212, 230, 236, .56);
  --shadow-product-faq: 0 8px 77px rgba(0, 0, 0, .06);
  /* Sombra suave de bloques de beneficios. */

  --framed-title-border: 3px solid #D9D9D9;
  --framed-title-underline: #0F3768;
  --framed-title-padding-block: 18px;
  --framed-title-padding-inline: 26px;
  --framed-title-underline-height: 4px;
  /* Títulos enmarcados reutilizables con línea azul inferior adaptable. */


  /* -------------------------
     ANCHO Y ESPACIADO BASE
  ------------------------- */

  --container-width: 1200px;
  --container-half-width: 600px;
  --topbar-height: 30px;
  --header-nav-height: 94px;
  /* Ancho maestro indicado para respetar el diseño actual. */

  --container-padding: 20px;
  /* Aire lateral general en escritorio/tablet. */

  --section-space: 70px;
  --index-section-gap: 34px;
  /* Separación vertical base entre bloques grandes. Se ajustará en responsive. */

  --space-xs: 5px;
  --space-sm: 10px;
  --space-md: 20px;
  --space-lg: 40px;
  --space-xl: 70px;


  /* -------------------------
     TIPOGRAFÍA GLOBAL
     Centraliza tamaños detectados/recurrentes.
  ------------------------- */

  --text-xs: 12px;
  /* Texto muy pequeño: notas, legales o microtextos. */

  --text-sm: 14px;
  /* Topbar, datos superiores, textos compactos por espacio. */

  --text-base: 16px;
  /* Texto general del sitio. */

  --text-md: 18px;
  /* Bajadas, textos destacados o párrafos amplios. */

  --text-lg: 22px;
  /* Subtítulos o textos introductorios de mayor presencia. */

  --h5-size: 18px;
  /* Títulos pequeños: footer, datos de contacto, etiquetas de bloque. */

  --h4-size: 22px;
  /* Títulos intermedios: beneficios o encabezados internos. */

  --h3-size: 26px;
  /* Subtítulos de bloque: retos, soluciones, módulos internos. */

  --h2-size: 36px;
  /* Títulos principales de sección: casos de éxito, clientes, bloques importantes. */

  --h1-size: 46px;
  /* Título principal/banners: se centraliza para evitar variaciones de 1-2px. */

  --section-title-box-size: 31px;
  /* Títulos principales dentro de caja gris: index y bloques editoriales. */

  --section-title-box-line: 37.2px;
  /* Interlineado detectado para títulos principales dentro de caja. */

  --section-description-size: 20px;
  /* Bajadas descriptivas centradas debajo de títulos principales. */

  --section-description-line: 24.08px;
  /* Interlineado detectado para bajadas de sección en la página actual. */

  --feature-title-size: 20.43px;
  /* Títulos de beneficios/atributos: entregas puntuales, certificación, garantía. */

  --feature-title-line: 26.56px;
  /* Interlineado de títulos de beneficios. */

  --feature-text-size: 17px;
  /* Texto descriptivo de beneficios. */

  --feature-text-line: 21px;
  /* Interlineado de textos de beneficios. */

  --type-page-title-size: 31px;
  --type-page-title-line: 43.4px;
  --type-page-title-weight: 300;
  /* H1 único por página: títulos principales de home, nosotros, productos y contacto. */

  --type-box-title-size: var(--section-title-box-size);
  --type-box-title-line: var(--section-title-box-line);
  --type-box-title-weight: 600;
  /* Títulos principales enmarcados con borde gris. */

  --type-section-title-size: 31px;
  --type-section-title-line: 37.2px;
  --type-section-title-weight: 600;
  /* Títulos grandes de secciones internas sin depender de la etiqueta HTML. */

  --type-product-title-size: 28px;
  --type-product-title-line: 36.4px;
  --type-product-title-weight: 300;
  /* Títulos de productos/listados. */

  --type-product-page-title-size: 22px;
  --type-product-page-title-line: 28px;
  --type-product-page-title-weight: 700;
  --type-product-intro-size: 14px;
  --type-product-intro-line: 18px;
  --type-product-intro-weight: 500;
  --type-product-card-title-size: 28px;
  --type-product-card-title-line: 36.4px;
  --type-product-card-title-weight: 700;
  --type-product-card-text-size: var(--type-body-large-size);
  --type-product-card-text-line: var(--type-body-large-line);
  --type-product-card-text-weight: var(--type-body-large-weight);
  --type-product-faq-label-size: 16px;
  --type-product-faq-label-line: 18px;
  --type-product-faq-label-weight: 700;
  --type-product-faq-question-size: 20px;
  --type-product-faq-question-line: 24px;
  --type-product-faq-question-weight: 700;
  --type-product-faq-answer-size: 16px;
  --type-product-faq-answer-line: 22px;
  --type-product-faq-answer-weight: 500;
  /* Escala reusable para paginas de productos: carrocerias, semirremolques y reparaciones. */

  --type-card-title-size: 26.4px;
  --type-card-title-line: 29.12px;
  --type-card-title-weight: 600;
  /* Títulos de beneficios y cards. */

  --type-body-large-size: 20px;
  --type-body-large-line: 26.4px;
  --type-body-large-weight: 400;
  /* Texto principal de secciones. */

  --type-body-size: 16px;
  --type-body-line: 24px;
  --type-body-weight: 400;
  --type-section-copy-weight: 400;
  /* Texto general. */

  --type-body-compact-size: 16px;
  --type-body-compact-line: 20px;
  --type-body-compact-weight: 400;
  --type-testimonial-name-weight: 600;
  --type-testimonial-role-weight: 600;
  /* Testimonios, textos compactos y bloques densos. */

  --type-feature-text-size: 17px;
  --type-feature-text-line: 21px;
  --type-feature-text-weight: 400;
  /* Descripción de beneficios. */

  --type-menu-size: 17px;
  --type-menu-line: 20px;
  --type-menu-weight: 600;
  /* Menú principal. */

  --type-topbar-address-size: 12px;
  --type-topbar-address-line: 26.4px;
  --type-topbar-address-weight: 400;
  /* Dirección en barra superior. */

  --type-topbar-phone-size: 16px;
  --type-topbar-phone-line: 26.4px;
  --type-topbar-phone-weight: 400;
  /* Teléfonos en barra superior. */

  --type-submenu-size: 16px;
  --type-submenu-line: 1;
  --type-submenu-weight: 700;
  /* Submenú de productos. */

  --type-button-size: 15px;
  --type-button-line: 15px;
  --type-button-weight: 500;
  /* Botones de formulario y CTAs compactos. */

  --type-cta-title-size: 40px;
  --type-cta-title-line: 52px;
  --type-cta-title-weight: 600;
  /* Banners azules tipo cotización/necesitas. */

  --type-cta-text-size: 22px;
  --type-cta-text-line: 28.6px;
  --type-cta-text-weight: 600;
  /* Texto secundario en banners CTA. */

  --type-footer-title-size: 18px;
  --type-footer-title-line: 18px;
  --type-footer-title-weight: 600;
  /* Títulos del footer. */

  --type-footer-link-size: 16px;
  --type-footer-link-line: 20.8px;
  --type-footer-link-weight: 600;
  --footer-nav-link-width: 270px;
  /* Enlaces secundarios del footer. */

  --type-footer-data-size: 16px;
  --type-footer-data-line: 26.4px;
  --type-footer-data-weight: 500;
  --type-footer-address-size: var(--type-footer-data-size);
  --type-footer-address-line: var(--type-footer-data-line);
  --type-footer-address-weight: var(--type-footer-data-weight);
  --type-footer-phone-size: var(--type-footer-data-size);
  --type-footer-phone-line: var(--type-footer-data-line);
  --type-footer-phone-weight: var(--type-footer-data-weight);
  --type-footer-email-size: var(--type-footer-data-size);
  --type-footer-email-line: var(--type-footer-data-line);
  --type-footer-email-weight: var(--type-footer-data-weight);
  --type-footer-cert-size: 9px;
  --type-footer-cert-line: 9px;
  --type-footer-legal-link-size: 17px;
  --type-footer-legal-link-line: 26.4px;
  --type-footer-legal-link-weight: 600;
  /* Textos específicos del footer detectados en la referencia. */

  --type-footer-legal-size: 16px;
  --type-footer-legal-line: 14px;
  --type-footer-legal-weight: 200;
  /* Barra legal final. */

  --line-tight: 1.1;
  --line-heading: 1.18;
  --line-base: 1.5;


  /* -------------------------
     PESOS TIPOGRÁFICOS
  ------------------------- */

  --weight-thin: 100;
  --weight-extra-light: 200;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;


  /* -------------------------
     RADIOS Y TRANSICIONES
  ------------------------- */

  --radius-sm: 4px;
  /* Bordes mínimos si algún módulo actual lo requiere. */

  --radius-md: 8px;
  /* Radio medio para elementos reutilizables futuros. */

  --transition-base: 180ms ease;
  /* Transición global para hovers sencillos. */}


/* =========================================================
   3. RESET BÁSICO
   Limpieza general sin modificar visualmente el diseño.
========================================================= */

*,
*::before,
*::after{
  box-sizing: border-box;
}

html{
  margin: 0;
  padding: 0;
  overflow-x: clip;
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd{
  margin: 0;
}

ul,
ol{
  margin: 0;
  padding: 0;
}

button,
input,
textarea,
select{
  font: inherit;
}

button{
  border: 0;
  background: none;
  cursor: pointer;
}


/* =========================================================
   4. BODY
   Base general del sitio. No altera layout ni secciones.
========================================================= */

body{
  min-width: 320px;
  margin: 0;
  overflow-x: clip;
  font-family: var(--font-primary);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--line-base);
  color: var(--color-text);
  background-color: var(--color-white);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* =========================================================
   5. TIPOGRAFÍA GLOBAL
   Jerarquía centralizada para evitar diferencias mínimas
   entre H1, H2, H3, H4 y H5 en distintas páginas.
========================================================= */

h1,
h2,
h3,
h4,
h5,
h6{
  font-family: var(--font-primary);
  color: inherit;
  line-height: var(--line-heading);
  font-weight: var(--weight-bold);
}

h1{
  font-size: var(--type-page-title-size);
  line-height: var(--type-page-title-line);
  font-weight: var(--type-page-title-weight);
  /* Banners/título principal. Mantener un solo H1 real por página cuando se arme el HTML. */
}

h2{
  font-size: var(--type-section-title-size);
  line-height: var(--type-section-title-line);
  font-weight: var(--type-section-title-weight);
  /* Títulos principales de sección: clientes, casos de éxito, CTA secundarios. */
}

h3{
  font-size: var(--type-card-title-size);
  line-height: var(--type-card-title-line);
  font-weight: var(--type-card-title-weight);
  /* Subtítulos internos: reto, solución, resultado, bloques de contacto o cards futuras. */
}

h4{
  font-size: var(--h4-size);
  /* Encabezados compactos: hero actual, beneficios o textos destacados. */
}

h5{
  font-size: var(--h5-size);
  /* Footer/contacto: ubicación, teléfonos, correo electrónico y etiquetas informativas. */
}

h6{
  font-size: var(--text-base);
}

p{
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-line);
  color: inherit;
}

strong,
b{
  font-weight: var(--weight-bold);
}

small{
  font-size: var(--text-sm);
}

.type-page-title{
  font-size: var(--type-page-title-size);
  line-height: var(--type-page-title-line);
  font-weight: var(--type-page-title-weight);
}

.type-box-title{
  font-size: var(--type-box-title-size);
  line-height: var(--type-box-title-line);
  font-weight: var(--type-box-title-weight);
}

.type-section-title{
  font-size: var(--type-section-title-size);
  line-height: var(--type-section-title-line);
  font-weight: var(--type-section-title-weight);
}

.type-product-title{
  font-size: var(--type-product-title-size);
  line-height: var(--type-product-title-line);
  font-weight: var(--type-product-title-weight);
}

.type-card-title{
  font-size: var(--type-card-title-size);
  line-height: var(--type-card-title-line);
  font-weight: var(--type-card-title-weight);
}

.type-body-large{
  font-size: var(--type-body-large-size);
  line-height: var(--type-body-large-line);
  font-weight: var(--type-body-large-weight);
}

.section-intro-text{
  margin: 0 auto;
  color: var(--color-black);
  font-family: var(--font-primary);
  font-size: var(--type-body-large-size);
  line-height: var(--type-body-large-line);
  font-weight: var(--type-body-large-weight);
  letter-spacing: 0;
  text-align: center;
}

.section-intro-text p{
  margin: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: inherit;
}

.type-body{
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  font-weight: var(--type-body-weight);
}

.type-body-compact{
  font-size: var(--type-body-compact-size);
  line-height: var(--type-body-compact-line);
  font-weight: var(--type-body-compact-weight);
}

.type-feature-text{
  font-size: var(--type-feature-text-size);
  line-height: var(--type-feature-text-line);
  font-weight: var(--type-feature-text-weight);
}

.type-cta-title{
  font-size: var(--type-cta-title-size);
  line-height: var(--type-cta-title-line);
  font-weight: var(--type-cta-title-weight);
}

.type-cta-text{
  font-size: var(--type-cta-text-size);
  line-height: var(--type-cta-text-line);
  font-weight: var(--type-cta-text-weight);
}

.section-framed-title{
  position: relative;
  display: inline-block;
  width: auto;
  max-width: min(calc(100% - 32px), 1040px);
  box-sizing: border-box;
  margin: 0;
  padding: var(--framed-title-padding-block) var(--framed-title-padding-inline);
  color: #000;
  border: var(--framed-title-border);
  font-family: var(--font-primary);
  font-size: var(--type-section-title-size);
  line-height: var(--type-section-title-line);
  font-weight: var(--type-section-title-weight);
  letter-spacing: 0;
  text-align: center;
  text-wrap: balance;
}

.section-framed-title--underline::after{
  content: "";
  position: absolute;
  right: var(--framed-title-padding-inline);
  bottom: calc(var(--framed-title-underline-height) * -0.75);
  left: var(--framed-title-padding-inline);
  height: var(--framed-title-underline-height);
  background: var(--framed-title-underline);
}

.section-framed-title--medium{
  max-width: min(calc(100% - 32px), 780px);
}


/* =========================================================
   6. ENLACES
   Base general. Los estilos específicos de menú/botones
   se trabajan después en layout/componentes.
========================================================= */

a{
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--transition-base);
}

a:hover,
a:focus{
  color: var(--color-link-hover);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}


/* =========================================================
   7. IMÁGENES Y MEDIOS
   Previene desbordes y conserva proporción.
========================================================= */

img,
picture,
video,
canvas,
svg{
  display: block;
  max-width: 100%;
}

img,
video{
  height: auto;
}


/* =========================================================
   8. CONTENEDOR GLOBAL
   Ancho maestro 1200px para respetar el diseño aprobado.
========================================================= */

.container,
.contenedor{
  width: min(100% - calc(var(--container-padding) * 2), var(--container-width));
  margin-inline: auto;
}