@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

/* ==========================================================================
   Watch Water / Custom Grid & Layout System
   Sistemas de Grillas y Utilidades Flex/Grid Responsive
   ========================================================================== */

/* Resets y caja base */
*,
*::before,
*::after {
    box-sizing: border-box;
}

div,
section {
    scroll-margin-top: calc(var(--salvaguarda-desktop) + 40px);
}

img,
video {
    max-width: 100%;
    display: block;
}

:root {
    --layout-gap: 24px;
    --lienzo-abierto-max-width: 1300px;
    --lienzo-cerrado-max-width: 980px;
    --font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --color-bg-page: #F7F7F7;
    --color-text: #171C25;
    --bordes-redondeados: 15px;

    --salvaguarda-movil: 80px;
    --salvaguarda-tablet: 80px;
    --salvaguarda-desktop: 120px;
    --unidad-de-espacio: 15px;
    --unidad-de-gap: 15px;
}

html,
body {
    margin: 0;
    padding: 0;
    font-family: var(--font-family);
    background-color: var(--color-blanco);
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.5;
}

/* ==========================================================================
   Contenedores de Lienzo / Ancho Máximo
   ========================================================================== */

.lienzo-abierto,
.lienzo-cerrado,
.lienzo-full {
    width: 100%;
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
}

.lienzo-abierto {
    max-width: var(--lienzo-abierto-max-width);
    margin-left: auto;
    margin-right: auto;
}

.lienzo-cerrado {
    max-width: var(--lienzo-cerrado-max-width);
    margin-left: auto;
    margin-right: auto;
}

.lienzo-full {
    padding-left: max(20px, calc((100vw - var(--lienzo-abierto-max-width)) / 2));
    padding-right: max(20px, calc((100vw - var(--lienzo-abierto-max-width)) / 2));
}

/* ==========================================================================
   Clases Principales de Layout / Grillas
   ========================================================================== */

.layout-grid {
    display: grid;
    gap: var(--layout-gap);
    width: 100%;
}

/* 1. Layout 1/1 (Columna completa) */
.grid-1 {
    display: grid;
    grid-template-columns: 1fr;
}

/* 2. Layout 1/2 + 1/2 (2 columnas iguales) */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

/* 3. Layout 1/3 + 2/3 */
.grid-2-alt-1 {
    display: grid;
    grid-template-columns: 1fr 2fr;
}

/* 4. Layout 2/3 + 1/3 */
.grid-2-alt-2 {
    display: grid;
    grid-template-columns: 2fr 1fr;
}

/* 5. Layout 2/5 + 3/5 */
.grid-2-alt-3 {
    display: grid;
    grid-template-columns: 2fr 3fr;
}

/* 5. Layout 3/5 + 2/5 */
.grid-2-alt-4 {
    display: grid;
    grid-template-columns: 3fr 2fr;
}

/* 6. Layout 1/3 + 1/3 + 1/3 (3 columnas iguales) */
.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

/* 7. Layout 1/4 + 2/4 + 1/4 (3 columnas, centro el doble) */
.grid-3-alt-1 {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
}

/* 8. Layout 1/4 + 1/4 + 1/4 + 1/4 (4 columnas iguales) */
.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.grid-4-alt-1 {
    display: grid;
    grid-template-columns: 3fr 4fr 4fr 4fr;
}

/* 9. Layout 1/5 x 5 (5 columnas iguales) */
.grid-5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

/* 10. Layout 1/6 x 6 (6 columnas iguales) */
.grid-6 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
}

.grid-6-alt-1 {
    display: grid;
    grid-template-columns: 2fr 2fr 2fr 3fr 2fr 2fr;
}

/* En dispositivos móviles (hasta 820px), las grillas se apilan verticalmente por defecto */
@media (max-width: 820px) {

    .grid-2,
    .grid-2-alt-1,
    .grid-2-alt-2,
    .grid-2-alt-3,
    .grid-2-alt-4,
    .grid-3,
    .grid-3-alt-1,
    .grid-4,
    .grid-4-alt-1,
    .grid-5,
    .grid-6,
    .grid-6-alt-1 {
        grid-template-columns: 1fr;
    }

    /* Colapso en orden reverso en móvil */
    .grid-reverse {
        display: flex;
        flex-direction: column-reverse;
    }
}

