/* ============================================================================
   SB Ingeniería & Servicios SAS
   Dirección: "tablero de instrumentos", en clave luminosa. Papel frío, cobalto
   de marca (muestreado del isotipo) llevado a cian en los degradados, y una
   capa ámbar reservada para la anotación técnica: códigos de norma, índices de
   catálogo y códigos de obra.

   El ritmo alterna bandas claras y bandas oscuras: las oscuras aparecen donde
   manda la foto o el video (galería, pie). Los componentes se pintan con
   tokens semánticos —--bg, --surface, --fg…— y la clase .band-dark los
   redefine, así el mismo componente sirve sobre cualquiera de las dos.
   ========================================================================= */

:root {
  color-scheme: light;

  /* ── Paleta base ── */
  --paper:      #f4f7fb;   /* papel frío, con sesgo hacia el cobalto */
  --paper-2:    #ffffff;
  --paper-3:    #e9f0f8;
  --line:       #d5e0ec;
  --line-soft:  #e6edf5;

  --ink:        #0d1620;
  --ink-mid:    #46596d;
  --ink-dim:    #6d8296;

  --graphite:   #0b1119;   /* bandas oscuras */
  --graphite-2: #121b25;
  --chalk:      #eef4fa;
  --chalk-mid:  #adc0d1;
  --chalk-dim:  #8299ad;

  /* ── Marca ── */
  --cobalt:     #0f62c8;   /* el azul del isotipo, ajustado para contrastar en claro */
  --cobalt-lit: #2e8bff;
  --cyan:       #00a3c4;   /* segundo acento: el azul de las mangueras neumáticas */
  --signal:     #c97a00;   /* ámbar de señalética, sólo anotación técnica */
  --signal-lit: #f0b53f;   /* su versión para fondo oscuro */

  --sweep: linear-gradient(115deg, var(--cobalt), var(--cyan));

  /* Verde del canal WhatsApp: color de canal, no acento del sitio */
  --wa:         #1eb85a;
  --wa-lit:     #25d366;

  /* ── Tokens semánticos: lo único que usan los componentes ── */
  --bg:         var(--paper);
  --surface:    var(--paper-2);
  --surface-2:  var(--paper-3);
  --edge:       var(--line);
  --edge-soft:  var(--line-soft);
  --fg:         var(--ink);
  --fg-mid:     var(--ink-mid);
  --fg-dim:     var(--ink-dim);
  --accent:     var(--cobalt);
  --accent-lit: var(--cobalt-lit);
  --note:       var(--signal);
  --note-bg:    rgba(201, 122, 0, .1);
  --tint:       rgba(15, 98, 200, .08);
  --shadow:      0 1px 2px rgba(13, 22, 32, .05), 0 8px 24px -12px rgba(13, 22, 32, .18);
  --shadow-lift: 0 2px 4px rgba(13, 22, 32, .06), 0 20px 40px -20px rgba(15, 98, 200, .36);

  /* ── Tipografía ── */
  --display: "Saira Condensed", "Arial Narrow", "Helvetica Neue Condensed", sans-serif;
  --body:    "IBM Plex Sans", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --t-hero: clamp(2.75rem, 1.4rem + 6vw, 6rem);
  --t-h2:   clamp(1.9rem, 1.2rem + 2.6vw, 3.25rem);
  --t-h3:   clamp(1.05rem, .98rem + .3vw, 1.25rem);
  --t-lede: clamp(1.02rem, .96rem + .4vw, 1.2rem);
  --t-mono: .72rem;

  /* ── Ritmo ── */
  --shell: 1200px;
  --header-h: 106px;   /* la fija el alto del logotipo; el menú móvil cuelga de acá */
  --gut: clamp(1.15rem, .6rem + 2.4vw, 2.75rem);
  --sec-y: clamp(4rem, 2.5rem + 5.5vw, 7rem);
  --r: 5px;          /* chapa plegada, no burbuja */

  --ease: cubic-bezier(.22, .68, .36, 1);
}

