/* BRM Studio — Business Road Media
   Sistema: marino + plata. Cero radios, cero sombras, nada arriba de peso 400. */

:root{
  --marina:#0D1732; --marina-900:#060B18; --marina-700:#16264A;
  --plata:#C6D0DE; --plata-viva:#EEF2F7; --plata-honda:#8792A4;
  --hueso:#F3F5F8; --tinta:#10141C; --gris:#6B7480;
  --tipo: Futura, "Futura PT", Jost, "Century Gothic", "Avenir Next", sans-serif;
  --margen: clamp(20px, 6vw, 90px);
  --aire: clamp(72px, 12vh, 132px);
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--marina-900); color:#fff;
  font-family:var(--tipo); font-weight:300; line-height:1.8;
  font-size:clamp(.92rem,1.4vw,1.02rem);
  -webkit-font-smoothing:antialiased;
}
img,video{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }

h1,h2,h3{ font-weight:300; margin:0; letter-spacing:normal }
h1{ font-size:clamp(2.4rem,6.4vw,5rem); line-height:1.03; letter-spacing:-.01em }
h2{ font-size:clamp(1.9rem,3.6vw,3rem); line-height:1.1 }
h3{ font-size:clamp(1.4rem,2.4vw,2rem); line-height:1.15 }
p{ margin:0 }

/* ── piezas comunes ─────────────────────────────────────── */
.et{
  font-size:10px; font-weight:400; line-height:1;
  letter-spacing:.34em; text-transform:uppercase;
  color:var(--plata); margin:0;
}
.et--tenue{ color:rgba(255,255,255,.45) }

/* La plata plana se ve gris: todo filo va en degradado. */
.filo{ border:0; height:1px; margin:0;
  background:linear-gradient(90deg,transparent,var(--plata-honda),var(--plata-viva),var(--plata-honda),transparent) }
.filo--corto{ max-width:180px }

.btn{
  display:inline-block; padding:13px 26px; border:0; cursor:pointer;
  font-family:var(--tipo); font-size:10px; font-weight:400;
  letter-spacing:.2em; text-transform:uppercase; line-height:1;
  background:var(--plata); color:var(--marina-900);
  transition:background .3s, color .3s;
}
.btn:hover{ background:var(--plata-viva) }
.btn--fantasma{ background:transparent; color:var(--plata); border:1px solid var(--plata) }
.btn--fantasma:hover{ background:var(--plata); color:var(--marina-900) }

/* ── barra fija ─────────────────────────────────────────── */
#barra{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px var(--margen); transition:background .35s, padding .35s;
}
#barra.opaca{ background:rgba(6,11,24,.86); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); padding:12px var(--margen) }
#barra img{ height:34px; width:auto; filter:drop-shadow(0 2px 12px rgba(0,0,0,.5)) }

/* ── portada / encabezado a sangre ──────────────────────── */
/* La portada es una secuencia de fotogramas dirigida por el scroll: la seccion
   es alta y adentro un sticky de una pantalla sostiene el canvas. El alto lo
   pone seq.js con data-alto. */
.tapa{ position:relative; background:var(--marina-900) }
.tapa__fijo{ position:sticky; top:0; height:100svh; min-height:520px; overflow:hidden }
.tapa canvas{ position:absolute; inset:0; width:100%; height:100% }
.tapa__velo{ position:absolute; inset:0;
  /* El metraje ya es oscuro de por si; un velo fuerte apagaria la lente. */
  background:
    radial-gradient(ellipse 92% 70% at 50% 50%, rgba(6,11,24,.42) 0%, rgba(6,11,24,.26) 60%, rgba(6,11,24,.10) 100%),
    linear-gradient(180deg, rgba(6,11,24,.34) 0%, rgba(6,11,24,.04) 40%, rgba(6,11,24,.40) 100%) }
/* Gana a .cap, que la anclaria a la izquierda y angosta: aqui va centrada y a
   todo lo ancho, y de .cap solo se aprovecha el encendido por avance. */
.tapa .tapa__txt{
  position:absolute; inset:0; z-index:2; width:auto;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:0 var(--margen); text-align:center;
  opacity:0; transform:translateY(26px);
  transition:opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1);
}
.tapa .tapa__txt.on{ opacity:1; transform:none }
.tapa__txt h1{ margin:18px 0 0; text-shadow:0 2px 40px rgba(6,11,24,.55) }
.tapa__sub{ margin-top:14px; font-size:clamp(1.2rem,2.6vw,2rem); line-height:1.2; color:var(--plata) }
.tapa__pie{ margin-top:34px; display:flex; gap:22px; flex-wrap:wrap; align-items:center }

/* ── línea de identidad ─────────────────────────────────── */
.identidad{ padding:var(--aire) var(--margen); text-align:center }
/* Ya no dice "BRM": lo repetian el logo de la barra y el titular. En su lugar
   va lo que hacen, y debajo la geografia, que despues de quitar la etiqueta del
   hero no aparecia en ningun otro lado. */
