/* generado por renderer/render.py — pasada 8, NO editar a mano */
:root {
  --color-brand: oklch(0.52 0.16 265);
  --color-brand-dark: oklch(0.4 0.16 265);
  --color-surface: #FAFAF9;
  --color-surface-alt: #FFFFFF;
  --color-text: #1E1E1C;
  --color-text-muted: #57554F;
  --color-border: #E6E4E0;
  --color-accent: oklch(0.52 0.16 265);
  --font-heading: Helvetica, Arial, "Segoe UI", system-ui, sans-serif;
  --font-body: Helvetica, Arial, "Segoe UI", system-ui, sans-serif;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
  --space-6: 88px;
  --color-accent-tint: oklch(0.95 0.02 265);
}

/* ── foundation/foundation.css ── */
/* foundation — reglas base compartidas por los tres sistemas visuales.
   Pasada 8. Cierra el hallazgo más importante del renderer (pasada 7):
   ningún fragmento de components/ ni sections/ declaraba body{}, *{},
   a{color}, img{max-width} ni .btn-primary/.btn-secondary — confirmado en
   navegador, no solo por inspección de texto (ver reports/renderer-
   smoke-test.md §4.2). Sin esto, <body> caía en Times New Roman con fondo
   transparente y los botones no tenían color.

   El ensamblador de CSS del renderer (render.py → assemble_css) inyecta
   este archivo PRIMERO, antes de :root ya viene emitido y antes de
   cualquier fragmento de componente/sección/variante — así una regla más
   específica de un fragmento posterior siempre puede pisar una de aquí
   por orden de cascada, sin necesidad de !important ni de subir
   especificidad.

   Usa ÚNICAMENTE tokens ya declarados por el sistema visual activo
   (tokens/<sistema>.json). No introduce ningún valor de color nuevo. */

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-surface);
  line-height: 1.6;
}
/* line-height: modern-clean usaba 1.55 en su hoja original (los otros dos,
   1.6). Diferencia mínima, no se tokenizó en ninguna pasada anterior — se
   documenta en vez de introducir un --line-height nuevo para un solo caso. */

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--color-brand);
  text-decoration-color: currentColor;
}
a:hover {
  color: var(--color-brand-dark, var(--color-brand));
}

/* ── Botones ───────────────────────────────────────────────────────────
   .btn (geometría: padding, border-radius, display) ya vive en
   components/cta-band/component.css, cargado en toda página (cta-band es
   obligatorio en el arquetipo). Foundation SOLO aporta el color, que no
   existía en ningún fragmento.

   Los tres prototipos originales no comparten el mismo patrón semántico:
   warm-artisanal y modern-clean usan --color-brand como fondo del botón
   primario; editorial-premium lo invierte (fondo --color-text, y solo pasa
   a --color-brand en :hover). Foundation usa el patrón mayoritario
   (2 de 3 sistemas) de forma UNIFICADA para los tres — es una
   simplificación deliberada, documentada, no un intento de reproducir la
   paleta exacta de cada prototipo. Ver reports/library-visual-completeness-
   audit.md para el detalle visual por sistema. */
.btn-primary {
  background: var(--color-brand);
  color: var(--color-inverse-text, var(--color-elevated, #fff));
  border-color: var(--color-brand);
}
.btn-primary:hover {
  background: var(--color-brand-dark, var(--color-brand));
  border-color: var(--color-brand-dark, var(--color-brand));
}

.btn-secondary {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border, var(--color-text));
}
.btn-secondary:hover {
  border-color: var(--color-text);
  color: var(--color-text);
}

/* ── Foco visible ──────────────────────────────────────────────────────
   Base de respaldo: varios componentes (navigation, contact-form) ya
   declaran su propio :focus-visible más específico o con otro ancho de
   outline: esas reglas, al cargarse DESPUÉS de foundation, ganan por orden
   de cascada sin que haga falta tocar la especificidad aquí. Esta regla
   cubre cualquier enlace/control que no tenga una más específica. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ── Movimiento reducido ───────────────────────────────────────────────
   Antes de esta pasada solo warm-artisanal declaraba este bloque (junto
   con scroll-behavior:smooth, que sigue siendo suyo, no universal).
   Foundation lo extiende a los tres sistemas: es una mejora de
   accesibilidad pedida explícitamente por este encargo, no una corrección
   visual de las excluidas (contraste/h1/flex-wrap/dt/rel/formulario). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}


/* ── component/navigation ── */
/* navigation — base común más variantes ejecutables por sistema visual. */

.site-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap; /* común a los tres sistemas — resuelve RSP-01 (pasada 9).
                       Antes de la unificación de este archivo, modern-clean
                       no la declaraba y .header-inner desbordaba por debajo
                       de ~380px; ver manifest.json → resolved_warnings. */
}

.brand {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-text);
  text-decoration: none;
}

.nav ul {
  display: flex;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap; /* solo warm-artisanal lo declara — ver RSP-02 */
}

.nav a {
  text-decoration: none;
  color: var(--color-text-muted, var(--color-text));
  font-weight: 600;
}

.nav a[aria-current="page"] {
  /* Cada sistema resuelve el estado activo de forma distinta.
     warm-artisanal y editorial-premium usan un filete inferior (indicador
     no cromático); modern-clean solo cambia color y peso — ver A11Y-08. */
  border-bottom: 2px solid var(--color-accent);
}

a:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

/* ── Variantes ejecutables por sistema visual ─────────────────────────
   warm-artisanal    padding 16px/16px · brand serif 1.5rem · nav 600
                     hover del filete en --color-brand
                     apila el header en 640px (flex-direction: column)
   modern-clean      padding 14px/14px · brand sans 1.15rem · nav 500 0.95rem
                     activo por color + peso, sin filete
                     SIN flex-wrap en .header-inner ni en .nav ul
   editorial-premium padding 20px/20px · align-items: baseline
                     brand serif 1.7rem · nav uppercase 0.82rem tracking 0.1em
                     border-bottom del header de 2px sólidos
   ──────────────────────────────────────────────────────────────────── */

body[data-design-system="warm-artisanal"] .header-inner {
  padding: 16px var(--space-3);
}
body[data-design-system="warm-artisanal"] .brand {
  color: var(--color-ink-strong);
  font-size: 1.5rem;
}
body[data-design-system="warm-artisanal"] .nav a:hover {
  color: var(--color-brand);
}

body[data-design-system="modern-clean"] {
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body[data-design-system="modern-clean"] .header-inner {
  padding: 14px var(--space-3);
}
body[data-design-system="modern-clean"] .brand {
  font-size: 1.15rem;
}
body[data-design-system="modern-clean"] .nav a {
  font-size: 0.95rem;
  font-weight: 500;
}
body[data-design-system="modern-clean"] .nav a[aria-current="page"] {
  border-bottom: 0;
  color: var(--color-brand);
  font-weight: 700;
}

body[data-design-system="editorial-premium"] .container {
  max-width: 1240px;
}
body[data-design-system="editorial-premium"] .site-header {
  border-bottom-width: 2px;
}
body[data-design-system="editorial-premium"] .header-inner {
  align-items: baseline;
  padding: 20px var(--space-3);
}
body[data-design-system="editorial-premium"] .brand {
  font-size: 1.7rem;
}
body[data-design-system="editorial-premium"] .nav a {
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

@media (max-width: 640px) {
  body[data-design-system="warm-artisanal"] .header-inner {
    align-items: flex-start;
    flex-direction: column;
  }
}


/* ── section/hero ── */
/* hero — sección de apertura de la home. Única con <h1> de tipo titular. */

.hero { padding: var(--space-6) 0 var(--space-5); }

.hero-inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-5);
  align-items: center;
}

.hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  line-height: 1.1;
  margin: 0 0 var(--space-3);
}

.hero p {
  font-size: 1.15rem;
  max-width: 46ch;
  margin: 0 0 var(--space-4);
  color: var(--color-text-muted, var(--color-text));
}

