/* ============================================================
   JJ SUPPLIES · components.css
   Piezas reutilizables en cualquier página: header, footer,
   botones, marcos de foto, tarjetas, marquesina, FAB, intro.
   ============================================================ */

/* ---- Botones ---- */
.jj-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-ui); font-weight: 600; letter-spacing: 0.02em; line-height: 1;
  border-radius: var(--radius-md); cursor: pointer; border: 1px solid transparent;
  transition: background var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.jj-btn--primary { background: var(--action); color: var(--action-fg); }
.jj-btn--primary:hover { background: var(--action-press); color: var(--action-fg); }
.jj-btn--sm { padding: 8px 14px; font-size: var(--text-sm); gap: 6px; }
.jj-btn--md { padding: 12px 20px; font-size: var(--text-base); gap: 8px; }
.jj-btn--lg { padding: 15px 26px; font-size: var(--text-md); gap: 10px; }
.jj-btn--block { display: flex; width: 100%; }
.jj-btn:active { transform: translateY(1px); }

/* ---- Ghost CTA (contorno cream, sobre fondos oscuros) ---- */
.jj-ghost-cta {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-ui); font-weight: 600; font-size: var(--text-md); letter-spacing: 0.02em;
  padding: 15px 24px; border-radius: var(--radius-md); cursor: pointer;
  background: transparent; color: var(--arteaga-cream); border: 1.5px solid rgba(243,236,221,0.4);
  transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.jj-ghost-cta:hover { background: rgba(243,236,221,0.1); border-color: var(--arteaga-cream); color: var(--arteaga-cream); }
.jj-ghost-cta:active { transform: translateY(1px); }
.jj-ghost-cta--sm { padding: 11px 18px; font-size: 15px; border-width: 1px; }

/* ---- Liga con flecha ---- */
.jj-arrowlink {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-ui); font-weight: 700; font-size: 15px; letter-spacing: 0.01em;
  color: var(--saddle-brown);
}
.jj-arrowlink:hover { color: var(--bear-orange); }
.jj-arrowlink--on-dark { color: var(--bear-orange); }
.jj-arrowlink--on-dark:hover { color: var(--arteaga-cream); }

/* ---- Badges mercantiles ---- */
.jj-badge {
  display: inline-flex; align-items: center; padding: 4px 9px;
  font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  border-radius: var(--radius-sm); line-height: 1; white-space: nowrap;
}
.jj-badge--local { background: var(--bear-orange); color: var(--pine-black); }
.jj-badge--pine { background: var(--pine-needle); color: var(--arteaga-cream); }
.jj-badge--neutral { background: var(--stone); color: var(--pine-black); }

/* ---- Pill "abierto ahora" ---- */
.jj-openpill {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border-radius: var(--radius-pill);
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em;
  background: rgba(243,236,221,0.09); color: var(--stone); border: 1px solid rgba(243,236,221,0.16); white-space: nowrap;
}
.jj-openpill-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--stone); flex: none; }
.jj-openpill.is-open { color: var(--arteaga-cream); border-color: rgba(123,189,143,0.4); }
.jj-openpill.is-open .jj-openpill-dot { background: #7bbd8f; box-shadow: 0 0 0 0 rgba(123,189,143,0.5); animation: jjPulse 2.4s ease-out infinite; }

/* ---- Header / nav ---- */
.jj-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: transparent; border-bottom: 1px solid transparent;
  transition: background var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
}
.jj-header.is-solid {
  background: var(--pine-black);
  box-shadow: 0 1px 0 rgba(243,236,221,0.06), var(--shadow-card);
  border-bottom: 1px solid rgba(243,236,221,0.08);
}
.jj-header-bar { display: flex; align-items: center; gap: var(--space-4); height: 76px; }
.jj-header-logo {
  display: inline-flex; align-items: center; flex: none;
  font-family: var(--font-display); font-weight: 400; font-size: 21px;
  color: var(--arteaga-cream); letter-spacing: 0.02em; line-height: 1; white-space: nowrap;
}
.jj-header-logo:hover { color: var(--arteaga-cream); }

