:root {
  --navy: #08192b;
  --navy-2: #0d2439;
  --navy-3: #152f47;

  --cyan: #10b7d5;
  --cyan-soft: #82ddea;

  --red: #ea4661;
  --yellow: #e8b642;
  --green: #32b99a;

  --ink: #132436;
  --muted: #647587;

  --paper: #f1f5f9;
  --paper-2: #e8eef4;

  --white: #ffffff;

  --border: rgba(8, 25, 43, .10);

  --radius: 22px;

  --shadow:
    0 22px 60px rgba(8, 25, 43, .10);
}


* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family:
    "Arial Narrow",
    "Segoe UI",
    Arial,
    sans-serif;
  line-height: 1.55;
}


a {
  color: inherit;
}


button,
a {
  -webkit-tap-highlight-color: transparent;
}



/* =====================================================
   HEADER
===================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;

  border-bottom:
    1px solid rgba(255,255,255,.08);

  background:
    rgba(8, 25, 43, .94);

  backdrop-filter:
    blur(18px);
}


.nav-shell {
  width:
    min(1240px, calc(100% - 38px));

  min-height: 76px;

  margin:
    0 auto;

  display: flex;
  align-items: center;
  gap: 28px;
}


.brand {
  display: flex;
  align-items: center;
  gap: 13px;

  color: white;
  text-decoration: none;

  margin-right: auto;
}


.brand-unam {
  display: grid;
  place-items: center;

  width: 52px;
  height: 52px;

  border:
    1px solid rgba(255,255,255,.16);

  border-radius: 50%;

  color: var(--cyan);

  font-size: .73rem;
  font-weight: 900;
  letter-spacing: .12em;
}


.brand-copy {
  display: flex;
  flex-direction: column;
}


.brand-copy strong {
  font-size: .95rem;
}


.brand-copy small {
  color:
    rgba(255,255,255,.55);

  font-size: .7rem;
}


.desktop-nav {
  display: flex;
  align-items: center;
  gap: 25px;
}


.desktop-nav a {
  position: relative;

  color:
    rgba(255,255,255,.70);

  text-decoration: none;

  font-size: .86rem;
  font-weight: 700;

  transition:
    color .2s ease;
}


.desktop-nav a:hover {
  color: white;
}


.nav-test {
  padding:
    11px 17px;

  border-radius:
    10px;

  color: var(--navy);

  background:
    var(--cyan);

  text-decoration:
    none;

  font-size:
    .84rem;

  font-weight:
    900;
}


.mobile-menu {
  display: none;

  position: relative;

  color: white;
}


.mobile-menu summary {
  cursor: pointer;

  list-style: none;

  padding:
    9px 13px;

  border:
    1px solid rgba(255,255,255,.15);

  border-radius:
    9px;
}


.mobile-menu summary::-webkit-details-marker {
  display: none;
}


.mobile-menu-panel {
  position: absolute;
  top: 48px;
  right: 0;

  width: 230px;

  padding: 10px;

  border:
    1px solid rgba(255,255,255,.08);

  border-radius:
    14px;

  background:
    var(--navy-2);

  box-shadow:
    0 25px 50px rgba(0,0,0,.28);
}


.mobile-menu-panel a {
  display: block;

  padding:
    12px 13px;

  border-radius:
    8px;

  color:
    rgba(255,255,255,.80);

  text-decoration:
    none;
}


.mobile-menu-panel a:hover {
  background:
    rgba(255,255,255,.05);
}


.mobile-test {
  margin-top: 7px;

  color:
    var(--navy) !important;

  background:
    var(--cyan);
}



/* =====================================================
   HERO
===================================================== */

.hero {
  position: relative;
  overflow: hidden;

  min-height:
    calc(100vh - 76px);

  color: white;

  background:
    var(--navy);
}


