/* 21 OCTUBRE 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(2.10rem, calc(2.0143rem + 2.9286vw), 4.40rem);
--fontsize-3xlarge: clamp(2.00rem, calc(1.9143rem + 1.8286vw), 3.30rem);
--fontsize-2xlarge: clamp(1.90rem, calc(1.8143rem + 0.8286vw), 2.20rem);
--fontsize-xlarge: clamp(1.80rem, calc(1.7143rem + 0.6286vw), 2.10rem);
--fontsize-large: clamp(1.70rem, calc(1.6143rem + 0.6286vw), 2.00rem);
--fontsize-medium: clamp(1.60rem, calc(1.5143rem + 0.4286vw), 1.90rem);
--fontsize-small: clamp(1.50rem, calc(1.4143rem + 0.4286vw), 1.80rem);
--fontsize-xsmall: clamp(1.30rem, calc(1.1029rem + 0.1857vw), 1.50rem);
--fontsize-2xsmall: clamp(1.20rem, calc(1.1000rem + 0.1757vw), 1.30rem);
--fontsize-3xsmall: clamp(1.10rem, calc(1.1714rem + 0.1429vw), 1.20rem);
--fontsize-4xsmall: clamp(0.08rem, calc(0.7014rem + 0.4vw), 1.00rem);
--lineheight-4xlarge: clamp(2.40rem, 2.40rem + 2.20vw, 4.80rem);
--lineheight-3xlarge: clamp(2.10rem, 1.90rem + 1.50vw, 3.60rem);
--lineheight-2xlarge: clamp(2.10rem, 1.90rem + 1.50vw, 2.70rem);
--lineheight-xlarge: clamp(1.90rem, 1.80rem + 1.40vw, 2.50rem);
--lineheight-large: clamp(1.80rem, 1.70rem + 1.30vw, 2.40rem);
--lineheight-medium: clamp(1.70rem, 1.60rem + 1.00vw, 2.20rem);
--lineheight-small: clamp(1.65rem, 1.50rem + 0.70vw, 2.10rem);
--lineheight-xsmall: clamp(1.55rem, 1.45rem + 0.55vw, 1.95rem);
--lineheight-2xsmall: clamp(1.45rem, 1.30rem + 0.35vw, 1.70rem);
--lineheight-3xsmall: clamp(1.35rem, 1.25rem + 0.25vw, 1.60rem);
--lineheight-4xsmall: clamp(1.00rem, 1.00rem + 0.25vw, 1.50rem);
--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(16px, 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-rosa         : #f06292;
--col-rosa-pastel  : #f0d8e0;
--col-rojo         : #d32f2f;
--col-rojo-oscuro  : #b71c1c;
--col-coral        : #ff6f61;
--col-salmon       : #fa8072;
--col-terracota     : #c96b4b;
--col-marron       : #6b3b2a;
--col-pardo        : #8b5e3c;
--col-greige       : #aa9280;
--col-naranja      : #ff812e;
--col-anaranjado   : #ffb422;
--col-calabaza     : #f57c00;
--col-ambar        : #ffc107;
--col-mostaza      : #ffdb00;
--col-amarillo     : #ffdd00;
--col-dorado       : #d4a017;
--col-arena        : #d9c3a5;
--col-beige        : #e8d8c3;
--col-crema        : #f3ede6;
--col-pino         : #1c381a;
--col-oliva        : #808000;
--col-salvia       : #6f7467;
--col-limon        : #91f369;
--col-manzana      : #74b52e;
--col-verde        : #00a651;
--col-verde-bosque : #228b22;
--col-esmeralda    : #029274;
--col-menta        : #98e2c6;
--col-jade         : #00a88f;
--col-turquesa     : #31d4c5;
--col-aguamarina   : #7fdbda;
--col-celeste      : #54bcf6;
--col-cielo        : #087cbf;
--col-azul         : #064878;
--col-azul-claro   : #64b5f6;
--col-azul-marino  : #183153;
--col-petroleo     : #006d77;
--col-cian         : #00bcd4;
--col-indigo       : #3f3f7f;
--col-purpura      : #a142b3;
--col-violeta      : #7445be;
--col-lavanda      : #b39ddb;
--col-lila         : #ce93d8;
--col-noche       : #1a2630 ;
--col-azulad      : #2f475e ;
--col-metal       : #4a6585 ;
--col-acero       : #788ca3 ;
--col-aluminio    : #a5b2c2 ;
--col-plateado    : #d1d8e0 ;
--col-humo        : #e7ebee ;
--col-marfil      : #fffaf0;
--col-fuente      : #292321 ;
--col-oscuro      : #262b2f ;
--col-grisoscuro  : #404449 ;
--col-grismedio   : #5c6368 ;
--col-grisclaro   : #d9d9e3 ;
--col-gristenue   : #ebebed ;
--col-blanco      : #ffffff ;
--col-negro05     : #f7f7f7 ;
--col-negro10     : #e7e7e7 ;
--col-negro20     : #cfd0d0 ;
--col-negro30     : #b7b8b9 ;
--col-negro40     : #9fa1a2 ;
--col-negro50     : #87898b ;
--col-negro60     : #6f7274 ;
--col-negro70     : #575a5d ;
--col-negro80     : #3e4246 ;
--col-negro90     : #262b2f ;
--col-negro100    : #000000 ;
--svg-magenta      : invert(48%) sepia(50%) saturate(3769%) hue-rotate(298deg) brightness(108%) contrast(74%);
--svg-fucsia       : invert(34%) sepia(59%) saturate(3803%) hue-rotate(312deg) brightness(97%) contrast(56%);
--svg-rosa         : invert(75%) sepia(6%) saturate(2396%) hue-rotate(1deg) brightness(97%) contrast(76%);
--svg-rosa-pastel  : invert(84%) sepia(11%) saturate(179%) hue-rotate(78deg) brightness(142%) contrast(67%);
--svg-rojo         : invert(32%) sepia(59%) saturate(4363%) hue-rotate(323deg) brightness(92%) contrast(64%);
--svg-rojo-oscuro  : invert(41%) sepia(75%) saturate(1539%) hue-rotate(5deg) brightness(62%) contrast(178%);
--svg-coral        : invert(33%) sepia(34%) saturate(1225%) hue-rotate(315deg) brightness(176%) contrast(100%);
--svg-salmon       : invert(73%) sepia(24%) saturate(781%) hue-rotate(0deg) brightness(96%) contrast(86%);
--svg-terracota    : invert(65%) sepia(28%) saturate(807%) hue-rotate(0deg) brightness(82%) contrast(92%);
--svg-marron       : invert(49%) sepia(13%) saturate(1308%) hue-rotate(0deg) brightness(62%) contrast(107%);
--svg-pardo        : invert(56%) sepia(23%) saturate(902%) hue-rotate(7deg) brightness(71%) contrast(87%);
--svg-greige       : invert(67%) sepia(38%) saturate(669%) hue-rotate(210deg) brightness(141%) contrast(17%);
--svg-naranja      : invert(53%) sepia(8%) saturate(5203%) hue-rotate(334deg) brightness(124%) contrast(86%);
--svg-anaranjado   : invert(69%) sepia(17%) saturate(1257%) hue-rotate(0deg) brightness(89%) contrast(164%);
--svg-calabaza     : invert(63%) sepia(13%) saturate(3017%) hue-rotate(6deg) brightness(83%) contrast(103%);
--svg-ambar        : invert(70%) sepia(20%) saturate(1248%) hue-rotate(6deg) brightness(91%) contrast(165%);
--svg-mostaza      : invert(75%) sepia(37%) saturate(1143%) hue-rotate(26deg) brightness(94%) contrast(134%);
--svg-amarillo     : invert(77%) sepia(38%) saturate(1129%) hue-rotate(26deg) brightness(105%) contrast(134%);
--svg-dorado       : invert(68%) sepia(33%) saturate(1113%) hue-rotate(20deg) brightness(85%) contrast(135%);
--svg-arena        : invert(79%) sepia(19%) saturate(366%) hue-rotate(1deg) brightness(99%) contrast(87%);
--svg-beige        : invert(81%) sepia(24%) saturate(247%) hue-rotate(47deg) brightness(125%) contrast(75%);
--svg-crema        : invert(83%) sepia(4%) saturate(57%) hue-rotate(188deg) brightness(127%) contrast(85%);
--svg-pino         : invert(41%) sepia(13%) saturate(1039%) hue-rotate(68deg) brightness(57%) contrast(121%);
--svg-oliva        : invert(50%) sepia(21%) saturate(9985%) hue-rotate(21deg) brightness(65%) contrast(100%);
--svg-salvia       : invert(59%) sepia(9%) saturate(404%) hue-rotate(181deg) brightness(77%) contrast(85%);
--svg-limon        : invert(79%) sepia(32%) saturate(660%) hue-rotate(58deg) brightness(99%) contrast(98%);
--svg-manzana      : invert(68%) sepia(28%) saturate(948%) hue-rotate(46deg) brightness(86%) contrast(97%);
--svg-verde        : invert(53%) sepia(51%) saturate(688%) hue-rotate(100deg) brightness(82%) contrast(120%);
--svg-verde-bosque : invert(46%) sepia(33%) saturate(2886%) hue-rotate(97deg) brightness(62%) contrast(76%);
--svg-esmeralda    : invert(50%) sepia(39%) saturate(1011%) hue-rotate(146deg) brightness(68%) contrast(87%);
--svg-menta        : invert(79%) sepia(28%) saturate(339%) hue-rotate(105deg) brightness(98%) contrast(99%);
--svg-jade         : invert(64%) sepia(30%) saturate(1323%) hue-rotate(116deg) brightness(83%) contrast(86%);
--svg-turquesa     : invert(77%) sepia(45%) saturate(1939%) hue-rotate(164deg) brightness(94%) contrast(60%);
--svg-aguamarina   : invert(77%) sepia(31%) saturate(425%) hue-rotate(131deg) brightness(96%) contrast(97%);
--svg-celeste      : invert(70%) sepia(31%) saturate(898%) hue-rotate(165deg) brightness(92%) contrast(93%);
--svg-cielo        : invert(58%) sepia(34%) saturate(1236%) hue-rotate(158deg) brightness(66%) contrast(103%);
--svg-azul         : invert(45%) sepia(12%) saturate(3037%) hue-rotate(173deg) brightness(57%) contrast(100%);
--svg-azul-claro   : invert(68%) sepia(22%) saturate(1246%) hue-rotate(179deg) brightness(91%) contrast(120%);
--svg-azul-marino  : invert(36%) sepia(26%) saturate(1057%) hue-rotate(175deg) brightness(52%) contrast(105%);
--svg-petroleo     : invert(50%) sepia(18%) saturate(705%) hue-rotate(184deg) brightness(66%) contrast(77%);
--svg-cian         : invert(69%) sepia(50%) saturate(1789%) hue-rotate(173deg) brightness(88%) contrast(81%);
--svg-indigo       : invert(42%) sepia(23%) saturate(1474%) hue-rotate(201deg) brightness(57%) contrast(94%);
--svg-purpura      : invert(35%) sepia(49%) saturate(1062%) hue-rotate(244deg) brightness(89%) contrast(84%);
--svg-violeta      : invert(55%) sepia(24%) saturate(736%) hue-rotate(258deg) brightness(70%) contrast(78%);
--svg-lavanda      : invert(72%) sepia(24%) saturate(528%) hue-rotate(220deg) brightness(90%) contrast(82%);
--svg-lila         : invert(59%) sepia(14%) saturate(1760%) hue-rotate(238deg) brightness(124%) contrast(66%);
--svg-noche        : invert(41%) sepia(8%) saturate(773%) hue-rotate(169deg) brightness(57%) contrast(136%);
--svg-azulad       : invert(44%) sepia(27%) saturate(492%) hue-rotate(168deg) brightness(63%) contrast(114%);
--svg-metal        : invert(51%) sepia(18%) saturate(926%) hue-rotate(171deg) brightness(70%) contrast(90%);
--svg-acero        : invert(54%) sepia(43%) saturate(957%) hue-rotate(183deg) brightness(113%) contrast(30%);
--svg-aluminio     : invert(74%) sepia(24%) saturate(184%) hue-rotate(173deg) brightness(92%) contrast(90%);
--svg-plateado     : invert(78%) sepia(29%) saturate(936%) hue-rotate(184deg) brightness(162%) contrast(73%);
--svg-humo         : invert(79%) sepia(30%) saturate(937%) hue-rotate(184deg) brightness(165%) contrast(89%);
--svg-marfil       : invert(82%) sepia(36%) saturate(129%) hue-rotate(209deg) brightness(124%) contrast(95%);
--svg-fuente       : invert(34%) sepia(30%) saturate(387%) hue-rotate(90deg) brightness(54%) contrast(109%);
--svg-oscuro       : invert(36%) sepia(25%) saturate(135%) hue-rotate(167deg) brightness(55%) contrast(115%);
--svg-grisoscuro   : invert(42%) sepia(19%) saturate(170%) hue-rotate(189deg) brightness(59%) contrast(97%);
--svg-grismedio    : invert(50%) sepia(20%) saturate(208%) hue-rotate(158deg) brightness(66%) contrast(75%);
--svg-grisclaro    : invert(78%) sepia(29%) saturate(936%) hue-rotate(184deg) brightness(162%) contrast(75%);
--svg-gristenue    : invert(80%) sepia(29%) saturate(936%) hue-rotate(184deg) brightness(166%) contrast(90%);
--svg-blanco       : invert(100%) saturate(0%) brightness(166%);
--svg-negro05      : invert(83%) sepia(28%) saturate(210%) hue-rotate(69deg) brightness(117%) contrast(116%);
--svg-negro10      : invert(80%) sepia(29%) saturate(936%) hue-rotate(184deg) brightness(166%) contrast(83%);
--svg-negro20      : invert(80%) sepia(4%) saturate(118%) hue-rotate(90deg) brightness(101%) contrast(102%);
--svg-negro30      : invert(78%) sepia(27%) saturate(935%) hue-rotate(184deg) brightness(162%) contrast(45%);
--svg-negro40      : invert(74%) sepia(25%) saturate(935%) hue-rotate(185deg) brightness(153%) contrast(28%);
--svg-negro50      : invert(63%) sepia(28%) saturate(32%) hue-rotate(167deg) brightness(82%) contrast(78%);
--svg-negro60      : invert(39%) sepia(51%) saturate(969%) hue-rotate(182deg) brightness(92%) contrast(10%);
--svg-negro70      : invert(52%) sepia(30%) saturate(342%) hue-rotate(90deg) brightness(72%) contrast(93%);
--svg-negro80      : invert(42%) sepia(30%) saturate(365%) hue-rotate(90deg) brightness(62%) contrast(98%);
--svg-negro90      : invert(36%) sepia(25%) saturate(135%) hue-rotate(167deg) brightness(55%) contrast(115%);
--svg-negro100     : brightness(0%);
--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 ;
--filter-invert10: invert(10%);
--filter-invert20: invert(20%);
--filter-invert30: invert(30%);
--filter-invert40: invert(40%);
--filter-invert50: invert(60%);
--filter-invert60: invert(70%);
--filter-invert70: invert(80%);
--filter-invert80: invert(90%);
--filter-invert90: invert(100%);
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
padding: 0;
}
html{
color: var(--col-fuente);
scroll-behavior:smooth;
}
body {
font-family: var(--font-serif);
display: flex;
min-height: 100vh;
flex-direction: column;
}
main{
padding: var(--espacio-large) 0;
flex: 1 0 auto;
overflow: hidden;
}
h1,h2,h3,h4,strong,p,h5,small,h6{
font-weight: 400;
display: block;
}
.titulo {
font-size: var(--fontsize-4xlarge);
line-height: var(--lineheight-4xlarge);
}
.subtitulo {
font-size: var(--fontsize-3xlarge)!important;
line-height: var(--lineheight-3xlarge);
}
h1 {
font-size: var(--fontsize-2xlarge);
line-height: var(--lineheight-2xlarge);
}
h2 {
font-size: var(--fontsize-xlarge);
line-height: var(--lineheight-xlarge);
}
h3 {
font-size: var(--fontsize-large);
line-height: var(--lineheight-large);
}
h4 {
font-size: var(--fontsize-medium);
line-height: var(--lineheight-medium);
}
strong {
font-size: var(--fontsize-small);
line-height: var(--lineheight-small);
}
p {
font-size: var(--fontsize-xsmall);
line-height: var(--lineheight-xsmall);
font-family: var(--font-san-serif);
font-weight: 300;
}
h5 {
font-size: var(--fontsize-2xsmall);
line-height: var(--lineheight-2xsmall);
}
small {
font-size: var(--fontsize-3xsmall);
line-height: var(--lineheight-3xsmall);
}
h6 {
font-size: var(--fontsize-4xsmall);
line-height: var(--lineheight-4xsmall);
}
time{
font-size: var(--fontsize-4xsmall);
color: var(--col-negro40);
}
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;
}
img {
max-width: 100%;
width: 100%;
height: auto;
vertical-align: middle;
display: inline-block;
}
span{
display: inline-block;
}
/* ///////////////// LISTA ///////////////// */
::marker {
font-size: 1.2rem;
color:var(--col-negro60);
}
ul{
display: grid;
font-size: var(--fontsize-xsmall);
line-height: var(--lineheight-xsmall);
padding: 0 var(--espacio-large);
margin-bottom: var(--espacio-xlarge);
font-family: var(--font-san-serif);
}
ol{
display: grid;
gap:var(--espacio-xlarge);
font-size: var(--fontsize-xsmall);
line-height: var(--lineheight-xsmall);
padding: 0 var(--espacio-large);
margin-bottom: var(--espacio-xlarge);
}
.reset{
padding: 0!important;
list-style: none;
}
.reset li::before {
content: "";
position: absolute;
top: -20px;
width: 100%!important;
right: 0;
}

