/* ============================================================
   Publinovo — Página "Casos de Éxito" (clientes-publinovo)
   Exhibición de portafolio orientada a conversión y autoridad.
   Hereda tokens y componentes de styles.css. Solo añade lo
   específico de esta página.
   ============================================================ */

/* ============================================================
   1 · HERO (encabezado de la página)
   ============================================================ */
.cs-hero{
  position:relative; overflow:hidden;
  padding-block:clamp(48px,6.5vw,82px) clamp(52px,7vw,90px);
  background:
    radial-gradient(110% 120% at 88% -10%, rgba(28,157,215,.12), transparent 55%),
    radial-gradient(95% 110% at -8% 115%, rgba(140,198,63,.20), transparent 55%),
    linear-gradient(135deg, #f4faee 0%, #eef7f4 50%, #ecf6fb 100%);
}
.cs-hero::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(43,45,58,.035) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(43,45,58,.035) 1px, transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(80% 70% at 50% 35%, #000, transparent 88%);
  mask-image:radial-gradient(80% 70% at 50% 35%, #000, transparent 88%);
}
.cs-hero .wrap{ position:relative; z-index:2 }
.cs-hero__inner{ max-width:880px; margin-inline:auto; text-align:center }
.cs-hero__top{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:22px; text-align:left;
}
.cs-crumbs{
  display:inline-flex; align-items:center; gap:9px; font-family:var(--ff-head);
  font-size:13px; font-weight:500; color:var(--ink-3);
}
.cs-crumbs a{ color:var(--ink-3); transition:color .2s }
.cs-crumbs a:hover{ color:var(--blue-d) }
.cs-crumbs span[aria-current]{ color:var(--green-d); font-weight:600 }
.cs-crumbs i{ font-style:normal; color:var(--line-2) }
.cs-hero h1{
  font-size:clamp(34px,5vw,56px); letter-spacing:-.03em; margin-top:4px;
  text-wrap:balance;
}
.cs-hero .lead{ margin:24px auto 0; max-width:740px }

/* fila de chips de respaldo bajo el hero */
.cs-hero__chips{
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px;
  margin-top:clamp(28px,3.4vw,40px);
}
.cs-hero__chip{
  display:inline-flex; align-items:center; gap:10px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-pill);
  padding:10px 18px 10px 14px; box-shadow:var(--shadow-sm);
  font-size:14px; color:var(--ink-2);
}
.cs-hero__chip b{ font-family:var(--ff-head); color:var(--ink); font-weight:700 }
.cs-hero__chip svg{ width:18px; height:18px; color:var(--green-d) }

/* ============================================================
   2 · LISTADO DE CASOS (zig-zag)
   ============================================================ */
.cs-list{
  padding-block:clamp(56px,7vw,96px);
  background:var(--bg-soft);
}
.cs-list .wrap{ max-width:1180px }
.cs-stack{
  display:flex; flex-direction:column; gap:clamp(26px,3.4vw,46px);
}

.case-study{
  display:grid; grid-template-columns:1.02fr 1fr;
  gap:clamp(28px,3.8vw,60px); align-items:center;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-xl);
  padding:clamp(22px,2.6vw,40px);
  box-shadow:var(--shadow-sm);
  transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s;
}
.case-study:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md) }
/* alterna imagen izquierda/derecha */
.case-study--flip .cs-media{ order:2 }
.case-study--flip .cs-body{ order:1 }

/* ---- Columna visual: mockup en marco de navegador ---- */
.cs-media{ position:relative }
.cs-frame{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line); background:#fff;
  box-shadow:var(--shadow-lg);
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
.case-study:hover .cs-frame{ transform:translateY(-3px) }
.cs-frame__bar{
  display:flex; align-items:center; gap:7px;
  padding:11px 14px; background:var(--bg-soft); border-bottom:1px solid var(--line);
}
.cs-frame__dot{ width:11px; height:11px; border-radius:50%; background:var(--line-2); flex:none }
.cs-frame__dot--1{ background:#FF6F6F } .cs-frame__dot--2{ background:#FFC24B } .cs-frame__dot--3{ background:#42C97A }
.cs-frame__url{
  flex:1; margin-left:8px; height:24px; border-radius:7px;
  background:#fff; border:1px solid var(--line);
  display:flex; align-items:center; gap:7px; padding:0 11px;
  font-family:var(--ff-head); font-size:11.5px; color:var(--muted); min-width:0;
}
.cs-frame__url svg{ width:12px; height:12px; flex:none; opacity:.7 }
.cs-frame__url span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.cs-frame__shot{
  position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--grad-soft);
}
.cs-frame__shot img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.case-study:hover .cs-frame__shot img{ transform:scale(1.05) }
.cs-sector{
  position:absolute; bottom:13px; left:13px; z-index:2;
  font-family:var(--ff-head); font-weight:600; font-size:12px; letter-spacing:.01em;
  color:var(--ink); background:rgba(255,255,255,.93); backdrop-filter:blur(4px);
  padding:6px 13px; border-radius:var(--r-pill); box-shadow:var(--shadow-sm);
}

/* ---- Columna de contenido ---- */
.cs-body{ min-width:0 }
.cs-body__eyebrow{ margin-bottom:14px }
.cs-body h2{
  font-size:clamp(25px,2.9vw,36px); letter-spacing:-.025em; line-height:1.08;
}
.cs-biz{
  margin-top:13px; font-size:clamp(15.5px,1.2vw,17px);
  color:var(--ink-2); line-height:1.6;
}

/* panel "Nuestra Solución" */
.cs-solve{
  margin-top:22px; padding:20px 22px;
  background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--r-md);
}
.cs-solve__kicker{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--ff-head); font-weight:600; font-size:11.5px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--green-d);
  margin-bottom:9px;
}
.cs-solve__kicker svg{ width:15px; height:15px }
.cs-solve p{ font-size:14.5px; color:var(--ink-2); line-height:1.62 }

/* etiquetas / píldoras de servicios (verde menta suave) */
.cs-tags{
  display:flex; flex-wrap:wrap; gap:9px; margin-top:22px;
  list-style:none; padding:0;
}
.cs-tag{
  font-family:var(--ff-head); font-weight:600; font-size:12.5px;
  padding:7px 14px; border-radius:var(--r-pill);
  background:rgba(140,198,63,.13); color:var(--green-d);
  border:1px solid rgba(140,198,63,.24);
}

/* pie de tarjeta: enlaces externos + CTA */
.cs-foot{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  margin-top:26px; padding-top:24px; border-top:1px solid var(--line);
}
.cs-links{ display:flex; align-items:center; gap:10px }
.cs-links a{
  width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--line-2); color:var(--ink-2); background:#fff;
  transition:transform .2s, background .25s, color .2s, border-color .2s;
}
.cs-links a:hover{ background:var(--grad); color:#fff; border-color:transparent; transform:translateY(-2px) }
.cs-links a svg{ width:19px; height:19px }
.cs-cta{ margin-left:auto }
.cs-cta span{ transition:transform .25s }
.cs-cta:hover span{ transform:translateX(4px) }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .case-study,
  .case-study--flip{ grid-template-columns:1fr; gap:26px }
  .case-study .cs-media,
  .case-study--flip .cs-media{ order:0 }
  .case-study .cs-body,
  .case-study--flip .cs-body{ order:0 }
}
@media (max-width:560px){
  .cs-foot{ gap:18px }
  .cs-cta{ margin-left:0; width:100% }
  .cs-cta.btn{ justify-content:center }
}