/* Las animaciones AOS (fade-left/right) desplazan elementos fuera del ancho antes de animarlos:
   en movil eso ensanchaba la pagina y sacaba el boton de menu de la pantalla. clip (no hidden) para no romper position:sticky. */
html, body { overflow-x: clip; }

/* =========================================================
   Mecapacito - Hoja de estilos central
   Variables --c-* se inyectan desde SiteSettings (admin) en base.html
   La paleta extendida (verde lima, cian, naranja) es fija pero modificable aqui.
   ========================================================= */

:root {
  /* Paleta base extendida (fija - paleta corporativa Mecapacito) */
  --c-azul-cobalto: #1A4B99;
  --c-azul-electrico: #2B76F7;
  --c-cian: #40CFFF;
  --c-verde-esmeralda: #2BB673;
  --c-verde-lima: #7AC943;
  --c-amarillo: #FFD700;
  --c-naranja: #F7931E;
  --c-terracota: #C66B2D;
  --c-petroleo: #2D3E50;

  /* Estados (basados en la paleta) */
  --c-success: var(--c-verde-esmeralda);
  --c-warning: var(--c-naranja);
  --c-info: var(--c-cian);
  --c-danger: var(--c-terracota);

  /* Neutrales */
  --c-bg: #ffffff;
  --c-bg-soft: #f6f8fb;
  --c-text: #0f172a;
  --c-text-muted: #475569;
  --c-text-soft: #64748b;
  --c-border: #e2e8f0;
  --c-border-soft: #eef2f6;
}

/* =========================================================
   Tipografia
   ========================================================= */
/* Sin scroll-behavior: smooth: los saltos a #servicios, #contacto… son inmediatos (pedido del usuario: que el scroll no tenga friccion) */
body {
  font-family: 'Inter', sans-serif;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
}
.font-display { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; letter-spacing: -0.02em; }

/* =========================================================
   Acentos basados en variables del admin
   ========================================================= */
.text-primary    { color: var(--c-primary); }
.text-secondary  { color: var(--c-secondary); }
.text-accent     { color: var(--c-accent); }
.bg-primary      { background-color: var(--c-primary); }
.bg-secondary    { background-color: var(--c-secondary); }
.bg-accent       { background-color: var(--c-accent); }
.border-secondary{ border-color: var(--c-secondary); }

/* =========================================================
   Botones
   ========================================================= */
.btn-primary {
  background: var(--c-secondary);
  color: #fff;
  font-weight: 600;
  transition: transform .2s ease;
}
.btn-primary:hover {
  background: var(--c-azul-cobalto);
  transform: translateY(-1px);
}

.btn-accent {
  background: var(--c-accent);
  color: var(--c-petroleo);
  font-weight: 700;
  transition: transform .2s ease;
}
.btn-accent:hover {
  background: var(--c-naranja);
  color: #fff;
  transform: translateY(-1px);
}

.btn-ghost {
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  background: rgba(255,255,255,.04);
}
.btn-ghost:hover {
  border-color: rgba(255,255,255,.55);
  background: rgba(255,255,255,.10);
}

.btn-outline {
  border: 1.5px solid var(--c-secondary);
  color: var(--c-secondary);
  background: transparent;
  font-weight: 600;
}
.btn-outline:hover {
  background: var(--c-secondary);
  color: #fff;
}

/* =========================================================
   Inputs
   ========================================================= */
.input-meca {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--c-border);
  border-radius: 0.75rem;
  background: #fff;
  color: var(--c-text);
  font-size: .95rem;
}
.input-meca:focus {
  outline: none;
  border-color: var(--c-secondary);
  box-shadow: 0 0 0 4px rgba(var(--c-secondary-rgb), .12);
}

/* =========================================================
   Hero Mecapacito (gradiente + blobs + grid + carrusel)
   ========================================================= */
