/* Conexiones que Transforman — estilos de la landing estática.
   Sustituye a styles.css + ds-base.js + support.js del paquete original. */

:root {
  /* Única variable del design system que usaba la página. */
  --font-body: 'Nunito Sans', 'Avenir', 'Avenir Next', system-ui, sans-serif;

  /* Dorado para texto sobre fondos claros.
     El original era #9a7c34, que da 3.46:1 sobre crema y no pasa AA.
     #806729 da 4.72:1 sobre crema y 5.40:1 sobre blanco.
     Para volver al tono original, cambia sólo esta línea. */
  --gold-ink: #806729;
}

html { scroll-behavior: smooth }
body { margin: 0; background: #08192a; -webkit-font-smoothing: antialiased }

summary::-webkit-details-marker { display: none }
details[open] summary span[data-chev] { transform: rotate(45deg) translateY(-2px) }

a { color: #C9A24B }
a:hover { color: #FFC94F }

/* ── Los 6 style-hover del original, como reglas :hover reales ───────── */
.h-gold:hover     { background: #FFC94F }
.h-navy:hover     { background: #16304A }
.h-outline:hover  { border-color: #C9A24B; color: #C9A24B }
.h-goldfill:hover { background: #C9A24B; color: #08192a }
.h-ring6:hover    { box-shadow: 0 0 0 1px rgba(201,162,75,.6) }
.h-ring7:hover    { box-shadow: 0 0 0 1px rgba(201,162,75,.7) }

/* Los CTA dorados y los azules no deben heredar el a:hover global. */
.h-gold:hover, .h-goldfill:hover { color: #08192a }
.h-navy:hover { color: #F6EFE1 }

/* ── Accesibilidad ───────────────────────────────────────────────────
   El original lleva outline:none en todos los inputs, que deja a quien
   navega con teclado sin saber dónde está parado. Sólo se ve al enfocar,
   así que no altera el aspecto de la página. */
.campo:focus-visible {
  outline: 2px solid var(--gold-ink);
  outline-offset: 1px;
  border-color: var(--gold-ink);
}

/* Los desplegables de régimen y uso de CFDI. Safari en iPhone les mete su
   propio estilo (esquinas redondeadas, tipografía del sistema), así que hay
   que apagarlo y dibujar la flecha a mano para que igualen a los demás campos. */
select.campo {
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238a6d2f' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  padding-right: 40px;
}
a:focus-visible, button:focus-visible, summary:focus-visible,
input[type="checkbox"]:focus-visible {
  outline: 2px solid #FFC94F;
  outline-offset: 2px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

[hidden] { display: none !important }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  details[open] summary span[data-chev] { transition: none }
}