:root {
  font-family: "Inter", sans-serif;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Hide scrollbar */
::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

/* Marquee Animation */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.animate-marquee {
  animation: marquee 40s linear infinite;
}

/* Card transitions */
.card {
  transition: transform 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
/* Views: pantalla independiente con transición */
.view{
  position: fixed;
  inset: 0;
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #f2f2f2;
  transition: opacity .25s ease;
}

.view.view-active{
  opacity: 1;
  pointer-events: auto;
}
html, body {
  margin: 0;
  padding: 0;
  background: #f2f2f2; /* o white, según tu diseño */
}
/* === Team Split Hover Cards (no libs) === */
.team-card{
  --cover-timing: .5s;
  --cover-ease: cubic-bezier(0.66, 0.08, 0.19, 0.97);
  --cover-stagger: .15s;

  position: relative;
  overflow: hidden;
  border-radius: 18px;
  aspect-ratio: 9 / 12;
  background: #111;
  cursor: pointer;
  box-shadow:
    rgba(0,0,0,.10) 0 12px 30px -18px,
    rgba(0,0,0,.10) 0 10px 18px -20px;
  transition: box-shadow .6s var(--cover-ease);
  outline: none;
}

.team-card > img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform .8s var(--cover-ease), filter .8s var(--cover-ease);
  filter: saturate(1) contrast(1) brightness(.95);
}

/* “cortina” doble */
.team-card::before,
.team-card::after{
  content:"";
  position:absolute;
  left:0;
  width:100%;
  height:50%;
  background: rgba(0,0,0,.55);
  transform-origin:left;
  transform: scaleX(0);
  transition: transform var(--cover-timing) var(--cover-ease);
  z-index:1;
}

.team-card::before{ top:0; }
.team-card::after{
  top:50%;
  transition-delay: var(--cover-stagger);
}

/* texto */
.team-card__text{
  position:absolute;
  left:18px;
  right:18px;
  bottom:18px;
  z-index:2;
  color:#fff;
}

.team-card__pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(10px);
  margin:0 0 10px 0;
}

.team-card__text h3{
  font-size: clamp(18px, 2.2vw, 28px);
  line-height:1.1;
  margin:0 0 8px 0;
  font-weight:700;
}

.team-card__desc{
  margin:0;
  font-size: clamp(12px, 1.2vw, 14px);
  line-height:1.45;
  color: rgba(255,255,255,.82);
  max-width: 36ch;

  /* animación simple */
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s var(--cover-ease), transform .55s var(--cover-ease);
}

.team-card:hover,
.team-card:focus{
  box-shadow:
    rgba(0,0,0,.18) 0 16px 36px -18px,
    rgba(0,0,0,.18) 0 12px 22px -20px;
}

.team-card:hover::before,
.team-card:hover::after,
.team-card:focus::before,
.team-card:focus::after{
  transform: scaleX(1);
}

.team-card:hover > img,
.team-card:focus > img{
  transform: scale(1.08);
  filter: saturate(1.05) contrast(1.05) brightness(.9);
}

.team-card:hover .team-card__desc,
.team-card:focus .team-card__desc{
  opacity: 1;
  transform: translateY(0);
}

/* highlight sutil */
.team-card:hover .team-card__text h3,
.team-card:focus .team-card__text h3{
  text-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.team-card:hover .team-card__pill,
.team-card:focus .team-card__pill{
  border-color: color-mix(in srgb, var(--highlight) 45%, rgba(255,255,255,.22));
}
/* Lift / hover premium (como en tu landing) */
.hover-lift {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform;
}

.hover-lift:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 28px 60px -34px rgba(0,0,0,.35);
  border-color: rgba(0,0,0,.18);
}

.hover-lift:active {
  transform: translateY(-2px) scale(1.005);
}
.hover-lift:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow:
    0 28px 60px -34px rgba(0,0,0,.35),
    0 0 0 1px rgba(202,164,114,.25);
}