/* ==========================================================================
   Reset / Base
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  font-family: var(--font-primary);
  /* line-height: 1.5; */
  color: var(--color-text);
  background: var(--color-bg);
  /*-webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;*/
}

img,
picture,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

img {
  border: 0;
}

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

button,
input,
textarea,
select {
  font: inherit;
}

button {
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
}

input,
textarea,
select {
  margin: 0;
}

textarea {
  resize: vertical;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

strong,
b {
  font-weight: 600;
}


.icon-link,
.icon-text {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  line-height: 1;
}

.icon-link,
.icon-text {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
}

.icon-link {
  color: inherit;
  text-decoration: none;
  transition: var(--transition-link);
  
}

.icon-link:hover {
  color: var(--color-accent);
}

.icon-link i,
.icon-text i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  line-height: 1;
  font-size: 1.2em;
  margin-top: 2px;
}



/* ==========================================================================
   Design tokens
   ========================================================================== */

:root {

    /* max-width-container */
    --container-width-medium: 1440px;
    --container-width-small: 1088px;
    --container-width-article: 680px;
    --container-width-small-half: 544px;

    /* fonts*/  
    --font-primary: 'Inter', sans-serif;
    --font-accent: 'Poppins', sans-serif;
    --font-clock: 'Azeret Mono', monospace;



    /* Font weights */  
    --font-regular: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    /* Font sizes */
    --font-size-11: 11px;
    --font-size-12: 12px;
    --font-size-14: 14px;
    --font-size-15: 15px;
    --font-size-16: 16px;
    --font-size-18: 18px;
    --font-size-20: 20px;
    --font-size-22: 22px;
    --font-size-24: 24px;
    --font-size-28: 28px;
    --font-size-36: 36px;
    --font-size-44: 44px;
    --font-size-54: 54px;
    --font-size-68: 68px;
    --font-size-80: 80px;

    /*Borders*/
    --border-2: 2px;

    /* Border radius */
    --radius-0: 0px;
    --radius-8: 8px;
    --radius-16: 16px;
    --radius-32: 32px;

    /* Line heights */
    --line-height-160: 1.6;
    --line-height-140: 1.4;
    --line-height-120: 1.2;
    --line-height-100: 1;


    /* Colors */

    --white: #fff;
    --black: #000;

    --blue-50: #E6EFF9;
    --blue-100: #B2CEEE;
    --blue-300: #4D8AC9;
    --blue-500: #0560C7;
    --blue-600: #0557B5;
    --blue-700: #04448D;
    --blue-900: #13295A;

    --lemon-500: #E6FF00;

    --gray-25: #f4f4f4;
    --gray-100: #C2C2C2;
    --gray-200: #A4A4A4;
    --gray-300: #7B7B7B;
    --gray-400: #616161;
    --gray-500: #3A3A3A;

    --coolgray-50: #EDEDEC;
    --coolgray-100: #C8C7C3;
    --coolgray-300: #88867D;
    --coolgray-500: #4D4A3D; 
    --coolgray-600: #464338;
    --coolgray-700: #37352B;
    --coolgray-800: #2A2922;
    --coolgray-900: #201F1A;

    --red-50: #FBEAE9;
    --red-500: #D92D20;

    --yellow-100: #F8E2BA;
    --yellow-600: #D5941C;

    --green-50: #EAF6ED;
    --green-600: #279943;




    --red-800: rgba(119, 25, 18, 0.16);

    /* Brand */
    --color-brand-primary-lighter: var(--blue-50);
    --color-brand-primary-default: var(--blue-500);
    --color-brand-primary-hover: var(--blue-600);

    --color-brand-secondary-lightest: var(--coolgray-50);
    --color-brand-secondary-lighter: var(--coolgray-100);
    --color-brand-secondary-light: var(--coolgray-300);
    --color-brand-secondary-default: var(--coolgray-500);
    --color-brand-secondary-dark: var(--black);

    --color-accent: var(--lemon-500);

    --color-neutral-100: var(--gray-100);
    --color-neutral-300: var(--gray-300);
    --color-neutral-400: var(--gray-400);
    --color-neutral-500: var(--gray-500);


    /* Spacing */
    --space-0: 0;
    --space-4: 4px;
    --space-8: 8px;
    --space-12: 12px;
    --space-16: 16px;
    --space-20: 20px;
    --space-24: 24px;
    --space-32: 32px;
    --space-40: 40px;
    --space-48: 48px;
    --space-56: 56px;
    --space-64: 64px;
    --space-80: 80px;
    --space-96: 96px;
    --space-128: 128px;

    /* Motion */
    --motion-duration-fast: 150ms;
    --motion-duration-base: 220ms;
    --motion-duration-slow: 320ms;

    --motion-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --motion-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

    --transition-base: all var(--motion-duration-base) var(--motion-ease-out);
    --transition-link: var(--transition-base);

   

    /* button */
    --color-primary-button: var(--color-brand-primary-default);
    --color-primary-hover: var(--color-brand-primary-hover);
    --color-primary-lighter-button: var(--color-brand-primary-lighter);


    /* background */

    --color-background-neutral-light: var(--gray-25);
    --color-background-white: var(--white);
    --color-background-light: var(--coolgray-50);
    --color-background-medium: var(--coolgray-300);
    --color-background-darker: var(--coolgray-800);
    --color-background-darkest: var(--coolgray-900);
    --color-background-primary: var(--color-brand-primary-default);


    /* color text */

    --color-text-light: var(--white);
    --color-text-link-default: var(--color-brand-primary-default);
    --color-text-link-default-hover: var(--color-brand-primary-hover);



    /* shadow */
    --shadow-basic: 0px 0px 16px 0px rgba(0,0,0,0.1);
    --shadow-modal: 0 24px 80px rgba(0, 0, 0, .24);

    /* form*/

    --color-form-text-label: var(--color-brand-secondary-default);
    --color-form-text-input: var(--gray-500);
    --color-form-text-placeholder: var(--gray-200);
    --color-form-border-input: var(--blue-100);
    --color-form-border-input-focus: var(--color-brand-primary-default);
    --color-form-border-input-active: var(--color-brand-primary-hover);
    --color-form-shadow-focus: var(--color-brand-primary-lighter);
    --color-form-icon-select: var(--color-form-text-input);
    --color-form-icon-select-focus: var(--color-brand-primary-default);


    --color-form-text-disabled: var(--color-neutral-500);
    --color-form-background-disabled: var(--color-neutral-100);
    --color-form-border-disabled: var(--color-neutral-300);
    --color-form-icon-disabled: var(--color-neutral-400);

    --color-form-error-text: var(--red-500);
    --color-form-error-border: var(--red-500);
    --color-form-error-shadow: var(--red-800);

    /* alerts */

    --bg-error: var(--red-50);
    --text-error: var(--black);

    --bg-warning: var(--yellow-100);
    --text-warning: var(--black);

    --bg-info: var(--blue-50);
    --text-info: var(--blue-900);

    --bg-success: var(--green-50);
    --text-success: var(--color-brand-secondary-dark);



}

