/* ============================================================ Swell — del fondo a la superficie Paleta de marca: azul primario #435e9f · azul cielo #7f9cb4 · crema #f5f4f0 · dorado #f4bb56 ============================================================ */ @font-face { font-family: "Bricolage Grotesque"; src: url("fonts/Bricolage.ttf") format("truetype"); font-weight: 200 800; font-display: swap; } @font-face { font-family: "Instrument Sans"; src: url("fonts/InstrumentSans.ttf") format("truetype"); font-weight: 400 700; font-display: swap; } @font-face { font-family: "Instrument Sans"; src: url("fonts/InstrumentSans-Italic.ttf") format("truetype"); font-weight: 400 700; font-style: italic; font-display: swap; } @font-face { font-family: "Fragment Mono"; src: url("fonts/FragmentMono.ttf") format("truetype"); font-weight: 400; font-display: swap; } :root { --azul: #435e9f; --cielo: #7f9cb4; --crema: #f5f4f0; --dorado: #f4bb56; --abismo: #0b1426; /* azul primario llevado al fondo */ --tinta-oscura: #101d38; /* texto sobre fondos claros */ --ink: var(--crema); --ink-soft: rgba(245, 244, 240, 0.78); --accent: var(--dorado); --display: "Bricolage Grotesque", "Arial Black", sans-serif; --body: "Instrument Sans", system-ui, sans-serif; --mono: "Fragment Mono", ui-monospace, monospace; --wrap: 68rem; --pad: clamp(1.25rem, 4vw, 3rem); } /* La tinta cambia según la profundidad (la fija JS en ) */ body[data-ink="dark"] { --ink: var(--tinta-oscura); --ink-soft: rgba(16, 29, 56, 0.78); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--body); background: var(--abismo); /* respaldo si el shader no carga */ color: var(--ink); line-height: 1.6; overflow-x: hidden; } /* Fondo shader */ #sea { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; } /* Respaldo sin WebGL: gradiente de la misma columna de agua */ body.no-webgl { background: linear-gradient( to top, #0b1426 0%, #24365f 30%, #435e9f 55%, #7f9cb4 78%, #cfd9de 84%, #f5f4f0 88%, #f5f4f0 100% ); background-attachment: fixed; } body.no-webgl #sea { display: none; } /* ---------- utilidades ---------- */ .skip { position: absolute; left: 1rem; top: -4rem; z-index: 20; background: var(--dorado); color: var(--tinta-oscura); padding: 0.6rem 1rem; border-radius: 2px; font-weight: 600; text-decoration: none; transition: top 0.2s; } .skip:focus { top: 1rem; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } :focus-visible { outline: 3px solid var(--dorado); outline-offset: 3px; } ::selection { background: var(--dorado); color: var(--tinta-oscura); } /* ---------- cabecera ---------- */ .top { position: fixed; top: 0; left: 0; right: 0; z-index: 10; display: flex; justify-content: space-between; align-items: baseline; padding: 1.1rem var(--pad); color: var(--ink); transition: color 0.5s; mix-blend-mode: normal; } .wordmark { font-family: var(--display); font-weight: 700; font-size: 1.45rem; letter-spacing: -0.02em; color: inherit; text-decoration: none; } .wm-dot { color: var(--dorado); font-weight: 400; margin-left: 0.05em; } .top-cta { font-family: var(--mono); font-size: 0.85rem; color: inherit; text-decoration: none; border-bottom: 1px solid var(--dorado); padding-bottom: 0.15em; } .top-cta:hover { color: var(--dorado); } /* ---------- profundímetro ---------- */ .gauge { position: fixed; left: var(--pad); top: 50%; transform: translateY(-50%); z-index: 9; display: flex; align-items: center; gap: 0.9rem; color: var(--ink); transition: color 0.5s; } .gauge-line { width: 1px; height: 34vh; background: linear-gradient(to bottom, currentColor 0%, transparent 100%); opacity: 0.35; } .gauge-read { display: flex; flex-direction: column; gap: 0.15rem; } .gauge-depth { font-family: var(--mono); font-size: 0.95rem; font-variant-numeric: tabular-nums; white-space: nowrap; } .gauge-word { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.6; } /* ---------- secciones ---------- */ .s { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 6rem var(--pad); position: relative; } .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; } .wrap.narrow { max-width: 46rem; } .s { color: var(--crema); } .s[data-ink="dark"] { color: var(--tinta-oscura); } .eyebrow { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.65; margin-bottom: 1.6rem; } h1, h2 { font-family: var(--display); font-weight: 600; letter-spacing: -0.025em; line-height: 1.05; text-wrap: balance; margin-bottom: 1.8rem; } h1 { font-size: clamp(2.6rem, 7.2vw, 5.6rem); max-width: 16ch; } h2 { font-size: clamp(2rem, 5vw, 3.7rem); max-width: 18ch; } .s p { max-width: 34rem; } .s p + p { margin-top: 1rem; } .lead { font-size: clamp(1.05rem, 1.6vw, 1.3rem); } .lead.strong { font-weight: 600; } em { font-style: italic; } /* hero */ .s-hero .wrap { padding-top: 3rem; } .cue { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.14em; opacity: 0.7; white-space: nowrap; } .cue-arrow { display: inline-block; } @media (prefers-reduced-motion: no-preference) { .cue-arrow { animation: sink 2.2s ease-in-out infinite; } @keyframes sink { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(0.35em); } } } /* servicios */ .services { list-style: none; display: flex; flex-direction: column; } .service { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1.5rem; padding: 2.2rem 0; border-top: 1px solid currentColor; border-image: linear-gradient(to right, rgba(244,187,86,0.9), transparent 70%) 1; align-items: start; } .service:last-child { border-bottom: 1px solid currentColor; border-image: linear-gradient(to right, rgba(244,187,86,0.9), transparent 70%) 1; } .service-depth { font-family: var(--mono); font-size: 0.95rem; color: var(--dorado); padding-top: 0.45rem; } .service h3 { font-family: var(--display); font-weight: 600; font-size: clamp(1.35rem, 2.6vw, 2rem); letter-spacing: -0.02em; margin-bottom: 0.5rem; } .service p { max-width: 38rem; } .services-note { margin-top: 1.4rem; font-family: var(--mono); font-size: 0.8rem; opacity: 0.65; } /* clientes */ .clients { list-style: none; display: flex; flex-wrap: wrap; gap: 0.7rem 0.9rem; margin: 1rem 0 1.6rem; max-width: 52rem; } .clients li { font-family: var(--body); font-weight: 500; font-size: clamp(0.95rem, 1.4vw, 1.1rem); padding: 0.55rem 1rem; border: 1px solid currentColor; border-radius: 999px; opacity: 0.9; transition: background 0.25s, color 0.25s, border-color 0.25s; } .clients li:hover { background: var(--dorado); border-color: var(--dorado); color: var(--tinta-oscura); opacity: 1; } .clients-note { font-family: var(--mono); font-size: 0.85rem; opacity: 0.75; } /* superficie */ .s-surface { text-align: left; padding-bottom: 18vh; } .surface-title { font-size: clamp(2.8rem, 8vw, 6.5rem); max-width: none; } .swell-word { color: var(--azul); font-style: italic; } .cta { display: inline-block; margin-top: 2.2rem; font-family: var(--display); font-weight: 600; font-size: 1.25rem; color: var(--tinta-oscura); background: var(--dorado); text-decoration: none; padding: 1rem 2.4rem; border-radius: 999px; transition: transform 0.2s, box-shadow 0.2s; } .cta:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(244, 187, 86, 0.45); } .cta:active { transform: translateY(0); } .foot { margin-top: 5rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; font-family: var(--mono); font-size: 0.8rem; opacity: 0.7; } /* ---------- responsive ---------- */ @media (max-width: 760px) { .gauge { left: auto; right: 1rem; top: auto; bottom: 1.1rem; transform: none; } .gauge-line { display: none; } .gauge-read { align-items: flex-end; } .cue { left: var(--pad); transform: none; } .service { grid-template-columns: 1fr; gap: 0.4rem; } .service-depth { padding-top: 0; } .foot { flex-direction: column; } } /* agua abierta (solo escenario para la fauna procedural) */ .s-void { min-height: 100vh; min-height: 100svh; } /* enlaces de contacto */ .contact-links { margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: 1.6rem; font-family: var(--mono); font-size: 0.85rem; } .contact-links a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--dorado); padding-bottom: 0.15em; } .contact-links a:hover { color: var(--azul); } /* ---------- cartela de museo (clientes varados) ---------- */ .cartela { position: fixed; z-index: 8; transform: translate(-50%, -100%); background: var(--crema); color: var(--tinta-oscura); border: 1px solid rgba(16, 29, 56, 0.25); border-left: 3px solid var(--dorado); padding: 0.5rem 0.8rem 0.55rem; display: flex; flex-direction: column; gap: 0.12rem; pointer-events: none; opacity: 0; transition: opacity 0.22s; box-shadow: 0 6px 22px rgba(16, 29, 56, 0.14); max-width: 15rem; } .cartela.on { opacity: 1; } .cartela-n { font-family: var(--body); font-weight: 600; font-size: 0.86rem; line-height: 1.25; } .cartela-y { font-family: var(--mono); font-size: 0.72rem; opacity: 0.65; } /* hueco de arena extra en mobile para la playa de clientes */ @media (max-width: 760px) { .s-surface { padding-bottom: 30vh; } } /* pistas de agua abierta para la fauna (solo mobile) */ .s-gap { display: none; } @media (max-width: 760px) { .s-gap { display: block; min-height: 62svh; } .s-void { min-height: 135svh; } } /* ---------- selector de idioma ---------- */ .top-right { display: flex; align-items: center; gap: 1.6rem; } .lang { display: flex; align-items: center; gap: 0.55rem; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; } .lang-btn { appearance: none; background: none; border: none; padding: 0.15rem 0; font: inherit; letter-spacing: inherit; color: inherit; cursor: pointer; opacity: 0.55; border-bottom: 1px solid transparent; transition: opacity 0.2s, border-color 0.2s; } .lang-btn:hover { opacity: 0.9; } .lang-btn[aria-pressed="true"] { opacity: 1; border-bottom-color: var(--dorado); } .lang-sep { opacity: 0.35; } .lang-abbr { display: none; } @media (max-width: 760px) { .top-right { gap: 1rem; } .lang { gap: 0.45rem; font-size: 0.7rem; } .lang-full { display: none; } .lang-abbr { display: inline; } } /* ---------- «Han confiado en nosotros.» — ancla sobre la arena ---------- */ .beach-note { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.55; margin-top: 2.6rem; } @media (min-width: 761px) { .s-surface .wrap { position: relative; } .beach-note { position: absolute; right: 0; top: 11rem; margin: 0; text-align: right; } } /* la cartela ahora es un enlace */ a.cartela { text-decoration: none; cursor: pointer; } .cartela.on { pointer-events: auto; }