/* 28 SETIEMBRE 2025 */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
.serif, .roboto-serif {
  font-family: "Roboto Serif", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings:
    "wdth" 100,
    "GRAD" 0;
}
.san-serif, .roboto {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}
:root {
  --font-serif: "Roboto Serif";
  --font-san-serif: "Roboto";
  --font-size-4xlarge       : calc(3.0rem + (20 - 10) * ((100vw - 0px) / (1800 - 600))) ;
  --font-size-3xlarge       : calc(1.6rem + (20 - 10) * ((100vw - 0px) / (1800 - 600))) ;
  --font-size-2xlarge       : calc(1.5rem + (20 - 11) * ((100vw - 0px) / (1800 - 600))) ;
  --font-size-xlarge        : calc(1.4rem + (20 - 16) * ((100vw - 0px) / (1800 - 300))) ;
  --font-size-large         : calc(1.3rem + (20 - 16) * ((100vw - 0px) / (1800 - 300))) ;
  --font-size-medium        : calc(1.2rem + (17 - 16) * ((100vw - 0px) / (1800 - 300))) ;
  --font-size-small         : calc(1.1rem + (17 - 16) * ((100vw - 0px) / (1800 - 300))) ;
  --font-size-xsmall        : calc(1.1rem + (18 - 16) * ((100vw - 0px) / (1800 - 300))) ;
  --font-size-2xsmall       : calc(1.0rem + (19 - 16) * ((100vw - 0px) / (1800 - 300))) ;
  --font-size-3xsmall       : calc(0.9rem + (19 - 16) * ((100vw - 0px) / (1800 - 300))) ;
  --font-size-4xsmall       : calc(0.8rem + (19 - 16) * ((100vw - 0px) / (1800 - 300))) ;
  --lineheight-4xlarge      : calc(4.6rem + (9 - 1) * ((100vw - 300px) / (1600 - 300))) ;
  --lineheight-3xlarge      : calc(2.5rem + (9 - 1) * ((100vw - 300px) / (1600 - 300))) ;
  --lineheight-2xlarge      : calc(2.4rem + (9 - 1) * ((100vw - 300px) / (1600 - 300))) ;
  --lineheight-xlarge       : calc(2.3rem + (8 - 1) * ((100vw - 300px) / (1600 - 300))) ;
  --lineheight-large        : calc(2.1rem + (7 - 1) * ((100vw - 300px) / (1600 - 300))) ;
  --lineheight-medium       : calc(1.9rem + (2 - 1) * ((100vw - 300px) / (1600 - 300))) ;
  --lineheight-small        : calc(1.7rem + (2 - 1) * ((100vw - 300px) / (1600 - 300))) ;
  --lineheight-xsmall       : calc(1.5rem + (2 - 1) * ((100vw - 300px) / (1600 - 300))) ;
  --lineheight-2xsmall      : calc(1.4rem + (2 - 1) * ((100vw - 300px) / (1600 - 300))) ;
  --lineheight-3xsmall      : calc(1.2rem + (2 - 1) * ((100vw - 300px) / (1600 - 300))) ;
  --lineheight-4xsmall      : calc(1.1rem + (2 - 1) * ((100vw - 300px) / (1600 - 300))) ;
  --margenes-xxxlarge       : calc(2.5% + 20px) ;
  --margenes-xxlarge        : calc(2.5% + 20px) ;
  --margenes-xlarge         : calc(1.8% + 18px) ;
  --margenes-large          : calc(1.6% + 14px) ;
  --margenes-medium         : calc(1.5% + 10px) ;
  --margenes-small          : calc(0.8% + 10px) ;
  --margenes-xsmall         : calc(0.5% + 08px) ;
  --margenes-xxsmall        : calc(0.1% + 04px) ;
  --margenes-xxxsmall       : calc(0.1% + 04px) ;
  --border-radius-xxxlarge  : calc(0.6% + 28px) ;
  --border-radius-xxlarge   : calc(0.6% + 28px) ;
  --border-radius-xlarge    : calc(0.5% + 28px) ;
  --border-radius-large     : calc(0.4% + 24px) ;
  --border-radius-medium    : calc(0.3% + 24px) ;
  --border-radius-small     : calc(0.2% + 24px) ;
  --border-radius-xsmall    : calc(0.1% + 08px) ;
  --border-radius-xxsmall   : calc(0.1% + 04px) ;
  --border-radius-xxxsmall  : calc(0.1% + 04px) ;
  --col-blanco    : #ffffff ;
  --col-gris05    : #f7f7f7 ;
  --col-gris10    : #e7e7e7 ;
  --col-gris20    : #cfd0d0 ;
  --col-gris30    : #b7b8b9 ;
  --col-gris40    : #9fa1a2 ;
  --col-gris50    : #87898b ;
  --col-gris60    : #6f7274 ;
  --col-gris70    : #575a5d ;
  --col-gris80    : #3e4246 ;
  --col-gris90    : #262b2f ;
  --col-negro     : #000000 ;
  --col-fuente    : #212529 ;
  --col-magenta   : #ff4077 ;
  --col-fucsia    : #da2e58 ;
  --col-rojo      : #981e22 ;
  --col-marron    : #6b3b2a ;
  --col-pardo     : #8b5e3c ;
  --col-greige    : #aa9280 ;
  --col-crema     : #f3ede6 ;
  --col-pino      : #1c381a ;
  --col-salvia    : #6f7467 ;
  --col-naranja   : #ff812e ;
  --col-anaranjado: #ffb422 ;
  --col-mostaza   : #f5e6a1 ;
  --col-limon     : #91f369 ;
  --col-manzana   : #74b52e ;
  --col-verde     : #00a651 ;
  --col-esmeralda : #029274 ;
  --col-turquesa  : #31d4c5 ;
  --col-celeste   : #54bcf6 ;
  --col-cielo     : #087cbf ;
  --col-azul      : #064878 ;
  --col-indigo    : #3f3f7f ;
  --col-purpura   : #a142b3 ;
  --col-violeta   : #7445be ;
  --col-humo      : #e7ebee ;
  --col-plateado  : #d1d8e0 ;
  --col-aluminio  : #a5b2c2 ;
  --col-acero     : #788ca3 ;
  --col-metal     : #4a6585 ;
  --col-azulado   : #2f475e ;
  --col-noche     : #1a2630 ;
  --col-oscuro    : #262b2f ;
  --col-grisoscuro: #404449 ;
  --col-grismedio : #5c6368 ;
  --col-grisclaro : #93989e ;
  --col-gristenue : #fdfdfd ;

  --trans-10      : #00000010 ;
  --trans-20      : #00000020 ;
  --trans-30      : #00000030 ;
  --trans-40      : #00000040 ;
  --trans-50      : #00000050 ;
  --trans-60      : #00000060 ;
  --trans-70      : #00000070 ;
  --trans-80      : #00000080 ;
  --trans-90      : #00000090 ;
  --svg-gris05: invert(96%) saturate(0%);
  --svg-gris10: invert(91%) saturate(0%);
  --svg-gris20: invert(81%) saturate(0%);
  --svg-gris30: invert(72%) saturate(0%);
  --svg-gris40: invert(63%) saturate(0%);
  --svg-gris50: invert(54%) saturate(0%);
  --svg-gris60: invert(42%) saturate(0%);
  --svg-gris70: invert(35%) saturate(0%);
  --svg-gris80: invert(26%) saturate(0%);
  --svg-gris90: invert(17%) saturate(0%);
  --svg-blanco : invert(1) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(200%) contrast(102%) ;
  --svg-magenta: invert(13%) sepia(100%) saturate(440%) hue-rotate(650deg) brightness(280%) contrast(100%);
  --svg-fucsia: invert(10%) sepia(100%) saturate(500%) hue-rotate(660deg) brightness(300%) contrast(100%);
  --svg-rojo: invert(9%) sepia(125%) saturate(920%) hue-rotate(329deg) brightness(291%) contrast(112%);
  --svg-marron: invert(7%) sepia(118%) saturate(430%) hue-rotate(326deg) brightness(300%) contrast(62%);
  --svg-naranja: invert(16%) sepia(100%) saturate(500%) hue-rotate(340deg) brightness(300%) contrast(100%);
  --svg-anaranjado: invert(22%) sepia(100%) saturate(500%) hue-rotate(350deg) brightness(300%) contrast(100%);
  --svg-mostaza: invert(23%) sepia(100%) saturate(500%) hue-rotate(370deg) brightness(300%) contrast(100%);
  --svg-limon: invert(22%) sepia(142%) saturate(315%) hue-rotate(406deg) brightness(329%) contrast(86%);
  --svg-manzana: invert(16%) sepia(102%) saturate(634%) hue-rotate(401deg) brightness(284%) contrast(110%);
  --svg-verde: invert(14%) sepia(94%) saturate(207%) hue-rotate(428deg) brightness(308%) contrast(154%);
  --svg-esmeralda: invert(12%) sepia(100%) saturate(205%) hue-rotate(474deg) brightness(315%) contrast(160%);
  --svg-turquesa: invert(17%) sepia(96%) saturate(204%) hue-rotate(484deg) brightness(301%) contrast(160%);
  --svg-celeste: invert(16%) sepia(100%) saturate(200%) hue-rotate(520deg) brightness(310%) contrast(160%);
  --svg-cielo: invert(12%) sepia(100%) saturate(201%) hue-rotate(514deg) brightness(312%) contrast(177%);
  --svg-azul: invert(8%) sepia(100%) saturate(463%) hue-rotate(524deg) brightness(251%) contrast(99%);
  --svg-indigo: invert(15%) sepia(54%) saturate(274%) hue-rotate(555deg) brightness(222%) contrast(182%);
  --svg-purpura: invert(16%) sepia(70%) saturate(307%) hue-rotate(244deg) brightness(232%) contrast(166%);
  --svg-violeta: invert(17%) sepia(78%) saturate(275%) hue-rotate(217deg) brightness(212%) contrast(180%);
  --svg-humo: invert(11%) sepia(510%) saturate(11%) hue-rotate(535deg) brightness(635%) contrast(118%);
  --svg-plateado: invert(11%) sepia(510%) saturate(24%) hue-rotate(535deg) brightness(609%) contrast(103%);
  --svg-aluminio: invert(11%) sepia(515%) saturate(55%) hue-rotate(535deg) brightness(555%) contrast(78%);
  --svg-acero: invert(10%) sepia(556%) saturate(89%) hue-rotate(535deg) brightness(447%) contrast(105%);
  --svg-metal: invert(8%) sepia(536%) saturate(113%) hue-rotate(532deg) brightness(423%) contrast(130%);
  --svg-azulado: invert(8%) sepia(458%) saturate(90%) hue-rotate(527deg) brightness(373%) contrast(168%);
  --svg-noche: invert(8%) sepia(437%) saturate(35%) hue-rotate(522deg) brightness(347%) contrast(223%);
  --svg-oscuro: invert(7%) sepia(495%) saturate(29%) hue-rotate(538deg) brightness(335%) contrast(153%);
  --svg-fuente : invert(7%) sepia(100%) saturate(100%) hue-rotate(100deg) brightness(100%) contrast(103%) ;
  --svg-grisoscuro : invert(7%) sepia(154%) saturate(159%) hue-rotate(182deg) brightness(128%) contrast(61%);
  --svg-grismedio : invert(14%) sepia(72%) saturate(154%) hue-rotate(159deg) brightness(116%) contrast(37%);
  --svg-grisclaro : invert(46%) sepia(76%) saturate(108%) hue-rotate(161deg) brightness(201%) contrast(20%) ;
  --svg-gristenue : invert(52%) sepia(92%) saturate(99%) hue-rotate(146deg) brightness(203%) contrast(88%) ;
  }
