/* Fuentes */

@font-face {
    font-family: "Raleway";
    font-weight: normal;
    font-display: swap;
    src: url("/css/fuentes/raleway-medium.woff2") format("woff2"),
        url("/css/fuentes/raleway-medium.woff") format("woff"),
        url("/css/fuentes/raleway-medium.ttf");
}
/* Se deja de usar la fuente en negrita por optimización en tiempo de carga */
/*
@font-face {   
    font-family: "Raleway";
    font-weight: bold;
    font-display: swap;
    src: url("/css/fuentes/raleway-bold.woff2") format("woff2"),
        url("/css/fuentes/raleway-bold.woff") format("woff"),
        url("/css/fuentes/raleway-bold.ttf");
}
*/

/*
Usar por defecto el modelo de caja "border-box". Es decir, que en el ancho de un elemento ya
esté incluido el padding y el borde.
https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
*/
html {
	box-sizing: border-box;
	height: 100%;
    scroll-behavior: smooth;
}

*, *:before, *:after {
	box-sizing: inherit;
}

/* Arreglo para que el carrusel de Slick funcione dentro de flexbox. */
/* https://jquery-script.com/2019/10/using-slick-carousel-with-css-flexbox/ */
 * {
    min-height: 0;
    min-width: 0;
}

body {
    margin: 0;  /* Replicar en páginas no AMP el estilo que aplica AMP */
    font-family: "Raleway", sans-serif;
    font-display: swap;
}

p {
	margin-top: 0;
	margin-bottom: 1.25em;
}

h1 {
	font-size: 2rem;
	font-weight: normal;
	text-transform: uppercase;
	color: #1980ff;
}

h2 {
	font-size: 1.6rem;
	font-weight: normal;
}

h3 {
    width: 100%;
}

header {
    position: fixed;
    margin: 0 auto;
    /* Es necesario indicar left y right para que funcionen a la vez "margin: 0 auto" y "position: fixed" */
    left: 0;
    right: 0;
    padding: 1em 0 1em 0;
    background-color: white;
    /* Superar el valor de 100 que traen los Smart Buttons de PayPal, para que al hacer scrol vertical no queden por encima */
    z-index: 101;
}

main {
	overflow: hidden;
	padding-top: 150px;
	margin-bottom: 2em;
}

footer {
	background-color: #000000;
	color: #ffffff;
}

input[type=number] {
    font-size: inherit;
    font-family: inherit;
}

.sombra {
	box-shadow: #CCCCCC 0 4px 4px;
}

.noRomper {
	white-space: nowrap;
}

.limpiaFlota {
    clear: both;
}

.anchoCompleto {
    width: 100%;
}

.anchoMinimo {
    width: 0;
}

.centro {
    text-align: center;
}

.derecha {
    text-align: right;
}

.oculto {
    display: none;
}

.margenInf {
    margin-bottom: 3em;
}

#finalPie {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#tablaEnlaces {
    padding: 0;
    column-count: 3;
}

#tablaEnlaces li {
    list-style: none;
    margin-bottom: 0.2em;
}

.tituloTablaEnlaces {
    padding-top: 2em;
    color: #aaa;
    text-transform: uppercase;
}

#enlacesPie {
    padding-left: 0;
}

#enlacesPie li {
	display: inline;
	margin-right: 1.5em;
}

#enlacesPie li:last-child {
	margin-right: 0;
}

.enlace,
.contenidoLandingPage a {
    text-decoration: none;
    color: #990000;
    cursor: pointer;
}

.enlace:hover,
.contenidoLandingPage a:hover {
    text-decoration: underline;
}

#contenedorPie .enlace,
#formularioContacto .enlace {
	color: #ffffff;
}

.anchoMaximo {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 2em;
	padding-right: 2em;
    overflow: visible;
}

.flexNoDecrece {
	flex-shrink: 0;
}

#elementosCabecera {
	display: flex;
	justify-content: space-between;
	align-content: center;
	align-items: center;
}

#elementosCabecera.landingPage {
    justify-content: center;
}


#ventanaAvisoCookies {
	border: 1px solid #dca53f;
	padding: 0.5em 1em 1em 1em;
	background-color: #fefbd5;

    /* Comentado: esto provocaba que el aviso de cookies no se viera en Safari + Mac,
    pero tampoco se podía interactuar con lo que había debajo (formulario de contacto). */
	/*position: fixed;
	bottom: 0;
	z-index: 9999;*/

    /* Estilo necesario en páginas no AMP. En páginas AMP ya es aplicado por el componente amp-consent. */
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1001;  /* Quedar por encima de los botones de PayPal, de z-indec 1000 (aunque no deberían aparecer a la vez que el aviso) */
}

/* Corregir el "display: none" de #ventanaAvisoCookies (necesario para páginas no AMP) en las páginas AMP. */
amp-consent #ventanaAvisoCookies {
    display: block;
}

#contenedorBotonCerrarAvisoCookies {
    text-align: right;
    margin-bottom: 0.5em;
}

#botonCerrarAvisoCookies {
	cursor: pointer;
	font-weight: bold;
	text-decoration: none;
	color: #1e246f;
}

#enlaceAceptarCookies {
    background-color: #1980ff;
    color: white;
    padding: 0.5em 1em;
}

#enlaceAceptarCookies:hover {
    text-decoration: none;
}

/* 
Lightbox CSS
Basado, con modificaciones, en: https://www.w3schools.com/howto/howto_js_lightbox.asp
*/
.a25Lightbox {
    display: block;
    position: fixed;
    z-index: 9999;
    padding-top: 65px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    overflow-y: scroll;
    background-color: rgba(0,0,0,0.8);
    /* Hack para las versiones 5.5 - 8 de IE. */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC000000, endColorstr=#CC000000)";
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC000000, endColorstr=#CC000000);
}

    .a25Lightbox .formConLabels {
        display: block;
    }

.a25Lightbox-content {
    position: relative;
    background-color: #fefefe;
    margin: auto auto 100px auto; /* El margen inferior hace que se pueda hacer scroll hasta 100px por debajo del lightbox */
    width: 90%;
    /*max-width: 340px;*/
    /*box-sizing: border-box;*/
    padding: 15px;
    overflow: hidden;
}

