/* ========================================================================== KASTOR · HOJA DE ESTILOS Dual-mode mediante [data-theme] en . Mobile-first · sin librerías · variables CSS para temas. ========================================================================== */ /* ---------- Fuentes ---------- */ @import url('https://fonts.googleapis.com/css2?family=Sofia+Sans:wght@400;500;600;700;800;900&family=Montserrat:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap'); /* ========================================================================== TOKENS DE TEMA Paleta oficial KASTOR (manual de identidad): navy #14234B, azul #3A6DAF, celeste #94BAC4, naranja #E57D37, dorado #EAAD62, crema #FAF6F2. Tipografía: Sofia Sans (display) · Montserrat (etiquetas/acentos) · Inter (texto). ========================================================================== */ :root { --font-display: 'Sofia Sans', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; --font-mono: 'Montserrat', system-ui, sans-serif; --maxw: 1140px; --radius: 14px; --radius-sm: 10px; --gutter: clamp(1.1rem, 4vw, 2rem); --z-nav: 40; --z-float: 45; --z-modal: 60; --z-banner: 30; /* Colores de la marca madre, iguales en los tres temas. En el tema `kastor` --accent es azul, así que el naranja de KASTOR hay que pedirlo por acá. */ --brand-orange: #E57D37; /* Naranja claro: es el único que llega a 4.5:1 con texto azul marino encima, así que es el que se usa cuando el naranja tiene que ser un relleno con texto. */ --brand-orange-lt: #F0904F; --brand-navy: #14234B; /* Tema MARCA por defecto (naranja · páginas comunes: inicio, contacto, etc.) */ --bg-primary: #FAF6F2; --bg-surface: #F1E9DC; --bg-card: #FFFFFF; --border: #E7DECE; --border-hover: #D3C3A4; --text-primary: #14234B; --text-secondary:#57617A; --text-muted: #93A0B7; --accent: #E57D37; /* Naranja de marca (manual de identidad) */ --accent-hover: #F0904F; --accent-soft: rgba(229,125,55,0.14); --accent-shadow: rgba(229,125,55,0.28); --accent-glow: #FF9544; --accent-rgb: 229,125,55; /* mismo acento en RGB, para rgba() con alfa */ --on-accent: #14234B; /* texto sobre fondo de acento */ --cta-bg: #FCEAD9; --cta-text: #B8591E; --cta-border: #F0C6A0; --brand-2: "Ciencia"; /* etiqueta de modo */ } /* --------------------------------------------------------------------------- MARCA (explícito) — naranja/crema. Se usa en las páginas que no pertenecen a un mundo concreto: index, sobre-nosotros, contacto, cuenta. --------------------------------------------------------------------------- */ html[data-theme="brand"] { --bg-primary:#FAF6F2; --bg-surface:#F1E9DC; --bg-card:#FFFFFF; --border:#E7DECE; --border-hover:#D3C3A4; --text-primary:#14234B; --text-secondary:#57617A; --text-muted:#93A0B7; --accent:#E57D37; --accent-hover:#F0904F; --accent-soft:rgba(229,125,55,0.14); --accent-shadow:rgba(229,125,55,0.28); --accent-glow:#FF9544; --on-accent:#14234B; --accent-rgb:229,125,55; --cta-bg:#FCEAD9; --cta-text:#B8591E; --cta-border:#F0C6A0; } /* --------------------------------------------------------------------------- KASTOR · CIENCIA / TECNOLOGÍA — azul de marca Paleta de referencia: navy #14234B · azul #3A6DAF · celeste #94BAC4 --------------------------------------------------------------------------- */ html[data-theme="kastor"] { --bg-primary:#F5F8FC; --bg-surface:#E8EFF7; --bg-card:#FFFFFF; --border:#D6E2EF; --border-hover:#A9C4DE; --text-primary:#14234B; --text-secondary:#4C5B78; --text-muted:#8FA3BC; --accent:#3A6DAF; --accent-hover:#4E82C6; --accent-soft:rgba(58,109,175,0.13); --accent-shadow:rgba(58,109,175,0.28); --accent-glow:#94BAC4; --on-accent:#FFFFFF; --accent-rgb:58,109,175; --cta-bg:#E4EDF8; --cta-text:#24507F; --cta-border:#BFD5EC; } /* --------------------------------------------------------------------------- KASTOR DESIGN — naranja de marca Paleta de referencia: naranja #E57D37 · crema #FAF6F2 --------------------------------------------------------------------------- */ html[data-theme="kastor-design"] { --bg-primary:#FAF6F2; --bg-surface:#F1E9DC; --bg-card:#FFFFFF; --border:#E7DECE; --border-hover:#D3C3A4; --text-primary:#14234B; --text-secondary:#57617A; --text-muted:#93A0B7; --accent:#E57D37; --accent-hover:#F0904F; --accent-soft:rgba(229,125,55,0.14); --accent-shadow:rgba(229,125,55,0.28); --accent-glow:#FF9544; --on-accent:#14234B; --accent-rgb:229,125,55; --cta-bg:#FCEAD9; --cta-text:#B8591E; --cta-border:#F0C6A0; } /* ========================================================================== RESET / BASE ========================================================================== */ *,*::before,*::after { box-sizing:border-box; margin:0; padding:0; } html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; } body { font-family:var(--font-body); background:var(--bg-primary); color:var(--text-primary); line-height:1.6; font-size:16px; -webkit-font-smoothing:antialiased; transition:background-color .4s ease, color .4s ease; overflow-x:hidden; } /* -------------------------------------------------------------------------- FONDO CONTINUO Un único lienzo para toda la página: el color plano lo pone y los destellos de acento viven en esta capa fija. Al ser fija y cubrir el viewport, el degradado nunca se corta al terminar una sección — que es lo que hacía que se vieran "líneas de cambio de slide". Las secciones NO deben llevar fondo propio; solo las tarjetas y el footer pintan encima. -------------------------------------------------------------------------- */ body::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background: radial-gradient(1000px 620px at 82% -8%, var(--accent-soft), transparent 68%), radial-gradient(820px 580px at -8% 38%, var(--accent-soft), transparent 70%), radial-gradient(900px 600px at 108% 92%, var(--accent-soft), transparent 70%); } img { max-width:100%; display:block; } a { color:inherit; text-decoration:none; } button { font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; } em { font-style:normal; color:var(--accent); } :focus-visible { outline:3px solid var(--accent); outline-offset:3px; border-radius:4px; } ::selection { background:var(--accent); color:#fff; } .container { width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); } /* Variante ancha: la usa la grilla de áreas de ciencia. Con 3 tarjetas por fila, a 1140px cada una queda en 347px y el título de dos palabras no entra al lado del ícono; a 1240px la tarjeta llega a 380px y cae en la proporción 1.6 de la referencia sin apretar la tipografía. */ .container-wide { max-width:1240px; } .section { padding-block:clamp(3.5rem,9vw,6.5rem); } .intro, .hero, .section { scroll-margin-top:74px; } .eyebrow { font-family:var(--font-mono); font-weight:600; font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; color:var(--accent); margin-bottom:.9rem; display:inline-block; } .section-head { max-width:640px; margin-bottom:clamp(2rem,5vw,3rem); } .section-head h2 { font-family:var(--font-display); font-weight:700; line-height:1.1; font-size:clamp(1.7rem,4.6vw,2.7rem); letter-spacing:-.02em; } .section-head p { color:var(--text-secondary); margin-top:.85rem; font-size:1.02rem; } /* ========================================================================== BOTONES ========================================================================== */ .btn { display:inline-flex; align-items:center; justify-content:center; gap:.55rem; font-weight:600; font-size:.96rem; padding:.85rem 1.4rem; border-radius:var(--radius-sm); transition:background-color .2s ease, border-color .2s ease, color .2s ease, transform .15s ease; min-height:48px; white-space:nowrap; } .btn:active { transform:translateY(1px); } .btn svg:not(.ico) { width:19px; height:19px; flex:0 0 auto; } .btn-primary { background:var(--accent); color:var(--on-accent); } .btn-primary:hover { background:var(--accent-hover); } .btn-cta { background:var(--cta-bg); color:var(--cta-text); border:1px solid var(--cta-border); } .btn-cta:hover { border-color:var(--accent); } .btn-ghost { border:1px solid var(--border-hover); color:var(--text-primary); } .btn-ghost:hover { border-color:var(--accent); color:var(--accent); } .btn-wa { background:#25D366; color:#06351a; } .btn-wa:hover { background:#2ce374; } .btn-block { width:100%; } .btn .ico { width:20px; height:20px; flex:0 0 auto; } /* ========================================================================== BANNER ESTACIONAL ========================================================================== */ .banner { position:relative; z-index:var(--z-banner); background:var(--accent-soft); border-bottom:1px solid var(--border); font-size:.9rem; color:var(--text-primary); } .banner .container { display:flex; align-items:center; gap:1rem; justify-content:center; padding-block:.7rem; flex-wrap:wrap; text-align:center; } .banner a { color:var(--accent); font-weight:600; text-decoration:underline; } /* ========================================================================== NAVBAR ========================================================================== */ .nav { position:sticky; top:0; z-index:var(--z-nav); background:color-mix(in srgb, var(--bg-primary) 88%, transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--border); } .nav-inner { display:flex; align-items:center; gap:1rem; height:64px; } .brand { display:flex; align-items:center; gap:.6rem; font-family:var(--font-display); font-weight:900; letter-spacing:-.01em; font-size:1.4rem; } .brand .logo-mark { width:auto; height:38px; flex:0 0 auto; display:block; } .brand .brand-tail { color:var(--accent); font-weight:600; font-size:.7rem; font-family:var(--font-mono); letter-spacing:.12em; align-self:flex-start; margin-top:.15rem; } .nav-actions { display:flex; align-items:center; gap:.6rem; margin-left:auto; } .nav .btn-wa { width:44px; height:44px; min-height:44px; padding:0; border-radius:12px; } .nav .btn-wa .ico { width:22px; height:22px; } /* Links de navegación (Inicio / Sobre Nosotros / Áreas / Contacto) */ .nav-links { display:none; align-items:center; gap:1.8rem; margin-inline:auto; } .nav-link { font-family:var(--font-mono); font-weight:700; font-size:.86rem; letter-spacing:.04em; text-transform:uppercase; color:var(--text-primary); padding-bottom:.2rem; border-bottom:2px solid transparent; transition:border-color .2s ease, color .2s ease; } .nav-link:hover { color:var(--accent); } .nav-link.active { border-bottom-color:var(--text-primary); } /* Botón hamburguesa (solo mobile) */ .nav-toggle { display:grid; place-items:center; width:44px; height:44px; border-radius:10px; color:var(--text-primary); border:1px solid var(--border); } .nav-toggle svg { width:22px; height:22px; } .nav-toggle .ico-close { display:none; } .nav.nav-open .nav-toggle .ico-open { display:none; } .nav.nav-open .nav-toggle .ico-close { display:block; } @media (min-width:880px) { .nav-links { display:flex; } .nav-toggle { display:none; } } @media (max-width:879px) { .nav-links { display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:flex-start; gap:0; background:var(--bg-card); border-bottom:1px solid var(--border); padding:.5rem var(--gutter) .8rem; } .nav-link { width:100%; padding-block:.7rem; border-bottom:1px solid var(--border); } .nav-link.active { border-bottom-color:var(--border); color:var(--accent); } .nav.nav-open { position:relative; } .nav.nav-open .nav-links { display:flex; } } /* Botón de carrito (estilo píldora navy, como el manual de marca) */ .cart-toggle { position:relative; display:inline-flex; align-items:center; gap:.5rem; background:var(--text-primary); color:var(--bg-card); font-family:var(--font-mono); font-weight:700; font-size:.82rem; letter-spacing:.04em; text-transform:uppercase; padding:.6rem 1rem; border-radius:999px; min-height:44px; transition:background-color .2s ease; } .cart-toggle:hover { background:color-mix(in srgb, var(--text-primary) 85%, var(--accent)); } .cart-toggle svg { width:19px; height:19px; } .cart-badge { position:absolute; top:-6px; right:-6px; min-width:19px; height:19px; padding:0 .3rem; border-radius:999px; background:var(--accent); color:var(--on-accent); font-family:var(--font-mono); font-size:.66rem; font-weight:800; display:grid; place-items:center; border:2px solid var(--bg-primary); } .cart-badge[hidden] { display:none; } /* ========================================================================== CARRITO — panel lateral ========================================================================== */ .cart-drawer { position:fixed; inset:0; z-index:var(--z-modal); display:none; } .cart-drawer.open { display:block; } .cart-drawer-backdrop { position:absolute; inset:0; background:rgba(20,35,75,.35); backdrop-filter:blur(2px); } .cart-drawer-panel { position:absolute; top:0; right:0; height:100%; width:min(400px, 100vw); background:var(--bg-card); border-left:1px solid var(--border); display:flex; flex-direction:column; box-shadow:-20px 0 60px rgba(20,35,75,.2); animation:cart-slide-in .28s cubic-bezier(.2,.8,.2,1); } @keyframes cart-slide-in { from{ transform:translateX(24px); opacity:.5; } to{ transform:translateX(0); opacity:1; } } .cart-drawer-header { display:flex; align-items:center; justify-content:space-between; padding:1.2rem 1.3rem; border-bottom:1px solid var(--border); } .cart-drawer-header h3 { font-family:var(--font-display); font-size:1.2rem; font-weight:700; } .cart-empty { padding:2rem 1.3rem; color:var(--text-secondary); text-align:center; } .cart-items { flex:1; overflow-y:auto; padding:.6rem 1rem; display:flex; flex-direction:column; gap:.7rem; } .cart-item { display:grid; grid-template-columns:56px 1fr auto; gap:.8rem; align-items:center; padding:.7rem; border:1px solid var(--border); border-radius:var(--radius-sm); } .cart-item-media { width:56px; height:56px; border-radius:8px; overflow:hidden; background:var(--bg-surface); display:grid; place-items:center; } .cart-item-media img { width:100%; height:100%; object-fit:cover; } .cart-item-media .glyph { width:60%; height:60%; color:var(--accent); } .cart-item-info h4 { font-family:var(--font-display); font-size:.92rem; font-weight:600; line-height:1.25; } .cart-item-price { font-family:var(--font-mono); font-size:.76rem; color:var(--text-muted); } .cart-item-qty { display:flex; align-items:center; gap:.5rem; margin-top:.35rem; } .cart-item-qty button { width:24px; height:24px; border-radius:6px; border:1px solid var(--border); display:grid; place-items:center; font-weight:700; color:var(--text-primary); } .cart-item-qty button:hover { border-color:var(--accent); color:var(--accent); } .cart-item-qty span { font-family:var(--font-mono); font-size:.86rem; min-width:1.2em; text-align:center; } .cart-item-remove { color:var(--text-muted); padding:.3rem; } .cart-item-remove:hover { color:#c0392b; } .cart-item-remove svg { width:17px; height:17px; } .cart-drawer-footer { padding:1rem 1.3rem 1.3rem; border-top:1px solid var(--border); } .cart-total { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.8rem; font-family:var(--font-mono); } .cart-total span { color:var(--text-secondary); font-size:.85rem; } .cart-total b { font-size:1.1rem; color:var(--accent); } .cart-add-btn { width:100%; margin-top:.5rem; font-size:.84rem; } /* ========================================================================== HERO ========================================================================== */ /* Sin degradado propio: el destello lo aporta el lienzo global (body::before). */ .hero { position:relative; padding-block:clamp(3.5rem,10vw,7rem); } .hero-grid { position:relative; z-index:1; display:grid; grid-template-columns:1fr; gap:clamp(2rem,5vw,3.5rem); align-items:center; } .hero-title { font-family:var(--font-display); font-weight:800; letter-spacing:-.03em; font-size:clamp(2.2rem,7vw,4rem); line-height:1.04; } .hero-sub { color:var(--text-secondary); font-size:clamp(1rem,2.4vw,1.18rem); margin-top:1.3rem; max-width:46ch; } .hero-actions { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem; } /* -------------------------------------------------------------------------- HERO de KASTOR CIENCIA — banda azul marino a sangre con la foto al costado. Los textos van en blanco, así que acá se redefinen los tokens de texto en vez de escribir colores sueltos en cada regla. -------------------------------------------------------------------------- */ .hero-science { --text-primary:#FFFFFF; --text-secondary:#C7D3E6; --text-muted:#9DB0CE; background:var(--brand-navy); /* .hero-title hereda el color en vez de leer el token, así que hay que bajarlo desde acá o el título queda azul marino sobre azul marino. */ color:var(--text-primary); padding-block:clamp(2.75rem,7vw,4.5rem); } .hero-science .hero-title em { color:var(--brand-orange); font-style:normal; } .hero-science .eyebrow { color:var(--brand-orange); } /* Sobre el azul, el azul del tema casi no se despega del fondo: la acción principal va en naranja de marca (la secundaria ya es clara y contrasta). */ .hero-science .btn-primary { background:var(--brand-orange-lt); border-color:var(--brand-orange-lt); color:var(--brand-navy); box-shadow:none; } .hero-science .btn-primary:hover { background:#F7A86D; border-color:#F7A86D; } .hero-rule { display:block; width:11rem; max-width:100%; height:2px; background:var(--brand-orange); margin:2rem 0 1.5rem; } /* Los 5 ejes tienen que entrar en una fila en desktop; con pistas más anchas el quinto caía solo a la línea de abajo. En móvil bajan a 2–3 por fila. */ .hero-highlights { list-style:none; margin:0; padding:0; display:grid; gap:1.1rem .9rem; grid-template-columns:repeat(auto-fit, minmax(min(100%, 5.75rem), 1fr)); } .hero-highlights li { display:flex; flex-direction:column; align-items:flex-start; gap:.5rem; font-family:var(--font-mono); font-size:.64rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; line-height:1.35; color:var(--text-secondary); overflow-wrap:anywhere; } .hero-highlight-ico { color:var(--brand-orange); } .hero-highlight-ico svg { width:27px; height:27px; } /* Sin panel ni fondo propio: la foto ya trae el azul del hero incrustado, así que cualquier caja alrededor volvería a marcar el borde que queremos ocultar. */ .hero-photo { position:relative; z-index:1; } .hero-photo img { display:block; width:100%; height:auto; } @media (min-width:900px) { .hero-photo img { aspect-ratio:1/1; object-fit:cover; object-position:50% 45%; } } /* ========================================================================== SOBRE NOSOTROS — cabecera (texto + isotipo sobre plano técnico) ========================================================================== */ .about-hero { padding-block:clamp(3rem,8vw,5.5rem) clamp(2.5rem,6vw,4rem); } .about-hero-grid { display:grid; grid-template-columns:1fr; gap:clamp(2rem,6vw,3.5rem); align-items:center; } @media (min-width:900px) { .about-hero-grid { grid-template-columns:1.05fr .95fr; } } .about-title { font-family:var(--font-display); font-weight:800; letter-spacing:-.025em; line-height:1.06; font-size:clamp(2rem,5.2vw,3.05rem); text-wrap:balance; } .about-lead { color:var(--text-secondary); margin-top:1.1rem; max-width:46ch; line-height:1.75; font-size:.99rem; } /* Filete corto que cierra el bloque, como en la referencia */ .about-rule { display:block; width:64px; height:2px; background:var(--accent); opacity:.75; margin-top:1.6rem; } .section-head .about-rule { margin-top:1.2rem; } .about-blueprint { position:relative; display:grid; place-items:center; aspect-ratio:1; width:100%; max-width:400px; margin-inline:auto; } .about-blueprint-frame { position:absolute; inset:0; width:100%; height:100%; color:var(--accent); opacity:.32; } .about-blueprint-mark { position:relative; z-index:1; width:44%; height:auto; } @media (prefers-reduced-motion:no-preference) { .about-blueprint-mark { animation:about-mark-float 6s ease-in-out infinite; } } @keyframes about-mark-float { 0%,100%{transform:translateY(-4px)} 50%{transform:translateY(4px)} } /* ========================================================================== SOBRE NOSOTROS — valores ("Lo que nos mueve") ========================================================================== */ .values-section { background:transparent; } .values-grid { display:grid; grid-template-columns:1fr; gap:2rem 0; } @media (min-width:620px) { .values-grid { grid-template-columns:1fr 1fr; } } @media (min-width:1000px) { .values-grid { grid-template-columns:repeat(4,1fr); } } /* Columnas separadas por un filete, sin tarjetas (como la referencia) */ .value-item { padding-inline:0; } @media (min-width:620px) { .value-item { padding-inline:1.6rem; border-left:1px solid var(--border); } .value-item:nth-child(2n+1) { border-left:0; padding-left:0; } } @media (min-width:1000px) { .value-item:nth-child(2n+1) { border-left:1px solid var(--border); padding-left:1.6rem; } .value-item:first-child { border-left:0; padding-left:0; } } .value-ico { color:var(--accent); margin-bottom:1.1rem; } .value-ico svg { width:38px; height:38px; stroke-width:1.5; } .value-item h3 { font-family:var(--font-display); font-size:1.06rem; font-weight:700; margin-bottom:.5rem; } .value-item p { color:var(--text-secondary); font-size:.9rem; line-height:1.7; } /* ========================================================================== FILTROS DE CATEGORÍA + CATÁLOGO ========================================================================== */ .cat-filters { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1.8rem; } .cat-chip { display:inline-flex; align-items:center; gap:.45rem; font-size:.85rem; font-weight:600; padding:.6rem .95rem; border-radius:999px; border:1px solid var(--border); background:var(--bg-card); color:var(--text-secondary); min-height:44px; transition:color .2s, border-color .2s, background-color .2s; } .cat-chip svg { width:16px; height:16px; } .cat-chip[aria-pressed="true"] { color:var(--accent); border-color:var(--accent); background:var(--accent-soft); } .cat-chip:hover { color:var(--text-primary); border-color:var(--border-hover); } .grid { display:grid; gap:1.1rem; grid-template-columns:1fr; } /* Tarjeta de producto */ .card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; transition:border-color .2s ease, transform .2s ease; } .card:hover { border-color:var(--border-hover); transform:translateY(-3px); } .card-media { position:relative; aspect-ratio:4/3; background:var(--bg-surface); display:grid; place-items:center; overflow:hidden; cursor:pointer; } .card-media::after { content:""; position:absolute; inset:0; background:linear-gradient(135deg, var(--accent-soft), transparent 60%); } .card-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .card-media .glyph { width:34%; height:34%; color:var(--accent); opacity:.7; position:relative; z-index:1; } .card-media .ph-tag { position:absolute; bottom:.6rem; left:.6rem; z-index:2; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); background:color-mix(in srgb,var(--bg-primary) 70%, transparent); padding:.2rem .5rem; border-radius:6px; border:1px solid var(--border); } .card-body { padding:1.1rem 1.15rem 1.25rem; display:flex; flex-direction:column; gap:.55rem; flex:1; } .card-tags { display:flex; gap:.35rem; flex-wrap:wrap; } .tag { font-family:var(--font-mono); font-size:.62rem; letter-spacing:.05em; text-transform:uppercase; color:var(--text-secondary); border:1px solid var(--border); border-radius:5px; padding:.16rem .42rem; } .card h3 { font-family:var(--font-display); font-size:1.06rem; font-weight:600; line-height:1.25; } .card .desc { color:var(--text-secondary); font-size:.9rem; flex:1; } .card-foot { display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-top:.4rem; } .price { font-family:var(--font-mono); font-size:.92rem; color:var(--text-primary); } .price b { color:var(--accent); font-weight:600; } .price small { display:block; font-size:.66rem; color:var(--text-muted); letter-spacing:.04em; } .card .btn-order { padding:.6rem 1rem; min-height:42px; font-size:.86rem; } /* ========================================================================== CÓMO FUNCIONA ========================================================================== */ .steps { display:grid; grid-template-columns:1fr; gap:1rem; counter-reset:step; } .step { position:relative; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:1.6rem 1.5rem 1.5rem; } .step::before { counter-increment:step; content:counter(step); font-family:var(--font-mono); font-size:.85rem; font-weight:600; color:var(--accent); width:34px; height:34px; border-radius:9px; background:var(--accent-soft); display:grid; place-items:center; margin-bottom:1rem; } .step h3 { font-family:var(--font-display); font-size:1.08rem; font-weight:600; margin-bottom:.35rem; } .step p { color:var(--text-secondary); font-size:.92rem; } .how-cta { margin-top:2rem; } /* ========================================================================== B2B (solo KASTOR) ========================================================================== */ .b2b { background:transparent; } .b2b-grid { display:grid; grid-template-columns:1fr; gap:clamp(2rem,5vw,3rem); } .team-section { background:transparent; } .team { display:grid; gap:1.1rem; margin-top:1.5rem; grid-template-columns:1fr; } @media (min-width:600px) { .team { grid-template-columns:1fr 1fr; } } @media (min-width:1020px) { .team { grid-template-columns:repeat(4,1fr); } } .team-card { position:relative; display:flex; flex-direction:column; align-items:flex-start; background:var(--bg-card); border:1px solid var(--border); border-radius:16px; padding:1.6rem 1.35rem 1.5rem; transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease; } .team-card:hover { border-color:var(--border-hover); transform:translateY(-3px); box-shadow:0 16px 34px rgba(20,35,75,.09); } /* Los tres puntos de la esquina superior derecha */ .team-dots { position:absolute; top:1.15rem; right:1.15rem; z-index:1; display:flex; gap:3px; } .team-dots i { width:4px; height:4px; border-radius:50%; background:var(--accent); display:block; } .team-avatar { width:74px; height:74px; border-radius:50%; background:var(--bg-surface); display:grid; place-items:center; color:var(--text-primary); margin-bottom:1.2rem; align-self:flex-start; } .team-avatar svg { width:36px; height:36px; stroke-width:1.5; } .team-card h4 { font-family:var(--font-display); font-size:1.12rem; font-weight:700; margin-bottom:.3rem; } .team-card .role { color:var(--accent); font-size:.76rem; font-family:var(--font-mono); font-weight:600; line-height:1.5; margin-bottom:1rem; } .team-card ul { list-style:none; display:grid; gap:.6rem; } .team-card li { color:var(--text-secondary); font-size:.85rem; line-height:1.55; padding-left:.95rem; position:relative; } .team-card li::before { content:""; position:absolute; left:0; top:.55em; width:4px; height:4px; border-radius:50%; background:var(--text-primary); opacity:.55; } /* Formulario de cotización */ .quote-form { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:clamp(1.3rem,4vw,2rem); } .quote-form h3 { font-family:var(--font-display); font-size:1.2rem; margin-bottom:1.2rem; } .field { margin-bottom:1rem; } .field label { display:block; font-size:.82rem; color:var(--text-secondary); margin-bottom:.4rem; font-weight:500; } .field input, .field textarea, .field select { width:100%; background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text-primary); padding:.8rem .9rem; font-family:inherit; font-size:.95rem; min-height:48px; transition:border-color .2s ease; } .field textarea { min-height:96px; resize:vertical; } .field input:focus, .field textarea:focus, .field select:focus { border-color:var(--accent); outline:none; } .field-row { display:grid; grid-template-columns:1fr; gap:0; } .form-note { font-size:.78rem; color:var(--text-muted); margin-top:.4rem; } .form-status { font-size:.88rem; margin-top:.8rem; min-height:1.2rem; } .form-status.ok { color:#4ade80; } .form-status.err { color:#f87171; } /* ========================================================================== GALERÍA ========================================================================== */ .gallery-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:.7rem; } .gallery-item { position:relative; aspect-ratio:1; border-radius:var(--radius-sm); overflow:hidden; border:1px solid var(--border); background:var(--bg-card); cursor:pointer; display:grid; place-items:center; } .gallery-item::after { content:""; position:absolute; inset:0; background:linear-gradient(135deg,var(--accent-soft),transparent 65%); } .gallery-item img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .gallery-item .glyph { width:30%; height:30%; color:var(--accent); opacity:.5; position:relative; z-index:1; } .gallery-item .g-label { position:absolute; bottom:0; left:0; right:0; z-index:2; padding:.6rem .7rem; font-size:.74rem; color:var(--text-secondary); background:linear-gradient(transparent, color-mix(in srgb,var(--bg-primary) 85%, transparent)); } /* ========================================================================== FOOTER ========================================================================== */ .footer { border-top:1px solid var(--border); background:transparent; padding-block:clamp(2.5rem,6vw,4rem) 2rem; } .footer-top { display:grid; grid-template-columns:1fr; gap:2rem; } .footer .brand { margin-bottom:1rem; } .footer p { color:var(--text-secondary); font-size:.9rem; max-width:34ch; } .footer h5 { font-family:var(--font-display); font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; color:var(--text-muted); margin-bottom:.9rem; } .footer-links { list-style:none; display:grid; gap:.55rem; } .footer-links a { color:var(--text-secondary); font-size:.92rem; transition:color .2s ease; display:inline-flex; align-items:center; gap:.5rem; } .footer-links a:hover { color:var(--accent); } .footer-links svg { width:17px; height:17px; } /* Redes como iconos (Instagram · Facebook · TikTok) + handle */ .footer-social-icons { display:flex; gap:.7rem; } .footer-social-box { display:flex; flex-direction:column; align-items:center; gap:.35rem; color:var(--text-primary); transition:transform .18s ease, color .18s ease; } .footer-social-box > svg { width:44px; height:44px; padding:11px; border-radius:12px; border:1px solid var(--border); background:var(--bg-card); box-sizing:border-box; } .footer-social-box span { font-size:.72rem; color:var(--text-secondary); } .footer-social-box:hover { transform:translateY(-2px); color:var(--accent); } .footer-social-box:hover > svg { border-color:var(--accent); } .footer-handle { margin-top:.9rem; display:flex; align-items:center; gap:.6rem; font-family:var(--font-mono); font-size:.82rem; color:var(--accent); font-weight:600; } .footer-handle::before, .footer-handle::after { content:""; height:1px; width:34px; background:var(--accent); opacity:.5; } .footer-bottom { margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--border); display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.8rem; color:var(--text-muted); align-items:center; } .footer-switch { color:var(--accent); font-weight:600; font-size:.85rem; transition:color .2s ease; } .footer-switch:hover { color:var(--accent-hover); text-decoration:underline; } /* ========================================================================== BOTÓN WHATSAPP FLOTANTE ========================================================================== */ .wa-float { position:fixed; right:1.1rem; bottom:1.1rem; z-index:var(--z-float); width:56px; height:56px; border-radius:50%; background:#25D366; color:#06351a; display:grid; place-items:center; box-shadow:0 8px 24px rgba(0,0,0,.4); transition:transform .2s ease, box-shadow .2s ease; } .wa-float:hover { transform:scale(1.06); box-shadow:0 10px 30px rgba(37,211,102,.4); } .wa-float svg { width:30px; height:30px; } .wa-float::after { content:""; position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 0 rgba(37,211,102,.45); animation:wa-pulse 2.4s infinite; } @keyframes wa-pulse { 0%{box-shadow:0 0 0 0 rgba(37,211,102,.45);} 70%{box-shadow:0 0 0 14px rgba(37,211,102,0);} 100%{box-shadow:0 0 0 0 rgba(37,211,102,0);} } /* ========================================================================== MODALES (producto · personalización · lightbox) ========================================================================== */ .modal { position:fixed; inset:0; z-index:var(--z-modal); display:none; align-items:flex-end; justify-content:center; padding:0; } .modal.open { display:flex; } .modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.7); backdrop-filter:blur(3px); animation:fade .2s ease; } .modal-panel { position:relative; z-index:1; width:100%; max-width:560px; max-height:92vh; overflow-y:auto; background:var(--bg-card); border:1px solid var(--border); border-radius:18px 18px 0 0; animation:slide-up .28s cubic-bezier(.2,.8,.2,1); } .modal-close { position:absolute; top:.8rem; right:.8rem; z-index:2; width:40px; height:40px; border-radius:50%; background:var(--bg-surface); border:1px solid var(--border); display:grid; place-items:center; color:var(--text-secondary); } .modal-close:hover { color:var(--text-primary); border-color:var(--border-hover); } .modal-close svg { width:20px; height:20px; } .modal-media { aspect-ratio:16/10; background:var(--bg-surface); display:grid; place-items:center; position:relative; overflow:hidden; border-radius:18px 18px 0 0; } .modal-media::after { content:""; position:absolute; inset:0; background:linear-gradient(135deg,var(--accent-soft),transparent 60%); } .modal-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .modal-media .glyph { width:30%; height:30%; color:var(--accent); opacity:.7; position:relative; z-index:1; } .modal-content { padding:1.4rem clamp(1.2rem,4vw,1.8rem) 1.8rem; } .modal-content .card-tags { margin-bottom:.7rem; } .modal-content h3 { font-family:var(--font-display); font-size:1.5rem; font-weight:700; margin-bottom:.5rem; } .modal-content .modal-desc { color:var(--text-secondary); margin-bottom:1.1rem; } .modal-specs { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; margin-bottom:1.4rem; font-family:var(--font-mono); } .spec { background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:.7rem .85rem; } .spec span { display:block; font-size:.66rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em; margin-bottom:.2rem; } .spec b { font-size:.98rem; color:var(--text-primary); font-weight:600; } .spec b.accent { color:var(--accent); } .modal-actions { display:grid; gap:.9rem; } /* ---------- Bloque de personalización obligatoria (solo algunos productos) ---------- */ .pz-box { border:1px solid var(--cta-border); border-radius:var(--radius); background:var(--bg-primary); padding:1rem 1.05rem 1.1rem; display:grid; gap:.85rem; text-align:center; } .pz-title { font-family:var(--font-mono); font-weight:800; font-size:.9rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); } .pz-note { font-size:.72rem; color:var(--text-muted); margin-top:-.7rem; } .pz-field { display:grid; gap:.5rem; justify-items:center; } .pz-label { font-size:.78rem; font-weight:600; color:var(--text-secondary); } .pz-req { color:var(--accent); } .pz-chips { display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; } .pz-chip { font-family:var(--font-mono); font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:.5rem 1rem; min-height:38px; border-radius:999px; border:1px solid var(--cta-border); background:var(--bg-card); color:var(--cta-text); transition:background-color .18s ease, border-color .18s ease, color .18s ease; } .pz-chip:hover { border-color:var(--accent); } .pz-chip[aria-pressed="true"] { background:var(--accent); border-color:var(--accent); color:var(--on-accent); } .pz-input { width:100%; max-width:320px; padding:.6rem .8rem; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--bg-card); color:var(--text-primary); font-family:var(--font-body); font-size:.92rem; text-align:center; } .pz-input:focus { outline:none; border-color:var(--accent); } .pz-field.pz-missing .pz-chips, .pz-field.pz-missing .pz-input { animation:pz-shake .32s ease; } .pz-field.pz-missing .pz-chip, .pz-field.pz-missing .pz-input { border-color:#D64545; } .pz-warn { font-size:.78rem; color:#D64545; font-weight:600; } @keyframes pz-shake { 0%,100% { transform:translateX(0); } 25% { transform:translateX(-5px); } 75% { transform:translateX(5px); } } @media (prefers-reduced-motion:reduce) { .pz-field.pz-missing * { animation:none !important; } } /* Detalle de la personalización dentro del carrito */ .cart-item-opts { display:block; font-family:var(--font-mono); font-size:.7rem; font-weight:600; color:var(--accent); letter-spacing:.03em; } /* Lightbox */ .lightbox { position:fixed; inset:0; z-index:var(--z-modal); display:none; align-items:center; justify-content:center; padding:1.5rem; } .lightbox.open { display:flex; } .lightbox-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.85); } .lightbox figure { position:relative; z-index:1; max-width:90vw; max-height:85vh; } .lightbox img { border-radius:var(--radius); max-height:80vh; width:auto; } .lightbox figcaption { text-align:center; color:var(--text-secondary); margin-top:.8rem; font-size:.9rem; } .lightbox .modal-close { position:fixed; top:1rem; right:1rem; } @keyframes fade { from{opacity:0} to{opacity:1} } @keyframes slide-up { from{transform:translateY(24px); opacity:.6} to{transform:translateY(0); opacity:1} } /* ========================================================================== RESPONSIVE ========================================================================== */ @media (min-width:600px) { .grid { grid-template-columns:repeat(2,1fr); } .gallery-grid { grid-template-columns:repeat(3,1fr); } .field-row { grid-template-columns:1fr 1fr; gap:1rem; } } @media (min-width:760px) { .pillars { grid-template-columns:repeat(3,1fr); } .steps { grid-template-columns:repeat(3,1fr); } } @media (min-width:880px) { .hero-grid { grid-template-columns:1.05fr .95fr; } .grid { grid-template-columns:repeat(3,1fr); } .b2b-grid { grid-template-columns:1fr 1fr; align-items:start; } .footer-top { grid-template-columns:1.4fr 1fr 1fr; } .modal { align-items:center; padding:1.5rem; } .modal-panel { border-radius:18px; } .modal-media { border-radius:18px 18px 0 0; } } /* ========================================================================== INTRO · presentación inicial a pantalla completa ========================================================================== */ .intro { position:relative; min-height:100vh; min-height:100svh; display:grid; place-items:center; text-align:center; overflow:hidden; padding:7rem 0 5rem; } /* Transparente: hereda el lienzo global; acá solo va la mascota de fondo. */ .intro-bg { position:absolute; inset:0; z-index:0; background:transparent; } /* Mascota gigante de fondo. Para usar foto/video real: reemplazá esta imagen. */ .intro-bg::before { content:""; position:absolute; inset:0; background:url('../img/logo.png') no-repeat center 56% / min(64vw, 540px); opacity:.07; } .intro-bg::after { content:""; position:absolute; inset:0; background:radial-gradient(120% 90% at 50% 48%, transparent 42%, color-mix(in srgb, var(--bg-primary) 80%, transparent) 100%); } .intro-inner { position:relative; z-index:1; max-width:760px; } .intro .eyebrow { color:var(--accent); } .intro-title { font-family:var(--font-display); font-weight:800; letter-spacing:-.035em; line-height:1.02; font-size:clamp(2.7rem, 10vw, 6rem); } .intro-sub { color:var(--text-secondary); font-size:clamp(1.02rem, 2.6vw, 1.3rem); margin:1.4rem auto 0; max-width:46ch; } .intro-actions { display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; margin-top:2.2rem; } .scroll-hint { position:absolute; bottom:1.6rem; left:50%; transform:translateX(-50%); z-index:1; display:flex; flex-direction:column; align-items:center; gap:.35rem; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-secondary); } .scroll-hint svg { width:22px; height:22px; color:var(--accent); animation:bob 1.8s ease-in-out infinite; } @keyframes bob { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(5px); } } /* ========================================================================== SELECTOR DE MODO (switch grande) ========================================================================== */ .section-head.center { margin-inline:auto; text-align:center; } .section-head.center p { margin-inline:auto; } .chooser-grid { display:grid; grid-template-columns:1fr; gap:1.6rem; } /* Dos tarjetas por fila solo desde 1000px. Más abajo la tarjeta queda tan angosta que la columna de texto (46%) no da para el título ni el botón. */ @media (min-width:1000px) { .chooser-grid { grid-template-columns:1fr 1fr; } } /* Apilada, la tarjeta se limita: a todo el ancho la foto se queda corta contra el tope de altura y los objetos se ven diminutos. */ @media (max-width:999px) { .chooser-card { width:100%; max-width:620px; margin-inline:auto; } } .chooser-card { /* Sin borde: es un bloque de color plano. El filete cálido del tema se veía como un anillo alrededor del gris frío de la tarjeta de ciencia. */ position:relative; overflow:hidden; text-align:left; text-decoration:none; border:0; border-radius:22px; display:grid; grid-template-columns:1fr; align-items:stretch; min-height:260px; cursor:pointer; transition:transform .25s ease, box-shadow .25s ease; } /* En pantallas medianas+, texto a la izquierda e imagen a la derecha. El reparto 46/54 es el del mockup: la foto ocupa el 53,6% del ancho de la tarjeta, que es lo que deja a los objetos en la escala de la referencia. */ @media (min-width:560px) { /* minmax(0,…) es imprescindible: con `fr` a secas la columna de texto no baja de su ancho mínimo de contenido y aplasta la foto al 23% del ancho. */ .chooser-card { grid-template-columns:minmax(0,.464fr) minmax(0,.536fr); align-items:center; } } .chooser-card:hover { transform:translateY(-4px); box-shadow:0 20px 44px rgba(20,35,75,.14); } /* Fondo por mundo. Tiene que ser EXACTAMENTE el del fondo de la foto de assets/img/hero/, si no se ve el escalón entre el texto y los objetos. Muestreados de las propias imágenes: no los cambies sin volver a medirlas. */ .chooser-card--design { background:#F7E9DE; } /* = fondo de hero/design.jpg */ .chooser-card--kastor { background:#E6E7EB; } /* = fondo de hero/kastor.jpg */ .chooser-card-body { padding:clamp(1.3rem,3vw,2rem) clamp(1.05rem,2.5vw,1.9rem); display:flex; flex-direction:column; gap:.7rem; z-index:1; } /* Escala contenida: la columna de texto es el 46% de la tarjeta, así que el título no puede crecer al ritmo del viewport o se sale. */ .chooser-brand { font-family:var(--font-display); font-weight:800; line-height:.98; letter-spacing:-.01em; font-size:clamp(1.45rem,3.4vw,2.4rem); color:#14234B; } .chooser-brand .cb-design { display:block; } .chooser-tag { font-family:var(--font-mono); font-weight:700; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; } .chooser-card--design .chooser-tag { color:#E57D37; } .chooser-card--kastor .chooser-tag { color:#14234B; } .chooser-card p { color:#57617A; font-size:.95rem; line-height:1.55; max-width:34ch; } /* CTA ancho, en versalitas y con flecha sólida separada — como el manual. */ .chooser-cta { align-self:stretch; width:100%; max-width:330px; margin-top:1rem; display:inline-flex; align-items:center; justify-content:center; gap:clamp(.55rem,1.5vw,1.15rem); min-height:56px; padding:.9rem clamp(.7rem,1.5vw,1.25rem); border-radius:12px; color:#fff; font-size:clamp(.7rem,.92vw,.88rem); font-weight:500; letter-spacing:.05em; text-transform:uppercase; white-space:nowrap; transition:filter .2s ease; } .chooser-card--design .chooser-cta { background:#E57D37; } .chooser-card--kastor .chooser-cta { background:#14234B; } .chooser-card:hover .chooser-cta { filter:brightness(1.08); } .chooser-cta .cta-arrow { width:20px; height:20px; flex:0 0 auto; transition:transform .2s ease; } .chooser-card:hover .chooser-cta .cta-arrow { transform:translateX(5px); } @media (max-width:559px) { .chooser-cta { max-width:none; } } /* La columna lleva la proporción de la propia foto (780x866). Sin esto la altura la fijaba el texto y, en tarjetas anchas, `contain` ajustaba por altura y los objetos salían mucho más chicos que en la referencia. */ .chooser-card-media { align-self:center; aspect-ratio:780/866; display:flex; align-items:center; justify-content:center; } .chooser-card-media img { width:100%; height:100%; object-fit:contain; object-position:center bottom; display:block; } /* Ícono de respaldo si no hay imagen */ .chooser-ico { width:52px; height:52px; border-radius:14px; background:var(--accent-soft); display:grid; place-items:center; color:var(--accent); } .chooser-ico svg { width:28px; height:28px; } /* ========================================================================== KASTOR CIENCIA · ÁREAS (kastor.html) -------------------------------------------------------------------------- Las áreas van agrupadas (Salud, Arquitectura y Diseño, Ingenierías, Educación escolar). Cada tarjeta es un banner: texto en HTML a la izquierda y el recorte de las piezas a la derecha/abajo. El fondo de la tarjeta es EXACTAMENTE el fondo del recorte (--area-bg), así que la foto se funde con la tarjeta sin bordes visibles. Si se recambian las imágenes de assets/img/areas/, hay que re-muestrear estos hex. ========================================================================== */ .areas-stack { display:flex; flex-direction:column; gap:2.75rem; } /* --- Paletas por grupo. Los tonos de los banners originales son demasiado claros para texto, así que --area-ink es una versión más oscura. Un solo tono de tinta, no dos: el título quedó en 13.8px y a ese tamaño ya no cuenta como «texto grande», así que necesita los mismos 4.5:1 que el kicker y el chip. Los cuatro valores están medidos sobre su --area-bg. --area-bg es el fondo exacto del recorte: no cambiarlo por separado. --- */ .area-group[data-tone="salud"] { --area-bg:#F9F7F2; --area-ink:#45707F; --area-cta:#45707F; --area-rule:#14234B; } .area-group[data-tone="diseno"] { --area-bg:#F3CCB0; --area-ink:#8A3F10; --area-cta:#B0551A; --area-rule:#14234B; } .area-group[data-tone="ing"] { --area-bg:#A9B5C6; --area-ink:#24406F; --area-cta:#24406F; --area-rule:#14234B; } .area-group[data-tone="escolar"] { --area-bg:#B1C4DD; --area-ink:#24406F; --area-cta:#2B5490; --area-rule:#14234B; } .area-group-title { display:flex; align-items:center; gap:.85rem; font-family:var(--font-mono); font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--text-secondary); margin-bottom:.9rem; } .area-group-title::after { content:""; flex:1; height:1px; background:var(--border); } /* Retícula fija de 3, no auto-fit: en el mockup los grupos con menos de 3 áreas NO estiran sus tarjetas (las 2 de Arquitectura miden igual que las 3 de Salud). */ .area-group-grid { display:grid; gap:1.1rem; grid-template-columns:1fr; } @media (min-width:620px) { .area-group-grid { grid-template-columns:repeat(2, 1fr); } } @media (min-width:960px) { .area-group-grid { grid-template-columns:repeat(3, 1fr); } } /* --- Tarjeta --- Medida sobre el mockup 17: la tarjeta es HORIZONTAL (87x53.5 -> 1.6), con el texto en la mitad izquierda y la foto al costado, no debajo. Apilarlas en vertical es lo que hacía que la foto se comiera la tarjeta. La columna de texto es el 45% (el botón CTA termina a los 38 px de 87). */ /* La altura NO se fija con aspect-ratio en la tarjeta: la marca la imagen (0.88 sobre el 55% del ancho = ratio 1.6 exacto). Así, si un texto es más largo de lo previsto la tarjeta crece en lugar de recortarlo en silencio. */ .area-card { position:relative; display:flex; align-items:stretch; background:var(--area-bg); border-radius:18px; overflow:hidden; text-decoration:none; color:var(--text-primary); transition:transform .2s ease, box-shadow .2s ease; } .area-card:hover { transform:translateY(-3px); box-shadow:0 16px 36px rgba(20,35,75,.16); } /* El anillo de foco lo pone la regla global :focus-visible. */ /* 50% y no 45%: en el mockup el título se sale de la columna de texto y llega al 55% del ancho de la tarjeta. Acá no puede invadir la foto, así que el ancho se lo damos ensanchando la columna (y la foto pasa de 0.88 a 0.80 para que la tarjeta siga midiendo 1.6). */ .area-card-body { display:flex; flex-direction:column; min-width:0; flex:0 0 50%; padding:.95rem .8rem .95rem .95rem; } /* Ícono y título en la misma línea, como en la referencia. */ .area-card-head { display:flex; align-items:center; gap:.45rem; margin-bottom:.35rem; } .area-card-ico { width:27px; height:27px; border-radius:8px; background:var(--area-cta); display:grid; place-items:center; color:#FFFFFF; flex:none; } .area-card-ico svg { width:16px; height:16px; } /* El nombre del área es lo que tiene que saltar primero: en la referencia su altura de mayúscula es el 7.6% de la tarjeta, aquí estaba en 4.2%. */ .area-card-title { font-family:var(--font-display); font-size:1.15rem; font-weight:800; line-height:1.08; color:var(--area-ink); text-transform:uppercase; letter-spacing:-.025em; min-width:0; } .area-card-kicker { font-family:var(--font-mono); font-size:.61rem; font-weight:700; /* Tracking corto: con .05em los kickers de 3 palabras largas se iban a una tercera línea y, como la fila iguala alturas, estiraban a sus vecinas. */ letter-spacing:.02em; text-transform:uppercase; line-height:1.3; color:var(--area-ink); margin-bottom:.25rem; } .area-card-desc { font-size:.8rem; line-height:1.45; color:var(--text-primary); flex:1; } .area-card-rule { display:block; height:1px; background:var(--area-rule); opacity:.55; margin:.4rem 0 .4rem; } .area-card-cta { display:inline-flex; align-items:center; justify-content:space-between; gap:.4rem; min-height:36px; padding:.5rem .7rem; border-radius:8px; background:var(--area-cta); color:#FFFFFF; font-size:.71rem; font-weight:600; letter-spacing:.02em; /* Una sola línea: con el nombre del área completo se partía en 3 y se comía 35 px de la tarjeta. El título va justo encima, así que «Entrar» alcanza. */ white-space:nowrap; transition:filter .2s ease; } .area-card:hover .area-card-cta { filter:brightness(1.12); } .area-card-cta svg { width:13px; height:13px; flex:none; } .area-card-state { position:absolute; top:.6rem; right:.7rem; font-family:var(--font-mono); font-weight:700; font-size:.6rem; letter-spacing:.06em; text-transform:uppercase; padding:.22rem .48rem; border-radius:999px; /* Blanco opaco, no translúcido: sobre 4 fondos distintos el contraste del chip tiene que ser el mismo y medible en los cuatro. */ background:var(--bg-card); color:var(--area-ink); } .area-card-state.is-open { color:var(--text-secondary); } /* Las imágenes de assets/img/areas ya vienen rellenadas al 0.88 del hueco con el color de la tarjeta, así que `contain` no recorta ninguna pieza y el relleno es invisible. */ .area-card-media { flex:0 0 50%; min-width:0; } .area-card-media img { display:block; width:100%; height:auto; aspect-ratio:800/1000; /* el tamaño real del archivo: reserva sitio, sin CLS */ object-fit:cover; object-position:50% 50%; } /* --- Colegios STEAM: única de su grupo, ocupa la fila entera --- */ .area-group[data-count="1"] .area-card { grid-column:1 / -1; } @media (min-width:760px) { .area-group[data-count="1"] .area-card-body { flex:0 0 35%; padding:1.6rem 1.5rem; justify-content:center; } .area-group[data-count="1"] .area-card-media { flex:0 0 65%; } /* 2.14 sobre el 65% del ancho = ratio 3.3, el del banner original. */ .area-group[data-count="1"] .area-card-media img { aspect-ratio:1430/667; } .area-group[data-count="1"] .area-card-ico { width:44px; height:44px; border-radius:12px; } .area-group[data-count="1"] .area-card-ico svg { width:25px; height:25px; } .area-group[data-count="1"] .area-card-title { font-size:1.85rem; } .area-group[data-count="1"] .area-card-kicker { font-size:.62rem; } .area-group[data-count="1"] .area-card-desc { font-size:.86rem; } .area-group[data-count="1"] .area-card-cta { align-self:flex-start; min-width:12rem; font-size:.74rem; min-height:40px; } } /* --- Móvil: en una columna la tarjeta horizontal deja el texto muy angosto, así que ahí sí se apila, con la foto en una banda baja --- */ @media (max-width:619px) { .area-card, .area-group[data-count="1"] .area-card { flex-direction:column; } .area-card-body, .area-group[data-count="1"] .area-card-body { flex:1 1 auto; padding:1.3rem 1.25rem 1.1rem; } /* Banda más baja que la proporción del archivo: `cover` se come primero el relleno de fondo que le agregamos, no las piezas. */ .area-card-media, .area-group[data-count="1"] .area-card-media { flex:none; } .area-card-media img, .area-group[data-count="1"] .area-card-media img { aspect-ratio:16/10; } .area-card-ico { width:44px; height:44px; border-radius:12px; } .area-card-ico svg { width:25px; height:25px; } .area-card-title { font-size:1.4rem; } /* a lo ancho sobra sitio de sobra */ .area-card-kicker { font-size:.68rem; } .area-card-desc { font-size:.95rem; } .area-card-state { font-size:.66rem; } .area-card-cta { font-size:.8rem; min-height:44px; padding:.7rem 1rem; } } @media (prefers-reduced-motion:reduce) { .area-card, .area-card-cta { transition:none; } .area-card:hover { transform:none; } } /* ========================================================================== PÁGINA DE CARRERA (carrera.html) ========================================================================== */ .carrera-hero { padding-block:clamp(3rem,7vw,5rem) clamp(1.5rem,4vw,2.5rem); } .carrera-back { display:inline-block; font-family:var(--font-mono); font-size:.8rem; font-weight:600; color:var(--text-secondary); margin-bottom:1rem; transition:color .2s ease; } .carrera-back:hover { color:var(--accent); } .carrera-hero h1 { font-family:var(--font-display); font-weight:800; letter-spacing:-.02em; font-size:clamp(2rem,5.5vw,3rem); } .carrera-tagline { color:var(--text-secondary); font-size:clamp(1rem,2.4vw,1.15rem); margin-top:.6rem; max-width:52ch; } .carrera-section { padding-top:1rem; } /* CTA de dos modos (un bloque) */ .btn-lg { padding:1rem 1.9rem; font-size:1.02rem; min-height:54px; border-radius:14px; } /* Bloque de comunidad (galería poco poblada) */ .carrera-community { background:linear-gradient(160deg, var(--accent-soft), transparent 70%), var(--bg-card); border:1px solid var(--border); border-radius:20px; padding:clamp(1.8rem,5vw,3rem); text-align:center; max-width:720px; margin-inline:auto; } .carrera-community-badge { display:inline-flex; align-items:center; gap:.4rem; font-family:var(--font-mono); font-weight:700; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); background:var(--bg-primary); border:1px solid var(--border); padding:.4rem .8rem; border-radius:999px; margin-bottom:1rem; } .carrera-community-badge svg { width:16px; height:16px; } .carrera-community h2 { font-family:var(--font-display); font-weight:800; font-size:clamp(1.5rem,4vw,2.1rem); } .carrera-community p { color:var(--text-secondary); margin-top:.8rem; max-width:48ch; margin-inline:auto; line-height:1.6; } /* Formulario "Sumá tu idea" */ .carrera-idea-form { max-width:460px; margin:1.5rem auto 0; text-align:left; display:grid; gap:.9rem; } .carrera-idea-form .field { display:grid; gap:.35rem; margin:0; } .carrera-idea-form label { font-size:.85rem; font-weight:600; color:var(--text-primary); } .carrera-idea-form input, .carrera-idea-form textarea { width:100%; padding:.75rem .95rem; border:1px solid var(--border); border-radius:10px; background:var(--bg-card); color:var(--text-primary); font-family:var(--font-body); font-size:.95rem; } .carrera-idea-form textarea { min-height:96px; resize:vertical; } .carrera-idea-form input:focus, .carrera-idea-form textarea:focus { outline:none; border-color:var(--accent); } .carrera-idea-note { font-size:.8rem; color:var(--text-secondary); text-align:center; margin-top:-.15rem; } .carrera-idea-block { margin-top:3rem; padding-top:2.4rem; border-top:1px solid var(--border); } /* ========================================================================== PÁGINA DE CONTACTO (KAS centrado, solo acá) ========================================================================== */ .contacto-section { padding-block:clamp(2.5rem,6vw,4.5rem); } .contacto-layout { display:grid; gap:2rem; grid-template-columns:1fr; align-items:center; } @media (min-width:960px) { .contacto-layout { grid-template-columns:1fr auto 1.05fr; gap:1.6rem; } } .contacto-title { font-family:var(--font-display); font-weight:800; letter-spacing:-.02em; font-size:clamp(1.9rem,4.6vw,2.8rem); } .contacto-lead { color:var(--text-secondary); margin-top:.7rem; max-width:44ch; line-height:1.6; } .contacto-directo-title { font-family:var(--font-display); font-size:1.1rem; margin:1.7rem 0 .8rem; } .contacto-kas { display:flex; justify-content:center; align-items:center; } /* KAS centrado no se esconde: lo mostramos aunque no haya loader que lo revele */ .contacto-kas #kas-buddy.kas-hidden { transform:none; opacity:1; pointer-events:auto; } /* ========================================================================== CUENTA / LOGIN (Supabase) ========================================================================== */ /* Botón de cuenta en el navbar */ .account-link { display:inline-flex; align-items:center; gap:.45rem; min-height:44px; padding:0 .9rem; border-radius:12px; border:1px solid var(--border); background:var(--bg-card); color:var(--text-primary); font-family:var(--font-mono); font-weight:700; font-size:.8rem; transition:border-color .2s ease, color .2s ease; } .account-link:hover { border-color:var(--accent); color:var(--accent); } .account-link svg { width:19px; height:19px; } .account-link.is-logged { border-color:var(--accent); color:var(--accent); } .account-label { max-width:9ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } @media (max-width:520px) { .account-label { display:none; } .account-link { padding:0 .7rem; } } /* Página de cuenta */ .auth-section { display:flex; justify-content:center; } .auth-card { width:100%; max-width:440px; margin-inline:auto; } .auth-box { background:var(--bg-card); border:1px solid var(--border); border-radius:20px; padding:clamp(1.6rem,5vw,2.6rem); box-shadow:0 18px 44px rgba(20,35,75,.08); } .auth-box h1 { font-family:var(--font-display); font-weight:800; font-size:clamp(1.5rem,4vw,2rem); } .auth-lead { color:var(--text-secondary); margin:.5rem 0 1.4rem; line-height:1.55; } .auth-form { display:grid; gap:1rem; } .auth-form .field { display:grid; gap:.35rem; margin:0; } .auth-form label { font-size:.85rem; font-weight:600; } .auth-form input { width:100%; padding:.75rem .95rem; border:1px solid var(--border); border-radius:10px; background:var(--bg-primary); color:var(--text-primary); font-family:var(--font-body); font-size:.95rem; } .auth-form input:focus { outline:none; border-color:var(--accent); } .auth-google { display:inline-flex; align-items:center; justify-content:center; gap:.6rem; } .auth-sep { display:flex; align-items:center; gap:.8rem; color:var(--text-muted); font-size:.8rem; margin:1.1rem 0; } .auth-sep::before, .auth-sep::after { content:""; flex:1; height:1px; background:var(--border); } .auth-switch { text-align:center; margin-top:1.2rem; color:var(--text-secondary); font-size:.9rem; } .auth-switch a { color:var(--accent); font-weight:700; } /* Vista logueado */ .auth-account { text-align:center; } .auth-avatar { width:64px; height:64px; margin:0 auto 1rem; border-radius:50%; background:var(--accent); color:#fff; display:grid; place-items:center; font-family:var(--font-display); font-weight:800; font-size:1.7rem; } .auth-panels { display:grid; gap:1rem; grid-template-columns:1fr; margin:1.6rem 0; text-align:left; } @media (min-width:520px) { .auth-panels { grid-template-columns:1fr 1fr; } } .auth-panel { background:var(--bg-primary); border:1px solid var(--border); border-radius:14px; padding:1.1rem; } .auth-panel h3 { font-family:var(--font-display); font-size:1rem; margin-bottom:.3rem; } .auth-panel p { color:var(--text-secondary); font-size:.86rem; line-height:1.45; } /* ========================================================================== BARRA LATERAL DE NAVEGACIÓN ========================================================================== */ .side-nav { position:fixed; left:16px; top:50%; transform:translateY(-50%); z-index:35; display:none; flex-direction:column; align-items:flex-start; gap:.85rem; } .side-mascot { width:36px; height:36px; display:grid; place-items:center; margin-bottom:.4rem; transition:transform .2s ease; } .side-mascot:hover { transform:scale(1.08); } .side-mascot img { width:100%; height:auto; } .side-links { display:flex; flex-direction:column; gap:.75rem; } .side-link { display:flex; align-items:center; gap:.7rem; color:var(--text-muted); transition:color .2s ease; } .side-link .dot { width:11px; height:11px; border-radius:50%; border:2px solid currentColor; flex:0 0 auto; transition:background-color .2s ease, border-color .2s ease; } .side-link .lbl { font-size:.78rem; font-weight:600; white-space:nowrap; opacity:0; transform:translateX(-6px); transition:opacity .2s ease, transform .2s ease; pointer-events:none; background:var(--bg-card); border:1px solid var(--border); padding:.15rem .5rem; border-radius:6px; } .side-link:hover { color:var(--text-primary); } .side-link:hover .lbl { opacity:1; transform:translateX(0); } .side-link.active { color:var(--accent); } .side-link.active .dot { background:var(--accent); border-color:var(--accent); } @media (min-width:1160px) { .side-nav { display:flex; } } /* ========================================================================== PREGUNTAS FRECUENTES ========================================================================== */ .faq-list { max-width:760px; } .faq-item { border:1px solid var(--border); border-radius:var(--radius); background:var(--bg-card); margin-bottom:.7rem; overflow:hidden; transition:border-color .2s ease; } .faq-item.open { border-color:var(--border-hover); } .faq-q { width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.15rem 1.25rem; font-family:var(--font-display); font-weight:600; font-size:1.02rem; color:var(--text-primary); transition:color .2s ease; } .faq-q:hover { color:var(--accent); } .faq-q .chev { width:20px; height:20px; flex:0 0 auto; color:var(--accent); transition:transform .25s ease; } .faq-item.open .faq-q .chev { transform:rotate(180deg); } .faq-a { max-height:0; overflow:hidden; transition:max-height .3s ease; } .faq-item.open .faq-a { max-height:340px; } .faq-a-inner { padding:0 1.25rem 1.2rem; color:var(--text-secondary); font-size:.95rem; line-height:1.65; } /* Accesibilidad: respeta reduce-motion */ @media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } .wa-float::after, .scroll-hint svg { animation:none; } } /* ========================================================================== GLASSMORPHISM — capa sutil sobre los tokens existentes ========================================================================== */ .card, .pillar, .step, .chooser-card, .team-card { backdrop-filter: blur(8px) saturate(1.2); -webkit-backdrop-filter: blur(8px) saturate(1.2); } .card, .pillar, .chooser-card, .faq-item { box-shadow: 0 1px 2px rgba(20,35,75,.05), 0 10px 24px rgba(20,35,75,.06); } .modal-panel { background: color-mix(in srgb, var(--bg-card) 94%, transparent); backdrop-filter: blur(24px) saturate(1.2); -webkit-backdrop-filter: blur(24px) saturate(1.2); box-shadow: 0 40px 80px rgba(20,35,75,.35), inset 0 1px 0 rgba(255,255,255,.6); } /* ========================================================================== BENTO GRID — pilares (primer pillar ancho, resto 2 columnas) ========================================================================== */ @media (min-width:760px) { #pilares .pillars { grid-template-columns: repeat(2,1fr); } #pilares .pillar:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: 64px 1fr; grid-template-rows: auto 1fr; column-gap: 1.6rem; padding: 2.2rem; } #pilares .pillar:first-child .ico-wrap { grid-column:1; grid-row:1/3; align-self:center; margin-bottom:0; width:64px; height:64px; border-radius:18px; } #pilares .pillar:first-child .ico-wrap svg { width:30px; height:30px; } #pilares .pillar:first-child h3 { grid-column:2; grid-row:1; align-self:end; font-size:1.3rem; } #pilares .pillar:first-child p { grid-column:2; grid-row:2; align-self:start; font-size:1rem; } } /* ========================================================================== LOADING SCREEN ========================================================================== */ #kastor-loader { position:fixed; inset:0; z-index:9999; background:var(--bg-primary); display:flex; align-items:center; justify-content:center; transition: opacity .55s ease, visibility .55s ease; } #kastor-loader.loader-done { opacity:0; visibility:hidden; pointer-events:none; } body.kas-loading { overflow:hidden; } .loader-scene { display:flex; flex-direction:column; align-items:center; gap:1.5rem; width:min(280px,88vw); } .loader-track { width:100%; height:80px; position:relative; overflow:visible; } .loader-mascot-stage { position:absolute; bottom:0; left:-100px; filter:drop-shadow(0 4px 18px var(--accent-shadow)); } .loader-mascot-stage canvas { height:68px; width:auto; display:block; image-rendering:pixelated; } .loader-brand-row { display:flex; gap:.04em; font-family:var(--font-display); font-size:clamp(2.6rem,10vw,4rem); font-weight:800; letter-spacing:-.04em; color:var(--text-primary); } .loader-brand-row span { opacity:0; transform:translateY(14px); display:inline-block; transition:opacity .22s ease, transform .22s ease; } .loader-brand-row span.show { opacity:1; transform:translateY(0); } .loader-bar-wrap { width:100%; height:2px; background:var(--border); border-radius:2px; overflow:hidden; } .loader-bar { height:100%; width:0%; background:linear-gradient(90deg, var(--accent), var(--accent-glow), var(--accent)); background-size:200% auto; border-radius:2px; animation:loader-shimmer 1.4s linear infinite; } @keyframes loader-shimmer { from{background-position:0 center} to{background-position:200% center} } .loader-tagline { font-family:var(--font-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted); } /* ========================================================================== PRODUCTO ESTRELLA ========================================================================== */ #star-product[hidden] { display:none; } .star-product { display:grid; grid-template-columns: 1fr 1fr; gap:2rem; padding:2rem 2.2rem; margin-bottom:2rem; background:color-mix(in srgb, var(--bg-card) 88%, transparent); backdrop-filter:blur(10px) saturate(1.2); -webkit-backdrop-filter:blur(10px) saturate(1.2); border:1px solid var(--border); border-radius:18px; box-shadow:inset 0 1px 0 rgba(255,255,255,.05); opacity:0; transform:translateY(14px); transition:opacity .4s ease, transform .4s cubic-bezier(.22,1,.36,1); } .star-product.star-visible { opacity:1; transform:translateY(0); } .star-media { position:relative; border-radius:12px; overflow:hidden; aspect-ratio:4/3; background:var(--bg-surface); } .star-media img { width:100%; height:100%; object-fit:cover; display:block; } .star-placeholder { width:100%; height:100%; display:grid; place-items:center; } .star-glyph { width:40%; height:40%; color:var(--accent); opacity:.5; } .star-info { display:flex; flex-direction:column; gap:.7rem; justify-content:center; } .star-badge { display:inline-flex; align-items:center; gap:.3em; padding:.22rem .65rem; border-radius:20px; background:var(--accent); color:var(--on-accent); font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; width:fit-content; } .star-name { font-size:clamp(1.4rem,3vw,2rem); font-weight:800; line-height:1.15; } .star-desc { color:var(--text-secondary); font-size:.9rem; line-height:1.55; } .star-meta { display:flex; gap:1rem; align-items:baseline; } .star-price { font-size:1.15rem; font-weight:700; color:var(--accent); } .star-delivery { font-size:.78rem; color:var(--text-muted); } .star-actions { display:flex; gap:.8rem; flex-wrap:wrap; margin-top:.2rem; } @media (max-width:680px) { .star-product { grid-template-columns:1fr; } .star-media { aspect-ratio:16/9; } } /* ========================================================================== MASCOTA KAS — buddy esquina inferior derecha ========================================================================== */ #kas-buddy { position:fixed; right:0; bottom:0; /* pegado a la esquina */ z-index:44; display:flex; flex-direction:column; align-items:flex-end; gap:.4rem; transition:transform .45s cubic-bezier(.34,1.56,.64,1), opacity .3s ease; } #kas-buddy.kas-hidden { transform:translateY(180px); opacity:0; pointer-events:none; } /* KAS centrado en la página de contacto (solo ahí; no flotante) */ #kas-buddy.kas-inline { position:static; right:auto; bottom:auto; z-index:auto; align-items:center; justify-content:center; } #kas-buddy.kas-inline .kas-sprite { width:clamp(170px, 30vw, 240px); } #kas-buddy.kas-inline .kas-bubble { align-self:center; } .kas-bubble { max-width:132px; padding:.45rem .65rem; background:color-mix(in srgb, var(--bg-card) 90%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid var(--border); border-radius:12px 12px 4px 12px; font-size:.73rem; color:var(--text-secondary); line-height:1.4; box-shadow: inset 0 1px 0 rgba(255,255,255,.05); opacity:0; transform:translateY(5px) scale(.96); transition:opacity .22s ease, transform .22s ease; } .kas-bubble.bubble-show { opacity:1; transform:translateY(0) scale(1); } .kas-sprite { /* Discreto: acompaña la esquina sin invadir el contenido. */ width:clamp(118px, 13vw, 158px); cursor:pointer; filter:drop-shadow(0 6px 18px var(--accent-shadow)); transition:filter .18s ease, transform .18s ease; } .kas-sprite:hover { transform:translateY(-3px) scale(1.04); } .kas-sprite canvas { width:100%; height:auto; display:block; image-rendering:pixelated; } .kas-sprite:hover { filter:drop-shadow(0 8px 24px var(--accent-shadow)); } /* Balanceo suave mientras KAS está en reposo (idle) */ .kas-sprite.kas-idle-float { animation:kas-float 3s ease-in-out infinite; } @media (prefers-reduced-motion:reduce) { #kastor-loader, .loader-bar, .loader-brand-row span, .loader-mascot-stage { transition:none !important; animation:none !important; } .kas-sprite { animation:none !important; } } /* ========================================================================== TIENDA KASTOR DESIGN — buscador + barra lateral + etiquetas ========================================================================== */ .store { padding-block:clamp(1.6rem,4vw,2.4rem) clamp(3rem,7vw,5rem); } .store-layout { display:grid; grid-template-columns:1fr; gap:1.4rem; align-items:start; } .store-filter-drawer { background:transparent; } .store-filter-summary { display:flex; align-items:center; justify-content:space-between; gap:.6rem; padding:1rem 1.1rem; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); font-family:var(--font-display); font-weight:700; font-size:.95rem; cursor:pointer; list-style:none; } .store-filter-summary::-webkit-details-marker { display:none; } .store-filter-summary .chev { width:18px; height:18px; color:var(--accent); transition:transform .2s ease; flex:0 0 auto; } .store-filter-drawer[open] .store-filter-summary .chev { transform:rotate(180deg); } .store-filter-body { padding:1.2rem; margin-top:.5rem; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); display:flex; flex-direction:column; gap:1.5rem; } .store-search { position:relative; } .store-search svg { position:absolute; left:.85rem; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--text-muted); pointer-events:none; } .store-search input { width:100%; background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text-primary); padding:.78rem .9rem .78rem 2.6rem; font-family:inherit; font-size:.92rem; min-height:46px; transition:border-color .2s ease; } .store-search input:focus { border-color:var(--accent); outline:none; } .store-sections h5, .store-tags h5 { font-family:var(--font-display); font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; color:var(--text-muted); margin-bottom:.7rem; } #store-section-links { display:flex; flex-direction:column; gap:.2rem; } .store-section-link { display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.55rem .6rem; border-radius:8px; color:var(--text-secondary); font-size:.9rem; font-weight:500; transition:background-color .2s ease, color .2s ease; } .store-section-link .count { font-family:var(--font-mono); font-size:.7rem; color:var(--text-muted); } .store-section-link:hover { background:var(--bg-surface); color:var(--text-primary); } .store-section-link[aria-current="true"] { background:var(--accent-soft); color:var(--accent); font-weight:700; } .tag-chip-list { display:flex; flex-wrap:wrap; gap:.4rem; } .tag-chip { font-size:.78rem; font-weight:600; padding:.42rem .75rem; border-radius:999px; border:1px solid var(--border); background:var(--bg-surface); color:var(--text-secondary); transition:color .2s ease, border-color .2s ease, background-color .2s ease; } .tag-chip .count { font-family:var(--font-mono); font-size:.68rem; color:var(--text-muted); margin-left:.15rem; } .tag-chip[aria-pressed="true"] { color:var(--accent); border-color:var(--accent); background:var(--accent-soft); } .tag-chip:hover { color:var(--text-primary); border-color:var(--border-hover); } .store-header { max-width:640px; margin-bottom:1.5rem; } .store-header h1 { font-family:var(--font-display); font-weight:800; letter-spacing:-.02em; font-size:clamp(1.8rem,4.4vw,2.6rem); margin-top:.3rem; } .store-header p { color:var(--text-secondary); margin-top:.7rem; font-size:1rem; } .store-toolbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; } .store-count { font-family:var(--font-mono); font-size:.8rem; color:var(--text-muted); } .store-empty { padding:3rem 1rem; text-align:center; color:var(--text-secondary); background:var(--bg-card); border:1px dashed var(--border); border-radius:var(--radius); } @media (min-width:900px) { .store-layout { grid-template-columns:260px 1fr; gap:2.4rem; align-items:start; } .store-sidebar { position:sticky; top:88px; } .store-filter-summary { display:none; } .store-filter-body { display:flex !important; margin-top:0; } }