/* ==========================================================================
   CloClo Marketplace — Template desarrollado por WHA
   Tokens extraídos del sitio actual (WoodMart + Elementor)
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root {
  /* Tipografías */
  --font-display: "Bodoni Moda", Georgia, "Times New Roman", serif;
  --font-body: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  /* Color — valores originales del sitio */
  --c-primary: #000000;
  --c-accent: #f9b116;          /* ámbar de avisos */
  --c-link: #dd9933;            /* dorado */
  --c-link-hover: #000000;
  --c-title: #242424;
  --c-title-alt: #333333;

  /* MEJORA aprobada: #767676 (4.6:1) -> #595959 (7:1) */
  --c-text: #595959;
  --c-text-soft: #767676;

  --c-bg: #ffffff;
  --c-bg-soft: #f7f6f4;
  --c-bg-dark: #000000;
  --c-border: #e6e3de;

  /* Medidas originales */
  --container: 1320px;
  --gutter: 20px;
  --radius: 8px;
  --radius-form: 5px;
  --form-brd-w: 2px;
  --header-h: 90px;
  --header-h-sm: 60px;

  /* Escala de espaciado */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  /* Escala tipográfica fluida */
  --fs-xs: 0.8125rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: clamp(1.0625rem, 0.4vw + 0.95rem, 1.1875rem);
  --fs-h4: clamp(1.375rem, 1.4vw + 1.05rem, 2rem);
  --fs-h3: clamp(1.5rem, 1.2vw + 1.2rem, 2rem);
  --fs-h2: clamp(1.875rem, 2.6vw + 1.3rem, 3.5rem);
  --fs-h1: clamp(2.5rem, 3.6vw + 1.5rem, 4.25rem);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1.65;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--c-link); text-decoration: none; transition: color .25s var(--ease); }
a:hover { color: var(--c-link-hover); }
button { font: inherit; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--c-title);
  line-height: 1.15;
  margin: 0 0 var(--sp-4);
  letter-spacing: -0.01em;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
p { margin: 0 0 var(--sp-4); }