/* utilities */

  .u--hide-resp{

    display: none!important;
  }

  .u--show-resp{

    display: block;
  }

@media (min-width: 768px) {

  .u--hide-resp{

    display: block;
  }

  .u--show-resp{

    display: none!important;
  }

}


/* headers */

h1, h2, h3, h4, .h1, .h2, .h3, .h4{

  font-family: var(--font-accent);
  font-weight: var(--font-semibold);
  color: var(--color-brand-secondary-dark);
  line-height: var(--line-height-120);

}

h5, h6, .h5, .h6{

  font-family: var(--font-primary);
  font-weight: var(--font-medium);
  color: var(--color-brand-secondary-dark);
  line-height: var(--line-height-120);


}

h1{}

h2, .h2{font-size: var(--font-size-36);}

@media (min-width: 768px) {

h2, .h2{font-size: var(--font-size-54);}

}

h3, .h3{font-size: var(--font-size-28);}

@media (min-width: 768px) {

h3, .h3{font-size: var(--font-size-44);}

}

h4, .h4{font-size: var(--font-size-24);}

@media (min-width: 768px) {

h4, .h4{font-size: var(--font-size-36);}

}

h5, .h5{font-size: var(--font-size-24);}

@media (min-width: 768px) {

h5, .h5{font-size: var(--font-size-28);}

}

h6, .h6{font-size: var(--font-size-18);}

@media (min-width: 768px) {

h6, .h6{font-size: var(--font-size-22);}

}

/* fancy titles */

.dec{

  position: relative;
 

}

.dec:after{

  content:'';
  position: absolute;
  width: .14em;
  height: 100%;
  background-color: var(--color-brand-primary-default);
  top: 0;
  left: 0;
  margin-left: calc(var(--space-16) * -1);

}

@media (min-width: 768px) {

.dec:after{

    margin-left: -.44em;

}


}


.dec--accent:after{

  background-color: var(--color-accent);

}


.dec--dark:after{

  background-color: var(--color-brand-secondary-dark);

}



/* link */

a{

  color: var(--color-text-link-default);

}

a:hover{

  color: var(--color-text-link-default);

}


/* Paragraph */

p, .p{

  font-family: var(--font-primary);
  font-size: var(--font-size-16);
  color: var(--color-brand-secondary-default);
  line-height: var(--line-height-140);
  font-weight: var(--font-regular);

}

@media (min-width: 768px) {

  p, .p{

    font-size: var(--font-size-18);
    line-height: var(--line-height-160);

  }

}

p b{

  font-weight: var(--font-semibold);

}

p.p--xs, .p--xs{

  font-size: var(--font-size-14);
  line-height: var(--line-height-140);  

}

p.p--s, .p--s{

  font-size: var(--font-size-16);
  line-height: var(--line-height-140);

}

p.p--l, .p--l{

  font-size: var(--font-size-22);

}

p.p--xl, .p--xl{

  font-size: var(--font-size-22);
  line-height: var(--line-height-140);

}

@media (min-width: 768px) {

p.p--xl, .p--xl{

  font-size: var(--font-size-28);
  line-height: var(--line-height-140);

}

}




/* btn */

.btn{

  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-8);
  border-radius: var(--radius-32);
  font-family: var(--font-primary);
  font-weight: var(--font-semibold);
  line-height: var(--line-height-100);
  border: var(--border-2) solid;
  transition: var(--transition-base);
  color: var(--white);
  background-color: var(--color-primary-button);
  border-color: var(--color-primary-button);

}

.btn:hover{

  color: var(--color-text-light);
  background-color: var(--color-brand-primary-hover);
  border-color: var(--color-brand-primary-hover);
  cursor: pointer;

}

.btn--full{

  width: 100%;

}



.btn--medium{

  padding: var(--space-16) var(--space-24);
  font-size: var(--font-size-16);

}

.btn--large{

  padding: var(--space-24);
  font-size: var(--font-size-22);


}



.btn.btn--outline{

  color: var(--color-primary-button);
  border-color: var(--color-primary-button);
  background-color: transparent;

}

.btn.btn--outline:hover{

  background-color: var(--color-primary-lighter-button);
  border-color: var(--color-primary-lighter-button);

}

.btn.btn--outline-dark{

  color: var(--color-brand-secondary-dark);
  border-color: var(--color-brand-secondary-dark);
  background-color: transparent;

}

.btn.btn--outline-dark:hover{

  background-color: var(--color-brand-secondary-dark);
  color: var(--white);

}

.btn.btn--outline-light{

  color: var(--white);
  border-color: var(--white);
  background-color: transparent;

}

.btn.btn--outline-light:hover{

  background-color: var(--white);
  color: var(--color-brand-primary-default);


}

/* card */

