@import url('https://fonts.googleapis.com/css2?family=Arima:wght@100..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&display=swap');

.arima { font-family: "Arima", system-ui; }
.bodoni { font-family: "Bodoni Moda", serif; }

@font-face {
    font-family: 'Acid';
    src: url('/template/estandar/fonts/acid/acid-grotesk-extralight.otf') format('opentype');
    font-style: normal;
    font-display: swap;
    font-weight: 200;
}

@font-face {
    font-family: 'Acid';
    src: url('/template/estandar/fonts/acid/acid-grotesk-light.otf') format('opentype');
    font-style: normal;
    font-display: swap;
    font-weight: 300;
}

@font-face {
    font-family: 'Acid';
    src: url('/template/estandar/fonts/acid/acid-grotesk-medium.otf') format('opentype');
    font-style: normal;
    font-display: swap;
    font-weight: 500;
}

@font-face {
    font-family: 'Acid';
    src: url('/template/estandar/fonts/acid/acid-grotesk-bold.otf') format('opentype');
    font-style: normal;
    font-display: swap;
    font-weight: 700;
}

body { background-color: #000; color: #fff; font-family: 'Acid', system-ui, sans-serif; }

/* VARIABLES */
:root {
    --main-color: #FF7A33;
    --main-color-light: #00bfe2;
    --main-color-dark: #333;
}

/*HEADER CSS*/
img {transition: opacity ease 300ms;}
img:not([src]) {opacity: 0;}

nav.sticky { padding-top: 8px; padding-bottom: 8px; }
nav.sticky.white-transparent { background-color: #ffffff40; }
nav.sticky.sticked { padding-top: 20px; padding-bottom: 20px; }
nav.sticky.sticked.white-transparent { background-color: transparent; }

@media (min-width: 1023px) {
    nav.sticky { padding-top: 16px; padding-bottom: 16px; }
    nav.sticky.sticked { padding-top: 48px; padding-bottom: 48px; }
}

.dropdown-toggle.open ~ .dropdown { max-height: 500px; }
body.navbar-open .boton-menu { background-color: transparent; }
.dropdown-toggle.open .icon { transform: rotate(180deg); }
body.navbar-open { height: 100vh; overflow: hidden; }
.navbar { pointer-events: none; }
.navbar.open { pointer-events: auto; }
.navbar .navbar-content { transform: translateX(100%); right: 0; left: auto; }
.navbar.open .navbar-content { transform: translateX(0%); }
.navbar .navbar-overlay { opacity: 0; }
.navbar.open .navbar-overlay { opacity: 1; }
.abs-center { left: 50%; transform: translateX(-50%) translateY(-50%); top: 50%; }

/* MAIN COLOR */
.text-main-color { color: var(--main-color); }
.group:hover .group-hover\:text-main-color { color: var(--main-color); }
.hover\:text-main-color:hover { color: var(--main-color); }
.focus\:text-main-color:focus { color: var(--main-color); }
.bg-main-color { background-color: var(--main-color); }
.group:hover .group-hover\:bg-main-color { background-color: var(--main-color); }
.hover\:bg-main-color:hover { background-color: var(--main-color); }
.focus\:bg-main-color:focus { background-color: var(--main-color); }
.border-main-color { border-color: var(--main-color); }
.hover\:border-main-color:hover { border-color: var(--main-color); }
.focus\:border-main-color:focus { border-color: var(--main-color); }
.fill-main-color { fill: var(--main-color); }
.hover\:fill-main-color:hover { fill: var(--main-color); }
.focus\:fill-main-color:focus { fill: var(--main-color); }
.stroke-main-color { stroke: var(--main-color); }
.hover\:stroke-main-color:hover { stroke: var(--main-color); }
.focus\:stroke-main-color:focus { stroke: var(--main-color); }

/* MAIN COLOR LIGHT */
.text-main-color-light { color: var(--main-color-light); }
.group:hover .group-hover\:text-main-color-light { color: var(--main-color-light); }
.hover\:text-main-color-light:hover { color: var(--main-color-light); }
.focus\:text-main-color-light:focus { color: var(--main-color-light); }
.bg-main-color-light { background-color: var(--main-color-light); }
.group:hover .group-hover\:bg-main-color-light { background-color: var(--main-color-light); }
.hover\:bg-main-color-light:hover { background-color: var(--main-color-light); }
.focus\:bg-main-color-light:focus { background-color: var(--main-color-light); }
.border-main-color-light { border-color: var(--main-color-light); }
.hover\:border-main-color-light:hover { border-color: var(--main-color-light); }
.focus\:border-main-color-light:focus { border-color: var(--main-color-light); }
.fill-main-color-light { fill: var(--main-color-light); }
.hover\:fill-main-color-light:hover { fill: var(--main-color-light); }
.focus\:fill-main-color-light:focus { fill: var(--main-color-light); }
.stroke-main-color-light { stroke: var(--main-color-light); }
.hover\:stroke-main-color-light:hover { stroke: var(--main-color-light); }
.focus\:stroke-main-color-light:focus { stroke: var(--main-color-light); }

/* MAIN COLOR DARK */
.text-main-color-dark { color: var(--main-color-dark); }
.group:hover .group-hover\:text-main-color-dark { color: var(--main-color-dark); }
.hover\:text-main-color-dark:hover { color: var(--main-color-dark); }
.focus\:text-main-color-dark:focus { color: var(--main-color-dark); }
.bg-main-color-dark { background-color: var(--main-color-dark); }
.group:hover .group-hover\:bg-main-color-dark { background-color: var(--main-color-dark); }
.hover\:bg-main-color-dark:hover { background-color: var(--main-color-dark); }
.focus\:bg-main-color-dark:focus { background-color: var(--main-color-dark); }
.border-main-color-dark { border-color: var(--main-color-dark); }
.hover\:border-main-color-dark:hover { border-color: var(--main-color-dark); }
.focus\:border-main-color-dark:focus { border-color: var(--main-color-dark); }
.fill-main-color-dark { fill: var(--main-color-dark); }
.hover\:fill-main-color-dark:hover { fill: var(--main-color-dark); }
.focus\:fill-main-color-dark:focus { fill: var(--main-color-dark); }
.stroke-main-color-dark { stroke: var(--main-color-dark); }
.hover\:stroke-main-color-dark:hover { stroke: var(--main-color-dark); }
.focus\:stroke-main-color-dark:focus { stroke: var(--main-color-dark); }

/* BASE CLASES PROPIAS */
:focus,
input:focus,
button:hover,
button:focus { outline: none; }
.buscador_oculto{margin-top:-60px;opacity:0;}

.tns-controls { display: none; }

.tns-nav{display:flex;justify-content:center;width:100%;align-items:center;margin-top:20px;position:relative;bottom:0px;}
.tns-nav button{background-color:#e4e4e4; border:solid 1px white;width:20px; height:20px; border-radius:100%;margin:5px;}
.tns-nav button.tns-nav-active{ background-color: var(--main-color); }

.tns-nav-active { background-color: var(--main-color); }

.titulo-main-color span { color: var(--main-color); font-weight: 700; }
.titulo-main-color-light span { color: var(--main-color-light); font-weight: 700; }
.titulo-main-color-dark span { color: var(--main-color-dark); font-weight: 700; }
.titulo-main-color-white span { color: #fff; font-weight: 700 !important; }
.titulo-main-color-black span { color: #000; font-weight: 700 !important; }
.titulo-custom span { font-weight: 700; }

.shadow-custom { box-shadow: 0 0 20px 2px rgb(0 0 0 / 10%); }
.text-shadow { text-shadow: 1px 1px 5px #00000085; }
.text-shadow2 { text-shadow: 1px 1px 5px #00000090; }
.hover\:text-shadow-yellow:hover { text-shadow: 1px 1px 5px #ff9d29; }
.hover\:text-shadow-green:hover { text-shadow: 1px 1px 5px #B5FF3F; }

.bg-white-custom { background-color: #850E26; }

.gradient-white { 
    background: rgb(255,255,255);
    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.196516106442577) 50%, rgba(255,255,255,1) 100%);
}

.gradient-white-contacto {
    background: rgb(255,255,255);
    background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.6) 100%);
}

.gradient-3D {
    background: #000;
    background: linear-gradient(180deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 44%, rgba(0, 0, 0, 1) 100%);
}

.gradient-radial { background: 
  radial-gradient(circle at 100% 50%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 50%),
  #f7931e; }

.transition3s { transition: all 0.3s ease-in-out; }
.transition6s { transition: all 0.6s ease-in-out; }

.p-1\/20::after { content: ""; display: block; padding-top: 200%; }
.p-1\/15::after { content: ""; display: block; padding-top: 150%; }
.p-1\/13::after { content: ""; display: block; padding-top: 130%; }
.p-1\/12::after { content: ""; display: block; padding-top: 120%; }
.p-1\/11::after { content: ""; display: block; padding-top: 110%; }
.p-1\/10::after { content: ""; display: block; padding-top: 100%; }
.p-1\/9::after { content: ""; display: block; padding-top: 90%; }
.p-1\/8::after { content: ""; display: block; padding-top: 80%; }
.p-1\/7::after { content: ""; display: block; padding-top: 70%; }
.p-1\/6::after { content: ""; display: block; padding-top: 60%; }
.p-1\/5::after { content: ""; display: block; padding-top: 50%; }
.p-1\/4::after { content: ""; display: block; padding-top: 40%; }
.p-1\/3::after { content: ""; display: block; padding-top: 30%; }
.p-1\/2::after { content: ""; display: block; padding-top: 20%; }
.p-1\/1::after { content: ""; display: block; padding-top: 10%; }

.p-360 { content: ""; display: block; padding-top: 40%; }
.p-banner360 { content: ""; display: block; padding-top: 60%; }
.p-logo::after { content: ""; display: block; padding-top: 22%; }
.p-noticias::after { content: ""; display: block; padding-top: 60%; }
.p-principal::after { content: ""; display: block; padding-top: 69.2%; }

@media (min-width: 	768px) {
    .md-min-h-row { min-height: calc(100vh / var(--total-filas)); }
    .p-360 { content: ""; display: block; padding-top: 70%; }
    .p-banner360 { content: ""; display: block; padding-top: 40%; }
}

@media (min-width: 1023px) {
    .p-banner360 { content: ""; display: block; padding-top: 80%; }
    .p-noticias::after { content: ""; display: block; padding-top: 40%; }
    .p-principal::after { content: ""; display: block; padding-top: 69.5%; }
}

@media (min-width: 	1280px) {
    .p-banner360 { content: ""; display: block; padding-top: 60%; }
    .p-principal::after { content: ""; display: block; padding-top: 69.7%; }
}

.last\:border-none > li:last-child,
.last\:border-none > a:last-child { border: none !important; }

.hover\:text-yellow-600:hover {
    --tw-text-opacity: 1;
    color: var(--main-color);
}

.hover\:scale-sm:hover { transform: scale(1.1); }
.hover\:scale-md:hover { transform: scale(1.3); }
.hover\:scale-lg:hover { transform: scale(1.5); }

.rotate-180 { transform: rotate(180deg); }

.filter-white { filter: grayscale(100) brightness(0) invert(1); }

.blur { 
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(40px); 
}

.leading-custom { line-height: 0.9; }
.leading-none { line-height: 1; }
.leading-tight { line-height: 1.25; }
.leading-snug { line-height: 1.375; }
.leading-relaxed { line-height: 1.625; }
.tracking-custom { letter-spacing: -0.12em; }
.tracking-custom2 { letter-spacing: 0.5em; }
.tracking-custom3 { letter-spacing: -0.08em; }

.fill-currentColor { fill: currentColor; }

.line-clamp1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; }
.line-clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; }
.line-clamp3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; }
.line-clamp4 { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; }
.line-clamp5 { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; }
.line-clamp13 { display: -webkit-box; -webkit-line-clamp: 13; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; }
.line-clamp15 { display: -webkit-box; -webkit-line-clamp: 15; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; }
.line-clamp20 { display: -webkit-box; -webkit-line-clamp: 20; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; }

@media (min-width: 1024px) {
    .top-custom { top: 5.6rem; }
}

@media (min-width: 1600px) {
    .padding-custom { padding-left: 9%; }
}

.-z-1 { z-index: -1; }
.z-60 { z-index: 60; }

.social-media li { padding: 0px; }

.social-media li a { margin: 0px; display: flex; width: 100%; height: 100%; }

.texto-logo { animation: girar 10s linear infinite; }
 
@keyframes girar {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(-360deg);
    }
}

@keyframes arrow-bounce {
    0% { transform: translateX(0); }
    25% { transform: translateX(8px); }
    50% { transform: translateX(-2px); }
    75% { transform: translateX(3px); }
    100% { transform: translateX(0); }
}

/* Flecha inicialmente con transición suave */
.arrow {
    transition: transform 0.3s;
}

/* Animación al hacer hover en el enlace */
.group:hover .arrow {
    animation: arrow-bounce 0.6s ease-in-out;
} 

.outer-ring {
    transform-origin: 50% 50%; /* Centro del SVG */
    animation: spin 4s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.object-custom { object-position: center; }
.group:hover .group-hover\:object-custom { object-position: left; }

.nav-text {
  transition: color 0.5s, font-weight 0.5s;
}

.nav-item {
  transition: background-color 0.5s;
}

.nav-text.active {
  opacity: 1; 
}

.nav-item.active {
  opacity: 0.6 !important;
}





body { opacity: 1; }