/* `apps/publico/nosotros.css` — «Nosotros» como manifiesto por pantallas (propuesta B, 15-OCT-2026).
   Va DESPUÉS de `proveedores.css` (cabecera, menú «más», barra móvil) y todo cuelga de clases `nos-`.
   Una idea por pantalla, a escala enorme, en bandas a sangre que alternan los cuatro tokens
   (`--ink/--paper/--soft/--accent`) y nada más. Contraste: `--accent` contra cualquier otro token da
   ~3:1, así que sobre la banda verde fresco SÓLO va texto grande (≥24 px, o ≥18.7 px en negrita).
   Sin tarjetas: el ritmo sale de cambiar escala, alineación y fondo de una pantalla a la siguiente. */
main.nos { width: 100%; max-width: none; margin: 0; overflow-x: clip; }
.nos { --nos-margen: clamp(1rem, 5vw, 5rem); --nos-alto: clamp(4rem, 12vw, 10rem); }
.nos h1, .nos h2 { margin: 0; font-family: var(--fuente-encabezado), sans-serif; font-weight: 400; text-transform: uppercase; }
.nos img { display: block; max-width: 100%; height: auto; }
.nos picture { display: block; }

/* La pantalla: una banda a sangre con su margen interior. */
.nos-pantalla { position: relative; display: grid; align-content: center; padding: var(--nos-alto) var(--nos-margen); }
.nos-rotulo, .nos-etiqueta { margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .22em; line-height: 1.2; text-transform: uppercase; }
.nos-gigante { font-size: clamp(5rem, 24vw, 22rem); letter-spacing: -.01em; line-height: .92; }

/* 1 · Portada: el titular a todo lo ancho sobre verde hierba, y la mesa a sangre debajo. */
.nos-portada { padding: 0; background: var(--ink); color: var(--paper); }
.nos-portada-texto { padding: clamp(2.5rem, 7vw, 6rem) var(--nos-margen) clamp(2rem, 4vw, 3.5rem); }
.nos-portada h1 { max-width: 13ch; margin-top: 1.25rem; color: var(--soft); font-size: clamp(3.4rem, 10.4vw, 10.5rem); letter-spacing: -.005em; line-height: 1.02; }
.nos-portada-foto { position: relative; }
.nos-portada-foto img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; object-position: 50% 52%; }
.nos-portada .button { position: absolute; right: var(--nos-margen); bottom: clamp(1rem, 3vw, 2.5rem); display: inline-flex; min-height: 3.25rem; align-items: center; gap: .8rem; padding: .85rem 1.1rem .85rem 1.7rem; border-radius: 999px; background: var(--soft); color: var(--ink); font-weight: 700; letter-spacing: .04em; text-decoration: none; }
.nos-portada .button::after { display: grid; width: 1.9rem; height: 1.9rem; place-items: center; border-radius: 50%; background: var(--ink); color: var(--soft); content: '→'; }
.nos-portada .button:hover { background: var(--paper); }
.nos-portada .button:focus-visible { outline: 3px solid var(--soft); outline-offset: 4px; }

/* 2 · KOKORO 心: la palabra a sangre izquierda; el significado chico, abajo a la derecha. */
.nos-kokoro { min-height: min(90svh, 54rem); gap: clamp(2rem, 5vw, 4rem); background: var(--soft); color: var(--ink); }
.nos-kokoro .nos-gigante { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .12em; margin-left: -.04em; }
.nos-kanji { font-family: 'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif JP', serif; font-size: .78em; font-weight: 700; line-height: 1; }
.nos-chico { justify-self: end; max-width: 27rem; margin: 0; padding-top: 1rem; border-top: 2px solid var(--ink); font-size: 1.05rem; line-height: 1.6; }