* { 
  box-sizing: border-box; 
  padding: 0; 
  margin: 0; 
  padding: 0;
  }
html{
  color:var(--col-fuente);
  }
body {
  font-family: var(--font-serif);
  font-size: var(--font-size-small);
  }
main{
  margin: var(--margenes-medium) 0;
  }
button {
  padding: 5px 10px;
  margin-bottom: 20px;
  }
h1 { 
  font-size: var(--font-size-4xlarge);
  line-height: var(--lineheight-4xlarge);
  font-family: var( --font-serif);
  margin-bottom: var(--margenes-xlarge);
  font-weight: 500;
  display: block;
  }
h2 { 
  font-size: var(--font-size-3xlarge)!important;
  line-height: var(--lineheight-3xlarge)!important;
  font-family: var( --font-serif);
  margin-bottom: var(--margenes-xlarge);
  font-weight: 500;
  display: block;
  }
h3 { 
  font-size: var(--font-size-2xlarge)!important;
  line-height: var(--lineheight-2xlarge)!important;
  font-family: var( --font-serif);
  margin-bottom: var(--margenes-xlarge);
  font-weight: 500;
  display: block;
  }
h4 { 
  font-size: var(--font-size-xlarge)!important;
  line-height: var(--lineheight-medium)!important;
  margin-bottom: var(--margenes-xlarge);
  font-weight: 400;
  display: block;
  }
h5 { 
  font-size: var(--font-size-large)!important;
  line-height: var(--lineheight-large)!important;
  margin-bottom: var(--margenes-xlarge);
  font-weight: 500;
  display: block;
  }
h6 { 
  font-size: var(--font-size-medium)!important;
  line-height: var(--lineheight-small)!important;
  margin-bottom: var(--margenes-xlarge);
  font-weight: 500;
  display: block;
  }
strong {
  font-size: var(--font-size-xlarge)!important;
  line-height: var(--lineheight-small)!important;
  margin-top: var(--margenes-xxxlarge);
  margin-bottom: var(--margenes-large);
  font-weight: 500;
  display: block;
  }
p {
  font-size: var(--font-size-xsmall)!important;
  line-height: var(--lineheight-medium)!important;
  margin-bottom: var(--margenes-xlarge);
  font-weight: 400;
  display: block;
  }
em {
  font-size: var(--font-size-2xsmall)!important;
  line-height: var(--lineheight-2xsmall)!important;
  margin-bottom: var(--margenes-xlarge);
  font-weight: 500;
  display: block;
  font-style: normal!important;
  }
del {
  font-size: var(--font-size-3xsmall)!important;
  line-height: var(--lineheight-3xsmall)!important;
  margin-bottom: var(--margenes-xlarge);
  font-weight: 500;
  display: block;
  font-style: normal!important;
  text-decoration: none!important;
  }
small {
  font-size: var(--font-size-4xsmall)!important;
  line-height: var(--lineheight-2xsmall)!important;
  margin-bottom: var(--margenes-xlarge);
  color:var(--col-gris60);
  display: block;
  }
span {
  font-size: var(--font-size-2xsmall);
  margin: var(--margenes-xxsmall) 0;
  display: block;
  }
span p {
  font-size: var(--font-size-2xsmall);
  }

i{
  font-family: var(--font-serif);
}
sub {
  line-height: 140%;
  display: block;
}
figure {
  margin: var(--margenes-xlarge) 0;
  display: block;
}
figure figcaption {
  font-size: var(--font-size-4xsmall);
  margin-top: var(--margenes-small);
  margin-bottom: var(--margenes-xlarge);
  color:var(--col-gris60)
}
mark {
  background: #ffc60054;
  padding: 0 6px;
  border-radius: 3px;
  display: inline-block;
}
span {
  display: block;
}
b{
  font-weight: 600;
}
hr {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--col-black);
}
ul{
  list-style: none ;
}
a {
  color: var(--col-rojo);
  text-decoration: none;
  }
a:hover {
  color: var(--col-rojo);
  text-decoration: underline;
  }
a:link {
  color: var(--col-rojo);
  }
a:active {
  color: var(--col-rojo);
  }
/* a:visited {
  color: var(--col-fuente);
  }
a:focus {
  color:var(--col-fuente);
  } */
img {
  width: 100%;
  display: block;
  }
  h1.titularmarco{
        background: var(--col-rojo);
    color: var(--col-blanco);
    margin-bottom: 30px !important;
    display: inline-block;
    padding: 20px 30px;
    border-radius: 5px;
  }
.container {
  width: 100%;
  max-width: 1200px;
  margin: auto;
  }
  /* //////////////////// DEGRADE //////////////////// */
