/* ═══════════════════════════════════════════════════════════════
   SPONSOREALO — css/ui.css · Sistema UI v3
   Se carga ÚLTIMO en todas las páginas y unifica los componentes
   existentes con un solo lenguaje visual (Spotlight + datos en mono).
   Para volver atrás: quitar el <link> a este archivo y el <script> a js/ui.js.
═══════════════════════════════════════════════════════════════ */

:root {
  --ui-r:      22px;                 /* radio único de tarjetas */
  --ui-text:   rgba(255,255,255,.62); /* cuerpo de tarjetas: más contraste que --dim */
  --ui-meta:   rgba(255,255,255,.45);
  --ui-line:   rgba(255,255,255,.08);
  --ui-line2:  rgba(255,255,255,.14);
  --fm:        'Martian Mono', ui-monospace, monospace;
  --light:     rgba(255,255,255,.78); /* existía en el HTML pero no estaba definida */
}

/* ───────────────────────────────────────────────
   1. EYEBROW — una sola versión
─────────────────────────────────────────────── */
.chip, .hero-eyebrow, .serv-eyebrow, .nos-eyebrow, .port-eyebrow, .blog-eyebrow, .ag-eyebrow {
  display: inline-flex; align-items: center; gap: .65rem;
  font-family: var(--fh); font-size: .72rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--cyan);
  background: none; border: 0; padding: 0; border-radius: 0;
  -webkit-text-fill-color: currentColor;
}
.chip::before, .hero-eyebrow::before, .serv-eyebrow::before, .nos-eyebrow::before,
.port-eyebrow::before, .blog-eyebrow::before, .ag-eyebrow::before {
  content: ''; display: block; flex-shrink: 0;
  width: 22px; height: 1px; background: var(--grad);
}

/* ───────────────────────────────────────────────
   2. TARJETAS DE CONTENIDO — base común + Spotlight
─────────────────────────────────────────────── */
.serv-card, .svc-card, .ind-card, .exp-card, .step-card, .why-item, .tec-card,
.valor-card, .stat-card, .nos-stat-card, .proc-card, .testim-card {
  --c: var(--cyan);
  --glow: rgba(1,229,254,.12);
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--card);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-r);
  transition: transform .45s cubic-bezier(.2,.7,.2,1), background .45s, border-color .45s, box-shadow .45s;
}
/* acentos alternados cian / rosa dentro de cada grilla */
.serv-card:nth-child(even), .svc-card:nth-child(even), .ind-card:nth-child(even), .exp-card:nth-child(even),
.step-card:nth-child(even), .why-item:nth-child(even), .tec-card:nth-child(even), .valor-card:nth-child(even),
.stat-card:nth-child(even), .nos-stat-card:nth-child(even), .proc-card:nth-child(even), .testim-card:nth-child(even) {
  --c: var(--pink);
  --glow: rgba(255,0,164,.11);
}
/* la luz que sigue al mouse (reemplaza los degradés decorativos anteriores) */
.serv-card:nth-child(n)::before, .svc-card:nth-child(n)::before, .ind-card:nth-child(n)::before, .exp-card:nth-child(n)::before, .step-card:nth-child(n)::before,
.why-item:nth-child(n)::before, .tec-card:nth-child(n)::before, .valor-card:nth-child(n)::before, .stat-card:nth-child(n)::before, .nos-stat-card:nth-child(n)::before,
.proc-card:nth-child(n)::before, .testim-card:nth-child(n)::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; pointer-events: none;
  background: radial-gradient(440px circle at var(--sx, 50%) var(--sy, 50%), var(--glow), transparent 62%);
  opacity: 0; transition: opacity .45s;
}
@media (hover: hover) {
  .serv-card:hover, .svc-card:hover, .ind-card:hover, .exp-card:hover, .step-card:hover, .why-item:hover,
  .tec-card:hover, .valor-card:hover, .stat-card:hover, .nos-stat-card:hover, .proc-card:hover, .testim-card:hover {
    transform: translateY(-5px);
    background: var(--card-hi);
    border-color: color-mix(in srgb, var(--c) 30%, transparent);
    box-shadow: 0 20px 44px -24px color-mix(in srgb, var(--c) 45%, transparent);
  }
  .serv-card:nth-child(n):hover::before, .svc-card:nth-child(n):hover::before, .ind-card:nth-child(n):hover::before, .exp-card:nth-child(n):hover::before,
  .step-card:nth-child(n):hover::before, .why-item:nth-child(n):hover::before, .tec-card:nth-child(n):hover::before, .valor-card:nth-child(n):hover::before,
  .stat-card:nth-child(n):hover::before, .nos-stat-card:nth-child(n):hover::before, .proc-card:nth-child(n):hover::before, .testim-card:nth-child(n):hover::before {
    opacity: 1;
  }
}

