/* ===========================================================================
   ARLUMA · Estilos por página
   =========================================================================== */

/* =============================== MIGAS ==================================== */
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--text-dim);
  padding-block: var(--sp-5) 0;
}
.crumbs a { color: var(--text-muted); }
.crumbs a:hover { color: var(--brand); }
.crumbs span[aria-current] { color: var(--text); }

/* ======================= PORTADA · MARCA + VITRINA ========================
   Lo primero que se ve es el nombre, no un párrafo. La marca ocupa el lugar
   que le corresponde y el texto explicativo baja a las secciones siguientes.
   ========================================================================= */
.hero-brand {
  position: relative;
  min-height: calc(100dvh - var(--header-h) - 34px);
  display: flex;
  align-items: center;
  padding-block: var(--sp-7) var(--sp-9);
  overflow: hidden;
}

/* El resplandor detrás del nombre: es una marca de iluminación, la luz manda. */
.hero-brand::before {
  content: '';
  position: absolute;
  left: -10%; top: 50%;
  width: 70%; aspect-ratio: 1;
  transform: translateY(-50%);
  background: radial-gradient(circle, rgba(var(--brand-rgb), .20), transparent 62%);
  pointer-events: none;
}

.hero-brand__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: var(--sp-7);
  width: min(100% - var(--sp-5) * 2, var(--container));
}

/* --- El nombre ------------------------------------------------------------- */
.wordmark {
  margin: var(--sp-3) 0 var(--sp-5);
  font-family: var(--font-display);
  font-size: clamp(3.75rem, 12vw, 9rem);
  font-weight: 800;
  line-height: .92;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.wordmark__word {
  display: inline-block;
  background: linear-gradient(180deg, #fff 0%, var(--brand-soft) 55%, var(--brand-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* El halo tiene que ir en un pseudo-elemento: text-shadow no funciona sobre
     texto con relleno transparente. */
  position: relative;
}
.wordmark__word::after {
  content: 'Arluma';
  position: absolute;
  inset: 0;
  z-index: -1;
  color: var(--brand);
  filter: blur(28px);
  opacity: .38;
}

.hero-brand__claim {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  font-weight: 500;
  line-height: 1.35;
  color: var(--text);
  margin-bottom: var(--sp-6);
}

/* --- La vitrina ------------------------------------------------------------ */
.showcase {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}
.showcase__item {
  position: relative;
  display: block;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: var(--ink-800);
  box-shadow: var(--shadow-lg);
  transition: transform var(--t-med), border-color var(--t-med);
}
.showcase__item:hover { transform: translateY(-6px); border-color: rgba(var(--brand-rgb), .5); }
/* El primero es más alto y ancla la composición. */
.showcase__item:nth-child(1) { grid-row: span 2; align-self: center; }
.showcase__item:nth-child(2) { margin-top: var(--sp-6); }

.showcase__item img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--ink-850);
}
.showcase__cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--sp-6) var(--sp-4) var(--sp-3);
  background: linear-gradient(transparent, rgba(11, 8, 19, .94) 62%);
}
.showcase__cap strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
}
.showcase__cap em {
  font-style: normal;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--brand);
}

/* --- Indicador de scroll ---------------------------------------------------- */
.hero-brand__scroll {
  position: absolute;
  left: 50%; bottom: var(--sp-5);
  transform: translateX(-50%);
  width: 26px; height: 42px;
  border: 2px solid var(--line-strong);
  border-radius: var(--r-full);
  display: grid;
  place-items: start center;
  padding-top: 7px;
}
.hero-brand__scroll span {
  width: 4px; height: 8px;
  border-radius: var(--r-full);
  background: var(--brand);
  animation: scroll-hint 1.7s ease-in-out infinite;
}
@keyframes scroll-hint {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50%      { transform: translateY(12px); opacity: .25; }
}
.hero-brand__scroll:hover { border-color: var(--brand); }

@media (prefers-reduced-motion: reduce) {
  .hero-brand__scroll span { animation: none; }
}

@media (max-width: 940px) {
  .hero-brand { min-height: 0; padding-block: var(--sp-7); }
  .hero-brand__inner { grid-template-columns: 1fr; text-align: center; }
  .hero-brand .eyebrow { justify-content: center; }
  .hero-brand__actions, .hero-brand .hero__actions, .hero-brand .hero__proof { justify-content: center; }
  .showcase { max-width: 460px; margin-inline: auto; }
  .hero-brand__scroll { display: none; }
}