.a25Lightbox-unaColumna {
    max-width: 340px;
}

.a25Lightbox-dosColumnas {
    max-width: 640px;
}

.a25Lightbox-tresColumnas {
    max-width: 960px;
}

#botonCerrarLightbox {
    color: #FFFFFF;
    position: absolute;
    top: 10px;
    right: 25px;
    font-size: 35px;
    font-weight: bold;
}

#botonCerrarLightbox:hover,
#botonCerrarLightbox:focus {
    color: #F38407;
    text-decoration: none;
    cursor: pointer;
}

.divBloqueCookies {
    display: grid;
    grid-gap: 10px 10px;
    align-items: center;
    grid-template-columns: auto 200px;
    margin-top: 2em;
}

.textoMasInfoCookies {
    margin-top: 2em;
}

.textoCookies {
    grid-column: span 2;
}

.js-botonesCookies {
    display: grid;
    grid-gap: 0 0.5em;
    grid-template-columns: auto auto;
}

.a25Lightbox input {
    border: 0;
    cursor: pointer;
    font-family: "Raleway", sans-serif;
    font-size: inherit;
    padding: 0.4em;
    color: #ffffff;
}

.botonGuardarConfiCookies {
    background-color: #337ab7;
}

.botonDeshabilitado {
    background-color: #CCCCCC;
}

.cookieAceptada {
    background-color: #4CAF50 !important;
}

.cookieAceptada:focus {
    outline: none;
}

.cookieRechazada {
    background-color: #DF0100 !important;
}

.cookieRechazada:focus {
    outline: none;
}

#textoCabecera {
    margin-top: 1em;
    margin-bottom: 2em;
}

#imagenesPortada {
    flex-basis: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 0.5em;
}

.imagenPortada {
    position: relative;
    height: 220px;
}

#contenidoPromocional {
    flex-basis: 100%;
    display: flex;
    column-gap: 2%;
    justify-content: space-between;
    margin: 0 0 2em 0;
}

#promocionEstatica {
    flex-basis: 48%;
}

#promocionCarrusel {
    flex-basis: 48%;
}

/* Carruseles: ocupar todo el ancho del contenedor */
.slick-slide img {
    width: 100%;
}

/* Corregir el carrusel de promoción de la portada para que las imágenes ocupen al alto necesario según su relación de aspecto. */
#promocionCarrusel .slick-slide img {
    height: auto;
}
#promocionCarruselMovil .slick-slide img {
    height: auto;
}

.slick-track, .slick-slide, .slick-list, .slick-slider {
    height: 100%;
}

/* Deshabilitar interacción del usuario con el carrusel de promoción. */
#promocionCarrusel,
#promocionCarruselMovil {
    pointer-events: none;
}

/* Ocultar los botones de los carruseles. */
.amp-carousel-button {
    display: none;
}

.imagenPromocionEstatica {
    flex-basis: 48%;
    /* Se usa un porcentaje para que sea proporcional si cambiase el ancho de la columna, para que pueda coordinarse con el elemento
    de la columna derecha que tenga que tener el mismo alto. */
    margin-bottom: 5%;
}

.imagenPromocionEstatica:last-child {
    margin-bottom: 0;
}

.contenedorVideo {
    width: 100%;
    position: relative;
}

.expandeVideo {
    width: 100%;
}

#contenedorVideoPromoMovil {
    display: none;
}

#videoFabrica,
#videoFabricaMovil {
    width: 100%;
    height: auto;
}

#contenedorCarruselMovil {
    display: none;
}

/* Overlay que rellena el contenedor y se coloca encima del vídeo de la portada. */
.click-to-play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.poster-image {
    position: absolute;
    z-index: 1;
}

.poster-image img {
    object-fit: cover;
}

.play-icon {
    position: absolute;
    z-index: 2;
    width: 100px;
    height: 100px;
    background-image: url('/imagenes/play-icon.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    /* Align to the middle */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    opacity: 0.9;
}

.play-icon:hover, .play-icon:focus {
    opacity: 1;
}

#formularioContacto {
    padding: 1em;
    background-color: #1e246f;
    color: white;
    position: relative; /* Necesario para ubicar el ancla que lleva al formulario */
    width: 100%;
    margin: 0 0 2em 0;
}

/* Ubicación del ancla para visualizar el formulario, ubicada de forma que se compense la cabecera fija y no lo tape. */
#anclaFormularioContacto {
	position: absolute;
	top: -146px;
}

#camposFormulario {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
}

.campoFormulario,
.campoFormularioDoble,
.campoFormularioCompleto {
    margin-bottom: 0.5em;
    padding: 0 1em 0 1em;
}

.campoFormulario {
    flex-basis: 33%;
}

.campoFormularioDoble {
    flex-basis: 66.5%;
}

.campoFormularioCompleto {
    flex-basis: 100%;
}

.flexBreak {
    flex-basis: 100%;
    height: 0;
}

#tituloFormulario {
	text-align: center;
	font-size: 1.3rem;
	margin-bottom: 1em;
}

.labelFormulario {
	display: block;
	margin-bottom: 0.2em;
}

#telefono {
	flex-shrink: 2;
}

#formularioContacto input,
select,
textarea {
	font-family: "Raleway", sans-serif;
	font-size: inherit;
	padding: 0.4em;
	width: 100%;
}

#formularioContacto input[type="checkbox"] {
	width: auto;
	margin: 0 0.5em 0 0;
}

#formularioContacto input[type="submit"] {
	margin: 0;
}

#formularioContacto span.visible {
	display: block;
}

#botonEnviarFormulario .botonEnlace {
	background-color: #337ab7;
	border: 0;
	cursor: pointer;
	text-transform: uppercase;
}

#botonEnviarFormulario .botonEnlace:disabled {
    opacity: 0.5;
}

.mensajeFormulario {
	padding-top: 1rem;
	display: flex;
	align-items: center;
    justify-content: flex-end;
    margin-right: 1em;
}

.contenedorFAQ {
    margin-top: 1em;
    width: 100%;
}

.indiceFAQ {
    list-style-type: none;
    padding: 1em;
    border: 1px solid #aaa;
    background-color: #edf6ff;
    margin-bottom: 3em;
}

