/* Prototipo «Casos de éxito» v2 (2026-10-17): slider por cliente. Se carga después de main.css. */
.casos .section-head{margin-bottom:28px}
.casos-rail{align-items:stretch}
.casos-rail>.caso{flex:0 0 min(94%,1120px);scroll-snap-align:start;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);gap:40px;border:1px solid var(--linea);background:#fff;padding:36px;min-width:0}
.caso-info{display:flex;flex-direction:column;min-width:0}
.caso h3{font:400 clamp(34px,4.2vw,58px)/1.02 Minal,Georgia,serif;margin:14px 0 14px;letter-spacing:-.02em}
.caso-info>p{color:var(--gris);font-size:14px;line-height:1.5}
.caso-tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:22px 0 28px}
.caso-tags li{border:1px solid var(--linea);border-radius:30px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:600;background:var(--papel)}
.caso-tags li>a,.caso-tags li>span{display:block;padding:6px 12px;border-radius:30px;text-decoration:none;color:inherit}
.caso-tags li>a:hover,.caso-tags li>a:focus-visible{background:var(--tinta);color:var(--papel)}
.caso-tags li>a:focus-visible{outline:3px solid var(--acento);outline-offset:2px}
.caso-tags li.nolink{color:#6b6b6b;border-style:dashed}
.caso-info .text-link{margin-top:auto}
.caso-mosaic{display:flex;flex-direction:column;gap:10px;min-width:0;align-self:start}
.mrow{display:flex;gap:10px;min-width:0}
.mrow>figure{flex:var(--r) 1 0;aspect-ratio:var(--r);margin:0;position:relative;overflow:hidden;background:#efefeb;border:1px solid var(--linea);min-width:0}
.mrow img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}
.caso:hover .mrow img{transform:scale(1.02)}
.mrow figcaption{position:absolute;left:8px;bottom:8px;background:#fff;font:700 10px Inter,Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;padding:4px 8px}
.mini-flow{display:flex;flex-direction:column;justify-content:center;padding:14px 14px 34px;background:#eef0ff!important}
.mini-flow ol{display:flex;gap:18px;list-style:none;margin:0;padding:0;align-items:stretch}
.mini-flow li{flex:1;position:relative;background:#fff;border:1px solid #cfd4ff;border-radius:10px;padding:10px;font-size:12px;font-weight:600;line-height:1.3;display:flex;align-items:center}
.mini-flow li+li:before{content:"→";position:absolute;left:-15px;top:50%;transform:translateY(-50%);color:#2340ff;font-weight:700}
.mrow figcaption a{color:inherit;text-decoration:none;display:block;margin:-4px -8px;padding:4px 8px}
.mrow figcaption a:after{content:" ↗";opacity:.55}
.mrow figcaption a:hover,.mrow figcaption a:focus-visible{background:var(--tinta);color:var(--papel)}
.mrow figcaption a:focus-visible{outline:3px solid var(--acento);outline-offset:1px}
.trust{display:grid;grid-template-columns:1fr 1.3fr 1.6fr;gap:32px;align-items:center;padding-block:44px;border-block:1px solid var(--linea)}
.trust-stat strong{display:block;font:400 clamp(44px,5vw,72px)/1 Minal,Georgia,serif}
.trust-stat span{display:block;margin-top:8px;font-size:14px;line-height:1.4;color:var(--gris);max-width:30ch}
.trust-tools p{font:700 11px Inter,Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);margin:0 0 12px}
.trust-tools ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px;margin:0;padding:0}
.trust-tools li{display:flex;align-items:center;gap:8px;font:600 15px Inter,Arial,sans-serif}
.trust-tools img{filter:grayscale(1);opacity:.85}
.trust-tools b{font-size:22px;line-height:1}
.bridge-demo{margin-top:48px}
.bridge-demo .demo{margin:0}
.bridge .demo{border-top:4px solid #72ff6a}
.bridge .demo h2,.bridge .demo h3,.bridge .demo .kicker,.bridge .demo label,.bridge .demo strong{color:var(--tinta)}
.bridge .demo p,.bridge .demo .micro,.bridge .demo small{color:var(--gris);margin-block:8px}
.bridge .demo .button{background:var(--tinta);color:#fff;border-color:var(--tinta)}
.bridge .demo .button:hover{background:var(--acento);border-color:var(--acento);color:#111}
.bridge .demo input{color:var(--tinta)}
.trust-tools li.badge-partner{border:1px solid var(--tinta);border-radius:30px;padding:5px 12px;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.bridge-ia{margin-top:56px}
.bridge .proof-label{color:#dfe4ff;margin:0 0 14px}
.bridge .services{border-color:rgba(255,255,255,.4)}
.bridge .services article,.bridge .services article+article{border-color:rgba(255,255,255,.4)}
.bridge .services h3{font-size:22px;max-width:none}
.bridge .services article>p,.bridge .services .micro,.bridge .services .service-number{color:#e6e9ff;margin:0}
.bridge .services details,.bridge .services summary{color:#fff}
.bridge .services .text-link{color:#fff}
.bridge .services .proof,.bridge .services strong{color:#fff}
.client-chip{margin:6px 0 10px}
.casos-more{margin-top:34px}
@media(max-width:1000px){.casos-rail>.caso{grid-template-columns:1fr;flex-basis:90%;gap:24px;padding:26px;align-content:start}.caso-info .text-link{margin-top:4px;align-self:flex-start}.caso-tags{margin-bottom:18px}}
@media(max-width:900px){.trust{grid-template-columns:1fr;gap:22px;padding-block:32px}}
@media(max-width:700px){.casos-rail>.caso{flex-basis:92%;padding:18px}.mrow{flex-wrap:wrap}.mrow>figure{flex:1 1 calc(50% - 5px)}.mini-flow ol{flex-direction:column;gap:14px}.mini-flow li+li:before{content:"↓";left:50%;top:-14px;transform:translateX(-50%)}.mini-flow{aspect-ratio:auto!important}}
.bridge .demo,.bridge .demo #idea-copy,.bridge .demo #idea-result,.bridge .demo .input-row{color:var(--tinta)}
.bridge .demo #idea-copy{white-space:pre-line}
.bridge .demo input{background:#fff;border-color:var(--linea)}
.bridge .demo .button:not(.dark){background:var(--tinta);color:#fff;border-color:var(--tinta)}

dialog nav a:hover,dialog nav a:focus-visible{text-decoration:underline;text-decoration-color:#72ff6a;text-decoration-thickness:.06em;text-underline-offset:.12em}
dialog nav a small,dialog nav a span{display:inline-block}
.mrow>figure>a[data-artwork]{display:block;width:100%;height:100%}
/* Mismo alto en los 3 mosaicos (2026-10-17): cada fila reparte el alto según --k (su altura natural) */
@media(min-width:1001px){
.caso-mosaic{aspect-ratio:656/476}
.mrow{flex:var(--k,1) 1 0;min-height:0;flex-wrap:nowrap}
.mrow>figure{aspect-ratio:auto;height:auto}
}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Animación al pasar el puntero por los diseños (solo con ratón y sin "reducir movimiento"): el abanico se abre y la pieza señalada se levanta */
@media(hover:hover) and (prefers-reduced-motion:no-preference){
.flyer-stack>.flyer-open{transition:transform .45s cubic-bezier(.2,.8,.2,1),filter .45s}
.flyer-stack:hover>.flyer-open:nth-child(1){transform:rotate(-14deg) translate(-14px,-4px)}
.flyer-stack:hover>.flyer-open:nth-child(2){transform:rotate(14deg) translate(14px,-4px)}
.flyer-stack:hover>.flyer-open:nth-child(3){transform:rotate(-2deg) translateY(-14px) scale(1.03)}
.flyer-stack>.flyer-open:hover{z-index:6;transform:rotate(0deg) translateY(-12px) scale(1.1)!important}
}

/* Gran formato (lonas, banners, señalética): la pieza se ve entera sobre fondo neutro */
.gf-card>a{display:flex;align-items:center;justify-content:center;height:260px;padding:14px;background:#eeeee9;overflow:hidden}
.gf-card>a img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;box-shadow:0 8px 20px -10px #0007;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.gf-card:hover>a img{transform:scale(1.05)}}

/* Logo y carta de La Habana Lounge: se abren al pasar el puntero, como los flyers */
#brand-rail .habana-composition img{transition:transform .45s cubic-bezier(.2,.8,.2,1)}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
#proyecto-habana-identidad:hover .habana-cover{transform:rotate(-16deg) translate(-16px,-4px)}
#proyecto-habana-identidad:hover .habana-inside{transform:rotate(16deg) translate(16px,-4px)}
#proyecto-habana-identidad:hover .habana-brand{transform:translateY(-12px) scale(1.06)}
}

/* Gran formato: una sola tarjeta con 3 piezas apiladas que se abren al pasar el puntero */
.gf-stack{position:relative;height:350px;background:#eeeee9;overflow:hidden}
.gf-stack .gf-open{position:absolute;display:block;width:66%;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.gf-stack .gf-open img{display:block;width:100%;height:auto;box-shadow:0 8px 18px -8px #0008}
.gf-stack .gf-open:nth-child(1){width:50%;left:6%;top:16px;transform:rotate(-3deg)}
.gf-stack .gf-open:nth-child(2){width:88%;right:6%;top:96px;transform:rotate(2deg);z-index:2}
.gf-stack .gf-open:nth-child(3){right:8%;top:236px;width:46%;transform:rotate(-2deg);z-index:3}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
.gf-stack:hover .gf-open:nth-child(1){transform:rotate(-6deg) translate(-8px,-6px)}
.gf-stack:hover .gf-open:nth-child(2){transform:rotate(5deg) translate(8px,0)}
.gf-stack:hover .gf-open:nth-child(3){transform:rotate(-2deg) translateY(6px)}
.gf-stack .gf-open:hover{z-index:6;transform:rotate(0deg) scale(1.06)!important}}

/* Capturas de Instagram en la home: marco de móvil fino */
.caso-mosaic figure.f-phone img{box-sizing:border-box;border:3px solid #0B0B0B;border-radius:16px;background:#0B0B0B;object-fit:cover;object-position:top}
.caso-mosaic .mrow>figure.f-phone{background:transparent;border:0}

/* Webs de escritorio en las páginas de caso: barra de navegador mínima */
.caso-mosaic .mrow>figure.f-web{padding-top:18px;box-sizing:border-box;background:#fff}
.caso-mosaic .mrow>figure.f-web:before{content:"";position:absolute;left:0;right:0;top:0;height:18px;background:#efefeb;border-bottom:1px solid var(--linea);z-index:1}
.caso-mosaic .mrow>figure.f-web:after{content:"";position:absolute;left:8px;top:6px;width:6px;height:6px;border-radius:50%;background:#c9c9c4;box-shadow:10px 0 #c9c9c4,20px 0 #c9c9c4;z-index:2}
.caso-mosaic .mrow>figure.f-web img{object-position:top center}

/* Meta Ads: la pieza entera dentro de una pantalla de móvil */
.caso-mosaic .mrow>figure.f-ad img{object-fit:contain;object-position:center;background:#0B0B0B}
.caso-mosaic .mrow>figure.f-ad.f-top img{object-position:center top}

/* Casos de éxito en móvil: sin web de escritorio, mosaico compacto de 2 columnas */
.caso-mosaic .mob-only{display:none}
@media(max-width:700px){
.casos-rail{align-items:flex-start}
.caso-mosaic .mrow>figure.f-web{display:none}
.caso-mosaic .mob-only{display:block}
.caso-mosaic{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;aspect-ratio:auto!important}
.caso-mosaic .mrow{display:contents}
.caso-mosaic .mrow>figure{flex:none;aspect-ratio:var(--r);height:auto;width:auto}
.caso-mosaic .mrow>figure.w2{grid-column:span 2}
}

/* Móvil: todas las piezas verticales con la misma altura; la foto apaisada de RCPM solo en escritorio */
@media(max-width:700px){
.caso-mosaic .mrow>figure.m-hide{display:none}
.caso-mosaic .mrow>figure:not(.w2){aspect-ratio:1/2}
.caso-mosaic .mrow>figure.w2{aspect-ratio:var(--r)}
}

/* Píldoras en móvil: textos cortos y menos píldoras */
.caso-tags .p-short{display:none}
@media(max-width:700px){
.caso-tags .p-full{display:none}
.caso-tags .p-short{display:inline}
.caso-tags li.m-hide{display:none}
}

/* Demo de ideas: envío por email */
.idea-email{margin-top:18px;padding-top:16px;border-top:1px solid var(--linea)}
.idea-email[hidden]{display:none}
.idea-email .input-row{margin:10px 0}
.idea-email .check{display:flex;gap:10px;align-items:flex-start;margin-top:8px;font-size:13px;line-height:1.4;color:var(--gris)}
.idea-email .check input{margin-top:3px;flex:none;width:auto}
.idea-email .check a{color:inherit;text-decoration:underline}

/* Menú: «IA» solo en móvil */
.n-short{display:none}
@media(max-width:700px){
.n-full{display:none}
.n-short{display:inline}
}
/* Proyectos en móvil: la tarjeta del caso real de IA va debajo del flujo, no al lado */
@media(max-width:700px){
#ia-rail .flow-friendly{grid-template-columns:1fr}
#ia-rail .flow-friendly ol{grid-row:auto}
#ia-rail .case-mini{grid-column:1;grid-row:auto;margin-top:6px}
}
dialog nav a span.n-full,dialog nav a span.n-short{margin-left:0;font-family:inherit;font-weight:inherit;font-size:inherit}