// Estilos generales del sitio
// ---------------------------
// 
//  Tabla de contenidos:
//
//   1.   Títulos
//   2.   Párrafos, listas y bloques de contenido
//   3.   Links de texto
//   4.   Formularios y campos
//   5.   Botones
//   6.   Fondos y líneas de división
//   7.   Página principal
//   8.   Compra / Venta
//   9.   Reviews
//  10.   Apparel
//  11.   Tiendas
//  12.   Patrocinadores
//  13.   Página de error
//  14.   Avisos legales
//  15.   Breadcrumbs
//  16.   Mi cuenta
//  17.   Avisos legales
//  18.   Paginador
//  19.   Tablas
//  20.   Pedidos



// 1. Títulos
// ----------
//
h1, h2, h3, h4, h5 {
    font-family: 'Roboto', sans-serif;
}
h1, h2 {
    color: $verde01;
}
h1 {
    font-size: rem-calc(20);
    line-height: rem-calc(24);
    @include breakpoint(medium) {
        font-size: rem-calc(40);
        line-height: rem-calc(48);
    }
    @include breakpoint(large) {
        font-size: rem-calc(60);
        line-height: rem-calc(60);
    }
}
h2 {
    font-size: rem-calc(20);
    line-height: rem-calc(24);
    @include breakpoint(medium) {
        font-size: rem-calc(25);
        line-height: rem-calc(30 );
    }
    @include breakpoint(large) {
        font-size: rem-calc(35);
        line-height: rem-calc(42);
    }
}
h3 {
    font-size: rem-calc(22);
    line-height: rem-calc(30);
}

// 2. Párrafos, listas y bloques de contenido
// ------------------------------------------
//
p, span, li, strong, blockquote, label {
    font-family: 'Roboto', sans-serif;
}
p, li, label {
    color: $blanco;
    font-weight: 500;
    font-size: rem-calc(14);
    line-height: rem-calc(16);
    @include breakpoint(large) {
        font-size: rem-calc(16);
        line-height: rem-calc(19);
    }
}
label {
    color: $gris03;
    font-family: 'Roboto', sans-serif;
    font-size: rem-calc(16);
    line-height: rem-calc(30);
}
.no-margin {
    margin: 0;
}


// 3. Links de texto
// -----------------
//
p, li {
    a {
        transition: 0.3s;
        color: inherit;
        &:hover, &:focus, &:active {
            transition: 0.3s;
            color: $verde01;
        }
    }
}

// 4. Formularios y campos
// -----------------------
//
form {
    span.form-error {
        display: none;
    }
    p.help-block-error {
        font-family: 'Roboto', sans-serif;
        ;
        font-size: $input-error-font-size;
        font-weight: $input-error-font-weight;
        color: $naranja01;
        display: block;
        margin-bottom: rem-calc(5);
    }
    .has-error {
        span.form-error {
            font-family: 'Roboto', sans-serif;
            ;
            font-size: $input-error-font-size;
            font-weight: $input-error-font-weight;
            color: $naranja01;
            display: block;
            margin-bottom: rem-calc(5);
        }
    }
    input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="color"], select, textarea {
        color: $gris03;
        font-family: 'Roboto', sans-serif;
        font-size: rem-calc(16);
        font-weight: 500;
        border: rem-calc(1) solid $gris01;
        box-shadow: none;
        &:hover, &:focus, &:active {
            background: none;
            box-shadow: none;
            border: rem-calc(1) solid $gris01;
        }
    }
}

