*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  :root {
    --teal-dk:  #1A5F6E;
    --teal-md:  #2A8FA3;
    --teal-lt:  #5BC4D8;
    --teal-bg:  #EAF6F9;
    --teal-brd: #B8E0E8;
    --ink:      #2E2E2E;
    --ink-mid:  #5A5A5A;
    --ink-lt:   #8A8A8A;
    --border:   #D8E2E5;
    --bg:       #F4F8F9;
    --white:    #FFFFFF;
    --header-bg:#F5F6F7;
    --header-br:#E0E3E6;
    --green:    #1A7A4E;
    --green-lt: #E4F4ED;
    --red:      #C0392B;
    --radius:   8px;
    --shadow:   0 2px 12px rgba(26,95,110,.1);
    --shadow-lg:0 8px 32px rgba(26,95,110,.16);
  }
  html { scroll-behavior: smooth; }
  body { font-family:'Inter',sans-serif; background:var(--bg); color:var(--ink); line-height:1.6; font-size:15px; min-height:100vh; }

  /* HEADER */
  .site-header {
    background: var(--header-bg);
    border-bottom: 1px solid var(--header-br);
    padding: 0 2.5rem;
    display: flex; align-items: center; justify-content: space-between;
    height: 72px; position: sticky; top: 0; z-index: 100;
    box-shadow: 0 1px 6px rgba(0,0,0,.07);
  }
  .logo { display:flex; align-items:center; cursor:pointer; }
  .logo img { height: 12vh; width: auto; }
  .header-right { display:flex; align-items:center; gap:16px; }
  .header-divider { width:1px; height:28px; background:var(--header-br); }
  .header-tag { color:var(--ink-lt); font-size:12px; font-weight:500; letter-spacing:.8px; }

  /* HERO */
  .hero {
    background: linear-gradient(135deg, var(--teal-dk) 0%, var(--teal-md) 60%, var(--teal-lt) 100%);
    padding: 56px 2rem 72px; text-align:center; position:relative; overflow:hidden;
  }
  .hero::after { content:''; position:absolute; bottom:0; left:0; right:0; height:4px; background:rgba(255,255,255,.2); }
  .hero-eyebrow { font-size:11px; font-weight:600; letter-spacing:2.5px; text-transform:uppercase; color:rgba(255,255,255,.75); margin-bottom:14px; }
  .hero h1 { font-size:clamp(26px,5vw,42px); font-weight:800; color:#fff; line-height:1.15; margin-bottom:14px; text-shadow:0 1px 4px rgba(0,0,0,.2); }
  .hero p { color:rgba(255,255,255,.82); font-size:16px; max-width:520px; margin:0 auto; }

  /* HOME CARDS */
  .portal-cards { display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:820px; margin:-40px auto 0; padding:0 2rem 56px; position:relative; z-index:10; }
  @media(max-width:640px){ .portal-cards{grid-template-columns:1fr;padding:0 1rem 40px;margin-top:-28px;} }
  .portal-card { background:var(--white); border-radius:12px; padding:32px 28px 28px; box-shadow:var(--shadow-lg); border:1px solid var(--border); cursor:pointer; transition:transform .18s,box-shadow .18s; text-align:left; position:relative; overflow:hidden; }
  .portal-card:hover { transform:translateY(-3px); box-shadow:0 16px 44px rgba(26,95,110,.2); }
  .portal-card::after { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,var(--teal-dk),var(--teal-lt)); }
  .portal-card.alt::after { background:linear-gradient(90deg,var(--green),#4CAF82); }
  .card-icon { width:48px; height:48px; border-radius:10px; background:var(--teal-bg); display:flex; align-items:center; justify-content:center; margin-bottom:20px; font-size:22px; }
  .portal-card.alt .card-icon { background:var(--green-lt); }
  .card-title { font-size:18px; font-weight:700; margin-bottom:8px; color:var(--ink); }
  .card-desc { color:var(--ink-mid); font-size:14px; line-height:1.6; margin-bottom:24px; }
  .card-cta { display:inline-flex; align-items:center; gap:8px; background:var(--teal-dk); color:#fff; border:none; border-radius:var(--radius); padding:10px 20px; font-size:14px; font-weight:600; cursor:pointer; font-family:inherit; transition:background .15s; }
  .portal-card.alt .card-cta { background:var(--green); }
  .card-cta:hover { background:#124952; }
  .portal-card.alt .card-cta:hover { background:#125c39; }
  .info-strip { background:var(--white); border-top:1px solid var(--border); padding:24px 2rem; display:flex; justify-content:center; gap:40px; flex-wrap:wrap; }
  .info-item { display:flex; align-items:center; gap:9px; color:var(--ink-mid); font-size:13px; }
  .info-dot { width:8px; height:8px; border-radius:50%; background:var(--teal-md); flex-shrink:0; }

  /* FORM VIEWS */
  .form-view { display:none; min-height:calc(100vh - 72px); }
  .form-view.active { display:flex; flex-direction:column; }
  .form-topbar { background:var(--white); border-bottom:1px solid var(--border); padding:14px 2rem; display:flex; align-items:center; gap:16px; }
  .back-btn { background:none; border:1px solid var(--border); border-radius:var(--radius); padding:6px 14px; font-size:13px; font-weight:500; color:var(--ink-mid); cursor:pointer; font-family:inherit; display:flex; align-items:center; gap:6px; transition:all .15s; }
  .back-btn:hover { border-color:var(--teal-md); color:var(--teal-dk); }
  .topbar-title { font-weight:700; font-size:16px; color:var(--ink); }
  .topbar-sub { font-size:13px; color:var(--ink-lt); margin-left:auto; }
  .progress-track { height:3px; background:var(--border); }
  .progress-fill { height:100%; background:linear-gradient(90deg,var(--teal-dk),var(--teal-lt)); transition:width .35s ease; }
  .progress-fill.alt { background:linear-gradient(90deg,var(--green),#4CAF82); }

  .form-layout { flex:1; display:grid; grid-template-columns:240px 1fr; max-width:1060px; margin:0 auto; width:100%; padding:32px 2rem; gap:28px; align-items:start; }
  @media(max-width:800px){ .form-layout{grid-template-columns:1fr;} }

  /* SIDEBAR */
  .step-sidebar { position:sticky; top:104px; }
  .sidebar-title { font-size:11px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink-lt); margin-bottom:14px; }
  .step-list { list-style:none; display:flex; flex-direction:column; gap:2px; }
  .step-item { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:var(--radius); transition:background .15s; }
  .step-item.active { background:var(--teal-bg); }
  .step-num { width:26px; height:26px; border-radius:50%; border:2px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:var(--ink-lt); flex-shrink:0; transition:all .2s; }
  .step-item.active .step-num { border-color:var(--teal-md); background:var(--teal-md); color:#fff; }
  .step-item.done .step-num { border-color:var(--green); background:var(--green); color:#fff; }
  .step-item.done .step-num span { display:none; }
  .step-item.done .step-num::after { content:'✓'; font-size:11px; }
  .step-label { font-size:13px; font-weight:500; color:var(--ink-mid); }
  .step-item.active .step-label { color:var(--teal-dk); font-weight:600; }

  /* PANEL */
  .form-panel { background:var(--white); border-radius:12px; border:1px solid var(--border); box-shadow:var(--shadow); overflow:hidden; }
  .panel-header { padding:22px 28px 18px; border-bottom:1px solid var(--border); }
  .panel-badge { font-size:11px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--teal-md); margin-bottom:5px; }
  .panel-title { font-size:20px; font-weight:700; color:var(--ink); }
  .panel-desc { font-size:14px; color:var(--ink-lt); margin-top:4px; }
  .panel-body { padding:26px 28px; }
  .panel-footer { padding:18px 28px; border-top:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--bg); }

  /* FIELDS */
  .field-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
  .field-row.full { grid-template-columns:1fr; }
  @media(max-width:600px){ .field-row{grid-template-columns:1fr;} }
  .field { display:flex; flex-direction:column; gap:6px; }
  .field label { font-size:13px; font-weight:600; color:var(--ink-mid); }
  .field label .req { color:var(--red); margin-left:2px; }
  .field input,.field select,.field textarea { border:1.5px solid var(--border); border-radius:var(--radius); padding:9px 12px; font-size:14px; font-family:inherit; color:var(--ink); background:var(--white); transition:border-color .15s,box-shadow .15s; outline:none; }
  .field input:focus,.field select:focus,.field textarea:focus { border-color:var(--teal-md); box-shadow:0 0 0 3px rgba(42,143,163,.12); }
  .field input.error,.field select.error,.field textarea.error { border-color:var(--red); }
  .field .hint { font-size:12px; color:var(--ink-lt); line-height:1.5; }
  .field .err-msg { font-size:12px; color:var(--red); display:none; }
  .field input.error~.err-msg,.field select.error~.err-msg,.field textarea.error~.err-msg { display:block; }
  .field textarea { resize:vertical; min-height:90px; }
  .field select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238A8A8A' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:36px; }

  /* QUANTITY ROWS */
  .qty-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; margin-bottom:6px; }
  @media(max-width:600px){ .qty-grid{grid-template-columns:1fr;} }
  .qty-label { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.8px; color:var(--ink-lt); margin-bottom:5px; }
  .qty-badge { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; padding:2px 7px; border-radius:10px; }
  .qty-badge.obl { background:#FEF3C7; color:#92400E; }
  .qty-badge.opt { background:var(--teal-bg); color:var(--teal-dk); }
  .qty-hint { font-size:12px; color:var(--ink-lt); line-height:1.5; margin-top:4px; padding:10px 12px; background:var(--teal-bg); border:1px solid var(--teal-brd); border-radius:var(--radius); }

  /* CHECKBOX */
  .checkbox-row { display:flex; align-items:flex-start; gap:10px; padding:11px 14px; border:1.5px solid var(--border); border-radius:var(--radius); cursor:pointer; transition:all .15s; margin-bottom:8px; }
  .checkbox-row:hover { border-color:var(--teal-md); background:var(--teal-bg); }
  .checkbox-row input[type="checkbox"] { width:16px; height:16px; accent-color:var(--teal-dk); flex-shrink:0; margin-top:2px; cursor:pointer; }
  .checkbox-row .cb-text { font-size:14px; color:var(--ink); line-height:1.4; }
  .checkbox-row .cb-sub { font-size:12px; color:var(--ink-lt); margin-top:2px; }

  /* RADIO */
  .radio-group { display:flex; flex-direction:column; gap:7px; }
  .radio-item { display:flex; align-items:center; gap:10px; cursor:pointer; padding:10px 14px; border:1.5px solid var(--border); border-radius:var(--radius); transition:all .15s; }
  .radio-item:hover { border-color:var(--teal-md); background:var(--teal-bg); }
  .radio-item input[type="radio"] { width:16px; height:16px; accent-color:var(--teal-dk); flex-shrink:0; }
  .radio-item span { font-size:14px; color:var(--ink); }

  /* CHIPS */
  .chip-group { display:flex; flex-wrap:wrap; gap:8px; }
  .chip { border:1.5px solid var(--border); border-radius:20px; padding:6px 14px; font-size:13px; cursor:pointer; transition:all .15s; background:var(--white); color:var(--ink-mid); }
  .chip.selected { border-color:var(--teal-dk); background:var(--teal-dk); color:#fff; }
  .chip:hover:not(.selected) { border-color:var(--teal-md); color:var(--teal-dk); }

  /* UPLOAD */
  .upload-zone { border:2px dashed var(--teal-brd); border-radius:var(--radius); padding:28px 20px; text-align:center; cursor:pointer; transition:all .15s; background:var(--teal-bg); }
  .upload-zone:hover,.upload-zone.drag-over { border-color:var(--teal-md); background:#D8EFF4; }
  .upload-zone-icon { font-size:28px; margin-bottom:8px; }
  .upload-zone p { font-size:14px; color:var(--ink-mid); margin-bottom:4px; }
  .upload-zone small { font-size:12px; color:var(--ink-lt); }
  .upload-zone input[type="file"] { display:none; }
  .file-list { margin-top:12px; display:flex; flex-direction:column; gap:6px; }
  .file-item { display:flex; align-items:center; gap:10px; padding:8px 12px; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); font-size:13px; color:var(--ink-mid); }
  .file-item .file-name { flex:1; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .file-item .file-size { font-size:12px; color:var(--ink-lt); flex-shrink:0; }
  .file-item .file-remove { background:none; border:none; cursor:pointer; color:var(--ink-lt); font-size:18px; padding:0 2px; line-height:1; transition:color .15s; }
  .file-item .file-remove:hover { color:var(--red); }

  /* RGPD */
  .rgpd-box { background:var(--teal-bg); border:1px solid var(--teal-brd); border-radius:var(--radius); padding:14px 16px; margin-bottom:14px; }
  .rgpd-box p { font-size:13px; color:var(--ink-mid); line-height:1.6; }
  .rgpd-box a { color:var(--teal-dk); }
  .check-privacy { display:flex; align-items:flex-start; gap:10px; cursor:pointer; padding:11px 14px; border:1.5px solid var(--border); border-radius:var(--radius); transition:all .15s; }
  .check-privacy:hover { border-color:var(--teal-md); background:var(--teal-bg); }
  .check-privacy input[type="checkbox"] { width:16px; height:16px; accent-color:var(--teal-dk); flex-shrink:0; margin-top:2px; }
  .check-privacy span { font-size:14px; color:var(--ink); line-height:1.4; }

  .section-divider { border:none; border-top:1px solid var(--border); margin:22px 0; }
  .section-label { font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--teal-dk); margin-bottom:12px; margin-top:22px; padding-bottom:6px; border-bottom:1px solid var(--teal-brd); }

  /* BUTTONS */
  .btn { padding:10px 24px; border-radius:var(--radius); font-size:14px; font-weight:600; cursor:pointer; font-family:inherit; transition:all .15s; display:inline-flex; align-items:center; gap:8px; border:none; }
  .btn-primary { background:var(--teal-dk); color:#fff; }
  .btn-primary:hover { background:#124952; }
  .btn-primary.alt { background:var(--green); }
  .btn-primary.alt:hover { background:#125c39; }
  .btn-secondary { background:var(--white); color:var(--ink-mid); border:1.5px solid var(--border); }
  .btn-secondary:hover { border-color:var(--teal-md); color:var(--teal-dk); }
  .step-counter { font-size:13px; color:var(--ink-lt); }

  /* REVIEW TABLE */
  .review-section-title { font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--teal-dk); padding:10px 0 8px; border-bottom:1px solid var(--teal-brd); margin-bottom:4px; margin-top:18px; }
  .review-section-title:first-child { margin-top:0; }
  .review-row { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; padding:9px 0; border-bottom:1px solid var(--border); font-size:14px; }
  .review-row:last-child { border-bottom:none; }
  .review-row .rl { color:var(--ink-lt); flex-shrink:0; min-width:140px; }
  .review-row .rv { font-weight:600; color:var(--ink); text-align:right; word-break:break-word; }

  /* SUCCESS */
  .success-screen { display:none; flex-direction:column; align-items:center; justify-content:center; min-height:calc(100vh - 72px); padding:2rem; text-align:center; }
  .success-screen.active { display:flex; }
  .success-icon { width:72px; height:72px; border-radius:50%; background:var(--teal-bg); border:2px solid var(--teal-brd); display:flex; align-items:center; justify-content:center; font-size:32px; margin-bottom:24px; }
  .success-id { font-family:'Courier New',monospace; font-size:13px; background:var(--teal-bg); border:1px solid var(--teal-brd); color:var(--teal-dk); padding:6px 16px; border-radius:20px; margin-bottom:16px; display:inline-block; font-weight:700; }
  .success-title { font-size:26px; font-weight:800; color:var(--ink); margin-bottom:10px; }
  .success-desc { font-size:15px; color:var(--ink-mid); max-width:480px; margin-bottom:28px; line-height:1.7; }
  .success-box { background:var(--white); border:1px solid var(--border); border-radius:10px; padding:20px 28px; text-align:left; max-width:500px; width:100%; margin-bottom:28px; }

  /* EMAIL PREVIEW (simulado) */
  .email-preview { background:var(--white); border:1px solid var(--border); border-radius:10px; max-width:500px; width:100%; margin-bottom:28px; overflow:hidden; text-align:left; }
  .email-header { background:var(--teal-dk); padding:14px 20px; }
  .email-header .e-label { font-size:10px; color:rgba(255,255,255,.6); text-transform:uppercase; letter-spacing:1px; }
  .email-header .e-to { color:#fff; font-size:14px; font-weight:600; margin-top:2px; }
  .email-header .e-subject { color:rgba(255,255,255,.8); font-size:12px; margin-top:4px; }
  .email-body { padding:16px 20px; font-size:13px; color:var(--ink-mid); line-height:1.7; }
  .email-body strong { color:var(--ink); }

  /* FOOTER */
  .site-footer { background:var(--ink); color:rgba(255,255,255,.4); text-align:center; padding:20px 2rem; font-size:12px; }
  .site-footer a { color:rgba(255,255,255,.5); }

  /* NOTIF */
  .notif { position:fixed; bottom:24px; right:24px; z-index:999; background:var(--teal-dk); color:#fff; padding:14px 20px; border-radius:10px; box-shadow:var(--shadow-lg); font-size:14px; display:flex; align-items:center; gap:10px; transform:translateY(80px); opacity:0; transition:all .3s; max-width:320px; }
  .notif.show { transform:translateY(0); opacity:1; }
  .notif.err { background:var(--red); }
  .err-inline { font-size:12px; color:var(--red); margin-top:6px; display:none; }

  /* LOADING OVERLAY */
  .loading-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

.loading-overlay.active {
    display: flex;
}

.loading-content {
    background: white;
    padding: 2rem 3rem;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.spinner {
    width: 48px;
    height: 48px;
    border: 5px solid #e0e0e0;
    border-top-color: #2c7be5;
    border-radius: 50%;
    margin: 0 auto 1rem;
    animation: spin 0.8s linear infinite;
}

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

.loading-content p {
    margin: 0;
    font-weight: 500;
    color: #333;
}