/*=====================================
  CSS VARIABLES
=====================================*/
:root {
  /* Colors */
  --color-white: #FFFFFF;
  --color-black: #000;
  --color-dark: #1c1c1c;
  --color-gray: #808080;
  --color-gainsboro: #DCDCDC;
  
  /* Brand Colors */
  --color-orange: #F64915;
  --color-lime: #E3FB51;
  --color-blue: #423EF4;
  --color-purple: #7710F3;
  --color-green: #00AD4E;
  
  /* Typography */
  --font-family-primary: "DM Sans", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  
  /* Spacing */
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  
  /* Border Radius */
  --border-radius-sm: 0.5rem;
  --border-radius-md: 1rem;
  
  /* Transitions */
  --transition-fast: 0.3s ease;
  --transition-normal: 0.6s ease-in-out;
  
  /* Z-index */
  --z-header: 1000;
  --z-overlay: 999;
}
/* dm-sans-latin-400-normal */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/dm-sans@latest/latin-400-normal.woff2) format('woff2'),
       url(https://cdn.jsdelivr.net/fontsource/fonts/dm-sans@latest/latin-400-normal.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* dm-sans-latin-700-normal */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/dm-sans@latest/latin-700-normal.woff2) format('woff2'),
       url(https://cdn.jsdelivr.net/fontsource/fonts/dm-sans@latest/latin-700-normal.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/*=====================================
  GENERAL & RESET
=====================================*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.img-fluid {
  width: 100%;
}
.noPadding {
  padding: 0;
}
.row {
  padding: 0 !important;
  margin: 0 !important;
}
.row.no-gutters {
  margin-right: 0;
  margin-left: 0;
}
.row.no-gutters > [class^="col-"],
.row.no-gutters > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}
.bg-blue {
  background-color: var(--color-blue);
}
.bg-purple {
  background-color: var(--color-purple);
}
.bg-green {
  background-color: var(--color-green);
}

/*=====================================
  FONTS & TYPOGRAPHY
=====================================*/
html, body {
  background-color: var(--color-orange);
}
body,
input,
textarea,
select {
  font-family: var(--font-family-primary);
  font-style: normal;
  font-display: swap;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  /* font-family: 'Proto Mono'; */
  font-family: var(--font-family-primary);
  font-display: swap;
  font-weight: 700;
  font-display: swap;
}

h1 {
  font-size: clamp(2.5rem, 1.4333rem + 1.7223vw, 3.5rem);
  font-weight: 700;
}
h2 {
  font-size: clamp(2rem, 1.4666rem + 0.8611vw, 2.5rem);
  font-weight: 700;
}
h3 {
  font-size: clamp(1.5rem, 0.9666rem + 0.8611vw, 2rem);
  font-weight: 700;
}
p,
li,
label, button, a {
  font-family: var(--font-family-primary);
  font-size: clamp(1rem, 0.7867rem + 0.3445vw, 1.2rem);
}
.smallTxt {
  font-size: 0.85em;
  text-align: center;
}

.text-white {
  color: var(--color-white);
}
.text-right {
  text-align: right;
}
.text-center {
  text-align: center;
}

/*=====================================
  LINKS
=====================================*/
a {
  color: var(--color-white);
  text-decoration: underline;
  transition: color var(--transition-fast);
}

a:hover,
a:active,
a:focus {
  color: var(--color-black);
}

/*=====================================
  LAYOUT & CONTAINER
=====================================*/
.wrap-landing {
  /* overflow: hidden; */
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100dvh;
  transition: background-color var(--transition-normal);
}

/*=====================================
  HEADER
=====================================*/
header {
  padding: var(--spacing-md) var(--spacing-lg);
  background: transparent;
}
#logo-svg {
  display: block;
  margin: 0 auto;
  width: 40px;
  height: auto;
}
#logo-svg path {
  transition: fill var(--transition-normal);
}

/*=====================================
  CONTENT
=====================================*/
.section-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-block: 40px 80px;
}

.section-col {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 991px;
  width: 100%;
  margin: 0 auto;
  padding: var(--spacing-sm);
}

/*=====================================
  FORM ELEMENTS
=====================================*/
picture {
  display: block;
}
picture img {
  max-width: 1280px;
  width: 100%;
  height: auto;
  border-radius: var(--border-radius-sm);
}

