html {
  height: 100%;
  background: 50% 50% no-repeat
    url('data:image/svg+xml,<svg viewBox="-20 -5 60 40" width="140" xmlns="http://www.w3.org/2000/svg" opacity="0.2"><path d="M1 8l11-7 11 7v8l-11 7-11-7zm0 0l11 8 11-8m0 8L12 8 1 16M12 1v7m0 8v7" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="2"/><text x="-12" y="32" font-size="5" font-family="monospace" fill="currentColor">Built on CodePen</text></svg>');
}
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Poppins:wght@600;700;800&display=swap');


:root {
  --dark: #173d3a;
  --dark-green: #245b53;
  --green: #42bfa4;
  --green-dark: #278f7c;
  --mint: #c9f1e4;
  --light: #effbf7;
  --cream: #fbfaf5;
  --gray: #69807d;
  --white: #ffffff;
}


* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


html {
  scroll-behavior: smooth;
}


body {
  font-family: "DM Sans", sans-serif;
  background: var(--cream);
  color: var(--dark);
}


button,
input,
textarea,
select {
  font-family: inherit;
}


button {
  cursor: pointer;
}


a {
  text-decoration: none;
  color: inherit;
}


/* NAV */

.navbar {
  height: 76px;
  padding: 0 7%;

  display: flex;
  align-items: center;
  justify-content: space-between;

  position: sticky;
  top: 0;
  z-index: 50;

  background: rgba(251,250,245,.92);
  backdrop-filter: blur(15px);

  border-bottom: 1px solid rgba(39,143,124,.1);
}


.logo img {
  width: 105px;
  height: 65px;
  object-fit: contain;
}


.navbar nav {
  display: flex;
  gap: 32px;

  font-size: 14px;
  font-weight: 600;

  color: #496763;
}


.navbar nav a:hover {
  color: var(--green-dark);
}


.nav-btn {
  border: none;

  padding: 11px 22px;

  border-radius: 50px;

  background: var(--dark);

  color: white;

  font-weight: 700;
}



/* HERO */

.hero {
  min-height: 680px;

  padding: 70px 8% 90px;

  display: grid;
  grid-template-columns: 1fr 1fr;

  align-items: center;

  gap: 40px;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 90% 20%,
      #c8f1e5,
      transparent 30%
    ),

    radial-gradient(
      circle at 0% 100%,
      #e2f8f0,
      transparent 30%
    );
}


.hero-left {
  max-width: 650px;
}


.tag {
  display: inline-block;

  padding: 8px 15px;

  border-radius: 50px;

  background: var(--mint);

  color: var(--green-dark);

  font-size: 11px;

  font-weight: 800;

  letter-spacing: .12em;
}


.hero h1 {
  margin-top: 22px;

  font-family: Poppins, sans-serif;

  font-size: clamp(50px, 6vw, 82px);

  line-height: 1.02;

  letter-spacing: -4px;
}


.hero h1 span {
  color: var(--green);

  display: block;
}


.hero-left > p {
  max-width: 570px;

  margin: 25px 0;

  color: var(--gray);

  font-size: 17px;
}


.hero-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}


.btn-primary,
.btn-secondary {

  border: none;

  padding: 15px 23px;

  border-radius: 50px;

  font-weight: 800;

  font-size: 14px;

  transition: .2s;
}


.btn-primary {
  background: var(--dark);
  color: white;
}


.btn-secondary {
  background: var(--mint-light);
  color: var(--green-dark);
}


.btn-primary:hover,
.btn-secondary:hover {
  transform: translateY(-3px);
}


.security {
  margin-top: 20px;

  color: #748a86;

  font-size: 12px;
}



/* HERO PHONE */

.hero-right {
  height: 500px;

  display: flex;

  justify-content: center;

  align-items: center;

  position: relative;
}


.phone {

  width: 275px;
  height: 490px;

  padding: 10px;

  background: var(--dark);

  border-radius: 42px;

  transform: rotate(5deg);

  box-shadow:
    0 35px 80px rgba(23,61,58,.25);

  position: relative;

  z-index: 3;
}