.jj-desktop-nav { display: flex; align-items: center; }
.jj-desktop-nav--links { margin-left: auto; gap: var(--space-6); }
.jj-desktop-nav--actions { gap: var(--space-3); }
.jj-navlink {
  font-family: var(--font-ui); font-size: 15px; font-weight: 500; color: var(--arteaga-cream);
  letter-spacing: 0.01em; position: relative; white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-standard);
}
.jj-navlink:hover { color: var(--bear-orange); }
.jj-navlink--phone { display: inline-flex; align-items: center; gap: 6px; }
.jj-desktop-nav--links .jj-navlink::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: -6px; height: 2px;
  background: var(--bear-orange); transition: right var(--dur-base) var(--ease-standard);
}
.jj-desktop-nav--links .jj-navlink:hover::after { right: 0; }
.jj-navlink.is-active { color: var(--bear-orange); }
.jj-desktop-nav--links .jj-navlink.is-active::after { right: 0; }

.jj-mobile-toggle {
  margin-left: auto; display: none; background: none; border: none; cursor: pointer; padding: 6px;
}
.jj-mobile-toggle .jj-icon-x { display: none; }
.jj-mobile-toggle[aria-expanded="true"] .jj-icon-menu { display: none; }
.jj-mobile-toggle[aria-expanded="true"] .jj-icon-x { display: block; }

.jj-mobile-menu {
  display: none; max-height: 0; overflow: hidden;
  transition: max-height var(--dur-base) var(--ease-standard);
  background: var(--pine-black);
}
.jj-mobile-menu.is-open { max-height: 620px; border-top: 1px solid rgba(243,236,221,0.08); }
.jj-mobile-menu-inner { padding: var(--space-4) var(--space-5) var(--space-6); display: flex; flex-direction: column; gap: 4px; }
.jj-mobile-link { padding: 13px 0; font-size: 17px; border-bottom: 1px solid rgba(243,236,221,0.07); }
.jj-mobile-phone { display: inline-flex; align-items: center; gap: 8px; padding: 14px 0; }
.jj-mobile-cta { margin-top: var(--space-2); }

/* Estado y dirección al pie del menú: sólo existen aquí, porque el menú
   sólo existe en móvil. */
.jj-mobile-status {
  margin-top: var(--space-5); padding-top: var(--space-4);
  border-top: 1px solid rgba(243,236,221,0.08);
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
}
.jj-mobile-addr {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 13.5px; line-height: 1.45; color: var(--stone);
}
.jj-mobile-addr:hover { color: var(--bear-orange); }
.jj-mobile-addr .jj-icon { margin-top: 2px; }

