/* Maquiproyect WooCommerce — estilos scoped exclusivamente a WooCommerce. No se usan selectores globales (button{}, a{}, h1{}...): todo cuelga de .mq-woo, .mq-* o de las clases nativas de WooCommerce (woocommerce, single-product, products, etc.) para no afectar a Home/Header/Footer. */ .woocommerce, .mq-woo { /* Tokens capturados del sitio real (ver DESIGN.md "Maquiproyect — WooCommerce"): --ast-global-color-0 es el naranja de marca que ya configura Astra (WooCommerce > Personalizar o Apariencia > Personalizar); si el cliente lo cambia algún día, este módulo lo sigue automáticamente en vez de quedarse con un naranja inventado. */ --mq-ink: #1a1a1a; --mq-ink-soft: #5a5a5a; --mq-bg: #ffffff; --mq-bg-soft: #f4f8fd; --mq-border: #e2e6ea; --mq-accent: var(--ast-global-color-0, #ff5e14); --mq-accent-2: var(--ast-global-color-8, #ff702d); --mq-accent-ink: #ffffff; --mq-whatsapp: #1fa855; --mq-whatsapp-ink: #ffffff; --mq-radius: 8px; --mq-font: 'Montserrat', sans-serif; font-family: var(--mq-font); } /* Todo este módulo es mobile-first: las reglas base están pensadas para pantallas pequeñas y se amplían con min-width. Cualquier componente nuevo (hero, accesos rápidos, barra de filtros, banner) debe apilarse en una sola columna en móvil/tablet y no depender del ratón (hover) para funcionar: siempre hay un estado accesible por toque/teclado. */ /* ---------- Botones ---------- */ .mq-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; padding: .75em 1.25em; border-radius: var(--mq-radius); border: 1px solid transparent; font-weight: 600; font-size: .95rem; text-decoration: none; line-height: 1.2; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, transform .05s ease; } .mq-btn:active { transform: translateY(1px); } /* !important + display:block por el mismo motivo que el resto de iconos de este archivo (ver .mq-rental-search__icon svg): sin forzarlo, algunos navegadores moviles pueden calcular un tamano "auto" mucho mayor para un sin width/height propios y romper la forma del boton. */ .mq-btn svg { width: 1.05em !important; height: 1.05em !important; flex: 0 0 auto; display: block; } .mq-btn { overflow: hidden; } .mq-btn--primary { background: var(--mq-ink); color: #fff; } .mq-btn--primary:hover { background: #000; color: #fff; } .mq-btn--outline { background: transparent; border-color: var(--mq-border); color: var(--mq-ink); } .mq-btn--outline:hover { border-color: var(--mq-ink); color: var(--mq-ink); } /* WhatsApp ya no se distingue por color (verde): todo el sitio usa un unico acento naranja de marca y el icono de WhatsApp aporta la afordancia. Ver DESIGN.md — decisión explícita del cliente (13/08/2026). */ .mq-btn--whatsapp { background: var(--mq-accent); color: var(--mq-accent-ink); } .mq-btn--whatsapp:hover { background: var(--mq-accent-2); color: var(--mq-accent-ink); } .mq-btn--large { padding: 1em 1.5em; font-size: 1.05rem; width: 100%; } .mq-btn--block { width: 100%; } /* ---------- Landing de tienda (grid de 5 categorias) ---------- */ .mq-landing-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 0 0 32px; } @media (min-width: 600px) { .mq-landing-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .mq-landing-grid { grid-template-columns: repeat(3, 1fr); } } .mq-landing-card { display: flex; flex-direction: column; border: 1px solid var(--mq-border); border-radius: var(--mq-radius); overflow: hidden; text-decoration: none; color: var(--mq-ink); background: var(--mq-bg); transition: border-color .15s ease, box-shadow .15s ease; min-height: 44px; } .mq-landing-card:hover, .mq-landing-card:focus-visible { border-color: var(--mq-ink); box-shadow: 0 2px 10px rgba(0,0,0,.08); } .mq-landing-card__media { height: 160px; background-color: var(--mq-bg-soft); background-size: cover; background-position: center; } .mq-landing-card__body { padding: 16px; display: flex; flex-direction: column; gap: 6px; } .mq-landing-card__title { font-size: 1.1rem; font-weight: 700; color: var(--mq-ink); } .mq-landing-card__text { font-size: .9rem; color: var(--mq-ink-soft); } .mq-landing-card__count { font-size: .78rem; color: var(--mq-ink-soft); text-transform: uppercase; letter-spacing: .04em; } .mq-landing-card__cta { margin-top: 8px; font-weight: 700; color: var(--mq-accent); } /* ---------- Hero de alquiler ---------- */ /* Buscador + accesos rápidos a la izquierda, fotos reales del catálogo a la derecha (composición asimétrica, dial "variance" moderado). El H1 y la descripción de categoría los pinta WooCommerce/Astra de forma nativa justo antes de este bloque: aquí NUNCA se repite un

ni un subtítulo propio para no duplicar el encabezado. */ .mq-rental-hero { margin: 0 0 28px; padding: 0; border-bottom: none; } /* Segundo tono del H1 nativo ("Alquiler" ya viene coloreado en acento por el propio tema): el sufijo "de maquinaria" se aniade via PHP (mq_woo_rental_page_title) solo en esta categoria, en el color de texto principal para el efecto de titular en dos tonos del mockup aprobado. */ .woocommerce-products-header__title.page-title .mq-rental-hero__title-suffix, h1.page-title .mq-rental-hero__title-suffix { color: var(--mq-ink); } body.term-alquiler .woocommerce-products-header__title.page-title, body.term-alquiler h1.page-title { margin-bottom: .3em; } body.term-alquiler .term-description { max-width: 56ch; margin-top: 0; } .mq-rental-hero__grid { display: block; padding: 20px 0 28px; border-bottom: 1px solid var(--mq-border); } .mq-rental-hero__main { max-width: 640px; } /* Buscador como una unica tarjeta (input + boton dentro del mismo contenedor con sombra), en vez de una caja de texto y un boton sueltos uno junto al otro — asi se lee como un solo componente, no dos. */ .mq-rental-search { display: flex; gap: 0; align-items: stretch; max-width: 640px; position: relative; background: var(--mq-bg); border: 1px solid var(--mq-border); border-radius: 999px; box-shadow: 0 6px 18px rgba(26,26,26,.06); overflow: hidden; } .mq-rental-search__icon { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--mq-ink-soft); pointer-events: none; /* overflow:hidden es una red de seguridad: si el interno llegara a calcular un tamano mayor (ver regla .mq-rental-search__icon svg mas abajo — algunos navegadores moviles, sobre todo Safari/iOS, resuelven el tamano "auto" de un sin width/height propios de forma distinta a Chrome de escritorio y pueden ampliarlo al tamano por defecto del user agent en vez de encogerlo al viewBox), queda recortado a este contenedor de 18x18 en vez de invadir la pagina. */ overflow: hidden; } /* Tamano del SVG forzado de forma explicita (no solo en el contenedor): sin esto, un sin atributos width/height propios puede calcular su tamano "auto" de forma distinta segun el navegador — en movil (sobre todo Safari/iOS) hemos visto el icono de la lupa ocupando cientos de pixeles en vez de los 18px esperados, rompiendo todo el layout del buscador. Verificado y corregido el 14/08/2026. */ .mq-rental-search__icon svg { width: 18px !important; height: 18px !important; display: block; } .mq-rental-search__input { flex: 1 1 auto; padding: .95em 1em .95em 3rem; /* Astra/WooCommerce aplican su propio reset a input[type=search] con mayor especificidad, que pisaba solo el padding-left (48px -> 16px) y dejaba el icono de la lupa encima del texto de ejemplo. Mismo patron de bug que .mq-filter-select (mas abajo en este archivo): forzamos aqui el valor real con !important. Verificado en vivo el 14/08/2026. */ padding-left: 3rem !important; border: none; border-radius: 0; font-size: .95rem; min-height: 48px; width: 100%; background: transparent; } .mq-rental-search__input:focus-visible { outline: none; } .mq-rental-search:focus-within { border-color: var(--mq-accent); box-shadow: 0 6px 18px rgba(255,94,20,.12); } .mq-rental-search .mq-btn { flex: 0 0 auto; border-radius: 0; padding: .95em 1.6em; min-height: 48px; } /* ------------------------------------------------------------------ */ /* Feedback de carga: barra superior + spinner en botones. */ /* Nada de librerias externas (nprogress, etc.) para no anadir peso; */ /* es CSS/JS propio, minimo, que se activa/desactiva solo mientras dura */ /* la accion real (navegacion, peticion AJAX o construccion del enlace */ /* de WhatsApp). Ver mqProgress en mq-woo.js. */ /* ------------------------------------------------------------------ */ #mq-progress-bar { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: linear-gradient(90deg, var(--mq-accent), #ffb37a); box-shadow: 0 0 8px rgba(255,94,20,.55); /* Por encima incluso del popup de reserva (z-index 999999), para que se */ /* vea tanto en navegaciones de pagina completa como con un modal abierto. */ z-index: 1000001; opacity: 0; transition: width .25s ease, opacity .3s ease .15s; pointer-events: none; } #mq-progress-bar.is-active { opacity: 1; transition: width .25s ease, opacity .15s ease; } .mq-btn.is-loading { position: relative; color: transparent !important; pointer-events: none; } .mq-btn.is-loading svg { visibility: hidden; } .mq-btn.is-loading::after { content: ''; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border: 2px solid rgba(255,255,255,.5); border-top-color: #fff; border-radius: 50%; animation: mq-spin .6s linear infinite; } .mq-btn--outline.is-loading::after { border-color: rgba(26,26,26,.2); border-top-color: var(--mq-ink); } @keyframes mq-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { #mq-progress-bar { transition: none; } .mq-btn.is-loading::after { animation-duration: 1.1s; } } /* El boton "Buscar" NUNCA cambia de border-radius entre escritorio y movil (se queda siempre en 0, igual que en la regla base de .mq-rental-search .mq-btn mas arriba): el cliente pidio expresamente que todos los botones mantengan la misma forma en cualquier dispositivo. En movil el propio contenedor .mq-rental-search pasa a apilarse en columna y su border-radius + overflow:hidden ya redondean visualmente la esquina inferior del boton por recorte, sin necesidad de fijarle un border-radius distinto al de escritorio. */ @media (max-width: 480px) { .mq-rental-search { flex-direction: column; align-items: stretch; border-radius: var(--mq-radius); } } /* Accesos rápidos: chips con icono, envuelven en varias filas en móvil sin scroll horizontal oculto (todo el contenido queda visible y alcanzable por toque). */ .mq-quick-access { margin-top: 18px; } .mq-quick-access__label { display: block; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--mq-ink-soft); margin-bottom: 10px; } .mq-quick-access__row { display: flex; flex-wrap: wrap; gap: 8px; } .mq-quick-access__item { display: inline-flex; align-items: center; gap: 7px; padding: .55em 1em .55em .75em; border: 1px solid var(--mq-border); border-radius: 999px; font-size: .85rem; color: var(--mq-ink); text-decoration: none; background: var(--mq-bg); min-height: 40px; transition: border-color .15s ease, background-color .15s ease, color .15s ease; } .mq-quick-access__item:hover, .mq-quick-access__item:focus-visible { border-color: var(--mq-accent); color: var(--mq-accent); } .mq-quick-access__item.is-active { background: var(--mq-accent); border-color: var(--mq-accent); color: var(--mq-accent-ink); } .mq-quick-access__item.is-active .mq-quick-access__icon { color: inherit; } .mq-quick-access__item--clear { border-style: dashed; color: var(--mq-ink-soft); } .mq-quick-access__icon { width: 16px; height: 16px; color: var(--mq-accent); flex: 0 0 auto; overflow: hidden; } /* Mismo motivo que .mq-rental-search__icon svg (mas arriba): tamano del SVG forzado de forma explicita para que nunca dependa del calculo "auto" del navegador, que en movil puede dispararse muy por encima del icono 16x16 esperado. */ .mq-quick-access__icon svg { width: 16px !important; height: 16px !important; display: block; } @media (max-width: 480px) { .mq-quick-access__row { gap: 6px; } .mq-quick-access__item { font-size: .8rem; padding: .5em .85em .5em .65em; } } .mq-chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .mq-chip { display: inline-flex; align-items: center; padding: .5em 1em; min-height: 40px; border: 1px solid var(--mq-border); border-radius: 999px; font-size: .88rem; color: var(--mq-ink); text-decoration: none; background: var(--mq-bg); } .mq-chip.is-active { background: var(--mq-ink); color: #fff; border-color: var(--mq-ink); } .mq-chip--static { cursor: default; } /* ---------- Barra de resultados + filtros (Alquiler) ---------- */ /* En escritorio: contador+pills a la izquierda, selects+orden a la derecha, todo en una fila. En tablet se apila en dos bloques; en móvil cada grupo pasa a ocupar el ancho completo y los selects se listan en una columna para que sigan siendo cómodos con el dedo (min-height 44px en todos los controles). */ .mq-filter-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 20px; padding-bottom: 16px; border-bottom: 1px solid var(--mq-border); } .mq-filter-bar__left { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .mq-filter-bar__count { font-size: .85rem; color: var(--mq-ink-soft); margin-right: 4px; } .mq-filter-pill { display: inline-flex; align-items: center; gap: 4px; padding: .4em .9em; min-height: 32px; border: 1px solid var(--mq-border); border-radius: 999px; font-size: .82rem; color: var(--mq-ink); text-decoration: none; background: var(--mq-bg-soft); } .mq-filter-pill--static { background: var(--mq-ink); color: #fff; border-color: var(--mq-ink); cursor: default; } .mq-filter-pill--toggle.is-active { background: rgba(255, 94, 20, .1); border-color: var(--mq-accent); color: var(--mq-accent); } .mq-filter-pill--toggle:hover { border-color: var(--mq-accent); } .mq-filter-bar__clear { font-size: .82rem; color: var(--mq-ink-soft); text-decoration: underline; padding: .4em 0; } .mq-filter-bar__right { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .mq-filter-select-form { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; } .mq-filter-select, .mq-filter-bar__right .woocommerce-ordering select { /* Astra/WooCommerce traen un reset global de formularios que pone select{display:block;width:100%}; sin ganar esa especificidad aqui, cada

/

/