.identidad__marca{ font-size:clamp(1.7rem,4.2vw,3.3rem); line-height:1.15;
  letter-spacing:.005em; color:#fff; margin:0; max-width:22ch;
  margin-left:auto; margin-right:auto }
.identidad__que{ margin-top:22px; font-size:10px; font-weight:400; line-height:1;
  letter-spacing:.34em; text-transform:uppercase; color:var(--plata) }

/* ── mosaico de trabajo (maqueta: Moscati alto a la derecha) ─ */
.mosaico{
  display:grid; gap:clamp(10px,1.4vw,22px);
  padding:0 var(--margen);
  grid-template-columns:repeat(4,1fr);
  /* Las alturas se alternan solas en vez de estar escritas fila por fila: el
     panel puede agregar o quitar casos y el mosaico sigue armandose. */
  grid-auto-rows:clamp(300px,44vh,500px) clamp(220px,30vh,340px);
}
.pz{ position:relative; display:block; overflow:hidden; background:var(--marina) }
.pz picture{ display:contents }   /* que no estorbe al posicionado de la imagen */
.pz img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.7,.3,1) }
.pz:hover img{ transform:scale(1.05) }
/* La portada se ve limpia; el texto encima de la foto no se alcanzaba a leer.
   Al pasar el cursor la pieza se llena de marino solido y ahi si se explica. */
.pz__txt{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(18px,2.2vw,32px);
  background:var(--marina);
  opacity:0; transition:opacity .4s ease;
}
.pz:hover .pz__txt,.pz:focus-visible .pz__txt{ opacity:1 }
.pz__txt::before{ content:""; display:block; height:1px; margin-bottom:16px;
  background:linear-gradient(90deg,var(--plata-honda),var(--plata-viva),transparent) }
.pz__txt h3{ margin:10px 0 0; font-size:clamp(1.15rem,1.9vw,1.9rem) }
.pz__disc{ font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:var(--plata) }
.pz__destino{ margin-top:12px; color:rgba(255,255,255,.78); max-width:44ch;
  font-size:clamp(.85rem,1.1vw,.98rem); line-height:1.55 }
/* Ancha arriba a la izquierda, alta a la derecha y dos chicas debajo:
   ningun par de piezas comparte tamano. El patron se repite cada cuatro casos,
   asi que el quinto vuelve a empezar el dibujo en lugar de desacomodarlo.
   La fila la resuelve el acomodo automatico; aqui solo se dicta la columna. */
.pz:nth-child(4n+1){ grid-column:1 / 3 }
.pz:nth-child(4n+2){ grid-column:3 / 5; grid-row:span 2 }
.pz:nth-child(4n+3){ grid-column:1 / 2 }
.pz:nth-child(4n+4){ grid-column:2 / 3 }
/* En las piezas chicas el destino aprieta. */
.pz:nth-child(4n+3) .pz__destino,.pz:nth-child(4n+4) .pz__destino{ font-size:.86rem }

/* Con pocos casos el dibujo de cuatro deja huecos: cada cantidad tiene el suyo.
   Lo pone el servidor segun cuantos casos esten visibles. */
.mosaico--1 .pz:nth-child(1){ grid-column:1 / 5; grid-row:span 2 }
.mosaico--2 .pz:nth-child(1){ grid-column:1 / 3; grid-row:span 2 }
.mosaico--2 .pz:nth-child(2){ grid-column:3 / 5; grid-row:span 2 }
.mosaico--3 .pz:nth-child(1){ grid-column:1 / 3; grid-row:1 }
.mosaico--3 .pz:nth-child(2){ grid-column:3 / 5; grid-row:1 / 3 }
.mosaico--3 .pz:nth-child(3){ grid-column:1 / 3; grid-row:2 }

/* Sin cursor no hay hover: el nombre vive siempre en una franja solida al pie,
   y el destino se guarda para no tapar la foto. */
@media (hover:none){
  .pz__txt{ inset:auto 0 0 0; opacity:1; padding:16px clamp(16px,4vw,24px) 20px }
  .pz__txt::before{ margin-bottom:12px }
  .pz__destino{ display:none }
}

/* ── quiénes somos ──────────────────────────────────────── */
.quienes{ padding:var(--aire) var(--margen) 0 }
.quienes h2{ margin:22px 0 26px; max-width:20ch }
.quienes p{ color:rgba(255,255,255,.76); max-width:62ch; margin-bottom:18px }
.quienes .btn--fantasma{ margin-top:12px }

/* ── soluciones a medida ────────────────────────────────── */
/* -- soluciones a medida: secuencia con el panel entrando por la derecha --
   La seccion es alta y adentro un sticky sostiene el canvas. El metraje de la
   laptop es claro, asi que el velo carga del lado derecho, que es donde vive
   el texto en blanco. */
