/* ==========================================================
   GEOPLOT
   PÁGINA NOSOTROS

   Archivo:
   C:\MAV_2026\GEOPLOT SPA\Geoplot_Web\assets\css\nosotros.css
========================================================== */


/* ==========================================================
   01. VARIABLES GENERALES
========================================================== */

:root {
  --about-font-family:
    "Inter",
    Arial,
    sans-serif;

  --about-navy-950: #071725;
  --about-navy-900: #0b2235;
  --about-navy-850: #0e2b42;
  --about-navy-800: #123550;

  --about-blue-700: #075fbb;
  --about-blue-600: #0b73d1;
  --about-blue-500: #1585db;
  --about-blue-400: #22a5eb;
  --about-cyan-400: #22c5f6;

  --about-blue-100: #eaf4ff;
  --about-blue-050: #f4f9fe;

  --about-text-main: #34495c;
  --about-text-secondary: #617487;
  --about-text-light: #8495a5;

  --about-white: #ffffff;
  --about-background: #f7f9fc;
  --about-background-soft: #fbfcfe;

  --about-border: #dce5ee;
  --about-border-dark: #c9d5e0;

  --about-shadow-sm:
    0 8px 22px rgba(7, 23, 37, 0.06);

  --about-shadow-md:
    0 16px 38px rgba(7, 23, 37, 0.09);

  --about-shadow-lg:
    0 26px 60px rgba(7, 23, 37, 0.14);

  --about-shadow-dark:
    0 24px 58px rgba(0, 0, 0, 0.22);

  --about-radius-sm: 10px;
  --about-radius-md: 16px;
  --about-radius-lg: 24px;
  --about-radius-xl: 30px;
  --about-radius-pill: 999px;

  --about-container-width: 1240px;

  --about-transition:
    180ms ease;

  --about-type-eyebrow:
    0.72rem;

  --about-type-hero-title:
    clamp(2rem, 3vw, 3rem);

  --about-type-hero-description:
    clamp(1rem, 1.3vw, 1.18rem);

  --about-type-section-title:
    clamp(1.9rem, 3.4vw, 2.85rem);

  --about-type-section-description:
    1.05rem;
}


/* ==========================================================
   02. BASE Y RESETEO
========================================================== */

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

