/* ===== Fuentes ===== */
@font-face { font-family: Graph; font-weight: 300; font-style: normal; font-display: swap; src: url("assets/GraphikLight.otf") format("opentype"); }
@font-face { font-family: Graph; font-weight: 400; font-style: normal; font-display: swap; src: url("assets/GraphikRegular.otf") format("opentype"); }

/* ===== Variables (colores de Webflow) ===== */
:root {
  --salmon-2: #f66;
  --medium-slate-blue: #8676f0;
  --rosa-claro: #ffeaf0;
  --gris-texto: #525252;
  --white-smoke: #f0f2f2;
}

/* ===== Base ===== */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; }
body { margin: 0; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; color: #333; font-size: 14px; line-height: 20px; }
.body { color: var(--gris-texto); text-align: center; }
p { margin: 0 0 10px; }
img { max-width: 100%; vertical-align: middle; display: inline-block; border: 0; }
a { color: inherit; }
[id] { scroll-margin-top: 10vmin; }

/* ===== Navegación ===== */
.navbar { position: fixed; inset: 0 0 auto; z-index: 1000; display: flex; width: 100%; padding: 2vmin 3vw 2vmin 4vw; justify-content: center; align-items: center; background-color: #fff; }
.div-menu { display: flex; align-items: center; flex: 1 1 0%; }
.brand { display: flex; padding: 1px 0 1px 1px; justify-content: flex-start; align-items: center; flex: 1 1 0%; text-decoration: none; }
.logo-mta { display: block; width: 18vmin; max-width: none; }
.nav-menu { display: flex; align-items: center; flex: 0 1 auto; }
.nav-link { display: inline-block; padding: 1.5vmin; font-family: Inter, sans-serif; color: #222; font-size: clamp(1rem, 1.2vw, 1.3rem); line-height: 1; font-weight: 500; letter-spacing: 0.06vw; text-decoration: none; }
.nav-link:hover { color: var(--salmon-2); }
.menu-button-2 { display: none; background: none; border: 0; cursor: pointer; padding: 0; }

/* ===== Hero ===== */
.home-hero { margin-top: 8.5vmin; padding: 13vw 11vw 5vw; background-image: url("assets/MTA_bgHome-1x.jpg"); background-position: 81% 0; background-size: contain; background-repeat: no-repeat; text-align: left; }
.home-intro { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; }
.home-intro-text { display: block; width: 15ch; margin-bottom: 0; font-family: Graph, sans-serif; font-size: 3.2vw; line-height: 1.2; font-weight: 400; letter-spacing: -0.02em; }
.bloque-botones { margin-top: 4rem; margin-left: -0.5vmax; }
.fuente { display: block; width: 37ch; margin: 7vw 0 0 0.5vw; font-family: Graph, sans-serif; color: rgba(82, 82, 82, 0.5); font-size: 0.666667vw; line-height: 1.45; font-weight: 400; letter-spacing: 0.01vw; }

/* ===== Botones ===== */
.botones { display: inline-block; margin: 0 0.5vmax; padding: 0.8vmax 1vmax; border: 0.17em solid var(--salmon-2); border-radius: 0.5vmin; background-color: transparent; font-family: Graph, sans-serif; color: var(--salmon-2); font-size: clamp(0.7rem, 1vw, 5rem); line-height: 1; font-weight: 400; text-align: center; letter-spacing: 0.04vw; text-decoration: none; cursor: pointer; transition: opacity .2s; }
.botones:hover { opacity: 0.8; }
.botones.extra { border-color: var(--medium-slate-blue); color: var(--medium-slate-blue); }
.botones.pequenos { padding: 0.8vmax; border-style: none; background-color: var(--rosa-claro); font-size: 0.7vmax; }

/* ===== Secciones ===== */
.home-secciones { position: static; z-index: 10; display: flex; padding: 0 18vw 5%; flex-direction: row; justify-content: center; align-items: center; text-align: left; }
.home-secciones.about { padding: 8% 0 5%; flex-direction: column; }
.home-intros { position: relative; z-index: 1; display: flex; margin-right: 4%; flex-direction: column; justify-content: center; }
.home-intros.about { margin-right: 0; align-items: center; }
.apartados-titulo { display: block; width: 14ch; margin: 0 0 6vw; padding: 2vw 0; align-self: center; border-top: 0.17vw solid var(--medium-slate-blue); border-bottom: 0.17vw solid var(--medium-slate-blue); font-family: Graph, sans-serif; color: var(--medium-slate-blue); font-size: 2.37vw; line-height: 1.2; text-align: center; letter-spacing: -0.05vw; }
.about-text { display: block; width: 70vw; max-width: 1400px; margin-bottom: 0; font-family: Graph, sans-serif; font-size: clamp(1.6rem, 2.37vw, 4rem); line-height: 1.335; font-weight: 400; text-align: center; letter-spacing: -0.02em; }

.home-secciones-2 { display: flex; padding: 0 0 5%; flex-direction: row; justify-content: center; align-items: center; text-align: left; }
.home-secciones-2.invert { padding-bottom: 6%; }
.home-secciones-2-1 { display: flex; max-width: 27vw; margin: 0 1.5vw; flex-direction: column; justify-content: center; align-items: center; }
.home-secciones-2-1.middle { flex-direction: column-reverse; }
.home-secciones-iconos { position: relative; display: flex; width: 4vw; height: 4vw; margin-bottom: 6%; justify-content: center; align-items: center; align-self: center; }
.home-iconos { width: 100%; max-width: none; }
.home-secciones-intros { position: relative; z-index: 1; display: block; align-self: center; text-align: center; }
.home-secciones-texto { display: block; width: 27ch; margin-bottom: 8%; font-family: Inter, sans-serif; font-size: clamp(0.9rem, 1vw, 1.2rem); line-height: 1.4; font-weight: 300; text-align: center; letter-spacing: 0.01em; }

.home-imagen-recurso { background-image: linear-gradient(#fff 30%, var(--rosa-claro) 50%); }
.image-36 { display: inline-block; height: 65vw; max-width: none; }
.image-31 { display: none; }

/* ===== Logos ===== */
.bloque-logos { display: flex; width: 65vw; margin: 6% 0 8%; padding: 0 7vw; justify-content: center; flex-wrap: wrap; align-items: center; }
.clientes { display: flex; width: 10vw; height: 5vw; margin: 0 1.5vw; justify-content: center; align-items: center; }
.clientes.narrow { margin: 0 -1vw; }

/* ===== Footer ===== */
.footer { padding: 8vmin 0 12vmin; background-color: var(--rosa-claro); }
.container { display: flex; margin: 0 auto; padding: 0 13vw 0 11vw; flex-direction: column; align-items: flex-start; }
.footer-texto { display: flex; flex-direction: column; align-items: flex-start; }
.footer-datos { display: block; width: 30ch; margin-bottom: 3vw; font-family: Graph, sans-serif; color: var(--gris-texto); font-size: 1.26562vw; line-height: 1.4; font-weight: 400; text-align: left; }
.footer-tel { text-decoration: none; }
.footer-legal { margin-bottom: 0; font-family: Inter, sans-serif; color: var(--gris-texto); font-size: 0.790123vw; line-height: 1.4; text-align: left; }
.link-inline { position: relative; color: rgba(255, 102, 102, 0.8); font-weight: 400; text-decoration: none; }
.link-inline:hover { text-decoration: underline; }

/* ===== Tablet (≤ 991px) ===== */
@media screen and (max-width: 991px) {
  .navbar { padding-top: 2vmin; padding-bottom: 2vmin; }
  .home-hero { margin-top: 9.5vmin; padding-top: 12vmin; padding-bottom: 12vmin; }
  .home-intro { width: 42vmin; }
  .home-intro-text { letter-spacing: -0.08vw; }
  .fuente { margin-bottom: 2vw; }
  .botones { display: none; border-radius: 4px; font-size: 0.8vw; }
  .botones.extra { display: inline-block; border-color: var(--salmon-2); color: var(--salmon-2); font-size: 1vmax; }
  .botones.pequenos { display: inline-block; }
  .apartados-titulo { letter-spacing: -0.08vw; }
  .container { padding-right: 8.5vw; padding-left: 11vw; }
  .footer-datos { font-size: 1.79396vw; }
  .footer-legal { font-size: 1vw; }
}

/* ===== Móvil horizontal (≤ 767px) ===== */
@media screen and (max-width: 767px) {
  .navbar { padding: 2vw 2vw 2vw 4vw; }
  .logo-mta { width: 16vw; }
  .menu-button-2 { display: block; align-self: center; }
  .image-13 { width: 3vw; }
  .nav-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: flex-start; padding: 0 0 1rem 2.5vw; background-color: #fff; text-align: left; }
  .nav-menu.is-open { display: flex; }
  .nav-link { padding: 1.5vw; font-size: 1.5vw; }
  .home-hero { margin-top: 7vw; padding: 5vw 7vw 20vw 13vw; }
  .fuente { margin-bottom: 0; }
  .home-secciones.about { padding-right: 15vw; padding-left: 15vw; }
  .about-text { font-size: 2.66667vw; }
  .home-secciones-texto { font-size: 1.31625vw; }
  .botones { font-size: 1.1vw; }
  .bloque-botones { margin-top: 2vw; }
  .container { padding-right: 2vw; }
}

/* ===== Móvil (≤ 479px) ===== */
@media screen and (max-width: 479px) {
  .navbar { padding: 0 0 0 5vw; align-items: flex-start; }
  .brand { margin-top: 1.5vw; padding: 0; }
  .logo-mta { width: 35vw; }
  .menu-button-2 { padding: 4vw; }
  .image-13 { width: 5vw; }
  .nav-menu { padding: 2vw 0 1rem 5vw; border-bottom: 1px solid var(--white-smoke); }
  .nav-link { padding: 0.8rem 2vw 0.8rem 0; font-size: 5.3vw; }

  .home-hero { display: flex; overflow: hidden; height: 85vh; margin-top: 13vw; padding: 8vw 0 0; flex-direction: column; justify-content: flex-start; align-items: flex-start; background-image: url("assets/MTA_bgHome_mobile-2x.jpg"); background-position: 100% 70%; }
  .home-intro { width: auto; padding: 0 8vw; text-align: left; }
  .home-intro-text { width: auto; max-width: 90vw; color: var(--gris-texto); font-size: 8.2vw; line-height: 1.125; letter-spacing: -0.04rem; }
  .bloque-botones { display: flex; margin-top: 2rem; }
  .fuente { width: 27ch; margin: 0 -2vw 0 3vw; color: rgba(82, 82, 82, 0.8); font-size: 1.95556vw; line-height: 1.3; letter-spacing: 0.02rem; }
  .botones { padding: 3vw; align-self: center; border-width: 0.5vw; border-radius: 4px; font-family: Inter, sans-serif; font-size: 3.4vw; }
  .botones.extra { font-size: 3.4vw; }
  .botones.pequenos { padding: 2.7vw; font-size: 3.4vw; }

  .home-secciones.about { padding: 0 9vw 16vw; justify-content: center; align-items: center; }
  .home-intros { margin-right: -3vw; margin-bottom: 10vw; }
  .home-intros.about { margin-right: 0; margin-bottom: 0; }
  .apartados-titulo { width: auto; max-width: 90vw; margin: 8vw 0 12vw; padding: 4vw 6vw; border-top-width: 0.6vw; border-bottom-width: 0.6vw; font-size: 5.3vw; letter-spacing: 0; }
  .about-text { width: 100%; margin: 0 -2vw; color: #5c5c5c; font-size: 6.4vw; line-height: 1.2; letter-spacing: -0.04rem; }

  .home-secciones-2.invert { padding: 0 16vw 8vw; flex-direction: column; }
  .home-secciones-2-1 { max-width: none; margin: 0; }
  .home-secciones-iconos { width: 18vw; height: 18vw; margin-bottom: 8%; }
  .home-secciones-iconos.left { margin-bottom: 6%; }
  .home-secciones-intros { display: flex; margin: 0 0 11vw; flex-direction: column; align-items: center; }
  .home-secciones-texto { width: 100%; margin-bottom: 10vw; font-size: 4.26667vw; }

  .home-imagen-recurso { margin-bottom: 16%; }
  .image-36 { display: none; }
  .image-31 { display: block; width: 100vw; max-width: none; }

  .bloque-logos { width: 76vw; margin-top: 16%; padding: 0; }
  .clientes { width: 28vw; height: 14vw; margin: 0 4vw; }
  .clientes.narrow { width: 28vw; height: 9vw; margin: 0 3vw; }

  .footer { padding: 3rem 0 16vw; }
  .container { padding: 0 13vw; }
  .footer-datos { width: auto; margin-bottom: 3rem; font-size: 4.266vw; }
  .footer-legal { font-size: 2.5vw; line-height: 1.5; }
}

/* ===================================================== */
/* ===== Páginas interiores (Soluciones, Tecnologías, Portfolio, legales) ===== */
/* ===================================================== */
.nav-link.is-current { color: var(--medium-slate-blue); }
h2.servicios-titulo { font-size: 0.9vmax; }
.hero-solutions, .hero-technologies, .hero-portfolio { display: flex; margin-top: 8.5vmin; padding: 13vw 11vw 14vw; flex-direction: row; justify-content: flex-start; align-items: center; background-position: 81% 100%; background-size: contain; background-repeat: no-repeat; text-align: left; }
.hero-solutions { background-image: url("assets/MTA_bgsolutions-1x.jpg"); }
.hero-technologies { background-image: url("assets/MTA_bgtechnology-1x.jpg"); }
.hero-portfolio { background-image: url("assets/MTA_bgPortfolio-1x.jpg"); }
.intro-pages-text-block { position: relative; z-index: 1; flex: 0 1 auto; }
.intro-resaltados { color: var(--medium-slate-blue); }

.apartado-pages { display: flex; padding: 9vmin 6vmin; flex-direction: column; justify-content: center; align-items: center; background-color: #f7f7f7; text-align: left; }
.apartado-pages.soluciones { padding-top: 11vmin; padding-right: 11vw; padding-left: 11vw; background-color: #fff; }
.apartado-pages.portfolio { padding-top: 11vmin; padding-right: 11vw; padding-left: 11vw; background-color: transparent; }
.fila-servicios { display: flex; margin-bottom: 4vmin; padding-bottom: 6vmin; flex-flow: row; justify-content: center; align-items: flex-start; align-self: stretch; }
.bloque-servicio { display: block; margin-right: 2vw; align-self: stretch; flex: 0 1 auto; }
.bloque-servicio.derecha { margin-right: 0; margin-left: 2vw; }
.bloque-servicio.imagen { overflow: visible; width: 36vw; height: 36vw; margin-right: 0; align-self: auto; flex: 0 0 auto; }
.servicios-bloque-texto { display: flex; width: 30vw; max-width: 800px; min-width: 400px; padding-right: 2vw; flex-direction: column; align-items: flex-start; align-self: stretch; }
.servicios-bloque-texto.textos-legales { margin-top: 8.5vmin; }
.servicio-iconos-div { width: 3vw; height: 3vw; margin-bottom: 1vmax; }
.servicios-iconos { align-self: flex-start; }
.servicios-titulo { margin: 0.5vw 0; font-family: Inter, sans-serif; color: var(--medium-slate-blue); font-size: 0.9vmax; line-height: 1.2; font-weight: 500; letter-spacing: 0.07rem; text-transform: uppercase; }
.servicios-subtitulo { display: block; margin: 0 0 1.5rem; font-family: Graph, sans-serif; color: var(--gris-texto); font-size: clamp(1.6rem, 1.8vw, 6rem); line-height: 1.25; font-weight: 400; letter-spacing: -0.01em; }
.servicios-descripcion { margin-bottom: 0.25vw; font-family: Inter, sans-serif; color: rgba(82, 82, 82, 0.8); font-size: clamp(1rem, 1vw, 6rem); line-height: 1.65; font-weight: 300; letter-spacing: 0.025em; }
.servicios-descripcion.textos-legales { width: 60vw; max-width: 70ch; }
.etiquetas { display: flex; margin: 0 0.5vw 0 0; font-family: Inter, sans-serif; font-size: 1vmax; line-height: 1.6; font-weight: 500; letter-spacing: 0.01em; }
.portfolio-cliente { display: flex; margin: 0; }
.portfolio-img-desktop { display: block; max-width: 36vw; }
.portfolio-img-desktop-div { overflow: hidden; width: 100%; height: 100%; }
.portfolio-imagenes-mobile-div { display: none; }
.apartado-pages .bloque-botones { margin-top: 1.5rem; }

@media screen and (max-width: 991px) {
  .hero-solutions, .hero-technologies, .hero-portfolio { margin-top: 9.5vmin; padding-top: 18vmin; padding-bottom: 18vmin; background-position: 75% 100%; }
  .intro-pages-text-block { width: 42vmin; }
  .apartado-pages { padding-right: 5vmin; padding-left: 5vmin; }
  .apartado-pages.soluciones { padding-right: 9vw; padding-left: 11vw; }
  .servicios-subtitulo { margin-bottom: 1.8vw; font-size: 2.2807vw; }
  .servicios-titulo, h2.servicios-titulo { margin-top: 0; font-size: 1.13906vw; }
  .servicios-descripcion { font-size: 1.4175vw; line-height: 1.5; }
  .servicios-descripcion.textos-legales { width: auto; }
  .bloque-servicio { margin-right: 2.5vw; align-self: flex-start; }
  .servicios-bloque-texto { width: 36vw; min-width: 290px; padding-right: 0; }
  .servicios-bloque-texto.textos-legales { margin-top: 4vmin; }
  .etiquetas { font-size: 1.4175vw; }
}
@media screen and (max-width: 767px) {
  .hero-solutions, .hero-technologies, .hero-portfolio { margin-top: 7vw; padding: 7vw 9vw 20vw 13vw; }
  .apartado-pages.soluciones { padding: 7vw 9vw 4vw 13vw; }
  .apartado-pages.portfolio { padding: 7vw 13vw 4vw; }
  .servicios-titulo, h2.servicios-titulo { font-size: 1.5vw; }
  .servicios-descripcion.textos-legales { max-width: none; }
  .bloque-servicio { margin-right: 0; }
  .bloque-servicio.derecha { margin-left: 0; }
  .bloque-servicio.imagen { width: 24vw; height: 36vw; }
  .fila-servicios { margin-bottom: 0; padding-bottom: 0; flex-direction: column; }
  .fila-servicios.portfolio { margin-bottom: 2rem; flex-direction: row; }
  .servicios-bloque-texto { width: auto; max-width: none; min-width: auto; margin-bottom: 2rem; padding-right: 5vw; }
  .servicio-iconos-div { width: 5vw; height: 5vw; }
  .portfolio-img-desktop-div { display: flex; justify-content: center; align-items: center; }
}
@media screen and (max-width: 479px) {
  .hero-solutions, .hero-technologies, .hero-portfolio { height: 85vh; margin: 13vw 0 0; padding: 8vw 9vw 16vw; flex-direction: column; justify-content: flex-start; align-items: flex-start; background-position: 100% 70%; }
  .hero-solutions { background-image: url("assets/MTA_bgSolutions_mobile-2x.jpg"); }
  .hero-technologies { background-image: url("assets/MTA_bgTechnology_mobile-2x.jpg"); }
  .hero-portfolio { background-image: url("assets/MTA_bgPortfolio_mobile-1x.jpg"); }
  .intro-pages-text-block { display: flex; width: auto; margin-right: -2vw; margin-bottom: 35vh; flex-direction: column; align-items: flex-start; }
  .intro-pages-text-block.portfolio { margin-right: -4vw; margin-bottom: 32vh; }
  .botones.mobile { display: block; border-width: 0.17em; }
  .apartado-pages { display: block; width: 100vw; padding: 8vw 8vw 0; }
  .apartado-pages.soluciones, .apartado-pages.portfolio { padding: 9vw 9vw 0; }
  .servicios-subtitulo { margin-bottom: 4.5vw; font-size: 7vw; line-height: 1.15; letter-spacing: -0.04rem; }
  .servicios-titulo, h2.servicios-titulo { margin: 0 0 1.5vw; font-size: 3.5vw; }
  .servicios-descripcion { margin-bottom: 1.5vw; font-size: 3.95vw; letter-spacing: 0.02rem; }
  .bloque-servicio { width: 100%; margin: 0; }
  .bloque-servicio.imagen { display: none; }
  .fila-servicios, .fila-servicios.portfolio { margin-bottom: 0; padding-bottom: 0; flex-direction: column; }
  .servicios-bloque-texto { margin-bottom: 3rem; padding-right: 0; }
  .servicios-bloque-texto.textos-legales { margin-top: 13vw; }
  .servicio-iconos-div { width: 9vw; height: 9vw; margin-bottom: 4vw; }
  .servicios-iconos { width: 9vw; height: 9vw; }
  .etiquetas { font-size: 3.4vw; line-height: 1.4; }
  .portfolio-cliente { margin-top: 0.5rem; }
  .portfolio-img-desktop { width: auto; height: 110%; max-width: none; object-fit: cover; }
  .portfolio-imagenes-mobile-div { display: flex; overflow: hidden; width: 82vw; height: 130vw; margin-bottom: 3vw; justify-content: center; align-items: center; }
}