.soluciones{ position:relative; background:var(--marina-900) }
.sol__fijo{ position:sticky; top:0; height:100svh; min-height:560px; overflow:hidden }
.soluciones canvas{ position:absolute; inset:0; width:100%; height:100% }
/* Panel de vidrio puro a la izquierda: solo desenfoque, sin tinte encima. La
   toma queda viva detras y el borde derecho se desvanece, sin canto.

   Advertencia medida: el desenfoque promedia pero no oscurece — sobre los 120
   cuadros la zona mas clara solo baja de .714 a .637 con 34 px. Sin tinte, el
   texto se sostiene con su propia sombra local y con los renglones apagados mas
   opacos; en los cuadros mas claros el contraste queda por debajo del 4.5:1. */
.sol__velo{ position:absolute; inset:0;
  background:linear-gradient(to right, rgba(6,11,24,.30) 0%, rgba(6,11,24,.14) 55%, rgba(6,11,24,.24) 100%) }
.sol__panel{
  position:absolute; inset:0 auto 0 0; z-index:2;
  width:min(470px, 44vw);
  padding:0 clamp(28px,3.4vw,56px) 0 var(--margen);
  display:flex; flex-direction:column; justify-content:center;
  background:transparent;
  -webkit-backdrop-filter:blur(34px) saturate(.94);
  backdrop-filter:blur(34px) saturate(.94);
  /* Sin panel oscuro, la legibilidad la carga el propio texto. */
  text-shadow:0 1px 16px rgba(6,11,24,.92), 0 0 3px rgba(6,11,24,.75);
  -webkit-mask-image:linear-gradient(to right,#000 0 84%,transparent 100%);
  mask-image:linear-gradient(to right,#000 0 84%,transparent 100%);
  pointer-events:none;
}
.sol__panel .insight__tit{ pointer-events:auto }
/* Sin soporte de vidrio no queda de otra que un tinte, si no el texto
   quedaria directamente sobre la toma. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .sol__panel{ background:rgba(6,11,24,.86) }
}

.sol__panel > .et.cap{
  position:static; width:auto; left:auto; bottom:auto;
  opacity:0; transform:translateX(-30px);
  transition:opacity .5s ease, transform .55s cubic-bezier(.2,.7,.3,1);
  margin-bottom:30px;
}
.sol__panel > .et.cap.on{ opacity:1; transform:none }

/* El menu es un riel: una linea de 1px con un rombo por opcion, el mismo
   vocabulario del trazo de "Como trabajamos". */
.sol__panel .insights{ position:relative; display:block; margin:0; padding:0 0 0 30px; list-style:none }
.sol__panel .insights::before{ content:""; position:absolute; left:3px; top:14px; bottom:14px;
  width:1px; background:rgba(255,255,255,.16) }
.sol__panel .insight.cap{
  position:relative; width:auto; left:auto; bottom:auto;
  /* Sin tinte detras, .60 se perdia: los apagados suben a .78. */
  opacity:.78; transform:none; border:0; padding:11px 0;
  transition:opacity .55s ease;
}
.sol__panel .insight.cap.on{ opacity:1 }
.sol__panel .insight.cap::before{
  content:""; position:absolute; left:-30px; top:1.05em; width:9px; height:9px; margin:-4.5px 0 0 -1px;
  background:var(--marina-900); border:1px solid var(--plata-honda);
  transform:rotate(45deg) scale(.78);
  transition:background .45s, border-color .45s, transform .45s cubic-bezier(.2,.7,.3,1);
}
.sol__panel .insight.cap.on::before{
  background:var(--plata); border-color:var(--plata-viva); transform:rotate(45deg) scale(1);
}
.sol__panel .insight__tit{
  display:block; width:100%; text-align:left; cursor:pointer;
  background:none; border:0; padding:0; margin:0; color:var(--plata);
  font-family:var(--tipo); font-weight:400; letter-spacing:normal;
  font-size:clamp(.95rem,1.2vw,1.15rem); line-height:1.25;
  transition:color .3s;
}
.sol__panel .insight__tit:hover{ color:var(--plata-viva) }
.sol__panel .insight__tit:focus-visible{ outline:1px solid var(--plata); outline-offset:6px }
.sol__panel .insight span{
  display:block; overflow:hidden; max-height:0; opacity:0; margin-top:0;
  color:rgba(255,255,255,.80); line-height:1.5; font-size:clamp(.8rem,.95vw,.9rem);
  transition:max-height .55s cubic-bezier(.2,.7,.3,1), opacity .45s ease, margin-top .55s;
}
.sol__panel .insight.abierto span{ max-height:9em; opacity:1; margin-top:8px }
/* Sin fondo de rejilla: con un numero impar de tarjetas la celda vacia se
   veria como un rectangulo claro. El filo va en cada tarjeta, arriba. */
.insights{ display:grid; gap:0 clamp(20px,2.6vw,44px);
  /* Tres columnas: con cinco tarjetas quedan 3 arriba y 2 abajo, que se lee
     deliberado. A cuatro columnas quedaba 4+1 y parecia que sobro una. */
  grid-template-columns:repeat(auto-fit,minmax(310px,1fr)); list-style:none; margin:34px 0 0; padding:0 }
.insight{ padding:clamp(22px,3vh,32px) 0; border-top:1px solid rgba(255,255,255,.16) }
.insight b{ display:block; font-weight:400; font-size:clamp(1.15rem,1.9vw,1.55rem);
  line-height:1.2; color:var(--plata); margin-bottom:14px }
.insight span{ display:block; color:rgba(255,255,255,.76); line-height:1.6 }

/* ── cómo trabajamos ────────────────────────────────────── */
.proceso{ padding:var(--aire) var(--margen) }
.proceso h2{ margin:22px 0 68px }
/* Rejilla de tres o de una, nunca de dos: en el acomodo 2+1 el trazo mandaba
   el tercer nodo a una posicion que no correspondia a su paso. */
.pasos{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(255,255,255,.12) }
.paso{ background:var(--marina-900); padding:clamp(26px,4vh,44px) clamp(20px,2.4vw,34px) }
@media (max-width:900px){ .pasos{ grid-template-columns:1fr } }
.paso b{ display:block; font-weight:400; font-size:10px; letter-spacing:.34em; color:var(--plata); margin-bottom:20px }
.paso h3{ font-size:clamp(1.2rem,2vw,1.7rem) }
.paso p{ margin-top:12px; color:rgba(255,255,255,.72) }

/* ── cifras ─────────────────────────────────────────────── */
.cifras{ display:flex; flex-wrap:wrap; padding:var(--aire) var(--margen) 0 }
.cifra{ flex:1 1 160px; padding:0 clamp(12px,2vw,28px); border-left:1px solid rgba(255,255,255,.12) }
.cifra:first-child{ border-left:0; padding-left:0 }
.cifra b{ display:block; font-weight:400; font-size:clamp(2.1rem,4vw,3.2rem); line-height:1; color:var(--plata) }
.cifra span{ display:block; margin-top:12px; font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:rgba(255,255,255,.45); line-height:1.7 }
.pie-nota{ padding:26px var(--margen) var(--aire); font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:rgba(255,255,255,.35) }

/* ── lo que se contrata ─────────────────────────────────── */
.contrata{ padding:var(--aire) var(--margen); background:var(--marina); border-top:1px solid rgba(255,255,255,.1) }
.contrata ul{ list-style:none; margin:26px 0 0; padding:0 }
.contrata li{ padding:14px 0; border-top:1px solid rgba(255,255,255,.12);
  font-size:clamp(1.15rem,2.2vw,1.6rem); line-height:1.3 }
.contrata li:last-child{ border-bottom:1px solid rgba(255,255,255,.12) }

/* ── cierre ─────────────────────────────────────────────── */
/* El cierre lleva una red de nodos de fondo (red.js). El canvas no recibe
   clics para que el boton y los enlaces sigan respondiendo. */
.cierre{ position:relative; overflow:hidden;
  padding:calc(var(--aire)*1.2) var(--margen); text-align:center; background:var(--marina-900) }
.cierre > canvas.red{ position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:0 }
.cierre > *:not(canvas){ position:relative; z-index:1 }
.cierre h2{ margin-bottom:34px }
.directo{ margin-top:34px; display:flex; gap:26px; justify-content:center; flex-wrap:wrap;
  font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:rgba(255,255,255,.5) }
.directo a:hover{ color:var(--plata) }

footer{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  padding:26px var(--margen); border-top:1px solid rgba(255,255,255,.1);
  font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:rgba(255,255,255,.35) }

/* ── páginas de caso ────────────────────────────────────── */
.ficha{ display:flex; gap:clamp(16px,4vw,60px); flex-wrap:wrap; margin-bottom:8px }
.entrega{ padding:var(--aire) var(--margen); background:var(--marina) }
.entrega ul{ list-style:none; margin:26px 0 0; padding:0; max-width:760px }
.entrega li{ padding:14px 0; border-top:1px solid rgba(255,255,255,.12); font-size:clamp(1.05rem,1.8vw,1.3rem) }
.entrega li:last-child{ border-bottom:1px solid rgba(255,255,255,.12) }
.siguiente{ display:block; padding:var(--aire) var(--margen); border-top:1px solid rgba(255,255,255,.1) }
.siguiente h3{ margin-top:12px; transition:color .3s }
.siguiente:hover h3{ color:var(--plata) }

/* ── secuencia de fotogramas (canvas) ───────────────────── */
.seq{ position:relative; background:var(--marina-900) }
.seq__fijo{ position:sticky; top:0; height:100svh; overflow:hidden }
.seq canvas{ position:absolute; inset:0; width:100%; height:100% }
.seq__velo{ position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(6,11,24,.92) 0%,rgba(6,11,24,.82) 34%,rgba(6,11,24,.46) 62%,rgba(6,11,24,.08) 84%) }
.leyendas{ position:absolute; inset:0; z-index:2 }
.cap{ position:absolute; left:var(--margen); bottom:clamp(60px,14vh,140px); width:min(440px,80vw);
  opacity:0; transform:translateY(24px); transition:opacity .45s, transform .45s; pointer-events:none }
.cap.on{ opacity:1; transform:none }
.cap h3{ margin:12px 0 14px }
.cap p{ color:rgba(255,255,255,.76); max-width:48ch }

/* ── cargador ───────────────────────────────────────────── */
#carga{ position:fixed; inset:0; z-index:90; background:var(--marina-900);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px;
  transition:opacity .8s }
