/* ==========================================
       VARIABLES CSS
       ========================================== */
    :root {
      /* Colores principales */
      --color-primary: #FF9500;
      --color-secondary: #FFC107;
      --color-text: #1A1A1A;
      --color-text-medium: #333;
      --color-text-light: #555;
      --color-text-lighter: #666;
      --color-text-lightest: #888;
      --color-border: #E0E0E0;
      --color-border-light: #DCDCDC;
      --color-background: #F9F9F9;
      --color-background-light: #FFF8F0;
      --color-error: #CC0000;
      --color-error-bg: #FFE5E5;
      --color-success: #00AA00;
      
      /* Espaciado */
      --spacing-xs: 8px;
      --spacing-sm: 12px;
      --spacing-md: 15px;
      --spacing-lg: 20px;
      --spacing-xl: 25px;
      --spacing-xxl: 30px;
      
      /* Border radius */
      --radius-sm: 8px;
      --radius-md: 12px;
      --radius-lg: 20px;
      --radius-xl: 25px;
      --radius-pill: 50px;
      
      /* Sombras */
      --shadow-sm: 0 4px 15px rgba(0, 0, 0, 0.1);
      --shadow-md: 0 6px 20px rgba(255, 149, 0, 0.3);
      --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.15);
      --shadow-primary: 0 6px 25px rgba(255, 149, 0, 0.4);
      
      /* Transiciones */
      --transition-fast: all 0.2s ease;
      --transition: all 0.3s ease;
      --transition-slow: all 0.5s ease;
      
      /* Fuentes */
      --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      --font-size-xs: 0.75em;
      --font-size-sm: 0.85em;
      --font-size-base: 1em;
      --font-size-lg: 1.1em;
      --font-size-xl: 1.5em;
    }

    /* ==========================================
       RESET Y BASE
       ========================================== */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: var(--font-family);
      margin: 0;
      background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
      color: var(--color-text);
      display: flex;
      flex-direction: column;
      align-items: center;
      min-height: 100vh;
      overflow-x: hidden;
      padding: var(--spacing-md);
      padding-bottom: 100px;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    /* ==========================================
       HEADER
       ========================================== */
    header {
      position: fixed;
      top: var(--spacing-md);
      left: var(--spacing-md);
      display: flex;
      align-items: center;
      gap: 10px;
      z-index: 100;
      background: rgba(255, 255, 255, 0.95);
      padding: 8px 16px;
      border-radius: var(--radius-pill);
      box-shadow: var(--shadow-sm);
      backdrop-filter: blur(10px);
    }

    header img {
      height: 40px;
      width: auto;
    }

    /* ==========================================
       PROGRESS BAR
       ========================================== */
    .progress-container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 4px;
      background: rgba(255, 255, 255, 0.3);
      z-index: 101;
    }

    .progress-bar {
      height: 100%;
      background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
      width: 0%;
      transition: width 0.4s ease;
      box-shadow: 0 0 10px rgba(255, 149, 0, 0.5);
    }

    /* ==========================================
       CONTENEDOR PRINCIPAL
       ========================================== */
    .form-wrapper {
      max-width: 550px;
      width: 100%;
      margin-top: 90px;
      position: relative;
    }

    /* Botón de volver (macro: paso → paso anterior)
   2026-07-03: reposicionado como ESPEJO del logo del header.
   Logo: position: fixed; top: var(--spacing-md); left: var(--spacing-md);
   Botón: position: fixed; top: var(--spacing-md); right: var(--spacing-md);
   Mismo Y que el logo, misma "pastilla" blanca + borde naranja. */
    .back-button {
      background: rgba(255, 255, 255, 0.95);
      border: 2px solid var(--color-primary);
      color: var(--color-primary);
      padding: 8px 16px;
      border-radius: var(--radius-pill);
      font-size: var(--font-size-sm);
      font-weight: 600;
      cursor: pointer;
      transition: var(--transition);
      display: none;
      align-items: center;
      gap: var(--spacing-xs);
      width: auto;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
      font-family: var(--font-family);
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      position: fixed;
      top: var(--spacing-md);
      right: var(--spacing-md);
      z-index: 100;
    }

    .back-button:hover {
      background: var(--color-primary);
      color: white;
      transform: translateX(-3px);
      box-shadow: var(--shadow-md);
    }

    .back-button:active {
      transform: translateX(-1px);
    }

    .back-button:focus {
      outline: 2px solid var(--color-primary);
      outline-offset: 2px;
    }

    .back-button.show {
      display: inline-flex;
    }

    .container {
      background: #fff;
      width: 100%;
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-lg);
      padding: var(--spacing-xxl) var(--spacing-lg);
      text-align: center;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      animation: slideUp 0.5s ease;
    }

    @keyframes slideUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* ==========================================
       TIPOGRAFÍA
       ========================================== */
    h2 {
      color: var(--color-primary);
      margin-bottom: var(--spacing-md);
      font-size: var(--font-size-xl);
      line-height: 1.3;
      font-weight: 600;
    }

    .question {
      margin-bottom: var(--spacing-xl);
      font-size: var(--font-size-lg);
      font-weight: 600;
      color: var(--color-text-medium);
      line-height: 1.4;
    }

    .step > p {
      line-height: 1.6;
      color: var(--color-text-medium);
      margin-bottom: var(--spacing-lg);
      font-size: var(--font-size-sm);
    }

    /* ==========================================
       OPCIONES Y BOTONES
       ========================================== */
    .options {
      display: grid;
      gap: var(--spacing-sm);
    }

    .option {
      background: var(--color-background-light);
      border: 3px solid var(--color-secondary);
      border-radius: var(--radius-md);
      padding: 16px;
      cursor: pointer;
      transition: var(--transition);
      font-weight: 500;
      font-size: var(--font-size-base);
      position: relative;
      overflow: hidden;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      min-height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      font-family: var(--font-family);
    }

    .option::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 193, 7, 0.3), transparent);
      transition: left 0.5s ease;
    }

    .option:hover::before {
      left: 100%;
    }

    .option:hover {
      background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
      color: white;
      border-color: var(--color-primary);
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
    }

    .option:focus {
      outline: 2px solid var(--color-primary);
      outline-offset: 2px;
    }

    .option.selected {
      background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
      color: white;
      border-color: var(--color-primary);
      transform: scale(1.01);
      box-shadow: var(--shadow-primary);
    }

    /* Grid de logos */
    .logos-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--spacing-sm);
    }

    .logos-grid .option {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 110px;
      padding: var(--spacing-sm) var(--spacing-xs);
    }

    .logos-grid img {
      width: 65px;
      height: auto;
      max-width: 100%;
      display: block;
      margin-bottom: var(--spacing-xs);
      filter: grayscale(100%);
      transition: filter 0.3s ease;
      object-fit: contain;
    }

    .logos-grid .option:hover img,
    .logos-grid .option.selected img {
      filter: grayscale(0%) brightness(1.2);
    }

    /* ==========================================
       FORMULARIOS
       ========================================== */
    .hidden {
      display: none;
    }

    label {
      display: block;
      text-align: left;
      font-weight: 500;
      margin-bottom: var(--spacing-xs);
      color: var(--color-text-medium);
      font-size: var(--font-size-sm);
    }

    label .required {
      color: var(--color-error);
      font-weight: 700;
    }

    input, select {
      width: 100%;
      padding: 14px 16px;
      border: 2px solid var(--color-border);
      border-radius: var(--radius-md);
      margin-bottom: var(--spacing-md);
      font-size: 16px;
      font-family: var(--font-family);
      transition: var(--transition);
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      background: white;
    }

    input:focus, select:focus {
      outline: none;
      border-color: var(--color-primary);
      box-shadow: 0 0 0 3px rgba(255, 149, 0, 0.1);
    }

    input:invalid:not(:placeholder-shown) {
      border-color: var(--color-error);
    }

    input.error {
      border-color: var(--color-error);
      background: var(--color-error-bg);
    }

    .input-helper {
      display: block;
      font-size: var(--font-size-sm);
      color: var(--color-text-lightest);
      margin-top: -10px;
      margin-bottom: var(--spacing-sm);
      text-align: left;
    }

    /* ==========================================
       CHECKBOX DE PRIVACIDAD - CORREGIDO
       ========================================== */
    .privacy-checkbox {
      display: flex;
      align-items: flex-start;
      gap: var(--spacing-sm);
      margin: var(--spacing-lg) 0;
      text-align: left;
      padding: 16px;
      background: var(--color-background);
      border-radius: 10px;
      border: 1px solid var(--color-border-light);
      transition: var(--transition);
    }

    .privacy-checkbox:has(input:focus) {
      border-color: var(--color-primary);
      background: var(--color-background-light);
      box-shadow: 0 0 0 2px rgba(255, 149, 0, 0.08);
    }

    .privacy-checkbox:has(input:checked) {
      border-color: var(--color-primary);
      background: #FFFBF5;
      box-shadow: 0 2px 8px rgba(255, 149, 0, 0.15);
    }

    .privacy-checkbox input[type="checkbox"] {
      width: 20px;
      height: 20px;
      min-width: 20px;
      min-height: 20px;
      margin: 0;
      margin-top: 2px;
      cursor: pointer;
      flex-shrink: 0;
      accent-color: var(--color-primary);
      border-radius: 4px;
      border: 2px solid var(--color-border);
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      background-color: white;
      position: relative;
      transition: var(--transition);
    }

    .privacy-checkbox input[type="checkbox"]:checked {
      background-color: var(--color-primary);
      border-color: var(--color-primary);
    }

    .privacy-checkbox input[type="checkbox"]:checked::after {
      content: '✓';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white;
      font-size: 14px;
      font-weight: bold;
    }

    .privacy-checkbox input[type="checkbox"]:focus {
      outline: 2px solid var(--color-primary);
      outline-offset: 2px;
    }

    .privacy-checkbox label {
      margin: 0;
      font-size: var(--font-size-sm);
      line-height: 1.65;
      color: var(--color-text-light);
      cursor: pointer;
      font-weight: 400;
      word-wrap: break-word;
      overflow-wrap: break-word;
    }

    .privacy-checkbox label strong {
      color: var(--color-text-medium);
      font-weight: 600;
    }

    /* CORREGIDO: Convertido de <a> a <button> */
    .privacy-checkbox .link-like {
      color: var(--color-text-lighter);
      text-decoration: underline;
      text-decoration-color: #CCC;
      font-weight: 400;
      cursor: pointer;
      background: none;
      border: none;
      padding: 0;
      font-size: inherit;
      font-family: inherit;
      transition: var(--transition);
      display: inline;
      line-height: inherit;
    }

    .privacy-checkbox .link-like:hover {
      color: var(--color-primary);
      text-decoration-color: var(--color-primary);
    }

    .privacy-checkbox .link-like:focus {
      outline: 2px solid var(--color-primary);
      outline-offset: 2px;
      border-radius: 2px;
      color: var(--color-primary);
    }

    /* Información adicional RGPD */
    .privacy-info {
      margin-top: var(--spacing-md);
      padding: var(--spacing-md);
      background: #F0F8FF;
      border-left: 4px solid var(--color-primary);
      border-radius: var(--radius-sm);
      font-size: var(--font-size-sm);
      color: var(--color-text-light);
      text-align: left;
      line-height: 1.6;
    }

    .privacy-info p {
      margin: 0;
    }

    .privacy-info strong {
      color: var(--color-text-medium);
      font-weight: 600;
    }

    .privacy-info a,
    .privacy-info button {
      color: var(--color-primary);
      text-decoration: underline;
      transition: var(--transition);
      background: none;
      border: none;
      padding: 0;
      font-size: inherit;
      font-family: inherit;
      cursor: pointer;
    }

    .privacy-info a:hover,
    .privacy-info button:hover {
      color: var(--color-secondary);
    }

    /* ==========================================
       MODAL
       ========================================== */
    .modal {
      display: none;
      position: fixed;
      z-index: 1000;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(5px);
      animation: fadeIn 0.3s ease;
    }

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    .modal.show {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: var(--spacing-lg);
    }

    .modal-content {
      background-color: #fff;
      border-radius: var(--radius-lg);
      padding: var(--spacing-xxl);
      max-width: 700px;
      width: 100%;
      max-height: 85vh;
      overflow-y: auto;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
      animation: slideInModal 0.4s ease;
      position: relative;
    }

    @keyframes slideInModal {
      from {
        opacity: 0;
        transform: translateY(-50px) scale(0.9);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    .modal-content h2 {
      color: var(--color-primary);
      margin-bottom: var(--spacing-lg);
      font-size: 1.6em;
      padding-right: 40px;
    }

    .modal-content h3 {
      color: var(--color-text-medium);
      margin-top: var(--spacing-xl);
      margin-bottom: var(--spacing-sm);
      font-size: 1.1em;
    }

    .modal-content p,
    .modal-content ul {
      color: var(--color-text-light);
      line-height: 1.7;
      margin-bottom: var(--spacing-md);
      font-size: var(--font-size-sm);
      text-align: left;
    }

    .modal-content ul {
      padding-left: var(--spacing-lg);
    }

    .modal-content li {
      margin-bottom: var(--spacing-xs);
    }

    .modal-content strong {
      color: var(--color-text-medium);
      font-weight: 600;
    }

    .modal-content a {
      color: var(--color-primary);
      text-decoration: underline;
    }

    .close-modal {
      position: absolute;
      top: var(--spacing-lg);
      right: var(--spacing-lg);
      color: #999;
      font-size: 32px;
      font-weight: bold;
      cursor: pointer;
      transition: var(--transition);
      line-height: 1;
      width: 35px;
      height: 35px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: #F0F0F0;
      border: none;
      padding: 0;
      font-family: inherit;
    }

    .close-modal:hover,
    .close-modal:focus {
      color: var(--color-primary);
      background: #FFE5CC;
    }

    /* ==========================================
       BOTONES
       ========================================== */
    button {
      background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
      color: black;
      border: none;
      border-radius: var(--radius-md);
      padding: var(--spacing-md) var(--spacing-xl);
      font-size: 1.05em;
      font-weight: 600;
      cursor: pointer;
      width: 100%;
      transition: var(--transition);
      font-family: var(--font-family);
      box-shadow: var(--shadow-sm);
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      min-height: 50px;
    }

    button:hover:not(:disabled) {
      transform: translateY(-2px);
      box-shadow: var(--shadow-primary);
    }

    button:active:not(:disabled) {
      transform: translateY(0);
    }

    button:focus {
      outline: 2px solid var(--color-primary);
      outline-offset: 2px;
    }

    button:disabled {
      opacity: 0.6;
      cursor: not-allowed;
      transform: none;
    }

    /* ==========================================
       MENSAJES Y NOTIFICACIONES
       ========================================== */
    .thanks {
      font-size: 1.2em;
      color: var(--color-primary);
      font-weight: 600;
      margin-top: var(--spacing-lg);
      line-height: 1.6;
    }

    .security-note {
      margin-top: var(--spacing-lg);
      padding: 14px;
      background: #F0F8FF;
      border-left: 4px solid var(--color-primary);
      border-radius: var(--radius-sm);
      font-size: var(--font-size-sm);
      color: var(--color-text-light);
      text-align: left;
      line-height: 1.5;
    }

    .error-message {
      background: var(--color-error-bg);
      border-left: 4px solid var(--color-error);
      padding: var(--spacing-sm);
      margin: var(--spacing-md) 0;
      border-radius: var(--radius-sm);
      color: var(--color-error);
      font-size: var(--font-size-sm);
      line-height: 1.4;
      text-align: left;
    }

    /* ==========================================
       CLOUDFLARE TURNSTILE
       ========================================== */
    .cf-turnstile {
      display: flex;
      justify-content: center;
      margin: var(--spacing-lg) 0;
      transform: scale(0.95);
      transform-origin: center;
    }

    /* ==========================================
       LOADING SPINNER
       ========================================== */
    .loading {
      display: inline-block;
      width: 20px;
      height: 20px;
      border: 3px solid rgba(255, 255, 255, 0.3);
      border-radius: 50%;
      border-top-color: white;
      animation: spin 0.8s linear infinite;
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    /* ==========================================
       FOOTER
       ========================================== */
    footer {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      padding: var(--spacing-sm) var(--spacing-md);
      box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
      z-index: 100;
    }

    .footer-content {
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: var(--spacing-xs);
      font-size: var(--font-size-xs);
      color: var(--color-text-lighter);
    }

    .footer-links {
      display: flex;
      gap: var(--spacing-sm);
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
    }

    .footer-links a {
      color: var(--color-text-lighter);
      text-decoration: none;
      transition: var(--transition);
      font-weight: 500;
      padding: 4px 0;
      -webkit-tap-highlight-color: transparent;
    }

    .footer-links a:hover {
      color: var(--color-primary);
    }

    .footer-links a:focus {
      outline: 2px solid var(--color-primary);
      outline-offset: 2px;
      border-radius: 4px;
    }

    .footer-separator {
      color: #DDD;
      display: none;
    }

    .copyright {
      color: #999;
      font-size: 0.95em;
    }

    /* ==========================================
       MEDIA QUERIES - MOBILE FIRST
       ========================================== */
    
    @media (max-width: 375px) {
      body {
        padding: 10px;
        padding-bottom: 100px;
      }

      .form-wrapper {
        margin-top: 80px;
      }

      .container {
        padding: var(--spacing-xl) var(--spacing-md);
        border-radius: 16px;
      }

      h2 {
        font-size: 1.35em;
      }

      .question {
        font-size: 1.05em;
        margin-bottom: var(--spacing-lg);
      }

      .logos-grid img {
        width: 55px;
      }

      .logos-grid .option {
        min-height: 95px;
        padding: 10px 6px;
        font-size: var(--font-size-sm);
      }

      input, select {
        padding: var(--spacing-sm) 14px;
        font-size: 16px;
      }

      button {
        padding: 14px var(--spacing-lg);
        font-size: var(--font-size-base);
      }

      header {
        top: 10px;
        left: 10px;
        padding: 6px var(--spacing-sm);
      }

      header img {
        height: 35px;
      }

      .back-button {
        padding: var(--spacing-xs) 14px;
        font-size: var(--font-size-sm);
      }
    }

    @media (min-width: 600px) {
      body {
        padding: var(--spacing-xl);
        padding-bottom: 90px;
      }

      header {
        top: var(--spacing-lg);
        left: var(--spacing-lg);
        padding: 10px var(--spacing-lg);
      }

      header img {
        height: 50px;
      }

      .form-wrapper {
        margin-top: 120px;
      }

      .container {
        padding: 40px 35px;
        border-radius: var(--radius-xl);
      }

      h2 {
        font-size: 1.8em;
      }

      .question {
        font-size: 1.25em;
        margin-bottom: var(--spacing-xxl);
      }

      .step > p {
        font-size: var(--font-size-base);
      }

      .options {
        gap: var(--spacing-md);
      }

      .option {
        padding: 18px;
        font-size: 1.05em;
      }

      .logos-grid {
        gap: var(--spacing-md);
      }

      .logos-grid .option {
        min-height: 120px;
        padding: var(--spacing-md);
      }

      .logos-grid img {
        width: 80px;
        margin-bottom: 10px;
      }

      .back-button {
        padding: 10px var(--spacing-lg);
        font-size: var(--font-size-sm);
      }

      .thanks {
        font-size: 1.4em;
      }

      footer {
        padding: var(--spacing-md) var(--spacing-lg);
      }

      .footer-content {
        flex-direction: row;
        font-size: var(--font-size-sm);
        gap: var(--spacing-md);
      }

      .footer-separator {
        display: inline;
      }

      .cf-turnstile {
        transform: scale(1);
      }
    }

    @media (min-width: 1024px) {
      .option:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(255, 149, 0, 0.3);
      }

      button:hover:not(:disabled) {
        transform: translateY(-2px);
      }
    }

    @media (max-height: 500px) and (orientation: landscape) {
      .form-wrapper {
        margin-top: 70px;
      }

      .container {
        padding: var(--spacing-lg);
      }

      h2 {
        font-size: 1.3em;
        margin-bottom: 10px;
      }

      .question {
        font-size: var(--font-size-base);
        margin-bottom: var(--spacing-md);
      }

      .step > p {
        margin-bottom: var(--spacing-sm);
      }

      .options {
        gap: 10px;
      }

      .option {
        padding: var(--spacing-sm);
      }

      .security-note {
        margin-top: var(--spacing-md);
        padding: 10px;
      }
    }

    /* ==========================================
       ACCESIBILIDAD
       ========================================== */
    
    /* Preferencia de movimiento reducido */
    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
    }

    /* Mejora de contraste en modo alto contraste */
    @media (prefers-contrast: high) {
      .option {
        border-width: 4px;
      }

      input, select {
        border-width: 3px;
      }
    }

    /* Skip to main content link (accesibilidad) */
    .skip-link {
      position: absolute;
      top: -40px;
      left: 0;
      background: var(--color-primary);
      color: white;
      padding: var(--spacing-xs);
      text-decoration: none;
      z-index: 1000;
    }

    .skip-link:focus {
      top: 0;
    }

    /* Screen reader only content */
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border-width: 0;
    }