.degradeblack {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: #030000;
  background: -webkit-linear-gradient(0deg, rgba(3, 0, 0, 0.71) 10%, rgba(3, 0, 0, 0.18) 40%, rgba(3, 0, 0, 0) 70%, rgba(8, 0, 0, 0) 100%);
  background: -moz-linear-gradient(0deg, rgba(3, 0, 0, 0.71) 10%, rgba(3, 0, 0, 0.18) 40%, rgba(3, 0, 0, 0) 70%, rgba(8, 0, 0, 0) 100%);
  background: linear-gradient(0deg, rgba(3, 0, 0, 0.71) 10%, rgba(3, 0, 0, 0.18) 40%, rgba(3, 0, 0, 0) 70%, rgba(8, 0, 0, 0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#030000", endColorstr="#080000", GradientType=0);
  }
  .degradeblancobottom{
    padding: var(--margenes-xxlarge);
    border-radius: var(--border-radius-xsmall);
    background: #ffffff;
    background: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
    background: -moz-linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FFFFFF", endColorstr="#FFFFFF", GradientType=0);
  }
  .degradeblancotop{
    padding: var(--margenes-xxlarge);
    border-radius: var(--border-radius-xsmall);
    background: #ffffff;
    background: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 25%,rgba(255, 255, 255, 1) 75%, rgba(255, 255, 255, 0) 100%);
    background: -moz-linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 25%,rgba(255, 255, 255, 1) 75%, rgba(255, 255, 255, 0) 100%);
    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 25%,rgba(255, 255, 255, 1) 75%, rgba(255, 255, 255, 0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FFFFFF", endColorstr="#FFFFFF", GradientType=0);
  }
  .degrademarronbottom{
    position: absolute;
    bottom: 0;
    height: 100%;
    width: 100%;
    z-index: 3;
    background: #6B3B2A;
    background: -webkit-linear-gradient(0deg, rgba(107, 59, 42, 1) 0%, rgba(107, 59, 42, 0) 68%);
    background: -moz-linear-gradient(0deg, rgba(107, 59, 42, 1) 0%, rgba(107, 59, 42, 0) 68%);
    background: linear-gradient(0deg, rgba(107, 59, 42, 1) 0%, rgba(107, 59, 42, 0) 68%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#6B3B2A", endColorstr="#6B3B2A", GradientType=0);
    }
    .degradewhitetop{
      position: absolute;
      bottom: 0;
      height: 100%;
      width: 100%;
      z-index: 3;
      background: #ffffff;
      background: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 1) 5%, rgba(255, 255, 255, 1) 10%, rgba(255, 255, 255, 0) 70%);
      background: -moz-linear-gradient(180deg, rgba(255, 255, 255, 1) 5%, rgba(255, 255, 255, 1) 10%, rgba(255, 255, 255, 0) 70%);
      background: linear-gradient(180deg, rgba(255, 255, 255, 1) 5%, rgba(255, 255, 255, 1) 10%, rgba(255, 255, 255, 0) 70%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FFFFFF", endColorstr="#FFFFFF", GradientType=0);
      }
.widthfull { width: 100%}
.heightfull { height: 100%}
.fullwidth { width: 100%}
.widthauto { width: auto; }
.widthinherit { width: inherit; }
.heightauto { height: auto; }
.heightinherit { height: inherit; }
.top { top: 0; }
.bottom { bottom: 0; }
.left { left: 0; }
.right {right: 0; }
.text-left{ text-align: left;}
.text-right{ text-align: right;}
.block { display: block; }
.inline { display: inline; }
.inlineblock { display: inline-block; }
.displaynone { display: none; }
.displayinherit { display: inherit; }
.absolute { position: absolute; }
.relative { position: relative; }
.fixed { position: fixed; }
.inherit { position: inherit; }
.zindex1 { z-index: 1; }
.zindex-1 { z-index: -1; }
.overflowhidden { overflow: hidden; }
.boxsizing { box-sizing: border-box; }
.border1 { border: 1px solid rgb(0 0 0 / 27%); }
.no-border { border: none ; }
.no-borderadius { border-radius: 0; }
.no-lh {line-height: inherit ; }
.no-padding {padding: 0; }
.no-paddingtop {padding-top: 0; }
.no-paddingbottom {padding-bottom: 0; }
.no-paddingleft {padding-left: 0; }
.no-paddingright {padding-right: 0; }
.no-margin {margin: 0; }
.no-margintop {margin-top: 0; }
.no-marginbottom {margin-bottom: 0; }
.no-marginleft {margin-left: 0; }
.no-marginright {margin-right: 0; }
.marginauto {margin: auto; }
.borderwhite { border: solid 1px #ffffff; }
.whitefondo {background: var(--col-white)}
.none { display:none; }
.flex { display: flex; }
.blacks { filter: var(--svg-black) }
.no-borderbottom { border-bottom: none !important;}
.gris5 { background: var(--col-005) }
.grilla { display: flex; flex-direction: row; flex-wrap: wrap; }
.bordertop { border-top: 1px solid var(--col-020); }
.borderleft { border-left: 1px solid var(--col-020); }
.borderright { border-right: 1px solid var(--col-020); }
.borderbottom { border-bottom: 1px solid var(--col-020); }
.center { text-align: center;}
.centrado { display: flex; justify-content: space-evenly; align-items: center; }
.centrado-v { display: flex;flex-direction: column;align-items: center; }
.centrado2 { display: flex; justify-content: center; }
.centrado3 { display: flex; justify-content: center; align-items: center;align-content: center; }
.centradoleft { display: flex; justify-content: flex-start; align-items: center; }
.centradohorizontal { display: flex !important; align-content: center !important; align-items: center !important; }
/* ///////////////// CONTENEDORES ///////////////// */
.container-full     { max-width: 100% !important; width: 100% !important; margin: auto; display: block; }
.container-xxlarge  { max-width: 1920px !important; width: 99% !important; margin: auto; display: block; }
.container-xlarge   { max-width: 1600px !important; width: 99% !important; margin: auto; display: block; }
.container-large    { max-width: 1440px !important; width: 93% !important; margin: auto; display: block; }
.container-medium   { max-width: 1366px !important; width: 99% !important; margin: auto; display: block; }
.container-small    { max-width: 1024px !important; width: 95% !important; margin: auto; display: block; }
.container-xsmall   { max-width: 800px !important; width: 95% !important; margin: auto; display: block; }
.container-xxsmall  { max-width: 603px !important; width: 95% !important; margin: auto; display: block; }
/* ///////////////// GRID ///////////////// */
.grid{
  display:grid;
  grid-auto-rows:auto;
  row-gap: 10px;
  column-gap: 10px;
  grid-auto-flow: dense;
  list-style: none ;
  margin: 0 10px;
  }
.grid span{
  width:100%;
  height:100%;
  position:relative;
  text-align: center;
  padding-bottom: 60px;
  }
.grid span figure{
  width:100%;
  height:100%;
  overflow:hidden;
  margin: 0;
  padding: 0;
  border: 0;
  }
.grid span figure img{
  width:100%;
  height:100%;
  object-fit: cover;
  object-position:50% 50%;
  /* cursor:pointer;
  transition:1s ease-in-out; */
  }
.grid span.no-cover  {
height: auto;
}
.gap {
  row-gap: 0;
    column-gap: 80px;
}
  /* 
.grid span:hover figure img{
  transform:scale(1.1);
  }
.grid span .text{
  display: inline-block;
  opacity:0;
  position:absolute;
  top:50%;
  transform:translate(-50%,-50%);
  color:#fff;
  font-size:25px;
  pointer-events:none;
  z-index:4;
  transition: .3s ease-in-out;
  -webkit-backdrop-filter: blur(5px) saturate(1.8);
  backdrop-filter: blur(5px) saturate(1.8);
  } 
.grid span:hover .text{
  opacity:1;
  animation: move-down .3s linear;
  padding:1em;
  }*/
  .grid span .text{
    margin-top: var(--margenes-xsmall);
    margin-bottom: var(--margenes-xsmall);
    color: var(--col-acero);
    } 
.columnas02{ grid-template-columns: repeat(2,1fr); }
.columnas03{ grid-template-columns: repeat(3,1fr); }
.columnas04{ grid-template-columns: repeat(4,1fr); }
.columnas05{ grid-template-columns: repeat(5,1fr); }
.columnas06{ grid-template-columns: repeat(6,1fr); }
.columnas07{ grid-template-columns: repeat(7,1fr); }
.columnas08{ grid-template-columns: repeat(8,1fr); }
.columnas09{ grid-template-columns: repeat(9,1fr); }
.columnas10{ grid-template-columns: repeat(10,1fr); }
.columnas11{ grid-template-columns: repeat(11,1fr); }
.columnas12{ grid-template-columns: repeat(12,1fr); }
.w-001{ grid-column: span 1; }
.w-002{ grid-column: span 2; }
.w-003{ grid-column: span 3; }
.w-004{ grid-column: span 4; }
.w-005{ grid-column: span 5; }
.w-006{ grid-column: span 6; }
.w-007{ grid-column: span 7; }
.w-008{ grid-column: span 8; }
.w-009{ grid-column: span 9; }
.w-010{ grid-column: span 10; }
.w-011{ grid-column: span 11; }
.w-012{ grid-column: span 12; }
.h-01{ grid-row: span 1; }
.h-02{ grid-row: span 2; }
.h-03{ grid-row: span 3; }
.h-04{ grid-row: span 4; }
.h-05{ grid-row: span 5; }
.h-06{ grid-row: span 6; }
.h-07{ grid-row: span 7; }
.h-08{ grid-row: span 8; }
.h-09{ grid-row: span 9; }
.h-10{ grid-row: span 10; }
.h-11{ grid-row: span 11; }
.h-12{ grid-row: span 12; }
@media screen and (max-width:900px){
  .columnas02,.columnas03,.columnas04,.columnas05,.columnas06,
  .columnas07,.columnas08,.columnas09,.columnas10,.columnas11,.columnas12{
    grid-template-columns: repeat(4,1fr);
    }
  .w-001,.w-002,.w-003,.w-004,.w-005,.w-006,.w-007,.w-008,.w-009,.w-010,.w-011,.w-012{
    grid-column:span 2;
    }
  }
@media screen and (max-width:600px){
  .columnas02,.columnas03,.columnas04,.columnas05,.columnas06,
  .columnas07,.columnas08,.columnas09,.columnas10,.columnas11,.columnas12{
    grid-template-columns: repeat(1,1fr);
    }
  .w-001,.w-002,.w-003,.w-004,.w-005,.w-006,.w-007,.w-008,.w-009,.w-010,.w-011,.w-012{
    grid-column:span 1;
    }
  }
@keyframes move-down{
  0%{ top:10%; }
  50%{ top:35%; }
  100%{ top:50%; }
}
/* ///////////////// COLORES ///////////////// */
.blanco { background: var(--col-blanco)}
.gris05 { background: var(--col-gris05)}
.gris10 { background: var(--col-gris10)}
.gris20 { background: var(--col-gris20)}
.gris30 { background: var(--col-gris30)}
.gris40 { background: var(--col-gris40)}
.gris50 { background: var(--col-gris50)}
.gris60 { background: var(--col-gris60)}
.gris70 { background: var(--col-gris70)}
.gris80 { background: var(--col-gris80)}
.gris90 { background: var(--col-gris90)}
.negro { background: var(--col-negro)}
.fuente { background: var(--col-fuente )}
.magenta { background: var(--col-magenta )}
.fucsia { background: var(--col-fucsia)}
.rojo { background: var(--col-rojo)}
.marro { background: var(--col-marronn )}
.pardo { background: var(--col-pardo)}
.greige { background: var(--col-greige )}
.crema { background: var(--col-crema)}
.pino { background: var(--col-pino)}
.salvia { background: var(--col-salvia)}
.naranja { background: var(--col-naranja )}
.anaranjado { background: var(--col-anaranjado)}
.mostaza { background: var(--col-mostaza)}
.limon { background: var(--col-limon)}
.manzan { background: var(--col-manzanaa )}
.verde { background: var(--col-verde)}
.esmeralda { background: var(--col-esmeralda)}
.turquesa { background: var(--col-turquesa)}
.celeste { background: var(--col-celeste)}
.cielo { background: var(--col-cielo)}
.azul { background: var(--col-azul)}
.indigo { background: var(--col-indigo)}
.purpura { background: var(--col-purpura )}
.violeta { background: var(--col-violeta)}
.humo { background: var(--col-humo)}
.plateado { background: var(--col-plateado)}
.aluminio { background: var(--col-aluminio)}
.acero { background: var(--col-acero)}
.metal { background: var(--col-metal)}
.azulado { background: var(--col-azulado)}
.noche { background: var(--col-noche)}
.oscuro { background: var(--col-oscuro )}
.grisoscuro { background: var(--col-grisoscuro)}
.grismedio { background: var(--col-grismedio)}
.grisclaro { background: var(--col-grisclaro)}
.gristenue { background: var(--col-gristenue)}

.text-blanco { color: var(--col-blanco)}
.text-gris05 { color: var(--col-gris05)}
.text-gris10 { color: var(--col-gris10)}
.text-gris20 { color: var(--col-gris20)}
.text-gris30 { color: var(--col-gris30)}
.text-gris40 { color: var(--col-gris40)}
.text-gris50 { color: var(--col-gris50)}
.text-gris60 { color: var(--col-gris60)}
.text-gris70 { color: var(--col-gris70)}
.text-gris80 { color: var(--col-gris80)}
.text-gris90 { color: var(--col-gris90)}
.text-negro { color: var(--col-negro)}
.text-fuente { color: var(--col-fuente )}
.text-magenta { color: var(--col-magenta )}
.text-fucsia { color: var(--col-fucsia)}
.text-rojo { color: var(--col-rojo)}
.text-marro { color: var(--col-marronn )}
.text-pardo { color: var(--col-pardo)}
.text-greige { color: var(--col-greige )}
.text-crema { color: var(--col-crema)}
.text-pino { color: var(--col-pino)}
.text-salvia { color: var(--col-salvia)}
.text-naranja { color: var(--col-naranja )}
.text-anaranjado { color: var(--col-anaranjado)}
.text-mostaza { color: var(--col-mostaza)}
.text-limon { color: var(--col-limon)}
.text-manzan { color: var(--col-manzanaa )}
.text-verde { color: var(--col-verde)}
.text-esmeralda { color: var(--col-esmeralda)}
.text-turquesa { color: var(--col-turquesa)}
.text-celeste { color: var(--col-celeste)}
.text-cielo { color: var(--col-cielo)}
.text-azul { color: var(--col-azul)}
.text-indigo { color: var(--col-indigo)}
.text-purpura { color: var(--col-purpura )}
.text-violeta { color: var(--col-violeta)}
.text-humo { color: var(--col-humo)}
.text-plateado { color: var(--col-plateado)}
.text-aluminio { color: var(--col-aluminio)}
.text-acero { color: var(--col-acero)}
.text-metal { color: var(--col-metal)}
.text-azulado { color: var(--col-azulado)}
.text-noche { color: var(--col-noche)}
.text-oscuro { color: var(--col-oscuro)!important}
.text-grisoscuro { color: var(--col-grisoscuro)}
.text-grismedio { color: var(--col-grismedio)}
.text-grisclaro { color: var(--col-grisclaro)}
.text-gristenue { color: var(--col-gristenue)}

.svg-blanco { filter:var(--svg-blanco); }
.svg-gris05 { filter:var(--svg-gris05); }
.svg-gris10 { filter:var(--svg-gris10); }
.svg-gris20 { filter:var(--svg-gris20); }
.svg-gris30 { filter:var(--svg-gris30); }
.svg-gris40 { filter:var(--svg-gris40); }
.svg-gris50 { filter:var(--svg-gris50); }
.svg-gris60 { filter:var(--svg-gris60); }
.svg-gris70 { filter:var(--svg-gris70); }
.svg-gris80 { filter:var(--svg-gris80); }
.svg-gris90 { filter:var(--svg-gris90); }
.svg-negro { filter:var(--svg-negro); }
.svg-fuente { filter:var(--svg-fuente); }
.svg-magenta { filter: var(--svg-magenta) }
.svg-fucsia { filter: var(--svg-fucsia) }
.svg-rojo { filter: var(--svg-rojo) }
.svg-naranja { filter: var(--svg-naranja) }
.svg-anaranjado { filter: var(--svg-anaranjado) }
.svg-mostaza { filter: var(--svg-mostaza) }
.svg-limon { filter: var(--svg-limon) }
.svg-manzana { filter: var(--svg-manzana) }
.svg-verde { filter: var(--svg-verde) }
.svg-esmeralda { filter: var(--svg-esmeralda) }
.svg-turquesa { filter: var(--svg-turquesa) }
.svg-celeste { filter: var(--svg-celeste) }
.svg-cielo { filter: var(--svg-cielo) }
.svg-azul { filter: var(--svg-azul) }
.svg-indigo { filter: var(--svg-indigo) }
.svg-purpura { filter: var(--svg-purpura) }
.svg-violeta { filter: var(--svg-violeta) }
.svg-humo { filter: var(--svg-humo) }
.svg-plateado { filter: var(--svg-plateado) }
.svg-aluminio { filter: var(--svg-aluminio) }
.svg-acero { filter: var(--svg-acero) }
.svg-metal { filter: var(--svg-metal) }
.svg-azulado { filter: var(--svg-azulado) }
.svg-noche { filter: var(--svg-noche) }
.svg-oscuro { filter: var(--svg-oscuro) }
.svg-grisoscuro { filter:var(--svg-grisoscuro); }
.svg-grismedio { filter:var(--svg-grismedio); }
.svg-grisclaro { filter:var(--svg-grisclaro); }
.svg-gristenue { filter:var(--svg-gristenue); } 
/* ///////////////////////////////////// */
.fz-4xlarge { font-size: var(--font-size-4xlarge); }
.fz-3xlarge { font-size: var(--font-size-3xlarge); }
.fz-2xlarge { font-size: var(--font-size-2xlarge); }
.fz-xlarge  { font-size: var(--font-size-xlarge); }
.fz-large   { font-size: var(--font-size-large); }
.fz-medium  { font-size: var(--font-size-medium); }
.fz-small   { font-size: var(--font-size-small); }
.fz-xsmall  { font-size: var(--font-size-xsmall); }
.fz-2xsmall { font-size: var(--font-size-2xsmall); }
.fz-3xsmall { font-size: var(--font-size-3xsmall); }
.fz-4xsmall { font-size: var(--font-size-4xsmall)!important; }
.fw-100 { font-weight: 100 !important; }
.fw-200 { font-weight: 200 !important; }
.fw-300 { font-weight: 300 !important; }
.fw-400 { font-weight: 400 !important; }
.fw-500 { font-weight: 500 !important; }
.fw-600 { font-weight: 600 !important; }
.fw-700 { font-weight: 700 !important; }
.fw-800 { font-weight: 800 !important; }
.fw-900 { font-weight: 900 !important; }
/* ///////////////// WIDTH ///////////////// */
.wd-10 { width: 10px!important; }
.wd-15 { width: 15px!important; }
.wd-20 { width: 20px!important; }
.wd-25 { width: 25px!important; }
.wd-30 { width: 30px!important; }
.wd-35 { width: 35px!important; }
.wd-40 { width: 40px!important; }
.wd-45 { width: 45px!important; }
.wd-50 { width: 50px!important; }
.wd-55 { width: 55px!important; }
.wd-60 { width: 60px!important; }
.wd-65 { width: 65px!important; }
.wd-70 { width: 70px!important; }
.wd-75 { width: 75px!important; }
.wd-80 { width: 80px!important; }
.wd-85 { width: 85px!important; }
.wd-90 { width: 90px!important; }
.wd-95 { width: 95px!important; }
.wd-100 { width: 100px!important; }
.wd-105 { width: 105px; }
.wd-110 { width: 110px; }
.wd-115 { width: 115px; }
.wd-120 { width: 120px; }
.wd-125 { width: 125px; }
.wd-130 { width: 130px; }
.wd-135 { width: 135px; }
.wd-140 { width: 140px; }
.wd-145 { width: 145px; }
.wd-150 { width: 150px; }
.wd-155 { width: 155px; }
.wd-160 { width: 160px; }
.wd-165 { width: 165px; }
.wd-170 { width: 170px; }
.wd-175 { width: 175px; }
.wd-180 { width: 180px; }
.wd-185 { width: 185px; }
.wd-190 { width: 190px; }
.wd-195 { width: 195px; }
.wd-200 { width: 200px; }
.wd-250 { width: 250px; }
.wd-300 { width: 300px; }
.wd-350 { width: 350px; }
/* ///////////////// BORDER RADIUS ///////////////// */
.br01 { border-radius: 1px; }
.br02 { border-radius: 2px; }
.br03 { border-radius: 3px; }
.br04 { border-radius: 4px; }
.br05 { border-radius: 5px; }
.br06 { border-radius: 6px; }
.br07 { border-radius: 7px; }
.br08 { border-radius: 8px; }
.br09 { border-radius: 9px; }
.br10 { border-radius: 10px; }
.br11 { border-radius: 11px; }
.br12 { border-radius: 12px; }
.br13 { border-radius: 13px; }
.br14 { border-radius: 14px; }
.br15 { border-radius: 15px; }
.br16 { border-radius: 16px; }
.br17 { border-radius: 17px; }
.br18 { border-radius: 18px; }
.br19 { border-radius: 19px; }
.br20 { border-radius: 20px; }
.br50 { border-radius: 50%; }
/* ///////////////// PADDING ///////////////// */
.padding-xxlarge        { padding: var(--margenes-xxlarge) }
.padding-xlarge         { padding: var(--margenes-xlarge) }
.padding-large          { padding: var(--margenes-large) }
.padding-medium         { padding: var(--margenes-medium) }
.padding-small          { padding: var(--margenes-small) }
.padding-xsmall         { padding: var(--margenes-xsmall) }
.padding-xxsmall        { padding: var(--margenes-xxsmall) }
.paddinglat-xxlarge     { padding: 0 var(--margenes-xxlarge) }
.paddinglat-xlarge      { padding: 0 var(--margenes-xlarge) }
.paddinglat-large       { padding: 0 var(--margenes-large) }
.paddinglat-medium      { padding: 0 var(--margenes-medium) }
.paddinglat-small       { padding: 0 var(--margenes-small) }
.paddinglat-xsmall      { padding: 0 var(--margenes-xsmall) }
.paddinglat-xxsmall     { padding: 0 var(--margenes-xxsmall) }
.paddingtopbott-xxlarge { padding: var(--margenes-xxlarge) 0 }
.paddingtopbott-xlarge  { padding: var(--margenes-xlarge) 0 }
.paddingtopbott-large   { padding: var(--margenes-large) 0 }
.paddingtopbott-medium  { padding: var(--margenes-medium) 0 }
.paddingtopbott-small   { padding: var(--margenes-small) 0 }
.paddingtopbott-xsmall  { padding: var(--margenes-xsmall) 0 }
.paddingtopbott-xxsmall { padding: var(--margenes-xxsmall) 0 }
.paddingtop-xxlarge     { padding: var(--margenes-xxlarge) 0 0 0 }
.paddingtop-xlarge      { padding: var(--margenes-xlarge) 0 0 0 }
.paddingtop-large       { padding: var(--margenes-large) 0 0 0 }
.paddingtop-medium      { padding: var(--margenes-medium) 0 0 0 }
.paddingtop-small       { padding: var(--margenes-small) 0 0 0 }
.paddingtop-xsmall      { padding: var(--margenes-xsmall) 0 0 0 }
.paddingtop-xxsmall     { padding: var(--margenes-xxsmall) 0 0 0 }
.paddingright-xxlarge   { padding: 0 var(--margenes-xxlarge) 0 0 }
.paddingright-xlarge    { padding: 0 var(--margenes-xlarge) 0 0 }
.paddingright-large     { padding: 0 var(--margenes-large) 0 0 }
.paddingright-medium    { padding: 0 var(--margenes-medium) 0 0 }
.paddingright-small     { padding: 0 var(--margenes-small) 0 0 }
.paddingright-xsmall    { padding: 0 var(--margenes-xsmall) 0 0 }
.paddingright-xxsmall   { padding: 0 var(--margenes-xxsmall) 0 0 }
.paddingbottom-xxlarge  { padding: 0 0 var(--margenes-xxlarge) 0 }
.paddingbottom-xlarge   { padding: 0 0 var(--margenes-xlarge) 0 }
.paddingbottom-large    { padding: 0 0 var(--margenes-large) 0 }
.paddingbottom-medium   { padding: 0 0 var(--margenes-medium) 0 }
.paddingbottom-small    { padding: 0 0 var(--margenes-small) 0 }
.paddingbottom-xsmall   { padding: 0 0 var(--margenes-xsmall) 0 }
.paddingbottom-xxsmall  { padding: 0 0 var(--margenes-xxsmall) 0 }
.paddingleft-xxlarge    { padding: 0 0 0 var(--margenes-xxlarge) }
.paddingleft-xlarge     { padding: 0 0 0 var(--margenes-xlarge) }
.paddingleft-large      { padding: 0 0 0 var(--margenes-large) }
.paddingleft-medium     { padding: 0 0 0 var(--margenes-medium) }
.paddingleft-small      { padding: 0 0 0 var(--margenes-small) }
.paddingleft-xsmall     { padding: 0 0 0 var(--margenes-xsmall) }
.paddingleft-xxsmall    { padding: 0 0 0 var(--margenes-xxsmall) }
/* ///////////////// MARGIN ///////////////// */
.margin-xxlarge        { margin: var(--margenes-xxlarge) }
.margin-xlarge         { margin: var(--margenes-xlarge) }
.margin-large          { margin: var(--margenes-large) }
.margin-medium         { margin: var(--margenes-medium) }
.margin-small          { margin: var(--margenes-small) }
.margin-xsmall         { margin: var(--margenes-xsmall) }
.margin-xxsmall        { margin: var(--margenes-xxsmall) }
.marginlat-xxlarge     { margin: 0 var(--margenes-xxlarge) }
.marginlat-xlarge      { margin: 0 var(--margenes-xlarge) }
.marginlat-large       { margin: 0 var(--margenes-large) }
.marginlat-medium      { margin: 0 var(--margenes-medium) }
.marginlat-small       { margin: 0 var(--margenes-small) }
.marginlat-xsmall      { margin: 0 var(--margenes-xsmall) }
.marginlat-xxsmall     { margin: 0 var(--margenes-xxsmall) }
.margintopbott-xxlarge { margin: var(--margenes-xxlarge) 0 }
.margintopbott-xlarge  { margin: var(--margenes-xlarge) 0 }
.margintopbott-large   { margin: var(--margenes-large) 0 }
.margintopbott-medium  { margin: var(--margenes-medium) 0 }
.margintopbott-small   { margin: var(--margenes-small) 0 }
.margintopbott-xsmall  { margin: var(--margenes-xsmall) 0 }
.margintopbott-xxsmall { margin: var(--margenes-xxsmall) 0 }
.margintop-xxlarge     { margin: var(--margenes-xxlarge) 0 0 0 }
.margintop-xlarge      { margin: var(--margenes-xlarge) 0 0 0 }
.margintop-large       { margin: var(--margenes-large) 0 0 0 }
.margintop-medium      { margin: var(--margenes-medium) 0 0 0 }
.margintop-small       { margin: var(--margenes-small) 0 0 0 }
.margintop-xsmall      { margin: var(--margenes-xsmall) 0 0 0 }
.margintop-xxsmall     { margin: var(--margenes-xxsmall) 0 0 0 }
.marginright-xxlarge   { margin: 0 var(--margenes-xxlarge) 0 0 }
.marginright-xlarge    { margin: 0 var(--margenes-xlarge) 0 0 }
.marginright-large     { margin: 0 var(--margenes-large) 0 0 }
.marginright-medium    { margin: 0 var(--margenes-medium) 0 0 }
.marginright-small     { margin: 0 var(--margenes-small) 0 0 }
.marginright-xsmall    { margin: 0 var(--margenes-xsmall) 0 0 }
.marginright-xxsmall   { margin: 0 var(--margenes-xxsmall) 0 0 }
.marginbottom-xxlarge  { margin: 0 0 var(--margenes-xxlarge) 0 }
.marginbottom-xlarge   { margin: 0 0 var(--margenes-xlarge) 0 }
.marginbottom-large    { margin: 0 0 var(--margenes-large) 0 }
.marginbottom-medium   { margin: 0 0 var(--margenes-medium) 0 }
.marginbottom-small    { margin: 0 0 var(--margenes-small) 0 }
.marginbottom-xsmall   { margin: 0 0 var(--margenes-xsmall) 0 }
.marginbottom-xxsmall  { margin: 0 0 var(--margenes-xxsmall) 0 }
.marginleft-xxlarge    { margin: 0 0 0 var(--margenes-xxlarge) }
.marginleft-xlarge     { margin: 0 0 0 var(--margenes-xlarge) }
.marginleft-large      { margin: 0 0 0 var(--margenes-large) }
.marginleft-medium     { margin: 0 0 0 var(--margenes-medium) }
.marginleft-small      { margin: 0 0 0 var(--margenes-small) }
.marginleft-xsmall     { margin: 0 0 0 var(--margenes-xsmall) }
.marginleft-xxsmall    { margin: 0 0 0 var(--margenes-xxsmall) }
/* ///////////////// BLOCKQUOTE ///////////////// */
blockquote {
  margin: 55px 0;
  padding: 0;
  border:none;
  text-align: center;
  font-family: var(--font-serif);
  }

  blockquote p{
  font-size: var(--font-size-3xlarge)!important;
  line-height: var(--lineheight-3xlarge)!important;
  position: relative;
  padding: 0 50px;
  font-weight: 300;
  color: var(--col-marron);
  border: none;
  font-style: italic;
  display: inline;
  margin:10px 0;
  }
  blockquote p::before {
  content:url("../img/comillas-d.svg");
  filter: var(--svg-marron);
  width: clamp(3%, 100vw, 30px);
  display: block;
  position: absolute;
  left: 0;
  top: -1px;
  }
  blockquote p::after {
  content:url("../img/comillas-i.svg");
  filter: var(--svg-marron);
  width: clamp(3%, 100vw, 30px);
  display: block;
  position: absolute;
  right: 0;
  bottom: -8px;
  }
  blockquote cite {
  font-size: var(--font-size-small);
  display: block;
  margin-top: 10px;
  text-align: right;
  }
  blockquote cite:before {
  content: "";
  margin-right: 10px
  }
/* blockquote {
  position: relative;
  margin: 2em 1em!important;
  padding: 1em!important;
  border: none!important;
  font-family: var(--font-serif), Georgia, 'Times New Roman', Times, serif;
  line-height: var(--lineheight-xlarge);
  font-style: italic;
  font-size: 1.7rem;
  font-weight: 200;
  color: var(--col-marron);
}
blockquote:before,
blockquote:after {
  content: " ";
  position: absolute;
  top: 0;
  width: 0.75em;
  height: 100%;
  border: 1px solid var(--col-marron);
}
blockquote:before {
  left: -0.75em;
  border-right: 0;
}
blockquote:after {
  right: -0.75em;
  border-left: 0;
} */
/* ///////////// FOTOGRAFIAS ///////////// */
.figure figure {
  position: relative;
  overflow: hidden;
  margin: 0 !important;
  /* background: var(--background);*/
  background: var(--col-040);
  display: flex;
  justify-content: center;
  align-items: center;
}
  .figure figure i {
  color: #fffffff5;
  background: rgb(0 0 0 / 21%);
  padding: 0 7px;
  border-radius: 9px;
  z-index: 1;
  position: absolute;
}
  .figure figure i img{
  filter: invert(1) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);
  display: block;
}
  .figure figure:before {
  content: '';
  display: block;
  padding-top: 100%;
  width: 100%;
  filter: blur(6px) brightness(.7);
  background-image: var(--background);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
  .figure figure img[alt]:after {
  content: attr(alt);
  background: var(--col-070);
  color: var(--col-040);
  filter: invert(1) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);
  background-image: url("https://portal.andina.pe/edpespeciales/img/andina.svg");
  background-repeat: no-repeat;
  background-size: 40%;
  background-position: center;
  background-position-y: 45%;
  background-position-x: 42%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-family: 'Helvetica';
  font-weight: 300;
  line-height: 120px;
  text-align: center;
}
.figure figure figcaption.leyenda{
  position: absolute;
  bottom: 0;
  margin: 0;
  background: var(--col-oscuro);
  width: 100%;
  padding-top: var(--margenes-xsmall);
} 
.figure figure figcaption.credito-foto{
  display: flex;
  position: absolute;
  bottom: 0;
  margin: 0;
  background: var(--trans-50);
  width: 100%;
  padding: 10px 15px;
  color: var(--col-blanco);
}
  .figure figure figcaption.credito-foto:before {
  content:url("https://infodesign.es/img/regular-foto.svg");
  width: 23px;
  display: inline-block;
  margin-right: 5px;
  filter: var(--svg-blanco);
}
.figure small {
  line-height: normal;
  display: inline-block;
  margin-top: 10px;
  margin-bottom: 0;
  font-style: italic;
  font-size: 1rem;
}
  .figure figure img.fotoh {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  max-width: 100%;
  width:100%;
  height: auto;
  right: 0;
  display: -webkit-box !important;
  display: -webkit-flex !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-align: center !important;
  -webkit-align-items: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
  margin: auto;
}
  .figure figure img.fotov {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -100%;
  right: -100%;
  height: 100%;
  width: auto;
  display: -webkit-box !important;
  display: -webkit-flex !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-align: center !important;
  -webkit-align-items: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
  margin: auto;
}
.figure figure.foto200:before {padding-top: 200%;}
.figure figure.foto190:before {padding-top: 190%;}
.figure figure.foto180:before {padding-top: 180%;}
.figure figure.foto170:before {padding-top: 170%;}
.figure figure.foto160:before {padding-top: 160%;}
.figure figure.foto150:before {padding-top: 150%;}
.figure figure.foto140:before {padding-top: 140%;}
.figure figure.foto130:before {padding-top: 130%;}
.figure figure.foto120:before {padding-top: 120%;}
.figure figure.foto110:before {padding-top: 110%;}
.figure figure.foto100:before {padding-top: 100%;}
.figure figure.foto90:before {padding-top: 90%;}
.figure figure.foto80:before {padding-top: 80%;}
.figure figure.foto70:before {padding-top: 70%;}
.figure figure.foto60:before {padding-top: 60%;}
.figure figure.foto50:before {padding-top: 50%;}
.figure figure.foto40:before {padding-top: 40%;}
.figure figure.foto30:before {padding-top: 30%;}
.figure figure.foto20:before {padding-top: 20%;}
.figure figure.foto10:before {padding-top: 10%;}
/* ///////////// VIDEO POSTER ///////////// */
.videos-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  box-sizing: inherit;
  }
  .videos-container iframe{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
  }
  .video-poster {
    position: relative;
    width: 100%;
    height: 0;
    background-color: var(--col-fuente);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--col-grisclaro);
    padding-top: 56%;
    margin-bottom: var(--margenes-small);
  }
  .video-poster iframe {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
  }
  .video-poster button {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    cursor: pointer;
    border: 0;
    outline: none;
    background-position: 50% 50%;
    background-size: 100% 100%;
    background-size: cover;
    text-indent: -999em;
    overflow: hidden;
    opacity: 1;
    -webkit-transition: opacity 800ms, height 0s;
    -moz-transition: opacity 800ms, height 0s;
    transition: opacity 800ms, height 0s;
    -webkit-transition-delay: 0s, 0s;
    -moz-transition-delay: 0s, 0s;
    transition-delay: 0s, 0s;
  }
  .video-poster button:before {
    content: "";
    position: absolute;
    top: 48%;
    left: 50%;
    width: 80px;
    height: 80px;
    margin: -40px 0 0 -40px;
    background: #c62828;
    border-radius: 30%;
    -webkit-transition: border-color 300ms;
    -moz-transition: border-color 300ms;
    transition: border-color 300ms;
  }
  .video-poster button:after {
    content: "";
    position: absolute;
    top: 48%;
    left: 50%;
    width: 0;
    height: 0;
    margin: -25px 0 0 -13px;
    border-left: 40px solid #fff;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    -webkit-transition: border-color 300ms;
    -moz-transition: border-color 300ms;
    transition: border-color 300ms;
  }
  .video-poster button:hover:before,
  .video-poster button:focus:before {
    border-color: #ffffff87;
    background: #c6282887;
  }
  .video-poster button:hover:after,
  .video-poster button:focus:after {
    border-left-color: #ffffff87;
  }
  .video-active button {
    opacity: 0;
    height: 0;
    -webkit-transition-delay: 0s, 800ms;
    -moz-transition-delay: 0s, 800ms;
    transition-delay: 0s, 800ms;
  }
  header, section{
    margin-bottom: 100px;
  }
  .marco {
    padding: var(--margenes-xxlarge);
    background: var(--col-blanco);
    border-radius: var(--border-radius-xsmall);
    }
