/* ZOI · catálogo
   Colores sobrescritos desde js/config.js; los valores de aquí son el respaldo. */
:root {
  --ivory: #FBF8F2;
  --sand: #F1E9DC;
  --champagne: #C9A063;
  --gold-deep: #7D5726;
  --espresso: #1B1611;

  --ink: var(--espresso);
  --muted: #4A413A;
  --line: color-mix(in srgb, var(--champagne) 45%, transparent);
  --wa: #1F7A4D;

  --display: 'Playfair Display', Georgia, serif;
  --sans: 'Lato', 'Segoe UI', system-ui, sans-serif;
  --gutter: clamp(1rem, .6rem + 2vw, 2.5rem);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth; scroll-padding-top: 5rem; -webkit-text-size-adjust: 100%;
  /* El fondo de la página (y lo que Safari muestra bajo su barra flotante) es el
     color del pie; el crema lo pinta el body. */
  background: var(--espresso);
}
/* Safari en iPhone toma el color del body para el área bajo su barra flotante:
   body oscuro como el pie, y el crema va en el contenido. */
body {
  margin: 0;
  background: var(--espresso);
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: lining-nums;
}
[hidden] { display: none !important; }
main { background: var(--ivory); }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, dl, dd { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 1px solid var(--gold-deep); outline-offset: 4px; }

.wrap { width: min(100% - 2 * var(--gutter), 1240px); margin-inline: auto; }

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 50;
  padding: .6rem 1rem; background: var(--espresso); color: var(--ivory);
}
.skip:focus { top: 1rem; }

/* Etiquetas en versalitas espaciadas: botones, navegación, filtros */
.btn, .nav-left a, .wa-link span, .filter, .card-order, .sold-tag, .dialog-category {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
}

/* ---------- Botones ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: .85rem 2rem;
  font-size: .8125rem; line-height: 1;
  text-decoration: none; cursor: pointer; border-radius: 0;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn-dark { background: var(--espresso); color: var(--ivory); border: 1px solid var(--espresso); }
.btn-dark:hover { background: transparent; color: var(--espresso); }

/* ---------- Encabezado ---------- */

.site-header {
  position: sticky; top: 0; z-index: 20;
  background: var(--ivory);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 4.5rem; }
.brand { grid-column: 2; }
.brand img { height: 32px; width: auto; }
.nav-left { display: none; gap: 2rem; }
.nav-left a, .wa-link span { font-size: .8125rem; text-decoration: none; }
.nav-left a { padding-block: .35rem; background: linear-gradient(var(--champagne), var(--champagne)) 0 100% / 0 1px no-repeat; transition: background-size .4s var(--ease); }
.nav-left a:hover { background-size: 100% 1px; }
.nav-right { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: .25rem; }
.icon-link { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-width: 2.75rem; height: 2.75rem; text-decoration: none; }
.icon-link:hover { color: var(--gold-deep); }
.wa-link span { display: none; }
@media (min-width: 860px) {
  .header-inner { min-height: 5.25rem; }
  .brand img { height: 40px; }
  .nav-left { display: flex; grid-column: 1; grid-row: 1; }
  .wa-link { padding-left: .75rem; }
  .wa-link span { display: inline; }
}

/* ---------- Portada ---------- */