.card{

  padding: var(--space-32) var(--space-24);
  background-color: var(--color-background-white);
  border-radius: var(--radius-16);
  box-shadow: var(--shadow-basic);
  -webkit-box-shadow: var(--shadow-basic);
  -moz-box-shadow: var(--shadow-basic);


}

@media (min-width: 768px) {

  .card{

     padding: var(--space-64) var(--space-40);
     border-radius: var(--radius-32);

  }

}

/* forms components */

.form-group{

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--space-4);

}

.form-group label{

  font-family: var(--font-primary);
  font-size: var(--font-size-16);
  line-height: var(--line-height-120);
  color: var(--color-form-text-label);

}

.form-group input[type="text"],
.form-group input[type="password"],
.form-group input[type="email"],
.form-group select {
  width: 100%;
  font-family: var(--font-primary);
  font-size: var(--font-size-18);
  line-height: var(--line-height-120);
  color: var(--color-form-text-input);
  background-color: var(--color-background-white);
  border: 1px solid var(--color-form-border-input);
  border-radius: var(--radius-8);
  padding: var(--space-12);
  outline: none;
  transition:var(--transition-base);
}

.form-group input[type="text"]:focus,
.form-group input[type="password"]:focus,
.form-group input[type="email"]:focus,
.form-group select:focus {
  border-color: var(--color-form-border-input-focus);
  
}

.form-group input[type="text"]:focus-visible,
.form-group input[type="password"]:focus-visible,
.form-group input[type="email"]:focus-visible,
.form-group select:focus-visible {
  border-color: var(--color-form-border-input-focus);
  box-shadow: 0 0 0 3px var(--color-form-shadow-focus);
 
}

.form-group input[type="text"]:active,
.form-group input[type="password"]:active,
.form-group input[type="email"]:active,
.form-group select:active {
  
}

.form-group input::placeholder {
  color: var(--color-form-text-placeholder);
}

.select-wrapper {
  position: relative;
  width: 100%;
}

.select-wrapper select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: calc(var(--space-12) * 3);
  cursor: pointer;
}

.select-wrapper::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--space-12);
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--color-form-icon-select);
  border-bottom: 2px solid var(--color-form-icon-select);
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}

.select-wrapper:has(select:focus)::after,
.select-wrapper:has(select:focus-visible)::after {
  border-color: var(--color-form-icon-select-focus);
}

.form-group input:disabled,
.form-group select:disabled {
  color: var(--color-form-text-disabled);
  background-color: var(--color-form-background-disabled);
  border-color: var(--color-form-border-disabled);
  cursor: not-allowed;
  opacity: 1;
}

.select-wrapper:has(select:disabled)::after {
  border-color: var(--color-form-icon-disabled);
}

.formError.inline {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  margin: var(--space-4) 0 0 0 !important;
  opacity: 1 !important;
  width: 100%;
  z-index: 1;
}

.formError.inline .formErrorContent {
  background: transparent;
  color: var(--color-form-error-text);
  border: 0;
  box-shadow: none;
  padding: 0;
  font-family: var(--font-primary);
  font-size: var(--font-size-14);
  line-height: 1.3;
}

.formError.inline .formErrorArrow {
  display: none;
}

.form-group input.is-invalid,
.form-group select.is-invalid,
.form-group textarea.is-invalid {
  border-color: var(--color-form-error-border);
}

.form-group input.is-invalid:focus,
.form-group select.is-invalid:focus,
.form-group textarea.is-invalid:focus {
  border-color: var(--color-form-error-border);
  box-shadow: 0 0 0 3px var(--color-form-error-shadow, rgba(217, 45, 32, 0.16));
}

.form-group input.is-valid,
.form-group select.is-valid,
.form-group textarea.is-valid {
  /* border-color: var(--color-form-border-success, #12b76a); */
}


.form-group .hint{

  font-size: var(--font-size-14);
  line-height: var(--line-height-120);
  color: var(--color-brand-secondary-light);
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-4);

}

.form-group .hint.hint--info i{

  color: var(--color-brand-primary-default);
  margin-top: 1px;

}

/* checkbox component */

.form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
}

.form-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.form-checkbox label {
  position: relative;
  display: inline-flex;
  align-items: end;
  gap: var(--space-8);

  font-family: var(--font-primary);
  font-size: var(--font-size-16);
  line-height: var(--line-height-120);
  color: var(--color-form-text-label);

  cursor: pointer;
  user-select: none;
}

.form-checkbox label::before {
  content: "";
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: var(--transition-base);
  background-image: url('../img/checkbox-off.svg');
}

.form-checkbox input[type="checkbox"]:checked + label::before {
  background-image: url('../img/checkbox-on.svg');
}

.form-checkbox input[type="checkbox"]:focus-visible + label::before {
  box-shadow: 0 0 0 3px var(--color-form-shadow-focus);
}

.form-checkbox input[type="checkbox"]:disabled + label {
  color: var(--color-form-text-disabled);
  cursor: not-allowed;
}

.form-checkbox input[type="checkbox"]:disabled + label::before {
  opacity: .6;
  cursor: not-allowed;
}

/* grids */

.grid-3{

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-24);
  width: 100%;

}

@media (min-width: 768px) {

  .grid-3{

    grid-template-columns: repeat(3, minmax(0, 1fr));

  }

}

.grid-news-3{

  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--space-24);
  width: 100%;

}

@media (min-width: 768px) {

  .grid-news-3{

  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-32);

  }

}

.form-grid-2 {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--space-24);
  width: 100%;
  margin-bottom: var(--space-32);
}

@media (min-width: 768px) {

  .form-grid-2 {

     grid-template-columns: repeat(2, minmax(0, 1fr));

  }

}


.form-grid--full {
  grid-column: 1 / -1;
}

/******************* header ********************/

.site-header{

  background-color: var(--color-background-white);
  position: relative;
  z-index: 30;

}

.site-header .cont{

  display: flex;
  margin: 0 auto;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-12) var(--space-16);

}

