:root {
  --ink: #101A1F;
  --muted: #526373;
  --ocean: #085BAA;
  --paper: #F4F5FA;
  --line: #DCE5EF;
  --sky: #A7D2FB;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Bahnschrift, Arial, sans-serif;
  line-height: 1.65;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #085BAA;
  outline-offset: 4px;
}
a,
button {
  transition:
    background 0.2s,
    color 0.2s,
    transform 0.2s;
}
p {
  color: var(--muted);
  margin: 0 0 20px;
}
h1,
h2,
h3 {
  line-height: 1.13;
  letter-spacing: -0.045em;
  margin: 0 0 22px;
}
h1 {
  font-size: clamp(40px, 4.5vw, 66px);
  font-weight: 750;
}
h1 span {
  color: var(--ocean);
}
h2 {
  font-size: clamp(30px, 3.2vw, 43px);
}
h3 {
  font-size: 23px;
  letter-spacing: -0.025em;
}
img {
  max-width: 100%;
}
.container {
  width: min(1180px, calc(100% - 64px));
  margin-inline: auto;
}
.header {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.header-inner {
  height: 94px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -1.5px;
  line-height: 1;
}
.brand-dot {
  color: var(--ocean);
  margin-left: -10px;
}
nav {
  display: flex;
  gap: 30px;
}
nav a {
  font-size: 14px;
  color: var(--muted);
  padding: 12px 0;
  position: relative;
}
nav a:hover,
nav a[aria-current] {
  color: var(--ocean);
}
nav a[aria-current]:after {
  content: "";
  height: 3px;
  background: var(--ocean);
  border-radius: 3px;
  position: absolute;
  bottom: 3px;
  left: 0;
  right: 0;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
  padding: 15px 24px;
  border: 0;
  border-radius: 9px;
  background: var(--ocean);
  color: white;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
}
.button:hover {
  background: #04305A;
  transform: translateY(-2px);
}
.button.small {
  padding: 11px 18px;
}
.button.light {
  background: white;
  color: var(--ocean);
}
.text-link {
  font-size: 14px;
  font-weight: bold;
  color: var(--ocean);
}
.text-link:hover {
  text-decoration: underline;
}
.menu-toggle {
  display: none;
}
.hero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 55px;
  align-items: center;
  padding-block: 86px 80px;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid #C5DDF4;
  border-radius: 30px;
  font-size: 10px;
  letter-spacing: 1.1px;
  font-weight: bold;
  background: #E8F2FC;
}
.hero .pill {
  margin-bottom: 27px;
}
.live-dot {
  height: 7px;
  width: 7px;
  display: inline-block;
  border-radius: 50%;
  background: #085BAA;
  flex-shrink: 0;
}
.hero-copy > p {
  max-width: 490px;
  font-size: 16px;
}
.actions {
  display: flex;
  align-items: center;
  gap: 25px;
  margin-top: 30px;
}
.hero-note {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font-size: 12px;
  margin-top: 28px;
}
.hero-note > span {
  color: var(--ocean);
  font-size: 22px;
}
.product-scene {
  position: relative;
  padding: 37px 10px 45px;
  background: radial-gradient(
    ellipse,
    #A7D2FB 0%,
    #E0EEFC 45%,
    transparent 72%
  );
}
.app-preview {
  display: flex;
  background: #fff;
  border: 1px solid #DCE5EF;
  border-radius: 14px;
  box-shadow: 0 24px 65px #04305A1c;
  transform: rotate(-2deg);
  overflow: hidden;
}
.app-sidebar {
  background: #F4F5FA;
  width: 51px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 21px;
  padding: 18px 8px;
  color: #526373;
}
.app-sidebar span {
  font-size: 19px;
  line-height: 1.5;
}
.side-active {
  color: var(--ocean);
}
.app-content {
  flex: 1;
  padding: 19px;
  min-width: 0;
}
.app-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #DCE5EF;
  padding-bottom: 14px;
  font-size: 11px;
}
.avatar {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #D5E8FA;
  color: var(--ocean);
}
.app-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
  gap: 6px;
}
.app-heading small {
  font-size: 8px;
  letter-spacing: 1px;
  color: var(--ocean);
}
.app-heading h3 {
  font-size: 18px;
  margin: 6px 0;
  letter-spacing: -0.6px;
}
.status {
  font-size: 8px;
  background: #E8F2FC;
  color: var(--ocean);
  padding: 4px 7px;
  border-radius: 5px;
  white-space: nowrap;
}
.app-description {
  font-size: 10px;
  margin: 0 0 19px;
}
.progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: var(--muted);
}
.progress {
  height: 5px;
  background: #DCE5EF;
  border-radius: 10px;
  margin: 8px 0 20px;
}
.progress span {
  display: block;
  width: 50%;
  height: 100%;
  background: var(--ocean);
  border-radius: 10px;
}
.task {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #DCE5EF;
  border-radius: 7px;
  padding: 11px 9px;
  margin-top: 8px;
}
.task > div {
  flex: 1;
}
.task strong,
.task small {
  display: block;
  font-size: 10px;
}
.task small {
  font-size: 8px;
  color: var(--muted);
  margin-top: 2px;
}
.check,
.step {
  width: 23px;
  height: 23px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10px;
  background: #E8F2FC;
  color: #085BAA;
}
.step {
  background: #E8F2FC;
  color: var(--ocean);
}
.task-state {
  font-size: 8px;
  color: #085BAA;
}
.current {
  border-color: #A7D2FB;
  background: #F5FAFF;
}
.app-bottom {
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  color: var(--muted);
  margin-top: 19px;
}
.floating-label {
  position: absolute;
  top: 8px;
  left: 36px;
  z-index: 1;
  display: flex;
  gap: 9px;
  align-items: center;
  font-size: 10px;
  background: white;
  border: 1px solid var(--line);
  padding: 10px 15px;
  border-radius: 8px;
  box-shadow: 0 5px 20px #04305A09;
}
.floating-card {
  position: absolute;
  bottom: 31px;
  right: -10px;
  display: flex;
  gap: 12px;
  align-items: center;
  background: white;
  box-shadow: 0 10px 35px #04305A17;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 20px;
  transform: rotate(3deg);
}
.floating-card strong,
.floating-card small {
  display: block;
  font-size: 11px;
}
.floating-card small {
  font-size: 10px;
  color: var(--muted);
}
.spark {
  font-size: 23px;
  color: var(--ocean);
  background: #D5E8FA;
  border-radius: 10px;
  padding: 2px 10px;
}
.preview-caption {
  text-align: center;
  font-size: 10px;
  position: relative;
  top: 33px;
  margin: 0;
}
.benefit-strip {
  border-block: 1px solid var(--line);
  background: #E8EEF5;
}
.strip-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding-block: 27px;
  font-size: 14px;
}
.strip-inner > span:first-child {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}
.strip-inner strong {
  color: var(--ink);
}
.section {
  padding-block: 75px;
}
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 45px;
  margin-bottom: 32px;
}
.section-heading h2 {
  margin: 0;
}
.section-heading > p {
  max-width: 355px;
  font-size: 14px;
  margin: 0 0 4px;
}
.eyebrow {
  display: block;
  font-size: 10px;
  letter-spacing: 1.9px;
  font-weight: bold;
  color: var(--ocean);
  margin-bottom: 18px;
}
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 21px;
  margin-top: 30px;
}
.card {
  padding: 29px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.card-number {
  display: grid;
  place-items: center;
  width: 41px;
  height: 41px;
  border-radius: 10px;
  background: #E8F2FC;
  color: var(--ocean);
  font-size: 15px;
  margin-bottom: 30px;
}
.card h3 {
  font-size: 21px;
  margin-bottom: 13px;
}
.card p {
  font-size: 14px;
  margin: 0;
}
.cta {
  background: #085BAA;
  position: relative;
  color: white;
  border-radius: 17px;
  padding: 45px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 76px;
}
.cta .eyebrow {
  color: #E1EFFD;
}
.cta h2 {
  margin: 0;
  font-size: 37px;
}
.cta .button {
  flex-shrink: 0;
  text-align: center;
}
footer {
  border-top: 1px solid var(--line);
  padding-block: 32px 20px;
}
.footer-top,
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.footer-top .brand {
  font-size: 27px;
}
.footer-top p {
  font-size: 12px;
  margin: 0;
}
.footer-top > a:last-child {
  font-size: 13px;
}
.footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: 18px;
  margin-top: 27px;
  font-size: 10px;
  color: var(--muted);
}
.page-intro {
  padding-block: 70px 48px;
}
.page-intro h1 {
  font-size: clamp(38px, 4.5vw, 60px);
}
.page-intro > p {
  max-width: 690px;
  font-size: 17px;
}
.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.domain {
  padding: 37px;
  border-radius: 15px;
}
.domain.purple {
  background: #E8F2FC;
}
.domain.green {
  background: #D9EBFD;
}
.domain .pill {
  margin-bottom: 28px;
  background: #ffffff75;
  border-color: #ffffff90;
}
.domain h2 {
  font-size: 36px;
}
.domain p,
.domain li {
  font-size: 14px;
}
.domain ul {
  padding-left: 19px;
  margin-bottom: 0;
}
.domain li {
  padding-block: 4px;
}
.feature-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 48px;
}
.feature-row h3 {
  font-size: 19px;
  line-height: 1.3;
}
.feature-row p {
  font-size: 14px;
}
.notice {
  font-size: 12px;
  border-left: 3px solid #085BAA;
  padding: 10px 16px;
  background: #E8F2FC;
  margin-top: 25px;
}
.about-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 65px;
}
.about-block p {
  font-size: 15px;
}
.about-art {
  height: 350px;
  position: relative;
  display: grid;
  place-items: center;
  background: #D9EBFD;
  border-radius: 18px;
  overflow: hidden;
}
.about-art > img {
  z-index: 1;
  transform: rotate(-8deg);
  box-shadow: 0 15px 30px #085BAA33;
  border-radius: 35px;
}
.orbit {
  position: absolute;
  border: 1px solid #A7D2FB;
  border-radius: 50%;
  width: 270px;
  height: 270px;
}
.orbit-two {
  width: 380px;
  height: 380px;
}
.orbit-label {
  position: absolute;
  background: white;
  padding: 8px 17px;
  border: 1px solid #DCE5EF;
  border-radius: 9px;
  font-size: 12px;
  z-index: 2;
}
.label-one {
  left: 30px;
  top: 65px;
}
.label-two {
  right: 22px;
  top: 115px;
}
.label-three {
  bottom: 45px;
  left: 100px;
}
.contact-layout {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 90px;
  padding-bottom: 85px;
}
.contact-icon {
  display: grid;
  place-items: center;
  background: #E8F2FC;
  border-radius: 15px;
  width: 55px;
  height: 55px;
  color: var(--ocean);
  font-size: 30px;
  margin-bottom: 24px;
}
.contact-copy h2 {
  font-size: 35px;
}
.contact-copy > p {
  font-size: 14px;
}
.contact-topics {
  margin-top: 30px;
}
.contact-topics > div {
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
.contact-topics strong {
  font-size: 14px;
}
.contact-topics p {
  font-size: 13px;
  margin-top: 3px;
}
.contact-form {
  padding: 32px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 15px;
}
.contact-form h2 {
  font-size: 24px;
  margin-bottom: 28px;
}
.contact-form label {
  display: block;
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 7px;
}
.contact-form label span {
  color: var(--ocean);
}
input,
textarea,
select {
  display: block;
  width: 100%;
  padding: 12px 13px;
  border: 1px solid #C5D6E6;
  border-radius: 7px;
  background: #FFFFFF;
  color: var(--ink);
  font-size: 13px;
  margin-bottom: 20px;
}
textarea {
  resize: vertical;
  min-height: 125px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.form-note {
  font-size: 11px;
}
.contact-form > .button {
  width: 100%;
  justify-content: space-between;
}
.form-result {
  background: #E8F2FC;
  padding: 18px;
  border-radius: 8px;
  margin-top: 20px;
  font-size: 14px;
}
.form-result p {
  font-size: 12px;
  margin: 7px 0;
}
.skip {
  position: fixed;
  top: -100px;
  left: 15px;
  z-index: 10;
  background: white;
  padding: 10px;
}
.skip:focus {
  top: 10px;
}
@media (min-width: 1400px) {
  .hero {
    padding-block: 105px;
  }
}
@media (max-width: 1000px) {
  .header-cta {
    display: none;
  }
  .hero {
    gap: 25px;
  }
  .hero h1 {
    font-size: 44px;
  }
  .hero .pill {
    font-size: 8px;
  }
  .app-content {
    padding: 13px;
  }
  .actions {
    gap: 15px;
  }
  .contact-layout {
    gap: 40px;
  }
  .floating-card {
    right: 0;
  }
  .strip-inner {
    font-size: 12px;
  }
  .about-block {
    gap: 35px;
  }
}
@media (max-width: 760px) {
  .container {
    width: calc(100% - 36px);
  }
  .header-inner {
    height: 76px;
  }
  .brand {
    font-size: 29px;
  }
  .menu-toggle {
    display: block;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: white;
    color: var(--ink);
    font-size: 24px;
    padding: 3px 11px;
  }
  nav {
    display: none;
    position: absolute;
    top: 75px;
    left: 0;
    right: 0;
    background: var(--paper);
    z-index: 5;
    padding: 18px 25px;
    border-bottom: 1px solid var(--line);
  }
  nav.open {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  nav a[aria-current]:after {
    display: none;
  }
  .hero {
    grid-template-columns: 1fr;
    padding-block: 45px 35px;
    gap: 32px;
  }
  .hero h1 {
    font-size: clamp(39px, 8vw, 57px);
  }
  .hero-copy > p {
    max-width: 100%;
  }
  .hero .pill {
    font-size: 8px;
    letter-spacing: 0.7px;
  }
  .product-scene {
    max-width: 480px;
    width: 100%;
    margin: auto;
  }
  .app-content {
    padding: 20px;
  }
  .strip-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    font-size: 12px;
  }
  .section {
    padding-block: 48px;
  }
  .section-heading {
    display: block;
  }
  .section-heading > p {
    margin-top: 20px;
    max-width: 100%;
  }
  .cards {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .card {
    padding: 24px;
  }
  .card-number {
    margin-bottom: 20px;
  }
  .cta {
    padding: 30px;
    display: block;
    margin-bottom: 45px;
  }
  .cta h2 {
    font-size: 32px;
  }
  .cta .button {
    margin-top: 25px;
  }
  .footer-top {
    flex-wrap: wrap;
  }
  .footer-top p {
    order: 3;
    width: 100%;
  }
  .footer-bottom {
    align-items: start;
    flex-direction: column;
    gap: 5px;
  }
  .page-intro {
    padding-block: 45px 25px;
  }
  .page-intro h1 {
    font-size: 39px;
  }
  .page-intro > p {
    font-size: 15px;
  }
  .duo,
  .about-block,
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  .domain {
    padding: 27px;
  }
  .domain h2 {
    font-size: 32px;
  }
  .feature-row {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 30px;
  }
  .feature-row h3 {
    margin-bottom: 10px;
  }
  .about-art {
    height: 300px;
  }
  .contact-layout {
    padding-bottom: 45px;
  }
  .contact-form {
    padding: 24px;
  }
  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .actions {
    flex-wrap: wrap;
  }
  .about-block {
    gap: 35px;
  }
  .app-heading h3 {
    font-size: 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* Identidad Astro: Poppins para títulos, Bahnschrift para lectura e interfaz. */
@font-face { font-family: Poppins; src: url("assets/fonts/poppins-bold.ttf") format("truetype"); font-weight: 700 900; font-style: normal; font-display: swap; }
h1, h2, h3, .brand { font-family: Poppins, Bahnschrift, sans-serif; font-weight: 700; }
.brand { color: #04305A; }
.cta { background: #04305A; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.purpose-summary { border-top: 1px solid var(--line); }
.purpose-summary .duo { margin-top: 28px; padding-bottom: 12px; }
.team-grid { row-gap: 24px; }
.team-card h3 { font-size: 21px; }
.team-initials { display: grid; place-items: center; width: 52px; height: 52px; background: #D9EBFD; color: #04305A; border-radius: 50%; margin-bottom: 22px; font-weight: 700; }
.team-card .text-link { font-size: 14px; }
.faq { max-width: 900px; }
.faq details { border-bottom: 1px solid var(--line); padding: 18px 0; }
.faq summary { cursor: pointer; color: #04305A; font-weight: 600; padding: 8px 0; }
.faq details p { margin: 12px 0; }
summary:focus-visible { outline: 3px solid #085BAA; outline-offset: 4px; }
.contact-handle { margin-top: 12px; font-size: 14px; }
.menu-toggle, nav a { min-height: 44px; }
.button { white-space: normal; }
.cta { flex-wrap: wrap; }
.hero-copy, .domain, .contact-copy { min-width: 0; }
.contact-copy > .button { max-width: 100%; }
.app-description, .app-bottom, .preview-caption, .task small { color: #526373; }
@media (max-width: 760px) { .header-cta { display: none; } .menu-toggle { margin-left: auto; } .page-intro h1 { font-size: clamp(30px, 7.8vw, 39px); } .team-grid { grid-template-columns: 1fr; } }
@media (max-width: 380px) { .app-sidebar { display: none; } .app-content { padding: 15px; } .floating-label { font-size: 10px; } .hero h1 { font-size: 34px; } }

/* Footer compartido e invitación a la Feria de Software. */
.site-footer { background: #071321; color: #bec9d6; border: 0; padding: 52px 0 24px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1.1fr 1fr; gap: 48px; padding-bottom: 48px; }
.site-footer .brand { color: #f4f5fa; gap: 8px; }
.site-footer .brand-dot { color: #a7d2fb; margin-left: -8px; }
.footer-about p { color: #bec9d6; max-width: 350px; margin: 24px 0 0; font-size: 14px; }
.footer-column h2 { font-family: Bahnschrift, Arial, sans-serif; font-size: 13px; letter-spacing: .065em; text-transform: uppercase; color: #f4f5fa; margin: 6px 0 14px; }
.footer-column ul { list-style: none; padding: 0; margin: 0; }
.footer-column li a { display: inline-flex; align-items: center; gap: 9px; min-height: 34px; font-size: 14px; }
.site-footer a:hover { color: #a7d2fb; }
.site-footer a:focus-visible { outline-color: #a7d2fb; }
.footer-partners > a { display: block; width: fit-content; margin-top: 18px; }
.footer-partners img { object-fit: contain; object-position: left center; display: block; }
.fair-logo { width: 132px; height: 64px; }
.usm-logo { width: 180px; height: 48px; }
.footer-legal { border-top: 1px solid #253140; padding-top: 20px; display: flex; justify-content: space-between; gap: 20px; font-size: 12px; color: #a9b8c9; }
.fair-visit { display: grid; grid-template-columns: 1fr 1.15fr; gap: 28px; margin-bottom: 80px; align-items: stretch; }
.fair-invitation { background: radial-gradient(ellipse at bottom right, #315d7c 0%, transparent 65%), linear-gradient(135deg, #071e36, #04305a); color: #fff; padding: 34px; border-radius: 24px; }
.fair-badge { display: inline-block; padding: 6px 13px; border: 1px solid #6288ac; border-radius: 30px; color: #cce5ff; background: #ffffff0d; font-size: 12px; font-weight: 600; margin-bottom: 22px; }
.fair-invitation h2 { font-size: clamp(28px, 3vw, 39px); letter-spacing: -.04em; line-height: 1.16; }
.fair-invitation > p { color: #d0dfef; font-size: 16px; }
.fair-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 28px 0 20px; }
.fair-facts > div { padding: 14px; background: #ffffff0f; border: 1px solid #ffffff26; border-radius: 15px; }
.fair-facts dt { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #b7cee4; margin-bottom: 4px; }
.fair-facts dd { margin: 0; color: #fff; font-size: 14px; font-weight: 600; }
.fair-event-link { display: inline-flex; align-items: center; gap: 10px; color: #d8ebff; font-size: 14px; min-height: 44px; text-decoration: underline; text-underline-offset: 4px; }
.fair-event-link:focus-visible { outline-color: #a7d2fb; }
.fair-map-card { background: #fff; border: 1px solid var(--line); border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.fair-map-heading { padding: 24px; }
.fair-map-heading h3 { font-size: 22px; margin-bottom: 9px; }
.fair-map-heading p, .fair-map-heading address { font-size: 14px; color: var(--muted); margin: 0; font-style: normal; }
.fair-map-card iframe { display: block; width: 100%; min-height: 320px; flex: 1; border: 0; background: #e8eef5; }
.map-directions { display: flex; align-items: center; justify-content: space-between; padding: 15px 24px; color: #085baa; font-weight: 600; font-size: 14px; min-height: 48px; }
.map-directions:hover { background: #e8f2fc; }
@media (max-width: 1000px) { .footer-grid { gap: 28px; grid-template-columns: 1.5fr 1fr 1fr; } .footer-about { grid-column: 1 / -1; } .footer-about p { max-width: 480px; margin-top: 12px; } .fair-visit { gap: 20px; } .fair-invitation { padding: 26px; } }
@media (max-width: 760px) { .fair-visit { grid-template-columns: 1fr; margin-bottom: 48px; } .fair-map-card iframe { flex: auto; height: 340px; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; padding-bottom: 32px; } .footer-partners { grid-column: 1 / -1; } .footer-column li a { min-height: 44px; } .footer-legal { flex-direction: column; gap: 8px; } }
@media (max-width: 380px) { .fair-facts { grid-template-columns: 1fr; } .fair-invitation, .fair-map-heading { padding: 22px; } }

/* Dirección visual orbital: conserva la estructura y los componentes de Astro. */
:root {
  color-scheme: dark;
  --ink: #f4f5fa;
  --muted: #aebdd0;
  --ocean: #a7d2fb;
  --paper: #060d19;
  --line: #25354b;
  --surface: #0c1728;
}
body {
  background:
    radial-gradient(ellipse 70% 620px at 85% 0, #12335c66, transparent 75%),
    var(--paper);
}
::selection { background: #a7d2fb; color: #04305a; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline-color: #a7d2fb;
}
.header { background: transparent; border: 0; position: relative; z-index: 3; }
.header-inner { height: 112px; }
.brand { color: #f4f5fa; }
.brand img { filter: drop-shadow(0 0 12px #a7d2fb20); }
#navigation {
  padding: 5px 22px;
  gap: 26px;
  border: 1px solid #a7d2fb26;
  border-radius: 100px;
  background: linear-gradient(120deg, #ffffff0d, #ffffff04);
  box-shadow: inset 0 1px 0 #ffffff08;
}
#navigation a { color: #bac7d8; font-size: 13px; }
#navigation a:hover, #navigation a[aria-current] { color: #fff; }
#navigation a[aria-current]:after { height: 2px; bottom: 5px; background: #a7d2fb; }
.button {
  background: #a7d2fb;
  color: #062644;
  border: 1px solid #d4eaff80;
  border-radius: 100px;
  box-shadow: 0 0 28px #85bdff12, inset 0 1px 0 #ffffff60;
  min-height: 48px;
}
.button:hover, .button.light:hover { background: #d4eaff; color: #04305a; }
.button.light { background: #a7d2fb; color: #062644; }
.text-link { color: #b9dcff; }
.hero {
  position: relative;
  isolation: isolate;
  min-height: 640px;
  padding-block: 84px 100px;
  gap: 44px;
}
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 69%;
  height: 530px;
  top: 5%;
  right: -1%;
  border-radius: 50%;
  border-top: 1px solid #a7d2fbb3;
  background: radial-gradient(ellipse at 50% 0, #5e9ddd24, transparent 65%);
  box-shadow: 0 -24px 65px -22px #75baff70, 0 -3px 18px -3px #cce8ff99;
  transform: rotate(-28deg);
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle at 54% 13%, #a7d2fb80 0 1px, transparent 2px),
    radial-gradient(circle at 93% 22%, #a7d2fb60 0 1px, transparent 2px),
    radial-gradient(circle at 49% 72%, #a7d2fb60 0 1px, transparent 2px);
}
.hero h1 { font-size: clamp(38px, 4.2vw, 61px); line-height: 1.12; letter-spacing: -.055em; }
h1 span { color: #a7d2fb; }
.hero-copy > p { font-size: 16px; line-height: 1.8; max-width: 485px; }
.pill {
  color: #bddcfa;
  background: #a7d2fb09;
  border-color: #a7d2fb30;
  font-size: 10px;
  letter-spacing: 1px;
}
.live-dot { background: #a7d2fb; box-shadow: 0 0 10px #a7d2fb70; }
.hero-note { font-size: 12px; max-width: 420px; margin-top: 32px; }
.hero-note > span { color: #a7d2fb; }
.product-scene { background: radial-gradient(ellipse, #2363a32b, transparent 70%); padding-block: 36px 50px; }
.app-preview {
  background: linear-gradient(135deg, #142236f5, #081321fa);
  border: 1px solid #87b8ec4d;
  border-radius: 20px;
  transform: none;
  box-shadow: 0 28px 80px #0007, inset 0 1px 0 #c9e4ff1f;
}
.app-sidebar { background: #070f1c80; color: #aebdd0; border-right: 1px solid #a7d2fb15; }
.app-content { padding: 23px; }
.app-top { border-color: #a7d2fb1f; color: #d5e3f3; }
.avatar, .status, .check, .step, .spark { color: #b9dcff; background: #a7d2fb16; }
.app-heading small { color: #a7d2fb; font-size: 9px; }
.app-heading h3 { font-size: 18px; }
.app-description, .app-bottom, .preview-caption, .task small { color: #aebdd0; }
.app-description { font-size: 11px; }
.progress { background: #283c54; }
.progress span { background: linear-gradient(90deg, #085baa, #a7d2fb); }
.task { border-color: #a7d2fb1c; border-radius: 10px; padding-block: 13px; background: #ffffff02; }
.task strong { font-size: 11px; }
.task small { font-size: 9px; }
.task-state { color: #a7d2fb; }
.task.current { background: #20456655; border-color: #a7d2fb66; }
.floating-label, .floating-card { background: #142337; border-color: #5b83ad66; box-shadow: 0 12px 32px #0004; border-radius: 13px; }
.floating-label { left: 26px; }
.floating-card { right: -4px; transform: none; bottom: 29px; }
.benefit-strip { background: #0a1422; border-color: #a7d2fb1c; }
.strip-inner { font-size: 13px; color: #d0def0; padding-block: 26px; }
.section { padding-block: 88px; }
.eyebrow { color: #a7d2fb; font-size: 11px; letter-spacing: 2px; }
.section-heading h2, .purpose-summary h2 { line-height: 1.18; }
.card, .domain.purple, .domain.green {
  background: linear-gradient(145deg, #142238, #0b1525 75%);
  border: 1px solid #a7d2fb24;
  border-radius: 20px;
  box-shadow: inset 0 1px 0 #ffffff05;
}
.card { padding: 32px; }
.card-number, .team-initials { background: #a7d2fb0d; color: #a7d2fb; border: 1px solid #a7d2fb26; }
.card-number { border-radius: 50%; width: 46px; height: 46px; margin-bottom: 36px; }
.card h3 { font-size: 20px; line-height: 1.3; }
.card p { line-height: 1.8; }
.purpose-summary { position: relative; border-top: 1px solid #a7d2fb1f; }
.purpose-summary .duo article { padding: 22px 0 12px; }
.purpose-summary .duo { gap: 48px; }
.purpose-summary h3 { font-size: 23px; }
.cta {
  overflow: hidden;
  isolation: isolate;
  padding: 54px 48px;
  background: radial-gradient(ellipse at 70% 120%, #3671a97a, transparent 64%), #0c1c31;
  border: 1px solid #a7d2fb40;
  border-radius: 24px;
  box-shadow: 0 18px 60px #0002;
}
.cta::before { content: ""; position: absolute; z-index: -1; pointer-events: none; width: 70%; height: 240px; border-radius: 50%; border-top: 1px solid #a7d2fb88; top: 58%; right: -5%; box-shadow: 0 -10px 36px -14px #a7d2fb; transform: rotate(-18deg); }
.cta h2 { font-size: clamp(28px, 3vw, 37px); line-height: 1.2; }
.page-intro { padding-block: 64px 58px; }
.page-intro h1 { font-size: clamp(36px, 4.2vw, 58px); line-height: 1.15; }
.domain .pill { background: #a7d2fb0d; border-color: #a7d2fb30; }
.domain ul { color: #c0cede; }
.domain li::marker { color: #a7d2fb; }
.notice { color: #bfcee0; background: #a7d2fb09; border-color: #a7d2fb88; }
.faq summary { color: #e4effc; font-size: 16px; }
.about-art { background: radial-gradient(ellipse, #174f8066, #091525 70%); border: 1px solid #a7d2fb26; border-radius: 24px; }
.orbit { border-color: #a7d2fb33; }
.about-art > img { transform: none; box-shadow: 0 0 70px #a7d2fb26; }
.orbit-label { background: #142337; border-color: #a7d2fb40; color: #d6eaff; border-radius: 100px; }
.team-card .text-link { display: inline-block; margin-top: 20px; }
.contact-icon { color: #a7d2fb; background: #a7d2fb14; border: 1px solid #a7d2fb26; border-radius: 50%; }
.contact-form {
  color-scheme: light;
  --ink: #101a1f;
  --muted: #526373;
  --ocean: #085baa;
  background: #f4f5fa;
  color: var(--ink);
  border-radius: 24px;
  border-color: #fff;
  box-shadow: 0 22px 70px #0003;
}
.contact-form .button { background: #085baa; color: #fff; border-color: #085baa; }
.contact-form .button:hover { background: #04305a; }
.contact-form .text-link { color: #085baa; }
.contact-form :focus-visible { outline-color: #085baa; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: #617184; opacity: 1; }
.contact-form input, .contact-form select, .contact-form textarea { border-radius: 10px; font-size: 14px; }
.fair-map-card { color-scheme: light; color: #101a1f; --muted: #526373; border-color: #344c66; }
.fair-invitation { border: 1px solid #a7d2fb33; }
.site-footer { background: #050b14; border-top: 1px solid #a7d2fb1c; }
.site-footer .brand img { background: #a7d2fb0a; border-radius: 12px; }
.skip { background: #a7d2fb; color: #04305a; border-radius: 8px; }
@media (max-width: 1000px) {
  .hero { gap: 28px; min-height: auto; padding-block: 65px 75px; }
  .hero h1 { font-size: 43px; }
  #navigation { gap: 20px; padding-inline: 18px; }
  .app-content { padding: 17px; }
  .contact-layout { gap: 40px; }
}
@media (max-width: 760px) {
  .header-inner { height: 84px; }
  .menu-toggle { background: #132239; color: #d9ebff; border-color: #405c79; border-radius: 12px; }
  #navigation { top: 78px; left: 18px; right: 18px; border-radius: 18px; background: #0f1d30; padding: 12px 20px; box-shadow: 0 18px 45px #0006; }
  #navigation.open { gap: 4px; }
  #navigation a { font-size: 15px; }
  .hero { grid-template-columns: 1fr; padding-block: 42px 48px; gap: 32px; }
  .hero h1 { font-size: clamp(34px, 7.5vw, 54px); }
  .hero::before { width: 86%; height: 370px; top: auto; bottom: 8%; right: 5%; transform: rotate(-22deg); }
  .hero .pill { font-size: 9px; letter-spacing: .5px; }
  .hero-copy > p { font-size: 15px; }
  .actions { gap: 20px; }
  .product-scene { max-width: 480px; }
  .app-content { padding: 20px; }
  .floating-card { right: 0; }
  .section { padding-block: 52px; }
  .card { padding: 26px; }
  .card-number { margin-bottom: 24px; }
  .purpose-summary .duo { gap: 8px; }
  .purpose-summary .duo article { padding-block: 10px; }
  .cta { padding: 32px 26px; }
  .page-intro { padding-block: 38px 36px; }
  .page-intro h1 { font-size: clamp(32px, 7.4vw, 43px); }
  .contact-layout { gap: 30px; }
  .strip-inner { font-size: 12px; }
}
@media (max-width: 380px) {
  .hero h1 { font-size: 32px; }
  .hero .pill { font-size: 8px; padding-inline: 9px; }
  .app-content { padding: 16px; }
  .floating-label { left: 12px; padding-inline: 12px; }
}

/* Constelaciones decorativas: movimiento lento y controlado por el visitante. */
.constellation-background { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; border-radius: 24px; opacity: .65; }
.constellation-background > svg { width: 100%; height: 100%; display: block; }
.constellation-group { transform-box: fill-box; transform-origin: center; animation: constellation-drift 24s ease-in-out infinite alternate; animation-delay: var(--delay); }
.constellation-group polyline { fill: none; stroke: #90c9ff; stroke-width: .8; stroke-opacity: .26; }
.star-halo { fill: #81bfff; opacity: .065; }
.star-core { fill: #d6ecff; opacity: .8; }
.constellation-dust circle { fill: #bedfff; opacity: .25; animation: starlight 7s ease-in-out infinite alternate; animation-delay: var(--delay); }
@keyframes constellation-drift { from { transform: translate(-4px, 3px); opacity: .5; } to { transform: translate(6px, -7px); opacity: 1; } }
@keyframes starlight { from { opacity: .15; } to { opacity: .65; } }
.constellation-offscreen .constellation-background * { animation-play-state: paused; }
.bi { display: inline-block; flex-shrink: 0; vertical-align: -.125em; }
.card-number .bi { width: 22px; height: 22px; }
.contact-icon .bi { width: 27px; height: 27px; }
.app-sidebar .bi { width: 18px; height: 18px; }
.check .bi { width: 14px; height: 14px; }
.spark { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; }
.menu-toggle .bi { display: block; width: 24px; height: 24px; }
@media (max-width: 760px) { .constellation-background { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .constellation-background * { animation: none !important; } }

/* Secciones de propósito y separadores con la misma anchura del contenido. */
.benefit-strip { border: 0; background: transparent; padding-block: 10px; }
.strip-inner { padding: 24px 28px; border: 1px solid #a7d2fb18; border-radius: 18px; background: linear-gradient(110deg, #122135, #0a1524); }
.notice { border: 1px solid #a7d2fb22; border-left: 1px solid #a7d2fb22; border-radius: 12px; padding: 16px 20px; line-height: 1.7; background: #101e30; }
.purpose-summary { border: 0; padding-block: 44px; }
.purpose-summary .duo { gap: 24px; margin-top: 24px; padding-bottom: 0; }
.purpose-summary .duo article { padding: 30px; border: 1px solid #a7d2fb26; background: linear-gradient(140deg, #14243a, #0c1728); border-radius: 20px; }
.purpose-summary .duo article::before { content: ""; display: block; width: 32px; height: 3px; background: #a7d2fb; border-radius: 3px; margin-bottom: 22px; }
.purpose-summary .duo h2, .purpose-summary .duo h3 { font-size: clamp(24px, 2.4vw, 30px); margin-bottom: 16px; line-height: 1.25; }
.purpose-summary .duo p { margin: 0; font-size: 16px; line-height: 1.8; max-width: 52ch; }
.purpose-summary > .text-link { display: inline-block; margin-top: 24px; }
.purpose-detail > .eyebrow { margin-bottom: 0; }
.identity-section { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 44px; align-items: center; padding: 34px; margin-top: 8px; margin-bottom: 20px; background: #0b1727; border: 1px solid #a7d2fb22; border-radius: 24px; }
.identity-symbol { min-height: 250px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; background: radial-gradient(ellipse, #295e8640, transparent 70%); }
.identity-symbol span { color: #b8cde3; text-align: center; font-size: 13px; line-height: 1.7; }
.identity-copy h2 { font-size: clamp(27px, 3vw, 36px); margin-bottom: 18px; }
.identity-copy p { max-width: 64ch; font-size: 16px; line-height: 1.8; margin-bottom: 14px; }
.identity-colors { list-style: none; display: flex; flex-wrap: wrap; gap: 22px; padding: 0; margin: 24px 0 0; }
.identity-colors li { display: flex; align-items: center; gap: 9px; color: #d3e2f3; font-size: 13px; }
.swatch { width: 18px; height: 18px; border-radius: 50%; border: 1px solid #ffffff40; }
.swatch.midnight { background: #04305a; } .swatch.ocean { background: #085baa; } .swatch.sky { background: #a7d2fb; }
.sdg-section { display: grid; grid-template-columns: minmax(0, 1fr) 192px; gap: 52px; align-items: center; padding: 40px; margin-block: 24px 60px; background: #f4f5fa; color: #101a1f; border-radius: 24px; color-scheme: light; }
.sdg-section .eyebrow { color: #8f1838; font-size: 10px; }
.sdg-section h2 { color: #102c49; font-size: clamp(26px, 2.8vw, 36px); line-height: 1.2; margin-bottom: 20px; }
.sdg-section p { color: #526373; max-width: 76ch; line-height: 1.75; font-size: 15px; margin-bottom: 14px; }
.sdg-section .text-link { color: #085baa; display: inline-block; padding-block: 8px; }
.sdg-section a:focus-visible { outline-color: #085baa; }
.sdg-section img { display: block; width: 192px; height: auto; }
@media (max-width: 760px) {
 .strip-inner { padding: 22px; gap: 18px; }
 .purpose-summary { padding-block: 32px; }
 .purpose-summary .duo { gap: 16px; }
 .purpose-summary .duo article { padding: 24px; }
 .identity-section { grid-template-columns: 1fr; padding: 26px; gap: 24px; }
 .identity-symbol { min-height: 180px; }
 .identity-symbol img { width: 110px; height: 110px; }
 .sdg-section { grid-template-columns: 1fr; gap: 26px; padding: 26px; margin-bottom: 40px; }
 .sdg-section img { width: 150px; }
}
@media (max-width: 380px) { .strip-inner { grid-template-columns: 1fr; } }

.sdg-section { background: linear-gradient(135deg, #14243a, #0b1727); color: #f4f5fa; color-scheme: dark; border: 1px solid #a7d2fb26; }
.sdg-section .eyebrow { color: #a7d2fb; }
.sdg-section h2 { color: #f4f5fa; }
.sdg-section p { color: #aebdd0; }
.sdg-section .text-link { color: #b9dcff; }
.sdg-section a:focus-visible { outline-color: #a7d2fb; }
.team-card { overflow: hidden; }
.team-portrait { aspect-ratio: 4 / 3; position: relative; overflow: hidden; display: grid; place-items: center; margin: -32px -32px 26px; background: radial-gradient(ellipse at 50% 30%, #27517b66, transparent 75%), #101e30; border-bottom: 1px solid #a7d2fb26; }
.team-portrait > img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; }
.portrait-silhouette { position: absolute; width: 36%; aspect-ratio: 1; border-radius: 50%; background: #36557855; top: 16%; }
.portrait-silhouette::after { content: ""; position: absolute; width: 230%; height: 160%; border-radius: 50% 50% 0 0; top: 113%; left: -65%; background: #36557855; }
.team-portrait .team-initials { z-index: 1; margin: 0; position: absolute; left: 20px; bottom: 18px; width: 42px; height: 42px; font-size: 13px; background: #0b1727; }
.promo-section { padding-block: 38px 58px; }
.promo-heading { max-width: 680px; margin: 0 auto 30px; text-align: center; }
.promo-heading h2 { font-size: clamp(28px, 3vw, 40px); line-height: 1.2; }
.promo-placeholder { aspect-ratio: 16 / 9; min-height: 280px; max-width: 920px; margin-inline: auto; border: 1px solid #a7d2fb33; border-radius: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px; text-align: center; background: radial-gradient(ellipse at 50% 110%, #20578d66, transparent 70%), #0b1727; }
.promo-placeholder img { margin-bottom: 24px; }
.promo-status { color: #a7d2fb; letter-spacing: 2px; font-size: 10px; margin-bottom: 14px; }
.promo-placeholder h3 { font-size: clamp(21px, 3vw, 30px); margin-bottom: 12px; }
.promo-placeholder p { font-size: 14px; max-width: 380px; margin: 0; }
@media (max-width: 760px) { .team-portrait { margin: -26px -26px 24px; } .promo-section { padding-block: 28px 40px; } .promo-placeholder { padding: 24px; } }

.sdg-section { grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; }
.sdg-contribution { margin-top: 22px; }
.sdg-contribution h3 { font-size: 17px; line-height: 1.5; margin-bottom: 8px; color: #dcecff; letter-spacing: -.02em; }
.sdg-contribution p { margin-bottom: 0; }
.sdg-badges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.sdg-badges a { display: flex; flex-direction: column; align-items: center; gap: 14px; border-radius: 4px; }
.sdg-badges img { width: 100%; max-width: 160px; height: auto; }
.sdg-badges a > span { color: #b9dcff; font-size: 12px; }
.sdg-badges a:hover > span { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 1000px) { .sdg-section { grid-template-columns: minmax(0, 1fr) 150px; gap: 28px; } .sdg-badges { grid-template-columns: 1fr; gap: 24px; } }
@media (max-width: 760px) { .sdg-section { grid-template-columns: 1fr; } .sdg-badges { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, 340px); gap: 20px; } }

/* El ancho disponible manda sobre la proporción del espacio de video. */
.promo-placeholder { width: 100%; min-width: 0; }
.promo-placeholder > * { max-width: 100%; min-width: 0; flex-shrink: 0; }
.promo-placeholder h3, .promo-placeholder p { overflow-wrap: break-word; }
.benefits-heading { display: block; max-width: 760px; }
.benefits-heading > p { max-width: 68ch; margin: 20px 0 0; font-size: 16px; line-height: 1.8; }
@media (max-width: 760px) {
  .promo-placeholder { aspect-ratio: auto; min-height: 280px; padding: 28px 20px; }
  .promo-placeholder img { width: 60px; height: 60px; margin-bottom: 20px; }
  .promo-placeholder h3 { font-size: 22px; line-height: 1.3; }
  .promo-placeholder p { font-size: 14px; line-height: 1.7; }
  .promo-heading { margin-bottom: 24px; }
  .promo-heading h2 { font-size: clamp(25px, 6.5vw, 32px); }
  .promo-heading p, .benefits-heading > p { font-size: 15px; line-height: 1.75; }
}

/* Orbital background only: preserve the original hero layout. */
.hero-background { position: relative; isolation: isolate; width: 100%; background: #060d19; overflow: clip; }
.hero-background .orbital-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; z-index: -1; }
.hero-background .hero { background: transparent; }
.hero-background .hero::before, .hero-background .hero::after { content: none; }

/* Un mismo cielo detrás de la navegación y de todas las secciones. */
body { isolation: isolate; background: #060d19; }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("assets/starfield.svg") repeat, radial-gradient(ellipse at 85% 0, #12335c55, transparent 65%);
  background-size: 1000px 700px, 100% 100%;
}
.header, .hero-background { background: transparent; }
.hero-background .orbital-canvas {
  mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 86%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 86%, transparent);
}
.hero-background .app-preview {
  background: linear-gradient(135deg, #142236b8, #081321c7);
  box-shadow: 0 20px 60px #0003, inset 0 1px 0 #c9e4ff1f;
}
.hero-background .app-sidebar { background: #070f1c66; }
.hero-background .task { background: #08132166; }
.hero-background .task.current { background: #20456699; }
.site-footer { background: #050b14d9; }
@media (max-width: 760px) {
  body::before { background-size: 720px 504px, 100% 100%; }
  .hero-background .app-preview { background: linear-gradient(135deg, #142236d9, #081321e6); }
}

.hero-copy { container-type: inline-size; }
.hero h1 { font-size: clamp(24px, 9.3cqw, 61px); line-height: 1.14; }
.hero h1 .hero-title-line { display: block; color: #f4f5fa; white-space: nowrap; }
.hero h1 .hero-title-accent { color: #a7d2fb; }
.journey-panel { display: grid; grid-template-columns: 260px minmax(0, 1fr); align-items: center; gap: 36px; padding: 30px; background: linear-gradient(115deg, #13243ac9, #0b1727a6); border: 1px solid #a7d2fb24; border-radius: 22px; }
.journey-intro .eyebrow { font-size: 9px; letter-spacing: 1.8px; margin-bottom: 12px; }
.journey-intro h2 { font-size: 19px; line-height: 1.45; margin: 0; letter-spacing: -.025em; }
.journey-intro h2 span { color: #a7d2fb; }
.journey-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; padding: 0; margin: 0; gap: 26px; }
.journey-step { position: relative; min-width: 0; }
.journey-step:not(:last-child)::after { content: ""; position: absolute; top: 19px; left: 52px; width: calc(100% - 26px); height: 1px; background: linear-gradient(90deg, #a7d2fb66, #a7d2fb16); }
.journey-marker { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #a7d2fb55; background: #142c46; color: #c6e4ff; border-radius: 50%; font-size: 11px; font-weight: 600; margin-bottom: 16px; }
.journey-step h3 { font-family: Bahnschrift, Arial, sans-serif; font-size: 15px; letter-spacing: 0; line-height: 1.4; margin-bottom: 5px; }
.journey-step p { font-size: 12px; line-height: 1.6; margin: 0; }
.journey-reveal .journey-marker { animation: journey-glow 1.8s ease-out both; }
.journey-reveal .journey-step:nth-child(2) .journey-marker { animation-delay: .8s; }
.journey-reveal .journey-step:nth-child(3) .journey-marker { animation-delay: 1.6s; }
@keyframes journey-glow { 0%, 100% { box-shadow: 0 0 0 0 #a7d2fb00; } 40% { box-shadow: 0 0 0 7px #a7d2fb12, 0 0 22px #a7d2fb33; border-color: #c6e4ff; } }
@media (max-width: 1000px) { .journey-panel { grid-template-columns: 1fr; gap: 26px; } }
@media (max-width: 760px) {
  .journey-panel { padding: 24px; }
  .journey-steps { grid-template-columns: 1fr; gap: 24px; }
  .journey-step { display: flex; align-items: flex-start; gap: 16px; }
  .journey-marker { flex-shrink: 0; margin: 0; }
  .journey-step:not(:last-child)::after { top: 48px; left: 19px; width: 1px; height: calc(100% - 32px); background: #a7d2fb33; }
}
@media (prefers-reduced-motion: reduce) { .journey-reveal .journey-marker { animation: none; } }

.cta .contact-cta { min-height: 54px; padding: 16px 28px; border-radius: 14px; font-size: 15px; line-height: 1.4; box-shadow: 0 8px 24px #0002; }
.contact-copy > .eyebrow { margin-bottom: 18px; }
.instagram-contact { display: inline-flex; align-items: center; gap: 16px; max-width: 100%; padding: 18px 22px; margin-top: 6px; border: 1px solid #a7d2fb55; border-radius: 16px; background: linear-gradient(120deg, #183454, #10243a); color: #eef6ff; transition: background .2s, border-color .2s; }
.instagram-contact:hover { background: #204363; border-color: #a7d2fb; }
.instagram-contact-icon { display: grid; place-items: center; flex-shrink: 0; color: #a7d2fb; }
.instagram-contact-copy { display: flex; flex-direction: column; min-width: 0; gap: 4px; }
.instagram-contact-copy strong { font-size: 15px; line-height: 1.4; }
.instagram-contact-copy > span { font-size: 13px; color: #aecbe7; line-height: 1.4; overflow-wrap: anywhere; }
@media (max-width: 760px) { .cta .contact-cta { width: 100%; margin-top: 22px; padding-inline: 18px; } .instagram-contact { padding: 18px; gap: 13px; } }

.shooting-star-layer { position: fixed; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.shooting-star { position: absolute; width: 0; height: 0; opacity: 0; animation: meteor-flight var(--meteor-duration) linear forwards; }
.shooting-star::before { content: ""; position: absolute; right: 0; top: -1px; width: var(--meteor-tail); height: 1px; transform-origin: right center; transform: rotate(var(--meteor-angle)); background: linear-gradient(90deg, transparent, #a7d2fb55 65%, #e1f1ff); box-shadow: 0 0 5px #a7d2fb33; }
.shooting-star::after { content: ""; position: absolute; left: -1.5px; top: -1.5px; width: 3px; height: 3px; border-radius: 50%; background: #e1f1ff; box-shadow: 0 0 7px 2px #a7d2fb66; }
@keyframes meteor-flight {
  0% { opacity: 0; transform: translate3d(0, 0, 0); }
  12% { opacity: .65; }
  65% { opacity: .5; }
  100% { opacity: 0; transform: translate3d(var(--meteor-x), var(--meteor-y), 0); }
}
@media (prefers-reduced-motion: reduce) { .shooting-star-layer { display: none; } .shooting-star { animation: none; } }

.product-workflow { padding-bottom: 24px; }
.product-workflow > .notice { margin-bottom: 0; }
.product-workflow + .faq { padding-top: 24px; }
@media (max-width: 760px) {
  .product-workflow { padding-bottom: 16px; }
  .product-workflow + .faq { padding-top: 16px; }
}

.promo-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 16px;
  background: #050b14;
}

.promo-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 28px;
  margin-top: 20px;
}

/* En móvil, las anotaciones siguen el flujo y no cubren el producto. */
@media (max-width: 760px) {
  .product-scene { padding-bottom: 0; min-width: 0; }
  .product-scene .floating-card {
    position: static;
    inset: auto;
    transform: none;
    width: 100%;
    margin-top: 16px;
    padding: 16px;
    box-shadow: none;
  }
  .floating-card .spark { flex-shrink: 0; }
  .floating-card > div { min-width: 0; }
  .floating-card strong { font-size: 13px; line-height: 1.5; }
  .floating-card small { font-size: 12px; line-height: 1.5; }
  .product-scene .preview-caption { position: static; margin: 12px 0 0; font-size: 11px; line-height: 1.6; }
  .app-bottom { flex-wrap: wrap; gap: 8px; }
}