* { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --color-bg-page: #F4F6F8;
      --color-bg-card: #FFFFFF;
      --color-bg-input: #FFFFFF;
      --color-bg-soft: #F1F3F4;
      --color-border-input: #C4C7CC;
      --color-text-primary: #0F1B2D;
      --color-text-secondary: #4B5563;
      --color-text-muted: #6B7280;
      --color-text-placeholder: #9CA3AF;
      --color-text-footer: #D1D5DB;

      --color-header-bg: #0F1B2D;
      --color-header-logo: #4FB3DC;
      --color-header-logo-strong: #FFFFFF;
      --color-footer-bg: #0F1B2D;

      --color-accent: #2563EB;
      --color-accent-hover: #1E4FBF;
      --color-accent-border: #1B4399;
      --color-accent-soft: #E6EEFB;

      --color-trust-bg: #2563EB;
      --color-success: #16A34A;
      --color-success-soft: #DCFCE7;

      --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      --radius-md: 8px;
      --radius-lg: 12px;
    }

    html, body {
      font-family: var(--font-sans);
      background: var(--color-bg-page);
      color: var(--color-text-primary);
      min-height: 100vh;
      font-size: 16px;
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
    }

    body {
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }

    /* ============ HEADER ============ */
    .top-header {
      background: var(--color-header-bg);
      padding: 14px 20px;
      text-align: center;
    }
    .logo {
      font-size: 18px;
      font-weight: 700;
      letter-spacing: 0.3px;
      color: var(--color-header-logo);
    }
    .logo strong {
      color: var(--color-header-logo-strong);
      font-weight: 700;
    }
    .logo .plus {
      display: inline-block;
      background: white;
      color: var(--color-header-logo);
      border-radius: 50%;
      width: 20px;
      height: 20px;
      line-height: 20px;
      font-size: 16px;
      font-weight: 700;
      margin: 0 4px;
      vertical-align: middle;
    }

    /* ============ TRUST BAR (producto) ============ */
    .trust-bar {
      background: var(--color-trust-bg);
      color: white;
      padding: 11px 20px;
      text-align: center;
      font-size: 14px;
      font-weight: 600;
      letter-spacing: 0.1px;
    }
    .trust-bar-product {
      display: inline-block;
    }

    /* ============ PROOF BAR (prueba social sutil) ============ */
    .proof-bar {
      background: white;
      color: var(--color-text-secondary);
      padding: 8px 20px;
      text-align: center;
      font-size: 12px;
      font-weight: 500;
      border-bottom: 1px solid var(--color-bg-soft);
    }
    .proof-bar .pulse {
      display: inline-block;
      width: 6px;
      height: 6px;
      background: var(--color-success);
      border-radius: 50%;
      margin-right: 5px;
      vertical-align: middle;
    }

    /* ============ ÁREA PRINCIPAL ============ */
    .main {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      padding: 12px 14px;
    }
    .container {
      width: 100%;
      max-width: 540px;
    }

    /* ============ INTRO ============ */
    .intro {
      text-align: center;
      margin-bottom: 16px;
      display: none; /* OCULTO en mobile por defecto, se muestra en desktop */
    }
    .intro h1 {
      font-size: 22px;
      font-weight: 700;
      color: var(--color-text-primary);
      line-height: 1.25;
      margin-bottom: 6px;
    }
    .intro p {
      font-size: 14px;
      color: var(--color-text-secondary);
      line-height: 1.5;
    }

    /* ============ PROGRESS BAR ============ */
    .progress-wrapper {
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 4px;
    }
    .progress-label {
      font-size: 11px;
      color: var(--color-text-muted);
      font-weight: 600;
      letter-spacing: 0.3px;
    }
    .progress-percent {
      font-size: 11px;
      color: var(--color-accent);
      font-weight: 700;
    }
    .progress-bar {
      width: 100%;
      height: 3px;
      background: var(--color-bg-soft);
      border-radius: 2px;
      overflow: hidden;
      margin-bottom: 14px;
    }
    .progress-fill {
      height: 100%;
      background: var(--color-accent);
      border-radius: 2px;
      transition: width 0.3s ease;
      width: 0%;
    }

    /* ============ TARJETA ============ */
    .card {
      background: var(--color-bg-card);
      border-radius: var(--radius-lg);
      padding: 20px 18px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }

    /* ============ STEPS ============ */
    /* .step { display: none; } */
    .step.active { display: block; }

    .step-title {
      font-size: 17px;
      font-weight: 700;
      color: var(--color-text-primary);
      margin-bottom: 4px;
      line-height: 1.3;
    }
    .step-help {
      font-size: 12px;
      color: var(--color-text-muted);
      margin-bottom: 14px;
    }

    /* ============ OPCIONES ============ */
    .options {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 14px;
    }
    .option {
      background: var(--color-bg-input);
      border: 1px solid var(--color-border-input);
      border-radius: var(--radius-md);
      padding: 12px 14px;
      min-height: 44px; /* mínimo táctil seguro */
      font-size: 14px;
      color: var(--color-text-primary);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      font-family: var(--font-sans);
      text-align: left;
      width: 100%;
      transition: border-color 0.15s ease, background 0.15s ease;
    }
    .option:hover { border-color: var(--color-accent); }
    .option.selected {
      border-color: var(--color-accent);
      background: var(--color-accent-soft);
    }
    .option-text {
      flex: 1;
      line-height: 1.3;
    }
    .option .radio-dot {
      width: 16px;
      height: 16px;
      border: 1px solid var(--color-border-input);
      border-radius: 50%;
      flex-shrink: 0;
      transition: background 0.15s ease, border-color 0.15s ease;
    }
    .option.selected .radio-dot {
      background: var(--color-accent);
      border-color: var(--color-accent);
      position: relative;
    }
    .option.selected .radio-dot::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 6px;
      height: 6px;
      background: white;
      border-radius: 50%;
    }

    /* ============ CAMPOS ============ */
    .field-group { margin-bottom: 14px; }
    .field-label {
      font-size: 12px;
      color: var(--color-text-primary);
      display: block;
      margin-bottom: 6px;
      font-weight: 600;
      letter-spacing: 0.2px;
      text-transform: uppercase;
    }
    .field-input {
      width: 100%;
      background: var(--color-bg-input);
      border: 1px solid var(--color-border-input);
      border-radius: var(--radius-md);
      padding: 13px 14px;
      font-size: 15px;
      color: var(--color-text-primary);
      font-family: var(--font-sans);
      outline: none;
      transition: border-color 0.15s ease;
    }
    .field-input::placeholder { color: var(--color-text-placeholder); }
    .field-input:focus { border-color: var(--color-accent); }

    /* ============ CONSENTIMIENTO ============ */
    .consent {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin-top: 6px;
      margin-bottom: 14px;
      cursor: pointer;
    }
    .consent input[type="checkbox"] {
      width: 16px;
      height: 16px;
      margin-top: 2px;
      cursor: pointer;
      accent-color: var(--color-accent);
      flex-shrink: 0;
    }
    .consent-text {
      font-size: 11px;
      color: var(--color-text-secondary);
      line-height: 1.5;
    }

    /* ============ CTA ============ */
    .cta {
      background: var(--color-accent);
      border: 2px solid var(--color-accent-border);
      color: white;
      border-radius: var(--radius-md);
      padding: 14px;
      font-size: 15px;
      font-weight: 600;
      font-family: var(--font-sans);
      cursor: pointer;
      width: 100%;
      transition: background 0.15s ease;
    }
    .cta:hover { background: var(--color-accent-hover); }
    .cta:active { transform: scale(0.99); }

    .cta-meta {
      text-align: center;
      font-size: 11px;
      color: var(--color-text-muted);
      margin-top: 8px;
    }

    /* ============ LOADING PAGE ============ */
    .loading-screen {
      text-align: center;
      padding: 30px 16px;
    }
    .loading-spinner {
      width: 56px;
      height: 56px;
      border: 4px solid var(--color-accent-soft);
      border-top-color: var(--color-accent);
      border-radius: 50%;
      animation: spin 0.9s linear infinite;
      margin: 0 auto 20px;
    }
    @keyframes spin {
      to { transform: rotate(360deg); }
    }
    .loading-message {
      font-size: 16px;
      font-weight: 600;
      color: var(--color-text-primary);
      margin-bottom: 8px;
      min-height: 22px;
      transition: opacity 0.3s ease;
    }
    .loading-sub {
      font-size: 13px;
      color: var(--color-text-muted);
    }

    /* ============ THANK YOU ============ */
    .thank-you { padding: 8px 4px; }

    .thank-success-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: var(--color-success-soft);
      color: var(--color-success);
      padding: 6px 12px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 600;
      margin-bottom: 14px;
    }

    .thank-headline {
      font-size: 19px;
      font-weight: 700;
      color: var(--color-text-primary);
      line-height: 1.3;
      margin-bottom: 16px;
    }

    .insurer-box {
      background: var(--color-accent-soft);
      border: 1px solid var(--color-accent);
      border-radius: var(--radius-md);
      padding: 18px;
      margin-bottom: 20px;
      text-align: center;
    }
    .insurer-label {
      font-size: 11px;
      color: var(--color-text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      font-weight: 600;
      margin-bottom: 6px;
    }
    .insurer-name {
      font-size: 26px;
      font-weight: 700;
      color: var(--color-accent);
      letter-spacing: -0.5px;
      margin-bottom: 6px;
    }
    .insurer-description {
      font-size: 13px;
      color: var(--color-text-secondary);
      line-height: 1.5;
    }

    .next-steps-title {
      font-size: 14px;
      font-weight: 600;
      color: var(--color-text-primary);
      margin-bottom: 14px;
    }

    .timeline {
      position: relative;
      padding-left: 32px;
    }
    .timeline::before {
      content: '';
      position: absolute;
      left: 11px;
      top: 12px;
      bottom: 12px;
      width: 2px;
      background: var(--color-bg-soft);
    }
    .timeline-step {
      position: relative;
      padding-bottom: 18px;
    }
    .timeline-step:last-child {
      padding-bottom: 0;
    }
    .timeline-marker {
      position: absolute;
      left: -32px;
      top: 0;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: white;
      border: 2px solid var(--color-bg-soft);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 700;
      color: var(--color-text-muted);
      z-index: 1;
    }
    .timeline-step.completed .timeline-marker {
      background: var(--color-success);
      border-color: var(--color-success);
      color: white;
    }
    .timeline-step.current .timeline-marker {
      background: var(--color-accent);
      border-color: var(--color-accent);
      color: white;
    }
    .timeline-content {
      font-size: 13px;
      color: var(--color-text-primary);
    }
    .timeline-content strong {
      display: block;
      font-weight: 600;
      margin-bottom: 2px;
    }
    .timeline-content span {
      color: var(--color-text-secondary);
      font-size: 12px;
    }

    .error {
      color: #ca0c0c;
    }

    /* modal */
    .modal-content .modal-title {
      background-color: #000;
      width: 100%;
      text-align: center;
      padding: 30px;
      z-index: 0;
    }
    .modal-content .btn-close {
      position: absolute;
      right: 0;
      top: 0;
      opacity: 1;
      background-image: url('../images/modal-close.png');
      background-repeat: no-repeat;
      background-size: cover;
      height: 35px;
      width: 35px;
      z-index: 1;
    }
    .spinner-border {
      width: 1rem;
      height: 1rem;
    }

    /* ============ FOOTER LEGAL CON TRUST INTEGRADO ============ */
    .footer-legal {
      background: var(--color-footer-bg);
      color: var(--color-text-footer);
      padding: 20px;
      text-align: center;
    }
    .footer-trust {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px 18px;
      margin-bottom: 14px;
      padding-bottom: 14px;
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    .footer-trust-item {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: var(--color-text-footer);
    }
    .footer-trust-item svg { flex-shrink: 0; }
    .footer-links {
      font-size: 12px;
      color: var(--color-text-footer);
    }
    .footer-links a {
      color: var(--color-text-footer);
      text-decoration: none;
      margin: 0 6px;
    }
    .footer-links a:hover { text-decoration: underline; }

    /* ============================================================
       RESPONSIVE DESKTOP
       ============================================================ */
    @media (min-width: 768px) {
      .main {
        padding: 32px 24px;
      }
      .container {
        max-width: 560px;
      }
      .intro {
        display: block;
        margin-bottom: 24px;
      }
      .intro h1 {
        font-size: 28px;
      }
      .intro p {
        font-size: 15px;
      }
      .card {
        padding: 32px 36px;
      }
      .step-title {
        font-size: 22px;
      }
      .step-help {
        font-size: 13px;
      }
      .option {
        padding: 14px 16px;
        font-size: 15px;
      }
      .field-input {
        padding: 14px 16px;
      }
      .cta {
        padding: 16px;
        font-size: 16px;
      }
      .insurer-name { font-size: 32px; }
      .thank-headline { font-size: 22px; }
    }