/*
LT frontend framework
esto NO ES codigo abierto. Autor: Carlos Sierra Cebrian DR 2024. Prohibida su reproduccion o uso sin consentimiento escrito del autor
*/

/* @import url('https://fonts.googleapis.com/css2?family=Gelasio:wght@300;400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@300;400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;500;600&display=swap'); */

/* @import "mixin_BEM.css";   */

:root {
  --remdef: 20px; /* define 1 rem */
  --lhdef: 1.5; /* define line height */

  --font-xlarge: calc(var(--remdef) * 1.33);
  --font-large: calc(var(--remdef) * 1.2);
  --font-small: calc(var(--remdef) * 0.8);
  --font-xsmall: calc(var(--remdef) * 0.67);

  --gutter: 1rem;
  --gutter-thr: calc(var(--gutter) / 3);
  --gutter-hlf: calc(var(--gutter) / 2);
  --gutter-dbl: calc(var(--gutter) * 2);
  --no-gutter: -1rem;

  --gutter-components: 1rem;
  --gutter-components-hlf: 0.25rem;
  --gutter-components-dbl: 1rem;

  --gutter-subcomponents: 0.5rem;
  --gutter-subcomponents-hlf: 0.25rem;
  --gutter-subcomponents-dbl: 1rem;

  --gutter-alldown: 1rem; /* define el margin-bottom de todo */

  --navjust: calc( var(--remdef) * 0);

--oscuro: #3e3f41;
  --oscuro_a: #3e3f41;

  --medio: #75797e;
  --medio_a: #75797e;

  --claro: #8081ff;
  --claro_a: rgba(50, 56, 100, 0.1);

  --fondo: #8081ff;

  --realce: #4445c1;

  --texto_base: #020000de;
  --texto_claro: #ffffff;
  --texto_formulario: #020000de;

    /* para el topnav del main menu */
  --texto_contraste_pos: #ffffff;
  --texto_contraste_neg: #3e3f41;

  --fsize-menu: 110%;
  --fsize-compontents: 90%;

  --radio: 0rem;
  --radio_o: 0rem; /*calc( var(--radio)/2 );*/
  --radio_i: 0rem; /*calc( var(--radio)/4 );*/

  --hero_a: rgba(0, 80, 117, 0.7);

  --fondo_pagina: #ffffff;
}

@view-transition {
    navigation: auto;
}

html,
body {
  margin: 0;
  padding: 0;
  font-size: var(--remdef);
  font-family: "Open Sans", Lato, sans-serif;
}

body {
  margin: 0;
  padding: 0;
  max-width: 100vw !important;
  min-height: 100vh !important;
  font-style: normal;
  font-weight: 300;
  background: var(--fondo_pagina);
  color: var(--texto_base);
  box-sizing: border-box;
  border: 0px solid transparent;
}

body h1,
h2,
h3 {
  font-family: Gelasio, sans-serif;
  font-style: normal;
  font-weight: bold;
  color: var(--oscuro);
}

/* atencion aqui */
body h1,
body h2,
body h3 {
    line-height: 1;
    margin-bottom: var(--gutter-alldown);
}

/* atencion aqui */
body p {
  line-height: var(--lhdef);
}

body a {
  color: var(--oscuro);
  text-decoration: none;
  font-weight: 300;
}

body a:hover {
  color: var(--realce);
}

div,
main,
aside,
article,
pre,
blockquote,
a,
ul,
ol,
li,
span {
  box-sizing: border-box;
}

/* -----------------------*/
/*  Wireframe  */
/* -----------------------*/

#wrap {
  box-sizing: border-box;
  display: block;
  clear: both;
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100vh;
  background-color: #ffffff;
  overflow-x: hidden !important;
}

#page {
  box-sizing: border-box;
  display: block;
  clear: both;
  width: 100%;
  max-width: 1280px !important;
  min-height: 100vh;
  margin: 0 auto;
  padding: 0;
  padding-top: var(--navjust);
  background-color: #ffffff;
  overflow-x: hidden !important;
}

