/* creatit · estilos del marquee de casos de éxito (componente común home + nosotros) */
/* full-bleed en cualquier página: ocupa todo el ancho y alinea la 1ª card con el contenido (padding-left = inset del contenedor) */
.work-marquee{position:relative;overflow-x:auto;overflow-y:hidden;padding:14px 0 14px clamp(22px,4vw,48px);scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;cursor:grab}
.work-marquee.dragging{cursor:grabbing}
.work-marquee::-webkit-scrollbar{display:none}
.wm-track{display:flex;width:max-content}
.work-card{flex:0 0 clamp(284px,26vw,344px);height:clamp(384px,36vw,452px);margin-right:14px;border-radius:24px;background:var(--bg) center/cover no-repeat,#1a1d28;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:26px;text-decoration:none;color:#fff;box-shadow:none;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.work-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,9,14,.5),rgba(8,9,14,.08) 36%,rgba(8,9,14,.72));pointer-events:none}
.work-card>*{position:relative;z-index:1}
@media(hover:hover){.work-card:hover{transform:translateY(-6px)}}
.work-name{font-family:'Inter Tight',Arial,sans-serif;font-size:clamp(22px,1.9vw,28px);font-weight:500;letter-spacing:-.02em;line-height:1.12;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;max-width:94%}

/* pie de card: dato a la izquierda (número grande + etiqueta debajo) · logo a la derecha */
.work-card>.work-foot{display:flex;flex-direction:row;align-items:flex-end;justify-content:space-between;gap:14px;position:static}
.work-stat{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;line-height:1}
.work-stat b{font-family:'Inter Tight',Arial,sans-serif;font-size:clamp(27px,2.7vw,36px);font-weight:600;letter-spacing:-.03em;line-height:1;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.3)}
.work-stat i{font-style:normal;display:block;font-size:10px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.82);line-height:1.22;max-width:15ch;text-wrap:balance;text-shadow:0 1px 10px rgba(0,0,0,.3)}

