/* ====== Tokens & Theme ====== */
:root {
  --brand:#2a3049;
  --brand-rgb:42,48,73;

  --primary:#f38f20; /* acento */
  --primary-600:#d67f1d;
  --primary-rgb:243,143,32;

  --secondary:#508697;
  --secondary-rgb:80,134,151;

  --success:#79ae3e;
  --success-rgb:121,174,62;

  --danger:#8b203b;
  --danger-rgb:139,32,59;

  --text:#2a3049;
  --muted:#508697;
  --bg:#ffffff;
  --bg-rgb:255,255,255;
  --surface:#ffffff;
  --card:#ffffff;
  --border:#e6e8ee;
  --shadow:0 10px 30px rgba(var(--brand-rgb), .06);

  /* Bootstrap CSS variables mapping */
  --bs-primary: var(--primary);
  --bs-primary-rgb: var(--primary-rgb);
  --bs-secondary: var(--secondary);
  --bs-secondary-rgb: var(--secondary-rgb);
  --bs-success: var(--success);
  --bs-success-rgb: var(--success-rgb);
  --bs-danger: var(--danger);
  --bs-danger-rgb: var(--danger-rgb);
  --bs-body-color: var(--text);
  --bs-body-bg: var(--bg);
  --bs-link-color: var(--primary);
  --bs-link-hover-color: var(--primary-600);
  --bs-border-color: var(--border);
}
body.dark {
  --text:#e2e8f0;
  --muted:#cbd5e1;
  --bg:#2a3049;
  --bg-rgb:42,48,73;
  --card:#2a3049;
  --border:#3a405a;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

html { scroll-behavior:smooth; }
body { font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; color:var(--text); background:var(--bg); }

/* ====== Preloader (Gratech-like) ====== */
#preloader {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1080;
  background:
    radial-gradient(80vmax 80vmax at 50% 50%, rgba(var(--primary-rgb), .15), transparent 60%),
    var(--bg);
  transition: opacity .5s ease;
}
#preloader.hidden { opacity: 0; pointer-events: none; }
#preloader::before,
#preloader::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 240px;
  height: 240px;
  margin: -120px 0 0 -120px;
  border-radius: 50%;
  border: 3px solid rgba(var(--primary-rgb), .32);
  opacity: 0;
  animation: pre-ripple 1.8s ease-out infinite;
}
#preloader::after { animation-delay: .5s; }

.loader-logo {
  position: relative;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--card), var(--surface));
  box-shadow: 0 12px 30px rgba(var(--brand-rgb), .15);
  overflow: visible;
}
.loader-logo img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 12px;
  z-index: 2;
}
.loader-logo::before,
.loader-logo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid transparent;
  pointer-events: none;
}
.loader-logo::before {
  border-top-color: var(--primary);
  border-right-color: var(--primary);
  animation: pre-spin 1.1s linear infinite;
}
.loader-logo::after {
  inset: 24px;
  border-bottom-color: var(--primary-600);
  border-left-color: var(--primary-600);
  animation: pre-spin-rev 1.6s linear infinite;
}

.loader-text { margin-top: 16px; font-weight: 600; color: var(--muted); font-size: 1rem; letter-spacing: .02em; }
.loader-text .dots { display: inline-block; animation: dots 1.2s ease-in-out infinite; }

/* Keyframes */
@keyframes pre-spin { to { transform: rotate(360deg); } }
@keyframes pre-spin-rev { to { transform: rotate(-360deg); } }
@keyframes pre-ripple {
  0% { transform: scale(.6); opacity: 0; }
  20% { opacity: .6; }
  100% { transform: scale(1.25); opacity: 0; }
}
@keyframes dots {
  0%, 20% { opacity: 0; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-1px); }
  100% { opacity: 0; transform: translateY(0); }
}

