/* ==========================================================================
   17-facturacion.css — /es/facturacion landing
   Editorial "bureau" aesthetic: oversized section numbers, alternating
   feature rows with UI snippets, Verifactu-as-seal motif, warm paper
   backgrounds that rhythm with crisp white.
   ========================================================================== */

/* ---- Motion ---- */
@keyframes fx-fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fx-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fx-stamp-pop {
  0%   { opacity: 0; transform: rotate(-8deg) scale(0.6); }
  60%  { opacity: 1; transform: rotate(-8deg) scale(1.08); }
  100% { opacity: 1; transform: rotate(-8deg) scale(1);    }
}

@keyframes fx-seal-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .fx-seal__text { animation: none !important; }
  .fx-doc__stamp { animation: none !important; opacity: 1; transform: rotate(-8deg); }
}

.fx-doc {
  position: relative;
  width: 100%;
  max-width: 460px;
  background: #ffffff;
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow:
    0 1px 2px rgba(16, 3, 163, 0.06),
    0 20px 48px -16px rgba(16, 3, 163, 0.18),
    0 40px 80px -32px rgba(16, 3, 163, 0.22);
  transform: rotate(-1.5deg);
  transition: transform var(--transition-slow);
}

.fx-doc:hover {
  transform: rotate(-0.5deg) translateY(-2px);
}

.fx-doc::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid var(--color-light-blue);
  pointer-events: none;
}

.fx-doc__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-light-blue);
}

.fx-doc__brand {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-lg);
  color: var(--color-dark-violant);
  letter-spacing: -0.01em;
}

.fx-doc__brand small {
  display: block;
  font-family: var(--font-body);
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  letter-spacing: 0;
  margin-top: 2px;
}

.fx-doc__num {
  text-align: right;
}

.fx-doc__num-label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.625rem;
  letter-spacing: var(--letter-spacing-widest);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.fx-doc__num-value {
  font-family: var(--font-display);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-dark-violant);
}

.fx-doc__lines {
  margin-bottom: var(--space-6);
  border-top: 1px dashed var(--color-light-blue);
  border-bottom: 1px dashed var(--color-light-blue);
}

.fx-doc__line {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-5);
  padding: var(--space-4) 0;
  font-family: var(--font-body);
  font-size: 0.875rem;
  align-items: baseline;
}

.fx-doc__line + .fx-doc__line {
  border-top: 1px solid rgba(230, 229, 246, 0.6);
}

.fx-doc__line-desc {
  color: var(--color-text);
}

.fx-doc__line-hours {
  display: block;
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}

.fx-doc__line-amount {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  color: var(--color-dark-violant);
  font-variant-numeric: tabular-nums;
}

.fx-doc__totals {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-6);
  padding-block: var(--space-5);
}

.fx-doc__total {
  text-align: right;
}

.fx-doc__total-label {
  display: block;
  font-size: 0.625rem;
  letter-spacing: var(--letter-spacing-widest);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin-bottom: 2px;
}

.fx-doc__total-value {
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-dark-violant);
  font-variant-numeric: tabular-nums;
}

.fx-doc__foot {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-light-blue);
}

.fx-doc__qr {
  flex-shrink: 0;
  padding: 6px;
  background: #ffffff;
  border: 1px solid var(--color-light-blue);
  border-radius: var(--radius-md);
}

.fx-doc__qr svg {
  display: block;
}

.fx-doc__verify {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
  line-height: 1.4;
}

.fx-doc__verify strong {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-size: 0.8125rem;
  color: var(--color-dark-violant);
  margin-bottom: 2px;
  letter-spacing: 0;
}

/* Floating "AEAT aceptada" stamp */
.fx-doc__stamp {
  position: absolute;
  top: -18px;
  right: -14px;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  background: var(--color-dark-violant);
  color: #ffffff;
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  border-radius: var(--radius-pill);
  box-shadow: 0 6px 18px rgba(16, 3, 163, 0.28);
  transform: rotate(-8deg);
  animation: fx-stamp-pop 0.7s var(--ease-in-out) both 0.7s;
}

.fx-doc__stamp svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ---- Mini UI snippets (shared) ---- */
.fx-snippet {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: #ffffff;
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-light-blue);
  padding: var(--space-7);
  box-shadow:
    0 1px 2px rgba(16, 3, 163, 0.04),
    0 12px 32px -16px rgba(16, 3, 163, 0.12);
  font-family: var(--font-body);
}

.fx-snippet__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-light-blue);
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-dark-violant);
  letter-spacing: -0.01em;
}

.fx-snippet__header svg {
  width: 16px;
  height: 16px;
  color: var(--color-pink-thq);
  flex-shrink: 0;
}

/* --- Invoice row (bloque 1, 2) --- */
.fx-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-3);
  border-radius: var(--radius-xs);
  font-size: 0.875rem;
  transition: background-color var(--transition-fast);
}

.fx-row + .fx-row {
  border-top: 1px solid var(--color-hq-blue-100);
}

.fx-row:hover {
  background-color: var(--color-hq-blue-50);
}

.fx-row__id {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  color: var(--color-dark-violant);
}

.fx-row__client {
  display: block;
  font-family: var(--font-body);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-tertiary);
  font-size: 0.75rem;
  margin-top: 2px;
}