/* títulos y textos de tarjetas */
.serv-card h3, .svc-card h3, .ind-card h3, .exp-card .exp-name, .step-card .step-title,
.tec-card h4, .valor-card h3, .proc-card h3 {
  font-family: var(--fh); font-weight: 800; letter-spacing: -.02em;
}
.serv-card p, .svc-card p, .ind-card p, .exp-card .exp-desc, .step-card .step-desc,
.tec-card p, .valor-card p, .proc-card p, .why-item .why-text {
  color: var(--ui-text);
}
.testim-card p { color: var(--ui-text); font-style: normal; }

/* ícono: mismo cuadro y brillo al pasar el mouse */
.serv-card-ico, .svc-icon, .ind-ico, .s-pill-ico {
  border-radius: 15px;
  background: color-mix(in srgb, var(--c, var(--cyan)) 9%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--c, var(--cyan)) 22%, transparent) !important;
  transition: background .45s, box-shadow .45s, border-color .45s;
}
.serv-card-ico svg, .ind-ico svg { stroke: var(--c, var(--cyan)) !important; }
@media (hover: hover) {
  .serv-card:hover .serv-card-ico, .svc-card:hover .svc-icon, .ind-card:hover .ind-ico {
    background: color-mix(in srgb, var(--c) 16%, transparent) !important;
    box-shadow: 0 0 28px color-mix(in srgb, var(--c) 28%, transparent);
  }
}

/* píldoras del intro de servicios: misma luz, sin elevación */
.s-pill { border-radius: 16px; }

/* ───────────────────────────────────────────────
   3. TARJETAS CON IMAGEN (casos, notas, relacionados)
─────────────────────────────────────────────── */
.port-card, .rel-card, .article-card, .blog-card {
  border-radius: var(--ui-r);
  transition: transform .45s cubic-bezier(.2,.7,.2,1), border-color .45s, box-shadow .45s;
}
@media (hover: hover) {
  .port-card:hover, .rel-card:hover, .article-card:hover, .blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 0 1px rgba(1,229,254,.35), 0 20px 44px -24px rgba(1,229,254,.45);
  }
}
.port-card-cat, .rel-cat, .ac-cat {
  font-family: var(--fm) !important; font-size: .7rem !important; font-weight: 400 !important;
  letter-spacing: .02em !important;
}

/* ───────────────────────────────────────────────
   4. ETIQUETAS — mono, solo para datos
─────────────────────────────────────────────── */
.sc-tag, .f-tag, .nota-tag, .a-tag, .ag-pill, .incluye-chip {
  font-family: var(--fm); font-size: .7rem; font-weight: 400;
  letter-spacing: .02em; text-transform: none;
  color: var(--ui-text);
  border: 1px solid var(--ui-line2);
  border-radius: 8px;
  padding: .35rem .65rem;
  background: transparent;
}
a.f-tag, a.sc-tag, a.nota-tag, a.a-tag, a.ag-pill {
  color: var(--cyan) !important;
  border-color: rgba(1,229,254,.3) !important;
}
@media (hover: hover) {
  .serv-card:hover .sc-tag { color: #fff; border-color: color-mix(in srgb, var(--c) 40%, transparent); }
  a.f-tag:hover, a.sc-tag:hover, a.nota-tag:hover, a.a-tag:hover, a.ag-pill:hover { border-color: var(--cyan) !important; }
}
.exp-avail, .role-tag {
  font-family: var(--fm); font-size: .7rem; font-weight: 400; letter-spacing: .02em;
}

/* ───────────────────────────────────────────────
   5. LINKS DE TARJETA — una sola versión
─────────────────────────────────────────────── */
.serv-card-cta, .svc-link, .ind-link, .exp-link, .see-more {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--fh); font-size: .86rem; font-weight: 600;
  letter-spacing: 0; text-transform: none;
  color: var(--cyan);
  background: none; -webkit-text-fill-color: currentColor;
  border: 0;
  transition: gap .3s;
}
.serv-card-cta::after { content: '→'; background: none; -webkit-text-fill-color: currentColor; }
.ind-card:nth-child(even) .ind-link, .serv-card:nth-child(even) .serv-card-cta, .svc-card:nth-child(even) .svc-link,
.exp-card:nth-child(even) .exp-link { color: var(--pink); }
.see-more .arr, .ind-link svg { stroke: currentColor; }
@media (hover: hover) {
  .serv-card-cta:hover, .svc-link:hover, .ind-link:hover, .exp-link:hover, .see-more:hover,
  .serv-card:hover .serv-card-cta, .ind-card:hover .ind-link, .svc-card:hover .svc-link { gap: .75rem; }
}

/* ───────────────────────────────────────────────
   6. PREGUNTAS FRECUENTES
─────────────────────────────────────────────── */
.faq-item, .faq-ag details { border-radius: 18px; }

/* ───────────────────────────────────────────────
   8. CARRUSELES — que la sombra y la elevación no se corten
   El contenedor recorta a los costados (lo necesita el carrusel);
   arriba y abajo le damos aire y lo compensamos con margen negativo.
─────────────────────────────────────────────── */
.carousel-shell > div:first-child,
.carousel-clip,
.carousel-shell div[style*="overflow:hidden"],
.carousel-shell div[style*="overflow: hidden"] {
  padding-block: 14px 52px !important;
  margin-block: -14px -52px !important;
}

/* ───────────────────────────────────────────────
   9. TARJETAS DEL BLOG — mismo lenguaje que el resto
─────────────────────────────────────────────── */
.blog-card, .article-card {
  --c: var(--cyan); --glow: rgba(1,229,254,.12);
  position: relative; isolation: isolate;
  border: 1px solid var(--ui-line);
}
.blog-card:nth-child(even), .article-card:nth-child(even) { --c: var(--pink); --glow: rgba(255,0,164,.11); }
.blog-card:nth-child(n)::before, .article-card:nth-child(n)::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(440px circle at var(--sx, 50%) var(--sy, 50%), var(--glow), transparent 62%);
  opacity: 0; transition: opacity .45s;
}
@media (hover: hover) {
  .blog-card:hover, .article-card:hover {
    background: var(--card-hi);
    border-color: color-mix(in srgb, var(--c) 30%, transparent);
    box-shadow: 0 20px 44px -24px color-mix(in srgb, var(--c) 45%, transparent);
  }
  .blog-card:nth-child(n):hover::before, .article-card:nth-child(n):hover::before { opacity: 1; }
  .blog-card:hover .blog-title {
    background: none; -webkit-text-fill-color: currentColor; color: var(--c);
  }
}
.blog-meta { font-family: var(--fm); font-size: .7rem; color: var(--ui-meta); }
.blog-card p, .ac-excerpt { color: var(--ui-text); }
.blog-read, .ac-read {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--fh); font-size: .86rem; font-weight: 600;
  letter-spacing: 0; text-transform: none;
  color: var(--c, var(--cyan));
  background: none; -webkit-text-fill-color: currentColor;
  transition: gap .3s;
}
@media (hover: hover) { .blog-card:hover .blog-read, .article-card:hover .ac-read { gap: .75rem; } }

/* ───────────────────────────────────────────────
   10. TARJETAS DE CASOS — mismas esquinas en todas las capas
─────────────────────────────────────────────── */
.port-card picture, .port-card img, .port-card-img, .port-info, .port-card-overlay,
.rel-card picture, .rel-card img, .rel-overlay {
  border-radius: inherit !important;
}

/* ───────────────────────────────────────────────
   11. RESEÑAS — diseño v3
─────────────────────────────────────────────── */
.testim-card {
  display: flex; flex-direction: column;
  padding: 2rem 2rem 1.8rem;
}
.testim-q {
  font-size: 0 !important; line-height: 0; margin-bottom: .9rem;
}
.testim-q::before {
  content: '\201C';
  display: block;
  font-family: var(--fh); font-size: 3rem; font-weight: 800; line-height: .7;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.testim-card p {
  font-family: var(--fh); font-weight: 600; font-style: normal;
  font-size: 1.04rem; line-height: 1.45; letter-spacing: -.01em;
  color: rgba(255,255,255,.9);
  margin-bottom: 1.6rem;
}
.testim-who {
  margin-top: auto;
  border-top: 0; padding-top: 0;
  gap: .9rem;
}
.t-ava {
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--grad);
  font-family: var(--fh); font-weight: 800; font-size: 1rem; color: #05050a;
}
.t-name { font-family: var(--fh); font-size: .96rem; font-weight: 700; }
.t-role { font-size: .85rem; color: var(--ui-text); }

/* ───────────────────────────────────────────────
   7. ACCESIBILIDAD
─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .serv-card, .svc-card, .ind-card, .exp-card, .step-card, .why-item, .tec-card, .valor-card,
  .stat-card, .nos-stat-card, .proc-card, .testim-card, .port-card, .rel-card, .article-card, .blog-card {
    transition: none !important; transform: none !important;
  }
}