.hero-inner {
  position: relative;
  z-index: 2;

  width:
    min(1240px, calc(100% - 38px));

  min-height:
    calc(100vh - 76px);

  margin:
    0 auto;

  display: grid;

  grid-template-columns:
    minmax(0, 1.25fr)
    minmax(320px, .75fr);

  align-items: center;

  gap: 70px;

  padding:
    80px 0;
}


.hero-glow {
  position: absolute;

  border-radius: 50%;

  filter:
    blur(1px);
}


.hero-glow-one {
  width: 620px;
  height: 620px;

  left: -320px;
  bottom: -250px;

  background:
    rgba(0, 164, 204, .12);
}


.hero-glow-two {
  width: 490px;
  height: 490px;

  right: -210px;
  top: 120px;

  border:
    1px solid rgba(16,183,213,.17);
}


.hero-tag {
  display: block;

  margin-bottom:
    8px;

  color:
    var(--cyan);

  font-size:
    .78rem;

  font-weight:
    900;

  letter-spacing:
    .23em;
}


.hero-faculty {
  display:
    block;

  margin-bottom:
    27px;

  color:
    rgba(255,255,255,.56);

  font-size:
    .96rem;
}


.hero h1 {
  max-width:
    850px;

  margin:
    0;

  font-size:
    clamp(
      2.6rem,
      5.6vw,
      5.7rem
    );

  line-height:
    .98;

  letter-spacing:
    -.047em;

  font-weight:
    900;
}


.hero h1 em {
  display:
    block;

  color:
    var(--cyan);

  font-style:
    normal;
}


.hero-authors {
  margin:
    35px 0 4px;

  color:
    var(--cyan-soft);

  font-weight:
    700;
}


.hero-authors span {
  padding:
    0 8px;

  color:
    rgba(255,255,255,.35);
}


.hero-director {
  margin:
    0;

  color:
    rgba(255,255,255,.58);

  font-size:
    .88rem;
}


.hero-director strong {
  color:
    rgba(255,255,255,.82);
}


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

  margin-top:
    35px;
}


.button {
  display:
    inline-flex;

  justify-content:
    center;

  align-items:
    center;

  min-height:
    50px;

  padding:
    0 21px;

  border-radius:
    11px;

  text-decoration:
    none;

  font-size:
    .89rem;

  font-weight:
    900;

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}


.button:hover {
  transform:
    translateY(-2px);
}


.button-primary {
  color:
    var(--navy);

  background:
    var(--cyan);

  box-shadow:
    0 15px 30px rgba(16,183,213,.16);
}


.button-outline {
  border:
    1px solid rgba(255,255,255,.20);

  color:
    white;

  background:
    rgba(255,255,255,.04);
}



/* FACE VISUAL */

.hero-visual {
  display:
    grid;

  place-items:
    center;
}


.face-map {
  position:
    relative;

  width:
    min(410px, 80vw);

  aspect-ratio:
    1 / 1;

  border:
    1px solid rgba(16,183,213,.28);

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      rgba(16,183,213,.10),
      transparent 62%
    );
}


.face-grid {
  position:
    absolute;

  inset:
    14%;

  border:
    1px solid rgba(255,255,255,.06);

  border-radius:
    45% 45% 48% 48% / 37% 37% 60% 60%;
}


.face-ring {
  position:
    absolute;

  border:
    1px solid rgba(16,183,213,.14);

  border-radius:
    50%;
}


.ring-one {
  inset:
    8%;
}


.ring-two {
  inset:
    25%;
}


.face-core {
  position:
    absolute;

  inset:
    38%;

  display:
    grid;

  place-content:
    center;

  text-align:
    center;

  border-radius:
    50%;

  background:
    var(--cyan);

  color:
    var(--navy);
}


.face-core span {
  font-size:
    clamp(1.5rem,4vw,2.5rem);

  font-weight:
    900;
}


.face-core small {
  max-width:
    80px;

  font-size:
    .58rem;

  line-height:
    1.15;
}


.node {
  position:
    absolute;

  width:
    10px;

  height:
    10px;

  border:
    2px solid var(--cyan);

  border-radius:
    50%;

  background:
    var(--navy);
}