.indiceFAQ .enlace {
    color: #1980ff;
}

.indiceFAQContenido {
    display: none;
    margin-top: 1em;
}

.indiceFAQTitulo {
    display: flex;
    align-items: center;
    column-gap: 0.5em;
}

#indiceFAQBotonDesplegar {
    cursor: pointer;
    border: 1px solid #c0c0c0;
    padding: 6px 3px 6px 6px;
    border-radius: 5px;
    height: 24px;
}

.anclaFAQ {
    position: absolute;
    top: -10em;
}

.indiceFAQ li {
    margin-bottom: 0.5em;
}

.indiceFAQ li:last-child {
    margin-bottom: 0;
}

.iconoMensajeFormulario {
	font-size: 3rem;
	margin-right: 0.5rem;
	margin-top: -0.6rem;
}

.colorOK {
	color: #00c902;
}

.colorKO {
	color: #de4b4b;
}

.menu-icon {
	cursor: pointer;
	display: inline-block;
	float: right;
	padding: 1.2em 0.8em;
	border: 1px solid #1980ff;
	border-radius: 0.4em;
	position: relative;
	user-select: none;
}

.menu-icon .navicon {
	background: #1e246f;
	display: block;
	height: 2px;
	position: relative;
	transition: background .2s ease-out;
	width: 18px;
}

.menu-icon .navicon:before,
.menu-icon .navicon:after {
	background: #1e246f;
	content: '';
	display: block;
	height: 100%;
	position: absolute;
	transition: all .2s ease-out;
	width: 100%;
}

.menu-icon .navicon:before {
	top: 5px;
}

.menu-icon .navicon:after {
	top: -5px;
}

/* menu btn */

.menu-btn {
	display: none;
}

.menu-btn:checked ~ .elementoDesplegable {
	max-height: 240px;
}

.menu-btn:not(:checked) ~ .elementoDesplegable {
	margin-bottom: 0;
}

.menu-btn:checked ~ .elementoCabecera .menu-icon .navicon {
	background: transparent;
}

.menu-btn:checked ~ .elementoCabecera .menu-icon .navicon:before {
	transform: rotate(-45deg);
}

.menu-btn:checked ~ .elementoCabecera .menu-icon .navicon:after {
	transform: rotate(45deg);
}

.menu-btn:checked ~ .elementoCabecera .menu-icon:not(.steps) .navicon:before,
.menu-btn:checked ~ .elementoCabecera .menu-icon:not(.steps) .navicon:after {
	top: 0;
}

#elementoCabeceraLogoYHamburguesa {
	order: 1;
	display: flex;
	justify-content: space-between;
    min-width: unset; /* Sin esto no se expande como debe */
    flex-shrink: 0; /* No estrechar si el eslogan es muy largo */
}
/*#elementoCabeceraMarcas {
	order: 2;
	padding: 0 1em;
}*/

#elementoCabeceraEslogan {
    order: 2;
    text-align: center;
    color: #1d70b7;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 1.4em;
    padding: 0 1em;
    flex-shrink: 1; /* Estrechar para ocupar el mínimo ancho posible */
}

#elementoCabeceraBotones {
    order: 4;
    display: flex;
    column-gap: 1em;
    margin-left: 1em;
    flex-shrink: 0; /* No estrechar si el eslogan es muy largo */
}

#elementoCabeceraDirecciones {
    order: 3;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0; /* No estrechar si el eslogan es muy largo */
}

#geodirecciones {
    display: flex;
    /* Alinear al final porque, si se cargan las direcciones por Ajax, el tamaño del contenedor debe ser fijo. */
    justify-content: flex-end;
}

/* Es necesario especificar el tamaño aquí y como atributos de amp-script para que se ejecute el script que contiene. */
#contenedorGeodirecciones {
    width: 377px;
    height: 75px;
}

/*#elementoCabeceraFoto {
	order: 5;
	display: none;
	text-align: center;
}*/

/* Solo en AMP */
body.esAMP #elementoCabeceraLogo {
    max-width: 202px;
}

/* Solo en AMP */
body.esAMP #elementoCabeceraLogo img {
    width: 100%;
    height: auto;
}

/*#elementoCabeceraHamburguesa {
	display: none;
}*/

#elementoCabeceraCorreoYTelefonoMovil {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

#elementoCabeceraCorreoMovil {
	display: none;
}

#elementoCabeceraWhatsAppMovil {
    display: none;
}

#elementoCabeceraCarritoMovil {
    display: none;
}

#elementoCabeceraTelefonoMovil {
	display: none;
}

#pieLogo {
	white-space: nowrap;
}

#pieLogo a {
	text-decoration: none;
	color: #000000;
}

#pieLogo h1 {
	font-size: 1em;
	text-transform: none;
	margin: 0;
    color: initial;
}

.botonCabecera {
	background-color: #1e246f;
	background-repeat: no-repeat;
	background-position: center;
	border-radius: 100%;
	border: 0;
	width: 65px;
	height: 65px;
}

.botonIrAFormularioContacto {
	background-image: url("/imagenes/correo.png");
	background-size: 70%;
}

.botonIrACarrito {
    background-image: url("/imagenes/carrito.png");
    background-size: 60%;
}

#botonTelefono {
	background-image: url("/imagenes/telefono.png");
	background-size: 50%;
}

.botonWhatsApp {
    background-image: url("/imagenes/whatsapp.png");
    background-size: 50%;
}

.telefonoDireccion {
	background-color: #1e246f;
	color: white;
	padding: 0.5em;
	margin: 0.3em 0 0.3em 0;
	border-radius: 0.5em;
	display: inline-block;
	width: 100%;
}

.numeroTelefono {
	font-family: Verdana, sans-serif;
}

.botonCabecera,
.telefonoDireccion {
	transition: background-color 0.3s;
	cursor: pointer;
}

.botonCabecera:hover,
.telefonoDireccion:hover {
	background-color: #1980ff;
}

.telefonoDireccion .enlace {
	color: white;
}

.telefonoDireccion .enlace:hover {
	text-decoration: none;
}

.direccion {
	margin-right: 1em;
}

