/* ==========================================================================
   TEL — Tema Fintech Premium (todas las páginas)
   ========================================================================== */

.hp-body {
  --hp-primary: #0A5BFF;
  --hp-primary-hover: #0848cc;
  --hp-secondary: #2563EB;
  --hp-dark: #0F172A;
  --hp-text: #111827;
  --hp-muted: #6B7280;
  --hp-bg: #FAFBFC;
  --hp-card: #FFFFFF;
  --hp-border: #E5E7EB;
  --hp-radius: 22px;
  --hp-radius-sm: 14px;
  --hp-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 32px rgba(15, 23, 42, 0.06);
  --hp-ease: cubic-bezier(0.22, 1, 0.36, 1);

  font-family: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, sans-serif;
  background: var(--hp-bg);
  color: var(--hp-text);
}

/* Header */
.hp-body .header {
  background: rgba(250, 251, 252, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(229, 231, 235, 0.8);
}

.hp-body .logo-text {
  color: var(--hp-dark);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.hp-body .nav-links a {
  color: var(--hp-muted);
  font-size: 0.875rem;
  font-weight: 500;
}

.hp-body .nav-links a.active,
.hp-body .nav-links a:hover {
  color: var(--hp-primary);
}

.hp-body .nav-toggle {
  border-color: var(--hp-border);
  border-radius: var(--hp-radius-sm);
}

/* Page hero — limpio, sin fotos */
.hp-body .page-hero {
  position: relative;
  padding: clamp(3rem, 6vw, 4.5rem) 0 clamp(2rem, 4vw, 3rem);
  background: var(--hp-bg);
  border-bottom: 1px solid var(--hp-border);
  overflow: visible;
}

.hp-body .page-hero-bg {
  display: none;
}

.hp-body .page-hero-inner,
.hp-body .page-hero > .container {
  position: relative;
  z-index: 1;
}

.hp-body .hero-tag {
  display: inline-block;
  margin: 0 0 1rem;
  padding: 0;
  background: none;
  color: var(--hp-primary);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 0;
}

.hp-body .page-hero h1 {
  margin: 0 0 0.875rem;
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
  color: var(--hp-dark);
}

.hp-body .page-hero-sub {
  margin: 0;
  max-width: 620px;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--hp-muted);
}

.hp-body .page-hero-sub a {
  color: var(--hp-primary);
  font-weight: 600;
}

/* Sections */
.hp-body .section {
  padding: clamp(3rem, 6vw, 4.5rem) 0;
}

.hp-body .section-alt {
  background: var(--hp-bg);
}

.hp-body .section-header h2 {
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--hp-dark);
}

.hp-body .section-header p {
  color: var(--hp-muted);
}

/* Cards */
.hp-body .card {
  background: var(--hp-card);
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-radius);
  padding: clamp(1.5rem, 3vw, 2rem);
  box-shadow: var(--hp-shadow);
  transition: box-shadow 0.25s var(--hp-ease), transform 0.25s var(--hp-ease);
}

.hp-body .card:hover {
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 40px rgba(15, 23, 42, 0.08);
}

/* Forms */
.hp-body .form-group label,
.hp-body .field-label {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--hp-text);
}

.hp-body .field-hint {
  color: var(--hp-muted);
}

.hp-body input[type="text"],
.hp-body input[type="email"],
.hp-body input[type="tel"],
.hp-body input[type="password"],
.hp-body input[type="number"],
.hp-body select,
.hp-body textarea {
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-radius-sm);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.hp-body input:focus,
.hp-body select:focus,
.hp-body textarea:focus {
  outline: none;
  border-color: var(--hp-primary);
  box-shadow: 0 0 0 3px rgba(10, 91, 255, 0.12);
}

.hp-body .option-btn span {
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-radius-sm);
  transition: border-color 0.2s var(--hp-ease), background 0.2s, box-shadow 0.2s;
}

.hp-body .option-btn input:checked + span {
  border-color: var(--hp-primary);
  background: rgba(10, 91, 255, 0.06);
  color: var(--hp-primary);
  box-shadow: 0 0 0 1px rgba(10, 91, 255, 0.12);
}