/* -----------------------*/
/*    Header &   */
/*   Mavigation  */
/* -----------------------*/

.header {
  display: block;
  padding: 0;
  margin: 0;
  width: 100vw;
  height: 120px;
  background: var(--fondo_pagina);
}

.header img.logo {
  position: relative;
  display: block;
  float: none;
  margin: 0 auto;
}

.topnav {
  font-family: "Open Sans", sans-serif;
  overflow: hidden;
  background-color: var(--oscuro_a);
  z-index:10 !important;
}

.topnav * {
  font-size: var(--fsize-menu);
  line-height: inherit;
}

.topnav div.fitnav {
  position: relative;
  float: none;
  display: block;
  clear: both;
  margin: 0 auto;
  padding: 0;
  max-width: 1280px;
  width: 100%;
}

/*
.topnav span:not(span.uids) {
  box-sizing: border-box !important;
  float: left;
  display: block;
  text-align: center;
  line-height: 2rem;
  padding: calc(var(--gutter) * 0.5) calc(var(--gutter) * 1.5)
  calc(var(--gutter) * 0.5) calc(var(--gutter) * 1.5);
  vertical-align: center;
}
*/

.topnav a.uids {
  display: block;
  float: right;
}

.topnav a.hidden {
    display:none !important;
}

.topnav a {
  box-sizing: border-box !important;
  font-family: inherit;
  font-weight: bold;
  color: var(--texto_claro);
  float: left;
  display: inline-block;
  text-align: center;
  line-height: 2rem;
  padding: calc(var(--gutter) * 0.5) calc(var(--gutter) * 1.5)
  calc(var(--gutter) * 0.5) calc(var(--gutter) * 1.5);
  margin-left: calc(var(--gutter) * 0.2);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}


/*.topnav a::after {
    content: "		|";
    display: inline-block;
    color: var(--claro);
    text-decoration-color: var(--claro);
}*/

.topnav a::after:hover {
    color: var(--claro);
    text-decoration-color: var(--claro);
}

.topnav a:hover:not(.navlogo):not(.burger) {
  background-color: var(--medio) !important;
  color: var(--realce) !important;
  border-bottom: 2px solid var(--realce);
}

.topnav a.active {
  color: var(--realce) !important;
  border-bottom: 2px solid var(--realce);
}


.topnav a.burger {
  display: none;
  float: right;
  margin: 0;
  padding: 0 0 !important;  /* quita padding vertical */
  text-align: center;
  width: 36px;
  height: 40px;
  line-height: 40px; /* igual a la altura */
}

.topnav a.burger > svg {
  vertical-align: middle !important;
}

.topnav a.navlogo {
  display: none;
  text-decoration: none;
  max-height: 40px;
  padding: 0.25rem 0 0 0.25rem !important;
}

.topnav a.navlogo svg path {
  fill: var(--texto_contraste_pos);
}

/* utils */
.center,
.center > * {
  text-align: center !important;
}

.right,
.right > * {
  text-align: right !important;
}

/* -----------------------*/
/*    Layout    */
/* -----------------------*/

.row {
  box-sizing: border-box;
  display: block;
  float: left;
  clear: both;
  width: 100%;
}

/* Ajuste de gutters a la derecha 
para la ultima columna en la derecha, 
o para la unica columna en la fila  
ATENCION .w100 siempre en su parent.row
*/
.row > *.col:last-child.agt,
.row > *.col:only-child.agt {
  padding-right: var(--gutter) !important;
}

.col {
  box-sizing: border-box;
  float: left;
  display: block;
  clear: none;
}

/* desarrollar las clases que funcionen como columnas al contraste 
 y se manejan como excepcion; rasura margenes y paddings superiores en 1eros en columna */
.col > h1:first-of-type,
.col > h2:first-of-type,
.col > h3:first-of-type,
.col > p:first-of-type {
  padding-top: 0 !important;
  margin-top: 0.34rem !important;
}

