/* =========================================================================
   Fotos Nosotros (La Manada) — composición SUPERPUESTA calcada de Recurso 7
   (viewBox 593.8 × 355.74). Card grande (grupo) + card chica encima de su esquina
   inferior-izquierda, pill «TALENTO» y estrellita arriba-izquierda. Marcos
   polaroid (blanco, borde café, sombra dura). Posiciones = % exactos del arte.
   ========================================================================= */
.mu-team {
  --tm-card: #fff;
  --tm-border: #513224;
  --tm-name: #1A1A1A;
  --tm-role: #5a5148;
  --tm-pill: #c2e535;
  --tm-pill-ink: #00330b;
  --tm-radius: 14px;

  position: relative;
  width: 100%;
  max-width: var(--tm-max, 900px);
  margin: 0 auto;
  aspect-ratio: 593.8 / 355.74;
  container-type: inline-size;
  background: transparent;            /* SIN fondo propio: hereda el de la página */
  font-family: "Fredoka", "Baloo 2", system-ui, sans-serif;
}
.mu-team, .mu-team * { box-sizing: border-box; }

/* ── Tarjetas polaroid (posicionadas por su CENTRO) ──────────────────── */
.mu-team__card {
  position: absolute;
  margin: 0;   /* <figure> trae margin:40px por defecto → descolocaba las tarjetas */
  background: var(--tm-card);
  border: 0.34cqw solid var(--tm-border);
  border-radius: var(--tm-radius);
  padding: 1.2cqw 1.2cqw 1.3cqw;
  box-shadow: 0.7cqw 0.6cqw 0 rgba(0, 0, 0, 0.5);
  transform: rotate(var(--tilt, 0deg));   /* posicionadas por su esquina sup-izq; giran sobre su centro */
  transform-origin: 50% 50%;
  transition: transform 0.22s cubic-bezier(.2,.9,.3,1.1), box-shadow 0.22s ease;
}
.mu-team__card:hover {
  transform: rotate(calc(var(--tilt, 0deg) * 0.4)) translateY(-1.2cqw) scale(1.02);
  box-shadow: 1cqw 0.9cqw 0 rgba(0, 0, 0, 0.5);
  z-index: 6;
}
.mu-team__card--featured { left: 15.44%; top: 0.30%; width: 84.38%; z-index: 1; }
.mu-team__card--small    { width: 27.77%; z-index: 2; }

.mu-team__photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: calc(var(--tm-radius) - 0.5cqw);
  overflow: hidden;
  background: transparent;   /* sin patrón de relleno; con foto se cubre igual */
}
.mu-team__card--featured .mu-team__photo { aspect-ratio: 16 / 9.4; }
.mu-team__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.mu-team__cap { text-align: center; padding: 0.9cqw 0.3cqw 0.1cqw; }
.mu-team__name { display: block; font-weight: 700; font-size: 2.08cqw; line-height: 1.1; color: var(--tm-name); }
.mu-team__role { display: block; font-weight: 400; font-size: 1.62cqw; line-height: 1.2; color: var(--tm-role); margin-top: 0.2cqw; }
.mu-team__card--featured .mu-team__name { font-size: 2.4cqw; }
.mu-team__card--featured .mu-team__role { font-size: 1.72cqw; }

/* ── Pill «TALENTO» (decoración, arriba-izquierda) ───────────────────── */
.mu-team__pill {
  position: absolute;
  left: 10.37%; top: 29.37%;
  z-index: 4;
  transform: translate(-50%, -50%) rotate(6.62deg);
  background: var(--tm-pill);
  color: var(--tm-pill-ink);
  font-family: "xanti-typewriter-variable", "Fredoka", monospace;
  font-style: italic; font-weight: 800;
  font-size: 2.05cqw; letter-spacing: 0.02em; text-transform: uppercase;
  padding: 0.7cqw 2cqw; border-radius: 999px;
  border: 0.3cqw solid var(--tm-pill-ink); white-space: nowrap;
  box-shadow: 0.35cqw 0.35cqw 0 var(--tm-pill-ink);
}

