/* D57 AI Solutions — capa propia del sitio.
   El diseño llega congelado desde Claude Design con estilos en línea. Este
   archivo aporta lo que un DOM congelado no puede tener: los estados que antes
   vivían en React (header colapsado, menú móvil, filtro del blog, errores del
   formulario) y las reglas responsive del header. El !important es deliberado:
   compite contra estilos en línea, no contra otra hoja. */

/* ── base ─────────────────────────────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; }
/* Sin scroll-behavior global a propósito. site.js ya anima los saltos DENTRO de
   la página, que es donde el desplazamiento suave orienta al lector. Puesto en
   html también alcanza a la llegada por enlace profundo, y ahí el efecto es el
   contrario: un viaje de dos mil píxeles por contenido que nadie pidió ver. */
img, svg, video { max-width: 100%; }
body[data-menu-abierto] { overflow: hidden; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 2147483001;
  background: var(--color-primary-green-alt, #06f3b8); color: #071863;
  font: 700 14px/1 var(--font-family-core, sans-serif);
  padding: 14px 20px; border-radius: 0 0 12px 0; text-decoration: none;
}
.skip-link:focus { left: 0; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--color-primary-green-alt, #06f3b8);
  outline-offset: 3px; border-radius: 6px;
}

/* ── header: navegación ───────────────────────────────────────────────── */
/* Móvil primero: hamburguesa visible, navegación horizontal oculta. */
[data-d57="nav"]    { display: none; }
[data-d57="burger"] { display: flex; }

@media (min-width: 900px) {
  [data-d57="nav"]    { display: flex; }
  [data-d57="burger"] { display: none; }
  [data-d57="panel"]  { display: none !important; }
}

[data-d57="nav"] a[data-active="true"] {
  color: #fff !important;
  border-bottom-color: var(--color-primary-green-alt, #06f3b8) !important;
}

/* ── header: colapso al hacer scroll ──────────────────────────────────── */
[data-d57="iso"] { display: none; }

[data-d57="header"][data-scrolled] [data-d57="bar"]    { height: 96px !important; }
[data-d57="header"][data-scrolled] [data-d57="lockup"] { display: none !important; }
[data-d57="header"][data-scrolled] [data-d57="iso"]    { display: block; }

/* ── header: panel móvil ──────────────────────────────────────────────── */
[data-d57="panel"] {
  display: none; opacity: 0; pointer-events: none;
}
[data-d57="panel"] a { transform: translateY(18px); opacity: 0; }

[data-d57="panel"][data-abierto] {
  display: flex; pointer-events: auto;
}
[data-d57="panel"][data-abierto][data-visible] { opacity: 1; }
[data-d57="panel"][data-abierto][data-visible] a { transform: none; opacity: 1; }

[data-d57="burger"][aria-expanded="true"] [data-d57="burger-line-1"] {
  transform: translateY(3.4px) rotate(45deg) !important;
}
[data-d57="burger"][aria-expanded="true"] [data-d57="burger-line-2"] {
  transform: translateY(-3.4px) rotate(-45deg) !important;
}

:root { --d57-anclaje: 120px; }

/* ── anclaje de los destinos de enlace ────────────────────────────────── */
/* El header es fijo: sin margen de anclaje, el ancla queda debajo de él. El
   valor tiene que ser el mismo que usa site.js o el navegador deja el destino
   en un punto y el JS lo corre después, a la vista. Va con !important porque
   el markup trae scroll-margin-top en el estilo en línea. */
section[id], article[id], h2[id], h3[id] {
  scroll-margin-top: var(--d57-anclaje) !important;
}

/* ── columnas laterales pegajosas ─────────────────────────────────────── */
/* En escritorio son un índice que acompaña la lectura. Al apilarse en móvil su
   bloque contenedor pasa a ser la sección entera, así que el sticky las hace
   viajar por encima del contenido de al lado. Debajo del quiebre, quietas. */
@media (max-width: 899px) {
  [data-d57-sticky] { position: static !important; top: auto !important; }
}

/* ── diagramas sin etiquetas propias ──────────────────────────────────── */
/* El riel de los cuatro frentes solo dibuja 01–04: en escritorio lo explican
   las etiquetas contiguas, que en móvil no caben. Sin ellas son 421 px de
   andamio vacío antes del contenido. */
@media (max-width: 899px) {
  [data-d57-diagrama-mudo] { display: none !important; }
}

/* ── carrusel de los cuatro frentes ───────────────────────────────────── */
/* Los cuatro paneles están en el HTML servido. Se ocultan los inactivos SOLO
   cuando el JS corre y puede rotarlos: sin JS se leen los cuatro apilados, que
   es peor de ver pero no pierde contenido. */
[data-js] [data-d57-panel]:not([data-activo]) { display: none !important; }

/* ── blog: filtro por eje ─────────────────────────────────────────────── */
article[hidden] { display: none !important; }

button[data-filtro][aria-pressed="true"] {
  color: #071863 !important;
  background: var(--color-primary-green-alt, #06f3b8) !important;
  border-color: var(--color-primary-green-alt, #06f3b8) !important;
}
button[data-filtro][aria-pressed="false"] {
  color: #fff !important;
  background: transparent !important;
  border-color: rgba(255, 255, 255, .16) !important;
}

/* ── formulario ───────────────────────────────────────────────────────── */
[data-error-for][hidden], #form-estado[hidden] { display: none !important; }

[data-campo-error="true"] { border-color: #ff9ee0 !important; }

#form-diagnostico[data-enviando] button[type="submit"] {
  opacity: .6 !important; pointer-events: none;
}

/* ── movimiento reducido ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}