/* styles/extras.css — Páginas adicionales: contacto, nosotros, FAQ, legales, búsqueda, carrito */

/* FIX: el atributo [hidden] debe ganar sobre display:grid/flex de otras reglas */
[hidden] { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════
   ENVIOS — Grid horizontal + tipografia mas chica + espacios reducidos
   ─────────────────────────────────────────────────────────────────── */
.envios-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 24px !important;
  align-items: start !important;
}
.envios-cta { display: none !important; }

/* Hero: tipografia mas chica y padding reducido */
.envios-hero { padding: 36px 0 24px !important; }
.envios-hero h1 {
  font-size: clamp(28px, 4vw, 40px) !important;
  line-height: 1.15 !important;
  margin: 8px 0 10px !important;
}
.envios-hero-eyebrow { font-size: 11px !important; }
.envios-hero-sub { font-size: 15px !important; max-width: 620px; }

/* Secciones envios: menos padding */
.envios-niveles { padding: 24px 0 !important; }
.envios-footnote { padding: 16px 0 24px !important; }
.envios-niveles + .section,
.section.section-tight { padding: 28px 0 !important; }

/* Cards de nivel: contenido mas compacto */
.nivel-card { padding: 22px !important; }
.nivel-card h2 { font-size: 22px !important; margin: 0 0 6px !important; }
.nivel-sub { font-size: 13.5px !important; margin: 6px 0 14px !important; }
.ciudad-row { padding: 9px 0 !important; font-size: 14px !important; }
.paso-row { padding: 10px 0 !important; }
.paso-content h3 { font-size: 15px !important; margin: 0 0 3px !important; }
.paso-content p { font-size: 13px !important; }

