/* NorthClick · Paso 10 · Rejilla y patrones de página. Requiere atomos.css, moleculas.css y organismos.css. Sin dependencias. */
:root{--container:1200px;--gutter:24px;--col-gap:32px;--section-y:96px;--head-mb:48px}
@media (max-width:959px){:root{--col-gap:24px;--section-y:72px;--head-mb:40px}}
@media (max-width:639px){:root{--gutter:20px;--col-gap:16px;--section-y:56px;--head-mb:32px}}
/* Contenedor y rejilla: 4 columnas (<640), 8 (640–959), 12 (≥960) */
.nc-container{max-width:calc(var(--container) + 2 * var(--gutter));margin:0 auto;padding:0 var(--gutter)}
.nc-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--col-gap)}
@media (min-width:640px){.nc-cols{grid-template-columns:repeat(8,minmax(0,1fr))}}
@media (min-width:960px){.nc-cols{grid-template-columns:repeat(12,minmax(0,1fr))}}
.nc-cols>*{grid-column:1/-1}
@media (min-width:640px) and (max-width:959px){.nc-cols>.nc-c-3,.nc-cols>.nc-c-4,.nc-cols>.nc-c-6{grid-column:span 4}}
@media (min-width:960px){.nc-c-3{grid-column:span 3}.nc-c-4{grid-column:span 4}.nc-c-5{grid-column:span 5}.nc-c-6{grid-column:span 6}.nc-c-7{grid-column:span 7}.nc-c-8{grid-column:span 8}}
/* Ritmo vertical: sección = --section-y arriba y abajo; encabezado de sección = --head-mb */
.nc-sec{padding:var(--section-y) 0}.nc-sec--alt{background:var(--nc-color-frio-50)}[data-theme="dark"] .nc-sec--alt{background:var(--nc-color-frio-700)}
.nc-sec__head{max-width:640px;margin:0 0 var(--head-mb)}.nc-sec__head h2{margin:12px 0 0;font:700 40px/1.1 "Bricolage Grotesque",sans-serif;letter-spacing:-.02em}
.nc-sec__head p{margin:14px 0 0;font:400 18px/1.55 "Figtree",sans-serif;color:var(--nc-texto-secundario)}
@media (max-width:639px){.nc-sec__head h2{font-size:32px}}
/* Cabecera de página interior */
.nc-pagehead{background:linear-gradient(180deg,var(--nc-color-frio-50),var(--nc-color-frio-100));border-bottom:2px solid var(--nc-color-frio-900);color:var(--nc-color-frio-900)}
[data-theme="dark"] .nc-pagehead{background:var(--nc-color-frio-900);border-bottom-color:var(--nc-color-frio-300);color:var(--nc-color-nieve)}
.nc-pagehead__in{max-width:calc(var(--container) + 2 * var(--gutter));margin:0 auto;padding:72px var(--gutter) 64px}
.nc-pagehead h1{max-width:780px;margin:14px 0 0;font:700 56px/1.04 "Bricolage Grotesque",sans-serif;letter-spacing:-.025em;text-wrap:balance}
.nc-pagehead p{max-width:560px;margin:18px 0 0;font:400 20px/1.5 "Figtree",sans-serif}
@media (max-width:639px){.nc-pagehead__in{padding:48px var(--gutter) 40px}.nc-pagehead h1{font-size:36px}}
/* Pasos en fila (proceso) */
.nc-steps--row{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--col-gap);align-items:stretch}
.nc-steps--row .nc-step{flex-direction:column;gap:14px;padding:20px}
@media (max-width:959px){.nc-steps--row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:639px){.nc-steps--row{grid-template-columns:1fr}.nc-steps--row .nc-step{flex-direction:row}}
/* Llamado de cierre */
.nc-cta{background:var(--nc-color-ambar-100);color:var(--nc-color-frio-900)}
[data-theme="dark"] .nc-cta{background:var(--nc-color-ambar-900);color:var(--nc-color-nieve)}
.nc-cta__in{display:grid;grid-template-columns:1.3fr .7fr;gap:var(--col-gap);align-items:center;max-width:calc(var(--container) + 2 * var(--gutter));margin:0 auto;padding:72px var(--gutter) 0}
.nc-cta h2{margin:0;font:700 40px/1.1 "Bricolage Grotesque",sans-serif;letter-spacing:-.02em}
.nc-cta p{max-width:520px;margin:16px 0 28px;font:400 18px/1.55 "Figtree",sans-serif}
.nc-cta__copy{padding-bottom:72px}.nc-cta__art{align-self:end;display:flex;justify-content:center}.nc-cta .nc-mascot{margin-bottom:-1px}
@media (max-width:759px){.nc-cta__in{grid-template-columns:1fr;padding-top:56px}.nc-cta__copy{padding-bottom:32px}.nc-cta h2{font-size:32px}}
/* Captura de sitio (marco A: navegador mínimo) */
.nc-shot{display:block;overflow:hidden;background:var(--nc-color-nieve);border:2px solid var(--nc-color-frio-900);border-radius:12px;box-shadow:var(--nc-sombra-md)}
.nc-shot__bar{display:flex;gap:6px;align-items:center;height:28px;padding:0 12px;background:var(--nc-color-papel-100);border-bottom:2px solid var(--nc-color-frio-900)}
.nc-shot__bar i{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--nc-color-frio-900)}.nc-shot__bar i:nth-child(1){background:var(--nc-color-plumon-500,#E63A46)}.nc-shot__bar i:nth-child(2){background:var(--nc-color-ambar-500)}.nc-shot__bar i:nth-child(3){background:#2E8A5B}
.nc-shot img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
/* Tarjeta de trabajo (opción D aprobada): captura + logo cosido + desplegable «Ver detalles».
   Clic en la captura = «Visita el sitio» (enlace externo). En táctil el botón es visible siempre. */
.nc-work{display:flex;flex-direction:column;height:auto;padding:24px}
.nc-work__top{position:relative;margin-bottom:34px}
.nc-work__shot,.nc-card a.nc-work__shot{display:block;position:relative;border-radius:12px;color:inherit;text-decoration:none}
.nc-work__shot:focus-visible{outline:3px solid var(--nc-foco);outline-offset:3px}
.nc-work__over{position:absolute;inset:0;display:grid;place-items:center;border-radius:12px;background:rgb(11 26 79 / .58);opacity:0;transition:opacity 220ms var(--nc-curva-salida);pointer-events:none}
.nc-work__shot:hover .nc-work__over,.nc-work__shot:focus-visible .nc-work__over,.nc-work__shot.is-hover .nc-work__over{opacity:1}
.nc-work__visit{display:none}
@media (hover:none){.nc-work__shot{pointer-events:none}.nc-work__visit{display:inline-flex;height:44px}}
.nc-work.is-touch .nc-work__shot{pointer-events:none}.nc-work.is-touch .nc-work__visit{display:inline-flex}
@media (prefers-reduced-motion:reduce){.nc-work__over{transition:none}}
.nc-work__patch{position:absolute;left:18px;bottom:-30px;z-index:1;display:grid;place-items:center;padding:8px 16px;background:var(--nc-color-papel-100);border:2px solid var(--nc-color-frio-900);border-radius:10px;box-shadow:var(--nc-sombra-xs);transform:rotate(-2deg)}
.nc-work__logo{display:block;height:42px;width:auto;max-width:150px;object-fit:contain}
.nc-work details summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:flex-end;gap:10px;min-height:44px;margin-top:-6px;font:600 15px/1.3 "Figtree",sans-serif}
.nc-work details summary::-webkit-details-marker{display:none}
.nc-work details summary:focus-visible{outline:3px solid var(--nc-foco);outline-offset:3px;border-radius:999px}
.nc-work__ic{display:grid;place-items:center;width:34px;height:34px;background:transparent;border:2px solid currentColor;border-radius:50%;transition:transform 220ms var(--nc-curva-salida)}
.nc-work__ic .nc-icon{width:16px;height:16px}
.nc-work details[open] .nc-work__ic{transform:rotate(180deg)}
.nc-work__body{display:grid;justify-items:start;gap:12px;margin-top:14px;padding-top:14px;border-top:2px dashed color-mix(in srgb,currentColor 35%,transparent)}
.nc-work__body p{margin:0;font:400 16px/1.5 "Figtree",sans-serif}
.nc-work--invite{align-items:flex-start;justify-content:center;gap:14px;border-style:dashed;box-shadow:none;background:transparent}
.nc-work--invite h3,.nc-work--invite p{margin:0}
/* Contacto */
.nc-contact2{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:start}@media (max-width:959px){.nc-contact2{grid-template-columns:1fr;gap:40px}}
.nc-ways{display:grid;gap:14px;margin:28px 0 0}
/* 404 */
.nc-404{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--col-gap);align-items:center;max-width:calc(var(--container) + 2 * var(--gutter));margin:0 auto;padding:88px var(--gutter)}
.nc-404__num{font:800 112px/1 "Bricolage Grotesque",sans-serif;letter-spacing:-.04em;color:var(--nc-color-frio-300);font-variant-numeric:tabular-nums}
.nc-404 h1{margin:8px 0 0;font:700 56px/1.04 "Bricolage Grotesque",sans-serif;letter-spacing:-.025em}
.nc-404 p{margin:18px 0 0;font:400 20px/1.5 "Figtree",sans-serif}
.nc-404__art{display:flex;justify-content:center}
@media (max-width:759px){.nc-404{grid-template-columns:1fr;padding:48px var(--gutter)}.nc-404__num{font-size:72px}.nc-404 h1{font-size:36px}.nc-404__art{order:-1}}
/* Éxito de envío (F30) */
.nc-done{display:grid;grid-template-columns:1fr auto;gap:var(--col-gap);align-items:center}
@media (max-width:759px){.nc-done{grid-template-columns:1fr}}
/* Cálido en oscuro (E1/E2): el botón secundario no es azul; contorno y texto Nieve sobre el marrón */
[data-theme="dark"] .nc-card[data-tint="calido"].nc-card--e1 .nc-btn--secondary,[data-theme="dark"] .nc-card[data-tint="calido"].nc-card--e2 .nc-btn--secondary{background:transparent;color:var(--nc-color-nieve);border-color:var(--nc-color-nieve)}
/* Tabla comparativa (añadida en la prueba de fuego del Paso 11, en revisión). E1: trazo 2 px y sombra sm.
   Marcado: <div class="nc-table-wrap" role="region" aria-label="…" tabindex="0"><table class="nc-table"><caption class="nc-sr">…</caption>… */
