/* AGI Design Studio · Web EN
   Tokens según Manual de Marca v1.3 — cinco colores, Raleway + Poppins.

   SISTEMA DE DIAGRAMACIÓN
   1. Retícula de 12 columnas con un solo medianil (--gap). Cualquier rejilla de
      2 o 3 columnas iguales con ese mismo medianil cae exactamente sobre la de 12.
   2. Eje: la columna 7. Todo texto o imagen del lado derecho arranca ahí.
   3. Escala tipográfica modular: 1,2 en móvil → 1,25 en escritorio (--t0…--t8).
   4. Espaciado en múltiplos de 8 px (--s1…--s8).
   Para ver la retícula: tecla G, o añadir ?grid a la URL. */

:root {
  /* Color (§3) */
  --teal: #3A656E;
  --carbon: #585858;
  --gris: #F2F2F2;
  --blanco: #FFFFFF;
  --negro: #000000;                    /* solo logotipo */
  --teal-9: rgba(58, 101, 110, .09);   /* formas de acento sobre claro (§3.2) */

  /* Tipografía (§4) */
  --f-head: "Raleway", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Poppins", "Helvetica Neue", Arial, sans-serif;

  /* Escala modular 1,2 → 1,25 (360 → 1280 px) */
  --tm1: .8125rem;                                         /* 13 */
  --t0: 1rem;                                              /* 16 */
  --t1: clamp(1.200rem, 1.180rem + 0.087vw, 1.250rem);     /* 19→20 */
  --t2: clamp(1.440rem, 1.392rem + 0.213vw, 1.562rem);     /* 23→25 */
  --t3: clamp(1.728rem, 1.640rem + 0.392vw, 1.953rem);     /* 28→31 */
  --t4: clamp(2.074rem, 1.930rem + 0.640vw, 2.441rem);     /* 33→39 */
  --t5: clamp(2.488rem, 2.268rem + 0.980vw, 3.052rem);     /* 40→49 */
  --t6: clamp(2.986rem, 2.662rem + 1.441vw, 3.815rem);     /* 48→61 */
  --t7: clamp(3.583rem, 3.119rem + 2.061vw, 4.768rem);     /* 57→76 */
  --t8: clamp(4.300rem, 3.650rem + 2.888vw, 5.960rem);     /* 69→95 */

  /* Espaciado, base 8 */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px;
  --section: clamp(var(--s6), 8vw, var(--s8));

  /* Retícula */
  --wrap: 1200px;
  --margin: clamp(16px, 4vw, 48px);
  --gap: clamp(16px, 2.2vw, 32px);
  --header-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--s2)); }
body {
  margin: 0;
  background: var(--blanco);
  color: var(--carbon);
  font-family: var(--f-body);
  font-size: var(--t0);
  line-height: 1.6;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
figure { margin: 0; }
[hidden] { display: none !important; }

/* Texto justificado solo en pantallas anchas, con partición silábica (opción B).
   En móvil vuelve a la izquierda. Requiere Manual de Marca v1.4. */
@media (min-width: 701px) {
  .prose p:not(.caption, .note, .time, .stat, .hero-word, .center, .sub),
  .legal p {
    text-align: justify;
    text-align-last: left;
    -webkit-hyphens: auto;
    hyphens: auto;
    hyphenate-limit-chars: 7 3 3;
  }
}

/* ---------- Retícula ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--margin); }
.g12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--s4); }
.col-full { grid-column: 1 / -1; }
.col-a    { grid-column: 1 / 6; }    /* bloque izquierdo: 5 columnas */
.col-b    { grid-column: 7 / 13; }   /* eje: desde la columna 7 */
.col-l    { grid-column: 1 / 7; }    /* mitad izquierda */
.col-wide { grid-column: 1 / 10; }
.col-end  { grid-column: 10 / 13; }
.cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3) var(--gap); }
.cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3) var(--gap); }
.self-end { align-self: end; }
.self-center { align-self: center; }
.stack { display: flex; flex-direction: column; justify-content: space-between; gap: var(--s4); }
@media (max-width: 700px) {
  .g12 > * { grid-column: 1 / -1; }
  .cols-2, .cols-3 { grid-template-columns: 1fr; }
}

