/* Theme Name: Maderia Theme Theme URI: https://mswoodworksslp.com Author: MS Woodworks Author URI: https://mswoodworksslp.com Description: Tema para WordPress + WooCommerce construido para MS Woodworks. Diseñado para trabajar junto al plugin Maderia Configurador (mesas de madera maciza personalizables). Identidad editorial cálida: fondo papel, tipografía serif para titulares y monoespaciada para datos, acento mostaza, cabecera transparente sobre fotografía y catálogo basado en imágenes reales de fabricación. Version: 2.9.1 Requires at least: 6.2 Requires PHP: 8.0 Tested up to: 6.6 WC requires at least: 8.0 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: maderia-theme */ /* ========================================================== TOKENS ========================================================== */ :root{ /* La paleta se entibia en la fase 1. Los nombres NO cambian: las ~1000 líneas de reglas que hay más abajo siguen apuntando a --ink, --line, --paper… y así no hay que reescribir nada para cambiar la temperatura del color. Negro y papel dejan de ser neutros: el negro pasa a un café casi negro y el blanco a un papel cálido. El mostaza se queda como único acento (es lo que pide la dirección de arte) y se le añade una versión oscura, porque #f8d466 sobre papel claro no tiene contraste suficiente para texto pequeño: #f8d466 se queda para rellenos y superficies grandes, --mustard-deep para texto y bordes. */ /* Paleta brutalista/minimalista: negros y blancos puros según brief */ --black:#111111; --ink:#111111; /* Texto secundario: descripciones de opciones, etiquetas de la ficha, «Precio unitario», contadores de caracteres, cabeceras de tabla del checkout. #8F8F8F daba 3,23:1 sobre blanco —por debajo del 4,5:1 que pide la WCAG AA para texto normal— y casi todos estos usos son justamente texto pequeño: 0,62 a 0,86 rem. Se ve claro en un monitor de escritorio y desaparece en un móvil a pleno sol. #6F6F6F da 5,02:1 sobre blanco y 4,57:1 sobre --paper-soft, que es el otro fondo donde se usa. Sigue siendo claramente un tono secundario, pero ahora se lee. */ --muted:#6F6F6F; --paper:#FFFFFF; --paper-soft:#F5F4F0; --line:#D8D8D4; --mustard:#F5D51D; /* El amarillo del brief da 1.32:1 sobre el blanco cálido, así que como texto es ilegible. Estos dos tonos son el mismo amarillo oscurecidos lo justo para llegar a 4.5:1 en papel: #7A6600 da 6.0:1 y #6B5900 da 7.1:1. El amarillo puro queda para iconos, rellenos e indicadores sobre negro, donde sí llega a 12.9:1. */ --mustard-deep:#7A6600; --mustard-ink:#6B5900; --green:#2f6b3f; /* El mismo verde para fondo negro. --green da 2,96:1 sobre #111111, así que los iconos de la franja de confianza y su línea superior de 2px se perdían prácticamente en el negro de la cabecera. Este es el mismo tono aclarado hasta 5,34:1, que es lo que hace falta para que un elemento gráfico se distinga del fondo (3:1). En superficies claras se sigue usando --green, que ahí sí tiene 6,37:1. */ --green-light:#3E9A50; --trust-bg:#F5F4F0; /* Texto secundario: 2.94:1 no sirve para letra pequeña, así que se oscurece a 5.1:1 sobre el blanco cálido. */ --muted-ink:#6A6A66; /* Maderas: mantenemos nombres para no romper reglas existentes */ --wood-nogal:#3e2a1d; --wood-encino:#c9a66b; --clay:#a8623c; --radius:2px; --maxw:1280px; /* Altura de la zona puente del panel de Colecciones: cubre el hueco entre el enlace y el panel para que el cursor nunca lo pierda. */ --bridge:20px; /* Una sola familia tipográfica: Manrope */ --font-editorial:'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-display:'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono:'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-body:'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Superficie de tarjeta */ --surface:#FFFFFF; /* Sistema de movimiento. Todas las duraciones y curvas salen de aquí para que el sitio se mueya con un solo ritmo. */ --dur-1:.18s; /* microinteracción: hover, foco */ --dur-2:.32s; /* transición de estado: menú, panel */ --dur-3:.55s; /* entrada de bloque */ --dur-4:.9s; /* tempos del hero */ --ease-out:cubic-bezier(.22,.61,.36,1); --ease-in-out:cubic-bezier(.65,.05,.36,1); --ease-mask:cubic-bezier(.76,0,.24,1); /* Alto de la cabecera para poder reservar el hueco que deja al fijarse. La JavaScript lo escribe en tiempo real (--topbar-h) porque el alto de la franja de confianza depende del texto y se dobla en pantallas pequeñas. */ --topbar-h:118px; --header-h:76px; } /* La franja de confianza y el logotipo se mueven con el scroll, así que el hueco que dejan por arriba lo decide la JavaScript. Sin JavaScript el valor por defecto del token mantiene el sitio igual de legible. */ @media (prefers-reduced-motion:reduce){ /* Prácticamente cero, no cero exacto. * * Poner 0s a secas rompería las transiciones de entrada y salida * del menú: el panel desaparecería al instante de pulsar cerrar, * sin el tiempo de un fotograma para terminar de moverse, y en * algunos navegadores el elemento se queda pegado a mitad del * recorrido. Con 0.01s el mismo cambio de estado sigue produciéndose, * solo que ya no se percibe como movimiento. */ :root{--dur-1:.01s;--dur-2:.01s;--dur-3:.01s;--dur-4:.01s;} } /* ========================================================== RESET / BASE ========================================================== */ *,*::before,*::after{box-sizing:border-box;} html{-webkit-text-size-adjust:100%;} /* Dos garantías para que ninguna pantalla se desplace de lado. Esto no es una parrilla responsive: es el mínimo que hace falta para que un elemento más ancho que la pantalla —una foto subida con más resolución que un móvil, un SVG con ancho fijo, un iframe— no obligue a arrastrar la página entera de lado para poder leerla. Los arreglos de maquetación van en su media query, no aquí; esto es la red de seguridad. Y overflow-wrap en body, que hereda a todo el texto, para que una dirección de correo o un nombre de archivo larguísimo parta la línea en vez de empujar el documento. Con word-break:break-word se partirían todas las palabras, que no es lo que se busca aquí. */ img,svg,video,canvas,iframe,embed,object{ max-width:100%; height:auto; } /* Esta regla arrancaba con un tabulador que no la metía dentro de ninguna otra: un error de sangría que se coló al añadirle overflow-wrap, y que hacía que la declaración siguiente se escribiera pensando que estaba dentro del bloque de las imágenes. */ body{ overflow-wrap:break-word; margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-display); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; } /* Los titulares cambian de familia y por eso también de peso: la serif editorial solo tiene 400, y los subtítulos se quedan en la grotesca que ya pedía font-weight:800. Separar las dos reglas en vez de dejar h1..h4 juntos es lo que evita la negrita sintética. */ h1,h2{ font-family:var(--font-editorial); font-weight:400; line-height:1.04; letter-spacing:-0.015em; margin:0 0 18px; } h3,h4{ font-family:var(--font-display); font-weight:700; line-height:1.2; margin:0 0 14px; letter-spacing:-0.005em; } p{margin:0 0 18px;color:var(--ink);} a{color:inherit;text-decoration:none;} img{max-width:100%;height:auto;display:block;} ul{margin:0;padding:0;list-style:none;} button{font-family:inherit;cursor:pointer;} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;} .site-main{display:block;} /* ========================================================== BUTTONS ========================================================== */ .btn, .button, input[type="submit"], .single_add_to_cart_button{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:16px 30px; background:var(--black); color:var(--paper) !important; border:1px solid var(--black); border-radius:var(--radius); font-family:var(--font-mono); font-weight:500; font-size:0.74rem; text-transform:uppercase; letter-spacing:0.14em; transition:background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out); } /* El relleno de los botones es el único sitio donde el mostaza se usa como color de superficie: es el acento de la marca y si aparece en más sitios deja de ser acento. El relleno se queda en :hover y :focus-visible para que un usuario de teclado lo vea igual que uno que pasa el ratón. */ .btn:hover, .button:hover, .single_add_to_cart_button:hover, .btn:focus-visible, .button:focus-visible, .single_add_to_cart_button:focus-visible{ background:var(--mustard); border-color:var(--mustard); color:var(--black) !important; } .btn-outline, .button.wc-forward{ background:transparent; color:var(--ink) !important; border-color:var(--ink); } .btn-outline:hover, .btn-outline:focus-visible{background:var(--ink);color:var(--paper) !important;} .maderia-configure-btn.alt{background:var(--black);border-color:var(--black);color:var(--paper) !important;} .maderia-configure-btn.alt:hover, .maderia-configure-btn.alt:focus-visible{background:var(--mustard);border-color:var(--mustard);color:var(--black) !important;} /* Foco visible en todo el sitio. Se usa :focus-visible para que el anillo no aparezca al hacer clic con el ratón, pero sí al tabular con el teclado. Este es el requisito de accesibilidad número uno: sin él, quien navega con teclado no sabe dónde está. */ :focus-visible{outline:2px solid var(--mustard-ink);outline-offset:3px;} .on-dark :focus-visible{outline-color:var(--mustard);} /* ========================================================== FRANJA DE CONFIANZA ========================================================== Sigue siendo una franja sólida, y esa fue una decisión consciente. Sobre la foto del héroe, transparentarla habría dejado su texto (que edita el administrador desde el panel) competing con el tono de la madera, sin garantías de contraste. Una franja sólida arriba del logotipo transparente se lee como una decisión de diseño, no como un descuido; y el contenido del cliente nunca se sacrifica por una animación. En estado compacto se encoge: la franja sube y sale, y la cabecera queda más limpia. En la portada sigue siendo sólida, solo más baja. */ .trust-bar{ background:#111111; border-top:2px solid var(--green-light); font-family:var(--font-mono); font-size:.72rem; letter-spacing:.04em; overflow:hidden; transition:max-height var(--dur-3) var(--ease-out), opacity var(--dur-2) var(--ease-out); max-height:60px; } .trust-bar-inner{ display:flex; justify-content:center; gap:36px; flex-wrap:wrap; padding:9px 28px; } /* La franja se pliega al compacto. max-height en vez de display:none porque display:none no se puede animar. */ .site-top[data-state="compact"] .trust-bar, .site-top[data-state="hidden"] .trust-bar{ max-height:0; opacity:0; border-top-color:transparent; } /* Texto claro: la franja comparte el negro de la cabecera. El verde del borde y de los iconos se mantiene, porque sobre negro se lee y es lo que da el acento de color de la franja. */ .trust-item{display:inline-flex;align-items:center;gap:7px;color:rgba(255,255,255,.86);} .trust-item svg{color:var(--green-light);flex-shrink:0;} /* En móvil la franja con tres mensajes se apila y podría comerse media pantalla. Se limita a una línea con desplazamiento y sin desbordamiento: el resto de mensajes sigue estando, pero no empuja la cabecera. */ @media (max-width:700px){ .trust-bar{max-height:34px;} .trust-bar-inner{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:8px 20px; gap:22px; justify-content:flex-start; } .trust-bar-inner::-webkit-scrollbar{display:none;} .trust-item{white-space:nowrap;flex-shrink:0;} } /* ========================================================== HEADER ========================================================== */ /* Encabezado: la franja de confianza y la barra negra se pegan JUNTAS como un solo bloque. Antes la franja se iba al hacer scroll y el encabezado saltaba de golpe; además cada capa pegajosa repetía un 100px escrito a mano, número que solo servía mientras el encabezado midiera exactamente eso. Si el encabezado crece (una línea más de menú, una franja con tres mensajes) todo lo que estaba a 100px se metía debajo y se veía cortado. Ahora solo hay un bloque pegajoso y nada más se superpone a él. */ /* ========================================================== CABECERA — comportamiento al hacer scroll ========================================================== Tres estados, escritos en el atributo data-state de .site-top por theme.js: top Transparente, encima de la foto del héroe. compact Sólido, más bajo. hidden Se sale hacia arriba al seguir bajando. LA CABECERA ES FIJA, no pegajosa. Pegajosa (position:sticky) funciona bien pero exige que el contenido empiece debajo de su altura, porque si no el primer título se esconde detrás. Al ser fija hace falta ese margen igual, y además en la portada NO debe haber margen: el héroe tiene que llegar hasta arriba del todo. Esa es la diferencia entre .is-front y .is-inner, y la razón de que exista esa clase en . El margen usa --topbar-h y no un número escrito a mano, porque la barra de confianza tiene texto configurable desde el panel y puede ocupar dos líneas en un móvil estrecho. theme.js mide el alto real y lo escribe en la variable. Sin JavaScript se aplica el valor por defecto del token, que es el alto normal en escritorio. */ .site-top{ position:fixed; top:0; left:0; right:0; z-index:200; transition:transform var(--dur-3) var(--ease-out); /* SIN will-change:transform, a propósito. will-change:transform no es solo una pista al navegador: crea un bloque contenedor para los descendientes con position:fixed. El panel de navegación móvil (.primary-nav) es position:fixed con top:var(--topbar-h) y bottom:0, así que con will-change en la cabecera sus valores se resolvían contra .site-top —un bloque de unos 70px de alto— en vez de contra la ventana. El panel quedaba de veinte píxeles de alto y, encima, desplazado con translateY(-100%): se abría el menú y no se veía nada. Por eso el botón se quedaba sin respuesta aparente en el teléfono. La GPU ya promociona la capa por la transición de transform, y el repintado de una cabecera que solo se mueve al hacer scroll es barato. No compensa añadirlo ni aquí ni desde theme.js. */ color:#FFFFFF; } /* Con la barra de administración de WordPress visible, la cabecera fija se metería debajo de ella: el logo y el menú quedaban tapados justo cuando se está revisando la web desde dentro del panel. WordPress ya baja el contenido con un margen en , pero los elementos fijos hay que bajarlos a mano. 32px en escritorio, 46px en móvil. */ body.admin-bar .site-top{top:32px;} @media (max-width:782px){ body.admin-bar .site-top{top:46px;} } /* El panel móvil NO lleva corrección para la barra de administración: su top sale de --nav-top, que theme.js mide con getBoundingClientRect sobre la cabecera ya desplazada. Sumarle aquí los 32 o 46px otra vez abría el panel con ese hueco por debajo, que es el mismo defecto que se acaba de corregir por el otro lado. */ /* ========================================================== CABECERA NEGRA, LETRAS BLANCAS ========================================================== Lo pidió el cliente: negro con letras blancas, y no solo arriba del héroe sino en todo el sitio, con el menú incluido. Antes la cabecera era transparente sobre la foto del héroe y de papel claro al bajar. Sobre la foto el texto salía en blanco (--paper, heredado de .site-top) y, al pasar a compacto, cambiaba a tinta sobre crema. Con una foto clara en el héroe, el logo y los enlaces se perdían. Ahora el fondo es negro siempre y el texto blanco siempre: no hay estado donde el contraste dependa de lo que haya detrás. La franja de confianza va en el mismo negro para que la cabecera se lea como un solo bloque y no como dos piezas pegadas. */ .site-header{ background:#111111; border-bottom:1px solid transparent; color:#FFFFFF; transition:background var(--dur-3) var(--ease-out), border-color var(--dur-3) var(--ease-out); } .site-header-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; /* La altura cambia con el estado. Se anima el relleno en vez de la altura porque el contenido sigue mandando: si mañana el logo crece, la cabecera crece sola. */ padding:22px 28px; transition:padding var(--dur-3) var(--ease-out); } /* --- Estado compacto ------------------------------------------- Sigue siendo negro. Lo único que cambia es que aparece una línea de borde, que es lo que separa la cabecera del contenido que pasa por debajo sin una sombra dura. */ .site-top[data-state="compact"] .site-header{ background:#111111; border-bottom-color:rgba(255,255,255,.14); color:#FFFFFF; } .site-top[data-state="compact"] .site-header-inner{padding:11px 28px;} /* --- Estado oculto --------------------------------------------- */ .site-top[data-state="hidden"]{transform:translateY(-100%);} /* ========================================================== HUECO DE LA CABECERA ========================================================== La cabecera es fija, así que las páginas interiores necesitan reservation su altura. En la portada NO: el héroe tiene que tocar el borde superior. --topbar-h lo escribe theme.js midiendo el bloque real, porque la franja de confianza tiene texto configurable y puede medir distinto en cada instalación. El valor por defecto del token cubre el caso sin JavaScript. */ .is-inner .site-main{ padding-top:var(--topbar-h); } /* La portada no lleva hueco, pero el héroe necesita que nadie le empuje desde arriba. */ .is-front .site-main{padding-top:0;} /* ========================================================== LOGOTIPO ========================================================== Ahora es el logotipo de verdad, en círculo. Antes era el nombre escrito con letras y antes que eso, una imagen de 555 KB. El círculo se hace con border-radius sobre una FOTOGRAFÍA de 1320x1313 píxeles. No se le quita el fondo: recorta el contorno de la foto y rellena el hueco con un color inventado, que en el mejor caso deja un borde sucio. El archivo del tema ya viene recortado a 1313x1313 desde el centro, porque la foto es casi cuadrada pero no del todo y estirarla deformaría el logotipo. El anillo de 1 px no es decoración. La foto es de tonos madera muy oscuros y sus bordes se van a negro: contra la cabecera #111111 un disco oscuro se deshace y el logotipo parece un agujero. El anillo claro lo separa del fondo en las dos CABECERAS, en la negra y en ninguna otra, y por eso el color es el del texto del pie (#e7e2d6) y no --mustard, que sobre negro queda por debajo del contraste mínimo. El texto NO se ha borrado: sigue en maderia_theme_wordmark como respaldo para cuando el archivo de imagen no esté, y por eso mantiene sus reglas de aquí abajo. Sus letras sueltas (.brand-l) existen para que motion.js pueda escalonarlas, y el estado inicial del logotipo —desplazadas y transparentes— lo pone .brand-anim, que añade motion.js en el instante exacto de crear la animación. Si el motor no llega —una caché vacía, un 404, un error de red— las letras se quedarían en opacity:0 para siempre y el nombre del sitio desaparecería de la página. Ahora el estado inicial solo existe si hay alguien que vaya a deshacerlo. El nombre escrito va en caja mixta —"Mswoodworks", con la inicial en mayúscula y el resto en minúscula— y no en versalitas, porque en versalitas un rótulo corto tiene que abrirse de tracking hasta dejar de distinguirse de un texto en mayúsculas. El tracking se cierra (-0.018em) por lo mismo, y algo más de lo que pediría la palabra suelta porque cada letra es un propio y entre dos no hay kerning. La palabra no se parte en dos con un cambio de peso ni con un punto de más entre "Ms" y "woodworks": sería un logotipo inventado sobre una marca que es una sola palabra. */ .site-brand{ display:flex; flex-direction:column; align-items:flex-start; gap:5px; color:inherit; flex-shrink:0; } .brand-mark{ font-family:var(--font-display); font-weight:800; font-size:1.36rem; letter-spacing:-.018em; line-height:1; color:inherit; display:flex; align-items:baseline; /* Sin espacio entre letras: el nombre va unido. El tracking se aplica al contenedor, que es lo que separa cada bloque sin meter un espacio visible entre la M y la s. */ gap:0; /* En una cabecera estrecha el nombre no debe partirse a dos líneas: es una sola palabra y partirla por la mitad deja un tramo colgado que ya no se lee como marca. */ white-space:nowrap; } .brand-l{ display:inline-block; transition:color var(--dur-1) var(--ease-out); } .site-brand:hover .brand-l{color:var(--mustard);} /* La línea de debajo del logotipo: nace escalonada con el resto. */ .brand-suffix{ display:none; } /* Estado inicial del logotipo, solo cuando va a animarse. */ .brand-anim .brand-l{transform:translateY(.6em);opacity:0;} .visually-hidden{ position:absolute !important; width:1px;height:1px; padding:0;margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; } /* Logotipo personalizado. Cuando el administrador sube uno desde Apariencia > Personalizar, header.php imprime su imagen en vez del tipográfico. El que entrega WordPress trae sus propios atributos de ancho y alto, así que solo hay que darle una caja. */ .custom-logo{max-height:34px;width:auto;} /* La imagen es un elemento de bloque dentro de un contenedor en columna: sin esto dejaría un hueco debajo del logo y la cabecera mediría más de lo necesario. */ .site-brand .custom-logo{display:block;} /* El logotipo del pie, con la misma caja que el de la cabecera pero algo más pequeño: el de arriba es el que se ve en todas las páginas, el de abajo solo al final del scroll. El color es el del texto del pie (#e7e2d6 sobre --black), no --ink. Con --ink el nombre era #111111 sobre un fondo #111111: negro sobre negro, es decir invisible, en todas las páginas y desde hace semanas. Nadie lo notó porque un logotipo que no se ve en el pie parece un pie que no lleva logotipo. */ .site-brand--foot .brand-mark{font-size:1.16rem;} .site-brand--foot{color:#e7e2d6;} .site-brand--foot:hover .brand-l{color:var(--mustard);} /* --- El disco del logotipo --------------------------------------- 46 px en la cabecera. El tamaño no es arbitrario: la caja del logotipo va con padding:22px arriba y abajo en el estado normal, así que la fila mide 46+44 = 90 px, que es la altura que la cabecera tenía con las letras y por la que ya está calculada --topbar-h. Con un disco más grande la cabecera crecería en todas las páginas y --nav-top —la medida del menú móvil— se movería con ella. border-radius:50% recorta el círculo, y overflow:hidden recorta la imagen a la caja redonda: sin lo segundo, la foto se saldría por las esquinas del cuadrado. */ .brand-logo{ display:block; position:relative; flex-shrink:0; width:46px; height:46px; border-radius:50%; overflow:hidden; /* El color del anillo es el del texto del pie, no --mustard: el mostaza sobre el negro de la cabecera se queda en 4.5:1, por debajo del mínimo, y un anillo que no se ve es un logotipo que no se ve. */ box-shadow:0 0 0 1px rgba(231,226,214,.34); transition:box-shadow var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out); } /* El no añade caja propia, pero el sí la necesita explícitamente: es un elemento sustituido y sin width/height al 100% se saldría del círculo. object-fit:cover y no contain porque el archivo ya es un cuadrado exacto: contain dejaría una banda vacía si algún dia se cambiara la proporción. */ .brand-logo img{ display:block; width:100%; height:100%; object-fit:cover; } .site-brand:hover .brand-logo{ box-shadow:0 0 0 1px rgba(231,226,214,.7); transform:scale(1.04); } /* En el pie el disco es un poco más pequeño: ahí solo se ve al final del scroll y el logotipo no tiene que competir con nada. */ .site-brand--foot .brand-logo{width:40px;height:40px;} /* ========================================================== BARRA DE PROGRESO ========================================================== Una línea de 1px pegada al borde inferior de la cabecera que se llena con el avance de la lectura. theme.js la escala con transform, no con width: cambiar el ancho obliga al navegador a recalcular la composición de todo lo que hay al lado, mientras que una escala es una operación de GPU. */ .header-progress{ position:absolute; left:0;right:0;bottom:-1px; height:1px; overflow:hidden; pointer-events:none; } .header-progress > i{ display:block; height:100%; width:100%; background:var(--mustard-ink); transform:scaleX(0); transform-origin:left center; /* Sin transición a propósito: el valor lo pone la JavaScript en cada frame según la posición real. Si hubiera transición, la línea iría con retraso respecto al scroll y parecería pesada. */ } .primary-nav{flex:1;display:flex;justify-content:center;} .primary-menu{display:flex;gap:30px;align-items:center;} /* Los enlaces se escriben en monoespaciado pequeño y con mucho tracking: ocupa menos que la grotesca que se usaba antes y por eso los seis elementos de la barra nueva siguen cabiendo a 1024px. */ .primary-menu > li{position:relative;} .primary-menu > li > a.nav-link{ color:inherit; font-family:var(--font-mono); font-size:0.76rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; padding:8px 0; display:inline-flex; align-items:center; gap:6px; position:relative; transition:color var(--dur-1) var(--ease-out); } /* El subrayado no es un borde: es un pseudo-elemento que crece desde el centro. Un border-bottom no se puede interpolar de 0 a 100% sin saltarte la mitad, y el salto se nota en un menú pequeño. */ .primary-menu .nav-link::after{ content:""; position:absolute; left:0;right:0;bottom:2px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:center center; transition:transform var(--dur-2) var(--ease-out); } .primary-menu > li > a.nav-link:hover::after, .primary-menu > li > a.nav-link:focus-visible::after{transform:scaleX(1);} .primary-menu > li > a.nav-link:hover, .primary-menu > li > a.nav-link:focus-visible{color:var(--mustard);} /* Sección activa: el enlace que apunta a la parte de la página que se está viendo se queda subrayado. Lo pone motion.js con ScrollTrigger al entrar en esa sección. */ .primary-menu > li > a.nav-link.is-current{color:var(--mustard);} .primary-menu > li > a.nav-link.is-current::after{transform:scaleX(1);} /* Marca de la página actual. El logotipo ya lleva a casa, así que en la portada no hace falta un punto más; en las páginas internas señala cuál de los seis enlaces es en el que se está. */ .primary-menu > li.current-menu-item > a.nav-link::before{ content:""; position:absolute; left:-10px;top:50%; width:4px;height:4px; border-radius:50%; background:var(--mustard); transform:translateY(-50%); } .nav-caret{ flex-shrink:0; transition:transform var(--dur-2) var(--ease-out); opacity:.7; } .primary-menu > li.has-dropdown.is-open .nav-caret, .primary-menu > li.has-dropdown:hover > a .nav-caret{transform:rotate(180deg);} /* --- Submenús de WordPress (solo si el admin define un menú) ---- */ .primary-menu .sub-menu{ position:absolute;top:100%;left:50%; /* --panel-shift lo escribe theme.js al medir el panel, para que no se salga de la ventana. El panel cuelga del elemento que lo abre y se centra con translateX(-50%), así que su posición depende de dónde esté ese elemento, que en una barra de seis elementos no es el centro de la pantalla: con un panel de catálogo de 720px, en una ventana de 1025px se salía por el borde. theme.js mide una vez el panel ya colocado —aunque esté invisible, sigue teniendo caja— y corrige solo lo que sobra. El valor por defecto es 0px, así que sin JavaScript el panel sale igual que antes, que era salirse un poco del borde en ventanas estrechas de escritorio. */ transform:translateX(-50%) translateY(6px) translateX(var(--panel-shift,0px)); background:var(--paper);color:var(--ink);min-width:230px;max-width:340px;padding:14px;border-radius:var(--radius); box-shadow:0 18px 40px rgba(0,0,0,.18); opacity:0;visibility:hidden;pointer-events:none; transition:opacity var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out); margin-top:14px; } .primary-menu > li.has-dropdown:hover .sub-menu, .primary-menu > li.has-dropdown:focus-within .sub-menu, .primary-menu > li.has-dropdown.is-open .sub-menu{ opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0) translateX(var(--panel-shift,0px)); } /* --- El panel se cierra demasiado rápido --------------------------- El submenú cuelga del
  • , con top:100% y un margin-top de 14px para separar el panel del texto del botón. Ese margen abre un hueco de 14px entre los dos, y ese hueco NO pertenece ni al
  • ni al panel: es 14px de nada por los que pasa el ratón sin que ninguno de los dos esté encima. En cuanto se cruza, el :hover se pierde en los dos sitios a la vez y el panel se cierra. Al abrirse, además, el panel entra con 6px de desplazamiento, así que al principio el hueco es de 20px. El efecto es el que se ha visto: el menú se abre, y en cuanto el ratón baja hacia el panel se cierra, porque no hay ni un píxel de tolerancia. Con un panel de catálogo de 720px de ancho y quince entradas,rozar el borde de abajo ya cuenta como salir. Se arregla con un puente: una banda invisible que pertenece al
  • y cubre el hueco. Está en el
  • y no en el panel a propósito, porque el panel de catálogo tiene overflow-x:auto y un ::before por encima se le recortaría; además así el puente sirve para todos los submenús. Solo en escritorio. En móvil el
  • es un acordeón apilado y una banda invisible de 20px se comería parte del área táctil del elemento de abajo. */ @media (min-width:1025px){ .primary-menu > li.has-dropdown::before{ content:''; position:absolute; left:-24px; right:-24px; top:100%; height:20px; } /* Y una gracia al cerrar. La banda del puente ya quita el problema de estructura, pero con el puente puesto el :hover sigue siendo binario: en el instante en que el puntero sale de la banda, el panel empieza a desaparecer. 180ms de retardo al cerrar dan margen a un movimiento rápido y a un puntero que salta; al abrir no hay retardo, que es cuando más urge verlo. */ .primary-menu .sub-menu{ transition:opacity .18s ease-out .18s, transform .18s ease-out .18s, visibility 0s linear .36s; } .primary-menu > li.has-dropdown:hover .sub-menu, .primary-menu > li.has-dropdown:focus-within .sub-menu, .primary-menu > li.has-dropdown.is-open .sub-menu{ transition:opacity .18s ease-out 0s, transform .18s ease-out 0s, visibility 0s linear 0s; } } .primary-menu .sub-menu li{margin:0;} .primary-menu .sub-menu a{display:block;font-family:var(--font-mono);font-size:0.8rem;color:var(--ink);padding:9px 12px;border-radius:2px;} .primary-menu .sub-menu a:hover{color:var(--mustard-ink);background:var(--paper-soft);} .primary-menu .sub-menu li + li{border-top:1px solid var(--line);} /* ========================================================== PANEL DEL CATÁLOGO ========================================================== Es el mismo
      que usaría WordPress, pero con contenido de otra forma: una rejilla de columnas, una por familia, en vez de una lista vertical. Por eso casi todo lo de arriba se anula aquí: el ancho, el relleno y las reglas de "a" y de "li + li" que sirvían para una lista harían que las columnas quedaran pegadas y con bordes entre ellas. Lo que se conserva del bloque anterior es el comportamiento — abrirse al pasar el ratón, al tabular y con el botón de teclado, y cerrarse al salir— porque de eso se encarga theme.js con las clases has-dropdown e is-open, que no se tocan. ========================================================== */ /* El panel del catálogo es negro como la barra y el menú móvil. Ponerlo claro sobre una barra negra lo convertía en un bloque de papel justamente en el elemento que más se mira. Sobre negro puro el texto blanco y el mostaza de acento se leen sin esfuerzo. */ .primary-menu .sub-menu-catalogo{ left:50%; background:#141414; color:#FFFFFF; box-shadow:0 18px 40px rgba(0,0,0,.55); display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:0 4px; min-width:min(720px,calc(100vw - 48px)); max-width:min(920px,calc(100vw - 48px)); padding:22px 24px 0; /* El panel crece hacia los lados desde el centro, así que no puede salirse de la ventana. Con estas dos reglas se ancla al borde visible en vez de a la izquierda del todo. */ overflow-x:auto; overscroll-behavior-x:contain; } /* El borde entre columnas lo pone cada familia, no el "li + li" genérico: en rejilla esa reglaraya las columnas enteras en horizontal, que es justo lo que no queremos. */ .primary-menu .sub-menu-catalogo > li{border-top:0;} .primary-menu .sub-menu-catalogo .catalogo-familia{ padding:0 14px 20px; border-left:1px solid rgba(255,255,255,.14); } .primary-menu .sub-menu-catalogo .catalogo-familia:first-child{ border-left:0; padding-left:0; } .primary-menu .sub-menu-catalogo .catalogo-familia-link{ display:grid; grid-template-columns:20px 1fr; grid-template-areas:"icon nombre" "icon cuenta"; column-gap:8px; align-items:center; padding:0 0 10px; color:#FFFFFF; letter-spacing:.02em; text-transform:none; font-weight:700; } .primary-menu .sub-menu-catalogo .catalogo-familia-link:hover{ background:none; color:#FFFFFF; } .primary-menu .sub-menu-catalogo .catalogo-familia-link:hover .catalogo-familia-nombre{ color:var(--mustard); } .catalogo-familia-icon{ grid-area:icon; width:20px;height:20px; stroke:rgba(255,255,255,.7); transition:stroke var(--dur-1) var(--ease-out); } .catalogo-familia-link:hover .catalogo-familia-icon{stroke:var(--mustard);} .catalogo-familia-nombre{ grid-area:nombre; font-size:.86rem; line-height:1.2; transition:color var(--dur-1) var(--ease-out); } .catalogo-familia-cuenta{ grid-area:cuenta; font-size:.66rem; font-weight:500; color:rgba(255,255,255,.55); letter-spacing:.06em; text-transform:uppercase; } .primary-menu .sub-menu-catalogo .catalogo-tipos{list-style:none;margin:0;padding:0;} .primary-menu .sub-menu-catalogo .catalogo-tipos li{border-top:0;} .primary-menu .sub-menu-catalogo .catalogo-tipos a{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:6px 8px; margin-left:-8px; font-family:var(--font-body); font-size:.82rem; line-height:1.3; letter-spacing:0; color:#FFFFFF; } .primary-menu .sub-menu-catalogo .catalogo-tipos a:hover{ background:rgba(255,255,255,.08); color:var(--mustard); } /* La nota "bajo encargo" solo aparece al pasar el ratón. Con las dos columnas, ponerla siempre dejaría cada línea con un hueco grande a la derecha y la lista se vería rala. */ .catalogo-tipo-nota{ flex-shrink:0; font-family:var(--font-mono); font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.5); opacity:0; transition:opacity var(--dur-1) var(--ease-out); } .primary-menu .sub-menu-catalogo .catalogo-tipos a:hover .catalogo-tipo-nota{opacity:1;} /* La nota de un término suelto cuelga del bloque, no de un enlace de tipo, así que no hay nada a lo que pasar el ratón y con el oculto por defecto se perdería. Se muestra siempre. */ .primary-menu .sub-menu-catalogo .catalogo-tipo-nota.es-suelta{ display:block; margin-top:7px; padding-left:2px; opacity:1; } /* Lo que no tiene piezas va en un trazo más claro, no tachado: sigue siendo un destino y tachado se lee como desactivado. */ .primary-menu .sub-menu-catalogo .catalogo-tipos a.es-encargo .catalogo-tipo-nombre{ color:rgba(255,255,255,.62); } .primary-menu .sub-menu-catalogo .catalogo-todo{ display:flex; align-items:center; gap:10px; grid-column:1/-1; margin:0 -24px; padding:14px 24px; border-top:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04); font-family:var(--font-mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:#FFFFFF; border-radius:0 0 var(--radius) var(--radius); } .primary-menu .sub-menu-catalogo .catalogo-todo:hover{ background:var(--mustard); color:var(--ink); } .catalogo-todo-icon{width:18px;height:18px;stroke-width:2.4;} .primary-menu .sub-menu-catalogo .catalogo-todo svg{margin-left:auto;} /* ========================================================== ACCIONES DE CABECERA — carrito y botón de menú ========================================================== El color se hereda (currentColor) desde .site-top, que ya es blanco. Antes la cabecera cambiaba de transparente sobre la foto a papel al bajar y por eso había que repetir reglas por estado; ahora que es negra siempre, heredar basta. */ .header-actions{display:flex;align-items:center;gap:20px;} .header-cart{ position:relative; color:inherit; display:inline-flex; align-items:center; gap:8px; padding:8px 2px; transition:color var(--dur-1) var(--ease-out); } .header-cart:hover, .header-cart:focus-visible{color:var(--mustard);} /* La etiqueta "Carrito" solo aparece cuando hay sitio. En la barra de 1024px con seis enlaces no cabe, y en móvil estorba; el icono con su aria-label sigue diciendo qué es. */ .cart-label{ display:none; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; } @media (min-width:1280px){ .cart-label{display:inline;} } /* El contador se posiciona respecto al icono, no al texto: con la etiqueta visible, si no se corrige, el número se iría al final de la palabra y parecería otro elemento. */ .cart-count{ position:absolute; top:2px; left:12px; background:var(--mustard); color:var(--wood-nogal); font-family:var(--font-mono); font-size:.62rem; font-weight:600; min-width:17px; height:17px; padding:0 4px; border-radius:9px; display:flex; align-items:center; justify-content:center; line-height:1; /* Un número que aparece y desaparece salta. Se anima la escala para que entre con un pequeño rebote en vez de materializarse. */ transform-origin:center; } .cart-count[hidden]{display:none;} .menu-toggle{ display:none; background:none; border:none; color:inherit; padding:10px 8px; margin-right:-8px; /* El área táctil del botón: 38×38 es lo mínimo que la directiva WCAG 2.2 acepta en un control sin etiqueta visible. Con el padding de 10px se llega a eso desde los 22px del icono. */ } /* El icono son dos líneas que se abren en una cruz. Son dos vacíos, no dos SVG: así la animación la hace CSS y no hay que cambiar nada en el DOM desde JavaScript. */ .menu-toggle-box{ display:block; position:relative; width:22px; height:14px; } .menu-toggle-box > span{ position:absolute; left:0; width:100%; height:1.5px; background:currentColor; border-radius:2px; transition:transform var(--dur-2) var(--ease-out), opacity var(--dur-1) var(--ease-out), width var(--dur-2) var(--ease-out); } .menu-toggle-box > span:nth-child(1){top:0;} .menu-toggle-box > span:nth-child(2){bottom:0;} /* La línea de abajo es un poco más corta: es el detalle que hace que no parezca dos rayas simétricas y planas, y se abre en diagonal al pulsarlo. */ .menu-toggle[aria-expanded="true"] .menu-toggle-box > span:nth-child(1){ top:6.25px; transform:rotate(45deg); } .menu-toggle[aria-expanded="true"] .menu-toggle-box > span:nth-child(2){ bottom:6.25px; width:100%; transform:rotate(-45deg); } .menu-toggle[aria-expanded="true"] .menu-toggle-box > span:nth-child(1), .menu-toggle[aria-expanded="true"] .menu-toggle-box > span:nth-child(2){width:100%;} /* ========================================================== VELO DEL MENÚ MÓVIL ========================================================== El velo va FUERA de .site-top (está al final del en header.php). Si estuviera dentro, la cabecera fija le pondría un z-index de 200 y el velo quedaría por debajo de la propia cabecera al abrirse: se vería la barra flotando encima del panel. El hidden inicial evita que tape la página antes de que el JavaScript lo abra. Y sin ese hidden, el atributo no serviría de nada: el panel se abriría a la vez que la página carga. */ .nav-scrim{ position:fixed; inset:0; z-index:190; background:rgba(13,10,8,.5); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); opacity:0; /* Un velo con opacity:0 SIGUE capturando clics: solo se pinta transparente, pero sigue siendo una capa fija sobre toda la página. Si el JavaScript dejara el velo a medio abrir (por ejemplo, si openMenu() fallara después de poner hidden=false y antes de añadir .is-open), el sitio entero quedaría sin poder pulsarse y no se vería nada que lo delatara. Con pointer-events:none mientras está cerrado, un velo olvidado en el DOM no puede bloquear la página. Al abrirse se recupera, porque para entonces tiene que poder recibir el toque de cierre. */ pointer-events:none; transition:opacity var(--dur-2) var(--ease-out); } .nav-scrim.is-open{ opacity:1; pointer-events:auto; } .nav-scrim[hidden]{display:none;} /* Bloquea el scroll de fondo mientras el menú está abierto. Sin esto el documento sigue desplazándose por detrás del panel en iOS, que es el síntoma más desconcertante que tiene un menú móvil. */ /* Con el menú abierto la cabecera se coloca sin transición. Si se animara, el panel ya estaría en su sitio final mientras la franja de confianza todavía está plegándose: durante 300ms se vería el hueco cerrándose, que es el mismo efecto que se quiere quitar. */ body.nav-locked .site-top, body.nav-locked .site-header-inner, body.nav-locked .trust-bar{transition:none;} body.nav-locked{ overflow:hidden; /* Compensa la barra de scroll que desaparece al bloquearla: si no, el contenido salta lateralmente al abrir el menú. */ padding-right:var(--sbw,0px); } /* ========================================================== ENCABEZADO DE PÁGINA INTERIOR ========================================================== El carrito y el checkout son las dos páginas donde el cliente ya ha decidido comprar y solo quiere terminar. Un encabezado mínimo —palabra clave, título, una frase que explique qué pasa en esa pantalla— las orienta sin robarles sitio: aquí cada pantalla vale dinero. El antetítulo va en el mismo sitio en todas las páginas, y el título es lo único que se lee en grande. */ .maderia-page-head{ margin:0 auto 34px; max-width:var(--maxw); padding:0 28px; } .maderia-page-head-eyebrow{ margin:0 0 14px; font-family:var(--font-display); font-size:.66rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--muted-ink); } .maderia-page-head-title{ margin:0 0 12px; font-family:var(--font-display); font-size:clamp(2rem,4.4vw,3.1rem); font-weight:800; line-height:1.04; letter-spacing:-.025em; color:var(--ink); } .maderia-page-head-text{ margin:0; max-width:52ch; font-size:1rem; line-height:1.6; color:var(--muted-ink); } /* ========================================================== HÉROE — composición a sangre ========================================================== El héroe ya no es una rejilla de dos columnas con la foto en una casilla. Ahora la fotografía ocupa toda la primera pantalla y el texto va encima, abajo a la izquierda, con espacio negativo a la derecha. DOS DETALLES QUE NO SON COSMÉTICOS: 1. El selector es `section.hero` y no `.hero`. Más abajo está `section{padding:72px 0}`, que tiene MENOS especificidad que un `.hero` suelto pero aparece DESPUÉS en la hoja, así que ganaba él. Con `section.hero` gana esta regla por especificidad y el héroe deja de heredar el relleno de las secciones normales. Si algún día se cambia ese `section{...}`, esta parte no se rompe. 2. El selector del párrafo es `.hero-copy p`, no `.hero p`. Antes había un `.hero p{color:var(--muted-ink)}` genérico que, aplicado sobre el velo oscuro, dejaba el texto del héroe en gris apagado sobre foto oscura: ilegible. Aquí el color se decide por zona y no hay herencia que pueda contradecirlo. */ section.hero{ position:relative; padding:0; margin:0; background:var(--wood-nogal); /* svh (small viewport height) y no vh: en móvil, vh incluye la barra de direcciones y el botón "ver el sitio" de Safari con iOS, que hacen que el héroe se salga por abajo cuando aparecen. svh es el alto que se ve de verdad incluso con la barra desplegada. */ min-height:88vh; min-height:88svh; overflow:hidden; display:flex; align-items:flex-end; color:var(--paper); } /* La capa de la foto y el velo que la tapaba ya no existen: el héroe pasó a ser tipográfico y en front-page.php no hay ningún dentro de esta sección. La regla se conserva apagada a propósito, para que reintroducir el elemento no traiga de vuelta la composición vieja por accidente. */ .hero-media, .hero-photo, .hero-scrim{display:none;} /* El texto. Es el único elemento en flujo del héroe, así que el flex de section.hero lo deja abajo sin necesidad de márgenes. */ section.hero .hero-grid{ position:relative; z-index:2; width:100%; /* --maxw es el límite duro de la retícula, no la medida del texto: la medida buena de lectura (60-70 caracteres) vive en .hero-text, que se queda en 44ch. El titular a propósito va al ancho completo de esta retícula. */ max-width:var(--maxw); padding:0 28px; padding-bottom:clamp(44px,6vh,76px); /* space-between con el bloque a la derecha vacío es lo que empuja el texto a la izquierda y deja el aire a la derecha sin tener que calcular nada. */ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,0.15fr); } .hero-copy{ grid-column:1; max-width:15em; min-width:0; } /* Antetítulo. Monoespaciado pequeño con un guion delante: el patrón de etiqueta técnica que ya se usa en las secciones del sitio. */ .hero-eyebrow{ display:flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:0.72rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:rgba(250,248,245,.82); margin:0 0 22px; } .hero-eyebrow-mark{ display:block; width:34px; height:1px; background:var(--mustard); flex-shrink:0; } /* El titular. Serif grande, con tracking cerrado. El clamp sube bastante en pantallas anchas porque es el elemento que define el carácter de la portada. */ .hero-title{ font-family:var(--font-editorial); font-weight:400; font-size:clamp(2.6rem,6.4vw,5.4rem); line-height:.98; letter-spacing:-.022em; color:var(--paper); margin:0 0 26px; /* text-wrap:balance reparte las líneas de forma que ninguna queda con una sola palabra colgando. Está en todos los navegadores actuales; donde no existe, se ignora y el titular sigue partiéndose como siempre, sin romper nada. */ text-wrap:balance; } /* El envoltorio que crea motion.js para la entrada por líneas. Cada línea sube desde debajo de su propia máscara. */ .hero-title .line{ display:block; overflow:hidden; padding-bottom:.06em; /* corta el rabo de las serif sin recortar los acentos */ margin-bottom:-.06em; } .hero-copy p{color:rgba(250,248,245,.86);} .hero-text{ font-size:clamp(0.98rem,1.15vw,1.1rem); line-height:1.62; max-width:44ch; margin:0 0 32px; } .hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin:0 0 40px; } .hero-ctas .btn{ padding:17px 30px; /* Los botones del héroe llevan su propia sombra suave porque están sobre foto y sin ella se pierde el borde. No es una sombra decorativa: es la diferencia entre "botón" y "rectángulo claro". */ box-shadow:0 10px 30px rgba(13,10,8,.28); } .btn-hero-primary{ background:var(--mustard) !important; border-color:var(--mustard) !important; color:var(--wood-nogal) !important; } .btn-hero-primary:hover, .btn-hero-primary:focus-visible{ background:var(--paper) !important; border-color:var(--paper) !important; color:var(--wood-nogal) !important; } .btn-hero-ghost{ background:rgba(13,10,8,.24) !important; border-color:rgba(250,248,245,.5) !important; color:var(--paper) !important; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); } .btn-hero-ghost:hover, .btn-hero-ghost:focus-visible{ background:var(--paper) !important; border-color:var(--paper) !important; color:var(--wood-nogal) !important; } /* La flecha del botón principal se inclina al pasar por encima. */ .btn-arrow{ flex-shrink:0; transition:transform var(--dur-2) var(--ease-out); } .btn:hover .btn-arrow, .btn:focus-visible .btn-arrow{transform:translateX(4px);} /* Las dos maderas a la venta. */ .hero-woods{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding-top:26px; border-top:1px solid rgba(250,248,245,.22); } .hero-woods-label{ font-family:var(--font-mono); font-size:0.68rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(250,248,245,.6); } .hero-woods-list{ display:flex; gap:20px; flex-wrap:wrap; margin:0; padding:0; list-style:none; } .hero-woods-list li{ display:flex; align-items:center; /* Antes cada especie llevaba una miniatura circular delante. Ya no hay imágenes en el héroe, así que la etiqueta se separa de la anterior con una raya fina en lugar de con una foto de 38px. */ gap:9px; padding-left:14px; position:relative; font-family:var(--font-mono); font-size:0.72rem; letter-spacing:.06em; color:rgba(250,248,245,.9); } .hero-woods-list li::before{ content:""; position:absolute; left:0; top:50%; width:6px; height:1px; background:rgba(250,248,245,.4); } /* El indicador "Desliza" y su regla vertical se eliminaron junto con el elemento del HTML: con la foto arriba y el texto abajo, la página ya se ve entera al cargar y no hay nada más abajo que prometer. Aquí no queda ningún selector para .hero-scroll porque un adorno retirado no necesita reglas que lo esperen. */ /* --- Responsive -------------------------------------------------- Tablet: el texto sigue abajo a la izquierda pero más estrecho. */ @media (max-width:1080px){ .hero-copy{max-width:100%;} section.hero .hero-grid{ grid-template-columns:1fr; max-width:760px; } } @media (max-width:900px){ section.hero{min-height:82vh;min-height:82svh;} .hero-title{font-size:clamp(2.3rem,7.6vw,3.4rem);} } /* Móvil: la foto pasa a recortar en vertical y el texto sube un poco para dejar respirar el botón. */ @media (max-width:620px){ section.hero{ /* En vertical la foto horizontal se recortaría demasiado y la pieza quedaría irreconocible, así que se ensancha el alto para que entre la mesa entera en vertical. */ min-height:94vh;min-height:94svh; align-items:flex-end; } section.hero .hero-grid{ padding:0 20px; padding-bottom:52px; } .hero-photo{object-position:center center;} /* El velo se reinforce en móvil: la foto recortada es más brillante en el centro y el texto necesita más contraste. */ .hero-scrim{ background: linear-gradient(180deg, rgba(13,10,8,.78) 0%, rgba(13,10,8,.34) 18%, rgba(13,10,8,.30) 40%, rgba(13,10,8,.86) 82%, rgba(13,10,8,.95) 100%), linear-gradient(90deg,rgba(13,10,8,.5) 0%,rgba(13,10,8,0) 70%); } .hero-title{ font-size:clamp(2.05rem,8.6vw,2.7rem); line-height:1.02; margin-bottom:20px; } .hero-text{font-size:0.95rem;margin-bottom:26px;} .hero-eyebrow{font-size:0.66rem;margin-bottom:16px;} /* Los botones a lo ancho: con dos botones en línea a 320px de ancho uno queda ilegible. */ .hero-ctas{ flex-direction:column; align-items:stretch; gap:10px; margin-bottom:28px; } .hero-ctas .btn{width:100%;padding:16px 22px;} .hero-woods{gap:12px;padding-top:20px;} .hero-woods-label{ width:100%; margin-bottom:2px; } .hero-woods-list{gap:14px;} } @media (max-width:400px){ .hero-woods-list{flex-direction:column;gap:8px;} } /* --- Bloque de reservation de altura --------------------------------- Las reglas viejas de la rejilla de dos columnas y de las miniaturas de madera se eliminaron: ese marcado ya no existe en front-page.php. Se dejan aquí los comentarios por si hay que recuperar algo. */ /* La variante de reserva se usa en el resto de plantillas del tema (about-hero, simple-hero), que sí conservan su bloque de imagen a la derecha y su texto a la izquierda. No se tocan: pertenecen a las páginas internas, no a la portada. */ /* ========================================================== SECTION HEAD (shared) ========================================================== */ .section-head{max-width:640px;margin:0 auto 40px;text-align:left;} .section-head h2{font-size:clamp(1.5rem,2.4vw,2.05rem);} .section-head p{color:var(--muted-ink);} section{padding:72px 0;} /* ========================================================== TIPO GRID (categorías / configurador) ========================================================== */ .tipo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);} .tipo-card{background:#fff;padding:32px 26px;display:flex;flex-direction:column;gap:14px;} .tipo-card svg{width:100%;height:56px;color:var(--ink);} .tipo-card.has-photo{padding:0 0 26px;} .tipo-card-photo{width:100%;height:150px;object-fit:cover;margin-bottom:6px;} .tipo-card.has-photo h3, .tipo-card.has-photo p, .tipo-card.has-photo .tipo-link{margin-left:26px;margin-right:26px;} .tipo-card.has-photo .tipo-link{margin-bottom:2px;} .tipo-card h3{font-size:1rem;margin:0;} .tipo-card p{font-size:0.84rem;margin:0;color:var(--muted-ink);} .tipo-link{margin-top:auto;font-weight:700;font-size:0.82rem;text-transform:uppercase;letter-spacing:0.03em;} .tipo-card:hover{background:var(--paper-soft);} .tipo-card:hover .tipo-link{color:var(--mustard-ink);} @media (max-width:860px){.tipo-grid{grid-template-columns:1fr 1fr;}} @media (max-width:520px){.tipo-grid{grid-template-columns:1fr;}} /* La rejilla de maderas y la de tipos se sustituyeron en la fase 2 por montajes editoriales. Sus reglas están en el bloque FASE 2, al final del archivo: al estar después, ganan a las de aquí. */ /* ========================================================== WOOCOMMERCE — CATALOGUE / SHOP LOOP ========================================================== */ .wc-wrap{padding:52px 0 80px;} /* -------------------------------------------------------------- LA REJILLA Y LA TARJETA, EN UN SOLO SITIO La rejilla del catálogo se repartía en tres sitios: una aquí con tres columnas fijas y un !important, otra en el bloque de la fase 2 con auto-fill, y otra al final del archivo con auto-fill otra vez. Con eso el número de columnas dependedía de cuál regla ganaba, que es justo lo que se veía: cuatro tarjetas en una fila en unas vistas y tres en otras. Aquí queda la única versión: columnas automáticas con un mínimo de 280px. A 1280px de ancho útil entran cuatro columnas de 280 (con huecos de 26px), a 1024 entran tres, a 768 entran dos y a 390 entran dos de 160, que es lo que dice la regla de móvil del final. Nunca hay una tarjeta más estrecha que el mínimo ni más ancha que la columna, porque 1fr reparte el sobrante. Sin max-width: una rejilla de 280px en una pantalla de 1920 deja tarjetas de 400px con la foto proporcional y el texto aislado de lado a lado. El contenedor del contenido ya pone el límite. gap de 26px: suficiente para que dos tarjetas no se lean como una, suficiente para que las sombras de hover no se toquen. */ ul.products{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:26px; margin:0 !important; padding:0; list-style:none; } ul.products li.product{ list-style:none; background:var(--paper,#fffdfa); border:1px solid var(--line); border-radius:var(--radius); padding:0; position:relative; overflow:hidden; display:flex; flex-direction:column; transition:box-shadow .25s,transform .25s,border-color .25s; } ul.products li.product:hover{ border-color:var(--mustard); } .maderia-card-media{position:relative;background:var(--paper-soft);} ul.products li.product img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:0;} /* Aviso de que la fotografía del mueble todavía no existe. Va dentro de la caja de la foto, sobre el marcador, no debajo: si ocupara su propia línea solo algunos productos la imprimirían y el grid quedaría con tarjetas de alturas distintas. Al ser absolute sigue el mismo camino que la etiqueta "Por encargo" y los dos se apilan en la esquina. */ .photo-placeholder-note{ position:absolute; top:14px; right:14px; z-index:2; max-width:calc(100% - 28px); background:rgba(255,253,250,.94); backdrop-filter:blur(4px); border:1px solid var(--line); font-family:var(--font-mono); font-size:.6rem; line-height:1.35; letter-spacing:.05em; text-transform:uppercase; color:var(--ink); padding:5px 9px; border-radius:20px; } /* Cuando hay dos etiquetas en la misma esquina (Por encargo + aviso), la segunda baja para no montarse encima de la primera. El select sibling es justo: el aviso siempre se imprime después de la etiqueta. */ .tag-encargo + .photo-placeholder-note{top:auto;bottom:14px;} /* En la ficha de producto el aviso es un párrafo normal del resumen, con su propia caja: ahí no hay rejilla que cuadrar y se lee mejor completo. */ .single .photo-placeholder-note{ position:static; max-width:none; display:block; margin:0 0 18px; padding:11px 14px; border-radius:var(--radius); font-size:.7rem; letter-spacing:.02em; text-transform:none; line-height:1.5; } .tag-encargo{ position:absolute;top:12px;left:12px;background:#fff;border:1px solid var(--line); font-size:0.68rem;padding:5px 9px;border-radius:20px;display:inline-flex;align-items:center;gap:5px; text-transform:uppercase;letter-spacing:0.03em; } ul.products li.product .woocommerce-loop-product__title{ font-family:var(--font-display);font-weight:700;font-size:0.98rem; margin:16px 18px 6px;text-decoration:underline;text-underline-offset:3px; } ul.products li.product .price{margin:0 18px 4px;font-family:var(--font-display);font-weight:800;font-size:1.05rem;color:var(--ink);} ul.products li.product .price del{color:var(--muted-ink);font-weight:500;margin-right:6px;} ul.products li.product .price ins{text-decoration:none;} .card-lead{display:flex;align-items:center;gap:6px;margin:0 18px 8px;font-size:0.76rem;color:var(--green);} .card-lead svg{flex-shrink:0;} .card-save{ display:inline-block;margin:0 18px 10px;padding:3px 9px;background:var(--paper-soft); border:1px solid var(--line);border-radius:20px;font-size:0.68rem; } .card-swatches{display:flex;gap:6px;margin:0 18px 16px;} .card-swatches i{width:14px;height:14px;border-radius:50%;display:inline-block;border:1px solid rgba(0,0,0,0.15);} /* ========================================================== WOOCOMMERCE — SINGLE PRODUCT (producto simple, sin configurador) ========================================================== */ /* La ficha simple: aquí solo el contenedor —ancho máximo, relleno y centrado— y el colapso a una columna. El reparto de columnas entre foto y texto lo pone assets/css/phase3.css, que se carga después y usa una proporción un poco más ancha para la foto. Está en una sola hoja a propósito: antes el reparto estaba en las dos y ganaba la última, así que corregir uno no corregía el otro. */ .single-product .wc-wrap{padding-top:36px;} .single-product div.product{ max-width:var(--maxw);margin:0 auto;padding:0 28px; align-items:start; } /* La foto del producto NO se pega. Antes iba con top:100px, y al crecer el encabezado se metía debajo; en una ficha con configurador además quedaba pegada media pantalla. Sin position:sticky el encabezado nunca tiene nada encima ni nada se corta. */ .single-product div.product .woocommerce-product-gallery{position:static;} .single-product div.product .woocommerce-product-gallery img{border-radius:var(--radius);border:1px solid var(--line);} .single-product .product_title{font-size:clamp(1.6rem,2.6vw,2.2rem);margin-bottom:10px;} .single-product .price{font-family:var(--font-display);font-weight:800;font-size:1.3rem;margin-bottom:20px;} .single-product .woocommerce-product-details__short-description{color:var(--muted-ink);margin-bottom:24px;} @media (max-width:900px){ .single-product div.product{grid-template-columns:1fr;padding:0 20px;} } /* ========================================================== WOOCOMMERCE — FICHA CON CONFIGURADOR MADERIA ========================================================== Rejilla de dos columnas: la foto a la izquierda, todo lo demás a la derecha. Mitad y mitad, con 56px de separation, el contenedor es el mismo .wrap del resto del sitio. Lo importante es cómo se reparte la columna derecha. Antes se usaba display:contents en .summary para deshacer la columna de WooCommerce y dejar que título, precio, datos, nota, descripción y configurador se repartieran como piezas sueltas de la rejilla del producto. Y como la foto solo ocupaba la fila 1, y esa fila medía lo que midiese la imagen: el título caía arriba y todo lo demás caía debajo, en las filas siguientes. De ahí venía el hueco blanco bajo el título y la sensación de que el configurador estaba al final de la página. Aquí .summary es un elemento de la rejilla de verdad —una caja en la columna 2— y su contenido fluye dentro de ella como un bloque normal: título, precio, datos, nota, descripción y configurador, uno tras otro y sin huecos. No hay que saber qué hijos mete el plugin dentro: los que meta van en el orden en que lleguen. La foto se queda pegada al scroll mientras el cliente avanza por los pasos. Con align-self:start la celda no se estira, así que el sticky tiene recorrido real, y solo se mueve si la columna de la derecha es más alta que la foto: si no, la imagen se queda donde está. */ .single-product:has(.pw-configurator) div.product, .single-product.has-pw-configurator div.product{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 56px; max-width:var(--maxw); margin:0 auto; padding:0 28px; align-items:start; } .single-product:has(.pw-configurator) .summary.entry-summary, .single-product.has-pw-configurator .summary.entry-summary{ grid-column:2; grid-row:1; display:block; width:auto !important; float:none !important; margin:0 !important; min-width:0; position:static; } .single-product:has(.pw-configurator) .woocommerce-product-gallery, .single-product.has-pw-configurator .woocommerce-product-gallery{ grid-column:1; grid-row:1; align-self:start; position:sticky; top:calc(var(--topbar-h) + var(--header-h) + 24px); } /* Con la barra de administración de WordPress abierta, todo lo que está pegado al scroll baja otros 32px, o se esconde debajo. */ body.admin-bar .single-product:has(.pw-configurator) .woocommerce-product-gallery, body.admin-bar .single-product.has-pw-configurator .woocommerce-product-gallery{ top:calc(var(--topbar-h) + var(--header-h) + 56px); } .single-product:has(.pw-configurator) .woocommerce-product-gallery img, .single-product.has-pw-configurator .woocommerce-product-gallery img{ border-radius:var(--radius); border:1px solid var(--line); } .single-product:has(.pw-configurator) .product_title, .single-product.has-pw-configurator .product_title{ margin:0 0 12px; } .single-product:has(.pw-configurator) .summary .pw-price-desde, .single-product.has-pw-configurator .summary .pw-price-desde{ margin:0 0 20px; } .single-product:has(.pw-configurator) .woocommerce-product-details__short-description, .single-product.has-pw-configurator .woocommerce-product-details__short-description{ color:var(--muted-ink); margin:0 0 22px; } .single-product:has(.pw-configurator) .pw-configurator, .single-product.has-pw-configurator .pw-configurator{ margin:0; max-width:100% !important; padding:0 !important; } /* --- La misma ficha en una columna ------------------------------- Por debajo de 900px la ficha es una columna: la foto, y debajo todo lo demás, que es como se lee una página en el teléfono. Estas reglas hacen falta aunque ya haya una regla general de una columna para .single-product div.product, porque el selector de esta ficha lleva :has(.pw-configurator) —tres clases y un pseudo-clase— y gana a esa regla general en especificidad aunque la otra esté antes. Sin repetir el colapso aquí, en el móvil la ficha del configurable seguiría en dos columnas de 180px con el configurador partido en dos. La foto deja de pegarse al scroll: en una columna, la foto queda arriba del todo y el resto de la ficha, debajo; si se pegara, en cuanto el cliente bajara a los pasos tendría la imagen siempre encima tapando el contenido, y el configurador tiene su barra inferior fija al pie, que necesita el hueco entero. */ @media (max-width:900px){ .single-product:has(.pw-configurator) div.product, .single-product.has-pw-configurator div.product{ grid-template-columns:minmax(0,1fr); row-gap:28px; padding:0 20px; } .single-product:has(.pw-configurator) .summary.entry-summary, .single-product.has-pw-configurator .summary.entry-summary, .single-product:has(.pw-configurator) .woocommerce-product-gallery, .single-product.has-pw-configurator .woocommerce-product-gallery{ grid-column:1; grid-row:auto; } .single-product:has(.pw-configurator) .woocommerce-product-gallery, .single-product.has-pw-configurator .woocommerce-product-gallery{ position:static; top:auto; } } .related.products, .upsells.products{ max-width:var(--maxw);margin:64px auto 0;padding:56px 28px 0;border-top:1px solid var(--line); } .related.products > h2, .upsells.products > h2{ font-family:var(--font-display);font-size:1.5rem;font-weight:800;margin-bottom:32px; } @media (max-width:900px){ .single-product div.product:has(.pw-configurator), .single-product.has-pw-configurator div.product{grid-template-columns:1fr !important;padding:0 20px;} .single-product div.product:has(.pw-configurator) > .woocommerce-product-gallery, .single-product.has-pw-configurator div.product > .woocommerce-product-gallery, .single-product div.product:has(.pw-configurator) .product_title, .single-product.has-pw-configurator .product_title, .single-product div.product:has(.pw-configurator) .woocommerce-product-rating, .single-product.has-pw-configurator .woocommerce-product-rating, .single-product div.product:has(.pw-configurator) .woocommerce-product-details__short-description, .single-product.has-pw-configurator .woocommerce-product-details__short-description, .single-product div.product:has(.pw-configurator) .pw-configurator, .single-product.has-pw-configurator .pw-configurator, .single-product div.product:has(.pw-configurator) .product_meta, .single-product.has-pw-configurator .product_meta{grid-column:1 !important;} .single-product div.product:has(.pw-configurator) .pw-configurator, .single-product.has-pw-configurator .pw-configurator{margin-top:28px;} } /* ========================================================== WOOCOMMERCE — CART / CHECKOUT (skin sobre la tabla por defecto) ========================================================== */ .woocommerce-cart table.shop_table, .woocommerce-checkout table.shop_table{border-collapse:collapse;width:100%;} .woocommerce-cart table.shop_table th, .woocommerce-cart table.shop_table td, .woocommerce-checkout table.shop_table th, .woocommerce-checkout table.shop_table td{ border:1px solid var(--line);padding:14px;text-align:left;font-size:0.9rem; } .woocommerce-cart table.shop_table th{font-family:var(--font-display);text-transform:uppercase;font-size:0.75rem;letter-spacing:0.04em;} .woocommerce form .form-row input.input-text, .woocommerce form .form-row select, .woocommerce-checkout textarea{ border:1px solid var(--line);border-radius:var(--radius);padding:11px 12px;font-family:var(--font-body);width:100%; } .woocommerce-checkout #payment div.payment_box{background:var(--paper-soft);border-radius:var(--radius);} .woocommerce-message,.woocommerce-info{ border-top-color:var(--ink) !important;background:var(--paper-soft);border-radius:var(--radius); } .woocommerce-message::before,.woocommerce-info::before{color:var(--ink) !important;} /* ========================================================== PAGE / BLOG ========================================================== */ .page-wrap{padding:56px 0 80px;max-width:820px;} .page-title{font-size:clamp(1.7rem,2.8vw,2.3rem);} .page-content{color:var(--ink);} .page-content p{max-width:70ch;color:var(--muted-ink);} .blog-card{padding-bottom:32px;margin-bottom:32px;border-bottom:1px solid var(--line);} /* ========================================================== FOOTER ========================================================== */ .site-footer{background:var(--black);color:#e7e2d6;padding:60px 0 26px;margin-top:0;} /* Cinco columnas: marca, tres de enlaces y la de contacto con WhatsApp y redes. Antes eran cuatro y el bloque de contacto se colgaba en una rejilla de cuatro, lo que lo empujaba a una fila que no existía. */ .footer-top{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:32px;padding-bottom:36px;border-bottom:1px solid #262626;} .footer-brand p{color:#a49a86;font-size:0.86rem;max-width:34ch;margin-top:10px;} .footer-col h4{color:#a49a86;font-size:0.78rem;text-transform:uppercase;letter-spacing:0.05em;margin-bottom:14px;} .footer-col ul li{margin-bottom:10px;} .footer-col a{font-size:0.88rem;color:#e7e2d6;opacity:0.9;} .footer-col a:hover{opacity:1;color:var(--mustard);} .footer-bottom{padding-top:22px;font-size:0.76rem;color:#7a7264;} /* Número de versión del tema, junto al copyright. Es la señal de que la página la generó esta versión y no una copia anterior guardada en la caché del servidor, y por eso lleva un tono de la paleta del pie —que sobre negro no son los tokens de la versión clara—: #a49a8a sobre --black da 7.6:1, de sobra para letra pequeña, y queda un punto por debajo del texto del copyright en #7a7264 para que se lea como un dato accesorio y no como parte del pie. */ .footer-bottom .footer-ver{ margin:6px 0 0; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.06em; color:#a49a8a; } /* --- Contacto y redes del pie ----------------------------------- El botón de WhatsApp es la única pieza con fondo: es la acción que el cliente quiere que se pulse, y en un pie todo de enlaces de texto se pierde entre el resto. Verde de WhatsApp para que se reconozca de un vistazo sin necesidad de leerlo. */ .footer-contacto{display:flex;flex-direction:column;align-items:flex-start;} .footer-wa{ display:inline-flex; align-items:center; gap:9px; padding:10px 16px; border-radius:999px; background:#25D366; color:#0b3d1e !important; font-size:0.84rem !important; font-weight:600; line-height:1.2; opacity:1; margin-bottom:14px; transition:background var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out); } .footer-wa:hover{ background:#1eb455; color:#0b3d1e; opacity:1; transform:translateY(-1px); } /* Teléfono y correo: texto plano, sin caja. Van debajo del botón y no compiten con él. */ .footer-contact-line{display:block;font-size:0.84rem !important;margin-bottom:7px;} /* Iconos de redes: una fila de círculos. Se anulan los márgenes de lista del pie porque aquí van en línea y no apilados. */ .footer-social{ display:flex; align-items:center; gap:10px; list-style:none; margin:16px 0 0; padding:0; } .footer-social li{margin:0;} .footer-social a{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; border:1px solid #3a3a3a; color:#e7e2d6; opacity:1; transition:background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); } .footer-social a:hover{ background:rgba(255,255,255,.08); border-color:var(--mustard); color:var(--mustard); } @media (max-width:1100px){.footer-top{grid-template-columns:1fr 1fr 1fr;}} @media (max-width:860px){.footer-top{grid-template-columns:1fr 1fr;}} @media (max-width:520px){.footer-top{grid-template-columns:1fr;}} /* ========================================================== RESPONSIVE — general ========================================================== */ @media (max-width:960px){ ul.products{grid-template-columns:repeat(2,1fr) !important;} } @media (max-width:600px){ ul.products{grid-template-columns:1fr !important;} section{padding:52px 0;} .site-header-inner{padding:14px 20px;} .wrap{padding:0 20px;} } /* ========================================================== ANIMACIÓN DE APARICIÓN AL HACER SCROLL — RETIRADA ========================================================== Poner opacity:0 y esperar a que un IntersectionObserver avise es una apuesta: si el observer no dispara (JavaScript sin cargar, tarjeta más alta que la pantalla, impresión, lectores de pantalla) el contenido se queda invisible para siempre, sin forma de recuperarlo desde el CSS. Para un catálogo de mesas no vale la pena. El contenido se ve siempre; el único movimiento que queda es el del propio plugin en la barra inferior del móvil. Si algún día quieres volver a tenerla, hazlo al revés: parte de visible y anima solo cuando el observer confirme. */ .reveal-init, .reveal-in{ opacity:1; transform:none; } /* Precio dinámico en la tarjeta de tipo */ .tipo-price{font-family:var(--font-display);font-weight:800;color:var(--ink);font-size:1rem;margin-top:-6px;} .tipo-price bdi{font-weight:800;} /* ========================================================== NAV — un solo punto de corte ========================================================== Antes el menú se ocultaba a 1180px pero el cajón lateral solo se abría a 960px. Entre 961 y 1180 el menú quedaba en display:none y el botón del hamburguesa no tenía a qué abrir: en una pantalla de ese tamaño el sitio no tenía menú. Ambos cortes están ahora en 1024px, y coinciden con el que revisa el JavaScript, así que no hay zona muerta. Con seis elementos la barra sigue cabiendo en 1024px porque los enlaces se escriben en monoespaciado a 0.78rem con espaciado amplio: es más estrecha que la anterior en grotesca a 0.92rem. */ .primary-menu{flex-wrap:nowrap;} @media (max-width:1024px){ .primary-nav{display:none;} .menu-toggle{display:block;} } /* Ventanas de escritorio estrechas: 1025 a 1200px. Es la franja incómoda. El menú de panel ya no cabe (por debajo de 1024 hay cajón), pero la barra horizontal todavía tiene que caber junto al logotipo y los botones de la derecha. Con el hueco de 30px la suma se pasaba de la anchura disponible y la barra, que es flex-wrap:nowrap, empujaba al logotipo y a los botones en vez de ceder. Aquí solo se aprieta: menos separación entre elementos y menos aire a los lados. El diseño —la caja mixta del logotipo, la jerarquía de la barra, los colores— no se toca. */ @media (min-width:1025px) and (max-width:1200px){ .primary-menu{gap:20px;} .site-header-inner{padding-left:22px;padding-right:22px;gap:16px;} .primary-menu > li > a.nav-link{ letter-spacing:.1em; padding:8px 0; } } /* ========================================================== PANEL DE NAVEGACIÓN MÓVIL ========================================================== Negro con letras blancas, como la cabecera. Antes era un panel de papel claro; con la barra en negro, un panel claro encima se leía como otra web metida dentro del sitio. Ahora el menú y la cabecera son la misma pieza y abrir el menú solo despliega el catálogo. Tres cosas que no son gusto: 1. Es NEGRO, no claro. Es lo que pidió el cliente para todo el menú y la cabecera, y el catálogo con texto claro sobre negro se lee sin problema porque el negro es puro, no un gris. 2. Empieza en translateY(-100%), no en translateX(100%). Un panel que baja desde arriba se asocia a "abrir el menú"; uno que entra de lado se asocia a una navegación lateral que aquí no existe. 3. El padding superior usa --topbar-h: el panel arranca justo debajo de la cabecera, no a una distancia inventada. Así el logo sigue visible y quien quiere cerrar, lo tiene a mano. Y una cosa que SÍ era un fallo: este panel es position:fixed, y estaba invisible en el teléfono porque .site-top lleva will-change:transform. Eso convierte la cabecera en bloque contenedor de los fijos, y top/bottom se medían contra los ~70px de la barra en vez de contra la ventana. Arreglado quitando ese will-change de .site-top. */ @media (max-width:1024px){ .primary-nav{ position:fixed; /* --nav-top, no --topbar-h. --topbar-h es la altura de la cabecera con la franja de confianza desplegada, y esa reserva la necesitan las páginas interiores; el panel arranca donde la cabecera se acaba AHORA, que cambia con el estado de la cabecera. theme.js escribe las dos variables, y --nav-top ya viene con el desplazamiento de la barra de administración incluido. Sin esta distinción el menú se abría con un hueco arriba de la altura de la franja, solo cuando se abría haciendo scroll. */ top:var(--nav-top,var(--topbar-h,96px)); left:0; right:0; bottom:0; background:#111111; color:#FFFFFF; flex-direction:column; padding:8px 24px 32px; display:flex; /* La barra de arriba centra sus enlaces con justify-content:center para que el menú quede centrado en el hueco. Ese valor se hereda aquí, y en un panel con scroll es lo contrario de lo que se quiere: con el contenido más alto que la pantalla, centrarlo empuja el principio de la lista hacia arriba y queda fuera de la vista, sin forma de llegar con el dedo. Por eso en el panel los enlaces empiezan arriba. */ justify-content:flex-start; /* NO tocar estos números sin leer antes esto. El 180 no compite con el velo (190), porque el panel no es hermano suyo: .primary-nav está dentro de .site-top, y .site-top es position:fixed con z-index:200, así que crea un contexto de apilamiento propio. El panel se pinta dentro de ese contexto, y el contexto entero se pinta por encima del velo. Por eso el panel queda POR ENCIMA del velo aunque su número sea menor. Y por eso el orden funciona: el velo es una capa fija a pantalla completa con pointer-events:auto cuando está abierto. Si estuviera por encima del panel, se comería todos los toques del menú —cada clic en una categoría cerraría el menú en vez de seguir el enlace— y además le aplicaría su desenfoque de 3px. Ese es el motivo real por el que el velo se escribe fuera de .site-top en header.php y por el que el panel se queda dentro. Si algún día hay que subir el velo por encima de la cabecera, hay que sacarlo también por encima del panel (subir su z-index por encima de 200) y entonces el panel necesita su propio contexto por encima de él. */ z-index:180; transform:translateY(-100%); visibility:hidden; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; transition:transform var(--dur-3) var(--ease-mask), visibility var(--dur-3); } .primary-nav.is-open{ transform:translateY(0); visibility:visible; } /* Los enlaces, en grande. Es el contenido principal del panel y tiene que poder pulsarse con el pulgar, sin apuntar. */ .primary-menu{ flex-direction:column; gap:0; flex-wrap:wrap; margin:0; } .primary-menu > li{ border-bottom:1px solid rgba(255,255,255,.14); width:100%; } .primary-menu > li > a.nav-link{ color:#FFFFFF; /* 56px de alto mínimo: por encima del mínimo de 44px que pide la.directiva WCAG 2.2, con margen para dedos grandes. */ min-height:56px; padding:14px 0; width:100%; font-family:var(--font-editorial); /* En el panel los enlaces van en la serif grande, que es la voz editorial del sitio. En la barra de arriba van en monoespaciado, que es la voz técnica: son dos registros distintos a propósito. */ font-size:1.6rem; font-weight:400; letter-spacing:-.01em; text-transform:none; } .primary-menu > li > a.nav-link::after{display:none;} .primary-menu > li > a.nav-link:hover, .primary-menu > li > a.nav-link:focus-visible{color:var(--mustard);} .nav-caret{width:14px;height:8px;} /* Submenús de un menú de WordPress, por si el administrador define uno propio. OJO con el especificidad de estas reglas, que es la razón de que el panel del catálogo saliera cortado hacia la izquierda en el teléfono. Las tres reglas que hay que anular aquí —la del submenú base, la de :hover y la de :is-open— no tienen todas la misma: la base es .primary-menu .sub-menu (dos clases) y las de estado llevan además .primary-menu > li.has-dropdown:hover (dos clases y un tipo), con lo que ganan en especificidad aunque estén más arriba en el archivo. Con eso, la regla móvil de position:static sí se aplicaba, pero el transform:translateX(-50%) del estado se mantenía: el panel se posicionaba en el flujo pero se desplazaba media anchura propia hacia la izquierda, y su mitad izquierda se salía de la pantalla sin poder desplazarse hasta ella. De ahí que el desplegable de categorías se viera "cortado a la izquierda" en cualquier teléfono. Por eso aquí se repiten los selectores de estado con :hover, :focus-within e .is-open: no para añadir comportamiento, sino para poderles quitar el desplazamiento con la mismapecificidad que tienen en el escritorio. */ .primary-menu .sub-menu, .primary-menu > li.has-dropdown .sub-menu, .primary-menu > li.has-dropdown:hover .sub-menu, .primary-menu > li.has-dropdown:focus-within .sub-menu, .primary-menu > li.has-dropdown.is-open .sub-menu{ position:static; left:auto; top:auto; transform:none; box-shadow:none; background:rgba(255,255,255,.06); color:#FFFFFF; margin:0 0 10px; min-width:0; max-width:none; padding:0; max-height:0; overflow:hidden; opacity:1; visibility:visible; pointer-events:auto; transition:max-height var(--dur-2) var(--ease-out); } .primary-menu .sub-menu a{color:rgba(255,255,255,.9);padding:12px 14px;font-family:var(--font-mono);} .primary-menu .sub-menu a:hover, .primary-menu .sub-menu a:focus-visible{color:var(--mustard);background:rgba(255,255,255,.06);} .primary-menu .sub-menu li + li{border-top:1px solid rgba(255,255,255,.14);} .primary-menu > li.has-dropdown:hover .sub-menu{max-height:0;} .primary-menu > li.has-dropdown.is-open .sub-menu{max-height:600px;} /* El panel del catálogo, en columna. La rejilla de escritorio no cabe en un panel estrecho, así que cada familia se apila y el despliegue usa la misma animación de alto que el resto de submenús. */ .primary-menu .sub-menu-catalogo, .primary-menu > li.has-dropdown.is-open .sub-menu-catalogo{ display:block; min-width:0; max-width:none; background:transparent; margin:0; /* Sin alto máximo ni recorte. El de escritorio es min(920px, 100vw - 48px) y este panel no puede quedar más ancho que el cajón que lo contiene; el alto lo pone el contenido, que son ocho familias con sus tipos y es más largo que cualquier alto fijo. Con un alto de 2400px —que es lo que había— en un catálogo más grande el final de la lista se cortaba sin scroll: los últimos tipos desaparecían y no había forma de verlos. */ max-height:none; overflow:visible; } .primary-menu .sub-menu-catalogo .catalogo-familia{ border-left:0; border-top:1px solid var(--line); padding:14px 0; } .primary-menu .sub-menu-catalogo .catalogo-familia:first-child{ border-top:0; padding-top:0; } .primary-menu .sub-menu-catalogo .catalogo-familia-link{ padding:0 14px 6px; } .primary-menu .sub-menu-catalogo .catalogo-tipos a{ padding:10px 14px; margin-left:0; font-size:.92rem; } /* En el panel de móvil la nota "bajo encargo" se ve siempre: en pantalla táctil no hay hover, así que con la nota oculta nadie sabría que esa pieza se fabrica por encargo. */ .catalogo-tipo-nota{opacity:1;} .primary-menu .sub-menu-catalogo .catalogo-todo{ margin:10px 0 0; border-radius:var(--radius); padding:14px; border-top:0; } } /* Móvil estrecho: tipografía algo menor, porque a 320px un nombre de una línea como "Mesa de oficina" no cabe a 1.4rem junto al resto de entradas sin partirse. */ @media (max-width:480px){ .primary-nav{padding:8px 18px 28px;} .primary-menu > li > a.nav-link{font-size:1.4rem;min-height:52px;} } /* ========================================================== CATEGORY FILTER TABS (catálogo) ========================================================== */ .maderia-cat-filter{background:var(--paper-soft);border-bottom:1px solid var(--line);} .maderia-cat-filter nav{display:flex;gap:26px;flex-wrap:wrap;padding:16px 0;} .maderia-cat-filter a{ font-size:0.86rem;color:var(--muted-ink);padding-bottom:4px;border-bottom:2px solid transparent;font-weight:600; } .maderia-cat-filter a.is-active{color:var(--ink);border-color:var(--ink);} .maderia-cat-filter a:hover{color:var(--ink);} /* ========================================================== SALE BADGE ========================================================== */ span.onsale{ position:absolute;top:12px;right:12px;background:var(--mustard);color:var(--ink); font-size:0.68rem;font-weight:700;text-transform:uppercase;letter-spacing:0.03em; padding:5px 10px;border-radius:20px;z-index:2; } /* ========================================================== SINGLE PRODUCT — tabs / meta polish ========================================================== */ .woocommerce-tabs ul.tabs{display:flex;gap:28px;border-bottom:1px solid var(--line);margin:48px 0 0;padding:0;list-style:none;} .woocommerce-tabs ul.tabs li{margin:0;} .woocommerce-tabs ul.tabs li a{display:inline-block;padding:14px 0;font-family:var(--font-display);font-weight:700;font-size:0.9rem;color:var(--muted-ink);} .woocommerce-tabs ul.tabs li.active a{color:var(--ink);border-bottom:2px solid var(--ink);} .woocommerce-tabs .panel{padding:28px 0;max-width:70ch;color:var(--muted-ink);} .quantity .qty{border:1px solid var(--line);border-radius:var(--radius);padding:11px;width:64px;font-family:var(--font-body);} .stock{font-size:0.84rem;color:var(--green);} .stock.out-of-stock{color:#b03a2e;} /* ========================================================== CONTACT PAGE ========================================================== */ .contact-section{padding:64px 0;} .contact-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:56px;} .contact-form .form-row{margin-bottom:18px;} .contact-form label{display:block;font-size:0.82rem;color:var(--muted-ink);margin-bottom:6px;} .contact-form input,.contact-form textarea{ width:100%;border:1px solid var(--line);border-radius:var(--radius);padding:12px 13px;font-family:var(--font-body);font-size:0.92rem; } .contact-form textarea{resize:vertical;} .maderia-honeypot{position:absolute;left:-9999px;} .contact-photo{margin-bottom:24px;} .contact-photo img{width:100%;height:200px;object-fit:cover;border-radius:var(--radius);border:1px solid var(--line);} .contact-info-list{list-style:none;margin:0;padding:0;} .contact-info-list li{margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid var(--line);} .contact-info-list strong{display:block;font-family:var(--font-display);font-size:0.82rem;text-transform:uppercase;letter-spacing:0.03em;margin-bottom:4px;} .contact-info-list a{color:var(--ink);text-decoration:underline;} .contact-info-empty{color:var(--muted-ink);font-size:0.88rem;font-style:italic;} @media (max-width:820px){.contact-grid{grid-template-columns:1fr;}} .contact-faq-teaser{background:var(--paper-soft);padding:52px 0;text-align:center;border-top:1px solid var(--line);} .contact-faq-teaser h2{font-size:1.3rem;margin-bottom:10px;} .contact-faq-teaser p{color:var(--muted-ink);margin:0 auto 22px;max-width:44ch;} /* ========================================================== MADERAS PAGE ========================================================== */ .maderas-disponibles{padding:64px 0;} .especie-featured-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;} .especie-featured-card{position:relative;background:var(--surface,#fff);border:1px solid var(--line);border-radius:var(--radius);padding-bottom:20px;} .especie-featured-card img{width:100%;height:190px;object-fit:cover;border-radius:var(--radius) var(--radius) 0 0;} .especie-featured-card h3{font-size:1.1rem;margin:16px 20px 8px;} .especie-featured-card .especie-tono{font-weight:600;margin:0 20px 6px;font-size:0.9rem;} .especie-featured-card .especie-caracter{color:var(--muted-ink);margin:0 20px;font-size:0.88rem;} .especie-featured-card .especie-badge{ display:inline-block;font-size:0.68rem;text-transform:uppercase;letter-spacing:0.03em; padding:4px 10px;border-radius:20px;border:1px solid var(--line);background:#fff;margin:16px 0 0 20px; } .especie-badge.is-available{background:var(--ink);color:#fff;border-color:var(--ink);} @media (max-width:900px){.especie-featured-grid{grid-template-columns:1fr 1fr;}} @media (max-width:600px){.especie-featured-grid{grid-template-columns:1fr;}} .maderas-proximas{background:var(--paper-soft);padding:64px 0;} /* ========================================================== ABOUT PAGE (Nosotros) ========================================================== */ .about-hero{padding:64px 0;background:var(--paper-soft);border-bottom:1px solid var(--line);} .about-hero-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:52px;align-items:center;} .about-intro{max-width:60ch;} .about-intro p{color:var(--ink);} .about-editable-hint{font-size:0.78rem;color:var(--muted-ink);font-style:italic;border-top:1px dashed var(--line);padding-top:14px;margin-top:20px;} .about-hero-media img{width:100%;border-radius:var(--radius);border:1px solid var(--line);aspect-ratio:4/3;object-fit:cover;} @media (max-width:900px){.about-hero-grid{grid-template-columns:1fr;}.about-hero-media{order:-1;}} .about-values{padding:72px 0;} .value-card{border-top:3px solid var(--ink);padding-top:16px;} .value-card svg{color:var(--mustard-ink);margin-bottom:12px;} .value-card h3{font-size:0.98rem;margin-bottom:8px;} .value-card p{font-size:0.88rem;color:var(--muted-ink);margin:0;} .values-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;} @media (max-width:900px){.values-grid{grid-template-columns:1fr 1fr;}} @media (max-width:520px){.values-grid{grid-template-columns:1fr;}} .about-gallery{background:var(--paper-soft);padding:72px 0;} .about-gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;} .about-gallery-grid figure{margin:0;} .about-gallery-grid img{width:100%;height:220px;object-fit:cover;border-radius:var(--radius);border:1px solid var(--line);} .about-gallery-grid figcaption{margin-top:10px;font-size:0.86rem;color:var(--muted-ink);text-align:center;} @media (max-width:800px){.about-gallery-grid{grid-template-columns:1fr;}} .about-cta{padding:64px 0;text-align:center;} .about-cta h2{font-size:clamp(1.4rem,2.4vw,1.9rem);margin-bottom:22px;} /* ========================================================== MADERAS PAGE (ficha detallada) ========================================================== */ .especie-list{margin-top:20px;} .especie-row{ display:grid;grid-template-columns:260px 1fr;gap:32px;align-items:center; padding:28px 0;border-bottom:1px solid var(--line); } .especie-row img{width:100%;height:170px;object-fit:cover;border-radius:var(--radius);} .especie-row:not(.is-available) img{filter:grayscale(55%);opacity:0.65;} .especie-badge{ display:inline-block;font-size:0.68rem;text-transform:uppercase;letter-spacing:0.03em; padding:4px 10px;border-radius:20px;border:1px solid var(--line);margin-bottom:10px; } .especie-row.is-available .especie-badge{background:var(--ink);color:#fff;border-color:var(--ink);} .especie-info h3{font-size:1.1rem;margin-bottom:8px;} .especie-tono{font-weight:600;margin-bottom:6px;} .especie-caracter{color:var(--muted-ink);margin:0;} @media (max-width:700px){.especie-row{grid-template-columns:1fr;}.especie-row img{height:200px;}} /* ========================================================== CARE PAGE ========================================================== */ .care-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:32px 0;} .care-card{background:var(--paper-soft);border-radius:var(--radius);padding:22px;} .care-card svg{color:var(--mustard-ink);margin-bottom:12px;} .care-card h3{font-size:0.96rem;margin-bottom:8px;} .care-card p{font-size:0.88rem;color:var(--muted-ink);margin:0;} .care-note{font-size:0.85rem;color:var(--muted-ink);font-style:italic;border-top:1px solid var(--line);padding-top:18px;} @media (max-width:820px){.care-grid{grid-template-columns:1fr 1fr;}} @media (max-width:520px){.care-grid{grid-template-columns:1fr;}} /* ========================================================== SHIPPING PAGE ========================================================== */ .shipping-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:32px 0 48px;} .shipping-card{border-top:3px solid var(--ink);padding-top:16px;} .shipping-card svg{color:var(--mustard-ink);margin-bottom:12px;} .shipping-card h3{font-size:0.98rem;margin-bottom:8px;} .shipping-card p{font-size:0.88rem;color:var(--muted-ink);margin:0;} .shipping-cta{background:var(--paper-soft);border-radius:var(--radius);padding:36px;text-align:center;} .shipping-cta h2{font-size:1.2rem;margin-bottom:10px;} .shipping-cta p{color:var(--muted-ink);margin:0 auto 20px;max-width:44ch;} @media (max-width:820px){.shipping-grid{grid-template-columns:1fr 1fr;}} @media (max-width:520px){.shipping-grid{grid-template-columns:1fr;}} /* ========================================================== FAQ PAGE ========================================================== */ .faq-list{margin-top:24px;} .faq-item{border-bottom:1px solid var(--line);} .faq-q{ width:100%;text-align:left;background:none;border:none;padding:20px 0; display:flex;justify-content:space-between;align-items:center;gap:20px; font-family:var(--font-display);font-weight:700;font-size:1rem;color:var(--ink); } .faq-q svg{flex-shrink:0;color:var(--muted-ink);transition:transform .2s ease;} .faq-item.is-open .faq-q svg{transform:rotate(45deg);} .faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease;} .faq-item.is-open .faq-a{max-height:240px;} .faq-a p{padding-bottom:20px;color:var(--muted-ink);margin:0;max-width:64ch;} /* ========================================================== LEGAL PAGES ========================================================== */ .legal-disclaimer{ background:#fbf0d9;border:1px solid #e9d7a8;border-radius:var(--radius); padding:16px 18px;font-size:0.86rem;margin:24px 0 32px;color:#5c4a1f; } /* ========================================================== SHARED — eyebrow label + simple hero band (páginas secundarias) ========================================================== */ .eyebrow{ display:inline-flex;align-items:center;gap:10px;font-size:0.8rem;color:var(--muted-ink); text-transform:uppercase;letter-spacing:0.06em;margin-bottom:14px;font-weight:600; } .eyebrow::before{content:"";width:20px;height:1px;background:var(--mustard-ink);display:inline-block;} .simple-hero{background:var(--paper-soft);padding:64px 0 52px;border-bottom:1px solid var(--line);} .simple-hero .page-title{margin-bottom:14px;} .simple-hero-lede{font-size:1.02rem;color:var(--muted-ink);max-width:60ch;margin:0;} /* ========================================================== HOME — COMPARADOR DE MADERAS ========================================================== */ .section-compare{background:var(--paper-soft);} .compare-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:52px;align-items:center;} .compare-tabs{display:flex;flex-direction:column;gap:10px;margin-bottom:26px;} .compare-tab{ display:flex;align-items:center;gap:12px;text-align:left;background:#fff;border:1px solid var(--line); border-radius:var(--radius);padding:14px 16px;font-family:var(--font-body);font-size:0.9rem;color:var(--muted-ink); } .compare-tab .swatch{width:18px;height:18px;border-radius:50%;flex-shrink:0;border:1px solid rgba(0,0,0,0.15);} .compare-tab.is-active{border-color:var(--ink);color:var(--ink);font-weight:600;} .compare-media img{width:100%;border-radius:var(--radius);border:1px solid var(--line);transition:opacity .15s ease;} @media (max-width:900px){.compare-grid{grid-template-columns:1fr;}.compare-media{order:-1;}} /* ========================================================== HOME — aviso vacío solo-admin / CTA final ========================================================== */ .admin-empty-notice{ border:1px dashed var(--line);border-radius:var(--radius);padding:22px; color:var(--muted-ink);font-size:0.88rem;background:var(--paper-soft); } .section-cta-final{background:var(--ink);color:#fff;text-align:center;} .section-cta-final h2{color:#fff;font-size:clamp(1.6rem,2.8vw,2.2rem);} .section-cta-final p{color:#c9c2b4;max-width:48ch;margin:0 auto 28px;} .btn-mustard{background:var(--mustard);color:var(--ink) !important;border-color:var(--mustard);} .btn-mustard:hover{background:#fff;border-color:#fff;} /* ========================================================== CARRITO EN DOS COLUMNAS ========================================================== El carrito clásico de WooCommerce es una tabla a todo el ancho y, debajo, los totales. Con una sola mesa en el carrito eso deja la mitad de la pantalla vacía y empuja el botón de pagar fuera de vista. Aquí la tabla y el resumen se ponen en dos columnas por CSS, sin sobreescribir cart.php: .woocommerce-cart-form y .cart-collaterals son dos hermanos dentro de .woocommerce, y ese contenedor se convierte en rejilla por encima de 900px. Por debajo se apilan, que es como ya se leían. El resumen lleva position:sticky para que el total siga a la vista mientras se recorre una tabla larga. Con una sola pieza casi nunca hace falta, pero en cuanto haya tres mesas configuradas —que es lo normal si alguien configura una para cada estancia— el botón de pagar tiene que estar siempre a la vista. */ @media (min-width:900px){ .woocommerce-cart .woocommerce{ display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:48px; align-items:start; } .woocommerce-cart .woocommerce-cart-form{ grid-column:1; grid-row:1; } .woocommerce-cart .cart-collaterals{ grid-column:2; grid-row:1; width:auto; float:none; margin:0; position:sticky; top:calc(var(--topbar-h) + var(--header-h) + 24px); } } .woocommerce-cart .cart-collaterals .cart_totals{ background:var(--paper-soft); border-radius:var(--radius); padding:26px 26px 28px; } .woocommerce-cart .cart-collaterals .cart_totals h2{ font-family:var(--font-display); font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-ink); margin:0 0 18px; } .woocommerce-cart .cart-collaterals .cart_totals .wc-proceed-to-checkout a.checkout-button{ width:100%; min-height:56px; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:.98rem; font-weight:800; text-align:center; text-decoration:none; } /* ========================================================== CONFIGURADOR DEL PLUGIN MADERIA — piel redundante ========================================================== */ /* El plugin trae su propia hoja de estilos con variables CSS propias (--pw-ink, --pw-wood, --pw-line, --pw-bg, --pw-green). El tema las redefine en dos lugares por seguridad: aquí, dentro del stylesheet principal (siempre se carga con la página), y además de forma dinámica en inc/configurator-skin.php enganchado al propio estilo del plugin. Si algún día uno de los dos deja de aplicar por un cambio de versión del plugin, el otro sigue cubriendo. */ .pw-configurator{ --pw-ink:#111111 !important; --pw-wood:#111111 !important; --pw-wood-soft:#6b6b6b !important; --pw-line:#e2e2e2 !important; --pw-bg:#f7f7f5 !important; --pw-green:#2f6b3f !important; font-family:var(--font-body) !important; max-width:var(--maxw); margin:0 auto; padding:0 28px 64px; } .pw-configurator .pw-cfg-title{font-family:var(--font-display) !important;font-weight:800 !important;text-transform:none !important;} .pw-configurator .pw-step{border-radius:var(--radius) !important;border-color:var(--line) !important;} .pw-configurator .pw-opt{border-radius:var(--radius) !important;} .pw-configurator .pw-opt.pw-disabled{opacity:0.45 !important;} .pw-configurator .pw-submit, .pw-configurator .button.alt{ background:var(--black) !important;border-color:var(--black) !important;color:#fff !important; border-radius:var(--radius) !important;font-family:var(--font-display) !important;font-weight:700 !important; text-transform:uppercase !important;letter-spacing:0.04em !important; } .pw-configurator .pw-submit:hover, .pw-configurator .button.alt:hover{ background:var(--mustard) !important;border-color:var(--mustard) !important;color:var(--ink) !important; } .pw-configurator .pw-total-amount{font-family:var(--font-display) !important;font-weight:800 !important;} @media (max-width:820px){.pw-configurator{padding:0 20px 48px;}} /* La cuadrícula interna del configurador (vista previa a la izquierda, formulario a la derecha) vive en inc/configurator-skin.php. Ahí está porque .pw-preview se genera DENTRO de
      : para poner la vista previa en su propia columna la cuadrícula tiene que ir sobre el form, no sobre .pw-configurator, y el form no existe en este archivo. Aquí no se replica para que no haya dos reglas compitiendo. */ /* ========================================================== HOME — PRÓXIMAMENTE (tablas de cocina) ========================================================== Galería editorial con composición asimétrica: una imagen protagonista a la izquierda ocupando tres filas de una retícula de cuatro, y tres imágenes de apoyo apiladas a la derecha. Al alinearse con los bordes de la retícula, la galería comparte la misma retícula que el resto del sitio. La protagonista se declara con grid-row: 1 / 4 y no con un alto fijo: así su proporción la decide la retícula y no queda estirada ni recortada. El aspect-ratio de las de apoyo mantiene la caja estable mientras cargan. */ .section-proximamente{background:var(--paper-soft);} .badge-proximamente{ display:inline-block;background:var(--mustard);color:var(--wood-nogal); font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em; padding:6px 13px;border-radius:20px;margin-bottom:18px; } .proximamente-gallery{ display:grid; grid-template-columns:1.35fr 1fr; grid-template-rows:repeat(3,1fr); gap:12px; margin:44px 0; } .proximamente-gallery img{ width:100%;height:100%;object-fit:cover;border-radius:var(--radius); display:block;background:var(--line); } .pg-main{grid-column:1;grid-row:1 / 4;} /* La foto protagonista es vertical (1159×1280). Recortarla a 16/10 perdería la pieza entera, así que el marco no fuerza proporción: se estira a la altura de la retícula y el object-fit recorta por los lados, que es donde sobra fondo. */ @media (max-width:820px){ .proximamente-gallery{grid-template-columns:1fr 1fr;grid-template-rows:auto;} .pg-main{grid-column:1 / -1;grid-row:auto;aspect-ratio:3/2;} .proximamente-gallery img:not(.pg-main){aspect-ratio:4/3;} } @media (max-width:560px){ .proximamente-gallery{grid-template-columns:1fr;} .pg-main{grid-column:1;} .proximamente-gallery img:not(.pg-main){aspect-ratio:3/2;} } .waitlist-box{max-width:520px;} .waitlist-form label{ display:block;font-size:.78rem;font-weight:600; font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase; color:var(--muted-ink);margin-bottom:12px; } .waitlist-row{display:flex;gap:10px;} .waitlist-row input{ flex:1;border:1px solid var(--line);border-radius:var(--radius); padding:14px;background:var(--surface);color:var(--ink); font-family:var(--font-body);font-size:.95rem; } .waitlist-row input:focus-visible{ outline:none;border-color:var(--ink); box-shadow:0 0 0 1px var(--ink); } .waitlist-ok{color:var(--green);font-weight:600;} /* ========================================================== FASE 2 — MAQUETACIÓN EDITORIAL ========================================================== */ .section-datas{padding:14px 0 0;border-top:1px solid var(--line);} .datas-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 28px;padding:12px 0;border-bottom:1px solid var(--line);font-family:var(--font-mono);font-size:0.78rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--muted-ink);} .dato{position:relative;padding-left:14px;} .dato::before{content:"";position:absolute;left:0;top:50%;width:6px;height:1px;background:var(--mustard-ink);transform:translateY(-50%);} .ed-head{display:flex;flex-direction:column;gap:14px;padding:80px 0 40px;} .ed-head--split{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:40px;} .ed-title{font-family:var(--font-editorial);font-weight:400;font-size:clamp(2rem,3.2vw,3rem);line-height:1.08;margin:0;color:var(--ink);} .ed-lede{max-width:56ch;color:var(--muted-ink);font-size:1.05rem;margin:0;} .link-arrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:0.72rem;text-transform:uppercase;letter-spacing:0.12em;color:var(--ink);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px;transition:transform var(--dur-2) var(--ease-out),opacity var(--dur-2) var(--ease-out);} .link-arrow--sm{font-size:0.68rem;} .link-arrow:hover{transform:translateX(4px);opacity:.96;} /* Maderas */ .madera-lead{display:grid;grid-template-columns:0.36fr 0.64fr;gap:48px;align-items:stretch;border:1px solid var(--line);background:#fff;border-radius:var(--radius);overflow:hidden;} .madera-lead-media{position:relative;background:var(--paper-soft);display:flex;align-items:center;justify-content:center;padding:48px 0;} .madera-lead-media img{width:auto;height:420px;max-width:100%;object-fit:contain;} .madera-lead-body{display:flex;flex-direction:column;justify-content:center;gap:18px;padding:48px 48px 48px 0;} .madera-lead-num{position:absolute;top:24px;right:24px;font-family:var(--font-mono);font-size:0.76rem;color:var(--muted-ink);letter-spacing:.08em;} .madera-lead-name{font-family:var(--font-editorial);font-weight:400;font-size:clamp(2rem,2.6vw,2.6rem);margin:0;} .madera-lead-desc{max-width:48ch;color:var(--muted-ink);margin:0;} .madera-lead-meta{display:flex;gap:12px;font-family:var(--font-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-ink);margin:0;} .tag-disponible{align-self:flex-start;padding:4px 10px;border:1px solid var(--ink);border-radius:20px;font-family:var(--font-mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;background:var(--ink);color:#fff;} .tag-proximamente{align-self:flex-start;padding:4px 10px;border:1px solid var(--line);border-radius:20px;font-family:var(--font-mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;background:#fff;color:var(--muted-ink);} .madera-rest{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:20px;} .madera-item{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;} .madera-item-media{position:relative;background:var(--paper-soft);display:flex;align-items:center;justify-content:center;padding:36px 0;aspect-ratio:4/5;} .madera-item-media img{width:auto;height:280px;max-width:100%;object-fit:contain;} .madera-item-num{position:absolute;top:14px;right:14px;font-family:var(--font-mono);font-size:.7rem;color:var(--muted-ink);letter-spacing:.08em;} .madera-item-body{display:flex;flex-direction:column;gap:10px;padding:18px 18px 20px;} .madera-item-name{margin:0;font-family:var(--font-display);font-weight:700;font-size:1rem;} .madera-item-desc{margin:0;color:var(--muted-ink);font-size:.92rem;} .madera-item.is-locked{opacity:.92;} .madera-item.is-locked img{filter:grayscale(60%);opacity:.72;} @media (max-width:980px){.madera-lead{grid-template-columns:1fr;}.madera-lead-body{padding:32px;}.madera-rest{grid-template-columns:1fr 1fr;}} @media (max-width:640px){.madera-rest{grid-template-columns:1fr;}} /* Personalización */ .section-personaliza{background:var(--paper-soft);} .pers-list{display:flex;flex-direction:column;border-top:1px solid var(--line);} .pers-step{display:grid;grid-template-columns:.32fr .68fr;gap:40px;padding:40px 0;border-bottom:1px solid var(--line);} .pers-step-head{display:flex;flex-direction:column;gap:14px;} .pers-num{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.12em;} .pers-title{display:flex;align-items:center;gap:12px;margin:0;font-family:var(--font-display);font-weight:700;font-size:1.08rem;} .pers-icon{color:var(--mustard-ink);} .pers-desc{margin:0;color:var(--muted-ink);max-width:36ch;} .pers-rangos{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);} .pers-rango{background:#fff;padding:14px 16px;display:flex;flex-direction:column;gap:6px;} .pers-rango dt{margin:0;font-family:var(--font-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-ink);} .pers-rango dd{margin:0;font-family:var(--font-mono);font-size:.88rem;} .pers-opts{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;} .pers-opt{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;display:flex;flex-direction:column;gap:6px;} .pers-opt-name{font-weight:600;} .pers-opt-desc{color:var(--muted-ink);font-size:.92rem;} .pers-vacio{color:var(--muted-ink);} .pers-cta{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:30px;border:1px solid var(--line);background:#fff;border-radius:var(--radius);margin-top:20px;} .pers-cta-copy{margin:0;color:var(--muted-ink);} @media (max-width:900px){.pers-step{grid-template-columns:1fr;gap:20px;}.pers-rangos{grid-template-columns:1fr;}.pers-opts{grid-template-columns:1fr;}.pers-cta{flex-direction:column;align-items:flex-start;}} /* Tipos */ .tipos-editorial{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;} .tipo-e{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);background:#fff;overflow:hidden;text-decoration:none;color:inherit;} .tipo-e--wide{grid-column:1 / -1;flex-direction:row;} .tipo-e-media{position:relative;background:var(--paper-soft);display:flex;align-items:center;justify-content:center;padding:40px 0;aspect-ratio:4/5;} .tipo-e--wide .tipo-e-media{aspect-ratio:16/9;flex:1;} .tipo-e-media img{width:auto;height:320px;max-width:92%;object-fit:contain;} .tipo-e--wide .tipo-e-media img{height:360px;} .tipo-e-num{position:absolute;top:14px;right:14px;font-family:var(--font-mono);font-size:.7rem;color:var(--muted-ink);letter-spacing:.08em;} .tipo-e-body{display:flex;flex-direction:column;gap:8px;padding:20px 22px 22px;} .tipo-e--wide .tipo-e-body{flex:0.8;justify-content:center;padding:40px;} .tipo-e-name{margin:0;font-family:var(--font-editorial);font-weight:400;font-size:clamp(1.4rem,2vw,1.8rem);} .tipo-e-rango{margin:0;color:var(--muted-ink);} .tipo-e-price{margin:4px 0 0;font-family:var(--font-mono);} .tipo-e .link-arrow{margin-top:auto;align-self:flex-start;} @media (max-width:880px){.tipos-editorial{grid-template-columns:1fr;}.tipo-e--wide{flex-direction:column;}.tipo-e--wide .tipo-e-body{padding:20px 22px 22px;}} /* Comparador */ .section-compare{background:var(--paper-soft);} .compare-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:52px;align-items:center;} .compare-media{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;} .compare-media img{width:100%;height:auto;display:block;transition:opacity .18s var(--ease-out);} .compare-copy{display:flex;flex-direction:column;gap:20px;} .compare-tabs{display:flex;flex-direction:column;gap:10px;} .compare-tab{display:flex;align-items:center;justify-content:space-between;text-align:left;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;font-family:var(--font-body);font-size:.94rem;color:var(--muted-ink);transition:border var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out);} .compare-tab.is-active{border-color:var(--ink);color:var(--ink);font-weight:600;} .compare-tab-name{font-family:var(--font-display);} .compare-note{margin:0;color:var(--muted-ink);} @media (max-width:960px){.compare-grid{grid-template-columns:1fr;}.compare-media{order:-1;}} /* VS */ .section-vs{background:var(--paper);} .vs-grid{display:grid;grid-template-columns:1.6fr .8fr;gap:20px;} .vs-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);background:#fff;overflow:hidden;} .vs-card--other{align-self:stretch;} .vs-card-media{position:relative;background:var(--paper-soft);display:flex;align-items:center;justify-content:center;padding:40px 0;} .vs-card--lead .vs-card-media{aspect-ratio:9/16;} .vs-card--other .vs-card-media{aspect-ratio:4/5;} .vs-card-media img{width:auto;max-width:92%;height:380px;object-fit:contain;} .vs-card--other .vs-card-media img{height:280px;} .vs-card-body{display:flex;flex-direction:column;gap:14px;padding:24px 26px 28px;} .vs-card-title{margin:0;font-family:var(--font-editorial);font-weight:400;font-size:clamp(1.4rem,2vw,1.8rem);} .vs-card-note{margin:0;color:var(--muted-ink);} .vs-list{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line);padding-top:16px;} .vs-line{display:flex;flex-direction:column;gap:4px;padding:10px 0;border-bottom:1px solid var(--line);} .vs-k{color:var(--muted-ink);font-size:.94rem;} .vs-v{font-weight:600;} .vs-v.is-yes{color:var(--green);} @media (max-width:980px){.vs-grid{grid-template-columns:1fr;}} /* Proceso */ .section-process{background:var(--paper-soft);} .process-track{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line);} .process-step{display:grid;grid-template-columns:120px 1fr;gap:40px;padding:40px 0;border-bottom:1px solid var(--line);} .process-num{font-family:var(--font-mono);font-size:clamp(2.4rem,4vw,3.2rem);line-height:1;opacity:.16;} .process-step-main{display:flex;flex-direction:column;gap:14px;} .process-step-media{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;max-width:520px;} .process-step-media img{width:100%;height:auto;display:block;} .process-icon{color:var(--mustard-ink);} .process-title{margin:0;font-family:var(--font-display);font-weight:700;font-size:1.12rem;} .process-desc{margin:0;color:var(--muted-ink);max-width:48ch;} @media (max-width:760px){.process-step{grid-template-columns:1fr;gap:16px;}} /* Modelos */ .section-modelos{background:var(--paper);} /* Rejilla editorial, no una cuadrícula de cuatro iguales. La sección enseña los seis modelos configurables de la portada con la misma jerarquía que el resto del sitio: una pieza que manda, cuatro que la apoyan y una que cierra la tirada a lo ancho. Las proporciones de la foto no son las de una tarjeta de catálogo. Las piezas se fotografiaron en vertical (768x1362), y a 4/3 se les corta la parte de arriba y la de abajo: la mesa deja de leerse como un mueble y pasa a ser un recorte de foto. La protagonista conserva el vertical; las de apoyo, 4/3; la de cierre, una banda ancha y baja. */ /* Rejilla editorial plana: sin pieza gigante ni pieza apaisada. Todas las tarjetas miden igual y el ritmo lo pone el hueco, no el tamaño. Cuatro columnas en escritorio cabe bien con cuatro productos; con seis, la segunda fila se completa sola. */ ul.products.modelos-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px 20px; margin:0; padding:0; list-style:none; } ul.products.modelos-grid .product{height:100%;} /* Proporción contenida: ni vertical Film Noir ni panorámica. La foto va a object-fit:cover dentro de esta caja, sin deformarse. */ ul.products.modelos-grid img{aspect-ratio:1/1;} /* El marcador de producto es un SVG a 4:3, no una foto a 1:1. Recortarlo con object-fit:cover le cortaría las esquinas del plano, que es justamente lo que lo hace legible. Se deja la caja en 4:3 y el dibujo entra entero; el hueco que sobra se llena con el mismo color de fondo que tiene la caja, así que no se ve. El contenedor sigue siendo 1/1 para que la rejilla no dependa de que el producto tenga foto: la diferencia real es de dos píxeles de alto. */ ul.products li.product:has(img.placeholder-dibujo) .maderia-card-media{ aspect-ratio:4/3; background:var(--paper-soft); } /* El dibujito entra entero en cualquier sitio. El contenedor puede seguir a 1/1: el SVG se centra y el aire que sobra toma el color del fondo, así que no se ve un borde. */ ul.products li.product img.placeholder-dibujo{ aspect-ratio:4/3; object-fit:contain; height:auto; width:100%; display:block; } .single-product img.placeholder-dibujo{ width:100%; height:auto; object-fit:contain; border-radius:var(--radius); border:1px solid var(--line); background:var(--paper-soft); } /* Título uniforme. Antes el primero era 1.32rem y el sexto 1.1rem, lo que hacía que la rejilla se leyera como "una foto grande y cinco cosas small"; ahora manda la retícula, no el ranking. */ ul.products.modelos-grid .woocommerce-loop-product__title{font-size:1.02rem;} /* Tablet: dos columnas, no tres. Con cuatro productos, tres columnas dejan el cuarto solo en su fila y se lee como que falta algo. Con dos son dos filas parejas, que es lo que se busca. */ @media (max-width:1080px){ ul.products.modelos-grid{grid-template-columns:repeat(2,1fr);gap:20px 16px;} } /* Móvil: una columna, porque a dos las tarjetas quedan por debajo de los 160px de ancho y el nombre del mueble se parte en tres líneas. */ @media (max-width:520px){ ul.products.modelos-grid{grid-template-columns:1fr;gap:16px;} ul.products.modelos-grid .woocommerce-loop-product__title{font-size:1.05rem;} } /* Próximamente */ .section-proximamente{background:var(--paper-soft);} .prox-layout{display:grid;grid-template-columns:.42fr .58fr;gap:48px;align-items:center;padding:60px 0;} .prox-copy{display:flex;flex-direction:column;gap:20px;} .proximamente-gallery{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,auto);gap:12px;} .proximamente-gallery img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius);border:1px solid var(--line);} .pg-main{grid-column:1 / 3;grid-row:1 / 3;} @media (max-width:960px){.prox-layout{grid-template-columns:1fr;}.proximamente-gallery{order:-1;}} /* CTA final */ .section-cta-final{position:relative;display:flex;align-items:center;min-height:70vh;padding:80px 0;background:var(--ink);color:#fff;overflow:hidden;text-align:left;} .cta-final-bg{position:absolute;inset:0;z-index:0;} .cta-final-bg img{width:100%;height:100%;object-fit:cover;filter:brightness(.5) contrast(.98);} .cta-final-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,10,8,.92) 0%,rgba(13,10,8,.4) 70%);} .cta-final-inner{position:relative;z-index:1;display:flex;flex-direction:column;gap:18px;max-width:60ch;} .section-cta-final .ed-title{color:#fff;} .section-cta-final p{color:rgba(255,255,255,.78);margin:0;} .cta-final-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px;} .btn-ghost{background:transparent;border-color:rgba(255,255,255,.5);color:#fff!important;} .btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;} /* ========================================================== CATÁLOGO — Rediseño editorial de la tienda ========================================================== Lo que se cambia aquí, y por qué. LA TARJETA deja de ser una caja blanca con borde. Antes cada pieza iba sobre un rectángulo con fondo y filete, que es el aspecto de una ficha de ferretería: el cliente compara cajas, no muebles. Ahora la foto va directamente sobre el papel, sin caja ninguna, y la rejilla respira más. La imagen manda porque es lo único que hay. LA PROPORCIÓN pasa de 4/3 a 4/5. Las piezas están fotografiadas en vertical (768x1362); a 4/3 se les cortaban las patas y la escena, y una mesa sin pies parece una tabla. En vertical se ve el mueble entero, que es justo lo que hay que enseñar para venderlo. EL TÍTULO baja de peso. Estaba en negrita y subrayado, que es la manera de subrayar algo que no necesita subrayado. Ahora va en la tipografía de titular, sin subrayado; el subrayado vuelve al pasar el ratón, que es cuando de verdad se está señalando algo. EL HOVER mueve la foto, no la caja. Un escalado del 3% y una transición larga: es una pieza de madera, pesa, y tiene que parecer que pesa. */ /* El relleno superior se quita SOLO en el archivo del catálogo, porque ahí la cabecera editorial ya pone su propio aire. .wc-wrap se usa también en carrito, checkout y ficha: si se tocara el valor global, esas tres páginas se quedarían pegadas al encabezado. */ body.is-catalog .wc-wrap{padding-top:0;} /* --- Cabecera ---------------------------------------------------- */ .catalog-eyebrow{padding:44px 0 0;} .woocommerce-products-header{ padding:10px 28px 34px; max-width:var(--maxw); margin:0 auto; } .woocommerce-products-header .page-title{ font-family:var(--font-editorial); font-weight:400; font-size:clamp(2.1rem,4vw,3.4rem); line-height:1.05; letter-spacing:-0.01em; margin:0 0 14px; color:var(--ink); } .woocommerce-products-header .taxonomy-description, .woocommerce-products-header .woocommerce-description{ color:var(--muted-ink); font-size:1.02rem; max-width:62ch; margin:0; } .woocommerce-products-header .taxonomy-description p:last-child{margin-bottom:0;} /* Sin descripción no se deja un hueco vacío debajo del título: el bloque entero se aprieta contra el título. */ .woocommerce-products-header:not(:has(.taxonomy-description)){padding-bottom:22px;} /* --- Barra de resultados y orden --------------------------------- */ .woocommerce-toolbar{ max-width:var(--maxw); margin:0 auto 6px; padding:14px 28px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; } .woocommerce-toolbar .woocommerce-result-count{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em; color:var(--muted-ink); margin:0; } .woocommerce-toolbar .woocommerce-ordering{ margin:0; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em; color:var(--muted-ink); } .woocommerce-toolbar select{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; color:var(--ink); background:transparent; border:0; border-bottom:1px solid var(--line); border-radius:0; padding:6px 22px 6px 2px; cursor:pointer; } .woocommerce-toolbar select:focus-visible{ outline:none; border-bottom-color:var(--ink); } /* El botón "Ordenar" de WooCommerce sigue ahí, y hace falta: el desplegable se envía solo con el JavaScript, y sin JavaScript es el botón lo que permite elegir el orden. Se esconde a la vista sin esconderlo del teclado —lo mismo que hace .screen-reader-text, el patrón del propio WooCommerce— y al recibir el foco aparece, de modo que un cliente que navega con el teclado o con el lector de pantalla ve que se puede aplicar el orden. */ .woocommerce-toolbar .woocommerce-ordering button{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } .woocommerce-toolbar .woocommerce-ordering button:focus{ position:static; width:auto; height:auto; margin:0 0 0 12px; overflow:visible; clip:auto; padding:6px 12px; background:transparent; border:1px solid var(--line); border-radius:var(--radius); font-family:var(--font-mono); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); cursor:pointer; } /* --- Filtros por categoría --------------------------------------- */ .maderia-cat-filter{ background:transparent; border-bottom:1px solid var(--line); margin-bottom:34px; } .maderia-cat-filter nav{ display:flex; gap:0; flex-wrap:nowrap; overflow-x:auto; padding:0; scrollbar-width:none; -ms-overflow-style:none; /* El scroll horizontal con snap es un gesto de móvil, no una Cinderella: al soltar, la categoría queda encajada en la pantalla en lugar de a medio cortar. */ scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; } .maderia-cat-filter nav::-webkit-scrollbar{display:none;} .maderia-cat-filter a{ flex:0 0 auto; scroll-snap-align:start; display:inline-flex; align-items:baseline; gap:7px; padding:13px 18px; font-family:var(--font-display); font-size:.84rem; color:var(--muted-ink); text-decoration:none; border-bottom:2px solid transparent; white-space:nowrap; transition:color var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out); } .maderia-cat-filter a:first-child{padding-left:0;} .maderia-cat-filter a i{ font-style:normal; font-family:var(--font-mono); font-size:.68rem; color:var(--muted-ink); opacity:.7; } .maderia-cat-filter a:hover{color:var(--ink);} .maderia-cat-filter a:focus-visible{ outline:2px solid var(--mustard-ink); outline-offset:-2px; } .maderia-cat-filter a.is-active{ color:var(--ink); border-bottom-color:var(--ink); font-weight:600; } .maderia-cat-filter a.is-active i{color:var(--mustard-ink);opacity:1;} /* Los tipos de cada familia van debajo de su familia, con sangría y en un tono más apagado: se leen como subnivel y no compiten con la familia, que es la entrada principal. */ .maderia-cat-filter a.maderia-cat-tipo{ padding-left:34px; font-size:.8rem; color:var(--muted-ink); opacity:.85; } .maderia-cat-filter a.maderia-cat-tipo::before{ content:""; display:inline-block; width:14px; height:1px; margin-right:8px; vertical-align:middle; background:var(--line); } /* --- Rejilla ------------------------------------------------------ Antes de este bloque, en el archivo de la tienda las tarjetas llegaban hasta el borde de la pantalla: WooCommerce ya no trae su hoja de estilos —el tema la desactiva a propósito— y la regla general de ul.products no lleva ni márgenes laterales ni ancho máximo. En la portada no se nota porque vive dentro de un .wrap; en el archivo sí, y las fotos quedan pegadas al borde. Aquí se le da el mismo carril de 28px que el encabezado y la barra de resultados. */ body.is-catalog ul.products{ max-width:var(--maxw); margin:0 auto !important; padding:0 28px; } ul.products{ gap:44px 30px; } ul.products li.product{ background:transparent; border:0; border-radius:0; padding:0; display:flex; flex-direction:column; transition:transform var(--dur-2) var(--ease-out); } ul.products li.product:hover{ box-shadow:0 14px 34px rgba(29,26,23,.12); transform:translateY(-3px); } .maderia-card-media{ position:relative; background:var(--paper-soft); overflow:hidden; border-radius:0; } ul.products li.product img{ display:block; width:100%; aspect-ratio:4/5; object-fit:cover; margin:0 !important; transition:transform var(--dur-3) var(--ease-out),opacity var(--dur-2) var(--ease-out); } ul.products li.product:hover img{transform:scale(1.03);} .maderia-card-media::after{ /* Un velo muy tenue: da profundidad a la foto sin robarle el tono real de la madera, que es justo lo que el cliente está mirando. */ content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(13,10,8,.14),transparent 42%); opacity:0; transition:opacity var(--dur-2) var(--ease-out); pointer-events:none; } ul.products li.product:hover .maderia-card-media::after{opacity:1;} ul.products li.product .woocommerce-loop-product__title{ font-family:var(--font-editorial); font-weight:400; font-size:1.12rem; line-height:1.25; margin:16px 0 4px; color:var(--ink); text-decoration:none; } ul.products li.product .woocommerce-loop-product__title:hover{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; } ul.products li.product .woocommerce-loop-product__title a{text-decoration:none;color:inherit;} ul.products li.product .woocommerce-loop-product__title a:hover{text-decoration:underline;text-underline-offset:4px;} ul.products li.product .price{ margin:2px 0 0; font-family:var(--font-mono); font-weight:500; font-size:.9rem; color:var(--ink); } .card-price-custom{ display:block; margin:2px 0 0; font-family:var(--font-mono); font-size:.78rem; letter-spacing:.04em; color:var(--muted-ink); } /* Las etiquetas que cuelgan del bloque de titulo comparten margen lateral cero: si cada una lleva el suyo, la rejilla se descentra de una fila a otra porque las tarjetas miden distinto. Todas al mismo compas. */ .card-lead{margin:6px 0 0;} .card-save{margin:8px 0 0;padding:3px 9px;background:var(--paper-soft);border:1px solid var(--line);border-radius:20px;font-size:.66rem;font-family:var(--font-mono);} .card-swatches{margin:10px 0 0;} /* El botón de la tarjeta ocupa todo el ancho y respira: es la acción que se quiere después de mirar la pieza. */ ul.products li.product a.button{ margin:14px 0 0; width:100%; border-radius:var(--radius); justify-content:center; text-align:center; min-height:44px; display:inline-flex; align-items:center; } /* En un producto a medida el botón es "Configurar" y lleva a la ficha; no tiene sentido presentarlo como si añadiera algo al carrito. */ ul.products li.product a.maderia-configure-btn{ background:transparent; color:var(--ink); border:1px solid var(--ink); } ul.products li.product a.maderia-configure-btn:hover{background:var(--ink);color:var(--paper);} .tag-encargo{ position:absolute; top:14px; left:14px; z-index:2; background:rgba(255,253,250,.94); backdrop-filter:blur(4px); border:1px solid var(--line); font-size:.64rem; padding:5px 9px; border-radius:20px; display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.05em; color:var(--ink); } .onsale{ position:absolute; top:14px; right:14px; z-index:2; background:var(--mustard); color:var(--ink); font-family:var(--font-mono); font-size:.64rem; letter-spacing:.05em; padding:5px 9px; border-radius:20px; min-height:0; min-width:0; } /* --- Sin resultados ------------------------------------------------ */ .catalog-empty{ max-width:52ch; margin:40px auto 0; padding:48px 32px; text-align:center; border-top:1px solid var(--line); } .catalog-empty h2{ font-family:var(--font-editorial); font-weight:400; font-size:1.7rem; margin:0 0 12px; color:var(--ink); } .catalog-empty p{color:var(--muted-ink);margin:0 0 26px;} .catalog-empty-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;} /* --- Paginación ------------------------------------------------------ */ .woocommerce-pagination{ margin:56px 0 0; border-top:1px solid var(--line); padding-top:24px; display:flex; gap:4px; justify-content:center; flex-wrap:wrap; } .woocommerce-pagination ul.page-nums{ display:flex; gap:4px; margin:0; padding:0; list-style:none; border:0; flex-wrap:wrap; justify-content:center; } .woocommerce-pagination ul.page-nums li{ border:0; margin:0; overflow:visible; } .woocommerce-pagination ul.page-nums li a, .woocommerce-pagination ul.page-nums li span{ display:inline-flex; align-items:center; justify-content:center; min-width:42px; height:42px; padding:0 12px; border:1px solid transparent; border-radius:var(--radius); font-family:var(--font-mono); font-size:.82rem; color:var(--muted-ink); text-decoration:none; transition:color var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out),background var(--dur-1) var(--ease-out); } .woocommerce-pagination ul.page-nums li a:hover{color:var(--ink);border-color:var(--line);} .woocommerce-pagination ul.page-nums li a:focus-visible{outline:2px solid var(--mustard-ink);outline-offset:2px;} .woocommerce-pagination ul.page-nums li span.current{ background:var(--ink); border-color:var(--ink); color:var(--paper); } .woocommerce-pagination ul.page-nums li span.dots{ border:0; color:var(--muted-ink); } /* --- Móvil ------------------------------------------------------------ Las columnas ya las resuelve el tema en 960px y 600px (dos y una respectivamente); aquí no se vuelven a declarar, porque dos reglas de columnas con cortes distintos se contradicen en cuanto una se queda sin actualizar. Solo se ajustan los espacios y la barra. */ @media (max-width:900px){ .woocommerce-products-header{padding:8px 20px 28px;} .catalog-eyebrow{padding:34px 20px 0;} .woocommerce-toolbar{padding:12px 20px;} .wc-wrap{padding-bottom:64px;} ul.products{gap:34px 20px !important;} .catalog-empty{padding:36px 20px;} } @media (max-width:600px){ /* El aire entre tarjetas crece al bajar a una columna: con una sola pieza por fila, un hueco de 34px se lee como un corte y el catálogo se parte en trozos en lugar de ser continuo. */ ul.products{gap:48px !important;} .maderia-cat-filter a{padding:12px 14px;} .woocommerce-toolbar{ flex-direction:column; align-items:flex-start; gap:10px; } .catalog-empty-actions{flex-direction:column;align-items:stretch;} } /* ========================================================== ESTILO BRUTALISTA ========================================================== Va al final a propósito, y no en su sitio junto a cada bloque, por dos razones. La primera es que estas reglas ganan a las anteriores sin tener que ir peleando una a una con la especificidad: el orden en la hoja es el desempate. Reescribir veinte reglas repartidas por 2.600 líneas para quitarles el relleno a las imágenes era más fácil de equivocar que dejarlas aquí y ganar siempre. La segunda es que esta capa es un commitment, no un parche. El resto del CSS describe cómo se ve el sitio; esto describe en qué dirección va. Si algún día se devuelve un estilo blando, se borra este bloque entero y el resto del sitio sigue funcionando sin tocar nada. Qué cambia y por qué: 1. Las imágenes no llevan fondo, ni marco, ni esquinas. Antes cada fotografía iba dentro de una caja con background, padding y border: un marco alrededor de la foto que no añadía nada y que leía como recorte. Ahora la foto ocupa su sitio y ya está. 2. El héroe separa texto e imagen. El titular va centrado sobre negro sólido y la fotografía va debajo, suelta. El contraste pasa a depender de dos colores en vez de una fotografía, así que ya no hace falta el velo. 3. Fuera sombras y degradados. Las sombras fingen altura y los degradados fingen luz; los dos cuentan cosas que aquí no existen. Se queda el borde, que sí dice dónde acaba un elemento. */ /* --- 1. Imágenes sin fondo, sin marco ------------------------- */ .maderia-card-media, .madera-lead-media, .madera-item-media, .tipo-e-media, .vs-card-media, .process-step-media, .compare-media{ background:none; padding:0; border:0; border-radius:0; box-shadow:none; overflow:visible; } .maderia-card-media img, .madera-lead-media img, .madera-item-media img, .tipo-e-media img, .vs-card-media img, .process-step-media img, .compare-media img{ width:100%; border:0; border-radius:0; box-shadow:none; background:none; object-fit:cover; } /* Cualquier que fuera marco por su cuenta: sin radio y sin borde. No se quita el width/height ni el aspect-ratio, que son los que reservan el hueco y evitan el salto. */ img{ border-radius:0; box-shadow:none; } .about-gallery-grid figure, .about-gallery-grid img, .contact-photo img, .about-hero-media img, .compare-media img{ border:0; border-radius:0; box-shadow:none; } .about-hero-media, .about-gallery-grid figure, .contact-photo{ background:none; padding:0; } .tipo-card.has-photo{padding:0;} /* Los data-mask recortan con clip-path, así que no dependen de un radio ni de un fondo para quedar rectos. */ [data-mask]{ border-radius:0; box-shadow:none; } /* --- 2. El héroe: solo tipografía ------------------------------- */ section.hero{ display:flex; align-items:center; position:relative; background:var(--black); /* La caja crece con el texto, no al revés. Con min-height:100svh el titular se centró en vertical y el bloque de las especies quedaba por debajo del corte en pantallas bajas; con un clamp() el héroe ocupa la primera pantalla sin empujar su propio contenido. */ min-height:calc(100svh - var(--topbar-h) - var(--header-h)); padding-top:calc(var(--topbar-h) + var(--header-h)); padding-bottom:clamp(40px,6vh,80px); overflow:hidden; color:var(--paper); } /* Una retícula de reglas finas por arriba y por abajo: es lo único que separa el héroe del contenido, y hace de marco sin caja ni fondo. */ section.hero::before, section.hero::after{ content:""; position:absolute; left:0; right:0; height:1px; background:rgba(250,248,245,.16); /* Por encima de la foto. Sin esto las dos reglas finas quedan debajo de .hero-media por orden de árbol y desaparecen mientras hay imagen; con la foto fuera no cambia nada. */ z-index:3; } section.hero::before{top:calc(var(--topbar-h) + var(--header-h));} section.hero::after{bottom:0;} /* El velo y la foto siguen apagados por defecto: el héroe es tipográfico y solo cambia cuando el cliente elige nogal en el configurador, que escribe data-hero-wood en . La regla de estado de abajo tiene más especificidad que ésta, así que gana solo cuando hay slug. */ .hero-media, .hero-scrim, .hero-photo{display:none;} /* --- La foto de nogal ------------------------------------------------- A sangre completa, por debajo del texto y por encima del fondo negro. .hero-grid ya está en z-index:2, así que el velo se queda en 1 y la foto en 0: el titular siempre se lee encima. La recorte la resuelve object-fit:cover; la posición es el centro por defecto. */ html[data-hero-wood="nogal-americano"] .hero-media{ display:block; position:absolute; inset:0; z-index:0; overflow:hidden; } /* es un contenedor intermedio sin estilo propio: sin darle alto, el img con height:100% resolvería contra una caja de alto automático y saldría a cero. */ html[data-hero-wood="nogal-americano"] .hero-media picture{ display:block; width:100%; height:100%; } html[data-hero-wood="nogal-americano"] .hero-photo{ display:block; width:100%; height:100%; object-fit:cover; object-position:center center; } html[data-hero-wood="nogal-americano"] .hero-scrim{ display:block; position:absolute; inset:0; z-index:1; /* Densidad al centro, donde está el texto; más leve en los bordes para que la madera se siga viendo. */ background: linear-gradient(180deg, rgba(13,10,8,.72) 0%, rgba(13,10,8,.46) 42%, rgba(13,10,8,.80) 100%), rgba(13,10,8,.34); } section.hero .hero-grid{ position:relative; z-index:2; width:100%; max-width:var(--maxw); margin:0 auto; padding:clamp(40px,6vh,80px) 28px; display:block; } /* Centrado de verdad: el bloque entero se centra y el texto se alinea al centro dentro de él. Antes era una rejilla con la columna 1 a la izquierda y una columna vacía a la derecha que empujaba todo hacia ese lado. Sin tope máximo: el titular va de lado a lado de la retícula. El párrafo no se estira porque mantiene su propia medida de 44ch (ver .hero-text más arriba), y los botones y las maderas siguen centrados por su cuenta. Bajar de 900px no cambia nada: .hero-copy ya daba el ancho completo ahí. */ .hero-copy{ grid-column:auto; max-width:none; min-width:0; margin:0 auto; text-align:center; } .hero-title{ margin-left:auto; margin-right:auto; } .hero-copy p{color:rgba(250,248,245,.86);} .hero-text{ margin-left:auto; margin-right:auto; } /* El antetítulo deja de ser una etiqueta pegada a la izquierda: centrada, y la raya del mostaza se convierte en una línea corta simétrica en lugar de un guion que apunta a nada. */ .hero-eyebrow{ justify-content:center; gap:12px; } .hero-eyebrow-mark{ width:28px; } /* Los botones en línea centrada, con el mismo ancho de columna que el texto para que no queden colgando. */ .hero-ctas{ justify-content:center; } /* Las dos maderas, centradas también. */ .hero-woods{ align-items:center; text-align:center; } .hero-woods-list{ justify-content:center; } /* --- 3. Fuera sombras y degradados ---------------------------- */ .btn, .button, input[type="submit"], .single_add_to_cart_button, .maderia-card, .tipo-card, .catalog-empty, .cat-card, .cta-final-inner, .site-header, .pw-panel, .pw-step, [data-mask], .maderia-card-media, .tipo-e-media{ box-shadow:none; } .btn:hover, .btn:focus-visible, .maderia-configure-btn.alt:hover, .maderia-configure-btn.alt:focus-visible{ box-shadow:none; } /* --- 4. Responsive ------------------------------------------- */ @media (max-width:900px){ .hero-copy{max-width:100%;} /* El héroe sigue siendo tipográfico en móvil: lo único que cambia es que el titular baja de escala para caber sin partirse. */ section.hero{ min-height:calc(100svh - var(--topbar-h) - var(--header-h)); } } @media (max-width:600px){ section.hero .hero-grid{padding:44px 20px 52px;} .hero-eyebrow{font-size:.66rem;letter-spacing:.14em;} } /* La banda "Cuatro piezas, cuatro escalas" la resuelve .section-tipos, que ya se alimenta de los productos reales. No duplicar aqui. */ /* ========================================================== 22. Ficha de producto normal y tarjetas de catálogo ========================================================== Estas reglas.readthedocs las que separan la ficha del resto: sin ellas el bloque de "Sobre esta pieza" se leía como un párrafo suelto encima de un fondo y las tarjetas del archivo se veían como una tabla. ========================================================== */ .maderia-ficha-info{ margin-top:34px; padding:30px 32px 28px; background:var(--wood-50,#faf7f2); border:1px solid var(--line,#e6ded2); border-radius:4px; } .maderia-ficha-info-title{ font-size:1.05rem; letter-spacing:.02em; text-transform:uppercase; color:var(--ink,#1d1a17); margin:0 0 14px; font-weight:700; } .maderia-ficha-info-text{ font-size:.96rem; line-height:1.75; color:var(--ink-soft,#4a443c); } .maderia-ficha-info-text p{ margin:0 0 12px; } .maderia-ficha-info-text p:last-child{ margin-bottom:0; } .maderia-ficha-info-text ul{ margin:0 0 12px; padding-left:20px; } .maderia-ficha-info-text li{ margin-bottom:6px; } .maderia-ficha-info-tags{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:20px 0 0; padding:0; } .maderia-ficha-info-tags a{ display:inline-block; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; font-weight:600; padding:7px 14px; border:1px solid var(--line,#e6ded2); border-radius:999px; color:var(--ink,#1d1a17); background:#fff; text-decoration:none; transition:background .2s,border-color .2s,color .2s; } .maderia-ficha-info-tags a:hover{ background:var(--ink,#1d1a17); border-color:var(--ink,#1d1a17); color:#fff; } .maderia-ficha-info-help{ margin:18px 0 0; padding-top:16px; border-top:1px solid var(--line,#e6ded2); font-size:.88rem; font-style:italic; color:var(--muted,#7a736a); } /* La ficha normal: la foto y la info conviven, y el bloque de descripción ocupa el ancho completo debajo para que no quede estrecho. */ .single-product div.product{ padding-bottom:10px; } .single-product div.product .images{ margin-bottom:8px; } .single-product div.product .summary{ padding-top:0; } .single-product div.product div.summary .product_meta{ display:none; } /* Tarjetas del archivo. WooCommerce pinta
        sin nada que las destaque: aquí ganan aire, borde y una sombra discreta. */ /* ------------------------------------------------------------------ Reinicios de WooCommerce que el diseño nuevo necesita. Este bloque estaba aquí desde la fase 1 y repetía el diseño entero de la tarjeta: la rejilla a 255px, el marco de la tarjeta, la foto a 4/3, el botón con margen a los lados y radio de 2px. Estaba aquí abajo, después del diseño nuevo, y su selector lleva la clase .woocommerce delante, así que ganaba por especificidad (.woocommerce ul.products es 0,1,1 y ul.products es 0,0,1). El resultado era una tarjeta con el marco del diseño viejo y el botón con los dos márgenes puestos a la vez, uno de cada lado. Aquí solo se dejan los reinicios que no son opinión de diseño —que WooCommerce flote las tarjetas y les ponga margen— y la regla de móvil. La rejilla, el marco, la foto y el botón viven en un solo sitio, en el bloque de catálogo de la fase 2. */ .woocommerce ul.products li.product{ width:auto!important; float:none!important; margin:0!important; clear:none!important; } /* Una pieza bajo pedido puede quedarse sin precio. Entonces el botón sube hasta el final de la tarjeta con margin-top:auto, para que las tarjetas con precio y sin precio cierren a la misma altura. */ .woocommerce ul.products li.product .button{margin-top:auto;} @media (max-width:600px){ .woocommerce ul.products{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:16px; } .maderia-ficha-info{ padding:24px 20px 22px; } } /* ========================================================== 23. Compra por categoría (portada) ========================================================== Tarjetas bajas, una línea de título y una de subcategorías. La idea es que entre el bloque entero en una pantalla sin obligar a seguir bajando, que es lo que pasaba con las secciones altas. ========================================================== */ .section-categorias{ padding:clamp(44px,6vw,76px) 0; background:var(--wood-50,#faf7f2); border-top:1px solid var(--line,#e6ded2); } .categoria-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; } .categoria-card{ display:flex; flex-direction:column; gap:6px; height:100%; padding:20px 18px 18px; background:#fff; border:1px solid var(--line,#e6ded2); border-radius:4px; text-decoration:none; color:inherit; transition:border-color .22s,box-shadow .22s,transform .22s; } .categoria-card:hover{ border-color:var(--mustard,#d8a13a); box-shadow:0 10px 26px rgba(29,26,23,.1); transform:translateY(-2px); } .categoria-card-icon{ display:block; height:34px; color:var(--mustard-dark,#a9781f); } .categoria-card-svg{ width:34px; height:34px; } .categoria-card-label{ font-size:.98rem; font-weight:700; line-height:1.3; color:var(--ink,#1d1a17); } .categoria-card-hijos{ font-size:.78rem; line-height:1.5; color:var(--muted,#7a736a); } .categoria-card-badge{ align-self:flex-start; margin-top:auto; font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700; padding:4px 9px; border-radius:999px; background:rgba(168,120,31,.12); color:var(--mustard-dark,#a9781f); } @media (max-width:980px){ .categoria-grid{grid-template-columns:repeat(3,1fr);} } @media (max-width:680px){ .categoria-grid{grid-template-columns:repeat(2,1fr);gap:10px;} .categoria-card{padding:16px 14px 14px;} .categoria-card-icon,.categoria-card-svg{height:28px;width:28px;} .categoria-card-label{font-size:.9rem;} }