/* push down all excepto H's*/
.col > *:not(h1):not(h2):not(h3):not(h4):not(p):not(span):not(a) {
  margin-bottom: var(--gutter-alldown) !important;
}

/* Gral defs for img behavior */

.w100 {
  width: 100%;
}

.w70 {
  width: 70%;
}

.w66 {
  width: 66.66%;
}

.w65 {
  width: 65%;
}

.w60 {
  width: 60%;
}

.w50 {
  width: 50%;
}

.w40 {
  width: 40%;
}

.w35 {
  width: 35%;
}

.w33 {
  width: 33.33%;
}

.w30 {
  width: 30%;
}

.w25 {
  width: 25%;
}

/* texto pequeño*/
.fsmall {
    font-size: var(--font-small);
}

/* remove gutter */
.rgt {
  margin: 0;
  padding: 0;
}

/* fixed gutter */
.fgt {
  padding: var(--gutter);
}

/* fixed gutter half */
.fgth {
  padding: var(--gutter-hlf);
}

/* mismo tratamiento que dentro de .col
  1er ocurrencia de elementos H's rasura excesos de margen y padding */
.fgt > h1:first-of-type,
.fgt > h2:first-of-type,
.fgt > h3:first-of-type,
.fgt > p:first-of-type {
  padding-top: 0;
  margin-top: var(--gutter);
}

.fgth > h1:first-of-type,
.fgth > h2:first-of-type,
.fgth > h3:first-of-type,
.fgth > p:first-of-type {
  padding-top: 0;
  margin-top: var(--gutter-hlf);
}

/* adjust gutter */
.agt {
  padding: var(--gutter) 0 0 var(--gutter);
}

/* adjust gutter half */
.agth {
  padding: var(--gutter-hlf) 0 0 var(--gutter-hlf);
}

.col > img {
  box-sizing: border-box;
  display: block;
  clear: both;
  height: auto;
  width: auto;
  max-width: 100% !important;
  margin: 0 auto;
  margin-bottom: var(--remdef);
  overflow: hidden;
  border-radius: calc(var(--radio) / 4);
}

.col > img.ball {
  border-radius: 50%;
  background-color: transparent !important;
}

/* ----------------------------- */
/*          Font Scaling         */
/* ----------------------------- */

.fnt-large {
  font-size: var(--font-large);
}

.fnt-small {
  font-size: var(--font-small);
}

/* -------------------------------*/
/*            Globos              */
/* -------------------------------*/


span.wasap {
  position: fixed;
  bottom: 14vh; /*calc(var(--gutter) * 6);*/
  right: calc(var(--gutter) * 2);
  width: 42px;
  height: 42px;
  line-height: 28px;
  overflow: hidden;
  text-align: center;
  vertical-align: middle;
  z-index: 3;
  border-radius: 50%;
  background-color: #25D366; /* var(--oscuro_a); */
  color: var(--texto_claro);
}

span.wasap:hover {
  line-height: 28px;
  vertical-align: top !important;
  background-color: var(--oscuro_a);
  background-color: #128C7E; /* var(--claro); */
  cursor: pointer;
}

span.totop {
  /*box-sizing: border-box;*/
  position: fixed;
  bottom: 6vh;
  right: calc(var(--gutter) * 2);
  width: 40px;
  height: 40px;
  line-height: 36px;
  overflow: hidden;
  text-align: center;
  vertical-align: middle;
  z-index: 3;
  border-radius: 50%;
  background-color: var(--oscuro_a);
  color: var(--texto_claro);
  border: 2px solid var(--texto_contraste_pos);
}

span.totop:hover {
  line-height: 36px;
  vertical-align: top !important;
  background-color: var(--claro);
  border-color: var(--claro);
  cursor: pointer;
}

/* -------------------------------*/
/*   Components & Subcomponents   */
/*           overrides            */
/* -------------------------------*/