/* ═══════════════════════════════════════════════════════════════════
   MOBILE — Optimizaciones para celular (≤ 720px)
   ─────────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  html { -webkit-text-size-adjust: 100%; }
  body { overflow-x: hidden; }

  /* ── Header compacto ───────────────────────────────────────────── */
  .topbar { font-size: 10px; padding: 8px 0; }
  .topbar-track { gap: 48px; }
  .header-inner { height: 64px !important; gap: 12px !important; }
  .logo svg { height: 24px !important; }
  .nav-actions { gap: 2px; }
  .icon-btn { width: 36px; height: 36px; }
  .nav { display: none !important; }
  .menu-btn { display: grid !important; }
  /* Catnav: oculta en mobile (queda accesible por menú hamburguesa) */
  .catnav-wrap { display: none; }
  .header { top: 28px !important; }

  /* ── Hero ─────────────────────────────────────────────────────── */
  .hero { min-height: 520px !important; height: auto !important; }
  .hero-text h1 { font-size: clamp(32px, 9vw, 48px) !important; }
  .hero-text p { font-size: 14px !important; }
  .hero-text { padding: 32px 0 !important; gap: 14px !important; }
  .hero-actions .btn,
  .hero-actions .btn-ghost-light { padding: 12px 20px; font-size: 12px; flex: 1; min-width: 0; justify-content: center; }
  .hero-actions { width: 100%; }
  .hero-nav { display: flex; width: 40px; height: 40px; }
  .hero-dots { bottom: 16px !important; }

  /* ── Container general ─────────────────────────────────────────── */
  .container { padding: 0 16px !important; }
  .section { padding: 36px 0 !important; }
  .section-tight { padding: 28px 0 !important; }
  .section-head { gap: 8px; margin-bottom: 18px !important; }
  .section-head h2 { font-size: clamp(22px, 6vw, 28px) !important; }
  .section-head .link { font-size: 12px; }

  /* ── Categorías / Ambientes — 2 columnas ───────────────────────── */
  .cats { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .cat.tall, .cat.wide { grid-row: auto !important; grid-column: auto !important; aspect-ratio: 3/4 !important; }
  .cat-info strong { font-size: 16px !important; }
  .cat-info span { font-size: 9px !important; }

  /* ── Productos destacados — 2 columnas ──────────────────────────── */
  .products { grid-template-columns: repeat(2, 1fr) !important; gap: 14px 8px !important; }
  .product-info h3 { font-size: 14px !important; }
  .product-cat { font-size: 9px !important; }
  .product-quick { display: none; } /* en mobile, tap = abrir PDP, no overlay */
  .filters { gap: 6px !important; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 12px; }
  .filters::-webkit-scrollbar { display: none; }
  .filter-pill { white-space: nowrap; flex-shrink: 0; padding: 8px 14px; font-size: 12px; }

  /* ── Cómo comprar — pasos en columna ──────────────────────────── */
  .cc-section { padding: 36px 0 !important; }
  .cc-title { font-size: 1.5rem !important; }
  .cc-grid { grid-template-columns: 1fr !important; }
  .cc-card { padding: 24px 20px !important; }

  /* ── Banda cotizador ───────────────────────────────────────────── */
  .container[style*="flex-wrap:wrap"] { flex-direction: column; align-items: flex-start !important; gap: 18px; }

  /* ── Promo banner ──────────────────────────────────────────────── */
  .promo-grid { grid-template-columns: 1fr !important; gap: 24px; }
  .promo-banner h2 { font-size: clamp(28px, 7vw, 40px) !important; }
  .promo-stats { gap: 18px; }
  .promo-stat strong { font-size: 26px; }

  /* ── About / Quiénes somos ────────────────────────────────────── */
  .about { grid-template-columns: 1fr !important; gap: 20px !important; }
  .about h2 { font-size: clamp(24px, 7vw, 36px) !important; }
  .about-features { grid-template-columns: 1fr !important; gap: 14px; margin-top: 24px; }
  .nosotros-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .values-grid { grid-template-columns: 1fr !important; gap: 14px; }
  .nosotros-stats { padding: 32px 0 !important; }
  .nosotros-stats > .container { grid-template-columns: 1fr 1fr 1fr !important; gap: 14px !important; }
  .nosotros-stat strong { font-size: 28px !important; }
  .nosotros-stat span { font-size: 10px !important; }

  /* ── Beneficios ────────────────────────────────────────────────── */
  .benefits-grid { grid-template-columns: 1fr 1fr !important; gap: 16px !important; }
  .benefit { max-width: none; }

  /* ── Instagram grid ────────────────────────────────────────────── */
  .ig-grid { grid-template-columns: repeat(3, 1fr) !important; }

  /* ── PDP ────────────────────────────────────────────────────────── */
  .pdp-hero { grid-template-columns: 1fr !important; gap: 18px !important; }
  .gal { position: relative !important; top: 0 !important; }
  .gal-thumbs { grid-template-columns: repeat(4, 1fr); }
  .pdp-info h1 { font-size: clamp(26px, 7vw, 36px) !important; }
  .pdp-sub { font-size: 14px; }
  .pdp-price-main { font-size: 28px !important; }
  .pdp-cta { padding: 14px 22px; font-size: 13px; }
  .pdp-bullets { grid-template-columns: 1fr !important; }
  .trust-grid { grid-template-columns: 1fr 1fr !important; gap: 14px; }
  .related-rail { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .lifestyle-grid { grid-template-columns: 1fr 1fr !important; gap: 6px; }
  .specs-head { flex-direction: column; gap: 8px; margin-bottom: 14px !important; }

  /* ── Footer ─────────────────────────────────────────────────────── */
  .footer { padding: 48px 0 20px !important; }
  .footer-grid { grid-template-columns: 1fr !important; gap: 28px !important; margin-bottom: 32px !important; }
  .footer-brand { order: 0; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }

  /* ── Carrito drawer — full screen en mobile ─────────────────────── */
  .drawer { width: 100% !important; }
  .drawer-hd { padding: 16px 18px !important; }
  .drawer-body { padding: 6px 18px !important; }
  .drawer-foot { padding: 16px 18px !important; }
  .cart-item { grid-template-columns: 64px 1fr auto !important; gap: 10px !important; padding: 14px 0 !important; }

  /* ── Cotizador modal — full screen ──────────────────────────────── */
  .cot-backdrop { padding: 0 !important; }
  .cot-modal { width: 100% !important; height: 100% !important; max-height: 100% !important; border-radius: 0 !important; }
  .cot-grid { grid-template-columns: 1fr !important; }
  .cot-form, .cot-summary { padding: 22px 18px !important; }
  .cot-title { font-size: 22px !important; }
  .cot-room-fields { grid-template-columns: 1fr 1fr !important; }
  .cot-close { top: 10px !important; right: 10px !important; }

  /* ── Search overlay ────────────────────────────────────────────── */
  .search-input { font-size: 28px !important; }

  /* ── Page heroes (envíos, contacto, etc) ───────────────────────── */
  .page-hero { padding: 28px 0 20px !important; }
  .page-hero h1 { font-size: clamp(30px, 8vw, 44px) !important; }
  .page-hero p { font-size: 14px !important; }

  /* ── Envíos & cobertura ────────────────────────────────────────── */
  .envios-grid { grid-template-columns: 1fr !important; gap: 18px !important; }
  .envios-cta-inner { flex-direction: column; align-items: flex-start; gap: 18px; }

  /* ── FAQ ────────────────────────────────────────────────────────── */
  .faq-q { font-size: 16px !important; padding: 18px 0 !important; }
  .faq-a p { font-size: 14px !important; }

  /* ── Contacto ──────────────────────────────────────────────────── */
  .contact-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .contact-form { padding: 24px !important; }
  .contact-form .row { grid-template-columns: 1fr !important; }

  /* ── Closing CTA dark ──────────────────────────────────────────── */
  .closing-inner { grid-template-columns: 1fr !important; gap: 18px; }
  .btn-whatsapp { width: 100%; justify-content: center; }

  /* ── Sticky bottom CTA del PDP ──────────────────────────────────── */
  body { padding-bottom: 76px; }  /* deja lugar al sticky CTA */
  .pdp-sticky { display: flex !important; }

  /* ── WhatsApp flotante ─────────────────────────────────────────── */
  .wa { bottom: 88px !important; left: 14px !important; width: 52px !important; height: 52px !important; }
  .wa-bubble { display: none; }

  /* ── Targets táctiles mínimos (Apple HIG 44px) ─────────────────── */
  button, .btn, .btn-ghost, a.btn, .filter-pill, .pdp-cta {
    min-height: 44px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE EXTRA SMALL (≤ 380px) — iPhone SE, Galaxy A series
   ─────────────────────────────────────────────────────────────────── */
@media (max-width: 380px) {
  .container { padding: 0 12px !important; }
  .hero-text h1 { font-size: 26px !important; }
  /* En pantalla chica seguir mostrando 2 columnas — más útil que 1 */
  #categorias .cats,
  .cats { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  #categorias .cat,
  .cats > .cat { aspect-ratio: 3/4 !important; }
  .products { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   COTIZADOR — Ajuste de proporciones para que no se corte el resumen
   ─────────────────────────────────────────────────────────────────── */
.cot-modal {
  width: min(1080px, 96vw) !important;
  max-height: 92vh !important;
}
.cot-grid {
  /* Más equilibrio entre lado izquierdo y derecho */
  grid-template-columns: 1fr 1fr !important;
}
.cot-summary {
  padding: 36px 32px !important;
  min-width: 0;
  overflow: auto;
}
.cot-summary h3 {
  padding-right: 50px; /* dejar lugar al botón close */
}
.cot-summary > div,
.cot-summary > div > * {
  min-width: 0;
  word-wrap: break-word;
}
/* El número grande "Necesitás X" no se corta */
.cot-summary strong {
  word-break: normal !important;
}
@media (max-width: 760px) {
  .cot-grid {
    grid-template-columns: 1fr !important;
  }
  .cot-form, .cot-summary {
    padding: 24px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   PRODUCTO AGOTADO + estado visual fragment legacy
   ─────────────────────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════
   PRODUCTO AGOTADO + estado visual
   ─────────────────────────────────────────────────────────────────── */
.product-tag.agotado {
  background: #b20000 !important;
  color: #fff !important;
  font-weight: 600 !important;
}
.product.is-agotado .product-img img {
  filter: grayscale(0.55) opacity(0.85);
}
.product.is-agotado .product-quick { opacity: .6; }
.product.is-agotado h3 a { color: var(--muted); }
.product .add[disabled] {
  background: #ccc !important;
  cursor: not-allowed !important;
}


/* ═══════════════════════════════════════════════════════════════════
   HERO — Texto alineado ABAJO IZQUIERDA (todos los slides)
   ─────────────────────────────────────────────────────────────────── */
.hero-content {
  align-items: flex-end !important;
  padding-bottom: 80px !important;
  padding-top: 0 !important;
}
.hero-content > .container {
  margin: 0 !important;
  max-width: none !important;
  padding-left: clamp(24px, 5vw, 88px) !important;
  padding-right: clamp(24px, 5vw, 88px) !important;
  width: 100%;
}
.hero-text {
  max-width: min(640px, 55vw);
  text-align: left;
  align-items: flex-start;
  margin: 0;
  padding: 0 !important;
}
.hero-actions {
  justify-content: flex-start !important;
}
@media (max-width: 720px) {
  .hero-content { padding-bottom: 56px !important; }
  .hero-content > .container { padding-left: 18px !important; padding-right: 18px !important; }
  .hero-text { max-width: 100% !important; }
}


/* ═══════════════════════════════════════════════════════════════════
   Scroll suave + offset para header sticky
   ─────────────────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }
#quienes-somos,
#categorias,
#como-comprar,
#cotizador {
  scroll-margin-top: 140px;
}
@media (max-width: 720px) {
  #quienes-somos,
  #categorias,
  #como-comprar,
  #cotizador { scroll-margin-top: 96px; }
}

/* ═══════════════════════════════════════════════════════════════════
   PAGE HERO genérico (Contacto, Nosotros, Envíos, FAQ, Legales)
   ─────────────────────────────────────────────────────────────────── */
.page-hero { padding: 56px 0 40px; background: var(--bg); border-bottom: 1px solid var(--line); }
.page-hero-inner { max-width: 880px; }
.page-hero .eyebrow,
.page-hero-inner .eyebrow {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent-deep); font-weight: 500;
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px;
}
.page-hero .eyebrow::before { content: ""; width: 18px; height: 1px; background: var(--accent-deep); }
.page-hero h1 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(38px, 5vw, 72px); line-height: 1.02; letter-spacing: -.025em;
  margin: 0 0 18px; color: var(--ink); text-wrap: balance;
}
.page-hero h1 em { font-style: italic; font-weight: 500; color: var(--accent-deep); }
.page-hero p {
  font-family: var(--font-display); font-weight: 400; font-style: italic;
  font-size: clamp(16px, 1.4vw, 19px); line-height: 1.5; color: var(--ink-soft);
  margin: 0; max-width: 680px;
}

/* Breadcrumbs */
.crumbs {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 18px;
  display: flex; align-items: center; gap: 8px;
}
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent-deep); }
.crumbs .sep { color: var(--line-strong); }
.crumbs .current { color: var(--ink); }

/* ═══════════════════════════════════════════════════════════════════
   CONTACTO
   ─────────────────────────────────────────────────────────────────── */
.contact { padding: 56px 0 80px; }
.contact-grid {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: start;
}
.contact-form {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 36px;
  display: flex; flex-direction: column; gap: 18px;
}
.contact-form label { display: flex; flex-direction: column; gap: 6px; }
.contact-form label > span {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); font-weight: 500;
}
.contact-form input,
.contact-form textarea,
.contact-form select {
  border: 1px solid var(--line-strong); background: var(--paper);
  padding: 12px 14px; font-family: inherit; font-size: 14px; color: var(--ink);
  border-radius: 6px; outline: none; transition: border-color .15s;
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus { border-color: var(--accent); }
.contact-form textarea { resize: vertical; min-height: 120px; line-height: 1.5; }
.contact-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contact-form button { align-self: flex-start; margin-top: 8px; }

.contact-info { display: flex; flex-direction: column; gap: 20px; }
.contact-info-card {
  background: var(--bg-alt); border-radius: var(--radius-lg); padding: 24px;
}
.contact-info-card h3 {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent-deep); font-weight: 500; margin: 0 0 14px;
}
.contact-info-card .row {
  display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px;
}
.contact-info-card .row:last-child { margin-bottom: 0; }
.contact-info-card .row svg { flex-shrink: 0; color: var(--accent-deep); margin-top: 1px; }
.contact-info-card strong {
  font-family: var(--font-display); font-weight: 500; font-size: 16px;
  color: var(--ink); display: block; margin-bottom: 2px; letter-spacing: -.005em;
}
.contact-info-card span { font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; }
.contact-info-card a { color: var(--ink-soft); text-decoration: none; }
.contact-info-card a:hover { color: var(--accent-deep); }

.contact-social {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.contact-social a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border: 1px solid var(--line-strong);
  border-radius: 999px; font-size: 13px; color: var(--ink);
  text-decoration: none; transition: all .15s;
}
.contact-social a:hover { border-color: var(--accent); color: var(--accent-deep); }

@media (max-width: 880px) {
  .contact-grid { grid-template-columns: 1fr; gap: 36px; }
}

/* ═══════════════════════════════════════════════════════════════════
   PROSE (legales, FAQ, contenido editorial)
   ─────────────────────────────────────────────────────────────────── */
.prose { max-width: 780px; margin: 0 auto; padding: 56px 0; }
.prose h2 {
  font-family: var(--font-display); font-weight: 500; font-size: 30px;
  letter-spacing: -.02em; margin: 48px 0 14px; line-height: 1.15;
}
.prose h2:first-child { margin-top: 0; }
.prose p { font-size: 15px; line-height: 1.65; color: var(--ink-soft); margin: 0 0 16px; }
.prose ul { padding-left: 20px; margin: 0 0 16px; }
.prose li { font-size: 15px; line-height: 1.65; color: var(--ink-soft); margin-bottom: 6px; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; }

/* ═══════════════════════════════════════════════════════════════════
   FAQ accordion
   ─────────────────────────────────────────────────────────────────── */
.faq { padding: 24px 0 64px; }
.faq-list {
  max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: 0;
  border-top: 1px solid var(--line);
}
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  appearance: none; border: 0; background: transparent; width: 100%;
  text-align: left; padding: 24px 0; display: flex; justify-content: space-between;
  align-items: center; gap: 18px; cursor: pointer;
  font-family: var(--font-display); font-weight: 500; font-size: 19px;
  letter-spacing: -.005em; color: var(--ink); line-height: 1.3;
}
.faq-q:hover { color: var(--accent-deep); }
.faq-q .chev { flex-shrink: 0; transition: transform .25s; color: var(--accent-deep); }
.faq-item.open .faq-q .chev { transform: rotate(180deg); }
.faq-a {
  max-height: 0; overflow: hidden; transition: max-height .35s ease, padding .25s ease;
  padding: 0 36px 0 0;
}
.faq-item.open .faq-a { max-height: 600px; padding-bottom: 24px; }
.faq-a p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--ink-soft); }