.n1 { top: 18%; left: 47%; }
.n2 { top: 36%; left: 27%; }
.n3 { top: 36%; right: 27%; }
.n4 { top: 53%; left: 47%; }
.n5 { bottom: 25%; left: 35%; }
.n6 { bottom: 25%; right: 35%; }



/* =====================================================
   GENERAL SECTIONS
===================================================== */

.section {
  width:
    min(1180px, calc(100% - 38px));

  margin:
    0 auto;

  padding:
    105px 0;

  scroll-margin-top:
    90px;
}


.section-heading {
  display:
    flex;

  align-items:
    flex-start;

  gap:
    19px;

  margin-bottom:
    46px;
}


.section-index {
  display:
    grid;

  place-items:
    center;

  width:
    48px;

  height:
    48px;

  flex:
    0 0 48px;

  border-radius:
    12px;

  color:
    var(--navy);

  background:
    var(--cyan);

  font-size:
    .83rem;

  font-weight:
    900;
}


.section-kicker {
  display:
    block;

  margin-bottom:
    7px;

  color:
    #078ba6;

  font-size:
    .78rem;

  font-weight:
    900;

  letter-spacing:
    .16em;
}


.section-heading h2 {
  margin:
    0;

  max-width:
    820px;

  font-size:
    clamp(2rem,4.5vw,4rem);

  line-height:
    1.03;

  letter-spacing:
    -.042em;
}



/* =====================================================
   PROBLEM
===================================================== */

.problem-grid {
  display:
    grid;

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

  gap:
    16px;
}


.problem-card {
  min-height:
    255px;

  padding:
    27px;

  border:
    1px solid var(--border);

  border-radius:
    var(--radius);

  background:
    white;

  box-shadow:
    0 15px 40px rgba(8,25,43,.04);
}


.card-number {
  display:
    inline-flex;

  margin-bottom:
    45px;

  color:
    var(--cyan);

  font-size:
    .82rem;

  font-weight:
    900;
}


.problem-card h3 {
  margin:
    0 0 12px;

  font-size:
    1.3rem;
}


.problem-card p {
  margin:
    0;

  color:
    var(--muted);

  font-size:
    .96rem;

  line-height:
    1.7;
}



/* =====================================================
   OBJECTIVE
===================================================== */

.objective-section {
  padding-top:
    0;
}


.objective-panel {
  padding:
    clamp(34px,6vw,72px);

  border-radius:
    28px;

  color:
    white;

  background:
    var(--navy);
}


.objective-panel h2 {
  max-width:
    980px;

  margin:
    0;

  font-size:
    clamp(1.7rem,3.8vw,3.35rem);

  line-height:
    1.16;
}


.objective-items {
  display:
    grid;

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

  gap:
    13px;

  margin-top:
    40px;
}


.objective-items p {
  margin:
    0;

  padding:
    20px;

  border:
    1px solid rgba(255,255,255,.08);

  border-radius:
    15px;

  color:
    rgba(255,255,255,.70);

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

  font-size:
    .9rem;

  line-height:
    1.6;
}



/* =====================================================
   DATASET
===================================================== */

.dataset-section {
  padding-top:
    85px;
}


.stats-grid {
  display:
    grid;

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

  gap:
    14px;
}


.stats-grid article {
  min-height:
    150px;

  padding:
    25px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  border:
    1px solid var(--border);

  border-radius:
    19px;

  background:
    white;

  box-shadow:
    0 12px 35px rgba(8,25,43,.04);
}


.stats-grid strong {
  color:
    var(--cyan);

  font-size:
    clamp(2rem,4.5vw,3.6rem);

  line-height:
    1;
}


.stats-grid span {
  margin-top:
    9px;

  color:
    var(--muted);
}


.emotion-row {
  display:
    grid;

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

  gap:
    8px;

  margin:
    19px 0 30px;
}