/* ---- PhotoFrame ---- */
.jj-photo { position: relative; width: 100%; height: 100%; overflow: hidden; background: #1b2119; }
.jj-photo--rounded { border-radius: var(--radius-lg); }
.jj-photo-base { position: absolute; inset: 0; }
.jj-photo--kenburns .jj-photo-base { inset: -6%; animation: jjKenburns 22s var(--ease-standard) infinite alternate; }
.jj-photo--kenburns .jj-photo-img { animation: jjKenburns 28s var(--ease-standard) infinite alternate; }
.jj-photo-accent { position: absolute; inset: 0; }
.jj-photo-grain {
  position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 140px 140px; mix-blend-mode: overlay; opacity: 0.5;
}
.jj-photo-vignette { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 120px 20px rgba(10,13,9,0.45); }
.jj-photo-caption {
  position: absolute; left: 14px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-ui); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(243,236,221,0.72);
}
.jj-photo-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--bear-orange); flex: none; }
.jj-photo-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* Tonos del marco cuando todavía no hay foto real */
.jj-photo--sierra .jj-photo-base { background: radial-gradient(120% 90% at 72% 12%, #4a5a48 0%, #2c3a2d 34%, #1b2119 68%, #12160f 100%); }
.jj-photo--sierra .jj-photo-accent { background: radial-gradient(60% 50% at 78% 8%, rgba(242,138,24,0.14), transparent 70%); }
.jj-photo--campo .jj-photo-base { background: radial-gradient(120% 100% at 30% 20%, #8a6a4b 0%, #6c432c 45%, #4a2f1f 100%); }
.jj-photo--campo .jj-photo-accent { background: radial-gradient(60% 50% at 78% 8%, rgba(242,138,24,0.10), transparent 70%); }
.jj-photo--taller .jj-photo-base { background: radial-gradient(120% 100% at 70% 15%, #45594a 0%, #344638 50%, #232f26 100%); }
.jj-photo--taller .jj-photo-accent { background: radial-gradient(60% 50% at 78% 8%, rgba(243,236,221,0.10), transparent 70%); }
.jj-photo--motor .jj-photo-base { background: radial-gradient(120% 100% at 62% 18%, #4d4b45 0%, #35342f 52%, #21211d 100%); }
.jj-photo--motor .jj-photo-accent { background: radial-gradient(55% 45% at 76% 10%, rgba(242,138,24,0.14), transparent 70%); }
.jj-photo--casa .jj-photo-base { background: radial-gradient(120% 100% at 38% 18%, #e2d1b1 0%, #b9976b 52%, #7d5a3c 100%); }
.jj-photo--casa .jj-photo-accent { background: radial-gradient(55% 45% at 30% 14%, rgba(243,236,221,0.28), transparent 68%); }
.jj-photo--casa .jj-photo-grain { mix-blend-mode: multiply; opacity: 0.32; }
.jj-photo--ganado .jj-photo-base { background: radial-gradient(120% 100% at 35% 25%, #d8cdb4 0%, #c1b498 55%, #a2946f 100%); }
.jj-photo--ganado .jj-photo-accent { background: radial-gradient(60% 50% at 78% 8%, rgba(108,67,44,0.12), transparent 70%); }
.jj-photo--ganado .jj-photo-grain { mix-blend-mode: multiply; opacity: 0.35; }
.jj-photo--ganado .jj-photo-caption { color: rgba(23,26,22,0.62); }

/* Hueco declarado de foto: honesto mientras llega la toma real */
.jj-photo-slot {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  gap: 8px; font-family: var(--font-ui); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: rgba(243,236,221,0.72);
  background-image: repeating-linear-gradient(135deg, rgba(243,236,221,0.05) 0 2px, transparent 2px 9px);
}
.jj-photo-slot::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: var(--bear-orange); }
.jj-photo--casa .jj-photo-slot, .jj-photo--ganado .jj-photo-slot {
  color: rgba(23,26,22,0.6);
  background-image: repeating-linear-gradient(135deg, rgba(23,26,22,0.05) 0 2px, transparent 2px 9px);
}

/* ---- Tarjeta de departamento (portada y pie de categoría) ---- */
.jj-dept-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-top: clamp(40px, 5vw, 64px); }
.jj-dept-card {
  position: relative; background: var(--surface-card); border: var(--border-hairline); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; color: inherit;
  transition: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}
.jj-dept-card:hover { box-shadow: var(--shadow-card); transform: translateY(-3px); color: inherit; }
.jj-dept-media { position: relative; aspect-ratio: 16 / 9; flex: none; }
.jj-dept-media .jj-photo { position: absolute; inset: 0; height: auto; }
.jj-dept-media .jj-photo-img { transition: transform 600ms var(--ease-standard); }
.jj-dept-card:hover .jj-dept-media .jj-photo-img { transform: scale(1.045); }
.jj-dept-badge { position: absolute; top: 12px; left: 12px; z-index: 2; }
.jj-dept-body { padding: var(--space-5); display: flex; flex-direction: column; flex: 1; }
.jj-dept-title {
  font-size: 17px; font-weight: 700; color: var(--text-heading); margin: 0 0 6px; line-height: 1.25;
  transition: color var(--dur-fast) var(--ease-standard);
}
.jj-dept-card:hover .jj-dept-title { color: var(--saddle-brown); }
.jj-dept-desc { font-size: 14.5px; line-height: 1.62; color: var(--text-muted); margin: 0; }
.jj-dept-go {
  display: inline-flex; align-items: center; gap: 7px; margin-top: auto; padding-top: var(--space-4);
  font-size: 13.5px; font-weight: 700; letter-spacing: 0.02em; color: var(--saddle-brown);
}
.jj-dept-go svg { transition: transform var(--dur-base) var(--ease-standard); }
.jj-dept-card:hover .jj-dept-go { color: var(--bear-orange); }
.jj-dept-card:hover .jj-dept-go svg { transform: translateX(4px); }

/* ---- Marquesina de marcas ---- */
.jj-marquee-band {
  background: var(--pine-black); color: var(--arteaga-cream);
  padding-block: clamp(40px, 5vw, 68px); overflow: hidden;
}
.jj-marquee-head { text-align: center; margin-bottom: clamp(22px, 3vw, 34px); }
.jj-marquee-label {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--bear-orange);
}
.jj-marquee-label::before, .jj-marquee-label::after {
  content: ''; width: 26px; height: 1.5px; background: currentColor; opacity: 0.6;
}
.jj-marquee {
  position: relative; display: flex; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.jj-marquee + .jj-marquee { margin-top: clamp(10px, 1.4vw, 18px); }
.jj-marquee-track {
  display: flex; flex: none; min-width: 100%; width: max-content;
  animation: jjMarquee 42s linear infinite;
}
.jj-marquee--reverse .jj-marquee-track { animation-name: jjMarqueeReverse; animation-duration: 52s; }
.jj-marquee:hover .jj-marquee-track { animation-play-state: paused; }
.jj-marquee-row {
  display: flex; align-items: center; flex: none; list-style: none; margin: 0; padding: 0;
  gap: clamp(28px, 4vw, 56px); padding-right: clamp(28px, 4vw, 56px);
}
.jj-marquee-row li {
  display: inline-flex; align-items: center; gap: clamp(28px, 4vw, 56px);
  font-family: var(--font-ui); font-weight: 800; font-size: clamp(22px, 3.2vw, 40px);
  letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
  color: rgba(243,236,221,0.62); transition: color var(--dur-base) var(--ease-standard);
}
.jj-marquee-row li::after {
  content: ''; width: 7px; height: 7px; flex: none;
  background: var(--bear-orange); transform: rotate(45deg); opacity: 0.9;
}
.jj-marquee-row li:hover { color: var(--arteaga-cream); }
.jj-marquee-foot {
  text-align: center; margin-top: clamp(24px, 3vw, 36px);
  font-size: 14.5px; color: var(--stone);
}

/* ---- Botón flotante de WhatsApp (móvil) ---- */
.jj-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  display: none; align-items: center; justify-content: center;
  width: 58px; height: 58px; border-radius: 999px;
  background: var(--bear-orange); color: var(--pine-black); box-shadow: var(--shadow-raised);
}
.jj-fab:hover { background: var(--bear-orange-press); color: var(--pine-black); }
.jj-fab:active { transform: translateY(1px); }

/* ---- Footer ---- */
.jj-footer { background: var(--pine-black); color: var(--stone); }
.jj-footer-inner { padding-top: var(--space-16); padding-bottom: var(--space-10); }
.jj-footer-grid { display: grid; grid-template-columns: 1.4fr 0.8fr 1fr; gap: clamp(32px, 5vw, 72px); }
.jj-footer-bear { height: 54px; margin-bottom: var(--space-4); }
.jj-footer-brand { font-family: var(--font-display); color: var(--arteaga-cream); font-size: 26px; margin-bottom: 8px; }
.jj-footer-blurb { font-size: 14px; line-height: 1.65; max-width: 300px; margin: 0; }
.jj-foot-head { font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--arteaga-cream); margin-bottom: var(--space-4); font-weight: 700; }
.jj-foot-list { list-style: none; margin: 0; padding: 0; font-size: 14px; line-height: 1.5; }
.jj-foot-list li { margin-bottom: 10px; }
.jj-foot-gap { margin-top: 8px; }
.jj-footlink { color: var(--stone); }
.jj-footlink:hover { color: var(--bear-orange); }
.jj-footlink--orange { color: var(--bear-orange); }
.jj-footer-bottom {
  margin-top: var(--space-10); padding-top: var(--space-5);
  border-top: 1px solid rgba(243,236,221,0.08); display: flex; flex-wrap: wrap;
  gap: var(--space-3); align-items: center; justify-content: space-between;
  font-size: 12.5px; letter-spacing: 0.04em; color: rgba(200,192,174,0.7);
}
.jj-footer-since { letter-spacing: 0.18em; text-transform: uppercase; }

/* ---- Intro de primera carga (revelado del logo) ----
   Sólo la primera vez de cada visita: si ya se vio, la marca .jj-sin-intro
   la apaga antes de la primera pintura. */
.jj-sin-intro #jj-intro { display: none; }
#jj-intro {
  position: fixed; inset: 0; z-index: 9999; background: var(--pine-black);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  overflow: hidden; transition: opacity 0.7s var(--ease-standard), transform 0.7s var(--ease-standard);
}
#jj-intro::before {
  content: ''; position: absolute; width: min(680px, 130vw); height: min(680px, 130vw); border-radius: 50%;
  background: radial-gradient(circle, rgba(242,138,24,0.12), transparent 68%);
  opacity: 0; animation: jjIntroGlow 1.5s var(--ease-standard) 0.15s forwards;
}
#jj-intro.is-out { opacity: 0; transform: translateY(-20px); pointer-events: none; }
.jj-intro-logo { position: relative; width: min(320px, 64vw); }
.jj-intro-logo img { width: 100%; height: auto; aspect-ratio: 397 / 311; display: block; animation: jjIntroReveal 0.95s var(--ease-standard) both; }
.jj-intro-rule {
  position: relative; height: 2px; width: 0; background: var(--bear-orange); border-radius: 2px;
  animation: jjIntroRule 0.6s var(--ease-standard) 0.6s both;
}
.jj-intro-tag {
  position: relative; font-family: var(--font-ui); font-size: 12px; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--stone);
  opacity: 0; animation: jjIntroTag 0.6s var(--ease-standard) 0.85s forwards;
}
@keyframes jjIntroGlow { to { opacity: 1; } }
@keyframes jjIntroReveal {
  0%   { opacity: 0; transform: scale(0.86) translateY(14px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes jjIntroRule { from { width: 0; } to { width: 148px; } }
@keyframes jjIntroTag { to { opacity: 1; } }

/* ---- Responsive de componentes ---- */
@media (max-width: 900px) {
  .jj-desktop-nav { display: none; }
  .jj-mobile-toggle { display: inline-flex; }
  .jj-mobile-menu { display: block; }
  .jj-dept-grid { grid-template-columns: 1fr 1fr; }
  .jj-footer-grid { grid-template-columns: 1fr 1fr; }
  .jj-fab { display: flex; }
  .jj-footer-inner { padding-bottom: 96px; }
}

@media (max-width: 560px) {
  .jj-dept-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 36px; }
  .jj-dept-media { aspect-ratio: 2 / 1; }
  .jj-dept-body { padding: var(--space-4) var(--space-5) var(--space-5); }
  .jj-footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .jj-marquee-row li { font-size: 26px; }
}

/* Feedback táctil donde no hay hover */
@media (hover: none) {
  .jj-ghost-cta:active { background: rgba(243,236,221,0.14); }
  .jj-dept-card:active { transform: translateY(-1px) scale(0.995); box-shadow: var(--shadow-card); }
}