/* ==========================================================================
   Avidis Gourmet · Estilos base del tema (móvil primero)
   Depende de tokens.css. Sin frameworks. Estructura pensada para portar a
   un tema WordPress/WooCommerce (ver DESIGN.md › "Paso a WooCommerce").
   ========================================================================== */

/* ---------- 1. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--c-crema);
  color: var(--c-tinta);
  font-family: var(--f-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
[hidden] { display: none !important; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--c-burdeos); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--c-burdeos-700); }
h1, h2, h3, h4 { font-family: var(--f-serif); font-weight: var(--fw-regular); line-height: var(--lh-tight); margin: 0 0 var(--sp-4); letter-spacing: -.005em; }
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); line-height: var(--lh-snug); }
p { margin: 0 0 var(--sp-4); }
:where(ul[role="list"], ol[role="list"]) { list-style: none; margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--c-foco); outline-offset: 3px; border-radius: var(--r-xs); }
.icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--sp-4); top: -100px; z-index: 100; background: var(--c-oro); color: var(--c-carbon); padding: var(--sp-2) var(--sp-4); border-radius: var(--r-sm); font-weight: var(--fw-semibold); }
.skip-link:focus { top: var(--sp-4); }

.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: calc(var(--container-narrow) + 2 * var(--gutter)); }
.section { padding-block: var(--section-y); }
.section--paper { background: var(--c-papel); }
.section--dark { background: var(--c-carbon); color: var(--c-crema-texto); }
.section--dark a:not(.btn) { color: var(--c-oro-claro); }
.section--burdeos { background: var(--c-burdeos); color: var(--c-crema-texto); }

/* Rótulo superior (eyebrow) en Cinzel, como los títulos del catálogo 2026 */
.eyebrow { display: inline-flex; align-items: center; gap: var(--sp-3); font-family: var(--f-display); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--c-burdeos); margin: 0 0 var(--sp-3); }
.eyebrow::before { content: ""; width: 1.75rem; height: 1px; background: currentColor; opacity: .7; }
.section--dark .eyebrow, .hero .eyebrow, .section--burdeos .eyebrow { color: var(--c-oro-claro); }
.section-head { max-width: 40rem; margin-bottom: var(--sp-7); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow::after { content: ""; width: 1.75rem; height: 1px; background: currentColor; opacity: .7; }
.section-head p { color: var(--c-tinta-suave); font-size: var(--fs-lg); }
.section--dark .section-head p { color: var(--c-crema-suave); }
.section-head--split { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--sp-4); max-width: none; }
.lema { font-family: var(--f-serif); font-style: italic; }
.pending { font-family: var(--f-sans); font-style: normal; font-size: .78em; font-weight: var(--fw-semibold); color: var(--c-aviso); background: #F7EBCF; padding: .05em .4em; border-radius: var(--r-xs); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.section--dark .pending, .site-footer .pending, .hero .pending { background: rgba(219, 193, 122, .15); color: var(--c-oro-claro); }

/* ---------- 2. Botones ---------- */
.btn { --btn-bg: var(--c-burdeos); --btn-fg: #fff; --btn-bd: var(--btn-bg);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 48px; padding: .75rem 1.5rem; border: 1px solid var(--btn-bd); border-radius: var(--r-sm);
  background: var(--btn-bg); color: var(--btn-fg); font-family: var(--f-sans); font-weight: var(--fw-semibold); font-size: var(--fs-sm); letter-spacing: .04em; text-transform: uppercase; text-decoration: none; cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.btn:hover { --btn-bg: var(--c-burdeos-700); color: var(--btn-fg); }
.btn:active { transform: translateY(1px); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--c-burdeos); --btn-bd: var(--c-burdeos); }
.btn--ghost:hover { --btn-bg: var(--c-burdeos); --btn-fg: #fff; }
.btn--light { --btn-bg: var(--c-crema-texto); --btn-fg: var(--c-carbon); }
.btn--light:hover { --btn-bg: #fff; --btn-fg: var(--c-carbon); }
.btn--outline-light { --btn-bg: transparent; --btn-fg: var(--c-crema-texto); --btn-bd: rgba(243, 235, 221, .55); }
.btn--outline-light:hover { --btn-bg: var(--c-crema-texto); --btn-fg: var(--c-carbon); --btn-bd: var(--c-crema-texto); }
.btn--whatsapp { --btn-bg: var(--c-whatsapp); }
.btn--whatsapp:hover { --btn-bg: #17603C; }
.btn--sm { min-height: 40px; padding: .5rem 1rem; font-size: var(--fs-xs); }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.link-arrow { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: var(--fw-semibold); font-size: var(--fs-sm); letter-spacing: .04em; text-transform: uppercase; text-decoration: none; }
.link-arrow .icon { transition: transform var(--t-fast) var(--ease); }
.link-arrow:hover .icon { transform: translateX(4px); }

/* ---------- 3. Barra superior + cabecera ---------- */
.topbar { background: var(--c-burdeos-900); color: var(--c-crema-texto); font-size: var(--fs-xs); }
.topbar .container { display: flex; justify-content: center; gap: var(--sp-5); padding-block: var(--sp-2); text-align: center; }
.topbar p { margin: 0; }
.topbar a { color: var(--c-oro-claro); }
.topbar__extra { display: none; }

.site-header { position: sticky; top: 0; z-index: var(--z-header); background: var(--c-carbon); color: var(--c-crema-texto); border-bottom: 1px solid var(--c-carbon-700); }
.site-header__inner { display: flex; align-items: center; gap: var(--sp-3); min-height: 64px; }
.brand { display: flex; align-items: center; margin-right: auto; }
.brand img { width: 168px; height: auto; }
.header-actions { display: flex; align-items: center; gap: var(--sp-1); }
.icon-btn { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: var(--r-pill); background: transparent; color: inherit; cursor: pointer; text-decoration: none; }
.icon-btn:hover { background: var(--c-carbon-800); color: var(--c-oro-claro); }
.icon-btn .icon { width: 22px; height: 22px; }
.cart-count { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: var(--r-pill); background: var(--c-burdeos); color: #fff; font-size: 11px; font-weight: var(--fw-semibold); line-height: 18px; text-align: center; }
.header-cta { display: none; }

.primary-nav { display: none; }
.js .nav-toggle { display: inline-grid; }
.nav-toggle { display: none; }
.primary-nav ul { list-style: none; margin: 0; padding: 0; }
.primary-nav li a { display: block; color: var(--c-crema-texto); text-decoration: none; font-size: var(--fs-sm); letter-spacing: .06em; text-transform: uppercase; }
.primary-nav li a:hover, .primary-nav li a[aria-current="page"] { color: var(--c-oro-claro); }

/* Menú móvil (cajón) */
.primary-nav.is-open { display: block; position: fixed; inset: 64px 0 0 0; z-index: var(--z-drawer); background: var(--c-carbon); padding: var(--sp-5) var(--gutter) var(--sp-7); overflow-y: auto; border-top: 1px solid var(--c-carbon-700); }
.primary-nav.is-open li { border-bottom: 1px solid var(--c-carbon-700); }
.primary-nav.is-open li a { padding: var(--sp-4) 0; font-family: var(--f-serif); font-size: var(--fs-xl); text-transform: none; letter-spacing: 0; }
.primary-nav__extra { margin-top: var(--sp-6); display: grid; gap: var(--sp-3); }
.no-scroll { overflow: hidden; }

/* ---------- 4. Hero ---------- */
.hero { position: relative; isolation: isolate; color: var(--c-crema-texto); background: var(--c-carbon); overflow: hidden; }
.hero__media { position: absolute; inset: 0; z-index: -1; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22,19,18,.35) 0%, rgba(22,19,18,.55) 45%, rgba(22,19,18,.94) 100%); }
.hero__content { min-height: min(88svh, 46rem); display: flex; flex-direction: column; justify-content: flex-end; padding-block: var(--sp-8) var(--sp-7); }
.hero h1 { max-width: 14ch; margin-bottom: var(--sp-4); }
.hero h1 em { color: var(--c-oro-claro); }
.hero__lead { max-width: 34rem; font-size: var(--fs-lg); color: #E4DACB; margin-bottom: var(--sp-6); }
.hero__note { margin: var(--sp-5) 0 0; font-size: var(--fs-sm); color: var(--c-crema-suave); }

/* Cabecera interior (tienda, contacto) */
.page-hero { background: var(--c-carbon); color: var(--c-crema-texto); padding-block: var(--sp-7) var(--sp-7); border-bottom: 1px solid var(--c-carbon-700); background-image: radial-gradient(ellipse at 85% 0%, rgba(137,28,57,.35), transparent 60%); }
.page-hero h1 { font-size: var(--fs-2xl); margin-bottom: var(--sp-2); }
.page-hero p { color: var(--c-crema-suave); max-width: 40rem; margin: 0; }
.breadcrumb { font-size: var(--fs-xs); margin-bottom: var(--sp-4); color: var(--c-crema-suave); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; margin: 0; padding: 0; }
.breadcrumb li + li::before { content: "/"; margin-right: var(--sp-2); opacity: .5; }
.breadcrumb a { color: var(--c-crema-suave); }
.breadcrumb a:hover { color: var(--c-oro-claro); }
.breadcrumb--light { color: var(--c-tinta-suave); margin-bottom: var(--sp-5); }
.breadcrumb--light a { color: var(--c-tinta-suave); }

/* ---------- 5. Franja de confianza ---------- */
.trust { background: var(--c-papel); border-bottom: 1px solid var(--c-piedra); }
.trust ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5) var(--sp-4); padding: var(--sp-6) var(--gutter); }
.trust p { margin: 0; }
.trust li { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--fs-sm); line-height: 1.35; }
.trust .icon { width: 28px; height: 28px; color: var(--c-burdeos); stroke-width: 1.3; }
.trust strong { display: block; font-weight: var(--fw-semibold); }
.trust span { color: var(--c-tinta-suave); }

/* ---------- 6. Categorías ---------- */
.cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
@media (max-width: 47.99em) {
  .cat-grid > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .cat-grid > li:last-child:nth-child(odd) .cat-card { aspect-ratio: 16 / 7; }
}
.cat-card { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--r-md); overflow: hidden; background: var(--c-carbon); color: var(--c-crema-texto); text-decoration: none; isolation: isolate; }
.cat-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.cat-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(22,19,18,.9)); z-index: 0; }
.cat-card__label { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: var(--sp-4); display: flex; justify-content: space-between; align-items: end; gap: var(--sp-2); }
.cat-card__label h3 { font-size: var(--fs-lg); margin: 0; }
.cat-card__label small { display: block; font-size: var(--fs-xs); color: var(--c-crema-suave); margin-top: 2px; }
.cat-card__label .icon { color: var(--c-oro-claro); transition: transform var(--t-fast) var(--ease); }
.cat-card:hover { color: var(--c-crema-texto); }
.cat-card:hover img { transform: scale(1.04); }
.cat-card:hover .icon { transform: translateX(4px); }