:focus-visible { outline: 3px solid var(--c-link); outline-offset: 3px; }
.sr-only {
  position: absolute; 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: -60px; z-index: 999;
  background: #000; color: #fff; padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius); transition: top .2s var(--ease);
}
.skip-link:focus { top: var(--sp-4); color: #fff; }

/* ---------- 3. LAYOUT ---------- */
.container {
  width: 100%; max-width: var(--container);
  margin-inline: auto; padding-inline: var(--gutter);
}
.section { padding-block: clamp(var(--sp-7), 6vw, var(--sp-9)); }
.section--soft { background: var(--c-bg-soft); }
.section__head { text-align: center; margin-bottom: var(--sp-7); }
.section__head h2, .section__head h4 { margin-bottom: var(--sp-3); }

/* ---------- 4. BOTONES ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 48px;                      /* MEJORA: objetivo táctil accesible */
  padding: var(--sp-3) var(--sp-6);
  font-family: var(--font-body);
  font-size: var(--fs-sm); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  border: 2px solid var(--c-primary); border-radius: var(--radius-form);
  background: var(--c-primary); color: #fff;
  transition: background .25s var(--ease), color .25s var(--ease), transform .12s var(--ease);
}
.btn:hover { background: #fff; color: var(--c-primary); }
.btn:active { transform: translateY(1px); }
.btn--ghost { background: transparent; color: var(--c-primary); }
.btn--ghost:hover { background: var(--c-primary); color: #fff; }
.btn--light { background: #fff; color: var(--c-primary); border-color: #fff; }
.btn--light:hover { background: transparent; color: #fff; }
.btn--block { width: 100%; }

/* ---------- 5. BARRA SUPERIOR ---------- */
.topbar {
  background: var(--c-bg-dark); color: #fff;
  text-align: center; padding: var(--sp-3) var(--gutter);
}
.topbar p {
  margin: 0; font-family: var(--font-display);
  font-size: var(--fs-lg); font-weight: 600; color: #fff;
}

/* Enlace a la tienda gemela (Colombia <-> USA). Añadido el 27/09/2026.
   Sin el enlace la barra sigue centrada como siempre; con él, el aviso se queda
   en el centro y el enlace se va a la derecha. En movil bajan uno debajo del
   otro, porque los dos juntos no caben en 390 px sin recortarse. */
.topbar__inner {
  display: flex; align-items: center; justify-content: center;
  gap: var(--sp-3); max-width: var(--container); margin: 0 auto;
}
.topbar--con-gemela .topbar__inner { justify-content: space-between; }
.topbar--con-gemela .topbar__inner p { margin-inline: auto; }
.topbar__gemela {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  flex: none; color: #fff; font-size: var(--fs-sm); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
  opacity: .85; transition: opacity .2s var(--ease);
}
.topbar__gemela:hover, .topbar__gemela:focus-visible { opacity: 1; color: #fff; }
.topbar__bandera { font-size: 1.15em; line-height: 1; }

@media (max-width: 860px) {
  .topbar--con-gemela .topbar__inner {
    flex-direction: column; gap: var(--sp-2); justify-content: center;
  }
  .topbar--con-gemela .topbar__inner p { margin-inline: 0; }
}

/* ---------- 6. CABECERA ---------- */
.header {
  position: sticky; top: 0; z-index: 100;
  background: #fff; border-bottom: 1px solid transparent;
  transition: box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.header.is-stuck { box-shadow: 0 2px 20px rgba(0,0,0,.07); border-bottom-color: var(--c-border); }
.header__inner {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: var(--sp-4); min-height: var(--header-h);
}
.header__logo img { width: 145px; }
.nav { display: flex; justify-content: center; gap: clamp(var(--sp-4), 2vw, var(--sp-6)); }
.nav a {
  font-family: "Roboto Flex", var(--font-body);
  font-size: var(--fs-base); font-weight: 400; color: var(--c-title);
  padding-block: var(--sp-2); position: relative;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--c-link);
  transform: scaleX(0); transform-origin: right; transition: transform .3s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.header__tools { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-5); }
.tool {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 44px; color: var(--c-title);
}
.tool__count {
  position: absolute; top: -6px; right: -8px;
  min-width: 18px; height: 18px; padding: 0 4px;
  display: grid; place-items: center;
  background: var(--c-primary); color: #fff;
  font-size: 11px; font-weight: 600; border-radius: 999px;
}
.tool--cart { position: relative; }
/* Mi cuenta. Va junto al carrito y, al contrario que las redes, NO se esconde
   en móvil (ver la regla de .tool--social más abajo): es el único acceso que
   tiene un cliente registrado para volver a entrar. Añadido el 26/09/2026. */
.tool--cuenta { margin-left: var(--sp-1); }
.tool__price { font-size: var(--fs-sm); font-weight: 600; }
.burger { display: none; background: none; border: 0; padding: var(--sp-2); color: var(--c-title); }

@media (max-width: 1024px) {
  .header__inner { grid-template-columns: auto 1fr auto; min-height: var(--header-h-sm); }
  .burger { display: inline-flex; }
  .nav { display: none; }
  .header__logo { justify-self: center; }
  .header__logo img { width: 110px; }
  .tool__price, .tool--social { display: none; }
}

/* menú móvil */
.drawer {
  position: fixed; inset: 0 auto 0 0; width: min(320px, 85vw); z-index: 200;
  background: #fff; padding: var(--sp-6) var(--sp-5);
  transform: translateX(-100%); transition: transform .35s var(--ease);
  overflow-y: auto; box-shadow: 4px 0 30px rgba(0,0,0,.12);
}
.drawer[data-open="true"] { transform: translateX(0); }
.drawer a { display: block; padding: var(--sp-3) 0; font-size: var(--fs-lg); color: var(--c-title); border-bottom: 1px solid var(--c-border); }
.drawer__close { position: absolute; top: var(--sp-4); right: var(--sp-4); background: none; border: 0; font-size: 28px; line-height: 1; color: var(--c-title); min-height: 44px; min-width: 44px; }
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s; z-index: 150; }
.overlay[data-open="true"] { opacity: 1; visibility: visible; }

/* ---------- 7. HERO ---------- */
.hero { position: relative; min-height: clamp(420px, 62vh, 640px); display: grid; }
.hero__slide {
  grid-area: 1/1; position: relative; display: grid; place-items: center;
  opacity: 0; visibility: hidden; transition: opacity .8s var(--ease), visibility .8s;
}
.hero__slide.is-active { opacity: 1; visibility: visible; }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__bg::after { content: ""; position: absolute; inset: 0; }
.hero__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.45) 100%); }
.hero__content { position: relative; text-align: center; color: #fff; padding: var(--sp-7) var(--gutter); max-width: 760px; }
.hero__content h1, .hero__content h2, .hero__content h4 { color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.hero__content p { color: #fff; font-size: var(--fs-lg); margin-bottom: var(--sp-6); text-shadow: 0 1px 12px rgba(0,0,0,.4); }
.hero__dots { position: absolute; bottom: var(--sp-5); left: 0; right: 0; display: flex; justify-content: center; gap: var(--sp-2); z-index: 2; }
.hero__dots button { width: 12px; height: 12px; padding: 0; border: 2px solid #fff; border-radius: 999px; background: transparent; }
.hero__dots button[aria-selected="true"] { background: #fff; }
.hero__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 48px; height: 48px; display: grid; place-items: center;
  /* Circulo negro con la flecha en blanco, igual que las de los carruseles.
     Antes era un circulo blanco translucido: sobre una foto clara la flecha
     casi no se distinguia. */
  background: #000; border: 0; border-radius: 999px; color: #fff;
  font-size: 26px; line-height: 1; padding-bottom: 3px;
  transition: background .2s var(--ease), transform .15s var(--ease);
}
.hero__arrow:hover { background: #2b2b2b; transform: translateY(-50%) scale(1.06); }
.hero__arrow--prev { left: var(--sp-4); }
.hero__arrow--next { right: var(--sp-4); }

/* En movil las flechas bajan a la linea de los puntos.
   A media altura se colocaban justo encima del parrafo del hero y lo tapaban:
   el texto se lee por debajo del circulo y no hay forma de leerlo entero. Aqui
   abajo flanquean los puntos, que es donde el pulgar ya las busca. */
@media (max-width: 680px) {
  .hero__arrow {
    top: auto; bottom: 10px; transform: none;
    width: 40px; height: 40px; font-size: 22px;
  }
  .hero__arrow:hover { transform: none; }
  .hero__content { padding-bottom: var(--sp-9); }
}

/* ---------- 8. VENTAJAS ---------- */
.perks { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); text-align: center; }
.perk img { width: 60px; height: 60px; margin: 0 auto var(--sp-3); }
.perk h4 { font-size: var(--fs-lg); margin: 0; }
/* Cuando las cuatro ventajas no caben en fila, la rejilla se convierte en
   carrusel en vez de partirse en dos filas de dos.

   Es la misma mecanica que testimonios y trayectoria: una pista con
   scroll-snap, sin libreria ninguna. Se ven dos por pantalla y completas, sin
   dejar asomar la siguiente. Quien no tenga JavaScript puede deslizar igual
   con el dedo; el JavaScript solo anade el giro automatico y los puntos. */
@media (max-width: 860px) {
  .perks {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - var(--sp-5)) / 2);
    gap: var(--sp-5);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .perks::-webkit-scrollbar { display: none; }
  .perk { scroll-snap-align: start; }
}

/* Los puntos los crea el JavaScript, y solo si la pista se desplaza de verdad.
   En escritorio no existen. */
.perks-dots { display: flex; justify-content: center; gap: var(--sp-2); margin: var(--sp-5) 0 0; }
.perks-dots button {
  width: 9px; height: 9px; padding: 0; border: 0; border-radius: 999px;
  background: var(--c-border); cursor: pointer;
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.perks-dots button[aria-selected="true"] { background: var(--c-primary); transform: scale(1.25); }
.perks-dots button:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 3px; }

/* ---------- 9. PRODUCTOS ---------- */
.products { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
@media (max-width: 1100px) { .products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px)  { .products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .products { grid-template-columns: 1fr; } }

.card { position: relative; }
/* Cuadrada por decision de Diego (24/09/2026): la maqueta traia 3/4. Afecta a
   todas las tarjetas de producto a la vez —tienda, portada y relacionados—
   porque las tres usan .card. Misma regla que el resto del sitio: ninguna foto
   mas alta que ancha, para que una sola imagen valga en cualquier pantalla. */
.card__media { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--c-bg-soft); aspect-ratio: 1; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.card:hover .card__media img { transform: scale(1.04); }
.card__badge {
  position: absolute; top: var(--sp-3); left: var(--sp-3); z-index: 2;
  background: var(--c-primary); color: #fff;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px var(--sp-3); border-radius: 999px;
}
.card__quick {
  position: absolute; left: var(--sp-3); right: var(--sp-3); bottom: var(--sp-3); z-index: 2;
  opacity: 0; transform: translateY(8px); transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.card:hover .card__quick, .card:focus-within .card__quick { opacity: 1; transform: none; }
.card__cat { display: block; font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-soft); margin-top: var(--sp-4); }
.card__title { font-size: var(--fs-lg); margin: var(--sp-2) 0; }
.card__title a { color: var(--c-title); }
.card__title a:hover { color: var(--c-link); }
.card__price { font-weight: 600; color: var(--c-title); }
.card__price del { color: var(--c-text-soft); font-weight: 400; margin-right: var(--sp-2); }

/* ---------- 10. TESTIMONIOS ---------- */
.testi { background: linear-gradient(180deg, #fffdfa 0%, var(--c-bg-soft) 100%); }
.eyebrow {
  display: inline-block; font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--c-link);
  margin-bottom: var(--sp-2);
}
.testi__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-5); margin-bottom: var(--sp-6);
}
.testi__head h4 { margin: 0; }
.testi__nav { display: flex; gap: var(--sp-2); flex-shrink: 0; }
.arrow {
  width: 48px; height: 48px; display: grid; place-items: center;
  font-size: 24px; line-height: 1;
  background: #fff; color: var(--c-title);
  border: 1px solid var(--c-border); border-radius: 999px;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.arrow:hover { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.arrow[disabled] { opacity: .35; cursor: default; }
.arrow[disabled]:hover { background: #fff; color: var(--c-title); border-color: var(--c-border); }

.testi__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * var(--sp-5)) / 3);
  gap: var(--sp-5);
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; padding-bottom: var(--sp-2);
}
.testi__track::-webkit-scrollbar { display: none; }
@media (max-width: 1000px) { .testi__track { grid-auto-columns: calc((100% - var(--sp-5)) / 2); } }
/* Una tarjeta entera por pantalla. El 86% de antes dejaba asomar un trozo de
   la siguiente: en una pantalla ancha eso invita a deslizar, pero en un movil
   solo parece que el diseno esta cortado. Las flechas ya dicen que hay mas. */
@media (max-width: 680px)  { .testi__track { grid-auto-columns: 100%; } }

.testi__card {
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  margin: 0; padding: var(--sp-6);
  background: #fff; border-radius: 14px;
  border: 1px solid var(--c-border);
  box-shadow: 0 2px 4px rgba(20,14,8,.03), 0 12px 32px rgba(20,14,8,.05);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.testi__card:hover { transform: translateY(-4px); box-shadow: 0 6px 12px rgba(20,14,8,.05), 0 20px 44px rgba(20,14,8,.09); }
.testi__mark { width: 34px; margin-bottom: var(--sp-4); opacity: .85; }
.testi__text {
  margin: 0 0 var(--sp-5); flex: 1;
  font-size: var(--fs-lg); line-height: 1.6; color: var(--c-text);
  font-style: normal;
}
.testi__by { display: flex; align-items: center; gap: var(--sp-3); padding-top: var(--sp-4); border-top: 1px solid var(--c-border); }
.testi__avatar {
  width: 46px; height: 46px; flex-shrink: 0;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--c-link), var(--c-accent));
  color: #fff; border-radius: 999px;
  font-family: var(--font-display); font-size: 1.25rem; font-weight: 600;
}
.testi__name { display: block; font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 600; color: var(--c-title); line-height: 1.2; }
.testi__date { display: block; font-size: var(--fs-xs); color: var(--c-text-soft); }

.testi__foot { text-align: center; margin-top: var(--sp-7); }
.testi__note { margin: var(--sp-3) 0 0; font-size: var(--fs-sm); color: var(--c-text-soft); }

/* ---------- 10b. MODAL Y FORMULARIOS ---------- */
.modal {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center; padding: var(--gutter);
  background: rgba(13,11,10,.6);
  opacity: 0; transition: opacity .3s var(--ease);
}
.modal[data-open="true"] { opacity: 1; }
.modal__box {
  width: min(560px, 100%); max-height: 90vh; overflow-y: auto;
  background: #fff; border-radius: 14px; padding: clamp(var(--sp-5), 4vw, var(--sp-7));
  position: relative; box-shadow: 0 24px 60px rgba(0,0,0,.28);
  transform: translateY(12px); transition: transform .3s var(--ease);
}
.modal[data-open="true"] .modal__box { transform: none; }
.modal__close {
  position: absolute; top: var(--sp-3); right: var(--sp-3);
  width: 44px; height: 44px; display: grid; place-items: center;
  font-size: 30px; line-height: 1; color: var(--c-text);
  background: none; border: 0; border-radius: 999px;
}
.modal__close:hover { background: var(--c-bg-soft); color: var(--c-title); }
.modal__lead { color: var(--c-text); margin-bottom: var(--sp-5); }

.form .field { margin-bottom: var(--sp-4); }
.form label { display: block; font-size: var(--fs-sm); font-weight: 500; color: var(--c-title); margin-bottom: var(--sp-2); }
.form input[type="text"], .form input[type="email"], .form textarea {
  width: 100%; padding: var(--sp-3) var(--sp-4);
  font: inherit; color: var(--c-title);
  background: #fff;
  border: var(--form-brd-w) solid var(--c-border);
  border-radius: var(--radius-form);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.form input:focus, .form textarea:focus {
  outline: none; border-color: var(--c-link);
  box-shadow: 0 0 0 3px rgba(221,153,51,.18);
}
.form textarea { resize: vertical; min-height: 120px; }
.req { color: #c0392b; }
.hint { display: block; margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--c-text-soft); }
.field--check { display: flex; align-items: flex-start; gap: var(--sp-3); }
.field--check input { width: 20px; height: 20px; margin-top: 3px; flex-shrink: 0; accent-color: var(--c-primary); }
.field--check label { margin: 0; font-weight: 400; font-size: var(--fs-sm); color: var(--c-text); }
/* honeypot: invisible para personas, visible para bots */
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------- 11. HISTORIA / CTA ---------- */
.story { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--sp-6), 5vw, var(--sp-9)); align-items: center; }
@media (max-width: 900px) { .story { grid-template-columns: 1fr; } }
/* Proporcion fija y recorte, como el resto de imagenes del tema.

   Sin esto la foto se queda con la proporcion del fichero que subieron, y el
   bloque cambia de forma segun la foto: aqui una vertical de 1080x1631 salia
   a 335x506 en un movil (un muro) mientras la de Nosotros, apaisada de
   1920x905, salia a 335x158 (una tira). Con una proporcion fija da igual que
   suban vertical, cuadrada o apaisada: el hueco manda y `cover` recorta por
   los bordes sin deformar a nadie.

   Cuadrada, y la misma en todos los anchos. Es la regla de la casa: ninguna
   foto del sitio mas alta que ancha fuera de las que ya venian asi en la
   maqueta. Un cuadrado funciona igual de bien al lado del texto en escritorio
   que a ancho completo en un movil, asi que el cliente sube UNA imagen y vale
   para todo: no hay un recorte que quede bien en portatil y mal en telefono. */
.story__media img { border-radius: var(--radius); width: 100%; aspect-ratio: 1; object-fit: cover; }
.story__text p { font-size: var(--fs-lg); }

/* ---------- 12. INSTAGRAM ---------- */
/* Seis fotos guardadas, pero en escritorio se enseñan cinco.

   Es la unica forma de que no quede fila coja en ningun tamaño: 5 columnas en
   portatil (una fila exacta con 5 fotos), 3 en tablet y 2 en movil (dos y tres
   filas exactas con 6). Si se enseñaran las seis en escritorio sobraria una, y
   si solo hubiera cinco faltaria una en movil.

   La sexta no se carga de menos ni se descarga: simplemente se oculta donde
   sobra. Son 6 imagenes en el HTML siempre. */
.insta { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-2); }
.insta > *:nth-child(6) { display: none; }

@media (max-width: 900px) {
  .insta { grid-template-columns: repeat(3, 1fr); }
  .insta > *:nth-child(6) { display: block; }
}
@media (max-width: 520px) { .insta { grid-template-columns: repeat(2, 1fr); } }

/* Boton de seguir, debajo de la rejilla. */
.insta__cta { margin: var(--sp-6) 0 0; text-align: center; }
.insta__cta .btn { gap: var(--sp-2); }
.insta__cta svg { flex: none; }
.insta a { display: block; overflow: hidden; border-radius: var(--radius); aspect-ratio: 1; }
.insta img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease), opacity .3s; }
.insta a:hover img { transform: scale(1.06); opacity: .85; }

