/* 
    hojas de estilos base 
*/
@import url('./normalize.css');
@import url('./animate.css');
/*
    tipografías
*/
@font-face {
    font-family: 'GothamBook';
    src: url('./webfonts/gotham_book.eot');
    src: url('./webfonts/gotham_book.eot?#iefix') format('embedded-opentype'),
         url('./webfonts/gotham_book.woff') format('woff'),
         url('./webfonts/gotham_book.ttf') format('truetype'),
         url('./webfonts/gotham_book.svg?#GothamBook') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GothamBold';
    src: url('./webfonts/gotham_bold.eot');
    src: url('./webfonts/gotham_bold.eot?#iefix') format('embedded-opentype'),
         url('./webfonts/gotham_bold.woff') format('woff'),
         url('./webfonts/gotham_bold.ttf') format('truetype'),
         url('./webfonts/gotham_bold.svg?#GothamBold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'AGaramondProRegular';
    src: url('./webfonts/a_garamond_pro_regular.eot');
    src: url('./webfonts/a_garamond_pro_regular.eot?#iefix') format('embedded-opentype'),
         url('./webfonts/a_garamond_pro_regular.woff') format('woff'),
         url('./webfonts/a_garamond_pro_regular.ttf') format('truetype'),
         url('./webfonts/a_garamond_pro_regular.svg?#AGaramondProRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'AGaramondProItalic';
    src: url('./webfonts/a_garamond_pro_italic.eot');
    src: url('./webfonts/a_garamond_pro_italic.eot?#iefix') format('embedded-opentype'),
         url('./webfonts/a_garamond_pro_italic.woff') format('woff'),
         url('./webfonts/a_garamond_pro_italic.ttf') format('truetype'),
         url('./webfonts/a_garamond_pro_italic.svg?#AGaramondProItalic') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'FontelloIcons';
    src: url('./webfonts/fontello.eot');
    src: url('./webfonts/fontello.eot?#iefix') format('embedded-opentype'),
         url('./webfonts/fontello.woff') format('woff'),
         url('./webfonts/fontello.ttf') format('truetype'),
         url('./webfonts/fontello.svg?#FontelloIcons') format('svg');
    font-weight: normal;
    font-style: normal;
}
/* 
    css principal
*/
*, *::before, *::after {
    padding: 0;
    margin: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
html, body {
    width: 100%;
    height: 100%;
    min-height: 100%;
}
html {
    font-size: 10px;
}
body {
    background: #FFFFFF;
    color: #333333;
    font-family: 'GothamBook';
    font-size: 1.4rem;
    line-height: 150%;
}
b, strong {
    font-family: 'GothamBold';
    font-weight: normal;
}
i, em {
    font-family: 'AGaramondProItalic';
    font-style: normal;
}
ul, li {
    list-style-type: square;
    margin-left: 2.60%;
}
/*
    galería
*/
.indice {
    display: block;
    position: absolute !important;
    right: 1rem;
    bottom: 0.75rem;
    z-index: 2;
}
.indice span {
    display: inline-block;
    vertical-align: bottom;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: rgba(255,255,255,0.45);
    width: 0.75rem;
    height: 0.75rem;
    margin-left: 0.25rem;
    cursor: pointer;
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
}
.indice span.activo {
    background: rgba(255,255,255,1);
    -webkit-transform: scale(1);
    transform: scale(1);
}
.fAnterior, .fSiguiente {
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    outline: 0;
    /* evitar drag and drop */
    -moz-user-select: -moz-none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.fAnterior:active, 
.fSiguiente:active {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
}
.fAnterior::before,
.fSiguiente::before {
    color: currentColor;
    font-family: monospace;
    font-size: 3.2rem;
}
.fAnterior::before {
    content: '\02039';
}
.fSiguiente::before {
    content: '\0203A';
}
.fxGaleria {
    overflow: hidden;
    position: relative;
}
.fxGaleria > *:not(.indice):not(.fSiguiente):not(.fAnterior) {
    pointer-events: none;
    opacity: 0;
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    -webkit-transition: opacity 1s;
    transition: opacity 1s;
}
.fxGaleria > *:not(.indice):not(.fSiguiente):not(.fAnterior).activo {
    pointer-events: all;
    opacity: 1;
    position: relative !important;
}
/* 
    iconos y otros elementos comunes 
*/
.icono::before {
    display: inline-block;
    font-family: 'FontelloIcons';
}
.icono.menu::before {
    content: '\0e80f';
}
.icono.facebook::before {
    content: '\0f30c';
}
.icono.twitter::before {
    content: '\0f309';
}
.icono.instagram::before {
    content: '\0f32d';
}
.icono.lupa::before {
    content: '\0e800';
}
.icono.compartir::before {
    content: '\0e801';
}
.icono.mas::before {
    content: '\0e802';
}
.icono.subir::before {
    content: '\0e803';
}
.icono.puntos::before {
    content: '\0e818';
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}
.limpiador {
    display: block;
    height: 0;
    overflow: hidden;
    clear: both;
}
.contenedor {
    max-width: 1074px;
    width: 100%;
    margin: 0 auto;
    position: relative;
}
@-webkit-keyframes caminar {
    from { background-position: 0px 0px; }
    to { background-position: 16px 0px; }
}
@keyframes caminar {
    from { background-position: 0px 0px; }
    to { background-position: 16px 0px; }
}
.caramelo {
    display: block;
    background: -webkit-linear-gradient(45deg, #333 11.5%, #FFF 13.5%, #FFF 36.5%, #333 38.5%, #333 61.5%, #FFF 63.5%, #FFF 86.5%, #333 88.5%);
    background: linear-gradient(45deg, #333 11.5%, #FFF 13.5%, #FFF 36.5%, #333 38.5%, #333 61.5%, #FFF 63.5%, #FFF 86.5%, #333 88.5%);
    background-size: 16px 16px;
    height: 8px;
    -webkit-animation: caminar 0.5s linear infinite;
    animation: caminar 0.5s linear infinite;
}
/*
    elementos específicos
*/
#encabezado {
    background: #FFFFFF;
    text-align: right;
    height: 15rem;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 4;
    -webkit-box-shadow: 0 0 2.1rem rgba(0,0,0,0.45);
    box-shadow: 0 0 2.1rem rgba(0,0,0,0.45);
    -webkit-transition: height 0.5s ease;
    transition: height 0.5s ease;
}
#idiomas_redes {
    border-bottom: 1px solid #CBCBCB;
    height: 3.6rem;
}
#idiomas_redes .contenedor {
    text-align: right;
}
#idiomas_redes a {
    display: inline-block;
    text-decoration: none;
}
#idiomas_redes a:first-child {
    margin-left: 51.21%;
}
#idiomas_redes a:last-child {
    margin-right: 6.42%;
}
#idiomas_redes .idioma {
    color: #CBCBCB;
    font-size: 85.714%;
    line-height: 2rem;
    margin-top: 0.8rem;
    margin-right: 2.51%;
    margin-bottom: 0.8rem;
    position: relative;
    float: left;
}
#idiomas_redes .idioma:hover,
#idiomas_redes .idioma.activo {
    color: #808080;
    font-family: 'GothamBold';
}
#idiomas_redes .idioma:hover::before,
#idiomas_redes .idioma.activo::before {
    content: '\000A0';
    display: block;
    border: 0.2rem currentColor;
    border-style: solid none none solid;
    width: 0.7rem;
    height: 0.7rem;
    margin: 0 auto;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