.emotion-row span {
  padding:
    13px 10px;

  text-align:
    center;

  border:
    1px solid var(--border);

  border-radius:
    11px;

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

  font-size:
    .83rem;

  font-weight:
    800;
}


.capture-panel {
  display:
    grid;

  grid-template-columns:
    .9fr 1.1fr;

  gap:
    40px;

  padding:
    34px;

  border-radius:
    var(--radius);

  color:
    white;

  background:
    var(--navy);
}


.mini-title {
  color:
    var(--cyan);

  font-size:
    .77rem;

  font-weight:
    900;

  letter-spacing:
    .12em;
}


.capture-panel h3 {
  max-width:
    410px;

  margin:
    11px 0 0;

  font-size:
    clamp(1.45rem,3vw,2.25rem);

  line-height:
    1.18;
}


.capture-list {
  display:
    grid;

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

  gap:
    10px;
}


.capture-list p {
  margin:
    0;

  padding:
    17px;

  border-radius:
    12px;

  color:
    rgba(255,255,255,.72);

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

  font-size:
    .88rem;
}



/* =====================================================
   PIPELINE
===================================================== */

.pipeline {
  display:
    grid;

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

  align-items:
    stretch;

  gap:
    8px;
}


.pipeline article {
  min-width:
    0;

  padding:
    20px 15px;

  text-align:
    center;

  border:
    1px solid var(--border);

  border-radius:
    15px;

  background:
    white;
}


.pipeline strong {
  color:
    var(--cyan);

  font-size:
    1.15rem;
}


.pipeline h3 {
  margin:
    12px 0 4px;

  font-size:
    .92rem;
}


.pipeline p {
  margin:
    0;

  color:
    var(--muted);

  font-size:
    .76rem;
}


.pipeline-arrow {
  align-self:
    center;

  color:
    var(--navy);

  font-size:
    1.35rem;
}


.approach-grid {
  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    16px;

  margin-top:
    20px;
}


.approach {
  padding:
    29px;

  border-radius:
    var(--radius);

  background:
    white;

  border:
    1px solid var(--border);
}


.approach > span {
  color:
    var(--cyan);

  font-size:
    .78rem;

  font-weight:
    900;

  letter-spacing:
    .09em;
}


.approach h3 {
  margin:
    20px 0 4px;

  font-size:
    1rem;
}


.approach p {
  margin:
    0;

  color:
    var(--muted);
}



/* =====================================================
   ARCHITECTURE
===================================================== */

.architecture-section {
  width:
    100%;

  max-width:
    none;

  padding:
    105px max(
      calc((100vw - 1180px) / 2),
      19px
    );

  color:
    white;

  background:
    var(--navy);
}


.architecture-section .section-kicker {
  color:
    var(--cyan);
}


.architecture-grid {
  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    20px;
}


.architecture-column {
  overflow:
    hidden;

  border:
    1px solid rgba(255,255,255,.08);

  border-radius:
    22px;

  background:
    rgba(255,255,255,.035);
}


.architecture-title {
  padding:
    18px 22px;

  font-weight:
    900;
}


.image-column .architecture-title {
  background:
    #087dac;
}


.geometry-column .architecture-title {
  background:
    var(--red);
}


.model-card {
  margin:
    15px;

  padding:
    22px;

  border:
    1px solid rgba(255,255,255,.06);

  border-radius:
    14px;

  background:
    rgba(255,255,255,.045);
}


.model-card span {
  color:
    var(--cyan);

  font-weight:
    900;
}


.geometry-column .model-card span {
  color:
    #ff788d;
}


.model-card h3 {
  margin:
    7px 0 10px;

  font-size:
    1.12rem;
}


.model-card p {
  margin:
    3px 0;

  color:
    rgba(255,255,255,.58);

  font-size:
    .86rem;
}



/* =====================================================
   RESULTS
===================================================== */

