/* ============================================================
   JJ SUPPLIES · home.css
   Solo lo que vive en la portada (index.html).
   ============================================================ */

/* ---- HERO ----
   Una sola idea en pantalla: la foto y el titular. Estado,
   dirección y CTA viven en la franja de contacto de abajo. */
.jj-hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; align-items: flex-end; overflow: hidden; background: var(--pine-black);
}
.jj-hero > .jj-photo { position: absolute; inset: 0; height: auto; }
/* Carrusel: cuatro paisajes en fundido cruzado, sin JavaScript.
   Ciclo de 28s, cada capa visible 7s, con 0.85s de cruce. El retraso
   negativo de la primera la deja ya visible en la primera pintura —
   si no, el hero arranca en negro. El encuadre va por foto: cada
   paisaje tiene el horizonte a distinta altura. */
.jj-hero-photo .jj-hero-slide {
  position: absolute; inset: 0; display: block; opacity: 0;
  animation: jjHeroCycle 28s linear infinite;
}
.jj-hero-photo .jj-hero-slide img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.jj-hero-photo .jj-hero-slide:nth-child(1) { animation-delay: -0.9s; }
.jj-hero-photo .jj-hero-slide:nth-child(2) { animation-delay: 6.1s; }
.jj-hero-photo .jj-hero-slide:nth-child(3) { animation-delay: 13.1s; }
.jj-hero-photo .jj-hero-slide:nth-child(4) { animation-delay: 20.1s; }
/* El encuadre sólo importa en el archivo horizontal: el recorte vertical
   que se sirve en móvil ya trae la altura completa. */
.jj-hero-photo .jj-hero-slide:nth-child(1) img { object-position: 50% 45%; }
.jj-hero-photo .jj-hero-slide:nth-child(2) img { object-position: 50% 62%; }
.jj-hero-photo .jj-hero-slide:nth-child(3) img { object-position: 50% 52%; }
.jj-hero-photo .jj-hero-slide:nth-child(4) img { object-position: 50% 50%; }
.jj-hero-photo .jj-photo-grain { opacity: 0.3; }

@keyframes jjHeroCycle {
  0%   { opacity: 0; transform: scale(1.04); }
  3%   { opacity: 1; }
  25%  { opacity: 1; }
  28%  { opacity: 0; }
  100% { opacity: 0; transform: scale(1.11); }
}

/* Sin movimiento: se queda el primer paisaje, quieto. Hace falta decirlo
   aquí porque la regla global sólo apaga la animación, y eso dejaría las
   cuatro capas en opacidad 0 — o sea, un hero negro. */
@media (prefers-reduced-motion: reduce) {
  .jj-hero-photo .jj-hero-slide { animation: none !important; opacity: 0; transform: none; }
  .jj-hero-photo .jj-hero-slide:nth-child(1) { opacity: 1; }
}
.jj-hero-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(18,22,17,0.75) 0%,
      rgba(18,22,17,0.25) 20%,
      rgba(18,22,17,0.22) 34%,
      rgba(18,22,17,0.80) 66%,
      rgba(18,22,17,0.97) 88%,
      var(--pine-black) 100%);
}
.jj-hero-inner { position: relative; padding-top: 120px; padding-bottom: clamp(84px, 13vh, 156px); }
.jj-hero-title {
  font-family: var(--font-display); font-weight: 400; color: var(--arteaga-cream);
  font-size: clamp(46px, 7.4vw, 96px); line-height: 1.02; letter-spacing: 0.005em; margin: 0;
  text-shadow: 0 2px 34px rgba(10,13,9,0.55);
}
.jj-hero-title span { display: block; }
@media (min-width: 561px) { .jj-hero-title span { white-space: nowrap; } }
.jj-hero-tag {
  margin: var(--space-5) 0 0; max-width: 34ch;
  font-size: clamp(15.5px, 1.5vw, 19px); line-height: 1.5; letter-spacing: 0.01em;
  color: rgba(243,236,221,0.88); text-wrap: pretty;
  text-shadow: 0 1px 18px rgba(10,13,9,0.6);
}

/* Escalonado de entrada por posición (sin estilos en línea) */
body.jj-ready .jj-hero-title span:nth-child(1) { animation-delay: 0.12s; }
body.jj-ready .jj-hero-title span:nth-child(2) { animation-delay: 0.24s; }
body.jj-ready .jj-hero-tag { animation-delay: 0.38s; }

/* Guía de scroll: una raya fina, sin texto */
.jj-scrollcue {
  position: absolute; right: clamp(20px, 5vw, 56px); bottom: clamp(26px, 5vh, 46px); z-index: 3;
  display: flex; align-items: flex-end; height: 44px; padding: 8px 0;
}
.jj-scrollcue-rule {
  display: block; width: 1px; height: 44px; background: rgba(243,236,221,0.32); overflow: hidden;
}
.jj-scrollcue-rule::after {
  content: ''; display: block; width: 100%; height: 40%; background: var(--arteaga-cream);
  animation: jjCueSlide 2.4s var(--ease-standard) infinite;
}
.jj-scrollcue:hover .jj-scrollcue-rule::after { background: var(--bear-orange); }

