/**
 * Muebles ROPY — Reset, Tipografia y Utilidades Globales
 * Cero emojis.
 */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-sans);
  color: var(--color-text-primary);
  background-color: var(--color-surface-page);
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

ul,
ol {
  list-style: none;
}

.ropy-container {
  width: 100%;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* Lineas decorativas (#line1, #line2) */
.ropy-decorative-line {
  width: 100%;
  height: 1px;
  background-color: var(--ropy-border-dark);
}

.ropy-collapsed,
[data-collapsed="true"] {
  display: none !important;
}

/* Carga progresiva por oleadas */
.ropy-wave-section {
  opacity: 1; /* Garantiza visibilidad en cualquier entorno */
  transform: translateY(0);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

/* Botones de Marca */
.btn-ropy-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: var(--color-brand-secondary);
  color: var(--color-text-inverse);
  font-weight: 700;
  padding: 0.75rem 1.45rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--ropy-border-dark);
  transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.btn-ropy-primary:hover {
  background-color: var(--color-brand-accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.btn-ropy-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: var(--color-brand-primary);
  color: var(--color-text-inverse);
  font-weight: 600;
  padding: 0.7rem 1.35rem;
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.btn-ropy-dark:hover {
  background-color: #0F172A;
  transform: translateY(-1px);
}

.btn-ropy-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: var(--ropy-sand-button);
  color: var(--ropy-border-dark);
  font-weight: 700;
  padding: 0.65rem 1.25rem;
  border: 1.5px solid var(--ropy-border-dark);
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.btn-ropy-outline:hover {
  background-color: #C7A582;
  transform: translateY(-1px);
}

/* Indicador de estado DB */
.db-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  background: rgba(15, 23, 42, 0.08);
  color: var(--color-brand-primary);
}

.db-status-pill .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #10B981;
}

.db-status-pill.is-local .dot {
  background-color: #F59E0B;
}

.text-muted {
  color: var(--color-text-muted);
}

@media (max-width: 767px) {
  #line1,
  #line2,
  .ropy-decorative-line--collapsible {
    display: none !important;
  }
}