#idiomas_redes .icono {
    border-radius: 50%;
    background: #CBCBCB;
    color: #FFFFFF;
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    text-align: center;
    margin-top: 0.8rem;
    margin-left: 1.58%;
    margin-bottom: 0.8rem;
    -webkit-transition: -webkit-transform 0.25s, background 0.5s, color 0.5s, margin 0.35s;
    transition: transform 0.25s, background 0.5s, color 0.5s, margin 0.35s;
    /**/
    font-size: 0;
    word-spacing: 0;
    letter-spacing: 0;
}
#idiomas_redes .icono::before {
    font-size: 1.4rem;
}
#idiomas_redes .icono:hover {
    background: #F1F1F1;
    color: #4D4D4D;
    -webkit-transform: scale(2);
    transform: scale(2);
}
#encabezado h1 {
    background: url(../pics/logotipo_color.png) center left no-repeat;
    background-size: contain;
    color: transparent;
    cursor: pointer;
    width: 24.6rem;
    height: 11.3rem;
    margin-left: 6.61%;
    -webkit-transition-property: margin, width, height;
    transition-property: margin, width, height;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
    /**/
    font-size: 0;
    word-spacing: 0;
    letter-spacing: 0;
}
#encabezado .icono.lupa {
    display: block;
    color: currentColor;
    font-size: 157.142%;
    position: absolute;
    top: 3.6rem;
    right: 0;
    -webkit-transition-property: top, -webkit-transform;
    transition-property: top, transform;
    -webkit-transition-duration: 0.35s;
    transition-duration: 0.35s;
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
}
#encabezado .icono.lupa:hover {
    -webkit-transform: scale(2);
    transform: scale(2);
}
#encabezado .icono.lupa:active {
    -webkit-transform: none;
    transform: none;
}
#menusuperior {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    color: #808080;
    text-align: left;
    height: 2rem;
    overflow: hidden;
    position: absolute;
    top: 3.6rem;
    left: 51.21%;
    right: 6.42%;
    -webkit-transition-property: top, right;
    transition-property: top, right;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
}
#menusuperior a {
    -webkit-flex-grow: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    -webkit-flex-basis: auto;
    flex-basis: auto;
    display: inline-block;
    color: currentColor;
    text-decoration: none;
    font-size: 92.857%;
    line-height: 2rem;
    border-left: 0.1rem solid;
    padding: 0 0.7rem;
}
#menusuperior a:hover,
#menusuperior .activo {
    color: #808080;
    font-family: 'GothamBold';
}
#menusuperior a.icono.menu {
    display: none;
}
#menusuperior a:last-child {
    padding-right: 0;
}
#encabezado .boton {
    display: inline-block;
    background: #FFFFFF;
    color: currentColor;
    text-decoration: none;
    font-family: 'GothamBold';
    line-height: 100%;
    padding: 1.3rem 2.4rem;
    position: absolute;
    right: 6.42%;
    bottom: -2.1rem;
    z-index: 1;
    -webkit-transition: background 0.35s, color 0.35s, -webkit-box-shadow 0.15s, -webkit-transform 0s, right 0.35s, bottom 0.35s;
    transition: background 0.35s, color 0.35s, box-shadow 0.15s, transform 0s, right 0.35s, bottom 0.35s;
}
#encabezado .boton::before,
#encabezado .boton::after {
    content: '\000A0';
    pointer-events: none;
    border: 0 solid currentColor;
    position: absolute;
}
#encabezado .boton::before {
    border-width: 0.2rem;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
#encabezado .boton::after {
    border-width: 0.1rem;
    top: 0.3rem;
    left: 0.3rem;
    right: 0.3rem;
    bottom: 0.3rem;
}
#encabezado .boton:hover {
    background: #4D4D4D;
    color: #FFFFFF;
    -webkit-box-shadow: 0 0 1.2rem rgba(0,0,0,0.45);
    box-shadow: 0 0 1.2rem rgba(0,0,0,0.45);
}
#encabezado .boton:active {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
}
#encabezado.compacto {
    height: 7.5rem;
}
#encabezado.compacto #idiomas_redes a:last-child {
    margin-right: calc(9.4rem + 1.58%) !important;
    margin-right: 10.4rem; /* 9.4rem del botón + 1rem de espacio */
}
#encabezado.compacto h1 {
    width: 7.8rem;
    height: 3.6rem;
    margin-top: 0.15rem;
}
#encabezado.compacto .icono.lupa {
    top: 0.9rem;
}
#encabezado.compacto #menusuperior {
    top: 0.9rem;
    right: calc(9.4rem + 1.58%) !important;
    right: 10.4rem; /* 9.4rem del botón + 1rem de espacio */
}
#encabezado.compacto .boton {
    font-size: 78.57%;
    line-height: 1.6rem;
    padding: 0.4rem 1.2rem;
    right: 0;
    bottom: 4.4rem;
}
#encabezado.compacto .boton::before,
#encabezado.compacto .boton::after {
    border-width: 1px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
#encabezado.compacto .boton:hover {
    -webkit-box-shadow: 0 0 0.6rem rgba(0,0,0,0.35);
    box-shadow: 0 0 0.6rem rgba(0,0,0,0.35);
}
#preludio {
    min-height: 100%;
    height: 100%;
    width: 100%;
    background: whitesmoke;
    padding-top: 15rem;
}
#preludio .fxGaleria {
    min-height: 100%;
    height: 100%;
    width: 100%;
    position: relative;
}
#preludio .fxGaleria > div:not(.indice) {
    min-height: 100%;
    height: 100%;
}
#preludio .fxGaleria .contenedor {
    text-align: right;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
#preludio .fxGaleria img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
#preludio .fxGaleria blockquote {
    display: inline-block;
    text-align: left;
    width: 48.79%;
    padding: 5rem 6.2rem 5rem 5rem;
    position: relative;
}
#preludio .fxGaleria blockquote::before {
    content: '\000A0';
    background: rgba(255,255,255,0.8);
    width: 200%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: -1;
}
#preludio .fxGaleria blockquote strong {
    display: inline-block;
    margin-bottom: 1rem;
}
#preludio .fxGaleria blockquote em {
    display: inline-block;
    margin-bottom: 1rem;
    font-size: 321.428%;
    line-height: 100%;
}
#preludio .indice {
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1.4rem;
}
#preludio .indice span {
    width: 1.2rem;
    height: 1.2rem;
    margin: 0 0.5rem;
    background: #333333;
    -webkit-box-shadow: 0 0 0 1px rgba(255,255,255,0.45);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.45);
}
#preludio .indice span.activo {
    background: #FFFFFF;
    -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,0.25);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.25);
}
#preludio .fAnterior, 
#preludio .fSiguiente {
    display: block;
    background: #333333;
    color: #FFFFFF;
    width: 2.6rem;
    height: 12rem;
    margin: auto 0;
    line-height: 12rem;
    text-align: center;
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
}
#preludio .fAnterior { left: 0; }
#preludio .fSiguiente { right: 0; }
#somos {
    padding: 6.2rem 5.77%;
    overflow: hidden;
}
#somos > div {
    text-align: center;
    padding: 1.7rem 9.12%;
    position: relative;
}
#somos .batiente {
    display: block;
    border: 0px solid #F0F0F0;
    width: 6px;
    position: absolute;
    top: 32px;
    bottom: 32px;    
}
#somos .batiente.derecho {
    border-width: 0 3px 0 1px;
    right: 0;
}
#somos .batiente.izquierdo {
    border-width: 0 1px 0 3px;
    left: 0;
}
#somos .batiente::before, 
#somos .batiente::after{
    content: ' ';
    display: block;
    background-color: #F0F0F0;
    background-image: url(../pics/batiente.png);
    background-repeat: no-repeat;
    width: 32px;
    height: 32px;
    position: absolute;
}
#somos .batiente.izquierdo::before {
    top: -32px;
    left: -3px;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
