/* ════════════════════════════════════════════════════
   styles.css — Beltrán Briones Website
   All custom styles (Tailwind handles utilities)
════════════════════════════════════════════════════ */

/* ─── Base & Reset ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background-color: #fafafa;
  color: #1a1a2e;
  /*
   * BUG FIX: overflow-x:hidden crea un BFC (Block Formatting Context) que
   * rompe el hit-testing de pointer events en los elementos cerca del borde
   * derecho del viewport. overflow:clip hace el mismo recorte visual pero
   * NO crea un scroll container ni afecta el hit-testing.
   */
  overflow-x: clip;
}

/* ─── Custom Scrollbar ─────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #04090f; }
::-webkit-scrollbar-thumb { background: #1d4ed8; border-radius: 3px; }

/* ─── Accent line ──────────────────────────────────── */
.accent-line {
  display: block;
  width: 48px;
  height: 2px;
  background: linear-gradient(90deg, #3b82f6, #1e3a8a);
}

/* ─── Navbar ───────────────────────────────────────── */
#navbar {
  transition: background 0.45s ease, box-shadow 0.45s ease, padding 0.45s ease;
}
#navbar.scrolled {
  background: rgba(4,9,15,0.96) !important;
  box-shadow: 0 2px 40px rgba(0,0,0,0.6);
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}
.nav-link {
  position: relative;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  transition: color 0.3s;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0;
  width: 0; height: 1px;
  background: #3b82f6;
  transition: width 0.35s ease;
}
.nav-link:hover { color: #93c5fd; }
.nav-link:hover::after { width: 100%; }

/* ─── Language toggle ──────────────────────────────── */
.lang-toggle {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.18);
  padding: 0.28rem 0.72rem;
  cursor: pointer;
  transition: border-color 0.3s, background 0.3s;
  flex-shrink: 0;
}
.lang-toggle:hover {
  border-color: #3b82f6;
  background: rgba(59,130,246,0.06);
}
.lang-sep {
  color: rgba(255,255,255,0.20);
  font-size: 0.58rem;
  line-height: 1;
  pointer-events: none;
}
.lang-opt {
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  transition: color 0.3s;
  pointer-events: none;
}

/* ─── Hero ─────────────────────────────────────────── */
.hero-bg {
  background-image:
    linear-gradient(to bottom,
      rgba(4,9,20,0.42) 0%,
      rgba(4,9,20,0.62) 55%,
      rgba(4,9,20,0.88) 100%),
    url('../assets/fondo-palermo.jpg');
  background-size: cover;
  background-position: center 30%;
  /*
   * FIX iOS: background-attachment:fixed es ignorado en iOS Safari
   * y causa que la imagen desaparezca o se congele. Se usa scroll por
   * defecto y fixed solo en dispositivos con cursor real (desktop).
   */
  background-attachment: scroll;
}