input[type="number"] {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
}
.number-input {
    border: rem-calc(1) solid $gris01;
    display: inline-flex;
    width: rem-calc(80);
    @include breakpoint(large) {
        width: auto;
    }

    button, a {
        outline:none;
        -webkit-appearance: none;
        background-color: transparent;
        border: none;
        width: rem-calc(30);
        height: rem-calc(20);
        cursor: pointer;
        margin: 0;
        position: relative;
        &.menos {
            &:before {
                content: '-';
            }
        }
        &.mas {
            &:after {
                content: '+';
                color: $gris03;
            }
        }
    }
    input[type=number] {
        max-width: rem-calc(60);
        font-size: rem-calc(12);
        padding: 0;
        border: solid $gris01;
        color: $gris03;
        border-width: rem-calc(0 1);
        height: rem-calc(20);
        text-align: center;
        margin-bottom: 0;
    }
}
.cont-campo {
    position: relative;
    input[type="text"] {
        padding-left: rem-calc(35);
    }
    .icono {
        position: absolute;
        font-size: rem-calc(20);
        bottom: rem-calc(12);
        left: rem-calc(9);
        color: $gris01;
    }
}

// 5. Botones
// ----------
//
.button {
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
    font-size: rem-calc(15);
    font-weight: 700;
    color: $blanco;
    &.boton-gris {
        background: $gris02;
        &:hover, &:focus, &:active {
            color: $negro;
            background: $verde01;
        }
    }
    &.boton-negro {
        background: $negro;
        &:hover, &:focus, &:active {
            color: $negro;
            background: $verde01;
        }
    }
    &.boton-verde {
        background: $verde01;
        &:hover, &:focus, &:active {
            background: $gris01;
        }
    }

}


// 6. Fondos y líneas de división
// ------------------------------
//
.separador-5 {
    padding: rem-calc(2.5 0);
}
.separador-10 {
    padding: rem-calc(5 0);
}
.separador-20 {
    padding: rem-calc(10 0);
}
.separador-30 {
    padding: rem-calc(15 0);
}
.separador-40 {
    padding: rem-calc(20 0);
}
.separador-50 {
    padding: rem-calc(25 0);
}
.separador-60 {
    padding: rem-calc(30 0);
}
.separador-70 {
    padding: rem-calc(35 0);
}
.separador-80 {
    padding: rem-calc(40 0);
}
.separador-90 {
    padding: rem-calc(45 0);
}
.separador-100 {
    padding: rem-calc(50 0);
}
.banner-general {
    height: rem-calc(300);
    position: relative;
    @include breakpoint(medium) {
        height: rem-calc(400);
    }
    @include breakpoint(large) {
        height: rem-calc(470);
    }
    @include breakpoint(xlarge) {
        height: rem-calc(600);
    }
    .titulo {
        position: absolute;
        bottom: 0;
        left: 0;
    }
}
.titulo {
    border-left: rem-calc(6) solid $verde01;
    background: rgba(35,31,32,0.7);
    padding: rem-calc(10 30 30 10);
    color: $verde01;
    @include breakpoint(medium) {
        padding: rem-calc(20 30);
    }
    @include breakpoint(large) {
        width: rem-calc(650);
    }
}

.contenido-general {
    background: $blanco;
    margin: auto;
    padding: rem-calc(40 0 100 0);
    @include breakpoint(large) {
        padding: rem-calc(60 0 180 0);
    }
    @include breakpoint(xxlarge) {
        width: rem-calc(1200);
    }
    p {
        color: $gris03;
    }

}
body {
    background: $negro;
}
.background-publicitario {
    background-position: 50% top !important;
    background: $negro;
    background-repeat: no-repeat;
    padding-top: rem-calc(100);
    @include breakpoint(large) {
        padding-top: rem-calc(250);
    }
}
.background-estandar {
    background: url('../img/bg-circulo-verde.png') $gris03;
    background-repeat: no-repeat;
}


