/*!
Theme Name: ABS Global
Theme URI: http://underscores.me/
Author: Hazak
Author URI: https://hazak.tech/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: abs-global
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

ABS Global is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

/* Pagination
--------------------------------------------- */
@import url("pagination.css");

/* Filter
--------------------------------------------- */
@import url("filter.css");

/* Archive Grid
--------------------------------------------- */
@import url("archive-grid.css");

html {
  scroll-behavior: smooth;
}

/* Compensación para scroll con navbar fijo */
#archive-container {
  scroll-margin-top: 130px; /* Altura aproximada del navbar + margen */
}

#contenedor-toros {
  scroll-margin-top: 130px; /* Altura aproximada del navbar + margen */
}

@media (max-width: 768px) {
  #archive-container {
    scroll-margin-top: 90px; /* Altura reducida para mobile/tablet */
  }
  
  #contenedor-toros {
    scroll-margin-top: 90px; /* Altura reducida para mobile/tablet */
  }
}

/* Fonts
--------------------------------------------- */
:root {
  --font-avenir: "Avenir", sans-serif;
  --font-franklin: "Franklin Gothic Demi", sans-serif;
}

@font-face {
  font-family: "Avenir";
  src: url("assets/fonts/avenir/Avenir-Regular.woff2") format("woff2"),
    url("assets/fonts/avenir/Avenir-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Avenir";
  src: url("assets/fonts/avenir/Avenir-Bold.woff2") format("woff2"),
    url("assets/fonts/avenir/Avenir-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Avenir";
  src: url("assets/fonts/avenir/Avenir-Medium.woff2") format("woff2"),
    url("assets/fonts/avenir/Avenir-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Avenir";
  src: url("assets/fonts/avenir/Avenir-Light.woff2") format("woff2"),
    url("assets/fonts/avenir/Avenir-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Franklin Gothic Demi";
  src: url("assets/fonts/frank/FRADM.woff2") format("woff2"),
    url("assets/fonts/frank/FRADM.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

/* Colors
--------------------------------------------- */
:root {
  --color-black: #001429;
  --color-white: #fff;
  --color-text-dark-grey: #444b53;
  /* Color Blue */
  --color-blue: #003876;
  --color-blue-hover: #00326a;
  --color-blue-active: #002d5e;
  --color-blue-light: #e6ebf1;
  --color-blue-light-hover: #d9e1ea;
  --color-blue-light-active: #b0c1d5;
  --color-blue-dark: #002a59;
  --color-blue-dark-hover: #002247;
  --color-blue-dark-active: #001935;
  --color-blue-darker: #001429;

  /* Color Red */
  --color-red: #cd1141;
  --color-red-hover: #b90f3b;
  --color-red-active: #a40e34;
  --color-red-light: #fae7ec;
  --color-red-light-hover: #f8dbe3;
  --color-red-light-active: #f0b5c4;
  --color-red-dark: #9a0d31;
  --color-red-dark-hover: #7b0a27;
  --color-red-dark-active: #5c081d;
  --color-red-darker: #480617;

  /* Color Yellow */
  --color-yellow: #f6ce05;
  --color-yellow-light: #fefae6;

  /* Color Green */
  --color-green: #e6f6f2;
  --color-green-light: #00a87e;
}

/* Headlines
--------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}

ul {
  margin: 0;
  padding: 0;
}

h1,
.headline-1 {
  font-family: var(--font-franklin);
  font-size: 72px;
  font-style: normal;
  font-weight: 400;
  line-height: 82px;
}

/* @media (max-width: 768px) {
  .headline-1,
  h1 {
    font-size: 56px;
    line-height: 56px;
  }
} */

h2,
.headline-2 {
  font-family: var(--font-franklin);
  font-size: 56px;
  font-style: normal;
  font-weight: 400;
  line-height: 56px;
}

/* @media (max-width: 768px) {
  .headline-2,
  h2 {
    font-size: 32px;
    line-height: 32px;
  }
} */

h3,
.headline-3 {
  font-family: var(--font-avenir);
  font-size: 48px;
  font-style: normal;
  font-weight: 400;
  line-height: 58px;
}

@media (max-width: 768px) {
  .headline-3,
  h3 {
    font-size: 24px;
    line-height: 34px;
  }
}

h4,
.headline-4 {
  font-family: var(--font-avenir);
  font-size: 40px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

@media (max-width: 768px) {
  .headline-4,
  h4 {
    font-size: 24px;
    line-height: 34px;
  }
}

h5,
.headline-5 {
  font-family: var(--font-avenir);
  font-size: 28px;
  font-style: normal;
  font-weight: 400;
  line-height: 32px;
}

h6,
.headline-6 {
  font-family: var(--font-avenir);
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

@media (max-width: 768px) {
  .headline-6,
  h6 {
    font-size: 16px;
    line-height: 24px;
  }
}

p {
  margin: 0;
  padding: 0;
}

.paragraph--big {
  font-family: var(--font-avenir);
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.paragraph--small {
  font-family: var(--font-avenir);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.abs-preheading {
  color: var(--color-yellow);
  font-family: var(--font-franklin);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.64px;
  text-transform: uppercase;
}

label {
  font-family: var(--font-avenir);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.48px;
  text-transform: uppercase;
}

caption {
  font-family: var(--font-avenir);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

/* Buttons
--------------------------------------------- */
.abs-button {
  color: var(--color-blue-light);
  text-align: center;
  font-family: var(--font-avenir);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  background-color: var(--color-blue);
  padding: 16px 32px;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.3s ease;
}

@media (max-width: 768px) {
  .abs-button {
    padding: 16px;
  }
}

.abs-button:hover {
  background: var(--color-blue-hover);
  box-shadow: 0px 5px 8px 0px rgba(136, 144, 194, 0.27),
    0px 6px 21px 0px rgba(37, 44, 97, 0.24);
}

.abs-button:active {
  background: var(--color-blue-dark-hover);
}

.abs-button--disabled {
  background: var(--color-blue-light-active);
  cursor: not-allowed;
}

.abs-button--disabled:hover {
  background: var(--color-blue-light-active);
  cursor: not-allowed;
  box-shadow: none;
}

.abs-button--primary-medium {
  padding: 12px 28px;
}

.abs-button--primary-small {
  padding: 8px 18px;
}

.abs-button--white {
  background-color: var(--color-white);
  color: var(--color-blue);
}

.abs-button--white:hover {
  background-color: var(--color-blue-light-hover);
}

.abs-button--white:active {
  background-color: var(--color-blue-light-active);
}

.abs-button--transparent {
  background-color: transparent;
  border: 1px solid var(--color-white);
  color: var(--color-white);
}

.abs-button--transparent:hover {
  background-color: var(--color-white);
  color: var(--color-blue);
}

.abs-link {
  color: var(--color-blue);
  text-align: center;
  font-family: var(--font-avenir);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-decoration: none;
  position: relative;
}

.abs-link::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--color-blue);
  transition: all 0.3s ease;
  border-radius: 2px;
}

.abs-link:hover::after {
  width: 100%;
}

.abs-link:active::after {
  height: 4px;
  width: 100%;
}

a {
  text-decoration: none;
}

:root {
  --container-width: clamp(84%, 81vw, 1155px);
  --container-padding-left: 20px;
  --container-padding-right: 20px;
}

@media (max-width: 768px) {
  :root {
    --container-padding-left: 16px;
    --container-padding-right: 16px;
  }
}

.container {
  width: 100%;
  max-width: calc(
    var(--container-width) + var(--container-padding-left) +
      var(--container-padding-right)
  );
  margin: 0 auto;
  padding-left: var(--container-padding-left);
  padding-right: var(--container-padding-right);
}

/* @media (max-width: 1024px){
	.container {
		max-width: 983px;
	}
}

@media (max-width: 768px) {
	.container {
		padding: 0 16px;
	}
} */

body {
  margin: 0;
}

.no-scroll {
  overflow: hidden;
}

/* Header
--------------------------------------------- */
.site-header {
  background-color: var(--color-white);
  position: fixed;
  z-index: 100;
  width: 100%;
  border-top: 7px solid var(--color-blue);
  top: 0;
}

@media (max-width: 576px) {
  .site-header {
    border-top: 0;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(7px);
  }
}

.site-header__container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  padding-bottom: 16px;
}

@media (max-width: 576px) {
  .site-header__container {
    padding-top: 4px;
    padding-bottom: 2px;
    padding-left: 6px;
    padding-right: 6px;
  }
}

.site-header__logo a img {
  width: 74.791px;
  height: 94.207px;
}

@media (max-width: 768px) {
  .site-header__logo a img {
    width: 56.902px;
    height: 71.674px;
  }
}

.menu {
  display: flex;
  align-items: center;
  gap: 34px;
  list-style: none;
}

@media (max-width: 576px) {
  .menu {
    flex-direction: column;
    align-items: flex-start;
  }
}

.menu li a span {
  font-family: var(--font-avenir);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  color: var(--color-blue);
}

.menu li a {
  font-family: var(--font-avenir);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  width: max-content;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-blue);
}

@media (max-width: 576px) {
  .menu li a,
  .menu li a span {
    font-size: 24px;
    font-weight: 400;
    text-align: left;
  }

  .menu li a svg {
    display: none;
  }
}

.site-header__menu-mobile-links {
  display: none;
}

@media (max-width: 576px) {
  .site-header__menu-mobile-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 52px;
    padding-bottom: 40px;
  }

  .site-header__menu-mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;

    a {
      font-family: var(--font-avenir);
      font-size: 16px;
      font-weight: 400;
      line-height: normal;
      text-decoration-line: underline;
      color: var(--color-blue-dark);
    }
  }

  .site-header__socials {
    display: flex;
    gap: 12px;
  }
}

@media (max-width: 576px) {
  .site-header__menu {
    position: absolute;
    background: white;
    height: 100vh;
    top: 0;
    right: -115%;
    width: 81%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 56px;
    gap: 163px;
    transition: all 0.3s ease;
  }
}

.link-home-mobile {
  display: none;
}
@media (max-width: 576px) {
  .link-home-mobile {
    display: block;
  }
}

/* Menu Button
--------------------------------------------- */
.site-header__menu-button {
  display: none;
  width: 54px;
  height: 54px;
  padding: 8px 18px 8px 8px;
  background-color: var(--color-white);
  border-radius: 100px;
  border: none;
  cursor: pointer;
  gap: 5px;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  z-index: 100;
}

@media (max-width: 576px) {
  .site-header__menu-button {
    display: flex;
  }
}

.site-header__menu-button span {
  display: block;
  width: 75%;
  height: 2px;
  background-color: var(--color-blue);
  transition: all 0.3s ease;
}

.site-header__menu-button span:nth-child(1),
.site-header__menu-button span:nth-child(3) {
  width: 45%;
}

.menu-button-open {
  background-color: var(--color-blue-light);
}

.menu-button-open span:nth-child(1),
.menu-button-open span:nth-child(3) {
  transform: rotateZ(45deg);
  position: relative;
}

.menu-button-open span:nth-child(1) {
  top: 4px;
  right: 6px;
}

.menu-button-open span:nth-child(2) {
  transform: rotateZ(-45deg);
}

.menu-button-open span:nth-child(3) {
  bottom: 4px;
}

/*Menu expand
--------------------------------------------- */
.menu-expand {
  right: -1px;
}

/* Footer
--------------------------------------------- */
.site-footer{
  overflow: hidden;
}

.footer-content__container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding-top: 60px;
  padding-bottom: 60px;
}

@media (max-width: 576px) {
  .footer-content__container {
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }
}

.footer-content__logo{
  display: flex;
  flex-direction: column;
  gap: 42px;
  align-items: center;
}

.footer-content__socials{
  display: flex;
  gap: 10px;
}

.footer-content__social-link{
  border: 1px solid transparent;
  transition: all 0.3s ease;
  border-radius: 100px;
  width: 35px;
  height: 35px;
  padding: 2px;
}

.footer-content__social-link:hover{
  border: 1px solid var(--color-blue-dark);
}

.footer-content__menu {
  display: flex;
  max-width: 885px;
  width: 100%;
  justify-content: flex-end;
  gap: 16px;
}

@media (max-width: 576px) {
  .footer-content__menu {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

.footer-content__menu ul {
  list-style: none;
}

.footer-content__menu-list {
  max-width: 278px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-content__menu-list span{
  font-weight: 900;
}

@media (max-width: 576px) {
  .footer-content__menu-list {
    align-items: center;
  }
}

.footer-content__menu-list > li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: max-content;
  gap: 16px;
}

@media (max-width: 576px) {
  .footer-content__menu-list > li {
    align-items: center;
  }
}

.footer-content__menu-items{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-content__menu-link {
  color: var(--color-blue-darker);
}

/* Hero Home
--------------------------------------------- */
.hero-home {
  position: relative;
  margin-top: 137px;
  overflow: hidden;
}

@media (max-width: 576px) {
  .hero-home {
    margin-top: 0;
  }
}

.hero-home__image {
  position: absolute;
  top: 0;
  left: -2px;
  width: 100%;
  height: 100%;
}

.hero-home__image img {
  width: 105vw;
  height: 104%;
  object-fit: cover;
}

.hero-home__image-desktop {
  display: block;
}

@media (max-width: 576px) {
  .hero-home__image-desktop {
    display: none;
  }
}

.hero-home__image-mobile {
  display: none;
}

@media (max-width: 576px) {
  .hero-home__image-mobile {
    display: block;
  }
}

.hero-home__content-inner {
  padding-top: 120px;
  padding-bottom: 120px;
  max-width: 670px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  position: relative;
}

@media (max-width: 576px) {
  .hero-home__content-inner {
    padding-top: 269px;
    padding-bottom: 60px;
  }
}

.hero-home__title,
.hero-home__description {
  color: var(--color-white);
}

.hero-home__description {
  max-width: 440px;
}

@media (max-width: 576px) {
  .hero-home__description {
    width: 90%;
  }
}

.hero-home__button {
  margin-top: 28px;
}

@media (max-width: 576px) {
  .hero-home__button {
    margin-top: 3px;
  }
}

/* Banner
--------------------------------------------- */
.module-banner {
  position: relative;
  overflow: hidden;
}

.module-banner__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.module-banner__image img {
  width: 101%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.module-banner__image-desktop {
  display: block;
}

@media (max-width: 576px) {
  .module-banner__image-desktop {
    display: none;
  }
}

.module-banner__image-mobile {
  display: none;
}

@media (max-width: 576px) {
  .module-banner__image-mobile {
    display: block;
  }
}

.module-banner__content {
  position: relative;
  padding-top: 93px;
  padding-bottom: 93px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
}

@media (max-width: 576px) {
  .module-banner__content {
    align-items: flex-start;
    padding-top: 32px;
    padding-bottom: 32px;
  }
}

.module-banner__logo {
  width: 80px;
  height: 101px;
  object-fit: contain;
  margin-bottom: 9px;
}

@media (max-width: 576px) {
  .module-banner__logo {
    margin-bottom: 70px;
  }
}

.module-banner__preheading {
  font-size: 12px;
  letter-spacing: 1.48px;
}

.module-banner__title {
  color: var(--color-white);
}