#carga.listo{ opacity:0; pointer-events:none }
#carga img{ width:150px }
.barra{ position:relative; width:180px; height:1px; background:rgba(255,255,255,.16); overflow:hidden }
.barra i{ position:absolute; inset:0; right:100%; background:var(--plata); transition:right .3s }
.barra-txt{ font-size:10px; letter-spacing:.34em; text-transform:uppercase; color:rgba(255,255,255,.45) }

#avance{ position:fixed; inset:0 0 auto 0; height:1px; z-index:70; transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg,var(--plata-honda),var(--plata-viva)) }

/* ── celular ────────────────────────────────────────────── */
@media (max-width:860px){
  .seq__velo{ background:linear-gradient(180deg,rgba(6,11,24,.34) 0%,rgba(6,11,24,.72) 55%,rgba(6,11,24,.92) 100%) }
  .tapa__velo{ background:
    radial-gradient(ellipse 130% 56% at 50% 50%, rgba(6,11,24,.48) 0%, rgba(6,11,24,.30) 62%, rgba(6,11,24,.14) 100%),
    linear-gradient(180deg, rgba(6,11,24,.38) 0%, rgba(6,11,24,.10) 40%, rgba(6,11,24,.46) 100%) }
  /* El encuadre vertical trae reflejos vivos justo donde caen el titular y el
     lema: sobre el pixel mas claro de cada renglon el contraste bajaba a 4.7 y
     3.6. Un velo plano de .20 los sube a 6.5 y 4.7, sin apagar la toma
     (el promedio del fondo apenas pasa de 8.7 a 6.9 de contraste). */
  .tapa.seq--vertical .tapa__velo{ background:
    linear-gradient(rgba(6,11,24,.20), rgba(6,11,24,.20)),
    radial-gradient(ellipse 130% 56% at 50% 50%, rgba(6,11,24,.48) 0%, rgba(6,11,24,.30) 62%, rgba(6,11,24,.14) 100%),
    linear-gradient(180deg, rgba(6,11,24,.38) 0%, rgba(6,11,24,.10) 40%, rgba(6,11,24,.46) 100%) }
  .pieza--ancha,.pieza--angosta{ flex:1 1 100% }
  .pieza--vertical .pieza__media{ justify-content:center; padding:0; height:auto }
  .pieza--vertical .pieza__media video{ max-width:100%; height:auto; width:100% }
  .pieza--vertical .pieza__sobre{ position:static; padding:22px var(--margen) 0 }
  .cifra{ flex:1 1 44%; border-left:0; padding:0 0 26px }
}

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important }
  .cap{ opacity:1; transform:none }
}