@media (max-width: 560px) {
  /* Los tres destacados, uno por categoría, en una sola fila. Antes el
     tercero se ocultaba y la portada mostraba sólo dos: se perdía justo la
     variedad que la vitrina existe para mostrar. */
  .showcase {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-2);
    max-width: none;
  }
  .showcase__item:nth-child(1) { grid-row: auto; align-self: auto; }
  .showcase__item:nth-child(2) { margin-top: 0; }
  .showcase__item:nth-child(3) { display: block; }

  /* El rótulo se achica con la tarjeta, si no tapa la fotografía entera. */
  .showcase__cap { padding: var(--sp-5) 8px 7px; }
  .showcase__cap strong { font-size: 11px; line-height: 1.2; }
  .showcase__cap em { font-size: 11px; }
  .wordmark { margin-block: var(--sp-2) var(--sp-4); }
}

/* ================================ HERO ==================================== */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: var(--sp-7);
  padding-block: var(--sp-9) var(--sp-8);
  min-height: min(78vh, 640px);
}
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; text-align: center; padding-block: var(--sp-8) var(--sp-7); min-height: 0; }
  .hero__actions, .hero__proof { justify-content: center; }
  .hero .eyebrow { justify-content: center; }
}

.hero h1 { font-size: var(--fs-hero); margin-bottom: var(--sp-4); }
.hero__lead { font-size: var(--fs-lg); color: var(--text-muted); max-width: 52ch; margin-bottom: var(--sp-6); }
@media (max-width: 900px) { .hero__lead { margin-inline: auto; } }

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-6); }

.hero__proof {
  display: flex; flex-wrap: wrap; gap: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}
.hero__proof div strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  color: var(--brand);
  line-height: 1.1;
}
.hero__proof div span { font-size: var(--fs-xs); color: var(--text-muted); }

/* --- Collage de la derecha --------------------------------------------------- */
.hero__art {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}
.hero__art figure {
  position: relative;
  margin: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: var(--ink-800);
  box-shadow: var(--shadow-lg);
}
.hero__art figure:nth-child(1) { grid-row: span 2; align-self: center; }
.hero__art figure:nth-child(2) { margin-top: var(--sp-6); }
.hero__art img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.hero__art figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--sp-5) var(--sp-4) var(--sp-3);
  background: linear-gradient(transparent, rgba(11,8,19,.92));
  font-size: var(--fs-xs);
  font-weight: 600;
}
.hero__art figcaption em { display: block; font-style: normal; color: var(--brand); }
@media (max-width: 900px) { .hero__art { max-width: 460px; margin-inline: auto; } }

/* =========================== PILARES DE MARCA ============================== */
.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--sp-4); }
.pillar {
  display: grid; gap: var(--sp-3);
  /* Igual que en .field: sin esto, la tarjeta estirada reparte el alto
     sobrante entre sus filas y el título de cada pilar queda a distinta
     altura que el de al lado. Se apilan desde arriba. */
  align-content: start;
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, rgba(255,255,255,.035), transparent);
  transition: border-color var(--t-med), transform var(--t-med);
}
.pillar:hover { border-color: rgba(var(--brand-rgb), .3); transform: translateY(-3px); }
.pillar__icon {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: rgba(var(--brand-rgb), .12);
  color: var(--brand);
}
.pillar__icon svg { width: 21px; height: 21px; }
.pillar h3 { font-size: var(--fs-base); }
.pillar p { font-size: var(--fs-sm); color: var(--text-muted); }

/* ========================= MOSAICO DE CATEGORÍAS =========================== */
.cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--sp-4); }
.cat-tile {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 210px;
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--ink-750);
  overflow: hidden;
  transition: border-color var(--t-med), transform var(--t-med);
}
.cat-tile::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(320px 200px at 78% 18%, rgba(var(--brand-rgb), .22), transparent 70%);
  opacity: .7;
  transition: opacity var(--t-med), transform var(--t-slow);
}
.cat-tile:hover { border-color: rgba(var(--brand-rgb), .4); transform: translateY(-4px); }
.cat-tile:hover::before { opacity: 1; transform: scale(1.15); }
.cat-tile__icon { position: absolute; top: var(--sp-4); right: var(--sp-5); font-size: 2.5rem; opacity: .9; }
.cat-tile h3 { position: relative; font-size: var(--fs-xl); color: var(--text); margin-bottom: var(--sp-2); }
.cat-tile p { position: relative; font-size: var(--fs-sm); color: var(--text-muted); }
.cat-tile__count { position: relative; margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--brand); font-weight: 600; }

