/* Casos — la historia de cada cliente.
   Esquinas concéntricas (la idea de Apple, en CSS): el radio de adentro es el de
   afuera menos el espacio entre los dos bordes. Así la curva se ve pareja en
   cualquier tamaño, sin calcular píxel por píxel. */
.pagina-casos{--r-marco:22px;--aire:10px}

.casos-hero{padding:clamp(8.5rem,18vh,11rem) 0 clamp(3rem,7vh,4.5rem);text-align:center;
  background:radial-gradient(ellipse 70% 60% at 50% 0%,rgba(79,123,144,.18),transparent 70%)}
.casos-hero .wrap{display:grid;justify-items:center;gap:1.1rem}
.casos-hero h1{font-family:var(--titulo);font-weight:400;text-transform:uppercase;letter-spacing:.04em;
  font-size:clamp(1.9rem,1rem + 4vw,4.2rem);line-height:1.1;max-width:18ch;text-wrap:balance}
.casos-hero .lead{margin-inline:auto;text-wrap:balance}
.casos-indice{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin-top:1rem}
.casos-indice a{display:inline-flex;align-items:center;gap:.6rem;padding:.6rem 1rem;border:1px solid var(--line-strong);
  border-radius:999px;color:var(--text);font-size:.92rem;transition:border-color .25s ease,color .25s ease}
.casos-indice a .mono{color:var(--accent);font-size:.66rem}
.casos-indice a:hover{border-color:var(--accent);color:var(--accent)}

.caso-largo{padding-block:clamp(4rem,10vh,7rem);border-top:1px solid var(--line);scroll-margin-top:70px}
.caso-largo > .wrap{display:grid;gap:clamp(2rem,5vw,3.4rem)}

.caso-cabeza{display:grid;gap:.7rem;max-width:62ch}
.caso-num{color:var(--accent)}
.caso-cabeza h2{font-family:var(--titulo);font-weight:400;text-transform:uppercase;letter-spacing:.04em;
  font-size:clamp(1.7rem,1rem + 3vw,3.2rem);line-height:1.1}
.caso-meta{line-height:1.7}
.caso-gancho{font-size:clamp(1.15rem,1rem + .7vw,1.6rem);line-height:1.4;color:var(--text);text-wrap:balance;max-width:34ch}

/* la vitrina: el sitio en escritorio y, encima, en el celular */
.caso-vitrina{position:relative;margin:0;padding-right:clamp(2.5rem,9vw,7rem);padding-bottom:clamp(1.5rem,5vw,3.5rem)}
.marco-web{border:1px solid var(--line-strong);border-radius:var(--r-marco);padding:0 var(--aire) var(--aire);
  background:linear-gradient(180deg,#121b21,#0b1115);box-shadow:0 40px 90px rgba(0,0,0,.55)}
.marco-barra{display:flex;align-items:center;gap:6px;height:38px;padding-inline:4px}
.marco-barra i{width:10px;height:10px;border-radius:50%;background:rgba(178,214,232,.18)}
.marco-barra span{margin-left:12px;font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;color:var(--muted);
  padding:.25rem .8rem;border-radius:999px;background:rgba(178,214,232,.06)}
.marco-web img{display:block;width:100%;height:auto;border-radius:calc(var(--r-marco) - var(--aire))}
.marco-cel{position:absolute;right:0;bottom:0;width:clamp(120px,22%,250px);--r-cel:clamp(22px,3.2vw,38px);--aire-cel:clamp(5px,.7vw,9px);
  padding:var(--aire-cel);border-radius:var(--r-cel);background:#05080a;border:1px solid var(--line-strong);
  box-shadow:0 30px 70px rgba(0,0,0,.7),0 0 0 1px rgba(0,0,0,.6)}
.marco-cel img{display:block;width:100%;height:auto;border-radius:calc(var(--r-cel) - var(--aire-cel))}

/* la historia en tres tiempos */
.caso-historia{display:grid;grid-template-columns:1fr;gap:2.2rem}
@media (min-width:1000px){.caso-historia{grid-template-columns:1fr 1.35fr 1fr;gap:3rem}}
.caso-historia h3{color:var(--accent);margin-bottom:1rem}
.caso-historia p{color:var(--muted);line-height:1.65}
.caso-pasos{list-style:none;margin:0;padding:0;display:grid;gap:.85rem;counter-reset:paso}
.caso-pasos li{counter-increment:paso;display:grid;grid-template-columns:2.1rem 1fr;gap:.4rem;color:var(--text);line-height:1.55}
.caso-pasos li::before{content:counter(paso,decimal-leading-zero);font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;
  color:var(--accent);padding-top:.32rem}
.caso-cifras{display:grid;gap:1.2rem;margin-bottom:1.3rem}
.caso-cifras p{display:grid;gap:.3rem}
.caso-cifras strong{font-family:var(--titulo);font-weight:400;font-size:clamp(2rem,1.4rem + 2vw,3rem);line-height:1;color:var(--accent);
  text-shadow:0 0 40px rgba(168,210,230,.25)}
.caso-cifras span{color:var(--muted);font-size:.95rem;line-height:1.5}
.caso-leccion{border-left:2px solid var(--accent);padding-left:1rem;color:var(--text)!important}

/* dos vistas de adentro */
.caso-detalles{display:grid;grid-template-columns:1fr;gap:1.4rem}
@media (min-width:760px){.caso-detalles{grid-template-columns:1fr 1fr}}
.caso-detalles figure{margin:0;padding:var(--aire);border:1px solid var(--line);border-radius:var(--r-marco);background:var(--surface)}
.caso-detalles img{display:block;width:100%;height:auto;border-radius:calc(var(--r-marco) - var(--aire))}
.caso-detalles figcaption{padding:.9rem .4rem .3rem;color:var(--muted);font-size:.9rem}
.caso-ir{justify-self:start;color:var(--accent);font-weight:600;display:inline-flex;gap:.45rem}
.caso-ir:hover .arrow{transform:translateX(4px)}
.caso-ir .arrow{display:inline-block;transition:transform .25s ease}

.casos-cierre{padding-block:clamp(5rem,12vh,8rem);text-align:center;border-top:1px solid var(--line);
  background:radial-gradient(ellipse 60% 70% at 50% 100%,rgba(79,123,144,.16),transparent 70%)}
.casos-cierre .wrap{display:grid;justify-items:center;gap:1.1rem}
.casos-cierre h2{font-family:var(--titulo);font-weight:400;text-transform:uppercase;letter-spacing:.04em;
  font-size:clamp(1.5rem,1rem + 2.4vw,2.6rem);line-height:1.15;text-wrap:balance;max-width:20ch}
.casos-cierre .lead{margin-inline:auto}
.casos-cierre .hero-cta{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-top:.6rem}

@media (max-width:640px){
  .caso-vitrina{padding-right:3.2rem;padding-bottom:2.2rem}
  .marco-barra{height:30px}
  .marco-barra span{font-size:.6rem}
}