/* ═══════════════════════════════════════════════════════════════════
   Grid de categorías — 4 columnas fijas, todas las cards iguales
   ─────────────────────────────────────────────────────────────────── */
#categorias .cats,
.cats {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  grid-auto-rows: 1fr !important;
  gap: 14px !important;
}
#categorias .cat,
.cats > .cat {
  grid-column: auto !important;
  grid-row: auto !important;
  aspect-ratio: 4/5 !important;
  width: 100% !important;
  height: auto !important;
}
/* Tablet: 3 columnas */
@media (max-width: 1100px) {
  #categorias .cats,
  .cats { grid-template-columns: repeat(3, 1fr) !important; }
}
/* Mobile chico: 2 columnas */
@media (max-width: 720px) {
  #categorias .cats,
  .cats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  #categorias .cat,
  .cats > .cat { aspect-ratio: 3/4 !important; }
}


/* ═══════════════════════════════════════════════════════════════════
   ASESORAMIENTO INTEGRAL — Full-bleed con imagen de fondo
   ─────────────────────────────────────────────────────────────────── */
.asesoramiento {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  min-height: 560px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #1a1410;
}
.asesoramiento-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  z-index: 0;
}
.asesoramiento-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(15,12,10,0.92) 0%,
    rgba(15,12,10,0.78) 35%,
    rgba(15,12,10,0.42) 60%,
    rgba(15,12,10,0.10) 100%);
  z-index: 1;
}
.asesoramiento-inner {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: 88px clamp(24px, 5vw, 88px);
  color: var(--paper);
}
.asesoramiento-inner .section-eyebrow {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; font-weight: 500; margin-bottom: 18px;
  display: inline-flex; align-items: center; gap: 8px;
}
.asesoramiento-inner h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.05; letter-spacing: -.025em;
  margin: 0 0 22px; color: var(--paper);
  max-width: 640px; text-wrap: balance;
}
.asesoramiento-inner h2 em {
  font-style: italic; font-weight: 500; color: var(--accent);
}
.asesoramiento-inner p {
  font-size: 16px; line-height: 1.6;
  color: rgba(250,246,238,.92);
  max-width: 540px; margin: 0 0 28px;
}
.asesoramiento-inner .btn {
  background: var(--paper); color: var(--ink); border-color: var(--paper);
  padding: 14px 28px; font-size: 13px;
}
.asesoramiento-inner .btn:hover {
  background: var(--accent); color: var(--paper); border-color: var(--accent);
}
.asesoramiento-stats {
  display: flex; gap: 56px; margin-top: 64px;
  flex-wrap: wrap;
}
.asesoramiento-stats .promo-stat strong {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(28px, 3vw, 38px); color: var(--accent);
  display: block; letter-spacing: -.01em;
}
.asesoramiento-stats .promo-stat span {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(250,246,238,.7);
  margin-top: 4px; display: block;
}