.phone-screen {

  width: 100%;
  height: 100%;

  padding: 55px 22px 25px;

  border-radius: 34px;

  background:
    linear-gradient(
      160deg,
      #effcf7,
      #c5eee0
    );

  display: flex;
  flex-direction: column;
  align-items: center;
}


.notch {

  width: 100px;
  height: 25px;

  position: absolute;

  top: 10px;
  left: 50%;

  transform: translateX(-50%);

  background: var(--dark);

  border-radius: 0 0 17px 17px;

  z-index: 5;
}


.mini-logo img {
  width: 135px;
  height: 135px;
  object-fit: contain;
}


.phone-title {
  font-family: Poppins;
  font-size: 20px;
  font-weight: 800;
}


.phone-subtitle {
  margin-top: 5px;

  color: var(--gray);

  font-size: 11px;
}


.phone-option {

  width: 100%;

  margin-top: 18px;

  padding: 15px;

  border-radius: 15px;

  background: white;

  color: var(--dark);

  display: flex;
  gap: 12px;

  align-items: center;

  font-size: 12px;

  font-weight: 700;

  box-shadow: 0 8px 20px rgba(0,0,0,.04);
}


.phone-option + .phone-option {
  margin-top: 10px;
}



/* FLOATING */

.floating {

  position: absolute;

  z-index: 5;

  padding: 14px 17px;

  display: flex;

  gap: 10px;

  align-items: center;

  border-radius: 18px;

  background: rgba(255,255,255,.9);

  box-shadow:
    0 20px 45px rgba(31,112,101,.15);
}


.floating small {

  display: block;

  color: var(--gray);

  font-size: 10px;
}


.floating strong {
  font-size: 12px;
}


.bubble1 {
  left: 0;
  top: 65px;
}


.bubble2 {
  right: 0;
  bottom: 60px;
}


.circle {
  position: absolute;

  border-radius: 50%;

  border: 2px dashed rgba(62,184,157,.3);
}


.circle1 {
  width: 430px;
  height: 430px;
}


.circle2 {
  width: 330px;
  height: 330px;
}



/* SECTIONS */

.actions,
.how,
.rights {
  padding: 100px 8%;
}


.actions {
  background: white;
}


.section-heading {

  max-width: 700px;

  margin: 0 auto 45px;

  text-align: center;
}


.section-heading > span {

  color: var(--green-dark);

  font-size: 11px;

  font-weight: 900;

  letter-spacing: .15em;
}


.section-heading h2 {

  margin-top: 10px;

  font-family: Poppins;

  font-size: clamp(32px,4vw,50px);

  letter-spacing: -2px;
}


.section-heading p {

  margin-top: 10px;

  color: var(--gray);
}



/* ACTION CARDS */

.action-grid {

  max-width: 1050px;

  margin: auto;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 20px;
}


.action-card {

  border: none;

  padding: 30px;

  display: grid;

  grid-template-columns: auto 1fr auto;

  gap: 18px;

  align-items: center;

  text-align: left;

  border-radius: 27px;

  transition: .25s;
}


.action-card:hover {

  transform: translateY(-5px);

  box-shadow:
    0 25px 55px rgba(31,112,101,.13);
}


.action-card.green {
  background: #ddf7ee;
}


.action-card.light {
  background: #effaf7;
}


.action-card.focus-highlight {

  box-shadow:
    0 0 0 4px var(--green),
    0 25px 55px rgba(31,112,101,.2);

  transform: translateY(-5px);
}


.action-icon {

  width: 55px;
  height: 55px;

  display: grid;

  place-items: center;

  background: white;

  border-radius: 16px;

  font-size: 22px;

  color: var(--green-dark);
}


.action-card h3 {
  font-family: Poppins;
  font-size: 17px;
}


.action-card p {

  margin-top: 5px;

  color: var(--gray);

  font-size: 13px;
}


.action-arrow {

  color: var(--green-dark);

  font-size: 22px;
}



/* HOW */

.how {
  background: var(--light);
}


.steps {

  display: grid;

  grid-template-columns: repeat(4,1fr);

  gap: 18px;
}