body.geoplot-about-page {
  margin: 0;
  min-height: 100%;
  overflow-x: hidden;

  color: var(--about-text-main);
  background: var(--about-background);

  font-family: var(--about-font-family);

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.geoplot-about-page *,
body.geoplot-about-page *::before,
body.geoplot-about-page *::after {
  box-sizing: border-box;
}

body.geoplot-about-page img {
  display: block;
  max-width: 100%;
}

body.geoplot-about-page a {
  color: inherit;
  text-decoration: none;
}

body.geoplot-about-page button,
body.geoplot-about-page input,
body.geoplot-about-page textarea,
body.geoplot-about-page select {
  font: inherit;
}

body.geoplot-about-page h1,
body.geoplot-about-page h2,
body.geoplot-about-page h3,
body.geoplot-about-page h4,
body.geoplot-about-page p,
body.geoplot-about-page ul,
body.geoplot-about-page ol,
body.geoplot-about-page figure {
  margin-top: 0;
}

body.geoplot-about-page :focus-visible {
  outline:
    3px solid
    rgba(34, 197, 246, 0.65);

  outline-offset: 4px;
}


/* ==========================================================
   03. ACCESIBILIDAD
========================================================== */

.about-skip-link {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 9999;

  padding: 12px 16px;

  border-radius:
    var(--about-radius-sm);

  color:
    var(--about-white);

  background:
    var(--about-navy-950);

  font-size: 0.88rem;
  font-weight: 800;

  transform:
    translateY(-160%);

  transition:
    transform
    var(--about-transition);
}

.about-skip-link:focus {
  transform:
    translateY(0);
}


/* ==========================================================
   04. CONTENEDOR GENERAL
========================================================== */

.about-container {
  width:
    min(
      calc(100% - 40px),
      var(--about-container-width)
    );

  margin-inline:
    auto;
}


/* ==========================================================
   05. SECCIONES Y TIPOGRAFÍA
========================================================== */

.about-section {
  position: relative;

  padding:
    88px 0;
}

.about-section-heading {
  max-width:
    860px;

  margin-bottom:
    44px;
}

.about-eyebrow {
  margin-bottom:
    10px;

  color:
    var(--about-blue-700);

  font-size:
    var(--about-type-eyebrow);

  font-weight:
    850;

  line-height:
    1.3;

  letter-spacing:
    0.14em;

  text-transform:
    uppercase;
}

.about-section-title {
  margin-bottom:
    16px;

  color:
    var(--about-navy-950);

  font-size:
    var(--about-type-section-title);

  font-weight:
    900;

  line-height:
    1.08;

  letter-spacing:
    -0.045em;
}

.about-section-description {
  max-width:
    790px;

  margin-bottom:
    0;

  color:
    var(--about-text-main);

  font-size:
    var(--about-type-section-description);

  font-weight:
    400;

  line-height:
    1.74;
}


/* ==========================================================
   06. BOTONES
========================================================== */

.about-button {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    11px;

  min-height:
    52px;

  padding:
    14px 22px;

  border:
    1px solid transparent;

  border-radius:
    var(--about-radius-sm);

  font-size:
    0.94rem;

  font-weight:
    800;

  line-height:
    1.2;

  transition:
    transform
    var(--about-transition),
    color
    var(--about-transition),
    background-color
    var(--about-transition),
    border-color
    var(--about-transition),
    box-shadow
    var(--about-transition);
}

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

.about-button--primary {
  color:
    var(--about-white);

  background:
    linear-gradient(
      135deg,
      var(--about-blue-700),
      var(--about-blue-500)
    );

  box-shadow:
    0 12px 28px
    rgba(7, 95, 187, 0.24);
}

.about-button--primary:hover {
  color:
    var(--about-white);

  box-shadow:
    0 16px 34px
    rgba(7, 95, 187, 0.31);
}

.about-button--secondary {
  color:
    var(--about-white);

  background:
    rgba(255, 255, 255, 0.1);

  border-color:
    rgba(255, 255, 255, 0.34);

  backdrop-filter:
    blur(10px);
}

.about-button--secondary:hover {
  color:
    var(--about-white);

  background:
    rgba(255, 255, 255, 0.18);

  border-color:
    rgba(255, 255, 255, 0.62);
}


/* ==========================================================
   07. HERO INSTITUCIONAL
========================================================== */

.about-hero {
  position: relative;

  width: 100%;

  min-height:
    680px;

  height:
    86vh;

  max-height:
    820px;

  overflow:
    hidden;

  color:
    var(--about-white);

  background:
    var(--about-navy-950);
}

.about-hero__background,
.about-hero__background img,
.about-hero__overlay,
.about-hero__texture {
  position:
    absolute;

  inset:
    0;
}

.about-hero__background img {
  width:
    100%;

  height:
    100%;

  max-width:
    none;

  object-fit:
    cover;

  object-position:
    center;
}

.about-hero__overlay {
  z-index:
    1;

  pointer-events:
    none;

  background:
    linear-gradient(
      90deg,
      rgba(4, 14, 23, 0.94) 0%,
      rgba(4, 14, 23, 0.82) 31%,
      rgba(4, 14, 23, 0.48) 58%,
      rgba(4, 14, 23, 0.17) 82%,
      rgba(4, 14, 23, 0.2) 100%
    ),
    linear-gradient(
      180deg,
      rgba(4, 14, 23, 0.3) 0%,
      transparent 34%,
      transparent 70%,
      rgba(4, 14, 23, 0.38) 100%
    );
}

.about-hero__texture {
  z-index:
    2;

  pointer-events:
    none;

  opacity:
    0.28;

  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px
    );

  background-size:
    52px 52px;
}

.about-hero__container {
  position:
    relative;

  z-index:
    3;

  display:
    flex;

  align-items:
    center;

  min-height:
    inherit;

  height:
    100%;
}

.about-hero__content {
  width:
    min(100%, 850px);

  padding:
    130px 0 105px;
}

.about-hero__eyebrow {
  margin-bottom:
    18px;

  color:
    #a9dcff;
}

.about-hero__title {
  max-width:
    940px;

  margin-bottom:
    24px;

  color:
    var(--about-white);

  font-size:
    var(--about-type-hero-title);

  font-weight:
    900;

  line-height:
    1.01;

  letter-spacing:
    -0.055em;

  text-wrap:
    balance;
}

.about-hero__description {
  max-width:
    720px;

  margin-bottom:
    31px;

  color:
    rgba(255, 255, 255, 0.86);

  font-size:
    var(--about-type-hero-description);

  font-weight:
    430;

  line-height:
    1.72;
}