@media (min-width: 768px) {

  .site-header .cont{

    padding: var(--space-24);

  }

}

@media (min-width: 1367px) {

.site-header .cont{

  max-width: var(--container-width-medium);
  padding: var(--space-24) var(--space-80);

}
  
}

.site-header .cont .logo img{

  display: block;
  width: auto;
  height: 52px;

}

.site-header .cont .header-right{

  display: none;
  justify-content: flex-end;
  gap: var(--space-64);

}

@media (min-width: 768px) {

  .site-header .cont .header-right{

      display: flex;

  }
  
}


.site-header .cont .social, .site-header .cont .user-access-guest{

  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-24);
 

}


@media (min-width: 768px) {

  .site-header header .cont .user-access-guest{

    display: flex; 

  }

}



 .site-header .cont .social a{

  opacity: .8;

}

 .site-header .cont .social a:hover{

  opacity: 1;

}

 .site-header .cont .social img{

  width: var(--space-24);
  height: var(--space-24);

}

/* botón hambrguesa */

.mobile-menu-toggle{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-40);
    height: var(--space-40);
    padding: 0;
    border: 0;
    color: var(--color-brand-primary-default);
    background: transparent;
    cursor: pointer;
}

.mobile-menu-toggle i{
  font-size: var(--space-32);
  line-height: 1;
}

/* avatar y menu desktop */

.user-menu-wrap{
  position: relative;
}

.user-avatar{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--space-48);
  height: var(--space-48);
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--white);
  background-color: var(--color-primary, #0969d2);
  font-size: var(--font-size-24);
  font-weight: var(--font-regular);
  line-height: var(--line-height-100);
}

button.user-avatar{
  cursor: pointer;
  transition: box-shadow .2s ease;
}

.user-menu-wrap.is-open > .user-avatar{
  box-shadow: 0 0 0 var(--space-8) rgba(157, 201, 246, .75);
}

.desktop-user-menu{
  position: absolute;
  top: calc(100% + var(--space-24));
  right: -8px;
  z-index: 50;
  width: 280px;
  overflow: hidden;
  border-radius: var(--space-16);
  background-color: var(--color-background-white);
  box-shadow: 0 8px 12px rgba(0, 0, 0, .22);
  padding-bottom: var(--space-24);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-16px);

  transition:
    opacity .2s ease,
    transform .2s ease,
    visibility .2s ease;
}

.user-menu-wrap.is-open .desktop-user-menu{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(-8px);
}

.desktop-user-menu--profile{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 24px 18px;
  border-bottom: 1px solid #d8d8d8;
}

.desktop-user-menu--profile strong{
  margin-top: 16px;
  color: #171717;
  font-size: 22px;
  font-weight: 500;
}

.desktop-user-menu--links{
  padding: 0 24px;
}

.desktop-user-menu--links a{
  display: flex;
  align-items: center;
  min-height: 61px;
  border-bottom: 1px solid #e5e5e5;
  color: #3d3b38;
  font-size: 18px;
  text-decoration: none;
  transition: color .2s ease;
}

.desktop-user-menu--links a:last-child{
  border-bottom: 0;
}

.desktop-user-menu--links a:hover{
  color: var(--color-brand-primary-default);


}

/* overlay mobile */

body.mobile-menu-is-open{
  overflow: hidden;
}

.mobile-menu-overlay{
  position: fixed;
  inset: 0;
  z-index: 90;
  background-color: rgba(0, 0, 0, .78);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition: opacity .3s ease, visibility .3s ease;
}

body.mobile-menu-is-open .mobile-menu-overlay{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}


/* menú lateral mobile */


.mobile-side-menu{
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;

  display: flex;
  flex-direction: column;

  width: min(calc(100% - 48px), 380px);
  min-height: 100dvh;
  overflow-y: auto;

  border-radius: 16px 0 0 16px;
  background-color: #f2f2f1;

  visibility: hidden;
  transform: translateX(100%);

  transition: transform .35s ease, visibility .35s ease;
}

body.mobile-menu-is-open .mobile-side-menu{
  visibility: visible;
  transform: translateX(0);
}

.mobile-menu-close{
  position: absolute;
  top: 20px;
  right: 16px;
  z-index: 2;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;

  color: var(--color-primary, #0969d2);
  background: transparent;
  cursor: pointer;
}

.mobile-menu-close i{
  font-size: 34px;
  line-height: 1;
}

.mobile-menu-content{
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 100dvh;
}

/* mobile no logueado */ 


.mobile-user-access-guest{
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 150px;
  padding: 0 22px;
}

.mobile-user-access-guest .btn{
  width: 100%;
}

/* mobile logueado */


.mobile-user-profile{
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 64px 24px 28px;
  border-bottom: 1px solid #d4d4d4;
}

.mobile-user-profile strong{
  color: #171717;
  font-size: 23px;
  font-weight: 500;
}

.mobile-user-links{
  padding: 0 24px;
}

.mobile-user-links a{
  display: flex;
  align-items: center;
  min-height: 62px;
  border-bottom: 1px solid #dedede;
  color: #3d3b38;
  font-size: 18px;
  text-decoration: none;
  transition: color .2s ease;
}

.mobile-user-links a:last-child{
  border-bottom: 0;
}

.mobile-user-links a:hover{
  color: var(--color-primary, #0969d2);
}

/* footer menú mobile */


.mobile-menu-footer{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: auto;
  padding: 48px 54px 72px;
}

.mobile-menu-logo img{
  display: block;
  width: auto;
  height: 60px;
}

.mobile-menu-social{
  display: flex;
  align-items: center;
  gap: var(--space-24);
  margin-top: 72px;
}

.mobile-menu-social a{
  display: inline-flex;
  opacity: .75;
  transition: opacity .2s ease;
}

.mobile-menu-social a:hover{
  opacity: 1;
}

.mobile-menu-social img{
  display: block;
  width: 24px;
  height: 24px;
}


/* desktop */

@media (min-width: 768px){



  .mobile-menu-toggle,
  .mobile-menu-overlay,
  .mobile-side-menu{
    display: none;
  }

}


/************ section brands *********************/


section.brands{

  padding: var(--space-24);

}

@media (min-width: 768px) {

  section.brands{

    padding: var(--space-80);

  }

}




section.brands .brands-carousel li{

  display: flex;
  justify-content: center;
  align-items: center;

}

section.brands .brands-carousel li img{

  width: 160px;
  height: auto;

}



/* section register */

section.section--secondary{

  background-color: var(--color-background-light);

}

section.section--secondary .btn.btn--outline:hover{

  background-color: var(--white);
  border-color: var(--white);

}

section.register .cont{

  max-width: var(--container-width-small);
  padding: var(--space-32) var(--space-16);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--space-32);

}



section.register .cont > div{

  width: 100%;

}

section.register .register-left{

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-24);

}