/* ─── Buttons ──────────────────────────────────────── */
.btn-primary {
  display: inline-block;
  padding: 0.88rem 2.2rem;
  background: linear-gradient(135deg, #2563eb, #1e3a8a);
  color: #fff;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(.25,.46,.45,.94),
              box-shadow 0.3s cubic-bezier(.25,.46,.45,.94),
              opacity 0.3s;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(37,99,235,0.45);
  opacity: 0.93;
}
.btn-outline-light {
  display: inline-block;
  padding: 0.88rem 2.2rem;
  border: 1px solid rgba(255,255,255,0.38);
  color: rgba(255,255,255,0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(255,255,255,0.06);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 400;
  cursor: pointer;
  transition: border-color 0.3s, color 0.3s, background 0.3s,
              transform 0.3s cubic-bezier(.25,.46,.45,.94);
}
.btn-outline-light:hover {
  border-color: #3b82f6;
  color: #93c5fd;
  background: rgba(59,130,246,0.08);
  transform: translateY(-2px);
}

/* ─── Stat cards ───────────────────────────────────── */
.stat-card {
  border-top: 2px solid #1d4ed8;
  transition: transform 0.35s cubic-bezier(.25,.46,.45,.94),
              box-shadow 0.35s;
}
.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(29,78,216,0.18);
}

/* ─── Process steps ────────────────────────────────── */
/*
 * BUG FIX: Using #proceso .step-card (specificity 0,1,1,0) instead of
 * .step-card (0,0,1,0) so the hover transform and box-shadow override
 * .reveal.visible (0,0,2,0) which was winning the cascade and suppressing
 * the hover translateY and transition definitions.
 * We also add opacity to the transition so the IntersectionObserver reveal
 * still animates correctly at 0.75s while hover transitions run at 0.35s.
 */
#proceso .step-card {
  position: relative;
  border-bottom: 2px solid transparent;
  transition: border-color 0.35s,
              transform 0.35s cubic-bezier(.25,.46,.45,.94),
              box-shadow 0.35s,
              opacity 0.75s cubic-bezier(.25,.46,.45,.94);
}
#proceso .step-card:hover {
  border-color: #2563eb;
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(0,0,0,0.22);
  z-index: 2;
}
.step-number {
  font-family: 'Playfair Display', serif;
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(135deg, #3b82f6, #1e3a8a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── Feature list icons ───────────────────────────── */
.feature-icon {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #2563eb, #1e3a8a);
  color: #fff;
  flex-shrink: 0;
}

/* ─── Section label ────────────────────────────────── */
.section-label {
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #2563eb;
  font-weight: 500;
}

/* ─── Contact items ────────────────────────────────── */
.contact-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: padding-left 0.3s ease;
}
.contact-item:hover { padding-left: 0.5rem; }
.contact-item a { color: rgba(255,255,255,0.88); transition: color 0.25s; }
.contact-item a:hover { color: #93c5fd; }
.contact-icon {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(59,130,246,0.12);
  color: #60a5fa;
  flex-shrink: 0;
}

/* ─── Social links ─────────────────────────────────── */
.social-link {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.20);
  color: rgba(255,255,255,0.68);
  transition: border-color 0.3s, color 0.3s, background 0.3s,
              transform 0.3s cubic-bezier(.25,.46,.45,.94);
}
.social-link:hover {
  border-color: #3b82f6;
  color: #93c5fd;
  background: rgba(59,130,246,0.10);
  transform: translateY(-3px);
}

/* ─── Mobile menu ──────────────────────────────────── */
#mobile-menu {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  /* Safety: never overflow viewport height on very short screens */
  max-height: 100dvh;
  overflow-y: auto;
  transition: opacity 0.35s ease,
              visibility 0.35s ease,
              transform 0.35s cubic-bezier(.25,.46,.45,.94);
}
#mobile-menu.open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* ─── Scroll animations ────────────────────────────── */
/*
 * BUG FIX: pointer-events:none while the element is invisible (pre-reveal)
 * prevents intermittent hover detection on elements that are still
 * animating in (opacity:0, mid-translateY). Once .visible is added the
 * element is fully interactive again.
 */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  pointer-events: none;
  transition: opacity 0.75s cubic-bezier(.25,.46,.45,.94),
              transform 0.75s cubic-bezier(.25,.46,.45,.94);
}
.reveal.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }

.reveal-left {
  opacity: 0;
  transform: translateX(-30px);
  pointer-events: none;
  transition: opacity 0.75s cubic-bezier(.25,.46,.45,.94),
              transform 0.75s cubic-bezier(.25,.46,.45,.94);
}
.reveal-left.visible { opacity: 1; transform: translateX(0); pointer-events: auto; }

.reveal-right {
  opacity: 0;
  transform: translateX(30px);
  pointer-events: none;
  transition: opacity 0.75s cubic-bezier(.25,.46,.45,.94),
              transform 0.75s cubic-bezier(.25,.46,.45,.94);
}
.reveal-right.visible { opacity: 1; transform: translateX(0); pointer-events: auto; }

/* ─── Divider ──────────────────────────────────────── */
.accent-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #1d4ed8, transparent);
  opacity: 0.35;
}

/* ─── Scroll pulse animation ───────────────────────── */
@keyframes scrollPulse {
  0%,100% { opacity: 0.4; transform: scaleY(1); }
  50%      { opacity: 1;   transform: scaleY(0.55); }
}

/* ══════════════════════════════════════════════════════
   CHAT WIDGET
══════════════════════════════════════════════════════ */

/* ─── Chat window (popup panel) ────────────────────── */
#chat-window {
  width: calc(100vw - 3rem);
  max-width: 380px;
  height: clamp(460px, 72vh, 560px);
  background: #04090f;
  border: 1px solid rgba(59,130,246,0.18);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow:
    0 24px 64px rgba(0,0,0,0.75),
    0 0 0 1px rgba(255,255,255,0.04);
  transform-origin: bottom right;
}

