/* ==========================================================================
   INTERACTIVE.CSS — Gronert Company
   Componentes premium añadidos sobre el sistema visual existente
   (style.css / home-experience.css / navigation.css): botones magnéticos,
   riel de progreso, mapa de origen, comparador de formatos y mejoras de
   blog. Se mantiene como hoja aparte para que el diff sea fácil de revisar
   y, si algo no convence, fácil de retirar sin tocar los archivos base.
   Se enlaza después de las hojas existentes en index.html, tienda.html y
   blog.html.
   ========================================================================== */

/* ==========================================================================
   1. BOTONES MAGNÉTICOS
   El JS (home-experience.js) escribe --mx/--my según la posición del
   puntero. Selector más específico que la regla ":hover" original para
   que la componga en vez de pelear con ella (misma especificidad + orden
   de carga posterior ya bastaría, pero el extra evita sorpresas futuras).
   ========================================================================== */
.journey-button[data-magnetic],
.store-final-button[data-magnetic],
.territory-scroll-btn[data-magnetic],
.territory-closing-btn[data-magnetic],
.contact-card-action[data-magnetic] {
  transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1), background 0.25s ease, color 0.25s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.journey-button[data-magnetic]:hover,
.journey-button[data-magnetic]:focus-visible,
.territory-scroll-btn[data-magnetic]:hover,
.territory-scroll-btn[data-magnetic]:focus-visible {
  transform: translate(var(--mx, 0px), calc(-2px + var(--my, 0px)));
}

.store-final-button[data-magnetic]:hover,
.store-final-button[data-magnetic]:focus-visible,
.territory-closing-btn[data-magnetic]:hover,
.territory-closing-btn[data-magnetic]:focus-visible {
  transform: translate(var(--mx, 0px), calc(-3px + var(--my, 0px)));
}

/* .contact-card-action ya tiene su propio :hover (color/fondo) en
   contacto.css; aquí solo se añade el desplazamiento magnético para que
   ambas reglas compongan sin pisarse (propiedades distintas). */
.contact-card-action[data-magnetic]:hover,
.contact-card-action[data-magnetic]:focus-visible {
  transform: translate(var(--mx, 0px), calc(-2px + var(--my, 0px)));
}

@media (prefers-reduced-motion: reduce) {
  .journey-button[data-magnetic],
  .store-final-button[data-magnetic],
  .territory-scroll-btn[data-magnetic],
  .territory-closing-btn[data-magnetic],
  .contact-card-action[data-magnetic] { transition: none !important; }
}

/* ==========================================================================
   1a. LOGO LEGIBLE CON LA CABECERA FIJA
   Al pasar a position:fixed, la cabecera ya no se va con el scroll y queda
   permanentemente sobre el contenido. La regla global cambia el logo a su
   versión OSCURA en cuanto hay scroll (pensada para páginas de fondo claro
   como el blog), lo que en una página de fondo oscuro lo volvía invisible.

   · Páginas oscuras de principio a fin (territorio, tienda): logo claro fijo.
   · Portada: alterna secciones claras y oscuras, así que se resuelve con el
     marcador data-surface y la clase .header-on-dark que aplica app.js.
   ========================================================================== */
.territory-page .global-header.scrolled .logo-light,
.store-page     .global-header.scrolled .logo-light,
.global-header.header-on-dark .logo-light { display: block; }

.territory-page .global-header.scrolled .logo-dark,
.store-page     .global-header.scrolled .logo-dark,
.global-header.header-on-dark .logo-dark { display: none; }

/* ==========================================================================
   1b. BOTÓN FLOTANTE DE WHATSAPP
   Inyectado por components/footer.html (visible en todas las páginas que
   cargan el footer). El href con el saludo traducido lo arma
   updateWhatsAppContactLink() en js/app.js.
   ========================================================================== */