.about-hero__actions {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    12px;
}


/* ==========================================================
   08. QUIÉNES SOMOS
========================================================== */

.about-identity {
  background:
    var(--about-white);
}

.about-identity__layout {
  display:
    grid;

  grid-template-columns:
    minmax(360px, 0.86fr)
    minmax(0, 1.14fr);

  gap:
    clamp(42px, 6vw, 88px);

  align-items:
    center;
}

.about-identity__media {
  position:
    relative;

  width:
    100%;

  aspect-ratio:
    1 / 1;

  margin:
    0;

  overflow:
    hidden;

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

  border-radius:
    var(--about-radius-lg);

  background:
    var(--about-background);

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

.about-identity__media::after {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  pointer-events:
    none;

  background:
    linear-gradient(
      145deg,
      transparent 55%,
      rgba(7, 23, 37, 0.08)
    );
}

.about-identity__media img {
  width:
    100%;

  height:
    100%;

  max-width:
    none;

  object-fit:
    cover;

  object-position:
    center;
}

.about-identity__content {
  min-width:
    0;
}

.about-identity__text {
  max-width:
    730px;
}

.about-identity__text p {
  margin-bottom:
    20px;

  color:
    var(--about-text-main);

  font-size:
    1rem;

  line-height:
    1.78;
}

.about-identity__text p:first-child {
  color:
    var(--about-navy-900);

  font-size:
    1.08rem;

  font-weight:
    620;
}

.about-identity__text p:last-child {
  margin-bottom:
    0;
}


/* PILARES */

.about-identity__pillars {
  display:
    grid;

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

  gap:
    13px;

  margin-top:
    34px;
}

.about-identity-pillar {
  position:
    relative;

  min-width:
    0;

  padding:
    20px;

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

  border-radius:
    var(--about-radius-md);

  background:
    var(--about-background-soft);

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

.about-identity-pillar__number {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-width:
    34px;

  min-height:
    26px;

  margin-bottom:
    13px;

  padding:
    4px 8px;

  border-radius:
    var(--about-radius-pill);

  color:
    var(--about-blue-700);

  background:
    var(--about-blue-100);

  font-size:
    0.7rem;

  font-weight:
    900;

  letter-spacing:
    0.08em;
}

.about-identity-pillar__title {
  margin-bottom:
    9px;

  color:
    var(--about-navy-950);

  font-size:
    0.98rem;

  font-weight:
    850;

  line-height:
    1.25;
}

.about-identity-pillar__description {
  margin-bottom:
    0;

  color:
    var(--about-text-secondary);

  font-size:
    0.84rem;

  line-height:
    1.58;
}
/* ==========================================================
   09. QUÉ HACEMOS
   FLUJO HORIZONTAL DE CAPACIDADES
========================================================== */

.about-capabilities-flow {
  overflow:
    hidden;

  background:
    radial-gradient(
      circle at 88% 12%,
      rgba(21, 133, 219, 0.08),
      transparent 29%
    ),
    var(--about-background);
}

.about-capabilities-flow__introduction {
  max-width:
    920px;

  margin-bottom:
    38px;

  padding-left:
    22px;

  border-left:
    4px solid
    var(--about-blue-600);
}

.about-capabilities-flow__introduction p {
  margin-bottom:
    0;

  color:
    var(--about-text-main);

  font-size:
    1.02rem;

  line-height:
    1.74;
}


/* FLUJO */

.about-capabilities-flow__track {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    38px
    minmax(0, 1fr)
    38px
    minmax(0, 1fr)
    38px
    minmax(0, 1fr);

  gap:
    12px;

  align-items:
    stretch;
}


/* TARJETA DEL FLUJO */

.about-flow-card {
  position:
    relative;

  display:
    flex;

  flex-direction:
    column;

  min-width:
    0;

  min-height:
    100%;

  padding:
    24px 20px;

  overflow:
    hidden;

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

  border-radius:
    var(--about-radius-md);

  background:
    var(--about-white);

  box-shadow:
    var(--about-shadow-sm);

  transition:
    transform
    var(--about-transition),
    border-color
    var(--about-transition),
    box-shadow
    var(--about-transition);
}

.about-flow-card:hover {
  transform:
    translateY(-5px);

  border-color:
    rgba(7, 95, 187, 0.31);

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

.about-flow-card__number {
  position:
    absolute;

  top:
    16px;

  right:
    16px;

  z-index:
    2;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-width:
    34px;

  min-height:
    26px;

  padding:
    4px 8px;

  border-radius:
    var(--about-radius-pill);

  color:
    var(--about-blue-700);

  background:
    var(--about-blue-100);

  font-size:
    0.7rem;

  font-weight:
    900;

  letter-spacing:
    0.08em;
}

.about-flow-card__icon {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    122px;

  height:
    122px;

  margin:
    4px auto 20px;

  padding:
    10px;

  border:
    1px solid
    rgba(7, 95, 187, 0.12);

  border-radius:
    var(--about-radius-md);

  background:
    linear-gradient(
      145deg,
      var(--about-blue-050),
      var(--about-white)
    );
}

.about-flow-card__icon img {
  width:
    100%;

  height:
    100%;

  max-width:
    none;

  object-fit:
    contain;

  object-position:
    center;
}

.about-flow-card__content {
  display:
    flex;

  flex:
    1 1 auto;

  flex-direction:
    column;
}

.about-flow-card__title {
  min-height:
    50px;

  margin-bottom:
    12px;

  color:
    var(--about-navy-950);

  font-size:
    1.06rem;

  font-weight:
    850;

  line-height:
    1.3;

  letter-spacing:
    -0.02em;
}

.about-flow-card__description {
  margin-bottom:
    0;

  color:
    var(--about-text-secondary);

  font-size:
    0.88rem;

  line-height:
    1.64;
}


/* FLECHAS */

.about-flow-arrow {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(--about-blue-600);
}

.about-flow-arrow span {
  display:
    block;

  font-size:
    2rem;

  font-weight:
    700;

  line-height:
    1;
}


/* CIERRE DEL FLUJO */

.about-capabilities-flow__closing {
  max-width:
    820px;

  margin:
    34px auto 0;

  padding:
    18px 24px;

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

  border-radius:
    var(--about-radius-md);

  background:
    var(--about-white);

  box-shadow:
    var(--about-shadow-sm);

  text-align:
    center;
}

.about-capabilities-flow__closing p {
  margin-bottom:
    0;

  color:
    var(--about-navy-900);

  font-size:
    0.94rem;

  font-weight:
    700;

  line-height:
    1.62;
}


/* ==========================================================
   10. FUNDADOR Y EQUIPO
========================================================== */

.about-team {
  background:
    var(--about-white);
}


/* FUNDADOR */

.about-founder-card {
  display:
    grid;

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

  gap:
    clamp(38px, 5vw, 74px);

  align-items:
    center;

  padding:
    clamp(28px, 4vw, 48px);

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

  border-radius:
    var(--about-radius-lg);

  background:
    linear-gradient(
      145deg,
      var(--about-white),
      var(--about-background-soft)
    );

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

.about-founder-card__media {
  position:
    relative;

  width:
    100%;

  aspect-ratio:
    1 / 1;

  margin:
    0;

  overflow:
    hidden;

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

  border-radius:
    var(--about-radius-lg);

  background:
    var(--about-background);

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

.about-founder-card__media::after {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  pointer-events:
    none;

  background:
    linear-gradient(
      180deg,
      transparent 70%,
      rgba(7, 23, 37, 0.08)
    );
}

.about-founder-card__media img {
  width:
    100%;

  height:
    100%;

  max-width:
    none;

  object-fit:
    cover;

  object-position:
    center;
}

.about-founder-card__content {
  min-width:
    0;
}

.about-founder-card__header {
  margin-bottom:
    22px;
}

.about-person-role {
  margin-bottom:
    8px;

  color:
    var(--about-blue-700);

  font-size:
    0.74rem;

  font-weight:
    850;

  line-height:
    1.35;

  letter-spacing:
    0.11em;

  text-transform:
    uppercase;
}

.about-founder-card__name {
  margin-bottom:
    8px;

  color:
    var(--about-navy-950);

  font-size:
    clamp(1rem, 1.2vw, 2.0rem);

  font-weight:
    900;

  line-height:
    1.06;

  letter-spacing:
    -0.044em;
}

.about-person-profession {
  margin-bottom:
    0;

  color:
    var(--about-text-secondary);

  font-size:
    0.96rem;

  font-weight:
    700;

  line-height:
    1.5;
}

.about-founder-card__description {
  max-width:
    720px;
}

.about-founder-card__description p {
  margin-bottom:
    16px;

  color:
    var(--about-text-main);

  font-size:
    0.98rem;

  line-height:
    1.72;
}

.about-founder-card__description p:last-child {
  margin-bottom:
    0;
}


/* ETIQUETAS PROFESIONALES */

.about-person-areas {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    9px;

  margin-top:
    24px;
}

.about-person-areas span {
  display:
    inline-flex;

  align-items:
    center;

  min-height:
    32px;

  padding:
    7px 11px;

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

  border-radius:
    var(--about-radius-pill);

  color:
    var(--about-navy-900);

  background:
    var(--about-white);

  font-size:
    0.76rem;

  font-weight:
    750;

  line-height:
    1.2;
}


/* REDES SOCIALES */

.about-social-links {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    10px;

  margin-top:
    26px;
}

.about-social-link {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    9px;

  min-height:
    44px;

  padding:
    10px 14px;

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

  border-radius:
    var(--about-radius-sm);

  color:
    var(--about-navy-900);

  background:
    var(--about-white);

  font-size:
    0.82rem;

  font-weight:
    800;

  box-shadow:
    var(--about-shadow-sm);

  transition:
    transform
    var(--about-transition),
    color
    var(--about-transition),
    border-color
    var(--about-transition),
    background-color
    var(--about-transition),
    box-shadow
    var(--about-transition);
}

.about-social-link:hover {
  transform:
    translateY(-2px);

  color:
    var(--about-blue-700);

  border-color:
    rgba(7, 95, 187, 0.35);

  background:
    var(--about-blue-050);

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

.about-social-link img {
  width:
    24px;

  height:
    24px;

  flex:
    0 0 24px;

  object-fit:
    contain;

  object-position:
    center;
}


/* SUBENCABEZADO DEL EQUIPO */

.about-team__subheading {
  max-width:
    760px;

  margin:
    72px 0 34px;
}

.about-team__subtitle {
  margin-bottom:
    12px;

  color:
    var(--about-navy-950);

  font-size:
    clamp(1.4rem, 2.4vw, 2rem);

  font-weight:
    900;

  line-height:
    1.1;

  letter-spacing:
    -0.038em;
}

.about-team__description {
  max-width:
    690px;

  margin-bottom:
    0;

  color:
    var(--about-text-main);

  font-size:
    0.98rem;

  line-height:
    1.7;
}


/* CUADRÍCULA DEL EQUIPO */

.about-team__grid {
  display:
    grid;

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

  gap:
    18px;
}

.about-person-card {
  display:
    flex;

  flex-direction:
    column;

  min-width:
    0;

  min-height:
    100%;

  overflow:
    hidden;

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

  border-radius:
    var(--about-radius-md);

  background:
    var(--about-white);

  box-shadow:
    var(--about-shadow-sm);

  transition:
    transform
    var(--about-transition),
    border-color
    var(--about-transition),
    box-shadow
    var(--about-transition);
}

.about-person-card:hover {
  transform:
    translateY(-5px);

  border-color:
    rgba(7, 95, 187, 0.3);

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

.about-person-card__media {
  position:
    relative;

  width:
    100%;

  aspect-ratio:
    1 / 1;

  margin:
    0;

  overflow:
    hidden;

  background:
    var(--about-background);
}

.about-person-card__media::after {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  pointer-events:
    none;

  background:
    linear-gradient(
      180deg,
      transparent 68%,
      rgba(7, 23, 37, 0.07)
    );
}

.about-person-card__media img {
  width:
    100%;

  height:
    100%;

  max-width:
    none;

  object-fit:
    cover;

  object-position:
    center;

  transition:
    transform 520ms ease;
}

.about-person-card:hover
.about-person-card__media img {
  transform:
    scale(1.025);
}

.about-person-card__content {
  display:
    flex;

  flex:
    1 1 auto;

  flex-direction:
    column;

  padding:
    22px;
}

.about-person-card__name {
  margin-bottom:
    7px;

  color:
    var(--about-navy-950);

  font-size:
    1.18rem;

  font-weight:
    850;

  line-height:
    1.2;

  letter-spacing:
    -0.022em;
}

.about-person-card__description {
  margin-bottom:
    0;

  color:
    var(--about-text-secondary);

  font-size:
    0.9rem;

  line-height:
    1.64;
}

.about-person-card
.about-person-areas {
  margin-top:
    auto;

  padding-top:
    20px;
}
/* ==========================================================
   11. CTA FINAL
========================================================== */

.about-final-cta {
  position:
    relative;

  overflow:
    hidden;

  padding:
    78px 0;

  color:
    var(--about-text-main);

  background:
    radial-gradient(
      circle at 84% 18%,
      rgba(21, 133, 219, 0.08),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      var(--about-white) 0%,
      var(--about-background) 100%
    );

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

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

.about-final-cta::before {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  pointer-events:
    none;

  background-image:
    linear-gradient(
      rgba(7, 95, 187, 0.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(7, 95, 187, 0.035) 1px,
      transparent 1px
    );

  background-size:
    44px 44px;
}

.about-final-cta
.about-container {
  position:
    relative;

  z-index:
    1;
}

.about-final-cta__inner {
  display:
    grid;

  grid-template-columns:
    190px
    minmax(0, 1fr)
    minmax(250px, auto);

  gap:
    clamp(28px, 4vw, 58px);

  align-items:
    center;
}


/* IMAGEN */

.about-final-cta__media {
  width:
    190px;

  aspect-ratio:
    1 / 1;

  margin:
    0;

  overflow:
    hidden;

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

  border-radius:
    var(--about-radius-md);

  background:
    var(--about-background);

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

.about-final-cta__media img {
  width:
    100%;

  height:
    100%;

  max-width:
    none;

  object-fit:
    cover;

  object-position:
    center;
}


/* TEXTO */

.about-final-cta__content {
  min-width:
    0;

  max-width:
    760px;
}

.about-final-cta__eyebrow {
  margin-bottom:
    12px;

  color:
    var(--about-blue-700);
}

.about-final-cta__title {
  margin-bottom:
    16px;

  color:
    var(--about-navy-950);

  font-size:
    clamp(1.7rem, 2.8vw, 2.45rem);

  font-weight:
    900;

  line-height:
    1.09;

  letter-spacing:
    -0.042em;
}

.about-final-cta__description {
  max-width:
    720px;

  margin-bottom:
    0;

  color:
    var(--about-text-main);

  font-size:
    1rem;

  line-height:
    1.72;
}


/* ACCIÓN */

.about-final-cta__action {
  display:
    flex;

  justify-content:
    flex-end;
}

.about-final-cta__button {
  min-width:
    245px;

  min-height:
    58px;

  padding:
    16px 24px;

  color:
    var(--about-white) !important;

  background:
    linear-gradient(
      135deg,
      var(--about-blue-700),
      var(--about-blue-500)
    ) !important;

  box-shadow:
    0 14px 30px
    rgba(7, 95, 187, 0.24);
}

.about-final-cta__button,
.about-final-cta__button span {
  color:
    var(--about-white) !important;

  -webkit-text-fill-color:
    var(--about-white) !important;

  opacity:
    1 !important;

  visibility:
    visible !important;
}

.about-final-cta__button:hover {
  transform:
    translateY(-3px);

  color:
    var(--about-white) !important;

  background:
    linear-gradient(
      135deg,
      #064f9d,
      #0b73d1
    ) !important;

  box-shadow:
    0 18px 38px
    rgba(7, 95, 187, 0.31);
}


/* ==========================================================
   12. TABLET GRANDE
========================================================== */

@media (max-width: 1100px) {

  .about-hero {
    min-height:
      650px;

    height:
      82vh;
  }

  .about-hero__content {
    width:
      min(100%, 760px);
  }

  .about-identity__layout {
    grid-template-columns:
      minmax(320px, 0.82fr)
      minmax(0, 1.18fr);

    gap:
      44px;
  }

  .about-identity__pillars {
    grid-template-columns:
      1fr;
  }

  .about-capabilities-flow__track {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap:
      18px;
  }

  .about-flow-arrow {
    display:
      none;
  }

  .about-founder-card {
    grid-template-columns:
      minmax(300px, 0.8fr)
      minmax(0, 1.2fr);

    gap:
      42px;
  }

  .about-final-cta__inner {
    grid-template-columns:
      160px
      minmax(0, 1fr);

    gap:
      28px 34px;
  }

  .about-final-cta__media {
    width:
      160px;
  }

  .about-final-cta__action {
    grid-column:
      2;

    justify-content:
      flex-start;
  }

}


/* ==========================================================
   13. TABLET
========================================================== */

@media (max-width: 900px) {

  .about-section {
    padding:
      72px 0;
  }

  .about-hero {
    min-height:
      620px;

    height:
      80vh;

    max-height:
      720px;
  }

  .about-hero__overlay {
    background:
      linear-gradient(
        90deg,
        rgba(4, 14, 23, 0.92) 0%,
        rgba(4, 14, 23, 0.76) 52%,
        rgba(4, 14, 23, 0.34) 100%
      );
  }

  .about-hero__content {
    width:
      min(100%, 660px);

    padding-top:
      120px;
  }

  .about-identity__layout {
    grid-template-columns:
      1fr;

    gap:
      34px;
  }

  .about-identity__media {
    max-width:
      620px;

    margin-inline:
      auto;
  }

  .about-identity__content {
    max-width:
      760px;

    margin-inline:
      auto;
  }

  .about-founder-card {
    grid-template-columns:
      1fr;

    gap:
      32px;
  }

  .about-founder-card__media {
    width:
      min(100%, 520px);

    margin-inline:
      auto;
  }

  .about-team__grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}


/* ==========================================================
   14. MÓVIL Y TABLET PEQUEÑA
========================================================== */

@media (max-width: 720px) {

  html {
    scroll-padding-top:
      82px;
  }

  .about-container {
    width:
      min(
        calc(100% - 28px),
        var(--about-container-width)
      );
  }

  .about-section {
    padding:
      62px 0;
  }

  .about-section-heading {
    margin-bottom:
      32px;
  }

  .about-section-title {
    font-size:
      clamp(1.65rem, 7vw, 2.2rem);
  }

  .about-section-description {
    font-size:
      0.98rem;

    line-height:
      1.68;
  }


  /* HERO */

  .about-hero {
    min-height:
      610px;

    height:
      86svh;

    max-height:
      740px;
  }

  .about-hero__background img {
    object-position:
      center;
  }

  .about-hero__overlay {
    background:
      linear-gradient(
        180deg,
        rgba(4, 14, 23, 0.54) 0%,
        rgba(4, 14, 23, 0.72) 40%,
        rgba(4, 14, 23, 0.96) 100%
      );
  }

  .about-hero__container {
    align-items:
      flex-end;
  }

  .about-hero__content {
    width:
      100%;

    padding:
      120px 0 72px;
  }

  .about-hero__eyebrow {
    margin-bottom:
      13px;
  }

  .about-hero__title {
    margin-bottom:
      20px;

    font-size:
      clamp(2.05rem, 10vw, 3.05rem);

    line-height:
      1.02;
  }

  .about-hero__description {
    margin-bottom:
      25px;

    font-size:
      0.97rem;

    line-height:
      1.62;
  }

  .about-hero__actions {
    align-items:
      stretch;

    flex-direction:
      column;
  }

  .about-hero__actions
  .about-button {
    width:
      100%;
  }


  /* QUIÉNES SOMOS */

  .about-identity__layout {
    gap:
      28px;
  }

  .about-identity__pillars {
    gap:
      10px;
  }

  .about-identity-pillar {
    padding:
      18px;
  }


  /* FLUJO */

  .about-capabilities-flow__introduction {
    margin-bottom:
      28px;

    padding-left:
      16px;
  }

  .about-capabilities-flow__track {
    grid-template-columns:
      1fr;

    gap:
      14px;
  }

  .about-flow-card {
    display:
      grid;

    grid-template-columns:
      100px minmax(0, 1fr);

    gap:
      18px;

    align-items:
      center;

    padding:
      18px;
  }

  .about-flow-card__number {
    top:
      12px;

    right:
      12px;
  }

  .about-flow-card__icon {
    width:
      100px;

    height:
      100px;

    margin:
      0;
  }

  .about-flow-card__title {
    min-height:
      auto;
  }

  .about-capabilities-flow__closing {
    margin-top:
      24px;

    padding:
      16px 18px;
  }


  /* FUNDADOR */

  .about-founder-card {
    padding:
      10px;
  }


  .about-founder-card__name {
    font-size:
      clamp(0.5rem, 1vw, 1.0rem);
  }

  .about-social-links {
    display:
      grid;

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

  .about-social-link {
    width:
      100%;
  }

  .about-team__subheading {
    margin-top:
      56px;
  }

  .about-team__grid {
    grid-template-columns:
      1fr;

    gap:
      14px;
  }

  .about-person-card {
    display:
      grid;

    grid-template-columns:
      132px minmax(0, 1fr);
  }

  .about-person-card__media {
    height:
      100%;

    min-height:
      205px;

    aspect-ratio:
      auto;
  }

  .about-person-card__content {
    padding:
      18px;
  }

  .about-person-card
  .about-person-areas {
    margin-top:
      0;

    padding-top:
      16px;
  }


  /* CTA */

  .about-final-cta {
    padding:
      62px 0;
  }

  .about-final-cta__inner {
    grid-template-columns:
      1fr;

    gap:
      26px;
  }

  .about-final-cta__media {
    width:
      min(100%, 260px);

    margin-inline:
      auto;
  }

  .about-final-cta__content {
    text-align:
      left;
  }

  .about-final-cta__title {
    font-size:
      clamp(1.65rem, 7vw, 2.2rem);
  }

  .about-final-cta__description {
    font-size:
      0.98rem;

    line-height:
      1.68;
  }

  .about-final-cta__action {
    grid-column:
      auto;

    justify-content:
      stretch;
  }

  .about-final-cta__button {
    width:
      100%;

    min-width:
      0;
  }

}


/* ==========================================================
   15. MÓVIL PEQUEÑO
========================================================== */

@media (max-width: 480px) {

  .about-container {
    width:
      min(
        calc(100% - 22px),
        var(--about-container-width)
      );
  }

  .about-hero {
    min-height:
      590px;
  }

  .about-hero__content {
    padding-bottom:
      58px;
  }

  .about-flow-card {
    grid-template-columns:
      86px minmax(0, 1fr);

    gap:
      14px;

    padding:
      15px;
  }

  .about-flow-card__icon {
    width:
      86px;

    height:
      86px;
  }

  .about-flow-card__title {
    font-size:
      0.98rem;
  }

  .about-flow-card__description {
    font-size:
      0.82rem;

    line-height:
      1.52;
  }

  .about-social-links {
    grid-template-columns:
      1fr;
  }

  .about-person-card {
    grid-template-columns:
      108px minmax(0, 1fr);
  }

  .about-person-card__media {
    min-height:
      188px;
  }

  .about-person-card__content {
    padding:
      15px;
  }

  .about-person-card__name {
    font-size:
      1rem;
  }

  .about-person-card__description {
    font-size:
      0.82rem;

    line-height:
      1.5;
  }

  .about-person-areas span {
    font-size:
      0.68rem;
  }

}


/* ==========================================================
   16. PANTALLAS GRANDES
========================================================== */

@media (min-width: 1600px) {

  .about-hero {
    max-height:
      860px;
  }

  .about-hero__content {
    width:
      min(100%, 920px);
  }

}


/* ==========================================================
   17. MOVIMIENTO REDUCIDO
========================================================== */

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

  html {
    scroll-behavior:
      auto;
  }

  body.geoplot-about-page *,
  body.geoplot-about-page *::before,
  body.geoplot-about-page *::after {
    scroll-behavior:
      auto !important;

    transition-duration:
      0.01ms !important;

    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;
  }

}


/* ==========================================================
   18. IMPRESIÓN
========================================================== */

@media print {

  .about-hero__overlay,
  .about-hero__texture,
  .about-final-cta,
  .about-social-links {
    display:
      none !important;
  }

  .about-hero {
    min-height:
      auto;

    height:
      auto;

    max-height:
      none;

    color:
      #000000;

    background:
      #ffffff;
  }

  .about-hero__background {
    position:
      relative;

    height:
      300px;
  }

  .about-hero__container {
    position:
      static;

    min-height:
      auto;
  }

  .about-hero__content {
    padding:
      30px 0;
  }

  .about-hero__title,
  .about-hero__description,
  .about-hero__eyebrow {
    color:
      #000000;
  }

  .about-section {
    padding:
      32px 0;
  }

  .about-identity__media,
  .about-flow-card,
  .about-founder-card,
  .about-person-card {
    break-inside:
      avoid;

    box-shadow:
      none;
  }

}
/* ==========================================================
   CORRECCIÓN DEL HEADER GLOBAL EN LA PÁGINA NOSOTROS
========================================================== */

body.geoplot-about-page .site-header .brand,
body.geoplot-about-page .site-header .brand:link,
body.geoplot-about-page .site-header .brand:visited,
body.geoplot-about-page .site-header .brand:hover,
body.geoplot-about-page .site-header .brand:focus-visible {
  color: #ffffff !important;
  text-decoration: none;
}

body.geoplot-about-page .site-header .brand-name,
body.geoplot-about-page .site-header .brand-tagline {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

  opacity: 1 !important;
  visibility: visible !important;
}

body.geoplot-about-page .site-header .brand-name {
  font-weight: 900;
}

body.geoplot-about-page .site-header .brand-tagline {
  font-weight: 700;
}