/* ============================== CATÁLOGO =================================== */
.catalog { display: grid; grid-template-columns: 250px 1fr; gap: var(--sp-6); align-items: start; }
@media (max-width: 880px) { .catalog { grid-template-columns: 1fr; } }

.catalog__aside {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-4));
  display: grid; gap: var(--sp-5);
}
@media (max-width: 880px) { .catalog__aside { position: static; } }

.filter-group { display: grid; gap: var(--sp-3); }
.filter-group h3 {
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.filter-list { display: grid; gap: var(--sp-1); }
.filter-list button {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  text-align: left;
  transition: all var(--t-fast);
}
.filter-list button:hover { background: rgba(255,255,255,.05); color: var(--text); }
.filter-list button.is-active { background: rgba(var(--brand-rgb), .12); color: var(--brand); font-weight: 600; }
.filter-list small { color: var(--text-dim); font-size: var(--fs-xs); }

.catalog__toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.catalog__count { font-size: var(--fs-sm); color: var(--text-muted); }
.search-box { position: relative; flex: 1; min-width: 200px; }
.search-box .input { padding-left: var(--sp-7); }
.search-box svg {
  position: absolute; left: var(--sp-4); top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  color: var(--text-dim);
  pointer-events: none;
}

/* =========================== FICHA DE PRODUCTO ============================= */
.pdp { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-7); align-items: start; }
/* Misma vacuna que en .field y .pillar: las filas se apilan desde arriba y no
   reparten el alto sobrante entre ellas. */
.pdp__info { align-content: start; }
/* El rótulo de categoría es `inline-flex`, así que se maqueta como texto en
   línea y el interlineado le agregaba 8 px por arriba: la primera línea de la
   columna arrancaba más abajo que el borde de la fotografía. Como bloque, no
   hay línea que lo empuje. */
.pdp__info .eyebrow { display: flex; }
@media (max-width: 880px) { .pdp { grid-template-columns: 1fr; gap: var(--sp-5); } }

.pdp__media {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: var(--ink-850);
}
.pdp__media img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.pdp__flags { position: absolute; top: var(--sp-4); left: var(--sp-4); display: flex; gap: var(--sp-2); }

.pdp__info { display: grid; gap: var(--sp-5); }
.pdp__title { font-size: var(--fs-3xl); }
.pdp__price { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
.pdp__short { color: var(--text-muted); font-size: var(--fs-lg); }
.pdp__desc { color: var(--text-muted); }

.pdp__features { list-style: none; padding: 0; display: grid; gap: var(--sp-2); }
.pdp__features li {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.pdp__features li::before {
  content: '';
  flex-shrink: 0;
  width: 16px; height: 16px;
  margin-top: 3px;
  border-radius: 50%;
  background: rgba(var(--brand-rgb), .15);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23ffb23f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.2 5 8.7l4.5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px;
}

.specs { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.specs tr { border-bottom: 1px solid var(--line); }
.specs tr:last-child { border-bottom: 0; }
.specs th, .specs td { padding: var(--sp-3) 0; text-align: left; vertical-align: top; }
.specs th { color: var(--text-muted); font-weight: 500; width: 42%; }

.pdp__buy { display: grid; gap: var(--sp-4); padding: var(--sp-5); border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--ink-750); }
.pdp__buy-row { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }
.pdp__buy-row .btn { flex: 1; min-width: 180px; }

.custom-fields { display: grid; gap: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.custom-fields > p { font-size: var(--fs-xs); color: var(--text-dim); }

/* =============================== TIENDAS =================================== */
.stores { display: grid; gap: var(--sp-5); }
.store-card {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--sp-5);
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--ink-750);
  transition: border-color var(--t-med);
}
.store-card:hover { border-color: rgba(var(--brand-rgb), .3); }
@media (max-width: 760px) { .store-card { grid-template-columns: 1fr; } }

.store-card__info { display: grid; gap: var(--sp-3); align-content: start; }
.store-card__info h3 { font-size: var(--fs-xl); }
.store-card__row { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--text-muted); }
.store-card__row svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 2px; color: var(--brand); }