.hero-meca {
  background:
    radial-gradient(1100px 600px at 85% -10%, rgba(var(--c-secondary-rgb), .55), transparent 60%),
    radial-gradient(800px 500px at 0% 110%, rgba(var(--c-accent-rgb), .25), transparent 60%),
    linear-gradient(135deg, var(--c-petroleo, #2D3E50) 0%, var(--c-azul-cobalto, #1A4B99) 55%, var(--c-secondary) 100%);
  position: relative;
  isolation: isolate;
}
.hero-meca-grid {
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(transparent 95%, rgba(255,255,255,.06) 95%),
    linear-gradient(90deg, transparent 95%, rgba(255,255,255,.06) 95%);
  background-size: 32px 32px;
  pointer-events: none;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.7), rgba(0,0,0,0) 90%);
}
.hero-meca-bg-blobs { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
/* Manchas de color del hero: degradados radiales estaticos que imitan el disco desenfocado (antes blur(60px) animado
   sin fin, lo mas costoso de la pagina). Cada una mide 240px mas que el disco para que quepa el halo. */
.hero-meca-bg-blobs .blob { position: absolute; border-radius: 50%; opacity: .4;
  background: radial-gradient(circle closest-side, var(--bc) var(--b0), color-mix(in srgb, var(--bc) 50%, transparent) var(--b1), transparent 100%); }
.hero-meca-bg-blobs .blob-1 { --bc: var(--c-secondary); --b0: 27%; --b1: 64%; width: 660px; height: 660px; top: -240px; right: -220px; }
.hero-meca-bg-blobs .blob-2 { --bc: var(--c-accent); --b0: 20%; --b1: 60%; width: 600px; height: 600px; bottom: -240px; left: -220px; opacity: .25; }
.hero-meca-bg-blobs .blob-3 { --bc: var(--c-cian, #40CFFF); --b0: 8%; --b1: 54%; width: 520px; height: 520px; top: calc(40% - 120px); left: calc(38% - 120px); opacity: .18; }

/* Logo grande animado en el hero */
/* Corte en el fondo azul del hero, pegado a la barra de navegacion (mismo blanco translucido), con el logo dentro */
.hero-cut { position: absolute; z-index: 5; top: 71px; left: 20px; width: 132px; height: 122px; padding: 6px 14px 16px;
  background: rgba(255,255,255,.82);
  border-radius: 0 0 30px 30px; display: flex; align-items: flex-end; justify-content: center; }
/* Esquinas concavas: el corte se funde con la barra en vez de verse como una caja pegada */
.hero-cut::before, .hero-cut::after { content: ""; position: absolute; top: 0; width: 22px; height: 22px; pointer-events: none;
  background: radial-gradient(circle at 100% 100%, transparent 21.5px, rgba(255,255,255,.82) 22px); }
.hero-cut::after { right: -22px; }
.hero-cut::before { left: -22px; transform: scaleX(-1); }
@media (min-width: 768px) { .hero-cut { left: 32px; width: 150px; height: 140px; } }
.hero-cut__logo { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 22px; background: #fff;
  box-shadow: 0 0 0 1px rgba(15,23,42,.05), 0 10px 24px -14px rgba(15,23,42,.35); transition: transform .2s cubic-bezier(.2,.8,.2,1); }
.hero-cut__logo:hover { transform: translateY(-2px); }
.hero-cut__logo img { width: 84%; height: 84%; object-fit: contain; }
.hero-cut__logo b { font-family: var(--c-font-display); font-weight: 800; font-size: 3rem; color: var(--c-secondary); }
/* El texto empieza debajo del corte */
.hero-copy { padding-top: 92px; }
@media (min-width: 768px) { .hero-copy { padding-top: 64px; } }

/* Estadisticas hero */
.hero-stat { transition: transform .2s ease; }
.hero-stat:hover { transform: translateY(-4px); }

/* Carrusel hero */
.hero-carousel { position: relative; }
.hero-carousel-stage {
  position: relative;
  min-height: 420px;
}
.hero-slide {
  position: absolute; inset: 0;
  opacity: 0; transform: translateY(18px) scale(.97);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
.hero-slide.active {
  opacity: 1; transform: translateY(0) scale(1);
  pointer-events: auto;
}
.hero-mockup {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.05);
}
.mockup-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 12px 16px;
  background: rgba(0,0,0,.18);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.mockup-bar .dot { width: 10px; height: 10px; border-radius: 50%; }
.mockup-bar .dot-r { background: #ff5f57; }
.mockup-bar .dot-y { background: #ffbd2e; }
.mockup-bar .dot-g { background: #28c940; }
.mockup-url {
  margin-left: 10px;
  font-family: 'Plus Jakarta Sans', monospace;
  font-size: .72rem; color: rgba(255,255,255,.65); letter-spacing: .02em;
}
.mockup-time { margin-left: auto; font-size: .72rem; font-weight: 600; color: rgba(255,255,255,.65); font-variant-numeric: tabular-nums; }

.mockup-body { padding: 18px; display: flex; flex-direction: column; gap: 14px; color: #fff; }
.mockup-row { display: flex; align-items: center; gap: 10px; font-size: .92rem; font-weight: 600; }
.mockup-row-head i { color: var(--m-accent, var(--c-secondary)); font-size: 1rem; }
.mockup-pill {
  padding: 3px 10px; border-radius: 999px; font-size: .68rem; font-weight: 700;
  background: rgba(43,118,247,.2); color: #9bbcff; letter-spacing: .04em;
}
.mockup-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.mockup-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.mockup-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 12px;
  display: flex; flex-direction: column; gap: 4px;
  font-size: .78rem;
}
.mockup-card i { color: var(--c, var(--c-secondary)); font-size: 1.1rem; margin-bottom: 6px; }
.mockup-card b { font-size: 1.1rem; font-weight: 800; }
.mockup-card small { font-size: .68rem; color: rgba(255,255,255,.62); }
.mockup-row-table { flex-direction: column; align-items: stretch; gap: 8px; }
.mockup-line { height: 8px; background: rgba(255,255,255,.12); border-radius: 999px; }
.mockup-line.w-100 { width: 100%; }
.mockup-line.w-90  { width: 88%; }
.mockup-line.w-80  { width: 78%; }
.mockup-line.w-70  { width: 64%; }
.mockup-cta {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 10px;
  background: var(--m-accent, var(--c-secondary));
  color: #fff; font-weight: 700; font-size: .82rem;
  box-shadow: 0 14px 26px -14px rgba(0,0,0,.5);
}
.mockup-pos-list { display: flex; flex-direction: column; gap: 6px; background: rgba(255,255,255,.04); border-radius: 10px; padding: 10px; }
.mockup-pos-item { display: flex; justify-content: space-between; font-size: .82rem; padding: 6px 4px; border-bottom: 1px dashed rgba(255,255,255,.08); }
.mockup-pos-item:last-child { border-bottom: 0; }
.mockup-pos-total { background: rgba(247,147,30,.12); border: 1px solid rgba(247,147,30,.3); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.mockup-pos-total small { color: rgba(255,255,255,.6); font-size: .72rem; }
.mockup-pos-total b { font-size: 1.6rem; font-weight: 800; color: #fff; }
.mockup-chart { display: flex; align-items: flex-end; gap: 6px; height: 90px; padding: 8px; background: rgba(255,255,255,.04); border-radius: 10px; }
.mockup-chart span { flex: 1; background: linear-gradient(180deg, var(--m-accent), rgba(255,255,255,.05)); border-radius: 6px 6px 2px 2px; min-height: 10px; }

/* Intro en video del hero: ventana macOS con tiempo y progreso; se ve una vez y da paso al carrusel */
.hero-intro { position: absolute; left: 0; right: 0; top: 0; z-index: 4;
  opacity: 0; visibility: hidden; transition: opacity .2s ease, transform .2s ease; }
.hero-intro__media { position: relative; aspect-ratio: 16 / 9; background: #d9dadc; }
.hero-intro__media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-intro__prog { height: 3px; background: rgba(255,255,255,.08); }
.hero-intro__prog i { display: block; height: 100%; background: linear-gradient(90deg, var(--c-secondary), #40CFFF); transform: scaleX(0); transform-origin: left; }
.hero-carousel.is-intro .hero-intro { opacity: 1; visibility: visible; transition: opacity .2s ease, transform .2s ease; }
.hero-carousel.is-intro .hero-slide { opacity: 0 !important; transform: translateY(18px) scale(.97) !important; }
.hero-carousel.is-intro .hc-btn:not(.hc-replay) { opacity: .35; pointer-events: none; }
.hero-carousel:not(.is-intro) .hero-intro { transform: scale(.96); }
.hc-replay { background: transparent; border-style: dashed; }
.hero-intro__sound { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px; border: 0; cursor: pointer; font-size: .85rem; font-weight: 600; color: #1d1d1f;
  background: rgba(255,255,255,.92); box-shadow: 0 10px 24px -12px rgba(0,0,0,.4);
  animation: heroSound .25s ease; transition: transform .2s; }
.hero-intro__sound:hover { background: #fff; transform: translateX(-50%) scale(1.04); }
.hero-intro__sound[hidden] { display: none; }
@keyframes heroSound { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translateX(-50%); } }

/* Controles del carrusel hero */
.hero-carousel-controls {
  margin-top: 18px;
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center;
}
.hc-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.78);
  font-size: .78rem; font-weight: 600;
  cursor: pointer;
  transition: transform .2s ease;
}
.hc-btn:hover { background: rgba(255,255,255,.12); color: #fff; transform: translateY(-1px); }
.hc-btn.active {
  background: var(--c-accent);
  color: var(--c-petroleo);
  border-color: transparent;
  box-shadow: 0 14px 26px -14px rgba(var(--c-accent-rgb), .65);
}
.hc-btn i { font-size: .85rem; }

/* Divisor del hero (pintura caida) */
.hero-divider {
  position: absolute; left: 0; right: 0; bottom: -1px;
  z-index: 3; line-height: 0;
}
.hero-divider svg { display: block; width: 100%; height: 90px; }
@media (min-width: 768px) {
  .hero-divider svg { height: 120px; }
}

/* =========================================================
   Separadores entre secciones
   ========================================================= */
.section-divider {
  height: 4px;
  background: var(--c-secondary);
  width: 60px;
  border-radius: 999px;
  margin: 0 auto;
}
.section-divider-accent {
  background: var(--c-accent);
}

/* Fondos de seccion (alternados) */
.section-light { background: #ffffff; position: relative; }
.section-soft  {
  position: relative;
  background:
    radial-gradient(800px 400px at 90% 0%, rgba(var(--c-secondary-rgb), .07), transparent 60%),
    radial-gradient(600px 400px at 0% 100%, rgba(var(--c-accent-rgb), .08), transparent 60%),
    var(--c-bg-soft);
}
.section-tinted {
  position: relative;
  background:
    linear-gradient(135deg, rgba(var(--c-secondary-rgb), .06) 0%, rgba(var(--c-accent-rgb), .05) 100%);
}

/* SVG dividers (forma redondeada / pintura caida) entre secciones */
.section-svg-divider {
  position: absolute; left: 0; right: 0; line-height: 0; z-index: 2;
  pointer-events: none;
}
.section-svg-divider-bottom { bottom: -1px; }
.section-svg-divider-top    { top: -1px; transform: rotate(180deg); }
.section-svg-divider svg { display: block; width: 100%; height: 80px; }
@media (min-width: 768px) {
  .section-svg-divider svg { height: 110px; }
}

/* =========================================================
   Eyebrow / Section title
   ========================================================= */
.section-title-eyebrow {
  display: inline-block;
  padding: .35rem .85rem;
  border-radius: 999px;
  background: rgba(var(--c-secondary-rgb), .10);
  color: var(--c-secondary);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* =========================================================
   Cards
   ========================================================= */
.card-base {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 1rem;
  transition: transform .2s ease;
}
.card-base:hover {
  border-color: var(--c-secondary);
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -16px rgba(15,23,42,.16);
}

.card-servicio-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.25rem;
  background: var(--c-secondary);
}

.card-proyecto {
  position: relative;
  overflow: hidden;
  border-radius: 1.25rem;
  background: #fff;
  border: 1px solid var(--c-border);
  transition: transform .2s ease;
}
.card-proyecto:hover {
  border-color: var(--c-secondary);
  transform: translateY(-4px);
  box-shadow: 0 24px 50px -16px rgba(15,23,42,.18);
}

/* =========================================================
   Badges
   ========================================================= */
.badge-tech {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .25rem .65rem;
  border-radius: 999px;
  background: rgba(var(--c-primary-rgb), .06);
  color: var(--c-primary);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .02em;
}
.badge-param {
  display: inline-block;
  padding: .15rem .5rem;
  border-radius: .35rem;
  background: var(--c-accent);
  color: var(--c-petroleo);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.badge-success {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .25rem .65rem;
  border-radius: 999px;
  background: rgba(43, 182, 115, .12);
  color: var(--c-success);
  font-size: .72rem; font-weight: 700;
}

/* =========================================================
   Feature pills
   ========================================================= */
.feature-pill {
  display: flex; align-items: flex-start; gap: .65rem;
  padding: .85rem 1rem;
  border-radius: .85rem;
  background: var(--c-bg-soft);
  border: 1px solid var(--c-border);
}
.feature-pill .feature-icon {
  width: 38px; height: 38px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; flex-shrink: 0;
  background: var(--c-secondary);
}
.feature-pill.parametrizable {
  background: rgba(255, 215, 0, .08);
  border-color: rgba(255, 215, 0, .35);
}
.feature-pill.parametrizable .feature-icon {
  background: var(--c-accent);
  color: var(--c-petroleo);
}

/* =========================================================
   Navbar
   ========================================================= */
.navbar-blur {
  background: rgba(255,255,255,.82);
  border-bottom: 1px solid rgba(15,23,42,.06);
}
.navbar-blur.scrolled {
  box-shadow: 0 8px 26px -18px rgba(15,23,42,.18);
  background: rgba(255,255,255,.95);
}
.nav-link {
  font-size: .9rem; font-weight: 500;
  color: var(--c-text-muted);
}
.nav-link:hover { color: var(--c-secondary); }
/* Acceso al modo tutoriales: pildora destacada en el menu */
.nav-tuto { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px 7px 10px; border-radius: 999px; font-size: .9rem; font-weight: 700;
  color: var(--c-secondary); background: rgba(var(--c-secondary-rgb), .09); border: 1px solid rgba(var(--c-secondary-rgb), .22);
  transition: transform .15s; }
.nav-tuto i { font-size: 1rem; }
.nav-tuto:hover { background: var(--c-secondary); color: #fff; transform: translateY(-1px); }
.nav-tuto.is-active { background: var(--c-secondary); color: #fff; }

/* =========================================================
   Prose (para CKEditor content)
   ========================================================= */
.prose-meca p { margin-bottom: 0.85rem; line-height: 1.75; color: var(--c-text-muted); }
.prose-meca h2, .prose-meca h3 { font-family: 'Plus Jakarta Sans'; color: var(--c-text); margin-top: 1.5rem; margin-bottom: .5rem; }
.prose-meca h2 { font-size: 1.5rem; font-weight: 700; }
.prose-meca h3 { font-size: 1.2rem; font-weight: 700; }
.prose-meca ul { list-style: disc; padding-left: 1.25rem; margin-bottom: 1rem; color: var(--c-text-muted); }
.prose-meca a { color: var(--c-secondary); text-decoration: underline; }
.prose-meca strong { color: var(--c-text); }

/* =========================================================
   WhatsApp flotante
   ========================================================= */
.whatsapp-float {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25d366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px -10px rgba(37, 211, 102, .55);
  transition: transform .2s ease;
}
.whatsapp-float:hover { transform: scale(1.08); }

/* =========================================================
   Estrellas (testimonios)
   ========================================================= */
.star { color: var(--c-accent); }

/* =========================================================
   Mensajes (toasts)
   ========================================================= */
.toast { padding: .75rem 1rem; border-radius: .75rem; font-size: .875rem; font-weight: 500; box-shadow: 0 14px 30px -16px rgba(15,23,42,.18); }
.toast-success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.toast-error   { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.toast-info    { background: #f8fafc; color: #334155; border: 1px solid #e2e8f0; }

/* =========================================================
   Animaciones suaves
   ========================================================= */
/* .dot-pulse: punto fijo (antes latia sin fin) */

/* Util */
.text-balance { text-wrap: balance; }

/* =========================================================
   Servicios - cards interactivas con animacion secuencial
   ========================================================= */
.servicios-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0,1fr));
  gap: 18px;
}
@media (min-width: 640px) { .servicios-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1024px){ .servicios-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }

.servicio-card {
  position: relative;
  text-align: left;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 22px;
  padding: 28px 26px;
  cursor: pointer;
  overflow: hidden;
  transition: transform .2s cubic-bezier(.2,.8,.2,1);
}
/* Entrada una sola vez al aparecer: corta y casi sin desplazamiento */
.js-revelar .servicios-grid:not(.servicios-visible) .servicio-card { opacity: 0; transform: translateY(8px); }
.js-revelar .servicios-grid.servicios-visible .servicio-card {
  animation: meca-card-in .3s ease backwards;  /* sin relleno final: al terminar no queda ninguna animacion viva */
  animation-delay: calc(var(--svc-delay, 0) * 30ms);
}
@keyframes meca-card-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}


.servicio-card::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--svc-color) 0%, transparent 70%);
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}
.servicio-card:hover {
  border-color: var(--svc-color);
  transform: translateY(-4px);
  box-shadow: 0 28px 50px -28px rgba(15,23,42,.22);
}
.servicio-card:hover::before { opacity: .06; }

.servicio-card-inner { position: relative; z-index: 1; }

.servicio-card-icon {
  width: 56px; height: 56px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.35rem;
  background: var(--svc-color);
  box-shadow: 0 16px 30px -14px var(--svc-color);
  margin-bottom: 18px;
  transition: transform .2s ease;
}
.servicio-card:hover .servicio-card-icon { transform: rotate(-6deg) scale(1.05); }

.servicio-card-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.2rem; font-weight: 800; color: var(--c-text);
}
.servicio-card-sub {
  font-size: .85rem; font-weight: 600; color: var(--svc-color); margin-top: 4px;
}

.servicio-card-detail {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity .2s ease;
  margin-top: 0;
}
.servicio-card-detail p {
  color: var(--c-text-muted); line-height: 1.6; font-size: .95rem; margin: 0;
}
.servicio-card-detail .servicio-card-tag {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 12px;
  font-size: .72rem; font-weight: 700; color: var(--c-accent); letter-spacing: .04em;
}
.servicio-card-detail .servicio-card-cta {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 16px;
  font-size: .85rem; font-weight: 700; color: var(--svc-color);
  border-top: 1px dashed var(--c-border-soft);
  padding-top: 12px;
}
.servicio-card.open {
  border-color: var(--svc-color);
  box-shadow: 0 24px 50px -24px var(--svc-color);
}
.servicio-card.open .servicio-card-detail {
  max-height: 280px; opacity: 1; margin-top: 16px;
}
.servicio-card.open::before { opacity: .08; }

/* =========================================================
   Proyectos - filas alternadas: texto | captura real
   ========================================================= */
.pj-stack { display: flex; flex-direction: column; gap: 112px; margin-top: 72px; }
.pj { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1024px) {
  .pj { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 72px; }
  .pj--flip .pj-body { order: 2; }
  .pj--flip .pj-media { order: 1; }
}
.pj-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pj-cat { display: inline-flex; align-items: center; gap: 7px; font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ps); }
.pj-live { display: inline-flex; align-items: center; gap: 7px; font-size: .76rem; font-weight: 700; color: #15803d;
  background: rgba(34,197,94,.09); border: 1px solid rgba(34,197,94,.25); padding: 4px 11px 4px 9px; border-radius: 999px; }
.pj-live .d { position: relative; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; }
/* .pj-live .d: punto fijo (antes un anillo que latia sin fin) */
.pj-title { font-family: var(--c-font-display); font-weight: 800; color: #0f172a; font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1.08; letter-spacing: -.02em; margin: 14px 0 0; }
/* Logo del producto junto al nombre (proyecto.logo, p. ej. el isotipo SVG del SIGC o del TPV) */
.pj-head { display: flex; align-items: flex-start; gap: 16px; margin-top: 14px; }
.pj-head .pj-title { margin-top: 0; }
.pj-logo { height: 76px; width: auto; flex-shrink: 0; margin-top: -4px; }
@media (max-width: 640px) { .pj-head { gap: 12px; } .pj-logo { height: 56px; } }
.pj-client { margin: 8px 0 0; font-size: .88rem; color: #64748b; display: flex; align-items: center; gap: 7px; }
.pj-desc { margin: 18px 0 0; font-size: 1.05rem; line-height: 1.7; color: #475569; max-width: 560px; }

.pj-feats { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px 22px; }
@media (min-width: 640px) { .pj-feats { grid-template-columns: 1fr 1fr; } }
.pj-feats li { display: flex; gap: 12px; align-items: center; }
.pj-feats li { --fc: var(--ps); }
.pj-feats li:nth-child(3n+2) { --fc: var(--pa); }
.pj-feats li:nth-child(3n+3) { --fc: var(--pt); }
.pj-feats__ic { width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  color: color-mix(in srgb, var(--fc) 80%, #0f172a); background: color-mix(in srgb, var(--fc) 15%, #fff); font-size: .92rem; }
.pj-feats b { display: block; font-size: .92rem; font-weight: 700; color: #0f172a; line-height: 1.3; }
.pj-feats small { display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; font-size: .74rem; font-weight: 600; color: #94a3b8; }

.pj-stats { display: flex; margin: 28px 0 0; padding: 16px 0; border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); max-width: 460px; }
.pj-stats div { --sc: var(--ps); flex: 1; padding: 0 18px; border-left: 1px solid var(--c-border); }
.pj-stats div:nth-child(2) { --sc: var(--pa); }
.pj-stats div:nth-child(3) { --sc: var(--pt); }
.pj-stats dt::after { content: ""; display: block; width: 26px; height: 4px; border-radius: 4px; margin-top: 8px; background: var(--sc); }
.pj-stats div:first-child { padding-left: 0; border-left: 0; }
.pj-stats dt { font-family: var(--c-font-display); font-size: 1.6rem; font-weight: 800; color: #0f172a; line-height: 1; }
.pj-stats dd { margin: 6px 0 0; font-size: .72rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .06em; }

.pj-stack-tech { margin: 18px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: .82rem; color: #64748b; }
.pj-stack-tech span { font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #94a3b8; }
.pj-stack-tech em { font-style: normal; font-weight: 600; color: #334155; }
.pj-stack-tech em + em::before { content: "·"; margin-right: 14px; color: #cbd5e1; }

.pj-cta { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.pj-link { display: inline-flex; align-items: center; gap: 7px; font-size: .88rem; font-weight: 700; color: #475569; }
.pj-link:hover { color: var(--c-secondary); }
.pj-link--tuto { padding: 10px 16px 10px 12px; border-radius: 12px; color: color-mix(in srgb, var(--pt) 78%, #0f172a);
  background: color-mix(in srgb, var(--pt) 14%, #fff); border: 1px solid color-mix(in srgb, var(--pt) 35%, #fff); transition: transform .15s; }
.pj-link--tuto:hover { color: #fff; background: var(--pt); border-color: var(--pt); transform: translateY(-2px); }

/* Media: captura en marco sobre fondo teñido con el color del proyecto */
.pj-media { position: relative; display: block; padding: 36px 34px 54px; isolation: isolate; }
.pj-media__bg { position: absolute; inset: 0 0 18px 0; z-index: -1; border-radius: 32px; overflow: hidden;
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--pa) 24%, #fff) 0%,
    color-mix(in srgb, var(--ps) 10%, #fff) 48%,
    color-mix(in srgb, var(--pt) 26%, #fff) 100%); }
.pj-media__bg::before { content: ""; position: absolute; inset: 0; opacity: .75; z-index: 1;
  background-image: radial-gradient(color-mix(in srgb, var(--pc) 24%, transparent) 1.4px, transparent 1.5px); background-size: 22px 22px;
  -webkit-mask: radial-gradient(ellipse at 70% 30%, #000, transparent 75%); mask: radial-gradient(ellipse at 70% 30%, #000, transparent 75%); }
.pj-blob { position: absolute; border-radius: 50%; }
.pj-blob--a { width: 62%; aspect-ratio: 1; right: -16%; top: -32%; background: radial-gradient(circle, color-mix(in srgb, var(--pa) 55%, transparent), transparent 66%); }
.pj-blob--b { width: 58%; aspect-ratio: 1; left: -18%; bottom: -34%; background: radial-gradient(circle, color-mix(in srgb, var(--pt) 50%, transparent), transparent 66%); }
/* Formas giradas detras de la captura (mismo lenguaje que el detalle del SIGE) */
.pj-deco { position: absolute; z-index: -1; border-radius: 34px; pointer-events: none; }
.pj-deco--a { width: 150px; height: 150px; right: -26px; bottom: 4px; transform: rotate(16deg); background: color-mix(in srgb, var(--pt) 30%, transparent); }
.pj-deco--b { width: 92px; height: 92px; left: -22px; top: -18px; transform: rotate(-14deg); border-radius: 26px; background: color-mix(in srgb, var(--pa) 32%, transparent); }
.pj--flip .pj-deco--a { right: auto; left: -26px; transform: rotate(-16deg); }
.pj--flip .pj-deco--b { left: auto; right: -22px; transform: rotate(14deg); }
@media (max-width: 640px) { .pj-deco { display: none; } }
.pj-shot { position: relative; display: block; background: #fff; border-radius: 14px; overflow: hidden;
  box-shadow: 0 1px 0 rgba(15,23,42,.04), 0 34px 60px -30px color-mix(in srgb, var(--pc) 60%, rgba(15,23,42,.6)); transition: transform .2s ease; }
.pj-shot img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; }
.pj-shot__bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #f1f5f9; border-bottom: 1px solid #e2e8f0; }
.pj-shot__bar i { width: 9px; height: 9px; border-radius: 50%; background: #cbd5e1; }
.pj-shot__bar i:nth-child(1) { background: #f87171; } .pj-shot__bar i:nth-child(2) { background: #fbbf24; } .pj-shot__bar i:nth-child(3) { background: #34d399; }
.pj-shot__bar em { margin-left: 10px; font-style: normal; font-size: .66rem; color: #94a3b8; background: #fff; border: 1px solid #e2e8f0; border-radius: 6px; padding: 1px 10px; }
.pj-shot--sm { position: absolute; width: 42%; right: -6px; bottom: 0; border: 4px solid #fff; border-radius: 14px; z-index: 2; }
.pj-shot--sm img { aspect-ratio: 4 / 3; }
.pj--flip .pj-shot--sm { right: auto; left: -6px; }
.pj-media:hover .pj-shot { transform: translateY(-6px); }
.pj-media:hover .pj-shot--sm { transform: translateY(-12px) rotate(-1deg); }
/* Persona ilustrada del producto (static/img/personas/, filtro persona_proyecto): esquina inferior, delante de la captura */
.pj-persona { position: absolute; z-index: 2; width: 56%; height: auto; right: -46px; bottom: -12px; pointer-events: none; transition: transform .2s ease; }
.pj--flip .pj-persona { right: auto; left: -46px; }
.pj-media:hover .pj-persona { transform: translateY(-10px); }

.pj-chip { position: absolute; z-index: 3; left: 4px; bottom: 34px; display: flex; align-items: center; gap: 10px; max-width: 270px;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 9px 14px 9px 9px; box-shadow: 0 20px 40px -18px rgba(15,23,42,.35);
}
.pj--flip .pj-chip { left: auto; right: 4px; }
.pj-chip__ic { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, var(--ps), var(--pt)); flex-shrink: 0; }
.pj-chip small { display: block; font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ps); }
.pj-chip b { display: block; font-size: .82rem; color: #0f172a; line-height: 1.25; }
.pj-star { position: absolute; z-index: 3; top: 14px; right: 18px; display: inline-flex; align-items: center; gap: 6px; font-size: .7rem; font-weight: 800;
  color: #92400e; background: #fff; border: 1px solid #fde68a; padding: 5px 11px; border-radius: 999px; box-shadow: 0 10px 22px -14px rgba(146,64,14,.5); }
.pj-star i { color: #f59e0b; }
.pj--flip .pj-star { right: auto; left: 18px; }
/* Producto estrella: el primero del listado (hoy, el SIGE) */
.pj-star--top { color: #1a1a1a; background: linear-gradient(135deg, #FFD700, #F7B500); border-color: #F2C200; padding: 6px 13px; font-size: .74rem;
  box-shadow: 0 12px 26px -12px rgba(247,181,0,.75); }
.pj-star--top i { color: #1a1a1a; }
.pj--estrella .pj-title { font-size: clamp(2.1rem, 3.8vw, 2.95rem); }

@media (max-width: 640px) {
  .pj-media { padding: 22px 16px 46px; }
  .pj-shot--sm { width: 46%; }
  .pj-persona, .pj--flip .pj-persona { width: 58%; left: auto; right: -14px; bottom: -6px; }
  .pj-chip { left: 8px !important; right: auto !important; bottom: 18px; max-width: 220px; }
}


/* =========================================================
   "Proximamente" (Proyecto.es_proximo): la etiqueta y los enlaces al servicio de capacitacion y certificacion
   (hero, tarjeta de servicios, menu, pie y "Quienes somos"). Sobrios y quietos: nada se mueve en reposo.
   ========================================================= */
.etq-prox { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: #F7931E; color: #231400;
  font-size: .68rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; line-height: 1.45; white-space: nowrap; flex-shrink: 0; }
.etq-prox--mini { padding: 1px 7px; font-size: .58rem; letter-spacing: .06em; vertical-align: 2px; }
/* Hero: una linea con el servicio que viene, bajo los botones */
.hero-prox { margin-top: 22px; display: inline-flex; align-items: center; gap: 10px; max-width: 34rem; padding: 9px 14px 9px 10px; border-radius: 14px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); color: #fff; font-size: .9rem; line-height: 1.4; text-decoration: none; }
.hero-prox:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.3); }
.hero-prox__t { color: rgba(255,255,255,.82); min-width: 0; }
.hero-prox__t b { color: #fff; font-weight: 700; }
.hero-prox > i { font-size: .75rem; color: rgba(255,255,255,.75); flex-shrink: 0; }
@media (max-width: 480px) { .hero-prox { align-items: flex-start; flex-wrap: wrap; } .hero-prox > i { display: none; } }
/* Tarjeta de servicio que lleva a su pagina (Servicio.pagina): etiqueta arriba a la derecha y "Ver que incluye" a la vista */
.servicio-card--pagina { display: block; color: inherit; text-decoration: none; }
.servicio-card-prox { position: absolute; top: 0; right: 0; }
.servicio-card-ir { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-size: .85rem; font-weight: 700; color: var(--svc-color); }
/* Menu: "Capacitacion" solo donde cabe sin amontonar (desde 1280 px); entre 1024 y 1279 queda en el pie y en el inicio */
.nav-link--ancho { display: none; }
@media (min-width: 1280px) { .nav-link--ancho { display: inline; } }
.nav-movil-cap { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; }
/* "Quienes somos": una linea que dice que tambien capacitamos y certificamos */
.tm-cap { margin: 10px 0 0; font-size: .98rem; color: #64748b; max-width: 560px; line-height: 1.6; }
.tm-cap a { color: var(--c-secondary); font-weight: 700; }
.tm-cap a:hover { text-decoration: underline; }

/* Placeholder si el proyecto no tiene capturas */
.pj-skel { position: relative; display: grid; grid-template-columns: 22% 1fr; grid-template-rows: auto 1fr; gap: 10px; aspect-ratio: 16 / 10; padding: 12px; background: #f8fafc; }
.pj-skel .s1 { grid-row: 1 / 3; border-radius: 8px; background: color-mix(in srgb, var(--pc) 85%, #fff); }
.pj-skel .s2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pj-skel .s2 i { height: 46px; border-radius: 8px; background: #fff; border: 1px solid #e2e8f0; }
.pj-skel .s3 { border-radius: 8px; background: #fff; border: 1px solid #e2e8f0; }
.pj-skel b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 2.6rem; color: color-mix(in srgb, var(--ps) 60%, #fff); }

/* =========================================================
   Equipo - carrusel horizontal tipo "conoce el producto"
   ========================================================= */
.tm { padding: 96px 0 88px; background: #fff; overflow: hidden; }
.tm-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.tm-title { font-family: var(--c-font-display); font-weight: 800; color: #0f172a; letter-spacing: -.025em; line-height: 1.05;
  font-size: clamp(2.2rem, 5vw, 3.6rem); margin: 14px 0 0; }
.tm-lead { margin: 14px 0 0; font-size: 1.1rem; color: #64748b; max-width: 560px; }
.tm-nav { display: flex; gap: 10px; flex-shrink: 0; }
.tm-arrow { width: 44px; height: 44px; border-radius: 50%; border: 0; background: #eef1f6; color: #0f172a; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: opacity .2s, transform .2s; }
.tm-arrow:hover:not(:disabled) { background: #e2e7ef; transform: scale(1.06); }
.tm-arrow:disabled { opacity: .35; cursor: default; }
@media (max-width: 640px) { .tm-nav { display: none; } }

/* La pista arranca alineada al contenedor y se "sale" por la derecha */
.tm-track { --gut: max(20px, calc((100vw - 1280px) / 2 + 32px));
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--gut);
  padding: 44px var(--gut) 30px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.tm-track::-webkit-scrollbar { display: none; }
@media (max-width: 767px) { .tm-track { --gut: 20px; } }

.tm-card { position: relative; flex: 0 0 clamp(270px, 78vw, 330px); height: 470px; scroll-snap-align: start; border-radius: 28px; overflow: hidden;
  display: flex; flex-direction: column; padding: 30px 28px; transition: transform .2s cubic-bezier(.2,.8,.2,1); }
.tm-card:hover { transform: scale(1.015); box-shadow: 0 24px 50px -28px rgba(15,23,42,.35); }
.tm-card__eye { display: inline-flex; align-items: center; gap: 7px; font-size: .82rem; font-weight: 600; color: #475569; }
.tm-card__name { font-family: var(--c-font-display); font-size: 1.65rem; font-weight: 800; line-height: 1.12; letter-spacing: -.015em; color: #0f172a; margin: 10px 0 0; }
.tm-card__bio { margin: 12px 0 0; font-size: .95rem; line-height: 1.55; color: #475569; }
.tm-card__art { position: relative; flex: 1; display: flex; align-items: flex-end; justify-content: center; }

.tm-avatar { position: relative; z-index: 1; width: 150px; height: 150px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center;
  font-family: var(--c-font-display); font-weight: 800; font-size: 3.2rem; color: #fff; letter-spacing: -.02em;
  background: linear-gradient(140deg, var(--c1), var(--c2)); box-shadow: 0 30px 50px -22px color-mix(in srgb, var(--c2) 70%, transparent), inset 0 -6px 0 rgba(0,0,0,.08);
  transition: transform .2s cubic-bezier(.2,.8,.2,1); }
.tm-avatar img { width: 100%; height: 100%; object-fit: cover; }
.tm-card:hover .tm-avatar { transform: translateY(-8px) rotate(-3deg); }
.tm-blob { position: absolute; width: 240px; height: 240px; bottom: -70px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--c1) 40%, transparent), transparent 68%); }

.tm-card--light { background: #f5f6f8; }
.tm-card--tint { background: linear-gradient(165deg, color-mix(in srgb, var(--c1) 14%, #fff), color-mix(in srgb, var(--c2) 22%, #fff)); }

/* CEO: tarjeta ancha y oscura */
.tm-card--ceo { flex-basis: clamp(290px, 86vw, 560px); color: #fff; background: radial-gradient(120% 90% at 85% 100%, color-mix(in srgb, var(--c1) 55%, #0b1220), #0b1220 62%); }
.tm-card--ceo .tm-card__eye { color: color-mix(in srgb, var(--c1) 60%, #fff); }
.tm-card--ceo .tm-card__name { color: #fff; font-size: 2.1rem; }
.tm-card--ceo .tm-card__bio { color: rgba(255,255,255,.72); max-width: 420px; }
.tm-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.tm-pills span { font-size: .78rem; font-weight: 700; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); }
.tm-avatar--xl { width: 170px; height: 170px; font-size: 3.6rem; }
.tm-ring { position: absolute; bottom: -40px; width: 260px; height: 260px; border-radius: 50%; border: 1px solid rgba(255,255,255,.12); }
.tm-ring--2 { width: 360px; height: 360px; bottom: -90px; border-color: rgba(255,255,255,.07); }
@media (min-width: 768px) {
  .tm-card--ceo { flex-direction: row; gap: 10px; }
  .tm-card--ceo .tm-card__txt { flex: 1.2; }
  .tm-card--ceo .tm-card__art { flex: 1; align-items: flex-end; }
}

/* Cierre: unete al equipo */
.tm-card--join { background: linear-gradient(160deg, color-mix(in srgb, var(--c-accent) 26%, #fff), color-mix(in srgb, var(--c-secondary) 14%, #fff)); justify-content: space-between; }
.tm-join-btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px; background: #0f172a; color: #fff; font-weight: 700; font-size: .9rem;
  transition: transform .2s; }
.tm-join-btn:hover { transform: translateY(-2px); }

/* =========================================================
   Clientes - grilla bento
   ========================================================= */
.cl { padding: 96px 0; background: #f5f6f8; }
.cl-head { margin-bottom: 44px; }
.cl-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .cl-grid { grid-template-columns: repeat(6, 1fr); } }
@media (min-width: 1024px) { .cl-grid { grid-template-columns: repeat(12, 1fr); } }
.cl-card { position: relative; overflow: hidden; border-radius: 28px; background: #fff; padding: 32px 30px; display: flex; flex-direction: column;
  transition: transform .2s cubic-bezier(.2,.8,.2,1); }
.cl-card:hover { transform: scale(1.012); box-shadow: 0 24px 50px -30px rgba(15,23,42,.3); }
.cl-card--big { min-height: 440px; }
.cl-card--sm { min-height: 280px; padding-bottom: 76px; }
@media (min-width: 768px) { .cl-card--big { grid-column: span 3; } .cl-card--sm { grid-column: span 3; } .cl-md-6 { grid-column: span 6; } .cl-md-3 { grid-column: span 3; } }
@media (min-width: 1024px) { .cl-card--big { grid-column: span 6; } .cl-card--sm { grid-column: span 4; } .cl-lg-12 { grid-column: span 12; } .cl-lg-8 { grid-column: span 8; } .cl-lg-4 { grid-column: span 4; } }
.cl-card__eye { display: block; font-size: .85rem; font-weight: 600; color: #64748b; }
.cl-card__name { font-family: var(--c-font-display); font-weight: 800; color: #0f172a; letter-spacing: -.02em; line-height: 1.1; font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin: 8px 0 0; }
.cl-card--sm .cl-card__name { font-size: 1.45rem; }
.cl-card__msg { margin: 12px 0 0; font-size: .98rem; line-height: 1.55; color: #475569; max-width: 520px; }

/* Tonos de fondo de las tarjetas grandes (celeste / verde / calido) */
.cl-card--big.cl-tone-a { background: linear-gradient(170deg, #fff 30%, color-mix(in srgb, #38bdf8 20%, #fff)); }
.cl-card--big.cl-tone-b { background: linear-gradient(170deg, #fff 30%, color-mix(in srgb, #22c55e 18%, #fff)); }
.cl-card--big.cl-tone-c { background: linear-gradient(170deg, #fff 30%, color-mix(in srgb, #f59e0b 18%, #fff)); }
.cl-card__art { flex: 1; display: flex; align-items: center; justify-content: center; padding: 26px 0 10px; }
.cl-logo { width: 190px; height: 190px; border-radius: 44px; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(15,23,42,.45), 0 0 0 1px rgba(15,23,42,.04); transition: transform .2s cubic-bezier(.2,.8,.2,1); }
.cl-logo img { width: 78%; height: 78%; object-fit: contain; }
.cl-logo b { font-family: var(--c-font-display); font-size: 4.5rem; font-weight: 800; color: var(--c-secondary); }
.cl-card:hover .cl-logo { transform: translateY(-8px) scale(1.03); }
.cl-ic { order: -1; width: 54px; height: 54px; margin-bottom: 22px; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: #0f172a; border-radius: 14px; overflow: hidden; }
.cl-ic img { width: 100%; height: 100%; object-fit: contain; }
.cl-ic .ds-icon { --ds-sw: 1.3; }

.cl-plus { position: absolute; right: 22px; bottom: 22px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: #1d1d1f; color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1rem; transition: transform .2s; }
.cl-plus:hover { transform: scale(1.08) rotate(90deg); background: var(--c-secondary); }
.cl-plus:focus-visible { outline: 3px solid var(--c-secondary); outline-offset: 3px; }

.cl-card--cta { background: #0f172a; min-height: 280px; justify-content: space-between; }
.cl-card--cta .cl-card__eye { color: color-mix(in srgb, var(--c-secondary) 55%, #fff); }
.cl-card--cta .cl-card__name { color: #fff; }
.cl-card--cta .cl-card__msg { color: rgba(255,255,255,.7); }
.cl-cta-btn { align-self: flex-start; margin-top: 22px; display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 999px;
  background: var(--c-secondary); color: #fff; font-weight: 700; font-size: .92rem; transition: transform .2s; }
.cl-cta-btn:hover { transform: translateY(-2px); }

/* Detalle del cliente */
.cl-modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 20px; }
.cl-modal.open { display: flex; }
.cl-modal__bd { position: absolute; inset: 0; background: rgba(15,23,42,.62); }
.cl-modal__box { position: relative; width: min(560px, 100%); background: #fff; border-radius: 28px; padding: 40px 36px 36px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.5);
  animation: clIn .25s cubic-bezier(.2,.8,.2,1); }
@keyframes clIn { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
.cl-modal__x { position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: #eef1f6; color: #0f172a; cursor: pointer; }
.cl-logo--sm { width: 84px; height: 84px; border-radius: 22px; margin-bottom: 20px; box-shadow: 0 16px 30px -18px rgba(15,23,42,.45), 0 0 0 1px rgba(15,23,42,.05); }
.cl-logo--sm b { font-size: 2.2rem; }
.cl-modal__msg { margin: 14px 0 0; font-size: 1.05rem; line-height: 1.65; color: #334155; }
.cl-modal__persona { margin: 16px 0 0; font-size: .88rem; font-weight: 600; color: #64748b; }
@media (prefers-reduced-motion: reduce) { .tm-card, .cl-card, .tm-avatar, .cl-logo { transition: none; } }

/* =========================================================
   Entradas al aparecer (reemplaza a AOS): un fade de 300 ms, una sola vez, con IntersectionObserver (base.html).
   Sin JS, o con "reducir movimiento", todo se ve desde el principio.
   ========================================================= */
.js-revelar [data-aos]:not(.aos-hecho) { transition: opacity .3s ease, transform .3s ease; }
.js-revelar [data-aos]:not(.aos-animate) { opacity: 0; transform: translateY(8px); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---- Capacitación y certificación continua (inicio): servicio propio, sección sobria y quieta ---- */
.cap-home { padding: 4.5rem 0; background: #fff; border-top: 1px solid #e8eef5; border-bottom: 1px solid #e8eef5; }
.cap-home__grid { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .cap-home__grid { grid-template-columns: 1.1fr .9fr; gap: 3rem; } }
.cap-home__eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0; font-size: .78rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--c-secondary, #2b76f7); }
.cap-home__titulo { margin: .9rem 0 0; font-family: var(--c-font-display, 'Plus Jakarta Sans', sans-serif); font-weight: 800;
  font-size: clamp(1.9rem, 3.6vw, 2.8rem); line-height: 1.1; letter-spacing: -.02em; color: #0f172a; }
.cap-home__lema { margin: .7rem 0 0; font-size: 1.15rem; font-weight: 600; color: #334155; }
.cap-home__texto-p { margin: .8rem 0 0; max-width: 38rem; color: #475569; line-height: 1.6; }
.cap-home__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; margin-top: 1.6rem; }
.cap-home__avisar { font-weight: 700; color: #0f172a; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; text-decoration-color: #F7931E; }
.cap-home__avisar:hover { color: #A04C00; }
.cap-home__ilus { width: 100%; max-width: 440px; height: auto; justify-self: center; }
.cap-home__items { list-style: none; margin: 2.6rem 0 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .cap-home__items { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.cap-home__item { display: grid; justify-items: center; gap: .5rem; padding: .9rem .7rem 1rem; border: 1px solid #e8eef5; border-radius: 16px;
  background: #f8fbfe; text-align: center; font-size: .86rem; font-weight: 700; color: #1e293b; line-height: 1.3; }
.cap-home__item img { width: 100%; max-width: 120px; height: auto; }

/* ---- Inicio: la barra aparece al bajar (html.nav-auto, solo la portada) y el logo cuelga del borde de arriba ---- */
.nav-auto nav.navbar-blur { transform: translateY(-105%); visibility: hidden; transition: transform .2s ease, visibility 0s linear .2s; }
.nav-auto.nav-visible nav.navbar-blur { transform: none; visibility: visible; transition: transform .2s ease, visibility 0s; }
.nav-auto .hero-cut { top: 0; }
/* ---- Carrusel del hero: la persona de cada producto delante de su pantalla (sin animaciones propias) ---- */
.hero-slide__persona { position: absolute; z-index: 2; right: -9%; bottom: -2%; width: 34%; height: auto; pointer-events: none; }
@media (max-width: 767px) { .hero-slide__persona { right: -4%; bottom: -4%; width: 32%; } }
/* Captura real dentro del marco del navegador (sin pantallas armadas a mano) */
.hero-shot { display: block; width: 100%; height: auto; background: #fff; }
.hero-shot--cap { position: relative; display: grid; place-items: center; gap: .4rem; padding: 1.4rem 1.2rem 1.6rem; aspect-ratio: 16 / 10;
  background: #EEF7FC; color: #0f172a; text-align: center; }
.hero-shot--cap img { width: min(62%, 300px); height: auto; }
.hero-shot--cap b { font-family: var(--c-font-display, 'Plus Jakarta Sans', sans-serif); font-weight: 800; font-size: 1.05rem; }
.hero-shot--cap .etq-prox { position: absolute; top: 14px; right: 14px; }
/* Inicio sin barra arriba: el texto empieza justo debajo del logo, sin espacio vacío */
.nav-auto .hero-meca__in { padding-top: 136px; padding-bottom: 92px; }
.nav-auto .hero-copy { padding-top: 8px; }
@media (min-width: 768px) { .nav-auto .hero-meca__in { padding-top: 150px; padding-bottom: 120px; } }