/* Camtechy · Interacciones V3. Respeta la identidad gráfica del brochure.
   Clases de animación se aplican por JS y los elementos siguen visibles sin JS. */
:root {
  --header-height: 82px;
  --ease-fluid: cubic-bezier(.2,.8,.2,1);
  --motion-brand: #3c7587;
}
html {scroll-padding-top:calc(var(--header-height) + 24px);}
[id] {scroll-margin-top:calc(var(--header-height) + 24px);}
.site-page {padding-top:var(--header-height);}
.site-page .site-header {
  position:fixed;
  top:0;left:0;right:0;
  height:var(--header-height);
  z-index:150;
  background:rgba(255,255,255,.93);
  border-bottom:1px solid rgba(190,209,216,.64);
  -webkit-backdrop-filter:saturate(1.2) blur(18px);
  backdrop-filter:saturate(1.2) blur(18px);
  box-shadow:0 2px 14px rgba(35,70,84,.035);
  transition:box-shadow .3s ease,background-color .3s ease,border-color .3s ease;
}
.site-page .site-header.is-scrolled {
  background:rgba(255,255,255,.98);
  border-color:rgba(151,185,196,.48);
  box-shadow:0 10px 30px rgba(29,61,77,.11);
}
.site-page .hero-section {padding-top:0;}
.site-page .site-nav a {position:relative;transition:color .25s ease;}
.site-page .site-nav a::after {
  content:"";position:absolute;bottom:-9px;left:0;right:100%;height:2px;
  background:var(--motion-brand);border-radius:10px;
  transition:right .35s var(--ease-fluid);
}
.site-page .site-nav a:hover::after,.site-page .site-nav a.is-active::after {right:0;}
.site-page .site-nav a.is-active {color:#2c5b6c;}
.site-page .reading-progress {
  position:absolute;bottom:-1px;left:0;height:2px;width:100%;
  background:linear-gradient(90deg,#75a4b2,#3c7587,#2c5b6c);
  transform:scaleX(0);transform-origin:left center;
  pointer-events:none;z-index:1;
}
/* Entrada ligera y progresiva: cualquier nodo ocultable lo activa JS con IntersectionObserver. */
.motion-ready [data-motion-reveal] {
  opacity:0;transform:translate3d(0,24px,0);
  transition:opacity .75s var(--ease-fluid),transform .8s var(--ease-fluid);
  transition-delay:var(--reveal-delay,0ms);
}
.motion-ready [data-motion-reveal].in-view {opacity:1;transform:translate3d(0,0,0);}
/* La zona hero aparece secuencialmente, sin retrasar contenido esencial. */
.motion-ready .hero-copy .eyebrow{animation:hero-in .6s .04s both var(--ease-fluid);}
.motion-ready .hero-copy h1{animation:hero-in .8s .15s both var(--ease-fluid);}
.motion-ready .hero-copy .hero-lead{animation:hero-in .85s .28s both var(--ease-fluid);}
.motion-ready .hero-cta{animation:hero-in .8s .4s both var(--ease-fluid);}
.motion-ready .hero-proof{animation:hero-in .8s .52s both var(--ease-fluid);}
.motion-ready .hero-visual{animation:hero-in .9s .35s both var(--ease-fluid);}
@keyframes hero-in {from{opacity:0;transform:translate3d(0,21px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
/* Apariencia más viva sin alterar los contenidos ni el significado del diagrama. */
.hero-glow{will-change:transform;animation:glow-breathe 10s ease-in-out infinite alternate;}
@keyframes glow-breathe {0%{transform:translate3d(-2%,0,0) scale(.94);opacity:.55}100%{transform:translate3d(3%,2%,0) scale(1.08);opacity:1}}
.system-window {transform:perspective(1300px) rotateY(-2deg) rotateX(1deg);}
.motion-ready .hero-visual:hover .system-window{transform:perspective(1300px) rotateY(0) rotateX(0) translateY(-5px);}
.flow-link b{display:inline-block;animation:flow-arrow 2.4s ease-in-out infinite;}
.flow-link:nth-of-type(4) b{animation-delay:.55s;}
@keyframes flow-arrow {0%,100%{opacity:.42;transform:translateX(-2px)}45%{opacity:1;transform:translateX(3px)}}
.visual-top-tag .status-green,.mini-badge .status-green{position:relative;}
.visual-top-tag .status-green:after,.mini-badge .status-green:after{content:"";position:absolute;inset:-4px;border:1px solid #3c7587;border-radius:50%;animation:signal 3s ease-out infinite;}
@keyframes signal {0%{opacity:.8;transform:scale(.55)}70%,100%{opacity:0;transform:scale(1.9)}}
.diagram-node,.diagram-result {transition:transform .35s var(--ease-fluid),box-shadow .35s ease,border-color .35s ease;}
.diagram-node:hover,.diagram-result:hover {transform:translateX(5px);border-color:#8eafba;box-shadow:0 10px 22px rgba(48,93,107,.08);}
.service-card,.example-card,.method-grid article,.capabilities-panel,.contact-form {
  backface-visibility:hidden;
}
.service-card{transition:transform .36s var(--ease-fluid),box-shadow .36s ease,border-color .36s ease;}
.service-card:hover{transform:translateY(-9px);box-shadow:0 24px 50px rgba(38,84,99,.12);}
.service-glyph{transition:transform .4s var(--ease-fluid),background-color .3s ease;}
.service-card:hover .service-glyph{transform:rotate(-6deg) scale(1.09);background:#daeaf0;}
.example-card {transition:transform .35s var(--ease-fluid),box-shadow .35s ease;}
.example-card:hover {transform:translateY(-7px);box-shadow:0 20px 48px rgba(36,80,96,.12);}
.example-canvas .chart-bars i{transform-origin:bottom center;}
.motion-ready .example-card:not(.in-view) .chart-bars i{transform:scaleY(.09)}
.motion-ready .example-card.in-view .chart-bars i{animation:grow-bars .8s var(--ease-fluid) backwards;animation-delay:var(--bar-delay,0ms);}
@keyframes grow-bars {from{transform:scaleY(.09)}to{transform:scaleY(1)}}
.method-grid article{transition:transform .34s var(--ease-fluid),border-color .25s ease,background .25s ease,box-shadow .3s ease;}
.method-grid article:hover{transform:translateY(-5px);border-color:#3c7587;background:#f3f8f9;box-shadow:0 16px 30px rgba(38,83,98,.09);}
.capabilities-panel details{transition:background-color .25s ease;}
.capabilities-panel details[open]{background:rgba(226,239,243,.45)}
.capabilities-panel details p{animation:expand-detail .3s var(--ease-fluid) both;}
@keyframes expand-detail {from{opacity:.2;transform:translateY(-5px)}to{opacity:1;transform:none}}
.btn-primary,.btn-nav,.copy-btn {position:relative;overflow:hidden;isolation:isolate;}
.btn-primary::after,.btn-nav::after {
  content:"";position:absolute;inset:-90% -65%;pointer-events:none;
  background:linear-gradient(110deg,transparent 41%,rgba(255,255,255,.3) 50%,transparent 59%);
  transform:translateX(-110%) rotate(4deg);transition:transform .85s var(--ease-fluid);
}
.btn-primary:hover::after,.btn-nav:hover::after{transform:translateX(110%) rotate(4deg)}
/* Transición del contenido con pestañas del portal y comentarios de formulario. */
.portal-topbar {position:sticky;top:0;z-index:70;box-shadow:0 6px 24px rgba(43,77,91,.045);}
[data-content-tab]:not([hidden]){animation:portal-in .36s var(--ease-fluid) both;}
@keyframes portal-in{from{opacity:.35;transform:translateY(8px)}to{opacity:1;transform:none}}
#explain-panel {transition:box-shadow .25s ease;}
#explain-panel.is-changing{animation:panel-swap .35s var(--ease-fluid)}
@keyframes panel-swap{0%{opacity:.3;transform:translateY(5px)}100%{opacity:1;transform:none}}
/* Regresar arriba: acción funcional accesible desde teclado. */
.back-to-top {
  position:fixed;right:23px;bottom:22px;z-index:100;
  width:50px;height:50px;border:1px solid #bcd1d8;border-radius:14px;
  display:grid;place-items:center;background:#fff;color:#2c5b6c;
  box-shadow:0 12px 35px rgba(27,63,78,.15);font-size:23px;
  opacity:0;visibility:hidden;transform:translateY(16px);
  transition:opacity .27s ease,transform .27s var(--ease-fluid),visibility .27s ease;
}
.back-to-top.show{opacity:1;visibility:visible;transform:translateY(0)}
.back-to-top:hover{background:#e8f0f3;transform:translateY(-3px)}
.auth-page .login-card{transition:transform .35s var(--ease-fluid),box-shadow .35s ease;}
.auth-page .login-card:hover{transform:translateY(-3px);box-shadow:0 30px 70px rgba(36,69,82,.17);}
@media(max-width:860px){
  :root{--header-height:72px}
  .site-page .site-nav{top:var(--header-height);z-index:151;}
  .site-page .site-nav a::after{bottom:-4px;}
  .site-page .site-nav a{min-height:36px;}
  .site-page .nav-wrap{gap:12px;}
}
@media(max-width:590px){
  :root{--header-height:68px}
  .hero-section,.site-page .hero-section{padding-top:0;}
  .site-page .hero-layout{padding-top:49px;}
  .system-window,.motion-ready .hero-visual:hover .system-window{transform:none;}
  .back-to-top{right:15px;bottom:15px;width:46px;height:46px;}
  .service-card:hover,.example-card:hover,.method-grid article:hover{transform:none;}
  .flow-link b{animation-duration:3s;}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after {animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}
  .motion-ready [data-motion-reveal]{opacity:1 !important;transform:none !important;}
  .motion-ready .hero-copy .eyebrow,.motion-ready .hero-copy h1,.motion-ready .hero-copy .hero-lead,.motion-ready .hero-cta,.motion-ready .hero-proof,.motion-ready .hero-visual {animation:none !important;}
}