.results-table-wrap {
  overflow-x:
    auto;

  border:
    1px solid var(--border);

  border-radius:
    18px;

  background:
    white;

  box-shadow:
    var(--shadow);
}


.results-table {
  width:
    100%;

  min-width:
    720px;

  border-collapse:
    collapse;
}


.results-table th {
  padding:
    17px 19px;

  color:
    white;

  background:
    var(--navy);

  text-align:
    left;

  font-size:
    .82rem;
}


.results-table td {
  padding:
    17px 19px;

  border-bottom:
    1px solid #e8edf1;

  color:
    #425366;

  font-size:
    .9rem;
}


.results-table tbody tr:last-child td {
  border-bottom:
    0;
}


.results-table tbody tr:hover {
  background:
    #f8fbfc;
}


.score {
  color:
    #078ba6 !important;

  font-weight:
    900;
}


.score.best {
  color:
    var(--green) !important;
}


.score.warn {
  color:
    #bd8d18 !important;
}


.score.low {
  color:
    var(--red) !important;
}


.chart {
  display:
    grid;

  gap:
    12px;

  margin-top:
    28px;
}


.chart-bar {
  display:
    grid;

  grid-template-columns:
    140px 1fr 72px;

  align-items:
    center;

  gap:
    14px;
}


.chart-bar span {
  font-size:
    .83rem;

  font-weight:
    800;
}


.chart-bar i {
  position:
    relative;

  height:
    11px;

  overflow:
    hidden;

  border-radius:
    999px;

  background:
    #dce5ec;
}


.chart-bar i::after {
  content:
    "";

  display:
    block;

  width:
    var(--value);

  height:
    100%;

  border-radius:
    inherit;

  background:
    var(--cyan);
}


.chart-bar strong {
  font-size:
    .8rem;

  text-align:
    right;
}



/* =====================================================
   WEBCAM
===================================================== */

.webcam-section {
  width:
    100%;

  max-width:
    none;

  padding:
    105px max(
      calc((100vw - 1180px) / 2),
      19px
    );

  background:
    #e9eef4;
}


.webcam-grid {
  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    13px;
}


.webcam-card {
  padding:
    25px;

  border-radius:
    17px;

  background:
    white;

  border:
    1px solid var(--border);
}


.webcam-card span {
  font-weight:
    900;
}


.webcam-card strong {
  display:
    block;

  margin:
    8px 0 9px;

  color:
    var(--cyan);

  font-size:
    2rem;
}


.webcam-card.medium strong {
  color:
    var(--yellow);
}


.webcam-card.weak strong {
  color:
    var(--red);
}


.webcam-card p {
  margin:
    0;

  color:
    var(--muted);
}


.webcam-conclusion {
  margin-top:
    15px;

  padding:
    20px 23px;

  border-radius:
    15px;

  color:
    white;

  background:
    var(--navy);
}


.webcam-conclusion strong {
  color:
    var(--cyan);
}


.webcam-conclusion p {
  margin:
    5px 0 0;
}



/* =====================================================
   LIMITATIONS
===================================================== */

.limitations-section {
  width:
    100%;

  max-width:
    none;

  padding:
    105px max(
      calc((100vw - 1180px) / 2),
      19px
    );

  color:
    white;

  background:
    var(--navy);
}


.limitations-section .section-kicker {
  color:
    var(--yellow);
}


.limitations-list {
  display:
    grid;

  gap:
    12px;
}


.limitations-list article {
  display:
    grid;

  grid-template-columns:
    55px 1fr;

  gap:
    20px;

  padding:
    22px;

  border:
    1px solid rgba(255,255,255,.07);

  border-radius:
    16px;

  background:
    rgba(255,255,255,.045);
}


.limitations-list article > strong {
  color:
    var(--yellow);

  font-size:
    1.15rem;
}


.limitations-list h3 {
  margin:
    0 0 4px;
}


.limitations-list p {
  max-width:
    900px;

  margin:
    0;

  color:
    rgba(255,255,255,.58);

  font-size:
    .9rem;
}


