/* 9 JULIO 2026 */
@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";
--fontsize-4xlarge  : clamp(1.90rem, 3.60vw, 2.20rem) ; /* h1 */
--fontsize-3xlarge  : clamp(1.80rem, 3.40vw, 2.10rem) ; /* h2 */
--fontsize-2xlarge  : clamp(1.70rem, 3.20vw, 2.00rem) ; /* h3 */
--fontsize-xlarge   : clamp(1.60rem, 3.00vw, 1.90rem) ; /* h4 */
--fontsize-large    : clamp(1.50rem, 2.80vw, 1.80rem) ; /* h5 */
--fontsize-medium   : clamp(1.40rem, 2.60vw, 1.70rem) ; /* h6 */
--fontsize-small    : clamp(1.30rem, 2.40vw, 1.60rem) ; /* strong */
--fontsize-xsmall   : clamp(1.20rem, 2.20vw, 1.30rem) ; /* p */
--fontsize-2xsmall  : clamp(1.20rem, 1.90vw, 1.10rem) ; /* small */
--fontsize-3xsmall  : clamp(0.80rem, 1.80vw, 1.00rem) ; /* em */
--fontsize-4xsmall  : clamp(0.70rem, 1.60vw, 0.90rem) ; /* del */
--lineheight-4xlarge: clamp(2.20rem, 2.00rem + 1.00vw, 2.80rem) ;
--lineheight-3xlarge: clamp(2.10rem, 1.90rem + 1.00vw, 2.60rem) ;
--lineheight-2xlarge: clamp(2.00rem, 1.80rem + 1.00vw, 2.40rem) ;
--lineheight-xlarge : clamp(1.90rem, 1.70rem + 0.80vw, 2.20rem) ;
--lineheight-large  : clamp(1.80rem, 1.60rem + 0.70vw, 2.00rem) ;
--lineheight-medium : clamp(1.70rem, 1.50rem + 0.60vw, 1.90rem) ;
--lineheight-small  : clamp(1.60rem, 1.40rem + 0.50vw, 1.80rem) ;
--lineheight-xsmall : clamp(1.50rem, 1.30rem + 0.40vw, 1.70rem) ;
--lineheight-2xsmall: clamp(1.40rem, 1.20rem + 0.30vw, 1.60rem) ;
--lineheight-3xsmall: clamp(1.30rem, 1.10rem + 0.20vw, 1.50rem) ;
--lineheight-4xsmall: clamp(1.20rem, 1.00rem + 0.10vw, 1.40rem) ;
--ancho-4xlarge     : clamp(3.00rem, 3.00rem + 0.75vw, 3.50rem) ;
--ancho-3xlarge     : clamp(2.50rem, 2.50rem + 0.75vw, 3.00rem) ;
--ancho-2xlarge     : clamp(2.00rem, 2.00rem + 0.75vw, 2.50rem) ;
--ancho-xlarge      : clamp(1.60rem, 1.60rem + 0.60vw, 2.00rem) ;
--ancho-large       : clamp(1.40rem, 1.40rem + 0.60vw, 1.80rem) ;
--ancho-medium      : clamp(1.20rem, 1.20rem + 0.60vw, 1.60rem) ;
--ancho-small       : clamp(1.00rem, 1.00rem + 0.60vw, 1.40rem) ;
--ancho-xsmall      : clamp(0.80rem, 0.80rem + 0.60vw, 1.20rem) ;
--ancho-2xsmall     : clamp(0.70rem, 0.70rem + 0.45vw, 1.00rem) ;
--ancho-3xsmall     : clamp(0.60rem, 0.60rem + 0.30vw, 0.80rem) ;
--ancho-4xsmall     : clamp(0.50rem, 0.50rem + 0.15vw, 0.60rem) ;
--logo-4xlarge      : clamp(6.50rem, 11.00rem + 22.00vw, 22.50rem) ;
--logo-3xlarge      : clamp(6.00rem, 10.00rem + 20.00vw, 21.00rem) ;
--logo-2xlarge      : clamp(5.50rem, 09.00rem + 18.00vw, 19.50rem) ;
--logo-xlarge       : clamp(5.00rem, 08.00rem + 16.00vw, 18.00rem) ;
--logo-large        : clamp(4.50rem, 07.00rem + 14.00vw, 16.50rem) ;
--logo-medium       : clamp(4.00rem, 06.00rem + 12.00vw, 15.00rem) ;
--logo-small        : clamp(3.50rem, 05.00rem + 10.00vw, 13.50rem) ;
--logo-xsmall       : clamp(3.00rem, 04.00rem + 08.00vw, 12.00rem) ;
--logo-2xsmall      : clamp(2.50rem, 03.00rem + 06.00vw, 10.50rem) ;
--logo-3xsmall      : clamp(2.00rem, 02.00rem + 04.00vw, 09.00rem) ;
--logo-4xsmall      : clamp(1.50rem, 01.00rem + 02.00vw, 07.50rem) ;
--espacio-4xsmall   : clamp(04px, 0.2vw, 06.0px) ;
--espacio-3xsmall   : clamp(08px, 0.4vw, 10.0px) ;
--espacio-2xsmall   : clamp(12px, 0.6vw, 14.0px) ;
--espacio-xsmall    : clamp(16px, 0.8vw, 18.0px) ;
--espacio-small     : clamp(20px, 1.0vw, 22.0px) ;
--espacio-medium    : clamp(24px, 1.2vw, 28.0px) ;
--espacio-large     : clamp(32px, 1.5vw, 36.0px) ;
--espacio-xlarge    : clamp(40px, 1.8vw, 46.0px) ;
--espacio-2xlarge   : clamp(48px, 2.0vw, 56.0px) ;
--espacio-3xlarge   : clamp(56px, 2.5vw, 66.0px) ;
--espacio-4xlarge   : clamp(64px, 3.0vw, 76.0px) ;
--borderradius-4xlarge  : calc(1.1% + 22px) ;
--borderradius-3xlarge  : calc(1.0% + 20px) ;
--borderradius-2xlarge  : calc(0.9% + 18px) ;
--borderradius-xlarge   : calc(0.8% + 16px) ;
--borderradius-large    : calc(0.7% + 14px) ;
--borderradius-medium   : calc(0.6% + 12px) ;
--borderradius-small    : calc(0.5% + 10px) ;
--borderradius-xsmall   : calc(0.4% + 08px) ;
--borderradius-2xsmall  : calc(0.3% + 06px) ;
--borderradius-3xsmall  : calc(0.2% + 04px) ;
--borderradius-4xsmall  : calc(0.1% + 02px) ;
--col-magenta   : #ff4077 ;
--col-fucsia    : #da2e58 ;
--col-rojo      : #d32f2f ;
--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   : #ffdb00 ;
--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-noche     : #1a2630 ;
--col-azulado   : #2f475e ;
--col-metal     : #4a6585 ;
--col-acero     : #788ca3 ;
--col-aluminio  : #a5b2c2 ;
--col-plateado  : #d1d8e0 ;
--col-humo      : #e7ebeedb ;
--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-oscuro    : #262b2f ;
--col-grisoscuro: #404449 ;
--col-grismedio : #5c6368 ;
--col-grisclaro : #d9d9e3 ;
--col-gristenue : #ebebed ;
--svg-magenta    : invert(30%) sepia(100%) saturate(1000%) hue-rotate(300deg) brightness(100%) contrast(100%) ;
--svg-fucsia     : invert(25%) sepia(100%) saturate(1000%) hue-rotate(310deg) brightness(100%) contrast(100%) ;
--svg-rojo       : invert(16%) sepia(93%) saturate(1006%) hue-rotate(323deg) brightness(157%) contrast(114%) ;
--svg-marron     : invert(13%) sepia(100%) saturate(1000%) hue-rotate(376deg) brightness(150%) contrast(110%) ;
--svg-pardo      : invert(20%) sepia(100%) saturate(1000%) hue-rotate(373deg) brightness(122%) contrast(71%) ;
--svg-greige     : invert(37%) sepia(100%) saturate(1000%) hue-rotate(343deg) brightness(196%) contrast(31%) ;
--svg-crema      : invert(118%) sepia(105%) saturate(854%) hue-rotate(294deg) brightness(115%) contrast(87%) ;
--svg-pino       : invert(22%) sepia(100%) saturate(1000%) hue-rotate(427deg) brightness(48%) contrast(86%) ;
--svg-salvia     : invert(16%) sepia(100%) saturate(1000%) hue-rotate(393deg) brightness(122%) contrast(29%) ;
--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-noche      : invert(8%) sepia(437%) saturate(35%) hue-rotate(522deg) brightness(347%) contrast(223%) ;
--svg-azulado    : invert(8%) sepia(458%) saturate(90%) hue-rotate(527deg) brightness(373%) contrast(168%) ;
--svg-metal      : invert(8%) sepia(536%) saturate(113%) hue-rotate(532deg) brightness(423%) contrast(130%) ;
--svg-acero      : invert(10%) sepia(556%) saturate(89%) hue-rotate(535deg) brightness(447%) contrast(105%) ;
--svg-aluminio   : invert(11%) sepia(515%) saturate(55%) hue-rotate(535deg) brightness(555%) contrast(78%) ;
--svg-plateado   : invert(11%) sepia(510%) saturate(24%) hue-rotate(535deg) brightness(609%) contrast(103%) ;
--svg-humo       : invert(11%) sepia(510%) saturate(11%) hue-rotate(535deg) brightness(635%) contrast(118%) ;
--svg-blanco     : invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(300%) contrast(300%) ;
--svg-negro      : invert(0%) sepia(0%) saturate(0%) brightness(0%) contrast(100%) ;
--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-fuente     : invert(5%) sepia(100%) saturate(100%) hue-rotate(81deg) brightness(100%) contrast(79%) ;
--svg-oscuro     : invert(7%) sepia(495%) saturate(29%) hue-rotate(538deg) brightness(335%) contrast(153%) ;
--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(100%) sepia(26%) saturate(82%) hue-rotate(201deg) brightness(241%) contrast(70%) ;
--svg-gristenue  : invert(52%) sepia(92%) saturate(99%) hue-rotate(146deg) brightness(203%) contrast(88%) ;
--trans-10negro  : #00000010 ;
--trans-20negro  : #00000020 ;
--trans-30negro  : #00000030 ;
--trans-40negro  : #00000040 ;
--trans-50negro  : #00000050 ;
--trans-60negro  : #00000060 ;
--trans-70negro  : #00000070 ;
--trans-80negro  : #00000080 ;
--trans-90negro  : #00000090 ;
--trans-10blanco : #ffffff10 ;
--trans-20blanco : #ffffff20 ;
--trans-30blanco : #ffffff30 ;
--trans-40blanco : #ffffff40 ;
--trans-50blanco : #ffffff50 ;
--trans-60blanco : #ffffff60 ;
--trans-70blanco : #ffffff70 ;
--trans-80blanco : #ffffff80 ;
--trans-90blanco : #ffffff90 ;
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
padding: 0;
}
html{
color: var(--col-fuente);
scroll-behavior:smooth;
}
body {
font-family: var(--font-serif);
font-size: var(--fontsize-4xsmall);
display: flex;
min-height: 100vh;
flex-direction: column;
}
main{
padding: var(--espacio-large) 0;
flex: 1 0 auto;
overflow: hidden;
}
h1,h2,h3,h4,h5,h6,strong,p,small,em,del{
font-weight: 400;
display: block;
}
h1 {
font-size: var(--fontsize-4xlarge);
line-height: var(--lineheight2xlarge);
}
h2 {
font-size: var(--fontsize-3xlarge);
line-height: var(--lineheight-2xlarge);
}
h3 {
font-size: var(--fontsize-2xlarge);
line-height: var(--lineheight-2xlarge);
}
h4 {
font-size: var(--fontsize-xlarge);
line-height: var(--lineheight-xlarge);
}
h5 {
font-size: var(--fontsize-large);
line-height: var(--lineheight-large);
}
h6 {
font-size: var(--fontsize-medium);
line-height: var(--lineheight-medium);
}
strong {
font-size: var(--fontsize-xlarge);
line-height: var(--lineheight-large);
font-weight: 500;
margin-bottom: var(--espacio-small);
}
p {
font-size: var(--fontsize-2xsmall);
line-height: var(--lineheight-small);
margin: var(--espacio-large) 0!important;
}
small {
font-size: var(--fontsize-2xsmall);
line-height: var(--lineheight-xsmall);
}
em {
font-size: var(--fontsize-3xsmall);
line-height: var(--lineheight-3xsmall);
font-style: normal;
}
del {
font-size: var(--fontsize-4xsmall);
line-height: var(--lineheight-4xsmall);
font-style: normal;
text-decoration: none;
}
button{
padding: var(--espacio-2xsmall) var(--espacio-xsmall);
border-color: #ffffff6e #0000001c #0000003d #ffffff33;
border-radius: 4px;
border-width: 2px;
color: var(--col-blanco);
box-sizing: border-box;
display: inline-block;
text-transform: uppercase;
letter-spacing: 1px;
transition: all 0.3s ease;
cursor: pointer;
background: var(--col-blanco)
}
button:hover {
border-color: #0000003d #ffffff33 #ffffff6e #0000001c;
filter:brightness(0.9);
color: var(--col-blanco);
}
button:link {
border-color: #0000003d #ffffff33 #ffffff6e #0000001c;
}
button:active {
border-color: #0000003d #ffffff33 #ffffff6e #0000001c;
filter:brightness(0.8);
}
button:visited {
border-color: #0000003d #ffffff33 #ffffff6e #0000001c;
}
button.text-fuente{
color: var(--col-fuente);
}
button.text-fuente:hover {
color: var(--col-fuente);
}
button.line{
border-color: #ffffff6e #0000001c #0000003d #ffffff33;
/* box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); */
border: 1px solid var(--col-grisclaro);
}
button.line:hover {
border-color: #0000003d #ffffff33 #ffffff6e #0000001c;
filter:brightness(0.9);
color: var(--col-fuente);
}
button.line:link {
border-color: #0000003d #ffffff33 #ffffff6e #0000001c;
}
button.line:active {
border-color: #0000003d #ffffff33 #ffffff6e #0000001c;
filter:brightness(0.8);
}
button.line:visited {
border-color: #0000003d #ffffff33 #ffffff6e #0000001c;
}
span {
line-height: var(--lineheight-4xsmall);
font-size: var(--fontsize-4xsmall);
display: block;
}
time{
font-size: var(--fontsize-4xsmall);
}
figure{
height: 100%;
position: relative;
}
figure figcaption {
font-size: var(--fontsize-4xsmall);
line-height: var(--lineheight-4xsmall);
padding: var(--espacio-xsmall) var(--espacio-small);
background: var(--trans-70negro);
color: var(--col-blanco);
width: 100%;
z-index: 1;
position: absolute;
bottom: 0;
}
figure img:hover {
opacity: 0.9;
filter: alpha(opacity=50);
}
i{
font-family: var(--font-serif);
}
b{
font-weight: 600;
}
sub {
line-height: 140%;
display: block;
}
mark {
background: var(--col-mostaza);
padding: 0 var(--espacio-4xsmall);
border-radius: var(--espacio-4xsmall);
display: inline;
}
hr {
display: block;
width: 100%;
height: 1px;
background: var(--col-grisclaro)!important;
border: none;
}
ul{
list-style: none ;
}
a {
color: var(--col-fuente);
}
a:hover {
color: var(--col-cielo);
text-decoration: underline;
}
a:link {
color: var(--col-cielo);
}
a:active {
color: var(--col-cielo);
}
a:visited {
color: var(--col-fuente);
}
a:focus {
color:var(--col-cielo);
}
img {
max-width: 100%;
width: 100%;
height: auto;
vertical-align: middle;
display: inline-block;
}
/* ///////////////// BLOCKQUOTE ///////////////// */
/*======================================
  BLOCKQUOTE EDITORIAL
======================================*/