/* ---------- 13. PIE ---------- */
.footer {
  position: relative;
  background: #0d0b0a;                     /* negro cálido, no negro puro */
  color: #fff;
  padding-block: clamp(var(--sp-7), 6vw, var(--sp-9)) var(--sp-5);
}
.footer::before {                          /* filete dorado superior */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--c-link) 0%, var(--c-accent) 50%, var(--c-link) 100%);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(var(--sp-6), 5vw, var(--sp-8));
  align-items: start;
}
.footer__logo { width: 180px; margin-bottom: var(--sp-4); }
.footer__tagline {
  font-family: var(--font-display);
  font-size: var(--fs-lg); font-weight: 600;
  color: #fff; margin-bottom: var(--sp-5); max-width: 32ch;
}
.footer__social { display: flex; gap: var(--sp-3); }
.footer__social a {
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.28); border-radius: 999px; color: #fff;
  transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.footer__social a:hover { background: var(--c-link); border-color: var(--c-link); color: #0d0b0a; }

.footer__h {
  font-family: var(--font-body);
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-link); margin: 0 0 var(--sp-4);
}
.footer__col { display: flex; flex-direction: column; }
.footer__col a {
  color: rgba(255,255,255,.82); font-size: var(--fs-sm);
  padding-block: var(--sp-2); position: relative; width: fit-content;
}
.footer__col a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px;
  background: var(--c-link); transform: scaleX(0); transform-origin: right;
  transition: transform .3s var(--ease);
}
.footer__col a:hover { color: #fff; }
.footer__col a:hover::after { transform: scaleX(1); transform-origin: left; }

.footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: var(--sp-3);
  margin-top: clamp(var(--sp-6), 4vw, var(--sp-8));
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255,255,255,.12);
}
.footer__copy, .footer__made { margin: 0; color: rgba(255,255,255,.58); font-size: var(--fs-sm); }

@media (max-width: 880px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; text-align: center; }
  .footer__brand .footer__logo { margin-inline: auto; }
  .footer__tagline { margin-inline: auto; }
  .footer__social { justify-content: center; }
}
@media (max-width: 560px) {
  .footer__grid { grid-template-columns: 1fr; text-align: center; }
  .footer__col { align-items: center; }
  .footer__bottom { justify-content: center; text-align: center; }
}