/* ---- Franja de contacto / CTA (bajo el hero) ---- */
.jj-actionbar { background: var(--pine-black); color: var(--stone); border-top: 1px solid rgba(243,236,221,0.08); }
.jj-actionbar-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px 28px; padding-block: 16px;
}
.jj-actionbar-claim {
  margin: 0; min-width: 0; font-size: 15px; line-height: 1.45; color: var(--stone);
}
.jj-actionbar-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* ---- Encabezado de sección de la portada ---- */
.jj-why-head { text-align: center; max-width: 620px; margin: 0 auto; }
.jj-why-head .jj-eyebrow { justify-content: center; }
.jj-why-h2 { margin-top: var(--space-4); }
.jj-why-lead { margin: var(--space-4) auto 0; }

/* ---- Nota al pie de la retícula de departamentos ---- */
.jj-dept-note {
  margin-top: clamp(28px, 3vw, 40px); text-align: center; font-size: 15px; color: var(--text-muted);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px;
}
.jj-dept-note p { margin: 0; }

/* ---- Destacado: Botas Río Grande ---- */
.jj-spot {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(28px, 5vw, 64px); align-items: center;
}
.jj-spot-photo { margin: 0; }
.jj-spot-photo .jj-photo {
  position: relative; height: auto; aspect-ratio: 728 / 741;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-raised);
}
.jj-spot-copy .jj-h2 { margin-top: var(--space-3); }
.jj-spot-copy .jj-lead { margin-top: var(--space-4); }
.jj-spot-thumbs {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3); margin-block: var(--space-6);
}
.jj-spot-thumb { margin: 0; }
.jj-spot-thumb .jj-photo {
  position: relative; height: auto; aspect-ratio: 4 / 5;
  border: var(--border-hairline); box-shadow: var(--shadow-sm);
}
.jj-spot-thumb .jj-photo-img { transition: transform 500ms var(--ease-standard); }
.jj-spot-thumb:hover .jj-photo-img { transform: scale(1.05); }
.jj-spot-thumb figcaption {
  margin-top: var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-semibold);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted);
}

/* ---- Colección Arteaga (gorras con el oso) ---- */
.jj-caps {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(28px, 5vw, 64px); align-items: center;
}
.jj-caps-copy .jj-h2 { margin-top: var(--space-3); }
.jj-caps-copy .jj-lead { margin-top: var(--space-4); }
.jj-caps-copy .jj-arrowlink { margin-top: var(--space-6); display: inline-block; }
.jj-caps-photos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.jj-caps-main { grid-column: 1 / -1; margin: 0; }
.jj-caps-main .jj-photo {
  position: relative; height: auto; aspect-ratio: 725 / 645;
  box-shadow: var(--shadow-raised);
}
.jj-caps-thumb { margin: 0; }
.jj-caps-thumb .jj-photo {
  position: relative; height: auto; aspect-ratio: 690 / 545;
  border: var(--border-hairline); box-shadow: var(--shadow-sm);
}

/* ---- Historia (banda heritage) ---- */
.jj-heritage { background: var(--saddle-brown); color: var(--arteaga-cream); }
.jj-heritage-grid { display: flex; align-items: center; gap: clamp(28px, 5vw, 64px); }
.jj-heritage-bear { height: clamp(96px, 12vw, 150px); flex: none; }
.jj-heritage .jj-eyebrow { color: var(--arteaga-cream); opacity: 0.85; }
.jj-heritage-h2 { margin-top: var(--space-3); color: var(--arteaga-cream); }
.jj-heritage p.jj-lead { color: rgba(243,236,221,0.85); }
.jj-heritage p.jj-body { color: rgba(243,236,221,0.78); }
.jj-heritage .jj-arrowlink--on-dark { margin-top: var(--space-5); }
.jj-heritage-photo { flex: none; width: clamp(210px, 24vw, 320px); margin: 0; }
.jj-heritage-photo .jj-photo {
  position: relative; height: auto; aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-raised);
  border: 3px solid rgba(243,236,221,0.18); transform: rotate(2deg);
}
.jj-heritage-photo figcaption {
  margin-top: var(--space-3); text-align: center; font-size: var(--text-xs);
  font-weight: var(--weight-semibold); letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(243,236,221,0.65);
}

/* ---- Por qué JJ ---- */
.jj-why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); margin-top: clamp(40px, 5vw, 64px); }
.jj-why-grid--three { grid-template-columns: repeat(3, 1fr); max-width: 1020px; margin-inline: auto; }
.jj-why-card {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  background: var(--surface-card); border: var(--border-hairline); border-radius: var(--radius-lg);
  padding: var(--space-6); box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}