/* Open / closed states */
.chat-closed {
  transform: scale(0.85) translateY(12px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.3s cubic-bezier(.25,.46,.45,.94),
              opacity 0.25s ease;
}
.chat-open {
  transform: scale(1) translateY(0);
  opacity: 1;
  pointer-events: auto;
  transition: transform 0.38s cubic-bezier(.34,1.45,.64,1),
              opacity 0.28s ease;
}

/* ─── Messages area scrollbar ───────────────────────── */
#chat-messages {
  scrollbar-width: thin;
  scrollbar-color: rgba(29,78,216,0.45) transparent;
}
#chat-messages::-webkit-scrollbar { width: 4px; }
#chat-messages::-webkit-scrollbar-track { background: transparent; }
#chat-messages::-webkit-scrollbar-thumb {
  background: rgba(29,78,216,0.45);
  border-radius: 4px;
}

/* ─── Message entry animation ───────────────────────── */
.chat-msg {
  animation: msgIn 0.28s cubic-bezier(.25,.46,.45,.94) both;
}
@keyframes msgIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Bubbles ────────────────────────────────────────── */
.chat-bubble-user,
.chat-bubble-bot {
  max-width: 82%;
  padding: 0.7rem 1rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  line-height: 1.6;
  word-break: break-word;
}
.chat-bubble-user {
  background: linear-gradient(135deg, #2563eb, #1e3a8a);
  color: #fff;
  border-radius: 14px 14px 3px 14px;
}
.chat-bubble-bot {
  background: rgba(255,255,255,0.055);
  color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px 14px 14px 3px;
}

/* ─── Typing dots ────────────────────────────────────── */
.typing-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #3b82f6;
  animation: typingBounce 1.1s ease-in-out infinite;
}
@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0);   opacity: 0.35; }
  30%           { transform: translateY(-6px); opacity: 1;    }
}

/* ─── Input wrapper focus ring ──────────────────────── */
#chat-input-wrapper:focus-within {
  border-color: rgba(59,130,246,0.55) !important;
}

/* ─── Quick-reply chips ─────────────────────────────── */
.chat-chip {
  font-size: 0.70rem;
  padding: 0.35rem 0.85rem;
  border: 1px solid rgba(59,130,246,0.30);
  color: #93c5fd;
  background: rgba(37,99,235,0.08);
  border-radius: 999px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.02em;
  transition: background 0.25s, border-color 0.25s, transform 0.2s;
  white-space: nowrap;
}
.chat-chip:hover {
  background: rgba(37,99,235,0.20);
  border-color: rgba(59,130,246,0.60);
  transform: translateY(-1px);
}

/* ─── FAB button ─────────────────────────────────────── */
/*
 * ROOT BUG FIX: #chat-widget es un div fixed de ~380px × ~634px
 * posicionado en la esquina inferior derecha con z-index:50.
 * Aunque el panel de chat tenga pointer-events:none cuando está
 * cerrado, el DIV PADRE intercept todos los eventos del área que
 * ocupa, impidiendo hacer hover/click en las cards de la derecha
 * (card 05 de Nuestro Proceso, Casa Huidobro, columna Prensa).
 *
 * Fix: pointer-events:none en el contenedor. Los hijos (#chat-fab
 * y #chat-window.chat-open) declaran pointer-events:auto
 * explícitamente para seguir siendo interactivos.
 */
#chat-widget {
  pointer-events: none;
}
#chat-fab {
  pointer-events: auto;
  transition: transform 0.25s cubic-bezier(.25,.46,.45,.94),
              box-shadow 0.25s;
}
#chat-fab:hover  { transform: scale(1.10); }
#chat-fab:active { transform: scale(0.94); }
/* El panel abierto también necesita pointer-events:auto */
#chat-window.chat-open {
  pointer-events: auto;
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE — Mobile first overrides
   Breakpoints mirror Tailwind: sm=640px, md=768px
══════════════════════════════════════════════════════ */

/*
 * Chat widget — mobile (< 640px)
 * ─────────────────────────────────────────────────────
 * Two critical fixes:
 *
 * 1. WIDTH  → full viewport minus 2×1rem margins.
 *
 * 2. HEIGHT → 100dvh (dynamic viewport height) minus the
 *    space the FAB stack occupies below the window:
 *      1rem bottom widget margin
 *    + 58px FAB height
 *    + 1rem gap between window and FAB   (gap-4)
 *    + 1rem top safety margin
 *    = ~106px
 *    dvh shrinks automatically when the virtual keyboard
 *    opens, so the window stays fully visible.
 * ─────────────────────────────────────────────────────
 */
@media (max-width: 639px) {
  #chat-widget {
    bottom: 1rem;
    right:  1rem;
    /* Allow window to stretch edge-to-edge */
    left:   1rem;
    align-items: stretch;
  }

  #chat-window {
    width: 100%;       /* fills parent which spans left:1rem → right:1rem */
    max-width: none;
    height: calc(100dvh - 106px);
    max-height: 560px;
    /* Remove bottom-right origin — animate from bottom center on mobile */
    transform-origin: bottom center;
  }

  /* FAB stays anchored to the right */
  #chat-fab {
    align-self: flex-end;
  }
}

/* ─── Project cards ────────────────────────────────── */
/* Root element is now an <a> — display:block prevents inline gaps */
a.project-card {
  display: block;
  text-decoration: none;
  color: inherit;
  position: relative;
  /*
   * isolation:isolate gives each card its own stacking context so GPU
   * compositing layers don't bleed across siblings and cause intermittent
   * hover hit-testing misses reported by users.
   */
  isolation: isolate;
}
a.project-card:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 4px;
}
.project-card { cursor: pointer; }
/* Ensure hovered card floats above siblings */
.project-card:hover { z-index: 2; }
.project-card .card-line {
  width: 32px;
  flex-shrink: 0;
  transition: width 0.45s ease;
}
.project-card:hover .card-line { width: 60px; }
.project-card .card-img {
  transition: transform 0.75s cubic-bezier(.25,.46,.45,.94);
}
.project-card:hover .card-img { transform: scale(1.06); }

/* CTA label — slides in from left on card hover */
.project-card-cta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.58rem;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: #93c5fd;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.38s ease, transform 0.38s ease;
}
.project-card:hover .project-card-cta {
  opacity: 1;
  transform: translateX(0);
}

/* ─── Press / Events scroll strip ─────────────────── */
/*
 * Shadow-clipping fix
 * ─────────────────────────────────────────────────────
 * overflow-x:auto creates a BFC that clips any box-shadow extending
 * outside the element's padding edge.
 * Solution: add generous padding (top + bottom) so the shadow of
 * translateY(-6px) cards + their spread has room to render without
 * hitting the clip boundary.
 *
 * Required clearance:
 *   top    → 12px  (translateY offset)
 *   bottom → 24px  (12px shadow blur + 6px translateY + margin)
 * ─────────────────────────────────────────────────────
 */
.media-strip {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  /*
   * BUG FIX: Changed from "mandatory" to "proximity" so the snap is less
   * aggressive during mouse-drag. "mandatory" was fighting the drag momentum
   * and snapping the strip back mid-drag, making free-scrolling very hard.
   */
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  padding: 12px 4px 28px 4px;   /* top/bottom prevent shadow guillotine */
  scrollbar-width: none;
  cursor: grab;
  user-select: none;             /* prevent text selection while dragging */
}
.media-strip:active { cursor: grabbing; }
.media-strip::-webkit-scrollbar { display: none; }

/* Premium dark glass card */
.media-card {
  scroll-snap-align: start;
  flex-shrink: 0;
  min-width: 248px;
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.042);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-left: 2px solid rgba(37, 99, 235, 0.65);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 1.5rem;
  will-change: transform;        /* promote to GPU layer for stable hit-testing */
  transition:
    transform    0.38s cubic-bezier(.25,.46,.45,.94),
    box-shadow   0.38s ease,
    border-color 0.38s ease;
}
.media-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 20px 48px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(59, 130, 246, 0.20);
  border-left-color: #60a5fa;
}

/* ─── Gold CTA button (Libro) ──────────────────────── */
.btn-gold {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 2.2rem;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #1a0800;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(.25,.46,.45,.94),
              box-shadow 0.3s cubic-bezier(.25,.46,.45,.94);
}
.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(245,158,11,0.42);
}

/* ─── Book mockup ──────────────────────────────────── */
.book-mockup {
  position: relative;
  width: 220px;
  height: 300px;
  flex-shrink: 0;
  filter: drop-shadow(0 24px 48px rgba(0,0,0,0.55));
}
.book-spine {
  position: absolute;
  left: 0; top: 0;
  width: 26px;
  height: 100%;
  background: linear-gradient(180deg, #2563eb 0%, #1e3a8a 100%);
  border-radius: 3px 0 0 3px;
}
.book-cover {
  position: absolute;
  left: 26px; top: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(160deg, #0f1f3d 0%, #172542 60%, #0b1525 100%);
  border-radius: 0 4px 4px 0;
  padding: 1.75rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.book-badge {
  position: absolute;
  top: -14px; right: -14px;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(245,158,11,0.50);
  z-index: 3; /* float above the book cover photo */
}
.book-floor {
  position: absolute;
  bottom: -10px; left: 26px; right: -4px;
  height: 10px;
  background: rgba(0,0,0,0.30);
  filter: blur(8px);
  border-radius: 50%;
}