/* ---------- 14. COOKIES Y WHATSAPP ---------- */
.cookies {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 180;
  background: rgba(0,0,0,.92); color: #fff;
  padding: var(--sp-4) var(--gutter);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-4);
  transform: translateY(100%); transition: transform .4s var(--ease);
}
.cookies[data-open="true"] { transform: none; }
.cookies p { margin: 0; font-size: var(--fs-sm); color: rgba(255,255,255,.9); max-width: 70ch; }
.wa {
  position: fixed; left: var(--sp-5); bottom: var(--sp-5); z-index: 170;
  width: 56px; height: 56px; display: grid; place-items: center;
  background: #25d366; border-radius: 999px; color: #fff;
  box-shadow: 0 6px 24px rgba(0,0,0,.22);
  transition: transform .25s var(--ease);
}
.wa:hover { transform: scale(1.07); color: #fff; }

/* ---------- 15. ANIMACIÓN DE ENTRADA ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* Intro de sección (párrafo por encima del título) */
.section__intro {
  max-width: 58ch;
  margin: 0 auto var(--sp-4);
  font-size: var(--fs-lg);
  color: var(--c-text);
}

/* Título destacado de la sección Historia */
.story__title {
  font-size: clamp(1.5rem, 1.6vw + 1.15rem, 2.25rem);
  font-weight: 800;
  color: var(--c-primary);
  line-height: 1.1;
  margin-bottom: var(--sp-5);
}

/* ---------- Estrellas ---------- */
.stars { display: flex; gap: 2px; margin-bottom: var(--sp-4); }
.stars svg { width: 18px; height: 18px; fill: var(--c-accent); }

/* Campo de puntuación: estrellas seleccionables (orden inverso en el HTML) */
.rate { border: 0; padding: 0; margin: 0 0 var(--sp-4); }
.rate legend { font-size: var(--fs-sm); font-weight: 500; color: var(--c-title); margin-bottom: var(--sp-2); padding: 0; }
.rate__stars { display: inline-flex; flex-direction: row-reverse; gap: var(--sp-1); }
.rate__stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rate__stars label {
  cursor: pointer; margin: 0; padding: 2px;
  width: 34px; height: 34px;
  background-color: #d8d3cb;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2 3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8 5.8 21l1.2-6.8-5-4.9 6.9-1z'/%3E%3C/svg%3E") center/26px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2 3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8 5.8 21l1.2-6.8-5-4.9 6.9-1z'/%3E%3C/svg%3E") center/26px no-repeat;
  transition: background-color .2s var(--ease), transform .12s var(--ease);
}
.rate__stars label:hover, .rate__stars label:hover ~ label,
.rate__stars input:checked, .rate__stars input:checked ~ label { background-color: var(--c-accent); }
.rate__stars input:checked + label, .rate__stars input:checked + label ~ label { background-color: var(--c-accent); }
.rate__stars label:hover { transform: scale(1.12); }
.rate__stars input:focus-visible + label { outline: 3px solid var(--c-link); outline-offset: 2px; }

/* ---------- Flechas en negro ---------- */
.arrow { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.arrow:hover { background: #fff; color: var(--c-primary); border-color: var(--c-primary); }
.arrow[disabled] { background: var(--c-primary); color: #fff; border-color: var(--c-primary); opacity: .25; }
.arrow[disabled]:hover { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }

/* Flechas: círculo negro, icono blanco */
.arrow {
  background: #000; color: #fff; border: 0;
  font-size: 26px; font-weight: 400; line-height: 1; padding-bottom: 3px;
}
.arrow:hover { background: #2b2b2b; color: #fff; border: 0; }
.arrow[disabled] { background: #000; color: #fff; border: 0; opacity: .3; }
.arrow[disabled]:hover { background: #000; color: #fff; }
.testi__nav[hidden] { display: none; }

/* Flechas siempre visibles */
.testi__nav { display: flex !important; }
.arrow, .arrow[disabled] { background: #000; color: #fff; border: 0; opacity: 1; }
.arrow:hover { background: #2b2b2b; }

/* CORRECCIÓN: sin esto, .modal{display:grid} pisa el display:none del atributo
   [hidden] y el modal queda invisible pero capturando todos los clics del sitio. */
.modal[hidden] { display: none !important; }

/* Flechas: estados visibles de hover, foco y pulsación */
.arrow {
  transition: background-color .2s var(--ease), transform .15s var(--ease), box-shadow .2s var(--ease);
}
.arrow:hover {
  background: var(--c-link);                 /* dorado de marca */
  color: #fff;
  transform: scale(1.09);
  box-shadow: 0 6px 18px rgba(221,153,51,.4);
}
.arrow:active {
  background: var(--c-accent);
  transform: scale(.94);
  box-shadow: 0 2px 6px rgba(221,153,51,.35);
}
.arrow:focus-visible {
  outline: 3px solid var(--c-link);
  outline-offset: 3px;
}

/* ---------- Cabecera de página interior ---------- */
.pagehead {
  background: linear-gradient(180deg, var(--c-bg-soft) 0%, #fff 100%);
  padding-block: clamp(var(--sp-6), 5vw, var(--sp-8)) clamp(var(--sp-5), 4vw, var(--sp-7));
  text-align: center;
}
.pagehead h1 { margin: 0; }
.crumbs { font-size: var(--fs-sm); color: var(--c-text-soft); margin-bottom: var(--sp-3); }
.crumbs a { color: var(--c-text-soft); }
.crumbs a:hover { color: var(--c-link); }
.crumbs span[aria-current] { color: var(--c-title); }

/* ---------- Quiénes somos ---------- */
.about { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(var(--sp-6), 5vw, var(--sp-9)); align-items: center; }
.about__media img { width: 100%; border-radius: 14px; aspect-ratio: 1; object-fit: cover; }
.about__text h2 { margin-bottom: var(--sp-4); }
.about__text p { font-size: var(--fs-lg); }
@media (max-width: 900px) {
  .about { grid-template-columns: 1fr; }
  .about__media { order: -1; }
}

/* ---------- Trayectoria ---------- */
.tray__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * var(--sp-5)) / 4);
  gap: var(--sp-5); overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; padding-bottom: var(--sp-2);
}
.tray__track::-webkit-scrollbar { display: none; }
@media (max-width: 1000px) { .tray__track { grid-auto-columns: calc((100% - var(--sp-5)) / 2); } }
/* Igual que en testimonios: la foto entera, sin el trozo de la siguiente. */
@media (max-width: 620px)  { .tray__track { grid-auto-columns: 100%; } }
.tray__item { margin: 0; scroll-snap-align: start; }
/* Cuadrada por decision de Diego (24/09/2026), no por descuido: la maqueta
   traia 3/4 aqui. Se cambio porque las fotos de trayectoria las sube el
   cliente sin encuadre pensado y una vertical quedaba mal. Misma regla que
   Nosotros e Inicio: una sola proporcion para todos los anchos. */
.tray__item img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; }
.tray__item figcaption {
  margin-top: var(--sp-3); text-align: center;
  font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 700; color: var(--c-title);
}

/* ==========================================================================
   CORRECCIÓN DE TIPOGRAFÍA VARIABLE
   Bodoni Moda tiene eje de tamaño óptico (opsz 6..96). El navegador lo sube
   solo en textos grandes y los trazos quedan como hilos. Lo fijamos bajo
   para conservar el grosor, igual que la versión estática que usa el sitio actual.
   ========================================================================== */
h1, h2, h3, h4, h5,
.testi__name, .tray__item figcaption, .footer__tagline,
.story__title, .topbar p, .testi__avatar, .card__title {
  font-optical-sizing: none;
  font-variation-settings: "opsz" 14;
  font-synthesis-weight: none;
}

/* Títulos grandes: un punto más de peso para que el trazo tenga cuerpo */
h1, h2 { font-weight: 700; }
.pagehead h1 { font-weight: 700; letter-spacing: -0.015em; }
.about__text h2, .testi__head h2, .section__head h4 { font-weight: 700; }

/* Botón "Vista rápida" sobre la imagen del producto */
.card__peek {
  position: absolute; top: var(--sp-3); right: var(--sp-3); z-index: 2;
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  background: rgba(255,255,255,.95); color: var(--c-title);
  border: 0; border-radius: 999px;
  opacity: 0; transform: translateY(-6px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), background .2s var(--ease);
}
.card:hover .card__peek, .card:focus-within .card__peek { opacity: 1; transform: none; }
.card__peek:hover { background: var(--c-primary); color: #fff; }
@media (hover: none) { .card__peek, .card__quick { opacity: 1; transform: none; } }

/* ---------- Ficha de producto ---------- */
.section--tight { padding-top: var(--sp-5); }
.crumbs--product { text-align: left; padding-top: var(--sp-5); margin: 0; }

.prod { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(var(--sp-6), 4vw, var(--sp-8)); align-items: start; }
@media (max-width: 900px) { .prod { grid-template-columns: 1fr; } }

.prod__main { position: relative; border-radius: 14px; overflow: hidden; background: var(--c-bg-soft); }
.prod__main img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.prod__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); margin-top: var(--sp-3); }
.prod__thumbs button {
  padding: 0; border: 2px solid transparent; border-radius: var(--radius);
  overflow: hidden; background: none; transition: border-color .2s var(--ease), opacity .2s var(--ease);
  opacity: .7;
}
.prod__thumbs button:hover { opacity: 1; }
.prod__thumbs button.is-active { border-color: var(--c-primary); opacity: 1; }
.prod__thumbs img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }

.prod__title { font-size: clamp(1.625rem, 1.8vw + 1.25rem, 2.375rem); margin-bottom: var(--sp-4); }
.prod__price { font-size: clamp(1.375rem, 1vw + 1.1rem, 1.75rem); font-family: var(--font-display); font-weight: 700; color: var(--c-title); margin-bottom: var(--sp-5); }
.prod__price del { color: var(--c-text-soft); font-weight: 400; font-size: .75em; margin-right: var(--sp-3); }
.prod__price ins { text-decoration: none; }
.prod__early {
  background: rgba(249,177,22,.14); border-left: 4px solid var(--c-accent);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-form);
  font-size: var(--fs-sm); color: #6b4d05;
}
.prod__sub { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); color: var(--c-title); margin-bottom: var(--sp-3); }
.prod__list { margin: 0 0 var(--sp-5); padding: 0; }
.prod__list li { position: relative; padding-left: var(--sp-5); margin-bottom: var(--sp-2); }
.prod__list li::before { content: ""; position: absolute; left: 0; top: .65em; width: 7px; height: 7px; background: var(--c-link); border-radius: 999px; }
.prod__note { font-size: var(--fs-sm); color: var(--c-text-soft); }

.prod__buy { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; margin: var(--sp-5) 0; }
.qty { display: inline-flex; align-items: center; border: var(--form-brd-w) solid var(--c-border); border-radius: var(--radius-form); overflow: hidden; }
.qty__btn { width: 46px; height: 48px; border: 0; background: #fff; font-size: 20px; color: var(--c-title); }
.qty__btn:hover { background: var(--c-bg-soft); }
.qty input { width: 56px; height: 48px; border: 0; text-align: center; font: inherit; font-weight: 600; color: var(--c-title); -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty input:focus { outline: none; }
.prod__meta { font-size: var(--fs-sm); color: var(--c-text-soft); padding-top: var(--sp-4); border-top: 1px solid var(--c-border); }
.prod__meta span { color: var(--c-title); font-weight: 500; }

/* ==========================================================================
   10. CARRITO
   Estructura de datos = WooCommerce clásico (product-remove, product-thumbnail,
   product-name, product-price, product-quantity, product-subtotal, cart_totals).
   Ejecución = tarjetas modernas + resumen fijo. Sin <table>: en móvil una tabla
   obliga a scroll horizontal; aquí cada línea se reordena sola.
   ========================================================================== */
.cart {
  display: grid;
  grid-template-columns: minmax(0,1fr) 380px;
  gap: clamp(var(--sp-6), 4vw, var(--sp-8));
  align-items: start;
}

.cart__head {
  display: grid;
  grid-template-columns: 96px minmax(0,1fr) 120px 150px 110px 40px;
  gap: var(--sp-4);
  align-items: center;
  padding: 0 var(--sp-5) var(--sp-3);
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-text-soft);
  border-bottom: 1px solid var(--c-border);
}
.cart__head span:nth-child(3),
.cart__head span:nth-child(4),
.cart__head span:nth-child(5) { text-align: center; }

.citem {
  display: grid;
  grid-template-columns: 96px minmax(0,1fr) 120px 150px 110px 40px;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-5);
  border-bottom: 1px solid var(--c-border);
  transition: background .25s var(--ease);
}
.citem:hover { background: var(--c-bg-soft); }
.citem.is-going { opacity: .45; pointer-events: none; }

/* Mientras WooCommerce recalcula los totales en el servidor: el carrito se
   atenúa y no acepta clics, para que nadie pulse dos veces sin darse cuenta. */
form.woocommerce-cart-form.is-updating {
  opacity: .55;
  pointer-events: none;
  transition: opacity .2s var(--ease);
}

.citem__thumb img {
  width: 96px; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--radius); border: 1px solid var(--c-border);
}
.citem__name {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-lg); line-height: 1.25; color: var(--c-title);
  margin: 0 0 var(--sp-2);
}
.citem__name a { color: inherit; }
.citem__name a:hover { color: var(--c-link); }
.citem__meta { font-size: var(--fs-sm); color: var(--c-text-soft); margin: 0; }
.citem__meta span { color: var(--c-title); font-weight: 500; }
.citem__stock {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-2);
  font-size: var(--fs-xs); font-weight: 600; color: #1f7a3d;
}
.citem__stock::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: #1f7a3d; }

.citem__price, .citem__sub { text-align: center; font-weight: 600; color: var(--c-title); }
.citem__price del { display: block; font-weight: 400; font-size: var(--fs-sm); color: var(--c-text-soft); }
.citem__sub { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; }
.citem__qty { justify-self: center; }
.citem__qty .qty__btn { width: 38px; height: 42px; }
.citem__qty input { width: 46px; height: 42px; }