.hp-body .currency-picker-btn {
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-radius-sm);
}

.hp-body .currency-picker-btn.active {
  border-color: var(--hp-primary);
  background: rgba(10, 91, 255, 0.06);
  box-shadow: 0 0 0 1px rgba(10, 91, 255, 0.12);
}

/* Calculator / results */
.hp-body .calc-result {
  border-radius: var(--hp-radius);
  border: 1px solid var(--hp-border);
  box-shadow: var(--hp-shadow);
}

.hp-body .result-total {
  color: var(--hp-dark);
}

/* Service cards */
.hp-body .service-card {
  border-radius: var(--hp-radius);
  border: 1px solid var(--hp-border);
  box-shadow: var(--hp-shadow);
  overflow: hidden;
}

.hp-body .service-card::before {
  height: 3px;
  background: var(--hp-primary);
}

.hp-body .service-remesa::before,
.hp-body .service-recargas::before,
.hp-body .service-combos::before {
  background: var(--hp-primary);
}

.hp-body .service-card h3 {
  color: var(--hp-dark);
  font-weight: 700;
}

.hp-body .service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.1);
}

/* Catalog / store */
.hp-body .product-card,
.hp-body .combo-card {
  border-radius: var(--hp-radius);
  border: 1px solid var(--hp-border);
  box-shadow: var(--hp-shadow);
  transition: transform 0.25s var(--hp-ease), box-shadow 0.25s var(--hp-ease);
}

.hp-body .product-card:hover,
.hp-body .combo-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.1);
}

.hp-body .catalog-toolbar label {
  color: var(--hp-muted);
}

.hp-body .catalog-location-select {
  border-radius: var(--hp-radius-sm);
  border-color: var(--hp-border);
}

/* Cart */
.hp-body .cart-item,
.hp-body .cart-sidebar {
  border-radius: var(--hp-radius);
}

.hp-body .cart-empty h2 {
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--hp-dark);
}

/* Auth / account */
.hp-body .auth-card,
.hp-body .account-panel {
  border-radius: var(--hp-radius);
  border: 1px solid var(--hp-border);
  box-shadow: var(--hp-shadow);
}

.hp-body .auth-card h1,
.hp-body .account-panel h2 {
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--hp-dark);
}

/* FAQ */
.hp-body .faq-item {
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-radius-sm);
  background: var(--hp-card);
  box-shadow: var(--hp-shadow);
}

.hp-body .faq-item summary,
.hp-body .faq-question {
  font-weight: 600;
  color: var(--hp-dark);
}

.hp-body .faq-cat-label,
.hp-body .faq-cat-btn {
  color: var(--hp-primary);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.hp-body .faq-cat-btn--active {
  background: var(--hp-primary);
  color: #fff;
}

/* Legal */
.hp-body .legal-content h2 {
  color: var(--hp-dark);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.hp-body .legal-content h3 {
  color: var(--hp-text);
}

/* CTA section */
.hp-body .cta-section {
  background: var(--hp-dark);
  color: #fff;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.hp-body .cta-bg,
.hp-body .cta-bg-overlay {
  display: none;
}

.hp-body .cta-content h2 {
  font-weight: 800;
  letter-spacing: -0.03em;
}

.hp-body .cta-section .btn-primary {
  background: #fff;
  color: var(--hp-primary);
  border-color: #fff;
  box-shadow: none;
}

.hp-body .cta-section .btn-primary:hover {
  background: rgba(255, 255, 255, 0.92);
  color: var(--hp-primary-hover);
}

.hp-body .cta-section .btn-outline {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
  background: transparent;
}

.hp-body .cta-section .btn-outline:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
}

/* Reviews on subpages */
.hp-body .review-card {
  border-radius: var(--hp-radius);
  border: 1px solid var(--hp-border);
  background: var(--hp-card);
  box-shadow: var(--hp-shadow);
}

/* Footer premium */
.hp-body .footer {
  padding: 3rem 0 0;
  background: var(--hp-dark);
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.9375rem;
}

.hp-body .footer-grid {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 2.5rem;
}

.hp-body .footer-brand strong {
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
}

.hp-body .footer-brand p {
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.6;
}

.hp-body .footer-col h4 {
  color: #fff;
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
}

.hp-body .footer-col a {
  color: rgba(255, 255, 255, 0.65);
  transition: color 0.15s;
}

.hp-body .footer-col a:hover {
  color: #fff;
}

.hp-body .footer-bottom {
  padding: 1.5rem 0;
  color: rgba(255, 255, 255, 0.45);
  opacity: 1;
}

/* Account & history */
.hp-body .account-panel,
.hp-body .account-quick-link {
  border-radius: var(--hp-radius);
  border: 1px solid var(--hp-border);
  box-shadow: var(--hp-shadow);
}

.hp-body .account-page-title,
.hp-body .auth-step-title {
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--hp-dark);
}

.hp-body .account-quick-link {
  transition: transform 0.2s var(--hp-ease), box-shadow 0.2s var(--hp-ease), border-color 0.2s;
}

.hp-body .account-quick-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.08);
  border-color: rgba(10, 91, 255, 0.2);
}