.hero { border-bottom: 1px solid var(--line); }
.hero-inner { display: grid; }
.hero-media { order: -1; height: clamp(280px, 62vw, 420px); overflow: hidden; background: var(--sand); }
.hero-photo { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.hero-copy {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 2.5rem var(--gutter) 3rem;
}
.hero-copy::before {
  /* filete dorado con rombo */
  content: ''; width: 5.5rem; height: 9px; margin-bottom: 1.5rem;
  background: var(--champagne);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 9'%3E%3Cpath d='M0 4h36v1H0zM52 4h36v1H52zM44 0l4.5 4.5L44 9l-4.5-4.5z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 9'%3E%3Cpath d='M0 4h36v1H0zM52 4h36v1H52zM44 0l4.5 4.5L44 9l-4.5-4.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.hero-copy h1 {
  font: 500 clamp(2rem, 1.5rem + 2.4vw, 3.25rem)/1.15 var(--display);
  max-width: 14ch; text-wrap: balance;
}
.hero-copy p { margin: 1.1rem 0 2rem; max-width: 30em; color: var(--muted); font-size: 1.125rem; }
@media (min-width: 860px) {
  .hero-inner { grid-template-columns: 1fr 1fr; min-height: 520px; height: min(68vh, 600px); }
  .hero-media { order: 0; height: auto; }
  .hero-copy { justify-content: center; padding: 3rem 4rem; }
}

/* ---------- Colección ---------- */

.collection { padding-block: clamp(3rem, 2.4rem + 3vw, 5rem); }
.section-title {
  font: 500 clamp(2rem, 1.6rem + 1.6vw, 2.75rem)/1.1 var(--display);
  text-align: center;
}
.filters {
  display: flex; justify-content: center; flex-wrap: wrap; gap: .25rem 1.75rem;
  margin: 1.5rem 0 .5rem;
}
.filter {
  padding: .6rem 0; border: 0; background: none; cursor: pointer;
  font-size: .8125rem; color: var(--muted);
  border-bottom: 1px solid transparent;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.filter:hover { color: var(--ink); }
.filter[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--champagne); }
.grid-status { text-align: center; color: var(--muted); font-size: .9375rem; margin-bottom: 2rem; }
.grid-status.is-error { color: #9A3412; font-style: normal; }

.grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem .75rem;
}
@media (min-width: 760px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3.5rem 1.5rem; } }
@media (min-width: 1100px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.card { display: flex; flex-direction: column; align-items: center; text-align: center; animation: card-in .6s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes card-in { from { opacity: 0; } }

.card-media {
  position: relative; display: block; width: 100%; padding: 0; border: 0; cursor: pointer;
  aspect-ratio: 4 / 5; overflow: hidden; background: var(--sand);
}
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease), opacity .5s var(--ease); }
@media (hover: hover) { .card-media:hover img { transform: scale(1.03); } }
img.is-fallback { object-fit: contain !important; padding: 25%; background: var(--sand); }
.card-media img:not(.is-loaded), .dialog-photo:not(.is-loaded) { opacity: 0; }

.sold-tag {
  display: inline-block; padding: .4rem .7rem;
  background: var(--ivory); color: var(--ink); border: 1px solid var(--line);
  font-size: .75rem; line-height: 1;
}
.card .sold-tag { position: absolute; top: .75rem; left: .75rem; }
.card.is-sold-out .card-media img { filter: grayscale(.5); opacity: .8; }

.card-info { margin-top: 1rem; }
.card-name { font: 500 1.0625rem/1.3 var(--display); }
.card-price { margin-top: .3rem; font-size: 1.0625rem; color: var(--gold-deep); }
.card.is-sold-out .card-price { color: var(--muted); }
@media (min-width: 760px) { .card-name { font-size: 1.1875rem; } }

.card-order {
  display: inline-flex; align-items: center; gap: .45rem;
  margin-top: .75rem; min-height: 2.5rem; padding: .5rem 1.1rem;
  border: 1px solid var(--line);
  font-size: .75rem; text-decoration: none;
  transition: border-color .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease);
}
.card-order::before {
  content: ''; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: var(--wa-icon) center / contain no-repeat; mask: var(--wa-icon) center / contain no-repeat;
}
.card-order:hover { border-color: var(--espresso); background: var(--espresso); color: var(--ivory); }
:root {
  --wa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2Zm0 18.2a8.2 8.2 0 0 1-4.2-1.2l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2Zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8-.2-.1-.4-.1-.6.1l-.8 1c-.1.2-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.3-.4.2-.4.7-1.3.1-.2 0-.3 0-.4l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.3 3 3 0 0 0-.9 2.2 5.2 5.2 0 0 0 1.1 2.7 11.8 11.8 0 0 0 4.5 4c1.7.7 2.3.8 3.2.6.5-.1 1.5-.6 1.7-1.2.2-.6.2-1.1.2-1.2-.1-.1-.3-.2-.5-.3Z'/%3E%3C/svg%3E");
}

/* ---------- Nosotros y contacto ---------- */

