/* ==========================================================================
   AGS PROYECTOS — Hoja de estilos principal
   --------------------------------------------------------------------------
   GUÍA RÁPIDA DE EDICIÓN
   - Los colores, tipografías y espaciados generales están definidos como
     variables aquí arriba, en :root. Cambia un valor y se actualiza en
     toda la web.
   - Cada sección del archivo está señalada con un comentario en MAYÚSCULAS.
   ========================================================================== */

:root {
  /* Colores */
  --color-bg: #ffffff;
  --color-bg-soft: #f5f6fb;
  --color-dark: #0b0d17;
  --color-dark-soft: #14172a;
  --color-text: #0b0d17;
  --color-text-muted: #6b6f85;
  --color-line: #e3e4ec;
  --color-accent: #0b0d17;
  --color-on-dark: #f5f6fb;
  --color-on-dark-muted: #9a9db3;

  /* Tipografía */
  --font-display: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Open Sans", "Helvetica Neue", Arial, sans-serif;

  /* Layout */
  --header-h: 88px;
  --container-pad: clamp(20px, 4vw, 64px);
  --radius-pill: 999px;
  --ease: cubic-bezier(.16,1,.3,1);
}

/* ==========================================================================
   RESET BÁSICO
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; margin: 0; line-height: 1.05; }
p { margin: 0; line-height: 1.65; color: var(--color-text-muted); }
button { font-family: inherit; cursor: pointer; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ==========================================================================
   LÍNEAS DE REJILLA DECORATIVAS (efecto visto en la web de referencia)
   ========================================================================== */
.grid-lines {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  pointer-events: none;
  z-index: 2;
}
.grid-lines::before,
.grid-lines::after { content: ""; }
.grid-lines span {
  border-left: 1px solid rgba(255,255,255,.25);
  height: 100%;
}
.grid-lines span:first-child { border-left: none; }

/* ==========================================================================
   BOTONES
   ========================================================================== */
.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 30px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  transition: background var(--ease) .35s, color var(--ease) .35s, transform var(--ease) .35s;
  white-space: nowrap;
}
.btn-pill:hover { transform: translateY(-2px); }

.btn-pill--dark {
  background: var(--color-dark);
  border-color: var(--color-dark);
  color: #fff;
}
.btn-pill--dark:hover { background: #000; }

.btn-pill--light {
  background: transparent;
  border-color: rgba(255,255,255,.5);
  color: #fff;
}
.btn-pill--light:hover { background: rgba(255,255,255,.12); }

.btn-circle {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: background var(--ease) .35s, transform var(--ease) .35s;
}
.btn-circle:hover { background: rgba(255,255,255,.15); transform: scale(1.06); }
.btn-circle svg { width: 20px; height: 20px; }

/* ==========================================================================
   CONTENEDOR
   ========================================================================== */
.container {
  width: 100%;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

/* ==========================================================================
   CABECERA / NAVEGACIÓN (fija arriba, como en la web de referencia)
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  padding: 0 var(--container-pad);
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.site-header.is-scrolled {
  border-bottom-color: var(--color-line);
}
.site-header__logo {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.site-header__nav {
  display: flex;
  align-items: center;
  gap: 40px;
}
.site-header__nav a {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  position: relative;
  padding-bottom: 4px;
}
.site-header__nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transition: right .3s var(--ease);
}
.site-header__nav a:hover::after,
.site-header__nav a.is-active::after { right: 0; }

.site-header__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 8px;
}
.site-header__toggle span {
  width: 22px;
  height: 1.5px;
  background: var(--color-dark);
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}

/* Menú móvil */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--color-dark);
  z-index: 99;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 var(--container-pad);
  transform: translateY(-100%);
  transition: transform .5s var(--ease);
}
.mobile-menu.is-open { transform: translateY(0); }
.mobile-menu a {
  display: block;
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 600;
  color: #fff;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,.12);
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  color: #fff;
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-size: cover;
  background-position: center;
  transform: scale(1.08);
  transition: transform 1.4s var(--ease);
}
.hero.is-loaded .hero__bg { transform: scale(1); }
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,13,23,.55) 0%, rgba(11,13,23,.15) 32%, rgba(11,13,23,.05) 55%, rgba(11,13,23,.75) 100%);
}
.hero__content {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: calc(var(--header-h) + 40px) var(--container-pad) 60px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.hero__eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: .85;
}
.hero__title {
  font-size: clamp(48px, 8vw, 96px);
  letter-spacing: -.02em;
}
.hero__actions { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.hero__scroll {
  position: absolute;
  right: var(--container-pad);
  bottom: 130px;
  z-index: 3;
}
.hero__footer-bar {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* Menos aire a la izquierda: el texto se acerca al borde de la foto */
  padding: 26px var(--container-pad) 26px calc(var(--container-pad) / 2.5);
  background: #fff;
  color: var(--color-text);
}
.hero__footer-bar .eyebrow { display: block; margin-bottom: 8px; }
.hero__footer-bar h4 { font-size: 20px; }
.hero__vertical-label {
  position: absolute;
  left: 18px;
  bottom: 40px;
  z-index: 3;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
}

/* Hero simple (páginas internas) */
.page-hero {
  position: relative;
  min-height: 62vh;
  display: flex;
  align-items: flex-end;
  color: #fff;
  overflow: hidden;
}
.page-hero__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  /* Cuando el fondo es un <video>, necesita medidas y recorte propios */
  width: 100%; height: 100%; object-fit: cover;
}
.page-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,13,23,.45), rgba(11,13,23,.75));
}
.page-hero__content {
  position: relative; z-index: 2;
  padding: calc(var(--header-h) + 60px) var(--container-pad) 70px;
}
.page-hero__title { font-size: clamp(40px, 6vw, 72px); }