.section { padding: var(--section) 0; }
.bg-gris { background: var(--gris); }
.bg-textura { background: var(--gris) url("../img/textura-sombra.webp") center / cover no-repeat; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.skip { position: absolute; left: -999px; top: 8px; background: var(--teal); color: var(--blanco); padding: 8px 14px; z-index: 100; }
.skip:focus { left: 8px; }

/* ---------- Tipografía ---------- */
.tagline {
  font-family: var(--f-head); font-weight: 300; color: var(--teal);
  font-size: var(--t8); line-height: 1.02; letter-spacing: .02em;
  margin: 0;
}
.h1 {
  font-family: var(--f-head); font-weight: 300;
  text-transform: uppercase; letter-spacing: .1em;
  font-size: var(--t4); line-height: 1.2; margin: 0;
}
.h2 {
  font-family: var(--f-head); font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  font-size: var(--t3); line-height: 1.2; margin: 0 0 var(--s4);
}
.h2.xl { font-size: var(--t5); letter-spacing: .04em; }
.h3 {
  font-family: var(--f-head); font-weight: 400;
  font-size: var(--t1); line-height: 1.3; margin: 0 0 var(--s1);
}
.h3.caps { text-transform: uppercase; letter-spacing: .08em; font-weight: 600; font-size: var(--t0); }
.h3.as-h2 { font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: var(--t3); line-height: 1.2; margin: 0; }
.lede { font-size: var(--t1); line-height: 1.6; }
.small { font-size: var(--tm1); line-height: 1.6; }
.note { font-weight: 300; font-size: var(--tm1); text-transform: uppercase; letter-spacing: .05em; line-height: 1.6; }
.caption { font-weight: 300; font-size: var(--tm1); letter-spacing: .02em; line-height: 1.5; margin-top: var(--s1); }
.center { text-align: center; }

.rule { border: 0; border-top: 1px solid var(--teal); margin: 0; }
.star { width: 14px; height: 14px; fill: currentColor; display: block; }

/* ---------- Botones y enlaces ---------- */
.btn {
  display: inline-block;
  font-family: var(--f-body); font-size: var(--tm1); font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  padding: var(--s2) var(--s4);
  background: var(--teal); color: var(--blanco); border: 1px solid var(--teal);
  transition: background .2s, color .2s;
}
.btn:hover, .btn:focus-visible { background: var(--blanco); color: var(--teal); }
.link { font-size: var(--tm1); letter-spacing: .1em; text-transform: uppercase; text-underline-offset: 5px; }

/* ---------- Espacios de imagen ---------- */
.media { position: relative; background: #dcdcdc; overflow: hidden; }
.media::before {
  content: attr(data-slot);
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--f-head); font-weight: 600; letter-spacing: .1em; color: var(--carbon); font-size: var(--t1);
}
.media img { position: relative; width: 100%; height: 100%; object-fit: cover; }
.media.cover { position: absolute; inset: 0; }
.media.fill { height: 100%; }
.r-4x3 { aspect-ratio: 4 / 3; }
.r-3x2 { aspect-ratio: 3 / 2; }
.r-16x9 { aspect-ratio: 16 / 9; }
.r-21x9 { aspect-ratio: 21 / 9; }
.r-4x5 { aspect-ratio: 4 / 5; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(242, 242, 242, .9);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--teal);
}
.site-header .wrap { min-height: var(--header-h); display: flex; align-items: center; gap: var(--s4); }
.brand img { width: 92px; }
.nav { flex: 1; }
.nav ul { display: flex; gap: var(--s3); list-style: none; margin: 0; padding: 0; }
.nav a {
  font-size: var(--tm1); letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; color: var(--carbon); padding: 6px 0; border-bottom: 1px solid transparent;
}
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--teal); color: var(--teal); }
.lang { margin: 0 0 0 auto; font-size: var(--tm1); letter-spacing: .1em; }
.lang [aria-current] { color: var(--teal); font-weight: 600; }
.lang .soon { opacity: .55; }
.site-header .btn { padding: 10px var(--s3); }
@media (max-width: 900px) {
  .site-header .wrap { flex-wrap: wrap; gap: 10px var(--s2); padding-top: 10px; padding-bottom: 10px; }
  .brand img { width: 72px; }
  .nav { order: 3; flex-basis: 100%; overflow-x: auto; }
  .site-header .btn { padding: 8px 12px; }
}