.limitations-footnote {
  margin:
    22px 0 0;

  color:
    var(--cyan);

  font-style:
    italic;
}



/* =====================================================
   CONCLUSIONS
===================================================== */

.conclusions-grid {
  display:
    grid;

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

  gap:
    14px;
}


.conclusions-grid article {
  min-height:
    195px;

  padding:
    25px;

  border:
    1px solid var(--border);

  border-radius:
    18px;

  background:
    white;
}


.conclusions-grid span {
  color:
    var(--cyan);

  font-weight:
    900;
}


.conclusions-grid h3 {
  margin:
    25px 0 8px;
}


.conclusions-grid p {
  margin:
    0;

  color:
    var(--muted);
}



/* =====================================================
   FUTURE
===================================================== */

.future-section {
  padding-top:
    45px;
}


.future-grid {
  display:
    grid;

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

  gap:
    14px;
}


.future-grid article {
  min-height:
    165px;

  padding:
    24px;

  border-radius:
    17px;

  background:
    white;

  border:
    1px solid var(--border);
}


.future-grid strong {
  color:
    var(--cyan);

  font-size:
    1.2rem;
}


.future-grid h3 {
  margin:
    16px 0 7px;
}


.future-grid p {
  margin:
    0;

  color:
    var(--muted);
}



/* =====================================================
   FINAL CTA
===================================================== */

.final-cta {
  width:
    min(1180px, calc(100% - 38px));

  margin:
    20px auto 100px;

  padding:
    clamp(45px,8vw,90px);

  text-align:
    center;

  border-radius:
    30px;

  color:
    white;

  background:
    var(--navy);
}


.final-cta > span {
  color:
    var(--cyan);

  font-size:
    .77rem;

  font-weight:
    900;

  letter-spacing:
    .18em;
}


.final-cta h2 {
  max-width:
    730px;

  margin:
    15px auto;

  font-size:
    clamp(2rem,5vw,4.5rem);

  line-height:
    1;
}


.final-cta p {
  margin:
    0 auto 27px;

  color:
    rgba(255,255,255,.58);
}



/* =====================================================
   FOOTER
===================================================== */

.site-footer {
  display:
    flex;

  justify-content:
    space-between;

  gap:
    30px;

  padding:
    30px max(
      calc((100vw - 1180px) / 2),
      19px
    );

  border-top:
    1px solid rgba(255,255,255,.07);

  color:
    rgba(255,255,255,.52);

  background:
    var(--navy);

  font-size:
    .75rem;
}


.site-footer > div {
  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.site-footer strong {
  color:
    rgba(255,255,255,.82);
}



/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 1060px) {

  .desktop-nav,
  .nav-test {
    display:
      none;
  }


  .mobile-menu {
    display:
      block;
  }


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

    gap:
      55px;

    padding:
      80px 0;
  }


  .hero-visual {
    order:
      -1;
  }


  .face-map {
    width:
      min(330px, 72vw);
  }


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


  .problem-card {
    min-height:
      auto;
  }


  .card-number {
    margin-bottom:
      20px;
  }


  .objective-items {
    grid-template-columns:
      1fr;
  }


  .pipeline {
    grid-template-columns:
      repeat(5,1fr);

    gap:
      9px;
  }


  .pipeline-arrow {
    display:
      none;
  }

}


@media (max-width: 800px) {

  .section {
    padding:
      75px 0;
  }


  .stats-grid {
    grid-template-columns:
      repeat(2,1fr);
  }


  .emotion-row {
    grid-template-columns:
      repeat(3,1fr);
  }


  .capture-panel {
    grid-template-columns:
      1fr;

    gap:
      24px;
  }


  .architecture-grid,
  .approach-grid,
  .webcam-grid,
  .conclusions-grid,
  .future-grid {
    grid-template-columns:
      1fr;
  }


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


  .chart-bar {
    grid-template-columns:
      105px 1fr 65px;

    gap:
      8px;
  }


  .site-footer {
    flex-direction:
      column;
  }

}