#somos .batiente.derecho::before {
    top: -32px;
    right: -3px;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}
#somos .batiente.derecho::after {
    right: -3px;
    bottom: -32px;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
#somos .batiente.izquierdo::after {
    left: -3px;
    bottom: -32px;
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
}
#somos p:first-of-type {
    font-size: 171.428%;
    line-height: 125%;
}
#somos .decoracion.rosa {
    display: block;
    background: transparent url(../pics/decoracion_rosa.png) center center no-repeat;
    background-size: contain;
    width: 3.6rem;
    height: 1.6rem;
    margin: 2rem auto;
}
#bienvenida {
    text-align: center;
    position: relative;
}
#bienvenida > div:first-child {
    margin: 0.5rem;
    overflow: hidden;
    font-size: 0;
    word-spacing: 0;
    letter-spacing: 0;
}
#bienvenida img {
    display: block;
    object-fit: cover;
    border: 0.5rem solid #FFFFFF;
    width: 25%;
    height: auto;
    float: left;
}
#bienvenida .enmarcado {
    border: 0.9rem solid #FFFFFF;
    background: #FFFFFF;
    min-width: 38.5rem;
    width: 33.333%;
    padding: 3rem;
    margin: auto;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
#bienvenida .enmarcado::before, #bienvenida .enmarcado::after {
    content: '\000A0';
    pointer-events: none;
    border: 0 solid currentColor;
    position: absolute;
}
#bienvenida .enmarcado::before {
    border-width: 4px;
    top: 0; left: 0; right: 0; bottom: 0;
}
#bienvenida .enmarcado::after {
    border-width: 1px;
    top: 8px; left: 8px; right: 8px; bottom: 8px;
}
#bienvenida em {
    display: inline-block;
    font-size: 457.14%;
    line-height: 100%;
    margin-bottom: 0.6rem;
}
#bienvenida .decoracion.greca {
    display: block;
    background: url(../pics/decoracion_greca.png) center center no-repeat;
    background-size: contain;
    width: 181px;
    height: 20px;
    margin: 0 auto;
    position: relative;
}
#contamos {
    text-align: center;
    padding: 5.6rem 5.21%;
    margin: 0 auto;
}
#contamos p {
    width: 66%;
    margin: 0 auto 2.1rem;
}
#contamos i {
    font-size: 200%;
    line-height: 125%;
}
#contamos b {
    display: block;
    font-size: 85.714%;
    margin-bottom: 0.5rem;
}
#contamos a {
    display: inline-block;
    vertical-align: middle;
    text-decoration: none;
    color: #4D4D4D;
    font-size: 142.85%;
    letter-spacing: 2px;
    padding: 1.6rem 3.2rem;
    position: relative;
    -webkit-transition: background 0.35s, color 0.35s, -webkit-box-shadow 0.35s, -webkit-transform 0s;
    transition: background 0.35s, color 0.35s, box-shadow 0.35s, transform 0s;
}
#contamos a::before, #contamos a::after {
    content: '\000A0';
    pointer-events: none;
    border: solid currentColor;
    position: absolute;
}
#contamos a::before {
    border-width: 0.4rem;
    top: 0; left: 0; right: 0; bottom: 0;
}
#contamos a::after {
    border-width: 0.1rem;
    top: 0.7rem; left: 0.7rem; right: 0.7rem; bottom: 0.7rem;
}
#contamos a:hover {
    background: #4D4D4D;
    color: #FFFFFF;
    -webkit-box-shadow: 0 0 1.2rem rgba(0,0,0,0.45);
    box-shadow: 0 0 1.2rem rgba(0,0,0,0.45);
}
#contamos a:active {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
}
#contamos .flecha {
    pointer-events: none;
    display: inline-block;
    background: #C8C8C8;
    color: #C8C8C8;
    width: 10.89%;
    height: 1px;
    margin: 0 3.53%;
    position: relative;
    /**/
    font-size: 0;
    word-spacing: 0;
    letter-spacing: 0;
    white-space: nowrap;
}
#contamos .flecha::before, #contamos .flecha::after {
    position: absolute;
    top: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