/* 3 · CO.: la otra mitad del nombre, alineada al revés, sobre verde fresco (sólo texto grande). */
.nos-co { min-height: min(80svh, 48rem); grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 2rem clamp(2rem, 5vw, 5rem); background: var(--accent); color: var(--ink); }
.nos-co .nos-rotulo { grid-column: 1 / -1; font-size: 1.2rem; }
.nos-co .nos-gigante { grid-column: 2; grid-row: 2; font-size: clamp(7rem, 34vw, 30rem); text-align: right; }
.nos-medio { grid-column: 1; grid-row: 2; max-width: 22ch; margin: 0 0 1.5rem; font-size: clamp(1.6rem, 2.8vw, 2.5rem); font-weight: 700; line-height: 1.28; text-wrap: balance; }

/* 4 · La suma: la ecuación en una línea chica, el wordmark enorme y la frase. */
.nos-suma { justify-items: center; gap: clamp(1.5rem, 4vw, 3rem); background: var(--paper); color: var(--ink); text-align: center; }
.nos-ecuacion { display: flex; flex-wrap: wrap; justify-content: center; gap: .3em .6em; margin: 0; font-family: var(--fuente-encabezado), sans-serif; font-size: clamp(1.8rem, 4vw, 3.2rem); text-transform: uppercase; }
.nos-ecuacion span:nth-child(even) { color: var(--accent); }
.nos-wordmark { display: block; width: min(52rem, 88vw); aspect-ratio: 1080 / 709; margin-block: clamp(-5rem, -6vw, -1.5rem); background: var(--ink); -webkit-mask: url('assets/brand/wordmark-verde.svg') center / contain no-repeat; mask: url('assets/brand/wordmark-verde.svg') center / contain no-repeat; }
.nos-nace { margin: 0; font-size: clamp(1.1rem, 1.8vw, 1.4rem); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }

/* 5 · Manifiesto: la primera frase a escala de cartel; el resto, chico y desplazado. */
.nos-manifiesto { gap: clamp(2rem, 4vw, 3rem); background: var(--ink); color: var(--paper); }
.nos-manifiesto-texto { display: grid; gap: clamp(2rem, 4vw, 3.5rem); margin: 0; }
.nos-enorme { max-width: 15ch; color: var(--soft); font-family: var(--fuente-encabezado), sans-serif; font-size: clamp(3rem, 8.4vw, 8.4rem); line-height: 1.04; text-transform: uppercase; }
.nos-resto { justify-self: end; max-width: 30rem; font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.55; }

/* La cinta: densidad máxima entre dos pantallas de aire. Decorativa (aria-hidden). */
.nos-cinta { margin: 0; padding: 1rem 0; overflow: hidden; background: var(--soft); color: var(--ink); font-family: var(--fuente-encabezado), sans-serif; font-size: clamp(1.4rem, 3vw, 2.4rem); text-transform: uppercase; white-space: nowrap; }
.nos-cinta span { display: inline-block; transform: translateX(-4%); }

/* 6 · Cómo trabajamos: tres renglones de tabla, sin tarjetas; el número enorme alterna de lado. */
.nos-principios { background: var(--paper); color: var(--ink); }
.nos-principios > .nos-rotulo { margin-bottom: clamp(1.5rem, 4vw, 3rem); }
.nos-principio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); grid-template-rows: 1fr auto; gap: 1rem clamp(1.5rem, 5vw, 5rem); align-items: end; padding: clamp(1.5rem, 3vw, 2.5rem) 0; border-top: 2px solid var(--ink); }
.nos-principio:last-child { border-bottom: 2px solid var(--ink); }
.nos-principio strong { grid-row: 1 / 3; color: var(--accent); font-family: var(--fuente-encabezado), sans-serif; font-size: clamp(6rem, 17vw, 16rem); font-weight: 400; line-height: .92; }
.nos-principio h2 { grid-row: 1; align-self: end; font-size: clamp(2.4rem, 5.4vw, 5.2rem); line-height: 1.04; }
.nos-principio p { grid-row: 2; max-width: 30rem; margin: 0; font-size: 1.05rem; line-height: 1.55; }
.nos-principio:nth-of-type(2) { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); text-align: right; }
.nos-principio:nth-of-type(2) strong { grid-column: 2; }
.nos-principio:nth-of-type(2) h2, .nos-principio:nth-of-type(2) p { grid-column: 1; justify-self: end; }