/* ==========================================================================
   Utilidades de Alineación, Altura y Comportamiento Responsive (Global, md, lg)
   ========================================================================== */

/* --- GLOBALES (Móvil y superior) --- */

.d-none {
    display: none;
}

/* Alineación Vertical (align-items en container / align-self en items) */
.align-top,
.items-start {
    align-items: start;
    align-self: start;
}

.align-center,
.items-center {
    align-items: center;
    align-self: center;
}

.align-bottom,
.items-end {
    align-items: end;
    align-self: end;
}

.align-baseline,
.items-baseline {
    align-items: baseline;
    align-self: baseline;
}

/* Alineación Horizontal (justify-items / justify-content / justify-self) */
.justify-left,
.justify-start {
    justify-content: start;
    justify-items: start;
    justify-self: start;
}

.justify-center {
    justify-content: center;
    justify-items: center;
    justify-self: center;
}

.justify-right,
.justify-end {
    justify-content: end;
    justify-items: end;
    justify-self: end;
}

.justify-between {
    justify-content: space-between;
}

.justify-around {
    justify-content: space-around;
}

/* Comportamiento de Alto */
.h-fill {
    height: 100%;
    min-height: 100%;
}

.h-stretch {
    align-items: stretch;
    align-self: stretch;
}

.h-content,
.h-auto {
    height: auto;
}

.sticky,
.sticky-top,
.col-sticky {
    position: static;
}

/* --- TABLETS Y SUPERIOR: md (min-width: 821px) --- */
@media (min-width: 821px) {
    .md-grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .md-grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .md-grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .md-grid-5 {
        grid-template-columns: repeat(5, 1fr);
    }

    .md-grid-6 {
        grid-template-columns: repeat(6, 1fr);
    }

    .md-align-top {
        align-items: start;
        align-self: start;
    }

    .md-align-center {
        align-items: center;
        align-self: center;
    }

    .md-align-bottom {
        align-items: end;
        align-self: end;
    }

    .md-justify-left {
        justify-content: start;
        justify-items: start;
        justify-self: start;
    }

    .md-justify-center {
        justify-content: center;
        justify-items: center;
        justify-self: center;
    }

    .md-justify-right {
        justify-content: end;
        justify-items: end;
        justify-self: end;
    }

    .md-h-fill {
        height: 100%;
        min-height: 100%;
    }

    .md-h-stretch {
        align-items: stretch;
        align-self: stretch;
    }

    .md-h-content {
        height: auto;
    }

    .md-flex {
        display: flex;
    }

    .md-grid {
        display: grid;
    }

    .md-d {
        display: block;
    }

    .md-none,
    .md-d-none {
        display: none;
    }

    .sticky,
    .sticky-top,
    .col-sticky {
        position: -webkit-sticky;
        position: sticky;
        top: calc(var(--salvaguarda-tablet, 80px) + 15px);
        align-self: start;
    }
}

/* --- DESKTOPS Y SUPERIOR: lg (min-width: 1040px) --- */
@media (min-width: 1040px) {
    .sticky,
    .sticky-top,
    .col-sticky {
        top: calc(var(--salvaguarda-desktop, 100px) + 15px);
    }

    .lg-grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .lg-grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .lg-grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .lg-grid-5 {
        grid-template-columns: repeat(5, 1fr);
    }

    .lg-grid-6 {
        grid-template-columns: repeat(6, 1fr);
    }

    .lg-align-top {
        align-items: start;
        align-self: start;
    }

    .lg-align-center {
        align-items: center;
        align-self: center;
    }

    .lg-align-bottom {
        align-items: end;
        align-self: end;
    }

    .lg-justify-left {
        justify-content: start;
        justify-items: start;
        justify-self: start;
    }

    .lg-justify-center {
        justify-content: center;
        justify-items: center;
        justify-self: center;
    }

    .lg-justify-right {
        justify-content: end;
        justify-items: end;
        justify-self: end;
    }

    .lg-h-fill {
        height: 100%;
        min-height: 100%;
    }

    .lg-h-stretch {
        align-items: stretch;
        align-self: stretch;
    }

    .lg-h-content {
        height: auto;
    }

    .lg-flex {
        display: flex;
    }

    .lg-d {
        display: block;
    }

    .lg-none,
    .lg-d-none {
        display: none;
    }
}