.info { background: var(--sand); padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem); }
.info-inner { display: grid; gap: 3.5rem; }
.info-block h2 { font: 500 1.75rem/1.2 var(--display); margin-bottom: 1.25rem; }
.info-block p { max-width: 36em; }
.info-block .greek { margin: -.6rem 0 1.1rem; font: 500 1.5rem/1 var(--display); color: var(--gold-deep); letter-spacing: .06em; }
.info-block p + p { margin-top: 1rem; }
.contact-list { display: grid; margin-bottom: 1.75rem; border-top: 1px solid var(--line); }
.contact-list div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--line); }
.contact-list dt { color: var(--muted); }
.contact-list dd { overflow-wrap: anywhere; }
.contact-list a { text-decoration-color: var(--champagne); text-underline-offset: .25em; }
.contact-list a:hover { color: var(--gold-deep); }
#contacto .btn { display: flex; width: fit-content; margin-inline: auto; }
@media (min-width: 900px) {
  .info-inner { grid-template-columns: 1fr 1fr; gap: 6rem; }
  #contacto .btn { display: inline-flex; margin-inline: 0; }
}

/* ---------- Pie ---------- */

.site-footer {
  background: var(--espresso); color: #E9E1D4;
  padding-block: 3.5rem calc(2.5rem + env(safe-area-inset-bottom));
}
.footer-inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .6rem; }
.footer-inner img { width: 38px; margin-bottom: .75rem; }
.footer-tagline { font: 500 1.125rem/1.3 var(--display); }
.footer-inner a { text-underline-offset: .25em; text-decoration-color: var(--champagne); }
.footer-inner a:hover { color: var(--champagne); }
.footer-copy { margin-top: 1.5rem; font-size: .9375rem; opacity: .7; }
.site-footer :focus-visible { outline-color: var(--champagne); }

/* ---------- Detalle de producto ---------- */

.product-dialog {
  width: min(100% - 1.5rem, 960px); max-height: calc(100dvh - 1.5rem);
  padding: 0; border: 0; background: var(--ivory); color: var(--ink);
  box-shadow: 0 30px 70px -25px rgba(27, 22, 17, .5);
}
.product-dialog::backdrop { background: rgba(27, 22, 17, .6); }
.product-dialog[open] { animation: dialog-in .35s var(--ease); }
.product-dialog[open]::backdrop { animation: fade-in .35s var(--ease); }
@keyframes dialog-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes fade-in { from { opacity: 0; } }

.dialog-inner { position: relative; display: grid; }
.dialog-close {
  position: absolute; top: .6rem; right: .6rem; z-index: 1;
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
  border: 0; background: color-mix(in srgb, var(--ivory) 90%, transparent); cursor: pointer;
}
.dialog-close:hover { color: var(--gold-deep); }
.dialog-media { position: relative; background: var(--sand); }
.dialog-photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; max-height: 58dvh; transition: opacity .35s var(--ease); }
.product-dialog.is-sold-out .dialog-photo { filter: grayscale(.5); }
.dialog-thumbs { position: absolute; left: .75rem; bottom: .75rem; display: flex; gap: .4rem; }
.dialog-thumbs:empty { display: none; }
.dialog-thumbs button {
  width: 3rem; padding: 0; border: 1px solid transparent; overflow: hidden; cursor: pointer;
  background: var(--ivory); opacity: .7; transition: opacity .2s, border-color .2s;
}
.dialog-thumbs button[aria-pressed="true"] { border-color: var(--ivory); opacity: 1; }
.dialog-thumbs img { aspect-ratio: 4 / 5; object-fit: cover; }

.dialog-body { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .6rem; padding: 2rem var(--gutter) 2.25rem; }
.dialog-category { font-size: .75rem; color: var(--gold-deep); }
.dialog-title { font: 500 clamp(1.625rem, 1.4rem + 1vw, 2.125rem)/1.2 var(--display); }
.dialog-price { display: flex; align-items: center; gap: .75rem; font-size: 1.25rem; color: var(--gold-deep); }
.dialog-desc { color: var(--muted); max-width: 30em; margin-top: .4rem; }
.dialog-order { margin-top: 1.25rem; }

@media (min-width: 760px) {
  .dialog-inner { grid-template-columns: 1fr 1fr; }
  .dialog-photo { max-height: none; height: 100%; }
  .dialog-body { justify-content: center; padding: 3rem; }
}

/* ---------- Movimiento reducido ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}