/* ============================================================= AspiradoraLab — styles.css 1. Tokens 2. Reset 3. Utilities 4. Typography 5. Components 6. Sections 7. Ficha 8. Comparador 9. Recomendador 10. Responsive 11. Reduced motion ============================================================= */ /* ============================================================= 1. Tokens ============================================================= */ :root { --bg: #f7f5f1; --bg-alt: #efece5; --surface: #ffffff; --surface-2: #fbfaf7; --border: #e3ded3; --border-strong: #cfc7b4; --ink: #14201f; --ink-soft: #4c5957; --ink-faint: #7b8785; --accent: #0f9e94; --accent-ink: #ffffff; --accent-soft: #e3f5f2; --accent-dark: #0c6f68; --gold: #d98c1f; --gold-soft: #fbeed9; --danger: #c4432f; --danger-soft: #fbe6e1; --ok: #2f8f5b; --radius-s: 8px; --radius-m: 14px; --radius-l: 22px; --radius-xl: 32px; --shadow-s: 0 1px 2px rgba(20,32,31,.06), 0 1px 1px rgba(20,32,31,.04); --shadow-m: 0 6px 20px rgba(20,32,31,.08), 0 2px 6px rgba(20,32,31,.05); --shadow-l: 0 20px 50px rgba(20,32,31,.14), 0 6px 16px rgba(20,32,31,.08); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --display: "Space Grotesk", var(--sans); --container: 1240px; --header-h: 76px; /* Capas (z-index): una sola escala para todo lo flotante, de abajo arriba. contenido (auto / 2 local) < resultados del buscador (60, local al hero) < header sticky (400) < aviso flotante del comparador (900, inline en main.js) < banner de cookies (950) < menú móvil (1000) < skip-link (1100) El menú móvil va POR ENCIMA del banner de cookies: es una capa opaca a pantalla completa que el usuario abre a propósito; mientras está abierto el banner no puede tapar sus enlaces, y al cerrarlo el banner reaparece. (Antes: menú 450 < banner 950 → en 375×667 el banner bloqueaba "Comparador", "Guías" e "Ir al comparador".) */ --z-header: 400; --z-banner: 950; --z-menu: 1000; --z-skip: 1100; } [data-theme="dark"] { --bg: #0c1413; --bg-alt: #10201d; --surface: #122120; --surface-2: #16302c; --border: #1f3a36; --border-strong: #3d635a; --ink: #eef7f4; --ink-soft: #b7c9c5; --ink-faint: #7f9791; --accent: #2fd6c6; --accent-ink: #06201d; --accent-soft: rgba(47,214,198,.14); --accent-dark: #1fb3a5; --gold: #f0ac3f; --gold-soft: rgba(240,172,63,.14); --danger-soft: rgba(196,67,47,.18); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0c1413; --bg-alt: #10201d; --surface: #122120; --surface-2: #16302c; --border: #1f3a36; --border-strong: #3d635a; --ink: #eef7f4; --ink-soft: #b7c9c5; --ink-faint: #7f9791; --accent: #2fd6c6; --accent-ink: #06201d; --accent-soft: rgba(47,214,198,.14); --accent-dark: #1fb3a5; --gold: #f0ac3f; --gold-soft: rgba(240,172,63,.14); --danger-soft: rgba(196,67,47,.18); } } /* ============================================================= 2. Reset ============================================================= */ *, *::before, *::after { box-sizing: border-box; margin: 0; } html { -webkit-text-size-adjust: 100%; tab-size: 2; overflow-x: clip; scroll-behavior: smooth; } body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; overscroll-behavior-y: none; } img, svg, video { display: block; max-width: 100%; } img { height: auto; } button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; } a { color: inherit; text-decoration: none; } input, select, textarea { font: inherit; color: inherit; } p { text-wrap: pretty; } h1, h2, h3, h4 { font-family: var(--display); text-wrap: balance; line-height: 1.08; letter-spacing: -0.01em; font-weight: 600; } ul, ol { padding: 0; list-style: none; } table { border-collapse: collapse; width: 100%; } ::selection { background: var(--accent); color: var(--accent-ink); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } .skip-link { position: fixed; top: -100px; left: 1rem; z-index: var(--z-skip); padding: .7rem 1.1rem; background: var(--ink); color: var(--bg); border-radius: var(--radius-s); font-weight: 600; } .skip-link:focus { top: 1rem; } /* ============================================================= 3. Utilities ============================================================= */ .container { max-width: var(--container); margin-inline: auto; padding-inline: 1.25rem; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .stack { display: flex; flex-direction: column; } .section { padding-block: clamp(3rem, 6vw, 5.5rem); } .section-head { max-width: 640px; margin-bottom: 2.2rem; } .section-head .eyebrow { margin-bottom: .6rem; } .section-head h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); margin-bottom: .6rem; } .section-head p { color: var(--ink-soft); font-size: 1.05rem; } .section-foot { display: flex; justify-content: center; margin-top: 2.4rem; } .eyebrow { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-dark); } .grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.3rem; } @media (max-width: 719.98px) { .hide-mobile { display: none !important; } } @media (min-width: 960px) { .hide-desktop { display: none !important; } } .divider { height: 1px; background: var(--border); border: 0; margin-block: 2rem; } /* ============================================================= 4. Typography ============================================================= */ .h1-hero { font-size: clamp(2.3rem, 5vw, 3.6rem); max-width: 16ch; } .lead { font-size: 1.15rem; color: var(--ink-soft); max-width: 52ch; } /* ============================================================= 5. Components ============================================================= */ /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .85rem 1.4rem; border-radius: 999px; font-weight: 700; font-size: .96rem; transition: transform .2s var(--ease-out), background .2s var(--ease-out), box-shadow .2s var(--ease-out), color .2s var(--ease-out); white-space: nowrap; } /* Fondo en --accent-dark (no --accent): el texto blanco sobre --accent quedaba en ~3.3:1, por debajo del mínimo AA (4.5:1) para texto normal. --accent-dark sube ese contraste a ~6:1 sin cambiar el tono de marca. */ .btn-primary { background: var(--accent-dark); color: var(--accent-ink); box-shadow: var(--shadow-s); } .btn-primary:hover { background: color-mix(in srgb, var(--accent-dark) 82%, black); box-shadow: var(--shadow-m); transform: translateY(-1px); } .btn-secondary { background: var(--surface); color: var(--ink); border: 1px solid var(--border); } .btn-secondary:hover { border-color: var(--accent); color: var(--accent-dark); } .btn-ghost { background: transparent; color: var(--ink); border: 1px solid transparent; } .btn-ghost:hover { background: var(--accent-soft); color: var(--accent-dark); } .btn-gold { background: var(--gold); color: #241800; } .btn-gold:hover { filter: brightness(1.06); transform: translateY(-1px); } .btn-block { width: 100%; } .btn-sm { padding: .55rem 1rem; font-size: .85rem; } .btn[disabled], .btn.is-disabled { opacity: .55; pointer-events: none; /* El texto "No disponible en Amazon.es ahora mismo" es más largo que el resto de CTA; en una tarjeta con columna estrecha puede superar el ancho de la tarjeta incluso ya en su propia línea. Al no ser un enlace real (pointer-events:none), dejarlo envolver en 2 líneas es seguro y evita ese desbordamiento sin tocar el texto ni el tamaño. */ white-space: normal; text-align: center; line-height: 1.25; } .btn-icon { width: 1.05em; height: 1.05em; flex: none; } /* Header / nav */ .site-header { position: sticky; top: 0; z-index: var(--z-header); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } .site-header .container { display: flex; align-items: center; gap: 1.2rem; height: var(--header-h); } .brand { display: flex; align-items: center; gap: .55rem; font-family: var(--display); font-weight: 700; font-size: 1.2rem; flex: none; } /* El favicon.svg trae su propio cuadrado de fondo oscuro (#0d1a20); en modo oscuro el header usa prácticamente el mismo tono de fondo, así que el contorno se funde y solo se distingue el círculo turquesa interior. Un anillo de 1px casi blanco (box-shadow, sigue el radio del propio icono y no reserva espacio en el layout) separa el perímetro del fondo sin tocar el SVG ni el tamaño del logo. En modo claro es prácticamente invisible sobre el fondo claro del header, así que no cambia nada ahí. */ .brand-mark { width: 34px; height: 34px; display: grid; place-items: center; flex: none; border-radius: 7px; box-shadow: 0 0 0 1px rgba(255,255,255,.22); } .brand-mark img { width: 100%; height: 100%; display: block; } .nav-links { display: none; align-items: center; gap: 1.6rem; font-weight: 600; font-size: .94rem; } .nav-links a { color: var(--ink-soft); transition: color .2s var(--ease-out); } .nav-links a:hover, .nav-links a.is-active { color: var(--ink); } /* Enlace con algo más de peso que el resto (p.ej. "Encuentra tu aspiradora"), pero sin fondo ni forma de píldora: eso lo reservamos para CTAs reales (.btn, .compare-pill, .nav-cta) para no competir visualmente con ellos. */ .nav-links a.nav-lead, .mobile-menu nav a.nav-lead { color: var(--accent-dark); font-weight: 700; } @media (min-width: 960px) { .nav-links { display: flex; } } .nav-actions { display: flex; align-items: center; gap: .6rem; margin-left: auto; } .nav-cta { display: inline-flex; } .nav-links a.nav-cta, .nav-links a.nav-cta:hover { color: var(--accent-ink); background: var(--accent); padding: .55rem 1.1rem; border-radius: 999px; } .compare-pill { position: relative; display: inline-flex; align-items: center; gap: .4rem; padding: .55rem 1rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-weight: 700; font-size: .88rem; } .compare-pill .count { min-width: 20px; height: 20px; padding-inline: .3rem; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: .74rem; display: grid; place-items: center; } .nav-toggle { display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--radius-s); } .nav-toggle svg { width: 22px; height: 22px; } @media (min-width: 960px) { .nav-toggle { display: none; } } .mobile-menu { position: fixed; inset: 0; z-index: var(--z-menu); background: var(--bg); overflow-y: auto; /* si el menú es más alto que la pantalla (móvil horizontal), se desplaza él mismo */ padding: 1.25rem; display: flex; flex-direction: column; gap: 1.4rem; transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity .22s var(--ease-out), transform .22s var(--ease-out); } .mobile-menu.is-open { opacity: 1; pointer-events: auto; transform: none; } .mobile-menu-head { display: flex; align-items: center; justify-content: space-between; } .mobile-menu nav { display: flex; flex-direction: column; gap: .2rem; } .mobile-menu nav a { padding: .9rem .2rem; font-size: 1.15rem; font-weight: 600; border-bottom: 1px solid var(--border); } /* Cards */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-l); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-s); transition: box-shadow .25s var(--ease-out), transform .25s var(--ease-out), border-color .25s var(--ease-out); } .card:hover { box-shadow: var(--shadow-m); transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); } .product-card { position: relative; } .product-card .thumb { aspect-ratio: 4/3; background: var(--bg-alt); position: relative; overflow: hidden; } .product-card .thumb img { width: 100%; height: 100%; object-fit: contain; padding: 1rem; } .product-card .body { padding: 1.15rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; } .product-card .kind { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); } .product-card h3 { font-size: 1.05rem; line-height: 1.25; } .product-card h3 a { transition: color .2s var(--ease-out); } .product-card h3 a:hover { color: var(--accent-dark); } .product-card .rating { display: flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--ink-soft); } .product-card .rating .stars { color: var(--gold); letter-spacing: 1px; } .product-card .price-row { display: flex; align-items: baseline; gap: .5rem; margin-top: auto; } .price-now { font-size: 1.3rem; font-weight: 800; font-family: var(--display); } .price-before { font-size: .88rem; color: var(--ink-soft); text-decoration: line-through; } /* flex-wrap permite que el CTA de Amazon caiga a su propia línea (y se estire a ancho completo vía flex-grow) en cuanto el ancho real de la tarjeta deja de tener sitio para los dos botones sin recortar texto — se dispara por el ancho real de la columna del grid, no por un breakpoint de viewport fijo, así que cubre cualquier nº de columnas. */ /* margin-top:auto ancla las acciones (Ver ficha / Comprar / Enlace pagado) al borde inferior de .body en TODAS las cards de la fila, sin importar si el título ocupa 1, 2 o 3 líneas ni cuánto texto tenga cada producto: .body ya es flex:1 dentro de .card, y .card ya se estira a la altura de la fila del grid (comportamiento por defecto de CSS Grid), así que solo falta que .actions consuma el espacio sobrante en vez de quedarse pegado al contenido. El gap de .body (.55rem) sigue actuando como separación mínima cuando no hay espacio sobrante que repartir. */ .product-card .actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem; margin-top: auto; } .product-card .actions .btn, .product-card .actions [data-card-cta] { flex: 1; } .badge { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .01em; } .badge-accent { background: var(--accent-soft); color: var(--accent-dark); } .badge-gold { background: var(--gold-soft); color: #93610e; } [data-theme="dark"] .badge-gold, :root:not([data-theme="light"]) .badge-gold { color: var(--gold); } .badge-danger { background: var(--danger-soft); color: var(--danger); } /* Reutilizable: divulgación de enlace de afiliado bajo un CTA comercial. Se inyecta solo vía JS cuando el producto tiene affiliate_url real (ver affiliateCtaHtml en main.js) — nunca a mano por producto. Discreta a propósito: no debe competir visualmente con el CTA "Comprar en Amazon". */ .affiliate-tag { display: block; margin-top: .35rem; font-size: .72rem; font-weight: 400; line-height: 1.35; letter-spacing: normal; text-transform: none; color: var(--ink-soft); text-align: center; } .cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-banner); display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 1rem 1.2rem; background: var(--surface); border-top: 1px solid var(--border); box-shadow: var(--shadow-l); font-size: .88rem; color: var(--ink-soft); } /* Con el menú móvil abierto el banner ya queda cubierto; además se retira del orden de tabulación y de los lectores de pantalla para que el foco no caiga en un botón invisible. Mejora progresiva (:has); sin soporte, el z-index ya garantiza que no tape nada. */ body:has(.mobile-menu.is-open) .cookie-banner { visibility: hidden; } .cookie-banner p { flex: 1 1 320px; margin: 0; max-width: 62ch; } .cookie-banner p a { color: var(--accent); text-decoration: underline; } .cookie-banner-actions { display: flex; gap: .6rem; flex-shrink: 0; } @media (max-width: 640px) { .cookie-banner { flex-direction: column; align-items: stretch; } .cookie-banner-actions { justify-content: flex-end; } /* CTA de tarjeta de producto: en móvil "Ver ficha" + "Comprar en Amazon" no caben en la misma fila sin recortarse, así que se apilan a ancho completo. */ .product-card .actions { flex-direction: column; align-items: stretch; } .product-card .actions .btn { flex: none; } } .card-badges { position: absolute; top: .7rem; left: .7rem; right: .7rem; display: flex; gap: .4rem; flex-wrap: wrap; z-index: 2; } .card-compare-toggle { position: absolute; top: .7rem; right: .7rem; z-index: 3; width: 34px; height: 34px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); display: grid; place-items: center; box-shadow: var(--shadow-s); } .card-compare-toggle svg { width: 16px; height: 16px; } .card-compare-toggle.is-active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } /* Chips / filters */ .chip-row { display: flex; flex-wrap: wrap; gap: .5rem; } .chip { padding: .5rem .95rem; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); font-size: .86rem; font-weight: 600; color: var(--ink-soft); transition: all .18s var(--ease-out); } /* Hover y foco usan señales distintas a propósito: hover cambia el fondo (sutil), foco de teclado usa el anillo turquesa. Regla propia (no solo la global :focus-visible) porque los