/* =========================================================
   Clikea Web — Estilos de las páginas de servicio por giro
   Se cargan DESPUÉS de styles.css y solo agregan lo que falta.
   ========================================================= */

/* Migas de pan */
.migas{background:var(--bg-alt);border-bottom:1px solid var(--line);font-size:.88rem}
.migas ol{display:flex;flex-wrap:wrap;gap:.45rem;padding:.8rem 0;margin:0;list-style:none;color:var(--muted)}
.migas a{color:var(--blue);font-weight:600}
.migas a:hover{text-decoration:underline}

/* Portada de la página de servicio */
.sh{background:linear-gradient(160deg,var(--ink),var(--ink-3));color:#fff;
  padding:clamp(2.5rem,6vw,4.2rem) 0}
.sh__in{display:grid;grid-template-columns:1.15fr .85fr;gap:2.5rem;align-items:center}
.sh__ico{font-size:2.6rem;display:block;margin-bottom:.8rem}
.sh h1{font-size:clamp(1.9rem,4.2vw,3rem);font-weight:800;margin-bottom:.6rem}
.sh h1 span{color:var(--amber)}
.sh__sub{color:#B9C5DA;font-size:1.06rem;max-width:50ch;margin-bottom:1.7rem}
.sh__acts{display:flex;gap:.8rem;flex-wrap:wrap}
.sh__caja{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius);padding:1.7rem;text-align:center}
.sh__caja b{display:block;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;
  color:#8B9BB5;margin-bottom:.3rem}
.sh__precio{font-family:var(--font-head);font-size:2.9rem;font-weight:800;line-height:1;color:#fff}
.sh__precio small{font-size:.9rem;color:var(--amber)}
.sh__caja p{font-size:.88rem;color:#A9B7CE;margin:.7rem 0 1.2rem}

/* Bloque de dos columnas (texto + lista) */
.dos{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.dos h2{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:800;margin-bottom:.8rem}
.dos p{color:var(--muted)}

/* Problemas que resuelve */
.probs{display:grid;gap:1rem}
.prob{display:flex;gap:1rem;align-items:flex-start;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:1.2rem 1.4rem;box-shadow:var(--shadow-sm)}
.prob__i{width:40px;height:40px;flex:none;border-radius:11px;background:rgba(245,183,0,.16);
  display:grid;place-items:center;font-size:1.15rem}
.prob h3{font-size:1rem;font-weight:700;margin-bottom:.2rem}
.prob p{font-size:.92rem;color:var(--muted);margin:0}

/* Bloque del ejemplo en vivo */
.ver{background:var(--ink);color:#fff;border-radius:var(--radius-lg);padding:clamp(1.8rem,4vw,2.6rem);
  display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center}
.ver h2{font-size:clamp(1.4rem,2.8vw,1.9rem);font-weight:800;margin-bottom:.4rem;color:#fff}
.ver p{color:#A9B7CE;margin:0;max-width:52ch}

/* Otros giros */
.otros{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}
.otros a{background:#fff;border:1px solid var(--line);border-radius:999px;padding:.5rem 1.1rem;
  font-size:.9rem;font-weight:600;color:var(--muted);transition:.15s}
.otros a:hover{border-color:var(--amber);color:var(--ink)}

@media(max-width:900px){
  .sh__in,.dos{grid-template-columns:1fr;gap:2rem}
  .ver{grid-template-columns:1fr;text-align:center}
}