.store-card__map {
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--ink-900);
  min-height: 190px;
}
.store-card__map iframe { width: 100%; height: 100%; min-height: 190px; border: 0; display: block; filter: grayscale(.3) contrast(1.05); }

/* =============================== CONTACTO ================================== */
.contact-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--sp-7); align-items: start; }
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } }

.channel-list { display: grid; gap: var(--sp-3); }
.channel {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.channel:hover { border-color: var(--brand); transform: translateX(3px); }
.channel__icon {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: rgba(var(--brand-rgb), .12);
  color: var(--brand);
  flex-shrink: 0;
}
.channel__icon svg { width: 20px; height: 20px; }
.channel strong { display: block; font-size: var(--fs-sm); color: var(--text); }
.channel span { font-size: var(--fs-xs); color: var(--text-muted); }

/* =============================== CHECKOUT ================================== */
.checkout { display: grid; grid-template-columns: 1.2fr .8fr; gap: var(--sp-6); align-items: start; }
@media (max-width: 880px) { .checkout { grid-template-columns: 1fr; } }

.checkout__aside {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-4));
  padding: var(--sp-5);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--ink-750);
  display: grid; gap: var(--sp-4);
}
@media (max-width: 880px) { .checkout__aside { position: static; } }

.checkout__step { display: grid; gap: var(--sp-4); margin-bottom: var(--sp-6); }
.checkout__step > h2 {
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-xl);
}
.checkout__step > h2 i {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--text-on-brand);
  font-style: normal;
  font-size: var(--fs-sm);
  font-weight: 700;
  flex-shrink: 0;
}

.mini-line { display: flex; gap: var(--sp-3); align-items: center; font-size: var(--fs-sm); }
.mini-line img { width: 46px; height: 46px; border-radius: var(--r-sm); object-fit: cover; background: var(--ink-900); flex-shrink: 0; }
.mini-line__name { flex: 1; min-width: 0; }
.mini-line__name strong { display: block; font-weight: 500; font-size: var(--fs-xs); line-height: 1.35; }
.mini-line__name small { color: var(--text-dim); font-size: 11px; }

/* --- Confirmación del pedido -------------------------------------------------- */
.order-done { text-align: center; display: grid; gap: var(--sp-5); justify-items: center; padding-block: var(--sp-8); }
.order-done__mark {
  width: 76px; height: 76px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(52,211,153,.14);
  border: 1px solid rgba(52,211,153,.4);
  font-size: 2rem;
}
.order-done code {
  display: inline-block;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-sm);
  background: var(--ink-700);
  border: 1px solid var(--line-strong);
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: var(--fs-lg);
  color: var(--brand);
  letter-spacing: .06em;
}

/* ============================== NOSOTROS =================================== */
.timeline { display: grid; gap: var(--sp-5); position: relative; padding-left: var(--sp-6); }
.timeline::before {
  content: '';
  position: absolute; left: 7px; top: 6px; bottom: 6px;
  width: 2px;
  background: linear-gradient(var(--brand), transparent);
}
.timeline__item { position: relative; }
.timeline__item::before {
  content: '';
  position: absolute; left: calc(var(--sp-6) * -1); top: 7px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--ink-900);
  border: 2px solid var(--brand);
}
.timeline__item h3 { font-size: var(--fs-base); margin-bottom: var(--sp-1); }
.timeline__item time { font-size: var(--fs-xs); color: var(--brand); font-weight: 600; letter-spacing: .06em; }
.timeline__item p { font-size: var(--fs-sm); color: var(--text-muted); margin-top: var(--sp-2); }

/* ============================== NEWSLETTER ================================= */
.newsletter {
  display: grid;
  gap: var(--sp-5);
  padding: var(--sp-7);
  border-radius: var(--r-xl);
  border: 1px solid var(--line-strong);
  background:
    radial-gradient(600px 300px at 20% 0%, rgba(var(--brand-rgb), .18), transparent 65%),
    radial-gradient(500px 280px at 90% 100%, rgba(var(--brand-rgb), .16), transparent 65%),
    var(--ink-750);
  text-align: center;
  justify-items: center;
}
.newsletter h2 { font-size: var(--fs-2xl); }
.newsletter p { color: var(--text-muted); max-width: 48ch; }
.newsletter form { display: flex; gap: var(--sp-2); width: min(100%, 460px); flex-wrap: wrap; }
.newsletter .input { flex: 1; min-width: 200px; border-radius: var(--r-full); }

