/* assets/ux.css — base de UX y SISTEMA compartido (lab, unidad S). Va DESPUÉS del CSS de cada página y ANTES de su d-*.css. Solo colores y tipos de la marca (crema #EFE9DB, espresso #2C261F, sepia #5C4C37 / #786B55, Cormorant, Archivo Narrow). No cambia precios ni formularios. Cada bloque dice qué hallazgo resuelve. El SISTEMA de la auditoría del dueño (9-oct: escala --t-*, encabezado .casa-bar, pie .casa-pie, flotantes) está al FINAL. */ /* ---------- ESCALA TIPOGRÁFICA ÚNICA (auditoría H5). Cinco escalones; las demás hojas USAN estas variables ---------- */ :root{ --t-portada:47px; /* titular de portada */ --t-seccion:30px; /* titular de sección y de página: Cormorant 500, redonda (itálica solo en la palabra que la pide) */ --t-sub:22px; /* subtítulo: nombre de tarjeta, estante, capítulo */ --t-cuerpo:17px; /* texto de lectura */ --t-ante:13px; /* antetítulo: Archivo Narrow 600, mayúsculas */ --t-min:13px; /* nada baja de aquí */ --t-serif:'Cormorant Garamond',Georgia,serif; --t-flat:'Archivo Narrow',Arial,sans-serif; --t-ante-color:#5C4C37; --t-ante-track:.22em; --casa-bar-h:62px; /* alto del encabezado compartido (el mismo que tenía la barra: el mapa se mide contra él) */ } @media (min-width:821px){ :root{ --t-portada:80px; --t-seccion:44px; --t-sub:28px; --t-cuerpo:19px } } /* ---------- H5 · selector de ciudad: se cierra con ×, tocando fuera o con Esc ---------- */ .ciu-bg{touch-action:none;overscroll-behavior:contain} .ciu{position:relative} .ciu .ux-x{position:absolute;top:4px;right:4px;width:44px;height:44px;min-height:44px;padding:0;margin:0; display:flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:transparent; font-family:'Cormorant Garamond',Georgia,serif;font-size:30px;line-height:1;color:#5C4C37;cursor:pointer} .ciu .ux-x:hover{background:rgba(44,38,31,.08);color:#2C261F} .ciu .ux-x:focus-visible{outline:2px solid #2C261F;outline-offset:-4px} .ciu h3{padding:0 36px} /* ---------- H7 · lo que flota se aparta cuando pasa un botón de compra por debajo ---------- */ .ux-aparta{opacity:0!important;visibility:hidden!important;pointer-events:none!important; transition:opacity .18s ease,visibility 0s .18s!important} /* ---------- H11 · blancos táctiles >= 44 px (en cualquier pantalla) ---------- */ .pcard .add{min-height:44px} /* tienda: «Agregar» 78x42 */ .iadd,#addCopita,#addVaso,.chips button,#backlink{min-height:44px} /* recetario */ .iadd,#addCopita,#addVaso{box-sizing:border-box} #backlink{display:inline-flex;align-items:center} .mlt-rem{min-height:44px;min-width:44px} /* maleta: «Quitar» 58x28 */ .vskip{display:inline-flex;align-items:center;min-height:44px;font-size:14px} /* mapa: «Saltar» y «Volver arriba» */ .ns-cta{display:inline-flex;align-items:center;min-height:44px} .pcx{width:44px;height:44px;top:0;right:6px;display:flex;align-items:center;justify-content:center;padding:0} /* recetario: × de la postal 17x29 */ .cePop-bg .cePop-stp button{width:44px;height:44px} /* «Pruébala primero»: ± de 32 px */ .cePop-bg .cePop-ln{grid-template-columns:minmax(0,1fr) auto auto} .alt{display:inline-flex;align-items:center;min-height:44px} /* ---------- H11 · textos de lectura >= 14 px (celular y tableta) ---------- */ @media (max-width:820px){ .pcard .lugar{font-size:14px;letter-spacing:.4px} /* tienda: «Shikoku, Japón» */ .pcard .nota{font-size:14px} .sechead .num,.sechead .cnt{font-size:14px} .mk.flat{font-size:14px} .iadd,#addCopita,#addVaso,.iany,.flabel,.iname .tag,.shead .num,.merchshow .mk,.iname .num{font-size:14px} /* recetario */ .mlt-rem{font-size:14px} .promo i,.nia-sello,.sello-clasico,summary .mk{font-size:14px!important} .vskip.flat{min-height:55px} /* .flat aplana 0,8 en Y: 55 px se ven como 44 */ .vskip-group{flex-direction:row;flex-wrap:wrap;justify-content:flex-end;gap:8px} /* en fila: dos de 44 px apilados tapaban el botón de la postal */ /* inicio y atlas (las postales del mapa, .pf-back, NO se tocan: su texto está medido en vw y se saldría del papel) */ .scard .sk,.scard .tag,.pcard .tag,.rrec .rk,.rrec .rl,.rrec .rn,.rrec .ro,.pcard.pinfo .vb,.voz footer,.exp-merch span, .coords-bg,.car-hint,.vhint,.viajar-intro .baja,.snav .snav-label,.nosotros .ns-cta, .sabores .shead p.rinde,.sabores .shead p.rinde span,.vbottle .tag{font-size:14px} } /* ---------- H11 (remate) · lo que quedaba bajo 14 px en celular ---------- */ .rk .flat,.shead .rl span,.mlt-sug .t,.mlt-chip span i,#trackForm label{font-size:14px} .mlt-promo i,#cjxPromo i{font-size:14px!important} /* caja.js lo trae a 12,5 px en línea */ .pcard.pinfo .vk i,.pcard.pfoto .pf-back .fx i{font-style:normal} /* ---------- H11 (remate) · el mapa del viaje en celular ---------- REGRESIÓN que se corrige aquí: al subir la receta de la postal a 14 px la postal creció y se metía bajo la barra (en 390x664 tapaba el rótulo del destino y la foto; en 360x640 la foto desaparecía). Ahora la postal tiene techo: nunca pasa de la barra, y lo que cede es la foto (se recorta, no se deforma). La receta no se achica. */ @media (max-width:820px){ .pcard.pinfo{display:flex;flex-direction:column;align-items:flex-start; max-height:calc(100svh - 222px - env(safe-area-inset-bottom))} .pcard.pinfo>*{flex:0 0 auto} .pcard.pinfo .rph{flex:0 1 auto;align-self:stretch;min-height:52px} .pcard.pinfo .vk{font-size:14px;letter-spacing:.02em;line-height:1.2} .pcard.pinfo .vb{line-height:1.4;margin-bottom:9px} /* reverso de la foto: 14 px de lectura (antes 10,3 y «toca para volver» a 7,8). El nombre del sirope ya está en el rótulo y en la postal de al lado: aquí solo queda la instrucción. */ .pcard.pfoto .pf-back{justify-content:flex-start;padding:9px 8px 0 10px} .pcard.pfoto .pf-back h4{font-size:15.5px;line-height:1.08;margin:0 0 3px} .pcard.pfoto .pf-back p{font-size:14px;line-height:1.15} .pcard.pfoto .pf-back .fx{font-size:14px;letter-spacing:0;margin-top:5px;line-height:1.1;opacity:1;white-space:nowrap} .pcard.pfoto .pf-back .fx i{display:none} .pcard.pfoto.flip .pf-hint{opacity:0} } @media (max-width:389px){ .pcard.pfoto .pf-back .fx{letter-spacing:-.25px} } @media (max-width:374px){ .pcard.pfoto .pf-back .fx{display:none} } /* no cabe sin meterse bajo la botella */ /* celulares bajos: la postal llega hasta la barra, así que el rótulo del destino se corre a la izquierda (sobre la foto del lugar) para que se lea entero, y la etiqueta de la receta deja el nombre que ya dice el rótulo */ @media (max-width:820px) and (max-height:819px){ .pcard.pinfo{bottom:0;padding:11px 12px 12px;max-height:calc(100svh - 219px - env(safe-area-inset-bottom))} .pcard.pinfo .rph{margin-bottom:8px} .pcard.pinfo .vk{margin-bottom:6px} .pcard.pinfo .vk i{display:none} .pcard.pinfo .add{padding-top:8px;padding-bottom:8px} .vref{left:8px;font-size:19px;padding:7px 13px;transform:translateY(-8px)} .vref.on{transform:none} } @media (max-width:374px) and (max-height:819px){ .pcard.pinfo{width:57%} .vref{font-size:17.5px;padding:7px 10px} } /* ---------- H11 (remate) · escritorio: los mismos textos de lectura a 14 px ---------- La portada del inicio y el formulario de pago no entran (están medidos al píxel y en revisión aparte). */ @media (min-width:821px){ .pcard .lugar{font-size:14px;letter-spacing:.4px} .pcard .nota,.sechead .num,.sechead .cnt, .iadd,.iany,.flabel,.iname .tag,.shead .num,.merchshow .mk,.mlt-rem, .scard .sk,.scard .tag,.vbottle .tag,.rrec .rk,.rrec .rl,.rrec .rn,.rrec .ro, .pcard.pinfo .vb,.pcard.pinfo .vk,.pcard.pfoto .pf-back .fx, .voz footer,.exp-merch span,.car-hint,.vhint,.viajar-intro .baja,.snav .snav-label,.nosotros .ns-cta, .sabores .shead p.rinde,.sabores .shead p.rinde span{font-size:14px} .promo i,.nia-sello,.sello-clasico,summary .mk{font-size:14px!important} } /* ───────── Mapa del viaje (Diego, 7-oct): el nombre de la referencia nunca queda detrás de las postales, y cada botella lleva su ficha de capacidad (510 ml · 17 bebidas · 3 L de soda). ───────── */ .vref{z-index:9} .vbottle .ficha{position:absolute;top:calc(100% - 4px);left:50%;translate:-50% 0;rotate:2deg;display:flex;flex-direction:column; align-items:center;gap:1px;white-space:nowrap;padding:6px 10px 5px;background:#efe6d2 url('../img/papel-postal.webp') center/cover; border:1px solid rgba(92,76,55,.38);box-shadow:0 4px 10px rgba(44,38,31,.22);color:#2C261F; font-family:'Archivo Narrow',Arial,sans-serif;text-transform:uppercase;letter-spacing:.9px;line-height:1.25} .vbottle .ficha b{font-size:14px;font-weight:600;letter-spacing:1.2px} .vbottle .ficha i{font-style:normal;font-size:12px;color:#5C4C37} /* ───────── Recetas del mapa: jerarquía tipográfica (Diego, 7-oct). Antes era un solo párrafo a máquina de 10,5–12 px. Ahora: nombre grande · ingredientes en lista (cantidad en Archivo Narrow, ingrediente en Cormorant) · preparación aparte. Mismas palabras, misma secuencia. ───────── */ .pcard.pinfo h3{font-size:26px;line-height:1.05;margin:0 0 7px} .pcard.pinfo .ving{list-style:none;margin:0 0 7px;padding:0;align-self:stretch; font-family:'Cormorant Garamond',Georgia,serif;font-size:17px;line-height:1.2;color:#2C261F} .pcard.pinfo .ving li{display:grid;grid-template-columns:3.2em 1fr;column-gap:7px;align-items:baseline;padding:3.5px 0; border-bottom:1px solid rgba(92,76,55,.22)} .pcard.pinfo .ving b{font-family:'Archivo Narrow',Arial,sans-serif;font-weight:600;font-size:14.5px;letter-spacing:.3px;white-space:nowrap} .pcard.pinfo .ving small{font-size:.84em;font-style:italic;color:#5C4C37} .pcard.pinfo .vmet{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:15.5px;line-height:1.25; color:#5C4C37;margin:0 0 10px} .pcard.pinfo .add{align-self:stretch} @media (min-width:960px){ /* la ficha de la botella en dos renglones */ .vbottle .ficha{flex-direction:row;flex-wrap:wrap;justify-content:center;column-gap:7px;width:max-content;max-width:190px;padding:7px 13px 6px;left:40%} .vbottle .ficha b{flex-basis:100%;text-align:center;font-size:15px} .vbottle .ficha i{font-size:12.5px} .vbottle .ficha i+i::before{content:"· ";} .vbottle{bottom:calc(3% + 40px)} /* la postal de la receta tiene techo (no tapa el nombre ni se mete bajo la barra): lo que cede es la foto */ .pcard.pinfo{display:flex;flex-direction:column;align-items:flex-start;max-height:calc(97.6svh - 286px)} .pcard.pinfo>*{flex:0 0 auto} .pcard.pinfo .rph{flex:0 1 auto;align-self:stretch;min-height:64px} .pcard.pinfo .vk{font-size:11.5px} .pcard.pinfo h3{font-size:33px;margin:2px 0 10px} .pcard.pinfo .ving{font-size:19px;margin-bottom:10px} .pcard.pinfo .ving li{grid-template-columns:3.5em 1fr;padding:5px 0} .pcard.pinfo .ving b{font-size:15.5px} .pcard.pinfo .vmet{font-size:17px;margin-bottom:12px} } @media (min-width:960px) and (max-height:800px){ /* ventanas bajas de escritorio (portátil con barra de marcadores ≈ 615–700 px): el lienzo baja, la lista va a dos columnas y ceden las FOTOS, nunca el texto */ .vstop{bottom:calc(84px + env(safe-area-inset-bottom))} .pcard.pinfo{max-height:calc(97.6svh - 218px)} .pcard.pinfo h3{font-size:28px;margin-bottom:6px} .pcard.pinfo .ving{display:grid;grid-template-columns:1fr 1fr;column-gap:22px;margin-bottom:7px} .pcard.pinfo .ving li{padding:3px 0} .pcard.pinfo .vmet{margin-bottom:10px} .pcard.pfoto .ph{aspect-ratio:auto;height:clamp(170px,calc(97.6svh - 284px),358px)} .pcard.pinfo .rph{min-height:34px} .vbottle{width:clamp(96px,calc((97.6svh - 280px) / 2.41),150px);bottom:calc(3% + 44px)} } @media (max-width:820px){ .pcard.pinfo .ving li{grid-template-columns:2.75em 1fr} .pcard.pinfo .rph{min-height:40px} } @media (max-width:820px) and (max-height:700px){ /* celulares bajos: la receta más larga (5 ingredientes) también cabe sin salirse de la postal */ .pcard.pinfo h3{font-size:24px;margin-bottom:5px} .pcard.pinfo .ving{font-size:16px;margin-bottom:6px} .pcard.pinfo .ving li{padding:2.5px 0} .pcard.pinfo .vmet{font-size:14.5px;line-height:1.2;margin-bottom:8px} } /* ───────── «El equipaje del viajero» y lo de abajo: letra más grande (Diego, 7-oct: «la letra es muy chiquita») ───────── */ .equipaje h2{margin-bottom:26px} .eq{padding:15px 16px;gap:15px} .eq img{width:54px;height:68px} .eq .tx{line-height:1.2} .eq .tx b{font-size:21px} .eq .tx span{font-size:16.5px;color:#5C4C37;display:block;margin-top:3px} .eq .add{font-size:17px;padding:11px 18px} .bitacora a{font-size:22px;padding:17px 2px} @media (min-width:960px){ .equipaje{max-width:900px} .eq{padding:20px 24px;gap:24px} .eq img{width:76px;height:96px} .eq .tx b{font-size:27px} .eq .tx span{font-size:20px} .eq .add{font-size:19px;padding:13px 24px;min-height:52px} .bitacora{max-width:640px} .bitacora a{font-size:25px;padding:19px 2px} } @media (max-width:374px) and (max-height:700px){ .pcard.pinfo .rph{min-height:24px} } /* 360×640 con la receta más larga */ /* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════ SISTEMA — auditoría del dueño (9-oct-2026), unidad S. Hallazgos 1 (flotantes), 5 (tipografía) y 7 (una sola casa). El papel con fibra se queda. Ningún color ni tipografía nuevos. Las hojas d-*.css van DESPUÉS y pueden afinar. ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */ /* ---------- H7 · UN encabezado: firma real · Tienda · Recetario · Preguntas (≥1024) · Mi maleta · menú ---------- Marcado: