/* =============================================================
   Sección "Nosotros" — bloque independiente
   Intro+cita, timeline de proceso, tarjetas arrastrables,
   beneficios, banda de contadores + avatares, separador orgánico
============================================================= */

/* Gold accent palette + Didot display font, scoped to this whole page
   (about.css only ever loads on nosotros.html / en/about.html) so it also
   reaches the header's "Contacto" button and the floating WhatsApp button,
   not just the content inside .about-section. */
body{
  --color-accent: #b8860b;
  --color-accent-light: #d4af37;
  --color-accent-dark: #6b4e0e;
  --color-accent-soft: rgba(184,134,11,0.16);
  --card-glow: 0 25px 60px -25px rgba(184,134,11,0.55);
  --card-border-hover: rgba(212,175,55,0.7);
  --card-bg-hover: linear-gradient(155deg, rgba(184,134,11,0.32) 0%, rgba(8,11,22,0.92) 55%);
  --font-display: "Didot", "Playfair Display", "Bodoni MT", Georgia, serif;
}
/* Brushed-metal gradient (dark bronze -> bright gold streak -> dark bronze)
   reads as metallic rather than a flat two-tone "yellow" gradient. */
.nav-contact, .whatsapp-float{
  background: linear-gradient(135deg, #5c4413 0%, #b8860b 30%, #f0d78c 50%, #b8860b 70%, #5c4413 100%);
}
.nav-contact{ box-shadow: 0 10px 26px -10px rgba(184,134,11,0.7); }
.nav-contact:hover, .nav-contact:focus-visible{ box-shadow: 0 16px 34px -10px rgba(184,134,11,0.9); }
.whatsapp-float{ box-shadow: 0 12px 30px -10px rgba(184,134,11,0.7); }
.nav-door:hover, .nav-door:focus-visible{ background: rgba(184,134,11,0.12); }

.about-section{
  position: relative;
  overflow: hidden;
}
.about-section::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(rgba(5,7,13,0.4), rgba(5,7,13,0.58)),
    url('../img/portfolio/bUDA.jpeg') center/cover no-repeat;
  filter: saturate(1.4) brightness(1.15);
}

.about-intro .lead{
  font-family: var(--font-body);
  font-size: clamp(0.9rem, 0.3vw + 0.85rem, 1rem);
  font-weight: 400;
  color: #ffffff;
  margin-top: var(--space-md);
}

/* Blues that are hardcoded (not driven by the vars above) get a matching
   gold override so the whole section reads as one warm, consistent tone. */
.about-section .card-icon,
.about-section .timeline-icon,
.about-section .quality-icon{
  box-shadow: 0 0 0 1px rgba(212,175,55,0.3) inset, 0 8px 20px -10px rgba(184,134,11,0.55);
}

/* Gold Buddha coin (see js/buda3d.js) replacing the "Coming soon" door
   icon on this page — a small spinning medallion instead of a door. */
.nav-door .door-icon{ width: 1.85rem; height: 1.85rem; }
.buda-coin-3d{ position: relative; }
.buda-coin-3d canvas{ position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; }
.buda-coin-3d.has-3d .door-3d-fallback{ display: none; }

.about-block{ margin-bottom: var(--space-xl); }
.about-block:last-child{ margin-bottom: 0; }

.about-subtitle{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h3);
  text-align: center;
  margin-bottom: var(--space-lg);
}

/* ---------- 1. Quiénes somos + cita ---------- */
.about-intro{
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
  min-height: calc(70vh - 10rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.about-intro .lead + .lead{ margin-top: var(--space-sm); }
.about-quote{
  margin-top: var(--space-md);
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.3rem, 1.6vw + 1rem, 1.9rem);
  line-height: 1.35;
  color: var(--color-ink);
}
.about-quote span{ color: var(--color-accent); font-style: normal; }

/* ---------- 2. Proceso: timeline ---------- */
.timeline{
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.timeline::before{
  content: "";
  position: absolute;
  left: 23px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--color-line);
}
.timeline-step{
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  text-align: left;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  transition-delay: calc(var(--i, 0) * 0.12s);
}
.timeline-step.is-visible{ opacity: 1; transform: translateY(0); }
.timeline-icon{
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-accent-soft);
  color: var(--color-accent-light);
  box-shadow: 0 0 0 1px rgba(140,175,255,0.25) inset, 0 8px 20px -10px rgba(77,127,255,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
}
.timeline-icon svg{ width: 22px; height: 22px; }
.timeline-step h3{ font-size: 1.05rem; margin-bottom: 0.3rem; }
.timeline-step p{ color: var(--color-ink-soft); font-size: var(--fs-small); }

@media (min-width: 900px){
  .timeline{ flex-direction: row; align-items: flex-start; gap: var(--space-sm); }
  .timeline::before{ left: 6%; right: 6%; top: 23px; bottom: auto; height: 2px; width: auto; }
  .timeline-step{
    flex: 1;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-sm);
  }
}