// 7. Página principal
// -------------------
//
.site-index {
    h1 {
        font-size: rem-calc(30);
        line-height: rem-calc(35);
        @include breakpoint(large) {
            font-size: rem-calc(60);
            line-height: rem-calc(65);
        }
        margin-bottom: rem-calc(50);
    }
    .slick-slide {
        img {
            width: 100%;
        }
    }
    .principal {
        position: relative;
        .textos {
            position: absolute;
            border-left: rem-calc(6) solid $verde01;
            transition: 0.3s;
            background: rgba(35,31,32,0.7);
            padding: rem-calc(10);
            @include vertical-center;
            width: rem-calc(180);
            @include breakpoint(medium) {
                padding: rem-calc(20);
                width: rem-calc(300);
            }
            @include breakpoint(large) {
                width: rem-calc(500);
            }
            .fecha {
                color: $verde01;
                font-family: 'Roboto', sans-serif;
                font-size: rem-calc(12);
                @include breakpoint(medium) {
                    font-size: rem-calc(16);
                }
            }
            p {
                color: $blanco;
                font-size: rem-calc(14);
                line-height: rem-calc(16);
                @include breakpoint(medium) {
                    font-size: rem-calc(20);
                    line-height: rem-calc(24);
                }
                @include breakpoint(large) {
                    font-size: rem-calc(28);
                    line-height: rem-calc(31);
                }
            }
            &:hover, &:focus, &:active {
                transition: 0.3s;
                background: rgba(35,31,32,0.9);
            }
        }
    }
    .slick-dots {
        li.slick-active {
            button::before {
                opacity: 1;
                color: $verde01;
            }
        }
        li {
            button::before {
                opacity: 1;
                color: $blanco;
                font-size: rem-calc(10);
            }
        }
    }

    .slick-dotted.slick-slider {
        margin-bottom: 0;
    }

    img.banner {
        margin: rem-calc(15 auto);
    }
    .contenido {
        background: $gris03;
        padding: rem-calc(50 15 220 15);
        h2 {
            margin: rem-calc(60 0 30 20);
        }
        .publicacion-general {
            p {
                @include breakpoint(medium) {
                    min-height: rem-calc(40);
                }
            }
            .con-imagen {
                position: relative;
                margin-bottom: rem-calc(20);
                display: inline-block;
                h3 {
                    color: $negro;
                    font-size: rem-calc(24);
                    font-weight: 700;
                    @include absolute-center;
                    transition: 0.3s;
                    opacity: 0;
                }
                .mascara {
                    transition: 0.3s;
                    background: rgba(255,255,255,0.0);
                    width: 100%;
                    height: 100%;
                    position: absolute;
                }
            }
            &:hover, &:focus, &:active {
                .con-imagen {
                    h3 {
                        transition: 0.3s;
                        opacity: 1;
                    }
                    .mascara {
                        transition: 0.3s;
                        background: rgba(255,255,255,0.8);
                    }
                }
            }
        }
    }
}

.publicacion-general {
    h3 {
        transition: 0.3s;
        color: $negro;
        font-weight: 500;
        font-size: rem-calc(14);
        line-height: rem-calc(16);
        @include breakpoint(large) {
            font-size: rem-calc(16);
            line-height: rem-calc(19);
        }
    }
    .con-imagen {
        position: relative;
        margin-bottom: rem-calc(20);
        display: inline-block;
        .vermas {
            font-family: 'Roboto', sans-serif;
            color: $negro;
            font-size: rem-calc(24);
            font-weight: 700;
            @include absolute-center;
            transition: 0.3s;
            opacity: 0;
        }
        .mascara {
            transition: 0.3s;
            background: rgba(255,255,255,0.0);
            width: 100%;
            height: 100%;
            position: absolute;
        }
    }
    &:hover, &:focus, &:active {
        p, h3 {
            transition: 0.3s;
            color: $verde01;
        }

        .con-imagen {
            .vermas {
                transition: 0.3s;
                opacity: 1;
            }
            .mascara {
                transition: 0.3s;
                background: rgba(255,255,255,0.8);
            }
        }
    }
}