.direccion:last-of-type {
	margin-right: 0;
}

.nombreDireccion {
	color: #1980ff;
	font-size: 0.8rem;
}

.textoDireccion {
	font-size: 0.8rem;
}

#contenedorPortada {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.productos {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 2em 0 0 0;
}

.imagenMarca {
	/* Se define un tamaño máximo en el que encajar la imagen, porque no se conoce a priori su tamaño */
	position: relative;
	width: 150px;
	height: 44px;
	margin-right: 1.4em;
}

amp-img.encajaImagen img {
	object-fit: contain;
}

amp-img.rellenaImagen img {
    object-fit: cover;
}

.encajaImagen {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.rellenaImagen {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.producto {
    flex-basis: 48%;
    display: grid;
    grid-template-columns: 1fr 1fr;

    /* min-content para que las características de distintos productos estén alineadas superiormente. */
    grid-template-rows: min-content auto auto auto;

    grid-template-areas: "nombreProducto nombreProducto" "caracteristicasProducto imagenProducto" "preciosProducto imagenProducto" "preciosProducto enlaceProducto";
    grid-column-gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1em;
    padding-bottom: 2em;
    border-bottom: 1px solid #DDDDDD;
}

/* Se seleccionan los elementos de la última fila del grid (para quitarles el borde inferior) siguiendo la estrategia de:
https://keithclark.co.uk/articles/targeting-first-and-last-rows-in-css-grid-layouts
*/
.producto:nth-child(2n+1):nth-last-child(-n+2),                 /* Selecciona productos que sean primer elemento de cada fila y, además, uno de los últimos dos 
                                                                elementos; es decir, el primer elemento de la última fila. */
.producto:nth-child(2n+1):nth-last-child(-n+2) ~ .producto {    /* Hermanos del elemento seleccionado con la regla anterior; es decir, productos de la última
                                                                fila. */
    border-bottom: none;
}

.nombreProducto {
	grid-area: nombreProducto;
	display: flex;
	align-items: center;
}

.nombreProducto h2 {
	font-size: 1.4rem;
	margin: 0;
}

.caracteristicasProducto {
	grid-area: caracteristicasProducto;
}

.listaCaracteristicas {
	list-style: none;
	padding-left: 0;
	color: #1980ff;
	font-size: 1.2rem;
}

.listaCaracteristicas li {
	background: url("../imagenes/tick.png") no-repeat left 0.2em;
	padding: 0.2em 0 0.2em 2em;
}

.caracteristicaDestacada {
	text-decoration: underline;
}

.imagenProducto {
	grid-area: imagenProducto;
	/* Se define un tamaño máximo en el que encajar la imagen, porque no se conoce a priori su tamaño */
	position: relative;
	width: 90%;
	height: 100%;
	margin: auto;
}

/* Solo sin AMP */
body:not(.esAMP) .imagenProducto .encajaImagen {
    height: 0;
    min-height: 100%;
    max-height: 100%;
}

.preciosProducto {
	grid-area: preciosProducto;
	align-self: flex-end;
}

.enlaceProducto {
	grid-area: enlaceProducto;
	align-self: flex-end;
}


.contenedorPrecio {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    background-color: #1e246f;
    color: white;
    padding: 0.8em;
    margin-bottom: 1rem;
    text-align: center;
    font-size: 1.2rem;
}
.contenedorPrecio:last-of-type {
	margin-bottom: 0;
}

.precioOferta {
	color: red;
	font-size: inherit;
	margin-right: 0.5em;
}

.precioPagar {
    background-color: #ffc439;
    width: 100%;
}

.precioPagar .botonEnlace {
    background-color: transparent;
    border: 0;
    color: #000000;
    cursor: pointer;
    white-space: normal;
    font-family: inherit;
}

.enlaceProducto {
	grid-area: enlaceProducto;
}

.botonEnlace {
	color: white;
	text-decoration: none;
	padding: 0.7em;
	display: block;
	text-align: center;
	font-size: 1.2rem;
}

.enlaceProducto .botonEnlace {
	background-color: #990000;
}

#contenedorDetalleProducto {
	display: flex;
	flex-wrap: wrap;
    margin-bottom: 3em;
}

#nombreCaracteristicasEImagenDetalleProducto {
	display: flex;
	flex-wrap: wrap;
}

#nombreDetalleProducto {
	order: 1;
	flex-basis: 100%;
	display: flex;
	align-items: center;
	margin-bottom: 2em;
    max-width: 100%;
}

#nombreDetalleProducto h1 {
	margin: 0;
}

#imagenMarcaDetalleProducto {
	/* Se define un tamaño máximo en el que encajar la imagen, porque no se conoce a priori su tamaño */
	position: relative;
	width: 200px;
	height: 59px;
	margin-right: 2em;
}

#caracteristicasDetalleProducto {
	order: 2;
	flex-basis: 60%;
	padding-right: 1rem;
    max-width: 100%;
}

#caracteristicasDetalleProductoTitulo {
    margin: 0;
}

#caracteristicasDetalleProductoTexto {
    font-size: 1.3rem;
    line-height: 1.4em;
    margin-bottom: 1.5em;
}

#caracteristicasDetalleProductoTexto ul {
    list-style: none;
}

#caracteristicasDetalleProductoTexto ul:last-of-type {
    margin-bottom: 0;
}

#caracteristicasDetalleProductoTexto ul li::before {
    content: "\2022"; /* Círculo */
    color: red;
    font-weight: bold;
    display: inline-block; /* Para poder añadir espacio entre el círculo y el texto */
    /* Espacio entre el círculo y el texto */
    width: 1.5em;
    margin-left: -1.5em;
}

#caracteristicasDetalleProductoTexto ul li ul {
    list-style: none;
}

#caracteristicasDetalleProductoTexto ul li ul li::before {
    content: none;
}

#caracteristicasDetalleProductoTexto ul li ul li::before {
    content: "\25e6"; /* Círculo blanco */
}

#imagenDetalleProducto {
    order: 3;
    flex-basis: 40%;
    position: relative;
    margin: auto;
    /* Se define un tamaño máximo en el que encajar la imagen, porque no se conoce a priori su tamaño */
    width: 100%;
    height: 500px;
}

