/*

 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1

*/

/* HOVER BOTONES */
a.elementor-button {
  transform: translateY(0);
  transition: all 0.35s ease;

  &:hover {
    transform: translateY(-10px);
  }
}

/* FORMULARIO PRESUPUESTO */
/* =========================================================
   SPREE · Formulario por pasos (Contact Form 7)
   CSS anidado nativo (Chrome/Edge 112+, Safari 16.5+, Firefox 117+)
   ========================================================= */
.spree-steps {
  --sp-accent-10: rgba(0, 255, 0, .10);
  --sp-accent-20: rgba(0, 255, 0, .20);
  --sp-accent-40: rgba(0, 255, 0, .40);
  --sp-dim: #8b8b96;
  --sp-card: #0c0c0e;
  --sp-line: rgba(178, 178, 190, .14);
  --sp-line-strong: rgba(178, 178, 190, .26);
  --sp-error: #ff5c7a;
  --sp-ease: cubic-bezier(.2, .8, .2, 1);

  position: relative;
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(22px, 5vw, 44px);
  color: var(--base);
  background:
    radial-gradient(120% 55% at 50% -12%, rgba(0, 255, 0, .11), transparent 62%),
    linear-gradient(180deg, #0b0b0d 0%, #060607 100%);
  border: 1px solid var(--sp-line);
  border-radius: 28px;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .04);
  overflow: hidden;
  isolation: isolate;

  &::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity: .55;
  }

  & *,
  & *::before,
  & *::after {
    box-sizing: border-box;
  }

  & svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  & p {
    margin: 0;
  }

  br {
    display: none;
  }

  .wpcf7-form-control-wrap {
    display: block;
  }

  /* ---------- Barra de pasos ---------- */
  .sp-stepper {
    position: relative;
    margin: 0 0 36px;
  }

  .sp-stepper-track {
    position: absolute;
    top: 20px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: var(--sp-line);
    border-radius: 2px;
    overflow: hidden;
  }

  .sp-stepper-fill {
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--sp-accent-40), var(--accent));
    box-shadow: 0 0 12px var(--accent);
    transition: width .6s var(--sp-ease);
  }

  .sp-stepper-list {
    position: relative;
    z-index: 1;
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .sp-stepper-dot {
    position: relative;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #0e0e10;
    border: 1.5px solid var(--sp-line-strong);
    color: var(--sp-dim);
    font-size: 14px;
    font-weight: 700;
    transition: all .4s var(--sp-ease);
  }

  .sp-check {
    display: none;
    width: 18px;
    height: 18px;
    stroke-width: 3;
  }

  .sp-stepper-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1.2;
    text-align: center;
    color: var(--contrast-2);
    transition: color .3s;
  }

  .sp-stepper-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    cursor: default;
    -webkit-tap-highlight-color: transparent;

    &.is-reachable {
      cursor: pointer;

      &:hover .sp-stepper-dot {
        border-color: var(--accent);
      }
    }

    &.is-complete {
      .sp-stepper-dot {
        border-color: var(--accent);
        color: var(--accent);
      }

      .sp-num {
        display: none;
      }

      .sp-check {
        display: block;
      }

      .sp-stepper-label {
        color: var(--contrast-3);
      }
    }

    &.is-active {
      .sp-stepper-dot {
        border-color: var(--accent);
        background: var(--accent);
        color: var(--contrast);
        transform: scale(1.1);
        box-shadow: 0 0 0 6px var(--sp-accent-10), 0 0 26px rgba(0, 255, 0, .45);
      }

      .sp-stepper-label {
        color: var(--base-3);
      }
    }
  }

  /* ---------- Pasos ---------- */
  .sp-step {
    display: none;

    &.is-active {
      display: block;
      animation: spIn .5s var(--sp-ease);
    }

    &.is-back {
      animation-name: spInBack;
    }

    &.sp-shake {
      animation: spShake .4s;
    }
  }

  .sp-step-head {
    margin-bottom: 28px;
  }

  .sp-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent);

    &::before {
      content: "";
      width: 20px;
      height: 2px;
      border-radius: 2px;
      background: var(--accent);
    }
  }

  .sp-badge {
    padding: 3px 9px;
    border: 1px solid var(--sp-line-strong);
    border-radius: 999px;
    font-size: 10.5px;
    letter-spacing: .1em;
    color: var(--contrast-3);
  }

  .sp-title {
    margin: 0 0 12px;
    padding: 0;
    font-size: clamp(26px, 5vw, 38px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.02em;
    color: var(--base-3);

    & em {
      font-style: normal;
      color: var(--accent);
      text-shadow: 0 0 30px rgba(0, 255, 0, .35);
    }
  }

  .sp-text {
    max-width: 54ch;
    font-size: 15px;
    line-height: 1.65;
    color: var(--contrast-3);
  }

  /* ---------- Paso 1: guía + plantilla ---------- */
  .sp-flow {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
    counter-reset: spflow;

    & li {
      counter-increment: spflow;
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 0;
      padding: 12px 14px;
      border: 1px solid var(--sp-line);
      border-radius: 14px;
      background: var(--sp-card);
      font-size: 13px;
      font-weight: 600;
      color: var(--base);

      &::before {
        content: counter(spflow);
        flex: none;
        display: grid;
        place-items: center;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: var(--sp-accent-10);
        color: var(--accent);
        font-size: 12px;
        font-weight: 800;
      }
    }
  }

  .sp-download {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 0 28px;
    padding: 18px;
    border: 1px solid var(--sp-accent-40);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(0, 255, 0, .12), rgba(0, 255, 0, .02) 55%), var(--sp-card);
    color: inherit;
    text-decoration: none !important;
    overflow: hidden;
    transition: transform .3s var(--sp-ease), box-shadow .3s, border-color .3s;

    &:hover {
      transform: translateY(-2px);
      border-color: var(--accent);
      box-shadow: 0 16px 40px -16px rgba(0, 255, 0, .5);

      .sp-download-cta {
        background: var(--accent);
        color: var(--contrast);
      }
    }
  }

  .sp-download-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--accent);
    color: var(--contrast);

    & svg {
      width: 26px;
      height: 26px;
      stroke-width: 2;
    }
  }

  .sp-download-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;

    & strong {
      font-size: 16px;
      color: var(--base-3);
    }

    & small {
      font-size: 13px;
      color: var(--contrast-3);
    }
  }

  .sp-download-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    white-space: nowrap;
    border: 1px solid var(--sp-accent-40);
    border-radius: 999px;
    background: var(--contrast);
    font-size: 13px;
    font-weight: 700;
    color: var(--accent);
    transition: background .3s, color .3s;

    & svg {
      width: 16px;
      height: 16px;
      stroke-width: 2.2;
    }
  }

  /* ---------- Paso 2: consejos ---------- */
  .sp-tips {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin: 0 0 26px;
    padding: 0;
    list-style: none;

    & li > p {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin: 0;
      padding: 14px;
      border: 1px solid var(--sp-line);
      border-radius: 14px;
      background: var(--sp-card);
      font-size: 13px;
      line-height: 1.35;
      color: var(--base);
    }

    & svg {
      width: 22px;
      height: 22px;
      color: var(--accent);
    }
  }

  /* ---------- Campos ---------- */
  .sp-field {
    position: relative;
    margin: 0 0 22px;
  }

  .sp-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
  }

  .sp-label {
    display: block;
    margin: 0 0 10px;
    padding: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--base-3);
  }

  .sp-req {
    color: var(--accent);
  }

  .sp-help {
    display: block;
    margin-top: 10px;
    font-size: 12.5px;
    color: var(--sp-dim);
  }

  & input:is([type="text"], [type="email"], [type="url"]),
  & textarea {
    width: 100%;
    height: 56px;
    margin: 0;
    padding: 0 18px;
    background: var(--contrast) !important;
    color: var(--base-3) !important;
    border: 1px solid var(--sp-line-strong) !important;
    border-radius: 14px !important;
    font: inherit;
    font-size: 15px;
    box-shadow: none;
    outline: none;
    transition: border-color .25s, box-shadow .25s, background .25s;

    &::placeholder {
      color: var(--contrast-2);
      opacity: 1;
    }

    &:hover {
      border-color: rgba(178, 178, 190, .45) !important;
    }

    &:focus {
      border-color: var(--accent) !important;
      box-shadow: 0 0 0 4px var(--sp-accent-10) !important;
    }
  }

  .sp-input-icon > p {
    position: relative;

    &>svg {
      position: absolute;
      z-index: 1;
      left: 18px;
      top: 28px;
      transform: translateY(-50%);
      width: 19px;
      height: 19px;
      color: var(--sp-dim);
      pointer-events: none;
      transition: color .25s;
    }

    &:focus-within>svg {
      color: var(--accent);
    }

    & input {
      padding-left: 50px !important;
    }
  }

  .sp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;

    & span {
      padding: 5px 11px;
      border: 1px solid var(--sp-line);
      border-radius: 999px;
      font-size: 12px;
      color: var(--sp-dim);
    }
  }

  .sp-skip-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    border: 1px dashed var(--sp-line-strong);
    border-radius: 14px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--contrast-3);

    & svg {
      flex: none;
      width: 18px;
      height: 18px;
      margin-top: 1px;
      color: var(--accent);
    }
  }

  /* ---------- Errores ---------- */
  .sp-error,
  .wpcf7-not-valid-tip {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--sp-error);
  }

  .sp-error::before {
    content: "!";
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--sp-error);
    color: var(--contrast);
    font-size: 11px;
    font-weight: 900;
  }

  .sp-field.is-invalid .wpcf7-not-valid-tip {
    display: none;
  }

  /* evita mensajes duplicados */

  .is-invalid input:is([type="text"], [type="email"], [type="url"]),
  .wpcf7-not-valid {
    border-color: var(--sp-error) !important;
  }

  /* ---------- Tarjetas de formato (radio de CF7) ---------- */
  .sp-format {
    .wpcf7-radio {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }

    .wpcf7-list-item {
      display: block;
      margin: 0;
    }

    .wpcf7-list-item-label {
      margin: 0;
      font-size: 15px;
      font-weight: 700;
      color: var(--base-3);
    }

    & input {
      position: absolute;
      opacity: 0;
      width: 1px;
      height: 1px;
      pointer-events: none;
    }

    & label {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      height: 100%;
      padding: 24px 12px 20px;
      cursor: pointer;
      text-align: center;
      border: 1px solid var(--sp-line-strong);
      border-radius: 18px;
      background: var(--sp-card);
      transition: border-color .25s, background .25s, transform .25s var(--sp-ease), box-shadow .25s;

      &:hover {
        transform: translateY(-2px);
        border-color: rgba(178, 178, 190, .5);
      }

      &::before {
        content: "";
        width: 38px;
        height: 38px;
        margin-bottom: 8px;
        background: var(--contrast-3);
        -webkit-mask: var(--sp-icon) center / contain no-repeat;
        mask: var(--sp-icon) center / contain no-repeat;
        transition: background .25s, transform .3s var(--sp-ease);
      }

      &::after {
        font-size: 12.5px;
        color: var(--sp-dim);
      }

      &:has(input:checked) {
        border-color: var(--accent);
        background: linear-gradient(180deg, rgba(0, 255, 0, .10), rgba(0, 255, 0, .02)), var(--sp-card);
        box-shadow: 0 0 0 4px var(--sp-accent-10), 0 18px 40px -20px rgba(0, 255, 0, .6);

        &::before {
          background: var(--accent);
          transform: scale(1.08);
        }
      }

      &:has(input:focus-visible) {
        outline: 2px solid var(--accent);
        outline-offset: 3px;
      }
    }

    .wpcf7-list-item:nth-child(1) label {
      --sp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='7' y='2' width='10' height='20' rx='2.5'/%3E%3Cpath d='M11 18.5h2'/%3E%3C/svg%3E");

      &::after {
        content: "Reels · TikTok · Shorts";
      }
    }

    .wpcf7-list-item:nth-child(2) label {
      --sp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='2' y='5' width='20' height='12' rx='2'/%3E%3Cpath d='M8 21h8M12 17v4'/%3E%3C/svg%3E");

      &::after {
        content: "Web · YouTube";
      }
    }

    &.is-invalid label {
      border-color: rgba(255, 92, 122, .5);
    }
  }

  /* ---------- Checkbox de privacidad ---------- */
  .sp-accept {
    .wpcf7-list-item {
      margin: 0;
    }

    & label {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      cursor: pointer;
      font-size: 13.5px;
      line-height: 1.55;
      color: var(--contrast-3);
    }

    & input[type="checkbox"] {
      -webkit-appearance: none;
      appearance: none;
      flex: none;
      display: grid;
      place-items: center;
      width: 22px;
      height: 22px;
      margin: 0;
      cursor: pointer;
      border: 1.5px solid var(--sp-line-strong);
      border-radius: 7px;
      background: var(--contrast);
      transition: background .2s, border-color .2s;

      &:checked {
        background: var(--accent);
        border-color: var(--accent);

        &::after {
          content: "";
          width: 6px;
          height: 11px;
          margin-top: -2px;
          border: solid var(--contrast);
          border-width: 0 2.5px 2.5px 0;
          transform: rotate(45deg);
        }
      }

      &:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
      }
    }

    & a {
      color: var(--accent);
      text-decoration: underline;
      text-underline-offset: 3px;
    }
  }

  /* ---------- Zona de subida (plugin Drag & Drop) ---------- */
  .codedropz-upload-wrapper {
    margin: 0;
  }

  .codedropz-upload-handler {
    position: relative;
    margin: 0;
    padding: 0;
    border: 1.5px dashed var(--sp-accent-40) !important;
    border-radius: 18px !important;
    background: radial-gradient(90% 120% at 50% 0%, rgba(0, 255, 0, .07), transparent 70%), #08080a;
    transition: border-color .25s, background .25s, transform .25s var(--sp-ease);

    &:hover {
      border-color: var(--accent) !important;
    }
  }

  .codedropz-dragover .codedropz-upload-handler,
  .codedropz-upload-handler.codedropz-dragover {
    border-style: solid !important;
    border-color: var(--accent) !important;
    background: radial-gradient(90% 120% at 50% 0%, rgba(0, 255, 0, .16), transparent 70%), #08080a;
    transform: scale(1.01);
  }

  .codedropz-upload-container {
    padding: 38px 20px 34px;
  }

  .codedropz-upload-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;

    &::before {
      content: "";
      width: 60px;
      height: 60px;
      margin-bottom: 6px;
      border-radius: 18px;
      background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300FF00' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4M7 9l5-5 5 5'/%3E%3Cpath d='M4 15v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3'/%3E%3C/svg%3E") center / 28px no-repeat,
        var(--sp-accent-10);
      box-shadow: inset 0 0 0 1px var(--sp-accent-20);
    }

    & h3 {
      margin: 0;
      padding: 0;
      font-size: 17px;
      font-weight: 700;
      color: var(--base-3);
    }

    &>span {
      font-size: 13px;
      color: var(--sp-dim);
    }
  }

  .codedropz-btn-wrap {
    margin-top: 4px;
  }

  .cd-upload-btn {
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid var(--accent);
    border-radius: 3px;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent) !important;
    text-decoration: none !important;
    transition: background .25s, color .25s;

    &:hover {
      background: var(--accent);
      color: var(--contrast) !important;
    }
  }

  .dnd-upload-counter {
    position: absolute;
    top: 14px;
    right: 16px;
    font-size: 12px;
    font-weight: 700;
    color: var(--sp-dim);
  }

  .dnd-upload-status {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 10px 0 0;
    padding: 10px 12px;
    border: 1px solid var(--sp-line);
    border-radius: 14px;
    background: var(--sp-card);
    animation: spIn .35s var(--sp-ease);

    .has-error {
      color: var(--sp-error);
      font-size: 12.5px;
    }
  }

  .has-error-msg {
    color: var(--sp-error);
    font-size: 12.5px;
  }

  .dnd-upload-image {
    position: relative;
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 11px;
    overflow: hidden;
    background: var(--sp-accent-10);

    &>span {
      display: none;
    }

    & img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    &::before {
      content: "";
      width: 20px;
      height: 20px;
      background: var(--accent);
      -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3C/svg%3E") center / contain no-repeat;
      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3C/svg%3E") center / contain no-repeat;
    }
  }

  .dnd-upload-details {
    position: relative;
    flex: 1;
    min-width: 0;
    padding-right: 32px;

    .name {
      display: flex;
      align-items: baseline;
      gap: 8px;
      font-size: 13.5px;
      font-weight: 600;
      color: var(--base-3);

      & span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      & em {
        flex: none;
        font-style: normal;
        font-weight: 500;
        font-size: 12px;
        color: var(--sp-dim);
      }
    }

    .remove-file {
      position: absolute;
      top: 50%;
      right: 0;
      transform: translateY(-50%);
      display: grid;
      place-items: center;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      color: var(--sp-dim);
      transition: background .2s, color .2s;

      &>span {
        display: none;
      }

      &:hover {
        background: rgba(255, 92, 122, .12);
        color: var(--sp-error);
      }

      &::before {
        content: "";
        width: 14px;
        height: 14px;
        background: currentColor;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / contain no-repeat;
      }
    }
  }

  .dnd-progress-bar {
    display: block;
    height: 4px;
    margin-top: 8px;
    border-radius: 4px;
    background: rgba(178, 178, 190, .12);
    overflow: hidden;

    & span {
      display: block;
      height: 100%;
      font-size: 0;
      color: transparent;
      background: var(--accent);
      box-shadow: 0 0 10px var(--accent);
      transition: width .2s;
    }
  }

  /* ---------- Subida sin plugin ([file] nativo) ---------- */
  .sp-native-file {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0 !important;
    opacity: 0;
    pointer-events: none;
  }

  .sp-upload {
    .codedropz-upload-handler {
      cursor: pointer;

      &:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 3px;
      }
    }

    &.is-full .codedropz-upload-handler {
      opacity: .45;
      pointer-events: none;
    }

    .sp-file-ok {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-top: 4px;
      font-size: 12px;
      font-weight: 600;
      color: var(--accent);

      &::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--accent);
        box-shadow: 0 0 8px var(--accent);
      }
    }
  }

  .sp-drop.is-invalid .codedropz-upload-handler {
    border-color: var(--sp-error) !important;
  }

  /* ---------- Botones ---------- */
  .sp-nav > p {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 34px;
    padding-top: 26px;
    border-top: 1px solid var(--sp-line);
  }

  .sp-btn {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 56px;
    margin: 0;
    padding: 0 28px;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 3px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    transition: transform .25s var(--sp-ease), box-shadow .25s, background .25s, color .25s, border-color .25s, opacity .25s;

    & svg {
      width: 18px;
      height: 18px;
      stroke-width: 2.2;
      transition: transform .25s var(--sp-ease);
    }

    &:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 3px;
    }
  }

  .sp-btn-primary {
    margin-left: auto;
    background: var(--accent) !important;
    color: var(--contrast) !important;
    border-color: var(--accent) !important;
    box-shadow: 0 12px 32px -12px rgba(0, 255, 0, .65);

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 18px 40px -12px rgba(0, 255, 0, .8);

      & svg {
        transform: translateX(4px);
      }
    }

    &.is-skip {
      background: transparent !important;
      color: var(--accent) !important;
      box-shadow: none;

      &:hover {
        background: var(--sp-accent-10) !important;
      }
    }
  }

  .sp-btn-ghost {
    background: transparent;
    color: var(--contrast-3);
    border-color: var(--sp-line-strong);

    &:hover {
      color: var(--base-3);
      border-color: var(--contrast-3);

      & svg {
        transform: translateX(-4px);
      }
    }
  }

  .wpcf7-submit:disabled {
    opacity: .35;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
  }

  .wpcf7-spinner {
    margin: 0 0 0 -4px;
    background-color: var(--accent);
  }

  .wpcf7-form.submitting & .wpcf7-submit {
    opacity: .6;
    pointer-events: none;
  }

  /* ---------- Pantalla final ---------- */
  .sp-done {
    display: none;
    padding: 30px 0 10px;
    text-align: center;

    .sp-text {
      margin: 0 auto 28px;
    }
  }

  &.is-done {

    .sp-step,
    .sp-stepper {
      display: none;
    }

    .sp-done {
      display: block;
      animation: spIn .6s var(--sp-ease);
    }
  }

  .sp-done-icon {
    display: grid;
    place-items: center;
    width: 88px;
    height: 88px;
    margin: 0 auto 26px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--contrast);
    box-shadow: 0 0 0 10px var(--sp-accent-10), 0 0 60px rgba(0, 255, 0, .5);
    animation: spPop .6s var(--sp-ease);

    & svg {
      width: 42px;
      height: 42px;
      stroke-width: 3;
      stroke-dasharray: 30;
      stroke-dashoffset: 30;
      animation: spDraw .5s .3s forwards;
    }
  }

  /* ---------- Información legal (desplegable) ---------- */
  .sp-legal {
    margin-top: 22px;
    border: 1px solid var(--sp-line); border-radius: 14px; background: var(--sp-card);
    overflow: hidden; transition: border-color .25s;

    &[open] { border-color: var(--sp-line-strong); }

    & summary {
      display: flex; align-items: center; gap: 10px; padding: 14px 16px;
      list-style: none; cursor: pointer; user-select: none;
      font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--contrast-3);
      transition: color .25s;

      &::-webkit-details-marker { display: none; }
      &:hover { color: var(--base-3); }
      &:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 14px; }

      & svg { flex: none; width: 17px; height: 17px; color: var(--accent); }
      & .sp-legal-arrow { margin-left: auto; color: var(--sp-dim); transition: transform .3s var(--sp-ease); }
    }

    &[open] .sp-legal-arrow { transform: rotate(180deg); }
    &[open] .sp-legal-body { animation: spFade .35s var(--sp-ease); }
  }

  .sp-legal-body {
    display: grid; gap: 12px; margin: 0; padding: 4px 16px 18px;
    border-top: 1px solid var(--sp-line); padding-top: 16px;

    & div { display: grid; grid-template-columns: 150px 1fr; gap: 4px 16px; }
    & dt { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--base-3); line-height: 1.6; }
    & dd { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--contrast-3); }
    & a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

    @media (max-width: 640px) {
      & div { grid-template-columns: 1fr; }
    }
  }

  /* ---------- Móvil ---------- */
  @media (max-width: 640px) {
    border-radius: 22px;

    .sp-stepper-track {
      top: 16px;
    }

    .sp-stepper-dot {
      width: 32px;
      height: 32px;
      font-size: 13px;
    }

    .sp-stepper-label {
      display: none;
    }

    .sp-flow {
      grid-template-columns: 1fr;
    }

    .sp-tips {
      grid-template-columns: 1fr 1fr;
    }

    .sp-row {
      grid-template-columns: 1fr;
    }

    .sp-download {
      flex-wrap: wrap;
    }

    .sp-download-cta {
      width: 100%;
      justify-content: center;
    }

    .sp-nav .sp-btn {
      flex: 1;
      padding: 0 18px;
    }
  }

  @media (prefers-reduced-motion: reduce) {

    & *,
    & *::before,
    & *::after {
      animation: none !important;
      transition: none !important;
    }

    .sp-done-icon svg {
      stroke-dashoffset: 0;
    }
  }
}

/* Mensaje de respuesta de CF7 (fuera del contenedor) */
.wpcf7-form:has(.spree-steps) {
  .wpcf7-response-output {
    max-width: 720px;
    margin: 16px auto 0 !important;
    padding: 14px 18px !important;
    border: 1px solid rgba(255, 92, 122, .4) !important;
    border-radius: 14px;
    background: rgba(255, 92, 122, .06);
    color: var(--base);
    font-size: 14px;
    text-align: center;
  }

  &.sent .wpcf7-response-output {
    display: none;
  }
}

/* ---------- Animaciones ---------- */
@keyframes spIn {
  from {
    opacity: 0;
    transform: translateX(28px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes spInBack {
  from {
    opacity: 0;
    transform: translateX(-28px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes spShake {

  20%,
  60% {
    transform: translateX(-6px);
  }

  40%,
  80% {
    transform: translateX(6px);
  }
}

@keyframes spPop {
  from {
    transform: scale(.4);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes spDraw {
  to {
    stroke-dashoffset: 0;
  }
}