.work-logo{display:inline-flex;align-items:center;justify-content:center;width:clamp(118px,12vw,150px);height:54px;padding:0 15px;box-sizing:border-box;border-radius:13px;background:rgba(255,255,255,.08);backdrop-filter:blur(24px) saturate(1.3);-webkit-backdrop-filter:blur(24px) saturate(1.3);flex:0 0 auto}
.work-foot .work-logo{transform-origin:bottom right}
.work-card>.work-logo{align-self:flex-start;transform-origin:bottom left}
.work-logo img{height:30px;width:auto;max-width:100%;object-fit:contain;filter:brightness(0) invert(1);opacity:.97}
.work-marquee .work-logo img{transform:scale(1.02)}                            /* hero home: logos un punto mas grandes */
.work-brand{font-family:'Inter Tight',Arial,sans-serif;font-size:15px;font-weight:500;letter-spacing:-.01em;color:#fff;text-align:center;line-height:1.1}/* normalización óptica de logos de works (banda objetivo ~26-44px de alto) */
.work-logo img[src*="503614e641a2f53b9b478251bb925f3c198c1af3-360x36.png"]{height:18px}.work-logo img[src*="3eda1dab408b19c91cfa1a5c284ecdde8aeba448-300x37.png"],.work-logo img[src*="49940a12b24b3d0a0643679930227288adc5bc55-582x71.png"]{height:24px}/* Contasimple */
.work-logo img[src*="daee3eeddf872febfc9063bc5c3255b3bad41ab4-300x75.png"],/* Contasimple */
.work-logo img[src*="0b34574f44418117eb732efbb638254d4f149f62-763x192.png"]{height:30px}                     /* Sony Music */
.work-logo img[src*="muscari.png"]{height:29px}                               /* Muscari */
.work-logo img[src*="dipcuenca"]{height:40px}/* Dip. Cuenca (color propio) */
.work-logo img[src*="75a009619f892d2e47d071b336355e3fffd4c7ee-2201x639.png"]{height:30px}/* Hearthstone */
.work-logo img[src*="bbf01d61ed21ea6eafd3309fbcb65af80c4d4785-1469x936.png"]{height:30px}/* Blom */
.work-logo img[src*="b0d95448051fc173261c31b46b83e88c7409521f-1059x498.png"]{height:36px}                                  /* Hotelgest (script) */
.work-logo img[src$="/24.png"]{height:32px}/* Fina Garcia */
.work-logo img[src*="82f5df9e122ea46d718c656fdb69c6b953c3dac3-300x159.png"],/* Fina Garcia */
.work-logo img[src*="8b2220bc8df2f6ed935fbe7fe7a83a22ef10dae6-300x106.png"],/* Fina Garcia */
.work-logo img[src*="f822fd10ead201ec070e44447e09d927ebb147b9-730x387.png"]{height:36px}/* The Central House */
.work-logo img[src*="6930a99b4a047eaf6c53eeae349885ba6f0c0a20-300x300.png"],/* The Central House */
.work-logo img[src*="3b418cd74f5970298bf03aa2652aab0138b3dcdc-800x800.png"]{height:43px}/* Blue Banana */
.work-logo img[src*="1a10ca46fcc3c0fb54915c63aa69be17c9dd33cd-300x174.png"],/* Blue Banana */
.work-logo img[src*="2546d110ff58f8725863f39626597a7af63034eb-681x396.png"]{height:46px}/* Haier */
.work-logo img[src*="774718179e860d90c88a227f7798ab4f0dfa913d-300x155.png"],/* Haier */
.work-logo img[src*="300e8d9696bac29c8c5ccb485f0c9bd0712488c0-1726x890.png"]{height:39px}/* Aldous */
.work-logo img[src*="69383b78358999fed6eb3a114688d5adf081f2b4-348x217.png"],/* Aldous */
.work-logo img[src*="de588c3eec0e69a575dcfe4d09d3c93d355b4eaa-300x41.png"]{height:38px}/* Clouté */
.work-logo img[src*="2f1506e64f62acb713eb4971278046974faa58d5-300x140.png"],/* Clouté */
.work-logo img[src*="9bd08ae5ba886f9cfe3dc08b1e33cc6261d852ce-710x332.png"]{height:36px}/* Flopp */
.work-logo img[src*="789703cbcb4a3d44ec15f1525238ac3b79ef45df-300x60.png"],/* Flopp */
.work-logo img[src*="20699042d77115e688b8704ab02cb16b857f1435-1102x220.png"]{height:21px}
  .work-logo img[src*="0588f35516c1a49b7e1055fd417872640544de43-300x49.webp"]{height:18px}                          /* Roble */
.work-logo img[src*="aixam-white"]{height:39px}                               /* Aixam */
.work-logo img[src*="viver.svg"]{height:27px}                                 /* Víver */
.work-logo img[src*="shakers.svg"]{height:22px}                               /* Shakers */
@media(max-width:680px){.work-card{flex-basis:clamp(286px,86vw,360px);height:clamp(400px,118vw,508px);margin-right:16px;padding:26px}.work-name{font-size:26px}.work-stat b{font-size:33px}.work-stat i{font-size:11px}.work-logo{height:56px;width:clamp(124px,40vw,150px)}}

/* ---- filtros: chips claros bajo el hero, encima de la grid (como news) ---- */
.wk-fbar{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:clamp(28px,3.4vw,44px)}
.wk-fpill{border:1px solid var(--hair-l);background:transparent;color:var(--gray-l);border-radius:100px;padding:8px 16px;font-family:'Inter',Arial,sans-serif;font-size:13px;font-weight:500;cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.wk-fpill:hover{color:var(--ink-on-light);border-color:var(--gray-l2)}
.wk-fpill.is-on{background:var(--ink-on-light);color:#fff;border-color:var(--ink-on-light)}
.wk-empty{margin:clamp(30px,5vw,60px) 0;text-align:center;color:var(--gray-l);font-size:15px}

/* ---- grid de casos (página Works) ---- */
.works-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.4vw,22px)}
.works-grid .work-card{flex:none;width:100%;height:auto;aspect-ratio:4/5;margin:0;cursor:pointer;background:#1a1d28}
.works-grid .work-card .wg-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;background:#1a1d28}
/* el ::after del grid lo ocupa el velo de entrada: el degradado del marquee va en ::before (mismo gradiente que la home) */
.works-grid .work-card::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(8,9,14,.5),rgba(8,9,14,.08) 36%,rgba(8,9,14,.72));pointer-events:none;border-radius:inherit}
/* la card no se muestra hasta que su imagen esté lista; entonces se revela entera con un fade suave */
.works-grid .wg-card{transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
/* el fade lo hace un velo ::after (si se anima la opacity de la card, el backdrop-filter de las pills no puede muestrear el fondo y salen sin blur) */
.works-grid .wg-card::after{content:"";position:absolute;inset:0;z-index:6;background:var(--cream-2);opacity:1;transition:opacity .55s var(--ease);pointer-events:none}
.works-grid .wg-card.is-in::after{opacity:0}
/* forzar rasterizacion inmediata de la imagen al revelarse (Chrome pospone el pintado de imagenes grandes) */
.works-grid .wg-card.is-in .wg-bg{will-change:transform;transform:translateZ(0)}
/* escarcha propia: copia borrosa de la imagen de la card dentro de cada pill (el backdrop-filter
   real se rompe en Chrome mientras un ancestro anima transform/opacity, p.ej. el hover de la card) */
.works-grid .wg-pill,.works-grid .work-logo{position:relative;overflow:hidden;z-index:0;backdrop-filter:none;-webkit-backdrop-filter:none}
.works-grid .pill-frost{position:absolute;z-index:-1;background-size:cover;background-position:center;filter:blur(24px) saturate(1.3);pointer-events:none;background-color:#3a3e46}
.wg-hide{display:none!important}
/* pills de disciplinas (sustituyen a la cifra) */
.wg-tags{display:flex;flex-wrap:nowrap;gap:6px;min-width:0}
.works-grid .work-card>.work-foot{flex-direction:column-reverse;align-items:flex-start;gap:clamp(10px,1.2vw,14px)}
.works-grid .wg-pill{padding:5px 10px}
.wg-pill{font-family:'Inter',Arial,sans-serif;font-size:11px;font-weight:500;letter-spacing:.01em;color:#fff;background:rgba(255,255,255,.08);backdrop-filter:blur(24px) saturate(1.3);-webkit-backdrop-filter:blur(24px) saturate(1.3);border-radius:100px;padding:5px 11px;line-height:1.1;white-space:nowrap}
/* entrada suave y escalonada (en vez de aparecer de golpe) */
/* cards limpias: por defecto solo imagen + logo/blur; título y tags aparecen al pasar el cursor */
@media(hover:hover){
  .works-grid .work-card .work-name,
  .works-grid .work-card .wg-tags{opacity:0;transform:translateY(6px);transition:opacity .32s var(--ease),transform .32s var(--ease)}
  .works-grid .work-card:hover .work-name,.works-grid .work-card:focus-within .work-name,
  .works-grid .work-card:hover .wg-tags,.works-grid .work-card:focus-within .wg-tags{opacity:1;transform:none}
  .works-grid .work-name{text-shadow:none}
}
@media(max-width:1240px){.works-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:980px){.works-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){
  .works-grid{display:flex;grid-template-columns:none;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 calc(-1*clamp(22px,4vw,48px));padding:4px clamp(22px,4vw,48px) 10px}
  .works-grid::-webkit-scrollbar{display:none}
  .works-grid .work-card{flex:0 0 clamp(270px,78vw,330px);aspect-ratio:auto;height:clamp(400px,112vw,480px);scroll-snap-align:center;padding:24px;border-radius:22px}
  .works-grid .work-name{font-size:24px}
  .wg-pill{font-size:11.5px;padding:6px 12px}
  .works-grid .work-logo{height:52px;width:clamp(118px,38vw,148px)}
}
