/* ============================================================
   FUTCO — Secciones Experiencias + Equipo
   (usa los tokens de futco-landing.css)
   ============================================================ */

/* ============================================================
   EXPERIENCIAS — rail de reels (placeholders swappables por video)
   ============================================================ */
.exp-section{background:var(--bg)}
.exp-rail{
  display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(12px,1.4vw,18px);margin-top:3rem;
}
@media (max-width:1080px){
  .exp-rail{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(200px,46%);
    overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:14px;
    margin-left:calc(var(--pad)*-1);margin-right:calc(var(--pad)*-1);padding-left:var(--pad);padding-right:var(--pad)}
  .exp-card{scroll-snap-align:start}
}
.exp-card{display:flex;flex-direction:column;gap:14px}
.exp-media{
  position:relative;aspect-ratio:9/16;border-radius:var(--r-l);overflow:hidden;
  background:linear-gradient(150deg,color-mix(in srgb,var(--c) 22%,#fff),color-mix(in srgb,var(--c) 6%,#fff));
  border:1px solid var(--line);transition:transform .4s var(--ease-soft),box-shadow .4s;cursor:pointer;
}
.exp-card:hover .exp-media{transform:translateY(-6px);box-shadow:0 28px 56px -30px color-mix(in srgb,var(--c) 70%,transparent)}
.exp-media video,.exp-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* placeholder interior */
.exp-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}
.exp-ph .exp-play{width:clamp(46px,4.4vw,58px);height:clamp(46px,4.4vw,58px);border-radius:50%;background:#fff;
  display:grid;place-items:center;box-shadow:0 12px 28px -10px color-mix(in srgb,var(--c) 80%,transparent);color:var(--c);transition:transform .3s}
.exp-card:hover .exp-ph .exp-play{transform:scale(1.1)}
.exp-ph .exp-play svg{width:42%;height:42%;margin-left:3px}
.exp-ph .exp-tag{font-family:var(--font-d);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--c);background:#fff;border-radius:var(--pill);padding:6px 14px;box-shadow:var(--shadow-s)}
.exp-ph .exp-hint{position:absolute;bottom:16px;left:0;right:0;text-align:center;font-size:11.5px;color:var(--text-3);font-family:var(--font-d);font-weight:600}
/* badge de formato arriba-izquierda */
.exp-fmt{position:absolute;top:12px;left:12px;z-index:2;font-family:var(--font-d);font-weight:600;font-size:11px;
  letter-spacing:.04em;color:#fff;background:rgba(10,14,26,.45);backdrop-filter:blur(6px);border-radius:var(--pill);padding:5px 11px}
.exp-cap h4{font-family:var(--font-d);font-weight:700;font-size:clamp(15px,1.4vw,17px);letter-spacing:-.01em;line-height:1.25}
.exp-cap p{font-size:13px;color:var(--text-3);margin-top:3px}

/* ============================================================
   EQUIPO — 4 personas
   ============================================================ */
.team-section{background:var(--bg-soft)}
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,24px);margin-top:3rem}
@media (max-width:880px){ .team-grid{grid-template-columns:1fr 1fr} }
@media (max-width:480px){ .team-grid{grid-template-columns:1fr} }
.team-card{position:relative;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--bg);
  padding:14px 14px 22px;transition:transform .4s var(--ease-soft),box-shadow .4s,border-color .4s;overflow:hidden}
.team-card::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--c);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.team-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.team-card:hover::before{transform:scaleX(1)}
.team-photo{position:relative;aspect-ratio:4/5;border-radius:var(--r-l);overflow:hidden;background:
  linear-gradient(150deg,color-mix(in srgb,var(--c) 20%,#fff),color-mix(in srgb,var(--c) 5%,#fff));display:block}
.team-photo image-slot,.team-photo img{width:100%;height:100%;object-fit:cover}
/* tarjetas con foto real: avatar circular sobre el tinte de acento */
.team-photo.filled{display:grid;place-items:center;padding:6%}
.team-photo.filled .team-face{width:92%;height:auto;aspect-ratio:1;border-radius:50%;object-fit:cover;
  box-shadow:0 14px 30px -14px color-mix(in srgb,var(--c) 80%,transparent);
  outline:3px solid #fff;outline-offset:-3px}
.team-photo .tp-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--c)}
.team-photo .tp-ph svg{width:38px;height:38px;opacity:.8}
.team-photo .tp-ph span{font-family:var(--font-d);font-weight:600;font-size:12px;color:var(--text-3)}
.team-info{padding:18px 8px 6px;text-align:center}
.team-info h3{font-family:var(--font-d);font-weight:700;font-size:clamp(16px,1.4vw,19px);letter-spacing:-.01em;line-height:1.2;
  min-height:2.4em;display:flex;align-items:center;justify-content:center;text-wrap:balance}
.team-info .role{font-size:13.5px;color:var(--text-2);margin-top:4px}
.team-info .tag{display:inline-flex;align-items:center;gap:7px;margin-top:12px;font-family:var(--font-d);font-weight:600;font-size:11.5px;
  letter-spacing:.04em;color:var(--c);background:color-mix(in srgb,var(--c) 12%,#fff);border-radius:var(--pill);padding:6px 13px}
.team-socials{display:flex;gap:8px;justify-content:center;margin-top:14px}
.team-socials a{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--text-2);transition:.2s}
.team-socials a:hover{border-color:var(--c);color:var(--c);transform:translateY(-2px)}
.team-socials svg{width:15px;height:15px}