/* Versión elegida: "Estándar" con la paleta del punto de venta (verde del viverito, crema y terracota). */
@font-face { font-family: "Figtree"; src: url(../fonts/figtree-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Figtree"; src: url(../fonts/figtree-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Figtree"; src: url(../fonts/figtree-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Figtree"; src: url(../fonts/figtree-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Figtree"; src: url(../fonts/figtree-latin-800-normal.woff2) format("woff2"); font-weight: 800; font-display: swap; }

:root {
  /* los mismos colores del POS */
  --verde: #2f5d46; --verde-2: #264d3a; --venta: #1e6b45; --venta-bg: #e5f1e7;
  --crema: #f4f1ea; --papel: #fffdf8; --papel-2: #f8f5ee; --tierra: #a4521f; --tierra-bg: #fbecd9; --agua: #2f6f8f; --agua-bg: #e3eff4;
  --bg: var(--crema); --ink: #1d2a22; --muted: #5f6a5f; --line: #e3ddcf; --card: var(--papel);
  --accent: var(--verde); --accent-ink: var(--crema); --ok: var(--venta); --ok-bg: var(--venta-bg); --soon: var(--tierra); --soon-bg: var(--tierra-bg);
  --font-body: "Figtree", system-ui, sans-serif; --font-display: "Figtree", system-ui, sans-serif;
  --radius: 16px;
}
body { font-size: 1.05rem; }
::selection { background: var(--verde); color: var(--crema); }
.sign-name, .pname, .order-h, .msg h1 { font-weight: 800; letter-spacing: -.025em; }
.ribbon { font-size: 1.3rem; font-weight: 800; letter-spacing: -.015em; color: var(--verde); }

/* encabezado: la barra verde del POS */
.top { background: var(--verde); color: var(--crema); position: sticky; top: 0; z-index: 30; box-shadow: 0 6px 18px -12px rgba(29,42,34,.6); }
.brand-mark { color: #b9dcc3; }
.brand-name { font-weight: 800; font-size: 1.15rem; letter-spacing: -.01em; }
.nav a { border-radius: 99px; font-weight: 600; color: rgba(244,241,234,.82); }
.nav a.on, .nav a:hover { color: var(--verde); background: var(--crema); }
.nav-cart b { background: var(--venta-bg); color: var(--venta); border-radius: 99px; }
.nav a.on b { background: var(--venta); color: #fff; }

/* portada: una franja verde de punta a punta con el cartel del retiro */
main > .hero { position: relative; overflow: hidden; color: var(--crema); background: var(--verde);
  width: 100%; margin-inline: 0; padding-block: clamp(26px, 6vw, 60px) clamp(40px, 7vw, 76px);
  padding-inline: max(var(--gap), calc((100% - var(--wrap)) / 2)); } /* franja de punta a punta; el contenido sigue alineado */
.hero::after { content: ""; position: absolute; left: -10%; right: -10%; bottom: 0; height: clamp(26px, 5vw, 54px); background: var(--crema); border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.sign { display: grid; gap: 16px; align-content: center; justify-items: center; text-align: center; position: relative; z-index: 1; }
.sign-name { font-size: clamp(2.5rem, 8.5vw, 4.6rem); line-height: 1; color: var(--crema); }
.sign-intro { font-size: 1.15rem; color: #d5e4d8; }
.board { position: relative; z-index: 1; background: var(--papel); color: var(--ink); border-radius: var(--radius); padding: 22px clamp(18px, 4vw, 28px); display: grid; gap: 10px; align-content: start;
  box-shadow: 0 18px 40px -22px rgba(0,0,0,.55); }
.board .ribbon { font-size: 1.05rem; display: flex; align-items: center; gap: 8px; }
.board-rows li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.board-rows li:last-child { border-bottom: 0; }
.b-day { font-weight: 700; text-transform: capitalize; }
.b-hours { color: var(--venta); font-weight: 700; background: var(--venta-bg); padding: 3px 10px; border-radius: 99px; }
.board-note { color: var(--muted); font-size: .94rem; }

/* catálogo */
.shop { padding-top: 8px; }
.search { background: var(--papel); border: 1px solid var(--line); border-radius: 99px; padding: 0 18px; color: var(--muted); }
.search:focus-within { border-color: var(--verde); box-shadow: 0 0 0 3px rgba(47,93,70,.16); }
.chip { background: var(--papel); border: 1px solid var(--line); border-radius: 99px; font-weight: 600; color: var(--muted); }
.chip:hover { border-color: var(--verde); color: var(--verde); }
.chip.on { background: var(--verde); border-color: var(--verde); color: var(--crema); }
.card { background: var(--card); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(29,42,34,.05), 0 10px 24px -16px rgba(29,42,34,.3); transition: transform .3s cubic-bezier(.2, .9, .2, 1), box-shadow .3s, border-color .3s; }
.card:hover { transform: translateY(-3px); border-color: #cfc6b2; box-shadow: 0 2px 4px rgba(29,42,34,.06), 0 20px 34px -18px rgba(29,42,34,.38); }
.card .ph { background: var(--papel-2); }
.ph-none { color: var(--verde); }
.nm { font-size: 1.05rem; }
.price { font-size: 1.2rem; font-weight: 800; color: var(--venta); }
.tag { border-radius: 99px; }
.cm-light { color: var(--tierra); }
.cm-water { color: var(--agua); }

/* ficha */
.back { color: var(--verde); font-weight: 700; background: var(--papel); border: 2px solid var(--verde); border-radius: 99px; }
.back:hover, .back:focus-visible { background: var(--verde); color: var(--crema); }
.cbar { background: var(--papel); border-top: 1px solid var(--line); box-shadow: 0 -10px 24px -14px rgba(29,42,34,.45); }
.cbar-t .i { color: var(--venta); }
.sheet { background: var(--papel); color: var(--ink); border-radius: 22px 22px 0 0; box-shadow: 0 -18px 40px -20px rgba(0,0,0,.5); }
@media (min-width: 640px) { .sheet { border-radius: 22px; } }
.sheet h2 { color: var(--verde-2); font-weight: 800; }
.sheet h2 .i { color: var(--venta); }
.pimg { border-radius: var(--radius); background: var(--papel-2); }
.pname { font-size: clamp(2.1rem, 7vw, 3.2rem); line-height: 1.04; color: var(--verde-2); }
.pmeta .price { font-size: 1.8rem; }
.care { background: var(--papel); border-radius: var(--radius); padding: 20px clamp(16px, 4vw, 26px) 8px; border: 1px solid var(--line); }
.ci { grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; border-bottom: 1px solid var(--line); }
.ci:last-child { border-bottom: 0; }
.ci dt { display: contents; }
.ci dt > .i { grid-row: span 3; width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: var(--venta-bg); color: var(--verde); }
.ci-light dt > .i { background: var(--tierra-bg); color: var(--tierra); }
.ci-water dt > .i { background: var(--agua-bg); color: var(--agua); }
.ci-pets dt > .i { background: var(--tierra-bg); color: var(--tierra); }
.ci dt > span { font-weight: 800; align-self: end; }
.ci dt .lvl, .ci dd { grid-column: 2; }
.ci-light .scale { color: var(--tierra); }
.ci-water .scale { color: var(--agua); }
.add { background: var(--venta-bg); border-radius: var(--radius); padding: 16px; }
.qty { border: 1px solid #c9d9cc; border-radius: 99px; background: var(--papel); }
.btn { border-radius: 99px; background: var(--papel); border: 1px solid var(--line); color: var(--ink); }
.btn.go { background: var(--venta); border-color: var(--venta); color: #fff; font-size: 1.05rem; }
.btn.go:hover { background: #18573a; }
.gift .i { color: var(--tierra); }
.add-note .i { color: var(--verde); }

/* pedido */
.order-h { font-size: clamp(2rem, 7vw, 2.8rem); color: var(--verde-2); }
.lines .ol { background: var(--papel); border-radius: var(--radius); border: 1px solid var(--line); padding: 4px 16px; }
.oli { border-bottom: 1px solid var(--line); }
.oli:last-child { border-bottom: 0; }
.oli-ph { border-radius: 10px; background: var(--papel-2); color: var(--verde); }
.oli-sub .i { color: var(--tierra); }
.tot { background: var(--verde); color: var(--crema); border-radius: var(--radius); padding: 18px 20px; }
.tot-main b { color: #fff; font-size: 1.6rem; }
.tot p:not(.tot-main) { color: #d5e4d8; }
.when, .who, .pay { background: var(--papel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px clamp(16px, 4vw, 24px); }
.when .ribbon, .who .ribbon, .pay .ribbon { font-size: 1.1rem; }
.when .i { color: var(--verde); }
.f input, .f textarea { background: #fff; border: 1px solid #d6cfbd; border-radius: 12px; }
.f input:focus, .f textarea:focus { border-color: var(--verde); box-shadow: 0 0 0 3px rgba(47,93,70,.16); outline: none; }
.opt { border: 1px solid var(--line); border-radius: 12px; }
.opt:has(input:checked) { border-color: var(--verde); background: var(--venta-bg); }
.err { border-radius: 12px; }
.done-in > .i { color: var(--venta); }
.empty-order > .i { color: var(--verde); }

/* pie verde, como el encabezado */
.foot { background: var(--verde); color: #d5e4d8; margin-top: 28px; }
.foot-name { font-weight: 800; color: var(--crema); font-size: 1.1rem; }
.foot a { color: var(--crema); }
.foot .i { color: #b9dcc3; }
#toast { background: var(--ink); color: #fff; border-radius: 14px; box-shadow: 0 14px 30px -10px rgba(29,42,34,.45); }
#toast .i, #toast a { color: #b9dcc3; }
@media (max-width: 559px) { .nav a.nav-cart { color: var(--crema); } .nav a.nav-cart.on { color: var(--verde); } }
/* celular angosto: con productos en el pedido, el botón queda en ícono + cantidad para que entre el nombre completo */
@media (max-width: 400px) { .nav-cart:has(#cart-n:not([hidden])) span { display: none; } .brand-name { font-size: 1.08rem; } }

/* manual de cuidados: el agradecimiento de Panchita en el verde del viverito */
.thanks { background: var(--verde); color: var(--crema); border-radius: var(--radius); box-shadow: 0 18px 40px -24px rgba(0,0,0,.55); }
.thanks-mark { background: var(--crema); color: var(--verde); }
.thanks-h { color: var(--crema); font-weight: 800; letter-spacing: -.02em; }
.thanks p { color: #d5e4d8; }
.thanks-sign { color: var(--crema) !important; }
.m-img { border-radius: var(--radius); background: var(--papel-2); border: 1px solid var(--line); }
.m-img .ph-none { color: var(--verde); }
.m-name { color: var(--verde-2); font-weight: 800; letter-spacing: -.025em; }
.m-help { background: var(--venta-bg); border-radius: var(--radius); padding: 20px clamp(16px, 4vw, 26px); }

/* logo del viverito (Panchi entre hojas y ladrillos) */
.brand-logo { width: 44px; height: 44px; border-radius: 50%; }
.sign-logo { width: clamp(132px, 38vw, 230px); height: auto; border-radius: 50%; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .3)); }
/* el logo va centrado arriba del nombre, en celular y en compu */