/* Marcador de posición para fotos pendientes */
.ph { position: relative; width: 100%; height: 100%; display: grid; place-items: center; align-content: center; gap: var(--sp-3); padding: var(--sp-4); text-align: center; color: var(--c-crema-suave);
  background: radial-gradient(ellipse at 50% 35%, #2C2523 0%, var(--c-carbon) 70%); }
.ph::before { content: ""; width: 56px; height: 56px; background: url("../img/emblema-crema.png") center / contain no-repeat; opacity: .28; }
.ph span { font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; max-width: 16ch; }
.ph--light { background: radial-gradient(ellipse at 50% 35%, #fff 0%, var(--c-piedra) 100%); color: var(--c-tinta-suave); }
.ph--light::before { background-image: url("../img/emblema-burdeos.png"); opacity: .25; }

/* ---------- 7. Tarjeta de producto (loop WooCommerce) ---------- */
.products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-3); list-style: none; margin: 0; padding: 0; }
.product-card { position: relative; display: flex; flex-direction: column; background: var(--c-papel); border: 1px solid var(--c-piedra); border-radius: var(--r-md); overflow: hidden; transition: box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease); }
.product-card:hover { box-shadow: var(--sh-2); border-color: var(--c-piedra-oscura); }
.product-card__media { position: relative; display: block; text-decoration: none; aspect-ratio: 4 / 5; background: #000; overflow: hidden; }
.product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.product-card:hover .product-card__media img { transform: scale(1.03); }
.badge { position: absolute; top: var(--sp-3); left: var(--sp-3); z-index: 1; padding: 3px 8px; border-radius: var(--r-xs); background: var(--c-crema-texto); color: var(--c-carbon); font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: .08em; text-transform: uppercase; }
.badge--burdeos { background: var(--c-burdeos); color: #fff; }
.badge--oro { background: var(--c-oro); color: var(--c-carbon); }
.product-card__body { display: flex; flex-direction: column; flex: 1; padding: var(--sp-3) var(--sp-3) var(--sp-4); }
.product-card__cat { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-tinta-suave); margin: 0 0 var(--sp-1); }
.product-card__title { font-family: var(--f-serif); font-size: 1.125rem; line-height: 1.2; margin: 0 0 var(--sp-1); }
.product-card__title a { color: var(--c-tinta); text-decoration: none; }
.product-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 0; } /* toda la tarjeta clicable */
.product-card__title a:hover { color: var(--c-burdeos); }
.product-card__meta { font-size: var(--fs-xs); color: var(--c-tinta-suave); margin: 0 0 var(--sp-3); }
.product-card__foot { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.price { margin: 0; font-family: var(--f-serif); font-size: 1.375rem; font-weight: var(--fw-semibold); color: var(--c-burdeos); line-height: 1; }
.price small { font-family: var(--f-sans); font-size: var(--fs-xs); font-weight: var(--fw-regular); color: var(--c-tinta-suave); }
.add-btn { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 .875rem; border: 1px solid var(--c-burdeos); border-radius: var(--r-sm); background: var(--c-burdeos); color: #fff; font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: background var(--t-fast) var(--ease); }
.add-btn:hover { background: var(--c-burdeos-700); }
.add-btn--ghost { background: transparent; color: var(--c-burdeos); }
.add-btn--ghost:hover { background: var(--c-burdeos-100); }
.add-btn.is-added { background: var(--c-exito); border-color: var(--c-exito); }
.add-btn .icon { width: 16px; height: 16px; }
.add-btn__text { display: none; }

/* ---------- 8. Bloques de la home ---------- */
.split { display: grid; gap: var(--sp-6); align-items: center; }
.split__media { border-radius: var(--r-md); overflow: hidden; background: var(--c-carbon); }
.split__media img { width: 100%; height: 100%; object-fit: cover; }

.audience { display: grid; gap: var(--sp-4); }
.audience-card { position: relative; padding: var(--sp-6) var(--sp-5); border-radius: var(--r-md); border: 1px solid var(--c-carbon-700); background: var(--c-carbon-800); }
.audience-card h3 { font-size: var(--fs-xl); margin-bottom: var(--sp-3); }
.audience-card p { color: var(--c-crema-suave); }
.audience-card ul { margin: 0 0 var(--sp-5); padding: 0; list-style: none; display: grid; gap: var(--sp-2); font-size: var(--fs-sm); }
.audience-card li { display: flex; gap: var(--sp-2); }
.audience-card li .icon { color: var(--c-oro); width: 18px; height: 18px; margin-top: 3px; }
.audience-card--pro { border-color: rgba(201,165,90,.45); background: linear-gradient(160deg, #2A1A1C 0%, var(--c-carbon-800) 60%); }

.services { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5) var(--sp-4); list-style: none; margin: 0; padding: 0; counter-reset: s; }
.services li { border-top: 1px solid var(--c-piedra-oscura); padding-top: var(--sp-4); counter-increment: s; }
.services li::before { content: counter(s, decimal-leading-zero); display: block; font-family: var(--f-display); font-size: var(--fs-xs); color: var(--c-burdeos); letter-spacing: .12em; margin-bottom: var(--sp-2); }
.services h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-1); }
.services p { font-size: var(--fs-sm); color: var(--c-tinta-suave); margin: 0; }

.values { display: grid; gap: var(--sp-5); list-style: none; margin: var(--sp-6) 0 0; padding: 0; }
.values li { display: flex; gap: var(--sp-4); }
.values .icon { width: 32px; height: 32px; color: var(--c-burdeos); stroke-width: 1.3; }
.values h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-1); }
.values p { margin: 0; color: var(--c-tinta-suave); font-size: var(--fs-sm); }

.brands { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3) var(--sp-6); margin: 0; padding: var(--sp-6) 0 0; list-style: none; border-top: 1px solid var(--c-piedra); }
.brands li { font-family: var(--f-display); font-size: var(--fs-sm); letter-spacing: .14em; color: var(--c-tinta-suave); text-transform: uppercase; }

.zone { display: grid; gap: var(--sp-6); align-items: center; }
.zone__map { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--c-carbon-700); background: var(--c-carbon-800); }
.zone__map svg { width: 100%; height: 100%; }
.zone-list { list-style: none; margin: 0 0 var(--sp-5); padding: 0; display: grid; gap: var(--sp-3); }
.zone-list li { display: flex; gap: var(--sp-3); align-items: baseline; border-bottom: 1px solid var(--c-carbon-700); padding-bottom: var(--sp-3); }
.zone-list strong { font-family: var(--f-serif); font-size: var(--fs-lg); font-weight: var(--fw-regular); min-width: 9rem; }
.zone-list span { color: var(--c-crema-suave); font-size: var(--fs-sm); }

.cta-band { text-align: center; }
.cta-band h2 { max-width: 22ch; margin-inline: auto; }
.cta-band p { max-width: 36rem; margin: 0 auto var(--sp-6); color: #F0D9DF; }
.cta-band .btn-row { justify-content: center; }

/* ---------- 9. Tienda ---------- */
.notice { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3) var(--sp-4); border: 1px solid #E8D29F; background: #FBF3DF; color: #5C430C; border-radius: var(--r-sm); font-size: var(--fs-sm); margin-bottom: var(--sp-6); }
.notice .icon { margin-top: 2px; }
.shop-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
.shop-layout > *, .product-layout > *, .contact-layout > *, .split > *, .zone > * { min-width: 0; }
.filters { display: none; }
.chips { display: flex; gap: var(--sp-2); overflow-x: auto; padding-bottom: var(--sp-2); margin: 0 calc(var(--gutter) * -1) var(--sp-4); padding-inline: var(--gutter); scrollbar-width: thin; list-style: none; }
.chip { flex: none; min-height: 40px; padding: 0 1rem; border: 1px solid var(--c-piedra-oscura); border-radius: var(--r-pill); background: var(--c-papel); color: var(--c-tinta); font-size: var(--fs-sm); cursor: pointer; white-space: nowrap; transition: all var(--t-fast) var(--ease); }
.chip:hover { border-color: var(--c-burdeos); color: var(--c-burdeos); }
.chip[aria-pressed="true"] { background: var(--c-burdeos); border-color: var(--c-burdeos); color: #fff; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-5); font-size: var(--fs-sm); color: var(--c-tinta-suave); }
.segmented { display: inline-flex; padding: 3px; border: 1px solid var(--c-piedra-oscura); border-radius: var(--r-pill); background: var(--c-papel); }
.segmented button { min-height: 36px; padding: 0 .9rem; border: 0; border-radius: var(--r-pill); background: transparent; font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: .06em; text-transform: uppercase; color: var(--c-tinta-suave); cursor: pointer; }
.segmented button[aria-pressed="true"] { background: var(--c-carbon); color: var(--c-crema-texto); }
.field-inline { display: inline-flex; align-items: center; gap: var(--sp-2); }
.select { min-height: 40px; padding: 0 2rem 0 .75rem; border: 1px solid var(--c-piedra-oscura); border-radius: var(--r-sm); background: var(--c-papel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235E5450' stroke-width='1.5'/%3E%3C/svg%3E") right .75rem center no-repeat; appearance: none; color: var(--c-tinta); }
.filter-group { border-top: 1px solid var(--c-piedra); padding-block: var(--sp-4); }
.filter-group h2 { font-family: var(--f-display); font-size: var(--fs-xs); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; margin-bottom: var(--sp-3); }
.filter-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.filter-list button { width: 100%; display: flex; justify-content: space-between; padding: .45rem .5rem; border: 0; border-radius: var(--r-xs); background: transparent; font-size: var(--fs-sm); text-align: left; cursor: pointer; color: var(--c-tinta); }
.filter-list button:hover { background: var(--c-burdeos-100); }
.filter-list button[aria-pressed="true"] { color: var(--c-burdeos); font-weight: var(--fw-semibold); background: var(--c-burdeos-100); }
.filter-list span { color: var(--c-tinta-suave); font-weight: var(--fw-regular); }
.check { display: flex; gap: var(--sp-2); align-items: center; font-size: var(--fs-sm); padding: .3rem 0; }
.check input { width: 18px; height: 18px; accent-color: var(--c-burdeos); }
.pro-box { margin-top: var(--sp-4); padding: var(--sp-5); border-radius: var(--r-md); background: var(--c-carbon); color: var(--c-crema-texto); }
.pro-box h2 { font-size: var(--fs-lg); font-family: var(--f-serif); letter-spacing: 0; text-transform: none; }
.pro-box p { color: var(--c-crema-suave); font-size: var(--fs-sm); }
.empty-state { display: none; padding: var(--sp-7) var(--sp-4); text-align: center; color: var(--c-tinta-suave); }
.pagination { display: flex; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-7); list-style: none; padding: 0; }
.pagination a, .pagination span { display: inline-grid; place-items: center; min-width: 44px; height: 44px; border: 1px solid var(--c-piedra-oscura); border-radius: var(--r-sm); text-decoration: none; color: var(--c-tinta); }
.pagination [aria-current] { background: var(--c-carbon); color: var(--c-crema-texto); border-color: var(--c-carbon); }

/* ---------- 10. Ficha de producto ---------- */
.product-layout { display: grid; gap: var(--sp-6); }
.gallery__main { aspect-ratio: 1; border-radius: var(--r-md); overflow: hidden; background: #000; }
.gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); margin: var(--sp-3) 0 0; padding: 0; list-style: none; }
.gallery__thumbs button { display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 2px solid transparent; border-radius: var(--r-sm); overflow: hidden; background: #000; cursor: pointer; }
.gallery__thumbs button[aria-current="true"] { border-color: var(--c-burdeos); }
.gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.summary h1 { font-size: var(--fs-2xl); margin-bottom: var(--sp-3); }
.summary .price { font-size: 2rem; }
.summary__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-5); padding-bottom: var(--sp-5); border-bottom: 1px solid var(--c-piedra); }
.summary__lead { font-size: var(--fs-lg); color: var(--c-tinta-suave); }
.specs { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2) var(--sp-5); margin: 0 0 var(--sp-6); font-size: var(--fs-sm); }
.specs dt { color: var(--c-tinta-suave); }
.specs dd { margin: 0; font-weight: var(--fw-semibold); }
.buy { display: flex; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.qty-box { display: inline-flex; align-items: center; border: 1px solid var(--c-piedra-oscura); border-radius: var(--r-sm); background: var(--c-papel); }
.qty-box button { width: 44px; height: 48px; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; color: var(--c-tinta); }
.qty-box button:hover { color: var(--c-burdeos); }
.qty-box input { width: 3rem; height: 48px; border: 0; background: transparent; text-align: center; font-weight: var(--fw-semibold); -moz-appearance: textfield; }
.qty-box input::-webkit-inner-spin-button, .qty-box input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.buy .btn { flex: 1; }
.assurances { list-style: none; margin: var(--sp-5) 0 0; padding: var(--sp-4) 0 0; border-top: 1px solid var(--c-piedra); display: grid; gap: var(--sp-3); font-size: var(--fs-sm); }
.assurances li { display: flex; gap: var(--sp-3); align-items: center; }
.assurances .icon { color: var(--c-burdeos); }
.pro-inline { margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-5); border-left: 3px solid var(--c-oro); background: var(--c-papel); border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: var(--fs-sm); }
.pro-inline strong { font-family: var(--f-serif); font-size: var(--fs-lg); font-weight: var(--fw-regular); display: block; margin-bottom: var(--sp-1); }
.pro-inline p { margin-bottom: var(--sp-2); color: var(--c-tinta-suave); }
.accordion { border-top: 1px solid var(--c-piedra); }
.accordion details { border-bottom: 1px solid var(--c-piedra); }
.accordion summary { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); padding: var(--sp-5) 0; cursor: pointer; list-style: none; font-family: var(--f-serif); font-size: var(--fs-xl); }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: "+"; font-family: var(--f-sans); font-size: 1.5rem; color: var(--c-burdeos); transition: transform var(--t-fast) var(--ease); }
.accordion details[open] summary::after { transform: rotate(45deg); }
.accordion__body { padding-bottom: var(--sp-5); color: var(--c-tinta-suave); max-width: 46rem; }
.accordion__body ul { padding-left: 1.2rem; }

