/* ================================================================
   responsive.css — Breakpoints y adaptaciones responsivas
   ================================================================ */

/* === Tablet (810px - 1199px) === */
@media (max-width: 1199px) {
  .hero-content {
    grid-template-columns: 1fr;
    gap: var(--space-10);
    text-align: center;
  }

  .hero-text {
    max-width: 100%;
  }

  .hero-actions {
    justify-content: center;
  }

  .hero-note {
    max-width: 100%;
  }

  .hero-visual-wrapper {
    max-width: 360px;
  }

  .hero-indicators {
    position: relative;
    margin-top: var(--space-6);
    flex-wrap: wrap;
  }

  .calculator-layout {
    grid-template-columns: 1fr;
  }

  .calc-summary {
    position: relative;
    top: 0;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }
}

/* === Mobile (up to 809px) === */
@media (max-width: 809px) {
  :root {
    --container-padding: var(--space-4);
    --header-height: 64px;
    --card-padding: var(--space-5);
  }

  .section {
    padding: var(--space-16) 0;
  }

  .hero {
    min-height: auto;
    padding: calc(var(--header-height) + var(--space-10)) 0 var(--space-10);
  }

  .hero-title {
    font-size: var(--text-3xl);
  }

  .hero-subtitle {
    font-size: var(--text-base);
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions .btn-primary,
  .hero-actions .btn-secondary {
    width: 100%;
  }

  .hero-visual-wrapper {
    max-width: 280px;
  }

  .hero-indicators {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }

  .hero-indicator {
    justify-content: center;
  }

  .section-title {
    font-size: var(--text-2xl);
  }

  .services-grid {
    grid-template-columns: 1fr;
  }

  .calc-form {
    padding: var(--space-5);
    border-radius: var(--radius-lg);
  }

  .calc-step-title {
    font-size: var(--text-xl);
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .form-row-3 {
    grid-template-columns: 1fr;
  }

  .form-actions {
    flex-direction: column;
  }

  .form-actions .btn-next,
  .form-actions .btn-prev {
    width: 100%;
  }

  .radio-group {
    grid-template-columns: 1fr 1fr;
  }

  .result-details {
    grid-template-columns: 1fr;
  }

  .result-range-amount {
    font-size: var(--text-4xl);
  }

  .methodology-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-brand p {
    max-width: 100%;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }

  .footer-legal {
    justify-content: center;
  }

  /* Mobile nav */
  .header-nav {
    display: none;
  }

  .header-nav.open {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    background: rgba(10, 10, 10, 0.98);
    backdrop-filter: var(--blur-lg);
    padding: var(--space-6);
    gap: var(--space-4);
    border-bottom: 1px solid var(--color-border);
  }

  .header-nav a {
    font-size: var(--text-base);
    padding: var(--space-2) 0;
  }

  .header-mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-size: 20px;
  }

  .result-actions .btn-primary {
    min-width: 0;
    width: 100%;
  }

  .cta-card {
    padding: var(--space-6) var(--space-5);
  }

  .cta-card h2 {
    font-size: var(--text-2xl);
  }

  .calc-summary {
    border-radius: var(--radius-lg);
    padding: var(--space-5);
  }

  .result-range {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* === Small Mobile (up to 390px) === */
@media (max-width: 390px) {
  .hero-title {
    font-size: var(--text-2xl);
  }

  .radio-group {
    grid-template-columns: 1fr;
  }

  .methodology-grid {
    grid-template-columns: 1fr;
  }

  .cta-card h2 {
    font-size: var(--text-xl);
  }
}

/* === Desktop nav toggle hidden === */
.header-mobile-toggle {
  display: none;
}

@media (min-width: 810px) {
  .header-mobile-toggle {
    display: none !important;
  }
}

/* === Print === */
@media print {
  .header,
  .demo-banner,
  .hero-visual,
  .calc-progress,
  .form-actions,
  .result-actions .btn-primary:last-child {
    display: none !important;
  }

  body {
    background: white;
    color: black;
  }

  .calc-result {
    border: 1px solid #ccc;
    page-break-inside: avoid;
  }

  .section {
    padding: 1rem 0;
  }
}