/* ==========================================================================
   Componentes reutilizables
   ========================================================================== */

/* ---- Punto animado (menú) ----
   Gira permanentemente sobre su eje horizontal (rotateY), como una
   moneda — eso lo maneja únicamente este keyframe (solo transform, sin
   color: 3 vueltas / 1080° para un loop perfecto sin salto).

   El COLOR ya no lo controla CSS: lo asigna initDotColorCycle() en
   main.js, que elige al azar (dentro de la paleta DOT_PALETTE definida
   ahí) un color distinto cada vez que el punto queda "de canto" (cada
   media vuelta = cada 1.1s, sincronizado con este mismo keyframe). El
   orden nunca es predecible, pero el color siempre sale de esa paleta
   aprobada de 8 colores. */
@keyframes dot-spin-rotate {
  0%   { transform: perspective(140px) rotateY(0deg); }
  100% { transform: perspective(140px) rotateY(1080deg); }
}

.dot-spin {
  animation: dot-spin-rotate 6.6s linear infinite;
  background-color: var(--color-black); /* color inicial; JS toma el control apenas carga */
}

/* ---- Punto único que "sube con el scroll" y se aloja en la barra ----
   Es SIEMPRE fixed; su posición vertical (--dot-top) la calcula
   initDotDock() en main.js cuadro a cuadro contra .hero__dot-anchor
   (placeholder invisible dentro del Hero). Mientras el punto está más
   abajo que su lugar en la barra, sigue el scroll con normalidad; en
   cuanto llegaría a estar más arriba que ese lugar, se clampea ahí y
   queda alojado — en cualquier dirección de scroll, sin saltos ni
   cambios de tamaño (el tamaño es siempre 28px, fijo). */
.dot-dock {
  position: fixed;
  top: var(--dot-top, 1.5rem);
  right: var(--gutter);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-black);
  border: 0;
  cursor: pointer;
  z-index: 1001; /* por encima del header (1000): nunca queda tapado */
  transition: opacity 0.3s var(--ease); /* auto-ocultamiento, ver layout.css */
}

/* ---- Botón de contacto (globo "Hello"): fijo y permanente abajo a la
   derecha ----
   A diferencia del header/punto, este NUNCA se oculta (no participa del
   auto-ocultamiento de la barra superior) — siempre visible y clickeable.
   z-index por debajo del menú fullscreen (200) para que quede tapado
   mientras el menú está abierto, y por debajo del header (1000) por si
   algún día llegan a solaparse.

   Ya no es un círculo con ícono adentro: el propio PNG (recortado a su
   contorno, fondo transparente) ES el botón, así que el contenedor no
   trae forma/color propios — solo lo posiciona y le da alto fijo (el
   ancho lo pone solo, según la proporción real del globito). Sin
   sombra (pedido explícito, se sacó el drop-shadow que tenía). Alto:
   52.8px = 48px +10% (pedido explícito). */
.whatsapp-fab {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  height: 52.8px;
  display: flex;
  align-items: center;
  z-index: 150;
}

.whatsapp-fab__icon {
  height: 100%;
  width: auto;
  display: block;
  /* Ancla del "temblor" cerca de la base de la colita (no el centro del
     globo): así el gesto se lee como si el globito vibrara desde donde
     nace, no como un giro genérico del ícono completo. */
  transform-origin: 72% 100%;
}

/* Hover: un temblor muy breve y sutil (like a phone ringing), no un
   rebote ni un giro grande — pedido explícito "sofisticado, sutil, muy
   Bi". Amplitud chica (±3°/±2°), se apaga sola al terminar la vuelta
   (no queda en loop mientras el mouse sigue encima). */
@keyframes whatsapp-fab-ring {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(-3deg); }
  40% { transform: rotate(3deg); }
  60% { transform: rotate(-2deg); }
  80% { transform: rotate(2deg); }
}

.whatsapp-fab:hover .whatsapp-fab__icon {
  animation: whatsapp-fab-ring 0.5s ease-in-out;
}

/* ---- Placeholder de imagen (swap fácil por asset real) ---- */
.img-placeholder {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 220px;
  background: repeating-linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.06),
    rgba(0, 0, 0, 0.06) 10px,
    rgba(0, 0, 0, 0.03) 10px,
    rgba(0, 0, 0, 0.03) 20px
  );
  color: rgba(0, 0, 0, 0.4);
  font-size: var(--fs-small);
  text-align: center;
  overflow: hidden;
}

.img-placeholder span {
  padding: 0.5rem 1rem;
  border: 1px dashed rgba(0, 0, 0, 0.25);
}

/* ---- Numbered list (Cómo trabajamos / Capacidades) ---- */
.numbered-list { border-top: 1px solid rgba(255, 255, 255, 0.35); }

.numbered-list__item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}