@media (max-width: 560px) {

  .nav-shell {
    width:
      min(100% - 24px, 1240px);

    min-height:
      68px;
  }


  .brand-copy small {
    display:
      none;
  }


  .brand-unam {
    width:
      43px;

    height:
      43px;
  }


  .hero-inner,
  .section,
  .final-cta {
    width:
      min(100% - 24px, 1180px);
  }


  .hero h1 {
    font-size:
      2.55rem;
  }


  .hero-actions {
    flex-direction:
      column;
  }


  .hero-actions .button {
    width:
      100%;
  }


  .hero-visual {
    display:
      none;
  }


  .section-heading {
    gap:
      12px;
  }


  .section-index {
    width:
      42px;

    height:
      42px;

    flex-basis:
      42px;
  }


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


  .stats-grid article {
    min-height:
      115px;
  }


  .emotion-row {
    grid-template-columns:
      1fr 1fr;
  }


  .capture-list {
    grid-template-columns:
      1fr;
  }


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


  .chart-bar {
    grid-template-columns:
      1fr 58px;
  }


  .chart-bar i {
    grid-column:
      1 / -1;

    grid-row:
      2;
  }


  .limitations-list article {
    grid-template-columns:
      1fr;
  }


  .final-cta {
    margin-bottom:
      35px;
  }

}


@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior:
      auto;
  }


  .button {
    transition:
      none;
  }

}


/* =========================================================
   HEADER ROBÓTICA SOCIAL + FOOTER SOMEFI
   ========================================================= */

.brand-rs {
  display: grid;
  place-items: center;

  width: 44px;
  height: 44px;

  flex: 0 0 44px;

  border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px;

  color: #10b7d5;
  background: rgba(16,183,213,.06);

  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .08em;
}

.brand-copy strong {
  color: #fff;
  font-size: .95rem;
  line-height: 1.2;
}

.brand-copy small {
  margin-top: 3px;

  color: rgba(255,255,255,.52);
  font-size: .70rem;
}


/* FOOTER COMPACTO */

.somefi-footer {
  width: 100%;

  padding: 10px 0;

  border-top: 1px solid rgba(255,255,255,.08);

  color: rgba(255,255,255,.68);
  background: #071827;
}

.somefi-footer-inner {
  width: min(1180px, calc(100% - 32px));
  min-height: 52px;

  margin: 0 auto;

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

  gap: 24px;
}

.somefi-footer-brand {
  display: flex;
  align-items: center;

  gap: 10px;

  min-width: 0;
}

.somefi-footer-logo {
  width: 36px;
  height: 36px;

  flex: 0 0 36px;

  object-fit: contain;
}

.somefi-footer-brand > div {
  display: flex;
  flex-direction: column;

  min-width: 0;
}

.somefi-footer-brand strong {
  color: #fff;

  font-size: .78rem;
  line-height: 1.15;
}

.somefi-footer-brand span {
  margin-top: 2px;

  color: rgba(255,255,255,.46);

  font-size: .62rem;
  line-height: 1.2;
}

.somefi-footer-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  justify-content: flex-end;

  gap: 6px 14px;
}

.somefi-footer-links a,
.somefi-footer-links .social-pending {
  color: rgba(255,255,255,.67);

  font-size: .68rem;
  font-weight: 600;

  text-decoration: none;

  white-space: nowrap;
}

.somefi-footer-links a:hover {
  color: #10b7d5;
}

.somefi-footer-links .social-pending {
  opacity: .6;
}


/* RESPONSIVE FOOTER */

@media (max-width: 720px) {

  .somefi-footer-inner {
    align-items: flex-start;
    flex-direction: column;

    gap: 8px;
  }

  .somefi-footer {
    padding: 12px 0;
  }

  .somefi-footer-links {
    justify-content: flex-start;
  }

  .somefi-footer-brand span {
    display: none;
  }

}