#contamos .flecha.izquierda::before,
#contamos .flecha.derecha::after {
    font-size: 16px;
    line-height: 100%;
    letter-spacing: -4px;
}
#contamos .flecha.izquierda::before { 
    content: '>>>'; 
    right: 99.9%; 
}
#contamos .flecha.derecha::after { 
    content: '<<<'; 
    left:99.9%; 
}
#contamos .flecha.izquierda::after,
#contamos .flecha.derecha::before {
    content: '\000A0';
    height: 16px;
    border: 8px solid transparent;
}
#contamos .flecha.izquierda::after {
    border-left-color: currentColor;
    border-right: none;
    left: 99%;
}
#contamos .flecha.derecha::before {
    border-right-color: currentColor;
    border-left: none;
    right: 99%;
}
#losproductos {
    background: #B1B1B1;
    padding: 6.9rem 0;
    text-align: center;
    overflow: hidden;
}
#losproductos > div {
    display: inline-block;
    max-width: 112.4rem;
    width: 98%;
    padding: 4.2rem 0;
    position: relative;
}
#losproductos > div::before, #losproductos > div::after {
    content: '\000A0';
    pointer-events: none;
    border: 0 solid #E5E5E5;
    position: absolute;
    left: 0;
    right: 0;
}
#losproductos > div::before {
    border-width: 5px 0 5px;
    top: 0; bottom: 0;
}
#losproductos > div::after {
    border-width: 1px 0 1px;
    top: 9px; bottom: 9px;
}
#losproductos a {
    display: inline-table;
    border: 1.1rem solid #F0F0F0;
    background-color: #4D4D4D;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    color: currentColor;
    width: 25rem;
    height: 15rem;
    margin: 1.2rem;
    vertical-align: top;
    text-decoration: none;
    position: relative;
    -webkit-transition: -webkit-box-shadow 0.25s ease;
    transition: box-shadow 0.25s ease;
}
#losproductos a::before {
    content: '\000A0';
    display: block;
    border: 0.1rem solid currentColor;
    position: absolute;
    top: 0.4rem;
    left: 0.4rem;
    right: 0.4rem;
    bottom: 0.4rem;
}
#losproductos a::after {
    content: '\000A0';
    display: block;
    background: #E5E5E5;
    position: absolute;
    top: 33.333%;
    left: 0;
    right: 0;
    bottom: 33.333%;
}
#losproductos a:hover {
    -webkit-box-shadow: 0 0 1.2rem rgba(0,0,0,0.45);
    box-shadow: 0 0 1.2rem rgba(0,0,0,0.45);
}
#losproductos a:active {
    -webkit-animation-fill-mode: none;
    animation-fill-mode: none;
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
}
#losproductos a:last-child {
    color: #FFFFFF;
}
#losproductos a:last-child::before {
    border-color: #333333;
}
#losproductos a:last-child::after {
    background: #808080;
}
#losproductos a strong {
    display: table-cell;
    vertical-align: middle;
    font-size: 112.5%;
    line-height: 125%;
    position: relative;
    z-index: 1;
}
#losproductos a:nth-child(1) {
    background-image: url(../pics/producto_fondo_a.jpg);
}
#losproductos a:nth-child(2) {
    background-image: url(../pics/producto_fondo_b.jpg);
}
#losproductos a:nth-child(3) {
    background-image: url(../pics/producto_fondo_c.jpg);
}
#losproductos a:nth-child(4) {
    background-image: url(../pics/producto_fondo_d.jpg);
}
#losproductos a:nth-child(5) {
    background-image: url(../pics/producto_fondo_e.jpg);
}
#losproductos a:nth-child(6) {
    background-image: url(../pics/producto_fondo_f.jpg);
}
#losproductos a:nth-child(7) {
    background-image: url(../pics/producto_fondo_g.jpg);
}
#premisas {
    background: #F1F1F1;
    color: #4D4D4D;
    padding: 3rem 0;
    overflow: hidden;
}
#premisas .contenedor > * {
    background-position: left center;
    background-repeat: no-repeat;
    background-size: 14.89% auto;
    border-bottom: 1px solid currentColor;
    padding: 3.6rem 3.6rem 4.2rem 14.89%;
    margin: 0 9.21%;
}
#premisas .contenedor > :last-child {
    border-bottom: none;
}
#premisas .contenedor > :nth-child(1) {
    background-image: url(../pics/icono_camion.png);
}
#premisas .contenedor > :nth-child(2) {
    background-image: url(../pics/icono_asesoria.png);
}
#premisas .contenedor > :nth-child(3) {
    background-image: url(../pics/icono_tijeras.png);
}
#premisas .contenedor > :nth-child(4) {
    background-image: url(../pics/icono_flechas.png);
}
#premisas strong {
    display: inline-block;
    font-size: 112.5%;
    line-height: 100%;
    margin-bottom: 0.7rem;
}
#clientes {
    background: #F1F1F1;
    text-align: center;
    padding: 1.9rem 0 5.1rem;
    overflow: hidden;
    position: relative;
}
#clientes .decoracion {
    display: block;
    background: transparent url(../pics/decoracion_greca.png) center center no-repeat;
    background-size: contain;
    width: 18.1rem;
    height: 2rem;
    margin: 0 auto 0.9rem;
}
#clientes em {
    display: inline-block;
    font-size: 457.14%;
    line-height: 100%;
    margin-bottom: 1rem;
}
#clientes p {
    margin-bottom: 3rem;
}
#clientes > .contenedor {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    justify-content: center;
}
#clientes > .contenedor span {
    -webkit-flex-grow: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    -webkit-flex-basis: auto;
    flex-basis: auto;
    display: inline-block;
    margin: 0 1rem;
}
#testimonios {
    background: #E5E5E5;
    padding: 2.4rem 0 3.8rem;
    overflow: hidden;
}
#testimonios > div:first-child {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
}
#testimonios .testimonio {
    -webkit-flex: 1 0 auto;
    flex: 1 0 auto;
    width: 33.333%;
    padding: 0 5.4rem;
    position: relative;
}
#testimonios .testimonio:not(:first-child)::before {
    content: '\000A0';
    border: 0 solid #CBCBCB;
    border-width: 0 0.4rem 0 0.1rem;
    width: 0.9rem;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
}
#testimonios em {
    display: inline-block;
    font-size: 171.428%;
    line-height: 100%;
    margin-bottom: 2.6rem;
}
#fotoseparador {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 400px;
}
#fotoseparador.home {
    background-image: url(../pics/fotoseparador_home.jpg);
}
#fotoseparador.nosotros {
    background-image: url(../pics/fotoseparador_nosotros.jpg);
}
#fotoseparador.noticias {
    background-image: url(../pics/fotoseparador_noticias.jpg);
}
#fotoseparador.contacto {
    background-image: url(../pics/fotoseparador_contacto.jpg);
}
#fotoseparador.productos {
    height: 0;
}
#pie {
    color: #FFFFFF;
    background: url(../pics/pie_patron.jpg) center top repeat;
    padding: 4.1rem 0 7.9rem 0;
}
#pie > .contenedor {
    padding: 0 6.4rem 0 3.6rem;
}
#pie a {
    display: inline-block;
    border-bottom: 1px dashed transparent;
    color: currentColor;
    text-decoration: none;
}
#pie a:hover {
    border-bottom-color: currentColor;
}
#direccion {
    background: url(../pics/logotipo_mono.png) right top no-repeat;
    text-align: right;
    padding-top: 7.7rem;
    position: relative;
    float: right;
}
#direccion::before {
    content: '\000A0';
    border-right: 0.1rem solid #989898;
    position: absolute;
    top: 6.2rem;
    right: -2rem;
    bottom: 3.2rem;
}
#direccion p:first-child {
    line-height: 112.5%;
}
#direccion a[href^='mailto'] {
    font-size: 121.42%;
    margin-top: 6rem;
}
#direccion div:last-child {
    position: absolute;
    top: 11.2rem;
    right: -3.6rem;
    -webkit-transform: translate(100%,0);
    transform: translate(100%,0);
}
#direccion .icono {
    display: block;
    border-radius: 50%;
    background: #CBCBCB;
    color: #4D4D4D;
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    text-align: center;
    margin-bottom: 0.8rem;
    -webkit-transition: -webkit-transform 0.35s, background 0.5s, color 0.5s;
    transition: transform 0.35s, background 0.5s, color 0.5s;
    /**/
    font-size: 0;
    word-spacing: 0;
    letter-spacing: 0;
}
#direccion .icono::before {
    font-size: 1.4rem;
}
#direccion .icono:hover {
    color: #FFFFFF;
    background: #808080;
    border-bottom-color: transparent;
    -webkit-transform: scale(2);
    transform: scale(2);
}
#menuinferior a {
    line-height: 100%;
    margin-bottom: 2.2rem;
}
#leyendas {
    color: #B2B2B2;
    font-size: 92.85%;
    line-height: 120%;
    position: absolute;
    left: 3.6rem;
    bottom: 0;
}
/*
    interiores
*/
#fotobanner {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 41.4rem;
    margin-top: 15rem;
    margin-bottom: 4.6rem;
}
#fotobanner.nosotros {
    background-image: url(../pics/fotobanner_nosotros.jpg);
}
#fotobanner.productos {
    height: 0;
}
#fotobanner.contacto {
    background-image: url(../pics/fotobanner_contacto.jpg);
}
#fotobanner.noticias {
    background-image: url(../pics/fotobanner_noticias.jpg);
}
#bienvenido {
    margin-bottom: 4.6rem;
}
#bienvenido > div {
    text-align: center;
    position: relative;
    padding: 0 7.63%;
    margin: 0 5.77%;
}
#bienvenido .batiente {
    display: block;
    border: 0px solid #E5E5E5;
    width: 6px;
    position: absolute;
    top: 32px;
    bottom: 32px;    
}
#bienvenido .batiente.derecho {
    border-width: 0 3px 0 1px;
    right: 0;
}
#bienvenido .batiente.izquierdo {
    border-width: 0 1px 0 3px;
    left: 0;
}
#bienvenido .batiente::before, 
#bienvenido .batiente::after{
    content: '\000A0';
    display: block;
    background: #E5E5E5 url(../pics/batiente.png) center center no-repeat;
    width: 32px;
    height: 32px;
    position: absolute;
}
#bienvenido .batiente.izquierdo::before {
    top: -32px;
    left: -3px;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