.hero-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.hero-media { overflow: hidden; border-radius: var(--radius-lg); }
.hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; }
}

/* -- Variantes ejecutables por sistema visual -------------------------
   warm-artisanal    grid 1.1fr/0.9fr centrado. Fondo con GRADIENTE
                     (surface-alt -> surface), el unico de los tres.
                     h1 serif clamp 2.4-3.4rem. Media con radius-lg 28px,
                     borde blanco de 6px y --shadow-soft. max-width 46ch.
   modern-clean      grid 1fr/1fr centrado. Sin fondo propio.
                     h1 sans clamp 2.2-3.2rem, tracking -0.02em.
                     Media con radius-lg 16px sobre --color-accent-tint.
                     max-width 42ch. space-6 de 88px.
   editorial-premium grid 1.3fr/0.9fr con align-items: END (a la base).
                     h1 serif clamp 2.8-4.8rem, line-height 0.98.
                     Media SIN radio, aspect-ratio 3/4, align-self stretch,
                     margin-top space-4, fondo --color-surface-alt oscuro.
                     eyebrow en --color-brand (vino) en lugar de oro.
                     space-6 de 120px. Breakpoint en 960px, no en 900px.
                     RSP-03: h1 hasta 4.8rem en contenedor de 1240px.
                     RSP-05 resuelto: el medio se alinea al final y respeta la
                     columna aun cuando el copy largo aumenta la fila.
   -------------------------------------------------------------------- */

body[data-design-system="warm-artisanal"] .hero {
  background: linear-gradient(135deg, var(--color-surface-alt), var(--color-surface));
}
body[data-design-system="warm-artisanal"] .hero-inner {
  grid-template-columns: 1.1fr 0.9fr;
}
body[data-design-system="warm-artisanal"] .hero-media {
  aspect-ratio: 9 / 7;
  border: 6px solid var(--color-elevated);
  box-shadow: var(--shadow-soft);
}

body[data-design-system="modern-clean"] .hero-inner {
  grid-template-columns: 1fr 1fr;
}
body[data-design-system="modern-clean"] .hero h1 {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  letter-spacing: -0.02em;
}
body[data-design-system="modern-clean"] .hero p {
  max-width: 42ch;
}
body[data-design-system="modern-clean"] .hero-media {
  aspect-ratio: 9 / 7;
  background: var(--color-accent-tint);
}

body[data-design-system="editorial-premium"] .hero-inner {
  align-items: end;
  grid-template-columns: 1.3fr 0.9fr;
}
body[data-design-system="editorial-premium"] .hero h1 {
  font-size: clamp(2.8rem, 5.6vw, 4.8rem);
  line-height: 0.98;
}
body[data-design-system="editorial-premium"] .hero p {
  max-width: 42ch;
}
body[data-design-system="editorial-premium"] .hero .section-eyebrow {
  color: var(--color-brand);
}
body[data-design-system="editorial-premium"] .hero-media {
  align-self: end;
  aspect-ratio: 3 / 4;
  background: var(--color-surface-alt);
  border-radius: 0;
  margin-top: var(--space-4);
  min-width: 0;
}

@media (max-width: 900px) {
  body[data-design-system="warm-artisanal"] .hero-inner,
  body[data-design-system="modern-clean"] .hero-inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 960px) {
  body[data-design-system="editorial-premium"] .hero-inner {
    grid-template-columns: 1fr;
  }
  body[data-design-system="editorial-premium"] .hero-media {
    aspect-ratio: 4 / 3;
    margin-top: 0;
  }
}


/* ── section/value-proposition ── */
/* value-proposition — rejilla de tarjetas de valor. Contenedor de value-card. */

section { padding: var(--space-5) 0; }

.section-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-accent);
  margin: 0 0 var(--space-1);
}

.section-title {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  margin: 0 0 var(--space-3);
}

/* El layout de .value-grid y .value-card vive en components/value-card. */

/* -- Divergencias: ver components/value-card/component.css ------------
   warm-artisanal / modern-clean  repeat(3, 1fr)
   editorial-premium              1.4fr 1fr 1fr (asimetrico)
   -------------------------------------------------------------------- */


/* ── component/value-card ── */
/* value-card — tarjeta de propuesta de valor. */

.value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

.value-card {
  padding: var(--space-3);
  border-radius: var(--radius-md);
}

.value-card h3 {
  font-family: var(--font-heading);
  margin: 0 0 8px;
}

.value-card p {
  margin: 0;
  color: var(--color-text-muted, var(--color-text));
}

@media (max-width: 900px) {
  .value-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .value-grid { grid-template-columns: 1fr; }
}

/* ── Variantes ejecutables por sistema visual ─────────────────────────
   warm-artisanal    fondo --color-elevated, borde 1px, --shadow-soft,
                     radius-md 18px. h3 en serif y en --color-brand-dark.
                     Grid de 3 columnas iguales.
   modern-clean      fondo --color-surface-alt, borde 1px, SIN sombra,
                     radius-md 10px. h3 sans 1.05rem en --color-text.
                     Grid de 3 columnas iguales.
   editorial-premium SIN fondo, SIN borde lateral, SIN radio.
                     Solo un filete superior de 2px sobre --color-text.
                     Grid ASIMÉTRICO: 1.4fr 1fr 1fr.
                     h3 en serif 1.4rem.
                     Es el único de los tres que declara reglas de contexto
                     para section.alt oscura:
                       section.alt .value-card       { border-top-color: oro }
                       section.alt .value-card p     { color: crema al 75% }
                     Por eso value-card SÍ es seguro dentro de section.alt en
                     editorial-premium, al contrario que product-card (INC-01).
   ──────────────────────────────────────────────────────────────────── */

body[data-design-system="warm-artisanal"] .value-card {
  background: var(--color-elevated);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-soft);
}
body[data-design-system="warm-artisanal"] .value-card h3 {
  color: var(--color-brand-dark);
}

body[data-design-system="modern-clean"] .value-card {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  box-shadow: none;
}
body[data-design-system="modern-clean"] .value-card h3 {
  font-size: 1.05rem;
}

body[data-design-system="editorial-premium"] .value-grid {
  grid-template-columns: 1.4fr 1fr 1fr;
}
body[data-design-system="editorial-premium"] .value-card {
  background: transparent;
  border-radius: 0;
  border-top: 2px solid var(--color-text);
  padding-inline: 0;
}
body[data-design-system="editorial-premium"] .value-card h3 {
  font-size: 1.4rem;
}
body[data-design-system="editorial-premium"] section.alt .value-card {
  border-top-color: var(--color-accent);
}
body[data-design-system="editorial-premium"] section.alt .value-card p {
  color: var(--color-inverse-text-muted);
}

@media (max-width: 960px) {
  body[data-design-system="editorial-premium"] .value-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 640px) {
  body[data-design-system="editorial-premium"] .value-grid {
    grid-template-columns: 1fr;
  }
}


/* ── section/featured-products ── */
/* featured-products — rejilla de productos destacados de la home.
   Vive dentro de section.alt: hereda el modo de la seccion alterna. */

section.alt { background: var(--color-surface-alt); }

/* Cuando el sistema visual define texto inverso, section.alt es un bloque
   oscuro. Los fallbacks conservan el comportamiento claro de warm-artisanal
   y modern-clean, que no declaran estos tokens opcionales. */
section.alt .section-title,
section.alt .product-card h3 {
  color: var(--color-inverse-text, var(--color-text));
}

section.alt .section-eyebrow {
  color: var(--color-accent);
}

section.alt .product-card p {
  color: var(--color-inverse-text-muted, var(--color-text-muted, var(--color-text)));
}

/* El layout de .product-grid y .product-card vive en components/product-card. */