// 8. Compra / Venta
// -----------------
//
.articulo-index, .articulo-articulos {

    .banner-general {
        background: url('../img/banner-compraventa.jpg') no-repeat;
        background-position: 50%;
        background-size: cover;
    }
    .contenido-general {
        .cont-producto {
            position: relative;
            h3 {
                font-weight: 700;
            }
            p {
                color: $negro;
            }
            .button {
                width: rem-calc(115);
                @include breakpoint(large) {
                    width: rem-calc(100);
                }
                @include breakpoint(xlarge) {
                    width: rem-calc(110);
                }
                height: rem-calc(45);
                position: relative;
                span {
                    @include absolute-center;
                }
            }
            &:before {
                content: '';
                position: absolute;
                background: $gris01;
                height: 60%;
                width: rem-calc(1);
                right: rem-calc(-10);
                @include vertical-center;
            }
            @include breakpoint(small only) {
                border-bottom: rem-calc(1) solid $gris01;
                padding-bottom: rem-calc(20);
                margin-bottom: rem-calc(20);
            }
        }
        @include breakpoint(medium only) {
            .column-block:nth-child(even) {
                .cont-producto {
                    &:before {
                        background: transparent;
                    }
                }
            }
        }
        @include breakpoint(large) {
            .column-block:nth-child(3n+0) {
                .cont-producto {
                    &:before {
                        background: transparent;
                    }
                }
            }
        }
    }
    .btn-comprar {
        margin-bottom: rem-calc(30);
        position: relative;

        .dropdown-pane {
            margin-top: rem-calc(20) !important;
            border: none;
            background-color: $gris03;
            top: rem-calc(40) !important;
            right: rem-calc(15) !important;
            left: auto !important;

            ul.menu {
                li {
                    border-bottom: rem-calc(1) solid $gris02;
                    a {
                        font-family: 'Roboto', sans-serif;
                        padding: rem-calc(10 0);
                        transition: 0.3s;
                        color: $gris01;
                        display: inline-block;
                        &:hover, &:focus, &:active {
                            transition: 0.3s;
                            color: $verde01;
                        }
                    }
                }
            }
            .arrow {
                position: absolute;
                border-right: rem-calc(15) solid transparent;
                border-top: rem-calc(15) solid transparent;
                border-left: rem-calc(15) solid transparent;
                border-bottom: rem-calc(15) solid $gris03;
                top: rem-calc(-30);
                right: 0;
            }
        }
    }
}
.articulo-articulo {
    .slider-for {
        img {
            margin: auto;
        }
    }
    hr.divisor-imagenes {
        width: 80%;
    }
    .slider-nav {
        .slick-slide {
            cursor: pointer;
            img {
                width: rem-calc(90);
                margin: auto;
            }
            &:hover, &:focus, &:active {
                img {
                    opacity: 0.7;
                }
            }
        }
    }
    .cont-detalle-producto {
        @include breakpoint(small only) {
            padding-top: rem-calc(30);
        }
        h3 {
            color: $negro;
            font-weight: 700;
            margin-bottom: rem-calc(20);
            &:after {
                content: '';
                display: block;
                background: $verde01;
                width: rem-calc(30);
                height: rem-calc(5);
                margin-top: rem-calc(10);
            }
        }
        p {
            span {
                font-weight: 300;
                &.destacado {
                    font-weight: 500;
                    color: $naranja01;
                }
            }
        }
        .caracteristica {
            margin-bottom: rem-calc(20);
            a {
                font-family: 'Roboto', sans-serif;
                font-weight: 300;
                color: $gris03;
                display: inline-block;
                margin-right: rem-calc(20);
                &:hover, &:focus, &:active, &.activo {
                    font-weight: 700;
                    color: $negro;
                }
            }
        }
        .colores {
            margin: rem-calc(5 0 20 0);
            a {
                width: rem-calc(30);
                height: rem-calc(30);
                border: rem-calc(1) solid $negro;
                margin-right: rem-calc(10);
                display: inline-block;
                border-radius: rem-calc(40);
                &:hover, &:focus, &:active, &.activo {
                    border: rem-calc(1) solid $naranja01;
                }

            }
        }
        .cont-botones {
            border-top: rem-calc(1) solid $gris02;
            border-bottom: rem-calc(1) solid $gris02;
            padding: rem-calc(20 0);
            .button {
                margin: 0;
            }
        }
    }
}


