/*
@font-face {
  font-family: 'Frutiger';
  src: url('../fonts/Frutiger.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'FrutigerBold';
  src: url('../fonts/Frutiger_bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}
*/

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

* {
  font-family: 'Roboto', sans-serif;
}

:root {
  --brand-blue: #00478f;
  --brand-red: #e70033;
  --brand-white: #ffffff;
  --brand-black: #000000;
  --surface-light: #e6e8ed;
  --text-default: #272833;
  --container-max: 1200px;
  --container-padding-desktop: 2.5rem;
  --container-padding-tablet: 2rem;
  --container-padding-mobile: 1.5rem;
  --section-spacing-desktop: 4rem;
  --section-spacing-tablet: 3rem;
  --section-spacing-mobile: 2.5rem;
  --stack-gap-desktop: 2.5rem;
  --stack-gap-tablet: 2rem;
  --stack-gap-mobile: 1.5rem;
}

html {
  scroll-behavior: smooth;
}

.logo             { max-width: 200px; }
.bg-gradient-blue { background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-white) 100%); }
.logo-footer      { height: 24px; }
.text-shadow      { text-shadow: 0 2px 8px rgb(6 6 6 / 85%); }
.bg-gradient-dark-to-trasparent { background: var(--brand-black); background: linear-gradient(22deg,rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 50%); }

/* =============================================
   CLASES CUSTOM (reemplazan tailwind.config)
   ============================================= */

/* Colores de fondo */
.bg-primary          { background-color: var(--brand-blue) !important; }
.bg-primary-light    { background-color: var(--brand-white) !important; }
.bg-secondary        { background-color: var(--brand-red) !important; }
.bg-background-dark  { background-color: var(--brand-black) !important; }
.bg-background-light { background-color: var(--surface-light) !important; }

/* Colores de fondo con opacidad */
.bg-primary\/10      { background-color: rgba(0, 71, 143, 0.1) !important; }
.bg-primary\/90      { background-color: rgba(0, 71, 143, 0.9) !important; }

/* Colores de texto */
.text-primary        { color: var(--brand-blue) !important; }
.text-primary-light  { color: var(--brand-white) !important; }
.text-secondary      { color: var(--brand-red) !important; }

/* Hover sobre colores custom */
.hover\:text-primary:hover     { color: var(--brand-blue) !important; }
.hover\:bg-primary\/90:hover   { background-color: rgba(0, 71, 143, 0.9) !important; }

/* Focus ring/border con color primary */
.focus\:ring-primary:focus     { --tw-ring-color: var(--brand-blue); }
.focus\:border-primary:focus   { border-color: var(--brand-blue) !important; }

/* Sombras con color custom */
.shadow-primary\/20  { --tw-shadow-color: rgba(0, 71, 143, 0.2); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); }
.shadow-secondary\/20{ --tw-shadow-color: rgba(231, 0, 51, 0.2);  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); }

/* Fuente display */
/* .font-display        { font-family: 'Roboto', sans-serif; } */

/* Border radius custom */
.rounded             { border-radius: 0.25rem; }
.rounded-lg          { border-radius: 0.5rem; }
.rounded-xl          { border-radius: 0.75rem; }
.rounded-full        { border-radius: 9999px; }

/* Gradient Hero — usa background-dark como color de referencia */
.from-background-dark-50    { background-color:rgba(255, 255, 255, 0.5); }
.via-background-dark-50     { background-color:rgba(132, 133, 137, 0.5); }

/* Borders con opacidad (usadas en secciones oscuras) */
.border-white\/10    { border-color: rgba(255,255,255,0.10) !important; }
.border-white\/20    { border-color: rgba(255,255,255,0.20) !important; }

/* Backgrounds con opacidad (cards sobre fondo oscuro) */
.bg-white\/5         { background-color: rgba(255,255,255,0.05) !important; }
.bg-white\/10        { background-color: rgba(255,255,255,0.10) !important; }
.hover\:bg-white\/10:hover { background-color: rgba(255,255,255,0.10) !important; }

/* Textos con opacidad (sobre fondos oscuros) */
.text-white\/60      { color: rgba(255,255,255,0.60) !important; }
.text-white\/70      { color: rgba(255,255,255,0.70) !important; }
.text-white\/80      { color: rgba(255,255,255,0.80) !important; }