.tachado {
    text-decoration: line-through;
}

#preciosEInfoDetalleProducto {
	flex-basis: 100%;
	margin-top: 2em;
	font-size: 1.3rem;
}

#preciosDetalleProducto {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: 1em;
}

.precioDetalleProducto {
	display: flex;
	align-items: center;
	margin-right: 1em;
	margin-bottom: 0.5em;
}

.precioDetalleProducto:last-of-type {
	margin-right: 0;
}

.nombrePrecioDetalleProducto {
	margin-right: 0.5em;
}

.importesDetalleProducto {
	display: flex;
}

.importeDetalleProducto {
	background-color: #1e246f;
	color: white;
	padding: 0.7em;
	margin-right: 0.2em;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
}

.importeDetalleProducto:last-of-type {
	margin-right: 0;
}

.importeConOfertaDetalleProducto {
	background-color: #990000;
}

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

.importesDetalleProducto:last-of-type {
	margin-right: 0;
}

.comentarioPrecioDetalleProducto {
	font-size: 1rem;
}

.bonoDetalleProducto {
	text-align: center;
	font-size: inherit;
	font-weight: bold;
	color: #990000;
	margin-bottom: 0.5em;
}

#infoDetalleProducto {
	font-size: inherit;
	font-weight: bold;
	text-align: center;
	margin-bottom: 1.5em;
}

#botonesFinContenido {
	display: flex;
	font-size: inherit;
    margin-bottom: 1.5em;
}

.enlaceMasInfo {
	flex-grow: 1;
	text-align: center;
}

.enlaceMasInfoBlog {
    display: none;
}

#enlaceFAQ {
    flex-grow: 1;
    text-align: center;
}

.enlaceMasInfo .botonEnlace,
#enlaceFAQ .botonEnlace {
    text-transform: uppercase;
    background-color: #990000;
    display: inline-block;
}

.productosRelacionados {
    display: flex;
}

#entradas .enlaceMasInfo {
    margin-bottom: 3em;
}

.enlaceVolver .botonEnlace {
	text-transform: uppercase;
	background-color: #AAAAAA;
}

#contenedorPaginaError {
	text-align: center;
}

#contenedorPaginaError .enlace {
	color: #990000;
}

.botonIrArriba {
	background-color: #1980ff;
	color: #ffffff;
	box-shadow: #000000 0 2px 2px;
	font-size: 2rem;
	font-weight: bold;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border: none;
	outline: none;
	z-index: 9998;
	bottom: 0.8em;
	right: 0.8em;
	position: fixed;
	cursor: pointer;
}

/* Solo en AMP */
body.esAMP .botonIrArriba {
    opacity: 0;
    visibility: hidden;
}

/* Solo sin AMP */
body:not(.esAMP) .botonIrArriba {
    display: none;
}

.botonIrArriba:active {
    box-shadow: #000000 0 1px 1px;
    transform: translateY(1px);
}

.destinoArriba {
	position: absolute;
	top: 0;
	left: 0;
}

.saltoLinea {
    width: 100%;
    border: 0;
    font-size: 0;
}

.contenedorResumenPago {
    margin-bottom: 1em;
}

.contenedorResumenPago #botonEnviarFormulario {
    text-align: right;
    margin-bottom: 2em;
}

.contenedorResumenPago #botonEnviarFormulario .botonEnlace.botonEnlace {
    font-size: 1em;
    text-transform: inherit;
    display: inline-block;
}

.columnaImagenResumenPago {
    margin-bottom: 1em;
}

.volverResumenPago {
    margin-top: 2em;
    text-align: center;
    clear: both;
}

.volverResumenPago .enlaceVolver {
    display: inline-block;
}

.volverResumenPago .enlaceVolver .botonEnlace {
    text-transform: none;
    font-size: 1rem;
}

.resumenPago {
    display: inline-flex;
    flex-direction: column;
}

.descripcionResumenPago {
    margin-bottom: 1em;
}

#smart-button-container {
    max-width: 300px;
    float: right;
    text-align: right;
}

.entradaListado {
    display: flex;
    margin-bottom: 3em;
}

.entradaListado .enlace,
.entradaRelacionada .enlace {
    color: #1980ff;
}

.etiquetas .enlace {
    color: #1d70b7;
}

.etiquetas {
    padding: 0;
    list-style-type: none;
}

.etiquetas li {
    display: inline-block;
    margin-right: 1em;
}

.tituloEntradaDetalle {
    text-transform: none;
}

.imagenEntradaDetalle {
    position: relative;
    float: left;
    width: 480px;
    height: 270px;
    margin-right: 1.5em;
    margin-bottom: 1.5em;
}

.imagenEntradaListado {
    width: 30%;
    height: 12em;
    position: relative;
    margin-right: 1em;
}

.textoEntradaListado {
    width: 70%;
    flex-grow: 1;
}

.textoEntradaListado h2 {
    margin-top: 0;
}

.entradaDetalle {
    margin-bottom: 3em;
}

.entradasRelacionadas {
    display: flex;
    column-gap: 2em;
    margin-bottom: 3em;
}

.line-clamp {
    display: block;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    position: relative;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 !important;
}

.line-clamp-2 {
    -webkit-line-clamp: 2;
    height: calc(1em * 1.2 * 2);
}

.entradaRelacionada {
    flex-basis: 0%;
    flex-grow: 1;
}

.imagenEntradaRelacionada {
    position: relative;
    width: 100%;
    height: 200px;
    margin-bottom: 1em;
}

.tituloEntradaRelacionada {
    font-weight: bold;
    margin-bottom: 1em;
}

#paginacion {
    text-align: center;
    padding: 0; /* Eliminar padding izquierdo por defecto del navegador */
}

.paginacionNumero {
    display: inline-block; /* inline-block en vez de inline para que se pueda mostrar en varias líneas si no cabe */
    list-style-type: none;
    margin-right: 0.5em;
}

.paginacionNumero:last-child {
    margin-right: 0;
}

#contenedorLandingPage {
    display: flex;
    column-gap: 1.5em;
    align-items: flex-start;
    margin-top: 1em;
}

#carruselLandingPage {
    flex-basis: 50%;
}