.site-vende-tu-equipo {
    background: url('../img/bg-circulo-verde.png') $gris03;
    background-repeat: no-repeat;
    background-position: 50% top;
    padding-top: rem-calc(100);
    @include breakpoint(large) {
        padding-top: rem-calc(250);
    }
    .banner-general {
        background: url('../img/banner-vende.jpg') no-repeat;
        background-position: 50%;
        background-size: cover;
    }
    .contenido-general {
        p {
            color: $gris02;
            a {
                color: $verde01;

            }
        }
        label {
            color: $gris03;
        }
        h2 {
            color: $negro;
            border-bottom: rem-calc(2) solid $gris01;
            margin-bottom: rem-calc(30);
        }
    }
}

.cont-modal-mensajes {
    background: $blanco;
    padding: rem-calc(60 30);
    @include absolute-center;
}


// 9. Publicaciones
// ----------------
//
.publicacion-index, .publicacion-publicaciones {
    .contenido-general {
        h2 {
            margin-bottom: rem-calc(20);
            a {
                color: $negro;
                &:hover, &:focus, &:active {
                    transition: 0.3s;
                    color: $verde01;
                }
            }
        }
        .cont-publicacion {
            h3 {
                color: $negro;
                margin-bottom: rem-calc(20);
                font-weight: 700;
                font-size: rem-calc(20);
                line-height: rem-calc(24);
            }
            img {
                margin-bottom: rem-calc(15);
            }
            .fecha {
                color: $gris01;
                font-family: 'Roboto', sans-serif;
                font-size: rem-calc(12);
                margin-bottom: rem-calc(10);
            }
            p {
                transition: 0.3s;
                color: $gris02;
                font-size: rem-calc(14);
            }
            &:hover, &:focus, &:active {
                h3 {
                    transition: 0.3s;
                    color: $verde01;
                }
            }
        }
    }
}
.publicacion-index {
    .banner-general {
        background: url('../img/banner-reviews.jpg') no-repeat;
        background-position: 50%;
        background-size: cover;
        padding-top: rem-calc(100);
        @include breakpoint(large) {
            padding-top: rem-calc(250);
        }
    }
}

.publicacion-publicaciones {
}

.publicacion-publicacion {

}


// 10. Productos
// -----------
//

.producto-index, .producto-categoria {
    .contenido-general {
        .cont-producto {
            position: relative;

            h3 {
                font-weight: 700;
                color: $negro;
            }
            p {
                color: $negro;
            }
            &:before {
                content: '';
                position: absolute;
                background: $gris01;
                height: 60%;
                width: rem-calc(1);
                right: rem-calc(-10);
                @include vertical-center;
            }
            @include breakpoint(small only) {
                border-bottom: rem-calc(1) solid $gris01;
                padding-bottom: rem-calc(20);
                margin-bottom: rem-calc(20);
            }
        }
        @include breakpoint(medium only) {
            .column-block:nth-child(even) {
                .cont-producto {
                    &:before {
                        background: transparent;
                    }
                }
            }
        }
        @include breakpoint(large) {
            .column-block:nth-child(3n+0) {
                .cont-producto {
                    &:before {
                        background: transparent;
                    }
                }
            }
        }
    }
}


.producto-index {
    background: url('../img/bg-circulo-verde.png') $gris03;
    background-repeat: no-repeat;
    background-position: 50% top;
    .banner-general {
        background: url('../img/banner-apparel.jpg') no-repeat;
        background-position: 50%;
        background-size: cover;
    }

}