#bienvenido .batiente.derecho::before {
    top: -32px;
    right: -3px;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}
#bienvenido .batiente.derecho::after {
    right: -3px;
    bottom: -32px;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
#bienvenido .batiente.izquierdo::after {
    left: -3px;
    bottom: -32px;
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
}
#bienvenido em {
    font-size: 457.14%;
    line-height: 120%;
}
#bienvenido p {
    margin-bottom: 3.2rem;
}
#bienvenido .decoracion.greca {
    display: block;
    background: url(../pics/decoracion_greca.png) center center no-repeat;
    width: 100%;
    height: 20px;
    overflow: hidden;
    position: relative;
    opacity: 0.35;
}
#bienvenido .decoracion.greca::before,
#bienvenido .decoracion.greca::after {
    content: '\000A0';
    border-bottom: 1px solid #AFAFAF;
    width: 50%;
    height: 0;
    position: absolute;
    top: 6px;
}
#bienvenido .decoracion.greca::before { left: -34px; }
#bienvenido .decoracion.greca::after { right: -34px; }
#bienvenido .decoracion.rosa {
    display: block;
    background: transparent url(../pics/decoracion_rosa.png) center center no-repeat;
    background-size: contain;
    width: 54px;
    height: 27px;
    margin: 2rem auto;
}
#historia, #mision, #vision, #valores {
    text-align: center;
    margin-bottom: 4.6rem;
    position: relative;
}
#historia > div, #mision > div, #vision > div {
    position: relative;
    padding: 1rem 6.70%;
    margin-left: 10.89%;
    margin-right: 10.89%;
}
#historia strong:first-of-type, 
#mision strong:first-of-type, 
#vision strong:first-of-type, 
#valores strong:first-of-type {
    display: inline-block;
    text-align: center;
    font-family: 'AGaramondProRegular';
    font-weight: normal;
    font-size: 2.8rem;
    line-height: 100%;
    letter-spacing: 0.9rem;
    /*padding: 0.9rem 4.2rem 0.3rem 5.1rem;*/
    padding: 0.9rem 2.8rem 0.3rem 3.7rem;
    position: relative;
    z-index: 1;
}
#historia > div::before, #historia > div::after {
    content: '\000A0';
    pointer-events: none;
    border: 0 solid #B2B2B2;
    position: absolute;
}
#historia > div::before {
    border-width: 4px;
    top: 0; left: 0; right: 0; bottom: 0;
}
#historia > div::after {
    border-width: 1px;
    top: 8px; left: 8px; right: 8px; bottom: 8px;
}
#historia strong:first-of-type {
    background: #FFFFFF;
    border: 4px solid #B2B2B2;
    -webkit-transform: translateY(-2.8rem);
    transform: translateY(-2.8rem);
}
#historia p {
    margin-bottom: 3.2rem;
}
#mision > div::before, #vision > div::before {
    content: '\000A0';
    height: 9px;
    border: 0 solid #E5E5E5;
    border-width: 4px 0 1px 0;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}
#mision p, #vision p {
    font-size: 2.8rem;
    line-height: 125%;
    margin-bottom: 3.2rem;
}
#valores > div {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: center;
    justify-content: center;
    margin-bottom: 8.5rem;
}
#valores > div > * {
    -webkit-flex-grow: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    -webkit-flex-basis: 20%;
    flex-basis: 20%;
    letter-spacing: 1px;
    padding: 1.3rem 2rem;
}
#valores > div > *:not(:first-child) {
    border: 0 solid #E5E5E5;
    border-left-width: 1px;
}
#valores b:first-of-type {
    display: block;
    font-size: 125%;
}
#valores p {
    font-size: 100%;
}
#productos {
    background: url(../pics/productos_patron.jpg) center top repeat-x;
    min-height: 652px;
}
#productos > div:nth-child(1) {
    /* menú */
    background: rgba(128,128,128,0.35);
    min-height: 4.8rem;
}
#productos > div:nth-child(1) > div {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    padding: 0 22.6rem 0 5.77%;
}
#productos > div:nth-child(1) > div > * {
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    text-align: center;
    display: inline-block;
    margin: 12px 0 8px;
}
#productos > div:nth-child(1) a {
    color: currentColor;
    text-decoration: none;
    font-size: 1.2rem;
    line-height: 1.4rem;
    padding: 0 0.8rem;
}
#productos > div:nth-child(1) a:hover, 
#productos > div:nth-child(1) a.activo {
    font-family: 'GothamBold';
}
#productos > div:nth-child(1) span {
    background: currentColor;
    width: 1px;
    height: 28px;
}
#productos > div:nth-child(2) {
    /* descarga */
    text-align: right;
    padding: 3.6rem 3.47%;
    position: relative;
}
#productos > div:nth-child(2) > span:first-of-type {
    display: inline-block;
    font-size: 1.3rem;
    letter-spacing: 1px;
    text-align: center;
    width: 18rem;
}
#productos .flecha {
    pointer-events: none;
    display: inline-block;
    background: #808080;
    color: #808080;
    width: 16.48%;
    height: 1px;
    margin: 0 3.53%;
    position: relative;
    /**/
    font-size: 0;
    word-spacing: 0;
    letter-spacing: 0;
    white-space: nowrap;
}
#productos .flecha::before, 
#productos .flecha::after {
    position: absolute;
    top: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
#productos .flecha.izquierda::before {
    content: '>>>'; 
    font-size: 16px;
    line-height: 100%;
    letter-spacing: -4px;
    right: 99.9%; 
}
#productos .flecha.izquierda::after{
    content: '\000A0';
    height: 16px;
    border: 8px solid transparent;
    border-left-color: currentColor;
    border-right: none;
    left: 99%;
}
#productos .boton {
    display: inline-block;
    background: #FFFFFF;
    color: currentColor;
    text-align: center;
    text-decoration: none;
    font-family: 'GothamBold';
    line-height: 100%;
    width: 18rem;
    padding: 1.3rem 2.4rem;
    position: relative;
    -webkit-transition: background 0.35s, color 0.35s, -webkit-box-shadow 0.15s, -webkit-transform 0s, right 0.35s, bottom 0.35s;
    transition: background 0.35s, color 0.35s, box-shadow 0.15s, transform 0s, right 0.35s, bottom 0.35s;
}
#productos .boton::before,
#productos .boton::after {
    content: '\000A0';
    pointer-events: none;
    border: 0 solid currentColor;
    position: absolute;
}
#productos .boton::before {
    border-width: 0.2rem;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