#textosLandingPage {
    flex-basis: 50%;
}

.tituloLandingPage {
    margin-top: 0;
}

#contenedorFormularioLandingPage {
    margin-top: 1.5em;
}

.contenedorFormularioPrecio {
    margin-top: 1em;
    padding: 0.5em;
}

.formularioPrecio {
    display: flex;
    align-items: center;
    column-gap: 0.7em;
    height: 100%;
}

.formularioPrecio .botonEnlace {
    padding: 0.7em;
    width: 100%;
}

.selectorCantidad {
    width: 5em;
}

.selectorCantidad input {
    width: 100%;
}

.iconoEnlaceCarrito {
    display: none;
}

.carrito {
    width: 100%;
    margin-bottom: 2em;
}

.carrito thead {
    background-color: #1e246f;
    color: white;
}

.carrito tfoot td {
    text-align: right;
}

.carrito td,
.carrito th {
    padding: 1em;
}

.carrito td {
    border: 1px solid #1e246f;
}

.carrito .cantidad {
    width: 3em;
}

.carrito .imagenProductoCarrito {
    text-align: center;
}

.carrito .imagenProductoCarrito img {
    height: 90px;
}

.enlaceEliminar {
    color: red;
    text-decoration: none;
}

#mensajeInformacion {
    border: 1px solid;
    padding: 1em;
}

#mensajeInformacion.mensajeOK {
    border-color: #08ac08;
    background-color: #ceeece;
}

#mensajeInformacion.mensajeKO {
    border-color: #c60808;
    background-color: #f4cece;
}

#mensajeInformacion::before {
    margin-right: 0.3em;
    line-height: 0;
    font-size: 1.5em;
}

.mensajeOK::before {
    content: "✔";
    color: #08ac08;
}

.mensajeKO::before {
    content: "❌";
    color: #c60808;
}

.elementoFAQ {
    display: flex;
    margin-bottom: 3em;
    position: relative; /* Para colocar el ancla del enlace de forma absoluta */
}

.imagenElementoFAQ {
    width: 30%;
    height: 12em;
    position: relative;
    margin-right: 1em;
}

.textoElementoFAQ {
    width: 70%;
    flex-grow: 1;
}

.textoElementoFAQ h3 {
    margin-top: 0;
}

#entradas {
    position: relative;
}

.bannerLateral {
    position: absolute;
    top: 0;
    right: -280px;
}

.bannerInferior {
    margin-bottom: 3em;
    text-align: center;
}

#entradas .bannerInferior  {
    text-align: center;
    width: initial;
}

.bannerIntermedio {
    display: none;
}

.bannerSuperior {
    display: none;
}

.comentarios {
    display: flex;
    flex-wrap: wrap;
    row-gap: 2em;
    margin-bottom: 3em;
}

.comentario {
    display: flex;
    column-gap: 1em;
    flex-basis: 50%;
    overflow: hidden;
}

.imagenComentario {
    flex-basis: 240px;
    max-width: 40%;
    flex-shrink: 0;
    max-height: 240px;
}

.imagenComentario img {
    object-fit: cover;
}

.valoracionComentario {
    margin-bottom: 0.5em;
}

.autorComentario {
    margin-bottom: 0.5em;
}

@media (max-width: 1780px) {
    .bannerLateral {
        display: none;
    }
}

@media (max-width: 1200px) {
    #elementoCabeceraDirecciones {
        flex-shrink: 1;
    }

    th.precioUnitario {
        white-space: initial;
    }
}

@media (max-width: 1024px) {
	.nombreProducto h2 {
		font-size: 1.2rem;
	}

	.contenedorPrecio {
		font-size: 1rem;
	}

	.listaCaracteristicas {
		font-size: 1rem;
	}

	.enlaceProducto {
		font-size: 1rem;
	}

    #contenedorGeodirecciones {
        width: 242px;
        height: 95px;
    }

    .telefonoDireccion {
        font-size: 0.8em;
    }

    #elementoCabeceraEslogan {
        font-size: 1em;
    }
}