.producto-categoria {
    .contenido-general {
        padding: rem-calc(50 0 180 0);
        h3 {
            font-weight: 700;
            color: $negro;
        }

        /*        ul.menu-categoria {
                    margin-top: rem-calc(30);
                    li {
                        height: rem-calc(60);
                        a {
                            font-size: rem-calc(20);
                            font-weight: 500;
                            color: $gris02;
                            font-weight: 300;
                            padding: rem-calc(10 0);
                            border-bottom: rem-calc(1) solid $gris02;
                            &:hover, &:focus, &:active, &.activo {
                                color: $negro;
                                border-bottom: rem-calc(4) solid $verde01;
                                font-weight: 700;
                            }
                        }
                    }
                }*/
        .cont-producto {
            h3 {
                font-weight: 700;
                color: $negro;
            }

            /*            .precio {
                            font-family: 'Roboto', sans-serif;
                            font-size: rem-calc(20);
                            font-weight: 700;
                            color: $negro;
                        }*/
        }
    }
}
.producto-producto {
    .slider-for {
        img {
            margin: auto;
        }
    }
    hr.divisor-imagenes {
        width: 80%;
    }
    .slider-nav {
        .slick-slide {
            cursor: pointer;
            img {
                width: rem-calc(90);
                margin: auto;
            }
            &:hover, &:focus, &:active {
                img {
                    opacity: 0.7;
                }
            }
        }
    }
    .cont-detalle-producto {
        font-family: 'Roboto', sans-serif;
        font-size: rem-calc(14);
        line-height: rem-calc(16);
        @include breakpoint(large) {
            font-size: rem-calc(16);
            line-height: rem-calc(19);
        }
        font-weight: 400;
        p {
            font-weight: 400;
        }

        @include breakpoint(small only) {
            padding-top: rem-calc(30);
        }
        h1 {
            font-weight: 700;
            color: $negro;
            font-size: rem-calc(30);
            line-height: rem-calc(30);
            @include breakpoint(medium) {
                font-size: rem-calc(40);
                line-height: rem-calc(40);
            }
        }
        h3 {
            color: $negro;
            font-weight: 700;
            margin-bottom: rem-calc(20);
            &:after {
                content: '';
                display: block;
                background: $verde01;
                width: rem-calc(30);
                height: rem-calc(5);
                margin-top: rem-calc(10);
            }
        }
        .cantidad-grid {
            display: flex;
            gap: rem-calc(10);
        }
        .number-input {
            margin-bottom: rem-calc(20);
        }

        .caracteristica {
            margin-bottom: rem-calc(20);
            a {
                font-family: 'Roboto', sans-serif;
                font-weight: 300;
                color: $gris03;
                display: inline-block;
                margin-right: rem-calc(20);
                &:hover, &:focus, &:active, &.activo {
                    font-weight: 700;
                    color: $negro;
                }
            }
        }

    }
}


// 11. Tiendas
// -----------
//
.tienda-index {
    .banner-general {
        background: url('../img/banner-tiendas.jpg') no-repeat;
        background-position: 50%;
        background-size: cover;
    }
    .contenido-general {
        h3 {
            margin-bottom: rem-calc(20);
            font-weight: 700;
            font-size: rem-calc(20);
            line-height: rem-calc(24);
        }
        img {
            margin-bottom: rem-calc(15);
        }
        h2 {
            color: $negro;
            border-bottom: rem-calc(2) solid $gris01;
            margin-bottom: rem-calc(30);
        }
        .mapa {
            height: rem-calc(350);
        }
    }
}
.tienda-tienda {
    .slider-for {
        img {
            margin: auto;
        }
    }
    hr.divisor-imagenes {
        width: 80%;
    }
    .slider-nav {
        .slick-slide {
            cursor: pointer;
            img {
                width: rem-calc(90);
                margin: auto;
            }
            &:hover, &:focus, &:active {
                img {
                    opacity: 0.7;
                }
            }
        }
    }

    .redes {
        a {
            font-size: rem-calc(25);
            transition: 0.3s;
            color: $negro;
            &:hover, &:focus, &:active {
                transition: 0.3s;
                color: $verde01;
            }
        }
    }
}