.nc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nc-table-wrap{overflow-x:auto;background:var(--nc-fondo-superficie);border:var(--nc-trazo-normal) solid var(--nc-trazo);border-radius:12px;box-shadow:var(--nc-sombra-sm)}
.nc-table{width:100%;min-width:560px;border-collapse:collapse;font:400 16px/1.5 "Figtree",system-ui,sans-serif;color:var(--nc-texto-principal)}
.nc-table thead th{background:var(--nc-color-frio-900);color:var(--nc-color-nieve);font:600 14px/1.25 "Figtree",system-ui,sans-serif;text-align:center;padding:16px 20px}
.nc-table thead th:first-child{text-align:left}
.nc-table tbody th{font:600 16px/1.5 "Figtree",system-ui,sans-serif;text-align:left;padding:14px 20px}
.nc-table td{text-align:center;padding:14px 20px}
.nc-table tbody tr+tr th,.nc-table tbody tr+tr td{border-top:1px solid var(--nc-deshabilitado-trazo)}
.nc-table .is-hl{background:var(--nc-color-ambar-100)}
.nc-table thead .is-hl{background:var(--nc-color-ambar-500);color:var(--nc-color-frio-900)}
.nc-table td .nc-icon{width:20px;height:20px;color:var(--nc-color-verde-700)}
.nc-table .is-no{color:var(--nc-texto-secundario)}
[data-theme="dark"] .nc-table thead th{background:var(--nc-color-frio-900)}
[data-theme="dark"] .nc-table .is-hl{background:var(--nc-color-frio-700)}
[data-theme="dark"] .nc-table thead .is-hl{background:var(--nc-color-ambar-500);color:var(--nc-color-frio-900)}
[data-theme="dark"] .nc-table td .nc-icon{color:#85B899}
@media (max-width:639px){.nc-table tbody th{position:sticky;left:0;background:var(--nc-fondo-superficie)}}
[data-theme="dark"] .nc-shot{border-color:var(--nc-color-frio-300)}[data-theme="dark"] .nc-shot__bar{border-bottom-color:var(--nc-color-frio-300)}