/* =================================================================
   HYDRA AUTOMATIONS · responsive.css
   Tablet · móvil · táctil · movimiento reducido · contraste forzado
   ================================================================= */
@supports (overflow:clip){.hero{overflow-x:clip}}
@media (min-width:1680px){:root{--maxw:1340px}.hero__title{font-size:4.9rem}.phone{--pw:310px}}

/* ---------- Portátiles bajos ---------- */
@media (max-width:1180px){
  .callout--1{left:-1%}.callout--2{right:-1%}
  .nav__links a{padding:10px 13px}
}

/* ---------- Tablet ---------- */
@media (max-width:980px){
  .hero__inner{grid-template-columns:minmax(0,1fr);grid-template-areas:"visual" "head" "copy";row-gap:clamp(26px,5vw,40px)}
  .hero__visual{width:100%;max-width:520px;margin-inline:auto}
  .hero__title{max-width:none}
  .phone{--pw:clamp(204px,54vw,236px)}
  .hero{padding-top:calc(var(--safe-t) + var(--nav-top) + var(--nav-h) + 22px)}
  .hero__visual{padding-block:6px}
  .callout--1{left:2%}.callout--2{right:2%}
  .head{grid-template-columns:minmax(0,1fr);grid-template-areas:"eyebrow" "title" "lead"}
  .head .h2{margin-bottom:18px}.head .lead{padding-bottom:0}
  .why__inner,.faq__inner{grid-template-columns:minmax(0,1fr)}
  .why__text,.faq__head{position:static}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:44px}
  .step:nth-child(2n)::before,.step:nth-child(2n)::after{display:none}
  .packages__grid{grid-template-columns:minmax(0,1fr);max-width:580px;margin-inline:auto}
  .package--featured{order:-1}
  .results__grid{grid-template-columns:minmax(0,1fr)}
  .result{border-left:0;border-top:1px solid var(--line-2)}.result:first-child{border-top:0}
  .trust__grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:30px}
  .metric:nth-child(odd){border-left:0;padding-left:0}.metric:nth-child(even){padding-right:0}
  .footer__inner{grid-template-columns:1fr 1fr}.footer__brand{grid-column:1/-1}
}

/* ---------- Navegación compacta (menú hoja) ---------- */
@media (max-width:900px){
  :root{--nav-h:58px;--nav-top:12px}
  .nav__links{display:none}
  .nav__toggle{display:block;margin-left:0}
  .nav__cta{margin-left:auto}
  .nav__bar{gap:10px;padding:0 7px 0 16px}
  .brand__mark{width:32px;height:32px}
}
@media (max-width:420px){
  .nav__cta{display:none}
  .nav__toggle{margin-left:auto}
}

/* ---------- Móvil ---------- */
@media (max-width:760px){
  .section{padding-block:clamp(72px,16vw,96px)}
  .services__grid{grid-template-columns:minmax(0,1fr)}
  .viz--flow{padding-inline:16px}
  .footer__mega{font-size:clamp(4rem,27vw,9rem)}
  .orbit{width:min(560px,128%)}
  .orbit--spin2{display:none}
}
@media (max-width:640px){
  .steps{grid-template-columns:minmax(0,1fr);row-gap:0}
  .step{padding:0 0 40px 68px}
  .step:last-child{padding-bottom:0}
  .step__node{position:absolute;left:0;top:0;margin:0}
  .step h3{margin-top:9px}
  .step::before,.step::after,.step:nth-child(2n)::before,.step:nth-child(2n)::after{display:block;top:60px;left:22.5px;width:1px;height:calc(100% - 72px)}
  .step::after,.step:nth-child(2n)::after{background:linear-gradient(180deg,var(--accent),rgba(var(--accent-rgb),.2));transform:scaleY(0);transform-origin:50% 0}
  .step.is-on::after{transform:scaleY(1)}
  .step:last-child::before,.step:last-child::after{display:none}
}
@media (max-width:560px){
  .callout{display:none}
  .hero__actions .btn,.cta__actions .btn{flex:1 1 100%;width:100%}
  .pillars{grid-template-columns:minmax(0,1fr)}
  .pillar,.pillar:nth-child(2n),.pillar:nth-last-child(-n+2){border-right:0;border-bottom:1px solid var(--line-2)}
  .pillar:last-child{border-bottom:0}
  .faq-item__body p{padding-right:0}
  .hero__stats li{padding-right:20px}.hero__stats li+li{padding-left:20px}
  .footer__inner{gap:32px 20px}
  .cta__seal{width:72px;height:72px}
  .package__name{font-size:1.55rem}
}
@media (max-width:400px){
  :root{--gutter:16px}
  .hero__stats strong{font-size:1.9rem}
  .eyebrow{letter-spacing:.14em}
  .chip{letter-spacing:.1em;font-size:.64rem;padding-right:12px}
  .trust__label{letter-spacing:.14em}
  .svc__top .tag{font-size:.62rem;padding:6px 10px}
}

/* ---------- Teléfono apaisado / pantallas bajas ---------- */
@media (max-height:520px) and (orientation:landscape){
  .hero{padding-top:calc(var(--safe-t) + var(--nav-top) + var(--nav-h) + 24px)}
  .sheet{padding-top:calc(var(--safe-t) + var(--nav-top) + var(--nav-h) + 12px);gap:14px}
  .sheet__nav a{padding:8px 0;font-size:1.5rem}
}

/* ---------- Táctil: sin efectos caros ni estados "hover" pegajosos ---------- */
@media (hover:none),(pointer:coarse){
  .bg-grain{display:none}
  .hero__visual{transform:none;transition:none}
  .btn--sm{min-height:44px}
  .callout{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(13,16,20,.94)}
  .faq-item summary{min-height:56px}
  .footer__col a{padding:10px 0}
}

/* ---------- Guarda de zoom (evita saturar la GPU al ampliar) ---------- */
html.is-zoomed .bg-shader,html.is-zoomed .bg-grain{display:none}
html.is-zoomed .orbit--spin,html.is-zoomed .orbit--spin2,html.is-zoomed .package__spin::before{animation:none}
html.is-zoomed .nav__bar,html.is-zoomed .callout,html.is-zoomed .sheet{-webkit-backdrop-filter:none;backdrop-filter:none}
html.is-zoomed .nav.is-scrolled .nav__bar{background:rgba(9,11,14,.94)}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.001ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
  .w>span{transform:none}
  .spark__line{stroke-dashoffset:0}.spark__area,.spark__dot{opacity:1}
  .bars i{transform:none}
  .step::after{transform:scaleX(1)}
  .wa-float::before,.callout,.phone{animation:none}
}
@media (prefers-reduced-motion:reduce) and (max-width:640px){.step::after{transform:scaleY(1)}}

/* ---------- Modo de contraste forzado (Windows) ---------- */
@media (forced-colors:active){
  .bg-canvas,.ticks,.cta__rings,.orbit{display:none}
  .btn{border:1px solid ButtonText}
  .btn--primary{background:ButtonFace;color:ButtonText}
  .panel,.pillars,.results__grid,.callout,.viz,.faq-item,.social-btn{border-color:CanvasText}
  .w--wa,.w--ct{color:CanvasText;text-shadow:none}
  .checks li::before{forced-color-adjust:none}
  .footer__mega{display:none}
}

/* Tablet vertical: teléfono algo mayor */
@media (min-width:640px) and (max-width:980px){.phone{--pw:268px}.hero{padding-top:calc(var(--safe-t) + var(--nav-top) + var(--nav-h) + 40px)}}