/* -- ATENCION -------------------------------------------------------
   En editorial-premium, section.alt INVIERTE a fondo oscuro. Las reglas de
   contexto anteriores aplican crema/oro y texto inverso atenuado al titulo y
   a las tarjetas; sin ellas, .product-card p conserva --color-text-muted y
   queda oscuro sobre oscuro.
   La combinacion problematica es el layout "row" (ver product-list).
   -------------------------------------------------------------------- */


/* ── component/product-card ── */
/* product-card — dos layouts sobre un mismo contrato de slots. */

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── layout: card ──────────────────────────────────────────────────── */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-3);
}

.product-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.product-card .product-image {
  aspect-ratio: 4 / 3; /* 5/6 en editorial-premium */
}

.product-card .product-body {
  padding: var(--space-3);
}

.product-card h3 {
  font-family: var(--font-heading);
  margin: 0 0 6px;
}

.product-card p {
  margin: 0;
  color: var(--color-text-muted, var(--color-text));
}

/* ── layout: row ───────────────────────────────────────────────────── */
.product-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2); /* editorial-premium usa gap 0 y separa con filete */
}

.product-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--space-3);
  align-items: center;
  border-radius: var(--radius-md);
  padding: var(--space-2);
}

.product-row .product-image {
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
}

.product-row h3 {
  font-family: var(--font-heading);
  margin: 0 0 4px;
}

.product-row p {
  margin: 0;
  color: var(--color-text-muted, var(--color-text));
}

@media (max-width: 640px) {
  .product-row { grid-template-columns: 90px 1fr; }
}

/* ── Variantes ejecutables por sistema visual ─────────────────────────
   warm-artisanal    card: fondo --color-elevated, borde 1px, --shadow-soft,
                     radius-md 18px, product-image 4/3 sobre --color-surface-alt
                     row: columna de 140px, radius 18px, sombra; 90px en 640px
   modern-clean      card: fondo --color-surface-alt, borde 1px, SIN sombra,
                     radius-md 10px, padding-body asimétrico (16/24/24)
                     row: columna de 120px; 80px en 640px
   editorial-premium card: SIN contenedor, sin fondo ni borde. product-image
                     5/6 sobre --color-surface-alt oscuro, con margen inferior.
                     Grid con gap vertical mayor (space-4).
                     row: columna de 180px, gap space-4, sin padding ni radio,
                     separación por border-bottom; 100px en 640px

   INC-01 / A11Y-06 ya está resuelto por las reglas de contexto de
   sections/product-list/section.css.
   ──────────────────────────────────────────────────────────────────── */

body[data-design-system="warm-artisanal"] .product-card,
body[data-design-system="warm-artisanal"] .product-row {
  background: var(--color-elevated);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-soft);
}
body[data-design-system="warm-artisanal"] .product-image {
  background: var(--color-surface-alt);
}

body[data-design-system="modern-clean"] .product-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
body[data-design-system="modern-clean"] .product-card,
body[data-design-system="modern-clean"] .product-row {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  box-shadow: none;
}
body[data-design-system="modern-clean"] .product-card .product-body {
  padding: var(--space-2) var(--space-3) var(--space-3);
}
body[data-design-system="modern-clean"] .product-row {
  grid-template-columns: 120px 1fr;
}
body[data-design-system="modern-clean"] .product-image {
  background: var(--color-accent-tint);
}

body[data-design-system="editorial-premium"] .product-grid {
  column-gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  row-gap: var(--space-4);
}
body[data-design-system="editorial-premium"] .product-card {
  background: transparent;
  border-radius: 0;
  overflow: visible;
}
body[data-design-system="editorial-premium"] .product-card .product-image {
  aspect-ratio: 5 / 6;
  background: var(--color-surface-alt);
}
body[data-design-system="editorial-premium"] .product-card .product-body {
  padding: var(--space-2) 0 0;
}
body[data-design-system="editorial-premium"] .product-list {
  gap: 0;
}
body[data-design-system="editorial-premium"] .product-row {
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  gap: var(--space-4);
  grid-template-columns: 180px 1fr;
  padding: var(--space-2) 0;
}

@media (max-width: 640px) {
  body[data-design-system="modern-clean"] .product-row {
    grid-template-columns: 80px 1fr;
  }
  body[data-design-system="editorial-premium"] .product-row {
    gap: var(--space-2);
    grid-template-columns: 100px 1fr;
  }
}


/* ── section/about ── */
/* about — bloque "sobre nosotros" de la home. Comparte lenguaje visual y
   tokens con la sección story (sections/story/), pero es un artefacto
   propio, no una plantilla reutilizada: el orden de columnas está
   INVERTIDO (texto primero, imagen después) y trae sus propios slots
   (about_eyebrow / about_title / about_description) en vez de los dos
   párrafos de story.

   .about-grid y .story-image se DUPLICAN aquí a propósito, con los mismos
   valores que sections/story/section.css: la página home nunca carga el
   fragmento de story (esa sección solo existe en la página "story"), así
   que este bloque necesita ser autosuficiente para pintar el mismo grid y
   el mismo tratamiento de imagen. .section-eyebrow y .section-title NO se
   repiten aquí: ya los aporta value-proposition/section.css, que la home
   siempre carga. */

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  align-items: center;
}

.story-image { overflow: hidden; border-radius: var(--radius-lg); }
.story-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; }
}

/* -- Variantes ejecutables por sistema visual (paralelas a story) ------
   warm-artisanal    imagen con radius-lg 28px, borde blanco 6px,
                     --shadow-soft, aspect-ratio 4/3 sobre --color-surface-alt.
   modern-clean      imagen con radius-lg 16px, sin borde ni sombra,
                     aspect-ratio 4/3 sobre --color-accent-tint.
   editorial-premium a diferencia de .story-grid (asimétrico 0.85fr/1.15fr),
                     .about-grid se MANTIENE 1fr/1fr: es la única diferencia
                     real entre las dos variantes, ya documentada en
                     sections/story/section.css. Imagen SIN radio,
                     aspect-ratio 3/4 (vertical) sobre --color-surface-alt
                     oscuro.

   NOTA: el asset story-image es 7:9 (vertical) pero el contenedor pide 4/3
   (horizontal) en warm-artisanal y modern-clean: object-fit cover recorta
   fuerte. Sin efecto con el placeholder de rayas, sí con fotos reales.
   Solo editorial-premium respeta la orientación del asset. Misma nota que
   en sections/story/section.css — se repite porque este archivo debe ser
   autosuficiente.
   -------------------------------------------------------------------- */

body[data-design-system="warm-artisanal"] .about-grid .story-image {
  aspect-ratio: 4 / 3;
  background: var(--color-surface-alt);
  border: 6px solid var(--color-elevated);
  box-shadow: var(--shadow-soft);
}

body[data-design-system="modern-clean"] .about-grid .story-image {
  aspect-ratio: 4 / 3;
  background: var(--color-accent-tint);
}

body[data-design-system="editorial-premium"] .about-grid {
  align-items: end;
}
body[data-design-system="editorial-premium"] .about-grid .story-image {
  aspect-ratio: 3 / 4;
  background: var(--color-surface-alt);
  border-radius: 0;
}

@media (max-width: 960px) {
  body[data-design-system="editorial-premium"] .about-grid {
    grid-template-columns: 1fr;
  }
  body[data-design-system="editorial-premium"] .about-grid .story-image {
    aspect-ratio: 4 / 3;
  }
}


/* ── section/cta ── */
/* cta — envoltorio de seccion para el componente cta-band.
   La seccion no aporta estilo propio mas alla del padding vertical y del
   contenedor: todo el peso visual esta en el componente.

   En la home la seccion lleva ademas la clase .alt (fondo alterno); en
   products y story no. Es la unica diferencia entre sus tres instancias. */

section { padding: var(--space-5) 0; }
section.alt { background: var(--color-surface-alt); }

.container {
  max-width: 1120px; /* 1240px en editorial-premium */
  margin: 0 auto;
  padding: 0 var(--space-3);
}

/* Ver components/cta-band/component.css para las divergencias visuales. */