/* 7 · Nuestra manera: la caja a sangre izquierda, la frase a la derecha sobre mantequilla. */
.nos-manera { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); padding: 0 var(--nos-margen) 0 0; background: var(--soft); color: var(--ink); }
.nos-manera img { width: 100%; height: 100%; min-height: 32rem; object-fit: cover; }
.nos-manera h2 { max-width: 12ch; margin-top: 1.25rem; font-size: clamp(2.8rem, 6vw, 6rem); line-height: 1.04; }

/* 8 · Quiénes somos: un fragmento literal de la bio, gigante y a mano; la bio entera, chica. */
.nos-quien { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: end; gap: clamp(2rem, 5vw, 5rem); background: var(--ink); color: var(--paper); }
.nos-quien > .nos-rotulo { grid-column: 1 / -1; }
.nos-frase { margin: 0; }
.nos-frase span:first-child { display: block; color: var(--soft); font-family: var(--fuente-encabezado), sans-serif; font-size: clamp(3rem, 7.6vw, 7.6rem); line-height: 1.04; text-transform: uppercase; }
.nos-mano { display: block; margin-top: 1.5rem; font-family: var(--fuente-anotacion), 'Homemade Apple', cursive; font-size: clamp(1.3rem, 2.4vw, 2.1rem); line-height: 1.6; transform: rotate(-3deg); transform-origin: left; }
.nos-bio { padding-top: 1rem; border-top: 2px solid var(--soft); }
.nos-quien .bio { margin: 1rem 0 0; font-size: 1.05rem; line-height: 1.65; }

/* 9 · Dónde estamos: el nombre de la cocina como cartel; dirección y horario a dos columnas. */
.nos-donde { gap: clamp(1.5rem, 3vw, 2.5rem); background: var(--paper); color: var(--ink); }
.nos-donde h2 { max-width: 12ch; font-size: clamp(3.4rem, 9.5vw, 9.5rem); line-height: 1.02; }
.nos-donde-datos { display: grid; grid-template-columns: repeat(2, minmax(0, 28rem)); gap: 1.5rem clamp(2rem, 5vw, 5rem); padding-top: 1.25rem; border-top: 2px solid var(--ink); }
.nos-donde address { font-size: 1.2rem; font-style: normal; font-weight: 700; line-height: 1.45; }
.nos-donde-datos p { margin: 0; font-size: 1.05rem; line-height: 1.55; }

@media (max-width: 760px) {
  .nos-portada-foto img { aspect-ratio: 4 / 3; }
  .nos-portada .button { position: static; margin: 1.25rem var(--nos-margen) 2.5rem; }
  .nos-kokoro, .nos-co { min-height: 0; }
  .nos-chico { justify-self: stretch; }
  .nos-co { grid-template-columns: 1fr; }
  .nos-co .nos-gigante, .nos-medio { grid-column: 1; grid-row: auto; }
  .nos-principio, .nos-principio:nth-of-type(2) { grid-template-columns: 1fr; grid-template-rows: none; text-align: left; }
  .nos-principio strong, .nos-principio h2, .nos-principio p, .nos-principio:nth-of-type(2) strong, .nos-principio:nth-of-type(2) h2, .nos-principio:nth-of-type(2) p { grid-row: auto; grid-column: 1; justify-self: start; }
  .nos-manera, .nos-quien { grid-template-columns: 1fr; }
  .nos-manera { padding: 0 0 var(--nos-alto); }
  .nos-manera img { min-height: 0; aspect-ratio: 4 / 3; }
  .nos-manera > div { padding: 0 var(--nos-margen); }
  .nos-donde-datos { grid-template-columns: 1fr; }
}