/*=====================================
FORM
=====================================*/
form {
  /* overflow-x: hidden; */
  position: relative;
}
.form-box {
  border-radius: var(--border-radius-md);
  display: block;
  animation: fadeInUp 0.6s ease-out forwards;
}
.form-box.fade-out {
  animation: fadeOutDown 0.4s ease-in forwards;
}

.form-group {
  margin: 0;
  padding: var(--spacing-md);
  border: 0;
  background-color: var(--color-white);
  border-radius: var(--border-radius-md);
}
/*=====================================
  FORM ELEMENTS
=====================================*/
label.label_input {
  display: block;
  font-size: 1rem;
  color: var(--color-black);
}
.form-control {
  display: block;
  width: 100%;
  padding: 0.75rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-white);
  background-color: var(--color-dark);
  background-clip: padding-box;
  border: 1px solid var(--color-dark);
  appearance: none;
  border-radius: var(--border-radius-sm);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.form-control:focus {
  color: var(--color-white);
  background-color: var(--color-dark);
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(253, 69, 13, 0.25);
}
.form-control::placeholder {
  color: var(--color-white);
  opacity: .5;
}

.form-check {
  position: relative;
  padding: 0;
}
.form-check span {
  display: block;
  font-size: clamp(0.9rem, 0.7933rem + 0.1722vw, 1rem);
}
.form-check span strong, .form-check .strong {
  font-size: clamp(1rem, 0.7867rem + 0.3445vw, 1.2rem);
  font-family: 'Proto Mono';
  font-weight: 700;
}
.form-check-label {
  display: block;
  border-radius: var(--border-radius-md);
  position: relative;
  border: 1px solid var(--color-black);
  color: var(--color-black);
  transition: var(--transition-fast);
}
.form-check-label:hover {
  cursor: pointer;
}
.form-check-input {
  visibility: hidden;
  position: absolute;
}
.form-check-input:checked + label {
  background-color: var(--color-dark);
  border-color: var(--color-dark);
  color: var(--color-white);
  transition: var(--transition-fast);
}

