/* ============================================================ BreZ — Editorial stylesheet, construido desde cero. Sin herencia del template anterior: vocabulario propio, radios consistentes, espaciado generoso, un solo foco visual. Tipografías ya cargadas en las páginas: Playfair Display (display/serif) + Inter (sans). Sin fuentes nuevas. ============================================================ */ :root { /* Paleta de marca */ --brez-night: #050505; --brez-night-2: #0a0a0a; --brez-panel: #0d0d0c; --brez-line: rgba(212, 175, 55, 0.22); --brez-gold: #d4af37; --brez-gold-soft: #f4dc88; --brez-gold-deep: #9e7b15; --brez-cream: #f5f1e8; --brez-body: #cfc9bb; --brez-muted: #9a9a9a; /* Tipografías (cargadas vía Google Fonts en el ) */ --brez-serif: 'Playfair Display', Georgia, 'Times New Roman', serif; --brez-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Radios del sistema — consistentes en todo el sitio */ --brez-radius-sm: 10px; --brez-radius-md: 16px; --brez-radius-lg: 24px; --brez-radius-pill: 999px; /* Ritmo vertical */ --brez-section-gap: clamp(72px, 9vw, 120px); /* Transiciones */ --brez-ease: 0.25s ease; /* Alias de compatibilidad con nombres de variable de epic-loot.css. Bastante JS (product.js, reviews, galerias) genera markup con estilos inline que referencian estos nombres viejos (--text-main, --bg-card, etc.) — sin este alias, al migrar una pagina a brez.css esas variables quedan sin definir y el markup dinamico pierde color/ radio/sombra por completo. Mantenerlo evita tener que tocar cada inline-style de cada archivo JS con cada pagina que se migra. */ --brez-black: var(--brez-night); --brez-black-2: var(--brez-night-2); --brez-card: var(--brez-panel); --brez-gold-light: var(--brez-gold-soft); --brez-gold-glow: rgba(212, 175, 55, 0.18); --brez-ivory: var(--brez-cream); --bg-main: var(--brez-night); --bg-gradient-1: var(--brez-night-2); --bg-gradient-2: var(--brez-night-2); --bg-section: var(--brez-night-2); --bg-card: var(--brez-panel); --primary-blue: var(--brez-gold); --primary-blue-light: rgba(212, 175, 55, 0.12); --primary-blue-glow: rgba(212, 175, 55, 0.15); --secondary-yellow: var(--brez-gold-soft); --secondary-yellow-hover: var(--brez-gold); --accent-green: #61c454; --danger-red: #e0524f; --text-main: var(--brez-cream); --text-body: var(--brez-body); --text-muted: var(--brez-muted); --border-light: var(--brez-line); --radius-sm: var(--brez-radius-sm); --radius-md: var(--brez-radius-md); --radius-lg: var(--brez-radius-lg); --radius-xl: 28px; --radius-pill: var(--brez-radius-pill); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.5); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.55); --shadow-btn: 0 4px 14px rgba(212, 175, 55, 0.35); --font-display: var(--brez-serif); --font-body: var(--brez-sans); --transition-smooth: all 0.25s ease; --transition-bounce: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } /* ============ Base ============ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { background: var(--brez-night); color: var(--brez-body); font-family: var(--brez-sans); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { color: var(--brez-cream); font-family: var(--brez-serif); font-weight: 700; line-height: 1.2; } .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; } a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--brez-gold); outline-offset: 3px; border-radius: 4px; } .wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding-left: 24px; padding-right: 24px; } .eyebrow { display: inline-flex; align-items: center; gap: 12px; font-family: var(--brez-sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: var(--brez-gold); } .eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--brez-gold); display: inline-block; } /* ============ Botones ============ */ .btn-gold { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 16px 36px; border: 0; border-radius: var(--brez-radius-pill); background: linear-gradient(135deg, var(--brez-gold-soft) 0%, var(--brez-gold) 55%, var(--brez-gold-deep) 130%); color: #0a0a0a; font-family: var(--brez-sans); font-size: 0.95rem; font-weight: 800; letter-spacing: 0.01em; cursor: pointer; transition: transform var(--brez-ease), box-shadow var(--brez-ease); box-shadow: 0 10px 30px rgba(212, 175, 55, 0.25); white-space: nowrap; } .btn-gold:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(212, 175, 55, 0.35); } /* ============ Header ============ */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(5, 5, 5, 0.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .site-header-bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; } .brand-logo { display: inline-flex; align-items: center; font-family: var(--brez-serif); font-size: 1.65rem; font-weight: 900; letter-spacing: 0.01em; background: linear-gradient(120deg, var(--brez-gold-soft) 0%, var(--brez-gold) 55%, var(--brez-gold-deep) 120%); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; white-space: nowrap; } .site-nav { display: flex; align-items: center; gap: clamp(20px, 3.4vw, 44px); } .site-nav a { font-size: 0.86rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brez-body); padding: 8px 2px; position: relative; transition: color var(--brez-ease); } .site-nav a:hover { color: var(--brez-cream); } .site-nav a.is-active { color: var(--brez-cream); } .site-nav a.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--brez-gold); } .site-actions { display: flex; align-items: center; gap: 6px; } .site-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--brez-cream); cursor: pointer; transition: background var(--brez-ease), color var(--brez-ease); position: relative; } .site-icon-btn:hover { background: rgba(212, 175, 55, 0.12); color: var(--brez-gold); } .site-icon-btn svg { width: 21px; height: 21px; } .cart-count { position: absolute; top: 2px; right: 0; min-width: 19px; height: 19px; padding: 0 5px; border-radius: var(--brez-radius-pill); background: var(--brez-gold); color: #0a0a0a; font-size: 0.68rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; line-height: 1; } .nav-toggle { display: none; } /* Buscador expandible del header */ .site-search { display: inline-flex; align-items: center; position: relative; } .site-search-field { width: 0; opacity: 0; padding: 10px 0; border: 1px solid transparent; border-radius: var(--brez-radius-pill); background: var(--brez-panel); color: var(--brez-cream); font: inherit; font-size: 0.85rem; outline: none; transition: width var(--brez-ease), opacity var(--brez-ease), padding var(--brez-ease); pointer-events: none; color-scheme: dark; } .site-search-field::placeholder { color: var(--brez-muted); } .site-search-field.is-open { width: 190px; opacity: 1; padding: 10px 16px; margin-right: 4px; border-color: var(--brez-line); pointer-events: auto; } .account-chip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid transparent; border-radius: var(--brez-radius-pill); background: transparent; color: var(--brez-cream); font: inherit; cursor: pointer; padding: 6px; } .account-chip img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 1px solid var(--brez-line); } /* ============ Hero ============ */ .hero { position: relative; overflow: hidden; background-color: #050505; /* Foto real flattened: la escena ya trae mascota + biblioteca + luz. El overlay va ENCIMA de la foto pero DEBAJO del texto (ver .hero-fx). Position 62%: la mascota queda a centro-derecha, el texto respira sobre las estanterías en sombra de la izquierda. */ background-image: url("../assets/images/brez/hero-bg-desktop.webp"); background-size: cover; background-position: 62% 30%; background-repeat: no-repeat; } .hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(90deg, rgba(212, 175, 55, 0.02) 0 1px, transparent 1px 88px), repeating-linear-gradient(0deg, rgba(212, 175, 55, 0.014) 0 1px, transparent 1px 88px); mask-image: radial-gradient(80% 75% at 50% 40%, #000 30%, transparent 100%); -webkit-mask-image: radial-gradient(80% 75% at 50% 40%, #000 30%, transparent 100%); } /* ============ Hero (cont.) ============ */ .hero-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: center; padding-top: clamp(56px, 7vw, 104px); padding-bottom: clamp(48px, 5vw, 72px); position: relative; z-index: 1; } /* Variante foto real: la mascota ya viene renderizada en el fondo, el texto ocupa la columna izquierda con más aire. */ .hero-grid-photo { grid-template-columns: minmax(0, 560px); min-height: clamp(480px, 62vw, 640px); align-content: center; } .hero-grid-photo .hero-lead { max-width: 40ch; } .hero-copy .eyebrow { margin-bottom: 22px; } .hero-title { font-size: clamp(2.6rem, 5.4vw, 4.3rem); line-height: 1.22; letter-spacing: -0.01em; margin: 0 0 22px; text-wrap: balance; } .hero-title em { color: var(--brez-gold); font-style: italic; font-weight: 700; } .hero-lead { max-width: 44ch; color: var(--brez-body); font-size: 1.02rem; margin: 0 0 34px; } .hero-media { display: flex; justify-content: center; } /* Fondo animado del hero (starfield + curvas). Capa decorativa detrás del contenido: z-index 0 frente a .hero-grid/.scroll-hint (z-index 1). Densidad y opacidad bajas a propósito para no competir con el texto. */ .hero-fx { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; /* Overlay de legibilidad sobre la foto real, calcado de la referencia: zona de texto (izquierda) casi negro solido, la escena de la derecha se ve a pleno color/brillo sin velo encima, con una transicion suave entre ambas — no un tinte parejo sobre toda la foto. */ background: linear-gradient( to right, rgba(5, 5, 5, 0.98) 0%, rgba(5, 5, 5, 0.95) 22%, rgba(5, 5, 5, 0.7) 38%, rgba(5, 5, 5, 0.25) 52%, rgba(5, 5, 5, 0) 62%, rgba(5, 5, 5, 0) 100% ); } @media (max-width: 767px) { .hero { background-image: url("../assets/images/brez/hero-bg-mobile.webp"); background-position: center 30%; } .hero-fx { /* En mobile el texto ocupa todo el ancho: overlay uniforme y más oscuro arriba (donde cae el titular) que abajo. */ background: linear-gradient(to bottom, rgba(5, 5, 5, 0.82) 0%, rgba(5, 5, 5, 0.78) 55%, rgba(5, 5, 5, 0.6) 100%); } } .hero-paths { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.5; } .hero-paths path { fill: none; stroke-width: 1; stroke-linecap: round; stroke-dasharray: 300 1100; stroke-dashoffset: 1400; animation: brez-path-flow linear infinite; opacity: 0; } @keyframes brez-path-flow { 0% { stroke-dashoffset: 1400; opacity: 0; } 12% { opacity: 0.55; } 75% { opacity: 0.55; } 100% { stroke-dashoffset: 0; opacity: 0; } } .hero-stars { position: absolute; top: 0; left: 0; width: 2px; height: 2px; background: transparent; border-radius: 50%; animation-name: brez-stars-drift, brez-stars-twinkle; animation-timing-function: linear, ease-in-out; animation-iteration-count: infinite, infinite; animation-direction: normal, alternate; will-change: transform; opacity: 0.35; } .hero-stars-far { animation-duration: 170s, 6s; } .hero-stars-mid { animation-duration: 115s, 4.5s; } .hero-stars-near { animation-duration: 75s, 3.5s; } /* Loop infinito sin saltos: cada capa pinta su tile 2 veces en vertical (ver JS) y se desplaza exactamente una altura de tile. */ @keyframes brez-stars-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, calc(var(--hero-tile, 700px) * -1), 0); } } @keyframes brez-stars-twinkle { from { opacity: 0.65; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .hero-fx { display: none; } } .hero-grid, .scroll-hint { position: relative; z-index: 1; } .hero-figure { position: relative; margin: 0; width: min(100%, 480px); } .hero-mascot { width: 100%; height: auto; filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 90px rgba(212, 175, 55, 0.14)); } .hero-script { position: absolute; top: 2%; right: -2%; font-family: var(--brez-serif); font-style: italic; font-size: clamp(1.1rem, 2.2vw, 1.5rem); color: var(--brez-gold); text-shadow: 0 2px 18px rgba(0, 0, 0, 0.8); transform: rotate(-4deg); } .scroll-hint { display: flex; align-items: center; gap: 10px; padding: 0 24px 28px; max-width: 1200px; margin: 0 auto; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brez-muted); position: relative; z-index: 1; } .scroll-hint svg { width: 16px; height: 24px; flex-shrink: 0; } /* ============ Beneficios ============ */ .benefits { border-top: 1px solid rgba(212, 175, 55, 0.12); background: var(--brez-night); } .benefits-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; padding-top: 40px; padding-bottom: 40px; } .benefit { text-align: center; padding: 8px 12px; } .benefit svg { width: 30px; height: 30px; color: var(--brez-gold); margin: 0 auto 14px; } .benefit h3 { font-family: var(--brez-sans); font-size: 0.92rem; font-weight: 700; letter-spacing: 0.01em; margin: 0 0 6px; } .benefit p { font-size: 0.82rem; color: var(--brez-muted); margin: 0; } /* ============ Best Sellers ============ */ .bestsellers { padding-top: var(--brez-section-gap); padding-bottom: var(--brez-section-gap); background: var(--brez-night); } .bestsellers-title { font-size: clamp(2rem, 3.6vw, 2.9rem); margin: 14px 0 10px; } .bestsellers-sub { color: var(--brez-muted); max-width: 52ch; margin: 0 0 26px; } .carousel-nav { display: flex; gap: 12px; margin-bottom: 34px; } .carousel-nav button { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--brez-gold); background: transparent; color: var(--brez-gold); font-size: 1.15rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background var(--brez-ease), color var(--brez-ease), transform var(--brez-ease); } .carousel-nav button:hover { background: var(--brez-gold); color: #0a0a0a; transform: translateY(-2px); } .bestsellers-viewport { position: relative; overflow-x: auto; overscroll-behavior-x: contain; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -24px; padding: 4px 24px 12px; } .bestsellers-viewport::-webkit-scrollbar { display: none; } .bestsellers-grid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 270px); gap: 28px; width: max-content; min-width: 100%; } .bestsellers-grid > .book-card { scroll-snap-align: start; } .bestsellers-more { position: sticky; right: 6px; float: right; margin-top: -220px; width: 40px; height: 40px; border-radius: 50%; background: rgba(5, 5, 5, 0.7); border: 1px solid var(--brez-line); color: var(--brez-gold); display: flex; align-items: center; justify-content: center; pointer-events: none; } .carousel-nav button:disabled { opacity: 0.35; cursor: default; transform: none; } .book-card { position: relative; display: flex; flex-direction: column; background: var(--brez-panel); border: 1px solid rgba(212, 175, 55, 0.14); border-radius: var(--brez-radius-lg); padding: 18px 18px 20px; transition: transform var(--brez-ease), border-color var(--brez-ease), box-shadow var(--brez-ease); } .book-card:hover { transform: translateY(-5px); border-color: var(--brez-gold); box-shadow: 0 22px 48px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(212, 175, 55, 0.25); } .book-cover { display: block; border-radius: var(--brez-radius-md); overflow: hidden; background: #000; aspect-ratio: 4 / 5; margin-bottom: 16px; } .book-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .book-card:hover .book-cover img { transform: scale(1.04); } .book-title { font-family: var(--brez-sans); font-size: 0.95rem; font-weight: 700; line-height: 1.4; margin: 0 0 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.66em; } .book-title a:hover { color: var(--brez-gold); } .book-meta { display: flex; align-items: center; gap: 8px; margin: 0; padding-right: 52px; } .book-stars { color: var(--brez-gold); font-size: 0.82rem; letter-spacing: 0.08em; } .book-rating { font-size: 0.78rem; color: var(--brez-muted); font-weight: 600; } .book-add { position: absolute; right: 16px; bottom: 16px; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--brez-gold); background: transparent; color: var(--brez-gold); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background var(--brez-ease), color var(--brez-ease), transform var(--brez-ease); } .book-add:hover { background: var(--brez-gold); color: #0a0a0a; transform: scale(1.07); } .book-add svg { width: 19px; height: 19px; } .book-card-skeleton { border: 0; min-height: 380px; background: linear-gradient(100deg, #0d0d0c 30%, #17150f 50%, #0d0d0c 70%); background-size: 200% 100%; animation: brez-shimmer 1.4s infinite; } @keyframes brez-shimmer { 0% { background-position: 180% 0; } 100% { background-position: -80% 0; } } @media (prefers-reduced-motion: reduce) { .book-card-skeleton { animation: none; } } /* ============ Cita de cierre ============ */ .closing-quote { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: stretch; border-top: 1px solid rgba(212, 175, 55, 0.12); } .quote-media { position: relative; min-height: 420px; background: radial-gradient(500px 340px at 60% 40%, rgba(212, 175, 55, 0.2), transparent 65%), linear-gradient(160deg, #141210 0%, #070707 100%); display: flex; align-items: flex-end; justify-content: center; overflow: hidden; } .quote-media img { width: min(78%, 380px); height: auto; margin-bottom: -8px; /* Se funde con el fondo del panel por los cuatro lados, igual que la foto del hero y las demas escenas — nada de recorte rectangular duro. */ -webkit-mask-image: radial-gradient(ellipse 68% 68% at 50% 48%, #000 48%, transparent 88%); mask-image: radial-gradient(ellipse 68% 68% at 50% 48%, #000 48%, transparent 88%); } .quote-panel { background: var(--brez-night); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: clamp(56px, 7vw, 110px) clamp(28px, 5vw, 80px); } .quote-crown { width: 34px; height: 26px; color: var(--brez-gold); margin-bottom: 26px; } .quote-panel blockquote p { font-family: var(--brez-serif); font-style: italic; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.5; color: var(--brez-cream); max-width: 22ch; margin: 0 0 30px; text-wrap: balance; } .quote-divider { display: flex; align-items: center; gap: 12px; width: min(100%, 320px); margin: 0 0 26px; } .quote-divider::before, .quote-divider::after { content: ""; flex: 1; height: 1px; background: rgba(212, 175, 55, 0.4); } .quote-divider::before { margin-right: 4px; } .quote-divider::after { margin-left: 4px; } p.quote-divider::before, p.quote-divider::after { display: block; } .quote-brand { font-family: var(--brez-serif); font-weight: 900; font-size: 1.4rem; letter-spacing: 0.02em; background: linear-gradient(120deg, var(--brez-gold-soft) 0%, var(--brez-gold) 55%, var(--brez-gold-deep) 120%); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 0; } /* ============ Footer ============ */ .site-footer { border-top: 1px solid rgba(212, 175, 55, 0.14); background: #030303; padding-top: 64px; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; padding-bottom: 48px; } .footer-brand p { font-size: 0.9rem; color: var(--brez-muted); margin-top: 18px; max-width: 34ch; } .footer-brand strong { color: var(--brez-cream); } .footer-col h4 { font-family: var(--brez-sans); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brez-gold); margin: 0 0 18px; } .footer-col a { display: block; font-size: 0.9rem; color: var(--brez-body); padding: 5px 0; transition: color var(--brez-ease), transform var(--brez-ease); } .footer-col a:hover { color: var(--brez-gold); transform: translateX(3px); } .footer-bottom { border-top: 1px solid rgba(212, 175, 55, 0.12); padding-top: 24px; padding-bottom: 32px; } .footer-bottom p { font-size: 0.82rem; color: var(--brez-muted); margin: 0; } /* ============ WhatsApp flotante ============ */ .whatsapp-float { position: fixed; right: 24px; bottom: 24px; z-index: 90; width: 54px; height: 54px; border-radius: 50%; background: #25d366; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5); transition: transform var(--brez-ease); } .whatsapp-float:hover { transform: scale(1.07); } /* ============ Sidebar Mi Cuenta + Auth (inyectados por ui-init.js) ============ */ .account-sidebar { position: fixed; top: 0; right: 0; z-index: 200; width: min(400px, 92vw); height: 100dvh; background: var(--brez-panel); border-left: 1px solid var(--brez-line); transform: translateX(102%); transition: transform 0.3s ease; overflow-y: auto; padding: 28px; } .account-sidebar.is-open { transform: none; } .sidebar-scrim { position: fixed; inset: 0; z-index: 190; background: rgba(0, 0, 0, 0.55); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .sidebar-scrim.is-visible { opacity: 1; pointer-events: auto; } .auth-dialog { position: fixed; inset: 0; z-index: 210; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(0, 0, 0, 0.65); } .auth-dialog.is-open { display: flex; } /* ============ Responsive ============ */ @media (max-width: 992px) { .hero-grid { grid-template-columns: 1fr; text-align: center; gap: 20px; } .hero-lead { margin-left: auto; margin-right: auto; } .hero-media { order: -1; } .hero-figure { width: min(100%, 360px); } .benefits-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .closing-quote { grid-template-columns: 1fr; } .quote-media { min-height: 300px; } .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { .nav-toggle { display: inline-flex; align-items: center; justify-content: center; flex-direction: column; gap: 5px; width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; cursor: pointer; } .nav-toggle span { display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--brez-cream); transition: transform var(--brez-ease), opacity var(--brez-ease); } .nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.is-open span:nth-child(2) { opacity: 0; } .nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .site-nav { position: fixed; top: 0; left: 0; z-index: 150; width: min(320px, 84vw); height: 100dvh; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 4px; padding: 96px 28px 32px; background: #0b0b0a; border-right: 1px solid var(--brez-line); transform: translateX(-102%); transition: transform 0.3s ease; } .site-nav.is-open { transform: none; } .site-nav a { width: 100%; padding: 14px 4px; font-size: 0.95rem; } .site-nav a.is-active::after { display: none; } .site-nav-account { margin-top: 12px; border-top: 1px solid rgba(212, 175, 55, 0.16); padding-top: 20px !important; } .hero-grid { padding-top: 48px; } .scroll-hint { display: none; } .bestsellers-grid { grid-auto-columns: minmax(200px, 240px); gap: 20px; } .footer-grid { grid-template-columns: 1fr; gap: 32px; } } @media (max-width: 480px) { .wrap { padding-left: 18px; padding-right: 18px; } .site-header-bar { min-height: 66px; gap: 12px; } .brand-logo { font-size: 1.4rem; } .site-search-field.is-open { width: 132px; } .hero-title { font-size: 2.35rem; } .btn-gold { width: 100%; } .benefits-grid { grid-template-columns: 1fr 1fr; gap: 8px; } .benefit { padding: 12px 4px; } .bestsellers-grid { grid-auto-columns: 68vw; } .book-add { width: 48px; height: 48px; } .quote-media { min-height: 240px; } .whatsapp-float { right: 16px; bottom: 16px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ============================================================ SISTEMA COMPARTIDO — páginas flotantes, glass, marcos (Catálogo / Mis pedidos / Afiliados y futuras migraciones) ============================================================ */ /* Hojas de papel flotando: decoración de fondo, densidad baja. Uso: dentro de una sección con position:relative + overflow:hidden. */ .floating-pages { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .floating-page { position: absolute; border-radius: 6px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.05); animation: brez-page-drift linear infinite; opacity: 0.8; } /* Rayitas simulando líneas de texto dentro de algunas hojas */ .floating-page-lined::before, .floating-page-lined::after { content: ""; position: absolute; left: 14%; right: 14%; height: 1px; background: rgba(255, 255, 255, 0.07); } .floating-page-lined::before { top: 32%; } .floating-page-lined::after { top: 52%; left: 14%; right: 32%; } .floating-page-shade { background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45); } @keyframes brez-page-drift { 0% { transform: translateY(14px) rotate(var(--page-rot, 8deg)); } 50% { transform: translateY(-16px) rotate(calc(var(--page-rot, 8deg) + 3deg)); } 100% { transform: translateY(14px) rotate(var(--page-rot, 8deg)); } } /* Panel glass reutilizable (frosted glass real sobre fondo oscuro) */ .glass-panel { background: rgba(20, 18, 16, 0.55); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(212, 175, 55, 0.15); border-radius: 18px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); } /* La escena se funde directo con el fondo negro de la seccion: sin marco, sin borde, sin caja propia — el personaje "emerge" de la oscuridad, igual que la foto del hero. El fundido lo hace el mask-image sobre la imagen, no un recorte duro ni una tarjeta. */ .framed-scene { position: relative; } .framed-scene > img { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-mask-image: radial-gradient(ellipse 68% 68% at 50% 48%, #000 48%, transparent 88%); mask-image: radial-gradient(ellipse 68% 68% at 50% 48%, #000 48%, transparent 88%); } /* ============ Páginas internas (cabecera editorial compartida) ============ */ .inner-hero { position: relative; overflow: hidden; padding-top: clamp(48px, 6vw, 88px); padding-bottom: clamp(40px, 5vw, 64px); } .inner-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: clamp(32px, 5vw, 72px); align-items: center; } .inner-title { font-size: clamp(2.2rem, 4.6vw, 3.4rem); line-height: 1.18; margin: 14px 0 16px; text-wrap: balance; } .inner-title em { color: var(--brez-gold); font-style: italic; font-weight: 700; } .inner-lead { color: var(--brez-muted); max-width: 46ch; margin: 0; } .inner-media .framed-scene { aspect-ratio: 4 / 3.4; } .catalog-hero-figure { display: flex; align-items: center; justify-content: center; min-height: 320px; } @media (max-width: 900px) { .inner-hero-grid { grid-template-columns: 1fr; } } /* ============ Catálogo ============ */ .catalog-search { display: flex; align-items: center; gap: 10px; margin-top: 28px; background: rgba(20, 18, 16, 0.55); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(212, 175, 55, 0.22); border-radius: var(--brez-radius-pill); padding: 6px 6px 6px 20px; max-width: 520px; } .catalog-search svg { width: 19px; height: 19px; color: var(--brez-gold); flex-shrink: 0; } .catalog-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--brez-cream); font: inherit; font-size: 0.95rem; outline: none; min-height: 48px; color-scheme: dark; } .catalog-search input::placeholder { color: var(--brez-muted); } .catalog-collection { position: relative; padding-bottom: var(--brez-section-gap); } .catalog-collection-head { position: relative; z-index: 1; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 30px; } .catalog-collection-head h2 { font-size: 1.5rem; margin: 0; } .catalog-see-all { color: var(--brez-gold); font-size: 0.9rem; font-weight: 700; white-space: nowrap; } .catalog-see-all:hover { text-decoration: underline; } /* Grid del catálogo: reutiliza .book-card; aquí en filas fluidas */ .catalog-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 28px; } .catalog-grid .book-card { scroll-snap-align: unset; } /* Paginación progresiva hereda .load-more-* (definidos abajo) */ .catalog-empty { grid-column: 1 / -1; text-align: center; padding: 80px 0; font-weight: 600; color: var(--brez-muted); margin: 0; } /* ============ Mis pedidos ============ */ .orders-layout { position: relative; z-index: 1; display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: clamp(24px, 3.5vw, 48px); align-items: start; padding-bottom: var(--brez-section-gap); } .orders-side { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: var(--brez-radius-md); background: rgba(20, 18, 16, 0.45); border: 1px solid rgba(212, 175, 55, 0.12); } .orders-side a, .orders-side span.orders-side-current, .orders-side-soon-wrap { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; font-size: 0.9rem; font-weight: 600; color: var(--brez-body); min-height: 48px; } .orders-side-soon-wrap { cursor: default; opacity: 0.85; } .orders-side-soon-wrap > span { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .orders-side a:hover { color: var(--brez-cream); background: rgba(212, 175, 55, 0.07); } .orders-side svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--brez-muted); } .orders-side-current { background: rgba(212, 175, 55, 0.12); color: var(--brez-cream); border: 1px solid rgba(212, 175, 55, 0.2); } .orders-side-current svg { color: var(--brez-gold); } .orders-side-soon { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brez-muted); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--brez-radius-pill); padding: 2px 8px; margin-left: auto; } .orders-main-head h1 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); margin: 0 0 8px; } .orders-main-head p { color: var(--brez-muted); margin: 0 0 28px; } .order-row { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 18px; border-radius: var(--brez-radius-md); background: rgba(20, 18, 16, 0.55); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(212, 175, 55, 0.13); margin-bottom: 16px; } .order-row-cover { width: 72px; height: 96px; border-radius: 12px; overflow: hidden; background: #000; flex-shrink: 0; } .order-row-cover img { width: 100%; height: 100%; object-fit: cover; } .order-row-title { font-family: var(--brez-sans); font-size: 1rem; font-weight: 700; color: var(--brez-cream); margin: 0 0 4px; line-height: 1.4; } .order-row-meta { font-size: 0.8rem; color: var(--brez-muted); margin: 0 0 10px; } .order-row-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .order-status { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 14px; border-radius: var(--brez-radius-pill); border: 1px solid; white-space: nowrap; } .order-status-confirmed { color: #7dd87d; border-color: rgba(125, 216, 125, 0.35); background: rgba(125, 216, 125, 0.08); } .order-status-pending { color: var(--brez-gold); border-color: rgba(212, 175, 55, 0.35); background: rgba(212, 175, 55, 0.08); } .order-status-cancelled { color: #e88; border-color: rgba(238, 136, 136, 0.35); background: rgba(238, 136, 136, 0.08); } .order-link { color: var(--brez-gold); font-size: 0.85rem; font-weight: 700; white-space: nowrap; } .order-link:hover { text-decoration: underline; } .order-download { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 20px; border-radius: var(--brez-radius-pill); background: var(--brez-gold); color: #0a0a0a; font-size: 0.85rem; font-weight: 800; white-space: nowrap; } .order-download:hover { transform: translateY(-1px); } .orders-help { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 24px; align-items: center; padding: clamp(24px, 3.5vw, 36px); margin-top: 32px; } .orders-help h2 { font-size: 1.3rem; margin: 0 0 8px; } .orders-help p { color: var(--brez-muted); font-size: 0.92rem; margin: 0 0 20px; max-width: 44ch; } .orders-help-media { margin: 0; } .orders-help-media .framed-scene { border-radius: 18px; aspect-ratio: 1 / 1; } @media (max-width: 860px) { .orders-layout { grid-template-columns: 1fr; } .orders-side { position: static; flex-direction: row; overflow-x: auto; padding: 8px; } .orders-side a, .orders-side span.orders-side-current { white-space: nowrap; } .order-row { grid-template-columns: 56px minmax(0, 1fr); } .order-row-side { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .order-row-cover { width: 56px; height: 76px; } .orders-help { grid-template-columns: 1fr; } .orders-help-media { max-width: 240px; } } /* ============ Afiliados ============ */ .affiliate-hero { position: relative; overflow: hidden; } .affiliate-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 0.85fr); gap: clamp(28px, 4vw, 56px); align-items: start; padding-top: clamp(48px, 6vw, 88px); padding-bottom: var(--brez-section-gap); } .affiliate-points { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 18px; } .affiliate-points li { display: flex; gap: 14px; align-items: flex-start; } .affiliate-points svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--brez-gold); margin-top: 2px; } .affiliate-points strong { display: block; color: var(--brez-cream); font-size: 0.92rem; } .affiliate-points span { color: var(--brez-muted); font-size: 0.85rem; } .affiliate-panel { padding: clamp(24px, 3vw, 32px); } .affiliate-panel h2 { font-family: var(--brez-sans); font-size: 1.05rem; font-weight: 800; margin: 0 0 6px; } .affiliate-panel-sub { font-size: 0.85rem; color: var(--brez-muted); margin: 0 0 18px; } .affiliate-login-fields { display: grid; gap: 12px; } .affiliate-text-input { display: block; width: 100%; border: 1px solid rgba(212, 175, 55, 0.2); border-radius: 12px; background: rgba(5, 5, 5, 0.55); color: var(--brez-cream); font: inherit; font-size: 0.85rem; padding: 12px 14px; min-height: 48px; color-scheme: dark; } .affiliate-text-input::placeholder { color: var(--brez-muted); } .affiliate-text-input:focus { outline: none; border-color: var(--brez-gold); box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.25); } .affiliate-login-btn { width: 100%; } .affiliate-error { color: #e88; } .affiliate-link-row { display: flex; gap: 10px; } .affiliate-link-row input { flex: 1; min-width: 0; border: 1px solid rgba(212, 175, 55, 0.2); border-radius: 12px; background: rgba(5, 5, 5, 0.55); color: var(--brez-cream); font: inherit; font-size: 0.82rem; padding: 12px 14px; min-height: 48px; color-scheme: dark; } .affiliate-copy { flex-shrink: 0; min-height: 48px; padding: 12px 22px; border: 0; border-radius: 12px; background: var(--brez-gold); color: #0a0a0a; font: inherit; font-size: 0.85rem; font-weight: 800; cursor: pointer; } .affiliate-copy:hover { transform: translateY(-1px); } .affiliate-share-label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brez-muted); margin: 22px 0 12px; } .affiliate-share-row { display: flex; gap: 10px; flex-wrap: wrap; } .affiliate-share { min-height: 44px; padding: 10px 18px; border-radius: var(--brez-radius-pill); border: 1px solid rgba(212, 175, 55, 0.25); color: var(--brez-cream); font-size: 0.82rem; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; } .affiliate-share:hover { border-color: var(--brez-gold); color: var(--brez-gold); } .affiliate-stats { margin-top: 24px; padding-top: 22px; border-top: 1px solid rgba(212, 175, 55, 0.14); } .affiliate-stats h3 { font-family: var(--brez-sans); font-size: 0.95rem; font-weight: 800; margin: 0 0 14px; } .affiliate-stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .affiliate-stat { text-align: center; padding: 14px 8px; border-radius: 12px; background: rgba(5, 5, 5, 0.4); border: 1px solid rgba(255, 255, 255, 0.06); } .affiliate-stat strong { display: block; font-size: 1.25rem; color: var(--brez-gold); line-height: 1.2; } .affiliate-stat span { font-size: 0.72rem; color: var(--brez-muted); font-weight: 600; } .affiliate-freshness { font-size: 0.75rem; color: var(--brez-muted); margin: 14px 0 0; } .affiliate-quote-card { margin: 0; position: relative; } .affiliate-quote-card .framed-scene { aspect-ratio: 3 / 4; min-height: 420px; } .affiliate-quote { position: absolute; inset: auto 20px 24px 20px; margin: 0; text-align: center; background: rgba(5, 5, 5, 0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(212, 175, 55, 0.18); border-radius: 14px; padding: 18px 16px; } .affiliate-quote svg { width: 22px; height: 18px; color: var(--brez-gold); margin-bottom: 8px; } .affiliate-quote p { font-family: var(--brez-serif); font-style: italic; font-size: 1.02rem; line-height: 1.5; color: var(--brez-cream); margin: 0; } @media (max-width: 1080px) { .affiliate-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .affiliate-quote-card { grid-column: 1 / -1; max-width: 480px; } } @media (max-width: 760px) { .affiliate-grid { grid-template-columns: 1fr; } .affiliate-link-row { flex-direction: column; } .affiliate-copy { width: 100%; } .affiliate-stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } } /* ============ Toast (carrito / reseñas) ============ */ /* Compartido por cart.js y product.js — misma clase, un solo lugar */ .toast-gaming { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(120px); background: var(--brez-panel); color: var(--brez-cream); border: 1px solid var(--brez-line); border-left: 4px solid var(--brez-gold); padding: 14px 22px; border-radius: var(--brez-radius-md); font-weight: 700; font-size: 0.9rem; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6); z-index: 10000; transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275); display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px); } .toast-gaming.show { transform: translateX(-50%) translateY(0); } .toast-gaming .toast-icon { font-size: 1.3rem; } .toast-gaming .toast-info { display: flex; flex-direction: column; gap: 2px; } .toast-gaming .toast-info strong { color: var(--brez-gold); } .toast-gaming .toast-info span { font-size: 0.8rem; color: var(--brez-muted); font-weight: 600; } @media (max-width: 480px) { .toast-gaming { bottom: 76px; padding: 12px 16px; font-size: 0.85rem; } } /* ============ Botón outline (secundario) ============ */ .btn-outline { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 26px; border-radius: var(--brez-radius-pill); background: transparent; border: 1px solid var(--brez-line); color: var(--brez-cream); font-family: var(--brez-sans); font-weight: 700; font-size: 0.92rem; text-decoration: none; cursor: pointer; transition: border-color var(--brez-ease), color var(--brez-ease), background var(--brez-ease); } .btn-outline:hover { border-color: var(--brez-gold); color: var(--brez-gold); background: rgba(212, 175, 55, 0.06); } /* ============ Ficha de producto ============ */ .product-detail-wrap { padding-top: clamp(28px, 4vw, 44px); padding-bottom: var(--brez-section-gap); } .product-back-row { margin-bottom: 24px; } .product-back-link { display: inline-flex; align-items: center; gap: 8px; font-size: 0.85rem; font-weight: 600; color: var(--brez-muted); transition: color var(--brez-ease); } .product-back-link:hover { color: var(--brez-gold); } .product-detail-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); margin-bottom: var(--brez-section-gap); } .product-gallery { position: sticky; top: 100px; align-self: start; } .product-cover-frame { position: relative; border-radius: var(--brez-radius-lg); overflow: hidden; border: 1px solid var(--brez-line); background: var(--brez-panel); aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; } .product-cover-frame img { width: 100%; height: 100%; object-fit: contain; padding: 12px; } .product-thumbs-row { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; } .eyebrow.product-detail-category { margin-bottom: 14px; } .product-detail-title { font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1.22; margin: 0 0 18px; } .product-detail-price { margin-bottom: 18px; } .product-detail-price-val { font-family: var(--brez-serif); font-size: clamp(2rem, 3.4vw, 2.6rem); font-weight: 800; color: var(--brez-gold); } .product-detail-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; } .product-detail-badge { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: var(--brez-radius-pill); background: rgba(212, 175, 55, 0.1); border: 1px solid var(--brez-line); color: var(--brez-body); font-size: 0.78rem; font-weight: 700; } .product-detail-desc { color: var(--brez-body); line-height: 1.7; margin-bottom: 28px; max-width: 56ch; } .product-detail-actions { display: flex; flex-direction: column; gap: 14px; margin-bottom: 32px; } .product-qty-row { display: flex; align-items: center; gap: 16px; } .product-qty-label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; color: var(--brez-muted); } .product-qty-box { display: inline-flex; align-items: center; border: 1px solid var(--brez-line); border-radius: var(--brez-radius-pill); overflow: hidden; } .product-qty-btn { width: 40px; height: 40px; border: 0; background: transparent; color: var(--brez-cream); font-size: 1.2rem; cursor: pointer; transition: background var(--brez-ease), color var(--brez-ease); } .product-qty-btn:hover { background: rgba(212, 175, 55, 0.12); color: var(--brez-gold); } .product-qty-val { min-width: 32px; text-align: center; font-weight: 700; } .product-detail-cta { width: 100%; } .product-detail-perks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding-top: 24px; border-top: 1px solid var(--brez-line); } .product-detail-perk h5 { font-family: var(--brez-sans); font-size: 0.88rem; font-weight: 700; color: var(--brez-cream); margin: 8px 0 4px; } .product-detail-perk p { font-size: 0.8rem; color: var(--brez-muted); } .product-detail-perk-icon { font-size: 1.3rem; } @media (max-width: 900px) { .product-detail-grid { grid-template-columns: 1fr; gap: 32px; } .product-gallery { position: static; max-width: 420px; margin: 0 auto; } } /* ============ Resenas ============ */ .reviews-card-premium { padding: clamp(28px, 4vw, 44px); margin-bottom: var(--brez-section-gap); } .section-title { font-size: clamp(1.4rem, 2.4vw, 1.8rem); } .reviews-title { margin-bottom: 28px; } .reviews-header { display: grid; grid-template-columns: minmax(0, 0.6fr) minmax(0, 1fr); gap: 32px; padding-bottom: 28px; border-bottom: 1px solid var(--brez-line); margin-bottom: 28px; } .reviews-score { border-right: 1px solid var(--brez-line); padding-right: 32px; } .reviews-avg { font-family: var(--brez-serif); font-size: 3rem; font-weight: 800; color: var(--brez-gold); line-height: 1; } .reviews-stars { color: var(--brez-gold); font-size: 1.2rem; letter-spacing: 2px; margin: 8px 0; } .reviews-count { font-size: 0.82rem; color: var(--brez-muted); } .reviews-cta-title { font-family: var(--brez-serif); font-size: 1.15rem; margin-bottom: 6px; } .reviews-cta-sub { color: var(--brez-muted); font-size: 0.88rem; margin-bottom: 16px; } .reviews-cta-btn { width: auto; } .review-form-box { display: none; background: rgba(0, 0, 0, 0.25); border: 1px solid var(--brez-line); border-radius: var(--brez-radius-md); padding: 24px; margin-bottom: 28px; } .review-form-title { font-size: 1.1rem; margin-bottom: 18px; } .review-form { display: flex; flex-direction: column; gap: 18px; } .review-label { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; color: var(--brez-muted); margin-bottom: 8px; } .review-stars-picker { display: flex; gap: 6px; font-size: 1.6rem; } .star-picker-item { cursor: pointer; color: #444; transition: color var(--brez-ease); } .review-input, .review-textarea { width: 100%; background: var(--brez-panel); border: 1px solid var(--brez-line); border-radius: var(--brez-radius-sm); padding: 12px 14px; color: var(--brez-cream); font-family: var(--brez-sans); font-size: 0.9rem; resize: vertical; } .review-input:focus, .review-textarea:focus { outline: none; border-color: var(--brez-gold); } .review-file-wrap { position: relative; } .review-file-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .review-file-label { border: 1px dashed var(--brez-line); border-radius: var(--brez-radius-sm); padding: 14px; text-align: center; font-size: 0.85rem; color: var(--brez-muted); } .review-preview-wrap { display: none; position: relative; margin-top: 12px; width: 90px; } .review-preview-img { width: 90px; height: 90px; object-fit: cover; border-radius: var(--brez-radius-sm); border: 1px solid var(--brez-line); } .review-preview-remove { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: var(--brez-night); color: var(--brez-cream); cursor: pointer; } .review-form-actions { display: flex; gap: 12px; justify-content: flex-end; } .review-btn { width: auto; } .reviews-list { display: grid; gap: 16px; } .reviews-loading { text-align: center; color: var(--brez-muted); padding: 32px 0; } .review-lightbox { display: none; position: fixed; inset: 0; z-index: 10001; background: rgba(0, 0, 0, 0.9); align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; } .review-lightbox-img { max-width: 90vw; max-height: 85vh; border-radius: var(--brez-radius-md); } .review-lightbox-close { position: absolute; top: 24px; right: 24px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.1); color: #fff; font-size: 1.1rem; cursor: pointer; } @media (max-width: 768px) { .reviews-header { grid-template-columns: 1fr; text-align: center; } .reviews-score { border-right: none; border-bottom: 1px solid var(--brez-line); padding-right: 0; padding-bottom: 24px; } } /* ============ Relacionados + sticky CTA ============ */ .related-block { margin-bottom: 60px; } .related-title { margin-bottom: 24px; } .sticky-cta-container { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 500; background: rgba(10, 9, 7, 0.96); backdrop-filter: blur(12px); border-top: 1px solid var(--brez-line); padding: 12px 16px; } .sticky-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1200px; margin: 0 auto; } .sticky-cta-info { display: flex; flex-direction: column; min-width: 0; } .sticky-cta-price { font-weight: 800; color: var(--brez-gold); } .sticky-cta-name { font-size: 0.78rem; color: var(--brez-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sticky-cta-btn { width: auto; flex-shrink: 0; min-height: 44px; padding: 0 24px; } @media (max-width: 992px) { .sticky-cta-container { display: block; } } /* ============ Carrito ============ */ .cart-page-wrap { padding-top: clamp(28px, 4vw, 44px); padding-bottom: var(--brez-section-gap); } .cart-page-intro { margin-bottom: 32px; } .cart-page-title { font-size: clamp(1.9rem, 3.4vw, 2.5rem); margin-bottom: 8px; } .cart-page-intro p { color: var(--brez-muted); } .cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: 32px; align-items: start; } .cart-items-list { display: flex; flex-direction: column; gap: 16px; } .cart-summary-sidebar { position: sticky; top: 100px; } .cart-summary-card { padding: 28px; } .cart-summary-title { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--brez-line); } .cart-summary-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; font-size: 0.92rem; color: var(--brez-body); } .cart-summary-delivery { color: var(--brez-gold); font-weight: 600; font-size: 0.85rem; } .cart-summary-total { border-top: 1px solid var(--brez-line); margin-top: 8px; padding-top: 16px; font-family: var(--brez-serif); font-size: 1.2rem; font-weight: 800; color: var(--brez-cream); } .cart-summary-total span:last-child { color: var(--brez-gold); } .cart-coupon { padding: 18px 0; border-top: 1px solid var(--brez-line); margin-top: 8px; } .cart-coupon-title { font-size: 0.82rem; font-weight: 700; color: var(--brez-muted); margin-bottom: 10px; } .cart-coupon-row { display: flex; gap: 8px; } .cart-coupon-input { flex: 1; min-width: 0; background: var(--brez-panel); border: 1px solid var(--brez-line); border-radius: var(--brez-radius-sm); padding: 10px 14px; color: var(--brez-cream); font-family: var(--brez-sans); font-size: 0.88rem; } .cart-coupon-input:focus { outline: none; border-color: var(--brez-gold); } .cart-coupon-btn { padding: 10px 18px; min-height: 0; } .cart-coupon-msg { font-size: 0.8rem; margin-top: 8px; font-weight: 600; } .cart-pay-btn { width: 100%; margin-top: 8px; } .cart-secure-note { display: flex; align-items: center; gap: 8px; justify-content: center; font-size: 0.76rem; color: var(--brez-muted); margin-top: 14px; } .cart-clear-btn { display: block; width: 100%; text-align: center; background: none; border: none; color: var(--brez-muted); font-size: 0.82rem; font-weight: 600; margin-top: 14px; cursor: pointer; transition: color var(--brez-ease); } .cart-clear-btn:hover { color: #e0524f; } @media (max-width: 900px) { .cart-layout { grid-template-columns: 1fr; } .cart-summary-sidebar { position: static; } } /* ============ Clases usadas por cart.js (no editable) ============ */ /* cart.js inyecta este markup directamente vía innerHTML — los nombres de clase son fijos, solo se restylan acá con los tokens brez. */ .loading-cart { padding: 48px 20px; text-align: center; font-weight: 700; color: var(--brez-muted); background: var(--brez-panel); border-radius: var(--brez-radius-lg); border: 1px dashed var(--brez-line); } .empty-cart-gaming { text-align: center; padding: 60px 24px; background: var(--brez-panel); border-radius: var(--brez-radius-lg); border: 1px dashed var(--brez-line); } .empty-cart-gaming h3 { margin-bottom: 10px; font-size: 1.3rem; } .empty-cart-gaming p { color: var(--brez-muted); font-weight: 600; margin-bottom: 20px; } .brez-mascot { filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.5)); } .btn-primary-gaming { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 16px 36px; border: 0; border-radius: var(--brez-radius-pill); background: linear-gradient(135deg, var(--brez-gold-soft) 0%, var(--brez-gold) 55%, var(--brez-gold-deep) 130%); color: #0a0a0a !important; font-family: var(--brez-sans); font-size: 0.95rem; font-weight: 800; cursor: pointer; transition: transform var(--brez-ease), box-shadow var(--brez-ease); box-shadow: 0 10px 30px rgba(212, 175, 55, 0.25); white-space: nowrap; text-decoration: none; } .btn-primary-gaming:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(212, 175, 55, 0.35); } .cart-item-premium { display: flex; gap: 20px; background: var(--brez-panel); padding: 20px; border-radius: var(--brez-radius-md); border: 1px solid var(--brez-line); align-items: center; } .cart-item-img-box { flex-shrink: 0; } .cart-item-img-box img { width: 80px; height: 80px; object-fit: cover; border-radius: var(--brez-radius-sm); background: #090909; border: 1px solid var(--brez-line); aspect-ratio: 1; } .cart-item-main { flex: 1; min-width: 0; } .cart-item-main h4 { margin: 0 0 8px; font-size: 1rem; color: var(--brez-cream); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cart-item-price { font-weight: 800; color: var(--brez-gold); margin: 0; white-space: nowrap; } .cart-item-actions { display: flex; align-items: center; gap: 16px; } .cart-qty-pill { display: flex; align-items: center; background: var(--brez-night-2); border: 1px solid var(--brez-line); border-radius: var(--brez-radius-pill); padding: 4px 12px; gap: 12px; font-weight: 700; color: var(--brez-cream); } .cart-qty-pill button { background: none; border: none; border-radius: 8px; font-weight: 800; font-size: 1.1rem; color: var(--brez-gold); cursor: pointer; padding: 4px; min-width: 40px; min-height: 40px; display: flex; align-items: center; justify-content: center; } .remove-cart-item { background: rgba(224, 82, 79, 0.15); color: #e0524f; border: none; width: 40px; height: 40px; min-width: 40px; min-height: 40px; border-radius: 50%; cursor: pointer; font-weight: bold; display: flex; align-items: center; justify-content: center; transition: background var(--brez-ease), color var(--brez-ease); flex-shrink: 0; } .remove-cart-item:hover { background: #e0524f; color: #fff; } @media (max-width: 480px) { .cart-item-premium { flex-wrap: wrap; } .cart-item-actions { width: 100%; justify-content: space-between; } } /* ============ Insignias de pago (footer) ============ */ .payment-badges-gaming { display: flex; gap: 12px; align-items: center; opacity: 0.8; } .payment-badges-gaming img { height: 20px !important; width: auto !important; max-width: 60px; object-fit: contain; } /* ============ Success (compra exitosa) ============ */ .success-header-bar { justify-content: center; } .success-page-wrap { padding-top: 100px; padding-bottom: 60px; display: flex; justify-content: center; } .success-card { background: var(--brez-panel); border: 1px solid var(--brez-line); border-radius: var(--brez-radius-lg); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55); max-width: 600px; width: 100%; padding: 48px; text-align: center; } .success-emoji { font-size: 5rem; margin-bottom: 24px; line-height: 1; } .success-title { font-size: clamp(1.8rem, 3vw, 2.3rem); margin-bottom: 16px; } .success-lead { color: var(--brez-muted); font-weight: 600; margin-bottom: 32px; line-height: 1.6; } .success-auto-box { background: rgba(97, 196, 84, 0.08); border: 1.5px solid rgba(97, 196, 84, 0.4); border-radius: var(--brez-radius-md); padding: 24px; margin-bottom: 32px; text-align: left; } .success-auto-title { color: #61c454; font-size: 1.1rem; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; font-family: var(--brez-serif); font-weight: 800; line-height: 1.3; } .success-auto-text { color: var(--brez-body); font-size: 0.9rem; font-weight: 500; line-height: 1.5; margin: 0; } .success-actions { display: flex; flex-direction: column; gap: 16px; } .success-pay-btn { width: 100%; padding: 20px; font-size: 1.15rem; display: none; margin-bottom: 8px; } .success-pay-btn.success-pay-visible { display: inline-flex; } .success-main-btn { width: 100%; padding: 20px; font-size: 1.15rem; } .success-alt-btn { width: 100%; padding: 16px; min-height: 52px; } .success-downloads-box { background: rgba(97, 196, 84, 0.08); border: 1.5px solid rgba(97, 196, 84, 0.4); border-radius: var(--brez-radius-md); padding: 24px; margin-bottom: 32px; text-align: left; } .success-downloads-title { color: #61c454; margin-bottom: 12px; font-family: var(--brez-serif); font-weight: 800; font-size: 1.1rem; } .success-download-link { display: block; font-weight: 800; color: var(--brez-gold); margin: 6px 0; overflow-wrap: anywhere; min-height: 44px; align-content: center; } .success-download-note { font-size: 0.85rem; color: var(--brez-muted); margin: 8px 0 0 0; } @media (max-width: 768px) { .success-card { padding: 28px 20px; } } /* ============ Boton secundario (gaming legacy, usado por JS inline) ============ */ .btn-secondary-gaming { background: var(--brez-panel); color: var(--brez-cream); padding: 14px 30px; border-radius: var(--brez-radius-lg); font-family: var(--brez-sans); font-weight: 800; font-size: 0.95rem; border: 1px solid var(--brez-line); cursor: pointer; transition: border-color var(--brez-ease), color var(--brez-ease); display: inline-flex; align-items: center; justify-content: center; gap: 10px; white-space: nowrap; text-decoration: none; } .btn-secondary-gaming:hover { border-color: var(--brez-gold); color: var(--brez-gold); } /* ============ Mis descargas (tracking) ============ */ .tracking-card-premium { background: var(--brez-panel); border: 1px solid var(--brez-line); border-radius: var(--brez-radius-lg); } .tracking-main { padding-top: clamp(28px, 4vw, 44px); padding-bottom: var(--brez-section-gap); } .tracking-intro { max-width: 600px; margin: 0 auto; text-align: center; } .tracking-intro .page-inner-title { font-size: clamp(1.8rem, 3vw, 2.3rem); margin-bottom: 12px; } .tracking-subtitle { color: var(--brez-muted); font-weight: 600; margin-bottom: 40px; } .tracking-loading { display: block; margin: 40px 0; font-weight: 800; color: var(--brez-gold); } .tracking-result { display: none; margin-top: 40px; text-align: left; } .tracking-card-layout { padding: 32px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); } .tracking-card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; border-bottom: 1px solid var(--brez-line); padding-bottom: 16px; } .tracking-order-id { font-weight: 900; color: var(--brez-cream); } .tracking-status-badge { padding: 6px 12px; border-radius: var(--brez-radius-pill); font-size: 0.8rem; font-weight: 800; } .tracking-stack { display: flex; flex-direction: column; gap: 16px; } .tracking-stack-sm { display: flex; flex-direction: column; gap: 8px; } .tracking-label { color: var(--brez-muted); font-weight: 700; font-size: 0.8rem; text-transform: uppercase; } .tracking-products { font-weight: 800; line-height: 1.4; } .tracking-processing { background: #0c0c0c; border: 1px solid var(--brez-line); padding: 20px; border-radius: var(--brez-radius-md); text-align: center; font-weight: 700; color: var(--brez-muted); font-size: 0.9rem; } .tracking-extra { margin-top: 16px; } .tracking-ship-box { display: none; flex-direction: column; gap: 16px; padding-top: 16px; border-top: 1px dashed var(--brez-line); } .tracking-ship-row { display: flex; justify-content: space-between; gap: 12px; } .tracking-ship-label { color: var(--brez-muted); font-weight: 700; } .tracking-ship-val { font-weight: 800; } .tracking-external-btn { width: 100%; margin-top: 12px; min-height: 48px; } .tracking-notice { text-align: center; padding: 40px; } .tracking-notice-text { margin-bottom: 20px; } .tracking-notice-error { color: #ef4444; font-weight: 800; } .tracking-item-row { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .tracking-item-name { font-weight: 700; color: var(--brez-cream); min-width: 0; overflow-wrap: anywhere; } .tracking-item-qty { color: var(--brez-muted); font-size: 0.8rem; white-space: nowrap; } .tracking-item-price { font-weight: 800; color: var(--brez-cream); white-space: nowrap; } .tracking-total-row { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--brez-line); font-size: 1rem; } .tracking-total-label { font-weight: 900; color: var(--brez-cream); } .tracking-total-val { font-weight: 900; color: var(--brez-gold); font-size: 1.1rem; white-space: nowrap; } .tracking-delivery { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--brez-line); } .tracking-delivery-title { font-size: 0.9rem; color: var(--brez-muted); text-transform: uppercase; margin-bottom: 12px; letter-spacing: 0.05em; font-weight: 800; } .tracking-delivery-name { font-weight: 700; font-size: 1rem; margin-bottom: 4px; color: var(--brez-cream); } .tracking-delivery-sub { font-size: 0.9rem; color: var(--brez-muted); line-height: 1.4; margin: 0; overflow-wrap: anywhere; } .tracking-alert { padding: 14px; border-radius: 12px; font-size: 0.85rem; margin-bottom: 16px; font-weight: 700; display: flex; flex-direction: column; gap: 4px; } .tracking-alert-error { background: rgba(239, 68, 68, 0.08); border: 1.5px solid rgba(239, 68, 68, 0.5); color: #f87171; } .tracking-alert-warn { background: rgba(212, 175, 55, 0.08); border: 1.5px solid var(--brez-line); color: var(--brez-gold-soft); } .tracking-alert-sub { font-weight: 500; opacity: 0.95; } .tracking-pending-box { background: #0d0d0d; border: 1.5px solid var(--brez-line); padding: 20px; border-radius: 16px; color: var(--brez-cream); } .tracking-pending-title { margin-bottom: 12px; font-weight: 800; font-size: 0.95rem; color: var(--brez-gold); } .tracking-pending-sub { margin-bottom: 20px; font-size: 0.85rem; line-height: 1.4; color: var(--brez-body); } .tracking-pending-actions { display: flex; flex-direction: column; gap: 10px; } .tracking-pay-btn { background: var(--brez-gold); color: #050505; padding: 12px; border-radius: 8px; text-decoration: none; font-weight: 800; text-align: center; font-size: 0.9rem; display: none; min-height: 48px; align-content: center; } .tracking-pay-btn.tracking-pay-visible { display: block; } .tracking-support-btn { background: transparent; border: 1px solid var(--brez-line); color: var(--brez-cream); padding: 12px 8px; border-radius: 8px; text-decoration: none; font-weight: 800; text-align: center; font-size: 0.8rem; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; } .tracking-cancel-btn { background: transparent; color: #ef4444; border: 1px solid #ef4444; padding: 12px; border-radius: 8px; font-weight: 700; font-size: 0.85rem; margin-top: 10px; cursor: pointer; width: 100%; min-height: 48px; } .tracking-cancel-btn:disabled { opacity: 0.6; cursor: wait; } .tracking-cancelled-box { background: rgba(239, 68, 68, 0.06); border: 1.5px solid rgba(239, 68, 68, 0.5); padding: 20px; border-radius: 16px; color: var(--brez-cream); } .tracking-cancelled-title { margin-bottom: 12px; font-weight: 800; font-size: 0.95rem; color: #f87171; } .tracking-cancelled-sub { margin-bottom: 20px; font-size: 0.85rem; line-height: 1.4; color: var(--brez-body); } .tracking-wa-btn { background: #ef4444; color: white; padding: 12px; border-radius: 8px; text-decoration: none; font-weight: 800; text-align: center; font-size: 0.9rem; min-height: 48px; align-content: center; } .tracking-download-link { display: block; background: var(--brez-gold); color: #050505; padding: 14px; border-radius: 10px; text-decoration: none; font-weight: 800; text-align: center; margin: 8px 0; min-height: 52px; align-content: center; overflow-wrap: anywhere; } .tracking-downloads-box { background: rgba(97, 196, 84, 0.07); border: 1.5px solid rgba(97, 196, 84, 0.45); padding: 20px; border-radius: 16px; color: var(--brez-cream); } .tracking-downloads-title { font-weight: 800; margin-bottom: 12px; color: #61c454; } .tracking-downloads-note { font-size: 0.8rem; margin-top: 10px; color: var(--brez-muted); margin-bottom: 0; overflow-wrap: anywhere; } /* Estados dinamicos de pedido (inyectados por el modulo de tracking) */ .status-pending, .status-pending_payment, .order-status-badge.pending, .order-status-badge.pending_payment, .status-delivered, .order-status-badge.delivered { background: rgba(212, 175, 55, 0.15); color: var(--brez-gold); border: 1px solid rgba(212, 175, 55, 0.3); font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; padding: 6px 12px; border-radius: 999px; display: inline-block; white-space: nowrap; } .status-confirmed, .order-status-badge.confirmed { background: rgba(97, 196, 84, 0.15); color: #61c454; border: 1px solid rgba(97, 196, 84, 0.3); font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; padding: 6px 12px; border-radius: 999px; display: inline-block; white-space: nowrap; } .status-shipped, .order-status-badge.shipped { background: rgba(212, 175, 55, 0.15); color: var(--brez-gold); border: 1px solid rgba(212, 175, 55, 0.3); font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; padding: 6px 12px; border-radius: 999px; display: inline-block; white-space: nowrap; } .status-cancelled, .order-status-badge.cancelled { background: rgba(239, 68, 68, 0.15); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.3); font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; padding: 6px 12px; border-radius: 999px; display: inline-block; white-space: nowrap; } @media (max-width: 768px) { .tracking-card-premium { padding: 22px 18px; } } /* ============ Paginas legales ============ */ .legal-page-main { padding-top: clamp(90px, 10vw, 140px); padding-bottom: var(--brez-section-gap); } .legal-narrow { max-width: 800px; margin: 0 auto; } .legal-intro { margin-bottom: 40px; text-align: center; } .legal-intro h1 { font-size: clamp(1.8rem, 3vw, 2.3rem); margin-bottom: 12px; } .legal-intro p { color: var(--brez-muted); font-weight: 600; margin: 0; } .legal-card-premium { background: var(--brez-panel); padding: 48px; border-radius: var(--brez-radius-lg); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); border: 1px solid var(--brez-line); } .legal-card-premium h1 { font-family: var(--brez-serif); } .legal-section { margin-bottom: 40px; } .legal-section:last-child { margin-bottom: 0; } .legal-lead { font-size: 1.1rem; line-height: 1.8; color: var(--brez-body); margin: 0; } .legal-body { line-height: 1.7; color: var(--brez-body); margin: 0; } .legal-body-spaced { margin-bottom: 20px; } .legal-h3 { display: flex; align-items: center; gap: 12px; font-size: 1.4rem; margin-bottom: 20px; color: var(--brez-gold); font-family: var(--brez-serif); font-weight: 800; line-height: 1.3; } .legal-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; } .legal-step { display: flex; gap: 12px; align-items: flex-start; background: #0d0d0d; padding: 20px; border-radius: var(--brez-radius-md); border: 1px solid var(--brez-line); } .legal-step strong { display: block; margin-bottom: 4px; color: var(--brez-cream); } .legal-step-num { font-weight: 800; color: var(--brez-gold); flex-shrink: 0; } .legal-check { font-weight: 800; color: #61c454; flex-shrink: 0; } .legal-data-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; } .legal-data-item { background: #0d0d0d; padding: 16px; border-radius: var(--brez-radius-md); border: 1px solid var(--brez-line); display: flex; gap: 12px; align-items: center; font-weight: 600; color: var(--brez-cream); } .legal-data-emoji { color: var(--brez-gold); font-size: 1.2rem; flex-shrink: 0; } .legal-closing { border-top: 1px solid var(--brez-line); padding-top: 32px; } .legal-fine { font-size: 0.85rem; color: var(--brez-muted); font-weight: 500; margin: 0; } @media (max-width: 768px) { .legal-h3 { font-size: 1.2rem; } .legal-card-premium { padding: 28px 20px; } .legal-section { margin-bottom: 28px; } }