// 12. Patrocinadores
// ------------------
//
.patrocinador-index {
    .banner-general {
        background: url('../img/banner-patrocinadores.jpg') no-repeat;
        background-position: 50%;
        background-size: cover;
    }
    .contenido-general {
        .column-block {
            img {
                margin: auto;
                display: block;
            }
        }
    }
}

// 15. Breadcrumbs
// ---------------
//
.row-breadcrumbs {
    background: $gris03;
    position: relative;
    ul.breadcrumbs {
        background: $gris03;
        margin-bottom: 0;
        padding: rem-calc(20 0);
        @include breakpoint(large) {
            padding: rem-calc(40 0);
        }
        li {
            font-family: 'Roboto', sans-serif;
            text-transform: inherit;
            font-size: rem-calc(12);
            @include breakpoint(medium) {
                font-size: rem-calc(14);
            }
            @include breakpoint(large) {
                font-size: rem-calc(20);
            }
            color: $gris01;
            a {
                color: $gris01;
                text-transform: inherit;
                &:hover, &:focus, &:active {
                    color: $verde01;
                }
            }
            &.current {
                color: $blanco;
            }
        }
    }
    .breadcrumbs li:not(:last-child)::after {
        content: '//';
        color: $verde01;
    }
}


// 16. Mi cuenta
// -------------
//
.mi-cuenta-index, .mi-cuenta-signup, .mi-cuenta-login, .mi-cuenta-request-password-reset, .mi-cuenta-direccion, .mi-cuenta-articulos {
    .contenido-general {
        h1 {
            @extend h2;
            color: $negro;
            border-bottom: rem-calc(2) solid $gris01;
            margin-bottom: rem-calc(30);
        }
        .col-enlace {
            padding-top: rem-calc(10);
            a {
                font-family: 'Roboto', sans-serif;
                color: $gris02;
                font-size: rem-calc(15);
                &:hover, &:focus, &:active {
                    color: $verde01;
                }
            }
        }

    }
    ul.menu {
        li {
            a {
                color: $gris03;
                &:hover, &:active, &focus {
                    color: $verde01;
                }
            }
        }
    }
    .row-boton {
        label {
            font-size: rem-calc(12);
            @include breakpoint(xlarge) {
                font-size: rem-calc(14);
            }
        }
    }
}

// 17. Avisos legales
// ------------------
//
.site-aviso-privacidad, .site-terminos-y-condiciones {
    .banner-general {
        height: rem-calc(200);
    }
}
.site-aviso-de-privacidad-modal {
    p {
        color: $gris03;
    }
}

// 18. Paginador
// -------------
//
ul.pagination {
    margin: 0;
    padding: rem-calc(10 0);
    @include breakpoint(large) {
        padding: rem-calc(40 0);
    }
    .pagination-previous, .pagination-next {
        a {
            background: none;
            color: $gris03;
            font-family: 'Roboto', sans-serif;
            &:before, &:after {
                content: '';
            }
            &:hover, &:focus, &:active {
                background: none;
                color: $verde01;
            }
        }
    }
    .current {
        background: $verde01;
        color: $gris03;
    }
    li {
        display: inline-block;
    }
}

// 19. Tablas
// ----------
//


