/* ============================================================ lucasjuarez.dev — Design system Identidad: oscuro + verde. Contraste corregido a WCAG AA. ============================================================ */ /* ─── RESET ─── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } :root { /* Superficies */ --bg: #060608; --surface: #0d0d12; --surface-2: #14141b; --border: rgba(255,255,255,.08); --border-str: rgba(255,255,255,.14); /* Marca */ --green: #00ff94; --green-dim: rgba(0,255,148,.12); --green-glow: rgba(0,255,148,.30); --green-ink: #00c974; --purple: #7b5ea7; /* Texto — contraste verificado sobre --bg */ --white: #ffffff; /* 19.6:1 */ --text: #c8c8d8; /* 12.3:1 */ --muted: #8a8a9e; /* 6.0:1 ← era #5a5a6e a 3.0:1 (fallaba AA) */ --faint: #5a5a6e; /* solo bordes/decoración, nunca texto */ /* Tipografía */ --font-head: 'Syne', 'Segoe UI', system-ui, sans-serif; --font-mono: 'DM Mono', ui-monospace, Consolas, monospace; --font-body: 'DM Sans', 'Segoe UI', system-ui, sans-serif; /* Layout */ --pad-x: 6%; --maxw: 1240px; --measure: 68ch; --radius: 4px; /* Semánticos */ --ok: #00ff94; --warn: #ffc24d; --bad: #ff6b5e; } /* overflow-x: clip recorta el menú off-canvas (que es position:fixed y por eso el overflow del body no lo alcanza) sin crear un contenedor de scroll, así position:sticky sigue funcionando. */ html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; } body { background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.7; overflow-x: hidden; -webkit-font-smoothing: antialiased; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: var(--green); text-decoration: none; } p a:not(.btn):not(.card) { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } p a:not(.btn):not(.card):hover { color: var(--white); } :focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 2px; } ::selection { background: var(--green); color: var(--bg); } ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: #23232e; border-radius: 5px; border: 3px solid var(--bg); } ::-webkit-scrollbar-thumb:hover { background: var(--faint); } /* ─── SKIP LINK ─── */ .skip-link { position: absolute; left: 12px; top: -60px; background: var(--green); color: var(--bg); padding: .7rem 1.2rem; border-radius: var(--radius); font-family: var(--font-mono); font-size: .85rem; font-weight: 500; z-index: 10000; transition: top .2s; } .skip-link:focus { top: 12px; } /* ─── CURSOR CUSTOM ─── Solo en escritorio con puntero fino, y solo si JS confirma que corre (clase .js-cursor en ). Antes: cursor:none global → sin JS el usuario se quedaba sin puntero visible. */ @media (hover: hover) and (pointer: fine) { html.js-cursor body { cursor: none; } html.js-cursor a, html.js-cursor button, html.js-cursor input, html.js-cursor textarea, html.js-cursor select, html.js-cursor label { cursor: none; } #cursor { width: 9px; height: 9px; background: var(--green); border-radius: 50%; position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; transform: translate(-50%,-50%); transition: width .2s, height .2s; mix-blend-mode: difference; } #cursor-ring { width: 34px; height: 34px; border: 1px solid rgba(0,255,148,.45); border-radius: 50%; position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9998; transform: translate(-50%,-50%); } body:has(a:hover) #cursor, body:has(button:hover) #cursor { width: 18px; height: 18px; } } #cursor, #cursor-ring { display: none; } @media (hover: hover) and (pointer: fine) { html.js-cursor #cursor, html.js-cursor #cursor-ring { display: block; } } /* ─── NOISE ─── */ body::before { content: ''; position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); pointer-events: none; z-index: 1; opacity: .35; } /* ============================================================ TIPOGRAFÍA ============================================================ */ h1, h2, h3, h4 { font-family: var(--font-head); color: var(--white); letter-spacing: -.02em; line-height: 1.15; text-wrap: balance; } /* El piso del clamp baja: con 2.4rem fijo, abajo de ~470px una palabra larga ("automatizar", "demostraciones") medía más que la pantalla y el título quedaba cortado. Partirla con overflow-wrap se ve peor que achicarla. De 470px para arriba el 6vw manda y nada cambia. */ .h-xl { font-size: clamp(1.75rem, 6vw, 4.6rem); font-weight: 800; line-height: 1.02; letter-spacing: -.035em; } .h-lg { font-size: clamp(1.5rem, 4vw, 3rem); font-weight: 800; letter-spacing: -.03em; } .h-md { font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 700; } .h-sm { font-size: clamp(1.1rem, 1.8vw, 1.3rem); font-weight: 700; } .eyebrow { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--green); display: flex; align-items: center; gap: .7rem; } .eyebrow::before { content: ''; width: 26px; height: 1px; background: var(--green); flex-shrink: 0; } .lede { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--text); max-width: 58ch; line-height: 1.65; } .muted { color: var(--muted); } .prose { max-width: var(--measure); } .prose > * + * { margin-top: 1.1rem; } .prose h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-top: 2.8rem; } .prose h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); margin-top: 2rem; } .prose ul, .prose ol { padding-left: 1.3rem; display: flex; flex-direction: column; gap: .5rem; } .prose li { line-height: 1.65; } .prose strong { color: var(--white); font-weight: 600; } .prose code { font-family: var(--font-mono); font-size: .88em; background: var(--surface-2); padding: .12em .4em; border-radius: 3px; color: var(--green); border: 1px solid var(--border); } .prose pre { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--green); padding: 1.1rem 1.3rem; overflow-x: auto; border-radius: var(--radius); font-family: var(--font-mono); font-size: .82rem; line-height: 1.7; color: var(--text); } .prose pre code { background: none; border: none; padding: 0; color: inherit; } .prose blockquote { border-left: 3px solid var(--green); padding: .3rem 0 .3rem 1.2rem; color: var(--white); font-size: 1.08rem; } .prose table { width: 100%; border-collapse: collapse; font-size: .92rem; } .prose th, .prose td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--border); vertical-align: top; } .prose th { font-family: var(--font-mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 500; } .table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); } .table-wrap table { min-width: 560px; } .table-wrap th, .table-wrap td { padding: .7rem 1rem; } /* ============================================================ LAYOUT ============================================================ */ .section { padding: clamp(4rem, 9vw, 7rem) var(--pad-x); position: relative; z-index: 2; } .section--tight { padding-top: clamp(2.5rem, 5vw, 4rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); } .wrap { max-width: var(--maxw); margin: 0 auto; } .wrap--narrow { max-width: 820px; margin: 0 auto; } .stack { display: flex; flex-direction: column; } .stack-sm > * + * { margin-top: .8rem; } .stack-md > * + * { margin-top: 1.6rem; } .stack-lg > * + * { margin-top: 3rem; } .divider { height: 1px; background: var(--border); max-width: var(--maxw); margin: 0 auto; } .grid { display: grid; gap: 1.4rem; } /* min(Npx, 100%) en vez de Npx a secas: con el valor fijo, en un contenedor más angosto que N la pista igual mide N y desborda. Es lo que cortaba las tarjetas de /casos/ en pantallas de 320px. */ .grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); } .grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); } .grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); } .grid > * { min-width: 0; } /* ============================================================ NAV ============================================================ */ .nav { position: fixed; top: 0; left: 0; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.1rem var(--pad-x); z-index: 1000; transition: background .35s, backdrop-filter .35s, border-color .35s; border-bottom: 1px solid transparent; } .nav.scrolled { background: rgba(6,6,8,.88); backdrop-filter: blur(16px); border-bottom-color: var(--border); } .nav-logo { font-family: var(--font-head); font-weight: 800; font-size: 1.1rem; color: var(--white); letter-spacing: -.02em; white-space: nowrap; } .nav-logo span { color: var(--green); } .nav-menu { display: flex; align-items: center; gap: 1.8rem; list-style: none; } .nav-menu > li { position: relative; } .nav-menu a { font-family: var(--font-mono); font-size: .76rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); transition: color .2s; display: flex; align-items: center; gap: .35rem; white-space: nowrap; } .nav-menu a:hover, .nav-menu a[aria-current="page"] { color: var(--white); } /* Dropdown de servicios */ .nav-drop > button { font-family: var(--font-mono); font-size: .76rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); background: none; border: none; display: flex; align-items: center; gap: .35rem; transition: color .2s; padding: 0; } .nav-drop > button:hover, .nav-drop[data-open="true"] > button { color: var(--white); } .nav-drop > button::after { content: ''; width: 5px; height: 5px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s; } .nav-drop[data-open="true"] > button::after { transform: rotate(225deg) translateY(-2px); } .nav-drop-panel { position: absolute; top: calc(100% + 1.1rem); left: -1rem; background: var(--surface); border: 1px solid var(--border-str); border-radius: var(--radius); padding: .6rem; min-width: 290px; display: none; flex-direction: column; gap: 1px; box-shadow: 0 20px 50px rgba(0,0,0,.65); } /* Puente invisible sobre el hueco entre el botón y el panel. Sin esto, al bajar el mouse se sale del
  • , se dispara mouseleave y el menú se cierra antes de llegar a las opciones. */ .nav-drop-panel::before { content: ''; position: absolute; left: 0; right: 0; top: -1.2rem; height: 1.2rem; } .nav-drop[data-open="true"] .nav-drop-panel { display: flex; } .nav-drop-panel a { text-transform: none; font-family: var(--font-body); font-size: .88rem; letter-spacing: 0; color: var(--text); padding: .55rem .7rem; border-radius: 3px; line-height: 1.4; transition: background .15s, color .15s; } .nav-drop-panel a:hover { background: var(--surface-2); color: var(--white); } .nav-drop-panel a small { display: block; color: var(--muted); font-size: .76rem; } .nav-actions { display: flex; align-items: center; gap: .7rem; } .hamburger { display: none; background: none; border: none; flex-direction: column; gap: 5px; padding: .4rem; } .hamburger span { display: block; width: 22px; height: 1.5px; background: var(--white); transition: transform .3s, opacity .3s; } .hamburger[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); } .hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .hamburger[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); } @media (max-width: 1080px) { .nav-menu { position: fixed; inset: 0; background: var(--bg); flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: .2rem; padding: 6rem var(--pad-x) 8rem; overflow-y: auto; transform: translateX(100%); /* Este z-index se resuelve DENTRO del .nav (que ya crea su propio stacking context con z-index:1000), no contra la página. Contra sus hermanos alcanza con 1: el logo y la hamburguesa se ponen por encima con 2. Antes valía 999 y, al ser un panel a pantalla completa que viene después en el DOM, tapaba el botón de cerrar. */ z-index: 1; /* Cerrado: fuera del alcance del teclado y de los lectores de pantalla. El ocultamiento se retrasa hasta que termina el deslizamiento; al abrir es inmediato. Sin esto, el menú cerrado seguiría siendo enfocable. */ visibility: hidden; transition: transform .32s cubic-bezier(.4,0,.2,1), visibility 0s linear .32s; } .nav-menu.open { transform: translateX(0); visibility: visible; transition: transform .32s cubic-bezier(.4,0,.2,1), visibility 0s linear 0s; } .nav-menu a, .nav-drop > button { font-size: 1rem; padding: .75rem 0; width: 100%; } .nav-drop { width: 100%; } .nav-drop-panel { position: static; display: flex; border: none; background: none; box-shadow: none; padding: 0 0 .6rem .9rem; min-width: 0; max-height: 0; overflow: hidden; transition: max-height .3s; } .nav-drop[data-open="true"] .nav-drop-panel { max-height: 640px; } .nav-drop-panel a { padding: .5rem 0; font-size: .92rem; } .hamburger { display: flex; } .nav-actions .btn { display: none; } /* Por encima del panel abierto, para que la hamburguesa siga siendo clickeable y se pueda cerrar el menú. */ .nav-logo, .nav-actions { position: relative; z-index: 2; } /* Con el menú abierto la barra no pinta su propio fondo. Si lo hace, su capa semitransparente con blur y su borde inferior quedan encima del panel opaco y lo cortan con una franja horizontal: es el efecto de "menú partido" que aparece al scrollear con el menú abierto. */ .nav.menu-open, .nav.menu-open.scrolled { background: transparent; backdrop-filter: none; border-bottom-color: transparent; } } /* ============================================================ BOTONES ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; font-family: var(--font-mono); font-size: .82rem; font-weight: 500; letter-spacing: .04em; padding: .85rem 1.7rem; border-radius: var(--radius); border: 1px solid transparent; transition: all .22s; text-align: center; line-height: 1.3; white-space: nowrap; /* Nunca más ancho que su contenedor. Sin esto, una etiqueta larga ("Automatización en Buenos Aires") empuja el botón fuera de la tarjeta y del viewport, porque el white-space: nowrap le impide partirse. En móvil directamente se permite que envuelva. */ max-width: 100%; } .btn-primary { background: var(--green); color: #04120b; box-shadow: 0 0 28px rgba(0,255,148,.22); font-weight: 600; } .btn-primary:hover { box-shadow: 0 0 44px rgba(0,255,148,.42); transform: translateY(-2px); color: #04120b; } .btn-ghost { background: transparent; color: var(--white); border-color: var(--border-str); } .btn-ghost:hover { border-color: var(--green); color: var(--green); background: var(--green-dim); } .btn-wa { background: #25D366; color: #052e12; font-weight: 600; } .btn-wa:hover { background: #1fb757; transform: translateY(-2px); color: #052e12; } .btn-sm { padding: .6rem 1.15rem; font-size: .76rem; } .btn-lg { padding: 1.05rem 2.2rem; font-size: .9rem; } .btn-block { width: 100%; } .btn svg { width: 16px; height: 16px; flex-shrink: 0; } .btn-row { display: flex; flex-wrap: wrap; gap: .8rem; } /* ============================================================ HERO ============================================================ */ .hero { min-height: min(94vh, 900px); display: flex; flex-direction: column; justify-content: center; padding: 9rem var(--pad-x) 4rem; position: relative; overflow: hidden; z-index: 2; } .hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(0,255,148,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(0,255,148,.035) 1px, transparent 1px); background-size: 62px 62px; -webkit-mask-image: radial-gradient(ellipse 75% 75% at 45% 45%, #000 25%, transparent 100%); mask-image: radial-gradient(ellipse 75% 75% at 45% 45%, #000 25%, transparent 100%); } .orb { position: absolute; border-radius: 50%; filter: blur(110px); pointer-events: none; z-index: -1; } .orb-1 { width: 520px; height: 520px; background: rgba(0,255,148,.07); top: -140px; left: -170px; } .orb-2 { width: 420px; height: 420px; background: rgba(123,94,167,.09); bottom: -60px; right: -120px; } .hero-inner { max-width: var(--maxw); margin: 0 auto; width: 100%; } .hero h1 { max-width: 17ch; } .hero h1 .g { color: var(--green); } .hero-sub { margin-top: 1.6rem; max-width: 56ch; font-size: clamp(1.02rem, 1.5vw, 1.18rem); color: var(--text); line-height: 1.65; } .hero-actions { margin-top: 2.4rem; } .trust-row { margin-top: 2.4rem; display: flex; flex-wrap: wrap; gap: .7rem 1.8rem; font-family: var(--font-mono); font-size: .78rem; color: var(--muted); } .trust-row span { display: flex; align-items: center; gap: .5rem; } .trust-row svg { width: 14px; height: 14px; color: var(--green); flex-shrink: 0; } /* ============================================================ CARDS ============================================================ */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.7rem; display: flex; flex-direction: column; gap: .7rem; transition: border-color .25s, transform .25s, background .25s; position: relative; } a.card:hover, .card--link:hover { border-color: var(--green); transform: translateY(-3px); background: var(--surface-2); } .card h3 { font-size: 1.12rem; color: var(--white); } .card p { color: var(--muted); font-size: .93rem; line-height: 1.6; } .card .card-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius); background: var(--green-dim); color: var(--green); margin-bottom: .3rem; } .card .card-icon svg { width: 21px; height: 21px; } .card-arrow { margin-top: auto; padding-top: .6rem; font-family: var(--font-mono); font-size: .78rem; color: var(--green); display: flex; align-items: center; gap: .4rem; } a.card:hover .card-arrow { gap: .7rem; } .card-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .3rem; } .tag { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .05em; padding: .2rem .55rem; border: 1px solid var(--border-str); border-radius: 3px; color: var(--muted); } .tag--green { color: var(--green); border-color: rgba(0,255,148,.35); background: var(--green-dim); } .card--feature { background: linear-gradient(160deg, var(--surface-2), var(--surface)); border-color: var(--border-str); } /* ============================================================ BLOQUE DE PROBLEMAS (dolor → solución) ============================================================ */ .pain { border-left: 2px solid var(--border-str); padding: .2rem 0 .2rem 1.3rem; display: flex; flex-direction: column; gap: .35rem; transition: border-color .25s; } .pain:hover { border-left-color: var(--green); } .pain b { color: var(--white); font-family: var(--font-head); font-size: 1.02rem; font-weight: 700; } .pain span { color: var(--muted); font-size: .92rem; } /* ============================================================ CTA CONTEXTUAL ============================================================ */ .cta-box { background: linear-gradient(150deg, rgba(0,255,148,.09), rgba(123,94,167,.06)); border: 1px solid rgba(0,255,148,.28); border-radius: var(--radius); padding: clamp(1.6rem, 4vw, 2.6rem); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.4rem; } .cta-box__text { flex: 1 1 340px; display: flex; flex-direction: column; gap: .5rem; } .cta-box__text strong { font-family: var(--font-head); font-size: clamp(1.15rem, 2.2vw, 1.5rem); color: var(--white); font-weight: 700; line-height: 1.25; letter-spacing: -.02em; } .cta-box__text span { color: var(--text); font-size: .95rem; max-width: 52ch; } /* flex-basis auto pero con permiso para encogerse: con `flex: 0 0 auto` la fila conservaba el ancho natural de sus botones y se salía de la caja en pantallas angostas. min-width:0 desactiva el mínimo automático que flexbox le da a sus ítems. */ .cta-box .btn-row { flex: 0 1 auto; min-width: 0; } .cta-inline { background: var(--surface); border: 1px solid var(--border-str); border-left: 3px solid var(--green); border-radius: var(--radius); padding: 1.4rem 1.6rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin: 2.4rem 0; } .cta-inline p { margin: 0; font-size: .98rem; color: var(--white); flex: 1 1 280px; font-family: var(--font-head); font-weight: 600; } /* ============================================================ WHATSAPP FLOTANTE + BARRA MÓVIL ============================================================ */ .wa-float { position: fixed; right: 20px; bottom: 20px; z-index: 900; display: flex; align-items: center; gap: .6rem; background: #25D366; color: #052e12; padding: .85rem 1.25rem; border-radius: 999px; font-family: var(--font-mono); font-size: .82rem; font-weight: 600; box-shadow: 0 8px 28px rgba(0,0,0,.5), 0 0 0 6px rgba(37,211,102,.12); transition: transform .22s, box-shadow .22s; } .wa-float:hover { transform: translateY(-3px) scale(1.02); color: #052e12; box-shadow: 0 12px 34px rgba(0,0,0,.6), 0 0 0 9px rgba(37,211,102,.16); } .wa-float svg { width: 20px; height: 20px; flex-shrink: 0; } .mobile-bar { display: none; } @media (max-width: 780px) { /* En pantallas angostas el texto del botón manda: puede partirse en dos líneas antes que desbordar. Y los botones de una fila pasan a ocupar el ancho completo, apilados, en vez de competir por un espacio que no alcanza para ninguno de los dos. */ .btn { white-space: normal; text-wrap: balance; } .btn-row { width: 100%; min-width: 0; } .btn-row > .btn { flex: 1 1 100%; } /* Dentro de las cajas de CTA la fila pasa a renglón propio en vez de pelear por el espacio con el texto. */ .cta-box .btn-row, .cta-inline .btn-row { flex: 1 1 100%; } .wa-float { display: none; } .mobile-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border-str); border-top: 1px solid var(--border-str); padding-bottom: env(safe-area-inset-bottom, 0); } .mobile-bar a { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .95rem .6rem; font-family: var(--font-mono); font-size: .8rem; font-weight: 600; background: var(--surface); } .mobile-bar a.wa { background: #25D366; color: #052e12; } .mobile-bar a.form { background: var(--surface); color: var(--green); } .mobile-bar svg { width: 17px; height: 17px; } body { padding-bottom: 58px; } } /* ============================================================ FORMULARIO ============================================================ */ .form { display: flex; flex-direction: column; gap: 1.1rem; max-width: 560px; } .field { display: flex; flex-direction: column; gap: .45rem; } .field label { font-family: var(--font-mono); font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .field input, .field textarea, .field select { background: var(--surface); border: 1px solid var(--border-str); border-radius: var(--radius); padding: .85rem 1rem; color: var(--white); font-family: var(--font-body); font-size: 1rem; transition: border-color .2s, background .2s; width: 100%; } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--green); background: var(--surface-2); box-shadow: 0 0 0 3px rgba(0,255,148,.12); } .field textarea { min-height: 130px; resize: vertical; line-height: 1.6; } .field input::placeholder, .field textarea::placeholder { color: var(--faint); } .field-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-note { font-size: .84rem; color: var(--muted); } .form-status { font-family: var(--font-mono); font-size: .86rem; padding: .8rem 1rem; border-radius: var(--radius); display: none; } .form-status.show { display: block; } .form-status.ok { background: var(--green-dim); color: var(--green); border: 1px solid rgba(0,255,148,.35); } .form-status.err { background: rgba(255,107,94,.1); color: var(--bad); border: 1px solid rgba(255,107,94,.35); } /* ============================================================ HERRAMIENTAS (lead magnets) ============================================================ */ .tool-panel { background: var(--surface); border: 1px solid var(--border-str); border-radius: var(--radius); padding: clamp(1.4rem, 3vw, 2.2rem); display: flex; flex-direction: column; gap: 1.3rem; } .tool-result { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.4rem; display: flex; flex-direction: column; gap: 1rem; } .metric { display: flex; flex-direction: column; gap: .15rem; } .metric b { font-family: var(--font-mono); font-size: clamp(1.6rem, 4vw, 2.3rem); color: var(--green); font-weight: 500; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.1; } .metric span { font-family: var(--font-mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); } .range-row { display: flex; flex-direction: column; gap: .5rem; } .range-row .range-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; } .range-row label { font-size: .92rem; color: var(--text); font-family: var(--font-body); text-transform: none; letter-spacing: 0; } .range-row output { font-family: var(--font-mono); font-size: .95rem; color: var(--green); font-variant-numeric: tabular-nums; } input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; background: var(--surface-2); border-radius: 2px; border: 1px solid var(--border); padding: 0; } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--green); border: none; box-shadow: 0 0 10px var(--green-glow); } input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--green); border: none; } .checklist { display: flex; flex-direction: column; gap: .1rem; } .check-item { display: flex; gap: .8rem; align-items: flex-start; padding: .7rem .2rem; border-bottom: 1px solid var(--border); cursor: pointer; } .check-item:last-child { border-bottom: none; } .check-item input { margin-top: .3rem; width: 17px; height: 17px; accent-color: var(--green); flex-shrink: 0; } .check-item span { font-size: .94rem; color: var(--text); line-height: 1.5; } .check-item small { display: block; color: var(--muted); font-size: .82rem; margin-top: .15rem; } .check-item input:checked + label span, .check-item input:checked + span { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--faint); } /* Botón "no entiendo este punto" */ .dunno { flex-shrink: 0; margin-top: .1rem; width: 26px; height: 26px; border-radius: 50%; background: transparent; border: 1px solid var(--border-str); color: var(--muted); font-family: var(--font-mono); font-size: .85rem; font-weight: 600; line-height: 1; display: flex; align-items: center; justify-content: center; transition: all .2s; } .dunno:hover { border-color: var(--green); color: var(--green); background: var(--green-dim); } .dunno[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: #04120b; box-shadow: 0 0 14px var(--green-glow); } .progress-bar { height: 5px; background: var(--surface-2); border-radius: 3px; overflow: hidden; border: 1px solid var(--border); } .progress-bar i { display: block; height: 100%; background: var(--green); width: 0; transition: width .3s; } /* ============================================================ BREADCRUMBS ============================================================ */ .crumbs { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; font-family: var(--font-mono); font-size: .74rem; color: var(--muted); list-style: none; margin-bottom: 1.5rem; } .crumbs li { display: flex; align-items: center; gap: .45rem; } .crumbs li:not(:last-child)::after { content: '/'; color: var(--faint); } .crumbs a { color: var(--muted); } .crumbs a:hover { color: var(--green); } .crumbs [aria-current="page"] { color: var(--text); } /* ============================================================ ARTÍCULOS / BLOG ============================================================ */ .post-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; font-family: var(--font-mono); font-size: .76rem; color: var(--muted); } .post-list { display: flex; flex-direction: column; gap: 0; } .post-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .6rem 2rem; padding: 1.5rem 0; border-bottom: 1px solid var(--border); align-items: start; transition: padding-left .25s, border-color .25s; } .post-row:hover { padding-left: .6rem; border-bottom-color: var(--green); } .post-row h3 { font-size: 1.1rem; line-height: 1.35; } .post-row:hover h3 { color: var(--green); } .post-row p { color: var(--muted); font-size: .9rem; margin-top: .35rem; max-width: 62ch; } .post-row .tag { align-self: start; } @media (max-width: 620px) { .post-row { grid-template-columns: 1fr; } } .toc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.2rem 1.4rem; display: flex; flex-direction: column; gap: .5rem; } .toc b { font-family: var(--font-mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 500; } .toc ol { padding-left: 1.1rem; display: flex; flex-direction: column; gap: .35rem; } .toc a { color: var(--text); font-size: .92rem; } .toc a:hover { color: var(--green); } /* ============================================================ FAQ ============================================================ */ .faq { display: flex; flex-direction: column; gap: 0; } .faq details { border-bottom: 1px solid var(--border); } .faq summary { padding: 1.1rem 2rem 1.1rem 0; font-family: var(--font-head); font-weight: 600; color: var(--white); font-size: 1.02rem; position: relative; list-style: none; line-height: 1.4; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ''; position: absolute; right: .4rem; top: 1.5rem; width: 8px; height: 8px; border-right: 1.5px solid var(--green); border-bottom: 1.5px solid var(--green); transform: rotate(45deg); transition: transform .25s; } .faq details[open] summary::after { transform: rotate(225deg); } .faq details > div { padding: 0 0 1.2rem; color: var(--muted); max-width: 66ch; } .faq details > div > * + * { margin-top: .7rem; } /* ============================================================ PRECIOS / PLANES ============================================================ */ .plan { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.8rem; display: flex; flex-direction: column; gap: 1rem; } .plan--featured { border-color: var(--green); background: linear-gradient(165deg, rgba(0,255,148,.06), var(--surface)); } .plan__badge { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--green); } .plan__price { font-family: var(--font-head); font-size: 1.9rem; font-weight: 800; color: var(--white); letter-spacing: -.03em; line-height: 1; } .plan__price small { font-family: var(--font-mono); font-size: .78rem; color: var(--muted); font-weight: 400; letter-spacing: 0; display: block; margin-top: .35rem; } .plan ul { list-style: none; display: flex; flex-direction: column; gap: .55rem; } .plan li { display: flex; gap: .6rem; align-items: flex-start; font-size: .92rem; color: var(--text); } .plan li::before { content: ''; width: 14px; height: 8px; border-left: 1.5px solid var(--green); border-bottom: 1.5px solid var(--green); transform: rotate(-45deg); flex-shrink: 0; margin-top: .35rem; } .plan .btn { margin-top: auto; } /* ============================================================ CASOS / DEMOS ============================================================ */ .badge-demo { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; padding: .25rem .6rem; border-radius: 3px; background: rgba(255,194,77,.12); color: var(--warn); border: 1px solid rgba(255,194,77,.3); } .badge-real { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; padding: .25rem .6rem; border-radius: 3px; background: var(--green-dim); color: var(--green); border: 1px solid rgba(0,255,148,.3); } .ba-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .ba-cell { background: var(--surface); padding: 1.2rem; display: flex; flex-direction: column; gap: .3rem; } .ba-cell .k { font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); } .ba-cell .v { font-family: var(--font-mono); font-size: 1.4rem; color: var(--white); font-variant-numeric: tabular-nums; } .ba-cell.after .v { color: var(--green); } /* ============================================================ MARQUEE ============================================================ */ .marquee { overflow: hidden; padding: 1.6rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); position: relative; z-index: 2; } .marquee-track { display: flex; gap: 3.5rem; width: max-content; animation: marquee 30s linear infinite; } .marquee-item { font-family: var(--font-head); font-size: 1.05rem; font-weight: 700; color: var(--muted); letter-spacing: .04em; white-space: nowrap; display: flex; align-items: center; gap: .9rem; } .marquee-item::before { content: ''; width: 5px; height: 5px; background: var(--green); border-radius: 50%; flex-shrink: 0; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ============================================================ FOOTER ============================================================ */ .footer { border-top: 1px solid var(--border); padding: 3.5rem var(--pad-x) 2rem; position: relative; z-index: 2; } .footer-grid { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2.5rem; } @media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; } } @media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } } .footer h4 { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin-bottom: .9rem; } .footer ul { list-style: none; display: flex; flex-direction: column; gap: .5rem; } .footer ul a { color: var(--text); font-size: .9rem; } .footer ul a:hover { color: var(--green); } .footer-bottom { max-width: var(--maxw); margin: 2.5rem auto 0; padding-top: 1.5rem; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: .76rem; color: var(--muted); } .footer-social { display: flex; gap: 1rem; } .footer-social a { color: var(--muted); display: flex; align-items: center; gap: .4rem; } .footer-social a:hover { color: var(--green); } .footer-social svg { width: 15px; height: 15px; } /* ============================================================ REVEAL — sin JS el contenido igual se ve ============================================================ */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity .65s ease, transform .65s ease; } .reveal.visible { opacity: 1; transform: none; } html:not(.js) .reveal { opacity: 1; transform: none; } /* ============================================================ ACCESIBILIDAD: movimiento reducido ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1 !important; transform: none !important; } .marquee-track { animation: none; } html.js-cursor body { cursor: auto; } html.js-cursor a, html.js-cursor button { cursor: pointer; } #cursor, #cursor-ring { display: none !important; } } /* ─── Utilidades ─── */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .text-center { text-align: center; } .mt-0 { margin-top: 0 !important; }