/* 400Needles · web del estudio (solo tema claro)
   Estructura de estudio clásica: cabecera con navegación, héroe con la firma animada y el lema,
   «Sobre nosotros», banda de contacto en negativo y pie completo.
   Retícula de 12 columnas, 1180 px de contenido como máximo (manual 9.3). Todas las secciones
   parten de la misma retícula: el texto de «Sobre nosotros» y la primera columna del pie empiezan
   en la columna 5; el correo de la banda y la columna de contacto del pie, en la 8. */
@font-face { font-family: 'Archivo'; src: url('/assets/fonts/archivo.woff2') format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: 'Martian Mono'; src: url('/assets/fonts/martian-mono.woff2') format('woff2'); font-weight: 100 800; font-stretch: 75% 112.5%; font-display: swap; }

:root {
  color-scheme: light;
  --borde: 1px solid var(--n4-arena);
  --margen: clamp(20px, 5vw, 48px);            /* margen lateral, mínimo 20 px */
  --col-gap: clamp(16px, 2.4vw, 32px);
  --cab: 76px;                                  /* alto de la cabecera */

  --texto-sec-osc: #B9AE98;
}
@media (max-width: 560px) { :root { --cab: 64px; } }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--cab) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--n4-papel); color: var(--n4-tinta); font: 420 17px/1.65 var(--n4-fuente); font-stretch: 100%; -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--n4-papel); }
main { flex: 1; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--n4-ocre); outline-offset: 3px; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 760; font-stretch: 118%; letter-spacing: -.025em; line-height: 1.02; text-wrap: balance; }
.wrap { width: 100%; max-width: calc(1180px + 2 * var(--margen)); margin: 0 auto; padding-left: max(var(--margen), env(safe-area-inset-left, 0px)); padding-right: max(var(--margen), env(safe-area-inset-right, 0px)); }
.etq { font: 420 12px/1.3 var(--n4-fuente-datos); font-stretch: 87%; text-transform: uppercase; letter-spacing: .1em; color: var(--n4-texto-sec); }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.saltar { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--n4-tinta); color: var(--n4-papel); padding: 12px 16px; font-weight: 620; }
.saltar:focus { top: calc(env(safe-area-inset-top, 0px) + 8px); }

/* ---------- botones y enlaces (manual 13.4) ----------
   Principal en ocre con texto blanco (5,4:1); secundario con borde de tinta. Al pasar el ratón
   suben 2 px con la curva de rebote, como la aguja seleccionada. El foco se dibuja por dentro
   porque el corte (clip-path) recortaría un contorno exterior. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 0 26px; font: 620 16px/1 var(--n4-fuente); text-decoration: none; border: 2px solid var(--n4-tinta); color: var(--n4-tinta); background: transparent; clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px); cursor: pointer;
  transition: background-color .16s var(--n4-salida), color .16s var(--n4-salida), border-color .16s var(--n4-salida), transform .35s var(--n4-rebote); }
.btn:hover { background: var(--n4-tinta); color: var(--n4-papel); transform: translateY(-2px); }
.btn:active { transform: none; transition-duration: .08s; }
.btn:focus-visible { outline: 2px solid currentColor; outline-offset: -7px; }
.btn--p { background: var(--n4-ocre); border-color: var(--n4-ocre); color: var(--n4-sobre-ocre); }
.btn--p:hover { background: var(--n4-tinta); border-color: var(--n4-tinta); color: var(--n4-papel); }
.btn .fl { font-family: var(--n4-fuente-datos); font-size: 15px; transition: transform .35s var(--n4-rebote); }
.btn:hover .fl { transform: translateY(2px); }
.mas { display: inline-flex; align-items: center; gap: 10px; font: 620 16px/1 var(--n4-fuente); text-decoration: none; padding-bottom: 6px; border-bottom: 2px solid var(--n4-tinta); }
.mas:hover { color: var(--n4-ocre); border-color: var(--n4-ocre); }
.mas .fl { font-family: var(--n4-fuente-datos); transition: transform .24s var(--n4-rebote); }
.mas:hover .fl { transform: translateX(4px); }

/* ---------- cabecera ---------- */
.cab { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: var(--n4-papel); border-bottom: var(--borde); }
.cab .wrap { display: flex; align-items: center; gap: 40px; height: var(--cab); }
.cab .n4-logo { width: 156px; flex: none; line-height: 0; }
.cab .n4-logo svg { width: 100%; height: auto; }
.cab nav { display: flex; align-items: center; gap: 32px; margin-left: auto; }
/* 44 px de alto táctil en todos los enlaces */
.cab nav a { font: 620 15px/1 var(--n4-fuente); text-decoration: none; padding: 14px 0; position: relative; white-space: nowrap; }
.cab nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 2px; background: var(--n4-ocre); transform: scaleX(0); transform-origin: 0 50%; transition: transform .24s var(--n4-salida); }
.cab nav a:hover::after, .cab nav a[aria-current="page"]::after { transform: none; }
.cab nav .idioma { font: 420 12px/1 var(--n4-fuente-datos); letter-spacing: .08em; border: 1px solid var(--n4-tinta); padding: 9px 10px; margin-left: -4px; transition: background-color .16s var(--n4-salida), color .16s var(--n4-salida); }
.cab nav .idioma::after { transform: none; background: none; inset: -7px -4px; height: auto; } /* amplía el área táctil sin cambiar la caja */
.cab nav .idioma:hover { background: var(--n4-tinta); color: var(--n4-papel); }
@media (max-width: 560px) { .cab .wrap { gap: 16px; } .cab .n4-logo { width: 128px; } .cab nav { gap: 20px; } .cab nav a { font-size: 14px; } }
@media (max-width: 480px) { .cab nav a:first-child { display: none; } } /* manual 13.2: en móvil, solo «Contacto» e idioma */

