/* Wö Kàpi · inicio (index.html), 1 de octubre de 2026.
Carga después de movimiento.css y solo en index.html. El marcado lo arman
construir-home-menu.py (portada, carta, panadería y eventos) y aplicar-componentes.py
(reseñas e Instagram). Usa solo el sistema (SISTEMA.md): .banda, .contenedor, .grilla, las
clases de letra, .boton, .enlace, .renglon, .filas, .con-dibujo, .ola y los atributos de
movimiento. Lo que está acá es lo propio del inicio, con alcance .pagina-inicio (con
:where(), para no subir la especificidad de cada regla):
1. Portada «COMIDA SUBLIME», la línea práctica, un botón y tres arcos que son puertas
2. Secciones cabeza (título con dibujo) y pie (línea de hoy y enlace)
3. La carta cuatro platos con nombre y precio, sin descripción
4. Pares foto grande y texto al lado (panadería y eventos)
5. Reseñas las tarjetas verdes sin la comilla de 96 px ni el hueco interno
6. Instagram seis fotos y un enlace
Un fondo: crema. Oscuro solo en la portada y el pie, con una ola en cada borde. Las fotos
llevan el radio del sitio (8 px), el mismo de las tarjetas, el botón y el pie de los arcos;
el único gesto gráfico fuerte son los arcos de la portada. Sin franja de Taco Tuesday: la
oferta va en la línea de hoy de la carta.
Ninguna capa va encima de texto, precios, botones ni fotos: los arcos van en el flujo,
debajo del botón, y el giro (de -6 a 7 grados) saca menos de la mitad del canal entre arcos.
Nada arranca invisible (el titular es el LCP en celular y un arco en escritorio). */
/* ============================================================
1. Portada
============================================================ */
:where(.pagina-inicio) .portada {
--arco-ancho: clamp(104px, 15vw + 20px, 240px); /* 104 en celular, 135 a 768, 236 a 1440 */
--arco-borde: clamp(4px, .55vw + 2px, 8px); /* el borde crema del original: 8 px */
--puertas-canal: clamp(16px, 4.4vw, 64px);
padding-top: calc(var(--barra-alto) + var(--aire-seccion));
padding-bottom: var(--aire-seccion);
text-align: center;
}
:where(.pagina-inicio) .portada-cuerpo {
display: flex;
flex-direction: column;
align-items: center;
}
:where(.pagina-inicio) .portada-titulo { margin: 0; }
:where(.pagina-inicio) .portada-titulo .exhibicion { display: block; }
/* «en Santa Ana» va dentro del h1, un salto abajo: Recoleta al tamaño de sección, tipo oración. */
:where(.pagina-inicio) .portada-cola {
display: block;
margin-top: 12px;
font-size: var(--t-seccion);
line-height: 1.15;
}
:where(.pagina-inicio) .portada-linea {
margin-top: 28px;
max-width: 36em;
text-wrap: balance;
}
:where(.pagina-inicio) .portada-accion { margin: 32px 0 0; }
/* Las puertas: tres arcos fijos en una fila, centrados debajo del botón. Cada arco es un enlace
entero; el nombre va debajo, derecho, nunca sobre la foto. El giro es leve (de -6 a 7 grados) y
el canal entre arcos (64 a 1440) es más del doble de lo que el giro saca a cada lado (16): ni
los arcos se tocan entre sí ni tapan su nombre, que queda a 24 px. */
:where(.pagina-inicio) .puertas {
display: grid;
grid-template-columns: repeat(3, minmax(0, var(--arco-ancho)));
justify-content: center;
column-gap: var(--puertas-canal);
width: 100%;
margin: calc(var(--aire-zona) + 8px) 0 0;
padding: 0;
list-style: none;
}
:where(.pagina-inicio) .puertas > li { min-width: 0; margin: 0; padding: 0; }
:where(.pagina-inicio) .puerta {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
color: var(--crema);
text-decoration: none;
-webkit-tap-highlight-color: transparent;
}
:where(.pagina-inicio) .arco {
display: block;
box-sizing: border-box;
width: 100%;
aspect-ratio: 4 / 5;
overflow: hidden;
border: var(--arco-borde) solid var(--crema);
/* Medio círculo arriba (50 % del ancho = 40 % del alto en 4:5) y el radio del sitio abajo. */
border-radius: 50% 50% var(--radio) var(--radio) / 40% 40% var(--radio) var(--radio);
background-color: var(--cafe-oscuro);
transform: rotate(calc(var(--giro, 0deg) * var(--giro-escala, 1)));
transition: transform .3s cubic-bezier(.2, .6, .2, 1);
}
:where(.pagina-inicio) .arco img {
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
}
:where(.pagina-inicio) .puerta-nombre {
font-family: var(--serif);
font-size: var(--t-pieza);
font-weight: 700;
line-height: 1.25;
text-decoration: underline;
text-decoration-color: transparent;
text-decoration-thickness: 1px;
text-underline-offset: 6px;
transition: text-decoration-color .2s ease;
}
/* Al pasar, el arco se endereza y el nombre se subraya: la puerta responde, nada más. */
:where(.pagina-inicio) .puerta:hover .arco, :where(.pagina-inicio) .puerta:focus-visible .arco { transform: none; }
:where(.pagina-inicio) .puerta:hover .puerta-nombre, :where(.pagina-inicio) .puerta:focus-visible .puerta-nombre { text-decoration-color: currentColor; }
:where(.pagina-inicio) .puerta:focus-visible { outline: 3px solid var(--crema); outline-offset: 8px; border-radius: var(--radio); }
@media (prefers-reduced-motion: reduce) {
:where(.pagina-inicio) .arco, :where(.pagina-inicio) .puerta-nombre { transition: none; }
}
/* La entrada de la portada: las tres puertas suben 16 px, escalonadas, y terminan a los 550 ms.
Sin fundido: con opacidad 0 al cargar el arco (el LCP en escritorio) se pintaba 1 s más tarde
con 4G lenta. El texto no se mueve. */
@keyframes puerta-sube { from { transform: translateY(16px); } }
@media (prefers-reduced-motion: no-preference) {
html.js :where(.pagina-inicio) .puertas > li { animation: puerta-sube .45s cubic-bezier(.2, .6, .2, 1) both; }
html.js :where(.pagina-inicio) .puertas > li:nth-child(2) { animation-delay: 50ms; }
html.js :where(.pagina-inicio) .puertas > li:nth-child(3) { animation-delay: 100ms; }
}
@media (max-width: 991px) {
:where(.pagina-inicio) .puerta { gap: 20px; }
}
/* Escritorio bajo (1280×720, 1366×768, 1440×800): menos aire arriba y arcos más chicos, así la
fila entera de puertas, con sus nombres, entra en la primera pantalla. */
@media (min-width: 992px) and (max-height: 820px) {
:where(.pagina-inicio) .portada { --arco-ancho: clamp(160px, 26vh, 200px); padding-top: calc(var(--barra-alto) + 48px); }
:where(.pagina-inicio) .portada-accion { margin-top: 24px; }
:where(.pagina-inicio) .puertas { margin-top: 40px; }
}
@media (max-width: 767px) {
/* En celular la portada ocupa la primera pantalla entera y la ola queda en su borde de abajo:
una idea por pantalla, como el original, sin el título de la carta asomado. El contenido va
centrado en el alto que sobra; en un teléfono bajo (667 px o menos) no sobra nada. */
:where(.pagina-inicio) .portada {
--giro-escala: .6;
display: flex;
flex-direction: column;
justify-content: center;
min-height: calc(100svh - clamp(24px, 3.4vw, 56px));
}
:where(.pagina-inicio) .portada-cola { margin-top: 8px; }
:where(.pagina-inicio) .portada-linea { margin-top: 20px; }
:where(.pagina-inicio) .portada-accion { margin-top: 24px; }
:where(.pagina-inicio) .puerta { gap: 16px; }
}
/* ============================================================
2. Secciones: cabeza y pie
La cabeza es el título de la sección con su dibujo pegado al final (SISTEMA §11). El pie es un
renglón: la línea de hoy a la izquierda y el enlace a la derecha, en la misma línea de base.
============================================================ */
:where(.pagina-inicio) .seccion-cabeza { margin-bottom: var(--aire-zona); }
/* La carta: el título con su dibujo y, en la misma fila, la nota de precios contra el borde derecho
(donde terminan los precios). En celular la nota va debajo del título. Una vez en la página. */
:where(.pagina-inicio) .carta-cabeza {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 8px 32px;
}
:where(.pagina-inicio) .carta-cabeza .nota { margin: 0; }
@media (max-width: 767px) {
:where(.pagina-inicio) .carta-cabeza { display: block; }
:where(.pagina-inicio) .carta-cabeza .nota { margin-top: 8px; }
}
:where(.pagina-inicio) .seccion-pie {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 16px 48px;
margin-top: var(--aire-zona);
}
:where(.pagina-inicio) .seccion-pie > p { margin: 0; }
/* Si la promo no se publica, la línea de hoy no sale y el enlace queda solo, a la derecha. */
:where(.pagina-inicio) .seccion-pie > .seccion-enlace:only-child { margin-left: auto; }
/* La línea de hoy toma todo lo que el enlace deja libre y parte en renglones parejos, sin «tacos
favoritos.» suelto abajo. Medido: los otros días, un renglón desde 1280 y dos a 768 y 1024; el
martes, con «Hoy es Taco Tuesday.» adelante, dos renglones desde 1024 (cuatro en celular). */
:where(.pagina-inicio) .hoy { text-wrap: balance; }
@media (min-width: 768px) {
:where(.pagina-inicio) .hoy { flex: 1 1 0; min-width: 20rem; }
}
:where(.pagina-inicio) .hoy-marca { font-weight: 700; }
:where(.pagina-inicio) .seccion-enlace { margin: 0; }
:where(.pagina-inicio) .seccion-enlace .enlace {
display: inline-flex;
align-items: center;
min-height: 44px;
font-family: var(--serif);
font-size: var(--t-pieza);
font-weight: 700;
}
/* Un título que parte en dos renglones («Una locura / de medialunas»): la caja mide lo que el
renglón largo, así el dibujo queda pegado al texto y no en la otra punta de la columna. */
:where(.pagina-inicio) .con-dibujo > .titulo-en-dos { flex: 0 0 auto; width: max-content; max-width: 100%; }
:where(.pagina-inicio) .titulo-en-dos > span { display: block; }
/* ============================================================
3. La carta: cuatro platos, nombre y precio en un renglón, sin descripción
============================================================ */
:where(.pagina-inicio) .platos {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--aire-zona) var(--canal);
margin: 0;
padding: 0;
list-style: none;
}
:where(.pagina-inicio) .plato { margin: 0; padding: 0; }
:where(.pagina-inicio) .plato img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 4 / 5;
object-fit: cover;
border-radius: var(--radio);
background-color: rgba(196, 154, 108, .3);
}
:where(.pagina-inicio) .plato .renglon { margin-top: 16px; }
/* Por debajo de 1280 la columna ya no tiene lugar para «Ensalada Wö Kàpi» y su precio en un
renglón: el precio baja debajo del nombre en los cuatro, así ninguno se parte en tres. */
@media (max-width: 1279px) {
:where(.pagina-inicio) .plato .renglon { flex-direction: column; align-items: flex-start; gap: 4px; }
}
@media (max-width: 767px) {
:where(.pagina-inicio) .platos { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
:where(.pagina-inicio) .plato .renglon { margin-top: 12px; }
:where(.pagina-inicio) .seccion-pie { flex-direction: column; align-items: flex-start; gap: 16px; }
}
/* ============================================================
4. Pares: una foto grande y el texto al lado, alternados
Panadería: foto a la izquierda (columnas 1 a 6) y texto de 8 a 12. Eventos: al revés.
Desde 768 van lado a lado; en celular, la foto arriba.
============================================================ */
:where(.pagina-inicio) .par { align-items: center; }
/* El título arranca a la altura del borde de arriba de la foto. */
:where(.pagina-inicio) .par--arriba { align-items: start; }
:where(.pagina-inicio) .par-foto { margin: 0; }
:where(.pagina-inicio) .par-foto img {
display: block;
width: 100%;
height: auto;
object-fit: cover;
border-radius: var(--radio);
background-color: rgba(196, 154, 108, .3);
}
:where(.pagina-inicio) .par-foto--izquierda img { aspect-ratio: 5 / 4; }
:where(.pagina-inicio) .par-foto--derecha img { aspect-ratio: 3 / 2; }
:where(.pagina-inicio) .par-foto--izquierda { grid-column: 1 / span 6; grid-row: 1; }
:where(.pagina-inicio) .par-texto--derecha { grid-column: 8 / span 5; grid-row: 1; }
:where(.pagina-inicio) .par-foto--derecha { grid-column: 7 / span 6; grid-row: 1; }
:where(.pagina-inicio) .par-texto--izquierda { grid-column: 1 / span 5; grid-row: 1; }
:where(.pagina-inicio) .par-texto > * { margin-top: 0; margin-bottom: 0; }
:where(.pagina-inicio) .par-texto > * + * { margin-top: var(--aire-bloque); }
:where(.pagina-inicio) .par-texto > .seccion-enlace { margin-top: 8px; }
:where(.pagina-inicio) .par-texto .con-dibujo + * { margin-top: var(--aire-bloque); }
:where(.pagina-inicio) .lista-precios { margin-top: var(--aire-bloque); }
:where(.pagina-inicio) .lista-precios > li { padding: 16px 0; }
:where(.pagina-inicio) .lista-precios .nota { margin: 4px 0 0; }
:where(.pagina-inicio) .par-puerta { margin-top: calc(var(--aire-bloque) + 8px) !important; max-width: var(--medida); text-wrap: pretty; }
/* La mesa con sillas es apaisada (2,2 a 1): a 64 de alto ya pesa lo mismo que la medialuna a 80.
El título va en dos renglones, como el de panadería, así la mesa entra a su lado de 360 a 1920. */
:where(.pagina-inicio) .dibujo--mesa { height: 64px; max-width: none; }
@media (min-width: 768px) and (max-width: 991px) {
:where(.pagina-inicio) .par-foto--izquierda, :where(.pagina-inicio) .par-foto--derecha { grid-column: span 6; }
:where(.pagina-inicio) .par-texto--derecha { grid-column: 7 / span 6; }
:where(.pagina-inicio) .par-texto--izquierda { grid-column: 1 / span 6; }
:where(.pagina-inicio) .par-foto--derecha { grid-column: 7 / span 6; }
}
@media (max-width: 767px) {
:where(.pagina-inicio) .par { row-gap: 32px; }
:where(.pagina-inicio) .par-foto--izquierda, :where(.pagina-inicio) .par-foto--derecha,
:where(.pagina-inicio) .par-texto--derecha, :where(.pagina-inicio) .par-texto--izquierda { grid-column: 1 / -1; grid-row: auto; }
:where(.pagina-inicio) .par-foto--izquierda img { aspect-ratio: 4 / 3; }
}
/* ============================================================
5. Reseñas
El carrusel de componentes.css se queda (lo pidió Fede): tarjetas verdes, flechas y los dos
enlaces a Google. Sale la comilla de 96 px y la firma empujada al fondo de la tarjeta, que
dejaban un hueco de 106 a 133 px en celular (CRÍTICA, objeción 16). Título de sección del
sistema. Estas reglas sí suben la especificidad: tienen que ganarle a componentes.css.
============================================================ */
.pagina-inicio .resenas__titulo {
max-width: none;
margin: 0 0 var(--aire-zona);
color: inherit;
font-size: var(--t-seccion);
line-height: 1.15;
text-transform: none;
}
.pagina-inicio .resena { --resena-relleno: 32px; }
.pagina-inicio .resena > figure::before { content: none; }
.pagina-inicio .resena__cita { font-size: var(--t-pieza); line-height: 1.4; }
.pagina-inicio .resena__autor { margin: 0; padding-top: 24px; }
.pagina-inicio .resenas__acciones a {
color: inherit;
font-size: var(--t-cuerpo);
font-weight: 400;
text-decoration-thickness: 1px;
text-underline-offset: .22em;
}
.pagina-inicio .resenas__acciones a:hover { color: inherit; text-decoration-thickness: 2px; }
/* Flechas de 44 × 44 con contorno de 1,5 px carbón y el radio del sitio, terminando en la línea
de «Reservá». */
.pagina-inicio .resenas__boton { width: 44px; height: 44px; border-width: 1.5px; border-color: currentColor; border-radius: var(--radio); color: var(--carbon); }
.pagina-inicio .resenas__boton:hover { background-color: var(--carbon); color: var(--crema); }
@media (max-width: 767px) {
.pagina-inicio .resena { --resena-relleno: 24px; }
/* En celular se ve una tarjeta a la vez: cada una mide lo que su texto, sin verde vacío abajo. */
.pagina-inicio .resenas__pista { align-items: flex-start; }
}
/* ============================================================
6. Instagram: la última banda, seis fotos y un enlace
============================================================ */
.pagina-inicio .ig__grilla { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.pagina-inicio .ig__foto { pointer-events: none; border-radius: var(--radio); overflow: hidden; }
:where(.pagina-inicio) .ig-pie { margin: var(--aire-bloque) 0 0; }
:where(.pagina-inicio) .ig-pie .enlace { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 991px) {
.pagina-inicio .ig__grilla { gap: 8px; }
}
@media (max-width: 767px) {
.pagina-inicio .ig__grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}