blockquote.reveal{
    --quote-color:#087cbf;
    --quote-accent:#f96000;
    --quote-bg:#ffffff;

    position:relative;
    display:flex;
    align-items:center;
    gap:2rem;

    margin:4rem auto !important;
    padding:2.5rem;

    background:
        linear-gradient(135deg,
        rgba(8,124,191,.06),
        rgba(249,96,0,.03));

    border-radius:24px;
    border-left:8px solid var(--quote-accent);

    box-shadow:
        0 20px 50px rgba(0,0,0,.08);

    overflow:hidden;
}

/* Franja decorativa */

blockquote.reveal::before{
    content:"";
    position:absolute;
    inset:0;
    width:8px;
    background:linear-gradient(
        to bottom,
        #087cbf,
        #f96000,
        #c94d00
    );
}

/* Gran comilla */

blockquote.reveal::after{
    content:"“";
    position:absolute;
  left: 13%;
    top: 6%;
    font-family: Georgia, serif;
    font-size: 220px;
    line-height:1;

    color:rgba(8,124,191,.08);

    pointer-events:none;
}

/*======================================
  FOTO
======================================*/

blockquote figure{
    flex:0 0 220px;
    margin:0;
    position:relative;
}

blockquote figure img{
    display:block;
    width:100%;
    border-radius:18px;
    transition:.35s;
}