/* ── component/cta-band ── */
/* cta-band — banda de llamada a la acción.
   Comparte .hero-actions y .btn con la sección hero: cambiar cualquiera de
   las dos afecta a ambos. Ver compatibility-notes.md §6. */

.cta-band {
  padding: var(--space-4);
  text-align: center;
}

.cta-band h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2.2vw, 1.9rem);
  margin: 0 0 var(--space-2);
}
/* font-size añadido en la pasada 9 (ISS-11/A11Y-11): antes dependía del
   tamaño por defecto del navegador para h2 anidado, que en editorial-
   premium medía 35.2px — más grande que el h1 sin estilo de page-header
   (32px), invirtiendo la jerarquía. Ahora usa un tamaño propio, menor en
   todo el rango de viewport que el h1 de page-header (clamp(2.1rem,
   3.6vw,2.9rem)) y que el .section-title de las secciones (clamp(1.8rem,
   3vw,2.4rem)) — se simplifica a UN solo valor para los tres sistemas en
   vez de reproducir los tamaños dispares del prototipo original (1.8rem/
   1.6rem/2.2rem), mismo criterio que foundation.css con los botones. */

.cta-band .hero-actions {
  justify-content: center;
}

/* Primitivo compartido: botones */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  font-weight: 700;
  border: 2px solid transparent;
}