/* ================================ FAQ ====================================== */
.faq { display: grid; gap: var(--sp-2); }
.faq details {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--ink-750);
  overflow: hidden;
}
.faq details[open] { border-color: rgba(var(--brand-rgb), .3); }
.faq summary {
  padding: var(--sp-4) var(--sp-5);
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-base);
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  font-size: var(--fs-xl);
  color: var(--brand);
  line-height: 1;
  transition: transform var(--t-fast);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 var(--sp-5) var(--sp-5); color: var(--text-muted); font-size: var(--fs-sm); }

/* ===================== CÓMO LLEVARSE UN PRODUCTO =========================
   Un catálogo web no obliga a comprar en línea: muestra todas las vías que la
   tienda tiene de verdad. Hoy son cuatro, y la primera avisa que es demo.
   ========================================================================= */
.buy-ways { display: grid; gap: var(--sp-4); }
.buy-ways h3 { font-size: var(--fs-base); }
.channel--static { cursor: default; }
.channel--static:hover { border-color: var(--line); transform: none; }

/* Bajada breve bajo el nombre de la portada. Es la única frase explicativa que
   se permite arriba: el resto del texto baja a las secciones siguientes. */
.hero-brand__sub {
  color: var(--text-muted);
  font-size: var(--fs-base);
  max-width: 44ch;
  margin-bottom: var(--sp-5);
}
@media (max-width: 940px) { .hero-brand__sub { margin-inline: auto; } }

/* ========================== MAPA DEL SITIO ================================
   Todo el catálogo en una página. Filas compactas en vez de tarjetas: acá el
   objetivo es abarcar mucho de un vistazo, no lucir cada producto.
   ========================================================================= */
.mapa__grupo { margin-bottom: var(--sp-7); }

.mapa__grupo h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-3);
  font-size: var(--fs-xl);
  margin-bottom: var(--sp-2);
}
.mapa__vertodo {
  margin-left: auto;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.mapa__grupo > .muted { font-size: var(--fs-sm); margin-bottom: var(--sp-4); }

.mapa__lista {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: var(--sp-2);
}

.mapa__item a {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--ink-750);
  color: var(--text);
  min-height: 72px;
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.mapa__item a:hover {
  border-color: var(--brand);
  background: rgba(var(--brand-rgb), .08);
  transform: translateX(3px);
}

.mapa__item img {
  width: 52px; height: 52px;
  border-radius: var(--r-sm);
  object-fit: cover;
  background: var(--ink-900);
  flex-shrink: 0;
}
.mapa__nombre {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-sm);
  line-height: 1.3;
}
.mapa__precio {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--brand);
  white-space: nowrap;
}

@media (max-width: 560px) {
  .mapa__lista { grid-template-columns: 1fr; }
  .mapa__grupo h2 { font-size: var(--fs-lg); }
  .mapa__vertodo { margin-left: 0; width: 100%; }
}

/* ===================== FORMULARIO DE PERSONALIZADOS =======================
   Elegir producto, describir el diseño y adjuntar imágenes.
   ========================================================================= */

/* --- El producto elegido, confirmado visualmente ------------------------- */
.pf-elegido {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3);
  border: 1.5px solid rgba(var(--brand-rgb), .38);
  border-radius: var(--r-md);
  background: rgba(var(--brand-rgb), .07);
}
.pf-elegido[hidden] { display: none; }
.pf-elegido img {
  width: 76px; height: 76px;
  border-radius: var(--r-sm);
  object-fit: cover;
  background: var(--ink-900);
  flex-shrink: 0;
}
.pf-elegido strong { display: block; font-family: var(--font-display); font-size: var(--fs-base); }
.pf-elegido .muted { font-size: var(--fs-sm); }

/* --- Zona de arrastre ----------------------------------------------------
   Se puede soltar archivos encima o hacer clic. Las dos formas, porque en
   celular arrastrar no existe. */
.dropzone {
  display: grid;
  place-items: center;
  padding: var(--sp-6) var(--sp-4);
  border: 2px dashed rgba(255, 255, 255, .26);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .03);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.dropzone:hover { border-color: rgba(var(--brand-rgb), .55); background: rgba(var(--brand-rgb), .06); }