.cpt {
  box-sizing: border-box !important;
  font-size: var(--fsize-compontents) !important;
  padding: var(--gutter-components);
  margin: 0 0 var(--gutter) 0 !important;
  border: 0px solid transparent;
  border-radius: var(--radio_o);
}

.scpt {
  box-sizing: border-box !important;
  padding: var(--gutter-subcomponents);
  border: 1px solid transparent;
  border-radius: var(--radio_i);
}

.cpt > h1,
.cpt > h2,
.cpt > h3,
.cpt > p,
.cpt > ul,
.cpt > ol {
  margin-top: 0;
  padding-top: 0;
  margin-bottom: 0;
  padding-bottom: var(--gutter-components);
}

.scpt > h1,
.scpt > h2,
.scpt > h3,
.scpt > p {
  margin-top: 0;
  padding-top: 0;
  margin-bottom: 0;
  padding-bottom: var(--gutter-subcomponents);
}

/* -----------------------*/
/*   FA   */
/* -----------------------*/

*.icon {
  font-size: inherit;
  color: var(--medio);
}

*.icon .double {
  font-size: 200% !important;
  color: var(--oscuro);
}

/* Listas con iconitos */
*.l_icon {
  font-size: inherit;
  color: #008001;
}

/* -----------------------*/
/*   Hero   */
/* -----------------------*/

div.hero {
  position: relative;
  box-sizing: border-box;
  padding: 0;
  /*empuja hacia abajo todo*/
  margin: 0 0 var(--gutter) 0;
  display: block;
  clear: both;
  width: 100%;
  height: 350px;
  border-radius: var(--radio_i);
  z-index: 0;
}

div.hero div.hero_img {
  box-sizing: border-box;
  position: relative;
  display: block;
  width: 100%;
  height: 350px;
  /*background-image: url('../img/hero.jpg');*/
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  border-radius: var(--radio_i);
  z-index: 1;
}

div.hero div.hero_filter {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: var(--hero_a);
  border-radius: var(--radio_i);
  z-index: 2;
}

div.hero .hero_title {
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  transform: translate(-50%, -50%);
  line-height: initial;
  /*font-size: 3rem;*/
  text-align: center;
  white-space: pre-wrap;
  color: white;
  /*font-weight: 600;*/
  color: var(--texto_claro);
  z-index: 3;
}

/* -----------------------*/
/*   Grids   */
/* -----------------------*/

/*backligh box for alphas*/

div.bkl {
  background-color: var(--claro);
  border-radius: calc(var(--radio) / 2);
}

/* -----------------------*/
/*   xroll   */
/* -----------------------*/

.xroll {
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  clear: both;
  overflow-x: scroll;
  overflow-y: hidden;
  padding: 0;
  margin: 0 0 var(--gutter) 0;
  scroll-behavior: auto;
  border-radius: none !important;
}

.xroll::-webkit-scrollbar {
  color: inherit;
}

.xroll a.btn_left {
  display: inline-block;
  flex: none;
  line-height: 240px;
  text-align: center;
  vertical-align: middle;
  color: var(--texto_claro) !important;
  background-color: var(--claro) !important;
  width: 24px !important;
  margin-right: var(--gutter-subcomponents) !important;
  border-top-right-radius: calc(var(--radio) / 4);
  border-bottom-right-radius: calc(var(--radio) / 4);
}

.xroll a.btn_left:hover {
  background-color: var(--oscuro_a) !important;
  text-decoration: none;
}

.xroll a.btn_right {
  display: inline-block;
  flex: none;
  line-height: 240px;
  text-align: center;
  vertical-align: middle;
  color: var(--texto_claro) !important;
  background-color: var(--claro) !important;
  width: 24px;
  border-top-left-radius: calc(var(--radio) / 4);
  border-bottom-left-radius: calc(var(--radio) / 4);
}

.xroll a.btn_right:hover {
  background-color: var(--oscuro_a) !important;
  text-decoration: none;
}

/*iconos botones*/

