/* ============================================================
   Publinovo — Página "Soluciones" (servicios)
   Catálogo / Hub de servicios. Hereda tokens y componentes de
   styles.css. Solo añade lo específico de esta página.
   ============================================================ */

/* ---------- Utilidades locales ---------- */
.u-tight   { padding-top:0 }
.u-soft    { background:var(--bg-soft) }

/* ============================================================
   1 · HERO DEL CLÚSTER (encabezado del hub)
   ============================================================ */
.sol-hero{
  position:relative; overflow:hidden;
  padding-block:clamp(48px,6.5vw,82px) clamp(52px,7vw,88px);
  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%);
}
/* malla sutil de fondo */
.sol-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%);
}
.sol-hero .wrap{ position:relative; z-index:2 }
.sol-hero__inner{ max-width:840px; margin-inline:auto; text-align:center }
.sol-hero__top{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:22px; text-align:left;
}
.sol-hero__crumbs{
  display:inline-flex; align-items:center; gap:9px; font-family:var(--ff-head);
  font-size:13px; font-weight:500; color:var(--ink-3);
}
.sol-hero__crumbs a{ color:var(--ink-3); transition:color .2s }
.sol-hero__crumbs a:hover{ color:var(--blue-d) }
.sol-hero__crumbs span[aria-current]{ color:var(--green-d); font-weight:600 }
.sol-hero__crumbs i{ font-style:normal; color:var(--line-2) }
.sol-hero h1{
  font-size:clamp(34px,5vw,58px); letter-spacing:-.03em; margin-top:4px;
  text-wrap:balance;
}
.sol-hero .lead{ margin:24px auto 0; max-width:680px }

/* fila de chips de confianza bajo el hero */
.sol-hero__chips{
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px;
  margin-top:clamp(28px,3.4vw,40px);
}
.sol-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);
}
.sol-hero__chip b{ font-family:var(--ff-head); color:var(--ink); font-weight:700 }
.sol-hero__chip svg{ width:18px; height:18px; color:var(--green-d) }

/* ============================================================
   2 · CLÚSTER DE SOLUCIONES (tarjetas)
   ============================================================ */
.sol-grid{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(20px,2.2vw,28px);
}
.sol-card{
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(24px,2.4vw,34px);
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s;
}
/* halo de color que aparece al hover (esquina superior derecha) */
.sol-card::after{
  content:""; position:absolute; z-index:-1; top:-70px; right:-70px;
  width:200px; height:200px; border-radius:50%;
  background:var(--accent-soft, var(--grad-soft));
  opacity:0; transition:opacity .45s, transform .5s cubic-bezier(.2,.7,.2,1);
}
.sol-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); border-color:transparent }
.sol-card:hover::after{ opacity:1; transform:scale(1.15) }

/* ---- Cabecera con icono grande (esquinas redondeadas) ---- */
.sol-card__head{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-bottom:22px;
}
.sol-card__ic{
  width:72px; height:72px; flex:none; border-radius:var(--r-md);
  display:grid; place-items:center;
  background:var(--accent-soft, var(--grad-soft));
  color:var(--accent, var(--blue-d));
  transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s;
}
.sol-card__ic svg{ width:38px; height:38px; stroke-width:1.7 }
.sol-card:hover .sol-card__ic{
  transform:translateY(-3px) scale(1.06) rotate(-4deg);
  box-shadow:0 16px 30px -12px var(--accent-glow, rgba(28,157,215,.45));
}
.sol-card__num{
  font-family:var(--ff-head); font-weight:700; font-size:15px;
  color:var(--line-2); letter-spacing:.02em; transition:color .35s;
}
.sol-card:hover .sol-card__num{ color:var(--accent, var(--blue-d)) }

.sol-card__title{ font-size:clamp(20px,1.7vw,23px); margin-bottom:11px; letter-spacing:-.02em }
.sol-card__desc{ font-size:15px; color:var(--ink-3); line-height:1.6; max-width:46ch }

