/*
 * NAHUREK — Correcciones Visuales Globales del Sitio
 * Aplica a: index.php, vsl.php, cotizar.php, agendar.php, asesor.php, privacidad.php
 */

/* ── 1. Iconos Material Symbols: peso, ligaduras y visualización perfecta ── */
.material-symbols-outlined,
.material-symbols-sharp,
.material-symbols-rounded,
.material-icons {
  font-family: 'Material Symbols Outlined' !important;
  font-weight: normal !important;
  font-style: normal !important;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  line-height: 1 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  white-space: nowrap !important;
  word-wrap: normal !important;
  direction: ltr !important;
  -webkit-font-feature-settings: 'liga' !important;
  -webkit-font-smoothing: antialiased !important;
  vertical-align: middle;
  user-select: none;
}

/* ── 2. Scrollbar personalizada ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(206,197,193,0.3); }

/* ── 3. Selección de texto ── */
::selection { background: rgba(206,197,193,0.25); color: inherit; }

/* ── 4. ios-glass unificado ── */
.ios-glass {
  background: rgba(30, 27, 25, 0.68);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.08);
}

/* ── 5. ios-button base ── */
.ios-button {
  border-radius: 9999px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
}
.ios-button:active { transform: scale(0.96); opacity: 0.85; }

/* ── 6. ios-tile base ── */
.ios-tile {
  background: rgba(255,255,255,0.05);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.ios-tile:active { transform: scale(0.97); background: rgba(255,255,255,0.1); }

/* ── 7. Select dark-mode ── */
select { color-scheme: dark; }
select option {
  background-color: #1e1b19 !important;
  color: #e9e1dd !important;
}

/* ── 8. Textos con mejor legibilidad y tamaño coherente ── */
h1, h2, h3, h4, h5, h6 { line-height: 1.2; letter-spacing: -0.01em; }
.font-headline-2xl {
  font-size: clamp(2rem, 3.8vw, 3.5rem) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.02em !important;
}
p { line-height: 1.65; }

/* ── 9. Imágenes: no desbordarse ── */
img { max-width: 100%; display: block; }

/* ── 10. Botones de formulario ── */
button, [type="submit"], [type="button"] { cursor: pointer; }

/* ── 11. Labels y etiquetas de formulario ── */
label { display: block; }
input, textarea, select { font-family: inherit; }

/* ── 12. Links: sin subrayado por defecto ── */
a { text-decoration: none; color: inherit; }

/* ── 13. Transiciones y Micro-animaciones Interactivas al Mover o Pulsar el Cursor ── */
a, button, .ios-button, .ios-glass, .ios-tile, [role="button"], input, select, textarea {
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1), 
              background-color 0.24s ease, 
              border-color 0.24s ease, 
              color 0.2s ease,
              opacity 0.2s ease;
}

/* Elevación y resplandor al pasar el cursor (Hover) */
.ios-button:hover,
button[type="submit"]:hover,
a.bg-gradient-to-r:hover {
  transform: translateY(-2.5px) scale(1.015);
  box-shadow: 0 12px 28px -4px rgba(226, 126, 59, 0.35), 0 4px 12px -2px rgba(0, 0, 0, 0.3);
}

/* Efecto de elevación suave en tarjetas y módulos al mover el cursor */
.ios-glass:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.45);
}

.ios-tile:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
}

/* Pulsación táctil y clic firme (Active / Press Feedback) */
.ios-button:active,
button:active:not(:disabled),
a:active,
[role="button"]:active,
.ios-tile:active {
  transform: scale(0.96) translateY(0) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
  transition-duration: 0.1s !important;
}

.ios-glass:active {
  transform: scale(0.985);
  transition-duration: 0.12s;
}

/* Animación sutil de entrada para modales y ventanas emergentes */
.modal-active, [id*="Modal"]:not(.hidden) > div {
  animation: axisLandingPop 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes axisLandingPop {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Foco interactivo con halo cálido en campos de formulario */
input:focus, textarea:focus, select:focus {
  transform: translateY(-1px);
  border-color: rgba(226, 126, 59, 0.6) !important;
  box-shadow: 0 0 0 3px rgba(226, 126, 59, 0.2), 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  outline: none;
}

/* Iconos interactivos con micro-rotación o desplazamiento sutil */
a:hover .material-symbols-outlined,
button:hover .material-symbols-outlined {
  transform: translateY(-1px);
  transition: transform 0.2s ease;
}

/* ── 14. Footer links ── */
footer a:hover { text-decoration: underline; }

/* ── 15. Mejora de contraste en textos débiles ── */
.text-white\/30 { color: rgba(255,255,255,0.38) !important; }
.text-white\/40 { color: rgba(255,255,255,0.48) !important; }
.text-white\/50 { color: rgba(255,255,255,0.6) !important; }

/* ── 16. Contenedor responsivo ── */
@media (max-width: 640px) {
  .ios-glass { border-radius: 24px !important; }
  h1 { line-height: 1.1; }
  p  { font-size: 0.95rem; }
}