i.btni {
  color: var(--texto_claro) !important;
}

/* Items */
.xroll .xr_item {
  box-sizing: border-box;
  position: relative;
  flex: 0 0 auto;
  width: calc(33.33% - 9px - var(--gutter-subcomponents));
  height: 240px;
  margin-right: var(--gutter-subcomponents);
  padding: var(--gutter-subcomponents);
  border: 1px solid var(--claro);
  border-radius: calc(var(--radio) / 4);
  font-size: 1rem;
  line-height: 1rem;
  overflow-y: hidden;
}

.xroll .xr_item > img {
  display: block;
  margin: 0 auto !important;
  max-height: calc(60% - 1rem);
  width: auto;
}

/* -----------------------*/
/*   Formulario   */
/* -----------------------*/

.form {
  box-sizing: border-box;
  display: block;
  clear: both;
  background-color: var(--claro);
  border-radius: var(--radio_i);
}

.form > *:focus {
  outline: none !important;
}

.form h2 {
  color: rgba(0, 0, 0, 0.8);
}

.form p {
  color: var(--texto_formulario);
  font-weight: bold;
}

.form * {
  box-sizing: border-box;
}

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

.form li {
  display: flex;
  margin: 0;
  padding: 0;
}

.form li > * {
  margin-bottom: calc(var(--remdef) * 0.25);
  margin-right: 0;
}

/* outer */
.form li > .group {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  height: calc(var(--remdef) * 3);
  padding: 0 calc(var(--remdef) / 2) 0 calc(var(--remdef) / 2);
  background-color: white;
  border: 1px solid lightgray;
  border-top-right-radius: calc(var(--radio) / 2);
  border-bottom-right-radius: calc(var(--radio) / 2);
}

/* inner */
.group > span {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  margin-top: calc(var(--remdef) * 0.75);
  height: calc(var(--remdef) * 1.2);
  overflow-y: hidden;
  background-color: transparent;
}

/* items */
.group > span > label {
  font-size: var(--fsize-compontents);
  display: flex;
  flex-grow: 0.33;
  padding: 0;
  margin: 0;
  text-align: left;
  background-color: transparent;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.9);
}

.group > span > label > input {
  padding: 0;
  margin: 0;
}

/* -----------------------*/
/*   Social Share   */
/* -----------------------*/

div.share {
  box-sizing: border-box;
  position: relative;
  float: left;
  display: block;
  clear: both;
  width: 100%;
}

div.share a {
  box-sizing: border-box;
  position: relative;
  display: inline-block;
  clear: none;
  text-align: center !important;
  vertical-align: middle !important;
  width: calc(var(--remdef) * 2);
  height: calc(var(--remdef) * 2);
  margin-left: var(--gutter-subcomponents);
  border-radius: calc(var(--remdef) * 3 * var(--fsize-compontents));
  overflow: hidden !important;
}

div.share a.wa {
  background-color: #00bb2d;
}

div.share a.fb {
  background-color: #3b5998;
}

div.share a.tw {
  background-color: #00acee;
}

div.share a.pt {
  background-color: #c8232c;
}

div.share a.insta {
  background-color: #3f729b;
}

div.share .icon {
  font-size: var(--fsize-compontents);
  text-align: center !important;
  color: var(--texto_claro);
}

div.share .icon svg {
  overflow: hidden !important;
}
/* -----------------------*/
/*   Various   */
/* -----------------------*/

/*relevant*/
span.rlvt {
  display: block;
  clear: both;
  font-size: 110%;
}

span.rlvt:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

pre {
  box-sizing: border-box;
  float: left;
  display: block;
  clear: both;
  margin: 0 calc(var(--gutter-components) * 2) var(--remdef) 0 !important;
  padding: calc(var(--gutter-components) * 2) !important;
  font-size: 110%;
  font-style: italic;
  white-space: normal;
  border-radius: 0px !important;
  border-left: var(--gutter-components) solid var(--realce) !important;
}