/* ---------- Hero ---------- */
.hero { position: relative; }
.hero-home { min-height: calc(92vh - var(--header-h)); display: flex; align-items: flex-end; padding: var(--section) 0 var(--s5); }
.hero-home .wrap { width: 100%; }
.hero-home .g12 { row-gap: var(--s5); }
.hero-home .btn { justify-self: end; align-self: end; }
.hero-home .end-star { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
@media (max-width: 700px) { .hero-home .btn { justify-self: start; } }

.hero-photo { min-height: min(78vh, 720px); display: flex; align-items: flex-end; color: var(--blanco); isolation: isolate; }
.hero-photo::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 45%, rgba(0,0,0,0) 70%);
}
.hero-photo .media.cover { z-index: -2; }
.hero-photo .wrap { padding-bottom: var(--s5); width: 100%; }
.hero-photo .g12 { align-items: end; }
.hero-word {
  font-family: var(--f-head); font-weight: 300; text-transform: uppercase;
  letter-spacing: .02em; font-size: min(var(--t8), 12vw); line-height: .9; margin: 0; color: var(--blanco);
}
.hero-photo .btn { justify-self: end; background: rgba(58,101,110,.92); border-color: transparent; }
.hero-photo .btn:hover { background: var(--blanco); color: var(--teal); }
@media (max-width: 700px) { .hero-photo .btn { justify-self: start; } }

/* ---------- Home: About ---------- */
.about-portrait .caption { text-transform: uppercase; letter-spacing: .25em; margin-top: var(--s2); }
.about-rows > div { padding: var(--s4) 0; border-top: 1px solid var(--teal); }
.about-rows > div:first-child { padding-top: var(--s3); }
.about-rows .h2, .about-rows .h3 {
  font-family: var(--f-head); font-size: var(--t0); font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em; margin: 0 0 var(--s2);
}
.about-rows blockquote { margin: 0; }

/* ---------- Home: Bifurcación ---------- */
.band-teal { background: var(--teal); color: var(--gris); }
.band-teal .h2, .band-teal .h3 { color: var(--gris); }
.path-card .media { aspect-ratio: 4 / 3; }
.path-card .over { position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; text-align: center; background: rgba(0,0,0,.28); }
.path-card .over .h3 { font-size: var(--t6); font-weight: 300; text-transform: uppercase; letter-spacing: .04em; color: var(--blanco); margin: 0; }
.path-card .sub { font-size: var(--tm1); margin: var(--s2) 0 var(--s3); }
.path-card .big { font-size: var(--t1); line-height: 1.55; color: var(--blanco); }
.path-card .link { color: var(--blanco); display: inline-block; margin-top: var(--s3); }

/* ---------- Special projects ---------- */
.special .h3 { font-weight: 600; text-transform: uppercase; font-size: var(--t5); line-height: 1.1; letter-spacing: .02em; margin-bottom: var(--s3); }

/* ---------- Why AGI ---------- */
.why .h2 { position: sticky; top: calc(var(--header-h) + var(--s4)); align-self: start; }
.why-list { list-style: none; margin: 0; padding: 0; }
.why-list li { padding: var(--s4); }
.why-list li:nth-child(odd) { background: var(--teal-9); }

/* ---------- Pasos numerados ---------- */
.steps { list-style: none; margin: 0; padding: 0; }
.steps > li { display: grid; grid-template-columns: var(--s7) 1fr; gap: var(--s2); background: var(--gris); padding: var(--s4) var(--s4) var(--s4) var(--s2); }
.bg-gris .steps > li { background: var(--blanco); }
.steps .num { font-family: var(--f-head); font-weight: 300; font-size: var(--t6); line-height: .85; color: var(--carbon); text-align: center; }
.steps .h3 { text-transform: uppercase; letter-spacing: .1em; font-weight: 600; font-size: var(--t0); margin-bottom: var(--s1); }
.steps .wide { grid-column: 1 / -1; }
.steps > li.optional { display: block; grid-column: 1 / -1; background: var(--teal-9); padding: var(--s3) var(--s4); font-size: var(--tm1); }

