/* Identidad FINCATEC. Colores HEX y tipografía según el brandboard del propietario. */
@font-face {
  font-family: 'Open Sans';
  src: url('assets/fonts/open-sans-regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('assets/fonts/open-sans-bold.ttf') format('truetype');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
:root {
  --green: #31e090;
  --blue: #224cba;
  --navy: #000a7b;
  --lime: #d5fc47;
  --sky: #b0cdff;
  --violet: #7836f9;
  --mint: var(--green);
  --ink: var(--navy);
  --muted: #4d5a7b;
  --cream: #f6f5f1;
  --line: #d5ddee;
  --font: 'Open Sans', Arial, sans-serif;
  --display: var(--font);
}

body { background: var(--cream); }
button:focus-visible, a:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible { outline-color: var(--violet); }
.hero a:focus-visible, .app-section button:focus-visible, .footer a:focus-visible {
  outline-color: var(--lime);
}
.header { background: var(--cream); }
.brand img { width: 196px; }
.button { font-weight: 700; border-radius: 7px; }
.button:hover { background: var(--navy); }
.button.mint { color: var(--navy); }
.button.mint:hover { background: var(--lime); }
.button.dark:hover { background: var(--blue); }
.hero { background: var(--navy); }
.hero-image { opacity: .72; }
.hero-shade {
  background: linear-gradient(90deg, rgb(0 10 123 / 95%), rgb(0 10 123 / 76%) 45%, rgb(0 10 123 / 28%)),
              linear-gradient(0deg, rgb(0 10 123 / 60%), transparent 40%);
}
.hero h1 { font-weight: 700; font-size: clamp(64px, 7.2vw, 108px); line-height: 1.09; letter-spacing: -5px; }
.hero-description { color: #fff; max-width: 450px; }
.hero .eyebrow.light { color: var(--sky); }
.hero-side { color: #fff; }
.hero-geometry { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.brand-dots {
  position: absolute;
  width: 140px;
  height: 140px;
  top: 48px;
  right: 7%;
  opacity: .75;
  background-image: radial-gradient(circle, #fff 2.2px, transparent 2.8px);
  background-size: 25px 25px;
}
.brand-chevrons {
  position: absolute;
  width: 52px;
  height: 128px;
  right: 21%;
  top: 50px;
  background: url('assets/chevrons.svg') center / contain no-repeat;
}
.brand-frame {
  position: absolute;
  width: 380px;
  height: 290px;
  right: -55px;
  bottom: -110px;
  border: 1px solid rgb(255 255 255 / 65%);
  border-radius: 40px;
}
.brand-frame::before {
  content: '';
  position: absolute;
  width: 320px;
  height: 220px;
  right: 60px;
  bottom: 45px;
  border: 1px solid rgb(255 255 255 / 45%);
  border-radius: 32px;
}
h2, .solution h3, .product h3 { font-weight: 700; }
h2 span { color: var(--blue); }
.text-link { font-weight: 700; }
.solution { border-radius: 18px; background: #fff; }
.solution-top { color: var(--blue); }
.solution.blue { background: var(--blue); }
.solution.pale { background: var(--sky); }
.solution.pale > p:not(.eyebrow) { color: var(--navy); }
.solution.pale .text-link { color: var(--navy); border-color: rgb(0 10 123 / 25%); }
.pill { color: var(--navy); border-color: rgb(0 10 123 / 35%); font-weight: 700; }
.product-grid { gap: 28px; }
.product { border-top: 2px solid var(--blue); }
.product-number { color: var(--violet); font-weight: 700; }
.digital-art { background: var(--green); border-radius: 30px; min-height: 550px; }
.farm-illustration { position: absolute; width: 100%; height: 100%; object-fit: cover; }
.art-label { color: var(--navy); font-weight: 700; }
.data-note { background: var(--cream); border-radius: 8px; color: var(--navy); box-shadow: none; }
.data-note .dot { background: var(--blue); }
.steps h4 { font-weight: 700; }
.app-section { background: var(--navy); }
.app-section::before {
  content: '';
  position: absolute;
  width: 270px;
  height: 160px;
  right: -40px;
  top: -65px;
  border: 1px solid rgb(176 205 255 / 40%);
  border-radius: 35px;
}
.app-copy { position: relative; }
.app-copy .eyebrow, .app-note, .concept-tag { color: var(--sky); }
.app-copy > p:not(.eyebrow):not(.app-note) { color: #fff; }
.phone { background: var(--cream); border-color: var(--blue); box-shadow: 25px 30px 70px rgb(0 0 0 / 20%); }
.phone-speaker { background: var(--navy); }
.phone-eyebrow, .phone-row small, .phone-bottom { color: var(--muted); }
.phone-landscape { background: var(--sky); }
.phone-landscape::before { background: var(--blue); }
.phone-landscape::after { background: var(--green); }
.phone-landscape span { background: var(--lime); }
.phone-symbol { background: var(--sky); color: var(--navy); }
.phone-bottom { border-color: var(--line); }
.contact { background: var(--green); position: relative; overflow: hidden; }
.contact::after {
  content: '';
  position: absolute;
  width: 310px;
  height: 310px;
  right: -200px;
  top: -140px;
  border-radius: 50%;
  background: var(--lime);
}
.contact .eyebrow, .contact p:not(.eyebrow) { color: var(--navy); }
.contact-actions { position: relative; z-index: 1; }
.contact-direct { color: var(--navy); font-weight: 700; text-decoration: underline; text-underline-offset: 5px; }
.footer { background: var(--blue); color: #fff; }
.footer-top p { color: var(--lime); font-weight: 700; }
.footer-bottom span:last-child { color: #fff; }
dialog { background: var(--cream); border-radius: 18px; }
dialog::backdrop { background: rgb(0 10 123 / 70%); }
input, select, textarea { border-color: #9aaad1; }
.menu-toggle span { background: var(--navy); }

@media (min-width: 1500px) {
  .hero-content { padding-top: 70px; }
}
@media (max-width: 1050px) {
  .hero h1 { font-size: 86px; }
  .brand-dots { right: 6%; width: 115px; }
  .brand-chevrons { right: 24%; }
  .digital-art { min-height: 530px; }
}
@media (max-width: 760px) {
  .brand img { width: 163px; }
  nav { background: var(--cream); }
  .hero h1 { font-size: clamp(52px, 13vw, 78px); letter-spacing: -3px; }
  .hero-shade {
    background: linear-gradient(90deg, rgb(0 10 123 / 94%), rgb(0 10 123 / 70%)),
                linear-gradient(0deg, rgb(0 10 123 / 40%), transparent);
  }
  .brand-dots { top: auto; bottom: 105px; right: -10px; width: 88px; height: 90px; opacity: .4; }
  .brand-chevrons { top: auto; bottom: 245px; right: 6%; width: 28px; height: 80px; opacity: .7; }
  .brand-frame { width: 210px; height: 210px; right: -120px; bottom: -100px; }
  .hero-content { padding-bottom: 135px; }
  .digital-art { min-height: 380px; border-radius: 22px; }
  .data-note { left: 20px; right: 20px; bottom: 24px; font-size: 10px; padding: 15px; }
  .art-label { left: 24px; top: 26px; }
  .app-copy h2 { font-size: clamp(30px, 9.4vw, 43px); letter-spacing: -1.6px; }
  .contact .eyebrow { max-width: 235px; }
  .contact-actions .button { min-width: 0; width: 100%; }
  .contact h2 { font-size: clamp(46px, 15vw, 65px); }
  .product h3 { font-size: clamp(22px, 6vw, 27px); }
}