/* Theme Name: PLANTILLA WEB GUITARRAS MALDONADO Theme URI: the-theme's-homepage Description: a-brief-description Author: JOSE CARLOS RAMIREZ Author URI: your-URI Version: 1.0 . General comments/License Statement if any. . */ /* USO DE "REM" MODERNO EN ESTA WEB */ html {font-size: 62.5%} /* Ajuste de los rem */ body {font-size: 16px} /* 1rem = 10px */ /* TIPOGRAFÍA DE TÍTULOS ESPECIAL "Maldonado" */ @font-face { font-family: 'MaldonadoFont'; src: url('fonts/MaldonadoFont.ttf'); src: url('fonts/MaldonadoFont.ttf') format('embedded-opentype'), url('fonts/MaldonadoFont.ttf') format('ttf'), url('fonts/MaldonadoFont.ttf') format('truetype'), url('fonts/MaldonadoFont.ttf') format('svg'); } @font-face { font-family: 'MaldonadoNumber'; src: url('fonts/MaldonadoNumber.ttf'); src: url('fonts/MaldonadoNumber.ttf') format('embedded-opentype'), url('fonts/MaldonadoNumber.ttf') format('ttf'), url('fonts/MaldonadoNumber.ttf') format('truetype'), url('fonts/MaldonadoNumber.ttf') format('svg'); } :root {/* LLAMADAS DE LA WEB */ /* Paleta de colores de esta web */ --Crema: #ffefda; --RojoOscuro: #b52329; --MarronPalido: #aa825a; --MarronOscuro: #6f4720; --Blanco: white; --Negro: #1e1d1d; /* Tipografias de esta web */ --fuenteTitulos: "MaldonadoFont", sans-serif; --fuenteParrafos: "Libre Baskerville", serif;; } body {/*DECORACIÓN BASE*/ background: linear-gradient(45deg, #fff2e0 50%, #edca9b 100%) fixed;/*color de fondo gradiente*/ background-color: var(--Crema);/*color de fondo básico*/ font-family: var(--fuenteParrafos);/*tipografia de los textos de base*/ line-height: 1.6;/*gran interlineado de los textos en general*/ text-align: justify;/*todos los textos justificados (a menos qe se indique lo contrario)*/ font-size: 1.8rem; color: var(--Negro); } img {max-width: 100%; height: auto;} h1 {font-family: var(--fuenteTitulos); font-size: 7rem; font-weight: 100; text-align: center; text-shadow: 1.5px 1px 1px rgb(255 0 0); line-height: 6rem; margin-bottom: 1.4rem} h2 {font-size: 2.9rem; margin-bottom: 1.5rem; font-weight: 700; margin-top: -1rem} h4 {font-size: 2rem} p {font-weight: 400; margin-bottom: 3rem}/*Los textos de la web

serán como Body + esto*/ a {text-decoration:none; font-weight: 700;} .enlace {color: var(--MarronOscuro); text-decoration: underline} .enlace:hover {color: var(--RojoOscuro)} .contenedor { max-width: 1200px; padding-right: 20px; padding-left: 20px; margin: 0 auto; /*background-color: rgba(0, 111, 255, 0.4);*/ } /*barra de desplazamiento personalizada*/ body::-webkit-scrollbar {width: 15px} body::-webkit-scrollbar-thumb {background: var(--MarronPalido); border-radius: 10px; border: 1px solid white} body::-webkit-scrollbar-thumb:hover {background: var(--RojoOscuro)} /*Márgenes de la web*/ .top3 {margin-top: 3rem} .top6 {margin-top: 6rem} .top9 {margin-top: 9rem} .top12 {margin-top: 12rem} .top15 {margin-top: 15rem} .top20 {margin-top: 20rem} .top23 {margin-top: 23rem} /*Estilo de textos*/ .cursiva {font-style: italic} .subrayado {text-decoration: underline} .negrita {font-weight: bold} /*ESTILO DE LOS BOTONES DE LA WEB*/ /*1º estructura del botón*/ .boton {font-weight: 500; text-align: center; padding: 1rem 3rem; border-radius: 10px; transition: background 0.5s ease} /*2º colores del botón:*/ .btn-rojo {background: var(--MarronPalido)} .btn-rojo:hover {background: var(--RojoOscuro)} .btn-rojo.boton {color: white} /*3º que el botón ocupe el 100%*/ .btn-100 {display: block; width: 100%} /*3º o alinear botón al centro o la derecha (.boton debe estar envuelto por este div:*/ .padre-btn-centro {display: flex; justify-content: center} .padre-btn-derecha {display: flex; justify-content: flex-end} /*4º en movil los botones se ponen al 100%*/ @media (max-width: 600px) {.boton {display: block; width: 100%}} /*PORTADAS: TEXTO E IMAGEN EN LA CABECERA DE TODAS LAS SECCIONES (menos Home)*/ .portada {background-size: cover; background-position: center center; background-repeat: no-repeat; padding: 14rem 0} .portada h1 {padding: 0 2rem; text-shadow: 1.5px 1px 1px rgb(255 0 0),/* sombra roja original */ 0 0 10px rgba(198, 176, 138, 0.9),/* y además resplandor marrón de fondo */ 0 0 20px rgba(198, 176, 138, 0.7), 0 0 35px rgba(198, 176, 138, 0.5), 0 0 55px rgba(198, 176, 138, 0.35); } @media (max-width: 600px) { .portada {padding: 8rem 0} .portada h1 {font-size: 6.5rem} } /* ------------------------------------------------------------------------------*/ /* ------------------------------------------------------------------------------*/ /* ------------------------------ HEADER -----------------------------------*/ /* ------------------------------------------------------------------------------*/ /* ------------------------------------------------------------------------------*/ .menu-superior.tablet-movil {display: none}/*Primero no se ve el menú superior de Tablet*/ .menu-movil {display: none}/*Primero no se ve el menú desplegable del Movil*/ /*----- Disposición de los elementos del Header*/ .cabecera {max-width: 1400px; padding-right: 20px; padding-left: 20px; margin: 0 auto; /*background-color: rgba(0, 111, 255, 0.4)*/} .color-cabecera {padding: 1rem 0; position: relative; box-shadow: 0 1px 15px var(--MarronOscuro); z-index: 9} .espacio-logo {float: left; width: 34%; /*background-color: green*/} .espacio-menus {float: left; width: 66%; margin-top: 3rem; /*background-color: cyan*/} .espacio-logo img {width: 100%; max-width: 29rem !important; display: inline-block} .menu-superior {display: flex; justify-content: flex-end; gap: 2rem; align-items: center;} /* Fondo de madera semitransparente */ .color-cabecera > .cabecera {position: relative; z-index: 1} .color-cabecera::before {content: ""; position: absolute; inset: 0; background-image: url("/img/madera-pc.jpg"); background-size: cover; background-position: center; opacity: 0.7; z-index: 0; } /*----- Estilo de redes sociales*/ .menu-superior .redes a {font-size: 2.2rem; color: var(--Negro); transition: all 0.2s ease} .menu-superior .redes a:hover {color: var(--RojoOscuro); transition: all 0.2s ease;} .fa-instagram {font-weight: 600; margin-right: 0.3rem} /*----- Estilo del texto de contacto*/ .menu-superior .contacto-arriba {font-size: 1.3rem} .menu-superior .contacto-arriba p {margin-bottom: 0}/*en este caso no es un "p" al uso*/ /*----- Estilo de Selector de Idioma*/ .menu-superior .selector-idioma ul {display: flex} .menu-superior .selector-idioma a {font-family: var(--fuenteTitulos); color: var(--Negro); transition: all 0.2s ease; font-size: 2.7rem; font-weight: 100} .menu-superior .selector-idioma a:hover {color: var(--RojoOscuro); transition: all 0.2s ease} .menu-superior .selector-idioma .current-lang a {color: var(--RojoOscuro)}/*Color de la sección actual*/ .menu-superior .selector-idioma li:nth-child(1):after {content: "/"; margin-left: 0.4rem; margin-right: 0.2rem} /*----- Estilo del Menú Principal*/ .menu-principal ul {display: flex; justify-content: flex-end; gap: 4.5rem; height: 5.5rem} .menu-principal li a, .menu-movil li a {font-family: var(--fuenteTitulos); font-size: 4.4rem; color: var(--Negro); font-weight: 500; transition: all 0.2s ease} .menu-principal li a:hover, .menu-movil li a:hover {color: var(--RojoOscuro)} li.current_page_item a {color: var(--RojoOscuro)}/*Color de la sección actual*/ /* Diseño para TABLET */ @media screen and (max-width: 900px) { .menu-superior {display: none} .menu-superior.tablet-movil {display: flex} .espacio-logo {float: left; width: 100%; text-align: center;} .espacio-menus {float: left; width: 100%; margin-top: 0} .menu-principal ul {justify-content: center} } /* MENÚ DESPLEGABLE PARA MOVIL */ @media (max-width: 600px) { .menu-principal {display: none;} .menu-superior.tablet-movil .contacto-arriba {display: none}/*e-mail se va (era info superflua)*/ .menu-superior.tablet-movil {justify-content: space-between}/*redes a un lado e idiomas al otro*/ .menu-superior.tablet-movil .redes a {font-size: 2.6rem}/*Boton redes + grande pa pulsar mejor*/ .menu-superior.tablet-movil .selector-idioma a {font-size: 3.2rem}/*Boton idiomas + grande pa pulsar mejor*/ .espacio-logo {float: none; padding-bottom: 6rem}/* para empujar el Absolut del menú movil a debajo suya */ .color-cabecera {padding:0} /*--- Estilo de la cabecera del menú */ .menu-movil {display: flex; justify-content: center; margin-top: -6rem; align-items: center; flex-direction: column; /*background: rgb(35, 35, 154);*/ position: absolute; right:0; width: 100%;/*encima de la web*/ padding: 0 2rem; box-sizing: border-box;} /*--- El Botón X*/ .fundaBotonX {/*background: #ff000047;*/ padding: 10px} #botonX {width: 35px; height: 25.7px; position: relative; cursor: pointer; display: flex; flex-direction: column; justify-content: space-between} #botonX span {display: block; width: 100%; height: 4px;/*líneas del Botón X*/ background-color: var(--Negro); transition: all 0.3s ease; border-radius: 10px} /* --- Animación de la transformación del Botón X (de --- a X) */ #botonX.active span:nth-child(1) {transform: translateY(11.5px) rotate(45deg)} #botonX.active span:nth-child(2) {opacity: 0} #botonX.active span:nth-child(3) {transform: translateY(-10px) rotate(-45deg)} /*--- Menú de navegación que aparece*/ .menu-movil #menu {background: #aa825af7;/*fondo "MarrónPalido" transparente*/ width: 100%; text-align: center; border-radius: 10px; z-index: 100; max-height: 0; /* ALTURA inicial a 0 (escondido) */ overflow: hidden; /* forzar su escondite */ transition: max-height 0.5s ease-in-out} /* Transición para su ALTURA */ .menu-movil nav ul li {margin: 12px 0} .menu-movil a {color: black; display: block; padding: 2px; font-weight: 500; font-size: 2rem; line-height: 4rem} .menu-movil a:hover {color: white} .menu-movil #menu.ver {max-height: 28.5rem}/*ponerle ALTURA exacta para que se vea el menú*/ } /* ------------------------------------------------------------------------------*/ /* ------------------------------------------------------------------------------*/ /* ---------------------------- FRONT-PAGE ---------------------------------*/ /* ------------------------------------------------------------------------------*/ /* ------------------------------------------------------------------------------*/ /*COMO EN LA HOME LOS TEXTOS EN AMBOS IDIOMAS SON WIDGET: elimino su h3 del título de los Widget*/ .widget.widget_text h3 {display: none} /* --------------------------- SECCIÓN 0. SLIDESHOW -----------------------------*/ /* --- ESTILO DEL SLIDE */ .contenedor-slideshow {position: relative; width: 100%; max-width: 100%} .contenedor-slideshow img {width: 100%; height: auto; display: block;} .slide {position: absolute; top: 0; left: 0; width: 100%; opacity: 0; z-index: 1; transition: opacity 1s ease-in-out; /*Transición entre las Imágenes*/} .slide.active {opacity: 1; z-index: 2} .hueco-pc, .hueco-movil {opacity: 0}/*Truco: el Slide tendrá la altura de las img*/ /* --- ESTILO DE LAS FLECHAS */ .flecha {display: inline-block; width: 40px; height: 40px; z-index: 150; top: 48%; position: absolute; cursor: pointer; opacity: 0; border-radius: 50px; background: rgba(255, 255, 255, 0.4); transition: opacity 0.3s} .span-flecha {position: relative; width: 100%; height: 100%} .flecha span {display: block; width: 20px; height: 5px; position: absolute; border-radius: 10px; transition: all 0.4s ease} /* Flecha izquierda */ .flecha.izquierda {left: 15px; transform: rotate(-90deg)} .flecha.izquierda span:nth-child(1) {transform: rotate(-45deg); top: 15px; left: 4px} .flecha.izquierda span:nth-child(2) {transform: rotate(45deg); top: 15px; left: 15px} /* Flecha derecha */ .flecha.derecha {right: 15px; transform: rotate(-90deg)} .flecha.derecha span:nth-child(1) {transform: rotate(45deg); top: 18px; left: 4px} .flecha.derecha span:nth-child(2) {transform: rotate(-45deg); top: 18px; left: 15px} /* --- ESTILO DE LA CAJITA Y SUS CÍRCULOS */ .cajita {text-align: center; margin: 0 auto; position: relative; z-index: 150; width:170px; padding: 5px; padding-top: 7px; border-radius:50px; margin-top: -50px; background: rgba(255, 255, 255, 0.45); opacity: 0; transition: opacity 0.3s, box-shadow 0.3s} .circulo {display: inline-block; width: 15px; height: 15px; border-radius: 50%; margin: 0 5px; cursor: pointer} /* -------- HOVER Y COLORES (modificar) --------- */ .contenedor-slideshow:hover .flecha {opacity: 1} .contenedor-slideshow:hover .cajita {opacity: 1} .flecha span {background: var(--MarronOscuro)} .span-flecha {opacity: 0.5; transition: opacity 0.3s} .span-flecha:hover {opacity: 1} .contenedor-slideshow .cajita:hover {box-shadow: 0px 0px 20px 5px var(--MarronOscuro)} .circulo {background: var(--MarronOscuro); opacity: 0.5; transition: opacity 0.3s;} .circulo:hover {opacity: 1} .circulo.active {background-color: var(--RojoOscuro); opacity: 1;} .contenedor-slideshow .cajita {cursor: url(https://pedromaldonadoguitars.com/img/slideshow/stop.png) 5 0, none} /* --- Responsive --- */ img.hueco-movil {display: none} @media (max-width: 600px) { img.hueco-movil {display: block} img.hueco-pc {display: none} .contenedor-slideshow:hover .flecha {opacity: 0} .contenedor-slideshow .cajita {opacity: 1; margin-top: 15px;} } /* --------------------------- SECCIÓN 1. INTRO DEL VÍDEO -----------------------------*/ .embed-container {position: relative; height: 0; overflow: hidden; padding-top: 30px; /* IE6 workaround*/ padding-bottom: 53.6%; /* 16/9 ratio */ } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @media (max-width: 900px) {/* Reducir líneas en TABLET */ .embed-container {padding-bottom: 52.8% /* 16/9 ratio */} } @media (max-width: 600px) {/* Reducir líneas en MOVIL */ .embed-container {padding-bottom: 51% /* 16/9 ratio */} } @media (max-width: 500px) {/* Reducir líneas en MOVIL */ .embed-container {padding-bottom: 49.5% /* 16/9 ratio */} } @media (max-width: 400px) {/* Reducir líneas en MOVIL */ .embed-container {padding-bottom: 48% /* 16/9 ratio */} } /* en MOVIL corrijo el "top9" le pongo menos margin-top pa compensar el espacio de la cajita Slide */ @media (max-width: 600px) {.intro-video {margin-top: 6rem}} /* --------------------------- SECCIÓN 2. TRADICIÓN FAMILIAR -----------------------------*/ .tradicion-familiar {background-image: url("/img/madera-pc.jpg"); background-size: cover; background-position: center center; padding-top: 2.5rem} .tradicion-familiar .padre-col {display: flex; flex-direction: row; align-items: center} .tradicion-familiar .texto {width: 35%} .tradicion-familiar .collage {width: 65%} .tradicion-familiar h1 {text-align: left; width: 30rem;} .tradicion-familiar h1 span {font-family: 'MaldonadoNumber', sans-serif; font-weight: 600; font-size: 6.5rem} /*MECANISMO DE PONER CADA FOTO DEL COLLAGE ENCIMA DE LA ANTERIOR*/ .tradicion-familiar .collage {position: relative} .tradicion-familiar .collage img {position: absolute; width: 53%; height: auto; object-fit: cover} .tradicion-familiar .collage img:nth-child(1) {top: -2rem; left: 0; z-index: 1} .tradicion-familiar .collage img:nth-child(2) {top: -2.5rem;right: 0; z-index: 2} .tradicion-familiar .collage img:nth-child(3) { bottom: 0; left: 0; z-index: 3} .tradicion-familiar .collage img:nth-child(4) {bottom: 0; right: 0; z-index: 4} @media (max-width: 900px) {/* TABLET */ .tradicion-familiar {margin-top: 20rem} .tradicion-familiar .padre-col {flex-direction: column-reverse} .tradicion-familiar .texto {width: 100%; margin-bottom: 3rem} .tradicion-familiar h1 {width: auto; text-align: center} .tradicion-familiar .collage {width: 100%; margin-top: 0; margin-bottom: 2rem} .tradicion-familiar .collage {aspect-ratio: 3 / 2} .tradicion-familiar .collage img:nth-child(1), .tradicion-familiar .collage img:nth-child(2) {top: 42%} .tradicion-familiar .collage img:nth-child(3), .tradicion-familiar .collage img:nth-child(4) {bottom: 50%} } @media (max-width: 600px) {/* MOVIL */ .tradicion-familiar {margin-top: 15rem} .tradicion-familiar {background-image: url("/img/madera-movil.jpg")} .tradicion-familiar .collage img:nth-child(1), .tradicion-familiar .collage img:nth-child(2) {top: 39%} .tradicion-familiar .collage img:nth-child(3), .tradicion-familiar .collage img:nth-child(4) {bottom: 53%} } /* --------------------------- SECCIÓN 3. MUESTRA DE PRODUCTOS -----------------------------*/ .muestra-productos {display: flex; flex-direction: row; gap: 3rem} .muestra-productos .texto {width: 36%; display: flex; flex-direction: column; justify-content: center} .muestra-productos .imagenes {width: 64%} .muestra-productos .texto h1 {text-align: left; width: 36rem} .muestra-productos .imagenes {display: flex; align-items: center} .muestra-productos .imagenes img {width: 33.3%} @media (max-width: 900px) {/* TABLET */ .muestra-productos {margin-top: 17rem} .muestra-productos {flex-direction: column; gap: 0} .muestra-productos .texto, .muestra-productos .imagenes {width: 100%} .muestra-productos .texto h1 {width: auto; text-align: center} } @media (max-width: 600px) {/* MOVIL */ .muestra-productos {margin-top: 13rem} } /* --------------------------- SECCIÓN 4. MUESTRA DE GALERÍA -----------------------------*/ /*LOS BANNERS QUE SE MUEVEN SOLOS*/ .banner {width: 100%; display: flex; align-items: center; position: relative; overflow: hidden; margin-bottom: 2rem} .banner img {width: auto !important; max-width: none !important; position: relative} .banners-internos {display: flex; position: relative} .uno .banners-internos {align-items: flex-end} .banner .bloque {position: relative; display: inline-block; margin-right: 2rem; height: 100%} .muestra-galeria p {text-align: center; margin-top: 3rem; margin-bottom: 3rem} @media (max-width: 900px) {/* TABLET */ .muestra-galeria {margin-top: 17rem} } @media (max-width: 600px) {/* MOVIL */ .muestra-galeria {margin-top: 13rem} } /* -------------------------------------------------------------*/ /* -------------------------------------------------------------*/ /* ---------------------- TALLER --------------------------*/ /* -------------------------------------------------------------*/ /* -------------------------------------------------------------*/ .pag-taller .portada {background-image: url("/img/portadas/taller-pc.jpg")} @media (max-width: 600px) {.pag-taller .portada {background-image: url("/img/portadas/taller-movil.jpg")}} .taller p {margin-bottom: 2rem} .taller img {display: none}/*En PC TODAS LAS IMÁGENES por HTML van fuera*/ .taller .texto-movil {display: none} .taller .imagen-primera-movil {display: none} .taller .padre-uno {display: grid; grid-template-columns: 40% 60%} .taller .padre-uno .texto {margin-left: 2rem} .taller .padre-uno .imagen h2 {display: none} .taller .padre-uno .imagen {/*Meto la Imagen por CSS*/ background-image: url(/img/taller/1.jpg); background-repeat: no-repeat; background-size: cover; background-position: center right; } .taller .mini-padre-uno {display: grid; grid-template-columns: 45% 55%} .taller .mini-padre-uno .mini-imagen {/*Meto la Imagen por CSS*/ background-image: url(/img/taller/2.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center; } .taller .mini-padre-uno .mini-texto p {margin-bottom: -0.5rem; margin-right: 2rem} .taller .padre-dos {display: grid; grid-template-columns: 50% 50%} .taller .padre-dos .texto p {margin-right: 2rem} .taller .padre-dos .imagen {/*Meto la Imagen por CSS*/ background-image: url(/img/taller/3.jpg); background-repeat: no-repeat; background-size: cover; background-position: center left; } .taller .padre-tres {display: grid; grid-template-columns: 50% 50%} .taller .padre-tres .texto {margin-left: 2rem} .taller .padre-tres .imagen.uno {/*Meto la Imagen por CSS*/ background-image: url(/img/taller/4.jpg); background-repeat: no-repeat; background-size: cover; background-position: center left; height: 50%; margin-bottom: 2rem } .taller .padre-tres .imagen.dos {/*Meto la Imagen por CSS*/ background-image: url(/img/taller/5.jpg); background-repeat: no-repeat; background-size: cover; background-position: center left; height: 50% } .taller .padre-cuatro {display: flex; gap: 4rem} .taller .padre-cuatro .caja-uno {width: 50%} .taller .padre-cuatro .caja-dos {width: 50%} .taller .titulo-cuatro {text-align: center} .taller .padre-cuatro img {display: block} .taller .titulo-cinco {text-align: center} .taller .padre-cinco {display: grid; grid-template-columns: 45% 55%; margin-bottom: 2rem} .taller .padre-cinco .texto p {margin-right: 2rem} .taller .padre-cinco .imagen {/*Meto la Imagen por CSS*/ background-image: url(/img/taller/8.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center; } .taller .imagen-final {display: block} .taller .imagen-final-mini {display: none} /*Corregir espacios de los últimos "p"*/ .taller .fin {margin-bottom: 0} .taller .padre-tres .fin {margin-bottom: -2.5rem} @media (max-width: 900px) {/*En Tablet quito TODAS LAS IMÁGENES x CSS y devuelvo las imagenes x HTML*/ .taller img {display: block; width: 100%} .taller h2 {text-align: center} .taller .padre-uno {grid-template-columns: 1fr}/*y qe se pongan en 1 columna*/ .taller .padre-uno .texto {margin-left: 0rem} .taller .padre-uno .imagen {background-image: none; margin-bottom: 2rem} .taller .texto-movil {display: block} .taller .padre-uno .texto h2 {display: none} .taller .mini-padre-uno {grid-template-columns: 1fr}/*y qe se pongan en 1 columna*/ .taller .mini-padre-uno .mini-texto p {margin-bottom: 2rem; margin-right: 0} .taller .padre-dos {grid-template-columns: 1fr}/*y qe se pongan en 1 columna*/ .taller .padre-dos .texto p {margin-right: 0; margin-bottom: 2rem} .taller .padre-tres {grid-template-columns: 1fr}/*y qe se pongan en 1 columna*/ .taller .padre-tres .imagenes {grid-row: 2 / 3} .taller .padre-tres .texto {grid-row: 1 / 2} .taller .padre-tres .texto {margin-left: 0} .taller .padre-tres .fin {margin-bottom: 2rem} .taller .padre-cuatro {flex-direction: column; gap: 2rem} .taller .padre-cuatro .caja-uno {width: 100%} .taller .padre-cuatro .caja-dos {width: 100%} .taller .padre-cinco {grid-template-columns: 1fr}/*y qe se pongan en 1 columna*/ .taller .padre-cinco .texto p {margin-right: 0; margin-bottom: 2rem} } @media (max-width: 600px) {/*MOVIL*/ .taller .imagen-final-mini {display: block} .taller .imagen-final {display: none} .taller .imagen-primera-movil {display: block} .taller .imagen-primera {display: none} } /* -------------------------------------------------------------*/ /* -------------------------------------------------------------*/ /* --------------------- GUITARRAS ------------------------*/ /* -------------------------------------------------------------*/ /* -------------------------------------------------------------*/ .pag-guitarras .portada {background-image: url("/img/portadas/guitarras-pc.jpg")} @media (max-width: 600px) {.pag-guitarras .portada {background-image: url("/img/portadas/guitarras-movil.jpg")}} .botones-guitarras {display: flex; flex-direction: row; gap: 4rem; /*background:red*/} .botones-guitarras .caja {width: 33.3%; /*background: gray*/} .botones-guitarras .caja h1, .botones-guitarras .caja p {color: var(--Negro)} .botones-guitarras img {width: 100%; max-width: 300px; margin: 0 auto; padding: 0 2rem; transition: all 0.5s ease} .botones-guitarras .caja:hover img {transition: all 0.5s ease; transform: scale(1.1)} .botones-guitarras .caja:hover .boton {background: var(--RojoOscuro)} .botones-guitarras p {letter-spacing: -0.45px} @media (max-width: 900px) {/* TABLET */ .botones-guitarras {flex-direction: column} .botones-guitarras .caja {width: 100%; margin-bottom: 6rem} } @media (max-width: 600px) {/* MOVIL */ .botones-guitarras img {max-width: 220px} .botones-guitarras {flex-direction: column} .botones-guitarras .caja {width: 100%} .botones-guitarras .caja h1 {margin-bottom: 0.5rem} .botones-guitarras .caja .boton {margin-top: -1rem} } /* -------------------------------------------------------------*/ /* -------------------------------------------------------------*/ /* ---------------- ELEGIR ABRIR GUITARRA --------------------*/ /* -------------------------------------------------------------*/ /* -------------------------------------------------------------*/ .pagina-modelos-guitarras .portada {background-image: url("/img/portadas/guitarras-pc.jpg")} @media (max-width: 600px) {.pagina-modelos-guitarras .portada {background-image: url("/img/portadas/guitarras-movil.jpg")}} /* Forzar los productos en 3 columnas */ .woocommerce ul.products {display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 3rem} .woocommerce ul.products li.product {width: 100% !important; margin: 0 !important; margin-bottom: 1.5rem !important} .woocommerce ul.products li.product h2 {padding: 1rem !important; text-align: center !important;} .woocommerce ul.products li.product a img {margin: 0 !important} /*Estilo del Título del producto*/ .woocommerce ul.products li.product h2 {background: none; color: var(--Negro); font-size: 2.45rem !important; margin-bottom: -0.2rem !important; display: -webkit-box;/*Que los títulos solo ocupen 1 renglon*/ -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden} .woocommerce ul.products li.product:hover h2 {color: var(--RojoOscuro)} @media (max-width: 900px) { .woocommerce ul.products {grid-template-columns: 1fr} .woocommerce.columns-4 {margin: 0 1rem !important}/*Que se vean mas peqeñas las img en dispositivos*/ } /*Mostrar primero el Nombre del producto y luego su imagen*/ .woocommerce ul.products li.product a {display: flex !important; flex-direction: column !important} .woocommerce ul.products li.product .woocommerce-loop-product__title {order: -1 !important} /*Elimina botón "read more"*/ .woocommerce ul.products li.product .button {display: none !important} /*Elimina el Before que crea WP para que si solo hay un Producto se empuje al medio*/ .woocommerce ul.products::before, .woocommerce ul.products::after { display: none !important; content: none !important} /*Añade bordes de color marrón a la imagen del Producto (usando el div forzado x JS) y agranda la img en hover*/ .woocommerce ul.products li.product a {display: flex; flex-direction: column} .woocommerce ul.products li.product h2 {order: -1; margin-bottom: 1rem; position: relative} .imagen-wrapper {position: relative; overflow: hidden} .imagen-wrapper img {width: 100%; display: block; transition: transform 0.4s ease} .woocommerce ul.products li.product:hover .imagen-wrapper img {transform: scale(1.12)} .imagen-wrapper::after {content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at center, transparent 60%, rgb(169 138 91 / 90%) 100%) } /*--- Personalización del Paginador*/ /*correcciones varias*/ .woocommerce-notices-wrapper, .woocommerce-result-count, .woocommerce-ordering {display: none !important} .woocommerce nav.woocommerce-pagination {text-align: right !important} .woocommerce nav.woocommerce-pagination ul {border: none !important} .woocommerce nav.woocommerce-pagination ul li {border-right: none !important} .woocommerce-pagination {margin-top: 4rem} /*grossor de los elementos*/ .woocommerce nav.woocommerce-pagination ul li a {font-size: 20px !important; font-weight: 800 !important} .woocommerce nav.woocommerce-pagination ul li span {font-size: 20px !important; font-weight: 800 !important} /*color de los elementos*/ .woocommerce nav.woocommerce-pagination ul li a {color: var(--Negro) !important; padding: 5px !important; min-width: 0px !important} /*color del hover que hagas a los elementos*/ .woocommerce nav.woocommerce-pagination ul li a:hover {color: var(--RojoOscuro) !important; background: none !important} /*color de la página donde estás ahora*/ .woocommerce nav.woocommerce-pagination ul li span.current {color: var(--MarronPalido) !important; background: none !important; padding: 5px !important; min-width: 0px !important} /* -------------------------------------------------------------*/ /* -------------------------------------------------------------*/ /* ----------------- CADA GUITARRA ABIERTA -------------------*/ /* -------------------------------------------------------------*/ /* -------------------------------------------------------------*/ .single .portada {background-image: url("/img/portadas/guitarras-pc.jpg")} @media (max-width: 600px) {.single .portada {background-image: url("/img/portadas/guitarras-movil.jpg")}} /*Truco para creer que estás en la Cabecera normal (pintando de rojo el idioma actual*/ .menu-superior .selector-idioma a.colorido {color: var(--RojoOscuro)} /*Caja de imagen al 42%*/ .woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images {width: 42% !important} /*Caja de texto al 53% (el 5% vacío es el margen de su izquierda con la imagen)*/ .woocommerce #content div.product div.summary, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.summary {width: 53% !important} .single .padre-col-articulo .price {display: none !important} .single .related.products {display: none !important} .single .padre-col-articulo h1 {font-family: var(--fuenteParrafos); font-size: 3rem; font-weight: 700; text-align: left; text-shadow: none; margin-bottom: 1.4rem; line-height: 4rem; } /* En Móvil el Título del producto aparece encima */ .titulo-product-movil {display: none;} @media screen and (max-width: 900px) { /*Caja de imagen al 100%*/ .woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images {width: 100% !important} /*Caja de texto al 100%*/ .woocommerce #content div.product div.summary, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.summary {width: 100% !important} .single .padre-col-articulo .titulo-product-movil {display: block; text-align: center;} .woocommerce-product-details__short-description h1 {display: none;} } /* Hacer Zoom de Lupa en la imagen principal */ .woocommerce-product-gallery__wrapper .zoomImg { width: 180% !important; height: 180% !important; /* Agranda más el zoom que hace */ cursor: zoom-in; /* Cambia el cursor a la lupa */ } /* Que las imágenes pequeñas de abajo se muestren de 6 en 6 */ .woocommerce div.product div.images .flex-control-thumbs li {width: 16.6% !important} .woocommerce div.product .woocommerce-product-gallery--columns-4 .flex-control-thumbs li:nth-child(4n+1) {clear: none !important} /* Quitar el texto de la categoría */ .product_meta {display: none} /* Otros detalles */ .woocommerce div.product div.images .flex-control-thumbs {margin-top: 0.5rem !important; width: 101% !important} .flex-control-nav.flex-control-thumbs li {padding-right: 0.5rem !important} .texto-contacto-extra {font-weight: 600} .texto-contacto-extra a {font-weight: 800; color: var(--MarronOscuro); text-decoration: underline} .texto-contacto-extra a:hover {font-weight: 800; color: var(--RojoOscuro)} /* Que el video ocupe el 100% de ancho (forzandole por JS el nombre "p-con-iframe") */ .woocommerce-product-details__short-description .p-con-iframe {position: relative; height: 0; overflow: hidden; padding-top: 30px; /* IE6 workaround*/ padding-bottom: 53.6%; /* 16/9 ratio */ } .woocommerce-product-details__short-description iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;} /*Quitar boton lupa*/ .woocommerce-product-gallery__trigger {display: none !important} /* ---------------------------------------------------------------------*/ /* ---------------------------------------------------------------------*/ /* -------------------- GALERÍA DE IMÁGENES ------------------------*/ /* ---------------------------------------------------------------------*/ /* ---------------------------------------------------------------------*/ .pag-galeria .portada {background-image: url("/img/portadas/galeria-pc.jpg")} @media (max-width: 600px) {.pag-galeria .portada {background-image: url("/img/portadas/galeria-movil.jpg")}} .galeria {margin: 0 2rem} .rl-gallery.rl-basicgrid-gallery {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 2rem} .rl-gallery-item img {width: 100%; transition: all 0.5s ease} .rl-gallery-item img:hover {opacity: 0.5; transition: all 0.5s ease} /*Estilo de las leyendas de las imágenes*/ .gslide-description.description-bottom {background: none !important; max-width: 100% !important} .glightbox-clean .gslide-desc {color: white; text-align: center; font-size: 1.8rem !important; line-height: 3rem !important; font-family: var(--fuenteParrafos) !important} .glightbox-mobile .glightbox-container .gslide-desc {color: white !important} .glightbox-mobile .glightbox-container .gslide-description {padding-bottom: 0 !important} @media (max-width: 900px) {/* TABLET */ .rl-gallery.rl-basicgrid-gallery {grid-template-columns: 1fr 1fr 1fr} } @media (max-width: 600px) {/* MOVIL */ .rl-gallery.rl-basicgrid-gallery {grid-template-columns: 1fr 1fr} } /* ---------------------------------------------------------------------*/ /* ---------------------------------------------------------------------*/ /* -------------------------- CONTACTO -----------------------------*/ /* ---------------------------------------------------------------------*/ /* ---------------------------------------------------------------------*/ .pag-contacto .portada {background-image: url("/img/portadas/contacto-pc.jpg")} @media (max-width: 600px) {.pag-contacto .portada {background-image: url("/img/portadas/contacto-movil.jpg")}} .contacto {display: flex; gap: 2rem; align-items: center} .contacto .texto {width: 45%; text-align: center} .contacto .imagen {width: 55%} .contacto .imagen img {width: 100%} .contacto .texto .sin {margin-bottom: 0} .contacto .texto span {font-weight: bold;} @media (max-width: 900px) {/* TABLET */ .contacto {flex-direction: column; gap: 8rem} .contacto .texto {width: 100%} .contacto .imagen {width: 100%} } .mapa {margin-bottom: -15rem} .mapa iframe {width: 100%; height: 600px} @media (max-width: 900px) {/* TABLET */ .mapa {margin-bottom: -9rem} } /* -------------------------------------------------------------*/ /* -------------------------------------------------------------*/ /* ----------------------- FOOTER -------------------------*/ /* -------------------------------------------------------------*/ /* -------------------------------------------------------------*/ .color-footer {background-image: url("/img/madera-pc.jpg"); background-size: cover; background-position: center center; padding: 2rem 0; box-shadow: 0 -1px 15px var(--MarronOscuro); position: relative} .pie {display: flex; gap: 2rem; align-items: center; padding-right: 18px; padding-left: 18px; text-align: center;} .pie-contacto {width: 41.5%} .pie-logo {width: 30%} .pie-redes {width: 28.5%} .pie-contacto p {font-size: 1.5rem; margin-bottom: 1rem} .pie-contacto span {font-weight: bold; margin-right: 0.5rem} .pie-logo img {width: 100%; max-width: 29rem !important; text-align: center; display: inline-block} .pie-redes p {font-size: 1.6rem; margin-bottom: 0.5rem} .pie-redes a {color: var(--Negro); text-decoration: underline; transition: all 0.2s ease} .pie-redes a:hover {color: var(--RojoOscuro); transition: all 0.2s ease} .pie .redes a {font-size: 2.5rem; color: var(--Negro); transition: all 0.2s ease} .pie .redes a:hover {color: var(--RojoOscuro); transition: all 0.2s ease} @media (max-width: 900px) {/* TABLET */ .color-footer {margin-top: 9rem} .pie {flex-direction: column;} .pie-contacto, .pie-logo, .pie-redes {width: 100%} .pie-logo {margin-top: -1rem} .pie-redes {margin-top: -1rem} } @media (max-width: 600px) {/* MOVIL */ .pie p {font-size: 1.4rem} .pie-contacto span {display: block} } /*----- El boton de subir arriba MODERNO */ .subir {display: inline-block; padding: 10px; padding-left: 9px; background: #ffffff80; cursor: pointer; position: fixed; bottom: 0; right: 0; border-radius: 100px; z-index:100; color: #cf2027; margin: 8px 10px; } .flecha {font: normal normal normal 25px/1 FontAwesome !important;} .subir:hover .flechas span {background: var(--RojoOscuro)} .flechas {display: inline-block; width: 22px} .flechas span {display: block; width: 20px; height: 3px; background: var(--MarronOscuro); transition: all 0.5s ease} .flechas span:nth-child(1) {transform: rotate(-45deg); position: absolute; margin-top: -9px; margin-left: -5px;} .flechas span:nth-child(2) {transform: rotate(45deg); margin-top: -9px; margin-left: 8px;} /*ESTILO DE LAS COOKIES*/ #cajacookies {background: #c3343a; color: white; padding: 10px; text-align: center; position: fixed; bottom: 0px; width: 100%; z-index: 99} #cajacookies a {color: black; text-decoration: underline;} #cajacookies a:hover {color: var(--MarronPalido)} #cajacookies button {background: black; color: white; margin-left: 25px; border: 0px; padding: 8px 20px} #cajacookies button:hover {background:var(--MarronPalido); color: white} #cajacookies p {font-size: 16px; margin-bottom: 0} @media screen and (max-width: 864px) {#cajacookies button {margin-top: 6px}} /* ----------------------------------------------------------------*/ /* ----------------------------------------------------------------*/ /* -------------------- PÁGINA DE COOKIES -----------------------*/ /* ----------------------------------------------------------------*/ /* ----------------------------------------------------------------*/ .pagina-cookies p, .pagina-cookies ul, .pagina-cookies ol {font-size: 17.5px;} .pagina-cookies .titular {margin-top: 6rem} .pagina-cookies h3 {font-size: 20px; margin-top: 40px} .pagina-cookies p {margin: 5px 0;} .pagina-cookies ul {margin: 5px 0;} .pagina-cookies ol {margin-bottom: 15px} /* -------------------------------------------------------------*/ /* -------------------------------------------------------------*/ /* ------------- INDEX (pag no encontrada) ------------------*/ /* -------------------------------------------------------------*/ /* -------------------------------------------------------------*/ .index-pag-no-encontrada {text-align: center; margin: 100px 0} .index-pag-no-encontrada h2 {font-size: 30px; font-weight: 500} .index-pag-no-encontrada p {font-size: 20px; font-weight: 300}