/* ==========================================================================
   SECCIONES GENERALES
   ========================================================================== */
.section { padding: 120px 0; position: relative; }
.section--tight { padding: 80px 0; }
.section--dark { background: var(--color-dark); color: var(--color-on-dark); }
.section--dark p { color: var(--color-on-dark-muted); }
.section--soft { background: var(--color-bg-soft); }

.section__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 64px;
  flex-wrap: wrap;
}
.section__head h2 { font-size: clamp(32px, 4vw, 52px); margin-top: 10px; }

/* ==========================================================================
   SERVICIOS
   ========================================================================== */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--color-line);
}
.service-card {
  padding: 48px 40px;
  border-left: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  transition: background .35s var(--ease);
}
.service-card:first-child { border-left: none; }
.service-card:hover { background: var(--color-bg-soft); }
.service-card__icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--color-bg-soft);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 28px;
}
.service-card__icon svg { width: 24px; height: 24px; }
.service-card h3 { font-size: 22px; margin-bottom: 14px; }
.service-card p { margin-bottom: 22px; }
.service-card a { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; border-bottom: 1px solid currentColor; padding-bottom: 3px; }

/* ==========================================================================
   VÍDEO / IMAGEN A PANTALLA COMPLETA
   ========================================================================== */
.fullbleed-media {
  position: relative;
  height: 78vh;
  min-height: 480px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fullbleed-media::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(11,13,23,.28);
}
.fullbleed-media__play {
  position: relative;
  z-index: 2;
}

/* ==========================================================================
   BANNER OSCURO CON CATEGORÍAS
   ========================================================================== */
.dark-banner {
  position: relative;
  min-height: 70vh;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #fff;
}
.dark-banner::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,13,23,.35), rgba(11,13,23,.9));
}
.dark-banner__content { position: relative; z-index: 2; padding: 80px var(--container-pad) 0; }
.dark-banner__title {
  /* Más ancho y algo menor: entra en dos líneas en pantalla grande */
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: 1.28;
  margin-top: 12px;
  max-width: 1100px;
  color: #fff;
}
.dark-banner__tabs {
  position: relative; z-index: 2;
  display: flex;
  border-top: 1px solid rgba(255,255,255,.18);
  margin-top: 60px;
}
.dark-banner__tabs a, .dark-banner__tabs span, .dark-banner__tabs button {
  flex: 1;
  padding: 26px var(--container-pad);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  background: transparent;
  border: none;
  border-right: 1px solid rgba(255,255,255,.18);
  text-align: center;
  transition: background .3s var(--ease);
}
.dark-banner__tabs a:last-child,
.dark-banner__tabs span:last-child,
.dark-banner__tabs button:last-child { border-right: none; }
.dark-banner__tabs a:hover,
.dark-banner__tabs button:hover,
.dark-banner__tabs button.is-active { background: rgba(255,255,255,.08); }

