/* =========================
   VARIABLES Y BASE GLOBAL
   ========================= */
:root{
  /* Marca */
  --brand:#2563eb;        /* azul primario */
  --brand-2:#16a34a;      /* verde CTA */

  /* Texto y fondos */
  --ink:#0f172a;          /* texto fuerte */
  --muted:#64748b;        /* texto secundario */
  --bg:#ffffff;           /* fondo app */
  --card:#ffffff;         /* fondo card */

  /* Efectos */
  --ring:rgba(37,99,235,.15);
  --shadow:0 4px 16px rgba(2,6,23,.06);
  --shadow-lg:0 10px 28px rgba(2,6,23,.12);

  /* Paleta para variantes (sin rosado) */
  --orange:#f97316;  --orange-2:#fb923c;   /* Landing (naranja pastel) */
  --indigo:#6366f1;  --indigo-2:#8b5cf6;   /* Web corporativa */
  --green:#22c55e;   --green-2:#16a34a;    /* Bot WhatsApp */

  /* Fondos suaves de página */
  --sky-soft:#e6f3ff;     /* Contacto */
  --mint-soft:#e9fff4;    /* Registrarse */
  --shell:#f9fafb;        /* Portafolio / áreas neutras */
}

html{scroll-behavior:smooth}
body{color:var(--ink); background:var(--bg)}
a:hover{text-decoration:none}
.text-muted{color:var(--muted)!important}