.citem__del {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 0; border-radius: 999px; background: transparent;
  color: var(--c-text-soft);
  transition: background .25s var(--ease), color .25s var(--ease), transform .12s var(--ease);
}
.citem__del:hover { background: #fdecec; color: #c0392b; }
.citem__del:active { transform: scale(.9); }

.cart__foot {
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  justify-content: space-between; align-items: center;
  padding-top: var(--sp-5);
}
.coupon { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.coupon input {
  min-width: 220px; height: 48px; padding: 0 var(--sp-4);
  font: inherit; color: var(--c-title);
  border: var(--form-brd-w) solid var(--c-border); border-radius: var(--radius-form);
  background: #fff;
}
.coupon input:focus { outline: none; border-color: var(--c-link); }
.coupon input::placeholder { color: var(--c-text-soft); }

/* Resumen */
.summary {
  position: sticky; top: calc(var(--header-h) + var(--sp-4));
  background: var(--c-bg-soft);
  border: 1px solid var(--c-border); border-radius: 14px;
  padding: clamp(var(--sp-5), 3vw, var(--sp-6));
}
.summary h2 {
  font-size: var(--fs-h4); font-weight: 700;
  margin-bottom: var(--sp-5); padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--c-border);
}
.summary__row {
  display: flex; justify-content: space-between; gap: var(--sp-4);
  padding-block: var(--sp-3);
  font-size: var(--fs-sm);
}
.summary__row dt { color: var(--c-text); margin: 0; }
.summary__row dd { margin: 0; font-weight: 600; color: var(--c-title); text-align: right; }
.summary__row--save dd { color: #1f7a3d; }
.summary__ship { font-size: var(--fs-xs); color: var(--c-text-soft); display: block; font-weight: 400; margin-top: 2px; }
.summary__total {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4);
  margin-top: var(--sp-4); padding-top: var(--sp-4);
  border-top: 2px solid var(--c-title);
}
.summary__total dt { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); color: var(--c-title); }
.summary__total dd { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 1.4vw + 1.15rem, 2rem); color: var(--c-title); }
.summary .btn { margin-top: var(--sp-5); }
.summary__safe {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  margin: var(--sp-4) 0 0; font-size: var(--fs-xs); color: var(--c-text-soft);
}
.summary__back { display: block; text-align: center; margin-top: var(--sp-4); font-size: var(--fs-sm); }

/* Carrito vacío */
.empty { text-align: center; max-width: 560px; margin-inline: auto; padding-block: var(--sp-6); }
.empty__icon {
  width: 96px; height: 96px; margin: 0 auto var(--sp-5);
  display: grid; place-items: center;
  background: var(--c-bg-soft); border-radius: 999px; color: var(--c-text-soft);
}
.empty h2 { font-weight: 700; margin-bottom: var(--sp-3); }
.empty p { margin-bottom: var(--sp-6); }

@media (max-width: 1024px) {
  .cart { grid-template-columns: 1fr; }
  .summary { position: static; }
}
@media (max-width: 720px) {
  .cart__head { display: none; }
  .citem {
    /* La tercera columna la comparten el boton de borrar (fila 1) y el
       subtotal (fila 2). Estaba fijada en 40px, la medida del boton, y el
       subtotal salia cortado: "$89.94" pide 56px. Con `auto` la columna toma
       el ancho del mas grande de los dos y crece sola si el importe sube;
       el nombre cede porque es minmax(0,1fr). */
    /* El nombre ocupa la fila entera, de margen a margen. Encajonado junto a
       la miniatura le quedaban unos 170px y un titulo largo salia en cuatro
       renglones cortados.

       La papelera va en su propia linea y no junto al subtotal. Se probo con
       las cuatro piezas en la misma fila: en una pantalla de 390 entraban por
       un pelo, pero en una de 320 el selector de cantidad se quedaba con 57px
       de los 126 que necesita y se montaba encima del subtotal. Tampoco basta
       con bajar solo la papelera: el selector no baja de 111px y en 320
       quedaban 87. Asi que la cantidad tiene su propia linea y debajo van el
       subtotal y la papelera. Dos filas mas cuestan 80px de alto; el numero
       montado encima del precio cuesta una venta. */
    grid-template-columns: 88px minmax(0,1fr) auto;
    grid-template-areas:
      "name  name name"
      "thumb qty  qty"
      "thumb sub  del";
    row-gap: var(--sp-3);
    column-gap: var(--sp-3);
    padding-inline: 0;
  }
  .citem__thumb { grid-area: thumb; }
  .citem__info  { grid-area: name; }
  .citem__qty   { grid-area: qty; justify-self: start; }
  .citem__sub   { grid-area: sub; text-align: right; }
  .citem__del   { grid-area: del; justify-self: end; }
  .citem__price { display: none; }          /* el precio unitario ya va bajo el nombre */
  .citem__qty .qty__btn { width: 34px; }
  .citem__qty input { width: 40px; }
  .citem__thumb img { width: 88px; }
  .citem:hover { background: transparent; }
  .cart__foot { flex-direction: column; align-items: stretch; }
  .coupon input { min-width: 0; flex: 1; }
}

/* ==========================================================================
   11. GRACIAS POR TU COMPRA (order-received)
   ========================================================================== */
.thanks { text-align: center; max-width: 760px; margin-inline: auto; }
.thanks__check {
  width: 84px; height: 84px; margin: 0 auto var(--sp-5);
  display: grid; place-items: center;
  border-radius: 999px; background: rgba(31,122,61,.1); color: #1f7a3d;
  animation: pop .5s var(--ease) both;
}
@keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.thanks h1 { margin-bottom: var(--sp-3); }
.thanks__lead { font-size: var(--fs-lg); margin-bottom: var(--sp-7); }
.thanks__lead strong { color: var(--c-title); }

.order-meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--sp-4); margin: 0 0 var(--sp-7); padding: 0;
  text-align: left;
}
.order-meta > div {
  background: var(--c-bg-soft); border: 1px solid var(--c-border);
  border-radius: var(--radius); padding: var(--sp-4) var(--sp-5);
}
.order-meta dt {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--c-text-soft); margin-bottom: var(--sp-1);
}
.order-meta dd { margin: 0; font-weight: 600; color: var(--c-title); }

.order { text-align: left; }
.order h2 { font-size: var(--fs-h4); font-weight: 700; margin-bottom: var(--sp-5); }
.order__line, .order__sum, .order__grand {
  display: flex; justify-content: space-between; gap: var(--sp-4);
  padding-block: var(--sp-4); border-bottom: 1px solid var(--c-border);
}
.order__line span:first-child { color: var(--c-title); font-weight: 500; }
.order__line em { font-style: normal; color: var(--c-text-soft); font-weight: 400; }
.order__sum { font-size: var(--fs-sm); padding-block: var(--sp-3); }
.order__sum span:last-child, .order__line span:last-child { font-weight: 600; color: var(--c-title); white-space: nowrap; }
.order__grand {
  border-bottom: 0; border-top: 2px solid var(--c-title); margin-top: var(--sp-2);
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); color: var(--c-title);
}
.order__addr {
  margin-top: var(--sp-7); padding: var(--sp-5);
  background: var(--c-bg-soft); border-radius: var(--radius);
  font-style: normal; line-height: 1.8;
}
.order__addr h3 { font-size: var(--fs-lg); font-weight: 700; margin-bottom: var(--sp-3); }
.thanks__cta { display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: center; margin-top: var(--sp-7); }

/* ==========================================================================
   12. CHECKOUT
   Fiel al layout WoodMart #9863: contenedor en columna, gap 30px,
   ancho 50% escritorio / 84% tablet / 100% móvil, y tres pasos con número
   gigante (Jost 700, 120/80/40px, line-height 1.3).
   ========================================================================== */
:root {
  /* Original del sitio: borde azul del bloque de pago (#2E6BC6 al 32%).
     Cámbialo a var(--c-accent) si prefieres el ámbar de la marca. */
  --co-pay-border: rgba(46,107,198,.32);
}

.co { width: min(680px, 100%); margin-inline: auto; display: grid; gap: 30px; }
@media (max-width: 1024px) { .co { width: 84%; } }
@media (max-width: 720px)  { .co { width: 100%; } }

.co__step { margin: 0; }
.co__num {
  display: block;
  font-family: var(--font-body); font-weight: 700;
  font-size: clamp(2.5rem, 8vw, 7.5rem);      /* 40px móvil -> 120px escritorio */
  line-height: 1.3; color: var(--c-primary);
  letter-spacing: -0.03em;
}
.co__step h2 {
  font-size: clamp(1.625rem, 2vw + 1.2rem, 2.25rem);
  font-weight: 700; margin: 0;
}

/* --- Campos --- */
.field { display: block; margin-bottom: var(--sp-4); }
.field > label, .fieldset > legend {
  display: block; margin-bottom: var(--sp-2);
  font-size: var(--fs-sm); font-weight: 500; color: var(--c-title);
}
.field .req { color: #c0392b; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px;
  padding: var(--sp-3) var(--sp-4);
  font: inherit; color: var(--c-title); background: #fff;
  border: var(--form-brd-w) solid var(--c-border); border-radius: var(--radius-form);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--c-link); box-shadow: 0 0 0 3px rgba(221,153,51,.15);
}
.field input::placeholder, .field textarea::placeholder { color: var(--c-text-soft); }
.field input:user-invalid { border-color: #c0392b; }          /* sólo tras escribir */
.field__hint { display: block; margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--c-text-soft); }
.field + .field--tight { margin-top: calc(var(--sp-4) * -1 + var(--sp-2)); }

