/* =========================================================
   IMS – Ingeniería, Mantenciones y Soluciones
   Hoja de estilos principal
   ========================================================= */

[hidden] { display: none !important; }

:root {
  --ink: #15181C;
  --ink-2: #22262B;
  --paper: #F3F2EE;
  --sand: #E9E7E1;
  --white: #FFFFFF;
  --line: #D6D3CB;
  --line-strong: #B9B5AB;
  --muted: #4F555C;
  --text-2: #3F454C;
  --on-dark: #C9CDD2;
  --dark-line: #3A3F45;
  --accent: #B8470A;
  --accent-dark: #8A3305;
  --accent-light: #F08A3C;
  --error-bg: #FBE9E0;
  --error-text: #8A2A05;

  --font-display: 'Barlow Condensed', 'Roboto Condensed', 'Arial Narrow', 'Helvetica Neue', sans-serif;
  --font-body: 'IBM Plex Sans', 'Helvetica Neue', Helvetica, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--accent); }
a:hover { color: var(--accent-dark); }
:focus-visible { outline: 3px solid var(--accent-light); outline-offset: 2px; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--accent); color: #fff; padding: 10px 16px; font-weight: 600;
}
.skip-link:focus { top: 12px; color: #fff; }

.wrap { max-width: 1240px; margin: 0 auto; padding-inline: 24px; }
.section { padding-block: 96px; }
.section-sm { padding-block: 64px; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.stack-lg { display: flex; flex-direction: column; gap: 40px; }

.bg-dark { background: var(--ink); color: #fff; }
.bg-sand { background: var(--sand); border-block: 1px solid var(--line); }

/* ---------- Tipografía ---------- */
.eyebrow {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 2px;
  color: var(--accent); margin: 0;
}
.bg-dark .eyebrow { color: var(--accent-light); }

.h1, .h2, .h3 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  margin: 0; line-height: 1;
}
.h1 { font-size: clamp(44px, 6vw, 76px); line-height: .98; }
.h2 { font-size: clamp(34px, 4.5vw, 54px); }
.h3 { font-size: clamp(26px, 3vw, 38px); }

.lead { margin: 0; font-size: 18px; line-height: 1.6; color: var(--text-2); max-width: 680px; }
.bg-dark .lead { color: var(--on-dark); }
.muted { color: var(--muted); }

.section-head {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px;
}
.section-head .stack { max-width: 680px; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 28px;
  font: inherit; font-weight: 600; font-size: 16px; text-decoration: none;
  border: 1.5px solid transparent; cursor: pointer; transition: background-color .15s, color .15s;
}
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: #fff; }
.btn-outline-light { background: transparent; color: #fff; border-color: #6B7178; }
.btn-outline-light:hover { border-color: #fff; color: #fff; }
.btn-sm { min-height: 44px; padding: 0 20px; font-size: 15px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .6; cursor: wait; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.text-link { font-weight: 600; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--ink); color: #fff; border-bottom: 3px solid var(--accent);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 76px;
}
.brand { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; }
.brand:hover { color: #fff; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: 27px; letter-spacing: 1px; }
.brand-logo { flex: none; }
.brand-sub { font-size: 12px; color: var(--on-dark); letter-spacing: .4px; line-height: 1.25; max-width: 150px; }

.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.main-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  color: var(--on-dark); text-decoration: none; font-weight: 500; font-size: 15px;
}
.main-nav a:hover { color: #fff; }
.main-nav a[aria-current="page"] { color: #fff; font-weight: 600; box-shadow: inset 0 -3px 0 var(--accent-light); }

.header-actions { display: flex; align-items: center; gap: 10px; }
.nav-toggle {
  display: none; width: 48px; height: 48px; align-items: center; justify-content: center;
  background: transparent; border: 1.5px solid var(--dark-line); color: #fff; cursor: pointer;
}

@media (max-width: 980px) {
  .nav-toggle { display: inline-flex; }
  .header-cta { display: none; }
  .main-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--ink); border-bottom: 3px solid var(--accent);
    display: none;
  }
  .main-nav.is-open { display: block; }
  .main-nav ul { flex-direction: column; padding: 8px 24px 20px; }
  .main-nav a { width: 100%; min-height: 52px; border-bottom: 1px solid var(--dark-line); padding: 0; font-size: 17px; }
  .main-nav a[aria-current="page"] { box-shadow: none; color: var(--accent-light); }
  .main-nav .nav-cta-mobile { margin-top: 14px; }
  .main-nav .nav-cta-mobile a { justify-content: center; background: var(--accent); color: #fff; border: 0; }
}
@media (min-width: 981px) { .nav-cta-mobile { display: none; } }

/* ---------- Hero ---------- */
.hero-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 56px; align-items: center; padding-block: 88px 96px;
}
.hero-copy { display: flex; flex-direction: column; gap: 28px; }

.page-hero { padding-block: 72px 80px; }
.page-hero .stack { gap: 18px; }
.breadcrumb { font-family: var(--font-mono); font-size: 13px; color: #9AA0A6; margin: 0; }
.breadcrumb a { color: var(--on-dark); }

/* ---------- Fotos con respaldo ---------- */
/* Si la imagen existe, la cubre; si no, se ve el patrón con el nombre del archivo a subir. */
.media {
  position: relative; overflow: hidden; min-height: var(--h, 240px);
  /* Mientras no haya foto: fondo grafito con el símbolo de IMS */
  background-color: var(--ink-2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 63 30'%3E%3Cpolygon points='0,0 63,0 63,22 55,30 0,30' fill='%23F08A3C' fill-opacity='.18'/%3E%3Cg transform='translate(7,5)' fill='%23F08A3C' fill-opacity='.45'%3E%3Crect width='5' height='20'/%3E%3Cpolygon points='9,20 9,0 15,0 19,7 23,0 29,0 29,20 24,20 24,9 19,16 14,9 14,20'/%3E%3Cpolygon points='33,0 49,0 49,5 38,5 38,7.5 49,7.5 49,20 33,20 33,15 44,15 44,12.5 33,12.5'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 84px;
}
.media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media-label { display: none; }

/* ---------- Grillas ---------- */
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(var(--min, 260px), 1fr)); }
.grid-fill { grid-template-columns: repeat(auto-fill, minmax(var(--min, 290px), 1fr)); }
.grid-2 { display: grid; gap: 56px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: center; }

.card { background: var(--white); border: 1px solid var(--line); padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.card h3 { margin: 0; font-size: 18px; font-weight: 600; }
.card p { margin: 0; color: var(--muted); }

/* Áreas de servicio (inicio) */
.areas { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.area {
  background: var(--white); padding: 26px; display: flex; flex-direction: column; gap: 12px;
  color: var(--ink); text-decoration: none; transition: background-color .15s;
}
.area:hover { background: #FBFAF7; color: var(--ink); }
.area svg { color: var(--ink); }
.area:hover svg { color: var(--accent); }
.area-title { font-size: 18px; font-weight: 600; line-height: 1.3; }
.area-desc { color: var(--muted); font-size: 15px; }

/* Franja oscura de llamada */
.band {
  background: var(--ink); color: #fff; padding: clamp(24px, 3.5vw, 44px);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px;
}
.band p { margin: 6px 0 0; color: var(--on-dark); }
.band-light {
  background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--accent);
  padding: clamp(24px, 4vw, 56px);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px;
}
.band-light p { margin: 8px 0 0; color: var(--text-2); font-size: 17px; max-width: 640px; }

/* Cifras */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); border-top: 2px solid var(--ink); }
.stat { padding: 20px 20px 0 0; display: flex; flex-direction: column; }
.stat-num { font-family: var(--font-display); font-weight: 700; font-size: 48px; line-height: 1.1; }
.stat-label { color: var(--muted); }

/* Proceso */
.steps { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); border-top: 1px solid var(--dark-line); }
.steps li { padding: 24px 24px 0 0; display: flex; flex-direction: column; gap: 8px; }
.step-num { font-family: var(--font-mono); color: var(--accent-light); }
.step-title { font-weight: 600; font-size: 18px; }
.steps .step-text { color: var(--on-dark); }

/* Catálogo de servicios */
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-btn, .chip span {
  min-height: 44px; padding: 0 18px; display: inline-flex; align-items: center;
  font: inherit; font-size: 14px; font-weight: 500;
  background: var(--white); color: var(--ink); border: 1.5px solid var(--line-strong); cursor: pointer;
}
.filter-btn[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }

.service { background: var(--white); border: 1px solid var(--line); display: flex; flex-direction: column; }
.service[hidden] { display: none; }
.service .media { border: 0; border-bottom: 1px solid var(--line); }
.service-code {
  position: absolute; top: 0; left: 0; z-index: 1; background: var(--ink); color: #fff;
  font-family: var(--font-mono); font-size: 12px; padding: 6px 10px;
}
.service-body { padding: 22px; display: flex; flex-direction: column; gap: 12px; flex-grow: 1; }
.service-cat { font-family: var(--font-mono); font-size: 12px; color: var(--accent); letter-spacing: 1px; text-transform: uppercase; }
.service h2 { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.3; }
.service p { margin: 0; color: var(--muted); font-size: 15px; }
.service ul { margin: 0; padding: 12px 0 0; list-style: none; border-top: 1px solid #E4E1D9; display: flex; flex-direction: column; gap: 6px; font-size: 14px; flex-grow: 1; }
.service li { display: flex; gap: 8px; }
.service li::before { content: "—"; color: var(--accent); font-family: var(--font-mono); }
.service .btn { min-height: 46px; border-color: var(--accent); color: var(--accent); background: transparent; font-size: 15px; }
.service .btn:hover { background: var(--accent); color: #fff; }
.service-custom { background: var(--ink); color: #fff; border-color: var(--ink); padding: 28px; justify-content: space-between; gap: 20px; min-height: 420px; }
.service-custom p { color: var(--on-dark); }

/* Proyectos */
.case { background: var(--white); border: 1px solid var(--line); display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.case .media { border: 0; }
.case-body { padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: 18px; }
.case-tags { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.tag-dark { font-family: var(--font-mono); font-size: 12px; background: var(--ink); color: #fff; padding: 4px 8px; }
.tag-cat { font-family: var(--font-mono); font-size: 12px; color: var(--accent); letter-spacing: 1px; text-transform: uppercase; }
.case h2 { margin: 0; font-size: clamp(22px, 2.4vw, 28px); font-weight: 600; line-height: 1.25; }
.case-text p { margin: 0 0 10px; font-size: 15px; }
.case-text strong { font-weight: 600; }
.case-text .result strong { color: var(--accent); }
.case dl { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); padding-top: 14px; font-size: 14px; }
.case dt { color: var(--muted); }
.case dd { margin: 2px 0 0; font-weight: 600; }

.quote-card { margin: 0; border: 1px solid var(--dark-line); padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.quote-card blockquote { margin: 0; font-family: var(--font-display); font-size: 28px; line-height: 1.2; font-weight: 600; }
.quote-card figcaption { color: var(--on-dark); font-size: 15px; }

.logos { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; background: #C9C5BB; border: 1px solid #C9C5BB; }
.logos div { background: var(--paper); height: 100px; display: flex; align-items: center; justify-content: center; padding: 16px; font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.logos img { max-height: 60px; width: auto; }

.sectors { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1px; background: #C9C5BB; border: 1px solid #C9C5BB; }
.sectors div { background: var(--paper); padding: 22px; font-weight: 600; }

.mv-card { border: 1px solid var(--dark-line); padding: 36px; display: flex; flex-direction: column; gap: 14px; }
.mv-card p { margin: 0; font-size: 20px; line-height: 1.5; }

/* ---------- Formularios ---------- */
.form-layout { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.form-main { flex: 2 1 560px; min-width: 0; }
.form-aside { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }

.panel { background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--accent); padding: clamp(22px, 3vw, 40px); }
.form { display: flex; flex-direction: column; gap: 28px; }
.form fieldset { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.form legend { padding: 0; margin-bottom: 12px; font-weight: 600; font-size: 17px; }
.form legend .num { font-family: var(--font-mono); color: var(--accent); margin-right: 8px; }
.form legend small { font-weight: 400; color: var(--muted); font-size: 14px; }
.hint { margin: -6px 0 2px; font-size: 14px; color: var(--muted); }

.fields { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 500; }
.field input, .field select, .field textarea {
  min-height: 48px; padding: 0 12px; font: inherit; font-size: 16px; color: var(--ink);
  background: var(--white); border: 1px solid #A9A59B; border-radius: 0;
}
.field textarea { padding: 12px; line-height: 1.5; resize: vertical; min-height: 140px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.field [aria-invalid="true"] { border-color: var(--error-text); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input, .urg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip input:checked + span { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip input:focus-visible + span, .urg input:focus-visible + span { outline: 3px solid var(--accent-light); outline-offset: 2px; }

.urgs { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.urg { position: relative; }
.urg span { display: block; min-height: 64px; padding: 10px 14px; border: 1.5px solid var(--line-strong); background: var(--white); cursor: pointer; }
.urg strong { display: block; font-weight: 600; }
.urg small { display: block; font-size: 13px; margin-top: 2px; }
.urg input:checked + span { background: var(--accent); color: #fff; border-color: var(--accent); }

.alert { margin: 0; padding: 12px 14px; background: var(--error-bg); color: var(--error-text); border: 1px solid #E7B49B; font-size: 14px; }
.alert[hidden] { display: none; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid var(--line); padding-top: 20px; }
.form-foot small { color: var(--muted); }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.success { display: flex; flex-direction: column; gap: 18px; }
.success[hidden] { display: none; }
.summary { display: flex; flex-direction: column; border-top: 2px solid var(--ink); font-size: 15px; }
.summary div { padding: 12px 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; }
.summary dt { color: var(--muted); }
.summary dd { margin: 0; text-align: right; }

.aside-dark { background: var(--ink); color: #fff; padding: 26px; display: flex; flex-direction: column; gap: 10px; }
.aside-dark p { margin: 0; color: var(--on-dark); font-size: 15px; }
.aside-dark .big { font-family: var(--font-display); font-weight: 700; font-size: 30px; color: var(--accent-light); text-decoration: none; }
.aside-card { background: var(--white); border: 1px solid var(--line); padding: 26px; display: flex; flex-direction: column; gap: 12px; }
.aside-card h2 { margin: 0; font-size: 18px; font-weight: 600; }
.aside-card p { margin: 0; color: var(--muted); font-size: 15px; }
.aside-card ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; font-size: 15px; }
.aside-card li { display: flex; gap: 12px; }
.aside-card li span:first-child { font-family: var(--font-mono); color: var(--accent); }

/* Contacto */
.contact-card { background: var(--white); border: 1px solid var(--line); padding: 28px; display: flex; flex-direction: column; gap: 8px; color: var(--ink); text-decoration: none; }
.contact-card:hover { border-color: var(--accent); color: var(--ink); }
.contact-card .label { color: var(--muted); font-size: 14px; }
.contact-card .value { font-weight: 600; font-size: 19px; word-break: break-word; }
.contact-card.is-dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.contact-card.is-dark .label { color: var(--on-dark); }
.contact-card.is-dark .value { color: var(--accent-light); }

.map { position: relative; min-height: 340px; }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: var(--on-dark); border-top: 3px solid var(--accent); }
.footer-grid { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); padding-block: 56px 40px; }
.footer-col { display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.footer-col h2 { margin: 0 0 4px; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 1px; color: var(--accent-light); }
.footer-col a { color: #E6E8EB; text-decoration: none; }
.footer-col a:hover { color: #fff; text-decoration: underline; }
.footer-bottom { border-top: 1px solid var(--dark-line); padding-block: 20px 28px; font-size: 13px; color: #9AA0A6; }

/* WhatsApp flotante */
.wa-float {
  position: fixed; right: 18px; bottom: 18px; z-index: 40;
  width: 58px; height: 58px; border-radius: 50%;
  background: #1F8F4E; color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.wa-float:hover { background: #17733E; color: #fff; }

/* Ajustes de robustez */
.hero-copy { min-width: 0; }
.h1, .h2, .h3 { overflow-wrap: break-word; }
.filter-btn, .chip span { padding-block: 8px; line-height: 1.3; }
@media (max-width: 420px) { .brand-sub { font-size: 10px; } }

/* =========================================================
   MOVIMIENTO Y EFECTOS
   ========================================================= */
:root { --ease: cubic-bezier(.22,.7,.2,1); }

/* Transición suave entre páginas (Chrome, Edge, Safari) */
@view-transition { navigation: auto; }
.site-header { view-transition-name: encabezado; }
::view-transition-old(root) { animation: vt-salida .22s var(--ease) both; }
::view-transition-new(root) { animation: vt-entrada .38s var(--ease) both; }
@keyframes vt-salida { to { opacity: 0; transform: translateY(-10px); } }
@keyframes vt-entrada { from { opacity: 0; transform: translateY(14px); } }

/* Encabezado: se compacta al bajar y muestra el avance de lectura */
.header-inner { transition: min-height .3s var(--ease); }
.site-header.is-scrolled .header-inner { min-height: 64px; }
.site-header::after {
  content: ""; position: absolute; left: 0; bottom: -3px; height: 3px;
  width: 100%; transform-origin: left; transform: scaleX(var(--avance, 0));
  background: var(--accent-light);
}

/* Portada de cada página: fondo tipo plano técnico + línea de escaneo */
main > section.bg-dark:first-child { position: relative; overflow: hidden; isolation: isolate; }
main > section.bg-dark:first-child::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px;
  -webkit-mask-image: linear-gradient(105deg, rgba(0,0,0,.35) 20%, #000 75%);
          mask-image: linear-gradient(105deg, rgba(0,0,0,.35) 20%, #000 75%);
}
main > section.bg-dark:first-child::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: -1; pointer-events: none;
  background: rgba(240,138,60,.55); box-shadow: 0 0 18px 2px rgba(240,138,60,.25);
  animation: escaneo 7s linear infinite;
}
@keyframes escaneo { from { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } to { transform: translateY(var(--alto-hero, 600px)); opacity: 0; } }

/* Entrada del texto principal */
.hero-copy > *, .page-hero .stack > * { animation: subir .8s var(--ease) both; }
.hero-copy > :nth-child(2), .page-hero .stack > :nth-child(2) { animation-delay: .08s; }
.hero-copy > :nth-child(3), .page-hero .stack > :nth-child(3) { animation-delay: .16s; }
.hero-copy > :nth-child(4), .page-hero .stack > :nth-child(4) { animation-delay: .24s; }
@keyframes subir { from { opacity: 0; transform: translateY(22px); } }

/* Aparecer al bajar (main.js agrega .rv y .is-in) */
html .rv { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--rv-d, 0s); }
html .rv.is-in { opacity: 1; transform: none; }

/* Áreas de servicio: línea naranja que crece y el ícono sube */
.area { position: relative; transition: background-color .25s; }
.area::before {
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%;
  background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease);
}
.area:hover::before, .area:focus-visible::before { transform: scaleX(1); }
.area svg { transition: transform .35s var(--ease), color .2s; }
.area:hover svg { transform: translateY(-4px); }

/* Tarjetas */
.service, .card, .contact-card { transition: transform .35s var(--ease), border-color .25s, box-shadow .35s var(--ease); }
.service:hover, .card:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: 0 14px 30px -18px rgba(21,24,28,.35); }
.media img { transition: transform .8s var(--ease); }
.service:hover .media img, .case:hover .media img { transform: scale(1.05); }

/* Botones y enlaces */
.btn { transition: background-color .2s, color .2s, border-color .2s, transform .2s var(--ease); }
.btn:active { transform: translateY(1px); }
.text-link::after { content: " →"; display: inline-block; transition: transform .25s var(--ease); }
.text-link:hover::after { transform: translateX(4px); }
.wa-float { transition: transform .25s var(--ease); }
.wa-float:hover { transform: scale(1.08); }
.wa-float::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid #25D366;
  animation: pulso 2.4s ease-out infinite; pointer-events: none;
}
@keyframes pulso { from { transform: scale(1); opacity: .7; } to { transform: scale(1.6); opacity: 0; } }

.hero-visual { min-width: 0; }

/* ---------- Animación de la portada: línea de llenado ---------- */
.linea { width: 100%; height: auto; display: block; overflow: visible; }
.linea text { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.5px; fill: #9AA0A6; }
.linea .naranjo { fill: #F08A3C; }
.l-cinta { stroke-dasharray: 10 8; animation: cinta .6s linear infinite; }
@keyframes cinta { to { stroke-dashoffset: -18; } }
.l-rodillo { transform-box: fill-box; transform-origin: center; animation: girar 1.2s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.l-botella { animation: avanzar 9s linear infinite; }
.l-botella, .l-liquido, .l-tapa { animation-delay: var(--d, 0s) !important; }
@keyframes avanzar { from { transform: translateX(-70px); } to { transform: translateX(630px); } }
.l-liquido { transform-box: fill-box; transform-origin: bottom; animation: llenar 9s linear infinite; }
@keyframes llenar { 0%, 36% { transform: scaleY(0); } 44%, 100% { transform: scaleY(1); } }
.l-tapa { animation: tapar 9s linear infinite; }
@keyframes tapar { 0%, 60% { opacity: 0; transform: translateY(-14px); } 64%, 100% { opacity: 1; transform: none; } }
.l-boquilla { animation: boquilla 1.8s var(--ease) infinite; }
@keyframes boquilla { 0%, 6% { transform: translateY(16px); } 16%, 72% { transform: translateY(0); } 82%, 100% { transform: translateY(16px); } }
.l-chorro { animation: chorro 1.8s linear infinite; }
@keyframes chorro { 0%, 8% { opacity: 1; } 12%, 80% { opacity: 0; } 84%, 100% { opacity: 1; } }
.l-cabezal { animation: cabezal 1.8s var(--ease) infinite; }
@keyframes cabezal { 0%, 100% { transform: translateY(0); } 6%, 16% { transform: translateY(14px); } 30% { transform: translateY(0); } }
.l-engranaje { transform-box: fill-box; transform-origin: center; animation: girar 2s linear infinite; }
.l-led { animation: led 1.4s steps(1) infinite; }
.l-led.b { animation-delay: .35s; } .l-led.c { animation-delay: .7s; } .l-led.d { animation-delay: 1.05s; }
@keyframes led { 0%, 100% { fill: #F08A3C; } 50% { fill: #3A3F45; } }
.l-datos { stroke-dasharray: 4 6; animation: datos 1s linear infinite; }
@keyframes datos { to { stroke-dashoffset: -20; } }
.l-sensor { animation: sensor 1.8s linear infinite; }
@keyframes sensor { 0%, 100% { opacity: .25; } 50% { opacity: .9; } }
.l-estado { animation: led 1.6s steps(1) infinite; }

/* Respeta "reducir movimiento" del sistema */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-play-state: paused !important; transition: none !important; }
  .hero-copy > *, .page-hero .stack > * { animation: none !important; }
  main > section.bg-dark:first-child::after { display: none; }
  .rv { opacity: 1; transform: none; }
  @view-transition { navigation: none; }
}

/* =========================================================
   ANIMACIONES CON SENTIDO
   ========================================================= */

/* Íconos que se dibujan como un plano (inicio, nosotros, contacto) */
svg.dibujo :is(path, polyline, polygon, circle, rect, line) { stroke-dasharray: 1; stroke-dashoffset: 1; }
svg.dibujo.trazado :is(path, polyline, polygon, circle, rect, line) { animation: trazo 1.1s var(--ease) forwards; animation-delay: var(--rv-d, 0s); }
@keyframes trazo { to { stroke-dashoffset: 0; } }

/* Inicio: el proyecto avanza por las etapas al bajar */
.proceso { position: relative; border-top: 0; }
.proceso::before, .proceso::after { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: var(--dark-line); }
.proceso::after { background: var(--accent-light); transform-origin: left; transform: scaleX(var(--p, 0)); box-shadow: 0 0 12px rgba(240,138,60,.5); }
.proceso li { position: relative; padding-top: 32px; opacity: .45; transition: opacity .5s var(--ease); }
.proceso li::before {
  content: ""; position: absolute; left: 0; top: -6px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--ink); border: 2px solid var(--dark-line); transition: background-color .4s, border-color .4s;
}
.proceso li.on { opacity: 1; }
.proceso li.on::before { background: var(--accent-light); border-color: var(--accent-light); animation: nodo 2s ease-out infinite; }
@keyframes nodo { 0% { box-shadow: 0 0 0 0 rgba(240,138,60,.55); } 100% { box-shadow: 0 0 0 12px rgba(240,138,60,0); } }
@media (max-width: 700px) {
  .proceso { padding-left: 30px; }
  .proceso::before, .proceso::after { width: 2px; height: 100%; left: 6px; }
  .proceso::after { transform-origin: top; transform: scaleY(var(--p, 0)); }
  .proceso li { padding-top: 0; padding-bottom: 28px; }
  .proceso li::before { left: -30px; top: 2px; }
}

/* Servicios: íconos de mantención que muestran lo que hace cada una */
.st-ic { margin-bottom: 6px; overflow: visible; }
.ic-check .trazo-loop { stroke-dasharray: 1; animation: trazo-loop 3s var(--ease) infinite; }
@keyframes trazo-loop { 0% { stroke-dashoffset: 1; } 35%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } }
.ic-llave { transform-origin: 30% 70%; animation: apretar 2.4s var(--ease) infinite; }
@keyframes apretar { 0%, 60%, 100% { transform: rotate(0); } 20% { transform: rotate(-22deg); } 40% { transform: rotate(6deg); } }
.ic-alerta { animation: alerta 1.2s steps(1) infinite; }
@keyframes alerta { 50% { stroke: #6B7178; } }
.ic-giro { animation: girar 3.5s linear infinite; }

/* Servicios: panel de accesos a categorías */
.page-hero-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 48px; align-items: center; }
.hmi { border: 1px solid var(--dark-line); background: rgba(21,24,28,.85); padding: 18px; font-family: var(--font-mono); animation: subir .8s .2s var(--ease) both; }
.hmi-top { display: flex; justify-content: space-between; font-size: 12px; letter-spacing: 1.5px; color: #9AA0A6; padding-bottom: 12px; border-bottom: 1px solid var(--dark-line); margin-bottom: 6px; }
.hmi-ok { color: var(--accent-light); display: inline-flex; align-items: center; gap: 8px; }
.hmi-ok i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-light); animation: led 1.6s steps(1) infinite; }
.hmi-fila {
  width: 100%; min-height: 48px; display: grid; grid-template-columns: 28px 1fr 70px 48px; align-items: center; gap: 12px;
  background: transparent; border: 0; border-bottom: 1px solid #2B3036; color: var(--on-dark); font: inherit; font-size: 13px; text-align: left; cursor: pointer; padding: 0 6px;
  transition: background-color .25s, color .25s;
}
.hmi-cod { color: #6B7178; }
.hmi-barra { height: 4px; background: #2B3036; overflow: hidden; }
.hmi-barra span { display: block; height: 100%; width: 100%; background: var(--accent-light); transform: scaleX(0); transform-origin: left; }
.hmi-ver { color: var(--accent-light); opacity: 0; transform: translateX(-6px); transition: opacity .25s, transform .25s var(--ease); font-size: 12px; }
.hmi-fila.activa, .hmi-fila:hover, .hmi-fila:focus-visible { background: #22262B; color: #fff; }
.hmi-fila.activa .hmi-barra span { animation: cargar 2.2s linear forwards; }
.hmi-fila:hover .hmi-barra span, .hmi-fila:focus-visible .hmi-barra span { transform: scaleX(1); animation: none; }
.hmi-fila.activa .hmi-ver, .hmi-fila:hover .hmi-ver, .hmi-fila:focus-visible .hmi-ver { opacity: 1; transform: none; }
@keyframes cargar { to { transform: scaleX(1); } }
.hmi-pie { margin: 12px 0 0; font-size: 12px; color: #6B7178; }
@media (max-width: 420px) { .hmi-fila { grid-template-columns: 24px 1fr 48px; } .hmi-barra { display: none; } }

/* Servicios: las tarjetas se reacomodan al filtrar */
.service.refiltro { animation: refiltro .5s var(--ease) both; animation-delay: var(--rf-d, 0s); }
@keyframes refiltro { from { opacity: 0; transform: translateY(16px) scale(.98); } }

/* Nosotros: trayectoria desde 2018 hasta hoy */
.trayectoria { margin-top: 10px; padding-bottom: 8px; }
.tr-linea { position: relative; height: 2px; background: var(--line); }
.tr-relleno { position: absolute; inset: 0; background: var(--accent); transform-origin: left; transform: scaleX(0); transition: transform 2.2s var(--ease); }
.trayectoria.on .tr-relleno { transform: scaleX(1); }
.tr-hitos { display: flex; justify-content: space-between; margin-top: -7px; }
.tr-hito { display: flex; flex-direction: column; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--muted); width: 0; white-space: nowrap; }
.tr-hito:first-child { align-items: flex-start; } .tr-hito:last-child { align-items: flex-end; }
.tr-hito i { width: 12px; height: 12px; border-radius: 50%; background: var(--paper); border: 2px solid var(--line-strong); transition: background-color .3s, border-color .3s; transition-delay: var(--tr-d, 0s); }
.trayectoria.on .tr-hito i { background: var(--accent); border-color: var(--accent); }
.tr-hito b { font-weight: 600; color: var(--ink); }
@media (max-width: 520px) { .tr-hito:not(:first-child):not(:last-child) span { display: none; } }

/* Cotizar: avance de la solicitud */
.avance { position: sticky; top: 70px; z-index: 5; background: var(--white); padding: 10px 0 12px; margin-top: -10px; border-bottom: 1px solid var(--line); }
.av-linea { height: 6px; background: #EDEBE6; overflow: hidden; }
.av-linea span { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(var(--av, 0)); transition: transform .5s var(--ease); }
.av-texto { margin: 8px 0 0; font-family: var(--font-mono); font-size: 13px; color: var(--muted); }
.avance.listo .av-texto { color: var(--accent); font-weight: 600; }
.form legend .num { display: inline-block; transition: background-color .3s, color .3s; }
fieldset.hecho legend .num { background: var(--accent); color: #fff; padding: 0 6px; animation: pop .4s var(--ease); }
fieldset.hecho legend::after { content: " ✓"; color: var(--accent); }
@keyframes pop { 50% { transform: scale(1.25); } }

/* Contacto y emergencias: el ícono avisa */
.contact-card.is-dark svg, .aside-dark > svg { animation: alerta 1.2s steps(1) infinite; }
.contact-card[data-ims-href="tel"]:hover svg { animation: timbre .6s ease-in-out 2; }
@keyframes timbre { 0%, 100% { transform: rotate(0); } 20%, 60% { transform: rotate(-14deg); } 40%, 80% { transform: rotate(14deg); } }
.contact-card[data-ims-href="mail"]:hover svg { animation: sobre .5s var(--ease); }
@keyframes sobre { 50% { transform: translateY(-5px); } }

@media (prefers-reduced-motion: reduce) {
  svg.dibujo :is(path, polyline, polygon, circle, rect, line) { stroke-dasharray: none; stroke-dashoffset: 0; }
  .ic-check .trazo-loop { stroke-dasharray: none; }
  .proceso li { opacity: 1; }
  .proceso::after { transform: none; }
  .tr-relleno { transform: none; }
  .tr-hito i { background: var(--accent); border-color: var(--accent); }
}
.filters { scroll-margin-top: 100px; }

/* =========================================================
   EXPERIENCIA INMERSIVA (inicio)
   ========================================================= */

/* Portada: la línea se inclina siguiendo el mouse */
.hero-visual { perspective: 1100px; }
.hero-visual .linea { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease); will-change: transform; }

/* Historia al bajar: la máquina se construye en 4 etapas */
.hs {
  position: relative; background: var(--ink); color: #fff;
  background-image:
    linear-gradient(rgba(143,179,209,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143,179,209,.06) 1px, transparent 1px);
  background-size: 32px 32px;
  border-top: 1px solid var(--dark-line);
}
.hs-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; padding-block: 72px; }
.hs-texto { display: flex; flex-direction: column; gap: 18px; }
.hs-pasos { display: flex; flex-direction: column; gap: 28px; }
.hs-paso h3 { margin: 6px 0 8px; font-family: var(--font-display); font-weight: 700; font-size: clamp(34px, 4.4vw, 56px); line-height: 1; text-transform: uppercase; }
.hs-paso p { margin: 0; color: var(--on-dark); font-size: 17px; max-width: 46ch; }
.hs-num { font-family: var(--font-mono); color: var(--accent-light); letter-spacing: 2px; }
.hs-svg { width: 100%; height: auto; display: block; overflow: visible; }
.hs-svg text { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.5px; fill: #9AA0A6; }
.hs-svg .naranjo { fill: #F08A3C; }
.hs-barra { display: none; }

/* Con JavaScript activo: pantalla fija y etapas */
.hs.hs-activo { height: 420vh; }
.hs-activo .hs-fijo { position: sticky; top: 64px; height: calc(100vh - 64px); display: flex; align-items: center; overflow: hidden; }
.hs-activo .hs-grid { padding-block: 24px; width: 100%; }
.hs-activo .hs-pasos { position: relative; min-height: 210px; }
.hs-activo .hs-paso { position: absolute; inset: 0 0 auto 0; opacity: 0; transform: translateY(30px); transition: opacity .5s var(--ease), transform .6s var(--ease); pointer-events: none; }
.hs-activo .hs-paso.on { opacity: 1; transform: none; }
.hs-activo .hs-paso.antes { transform: translateY(-30px); }
.hs-activo .hs-barra { display: block; }
.hs-barra > span { display: block; height: 3px; background: var(--dark-line); position: relative; }
.hs-barra > span::after { content: ""; position: absolute; inset: 0; background: var(--accent-light); transform-origin: left; transform: scaleX(var(--hp, 0)); }
.hs-barra ol { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #6B7178; }
.hs-barra li { transition: color .3s; }
.hs.e1 .hs-barra li:nth-child(1), .hs.e2 .hs-barra li:nth-child(2), .hs.e3 .hs-barra li:nth-child(3), .hs.e4 .hs-barra li:nth-child(4) { color: var(--accent-light); }

/* Capas de la escena */
.hs-activo .hs-plano :is(path, circle) { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s var(--ease); }
.hs-activo.e1 .hs-plano :is(path, circle) { stroke-dashoffset: 0; }
.hs-plano { transition: opacity .6s; }
.hs-activo.e2 .hs-plano { opacity: .3; }
.hs-activo .hs-fab .pz { opacity: 0; transform: translateY(-40px); transition: opacity .5s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i) * .1s); }
.hs-activo.e2 .hs-fab .pz { opacity: 1; transform: none; }
.hs-chispas circle { opacity: 0; }
.hs-activo.e2:not(.e3) .hs-chispas circle { animation: chispa .5s steps(2) infinite; }
.hs-chispas circle:nth-child(2n) { animation-delay: .25s !important; }
@keyframes chispa { 0% { opacity: 1; r: 4; } 100% { opacity: 0; r: 1; } }
.hs-activo .hs-auto { opacity: 0; transition: opacity .5s; }
.hs-activo.e3 .hs-auto { opacity: 1; }
.hs-activo .hs-cable { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s var(--ease); }
.hs-activo.e3 .hs-cable { stroke-dashoffset: 0; }
.hs-activo .hs-marcha, .hs-activo .hs-marcha-tag { opacity: 0; transition: opacity .6s; }
.hs-activo.e4 .hs-marcha, .hs-activo.e4 .hs-marcha-tag { opacity: 1; }

@media (max-width: 860px) {
  .hs-grid { grid-template-columns: 1fr; gap: 20px; }
  .hs-escena { order: -1; }
  .hs-activo .hs-svg { max-height: 42vh; margin: 0 auto; width: auto; max-width: 100%; }
  .hs-activo .hs-pasos { min-height: 190px; }
  .hs-paso p { font-size: 15px; }
  .hs-activo .hs-texto .h2 { display: none; }
}

/* Cinta de industrias */
.industrias { overflow: hidden; background: var(--accent); color: #fff; border-block: 1px solid var(--accent-dark); }
.ind-pista { display: flex; align-items: center; width: max-content; animation: cinta-ind 38s linear infinite; }
.industrias:hover .ind-pista { animation-play-state: paused; }
.ind-pista span { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: clamp(30px, 5vw, 56px); line-height: 1; padding: 22px 0; white-space: nowrap; }
.ind-pista span:nth-child(4n+3) { color: transparent; -webkit-text-stroke: 1.5px #fff; }
.ind-pista i { width: 18px; height: 18px; margin: 0 28px; flex: none; background: var(--ink); clip-path: polygon(0 0, 100% 0, 100% 65%, 65% 100%, 0 100%); }
@keyframes cinta-ind { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .hero-visual .linea { transform: none !important; }
}
.hs .eyebrow { color: var(--accent-light); }
@media (max-width: 480px) { .hs-barra ol { font-size: 9.5px; letter-spacing: 0; gap: 6px; } }

/* =========================================================
   SERVICIOS: ESQUEMAS TÉCNICOS ANIMADOS
   ========================================================= */
.media:has(.esquema) {
  background-color: #1B1E22;
  background-image:
    linear-gradient(rgba(143,179,209,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143,179,209,.08) 1px, transparent 1px);
  background-size: 16px 16px; background-position: center;
}
.esquema { position: absolute; inset: 0; width: 100%; height: 100%; padding: 14px 10px 8px; transition: opacity .4s var(--ease); }
.esquema text { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; fill: #9AA0A6; }
.esquema .naranjo { fill: #F08A3C; }
.service .media { --h: 190px !important; }
.media img { z-index: 0; }
.service-code { z-index: 3; }

/* Con foto: el esquema aparece al pasar el mouse, como "vista de plano" */
.media.tiene-foto .esquema { opacity: 0; z-index: 2; background: rgba(21,24,28,.88); }
.service:hover .media.tiene-foto .esquema, .service:focus-within .media.tiene-foto .esquema { opacity: 1; }
.media.tiene-foto::after {
  content: "VER ESQUEMA"; position: absolute; right: 0; bottom: 0; z-index: 3; background: var(--ink); color: var(--accent-light);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px; padding: 5px 9px; transition: opacity .3s;
}
.service:hover .media.tiene-foto::after { opacity: 0; }

/* Piezas reutilizables */
.esquema .e-baja { animation: e-baja 2s var(--ease) infinite; }
@keyframes e-baja { 0%, 100% { transform: translateY(0); } 30%, 70% { transform: translateY(12px); } }
.esquema .e-chorro { animation: e-chorro 2s linear infinite; }
@keyframes e-chorro { 0%, 30%, 72%, 100% { opacity: 0; } 36%, 66% { opacity: 1; } }
.esquema .e-nivel { transform-box: fill-box; transform-origin: bottom; animation: e-nivel 4s var(--ease) infinite; }
@keyframes e-nivel { 0%, 10% { transform: scaleY(0); } 70%, 92% { transform: scaleY(1); } 100% { transform: scaleY(0); opacity: 0; } }
.esquema .e-rosca { animation: e-rosca 2.6s var(--ease) infinite; }
@keyframes e-rosca { 0%, 100% { transform: translateY(0); } 40%, 70% { transform: translateY(26px); } }
.esquema .e-giro-tapa { animation: e-giro 0.4s linear infinite; }
@keyframes e-giro { to { stroke-dashoffset: -6; } }
.esquema .e-flecha { animation: e-giro 0.6s linear infinite; }
.esquema .e-cinta { stroke-dasharray: 10 8; animation: cinta .6s linear infinite; }
.esquema .e-avanza { animation: e-avanza 4.8s linear infinite; animation-delay: var(--d, 0s); }
@keyframes e-avanza { from { transform: translateX(0); } to { transform: translateX(300px); } }
.esquema .e-llena { transform-box: fill-box; transform-origin: bottom; animation: e-llena 4.8s linear infinite; animation-delay: var(--d, 0s); }
@keyframes e-llena { 0%, 30% { transform: scaleY(0); } 40%, 100% { transform: scaleY(1); } }
.esquema .e-tapa { animation: e-tapa 4.8s linear infinite; animation-delay: var(--d, 0s); opacity: 0; }
@keyframes e-tapa { 0%, 62% { opacity: 0; } 66%, 100% { opacity: 1; } }
.esquema .e-led { fill: #3A3F45; animation: e-led 1.1s steps(1) infinite; animation-delay: var(--d, 0s); }
@keyframes e-led { 0%, 49% { fill: #F08A3C; } 50%, 100% { fill: #3A3F45; } }
.esquema .e-flujo { animation: datos .8s linear infinite; }
.esquema .e-traza { stroke-dasharray: 1; animation: e-traza 3s var(--ease) infinite; }
@keyframes e-traza { 0% { stroke-dashoffset: 1; } 60%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } }
.esquema .e-aguja { transform-box: view-box; transform-origin: 86px 96px; animation: e-aguja 2.4s ease-in-out infinite; }
@keyframes e-aguja { 0%, 100% { transform: rotate(-40deg); } 50% { transform: rotate(48deg); } 70% { transform: rotate(38deg); } }
.esquema .e-onda { animation: e-onda 1.4s linear infinite; }
@keyframes e-onda { to { transform: translateX(-60px); } }
.esquema .e-rodillo { transform-box: fill-box; transform-origin: center; animation: girar 1.2s linear infinite; }
.esquema .e-mesa { transform-box: view-box; transform-origin: 150px 85px; animation: girar 7s linear infinite; }
.esquema .e-check { stroke-dasharray: 1; stroke-dashoffset: 1; animation: e-check 4s var(--ease) infinite; animation-delay: var(--d, 0s); }
@keyframes e-check { 0% { stroke-dashoffset: 1; } 12%, 80% { stroke-dashoffset: 0; } 90%, 100% { stroke-dashoffset: 1; } }
.esquema .e-manecilla { transform-box: view-box; transform-origin: 232px 34px; animation: girar 4s linear infinite; }
.esquema .e-engranaje { transform-box: view-box; transform-origin: 151px 90px; animation: e-engranaje 3s var(--ease) infinite; }
@keyframes e-engranaje { 0%, 45% { transform: rotate(0); } 100% { transform: rotate(180deg); } }
.esquema .e-llave { transform-box: view-box; transform-origin: 151px 90px; animation: e-llave 3s var(--ease) infinite; }
@keyframes e-llave { 0% { transform: rotate(0); } 15% { transform: rotate(-30deg); } 30% { transform: rotate(0); } 40%, 100% { transform: rotate(0); opacity: 1; } }
.esquema .e-chispa circle { animation: chispa .4s steps(2) infinite; }
.esquema .e-chispa circle:nth-child(2n) { animation-delay: .2s; }
.esquema .e-cordon { stroke-dasharray: 1; animation: e-cordon 3.2s linear infinite; }
@keyframes e-cordon { 0% { stroke-dashoffset: 1; } 85%, 100% { stroke-dashoffset: 0; } }
.esquema .e-antorcha { animation: e-antorcha 3.2s linear infinite; }
@keyframes e-antorcha { 0% { transform: translateX(0); } 85% { transform: translateX(220px); opacity: 1; } 86%, 100% { transform: translateX(220px); opacity: 0; } }
.esquema .e-nodo { fill: #22262B; stroke: #6B7178; stroke-width: 2; animation: e-nodo 3.6s steps(1) infinite; animation-delay: var(--d, 0s); }
@keyframes e-nodo { 0%, 74% { fill: #F08A3C; stroke: #F08A3C; } 75%, 100% { fill: #22262B; stroke: #6B7178; } }
.esquema .e-paquete { animation: e-paquete 3.6s linear infinite; }
@keyframes e-paquete { from { transform: translateX(0); } to { transform: translateX(210px); } }