/* ==========================================================================
   PROYECTOS — GRID
   ========================================================================== */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--color-line);
}
.project-card {
  position: relative;
  background: var(--color-dark);
  aspect-ratio: 3/4;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #fff;
}
.project-card--tall { aspect-ratio: 3/4.6; }
.project-card__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform .8s var(--ease);
}
.project-card:hover .project-card__bg { transform: scale(1.08); }
.project-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,13,23,.55) 0%, rgba(11,13,23,.05) 30%, rgba(11,13,23,.1) 55%, rgba(11,13,23,.85) 100%);
}
.project-card__top, .project-card__bottom {
  position: relative; z-index: 2;
  padding: 28px;
}
.project-card__top .eyebrow { color: rgba(255,255,255,.75); }
.project-card__top h3 { font-size: 24px; margin-top: 8px; }
.project-card__bottom { display: flex; justify-content: space-between; align-items: center; }
.project-card__bottom span { font-size: 12px; letter-spacing: .1em; color: rgba(255,255,255,.75); }

/* ==========================================================================
   TESTIMONIOS
   ========================================================================== */
.testimonial-slider {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  min-height: 520px;
}
.testimonial-slide { display: none; }
.testimonial-slide.is-active { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; }
.testimonial-slider__track { display: grid; grid-template-columns: 1fr 1.4fr; }
.testimonial-image {
  position: relative;
  background-size: cover;
  background-position: center;
}
.testimonial-nav {
  position: absolute;
  left: 24px;
  top: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 30px 0;
  z-index: 2;
}
.testimonial-nav button {
  writing-mode: vertical-rl;
  background: none;
  border: none;
  color: rgba(255,255,255,.8);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.testimonial-nav button:hover { color: #fff; }
.testimonial-body {
  padding: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}
.testimonial-body h3 { font-size: clamp(30px, 4vw, 48px); }
.testimonial-body .eyebrow { color: var(--color-on-dark-muted); }

/* ==========================================================================
   EQUIPO
   ========================================================================== */
.team-card {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}
.team-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,13,23,0) 40%, rgba(11,13,23,.85) 100%);
}
.team-card__content {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 28px;
  color: #fff;
}
.team-card__content h3 { font-size: 24px; margin-bottom: 12px; }
.team-card__social { display: flex; gap: 10px; margin-top: 16px; }
.team-card__social a {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center;
  transition: background .3s var(--ease);
}
.team-card__social a:hover { background: #fff; color: var(--color-dark); }
.team-card__social svg { width: 15px; height: 15px; }

/* ==========================================================================
   BLOG
   ========================================================================== */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}
