/* Wö Kàpi · nosotros.html, eventos.html y 404.html (30 de setiembre de 2026)
Carga después de las hojas del sistema (SISTEMA.md §2) y solo en esas páginas
(construir-articulos.py la saca de la cáscara del blog). Las páginas se arman con
.banda, .contenedor, .grilla, las clases de letra y los botones de css/ajustes.css;
acá va solo lo propio de cada una, con los prefijos .nos-, .eventos- y .pag-404.
- Ninguna capa encima de texto, precios, botones ni fotos: nada va con position
absolute ni fixed.
- Sin eyebrows, píldoras, tarjetas, sombras ni degradados. Radios de var(--radio).
- Solo los tamaños de la escala (60 · 48 · 30 · 20 · 18 · 16; en celular
40 · 32 · 24 · 20 · 17 · 16) y los pesos 400 y 700. */
/* ============================================================
Nosotros
1. La entrada de diccionario (banda oscura): «Wö Kàpi», «semilla de café», «del
bribri», como en el sitio original, con la mesa de «Nuestra esencia» de la carta
pegada al nombre y la frase del cliente.
2. El momento de la taza: la foto de la taza, a pantalla completa, que se abre
desde un marco mientras la sección entra (una pantalla de scroll, sin pegajoso y
sin hueco). Sin soporte de animaciones por scroll, con «reducir movimiento» o
sin CSS de animación, la foto está quieta y entera.
3. «Local, orgánico y consciente.» con la foto de los fundadores y el texto de los
hermanos, tal cual (dos columnas desde 992, una hasta 991).
============================================================ */
/* 1. Portada: la entrada centrada, como en el original y como la taza que viene abajo. La
taza sigue en el mismo carbón: abajo queda el aire de una zona y no el de una banda. */
.nos-portada { padding-bottom: var(--aire-zona); }
.nos-entrada { text-align: center; }
.nos-entrada > * { margin-left: auto; margin-right: auto; }
.nos-entrada .con-dibujo { justify-content: center; }
/* 2. La taza. Una pantalla de alto (entre 520 y 900 px) y, apaisada, nunca más alta que
3/4 del ancho: así la caja de la foto mide 4:3 o más ancho y el logo impreso en la foto
(filas 368 a 541 de 1522) queda afuera abierta y cerrada (a 1024×900 la caja mide
1024×768). Desde 1280 la foto se frena en la caja de .contenedor (1152 a 1200 px, radio
de 8 y carbón alrededor): la fuente mide 1202 px y a todo el ancho se ampliaba. */
.nos-taza {
box-sizing: border-box;
height: 100vh;
height: 100svh;
min-height: 520px;
max-height: 900px;
/* clip y no hidden: hidden la vuelve un contenedor de scroll y la línea de tiempo view()
de la foto mediría contra ella (no se movería nunca). */
overflow: clip;
background-color: var(--carbon);
}
@media (min-aspect-ratio: 1 / 1) {
.nos-taza { min-height: min(520px, 75vw); max-height: min(900px, 75vw); }
}
/* La caja de la foto: sus unidades cqw (1 % del ancho de la caja) ubican la taza. */
.nos-taza-caja {
height: 100%;
container-type: inline-size;
}
/* Apaisada, la foto se recorta arriba y abajo con la taza (filas 790 a 1305, centro 1048,
287 px debajo del centro de la foto: 23,88 % del ancho) en el centro de la caja, sin
pasarse de los bordes de la foto (clamp entre 100 % y 0 %). El marco de partida rodea la
taza y el plato (columnas 211 a 960) con 40 px de aire, también en cqw: arranca debajo
del logo a cualquier ancho. */
.nos-taza-foto {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 92%;
object-position: 50% clamp(100%, calc(50% - 23.88cqw), 0%);
--taza-arriba: max(0px, calc(50% - 24.75cqw));
--taza-abajo: max(0px, calc(50% - 24.75cqw));
--taza-izquierda: max(0px, calc(50% - 35.82cqw));
--taza-derecha: max(0px, calc(50% - 33.19cqw));
}
/* En vertical (celular y tableta parada) la foto se ve entera de arriba abajo, con el logo,
y se recorta por los lados; el marco arranca arriba del logo y no lo corta. */
@media (max-aspect-ratio: 1 / 1) and (max-width: 1279px) {
.nos-taza-foto {
object-position: 48% 50%;
--taza-arriba: 20%;
--taza-abajo: 8%;
--taza-izquierda: 8%;
--taza-derecha: 8%;
}
}
@media (min-width: 1280px) {
.nos-taza { padding-bottom: var(--aire-zona); }
.nos-taza-caja {
width: min(var(--ancho), 100% - 2 * var(--margen));
margin: 0 auto;
}
.nos-taza-foto { border-radius: var(--radio); }
}
/* La foto se abre mientras la sección entra: arranca cuando ya se ve la mitad de la
sección (a 1440 es lo que se ve al cargar, debajo de la portada; a 390, un poco más) y
termina cuando la sección llena la pantalla: media pantalla de scroll. Antes de arrancar
queda en el marco («both»), así no salta. */
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.nos-taza-foto {
animation: nos-taza-abre linear both;
animation-timeline: view();
animation-range: entry 50% entry 100%;
}
}
}
@keyframes nos-taza-abre {
from { clip-path: inset(var(--taza-arriba) var(--taza-derecha) var(--taza-abajo) var(--taza-izquierda) round var(--radio)); }
to { clip-path: inset(0 0 0 0 round 0); }
}
/* 3. La casa.
Desde 1280: la foto de los fundadores a la izquierda (5 columnas) y, en las columnas 7 a
12, el título con el hombre de la taza, el texto de la carta y, abajo, el de los hermanos.
De 992 a 1279: el título y el texto de la carta a todo el ancho (el título entra en un
renglón con su dibujo) y, abajo, la foto (5 columnas) al alto del texto de los hermanos
(7 a 12): no queda crema vacía debajo de la foto (a 1024 eran 260 px).
Hasta 991, una columna: título y texto, foto, hermanos. La foto va apaisada (3:2, las
caras y las camisetas) desde 480; más angosta, entera en 2:3. A 768, con dos columnas, el
texto de los hermanos medía 1000 px y dejaba 590 vacíos debajo de la foto. */
.nos-casa-foto { margin: 0; }
.nos-casa-foto img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 2 / 3;
object-fit: cover;
object-position: 50% 15%;
border-radius: var(--radio);
}
@media (min-width: 480px) and (max-width: 991px) {
.nos-casa-foto img { aspect-ratio: 3 / 2; }
}
@media (min-width: 992px) and (max-width: 1279px) {
.nos-casa-local { grid-column: 1 / -1; grid-row: 1; }
/* contain: size: la foto no empuja el alto de la fila; lo pone el texto y la foto se estira. */
.nos-casa-foto {
grid-column: 1 / span 5;
grid-row: 2;
align-self: stretch;
contain: size;
min-height: 320px;
}
.nos-casa-foto img { height: 100%; aspect-ratio: auto; }
.nos-casa-hermanos { grid-column: 7 / -1; grid-row: 2; }
}
@media (min-width: 1280px) {
.nos-casa-grilla { grid-template-rows: auto 1fr; }
.nos-casa-local { grid-column: 7 / -1; grid-row: 1; }
.nos-casa-foto { grid-column: 1 / span 5; grid-row: 1 / span 2; }
.nos-casa-hermanos { grid-column: 7 / -1; grid-row: 2; }
}
/* El dibujo va pegado al final del título (SISTEMA.md §11). Si no entran los dos en un
renglón, el título se parte, su caja toma todo el ancho y el dibujo queda suelto contra el
borde: ahí se va. «Local, orgánico y consciente.» mide 408 px a 30 y 326 a 24; el hombre,
64 y 43 de ancho. */
.nos-casa-local .con-dibujo { container: nos-local / inline-size; }
@media (min-width: 768px) {
@container nos-local (max-width: 491px) { .dibujo { display: none; } }
}
@media (max-width: 767px) {
@container nos-local (max-width: 388px) { .dibujo { display: none; } }
}
/* ============================================================
Eventos
Una banda con el título, cómo se cotiza y el formulario (el botón entra en la
primera pantalla), y otra con la foto de un evento y la línea para empresas.
============================================================ */
.eventos-grilla { align-items: start; }
/* Las columnas de la derecha se ubican acá y no con .desde-N: en ajustes.css, .col-N es
«grid-column: span N» (inicio = span, fin = auto), así que .desde-N le pisa el inicio y la
columna queda de una sola pista (medido: .col-5.desde-8 mide 71 px a 1440). */
@media (min-width: 992px) {
/* El formulario y la línea de empresas arrancan en la misma columna (la 8, x = 838 a
1440), como el título y la foto en la línea del logo. */
.eventos-form-col,
.eventos-empresas-texto { grid-column: 8 / span 5; }
}
.eventos-pasos { margin-top: var(--aire-zona); }
.eventos-pasos .titulo-pieza { margin-bottom: 8px; }
.eventos-lista { counter-reset: paso; }
.eventos-lista > li {
display: grid;
grid-template-columns: 2em minmax(0, 1fr);
counter-increment: paso;
padding: 16px 0;
}
.eventos-lista > li::before {
content: counter(paso);
font-family: var(--serif);
font-weight: 700;
}
/* El formulario: etiqueta arriba, campo con un filete abajo (sin cajas), 52 px de alto. */
.eventos-form-col { padding-top: 4px; }
.eventos-form { margin: 0; }
.eventos-campo { min-width: 0; }
.eventos-campo + .eventos-campo,
.eventos-campo + .eventos-fila,
.eventos-fila + .eventos-enviar { margin-top: 28px; }
.eventos-fila > .eventos-campo { margin-top: 0; }
.eventos-fila {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--canal);
row-gap: 28px;
}
.eventos-etiqueta {
display: block;
margin: 0 0 4px;
font-size: var(--t-nota);
font-weight: 700;
line-height: 1.4;
}
.eventos-entrada {
box-sizing: border-box;
display: block;
width: 100%;
min-width: 0;
height: 52px;
margin: 0;
padding: 10px 0;
border: 0;
border-bottom: 1.5px solid var(--carbon);
border-radius: 0;
background-color: transparent;
color: var(--tinta);
font-family: var(--sans);
font-size: var(--t-cuerpo);
line-height: 1.3;
color-scheme: light;
}
.eventos-entrada:focus { outline: none; }
.eventos-entrada:focus-visible {
outline: 3px solid var(--carbon);
outline-offset: 2px;
}
.eventos-entrada:user-invalid { border-bottom-color: var(--cafe); }
.eventos-elegir {
-webkit-appearance: none;
appearance: none;
padding-right: 32px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5l6 6 6-6' fill='none' stroke='%232b2b2b' stroke-width='1.6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 4px center;
cursor: pointer;
}
.eventos-elegir option { background-color: var(--crema); color: var(--carbon); }
.eventos-form input[type="date"] { text-align: left; }
.eventos-form input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.eventos-enviar { margin-top: 36px; }
.eventos-enviar .boton { width: 100%; cursor: pointer; }
.eventos-enviar .nota { margin: 12px 0 0; text-align: center; }
/* Sin JavaScript el botón no abre WhatsApp: esa frase se va y queda la del