/* motion.css · Capa de movimiento común a todas las páginas (criterios de Emil Kowalski).
   - Animaciones cortas (150–300 ms en la interfaz) y con curvas «ease-out» marcadas: responden al instante.
   - Solo se anima transform/opacity (y filter en la entrada): no mueve el diseño ni afecta al SEO.
   - Efectos de hover solo con ratón; en móvil, respuesta al pulsar.
   - Con «reducir movimiento» activado en el dispositivo, todo queda estático salvo cambios de color.
   Si el navegador no entiende algo (p. ej. @starting-style), simplemente no anima. */

:root{
  --m-out:cubic-bezier(.23,1,.32,1);       /* salida fuerte: entradas, hover, pulsaciones */
  --m-in-out:cubic-bezier(.77,0,.175,1);   /* elementos que ya están en pantalla y se mueven */
}

/* ---------- 1. Respuesta al pulsar (botones y controles) ---------- */
.btn,.call-fab,.gal-btn,.zoom-btn,.nav-toggle,.topnav-toggle,.ck-btn,.v3d-actions button,.v3d-close,.catalogo-list a{
  -webkit-tap-highlight-color:transparent;
}
@media (prefers-reduced-motion:no-preference){
  .btn,.call-fab,.gal-btn,.zoom-btn,.nav-toggle,.topnav-toggle,.ck-btn,.v3d-actions button,.v3d-close{
    transition-property:scale,transform,translate,background-color,border-color,color,box-shadow,filter,opacity;
    transition-duration:.18s; transition-timing-function:var(--m-out);
  }
  /* «scale» se suma al transform que ya tenga el elemento (p. ej. flechas centradas con translateY). */
  .btn:active,.call-fab:active,.gal-btn:active,.zoom-btn:active,.nav-toggle:active,.topnav-toggle:active,
  .ck-btn:active,.v3d-actions button:active,.v3d-close:active{scale:.97; transition-duration:.1s;}
  .call-fab:active{scale:.93;}
  .catalogo-list a:active{scale:.99;}
}

/* ---------- 2. Hover (solo dispositivos con ratón) ---------- */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  /* Botón de llamada: se eleva un poco */
  .call-fab:hover{translate:0 -2px; box-shadow:0 10px 24px rgba(0,0,0,.28);}
  /* Lista de soluciones de la portada: la flecha avanza */
  .catalogo-list a{transition:border-color .2s var(--m-out), background-color .2s var(--m-out), scale .16s var(--m-out);}
  .catalogo-list a::after{transition:translate .22s var(--m-out);}
  .catalogo-list a:hover{background:#fff;}
  .catalogo-list a:hover::after{translate:5px 0;}
  /* Enlaces «Ver más →» de los servicios */
  .service-2 a{display:inline-block; transition:translate .22s var(--m-out), color .2s var(--m-out);}
  .service-2 a:hover{translate:3px 0;}
  /* Fotos ampliables: elevación con la curva buena */
  .photo-ph.has-img,.photo-ph.has-3d{transition:transform .25s var(--m-out), box-shadow .25s var(--m-out);}
  /* Tarjetas de zonas/soluciones de la portada */
  .solu-card{transition:translate .25s var(--m-out), border-top-color .2s var(--m-out);}
  .solu-card:hover{translate:0 -3px; border-top-color:var(--oxide);}
  /* Preguntas frecuentes: la pregunta se colorea */
  .faq summary{transition:color .18s var(--m-out);}
  .faq summary:hover{color:var(--oxide);}
}
/* Subrayado que se dibuja de izquierda a derecha en el menú de escritorio */
@media (hover:hover) and (pointer:fine) and (min-width:981px){
  .navlinks a,.topnav a:not([aria-current="page"]){
    background:linear-gradient(currentColor,currentColor) no-repeat 0 100% / 0 1.5px;
    padding-bottom:2px; transition:background-size .28s var(--m-out), color .18s var(--m-out), opacity .18s var(--m-out);
  }
  .navlinks a:hover,.topnav a:not([aria-current="page"]):hover{background-size:100% 1.5px;}
}

/* ---------- 3. Entrada de la cabecera de cada página ---------- */
@keyframes m-rise{from{opacity:0; transform:translateY(12px); filter:blur(4px);} to{opacity:1; transform:none; filter:none;}}
@keyframes m-settle{from{transform:scale(1.06);} to{transform:none;}}
@media (prefers-reduced-motion:no-preference){
  .cta-row{animation:none;}
  .hero .crumbs,.hero h1,.hero p,.hero .cta-row,.hero-avala{animation:m-rise .55s var(--m-out) both;}
  .hero h1{animation-delay:50ms;}
  .hero p,.hero .lead{animation-delay:120ms;}
  .hero .cta-row{animation-delay:190ms;}
  .hero-avala{animation-delay:260ms;}
  /* Foto de portada: un leve asentamiento, sin ocultarla (no retrasa la carga visible) */
  .hero-photo img{animation:m-settle 1.6s var(--m-out) both;}
}

/* ---------- 4. Acordeones (FAQ y catálogo) que se abren con suavidad ---------- */
@media (prefers-reduced-motion:no-preference){
  .toggle-icon::after{transition:transform .25s var(--m-out);}
  @supports (interpolate-size:allow-keywords){
    :root{interpolate-size:allow-keywords;}
    .faq details::details-content,.product-item::details-content{
      block-size:0; overflow-y:clip;
      transition:block-size .3s var(--m-out), content-visibility .3s allow-discrete;
    }
    .faq details[open]::details-content,.product-item[open]::details-content{block-size:auto;}
  }
}

/* ---------- 5. Ventanas (llamada, galería, zoom, visor 3D, CV) ---------- */
@media (prefers-reduced-motion:no-preference){
  .call-overlay,.gal-overlay,.zoom-overlay,.v3d-overlay{transition:opacity .2s var(--m-out);}
  .call-modal,.gal-dialog,.zoom-box{transition:opacity .24s var(--m-out), scale .24s var(--m-out), translate .24s var(--m-out);}
  @starting-style{
    .call-overlay.open,.call-overlay:target,.gal-overlay.open,.zoom-overlay.open,.v3d-overlay.open{opacity:0;}
    .call-overlay.open .call-modal,.call-overlay:target .call-modal,.gal-overlay.open .gal-dialog,.zoom-overlay.open .zoom-box{
      opacity:0; scale:.96; translate:0 8px;
    }
  }
  /* Aviso «CV enviado» y banner de cookies: entran desde su borde */
  .cv-toast{transition:opacity .25s var(--m-out), translate .25s var(--m-out);}
  #ck-banner{transition:opacity .3s var(--m-out), translate .3s var(--m-out);}
  @starting-style{
    .cv-toast{opacity:0; translate:0 -8px;}
    #ck-banner{opacity:0; translate:0 16px;}
  }
}

/* ---------- 6. Paso entre páginas: fundido corto (Chrome, Edge y Safari recientes) ---------- */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto;}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.18s; animation-timing-function:cubic-bezier(.23,1,.32,1);}
}