.fx-row__amount {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.fx-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.fx-badge--rectified {
  background: var(--color-hq-blue-100);
  color: var(--color-dark-violant);
}

.fx-badge--sent {
  background: #e7f7ec;
  color: #046b3b;
}

.fx-badge--draft {
  background: #fff5e6;
  color: #8a5a00;
}

.fx-badge--aeat {
  background: var(--color-dark-violant);
  color: #ffffff;
  padding: 4px 10px;
}

.fx-badge--aeat::before {
  content: '✓';
  font-size: 0.75rem;
  line-height: 1;
}

.fx-row__link {
  display: block;
  font-size: 0.6875rem;
  color: var(--color-pink-thq);
  margin-top: 2px;
  font-family: var(--font-body);
}

/* --- Tax config card (bloque 3) --- */
.fx-tax {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.fx-tax__item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-5);
  border: 1px solid var(--color-light-blue);
  border-radius: var(--radius-md);
  background-color: var(--color-light-violant);
}

.fx-tax__rate {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--color-dark-violant);
  min-width: 3.5ch;
  line-height: 1;
  letter-spacing: -0.02em;
}

.fx-tax__info {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--fg-3);
  line-height: 1.4;
}

.fx-tax__info strong {
  display: block;
  font-family: var(--font-display);
  color: var(--color-dark-violant);
  font-size: 0.875rem;
  margin-bottom: 2px;
}

.fx-tax__status {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}

.fx-tax__status--active {
  background: #e7f7ec;
  color: #046b3b;
}

.fx-tax__status--scheduled {
  background: rgba(240, 105, 135, 0.12);
  color: var(--color-pink-thq);
}

/* --- EU customer form (bloque 4) --- */
.fx-form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-block: var(--space-4);
}

.fx-form-field + .fx-form-field {
  border-top: 1px solid var(--color-hq-blue-100);
}

.fx-form-field__label {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-widest);
  color: var(--color-text-tertiary);
}

.fx-form-field__value {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.fx-form-field__flag {
  width: 18px;
  height: 12px;
  border-radius: 2px;
  background: linear-gradient(to bottom, #000 33%, #dd0000 33%, #dd0000 66%, #ffce00 66%);
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.fx-form-field--highlight {
  background: linear-gradient(135deg, rgba(240, 105, 135, 0.06), rgba(16, 3, 163, 0.04));
  border: 1px solid rgba(240, 105, 135, 0.2);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin-top: var(--space-4);
}

.fx-form-field__hint {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
  margin-top: 4px;
  font-style: italic;
}

.fx-form-field__auto {
  font-family: var(--font-display);
  font-size: 0.625rem;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--color-pink-thq);
  color: #ffffff;
  line-height: 1.4;
}

/* --- Discounts (bloque 5) --- */
.fx-disc {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.fx-disc__item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  border: 1px dashed var(--color-light-blue);
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--fg-3);
  transition: all var(--transition-base);
}

.fx-disc__item--winner {
  border-style: solid;
  border-color: transparent;
  background: linear-gradient(135deg, rgba(16, 3, 163, 0.04), rgba(240, 105, 135, 0.06));
  box-shadow: inset 0 0 0 1px rgba(16, 3, 163, 0.12);
  color: var(--color-text);
}

.fx-disc__item--skipped {
  opacity: 0.55;
  text-decoration: line-through;
}

.fx-disc__name {
  display: block;
}

.fx-disc__name strong {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  color: var(--color-dark-violant);
}

.fx-disc__value {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  color: var(--color-dark-violant);
  font-variant-numeric: tabular-nums;
}

.fx-disc__winner-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--color-pink-thq);
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 0.625rem;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: var(--space-3);
  width: fit-content;
}

/* --- Timeline (bloque 6) --- */
.fx-timeline {
  display: flex;
  flex-direction: column;
  position: relative;
}

.fx-timeline::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: repeating-linear-gradient(
    to bottom,
    var(--color-medium-violant) 0,
    var(--color-medium-violant) 4px,
    transparent 4px,
    transparent 8px
  );
}

.fx-timeline__item {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: var(--space-5);
  padding-block: var(--space-4);
  align-items: start;
  position: relative;
}

.fx-timeline__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-top: 6px;
  background: var(--color-medium-violant);
  box-shadow: 0 0 0 4px #ffffff;
  z-index: 1;
  justify-self: center;
}

.fx-timeline__item--active .fx-timeline__dot {
  background: var(--color-pink-thq);
  box-shadow: 0 0 0 4px #ffffff, 0 0 0 8px rgba(240, 105, 135, 0.2);
}

.fx-timeline__item--aeat .fx-timeline__dot {
  background: var(--color-dark-violant);
  box-shadow: 0 0 0 4px #ffffff;
}

.fx-timeline__label {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-dark-violant);
  line-height: 1.3;
}

.fx-timeline__label small {
  display: block;
  font-family: var(--font-body);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-tertiary);
  font-size: 0.75rem;
  margin-top: 2px;
}

.fx-timeline__date {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  padding-top: 4px;
}


/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 600px) {
  .fx-doc {
    padding: var(--space-6);
    transform: rotate(-1deg);
  }

  .fx-doc__stamp {
    font-size: 0.75rem;
    padding: var(--space-2) var(--space-4);
    top: -14px;
    right: -8px;
  }

}

/* ---- Scroll-triggered reveal (progressive enhancement) ---- */
@supports (animation-timeline: view()) {
  .lp-capability,
  .lp-trust-strip__item,
  .lp-featured__card,
  .lp-int-card,
  .lp-faq__item {
    animation: fx-fade-up 0.6s ease both;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
  }
}