:root{
  --negro:#171717;
  --gris:#252525;
  --blanco:#ffffff;
  --rojo:#E8272A;
  --crema:#F9DFC1;
}
/* ── BOTÓN "ver todos los casos" — mismo patrón que volver-link ── */
.ver-todos-wrap{
  width:100%;
  display:flex;
  justify-content:center;
  margin-bottom:80px;
}
.ver-todos-link{
  font-family:'Unbounded',sans-serif;
  font-weight:700;
  font-size:24px;
  line-height:1;
  color:#555;
  text-decoration:none;
  white-space:nowrap;
  display:flex;
  align-items:center;
  gap:10px;
  transition:color .25s;
}
.ver-todos-link svg path{ stroke:#555; transition:stroke .25s; }
.ver-todos-link:hover{ color:var(--blanco); }
.ver-todos-link:hover svg path{ stroke:var(--blanco); }

/* ── PAGE HEADER ── */
.page-topbar{
  width:100%;
  height:100px;
  pointer-events:none;
  position:relative;
}
.page-topbar-title{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top:38px;
  font-family:'Unbounded',sans-serif;
  font-weight:700;
  font-size:24px;
  line-height:1;
  color:var(--blanco);
  text-transform:lowercase;
  white-space:nowrap;
}

/* ── CASOS GRID ── */
.casos-grid{
  padding: 0 56px 120px;
  columns: 3;
  column-gap: 16px;
}

.caso-card{
  break-inside: avoid;
  display: block;
  position: relative;
  overflow: hidden;
  margin-bottom: 16px;
  cursor: pointer;
  text-decoration: none;
}

/* Clip de reveal: empieza con clip-path cubriendo todo (oscuro) */
.caso-card::after{
  content:'';
  position:absolute;
  inset:0;
  background:var(--rojo);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.5s cubic-bezier(.76,0,.24,1);
}
.caso-card:hover::after{
  transform: scaleY(1);
}

.caso-card img{
  width:100%;
  height:100%;
  display:block;
  object-fit: cover;
  transition: opacity 0.4s ease;
}
.caso-card:hover img{
  opacity: 0;
}

/* Texto que aparece en hover */
.caso-info{
  position:absolute;
  bottom: 28px;
  left: 28px;
  right: 28px;
  z-index: 2;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s ease 0.1s, transform 0.35s ease 0.1s;
}
.caso-card:hover .caso-info{
  opacity:1;
  transform:translateY(0);
}
.caso-cliente{
  font-family:'DM Sans',sans-serif;
  font-weight:700;
  font-size:13px;
  letter-spacing:0.08em;
  color:var(--negro);
  text-transform:uppercase;
  margin-bottom:6px;
}
.caso-titulo{
  font-family:'Unbounded',sans-serif;
  font-weight:700;
  font-size:22px;
  line-height:1.1;
  color:var(--negro);
}

/* ScrollTrigger reveal — initial state */
.caso-card.reveal-hidden{
  opacity:0;
  transform: translateY(40px);
}

/* ── MOBILE: casos como cards inmediatas (sin hover), apiladas en 1 columna ── */
@media (max-width:768px){
  .casos-grid{
    columns:1;
    column-gap:0;
    padding:0 24px 64px;
  }
  .caso-card{
    height:auto !important;
    aspect-ratio: 4 / 3;
    border-radius:10px;
    margin-bottom:14px;
  }
  /* En mobile no hay hover: se elimina el velo rojo y la imagen queda siempre visible */
  .caso-card::after{ content:none; }
  .caso-card img,
  .caso-card:hover img{
    opacity:1 !important;
  }
  /* Degradado fijo en la base para que el texto sea legible sobre cualquier foto */
  .caso-card::before{
    content:'';
    position:absolute;
    inset:auto 0 0 0;
    height:70%;
    background:linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.42) 55%, rgba(0,0,0,0) 100%);
    pointer-events:none;
    z-index:1;
  }
  /* La info (cliente + título) se muestra de inmediato, no depende del hover */
  .caso-info{
    opacity:1 !important;
    transform:none !important;
    transition:none;
    bottom:16px;
    left:18px;
    right:18px;
  }
  .caso-cliente{
    color:var(--blanco);
    font-size:11px;
  }
  .caso-titulo{
    color:var(--blanco);
    font-size:18px;
    line-height:1.15;
  }
  .page-topbar{ height:96px; }
  .page-topbar-title{ font-size:18px; top:32px; }
}