/* Banda oscura: sólo redefine los tokens semánticos. */
.band-dark {
  color-scheme: dark;
  --bg:         var(--graphite);
  --surface:    var(--graphite-2);
  --surface-2:  #182330;
  --edge:       #273747;
  --edge-soft:  #1c2733;
  --fg:         var(--chalk);
  --fg-mid:     var(--chalk-mid);
  --fg-dim:     var(--chalk-dim);
  --accent:     var(--cobalt-lit);
  --accent-lit: #6fb0ff;
  --note:       var(--signal-lit);
  --note-bg:    rgba(240, 181, 63, .14);
  --tint:       rgba(46, 139, 255, .14);
  --shadow:      0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px -14px rgba(0, 0, 0, .7);
  --shadow-lift: 0 2px 4px rgba(0, 0, 0, .35), 0 22px 44px -22px rgba(46, 139, 255, .45);
}

/* ── Base ─────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

@media (max-width: 860px) { :root { --header-h: 88px; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.65 var(--body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }

:where(a, button, summary, input, select, textarea):focus-visible {
  outline: 2px solid var(--accent-lit);
  outline-offset: 3px;
  border-radius: 2px;
}

.shell {
  width: min(100% - var(--gut) * 2, var(--shell));
  margin-inline: auto;
}

.skip-link {
  position: absolute; left: 50%; top: -100px; z-index: 200;
  transform: translateX(-50%);
  padding: .7rem 1.2rem;
  background: var(--cobalt); color: #fff;
  font: 600 .9rem var(--body);
  border-radius: 0 0 var(--r) var(--r);
  transition: top .18s var(--ease);
}
.skip-link:focus { top: 0; }

/* ── Vocabulario tipográfico ──────────────────────────────────────────── */

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  line-height: .96;
  letter-spacing: -.005em;
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: var(--t-hero); text-transform: uppercase; }
h2 { font-size: var(--t-h2); text-transform: uppercase; }
h3 { font-size: var(--t-h3); font-family: var(--body); font-weight: 600; line-height: 1.3; letter-spacing: 0; }

p { margin: 0; }

/* Etiqueta de anotación: la voz "instrumento" del sitio */
.tag {
  font: 500 var(--t-mono)/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--note);
}

/* ── Botones ──────────────────────────────────────────────────────────── */

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--fg);
  --btn-bd: var(--edge);
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .72rem 1.15rem;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bd); border-radius: var(--r);
  font: 600 .9rem/1 var(--body);
  text-decoration: none; cursor: pointer;
  white-space: nowrap;
  transition: background .18s var(--ease), border-color .18s var(--ease),
              color .18s var(--ease), transform .18s var(--ease),
              box-shadow .18s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn .ico { width: 1.05em; height: 1.05em; flex: none; }

.btn-wa {
  --btn-bg: var(--wa); --btn-fg: #fff; --btn-bd: transparent;
  box-shadow: 0 10px 24px -12px rgba(30, 184, 90, .95);
}
.btn-wa:hover { --btn-bg: var(--wa-lit); box-shadow: 0 16px 30px -12px rgba(30, 184, 90, 1); }

.btn-solid {
  --btn-fg: #fff; --btn-bd: transparent;
  background: var(--sweep);
  box-shadow: 0 10px 24px -12px rgba(15, 98, 200, .95);
}
.btn-solid:hover { box-shadow: 0 16px 32px -12px rgba(15, 98, 200, 1); }

.btn-ghost { --btn-bg: var(--surface); }
.btn-ghost:hover { --btn-bd: var(--accent); --btn-fg: var(--accent); }

.btn-lg { padding: .95rem 1.5rem; font-size: 1rem; }
.btn-block { width: 100%; justify-content: center; }

/* ── Cabecera ─────────────────────────────────────────────────────────── */

.site-header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
.site-header.is-stuck {
  background: rgba(255, 255, 255, .95);
  border-bottom-color: var(--line);
  box-shadow: 0 10px 30px -22px rgba(13, 22, 32, .7);
}

.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: var(--header-h);
}

/* El lockup va directo sobre la cabecera, sin placa ni recuadro: la tinta casi
   negra del texto sobre el blanco ya es el contraste más alto de la página.
   La presencia se la da el tamaño, no una caja. Detrás, un halo cobalto muy
   tenue lo asienta sobre el papel sin encerrarlo. */
