/* Tipografía: Google Sans Flex en todo el sitio, salvo los títulos grandes de cada sección (.perfil-hero-name: "811digital",
   "Credenciales", "Productos"…), que siguen en Funnel Display. Antes el texto era Zalando Sans. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--fn:#141414;--bg:#fff;--txt:#1A1410;--txt2:#7A7570;--bdr:#e2e2e2;--hvr:#f5f5f3;--yellow:#f5c400;--case-blue:#2952ff;--pad:clamp(20px,4vw,64px)}
/* ↑ --fn es el color de marca (acento: header, tabs activos, bordes de tabla). Para este proyecto: negro + acento amarillo puntual */
html,body{background:var(--bg);color:var(--txt);font-family:'Google Sans Flex','Google Sans',sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}

/* === PAGE LOADER (progreso real izq->der, % en el borde, remate: la linea se expande y tapa todo de blanco) === */
.page-loader{position:fixed;inset:0;z-index:9999;background:#000;overflow:hidden}
.page-loader-wave{position:absolute;left:0;top:50%;width:100%;height:64px;transform:translateY(-50%);display:block}
.page-loader-line{position:absolute;left:0;top:50%;width:100%;height:2px;background:#fff;transform:translateY(-50%);opacity:0}
.page-loader.flat .page-loader-wave{opacity:0}
.page-loader.flat .page-loader-line{opacity:1}
.page-loader-pct{position:absolute;top:50%;left:0%;transform:translate(calc(-100% - 14px),-44px);font-family:'Google Sans Flex','Google Sans',sans-serif;font-size:16px;font-weight:300;color:#fff;white-space:nowrap;font-variant-numeric:tabular-nums} /* separado de la punta del hilo: 14px antes y 44px arriba */
.page-loader.done .page-loader-line{transition:height .6s cubic-bezier(.2,0,0,1);height:100vh} /* M3 emphasized decelerate */
.page-loader.done .page-loader-pct{transition:opacity .2s ease;opacity:0}
.page-loader.hide{opacity:0;pointer-events:none;transition:opacity .3s ease .1s}


/* === QUICK LINKS (prueba: arriba a la izquierda, solo home, scrollea con la pagina) === */
.quick-links{padding:28px var(--pad) 0;z-index:15;display:none;flex-direction:column;align-items:flex-start;gap:6px}
body.home-active .quick-links{display:flex}
.quick-link-title{font-family:'Google Sans Flex','Google Sans',sans-serif;font-size:13px;font-weight:700;color:var(--txt);margin-bottom:2px}
.quick-link{background:none;border:none;padding:0;margin:0;font-family:'Google Sans Flex','Google Sans',sans-serif;font-size:13px;font-weight:400;color:var(--txt);cursor:pointer;text-decoration:none;text-align:left}
.quick-link:hover{text-decoration:underline;text-underline-offset:3px}
.home-top-bar{display:none;height:22px;background:var(--fn);color:#fff;align-items:center;justify-content:center;padding:0 var(--pad);font-family:'Google Sans Flex','Google Sans',sans-serif;font-size:13px;font-weight:400}
body.home-active .home-top-bar{display:flex}
.home-scroll-bar{position:fixed;top:0;left:0;right:0;height:44px;background:var(--fn);color:#fff;display:flex;align-items:center;padding:0 var(--pad);z-index:30;transform:translateY(-100%);transition:transform .3s ease}
.home-scroll-bar.show{transform:translateY(0)}
.home-scroll-menu{position:relative;z-index:1;background:none;border:none;padding:6px 10px;margin:0 0 0 -10px;border-radius:3px;font-family:'Google Sans Flex','Google Sans',sans-serif;font-size:13px;font-weight:400;color:#fff;cursor:pointer;transition:background .2s ease}
.home-scroll-menu:hover{background:rgba(255,255,255,.14)}
.home-scroll-name{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:'Google Sans Flex','Google Sans',sans-serif;font-size:13px;font-weight:400;color:#fff;white-space:nowrap}

/* === HEADER (barra única blanca, altura tipo referencia) === */
.rhdr{background:#fff;position:sticky;top:0;z-index:20;height:95px}
body.home-active .rhdr{display:none}
.rhdr-in{width:100%;height:100%;padding:0 var(--pad);position:relative;display:flex;align-items:center}
.rhdr-name{font-family:'Google Sans Flex','Google Sans',sans-serif;font-size:14px;font-weight:400;color:var(--txt);letter-spacing:.01em;white-space:nowrap;background:none;border:none;cursor:pointer;padding:6px 4px}
.rhdr-right{display:flex;align-items:center;gap:22px;position:relative;margin-left:auto}
.rhdr-center-name{display:none}

/* === CERRAR (solo visible en fichas de caso) === */
.menu-toggle{display:none;align-items:center;gap:10px;background:none;border:none;border-radius:3px;cursor:pointer;font-family:'Google Sans Flex','Google Sans',sans-serif;font-size:14px;font-weight:400;color:var(--txt);padding:6px 10px;transition:background .2s ease}
body.case-active .menu-toggle{display:inline-flex}
.menu-toggle:hover{color:var(--fn);background:var(--hvr)}
.menu-toggle .material-symbols-outlined{font-size:18px;line-height:1}

/* En las fichas de caso, el topbar pasa a negro, fijo y más bajo, para continuar con el hero */
body.case-active .rhdr{background:var(--fn);height:44px;position:fixed;top:0;left:0;right:0;z-index:25}
body.case-active .rhdr-name{color:#fff;font-size:13px}
body.case-active .rhdr-center-name{display:block;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:'Google Sans Flex','Google Sans',sans-serif;font-size:13px;font-weight:400;color:#fff;white-space:nowrap}
body.case-active .menu-toggle{color:#fff}
body.case-active .menu-toggle:hover{color:rgba(255,255,255,.85);background:rgba(255,255,255,.14)}
@media(max-width:600px){.rhdr{height:64px}body.case-active .rhdr{height:40px}}

/* === PERFIL HERO (nombre grande, tipografía original, solo home) === */
.perfil-hero{width:100%;background:#fff;padding:122px var(--pad) 40px;overflow:hidden}
.perfil-hero-name{display:block;font-family:'Funnel Display',sans-serif;font-weight:600;font-size:clamp(55px,10vw,288px);letter-spacing:-.02em;line-height:.95;color:var(--txt);white-space:nowrap}
@media(max-width:700px){.perfil-hero-name{white-space:normal;font-size:clamp(50px,16.25vw,110px)}}
.perfil-hero-bio{max-width:720px;margin-top:32px}
.perfil-hero-bio p{font-size:16px;line-height:1.7;color:var(--txt2);margin-bottom:16px}
.perfil-hero-bio p:last-child{margin-bottom:0}

/* === CONTENT SECTIONS === */
.rmod{display:none;border-bottom:1px solid var(--bdr)}.rmod.visible{display:block}
.rmod-inner{width:100%;padding:64px var(--pad)}
.rmod-eye{font-family:'Google Sans Flex','Google Sans',sans-serif;font-size:clamp(28px,4vw,40px);font-weight:600;letter-spacing:-1px;text-transform:none;color:var(--txt);display:block;margin-bottom:40px}
.rmd h2{display:block;font-family:'Google Sans Flex','Google Sans',sans-serif;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;margin:64px 0 12px;color:var(--txt2)}.rmd h2:first-child{margin-top:0}
.bio-cols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 40px;width:100%;max-width:none;align-items:start;margin-top:-36px}
.bio-cols p{max-width:none;margin-bottom:32px}
.bio-col h3{font-family:'Google Sans Flex','Google Sans',sans-serif;font-size:15px;font-weight:600;letter-spacing:-.01em;margin:0 0 12px;color:var(--txt)}
@media(max-width:900px){.bio-cols{grid-template-columns:1fr;gap:40px 0}}
.ver-mas{display:inline-flex;align-items:center;gap:5px;padding:5px 7px;margin:-4px 0 0 -7px;border:none;border-radius:3px;background:none;font-family:'Google Sans Flex','Google Sans',sans-serif;font-size:14px;line-height:1;font-weight:600;color:var(--txt);cursor:pointer;white-space:nowrap;text-align:left;text-decoration:underline;text-underline-offset:2px;transition:background .2s ease}
.ver-mas:hover{background:var(--hvr)}
.ver-mas svg{display:none}

/* ===== STACK LATERAL ===== */
.side-stack{position:fixed;inset:0;z-index:60;visibility:hidden;pointer-events:none}
.side-stack.open{visibility:visible;pointer-events:auto}
.side-stack-backdrop{position:absolute;inset:0;background:rgba(20,20,20,.4);opacity:0;transition:opacity .25s ease}
.side-stack.open .side-stack-backdrop{opacity:1}
.side-stack-panel{position:absolute;top:0;right:0;height:100%;width:min(560px,92vw);background:#fff;box-shadow:-24px 0 48px rgba(0,0,0,.18);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .3s ease}
.side-stack.open .side-stack-panel{transform:translateX(0)}
.side-stack-hdr{flex:0 0 auto;display:flex;justify-content:flex-end;padding:20px var(--pad);border-bottom:1px solid var(--bdr)}
.stack-close-btn{display:inline-flex}
.side-stack-body{flex:1 1 auto;overflow-y:auto;padding:32px var(--pad) 64px}
.side-stack-body h2{display:block;font-family:'Google Sans Flex','Google Sans',sans-serif;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;margin:0 0 24px;color:var(--txt2)}
.side-stack-body h3{margin-top:36px}
.side-stack-body h3:first-of-type{margin-top:36px}
@media(max-width:600px){
  .side-stack-panel{width:100%}
  .side-stack-hdr{padding:16px 20px}
  .side-stack-body{padding:24px 20px 48px}
}
.rmd h3{font-size:18px;font-weight:600;margin:30px 0 4px;font-family:'Google Sans Flex','Google Sans',sans-serif;}
.rmd h3:not(:first-of-type){margin-top:56px;padding-top:40px;border-top:1px solid var(--bdr)}
.rmd h3 em{font-family:'Google Sans Flex','Google Sans',sans-serif;font-style:normal;font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#fff;background:#d9d9d9;color:var(--txt);padding:2px 8px;margin-left:8px;vertical-align:middle}
.rmd h4{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--txt2);margin:24px 0 8px}
.rmd p.meta-line{font-size:12.5px;color:var(--txt2);margin:2px 0 10px}
.rmd p.subhead{font-size:19px;font-weight:700;letter-spacing:-.2px;margin:28px 0 8px;color:var(--txt)}
.rmd p{font-size:15px;line-height:1.72;margin-bottom:14px;color:var(--txt);max-width:820px}.rmd ul,.rmd ol{margin:0 0 14px 20px;max-width:820px}.rmd li{font-size:15px;line-height:1.65;margin-bottom:5px}
.rmd strong{font-weight:600}.rmd em{font-style:italic;color:var(--txt2)}
.rmd ul.chips{list-style:none;margin:0 0 14px 0;display:flex;flex-wrap:wrap;gap:6px;max-width:none}
.rmd ul.chips li{background:#ffe9a3;color:var(--txt);font-size:12.5px;font-weight:600;padding:4px 10px;margin:0}
.rmd p.metrics{font-size:13.5px;margin:0 0 14px;max-width:none}
.rmd p.metrics strong{background:var(--yellow);padding:2px 7px;margin-right:6px;display:inline-block}
.table-scroll{margin:20px 0;border:1px solid var(--bdr);overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:960px}
.rmd table{width:100%;min-width:480px;border-collapse:collapse;font-size:14px;border:none;margin:0}
.table-scroll table{border-radius:0}
.rmd th{background:var(--fn);color:#fff;padding:11px 14px;text-align:left;font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.07em}
.rmd td{padding:10px 14px;border-bottom:1px solid var(--bdr);vertical-align:top}
.rmd tr:last-child td{border-bottom:none}.rmd tr:nth-child(even) td{background:var(--hvr)}
.rmd blockquote{border-left:3px solid var(--yellow);padding:10px 18px;background:var(--hvr);margin:14px 0;max-width:820px}
.rmd hr{border:none;height:1px;background:var(--bdr);margin:36px 0}

.back-idx{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:10px 16px;border:1px solid var(--bdr);background:none;font-family:'Google Sans Flex','Google Sans',sans-serif;font-size:13px;font-weight:600;color:#8a6d00;cursor:pointer}
.back-idx:hover{background:var(--hvr)}

.case-open-link{display:inline-flex;align-items:center;gap:6px;margin:-6px 0 30px;padding:0;border:none;background:none;font-family:'Google Sans Flex','Google Sans',sans-serif;font-size:13px;font-weight:600;color:var(--case-blue);cursor:pointer}
.case-open-link svg{width:13px;height:13px;transition:transform .25s ease}
.case-open-link:hover svg{transform:translate(3px,-3px)}

/* === CASE LIST (mecánica idéntica a designbybrandin.com: fill con easing "sube y baja", no fade) === */
.case-list-wrap{margin-top:56px}
.case-list{}
.case-row{position:relative;display:grid;grid-template-columns:44px 2fr 1.4fr 1.3fr 1.6fr 20px;align-items:center;gap:16px;padding:15px 6px;border-bottom:1px solid var(--bdr);cursor:pointer;text-decoration:none;color:var(--txt)}
.case-row-fill{position:absolute;top:0;bottom:0;left:calc(-1 * var(--pad));right:calc(-1 * var(--pad));background:var(--case-blue);transform:scaleY(0);transform-origin:bottom;transition:transform .5s cubic-bezier(.15,.75,.5,1);z-index:0}
.case-row:hover .case-row-fill{transform:scaleY(1)}
.case-row--dim{opacity:.35;transition:opacity .25s ease}
.case-row--dim:hover{opacity:.7}
.case-row--head{color:var(--txt2);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;padding-top:0;cursor:default}
.case-row--head .case-row-name{font-size:11px;font-weight:600;letter-spacing:.08em}
.case-row-num{position:relative;z-index:1;font-family:'Google Sans Flex','Google Sans',sans-serif;font-size:12px;color:var(--txt2);font-weight:600;transition:color .5s cubic-bezier(.15,.75,.5,1)}
.case-row-name{position:relative;z-index:1;font-family:'Google Sans Flex','Google Sans',sans-serif;font-size:clamp(17px,1.8vw,24px);font-weight:500;letter-spacing:-.01em;line-height:1.3;color:inherit;transition:color .5s cubic-bezier(.15,.75,.5,1)}
.case-row-industry{position:relative;z-index:1;font-family:'Google Sans Flex','Google Sans',sans-serif;font-size:12.5px;color:var(--txt2);transition:color .5s cubic-bezier(.15,.75,.5,1)}
.case-row-rol{position:relative;z-index:1;font-family:'Google Sans Flex','Google Sans',sans-serif;font-size:12.5px;color:var(--txt2);transition:color .5s cubic-bezier(.15,.75,.5,1)}
.case-row-dur{position:relative;z-index:1;font-family:'Google Sans Flex','Google Sans',sans-serif;font-size:12.5px;color:var(--txt2);transition:color .5s cubic-bezier(.15,.75,.5,1)}
.case-row-arrow{position:relative;z-index:1;width:16px;height:16px;flex:none;display:inline-flex;color:var(--txt2);transition:color .5s cubic-bezier(.15,.75,.5,1),transform .25s ease}
.case-row-arrow svg{width:100%;height:100%;display:block}
.case-row:not(.case-row--head):hover .case-row-name,.case-row:not(.case-row--head):hover .case-row-arrow,.case-row:not(.case-row--head):hover .case-row-num{color:#fff}
.case-row:not(.case-row--head):hover .case-row-industry,.case-row:not(.case-row--head):hover .case-row-rol,.case-row:not(.case-row--head):hover .case-row-dur{color:#fff;opacity:.85}
.case-row:not(.case-row--head):hover .case-row-arrow{transform:translate(3px,-3px)}
@media(max-width:900px){
  .case-row{grid-template-columns:32px 1.8fr 1fr 18px}
  .case-row-rol,.case-row-dur{display:none}
}
.case-preview{position:fixed;top:0;left:0;width:300px;height:225px;margin-top:-112.5px;margin-left:-150px;border-radius:10px;overflow:hidden;pointer-events:none;opacity:0;transform:translate(-9999px,-9999px);transition:opacity .25s ease;z-index:50;box-shadow:0 24px 48px rgba(0,0,0,.35);background:var(--fn)}
.case-preview.show{opacity:1}
.case-preview img{width:100%;height:100%;object-fit:cover;display:block}
.case-preview-fallback{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;padding:22px;box-sizing:border-box}
.case-preview-fallback .cpf-name{font-family:'Google Sans Flex','Google Sans',sans-serif;font-size:22px;font-weight:500;line-height:1.15;color:#fff}
.case-preview-fallback .cpf-industry{font-family:'Google Sans Flex','Google Sans',sans-serif;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--case-blue);margin-top:12px}
@media(hover:none){.case-preview{display:none!important}}
@media(max-width:600px){
  .case-row{padding:14px 4px}
}

/* === CASE PAGE (estructura tipo designbybrandin.com/portfolio) === */
.casepage{padding:0;border-bottom:none}
.cp-hero{background:var(--fn);padding:150px var(--pad) 100px}
.cp-eyebrow{display:block;font-family:'Google Sans Flex','Google Sans',sans-serif;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.55);margin-bottom:16px}
.cp-title{font-family:'Google Sans Flex','Google Sans',sans-serif;font-weight:400;font-size:clamp(44px,7.5vw,92px);color:#fff;letter-spacing:-1px;line-height:1.05;margin-bottom:32px}
.cp-sub{color:rgba(255,255,255,.65);font-size:16px;max-width:640px;margin-bottom:40px;line-height:1.6}
.cp-meta{display:flex;flex-wrap:wrap;gap:36px;padding-top:0}
.cp-meta div{display:flex;flex-direction:column;gap:6px}
.cp-meta span{font-family:'Google Sans Flex','Google Sans',sans-serif;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.5)}
.cp-meta strong{color:#fff;font-weight:500;font-size:14px}
.cp-hero-img{width:100%;background:var(--fn)}
.cp-hero-img img{width:100%;display:block;object-fit:cover;max-height:640px}
.cp-desc-col{max-width:720px;margin-bottom:56px}
.cp-desc-col p{font-family:'Google Sans Flex','Google Sans',sans-serif;font-size:17px;line-height:1.75;color:rgba(255,255,255,.82);margin:0}
/* Grilla de imágenes tipo masonry (JS calcula el layout) — patrón reutilizable en cualquier ficha de caso vía .cp-mosaic + img.span2 */
.cp-mosaic{position:relative;padding:16px 0;background:#fff}
.cp-mosaic img{position:absolute;top:0;left:0;display:block;visibility:hidden}
.cp-imgstack{width:100%;padding:16px 0;background:#fff;display:flex;flex-direction:column;gap:16px}
.cp-imgstack--flush{padding:0;gap:0}
.cp-imgstack--top-offset{margin-top:44px}
@media(max-width:600px){.cp-imgstack--top-offset{margin-top:40px}}
.cp-imgstack--flush img{vertical-align:top}
.cp-imgstack img,.cp-imgstack video{display:block;width:100%;height:auto}
.cp-body{max-width:820px;margin:0 auto;padding:64px var(--pad)}
.cp-body h2{font-family:'Google Sans Flex','Google Sans',sans-serif;font-size:28px;font-weight:600;margin-bottom:18px;letter-spacing:-.5px}
.cp-body p{font-size:16px;line-height:1.78;color:var(--txt);margin-bottom:22px}
.cp-digicult{background-color:#fff;background-image:repeating-linear-gradient(90deg,rgba(255,155,165,.16) 0,rgba(255,155,165,.16) 8.33%,#fff 8.33%,#fff 16.66%);padding:80px var(--pad)}
.cp-digicult-title{font-family:'Google Sans Flex','Google Sans',sans-serif;font-weight:600;font-size:clamp(32px,5.2vw,68px);line-height:1.08;letter-spacing:-1px;color:#FF9BA5;margin-bottom:64px}
.cp-digicult-heart{display:inline-block;width:.62em;height:.62em;vertical-align:-.06em;color:#3B2FE0;margin:0 .04em}
.cp-digicult-heart svg{display:block;width:100%;height:100%}
.cp-digicult-row{display:flex;align-items:center;gap:64px;justify-content:center}
.cp-digicult-media{flex:none;width:min(320px,34vw)}
.cp-digicult-media img{display:block;width:100%;height:auto}
.cp-digicult-text{flex:none;max-width:400px;font-size:16px;line-height:1.6;color:var(--txt)}
.cp-stack{width:100%;display:flex;flex-direction:column;align-items:center;gap:2px}
.cp-stack img{display:block;width:auto;max-width:100%;height:auto;margin:0 auto}
.cp-stack-row{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:16px;padding:0 var(--pad) 8px}
.cp-stack-row img{max-width:260px;max-height:420px;width:auto;height:auto;object-fit:contain}
.cp-body.cp-real{padding-top:56px;padding-bottom:32px}
.cp-body.cp-real h3{font-family:'Google Sans Flex','Google Sans',sans-serif;font-size:22px;font-weight:600;margin-bottom:14px;letter-spacing:-.3px}
.cp-related{display:none}
.cp-related-eyebrow{display:block;font-family:'Google Sans Flex','Google Sans',sans-serif;color:rgba(255,255,255,.6);font-size:11px;text-transform:uppercase;letter-spacing:.1em;margin-bottom:12px;font-weight:600}
.case-list.inverted{border-top-color:rgba(255,255,255,.25)}
.case-list.inverted .case-row{color:#fff;border-bottom-color:rgba(255,255,255,.25)}
.case-list.inverted .case-row-fill{background:#fff}
.case-list.inverted .case-row-industry{color:rgba(255,255,255,.55)}
.case-list.inverted .case-row-arrow{color:rgba(255,255,255,.55)}
.case-list.inverted .case-row:hover .case-row-name,.case-list.inverted .case-row:hover .case-row-arrow{color:var(--case-blue)}
.case-list.inverted .case-row:hover .case-row-industry{color:var(--case-blue);opacity:.75}
@media(max-width:600px){
  .cp-hero{padding:96px 20px 64px}
  .cp-title{margin-bottom:24px}
  .cp-meta{gap:20px}
  .cp-desc-col{margin-bottom:36px}
  .cp-desc-col p{font-size:15.5px}
  .cp-body{padding:48px 20px}
  .cp-related{padding:48px 20px}
  .cp-digicult{padding:48px 20px}
  .cp-digicult-title{margin-bottom:36px}
  .cp-digicult-row{flex-direction:column;gap:32px}
  .cp-digicult-media{width:min(280px,70vw)}
  .cp-digicult-text{max-width:none}
}

/* === IMAGE LOADER (skeleton shimmer mientras carga cada <img>) === */
img{transition:opacity .35s ease}
img.img-loading{opacity:0;background-color:#e9e7e3;background-image:linear-gradient(100deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.75) 50%,rgba(255,255,255,0) 70%);background-size:200% 100%;animation:img-shimmer 1.3s ease-in-out infinite}
@keyframes img-shimmer{0%{background-position:150% 0}100%{background-position:-50% 0}}
.cp-mosaic.mosaic-loading{min-height:240px;background-color:#e9e7e3;background-image:linear-gradient(100deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.75) 50%,rgba(255,255,255,0) 70%);background-size:200% 100%;animation:img-shimmer 1.3s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){img.img-loading,.cp-mosaic.mosaic-loading{animation:none}}

/* === FOOTER === */
.rftr{width:100%;background:#fff;padding:56px 0 28px;overflow:hidden}
.rftr-bottom{width:100%;padding:28px var(--pad) 0;margin-top:28px;display:flex;justify-content:space-between;align-items:center;font-size:12px;color:rgba(0,0,0,.2)}
.rftr-logo{font-family:'Google Sans Flex','Google Sans',sans-serif;font-weight:700;font-size:16px;color:rgba(0,0,0,.2)}

/* === RESPONSIVE === */
@media(max-width:600px){
  :root{--pad:20px}
  .perfil-hero{padding:40px 20px 28px}
  .bio-cols{grid-template-columns:1fr;gap:40px 0;margin-top:-24px}
  .rmod-inner{padding-top:40px;padding-bottom:40px}
  .rmd table{min-width:420px;font-size:12.5px}
  .rmd th{padding:9px 10px}
  .rmd td{padding:8px 10px}
  .rftr{padding-top:40px;padding-bottom:20px}
  .rftr-bottom{flex-direction:column;gap:6px;text-align:center;padding-top:20px;margin-top:20px}
  .back-idx{width:100%;justify-content:center}
  .case-row-industry{display:none}
  .case-row{grid-template-columns:26px 1fr 16px}
}

/* === DEMOS (/demos/<id>): miniaturas de las demos de un producto (mismo patrón que el catálogo de demos) === */
.demo-pag{padding-top:44px;background:#fff}
.demo-pag .perfil-hero-name{white-space:normal;font-size:clamp(48px,8vw,160px)}
.demo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:40px 24px;margin-top:8px}
.demo{display:flex;flex-direction:column;gap:14px;text-decoration:none;color:var(--txt)}
.demo-img{position:relative;aspect-ratio:16/10;border-radius:10px;overflow:hidden;background:var(--hvr);border:1px solid var(--bdr)}
.demo-img img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block;transition:transform .6s cubic-bezier(.15,.75,.5,1)}
.demo-img::after{content:"";position:absolute;inset:0;background:var(--case-blue);opacity:0;transition:opacity .4s cubic-bezier(.15,.75,.5,1)}
.demo-img span{position:absolute;inset:auto auto 16px 16px;z-index:1;color:#fff;font-size:13px;opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .4s ease}
.demo:hover .demo-img img{transform:scale(1.03)}
.demo:hover .demo-img::after{opacity:.55}
.demo:hover .demo-img span{opacity:1;transform:none}
.demo-h{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.demo-h b{font-size:clamp(20px,2vw,26px);font-weight:500;letter-spacing:-.01em;line-height:1.25}
.demo-h .case-row-arrow{margin-top:8px;color:var(--txt)}
.demo:hover .demo-h .case-row-arrow{transform:translate(3px,-3px)}
.demo-meta{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--txt2)}
.demo p{font-size:15px;line-height:1.6;color:var(--txt2);max-width:62ch;margin:0}
.demo .acc{font-size:13px;color:var(--txt);background:var(--hvr);border-radius:3px;padding:6px 10px;align-self:flex-start}
.demo:focus-visible{outline:2px solid var(--fn);outline-offset:6px;border-radius:10px}