/* ═══════════════════════════════════════════════════════════════════════════ SISTEMA MIME · WEB Cada número de acá abajo sale de MEDIR, no de elegir. La fuente al lado. Medido el 30-10-2026 sobre ottolenghi.co.uk a 1440×900 con getComputedStyle (146 elementos con texto) y sobre los archivos de logo de Mime con PIL. ═══════════════════════════════════════════════════════════════════════════ */ :root{ /* — CAMPO Y TINTA — Dos tintas y nada más. Medido: Ottolenghi usa rgb(27,27,27) en 90 de 146 elementos y su MISMA tinta al 60% y 70% para el secundario. La secundaria no es otro color: es la misma bajada de opacidad. La de Mime es CÁLIDA (H 27) porque el campo es crema, no blanco puro: una tinta neutra sobre crema se lee gris sucio. Contraste 13,98:1. */ --tinta:#2B2119; --tinta-60:rgba(43,33,25,.60); --tinta-40:rgba(43,33,25,.40); --crema:#F6F1E7; /* — ACENTO — El azul de marca entra como ACENTO, no como campo. Medido: el rojo #CD001A de Ottolenghi aparece en 10 de 146 elementos = 6,8%. Techo para Mime: 7%. Hoy lo usan el logo y un botón. */ --azul:#1F7DF7; /* — FILETE — 0,667px, no 1. Medido: 66 usos de 0.666667px contra 8 de 2px. Es un hairline, y es lo único que separa: no hay cajas. */ --filete:.667px solid rgba(43,33,25,.22); /* — UNIDAD BASE: 15px — Medido: 15px es el tamaño dominante de Ottolenghi, 59 de 146 = 40% de la página. TODO el ritmo sale de multiplicarlo por enteros. */ --u:15px; --r1:15px; --r2:30px; --r4:60px; --r8:120px; /* — CANAL LATERAL: 60px FIJO — Fijo en px, nunca en %. Un canal en % se abre en pantalla grande y la página se desarma; fijo, el bloque de texto queda igual en 1440 que en 1920 y lo único que crece es el vacío. 60 = 15 × 4. */ --canal:60px; } @media (max-width:760px){ :root{ --canal:24px } } *{box-sizing:border-box;margin:0;padding:0} html,body{background:var(--crema);color:var(--tinta)} body{ /* Playfair como suplente de Market Fresh (didona, que es la clase correcta) e Inter 300 para el resto. UNA voz para los titulares, UNA para el texto. */ font-family:Inter,system-ui,sans-serif; /* Peso 300 en el cuerpo. Medido: 300 lleva 89 de 146 elementos = 61%. El 400 queda para los titulares. Bold NO existe en el sistema. */ font-weight:300; font-size:var(--u); /* Escalera de interlineado, medida exacta: 1,30 cuerpo · 1,20 chico · 1,10 titular · 0,95 display. No es un valor plano. */ line-height:1.30; -webkit-font-smoothing:antialiased; } /* ───────── la caja que fija el canal, una sola vez ───────── */ .marco{padding-inline:var(--canal)} /* ───────── ESCALA TIPOGRÁFICA · 7 pasos y no más ───────── 11 · 13 · 15 · 20 · 26 · 46 · 112 Los cuatro primeros son los medidos en Ottolenghi (11, 14, 15, 20, 25,8); los dos de arriba los agrego para el display, que ese sitio no tiene. */ .micro{font-size:11px;line-height:1.20;text-transform:uppercase; /* Tracking: 0 en todo lo grande, positivo SÓLO acá. Medido: 118 de 146 elementos en `normal`, y los únicos con tracking son los caps chicos (0,88px sobre 11px = 0,080em). */ letter-spacing:.08em} .chico{font-size:13px;line-height:1.20;color:var(--tinta-60)} .cuerpo{font-size:15px;line-height:1.30;max-width:34em} .h3{font-size:20px;line-height:1.20;font-weight:400} .h2{font-family:"Playfair Display",Georgia,serif;font-size:26px;line-height:1.10;font-weight:400;letter-spacing:0} /* ═══════════════════════════════════════════════════════════════════════════ LA PORTADA ES LA IMAGEN · medido el 31-10-2026, y corrige la versión anterior ─────────────────────────────────────────────────────────────────────────── Rodrigo pidió «intensificar algo más de lujo». Lo medible, en aman.com a 1440×900 contra esta misma página: Aman esta portada (v1) bloques de texto 6 6 palabras 45 15 superficie con texto 4,6% 1,8% elementos visibles 57 18 ⇒ **El lujo NO es tener menos texto: acá ya había menos.** La diferencia es que en Aman la MEDIA cubre la primera pantalla entera y el tipo va encima; en la v1 la media arrancaba recién en y=589 de 900 y cubría el 35%. 🔑 Y resuelve el problema del logo de paso: en BLANCO sobre el video el trazo fino mide 7,9px y el contraste es el máximo posible, así que la restricción de la didona deja de pelear con la composición. 📌 El fondo de Aman es rgb(243,238,231) — la misma crema que Mime, con 3 puntos de diferencia. El campo cálido estaba bien; lo que faltaba era que no fuera lo primero que se ve. ═══════════════════════════════════════════════════════════════════════════ */ .hero{position:relative;height:100svh;min-height:620px;overflow:hidden;background:#0B2E63} .hero .fondo{position:absolute;inset:0;display:flex} /* Tres 9:16 a pantalla completa: a 900px de alto cada uno pide 506px y entran 2,85 — con `cover` se recortan apenas por los lados y llenan exacto. Cuatro los dejaría en 360px de ancho, que es más angosto que un celular. */ .hero .fondo video{flex:1 1 0;min-width:0;width:100%;height:100%;object-fit:cover;display:block} /* El velo existe para una sola cosa: que el blanco del logo se lea sobre CUALQUIER cuadro, incluido uno con una torta clara. Más fuerte arriba y abajo, donde van la barra y el claim; casi nulo en el medio, para no apagar el video. */ .hero .velo{position:absolute;inset:0; background:linear-gradient(180deg,rgba(10,20,32,.52) 0%,rgba(10,20,32,.16) 42%,rgba(10,20,32,.58) 100%)} .hero .centro{position:relative;height:100%;display:flex;flex-direction:column; justify-content:center;align-items:center;text-align:center} .hero .logo-b{width:100%;max-width:none;height:auto;display:block} .hero .claim{color:#fff;margin-top:var(--r2);opacity:.92} .hero .barra{position:absolute;top:0;left:0;right:0;z-index:2;border-bottom:none} .hero .barra .micro,.hero .barra a{color:rgba(255,255,255,.88)} .hero .barra a:hover{color:#fff} @media (max-width:760px){ /* A 375px de ancho, tres videos dan 125px cada uno: se ven como tiras. Quedan dos. */ .hero .fondo video:nth-child(3){display:none} /* La barra se desbordaba: el rótulo de marca partía en dos renglones y «Dónde estamos» salía de la pantalla. En el hero la marca ya la dice el logo gigante, así que el rótulo sobra y el lugar es para la navegación. */ /* ⚠️ `> .micro` escondía TAMBIÉN la navegación: el