pre::before {
  content: open-quote;
}

pre::after {
  content: close-quote;
}

blockquote {
  box-sizing: border-box;
  float: left;
  display: block;
  clear: both;
  width: 100%;
  /* 1rem useragent p padding-bottom */
  margin: 0 0 var(--remdef) 0;
  padding: var(--gutter);
  font-size: 110%;
  font-style: italic;
  text-align: center;
  white-space: normal;
  background-color: var(--oscuro_a);
  color: var(--texto_claro);
  border-radius: var(--radio_i);
}

blockquote::before {
  content: '"';
}

blockquote::after {
  content: '"';
}

@media (max-width: 1200px) {
  :root {
    --remdef: 19px; /* 18 */
    --gutter: 0.625rem;
    --no-gutter: -0.625rem;
    --gutter-components: 0.5rem;
    --gutter-subcomponents: 0.5rem;

    --fsize-menu: 110%;
    --fsize-compontents: 90%;

    --radio: 0.675rem;

    /*padding top de la hoja completa*/
    --navjust: calc( var(--remdef) * 2.5);
  }

  .header {
    display: none;
  }

  /*Navbar fijao*/
  .topnav {
    position: fixed;
    z-index: 2;
    left: 0;
    top: 0;
    width: 100%;
    background-color: var(--oscuro_a);
    -webkit-box-shadow: 0px 2px 2px -1px rgba(51, 51, 51, 1);
    -moz-box-shadow: 0px 2px 2px -1px rgba(51, 51, 51, 1);
    box-shadow: 0px 2px 2px -1px rgba(51, 51, 51, 1);
  }

  /* este afecta a a.logo */
  .topnav a:not(:first-child) {
    display: none;
  }

  .topnav a.navlogo {
    float: left;
    display: block;
    text-align: center;
    text-decoration: none;
  }

  .topnav a.logo:hover {
    background-color: inherit;
  }

  .topnav a.burger {
    display: block;
  }

  .topnav.responsive {
    background-color: var(--oscuro);
    background-image: linear-gradient(var(--oscuro_a), var(--medio_a));
    transition: all 0.2s, ease-in 0.8s;
  }

  .topnav.responsive a.burger {
    position: absolute;
    right: 0;
    top: 0;
  }

  .topnav.responsive a,
  .topnav.responsive a.uids {
    float: none;
    display: block !important;
    text-align: center;
  }

  .topnav a.uids.hidden {
    display:none !important;
  }

  .topnav a.uids li {
      font-size: 0.5rem;
  }



@media (orientation: portrait) {
    span.wasap {
        bottom: 10vh;
    }

    span.totop {
        bottom: 3vh;
    }

  }

@media (orientation: landscape) {
    span.wasap {
        bottom: 22vh;
    }

    span.totop {
        bottom: 6vh;
    }


  }


 /*     span.wasap {
    position: fixed;
    bottom: calc ( var(--gutter)*9 );
    right: var(--gutter);
    width: 42px;
    height: 42px;
    line-height: 42px;
  }

  span.wasap:hover {
    line-height: 42px;
  }



  span.totop {
    position: fixed;
    bottom: var(--gutter);
    right: var(--gutter);
    width: 36px;
    height: 36px;
    line-height: 36px;
  }

  span.totop:hover {
    line-height: 24px;
  }

*/

  pre {
    font-size: 100% !important;
    padding: var(--gutter) !important;
    margin-left: var(--gutter) !important;
  }

  blockquote {
    font-size: 100% !important;
  }

  div.hero {
    display: block;
    clear: both;
    max-height: calc(100vw * 0.274) !important;
    min-height: calc(100vw * 0.274) !important;
    width: 100%;
  }

  div.hero .hero_img {
    min-height: calc(100vw * 0.274) !important;
    max-height: calc(100vw * 0.274) !important;
    width: 100%;
  }

  /* deberia ser *2 pero uso 1.7 para que entre 
    en imagen chaparra y gorda*/

  div.hero .hero_title {
    font-size: calc(var(--remdef) * 1.7) !important;
  }

  /* Jumbotron 

    div.jumbo {
        height: calc(100vw * .274) !important;  
        width: auto;
    }

    div.jumbo .jumbo_img {
        height: calc(100vw * .274) !important;       
        width: auto;
    }

    */

  .xroll .xr_item {
    width: calc(50% - 13px - var(--gutter-subcomponents));
  }
}