/* ── Estrellita (Recurso 8), bajo la pill ────────────────────────────── */
.mu-team__star {
  position: absolute;
  left: 13.4%; top: 39.68%;
  width: 10.76%;
  z-index: 3;
  transform: translate(-50%, -50%) rotate(-4deg);
  pointer-events: none;
}

/* ── Móvil: COLLAGE compacto (destacada + chica encimada), legible ───────
   Mantiene la composición superpuesta del arte pero a tamaño legible: la
   destacada arriba-derecha y la(s) chica(s) montadas abajo-izquierda. Se
   sobrescriben con !important las posiciones inline (% del desktop) que trae
   el template; las inclinaciones (--tilt) configuradas SE RESPETAN. */
@media (max-width: 700px) {
  /* "Se sale del celular": el widget trae un margin-left NEGATIVO (~-76px) desde
     los ajustes de Elementor (Avanzado ▸ Margen) que posiciona el conjunto en
     ESCRITORIO, pero en móvil empuja todo el marco fuera de la pantalla por la
     izquierda. Reset del margen del contenedor Elementor SOLO en móvil (probado
     en vivo: el marco vuelve de left:-35 a left:30). :has() soportado en los
     móviles modernos; en escritorio no se toca (queda su margen intencional). */
  .elementor-widget-container:has(> .mu-team) { margin-left: 0 !important; margin-right: 0 !important; }

  .mu-team {
    aspect-ratio: auto; container-type: normal;
    max-width: 340px; margin: 0 auto; position: relative; height: 430px;
  }
  .mu-team__card {
    border-width: 2px !important; border-radius: 18px !important;
    padding: 10px !important; box-shadow: 6px 7px 0 rgba(0,0,0,.45) !important;
  }
  .mu-team__card:hover { transform: rotate(calc(var(--tilt, 0deg) * .5)) translateY(-3px); }

  .mu-team__card--featured {
    left: auto !important; right: 0 !important; top: 44px !important;
    width: 80% !important; z-index: 1 !important;
  }
  .mu-team__card--featured .mu-team__photo { aspect-ratio: 16 / 10 !important; }
  /* El texto se confina a la DERECHA (padding-left) para que la tarjeta chica
     (Kiwi, abajo-izq, encima) NO tape el inicio del nombre/rol. Antes se leía
     "os que hacen…" porque Kiwi tapaba la "L" de "Los que hacen…". */
  .mu-team__card--featured .mu-team__cap {
    text-align: right !important; padding-right: 6px !important; padding-left: 42% !important;
  }

  .mu-team__card--small {
    /* Más pequeña, abajo-izq, con inset para que la ROTACIÓN no la saque del
       marco (antes left:0/bottom:0 + giro -9° → sobresalía ~15px izq / ~11px
       abajo). Sigue encimando un poco la esquina inf-izq de la destacada. */
    left: 5% !important; right: auto !important; top: auto !important; bottom: 14px !important;
    width: 38% !important; z-index: 5 !important;
  }
  /* una 2ª/3ª tarjeta chica (si el usuario agrega más) no se apila sobre la 1ª */
  .mu-team__card--small:nth-of-type(3) { left: auto !important; right: 2% !important; bottom: 40% !important; z-index: 4 !important; }
  .mu-team__card--small:nth-of-type(4) { left: 26% !important; bottom: 46% !important; z-index: 3 !important; }
  .mu-team__card--small .mu-team__photo { aspect-ratio: 1 / 1 !important; }

  .mu-team__name { font-size: 16px !important; }
  .mu-team__role { font-size: 12.5px !important; }
  .mu-team__card--featured .mu-team__name { font-size: 18px !important; }
  .mu-team__card--featured .mu-team__role { font-size: 12.5px !important; }

  .mu-team__pill {
    left: 22px !important; top: 2px !important;
    transform: translate(0, 0) rotate(-3deg) !important;
    font-size: 12px !important; padding: 6px 15px !important;
    border-width: 2px !important; box-shadow: 2px 2px 0 var(--tm-pill-ink) !important;
  }
  .mu-team__star { display: none !important; }
}