.fieldset { border: 0; padding: 0; margin: 0 0 var(--sp-4); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
@media (max-width: 560px) { .row2 { grid-template-columns: 1fr; gap: 0; } }

.check { display: flex; align-items: flex-start; gap: var(--sp-3); margin-bottom: var(--sp-4); cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--c-primary); flex: none; }
.check span { font-size: var(--fs-sm); color: var(--c-title); }

.co__ship { border-top: 1px solid var(--c-border); padding-top: var(--sp-5); }
.co__ship-fields[hidden] { display: none; }

/* --- Revisa tu pedido --- */
.review {
  border: 1px solid #00000014; border-radius: var(--radius);
  padding: 20px 30px; margin-bottom: 10px;
}
.review__head, .review__line, .review__sum, .review__total {
  display: flex; justify-content: space-between; gap: var(--sp-4);
  padding-block: var(--sp-3); border-bottom: 1px solid var(--c-border);
}
.review__head {
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--c-text-soft);
}
.review__line span:first-child { color: var(--c-title); }
.review__line em { font-style: normal; color: var(--c-text-soft); }
.review__line span:last-child, .review__sum span:last-child { font-weight: 600; color: var(--c-title); white-space: nowrap; }
.review__sum { font-size: var(--fs-sm); }
.review__ship { display: flex; flex-direction: column; gap: var(--sp-2); align-items: flex-end; }
.review__ship label { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--c-title); cursor: pointer; }
.review__ship input { width: 18px; height: 18px; accent-color: var(--c-primary); }
.review__total {
  border-bottom: 0; border-top: 2px solid var(--c-title); margin-top: var(--sp-2);
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-lg); color: var(--c-title); align-items: baseline;
}
.review__total span:last-child { font-size: clamp(1.375rem, 1.2vw + 1.1rem, 1.75rem); }

/* --- Información de pago --- */
.pay {
  border: 5px solid var(--co-pay-border); border-radius: var(--radius);
  padding: 30px;
}
.pay__opt { border-bottom: 1px solid var(--c-border); }
.pay__opt:last-of-type { border-bottom: 0; }
.pay__opt > label {
  display: flex; align-items: center; gap: var(--sp-3);
  padding-block: var(--sp-4); cursor: pointer;
  font-weight: 600; color: var(--c-title);
}
.pay__opt input { width: 20px; height: 20px; accent-color: var(--c-primary); flex: none; }

/* Los logos de las tarjetas los mete la pasarela dentro del <label>, como un
   hermano mas del radio y del texto en el mismo flex.
 
   El de Stripe es un SVG con viewBox="0 0 66 42" y SIN atributos width ni
   height. Un SVG asi no tiene tamano intrinseco: el navegador lo estira a lo
   que le de el contenedor, respetando solo la proporcion. En un movil eso se
   media en 610x388 px dentro de una pantalla de 390, aplastaba el texto a una
   columna de dos letras y se salia por la derecha.
 
   La solucion es darle el alto que le corresponde a su viewBox (42 px) y
   dejar que el ancho lo deduzca de la proporcion: salen los 66 px de siempre.
   El wrap es el cinturon de seguridad para cualquier otra pasarela que meta
   una tira de iconos mas larga: baja a su propia linea en vez de desbordar. */
.pay__opt > label { flex-wrap: wrap; row-gap: var(--sp-2); }
.pay__opt > label img {
  height: 42px;
  width: auto;
  max-width: 100%;
  flex: none;
  object-fit: contain;
}
.pay__desc {
  margin: 0 0 var(--sp-4) calc(20px + var(--sp-3));
  padding: var(--sp-4); background: var(--c-bg-soft); border-radius: var(--radius-form);
  font-size: var(--fs-sm);
}
.pay__desc[hidden] { display: none; }
.pay__terms { margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--c-border); }
.pay .btn { margin-top: var(--sp-4); }
.pay__safe {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  margin: var(--sp-4) 0 0; font-size: var(--fs-xs); color: var(--c-text-soft);
}
.field__opt { color: var(--c-text-soft); font-weight: 400; }
.co__ship > .check { margin-bottom: var(--sp-5); }
.co__ship-fields:not([hidden]) { margin-bottom: var(--sp-5); }
@media (max-width: 560px) {
  .review { padding: var(--sp-4) var(--sp-5); }
  .pay { padding: var(--sp-5); border-width: 3px; }
  .pay__desc { margin-left: 0; }
}

/* ==========================================================================
   13. CONTÁCTANOS
   ========================================================================== */
.contact {
  display: grid; grid-template-columns: .85fr 1.15fr;
  gap: clamp(var(--sp-6), 5vw, var(--sp-9));
  align-items: start;
}
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }

.contact__aside h2, .contact__form h2 { font-size: var(--fs-h4); font-weight: 700; margin-bottom: var(--sp-5); }
.contact__place { font-size: var(--fs-lg); color: var(--c-title); margin-bottom: var(--sp-6); }

.contact__ways { display: grid; gap: var(--sp-5); }
.contact__way {
  display: flex; gap: var(--sp-4); align-items: flex-start;
  padding: var(--sp-5); background: var(--c-bg-soft);
  border: 1px solid var(--c-border); border-radius: var(--radius);
  transition: border-color .25s var(--ease), transform .2s var(--ease);
}
.contact__way:hover { border-color: var(--c-link); transform: translateY(-2px); }
.contact__way svg { flex: none; color: var(--c-title); margin-top: 2px; }
.contact__way h3 { font-size: var(--fs-base); font-weight: 700; margin: 0 0 2px; }
.contact__way a { font-size: var(--fs-sm); word-break: break-word; }

.contact__form {
  background: #fff; border: 1px solid var(--c-border);
  border-radius: 14px; padding: clamp(var(--sp-5), 3vw, var(--sp-7));
}

/* Aviso de envío del formulario */
.formmsg {
  margin: var(--sp-4) 0 0; padding: var(--sp-4) var(--sp-5);
  border-radius: var(--radius-form); font-size: var(--fs-sm);
}
.formmsg[hidden] { display: none; }
.formmsg--ok  { background: rgba(31,122,61,.1);  border-left: 4px solid #1f7a3d; color: #1a5c30; }
.formmsg--err { background: rgba(192,57,43,.08); border-left: 4px solid #c0392b; color: #8e2a20; }

/* trampa antispam: invisible para personas, presente para bots */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ==========================================================================
   14. COMPRA AL POR MAYOR
   ========================================================================== */
/* Banner de una sola imagen: el original era un carrusel de UNA diapositiva
   con flechas y puntos. Se quedan los controles fuera. */
.hero--single .hero__slide { opacity: 1; visibility: visible; }
.hero--single .hero__arrow, .hero--single .hero__dots { display: none; }

.wholesale { max-width: 680px; margin-inline: auto; }
.wholesale__head { text-align: center; margin-bottom: var(--sp-7); }
.wholesale__head h2 { font-size: clamp(1.75rem, 2.4vw + 1.2rem, 2.75rem); font-weight: 700; margin: 0; }

/* ==========================================================================
   15. MI CUENTA
   Estructura de WooCommerce: form-login.php (dos columnas acceder/registrarse)
   y navigation.php + endpoints (escritorio, pedidos, descargas, direcciones,
   detalles de la cuenta, cerrar sesión).
   ========================================================================== */
.acct { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--sp-5), 4vw, var(--sp-8)); align-items: start; }
@media (max-width: 860px) { .acct { grid-template-columns: 1fr; } }
.acct__box {
  background: #fff; border: 1px solid var(--c-border);
  border-radius: 14px; padding: clamp(var(--sp-5), 3vw, var(--sp-7));
}
.acct__box h2 { font-size: var(--fs-h4); font-weight: 700; margin-bottom: var(--sp-5); }
.acct__note { font-size: var(--fs-sm); color: var(--c-text-soft); margin-bottom: var(--sp-5); }
.acct__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-4); }
.acct__row .check { margin: 0; }
.acct__row a { font-size: var(--fs-sm); }

/* Panel de la cuenta */
.panel { display: grid; grid-template-columns: 260px minmax(0,1fr); gap: clamp(var(--sp-5), 4vw, var(--sp-8)); align-items: start; }
@media (max-width: 860px) { .panel { grid-template-columns: 1fr; } }