/* Móvil vertical, fluido */
@media (max-width: 900px) {
  :root {
    --remdef: 18px;
  }

/* stack all cols NOT .al always vertical */
  .row > .col:not(.av) {
    display: block;
    float: left;
    clear: both !important;
    margin: 0;
    width: 100% !important;
  }

  .col span.pfl > img {
    max-width: 48% !important;
  }

  .col span.pfr > img {
    max-width: 48% !important;
  }

  /* gutters en responsive fluido*/
  .rgt {
    margin: var(--no-gutter) !important;
  }

  .agt {
    padding: var(--gutter) !important;
  }

  .fgth > h1:first-of-type,
  .fgth > h2:first-of-type,
  .fgth > h3:first-of-type,
  .fgth > p:first-of-type {
    padding-top: 0 !important;
    margin-top: var(--gutter) !important;
  }
}

@media (max-width: 600px) {
  :root {
    --remdef: 18px; /*16*/
    --gutter: 0.5rem;
    --gutter-components: 0.5rem;
    --gutter-subcomponents: 0.25rem;
    --no-gutter: -0.5rem;

    --fsize-menu: 110%;
    --fsize-compontents: 100%;

    --radio: 1rem;
  }

  .topnav a.burger {
    padding: 0 0 !important; */
  }

  .topnav a::after {
      content: "";
  }

  /*

  span.wasap {
    position: fixed;
    bottom: calc( var(--gutter-components)*9 );
    right: var(--gutter-components);
    width: 32px;
    height: 32px;
    line-height: 32px;
  }

  span.wasap:hover {
    line-height: 18px;
  }



  span.totop {
    position: fixed;
    bottom: var(--gutter-components);
    right: var(--gutter-components);
    width: 32px;
    height: 32px;
    line-height: 32px;
  }

  span.totop:hover {
    line-height: 18px;
  }

  */

  pre {
    font-size: var(--fsize-compontents);
    padding: var(--gutter) !important;
    margin-left: var(--gutter) !important;
  }

  div.hero {
    position: relative;
    display: block;
    float: left;
    clear: both !important;
    width: 100%;
    min-height: unset !important;
    max-height: unset !important;
    height: auto !important;
  }

  div.hero div.hero_img {
    position: relative;
    display: block;
    clear: both;
    margin-top: 1rem;
    width: 100%;
    height: calc(100vw * 0.32);
    max-height: 350px !important;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
  }

  div.hero div.hero_filter {
    display: none;
  }

  div.hero .hero_title {
    position: relative;
    display: block;
    clear: both;
    transform: none !important;
    margin: initial;
    padding: 1rem 0.5rem 0 0.5rem;
    left: initial;
    top: initial;
    line-height: initial;
    text-align: center;
    white-space: pre-wrap;
    color: var(--oscuro);
    z-index: 1;
  }

  /*Rejillas*/

  /* xroller */

  .xroll .xr_item {
    /*position: relative;*/
    width: calc(100% - 25px - var(--gutter-subcomponents));
  }

}

@media (max-width: 480px) {
   :root {
    --remdef: 18px;
  }
}

@media (max-width: 320px) {
    :root {
      --remdef: 18px; /*14 y 13*/
      --font-small: 16px;
    }
}

.footer {
  box-sizing: border-box;
  display: block;
  clear: both;
  background-color: var(--oscuro);
  width: 100%;
  min-height: 8rem;
  right: 0;
  bottom: 0;
}

.footer * {
  color: var(--texto_claro);
}