.login-on-register{

  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: var(--space-24) var(--space-16);
  gap: var(--space-16);

}

@media (min-width: 768px) {

 section.register .cont{

  padding: var(--space-128) var(--space-32);
  flex-direction: row;
  gap: var(--space-64);

 }

}

/* expositor */

section.expositor{

  background-color: var(--color-background-neutral-light); /*temporal*/

}

section.expositor .cont{

  width: 100%;
  max-width: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0;

}

section.expositor .cont > div{

  width: 100%;

}

section.expositor .expositor-left{

  display: flex;
  justify-content: flex-start;
  align-items: flex-start;

}

section.expositor .expositor-left .cont--half{


  padding-inline: var(--space-32) ;
  padding-block: var(--space-32);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--space-12);

}


@media (min-width: 768px) {

  section.expositor .cont{

    flex-direction: row;
    justify-content: center;
    align-items: center;

  }

  section.expositor .expositor-left{

  justify-content: flex-end;
  align-items: center;

  }

  section.expositor .expositor-left .cont--half{

    max-width: var(--container-width-small-half);
    padding-inline: var(--space-32) var(--space-64);
    padding-block: var(--space-64);
    justify-content: center;
    gap: var(--space-16);


  }


}






section.expositor .expositor-left .cont--half h3{

  color: var(--color-brand-primary-default);

}



section.expositor .expositor-right {
  background-color: var(--color-background-medium);
  height: 480px;
  position: relative;
}

section.expositor .expositor-right .video-mask {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  background-color: var(--color-background-medium);
}


section.expositor .expositor-right .video-mask__image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  position: relative;
}

.video-mask__play {
  width: 84px;
  height: 84px;
  border: 0;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.35);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .25s ease, transform .25s ease;
}

.video-mask__play span {
  width: 0;
  height: 0;
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
  border-left: 24px solid #fff;
  margin-left: 6px;
}

.video-mask:hover .video-mask__play {
  background-color: rgba(0, 0, 0, 0.5);
  transform: translate(-50%, -50%) scale(1.05);
}

section.expositor .expositor-right .video-mask iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

/* novedades */

section.novedades{

  background-color: var(--color-background-light);

}

section.novedades .cont{


  padding: var(--space-32) var(--space-16);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: var(--space-32);

}

section.novedades .cont h3{

  align-self: flex-start;

}

section.novedades .cont .news-list{

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--space-24);


}

section.novedades .cont .btn{

  width: 100%;

}

.news-card{

  background-color: var(--color-background-white);
  border-radius: var(--radius-16);
  overflow: hidden;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  
}


.news-card .news-image{

  display: block;
  overflow: hidden;

}

.news-card .news-image img{

  width: 100%;
  height: auto;


}

.news-card .news-data{

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 8px;
  padding: var(--space-24) var(--space-24) var(--space-64) var(--space-24);
  position: relative;
  flex-grow: 1;

}

.news-card .news-data .more{

  position: absolute;
  bottom: var(--space-24);
  right: var(--space-24);
  font-size: var(--font-size-28);
  color: var(--color-brand-primary-default);
  transition: var(--transition-base);

}

.news-card .news-data .more:hover{

  color: var(--color-brand-primary-hover);

}



@media (min-width: 768px) {

  section.novedades .cont{

    max-width: var(--container-width-medium);
    padding: var(--space-128) var(--space-80);

  }

  section.novedades .cont .news-list{

    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    gap: var(--space-32);

  }
  section.novedades .cont .btn{

  width: fit-content;

}
  
}



/* intitucional */


section.institutional{}


section.institutional .cont{

  width: 100%;
  max-width: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0;
  

}

section.institutional .cont > div{

  width: 100%;

}

section.institutional .institutional-left{


  background-image: url('../img/bg_institucional.jpg');
  background-size: cover;
  background-position: center;


}

section.institutional .institutional-left .cont--half{

  max-width: 640px;
  padding-inline: var(--space-16);
  padding-block: var(--space-32);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--space-16);
  color: var(--white);

}

section.institutional .institutional-left .cont--half h3, section.institutional .institutional-left .cont--half p{

  color: var(--white);

}


section.institutional .institutional-right{

  display: flex;
  justify-content: flex-start;
  align-items: center;

}

section.institutional .institutional-right .cont--half{

  padding-inline: var(--space-32);
  padding-block: var(--space-32);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--space-16);
  width: 100%;
  height: 100%;

}



section.institutional .institutional-right .cont--half h4{

  color: var(--gray-300);

}


@media (min-width: 768px) {

  section.institutional .cont{

    flex-direction: row;
    justify-content: center;
    align-items: stretch;

  }

  section.institutional .institutional-left{

    display: flex;
    justify-content: flex-end;
    align-items: center;

  }

  section.institutional .institutional-left .cont--half{

    max-width: 640px;
    padding-inline: 0 var(--space-64);
    padding-block: var(--space-64);
    justify-content: center;

  }

  section.institutional .institutional-right .cont--half{

    max-width: 640px;
    padding-inline: var(--space-64) var(--space-32);
     padding-block: var(--space-64);
       gap: var(--space-32);

  }

}