/* ── encabezado de caso ─────────────────────────────────── */
.encab{ padding:calc(var(--aire) + 60px) var(--margen) var(--aire); background:var(--marina-900) }
.encab h1{ margin-top:22px; max-width:18ch }

/* -- bloque de dos columnas (caso Viva Queretaro) --------- */
.duo{ display:flex; gap:clamp(26px,5vw,80px); align-items:flex-start;
  padding:0 var(--margen) var(--aire); background:var(--marina-900) }
.duo__media{ flex:0 0 clamp(240px,26vw,380px); position:sticky; top:96px }
.duo__media video{ width:100%; height:auto; background:var(--marina) }
.duo__txt{ flex:1 1 380px }
.tramo{ padding:clamp(28px,5vh,56px) 0; border-top:1px solid rgba(255,255,255,.12) }
.tramo:first-child{ border-top:0; padding-top:0 }
.tramo h3{ margin:12px 0 14px }
.tramo p{ color:rgba(255,255,255,.76); max-width:52ch }

@media (max-width:860px){
  .duo{ flex-direction:column }
  .duo__media{ position:static; flex:1 1 auto; width:100%; max-width:340px; margin:0 auto }
}

/* -- galeria de laminas (caso AIQ) ------------------------ */
.galeria{ padding:0 var(--margen) var(--aire); background:var(--marina-900) }
.lamina{ margin:0 0 var(--aire) }
.lamina img{ width:100%; height:auto; background:var(--marina) }
.lamina--par{ display:grid; grid-template-columns:1fr 1fr; gap:1px }
.lamina--par figcaption{ grid-column:1 / -1 }
.lamina figcaption{ padding-top:22px; max-width:56ch }
.lamina figcaption h3{ margin:12px 0 14px }
.lamina figcaption p:last-child{ color:rgba(255,255,255,.76) }