.blog-card__image {
  aspect-ratio: 16/10;
  background-size: cover;
  background-position: center;
  margin-bottom: 24px;
  overflow: hidden;
}
.blog-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.blog-card:hover .blog-card__image img { transform: scale(1.06); }
.blog-card h3 { font-size: 24px; margin-bottom: 12px; }
.blog-card p { margin-bottom: 18px; }
.blog-card__meta { display: flex; justify-content: space-between; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-muted); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  background: var(--color-dark);
  color: var(--color-on-dark);
  padding: 100px 0 30px;
}
.site-footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 70px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.site-footer__logo { font-family: var(--font-display); font-size: 40px; font-weight: 700; margin-bottom: 22px; }
.site-footer h5 { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--color-on-dark-muted); margin-bottom: 24px; }
.site-footer__top a, .site-footer__top li { display: block; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.site-footer__bottom { display: flex; justify-content: space-between; padding-top: 28px; font-size: 12px; color: var(--color-on-dark-muted); flex-wrap: wrap; gap: 12px; }

/* ==========================================================================
   FORMULARIO DE CONTACTO
   ========================================================================== */
.contact-form { display: grid; gap: 22px; max-width: 640px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.form-field { display: flex; flex-direction: column; gap: 8px; }
.form-field label { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-muted); }
.form-field input, .form-field textarea {
  border: none;
  border-bottom: 1px solid var(--color-line);
  padding: 12px 2px;
  font-family: var(--font-body);
  font-size: 16px;
  background: transparent;
  color: var(--color-text);
}
.form-field input:focus, .form-field textarea:focus { outline: none; border-color: var(--color-dark); }
.contact-info-list { display: grid; gap: 26px; margin-top: 8px; }
.contact-info-list div span:first-child { display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 6px; }
.contact-info-list div span:last-child { font-size: 18px; }

/* ==========================================================================
   SCROLL REVEAL — animación al aparecer (usa IntersectionObserver, ver js/main.js)
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
[data-reveal="fade"] { transform: none; }
[data-reveal-delay="1"] { transition-delay: .1s; }
[data-reveal-delay="2"] { transition-delay: .2s; }
[data-reveal-delay="3"] { transition-delay: .3s; }

/* ==========================================================================
   MISC
   ========================================================================== */
.divider { height: 1px; background: var(--color-line); }
.text-center { text-align: center; }
.mono-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 980px) {
  .services-grid, .projects-grid { grid-template-columns: repeat(2, 1fr); }
  .service-card:nth-child(2) { border-left: 1px solid var(--color-line); }
  .site-footer__top { grid-template-columns: 1fr; gap: 50px; }
  .testimonial-slider__track { grid-template-columns: 1fr; }
  .testimonial-image { min-height: 360px; }
  .blog-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  :root { --header-h: 72px; }
  .site-header__nav { display: none; }
  .site-header__toggle { display: flex; }
  .services-grid, .projects-grid { grid-template-columns: 1fr; }
  .service-card { border-left: none !important; }
  .dark-banner__tabs { flex-direction: column; }
  .dark-banner__tabs a, .dark-banner__tabs span, .dark-banner__tabs button { border-right: none; border-bottom: 1px solid rgba(255,255,255,.18); }
  .form-row { grid-template-columns: 1fr; }
  .hero__footer-bar { flex-direction: column; align-items: flex-start; gap: 16px; }
  .hero__scroll { display: none; }
}

/* ==========================================================================
   EFECTOS DE ENTRADA Y PARALLAX
   1) .mask     — titulares que suben desde detrás de una máscara
   2) [data-stagger] — hijos que entran escalonados
   3) .pbg      — fondo con parallax al hacer scroll
   ========================================================================== */

/* --- 1) Titulares enmascarados ------------------------------------------ */
.mask { display: block; overflow: hidden; }
.mask > span {
  display: block;
  transform: translateY(110%) skewY(6deg);
  opacity: 0;
  transition: transform 1s var(--ease), opacity 1s var(--ease);
}
.is-visible .mask > span,
.hero.is-loaded .mask > span { transform: none; opacity: 1; }

/* Cada línea entra un poco después que la anterior */
.mask:nth-of-type(2) > span { transition-delay: .12s; }
.mask:nth-of-type(3) > span { transition-delay: .24s; }

