/* =========================================================================== Black Code Studios — hoja de estilo del sitio --------------------------------------------------------------------------- SISTEMA DE COLOR DUAL: · MARCA MADRE (home y todo lo que NO es producto): negro + blanco + plata + dorado. Minimalista premium. El acento por defecto = dorado/plata. · PRODUCTO (mcpgo.php, futuros): MISMO esqueleto negro, pero el ACENTO cambia por producto. Se setea con un inline style en (--accent / --accent-2 / --accent-rgb), tomado de content/products.php. MCPGo = cian #00d4ff. El esqueleto (fondos, bordes, texto) es NEUTRO y compartido; solo el acento distingue "estoy en la empresa" vs "estoy viendo un producto". Mobile-first: base = móvil; media queries escalan a desktop. =========================================================================== */ :root { /* ── Esqueleto neutro (compartido marca + producto) ── */ --bg: #08090b; /* negro profundo neutro */ --bg-2: #0c0d10; /* secciones alternas / paneles */ --surface: #111318; /* tarjetas */ --surface-raised:#171a21; /* hover / elevado */ --border: rgba(255, 255, 255, .12); /* borde neutro */ --border-subtle: rgba(255, 255, 255, .07); /* divisor sutil */ --border-input: rgba(255, 255, 255, .16); --text: #f4f5f7; /* casi blanco */ --text-2: #b7bac3; /* gris plata (secundario) */ --text-dim: #80838d; /* tenue */ /* ── Identidad de la MARCA MADRE (del logo: plata + dorado) ── */ --brand-gold: #c9a227; --brand-gold-2: #e6c869; --brand-silver: #c8c8cc; --brand-silver-2:#9a9a9e; /* ── ACENTO ACTIVO — por defecto = MARCA (dorado/plata). ── Las páginas de producto lo sobrescriben con su color vía . */ --accent: var(--brand-gold); --accent-2: var(--brand-silver); --accent-rgb: 201, 162, 39; /* dorado, para rgba() */ --on-accent: #0a0a0b; /* texto sobre botón de acento */ --success: #3ddc97; --warn: #ffb84d; --error: #ff5c7c; --radius: 14px; --radius-sm: 9px; --maxw: 1140px; --shadow: 0 18px 50px -20px rgba(0, 0, 0, .85); --glow: 0 0 0 1px rgba(var(--accent-rgb), .25), 0 0 32px -8px rgba(var(--accent-rgb), .45); --font: "Segoe UI", Roboto, "Helvetica Neue", system-ui, -apple-system, Arial, sans-serif; --mono: "JetBrains Mono", "Cascadia Code", "Fira Code", ui-monospace, Consolas, monospace; } /* Página de producto: el acento lo fija products.php en . Aquí solo afinamos matices "techy" que diferencian "estoy en un producto" de "estoy en la empresa". */ /* ── TEMA AZUL EXTENDIDO a toda la página de producto ── El esqueleto es el mismo; aquí el acento (cian de MCPGo) respira de arriba a abajo: ambiente azul en el fondo, bordes/títulos/tarjetas/figuras teñidos con el acento. */ body.is-product { background: radial-gradient(58% 44% at 82% 4%, rgba(var(--accent-rgb), .12), transparent 60%), radial-gradient(48% 38% at 2% 42%, rgba(var(--accent-rgb), .07), transparent 60%), radial-gradient(60% 44% at 70% 82%, rgba(var(--accent-rgb), .08), transparent 60%), var(--bg); background-attachment: fixed; } body.is-product .site-header { border-bottom-color: rgba(var(--accent-rgb), .30); background: rgba(8, 9, 11, .82); } body.is-product .hero::after { background: radial-gradient(circle, rgba(var(--accent-rgb),.22), transparent 62%); } /* Secciones: divisores y fondos con tinte azul */ body.is-product .section-alt { background: linear-gradient(180deg, rgba(var(--accent-rgb), .055), transparent 60%), var(--bg-2); border-color: rgba(var(--accent-rgb), .16); } body.is-product .section + .section { border-top: 1px solid rgba(var(--accent-rgb), .07); } /* Título de sección con barra de acento (línea azul) */ body.is-product .section-head h2 { padding-left: 16px; border-left: 3px solid var(--accent); } /* Tarjetas conceptuales teñidas */ body.is-product .about-card { border-color: rgba(var(--accent-rgb), .18); background: linear-gradient(180deg, rgba(var(--accent-rgb), .05), transparent 70%), var(--surface); } body.is-product .about-card:hover { border-color: var(--accent); } /* Chips de herramientas en azul */ body.is-product .tool-chip { border-color: rgba(var(--accent-rgb), .45); color: var(--accent); } /* Capacidades: items con borde/realce azul */ body.is-product .feature-grid li { border-color: rgba(var(--accent-rgb), .16); } /* Figuras (capturas) con glow azul */ body.is-product .product-shot, body.is-product .step-shot { border-color: rgba(var(--accent-rgb), .35); box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .15), 0 24px 60px -28px rgba(var(--accent-rgb), .45); } /* ── Reset ──────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img { max-width: 100%; display: block; height: auto; } a { color: var(--accent); text-decoration: none; transition: color .18s ease; } a:hover { color: var(--accent-2); } h1, h2, h3 { line-height: 1.15; font-weight: 700; letter-spacing: -.02em; } .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 20px; } /* Home: layout más ancho (≈margen lateral 4.5%, como el mockup). Solo home; MCPGo queda en 1140. */ body.is-home .container { max-width: 1440px; } .skip-link { position: absolute; left: -999px; top: 0; z-index: 999; background: var(--accent); color: var(--on-accent); padding: 10px 16px; border-radius: 0 0 8px 0; font-weight: 700; } .skip-link:focus { left: 0; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } /* ── Tipografía utilitaria ──────────────────────────────────────────────── */ .eyebrow { text-transform: uppercase; letter-spacing: .22em; font-size: .72rem; font-weight: 700; color: var(--accent); margin-bottom: 14px; } .grad { background: linear-gradient(100deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ── Botones ────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 26px; border-radius: 999px; font-weight: 700; font-size: .95rem; cursor: pointer; border: 1px solid transparent; transition: transform .15s ease, box-shadow .2s ease, background .2s ease; } .btn:active { transform: translateY(1px); } .btn-primary { background: linear-gradient(100deg, var(--accent), var(--accent-2)); color: var(--on-accent); } .btn-primary:hover { box-shadow: var(--glow); color: var(--on-accent); } .btn-ghost { background: transparent; color: var(--text); border-color: var(--border); } .btn-ghost:hover { border-color: var(--accent); color: var(--accent); } /* ── Header / nav ───────────────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(8, 9, 11, .9); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-subtle); } .header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 64px; } .brand { display: flex; align-items: center; gap: 12px; color: var(--text); } .brand:hover { color: var(--text); } .brand-logo { height: 34px; width: auto; display: block; } .brand-mark { width: 40px; height: auto; display: block; } .brand-word { display: flex; flex-direction: column; line-height: 1; } .bw-1 { font-weight: 800; letter-spacing: .13em; font-size: .82rem; color: var(--text); } .bw-2 { font-weight: 600; letter-spacing: .42em; font-size: .56rem; margin-top: 4px; color: var(--brand-gold); text-indent: .42em; } .site-nav { display: flex; align-items: center; gap: 4px; } .site-nav a { color: var(--text-2); padding: 9px 14px; border-radius: 8px; font-weight: 600; font-size: .92rem; } .site-nav a:hover { color: var(--text); background: var(--surface-raised); } /* ── Botones de cuenta del header: Ingresar (ghost) + Registrarse (sólido) ── */ .nav-auth { display: inline-flex; align-items: center; gap: 8px; margin-left: 6px; } .site-nav .nav-btn { padding: 9px 16px; border-radius: 9px; font-weight: 700; font-size: .92rem; line-height: 1; white-space: nowrap; transition: .2s ease; } .site-nav .nav-btn--login { color: var(--accent); border: 1px solid var(--border); background: transparent; } .site-nav .nav-btn--login:hover { border-color: var(--accent); background: rgba(var(--accent-rgb),.10); } .site-nav .nav-btn--register { color: var(--on-accent); background: var(--accent); border: 1px solid var(--accent); box-shadow: 0 6px 18px -8px rgba(var(--accent-rgb),.7); } .site-nav .nav-btn--register:hover { background: var(--accent-2); border-color: var(--accent-2); transform: translateY(-1px); } /* ── Home: header más presente (como el mockup). Solo home; MCPGo queda igual. ── */ body.is-home .header-inner { min-height: 74px; } body.is-home .brand-logo { height: 46px; } body.is-home .site-nav { gap: 12px; } body.is-home .site-nav > a { font-size: 1.12rem; padding: 10px 18px; position: relative; } /* "Inicio" = página actual → subrayado dorado activo */ body.is-home .site-nav a[href="index.php"] { color: var(--text); } body.is-home .site-nav a[href="index.php"]::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: 4px; height: 2px; background: var(--brand-gold); border-radius: 2px; } /* Home: botones de cuenta un punto más presentes (sin subrayado activo) */ body.is-home .site-nav .nav-btn { font-size: 1rem; padding: 10px 20px; } body.is-home .site-nav .nav-btn::after { content: none; } /* Home: ritmo vertical compacto como el mockup (hero → qué hacemos) */ body.is-home #que-hacemos { padding-top: 52px; } .nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; } .nav-toggle span { width: 24px; height: 2px; background: var(--text); border-radius: 2px; transition: .25s; } /* ── Hero ───────────────────────────────────────────────────────────────── */ .hero { position: relative; padding: 84px 0 72px; overflow: hidden; } .hero-grid { position: absolute; inset: -2px; background-image: linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 46px 46px; -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 35%, transparent 75%); mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 35%, transparent 75%); opacity: .6; pointer-events: none; } .hero::after { content: ""; position: absolute; top: -180px; left: 50%; transform: translateX(-50%); width: 620px; height: 620px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--accent-rgb),.16), transparent 62%); pointer-events: none; } .hero-inner { position: relative; max-width: 820px; } .hero h1 { font-size: clamp(2.1rem, 7vw, 3.8rem); margin-bottom: 22px; } .hero-lede { font-size: clamp(1.02rem, 2.4vw, 1.22rem); color: var(--text-2); max-width: 640px; margin-bottom: 30px; } .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 34px; } .hero-badges { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; } .hero-badges li { font-size: .82rem; font-weight: 600; color: var(--text-2); border: 1px solid var(--border-subtle); border-radius: 999px; padding: 6px 14px; background: var(--surface); } .hero-badges li::before { content: "▹ "; color: var(--accent); } /* ── Secciones ──────────────────────────────────────────────────────────── */ .section { padding: 72px 0; } .section-alt { background: var(--bg-2); border-block: 1px solid var(--border-subtle); } /* Separador fino con tinte dorado que se desvanece a los lados (premium) */ .hr-sep { border: 0; height: 1px; margin: 0; background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .45), transparent); } .section-head { max-width: 680px; margin-bottom: 44px; } .section-head h2 { font-size: clamp(1.7rem, 4.5vw, 2.6rem); } .section-sub { color: var(--text-2); margin-top: 14px; font-size: 1.05rem; } /* ── About ──────────────────────────────────────────────────────────────── */ .about-grid { display: grid; gap: 20px; grid-template-columns: 1fr; } .about-card { background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--radius); padding: 28px; transition: border-color .2s ease, transform .2s ease; } .about-card:hover { border-color: var(--border); transform: translateY(-3px); } .about-icon { width: 48px; height: 48px; display: grid; place-items: center; font-size: 1.5rem; color: var(--accent); background: rgba(var(--accent-rgb),.08); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 18px; } .about-card h3 { font-size: 1.25rem; margin-bottom: 10px; } .about-card p { color: var(--text-2); } /* ── Productos ──────────────────────────────────────────────────────────── */ .products { display: grid; gap: 26px; grid-template-columns: 1fr; } .product-card { background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: border-color .22s ease, transform .22s ease, box-shadow .22s ease; } .product-card:hover { border-color: var(--accent); transform: translateY(-4px); } .product-media { position: relative; aspect-ratio: 16 / 9; background: var(--bg-2); border-bottom: 1px solid var(--border-subtle); } .product-media img { width: 100%; height: 100%; object-fit: cover; } .product-status { position: absolute; top: 14px; left: 14px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: 5px 12px; border-radius: 999px; backdrop-filter: blur(6px); } .status-live { background: rgba(61,220,151,.16); color: var(--success); border: 1px solid rgba(61,220,151,.4); } .status-beta { background: rgba(255,184,77,.16); color: var(--warn); border: 1px solid rgba(255,184,77,.4); } .status-soon { background: rgba(154,166,200,.14); color: var(--text-2); border: 1px solid var(--border-subtle); } .product-body { padding: 28px; } .product-name { font-size: 1.7rem; } .product-name::after { content: ""; display: block; width: 46px; height: 3px; margin-top: 12px; border-radius: 3px; background: var(--accent, var(--accent)); } .product-tagline { color: var(--accent); font-weight: 600; margin: 14px 0 16px; } .product-summary { color: var(--text-2); margin-bottom: 20px; } .product-features { list-style: none; padding: 0; display: grid; gap: 10px; margin-bottom: 22px; } .product-features li { position: relative; padding-left: 28px; color: var(--text); } .product-features li::before { content: "✦"; position: absolute; left: 0; top: 0; color: var(--accent); font-size: .9rem; } .product-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 24px; } .tools-label { color: var(--text-dim); font-size: .85rem; } .tool-chip { font-size: .82rem; font-weight: 600; color: var(--text); background: var(--surface-raised); border: 1px solid var(--border); border-radius: 8px; padding: 6px 12px; } .product-actions { display: flex; flex-wrap: wrap; gap: 12px; } .product-card--soon { display: grid; place-items: center; border-style: dashed; box-shadow: none; } .product-soon { text-align: center; max-width: 360px; } .soon-mark { width: 56px; height: 56px; margin: 0 auto 18px; display: grid; place-items: center; font-size: 2rem; color: var(--accent); border: 1px dashed var(--border); border-radius: 14px; } /* ── CTA band ───────────────────────────────────────────────────────────── */ .cta-band { text-align: center; } .cta-inner { max-width: 720px; margin-inline: auto; } .cta-band h2 { font-size: clamp(1.6rem, 4.5vw, 2.4rem); margin-bottom: 16px; } .cta-band p { color: var(--text-2); margin-bottom: 28px; font-size: 1.08rem; } /* ── Home: tiles de productos (tarjeta compacta clickeable) ─────────────── */ /* Ancho fijo y alineado a la izquierda: 1 producto no se estira, y escala al sumar más. */ .product-tiles { display: grid; gap: 22px; grid-template-columns: 1fr; } @media (min-width: 560px) { .product-tiles { grid-template-columns: repeat(auto-fill, minmax(260px, 330px)); } } .product-tile { display: flex; flex-direction: column; color: var(--text); background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: border-color .22s ease, transform .22s ease; } .product-tile:hover { color: var(--text); border-color: var(--accent); transform: translateY(-4px); } .tile-media { position: relative; aspect-ratio: 16 / 9; background: var(--bg-2); border-bottom: 1px solid var(--border-subtle); } .tile-media img { width: 100%; height: 100%; object-fit: cover; } .tile-body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; } .tile-name { font-size: 1.4rem; } .tile-tagline { color: var(--accent); font-weight: 600; margin: 8px 0 10px; font-size: .96rem; } .tile-short { color: var(--text-2); margin-bottom: 18px; } .tile-link { margin-top: auto; color: var(--accent); font-weight: 700; font-size: .95rem; } .product-tile:hover .tile-link { color: var(--accent-2); } .product-tile--soon { border-style: dashed; box-shadow: none; } .product-tile--soon:hover { transform: none; border-color: var(--border); } .tile-soon { align-items: flex-start; } /* ── Home: hero de marca (texto izquierda · imagen derecha, sobrio) ──────── */ .hero--home { padding: 72px 0 60px; } .hero--home::after { display: none; } /* sin glow dramático en la empresa */ .hero--home .hero-grid { opacity: .35; } /* cuadrícula tenue: profundidad sin ruido */ .hero-home-grid { display: grid; gap: 36px; grid-template-columns: 1fr; align-items: center; position: relative; } .hero-home-text { max-width: 460px; } .hero--home h1 { font-size: clamp(1.8rem, 4.4vw, 2.6rem); font-weight: 700; margin-bottom: 20px; } .hero--home .hero-lede { font-size: 1.08rem; margin-bottom: 22px; } /* Imagen del trabajo real, enmarcada en tono de marca (plata, sin azul) */ .shot--brand { margin: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--bg-2); box-shadow: 0 24px 60px -28px rgba(0, 0, 0, .9), 0 0 0 1px rgba(200, 200, 204, .06); } .shot--brand img { width: 100%; display: block; } /* Etiqueta discreta (reemplaza el "eyebrow" dorado llamativo) */ .kicker { color: var(--text-dim); font-size: .9rem; margin-bottom: 14px; } /* Palabra dorada del título del hero */ .hero--home h1 { line-height: 1.08; letter-spacing: -.01em; } .hero--home h1 .hl { color: var(--brand-gold); } /* Enlace quieto, subrayado dorado */ .hero-link a { color: var(--brand-gold); font-weight: 600; border-bottom: 1px solid rgba(var(--accent-rgb), .5); padding-bottom: 3px; transition: color .18s ease, border-color .18s ease; } .hero-link a:hover { color: var(--brand-gold-2); border-bottom-color: var(--brand-gold-2); } /* ── Hero home: render 3D del logo (se funde con el negro, sin recuadro) ── */ .hero-home-media { position: relative; } /* Render 3D: grande, alineado a la derecha, domina su columna (como el mockup) */ .hero-3d { position: relative; margin: 0 0 0 auto; max-width: 680px; } /* halo dorado extra detrás del render, para asentarlo en el ambiente del hero */ .hero-3d::before { content: ""; position: absolute; inset: -6% -4%; background: radial-gradient(52% 46% at 50% 46%, rgba(var(--accent-rgb), .16), transparent 70%); pointer-events: none; z-index: 0; } .hero-3d img { position: relative; z-index: 1; width: 100%; height: auto; display: block; /* El feather de los bordes va HORNEADO en el alfa del PNG (transparencia elíptica), así se funde con el fondo de la página sin ningún borde de "caja". */ } /* Contenedor angosto para texto largo (sobre el estudio) */ .narrow { max-width: 680px; } .narrow h2 { margin-bottom: 18px; } .narrow p { color: var(--text-2); margin-bottom: 14px; } .muted { color: var(--text-dim); font-size: .92rem; letter-spacing: .02em; } .editor-note { color: var(--text-dim); font-size: .82rem; opacity: .75; margin-top: 22px; } /* ── Home: "Qué hacemos" ────────────────────────────────────────────────── */ .do-grid { display: grid; gap: 24px; grid-template-columns: 1fr; } .do-card { padding: 30px 32px 32px; background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--radius); transition: border-color .2s ease, transform .2s ease; } .do-card:hover { border-color: rgba(var(--accent-rgb), .35); transform: translateY(-3px); } /* número chico arriba (como el mockup) */ .do-mark { display: block; font-weight: 800; font-size: 1rem; line-height: 1; color: var(--brand-gold); letter-spacing: .08em; margin-bottom: 20px; } /* fila: icono en cajita + texto al lado */ .do-row { display: flex; align-items: flex-start; gap: 18px; } .do-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 12px; border: 1px solid rgba(var(--accent-rgb), .35); background: rgba(var(--accent-rgb), .07); color: var(--brand-gold); } .do-icon svg { width: 26px; height: 26px; } .do-text h3 { font-size: 1.18rem; margin-bottom: 8px; } .do-text p { color: var(--text-2); } /* ── Home: showcase de producto (presencia, invita al clic) ─────────────── */ .product-feature { display: grid; grid-template-columns: 1fr; gap: 0; color: var(--text); background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: border-color .22s ease, transform .22s ease; } .product-feature:hover { color: var(--text); border-color: var(--brand-gold); transform: translateY(-4px); } .pf-media { background: var(--bg-2); border-bottom: 1px solid var(--border-subtle); } .pf-media img { width: 100%; display: block; } /* Tarjeta con logo (no captura): logo GRANDE centrado en panel con acento del producto */ .pf-media--logo { display: flex; align-items: center; justify-content: center; padding: 44px; min-height: 100%; background: radial-gradient(120% 120% at 50% 40%, rgba(var(--accent-rgb), .12), transparent 70%), var(--bg-2); border-bottom-color: rgba(var(--accent-rgb), .22); } .pf-media--logo img { width: auto; height: auto; max-width: 90%; max-height: 340px; /* logo GRANDE: llena bien su mitad (acepta cualquier proporción) */ filter: drop-shadow(0 10px 38px rgba(var(--accent-rgb), .5)); } /* Cuerpo de la tarjeta: jerarquía vertical con aire (badge → título → regla → subtítulo → desc → link) */ .pf-body { padding: 44px 44px 46px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; text-align: left; } /* Píldora con el nombre del producto, arriba */ .pf-badge { display: inline-block; padding: 6px 14px; margin-bottom: 18px; border: 1px solid var(--border); border-radius: 999px; font-size: .8rem; font-weight: 700; letter-spacing: .02em; color: var(--text-2); background: rgba(255,255,255,.02); } .pf-name { font-size: clamp(2.4rem, 5vw, 3.4rem); font-weight: 800; line-height: 1.02; letter-spacing: -.01em; } /* Regla corta de acento bajo el título (como el mockup) */ .pf-rule { display: block; width: 64px; height: 3px; border-radius: 3px; margin: 16px 0 18px; background: linear-gradient(90deg, var(--accent), #46e0c4); } .pf-tag { color: var(--text); font-weight: 700; font-size: clamp(1.15rem, 2.4vw, 1.5rem); line-height: 1.25; margin: 0 0 18px; } .pf-desc { color: var(--text-2); margin-bottom: 24px; max-width: 42ch; line-height: 1.6; } .pf-link { margin-top: 4px; color: var(--text); font-weight: 700; } .product-feature:hover .pf-link { color: var(--brand-gold); } /* Palabra(s) con acento dentro de título/subtítulo (cian con leve degradado a teal) */ .pf-acc { color: var(--accent); /* fallback si no hay soporte de clip */ background: linear-gradient(100deg, var(--accent), #46e0c4); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* Tarjeta con acento propio del producto (MCPGo = cian): badge/regla/link/borde en acento */ /* Como el mockup: fondo near-black y el logo dentro de un PANEL INTERIOR redondeado, un poco más claro y separado del texto (no a sangre). La tarjeta gana padding propio y un gap entre el panel del logo y el cuerpo. */ .product-feature--accent { background: #0a0c12; padding: 16px; gap: 16px; max-width: 980px; margin-inline: auto; /* no a todo lo ancho: card proporcionada */ } .product-feature--accent .pf-media { border: 1px solid rgba(var(--accent-rgb), .16); border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 16 / 11; /* acota el alto del panel → la card deja de verse gigante */ } .product-feature--accent .pf-media--logo { padding: 0; /* la imagen nueva YA trae su fondo oscuro → llena el panel a sangre */ background: #0b0f17; border-bottom-color: transparent; } .product-feature--accent .pf-media--logo img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; filter: none; /* sin glow extra: el halo ya viene horneado en el PNG */ } .product-feature--accent .pf-body { padding: 22px 26px 24px; } .product-feature--accent:hover { border-color: var(--accent); } .product-feature--accent .pf-badge { border-color: rgba(var(--accent-rgb), .45); color: var(--accent); } .product-feature--accent .pf-link { color: var(--accent); } .product-feature--accent:hover .pf-link { color: var(--accent-2); } /* ── Página de producto ─────────────────────────────────────────────────── */ .hero--product .hero-inner { max-width: 860px; } .hero--product h1 { font-size: clamp(2.6rem, 9vw, 4.6rem); margin-bottom: 10px; } .product-hero-tagline { font-size: clamp(1.1rem, 3vw, 1.5rem); color: var(--accent); font-weight: 600; margin-bottom: 22px; } .crumb { color: var(--text-2); } .crumb:hover { color: var(--accent); } .hero--product .product-tools { margin-top: 26px; } .product-shot-wrap { padding-top: 0; margin-top: -8px; } .product-shot { margin: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--glow); background: var(--bg-2); } .product-shot img { width: 100%; display: block; } .product-shot--cover { max-width: 980px; margin-inline: auto; } /* ── Flujo en 3 pasos (capturas reales, alternadas) ─────────────────────── */ .steps { list-style: none; padding: 0; display: grid; gap: 40px; } .step { display: grid; gap: 20px; grid-template-columns: 1fr; align-items: center; } .step-num { display: inline-grid; place-items: center; width: 42px; height: 42px; margin-bottom: 14px; font-weight: 800; font-size: 1.1rem; color: var(--accent); border: 1px solid rgba(var(--accent-rgb), .5); border-radius: 50%; background: rgba(var(--accent-rgb), .08); } .step-title { font-size: 1.4rem; margin-bottom: 8px; } .step-text p { color: var(--text-2); max-width: 42ch; } .step-shot { margin: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--bg-2); } .step-shot img { width: 100%; display: block; } /* Placeholder honesto para un paso cuya captura aún no tenemos */ .step-shot--pending { aspect-ratio: 16 / 11; display: grid; place-items: center; padding: 24px; text-align: center; border-style: dashed; box-shadow: none !important; background: repeating-linear-gradient(45deg, rgba(var(--accent-rgb), .05) 0 12px, transparent 12px 24px), var(--bg-2); } .pending-label { color: var(--text-dim); font-size: .9rem; max-width: 24ch; } /* ── Interfaz + capacidades (imagen + lista) ────────────────────────────── */ .interface-grid { display: grid; gap: 26px; grid-template-columns: 1fr; align-items: start; } .feature-grid { list-style: none; padding: 0; display: grid; gap: 14px; grid-template-columns: 1fr; } .feature-grid li { position: relative; padding: 16px 16px 16px 46px; color: var(--text); background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); } .feature-grid li::before { content: "✦"; position: absolute; left: 18px; top: 16px; color: var(--accent); } /* ── Home: banda "sobre nosotros" ───────────────────────────────────────── */ .about-band { display: grid; gap: 32px; grid-template-columns: 1fr; align-items: center; } .about-band-text h2 { font-size: clamp(1.5rem, 4vw, 2.2rem); margin-bottom: 14px; } .about-band-text p { color: var(--text-2); margin-bottom: 12px; } .about-band-note { font-size: .85rem; color: var(--text-dim); border-left: 2px solid var(--border); padding-left: 12px; } .about-band-stats { list-style: none; padding: 0; display: grid; gap: 12px; } .about-band-stats li { display: flex; flex-direction: column; padding: 14px 18px; background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); } .stat-k { color: var(--accent); font-weight: 700; } .stat-v { color: var(--text-2); font-size: .9rem; } /* ── Footer ─────────────────────────────────────────────────────────────── */ .site-footer { background: var(--bg-2); border-top: 1px solid var(--border-subtle); padding: 48px 0 36px; } .footer-inner { display: grid; gap: 28px; grid-template-columns: 1fr; } .footer-logo { width: 210px; max-width: 70%; height: auto; opacity: .92; } .footer-tagline { color: var(--text-2); margin-top: 12px; font-size: .95rem; } .footer-contact h3 { font-size: .82rem; text-transform: uppercase; letter-spacing: .14em; color: var(--text-dim); margin-bottom: 8px; } .footer-meta { color: var(--text-dim); font-size: .9rem; } .footer-note { color: var(--brand-gold); } /* =========================================================================== Login admin =========================================================================== */ .auth-page { min-height: 100vh; display: grid; place-items: center; padding: 32px 20px; background: radial-gradient(ellipse 70% 50% at 50% -10%, rgba(var(--accent-rgb),.12), transparent 60%), var(--bg); } .auth-card { width: 100%; max-width: 410px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 38px 32px; box-shadow: var(--shadow); } .auth-brand { display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: 14px; } .auth-brand img { width: auto; height: 46px; } .auth-title { text-align: center; font-size: 1.4rem; margin-bottom: 4px; } .auth-sub { text-align: center; color: var(--text-dim); font-size: .9rem; margin-bottom: 26px; } .form-group { margin-bottom: 18px; } .form-group label { display: block; font-size: .85rem; font-weight: 600; color: var(--text-2); margin-bottom: 7px; } .form-control { width: 100%; padding: 12px 14px; font-size: .98rem; color: var(--text); background: var(--bg-2); border: 1px solid var(--border-input); border-radius: var(--radius-sm); font-family: inherit; transition: border-color .18s ease, box-shadow .18s ease; } .form-control:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.15); } .auth-card .btn { width: 100%; margin-top: 6px; } .alert { border-radius: var(--radius-sm); padding: 12px 14px; font-size: .9rem; margin-bottom: 20px; border: 1px solid; } .alert-error { background: rgba(255,92,124,.1); border-color: rgba(255,92,124,.4); color: #ffaec0; } .alert-warn { background: rgba(255,184,77,.1); border-color: rgba(255,184,77,.4); color: #ffd699; } .alert-info { background: rgba(var(--accent-rgb),.08); border-color: var(--border); color: var(--text-2); } .auth-foot { text-align: center; margin-top: 22px; font-size: .85rem; color: var(--text-dim); } /* ── Páginas de cuenta de usuario (Ingresar / Registrarse — placeholder) ──── */ .account-card { max-width: 560px; margin-inline: auto; text-align: center; background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--radius); padding: 44px 40px; box-shadow: var(--shadow); } .account-card h1 { font-size: 2rem; margin: 6px 0 16px; } .account-lead { color: var(--text-2); margin: 0 auto 24px; max-width: 44ch; line-height: 1.6; } .account-soon { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 26px; padding: 9px 16px; border-radius: 999px; font-weight: 600; font-size: .92rem; color: var(--accent); border: 1px solid var(--border); background: rgba(var(--accent-rgb), .07); } .account-soon .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .2); } .account-alt { color: var(--text-dim); font-size: .95rem; margin-bottom: 10px; } .account-alt a { color: var(--accent); font-weight: 600; } .account-back { font-size: .88rem; } .account-back a { color: var(--text-dim); } .account-back a:hover { color: var(--text-2); } /* ── Dashboard admin (placeholder) ──────────────────────────────────────── */ .admin-shell { min-height: 100vh; display: flex; flex-direction: column; } .admin-bar { display: flex; align-items: center; justify-content: space-between; padding: 14px 22px; background: var(--bg-2); border-bottom: 1px solid var(--border-subtle); } .admin-main { flex: 1; padding: 40px 22px; } .admin-card { max-width: 760px; margin-inline: auto; background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--radius); padding: 32px; } /* Barra superior: lado derecho con saludo + logout */ .admin-bar-right { display: flex; align-items: center; gap: 16px; } .admin-who { color: var(--text-2); font-size: .9rem; } .admin-who strong { color: var(--text); } /* Cuerpo: nav lateral + contenido (layout extensible) */ .admin-body { flex: 1; display: block; } .admin-nav { display: flex; gap: 6px; padding: 12px 16px; overflow-x: auto; background: var(--bg-2); border-bottom: 1px solid var(--border-subtle); } .admin-nav-link { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; padding: 9px 14px; border-radius: var(--radius-sm); color: var(--text-2); text-decoration: none; font-size: .92rem; border: 1px solid transparent; } .admin-nav-link:hover { color: var(--text); background: var(--surface); } .admin-nav-link.is-active { color: var(--text); background: var(--surface); border-color: var(--border-subtle); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .25); } .ann-icon { color: var(--accent); font-size: 1rem; line-height: 1; } .admin-content { padding: 34px 22px; max-width: 1080px; margin-inline: auto; width: 100%; } .admin-h1 { font-size: 1.7rem; margin: 4px 0 8px; } .admin-h2 { font-size: 1.08rem; margin: 34px 0 14px; color: var(--text); } .admin-lead { color: var(--text-2); max-width: 64ch; margin-bottom: 8px; } .admin-note { color: var(--text-dim); font-size: .9rem; max-width: 64ch; margin: -2px 0 14px; } .admin-note strong { color: var(--text-2); } /* Tarjetas de métricas */ .metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; } .metric-card { background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--radius); padding: 20px 22px; } .metric-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .metric-name { font-weight: 600; color: var(--text); } .metric-key { font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text-dim); border: 1px solid var(--border-subtle); border-radius: 999px; padding: 2px 9px; } .metric-big { font-size: 2.4rem; font-weight: 700; line-height: 1.1; margin-top: 12px; color: var(--accent); } .metric-sub { color: var(--text-dim); font-size: .82rem; margin-top: 2px; } .metric-rows { list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--border-subtle); } .metric-rows li { display: flex; justify-content: space-between; padding: 5px 0; font-size: .9rem; color: var(--text-2); } .metric-rows b { color: var(--text); font-variant-numeric: tabular-nums; } .metric-empty { color: var(--text-dim); background: var(--bg-2); border: 1px dashed var(--border-subtle); border-radius: var(--radius-sm); padding: 18px; text-align: center; font-size: .92rem; } /* =========================================================================== Responsive — escalado a tablet/desktop =========================================================================== */ @media (max-width: 760px) { .nav-toggle { display: flex; } .site-nav { position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 10px 16px 18px; background: var(--bg-2); border-bottom: 1px solid var(--border-subtle); transform: translateY(-12px); opacity: 0; pointer-events: none; transition: .22s ease; } .site-nav.open { transform: none; opacity: 1; pointer-events: auto; } .site-nav > a { padding: 13px 12px; } /* Botones de cuenta apilados a lo ancho en el menú móvil */ .nav-auth { flex-direction: column; align-items: stretch; gap: 8px; margin: 10px 0 0; } .site-nav .nav-btn { display: block; text-align: center; padding: 13px 16px; } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } } @media (min-width: 720px) { .about-grid { grid-template-columns: repeat(3, 1fr); } .footer-inner { grid-template-columns: 2fr 1fr 1fr; align-items: start; } .do-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 860px) { .section { padding: 96px 0; } .hero { padding: 110px 0 96px; } .hero--home { padding: 46px 0 48px; } /* Hero home: columna derecha mayor (logo dominante, como el mockup) */ .hero-home-grid { grid-template-columns: 0.85fr 1.15fr; gap: 40px; } .product-card { display: grid; grid-template-columns: 1.05fr 1fr; } .product-media { aspect-ratio: auto; border-bottom: 0; border-right: 1px solid var(--border-subtle); } .product-card--soon { grid-template-columns: 1fr; } /* Showcase de producto: logo grande | texto, mitades equilibradas como el mockup */ .product-feature { grid-template-columns: 1fr 1.08fr; } .pf-media { border-bottom: 0; border-right: 1px solid var(--border-subtle); } /* Flujo en 3 pasos: texto y captura lado a lado, alternando */ .steps { gap: 56px; } .step { grid-template-columns: 0.85fr 1.15fr; gap: 38px; } .step:nth-child(even) .step-text { order: 2; } /* Interfaz: captura grande + lista de capacidades al lado */ .interface-grid { grid-template-columns: 1.25fr 1fr; gap: 34px; } } @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }