/* NorthClick · sitio. Lo que el sitio necesita encima del sistema de diseño (tokens → átomos → moléculas →
   organismos → patrones). Aquí solo van piezas de página y estilos que en las plantillas eran atributos style. */

html{background:var(--nc-fondo-superficie);scroll-padding-top:96px}
body{margin:0;min-height:100vh}
[hidden]{display:none !important}
img{max-width:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* Variantes por modo: solo se ve la del tema activo. */
[data-theme="dark"] .nc-solo-claro,
:root:not([data-theme="dark"]) .nc-solo-oscuro{display:none !important}

/* Saltar al contenido */
.nc-skip{position:absolute;left:16px;top:-80px;z-index:50;padding:10px 18px;background:var(--nc-color-frio-900);color:var(--nc-color-nieve);font:600 15px/1.3 "Figtree",sans-serif;border-radius:999px;text-decoration:none;transition:top var(--nc-t-foco)}
.nc-skip:focus{top:12px;outline:3px solid var(--nc-foco);outline-offset:3px}

/* Header: navegación, selector de tema y menú en un solo grupo a la derecha. */
.nc-header__home{display:block;flex:none;border-radius:8px}
.nc-header__tools{display:flex;align-items:center;gap:8px}
.nc-tema .nc-tema__sol{display:none}
[data-theme="dark"] .nc-tema .nc-tema__sol{display:block}
[data-theme="dark"] .nc-tema .nc-tema__luna{display:none}
@media (max-width:420px){.nc-header__logo{height:30px}}

/* Footer */
.nc-footer .nc-footer__h{margin:0 0 14px;font:600 12px/1.3 "Bricolage Grotesque",sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--nc-color-frio-300)}
.nc-footer__social{display:flex;gap:10px;margin-top:16px}
.nc-footer .nc-footer__icon{color:var(--nc-color-nieve);background:transparent;border-color:var(--nc-color-frio-300);box-shadow:none;text-decoration:none}
.nc-footer .nc-footer__icon:hover{background:var(--nc-color-frio-800)}
.nc-footer__legal a{font-size:12px;color:var(--nc-color-frio-200);text-decoration-color:currentColor}

/* Scallop del footer: toma el fondo de la sección de arriba en cada modo. */
.nc-scallop--sobre-cta{--above:var(--nc-color-ambar-100)}
.nc-scallop--sobre-sec{--above:var(--nc-color-nieve)}
.nc-scallop--sobre-alt{--above:var(--nc-color-frio-50)}
[data-theme="dark"] .nc-scallop--sobre-cta{--above:var(--nc-color-ambar-900)}
[data-theme="dark"] .nc-scallop--sobre-sec{--above:var(--nc-color-frio-800)}
[data-theme="dark"] .nc-scallop--sobre-alt{--above:var(--nc-color-frio-700)}

/* Inicio · tarjetas «Usuario y dueño» */
.nc-duo{height:100%;padding:32px}
.nc-duo h3{margin:18px 0 10px;font:700 32px/1.1 "Bricolage Grotesque",sans-serif;letter-spacing:-.015em}
.nc-duo p{margin:0;font:400 18px/1.55 "Figtree",sans-serif}

/* Títulos y líneas que en las plantillas iban en línea */
.nc-h-title{margin:0;font:700 32px/1.1 "Bricolage Grotesque",sans-serif;letter-spacing:-.015em}
.nc-lead-2{margin:14px 0 0;font:400 18px/1.55 "Figtree",sans-serif;color:var(--nc-texto-secundario)}
.nc-sec__head--flush{margin:0}
.nc-footnote{margin:16px 0 0;font:400 14px/1.5 "Figtree",sans-serif;color:var(--nc-texto-secundario)}

/* Trabajo */
.nc-work__badges{display:flex;flex-wrap:wrap;gap:8px}
.nc-work-grid{row-gap:40px}
.nc-work__invite-title{margin:8px 0 0;font:700 32px/1.1 "Bricolage Grotesque",sans-serif;letter-spacing:-.015em}
.nc-work__invite-text{margin:0;font:400 18px/1.55 "Figtree",sans-serif}
.nc-filtro{margin-bottom:40px}

/* Contacto */
.nc-hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.nc-check a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.nc-btn[aria-busy="true"]{opacity:.7;cursor:progress}
.nc-done-card{padding:40px}
.nc-done__text{margin:12px 0 24px;font:400 18px/1.55 "Figtree",sans-serif}
@media (max-width:639px){.nc-done-card{padding:28px}}

/* 404 */
.nc-hero__cta.nc-404__cta{justify-content:flex-start}

/* Textos legales: columna de lectura de 60 a 75 caracteres. */
.nc-legal{max-width:68ch;font:400 17px/1.65 "Figtree",sans-serif;color:var(--nc-texto-principal)}
.nc-legal h2{margin:48px 0 12px;font:700 24px/1.2 "Bricolage Grotesque",sans-serif;letter-spacing:-.01em}
.nc-legal h2:first-of-type{margin-top:32px}
.nc-legal p,.nc-legal ul{margin:0 0 14px}
.nc-legal ul{padding-left:22px}
.nc-legal li{margin-bottom:8px}
.nc-legal strong{font-weight:600}
.nc-legal a{color:inherit;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;text-decoration-color:var(--nc-color-plumon-600)}
.nc-legal__meta{font-size:15px;color:var(--nc-texto-secundario)}

/* La tabla se desplaza dentro de su marco; el caption oculto (.nc-sr) no debe escapar del recorte. */
.nc-table-wrap{position:relative;max-width:100%}

/* El logo cuadrado (sello circular) necesita más alto para leerse; la guía pide 110 px de ancho o más. */
.nc-work__logo.nc-work__logo--square{height:110px;max-width:110px}
.nc-work__patch:has(.nc-work__logo--square){bottom:-44px;padding:6px}
.nc-work__top:has(.nc-work__logo--square){margin-bottom:52px}

/* En celular la mascota de Contacto no empuja el formulario hacia abajo. */
@media (max-width:959px){.nc-contact2 .nc-mascot{width:140px}}

/* Contraste: en oscuro, el eyebrow Plumón 300 sobre Frío 700 da 3.4:1. Plumón 200 da 4.9:1 (pendiente de aprobar en el sistema). */
[data-theme="dark"] .nc-sec--alt .nc-eyebrow{color:var(--nc-color-plumon-200)}

/* ══ Materiales y motivos (guía, cap. 06) ════════════════════════════════════════════════════════
   Presupuesto por página: una escena (solo Inicio), un material por bloque y un motivo por pieza.
   Tramo → campamento: cada momento intenso va seguido de uno sobrio. */
:root{
  --nc-tex-papel:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .04 0 0 0 0 .1 0 0 0 0 .31 0 0 0 .11 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --nc-tex-tejido:repeating-linear-gradient(45deg,rgb(255 255 255 / .35) 0 2px,transparent 2px 7px),repeating-linear-gradient(-45deg,rgb(48 120 168 / .08) 0 2px,transparent 2px 7px);
}
[data-theme="dark"]{--nc-tex-tejido:repeating-linear-gradient(45deg,rgb(255 255 255 / .06) 0 2px,transparent 2px 7px),repeating-linear-gradient(-45deg,rgb(152 192 216 / .07) 0 2px,transparent 2px 7px)}

/* Papel (cálido): superficie, puede ir bajo texto (12.7:1). Cierre de página y tarjetas cálidas. */
.nc-mat-papel{background-image:var(--nc-tex-papel) !important}
/* Tejido (cálido sobre frío): superficie y fondo del bordado. Tarjetas de trabajo en frío. */
.nc-mat-tejido{background-image:var(--nc-tex-tejido) !important}

/* Curvas de nivel: fondo de la sección de proceso (la ruta). Se desvanecen bajo el encabezado. */
.nc-mat-curvas{position:relative;isolation:isolate}
.nc-mat-curvas::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:url("/assets/materiales/curvas-claro.svg?v=1852d72855") center/cover no-repeat;
  -webkit-mask-image:linear-gradient(165deg,transparent 0 24%,#000 62%);mask-image:linear-gradient(165deg,transparent 0 24%,#000 62%)}
[data-theme="dark"] .nc-mat-curvas::before{background-image:url("/assets/materiales/curvas-oscuro.svg?v=481d46aaad")}

/* Cristal: facetas en la cabecera de las páginas interiores, del lado derecho y desvanecidas hacia el texto. */
.nc-pagehead--cristal{position:relative;overflow:hidden;isolation:isolate}
.nc-cristal{position:absolute;top:0;right:0;z-index:-1;width:min(60%,860px);height:100%;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 55%);mask-image:linear-gradient(90deg,transparent,#000 55%)}
.nc-cristal polygon{stroke:#fff;stroke-width:1}
.nc-cristal__f0{fill:#EEF4F9}.nc-cristal__f1{fill:#DDEAF2}.nc-cristal__f2{fill:#BAD5E5}.nc-cristal__f3{fill:#98C0D8}.nc-cristal__f4{fill:#CFE0EE}
[data-theme="dark"] .nc-cristal polygon{stroke:#406694}
[data-theme="dark"] .nc-cristal__f0{fill:#173166}[data-theme="dark"] .nc-cristal__f1{fill:#25497D}[data-theme="dark"] .nc-cristal__f2{fill:#406694}[data-theme="dark"] .nc-cristal__f3{fill:#0B1A4F}[data-theme="dark"] .nc-cristal__f4{fill:#2F5A8C}
@media (prefers-reduced-motion:no-preference){.nc-cristal__f--brilla{animation:nc-destello 12s var(--nc-curva-entrada-salida) infinite}}
@keyframes nc-destello{0%,8%,100%{opacity:1}4%{opacity:.45}}
@media (max-width:639px){.nc-cristal{display:none}}

/* Constelación de la Osa Menor, con Polaris en Ámbar: estados vacíos y 404. */
.nc-osa{display:block;height:auto}
.nc-osa__trazo{fill:none;stroke:var(--nc-color-frio-300);stroke-width:1.5;stroke-dasharray:2 6;stroke-linecap:round}
.nc-osa__estrella{fill:var(--nc-color-frio-700)}
.nc-osa__halo{fill:var(--nc-color-ambar-500);opacity:.18}
.nc-osa__polaris{fill:var(--nc-color-ambar-500);stroke:var(--nc-color-frio-900);stroke-width:1.3;stroke-linejoin:round}
[data-theme="dark"] .nc-osa__estrella{fill:var(--nc-color-frio-200)}
[data-theme="dark"] .nc-osa__trazo{stroke:var(--nc-color-frio-600)}

/* Zipper: cierra el formulario. Al enviarse, el tirador recorre el cierre. */
.nc-form__cierre{margin-top:4px}
.nc-form__cierre .nc-zipper__pull{left:var(--at,14%);transition:left 650ms var(--nc-curva-salida)}
.nc-form.is-cerrado .nc-form__cierre{--at:calc(100% - 9px)}
@media (prefers-reduced-motion:reduce){.nc-form__cierre .nc-zipper__pull{transition:none}}

/* Nieve del hero: la capa de copos de la escena, con zona limpia alrededor del texto (los copos se
   desvanecen ahí). Se oculta al pausar y, con movimiento reducido, no hay copos. */
.nc-hero{position:relative}
.nc-hero__in{position:relative;z-index:1}
.nc-hero__nieve{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%;pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 480px 230px at 50% 270px,transparent 62%,#000 100%);mask-image:radial-gradient(ellipse 480px 230px at 50% 270px,transparent 62%,#000 100%)}
.nc-hero.is-pausado .nc-hero__nieve{display:none}
@media (max-width:639px){.nc-hero__nieve{-webkit-mask-image:radial-gradient(ellipse 260px 300px at 50% 270px,transparent 62%,#000 100%);mask-image:radial-gradient(ellipse 260px 300px at 50% 270px,transparent 62%,#000 100%)}}
@media (prefers-reduced-motion:reduce){.nc-hero__nieve{display:none}}

/* Inicio · íconos Norte en «Usuario y dueño» */
.nc-duo__top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.nc-norte{flex:none;color:var(--nc-color-frio-900)}
[data-theme="dark"] .nc-norte{color:var(--nc-color-frio-100)}

/* Inicio · proyecto destacado */
.nc-destacado{align-items:center}
.nc-destacado__btn{margin-top:28px}

/* Trabajo · cinta con el año y Osa Menor en la invitación */
.nc-work{position:relative}
.nc-work__cinta{position:absolute;top:-14px;left:22px;z-index:2}
.nc-work--invite{position:relative;overflow:hidden}
.nc-work__osa{position:absolute;right:32px;top:50%;width:min(240px,30%);transform:translateY(-50%);pointer-events:none}
@media (max-width:639px){.nc-work__osa{position:static;width:150px;transform:none;margin:-4px 0 4px}}

/* 404 · constelación sobre el número */
.nc-404__osa{width:170px;margin:0 0 -18px}

/* Capturas: proporción fija 16:10; se recorta, nunca se estira (guía, cap. 07). */
.nc-shot img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top}

/* Hero de Inicio: la escena Peaks (con su cielo extendido) es el fondo completo; el texto vive en el cielo. */
.nc-hero--escena{display:flex;flex-direction:column;min-height:clamp(620px,calc(100svh - 76px),900px);overflow:hidden}
.nc-hero--escena .nc-hero__top{background:none;position:relative;z-index:1}
.nc-hero__escena{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%}
@media (max-width:639px){.nc-hero--escena{min-height:max(720px,calc(100svh - 76px))}}

/* Gestos Subir (16 px con fundido, 380 ms) y Escalonar (70 ms entre hermanos). Solo con .nc-anim (tema.js). */
.nc-anim .nc-escalonar > *{opacity:0;transform:translateY(16px)}
.nc-anim .nc-escalonar.is-dentro > *{opacity:1;transform:none;transition:opacity var(--nc-t-entrada) var(--nc-curva-salida),transform var(--nc-t-entrada) var(--nc-curva-salida);transition-delay:calc(var(--i,0) * var(--nc-t-escalonado))}

/* Altitude: las etapas responden al toque; el mapa de curvas queda detrás de la ruta. */
.nc-ruta .nc-altitude__step{cursor:pointer}
.nc-work__logo{max-width:170px}
/* La unidad de metros va en minúscula: «4,800 m» (en mayúscula, «M» sería mega). */
.nc-altitude__m{text-transform:none}

/* Conjunto «Tu ___, en un espacio que es tuyo.»: la palabra que cambia lleva el subrayado de acento y
   entra con el gesto Subir. El alto se reserva para que el cambio no mueva la página. */
.nc-rot__vis{display:block;min-height:2.1em}
.nc-rot__w{text-decoration:underline;text-decoration-color:var(--nc-texto-acento);text-decoration-thickness:5px;text-underline-offset:6px;text-decoration-skip-ink:none}
.nc-rot__cambio{display:inline-block;animation:nc-rot-sube var(--nc-t-entrada) var(--nc-curva-salida)}
@keyframes nc-rot-sube{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.nc-rot__pila{display:none}
@media (max-width:379px){.nc-rot__vis{min-height:3.15em}}
@media (prefers-reduced-motion:reduce){
  .nc-rot__vis{display:none}
  .nc-rot__pila{display:grid;gap:.3em;font-size:.62em;line-height:1.12}
}

/* Botón de pausa del hero: esquina inferior derecha del bloque de texto, siempre sobre fondo sólido. */
.nc-hero__pausa{position:absolute;right:max(var(--gutter),calc((100% - var(--container)) / 2));bottom:24px;z-index:2}
.nc-hero__pausa .nc-hero__ic-play{display:none}
.nc-hero__pausa[aria-pressed="true"] .nc-hero__ic-play{display:block}
.nc-hero__pausa[aria-pressed="true"] .nc-hero__ic-pausa{display:none}
@media (prefers-reduced-motion:reduce){.nc-hero__pausa{display:none}}

/* Sombras pequeñas en modo claro: la xs del sistema (1×2 px) se funde con el borde de 2 px de
   casillas, campos y etiquetas. Se suben un paso; md y lg quedan como en el sistema. */
:root:not([data-theme="dark"]){--nc-sombra-xs:2px 3px 0 var(--nc-sombra);--nc-sombra-sm:3px 4px 0 var(--nc-sombra)}

/* Aviso de cookies (solo con píxel de Meta configurado): tarjeta E1 abajo, sin tapar la acción principal. */
.nc-solo-pixel{display:none}
.nc-con-pixel .nc-solo-pixel{display:inline}
.nc-cookies{position:fixed;left:16px;right:16px;bottom:16px;z-index:40;max-width:720px;margin:0 auto;padding:16px 20px;display:flex;gap:16px;align-items:center;flex-wrap:wrap;background:var(--nc-fondo-superficie)}
.nc-cookies__txt{flex:1 1 320px;margin:0;font:400 14px/1.5 "Figtree",sans-serif;color:var(--nc-texto-principal)}
.nc-cookies__txt a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.nc-cookies__acc{display:flex;gap:8px;flex-wrap:wrap}
.nc-form__nota{margin:0;font:400 14px/1.5 "Figtree",sans-serif;color:var(--nc-texto-secundario)}
.nc-form__nota a{color:inherit;text-decoration:underline;text-underline-offset:3px}