/* ==========================================================================
   TRINITY — WEB & E-COMMERCE

   Solo lo propio de esta solución. El resto vive en
   shared/funnel-industria.css, igual que Apps y Facturación.
   ========================================================================== */

/* ==========================================================================
   PIEZAS — ventana de navegador y teléfono.

   Proporciones reales, no aproximadas:
   · Teléfono: iPhone 15 (71,6 × 147,6 mm, pantalla 390 × 844 pt, 19,5:9).
     Todo se mide en cqw (ancho del propio teléfono), así el marco, los
     radios y la isla dinámica escalan juntos a cualquier tamaño.
   · Las capturas de celular son 390 × 844 a 2x, recortadas a 440 × 952:
     la pantalla entera, sin barra de estado.
   · Ventana de escritorio: esquinas redondeadas de ventana, no el chaflán
     de marca (el chaflán es para fotos y tarjetas, no para una pantalla).
   ========================================================================== */

.web-browser{
  display:block;overflow:hidden;
  border-radius:clamp(8px,.9vw,12px);
  background:#fff;
  box-shadow:
    0 0 0 1px rgba(20,24,38,.10),
    0 30px 70px -18px rgba(20,24,38,.35),
    0 12px 26px -16px rgba(20,24,38,.25);
}
.sec--navy .web-browser{box-shadow:0 0 0 1px rgba(255,255,255,.08),0 40px 90px -24px rgba(0,0,0,.7)}
.web-browser__bar{
  display:flex;align-items:center;gap:6px;height:clamp(22px,2.2vw,30px);padding:0 clamp(10px,1vw,14px);
  background:#eceef2;border-bottom:1px solid #dfe2e8;color:var(--c-gray);
}
.web-browser__bar i{width:clamp(6px,.6vw,9px);aspect-ratio:1;border-radius:50%;background:#ff5f57}
.web-browser__bar i:nth-child(2){background:#febc2e}
.web-browser__bar i:nth-child(3){background:#28c840}
.web-browser__bar b{
  flex:0 1 46%;margin-inline:auto;padding:3px 10px;border-radius:6px;background:#fff;
  font:500 clamp(8px,.75vw,11px)/1.2 var(--f-text);text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.web-browser__bar::after{content:"";width:clamp(34px,3.4vw,48px)}

.web-fono{
  container-type:inline-size;
  position:relative;display:block;
  aspect-ratio:71.6/147.6;
  /* Porcentajes y no cqw: las unidades de contenedor del propio elemento
     se miden contra su padre. Horizontal sobre el ancho, vertical sobre el alto. */
  border-radius:16% / 7.8%;
  background:linear-gradient(157deg,#4A5368 0%,#171C2A 14%,#0B0E17 50%,#171C2A 86%,#4A5368 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    0 28px 56px -18px rgba(0,0,0,.55),
    0 10px 22px -14px rgba(0,0,0,.45);
}
/* Sobre azul noche el chasis oscuro se perdía: filo de titanio más claro. */
.sec--navy .web-fono{
  background:linear-gradient(157deg,#8B93A7 0%,#2A3142 12%,#0E121C 50%,#2A3142 88%,#8B93A7 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.22),0 30px 60px -16px rgba(0,0,0,.8);
}
/* Botones: acción y volumen a la izquierda, encendido a la derecha. */
.web-fono::before,
.web-fono::after{content:"";position:absolute;width:1.4cqw;background:linear-gradient(#58627A,#262D3D)}
.web-fono::before{left:-1.2cqw;top:22%;height:12%;border-radius:1cqw 0 0 1cqw;box-shadow:0 -9cqw 0 -.1cqw #3a4256}
.web-fono::after{right:-1.2cqw;top:27%;height:16%;border-radius:0 1cqw 1cqw 0}

.web-fono__screen{
  position:absolute;inset:3.4cqw;display:block;overflow:hidden;
  border-radius:12.6cqw;
  background:var(--pantalla,#fff);
}
/* La captura empieza debajo de la barra de estado, como en un teléfono real. */
.web-fono__screen img{
  position:absolute;left:0;top:11cqw;
  width:100%;height:auto;aspect-ratio:440/952;
}
/* Isla dinámica. */
.web-fono__notch{
  position:absolute;z-index:3;top:3.2cqw;left:50%;
  width:31cqw;height:9cqw;transform:translateX(-50%);
  border-radius:9cqw;background:#05070c;
}

/* ==========================================================================
   01 · HERO — Consul en escritorio, Britania y Solución Lab en celular.
   Las capas tienen posición absoluta dentro de una caja con proporción fija:
   CLS cero aunque las imágenes tarden.
   ========================================================================== */

@media(min-width:981px){
  .hero__grid:has(.web-hero__stack){grid-template-columns:1fr 1.05fr}
  /* La composición sale del contenedor hacia el borde derecho: Consul se
     lee grande sin robarle ancho al titular. */
  .web-hero__stack{margin-right:calc(min(140px, (100vw - min(var(--w-page), 100vw)) / 2 + var(--s-gutter) - 24px) * -1)}
  .hero:has(.web-hero__stack){overflow-x:clip}
}
.web-hero__stack{aspect-ratio:10/7.1;align-self:start;margin-top:clamp(0px,3vw,48px)}
.web-hero__stack .hero__frame{inset:10% -22px 2% 12%}

.web-hero__desk{position:absolute;z-index:1;left:0;top:0;width:90%}
.web-hero__desk img{display:block;width:100%;height:auto;aspect-ratio:1425/891;object-fit:cover;object-position:top left}

/* A escala: un teléfono de 7 cm junto a una pantalla de ~30 cm. */
.web-hero__phone{position:absolute;z-index:2;width:19%}
.web-hero__phone--a{right:17%;bottom:0}
.web-hero__phone--b{right:0;bottom:5%}
.hero__trust b{color:var(--c-navy)}

/* Entrada: el escritorio primero, los celulares suben después. */
.f-js .web-hero__stack .web-hero__phone{opacity:0;transform:translateY(32px)}
.f-js .web-hero__stack.is-visible .web-hero__phone{
  opacity:1;transform:none;
  transition:opacity .6s var(--ease),transform .8s var(--ease);
}
.f-js .web-hero__stack.is-visible .web-hero__phone--a{transition-delay:.22s}
.f-js .web-hero__stack.is-visible .web-hero__phone--b{transition-delay:.38s}

@media(max-width:980px){
  .web-hero__stack{width:min(680px,100%);margin-inline:auto}
  .web-hero__stack img{height:auto}
}
@media(max-width:560px){
  .web-hero__stack{aspect-ratio:10/9}
  .web-hero__stack .hero__frame{display:none}
  .web-hero__desk{width:100%}
  .web-hero__phone{width:24%}
  .web-hero__phone--a{right:22%}
  .web-hero__phone--b{right:2%}
  .web-browser__bar{height:22px}
  .web-browser__bar b{font-size:9px}
}

/* ==========================================================================
   03 · FORMATOS — tres columnas. El e-Commerce va en azul noche: es el
   formato con más alcance, no el "recomendado".
   ========================================================================== */

.web-formats{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2vw,24px);margin-top:clamp(44px,5vw,72px);
}
.web-format{
  display:flex;flex-direction:column;
  padding:clamp(24px,2.6vw,36px);
  background:var(--c-white);border:1px solid var(--c-line);border-top:3px solid var(--c-navy);
  transition:transform var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease);
}
.web-format:hover{transform:translateY(-4px);box-shadow:var(--e-2)}
.web-format header{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);margin-bottom:var(--s-8)}
.web-format header span{
  font:700 var(--t-meta)/1.2 var(--f-text);letter-spacing:.08em;text-transform:uppercase;color:var(--c-red-on-light);
}
.web-format h3{font-size:var(--t-h3);margin-bottom:var(--s-3)}
.web-format>p{font-size:var(--t-sm);color:var(--c-gray)}
.web-format dl{margin:var(--s-6) 0 var(--s-8);padding-top:var(--s-4);border-top:1px solid var(--c-line)}
.web-format dt{font:700 var(--t-meta)/1.4 var(--f-text);letter-spacing:.08em;text-transform:uppercase;color:var(--c-navy)}
.web-format dd{margin:4px 0 0;font-size:var(--t-sm);color:var(--c-gray)}
.web-format__link{
  margin-top:auto;display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  padding-bottom:4px;border-bottom:2px solid var(--c-red);
  font:700 var(--t-sm)/1.2 var(--f-text);color:var(--c-navy);text-decoration:none;
}
.web-format__link span{transition:transform var(--dur-base) var(--ease)}
.web-format__link:hover span{transform:translateX(4px)}

.web-format--dark{background:var(--c-navy);border-color:var(--c-navy);border-top-color:var(--c-red-bright)}
.web-format--dark h3,.web-format--dark dt{color:#fff}
.web-format--dark>p,.web-format--dark dd{color:var(--c-on-dark-2)}
.web-format--dark .ico{stroke:#fff;color:#fff}
.web-format--dark header span{color:var(--c-red-on-dark)}
.web-format--dark dl{border-top-color:var(--c-line-dark-2)}
.web-format--dark .web-format__link{color:#fff;border-bottom-color:var(--c-red-bright)}

@media(max-width:980px){
  .web-formats{grid-template-columns:1fr}
  .web-format header{margin-bottom:var(--s-5)}
}

/* ==========================================================================
   04 · VITRINA — un proyecto por vez, escritorio + celular.

   El cambio de proyecto es un barrido: la captura nueva entra recortada
   desde la derecha sobre la anterior (misma familia que los barridos de la
   capa de sensación del sitio). El texto sube entero y en poco
   tiempo, para no competir con la imagen.
   ========================================================================== */

.vitrina{overflow:hidden}
.vitrina__head{
  display:grid;grid-template-columns:1fr auto;gap:var(--s-6) var(--s-10);align-items:end;
}
.vitrina__head h2{max-width:16ch}
.vitrina__filters{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.vitrina__filters button{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;
  border:1px solid var(--c-line-dark-2);background:transparent;color:var(--c-on-dark);
  font:700 var(--t-sm)/1 var(--f-text);cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.vitrina__filters button span{color:var(--c-on-dark-3);font-size:var(--t-xs);font-variant-numeric:tabular-nums}
.vitrina__filters button:hover{border-color:#fff}
.vitrina__filters button[aria-pressed=true]{background:#fff;border-color:#fff;color:var(--c-navy)}
.vitrina__filters button[aria-pressed=true] span{color:var(--c-red-on-light)}

.vitrina__stage{
  display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:clamp(32px,5vw,80px);align-items:center;
  margin-top:clamp(40px,5vw,72px);
}

/* --- Texto --------------------------------------------------------------- */
.vitrina__count{
  display:flex;align-items:baseline;gap:8px;margin:0 0 var(--s-8);
  font:500 var(--t-sm)/1 var(--f-mono);color:var(--c-on-dark-3);font-variant-numeric:tabular-nums;
}
.vitrina__count b{font:700 clamp(40px,4.4vw,64px)/1 var(--f-display);color:#fff;letter-spacing:-.04em}
.vitrina__text{min-height:clamp(200px,17vw,240px)}
.vitrina__type{
  margin:0 0 var(--s-3);
  font:700 var(--t-meta)/1.3 var(--f-text);letter-spacing:.12em;text-transform:uppercase;color:var(--c-red-on-dark);
}
.vitrina__name{
  margin:0;color:#fff;
  font:800 clamp(38px,4.6vw,68px)/1 var(--f-display);letter-spacing:var(--ls-display);
  text-wrap:balance;
}
.vitrina__desc{margin:var(--s-5) 0 0;max-width:38ch;font-size:var(--t-lead);line-height:1.55;color:var(--c-on-dark-2)}

.vitrina__text.is-out>*{opacity:0;transform:translateY(-10px)}
.vitrina__text.is-in>*{animation:v-text-in .55s var(--ease) both}
.vitrina__text.is-in>:nth-child(2){animation-delay:.05s}
.vitrina__text.is-in>:nth-child(3){animation-delay:.1s}
.vitrina__text>*{transition:opacity .18s var(--ease),transform .18s var(--ease)}
@keyframes v-text-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.vitrina__acts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-5);margin-top:var(--s-10)}
.vitrina__nav{display:flex;gap:8px}
.vitrina__arrow,.vitrina__play{
  display:grid;place-items:center;width:48px;height:48px;padding:0;
  border:1px solid var(--c-line-dark-2);border-radius:50%;background:transparent;color:#fff;
  font:600 18px/1 var(--f-text);cursor:pointer;
  transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.vitrina__arrow:hover,.vitrina__play:hover{background:#fff;border-color:#fff;color:var(--c-navy)}
/* Pausa (dos barras) o reproducir (triángulo), dibujado con CSS. */
.vitrina__play i{position:relative;display:block;width:12px;height:14px}
.vitrina__play i::before,.vitrina__play i::after{content:"";position:absolute;top:0;bottom:0;width:4px;background:currentColor}
.vitrina__play i::before{left:1px}
.vitrina__play i::after{right:1px}
.vitrina__play[aria-pressed=true] i::before{left:2px;width:0;height:0;background:none;border-style:solid;border-width:7px 0 7px 11px;border-color:transparent transparent transparent currentColor}
.vitrina__play[aria-pressed=true] i::after{display:none}

/* --- Dispositivos -------------------------------------------------------- */
.vitrina__devices{position:relative;padding:0 0 9% 0}
.vitrina__desk{
  position:relative;margin-left:10%;
  transition:transform .5s var(--ease);
}
.vitrina__desk:hover{transform:translateY(-4px)}
.vitrina__shot{position:relative;display:block;aspect-ratio:1425/891;overflow:hidden;background:#dfe2e8}
.vitrina__shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left}

.vitrina__phone{position:absolute;z-index:2;left:0;bottom:0;width:19%}

/* Barrido de la captura entrante: de derecha a izquierda. */
.vitrina__shot img.is-new,.web-fono__screen img.is-new{animation:v-wipe .75s cubic-bezier(.7,0,.2,1) both}
.web-fono__screen img.is-new{animation-delay:.12s}
@keyframes v-wipe{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}

/* --- Cinta de proyectos, con barra de avance del pase automático --------- */
.vitrina__rail{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,1fr);
  margin:clamp(48px,5vw,80px) 0 0;padding:0;list-style:none;
  border-top:1px solid var(--c-line-dark-2);
  overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;
}
.vitrina__rail::-webkit-scrollbar{display:none}
.vitrina__rail li{scroll-snap-align:start}
.vitrina__rail li[hidden]{display:none}
.vitrina__rail a{
  position:relative;display:grid;gap:4px;padding:18px 16px 16px 0;
  color:var(--c-on-dark-3);text-decoration:none;
  transition:color var(--dur-fast) var(--ease);
}
.vitrina__rail b{font:700 var(--t-sm)/1.2 var(--f-display);white-space:nowrap}
.vitrina__rail small{font:700 10px/1 var(--f-text);letter-spacing:.1em;text-transform:uppercase;opacity:.7}
.vitrina__rail a:hover,.vitrina__rail a[aria-current=true]{color:#fff}
.vitrina__rail i{
  position:absolute;left:0;right:16px;top:-1px;height:2px;
  background:var(--c-red-bright);transform:scaleX(0);transform-origin:left;
}
.vitrina__rail a[aria-current=true] i{transform:scaleX(var(--p,1))}
.vitrina__rail a:focus-visible{outline:2px solid #fff;outline-offset:-2px}

@media(max-width:980px){
  .vitrina__head{grid-template-columns:1fr}
  .vitrina__filters{justify-content:flex-start}
  .vitrina__stage{grid-template-columns:1fr}
  .vitrina__devices{order:-1}
  .vitrina__count{margin-bottom:var(--s-5)}
  .vitrina__text{min-height:0}
  .vitrina__acts{margin-top:var(--s-8)}
}
@media(max-width:560px){
  .vitrina__filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--s-gutter) * -1);padding-inline:var(--s-gutter)}
  .vitrina__filters::-webkit-scrollbar{display:none}
  .vitrina__filters button{flex:none}
  .vitrina__desk{margin-left:14%}
  .vitrina__phone{width:24%}
  .vitrina__count b{font-size:36px}
  .vitrina__acts{gap:var(--s-4)}
  .vitrina__visit{width:100%}
  .vitrina__rail{grid-auto-columns:minmax(128px,auto)}
}
@media(prefers-reduced-motion:reduce){
  .vitrina__shot img.is-new,.web-fono__screen img.is-new,.vitrina__text.is-in>*{animation:none}
}

/* ==========================================================================
   05 · NO FUNCIONA COMO UNA ISLA — cadena de capas sobre azul noche.
   ========================================================================== */

.web-isla__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,80px);align-items:center}
.web-isla h2{max-width:16ch}
.web-isla .lead{margin-top:var(--s-6)}
.web-isla__note{
  margin:var(--s-8) 0;padding-left:var(--s-5);max-width:48ch;
  border-left:3px solid var(--c-red-bright);
  font-weight:600;color:#fff;
}

.web-cadena{display:grid;margin:0;padding:0;list-style:none}
.web-cadena li{
  position:relative;display:flex;align-items:center;gap:var(--s-5);
  padding:var(--s-5) var(--s-6);
  background:var(--c-navy-2);border:1px solid var(--c-line-dark-2);
}
.web-cadena li+li{margin-top:var(--s-8)}
.web-cadena li+li::before{
  content:"";position:absolute;left:50%;top:calc(var(--s-8) * -1);
  width:2px;height:var(--s-8);margin-left:-1px;background:var(--c-line-dark-2);
}
.web-cadena li+li::after{
  content:"";position:absolute;left:50%;top:-10px;width:9px;height:9px;margin-left:-5px;
  border-right:2px solid var(--c-red-bright);border-bottom:2px solid var(--c-red-bright);transform:rotate(45deg);
}
.web-cadena .ico{stroke:#fff;flex:none}
.web-cadena b{display:block;font:700 var(--t-h4)/1.25 var(--f-display);color:#fff}
.web-cadena span{display:block;margin-top:2px;font-size:var(--t-xs);color:var(--c-on-dark-2)}
.web-cadena li:last-child{background:#fff;border-color:#fff;border-top:3px solid var(--c-red-bright)}
.web-cadena li:last-child b{color:var(--c-navy)}
.web-cadena li:last-child span{color:var(--c-gray)}
.web-cadena li:last-child .ico{stroke:var(--c-navy)}

.f-js .web-cadena li+li::before{transform:scaleY(0);transform-origin:top}
.f-js [data-reveal].is-visible .web-cadena li+li::before{transform:none;transition:transform .4s var(--ease)}
.f-js [data-reveal].is-visible .web-cadena li:nth-child(3)::before{transition-delay:.12s}
.f-js [data-reveal].is-visible .web-cadena li:nth-child(4)::before{transition-delay:.24s}

@media(max-width:900px){
  .web-isla__grid{grid-template-columns:1fr}
}

/* ==========================================================================
   06 · CAPACIDADES POSIBLES — chips.
   ========================================================================== */

.web-chips{display:flex;flex-wrap:wrap;gap:var(--s-3);margin:clamp(40px,5vw,64px) 0 0;padding:0;list-style:none}
.web-chips li{
  padding:12px 18px;border:1px solid var(--c-line-strong);background:var(--c-white);
  font:600 var(--t-sm)/1.2 var(--f-text);color:var(--c-ink);
  transition:border-color var(--dur-base) var(--ease),color var(--dur-base) var(--ease);
}
.web-chips li:hover{border-color:var(--c-red);color:var(--c-navy)}

@media(prefers-reduced-motion:reduce){
  .f-js .web-hero__stack .web-hero__phone{opacity:1!important;transform:none!important}
  .f-js .web-cadena li+li::before{transform:none!important}
}