/* footer */

footer{

  background-color: var(--color-background-darker);

}

footer .cont{

  padding: var(--space-32) var(--space-16);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: var(--space-64);

}

footer .cont .footer-left{

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: var(--space-16);

}

footer .cont .footer-left p{

  color: var(--color-brand-primary-lighter);
  line-height: var(--line-height-100);

}


footer .cont .footer-left img.logo-crear{

  width: 280px;
  height: auto;

}

footer .cont .footer-right{

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: var(--space-24);

}

footer .cont .footer-right .social{

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: var(--space-24);  

}

footer .cont .footer-right .social a{

  opacity: .9;

}

footer .cont .footer-right .social a:hover{

  opacity: 1;

}

footer .cont .footer-right .email a{

  color: var(--color-text-light);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-8);
  opacity: .9;

}


footer .cont .footer-right .email a:hover{

  opacity: 1;

}

footer .cont .footer-right .email a i{

  font-size: 24px;

}

footer .cont .footer-right .email a span{

  line-height: var(--line-height-120);

}

footer .foot{

  background-color: var(--color-background-darkest);

}

footer .foot .cont{

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding-block: var(--space-24);

}

footer .foot .cont .legal-data{

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: var(--space-16);
  text-align: center;

}

footer .foot .cont .legal-data li{

  color: var(--color-brand-secondary-lighter);


}



footer .foot .cont .legal-data li a{

  color: var(--color-brand-secondary-lightest);


}

footer .foot .cont .legal-data li a:hover{

  color: var(--white);

}


@media (min-width: 768px) {

  footer .cont{

    max-width: var(--container-width-medium);
    padding: var(--space-80);
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    

  }

  footer .cont .footer-left{

    justify-content: flex-start;
    align-items: flex-start;

  }

  footer .cont .footer-right{


    justify-content: space-between;
    align-items: flex-end;


  }

  footer .cont .footer-right .social{

     justify-content: flex-end;

  }

  footer .cont .footer-right .email a{

      justify-content: flex-end;

  }

  footer .foot .cont{

    flex-direction: row;
    justify-content: center;

  }

  footer .foot .cont .legal-data{

    flex-direction: row;
    justify-content: center;


  }

  footer .foot .cont .legal-data li:first-child{

  padding-right: var(--space-16);
  border-right: 1px solid var(--color-brand-secondary-lighter);


}

}























/* hero */

section.hero{

width: 100vw;
height: calc(100vh - 76px);
min-height: fit-content;
background-color: var(--color-background-primary);
background-image: url('../img/explanada.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center top;
position: relative;
overflow: hidden;



}

section.hero:after{

  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--color-background-primary);
  opacity: .7;

}

section.hero .hero-wrap{

  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  inset: 0;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .35s ease, visibility .35s ease;

}

section.hero .hero-wrap .hero-left{

  background-color: var(--color-background-primary);
  flex: 1 1 0;

}

/* Estado activo */
.hero.is-info-open .hero-wrap {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

section.hero .hero-wrap .hero-cont{

  /* background-color: var(--color-background-primary); */
  /* background-color: rgba(5,96,199,.7); */
  max-width: 1440px;
  width: 100%;
  flex: 0 0 min(100%, 1440px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;

}

section.hero .hero-wrap .hero-right{

  background-color: transparent;
  flex: 1 1 0;

}

.hero-cont .hero-cont-left{

  background-color: var(--color-background-primary);
  flex: 1 1 0;
  padding: var(--space-24) var(--space-16);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-16);
  

}

.hero-cont .hero-cont-left > div{

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--space-4);

}

.hero-cont .hero-cont-left > div h4{

  color: var(--color-text-light);

}

.hero-cont .hero-cont-left > div p{

  color: var(--color-text-light);

}

.hero-cont .hero-cont-center{

  max-width: 640px;
  width: 100%;
  flex: 0 0 min(100%, 640px);
  background-color: rgba(5,96,199,.7);
  padding: var(--space-32) var(--space-16);


}

.hero-cont .hero-cont-center {

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--space-12);


}

.hero-cont .hero-cont-center .hero-intro h1{

  color: var(--color-accent);
  font-size: var(--font-size-68);
  line-height: var(--line-height-100);

}

.hero-cont .hero-cont-center .hero-intro h2{

  color: var(--color-accent);

}

.hero-cont .hero-cont-center .hero-intro h3{

  color: var(--color-text-light);

}

.hero-cont .hero-cont-center .hero-intro h3 span{

  text-transform: lowercase;

}

.hero-cont .hero-cont-center .hero-countdown .countdown-wrap{

  font-family: var(--font-clock);
  font-size: var(--font-size-44);
  font-weight: var(--font-bold);
  color: var(--color-text-light);
  letter-spacing: -0.04em;

}

.hero-cont .hero-cont-center .hero-countdown .text-clock{

  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-8);
  width: 298px;
  padding-bottom: var(--space-8);

}

.hero-cont .hero-cont-center .hero-countdown .text-clock span{

  display: block;
  width: 100%;
  text-align: center;
  color: var(--color-text-light);
  text-transform: uppercase;
  font-size: var(--font-size-11);

}

.hero-cont .hero-cont-right{

  background-color: transparent;
  flex: 1 1 0;
  padding: var(--space-80);

}

/* hero more info */

.hero.is-info-open{

  height: 900px;

}

.hero.is-info-open:after{

  opacity: 1;

}

.hero-info-wrap{

  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 20;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  align-items: stretch;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .35s ease, visibility 0s linear .55s;


}


.hero.is-info-open .hero-info-wrap {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .35s ease, visibility 0s linear 0s;
}

.hero-info-wrap > div{

  width: 100%;

}

