/* ========================================================================== NCLS 2.0 — hoja de estilos Traducción a CSS real del canvas de diseño (index.dc.html). Los tokens de abajo son los valores exactos del diseño; para reajustar la marca se cambian acá y no en cuarenta lugares distintos. ========================================================================== */ :root { --bg: #060606; --ink: #ffffff; --orange: #ff6b1a; --orange-lit: #ff8a3d; --orange-deep: #f2650a; --grad-orange: linear-gradient(180deg, #ff8a3d 0%, #f2650a 100%); --line: rgba(255, 255, 255, 0.08); --line-soft: rgba(255, 255, 255, 0.12); --surface: rgba(255, 255, 255, 0.04); --surface-lit: linear-gradient(180deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.015) 100%); --dim: rgba(255, 255, 255, 0.5); --dimmer: rgba(255, 255, 255, 0.4); --dim-soft: rgba(255, 255, 255, 0.62); --sans: 'Space Grotesk', Helvetica, 'Helvetica Neue', Arial, sans-serif; --display: Helvetica, 'Helvetica Neue', Arial, sans-serif; --mono: 'Space Mono', ui-monospace, monospace; --shell: 1280px; --pad: clamp(16px, 4vw, 24px); } *, *::before, *::after { box-sizing: border-box; } /* El atributo hidden se aplica con display:none desde la hoja del navegador, que pierde contra cualquier regla de clase que declare un display propio (.reels, .filters, .test...). Esta regla lo zanja de una vez para todo el sitio: si un elemento tiene hidden, no se ve, sin importar qué diga su clase. */ [hidden] { display: none !important; } /* ------------------------------------------------- aparición al hacer scroll El estado oculto cuelga de .js, que un script inline en el pone antes de pintar. Así, sin JavaScript, todo se ve de entrada en vez de quedar en blanco para siempre. Va como animación y no como transición a propósito: una transición dejaría `transform: none` puesto en el estado final, y con más peso que los :hover de las tarjetas — les mataría el efecto de levantarse. Con `backwards` el elemento usa el fotograma inicial durante el retraso y, al terminar, vuelve a sus estilos normales sin dejar nada pegado. */ .js [data-reveal]:not(.is-in) { opacity: 0; } .js [data-reveal].is-in { animation: ncls-reveal 0.75s cubic-bezier(0.16, 1, 0.3, 1) var(--rd, 0ms) backwards; } @keyframes ncls-reveal { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .js [data-reveal]:not(.is-in) { opacity: 1; } .js [data-reveal].is-in { animation: none; } } /* ----------------------------------------------------------- cursor naranja Sólo se activa con puntero fino y sin reduced-motion; el JS añade .has-cursor recién cuando los elementos existen, así que si algo falla el cursor del sistema nunca desaparece. */ .cursor-dot, .cursor-trail { position: fixed; top: 0; left: 0; border-radius: 50%; pointer-events: none; z-index: 90; will-change: transform; } .cursor-dot { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; background: var(--orange); box-shadow: 0 0 14px rgba(255, 107, 26, 0.95); transition: width 0.22s ease, height 0.22s ease, margin 0.22s ease, opacity 0.22s ease; } /* Sobre algo clicable el punto se abre en anillo */ .cursor-dot.is-hot { width: 34px; height: 34px; margin: -17px 0 0 -17px; background: rgba(255, 107, 26, 0.14); box-shadow: 0 0 0 1px rgba(255, 107, 26, 0.7), 0 0 26px rgba(255, 107, 26, 0.45); } .cursor-trail { background: var(--orange); filter: blur(2px); } .has-cursor, .has-cursor * { cursor: none !important; } /* En los campos de texto vuelve el cursor del sistema: ahí el signo de intercalación importa más que el efecto. */ .has-cursor input, .has-cursor textarea { cursor: text !important; } .has-cursor select { cursor: pointer !important; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); overflow-x: hidden; -webkit-font-smoothing: antialiased; } a { color: var(--orange); text-decoration: none; } a:hover { color: var(--orange-lit); } ::selection { background: var(--orange); color: var(--bg); } img, video { max-width: 100%; } input, textarea, select { outline: none; } input::placeholder, textarea::placeholder { color: rgba(255, 255, 255, 0.28); } :where(a, button, input, textarea, select):focus-visible { outline: 2px solid var(--orange-lit); outline-offset: 3px; border-radius: 6px; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 14px 22px; background: var(--orange); color: #fff; font-weight: 600; } .skip-link:focus { left: 12px; top: 12px; } .shell { max-width: var(--shell); margin: 0 auto; } .section { padding: 20px var(--pad) 110px; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* --------------------------------------------------------------- tipografía */ .kicker { display: inline-flex; padding: 9px 20px; border-radius: 10px; border: 1px solid rgba(255, 107, 26, 0.45); background: rgba(255, 107, 26, 0.1); color: var(--orange-lit); font-size: 14px; font-weight: 500; } .kicker-mono { display: inline-flex; padding: 9px 20px; border-radius: 999px; border: 1px solid rgba(255, 107, 26, 0.4); color: var(--orange-lit); font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; } .mono { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; color: var(--dimmer); } h1, h2, h3 { font-family: var(--display); margin: 0; letter-spacing: -0.035em; font-weight: 700; } h2 { font-size: clamp(32px, 4.6vw, 58px); } h3 { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; } .hl { color: var(--orange); } .section-head { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; margin-bottom: 52px; } .section-head p { margin: 0; max-width: 58ch; font-size: 18px; line-height: 1.6; color: var(--dim); text-wrap: pretty; } /* ------------------------------------------------------------------ botones */ .btn { font-family: var(--display); display: inline-flex; align-items: center; gap: 18px; min-height: 62px; padding: 0 10px 0 32px; border-radius: 12px; font-size: 17px; font-weight: 500; cursor: pointer; border: 1px solid transparent; transition: box-shadow 0.3s ease, border-color 0.3s ease; } .btn-primary { background: var(--grad-orange); color: #fff; border: none; box-shadow: 0 0 40px rgba(255, 107, 26, 0.5); } .btn-primary:hover { box-shadow: 0 0 60px rgba(255, 107, 26, 0.85); color: #fff; } .btn-ghost { border-color: var(--line-soft); background: var(--surface); color: #fff; } .btn-ghost:hover { border-color: rgba(255, 107, 26, 0.6); color: #fff; } /* El chevron va en una cápsula propia, como en el diseño */ .btn .cap { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 10px; font-size: 17px; } .btn-primary .cap { background: #fff; color: var(--orange-deep); } .btn-ghost .cap { background: rgba(255, 255, 255, 0.12); color: #fff; } .btn-solid { font-family: var(--display); display: inline-flex; align-items: center; min-height: 56px; padding: 0 32px; border-radius: 10px; border: none; background: var(--grad-orange); color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; box-shadow: 0 0 34px rgba(255, 107, 26, 0.45); transition: box-shadow 0.3s ease; } .btn-solid:hover { box-shadow: 0 0 50px rgba(255, 107, 26, 0.8); color: #fff; } .btn-solid[disabled] { opacity: 0.55; cursor: progress; } .btn-quote { font-family: var(--display); margin-top: 8px; display: inline-flex; align-items: center; gap: 14px; align-self: flex-start; min-height: 50px; padding: 0 10px 0 24px; border-radius: 12px; border: 1px solid var(--line-soft); background: var(--surface); color: #fff; font-size: 15px; font-weight: 500; cursor: pointer; transition: border-color 0.3s ease; } .btn-quote:hover { border-color: rgba(255, 107, 26, 0.7); color: #fff; } .btn-quote .cap { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 15px; } .svc-card.is-featured .btn-quote { border-color: rgba(255, 107, 26, 0.5); background: rgba(255, 107, 26, 0.12); } .btn-more { font-family: var(--display); display: inline-flex; align-items: center; gap: 14px; min-height: 56px; padding: 0 12px 0 30px; border-radius: 12px; border: 1px solid var(--line-soft); background: var(--surface); color: #fff; font-size: 16px; font-weight: 500; cursor: pointer; transition: border-color 0.3s ease; } .btn-more:hover { border-color: rgba(255, 107, 26, 0.6); color: #fff; } .btn-more .cap { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 16px; } .btn-link { font-family: var(--display); appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 12px; padding: 0; border: none; background: transparent; color: #fff; font-size: 16px; font-weight: 500; transition: color 0.25s ease; } .btn-link:hover { color: var(--orange-lit); } .btn-link .arw { color: var(--orange); } /* --------------------------------------------------------------------- nav */ .nav-wrap { position: sticky; top: 18px; z-index: 40; display: flex; justify-content: center; padding: 0 20px; margin-bottom: -74px; } .nav { display: flex; flex-wrap: wrap; justify-content: center; max-width: 100%; align-items: center; gap: 16px 24px; padding: 12px 12px 12px 30px; border-radius: 999px; background: rgba(18, 18, 18, 0.88); border: 1px solid var(--line); backdrop-filter: blur(16px); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6); } .nav-logo { display: flex; align-items: center; } .nav-logo img { height: 20px; width: auto; display: block; object-fit: contain; } /* En escritorio el contenedor desaparece y sus hijos se acomodan solos dentro del pill; en móvil (más abajo) se convierte en el panel desplegable. */ .nav-menu { display: contents; } .nav-toggle { display: none; appearance: none; cursor: pointer; padding: 0; width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.14); background: var(--surface); flex-direction: column; align-items: center; justify-content: center; gap: 5px; } .nav-toggle span { display: block; width: 18px; height: 1.5px; border-radius: 2px; background: #fff; transition: transform 0.28s ease, opacity 0.2s ease; } .nav-toggle[aria-expanded="true"] { border-color: rgba(255, 107, 26, 0.6); } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } .nav-links { display: flex; flex-wrap: wrap; justify-content: center; min-width: 0; align-items: center; gap: 10px 20px; font-size: 15px; color: var(--dim-soft); } .nav-links a { color: inherit; } .nav-links a:hover, .nav-links a[aria-current="true"] { color: #fff; } .lang-btn { display: inline-flex; align-items: center; justify-content: center; appearance: none; cursor: pointer; padding: 9px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.14); background: var(--surface); transition: border-color 0.25s ease, background 0.25s ease; } .lang-btn:hover { border-color: rgba(255, 107, 26, 0.6); background: rgba(255, 255, 255, 0.07); } .lang-btn .flag { display: inline-flex; } /* Banderas en SVG: los emoji de bandera no tienen glifo en Windows y salen dibujados como las dos letras del país, que es justo lo que no queremos. */ .lang-btn .flag svg { display: block; width: 24px; height: 16px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18); } .nav-cta { font-family: var(--display); display: inline-flex; align-items: center; min-height: 46px; padding: 0 26px; border-radius: 999px; background: var(--grad-orange); color: #fff; font-size: 15px; font-weight: 600; box-shadow: 0 0 28px rgba(255, 107, 26, 0.45); transition: box-shadow 0.3s ease; } .nav-cta:hover { box-shadow: 0 0 42px rgba(255, 107, 26, 0.75); color: #fff; } /* -------------------------------------------------------------------- hero */ .hero { position: relative; padding: 150px var(--pad) 60px; text-align: center; background: radial-gradient(80% 60% at 50% 0%, rgba(255, 107, 26, 0.14) 0%, rgba(6, 6, 6, 0) 70%); } .hero-inner { max-width: 1120px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 26px; } .hero-badge { display: inline-flex; align-items: center; gap: 12px; padding: 12px 26px; border-radius: 999px; border: 1px solid var(--line-soft); background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.92); font-size: 17px; font-weight: 500; } .hero-badge .dot { width: 10px; height: 10px; border-radius: 999px; background: var(--orange); box-shadow: 0 0 12px rgba(255, 107, 26, 0.9); } .hero h1 { font-size: clamp(42px, 6.4vw, 86px); line-height: 1.02; max-width: 20ch; } .hero-sub { margin: 0; max-width: 62ch; font-size: 19px; line-height: 1.6; color: rgba(255, 255, 255, 0.58); text-wrap: pretty; } .hero-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 6px; } /* Abanico de cinco tarjetas en perspectiva */ .fan { max-width: var(--shell); margin: 74px auto 0; perspective: 1600px; } .fan-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; transform-style: preserve-3d; } .fan-col { flex: 0 0 clamp(150px, 17.5vw, 262px); margin: 0 -18px; display: flex; flex-direction: column; align-items: center; gap: 22px; } .fan-slot { position: relative; width: 100%; height: clamp(280px, 31vw, 420px); } .fan-card { position: absolute; left: 0; right: 0; aspect-ratio: 0.74; border-radius: 16px; overflow: hidden; border: 1px solid var(--line-soft); box-shadow: 0 34px 70px rgba(0, 0, 0, 0.72); transition: transform 0.4s ease; } .fan-card img { width: 100%; height: 100%; object-fit: cover; display: block; } .fan-card:hover { transform: perspective(1200px) scale(1.12) !important; z-index: 6; border-color: rgba(255, 107, 26, 0.85); box-shadow: 0 0 0 1px rgba(255, 107, 26, 0.6), 0 0 44px rgba(255, 107, 26, 0.55), 0 34px 70px rgba(0, 0, 0, 0.72); } /* Cada columna trae su rotación y offset propios — de ahí el abanico */ .fan-col:nth-child(1) .fan-card { top: 56px; transform: perspective(1200px) rotateY(26deg) rotate(-3deg) scale(0.9); } .fan-col:nth-child(2) .fan-card { top: 22px; transform: perspective(1200px) rotateY(15deg) rotate(-2deg) scale(0.96); } .fan-col:nth-child(3) .fan-card { top: 0; transform: perspective(1200px) scale(1.04); } .fan-col:nth-child(4) .fan-card { top: 22px; transform: perspective(1200px) rotateY(-15deg) rotate(2deg) scale(0.96); } .fan-col:nth-child(5) .fan-card { top: 56px; transform: perspective(1200px) rotateY(-26deg) rotate(3deg) scale(0.9); } /* Recortes finos que traía cada foto del diseño */ .fan-card img.z-c { transform: scale(1.22); transform-origin: center; } .fan-card img.z-top { object-position: top; } .fan-card img.z-a { transform: scale(1.3); transform-origin: center; } .fan-card img.z-b { object-position: 58% 72%; transform: scale(1.28); transform-origin: 58% 72%; } .fan-cap { display: flex; flex-direction: column; align-items: center; gap: 7px; } .fan-num { font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; color: var(--orange); } .fan-label { font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.82); } /* ------------------------------------------------------------------- stats */ .stats { padding: 0 var(--pad); margin-top: 70px; } .stats-inner { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 34px; } .stats-head { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; } .stats-head .tag { font-family: var(--mono); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--dimmer); } .stats-head .line { font-size: 17px; color: var(--dim-soft); } .stats-grid { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; } .stat { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 34px 20px 30px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.07); background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.012) 100%); transition: border-color 0.3s ease, transform 0.3s ease; } .stat:hover { border-color: rgba(255, 107, 26, 0.4); transform: translateY(-3px); } .stat-value { font-family: var(--display); font-size: 34px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; } .stat-rule { width: 22px; height: 1px; background: rgba(255, 107, 26, 0.7); } .stat-label { font-size: 14px; letter-spacing: 0.02em; color: var(--dim); } /* ----------------------------------------------------------------- marquee */ .trusted { padding: 64px 0 70px; overflow: hidden; } .trusted-title { margin: 0 0 26px; text-align: center; font-family: var(--mono); font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--dimmer); } .marquee { max-width: 720px; margin: 0 auto; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%); } .marquee-track { display: flex; width: max-content; gap: 50px; align-items: center; animation: ncls-marquee 42s linear infinite; opacity: 0.55; } .marquee-track img { flex: 0 0 130px; width: 130px; height: 30px; object-fit: contain; filter: brightness(0) invert(1); } @keyframes ncls-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } } /* ---------------------------------------------------------------- portfolio */ .tabs { display: flex; justify-content: center; margin-bottom: 22px; } .tabs-inner { display: flex; gap: 6px; padding: 6px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.1); background: var(--surface); } .tab { appearance: none; cursor: pointer; font-family: var(--display); font-size: 14px; font-weight: 500; padding: 11px 26px; border-radius: 999px; border: none; background: transparent; color: rgba(255, 255, 255, 0.55); transition: background 0.25s ease, color 0.25s ease; } .tab[aria-selected="true"] { background: rgba(255, 107, 26, 0.16); color: var(--orange-lit); } .filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 34px; } .filter { appearance: none; cursor: pointer; font-family: var(--display); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; padding: 10px 18px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.14); background: transparent; color: var(--dim-soft); transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease; } .filter[aria-pressed="true"] { border-color: var(--orange); background: rgba(255, 107, 26, 0.14); color: var(--orange-lit); } /* Masonry por columnas: mantiene la altura natural de cada foto */ .masonry { column-count: 4; column-gap: 12px; } @media (max-width: 1199px) { .masonry { column-count: 3; } } @media (max-width: 899px) { .masonry { column-count: 2; } } @media (max-width: 559px) { .masonry { column-count: 1; } } .shot { position: relative; display: block; width: 100%; margin: 0 0 12px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: #101010; break-inside: avoid; transition: border-color 0.3s ease, box-shadow 0.3s ease; } .shot:hover { border-color: rgba(255, 107, 26, 0.75); box-shadow: 0 0 0 1px rgba(255, 107, 26, 0.3), 0 0 34px rgba(255, 107, 26, 0.28); } .shot img { width: 100%; height: auto; display: block; } .shot.is-cropped img { aspect-ratio: var(--crop); object-fit: cover; object-position: top; } .reels { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 290px)); justify-content: center; gap: 16px; max-width: 1180px; margin: 0 auto; } .reel { margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: #101010; aspect-ratio: 0.5625; transition: border-color 0.3s ease, box-shadow 0.3s ease; } .reel:hover { border-color: rgba(255, 107, 26, 0.75); box-shadow: 0 0 0 1px rgba(255, 107, 26, 0.3), 0 0 34px rgba(255, 107, 26, 0.28); } .reel video { width: 100%; height: 100%; object-fit: cover; display: block; } .more-wrap { display: flex; justify-content: center; margin-top: 40px; } /* ------------------------------------------------------------------- about */ .about-grid { max-width: var(--shell); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 70px; align-items: center; } .about-photo { width: 100%; height: clamp(380px, 46vw, 620px); object-fit: cover; object-position: 50% 32%; border-radius: 14px; border: 1px solid var(--line); display: block; } .about-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; } .about-copy p { margin: 0; max-width: 50ch; font-size: 18px; line-height: 1.7; color: rgba(255, 255, 255, 0.58); text-wrap: pretty; } /* ---------------------------------------------------------------- servicios */ .svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr)); max-width: 1180px; margin: 0 auto; gap: 22px; } .svc-card { display: flex; flex-direction: column; overflow: hidden; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.07); background: var(--surface-lit); transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; } .svc-card.is-featured { border-color: rgba(255, 107, 26, 0.35); background: linear-gradient(160deg, rgba(255,107,26,0.1) 0%, rgba(255,255,255,0.02) 60%); } .svc-card:hover { border-color: rgba(255, 107, 26, 0.75); box-shadow: 0 0 0 1px rgba(255, 107, 26, 0.28), 0 0 44px rgba(255, 107, 26, 0.22); transform: translateY(-3px); } .svc-media { position: relative; height: clamp(240px, 24vw, 320px); } .svc-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .svc-icon { position: absolute; top: 16px; left: 16px; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line-soft); background: rgba(6, 6, 6, 0.55); backdrop-filter: blur(8px); } .svc-card.is-featured .svc-icon { border-color: rgba(255, 107, 26, 0.4); } .svc-tag { position: absolute; top: 16px; right: 16px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; color: rgba(255, 255, 255, 0.7); background: rgba(6, 6, 6, 0.55); backdrop-filter: blur(8px); padding: 8px 12px; border-radius: 10px; } .svc-body { display: flex; flex-direction: column; gap: 14px; padding: 28px 30px 30px; } .svc-body p { margin: 0; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, 0.55); text-wrap: pretty; } .svc-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 4px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.1); } .svc-meta div { display: flex; flex-direction: column; gap: 5px; } .svc-meta .v { font-family: var(--mono); font-size: 14px; color: #fff; } .svc-meta .k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.38); } /* ----------------------------------------------------------------- proceso */ .proc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 24px; align-items: start; } .proc-stage { position: relative; height: clamp(420px, 52vw, 680px); border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: #0c0c0c; } .proc-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity 0.5s ease; } .proc-stage img.is-on { opacity: 1; } .proc-caption { position: absolute; left: 22px; bottom: 22px; display: flex; flex-direction: column; gap: 6px; } .proc-caption span { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; } .proc-caption .l1 { color: rgba(255, 255, 255, 0.85); } .proc-caption .l2 { color: var(--orange); } .proc-caption .l2 em { font-style: normal; color: rgba(255, 255, 255, 0.45); } .proc-list { display: flex; flex-direction: column; gap: 12px; } .proc-item { appearance: none; text-align: left; width: 100%; cursor: pointer; font-family: var(--display); display: flex; flex-direction: column; gap: 0; padding: 22px 26px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.025); color: #fff; transition: border-color 0.3s ease, background 0.3s ease; } .proc-item[aria-expanded="true"] { border-color: rgba(255, 107, 26, 0.6); background: rgba(255, 107, 26, 0.05); } .proc-row { display: flex; align-items: center; gap: 20px; width: 100%; } .proc-num { font-family: var(--mono); font-size: 14px; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.45); transition: color 0.3s ease; } .proc-item[aria-expanded="true"] .proc-num { color: var(--orange); } .proc-ico { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.1); color: var(--dim-soft); transition: border-color 0.3s ease, color 0.3s ease; } .proc-item[aria-expanded="true"] .proc-ico { border-color: rgba(255, 107, 26, 0.5); color: var(--orange); } .proc-title { flex: 1; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; } .proc-sign { font-size: 20px; line-height: 1; color: var(--dim); transition: color 0.3s ease; } .proc-item[aria-expanded="true"] .proc-sign { color: var(--orange); } .proc-panel { display: flex; flex-direction: column; gap: 18px; padding: 18px 0 4px 78px; } .proc-item[aria-expanded="false"] .proc-panel { display: none; } .proc-panel .desc { font-size: 16px; line-height: 1.6; color: var(--dim-soft); } .proc-checks { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.1); margin: 0; list-style: none; } .proc-checks li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: rgba(255, 255, 255, 0.75); } .proc-checks li::before { content: '\2713'; color: var(--orange); font-size: 13px; } .proc-foot { display: flex; flex-direction: column; align-items: center; gap: 20px; margin-top: 54px; } .proc-foot .rule { width: min(560px, 100%); height: 1px; background: var(--line-soft); } .proc-foot .line { display: flex; align-items: center; gap: 12px; font-size: 16px; color: var(--dim-soft); } .proc-foot .line::before { content: '\2731'; color: var(--orange); } /* ------------------------------------------------------------ testimonios */ .test-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 18px; align-items: stretch; max-width: 1020px; margin: 0 auto; } .test { margin: 0; display: grid; grid-template-columns: minmax(140px, 0.6fr) 1.4fr; overflow: hidden; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.07); background: rgba(255, 255, 255, 0.02); transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; } .test:hover { border-color: rgba(255, 107, 26, 0.75); box-shadow: 0 0 0 1px rgba(255, 107, 26, 0.28), 0 0 44px rgba(255, 107, 26, 0.22); transform: translateY(-3px); } .test-who { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; text-align: center; padding: 22px 16px; } .test-who img { width: 66px; height: 66px; border-radius: 999px; object-fit: cover; display: block; } .test-name { font-family: var(--display); font-size: 15px; font-weight: 600; margin-top: 4px; } .test-role { font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, 0.42); } .test-body { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 22px 24px 26px; background: rgba(255, 255, 255, 0.028); } .test-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .test-stars { color: var(--orange); font-size: 12px; letter-spacing: 0.22em; } .test-quo { font-family: Georgia, serif; font-size: 30px; line-height: 0.7; color: rgba(255, 255, 255, 0.14); } .test blockquote { margin: 0; font-size: 14px; line-height: 1.65; color: rgba(255, 255, 255, 0.68); text-wrap: pretty; } .test-nav { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 42px; } .test-arrow { font-family: var(--display); appearance: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.1); background: var(--surface); color: #fff; font-size: 18px; transition: border-color 0.25s ease, color 0.25s ease; } .test-arrow:hover { border-color: rgba(255, 107, 26, 0.6); color: var(--orange-lit); } .test-dots { display: flex; align-items: center; gap: 8px; } .test-dot { width: 22px; height: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.22); border: none; padding: 0; cursor: pointer; transition: width 0.25s ease, background 0.25s ease; } .test-dot[aria-current="true"] { width: 34px; background: var(--orange); } /* ------------------------------------------------------------- producción */ .pr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 20px; align-items: stretch; margin-top: 18px; } .pr-card { position: relative; display: flex; flex-direction: column; gap: 22px; padding: 34px 32px 30px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.015); transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; } .pr-card:hover { border-color: rgba(255, 107, 26, 0.85); transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(255, 107, 26, 0.4), 0 0 52px rgba(255, 107, 26, 0.38); } .pr-card.is-featured { border-color: rgba(255, 107, 26, 0.85); background: rgba(255, 107, 26, 0.05); box-shadow: 0 0 0 1px rgba(255, 107, 26, 0.3), 0 0 60px rgba(255, 107, 26, 0.28); } .pr-badge { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; border-radius: 999px; background: var(--grad-orange); color: #fff; font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 0 26px rgba(255, 107, 26, 0.6); } .pr-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .pr-ico { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px; border: 1px solid rgba(255, 107, 26, 0.4); background: rgba(255, 107, 26, 0.08); color: var(--orange); } .pr-num { font-family: var(--mono); font-size: 13px; letter-spacing: 0.14em; color: var(--dimmer); } .pr-head { display: flex; flex-direction: column; gap: 8px; } .pr-head h3 { font-size: 25px; } .pr-head p { margin: 0; font-size: 16px; line-height: 1.55; color: rgba(255, 255, 255, 0.48); } .pr-price { display: flex; flex-direction: column; gap: 8px; padding-top: 22px; border-top: 1px solid var(--line); } .pr-price .lab { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 255, 255, 0.38); } .pr-price .val { font-family: var(--display); font-size: 30px; font-weight: 600; letter-spacing: -0.03em; color: var(--orange); } .pr-meta { margin: 0; font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, 0.35); } .pr-card .btn-link { margin-top: auto; align-self: flex-start; padding-top: 14px; } .pb-bar { margin-top: 46px; padding-top: 30px; border-top: 1px solid rgba(255, 255, 255, 0.09); display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 40px; } .pb-intro { display: flex; flex-direction: column; gap: 10px; max-width: 40ch; } .pb-intro .k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--orange); } .pb-intro h3 { font-size: 22px; } .pb-intro p { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.45); } .pb-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; } .pb-step { display: flex; align-items: baseline; gap: 8px; } .pb-step .n { font-family: var(--mono); font-size: 15px; letter-spacing: 0.1em; color: var(--orange); } .pb-step .t { font-family: var(--display); font-size: 14px; color: var(--dim-soft); } /* --------------------------------------------------------- project builder */ .builder { margin-top: 20px; padding: 34px clamp(24px, 3vw, 38px) 32px; border-radius: 16px; border: 1px solid rgba(255, 107, 26, 0.35); background: rgba(255, 107, 26, 0.03); } .builder-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; } .builder-top .k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--orange); } .builder-close { font-family: var(--display); appearance: none; cursor: pointer; border: none; background: transparent; color: rgba(255, 255, 255, 0.45); font-size: 14px; transition: color 0.25s ease; } .builder-close:hover { color: #fff; } .builder-progress { display: flex; gap: 6px; margin-bottom: 28px; } .builder-progress span { flex: 1; height: 2px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); transition: background 0.3s ease; } .builder-progress span.is-on { background: var(--orange); } .builder-type { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; } .builder-type .k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 255, 255, 0.42); } .chips { display: flex; flex-wrap: wrap; gap: 10px; } .chip { appearance: none; cursor: pointer; font-family: var(--display); font-size: 15px; padding: 13px 20px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.78); text-align: left; transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease; } .chip[aria-pressed="true"] { border-color: rgba(255, 107, 26, 0.6); background: rgba(255, 107, 26, 0.08); color: var(--orange-lit); } .builder h3 { margin: 0 0 8px; } .builder-hint { margin: 0 0 22px; font-size: 15px; color: rgba(255, 255, 255, 0.45); } .builder-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 28px; } .builder-back { font-family: var(--display); appearance: none; cursor: pointer; min-height: 52px; padding: 0 26px; border-radius: 12px; border: 1px solid var(--line-soft); background: rgba(255, 255, 255, 0.03); color: #fff; font-size: 15px; transition: border-color 0.25s ease; } .builder-back:hover { border-color: rgba(255, 107, 26, 0.6); } .builder-next { font-family: var(--display); appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 30px; border-radius: 12px; border: 1px solid rgba(255, 107, 26, 0.45); background: rgba(255, 107, 26, 0.1); color: #fff; font-size: 15px; font-weight: 500; transition: border-color 0.25s ease; } .builder-next:hover { border-color: var(--orange); } .builder-next .arw { color: var(--orange); } .builder-submit { font-family: var(--display); appearance: none; cursor: pointer; min-height: 52px; padding: 0 30px; border-radius: 12px; border: none; background: var(--grad-orange); color: #fff; font-size: 15px; font-weight: 600; } .builder-submit[disabled] { opacity: 0.55; cursor: progress; } .builder-fields { display: flex; flex-direction: column; gap: 16px; } .builder-fields .pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; } .builder-done { margin: 0; font-size: 15px; color: var(--dim); } .builder textarea { width: 100%; padding: 16px 18px; border: 1px solid var(--line-soft); border-radius: 12px; background: rgba(0, 0, 0, 0.35); font: inherit; font-size: 15px; color: #fff; resize: vertical; } .builder input[type="text"] { min-height: 52px; padding: 0 16px; border: 1px solid var(--line-soft); border-radius: 12px; background: rgba(0, 0, 0, 0.35); font: inherit; font-size: 15px; color: #fff; } .builder label { display: flex; flex-direction: column; gap: 9px; font-size: 15px; color: rgba(255, 255, 255, 0.7); } /* --------------------------------------------------------------------- FAQ */ .faq-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); } .faq-item { border-bottom: 1px solid var(--line); } .faq-q { appearance: none; cursor: pointer; width: 100%; text-align: left; display: flex; align-items: center; gap: 22px; padding: 26px 28px; border: none; border-radius: 14px; background: transparent; color: #fff; font-family: var(--display); transition: background 0.3s ease; } .faq-q:hover { background: var(--surface); } .faq-q[aria-expanded="true"] { background: rgba(255, 107, 26, 0.05); } .faq-num { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; color: rgba(255, 255, 255, 0.32); transition: color 0.3s ease; } .faq-q[aria-expanded="true"] .faq-num { color: var(--orange); } .faq-text { flex: 1; font-size: 18px; font-weight: 500; letter-spacing: -0.01em; } .faq-sign { font-size: 20px; line-height: 1; color: var(--dimmer); transition: color 0.3s ease; } .faq-q[aria-expanded="true"] .faq-sign { color: var(--orange); } .faq-a { margin: 0; padding: 0 40px 22px 106px; font-family: var(--sans); font-size: 16px; line-height: 1.7; color: rgba(255, 255, 255, 0.55); background: rgba(255, 107, 26, 0.05); animation: ncls-faq-in 0.35s ease both; } @keyframes ncls-faq-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } /* ---------------------------------------------------------------- contacto */ /* Formulario a la izquierda, sello de garantía a la derecha. */ .contact-form { display: flex; flex-direction: column; gap: 18px; padding: 36px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.07); background: var(--surface-lit); } /* Dos columnas fijas. Con auto-fit salían cuatro y el quinto campo quedaba estirado solo en la fila de abajo, que es lo que se veía raro. */ .field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .field-grid .span-2 { grid-column: 1 / -1; } .field { display: flex; flex-direction: column; gap: 9px; font-size: 15px; color: rgba(255, 255, 255, 0.75); } /* El label y su asterisco tienen que ser UN solo hijo flex, o el "*" se va a su propia línea debajo del texto. */ .field-label { display: inline-flex; align-items: baseline; gap: 5px; } .field input, .field select, .field textarea { border: 1px solid var(--line-soft); border-radius: 10px; background: rgba(0, 0, 0, 0.35); font: inherit; font-size: 15px; color: #fff; transition: border-color 0.25s ease; } .field input, .field select { min-height: 52px; padding: 0 16px; } .field select { padding: 0 14px; } .field textarea { padding: 14px 16px; resize: vertical; } .field input:focus, .field select:focus, .field textarea:focus { border-color: rgba(255, 107, 26, 0.6); } .field option { background: #101010; color: #fff; } .field .req { color: var(--orange); } .form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; } .form-mail { font-family: var(--display); font-size: 15px; color: var(--dim-soft); } .form-mail:hover { color: var(--orange-lit); } .form-status { margin: 0; font-size: 15px; min-height: 1.4em; } .form-status.is-ok { color: #4ade80; } .form-status.is-err { color: #f87171; } /* Honeypot: invisible para personas, irresistible para bots */ .hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; } /* ------------------------------------------------------------------ footer */ .footer { padding: 0 var(--pad) 44px; } .footer-grid { max-width: var(--shell); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 44px; padding-top: 48px; border-top: 1px solid rgba(255, 255, 255, 0.09); } .footer-brand { display: flex; flex-direction: column; gap: 14px; max-width: 32ch; } .footer-brand img { height: 24px; width: auto; align-self: flex-start; object-fit: contain; } .footer-brand p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--dim); } .footer-col { display: flex; flex-direction: column; gap: 12px; font-size: 15px; } .footer-col a { font-family: var(--display); color: rgba(255, 255, 255, 0.7); } .footer-col a:hover { color: #fff; } .footer-bot { max-width: var(--shell); margin: 32px auto 0; display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; font-size: 14px; color: rgba(255, 255, 255, 0.35); } .footer-bot a { color: inherit; font-family: var(--display); } .footer-bot a:hover { color: #fff; } .footer-bot .links { display: flex; gap: 20px; } /* -------------------------------------------------------------- responsive */ @media (max-width: 900px) { .hero { padding-top: 130px; } .about-grid { gap: 40px; } .svc-body { padding: 24px 22px 26px; } .proc-panel { padding-left: 0; } .contact-form { padding: 26px 20px; } .pr-card { padding: 30px 24px 26px; } .faq-a { padding-left: 28px; padding-right: 28px; } } @media (max-width: 720px) { /* Las cinco tarjetas no caben. Quedan las tres primeras — F&B, Nightlife y People, las categorías más fuertes — y se les reasignan las rotaciones simétricas (+15°, 0°, -15°) para que el abanico se vea igual que en escritorio, sólo que en chico. Para mostrar otras tres, cambia cuáles se ocultan acá abajo y corre las tres rotaciones al mismo orden. */ .fan { margin-top: 48px; } .fan-row { flex-wrap: nowrap; justify-content: center; counter-reset: fan; } .fan-col:nth-child(4), .fan-col:nth-child(5) { display: none; } .fan-col { flex: 0 0 clamp(100px, 30vw, 172px); margin: 0 -10px; gap: 14px; counter-increment: fan; } .fan-slot { height: clamp(172px, 48vw, 290px); } .fan-col:nth-child(1) .fan-card { top: 22px; transform: perspective(1200px) rotateY(15deg) rotate(-2deg) scale(0.96); } .fan-col:nth-child(2) .fan-card { top: 0; transform: perspective(1200px) scale(1.04); } .fan-col:nth-child(3) .fan-card { top: 22px; transform: perspective(1200px) rotateY(-15deg) rotate(2deg) scale(0.96); } /* Los ocultos no incrementan el contador, así que la numeración visible vuelve a leerse #01 #02 #03. */ .fan-num { font-size: 0; } .fan-num::before { content: "#0" counter(fan); font-size: 11px; letter-spacing: 0.18em; } .fan-label { font-size: 11px; letter-spacing: 0.04em; } .test { grid-template-columns: 1fr; } .test-who { flex-direction: row; justify-content: flex-start; gap: 14px; text-align: left; padding: 18px 20px 0; } .test-who img { width: 52px; height: 52px; } .test-name { margin-top: 0; } /* Menú: el pill guarda sólo logo y hamburguesa; el resto baja a un panel. */ .nav-wrap { top: 12px; padding: 0 12px; } .nav { position: relative; width: 100%; flex-wrap: nowrap; justify-content: space-between; gap: 12px; padding: 9px 9px 9px 20px; } .nav-toggle { display: flex; } .nav-menu { display: none; position: absolute; top: calc(100% + 10px); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 6px; padding: 12px; border-radius: 22px; background: rgba(18, 18, 18, 0.97); border: 1px solid var(--line); backdrop-filter: blur(16px); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6); } .nav-menu.is-open { display: flex; animation: ncls-menu-in 0.22s ease both; } .nav-links { flex-direction: column; align-items: stretch; width: 100%; gap: 2px; } .nav-links a { padding: 13px 14px; border-radius: 12px; font-size: 16px; color: rgba(255, 255, 255, 0.82); } .nav-links a:hover, .nav-links a[aria-current="true"] { background: var(--surface); color: #fff; } .lang-btn { justify-content: center; margin-top: 6px; min-height: 48px; } .nav-cta { justify-content: center; min-height: 50px; } .btn { min-height: 56px; padding-left: 24px; font-size: 16px; } .btn .cap { width: 42px; height: 42px; } .faq-q { padding: 22px 16px; gap: 14px; } .faq-text { font-size: 16px; } } @keyframes ncls-menu-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }