@font-face {
    font-family: 'BraunLinear-Bold';
    src: url('../fonts/BraunLinear-Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'BraunLinear-Light';
    src: url('../fonts/BraunLinear-Light.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'BraunLinear-Medium';
    src: url('../fonts/BraunLinear-Medium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'BraunLinear-Regular';
    src: url('../fonts/BraunLinear-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'BraunLinear-Thin';
    src: url('../fonts/BraunLinear-Thin.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
      :root {
        --grad: linear-gradient(90deg, #ff8e77 0%, #b378c4 80%, #392dc2 100%);
        --page: #eeedf3;
        --ink: #111114;
        --link: #2b6ef2;
      }
      * {
        box-sizing: border-box;
      }
      body {
        margin: 0;
        background: var(--page);
        color: var(--ink);
        font-family: 'BraunLinear-Regular';
      }
      .wrap {
        max-width: 920px;
        margin: 0 auto;
        background: var(--page);
      }
      .hero {
        position: relative;
      }
      .hero img {
        display: block;
        width: 100%;
      }
      .hero-copy {
        position: absolute;
        top: 7%;
        left: 4.7%;
        width: 72%;
      }
      h1 {
        margin: 0;
        font-size: clamp(30px, 6.9vw, 64px);
        font-weight: 700;
        line-height: 1.06;
        letter-spacing: -0.01em;
      }
      .grad-text {
        background: var(--grad);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }
      .claim {
        margin: 3% 0 0;
        font-size: clamp(15px, 3.1vw, 27px);
        font-weight: 700;
        line-height: 1.3;
      }
      .card {
        position: relative;
        z-index: 1;
        background: #fff;
        margin: 0 3.4%;
        padding: 22px clamp(18px, 5%, 48px) 34px;
      }
      h2 {
        margin: 0;
        text-align: center;
        text-transform: uppercase;
        font-weight: 700;
        font-size: clamp(20px, 3.4vw, 31px);
        line-height: 1.15;
      }
      h2 span {
        display: block;
        font-size: clamp(16px, 2.7vw, 25px);
      }
      .intro {
        max-width: 720px;
        margin: 18px auto 0;
        text-align: center;
        font-size: clamp(13px, 1.8vw, 21px);
        line-height: 1.5;
        text-align: center;
      }
      .required-note {
        margin: 8px 0 0;
        text-align: center;
        font-weight: 700;
        font-size: 14px;
      }
      form {
        margin: 26px auto 0;
        max-width: 566px;
      }
      .field {
        margin-bottom: 18px;
      }
      .field.short {
        position: relative;
        max-width: 47%;
      }
      .field.short:has(select)::after {
        content: "";
        position: absolute;
        right: 3px;
        top: 8px;
        width: 24px;
        height: 15px;
        background: var(--grad);
        clip-path: polygon(0 0, 100% 0, 50% 100%);
        pointer-events: none;
      }
      .field .row {
        display: flex;
        align-items: baseline;
        gap: 10px;
      }
      .field label {
        display: block;
        white-space: nowrap;
        font-weight: 700;
        font-size: clamp(15px, 2.1vw, 21px);
        line-height: 1.2;
        padding-left: 20px;
        padding-bottom: 3px;
      }
      .field input,
      .field select {
        width: 100%;
        border: 0;
        background: transparent;
        outline: none;
        font: inherit;
        font-size: clamp(14px, 1.9vw, 18px);
        height: 24px;
        padding: 0;
        color: var(--ink);
      }
      .field select {
        appearance: none;
        -webkit-appearance: none;
        background: transparent;
        padding-right: 34px;
        cursor: pointer;
      }
      .line {
        height: 10px;
        border-radius: 2px;
        background: var(--grad);
      }
      .ticket {
        display: flex;
        flex-wrap: nowrap;
        white-space: nowrap;
        align-items: center;
        gap: 10px 18px;
        border: 0;
        padding: 8px 0 0;
        margin: 0;
      }
      .ticket .legend {
        font-weight: 700;
        font-size: clamp(15px, 2.1vw, 21px);
        padding-left: 20px;
      }
      .ticket label {
        display: inline-flex;
        white-space: nowrap;
        align-items: center;
        gap: 8px;
        text-transform: uppercase;
        font-weight: 700;
        font-size: clamp(9px, 1.35vw, 14px);
      }
     .ticket input {
        accent-color: #000;
        width: 25px;
        height: 25px;
        margin: 0;
    }
      .submit-row {
        text-align: center;
        margin-top: 30px;
      }
      button[type="submit"] {
        width: 100%;
        max-width: 300px;
        height: 58px;
        border: 0;
        border-radius: 8px;
        background: var(--grad);
        color: #fff;
        font: inherit;
        font-weight: 700;
        font-size: 22px;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        cursor: pointer;
      }
      button[type="submit"]:hover {
        opacity: 0.92;
      }
      .legal {
        margin-top: 26px;
      }
      .legal a {
        color: var(--link);
        font-size: 14px;
      }
      .thanks {
        margin-top: 34px;
        border: 1px solid #e3e3e8;
        border-radius: 8px;
        padding: 32px;
        text-align: center;
      }
      .thanks p:first-child {
        font-weight: 700;
        font-size: 20px;
        margin: 0;
      }
      .thanks p:last-child {
       margin: 8px 0 0;
    color: #000;
    line-height: 1.5;
    font-size: clamp(13px, 1.8vw, 21px);
    font-weight: 400;
      }
      .foot-space {
        height: 24px;
      }
      .legal-check{
        margin-top:25px;
    
      }
      .legal-check label{
         padding-left: 16px;
      }
      .legal-check .line {
        height: 5px;
        width: 47%;
        margin-top: 5px;
      }
      input[type="checkbox"] {
          accent-color: #ff8e77;
      }
      input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;

    width: 20px;
    height: 20px;

    border: 2px solid #392dc2;
    border-radius: 4px;

    background-color: #fff;

    cursor: pointer;

    display: inline-grid;
    place-content: center;
}

/* Cuando está marcado */
input[type="checkbox"]:checked {
    background-color: #ff8e77;
}

/* El símbolo ? */
input[type="checkbox"]::before {
    content: "";
    top: -1px;
    width: 2px;
    height: 7px;
    border-right: 2px solid white;
    border-bottom: 2px solid white;
    transform: rotate(45deg) scale(0);
    transition: transform 0.2s ease;
    POSITION: relative;
}

/* Mostrar el ? cuando está marcado */
input[type="checkbox"]:checked::before {
    transform: rotate(45deg) scale(1);
}


      @media (max-width: 560px) {
        .field.short {
          max-width: 70%;
        }
        .card {
          margin-top: 0;
        }
        .ticket {
          gap: 6px;
        }
        .ticket label {
          gap: 3px;
          font-size: 8px;
        }
      }
      /* Aviso de error de validacion o de guardado */
      .error {
        margin: 0 0 18px;
        padding: 12px 14px;
        border-left: 4px solid #ff8e77;
        border-radius: 4px;
        background: #fdeae5;
        color: #8a2b12;
        font-size: 13px;
        line-height: 1.4;
      }

      /* Campo senuelo anti-bots: fuera de la vista, pero no con
         display:none ni hidden, que algunos bots los detectan y lo saltan. */
      .senuelo {
        position: absolute;
        left: -9999px;
        width: 1px;
        height: 1px;
        overflow: hidden;
      }

@media (max-width:560px) {
  .ticket .legend{
    padding-left:0px;
  }
}