.panel__nav { background: var(--c-bg-soft); border: 1px solid var(--c-border); border-radius: 14px; padding: var(--sp-3); }
.panel__nav a {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-form);
  font-size: var(--fs-sm); font-weight: 500; color: var(--c-title);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.panel__nav a:hover { background: #fff; color: var(--c-link); }
.panel__nav a[aria-current="page"] { background: var(--c-primary); color: #fff; }
.panel__nav svg { flex: none; }
.panel__nav li + li { margin-top: 2px; }

.panel__pane[hidden] { display: none; }
.panel__pane h2 { font-size: var(--fs-h4); font-weight: 700; margin-bottom: var(--sp-4); }
.panel__hi { font-size: var(--fs-lg); }
.panel__hi strong { color: var(--c-title); }

/* Tabla de pedidos */
.orders { border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden; }
.orders__head, .orders__row {
  display: grid; grid-template-columns: 1fr 1.2fr 1fr 1fr auto;
  gap: var(--sp-4); align-items: center; padding: var(--sp-4) var(--sp-5);
}
.orders__head {
  background: var(--c-bg-soft);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--c-text-soft);
}
.orders__row + .orders__row, .orders__head + .orders__row { border-top: 1px solid var(--c-border); }
.orders__row a { font-weight: 600; }
.tag {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: var(--fs-xs); font-weight: 600;
}
.tag--ok   { background: rgba(31,122,61,.12);  color: #1a5c30; }
.tag--wait { background: rgba(249,177,22,.18); color: #6b4d05; }
@media (max-width: 720px) {
  .orders__head { display: none; }
  .orders__row { grid-template-columns: 1fr auto; row-gap: var(--sp-2); }
  .orders__row > :nth-child(2), .orders__row > :nth-child(3) { font-size: var(--fs-sm); color: var(--c-text-soft); }
}

/* Direcciones */
.addrs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
@media (max-width: 720px) { .addrs { grid-template-columns: 1fr; } }
.addr { border: 1px solid var(--c-border); border-radius: var(--radius); padding: var(--sp-5); }
.addr h3 { font-size: var(--fs-base); font-weight: 700; margin-bottom: var(--sp-3); }
.addr address { font-style: normal; line-height: 1.8; margin-bottom: var(--sp-4); }
.panel__empty { color: var(--c-text-soft); }

/* ==========================================================================
   16. ACORDEÓN (Preguntas frecuentes)
   El original era un bloque de texto con <b> dentro de <p>: sin jerarquía,
   sin plegado y sin posibilidad de datos estructurados.
   ========================================================================== */
.faq { max-width: 860px; margin-inline: auto; }
.faq__item { border-bottom: 1px solid var(--c-border); }
.faq__item:first-child { border-top: 1px solid var(--c-border); }
.faq__q { margin: 0; }
.faq__btn {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5);
  width: 100%; padding: var(--sp-5) var(--sp-2);
  background: none; border: 0; text-align: left;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.0625rem, .6vw + .95rem, 1.25rem);
  color: var(--c-title); line-height: 1.35;
  transition: color .2s var(--ease);
}
.faq__btn:hover { color: var(--c-link); }
.faq__ico {
  flex: none; width: 34px; height: 34px; display: grid; place-items: center;
  border: 2px solid var(--c-border); border-radius: 999px;
  transition: transform .3s var(--ease), background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.faq__btn:hover .faq__ico { border-color: var(--c-link); color: var(--c-link); }
.faq__btn[aria-expanded="true"] .faq__ico {
  transform: rotate(45deg);
  background: var(--c-primary); border-color: var(--c-primary); color: #fff;
}
.faq__a { overflow: hidden; }
.faq__a[hidden] { display: none; }
.faq__a > div { padding: 0 var(--sp-2) var(--sp-5); max-width: 68ch; }
.faq__a p:last-child { margin-bottom: 0; }

/* ==========================================================================
   17. PÁGINAS LEGALES
   Texto reproducido palabra por palabra. Sólo cambia cómo se lee:
   medida de línea limitada, jerarquía clara y numeración visible.
   ========================================================================== */
.legal { max-width: 78ch; margin-inline: auto; }
.legal h2 {
  font-size: clamp(1.375rem, 1.4vw + 1.05rem, 1.875rem); font-weight: 700;
  margin: var(--sp-8) 0 var(--sp-4); padding-bottom: var(--sp-3);
  border-bottom: 2px solid var(--c-border);
}
.legal > h2:first-child { margin-top: 0; }
.legal h3 {
  font-size: clamp(1.125rem, .9vw + 1rem, 1.375rem); font-weight: 700;
  margin: var(--sp-7) 0 var(--sp-3); color: var(--c-title);
}
.legal h4 {
  font-family: var(--font-body); font-size: var(--fs-base); font-weight: 700;
  letter-spacing: 0; margin: var(--sp-6) 0 var(--sp-2); color: var(--c-title);
}
.legal p { margin-bottom: var(--sp-4); }
.legal ul { margin: 0 0 var(--sp-5); padding: 0; }
.legal li { position: relative; padding-left: var(--sp-5); margin-bottom: var(--sp-2); }
.legal li::before {
  content: ""; position: absolute; left: 0; top: .7em;
  width: 6px; height: 6px; background: var(--c-link); border-radius: 999px;
}
.legal strong { color: var(--c-title); }
.legal a { text-decoration: underline; text-underline-offset: 3px; }

/* Índice lateral */
.legalwrap { display: grid; grid-template-columns: 250px minmax(0,1fr); gap: clamp(var(--sp-6), 5vw, var(--sp-8)); align-items: start; }
@media (max-width: 1024px) { .legalwrap { grid-template-columns: 1fr; } .legal { max-width: none; } }
.toc {
  position: sticky; top: calc(var(--header-h) + var(--sp-4));
  background: var(--c-bg-soft); border: 1px solid var(--c-border);
  border-radius: 14px; padding: var(--sp-5); font-size: var(--fs-sm);
}
@media (max-width: 1024px) { .toc { position: static; } }
.toc h2 {
  font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--c-text-soft);
  margin-bottom: var(--sp-3);
}
.toc a { display: block; padding: var(--sp-2) 0; color: var(--c-title); line-height: 1.4; }
.toc a:hover { color: var(--c-link); }
.toc a.is-here { color: var(--c-link); font-weight: 600; }
.legal :target { scroll-margin-top: calc(var(--header-h) + var(--sp-5)); }
/* con 19 secciones el índice supera la altura de la ventana */
@media (min-width: 1025px) {
  .toc { max-height: calc(100vh - var(--header-h) - var(--sp-7)); overflow-y: auto; overscroll-behavior: contain; }
  .toc::-webkit-scrollbar { width: 6px; }
  .toc::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 999px; }
}

/* ==========================================================================
   18. 404
   ========================================================================== */
.e404 { text-align: center; max-width: 640px; margin-inline: auto; padding-block: var(--sp-6); }
.e404__num {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(6rem, 18vw, 12rem); line-height: .9; color: var(--c-title);
  letter-spacing: -0.04em; margin-bottom: var(--sp-5);
  font-optical-sizing: none; font-variation-settings: "opsz" 14;
}
.e404__num span { color: var(--c-link); }
.e404 h1 { font-size: clamp(1.75rem, 2.4vw + 1.2rem, 2.75rem); margin-bottom: var(--sp-4); }
.e404 > p { font-size: var(--fs-lg); margin-bottom: var(--sp-6); }
.e404__cta { display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: center; margin-top: var(--sp-6); }

.searchform { display: flex; gap: var(--sp-3); max-width: 480px; margin-inline: auto; }
.searchform input {
  flex: 1; min-width: 0; min-height: 48px; padding: 0 var(--sp-4);
  font: inherit; color: var(--c-title); background: #fff;
  border: var(--form-brd-w) solid var(--c-border); border-radius: var(--radius-form);
}
.searchform input:focus { outline: none; border-color: var(--c-link); box-shadow: 0 0 0 3px rgba(221,153,51,.15); }
.searchform input::placeholder { color: var(--c-text-soft); }
@media (max-width: 480px) { .searchform { flex-direction: column; } }

/* la 2.a diapositiva usa H2 (un solo H1 por página) pero se ve igual */
.hero__content h2 { font-size: var(--fs-h1); }
/* Los tres pasos del checkout, centrados */
.co__step { text-align: center; }