@media (max-width: 767px) {
    h1, h2 {
        font-size: 4.5vw;
        font-weight: bold;
    }

    #anclaFormularioContacto {
        top: -130px;
    }

    .elementoDesplegable {
        max-height: 0;
        overflow: hidden;
    }

    .elementoDesplegable.altoMinimoDefecto {
        max-height: initial;
    }

    .menu-btn:checked ~ .elementoDesplegable {
        margin-top: 1em;
    }

    #elementosCabecera {
        flex-direction: column;
        align-items: initial;
    }

    .botonCabecera {
        /* Tamaño como el botón de menú */
        width: 42px;
        height: 42px;
    }

    /*#elementoCabeceraHamburguesa {
		display: block;
	}*/

    #elementoCabeceraCorreo {
        display: none;
    }

    #elementoCabeceraWhatsApp {
        display: none;
    }

    #elementoCabeceraCarrito {
        display: none;
    }

    #elementoCabeceraCorreoMovil {
        display: block;
        margin-right: 1em;
    }

    #elementoCabeceraWhatsAppMovil {
        display: block;
        margin-right: 1em;
    }

    #elementoCabeceraCarritoMovil {
        display: block;
    }

    .botonIrAFormularioContacto {
        margin-right: 0;
    }

    #elementoCabeceraTelefonoMovil {
        display: block;
        margin-right: 1em;
    }

    #elementoCabeceraDirecciones,
    #geodirecciones {
        order: 3;
        flex-direction: column;
    }

    #contenedorGeodirecciones {
        width: 181px;
        height: 182px;
    }

    #elementoCabeceraEslogan {
        display: none;
    }

    .landingPage #elementoCabeceraEslogan {
        display: initial;
    }

    .direccion {
        text-align: center;
        margin-right: 0;
        margin-top: 1em;
    }

    .telefonoDireccion {
        font-size: inherit;
    }

    /* Con el menú desplegado, el margen superior ya se aplica al contenedor de direcciones; hay que quitarlo de la primera dirección. */
    .menu-btn:checked ~ #elementoCabeceraDirecciones .direccion:first-child {
        margin-top: 0;
    }

    #pieLogo {
        font-size: 3vw;
    }

    #pieLogo h1 {
        font-weight: normal;
    }

    /*#elementoCabeceraMarcas {
		order: 4;
		text-align: center;
		padding: 0 2em;
	}*/

    #elementoCabeceraCorreo {
        text-align: center;
    }

    #elementoCabeceraCarrito {
        text-align: center;
    }

    /*#elementoCabeceraFoto {
		display: block;
		padding: 0 2em;
	}*/

    .productos {
        flex-direction: column;
        margin: 0;
    }

    .producto {
        flex-basis: initial;
        padding: 1em;
        /* En Safari Mac, si no se indica min-content, los elementos del producto se expanden más allá del contenedor. */
        grid-template-rows: min-content min-content min-content min-content;
        grid-template-areas: "nombreProducto nombreProducto" "imagenProducto preciosProducto" "caracteristicasProducto caracteristicasProducto" "enlaceProducto	enlaceProducto";
        border: 1px solid;
        margin-bottom: 1.5em;
    }

    .nombrePrecio.noRomper {
        /* En versión responsive se permite romper en varias líneas el nombre de los precios de la portada, para evitar que las
        imágenes queden demasiado estrechas. */
        white-space: normal;
    }

    /* Deshacer la eliminación del borde de los productos de la última fila en la versión de escritorio. */
    .producto:nth-child(2n+1):nth-last-child(-n+2),
    .producto:nth-child(2n+1):nth-last-child(-n+2) ~ .producto {
        border-bottom: 1px solid;
    }

    .nombreProducto {
        justify-content: center;
        margin-bottom: 1.6em;
    }

    .nombreProducto h2 {
        font-size: 4vw;
        font-weight: bold;
        text-align: center;
    }

    .imagenMarca {
        width: 20vw;
        height: 5vw;
        margin-right: 1.7em;
    }

    .caracteristicasProducto {
        margin-top: 1em;
        background-color: #eeeeee;
        padding: 0.5em;
    }

    .listaCaracteristicas {
        margin: 0;
        font-size: 3vw;
    }

    .listaCaracteristicas li {
        background-size: 1.2em;
    }

    .imagenProducto {
        margin: 0 auto;
        width: 100%;
        height: 100%;
    }

    .contenedorPrecio {
        font-size: 3vw;
    }

    .enlaceProducto {
        font-size: 3vw;
    }

    #imagenesPortada {
        display: none;
    }

    #contenidoPromocional {
        flex-direction: column;
        margin-bottom: 1.5em;
        width: 100%;
    }

    .imagenPromocionEstatica {
        margin-bottom: 1.5em;
    }

    /* En móvil, mostrar el carrusel antes. */
    #promocionCarrusel {
        order: 1;
        margin-bottom: 1.5em;
    }

    #promocionEstatica {
        order: 2;
    }

    main {
        padding-top: 26vw;
    }

    footer {
        padding-top: 1em;
    }

    #formularioContacto {
        margin-bottom: 1.5em;
    }

    #camposFormulario {
        flex-direction: column;
        flex-basis: 100%;
    }

    .campoFormulario,
    .campoFormularioDoble,
    .campoFormularioCompleto {
        width: 100%;
    }

    #contenedorDetalleProducto {
        flex-direction: column;
    }

    #nombreCaracteristicasEImagenDetalleProducto {
        flex-direction: column;
        border: 1px solid;
        padding: 1em;
        margin-bottom: 0;
        width: 100%;
    }

    #nombreDetalleProducto {
        margin-bottom: 1.5em;
        justify-content: center;
        text-align: center;
        flex-basis: initial;
    }

    #imagenMarcaDetalleProducto {
        width: auto;
        margin-right: 1.3rem;
    }

    #caracteristicasDetalleProducto {
        order: 3;
        background-color: #eeeeee;
        padding: 1em;
        flex-basis: initial;
    }

    #caracteristicasDetalleProducto h2 {
        text-align: center;
    }

    .listaCaracteristicasDetalleProducto {
        font-size: 1rem;
        text-align: center;
        padding: 0;
    }

    #imagenDetalleProducto {
        flex-basis: inherit;
        order: 2;
        margin-bottom: 1.5em;
        position: relative;
        width: 100%;
    }

    /* Solo en AMP. */
    body.esAMP #imagenDetalleProducto {
        width: 100%;
    }

    #preciosEInfoDetalleProducto {
        margin-top: 1.5em;
        font-size: 1.1rem;
    }

    #preciosDetalleProducto {
        flex-direction: column;
        flex-wrap: nowrap;
        margin-bottom: 0;
    }

    .importesYComentarioDetalleProducto {
        width: 100%;
        margin-right: 0;
    }

    .importesDetalleProducto {
        width: 100%;
    }

    .importeDetalleProducto {
        flex-basis: 50%;
        flex-grow: 1;
        text-align: center;
    }

    .precioDetalleProducto {
        flex-direction: column;
        margin: 0 0 0.2em 0;
    }

    .nombrePrecioDetalleProducto {
        width: 100%;
        text-align: center;
        margin: 0;
        background-color: #1e246f;
        color: white;
        padding-top: 0.8em;
    }

    .bonoDetalleProducto {
        font-size: inherit;
        margin-bottom: 0.2em;
    }

    #infoDetalleProducto {
        font-size: inherit;
        margin-bottom: 1.5em;
    }

    .nombrePrecioDetalleProducto {
        margin-bottom: 0.2em;
    }

    .bonoDetalleProducto, #infoDetalleProducto, .nombrePrecioDetalleProducto {
        background-color: #1e246f;
        color: white;
        font-weight: normal;
        padding: 0.7em;
    }

    #botonesFinContenido {
        flex-direction: column;
        margin-bottom: 1.5em;
    }

    .botonEnlace {
        font-size: inherit;
    }

    .enlaceMasInfo .botonEnlace,
    #enlaceFAQ .botonEnlace {
        display: inherit; /* Revertir personalización de la versión escritorio */
    }

    .enlaceMasInfo,
    #enlaceFAQ {
        margin-bottom: 0.2em;
    }

    .enlaceMasInfoBlog {
        display: inherit;
        margin-bottom: 2em;
    }

    #entradas .enlaceMasInfo {
        display: none;
    }

    .enlaceMasInfoDetalleEntrada {
        display: inherit;
    }

    #contenedorPortada,
    #contenedorDetalleProducto,
    footer .anchoMaximo {
        margin-left: auto;
        margin-right: auto;
    }

    #contenedorPortada,
    #contenedorDetalleProducto {
        margin-bottom: 1rem;
    }

    #contenedorPortada {
        /* Comento porque no se veían las imágenes de éxito en versión responsive. */
        /*flex-direction: column;*/
    }

    .anchoMaximo {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    #finalPie {
        flex-direction: column;
    }

    #enlacesPie {
        text-align: center;
    }

    #enlacesPie li {
        margin-right: 0;
        display: block;
    }

    #tablaEnlaces {
        column-count: 1;
        margin-bottom: 2em;
    }

    .tituloTablaEnlaces {
        text-align: center;
    }

    #tablaEnlaces {
        text-align: center;
    }

    .saltoLinea {
        display: none;
    }

    .imagenEntradaDetalle {
        float: none;
        width: 100%;
    }

    /* Solo en AMP. */
    body.esAMP .imagenEntradaDetalle {
        /* Truco para establecer el alto en función del ancho cuando este es relativo, ya que los layout de AMP impiden
        impiden establecer el alto automáticamente sin que la imagen se corte o se rellene con huecos. Es necesario
        calcular el alto según la relación de aspecto de las imáganes que se vayan a utilizar. */
        height: 0;
        padding-top: 56.25%;
    }

    .entradaListado {
        display: block;
        margin-bottom: 2em;
    }

    .imagenEntradaListado {
        width: 100%;
        margin-bottom: 1em;
    }

    .textoEntradaListado {
        width: 100%;
    }

    #botonesEntradaDetalle {
        margin-bottom: 1.5em;
    }

    .mensajeFormulario {
        justify-content: center;
        margin-left: 1em;
        margin-right: 1em;
    }

    #contenedorCarruselMovil {
        display: block;
        overflow: hidden;
        width: 100%;
        height: auto;
        border: none;
        padding: 0;
    }

    #contenedorVideoPromoMovil {
        display: block;
        overflow: hidden;
        width: 100%;
        height: auto;
        border: none;
        padding: 0;
    }

    #contenidoPromocional {
        display: none;
    }

    .entradasRelacionadas {
        flex-direction: column;
    }

    .entradaRelacionada {
        margin-bottom: 2em;
        flex-basis: initial;
    }

    .entradaRelacionada:last-child {
        margin-bottom: 0;
    }

    #contenedorLandingPage {
        flex-wrap: wrap;
        margin-top: 0;
    }

    #carruselLandingPage {
        flex-basis: 100%;
    }

    #textosLandingPage {
        flex-basis: 100%;
        margin-top: 2em;
    }

    .landingPage #elementoCabeceraLogoYHamburguesa {
        justify-content: center;
    }

    .carrito {
        border-collapse: collapse;
    }

    .carrito thead {
        display: none;
    }

    .carrito td::before {
        content: attr(data-label);
        float: left;
        margin-right: 1em;
    }

    .carrito td {
        display: block;
        border: 0;
        width: 100%;
        padding: 0.8em;
    }

    .carrito .celdaProducto {
        text-align: right;
        margin-bottom: 0;
    }

    .carrito tr {
        border: 1px solid #1e246f;
    }

    #smart-button-container {
        margin: 0 auto;
        text-align: center;
        float: initial;
    }

    .contenedorResumenPago #botonEnviarFormulario {
        text-align: center;
    }

    .imagenElementoFAQ {
        float: none;
        width: 100%;
    }

    /* Solo en AMP. */
    body.esAMP .imagenElementoFAQ {
        /* Truco para establecer el alto en función del ancho cuando este es relativo, ya que los layout de AMP impiden
            impiden establecer el alto automáticamente sin que la imagen se corte o se rellene con huecos. Es necesario
            calcular el alto según la relación de aspecto de las imáganes que se vayan a utilizar. */
        height: 0;
        padding-top: 56.25%;
    }

    .elementoFAQ {
        display: block;
        margin-bottom: 2em;
    }

    .imagenElementoFAQ {
        width: 100%;
        margin-bottom: 1em;
    }

    .textoElementoFAQ {
        width: 100%;
    }

    .bannerIntermedio {
        display: inherit;
        text-align: center;
        margin-bottom: 2em;
    }

    .bannerSuperior {
        display: inherit;
        text-align: center;
    }

    .bannerInferiorDetalleEntrada {
        display: none;
    }

    .bannerInferior {
        display: none;
    }

    #contenedorLandingPage {
        margin-top: 12vw;
    }

    .comentario {
        flex-basis: 100%;
    }
}