.hero-info-wrap .hero-info-left{

  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  background-color: var(--color-background-primary);
  opacity: 0;
  transform: translateY(-100px);
  transition: opacity .45s ease, transform .45s ease;
  transition-delay: .12s;

  

}


.hero-info-wrap .hero-info-left .cont--half{

  max-width: 720px;
  padding: var(--space-32) var(--space-16);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-16);
  color: var(--white);  

}

.hero-info-wrap .hero-info-left .cont--half h4, .hero-info-wrap .hero-info-left .cont--half p{

  color: var(--color-text-light);

}


.hero-info-wrap .hero-info-right{


  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  background-color: var(--color-background-light);
  opacity: 0;
  transform: translateY(-100px);
  transition: opacity .45s ease, transform .45s ease; transition-delay: 0s;

}

.hero.is-info-open .hero-info-left{

  opacity: 1;
  transform: translateY(0);
  transition-delay: .12s;

}


.hero.is-info-open .hero-info-right {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0s;
}



.hero-info-wrap .hero-info-right .cont--half{

  max-width: 720px;
  padding: var(--space-32) var(--space-16);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-24);
  height: 100%;



}



.hero-info-wrap .hero-info-right .cont--half h4{

  color: var(--color-brand-primary-default);



}

.hero-info-wrap .hero-info-right .cont--half ul{

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--space-8);

}

.hero-info-wrap .hero-info-right .cont--half li{

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--space-4);

}

.hero-info-wrap .hero-info-right .cont--half li h6{

  color: var(--color-brand-primary-default);

}

.hero-info-wrap .hero-info-right .cont--half li p{

  color: var(--color-brand-secondary-default);

}



@media (min-width: 768px) {

  section.hero{

    height: calc(100vh - 100px);
    overflow: hidden;


  }

  section.hero .hero-wrap{

    flex-direction: row;
    justify-content: center;

  }

  section.hero .hero-wrap .hero-cont{

     flex-direction: row;

  }

  .hero-cont .hero-cont-left{

    padding: var(--space-80);
    gap: var(--space-32);

  }

  .hero-cont .hero-cont-left > div{

    gap: var(--space-8);

  }

  .hero-cont .hero-cont-center{

     padding: var(--space-80);

  }

  .hero-cont .hero-cont-center {

    justify-content: center;
    gap: var(--space-24);


  }

  .hero-cont .hero-cont-center .hero-intro h1{

    font-size: var(--font-size-80);

  }

  .hero-cont .hero-cont-center .hero-countdown .countdown-wrap{

      font-size: var(--font-size-68);

  }

  .hero-cont .hero-cont-center .hero-countdown .text-clock{

     width: 470px;
      gap: var(--space-16);

  }

  .hero-cont .hero-cont-center .hero-countdown .text-clock span{

      font-size: var(--font-size-14);
  
  }

  /* hero more info */

  .hero.is-info-open{

    height: calc(100vh - 100px);
   

  }

  .hero.is-info-open:after{ opacity: .7;}

  .hero-info-wrap{

      flex-direction: row;
      justify-content: center;
      

  }

  .hero-info-wrap .hero-info-left{


    justify-content: flex-end;
    align-items: center;
     transform: translateX(-100px);

  }

  .hero-info-wrap .hero-info-right{


         transform: translateX(-100px);
  }

  .hero.is-info-open .hero-info-left{


  transform: translateX(0);
    transition-delay: 0s;


}
.hero.is-info-open .hero-info-right {
  opacity: 1;
  transform: translateX(0);
  transition-delay: .12s;
}


  .hero-info-wrap .hero-info-left .cont--half{

    padding-inline: var(--space-80);
    padding-block: var(--space-80);

  }

  .hero-info-wrap .hero-info-right .cont--half{

    padding-inline: var(--space-80);
    padding-block: var(--space-80);

  }

  .hero-info-wrap .hero-info-right .cont--half ul{

    gap: var(--space-16);

  }

  .hero-info-wrap .hero-info-right .cont--half li{

      gap: var(--space-8);

  }

}













/* modal login*/

.login-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  pointer-events: none;
  visibility: hidden;

  transition: opacity .25s ease, visibility .25s ease;
}

