@charset "UTF-8";


/* ======================================= global ======================================= */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap');


:root {
   /* https://www.color-name.com/ */
   /* Upsdell Red : logo, headlines clave, elementos de identidad */
   --darkred: #AA182C;
   /* Spanish Red : CTA, hover states, indicadores activos, botones principales *conversión */
   --lightred: #EA0029;
   /* Nature black */
   --black: #111810;
   /* Pine Tree : fondos oscuros, secciones de inversionistas, bloques de innovación, footer */
   --semiblack: #2D2A26;
   /* Dim Gray : texto secundario, UI neutral, bordes, divisores*/
   --dimgray: #6C6967;
   /* Platinum */
   --lightgray: #e8e9e8;
   /* Bone China : fondos principales, espacio negativo */
   --white: #F0F2F0;

   /* Extra size */
   --space-xgiant: 18.3em;
}

/* ------------------------------------ [ Configuración general
    0.125   0.25    0.375   0.625   1.00    1.625   2.625   4.35    6.975   */


body {
   font-family: "Open Sans", sans-serif;
   font-optical-sizing: auto;
   font-weight: 400;
   font-style: normal;
   color: var(--semiblack);
   background-color: var(--white);
   scroll-behavior: smooth;
   margin: 0;
   padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
   font-family: 'Geist', Helvetica, Arial, sans-serif;
   font-style: normal;
   font-optical-sizing: auto;
   color: var(--black);
   font-weight: var(--weight-medium);
   line-height: normal;
}

h1 {
   font-size: var(--font-giant);
}

h2 {
   font-size: var(--font-wide);
}

h3 {
   font-size: var(--font-large);
}

h4 {
   font-size: var(--font-medium);
}

h5 {
   font-size: var(--font-base);
}

h6 {
   font-size: var(--font-small);
}


a {
   color: var(--black);
   font-weight: 400;
}

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

/* ------------------------------------ [ Header */

#main_header {
   background: rgba(255, 255, 255, 0.9);
   backdrop-filter: blur(10px);
   box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
   position: sticky;
   top: 0;
   z-index: 1000;
   transition: all 0.3s;
}

.nav-inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0 auto;
   height: var(--space-wide);
   flex-wrap: wrap;
}

.nav-top-bar {
   flex-grow: 1;
}

.nav-brand {
   display: flex;
   align-items: center;
   gap: var(--space-small);
   text-decoration: none;
   flex-shrink: 0;
}

.nav-brand h2 {
   margin: 0;
   font-size: var(--font-large);
   color: var(--black);
   white-space: nowrap;
}

.nav-brand img {
   vertical-align: middle;
   height: var((--space-base) + var(--space-small));
   width: auto;
}

/* Botón hamburguesa: oculto en escritorio */
#icon_hamburguermenu {
   display: none;
   background: none;
   border: none;
   cursor: pointer;
   font-size: var(--font-large);
   color: var(--black);
   padding: var(--space-small);
   line-height: 1;
   order: 3;
   flex-shrink: 0;
}

/* Nav: visible en escritorio */
#main_nav {
   display: flex;
   align-items: center;
}

#main_nav ul {
   list-style: none;
   display: flex;
   flex-direction: row;
   align-items: center;
   margin: 0;
   padding: 0;
   gap: 0;
}

#main_nav li {
   margin: 0 0 0 var(--space-base);
}

#main_nav li.chg_lang {
   margin-left: var(--font-large);
}

#main_nav li.chg_lang a {
   color: var(--dimgray);
}

#main_nav a {
   color: var(--dimgray);
   font-weight: 500;
   text-decoration: none;
   transition: all 0.3s;
   position: relative;
   white-space: nowrap;
}

#main_nav a:hover {
   color: var(--black);
}

#main_nav a::after {
   content: '';
   position: absolute;
   bottom: -5px;
   left: 0;
   width: 0;
   height: 2px;
   background: var(--lightred);
   transition: width 0.3s;
}

#main_nav a:hover::after {
   width: 100%;
}

/* versión móvil */

@media (max-width: 768px) {

   /* El header pasa a columna: top-bar arriba, nav debajo */
   .nav-inner {
      display: block;
      padding: 0;
      height: auto;
   }

   /* Fila superior: logo a la izquierda, hamburguesa a la derecha */
   .nav-top-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 1rem;
      height: var(--space-wide);
   }

   .nav-brand {
      flex: 1;
   }

   .nav-brand h2 {
      font-size: var(--font-large);
   }

   /* Mostrar hamburguesa */
   #icon_hamburguermenu {
      display: flex;
      align-items: center;
      justify-content: center;
      width: var(--space-wide);
      height: var(--space-wide);
      flex-shrink: 0;
   }

   /* Nav oculto por defecto */
   #main_nav {
      display: none;
      width: 100%;
      border-top: 1px solid var(--lightgray);
      background: rgba(255, 255, 255, 0.98);
   }

   #main_nav.open {
      display: block;
   }

   #main_nav ul {
      flex-direction: column;
      align-items: stretch;
      padding: var(--space-small) 0;
      margin: 0;
   }

   #main_nav li {
      margin: 0;
      border-bottom: 1px solid var(--lightgray);
   }

   #main_nav li:last-child {
      border-bottom: none;
   }

   #main_nav a {
      display: block;
      padding: var(--space-small) var(--space-medium);
   }

   #main_nav a::after {
      display: none;
   }
}


/* ------------------------------------ [ Body (generals) */

#main_body {
   background-color: var(--white);
}

.row-pad>.col {
   padding: 1.625rem;
}

.row-equal>.col,
.grid>.cell {
   display: flex
}