.brand { position: relative; display: block; flex: none; }
.brand::before {
  content: "";
  position: absolute; inset: -22% -12%;
  background: radial-gradient(58% 68% at 42% 50%, rgba(15, 98, 200, .13), transparent 72%);
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.brand:hover::before { opacity: 1; }
.brand img {
  position: relative;
  width: clamp(126px, 14.5vw, 182px); height: auto;
  transition: transform .25s var(--ease);
}
.brand:hover img { transform: translateY(-1px); }

.nav { display: flex; align-items: center; gap: clamp(.5rem, 1.6vw, 1.9rem); }

.nav > a:not(.btn) {
  position: relative;
  padding: .4rem 0;
  font: 500 .93rem/1 var(--body);
  color: var(--ink-mid);
  text-decoration: none;
  transition: color .18s var(--ease);
}
.nav > a:not(.btn)::after {
  content: ""; position: absolute; left: 0; bottom: -2px;
  width: 100%; height: 2px; border-radius: 2px;
  background: var(--sweep);
  transform: scaleX(0); transform-origin: left;
  transition: transform .22s var(--ease);
}
.nav > a:not(.btn):hover { color: var(--cobalt); }
.nav > a:not(.btn):hover::after,
.nav > a.is-current::after { transform: scaleX(1); }
.nav > a.is-current { color: var(--ink); }

.nav-toggle {
  display: none;
  width: 42px; height: 42px; padding: 0;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r);
  cursor: pointer;
}
.nav-toggle span {
  display: block; width: 18px; height: 2px; margin: 3.5px auto;
  background: var(--ink); border-radius: 2px;
  transition: transform .22s var(--ease), opacity .16s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .nav {
    position: fixed; inset: var(--header-h) 0 auto;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: .5rem var(--gut) 1.5rem;
    background: var(--paper-2);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 40px -28px rgba(13, 22, 32, .7);
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: opacity .2s var(--ease), transform .2s var(--ease);
  }
  .nav.is-open { transform: none; opacity: 1; pointer-events: auto; }
  .nav > a:not(.btn) { padding: .95rem 0; border-bottom: 1px solid var(--line-soft); font-size: 1.05rem; }
  .nav > a:not(.btn)::after { display: none; }
  .nav-cta { margin-top: 1.1rem; justify-content: center; }
}

/* ── Hero ─────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  padding: clamp(3rem, 1.5rem + 6vw, 6rem) 0 clamp(3.5rem, 2rem + 4vw, 5.5rem);
  overflow: hidden;
}

/* Retícula de plano eléctrico y tres lavados de color. Puro CSS, 0 KB. */
.hero-grid {
  position: absolute; inset: -1px; pointer-events: none;
  background:
    radial-gradient(78% 62% at 6% -10%, rgba(46, 139, 255, .30), transparent 62%),
    radial-gradient(58% 56% at 97% 8%, rgba(0, 163, 196, .26), transparent 62%),
    radial-gradient(46% 44% at 64% 106%, rgba(15, 98, 200, .12), transparent 70%),
    linear-gradient(rgba(15, 98, 200, .07) 1px, transparent 1px) 0 0 / 100% 74px,
    linear-gradient(90deg, rgba(15, 98, 200, .07) 1px, transparent 1px) 0 0 / 74px 100%;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 46%, transparent 96%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 46%, transparent 96%);
}

/* El isotipo, grande y tenue, ocupando el vacío a la derecha del titular.
   Es marca, no textura: por eso va a tamaño de póster y no repetido. */
.hero-mark {
  position: absolute; top: 50%; right: -2.5%;
  width: min(30vw, 340px); aspect-ratio: 692 / 1584;
  transform: translateY(-50%);
  background: url("../brand/isotipo.svg") center / contain no-repeat;
  opacity: .1;
  pointer-events: none;
}
@media (max-width: 1080px) { .hero-mark { display: none; } }

.hero-inner { position: relative; display: grid; gap: clamp(1.5rem, 1rem + 1.8vw, 2.4rem); }

h1 .lit {
  background: var(--sweep);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
h1 .thin { font-weight: 600; color: var(--ink-mid); }

.lede { max-width: 62ch; font-size: var(--t-lede); color: var(--ink-mid); }

.hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ── Respaldo normativo ───────────────────────────────────────────────────
   Franja corta entre el catálogo y los diferenciales: cierra los servicios
   con la norma que los respalda. Va sobre grafito porque es una placa de
   datos —lo que llevaría remachado el propio tablero—, y sobre oscuro el
   ámbar de la resolución canta.                                            */

.norms { padding: clamp(2.5rem, 1.8rem + 2.4vw, 3.75rem) 0; background: var(--bg); color: var(--fg); }
.norms .rule { margin-bottom: 1.25rem; }

.plate {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin: 0; padding: 0;
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.plate > div { position: relative; padding: 1.3rem 1.35rem; border-right: 1px solid var(--edge-soft); }
.plate > div:last-child { border-right: 0; }
.plate > div::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: var(--sweep);
}
.plate > div:nth-child(2)::before { background: linear-gradient(115deg, var(--signal), var(--signal-lit)); }
.plate dt {
  font: 500 var(--t-mono)/1 var(--mono);
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--fg-dim);
}
.plate dd {
  margin: .5rem 0 0;
  font-family: var(--display); font-weight: 700; font-size: 1.35rem; line-height: 1.05;
  letter-spacing: .01em; text-transform: uppercase;
  color: var(--fg);
}
.plate .sig { color: var(--note); }