/* Contenedor que sólo sirve de disparador: no se anima él mismo */
[data-mask] { opacity: 1; transform: none; }
[data-mask] .eyebrow {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
[data-mask].is-visible .eyebrow { opacity: 1; transform: none; }

/* --- 2) Entrada escalonada de tarjetas ---------------------------------- */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(80px) skewY(4deg);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
[data-stagger].is-visible > * { opacity: 1; transform: none; }
[data-stagger].is-visible > *:nth-child(2) { transition-delay: .12s; }
[data-stagger].is-visible > *:nth-child(3) { transition-delay: .24s; }
[data-stagger].is-visible > *:nth-child(4) { transition-delay: .36s; }

/* Variante más marcada para tarjetas de proyecto y de blog */
[data-stagger="cards"] > * {
  transform: translateY(14vh) scale(.92) skewY(3deg);
  transition-duration: 1.1s;
}

/* --- 3) Parallax de fondos ---------------------------------------------- */
[data-parallax] { overflow: hidden; }
.pbg {
  position: absolute;
  inset: -14% 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  transform: translateY(var(--py, 0px));
  will-change: transform;
}
/* Las capas de oscurecimiento deben quedar por encima del fondo */
.fullbleed-media::after,
.dark-banner::before { z-index: 1; }

/* Respeta a quien pida menos movimiento en su sistema */
@media (prefers-reduced-motion: reduce) {
  .mask > span,
  [data-stagger] > *,
  [data-mask] .eyebrow { transition: opacity .4s linear; transform: none; }
  .pbg { transform: none !important; }
}

/* ==========================================================================
   CORTINILLA DE CARGA
   Tres franjas oscuras que suben al abrir la página. Es CSS puro (sin JS)
   para que no haya parpadeo si el navegador tarda en ejecutar el script.
   ========================================================================== */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  pointer-events: none;
}
.preloader__stripe {
  flex: 1;
  background: #0b0d17;
  transform: translateY(0);
  animation: stripe-up .9s var(--ease) forwards;
}
.preloader__stripe:nth-child(2) { animation-delay: .08s; }
.preloader__stripe:nth-child(3) { animation-delay: .16s; }
@keyframes stripe-up {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-101%); }
}

/* ==========================================================================
   HOVERS DE TARJETAS
   El botón redondo y el círculo los inserta js/main.js, así funcionan en
   todas las páginas sin tocar el HTML de cada una.
   ========================================================================== */

/* --- Botón "Ver" que aparece sobre las tarjetas ------------------------- */
.card-view {
  position: absolute;
  top: 50%; left: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 96px; height: 96px;
  border-radius: 50%;
  background: #fff;
  color: var(--color-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: 0;
  transform: translate(-50%, -50%) translateY(48px) scale(.8) skewY(12deg);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  pointer-events: none;
}
.project-card:hover .card-view,
.blog-card:hover .card-view {
  opacity: 1;
  transform: translate(-50%, -50%) translateY(0) scale(1) skewY(0deg);
}
.blog-card__image { position: relative; }

/* Oscurece un poco más la foto al pasar por encima */
.project-card::after { transition: background .5s var(--ease); }
.project-card:hover::after { background: rgba(11,13,23,.55); }

/* --- Círculo que crece en las tarjetas de servicio ---------------------- */
.service-card { position: relative; overflow: hidden; }
.service-card::before {
  content: "";
  position: absolute;
  left: -10%; bottom: -60%;
  width: 120%; aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-bg-soft);
  transform: scale(0);
  transition: transform .7s var(--ease);
  z-index: 0;
}
.service-card:hover::before { transform: scale(1); }
.service-card > * { position: relative; z-index: 1; }
/* El fondo lo pinta ahora el círculo, no el bloque entero */
.service-card:hover { background: transparent; }

/* --- Enlaces del menú: pastilla que crece desde el centro --------------- */
.site-header__nav a { position: relative; }
.site-header__nav a::before {
  content: "";
  position: absolute;
  inset: -8px -14px;
  border-radius: 999px;
  background: currentColor;
  opacity: .1;
  transform: scale(0);
  transition: transform .45s var(--ease);
  z-index: -1;
}
.site-header__nav a:hover::before { transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  .preloader { display: none; }
  .card-view { transition: opacity .3s linear; transform: translate(-50%, -50%); }
  .project-card:hover .card-view,
  .blog-card:hover .card-view { transform: translate(-50%, -50%); }
  .service-card::before { display: none; }
}

/* ==========================================================================
   SELECTOR DE IDIOMA (cabecera)
   ========================================================================== */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 22px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
}
.lang-switch span { opacity: .35; }
.lang-switch button {
  background: none;
  border: 0;
  padding: 4px 2px;
  cursor: pointer;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  opacity: .45;
  transition: opacity .3s var(--ease);
}
.lang-switch button:hover { opacity: .8; }
.lang-switch button.is-active { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }

/* En móvil el menú se colapsa, pero el idioma sigue accesible */
@media (max-width: 900px) {
  .lang-switch { margin-left: auto; margin-right: 14px; }
}

/* Enlace de respaldo bajo el botón del formulario */
.form-fallback {
  margin-top: 16px;
  font-size: 14px;
  opacity: .7;
}
.form-fallback a { text-decoration: underline; text-underline-offset: 3px; }