.bkglightgray {
   background-color: var(--lightgray);
}

button.cta {
   width: 11.325em;
   height: 2.625em;
   border-radius: 29.625em;
   font-size: var(--font-base);
   border: 1px var(--dimgray) solid;
   position: relative;
   overflow: hidden;
   z-index: 1;
}

button.cta::before {
   content: '';
   width: 0;
   height: 2.625em;
   border-radius: 29.625em;
   position: absolute;
   top: 0;
   left: 0;
   background-image: linear-gradient(to right, var(--lightred), var(--darkred));
   transition: .3s ease;
   display: block;
   z-index: -10;
}

button.cta:hover::before {
   width: 11.325em;
}

button.cta:hover {
   color: var(--lightgray);
   font-weight: 500;
   border: 1px var(--dimgray) solid;
}

section {
   padding: var(--space-large);
   background: linear-gradient(180deg, var(--white), var(--lightgray));
}

.section-header {
   text-align: center;
   margin: var(--space-large) auto;
}

.section-tag {
   color: var(--darkred);
   text-transform: uppercase;
   letter-spacing: var(--space-nano);
   margin-bottom: var(--space-base);
}

.section-subtitle {
   font-size: calc(var(--font-base) - var(--font-xnano));
   color: var(--dimgray);
   max-width: 700px;
   margin: 0 auto;
}

.card {
   background-color: var(--white);
   border: 1px var(--dimgray) solid;
   border-radius: var(--space-small);
}

.card:hover {
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.card:hover .fonticon {
   background: linear-gradient(135deg, var(--darkred), var(--lightred));
}

.card span.fonticon {
   float: left;
   margin-right: var(--space-small);
}

.card h3 {
   margin-top: 0;
}

.card_header a {
   color: var(--white);
}

.card_header span.fonticon {
   width: var(--space-large);
   height: var(--space-large);
   background: linear-gradient(135deg, var(--semiblack), var(--dimgray));
   border-radius: var(--space-small);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: var(--font-large);
   color: var(--white);
}

.card_header div.small {
   color: var(--dimgray);
}

.card_text {
   margin-top: var(--space-large);
}

@media (min-width:600px) {
   #verticals .grid {
      grid-template-columns: repeat(1, 1fr);
   }
}

@media (min-width:800px) {
   #verticals .grid {
      grid-template-columns: repeat(3, 1fr);
   }
}

/* @media (min-width:1200px) {
   #verticals .grid {
      grid-template-columns: repeat(4, 1fr);
   }
} */


/* ------------------------------------ [ Init */

#hero-video {
   position: relative;
   width: 100%;
   height: 100svh;
   overflow: hidden;
}

#hero-video video {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

#hero-video .overlay {
   position: absolute;
   inset: 0;
   background: rgba(0, 0, 0, 0.35);
   z-index: 1;
}

#hero-video .hero-content {
   position: absolute;
   top: 60%;
   left: 40%;
   transform: translate(-50%, -50%);
   color: var(--white);
   font-size: var(--font-base);
   z-index: 2;
   text-shadow: 0 4px 15px rgba(0, 0, 0, 0.7);
}

#hero-video h1 {
   color: var(--white);
   font-size: var(--font-large);
   z-index: 1;
}

#hero-video a {
   font-size: var(--font-base);
   margin: var(--space-large) auto;
   z-index: 1;
}

#stats {
   background-color: var(--semiblack);
   color: var(--white);
   padding: var(--space-base) auto;
}

#stats strong {
   font-size: var(--font-large);
   color: var(--lightred);
}

/* ------------------------------------ [ About */

.img_animated,
.blk_animated {
   opacity: 0;
   visibility: hidden;
}

/* ------------------------------------ [ About */


/* Contact */

#contact col {
   float: none;
}

#contact_form input,
#contact_form button {
   width: 100%;
   height: var(--space-large);
}

#contact_form textarea {
   width: 100%;
}

#contact_form input,
#contact_form textarea {
   color: var(--dimgray);
   border: var(--space-xnano) var(--dimgray) solid;
   padding: var(--space-small) var(--space-large);
   border-radius: var(--space-tiny);
}

#contact_form input:hover,
#contact_form textarea:hover {
   color: var(--semiblack);
}

#contact_form .big {
   font-size: var(--font-large);
}

#contact_form button {
   background-color: var(--white);
   border-radius: var(--space-base);
   border: 1px var(--dimgray) solid;
   box-shadow: var(--space-tiny) var(--space-tiny) var(--space-small) var(--dimgray),
      - var(--space-tiny) - var(--space-tiny) var(--space-small) var(--white);
}

#contact_form button:hover {
   background-color: #FFFFFF;
   box-shadow: var(--space-tiny) var(--space-tiny) var(--space-small) var(--black),
      - var(--space-tiny) - var(--space-tiny) var(--space-small) var(--dimgray);
}


/* ------------------------------------ [ Footer */

#main_footer {
   background-color: var(--semiblack);
   color: var(--white);
   font-size: calc(var(--font-base) - var(--font-xnano));
}

#main_footer .col {
   margin-top: var(--space-base);
}

#main_footer strong {
   font-size: var(--font-large);
}

#main_footer a {
   color: var(--white);
}

#main_footer a:hover {
   color: #FFFFFF;
}

#main_footer p {
   margin: var(--space-small);
}

#main_footer ul {
   margin-top: var(--space-small);
}

#main_footer .mini_icon {
   height: var(--space-large);
}

#main_footer a.note {
   color: var(--dimgray);
}

/* ------------------------------------ [ Configuraciones especiales */