@media (max-width:860px){ .lamina--par{ grid-template-columns:1fr } }

/* ── remate final ───────────────────────────────────────── */
.cierre .remate{ max-width:20ch; margin:0 auto 38px; font-size:clamp(1.6rem,3.4vw,2.7rem);
  /* 1.42 para que la caja del acento —mas grande que el resto por ir a 1.24em—
     quepa completa dentro del renglon y su raya no alcance la linea de abajo. */
  line-height:1.42; color:#fff }


@media (max-width:860px){
  /* Aqui la forma de cada azulejo se fija con aspect-ratio y no con alturas de
     fila: con alturas, la proporcion cambiaba con el ancho de la pantalla — a
     820 px salia apaisado y a 375 px retrato — y ninguna imagen encuadraba bien
     en las dos. Fijandola, el recorte es predecible y la consulta de medios de
     <picture> puede servir el encuadre correcto. */
  .mosaico{ grid-template-columns:repeat(2,1fr); grid-auto-rows:auto }
  .pz:nth-child(4n+1){ grid-column:1 / 3; grid-row:auto; aspect-ratio:16 / 10 }
  .pz:nth-child(4n+2){ grid-column:1 / 3; grid-row:auto; aspect-ratio:3 / 2 }
  .pz:nth-child(4n+3){ grid-column:1 / 2; grid-row:auto; aspect-ratio:1 / 1 }
  .pz:nth-child(4n+4){ grid-column:2 / 3; grid-row:auto; aspect-ratio:1 / 1 }
  /* Los acomodos de pocos casos tampoco aplican aqui: todo se apila. */
  .mosaico--1 .pz:nth-child(1),.mosaico--2 .pz:nth-child(1),.mosaico--2 .pz:nth-child(2),
  .mosaico--3 .pz:nth-child(1),.mosaico--3 .pz:nth-child(2),.mosaico--3 .pz:nth-child(3){
    grid-column:1 / 3; grid-row:auto }
}

/* -- enfasis del hero: la palabra subrayada en plata ------ */
.tapa__txt .et em{ font-style:normal; color:#fff }
.tapa__txt h1 em{ font-style:normal; color:var(--plata);
  border-bottom:1px solid var(--plata); padding-bottom:.06em }
.tapa__sub{ color:rgba(255,255,255,.86) }

.pie-nota a{ color:var(--plata) }
.pie-nota a:hover{ color:var(--plata-viva) }
.quienes .cifras{ padding-left:0; padding-right:0 }
.quienes .pie-nota{ padding-left:0; padding-right:0 }

/* -- pagina de caso: encabezado, capitulos y pieza -------- */
/* El titular es el logro, no el nombre del cliente: eso va arriba en chico. */
.encab .et{ margin:0 0 24px }
.encab h1{ margin:0 0 34px; max-width:19ch }
.encab .ficha{ margin:0; padding-top:22px; border-top:1px solid rgba(255,255,255,.16) }
.rotulo{ padding:var(--aire) var(--margen) 26px; background:var(--marina-900) }

/* Un numero, dos palabras y un parrafo. El mismo esqueleto en todos los casos. */
.capitulo{ padding:calc(var(--aire) * .78) var(--margen) 0; background:var(--marina-900) }
.capitulo__cab{ display:flex; align-items:baseline; gap:clamp(16px,3vw,34px); flex-wrap:wrap }
.capitulo__n{ font-size:clamp(1.05rem,1.6vw,1.3rem); color:var(--plata-honda);
  letter-spacing:.12em; font-variant-numeric:tabular-nums }
.capitulo h2{ font-size:clamp(1.5rem,2.6vw,2.1rem) }
.capitulo p{ max-width:56ch; margin-top:26px; color:rgba(255,255,255,.82);
  font-size:clamp(1rem,1.5vw,1.13rem) }

/* El caso va alternando: un capitulo, su imagen, otro capitulo, su imagen. */
.capitulo + .galeria{ padding-top:calc(var(--aire) * .5) }
.galeria--sangre{ padding-left:0; padding-right:0 }
.galeria--sangre .lamina{ margin-bottom:0 }
.galeria--sangre .lamina figcaption{ padding-left:var(--margen); padding-right:var(--margen) }
.lamina video{ width:100%; height:auto; background:var(--marina) }
/* Una lamina a sangre nunca puede pasar de una pantalla: si la proporcion de la
   imagen la haria mas alta, se recorta en lugar de obligar a bajar dos veces. */
.galeria--sangre .lamina img,
.galeria--sangre .lamina video{ max-height:86svh; object-fit:cover }
.lamina--tres{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px }
/* En fila, cada celda toma la misma proporcion y recorta: el material casi
   nunca viene del mismo tamano y si no, la fila queda con escalones. */
.lamina--par img, .lamina--par video,
.lamina--tres img, .lamina--tres video{ aspect-ratio:3/2; object-fit:cover; height:auto }
.lamina--tres figcaption{ grid-column:1 / -1 }
@media (max-width:860px){ .lamina--tres{ grid-template-columns:1fr } }
/* El pie de una lamina puede irse a dos renglones; la etiqueta suelta va con
   interlineado 1 y se encimaria. */
.lamina figcaption .et{ line-height:1.7 }

/* La pieza terminada: ancho completo, con controles, sin arrancar sola. */
.pieza{ padding:calc(var(--aire) * .78) var(--margen) 0; background:var(--marina-900) }
.pieza video{ width:100%; height:auto; background:var(--marina) }
.pieza .et{ padding-top:14px }

/* -- hero: el nombre grande con la palabra que rota ------- */
.marca{ font-size:clamp(2rem,5.6vw,4.4rem); line-height:1.05; letter-spacing:.01em;
  margin:0; text-shadow:0 2px 40px rgba(6,11,24,.55) }
.marca .gira{
  display:inline-block; color:var(--plata); text-align:left;
  white-space:nowrap; vertical-align:baseline;
  /* Sin overflow:hidden a proposito: el ancho tarda .45s en llegar y el texto
     cambia antes, asi que recortar aqui le comia las ultimas letras a la
     palabra nueva durante la transicion. Al ir al final de la linea, que se
     salga de su caja medio segundo no estorba a nadie. */
  /* La palabra que cambia va en la itálica con remates, la misma de los dos
     acentos del lema: contra la geométrica de "Business Road" se despega sola,
     sin necesidad de negritas ni de otro color. */
  font-family:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-style:italic; font-weight:500; font-size:1.42em; letter-spacing:.005em;
  transition:opacity .35s, transform .35s, width .45s cubic-bezier(.4,0,.2,1);
}
.marca .gira.fuera{ opacity:0; transform:translateY(-.18em) }
.tapa__lema{ margin:26px auto 0; font-size:clamp(1rem,1.8vw,1.4rem); line-height:1.5;
  color:rgba(255,255,255,.84); max-width:42ch }


@media (prefers-reduced-motion:reduce){ .marca .gira{ transition:none } }

/* -- los dos acentos del discurso: destino y camino -------
   Unica excepcion a la voz de una sola tipografia. Son dos palabras en toda
   la pagina; la italica con remates contra la geometrica es lo que las hace
   saltar sin recurrir a negritas, que el sistema no permite. */
.acento{
  font-family:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-style:italic; font-weight:500;
  font-size:1.24em;
  /* line-height:0 apretaba el renglon y hacia que la raya cayera sobre el
     texto siguiente; con 0.9 el acento sigue sin estirar la linea pero la
     raya se queda en su sitio. */
  line-height:0.9;
  color:var(--plata-viva);
  letter-spacing:.01em;
}
/* La raya va como text-decoration y no como border-bottom: el borde cuelga de
   la caja del renglon y, en un titular de varias lineas, aterrizaba encima del
   texto de abajo. Asi se coloca respecto a la base de la letra y no invade. */
.acento--raya{
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.10em;
  text-decoration-color:var(--plata);
}

/* -- el destello con el que aterriza en "Media" -----------
   Plata de verdad: un reflejo que barre las letras una sola vez y se queda.
   Va dentro de @supports porque sin recorte de fondo sobre texto el relleno
   transparente dejaria la palabra invisible. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  /* La palabra es metal, no texto plata: la plata plana se ve gris. El
     degradado se queda puesto siempre, con sus dos filos oscuros y su banda
     de luz al centro, como una placa pulida. */
  .marca .gira{
    background:linear-gradient(96deg,
      #7C8798 0%, #A9B4C4 12%, #EEF2F7 26%, #FFFFFF 36%,
      #C6D0DE 48%, #8792A4 60%, #EEF2F7 76%, #C6D0DE 88%, #7C8798 100%);
    background-size:230% 100%;
    background-position:52% 0;
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
  }
  /* Al aterrizar en "Media" el reflejo barre una vez y se acomoda en reposo. */
  .marca .gira.brilla{ animation:destello 1.9s cubic-bezier(.22,.7,.25,1) both }
}
@keyframes destello{
  from{ background-position:215% 0 }
  to  { background-position:52% 0 }
}
@media (prefers-reduced-motion:reduce){
  .marca .gira.brilla{ animation:none; background-position:52% 0 }
}

/* -- el camino que se traza en la seccion del proceso ------
   Una sola linea de plata con el guionado de una raya de carretera. Avanza con
   el scroll (--trazo la pone seq.js) y cada nodo se enciende cuando la linea le
   llega. Va dentro de .pasos para medir contra la caja real de los pasos. */
.pasos{ position:relative }
.trazo{ position:absolute; z-index:3; left:0; right:0; top:-40px; height:26px }
.trazo__linea{
  position:absolute; left:0; top:12px; width:100%; height:1px;
  background:repeating-linear-gradient(90deg, var(--plata) 0 15px, transparent 15px 29px);
  transform:scaleX(var(--trazo,0)); transform-origin:0 50%;
}
/* El centrado va por transform y no por margen negativo: con margenes habia
   que corregirlos distinto en cada orientacion y el modo vertical quedaba 6 px
   abajo de su numero. Asi, left/top marcan el punto exacto y el nodo se centra
   solo en los dos casos. */
.trazo__nodo{
  position:absolute; top:12.5px; width:13px; height:13px;
  border:1px solid var(--plata-honda); background:var(--marina-900);
  transform:translate(-50%,-50%) rotate(45deg) scale(.72); opacity:.35;
  transition:opacity .45s, transform .45s cubic-bezier(.2,.7,.3,1), background .45s, border-color .45s;
}
.trazo__nodo.on{
  opacity:1; transform:translate(-50%,-50%) rotate(45deg) scale(1);
  background:var(--plata); border-color:var(--plata-viva);
}

/* Apilados: la misma linea, pero bajando por el costado y tocando cada paso. */
.trazo--vertical{ left:14px; right:auto; top:0; bottom:0; width:14px; height:auto }
.trazo--vertical .trazo__linea{
  left:6px; top:0; width:1px; height:100%;
  background:repeating-linear-gradient(180deg, var(--plata) 0 15px, transparent 15px 29px);
  transform:scaleY(var(--trazo,0)); transform-origin:50% 0;
}
.trazo--vertical .trazo__nodo{ left:6.5px }

@media (max-width:860px){
  .paso{ padding-left:50px }
}
@media (prefers-reduced-motion:reduce){
  .trazo__linea{ transform:none }
  .trazo__nodo{ opacity:1; transform:translate(-50%,-50%) rotate(45deg) }
}

/* -- soluciones en celular: el vidrio cubre toda la pantalla --------------
   La toma esta compuesta a lo ancho y en un telefono se le va casi todo el
   encuadre. Puesta detras de una franja pequena eso se notaba y ademas le
   peleaba al texto. Cubriendo la pantalla entera el problema se disuelve
   solo: a 34 px de desenfoque la toma deja de leerse como un encuadre mal
   recortado y pasa a ser textura, que es lo unico que puede ser aqui.

   La lista se queda con toda la seccion, y el resaltado lo sigue mandando el
   scroll igual que en escritorio. */
@media (max-width:860px){
  .sol__fijo{ min-height:auto }
  /* De lado a lado el degradado ya no sirve: el texto ocupa el ancho completo,
     asi que el velo carga de arriba hacia abajo. */
  .sol__velo{ background:linear-gradient(180deg,
    rgba(6,11,24,.18) 0%, rgba(6,11,24,.26) 45%, rgba(6,11,24,.34) 100%) }
  .sol__panel{ inset:0; width:auto; justify-content:center;
    padding:var(--aire) var(--margen);
    /* Sin borde derecho que desvanecer: el vidrio no termina a media pantalla. */
    -webkit-mask-image:none; mask-image:none }
  .sol__panel .insight{ padding:12px 0 }
  .sol__panel .insight span{ font-size:.84rem; line-height:1.48 }
}


/* -- primer acto de la portada: arranque del recorrido ----
   La lente sola dejaba una pantalla sin nada que hacer. Este bloque va anclado
   abajo, no al centro, porque el barril trae grabado "BRM Studio" justo en
   medio y encimarle texto seria la marca dos veces. */
/* La regla base .cap lleva pointer-events:none para que las leyendas no
   estorben sobre el video. El bloque de arranque usa esa misma clase, asi que
   su boton tampoco recibia el clic: aqui se le devuelve, pero solo al boton y
   solo cuando esta encendido. El contenedor sigue sin capturar nada, para no
   volverse una capa invisible sobre toda la portada. */
.tapa .tapa__txt{ pointer-events:none }
.tapa .tapa__txt.on .btn{ pointer-events:auto }

/* Con .tapa delante para ganarle a `.tapa .tapa__txt`, que centra vertical. */
.tapa .tapa__inicio{ justify-content:flex-end; padding-bottom:clamp(48px,9vh,96px) }
.tapa .tapa__inicio .et{ margin-bottom:26px }
.tapa .tapa__inicio .btn{ padding:15px 32px; letter-spacing:.22em }

/* La guia de scroll: un destello que baja por una linea de 1px, con el mismo
   vocabulario de la raya de carretera. */
.baja{ position:relative; display:block; width:1px; height:56px; margin-top:34px;
  background:rgba(255,255,255,.16); overflow:hidden }
.baja i{ position:absolute; left:0; top:0; width:1px; height:40%;
  background:linear-gradient(180deg, transparent, var(--plata-viva));
  animation:baja 2.4s cubic-bezier(.55,0,.45,1) infinite }
@keyframes baja{
  0%   { transform:translateY(-100%) }
  60%  { transform:translateY(250%) }
  100% { transform:translateY(250%) }
}

/* Salto suave al dar clic en el boton, sin romper el scroll dirigido. */
html{ scroll-behavior:smooth }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  .baja i{ animation:none; height:100%; opacity:.5 }
}