.lista {
display: grid;
gap:var(--espacio-3xsmall);
font-size: var(--fontsize-xsmall);
line-height: var(--lineheight-xsmall);
margin-bottom: var(--espacio-xlarge);
padding: 0 var(--espacio-xsmall);
margin: var(--espacio-xsmall) 0;
}
.lista li {
position: relative;
list-style-position: outside;
}
.lista li::before {
content: "";
position: absolute;
top: -20px;
width: calc(100% + var(--espacio-large));
right: 0;
}
.lista li:first-child::before {
display: none;
}
.linea{
display: grid;
gap:var(--espacio-small);
font-size: var(--fontsize-xsmall);
line-height: var(--lineheight-xsmall);
padding: 0 var(--espacio-xsmall);
margin: var(--espacio-xsmall) 0;
}
.linea li {
position: relative;
list-style-position: outside;
}
.linea li::before {
content: "";
position: absolute;
top: -10px;
width: calc(100% + var(--espacio-small));
right: 0;
height: 1px;
background: var(--col-negro20);
}
.linea li:first-child::before {
display: none;
}
/* ///////////////// LINK ///////////////// */
a {
color:var(--col-fuente);
text-decoration: none;
}
a:hover {
color:var(--col-grismedio);
text-decoration: none;
}
a:link {
color:var(--col-grismedio);
text-decoration: none;
}
a:active {
color:var(--col-grisclaro);
text-decoration: none;
}
a:focus {
color:var(--col-grisclaro);
text-decoration: none;
}
article a {
color: var(--col-cielo);
text-decoration: none;
}
article a:hover {
color: var(--col-cielo);
text-decoration: underline;
}
article a:link {
color: var(--col-cielo);
}
article a:active {
color: var(--col-cielo);
}
article a:focus {
color:var(--col-azul);
}
ul li a {
color: var(--col-cielo);
text-decoration: none;
}
ul li a:hover {
color: var(--col-cielo);
text-decoration: underline;
}
ul li a:link {
color: var(--col-cielo);
}
ul li a:active {
color: var(--col-cielo);
}
ul li a:focus {
color:var(--col-azul);
}
footer a {
color: var(--col-fuente);
text-decoration: none;
}
footer a:hover {
color: var(--col-negro70)!important;
text-decoration: underline;
}
footer a:link {
color: var(--col-fuente);
}
footer a:active {
color: var(--col-fuente);
}
footer a:focus {
color:var(--col-fuente);
}
a.link-celeste {
color: var(--col-cielo);
text-decoration: none;
}
a:hover.link-celeste {
color: var(--col-cielo);
text-decoration: underline;
}
a:link.link-celeste {
color: var(--col-cielo);
}
a:active.link-celeste {
color: var(--col-cielo);
}
a:focus.link-celeste {
color:var(--col-azul);
}
a.link-fuente {
color:var(--col-fuente);
text-decoration: underline;
}
a:hover.link-fuente {
color:var(--col-grismedio);
text-decoration: underline;
}
a:link.link-fuente {
color:var(--col-grismedio);
text-decoration: underline;
}
a:active.link-fuente {
color:var(--col-grismedio);
text-decoration: underline;
}
a:focus.link-fuente {
color:var(--col-grismedio);
text-decoration: underline;
}
a.link-blanco  {
color: var(--col-blanco);
text-decoration: underline;
}
a:hover.link-blanco  {
color: var(--col-grisclaro);
text-decoration: underline;
}
a:link.link-blanco  {
color: var(--col-grisclaro);
}
a:active.link-blanco  {
color: var(--col-grisclaro);
}
a:focus.link-blanco  {
color:var(--col-grismedio);
}
a.reset {
color:inherit;
text-decoration: none;
}
a:hover.reset {
color:inherit;
text-decoration: none;
}
a:link.reset {
color:inherit;
text-decoration: none;
}
a:active.reset {
color:inherit;
text-decoration: none;
}
a:focus.reset {
color:inherit;
text-decoration: none;
}
/* ///////////////// BUTTON ///////////////// */
.button{
box-shadow: inset 3px 3px 0 rgba(255,255,255,.20), inset -3px -3px 0 rgba(0,0,0,.30);
padding: var(--espacio-xsmall) var(--espacio-large);
font-size: var(--fontsize-4xsmall);
box-sizing: border-box;
display: inline-block;
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
transition: all 0.3s ease;
cursor: pointer;
font-family:Arial, Helvetica, sans-serif;
border-radius: var(--borderradius-2xsmall);
color: var(--col-blanco);
}
.button:hover {
box-shadow: inset 3px 3px 0 rgba(255,255,255,.20), inset -3px -3px 0 rgba(0,0,0,.30);
filter:brightness(0.9);
color: var(--col-blanco);
-webkit-user-select: none; /* Safari */
-moz-user-select: none;    /* Firefox */
-ms-user-select: none;     /* Internet Explorer/Edge */
user-select: none;
}
.button:active {
box-shadow: inset 3px 3px 0 rgba(0,0,0,.35), inset -3px -3px 0 rgba(255,255,255,.0);
filter:brightness(0.8);
color: var(--col-blanco);
transform: translateY(1px);
}
.button.line {
--button-line-color: var(--col-fuente);
background: transparent !important;
border: 1px solid var(--button-line-color);
box-shadow: none;
color: var(--button-line-color);
}
.button.line:hover {
background: color-mix(in srgb, var(--button-line-color) 8%, transparent) !important;
border-color: color-mix(in srgb, var(--button-line-color) 65%, var(--col-blanco));
box-shadow: none;
filter: none;
color: color-mix(in srgb, var(--button-line-color) 65%, var(--col-blanco));
}
.button.line:active {
background: color-mix(in srgb, var(--button-line-color) 14%, transparent) !important;
border-color: var(--button-line-color);
box-shadow: inset 2px 2px 1px rgba(0,0,0,.25);
filter: none;
color: var(--button-line-color);
transform: translateY(1px);
}
/* ///////////////// COLORES LINE ///////////////// */
.button.line.magenta       { --button-line-color: var(--col-magenta); }
.button.line.fucsia        { --button-line-color: var(--col-fucsia); }
.button.line.rosa          { --button-line-color: var(--col-rosa); }
.button.line.rosa-pastel   { --button-line-color: var(--col-rosa-pastel); }
.button.line.rojo          { --button-line-color: var(--col-rojo); }
.button.line.rojo-oscuro   { --button-line-color: var(--col-rojo-oscuro); }
.button.line.coral         { --button-line-color: var(--col-coral); }
.button.line.salmon        { --button-line-color: var(--col-salmon); }
.button.line.terracota     { --button-line-color: var(--col-terracota); }
.button.line.marron        { --button-line-color: var(--col-marron); }
.button.line.pardo         { --button-line-color: var(--col-pardo); }
.button.line.greige        { --button-line-color: var(--col-greige); }
.button.line.naranja       { --button-line-color: var(--col-naranja); }
.button.line.anaranjado    { --button-line-color: var(--col-anaranjado); }
.button.line.calabaza      { --button-line-color: var(--col-calabaza); }
.button.line.ambar         { --button-line-color: var(--col-ambar); }
.button.line.mostaza       { --button-line-color: var(--col-mostaza); }
.button.line.amarillo      { --button-line-color: var(--col-amarillo); }
.button.line.dorado        { --button-line-color: var(--col-dorado); }
.button.line.arena         { --button-line-color: var(--col-arena); }
.button.line.beige         { --button-line-color: var(--col-beige); }
.button.line.crema         { --button-line-color: var(--col-crema); }
.button.line.pino          { --button-line-color: var(--col-pino); }
.button.line.oliva         { --button-line-color: var(--col-oliva); }
.button.line.salvia        { --button-line-color: var(--col-salvia); }
.button.line.limon         { --button-line-color: var(--col-limon); }
.button.line.manzana       { --button-line-color: var(--col-manzana); }
.button.line.verde         { --button-line-color: var(--col-verde); }
.button.line.verde-bosque  { --button-line-color: var(--col-verde-bosque); }
.button.line.esmeralda     { --button-line-color: var(--col-esmeralda); }
.button.line.menta         { --button-line-color: var(--col-menta); }
.button.line.jade          { --button-line-color: var(--col-jade); }
.button.line.turquesa      { --button-line-color: var(--col-turquesa); }
.button.line.aguamarina    { --button-line-color: var(--col-aguamarina); }
.button.line.celeste       { --button-line-color: var(--col-celeste); }
.button.line.cielo         { --button-line-color: var(--col-cielo); }
.button.line.azul          { --button-line-color: var(--col-azul); }
.button.line.azul-claro    { --button-line-color: var(--col-azul-claro); }
.button.line.azul-marino   { --button-line-color: var(--col-azul-marino); }
.button.line.petroleo      { --button-line-color: var(--col-petroleo); }
.button.line.cian          { --button-line-color: var(--col-cian); }
.button.line.indigo        { --button-line-color: var(--col-indigo); }
.button.line.purpura       { --button-line-color: var(--col-purpura); }
.button.line.violeta       { --button-line-color: var(--col-violeta); }
.button.line.lavanda       { --button-line-color: var(--col-lavanda); }
.button.line.lila          { --button-line-color: var(--col-lila); }
.button.line.noche         { --button-line-color: var(--col-noche); }
.button.line.azulad        { --button-line-color: var(--col-azulad); }
.button.line.metal         { --button-line-color: var(--col-metal); }
.button.line.acero         { --button-line-color: var(--col-acero); }
.button.line.aluminio      { --button-line-color: var(--col-aluminio); }
.button.line.plateado      { --button-line-color: var(--col-plateado); }
.button.line.humo          { --button-line-color: var(--col-humo); }
.button.line.marfil        { --button-line-color: var(--col-marfil); }
.button.line.fuente        { --button-line-color: var(--col-fuente); }
.button.line.oscuro        { --button-line-color: var(--col-oscuro); }
.button.line.grisoscuro    { --button-line-color: var(--col-grisoscuro); }
.button.line.grismedio     { --button-line-color: var(--col-grismedio); }
.button.line.grisclaro     { --button-line-color: var(--col-grisclaro); }
.button.line.gristenue     { --button-line-color: var(--col-gristenue); }
.button.line.blanco        { --button-line-color: var(--col-blanco); }
.button.line.negro05       { --button-line-color: var(--col-negro05); }
.button.line.negro10       { --button-line-color: var(--col-negro10); }
.button.line.negro20       { --button-line-color: var(--col-negro20); }
.button.line.negro30       { --button-line-color: var(--col-negro30); }
.button.line.negro40       { --button-line-color: var(--col-negro40); }
.button.line.negro50       { --button-line-color: var(--col-negro50); }
.button.line.negro60       { --button-line-color: var(--col-negro60); }
.button.line.negro70       { --button-line-color: var(--col-negro70); }
.button.line.negro80       { --button-line-color: var(--col-negro80); }
.button.line.negro90       { --button-line-color: var(--col-negro90); }
.button.line.negro100      { --button-line-color: var(--col-negro100); }
/* ///////////////// COLORES BACK ///////////////// */
.magenta       { background-color: var(--col-magenta); }
.fucsia        { background-color: var(--col-fucsia); }
.rosa          { background-color: var(--col-rosa); }
.rosa-pastel   { background-color: var(--col-rosa-pastel); }
.rojo          { background-color: var(--col-rojo); }
.rojo-oscuro   { background-color: var(--col-rojo-oscuro); }
.coral         { background-color: var(--col-coral); }
.salmon        { background-color: var(--col-salmon); }
.terracota     { background-color: var(--col-terracota); }
.marron        { background-color: var(--col-marron); }
.pardo         { background-color: var(--col-pardo); }
.greige        { background-color: var(--col-greige); }
.naranja       { background-color: var(--col-naranja); }
.anaranjado    { background-color: var(--col-anaranjado); }
.calabaza      { background-color: var(--col-calabaza); }
.ambar         { background-color: var(--col-ambar); }
.mostaza       { background-color: var(--col-mostaza); }
.amarillo      { background-color: var(--col-amarillo); }
.dorado        { background-color: var(--col-dorado); }
.arena         { background-color: var(--col-arena); }
.beige         { background-color: var(--col-beige); }
.crema         { background-color: var(--col-crema); }
.pino          { background-color: var(--col-pino); }
.oliva         { background-color: var(--col-oliva); }
.salvia        { background-color: var(--col-salvia); }
.limon         { background-color: var(--col-limon); }
.manzana       { background-color: var(--col-manzana); }
.verde         { background-color: var(--col-verde); }
.verde-bosque  { background-color: var(--col-verde-bosque); }
.esmeralda     { background-color: var(--col-esmeralda); }
.menta         { background-color: var(--col-menta); }
.jade          { background-color: var(--col-jade); }
.turquesa      { background-color: var(--col-turquesa); }
.aguamarina    { background-color: var(--col-aguamarina); }
.celeste       { background-color: var(--col-celeste); }
.cielo         { background-color: var(--col-cielo); }
.azul          { background-color: var(--col-azul); }
.azul-claro    { background-color: var(--col-azul-claro); }
.azul-marino   { background-color: var(--col-azul-marino); }
.petroleo      { background-color: var(--col-petroleo); }
.cian          { background-color: var(--col-cian); }
.indigo        { background-color: var(--col-indigo); }
.purpura       { background-color: var(--col-purpura); }
.violeta       { background-color: var(--col-violeta); }
.lavanda       { background-color: var(--col-lavanda); }
.lila          { background-color: var(--col-lila); }
.noche         { background-color: var(--col-noche); }
.azulad        { background-color: var(--col-azulad); }
.metal         { background-color: var(--col-metal); }
.acero         { background-color: var(--col-acero); }
.aluminio      { background-color: var(--col-aluminio); }
.plateado      { background-color: var(--col-plateado); }
.humo          { background-color: var(--col-humo); }
.marfil        { background-color: var(--col-marfil); }
.fuente        { background-color: var(--col-fuente); }
.oscuro        { background-color: var(--col-oscuro); }
.grisoscuro    { background-color: var(--col-grisoscuro); }
.grismedio     { background-color: var(--col-grismedio); }
.grisclaro     { background-color: var(--col-grisclaro); }
.gristenue     { background-color: var(--col-gristenue); }
.blanco        { background-color: var(--col-blanco); }
.negro05       { background-color: var(--col-negro05); }
.negro10       { background-color: var(--col-negro10); }
.negro20       { background-color: var(--col-negro20); }
.negro30       { background-color: var(--col-negro30); }
.negro40       { background-color: var(--col-negro40); }
.negro50       { background-color: var(--col-negro50); }
.negro60       { background-color: var(--col-negro60); }
.negro70       { background-color: var(--col-negro70); }
.negro80       { background-color: var(--col-negro80); }
.negro90       { background-color: var(--col-negro90); }
.negro100      { background-color: var(--col-negro100); }
/* ///////////////// COLORES TEXT ///////////////// */
.text-magenta       { color: var(--col-magenta); }
.text-fucsia        { color: var(--col-fucsia); }
.text-rosa          { color: var(--col-rosa); }
.text-rosa-pastel   { color: var(--col-rosa-pastel); }
.text-rojo          { color: var(--col-rojo); }
.text-rojo-oscuro   { color: var(--col-rojo-oscuro); }
.text-coral         { color: var(--col-coral); }
.text-salmon        { color: var(--col-salmon); }
.text-terracota     { color: var(--col-terracota); }
.text-marron        { color: var(--col-marron); }
.text-pardo         { color: var(--col-pardo); }
.text-greige        { color: var(--col-greige); }
.text-naranja       { color: var(--col-naranja); }
.text-anaranjado    { color: var(--col-anaranjado); }
.text-calabaza      { color: var(--col-calabaza); }
.text-ambar         { color: var(--col-ambar); }
.text-mostaza       { color: var(--col-mostaza); }
.text-amarillo      { color: var(--col-amarillo); }
.text-dorado        { color: var(--col-dorado); }
.text-arena         { color: var(--col-arena); }
.text-beige         { color: var(--col-beige); }
.text-crema         { color: var(--col-crema); }
.text-pino          { color: var(--col-pino); }
.text-oliva         { color: var(--col-oliva); }
.text-salvia        { color: var(--col-salvia); }
.text-limon         { color: var(--col-limon); }
.text-manzana       { color: var(--col-manzana); }
.text-verde         { color: var(--col-verde); }
.text-verde-bosque  { color: var(--col-verde-bosque); }
.text-esmeralda     { color: var(--col-esmeralda); }
.text-menta         { color: var(--col-menta); }
.text-jade          { color: var(--col-jade); }
.text-turquesa      { color: var(--col-turquesa); }
.text-aguamarina    { color: var(--col-aguamarina); }
.text-celeste       { color: var(--col-celeste); }
.text-cielo         { color: var(--col-cielo); }
.text-azul          { color: var(--col-azul); }
.text-azul-claro    { color: var(--col-azul-claro); }
.text-azul-marino   { color: var(--col-azul-marino); }
.text-petroleo      { color: var(--col-petroleo); }
.text-cian          { color: var(--col-cian); }
.text-indigo        { color: var(--col-indigo); }
.text-purpura       { color: var(--col-purpura); }
.text-violeta       { color: var(--col-violeta); }
.text-lavanda       { color: var(--col-lavanda); }
.text-lila          { color: var(--col-lila); }
.text-noche         { color: var(--col-noche); }
.text-azulad        { color: var(--col-azulad); }
.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-marfil        { color: var(--col-marfil); }
.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); }
.text-blanco        { color: var(--col-blanco); }
.text-negro05       { color: var(--col-negro05); }
.text-negro10       { color: var(--col-negro10); }
.text-negro20       { color: var(--col-negro20); }
.text-negro30       { color: var(--col-negro30); }
.text-negro40       { color: var(--col-negro40); }
.text-negro50       { color: var(--col-negro50); }
.text-negro60       { color: var(--col-negro60); }
.text-negro70       { color: var(--col-negro70); }
.text-negro80       { color: var(--col-negro80); }
.text-negro90       { color: var(--col-negro90); }
.text-negro100      { color: var(--col-negro100); }
/* ///////////////// COLORES SVG ///////////////// */
.svg-magenta       { filter: var(--svg-magenta); }
.svg-fucsia        { filter: var(--svg-fucsia); }
.svg-rosa          { filter: var(--svg-rosa); }
.svg-rosa-pastel   { filter: var(--svg-rosa-pastel); }
.svg-rojo          { filter: var(--svg-rojo); }
.svg-rojo-oscuro   { filter: var(--svg-rojo-oscuro); }
.svg-coral         { filter: var(--svg-coral); }
.svg-salmon        { filter: var(--svg-salmon); }
.svg-terracota     { filter: var(--svg-terracota); }
.svg-marron        { filter: var(--svg-marron); }
.svg-pardo         { filter: var(--svg-pardo); }
.svg-greige        { filter: var(--svg-greige); }
.svg-naranja       { filter: var(--svg-naranja); }
.svg-anaranjado    { filter: var(--svg-anaranjado); }
.svg-calabaza      { filter: var(--svg-calabaza); }
.svg-ambar         { filter: var(--svg-ambar); }
.svg-mostaza       { filter: var(--svg-mostaza); }
.svg-amarillo      { filter: var(--svg-amarillo); }
.svg-dorado        { filter: var(--svg-dorado); }
.svg-arena         { filter: var(--svg-arena); }
.svg-beige         { filter: var(--svg-beige); }
.svg-crema         { filter: var(--svg-crema); }
.svg-pino          { filter: var(--svg-pino); }
.svg-oliva         { filter: var(--svg-oliva); }
.svg-salvia        { filter: var(--svg-salvia); }
.svg-limon         { filter: var(--svg-limon); }
.svg-manzana       { filter: var(--svg-manzana); }
.svg-verde         { filter: var(--svg-verde); }
.svg-verde-bosque  { filter: var(--svg-verde-bosque); }
.svg-esmeralda     { filter: var(--svg-esmeralda); }
.svg-menta         { filter: var(--svg-menta); }
.svg-jade          { filter: var(--svg-jade); }
.svg-turquesa      { filter: var(--svg-turquesa); }
.svg-aguamarina    { filter: var(--svg-aguamarina); }
.svg-celeste       { filter: var(--svg-celeste); }
.svg-cielo         { filter: var(--svg-cielo); }
.svg-azul          { filter: var(--svg-azul); }
.svg-azul-claro    { filter: var(--svg-azul-claro); }
.svg-azul-marino   { filter: var(--svg-azul-marino); }
.svg-petroleo      { filter: var(--svg-petroleo); }
.svg-cian          { filter: var(--svg-cian); }
.svg-indigo        { filter: var(--svg-indigo); }
.svg-purpura       { filter: var(--svg-purpura); }
.svg-violeta       { filter: var(--svg-violeta); }
.svg-lavanda       { filter: var(--svg-lavanda); }
.svg-lila          { filter: var(--svg-lila); }
.svg-noche         { filter: var(--svg-noche); }
.svg-azulad        { filter: var(--svg-azulad); }
.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-marfil        { filter: var(--svg-marfil); }
.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); }
.svg-blanco        { filter: var(--svg-blanco); }
.svg-negro05       { filter: var(--svg-negro05); }
.svg-negro10       { filter: var(--svg-negro10); }
.svg-negro20       { filter: var(--svg-negro20); }
.svg-negro30       { filter: var(--svg-negro30); }
.svg-negro40       { filter: var(--svg-negro40); }
.svg-negro50       { filter: var(--svg-negro50); }
.svg-negro60       { filter: var(--svg-negro60); }
.svg-negro70       { filter: var(--svg-negro70); }
.svg-negro80       { filter: var(--svg-negro80); }
.svg-negro90       { filter: var(--svg-negro90); }
.svg-negro100      { filter: var(--svg-negro100); }
/* ///////////////// RESET ///////////////// */
.wd-full,.fullwidth { width: 100%; }
.wd-auto    { width: auto; }
.wd-inherit { width: inherit; }
.hg-auto    { height: auto; }
.hg-inherit { height: inherit; }
.hg-full    { height: 100%; }
.dis-block  { display: block; }
.dis-inline { display: inline; }
.dis-inlineblock  { display: inline-block; }
.dis-contents { display: contents; }
.dis-inherit  { display: inherit; }
.dis-flex,.flex { display: flex; }
.pos-absolute { position: absolute; }
.pos-relative { position: relative; }
.pos-fixed    { position: fixed; }
.pos-inherit  { position: inherit; }
.zx-1 { z-index: -1; }
.zx01 { z-index: 1; }
.zx02 { z-index: 2; }
.zx03 { z-index: 3; }
.zx04 { z-index: 4; }
.zx05 { z-index: 5; }
.zx06 { z-index: 6; }
.zx07 { z-index: 7; }
.zx08 { z-index: 8; }
.zx09 { z-index: 9; }
.zx10 { z-index: 10; }
.zx11 { z-index: 11; }
.zx12 { z-index: 12; }
.top  { top: 0; }
.bottom { bottom: 0; }
.left   { left: 0; }
.right  {right: 0; }
.no-display,.oculto { display:none; }
.no-over-hidden { overflow: visible; }
.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; }
.no-filter { filter: none; }
.no-background{ background:none; }
.no-borderbottom { border-bottom: none; }
.no-boxshadow {box-shadow:none; }
.no-textdecoration{ text-decoration: none; }
.no-textshadow{ text-shadow: none; }
.center       { text-align: center;}
.center-flex  { display: flex; justify-content: space-evenly; align-items: center; }
.centrado3    { display: flex; justify-content: center; align-items: center; align-content: center; }
.center-left  { display: flex; justify-content: flex-start; align-items: center; }
.center-v     { display: flex; justify-content: center; }
.center-h     { display: flex; align-items: center; align-content: center;  }
.br1-gris30 { border: 1px solid var(--col-negro30); }
.br1-balck  { border: 1px solid var(--col-negro100); }
.br1-white  { border: 1px solid var(--col-blanco); }
.br1-top    { border-top: 1px solid var(--col-negro30); }
.br1-left   { border-left: 1px solid var(--col-negro30); }
.br1-right  { border-right: 1px solid var(--col-negro30); }
.br1-bottom { border-bottom: 1px solid var(--col-negro30); }
.over-hidden { overflow: hidden; }
.border-box { box-sizing: border-box; }
.marginauto {margin: auto; }
.grilla { display: flex; flex-direction: row; flex-wrap: wrap; }
.cursor-pointer{cursor: pointer;}
.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);
}
/* ///////////// FIGURE IMG /////////////  */
figure {
height: 100%;
position: relative;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
margin: var(--espacio-2xlarge) 0;
}
figure i {
border-radius: var(--espacio-4xsmall);
color: var(--col-blanco);
font-size: var(--fontsize-2xlarge);
z-index: 1;
position: absolute;
top: 0;
right: 0;
padding: var(--espacio-small);
}
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 {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
background: var(--col-grisclaro);
display: block;
max-width: 100%;
border-radius: var(--borderradius-xsmall);
}
figure img:hover {
opacity: 0.9;
filter: alpha(opacity=50);
}
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;
top: 0;
width: 100%;
height: 100%;
font-size: var(--fontsize-small);
font-family: "Helvetica";
font-weight: 300;
line-height: 120px;
text-align: center;
}
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;
border-radius: 0 0 var(--borderradius-xsmall)   var(--borderradius-xsmall) ;
}
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.icono-foto {
display: flex;
align-items: center;
}
figure figcaption.icono-foto:before {
content: "\f030";
font-family: "Font Awesome 6 Free";
font-weight: 900;
margin-right:var(--ancho-2xsmall);
}
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%; }
/* ///////////// FIGURE GRID ///////////// */
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; }
/* //////////// FIGURE LEYENDA //////////// */
figure.leyenda {
position: initial;
display: contents;
/* display: initial; */
}
figure.leyenda:before {
padding-top: initial;
}
figure.leyenda img[alt]:after {
position: initial;
}
figure.leyenda img {
position: initial;
border-radius: 5px;
overflow: hidden;
}
figure.leyenda figcaption {
padding: var(--espacio-3xsmall) 0;
background: initial;
font-style: italic;
color: var(--col-fuente);
position: initial;
bottom: initial;
}
figure.leyenda.foto200:before { padding-top: initial; }
figure.leyenda.foto190:before { padding-top: initial; }
figure.leyenda.foto180:before { padding-top: initial; }
figure.leyenda.foto170:before { padding-top: initial; }
figure.leyenda.foto160:before { padding-top: initial; }
figure.leyenda.foto150:before { padding-top: initial; }
figure.leyenda.foto140:before { padding-top: initial; }
figure.leyenda.foto130:before { padding-top: initial; }
figure.leyenda.foto120:before { padding-top: initial; }
figure.leyenda.foto110:before { padding-top: initial; }
figure.leyenda.foto100:before { padding-top: initial; }
figure.leyenda.foto90:before { padding-top: initial; }
figure.leyenda.foto80:before { padding-top: initial; }
figure.leyenda.foto70:before { padding-top: initial; }
figure.leyenda.foto60:before { padding-top: initial; }
figure.leyenda.foto50:before { padding-top: initial; }
figure.leyenda.foto40:before { padding-top: initial; }
figure.leyenda.foto30:before { padding-top: initial; }
figure.leyenda.foto20:before { padding-top: initial; }
figure.leyenda.foto10:before { padding-top: initial; }
/* ///////////////// 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);}
.box-full     { max-width: 100% !important; width: 100% !important; margin: auto; display: block;}
.box-4xlarge  { max-width: 2560px !important; width: 100% !important; margin: auto; display: block;}
.box-3xlarge  { max-width: 1920px !important; width: 100% !important; margin: auto; display: block;}
.box-2xlarge  { max-width: 1600px !important; width: 100% !important; margin: auto; display: block;}
.box-xlarge   { max-width: 1366px !important; width: 100% !important; margin: auto; display: block;}
.box-large,.box { max-width: 1201px !important; width: 100% !important; margin: auto; display: block;}
.box-medium   { max-width: 993px !important; width: 100% !important; margin: auto; display: block;}
.box-small    { max-width: 801px !important; width: 100% !important; margin: auto; display: block;}
.box-xsmall   { max-width: 601px !important; width: 100% !important; margin: auto; display: block;}
.box-2xsmall  { max-width: 425px !important; width: 100% !important; margin: auto; display: block;}
.box-3xsmall  { max-width: 375px !important; width: 100% !important; margin: auto; display: block;}
.box-4xsmall  { max-width: 320px !important; width: 100% !important; margin: auto; display: block;}
/* ///////////////////////////////////// */
.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);height: auto;display: block; }
.logo-3xlarge { width: var(--logo-3xlarge);height: auto;display: block; }
.logo-2xlarge { width: var(--logo-2xlarge);height: auto;display: block; }
.logo-xlarge  { width: var(--logo-xlarge);height: auto;display: block; }
.logo-large   { width: var(--logo-large);height: auto;display: block; }
.logo-medium  { width: var(--logo-medium);height: auto;display: block; }
.logo-small   { width: var(--logo-small );height: auto;display: block; }
.logo-xsmall  { width: var(--logo-xsmall);height: auto;display: block; }
.logo-2xsmall { width: var(--logo-2xsmall);height: auto;display: block; }
.logo-3xsmall { width: var(--logo-3xsmall);height: auto;display: block; }
.logo-4xsmall { width: var(--logo-4xsmall);height: auto;display: block; }
/* ///////////////// WIDTH ///////////////// */
.width-4xlarge { width: var(--logo-4xlarge); }
.width-3xlarge { width: var(--logo-3xlarge); }
.width-2xlarge { width: var(--logo-2xlarge); }
.width-xlarge  { width: var(--logo-xlarge); }
.width-large   { width: var(--logo-large); }
.width-medium  { width: var(--logo-medium); }
.width-small   { width: var(--logo-small ); }
.width-xsmall  { width: var(--logo-xsmall); }
.width-2xsmall { width: var(--logo-2xsmall); }
.width-3xsmall { width: var(--logo-3xsmall); }
.width-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)!important;display:grid;align-items: start; }
.gap-3xlarge { gap: var(--espacio-3xlarge)!important;display:grid;align-items: start; }
.gap-2xlarge { gap: var(--espacio-2xlarge)!important;display:grid;align-items: start; }
.gap-xlarge  { gap: var(--espacio-xlarge)!important;display:grid;align-items: start; }
.gap-large   { gap: var(--espacio-large)!important;display:grid;align-items: start; }
.gap-medium  { gap: var(--espacio-medium)!important;display:grid;align-items: start; }
.gap-small   { gap: var(--espacio-small )!important;display:grid;align-items: start; }
.gap-xsmall  { gap: var(--espacio-xsmall)!important;display:grid;align-items: start; }
.gap-2xsmall { gap: var(--espacio-2xsmall)!important;display:grid;align-items: start; }
.gap-3xsmall { gap: var(--espacio-3xsmall)!important;display:grid;align-items: start; }
.gap-4xsmall { gap: var(--espacio-4xsmall)!important;display:grid;align-items: start; }
.gaprow-4xlarge { row-gap: var(--espacio-4xlarge);display:grid;align-items: start; }
.gaprow-3xlarge { row-gap: var(--espacio-3xlarge);display:grid;align-items: start; }
.gaprow-2xlarge { row-gap: var(--espacio-2xlarge);display:grid;align-items: start; }
.gaprow-xlarge  { row-gap: var(--espacio-xlarge);display:grid;align-items: start; }
.gaprow-large   { row-gap: var(--espacio-large);display:grid;align-items: start; }
.gaprow-medium  { row-gap: var(--espacio-medium);display:grid;align-items: start; }
.gaprow-small   { row-gap: var(--espacio-small );display:grid;align-items: start; }
.gaprow-xsmall  { row-gap: var(--espacio-xsmall);display:grid;align-items: start; }
.gaprow-2xsmall { row-gap: var(--espacio-2xsmall);display:grid;align-items: start; }
.gaprow-3xsmall { row-gap: var(--espacio-3xsmall);display:grid;align-items: start; }
.gaprow-4xsmall { row-gap: var(--espacio-4xsmall);display:grid;align-items: start; }
.gapcolumn-4xlarge { column-gap: var(--espacio-4xlarge);display:grid;align-items: start; }
.gapcolumn-3xlarge { column-gap: var(--espacio-3xlarge);display:grid;align-items: start; }
.gapcolumn-2xlarge { column-gap: var(--espacio-2xlarge);display:grid;align-items: start; }
.gapcolumn-xlarge  { column-gap: var(--espacio-xlarge);display:grid;align-items: start; }
.gapcolumn-large   { column-gap: var(--espacio-large);display:grid;align-items: start; }
.gapcolumn-medium  { column-gap: var(--espacio-medium);display:grid;align-items: start; }
.gapcolumn-small   { column-gap: var(--espacio-small );display:grid;align-items: start; }
.gapcolumn-xsmall  { column-gap: var(--espacio-xsmall);display:grid;align-items: start; }
.gapcolumn-2xsmall { column-gap: var(--espacio-2xsmall);display:grid;align-items: start; }
.gapcolumn-3xsmall { column-gap: var(--espacio-3xsmall);display:grid;align-items: start; }
.gapcolumn-4xsmall { column-gap: var(--espacio-4xsmall);display:grid;align-items: start; }
/* ///////////////// BORDER RADIUS ///////////////// */
.brs-circulo  { border-radius: 50% }
.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 }
.paddingbott-4xlarge  { padding: 0 0 var(--espacio-4xlarge) 0 }
.paddingbott-3xlarge  { padding: 0 0 var(--espacio-3xlarge) 0 }
.paddingbott-2xlarge  { padding: 0 0 var(--espacio-2xlarge) 0 }
.paddingbott-xlarge   { padding: 0 0 var(--espacio-xlarge) 0 }
.paddingbott-large    { padding: 0 0 var(--espacio-large) 0 }
.paddingbott-medium   { padding: 0 0 var(--espacio-medium) 0 }
.paddingbott-small    { padding: 0 0 var(--espacio-small) 0 }
.paddingbott-xsmall   { padding: 0 0 var(--espacio-xsmall) 0 }
.paddingbott-2xsmall  { padding: 0 0 var(--espacio-2xsmall) 0 }
.paddingbott-3xsmall  { padding: 0 0 var(--espacio-3xsmall) 0 }
.paddingbott-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) auto }
.margintopbott-3xlarge { margin: var(--espacio-3xlarge) auto }
.margintopbott-2xlarge { margin: var(--espacio-2xlarge) auto }
.margintopbott-xlarge  { margin: var(--espacio-xlarge) auto }
.margintopbott-large   { margin: var(--espacio-large) auto }
.margintopbott-medium  { margin: var(--espacio-medium) auto }
.margintopbott-small   { margin: var(--espacio-small) auto }
.margintopbott-xsmall  { margin: var(--espacio-xsmall) auto }
.margintopbott-2xsmall { margin: var(--espacio-2xsmall) auto }
.margintopbott-3xsmall { margin: var(--espacio-3xsmall) auto }
.margintopbott-4xsmall { margin: var(--espacio-4xsmall) auto }
.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 }
.marginbott-4xlarge  { margin: 0 0 var(--espacio-4xlarge) 0 }
.marginbott-3xlarge  { margin: 0 0 var(--espacio-3xlarge) 0 }
.marginbott-2xlarge  { margin: 0 0 var(--espacio-2xlarge) 0 }
.marginbott-xlarge   { margin: 0 0 var(--espacio-xlarge) 0 }
.marginbott-large    { margin: 0 0 var(--espacio-large) 0 }
.marginbott-medium   { margin: 0 0 var(--espacio-medium) 0 }
.marginbott-small    { margin: 0 0 var(--espacio-small) 0 }
.marginbott-xsmall   { margin: 0 0 var(--espacio-xsmall) 0 }
.marginbott-2xsmall  { margin: 0 0 var(--espacio-2xsmall) 0 }
.marginbott-3xsmall  { margin: 0 0 var(--espacio-3xsmall) 0 }
.marginbott-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) }
/* //////////// grid //////////// */
.grid {
display: grid;
width: 100%;
align-items: start;
}
.grid-1 {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
width: 100%;
align-items: start;
}
.grid-2 {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
width: 100%;
align-items: start;
}
.grid-3 {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
width: 100%;
align-items: start;
}
.grid-4 {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
width: 100%;
align-items: start;
}
.grid-5 {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
width: 100%;
align-items: start;
}
.grid-6 {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
width: 100%;
align-items: start;
}
.grid-7 {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
width: 100%;
align-items: start;
}
.grid-8 {
display: grid;
grid-template-columns: repeat(8, minmax(0, 1fr));
width: 100%;
align-items: start;
}
.grid-9 {
display: grid;
grid-template-columns: repeat(9, minmax(0, 1fr));
width: 100%;
align-items: start;
}
.grid-10 {
display: grid;
grid-template-columns: repeat(10, minmax(0, 1fr));
width: 100%;
align-items: start;
}
.grid-11 {
display: grid;
grid-template-columns: repeat(11, minmax(0, 1fr));
width: 100%;
align-items: start;
}
.grid-12 {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
width: 100%;
align-items: start;
}
.grid-24 {
display: grid;
grid-template-columns: repeat(24, minmax(0, 1fr));
width: 100%;
align-items: start;
}
.grid-24 > [class^="coll-"],
.grid-24 > [class*=" coll-"] {
min-width: 0;
}
@media (max-width: 600px) {
.grid-24 > [class^="coll-"],
.grid-24 > [class*=" coll-"] {
grid-column: 1 / -1;
}
}
.coll-1-1 { grid-column: 1 / 2; }
.coll-1-2 { grid-column: 1 / 3; }
.coll-1-3 { grid-column: 1 / 4; }
.coll-1-4 { grid-column: 1 / 5; }
.coll-1-5 { grid-column: 1 / 6; }
.coll-1-6 { grid-column: 1 / 7; }
.coll-1-7 { grid-column: 1 / 8; }
.coll-1-8 { grid-column: 1 / 9; }
.coll-1-9 { grid-column: 1 / 10; }
.coll-1-10 { grid-column: 1 / 11; }
.coll-1-11 { grid-column: 1 / 12; }
.coll-1-12 { grid-column: 1 / 13; }
.coll-1-13 { grid-column: 1 / 14; }
.coll-1-14 { grid-column: 1 / 15; }
.coll-1-15 { grid-column: 1 / 16; }
.coll-1-16 { grid-column: 1 / 17; }
.coll-1-17 { grid-column: 1 / 18; }
.coll-1-18 { grid-column: 1 / 19; }
.coll-1-19 { grid-column: 1 / 20; }
.coll-1-20 { grid-column: 1 / 21; }
.coll-1-21 { grid-column: 1 / 22; }
.coll-1-22 { grid-column: 1 / 23; }
.coll-1-23 { grid-column: 1 / 24; }
.coll-1-24 { grid-column: 1 / 25; }
.coll-2-2 { grid-column: 2 / 3; }
.coll-2-3 { grid-column: 2 / 4; }
.coll-2-4 { grid-column: 2 / 5; }
.coll-2-5 { grid-column: 2 / 6; }
.coll-2-6 { grid-column: 2 / 7; }
.coll-2-7 { grid-column: 2 / 8; }
.coll-2-8 { grid-column: 2 / 9; }
.coll-2-9 { grid-column: 2 / 10; }
.coll-2-10 { grid-column: 2 / 11; }
.coll-2-11 { grid-column: 2 / 12; }
.coll-2-12 { grid-column: 2 / 13; }
.coll-2-13 { grid-column: 2 / 14; }
.coll-2-14 { grid-column: 2 / 15; }
.coll-2-15 { grid-column: 2 / 16; }
.coll-2-16 { grid-column: 2 / 17; }
.coll-2-17 { grid-column: 2 / 18; }
.coll-2-18 { grid-column: 2 / 19; }
.coll-2-19 { grid-column: 2 / 20; }
.coll-2-20 { grid-column: 2 / 21; }
.coll-2-21 { grid-column: 2 / 22; }
.coll-2-22 { grid-column: 2 / 23; }
.coll-2-23 { grid-column: 2 / 24; }
.coll-2-24 { grid-column: 2 / 25; }
.coll-3-3 { grid-column: 3 / 4; }
.coll-3-4 { grid-column: 3 / 5; }
.coll-3-5 { grid-column: 3 / 6; }
.coll-3-6 { grid-column: 3 / 7; }
.coll-3-7 { grid-column: 3 / 8; }
.coll-3-8 { grid-column: 3 / 9; }
.coll-3-9 { grid-column: 3 / 10; }
.coll-3-10 { grid-column: 3 / 11; }
.coll-3-11 { grid-column: 3 / 12; }
.coll-3-12 { grid-column: 3 / 13; }
.coll-3-13 { grid-column: 3 / 14; }
.coll-3-14 { grid-column: 3 / 15; }
.coll-3-15 { grid-column: 3 / 16; }
.coll-3-16 { grid-column: 3 / 17; }
.coll-3-17 { grid-column: 3 / 18; }
.coll-3-18 { grid-column: 3 / 19; }
.coll-3-19 { grid-column: 3 / 20; }
.coll-3-20 { grid-column: 3 / 21; }
.coll-3-21 { grid-column: 3 / 22; }
.coll-3-22 { grid-column: 3 / 23; }
.coll-3-23 { grid-column: 3 / 24; }
.coll-3-24 { grid-column: 3 / 25; }
.coll-4-4 { grid-column: 4 / 5; }
.coll-4-5 { grid-column: 4 / 6; }
.coll-4-6 { grid-column: 4 / 7; }
.coll-4-7 { grid-column: 4 / 8; }
.coll-4-8 { grid-column: 4 / 9; }
.coll-4-9 { grid-column: 4 / 10; }
.coll-4-10 { grid-column: 4 / 11; }
.coll-4-11 { grid-column: 4 / 12; }
.coll-4-12 { grid-column: 4 / 13; }
.coll-4-13 { grid-column: 4 / 14; }
.coll-4-14 { grid-column: 4 / 15; }
.coll-4-15 { grid-column: 4 / 16; }
.coll-4-16 { grid-column: 4 / 17; }
.coll-4-17 { grid-column: 4 / 18; }
.coll-4-18 { grid-column: 4 / 19; }
.coll-4-19 { grid-column: 4 / 20; }
.coll-4-20 { grid-column: 4 / 21; }
.coll-4-21 { grid-column: 4 / 22; }
.coll-4-22 { grid-column: 4 / 23; }
.coll-4-23 { grid-column: 4 / 24; }
.coll-4-24 { grid-column: 4 / 25; }
.coll-5-5 { grid-column: 5 / 6; }
.coll-5-6 { grid-column: 5 / 7; }
.coll-5-7 { grid-column: 5 / 8; }
.coll-5-8 { grid-column: 5 / 9; }
.coll-5-9 { grid-column: 5 / 10; }
.coll-5-10 { grid-column: 5 / 11; }
.coll-5-11 { grid-column: 5 / 12; }
.coll-5-12 { grid-column: 5 / 13; }
.coll-5-13 { grid-column: 5 / 14; }
.coll-5-14 { grid-column: 5 / 15; }
.coll-5-15 { grid-column: 5 / 16; }
.coll-5-16 { grid-column: 5 / 17; }
.coll-5-17 { grid-column: 5 / 18; }
.coll-5-18 { grid-column: 5 / 19; }
.coll-5-19 { grid-column: 5 / 20; }
.coll-5-20 { grid-column: 5 / 21; }
.coll-5-21 { grid-column: 5 / 22; }
.coll-5-22 { grid-column: 5 / 23; }
.coll-5-23 { grid-column: 5 / 24; }
.coll-5-24 { grid-column: 5 / 25; }
.coll-6-6 { grid-column: 6 / 7; }
.coll-6-7 { grid-column: 6 / 8; }
.coll-6-8 { grid-column: 6 / 9; }
.coll-6-9 { grid-column: 6 / 10; }
.coll-6-10 { grid-column: 6 / 11; }
.coll-6-11 { grid-column: 6 / 12; }
.coll-6-12 { grid-column: 6 / 13; }
.coll-6-13 { grid-column: 6 / 14; }
.coll-6-14 { grid-column: 6 / 15; }
.coll-6-15 { grid-column: 6 / 16; }
.coll-6-16 { grid-column: 6 / 17; }
.coll-6-17 { grid-column: 6 / 18; }
.coll-6-18 { grid-column: 6 / 19; }
.coll-6-19 { grid-column: 6 / 20; }
.coll-6-20 { grid-column: 6 / 21; }
.coll-6-21 { grid-column: 6 / 22; }
.coll-6-22 { grid-column: 6 / 23; }
.coll-6-23 { grid-column: 6 / 24; }
.coll-6-24 { grid-column: 6 / 25; }
.coll-7-7 { grid-column: 7 / 8; }
.coll-7-8 { grid-column: 7 / 9; }
.coll-7-9 { grid-column: 7 / 10; }
.coll-7-10 { grid-column: 7 / 11; }
.coll-7-11 { grid-column: 7 / 12; }
.coll-7-12 { grid-column: 7 / 13; }
.coll-7-13 { grid-column: 7 / 14; }
.coll-7-14 { grid-column: 7 / 15; }
.coll-7-15 { grid-column: 7 / 16; }
.coll-7-16 { grid-column: 7 / 17; }
.coll-7-17 { grid-column: 7 / 18; }
.coll-7-18 { grid-column: 7 / 19; }
.coll-7-19 { grid-column: 7 / 20; }
.coll-7-20 { grid-column: 7 / 21; }
.coll-7-21 { grid-column: 7 / 22; }
.coll-7-22 { grid-column: 7 / 23; }
.coll-7-23 { grid-column: 7 / 24; }
.coll-7-24 { grid-column: 7 / 25; }
.coll-8-8 { grid-column: 8 / 9; }
.coll-8-9 { grid-column: 8 / 10; }
.coll-8-10 { grid-column: 8 / 11; }
.coll-8-11 { grid-column: 8 / 12; }
.coll-8-12 { grid-column: 8 / 13; }
.coll-8-13 { grid-column: 8 / 14; }
.coll-8-14 { grid-column: 8 / 15; }
.coll-8-15 { grid-column: 8 / 16; }
.coll-8-16 { grid-column: 8 / 17; }
.coll-8-17 { grid-column: 8 / 18; }
.coll-8-18 { grid-column: 8 / 19; }
.coll-8-19 { grid-column: 8 / 20; }
.coll-8-20 { grid-column: 8 / 21; }
.coll-8-21 { grid-column: 8 / 22; }
.coll-8-22 { grid-column: 8 / 23; }
.coll-8-23 { grid-column: 8 / 24; }
.coll-8-24 { grid-column: 8 / 25; }
.coll-9-9 { grid-column: 9 / 10; }
.coll-9-10 { grid-column: 9 / 11; }
.coll-9-11 { grid-column: 9 / 12; }
.coll-9-12 { grid-column: 9 / 13; }
.coll-9-13 { grid-column: 9 / 14; }
.coll-9-14 { grid-column: 9 / 15; }
.coll-9-15 { grid-column: 9 / 16; }
.coll-9-16 { grid-column: 9 / 17; }
.coll-9-17 { grid-column: 9 / 18; }
.coll-9-18 { grid-column: 9 / 19; }
.coll-9-19 { grid-column: 9 / 20; }
.coll-9-20 { grid-column: 9 / 21; }
.coll-9-21 { grid-column: 9 / 22; }
.coll-9-22 { grid-column: 9 / 23; }
.coll-9-23 { grid-column: 9 / 24; }
.coll-9-24 { grid-column: 9 / 25; }
.coll-10-10 { grid-column: 10 / 11; }
.coll-10-11 { grid-column: 10 / 12; }
.coll-10-12 { grid-column: 10 / 13; }
.coll-10-13 { grid-column: 10 / 14; }
.coll-10-14 { grid-column: 10 / 15; }
.coll-10-15 { grid-column: 10 / 16; }
.coll-10-16 { grid-column: 10 / 17; }
.coll-10-17 { grid-column: 10 / 18; }
.coll-10-18 { grid-column: 10 / 19; }
.coll-10-19 { grid-column: 10 / 20; }
.coll-10-20 { grid-column: 10 / 21; }
.coll-10-21 { grid-column: 10 / 22; }
.coll-10-22 { grid-column: 10 / 23; }
.coll-10-23 { grid-column: 10 / 24; }
.coll-10-24 { grid-column: 10 / 25; }
.coll-11-11 { grid-column: 11 / 12; }
.coll-11-12 { grid-column: 11 / 13; }
.coll-11-13 { grid-column: 11 / 14; }
.coll-11-14 { grid-column: 11 / 15; }
.coll-11-15 { grid-column: 11 / 16; }
.coll-11-16 { grid-column: 11 / 17; }
.coll-11-17 { grid-column: 11 / 18; }
.coll-11-18 { grid-column: 11 / 19; }
.coll-11-19 { grid-column: 11 / 20; }
.coll-11-20 { grid-column: 11 / 21; }
.coll-11-21 { grid-column: 11 / 22; }
.coll-11-22 { grid-column: 11 / 23; }
.coll-11-23 { grid-column: 11 / 24; }
.coll-11-24 { grid-column: 11 / 25; }
.coll-12-12 { grid-column: 12 / 13; }
.coll-12-13 { grid-column: 12 / 14; }
.coll-12-14 { grid-column: 12 / 15; }
.coll-12-15 { grid-column: 12 / 16; }
.coll-12-16 { grid-column: 12 / 17; }
.coll-12-17 { grid-column: 12 / 18; }
.coll-12-18 { grid-column: 12 / 19; }
.coll-12-19 { grid-column: 12 / 20; }
.coll-12-20 { grid-column: 12 / 21; }
.coll-12-21 { grid-column: 12 / 22; }
.coll-12-22 { grid-column: 12 / 23; }
.coll-12-23 { grid-column: 12 / 24; }
.coll-12-24 { grid-column: 12 / 25; }
.coll-13-13 { grid-column: 13 / 14; }
.coll-13-14 { grid-column: 13 / 15; }
.coll-13-15 { grid-column: 13 / 16; }
.coll-13-16 { grid-column: 13 / 17; }
.coll-13-17 { grid-column: 13 / 18; }
.coll-13-18 { grid-column: 13 / 19; }
.coll-13-19 { grid-column: 13 / 20; }
.coll-13-20 { grid-column: 13 / 21; }
.coll-13-21 { grid-column: 13 / 22; }
.coll-13-22 { grid-column: 13 / 23; }
.coll-13-23 { grid-column: 13 / 24; }
.coll-13-24 { grid-column: 13 / 25; }
.coll-14-14 { grid-column: 14 / 15; }
.coll-14-15 { grid-column: 14 / 16; }
.coll-14-16 { grid-column: 14 / 17; }
.coll-14-17 { grid-column: 14 / 18; }
.coll-14-18 { grid-column: 14 / 19; }
.coll-14-19 { grid-column: 14 / 20; }
.coll-14-20 { grid-column: 14 / 21; }
.coll-14-21 { grid-column: 14 / 22; }
.coll-14-22 { grid-column: 14 / 23; }
.coll-14-23 { grid-column: 14 / 24; }
.coll-14-24 { grid-column: 14 / 25; }
.coll-15-15 { grid-column: 15 / 16; }
.coll-15-16 { grid-column: 15 / 17; }
.coll-15-17 { grid-column: 15 / 18; }
.coll-15-18 { grid-column: 15 / 19; }
.coll-15-19 { grid-column: 15 / 20; }
.coll-15-20 { grid-column: 15 / 21; }
.coll-15-21 { grid-column: 15 / 22; }
.coll-15-22 { grid-column: 15 / 23; }
.coll-15-23 { grid-column: 15 / 24; }
.coll-15-24 { grid-column: 15 / 25; }
.coll-16-16 { grid-column: 16 / 17; }
.coll-16-17 { grid-column: 16 / 18; }
.coll-16-18 { grid-column: 16 / 19; }
.coll-16-19 { grid-column: 16 / 20; }
.coll-16-20 { grid-column: 16 / 21; }
.coll-16-21 { grid-column: 16 / 22; }
.coll-16-22 { grid-column: 16 / 23; }
.coll-16-23 { grid-column: 16 / 24; }
.coll-16-24 { grid-column: 16 / 25; }
.coll-17-17 { grid-column: 17 / 18; }
.coll-17-18 { grid-column: 17 / 19; }
.coll-17-19 { grid-column: 17 / 20; }
.coll-17-20 { grid-column: 17 / 21; }
.coll-17-21 { grid-column: 17 / 22; }
.coll-17-22 { grid-column: 17 / 23; }
.coll-17-23 { grid-column: 17 / 24; }
.coll-17-24 { grid-column: 17 / 25; }
.coll-18-18 { grid-column: 18 / 19; }
.coll-18-19 { grid-column: 18 / 20; }
.coll-18-20 { grid-column: 18 / 21; }
.coll-18-21 { grid-column: 18 / 22; }
.coll-18-22 { grid-column: 18 / 23; }
.coll-18-23 { grid-column: 18 / 24; }
.coll-18-24 { grid-column: 18 / 25; }
.coll-19-19 { grid-column: 19 / 20; }
.coll-19-20 { grid-column: 19 / 21; }
.coll-19-21 { grid-column: 19 / 22; }
.coll-19-22 { grid-column: 19 / 23; }
.coll-19-23 { grid-column: 19 / 24; }
.coll-19-24 { grid-column: 19 / 25; }
.coll-20-20 { grid-column: 20 / 21; }
.coll-20-21 { grid-column: 20 / 22; }
.coll-20-22 { grid-column: 20 / 23; }
.coll-20-23 { grid-column: 20 / 24; }
.coll-20-24 { grid-column: 20 / 25; }
.coll-21-21 { grid-column: 21 / 22; }
.coll-21-22 { grid-column: 21 / 23; }
.coll-21-23 { grid-column: 21 / 24; }
.coll-21-24 { grid-column: 21 / 25; }
.coll-22-22 { grid-column: 22 / 23; }
.coll-22-23 { grid-column: 22 / 24; }
.coll-22-24 { grid-column: 22 / 25; }
.coll-23-23 { grid-column: 23 / 24; }
.coll-23-24 { grid-column: 23 / 25; }
.coll-24-24 { grid-column: 24 / 25; }
.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;}
.grid-span5 { grid-column: span 5!important;}
.grid-span6 { grid-column: span 6!important;}
.grid-span7 { grid-column: span 7!important;}
.grid-span8 { grid-column: span 8!important;}
.grid-span9 { grid-column: span 9!important;}
.grid-span10 { grid-column: span 10!important;}
.grid-span11 { grid-column: span 11!important;}
.grid-span12 { grid-column: span 12!important;}
.col-center {align-items: center;}
/* //////////// LINEAS SEPARADORAS //////////// */
.string-h,.string-w  {
position: relative;
}
.string-h::after,.string-w::after {
content: "";
position: absolute;
background: var(--col-negro20);
}
.string-w::after {
left: 0;
right: 0;
height: 1px;
}
.string-h::after {
top: 0;
bottom: 0;
width: 1px;
}
.string-w.top-4xlarge::after { top: calc(var(--espacio-4xlarge) / -2); }
.string-w.top-3xlarge::after { top: calc(var(--espacio-3xlarge) / -2); }
.string-w.top-2xlarge::after { top: calc(var(--espacio-2xlarge) / -2); }
.string-w.top-xlarge::after { top: calc(var(--espacio-xlarge) / -2); }
.string-w.top-large::after { top: calc(var(--espacio-large) / -2); }
.string-w.top-medium::after { top: calc(var(--espacio-medium) / -2); }
.string-w.top-small::after { top: calc(var(--espacio-small) / -2); }
.string-w.top-xsmall::after { top: calc(var(--espacio-xsmall) / -2); }
.string-w.top-2xsmall::after { top: calc(var(--espacio-2xsmall) / -2); }
.string-w.top-3xsmall::after { top: calc(var(--espacio-3xsmall) / -2); }
.string-w.top-4xsmall::after { top: calc(var(--espacio-4xsmall) / -2); }
.string-w.bottom-4xlarge::after { bottom: calc(var(--espacio-4xlarge) / -2); }
.string-w.bottom-3xlarge::after { bottom: calc(var(--espacio-3xlarge) / -2); }
.string-w.bottom-2xlarge::after { bottom: calc(var(--espacio-2xlarge) / -2); }
.string-w.bottom-xlarge::after { bottom: calc(var(--espacio-xlarge) / -2); }
.string-w.bottom-large::after { bottom: calc(var(--espacio-large) / -2); }
.string-w.bottom-medium::after { bottom: calc(var(--espacio-medium) / -2); }
.string-w.bottom-small::after { bottom: calc(var(--espacio-small) / -2); }
.string-w.bottom-xsmall::after { bottom: calc(var(--espacio-xsmall) / -2); }
.string-w.bottom-2xsmall::after { bottom: calc(var(--espacio-2xsmall) / -2); }
.string-w.bottom-3xsmall::after { bottom: calc(var(--espacio-3xsmall) / -2); }
.string-w.bottom-4xsmall::after { bottom: calc(var(--espacio-4xsmall) / -2); }
.string-h.left-4xlarge::after { left: calc(var(--espacio-4xlarge) / -2); }
.string-h.left-3xlarge::after { left: calc(var(--espacio-3xlarge) / -2); }
.string-h.left-2xlarge::after { left: calc(var(--espacio-2xlarge) / -2); }
.string-h.left-xlarge::after { left: calc(var(--espacio-xlarge) / -2); }
.string-h.left-large::after { left: calc(var(--espacio-large) / -2); }
.string-h.left-medium::after { left: calc(var(--espacio-medium) / -2); }
.string-h.left-small::after { left: calc(var(--espacio-small) / -2); }
.string-h.left-xsmall::after { left: calc(var(--espacio-xsmall) / -2); }
.string-h.left-2xsmall::after { left: calc(var(--espacio-2xsmall) / -2); }
.string-h.left-3xsmall::after { left: calc(var(--espacio-3xsmall) / -2); }
.string-h.left-4xsmall::after { left: calc(var(--espacio-4xsmall) / -2); }
.string-h.right-4xlarge::after { right: calc(var(--espacio-4xlarge) / -2); }
.string-h.right-3xlarge::after { right: calc(var(--espacio-3xlarge) / -2); }
.string-h.right-2xlarge::after { right: calc(var(--espacio-2xlarge) / -2); }
.string-h.right-xlarge::after { right: calc(var(--espacio-xlarge) / -2); }
.string-h.right-large::after { right: calc(var(--espacio-large) / -2); }
.string-h.right-medium::after { right: calc(var(--espacio-medium) / -2); }
.string-h.right-small::after { right: calc(var(--espacio-small) / -2); }
.string-h.right-xsmall::after { right: calc(var(--espacio-xsmall) / -2); }
.string-h.right-2xsmall::after { right: calc(var(--espacio-2xsmall) / -2); }
.string-h.right-3xsmall::after { right: calc(var(--espacio-3xsmall) / -2); }
.string-h.right-4xsmall::after { right: calc(var(--espacio-4xsmall) / -2); }
/* ///////////// 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-negro10);
}
.search form input {
font-size: var(--fontsize-3xsmall);
padding: var(--espacio-3xsmall) 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%);
}
/* ///////////// 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: 4;
line-clamp: 4;
overflow: hidden;
text-overflow: ellipsis;
max-height: calc(1.4em * 4);
white-space: normal;
}
.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;
}
/* //////////// FOOTER //////////// */
.footer section span{
margin: var(--espacio-2xsmall) 0;
text-align: left;
max-width: 500px;
width: 100%;
margin: auto;
}
/* //////////// LOGOS //////////// */
.logos {
display: flex;
align-items: center;
justify-content: center;
}
.logos ul{
display: flex;
justify-content: space-evenly;
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;
width: 100%;
}
.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;
}
/* ///////////////// BLOCKQUOTE /////////////////  */
.blockquotex1 {
position: relative;
box-sizing: border-box;
isolation: isolate;
margin: var(--espacio-xlarge) auto var(--espacio-3xlarge);
padding: var(--espacio-xlarge) var(--espacio-4xlarge);
background: var(--col-blanco);
color: var(--col-negro100);
border: 3px solid var(--col-negro20);
border-radius: var(--borderradius-3xlarge);
}
.blockquotex1::before {
content: "\f10d";
font-family: "Font Awesome 6 Free";
font-weight: 900;
position: absolute;
top: calc(var(--espacio-4xsmall) * -.9);
left: calc(var(--espacio-4xsmall) * -.9);
border-radius: var(--borderradius-3xlarge) 0 0 0;
z-index: 2;
padding: 0 0 0 var(--espacio-3xsmall);
background: var(--col-blanco);
font-size: var(--fontsize-4xlarge);
line-height: 1;
color: var(--col-negro100);
}
.blockquotex1::after {
content: "\f10e";
font-family: "Font Awesome 6 Free";
font-weight: 900;
position: absolute;
right: calc(var(--espacio-4xsmall) * -0.9);
bottom: calc(var(--espacio-4xsmall) * -0.9);
border-radius: 0 0 var(--borderradius-3xlarge) 0;
z-index: 2;
padding: 0 var(--espacio-3xsmall) 0 0;
background: var(--col-blanco);
font-size: var(--fontsize-4xlarge);
line-height: 1;
color: var(--col-negro100);
}
.blockquotex1 article {
display: flex;
flex-wrap: nowrap;
width: 100%;
align-items: flex-start;
padding: 0 var(--espacio-3xsmall);
gap: var(--espacio-large);
}
.blockquotex1 article figure {
box-sizing: border-box;
flex: 0 0 min(100%, var(--logo-2xsmall));
width: min(100%, var(--logo-2xsmall));
max-width: 100%;
aspect-ratio: 1;
margin: 0;
overflow: hidden;
border-radius: 50%;
}
.blockquotex1 article figure img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
border-radius: inherit;
}
.blockquotex1 article span cite {
display: block;
margin-top: var(--espacio-small);
font-size: var(--fontsize-4xsmall);
font-style: italic;
text-align: right;
}
.blockquotex1 article span cite::after {
content: "";
position: absolute;
left: min(15%, var(--espacio-4xlarge));
bottom: calc(var(--espacio-medium) * -1);
z-index: 2;
width: var(--espacio-xlarge);
height: var(--espacio-xlarge);
background: var(--col-blanco);
border-right: 3px solid var(--col-negro20);
border-bottom: 3px solid var(--col-negro20);
transform: translateX(-50%) rotate(45deg);
}
@media only screen and (max-width: 600px) {
.blockquotex1 article{
display: grid;
justify-items: center;
}
}
@media only screen and (max-width: 600px) {
.blockquotex1 article figure{
width: min(100%, var(--logo-xlarge));
}
}
.blockquote2 {
padding-left: var(--espacio-large);
color: var(--col-fuente);
font-style: italic;
}
.blockquote2 blockquote {
position: relative;
margin: 0;
min-height: calc(124px + 38px);
box-sizing: border-box;
padding: var(--espacio-3xlarge) var(--espacio-4xlarge);
line-height: 1.2;
}
.blockquote2 blockquote::before {
content: "";
position: absolute;
inset: 0;
border: 3px solid var(--col-rojo);
border-radius: 38px;
pointer-events: none;
-webkit-mask:
linear-gradient(#000 0 0) right top    / calc(100% - 8px) calc(100% - 8px) no-repeat,
linear-gradient(#000 0 0) left  top    / 8px 45px no-repeat,
linear-gradient(#000 0 0) left  bottom / 8px calc(100% - 124px) no-repeat,
linear-gradient(#000 0 0) left  bottom / calc(111px - 18px) 8px no-repeat,
linear-gradient(#000 0 0) right bottom / calc(100% - 111px - 38px) 8px no-repeat;
mask:
linear-gradient(#000 0 0) right top    / calc(100% - 8px) calc(100% - 8px) no-repeat,
linear-gradient(#000 0 0) left  top    / 8px 45px no-repeat,
linear-gradient(#000 0 0) left  bottom / 8px calc(100% - 124px) no-repeat,
linear-gradient(#000 0 0) left  bottom / calc(111px - 18px) 8px no-repeat,
linear-gradient(#000 0 0) right bottom / calc(100% - 111px - 38px) 8px no-repeat;
}
.blockquote2 blockquote::after {
content: "\f10d";
font-family: "Font Awesome 6 Free";
position: absolute;
left: calc(3px / 2 - 57px / 2 - 2px);
top: calc((45px + 124px) / 2);
translate: 0 -50%;
width: 57px;
aspect-ratio: 57.5 / 46;
display: grid;
place-items: center;
color: var(--col-rojo);
font-size: 52px;
font-weight: 900;
line-height: 1;
font-style: normal;
}
.blockquote2 small {
position: relative;
margin: calc(3px * -1) 0 0 111px;
padding: var(--espacio-large) var(--espacio-3xlarge) ;
line-height: 1.2;
}
.blockquote2 small::before {
content: "";
position: absolute;
top: 0; bottom: 0; left: 0;
width: 92px;
border: 3px solid var(--col-rojo);
border-right: 0;
border-radius: 38px 0 0 38px;
pointer-events: none;
}

/*
blockquote {
position: relative;
margin: var(--espacio-4xlarge) var(--espacio-xsmall);
padding: var(--espacio-large);
border: none;
color: var(--col-azul);
font-style: italic;
}
blockquote p{
line-height: var(--lineheight-3xlarge);
font-size: var(--fontsize-2xlarge);
font-weight: 200;
}
blockquote:before,
blockquote:after {
content: " ";
position: absolute;
top: 0;
width: 5rem;
height: 100%;
border: 1px solid var(--col-azul);
}
blockquote:before {
left: -1rem;
border-right: 0;
}
blockquote:after {
right: -1rem;
border-left: 0;
}
blockquote cite{
width: 100%;
text-align: right;
font-size: var(--fontsize-2xsmall);
display: inline-block;
}
blockquote.foto{
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;
flex:1;
color:var(--col-azulado);
font-size:var(--fontsize-small );
font-style:italic;
font-weight:300;
line-height:2.2rem;
z-index:2;
}
blockquote.foto::before{
content:"";
position:absolute;
inset:0;
width:8px;
background:linear-gradient(to bottom,#087cbf,#f96000,#c94d00);
border:none;
}
blockquote.foto::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;
border:none;
}
blockquote.foto figure{
flex:0 0 220px;
margin:0;
position:relative;
}
blockquote.foto figure img{
display:block;
width:100%;
border-radius:18px;
transition:.35s;
}
blockquote.foto figcaption{
margin-top:.9rem;
font-size:.83rem;
line-height:1.5;
color:#666;
text-align:center;
}
@media (max-width:900px){
blockquote.foto{
flex-direction:column;
text-align:center;
padding:2rem;
gap: 0;
}
blockquote.foto figure{
width:220px;
}
blockquote.foto .text-blanco{
font-size:1.15rem;
line-height:2rem;
}
}
@media (max-width:600px){
blockquote.foto{
padding:1.5rem;
border-radius:18px;
}
blockquote.foto figure{
width:180px;
}
blockquote.foto .text-blanco{
font-size:1.05rem;
line-height:1.8rem;
}
blockquote.foto figcaption{
font-size:.75rem;
}
}*/
/* /////////// TARJETA-new /////////// */
.card{
display: grid;
grid-template-columns: none;
gap: var(--espacio-2xsmall);
/* height: 100%; */
}
.card span{
display: grid;
grid-template-columns: none;
gap: var(--espacio-4xsmall);
}
.card-reset {
display: grid;
gap: var(--espacio-small);
grid-template-columns: repeat(2, 1fr);
}
.card-reset span{
display: flex;
flex-direction: column;
gap: var(--espacio-4xsmall);
}
.card-span3 {
display: grid;
gap: var(--espacio-small);
grid-template-columns: repeat(3, 1fr);
}
.card-span3 span{
display: flex;
flex-direction: column;
gap: var(--espacio-4xsmall);
}
/* MODAL ///////////////////////////////////////// */
.modal {
display: none;
position: fixed;
top: 10%;
left: 0;
right: 0;
margin: auto;
width: 80%;
max-width: 500px;
background-color: var(--col-blanco);
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
z-index: 1003;
}
.modal-overlay {
position: fixed;
inset: 0;
width: 100% !important;
height: 100% !important;
background-color: rgba(0, 0, 0, 0.7);
z-index: 1002;
opacity: 0.5;
display: none;
}
.modal-content {
display: flex;
flex-direction: column;
align-items: center;
padding: var(--espacio-large);
}
/* //////////// HEADER //////////// */
#headerandina section {
display: flex;
align-items: center;
justify-content: space-between;
overflow: hidden;
position: relative;
padding: var(--espacio-2xsmall) 0;
}
#headerandina section span{
display: flex;
align-items: center;
justify-content: center;
}
#headerandina section span a{
display: flex;
align-items: center;
justify-content: center;
}
#headerandina .cinta {
display: flex;
align-items: center;
justify-content: center;
padding: 0 var(--espacio-3xsmall);
border-bottom: 1px solid var(--col-aluminio);
}
#headerandina .cinta ul{
display: flex;
justify-content: flex-start;
align-items: center;
overflow-x: auto;
white-space: nowrap;
margin: 0 var(--espacio-3xsmall);
}
#headerandina .cinta ul li:nth-child(1n+2) {
border-left: 1px solid var(--col-aluminio);
}
#headerandina .cinta ul li a {
display: inline-block;
text-align: center;
padding: var(--espacio-3xsmall);
text-decoration: none;
transition: box-shadow 0.3s ease;
color: var(--col-fuente)
}
#headerandina .cinta ul li a:hover {
box-shadow: inset -1px -14px 6px var(--trans-10negro), inset 0 -3px 0 var(--trans-10negro);
text-decoration: none !important;
}
#headerandina .cinta ul::-webkit-scrollbar {
height: 0;
}
/* //////////// HEADER ROJO //////////// */
#headerandina.rojo{
border-bottom: 1px solid var(--trans-50blanco);
}
#headerandina.rojo .cinta {
background: var(--col-noche);
border-bottom: 1px solid var(--trans-50blanco);
}
#headerandina.rojo .cinta svg{
filter:var(--svg-blanco);
}
#headerandina.rojo .cinta ul{
margin: 0 var(--espacio-3xsmall);
}
#headerandina.rojo .cinta ul li:nth-child(1n+2) {
border-left: 1px solid var(--trans-50blanco);
}
#headerandina.rojo .cinta ul li a {
color: var(--col-blanco);
}
#headerandina.rojo .cinta ul li a:hover {
box-shadow: inset -1px -14px 6px var(--trans-20negro), inset 0 -3px 0 var(--trans-20negro);
text-decoration: none !important;
}
#headerandina.rojo section span div.line{
background: var(--col-rojo);
color: var(--col-blanco);
}
#headerandina.rojo section span ul{
background: var(--col-rojo);
}
#headerandina.rojo section span ul li div{
background: var(--col-rojo);
}
/* //////////// NAVEGADOR //////////// */
nav.navbar-fixed{
position:sticky;
transition: all 0.3s ease-in-out;
top:0;
z-index: 3;
box-shadow: 1px 8px 6px 0px rgb(0 0 0 / 15%);
background: var(--col-blanco)
}
#navandina section {
display: flex;
justify-content: space-between;
align-items: center;
}
#navandina section svg{
filter:var(--svg-fuente)
}
#navandina section ul li svg{
filter:var(--svg-fuente)
}
#navandina section ul li{
color:var(--col-grismedio);
display: contents;
}
#navandina section ul li a{
color:var(--col-grismedio);
padding: var(--espacio-2xsmall) 20px;
display: flex;
}
#navandina section ul li a:hover{
color:var(--col-grismedio);
background: var(--trans-10negro);
}
#navandina section ul li a:link{
color:var(--col-grismedio);
text-decoration: none;
}
#navandina section ul li ul{
display: flex;
flex-direction: column;
text-align: left;
}
#navandina section ul li ul li {
color:var(--col-oscuro);
width: 100%;
}
#navandina section ul li ul li a{
color:var(--col-oscuro);
background: var(--col-blanco);
display: inline-block;
width: 100%;
}
#navandina section ul li ul li a:link{
color:var(--col-oscuro);
display: inline-block;
}
#navandina section ul li ul li a:hover{
color:var(--col-oscuro);
background: var(--col-gristenue);
display: inline-block;
}
nav #nav-submenu{
display: flex;
justify-content: center;
width: 100%;
}
nav #nav-submenu li{
display: inline-block!important;
}
nav #nav-submenu li a{
display: flex;
align-items: center;
}
nav #nav-submenu li a svg{
margin-right: 10px;
}
nav #nav-submenu li ul{
position: absolute;
z-index: 2;
-webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}
.navbar-top{
position:fixed!important;
top:0;
left:0;
width:100%;
z-index:6;
background:rgba(0,0,0,.9);
backdrop-filter:blur(6px);
box-shadow:0 2px 10px rgba(0,0,0,.3);
opacity:0;
transform:translateY(-100%);
will-change:transform, opacity;
}
@supports (animation-timeline: scroll()){
@keyframes navReveal{
0%{
opacity:0;
transform:translateY(-100%);
pointer-events:none;
}
1%{
pointer-events:auto;
}
100%{
opacity:1;
transform:translateY(0);
}
}
.navbar-top{
animation:navReveal linear;
animation-timeline:scroll(root block);
animation-range:0px 150px;
animation-fill-mode:both;
}
}
@supports not (animation-timeline: scroll()){
.navbar-top{
position:sticky;
opacity:1;
transform:none;
pointer-events:auto;
}
}
#menu-toogle-top {
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
position: fixed;
top: 0;
left: 0;
}
/* //////////// NAVEGADOR ROJO //////////// */
#navandina.rojo section svg{
filter:var(--svg-blanco)
}
#navandina.rojo section ul li svg{
filter:var(--svg-blanco)
}
#navandina.rojo section ul li{
color:var(--col-blanco);
display: contents;
}
#navandina.rojo section ul li a{
color:var(--col-blanco);
padding: var(--espacio-xsmall) 17px;
display: flex;
}
#navandina.rojo section ul li a:hover{
color:var(--col-blanco)!important;
background: var(--trans-10negro);
}
#navandina.rojo section ul li a:link{
color:var(--col-blanco);
text-decoration: none;
}
#navandina.rojo section ul li ul{
display: flex;
flex-direction: column;
text-align: left;
}
#navandina.rojo section ul li ul li {
color:var(--col-oscuro);
width: 100%;
}
#navandina.rojo section ul li ul li a{
color:var(--col-oscuro);
background: var(--col-blanco);
display: inline-block;
width: 100%;
}
#navandina.rojo section ul li ul li a:link{
color:var(--col-oscuro);
display: inline-block;
}
#navandina.rojo section ul li ul li a:hover{
color: var(--col-oscuro) !important;
background: var(--col-gristenue);
display: inline-block;
}
#headerandina.rojo section span button.line{
background: var(--col-rojo);
color: var(--col-blanco);
}
#headerandina.rojo section span svg{
filter:var(--svg-blanco)
}
#headerandina.rojo section span ul li button{
background: var(--col-rojo);
}
/* ///////////////// SIDE-BAR TOP ///////////////// */
.menu-button {
cursor: pointer;
display: flex;
padding: var(--espacio-3xsmall) 17px;
}
#sidebar-top:checked ~ .sidebar-top {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
transition: transform 0.32s cubic-bezier(0.2, 0.9, 0.2, 1), opacity 0.2s ease, visibility 0s linear 0s;
}
#sidebar-top:checked ~ .sidebar-top-menu {
opacity: 1;
visibility: visible;
pointer-events: auto;
transition:
opacity 0.3s ease,
visibility 0s linear 0s;
}
.sidebar-top-menu {
position: fixed;
top: var(--ancho-2xlarge);
right: 0;
bottom: 0;
left: 0;
z-index: 1;
display: block;
background: var(--trans-40negro);
opacity: 0;
visibility: hidden;
pointer-events: none;
cursor: default;
transition:
opacity 0.3s ease,
visibility 0s linear 0.3s;
}
.sidebar-top {
position: fixed;
top: var(--ancho-2xlarge);
left: 0;
z-index: 2;
width: 100%;
max-height: calc(100dvh - var(--ancho-2xlarge));
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
background: var(--col-blanco, var(--col-blanco-local));
box-shadow: 0 8px 16px var(--trans-20negro);
opacity: 0;
visibility: hidden;
transform: translateY(-110%);
pointer-events: none;
transition:
transform 0.32s cubic-bezier(0.2, 0.9, 0.2, 1),
opacity 0.2s ease,
visibility 0s linear 0.32s;
will-change: transform;
}
.sidebar-top ul {
display: grid;
grid-template-columns: 1fr;
width: min(100%, 1200px);
margin: 0 auto;
padding:var(--espacio-2xsmall, 10px)var(--espacio-small, 16px);
list-style: none;
}
.sidebar-top ul li {
min-width: 0;
}
.sidebar-top ul li a {
display: block;
width: 100%;
padding:var(--espacio-2xsmall, 10px)var(--espacio-small, 16px);
color: var(--col-fuente, var(--col-fuente-local));
text-decoration: none;
cursor: pointer;
border-radius: var(--borderradius-3xsmall, 4px);
transition: color 0.2s ease, background-color 0.2s ease;
}
.sidebar-top ul li a:hover,
.sidebar-top ul li a:focus-visible {
background-color:
var(--col-gristenue, var(--col-gristenue-local));
}
.sidebar-top ul li a:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
}
.sidebar-top-checkbox {
position: fixed;
top: 0;
left: 0;
width: 1px;
height: 1px;
margin: 0;
padding: 0;
overflow: hidden;
white-space: nowrap;
clip: rect(0 0 0 0);
clip-path: inset(50%);
border: 0;
opacity: 0;
pointer-events: none;
}
@supports (animation-timeline: scroll()) {
@keyframes navReveal {
0% {
opacity: 0;
transform: translateY(-100%);
pointer-events: none;
}
99% {
pointer-events: none;
}
100% {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
}
.navbar-top {
animation-name: navReveal;
animation-duration: 1ms;
animation-timing-function: linear;
animation-fill-mode: both;
animation-timeline: scroll(root block);
animation-range: 0 150px;
}
}
@supports not (animation-timeline: scroll()) {
.navbar-top {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
}
@media (min-width: 768px) {
.sidebar-top ul {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--espacio-2xsmall, 10px);
}
}
@media (min-width: 1200px) {
.sidebar-top ul {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
}
@media (prefers-reduced-motion: reduce) {
.navbar-top,
.sidebar-top,
.sidebar-top-menu {
animation: none;
transition: none;
}
.navbar-top {
opacity: 1;
transform: none;
pointer-events: auto;
}
}
/* ///////////////// SIDE-BAR LATERAL ///////////////// */
.menu-button {
cursor: pointer;
display: flex;
padding: var(--espacio-3xsmall) 17px;
}
#sidebar-lelf { display: none; }
#sidebar-lelf:checked ~ .sidebar-lelf {
transform: translateX(0);
z-index: 6;
}
#sidebar-lelf:checked ~ .sidebar-lelf-menu{
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
transition:
transform 0.32s cubic-bezier(0.2, 0.9, 0.2, 1),
opacity 0.2s ease,
visibility 0s linear 0s;
}
.sidebar-lelf-menu {
inset: 0;
position: fixed;
background: rgba(0,0,0,.45);
opacity: 0;
pointer-events: none;
transition: opacity .28s ease;
z-index: 5;
}
.sidebar-lelf {
position: fixed;
top: 0;
left: 0;
width: 80vw;
max-width: 380px;
height: 100vh;
box-shadow: 4px 0 12px rgba(0,0,0,.25);
transform: translateX(-110%);
transition: transform .28s cubic-bezier(.2,.9,.2,1);
z-index: 7;
overflow-y: auto;
list-style: none;
}
.sidebar-lelf header {
text-align: center;
padding: 0 var(--espacio-xsmall);
display:flex;
flex-direction: column;
justify-content: center;
}
.sidebar-lelf header a svg {
width: 100%;
height: 50px;
max-width: 200px;
margin: var(--espacio-xsmall) auto;
}
.sidebar-lelf .cinta {
padding: 0 var(--espacio-xsmall);
}
.sidebar-lelf .cinta ul li {
display: inline-block;
margin: 3px;
}
.sidebar-lelf .cinta ul li a{
color: var(--col-blanco);
white-space: nowrap;
}
.sidebar-lelf .cinta ul li a:hover{
text-decoration: none;
color: var(--col-blanco);
}
.sidebar-lelf nav {
padding: 0 var(--espacio-xsmall);
display: flex;
align-items: center;
}
.sidebar-lelf nav ul li {
display: inline-block;
margin: 3px;
}
.sidebar-lelf span {
padding: 0 var(--espacio-medium);
display: flex;
align-items: flex-start;
flex-direction: column;
justify-content: center;
}
/* .sidebar-lelf .descargueapp {
padding: 0  var(--espacio-xsmall);
display: flex;
align-items: center;
}
.sidebar-lelf .descargueapp section {
border: 1px solid #000000;
padding:  var(--espacio-xsmall)  var(--espacio-2xsmall);
border-radius: var(--espacio-4xsmall);
text-align: center;
}
.sidebar-lelf .descargueapp h6 {
margin-bottom: var(--espacio-2xsmall);
}
.sidebar-lelf .descargueapp span {
display: flex;
} */
.descargueapp {
padding: 0 var(--espacio-medium);
}
.descargueapp section{
width: 100%;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
text-align: center;
border: solid 1px #000000;
border-radius: 9px;
padding: 15px;
}
/* //////////// SHARE DESKTOP //////////// */
.share {
display: flex;
}
.share .button-reset {
padding: 3px 5px;
margin: 0 2px;
background: transparent;
}
.time-redes {
display: flex;
align-items: center;
justify-content: space-between;
}
.share-desktop {
position: absolute;
right: 0;
width: 45px;
max-width: 300px;
overflow: hidden;
text-align: center;
transition: width 0.7s;
height: 100%;
display: flex;
align-items: center;
z-index: 1;
background: var(--col-blanco)
}
.share-desktop:hover {
width: 300px;
}
@media only screen and (min-width: 993px) {
.share-desktop {
width: 300px;
overflow: initial;
justify-content: flex-end;
position: relative;
display: flex;
align-items: center;
z-index: 4;
}
}
.share-desktop li.anchor {
position: absolute;
right: 0;
z-index: 1;
}
/* //////////// SHARE MOVIL //////////// */
.share-movil {
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;
}
.share-movil li.anchor {
position: absolute;
right: 0;
z-index: 1;
}
.share-movil:hover {
width: 300px;
}
/* ///////////////// DELAY ///////////////// */
.delay{
transition: all 0.6s ease;
opacity: 0;
visibility: hidden;
}
.delay-click:hover .delay{
opacity: 1;
visibility: visible;
}
@keyframes slideLeft{
0%{
opacity: 0;
transform: translateX(100%);
}
100%{
opacity: 1;
transform: translateX(0%);
}
}
@keyframes slideRight{
0%{
opacity: 1;
transform: translateX(0%);
}
100%{
opacity: 0;
transform: translateX(100%);
}
}
/* /////////// SIDEBAR TOP /////////// */
.sidebar-top-overlay {
position: fixed;
inset: 0;
background: var(--trans-40negro);
opacity: 0;
pointer-events: none;
transition: opacity .3s ease;
z-index: 2;
}
#menu-toogle-top:checked ~ .sidebar-top-overlay {
opacity: 1;
pointer-events: auto;
}
.sidebar-top {
position: fixed;
z-index: 2;
transform: translateY(-100%);
transition: transform .32s cubic-bezier(.2,.9,.2,1);
box-shadow: 0 8px 16px var(--trans-20negro);
top: 0;
left: 0;
width: 100%;
}
#menu-toogle-top:checked ~ .sidebar-top {
transform: translateY(0);
}
.sidebar-top ul {
list-style: none;
display: flex;
flex-direction: column;
}
.sidebar-top ul li label {
display: block;
cursor: pointer;
}
.sidebar-top ul li a {
display: block;
padding: var(--espacio-2xsmall) var(--espacio-small);
text-decoration: none;
color: var(--col-fuente);
border-radius: var(--borderradius-3xsmall);
transition: background .2s ease;
}
.sidebar-top ul li a:hover {
background: var(--col-gristenue);
}
.sidebar-top ul li button {
width: 100%;
text-align: left;
padding: var(--espacio-2xsmall) var(--espacio-small);
background: none;
border: 1px solid var(--col-gris20);
border-radius: var(--borderradius-3xsmall);
font-family: inherit;
font-size: var(--fontsize-3xsmall);
color: var(--col-fuente);
cursor: pointer;
transition: background .2s ease;
}
.sidebar-top ul li button:hover {
background: var(--col-gristenue);
}
@media (min-width: 768px) {
.sidebar-top ul {
flex-direction: row;
flex-wrap: wrap;
display: block;
}
.sidebar-top ul li {
flex: 1 1 calc(33.333% - var(--espacio-2xsmall));
}
}
@media (min-width: 1200px) {
.sidebar-top ul li {
flex: 1 1 calc(20% - var(--espacio-2xsmall));
}
}
/* //////////// 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; }
}
@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) {
.reset-columnnas-movil { grid-template-columns: none!important; }
.grid-24 { grid-column: 1; grid-template-columns: minmax(0, 19fr) minmax(0, 5fr); }
.grid-24 section {  grid-column: 1; }
.grid-24 aside { grid-column: 2; overflow-wrap: anywhere; }
.grid-5 { display: flex; flex-direction: column; }
.grid-span2-700{ grid-column:initial!important; }
.grid-none-970{ grid-column: none!important; }
}
@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: 900px) {
.grid-2 { grid-template-columns: initial; }
.grid-3 { grid-template-columns: initial; }
.grid-4 { grid-template-columns: initial; }
.grid-5 { grid-template-columns: initial; }
.grid-6 { grid-template-columns: initial; }
.grid-span3{ grid-column:initial!important; }
.grid-span4{ grid-column:initial!important; }
.grid-span5{ grid-column:initial!important; }
.grid-span6{ grid-column:initial!important; }
.grid-span3-900 { grid-column: span 2 !important; }
.grid-span1-900 { grid-column: span 1 !important; }
}
@media only screen and (max-width: 600px) {
.oculto-movil { display: none !important; }
.ver-movil { display: block !important; }
.grid-1 { grid-template-columns: initial; }
.grid-2 { grid-template-columns: initial; }
.grid-3 { grid-template-columns: initial; }
.grid-4 { grid-template-columns: initial; }
.grid-5 { grid-template-columns: initial; }
.grid-6 { grid-template-columns: initial; }
.grid-24 { grid-template-columns: initial; }
.grid-span1 { grid-column:initial!important; }
.grid-span2 { grid-column:initial!important; }
.grid-span3 { grid-column:initial!important; }
.grid-span4{  grid-column:initial!important; }
.grid-span5 { rid-column:initial!important; }
.grid-span6 { grid-column:initial!important; }
figure.leyendatitulo {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto auto;
height: auto;
overflow: hidden;
align-items: stretch;
}
figure.leyendatitulo:before {
grid-column: 1;
grid-row: 1;
width: 100%;
padding-top: 66%;
}
figure.leyendatitulo.foto60:before {
padding-top: 60%;
}
figure.leyendatitulo > img {
grid-column: 1;
grid-row: 1;
position: relative;
inset: auto;
width: 100%;
height: 100%;
min-height: 0;
object-fit: cover;
}
figure.leyendatitulo > i {
grid-column: 1;
grid-row: 1;
align-self: center;
justify-self: center;
}
figure.leyendatitulo > figcaption {
grid-column: 1;
grid-row: 2;
position: relative;
inset: auto;
bottom: auto;
width: 100%;
box-sizing: border-box;
padding: var(--espacio-xsmall) 0;
background: none;
}
figure.leyendatitulo figcaption a:link {
color: var(--col-fuente);
}
.parallax {
height: 600px!important;
}
}
.caja-subtitulo  {
  width: 100%;
  text-align: center;
  }
  .caja-subtitulo span {
  position: relative;
  z-index: 0;
  transform: rotate(-1.5deg);
  display: inline-block;
  padding: var(--espacio-3xsmall) var(--espacio-xlarge);
  }
  .caja-subtitulo span::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  border: 2px solid transparent;
  background-color: inherit;
  -webkit-mask:
  linear-gradient(#000 0 0) padding-box,
  linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
  linear-gradient(#000 0 0) padding-box,
  linear-gradient(#000 0 0);
  mask-composite: exclude;
  transform: translate(8px, 8px);
  }
  .caja-subtitulo span h3 {
  transform: rotate(1.5deg);
  }
  /* ///////////////// HERO SIN MITOS ///////////////// */
  .hero-portada {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  background: var(--col-rosa-pastel) url("../img/backrosa.jpg") center / cover no-repeat;
  font-family: var(--font-san-serif);
  }
  .hero-portada__canvas {
  position: relative;
  width: 100%;
  max-width: 1920px;
  min-height: max(100vh, 48rem);
  min-height: max(100dvh, 48rem);
  margin-inline: auto;
  overflow: hidden;
  isolation: isolate;
  }
  .hero-portada__principal {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  }
  .hero-portada__copy {
  position: absolute;
  top: 24.3%;
  left: 5.2%;
  z-index: 4;
  width: 29%;
  min-width: 0;
  container-type: inline-size;
  }
  .hero-portada__copy h4{
    width: 100%;
    max-width: 377px;
    margin: 30px auto;
    text-align: center;
    font-weight: 900;
    line-height: 31px;
  }
  .hero-titular {
  position: relative;
  width: 100%;
  height: clamp(7.5rem, 16vw, 12rem);
  margin: 0;
  color: var(--col-blanco);
  font-family: var(--font-san-serif);
  font-size: clamp(3rem, 5vw, 5.5rem);
  font-weight: 900;
  line-height: 1.15;
  isolation: isolate;
  }
  .hero-titular__formas,
  .hero-titular__formas i {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  transform: rotate(-1deg);
  }
  .hero-titular__formas i { opacity: .62; }
  .hero-titular__formas i:nth-child(-n + 6) { background: var(--col-magenta); }
  .hero-titular__formas i:nth-child(n + 7) { background: var(--col-celeste); }
  .hero-titular__formas .forma-1  { clip-path: polygon(86.46% 29.51%, 8.16% 35.17%, 8.16% 17%, 86.46% 11.33%); }
  .hero-titular__formas .forma-2  { clip-path: polygon(89.83% 36.64%, 8.06% 35.24%, 8.06% 17.07%, 89.83% 18.53%); }
  .hero-titular__formas .forma-3  { clip-path: polygon(89.83% 37.62%, 4.25% 52.73%, 4.25% 34.62%, 89.83% 19.44%); }
  .hero-titular__formas .forma-4  { clip-path: polygon(87.09% 55.1%, 4.25% 52.17%, 4.25% 34.06%, 87.09% 36.99%); }
  .hero-titular__formas .forma-5  { clip-path: polygon(85.8% 66.78%, 7.18% 63.85%, 7.18% 45.73%, 85.8% 48.67%); }
  .hero-titular__formas .forma-6  { clip-path: polygon(87.09% 53.01%, 7.18% 63.92%, 7.18% 45.73%, 87.09% 34.83%); }
  .hero-titular__formas .forma-7  { clip-path: polygon(13.61% 81.47%, 91.87% 80%, 91.87% 98.18%, 13.61% 99.65%); }
  .hero-titular__formas .forma-8  { clip-path: polygon(10.24% 78.53%, 92% 79.93%, 92% 98.04%, 10.24% 96.64%); }
  .hero-titular__formas .forma-9  { clip-path: polygon(10.24% 77.55%, 95.81% 62.45%, 95.81% 80.56%, 10.24% 95.73%); }
  .hero-titular__formas .forma-10 { clip-path: polygon(12.94% 60.07%, 95.81% 63.01%, 95.81% 81.12%, 12.94% 78.18%); }
  .hero-titular__formas .forma-11 { clip-path: polygon(14.24% 53.29%, 92.85% 51.33%, 92.85% 69.44%, 14.24% 71.4%); }
  .hero-titular__formas .forma-12 { clip-path: polygon(12.94% 62.17%, 92.85% 51.26%, 92.85% 69.44%, 12.94% 80.28%); }
  .hero-titular__linea--uno { top: 14%; }
  .hero-titular__linea--dos { top: 52%; }
  .hero-titular__linea {
  position: absolute;
  z-index: 1;
  display: block;
  width: 100%;
  text-align: center;
  white-space: nowrap;
  }
  .hero-portada__personaje {
  position: absolute;
  top: 18.2%;
  left: 28.8%;
  z-index: 4;
  width: 39%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 1.2rem .8rem var(--trans-20negro));
  }
  .hoja-contenidos {
  position: absolute;
  top: 22.7%;
  left: 64.4%;
  z-index: 3;
  /* width: 28.5%; */
  /* margin: 0; */
  padding: 1.1% 1.4%;
  background: var(--col-blanco);
  font-family: var(--font-san-serif);
  transform: rotate(-3deg);
  }
  .hoja-contenidos ul {
  margin: 0;
  padding: 0;
  list-style: none;
  }

  @media only screen and (min-width: 769px) and (max-width: 1500px) {
  .hero-portada__copy h4{
    width: 100%;
    max-width: 180px;
    margin: 30px auto;
    text-align: left;
    font-weight: 900;
    line-height: 25px;
    font-size: 1.5rem;;
  }
  }

  @media only screen and (min-width: 769px) and (max-width: 1023px) {
  .hero-portada__copy {left: 4%;width: 32%;}
  .hero-portada__personaje {left: 27%;width: 60%;}
  .hoja-contenidos {left: 42%;width: 54%;top: 39.7%;padding: 1.4% 1.2%;z-index: 6;}
  .hoja-contenidos li {font-size: clamp(.72rem, 1.55vw, .95rem);}
  }
  @media only screen and (max-width: 768px) {
  .hero-portada,
  .hero-portada__canvas {
  min-height: max(100vh, 205.6vw);
  min-height: max(100dvh, 205.6vw);
  }
  .hero-portada__copy {
  top: 7vw;
  left: 23%;
  width: 58%;
  }

  .hero-titular {
  width: 100%;
  height: 23.5vw;
  font-size: clamp(2rem, 8.4vw, 3.1rem);
  }
  .hero-portada__personaje {
  top: 41.8vw;
  right: 0.5%;
  left: auto;
  width: 100%;
  }
  .hoja-contenidos {
  top: 121vw;
  left: 9.2%;
  /* width: 71.4%; */
  min-height: 39.5vw;
  padding: 6vw 3.7vw;
  z-index: 7;
  }
  .hoja-contenidos li {
  line-height: 1.33;
  }
  }
  @media only screen and (max-width: 480px) {
  .hero-portada,
  .hero-portada__canvas {
  min-height: max(100vh, 220vw);
  min-height: max(100dvh, 220vw);
  }
  }
  /* //////// hoja-contenidos //////// */
  .hoja-contenidos {
  /* width: 100%; */
  /* min-height: 30.0625rem; */
  /* margin: var(--espacio-xlarge) auto; */
  padding: var(--espacio-small) var(--espacio-small) var(--espacio-small) var(--espacio-4xlarge);
  background-color: var(--col-blanco);
  background-image: repeating-linear-gradient(
  to bottom,
  transparent 0,
  transparent 1.01875rem,
  #bacfdb 1.01875rem,
  #bacfdb 1.0625rem
  );
  box-shadow: -.625rem .6875rem 0 var(--trans-20negro);
  font-family: var(--font-san-serif);
  }
  .hoja-contenidos::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 1.96875rem;
  width: 1px;
  background: var(--col-rosa);
  }
  .hoja-contenidos ul {
  margin: 0;
  padding: 0;
  list-style: disc outside;
  }
  .hoja-contenidos li {
  min-height:var(--espacio-large);
  margin: 0;
  padding-left: var(--espacio-3xsmall);
  font-size:var(--fontsize-3xsmall);
  line-height: var(--lineheight-small);
  }
  .hoja-contenidos li::marker {
  color: var(--col-fuente);
  font-size:var(--fontsize-3xsmall);
  }
  @media only screen and (max-width: 480px) {
  .hoja-contenidos {
  padding:var(--espacio-large) var(--espacio-large)var(--espacio-large) var(--espacio-large);
  }
  .hoja-contenidos::before {
  left: var(--espacio-large);
  }
  }

  /* Ajustes finales para que todo el contenido sea visible en móvil. */
  @media only screen and (max-width: 768px) {
  .hero-portada,
  .hero-portada__canvas {
  min-height: max(100vh, 245vw);
  min-height: max(100dvh, 218vw);
  }
  .hero-portada__copy {
  z-index: 8;
  }
  .hero-titular {
  height: 28vw;
  font-size: clamp(2.5rem, 10.5vw, 4.2rem);
  }
  .hero-portada__copy h4 {
  position: relative;
  z-index: 2;
  margin-top: 3vw;
  padding: .45rem .6rem;
  color: var(--col-fuente);
  background: rgb(255 255 255 / 82%);
  font-size: clamp(1rem, 4.2vw, 1.5rem);
  line-height: 1.2;
    top: 200%;
    position: absolute!important;
  }
  .hoja-contenidos {
  right: 9.2%;
  width: auto;
  min-height: 0;
  margin: 0;
  padding: 5vw 5vw 5vw 12vw;
  }
  .hoja-contenidos::before {
  left: 8vw;
  }
  .hoja-contenidos li {
  min-height: 0;
  padding-left: 1.5vw;
  font-size: clamp(.82rem, 3.65vw, 1.15rem);
  line-height: 1.45;
  white-space: normal;
  }
  }

  /* ///////////////// NAVEGADOR DEL REPORTAJE ///////////////// */
  .report-nav {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1000;
  height: 70px;
  color: var(--col-fuente);
  background: rgb(255 255 255 / 96%);
  border-bottom: 3px solid var(--col-magenta);
  box-shadow: 0 .35rem 1.1rem rgb(0 0 0 / 16%);
  opacity: 0;
  transform: translateY(-110%);
  pointer-events: none;
  transition: transform .3s ease, opacity .25s ease;
  }
  .report-nav.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  }
  .report-nav__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  width: min(100% - 2rem, 1440px);
  height: 100%;
  margin-inline: auto;
  }
  .report-nav__brand {
  display: flex;
  align-items: center;
  gap: .8rem;
  min-width: 0;
  }
  .report-nav__center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  min-width: 0;
  }
  .report-nav__menu,
  .report-sidebar__close {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  color: var(--col-grismedio);
  background: transparent;
  border: 0;
  border-radius: 50%;
  font-size: 1.15rem;
  cursor: pointer;
  }
  .report-nav__menu:hover,
  .report-nav__menu:focus-visible,
  .report-sidebar__close:hover,
  .report-sidebar__close:focus-visible {
  color: var(--col-grisoscuro);
  background: var(--col-humo);
  outline: 3px solid var(--trans-20negro);
  outline-offset: 2px;
  }
  .report-nav__logo {
  display: block;
  width: 126px;
  height: auto;
  }
  .report-nav__title {
  width: max-content;
  margin: 0;
  color: var(--col-magenta);
  font-family: var(--font-san-serif);
  font-size: clamp(1rem, 2vw, 1.55rem);
  font-weight: 900;
  line-height: 1.05;
  text-align: center;
  }
  .report-social {
  display: flex;
  justify-content: flex-end;
  gap: .35rem;
  margin: 0;
  padding: 0;
  list-style: none;
  }
  .report-social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: var(--col-fuente);
  border-radius: 50%;
  font-size: 1.05rem;
  text-decoration: none;
  transition: color .2s ease, background-color .2s ease;
  }
  .report-social a:hover,
  .report-social a:focus-visible {
  color: var(--col-grisoscuro);
  background: var(--col-humo);
  outline: none;
  }
  .report-share {
  margin-left: auto;
  }
  .report-share__desktop {
  display: flex;
  justify-content: flex-end;
  gap: .25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  }
  .report-share__desktop a,
  .report-share__desktop button,
  .report-share__mobile {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  color: var(--col-grismedio);
  background: transparent;
  border: 0;
  border-radius: 50%;
  font: inherit;
  font-size: 1.05rem;
  text-decoration: none;
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease;
  }
  .report-share__desktop a:hover,
  .report-share__desktop a:focus-visible,
  .report-share__desktop button:hover,
  .report-share__desktop button:focus-visible,
  .report-share__mobile:hover,
  .report-share__mobile:focus-visible {
  color: var(--col-grisoscuro);
  background: var(--col-humo);
  outline: none;
  }
  .report-share__mobile {
  display: none;
  }
  .report-share__status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  }
  .report-sidebar-overlay {
  position: fixed;
  inset: 0;
  z-index: 1001;
  background: rgb(0 0 0 / 52%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .28s ease, visibility 0s linear .28s;
  }
  .report-sidebar-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
  }
  .report-sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1002;
  display: flex;
  flex-direction: column;
  width: min(88vw, 390px);
  padding: 1.25rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  color: var(--col-fuente);
  background: var(--col-blanco);
  box-shadow: .8rem 0 2rem rgb(0 0 0 / 22%);
  visibility: hidden;
  transform: translateX(-105%);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), visibility 0s linear .3s;
  }
  .report-sidebar.is-open {
  visibility: visible;
  transform: translateX(0);
  transition-delay: 0s;
  }
  .report-sidebar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgb(0 0 0 / 12%);
  }
  .report-sidebar__logo {
  width: 145px;
  height: auto;
  }
  .report-sidebar__title {
  margin: 1.2rem 0 .75rem;
  color: var(--col-magenta);
  font-family: var(--font-san-serif);
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1.15;
  }
  .report-sidebar nav {
  flex: 1;
  }
  .report-sidebar__links {
  margin: 0;
  padding: 0;
  list-style: none;
  }
  .report-sidebar__links a {
  display: block;
  padding: .68rem .75rem;
  color: var(--col-fuente);
  border-left: 3px solid transparent;
  font-family: var(--font-san-serif);
  font-size: .98rem;
  line-height: 1.2;
  text-decoration: none;
  }
  .report-sidebar__links a:hover,
  .report-sidebar__links a:focus-visible {
  color: var(--col-magenta);
  background: rgb(255 64 119 / 8%);
  border-left-color: var(--col-magenta);
  outline: none;
  }
  .report-sidebar .report-social {
  justify-content: center;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgb(0 0 0 / 12%);
  }
  body.report-menu-open {
  overflow: hidden;
  }
  main [id] {
  scroll-margin-top: 84px;
  }
  @media only screen and (max-width: 640px) {
  .report-nav {
  height: 58px;
  }
  .report-nav__inner {
  gap: .35rem;
  width: calc(100% - 1rem);
  }
  .report-nav__brand {
  gap: .4rem;
  }
  .report-nav__menu {
  width: 38px;
  height: 38px;
  }
  .report-nav__logo {
  width: 78px;
  }
  .report-nav__title {
  font-size: clamp(.78rem, 3.5vw, 1rem);
  }
  .report-share__desktop {
  display: none;
  }
  .report-share__mobile {
  display: grid;
  width: 38px;
  height: 38px;
  font-size: 1rem;
  }
  main [id] {
  scroll-margin-top: 70px;
  }
  }

  /* ///////////////// CONTROLES DE DESPLAZAMIENTO ///////////////// */
  .hero-scroll-cue {
  position: relative;
  z-index: 10;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 1.25rem auto 0;
  padding: 0;
  color: var(--col-grisoscuro);
  background: var(--col-blanco);
  border: 2px solid var(--col-negro20);
  border-radius: 50%;
  box-shadow: 0 .4rem 1rem var(--trans-20negro);
  text-decoration: none;
  }
  .hero-scroll-cue i {
  color: var(--col-grismedio);
  font-size: 2rem;
  animation: hero-arrow-bounce 1.35s ease-in-out infinite;
  }
  .hero-scroll-cue:hover,
  .hero-scroll-cue:focus-visible {
  color: var(--col-grisoscuro);
  background: var(--col-humo);
  border-color: var(--col-grismedio);
  outline: 3px solid var(--trans-20negro);
  outline-offset: 3px;
  text-decoration: none;
  }
  @keyframes hero-arrow-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(.45rem); }
  }
  .back-to-hero {
  position: fixed;
  right: clamp(1rem, 2vw, 1.75rem);
  bottom: clamp(1rem, 2vw, 1.75rem);
  z-index: 999;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: var(--col-blanco);
  background: var(--col-magenta);
  border: 2px solid var(--col-blanco);
  border-radius: 50%;
  box-shadow: 0 .45rem 1rem var(--trans-30negro);
  font-size: 1.15rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(1rem);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
  }
  .back-to-hero.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: 0s;
  }
  .back-to-hero:hover,
  .back-to-hero:focus-visible {
  color: var(--col-blanco);
  background: var(--col-purpura);
  outline: 3px solid var(--trans-20negro);
  outline-offset: 3px;
  text-decoration: none;
  }
  @media only screen and (max-width: 768px) {
  .hero-scroll-cue {
  position: absolute;
  top: calc(100vh - 7vw - 5.5rem);
  top: calc(100dvh - 7vw - 5.5rem);
  right: -15vw;
  left: auto;
  width: 68px;
  height: 68px;
  margin: 0;
  }
  .hero-scroll-cue i {
  font-size: 2.2rem;
  }
  .back-to-hero {
  width: 44px;
  height: 44px;
  }
  }

  /* ///////////////// FOOTER CORPORATIVO ///////////////// */
  .corporate-footer {
  color: var(--col-fuente);
  background: var(--col-negro20);
  font-family: var(--font-san-serif);
  }
  .corporate-footer__inner {
  width: min(100% - 2rem, 1120px);
  margin-inline: auto;
  padding: clamp(2.5rem, 6vw, 4.5rem) 0 2rem;
  }
  .corporate-footer__social-block {
  display: grid;
  justify-items: center;
  gap: 1rem;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
  text-align: center;
  }
  .corporate-footer__social-block > strong {
  font-size: var(--fontsize-xsmall);
  font-weight: 800;
  line-height: var(--lineheight-xsmall);
  }
  .corporate-footer__social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .65rem;
  margin: 0;
  padding: 0;
  list-style: none;
  }
  .corporate-footer .corporate-footer__social a,
  .corporate-footer .corporate-footer__social a:link,
  .corporate-footer .corporate-footer__social a:visited {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--col-grismedio);
  background: var(--col-blanco);
  border: 1px solid var(--col-negro20);
  border-radius: 50%;
  box-shadow: 0 .2rem .5rem var(--trans-10negro);
  font-size: 1.05rem;
  text-decoration: none;
  transition: color .2s ease, background-color .2s ease, transform .2s ease;
  }
  .corporate-footer .corporate-footer__social a:hover,
  .corporate-footer .corporate-footer__social a:focus-visible {
  color: var(--col-grisoscuro) !important;
  background: var(--col-blanco);
  border-color: var(--col-grismedio);
  outline: 3px solid var(--col-negro20);
  outline-offset: 2px;
  text-decoration: none;
  transform: translateY(-2px);
  }
  .corporate-footer__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 2rem);
  }
  .corporate-footer__panel {
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--col-blanco);
  border: 1px solid var(--col-negro20);
  border-radius: var(--borderradius-small);
  box-shadow: 0 .4rem 1rem var(--trans-10negro);
  }

  .corporate-footer__logo {
  display: block;
  width: min(100%, 210px);
  height: auto;
  margin-bottom: 1.25rem;
  }
  .corporate-footer__list {
  display: grid;
  gap: .6rem;
  margin: 0;
  padding: 0;
  list-style: none;
  }
  .corporate-footer__list li {
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--col-grisclaro);
  font-size: .9rem;
  line-height: 1.45;
  }
  .corporate-footer__list li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
  }
  .corporate-footer__sources {
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  padding: 1.2rem 1.4rem;
  background: var(--col-humo);
  border-radius: var(--borderradius-xsmall);
  }
  .corporate-footer__sources ul {
  display: grid;
  gap: .4rem;
  margin: 0;
  padding: 0;
  list-style: none;
  }
  .corporate-footer__sources li {
  font-size: .8rem;
  line-height: 1.55;
  }
  .corporate-footer__bottom {
  padding: 1.1rem max(1rem, calc((100% - 1120px) / 2));
  color: var(--col-grisoscuro);
  background: var(--col-negro20);
  border-top: 1px solid var(--col-grisclaro);
  font-size: .78rem;
  line-height: 1.55;
  text-align: center;
  }
  .corporate-footer__legal {
  margin: 0 0 .35rem;
  }
  .corporate-footer__legal a,
  .corporate-footer__legal a:link,
  .corporate-footer__legal a:visited {
  color: var(--col-grisoscuro);
  font-weight: 700;
  text-decoration: none;
  }
  .corporate-footer__legal a:hover,
  .corporate-footer__legal a:focus-visible {
  color: var(--col-rojo) !important;
  text-decoration: underline;
  }
  .corporate-footer__copyright {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  }
  @media only screen and (max-width: 720px) {
  .corporate-footer__grid {
  grid-template-columns: 1fr;
  }
  }
  @media only screen and (max-width: 480px) {
  .corporate-footer__inner {
  width: min(100% - 1.25rem, 1120px);
  }
  .corporate-footer .corporate-footer__social a {
  width: 40px;
  height: 40px;
  }
  .corporate-footer__bottom {
  font-size: .72rem;
  }
  }
  @media (prefers-reduced-motion: reduce) {
  .report-nav,
  .report-sidebar,
  .report-sidebar-overlay,
  .corporate-footer .corporate-footer__social a,
  .back-to-hero {
  transition: none;
  }
  .hero-scroll-cue i {
  animation: none;
  }
  }