/* ---------- héroe claro con agujas de fondo ----------
   Jerarquía: la firma manda; la etiqueta y el lema le responden más pequeños, y los botones cierran.
   El conjunto cabe por encima del pliegue en 1440 × 900. */
.heroe { position: relative; overflow: hidden; background: var(--n4-papel); color: var(--n4-tinta); }
/* La máscara deja limpio un óvalo amplio alrededor del texto y funde arriba y abajo.
   El lienzo aparece cuando la firma termina su lectura (ver site.js). */
.heroe canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; opacity: 0; transition: opacity 1.6s var(--n4-salida);
  -webkit-mask-image: radial-gradient(ellipse clamp(320px, 50vw, 720px) 70% at 50% 50%, transparent 56%, #000 100%), linear-gradient(to bottom, transparent 0, #000 18%, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: radial-gradient(ellipse clamp(320px, 50vw, 720px) 70% at 50% 50%, transparent 56%, #000 100%), linear-gradient(to bottom, transparent 0, #000 18%, #000 78%, transparent 100%);
  mask-composite: intersect; }
.heroe canvas.on { opacity: 1; }
.heroe .wrap { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  min-height: clamp(560px, calc(100svh - var(--cab)), 920px); padding-block: clamp(56px, 9vh, 112px); }
.heroe .logo { width: clamp(232px, 20vw + 120px, 400px); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.heroe .logo svg { width: 100%; height: auto; overflow: visible; }
.heroe .logo .part.four path, .heroe .logo .part.b path, .heroe .logo .wm path { fill: var(--n4-tinta); }
.heroe .logo .part.a path, .heroe .logo .tmp rect { fill: var(--n4-ocre); }
.heroe .logo .part.x path[stroke] { stroke: var(--n4-tinta); }
.heroe .sub { font: 420 12px/1.3 var(--n4-fuente-datos); font-stretch: 87%; text-transform: uppercase; letter-spacing: .12em; color: var(--n4-texto-sec); margin-top: clamp(36px, 5vh, 52px); display: inline-flex; align-items: center; gap: 16px; }
.heroe .sub::before, .heroe .sub::after { content: ""; width: 32px; height: 1px; background: var(--n4-arena); flex: none; }
.heroe h1 { font-size: clamp(26px, 1.4vw + 20px, 42px); letter-spacing: -.025em; line-height: 1.08; margin-top: 16px; max-width: 22em; }
.heroe .acc { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(32px, 4.4vh, 44px); }
.heroe .acc .btn { min-width: 176px; white-space: nowrap; }
@media (max-width: 420px) { .heroe .acc { flex-direction: column; max-width: 320px; } .heroe .acc .btn { flex: none; width: 100%; } }
@media (max-width: 560px) {
  .heroe .wrap { min-height: clamp(520px, calc(100svh - var(--cab)), 760px); }
  .heroe .acc { width: 100%; max-width: 400px; }
  .heroe .acc .btn { flex: 1 1 0; min-width: 0; padding: 0 16px; }
  .heroe .sub { letter-spacing: .08em; font-size: 11px; }
  .heroe .sub::before, .heroe .sub::after { display: none; }
}

/* ---------- secciones ---------- */
.sec { padding-block: clamp(72px, 9vw, 128px); border-top: var(--borde); }
.sec--sobre { border-top: 0; padding-top: clamp(40px, 5vw, 72px); }
.dos { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 28px; }
.dos > :first-child { grid-column: 1 / 5; }
.dos > :last-child { grid-column: 5 / 12; }
@media (max-width: 860px) { .dos > :first-child, .dos > :last-child { grid-column: 1 / -1; } }
.dos h2 { font-size: clamp(32px, 3.6vw, 48px); }
.dos .etq { display: block; margin-bottom: 18px; }
.texto { display: grid; gap: 1em; font-size: clamp(18px, .6vw + 14px, 22px); line-height: 1.55; max-width: 34em; }
.texto p:first-child { font-weight: 560; }
.texto .mas { justify-self: start; margin-top: 16px; font-size: 16px; }

/* ---------- banda de contacto ---------- */
.banda { background: var(--n4-tinta); color: var(--n4-papel); }
.banda :focus-visible { outline-color: var(--n4-ocre); }
.banda .wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 32px; align-items: end; padding-block: clamp(72px, 9vw, 120px) clamp(40px, 5vw, 64px); }
.banda .wrap > div { grid-column: 1 / 8; }
.banda .correo { grid-column: 8 / 13; }
@media (max-width: 860px) { .banda .wrap > div, .banda .correo { grid-column: 1 / -1; } }
.banda h2 { font-size: clamp(34px, 4.4vw, 60px); }
.banda p { color: var(--texto-sec-osc); margin-top: 20px; font-size: clamp(17px, .4vw + 15px, 19px); }
.banda .correo { justify-self: start; font: 620 clamp(20px, 2.2vw, 28px)/1.2 var(--n4-fuente); font-stretch: 112%; color: var(--n4-papel); text-decoration: none; border-bottom: 2px solid var(--n4-ocre); padding-block: 10px 6px; overflow-wrap: anywhere; transition: color .16s var(--n4-salida); }
.banda .correo:hover { border-color: var(--n4-papel); }