@media (max-width: 620px) {
  .plate > div { border-right: 0; border-bottom: 1px solid var(--edge-soft); }
  .plate > div:last-child { border-bottom: 0; }
}

/* ── Secciones ────────────────────────────────────────────────────────── */

.section { padding: var(--sec-y) 0; background: var(--bg); color: var(--fg); }
.section-alt { --bg: var(--paper-2); }

.sec-head {
  display: grid; gap: .85rem;
  max-width: 68ch;
  margin-bottom: clamp(2.2rem, 1.5rem + 2.4vw, 3.6rem);
}
/* Regla graduada: separador con carácter de instrumento */
.rule { display: flex; align-items: center; gap: .85rem; margin-bottom: .35rem; }
.rule::after {
  content: ""; flex: 1; height: 6px;
  background-image: linear-gradient(90deg, var(--edge) 1px, transparent 1px);
  background-size: 9px 100%;
}
.sec-sub { color: var(--fg-dim); max-width: 58ch; }

/* ── Rejillas ─────────────────────────────────────────────────────────── */

.grid { display: grid; gap: clamp(.9rem, .5rem + 1vw, 1.4rem); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(288px, 1fr)); }

/* ── Tarjetas de diferencial ──────────────────────────────────────────── */

.card {
  position: relative;
  padding: 1.8rem 1.6rem 1.7rem;
  background: var(--surface);
  border: 1px solid var(--edge-soft);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: border-color .2s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.card::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: var(--sweep);
  transform: scaleX(0); transform-origin: left;
  transition: transform .32s var(--ease);
}
.card:hover { transform: translateY(-3px); border-color: var(--edge); box-shadow: var(--shadow-lift); }
.card:hover::before { transform: scaleX(1); }

.card-ico {
  display: grid; place-items: center;
  width: 46px; height: 46px; margin-bottom: 1.15rem;
  color: #fff;
  background: var(--sweep);
  border-radius: var(--r);
  box-shadow: 0 8px 18px -9px rgba(15, 98, 200, .9);
}
.card-ico svg { width: 23px; height: 23px; }
.card h3 { margin-bottom: .55rem; }
.card p { color: var(--fg-dim); font-size: .95rem; }

/* ── Catálogo de servicios ────────────────────────────────────────────── */

.services { align-items: start; }