/* --- ALINEACIÓN DE CONTENIDORES (.cont-left, .cont-center, .cont-right) --- */
.cont-left {
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.cont-center {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cont-right {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.cont-left>*,
.cont-center>*,
.cont-right>* {
    width: auto;
}

.cont-left .botonera-horizontal,
.cont-center .botonera-horizontal,
.cont-right .botonera-horizontal {
    display: flex;
    width: auto;
}

.cont-left .botonera-horizontal {
    justify-content: flex-start;
    align-items: flex-start;
}

.cont-center .botonera-horizontal {
    justify-content: center;
    align-items: center;
}

.cont-right .botonera-horizontal {
    justify-content: flex-end;
    align-items: flex-end;
}

/* ==========================================================================
   Márgenes y paddings (Superiores e Inferiores)
   ========================================================================== */

.contenido-pagina>*:first-child {
    padding-top: var(--salvaguarda-movil);
}

@media (min-width: 821px) {
    .contenido-pagina>*:first-child {
        padding-top: var(--salvaguarda-tablet);
    }
}

@media (min-width: 1040px) {
    .contenido-pagina>*:first-child {
        padding-top: var(--salvaguarda-desktop);
    }
}

/* --- GLOBALES (Móvil y superior) --- */

/* Padding Inferior */
.padb-1 {
    padding-bottom: var(--unidad-de-espacio);
}

.padb-2 {
    padding-bottom: calc(var(--unidad-de-espacio)*2);
}

.padb-3 {
    padding-bottom: calc(var(--unidad-de-espacio)*3);
}

.padb-4 {
    padding-bottom: calc(var(--unidad-de-espacio)*4);
}

.padb-5 {
    padding-bottom: calc(var(--unidad-de-espacio)*5);
}

.padb-6 {
    padding-bottom: calc(var(--unidad-de-espacio)*6);
}

.padb-7 {
    padding-bottom: calc(var(--unidad-de-espacio)*7);
}

.padb-8 {
    padding-bottom: calc(var(--unidad-de-espacio)*8);
}

.padb-9 {
    padding-bottom: calc(var(--unidad-de-espacio)*9);
}

.padb-10 {
    padding-bottom: calc(var(--unidad-de-espacio)*10);
}

/* Padding Superior */
.padt-1 {
    padding-top: var(--unidad-de-espacio);
}

.padt-2 {
    padding-top: calc(var(--unidad-de-espacio)*2);
}

.padt-3 {
    padding-top: calc(var(--unidad-de-espacio)*3);
}

.padt-4 {
    padding-top: calc(var(--unidad-de-espacio)*4);
}

.padt-5 {
    padding-top: calc(var(--unidad-de-espacio)*5);
}

.padt-6 {
    padding-top: calc(var(--unidad-de-espacio)*6);
}

.padt-7 {
    padding-top: calc(var(--unidad-de-espacio)*7);
}

.padt-8 {
    padding-top: calc(var(--unidad-de-espacio)*8);
}

.padt-9 {
    padding-top: calc(var(--unidad-de-espacio)*9);
}

.padt-10 {
    padding-top: calc(var(--unidad-de-espacio)*10);
}

/* Margen Inferior */
.marb-1 {
    margin-bottom: var(--unidad-de-espacio);
}

.marb-2 {
    margin-bottom: calc(var(--unidad-de-espacio)*2);
}

.marb-3 {
    margin-bottom: calc(var(--unidad-de-espacio)*3);
}

.marb-4 {
    margin-bottom: calc(var(--unidad-de-espacio)*4);
}

.marb-5 {
    margin-bottom: calc(var(--unidad-de-espacio)*5);
}

.marb-6 {
    margin-bottom: calc(var(--unidad-de-espacio)*6);
}

.marb-7 {
    margin-bottom: calc(var(--unidad-de-espacio)*7);
}

.marb-8 {
    margin-bottom: calc(var(--unidad-de-espacio)*8);
}

.marb-9 {
    margin-bottom: calc(var(--unidad-de-espacio)*9);
}

.marb-10 {
    margin-bottom: calc(var(--unidad-de-espacio)*10);
}

/* Margen Superior */
.mart-1 {
    margin-top: var(--unidad-de-espacio);
}

.mart-2 {
    margin-top: calc(var(--unidad-de-espacio)*2);
}

.mart-3 {
    margin-top: calc(var(--unidad-de-espacio)*3);
}

.mart-4 {
    margin-top: calc(var(--unidad-de-espacio)*4);
}

.mart-5 {
    margin-top: calc(var(--unidad-de-espacio)*5);
}

.mart-6 {
    margin-top: calc(var(--unidad-de-espacio)*6);
}

.mart-7 {
    margin-top: calc(var(--unidad-de-espacio)*7);
}

.mart-8 {
    margin-top: calc(var(--unidad-de-espacio)*8);
}

.mart-9 {
    margin-top: calc(var(--unidad-de-espacio)*9);
}

.mart-10 {
    margin-top: calc(var(--unidad-de-espacio)*10);
}

/* --- TABLETS Y SUPERIOR: md (min-width: 821px) --- */
@media (min-width: 821px) {

    /* Padding Inferior */
    .md-padb-1 {
        padding-bottom: var(--unidad-de-espacio);
    }

    .md-padb-2 {
        padding-bottom: calc(var(--unidad-de-espacio)*2);
    }

    .md-padb-3 {
        padding-bottom: calc(var(--unidad-de-espacio)*3);
    }

    .md-padb-4 {
        padding-bottom: calc(var(--unidad-de-espacio)*4);
    }

    .md-padb-5 {
        padding-bottom: calc(var(--unidad-de-espacio)*5);
    }

    .md-padb-6 {
        padding-bottom: calc(var(--unidad-de-espacio)*6);
    }

    .md-padb-7 {
        padding-bottom: calc(var(--unidad-de-espacio)*7);
    }

    .md-padb-8 {
        padding-bottom: calc(var(--unidad-de-espacio)*8);
    }

    .md-padb-9 {
        padding-bottom: calc(var(--unidad-de-espacio)*9);
    }

    .md-padb-10 {
        padding-bottom: calc(var(--unidad-de-espacio)*10);
    }

    /* Padding Superior */
    .md-padt-1 {
        padding-top: var(--unidad-de-espacio);
    }

    .md-padt-2 {
        padding-top: calc(var(--unidad-de-espacio)*2);
    }

    .md-padt-3 {
        padding-top: calc(var(--unidad-de-espacio)*3);
    }

    .md-padt-4 {
        padding-top: calc(var(--unidad-de-espacio)*4);
    }

    .md-padt-5 {
        padding-top: calc(var(--unidad-de-espacio)*5);
    }

    .md-padt-6 {
        padding-top: calc(var(--unidad-de-espacio)*6);
    }

    .md-padt-7 {
        padding-top: calc(var(--unidad-de-espacio)*7);
    }

    .md-padt-8 {
        padding-top: calc(var(--unidad-de-espacio)*8);
    }

    .md-padt-9 {
        padding-top: calc(var(--unidad-de-espacio)*9);
    }

    .md-padt-10 {
        padding-top: calc(var(--unidad-de-espacio)*10);
    }

    /* Margen Inferior */
    .md-marb-1 {
        margin-bottom: var(--unidad-de-espacio);
    }

    .md-marb-2 {
        margin-bottom: calc(var(--unidad-de-espacio)*2);
    }

    .md-marb-3 {
        margin-bottom: calc(var(--unidad-de-espacio)*3);
    }

    .md-marb-4 {
        margin-bottom: calc(var(--unidad-de-espacio)*4);
    }

    .md-marb-5 {
        margin-bottom: calc(var(--unidad-de-espacio)*5);
    }

    .md-marb-6 {
        margin-bottom: calc(var(--unidad-de-espacio)*6);
    }

    .md-marb-7 {
        margin-bottom: calc(var(--unidad-de-espacio)*7);
    }

    .md-marb-8 {
        margin-bottom: calc(var(--unidad-de-espacio)*8);
    }

    .md-marb-9 {
        margin-bottom: calc(var(--unidad-de-espacio)*9);
    }

    .md-marb-10 {
        margin-bottom: calc(var(--unidad-de-espacio)*10);
    }

    /* Margen Superior */
    .md-mart-1 {
        margin-top: var(--unidad-de-espacio);
    }

    .md-mart-2 {
        margin-top: calc(var(--unidad-de-espacio)*2);
    }

    .md-mart-3 {
        margin-top: calc(var(--unidad-de-espacio)*3);
    }

    .md-mart-4 {
        margin-top: calc(var(--unidad-de-espacio)*4);
    }

    .md-mart-5 {
        margin-top: calc(var(--unidad-de-espacio)*5);
    }

    .md-mart-6 {
        margin-top: calc(var(--unidad-de-espacio)*6);
    }

    .md-mart-7 {
        margin-top: calc(var(--unidad-de-espacio)*7);
    }

    .md-mart-8 {
        margin-top: calc(var(--unidad-de-espacio)*8);
    }

    .md-mart-9 {
        margin-top: calc(var(--unidad-de-espacio)*9);
    }

    .md-mart-10 {
        margin-top: calc(var(--unidad-de-espacio)*10);
    }
}

/* --- DESKTOPS Y SUPERIOR: lg (min-width: 1040px) --- */
@media (min-width: 1040px) {

    /* Padding Inferior */
    .lg-padb-1 {
        padding-bottom: var(--unidad-de-espacio);
    }

    .lg-padb-2 {
        padding-bottom: calc(var(--unidad-de-espacio)*2);
    }

    .lg-padb-3 {
        padding-bottom: calc(var(--unidad-de-espacio)*3);
    }

    .lg-padb-4 {
        padding-bottom: calc(var(--unidad-de-espacio)*4);
    }

    .lg-padb-5 {
        padding-bottom: calc(var(--unidad-de-espacio)*5);
    }

    .lg-padb-6 {
        padding-bottom: calc(var(--unidad-de-espacio)*6);
    }

    .lg-padb-7 {
        padding-bottom: calc(var(--unidad-de-espacio)*7);
    }

    .lg-padb-8 {
        padding-bottom: calc(var(--unidad-de-espacio)*8);
    }

    .lg-padb-9 {
        padding-bottom: calc(var(--unidad-de-espacio)*9);
    }

    .lg-padb-10 {
        padding-bottom: calc(var(--unidad-de-espacio)*10);
    }

    /* Padding Superior */
    .lg-padt-1 {
        padding-top: var(--unidad-de-espacio);
    }

    .lg-padt-2 {
        padding-top: calc(var(--unidad-de-espacio)*2);
    }

    .lg-padt-3 {
        padding-top: calc(var(--unidad-de-espacio)*3);
    }

    .lg-padt-4 {
        padding-top: calc(var(--unidad-de-espacio)*4);
    }

    .lg-padt-5 {
        padding-top: calc(var(--unidad-de-espacio)*5);
    }

    .lg-padt-6 {
        padding-top: calc(var(--unidad-de-espacio)*6);
    }

    .lg-padt-7 {
        padding-top: calc(var(--unidad-de-espacio)*7);
    }

    .lg-padt-8 {
        padding-top: calc(var(--unidad-de-espacio)*8);
    }

    .lg-padt-9 {
        padding-top: calc(var(--unidad-de-espacio)*9);
    }

    .lg-padt-10 {
        padding-top: calc(var(--unidad-de-espacio)*10);
    }

    /* Margen Inferior */
    .lg-marb-1 {
        margin-bottom: var(--unidad-de-espacio);
    }

    .lg-marb-2 {
        margin-bottom: calc(var(--unidad-de-espacio)*2);
    }

    .lg-marb-3 {
        margin-bottom: calc(var(--unidad-de-espacio)*3);
    }

    .lg-marb-4 {
        margin-bottom: calc(var(--unidad-de-espacio)*4);
    }

    .lg-marb-5 {
        margin-bottom: calc(var(--unidad-de-espacio)*5);
    }

    .lg-marb-6 {
        margin-bottom: calc(var(--unidad-de-espacio)*6);
    }

    .lg-marb-7 {
        margin-bottom: calc(var(--unidad-de-espacio)*7);
    }

    .lg-marb-8 {
        margin-bottom: calc(var(--unidad-de-espacio)*8);
    }

    .lg-marb-9 {
        margin-bottom: calc(var(--unidad-de-espacio)*9);
    }

    .lg-marb-10 {
        margin-bottom: calc(var(--unidad-de-espacio)*10);
    }

    /* Margen Superior */
    .lg-mart-1 {
        margin-top: var(--unidad-de-espacio);
    }

    .lg-mart-2 {
        margin-top: calc(var(--unidad-de-espacio)*2);
    }

    .lg-mart-3 {
        margin-top: calc(var(--unidad-de-espacio)*3);
    }

    .lg-mart-4 {
        margin-top: calc(var(--unidad-de-espacio)*4);
    }

    .lg-mart-5 {
        margin-top: calc(var(--unidad-de-espacio)*5);
    }

    .lg-mart-6 {
        margin-top: calc(var(--unidad-de-espacio)*6);
    }

    .lg-mart-7 {
        margin-top: calc(var(--unidad-de-espacio)*7);
    }

    .lg-mart-8 {
        margin-top: calc(var(--unidad-de-espacio)*8);
    }

    .lg-mart-9 {
        margin-top: calc(var(--unidad-de-espacio)*9);
    }

    .lg-mart-10 {
        margin-top: calc(var(--unidad-de-espacio)*10);
    }
}

/* ==========================================================================
   Gap
   ========================================================================== */

.gap-1 {
    gap: var(--unidad-de-gap);
}

.gap-2 {
    gap: calc(var(--unidad-de-gap)*2);
}

.gap-3 {
    gap: calc(var(--unidad-de-gap)*3);
}

.gap-4 {
    gap: calc(var(--unidad-de-gap)*4);
}

.gap-5 {
    gap: calc(var(--unidad-de-gap)*5);
}

.gap-6 {
    gap: calc(var(--unidad-de-gap)*6);
}

.gap-7 {
    gap: calc(var(--unidad-de-gap)*7);
}

.gap-8 {
    gap: calc(var(--unidad-de-gap)*8);
}

.gap-v-1 {
    row-gap: var(--unidad-de-gap);
}

.gap-v-2 {
    row-gap: calc(var(--unidad-de-gap)*2);
}

.gap-v-3 {
    row-gap: calc(var(--unidad-de-gap)*3);
}

.gap-v-4 {
    row-gap: calc(var(--unidad-de-gap)*4);
}

.gap-v-5 {
    row-gap: calc(var(--unidad-de-gap)*5);
}

.gap-v-6 {
    row-gap: calc(var(--unidad-de-gap)*6);
}

.gap-v-7 {
    row-gap: calc(var(--unidad-de-gap)*7);
}

.gap-v-8 {
    row-gap: calc(var(--unidad-de-gap)*8);
}

/* ==========================================================================
   Anchos máximos
   ========================================================================== */

.wmax-25 {
    max-width: 25px;
}

.wmax-50 {
    max-width: 50px;
}

.wmax-100 {
    max-width: 100px;
}

.wmax-150 {
    max-width: 150px;
}

.wmax-200 {
    max-width: 200px;
}

.wmax-250 {
    max-width: 250px;
}

.wmax-300 {
    max-width: 300px;
}

.wmax-350 {
    max-width: 350px;
}

.wmax-400 {
    max-width: 400px;
}

.wmax-450 {
    max-width: 450px;
}

.wmax-500 {
    max-width: 500px;
}

.wmax-550 {
    max-width: 550px;
}

.wmax-600 {
    max-width: 600px;
}

.wmax-650 {
    max-width: 650px;
}

.wmax-700 {
    max-width: 700px;
}

.wmax-750 {
    max-width: 750px;
}

.wmax-800 {
    max-width: 800px;
}

.wmax-850 {
    max-width: 850px;
}

.wmax-900 {
    max-width: 900px;
}

.wmax-950 {
    max-width: 950px;
}

.wmax-1000 {
    max-width: 1000px;
}

/* --- TABLETS Y SUPERIOR: md (min-width: 821px) --- */
@media (min-width: 821px) {
    .md-wmax-25 {
        max-width: 25px;
    }

    .md-wmax-50 {
        max-width: 50px;
    }

    .md-wmax-100 {
        max-width: 100px;
    }

    .md-wmax-150 {
        max-width: 150px;
    }

    .md-wmax-200 {
        max-width: 200px;
    }

    .md-wmax-250 {
        max-width: 250px;
    }

    .md-wmax-300 {
        max-width: 300px;
    }

    .md-wmax-350 {
        max-width: 350px;
    }

    .md-wmax-400 {
        max-width: 400px;
    }

    .md-wmax-450 {
        max-width: 450px;
    }

    .md-wmax-500 {
        max-width: 500px;
    }

    .md-wmax-550 {
        max-width: 550px;
    }

    .md-wmax-600 {
        max-width: 600px;
    }

    .md-wmax-650 {
        max-width: 650px;
    }

    .md-wmax-700 {
        max-width: 700px;
    }

    .md-wmax-750 {
        max-width: 750px;
    }

    .md-wmax-800 {
        max-width: 800px;
    }

    .md-wmax-850 {
        max-width: 850px;
    }

    .md-wmax-900 {
        max-width: 900px;
    }

    .md-wmax-950 {
        max-width: 950px;
    }

    .md-wmax-1000 {
        max-width: 1000px;
    }
}

/* --- DESKTOPS Y SUPERIOR: lg (min-width: 1040px) --- */
@media (min-width: 1040px) {
    .lg-wmax-25 {
        max-width: 25px;
    }

    .lg-wmax-50 {
        max-width: 50px;
    }

    .lg-wmax-100 {
        max-width: 100px;
    }

    .lg-wmax-150 {
        max-width: 150px;
    }

    .lg-wmax-200 {
        max-width: 200px;
    }

    .lg-wmax-250 {
        max-width: 250px;
    }

    .lg-wmax-300 {
        max-width: 300px;
    }

    .lg-wmax-350 {
        max-width: 350px;
    }

    .lg-wmax-400 {
        max-width: 400px;
    }

    .lg-wmax-450 {
        max-width: 450px;
    }

    .lg-wmax-500 {
        max-width: 500px;
    }

    .lg-wmax-550 {
        max-width: 550px;
    }

    .lg-wmax-600 {
        max-width: 600px;
    }

    .lg-wmax-650 {
        max-width: 650px;
    }

    .lg-wmax-700 {
        max-width: 700px;
    }

    .lg-wmax-750 {
        max-width: 750px;
    }

    .lg-wmax-800 {
        max-width: 800px;
    }

    .lg-wmax-850 {
        max-width: 850px;
    }

    .lg-wmax-900 {
        max-width: 900px;
    }

    .lg-wmax-950 {
        max-width: 950px;
    }

    .lg-wmax-1000 {
        max-width: 1000px;
    }
}

/* ==========================================================================
   Alturas máximas
   ========================================================================== */

.hmax-25 {
    max-height: 25px;
}

.hmax-50 {
    max-height: 50px;
}

.hmax-100 {
    max-height: 100px;
}

.hmax-150 {
    max-height: 150px;
}

.hmax-200 {
    max-height: 200px;
}

.hmax-250 {
    max-height: 250px;
}

.hmax-300 {
    max-height: 300px;
}

.hmax-350 {
    max-height: 350px;
}

.hmax-400 {
    max-height: 400px;
}

.hmax-450 {
    max-height: 450px;
}

.hmax-500 {
    max-height: 500px;
}

.hmax-550 {
    max-height: 550px;
}

.hmax-600 {
    max-height: 600px;
}

.hmax-650 {
    max-height: 650px;
}

.hmax-700 {
    max-height: 700px;
}

.hmax-750 {
    max-height: 750px;
}

.hmax-800 {
    max-height: 800px;
}

.hmax-850 {
    max-height: 850px;
}

.hmax-900 {
    max-height: 900px;
}

.hmax-950 {
    max-height: 950px;
}

.hmax-1000 {
    max-height: 1000px;
}

/* --- TABLETS Y SUPERIOR: md (min-width: 821px) --- */
@media (min-width: 821px) {
    .md-hmax-25 {
        max-height: 25px;
    }

    .md-hmax-50 {
        max-height: 50px;
    }

    .md-hmax-100 {
        max-height: 100px;
    }

    .md-hmax-150 {
        max-height: 150px;
    }

    .md-hmax-200 {
        max-height: 200px;
    }

    .md-hmax-250 {
        max-height: 250px;
    }

    .md-hmax-300 {
        max-height: 300px;
    }

    .md-hmax-350 {
        max-height: 350px;
    }

    .md-hmax-400 {
        max-height: 400px;
    }

    .md-hmax-450 {
        max-height: 450px;
    }

    .md-hmax-500 {
        max-height: 500px;
    }

    .md-hmax-550 {
        max-height: 550px;
    }

    .md-hmax-600 {
        max-height: 600px;
    }

    .md-hmax-650 {
        max-height: 650px;
    }

    .md-hmax-700 {
        max-height: 700px;
    }

    .md-hmax-750 {
        max-height: 750px;
    }

    .md-hmax-800 {
        max-height: 800px;
    }

    .md-hmax-850 {
        max-height: 850px;
    }

    .md-hmax-900 {
        max-height: 900px;
    }

    .md-hmax-950 {
        max-height: 950px;
    }

    .md-hmax-1000 {
        max-height: 1000px;
    }
}

/* --- DESKTOPS Y SUPERIOR: lg (min-width: 1040px) --- */
@media (min-width: 1040px) {
    .lg-hmax-25 {
        max-height: 25px;
    }

    .lg-hmax-50 {
        max-height: 50px;
    }

    .lg-hmax-100 {
        max-height: 100px;
    }

    .lg-hmax-150 {
        max-height: 150px;
    }

    .lg-hmax-200 {
        max-height: 200px;
    }

    .lg-hmax-250 {
        max-height: 250px;
    }

    .lg-hmax-300 {
        max-height: 300px;
    }

    .lg-hmax-350 {
        max-height: 350px;
    }

    .lg-hmax-400 {
        max-height: 400px;
    }

    .lg-hmax-450 {
        max-height: 450px;
    }

    .lg-hmax-500 {
        max-height: 500px;
    }

    .lg-hmax-550 {
        max-height: 550px;
    }

    .lg-hmax-600 {
        max-height: 600px;
    }

    .lg-hmax-650 {
        max-height: 650px;
    }

    .lg-hmax-700 {
        max-height: 700px;
    }

    .lg-hmax-750 {
        max-height: 750px;
    }

    .lg-hmax-800 {
        max-height: 800px;
    }

    .lg-hmax-850 {
        max-height: 850px;
    }

    .lg-hmax-900 {
        max-height: 900px;
    }

    .lg-hmax-950 {
        max-height: 950px;
    }

    .lg-hmax-1000 {
        max-height: 1000px;
    }
}


/* ==========================================================================
   Estilos para contenedores de imágenes
   ========================================================================== */

.img-mask {
    background-color: #fafafa;
    border-radius: var(--bordes-redondeados);
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.img-mask img,
.img-mask video,
.img-mask iframe,
.bg-video,
.bg-video-yt {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
}