.jj-why-card:hover { box-shadow: var(--shadow-card); transform: translateY(-3px); }
/* Filete naranja que corre a lo ancho al pasar el cursor */
.jj-why-card::before {
  content: ''; position: absolute; top: 0; left: 0; height: 3px; width: 40px;
  background: var(--bear-orange);
  transition: width 0.55s var(--ease-standard);
}
.jj-why-card:hover::before { width: 100%; }
.jj-why-num {
  position: absolute; top: 10px; right: 18px;
  font-family: var(--font-display); font-size: clamp(40px, 4vw, 54px); line-height: 1;
  color: var(--saddle-brown); opacity: 0.12; pointer-events: none;
}
.jj-why-icon {
  width: 54px; height: 54px; border-radius: 999px;
  background: var(--surface-sunken); border: 1.5px solid var(--stone-30);
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--space-5);
  transition: border-color var(--dur-base) var(--ease-standard);
}
.jj-why-card:hover .jj-why-icon { border-color: var(--bear-orange); }
.jj-why-title { font-size: 18px; font-weight: 700; color: var(--text-heading); margin: 0 0 8px; line-height: 1.25; }
.jj-why-body { font-size: 14.5px; line-height: 1.62; color: var(--text-muted); margin: 0; }
.jj-why-fact {
  margin-top: auto; padding-top: var(--space-5);
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--saddle-brown);
}
.jj-why-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--space-4) var(--space-6); margin-top: clamp(32px, 4vw, 52px); text-align: center;
}
.jj-why-foot p { margin: 0; font-size: 15.5px; color: var(--text-muted); }

/* ---- Preguntas frecuentes ----
   <details> nativo: sin JavaScript, accesible por teclado y con el texto
   de la respuesta siempre en el HTML para quien lo rastree. */
.jj-faq { max-width: 820px; margin: clamp(32px, 4vw, 48px) auto 0; border-top: 1px solid var(--divider); }
.jj-faq-item { border-bottom: 1px solid var(--divider); }
.jj-faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4);
  padding: 18px 0; font-size: clamp(16px, 1.6vw, 17.5px); font-weight: 700;
  color: var(--text-heading); line-height: 1.35;
  transition: color var(--dur-fast) var(--ease-standard);
}
.jj-faq-item summary::-webkit-details-marker { display: none; }
.jj-faq-item summary:hover { color: var(--saddle-brown); }
.jj-faq-item summary::after {
  content: '+'; flex: none; font-family: var(--font-display); font-size: 24px; line-height: 1;
  color: var(--bear-orange); transform: translateY(-2px);
}
.jj-faq-item[open] summary::after { content: '–'; }
.jj-faq-item p {
  margin: 0 0 22px; padding-right: clamp(0px, 4vw, 44px);
  font-size: 15.5px; line-height: 1.7; color: var(--text-muted); text-wrap: pretty;
}

/* ---- Cita destacada ---- */
.jj-quote-mark { font-family: var(--font-display); font-size: 52px; line-height: 0.6; color: var(--bear-orange); height: 30px; }
.jj-quote-name { font-weight: 700; font-size: 14.5px; color: var(--arteaga-cream); }
.jj-quote-town { font-size: 12.5px; letter-spacing: 0.04em; color: var(--stone); }
.jj-quote-solo { max-width: 720px; margin: 0 auto; text-align: center; }
.jj-quote-solo .jj-eyebrow { justify-content: center; }
.jj-quote-solo figure { margin: clamp(28px, 3.5vw, 44px) 0 0; }
.jj-quote-solo .jj-quote-mark { display: block; font-size: 64px; height: 34px; }
.jj-quote-solo blockquote {
  font-size: clamp(19px, 2.2vw, 24px); line-height: 1.55; color: var(--text-body);
  margin: var(--space-4) 0 var(--space-5); text-wrap: pretty;
}
.jj-quote-solo figcaption { display: flex; flex-direction: column; gap: 2px; }
.jj-quote-solo .jj-quote-name { color: var(--text-heading); }
.jj-quote-solo .jj-quote-town { color: var(--text-muted); }
.jj-quote-solo .jj-arrowlink { margin-top: var(--space-6); }

/* ---- Cómo pedir (pasos) ---- */
.jj-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-top: clamp(36px, 4vw, 56px); }
.jj-step { background: rgba(23,26,22,0.24); border: 1px solid rgba(243,236,221,0.1); border-radius: var(--radius-lg); padding: var(--space-6); }
.jj-step-num { font-family: var(--font-display); font-size: 40px; line-height: 1; color: var(--bear-orange); }
.jj-step-title { font-size: 17px; font-weight: 700; color: var(--arteaga-cream); margin: var(--space-3) 0 8px; }
.jj-step-body { font-size: 14.5px; line-height: 1.62; color: var(--stone); margin: 0; }
.jj-steps-cta { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: clamp(32px, 4vw, 48px); }