/* ---------- agujas bajo la banda de contacto ----------
   La banda es la tarjeta; su borde inferior, la línea de lectura. Las agujas en reposo la atraviesan
   (papel dentro, tinta fuera) y las seleccionadas quedan dentro en ocre claro. 84 px; 60 px en móvil (manual 13.2). */
.agujas-banda { height: 56px; margin-top: -1px; background-repeat: repeat-x; background-position: center top; background-size: auto 56px; }
@media (max-width: 600px) { .agujas-banda { height: 42px; background-size: auto 42px; } }

/* ---------- cabecera de página ---------- */
.pag { padding-block: clamp(64px, 9vw, 120px) clamp(40px, 6vw, 72px); }
.pag h1 { font-size: clamp(48px, 7vw, 96px); letter-spacing: -.04em; }
.pag .sub { font-size: clamp(19px, 1.8vw, 23px); line-height: 1.5; color: var(--n4-texto-sec); margin-top: 24px; max-width: 32em; }
.figura { margin: 0; display: grid; gap: 14px; max-width: 340px; }
.figura svg { width: 100%; height: auto; }
.figura .part.a path { fill: var(--n4-ocre); }
.correos-sec { padding-bottom: clamp(72px, 10vw, 136px); }
.correos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); border-top: 2px solid var(--n4-tinta); }
@media (max-width: 700px) { .correos { grid-template-columns: minmax(0, 1fr); } }
.correos { column-gap: 0; }
.correos div { padding: 28px 24px 28px 0; display: grid; gap: 12px; border-bottom: var(--borde); }
.correos a { justify-self: start; font: 620 clamp(20px, 2.2vw, 28px)/1.2 var(--n4-fuente); font-stretch: 112%; text-decoration: none; overflow-wrap: anywhere; padding-block: 6px; transition: color .16s var(--n4-salida); }
.correos a:hover { color: var(--n4-ocre); }