.login-modal.is-active {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.login-modal--overlay {
  position: absolute;
  inset: 0;
  background: var(--color-background-primary);
  opacity: .95;
}

.login-modal--card {
  position: relative;
  z-index: 1;
  width: min(100% - 32px, 420px);
  background: var(--color-background-white);
  border-radius: var(--radius-32);
  padding: var(--space-48) var(--space-32);
  box-shadow: var(--shadow-modal);
  transform: translateY(16px) scale(.98);
  opacity: 0;
  transition: var(--transition-base);
}

.login-modal--card h6{

  color: var(--color-brand-primary-default);
  margin-bottom: var(--space-16);

}

.login-modal--form  button{

  margin-top: var(--space-8);

}

a.forget-pass{

  display: block;
  text-align: center;
  margin-top: var(--space-32);

}


.login-modal .login-modal--logo img{

  width: 260px;
  height: auto;
  display: block;
  margin-bottom: var(--space-32);

}


.login-modal.is-active .login-modal--card {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.login-modal--close {
  position: absolute;
  top: var(--space-24);
  right: var(--space-24);
  width: var(--space-24);
  height: var(--space-24);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: var(--color-brand-primary-default);
}

.login-modal--close:hover {
  color: var(--color-brand-primary-hover);
}



.login-modal--form {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

body.modal-open {
  overflow: hidden;
}

/* --- login --- */

.login-page{


  display: flex;
  flex-direction: column;
  justify-content: flex-start;


}

.login-page .login-page-left{

  width: 100%;
  background-image: url('../img/bg_img_login.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;

}

.login-page .login-page-left:after{

  content:'';
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 0;
  background-color: var(--color-background-primary);
  opacity: .8;
  top: 0;

}

.login-page .login-page-left .cont{


  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  z-index: 1;


}

.login-page .login-page-left .header{


position: absolute;
z-index: 10;
top: 12px;
left: 16px;
  

}

.login-page .login-page-left .header .logo img{
  height: 52px;
  width: auto;
}

.login-page .login-page-left .login-slogan{

  
 
  padding-inline: var(--space-16);
  padding-top: 100px;
  padding-bottom: var(--space-32);

}




.login-page .login-page-left .login-slogan h2{

  color: var(--white);

}

.login-page .login-page-right{



  background-color: var(--color-background-light);



}

.login-page .login-page-right .cont{


padding-inline: 0



}

.login-page .login-page-right .cont .card{

  width: 100%;
  border-radius: var(--radius-0);

}

@media (min-width: 768px) {

  
  .login-page{

    width: 100vw;
    height: 100vh;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;

  }

  .login-page .login-page-left{


      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      align-items: flex-start;
      

  }

  .login-page .login-page-left .cont{

      width: 100%;
      max-width: 720px;
        height: 100vh;
      

  }

  .login-page .login-page-left .header{

    position: absolute;
    top: 24px;
    left: 80px;
  

  }

  .login-page .login-page-left .login-slogan{

  
    margin-inline: 80px;
    padding-block: 0;

      

  }

  .login-page .login-page-right{

      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: flex-start;
      height: 100vh;


  }

  .login-page .login-page-right .cont{

  width: 100%;
  max-width: 720px;
    height: 100vh;
  padding-inline: 80px;
    display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;

    
  }

  .login-page .login-page-right .cont .card{

    border-radius: var(--radius-16);

  }


}

















/* tabs component */

.form-tabs {
  width: 100%;
}

.form-tabs--nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-bottom: 3px solid var(--color-border-light);
  margin-bottom: var(--space-32, 32px);
}

.form-tabs--tab {
  position: relative;
  appearance: none;
  border: 0;
  background: transparent;

  padding: 0 0 var(--space-16, 16px);

  font-family: var(--font-primary);
  font-size: var(--font-size-18);
  line-height: var(--line-height-120);
  color: var(--color-text-secondary, #4d463f);

  cursor: pointer;
  transition: var(--transition-base);
}

.form-tabs--tab:hover,
.form-tabs--tab.is-active {
  color: var(--color-brand-primary-default);
}

.form-tabs--tab::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;

  width: 100%;
  height: 3px;

  background-color: var(--color-brand-primary-default);

  opacity: 0;
  transform: scaleX(0);
  transform-origin: center;
  transition: var(--transition-base);
}

.form-tabs--tab.is-active::after {
  opacity: 1;
  transform: scaleX(1);
}

.form-tabs--tab:focus-visible {
  outline: none;
}

.form-tabs--tab:focus-visible::before {
  content: "";
  position: absolute;
  inset: -8px 8px;
  border-radius: var(--radius-8);
  box-shadow: 0 0 0 3px var(--color-form-shadow-focus);
}

.form-tabs--panel[hidden]  {

  display: none !important;
}

.form-tabs--panels {
  position: relative;
  transition: var(--transition-base);
}



.form-tabs--panel.is-active {
  display: block;
}


/* notificaciones */

.alert{

position: relative;
border-radius: var(--radius-16);
padding: var(--space-16) var(--space-16) var(--space-16) var(--space-48);
font-size: var(--font-size-16);
line-height: var(--line-height-140);
margin-bottom: var(--space-24);

}

.alert.alert--error{

  background-color: var(--bg-error);
  color: var(--text-error);

}

.alert.alert--error:after{

  content: url(../img/icon-error.svg);
  width: 24px;
  height: 24px;
  position: absolute;
  left: var(--space-16);
  top: var(--space-16);

}

/* paginas internas */

.section-title{

background-color: var( --color-background-neutral-light);
padding-block: var(--space-32);

}

.section-title .cont{

  padding-block: var(--space-24);
  padding-inline: var(--space-16);

}

.section-title .cont h2{

  color: var(--color-brand-secondary-dark);
  text-align: left;


}


@media (min-width: 768px) {

  .section-title{

    padding-block: var(--space-64);

  }

  .section-title .cont{

    padding-block: var(--space-32);
    max-width: calc(var(--container-width-medium) - 160px);
    padding: 0;
    margin: 0 auto;

  }

}





/* todas las novedades */

.page-news, .show-news{

background-color: var(--color-background-neutral-light);

}

.novedades.novedades--show-news{

  background-color: #fff;

}

.novedades.novedades--show-news .news-card{

  background-color: var(--color-background-neutral-light);

}

.page-news .cont{

  padding-block: 0 var(--space-32);
  padding-inline: var(--space-16);
  
}

.show-news .cont{

  padding-block: var(--space-48) ;
  padding-inline: var(--space-16);

}


.show-news h3{

margin-bottom: var(--space-24);

}

.show-news > img{

  display: block;
  margin-bottom: var(--space-24);

}




@media (min-width: 768px) {

  .page-news .cont{

    padding-block: 0 var(--space-48) ;
    max-width: var(--container-width-medium);
    margin: 0 auto;
    padding-inline: var(--space-80);


  }

  .show-news .cont{

  padding-block: var(--space-64) ;
  padding-inline: var(--space-24);
  max-width: var(--container-width-article);
  margin: 0 auto;

  }

  
.show-news h3{

margin-bottom: var(--space-40);

}

.show-news > img{


  margin-bottom: var(--space-32);

}



}






/* paginado */

.pager{

  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-8);
  margin: var(--space-64) auto;

}

.pager > a{

  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--space-32);
  height: var(--space-32);
  font-size: var(--font-size-16);
  line-height: var(--line-height-100);
  border-radius: var(--radius-8);
  background: var(--color-background-white);
  color: var(--color-brand-secondary-default);
  transition: var(--transition-linke);


}

.pager > a:hover{

  background-color: var(--blue-50);
  cursor: pointer;

}

.pager > a.active{

  background-color: var(--color-background-primary);
  color: var(--white);
  pointer-events: none;

}