/* ---- Banda de visita ---- */
.jj-visitband-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.jj-visit-h2 { margin-top: var(--space-4); }
.jj-visit-addr { display: flex; align-items: flex-start; gap: 14px; margin-top: var(--space-6); font-size: 16px; line-height: 1.5; color: var(--arteaga-cream); }
.jj-visit-cp { color: var(--stone); }
.jj-visit-phone { color: var(--arteaga-cream); font-weight: 600; }
.jj-visit-phone:hover { color: var(--bear-orange); }
.jj-visitband-hourcard {
  margin-top: var(--space-6); background: rgba(243,236,221,0.05); border: 1px solid rgba(243,236,221,0.12);
  border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6); max-width: 440px;
}
.jj-hours-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: var(--space-4); }
.jj-hours-head > span:first-child { font-family: var(--font-display); font-size: 19px; color: var(--arteaga-cream); }
.jj-hours-list { list-style: none; margin: 0; padding: 0; }
.jj-hours-list li { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; font-size: 14.5px; color: var(--stone); border-bottom: 1px solid rgba(243,236,221,0.07); }
.jj-hours-list li:last-child { border-bottom: none; }
.jj-hours-list li span:last-child { white-space: nowrap; }
.jj-hours-list li.is-today { color: var(--arteaga-cream); font-weight: 700; }
.jj-hours-list li.is-today span:last-child { color: var(--bear-orange); }
.jj-visitband-map { display: flex; flex-direction: column; gap: var(--space-4); }
.jj-map-frame {
  border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3.2;
  border: 1px solid rgba(243,236,221,0.14); box-shadow: var(--shadow-raised); background: #202b22;
}
.jj-map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.jj-visitband-cta { display: flex; flex-direction: column; gap: var(--space-4); }
.jj-visitband-cta > * { justify-content: center; }

/* ---- Responsive de la portada ---- */
@media (max-width: 900px) {
  .jj-why-grid { grid-template-columns: 1fr 1fr; }
  .jj-why-grid--three { grid-template-columns: 1fr; max-width: 560px; }
  .jj-spot, .jj-caps { grid-template-columns: 1fr; gap: 28px; }
  .jj-spot-photo { max-width: 480px; }
  .jj-heritage-photo { width: 100%; max-width: 360px; }
  .jj-heritage-photo .jj-photo { transform: none; }
  .jj-steps { grid-template-columns: 1fr; max-width: 560px; }
  .jj-visitband-grid { grid-template-columns: 1fr; }
  .jj-visitband-cta { flex-direction: row; flex-wrap: wrap; }
  .jj-visitband-cta > * { flex: 1 1 220px; }
}

@media (max-width: 560px) {
  /* Hero — sólo foto, oso y titular. El fondo extra deja libre la
     esquina del botón flotante de WhatsApp. */
  .jj-hero-inner { padding-top: 90px; padding-bottom: 104px; }
  .jj-hero-title { font-size: clamp(40px, 12.5vw, 60px); line-height: 1.05; letter-spacing: 0; }
  .jj-hero-title span { white-space: normal; }
  .jj-scrollcue { display: none; } /* choca con el botón flotante de WhatsApp */

  .jj-hero-tag { margin-top: 16px; font-size: 15.5px; }

  /* Franja de contacto — CTA de ancho completo */
  .jj-actionbar-inner { justify-content: flex-start; padding-block: 18px; gap: 14px; }
  .jj-actionbar-claim { font-size: 14.5px; }
  .jj-actionbar-cta { width: 100%; flex-direction: column; align-items: stretch; gap: 10px; }
  .jj-actionbar-cta > * { justify-content: center; width: 100%; }

  /* Ritmo de secciones */
  .jj-section { padding-block: 60px; }
  .jj-h2 { font-size: clamp(28px, 8vw, 38px); }
  .jj-why-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 36px; }
  .jj-why-card { padding: var(--space-5); }
  .jj-heritage-grid { flex-direction: column; align-items: flex-start; gap: 24px; }
  .jj-steps { margin-top: 32px; }
  .jj-step { padding: var(--space-5); }
  .jj-steps-cta { flex-direction: column; align-items: stretch; gap: 12px; }
  .jj-steps-cta > * { justify-content: center; width: 100%; }
  .jj-visitband-cta { flex-direction: column; }
  .jj-visitband-cta > * { flex: 0 0 auto; width: 100%; }
}

@media (hover: none) {
  .jj-why-card:active { transform: translateY(-1px) scale(0.995); box-shadow: var(--shadow-card); }
}