.hero-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* ── Variantes ejecutables por sistema visual ─────────────────────────
   warm-artisanal    fondo --color-ink-strong (#4A372B), texto crema.
                     radius-lg 28px, ancho máximo 1120px, h2 serif 1.8rem.
                     btn-primary --color-brand con --shadow-soft, píldora 999px.
                     btn-secondary crema sobre marrón, invierte en hover.
   modern-clean      fondo --color-text (#1E1E1C), texto blanco.
                     radius-lg 16px, h2 sans 1.6rem.
                     btn-primary --color-brand, radius-sm 6px, sin sombra.
                     btn-secondary borde blanco al 30%.
   editorial-premium fondo --color-brand (#5C2A2A, vino), texto crema.
                     SIN radio. h2 serif 2.2rem.
                     INVIERTE los botones: btn-primary pasa a fondo crema con
                     texto vino (el opuesto a su estado normal, que es
                     --color-text sobre crema). btn-secondary crema sobre vino.
                     Botones en uppercase con tracking.

   NOTA: los tres sistemas ponen la banda sobre un fondo oscuro o saturado y
   los tres redefinen btn-secondary dentro de ella. El par fondo/texto se
   resuelve aquí por selector de sistema visual.
   ──────────────────────────────────────────────────────────────────── */

body[data-design-system="warm-artisanal"] .cta-band {
  background: var(--color-ink-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  color: var(--color-elevated);
  max-width: 1120px;
}
body[data-design-system="warm-artisanal"] .cta-band .btn {
  border-radius: 999px;
}
body[data-design-system="warm-artisanal"] .cta-band .btn-secondary {
  border-color: var(--color-elevated);
  color: var(--color-elevated);
}

body[data-design-system="modern-clean"] .cta-band {
  background: var(--color-text);
  border-radius: var(--radius-lg);
  color: #fff;
}
body[data-design-system="modern-clean"] .cta-band h2 {
  font-size: 1.6rem;
}
body[data-design-system="modern-clean"] .cta-band .btn {
  border-radius: var(--radius-sm);
}
body[data-design-system="modern-clean"] .cta-band .btn-secondary {
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}

body[data-design-system="editorial-premium"] .cta-band {
  align-items: center;
  background: var(--color-brand);
  border-radius: 0;
  color: var(--color-inverse-text);
  display: grid;
  gap: var(--space-2) var(--space-4);
  grid-template-columns: minmax(0, 1fr) auto;
  text-align: left;
}
body[data-design-system="editorial-premium"] .cta-band h2,
body[data-design-system="editorial-premium"] .cta-band p {
  grid-column: 1;
}
body[data-design-system="editorial-premium"] .cta-band h2 {
  font-size: 2.2rem;
}
body[data-design-system="editorial-premium"] .cta-band .hero-actions {
  grid-column: 2;
  grid-row: 1 / span 2;
  justify-content: flex-end;
}
body[data-design-system="editorial-premium"] .cta-band .btn {
  border-radius: 0;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
body[data-design-system="editorial-premium"] .cta-band .btn-primary {
  background: var(--color-inverse-text);
  border-color: var(--color-inverse-text);
  color: var(--color-brand);
}
body[data-design-system="editorial-premium"] .cta-band .btn-secondary {
  border-color: var(--color-inverse-text);
  color: var(--color-inverse-text);
}

@media (max-width: 760px) {
  body[data-design-system="editorial-premium"] .cta-band {
    grid-template-columns: 1fr;
  }
  body[data-design-system="editorial-premium"] .cta-band .hero-actions {
    grid-column: 1;
    grid-row: auto;
    justify-content: flex-start;
  }
}


/* ── component/footer ── */
/* footer — reglas comunes a los tres sistemas visuales. */

.site-footer {
  padding: var(--space-5) 0 var(--space-4);
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-3);
}

.site-footer h3 {
  font-family: var(--font-heading);
  margin: 0 0 8px;
  font-size: 1.1rem;
}

.site-footer a {
  overflow-wrap: anywhere;
}

.footer-bottom {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-size: 0.85rem;
}

.provisional-note {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.8rem;
}

/* ── Variantes ejecutables por sistema visual ─────────────────────────
   warm-artisanal    fondo --color-ink-strong (#4A372B), texto crema.
                     Enlaces en crema, hover en --color-brand.
                     h3 en serif. minmax 200px.
   modern-clean      fondo --color-surface-alt (#FFFFFF) con borde superior.
                     ES EL ÚNICO FOOTER CLARO de los tres. h3 sans 0.95rem.
                     minmax 180px. Los enlaces heredan --color-brand.
   editorial-premium fondo --color-text (#211A14), texto --color-inverse-text.
                     h3 en serif. Hover de enlace en --color-accent (oro).
                     minmax 200px.

   CONSECUENCIA: el footer es oscuro en dos de los tres sistemas y claro en
   uno. Un componente que se inserte dentro del footer no puede asumir el
   color del fondo. El par fondo/texto se resuelve aquí mediante selectores
   explícitos y no queda delegado a los tokens comunes.
   ──────────────────────────────────────────────────────────────────── */

body[data-design-system="warm-artisanal"] .site-footer {
  background: var(--color-ink-strong);
  color: var(--color-elevated);
}
body[data-design-system="warm-artisanal"] .site-footer a {
  color: var(--color-elevated);
}
body[data-design-system="warm-artisanal"] .site-footer a:hover {
  color: var(--color-brand);
}
body[data-design-system="warm-artisanal"] .footer-bottom {
  border-top-color: rgba(255, 253, 249, 0.2);
}

body[data-design-system="modern-clean"] .site-footer {
  background: var(--color-surface-alt);
  border-top: 1px solid var(--color-border);
  color: var(--color-text);
}
body[data-design-system="modern-clean"] .footer-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
body[data-design-system="modern-clean"] .site-footer h3 {
  font-size: 0.95rem;
}

body[data-design-system="editorial-premium"] .site-footer {
  background: var(--color-text);
  color: var(--color-inverse-text);
}
body[data-design-system="editorial-premium"] .footer-grid {
  grid-template-columns: 1.4fr 1fr 1fr;
}
body[data-design-system="editorial-premium"] .site-footer a {
  color: var(--color-inverse-text);
}
body[data-design-system="editorial-premium"] .site-footer a:hover {
  color: var(--color-accent);
}
body[data-design-system="editorial-premium"] .footer-bottom {
  border-top-color: rgba(251, 248, 242, 0.2);
}

@media (max-width: 760px) {
  body[data-design-system="editorial-premium"] .footer-grid {
    grid-template-columns: 1fr;
  }
}

/* Segunda referencia opt-in. Todo el alcance visual permanece dentro de esta composición. */
body[data-design-composition="technical-direct"] {
  --color-brand: #1949ad; --color-brand-dark: #103477; --color-accent: #1949ad;
  --color-surface: #ffffff; --color-text: #172234; --color-text-muted: #4d5b6f;
  --font-heading: "Segoe UI", Arial, sans-serif; --font-body: "Segoe UI", Arial, sans-serif;
  background: #fff; color: #172234; font-family: var(--font-body); font-size: 17px; line-height: 1.6;
}
body[data-design-composition="technical-direct"] .container { width: calc(100% - 64px); max-width: 1160px; padding-inline: 0; margin-inline: auto; }
body[data-design-composition="technical-direct"] section { padding: 88px 0; scroll-margin-top: 24px; }
body[data-design-composition="technical-direct"] :is(h1,h2,h3) { font-family: var(--font-heading); color: #172234; letter-spacing: -.035em; }
body[data-design-composition="technical-direct"] h1 { font-size: 58px; line-height: 1.05; font-weight: 650; margin: 20px 0 26px; max-width: 14ch; }
body[data-design-composition="technical-direct"] h3 { font-size: 23px; line-height: 1.25; margin: 0 0 16px; }
body[data-design-composition="technical-direct"] .section-title { font-size: 40px; line-height: 1.15; max-width: 23ch; margin: 12px 0 36px; }
body[data-design-composition="technical-direct"] p { max-width: 65ch; }
body[data-design-composition="technical-direct"] .section-eyebrow { font-family: var(--font-body); color: #1949ad; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin: 0; }
body[data-design-composition="technical-direct"] .site-header { background: #111c2d; border-bottom: 1px solid #354256; position: relative; }
body[data-design-composition="technical-direct"] .header-inner { min-height: 90px; padding-block: 16px; display: flex; justify-content: space-between; align-items: center; gap: 28px; flex-direction: row; }
body[data-design-composition="technical-direct"] .brand { color: #fff; font-size: 21px; letter-spacing: -.03em; font-weight: 650; }
body[data-design-composition="technical-direct"] .brand::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 12px; background: #8ab7ff; }
body[data-design-composition="technical-direct"] .nav ul { display: flex; flex-wrap: wrap; gap: 8px 18px; }
body[data-design-composition="technical-direct"] .nav a { display: inline-flex; align-items: center; min-height: 44px; color: #e7edf7; padding: 0 4px; font-size: 14px; }
body[data-design-composition="technical-direct"] .nav a:hover { color: #a7c8ff; }
body[data-design-composition="technical-direct"] .hero { background: #111c2d; padding: 64px 0 72px; }
body[data-design-composition="technical-direct"] .hero-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
body[data-design-composition="technical-direct"] .hero-inner > div { min-width: 0; }
body[data-design-composition="technical-direct"] .hero :is(h1,p) { color: #f6f8fc; }
body[data-design-composition="technical-direct"] .hero .section-eyebrow { color: #a7c8ff; }
body[data-design-composition="technical-direct"] .hero-media { padding: 0; margin: 0; aspect-ratio: auto; min-height: 0; border: 0; background: none; box-shadow: none; border-radius: 4px; }
body[data-design-composition="technical-direct"] :is(.hero-media,.story-image,.nexo-detail-image) img { display: block; width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; border-radius: 4px; }
body[data-design-composition="technical-direct"] .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
body[data-design-composition="technical-direct"] .btn { min-height: 48px; padding: 12px 20px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 650; border: 1px solid transparent; }
body[data-design-composition="technical-direct"] .btn-primary { background: #1949ad; color: #fff; border-color: #1949ad; }
body[data-design-composition="technical-direct"] .btn-primary:hover { background: #103477; border-color: #103477; color: #fff; }
body[data-design-composition="technical-direct"] .hero .btn-primary { background: #e8f0ff; color: #123474; border-color: #e8f0ff; }
body[data-design-composition="technical-direct"] .hero .btn-primary:hover { background: #c7dcff; border-color: #c7dcff; }
body[data-design-composition="technical-direct"] .btn-secondary { background: transparent; color: #fff; border-color: #657a97; }
body[data-design-composition="technical-direct"] .btn-secondary:hover { background: #26364e; color: #fff; }
body[data-design-composition="technical-direct"] #metodo { background: #eaf0f8; }
body[data-design-composition="technical-direct"] .value-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 36px; counter-reset: method; }
body[data-design-composition="technical-direct"] .value-card { padding: 24px 0 0; border: 0; border-top: 2px solid #8fa8ce; border-radius: 0; box-shadow: none; background: transparent; }
body[data-design-composition="technical-direct"] .value-card::before { counter-increment: method; content: "0" counter(method); display: block; font-size: 14px; color: #1949ad; font-weight: 700; margin-bottom: 20px; }
body[data-design-composition="technical-direct"] .value-card p { color: #4d5b6f; margin: 0; }
body[data-design-composition="technical-direct"] .nexo-service-heading { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 64px; margin-bottom: 40px; }
body[data-design-composition="technical-direct"] .nexo-detail-image { max-width: 430px; margin-left: auto; }
body[data-design-composition="technical-direct"] .nexo-services-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; counter-reset: service; border: 1px solid #c5d0df; }
body[data-design-composition="technical-direct"] .nexo-service { padding: 32px; background: #fff; min-width: 0; border-bottom: 1px solid #c5d0df; }
body[data-design-composition="technical-direct"] .nexo-service:nth-child(odd) { border-right: 1px solid #c5d0df; }
body[data-design-composition="technical-direct"] .nexo-service:nth-last-child(-n+2) { border-bottom: 0; }
body[data-design-composition="technical-direct"] .nexo-service::before { counter-increment: service; content: "0" counter(service); display: block; font-size: 13px; font-weight: 700; color: #1949ad; margin-bottom: 22px; }
body[data-design-composition="technical-direct"] .nexo-service p { color: #4d5b6f; margin: 0; }
body[data-design-composition="technical-direct"] #taller { background: #f3f5f8; }
body[data-design-composition="technical-direct"] .about-grid { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 64px; }
body[data-design-composition="technical-direct"] .about-grid > div:first-child { order: 2; }
body[data-design-composition="technical-direct"] .about-grid > div:last-child { order: 1; }
body[data-design-composition="technical-direct"] .story-image { aspect-ratio: auto; min-height: 0; padding: 0; background: transparent; border: 0; border-radius: 4px; }
body[data-design-composition="technical-direct"] .cta-band { width: calc(100% - 64px); max-width: 1160px; margin: 72px auto; padding: 48px; background: #111c2d; border: 0; border-radius: 4px; display: block; text-align: left; }
body[data-design-composition="technical-direct"] .cta-band h2 { color: #fff; font-size: 36px; line-height: 1.15; max-width: 28ch; }
body[data-design-composition="technical-direct"] .cta-band p { color: #d3dfef; }
body[data-design-composition="technical-direct"] .cta-band .hero-actions { justify-content: flex-start; }
body[data-design-composition="technical-direct"] .site-footer { background: #fff; border-top: 1px solid #c5d0df; padding: 40px 0 88px; color: #4d5b6f; }
body[data-design-composition="technical-direct"] .nexo-footer { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
body[data-design-composition="technical-direct"] .nexo-footer h3 { font-size: 20px; }
body[data-design-composition="technical-direct"] .nexo-footer :is(p,a) { color: #4d5b6f; font-size: 14px; overflow-wrap: anywhere; }
body[data-design-composition="technical-direct"] .footer-bottom { border: 0; padding-top: 28px; margin-top: 0; }
body[data-design-composition="technical-direct"] .footer-bottom p { font-size: 12px; color: #4d5b6f; }
body[data-design-composition="technical-direct"] .nexo-back-top { position: fixed; right: max(16px,env(safe-area-inset-right)); bottom: max(20px,env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: #1949ad; color: #fff; border: 2px solid #fff; border-radius: 4px; font-size: 26px; text-decoration: none; z-index: 20; }
body[data-design-composition="technical-direct"] .nexo-back-top:hover { background: #103477; }
body[data-design-composition="technical-direct"] :is(a,button):focus-visible { outline: 3px solid #cc7500; outline-offset: 4px; }
body[data-design-composition="technical-direct"] .nexo-skip { position: fixed; top: 10px; left: 10px; transform: translateY(-180%); z-index: 30; background: #fff; color: #111c2d; padding: 12px 20px; }
body[data-design-composition="technical-direct"] .nexo-skip:focus { transform: none; }
html:has(>body[data-design-composition="technical-direct"]) { scroll-behavior: smooth; }
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  body[data-design-composition="technical-direct"] :is(.hero-media,.story-image,.nexo-detail-image) { transition: transform 200ms ease,filter 200ms ease; }
  body[data-design-composition="technical-direct"] :is(.hero-media,.story-image,.nexo-detail-image):hover { transform: translateY(-3px); filter: brightness(1.04); }
}
@media (max-width:900px) {
  body[data-design-composition="technical-direct"] section { padding: 64px 0; }
  body[data-design-composition="technical-direct"] .hero-inner { grid-template-columns: 1fr; gap: 36px; }
  body[data-design-composition="technical-direct"] h1 { font-size: 48px; max-width: 19ch; }
  body[data-design-composition="technical-direct"] .header-inner { flex-direction: column; align-items: flex-start; gap: 8px; }
  body[data-design-composition="technical-direct"] .about-grid { grid-template-columns: 1fr; gap: 32px; }
  body[data-design-composition="technical-direct"] .about-grid > div { order: initial !important; }
  body[data-design-composition="technical-direct"] .section-title { font-size: 34px; }
  body[data-design-composition="technical-direct"] .nexo-service-heading { gap: 32px; }
}
@media (max-width:640px) {
  body[data-design-composition="technical-direct"] { font-size: 16px; }
  body[data-design-composition="technical-direct"] .container { width: calc(100% - 40px); }
  body[data-design-composition="technical-direct"] section { padding: 52px 0; }
  body[data-design-composition="technical-direct"] .hero { padding: 40px 0 48px; }
  body[data-design-composition="technical-direct"] h1 { font-size: 38px; max-width: 16ch; }
  body[data-design-composition="technical-direct"] .section-title { font-size: 30px; }
  body[data-design-composition="technical-direct"] .nav ul { gap: 2px 12px; }
  body[data-design-composition="technical-direct"] .nav a { font-size: 13px; padding: 0; }
  body[data-design-composition="technical-direct"] .hero-actions .btn { width: 100%; }
  body[data-design-composition="technical-direct"] :is(.value-grid,.nexo-service-heading,.nexo-services-grid,.nexo-footer) { grid-template-columns: 1fr; gap: 24px; }
  body[data-design-composition="technical-direct"] .nexo-detail-image { max-width: none; margin: 0; }
  body[data-design-composition="technical-direct"] .nexo-services-grid { gap: 0; }
  body[data-design-composition="technical-direct"] .nexo-service { padding: 28px 24px; border-right: 0 !important; border-bottom: 1px solid #c5d0df !important; }
  body[data-design-composition="technical-direct"] .nexo-service:last-child { border-bottom: 0 !important; }
  body[data-design-composition="technical-direct"] .cta-band { width: calc(100% - 40px); padding: 32px 24px; margin: 48px auto; }
  body[data-design-composition="technical-direct"] .cta-band h2 { font-size: 28px; }
}
@media (prefers-reduced-motion:reduce) {
  html:has(>body[data-design-composition="technical-direct"]) { scroll-behavior: auto; }
  body[data-design-composition="technical-direct"] *, body[data-design-composition="technical-direct"] *::before { animation: none !important; transition: none !important; scroll-behavior: auto; }
}

/* Páginas internas: misma identidad y jerarquía que la portada. */
body[data-design-composition="technical-direct"] .nexo-page-header { background: #111c2d; }
body[data-design-composition="technical-direct"] .nexo-page-header :is(h1,p) { color: #f6f8fc; }
body[data-design-composition="technical-direct"] .nexo-page-header h1 { max-width: 24ch; }
body[data-design-composition="technical-direct"] .nexo-service h2 { font-size: 26px; line-height: 1.2; margin: 0 0 16px; }
body[data-design-composition="technical-direct"] .story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
body[data-design-composition="technical-direct"] .contact-details { max-width: 720px; }
body[data-design-composition="technical-direct"] .contact-details dt { font-weight: 700; margin-top: 24px; }
body[data-design-composition="technical-direct"] .contact-details dd { margin-left: 0; overflow-wrap: anywhere; }
body[data-design-composition="technical-direct"] .values-list { display: grid; gap: 24px; }
@media(max-width: 700px) { body[data-design-composition="technical-direct"] .story-grid { grid-template-columns: 1fr; gap: 24px; } }

body[data-design-composition="technical-direct"] .nexo-contact-form { max-width: 720px; margin-top: 56px; }
body[data-design-composition="technical-direct"] .nexo-contact-form .form-row { display: grid; gap: 8px; margin-bottom: 24px; }
body[data-design-composition="technical-direct"] .nexo-contact-form :is(input,textarea) { font: inherit; width: 100%; box-sizing: border-box; background: #fff; color: #172234; border: 1px solid #64748b; border-radius: 4px; padding: 12px; }
body[data-design-composition="technical-direct"] .nexo-contact-form textarea { resize: vertical; }
body[data-design-composition="technical-direct"] .nexo-contact-form :is(input,textarea):focus-visible { outline: 3px solid #1949ad; outline-offset: 3px; }
body[data-design-composition="technical-direct"] .nexo-contact-form label { font-weight: 650; }
body[data-design-composition="technical-direct"] .nexo-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

body[data-design-composition="technical-direct"] .brand:has(.library-logo,.library-monogram)::before { display:none; }
body[data-design-composition="technical-direct"] .brand:has(.library-logo,.library-monogram) { display:inline-flex; align-items:center; gap:12px; min-width:0; }
body[data-design-composition="technical-direct"] .brand .library-logo { width:auto; height:auto; max-width:140px; max-height:52px; object-fit:contain; background:#fff; padding:6px; border-radius:4px; flex-shrink:0; }
body[data-design-composition="technical-direct"] .library-monogram { display:inline-flex; width:44px; height:44px; flex-shrink:0; align-items:center; justify-content:center; border:1px solid currentColor; border-radius:6px; font-size:18px; font-weight:700; }
body[data-design-composition="technical-direct"] .brand > span:last-child { overflow-wrap:anywhere; }
@media(max-width:600px) { body[data-design-composition="technical-direct"] .brand .library-logo { max-width:80px; max-height:44px; } }

/* El enlace activo hereda el contraste de la cabecera, también con marca personalizada. */
body[data-design-composition="technical-direct"] .site-header { color:#e7edf7; }
body[data-design-composition="technical-direct"] .site-header .nav { color:inherit; }
body[data-design-composition="technical-direct"] .site-header .nav a[aria-current="page"] { color:inherit; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:5px; }

/* Mejora progresiva: sin el inicializador, los enlaces siguen visibles. */
body[data-design-composition] .menu-toggle { display: none; }
body[data-design-composition] [data-reference-navigation] nav[hidden] { display: none !important; }
@media (max-width:900px) {
  body[data-design-composition] [data-reference-navigation][data-menu-ready] { z-index: 30; }
  body[data-design-composition] [data-reference-navigation][data-menu-ready] .header-inner { position: relative; display: flex; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; min-height: 84px; }
  body[data-design-composition] [data-menu-ready] .brand { font-size: 19px; }
  body[data-design-composition] [data-menu-ready] .menu-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 92px; min-height: 44px; padding: 10px 12px; color: #3a2e24; background: #fffdf9; border: 1px solid #857b69; border-radius: 6px; font: 600 14px "Segoe UI",Arial,sans-serif; cursor: pointer; }
  body[data-design-composition="technical-direct"] [data-menu-ready] .menu-toggle { color: #f6f8fc; background: #111c2d; border-color: #8da5c5; border-radius: 4px; }
  body[data-design-composition] .menu-icon { display: grid; gap: 4px; width: 18px; }
  body[data-design-composition] .menu-icon span { display: block; height: 2px; width: 18px; background: currentColor; }
  body[data-design-composition] [data-menu-open="true"] .menu-icon span:first-child { transform: translateY(6px) rotate(45deg); }
  body[data-design-composition] [data-menu-open="true"] .menu-icon span:nth-child(2) { opacity: 0; }
  body[data-design-composition] [data-menu-open="true"] .menu-icon span:last-child { transform: translateY(-6px) rotate(-45deg); }
  body[data-design-composition] [data-menu-ready] .nav { position: absolute; top: 100%; right: 0; left: 0; padding: 12px; background: #fffdf9; border: 1px solid #c0b49f; border-radius: 0 0 8px 8px; box-shadow: 0 12px 24px rgb(0 0 0 / 12%); }
  body[data-design-composition="technical-direct"] [data-menu-ready] .nav { background: #111c2d; border-color: #657a97; border-radius: 0 0 4px 4px; }
  body[data-design-composition] [data-menu-ready] .nav ul { display: flex; flex-direction: column; gap: 4px; }
  body[data-design-composition] [data-menu-ready] .nav a { display: flex; width: 100%; min-height: 44px; padding: 10px 14px; border: 0; font-size: 16px; }
  body[data-design-composition] [data-menu-ready] .nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
  body[data-design-composition] .menu-toggle:focus-visible { outline: 3px solid #bb7000; outline-offset: 4px; }
}

body[data-design-composition="technical-direct"][data-design-variant="image-led"] .hero { padding:0; position:relative; isolation:isolate; background:#111c2d; }
body[data-design-composition="technical-direct"][data-design-variant="image-led"] .nexo-hero-stage { display:block; position:relative; width:100%; max-width:none; margin:0; }
body[data-design-composition="technical-direct"][data-design-variant="image-led"] .hero-media { position:absolute; inset:0; border-radius:0; z-index:0; overflow:hidden; }
body[data-design-composition="technical-direct"][data-design-variant="image-led"] .hero-media img { width:100%; height:100%; object-fit:cover; border-radius:0; }
body[data-design-composition="technical-direct"][data-design-variant="image-led"] .hero-media::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(4,12,24,.93),rgba(4,12,24,.75) 55%,rgba(4,12,24,.35)); }
body[data-design-composition="technical-direct"][data-design-variant="image-led"] .nexo-hero-copy { position:relative; z-index:1; width:calc(100% - 64px); max-width:1160px; margin:auto; padding:100px 0 110px; }
body[data-design-composition="technical-direct"][data-design-variant="image-led"] .hero h1 { max-width:14ch; font-size:clamp(42px,5vw,72px); color:#fff; }
body[data-design-composition="technical-direct"][data-design-variant="image-led"] .hero p { max-width:48ch; color:#fff; }
body[data-design-composition="technical-direct"][data-design-variant="image-led"] .hero .section-eyebrow { color:#d5e6ff; }
body[data-design-composition="technical-direct"][data-design-variant="image-led"] .hero .btn-primary { background:#fff; color:#172234; border-color:#fff; }
body[data-design-composition="technical-direct"][data-design-variant="image-led"] .hero .btn-primary:hover { background:#dce8fb; color:#172234; }
body[data-design-composition="technical-direct"][data-design-variant="image-led"] .hero .btn-secondary { background:transparent; border-color:#fff; color:#fff; }
body[data-design-composition="technical-direct"][data-design-variant="image-led"] .hero .btn-secondary:hover { background:#fff; color:#172234; }
body[data-design-composition="technical-direct"][data-design-variant="image-led"] #taller { background:#f1f4f6; }
body[data-design-composition="technical-direct"][data-design-variant="image-led"] .nexo-services-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
body[data-design-composition="technical-direct"][data-design-variant="image-led"] .nexo-service { border:0; border-top:3px solid var(--color-brand); padding:28px; background:#f1f4f6; }
body[data-design-composition="technical-direct"][data-design-variant="image-led"] .nexo-detail-image { width:220px; }
body[data-design-composition="technical-direct"][data-design-variant="image-led"] .nexo-page-header { border-bottom:5px solid var(--color-brand); }
@media(max-width:640px) {
 body[data-design-composition="technical-direct"][data-design-variant="image-led"] .nexo-hero-copy { width:calc(100% - 40px); padding:64px 0 76px; }
 body[data-design-composition="technical-direct"][data-design-variant="image-led"] .hero h1 { font-size:40px; }
 body[data-design-composition="technical-direct"][data-design-variant="image-led"] .hero-media::after { background:rgba(4,12,24,.83); }
 body[data-design-composition="technical-direct"][data-design-variant="image-led"] .nexo-services-grid { grid-template-columns:1fr; }
 body[data-design-composition="technical-direct"][data-design-variant="image-led"] .nexo-detail-image { width:100%; }
}


/* ── section/page-header ── */
/* page-header — cabecera de pagina interna.
   No declara estilo propio: usa el padding de seccion, el contenedor y los
   primitivos .section-eyebrow y el h1 base de cada sistema visual.
   Se registra como artefacto para que las page_recipe no tengan
   referencias sin resolver, no porque aporte reglas nuevas. */

section { padding: var(--space-5) 0; }

.container {
  max-width: 1120px; /* 1240px en editorial-premium */
  margin: 0 auto;
  padding: 0 var(--space-3);
}

.section-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-accent);
  margin: 0 0 var(--space-1);
}

h1 {
  font-family: var(--font-heading);
  font-size: clamp(2.1rem, 3.6vw, 2.9rem);
  line-height: 1.15;
  margin: 0 0 var(--space-2);
}

/* -- ISS-11 / A11Y-11: RESUELTO en la pasada 9 -------------------------
   Antes: la UNICA regla de titular en los tres styles.css era ".hero h1"
   (exclusiva de la home). El h1 de las paginas internas (products, story,
   contact) no tenia ninguna regla propia y caia en el default del
   navegador: 32px con la familia del BODY, no la de titulares — y ese
   tamano por defecto depende del algoritmo de "outline" de cada navegador
   segun el anidamiento de <section>, asi que no era un valor confiable
   (el h2 de la banda de CTA, tambien sin estilo, a veces caia MAS GRANDE
   que el h1 por el mismo motivo — medido en editorial-premium: 35.2px de
   h2 contra 32px de h1).

   Ahora: el h1 usa var(--font-heading) y un tamano propio en clamp(),
   deliberadamente menor que el de .hero h1 (es un titulo secundario, no
   el principal del sitio) pero mayor en TODO el rango de viewport que
   cualquier h2 posterior (.section-title en clamp(1.8rem,3vw,2.4rem) y
   el de .cta-band en clamp(1.5rem,2.2vw,1.9rem) — ver
   value-proposition/section.css y components/cta-band/component.css).
   Verificado en el navegador a 375/768/1280px en los tres sistemas: h1
   siempre mayor que cualquier h2 de la misma pagina. Un solo <h1> por
   pagina, sin tocar la jerarquia semantica (h1 -> h2), solo el tamano. */

/* ── section/product-list ── */
/* product-list — listado completo de productos (pagina products).
   Vive dentro de section.alt. */

section.alt { background: var(--color-surface-alt); }

/* El layout de .product-list y .product-row vive en components/product-card. */

/* -- INC-01 / A11Y-06 — RESUELTO en la pasada 9 ------------------------
   editorial-premium + esta seccion: section.alt es oscura (#2E2A1F) pero
   .product-row p conservaba --color-text-muted (#5B4F42) heredado de
   product-card/component.css. Texto oscuro sobre oscuro, ratio medido en
   navegador: 1.80:1 (exige 4.5:1).

   Aplicado el fix de texto ya documentado en tokens/editorial-premium.json
   (known_issues → A11Y-06 → fix_for_v0_2): --color-inverse-text (crema,
   #FBF8F2) al 75% de opacidad. Contraste resultante medido: 8.3:1 sobre
   #2E2A1F — muy por encima del mínimo de 4.5:1. La composición visual no
   cambia (mismo layout, mismo fondo, mismo texto): solo el color.

   NOTA: el fix_for_v0_2 original también proponía recolorear el
   border-bottom que separa las filas. Verificado en navegador: .product-row
   no tiene border-bottom real en NINGÚN sistema (border-style: none, 0px;
   la separación entre filas es solo el gap de .product-list). El texto
   "invisible sobre el mismo fondo" del hallazgo original describía un
   filete del prototipo original que la unificación de component.css nunca
   implementó — no hay nada que recolorear hoy. No se agregó un
   border-bottom nuevo: sería una divergencia de composición para
   editorial-premium que ningún otro sistema tiene, fuera del alcance de
   esta pasada (que pide mantener la composición visual, no rediseñarla). */
section.alt .product-row p {
  color: rgba(251, 248, 242, 0.75);
}

/* ── section/story ── */
/* story — relato del negocio, con imagen a un lado.
   Variante hermana: la seccion "about" de la home usa .about-grid con la
   misma imagen pero con el orden invertido (texto primero, imagen despues)
   y anade los slots about_title / about_description. */

.story-grid,
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  align-items: center;
}

.story-image { overflow: hidden; border-radius: var(--radius-lg); }
.story-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 900px) {
  .story-grid, .about-grid { grid-template-columns: 1fr; }
}

/* -- Divergencias por sistema visual, no unificadas -------------------
   warm-artisanal    1fr/1fr. Imagen con radius-lg 28px, borde blanco 6px,
                     --shadow-soft, aspect-ratio 4/3 sobre --color-surface-alt.
   modern-clean      1fr/1fr. Imagen con radius-lg 16px, sin borde ni sombra,
                     aspect-ratio 4/3 sobre --color-accent-tint.
   editorial-premium story-grid ASIMETRICO 0.85fr/1.15fr (about-grid sigue
                     siendo 1fr/1fr). Imagen SIN radio, aspect-ratio 3/4
                     (vertical) sobre --color-surface-alt oscuro.
                     Breakpoint en 960px.

   NOTA: el asset story-image es 7:9 (vertical) pero el contenedor pide 4/3
   (horizontal) en warm-artisanal y modern-clean: object-fit cover recorta
   fuerte. Sin efecto con el placeholder de rayas, si con fotos reales.
   Solo editorial-premium respeta la orientacion del asset.
   -------------------------------------------------------------------- */

/* ── section/values ── */
/* values — lista de criterios. NO usa el componente value-card:
   su contrato es distinto (<strong> + <span>, no h3 + p). */

/* .section-eyebrow / .section-title duplicados a propósito — hallazgo de
   la pasada 9: esta sección solo aparece en la página "story"
   (composition-map.json), que NUNCA carga value-proposition/section.css
   (esa sección es exclusiva de home). Antes, values_title (h2) dependía
   de esa regla ajena y, al no estar presente, caía sin estilo — 24px por
   defecto del navegador. Mismo valor y mismo criterio de autosuficiencia
   que sections/about/section.css documenta para .about-grid/.story-image;
   ver también sections/value-proposition/section.css, la fuente original
   de esta regla. */
.section-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-accent);
  margin: 0 0 var(--space-1);
}

.section-title {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  margin: 0 0 var(--space-3);
}

.values-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.values-list li { padding: var(--space-2) var(--space-3); }

.values-list strong {
  display: block;
  margin-bottom: 2px;
  color: var(--color-brand, var(--color-text));
}

/* -- Divergencias por sistema visual, no unificadas -------------------
   warm-artisanal    fondo --color-elevated, radius-md 18px, --shadow-soft,
                     borde IZQUIERDO de 4px en --color-accent (oliva).
                     strong en serif y en --color-brand-dark.
   modern-clean      fondo --color-surface-alt, borde 1px, radius-md 10px,
                     sin sombra. strong en --color-brand.
   editorial-premium SIN fondo, SIN radio, gap 0. Separacion por
                     border-top de 1px. strong en serif 1.15rem y en
                     --color-brand (vino). padding vertical unicamente.

   ATENCION: en editorial-premium esta seccion tambien esta dentro de
   section.alt (oscura), y el border-top rgba(33,26,20,0.15) es igualmente
   poco visible. Mismo patron que A11Y-07 pero de menor impacto porque el
   texto de <span> hereda el color del contexto, no --color-text-muted.
   -------------------------------------------------------------------- */

/* ── section/contact ── */
/* contact — datos de contacto + formulario, a dos columnas. */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

.contact-details dt {
  font-weight: 700;
  margin-top: var(--space-2);
  color: var(--color-brand, var(--color-text));
}
.contact-details dt:first-child { margin-top: 0; }
.contact-details dd { margin: 2px 0 0; }

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
}

/* -- Divergencias por sistema visual, no unificadas -------------------
   warm-artisanal    1fr/1fr. La <dl> va en una tarjeta: fondo
                     --color-elevated, radius-lg 28px, --shadow-soft,
                     padding space-4. dt en --color-brand-dark, peso 700.
   modern-clean      1fr/1fr. La <dl> en tarjeta con borde 1px, radius-lg
                     16px, sin sombra. dt en UPPERCASE 0.85rem con tracking
                     0.06em y en --color-text-muted.
   editorial-premium 0.9fr/1.1fr (asimetrico). La <dl> SIN tarjeta: sin
                     fondo, sin borde, sin padding. dt en serif 1.1rem y en
                     --color-brand (vino), con margin-top space-3.
                     Breakpoint en 960px.

   NOTA A11Y-01: en el prototipo la <dl> terminaba con un <dt></dt> vacio
   seguido de un <dd> con la nota provisional. Se corrige en la biblioteca
   (la nota sale de la <dl>) pero NO en source-normalized, donde se conserva
   la estructura original.
   -------------------------------------------------------------------- */

/* ── component/contact-form ── */
/* contact-form — formulario visual. No envía datos. */

.contact-form {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-row label {
  font-weight: 700;
}

.form-row input,
.form-row textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
}

.form-row textarea {
  min-height: 120px;
  resize: vertical;
}

.form-note {
  font-size: 0.85rem;
  color: var(--color-text-muted, var(--color-text));
}

input:focus-visible,
textarea:focus-visible,
button:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

/* ── Divergencias por sistema visual, no unificadas ───────────────────
   warm-artisanal    fondo --color-elevated, radius-lg 28px, --shadow-soft.
                     Labels en --color-ink-strong, peso 700.
                     Campos sobre --color-surface con borde rgba marrón 25%.
                     textarea 120px. form-note en --color-accent-dark (oliva).
                     Foco: outline 3px oliva, offset 3px.
   modern-clean      fondo --color-surface-alt, borde 1px, radius-lg 16px,
                     SIN sombra. Labels sans 0.9rem peso 600.
                     Campos sobre --color-surface con borde --color-border.
                     textarea 110px. Foco: outline 2px, offset 2px (el más
                     discreto de los tres — verificar visibilidad).
   editorial-premium fondo --color-inverse-text (#FBF8F2, crema), SIN radio
                     (radius-sm 2px), borde 1px rgba.
                     Labels UPPERCASE 0.85rem con tracking 0.06em.
                     Campos sobre --color-surface (papel).
                     textarea 120px. Foco: outline 3px oro, offset 3px.

   NOTA: el formulario es el único componente que consume --font-body de
   forma explícita (los campos no heredan la familia del body por defecto).
   ──────────────────────────────────────────────────────────────────── */