/* ==========================================================================
   19. AVISOS DE WOOCOMMERCE
   Al quitar el CSS de WooCommerce estos mensajes se quedaban sin estilo:
   una caja con borde fino y el texto pegado al borde.
   ========================================================================== */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notices-wrapper > ul {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4);
  margin: 0 0 var(--sp-5); padding: var(--sp-4) var(--sp-5);
  border: 0; border-left: 4px solid var(--c-link); border-radius: var(--radius-form);
  background: var(--c-bg-soft); color: var(--c-title);
  font-size: var(--fs-sm); line-height: 1.5;
  list-style: none;
}
.woocommerce-message { border-left-color: #1f7a3d; background: rgba(31,122,61,.09); color: #1a5c30; }
.woocommerce-info    { border-left-color: var(--c-link); background: rgba(249,177,22,.14); color: #6b4d05; }
.woocommerce-error   { border-left-color: #c0392b; background: rgba(192,57,43,.08); color: #8e2a20; }
.woocommerce-error li { list-style: none; }

/* El enlace de "¿Deshacer?" / "Ver carrito" se ve como botón, no como texto suelto */
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button,
.woocommerce-message .restore-item {
  order: 2; margin-left: auto;
  display: inline-flex; align-items: center; min-height: 38px;
  padding: 0 var(--sp-5);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; background: var(--c-primary);
  border: 2px solid var(--c-primary); border-radius: var(--radius-form);
  text-decoration: none;
}
.woocommerce-message .button:hover,
.woocommerce-info .button:hover,
.woocommerce-error .button:hover,
.woocommerce-message .restore-item:hover { background: #fff; color: var(--c-primary); }

.woocommerce-notices-wrapper:empty { display: none; }

/* El nombre del producto en el carrito necesita aire: con nombres largos
   el grid lo estrangulaba y partía una palabra por línea.

   El ancho se lo damos recortando el resto de columnas y el panel lateral,
   nunca con un mínimo en la columna del nombre: un minmax(220px,1fr) es un
   suelo, y cuando la fila no cabe el grid se desborda y el subtotal se mete
   debajo del resumen. Con minmax(0,1fr) la columna cede y la fila siempre
   cabe, sea cual sea el ancho de la pantalla. */
.citem__info { min-width: 0; }
.citem__name { word-break: normal; overflow-wrap: anywhere; hyphens: none; }

/* Los anchos de columna del carrito van SOLO donde el carrito tiene dos
   columnas, es decir por encima de 1024px.

   Esto antes iba sin media query y, al estar mas abajo en el fichero que el
   bloque movil de arriba, lo pisaba: las areas decian tres columnas
   ("thumb name del" / "thumb qty sub") y estas reglas decian seis. El
   resultado en un movil era el resumen montado encima del producto y el
   precio comiendose la cantidad. En CSS, a igual especificidad, manda el
   ultimo: por eso hace falta la media query y no basta con el orden. */
@media (min-width: 1025px) {
  .cart { grid-template-columns: minmax(0,1fr) 340px; gap: var(--sp-6); }
  .cart__head,
  .citem { grid-template-columns: 80px minmax(0,1fr) 84px 112px 92px 32px; gap: var(--sp-3); }
  .citem__thumb img { width: 80px; }
}

@media (min-width: 1025px) and (max-width: 1200px) {
  .cart { grid-template-columns: minmax(0,1fr) 320px; gap: var(--sp-5); }
  .cart__head,
  .citem { grid-template-columns: 72px minmax(0,1fr) 76px 104px 84px 32px; }
  .citem__thumb img { width: 72px; }
}

/* Etiqueta del producto: se puede ocultar por producto */
.card__badge:empty { display: none; }

/* ---------------------------------------------------------------------------
   Checkout clásico con el aspecto de la maqueta.

   WooCommerce pinta cada campo con woocommerce_form_field(): un <p class="form-row">
   con su <label> y un <span class="woocommerce-input-wrapper"> dentro. Ese HTML no se
   reescribe —ahí viven la validación, el desplegable de Estado que cambia al cambiar
   de país y lo que añaden los plugins de pago—, así que aquí sólo se le da el aspecto
   de .field. El emparejado en dos columnas llega por las clases form-row-first y
   form-row-last que reparte cloclo_wc_columnas_checkout().
   --------------------------------------------------------------------------- */

.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--sp-4);
}

.checkout .form-row {
  grid-column: 1 / -1;
  display: block;
  margin: 0 0 var(--sp-4);
  padding: 0;
}
.checkout .form-row-first { grid-column: 1; }
.checkout .form-row-last  { grid-column: 2; }

.checkout .form-row > label {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--c-title);
}
.checkout .form-row > label.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.checkout .form-row .required,
.checkout .form-row abbr.required {
  color: #c0392b;
  text-decoration: none;
  border: 0;
}
.checkout .form-row .optional { color: var(--c-text-soft); font-weight: 400; }

.checkout .woocommerce-input-wrapper { display: block; width: 100%; }

.checkout .form-row input[type="text"],
.checkout .form-row input[type="email"],
.checkout .form-row input[type="tel"],
.checkout .form-row input[type="number"],
.checkout .form-row input[type="password"],
.checkout .form-row select,
.checkout .form-row textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--sp-3) var(--sp-4);
  font: inherit;
  color: var(--c-title);
  background: #fff;
  border: var(--form-brd-w) solid var(--c-border);
  border-radius: var(--radius-form);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.checkout .form-row textarea { min-height: 110px; resize: vertical; }
.checkout .form-row input:focus,
.checkout .form-row select:focus,
.checkout .form-row textarea:focus {
  outline: none;
  border-color: var(--c-link);
  box-shadow: 0 0 0 3px rgba(221,153,51,.15);
}
.checkout .form-row input::placeholder,
.checkout .form-row textarea::placeholder { color: var(--c-text-soft); }
.checkout .form-row.woocommerce-invalid input,
.checkout .form-row.woocommerce-invalid select { border-color: #c0392b; }

/* El desplegable de país y estado lo monta select2; le quitamos su aspecto propio. */
.checkout .select2-container--default .select2-selection--single {
  height: auto;
  min-height: 48px;
  padding: var(--sp-3) var(--sp-4);
  background: #fff;
  border: var(--form-brd-w) solid var(--c-border);
  border-radius: var(--radius-form);
  display: flex;
  align-items: center;
}
.checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0;
  line-height: 1.4;
  color: var(--c-title);
}
.checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
  top: 0;
  right: var(--sp-3);
}
.checkout .select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--c-link);
  box-shadow: 0 0 0 3px rgba(221,153,51,.15);
}

/* Casilla de "enviar a otra dirección" y sus campos. */
.co__ship-toggle { margin-bottom: var(--sp-5); }
.co__ship-toggle .check { margin-bottom: 0; }
.checkout .shipping_address { display: none; }
.checkout:has(#ship-to-different-address-checkbox:checked) .shipping_address { display: block; }
.checkout .shipping_address { margin-bottom: var(--sp-5); }

/* Crear cuenta. */
.woocommerce-account-fields .create-account { margin-bottom: var(--sp-4); }
.woocommerce-account-fields .form-row.create-account { margin-bottom: var(--sp-4); }

/* La barra del cupón y la de "ya tienes cuenta" van dentro del ancho del paso. */
.woocommerce-form-coupon-toggle,
.woocommerce-form-login-toggle { width: min(680px, 100%); margin: 0 auto var(--sp-5); }
.checkout_coupon,
.woocommerce-form-login { width: min(680px, 100%); margin: 0 auto var(--sp-6); }
.checkout_coupon .form-row,
.woocommerce-form-login .form-row { margin-bottom: var(--sp-4); }

@media (max-width: 560px) {
  .woocommerce-billing-fields__field-wrapper,
  .woocommerce-shipping-fields__field-wrapper,
  .woocommerce-additional-fields__field-wrapper { grid-template-columns: 1fr; }
  .checkout .form-row-first,
  .checkout .form-row-last { grid-column: 1; }
}

/* La lista de métodos de envío que WooCommerce mete en la fila de "Envío". */
.review__ship .woocommerce-shipping-methods,
.ctot__row .woocommerce-shipping-methods {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  align-items: flex-end;
}
.review__ship .woocommerce-shipping-methods li,
.ctot__row .woocommerce-shipping-methods li { margin: 0; }
.review__ship .woocommerce-shipping-methods label,
.ctot__row .woocommerce-shipping-methods label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--c-title);
  cursor: pointer;
  margin: 0;
}
.review__ship .woocommerce-shipping-methods input[type="radio"],
.ctot__row .woocommerce-shipping-methods input[type="radio"] {
  width: 18px; height: 18px; accent-color: var(--c-primary); flex: none;
}
.woocommerce-shipping-destination,
.woocommerce-shipping-contents {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--c-text-soft);
  font-weight: 400;
}

/* Los textos largos del resumen (la dirección de envío completa) no deben
   salirse de la tarjeta: las celdas tienen que poder encogerse y partir. */
.summary__row,
.review__sum,
.review__total { min-width: 0; }
.summary__row dt,
.summary__row dd,
.review__sum > span { min-width: 0; overflow-wrap: anywhere; }
.summary__ship-opts { text-align: right; }
.summary__ship-opts .woocommerce-shipping-methods { align-items: flex-end; }

/* Con las tres redes arriba, los iconos sociales se juntan entre sí para que
   se lean como un grupo y no empujen al menú. El carrito mantiene su aire.
   En móvil ya estaban ocultos, así que ahí no cambia nada. */
.header__tools { gap: var(--sp-3); }
.header__tools .tool--cart { margin-left: var(--sp-3); }

/* ==========================================================================
   Paginación de la tienda
   --------------------------------------------------------------------------
   La maqueta no la tiene porque se dibujó con pocos productos, pero
   WooCommerce la saca sola en cuanto hay más de los que caben en una página.
   Sin estilos salían los números en vertical, uno por línea, como una lista
   de enlaces suelta. Esto no inventa un diseño nuevo: reutiliza el borde, el
   radio y la tipografía que ya usan los botones y las tarjetas.
   ========================================================================== */

.woocommerce-pagination { margin-top: var(--sp-8); }

.woocommerce-pagination ul.page-numbers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.woocommerce-pagination li { margin: 0; }

.woocommerce-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 48px: el mismo objetivo táctil que los botones, para el móvil. */
  min-width: 48px;
  min-height: 48px;
  padding: 0 var(--sp-3);
  border: 2px solid var(--c-border);
  border-radius: var(--radius-form);
  background: var(--c-bg);
  color: var(--c-title);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: border-color .15s, background .15s, color .15s;
}

.woocommerce-pagination a.page-numbers:hover,
.woocommerce-pagination a.page-numbers:focus-visible {
  border-color: var(--c-primary);
  color: var(--c-primary);
}

/* La página en la que estás: en negro, como los botones principales. */
.woocommerce-pagination .page-numbers.current {
  border-color: var(--c-primary);
  background: var(--c-primary);
  color: #fff;
}

/* Los puntos suspensivos no son un botón: ni borde ni fondo. */
.woocommerce-pagination .page-numbers.dots {
  min-width: auto;
  padding: 0 var(--sp-1);
  border-color: transparent;
  background: none;
  color: var(--c-text-soft);
}

/* "Anterior" y "Siguiente" llevan texto, así que no se les fuerza el ancho. */
.woocommerce-pagination .page-numbers.prev,
.woocommerce-pagination .page-numbers.next {
  padding: 0 var(--sp-4);
  letter-spacing: .06em;
  text-transform: uppercase;
}