// 20. Pedidos
// -----------
//
.pedido-index, .pedido-envio,
.pedido-pago, .pedido-finalizar {
    .contenido-general {
        h1 {
            @extend h2;
            color: $negro;
            border-bottom: rem-calc(2) solid $gris01;
            margin-bottom: rem-calc(30);
        }
        .linea-progreso {
            margin-bottom: rem-calc(50);
            ul.menu {
                li {
                    a {
                        font-family: 'Roboto', sans-serif;
                        color: $negro;
                        font-size: rem-calc(16);
                        border-bottom: rem-calc(10) solid $gris01;
                        margin-right: rem-calc(8);
                        padding-left: 0;
                        max-width: rem-calc(170);
                        &:hover, &:focus, &:active, &.activo {
                            border-bottom: rem-calc(10) solid $verde01;
                        }
                    }
                }
            }
        }
        .row-titulos-tabla {
            h4 {
                font-size: rem-calc(18);
                @include breakpoint(large) {
                    font-size: rem-calc(20);
                }
                font-weight: 700;
                color: $gris03;
            }
        }
        .row-registro {
            font-family: 'Roboto', sans-serif;
            color: $gris03;
            padding: rem-calc(20 15);
            font-size: rem-calc(14);
            position: relative;
            @include breakpoint(large) {
                font-size: rem-calc(16);
            }
            h4 {
                font-size: rem-calc(16);
                font-weight: 700;
                color: $gris03;
                @include breakpoint(large) {
                    font-size: rem-calc(18);
                }
            }
            p {
                font-size: rem-calc(14);
                line-height: rem-calc(22);
                margin-bottom: 0;
                color: $gris02;
                strong {
                    color: $gris03;
                }
            }
            .centrado-v {
                padding-top: rem-calc(10);
                @include breakpoint(medium) {
                    padding-top: rem-calc(30);
                }
            }
            .borrar-registro {
                position: absolute;
                font-size: rem-calc(20);
                right: rem-calc(20);
                color: $naranja01;
                top: rem-calc(10);
                @include breakpoint(large) {
                    top: rem-calc(50);
                }
                &:hover, &:focus, &:active {
                    color: $gris03;
                }
            }
        }
        .row-registro:nth-child(even) {
            background: $gris00;
        }
        .row-total {
            margin-top: rem-calc(20);
            h4 {
                font-weight: 700;
            }
        }
    }
}

.pedido-envio {
    h3 {
        font-weight: 700;
    }
    .cont-direccion {
        padding: rem-calc(10);
        background: $gris00;
        margin-bottom: rem-calc(30);
        transition: 0.3s;
        border-bottom: rem-calc(3) solid transparent;
        &:hover, &:focus, &:active, &.activo {
            transition: 0.3s;
            border-bottom: rem-calc(3) solid $verde01;
        }
        p {
            font-size: rem-calc(14);
            line-height: rem-calc(16);
            color: $gris02;
        }
    }
}

.pedido-pago {
    h3 {
        font-weight: 700;
    }
}

.pedido-finalizar {
    .mensaje-exito, .mensaje-error {
        padding: rem-calc(20);
        background: $gris00;
        h3 {
            font-weight: 700;
        }
    }
    .mensaje-exito {
        h3 {
            i {
                color: $verde01;
            }
        }
    }
    .mensaje-error {
        h3 {
            i {
                color: $naranja01;
            }
        }
    }
}

// 20. Pedidos
// -----------
//
.site-busqueda {
    .contenido-general {
        h1 {
            @extend h2;
            color: $negro;
            border-bottom: rem-calc(2) solid $gris01;
            margin-bottom: rem-calc(30);
        }
        .cont-reultado {
            margin-bottom: rem-calc(20);
            @include breakpoint(large) {
                margin-bottom: rem-calc(40);
            }
            img {
                margin-bottom: rem-calc(20);
            }

            h3 {
                @include breakpoint(large) {
                    margin-top: rem-calc(50);
                }
                margin-bottom: rem-calc(5);
                font-weight: 700;
                font-size: rem-calc(16);
                line-height: rem-calc(20);
                @include breakpoint(large) {
                    font-size: rem-calc(20);
                    line-height: rem-calc(24);
                }
                a {
                    color: $negro;
                    &:hover, &:focus, &:active {
                        transition: 0.3s;
                        color: $verde01;
                    }
                }
            }
            .categoria {
                font-family: 'Roboto', sans-serif;
                font-size: rem-calc(14);
                margin-bottom: rem-calc(10);
                color: $gris03;
                font-style: italic;
            }
            p {
                color: $gris02;
                font-size: rem-calc(14);
            }
        }
    }
}