/* ============================================================
   Hero de "Servicios" — índice interactivo, adaptado del prototipo
   Lovable "cronostec-dynamics-main" (prototipo/), con nuestra
   paleta (azul/rojo, sin verde) y contenido real de los 7 servicios.
   Todo prefijado bajo .svc2 — sin reset global.
   ============================================================ */

.svc2{
  --svc2-navy: var(--brand-ink);
  --svc2-navy-deep: #0c1330;
  --svc2-elevated: #1c274d;
  --svc2-surface: #ffffff;
  --svc2-surface-muted: #b7c0dc;
  --svc2-surface-dim: #7c86a8;
  --svc2-accent: #5b9eff;
  --svc2-action: var(--danger);
  --svc2-action-hover: var(--danger-deep);
  --svc2-line: rgba(255,255,255,.12);
  position:relative; overflow:hidden; background: var(--svc2-navy); color: var(--svc2-surface);
  font-family: var(--font-sans);
}
.svc2 *, .svc2 *::before, .svc2 *::after{ box-sizing:border-box; }
.svc2 img{ max-width:100%; display:block; }
.svc2 a{ color:inherit; text-decoration:none; }

.svc2-grid-bg{
  position:absolute; inset:0; pointer-events:none; opacity:.35;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:72px 72px;
}
.svc2-top-line{
  position:absolute; inset-inline:0; top:0; height:1px; pointer-events:none;
  background:linear-gradient(to right, transparent, rgba(91,158,255,.5), transparent);
}

.svc2-wrap{ position:relative; max-width:110rem; margin:0 auto; padding:2rem 1.25rem 2.5rem; }
@media (min-width:640px){ .svc2-wrap{ padding-inline:2rem; } }
@media (min-width:1024px){ .svc2-wrap{ padding:2.5rem 3rem 3rem; } }

.svc2-tech-label{ font-family: var(--font-sans); font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.24em; color: var(--svc2-accent); }