.hp-body .account-profile-display-name {
  color: var(--hp-dark);
}

.hp-body .history-card,
.hp-body .recipient-card,
.hp-body .order-history-item {
  border-radius: var(--hp-radius-sm);
  border: 1px solid var(--hp-border);
  background: var(--hp-card);
  box-shadow: var(--hp-shadow);
}

.hp-body .order-panel-inner {
  border-radius: var(--hp-radius-sm);
}

/* Nav cart / session */
.hp-body .nav-actions {
  gap: 0.2rem;
}

.hp-body .nav-cart,
.hp-body .nav-account,
.hp-body .tel-cart-btn,
.hp-body .tel-auth-btn {
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.8125rem;
  transition: background 0.2s var(--hp-ease), color 0.2s var(--hp-ease), border-color 0.2s var(--hp-ease);
}

.hp-body .tel-cart-btn,
.hp-body .tel-auth-btn {
  border: 1px solid transparent;
}

.hp-body .tel-cart-btn:hover,
.hp-body .tel-auth-btn:hover {
  background: rgba(10, 91, 255, 0.08);
  border-color: transparent;
  box-shadow: none;
}

.hp-body .nav-cart-badge,
.hp-body .tel-cart-badge {
  background: var(--hp-primary);
}

/* Tables */
.hp-body table {
  border-radius: var(--hp-radius-sm);
  overflow: hidden;
}

.hp-body th {
  color: var(--hp-muted);
  font-weight: 600;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Buttons refinement */
.hp-body .btn {
  border-width: 1px;
  transition: transform 0.2s var(--hp-ease), box-shadow 0.2s var(--hp-ease), background 0.2s, border-color 0.2s;
}

.hp-body .btn-outline {
  color: var(--hp-primary);
  border-color: var(--hp-border);
  background: var(--hp-card);
}

.hp-body .btn-outline:hover {
  border-color: rgba(10, 91, 255, 0.35);
  background: var(--hp-card);
  color: var(--hp-primary);
  box-shadow: var(--hp-shadow);
}

/* Scroll reveal */
.tel-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s var(--hp-ease), transform 0.65s var(--hp-ease);
}

.tel-reveal--visible {
  opacity: 1;
  transform: none;
}

/* Stagger children */
.tel-reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s var(--hp-ease), transform 0.55s var(--hp-ease);
}

.tel-reveal-stagger.tel-reveal--visible > *:nth-child(1) { transition-delay: 0.05s; }
.tel-reveal-stagger.tel-reveal--visible > *:nth-child(2) { transition-delay: 0.1s; }
.tel-reveal-stagger.tel-reveal--visible > *:nth-child(3) { transition-delay: 0.15s; }
.tel-reveal-stagger.tel-reveal--visible > *:nth-child(4) { transition-delay: 0.2s; }
.tel-reveal-stagger.tel-reveal--visible > *:nth-child(5) { transition-delay: 0.25s; }
.tel-reveal-stagger.tel-reveal--visible > *:nth-child(6) { transition-delay: 0.3s; }

.tel-reveal-stagger.tel-reveal--visible > * {
  opacity: 1;
  transform: none;
}