/* Nav + botones coherentes */
.navbar .nav-link.active{font-weight:600}
.navbar .btn.btn-success{background:var(--brand-2);border-color:var(--brand-2)}
.btn-primary{background:var(--brand);border-color:var(--brand)}
.btn-primary:hover{filter:brightness(.96)}
.btn-outline-primary{border-width:2px}
.btn-gradient{ background:linear-gradient(135deg,#22c55e,#16a34a); border:0; color:#fff }
.btn-gradient:hover{ filter:brightness(.95) }

/* Input focus accesible */
.form-control:focus{ box-shadow:0 0 0 .2rem var(--ring); border-color:var(--brand) }

/* WhatsApp FAB */
.wsp-fab{
  position:fixed;right:18px;bottom:18px;display:grid;place-items:center;
  width:56px;height:56px;border-radius:50%;background:#25D366;color:#fff;
  text-decoration:none;font-weight:800;box-shadow:0 10px 25px rgba(37,211,102,.35);z-index:50;
}

/* =========================
   HERO PRO (home)
   ========================= */
.pro-hero{
  background:
    radial-gradient(1100px 600px at -10% -10%, #4f46e5 0%, transparent 60%),
    radial-gradient(1100px 600px at 110% -10%, #2563eb 0%, transparent 60%),
    linear-gradient(135deg,#1d4ed8 0%,#0ea5e9 100%);
  position:relative;overflow:hidden;color:#fff;
}
.shape-wave{position:absolute;left:0;right:0;bottom:-1px;line-height:0}
.shape-wave svg{width:100%;height:80px;display:block}
.shape-wave path{fill:#fff}
.gradient-text{
  background:linear-gradient(90deg,#fff 0%,#dbeafe 40%,#fff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.glass{ backdrop-filter:blur(6px); background:rgba(255,255,255,.72)!important; border:1px solid rgba(255,255,255,.55) }
.hero-img{max-width:520px;width:100%;border-radius:1rem;box-shadow:var(--shadow-lg)}

/* =========================
   SECCIONES / TITULARES
   ========================= */
.section{padding:56px 0}
.section-head{margin-bottom:24px}
.section-title{font-weight:800;letter-spacing:-.02em}
.section-sub{color:var(--muted)}

/* =========================
   CARDS / ICONOS / LISTAS
   ========================= */
/* Card neutra por defecto */
.feature-card{
  border:0;border-radius:1rem;background:var(--card);
  box-shadow:var(--shadow);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.feature-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}

/* Icono estándar neutro */
.service-icon{
  width:64px;height:64px;font-size:28px;
  display:grid;place-items:center;
  color:var(--brand);
  background:#eef5ff;border-radius:16px;
}

/* ===== Cards con color (Servicios / Features) ===== */
.card-colored{
  border:1px solid rgba(2,6,23,.06);
  border-radius:1rem;
  background:linear-gradient(to bottom right,
    color-mix(in srgb, var(--card) 92%, var(--tone) 8%), var(--card));
  box-shadow:var(--shadow);
}
.card-colored:hover{
  border-color:color-mix(in srgb, var(--tone) 28%, #ffffff 72%);
}

/* Icono grande en cards de color */
.card-colored .service-icon{
  color:#fff;background:linear-gradient(135deg,var(--tone),var(--tone-2));
  box-shadow:0 8px 18px rgba(0,0,0,.08);
}

/* Botón a juego dentro de cards coloreadas */
.card-colored .btn-theme{
  background:linear-gradient(135deg,var(--tone-2),var(--tone));
  color:#fff;border:0;
}
.card-colored .btn-theme:hover{filter:brightness(.95)}

/* Variantes de color SIN rosado */
.svc-landing{ --tone:var(--orange);  --tone-2:var(--orange-2); }  /* Naranja pastel */
.svc-corp   { --tone:var(--indigo);  --tone-2:var(--indigo-2); }
.svc-bot    { --tone:var(--green);   --tone-2:var(--green-2); }

/* Boxes del Home con color plano suave */
.feature-colored{
  border:0;border-radius:1rem;
  background:color-mix(in srgb,#ffffff 88%, var(--tone) 12%);
  box-shadow:var(--shadow);
  transition:transform .25s, box-shadow .25s;
}
.feature-colored:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.feature-colored .service-icon{
  width:56px;height:56px;border-radius:14px;color:#fff;font-size:24px;
  background:linear-gradient(135deg,var(--tone),var(--tone-2));
  box-shadow:0 8px 18px rgba(0,0,0,.08);
}

/* Badges tech (portafolio) */
.badge-tech{
  background:#f1f5f9;color:#334155;border:1px solid #e2e8f0;
  padding:.35rem .55rem;border-radius:.65rem;font-size:.75rem;
}

/* Testimonios */
.testimonial{border:1px solid #eef2f7;border-radius:1rem}
.testimonial .rating{color:#f59e0b;letter-spacing:1px}

/* =========================
   FONDOS SUAVES DE PÁGINA
   ========================= */
.page-soft--shell    { background:var(--shell) }     /* Portafolio / neutros */
.page-soft--contact  { background:var(--sky-soft) }  /* Contacto */
.page-soft--register { background:var(--mint-soft) } /* Registrarse */
.page-soft--section  { border:1px solid rgba(2,6,23,.06); border-radius:1rem } /* wrapper opcional */

/* =========================
   UTILIDADES
   ========================= */
.object-fit-cover{object-fit:cover}
.opacity-90{opacity:.9}

/* =========================
   RESPONSIVE TWEAKS
   ========================= */
@media (max-width:576px){
  .navbar .btn{margin-top:.5rem}
  .wsp-fab{right:14px;bottom:14px}
}

/* =========================
   REDUCED MOTION
   ========================= */
@media (prefers-reduced-motion:reduce){
  .feature-card,.card-colored,.feature-colored,.btn-gradient{transition:none}
}
/* ===== Ajustes para cards coloreadas en formularios (Contacto/Registro) ===== */

/* Mejor contraste para botones outline sobre degradados */
.card-colored .btn-outline-light{
  color:#fff;
  border-color:rgba(255,255,255,.7);
}
.card-colored .btn-outline-light:hover{
  background:rgba(255,255,255,.08);
  color:#fff;
  border-color:#fff;
}

/* Formularios dentro de cards coloreadas: aseguremos buena separación */
.card.form-card{
  border:0;
  border-radius:1rem;
  background:#fff;               /* fondo blanco para inputs */
  box-shadow: var(--shadow);
}

/* Labels e inputs con resalte consistente */
.card.form-card .form-label{
  font-weight:600;
  color: var(--ink);
}
.card.form-card .form-control{
  border-radius:.75rem;
  border-color:#e5e7eb;
}
.card.form-card .form-control:focus{
  border-color: var(--brand);
  box-shadow: 0 0 0 .2rem var(--ring);
}

/* Títulos dentro de cards de color: un poco más de peso visual */
.card-colored .card-body h5{
  font-weight:700;
}

/* Pequeño lift en hover para cualquier card */
.card, .feature-card, .card-colored{
  transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover, .feature-card:hover, .card-colored:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

/* Separadores sutiles para cabeceras de sección */
.section-head + .row.g-4{
  margin-top: .25rem;
}
.section-head .section-title{
  letter-spacing: -.02em;
}
.section-head .section-sub{
  margin-top: .25rem;
}

/* Badges: mejor contraste sobre fondos de color */
.card-colored .badge-tech{
  background: rgba(255,255,255,.85);
  color:#1f2937;
  border-color: rgba(255,255,255,.9);
}

/* Ajuste de iconos dentro de cards coloreadas */
.card-colored .service-icon{
  width:64px; height:64px; font-size:28px; border-radius:16px;
  color:#fff;
  background: linear-gradient(135deg, var(--tone), var(--tone-2));
  box-shadow:0 8px 18px rgba(0,0,0,.08);
}

/* Botones tema dentro de cards coloreadas */
.card-colored .btn-theme{
  background: linear-gradient(135deg, var(--tone-2), var(--tone));
  color:#fff; border:0;
}
.card-colored .btn-theme:hover{ filter: brightness(.95) }

.p-card { background:#fff; border:1px solid rgba(2,6,23,.06); border-radius:1rem; overflow:hidden; transition:.25s ease; }
.p-card:hover { transform: translateY(-4px); box-shadow:0 12px 32px rgba(2,6,23,.08); }
.p-thumb img.object-cover { object-fit:cover; }
.p-body { padding:1rem 1.25rem 1.25rem; }
.badge.tech { background:rgba(2,6,23,.05); color:#0f172a; font-weight:500; }
.ratio-16x10 { aspect-ratio: 16 / 10; } /* por si tu Bootstrap no trae ratio */
.section-title{font-weight:800;letter-spacing:-.02em}
.object-fit-cover{object-fit:cover}
.btn-gradient{
  background: linear-gradient(135deg,#2563eb,#16a34a);
  color:#fff;border:0
}
.btn-gradient:hover{opacity:.9;color:#fff}


/* =========
   THEME
   ========= */
:root{
  /* Paleta base */
  --primary: #2563eb;   /* azul */
  --secondary: #6b7280; /* gris */
  --success: #16a34a;   /* verde */
  --warning: #f59e0b;
  --danger:  #ef4444;
  --dark:    #0b1220;

  /* Helpers */
  --ring: rgba(37,99,235,.25);
  --shadow: 0 10px 30px rgba(2,6,23,.08);
}

/* Opcional: mapear a variables Bootstrap 5 */
:root{
  --bs-primary: var(--primary);
  --bs-success: var(--success);
  --bs-secondary: var(--secondary);
  --bs-body-color: #0f172a;
  --bs-body-bg: #fff;
}

/* Tipografía y títulos */
body{ font-feature-settings:"ss01" 1; }
.section{ padding: 48px 0; }
.section-title{ font-weight: 800; letter-spacing: -.02em; }

/* =========
   NAVBAR
   ========= */
.navbar{ box-shadow: 0 4px 20px rgba(2,6,23,.04); }
.nav-link.active{ color: var(--primary) !important; font-weight: 600; }

/* =========
   BOTONES
   ========= */
.btn-gradient{
  background: linear-gradient(135deg, var(--primary), var(--success));
  color:#fff !important; border:0; box-shadow: var(--shadow);
}
.btn-gradient:hover{ filter: brightness(.96); color:#fff !important; }
.btn-outline-light{ border-color: rgba(255,255,255,.6); color:#fff; }
.btn-outline-light:hover{ background: rgba(255,255,255,.12); color:#fff; }

/* =========
   BADGES / CHIPS
   ========= */
.badge-tech{
  background: rgba(2,6,23,.06);
  color:#0b1220; border:1px solid rgba(2,6,23,.05);
  padding:.4rem .6rem; border-radius: 999px; font-weight:600;
}

/* =========
   CARDS
   ========= */
.card{ border:1px solid rgba(2,6,23,.06); box-shadow: var(--shadow); }
.card:hover{ transform: translateY(-2px); transition: .2s ease; }
.card-colored{
  background: linear-gradient(135deg, rgba(37,99,235,.06), rgba(22,163,74,.06));
  border:1px solid rgba(2,6,23,.06);
}
.feature-colored .service-icon{
  width:48px;height:48px;border-radius:12px;
  display:grid;place-items:center;font-size:22px;
  background: rgba(37,99,235,.08); color: var(--primary);
}
.feature-colored.svc-landing .service-icon{ background: rgba(236,72,153,.08); color:#ec4899; }
.feature-colored.svc-bot .service-icon{ background: rgba(22,163,74,.10); color: var(--success); }
.feature-colored.svc-corp .service-icon{ background: rgba(37,99,235,.10); color: var(--primary); }

/* =========
   HERO
   ========= */
.pro-hero{
  position: relative;
  background: radial-gradient(1200px 400px at 80% 10%, rgba(255,255,255,.06), transparent) ,
              linear-gradient(135deg, #0f3fa6 0%, #249b5f 100%);
  color:#fff;
}
.pro-hero .gradient-text{
  background: linear-gradient(135deg,#cfe6ff,#ffffff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.glass{
  backdrop-filter: blur(6px);
  background: rgba(255,255,255,.9) !important;
  border:1px solid rgba(255,255,255,.6) !important;
}
.shape-wave svg{ display:block; width:100%; height:60px; }
.shape-wave path{ fill:#fff; }

/* =========
   PORTAFOLIO
   ========= */
#pf-filtros .btn{ border-radius: 999px; }
#pf-filtros .btn.active{ background: var(--primary); color:#fff; border-color: var(--primary); }
.object-fit-cover{ object-fit: cover; }

/* mini helpers */
.opacity-90{ opacity:.9; }
.ratio > img{ width:100%; height:100%; object-fit:cover; }

/* Formularios (bordes suaves) */
.form-control{ border:1px solid rgba(2,6,23,.12); }
.form-control:focus{
  border-color: var(--primary);
  box-shadow: 0 0 0 .25rem var(--ring);
}

/* Footer suave */
.site-footer{ border-top:1px solid rgba(2,6,23,.08); }


/* mismas tarjetas suaves usadas en Servicios */
.svc-card {
  border: 1px solid rgba(2,6,23,.06);
  box-shadow: 0 10px 30px rgba(2,6,23,.04);
  border-radius: 1rem;
}

.svc-card-top img.object-cover { object-fit: cover; }

.badge-tech{
  background: rgba(2,6,23,.06);
  color:#111827;
  border-radius: 999px;
  padding: .25rem .6rem;
  font-weight: 500;
  font-size: .75rem;
}

/* botones filtros */
.btn-filter{
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color:#0f172a;
}
.btn-filter.active{ background:#e0e7ff; border-color:#c7d2fe; }

/* ---- Portafolio (match Servicios) ---- */
.card-portfolio {
  border: 1px solid rgba(2,6,23,.06);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(2,6,23,.06);
  transition: transform .2s ease, box-shadow .2s ease;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(99,102,241,.04), rgba(2,132,199,.03));
}
.card-portfolio:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(2,6,23,.10);
}
.card-portfolio .card-img-wrap {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(2,6,23,.06);
}
.card-portfolio .card-img-top {
  display: block;
  width: 100%;
  height: 210px;
  object-fit: cover;
}
.pill {
  position: absolute;
  left: 12px; top: 12px;
  padding: 6px 10px;
  font-size: .8rem;
  border-radius: 999px;
  color: #0a0a0a;
  background: #fff;
  border: 1px solid rgba(2,6,23,.07);
  box-shadow: 0 6px 16px rgba(2,6,23,.12);
}
.pill-landing { background: linear-gradient(135deg,#fff,#f8fafc); }
.pill-corp    { background: linear-gradient(135deg,#fff,#eef2ff); }
.pill-bot     { background: linear-gradient(135deg,#fff,#ecfdf5); }

.tech-badge{
  font-size:.78rem; padding:.25rem .5rem; border-radius:999px;
  background:#f1f5f9; color:#0f172a; border:1px solid rgba(2,6,23,.06)
}

/* Colores por tipo (suaves como Servicios) */
.svc-landing { background: linear-gradient(180deg, rgba(255,237,213,.28), rgba(255,255,255,.7)); }
.svc-corp    { background: linear-gradient(180deg, rgba(224,231,255,.26), rgba(255,255,255,.7)); }
.svc-bot     { background: linear-gradient(180deg, rgba(187,247,208,.26), rgba(255,255,255,.7)); }

/* Botón degradado que ya usas */
.btn-gradient{
  color:#fff; border:0;
  background:linear-gradient(135deg,#4f46e5,#22c55e);
  box-shadow:0 10px 20px rgba(79,70,229,.25);
}
.btn-gradient:hover{ filter:saturate(1.1) brightness(.98); color:#fff; }

:root{
  --accent:#ef4444;          /* rojo acento */
  --accent-soft:#fee2e2;
  --purple:#6d28d9;
  --purple-soft:#efe7ff;
  --green:#16a34a;
  --green-soft:#def7e4;
}
.text-accent{color:var(--accent)!important;}
.bg-accent-soft{background:var(--accent-soft);}
.text-purple{color:var(--purple);}
.bg-purple-soft{background:var(--purple-soft);}
.text-green{color:var(--green);}
.bg-green-soft{background:var(--green-soft);}

/* Topbar */
.topbar{font-weight:500}

/* Hero */
.hero-pro{min-height:62vh;background:#0b1220;position:relative;}
.hero-pro .hero-bg{
  position:absolute;inset:0;object-fit:cover;width:100%;height:100%;opacity:.22;filter:saturate(.7) brightness(.9);
}
.shape-wave svg{display:block;width:100%;height:60px;fill:#fff;opacity:.9}
.glass{backdrop-filter: blur(8px); border:1px solid rgba(255,255,255,.25)}

/* Cards servicios */
.svc-card{border:1px solid rgba(2,6,23,.06);transition:transform .2s ease, box-shadow .2s ease}
.svc-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(2,6,23,.08)}
.svc-icon{width:56px;height:56px;border-radius:14px;display:grid;place-items:center;font-size:1.35rem}

/* Portafolio mini */
.card-portfolio .card-img-wrap{position:relative;overflow:hidden;border-top-left-radius:.5rem;border-top-right-radius:.5rem}
.card-portfolio .card-img-top{transition:transform .5s ease}
.card-portfolio:hover .card-img-top{transform:scale(1.05)}
.pill{
  position:absolute;top:12px;left:12px;font-size:.775rem;padding:.25rem .55rem;border-radius:999px;
  background:#fff;border:1px solid rgba(2,6,23,.06);box-shadow:0 6px 18px rgba(2,6,23,.08)
}
.pill-landing{color:var(--accent)}
.pill-corp{color:var(--purple)}
.pill-bot{color:var(--green)}

.section{padding:56px 0}
.section-head{margin-bottom:22px}
.section-title{font-weight:800}
.section-sub{color:#6b7280}

/* CTA */
.cta-gradient{background:linear-gradient(135deg, rgba(37,99,235,.06), rgba(22,163,74,.06));}

/* Floating action */
.wsp-fab{
  position:fixed;right:18px;bottom:18px;width:56px;height:56px;border-radius:999px;
  display:grid;place-items:center;background:#25D366;color:#fff;font-size:1.45rem;
  box-shadow:0 10px 30px rgba(37,211,102,.55);z-index:1030;text-decoration:none
}
.wsp-fab:hover{color:#fff;transform:translateY(-2px)}

/* Utils */
.min-vh-60{min-height:60vh}
.list-checked{list-style:none;padding-left:0}
.list-checked li{position:relative;padding-left:28px;margin-bottom:8px}
.list-checked li::before{
  content:"";position:absolute;left:0;top:6px;width:16px;height:16px;border-radius:4px;
  background:var(--accent);mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width=\"16\" height=\"16\" fill=\"white\" viewBox=\"0 0 16 16\"><path d=\"M13.485 1.929a1 1 0 010 1.414l-7.07 7.071-3.182-3.182A1 1 0 114.646 6.11l2.06 2.06 6.364-6.364a1 1 0 011.415 0z\"/></svg>') center/14px 14px no-repeat;
}
.navbar-brand img { height: 28px; width: auto; }
.navbar .btn { border-radius: 999px; }          /* pastilla */
.offcanvas-top { height: auto; }                /* buscador compacto */
.offcanvas-top .input-group-lg .form-control { padding-top:.9rem; padding-bottom:.9rem; }


/* ---- Tarjetas mejoradas de Servicios ---- */
.card-colored {
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
  position: relative;
}
.card-colored:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,.10);
}

/* Portada 16:9 al tope */
.card-colored .card-cover {
  background: #f7f7f9;
}
.card-colored .card-cover img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/* Icono circular */
.service-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-content: center;
  font-size: 1.25rem;
  background: rgba(0,0,0,.05);
}
.service-icon i { line-height: 1; }

/* Badge de precio */
.price-chip {
  padding: .35rem .6rem;
  border-radius: 999px;
  font-size: .85rem;
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(0,0,0,.08);
}

/* Botón temático (hereda tono) */
.card-colored .btn-theme {
  border: 0;
  color: #fff;
}

/* Paletas por tipo */
.svc-landing { background: linear-gradient(180deg, #fff 0%, #fff 62%, #fff0 62%), linear-gradient(145deg,#fff7f0 0%,#ffe7d6 100%); }
.svc-landing .service-icon { background: rgba(255,133,64,.12); color:#ff6a1a; }
.svc-landing .btn-theme { background: linear-gradient(90deg,#ff7d3a,#ff5e00); }

.svc-corp { background: linear-gradient(180deg, #fff 0%, #fff 62%, #fff0 62%), linear-gradient(145deg,#eef0ff 0%,#e1e6ff 100%); }
.svc-corp .service-icon { background: rgba(77,102,255,.12); color:#4d66ff; }
.svc-corp .btn-theme { background: linear-gradient(90deg,#6078ff,#3a56ff); }

.svc-bot { background: linear-gradient(180deg, #fff 0%, #fff 62%, #fff0 62%), linear-gradient(145deg,#e9fff2 0%,#d8ffe9 100%); }
.svc-bot .service-icon { background: rgba(9,197,110,.12); color:#09c56e; }
.svc-bot .btn-theme { background: linear-gradient(90deg,#16d57e,#09b765); }

.svc-extra { background: linear-gradient(180deg, #fff 0%, #fff 62%, #fff0 62%), linear-gradient(145deg,#fff4d6 0%,#ffe8a6 100%); }
.svc-extra .service-icon { background: rgba(255,184,0,.15); color:#ff9c00; }
.svc-extra .btn-theme { background: linear-gradient(90deg,#ffb100,#ff9400); }

/* Ajustes tipográficos */
.section-head .section-title { letter-spacing:.2px; }
.card-colored h5 { font-weight: 700; }
.card-colored p  { line-height: 1.45; }

/* Tarjeta con color definido por variable --custom-color */
.svc-custom {
  --tone: var(--custom-color, #8a8a8a);
  border: 1px solid color-mix(in oklab, var(--tone) 25%, transparent);
  background: color-mix(in oklab, var(--tone) 10%, #fff);
}
.svc-custom .service-icon {
  background: color-mix(in oklab, var(--tone) 15%, #fff);
  border: 1px solid color-mix(in oklab, var(--tone) 25%, transparent);
}
.svc-custom .btn.btn-theme {
  background: var(--tone);
  border-color: var(--tone);
}

/* Cuando hay color custom, la tarjeta tendrá esta var disponible */
.svc-custom { 
  /* ejemplo de uso */
  --tone: var(--custom-color, #999);
  border: 1px solid color-mix(in oklab, var(--tone) 30%, #0000);
  background: color-mix(in oklab, var(--tone) 10%, #fff);
}

.card.feature-colored { border:1px solid rgba(0,0,0,.06); }
.svc-primary { --accent:#0d6efd; }
.svc-success { --accent:#198754; }
.svc-warning { --accent:#ffc107; }
.svc-danger  { --accent:#dc3545; }
.svc-info    { --accent:#0dcaf0; }
.svc-extra   { --accent:#64748b; }
/* .svc-custom recibe --accent inline */
.card.feature-colored .pill { background: var(--accent); color:#fff; }
.card.feature-colored .tech-badge { border:1px solid color-mix(in oklab, var(--accent), #000 20%); }

/* Base para cards de servicios */
.card-colored {
  --accent: #64748B; /* fallback */
  border: 1px solid color-mix(in oklab, var(--accent), #000 12%);
  box-shadow: 0 12px 32px color-mix(in oklab, var(--accent), #000 85% / 14%);
  border-radius: 1rem;
  overflow: hidden;
}
.card-colored .service-icon i { font-size: 1.6rem; }
.price-chip {
  border-radius: 999px;
  padding: .25rem .6rem;
  font-weight: 600;
  background: color-mix(in oklab, var(--accent), #fff 85%);
  border: 1px solid color-mix(in oklab, var(--accent), #000 18%);
  color: color-mix(in oklab, var(--accent), #000 20%);
}
.btn-theme {
  background: var(--accent);
  color: #fff;
  border: none;
}
.btn-theme:hover { filter: saturate(1.05) brightness(.98); color: #fff; }
.card-cover img { object-fit: cover; }

/* Personalizado: cuando viene HEX/RGB desde admin */
.svc-custom { /* el inline style define --accent */ }

/* TOKENS → definen --accent; puedes ampliar libremente */
.svc-slate   { --accent: #64748B; }
.svc-zinc    { --accent: #71717A; }
.svc-stone   { --accent: #78716C; }
.svc-sky     { --accent: #0EA5E9; }
.svc-blue    { --accent: #2563EB; }
.svc-indigo  { --accent: #4F46E5; }
.svc-violet  { --accent: #7C3AED; }
.svc-purple  { --accent: #9333EA; }
.svc-fuchsia { --accent: #C026D3; }
.svc-teal    { --accent: #14B8A6; }
.svc-cyan    { --accent: #06B6D4; }
.svc-emerald { --accent: #10B981; }
.svc-green   { --accent: #22C55E; }
.svc-lime    { --accent: #84CC16; }
.svc-amber   { --accent: #F59E0B; }
.svc-orange  { --accent: #F97316; }
.svc-rose    { --accent: #F43F5E; }
/* Bootstrap / llaves antiguas */
.svc-primary { --accent: #0D6EFD; }
.svc-success { --accent: #198754; }
.svc-warning { --accent: #FFC107; }
.svc-danger  { --accent: #DC3545; }
.svc-info    { --accent: #0DCAF0; }
.svc-landing { --accent: #0D6EFD; }
.svc-corp    { --accent: #4F46E5; }
.svc-bot     { --accent: #06B6D4; }
.svc-extra   { --accent: #64748B; }
.svc-morado  { --accent: #7C3AED; }
.svc-azul    { --accent: #2563EB; }
.svc-ambar   { --accent: #F59E0B; }
.svc-verde   { --accent: #22C55E; }

/* (Opcional) encabezado degradado sutil por token */
.card-colored.svc-indigo   .card-cover { background: linear-gradient(180deg, #EEF2FF 0%, transparent 60%); }
.card-colored.svc-emerald  .card-cover { background: linear-gradient(180deg, #ECFDF5 0%, transparent 60%); }
.card-colored.svc-amber    .card-cover { background: linear-gradient(180deg, #FFFBEB 0%, transparent 60%); }
.card-colored.svc-fuchsia  .card-cover { background: linear-gradient(180deg, #FDF4FF 0%, transparent 60%); }
/* Custom usa el mismo patrón con var(--accent) */
.card-colored.svc-custom .card-cover { background: linear-gradient(180deg, color-mix(in oklab, var(--accent), #fff 90%) 0%, transpa


  /* Reutilizadas del Portafolio (ajusta si ya existen) */
.card-portfolio.feature-colored { border: 1px solid #eee; overflow: hidden; }
.card-img-wrap { position: relative; }
.card-img-top { height: 220px; width: 100%; object-fit: cover; }
.pill { position: absolute; top: .75rem; left: .75rem; padding: .25rem .5rem; border-radius: 999px; font-size: .75rem; background: #fff; }
.price-chip { position: absolute; top: .75rem; right: .75rem; font-size: .75rem; background: rgba(255,255,255,.9); padding: .25rem .5rem; border-radius: .5rem; }
.tech-badge { font-size: .75rem; padding: .25rem .5rem; border-radius: .5rem; background: #f5f5f7; }

/* Tokens de color (si no los tenías ya) */
.svc-primary   { --accent:#0D6EFD; }
.svc-success   { --accent:#198754; }
.svc-warning   { --accent:#FFC107; }
.svc-danger    { --accent:#DC3545; }
.svc-info      { --accent:#0DCAF0; }
.svc-landing   { --accent:#0D6EFD; }
.svc-corp      { --accent:#4F46E5; }
.svc-bot       { --accent:#06B6D4; }
.svc-extra     { --accent:#64748B; }
.svc-sky       { --accent:#0EA5E9; }
.svc-blue      { --accent:#2563EB; }
.svc-indigo    { --accent:#4F46E5; }
.svc-violet    { --accent:#7C3AED; }
.svc-purple    { --accent:#9333EA; }
.svc-fuchsia   { --accent:#C026D3; }
.svc-teal      { --accent:#14B8A6; }
.svc-cyan      { --accent:#06B6D4; }
.svc-emerald   { --accent:#10B981; }
.svc-green     { --accent:#22C55E; }
.svc-lime      { --accent:#84CC16; }
.svc-amber     { --accent:#F59E0B; }
.svc-orange    { --accent:#F97316; }
.svc-rose      { --accent:#F43F5E; }
.svc-custom    { } /* usa --accent inline */

.card-portfolio.feature-colored { border-color: color-mix(in oklab, var(--accent), #000 10%); }
.card-portfolio.feature-colored .pill,
.card-portfolio.feature-colored .btn-primary { background: var(--accent); border-color: var(--accent); }
.card-portfolio.feature-colored .btn-primary:hover { filter: brightness(.92); }