.step {

  padding: 27px;

  min-height: 230px;

  border-radius: 25px;

  background: white;

  box-shadow: 0 10px 35px rgba(39,143,124,.05);
}


.number {

  color: var(--green);

  font-size: 11px;

  font-weight: 900;
}


.step-icon {

  margin: 20px 0 13px;

  font-size: 30px;
}


.step h3 {

  font-family: Poppins;

  font-size: 16px;
}


.step p {

  margin-top: 8px;

  color: var(--gray);

  font-size: 13px;
}



/* DATA */

.stat-section {

  padding: 85px 8%;

  background: white;
}


.stat-box {

  max-width: 1100px;

  margin: auto;

  padding: 55px;

  display: grid;

  grid-template-columns: .8fr 1.2fr;

  gap: 50px;

  align-items: center;

  border-radius: 35px;

  background:
    linear-gradient(
      130deg,
      #173d3a,
      #2a8171
    );

  color: white;
}


.big-number {

  font-family: Poppins;

  font-size: clamp(55px,7vw,90px);

  line-height: .9;

  color: #a4e8d6;

  letter-spacing: -5px;
}


.stat-content > span {

  color: #a4e8d6;

  font-size: 10px;

  font-weight: 900;

  letter-spacing: .12em;
}


.stat-content h2 {

  margin-top: 10px;

  font-family: Poppins;

  font-size: 32px;
}


.stat-content p {

  margin-top: 15px;

  color: #d7eee9;

  font-size: 14px;
}


.stat-content small {

  display: block;

  margin-top: 18px;

  color: #9dc1ba;

  font-size: 10px;
}



/* RIGHTS */

.rights {
  background: var(--cream);
}


.rights-grid {

  display: grid;

  grid-template-columns: repeat(3,1fr);

  gap: 18px;
}


.right {

  padding: 28px;

  border-radius: 24px;

  background: white;

  transition: .2s;
}


.right:hover {

  transform: translateY(-4px);

  box-shadow:
    0 20px 50px rgba(31,112,101,.1);
}


.right-icon {

  font-size: 30px;

  margin-bottom: 15px;
}


.right h3 {

  font-family: Poppins;

  font-size: 16px;
}


.right p {

  color: var(--gray);

  margin-top: 7px;

  font-size: 13px;
}



/* FINAL */

.final {

  margin: 10px 8% 90px;

  padding: 60px;

  border-radius: 35px;

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 30px;

  background:
    linear-gradient(
      120deg,
      #91dfca,
      #dff8f0
    );
}


.final > div > span {

  color: var(--green-dark);

  font-size: 10px;

  font-weight: 900;

  letter-spacing: .15em;
}


.final h2 {

  margin-top: 10px;

  font-family: Poppins;

  font-size: clamp(30px,4vw,52px);

  letter-spacing: -2px;
}


.final p {

  margin-top: 10px;

  color: #4d706a;

  font-size: 14px;
}


.final button {

  border: none;

  padding: 15px 23px;

  background: white;

  color: var(--dark);

  border-radius: 50px;

  font-weight: 800;

  white-space: nowrap;
}



/* FOOTER */

footer {

  padding: 50px 8%;

  background: #12332f;

  color: white;

  display: flex;

  justify-content: space-between;

  gap: 30px;

  flex-wrap: wrap;
}


footer p {

  margin-top: 5px;

  color: #8db2ab;

  font-size: 12px;
}


.footer-slogan {

  color: #a4e8d6;

  font-weight: 700;

  font-size: 13px;
}


.admin-link {

  text-align: center;

  padding: 10px;

  background: #0e2926;
}


.admin-link a {

  color: #5c7a75;

  font-size: 11px;

  text-decoration: none;
}



/* MODALES */

.modal {

  display: none;

  position: fixed;

  inset: 0;

  z-index: 100;

  padding: 20px;

  align-items: center;

  justify-content: center;

  background: rgba(10,40,37,.62);

  backdrop-filter: blur(8px);
}


.modal.show {
  display: flex;
}


