/* Sistronetech — ajustes web sobre los estilos del diseño */
html { scroll-behavior: smooth; scroll-padding-top: 128px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; }
[hidden] { display: none !important; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid #FF5A6E; outline-offset: 2px; }
button { touch-action: manipulation; }

.r-svg { max-width: 100%; height: auto; }
.r-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.skip-link { position: absolute; left: 16px; top: -64px; z-index: 100; padding: 12px 18px; background: #FFFFFF; color: #0A1628 !important; font: 600 14px 'IBM Plex Sans', sans-serif; }
.skip-link:focus { top: 16px; }
main:focus { outline: none; }

input:user-invalid, textarea:user-invalid { border-color: #C8102E !important; }

.c-nav { position: sticky; top: 0; z-index: 50; }
.c-nav a:hover { color: #FF5A6E; }
.c-footer a { color: #C9D4E3; }
.c-footer a:hover { color: #FFFFFF; }
.nav-toggle { display: none; }

.chip { background: #FFFFFF !important; color: #0A1628 !important; border: 1px solid #B8B2A6 !important; }
.chip[aria-pressed="true"] { background: #0A1628 !important; color: #FFFFFF !important; border-color: #0A1628 !important; }

/* Pantallas anchas: el contenido se mantiene en 1312px y los fondos ocupan todo el ancho */
.r-padx { padding-left: max(64px, calc((100% - 1312px) / 2)) !important; padding-right: max(64px, calc((100% - 1312px) / 2)) !important; }
.r-marx { margin-left: max(64px, calc((100% - 1312px) / 2)) !important; margin-right: max(64px, calc((100% - 1312px) / 2)) !important; }

/* Tablet */
@media (max-width: 1180px) {
  .r-padx { padding-left: 32px !important; padding-right: 32px !important; }
  .r-marx { margin-left: 32px !important; margin-right: 32px !important; }
  .r-stack { display: grid !important; grid-template-columns: minmax(0, 1fr); align-items: start !important; }
  .r-stack > * { max-width: 100% !important; flex-shrink: 0 !important; }
  .r-wfull { width: 100% !important; max-width: 100% !important; }
  .r-hauto { height: auto !important; padding-bottom: 64px !important; }
  .r-pt { padding-top: 64px !important; }
  .r-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .r-grid1 { grid-template-columns: minmax(0, 1fr) !important; gap: 16px !important; }
  .r-static { position: relative !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; width: auto !important; margin: 24px 0 0 !important; }
  .r-cover { width: 100% !important; height: 100% !important; }
  .r-svg { width: 100% !important; max-width: 640px; height: auto !important; }
  .r-imgauto { height: auto !important; }
  .r-img { width: 100% !important; height: auto !important; }
  .r-hide { display: none !important; }
  .r-flex { flex-wrap: wrap; }

  /* Navegación móvil: barra compacta y menú a pantalla completa */
  .c-nav { height: auto !important; min-height: 0 !important; padding: 0 !important; border-bottom: 1px solid #1C2D4A; }
  .c-nav .nav-top { display: none !important; }
  .c-nav nav { height: 60px !important; position: static; }
  .c-nav nav > a img { height: 26px !important; }
  html { scroll-padding-top: 76px; }
  html.menu-open { overflow: hidden; }
  .nav-toggle { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -10px; background: transparent; border: 0; color: #FFFFFF; cursor: pointer; }
  .c-nav .nav-links { display: none !important; position: fixed; top: 61px; left: 0; right: 0; bottom: 0; overflow-y: auto; overscroll-behavior: contain; flex-direction: column !important; align-items: stretch !important; gap: 0 !important; padding: 8px 32px 32px; background: #0A1628; }
  .c-nav .nav-links.open { display: flex !important; }
  .c-nav .nav-links a { height: 56px !important; padding: 0 !important; font-size: 18px !important; color: #C9D4E3 !important; border-bottom: 1px solid #1C2D4A; box-shadow: none !important; }
  .c-nav .nav-links a[aria-current="page"] { color: #FFFFFF !important; box-shadow: inset 3px 0 0 #C8102E !important; padding-left: 16px !important; }
  .c-nav .nav-links a:last-child { height: 56px !important; margin: 24px 0 0 !important; justify-content: center; border-bottom: 0; color: #FFFFFF !important; font-size: 16px !important; padding: 0 20px !important; }
}

/* Celular */
@media (max-width: 700px) {
  .r-padx { padding-left: 20px !important; padding-right: 20px !important; }
  .r-marx { margin-left: 20px !important; margin-right: 20px !important; }
  .r-pady { padding-top: 64px !important; padding-bottom: 64px !important; }
  .r-grid2, .r-grid3 { grid-template-columns: minmax(0, 1fr) !important; }
  .r-gridbar { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 84px !important; gap: 12px !important; }
  .r-grid2 > *, .r-grid3 > * { border-right: 0 !important; border-left: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
  .r-grid2 > [style*="background"], .r-grid3 > [style*="background"], .r-grid3 > a, .r-grid2 > article, .r-grid3 > article { padding-left: 24px !important; padding-right: 24px !important; }
  .c-nav .nav-links { padding: 8px 20px 32px; }
  table { font-size: 13px !important; }
  [style*="padding: 56px"], [style*="padding: 48px"], [style*="padding: 44px"] { padding: 28px 20px !important; }
  [style*="padding: 40px"], [style*="padding: 36px"] { padding: 28px 24px !important; }
}

/* ================= Animaciones ================= */
:root { --ease-out: cubic-bezier(.2, .7, .2, 1); --ease-wipe: cubic-bezier(.7, 0, .2, 1); }

/* Barra de progreso de lectura */
.progress { position: fixed; top: 0; left: 0; z-index: 60; width: 100%; height: 3px; background: #C8102E; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); pointer-events: none; }

/* Navegación: sombra al desplazarse */
.c-nav { transition: box-shadow .3s ease; }
.c-nav.scrolled { box-shadow: 0 10px 30px rgba(3, 8, 18, .45); }

/* Entrada de bloques */
.js [data-rv] { opacity: 0; transform: translateY(32px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out), translate .45s var(--ease-out), box-shadow .45s var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms), calc(var(--i, 0) * 90ms), 0s, 0s; }
.js [data-rv].in { opacity: 1; transform: none; }

/* Títulos: palabra por palabra desde una máscara */
[data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .14em 0 .06em; margin: -.14em 0 -.06em; }
.js [data-split] .w > span { display: inline-block; transform: translateY(115%); transition: transform 1s var(--ease-out); transition-delay: calc(var(--w, 0) * 55ms + 120ms); }
.js .in [data-split] .w > span, .js [data-split].in .w > span { transform: none; }

/* Imágenes: revelado con barrido */
.js img[data-wipe] { clip-path: inset(0 100% 0 0); transition: clip-path 1.25s var(--ease-wipe) .2s, scale 1.2s var(--ease-out); }
.js .in img[data-wipe], .js img[data-wipe].in { clip-path: inset(0 0 0 0); }

/* Barras del estudio de carga */
.js div[style^="height: 10px; background"] { transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.2s var(--ease-out) .3s; }
.js .in div[style^="height: 10px; background"] { transform: none; }

/* Parallax de la foto aérea */
[data-parallax] { transform: scale(1.14) translate3d(0, var(--py, 0px), 0); will-change: transform; }

/* Si el script no carga, el contenido aparece igual */
@keyframes rv-show { to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } }
html.js:not(.js-ready) [data-rv], html.js:not(.js-ready) [data-split] .w > span, html.js:not(.js-ready) img[data-wipe] { animation: rv-show 0s 2.5s forwards; }

/* Diagramas vivos */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes flow { to { stroke-dashoffset: -40; } }
@keyframes blink { 50% { opacity: .25; } }
@keyframes breathe { 50% { transform: scale(1.08); opacity: .35; } }

svg[aria-label^="Diagrama de cuatro"] path[d^="M320 320 L532 108"] { transform-box: view-box; transform-origin: 320px 320px; animation: spin 9s linear infinite; }
svg[aria-label^="Diagrama de cuatro"] circle[cx="468"][r="14"] { transform-box: view-box; transform-origin: 468px 164px; animation: pulse 2.2s ease-out infinite; }
svg[aria-label^="Diagrama de cuatro"] circle[cx="468"][r="6"] { animation: blink 2.2s ease-in-out infinite; }

svg[aria-label^="Diagrama: radar"] path[stroke="#3A4E70"] { stroke-dasharray: 4 6; animation: flow 1.6s linear infinite; }
svg[aria-label^="Diagrama: radar"] path[stroke-dasharray="4 8"] { animation: flow .9s linear infinite; }
svg[aria-label^="Diagrama: radar"] circle[r="112"] { transform-box: view-box; transform-origin: 380px 280px; animation: breathe 3s ease-in-out infinite; }

svg[aria-label^="Enlace principal"] path[d="M140 55 H600"] { stroke-dasharray: 14 6; animation: flow 1s linear infinite; }
svg[aria-label^="Enlace principal"] path[d^="M322 27"] { animation: blink 1.4s steps(2, jump-none) infinite; }

section > svg[aria-hidden="true"][width="600"] path[d^="M300 4"], section > svg[aria-hidden="true"][width="600"] circle[cx="596"] { transform-box: view-box; transform-origin: 300px 300px; animation: spin 14s linear infinite; }
section > svg[aria-hidden="true"][width="1100"], section > svg[aria-hidden="true"][width="900"] { animation: spin 160s linear infinite; }

/* Interacción */
a svg { transition: transform .3s var(--ease-out); }
a[style*="background: #C8102E"], a[style*="border: 1px solid #3A4E70"], button[type="submit"] { transition: background-color .25s ease, border-color .25s ease, transform .25s ease; }
@media (hover: hover) {
  main a[style*="background: #FFFFFF"]:hover, main article:hover { translate: 0 -6px; box-shadow: 0 24px 48px rgba(10, 22, 40, .14), inset 0 -3px 0 #C8102E; }
  a:hover svg:has(path[d^="M5 12h14"]), a:hover svg:has(path[d^="M7 17L17 7"]) { transform: translateX(4px); }
  a[style*="background: #C8102E"]:hover, button[type="submit"]:hover { background-color: #A50D26 !important; }
  a[style*="border: 1px solid #3A4E70"]:hover { border-color: #FFFFFF !important; }
  figure:hover img, article:hover img { scale: 1.04; }
  figure, article { overflow: hidden; }
}

/* Menú móvil */
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.c-nav .nav-links.open { animation: menu-in .25s var(--ease-out); }
.c-nav .nav-links.open a { animation: menu-in .4s var(--ease-out) both; }
.c-nav .nav-links.open a:nth-child(2) { animation-delay: .03s; } .c-nav .nav-links.open a:nth-child(3) { animation-delay: .06s; }
.c-nav .nav-links.open a:nth-child(4) { animation-delay: .09s; } .c-nav .nav-links.open a:nth-child(5) { animation-delay: .12s; }
.c-nav .nav-links.open a:nth-child(6) { animation-delay: .15s; } .c-nav .nav-links.open a:nth-child(7) { animation-delay: .18s; }
.c-nav .nav-links.open a:nth-child(8) { animation-delay: .21s; } .c-nav .nav-links.open a:nth-child(9) { animation-delay: .24s; }

/* Movimiento reducido: solo fundidos, sin desplazamientos, giros ni parallax */
@media (prefers-reduced-motion: reduce) {
  .js [data-rv] { transform: none !important; transition: opacity .8s ease !important; }
  .js [data-split] .w > span, .js img[data-wipe], .js div[style^="height: 10px; background"] { transform: none !important; clip-path: none !important; transition: none !important; }
  svg *, section > svg, .c-nav .nav-links.open, .c-nav .nav-links.open a { animation: none !important; }
  [data-parallax] { transform: none !important; }
  .progress { display: none; }
  main a[style*="background: #FFFFFF"]:hover, main article:hover { translate: none !important; }
  figure:hover img, article:hover img { scale: none !important; }
}