/* ============================================
   MULTI-STEP FORM (Step 5: 4 sub-pasos minimalistas)
   2026-07-03: simplificado — sin indicator de progreso de dots,
   sin microcopys. Cada sub-paso tiene el mismo diseño homogéneo:
   título + input + botón Siguiente (o submit en el último).
   Tracking granular para Meta Pixel/GTM se mantiene (JS).
   ============================================ */

/* Panel de cada sub-paso (diseño homogéneo entre los 4) */
.substep-panel {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md, 15px);
}

/* Animación aplicada al <form> del sub-paso (que es lo que se muestra/oculta).
   Antes la animación estaba en .substep-panel pero como ahora cada panel vive
   dentro de su propio <form>, el form es quien recibe la clase .hidden. */
.substep-form {
  animation: substep-fade-in 0.3s ease;
  display: block;
}

.substep-form.hidden {
  display: none;
}

@keyframes substep-fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Inputs dentro de sub-step (mismo estilo que antes, refinado) */
.substep-panel input[type="text"],
.substep-panel input[type="email"],
.substep-panel input[type="tel"] {
  font-size: 1.05rem;
  padding: 14px 16px;
  border: 2px solid var(--color-border, #d0d0d0);
  border-radius: 8px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.substep-panel input[type="text"]:focus,
.substep-panel input[type="email"]:focus,
.substep-panel input[type="tel"]:focus {
  outline: none;
  border-color: var(--color-primary, #FF9500);
  box-shadow: 0 0 0 3px rgba(255, 149, 0, 0.15);
}

/* Estado validado OK en blur */
.substep-panel input.valid {
  border-color: #2ecc71;
  background: rgba(46, 204, 113, 0.04);
}

/* Estado con error */
.substep-panel input.error {
  border-color: #e74c3c;
  background: rgba(231, 76, 60, 0.04);
}

/* Botón "Continuar →" (sub-pasos 5.1 / 5.2 / 5.3) */
.btn-continuar {
  background: var(--color-primary, #FF9500);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 14px 24px;
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease, opacity 0.2s ease;
  margin-top: var(--spacing-xs, 8px);
  align-self: stretch;
}

.btn-continuar:hover:not(:disabled) {
  background: #e68600;
  transform: translateY(-1px);
}

.btn-continuar:active:not(:disabled) {
  transform: translateY(0);
}

.btn-continuar:disabled {
  background: var(--color-bg-alt, #d0d0d0);
  cursor: not-allowed;
  opacity: 0.7;
}

/* Botón "← Atrás" (sub-step navigation).
   2026-07-03: posicionado DEBAJO del .back-button (mismo right, top: 65px).
   Apilados verticalmente en la esquina superior derecha, ambos como
   "pastillas" blancas con border-radius pill. Solo aparece dentro de
   step-5 (su display:none oculta todo el botón). */
.btn-back-substep {
  background: rgba(255, 255, 255, 0.95);
  border: none;
  color: var(--color-text-muted, #555);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  position: fixed;
  top: 65px;
  right: var(--spacing-md);
  z-index: 100;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.btn-back-substep:hover:not([disabled]) {
  background: var(--color-bg-alt, #f0f0f0);
  color: var(--color-text, #222);
  transform: translateX(-2px);
}

.btn-back-substep[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Botón submit final (sub-step 5.4) — más prominente */
#submitBtn {
  background: var(--color-primary, #FF9500);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 16px 28px;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease, opacity 0.2s ease;
  margin-top: var(--spacing-sm, 12px);
  align-self: stretch;
  letter-spacing: 0.02em;
}

#submitBtn:hover:not(:disabled) {
  background: #e68600;
  transform: translateY(-1px);
}

#submitBtn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Checkbox privacidad en sub-step 5.4 */
.substep-panel .privacy-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: var(--spacing-sm, 12px) 0;
  padding: 12px;
  background: var(--color-bg-alt, #f8f8f8);
  border-radius: 8px;
}

.substep-panel .privacy-checkbox input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
}

.substep-panel .privacy-checkbox label {
  font-size: 0.9rem;
  line-height: 1.4;
  cursor: pointer;
}

.substep-panel .privacy-checkbox label a {
  color: var(--color-primary, #FF9500);
  text-decoration: underline;
}

/* Turnstile container en sub-step 5.4 */
#turnstile-container {
  display: flex;
  justify-content: center;
  margin: var(--spacing-sm, 12px) 0;
  min-height: 65px;
}

/* Mobile-first refinements (pantallas pequeñas) */
@media (max-width: 480px) {
  .btn-continuar,
  #submitBtn {
    padding: 14px 18px;
    font-size: 1rem;
  }

  .btn-back-substep {
    font-size: 0.85rem;
    padding: 6px 12px;
    top: 55px;
    right: var(--spacing-sm, 12px);
  }
}