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

@font-face {
  font-family: "Budweiser Serif";
  src: url("../fonts/BudweiserSerif-Regular.woff2") format("woff2"),
    url("../fonts/BudweiserSerif-Regular.woff") format("woff"),
    url("../fonts/BudweiserSerif-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Budweiser Serif";
  src: url("../fonts/BudweiserSerif-RegularItalic.woff2") format("woff2"),
    url("../fonts/BudweiserSerif-RegularItalic.woff") format("woff"),
    url("../fonts/BudweiserSerif-RegularItalic.ttf") format("truetype");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

/* Variante bold para Budweiser Serif */
@font-face {
  font-family: "Budweiser Serif";
  src: url("../fonts/BudweiserSerif-Regular.woff2") format("woff2"),
    url("../fonts/BudweiserSerif-Regular.woff") format("woff"),
    url("../fonts/BudweiserSerif-Regular.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Budweiser Serif";
  src: url("../fonts/BudweiserSerif-RegularItalic.woff2") format("woff2"),
    url("../fonts/BudweiserSerif-RegularItalic.woff") format("woff"),
    url("../fonts/BudweiserSerif-RegularItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Budweiser Serif Display";
  src: url("../fonts/BudweiserSerif-Display.woff") format("woff"),
    url("../fonts/BudweiserSerif-Display.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Budweiser Serif Display";
  src: url("../fonts/BudweiserSerif-DisplayItalic.woff2") format("woff2"),
    url("../fonts/BudweiserSerif-DisplayItalic.woff") format("woff"),
    url("../fonts/BudweiserSerif-DisplayItalic.ttf") format("truetype");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

/* Variante bold para Budweiser Serif Display */
@font-face {
  font-family: "Budweiser Serif Display";
  src: url("../fonts/BudweiserSerif-Display.woff") format("woff"),
    url("../fonts/BudweiserSerif-Display.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Budweiser Serif Display";
  src: url("../fonts/BudweiserSerif-DisplayItalic.woff2") format("woff2"),
    url("../fonts/BudweiserSerif-DisplayItalic.woff") format("woff"),
    url("../fonts/BudweiserSerif-DisplayItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Bud Bold";
  src: url("../fonts/BudBold.otf") format("opentype");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

/* Variables globales */
:root {
  /* Colores principales */
  --primary-red: #da001c;
  --primary-blue: #0a0541;
  --color-white: #ffffff;

  /* Colores secundarios */
  --secondary-dark-red: #820014;
  --secondary-dark-silver: #888b8e;
  --secondary-silver: #b1b3b3;
  --secondary-light-silver: #d6d5d4;

  /* Otros colores */
  --other-dark-grey: #4f4e54;
  --other-grey: #5b6166;
  --other-light-grey: #f5f5f5;

  /* Bordes */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 16px;
  --border-color: rgba(0, 0, 0, 0.1);

  /* Fuentes */
  --font-primary: "Budweiser Serif", serif;
  --font-secondary: "Budweiser Serif Display", serif;
  --font-bud-bold: "Bud Bold", sans-serif;
  --font-roboto: "Roboto", sans-serif;

  /* Tamaños de fuente */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 24px;
  --font-size-xxl: 32px;

  /* Pesos de fuente */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* Spacings */
  --spacing-10: clamp(8px, 1.2vw, 10px);
  --spacing-20: clamp(12px, 1.4vw, 20px);
  --spacing-30: clamp(14px, 1.5vw, 30px);
  --spacing-35: clamp(15px, 1.7vw, 35px);
  --spacing-40: clamp(16px, 2.2vw, 40px);
  --spacing-50: clamp(20px, 2.5vw, 50px);
  --spacing-60: clamp(24px, 3vw, 60px);
  --spacing-70: clamp(28px, 3.5vw, 70px);
  --spacing-80: clamp(32px, 3.8vw, 80px);
  --spacing-90: clamp(36px, 4.3vw, 90px);
  --spacing-100: clamp(40px, 4.8vw, 100px);

  /* Transiciones */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* Container */
  --container-max-width: 1440px;

  /* Carousel */
  --carousel-font-size1: clamp(100px, 10vw, 150px);
  --carousel-font-size1-mobile: 52px;
  --carousel-font-size2: clamp(65px, 6vw, 110px);
  --carousel-font-size2-mobile: 32px;

  --carousel-line-height1: clamp(99px, 10vw, 149px);
  --carousel-line-height1-mobile: 52px;
  --carousel-line-height2: clamp(64px, 6vw, 109px);
  --carousel-line-height2-mobile: 32px;
}

/* Reset y estilos base */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

/* Contenedores */
.max-width-container {
  max-width: var(--container-max-width);
  margin: 0 auto;
}

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

a:hover {
  color: var(--color-secondary);
}

.font-h1 {
  font-family: var(--font-secondary);
  font-size: clamp(30px, 5vw, 71px);
  font-style: normal;
  font-weight: 700;
  line-height: clamp(28px, 5vw, 69px);
  text-transform: uppercase;
}

.font-h2 {
  font-family: var(--font-primary);
  font-size: clamp(20px, 3vw, 40px);
  font-style: normal;
  font-weight: 400;
}

.font-h3 {
  font-family: var(--font-secondary);
  font-size: clamp(40px, 5vw, 71px);
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
}

.font-h4 {
  font-family: var(--font-bud-bold);
  font-size: clamp(24px, 3vw, 37px);
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
}

.font-button {
  font-family: var(--font-bud-bold);
  font-size: clamp(14px, 1.5vw, 20px);
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
}

/* Botones */

.btn-transparent {
  background-color: transparent;
  color: var(--color-white);
  border: 2px solid var(--color-white);
  border-radius: 7px;
  padding: clamp(15px, 1.2vw, 17px) clamp(16px, 2.4vw, 37px);
  font-family: var(--font-bud-bold);
  font-size: clamp(16px, 1.5vw, 20px);
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  transition: all var(--transition-normal);

  &:hover {
    scale: 1.02;
    color: var(--color-white);
  }
}

.btn-white {
  background-color: var(--color-white);
  color: var(--primary-blue);
  border: 2px solid var(--color-white);
  border-radius: 7px;
  padding: clamp(15px, 1.2vw, 17px) clamp(16px, 2.4vw, 37px);
  font-family: var(--font-bud-bold);
  font-size: clamp(16px, 1.5vw, 20px);
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  transition: all var(--transition-normal);

  &:hover {
    scale: 1.02;
    color: var(--primary-blue);
  }
}

.btn-blue {
  background-color: var(--primary-blue);
  color: var(--color-white);
  border: 2px solid var(--color-blue);
  border-radius: 7px;
  padding: clamp(15px, 1.2vw, 17px) clamp(16px, 2.4vw, 37px);
  font-family: var(--font-bud-bold);
  font-size: clamp(16px, 1.5vw, 20px);
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  transition: all var(--transition-normal);

  &:hover {
    scale: 1.02;
    color: var(--color-white);
  }
}

.btn-red {
  background-color: var(--primary-red);
  color: var(--color-white);
  border: 2px solid var(--color-red);
  border-radius: 7px;
  padding: clamp(15px, 1.2vw, 17px) clamp(16px, 2.4vw, 37px);
  font-family: var(--font-bud-bold);
  font-size: clamp(16px, 1.5vw, 20px);
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  transition: all var(--transition-normal);

  &:hover {
    scale: 1.02;
    color: var(--color-white);
  }
}

.btn-blue-outline {
  background-color: var(--color-white);
  color: var(--primary-blue);
  border: 2px solid var(--primary-blue);
  border-radius: 7px;
  padding: clamp(15px, 1.2vw, 17px) clamp(16px, 2.4vw, 37px);
  font-family: var(--font-bud-bold);
  font-size: clamp(16px, 1.5vw, 20px);
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  transition: all var(--transition-normal);

  &:hover {
    scale: 1.02;
    color: var(--primary-blue);
  }
}