@media (max-width: 512px) {
    .importesDetalleProducto .importeDetalleProducto:nth-of-type(3) .textoEnlaceCarrito,
    .preciosProducto .textoEnlaceCarrito {
        display: none;
    }

    .importesDetalleProducto .importeDetalleProducto:nth-of-type(3) .iconoEnlaceCarrito,
    .preciosProducto .iconoEnlaceCarrito {
        display: inline;
        padding: 0.1em;
    }

    .importesDetalleProducto .importeDetalleProducto:nth-of-type(3) .selectorCantidad,
    .preciosProducto .selectorCantidad {
        width: auto;
    }

    .sufijoPrecio {
        font-size: 0.7em;
    }

    .formularioPrecio {
        display: block;
    }

    #enlaceRechazarCookies {
        display: inline-block;
        margin-top: 1em;
    }
}

@media (max-width: 400px) {
    #pieLogo {
        font-size: 4vw;
    }

    .nombreProducto h2 {
        font-size: 1rem;
    }

    .contenedorPrecio {
        font-size: 0.9rem;
    }

    .listaCaracteristicas {
        font-size: 0.9rem;
    }

    .enlaceProducto {
        font-size: 0.9rem;
    }

    main {
        padding-top: 32vw;
    }

    #contenedorLandingPage {
        margin-top: 15vw;
    }

    #elementoCabeceraLogo img {
        width: 120px;
    }
}