/* ---------- 11. Contacto / formularios ---------- */
.contact-cards { display: grid; gap: var(--sp-3); list-style: none; margin: 0 0 var(--sp-7); padding: 0; }
.contact-card { display: flex; gap: var(--sp-4); align-items: center; padding: var(--sp-5); border: 1px solid var(--c-piedra); border-radius: var(--r-md); background: var(--c-papel); text-decoration: none; color: var(--c-tinta); transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
a.contact-card:hover { border-color: var(--c-burdeos); box-shadow: var(--sh-2); color: var(--c-tinta); }
.contact-card__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r-pill); background: var(--c-burdeos-100); color: var(--c-burdeos); flex: none; }
.contact-card__icon--wa { background: #E3F1E9; color: var(--c-whatsapp); }
.contact-card small { display: block; font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--c-tinta-suave); }
.contact-card strong { font-family: var(--f-serif); font-size: var(--fs-xl); font-weight: var(--fw-regular); word-break: break-word; }
.contact-layout { display: grid; gap: var(--sp-7); }
.form { display: grid; gap: var(--sp-4); }
.form-row { display: grid; gap: var(--sp-4); }
.field label, .field legend { display: block; font-size: var(--fs-sm); font-weight: var(--fw-semibold); margin-bottom: var(--sp-2); }
.field .hint { font-weight: var(--fw-regular); color: var(--c-tinta-suave); }
.input { width: 100%; min-height: 48px; padding: .7rem .9rem; border: 1px solid var(--c-piedra-oscura); border-radius: var(--r-sm); background: #fff; transition: border-color var(--t-fast) var(--ease); }
.input:hover { border-color: var(--c-tinta-suave); }
.input:focus { border-color: var(--c-burdeos); outline: 3px solid rgba(137,28,57,.18); outline-offset: 0; }
textarea.input { min-height: 140px; resize: vertical; }
fieldset.field { border: 0; margin: 0; padding: 0; }
.radio-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.radio-card { position: relative; }
.radio-card input { position: absolute; opacity: 0; }
.radio-card span { display: grid; place-items: center; min-height: 48px; padding: .5rem; border: 1px solid var(--c-piedra-oscura); border-radius: var(--r-sm); background: #fff; font-size: var(--fs-sm); text-align: center; cursor: pointer; }
.radio-card input:checked + span { border-color: var(--c-burdeos); background: var(--c-burdeos-100); color: var(--c-burdeos); font-weight: var(--fw-semibold); }
.radio-card input:focus-visible + span { outline: 3px solid var(--c-foco); outline-offset: 2px; }
.aside-card { padding: var(--sp-6) var(--sp-5); border-radius: var(--r-md); background: var(--c-carbon); color: var(--c-crema-texto); }
.aside-card h2 { font-size: var(--fs-xl); }
.aside-card dl { margin: 0 0 var(--sp-5); display: grid; gap: var(--sp-4); }
.aside-card dt { font-family: var(--f-display); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--c-oro-claro); margin-bottom: 2px; }
.aside-card dd { margin: 0; color: var(--c-crema-texto); }
.aside-card a { color: var(--c-crema-texto); }
.map-ph { aspect-ratio: 4 / 3; border-radius: var(--r-sm); overflow: hidden; margin-top: var(--sp-5); border: 1px solid var(--c-carbon-700); }

/* ---------- 12. Pie ---------- */
.site-footer { background: var(--c-carbon); color: var(--c-crema-suave); font-size: var(--fs-sm); padding-top: var(--sp-8); padding-bottom: 5rem; }
.site-footer a { color: var(--c-crema-texto); text-decoration: none; }
.site-footer a:hover { color: var(--c-oro-claro); text-decoration: underline; }
.footer-grid { display: grid; gap: var(--sp-6); padding-bottom: var(--sp-7); }
.footer-brand img { width: 190px; margin-bottom: var(--sp-4); }
.footer-brand .lema { font-size: var(--fs-lg); color: var(--c-crema-texto); }
.site-footer h2 { font-family: var(--f-display); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--c-oro-claro); margin-bottom: var(--sp-4); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.footer-contact li { display: flex; gap: var(--sp-2); align-items: center; }
.footer-contact .icon { color: var(--c-oro); width: 18px; height: 18px; }
.footer-bottom { border-top: 1px solid var(--c-carbon-700); padding-block: var(--sp-5); display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); justify-content: space-between; font-size: var(--fs-xs); }
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: var(--sp-4); }