/* //////// ANIMACION PARRAFOS //////// */
.scrollAnim{
  opacity: 0;
  transition: 0.8s;
  display: flex;
}
.scrollAnim.anim{
  opacity: 1;
}
.scrollAnim .container-small{
  height: 30vh;
}
.move{
  font-size: 0.9em;
  transition: all 1.2s;
}
.anim{
  transition-delay: 0.1s;
}
.anim-top{
  transition: all 0.8s;
  transform: translate(0,150px);
}
.anim-left{
  line-height: 1.2em;
  transition: all 0.8s;
  transform: translate(-150px,0);
}
.anim .anim-top{
  transform: translate(0,0);
}
.anim .anim-left{
  transform: translate(0,0);
}
@-webkit-keyframes fadeIn {
  from{ opacity:  0; }
  to{ opacity: 1; }
}
@keyframes fadeIn {
  from{ opacity:  0; }
  to{ opacity: 1; }
}
@-webkit-keyframes fadeInOut {
  0%{ opacity:  0; }
  50%{ opacity: 1; }
  100%{ opacity: 0; }
}
@keyframes fadeInOut {
  0%{ opacity:  0; }
  50%{ opacity: 1; }
  100%{ opacity: 0; }
}

/* //////// SCROLLYTELLING //////// */
.scrollytelling {
    position: relative;
    z-index: 500;
}
.scrollytelling .viewport {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: -1;
}
.scrollytelling .image {
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    filter: brightness(100%);
}
.scrollytelling .text:first-of-type {
    margin-top: -80vh;
}
.scrollytelling .text:last-of-type {
    padding-bottom: 66vh;
    margin-bottom: 0;
}
.scrollytelling .text {
    position: relative;
    margin-bottom: 100vh;
    z-index: 10;
}
.scrollytelling.fade .viewport .telling {
  opacity: 0;
}
.scrollytelling.fade .viewport .telling:first-of-type {
  opacity: 1;
}
.scrollytelling.fade .viewport .telling {
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}
/* //////////////////////// */
.border-cile{
  background-image: url(../img/border.png);
  background-position: center;
  height: 67px;
  position: absolute;
  width: 100%;
}
/* ////////// NUEVOS ////////// */
.franja::before{
  content: "";
  background-image: url(../img/franja.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: absolute;
  bottom: 0;
  z-index: 3;
  width: 100%;
  height: 40px;
  display: inline-block;
}
.cifra{
  font-size: 5rem;
  font-family: var(--font-serif);
  font-weight: 800!important;
  color:var(--col-rojo)
}
.indicators {
display: none;
}
ul#nav-mobile {
    height: 100%;
    display: flex;
    align-items: center;
}
a.brand-logo{
    line-height: normal;
    height: 100%;
    display: flex;
    align-items: center;
}
.scrollnav {
position: fixed;
top: 0px;
z-index: 11;
width: 100%;
background: none;
-webkit-transition: all 0.3s;
transition: all 0.3s;
opacity: 0;
top: -100px;
}
.scrollnav #logo {
float: left;
margin-left: 15%;
}
.sticky {
background-color: rgba(255, 255, 255, 0.93);
opacity: 1;
top: 0px;
}
.share-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 20px 0;
}
.share-mobile{
  width: 100%;
  display: flex;
  justify-content: flex-end;
  position: absolute;
  height: 100%;
}
.btn-largo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 46px;
  border-radius: 6%;
  color: #fff;
  font-size: 18px;
  text-decoration: none;
  transition: transform 0.25s, background-color 0.25s;
}
.btn-largo:hover {
  transform: scale(1.1);
}
.fb { background-color: #1877f2!important; }
.ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.li { background-color: #0077b5!important; }
.tw { background-color: #000000!important; }
.wa { background-color: #25D366!important; }
.em { background-color: #D44638!important; }
.cp { background-color: #555555!important; border: none; }

ul.share-buttons {
    background: transparent;
    box-shadow: none;
}
ul.share-buttons li{
    display: flex;
    justify-content: center;
    background: transparent!important;
}
ul.share-buttons li a{
  display: flex;
  justify-content: center;
}
ul.share-buttons li a i{
  display: flex;
  justify-content: center;
  margin: 0;
  height: auto;
}
.rows {
  display: grid;
  grid-auto-rows: auto;
  grid-gap: 2rem;
  grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));
  grid-auto-flow: dense;
  padding: 0 3% !important;
  font-size: 1.2rem;
  line-height:24px;
}
  .rows .ciles .card {
      height: 100%;
  }
  .rows-noticia {
  display: grid;
  grid-auto-rows: auto;
  grid-gap: 2rem;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  grid-auto-flow: dense;
  padding: 0 3% !important;
  font-size: 1.2rem;
  line-height:24px;
}
.credito{
  display: flex;
  align-items: flex-end;
}
/* ////////// ARROW ANIMATE ////////// */
.arrow-down {
  width: 60px;
  position: absolute;
  left: 50%;
  animation: arrow 0.5s 1s infinite ease-out alternate;
}
.arrow-down:hover {
  animation-play-state: paused;
}
.arrow-left,
.arrow-right {
  position: absolute;
  height: 4px;
  width: 30px;
  background: var(--col-blanco);
  border-radius: 4px;
  top: 10px;
}
.arrow-left {
  left: 7px;
  transform: rotate(240deg);
  transform-origin: 5px 50%;
  animation: leftArrow 0.5s 1s infinite ease-out alternate;
}
.arrow-right {
  left: 12px;
  transform: rotate(-60deg);
  transform-origin: 5px 50%;
  animation: rightArrow 0.5s 1s infinite ease-out alternate;
}
/* Keyframes */
@keyframes arrow {
  0% {
    bottom: 0;
  }
  100% {
    bottom: 20px;
  }
}
@keyframes leftArrow {
  100% {
    transform: rotate(225deg);
  }
}
@keyframes rightArrow {
  100% {
    transform: rotate(-45deg);
  }
}

.grid-video{
  display: grid;
  grid-auto-rows: auto;
  row-gap: 3rem;
  column-gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
  grid-auto-flow: dense;
}
nav ul a {
    color: #fff !important;
    text-decoration:none;
}
nav ul a:hover {
    text-decoration:none;
}
ul.logos-flex {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
ul.logos-flex li{
  margin: 30px;
}
ul.logovisitanos{
  display: flex;
  justify-content: center;
}
video.responsive-video {
width: 100%;
border: 1px solid var(--col-grisclaro);
border-radius: 20px;
overflow: hidden;
margin: var(--margenes-large) 0;
}
.share {
  width: 40px;
  overflow: hidden;
  text-align: center;
  z-index: 1;
  -webkit-transition: width 0.7s;
  -moz-transition: width 0.7s;
  -ms-transition: width 0.7s;
  -o-transition: width 0.7s;
  transition: width 0.7s;
}

.share ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}

.share ul li {
  position: relative;
  width: 40px;
  height: 43.4px;
  float: left;
  display: flex;
  align-items: center;
  justify-content: center;
}

.share ul li button {
  background: transparent;
  cursor: pointer;
}

.share ul li button img {
  width: 30px;
  filter: var(--svg-black);
}

.share ul li a {
  margin: auto !important;
  padding: 0;
  display: flex;
  align-items: center;
}

.share ul li a img {
  width: 30px;
  filter: var(--svg-black);
}

.share ul li a:hover {
  -webkit-transition: 0.4s;
  -moz-transition: 0.4s;
  -ms-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s;
}

ul#dropdown1 {
  top: 65px !important;
  position: absolute;
}
.portada .grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows:auto;
  row-gap: 10px;
  column-gap: 10px;
  grid-auto-flow: dense;
  list-style: none ;
  margin: 0 10px;
  width: 100%;
  max-width: 900px;
  }
.portada{
  text-align: center;
  position: absolute;
  z-index: 10;
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding-top: var(--margenes-xxxlarge);
  }
/* .portada img{
  width:100%;
  max-width:320px;
  margin: auto;
  height: 100%;
  } */
.portada .titular{
  background: #981e22e8;
  margin: var(--margenes-xxxsmall) var(--margenes-xlarge);
  padding:var(--margenes-xlarge) var(--margenes-xlarge);
  display: inline-block;
  }
.portada .titular span{
  text-align: center;
  width: 100%;
  max-width: 800px;
  }
.portada .titular span h1 {
  color: #fff;
  text-align: center;
  }

  .grid-logos{
    display: grid;
grid-template-columns: repeat(3, 1fr);
row-gap: 2rem;
column-gap: 6rem;
width: 100%;
max-width: 900px;
padding: 0 30px;
  }
  .log03{
    grid-column: 1/3;
    grid-row: span 2;
    display: flex;
  }
  .log01{
    grid-column: 3/3;
    grid-row: 1/1;
    display: flex;
  }
  .log02{
    grid-column: 3/3;
    grid-row: 2/2;
    display: flex;
  }
/* //////////////// MEDIAS //////////////// */
@media only screen and (max-width: 750px) {
  .height100vh{
  height: 100% !important;
  }
  .grid-logos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    row-gap: 2rem;
    column-gap: 6rem;
    width: 100%;
    max-width: 900px;
    padding: 0 30px;
}
 }
 @media only screen and (min-width: 929px) {
  .rows {
  grid-template-columns: repeat(auto-fill, minmax(29rem, 1fr));
  }
 }
 @media only screen and (max-width: 928px) {
  .rows {
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  }
 }
 @media only screen and (max-width: 828px) {
  .rows {
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  }
 }
 @media only screen and (min-width: 601px) {
  .share {
  width: initial;
  overflow: initial;
  }
  .share:hover {
  width: initial;
  }
  .share ul {
  display: flex !important;
  position: static !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  }
 }
 @media only screen and (max-width: 600px) {
  .credito {
    display: flex;
    flex-direction: column;
}
  .portada .grid {
  grid-template-columns: auto!important;
  row-gap: 17px!important;
  column-gap: 28px!important;
  }
  .portada {
  justify-content: space-evenly!important;
  }
  .grid-logos {
    row-gap: 2rem;
    column-gap: 3rem !important;
    display: flex !important;
    flex-direction: column;
    padding: 0 120px !important;
}
  .coloboradores span {
  display: inline-block;
  vertical-align: middle;
  width: 100%;
  max-width: 140px;
  margin: 10px;
  }
  .clientes{
  margin: 10px;
  }

  .centrados{
  display: block !important;
  }
  .grid-video {
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr))!important;
  }
  ul.logos-flex {
  flex-direction: column;
  }
  blockquote p {
  line-height: var(--lineheight-2xlarge) !important;
  }
  .rows {
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  }
  h1 {
  font-size: var(--font-size-3xlarge);
  margin: 0;
  }
  h4 {
  font-size: var(--font-size-xsmall)!important;
  margin: 0;
  }
  .share ul {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.5rem 1rem 2rem;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  background: var(--col-white);
  box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.3);
  z-index: 1001;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  -webkit-transition: transform 0.4s ease-out, opacity 0.4s ease-out;
  transition: transform 0.4s ease-out, opacity 0.4s ease-out;
  }
  .share.active ul {
  transform: translateY(0);
  opacity: 1;
  pointer-events: all;
  }
  .share.active::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.87);
  z-index: 1000;
  }
 }