body { font-family: Arial, sans-serif; background: #FAFAF6; color: #1A1A18; overflow-x: hidden; cursor: default; }

    /* NAV fix */
    #navbar { background: #1A1A18 !important; }
    #navbar .nav-links a { color: #f5f2ec !important; }
    #navbar.scrolled { background: #1A1A18 !important; }
    #navbar:not(.scrolled) .nav-logo-img { filter: brightness(0) invert(1); }


    /* == HERO == */
    .ref-hero {
      background: url('../../fotos/referidos/inicio_referido.jpg') center/cover no-repeat;
      padding: clamp(100px, 14vw, 160px) 0 clamp(60px, 8vw, 100px);
      min-height: 100vh;
      display: flex;
      align-items: center;
      position: relative;
      overflow: hidden;
      text-align: center;
    }
    .ref-hero > .container { width: 100%; }
    .ref-hero::after {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(135deg, rgba(10,15,5,.82) 0%, rgba(20,40,8,.72) 100%);
      pointer-events: none;
    }
    .ref-hero-eyebrow {
      display: inline-flex; align-items: center; gap: 10px;
      font-size: .78rem; font-weight: 700; letter-spacing: .3em;
      text-transform: uppercase; color: #95BB30; margin-bottom: 18px;
    }
    .ref-hero-eyebrow::before, .ref-hero-eyebrow::after {
      content: ''; width: 28px; height: 1px; background: #95BB30; display: inline-block;
    }
    .ref-hero h1 {
      font-family: 'Arial Black', Arial, sans-serif;
      font-size: clamp(2.8rem, 7vw, 5.5rem);
      font-weight: 900; color: #fff; line-height: 1;
      letter-spacing: -.03em; margin: 0 0 20px;
      text-transform: uppercase; position: relative; z-index: 1;
    }
    .ref-hero h1 em {
      font-style: normal; color: #95BB30;
    }
    .ref-hero-sub {
      font-size: clamp(1rem, 2vw, 1.2rem); color: rgba(255,255,255,.65);
      max-width: 520px; margin: 0 auto 36px; line-height: 1.7;
      position: relative; z-index: 1;
    }
    .ref-hero-badge {
      display: inline-flex; align-items: center; gap: 10px;
      background: rgba(149,187,48,.15); border: 1px solid rgba(149,187,48,.35);
      backdrop-filter: blur(8px); color: #CEE632;
      font-family: Arial, sans-serif; font-size: .85rem; font-weight: 700;
      padding: 12px 24px; border-radius: 50px;
      position: relative; z-index: 1;
    }

    /* == PASOS == */
    .ref-pasos {
      padding: clamp(34px, 5vw, 60px) 0;
      background: #fff;
      border-top: 3px solid rgba(149,187,48,.13);
      border-bottom: 3px solid rgba(149,187,48,.13);
      position: relative;
      overflow: hidden;
    }
    .ref-pasos::before {
      content: 'O';
      position: absolute; left: -1%; top: 50%; transform: translateY(-50%);
      font-family: 'Dancing Script', cursive; font-size: clamp(28rem, 55vw, 70rem);
      font-weight: 700; color: transparent;
      -webkit-text-stroke: 2px rgba(149,187,48,.10);
      pointer-events: none; z-index: 0; line-height: 1; user-select: none;
    }
    .ref-pasos::after {
      content: 'M';
      position: absolute; right: -1%; top: 50%; transform: translateY(-50%);
      font-family: 'Dancing Script', cursive; font-size: clamp(28rem, 55vw, 70rem);
      font-weight: 700; color: transparent;
      -webkit-text-stroke: 2px rgba(149,187,48,.10);
      pointer-events: none; z-index: 0; line-height: 1; user-select: none;
    }
    .ref-pasos > .container { position: relative; z-index: 1; }
    .ref-section-eyebrow {
      display: inline-flex; align-items: center; gap: 10px;
      font-size: .95rem; font-weight: 700; letter-spacing: .28em;
      text-transform: uppercase; color: #95BB30; margin-bottom: 14px;
    }
    .ref-section-eyebrow::before, .ref-section-eyebrow::after {
      content: ''; width: 28px; height: 1px; background: #95BB30; display: inline-block;
    }
    .ref-section-title {
      font-family: 'Arial Black', Arial, sans-serif;
      font-size: clamp(2rem, 4vw, 3rem); font-weight: 900;
      color: #1A1A18; letter-spacing: -.02em; line-height: 1.1;
      text-transform: uppercase; margin-bottom: 16px;
    }
    .ref-section-sub {
      font-size: 1.08rem; color: #5A5853; max-width: 620px;
      margin: 0 auto 52px; line-height: 1.8;
    }
    .ref-steps {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
      position: relative;
    }
    .ref-steps::before {
      content: '';
      position: absolute; top: 36px; left: calc(16.66% + 16px); right: calc(16.66% + 16px);
      height: 1px; background: repeating-linear-gradient(90deg, #95BB30 0, #95BB30 8px, transparent 8px, transparent 16px);
      z-index: 0;
    }
    .ref-step {
      text-align: center; position: relative; z-index: 1;
    }
    .ref-step-num {
      width: 72px; height: 72px; border-radius: 50%;
      background: linear-gradient(135deg, #95BB30 0%, #7a9e22 100%);
      color: #fff; font-family: 'Arial Black', Arial, sans-serif;
      font-size: 1.6rem; font-weight: 900;
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 20px;
      box-shadow: 0 8px 24px rgba(149,187,48,.35);
    }
    .ref-step-title {
      font-family: 'Arial Black', Arial, sans-serif;
      font-size: 1.2rem; font-weight: 900; color: #1A1A18;
      text-transform: uppercase; letter-spacing: .02em; margin-bottom: 10px;
    }
    .ref-step-desc {
      font-size: 1rem; color: #5A5853; line-height: 1.7;
    }

    /* == BENEFICIOS == */
    .ref-beneficios {
      padding: clamp(34px, 5vw, 60px) 0;
      background-color: #FAFAF6;
      background-image:
        repeating-linear-gradient(-55deg, transparent 0px, transparent 26px, rgba(149,187,48,.05) 26px, rgba(149,187,48,.05) 27px),
        radial-gradient(ellipse at 15% 30%, rgba(149,187,48,.055) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 70%, rgba(149,187,48,.04) 0%, transparent 45%);
      position: relative;
      overflow: hidden;
    }
    .ref-beneficios::before {
      content: 'TU\A PREMIO';
      white-space: pre; text-align: center;
      position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
      font-family: 'Dancing Script', cursive; font-size: clamp(13rem, 24vw, 30rem);
      font-weight: 700; color: rgba(120,120,115,.05);
      pointer-events: none; z-index: 0;
      letter-spacing: .04em; line-height: .88; user-select: none;
    }
    .ref-beneficios > .container { position: relative; z-index: 1; }
    .ref-bene-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
    }
    .ref-bene-text h2 {
      font-family: 'Arial Black', Arial, sans-serif;
      font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 900;
      color: #1A1A18; text-transform: uppercase; letter-spacing: -.02em;
      line-height: 1.1; margin-bottom: 20px;
    }
    .ref-bene-text h2 em { font-style: normal; color: #95BB30; }
    .ref-bene-text p { font-size: 1.08rem; color: #5A5853; line-height: 1.8; margin-bottom: 24px; }
    .ref-bene-items { display: flex; flex-direction: column; gap: 16px; }
    .ref-bene-item {
      display: flex; align-items: flex-start; gap: 14px;
    }
    .ref-bene-icon {
      width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
      background: linear-gradient(135deg, #95BB30 0%, #7a9e22 100%);
      display: flex; align-items: center; justify-content: center;
      color: #fff;
    }
    .ref-bene-icon svg { width: 20px; height: 20px; }
    .ref-bene-content strong { font-size: 1.05rem; color: #1A1A18; font-weight: 700; display: block; margin-bottom: 4px; }
    .ref-bene-content span { font-size: .95rem; color: #5A5853; line-height: 1.6; }
    .ref-premio-card {
      background: linear-gradient(135deg, #1A1A18 0%, #2a3a10 60%, #3d5a18 100%);
      border-radius: 20px; padding: 40px; text-align: center;
      border: 1px solid rgba(149,187,48,.2);
      box-shadow: 0 24px 60px rgba(0,0,0,.15);
    }
    .ref-premio-label {
      font-size: .85rem; font-weight: 700; letter-spacing: .3em;
      text-transform: uppercase; color: #95BB30; margin-bottom: 12px;
    }
    .ref-premio-amount {
      font-family: 'Arial Black', Arial, sans-serif;
      font-size: clamp(3rem, 7vw, 5rem); font-weight: 900; color: #fff;
      line-height: 1; letter-spacing: -.03em; margin-bottom: 8px;
    }
    .ref-premio-amount span { color: #CEE632; }
    .ref-premio-unit { font-size: 1.25rem; color: rgba(255,255,255,.5); margin-bottom: 24px; }
    .ref-premio-note {
      font-size: .9rem; color: rgba(255,255,255,.45); line-height: 1.6;
      border-top: 1px solid rgba(149,187,48,.2); padding-top: 20px; margin-top: 4px;
    }

    /* == FORMULARIO == */
    .ref-form-section {
      padding: clamp(34px, 5vw, 60px) 0;
      background: #fff;
      border-top: 3px solid rgba(149,187,48,.13);
      position: relative;
      overflow: hidden;
    }
    .ref-form-section::before {
      content: 'O';
      position: absolute; left: -1%; top: 50%; transform: translateY(-50%);
      font-family: 'Dancing Script', cursive; font-size: clamp(28rem, 55vw, 70rem);
      font-weight: 700; color: transparent;
      -webkit-text-stroke: 2px rgba(149,187,48,.10);
      pointer-events: none; z-index: 0; line-height: 1; user-select: none;
    }
    .ref-form-section::after {
      content: 'M';
      position: absolute; right: -1%; top: 50%; transform: translateY(-50%);
      font-family: 'Dancing Script', cursive; font-size: clamp(28rem, 55vw, 70rem);
      font-weight: 700; color: transparent;
      -webkit-text-stroke: 2px rgba(149,187,48,.10);
      pointer-events: none; z-index: 0; line-height: 1; user-select: none;
    }
    .ref-form-section > .container { position: relative; z-index: 1; }
    .ref-form-wrap {
      max-width: 1100px; margin: 0 auto;
      background: #f8f7f4; border-radius: 20px;
      border: 1px solid rgba(149,187,48,.18);
      padding: clamp(28px, 5vw, 52px);
    }
    .ref-form-cols {
      display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
    }
    .ref-form-cols > div { min-width: 0; }
    .ref-form-col-divider {
      width: 1px; background: rgba(149,187,48,.2); margin: 0 -20px;
    }
    @media(max-width: 768px) { .ref-form-cols { grid-template-columns: 1fr; } }
    .ref-form-wrap h3 {
      font-family: 'Dosis', sans-serif; font-weight: 300;
      font-size: 2.1rem; color: #1A1A18; margin-bottom: 8px;
      border-bottom: 1px solid rgba(149,187,48,.2); padding-bottom: 16px;
    }
    .ref-form-wrap p { font-size: 1rem; color: #5A5853; margin-bottom: 28px; }
    .ref-fieldset-label {
      font-size: .82rem; font-weight: 700; letter-spacing: .25em;
      text-transform: uppercase; color: #95BB30; margin: 24px 0 14px;
      display: flex; align-items: center; gap: 10px;
    }
    .ref-fieldset-label::after { content: ''; flex: 1; height: 1px; background: rgba(149,187,48,.25); }
    .ref-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .ref-form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; min-width: 0; }
    .ref-form-group label { font-size: .92rem; font-weight: 600; color: #5A5853; }
    .ref-form-group input,
    .ref-form-group select {
      width: 100%; box-sizing: border-box;
      padding: 13px 14px; border-radius: 8px;
      border: 1px solid rgba(149,187,48,.25);
      background: #fff; font-family: Arial, sans-serif;
      font-size: 1rem; color: #1A1A18; outline: none;
      transition: border-color .2s;
    }
    .ref-form-group input:focus,
    .ref-form-group select:focus { border-color: #95BB30; }
    .ref-privacy { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 10px; }
    .ref-privacy input[type="checkbox"] { margin-top: 3px; accent-color: #95BB30; width: 16px; height: 16px; flex-shrink: 0; cursor: pointer; }
    .ref-privacy label { font-size: .92rem; color: #5A5853; line-height: 1.55; cursor: pointer; }
    .ref-privacy a { color: #95BB30; text-decoration: underline; }
    .ref-btn {
      width: 100%; padding: 16px; margin-top: 20px;
      background: linear-gradient(135deg, #7a9e22 0%, #95BB30 100%);
      color: #fff; border: none; border-radius: 10px;
      font-family: Arial, sans-serif; font-size: .9rem; font-weight: 800;
      letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
      transition: transform .2s, box-shadow .2s;
    }
    .ref-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(149,187,48,.45); }
    .ref-btn-wsp {
      width: 100%; padding: 14px; margin-top: 10px;
      background: #25D366; color: #fff; border: none; border-radius: 10px;
      font-family: Arial, sans-serif; font-size: .85rem; font-weight: 700;
      letter-spacing: .05em; cursor: pointer; display: flex; align-items: center;
      justify-content: center; gap: 10px; text-decoration: none;
      transition: transform .2s, box-shadow .2s;
    }
    .ref-btn-wsp:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(37,211,102,.4); }
    .ref-success {
      display: none; text-align: center; padding: 20px;
      background: rgba(149,187,48,.1); border: 1px solid rgba(149,187,48,.3);
      border-radius: 10px; color: #6a8f1a; font-weight: 600;
      margin-top: 16px;
    }
    .ref-or { text-align: center; font-size: .75rem; color: #9a9890; margin: 4px 0; }

    @media(max-width: 768px) {
      .ref-steps { grid-template-columns: 1fr; }
      .ref-steps::before { display: none; }
      .ref-bene-grid { grid-template-columns: 1fr; }
      .ref-form-row { grid-template-columns: 1fr; }
    }