.modal-content {

  width: min(620px,100%);

  max-height: 90vh;

  overflow-y: auto;

  position: relative;

  padding: 38px;

  border-radius: 30px;

  background: var(--cream);

  box-shadow:
    0 30px 90px rgba(0,0,0,.25);
}


.small-modal {
  width: min(500px,100%);
}


.close {

  position: absolute;

  top: 15px;
  right: 18px;

  width: 38px;
  height: 38px;

  border: none;

  border-radius: 50%;

  background: #e4f3ee;

  font-size: 23px;

  color: var(--dark);
}


.modal-icon {

  width: 52px;
  height: 52px;

  display: grid;

  place-items: center;

  border-radius: 15px;

  background: var(--mint);

  font-size: 22px;

  margin-bottom: 18px;
}


.modal-tag {

  color: var(--green-dark);

  font-size: 10px;

  font-weight: 900;

  letter-spacing: .13em;
}


.modal-content h2 {

  margin-top: 7px;

  font-family: Poppins;

  font-size: 28px;
}


.modal-description {

  margin: 8px 0 20px;

  color: var(--gray);

  font-size: 13px;
}


form {

  display: grid;

  gap: 9px;
}


label {

  margin-top: 8px;

  font-size: 12px;

  font-weight: 800;
}


label small {

  color: var(--gray);

  font-weight: 400;
}


input,
textarea,
select {

  width: 100%;

  padding: 13px;

  border: 1px solid #c9e1da;

  border-radius: 13px;

  outline: none;

  background: white;

  color: var(--dark);
}


textarea {

  min-height: 140px;

  resize: vertical;
}


input:focus,
textarea:focus,
select:focus {

  border-color: var(--green);

  box-shadow:
    0 0 0 4px rgba(62,184,157,.1);
}


.privacy {

  display: flex;

  gap: 10px;

  padding: 13px;

  margin: 10px 0;

  border-radius: 13px;

  background: #e6f7f1;

  color: #607873;

  font-size: 11px;
}


.send {

  border: none;

  padding: 14px;

  border-radius: 50px;

  background: var(--dark);

  color: white;

  font-weight: 800;

  transition: .2s;
}


.send:hover {
  background: var(--green-dark);
}


.success-modal {
  text-align: center;
}


.success-icon {

  width: 70px;
  height: 70px;

  margin: 0 auto 18px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background: var(--mint);

  color: var(--green-dark);

  font-size: 30px;

  font-weight: 900;
}


.code {

  margin: 20px 0;

  padding: 17px;

  border: 2px dashed var(--green);

  border-radius: 14px;

  background: white;

  font-family: monospace;

  font-size: 22px;

  font-weight: 900;

  letter-spacing: 2px;

  color: var(--green-dark);
}


#resultado {
  margin-top: 20px;
}


.estado {

  padding: 15px;

  margin-top: 10px;

  border-radius: 13px;

  background: white;

  display: flex;

  gap: 10px;

  align-items: center;

  font-size: 13px;
}


.estado span {

  width: 26px;
  height: 26px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background: var(--mint);

  color: var(--green-dark);

  font-weight: 900;
}



/* RESPONSIVE */

@media(max-width:900px) {

  .hero {
    grid-template-columns: 1fr;
  }

  .hero-right {
    min-height: 450px;
  }

  .steps {
    grid-template-columns: 1fr 1fr;
  }

  .rights-grid {
    grid-template-columns: 1fr 1fr;
  }

  .stat-box {
    grid-template-columns: 1fr;
  }

}


@media(max-width:650px) {

  .navbar nav {
    display: none;
  }

  .hero {
    padding: 50px 6%;
  }

  .hero h1 {
    font-size: 52px;
  }

  .action-grid,
  .rights-grid,
  .steps {
    grid-template-columns: 1fr;
  }

  .actions,
  .how,
  .rights,
  .stat-section {
    padding-left: 6%;
    padding-right: 6%;
  }

  .stat-box {
    padding: 35px 25px;
  }

  .final {
    margin-left: 6%;
    margin-right: 6%;

    padding: 40px 28px;

    flex-direction: column;

    align-items: flex-start;
  }

  .modal-content {
    padding: 30px 22px;
  }

}