/* ---------- Track record ---------- */
.band-carbon { background: var(--carbon); color: var(--gris); }
.band-carbon .h3 { color: var(--blanco); font-weight: 600; font-size: var(--t2); margin-bottom: var(--s2); }
.stats { padding-block: var(--s6); }
.stat { font-family: var(--f-head); font-weight: 300; font-size: var(--t4); color: var(--blanco); margin-top: var(--s3); }

/* ---------- Planes ---------- */
.plans { margin: var(--s5) 0 var(--s4); }
.plan { border: 1px solid rgba(242,242,242,.55); padding: var(--s4) var(--s3); display: flex; flex-direction: column; gap: var(--s2); }
.plan .h3 { color: var(--blanco); margin: 0; }
.plan .name { display: block; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; font-size: var(--t0); }
.plan .price { display: block; font-weight: 300; font-size: var(--t4); line-height: 1.1; margin-top: var(--s1); }
.plan .desc { font-size: var(--tm1); line-height: 1.65; flex: 1; }
.plan .time { font-size: var(--tm1); text-transform: uppercase; letter-spacing: .08em; border-top: 1px solid rgba(242,242,242,.55); padding-top: var(--s2); margin: 0; }
.band-teal .btn { background: var(--gris); color: var(--teal); border-color: var(--gris); }
.band-teal .btn:hover { background: transparent; color: var(--gris); }

/* ---------- Galerías ---------- */
.gallery-side { display: grid; gap: var(--s3); }
.subgroup + .subgroup { margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--teal); }
.subgroup > .h3 { margin-bottom: var(--s3); }

/* ---------- Bandas sobre fotografía oscura ---------- */
.photo-band { position: relative; isolation: isolate; color: var(--gris); padding: var(--s8) 0; }
.photo-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(0,0,0,.58); }
.photo-band .media.cover { z-index: -2; }
.photo-band .h3.as-h2 { color: var(--gris); }
@media (min-width: 701px) { .photo-band .title { grid-row: 1; } }

/* ---------- FAQ ---------- */
.faq { row-gap: 0; }
.faq-item { padding: var(--s3) 0; border-top: 1px solid var(--teal); }
.faq-item .h3 { font-family: var(--f-body); font-weight: 600; font-size: var(--t0); margin-bottom: var(--s1); }
.faq-a p { font-size: .9375rem; }

/* ---------- Cierre + footer ---------- */
.closing { position: relative; isolation: isolate; color: var(--gris); }
.closing::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(0,0,0,.7); }
.closing .media.cover { z-index: -2; }
.closing-cta { padding-block: var(--s8) var(--s6); text-align: center; display: grid; justify-items: center; gap: var(--s3); }
.closing-cta .h2 { color: var(--gris); margin: 0; }
.closing-cta .logo { width: 210px; margin-top: var(--s5); }
.site-footer { border-top: 1px solid rgba(242,242,242,.5); padding: var(--s5) 0 var(--s4); font-size: var(--tm1); }
.site-footer address { font-style: normal; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer .footer-nav ul, .social ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); }
.site-footer .footer-nav a, .social a { letter-spacing: .1em; text-transform: uppercase; }
.site-footer .legal { margin-top: var(--s4); }
.site-footer .legal p { font-size: .75rem; font-weight: 300; }

/* ---------- Retícula visible (tecla G o ?grid) ---------- */
.grid-overlay { position: fixed; inset: 0; z-index: 999; pointer-events: none; }
.grid-overlay .wrap, .grid-overlay .g12 { height: 100%; }
.grid-overlay span { background: rgba(58,101,110,.10); outline: 1px solid rgba(58,101,110,.35); }
.grid-overlay span:nth-child(7) { background: rgba(58,101,110,.22); }

@media (max-width: 700px) { .grid-overlay .g12 > span { grid-column: auto; } }
@media (min-width: 701px) { .photo-band .lede-col { grid-row: 1; } }

/* ---------- Ajustes con fotos reales ---------- */
.media video { position: relative; width: 100%; height: 100%; object-fit: cover; display: block; }
.r-9x16 { aspect-ratio: 9 / 16; }

/* Tarjetas Residential / Hospitality: filas compartidas para que los enlaces queden a la misma altura */
.paths { grid-template-rows: auto auto auto auto; row-gap: 0; }
.paths .path-card { display: grid; grid-row: span 4; grid-template-rows: subgrid; }
.path-card .over a { color: inherit; text-decoration: none; }
.path-card .over a::after { content: ""; position: absolute; inset: 0; }
.path-card .media { transition: filter .25s; }
.path-card .media:hover { filter: brightness(1.08); }
.path-card .big { margin: 0; }
.path-card .link { justify-self: start; }

