/* Aspelix · estilos base del sitio
   Los estilos de cada sección están en index.html (atributo style).
   Aquí: base, accesibilidad, interacciones y ajustes para celular. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #0B1320; }
img, video { max-width: 100%; }
a { color: #C8A86B; }
a:hover { color: #E2CC9A; }
section[id] { scroll-margin-top: 90px; }

/* Enlace para saltar al contenido (teclado / lectores de pantalla) */
.saltar { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 12px 18px; background: #C8A86B; color: #0B1320; font-weight: 600; }
.saltar:focus { left: 12px; top: 12px; }

/* Foco visible */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2px solid #C8A86B; outline-offset: 3px;
}

/* Interacciones sobrias */
a[style*="background: #C8A86B"]:hover, button:hover { filter: brightness(1.06); }
a[style*="border: 1px solid #3A4A63"]:hover { border-color: #C8A86B !important; }
figure img { transition: transform .4s ease; }
figure:hover img { transform: translateY(-2px); }
details summary { list-style: none; position: relative; padding-right: 32px; }
details summary::-webkit-details-marker { display: none; }
details summary::after { content: "+"; position: absolute; right: 4px; top: 0; font-size: 22px; color: #7A5C22; }
details[open] summary::after { content: "–"; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  figure img { transition: none; }
}

/* Celular y tableta */
@media (max-width: 900px) {
  h1 { font-size: 46px !important; }
  h2 { font-size: 34px !important; }
  section > div[style*="padding: 112px"], section[style*="padding: 112px"] { padding-top: 72px !important; padding-bottom: 72px !important; }
  div[style*="minmax(420px"], div[style*="minmax(400px"], div[style*="minmax(380px"] { grid-template-columns: 1fr !important; }
}
@media (max-width: 640px) {
  h1 { font-size: 38px !important; }
  h2 { font-size: 29px !important; }
  header nav > div { display: none !important; }       /* el menú se oculta; el botón de demostración queda visible */
  div[style*="padding: 56px"], div[style*="padding: 36px"], form[style*="padding: 36px"] { padding: 26px !important; }
  div[style*="font-size: 52px"] { font-size: 42px !important; }
  p[style*="font-size: 32px"] { font-size: 24px !important; }
}

/* Encabezado compacto en celular */
@media (max-width: 640px) {
  header nav { flex-wrap: nowrap !important; padding: 10px 16px !important; gap: 10px !important; }
  header nav > a:first-child > span > span:nth-child(2) { display: none; }   /* oculta el lema bajo el logo */
  header nav > a:first-child svg { width: 36px; height: 30px; }
  header nav > a[href="#contacto"] { min-height: 40px !important; padding: 0 14px !important; font-size: 13px !important; white-space: nowrap; }
  a[href="#precios"][style*="display: block"] { font-size: 12px !important; padding: 9px 14px !important; }
}

/* Flecha Aspel SAE -> Aspelix: hacia abajo cuando las imágenes se apilan */
@media (max-width: 1000px) { .flecha-sae { flex-basis: 100% !important; transform: rotate(90deg); } }