#productos .boton::after {
    border-width: 0.1rem;
    top: 0.3rem;
    left: 0.3rem;
    right: 0.3rem;
    bottom: 0.3rem;
}
#productos .boton:hover {
    background: #4D4D4D;
    color: #FFFFFF;
    -webkit-box-shadow: 0 0 1.2rem rgba(0,0,0,0.45);
    box-shadow: 0 0 1.2rem rgba(0,0,0,0.45);
}
#productos .boton:active {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
}
#productos > div:nth-child(3) {
    /* productos */
}
#productos .batiente {
    display: block;
    border: 0px solid #CBCBCB;
    width: 6px;
    position: absolute;
    top: 32px;
    bottom: 32px;    
}
#productos .batiente.derecho {
    border-width: 0 3px 0 1px;
    right: 0;
}
#productos .batiente.izquierdo {
    border-width: 0 1px 0 3px;
    left: 0;
}
#productos .batiente::before, 
#productos .batiente::after{
    content: ' ';
    display: block;
    background-image: url(../pics/batiente_.png);
    background-repeat: no-repeat;
    width: 32px;
    height: 32px;
    position: absolute;
}
#productos .batiente.izquierdo::before {
    top: -32px;
    left: -3px;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
#productos .batiente.derecho::before {
    top: -32px;
    right: -3px;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}
#productos .batiente.derecho::after {
    right: -3px;
    bottom: -32px;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
#productos .batiente.izquierdo::after {
    left: -3px;
    bottom: -32px;
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
}
#productos h3 {
    font-family: 'AGaramondProItalic';
    font-weight: normal;
    font-size: 3.6rem;
    line-height: 100%;
    margin: 0 10.42%;
}
#productos h3 + div  {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 54px 4.65%;
    margin: 0 5.77% 13.4rem;
    position: relative;
}
#productos h3 + div > * {
    -webkit-flex-grow: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    -webkit-flex-basis: auto;
    flex-basis: auto;
    display: inline-block;
    margin-bottom: 2rem;
    position: relative;
}
#productos h3 + div > :nth-child(odd) {
    width: 25.26%;
}
#productos h3 + div > :nth-child(even) {
    width: 12.11%;
}
#productos h3 + div > :nth-child(6n),
#productos h3 + div > :last-child {
    display: none;
}
#productos h3 + div img {
    display: block;
    object-fit: cover;
    width: 100%;
    height: auto;
}
#productos h3 + div a + span {
    display: block;
    font-size: 114.28%;
    line-height: 150%;
    position: absolute;
    top: 100%;
    left: 0;
}
#productos h3 + div img {
    margin: 2.3rem 0;
    -webkit-box-shadow: 0 0 0 1rem #E4E4E4;
    box-shadow: 0 0 0 1rem #E4E4E4;
}
#productos h3 + div div + span:empty::after {
    content: '\000A0';
    background: #B1B1B1;
    width: 1px;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
#productos .fotografia {
    width: 60.53% !important;
}
#productos .informacion {
    background: #FFFFFF;
    width: 27.36% !important;
    padding: 2rem;
    margin: 1.6rem 0;
}
#productos .informacion p {
    margin-bottom: 1.6rem;
}
#productos .informacion b:first-of-type {
    font-size: 200%;
}
#productos .informacion [style] {
    display: inline-block;
    width: 2.7rem;
    height: 2.7rem;
    margin: 0 1rem 1rem 0;
}
#lonuevo > div:first-child {
    text-align: center;
}
#lonuevo em {
    font-size: 457.14%;
    line-height: 120%;
}
#lonuevo .decoracion.greca {
    display: block;
    background: url(../pics/decoracion_greca.png) center center no-repeat;
    width: 78.21%;
    height: 20px;
    margin: auto;
    overflow: hidden;
    position: relative;
    opacity: 0.65;
}
#lonuevo .decoracion.greca::before,
#lonuevo .decoracion.greca::after {
    content: '\000A0';
    border-bottom: 1px solid #AFAFAF;
    width: 50%;
    height: 0;
    position: absolute;
    top: 6px;
}
#lonuevo .decoracion.greca::before { left: -34px; }
#lonuevo .decoracion.greca::after { right: -34px; }
.noticia {
    -webkit-transition: background 0.35s;
    transition: background 0.35s;
}
.noticia:hover {
    background: #F0F0F0;
}
.noticia > div {
    display: table;
    padding: 1.8rem 10.89%;
    position: relative;
}
.noticia > div > div {
    display: table-cell;
    vertical-align: top;
    padding-right: 3.6rem;
}
.noticia .fecha {
    display: block;
    font-family: 'GothamBold';
    font-size: 81.25%;
    line-height: 1.4rem;
    text-align: right;
    margin-bottom: 1.4rem;
}
.noticia img {
    display: block;
    margin-bottom: 2.8rem;
}
.noticia strong {
    display: inline-block;
    font-size: 200%;
    line-height: 100%;
    margin: 4.6rem 0 2rem;
}
.noticia a.boton {
    display: inline-block;
    border: 1px solid currentColor;
    color: currentColor;
    text-decoration: none;
    text-transform: uppercase;
    font-family: 'GothamBold';
    font-size: 81.25%;
    letter-spacing: 2px;
    padding: 0.4rem 1.2rem;
    transition: color 0.35s ease, background 0.5s ease; 
}
.noticia a.boton:hover {
    background: #333333;
    color: #FFFFFF;
    -webkit-box-shadow: 0 0 1rem rgba(0,0,0,0.2);
    box-shadow: 0 0 1rem rgba(0,0,0,0.2);
}
.noticia div.icono {
    display: block;
    border-radius: 50%;
    background: #B2B2B2;
    color: #FFFFFF;
    text-decoration: none;
    text-align: center;
    line-height: 2rem;
    width: 2rem;
    height: 2rem;
    margin: 0 1rem 1rem 0;
    overflow: hidden;
    position: relative;
    float: left;
}
.noticia .compartir {
    display: block;
    text-align: right;
}
.noticia .icono.compartir::before {
    font-size: 2rem;
}
.noticia + div:empty::before {
    content: '\000A0';
    display: block;
    border: 0 solid #E5E5E5;
    border-width: 4px 0 1px 0;
    height: 9px;
    margin: 1rem 10.42%;
}
#controles {
    text-align: right;
}
#controles .icono {
    display: block;
    color: #B0B0B0;
    width: 2.4rem;
    height: 2.4rem;
    text-align: center;
    position: absolute;
    right: 5.02%;
}
#controles > .icono:active {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
}
#controles .icono.subir {
    border-bottom: 0.1rem solid #B0B0B0;
    bottom: 4.4rem;
}
#controles .icono.mas {
    line-height: 2.2rem !important;
    border: 0.1rem solid #B0B0B0;
    bottom: 1rem;
}
#formulario {
    padding: 5rem 0 5.6rem;
}
#formulario::after {
    content: '\000A0';
    height: 9px;
    border: 0 solid #E5E5E5;
    border-width: 4px 0 1px 0;
    position: absolute;
    left: 10.89%;
    right: 10.89%;
    bottom: 0;
}
#formulario > div:nth-child(1), 
#formulario > div:nth-child(3) {
    text-align: right;
    width: 50%;
    padding-right: 9.31%;
    position: relative;
    float: right;
}
#formulario > div:nth-child(2) {
    text-align: left;
    width: 50%;
    padding: 0 9.31% 0 6.2rem;
    position: relative;
    float: left;
}
#formulario em {
    font-size: 164%;
    line-height: 112.5%;
}
#formulario .flecha {
    pointer-events: none;
    display: inline-block;
    background: #CBCBCB;
    color: #CBCBCB;
    width: 16.48%;
    height: 1px;
    margin: 0 3.53%;
    position: relative;
    /**/
    font-size: 0;
    word-spacing: 0;
    letter-spacing: 0;
    white-space: nowrap;
}
#formulario .flecha::before, 
#formulario .flecha::after {
    position: absolute;
    top: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
