:root { /* Tema Dark (base/por defecto). El atributo data-theme en lo cambia en vivo — ver js/theme.js. Los tres temas comparten exactamente el mismo set de tokens; solo cambian los valores, nunca la arquitectura. Por eso Dark/White/Grey se sienten "un mismo sistema". */ --bg: #121217; --bg-dark: #080b0d; --text: #ffffff; --text-dark: #ffffff; /* #6c7a89 medía 4.25-4.49:1 sobre los fondos oscuros (por debajo del 4.5:1 de WCAG AA para texto normal); este tono un poco más claro pasa holgadamente sin notarse "gris pálido". */ --muted: #8291a3; --muted-dark: #8291a3; --accent: #4865ff; --accent-hover: #6b84ff; --border: rgba(255, 255, 255, 0.12); --border-dark: rgba(255, 255, 255, 0.14); --surface: #1a1a22; --surface-2: #24242e; --shadow: rgba(0, 0, 0, 0.4); --shadow-soft: rgba(0, 0, 0, 0.28); --header-bg: rgba(8, 11, 13, 0.72); --hero-bg-image: url("../assets/hero/astrc-hero-bg-dark.png"); --hero-glow: rgba(72, 101, 255, 0.16); --radius: 18px; --ease: cubic-bezier(0.16, 1, 0.3, 1); --font: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; /* Ritmo vertical entre secciones de contenido (Así de simple, Tiendas, CTA final). El Hero usa su propio valor (más grande, es la "gran entrada") y no este token. */ --space-section-y: 96px; --space-section-y-mobile: 64px; } [data-theme="light"] { --bg: #ffffff; --bg-dark: #ffffff; --text: #111111; --text-dark: #111111; --muted: #6e6e73; --muted-dark: #6e6e73; --accent: #4865ff; --accent-hover: #2f4eef; --border: #e5e5e7; --border-dark: #e5e5e7; --surface: #f7f7f8; --surface-2: #eeeeef; --shadow: rgba(17, 17, 20, 0.10); --shadow-soft: rgba(17, 17, 20, 0.06); --header-bg: rgba(255, 255, 255, 0.72); --hero-bg-image: url("../assets/hero/astrc-hero-bg-white.png"); --hero-glow: rgba(72, 101, 255, 0.10); } [data-theme="grey"] { --bg: #e9e9ec; --bg-dark: #e9e9ec; --text: #17171a; --text-dark: #17171a; --muted: #63636a; --muted-dark: #63636a; --accent: #4865ff; --accent-hover: #2f4eef; --border: #d3d3d9; --border-dark: #d3d3d9; --surface: #f5f5f7; --surface-2: #ffffff; --shadow: rgba(23, 23, 26, 0.12); --shadow-soft: rgba(23, 23, 26, 0.07); --header-bg: rgba(233, 233, 236, 0.72); --hero-bg-image: url("../assets/hero/astrc-hero-bg-grey.png"); --hero-glow: rgba(72, 101, 255, 0.12); } /* Dentro de una tienda (tienda.html) la protagonista es la marca del cliente, no ASTRC. El tema (dark/light/grey) sigue controlando fondo/texto/superficies con normalidad; acá solo se fija un acento neutro por defecto. Si la tienda tiene colorPrimario, tienda-detalle.js sobreescribe --accent en línea sobre este mismo elemento y gana. */ body.tienda-experiencia { --accent: #52525c; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.5; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; transition: background-color 0.3s ease, color 0.3s ease; } a { color: inherit; } img, svg { display: block; max-width: 100%; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* Nav */ .nav { position: sticky; top: 0; z-index: 50; background: var(--header-bg); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--border); transition: background-color 0.3s ease, border-color 0.3s ease; } .nav-inner { max-width: 1120px; margin: 0 auto; padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; } .brand { display: flex; align-items: center; gap: 8px; font-weight: 800; letter-spacing: -0.02em; font-size: 20px; text-decoration: none; } /* Header de tienda.html: pertenece visualmente al cliente, no a ASTRC */ .tienda-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); font-weight: 700; font-size: 17px; } .tienda-brand-logo { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--surface); color: var(--muted); font-size: 14px; font-weight: 800; flex-shrink: 0; } .tienda-brand-logo img { width: 100%; height: 100%; object-fit: cover; } .brand-logo-img { height: 26px; width: auto; } /* Los 3 PNG (astrc-logo-dark/white/grey) comparten el mismo lienzo (2172x724) pero el trazo del isotipo NO está dibujado con el mismo tamaño ni el mismo margen interno dentro de ese lienzo en los tres. Medido con análisis de píxeles sobre el render real (bounding box del contenido no transparente dentro del ya escalado por CSS, no solo el tamaño del archivo): - dark: alto de tinta 11.375px, arranque horizontal en x=188.125 (a height:26px) - white: alto de tinta 11.625px, arranque horizontal en x=187.000 (a height:26px) - grey: a height:26px medía ~13-14px de alto (marca dibujada más grande dentro del lienzo) y arrancaba ~3px más a la izquierda que dark/white. Se corrige SOLO con CSS (altura de caja + margin-left), sin tocar los PNG: la altura de este logo se reduce a 23.86px (calibrado empíricamente contra el render real, no solo por proporción del archivo) hasta que el alto de tinta coincide con dark/white (11.5px, quedando entre ambos), y se corrige el corrimiento horizontal con un margin-left para que la "A" arranque en el mismo punto que en los otros dos temas. Ver verificación con Playwright en el historial: con esto los 3 temas quedan dentro de 0.25px de alto y arrancan en el mismo x. */ [data-theme="light"] .brand-logo-img { margin-left: 1.1px; } [data-theme="grey"] .brand-logo-img { height: 23.86px; margin-left: 3.1px; } .nav-links { display: flex; align-items: center; gap: 32px; font-size: 14px; } .nav-links a { text-decoration: none; color: var(--text); } .nav-links a:hover { color: var(--accent); } /* Subrayado animado — solo en los links de primer nivel (Inicio, Explorar, Contacto), no en los items del menú "Explorar" ni en las opciones de tema, que ya tienen su propio hover (fondo resaltado). */ .nav-links > a, .nav-links > .nav-dropdown > .nav-dropdown-link { position: relative; } .nav-links > a::after, .nav-links > .nav-dropdown > .nav-dropdown-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.25s var(--ease); } .nav-links > a:hover::after, .nav-links > a:focus-visible::after, .nav-links > .nav-dropdown > .nav-dropdown-link:hover::after, .nav-links > .nav-dropdown > .nav-dropdown-link:focus-visible::after { transform: scaleX(1); } /* Nav dropdown (ver "Tiendas") */ .nav-dropdown { position: relative; display: inline-flex; align-items: center; gap: 2px; } .nav-dropdown-trigger { display: inline-flex; align-items: center; justify-content: center; background: none; border: none; /* Área táctil ampliada a >=44px en ambos lados (antes medía 36x33 — el chevron es chico, 10x7). El margen negativo compensa el padding extra para no empujar el layout: vertical queda totalmente invisible (-19 cancela +19), horizontal conserva el mismo respiro visible que ya existía junto a "Explorar"/"Contacto" (footprint neto +13px, igual que antes: 18-5=13). */ padding: 19px 18px; margin: -19px -5px; cursor: pointer; color: var(--muted); transition: color 0.2s var(--ease), transform 0.15s var(--ease); } .nav-dropdown-trigger:hover { color: var(--accent); } .nav-dropdown-trigger:active { transform: scale(0.92); } .nav-dropdown-trigger .chevron { transition: transform 0.2s ease; } .nav-dropdown-trigger[aria-expanded="true"] .chevron { transform: rotate(180deg); } .nav-dropdown-menu { position: absolute; /* Sin espacio muerto entre el trigger y el menú: si hay separación visual acá, mover el cursor de "Explorar" al menú cruza una zona sin hover y lo cierra antes de tiempo. El respiro visual lo da el padding interno, no un gap en "top". */ top: 100%; left: 50%; transform: translateX(-50%) translateY(-6px); min-width: 190px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 8px; box-shadow: 0 16px 32px var(--shadow), 0 4px 24px var(--hero-glow); opacity: 0; pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease, background-color 0.3s ease, border-color 0.3s ease; z-index: 60; } .nav-dropdown-menu.open { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } .nav-links .nav-dropdown-menu a { display: block; padding: 10px 14px; border-radius: 8px; font-size: 14px; border-bottom: none; } .nav-links .nav-dropdown-menu a:hover, .nav-links .nav-dropdown-menu a:focus-visible { background: var(--surface-2); color: var(--accent); } /* Selector de tema — mismo componente .nav-dropdown, anclado a la derecha para no salirse de la pantalla en mobile (el de "Explorar" queda centrado, este no). */ .theme-dropdown .nav-dropdown-menu { left: auto; right: 0; transform: translateY(-6px); min-width: 150px; } .theme-dropdown .nav-dropdown-menu.open { transform: translateY(0); } /* Cuenta (Fase 5A) — mismo componente .nav-dropdown, mismo anclaje a la derecha que el selector de tema, para no salirse de la pantalla. */ .account-dropdown .nav-dropdown-menu { left: auto; right: 0; transform: translateY(-6px); min-width: 170px; } .account-dropdown .nav-dropdown-menu.open { transform: translateY(0); } .theme-option { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; padding: 10px 14px; border-radius: 8px; font-family: var(--font); font-size: 14px; color: var(--text); background: none; border: none; cursor: pointer; transition: background-color 0.15s ease, color 0.2s ease; } .theme-option:hover, .theme-option:focus-visible { background: var(--surface-2); color: var(--accent); } .theme-option.active { color: var(--accent-hover); font-weight: 600; } .theme-option.active::after { content: "✓"; font-size: 12px; } .nav-right { display: flex; align-items: center; gap: 20px; } .nav-search-trigger { display: flex; align-items: center; justify-content: center; background: none; border: none; /* 43x43 medía antes (1px corto del mínimo táctil de 44px). El margen no compensa el padding entero a propósito: conserva el mismo respiro visible que ya tenía junto a los demás íconos del header (footprint neto +4px). */ padding: 13px; margin: -9px; color: var(--text); cursor: pointer; transition: color 0.2s var(--ease), transform 0.15s var(--ease); } .nav-search-trigger:hover { color: var(--accent); } .nav-search-trigger:active { transform: scale(0.92); } .cart-link { position: relative; display: flex; align-items: center; padding: 12px; margin: -12px; color: var(--text); text-decoration: none; transition: color 0.2s var(--ease), transform 0.15s var(--ease); } .cart-link:hover { color: var(--accent); } .cart-link:active { transform: scale(0.92); } .cart-count { position: absolute; /* +12px respecto a los valores originales: compensa el padding que ahora tiene .cart-link (área táctil ampliada) para que el badge siga pegado al ícono. */ top: 4px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--accent); color: #ffffff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; } /* Feedback al agregar un producto: un pequeño "salto" en el badge del carrito cuando el total sube (ver actualizarContadorCarrito en js/carrito.js). No se dispara en la carga inicial de la página ni al restar/eliminar productos. */ @keyframes cart-count-bump { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } } .cart-count.bump { animation: cart-count-bump 0.45s var(--ease); } .nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; /* Medía 46x40 (el icono de 3 barras es más ancho que alto, así que el lado corto -alto- quedaba bajo el mínimo táctil de 44px). Padding vertical más grande, compensado del todo por el margen: cero impacto de layout. */ padding: 15px 12px; margin: -15px -12px; } .nav-toggle span { width: 22px; height: 2px; background: var(--text); display: block; } /* Hero */ .hero { position: relative; z-index: 0; overflow: hidden; min-height: 86vh; background-color: var(--bg-dark); background-image: var(--hero-bg-image); background-size: cover; background-position: center; background-repeat: no-repeat; color: var(--text-dark); display: flex; align-items: center; padding: 120px 24px; transition: background-color 0.3s ease; } .hero-inner { position: relative; z-index: 1; max-width: 1120px; width: 100%; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 56px; } .hero-copy { text-align: left; } /* Entrada escalonada del hero (ver js/hero.js, usa la librería "motion"). Estado inicial en CSS puro para que no haya parpadeo mientras carga el módulo JS. */ .hero-animate { opacity: 0; } @media (prefers-reduced-motion: reduce) { .hero-animate { opacity: 1 !important; } } .eyebrow { text-transform: uppercase; letter-spacing: 0.14em; font-size: 12px; font-weight: 600; color: var(--muted-dark); margin: 0 0 20px; } .hero h1 { font-size: clamp(2.4rem, 5.5vw, 4.4rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; margin: 0 0 24px; } .accent-text { color: var(--accent); } .hero-sub { font-size: clamp(1rem, 1.6vw, 1.2rem); color: var(--muted-dark); max-width: 440px; margin: 0 0 36px; line-height: 1.5; } .hero-ctas { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; } .cta { display: inline-block; background: var(--accent); color: #ffffff; text-decoration: none; font-weight: 600; font-size: 15px; padding: 14px 32px; border-radius: 999px; transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background-color 0.25s var(--ease); } .cta:hover { background: var(--accent-hover); transform: translateY(-2px); /* color-mix, no un rgba fijo: si una tienda define colorPrimario (--accent pasa a ser, por ej., naranja), este brillo debe seguir a ese color en vez de quedarse azul ASTRC — antes rompía la identidad de la tienda justo al hacer hover sobre su botón principal. */ box-shadow: 0 12px 24px color-mix(in srgb, var(--accent) 35%, transparent); } .cta:active { transform: translateY(0); } .cta-light { /* Invertido respecto a bg-dark/text-dark: así siempre contrasta, sea cual sea el tema (blanco-sobre-negro en Dark, negro-sobre-blanco en White/Grey), sin quedar invisible. */ background: var(--text-dark); color: var(--bg-dark); } .cta-light:hover { box-shadow: 0 12px 24px var(--shadow-soft); } .cta-arrow { display: inline-block; margin-left: 6px; transition: transform 0.2s ease; } .cta:hover .cta-arrow { transform: translateX(3px); } .cta-text { display: inline-flex; align-items: center; gap: 10px; color: var(--text-dark); text-decoration: none; font-weight: 600; font-size: 14px; } .cta-text:hover { color: var(--accent); } .cta-text .play-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--text-dark) 35%, transparent); transition: border-color 0.2s ease, transform 0.2s ease; } .cta-text:hover .play-icon { border-color: var(--accent); transform: scale(1.05); } /* Hero — cápsula ASTRC (astrc-personaje-capsula.png, recortada con clip-path a su silueta real; ver detalle en la regla .hero-capsule-img más abajo) */ .hero-visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 320px; } .hero-capsule { position: relative; width: min(100%, 460px); transition: transform 0.3s ease; } /* Resplandor ambiental detrás de la cápsula, sin tocar el asset: un radial-gradient difuminado que le da profundidad al personaje contra el fondo del Hero. Usa --hero-glow, el mismo token ya calibrado por tema (más sutil en White/Grey, algo más presente en Dark) que hasta ahora solo se usaba en la sombra del dropdown. */ .hero-capsule::before { content: ''; position: absolute; inset: -18%; background: radial-gradient(circle, var(--hero-glow) 0%, transparent 68%); filter: blur(18px); pointer-events: none; } .hero-capsule-img { width: 100%; height: auto; display: block; /* El PNG trae su propio fondo negro "quemado". Una máscara elíptica genérica recortaba contenido real (luces inferiores izquierdas, borde del aro). Este clip-path sigue el contorno REAL del personaje/cápsula: se generó analizando los píxeles del propio asset (contorno por fila + 28px de margen de seguridad hacia afuera), así que no hay ningún punto del recorte que caiga sobre contenido visible — solo sobre el fondo negro que lo rodea. Si se reemplaza astrc-personaje-capsula.png por otro asset con una silueta distinta, este clip-path debe regenerarse (ver notas de la Fase 1 en el historial del proyecto). */ clip-path: polygon(52.17% 0.00%, 51.04% 0.78%, 49.54% 1.56%, 48.20% 2.34%, 47.06% 3.13%, 46.09% 3.91%, 45.29% 4.69%, 44.64% 5.47%, 44.18% 6.25%, 43.75% 7.03%, 43.34% 7.81%, 42.94% 8.59%, 42.55% 9.38%, 42.29% 10.16%, 42.09% 10.94%, 41.90% 11.72%, 41.51% 12.50%, 41.17% 13.28%, 40.95% 14.06%, 40.87% 14.84%, 40.79% 15.63%, 40.56% 16.41%, 40.19% 17.19%, 39.84% 17.97%, 39.58% 18.75%, 39.40% 19.53%, 39.28% 20.31%, 39.18% 21.09%, 39.14% 21.88%, 39.14% 22.66%, 39.14% 23.44%, 39.16% 24.22%, 39.24% 25.00%, 39.35% 25.78%, 39.55% 26.56%, 39.71% 27.34%, 40.00% 28.13%, 40.47% 28.91%, 41.19% 29.69%, 41.20% 30.47%, 40.25% 31.25%, 35.01% 32.03%, 29.95% 32.81%, 25.19% 33.59%, 22.90% 34.38%, 22.90% 35.16%, 22.90% 35.94%, 22.98% 36.72%, 23.13% 37.50%, 23.29% 38.28%, 23.42% 39.06%, 23.56% 39.84%, 23.72% 40.63%, 23.87% 41.41%, 24.03% 42.19%, 24.16% 42.97%, 24.31% 43.75%, 24.46% 44.53%, 24.62% 45.31%, 24.77% 46.09%, 24.66% 46.88%, 24.20% 47.66%, 23.53% 48.44%, 22.85% 49.22%, 22.14% 50.00%, 21.48% 50.78%, 20.82% 51.56%, 20.20% 52.34%, 19.66% 53.13%, 19.09% 53.91%, 18.53% 54.69%, 17.97% 55.47%, 17.36% 56.25%, 16.79% 57.03%, 16.29% 57.81%, 15.80% 58.59%, 15.37% 59.38%, 14.93% 60.16%, 14.43% 60.94%, 14.03% 61.72%, 13.59% 62.50%, 13.24% 63.28%, 12.87% 64.06%, 12.53% 64.84%, 12.19% 65.63%, 11.90% 66.41%, 11.56% 67.19%, 11.28% 67.97%, 11.02% 68.75%, 10.84% 69.53%, 10.74% 70.31%, 10.63% 71.09%, 10.50% 71.88%, 10.39% 72.66%, 10.29% 73.44%, 10.19% 74.22%, 10.17% 75.00%, 10.11% 75.78%, 10.08% 76.56%, 10.06% 77.34%, 10.06% 78.13%, 10.06% 78.91%, 10.10% 79.69%, 10.17% 80.47%, 10.26% 81.25%, 10.37% 82.03%, 10.51% 82.81%, 10.66% 83.59%, 10.87% 84.38%, 11.10% 85.16%, 11.38% 85.94%, 11.69% 86.72%, 12.02% 87.50%, 12.36% 88.28%, 12.81% 89.06%, 13.29% 89.84%, 13.85% 90.63%, 14.43% 91.41%, 15.13% 92.19%, 15.93% 92.97%, 16.83% 93.75%, 17.79% 94.53%, 18.93% 95.31%, 20.12% 96.09%, 21.60% 96.88%, 23.27% 97.66%, 25.54% 98.44%, 28.42% 99.22%, 29.13% 99.61%, 51.91% 99.61%, 52.63% 99.22%, 55.75% 98.44%, 58.60% 97.66%, 60.75% 96.88%, 62.83% 96.09%, 64.36% 95.31%, 66.09% 94.53%, 67.86% 93.75%, 69.40% 92.97%, 70.66% 92.19%, 71.72% 91.41%, 72.71% 90.63%, 73.82% 89.84%, 74.83% 89.06%, 75.83% 88.28%, 76.72% 87.50%, 77.63% 86.72%, 78.47% 85.94%, 79.30% 85.16%, 80.03% 84.38%, 80.78% 83.59%, 81.52% 82.81%, 82.21% 82.03%, 82.85% 81.25%, 83.44% 80.47%, 83.98% 79.69%, 84.52% 78.91%, 85.02% 78.13%, 85.51% 77.34%, 86.02% 76.56%, 86.51% 75.78%, 86.93% 75.00%, 87.39% 74.22%, 87.74% 73.44%, 88.14% 72.66%, 88.50% 71.88%, 88.84% 71.09%, 89.18% 70.31%, 89.59% 69.53%, 89.95% 68.75%, 90.30% 67.97%, 90.62% 67.19%, 90.96% 66.41%, 91.29% 65.63%, 91.60% 64.84%, 91.87% 64.06%, 92.09% 63.28%, 92.24% 62.50%, 92.35% 61.72%, 92.43% 60.94%, 92.49% 60.16%, 92.53% 59.38%, 92.56% 58.59%, 92.57% 57.81%, 92.57% 57.03%, 92.57% 56.25%, 92.55% 55.47%, 92.52% 54.69%, 92.49% 53.91%, 92.46% 53.13%, 92.44% 52.34%, 92.39% 51.56%, 92.32% 50.78%, 92.23% 50.00%, 92.14% 49.22%, 92.07% 48.44%, 91.97% 47.66%, 91.86% 46.88%, 91.71% 46.09%, 91.56% 45.31%, 91.42% 44.53%, 91.27% 43.75%, 91.12% 42.97%, 90.93% 42.19%, 90.72% 41.41%, 90.49% 40.63%, 90.29% 39.84%, 90.07% 39.06%, 89.79% 38.28%, 89.52% 37.50%, 89.22% 36.72%, 88.90% 35.94%, 88.60% 35.16%, 88.24% 34.38%, 87.87% 33.59%, 87.50% 32.81%, 87.07% 32.03%, 86.62% 31.25%, 86.10% 30.47%, 85.56% 29.69%, 85.02% 28.91%, 84.42% 28.13%, 83.78% 27.34%, 82.99% 26.56%, 82.13% 25.78%, 81.30% 25.00%, 80.08% 24.22%, 78.52% 23.44%, 76.29% 22.66%, 74.15% 21.88%, 72.54% 21.09%, 71.77% 20.31%, 71.69% 19.53%, 71.69% 18.75%, 71.67% 17.97%, 71.61% 17.19%, 71.61% 16.41%, 71.68% 15.63%, 71.70% 14.84%, 71.70% 14.06%, 71.67% 13.28%, 71.54% 12.50%, 71.40% 11.72%, 71.21% 10.94%, 71.02% 10.16%, 70.81% 9.38%, 70.60% 8.59%, 70.33% 7.81%, 70.01% 7.03%, 69.62% 6.25%, 69.18% 5.47%, 68.72% 4.69%, 68.16% 3.91%, 67.52% 3.13%, 66.75% 2.34%, 65.83% 1.56%, 64.70% 0.78%, 63.89% 0.00%); -webkit-clip-path: polygon(52.17% 0.00%, 51.04% 0.78%, 49.54% 1.56%, 48.20% 2.34%, 47.06% 3.13%, 46.09% 3.91%, 45.29% 4.69%, 44.64% 5.47%, 44.18% 6.25%, 43.75% 7.03%, 43.34% 7.81%, 42.94% 8.59%, 42.55% 9.38%, 42.29% 10.16%, 42.09% 10.94%, 41.90% 11.72%, 41.51% 12.50%, 41.17% 13.28%, 40.95% 14.06%, 40.87% 14.84%, 40.79% 15.63%, 40.56% 16.41%, 40.19% 17.19%, 39.84% 17.97%, 39.58% 18.75%, 39.40% 19.53%, 39.28% 20.31%, 39.18% 21.09%, 39.14% 21.88%, 39.14% 22.66%, 39.14% 23.44%, 39.16% 24.22%, 39.24% 25.00%, 39.35% 25.78%, 39.55% 26.56%, 39.71% 27.34%, 40.00% 28.13%, 40.47% 28.91%, 41.19% 29.69%, 41.20% 30.47%, 40.25% 31.25%, 35.01% 32.03%, 29.95% 32.81%, 25.19% 33.59%, 22.90% 34.38%, 22.90% 35.16%, 22.90% 35.94%, 22.98% 36.72%, 23.13% 37.50%, 23.29% 38.28%, 23.42% 39.06%, 23.56% 39.84%, 23.72% 40.63%, 23.87% 41.41%, 24.03% 42.19%, 24.16% 42.97%, 24.31% 43.75%, 24.46% 44.53%, 24.62% 45.31%, 24.77% 46.09%, 24.66% 46.88%, 24.20% 47.66%, 23.53% 48.44%, 22.85% 49.22%, 22.14% 50.00%, 21.48% 50.78%, 20.82% 51.56%, 20.20% 52.34%, 19.66% 53.13%, 19.09% 53.91%, 18.53% 54.69%, 17.97% 55.47%, 17.36% 56.25%, 16.79% 57.03%, 16.29% 57.81%, 15.80% 58.59%, 15.37% 59.38%, 14.93% 60.16%, 14.43% 60.94%, 14.03% 61.72%, 13.59% 62.50%, 13.24% 63.28%, 12.87% 64.06%, 12.53% 64.84%, 12.19% 65.63%, 11.90% 66.41%, 11.56% 67.19%, 11.28% 67.97%, 11.02% 68.75%, 10.84% 69.53%, 10.74% 70.31%, 10.63% 71.09%, 10.50% 71.88%, 10.39% 72.66%, 10.29% 73.44%, 10.19% 74.22%, 10.17% 75.00%, 10.11% 75.78%, 10.08% 76.56%, 10.06% 77.34%, 10.06% 78.13%, 10.06% 78.91%, 10.10% 79.69%, 10.17% 80.47%, 10.26% 81.25%, 10.37% 82.03%, 10.51% 82.81%, 10.66% 83.59%, 10.87% 84.38%, 11.10% 85.16%, 11.38% 85.94%, 11.69% 86.72%, 12.02% 87.50%, 12.36% 88.28%, 12.81% 89.06%, 13.29% 89.84%, 13.85% 90.63%, 14.43% 91.41%, 15.13% 92.19%, 15.93% 92.97%, 16.83% 93.75%, 17.79% 94.53%, 18.93% 95.31%, 20.12% 96.09%, 21.60% 96.88%, 23.27% 97.66%, 25.54% 98.44%, 28.42% 99.22%, 29.13% 99.61%, 51.91% 99.61%, 52.63% 99.22%, 55.75% 98.44%, 58.60% 97.66%, 60.75% 96.88%, 62.83% 96.09%, 64.36% 95.31%, 66.09% 94.53%, 67.86% 93.75%, 69.40% 92.97%, 70.66% 92.19%, 71.72% 91.41%, 72.71% 90.63%, 73.82% 89.84%, 74.83% 89.06%, 75.83% 88.28%, 76.72% 87.50%, 77.63% 86.72%, 78.47% 85.94%, 79.30% 85.16%, 80.03% 84.38%, 80.78% 83.59%, 81.52% 82.81%, 82.21% 82.03%, 82.85% 81.25%, 83.44% 80.47%, 83.98% 79.69%, 84.52% 78.91%, 85.02% 78.13%, 85.51% 77.34%, 86.02% 76.56%, 86.51% 75.78%, 86.93% 75.00%, 87.39% 74.22%, 87.74% 73.44%, 88.14% 72.66%, 88.50% 71.88%, 88.84% 71.09%, 89.18% 70.31%, 89.59% 69.53%, 89.95% 68.75%, 90.30% 67.97%, 90.62% 67.19%, 90.96% 66.41%, 91.29% 65.63%, 91.60% 64.84%, 91.87% 64.06%, 92.09% 63.28%, 92.24% 62.50%, 92.35% 61.72%, 92.43% 60.94%, 92.49% 60.16%, 92.53% 59.38%, 92.56% 58.59%, 92.57% 57.81%, 92.57% 57.03%, 92.57% 56.25%, 92.55% 55.47%, 92.52% 54.69%, 92.49% 53.91%, 92.46% 53.13%, 92.44% 52.34%, 92.39% 51.56%, 92.32% 50.78%, 92.23% 50.00%, 92.14% 49.22%, 92.07% 48.44%, 91.97% 47.66%, 91.86% 46.88%, 91.71% 46.09%, 91.56% 45.31%, 91.42% 44.53%, 91.27% 43.75%, 91.12% 42.97%, 90.93% 42.19%, 90.72% 41.41%, 90.49% 40.63%, 90.29% 39.84%, 90.07% 39.06%, 89.79% 38.28%, 89.52% 37.50%, 89.22% 36.72%, 88.90% 35.94%, 88.60% 35.16%, 88.24% 34.38%, 87.87% 33.59%, 87.50% 32.81%, 87.07% 32.03%, 86.62% 31.25%, 86.10% 30.47%, 85.56% 29.69%, 85.02% 28.91%, 84.42% 28.13%, 83.78% 27.34%, 82.99% 26.56%, 82.13% 25.78%, 81.30% 25.00%, 80.08% 24.22%, 78.52% 23.44%, 76.29% 22.66%, 74.15% 21.88%, 72.54% 21.09%, 71.77% 20.31%, 71.69% 19.53%, 71.69% 18.75%, 71.67% 17.97%, 71.61% 17.19%, 71.61% 16.41%, 71.68% 15.63%, 71.70% 14.84%, 71.70% 14.06%, 71.67% 13.28%, 71.54% 12.50%, 71.40% 11.72%, 71.21% 10.94%, 71.02% 10.16%, 70.81% 9.38%, 70.60% 8.59%, 70.33% 7.81%, 70.01% 7.03%, 69.62% 6.25%, 69.18% 5.47%, 68.72% 4.69%, 68.16% 3.91%, 67.52% 3.13%, 66.75% 2.34%, 65.83% 1.56%, 64.70% 0.78%, 63.89% 0.00%); } .hero-orbit-icons { position: absolute; inset: 0; pointer-events: none; } .orbit-icon { position: absolute; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); color: var(--text-dark); box-shadow: 0 8px 20px var(--shadow); animation: flotar 4.5s ease-in-out infinite; } .orbit-icon-1 { top: 6%; left: 2%; animation-delay: 0s; } .orbit-icon-2 { top: 0%; right: 8%; animation-delay: 1.1s; } .orbit-icon-3 { bottom: 12%; right: -2%; animation-delay: 2.2s; } @keyframes flotar { /* 6px, no 10px: estos íconos son decorativos, alrededor del personaje. Con 10px se movían MÁS que la propia cápsula (8px, ver js/hero.js), invirtiendo la jerarquía visual — lo secundario no debería moverse más que el protagonista. */ 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @media (max-width: 880px) { .hero-inner { grid-template-columns: 1fr; } .hero-copy { text-align: center; } .hero-sub { margin-left: auto; margin-right: auto; } .hero-ctas { justify-content: center; } .hero-visual { margin-top: 48px; min-height: 260px; } .hero-capsule { width: min(100%, 300px); } } /* Cómo funciona */ .how-it-works { max-width: 1120px; margin: 0 auto; padding: var(--space-section-y) 24px; } .how-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; } .how-step { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; transition: background-color 0.3s ease, border-color 0.3s ease; } .how-number { display: block; font-size: 13px; font-weight: 700; /* --accent-hover, no --accent: a este tamaño --accent mide 3.8-4.3:1 contra --surface en los 3 temas (por debajo del 4.5:1 de WCAG AA para texto normal). --accent-hover es el mismo azul de marca, ajustado para pasar holgadamente (5.2-5.7:1) sin verse como un color distinto. */ color: var(--accent-hover); letter-spacing: 0.08em; margin-bottom: 14px; } .how-step h3 { font-size: 18px; font-weight: 700; line-height: 1.3; margin: 0 0 8px; } .how-step p { color: var(--muted); font-size: 14px; line-height: 1.5; margin: 0; } /* Stores */ .stores { max-width: 1120px; margin: 0 auto; padding: var(--space-section-y) 24px; } .section-head { text-align: center; margin-bottom: 56px; } .section-head h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 10px; } .section-head p { color: var(--muted); margin: 0; } .store-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 40px; } .store-search { flex: 1 1 240px; max-width: 320px; padding: 12px 18px; border: 1px solid var(--border); border-radius: 999px; font-family: var(--font); /* 16px, no 14px: evita el zoom automático de Safari en iOS al enfocar el campo. */ font-size: 16px; background: var(--bg); color: var(--text); transition: background-color 0.3s ease, border-color 0.2s var(--ease), color 0.3s ease; } .store-search:focus { outline: none; border-color: var(--accent); } .store-filters { display: flex; flex-wrap: wrap; gap: 8px; } .filter-btn { border: 1px solid var(--border); background: none; border-radius: 999px; padding: 10px 16px; font-family: var(--font); font-size: 13px; color: var(--muted); cursor: pointer; transition: border-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.15s var(--ease); } .filter-btn:hover { color: var(--text); } .filter-btn:active { transform: scale(0.96); } .filter-btn.active { border-color: var(--accent); color: var(--accent-hover); } .store-empty { text-align: center; color: var(--muted); padding: 40px 0; } .placeholder-initial { font-size: 32px; font-weight: 800; color: var(--muted); } .store-visual img, .product-visual img, .store-logo img, .product-detail-visual img, .product-thumb img, .cart-row-visual img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } /* Microinteracción de imagen: un acercamiento MUY leve al pasar el mouse sobre la card completa (no sobre la imagen sola, para que se sienta como parte del mismo gesto que la elevación de la card). Contenido dentro de .store-visual/.product-visual gracias al overflow:hidden que se les agregó, así nunca se sale del borde redondeado. */ .store-card:hover .store-visual img, .product-card:hover .product-visual img { transform: scale(1.06); } .store-visual img, .product-visual img { transition: transform 0.5s var(--ease); } .store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 260px)); justify-content: center; gap: 28px; } .store-card { display: block; text-decoration: none; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; box-shadow: 0 1px 2px var(--shadow-soft); transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), background-color 0.3s ease; } .store-card:hover { transform: translateY(-6px); border-color: var(--accent); box-shadow: 0 20px 40px var(--shadow-soft); } .store-card:active { transform: translateY(-6px) scale(0.98); } .store-card-cta { display: block; margin-top: 14px; font-size: 12px; font-weight: 600; color: var(--accent-hover); opacity: 0; transform: translateY(4px); transition: opacity 0.2s ease, transform 0.2s ease; } .store-card:hover .store-card-cta, .store-card:focus-visible .store-card-cta { opacity: 1; transform: translateY(0); } .store-visual { aspect-ratio: 1 / 1; background: var(--surface-2); border-radius: calc(var(--radius) - 8px); display: flex; align-items: center; justify-content: center; color: var(--muted); margin-bottom: 18px; overflow: hidden; transition: background-color 0.3s ease; } .store-visual svg { width: 40%; height: 40%; } .store-card h3 { font-size: 16px; font-weight: 600; line-height: 1.3; margin: 0 0 8px; } .tag { display: inline-block; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px; } /* Store page */ .store-header { max-width: 1120px; margin: 0 auto; padding: 72px 24px 32px; } .store-banner { max-width: 1120px; margin: 0 auto 40px; border-radius: var(--radius); overflow: hidden; aspect-ratio: 21 / 6; background: var(--surface); transition: background-color 0.3s ease; } .store-banner img { width: 100%; height: 100%; object-fit: cover; display: block; } .store-header-inner { max-width: 560px; margin: 0 auto; text-align: center; } .back-link { display: inline-block; font-size: 13px; color: var(--muted); text-decoration: none; margin-bottom: 32px; } .back-link:hover { color: var(--accent); } .store-logo { width: 96px; height: 96px; margin: 0 auto 20px; background: var(--surface); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--muted); } .store-logo svg { width: 42%; height: 42%; } .store-name { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; letter-spacing: -0.02em; margin: 14px 0 8px; } .store-desc { color: var(--muted); margin: 16px 0 28px; line-height: 1.5; } .store-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .secondary { display: inline-block; border: 1px solid var(--border); border-radius: 999px; padding: 14px 28px; font-weight: 600; font-size: 15px; text-decoration: none; color: var(--text); transition: border-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease); } .secondary:hover { border-color: var(--accent); color: var(--accent); } .secondary:active { transform: scale(0.97); } /* Products */ .products { max-width: 1120px; margin: 0 auto; padding: 64px 24px var(--space-section-y); } .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 280px)); justify-content: center; gap: 28px; } .product-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; text-decoration: none; color: var(--text); box-shadow: 0 1px 2px var(--shadow-soft); transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), background-color 0.3s ease; } .product-card:hover { transform: translateY(-6px); border-color: var(--accent); box-shadow: 0 20px 40px var(--shadow-soft); } .product-card:active { transform: translateY(-6px) scale(0.98); } /* Producto agotado: se sigue pudiendo abrir (puede tener variantes disponibles o volver a stock), pero se atenúa para que la falta de stock se note de un vistazo en la grilla, sin depender solo de leer el texto "Agotado" del tag. Selector con el tipo de elemento (a.product-card) a propósito: sube la especificidad por sobre .reveal.in-view (mismo número de clases), que si no le gana y deja el opacity en 1. */ a.product-card.agotado { opacity: 0.6; } a.product-card.agotado:hover { opacity: 0.8; } .product-visual { aspect-ratio: 1 / 1; background: var(--surface-2); border-radius: calc(var(--radius) - 8px); display: flex; align-items: center; justify-content: center; color: var(--muted); margin-bottom: 16px; overflow: hidden; } .product-visual svg { width: 36%; height: 36%; } .product-name { font-size: 15px; font-weight: 600; margin: 0 0 4px; } .product-price { font-size: 15px; font-weight: 700; color: var(--accent-hover); margin: 0 0 10px; font-variant-numeric: tabular-nums; } .product-desc { font-size: 13px; color: var(--muted); line-height: 1.5; margin: 0 0 14px; flex-grow: 1; } .tag.avail { margin-bottom: 16px; align-self: flex-start; } .buy-btn { width: 100%; text-align: center; padding: 12px 20px; font-size: 14px; } .store-meta { color: var(--muted); font-size: 14px; margin: 0 0 6px; } /* Product detail */ .product-detail { max-width: 1120px; margin: 0 auto; padding: 72px 24px var(--space-section-y); display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; } .product-detail-visual { aspect-ratio: 1 / 1; background: var(--surface); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; color: var(--muted); transition: background-color 0.3s ease; } .product-detail-visual .placeholder-initial { font-size: 88px; } .product-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 12px; } .product-thumb { aspect-ratio: 1 / 1; background: var(--surface); border-radius: calc(var(--radius) - 10px); display: flex; align-items: center; justify-content: center; color: var(--muted); } .product-detail-info .tag { margin: 14px 0 0; } .product-detail-info .store-name { margin: 12px 0 4px; } .product-price-row { display: flex; align-items: baseline; gap: 12px; margin: 8px 0 4px; } .price-current { font-size: 22px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; } .price-old { font-size: 15px; color: var(--muted); text-decoration: line-through; font-variant-numeric: tabular-nums; } .variant-group { margin: 20px 0; } .variant-label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 8px; } .variant-options { display: flex; gap: 8px; flex-wrap: wrap; } .variant-chip { border: 1px solid var(--border); border-radius: 999px; padding: 8px 16px; font-size: 13px; min-height: 36px; } button.variant-chip { background: transparent; color: var(--text); font-family: inherit; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease; } button.variant-chip:hover { border-color: var(--accent); } button.variant-chip.active { border-color: var(--accent); background: var(--accent); color: #fff; } .cart-row-variant, .checkout-row-variant { font-size: 12px; color: var(--muted); margin: 2px 0 0; } .product-store-link { display: inline-block; margin: 20px 0 28px; font-size: 14px; color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--border); padding-bottom: 2px; } .product-store-link:hover { color: var(--accent); border-color: var(--accent); } #add-to-cart { border: none; cursor: pointer; font-family: var(--font); } #add-to-cart[disabled] { opacity: 0.4; cursor: not-allowed; } @media (max-width: 720px) { .product-detail { grid-template-columns: 1fr; padding: 56px 20px 72px; } } .not-found { max-width: 480px; margin: 0 auto; padding: 120px 24px; text-align: center; } .not-found h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 12px; } .not-found p { color: var(--muted); margin: 0 0 28px; } /* Cart */ .cart-page { max-width: 800px; margin: 0 auto; padding: 72px 24px var(--space-section-y); } .cart-empty-state { max-width: 480px; margin: 0 auto; padding: 120px 24px; text-align: center; } .cart-empty-state h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 12px; } .cart-empty-state p { color: var(--muted); margin: 0 0 28px; } .cart-store { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; margin-bottom: 24px; } .cart-store-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .cart-store-head h2 { font-size: 18px; font-weight: 700; margin: 0; } .cart-clear { background: none; border: none; color: var(--muted); font-size: 13px; cursor: pointer; text-decoration: underline; } .cart-clear:hover { color: var(--accent); } .cart-rows { display: flex; flex-direction: column; gap: 16px; } .cart-row { display: grid; grid-template-columns: 56px 1fr auto auto auto; align-items: center; gap: 14px; /* Resalta la fila entera al pasar el mouse, para que se note cuál producto se está por tocar antes de usar +/-/eliminar (antes no había ningún feedback de hover a nivel de fila). Padding+margen negativo: el resaltado se ve, pero no mueve nada del layout ni la separación entre filas. */ padding: 8px; margin: -8px; border-radius: 12px; transition: background-color 0.2s ease; } /* No usa --surface-2 lisa: es el mismo tono que el thumbnail (.cart-row-visual), así que la miniatura del producto "desaparecía" contra el fondo de la fila al pasar el mouse. Un tinte de acento muy leve se distingue de ambos sin gritar. */ .cart-row:hover { background: color-mix(in srgb, var(--surface) 90%, var(--accent) 10%); } .cart-row-visual { width: 56px; height: 56px; border-radius: calc(var(--radius) - 10px); background: var(--surface-2); display: flex; align-items: center; justify-content: center; color: var(--muted); } .cart-row-visual .placeholder-initial { font-size: 20px; } .cart-row-name { font-size: 14px; font-weight: 600; margin: 0 0 2px; } .cart-row-price { font-size: 13px; color: var(--muted); margin: 0; font-variant-numeric: tabular-nums; } .cart-qty { display: flex; align-items: center; gap: 10px; } .qty-btn { position: relative; width: 26px; height: 26px; border: 1px solid var(--border); background: none; border-radius: 50%; cursor: pointer; font-size: 15px; line-height: 1; transition: border-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.15s var(--ease); } /* El círculo visual queda en 26px; este pseudo-elemento invisible agranda el área táctil real a ~44px sin cambiar cómo se ve el botón. */ .qty-btn::before { content: ""; position: absolute; inset: -9px; } .qty-btn:hover { border-color: var(--accent); color: var(--accent); } .qty-btn:active { transform: scale(0.92); } .qty-value { min-width: 16px; text-align: center; font-size: 14px; } .cart-row-subtotal { font-size: 14px; font-weight: 700; margin: 0; white-space: nowrap; font-variant-numeric: tabular-nums; } .cart-remove { position: relative; background: none; border: none; color: var(--muted); cursor: pointer; font-size: 14px; padding: 10px; margin: -10px; transition: color 0.2s var(--ease), transform 0.15s var(--ease); } .cart-remove:hover { color: var(--accent); } .cart-remove:active { transform: scale(0.9); } .cart-store-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); } .cart-total { margin: 0; font-size: 15px; font-variant-numeric: tabular-nums; } .cart-total strong { color: var(--accent-hover); } @media (max-width: 640px) { .cart-row { grid-template-columns: 44px 1fr auto; grid-template-areas: "visual info remove" "visual qty subtotal"; row-gap: 8px; } .cart-row-visual { grid-area: visual; width: 44px; height: 44px; } .cart-row-info { grid-area: info; } .cart-remove { grid-area: remove; justify-self: end; } .cart-qty { grid-area: qty; } .cart-row-subtotal { grid-area: subtotal; justify-self: end; } .cart-store-footer { flex-direction: column; align-items: stretch; gap: 14px; } .cart-store-footer .cta { text-align: center; } } /* Checkout */ .checkout-page { max-width: 640px; margin: 0 auto; padding: 72px 24px var(--space-section-y); } .checkout-head { margin: 32px 0 28px; } .checkout-head h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 10px; } .checkout-head p { color: var(--muted); margin: 0; } .checkout-summary { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; margin-bottom: 32px; } .checkout-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border); } .checkout-row:last-of-type { border-bottom: none; } .checkout-total { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; margin-top: 8px; border-top: 1px solid var(--border); font-size: 16px; font-variant-numeric: tabular-nums; } .checkout-total strong { color: var(--accent-hover); } .checkout-form { display: flex; flex-direction: column; gap: 6px; } .checkout-form label { font-size: 13px; font-weight: 600; margin-top: 14px; } .checkout-form label:first-child { margin-top: 0; } .checkout-form input, .checkout-form textarea { padding: 12px 16px; border: 1px solid var(--border); border-radius: 12px; font-family: var(--font); /* 16px, no 14px: por debajo de eso Safari en iOS hace zoom automático al enfocar el campo, lo cual se siente roto en un formulario de pago. */ font-size: 16px; background: var(--bg); color: var(--text); resize: vertical; transition: border-color 0.2s var(--ease); } .checkout-form input:focus, .checkout-form textarea:focus { outline: none; border-color: var(--accent); } .checkout-form button { margin-top: 20px; border: none; cursor: pointer; font-family: var(--font); font-size: 15px; } /* Auth (login, registro, recuperar/actualizar contraseña, perfil) — mismos tokens y el mismo patrón de tarjeta+formulario que .checkout-form, solo que centrado en una tarjeta angosta en vez de ocupar todo el ancho de la página. */ .auth-page { max-width: 440px; margin: 0 auto; padding: 72px 24px var(--space-section-y); } .auth-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; transition: background-color 0.3s ease, border-color 0.3s ease; } .auth-head { text-align: center; margin-bottom: 24px; } .auth-head h1 { font-size: clamp(1.4rem, 3vw, 1.7rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 8px; } .auth-head p { color: var(--muted); margin: 0; font-size: 14px; } .auth-form { display: flex; flex-direction: column; gap: 6px; } /* Sin esto, [hidden] pierde contra ".auth-form { display: flex }" (misma especificidad, gana la última declarada) y el formulario de actualizar-password.html quedaría visible antes de validar el enlace de recuperación. */ .auth-form[hidden] { display: none; } .auth-form label { font-size: 13px; font-weight: 600; margin-top: 14px; } .auth-form label:first-child { margin-top: 0; } .auth-form input, .auth-form select { width: 100%; padding: 12px 16px; border: 1px solid var(--border); border-radius: 12px; font-family: var(--font); /* 16px, no 14px: evita el zoom automático de Safari en iOS al enfocar el campo. */ font-size: 16px; background: var(--bg); color: var(--text); transition: border-color 0.2s var(--ease), background-color 0.3s ease, color 0.3s ease; } .auth-form input:focus, .auth-form select:focus { outline: none; border-color: var(--accent); } .auth-form input[aria-invalid="true"] { border-color: color-mix(in srgb, #d0453c 65%, var(--border)); } /* Selector de país + número local (Fase 5O). Apilados en columna por defecto para garantizar cero overflow en mobile (los nombres de país son largos); lado a lado recién a partir de un ancho cómodo. */ .auth-phone-field { display: flex; flex-direction: column; gap: 8px; } .auth-phone-field select { min-width: 0; } @media (min-width: 480px) { .auth-phone-field { flex-direction: row; } .auth-phone-field select { flex: 1 1 58%; } .auth-phone-field input { flex: 1 1 42%; } } /* Aviso de "correo ya registrado" (Fase 5O) — mismo tono neutro que .auth-message.info, pero con sus propios botones de acción en vez de solo texto (mostrarMensaje() no soporta HTML dentro del mensaje a propósito, para no tener que sanitizar texto dinámico en ningún otro lugar). */ .auth-existing-account { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 16px; margin-bottom: 18px; } .auth-existing-account p { margin: 0 0 8px; font-size: 14px; line-height: 1.5; color: var(--text); } .auth-existing-account p:last-of-type { margin-bottom: 0; } .auth-existing-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; } .auth-existing-actions a { flex: 1 1 auto; text-align: center; padding: 12px 20px; font-size: 14px; } .auth-password-field { position: relative; } .auth-password-field input { padding-right: 44px; } .auth-password-toggle { position: absolute; /* 36x36 medía antes (bajo el mínimo táctil de 44px). Al agrandar el botón 8px se compensa el offset con la mitad (4px) para que el ícono quede en el mismo píxel exacto: cero impacto visual. */ right: 0; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: none; border: none; border-radius: 8px; color: var(--muted); cursor: pointer; transition: color 0.2s var(--ease), background-color 0.2s ease, transform 0.15s var(--ease); } .auth-password-toggle:hover { color: var(--text); background: var(--surface-2); } .auth-password-toggle:active { transform: translateY(-50%) scale(0.9); } .auth-inline-link { align-self: flex-end; margin-top: 10px; font-size: 13px; color: var(--muted); text-decoration: none; } .auth-inline-link:hover { color: var(--accent); } .auth-submit { margin-top: 22px; width: 100%; text-align: center; border: none; cursor: pointer; font-family: var(--font); } .auth-submit[disabled] { opacity: 0.6; cursor: not-allowed; } .auth-footer-text { margin: 20px 0 0; text-align: center; font-size: 13px; color: var(--muted); } .auth-footer-text a { color: var(--accent); text-decoration: none; } .auth-footer-text a:hover { text-decoration: underline; } /* Mensaje de error/estado — una sola variante de color nueva (rojo) porque "errores claros" lo pide explícitamente; todo lo demás reusa --muted/--surface-2 ya existentes en vez de inventar más colores semánticos (eso queda para cuando se diseñe el dashboard, ver docs/DASHBOARD-ARCHITECTURE.md). */ .auth-message { display: none; font-size: 13px; line-height: 1.5; padding: 11px 14px; border-radius: 10px; margin-bottom: 18px; } .auth-message.visible { display: block; } .auth-message.error { background: color-mix(in srgb, #d0453c 12%, var(--surface)); border: 1px solid color-mix(in srgb, #d0453c 35%, transparent); color: color-mix(in srgb, #d0453c 75%, var(--text)); } .auth-message.info { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); } /* Selector Cliente/Tienda — solo UX (decide a qué formulario/mensaje se llega), nunca otorga acceso por sí solo: la autorización real sigue siendo Supabase Auth + RLS (ver js/login.js). */ .auth-mode-select { display: flex; gap: 12px; margin-bottom: 4px; } /* Mismo problema de especificidad que .auth-form[hidden] más arriba: [hidden] del navegador pierde contra ".auth-mode-select { display: flex }" (misma especificidad, gana el último declarado) sin este selector más específico. */ .auth-mode-select[hidden] { display: none; } .auth-mode-option { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 12px; min-height: 44px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; color: var(--text); font-family: var(--font); font-size: 14px; font-weight: 600; cursor: pointer; transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease), transform 0.15s var(--ease); } .auth-mode-option svg { color: var(--muted); transition: color 0.2s var(--ease); } .auth-mode-option:hover { border-color: var(--accent); transform: translateY(-2px); } .auth-mode-option:hover svg { color: var(--accent); } .auth-mode-option:active { transform: translateY(0); } .auth-mode-option:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .auth-back-link { align-self: flex-start; margin-bottom: 4px; background: none; border: none; padding: 0; color: var(--muted); font-family: var(--font); font-size: 13px; cursor: pointer; } .auth-back-link:hover { color: var(--accent); } /* Perfil */ .profile-section { margin-bottom: 28px; } .profile-section:last-child { margin-bottom: 0; } .profile-section h2 { font-size: 15px; font-weight: 700; margin: 0 0 14px; } .profile-role-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; background: var(--accent-soft, color-mix(in srgb, var(--accent) 12%, var(--surface))); color: var(--accent-hover); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); } .profile-order-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border); font-size: 14px; text-decoration: none; transition: opacity 0.15s ease; } .profile-order-row:hover { opacity: 0.8; } .profile-order-row:last-child { border-bottom: none; } .profile-order-row .store-meta { margin: 2px 0 0; font-size: 12px; } /* Comprobante de pedido (Fase 5Q) — factura minimalista, reutilizada por checkout.html (recién creado) y pedido.html (histórico). */ .comprobante { border: 1px solid var(--border); border-radius: 14px; padding: 24px; background: var(--surface); margin: 24px 0; } .comprobante-head { text-align: center; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px dashed var(--border); } .comprobante-marca { font-weight: 800; letter-spacing: 0.04em; margin: 0; } .comprobante-tipo { margin: 4px 0 0; font-size: 13px; color: var(--text-muted, inherit); opacity: 0.75; } .comprobante-meta { margin-bottom: 20px; } .comprobante-numero { font-weight: 700; margin: 0 0 4px; } .comprobante-meta .store-meta { margin: 2px 0; } .comprobante-bloque { margin-bottom: 20px; } .comprobante-bloque h3, .comprobante-detalle h3, .comprobante-pago h3 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.65; margin: 0 0 8px; } .comprobante-bloque p { margin: 2px 0; } .comprobante-detalle { margin-bottom: 20px; } .comprobante-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); } .comprobante-item:last-child { border-bottom: none; } .comprobante-item-visual { width: 44px; height: 44px; flex-shrink: 0; border-radius: 8px; overflow: hidden; background: var(--surface-2, var(--surface)); } .comprobante-item-visual img { width: 100%; height: 100%; object-fit: cover; display: block; } .comprobante-item-info { flex: 1; min-width: 0; } .comprobante-item-nombre { margin: 0; font-weight: 600; } .comprobante-item-meta { margin: 2px 0 0; font-size: 12px; opacity: 0.75; } .comprobante-item-subtotal { margin: 0; font-weight: 700; white-space: nowrap; } .comprobante-totales { border-top: 1px dashed var(--border); padding-top: 12px; margin-bottom: 20px; } .comprobante-total-fila { display: flex; justify-content: space-between; padding: 4px 0; } .comprobante-total-final { font-size: 17px; font-weight: 800; } .comprobante-pago p { margin: 4px 0 0; font-size: 13px; opacity: 0.8; } .checkout-comprobante-acciones { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } /* CTA band */ .cta-band { background: var(--bg-dark); color: var(--text-dark); text-align: center; padding: var(--space-section-y) 24px; } .cta-band h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 12px; } .cta-band p { color: var(--muted-dark); margin: 0 0 32px; } /* Footer */ .footer { max-width: 1120px; margin: 0 auto; padding: 32px 24px; display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); } /* Mención discreta de ASTRC dentro de una tienda */ .astrc-mini-mention { max-width: 1120px; margin: 0 auto; padding: 0 24px 56px; display: flex; align-items: center; gap: 12px; } .astrc-mini-avatar { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--surface); /* Presencia del personaje MUY sutil: solo esto se mueve, nunca cerca de productos/botones */ animation: flotar-companero 6s ease-in-out infinite; } @keyframes flotar-companero { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-4px) rotate(-3deg); } } .astrc-mini-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: top center; } .astrc-mini-mention a { font-size: 13px; color: var(--muted); text-decoration: none; } .astrc-mini-mention a:hover { color: var(--text); } .tienda-footer { flex-direction: column; align-items: flex-start; gap: 16px; } .tienda-footer-astrc { display: flex; align-items: center; gap: 10px; opacity: 0.55; } .astrc-mini-brand { display: inline-flex; align-items: center; font-weight: 800; font-size: 13px; letter-spacing: -0.01em; } .astrc-mini-brand svg { width: 0.75em; height: 0.75em; margin-left: 1px; } .tienda-footer-astrc p { margin: 0; font-size: 12px; } .footer-links { display: flex; gap: 20px; } .footer-links a { text-decoration: none; } .footer-links a:hover { color: var(--accent); } /* Scroll reveal */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal.in-view { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } /* El selector universal * NO alcanza a ::before/::after (son pseudo-elementos generados, no nodos reales del árbol) — sin esto, transiciones que viven en un ::after (como el subrayado animado del nav) seguían corriendo con reduced motion activado. Encontrado probando de verdad, no solo leyendo el código. */ *, *::before, *::after { transition: none !important; animation: none !important; } } /* Mobile */ @media (max-width: 720px) { .nav-links { position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-dark); border-bottom: 1px solid var(--border); flex-direction: column; gap: 0; padding: 8px 24px; display: none; } .nav-links.open { display: flex; } .nav-links a { padding: 14px 0; border-bottom: 1px solid var(--border); } .nav-links > a::after, .nav-links > .nav-dropdown > .nav-dropdown-link::after { display: none; } .nav-links .nav-dropdown { width: 100%; flex-wrap: wrap; justify-content: space-between; padding: 0; border-bottom: 1px solid var(--border); } .nav-links .nav-dropdown-link { flex: 1; padding: 14px 0; border-bottom: none; } .nav-links .nav-dropdown-menu { position: static; width: 100%; transform: none; opacity: 1; pointer-events: auto; box-shadow: none; border: none; padding: 0 0 0 4px; max-height: 0; overflow: hidden; transition: max-height 0.25s ease; } .nav-links .nav-dropdown-menu.open { max-height: 320px; } .nav-links .nav-dropdown-menu a { padding: 10px 0; } .nav-toggle { display: flex; } .hero { padding: 96px 24px; } .how-it-works { padding: var(--space-section-y-mobile) 20px; } .stores { padding: var(--space-section-y-mobile) 20px; } .cta-band { padding: var(--space-section-y-mobile) 20px; } .footer { flex-direction: column; gap: 12px; text-align: center; } } /* ========================================================= Dashboard (Fase 3). Reutiliza tokens y componentes existentes (--surface/--border/--radius/--ease, .store-search/.store-filters/ .filter-btn/.store-empty, .auth-form input/label) — nada nuevo salvo lo que el panel administrativo necesita y no existía todavía. ========================================================= */ .dash-shell { display: flex; min-height: 100vh; background: var(--bg); } /* Mismo problema de especificidad ya encontrado en .auth-form/.auth-mode-select: [hidden] del navegador pierde contra ".dash-shell { display: flex }" (misma especificidad, gana el último declarado), así que dashboard.js dejaba hidden=true sin ningún efecto visual real — el shell se veía a medio pintar aunque el propio código explícitamente esperaba a que todo terminara de resolverse antes de "revelarlo" (ver comentario en AstrcDashboard.init()). Este selector más específico hace que ese hidden sí oculte de verdad. */ .dash-shell[hidden] { display: none; } .dash-topbar { position: fixed; top: 0; left: 0; right: 0; height: 64px; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 20px; background: var(--header-bg); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); transition: background-color 0.3s ease, border-color 0.3s ease; } .dash-topbar-left { display: flex; align-items: center; gap: 14px; min-width: 0; } .dash-sidebar-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; color: var(--text); flex-direction: column; gap: 5px; } .dash-sidebar-toggle span { width: 20px; height: 2px; background: var(--text); display: block; } .dash-topbar .brand-logo-img { height: 22px; width: auto; } .dash-store-name { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dash-topbar-right { display: flex; align-items: center; gap: 10px; } .dash-user-pill { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.3; margin-right: 4px; } .dash-user-email { font-size: 13px; color: var(--text); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dash-user-role { font-size: 11px; color: var(--muted); } .dash-logout-btn { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; background: none; border: none; color: var(--muted); cursor: pointer; transition: color 0.2s var(--ease), background-color 0.2s ease; } .dash-logout-btn:hover { color: var(--text); background: var(--surface-2); } .dash-sidebar { position: fixed; top: 64px; left: 0; bottom: 0; width: 240px; background: var(--surface); border-right: 1px solid var(--border); padding: 20px 12px; overflow-y: auto; z-index: 30; transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s var(--ease); } .dash-sidebar-backdrop { display: none; position: fixed; inset: 64px 0 0 0; background: color-mix(in srgb, var(--shadow) 60%, transparent); z-index: 29; } .dash-sidebar-backdrop.open { display: block; } .dash-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .dash-nav-link { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 10px; color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 600; transition: color 0.2s var(--ease), background-color 0.2s ease; } .dash-nav-link svg { flex-shrink: 0; width: 18px; height: 18px; } .dash-nav-link:hover { color: var(--text); background: var(--surface-2); } .dash-nav-link.active { color: var(--accent-hover); background: var(--surface-2); } .dash-main { flex: 1; margin-left: 240px; margin-top: 64px; padding: 32px; max-width: 1200px; } .dash-view-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; } .dash-view-head h1 { font-size: 22px; margin: 0; } .dash-view-head p { margin: 4px 0 0; color: var(--muted); font-size: 14px; } .dash-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 32px; } .dash-kpi-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; transition: background-color 0.3s ease, border-color 0.3s ease; } .dash-kpi-value { font-size: 28px; font-weight: 800; } .dash-kpi-label { font-size: 13px; color: var(--muted); margin-top: 4px; } .dash-skeleton { background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 37%, var(--surface) 63%); background-size: 400% 100%; border-radius: 10px; animation: dash-shimmer 1.4s ease infinite; } @keyframes dash-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } .dash-table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow-x: auto; transition: background-color 0.3s ease, border-color 0.3s ease; } .dash-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; } .dash-table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); padding: 14px 16px; border-bottom: 1px solid var(--border); white-space: nowrap; } .dash-table td { padding: 14px 16px; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: middle; } .dash-table tr:last-child td { border-bottom: none; } .dash-table tbody tr { transition: background-color 0.15s ease; } .dash-table tbody tr:hover { background: var(--surface-2); } .dash-row-actions { display: flex; gap: 4px; justify-content: flex-end; } .dash-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 4px; margin: -4px; border-radius: 8px; background: none; border: none; color: var(--muted); cursor: pointer; transition: color 0.2s var(--ease), background-color 0.2s ease; } .dash-icon-btn:hover { color: var(--text); background: var(--surface-2); } .dash-icon-btn.is-danger:hover { color: #d0453c; } .dash-status-pill { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--surface-2); color: var(--muted); } .dash-status-pill.is-confirmed, .dash-status-pill.is-completed { background: color-mix(in srgb, #2f9e5c 16%, var(--surface)); color: color-mix(in srgb, #2f9e5c 80%, var(--text)); } .dash-status-pill.is-cancelled { background: color-mix(in srgb, #d0453c 14%, var(--surface)); color: color-mix(in srgb, #d0453c 75%, var(--text)); } .dash-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; } .dash-form-grid .full { grid-column: 1 / -1; } .dash-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; margin-bottom: 24px; transition: background-color 0.3s ease, border-color 0.3s ease; } .dash-panel h2 { font-size: 15px; margin: 0 0 16px; } .dash-modal-overlay { position: fixed; inset: 0; background: color-mix(in srgb, var(--shadow) 70%, transparent); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 100; } .dash-modal { width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; } .dash-modal[hidden], .dash-modal-overlay[hidden] { display: none; } .dash-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .dash-modal-head h2 { margin: 0; font-size: 17px; } .dash-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; } .dash-store-select { padding: 8px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 13px; } @media (prefers-reduced-motion: reduce) { .dash-skeleton { animation: none; } .dash-sidebar { transition: none; } } @media (max-width: 880px) { .dash-sidebar-toggle { display: flex; } .dash-sidebar { transform: translateX(-100%); width: 260px; box-shadow: 0 20px 40px var(--shadow); } .dash-sidebar.open { transform: translateX(0); } .dash-main { margin-left: 0; padding: 24px 16px; } .dash-user-email { max-width: 120px; } .dash-form-grid { grid-template-columns: 1fr; } } @media (max-width: 640px) { .dash-store-name { display: none; } }