blockquote:hover figure img{
    transform:scale(1.03);
}

blockquote figcaption{
    margin-top:.9rem;

    font-size:.83rem;
    line-height:1.5;

    color:#666;

    text-align:center;
}

/*======================================
  TEXTO
======================================*/

blockquote .text-blanco{
    flex:1;

    color:var(--col-azulado);

    font-family:var(--font-serif),Georgia,serif;

    font-size:1.35rem;
    line-height:2.2rem;

    font-style:italic;
    font-weight:300;

    position:relative;
    z-index:2;
}

/*======================================
  EFECTO HOVER
======================================*/

blockquote{
    transition:.35s;
}

blockquote:hover{
    transform:translateY(-5px);

    box-shadow:
        0 28px 60px rgba(0,0,0,.12);
}

/*======================================
  RESPONSIVE
======================================*/

@media (max-width:900px){

blockquote.reveal{

    flex-direction:column;

    text-align:center;

    padding:2rem;
}

blockquote figure{
    width:220px;
}

blockquote .text-blanco{

    font-size:1.15rem;
    line-height:2rem;
}


}

@media (max-width:600px){

blockquote.reveal{

    padding:1.5rem;
    border-radius:18px;
}

blockquote figure{
    width:180px;
}

blockquote .text-blanco{

    font-size:1.05rem;
    line-height:1.8rem;
}

blockquote figcaption{
    font-size:.75rem;
}

}
/* ///////////////// RESETEO ///////////////// */
.widthfull { width: 100%}
.fullwidth { width: 100%}
.widthauto { width: auto; }
.widthinherit { width: inherit; }
.heightauto { height: auto!important; }
.heightinherit { height: inherit; }
.top { top: 0; }
.bottom { bottom: 0; }
.left { left: 0; }
.right {right: 0; }
.block { display: block; }
.inline { display: inline; }
.inlineblock { display: inline-block; }
.contents { display: contents!important;}
.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; }
.no-overflowhidden { overflow: visible; }
.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!important; }
.no-paddingtop {padding-top: 0; }
.no-paddingbottom {padding-bottom: 0; }
.no-paddingleft {padding-left: 0; }
.no-paddingright {padding-right: 0; }
.no-margin {margin: 0!important; }
.no-margintop {margin-top: 0; }
.no-marginbottom {margin-bottom: 0; }
.no-marginleft {margin-left: 0; }
.no-marginright {margin-right: 0; }
.no-filter { filter: none !important;}
.marginauto {margin: auto; }
.borderwhite { border: solid 1px var(--col-blanco); }
.displayflex { display: flex!important; }
.none { display:none; }
.flex { display: flex!important; }
.no-borderbottom { border-bottom: none;}
.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; }
.center-v { display: flex!important; 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; align-content: center; align-items: center; }
.cursor-pointer{cursor: pointer;}
.no-boxshadow {box-shadow:none!important}
.grid-top{
align-content: start;
}
.button-noborder{
padding: var(--espacio-3xsmall);
border: none;
}
.degradeblack {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
background: var(--col-negro);
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);
}
.link-blanco a {
color: var(--col-blanco);
}
a.link-blanco a:hover {
color: var(--col-blanco);
text-decoration: underline;
}
.link-blanco a:link {
color: var(--col-blanco);
}
.link-blanco a:active {
color: var(--col-blanco);
}
.link-blanco a:visited {
color: var(--col-blanco);
}
.link-blanco a:focus {
color:var(--col-blanco);
}
/* ///////////////// LISTA ///////////////// */
ul.lista-texto {
  display: inline-block;
  font-size: var(--fontsize-2xsmall);
  margin: var(--espacio-large) 0 !important;
  list-style: circle;
  padding-left: var(--espacio-small);
}
ul.lista-texto li{
  line-height: var(--lineheight-small);
  margin-bottom: var(--espacio-3xsmall);
} 
/* ///////////////// CONTENEDORES ///////////////// */
.container-full     { max-width: 100% !important; width: 100% !important; margin: auto; display: block; padding: 0 var(--espacio-small);}
.container-4xlarge  { max-width: 2560px !important; width: 100% !important; margin: auto; display: block; padding: 0 var(--espacio-small);}
.container-3xlarge  { max-width: 1920px !important; width: 100% !important; margin: auto; display: block; padding: 0 var(--espacio-small);}
.container-2xlarge  { max-width: 1600px !important; width: 100% !important; margin: auto; display: block; padding: 0 var(--espacio-small);}
.container-xlarge   { max-width: 1366px !important; width: 100% !important; margin: auto; display: block; padding: 0 var(--espacio-small);}
.container-large,.container { max-width: 1201px !important; width: 100% !important; margin: auto; display: block; padding: 0 var(--espacio-small);}
.container-medium   { max-width: 993px !important; width: 100% !important; margin: auto; display: block; padding: 0 var(--espacio-small);}
.container-small    { max-width: 801px !important; width: 100% !important; margin: auto; display: block; padding: 0 var(--espacio-small);}
.container-xsmall   { max-width: 601px !important; width: 100% !important; margin: auto; display: block; padding: 0 var(--espacio-small);}
.container-2xsmall  { max-width: 425px !important; width: 100% !important; margin: auto; display: block; padding: 0 var(--espacio-small);}
.container-3xsmall  { max-width: 375px !important; width: 100% !important; margin: auto; display: block; padding: 0 var(--espacio-small);}
.container-4xsmall  { max-width: 320px !important; width: 100% !important; margin: auto; display: block; padding: 0 var(--espacio-small);}
/* ///////////////// COLORES BACK ///////////////// */
.magenta { background: var(--col-magenta )}
.fucsia { background: var(--col-fucsia)}
.rojo { background: var(--col-rojo)!important}
.marron { background: var(--col-marron )}
.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 )}
.mostaza { background: var(--col-mostaza)}
.limon { background: var(--col-limon)}
.manzana { background: var(--col-manzana )}
.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)}
.noche { background: var(--col-noche)}
.azulado { background: var(--col-azulado)}
.metal { background: var(--col-metal)}
.acero { background: var(--col-acero)}
.aluminio { background: var(--col-aluminio)}
.plateado { background: var(--col-plateado)}
.humo { background: var(--col-humo)}
.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)}
.oscuro { background: var(--col-oscuro)!important}
.grisoscuro { background: var(--col-grisoscuro)}
.grismedio { background: var(--col-grismedio)}
.grisclaro { background: var(--col-grisclaro)}
.gristenue { background: var(--col-gristenue)}
/* ///////////////// COLORES TEXT ///////////////// */
.text-magenta { color: var(--col-magenta )}
.text-fucsia { color: var(--col-fucsia)}
.text-rojo { color: var(--col-rojo)}
.text-marron { color: var(--col-marron )}
.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-mostaza { color: var(--col-mostaza)}
.text-limon { color: var(--col-limon)}
.text-manzana { color: var(--col-manzana )}
.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-noche { color: var(--col-noche)}
.text-azulado { color: var(--col-azulado)}
.text-metal { color: var(--col-metal)}
.text-acero { color: var(--col-acero)}
.text-aluminio { color: var(--col-aluminio)}
.text-plateado { color: var(--col-plateado)}
.text-humo { color: var(--col-humo)}
.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-oscuro { color: var(--col-oscuro)}
.text-grisoscuro { color: var(--col-grisoscuro)}
.text-grismedio { color: var(--col-grismedio)}
.text-grisclaro { color: var(--col-grisclaro)}
.text-gristenue { color: var(--col-gristenue)}
/* ///////////////// COLORES SVG ///////////////// */
.svg-magenta { filter: var(--svg-magenta) }
.svg-fucsia { filter: var(--svg-fucsia) }
.svg-rojo { filter: var(--svg-rojo) }
.svg-marron { filter: var(--svg-marron) }
.svg-pardo { filter: var(--svg-pardo) }
.svg-greige { filter: var(--svg-greige) }
.svg-crema { filter: var(--svg-crema) }
.svg-pino { filter: var(--svg-pino) }
.svg-salvia { filter: var(--svg-salvia) }
.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-noche { filter: var(--svg-noche) }
.svg-azulado { filter: var(--svg-azulado) }
.svg-metal { filter: var(--svg-metal) }
.svg-acero { filter: var(--svg-acero) }
.svg-aluminio { filter: var(--svg-aluminio) }
.svg-plateado { filter: var(--svg-plateado) }
.svg-humo { filter: var(--svg-humo) }
.svg-blanco { filter:var(--svg-blanco)!important; }
.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-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(--fontsize-4xlarge); }
.fz-3xlarge { font-size: var(--fontsize-3xlarge); }
.fz-2xlarge { font-size: var(--fontsize-2xlarge); }
.fz-xlarge  { font-size: var(--fontsize-xlarge); }
.fz-large   { font-size: var(--fontsize-large); }
.fz-medium  { font-size: var(--fontsize-medium); }
.fz-small   { font-size: var(--fontsize-small); }
.fz-xsmall  { font-size: var(--fontsize-xsmall); }
.fz-2xsmall { font-size: var(--fontsize-2xsmall); }
.fz-4xsmall { font-size: var(--fontsize-3xsmall); }
.fz-4xsmall { font-size: var(--fontsize-4xsmall); }
.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 ///////////////// */
.logo-4xlarge { width: var(--logo-4xlarge); }
.logo-3xlarge { width: var(--logo-3xlarge); }
.logo-2xlarge { width: var(--logo-2xlarge); }
.logo-xlarge  { width: var(--logo-xlarge); }
.logo-large   { width: var(--logo-large); }
.logo-medium  { width: var(--logo-medium); }
.logo-small   { width: var(--logo-small ); }
.logo-xsmall  { width: var(--logo-xsmall); }
.logo-2xsmall { width: var(--logo-2xsmall); }
.logo-3xsmall { width: var(--logo-3xsmall); }
.logo-4xsmall { width: var(--logo-4xsmall); }
/* ///////////////// ANCHO ///////////////// */
.ancho-4xlarge { width: var(--ancho-4xlarge); }
.ancho-3xlarge { width: var(--ancho-3xlarge); }
.ancho-2xlarge { width: var(--ancho-2xlarge); }
.ancho-xlarge  { width: var(--ancho-xlarge); }
.ancho-large   { width: var(--ancho-large); }
.ancho-medium  { width: var(--ancho-medium); }
.ancho-small   { width: var(--ancho-small ); }
.ancho-xsmall  { width: var(--ancho-xsmall); }
.ancho-2xsmall { width: var(--ancho-2xsmall); }
.ancho-3xsmall { width: var(--ancho-3xsmall); }
.ancho-4xsmall { width: var(--ancho-4xsmall); }
/* ///////////////// LINE-HEIGHT ///////////////// */
.lh-4xlarge { line-height: var(--lineheight-4xlarge); }
.lh-3xlarge { line-height: var(--lineheight-3xlarge); }
.lh-2xlarge { line-height: var(--lineheight-2xlarge); }
.lh-xlarge  { line-height: var(--lineheight-xlarge); }
.lh-large   { line-height: var(--lineheight-large ); }
.lh-medium  { line-height: var(--lineheight-medium); }
.lh-small   { line-height: var(--lineheight-small); }
.lh-xsmall  { line-height: var(--lineheight-xsmall ); }
.lh-2xsmall { line-height: var(--lineheight-2xsmall); }
.lh-3xsmall { line-height: var(--lineheight-3xsmall); }
.lh-4xsmall { line-height: var(--lineheight-4xsmall); }
/* ///////////////// HEIGHT ///////////////// */
.hg-4xlarge { height: var(--espacio-4xlarge); }
.hg-3xlarge { height: var(--espacio-3xlarge); }
.hg-2xlarge { height: var(--espacio-2xlarge); }
.hg-xlarge  { height: var(--espacio-xlarge); }
.hg-large   { height: var(--espacio-large); }
.hg-medium  { height: var(--espacio-medium); }
.hg-small   { height: var(--espacio-small ); }
.hg-xsmall  { height: var(--espacio-xsmall); }
.hg-2xsmall { height: var(--espacio-2xsmall); }
.hg-3xsmall { height: var(--espacio-3xsmall); }
.hg-4xsmall { height: var(--espacio-4xsmall); }
/* ///////////////// HEIGHT ///////////////// */
.gap-4xlarge { gap: var(--espacio-4xlarge); }
.gap-3xlarge { gap: var(--espacio-3xlarge); }
.gap-2xlarge { gap: var(--espacio-2xlarge); }
.gap-xlarge  { gap: var(--espacio-xlarge); }
.gap-large   { gap: var(--espacio-large); }
.gap-medium  { gap: var(--espacio-medium); }
.gap-small   { gap: var(--espacio-small ); }
.gap-xsmall  { gap: var(--espacio-xsmall); }
.gap-2xsmall { gap: var(--espacio-2xsmall); }
.gap-3xsmall { gap: var(--espacio-3xsmall); }
.gap-4xsmall { gap: var(--espacio-4xsmall); }
/* ///////////////// BORDER RADIUS ///////////////// */
.brs-4xlarge  { border-radius: var(--espacio-4xlarge) }
.brs-3xlarge  { border-radius: var(--espacio-3xlarge) }
.brs-2xlarge  { border-radius: var(--espacio-2xlarge) }
.brs-xlarge   { border-radius: var(--espacio-xlarge) }
.brs-large    { border-radius: var(--espacio-large) }
.brs-medium   { border-radius: var(--espacio-medium) }
.brs-small    { border-radius: var(--espacio-small) }
.brs-xsmall   { border-radius: var(--espacio-xsmall) }
.brs-2xsmall  { border-radius: var(--espacio-2xsmall) }
.brs-3xsmall  { border-radius: var(--espacio-3xsmall) }
.brs-4xsmall  { border-radius: var(--espacio-4xsmall) }
/* ///////////////// PADDING ///////////////// */
.padding-4xlarge        { padding: var(--espacio-4xlarge) }
.padding-3xlarge        { padding: var(--espacio-3xlarge) }
.padding-2xlarge        { padding: var(--espacio-2xlarge) }
.padding-xlarge         { padding: var(--espacio-xlarge) }
.padding-large          { padding: var(--espacio-large) }
.padding-medium         { padding: var(--espacio-medium) }
.padding-small          { padding: var(--espacio-small) }
.padding-xsmall         { padding: var(--espacio-xsmall) }
.padding-2xsmall        { padding: var(--espacio-2xsmall)!important }
.padding-3xsmall        { padding: var(--espacio-3xsmall)!important }
.padding-4xsmall        { padding: var(--espacio-4xsmall) }
.paddinglat-4xlarge     { padding: 0 var(--espacio-4xlarge) }
.paddinglat-3xlarge     { padding: 0 var(--espacio-3xlarge) }
.paddinglat-2xlarge     { padding: 0 var(--espacio-2xlarge) }
.paddinglat-xlarge      { padding: 0 var(--espacio-xlarge) }
.paddinglat-large       { padding: 0 var(--espacio-large) }
.paddinglat-medium      { padding: 0 var(--espacio-medium) }
.paddinglat-small       { padding: 0 var(--espacio-small) }
.paddinglat-xsmall      { padding: 0 var(--espacio-xsmall) }
.paddinglat-2xsmall     { padding: 0 var(--espacio-2xsmall) }
.paddinglat-3xsmall     { padding: 0 var(--espacio-3xsmall) }
.paddinglat-4xsmall     { padding: 0 var(--espacio-4xsmall) }
.paddingtopbott-4xlarge { padding: var(--espacio-4xlarge) 0 }
.paddingtopbott-3xlarge { padding: var(--espacio-3xlarge) 0 }
.paddingtopbott-2xlarge { padding: var(--espacio-2xlarge) 0 }
.paddingtopbott-xlarge  { padding: var(--espacio-xlarge) 0 }
.paddingtopbott-large   { padding: var(--espacio-large) 0 }
.paddingtopbott-medium  { padding: var(--espacio-medium) 0 }
.paddingtopbott-small   { padding: var(--espacio-small) 0 }
.paddingtopbott-xsmall  { padding: var(--espacio-xsmall) 0 }
.paddingtopbott-2xsmall { padding: var(--espacio-2xsmall) 0 }
.paddingtopbott-3xsmall { padding: var(--espacio-3xsmall) 0 }
.paddingtopbott-4xsmall { padding: var(--espacio-4xsmall) 0 }
.paddingtop-4xlarge     { padding: var(--espacio-4xlarge) 0 0 0 }
.paddingtop-3xlarge     { padding: var(--espacio-3xlarge) 0 0 0 }
.paddingtop-2xlarge     { padding: var(--espacio-2xlarge) 0 0 0 }
.paddingtop-xlarge      { padding: var(--espacio-xlarge) 0 0 0 }
.paddingtop-large       { padding: var(--espacio-large) 0 0 0 }
.paddingtop-medium      { padding: var(--espacio-medium) 0 0 0 }
.paddingtop-small       { padding: var(--espacio-small) 0 0 0 }
.paddingtop-xsmall      { padding: var(--espacio-xsmall) 0 0 0 }
.paddingtop-2xsmall     { padding: var(--espacio-2xsmall) 0 0 0 }
.paddingtop-3xsmall     { padding: var(--espacio-3xsmall) 0 0 0 }
.paddingtop-4xsmall     { padding: var(--espacio-4xsmall) 0 0 0 }
.paddingright-4xlarge   { padding: 0 var(--espacio-4xlarge) 0 0 }
.paddingright-3xlarge   { padding: 0 var(--espacio-3xlarge) 0 0 }
.paddingright-2xlarge   { padding: 0 var(--espacio-2xlarge) 0 0 }
.paddingright-xlarge    { padding: 0 var(--espacio-xlarge) 0 0 }
.paddingright-large     { padding: 0 var(--espacio-large) 0 0 }
.paddingright-medium    { padding: 0 var(--espacio-medium) 0 0 }
.paddingright-small     { padding: 0 var(--espacio-small) 0 0 }
.paddingright-xsmall    { padding: 0 var(--espacio-xsmall) 0 0 }
.paddingright-2xsmall   { padding: 0 var(--espacio-2xsmall) 0 0 }
.paddingright-3xsmall   { padding: 0 var(--espacio-3xsmall) 0 0 }
.paddingright-4xsmall   { padding: 0 var(--espacio-4xsmall) 0 0 }
.paddingbottom-4xlarge  { padding: 0 0 var(--espacio-4xlarge) 0 }
.paddingbottom-3xlarge  { padding: 0 0 var(--espacio-3xlarge) 0 }
.paddingbottom-2xlarge  { padding: 0 0 var(--espacio-2xlarge) 0 }
.paddingbottom-xlarge   { padding: 0 0 var(--espacio-xlarge) 0 }
.paddingbottom-large    { padding: 0 0 var(--espacio-large) 0 }
.paddingbottom-medium   { padding: 0 0 var(--espacio-medium) 0 }
.paddingbottom-small    { padding: 0 0 var(--espacio-small) 0 }
.paddingbottom-xsmall   { padding: 0 0 var(--espacio-xsmall) 0 }
.paddingbottom-2xsmall  { padding: 0 0 var(--espacio-2xsmall) 0 }
.paddingbottom-3xsmall  { padding: 0 0 var(--espacio-3xsmall) 0 }
.paddingbottom-4xsmall  { padding: 0 0 var(--espacio-4xsmall) 0 }
.paddingleft-4xlarge    { padding: 0 0 0 var(--espacio-4xlarge) }
.paddingleft-3xlarge    { padding: 0 0 0 var(--espacio-3xlarge) }
.paddingleft-2xlarge    { padding: 0 0 0 var(--espacio-2xlarge) }
.paddingleft-xlarge     { padding: 0 0 0 var(--espacio-xlarge) }
.paddingleft-large      { padding: 0 0 0 var(--espacio-large) }
.paddingleft-medium     { padding: 0 0 0 var(--espacio-medium) }
.paddingleft-small      { padding: 0 0 0 var(--espacio-small) }
.paddingleft-xsmall     { padding: 0 0 0 var(--espacio-xsmall) }
.paddingleft-2xsmall    { padding: 0 0 0 var(--espacio-2xsmall) }
.paddingleft-3xsmall    { padding: 0 0 0 var(--espacio-3xsmall) }
.paddingleft-4xsmall    { padding: 0 0 0 var(--espacio-4xsmall) }
/* ///////////////// MARGIN ///////////////// */
.margin-4xlarge        { margin: var(--espacio-4xlarge) }
.margin-3xlarge        { margin: var(--espacio-3xlarge) }
.margin-2xlarge        { margin: var(--espacio-2xlarge) }
.margin-xlarge         { margin: var(--espacio-xlarge) }
.margin-large          { margin: var(--espacio-large) }
.margin-medium         { margin: var(--espacio-medium) }
.margin-small          { margin: var(--espacio-small) }
.margin-xsmall         { margin: var(--espacio-xsmall) }
.margin-2xsmall        { margin: var(--espacio-2xsmall) }
.margin-3xsmall        { margin: var(--espacio-3xsmall) }
.margin-4xsmall        { margin: var(--espacio-4xsmall) }
.marginlat-4xlarge     { margin: 0 var(--espacio-4xlarge) }
.marginlat-3xlarge     { margin: 0 var(--espacio-3xlarge) }
.marginlat-2xlarge     { margin: 0 var(--espacio-2xlarge) }
.marginlat-xlarge      { margin: 0 var(--espacio-xlarge) }
.marginlat-large       { margin: 0 var(--espacio-large) }
.marginlat-medium      { margin: 0 var(--espacio-medium) }
.marginlat-small       { margin: 0 var(--espacio-small) }
.marginlat-xsmall      { margin: 0 var(--espacio-xsmall) }
.marginlat-2xsmall     { margin: 0 var(--espacio-2xsmall) }
.marginlat-3xsmall     { margin: 0 var(--espacio-3xsmall) }
.marginlat-4xsmall     { margin: 0 var(--espacio-4xsmall) }
.margintopbott-4xlarge { margin: var(--espacio-4xlarge) 0 }
.margintopbott-3xlarge { margin: var(--espacio-3xlarge) 0 }
.margintopbott-2xlarge { margin: var(--espacio-2xlarge) 0 }
.margintopbott-xlarge  { margin: var(--espacio-xlarge) 0 }
.margintopbott-large   { margin: var(--espacio-large) 0 }
.margintopbott-medium  { margin: var(--espacio-medium) 0 }
.margintopbott-small   { margin: var(--espacio-small) 0 }
.margintopbott-xsmall  { margin: var(--espacio-xsmall) 0 }
.margintopbott-2xsmall { margin: var(--espacio-2xsmall) 0 }
.margintopbott-3xsmall { margin: var(--espacio-3xsmall) 0 }
.margintopbott-4xsmall { margin: var(--espacio-4xsmall) 0 }
.margintop-4xlarge     { margin: var(--espacio-4xlarge) 0 0 0 }
.margintop-3xlarge     { margin: var(--espacio-3xlarge) 0 0 0 }
.margintop-2xlarge     { margin: var(--espacio-2xlarge) 0 0 0 }
.margintop-xlarge      { margin: var(--espacio-xlarge) 0 0 0 }
.margintop-large       { margin: var(--espacio-large) 0 0 0 }
.margintop-medium      { margin: var(--espacio-medium) 0 0 0 }
.margintop-small       { margin: var(--espacio-small) 0 0 0 }
.margintop-xsmall      { margin: var(--espacio-xsmall) 0 0 0 }
.margintop-2xsmall     { margin: var(--espacio-2xsmall) 0 0 0 }
.margintop-3xsmall     { margin: var(--espacio-3xsmall) 0 0 0 }
.margintop-4xsmall     { margin: var(--espacio-4xsmall) 0 0 0 }
.marginright-4xlarge   { margin: 0 var(--espacio-4xlarge) 0 0 }
.marginright-3xlarge   { margin: 0 var(--espacio-3xlarge) 0 0 }
.marginright-2xlarge   { margin: 0 var(--espacio-2xlarge) 0 0 }
.marginright-xlarge    { margin: 0 var(--espacio-xlarge) 0 0 }
.marginright-large     { margin: 0 var(--espacio-large) 0 0 }
.marginright-medium    { margin: 0 var(--espacio-medium) 0 0 }
.marginright-small     { margin: 0 var(--espacio-small) 0 0 }
.marginright-xsmall    { margin: 0 var(--espacio-xsmall) 0 0 }
.marginright-2xsmall   { margin: 0 var(--espacio-2xsmall) 0 0 }
.marginright-3xsmall   { margin: 0 var(--espacio-3xsmall) 0 0 }
.marginright-4xsmall   { margin: 0 var(--espacio-4xsmall) 0 0 }
.marginbottom-4xlarge  { margin: 0 0 var(--espacio-4xlarge) 0 }
.marginbottom-3xlarge  { margin: 0 0 var(--espacio-3xlarge) 0 }
.marginbottom-2xlarge  { margin: 0 0 var(--espacio-2xlarge) 0 }
.marginbottom-xlarge   { margin: 0 0 var(--espacio-xlarge) 0 }
.marginbottom-large    { margin: 0 0 var(--espacio-large) 0 }
.marginbottom-medium   { margin: 0 0 var(--espacio-medium) 0 }
.marginbottom-small    { margin: 0 0 var(--espacio-small) 0 }
.marginbottom-xsmall   { margin: 0 0 var(--espacio-xsmall) 0 }
.marginbottom-2xsmall  { margin: 0 0 var(--espacio-2xsmall) 0 }
.marginbottom-3xsmall  { margin: 0 0 var(--espacio-3xsmall) 0 }
.marginbottom-4xsmall  { margin: 0 0 var(--espacio-4xsmall) 0 }
.marginleft-4xlarge    { margin: 0 0 0 var(--espacio-4xlarge) }
.marginleft-3xlarge    { margin: 0 0 0 var(--espacio-3xlarge) }
.marginleft-2xlarge    { margin: 0 0 0 var(--espacio-2xlarge) }
.marginleft-xlarge     { margin: 0 0 0 var(--espacio-xlarge) }
.marginleft-large      { margin: 0 0 0 var(--espacio-large) }
.marginleft-medium     { margin: 0 0 0 var(--espacio-medium) }
.marginleft-small      { margin: 0 0 0 var(--espacio-small) }
.marginleft-xsmall     { margin: 0 0 0 var(--espacio-xsmall) }
.marginleft-2xsmall    { margin: 0 0 0 var(--espacio-2xsmall) }
.marginleft-3xsmall    { margin: 0 0 0 var(--espacio-3xsmall) }
.marginleft-4xsmall    { margin: 0 0 0 var(--espacio-4xsmall) }
/* //////////// GRILLAS //////////// */
.fila {
display: grid;
grid-template-columns: repeat(12, 1fr); 
gap: 15px; 
margin-bottom: 20px;
}
[class^="cols-"] {
  grid-column: span 12;
}
.cols-12 { grid-column: span 12; }
.cols-11 { grid-column: span 11; }
.cols-10 { grid-column: span 10; }
.cols-9  { grid-column: span 9; }
.cols-8  { grid-column: span 8; }
.cols-7  { grid-column: span 7; }
.cols-6  { grid-column: span 6; }
.cols-5  { grid-column: span 5; }
.cols-4  { grid-column: span 4; }
.cols-3  { grid-column: span 3; }
.cols-2  { grid-column: span 2; }
.cols-1  { grid-column: span 1; }
@media (max-width: 768px) {
.fila { grid-template-columns: 1fr;  }
}
/* //////////// COLUMNAS //////////// */
.columnas {
display: grid;
grid-auto-rows: auto;
justify-content: center;
align-items: start;
}
.col-1 { grid-template-columns: repeat(1, 1fr); }
.col-2 { grid-template-columns: repeat(2, 1fr); }
.col-3 { grid-template-columns: repeat(3, 1fr); }
.col-4 { grid-template-columns: repeat(4, 1fr); }
.col-5 { grid-template-columns: repeat(5, 1fr); }
.col-6 { grid-template-columns: repeat(6, 1fr); }
.col-12 { grid-template-columns: repeat(12, 1fr); }
.col-13 { grid-template-columns: repeat(13, 1fr); }
.col-14 { grid-template-columns: repeat(14, 1fr); }
.col-15 { grid-template-columns: repeat(15, 1fr); }
.col-16 { grid-template-columns: repeat(16, 1fr); }
.col-17 { grid-template-columns: repeat(17, 1fr); }
.col-18 { grid-template-columns: repeat(18, 1fr); }
.col-19 { grid-template-columns: repeat(19, 1fr); }
.col-20 { grid-template-columns: repeat(20, 1fr); }
.col-21 { grid-template-columns: repeat(21, 1fr); }
.col-22 { grid-template-columns: repeat(22, 1fr); }
.col-23 { grid-template-columns: repeat(23, 1fr); }
.col-24 { grid-template-columns: repeat(24, 1fr); }
.col-25 { grid-template-columns: repeat(25, 1fr); }
.col-26 { grid-template-columns: repeat(26, 1fr); }
.col-27 { grid-template-columns: repeat(27, 1fr); }
.col-28 { grid-template-columns: repeat(28, 1fr); }
.col-29 { grid-template-columns: repeat(29, 1fr); }
.col-30 { grid-template-columns: repeat(30, 1fr); }
.col-31 { grid-template-columns: repeat(31, 1fr); }
.col-32 { grid-template-columns: repeat(32, 1fr); }
.col-33 { grid-template-columns: repeat(33, 1fr); }
.col-34 { grid-template-columns: repeat(34, 1fr); }
.col-35 { grid-template-columns: repeat(35, 1fr); }
.col-4xlarge { grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr)); }
.col-3xlarge { grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr)); }
.col-2xlarge { grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); }
.col-xlarge  { grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); }
.col-large   { grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); }
.col-medium  { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.col-small   { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.col-xsmall  { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.col-2xsmall { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.col-3xsmall { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
.col-4xsmall { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
.col-2autofill { grid-template-columns: repeat(auto-fill, minmax(2rem, 1fr)); }
.col-3autofill { grid-template-columns: repeat(auto-fill, minmax(3rem, 1fr)); }
.col-4autofill { grid-template-columns: repeat(auto-fill, minmax(4rem, 1fr)); }
.col-5autofill { grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr)); }
.col-6autofill { grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr)); }
.col-7autofill { grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); }
.col-8autofill { grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); }
.col-9autofill { grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
.col-10autofill { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
.col-11autofill { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.col-12autofill { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
.grid-span2 { grid-column: span 2!important;}
.grid-span3 { grid-column: span 3!important;}
.grid-span4 { grid-column: span 4!important;}
.col-center {align-items: center;}
/* ///////////// SEARCH /////////////  */
.search {
border-radius: var(--espacio-4xsmall);
overflow: hidden;
}
.search form {
display: flex;
}
.search form button {
background: var(--col-blanco);
display: flex;
align-items: center;
border-radius:  var(--espacio-4xsmall) 0 0 var(--espacio-4xsmall);
border: none;
padding: 0 var(--espacio-2xsmall);
box-shadow: inset 1px 0px 0px 1px rgb(0 0 0 / 15%);
}
.search form button:hover {
background: var(--col-gris10);
}
.search form input {
font-size: var(--fontsize-3xsmall);
padding: var(--espacio-2xsmall) var(--espacio-3xsmall);
margin: 0;
border-radius: 0 var(--espacio-4xsmall) var(--espacio-4xsmall) 0;
border: 0;
outline: none;
width: 100%;
box-shadow: inset -1px 0px 0px 1px rgb(0 0 0 / 15%);
}
/* //////////// LEYENDA //////////// */
figure.leyenda {
position: initial;
display: initial;
}
figure.leyenda:before {
padding-top: initial;
}
figure.leyenda img[alt]:after {
position: initial;
}
figure.leyenda img {
position: initial;
}
figure.leyenda.foto70:before {
padding-top: initial;
}
figure.leyenda figcaption {
padding: var(--espacio-3xsmall) 0;
background: initial;
font-style: italic;
color: var(--col-fuente);
position: initial;
bottom: initial;
}
/* //////////// HEADER FLOATING //////////// */
.floating-btn {
position: absolute;
right: 0;
width: 45px;
overflow: hidden;
text-align: center;
z-index: 1;
transition: width 0.7s;
height: 100%;
display: flex;
align-items: center;
}
.floating-btn li.anchor {
position: absolute;
right: 0;
z-index: 1;
}
.floating-btn:hover {
width: 300px;
}
/* ///////////// FOTOGRAFIAS /////////////  */
figure {
margin-bottom: var(--espacio-3xsmall);
background: var(--col-040);
position: relative;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
border-radius: 5px;
}
figure i {
border-radius: var(--espacio-4xsmall);
color: #fffffff5;
background: rgb(0 0 0 / 21%);
padding: 0 7px;
z-index: 1;
position: absolute;
}
figure i img {
filter: invert(1) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);
display: block;
}
figure:before {
content: "";
display: block;
padding-top: 66%;
width: 100%;
filter: blur(6px) brightness(0.7);
background-image: var(--background);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
figure img[alt]:after {
content: attr(alt);
filter: var(--svg-blanco);
background-image: url("https://portal.andina.pe/edpespeciales/img/andina.svg");
background-repeat: no-repeat;
background-size: 40%;
background-position: center;
position: absolute;
left: 0;
width: 100%;
height: 100%;
font-size: var(--fontsize-small);
font-family: "Helvetica";
font-weight: 300;
line-height: 120px;
text-align: center;
}
figure figcaption a {
color: var(--col-blanco);
text-decoration: none;
}
figure figcaption a:hover {
color: var(--col-blanco)!important;
text-decoration: underline;
}
figure figcaption a:link {
color: var(--col-blanco);
}
figure figcaption a:active {
color: var(--col-blanco);
}
figure figcaption a:visited {
color: var(--col-blanco);
}
figure figcaption a:focus {
color:var(--col-blanco);
}
figure figcaption.credito-foto {
display: flex;
align-items: center;
}
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 img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
background: var(--col-grisclaro);
}
figure.foto200:before { padding-top: 200%; }
figure.foto190:before { padding-top: 190%; }
figure.foto180:before { padding-top: 180%; }
figure.foto170:before { padding-top: 170%; }
figure.foto160:before { padding-top: 160%; }
figure.foto150:before { padding-top: 150%; }
figure.foto140:before { padding-top: 140%; }
figure.foto130:before { padding-top: 130%; }
figure.foto120:before { padding-top: 120%; }
figure.foto110:before { padding-top: 110%; }
figure.foto100:before { padding-top: 100%; }
figure.foto90:before { padding-top: 90%; }
figure.foto80:before { padding-top: 80%; }
figure.foto70:before { padding-top: 70%; }
figure.foto60:before { padding-top: 60%; }
figure.foto50:before { padding-top: 50%; }
figure.foto40:before { padding-top: 40%; }
figure.foto30:before { padding-top: 30%; }
figure.foto20:before { padding-top: 20%; }
figure.foto10:before { padding-top: 10%; }
/* ///////////// FOTOGRAFIAS GRID ///////////// */
figure img {
display: block;
max-width: 100%;
height: auto;
width: 100%;
height: 100%;
object-fit: cover;
background: var(--col-grisclaro);
}
figure.powerclip img {
display: block;
max-width: 100%;
height: auto;
width: 100%;
height: 100%;
object-fit: cover;
background: var(--col-blanco);
}
figure.powerclip img[alt]:after {
content: attr(alt);
filter: var(--svg-blanco);
background-image: url("https://portal.andina.pe/edpespeciales/img/andina.svg");
background-repeat: no-repeat;
background-size: 40%;
background-position: center;
position: absolute;
left: 0;
width: 100%;
height: 100%;
font-size: var(--fontsize-small);
font-family: "Helvetica";
font-weight: 300;
line-height: 120px;
text-align: center;
}
.f1x1 { aspect-ratio: 1/1; }
.f2x1 { aspect-ratio: 2/1; }
.f1x2 { aspect-ratio: 1/2; }
.f3x1 { aspect-ratio: 3/1; }
.f1x3 { aspect-ratio: 1/3; }
.f4x1 { aspect-ratio: 4/1; }
.f1x4 { aspect-ratio: 1/4; }
.f3x2 { aspect-ratio: 3/2; }
.f2x3 { aspect-ratio: 2/3; }
.f3x4 { aspect-ratio: 3/4; }
.f4x3 { aspect-ratio: 4/3; }
.f4x5 { aspect-ratio: 4/5; }
.f7x4 { aspect-ratio: 7/4; }
.f5x4 { aspect-ratio: 5/4; }
.f6x4 { aspect-ratio: 6/4; }
.f6x3 { aspect-ratio: 6/3; }
.f4x6 { aspect-ratio: 4/6; }
.f9x16 { aspect-ratio: 9/16; }
.f16x9 { aspect-ratio: 16/9; }
/* ///////////// VIDEO POSTER ///////////// */
.video-container {
position: relative;
padding-bottom: 56.25% !important;
height: 0;
overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.video-facebook {
position: relative;
padding-bottom: 53% !important;
height: 0;
overflow: hidden;
}
.video-facebook iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.video-poster {
position: relative;
width: 100%;
height: 0;
background-color: var(--col-grisoscuro);
border-radius: var(--espacio-3xsmall);
overflow: hidden;
border: 1px solid var(--col-grisclaro);
padding-top: 56%;
}
.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: var(--col-rojo);
border-radius: var(--espacio-xsmall);
-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 var(--col-blanco);
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;
}
.truncate {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
overflow: hidden;
text-overflow: ellipsis;
max-height: calc(1.4em * 3);
white-space: normal;
}
/* //////////// BODY //////////// */
article a {
color: var(--col-fuente);
text-decoration: none;
}
article a:hover {
color: var(--col-gris70)!important;
text-decoration: underline;
}
article a:link {
color: var(--col-fuente);
}
article a:active {
color: var(--col-fuente);
}
article a:visited {
color: var(--col-fuente);
}
article a:focus {
color:var(--col-fuente);
}
/* //////////// FOOTER //////////// */
.footer section {
margin: var(--espacio-2xsmall) 0;
}
.footer strong {
  width: 100%;
  display: inline-block;
  text-align: center;
  margin: 20px 0 10px 0;
}
.footer section span{
margin: var(--espacio-2xsmall) 0;
text-align: left;
max-width: 500px;
width: 100%;
margin: auto;
}
.footer section span ul{
margin: var(--espacio-2xsmall) 0;
line-height: var(--lineheight-3xsmall);
}
.footer a{
text-decoration: none;
color: var(--col-fuente);
}
.footer a:hover{
text-decoration: underline;
color: var(--col-fuente);
}
.footer section ul{
line-height: var(--lineheight-3xsmall);
}
.footer section span ul.liststyle li  {
list-style: disc;
display: list-item;
margin-left: var(--espacio-2xsmall);
}
/* //////////// LOGOS //////////// */
.logos {
display: flex;
align-items: center;
justify-content: center;
}
.logos ul{
display: flex;
justify-content: flex-start;
align-items: center;
overflow-x: auto;
white-space: nowrap;
font-size: var(--font-size-3xsmall);
font-weight: 300;
margin: 0 var(--espacio-3xsmall);
padding: var(--espacio-3xsmall) 0;
}
.logos ul li a {
display: inline-block;
color: var(--col-blanco);
text-align: center;
padding: var(--espacio-3xsmall);
text-decoration: none;
transition: box-shadow 0.3s ease;
}
.logos ul::-webkit-scrollbar {
height: 0;
}
/* //////////// MEDIA //////////// */
@media only screen and (min-width: 1201px) {
.oculto-full-desktop {display: none !important;}
.ver-full-desktop {display: block !important;}
}
@media only screen and (min-width: 993px) {
.oculto-desktop { display: none !important;}
.ver-desktop { display: block !important;}
.floating-btn {
width: 300px;
overflow: initial;
justify-content: flex-end;
position: relative;
display: flex;
align-items: center;
}
}
@media only screen and (min-width: 801px) {
.oculto-desktop-medium { display: none !important;}
}
@media only screen and (min-width: 601px) {
.oculto-tablet-desktop { display: none !important;}
.ver-tablet-desktop { display: block !important;}
}
@media only screen and (min-width: 600px) and (max-width: 992px) {
.oculto-tablet { display: none !important;}
.ver-tablet { display: block !important;}
}
@media only screen and (max-width: 970px) {
}
@media only screen and (max-width: 992px) {
.oculto-tablet-movil { display: none !important;}
.oculto-desktop { display: inline-block !important ;}
.ver-tablet-movil { display: block !important;}
.sticky {
position: sticky;
top:0;
z-index: 3;
}
}
@media only screen and (max-width: 722px) {
}
@media only screen and (max-width: 660px) {
}
@media only screen and (max-width: 600px) {
.oculto-movil { display: none !important; }
.ver-movil { display: block !important; }
.columnas section .columnas  {
display: flex;
flex-direction: column;
}
}