#formulario .flecha.izquierda::before {
    content: '>>>'; 
    font-size: 16px;
    line-height: 100%;
    letter-spacing: -4px;
    right: 99.9%; 
}
#formulario .flecha.izquierda::after{
    content: '\000A0';
    height: 16px;
    border: 8px solid transparent;
    border-left-color: currentColor;
    border-right: none;
    left: 99%;
}
#formulario .boton {
    display: inline-block;
    background: #FFFFFF;
    color: currentColor;
    text-align: center;
    text-decoration: none;
    font-family: 'GothamBold';
    font-size: 2rem;
    line-height: 100%;
    padding: 2rem 2.4rem;
    position: relative;
    -webkit-transition: background 0.35s, color 0.35s, -webkit-box-shadow 0.15s, -webkit-transform 0s, right 0.35s, bottom 0.35s;
    transition: background 0.35s, color 0.35s, box-shadow 0.15s, transform 0s, right 0.35s, bottom 0.35s;
}
#formulario .boton::before,
#formulario .boton::after {
    content: '\000A0';
    pointer-events: none;
    border: 0 solid currentColor;
    position: absolute;
}
#formulario .boton::before {
    border-width: 0.2rem;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
#formulario .boton::after {
    border-width: 0.1rem;
    top: 0.3rem;
    left: 0.3rem;
    right: 0.3rem;
    bottom: 0.3rem;
}
#formulario .boton:hover {
    background: #4D4D4D;
    color: #FFFFFF;
    -webkit-box-shadow: 0 0 1.2rem rgba(0,0,0,0.45);
    box-shadow: 0 0 1.2rem rgba(0,0,0,0.45);
}
#formulario .boton:active {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
}
#formulario label {
    display: inline-block;
    font-family: 'GothamBold';
    width: 100%;
}
#formulario [name] {
    display: block;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    border: 0.1rem solid #CBCBCB;
    background: #F9F9F9;
    line-height: 100%;
    width: 100%;
    min-height: 3.6rem;
    padding: 0.5rem;
    margin: 1rem 0;
}
#formulario [type='submit'] {
    border-radius: 5px;
    border: none;
    background: #333333;
    color: #FFFFFF;
    padding: 1.2rem 2.4rem;
}
#formulario [type='submit']:active {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
}
#formulario a[href^='mailto'] {
    display: inline-block;
    color: currentColor;
    text-decoration: none;
    font-size: 128.57%;
}
#recomendaciones, #preguntas {
    position: relative;
}
#recomendaciones::after, #preguntas::after {
    content: '\000A0';
    height: 9px;
    border: 0 solid #E5E5E5;
    border-width: 4px 0 1px 0;
    position: absolute;
    left: 10.89%;
    right: 10.89%;
    bottom: 0;
}
#recomendaciones strong:first-of-type, 
#preguntas strong:first-of-type, 
#medidas strong:first-of-type {
    display: inline-block;
    text-align: center;
    font-family: 'AGaramondProRegular';
    font-weight: normal;
    font-size: 2.8rem;
    line-height: 100%;
    letter-spacing: 0.9rem;
    /*padding: 0.9rem 4.2rem 0.3rem 5.1rem;*/
    padding: 0.9rem 2.60% 0.3rem 3.44%;
    position: relative;
    z-index: 1;
}
#recomendaciones > div, #preguntas > div {
    padding: 0 10.89%;
}
#recomendaciones p, #recomendaciones ul, #preguntas p {
    padding-bottom: 3.2rem;
}
#maildice {
    text-align: center;
    width: 64%;
    position: absolute;
    top: 50%;
    left: 18%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
#maildice + form {
    pointer-events: none;
    opacity: 0.1;
}
#medidaspago {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: center;
    justify-content: center;
    padding: 0 0 4.6rem;
}
#medidaspago > * {
    -webkit-flex-grow: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 1;
    flex-shrink: 1;
    -webkit-flex-basis: auto;
    flex-basis: auto;
    position: relative;
}
#medidaspago > :empty {
    width: 3.911%;
}
#medidaspago > :empty::after {
    content: '\000A0';
    border: 0 solid #E5E5E5;
    border-width: 0 1px 0 4px;
    width: 9px;
    height: 100%;
    margin: 0 auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
#medidas {
    display: inline-block;
    text-align: center;
    width: 48.8875%;
    padding: 0 0.9rem 2rem;
}
#medidas::before, #medidas::after {
    content: '\000A0';
    pointer-events: none;
    border: 0 solid #B2B2B2;
    position: absolute;
}
#medidas::before {
    border-width: 4px;
    top: 0; left: 0; right: 0; bottom: 0;
}
#medidas::after {
    border-width: 1px;
    top: 8px; left: 8px; right: 8px; bottom: 8px;
}
#medidas strong:first-of-type {
    background: #FFFFFF;
    border: 4px solid #B2B2B2;
    -webkit-transform: translateY(-2.8rem);
    transform: translateY(-2.8rem);
}
#medidas table {
    color: #3D3D3D;
    border-collapse: collapse;
    width: 100%;
}
#medidas tr:not(:last-child) {
    border-bottom: 0.1rem solid #B2B2B2;
}
#medidas td {
    text-align: left;
    font-family: 'GothamBold';
    padding: 0.1rem 2rem;
}
#medidas td:first-child {
    border-right: 0.4rem solid #B2B2B2;
}
#pago {
    display: inline-block;
    background: #4D4D4D url(../pics/icono_flechas_.png) right top no-repeat;
    background-size: 39.76% auto;
    color: #FFFFFF;
    max-width: 275px;
    width: 25.4215%;
    padding: 3.2rem;
}
#pago strong {
    display: inline-block;
    font-size: 157.14%;
    line-height: 100%;
    margin-bottom: 4.2rem;
}
#pago p {
    background: url(../pics/iconos_pago_.png) left bottom no-repeat;
    background-size: 86.12% auto;
    padding-bottom: 10.8rem;
}
/* 
    arreglo a botones sociales 
*/
.twitter-share-button, .fb-share-button {
    margin: 0 !important; 
    padding: 0 !important; 
    opacity: 0.01 !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}