.wa-float-btn {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 250;
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--brand-coffee, #171511);
  color: var(--brand-cream, #faf9f6);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.wa-float-btn:hover,
.wa-float-btn:focus-visible {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.42);
}

.wa-float-btn:active { transform: translateY(0) scale(0.97); }

/* La página de contacto ya ofrece WhatsApp como primera opción de la
   lista: el botón flotante quedaría redundante ahí. */
body.contact-page .wa-float-btn { display: none; }

/* Por debajo de 920px el dock de navegación flotante ocupa el borde
   inferior (ver navigation.css); el botón se recoloca justo encima para
   no superponerse. */
@media (max-width: 920px) {
  .wa-float-btn {
    right: 1rem;
    bottom: calc(92px + env(safe-area-inset-bottom) + 0.75rem);
    width: 52px;
    height: 52px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wa-float-btn { transition: none; }
}

/* ==========================================================================
   2. RIEL DE PROGRESO — acordeón "Nosotros"
   ========================================================================== */
.story-progress-rail {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin: 0 0 1.5rem;
}

.story-progress-rail .rail-dot {
  width: 2.2rem;
  height: 3px;
  border-radius: 999px;
  background: rgba(21, 19, 15, 0.16);
  transition: background 0.35s ease, width 0.35s ease;
}

.story-progress-rail .rail-dot.is-active {
  width: 3.6rem;
  background: var(--experience-gold, #b58a3c);
}

@media (prefers-reduced-motion: reduce) {
  .story-progress-rail .rail-dot { transition: none; }
}

/* ==========================================================================
   3. MAPA INTERACTIVO DE ORIGEN
   ========================================================================== */
.origin-map-section {
  position: relative;
  padding: clamp(4rem, 8vw, 7rem) clamp(1.25rem, 6vw, 7rem);
  background: var(--experience-ink, #15130f);
  color: var(--experience-cream, #f1e8d9);
  overflow: hidden;
}

.origin-map-heading {
  max-width: 640px;
  margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
  text-align: center;
}

.origin-map-heading h2 {
  margin: 0 0 1rem;
  font-family: var(--font-serif);
  font-size: clamp(2.3rem, 5vw, 3.6rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.02;
}

.origin-map-lede {
  margin: 0;
  color: rgba(241, 232, 217, 0.68);
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  line-height: 1.6;
}

.origin-map-stage {
  position: relative;
  width: min(100%, 1100px);
  height: clamp(360px, 46vw, 560px);
  margin: 0 auto;
  border-radius: 28px;
  border: 1px solid rgba(226, 193, 116, 0.18);
  overflow: hidden;
  background: linear-gradient(180deg, rgba(226, 193, 116, 0.05), transparent 55%);
}

.origin-map-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.origin-pin {
  position: absolute;
  left: var(--pin-x, 50%);
  top: var(--pin-y, 50%);
  transform: translate(-50%, -50%);
  width: 2.2rem;
  height: 2.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  z-index: 2;
}

.origin-pin-dot {
  position: relative;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  background: var(--experience-gold, #b58a3c);
  box-shadow: 0 0 0 4px rgba(226, 193, 116, 0.22);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.origin-pin-dot::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px solid rgba(226, 193, 116, 0.55);
  opacity: 0.85;
  animation: origin-pin-pulse 2.6s ease-out infinite;
}

.origin-pin:hover .origin-pin-dot,
.origin-pin:focus-visible .origin-pin-dot,
.origin-pin[aria-pressed="true"] .origin-pin-dot {
  transform: scale(1.25);
  box-shadow: 0 0 0 6px rgba(226, 193, 116, 0.3);
}

.origin-pin:focus-visible {
  outline: 2px solid var(--experience-gold, #b58a3c);
  outline-offset: 4px;
  border-radius: 50%;
}

@keyframes origin-pin-pulse {
  0% { transform: scale(0.85); opacity: 0.75; }
  100% { transform: scale(1.9); opacity: 0; }
}

.origin-info-card {
  position: absolute;
  left: 1.25rem;
  right: 1.25rem;
  bottom: 1.25rem;
  max-width: 360px;
  padding: 1.25rem 1.4rem;
  background: rgba(18, 15, 11, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(226, 193, 116, 0.3);
  border-radius: 16px;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.4);
  z-index: 3;
}

.origin-info-close {
  position: absolute;
  top: 0.6rem;
  right: 0.7rem;
  border: 0;
  background: none;
  color: rgba(241, 232, 217, 0.55);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0.3rem 0.5rem;
}

.origin-info-close:hover,
.origin-info-close:focus-visible { color: var(--experience-cream, #f1e8d9); }

.origin-info-name {
  display: block;
  margin: 0 1.6rem 0.4rem 0;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--experience-gold, #d9b264);
}

.origin-info-text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgba(241, 232, 217, 0.82);
}

.origin-map-hint {
  position: absolute;
  top: 1.1rem;
  left: 1.25rem;
  margin: 0;
  padding: 0.4rem 0.85rem;
  background: rgba(18, 15, 11, 0.55);
  border: 1px solid rgba(226, 193, 116, 0.22);
  border-radius: 999px;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: rgba(241, 232, 217, 0.72);
  z-index: 2;
}

@media (max-width: 640px) {
  .origin-map-stage { height: clamp(420px, 130vw, 520px); }
  .origin-info-card { left: 0.75rem; right: 0.75rem; max-width: none; }
  .origin-map-hint { font-size: 0.65rem; }
}

@media (prefers-reduced-motion: reduce) {
  .origin-pin-dot::after { animation: none; display: none; }
  .origin-pin-dot { transition: none; }
}

/* ==========================================================================
   4. ALIADOS — pausa táctil del marquee
   ========================================================================== */
.partners-marquee-container.is-touch-paused .partners-marquee-track {
  animation-play-state: paused;
}

/* ==========================================================================
   5. TIENDA — comparador de formatos
   ========================================================================== */
/* .store-section es oscura en tienda.html (#12100d / #f8f4ec), no el tema
   claro por defecto de --text-color: por eso los colores van fijos aquí en
   vez de heredar las variables del tema claro. */
.format-compare-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1.5rem;
  padding: 0.65rem 1.3rem;
  border: 1px solid rgba(248, 244, 236, 0.24);
  border-radius: 999px;
  background: transparent;
  color: #f8f4ec;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background var(--transition-fast, 0.2s ease), color var(--transition-fast, 0.2s ease), border-color var(--transition-fast, 0.2s ease);
}

.format-compare-toggle-btn:hover,
.format-compare-toggle-btn:focus-visible,
.format-compare-toggle-btn[aria-pressed="true"] {
  background: #f8f4ec;
  color: #171511;
  border-color: #f8f4ec;
}

.format-compare-wrap {
  background-color: #1a1714;
  border: 1px solid rgba(250, 249, 246, 0.08);
  border-radius: 16px;
  padding: 0.5rem;
  overflow-x: auto;
}

.format-compare-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  color: var(--brand-cream, #faf9f6);
  font-family: var(--font-sans);
}

.format-compare-table th {
  padding: 0.9rem 1rem;
  text-align: left;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(250, 249, 246, 0.5);
  border-bottom: 1px solid rgba(250, 249, 246, 0.1);
}

.format-compare-table td {
  padding: 1rem;
  font-size: 0.9rem;
  border-bottom: 1px solid rgba(250, 249, 246, 0.06);
  white-space: nowrap;
}

.format-compare-table tr:last-child td { border-bottom: 0; }

.format-compare-table tr[data-format] {
  cursor: pointer;
  transition: background var(--transition-fast, 0.2s ease);
}

.format-compare-table tr[data-format]:hover { background: rgba(250, 249, 246, 0.04); }

.format-compare-table tr.is-active-row {
  background: rgba(226, 193, 116, 0.1);
}

.format-compare-table tr.is-active-row td:first-child {
  color: #e2c174;
  font-weight: 600;
}

.compare-threshold {
  color: rgba(250, 249, 246, 0.45);
  font-size: 0.78rem;
}

.compare-select-btn {
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(250, 249, 246, 0.18);
  background: transparent;
  color: inherit;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background var(--transition-fast, 0.2s ease), color var(--transition-fast, 0.2s ease);
}

.compare-select-btn[aria-pressed="true"] {
  background: #e2c174;
  border-color: #e2c174;
  color: #171511;
}

@media (max-width: 767px) {
  .format-compare-toggle-btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   6. TIENDA — pulso del precio animado
   ========================================================================== */
.total-price-value.is-pulsing,
.summary-value.is-pulsing {
  color: #e2c174;
}

/* ==========================================================================
   7. BLOG — tarjeta destacada
   ========================================================================== */
.blog-card.is-featured {
  grid-column: span 2;
}

.blog-card.is-featured .blog-card-media {
  height: 420px;
}

.blog-card.is-featured .blog-card-title {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  font-weight: 500;
  line-height: 1.15;
}

.blog-tag-featured {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  padding: 0.375rem 1rem;
  border-radius: 9999px;
  background: #e2c174;
  color: #171511;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .blog-card.is-featured { grid-column: span 1; }
  .blog-card.is-featured .blog-card-media { height: 320px; }
}

/* ==========================================================================
   8. BLOG — más historias (modal)
   ========================================================================== */
.pm-related {
  flex-shrink: 0;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(250, 249, 246, 0.08);
}

.pm-related-title {
  display: block;
  margin-bottom: 0.75rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(250, 249, 246, 0.45);
}

.pm-related-list {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
}

.pm-related-item {
  flex: 0 0 auto;
  width: 130px;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  border-radius: 12px;
  overflow: hidden;
  transition: transform var(--transition-fast, 0.2s ease);
}

.pm-related-item:hover,
.pm-related-item:focus-visible {
  transform: translateY(-3px);
}

.pm-related-item img {
  display: block;
  width: 100%;
  height: 80px;
  object-fit: cover;
  border-radius: 12px;
}

.pm-related-item span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 0.4rem;
  font-size: 0.76rem;
  line-height: 1.3;
  color: rgba(250, 249, 246, 0.82);
}

@media (prefers-reduced-motion: reduce) {
  .pm-related-item { transition: none; }
}