/* Mensaje de confirmación tras enviar el formulario */
.form-exito {
  padding: 28px 0;
  font-size: 20px;
  font-weight: 600;
}

/* La sección "Sobre AGS." va entre dos bloques de peso muy distinto:
   se le quita aire arriba para que quede centrada ópticamente. */
.section--sobre { padding-top: 6px; padding-bottom: 114px; }
@media (max-width: 700px) {
  .section--sobre { padding-top: 12px; padding-bottom: 72px; }
}

/* Los proyectos arrancan pegados a la banda de enlaces del banner */
.section--proyectos { padding-top: 0; }

/* Equipo arranca más cerca de las tarjetas de proyecto */
.section--equipo { padding-top: 25px; }
@media (max-width: 700px) { .section--equipo { padding-top: 28px; } }

/* ==========================================================================
   PÁGINA DE EQUIPO — dos columnas: la persona y los colaboradores
   ========================================================================== */
.team-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
}
.team-col { border-top: 1px solid var(--color-line); padding-top: 30px; }
.team-col h2 { margin-top: 14px; font-size: clamp(30px, 3.4vw, 42px); }
.team-col p { margin-top: 22px; font-size: 17px; max-width: 44ch; }
.team-col__cta { margin-top: 30px; }

/* Listado de colaboradores: una línea por nombre, separadas por filete */
.collab-list { margin-top: 26px; }
.collab-list > div {
  padding: 20px 0;
  border-bottom: 1px solid var(--color-line);
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 600;
  line-height: 1.2;
}
.collab-list > div:first-child { border-top: 1px solid var(--color-line); }

@media (max-width: 900px) {
  .team-grid { grid-template-columns: 1fr; gap: 54px; }
}

/* Colaborador: nombre a la izquierda, iconos a la derecha */
.collab-list > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.collab-links { display: flex; gap: 10px; flex-shrink: 0; }
.collab-links a {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  color: var(--color-text);
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.collab-links a:hover { background: var(--color-text); border-color: var(--color-text); color: #fff; }
.collab-links svg { width: 18px; height: 18px; }

/* Enlaces con icono dentro de los datos de contacto */
.icon-links { display: flex; gap: 10px; }
.icon-links a {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  color: var(--color-text);
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.icon-links a:hover { background: var(--color-text); border-color: var(--color-text); color: #fff; }
.icon-links svg { width: 17px; height: 17px; }

/* Cierre de las fichas de proyecto: la banda oscura arranca 25 px más abajo
   (120 → 95) y el contenido queda centrado dentro de ella repartiendo el
   mismo aire arriba y abajo, sin cambiar la altura total del bloque. */
.section--cta { padding-top: 125px; padding-bottom: 90px; }

/* ==========================================================================
   PÁGINAS LEGALES (aviso legal, política de privacidad)
   ========================================================================== */
.legal { max-width: 760px; }
.legal__intro { font-size: 18px; padding-bottom: 28px; border-bottom: 1px solid var(--color-line); }
.legal h2 {
  margin-top: 46px;
  font-size: 20px;
  letter-spacing: -.01em;
}
.legal h2 + p, .legal h2 + ul { margin-top: 14px; }
.legal p + p { margin-top: 14px; }
.legal ul { margin-top: 14px; padding-left: 0; list-style: none; }
.legal li {
  padding: 10px 0;
  border-bottom: 1px solid var(--color-line);
  color: var(--color-text-muted);
}
.legal li strong { color: var(--color-text); font-weight: 600; }
.legal a { text-decoration: underline; text-underline-offset: 3px; }
.legal code {
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--color-bg-soft);
  font-size: .9em;
}

/* Casilla de consentimiento del formulario */
.form-consent { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--color-text-muted); }
.form-consent input { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; accent-color: var(--color-text); }
.form-consent a { text-decoration: underline; text-underline-offset: 3px; }

/* Enlaces legales del pie */
.footer-legal { display: flex; gap: 20px; }
.footer-legal a { color: var(--color-on-dark-muted); transition: color .3s var(--ease); }
.footer-legal a:hover { color: #fff; }