/* Terms checkbox - normal checkbox style */
.form-check.terms {
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.form-check.terms .form-check-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  visibility: visible;
  position: relative;
  width: 1.2em;
  height: 1.2em;
  margin: 0;
  border: 2px solid var(--color-black);
  border-radius: 0.25em;
  background-color: transparent;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.form-check.terms .form-check-input:checked {
  background-color: var(--color-black);
  border-color: var(--color-black);
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M530.8 134.1C545.1 144.5 548.3 164.5 537.9 178.8L281.9 530.8C276.4 538.4 267.9 543.1 258.5 543.9C249.1 544.7 240 541.2 233.4 534.6L105.4 406.6C92.9 394.1 92.9 373.8 105.4 361.3C117.9 348.8 138.2 348.8 150.7 361.3L252.2 462.8L486.2 141.1C496.6 126.8 516.6 123.6 530.9 134z" fill="white"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

.form-check.terms .form-check-input:focus {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 2px;
}

.form-check.terms .form-check-label {
  font-size: 1rem;
  border: none;
  background-color: transparent;
  color: var(--color-black);
  padding: 0;
  cursor: pointer;
}
.form-check.terms .form-check-label a {
  font-size: 1rem;
  color: var(--color-orange);
}
.form-check.terms .form-check-label:hover {
  color: var(--color-black);
}

/*=====================================
  BUTTONS
=====================================*/
.btn {
  position: relative;
  font-size: 1rem;
  color: var(--color-black);
  font-weight: bold;
  padding: 12px 24px;
  background-color: var(--color-lime);
  border: 2px solid var(--color-lime);
  outline: none;
  border-image: none;
  transition: all var(--transition-fast);
  border-radius: var(--border-radius-sm);
  cursor: pointer;
}
.btn:hover {
  color: var(--color-black);
  padding: 12px 32px;
  background-color: var(--color-lime);
  border-color: var(--color-lime);
}
.gap-buttons {
  gap: 1rem;
}

/*=====================================
  ANIMATIONS
=====================================*/
@keyframes fadeInUp {
  from {
    opacity: 0.01;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

/* Title animations */
@keyframes titleFadeInSlide {
  from {
    opacity: 0.01;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.step.active h1 {
  animation: titleFadeInSlide 0.8s ease-out forwards;
}

/* Reset animations when step is not active */
.step:not(.active) h1,
.step:not(.active) h2,
.step:not(.active) h3 {
  animation: none;
  opacity: 1;
}


/*=====================================
  FOOTER
=====================================*/
.footer {
  padding: 1.5rem 1rem 3rem;
}
.footer .social {
    display: flex;
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer .social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    text-decoration: none;
    border-radius: 21px;
    border: 1px solid rgba(240, 246, 246, 0.25);
    background: rgba(255, 255, 255, 0.05);
    transition: all var(--transition-fast);
}
.footer i {
    height: 1.25rem;
    width: 1.25rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.fa-facebook {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"%3E%3C!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--%3E%3Cpath fill="%23F0F6F6" d="M576 320C576 178.6 461.4 64 320 64C178.6 64 64 178.6 64 320C64 440 146.7 540.8 258.2 568.5L258.2 398.2L205.4 398.2L205.4 320L258.2 320L258.2 286.3C258.2 199.2 297.6 158.8 383.2 158.8C399.4 158.8 427.4 162 438.9 165.2L438.9 236C432.9 235.4 422.4 235 409.3 235C367.3 235 351.1 250.9 351.1 292.2L351.1 320L434.7 320L420.3 398.2L351 398.2L351 574.1C477.8 558.8 576 450.9 576 320z" /%3E%3C/svg%3E');
}
.fa-instagram {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"%3E%3C!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--%3E%3Cpath fill="%23F0F6F6" d="M320.3 205C256.8 204.8 205.2 256.2 205 319.7C204.8 383.2 256.2 434.8 319.7 435C383.2 435.2 434.8 383.8 435 320.3C435.2 256.8 383.8 205.2 320.3 205zM319.7 245.4C360.9 245.2 394.4 278.5 394.6 319.7C394.8 360.9 361.5 394.4 320.3 394.6C279.1 394.8 245.6 361.5 245.4 320.3C245.2 279.1 278.5 245.6 319.7 245.4zM413.1 200.3C413.1 185.5 425.1 173.5 439.9 173.5C454.7 173.5 466.7 185.5 466.7 200.3C466.7 215.1 454.7 227.1 439.9 227.1C425.1 227.1 413.1 215.1 413.1 200.3zM542.8 227.5C541.1 191.6 532.9 159.8 506.6 133.6C480.4 107.4 448.6 99.2 412.7 97.4C375.7 95.3 264.8 95.3 227.8 97.4C192 99.1 160.2 107.3 133.9 133.5C107.6 159.7 99.5 191.5 97.7 227.4C95.6 264.4 95.6 375.3 97.7 412.3C99.4 448.2 107.6 480 133.9 506.2C160.2 532.4 191.9 540.6 227.8 542.4C264.8 544.5 375.7 544.5 412.7 542.4C448.6 540.7 480.4 532.5 506.6 506.2C532.8 480 541 448.2 542.8 412.3C544.9 375.3 544.9 264.5 542.8 227.5zM495 452C487.2 471.6 472.1 486.7 452.4 494.6C422.9 506.3 352.9 503.6 320.3 503.6C287.7 503.6 217.6 506.2 188.2 494.6C168.6 486.8 153.5 471.7 145.6 452C133.9 422.5 136.6 352.5 136.6 319.9C136.6 287.3 134 217.2 145.6 187.8C153.4 168.2 168.5 153.1 188.2 145.2C217.7 133.5 287.7 136.2 320.3 136.2C352.9 136.2 423 133.6 452.4 145.2C472 153 487.1 168.1 495 187.8C506.7 217.3 504 287.3 504 319.9C504 352.5 506.7 422.6 495 452z"/%3E%3C/svg%3E');
}
.fa-youtube {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"%3E%3C!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--%3E%3Cpath fill="%23F0F6F6" d="M581.7 188.1C575.5 164.4 556.9 145.8 533.4 139.5C490.9 128 320.1 128 320.1 128C320.1 128 149.3 128 106.7 139.5C83.2 145.8 64.7 164.4 58.4 188.1C47 231 47 320.4 47 320.4C47 320.4 47 409.8 58.4 452.7C64.7 476.3 83.2 494.2 106.7 500.5C149.3 512 320.1 512 320.1 512C320.1 512 490.9 512 533.5 500.5C557 494.2 575.5 476.3 581.8 452.7C593.2 409.8 593.2 320.4 593.2 320.4C593.2 320.4 593.2 231 581.8 188.1zM264.2 401.6L264.2 239.2L406.9 320.4L264.2 401.6z"/%3E%3C/svg%3E');
}
.fa-linkedin {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M196.3 512L103.4 512L103.4 212.9L196.3 212.9L196.3 512zM149.8 172.1C120.1 172.1 96 147.5 96 117.8C96 103.5 101.7 89.9 111.8 79.8C121.9 69.7 135.6 64 149.8 64C164 64 177.7 69.7 187.8 79.8C197.9 89.9 203.6 103.6 203.6 117.8C203.6 147.5 179.5 172.1 149.8 172.1zM543.9 512L451.2 512L451.2 366.4C451.2 331.7 450.5 287.2 402.9 287.2C354.6 287.2 347.2 324.9 347.2 363.9L347.2 512L254.4 512L254.4 212.9L343.5 212.9L343.5 253.7L344.8 253.7C357.2 230.2 387.5 205.4 432.7 205.4C526.7 205.4 544 267.3 544 347.7L544 512L543.9 512z" fill="white"/></svg>');
}
.footer .social a:hover {
  border-color: var(--color-dark);
  background-color: rgba(0,0,0, .25);
}

/*=====================================
  RESPONSIVE DESIGN
=====================================*/
@media (min-width: 992px) {
  .result-bubble {
    border-radius: 6rem!important;
    padding-inline: 4rem;
  }
}
@media (max-width: 768px) {
  header {
    padding: var(--spacing-sm) var(--spacing-md);
  }
  #logo-svg {
    width: 40px;
  }
  #slides-container {
    padding-top: 70px;
    padding-bottom: var(--spacing-sm);
  }
  .btn {
    /* max-width: 130px; */
  }
}

@media (max-width: 480px) {
  #logo-svg {
    width: 35px;
  }
  .form-group {
    padding: var(--spacing-sm) 0.8rem;
  }
}
/*=====================================
  MODAL
=====================================*/
.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 9999;
  justify-content: center;
  align-items: center;
  animation: fadeIn 0.3s ease-out;
}

.modal-overlay.show {
  display: flex;
}

.modal-content {
  position: relative;
  background-color: var(--color-white);
  border-radius: var(--border-radius-md);
  padding: 3rem 2rem;
  max-width: 500px;
  width: 90%;
  text-align: center;
  animation: slideUp 0.4s ease-out;
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: transparent;
  border: none;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-black);
  padding: 0;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-fast);
}

.modal-close:hover {
  transform: scale(1.2);
}

.modal-title {
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.3rem);
  font-weight: 400;
  text-align: left;
  color: var(--color-black);
  margin-bottom: 0.5rem;
}

.modal-subtitle {
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
  font-weight: 700;
  text-align: left;
  color: var(--color-black);
  margin-bottom: 2rem;
}

.btn-download {
  display: inline-block;
  text-decoration: none;
  margin-top: 1rem;
  background-color: var(--color-orange);
  border-color: var(--color-orange);
  color: var(--color-white);
}
.btn-download:hover {
  background-color: var(--color-orange);
  border-color: var(--color-orange);
  color: var(--color-white);
}

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

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

@media (max-width: 480px) {
  .modal-content {
    padding: 2rem 1.5rem;
  }
  
  .modal-title {
    font-size: 1.5rem;
  }
  
  .modal-subtitle {
    font-size: 1rem;
  }
}


/* Estados de validación Orange */
input.error,
select.error,
textarea.error {
  border-color: #dc3545 !important;
}

input.success,
select.success,
textarea.success {
  border-color: #28a745 !important;
}

.radio-group.error,
.checkbox-group.error {
  border: 2px solid #dc3545 !important;
}

.error-message {
  color: #dc3545;
  font-size: 13px;
  margin-top: 6px;
  display: none;
  font-weight: 500;
}

.error-message.show {
  display: block;
  animation: slideDownError 0.3s ease;
}

@keyframes slideDownError {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}