.fb-share-button > span {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}
#fb-root {
    pointer-events: none !important;
    overflow: hidden !important;
    position: absolute !important;
}
iframe[id^='twitter-widget-'] { 
    min-width: 72px !important;
    max-width: 88px !important;
    overflow: visible !important;
}
/*
    depuración
*/
#debug {
    position: fixed;
    right: 0;
    bottom: 0;
}
#debug:not(:empty) {
    background: tomato;
    color: white;
    font-size: 12px;
    line-height: 100%;
    padding: 5px;
}
/*
    responsivo
*/
@media (max-width: 1074px) {
    .contenedor {
        width: 96%;
    }
    #productos > div:nth-child(1) > div {
        padding: 1.6rem 5.77% 0.8rem;
    }
}
@media (max-width: 960px) {
    #menusuperior {
        -webkit-flex-direction: column;
        flex-direction: column;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        left: inherit;
    }
    #menusuperior a {
        display: none;
        border-left: none;
        border-right: 0.1rem solid;
        text-align: right;
        margin-bottom: 0.7rem;
    }
    #menusuperior a.icono.menu {
        display: inline-block;
    }
    #menusuperior a:last-child {
        padding-right: 0.7rem;
    }
    #menusuperior:hover {
        height: inherit;
        background: #FFFFFF;
        -webkit-box-shadow: 0 1rem 1rem rgba(0,0,0,0.1);
        box-shadow: 0 1rem 1rem rgba(0,0,0,0.1);
        z-index: 5;
    }
    #menusuperior:hover a {
        display: inline-block;
    }
    #valores > div {
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    #valores > div > * {
        -webkit-flex-grow: 1;
        flex-grow: 1;
        -webkit-flex-basis: auto;
        flex-basis: auto;
        width: 33%;
        margin-bottom: 2rem;
    }
    #valores > div > *:nth-child(4) {
        border-left-width: 0;
    }
    #productos .fotografia {
        width: 43.94% !important;
    }
    #productos .informacion {
        width: 43.94% !important;
    }
}
@media (max-width: 880px) {
    #preludio .fxGaleria blockquote {
        width: 93.39%;
    }
    #leyendas {
        clear: both;
        padding-top: 2rem;
        position: relative;
        left: 0;
        bottom: 0;
    }
}
@media (max-width: 780px) {
    #idiomas_redes .idioma span {
        display: none;
    }
    #testimonios > div:first-child {
        -webkit-flex-direction: row;
        flex-direction: row;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    #testimonios .testimonio {
        -webkit-flex: 1 0 auto;
        flex: 1 0 auto;
        width: 50%;
        padding: 0 5.4rem;
    }
    #testimonios .testimonio:nth-child(2n) + .testimonio:last-child {
        margin-top: 2rem;
    }
    #testimonios .testimonio:nth-child(3n)::before {
        border: none;
    }
    #productos h3 + div > :nth-child(odd) {
        width: 43.94%;
    }
    #productos h3 + div > :nth-child(even) {
        width: 12.11%;
    }
    #productos h3 + div > :nth-child(6n) {
        display: inline-block;
    }
    #productos h3 + div > :nth-child(4n),
    #productos h3 + div > :last-child {
        display: none;
    }
    #formulario > div:nth-child(1), 
    #formulario > div:nth-child(3) {
        width: 100%;
        padding: 0 9.31%;
        float: none;
    }
    #formulario > div:nth-child(2) {
        width: 100%;
        padding: 0 9.31%;
        float: none;
    }
    #medidas {
        width: 63.995274%;
    }
    #pago {
        width: 31.997637%;
    }
}
@media (max-width: 680px) {
    .noticia > div > div {
        display: table-row;
        text-align: center;
        padding-right: 0;
    }
    .noticia .fecha {
        text-align: center;
    }
    .noticia img {
        display: block;
        margin: 0 auto 2.8rem;
    }
}
@media (max-width: 640px) {
    #bienvenida > div:first-child {
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    #bienvenida .enmarcado {
        min-width: 30rem;
        width: 90.31%;
        position: relative;
        top: 0;
        -webkit-transform: none;
        transform: none;
    }
    #valores > div > * {
        width: 50%;
        margin-bottom: 2rem;
    }
    #valores > div > *:nth-child(3) {
        border-left-width: 0;
    }
    #valores > div > *:nth-child(4) {
        border-left-width: 1px;
    }
    #productos .fotografia {
        width: 100% !important;
    }
    #productos .fotografia + span:empty {
        display: block !important;
        width: 100% !important;
    }
    #productos .fotografia + span:empty::after {
        width: 100% !important;
        height: 1px !important;
    }
    #productos .informacion {
        width: 100% !important;
    }
}
@media (max-width: 560px) {
    #idiomas_redes a:first-child {
        margin-left: 6.61%;
    }
    #testimonios .testimonio {
        width: 100%;
        margin: 2rem 0;
    }
    #testimonios .testimonio::before {
        border: none !important;
    }
    #direccion {
        float: none;
        margin-bottom: 4rem;
    }
    #recomendaciones strong:first-of-type, 
    #preguntas strong:first-of-type, 
    #medidas strong:first-of-type {
        letter-spacing: 4px;
    }
    #recomendaciones strong:first-of-type {
        word-break: break-all;
    }
    #medidaspago {
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap
    }
    #medidaspago > :empty {
        width: 78.22%;
        height: 49px;
    }
    #medidaspago > :empty::after {
        border-width: 1px 0 4px 0;
        width: 100%;
        height: 9px;
        margin: auto 0;
    }
    #medidas {
        width: 78.22%;
    }
    #pago {
        width: 78.22%;
    }
}
@media (max-width: 480px) {
    #bienvenida em {
        display: block;
        font-size: 357.14%;
    }
    #bienvenido em {
        display: block;
        font-size: 357.14%;
    }
    #historia strong:first-of-type {
        position: relative;
        left: 50%;
        z-index: 1;
        -webkit-transform: translate(-50%, -2.8rem);
        transform: translate(-50%, -2.8rem);
    }
    #valores > div > * {
        width: 100%;
        margin-bottom: 2rem;
    }
    #valores > div > *:not(:first-child) {
        border-top-width: 1px;
        border-left-width: 0;
    }
    #productos h3 + div > :nth-child(odd) {
        width: 100%;
    }
    #productos h3 + div > :nth-child(even) {
        display: none;
        width: 0%;
    }
    #medidas td {
        padding: 0.1rem 0.5rem;
    }
}
@media (max-width: 420px) {
    #encabezado h1 {
        width: 58.57%;
    }
    #contamos .flecha {
        width: 1.5%;
    }
    #productos .flecha {
    }
    #pie > .contenedor {
        padding: 0 6.4rem 0 3.35%;
    }
}
@media (max-width: 380px) {
    #formulario .flecha {
        display: none;
    }
    #medidas td {
        padding: 0.1rem;
    }
}