.numbered-list__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.1rem 0;
  text-align: left;
  color: inherit;
}

.numbered-list__index {
  font-family: var(--font-display-bold);
  font-weight: 700; /* antes lo daba el nombre del corte "Condensed Bold"; ahora hay que pedirlo explícito */
  opacity: 0.85;
  min-width: 2.5ch;
}

.numbered-list__label {
  font-size: clamp(1.1rem, 1.6vw, 1.5rem);
  font-weight: 500;
}

/* Ícono "+" / "×": mismo componente base para "Cómo trabajamos" y
   "Capacidades" (ambos comparten .numbered-list), así que este único
   bloque alcanza para las dos. margin-left:auto en el flex del trigger
   lo empuja hasta el borde derecho — justo sobre la línea divisoria,
   que ocupa el mismo ancho. align-self:center: el trigger alinea
   número/título arriba (flex-start, ver overrides de #como-trabajamos/
   #capacidades), pero el ícono se centra en altura con ellos aparte,
   sin depender de ese flex-start. Son dos barras (before horizontal,
   after vertical) formando un "+", siempre negras (no currentColor: se
   pidió negro fijo, sin importar el color del texto de al lado); al
   abrirse la fila (.is-active), rotar el ícono completo 45° convierte
   esas mismas dos barras en una "×" del mismo tamaño — es el mismo "+"
   girado, no un ícono distinto. */
.numbered-list__toggle {
  position: relative;
  width: 1.1rem;
  height: 1.1rem;
  margin-left: auto;
  align-self: center;
  flex-shrink: 0;
  transition: transform 0.2s var(--ease);
}

.numbered-list__toggle::before,
.numbered-list__toggle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--color-black);
  transform: translate(-50%, -50%);
}

.numbered-list__toggle::before { width: 100%; height: 2px; }
.numbered-list__toggle::after { width: 2px; height: 100%; }

.numbered-list__item.is-active .numbered-list__toggle {
  transform: rotate(45deg);
}

.numbered-list__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) var(--ease);
}

.numbered-list__panel-inner { overflow: hidden; }

.numbered-list__item.is-active .numbered-list__panel { grid-template-rows: 1fr; }

.numbered-list__desc {
  padding-bottom: 1.25rem;
  max-width: 60ch;
  font-size: 1rem;
  line-height: 1.55;
}

.numbered-list__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 1.5rem;
}

.numbered-list__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
}

/* ---- Tabs visuales (Cómo trabajamos) ---- */
.work-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.work-tabs__media { position: relative; min-height: 420px; }

.work-tabs__panel {
  padding: clamp(2rem, 4vw, 4rem);
  transition: background-color var(--dur) var(--ease);
}

.work-tabs__title {
  font-family: var(--font-display);
  font-weight: 400; /* Helvetica Neue Regular: mayúscula + tamaño grande, no un corte Black */
  text-transform: uppercase;
  font-size: clamp(2.5rem, 6vw, 5rem);
  padding: 1.25rem var(--gutter);
}

/* ---- Stat block ---- */
.stat {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.stat__label {
  font-family: var(--font-display-bold);
  font-weight: 700; /* antes lo daba el nombre del corte "Condensed Bold"; ahora hay que pedirlo explícito */
  font-size: clamp(1.25rem, 2.5vw, 2rem);
  text-transform: uppercase;
}

.stat__desc {
  max-width: 32ch;
  color: var(--color-muted-on-white);
  font-size: 0.95rem;
}

/* ---- Team grid ---- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.team-card { text-align: center; }

.team-card__photo {
  aspect-ratio: 3 / 4;
  border-radius: 999px 999px 12px 12px;
  overflow: hidden;
  margin-bottom: 0.75rem;
}

.team-card__name {
  font-family: var(--font-display-bold);
  font-weight: 700; /* antes lo daba el nombre del corte "Condensed Bold"; ahora hay que pedirlo explícito */
  color: var(--color-blue);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.hablemos-mark {
  font-family: var(--font-display);
  font-weight: 400; /* Helvetica Neue Regular: mayúscula + tamaño grande, no un corte Black */
  color: var(--color-green);
  text-transform: uppercase;
  font-size: clamp(2rem, 4vw, 3.5rem);
  text-align: center;
}

/* ---- Botón / pill link ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.75rem;
  border-radius: 999px;
  font-weight: 500; /* Helvetica Neue Medium: no existe corte SemiBold */
  background: var(--color-black);
  color: var(--color-white);
  transition: transform var(--dur) var(--ease);
}

.btn:hover { transform: translateY(-2px); }

.btn--outline {
  background: transparent;
  border: 1px solid currentColor;
}

/* ---- Industry chip list ---- */
.industry-list {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 4vw, 3rem);
  line-height: 1.15;
  text-transform: uppercase;
}