/* ====== Navbar ====== */
.navbar { box-shadow:var(--shadow); background:rgba(var(--bg-rgb), .85); backdrop-filter:saturate(180%) blur(10px); transition: background .2s ease, box-shadow .2s ease; padding:.5rem 0; }
body.dark .navbar { background:rgba(var(--bg-rgb), .75); }
.navbar-brand img { height:100px; width:auto; transition: height .25s ease, transform .25s ease; }
.nav-link { font-weight:500; }
.nav-link.active { color:var(--primary) !important; }
/* Shrink on scroll */
.navbar.navbar-shrink { padding-top:.25rem; padding-bottom:.25rem; }
.navbar.navbar-shrink .navbar-brand img { height:64px; }
/* Mobile base sizes smaller, and shrink even more */
@media (max-width: 991.98px) {
  .navbar-brand img { height:72px; }
  .navbar.navbar-shrink .navbar-brand img { height:56px; }
}
/* Light mode only: rectangular patch behind logos (navbar and footer) */
body:not(.dark) .navbar-brand img {
  background: rgba(var(--brand-rgb), .28);
  border-radius: 8px;
}
body:not(.dark) footer img[src$="logoTrans.png"] {
  background: rgba(var(--brand-rgb), .28);
  border-radius: 8px;
}

/* ====== Hero ====== */
.hero { padding:120px 0 72px; background:radial-gradient(1200px 600px at 80% -20%, rgba(var(--primary-rgb), .25), transparent 50%), linear-gradient(180deg, var(--surface), transparent 40%), url('../../img/imgi_15_heroShape1_1.png') right -120px bottom -80px / 680px auto no-repeat; }
.hero h1 { font-weight:800; letter-spacing:-.02em; }
.hero .lead { color:var(--muted); }
.hero-cta .btn { padding:.8rem 1.2rem; font-weight:600; }

/* Dark mode text adjustments (global) */
body.dark .card .fw-bold { color: var(--text); }
body.dark .text-muted { color: var(--muted) !important; }
body.dark hr { border-top-color: rgba(255,255,255,.14); opacity: 1; }
body.dark .card hr { border-top-color: rgba(255,255,255,.12); }
body.dark a:not(.btn) { color: var(--primary); text-decoration-color: rgba(var(--primary-rgb), .6); }
body.dark a:not(.btn):hover { color: var(--primary-600); text-decoration-color: var(--primary-600); }
body.dark a:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; }

/* ====== Section base ====== */
section { padding:72px 0; scroll-margin-top: 80px; }
.section-title { font-weight:800; letter-spacing:-.02em; position:relative; }
.section-title::after { content:""; display:block; width:64px; height:3px; margin-top:.5rem; background:linear-gradient(90deg, var(--primary), var(--secondary)); border-radius:3px; }
.text-center .section-title::after { margin-left:auto; margin-right:auto; }
.section-subtitle { color:var(--muted); }

/* Palette utilities */
.text-brand { color: var(--brand) !important; }
.bg-brand { background-color: var(--brand) !important; color:#fff !important; }
.text-accent { color: var(--secondary) !important; }
.bg-accent { background-color: var(--secondary) !important; color:#fff !important; }

/* Section backgrounds with decorative images */
.section-bg-services {
  background:
    linear-gradient(180deg, rgba(var(--primary-rgb), .06), transparent 50%),
    url('../../img/imgi_17_service-bg-shape.png') right -80px top -40px / 520px auto no-repeat;
}
body.dark .section-bg-services {
  background:
    linear-gradient(180deg, rgba(var(--primary-rgb), .12), transparent 50%),
    url('../../img/imgi_17_service-bg-shape.png') right -80px top -40px / 520px auto no-repeat;
}

/* Servicios dark mode readability */
body.dark #servicios .card h3,
body.dark #servicios .card .h5,
body.dark #servicios .card .fw-bold { color: var(--text); }
body.dark #servicios .card .text-muted { color: var(--muted) !important; }
body.dark #servicios .benefits li { color: var(--text); }

.section-bg-clients {
  background:
    linear-gradient(90deg, rgba(var(--bg-rgb), .96) 0%, rgba(var(--bg-rgb), .78) 32%, rgba(var(--bg-rgb), 0) 66%),
    url('../../img/imgi_100_testimonialBg1_1.png') right center / cover no-repeat;
}
body.dark .section-bg-clients {
  background:
    linear-gradient(90deg, rgba(var(--bg-rgb), .98) 0%, rgba(var(--bg-rgb), .84) 32%, rgba(var(--bg-rgb), 0) 66%),
    url('../../img/imgi_100_testimonialBg1_1.png') right center / cover no-repeat;
}

/* Clientes/Testimonios dark mode readability */
body.dark #clientes .card .fw-semibold { color: var(--text); }
body.dark #clientes .quote { color: var(--text); }
body.dark #clientes .client-logos img { opacity: .95; }

/* Carousel controls (dark mode) */
body.dark #clientes .carousel-control-prev-icon,
body.dark #clientes .carousel-control-next-icon {
  width: 2.5rem;
  height: 2.5rem;
  background-size: 100% 100%;
  background-color: rgba(0,0,0,.28);
  border-radius: 999px;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.6)) brightness(1.1);
}
body.dark #clientes .carousel-control-prev:hover .carousel-control-prev-icon,
body.dark #clientes .carousel-control-next:hover .carousel-control-next-icon {
  background-color: rgba(0,0,0,.36);
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.65)) brightness(1.15);
}
body.dark #clientes .carousel-control-prev:focus-visible .carousel-control-prev-icon,
body.dark #clientes .carousel-control-next:focus-visible .carousel-control-next-icon {
  box-shadow: 0 0 0 2px var(--secondary);
}