.dropzone.is-over {
  border-color: var(--brand);
  background: rgba(var(--brand-rgb), .12);
  border-style: solid;
}
.dropzone__msg { display: grid; gap: var(--sp-2); justify-items: center; }
.dropzone__icono { font-size: 2rem; line-height: 1; }
.dropzone__msg strong { font-family: var(--font-display); font-size: var(--fs-base); }
.dropzone__msg .muted, .dropzone__msg small { font-size: var(--fs-sm); }
.dropzone__msg small { font-size: var(--fs-xs); }
.dropzone__boton {
  color: var(--brand-soft);
  font-weight: 600;
  text-decoration: underline;
  font-size: inherit;
}

/* --- Miniaturas de lo adjuntado ------------------------------------------ */
.adjuntos {
  list-style: none;
  padding: 0;
  margin-top: var(--sp-3);
  display: grid;
  gap: var(--sp-2);
}
.adjunto {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--ink-700);
}
.adjunto img {
  width: 52px; height: 52px;
  border-radius: var(--r-sm);
  object-fit: cover;
  background: var(--ink-900);
  flex-shrink: 0;
}
.adjunto__info { flex: 1; min-width: 0; display: grid; }
.adjunto__info strong {
  font-size: var(--fs-sm);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.adjunto__info small { font-size: var(--fs-xs); color: var(--text-dim); }
.adjunto__quitar {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  color: var(--text-muted);
  flex-shrink: 0;
  transition: color var(--t-fast), background var(--t-fast);
}
.adjunto__quitar:hover { color: var(--danger); background: rgba(255, 122, 136, .12); }
.adjunto__quitar svg { width: 17px; height: 17px; }
@media (pointer: coarse) { .adjunto__quitar { width: 44px; height: 44px; } }

/* ==================== CATÁLOGO COMPLETO POR SECCIONES =====================
   La vista de catálogo entero: una sección por categoría, todas en la misma
   página. Cada bloque se lee como un capítulo del catálogo impreso.
   ========================================================================= */
.cat-seccion { padding-block: var(--sp-7); scroll-margin-top: calc(var(--header-h) + var(--sp-4)); }
.cat-seccion[hidden] { display: none; }
.cat-seccion + .cat-seccion { border-top: 1px solid var(--line); }

.cat-seccion__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.cat-seccion__head h2 { font-size: var(--fs-2xl); margin-bottom: var(--sp-2); }
.cat-seccion__head .muted { font-size: var(--fs-sm); max-width: 56ch; }

@media (max-width: 760px) {
  .cat-seccion { padding-block: var(--sp-6); }
  .cat-seccion__head { flex-direction: column; align-items: flex-start; }
}

/* El selector del catálogo completo queda pegado arriba al hacer scroll:
   así se puede saltar de sección en cualquier momento. */
#catalogo .cat-selector {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-2));
  z-index: var(--z-sticky);
  padding-block: var(--sp-2);
  background: var(--glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: var(--r-full);
}


/* ===========================================================================
   DOS COLUMNAS: QUE LOS TÍTULOS COINCIDAN
   --------------------------------------------------------------------------
   En contacto, personalizados, despachos y el checkout, una columna es una
   tarjeta con relleno y la otra no. Las dos cajas empiezan a la misma altura,
   pero el relleno de la tarjeta empuja SU título 24 px hacia abajo, así que
   los dos encabezados —que es lo que el ojo compara— quedaban torcidos.

   Se le da a la columna sin tarjeta el mismo respiro superior, de modo que
   ambos títulos arranquen en la misma línea.

   Se apunta a `> form` y no a "cualquier hijo que no sea tarjeta" porque el
   carrito usa la misma rejilla y su columna izquierda es una LISTA sin título:
   ahí no hay nada con qué alinearse y el relleno sólo separaba el primer
   producto del resumen que tiene al lado.
   =========================================================================== */
.contact-grid > :not(.card),
.checkout > form {
  padding-top: var(--sp-5);
}

/* En una sola columna ese respiro sobra: ahí no hay nada con qué alinearse y
   sólo agregaría un hueco antes del primer título.

   Los dos puntos de quiebre son distintos y eso NO es un descuido: contacto
   sigue en dos columnas en tablet vertical (ver la banda de 700–940 en
   responsive.css), así que sólo pasa a una bajo 700. El checkout, en cambio,
   se apila bajo 880. Poner el mismo número en los dos dejaba los títulos de
   contacto otra vez torcidos en tablet. */
@media (max-width: 699px) {
  .contact-grid > :not(.card) { padding-top: 0; }
}
@media (max-width: 880px) {
  .checkout > form { padding-top: 0; }
}