:root {
  --ink: #003B7A;
  --muted: #4c6175;
  --green: #0066B3;
  --mint: #cbeedc;
  --paper: #F7F7F5;
  --line: #d7e2dc;
  --navy: #003B7A;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 180px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.65 'Montserrat', Arial, sans-serif;
}

a { color: inherit; text-decoration: none; }
button, input { font: inherit; }

a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid #b57922;
  outline-offset: 5px;
}

.wrap {
  width: min(1160px, calc(100% - 64px));
  margin: auto;
}

header {
  border-bottom: 1px solid var(--line);
  background: #F7F7F5f5;
  position: sticky;
  top: 0;
  z-index: 5;
}

.nav {
  min-height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 27px;
  font-weight: 750;
  letter-spacing: -1px;
  flex-shrink: 0;
}

.mark {
  width: 35px;
  height: 35px;
  background: var(--navy);
  color: var(--mint);
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-size: 26px;
}

.navlinks {
  display: flex;
  align-items: center;
  gap: 27px;
  font-size: 14px;
  font-weight: 600;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px 22px;
  border-radius: 6px;
  background: linear-gradient(180deg,#0066B3,#003B7A);
  color: white;
  text-decoration: none;
  font-weight: 600;
  border: 1px solid #0066B3;
}

.btn.light {
  background: #F7F7F5;
  border-color: #F7F7F5;
  color: var(--navy);
}

.textlink {
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid #78948b;
  padding-bottom: 4px;
}

.eyebrow {
  font-size: 12px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  font-weight: 750;
  color: var(--green);
  margin: 0 0 18px;
}

h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-weight: 700; }
h3 { font-weight: 600; }

h1 {
  font-size: clamp(38px, 4.4vw, 62px);
  line-height: 1.08;
  letter-spacing: -2.3px;
  margin-bottom: 27px;
}

h1 em {
  font-style: normal;
  color: var(--green);
}

h2 {
  font-size: clamp(30px, 3vw, 43px);
  line-height: 1.16;
  letter-spacing: -1.4px;
  margin-bottom: 22px;
}

h3 {
  font-size: 21px;
  line-height: 1.3;
  margin-bottom: 14px;
}

p { color: var(--muted); }

.hero {
  padding: 85px 0 65px;
  display: grid;
  grid-template-columns: 1.12fr 1fr;
  gap: 65px;
  align-items: center;
}

.hero .intro {
  font-size: 18px;
  max-width: 540px;
}

.actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 30px;
}

.small { font-size: 13px; }
.hero-note { margin: 22px 0 0; font-size: 13px; }

.hero-visual {
  background: var(--navy);
  border-radius: 15px;
  min-height: 418px;
  padding: 30px;
  box-shadow: 0 24px 60px #193d3a18;
  position: relative;
  overflow: hidden;
  color: white;
  border-top: 4px solid #2EB872;
}

.hero-visual:before {
  content: '';
  position: absolute;
  width: 290px;
  height: 290px;
  border: 1px solid #ffffff15;
  border-radius: 50%;
  right: -100px;
  top: -110px;
}

.visual-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  letter-spacing: 1.4px;
  color: #d1e3f1;
}

.dot {
  display: inline-block;
  background: #2EB872;
  border-radius: 50%;
  width: 6px;
  height: 6px;
  margin-right: 7px;
}

.doc {
  background: #fbfdf9;
  color: var(--ink);
  padding: 20px 24px;
  border-radius: 7px;
  width: 76%;
  margin-top: 32px;
}