/* ====== Cards ====== */
.card { background:var(--card); border:1px solid var(--border); box-shadow:var(--shadow); }
.icon-badge { width:46px; height:46px; display:inline-flex; align-items:center; justify-content:center; border-radius:10px; background:linear-gradient(135deg, var(--primary), var(--primary-600)); color:#fff; font-size:22px; }
/* Icon badge color variants */
.icon-badge--primary { background: linear-gradient(135deg, var(--primary), var(--primary-600)); }
.icon-badge--secondary { background: var(--secondary); }
.icon-badge--success { background: var(--success); }
.icon-badge--danger { background: var(--danger); }
.benefits { padding-left:1.2rem; }

/* ====== Portfolio ====== */
.filter-btns .btn { margin:.25rem; }
.project-card img { border-top-left-radius:.5rem; border-top-right-radius:.5rem; width:100%; height:auto; aspect-ratio: 4 / 3; }
.tag { display:inline-block; padding:.2rem .5rem; font-size:.75rem; border-radius:999px; background:var(--surface); border:1px solid var(--border); margin-right:.35rem; margin-bottom:.35rem; }

/* ====== Nosotros - Metodología highlight ====== */
#nosotros .card.mt-3.reveal {
  position: relative;
  background:
    linear-gradient(180deg, rgba(var(--primary-rgb), .08), rgba(var(--secondary-rgb), .06)),
    var(--surface);
  border: 1px solid rgba(var(--primary-rgb), .35);
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(var(--brand-rgb), .10);
  transition: box-shadow .25s ease, transform .25s ease, background .25s ease, border-color .25s ease;
}
#nosotros .card.mt-3.reveal::before {
  content: "";
  position: absolute;
  left: 14px; right: 14px; top: 0;
  height: 4px;
  border-radius: 0 0 6px 6px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
}
#nosotros .card.mt-3.reveal:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(var(--brand-rgb), .16), 0 8px 22px rgba(var(--primary-rgb), .12);
}
#nosotros .card.mt-3.reveal > .fw-bold {
  color: var(--brand);
  letter-spacing: .02em;
}
#nosotros .card.mt-3.reveal > .fw-bold::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin-top: .35rem;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
}
#nosotros .card.mt-3.reveal .tag {
  background: rgba(var(--primary-rgb), .10);
  border: 1px solid rgba(var(--primary-rgb), .35);
  box-shadow: 0 6px 14px rgba(var(--brand-rgb), .06);
  transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