/* ---------- pie ---------- */
.pie-sitio { padding-block: clamp(56px, 7vw, 88px) 28px; border-top: var(--borde); }
.pie-sitio--banda { border-top: 0; padding-top: clamp(40px, 5vw, 64px); }
.pie-sitio .wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px var(--col-gap);
  grid-template-areas: "m m m m n n n c c c l l" "b b b b b b b b b b b b"; }
.pie-sitio .marca { grid-area: m; }
.pie-sitio .col.nv { grid-area: n; }
.pie-sitio .col.ct { grid-area: c; }
.pie-sitio .col.lg { grid-area: l; }
.pie-sitio .base { grid-area: b; }
@media (max-width: 860px) {
  .pie-sitio .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "m m" "n l" "c c" "b b"; gap: 36px var(--col-gap); }
}
.pie-sitio .n4-logo { display: block; width: 150px; line-height: 0; }
.pie-sitio .n4-logo svg { width: 100%; height: auto; }
.pie-sitio .marca p { margin-top: 16px; color: var(--n4-texto-sec); font-size: 15px; }
.pie-sitio .col { display: grid; gap: 2px; align-content: start; justify-items: start; font-size: 15px; }
.pie-sitio .col .etq { margin-bottom: 8px; }
.pie-sitio .col a { text-decoration: none; padding-block: 5px; overflow-wrap: anywhere; transition: color .16s var(--n4-salida); }
.pie-sitio .col a:hover { color: var(--n4-ocre); }
@media (pointer: coarse) { .pie-sitio .col a { min-height: 44px; display: inline-flex; align-items: center; padding-block: 0; } .pie-sitio .col { gap: 0; } }
.pie-sitio .base { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding-top: 20px; border-top: var(--borde); }
.pie-sitio .base span, .pie-sitio .base a { font: 420 12px/1.3 var(--n4-fuente-datos); letter-spacing: .04em; color: var(--n4-texto-sec); text-decoration: none; }
.pie-sitio .base a { padding-block: 8px; }
.pie-sitio .base a:hover { color: var(--n4-ocre); }

/* ---------- legal y 404 ---------- */
.legal { padding-block: clamp(56px, 8vw, 104px); }
.legal .wrap > * { max-width: 760px; }
.legal h1 { font-size: clamp(36px, 5vw, 60px); margin-bottom: 32px; }
.legal h2 { font-size: clamp(20px, 1vw + 14px, 24px); font-weight: 680; font-stretch: 112%; letter-spacing: -.01em; line-height: 1.2; margin: 48px 0 14px; }
.legal p, .legal li { max-width: 68ch; margin-bottom: 12px; }
.legal ul { padding-left: 20px; margin: 0 0 12px; }
.legal a { color: var(--n4-ocre); text-underline-offset: 3px; }
.legal code { font: 420 14px var(--n4-fuente-datos); }
.legal mark { background: transparent; color: var(--n4-error); font-weight: 620; }
.e404 { padding-block: clamp(80px, 14vw, 180px); }
.e404 .wrap { display: grid; gap: 24px; justify-items: start; }
.e404 h1 { font-size: clamp(36px, 5.4vw, 72px); max-width: 13em; }
.e404 .btn { margin-top: 12px; }

/* ---------- cómo trabajamos (estudio) ---------- */
.como { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--n4-tinta); }
@media (max-width: 860px) { .como { grid-template-columns: minmax(0, 1fr); } }
.como div { padding: 28px 28px 32px 0; display: grid; gap: 12px; align-content: start; border-bottom: var(--borde); }
.como h3 { font-size: 24px; font-weight: 680; font-stretch: 112%; letter-spacing: -.01em; }
.como p { color: var(--n4-texto-sec); }

/* ---------- movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  .btn, .btn .fl, .mas .fl, .cab nav a::after, .heroe canvas { transition: none; }
  .btn:hover, .btn:hover .fl { transform: none; }
}