/* ---------- 3. Cualidades: tarjetas interactivas ---------- */
.about-qualities{ margin-top: var(--space-sm); }
.about-qualities .about-subtitle{ text-align: center; margin-inline: auto; }
.qualities-grid{ grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.quality-card{
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  cursor: grab;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  opacity: 0;
  transform: translate(0, 0) rotate(0deg) translateY(14px);
  transition: transform 0.6s cubic-bezier(.34,1.56,.64,1) calc(var(--i, 0) * 0.08s),
              opacity 0.6s var(--ease) calc(var(--i, 0) * 0.08s),
              box-shadow 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.quality-card.is-visible{ opacity: 1; transform: translate(0, 0) rotate(0deg); }
.quality-card:hover{ box-shadow: var(--card-glow); border-color: var(--card-border-hover); background: var(--card-bg-hover); }
.quality-card:active{ cursor: grabbing; }
.quality-card.is-dragging, .quality-card.is-tilting{
  transition: none;
  box-shadow: var(--shadow-soft);
  z-index: 2;
}
.quality-card.is-dragging{ cursor: grabbing; }
.quality-card:focus-visible{ outline: 3px solid var(--color-accent); outline-offset: 3px; }
.quality-icon{
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-accent-soft);
  color: var(--color-accent-light);
  box-shadow: 0 0 0 1px rgba(140,175,255,0.25) inset, 0 8px 20px -10px rgba(77,127,255,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-sm);
}
.quality-icon svg{ width: 20px; height: 20px; }
#nosotros .quality-card, #about .quality-card,
#nosotros .benefit-card, #about .benefit-card{ border-radius: 0; }
.quality-card h3{ font-size: 1.05rem; margin-bottom: 0.4rem; }
.quality-card p{ color: #ffffff; font-size: var(--fs-small); }
.qualities-hint{
  text-align: center;
  margin-top: var(--space-md);
  font-size: var(--fs-small);
  color: var(--color-ink-faint);
}
@media (prefers-reduced-motion: reduce){
  .quality-card{ cursor: default; }
}

/* Cualidades: carrusel con movimiento propio (marquee) */
.qualities-marquee{
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.qualities-marquee .qualities-grid{
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-md);
  width: max-content;
  animation: qualitiesMarquee 24s linear infinite;
}
.qualities-marquee.is-paused .qualities-grid,
.qualities-marquee:hover .qualities-grid,
.qualities-marquee .qualities-grid:focus-within{
  animation-play-state: paused;
}
.qualities-marquee .quality-card{
  flex: 0 0 14rem;
  width: 14rem;
  opacity: 1;
  transform: translate(0, 0) rotate(0deg);
}
@keyframes qualitiesMarquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .qualities-marquee .qualities-grid{ animation: none; }
}
/* En móvil el auto-scroll sigue moviéndose solo, pero la fila también
   se puede arrastrar con el dedo a gusto propio por encima. */
@media (max-width: 760px){
  .qualities-marquee{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ---------- 4. Beneficios ---------- */
.benefits-grid{ grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.benefit-card .card-icon{ transition: transform 0.35s cubic-bezier(.34,1.56,.64,1); }
.benefit-card:hover .card-icon{ transform: scale(1.12) rotate(-6deg); }
.benefit-card h3{ font-size: 1.05rem; }
.benefit-card p{ font-size: var(--fs-small); }

/* Beneficios: carrusel con movimiento propio (marquee) */
.benefits-marquee{
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.benefits-marquee .benefits-grid{
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-md);
  width: max-content;
  animation: qualitiesMarquee 26s linear infinite;
}
.benefits-marquee:hover .benefits-grid{
  animation-play-state: paused;
}
.benefits-marquee .benefit-card{
  flex: 0 0 15rem;
  width: 15rem;
}
@media (prefers-reduced-motion: reduce){
  .benefits-marquee .benefits-grid{ animation: none; }
}
/* En móvil el auto-scroll sigue moviéndose solo, pero la fila también
   se puede arrastrar con el dedo a gusto propio por encima. */
@media (max-width: 760px){
  .benefits-marquee{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ---------- 5. Contadores + avatares del equipo ---------- */
.about-stats-band{
  margin-top: var(--space-xl);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--card-glow);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  align-items: center;
  justify-content: space-between;
}
.about-counters{
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
}
.counter{ min-width: 7.5rem; }
.counter-number{
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 2.2vw + 1rem, 2.9rem);
  color: var(--color-accent-light);
}
.counter-label{ font-size: var(--fs-small); color: var(--color-ink-soft); }

.about-team{ display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; }
.about-team-avatars{ display: flex; }
.about-team-avatars img{
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 3px solid #ffffff;
  margin-left: -14px;
  background: #fff;
  transition: transform 0.3s var(--ease);
}
.about-team-avatars img:first-child{ margin-left: 0; }
.about-team-avatars img:hover{ transform: translateY(-6px) scale(1.08); position: relative; z-index: 2; }
.about-team-label{ font-size: var(--fs-small); color: var(--color-ink-soft); }

/* ---------- Separador orgánico ---------- */
.section-wave{
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: clamp(36px, 6vw, 80px);
  display: block;
  line-height: 0;
  pointer-events: none;
}