/* ---------- Breadcrumb (dentro de .svc2-header-left) ---------- */
.svc2-breadcrumb{ display:flex; align-items:center; gap:.5rem; margin-bottom:1.25rem; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color: var(--svc2-surface-dim); }
.svc2-breadcrumb a{ color: var(--svc2-surface-dim); transition:color .2s; }
.svc2-breadcrumb a:hover{ color:#fff; }
.svc2-breadcrumb .current{ color: var(--svc2-accent); }

/* ---------- Header ---------- */
.svc2-header{ display:grid; gap:2rem; border-bottom:1px solid var(--svc2-line); padding-bottom:3rem; }
@media (min-width:1024px){
  .svc2-header{ max-width:74rem; margin-inline:auto; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:end; gap:4rem; }
}
.svc2-eyebrow{ display:flex; align-items:center; gap:.75rem; }
.svc2-eyebrow .svc2-tech-label{ color:#fff; }
.svc2-eyebrow-bar{ height:1px; width:2.5rem; background: var(--svc2-action); display:inline-block; }
.svc2-eyebrow-bar--sm{ width:1.5rem; }
.svc2-title{ margin-top:1.5rem; font-family: var(--font-display); font-size:1.9rem; font-weight:800; line-height:.95; letter-spacing:-0.01em; }
@media (min-width:640px){ .svc2-title{ font-size:2.6rem; } }
@media (min-width:1024px){ .svc2-title{ font-size:2.5rem; } }

.svc2-lead{ max-width:36rem; font-size:.85rem; line-height:1.45; color: var(--svc2-surface-muted); text-align:justify; }
@media (min-width:640px){ .svc2-lead{ font-size:.9rem; } }
.svc2-stats{ margin-top:1rem; display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; border-top:1px solid var(--svc2-line); padding-top:.85rem; }
.svc2-stat dt{ font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.2em; color: var(--svc2-surface-dim); }
.svc2-stat dd{ margin-top:.25rem; font-family: var(--font-display); font-size:1.2rem; font-weight:700; }

/* ---------- Body: index + panel ---------- */
.svc2-body{ margin-top:3rem; display:grid; gap:2.5rem; }
@media (min-width:1024px){
  .svc2-body{ max-width:74rem; margin-inline:auto; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); column-gap:4.5rem; row-gap:2.5rem; margin-top:4rem; }
}

.svc2-index{ display:none; }
@media (min-width:1024px){ .svc2-index{ display:block; } }
.svc2-index-head{ margin-bottom:1.25rem; display:flex; align-items:center; justify-content:space-between; }
.svc2-index-count{ font-size:.68rem; font-weight:700; letter-spacing:.2em; color: var(--svc2-surface-dim); }
.svc2-index-list{ list-style:none; border-top:1px solid var(--svc2-line); }
.svc2-index-item{
  position:relative; width:100%; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:1rem;
  border:none; border-bottom:1px solid var(--svc2-line); background:transparent; padding:1.25rem 0; text-align:left; cursor:pointer;
  font-family:inherit; color:inherit;
}
.svc2-index-item:focus-visible{ background: var(--svc2-elevated); outline:none; }
.svc2-index-bar{ position:absolute; left:0; top:0; height:100%; width:2px; background: var(--svc2-action); transform:scaleY(0); transform-origin:top; transition:transform .3s; }
.svc2-index-item.is-active .svc2-index-bar{ transform:scaleY(1); }
.svc2-index-id{ padding-left:1rem; font-size:.75rem; font-weight:700; color: var(--svc2-surface-dim); transition:color .3s; }
.svc2-index-item.is-active .svc2-index-id{ color: #FFFFFF; }
.svc2-index-name{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.92rem; font-weight:700; text-transform:uppercase; letter-spacing:-0.01em; color: var(--svc2-surface-muted); transition:all .3s; }
.svc2-index-item.is-active .svc2-index-name{ color: var(--svc2-surface); transform:translateX(4px); }
.svc2-index-item:hover .svc2-index-name{ color: var(--svc2-surface); }
.svc2-index-icon{ flex-shrink:0; font-size:.78rem; color: var(--svc2-surface-dim); transition:color .3s; }
.svc2-index-item.is-active .svc2-index-icon{ color: #FFFFFF; }

.svc2-btn{
  display:inline-flex; align-items:center; gap:.5rem; border-radius:8px; padding:.7rem 1.2rem;
  font-family: var(--font-sans); font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  text-decoration:none; border:none; cursor:pointer; transition:all .2s;
}
.svc2-btn--action{ background: var(--svc2-action); color:#fff; box-shadow:0 6px 20px -10px rgba(0,0,0,.6); }
.svc2-btn--action:hover{ background: var(--svc2-action-hover); }
.svc2-btn--action i{ transition:transform .2s; }
.svc2-btn--action:hover i{ transform:translateX(3px); }
.svc2-btn--sm{ padding:.7rem 1.1rem; font-size:.72rem; width:100%; justify-content:center; }
.svc2-btn--block{ width:100%; justify-content:center; min-height:3rem; }
.svc2-index > .svc2-btn{ margin-top:2rem; }

/* ---------- Visual panel (desktop) ---------- */
.svc2-panel-wrap{ display:none; }
@media (min-width:1024px){ .svc2-panel-wrap{ display:block; } }
.svc2-panel{ position:relative; overflow:hidden; border-radius:1rem; border:1px solid var(--svc2-line); background: var(--svc2-elevated); }
.svc2-panel-frame{ position:relative; aspect-ratio:16/10; overflow:hidden; }
.svc2-panel-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.05); transition:opacity .5s ease-out, transform .5s ease-out;
}
.svc2-panel-img.is-active{ opacity:1; transform:scale(1); }
.svc2-panel-veil{
  position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(to top, rgba(12,19,48,.92) 0%, rgba(12,19,48,.55) 45%, rgba(20,32,70,.15) 100%);
}
.svc2-panel-grid{
  position:absolute; inset:0; pointer-events:none; opacity:.2;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:72px 72px;
}
.svc2-panel-tag{ position:absolute; left:1.5rem; top:1.5rem; display:flex; align-items:center; gap:.75rem; z-index:1; }
.svc2-panel-dot{ width:6px; height:6px; border-radius:50%; background: var(--svc2-action); display:inline-block; }
.svc2-panel-content{ position:absolute; inset-inline:0; bottom:0; padding:1.5rem; z-index:1; animation: svc2-panel-up .35s cubic-bezier(.22,1,.36,1) both; }
@media (min-width:1280px){ .svc2-panel-content{ padding:2.25rem; } }
@keyframes svc2-panel-up{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.svc2-panel-id{ display:block; font-family: var(--font-display); font-size:2.1rem; font-weight:700; line-height:1; color: var(--svc2-accent); }
@media (min-width:1280px){ .svc2-panel-id{ font-size:2.6rem; } }
.svc2-panel-name{ margin-top:.75rem; font-family: var(--font-display); font-size:1.35rem; font-weight:800; text-transform:uppercase; line-height:1.1; letter-spacing:-0.01em; }
@media (min-width:1280px){ .svc2-panel-name{ font-size:1.6rem; } }
.svc2-panel-desc{ margin-top:.75rem; max-width:32rem; font-size:.78rem; line-height:1.6; color: var(--svc2-surface-muted); }
@media (min-width:1280px){ .svc2-panel-desc{ font-size:.85rem; } }
.svc2-panel-cta{
  margin-top:1.1rem; display:inline-flex; align-items:center; gap:.5rem; border-bottom:1px solid var(--svc2-action);
  padding-bottom:.25rem; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color: var(--svc2-surface); transition:color .2s;
}
.svc2-panel-cta i{ color: var(--svc2-action); transition:transform .2s; }
.svc2-panel-cta:hover{ color: var(--svc2-action); }
.svc2-panel-cta:hover i{ transform:translateX(3px); }

.svc2-progress{ margin-top:1rem; display:flex; align-items:center; gap:.5rem; }
.svc2-progress-seg{ height:3px; flex:1; background: var(--svc2-line); transition:background .3s; }
.svc2-progress-seg.is-active{ background: var(--svc2-action); }

/* ---------- Mobile / tablet stacked cards ---------- */
.svc2-stack{ display:grid; gap:1.5rem; }
@media (min-width:1024px){ .svc2-stack{ display:none; } }
.svc2-card{ overflow:hidden; border-radius:.75rem; border:1px solid var(--svc2-line); background: var(--svc2-elevated); }
.svc2-card-media{ position:relative; aspect-ratio:4/3; overflow:hidden; }
@media (min-width:640px){ .svc2-card-media{ aspect-ratio:16/9; } }
.svc2-card-media img{ width:100%; height:100%; object-fit:cover; }
.svc2-card-id{ position:absolute; left:1rem; top:1rem; font-family: var(--font-display); font-size:1.875rem; font-weight:700; color: var(--svc2-accent); z-index:1; }
.svc2-card-tag{ position:absolute; left:1rem; bottom:1rem; z-index:1; }
.svc2-card-body{ padding:1.25rem; }
.svc2-card-icon-row{ display:flex; align-items:center; gap:.75rem; color: var(--svc2-accent); font-size:.9rem; }
.svc2-card-body h3{ margin-top:.75rem; font-family: var(--font-display); font-size:1.25rem; font-weight:800; text-transform:uppercase; line-height:1.2; letter-spacing:-0.01em; }
.svc2-card-body p{ margin-top:.75rem; font-size:.875rem; line-height:1.65; color: var(--svc2-surface-muted); }
.svc2-card-body .svc2-btn{ margin-top:1.25rem; }
.svc2-stack > .svc2-btn--block{ min-height:3rem; }

/* ---------- Footer bar ---------- */
.svc2-footer{ position:relative; border-top:1px solid var(--svc2-line); }
.svc2-footer-inner{ max-width:110rem; margin:0 auto; padding:1.5rem 1.25rem; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; }
@media (min-width:640px){ .svc2-footer-inner{ padding-inline:2rem; } }
@media (min-width:1024px){ .svc2-footer-inner{ max-width:calc(74rem + 6rem); padding-inline:3rem; } }
.svc2-footer-count{ font-size:.68rem; font-weight:700; letter-spacing:.2em; color: var(--svc2-surface-dim); }

/* ---------- Reveal on scroll ---------- */
.svc2 .reveal-init{ opacity:0; transform:translateY(18px); }
.svc2 .reveal-in{ animation: svc2-reveal-up .6s cubic-bezier(.22,1,.36,1) both; }
@keyframes svc2-reveal-up{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }

@media (prefers-reduced-motion: reduce){
  .svc2 *, .svc2 *::before, .svc2 *::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ---------- Móvil: el hero muestra solo breadcrumb/eyebrow/título
   + el índice de servicios (oculta lead+stats, panel visual y tarjetas) ---------- */
@media (max-width:767px){
  .svc2-wrap{ padding:1.25rem 1.25rem 1.5rem; }
  .svc2-header{ grid-template-columns:1fr; gap:0; padding-bottom:1.25rem; }
  .svc2-header-right{ display:none; }
  .svc2-breadcrumb{ margin-bottom:.5rem; }
  .svc2-eyebrow{ padding-top:1rem; }
  .svc2-eyebrow .svc2-tech-label{ font-size:.58rem; letter-spacing:.16em; }
  .svc2-eyebrow-bar{ width:1.25rem; }
  .svc2-title{ margin-top:.35rem; font-size:1.15rem; line-height:1.1; }
  .svc2-body{ margin-top:1.25rem; }
  .svc2-index{ display:block; }
  .svc2-index-head{ margin-bottom:.5rem; }
  .svc2-index-item{ padding:.75rem 0; gap:.65rem; }
  .svc2-panel-wrap{ display:none; }
  .svc2-stack{ display:none; }
}