.svc {
  background: var(--surface);
  border: 1px solid var(--edge-soft);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.svc[open], .svc:hover { border-color: var(--accent); box-shadow: var(--shadow-lift); }

.svc summary {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "code ico chev" "title title title" "tag tag tag";
  align-items: center;
  gap: .35rem .8rem;
  padding: 1.4rem 1.4rem 1.3rem;
  cursor: pointer;
  list-style: none;
}
.svc summary::-webkit-details-marker { display: none; }

.svc-code {
  grid-area: code;
  padding: .28rem .55rem;
  font: 500 var(--t-mono)/1 var(--mono); letter-spacing: .1em;
  color: var(--note); background: var(--note-bg);
  border-radius: 3px;
}
.svc-ico { grid-area: ico; justify-self: start; color: var(--accent); }
.svc-ico svg { width: 21px; height: 21px; }
.svc-title {
  grid-area: title; margin-top: .75rem;
  font-family: var(--display); font-size: 1.45rem; font-weight: 700;
  line-height: 1.08; text-transform: uppercase;
}
.svc-tag { grid-area: tag; font-size: .87rem; color: var(--fg-dim); }

.svc .chev {
  grid-area: chev;
  width: 24px; height: 24px;
  border: 1px solid var(--edge); border-radius: 50%;
  position: relative;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.svc .chev::before, .svc .chev::after {
  content: ""; position: absolute; inset: 50% auto auto 50%;
  background: var(--fg-mid); border-radius: 2px;
  transition: opacity .2s var(--ease), background .2s var(--ease);
}
.svc .chev::before { width: 10px; height: 2px; transform: translate(-50%, -50%); }
.svc .chev::after  { width: 2px; height: 10px; transform: translate(-50%, -50%); }
.svc[open] .chev { border-color: var(--accent); background: var(--tint); }
.svc[open] .chev::after { opacity: 0; }
.svc[open] .chev::before { background: var(--accent); }

.svc ul { margin: 0; padding: 0 1.4rem 1.5rem; list-style: none; display: grid; gap: .62rem; }
.svc li {
  position: relative; padding-left: 1.3rem;
  font-size: .93rem; line-height: 1.55; color: var(--fg-mid);
}
.svc li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: 7px; height: 7px; border-radius: 2px;
  background: var(--sweep);
}

/* ── Nosotros ─────────────────────────────────────────────────────────── */

.split {
  display: grid; gap: clamp(2rem, 1rem + 4vw, 4rem);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: start;
}
.split > * { min-width: 0; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

.split h2 { margin: .85rem 0 1.3rem; }
.prose { color: var(--fg-mid); max-width: 60ch; }
.prose + .prose { margin-top: 1rem; }
.prose strong { color: var(--fg); font-weight: 600; }

/* Los pilares son el bloque de color pleno de la sección */
.pillars {
  margin: 0; padding: .4rem; list-style: none;
  display: grid; gap: .4rem;
  background: var(--sweep);
  border-radius: calc(var(--r) + 3px);
  box-shadow: 0 24px 46px -26px rgba(15, 98, 200, .6);
}
.pillars li {
  display: grid; grid-template-columns: auto 1fr; gap: 0 1.1rem;
  padding: 1.5rem;
  background: var(--paper-2);
  border-radius: var(--r);
}
.pillars .p-ico { grid-row: span 2; align-self: start; color: var(--cobalt); }
.pillars .p-ico svg { width: 26px; height: 26px; }
.pillars h3 { margin-bottom: .3rem; color: var(--ink); }
.pillars p { color: var(--ink-dim); font-size: .93rem; }

/* ── Galería ──────────────────────────────────────────────────────────── */

.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.6rem; }
.filter {
  padding: .55rem 1.05rem;
  background: transparent; color: var(--fg-dim);
  border: 1px solid var(--edge); border-radius: 100px;
  font: 500 var(--t-mono)/1.4 var(--mono);
  letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer;
  transition: color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}
.filter:hover { color: var(--fg); border-color: var(--accent); }
.filter.is-active {
  color: #fff; border-color: transparent;
  background: var(--sweep);
  box-shadow: 0 8px 20px -10px rgba(46, 139, 255, .9);
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  grid-auto-flow: dense;  /* las apaisadas no dejan huecos al reacomodarse */
  gap: clamp(.6rem, .3rem + .9vw, 1rem);
}
.gallery .tile.is-wide { grid-column: span 2; aspect-ratio: 3 / 2; }
@media (max-width: 560px) { .gallery { grid-template-columns: repeat(2, 1fr); } }

.tile {
  position: relative;
  display: block; padding: 0;
  background: var(--surface-2) center / cover no-repeat;
  border: 1px solid var(--edge); border-radius: var(--r);
  overflow: hidden; cursor: pointer;
  /* Dos módulos y nada más: retrato 3/4 en una columna, apaisado 3/2 en dos.
     Con ese par las alturas de fila coinciden y la grilla cierra sin huecos. */
  aspect-ratio: 3 / 4;
  transition: border-color .2s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.tile:hover {
  border-color: var(--accent-lit);
  transform: translateY(-3px);
  box-shadow: 0 18px 36px -18px rgba(0, 0, 0, .85);
}
.tile.is-hidden { display: none; }

.tile img, .tile video {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.tile:hover img, .tile:hover video { transform: scale(1.05); }

/* Franja de pie: el tile se lee como una ficha de registro de obra */
.tile figcaption {
  position: absolute; inset: auto 0 0;
  display: flex; align-items: baseline; gap: .55rem;
  padding: 2.6rem .8rem .75rem;
  background: linear-gradient(transparent, rgba(6, 10, 14, .6) 34%, rgba(6, 10, 14, .94));
  font-size: .82rem; line-height: 1.35; text-align: left;
}
.tile figcaption .code { font: 500 var(--t-mono)/1 var(--mono); color: var(--signal-lit); flex: none; }
.tile figcaption .name { color: #fff; }

.tile .play {
  position: absolute; top: .65rem; right: .65rem;
  display: grid; place-items: center;
  width: 34px; height: 34px;
  color: #fff;
  background: rgba(15, 98, 200, .85);
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 50%;
  backdrop-filter: blur(4px);
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.tile:hover .play { background: var(--cobalt-lit); transform: scale(1.08); }
.tile .play svg { width: 13px; height: 13px; margin-left: 2px; }

.gallery-empty { color: var(--fg-dim); font-size: .95rem; }

/* ── Contacto ─────────────────────────────────────────────────────────── */

.contact {
  display: grid; gap: clamp(1rem, .5rem + 2vw, 2rem);
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: start;
}
/* Sin esto, el ancho mínimo del <select> (la opción más larga) estira la
   columna y empuja la página a scrollear en horizontal. */
.contact > * { min-width: 0; }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }

.contact-card {
  padding: clamp(1.5rem, 1rem + 2vw, 2.4rem);
  background: var(--surface);
  border: 1px solid var(--edge-soft); border-radius: var(--r);
  box-shadow: var(--shadow);
}
.contact-card h3 { font-family: var(--display); font-size: 1.65rem; font-weight: 700; text-transform: uppercase; }
.contact-card .hint { margin: .5rem 0 1.6rem; color: var(--fg-dim); font-size: .92rem; }

/* minmax(0,1fr) en vez de la pista 'auto' implícita: el ancho mínimo
   intrínseco del <select> no puede estirar el formulario. */
form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.05rem; }
form label { display: grid; gap: .42rem; min-width: 0; }
form label > span {
  font: 500 var(--t-mono)/1 var(--mono);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg-dim);
}
form label > span em { font-style: normal; text-transform: none; letter-spacing: 0; opacity: .75; }

input, select, textarea {
  width: 100%; min-width: 0;
  padding: .8rem .9rem;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r);
  font: 400 .95rem/1.5 var(--body);
  transition: border-color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
}
textarea { resize: vertical; min-height: 108px; }
input::placeholder, textarea::placeholder { color: #93a6b8; }
input:hover, select:hover, textarea:hover { border-color: var(--cobalt-lit); }
input:focus, select:focus, textarea:focus {
  outline: none; background: var(--paper-2);
  border-color: var(--cobalt);
  box-shadow: 0 0 0 4px rgba(46, 139, 255, .15);
}
input[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: #d24a35; box-shadow: 0 0 0 4px rgba(210, 74, 53, .13);
}

.form-note { min-height: 1.2em; font-size: .85rem; color: var(--fg-dim); }
.form-note.is-error { color: #c0392b; }

.contact-list {
  margin: 0 0 1rem; padding: 0; list-style: none;
  display: grid; gap: 1px;
  background: var(--edge-soft);
  border: 1px solid var(--edge-soft); border-radius: var(--r);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.contact-list li {
  display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center;
  padding: 1.05rem 1.2rem; background: var(--surface);
}
.contact-list .c-ico {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  color: #fff; background: var(--sweep); border-radius: var(--r);
}
.contact-list li:first-child .c-ico { background: linear-gradient(115deg, var(--wa), var(--wa-lit)); }
.contact-list .c-ico svg { width: 18px; height: 18px; }
.contact-list .c-label {
  display: block; margin-bottom: .3rem;
  font: 500 var(--t-mono)/1 var(--mono);
  letter-spacing: .12em; text-transform: uppercase; color: var(--fg-dim);
}
.contact-list a, .contact-list .c-text { font-size: .95rem; color: var(--fg); text-decoration: none; word-break: break-word; }
.contact-list a:hover { color: var(--cobalt); }

.cta-box {
  padding: 1.7rem;
  color: #fff;
  background: var(--sweep);
  border-radius: var(--r);
  box-shadow: 0 24px 46px -26px rgba(15, 98, 200, .65);
}
.cta-box h3 { margin-bottom: .45rem; color: #fff; }
.cta-box p { color: rgba(255, 255, 255, .9); font-size: .92rem; }

/* ── Pie ──────────────────────────────────────────────────────────────── */

.site-footer { background: var(--bg); color: var(--fg); }
.footer-inner {
  display: grid; gap: 2rem;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
  align-items: start;
  padding: clamp(2.5rem, 2rem + 2vw, 4rem) 0 2rem;
}
@media (max-width: 780px) { .footer-inner { grid-template-columns: 1fr; gap: 1.6rem; } }

.footer-logo { width: 168px; height: auto; }
.footer-tag { margin-top: 1rem; color: var(--fg-dim); font-size: .9rem; }

.footer-nav { display: grid; gap: .6rem; align-content: start; }
.footer-nav a { color: var(--fg-mid); text-decoration: none; font-size: .93rem; }
.footer-nav a:hover { color: var(--accent-lit); }

.footer-social { display: flex; gap: .5rem; }
.footer-social a {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  color: var(--fg-mid);
  border: 1px solid var(--edge); border-radius: var(--r);
  transition: color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}
.footer-social a:hover { color: #fff; border-color: transparent; background: var(--sweep); }
.footer-social svg { width: 18px; height: 18px; }

.copy { padding: 1.3rem 0 2rem; border-top: 1px solid var(--edge); }
.copy p { color: var(--fg-dim); font-size: .82rem; }

/* ── Botón flotante de WhatsApp ───────────────────────────────────────── */

.wa-fab {
  position: fixed; right: clamp(.9rem, 2vw, 1.6rem); z-index: 80;
  bottom: max(clamp(.9rem, 2vw, 1.6rem), env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: .6rem;
  padding: .9rem 1.15rem;
  background: linear-gradient(115deg, var(--wa), var(--wa-lit));
  color: #fff;
  border-radius: 100px;
  box-shadow: 0 12px 30px -10px rgba(30, 184, 90, .8), 0 0 0 6px rgba(37, 211, 102, .16);
  text-decoration: none;
  font: 600 .93rem/1 var(--body);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.wa-fab:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px -10px rgba(30, 184, 90, .9), 0 0 0 8px rgba(37, 211, 102, .22);
}
.wa-fab svg { width: 22px; height: 22px; flex: none; }
@media (max-width: 560px) { .wa-fab-text { display: none; } .wa-fab { padding: .95rem; } }

/* ── Visor ────────────────────────────────────────────────────────────── */

.lightbox {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(6, 10, 15, .94);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .22s var(--ease);
}
.lightbox.is-open { opacity: 1; }
.lightbox[hidden] { display: none; }

.lb-stage { margin: 0; display: grid; gap: 1rem; justify-items: center; max-width: 100%; }
.lb-media { display: grid; place-items: center; }
.lb-media img, .lb-media video {
  max-width: min(92vw, 1200px);
  max-height: 76vh;
  width: auto; height: auto;
  border-radius: var(--r);
  background: #121b25;
}
.lb-stage figcaption {
  display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; justify-content: center;
  color: #cfdcea; font-size: .93rem; text-align: center;
}
.lb-stage figcaption .code { font: 500 var(--t-mono)/1 var(--mono); color: var(--signal-lit); }

.lb-close, .lb-nav {
  position: absolute;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .28); border-radius: 50%;
  cursor: pointer;
  transition: border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease);
}
.lb-close:hover, .lb-nav:hover { background: var(--cobalt); border-color: var(--cobalt-lit); }

.lb-close { top: clamp(.8rem, 2vw, 1.6rem); right: clamp(.8rem, 2vw, 1.6rem); width: 44px; height: 44px; font-size: 1.7rem; line-height: 1; padding-bottom: 3px; }
.lb-close:hover { transform: scale(1.06); }
.lb-nav { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-size: 2rem; line-height: 1; padding-bottom: 5px; }
.lb-nav:hover { transform: translateY(-50%) scale(1.06); }
.lb-prev { left: clamp(.5rem, 2vw, 1.6rem); }
.lb-next { right: clamp(.5rem, 2vw, 1.6rem); }
@media (max-width: 560px) {
  .lb-nav { top: auto; bottom: 1rem; transform: none; width: 44px; height: 44px; }
  .lb-nav:hover { transform: scale(1.06); }
  .lb-stage figcaption { padding-bottom: 3.5rem; }
}

body.lb-locked { overflow: hidden; }

/* ── Entrada en escena ────────────────────────────────────────────────────
   El contenido está visible por defecto: la animación sólo existe si el JS
   marca el documento, así que sin JS nada queda escondido.                  */

.js-reveal .reveal { opacity: 0; transform: translateY(14px); }
.js-reveal .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal { opacity: 1; transform: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}