/* AmaPay - paginas legales.
 * Se carga DESPUES del <style> propio de cada pagina: unifica tipografia, colores y navegacion
 * sin tocar el contenido legal ni la estructura de cada documento. */

@import url("site.css");

body {
  max-width: none;
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--text-2);
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.7;
}

/* Barra de marca */
.legal-bar {
  background: var(--primary);
}
.legal-bar .inner {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.legal-bar .brand img {
  width: 120px;
}
.legal-bar .home {
  color: var(--on-dark-2);
  font-size: 14px;
  font-weight: 600;
}
.legal-bar .home:hover {
  color: #fff;
}

.container {
  max-width: 880px;
  margin: 40px auto 72px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 5vw, 56px);
}
@media (max-width: 920px) {
  .container {
    margin: 24px 16px 48px;
  }
}

/* En los documentos, .section es un bloque de texto, no una seccion de pagina */
.section {
  padding: 0;
  margin-bottom: 24px;
}

.navigation {
  background: transparent !important;
  text-align: left;
  border-radius: 0;
  padding: 0 0 20px !important;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding-bottom: 20px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.navigation a,
.language-selector a {
  color: var(--text-3);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  margin: 0;
}
.navigation a:hover,
.language-selector a:hover {
  color: var(--accent-strong);
}
.language-selector {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  margin: 12px 0 8px;
}

h1 {
  color: var(--text);
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 800;
  border-bottom: 0;
  padding-bottom: 0;
  margin: 16px 0 8px;
  text-wrap: balance;
}
h2 {
  color: var(--text);
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  font-weight: 800;
  margin-top: 40px;
  margin-bottom: 12px;
}
h3 {
  color: var(--text);
  font-size: 17px;
  font-weight: 700;
  margin-top: 24px;
}
p,
li {
  color: var(--text-2);
}
strong {
  color: var(--text);
}
a {
  color: var(--accent-strong);
}
.last-updated {
  color: var(--text-3);
  font-style: normal;
  font-size: 14px;
}

/* Componentes: se llevan los colores originales (azules, morados, naranjas) a la paleta de la app */
.highlight,
.contact-info,
.choice-card,
.help-card,
.security-card,
.security-feature,
.faq-item,
.alert-box {
  background: var(--soft) !important;
  border: 1px solid var(--soft-2) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
}
.choice-card:hover,
.help-card:hover,
.security-card:hover {
  transform: none !important;
}
.choice-title,
.help-title,
.security-title,
.faq-question,
.security-feature h3,
.choice-card h3,
.help-card h3,
.category-card h3,
.highlight strong,
.alert-box strong {
  color: var(--text) !important;
}
.highlight,
.alert-box,
.highlight p,
.alert-box p {
  color: var(--text-2) !important;
}
.button,
.secondary-button {
  border-radius: var(--radius) !important;
  font-weight: 700;
}
.button {
  background: var(--primary) !important;
  color: #fff !important;
}
.secondary-button {
  background: var(--surface) !important;
  color: var(--primary) !important;
  border: 1.5px solid var(--primary) !important;
}
.category-card {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: none !important;
}
.checklist li::before {
  color: var(--primary) !important;
}
.icon {
  color: var(--primary) !important;
}
.btn {
  background: var(--primary) !important;
  color: #fff !important;
  border-radius: var(--radius) !important;
  padding: 10px 20px !important;
  font-weight: 700;
  font-size: 14px;
}
.btn:hover {
  background: var(--primary-strong) !important;
}
.search-box input {
  border: 1px solid var(--line-strong) !important;
  border-radius: 12px !important;
}
table {
  border-collapse: collapse;
  width: 100%;
}
th,
td {
  border-bottom: 1px solid var(--line);
  padding: 10px 12px;
  text-align: left;
}
th {
  color: var(--text);
  background: var(--paper);
}

/* Las alertas conservan su significado (aviso, exito, peligro) con tonos sobrios */
.alert {
  border-radius: 12px !important;
}
.alert-warning {
  background: #fdf6e7 !important;
  border-color: #f2dfb3 !important;
  color: #7a5b12 !important;
}
.alert-success {
  background: #ecf6f0 !important;
  border-color: #cfe8da !important;
  color: var(--ok) !important;
}
.alert-danger {
  background: #fdf0ef !important;
  border-color: #f6d3cf !important;
  color: var(--danger) !important;
}