/* Botón flotante WhatsApp */
.wa-float { position: fixed; right: var(--sp-4); bottom: var(--sp-4); z-index: var(--z-float); display: inline-flex; align-items: center; gap: var(--sp-2); height: 56px; padding: 0 1.1rem; border-radius: var(--r-pill); background: var(--c-whatsapp); color: #fff; text-decoration: none; font-weight: var(--fw-semibold); font-size: var(--fs-sm); box-shadow: var(--sh-3); }
.wa-float:hover { background: #17603C; color: #fff; }
.wa-float .icon { width: 24px; height: 24px; }
.wa-float__text { display: none; }

/* Aviso "añadido al carrito" */
.toast { position: fixed; left: 50%; bottom: var(--sp-5); z-index: 70; transform: translate(-50%, 150%); padding: var(--sp-3) var(--sp-5); border-radius: var(--r-sm); background: var(--c-carbon); color: var(--c-crema-texto); font-size: var(--fs-sm); box-shadow: var(--sh-3); visibility: hidden; opacity: 0; transition: transform var(--t-base) var(--ease), opacity var(--t-base) var(--ease), visibility var(--t-base); }
.toast.is-visible { transform: translate(-50%, 0); visibility: visible; opacity: 1; }
.toast:empty { display: none; }

/* ==========================================================================
   Puntos de ruptura: 30em (480) · 48em (768) · 64em (1024) · 80em (1280)
   ========================================================================== */
@media (min-width: 30em) {
  .add-btn__text { display: inline; }
  .wa-float__text { display: inline; }
  .contact-cards { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
}

@media (min-width: 48em) {
  .topbar .container { justify-content: space-between; text-align: left; }
  .topbar__extra { display: block; }
  .brand img { width: 200px; }
  .trust ul { grid-template-columns: repeat(4, 1fr); }
  .cat-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
  .products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6) var(--sp-4); }
  .product-card__body { padding: var(--sp-4) var(--sp-4) var(--sp-5); }
  .product-card__title { font-size: 1.25rem; }
  .audience { grid-template-columns: 1fr 1fr; }
  .services { grid-template-columns: repeat(3, 1fr); }
  .values { grid-template-columns: 1fr 1fr; }
  .form-row { grid-template-columns: 1fr 1fr; }
  .hero__media::after { background: linear-gradient(90deg, rgba(22,19,18,.92) 0%, rgba(22,19,18,.7) 40%, rgba(22,19,18,.1) 75%); }
  .hero__content { justify-content: center; min-height: min(80vh, 44rem); }
}

@media (min-width: 64em) {
  .nav-toggle, .js .nav-toggle { display: none; }
  .primary-nav, .primary-nav.is-open { display: block; position: static; top: auto !important; padding: 0; background: none; border: 0; overflow: visible; }
  .primary-nav ul { display: flex; gap: var(--sp-5); }
  .primary-nav.is-open li { border: 0; }
  .primary-nav.is-open li a, .primary-nav li a { padding: var(--sp-2) 0; font-family: var(--f-sans); font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; border-bottom: 1px solid transparent; }
  .primary-nav li a[aria-current="page"] { border-bottom-color: var(--c-oro); }
  .primary-nav__extra { display: none; }
  .brand { margin-right: var(--sp-6); }
  .header-actions { margin-left: auto; }
  .header-cta { display: inline-flex; margin-left: var(--sp-3); }
  .site-header__inner { min-height: 80px; }
  .brand img { width: 220px; }

  .split { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
  .split--reverse .split__media { order: 2; }
  .zone { grid-template-columns: 1fr 1.1fr; gap: var(--sp-8); }
  .products--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .shop-layout { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--sp-7); align-items: start; }
  .filters { display: block; position: sticky; top: 104px; }
  .chips { display: none; }

  .product-layout { grid-template-columns: 1.1fr 1fr; gap: var(--sp-8); align-items: start; }
  .gallery.woocommerce-product-gallery { position: sticky; top: 104px; }
  .contact-layout { grid-template-columns: 1.4fr 1fr; gap: var(--sp-8); align-items: start; }
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1.3fr; }
}

@media (min-width: 80em) {
  .products--4, .shop-layout .products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .shop-layout .products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media print {
  .site-header, .topbar, .wa-float, .site-footer, .toast { display: none; }
}