.doc strong { font-size: 14px; }
.doc-lines { height: 6px; background: #dce6e0; margin-top: 11px; width: 100%; }
.doc-lines.short { width: 60%; }

.bridge { color: #cbeedc; padding: 13px 22px; font-size: 13px; }

.data {
  margin-left: 28px;
  background: #074b8c;
  border: 1px solid #5385b5;
  border-radius: 7px;
  padding: 20px;
  font: 13px/1.8 Consolas, monospace;
}

.data span { color: #8ee0b5; }
.visual-caption { color: #d1e3f1; font-size: 12px; margin: 20px 0 0; }

.strip {
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg, #2EB872, #0066B3) 1;
  border-bottom: 1px solid var(--line);
  padding: 22px 0;
  display: flex;
  gap: 25px;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

section { padding: 85px 0; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 95px; }
.lead { font-size: 18px; }

.issue {
  padding: 19px 0;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 35px 1fr;
  gap: 15px;
}

.issue:first-child { padding-top: 0; }
.issue span { font: 13px Consolas, monospace; color: var(--green); }
.issue p { margin: 5px 0 0; }
.issue h3 { font-size: 18px; margin: 0; }

.tint { background: #edf3f8; }
.section-heading { max-width: 710px; margin-bottom: 38px; }

.pipeline {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 15px;
  list-style: none;
  padding: 0;
  margin: 35px 0;
}

.pipeline li {
  position: relative;
  background: #fbfdfb;
  border: 1px solid #cadbd1;
  padding: 22px 18px;
  border-radius: 8px;
  border-top: 3px solid #2EB872;
}

.pipeline li:not(:last-child):after {
  content: '→';
  position: absolute;
  right: -14px;
  top: 48%;
  z-index: 1;
  color: var(--green);
  font-weight: bold;
}

.pipeline .num { font: 13px Consolas, monospace; color: var(--green); display: block; margin-bottom: 27px; }
.pipeline h3 { font-size: 17px; }
.pipeline p { font-size: 14px; margin: 0; }

.pipeline li:last-child {
  background: var(--navy);
  color: white;
  border-color: var(--navy);
  border-top-color: #2EB872;
}

.pipeline li:last-child p, .pipeline li:last-child .num { color: #d1e3f1; }

.note { font-size: 13px; color: var(--muted); }

.badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  border-radius: 30px;
  padding: 5px 11px;
  background: #dcf1e3;
  color: #175e43;
}

.evidence-heading { display: flex; justify-content: space-between; align-items: start; gap: 30px; }
.evidence { display: grid; grid-template-columns: .8fr 1.2fr; gap: 24px; }

.evidence figure {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  align-self: start;
}

.frame-title {
  padding: 15px 21px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
}

.placeholder {
  min-height: 285px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  padding: 28px;
  background: repeating-linear-gradient(135deg,#f5f8f5,#f5f8f5 12px,#f1f5f1 12px,#f1f5f1 13px);
}

.placeholder strong { font-size: 17px; }
.placeholder p { max-width: 320px; font-size: 14px; margin: 10px 0 16px; }
.placeholder input { max-width: 100%; font-size: 12px; }
.placeholder label { font-size: 13px; margin-bottom: 8px; }

.evidence img { display: block; width: 100%; height: auto; max-height: none; object-fit: contain; background: #fff; }
.evidence img[hidden] { display: none; }

figcaption { padding: 17px 21px; font-size: 13px; color: var(--muted); }

.more-shots { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.more-shots span { border: 1px dashed #a9bdb1; border-radius: 5px; padding: 8px 12px; font-size: 12px; color: var(--muted); }

.dark { background: var(--navy); color: #f5faf5; }
.dark p { color: #bdd0d0; }
.dark .eyebrow { color: #9ce2c5; }

.ai-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 23px; margin-top: 35px; }
.ai-panel { border-top: 1px solid #54726f; padding-top: 22px; }
.ai-panel .badge { margin-bottom: 18px; }
.ai-panel .future { background: #244b55; color: #d8e3ec; }

.audiences { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.audiences article { border-top: 2px solid #8fb8a3; padding-top: 22px; }
.audiences p { font-size: 15px; }

.business {
  margin-top: 35px;
  padding: 30px 35px;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 40px;
}
.business p:last-child { margin-bottom: 0; }

.roadmap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 23px; }
.roadmap article { border: 1px solid var(--line); background: white; border-radius: 8px; padding: 27px; }
.roadmap article:first-child { border-top: 4px solid var(--green); }
.roadmap article:nth-child(2) { border-top: 4px solid #b58b3f; }
.roadmap article:nth-child(3) { border-top: 4px solid #6c87a5; }
.roadmap .badge { margin-bottom: 25px; }

.develop { background: #faf0db; color: #775415; }
.future { background: #eaf0f7; color: #3c5b7c; }
.roadmap h3 { font-size: 22px; }
.roadmap ul { padding-left: 19px; color: var(--muted); font-size: 14px; }
.roadmap li { padding: 5px 0; }

.team { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; margin-top: 35px; }
.person { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 24px; align-items: start; border-top: 1px solid var(--line); padding-top: 28px; }
.person h3 { line-height: 1.4; font-size: 19px; margin-bottom: 5px; }
.person p { font-size: 14px; margin-bottom: 8px; }

.founder-photo { width: 190px; height: 285px; background: #edf3f8; border-radius: 8px; overflow: hidden; }
.founder-photo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.founder-photo.jose img { object-fit: cover; object-position: center; }

.pending { color: #64716c; font-size: 12px; }

.cta { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.cta h2 { max-width: 650px; }
.cta p { max-width: 650px; }

.contact { margin-top: 20px; font-size: 14px; }
.contact a { color: #c0eddd; }

footer { padding: 30px 0; }
.footer { display: flex; justify-content: space-between; gap: 25px; color: var(--muted); font-size: 12px; }

.reviewbar { background: #e9eddf; color: #4b5947; padding: 8px 20px; text-align: center; font-size: 12px; }
.skip { position: absolute; left: 15px; top: -100px; }
.skip:focus { top: 10px; z-index: 10; background: white; padding: 10px; }

    .brand-logo { 
    display: block; 
    width: 130px;
    height: auto; 
    max-height: 80px;
    object-fit: contain;
    border-radius: 0; 
    }
.brand-footer { display: block; width: 190px; height: auto; margin-bottom: 15px; }

.problem-intro { grid-template-columns: .85fr 1.15fr; gap: 45px; align-items: center; }
.problem-photo { margin: 0; border: 1px solid #d7e2dc; border-radius: 10px; overflow: hidden; background: #fff; }
.problem-photo img { display: block; width: 100%; height: auto; }
.problem-photo figcaption { font-size: 14px; color: #003B7A; padding: 16px 20px; }
.problem-photo figcaption span { display: block; margin-top: 4px; font-size: 12px; color: #4c6175; }

.problem-issues { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 38px; }
.problem-issues .issue, .problem-issues .issue:first-child { padding: 20px 0 0; border-bottom: 0; border-top: 1px solid #d7e2dc; grid-template-columns: 25px 1fr; gap: 10px; }

.brand-placeholder, .brand-footer-placeholder { display: grid; place-items: center; text-align: center; border: 1px dashed #7d9bb6; color: #003B7A; background: #edf3f8; font-weight: 700; letter-spacing: 1px; }
.brand-placeholder { width: 190px; height: 146px; border-radius: 5px; font-size: 28px; line-height: 1.15; }
.brand-placeholder small, .brand-footer-placeholder small, .photo-placeholder small, .problem-image-placeholder small, .mvp-image-placeholder small { font-size: 10px; font-weight: 500; letter-spacing: 1px; }
.brand-footer-placeholder { width: 190px; height: 60px; margin-bottom: 15px; font-size: 24px; }

.photo-placeholder { width: 100%; height: 100%; display: grid; place-items: center; text-align: center; color: #003B7A; font-size: 14px; line-height: 1.7; background: repeating-linear-gradient(135deg,#edf3f8,#edf3f8 12px,#e4edf4 12px,#e4edf4 13px); object-fit: contain !important; }
.problem-image-placeholder { display: flex; align-items: center; justify-content: center; flex-direction: column; min-height: 280px; text-align: center; color: #003B7A; background: repeating-linear-gradient(135deg,#edf3f8,#edf3f8 12px,#e4edf4 12px,#e4edf4 13px); font-weight: 700; letter-spacing: 1px; }
.mvp-image-placeholder { display: flex !important; align-items: center; justify-content: center; flex-direction: column; min-height: 240px; text-align: center; color: #003B7A; background: repeating-linear-gradient(135deg,#f5f8f5,#f5f8f5 12px,#f1f5f1 12px,#f1f5f1 13px); font-weight: 700; letter-spacing: 1px; }

/* Media Queries */
@media(max-width: 1000px) {
  .person { grid-template-columns: 1fr; }
  .founder-photo { width: 100%; max-width: 250px; height: 330px; }
  .founder-photo.jose img { object-fit: contain; }
}

@media(max-width: 950px) {
  .hero { gap: 30px; }
  .navlinks { gap: 15px; }
  .split { gap: 40px; }
  .pipeline { grid-template-columns: 1fr; }
  .pipeline li { padding: 18px 22px; display: grid; grid-template-columns: 30px 1fr; gap: 0 15px; }
  .pipeline .num { margin: 0; grid-row: span 2; }
  .pipeline h3 { margin-bottom: 5px; }
  .pipeline li:not(:last-child):after { content: '↓'; right: 50%; top: auto; bottom: -18px; }
  .roadmap { gap: 12px; }
  .roadmap article { padding: 20px; }
  .strip { flex-wrap: wrap; }
  .person { gap: 15px; }
}

@media(max-width: 850px) {
  .problem-intro { grid-template-columns: 1fr; gap: 25px; }
  .problem-issues { grid-template-columns: 1fr; gap: 18px; }
  .problem-photo { max-width: 720px; }
}

@media(max-width: 700px) {
  .wrap { width: calc(100% - 36px); }
    .nav {
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    }
    .brand-logo { 
    display: block; 
    width: 130px;
    height: auto; 
    max-height: 42px;
    object-fit: contain;
    border-radius: 0; 
    }
  .navlinks { width: 100%; justify-content: space-between; font-size: 12px; gap: 8px; flex-wrap: wrap; }
  .navlinks .btn { padding: 5px 10px; min-height: 38px; }
  .hero { grid-template-columns: 1fr; padding: 35px 0; gap: 35px; }
  h1 { letter-spacing: -1.5px; }
  .hero-visual { min-height: 380px; padding: 24px; }
  .strip { gap: 12px 22px; font-size: 12px; }
  section { padding: 55px 0; }
  .split, .evidence, .ai-panels, .audiences, .roadmap, .team, .business { grid-template-columns: 1fr; gap: 27px; }
  .evidence-heading, .cta, .footer { display: block; }
  .evidence-heading .badge { margin-bottom: 20px; }
  .business { padding: 25px; }
  .business h3 { margin: 0; }
  .person { grid-template-columns: 130px minmax(0,1fr); gap: 18px; }
  .founder-photo { width: 130px; height: 215px; }
  .founder-photo.jose img { object-fit: contain; }
  .cta .btn { margin-top: 8px; }
  .footer p { margin: 10px 0; }
  .reviewbar { font-size: 11px; }
  .evidence img { height: auto; }
  .hero .intro { font-size: 17px; }
  header { position: static; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px; 
}
  .brand-placeholder { width: 180px; height: 138px; }
  .brand-footer-placeholder { width: 180px; }
}

@media(max-width: 360px) {
  .person { grid-template-columns: 1fr; }
  .founder-photo { width: 180px; height: 270px; }
}

@media(prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

@media print {
  header { position: static; }
  .reviewbar, input, .placeholder label { display: none; }
  section { padding: 35px 0; }
  .dark, .hero-visual { print-color-adjust: exact; }
  a { text-decoration: none; }
  .roadmap article, .evidence figure { break-inside: avoid; }
}

/* ==========================================================
   ESTILOS PARA EL MVP INTERACTIVO INTEGRADO EN EL HERO
   ========================================================== */

.interactive-hero-mvp {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.mvp-widget-container {
  margin-top: 15px;
}

.analyzer-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.upload-dropzone {
  border: 2px dashed #42729f;
  background: rgba(255, 255, 255, 0.03);
  padding: 22px;
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  position: relative;
  transition: border-color 0.2s, background 0.2s;
}

.upload-dropzone:hover {
  border-color: #2EB872;
  background: rgba(46, 184, 114, 0.04);
}

.file-input-hidden {
  position: absolute;
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.dropzone-content strong {
  color: white;
  font-size: 14px;
  display: block;
  margin-bottom: 3px;
}

.dropzone-content p {
  color: #a8c2de;
  font-size: 12px;
  margin: 0 0 10px;
}

.small-btn {
  padding: 6px 14px;
  min-height: 32px;
  font-size: 12px;
}

.password-field-wrap {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.small-label {
  font-size: 12px;
  color: #cbdcf0;
}

.password-input-group {
  display: flex;
  gap: 8px;
}

.text-input {
  flex: 1;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid #42729f;
  border-radius: 6px;
  padding: 8px 12px;
  color: white;
  font-size: 13px;
}

.text-input::placeholder {
  color: #8aaec9;
}

.toggle-pass-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid #42729f;
  border-radius: 6px;
  padding: 0 12px;
  cursor: pointer;
  color: white;
}

.submit-engine-btn {
  width: 100%;
  margin-top: 5px;
  cursor: pointer;
  text-align: center;
  justify-content: center;
}

.loading-state, .success-state {
  margin-top: 15px;
  text-align: center;
  padding: 25px 15px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: #2EB872;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.success-icon {
  width: 38px;
  height: 38px;
  background: #2EB872;
  color: white;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: bold;
}

.success-state strong {
  color: white;
  font-size: 15px;
}

.small-metrics {
  font-size: 12px;
  color: #a8c2de;
  margin: 0;
}