@media (max-width: 720px) {
  .asesoramiento { min-height: 480px; }
  .asesoramiento-inner { padding: 56px 20px; }
  .asesoramiento-inner h2 br { display: none; }
  .asesoramiento-overlay {
    background: linear-gradient(180deg,
      rgba(15,12,10,0.55) 0%,
      rgba(15,12,10,0.92) 100%);
  }
  .asesoramiento-stats { gap: 24px; margin-top: 36px; }
}


/* ═══════════════════════════════════════════════════════════════════
   TEXTOS JUSTIFICADOS — Párrafos descriptivos del sitio
   ─────────────────────────────────────────────────────────────────── */
.asesoramiento-inner p,
.about p,
.about-features .feature p,
.cc-body,
.benefit span,
.prose p,
.faq-a p,
.pdp-sub,
.page-hero p,
.envios-info p,
.nosotros-grid p,
.values-grid .value p,
.cot-summary p {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* En mobile, no justificar — queda raro con anchos chicos */
@media (max-width: 720px) {
  .asesoramiento-inner p,
  .about p,
  .cc-body,
  .benefit span,
  .prose p,
  .faq-a p,
  .pdp-sub,
  .page-hero p {
    text-align: left;
    hyphens: none;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   TIPOGRAFIA — Reemplazo del display por Fraunces (mas limpia/moderna)
   ─────────────────────────────────────────────────────────────────── */
:root {
  --font-display: 'Fraunces', 'Cormorant Garamond', Georgia, serif !important;
}
/* h1, h2, h3 — usan la nueva tipografia con peso ligeramente mayor para legibilidad */
h1, h2, h3,
.h-display,
.section-head h2,
.hero h1,
.pdp-info h1,
.page-hero h1,
.product-info h3,
.product-info h3 a,
.cc-step-title,
.about h2,
.asesoramiento-inner h2,
.faq-q,
.cot-title,
.logo,
.related h2,
.lifestyle h2,
.cc-title {
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 400;
  letter-spacing: -.01em;
}
/* Itálicas siguen siendo elegantes */
em, i, .it {
  font-family: 'Fraunces', Georgia, serif !important;
  font-style: italic;
  font-weight: 400;
}


/* ═══════════════════════════════════════════════════════════════════
   PRODUCTOS RELACIONADOS — Grid de 5 con fotos ajustadas (no pixeladas)
   ─────────────────────────────────────────────────────────────────── */
.related .related-rail {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 16px !important;
}
.related .product {
  width: 100% !important;
}
.related .product .product-img {
  position: relative;
  display: block;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;     /* recuadro cuadrado */
  overflow: hidden;
  background: var(--bg-alt);
  border-radius: var(--radius-md, 8px);
}
.related .product .product-img img,
.related .product .product-img .ph {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;        /* cubre todo sin deformar */
  object-position: center !important;
  display: block;
  image-rendering: auto;               /* renderizado limpio */
}
.related .product-info { padding-top: 12px; }
.related .product-info h3 { font-size: 14px !important; line-height: 1.25; margin: 4px 0 2px; }
.related .product-info .product-cat { font-size: 9.5px !important; }

/* Tablet: 4 por fila */
@media (max-width: 1100px) {
  .related .related-rail { grid-template-columns: repeat(4, 1fr) !important; }
}
/* Mobile: 2 por fila + horizontal scroll opcional */
@media (max-width: 720px) {
  .related .related-rail { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .related .product .product-img { aspect-ratio: 1 / 1 !important; }
}


/* ═══════════════════════════════════════════════════════════════════
   Header FIXED — siempre visible (más robusto que sticky)
   ─────────────────────────────────────────────────────────────────── */
#site-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
  background: var(--paper);
  box-shadow: 0 1px 0 var(--line), 0 2px 8px rgba(42, 36, 27, 0.04);
}
.topbar { background: var(--ink) !important; color: var(--paper) !important; }
.header { background: var(--paper) !important; }
.catnav-wrap { background: var(--paper) !important; border-bottom: 1px solid var(--line); }
/* Empujar el body hacia abajo para compensar header fixed.
   IMPORTANTE: solo padding-top en body, NO duplicar con margin-top en main.
   Padding = alto exacto del header fixed (topbar ~30px + header ~50px + catnav ~50px = ~130px). */
body {
  padding-top: 130px !important;
}
/* Resetear cualquier margin-top en main para evitar doble espacio */
main {
  margin-top: 0 !important;
}
/* En interior pages el header está oculto, no necesita padding */
body.interior-page {
  padding-top: 50px !important;  /* solo catnav fijo */
}
body.interior-page main {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
@media (max-width: 720px) {
  body { padding-top: 100px !important; }  /* mobile: header más compacto */
  main { margin-top: 0 !important; }
  body.interior-page { padding-top: 48px !important; }
}


/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE MOBILE — Mejoras consolidadas para celulares (≤ 720px)
   Optimiza tamaños de texto, imágenes, paddings, layouts apilados.
   ─────────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {

  /* ── Container general — más aire en mobile ───────────────────────── */
  html, body { overflow-x: hidden; }
  .container { padding: 0 18px !important; }

  /* ── Topbar (banda con beneficios) ────────────────────────────────── */
  .topbar { font-size: 10px !important; padding: 8px 0 !important; }
  .topbar-track { gap: 32px !important; }

  /* ── Header / nav ─────────────────────────────────────────────────── */
  .header-inner { height: 60px !important; padding: 0 12px !important; }
  .logo svg { height: 22px !important; }
  .nav { display: none !important; }
  .menu-btn { display: grid !important; }
  .icon-btn { width: 38px !important; height: 38px !important; }
  .catnav-wrap { display: none !important; }

  /* ── Hero mobile: foto cubre todo + texto sobre la foto ─────────── */
  .hero {
    position: relative !important;
    height: min(85vh, 580px) !important;
    min-height: 480px !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  .hero-slide, .hero-slide.active {
    position: absolute !important;
    inset: 0 !important;
  }
  .hero-bg {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
  }
  .hero-bg img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }
  .hero-overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    background:
      linear-gradient(180deg, rgba(20,16,10,0.45) 0%, rgba(20,16,10,0.10) 35%, rgba(20,16,10,0.55) 78%, rgba(20,16,10,0.80) 100%) !important;
  }
  .hero-content {
    position: relative !important;
    z-index: 2 !important;
    height: 100% !important;
    display: flex !important;
    align-items: flex-end !important;
    padding-bottom: 70px !important;
  }
  .hero-text {
    color: var(--paper) !important;
    padding: 0 !important;
    gap: 12px !important;
    max-width: 100% !important;
  }
  .hero-eyebrow {
    font-size: 10px !important;
    color: var(--accent) !important;
  }
  .hero-text h1 {
    font-size: clamp(28px, 8.5vw, 42px) !important;
    line-height: 1.05 !important;
    margin: 0 !important;
    color: var(--paper) !important;
    text-shadow: 0 2px 16px rgba(0,0,0,0.4) !important;
  }
  .hero-text p {
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    color: rgba(250, 246, 238, 0.92) !important;
    max-width: 100% !important;
    text-shadow: 0 1px 8px rgba(0,0,0,0.4) !important;
  }
  .hero-actions {
    width: 100% !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 14px !important;
  }
  .hero-actions .btn,
  .hero-actions .btn-ghost-light {
    padding: 12px 18px !important;
    font-size: 12px !important;
    flex: 1 !important;
    min-width: 0 !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }
  .hero-dots { bottom: 16px !important; }
  .hero-meta { display: none !important; }

  /* ── Section heads / títulos ──────────────────────────────────────── */
  .section { padding: 40px 0 !important; }
  .section-tight { padding: 28px 0 !important; }
  .section-head { gap: 8px !important; margin-bottom: 20px !important; flex-direction: column !important; align-items: flex-start !important; }
  .section-head h2 { font-size: clamp(22px, 6.5vw, 30px) !important; line-height: 1.15 !important; }
  .section-head .link { font-size: 12px !important; }
  .section-eyebrow { font-size: 10px !important; }
  h2 { font-size: clamp(22px, 6.5vw, 30px) !important; line-height: 1.15 !important; }
  h3 { font-size: clamp(17px, 4.8vw, 22px) !important; }

  /* ── Cómo Comprar — cards en columna ──────────────────────────────── */
  .cc-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .cc-card { padding: 22px !important; }
  .cc-num { font-size: 38px !important; }
  .cc-step-title { font-size: 16px !important; }
  .cc-body { font-size: 13.5px !important; }
  .cc-arrow { display: none !important; }

  /* ── Categorías — 2 columnas en mobile ────────────────────────────── */
  .cats { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .cat { aspect-ratio: 3/4 !important; grid-row: auto !important; grid-column: auto !important; }
  .cat.tall, .cat.wide { grid-row: auto !important; grid-column: auto !important; aspect-ratio: 3/4 !important; }
  .cat-info { padding: 12px !important; }
  .cat-info strong { font-size: 14px !important; line-height: 1.2 !important; }
  .cat-info span { font-size: 9.5px !important; letter-spacing: .08em !important; }
  .cat-arrow { width: 28px !important; height: 28px !important; top: 10px !important; right: 10px !important; }

  /* ── Banner asesoría — stack vertical ─────────────────────────────── */
  .cc-banner { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; padding: 20px 22px !important; }
  .cc-banner-text { font-size: 14px !important; line-height: 1.45 !important; }
  .cc-banner-cta { width: 100% !important; justify-content: center !important; }

  /* ── Cotizador banda — stack vertical ─────────────────────────────── */
  section[style*="bg-alt"] .container,
  .cotizador-banda .container {
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    gap: 18px !important;
  }
  .cotizador-banda h2,
  section[style*="bg-alt"] h2 { font-size: clamp(22px, 6vw, 28px) !important; }
  .cotizador-banda .btn,
  section[style*="bg-alt"] .btn { width: 100% !important; justify-content: center !important; padding: 14px 20px !important; }

  /* ── Asesoramiento full-bleed ─────────────────────────────────────── */
  .asesoramiento { padding: 60px 0 !important; min-height: auto !important; }
  .asesoramiento-inner { padding: 0 18px !important; }
  .asesoramiento h2 { font-size: clamp(24px, 7vw, 34px) !important; }
  .asesoramiento p { font-size: 14px !important; }
  .asesoramiento-stats { grid-template-columns: repeat(3, 1fr) !important; gap: 12px !important; }
  .promo-stat strong { font-size: clamp(24px, 7vw, 36px) !important; }
  .promo-stat span { font-size: 10px !important; }

  /* ── Quiénes somos — 2 columnas → 1 ───────────────────────────────── */
  .about { padding: 40px 0 !important; }
  .about-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .about p { font-size: 14px !important; }
  .about-features { grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
  .about-features .feature h4 { font-size: 14px !important; }
  .about-features .feature p { font-size: 12px !important; }

  /* ── Beneficios — 2 columnas ─────────────────────────────────────── */
  .benefits { padding: 28px 0 !important; }
  .benefits-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }
  .benefit { padding: 14px !important; gap: 12px !important; }
  .benefit-icon { width: 36px !important; height: 36px !important; }
  .benefit strong { font-size: 12px !important; }
  .benefit span { font-size: 11px !important; }

  /* ── Instagram grid — 3 columnas ──────────────────────────────────── */
  .ig-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 4px !important; }

  /* ── PDP (producto-m2.html, producto-unidad.html) ─────────────────── */
  .pdp-grid { grid-template-columns: 1fr !important; gap: 22px !important; }
  .pdp-gallery { position: static !important; }
  .pdp-info h1 { font-size: clamp(24px, 6.5vw, 32px) !important; }
  .pdp-sub { font-size: 14px !important; }
  .pdp-price { font-size: clamp(26px, 7vw, 36px) !important; }
  .pdp-info .btn { width: 100% !important; justify-content: center !important; padding: 14px 20px !important; }
  .pdp-checklist { grid-template-columns: 1fr !important; gap: 8px !important; }
  .gal-main img { aspect-ratio: 1 !important; }
  .gal-thumbs { grid-template-columns: repeat(4, 1fr) !important; gap: 6px !important; }

  /* ── Productos relacionados — 2 columnas ──────────────────────────── */
  .products,
  .related-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .product-info h3 { font-size: 13px !important; line-height: 1.25 !important; }
  .product-cat { font-size: 9px !important; }
  .product-price { font-size: 14px !important; }
  .product-quick { display: none !important; }

  /* ── Filtros (categoria.html) — scroll horizontal ─────────────────── */
  .filters { gap: 6px !important; overflow-x: auto !important; flex-wrap: nowrap !important; padding-bottom: 8px !important; -webkit-overflow-scrolling: touch !important; }
  .filters::-webkit-scrollbar { display: none !important; }
  .filter-pill { white-space: nowrap !important; flex-shrink: 0 !important; padding: 8px 14px !important; font-size: 12px !important; }

  /* ── Footer ───────────────────────────────────────────────────────── */
  .footer { padding: 40px 0 24px !important; }
  .footer-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .footer h4 { font-size: 13px !important; }
  .footer-bottom { flex-direction: column !important; gap: 12px !important; text-align: center !important; padding-top: 24px !important; font-size: 11px !important; }

  /* ── Botones — touch targets mínimo 44px alto ─────────────────────── */
  .btn, .btn-ghost-light, .btn-accent, .btn-wa {
    min-height: 44px !important;
    padding: 12px 20px !important;
  }

  /* ── WhatsApp flotante — más visible en mobile ────────────────────── */
  .whatsapp-float {
    width: 52px !important;
    height: 52px !important;
    bottom: 16px !important;
    right: 16px !important;
  }

  /* ── Texto en general — line-height más cómodo ────────────────────── */
  body { font-size: 14px !important; line-height: 1.55 !important; }
  p { line-height: 1.55 !important; }

  /* ── Imágenes responsive por defecto ──────────────────────────────── */
  img { max-width: 100% !important; height: auto !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   PANTALLAS MUY CHICAS (≤ 380px) — iPhone SE y similares
   ─────────────────────────────────────────────────────────────────── */
@media (max-width: 380px) {
  .container { padding: 0 14px !important; }
  .topbar-track { gap: 24px !important; }
  .hero-text h1 { font-size: 26px !important; }
  .cats { gap: 8px !important; }
  .cat-info strong { font-size: 12.5px !important; }
  .cc-banner { padding: 16px 18px !important; }
  .cc-banner-text { font-size: 13px !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   TABLET (721px - 1024px) — Mejoras para iPads
   ─────────────────────────────────────────────────────────────────── */
@media (min-width: 721px) and (max-width: 1024px) {
  .cats { grid-template-columns: repeat(3, 1fr) !important; }
  .cc-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .products, .related-grid { grid-template-columns: repeat(3, 1fr) !important; }
}


/* ═══════════════════════════════════════════════════════════════════
   COTIZADOR MODAL — Responsive mobile
   ─────────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .cot-backdrop { padding: 0 !important; }
  .cot-modal {
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-y: auto !important;
  }
  .cot-grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    height: auto !important;
  }
  .cot-form {
    padding: 24px 20px !important;
    overflow-y: visible !important;
  }
  .cot-summary {
    position: relative !important;
    padding: 24px 20px !important;
    border-radius: 0 !important;
    background: var(--paper-soft) !important;
    border-top: 1px solid var(--line) !important;
  }
  .cot-title { font-size: clamp(22px, 6vw, 28px) !important; line-height: 1.2 !important; }
  .cot-sub { font-size: 14px !important; }
  .cot-close {
    width: 44px !important;
    height: 44px !important;
    top: 12px !important;
    right: 12px !important;
    z-index: 10 !important;
    background: var(--paper) !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
  }
  .cot-rooms .cot-room {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 14px !important;
  }
  .cot-room label { display: flex !important; flex-direction: column !important; gap: 4px !important; }
  .cot-room input,
  .cot-room select {
    width: 100% !important;
    padding: 12px 14px !important;
    font-size: 16px !important;  /* Previene zoom en iOS */
    min-height: 44px !important;
  }
  .cot-room .cot-remove { align-self: flex-end !important; }
  #js-cot-add { width: 100% !important; padding: 14px !important; font-size: 14px !important; }
  #js-cot-product select {
    font-size: 16px !important;  /* Previene zoom iOS */
    padding: 12px !important;
    min-height: 44px !important;
  }
  #js-cot-add-cart {
    width: 100% !important;
    padding: 14px !important;
    font-size: 15px !important;
    min-height: 48px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   INTERIOR PAGES (no home) — Solo catnav fijo, esconde topbar+header
   ─────────────────────────────────────────────────────────────────── */
@media (min-width: 721px) {
  /* OCULTAR el topbar negro (con beneficios) en interior pages */
  body.interior-page .topbar {
    display: none !important;
  }
  /* OCULTAR solo el header-inner (logo+nav) en interior pages.
     El catnav (que vive dentro del .header) sigue visible. */
  body.interior-page .header-inner {
    display: none !important;
  }
  body.interior-page .header {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }
  body.interior-page #site-header {
    position: relative !important;
    box-shadow: none !important;
    background: transparent !important;
  }
  /* SOLO el catnav (10 categorías) queda fijo arriba al hacer scroll.
     Usamos position:fixed (no sticky) porque está dentro de <header> y
     sticky no escapa del parent. */
  body.interior-page .catnav-wrap {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 999 !important;
    background: var(--paper) !important;
    border-bottom: 1px solid var(--line) !important;
    box-shadow: 0 2px 8px rgba(42, 36, 27, 0.06);
  }
  /* Padding para compensar el catnav fixed */
  body.interior-page main {
    padding-top: 50px !important;  /* solo catnav fijo, sin gap extra */
    margin-top: 0 !important;
  }
  /* No padding extra al body — el header ya está en flujo normal */
  body.interior-page {
    padding-top: 0 !important;
  }
  body.interior-page main {
    margin-top: 0 !important;
  }
}

/* En MOBILE interior: también oculta el topbar para ganar espacio */
@media (max-width: 720px) {
  body.interior-page .topbar {
    display: none !important;
  }
  body.interior-page {
    padding-top: 0 !important;
  }
  body.interior-page main {
    margin-top: 0 !important;
  }
  body.interior-page #site-header {
    position: relative !important;
  }
  body.interior-page .catnav-wrap {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 999 !important;
    background: var(--paper) !important;
    border-bottom: 1px solid var(--line) !important;
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  body.interior-page main {
    padding-top: 48px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   COTIZADOR MOBILE — Ajustar al espacio disponible (debajo del header)
   ─────────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  /* En mobile, el header completo es ~110px (topbar + header + catnav oculto) */
  .cot-backdrop {
    align-items: stretch !important;
    justify-content: stretch !important;
  }
  .cot-modal {
    /* Modal arranca DEBAJO del header fijo */
    margin-top: 60px !important;
    height: calc(100vh - 60px) !important;
    max-height: calc(100vh - 60px) !important;
    border-radius: 14px 14px 0 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  /* Asegurar que el botón cerrar quede sticky en el top del modal */
  .cot-close {
    position: sticky !important;
    top: 12px !important;
    align-self: flex-end !important;
    margin-left: auto !important;
  }
  /* Header total en mobile = ~60px (header compacto, topbar oculto si scroll) */
  body { padding-top: 60px !important; }
  main { margin-top: 60px !important; }
  /* Topbar más compacto */
  .topbar {
    padding: 6px 0 !important;
    font-size: 9.5px !important;
  }
  /* Cuando el modal del cotizador está abierto, ocultar el header */
  body:has(.cot-backdrop:not([hidden])) #site-header {
    display: none !important;
  }
  body:has(.cot-backdrop:not([hidden])) main {
    margin-top: 0 !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   MENÚ MOBILE — Listado de categorías
   ─────────────────────────────────────────────────────────────────── */
.mob-section-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 24px 24px 8px;
  border-top: 1px solid var(--line);
  margin-top: 12px;
}
.mob-cats {
  display: flex;
  flex-direction: column;
}
.mob-cat-link {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 24px !important;
  color: var(--ink) !important;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px !important;
  border-bottom: 1px solid var(--line) !important;
  text-decoration: none;
  transition: background 150ms ease;
}
.mob-cat-link:hover,
.mob-cat-link:active {
  background: var(--bg-alt) !important;
}
.mob-cat-link svg {
  color: var(--muted);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   FIX overlap topbar/header en HOME mobile
   ─────────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  /* En home: stack topbar + header verticalmente sin overlap */
  body:not(.interior-page) #site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
  }
  body:not(.interior-page) .topbar {
    position: relative !important;
    display: block !important;
    padding: 6px 0 !important;
    font-size: 9.5px !important;
    z-index: 1 !important;
  }
  body:not(.interior-page) .header {
    position: relative !important;
    z-index: 2 !important;
    background: var(--paper) !important;
  }
  /* Padding-top para compensar el header fijo en home */
  body:not(.interior-page) {
    padding-top: 92px !important;  /* topbar (~30px) + header (~60px) */
  }
  body:not(.interior-page) main {
    margin-top: 0 !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   HERO NAV (flechas prev/next) — Mobile: visibles, touch-friendly
   ─────────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  /* Mostrar flechas SIEMPRE en mobile, una a cada lado del hero */
  .hero-nav {
    display: flex !important;
    position: absolute !important;
    bottom: 50% !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    transform: translateY(50%) !important;
    width: 100% !important;
    justify-content: space-between !important;
    padding: 0 12px !important;
    gap: 0 !important;
    z-index: 5 !important;
    pointer-events: none !important;  /* solo los botones clickeables */
  }
  .hero-nav button {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.92) !important;
    color: var(--ink) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25) !important;
    pointer-events: auto !important;  /* sí clickeable */
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .hero-nav button:active {
    background: var(--paper) !important;
    transform: scale(0.95) !important;
  }
  .hero-nav button svg {
    width: 20px !important;
    height: 20px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   BOTÓN "PRODUCTOS" — Reemplazo del hamburguesa con texto
   ─────────────────────────────────────────────────────────────────── */
.menu-btn {
  display: none !important;  /* solo se ve en mobile */
  align-items: center !important;
  gap: 8px !important;
  background: transparent !important;
  border: 1px solid var(--line-strong, var(--line)) !important;
  border-radius: 22px !important;
  padding: 8px 14px !important;
  cursor: pointer !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--ink) !important;
  font-weight: 500 !important;
  height: 38px !important;
  white-space: nowrap !important;
  transition: all 150ms ease !important;
}
.menu-btn:active,
.menu-btn:hover {
  background: var(--ink) !important;
  color: var(--paper) !important;
  border-color: var(--ink) !important;
}
.menu-btn-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.menu-btn-icon svg {
  width: 16px !important;
  height: 16px !important;
}
.menu-btn-label {
  font-family: var(--font-mono) !important;
  letter-spacing: .12em !important;
}

/* En mobile: el botón Productos visible */
@media (max-width: 720px) {
  .menu-btn {
    display: inline-flex !important;
  }
  /* En el menú abierto, las categorías arriba más prominentes */
  .mob-section-label {
    background: var(--bg-alt, #f5efe7) !important;
    margin-top: 0 !important;
    padding-top: 16px !important;
    border-top: 1px solid var(--line) !important;
  }
  .mob-cats {
    background: var(--bg-alt, #f5efe7) !important;
  }
  .mob-cat-link {
    background: transparent !important;
    border-bottom: 1px solid rgba(0,0,0,0.06) !important;
  }
  .mob-cat-link:active {
    background: var(--paper) !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   CATEGORY CARDS — Foto cubriendo + texto encima (consistente)
   ─────────────────────────────────────────────────────────────────── */
.cat {
  position: relative !important;
  overflow: hidden !important;
  border-radius: var(--radius-lg) !important;
  display: block !important;
  text-decoration: none !important;
}
.cat-img {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
}
.cat-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}
.cat-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background: linear-gradient(180deg, 
    rgba(20, 16, 10, 0.05) 0%, 
    rgba(20, 16, 10, 0.20) 50%, 
    rgba(20, 16, 10, 0.75) 100%) !important;
  pointer-events: none !important;
}
.cat-info {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: 16px 18px !important;
  color: var(--paper) !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.cat-info strong {
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  color: var(--paper) !important;
  text-shadow: 0 1px 8px rgba(0,0,0,0.4) !important;
  line-height: 1.1 !important;
  margin: 0 !important;
}
.cat-info span {
  font-family: var(--font-mono) !important;
  font-size: 9.5px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: rgba(250, 246, 238, 0.85) !important;
  margin: 0 !important;
}
.cat-arrow {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  z-index: 3 !important;
}

/* Mobile: textos un poco más chicos para que entren */
@media (max-width: 720px) {
  .cat-info { padding: 12px 14px !important; }
  .cat-info strong { font-size: 15px !important; }
  .cat-info span { font-size: 9px !important; }
}
@media (max-width: 380px) {
  .cat-info { padding: 10px 12px !important; }
  .cat-info strong { font-size: 13.5px !important; }
}


/* ═══════════════════════════════════════════════════════════════════
   MENÚ MOBILE — Estructura nueva con Productos desplegable
   ─────────────────────────────────────────────────────────────────── */
.mob-nav .mob-link {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding: 16px 24px !important;
  font-family: var(--font-display) !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--line) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  text-align: left !important;
  letter-spacing: -0.005em !important;
  transition: background 150ms ease !important;
}
.mob-nav .mob-link:active,
.mob-nav .mob-link:hover {
  background: var(--bg-alt, #f5efe7) !important;
}
.mob-toggle .mob-chev {
  transition: transform 200ms ease !important;
}
.mob-toggle.open .mob-chev {
  transform: rotate(180deg) !important;
}
.mob-sub {
  display: flex !important;
  flex-direction: column !important;
  background: var(--bg-alt, #f5efe7) !important;
  border-bottom: 1px solid var(--line) !important;
}
.mob-sub[hidden] {
  display: none !important;
}
.mob-sub-link {
  display: block !important;
  padding: 12px 24px 12px 40px !important;
  font-family: var(--font-display) !important;
  font-size: 15px !important;
  color: var(--ink-soft) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(0,0,0,0.05) !important;
  transition: background 150ms ease, color 150ms ease !important;
}
.mob-sub-link:last-child {
  border-bottom: none !important;
}
.mob-sub-link:active,
.mob-sub-link:hover {
  background: var(--paper) !important;
  color: var(--ink) !important;
  padding-left: 44px !important;
}

/* Mobile: el botón hamburguesa siempre visible y compacto */
@media (max-width: 720px) {
  .menu-btn {
    display: grid !important;
    place-items: center !important;
    width: 38px !important;
    height: 38px !important;
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
  }
  .menu-btn:hover,
  .menu-btn:active {
    background: var(--bg-alt, #f5efe7) !important;
    color: var(--ink) !important;
  }
}