/* * Ajustes propios sobre el CSS real de Elementor (descargado tal cual de * muchachostudio.com en css/vendor/). Ver notas-clonado.md — "Rehecho con * CSS real de Elementor (sesión 5)". */ /* El scroll-reveal real se reimplementa en js/motion-fx-lite.js (quita .elementor-invisible cuando el elemento entra en viewport). Red de seguridad por si JS falla: que no se quede invisible para siempre. */ .elementor-invisible { transition: visibility 0s linear 4s; } /* Sin data-elementor-device-mode, algunos estilos responsive de Elementor (que dependen de ese atributo en ) no se activan solos. */ body { background-color: var(--e-global-color-primary, #353637); } /* Menú móvil CERRADO — desbordamiento horizontal real en Safari/iPhone. El CSS real de Elementor pone position:absolute en el desplegable móvil (.elementor-nav-menu--stretch .elementor-nav-menu--dropdown) pero nunca dice a qué lado pegarse (ni left ni right). Sin eso, el navegador lo coloca en su "posición estática" — justo donde caería en el flujo normal, pegado al botón hamburguesa, que está en el extremo derecho — y desde ahí se extiende hacia la derecha su ancho natural (~164px en esta plantilla), saliéndose de la pantalla. Al estar colapsado a altura 0 (así lo cierra Elementor) no se ve, pero el ancho cuenta igual para el overflow horizontal de la página — confirmado con el inspector de Safari en un iPhone real (Safari sí lo tiene en cuenta para el "pinch zoom"/scroll horizontal; en Chrome de escritorio no se reproduce igual, por eso costó tanto encontrarlo). Basta con fijar el lado al que se pega para que dej de salirse. */ .elementor-nav-menu--stretch .elementor-nav-menu__container.elementor-nav-menu--dropdown { right: 0; } /* Selector de idioma del menú real: el hover por sí solo no revela el submenú con el CSS que tenemos descargado (posiblemente Elementor lo hace vía JS de su motor completo, que no cargamos). Se abre con clic, ver js/lang-switcher.js — esta regla solo controla mostrar/ocultar. */ .pll-parent-menu-item .sub-menu { display: none; } .pll-parent-menu-item.lang-switcher-open .sub-menu { display: block; } /* Chevron junto a "Español ▾" etc. — el sitio real no lo pinta con el CSS que tenemos descargado (icono inyectado por el motor JS completo de Elementor, que no cargamos), así que se añade a mano como texto. Gira al abrir para dar feedback de que es un desplegable. */ .lang-caret { display: inline-block; font-size: 0.7em; margin-left: 2px; transition: transform var(--transition-interactive, 0.2s ease); } .pll-parent-menu-item.lang-switcher-open .lang-caret { transform: rotate(180deg); } /* Desplegable "Catálogo" del menú (Colección Stanley/Stella / Otros) — mismo mecanismo que el selector de idioma de arriba (clic para abrir, ver js/lang-switcher.js). */ .catalog-parent-menu-item .sub-menu { display: none; } .catalog-parent-menu-item.catalog-switcher-open .sub-menu { display: block; } .catalog-parent-menu-item.catalog-switcher-open .lang-caret { transform: rotate(180deg); } /* El desplegable real de Elementor viene a 12em fijos (pensado para "Español"/"Català"/"English") — "Colección Stanley/Stella" no cabe ahí y se corta. Más ancho solo para este desplegable en concreto. */ .catalog-parent-menu-item .sub-menu.elementor-nav-menu--dropdown { width: max-content; min-width: 12em; max-width: 260px; } /* Mensaje inline del formulario de newsletter del pie (Mailchimp por JSONP, ver js/lang-switcher.js) — insertado por JS justo después del

, para que el "gracias por suscribirte" salga en la propia web en vez de abrir la página de confirmación de Mailchimp en pestaña nueva. */ .mc-response { margin-top: 10px; font-family: var(--e-global-typography-text-font-family, "Jost"), sans-serif; font-size: 14px; color: var(--e-global-color-secondary, #f2eee3); } .mc-response--ok { color: var(--e-global-color-accent, #ea6942); } .mc-response--error { color: #e07a6b; } /* Red de seguridad contra desbordamiento horizontal en móvil (Safari de iPhone deja "hacer zoom out" y ver de más si algo se pasa del ancho de pantalla — una tabla ancha, un carrusel, etc. — y eso deja huecos raros en cualquier elemento position:fixed a ancho completo, como el menú hamburguesa). SOLO en , no en : puesto solo en body no llega a recortar el viewport de verdad en Safari (el hueco seguía). Puesto en los DOS a la vez, el navegador convierte el overflow-y de ambos en "auto" y, sin una altura fija en ninguno de los dos, deja de haber un contenedor que dispare el scroll — se rompía el scroll en desktop. Con SOLO html, es html quien manda en el recorte del viewport (deja de aplicar la regla "si el html no dice nada, usa el overflow del body") y body se queda sin overflow propio, así que no compite por el scroll. */ html { overflow-x: hidden; max-width: 100%; } /* Tabla de tallas y cantidad de las fichas de producto (antes , ahora una fila flexible de "tarjetas" tamaño+input — mismo aspecto visual que la tabla real, ver notas-clonado.md). Se quitó la etiqueta de fila "Cantidad"/"Quantitat"/"Quantity" por redundante (ya está en el título "2 Tallas y cantidad" de la sección). En escritorio, una sola fila (flex, sin wrap) con todas las tallas. En móvil, pasa a grid con tantas columnas como --pp-mobile-cols diga cada ficha (fijado en build_size_grid — la mitad redondeando hacia arriba: 8 tallas -> 4 cols -> 4+4, 6 -> 3 -> 3+3, 5 -> 3 -> 3+2), así siempre queda en 2 filas repartidas lo más igual posible, nunca una fila casi vacía. */ .pp-sizegrid { display: flex; gap: 8px; } .pp-sizecell { flex: 1 1 0; min-width: 0; text-align: center; padding: 9px 4px; border: 1px solid rgba(53, 54, 55, 0.15); border-radius: 4px; } .pp-sizecell label { display: block; font-family: "Jost", sans-serif; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; color: var(--e-global-color-primary, #353637); margin-bottom: 6px; } .pp-sizecell .qty-input { width: 100%; max-width: 52px; text-align: center; font-family: ui-monospace, monospace; font-size: 13px; border: 1px solid rgba(53, 54, 55, 0.2); border-radius: 4px; padding: 5px 2px; background: #fff; color: var(--e-global-color-primary, #353637); } @media (max-width: 860px) { .pp-sizegrid { display: grid; grid-template-columns: repeat(var(--pp-mobile-cols, 4), 1fr); gap: 8px; } } /* Aviso de cookies — antes solo estaba metido (HTML + js/cookie-banner.js) en 4 páginas legales (privacidad/cookies/términos + una vieja de catálogo), así que casi nadie lo veía nunca al no aterrizar ahí. Se añade el HTML+script en el resto de plantillas del sitio (home y páginas principales, catálogo, contacto, fichas de producto) para que salga de verdad la primera vez que alguien visita cualquier página. Este CSS es el mismo de css/legal-real.css pero con los botones escopados a ".cookie-banner .btn" en vez de ".btn" a secas, para no pisar cualquier ".btn" que ya exista en el resto del sitio. */ .cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 999; background: var(--e-global-color-primary, #353637); border-top: 1px solid rgba(242, 238, 227, 0.15); padding: 20px; } .cookie-banner__inner { max-width: 640px; margin: 0 auto; position: relative; color: var(--e-global-color-text, #f2eee3); } .cookie-banner__close { position: absolute; top: 0; right: 0; background: none; border: none; color: var(--e-global-color-text, #f2eee3); font-size: 22px; line-height: 1; cursor: pointer; } .cookie-banner h3 { margin: 0 0 8px; font-size: 20px; color: var(--e-global-color-text, #f2eee3); } .cookie-banner__actions { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; } .cookie-banner__links { display: flex; gap: 16px; margin-top: 12px; flex-wrap: wrap; font-size: 13px; } .cookie-banner__links a { color: var(--e-global-color-text, #f2eee3); opacity: 0.7; } .cookie-banner .btn { display: inline-block; background-color: var(--e-global-color-accent, #ea6942); color: #fff; border: 1px solid var(--e-global-color-accent, #ea6942); border-radius: 6px; padding: 10px 24px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; } .cookie-banner .btn:hover, .cookie-banner .btn:focus { background-color: transparent; color: var(--e-global-color-accent, #ea6942); } .cookie-banner .btn-outline { background-color: transparent; color: var(--e-global-color-text, #f2eee3); } .cookie-banner .btn-outline:hover, .cookie-banner .btn-outline:focus { background-color: var(--e-global-color-text, #f2eee3); color: #1a1a1a; } .cookie-banner__close:hover, .cookie-banner__close:focus { background: none; color: var(--e-global-color-accent, #ea6942); } /* Arreglo de raíz para un bug que se ha ido parcheando suelto varias veces en esta sesión: el kit real de Elementor (kit-572.css) le pone a TODO del sitio un font-size/line-height/letter-spacing fijo (var(--e-global-typography-text-font-size), 20px escritorio / 14px móvil) sin importar dónde esté el enlace — un enlace suelto en medio de un párrafo (FAQ, "escríbenos a hola@...", "política de privacidad"...) se veía más grande o más pequeño que el texto que lo rodea. En la Elementor real esto se compensa widget a widget con CSS específico que aquí no tenemos; en vez de seguir añadiendo `font-size:inherit` enlace a enlace, se pone aquí como comportamiento por defecto para cualquier del sitio. Esta regla carga DESPUÉS de kit-572.css en todas las páginas, así que con la misma especificidad (una clase) gana por orden de cascada. Los botones ya diseñados a propósito (menú, "Solicitar presupuesto", tarjetas, .btn, etc.) siguen intactos porque sus propias reglas usan selectores más específicos (2+ clases) que ganan siempre, pase lo que pase con el orden de carga. */ .elementor-kit-572 a { font-size: inherit; line-height: inherit; letter-spacing: inherit; font-family: inherit; }