/* El Intérprete — capa de deploy: hover, responsive y ajustes de accesibilidad.
   Los estilos de las páginas siguen siendo inline; aquí solo se añade lo que
   un atributo style no puede expresar (media queries y pseudo-clases). */

/* --- transiciones e interacción ------------------------------------- */
a, button, [class*="eh"] { transition: transform .18s ease, box-shadow .18s ease, color .18s ease, background-color .18s ease, border-color .18s ease, opacity .18s ease; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--accent, #E9B84A); outline-offset: 3px; }
input:focus, textarea:focus { border-color: var(--accent, #E9B84A) !important; }
button { font-family: 'Manrope', sans-serif; }

/* --- casos: bloque desplegable de cada cliente ------------------------ */
summary { user-select: none; }
summary:hover { background: rgba(30,42,25,0.05); }
summary::marker { color: var(--accent, #E9B84A); }

/* --- higiene general -------------------------------------------------- */
html { scroll-padding-top: 96px; }
img, video, svg { max-width: 100%; }
body { overflow-x: hidden; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ei-rise, .ei-rise-1, .ei-rise-2 { animation: none !important; opacity: 1 !important; transform: none !important; }
  a, button, [class*="eh"] { transition: none !important; }
}

/* --- tablet ----------------------------------------------------------- */
@media (max-width: 1080px) {
  .ei-nav { flex-wrap: wrap !important; justify-content: space-between !important; row-gap: 12px !important; }
  .ei-nav-links { order: 3 !important; width: 100% !important; justify-content: center !important; }
}

@media (max-width: 1024px) {
  [style*="repeat(4, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="1.5fr 1fr 1fr 1fr 1fr"] { grid-template-columns: repeat(3, 1fr) !important; }
}

/* --- móvil: una sola columna ------------------------------------------ */
@media (max-width: 900px) {
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  [style*="repeat(4, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="1.5fr 1fr 1fr 1fr 1fr"] { grid-template-columns: repeat(2, 1fr) !important; }

  /* nada pegajoso en pantallas cortas: molesta más de lo que ayuda */
  .ei-header { position: static !important; }
  [style*="position: sticky"] { position: static !important; }
  html { scroll-padding-top: 12px; }

  /* botones que en escritorio se alinean a la derecha */
  [style*="justify-content: flex-end"] { justify-content: flex-start !important; }

  /* sombras duras algo más discretas */
  [style*="box-shadow: -6px 8px 0"] { box-shadow: -4px 5px 0 var(--ink, #1E2A19) !important; }
  [style*="box-shadow: -8px 10px 0 var(--ink"] { box-shadow: -5px 6px 0 var(--ink, #1E2A19) !important; }
  [style*="box-shadow: -8px 10px 0 var(--accent"] { box-shadow: -5px 6px 0 var(--accent, #E9B84A) !important; }

  .ei-nav { padding-top: 12px !important; padding-bottom: 12px !important; }
  .ei-nav-links a { font-size: 12.5px !important; }
}

/* --- móvil estrecho --------------------------------------------------- */
@media (max-width: 640px) {
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* el texto de los botones puede partirse antes que desbordar */
  [style*="white-space: nowrap"] { white-space: normal !important; }

  /* pastillas y botones algo más compactos */
  a[style*="border-radius: 999px"][style*="padding: 20px 40px"] { padding: 17px 28px !important; }
  a[style*="border-radius: 999px"][style*="padding: 18px 36px"] { padding: 16px 26px !important; }
  button[style*="padding: 18px 36px"] { padding: 16px 26px !important; width: 100%; justify-content: center; }

  /* logotipo de la barra superior */
  .ei-nav > a:first-child > span:first-child { width: 38px !important; height: 38px !important; }
  .ei-nav > a:first-child > span:first-child > span { font-size: 23px !important; }
  .ei-nav > a:first-child > span:last-child { font-size: 21px !important; }
  /* barra superior en tres filas: marca, secciones y llamada a la acción */
  .ei-nav-links { order: 2 !important; column-gap: 14px !important; row-gap: 6px !important; }
  .ei-nav > a:last-child { order: 3 !important; width: 100% !important; justify-content: center !important; padding: 14px 18px !important; font-size: 13px !important; }
}

@media (max-width: 420px) {
  .ei-nav > a:first-child > span:last-child { font-size: 19px !important; }
  .ei-nav-links a { font-size: 11.5px !important; letter-spacing: 0.06em !important; }
}

/* --- hero de la home -------------------------------------------------- */
/* En escritorio el hero lleva min-height inline para llenar la pantalla: así el
   vídeo se recorta poco y no asoma la sección siguiente. Por debajo de 1080px
   el menú pasa a dos filas y esa cuenta deja de valer, así que se anula. */
@media (max-width: 1080px) {
  [style*="background: #062736"] { min-height: 0 !important; }
}

/* --- tarjetas de caso ------------------------------------------------- */
/* aguantan las dos columnas hasta el móvil: apiladas, la captura ocupa
   demasiado y cada cliente vuelve a comerse una pantalla entera */
@media (min-width: 641px) and (max-width: 900px) {
  [style*="0.62fr 1.38fr"] { grid-template-columns: 0.62fr 1.38fr !important; }
}
/* ya apilada, la captura se recorta más apaisada */
@media (max-width: 640px) {
  [style*="aspect-ratio: 16 / 10"] { aspect-ratio: 2 / 1 !important; }
}

/* --- estados :hover heredados de style-hover --- */
.eh1:hover, .eh1:focus-visible { opacity: 0.55 !important; }
.eh2:hover, .eh2:focus-visible { transform: translateY(-1px) !important; box-shadow: 0 7px 16px rgba(30,42,25,0.32) !important; }
.eh3:hover, .eh3:focus-visible { color: var(--accent, #E9B84A) !important; }
.eh4:hover, .eh4:focus-visible { border-color: var(--accent, #E9B84A) !important; color: var(--accent, #E9B84A) !important; }
.eh5:hover, .eh5:focus-visible { transform: translateY(-1px) !important; box-shadow: 0 6px 14px rgba(30,42,25,0.3) !important; }
.eh6:hover, .eh6:focus-visible { color: var(--ink, #1E2A19) !important; }