#nosotros .card.mt-3.reveal .tag i { color: var(--primary); }
#nosotros .card.mt-3.reveal .tag:hover {
  background: linear-gradient(135deg, var(--primary), var(--primary-600));
  color: #fff;
  border-color: transparent;
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(var(--primary-rgb), .25);
}
#nosotros .card.mt-3.reveal .tag:hover i { color: #fff; }
#nosotros .card.mt-3.reveal .tag:focus-visible {
  outline: 2px solid var(--secondary);
  outline-offset: 2px;
}
body.dark #nosotros .card.mt-3.reveal {
  background:
    linear-gradient(180deg, rgba(var(--primary-rgb), .12), rgba(var(--secondary-rgb), .10)),
    var(--card);
  border-color: rgba(var(--primary-rgb), .45);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
body.dark #nosotros .card.mt-3.reveal > .fw-bold { color: var(--text); }
body.dark #nosotros .card.mt-3.reveal .tag {
  background: rgba(var(--primary-rgb), .14);
  border-color: rgba(var(--primary-rgb), .50);
  color: var(--text);
}

/* ====== Nosotros: Mobile responsive tweaks ====== */
@media (max-width: 767.98px) {
  #nosotros { padding: 56px 0; }
  #nosotros .about-highlight { padding: 1rem !important; }
  #nosotros .section-title { font-size: 1.5rem; }
  #nosotros .section-subtitle { font-size: .95rem; }
  #nosotros .lead.about-lead { font-size: 1.05rem; }
  #nosotros .feature-list { margin-top: .75rem !important; margin-bottom: 1rem !important; }
  #nosotros .feature-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: .5rem;
    font-size: .95rem;
    line-height: 1.5;
    gap: .35rem;
    hyphens: auto;
    overflow-wrap: break-word;
    word-break: normal;
    text-wrap: balance;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: .6rem .7rem;
  }
  #nosotros .feature-list li strong { display:inline; font-size: 1em; font-weight: 600; margin: 0; }
  #nosotros .feature-list li .feature-text { display: block; flex: 1 1 auto; }
  #nosotros .feature-list li .feature-title { display: block; font-weight: 700; margin-bottom: .05rem; }
  #nosotros .feature-list li .feature-subtitle { display: block; }
  #nosotros .feature-list li i {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1px solid rgba(var(--primary-rgb), .35);
    background: rgba(var(--primary-rgb), .12);
    color: var(--primary);
    font-size: 13px;
    line-height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: .1rem;
  }
  #nosotros .feature-list li .feature-icon--secondary {
    border-color: rgba(var(--secondary-rgb), .35);
    background: rgba(var(--secondary-rgb), .12);
    color: rgba(var(--secondary-rgb), 1);
  }
  #nosotros .feature-list li .feature-icon--success {
    border-color: rgba(25,135,84,.35);
    background: rgba(25,135,84,.12);
    color: #198754;
  }
  #nosotros .about-chip { font-size: .75rem; padding: .3rem .5rem; }
  #nosotros .row.g-3 .card { padding: .75rem !important; }
  #nosotros .tag { font-size: .7rem; padding: .15rem .45rem; }
  /* Reorder: show image/KPIs first on mobile */
  #nosotros .row.align-items-center > .col-lg-6:first-child { order: 2; }
  #nosotros .row.align-items-center > .col-lg-6:last-child { order: 1; }
  /* Compact gutters */
  #nosotros .row { --bs-gutter-x: .75rem; --bs-gutter-y: 1rem; }
  /* KPI sizes */
  #nosotros .row.g-3 .card .fs-3 { font-size: 1.5rem; }
  #nosotros .row.g-3 .card .text-muted { font-size: .9rem; }
  /* Methodology card padding */
  #nosotros .card.mt-3.reveal { padding: .75rem !important; }
  /* Chips/Tags and image spacing */
  #nosotros .about-badges { gap: .35rem !important; }
  #nosotros .tag i { font-size: .9rem; }
  #nosotros img.img-fluid { margin-bottom: .75rem !important; }
  /* Paragraph spacing */
  #nosotros p { margin-bottom: .75rem; }
}