/* Special projects: video vertical + pie a su lado, alineados abajo */
.special-fig { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); column-gap: var(--gap); align-items: end; }
.special-fig .caption { margin: 0; }
@media (max-width: 700px) { .special-fig { grid-template-columns: 1fr; } .special-fig .caption { margin-top: var(--s1); } }

/* Track record: cifras de SF a la misma altura */
.stats > div { display: flex; flex-direction: column; }
.stats .stat { margin-top: auto; padding-top: var(--s3); }

/* Track record Latinoamérica: foto vertical a la altura de la columna derecha */
.track-grid .tall { display: flex; flex-direction: column; }
.track-grid .tall .media { flex: 1; min-height: 320px; }
.track-grid .tall .media img { position: absolute; inset: 0; }

/* Redes sociales con icono */
.social { margin-top: var(--s3); }
.social a { display: inline-flex; align-items: center; gap: var(--s1); }
.social svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- Fotos sin recorte ---------- */
/* Filas de fotos de distinta proporción: cada una toma un ancho proporcional a su forma,
   así todas quedan a la misma altura sin recortar ninguna. */
.rows { display: grid; gap: var(--s4); }
.row-fit { display: flex; gap: var(--gap); align-items: flex-start; }
.row-fit > figure { flex: var(--r, 1.5) 1 0%; min-width: 0; }
@media (max-width: 700px) { .row-fit { flex-direction: column; gap: var(--s3); } .row-fit > figure { flex: none; width: 100%; } }

/* Planes: nombre y precio centrados en cada cuadro */
.plan .h3 { text-align: center; }

/* Nombres sobre las tarjetas: nunca más anchos que la foto */
.path-card .over .h3 { font-size: min(var(--t6), 5vw); }
@media (max-width: 700px) { .path-card .over .h3 { font-size: min(var(--t6), 11vw); } }

/* Anchos intermedios (tablet / panel angosto): la columna izquierda gana una columna
   y los textos grandes no se justifican, para evitar huecos entre palabras. */
@media (min-width: 701px) and (max-width: 1023px) {
  .col-a { grid-column: 1 / 7; }
  .prose p.lede, .prose .path-card .big { text-align: left; -webkit-hyphens: manual; hyphens: manual; }
}
@media (min-width: 701px) and (max-width: 1023px) {
  .prose .plan .desc { text-align: left; -webkit-hyphens: manual; hyphens: manual; }
  .plan .price { font-size: var(--t3); white-space: nowrap; }
  .plan { padding-inline: var(--s2); }
}

/* ---------- Testimonios ---------- */
.quotes { gap: var(--s5) var(--gap); }
.quote { display: flex; flex-direction: column; gap: var(--s3); border-top: 1px solid var(--teal); padding-top: var(--s3); }
.quote blockquote { margin: 0; }
.quote figcaption { margin-top: auto; display: grid; gap: 2px; font-size: var(--tm1); }
.quote figcaption strong { font-family: var(--f-head); font-weight: 600; font-size: var(--t0); text-transform: uppercase; letter-spacing: .08em; color: var(--teal); }
/* Cita y firma en filas compartidas: los nombres de una misma fila quedan a la misma altura */
.quotes { row-gap: 0; }
.quote { display: grid; grid-row: span 2; grid-template-rows: subgrid; gap: 0; margin-bottom: var(--s5); }
.quote blockquote { padding-bottom: var(--s3); }
.quote figcaption { margin-top: 0; align-content: start; }
@media (min-width: 701px) and (max-width: 1023px) {
  .hero-photo .col-wide { grid-column: 1 / 9; }
  .hero-photo .col-end { grid-column: 9 / 13; }
}
.lang a { color: inherit; text-underline-offset: 3px; }
@media (min-width: 701px) and (max-width: 1023px) {
  .steps > li { grid-template-columns: var(--s6) 1fr; padding: var(--s3) var(--s3) var(--s3) var(--s1); }
  .prose .steps p { text-align: left; -webkit-hyphens: manual; hyphens: manual; }
}