/* 2J Brand System v2 */
:root {
  --prod-font-ui: "Avenir Next", "Inter", "Segoe UI", sans-serif;
  --prod-font-display: "Avenir Next Condensed", "Avenir Next", "Inter", "Segoe UI", sans-serif;
  --prod-bg: #08111d;
  --prod-bg-soft: #0d1728;
  --prod-panel: linear-gradient(180deg, rgba(17, 27, 45, 0.94), rgba(11, 19, 33, 0.92));
  --prod-panel-flat: rgba(14, 23, 39, 0.96);
  --prod-line: rgba(144, 161, 185, 0.22);
  --prod-line-strong: rgba(244, 180, 0, 0.22);
  --prod-text: #f5f7fa;
  --prod-muted: #91a1b9;
  --prod-muted-soft: #b0bccd;
  --prod-primary: #2f7d32;
  --prod-primary-soft: #183f26;
  --prod-secondary: #f4b400;
  --prod-secondary-soft: #c89408;
  --prod-warning: #f4b400;
  --prod-danger: #d64545;
  --prod-radius-lg: 22px;
  --prod-radius-md: 16px;
  --prod-shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.34);
  --prod-shadow-md: 0 16px 36px rgba(0, 0, 0, 0.24);
  --prod-ice: #f5f7fa;
  --prod-midnight: #08111d;
  --prod-pitch: #2f7d32;
  --prod-amber: #f4b400;
  --prod-slate: #91a1b9;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--prod-font-ui);
}

/* iOS/Android: evitar scroll horizontal accidental y mejorar viewport dinámico. */
body {
  overflow-x: hidden;
}

@supports (min-height: 100dvh) {
  body {
    min-height: 100dvh;
  }
}

@supports (padding: env(safe-area-inset-top)) {
  :root {
    --safe-top: env(safe-area-inset-top);
    --safe-right: env(safe-area-inset-right);
    --safe-bottom: env(safe-area-inset-bottom);
    --safe-left: env(safe-area-inset-left);
  }
}

img,
svg,
video,
canvas {
  max-width: 100%;
}

.product-shell {
  max-width: 1180px;
  margin: 0 auto;
}

.product-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 1.25rem;
}

@supports (padding: env(safe-area-inset-left)) {
  .product-page {
    padding-top: calc(1.25rem + var(--safe-top, 0px));
    padding-right: calc(1.25rem + var(--safe-right, 0px));
    padding-bottom: calc(1.25rem + var(--safe-bottom, 0px));
    padding-left: calc(1.25rem + var(--safe-left, 0px));
  }
}

@media (max-width: 820px) {
  .product-page {
    padding: 0.9rem;
  }

  @supports (padding: env(safe-area-inset-left)) {
    .product-page {
      padding-top: calc(0.9rem + var(--safe-top, 0px));
      padding-right: calc(0.9rem + var(--safe-right, 0px));
      padding-bottom: calc(0.9rem + var(--safe-bottom, 0px));
      padding-left: calc(0.9rem + var(--safe-left, 0px));
    }
  }

  /* iOS: inputs con font-size < 16px hacen zoom al tocar. */
  input,
  select,
  textarea {
    font-size: 16px;
  }

  /* Mejor respuesta táctil (reduce el “delay” y doble-tap accidental). */
  a,
  button,
  [role="button"] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .product-title-stack h1 {
    font-size: 1.18rem;
  }

  .product-title-stack p {
    font-size: 0.95rem;
  }
}

.product-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.product-title-stack h1 {
  margin: 0.25rem 0 0;
  font-family: var(--prod-font-display);
  font-size: 1.45rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--prod-text);
}

.product-title-stack p {
  margin: 0.2rem 0 0;
  color: var(--prod-muted);
}

.product-brand {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
}

.product-brand img {
  display: block;
  max-width: none;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.28));
}

.product-brand-copy {
  display: grid;
  gap: 0.18rem;
}

.product-brand-copy strong {
  font-family: var(--prod-font-display);
  font-size: 0.84rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--prod-ice);
}

.product-brand-copy span {
  font-size: 0.74rem;
  color: var(--prod-muted-soft);
  letter-spacing: 0.08em;
}

.product-brand-strip {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
}

.product-brand-strip img {
  width: 148px;
  height: auto;
}

.product-brand-strip-copy {
  display: grid;
  gap: 0.14rem;
}

.product-brand-strip-copy strong {
  display: block;
  font-family: var(--prod-font-display);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff1c2;
}

.product-brand-strip-copy span {
  display: block;
  color: var(--prod-muted);
}

.product-brand-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--prod-line-strong);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(244, 180, 0, 0.12), rgba(47, 125, 50, 0.1));
  color: var(--prod-ice);
  padding: 0.34rem 0.78rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.product-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--prod-line);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--prod-text);
  background: rgba(255, 255, 255, 0.04);
}

.product-chip.role {
  border-color: rgba(20, 184, 166, 0.5);
  background: rgba(20, 184, 166, 0.15);
}

.product-card {
  border: 1px solid var(--prod-line);
  border-radius: var(--prod-radius-lg);
  background: var(--prod-panel);
  box-shadow: var(--prod-shadow-lg);
}

.product-pill-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: 999px;
  padding: 0.8rem 1.15rem;
  background: linear-gradient(135deg, #f5c538, #f4b400);
  color: #0a1520;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: none;
  box-shadow: var(--prod-shadow-md);
}

.product-profile-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.95rem;
  border-radius: 999px;
  border: 1px solid rgba(244, 180, 0, 0.18);
  background: rgba(15, 23, 39, 0.72);
}

.product-profile-chip img {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  object-fit: cover;
  object-position: center 22%;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.product-profile-chip strong {
  display: block;
}

.product-inline-note {
  margin-top: 0.3rem;
}

.product-empty {
  border: 1px dashed rgba(148, 163, 184, 0.5);
  border-radius: var(--prod-radius-md);
  padding: 1rem;
  color: var(--prod-muted);
  text-align: center;
}

.product-kicker {
  margin: 0;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--prod-muted-soft);
}

.product-nav-shortcuts {
  margin-top: 0.65rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
}

.product-nav-shortcuts a {
  text-decoration: none;
  color: var(--prod-text);
  border: 1px solid rgba(244, 180, 0, 0.14);
  border-radius: 999px;
  padding: 0.42rem 0.86rem;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.04);
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.product-nav-shortcuts a:hover {
  border-color: rgba(244, 180, 0, 0.3);
  background: rgba(244, 180, 0, 0.09);
}

.product-nav-shortcuts a.is-active {
  border-color: rgba(244, 180, 0, 0.38);
  background: linear-gradient(135deg, rgba(244, 180, 0, 0.15), rgba(47, 125, 50, 0.12));
  color: #fff7dd;
}

.product-scroll-x {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 820px) {
  .product-shell {
    width: min(1180px, calc(100vw - 1rem));
  }

  .product-nav-shortcuts {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    -webkit-overflow-scrolling: touch;
  }

  .product-nav-shortcuts a {
    white-space: nowrap;
    flex: 0 0 auto;
  }
}