/* Extra-small phones */
@media (max-width: 360px) {
  #nosotros .feature-list li { font-size: .9rem; }
  #nosotros .feature-list li i { flex: 0 0 20px; width: 20px; height: 20px; font-size: 12px; line-height: 20px; }
  #nosotros .feature-list li .feature-subtitle {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* Small phones */
@media (max-width: 420px) {
  #nosotros .feature-list li { font-size: .92rem; }
  #nosotros .feature-list li i { flex: 0 0 20px; width: 20px; height: 20px; font-size: 12px; line-height: 20px; }
}

/* ====== Testimonials ====== */
.quote { font-size:1.05rem; }
/* Testimonial helpers */
.testimonial-card { max-width:820px; }
.testimonial-avatar { width:56px !important; height:56px !important; min-width:56px !important; min-height:56px !important; aspect-ratio:1/1; object-fit:cover; object-position:center; border-radius:10px; display:block; flex:0 0 auto; background:var(--surface); border:1px solid var(--border); }
 
 /* Client logos strip */
 .client-logos img { height:40px; width:auto; opacity:.85; filter:grayscale(100%); transition:opacity .2s ease, filter .2s ease; margin:.25rem .75rem; }
 .client-logos img:hover { opacity:1; filter:none; }

  @media (min-width: 768px) {
    .client-logos img { height:48px; }
    .testimonial-avatar { width:64px !important; height:64px !important; min-width:64px !important; min-height:64px !important; }
  }
/* ====== FAQ ====== */
.accordion-button:not(.collapsed) { color:var(--primary); background:rgba(var(--primary-rgb), .08); }

/* ====== Blog ====== */
.blog-card:hover { transform:translateY(-2px); box-shadow:0 12px 32px rgba(var(--brand-rgb), .10); }
.blog-card { transition:.25s ease; }
/* Blog dark mode readability */
body.dark #blog .card h3,
body.dark #blog .card .h5 { color: var(--text); }
/* Blog dark mode hover elevation */
body.dark .blog-card:hover { box-shadow: 0 12px 32px rgba(0,0,0,.45); }

/* ====== Contact ====== */
.contact-card { position:relative; overflow:hidden; }
.contact-card::after { content:""; position:absolute; inset:auto -30% -30% auto; width:240px; height:240px; background:radial-gradient(closest-side, rgba(var(--primary-rgb), .25), transparent); }

/* Contact dark mode readability */
body.dark #contacto .card .fw-semibold { color: var(--text); }
body.dark #contacto .form-label { color: var(--text); }
body.dark #contacto .form-control,
body.dark #contacto .form-select,
body.dark #contacto textarea {
  background-color: var(--card);
  color: var(--text);
  border-color: var(--border);
}
body.dark #contacto .form-control::placeholder,
body.dark #contacto textarea::placeholder {
  color: var(--muted);
  opacity: 1;
}
body.dark #contacto .form-control:focus,
body.dark #contacto .form-select:focus,
body.dark #contacto textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 .2rem rgba(var(--primary-rgb), .25);
}

/* ====== Footer ====== */
footer { background:var(--surface); border-top:1px solid var(--border); }
body.dark footer { background: var(--bg); border-top:1px solid var(--border); }

