/* ==========================================================================
   Mejoras visuales y de experiencia — capa adicional
   No sustituye ni modifica los estilos existentes: se carga después
   para pulir interacciones, accesibilidad y comportamiento en móvil.
   ========================================================================== */

/* Scroll suave y hueco para la cabecera fija al saltar a anclas (#solucion) */
html{scroll-behavior:smooth}
section[id]{scroll-margin-top:96px}

/* Estados de foco visibles y consistentes (accesibilidad + pulido) */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.menu-btn:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible{
  outline:2px solid var(--jade,#0f9d8a);
  outline-offset:3px;
  border-radius:8px;
}

/* Selección de texto con el color de marca */
::selection{background:rgba(15,157,138,.22);color:var(--ink,#19232c)}

/* Scrollbar fina y discreta en navegadores compatibles */
@media(hover:hover){
  ::-webkit-scrollbar{width:10px;height:10px}
  ::-webkit-scrollbar-track{background:transparent}
  ::-webkit-scrollbar-thumb{background:rgba(15,157,138,.28);border-radius:999px;border:2px solid transparent;background-clip:padding-box}
  ::-webkit-scrollbar-thumb:hover{background:rgba(15,157,138,.5);background-clip:padding-box}
}
html{scrollbar-color:rgba(15,157,138,.35) transparent;scrollbar-width:thin}

/* Botones: pequeño levantamiento al pasar el ratón y "press" al pulsar.
   Solo en dispositivos con puntero real, para no dejar el botón "levantado"
   en touch tras un tap. */
@media(hover:hover) and (pointer:fine){
  .btn:hover{transform:translateY(-2px)}
  .btn-jade:hover{box-shadow:0 22px 46px rgba(11,111,97,.3)}
}
.btn:active{transform:translateY(0) scale(.98)}

/* Enlaces de texto: la línea inferior gana presencia al pasar el cursor */
.text-link{transition:border-color .2s ease,color .2s ease,gap .2s ease}
@media(hover:hover) and (pointer:fine){
  .text-link:hover{gap:10px}
}

/* Pastillas (chips) de materias primas y temas de FAQ: respuesta al pasar el ratón */
@media(hover:hover) and (pointer:fine){
  .v3-chip-row span,
  .mw-faq-topics span{transition:background .2s ease,border-color .2s ease,transform .2s ease}
  .v3-chip-row span:hover{background:var(--jade-soft,#dff2ec);border-color:rgba(15,157,138,.3);transform:translateY(-1px)}
  .mw-faq-topics span:hover{background:rgba(255,255,255,.12);transform:translateY(-1px)}
}

/* Tarjetas informativas sin animación propia: se unifican con un
   levantamiento suave, coherente con las tarjetas de servicio */
@media(hover:hover) and (pointer:fine){
  .v3-problem-card,
  .v3-check-grid>div,
  .v3-data-grid>div,
  .mw-principle-row>div,
  .v3-position-points>div,
  .v3-role-card,
  .v3-decision-three>div,
  .v3-contact-mini>div,
  .v3-principle-grid>div{
    transition:transform .25s ease,box-shadow .25s ease;
  }
  .v3-problem-card:hover,
  .v3-check-grid>div:hover,
  .v3-data-grid>div:hover,
  .mw-principle-row>div:hover,
  .v3-position-points>div:hover,
  .v3-role-card:hover,
  .v3-decision-three>div:hover,
  .v3-contact-mini>div:hover,
  .v3-principle-grid>div:hover{
    transform:translateY(-3px);
    box-shadow:0 18px 38px rgba(18,30,34,.1);
  }
}

/* FAQ: resalte suave de la pregunta al pasar el cursor, antes de abrirla */
@media(hover:hover) and (pointer:fine){
  .v3-faq-section summary{transition:background .2s ease}
  .v3-faq-section details:not([open]) summary:hover{background:rgba(15,157,138,.05)}
}

/* Menú móvil: entrada suave en lugar de aparición brusca */
@media(max-width:900px){
  .nav-links.open{animation:mw-nav-in .22s ease both}
}
@keyframes mw-nav-in{
  from{opacity:0;transform:translateY(-8px)}
  to{opacity:1;transform:translateY(0)}
}

/* Barra de CTA fija en móvil: respeta el área segura en iPhones con notch/isla */
@media(max-width:900px){
  .mobile-cta{padding-bottom:max(12px,env(safe-area-inset-bottom))}
}

/* Cabeceras: evita cortes de línea desequilibrados en títulos */
h1,h2{text-wrap:balance}

/* Formularios: leve realce del campo activo, además del ya existente */
.field input,.field textarea,.field select{transition:box-shadow .2s ease,border-color .2s ease}

/* Imágenes de tarjetas de servicio: transición ya existente se respeta;
   añadimos un ligero oscurecido de fondo mientras cargan para evitar
   "saltos" visuales de color plano a foto en conexiones lentas */
.v3-service-image,.v3-stage-image,.mw-process-visual{background:#101a20}

/* Botón del formulario: mismo levantamiento que el resto de botones,
   incluso siendo full width */
@media(hover:hover) and (pointer:fine){
  button.btn:hover{transform:translateY(-2px)}
}

/* Respeta siempre la preferencia de movimiento reducido del sistema */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .nav-links.open{animation:none}
  .btn:hover,.v3-problem-card:hover,.v3-check-grid>div:hover,.v3-data-grid>div:hover,
  .mw-principle-row>div:hover,.v3-position-points>div:hover,.v3-role-card:hover,
  .v3-decision-three>div:hover,.v3-contact-mini>div:hover,.v3-principle-grid>div:hover,
  .v3-chip-row span:hover,.mw-faq-topics span:hover{
    transform:none!important;transition:none!important;
  }
}