/* ---- Lista de características (viñetas) ---- */
.sol-feats{
  display:flex; flex-wrap:wrap; gap:9px;
  margin:20px 0 24px;
}
.sol-feats li{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--bg-soft); border:1px solid var(--line);
  border-radius:var(--r-pill); padding:7px 14px 7px 11px;
  font-family:var(--ff-head); font-weight:500; font-size:12.5px; color:var(--ink-2);
}
.sol-feats li svg{ width:14px; height:14px; color:var(--accent, var(--green-d)); flex:none }

/* ---- CTA fantasma con flecha ---- */
.sol-card__cta{
  display:inline-flex; align-items:center; gap:10px; margin-top:auto;
  align-self:flex-start;
  font-family:var(--ff-head); font-weight:600; font-size:14.5px;
  color:var(--ink); padding:11px 20px; border-radius:var(--r-pill);
  border:1.5px solid var(--line-2);
  transition:border-color .25s, color .25s, background .25s, transform .25s;
}
.sol-card__cta span{
  display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%;
  background:var(--accent-soft, var(--grad-soft)); color:var(--accent, var(--blue-d));
  font-size:13px; transition:transform .3s, background .3s, color .3s;
}
.sol-card__cta:hover{
  border-color:transparent; color:#fff;
  background:var(--accent-grad, var(--grad));
  transform:translateX(2px);
}
.sol-card__cta:hover span{ background:rgba(255,255,255,.22); color:#fff; transform:translateX(3px) }

/* ---- Acentos por familia de marca (verde / teal / azul) ---- */
.sol-card--g{
  --accent:#6FAE2A; --accent-soft:rgba(140,198,63,.14);
  --accent-grad:linear-gradient(120deg,#9BD24B,#6FAE2A);
  --accent-glow:rgba(140,198,63,.5);
}

.sol-card--b{
  --accent:#1683BB; --accent-soft:rgba(28,157,215,.13);
  --accent-grad:linear-gradient(120deg,#34AEE3,#1683BB);
  --accent-glow:rgba(28,157,215,.5);
}

/* ---- Banda destacada (1ª tarjeta a todo el ancho, fondo oscuro) ---- */
.sol-card--wide{
  grid-column:1 / -1; background:var(--ink); border-color:transparent;
  flex-direction:row; align-items:center; gap:clamp(24px,3vw,48px);
  padding:clamp(28px,3vw,44px);
}
.sol-card--wide::after{ background:radial-gradient(circle, rgba(28,157,215,.28), transparent 70%) }
.sol-card--wide .sol-card__media{
  flex:none; width:clamp(120px,14vw,168px); align-self:stretch;
  border-radius:var(--r-md); display:grid; place-items:center;
  background:
    radial-gradient(90% 90% at 30% 20%, rgba(28,157,215,.30), transparent 60%),
    radial-gradient(80% 80% at 80% 90%, rgba(140,198,63,.26), transparent 60%),
    rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}
.sol-card--wide .sol-card__media svg{ width:clamp(48px,5vw,64px); height:auto; color:#fff; stroke-width:1.6 }
/* variante con imagen de mockup — sin recuadro, solo la imagen */
.sol-card--wide .sol-card__media--img{
  width:clamp(180px,20vw,260px); padding:0;
  background:none; border:none; border-radius:0;
}
.sol-card--wide .sol-card__media--img img{
  width:100%; height:auto; display:block;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.45));
  transform:translateZ(0);
  transition:transform .45s cubic-bezier(.22,.61,.36,1), filter .45s ease;
}
.sol-card--wide:hover .sol-card__media--img img{
  transform:translateY(-6px) scale(1.035);
  filter:drop-shadow(0 26px 46px rgba(0,0,0,.55));
}
@media (prefers-reduced-motion:reduce){
  .sol-card--wide .sol-card__media--img img{ transition:none }
  .sol-card--wide:hover .sol-card__media--img img{ transform:none }
}
/* variante teléfono vertical (9:16) — limita por altura para no estirar la tarjeta */
.sol-card--wide .sol-card__media--phone{ width:auto; align-self:center }
.sol-card--wide .sol-card__media--phone img{
  width:auto; height:clamp(240px,26vw,330px);
}
.sol-card--wide .sol-card__body{ flex:1; min-width:0 }
.sol-card--wide .sol-card__head{ margin-bottom:14px }
.sol-card--wide .sol-card__title{ color:#fff; font-size:clamp(22px,2.1vw,28px) }
.sol-card--wide .sol-card__desc{ color:rgba(255,255,255,.74); max-width:60ch; font-size:15.5px }
.sol-card--wide .sol-card__num{ color:rgba(255,255,255,.32) }
.sol-card--wide .sol-feats li{
  background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); color:rgba(255,255,255,.82);
}
.sol-card--wide .sol-feats li svg{ color:#a6d957 }
.sol-card--wide .sol-card__cta{ color:#fff; border-color:rgba(255,255,255,.22) }
.sol-card--wide .sol-card__cta span{ background:rgba(255,255,255,.14); color:#fff }
.sol-card--wide .sol-card__badge{
  display:inline-flex; align-items:center; gap:7px; margin-bottom:14px;
  font-family:var(--ff-head); font-weight:600; font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:#a6d957;
}
.sol-card--wide .sol-card__badge::before{ content:""; width:18px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,#a6d957,#5bc4e6) }

/* ============================================================
   3 · METODOLOGÍA (flujo horizontal de pasos)
   ============================================================ */
.method-flow{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(18px,2vw,28px); position:relative; counter-reset:mstep;
}
.mstep{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center }
/* línea conectora entre nodos */
.mstep:not(:last-child)::before{
  content:""; position:absolute; top:38px; left:calc(50% + 44px); right:calc(-50% + 44px);
  height:2px; background:repeating-linear-gradient(90deg, var(--line-2) 0 8px, transparent 8px 16px);
  z-index:0;
}
.mstep__node{
  position:relative; z-index:1; width:76px; height:76px; border-radius:22px;
  display:grid; place-items:center; background:#fff; border:1.5px solid var(--line);
  color:var(--blue-d); box-shadow:var(--shadow-sm);
  transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s, border-color .4s, color .4s, background .4s;
}
.mstep__node svg{ width:34px; height:34px; stroke-width:1.7; transition:color .4s }
.mstep__node::after{
  content:""; position:absolute; top:-9px; right:-9px;
  width:30px; height:30px; border-radius:50%; background:var(--ink); color:#fff;
  display:grid; place-items:center; font-family:var(--ff-head); font-weight:700; font-size:13px;
}
.mstep__num{
  position:absolute; top:-9px; right:-9px; z-index:2;
  width:30px; height:30px; border-radius:50%; background:var(--ink); color:#fff;
  display:grid; place-items:center; font-family:var(--ff-head); font-weight:700; font-size:13px;
  box-shadow:0 6px 14px -5px rgba(43,45,58,.5);
  transition:background .4s;
}
.mstep:hover .mstep__node{
  transform:translateY(-6px); border-color:transparent; background:var(--grad); color:#fff;
  box-shadow:0 20px 38px -14px rgba(28,157,215,.5);
}
.mstep:hover .mstep__num{ background:var(--green-d) }
.mstep h3{ font-size:18px; margin:22px 0 9px }
.mstep p{ font-size:14px; color:var(--ink-3); line-height:1.58; max-width:26ch }
/* clear the duplicate ::after content marker */
.mstep__node::after{ content:none }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .method-flow{ grid-template-columns:repeat(2,1fr); gap:40px 24px }
  .mstep:not(:last-child)::before{ display:none }
}
@media (max-width:760px){
  .sol-grid{ grid-template-columns:1fr; max-width:520px; margin-inline:auto }
  .sol-card--wide{ flex-direction:column; align-items:flex-start }
  .sol-card--wide .sol-card__media{ width:100%; min-height:120px; align-self:auto }
}
@media (max-width:520px){
  .method-flow{ grid-template-columns:1fr; max-width:360px; margin-inline:auto; gap:34px }
  .sol-card__head{ align-items:flex-start }
}