/* ====== Chatbot Widget ====== */
.chatbot-toggle { position:fixed; right:18px; bottom:18px; z-index:1070; }
.chatbot-toggle #botToggle { width:56px; height:56px; padding:2px; background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow); }
.chatbot-toggle #botToggle img { width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; }
.chatbot-window { position:fixed; right:18px; bottom:84px; width:320px; max-height:60vh; display:none; flex-direction:column; background:var(--card); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); overflow:hidden; z-index:1070; }
.chatbot-header { background:linear-gradient(135deg, #075E54, #128C7E); color:#fff; padding:.65rem .85rem; display:flex; align-items:center; justify-content:space-between; }
.chatbot-header .chatbot-contact { min-width:0; }
.chatbot-header .chatbot-avatar { width:32px; height:32px; border-radius:50%; object-fit:cover; border:2px solid rgba(255,255,255,.45); box-shadow:0 0 0 2px rgba(0,0,0,.08); }
.chatbot-body { padding:.75rem; overflow:auto; background:
  linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.02)),
  repeating-linear-gradient(45deg, rgba(0,0,0,.02) 0, rgba(0,0,0,.02) 2px, transparent 2px, transparent 6px);
}
.chatbot-body::-webkit-scrollbar { width:8px; height:8px; }
.chatbot-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 8px; }
.chatbot-input { padding:.5rem; border-top:1px solid var(--border); background:var(--surface); }
.msg { padding:.45rem .7rem; border-radius:.6rem; margin-bottom:.45rem; max-width:85%; }
.msg.bot { background:#ffffff; border:1px solid #eeeeee; border-radius:.7rem .7rem .7rem .2rem; box-shadow:0 1px 1px rgba(0,0,0,.04); }
.msg.user { background:#d9fdd3; border:1px solid #b2e7a4; margin-left:auto; border-radius:.7rem .7rem .2rem .7rem; box-shadow:0 1px 1px rgba(0,0,0,.05); }

/* Chatbot: Dark mode readability */
body.dark .chatbot-window { background: var(--card); border-color: var(--border); }
body.dark .chatbot-body { color: var(--text); background: repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0, rgba(255,255,255,.05) 2px, transparent 2px, transparent 6px); }
body.dark .msg.bot {
  background: var(--card);
  color: var(--text);
  border-color: var(--border);
}
body.dark .msg.user { color: var(--text); background:#0b5e4f; border-color:#0d6b5a; }
body.dark .chatbot-input {
  background: var(--card);
  border-top-color: var(--border);
}
body.dark .chatbot-input .form-control {
  background-color: var(--card);
  color: var(--text);
  border-color: var(--border);
}
body.dark .chatbot-input .form-control::placeholder {
  color: var(--muted);
  opacity: 1;
}

/* ====== Reveal on scroll ====== */
.reveal { opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease; }
.reveal.visible { opacity:1; transform:none; }

/* ====== Accessibility ====== */
.skip-link { position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus { position:static; width:auto; height:auto; padding:.5rem; background:var(--brand); color:#fff; z-index:2000; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { transition:none !important; animation:none !important; }
  html { scroll-behavior:auto; }
}

/* ====== Nosotros: Highlighted content & badges ====== */
.about-highlight {
  background:
    linear-gradient(180deg, rgba(var(--primary-rgb), .06), transparent 60%),
    var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:var(--shadow);
  position:relative;
}
.about-highlight::before {
  content:"";
  position:absolute;
  left:16px; right:16px; top:0;
  height:4px;
  border-radius:0 0 6px 6px;
  background:linear-gradient(90deg, var(--primary), var(--secondary));
}
body.dark .about-highlight {
  background:
    linear-gradient(180deg, rgba(var(--primary-rgb), .12), transparent 60%),
    var(--card);
}

.feature-list li { display:flex; align-items:flex-start; gap:.5rem; }
.feature-list li i {
  width:28px; height:28px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:8px;
  background:linear-gradient(135deg, var(--primary), var(--primary-600));
  color:#fff;
  font-size:16px;
  margin-top:.1rem;
  flex:0 0 28px;
}
/* Feature icon color variants */
.feature-list li i.feature-icon--secondary { background: var(--secondary); }
.feature-list li i.feature-icon--success { background: var(--success); }
.feature-list li i.feature-icon--danger { background: var(--danger); }

.about-badges { margin-top:.25rem; }
.about-chip {
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.35rem .6rem; font-size:.8rem;
  border-radius:999px;
  background:rgba(var(--primary-rgb), .10);
  border:1px solid rgba(var(--primary-rgb), .35);
  color:var(--text);
}
.about-chip i { color:var(--primary); font-size:1rem; }

/* About chips hover effect (same style as metodología tags) */
#nosotros .about-chip {
  box-shadow: 0 6px 14px rgba(var(--brand-rgb), .06);
  transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
#nosotros .about-chip:hover {
  background: linear-gradient(135deg, var(--primary), var(--primary-600));
  color: #fff;
  border-color: transparent;
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(var(--primary-rgb), .25);
}
#nosotros .about-chip:hover i { color: #fff; }
#nosotros .about-chip:focus-visible {
  outline: 2px solid var(--secondary);
  outline-offset: 2px;
}

.about-lead { font-weight:600; }