/* ============ LAYOUT GENERAL ============ */
  .case-study{ width:100%; }
  .container{ max-width:1240px; margin:0 auto; padding:0 var(--space-x); }

  /* ============ HEADER INFO (layout dos columnas: contenido izq + imagen der) ============ */
  .case-header{
    padding:60px var(--space-x) 0;
    max-width:var(--container-max); margin:0 auto;
  }
  .case-header-title{
    font-family:var(--font-display); font-weight:800;
    font-size:clamp(2.5rem,6vw,5rem); line-height:1;
    color:var(--ink); letter-spacing:.02em;
    margin:0 0 24px;
  }
  .case-header-divider{
    width:100%; height:1px; background:rgba(0,0,0,.1);
    margin:0 0 32px;
  }
  /* Layout dos columnas: contenido izquierda + imagen derecha */
  .case-header-row{
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
    gap:60px; padding-bottom:32px; align-items:center;
  }
  .case-header-left{
    display:flex; flex-direction:column; gap:20px;
  }
  .case-header-logo{
    flex-shrink:0;
    display:flex; align-items:center; justify-content:flex-start;
  }
  .case-header-logo img{ width:100%; height:100%; object-fit:contain; }
  .variacode-logo{
    display:flex; align-items:center; gap:10px;
    font-family:'Montserrat',sans-serif;
    color:#14141a; white-space:nowrap;
  }
  .variacode-logo .vc-mark{ width:46px; height:23px; flex-shrink:0; }
  .variacode-logo .vc-mark svg{ width:100%; height:100%; display:block; }
  .variacode-logo .vc-text{
    font-size:1.35rem; line-height:1; letter-spacing:.02em;
    font-weight:300;
  }
  .variacode-logo .vc-text b{ font-weight:600; }
  @media (max-width:768px){
    .variacode-logo .vc-mark{ width:38px; height:19px; }
    .variacode-logo .vc-text{ font-size:1.1rem; }
  }
  @media (max-width:480px){
    .variacode-logo .vc-mark{ width:32px; height:16px; }
    .variacode-logo .vc-text{ font-size:.95rem; }
  }
  .case-header-info{
    font-family:var(--font-ui); font-size:.95rem; line-height:1.8;
    color:var(--gray-600);
  }
  .case-header-info strong{ color:var(--ink); font-weight:600; }
  /* Lado derecho: imagen del producto scrollable */
  .case-header-right{
    position:relative;
    display:flex; align-items:flex-start; justify-content:center;
  }
  /* Phone mobile a la izquierda del desktop (imagen scrollable) */
  .case-header-mobile{
    position:absolute; left:-161px; top:0; z-index:5;
    width:146px; background:#1a1a1f;
    border-radius:18px; padding:6px 5px;
    box-shadow:0 16px 32px rgba(133,33,193,.22), 0 6px 16px rgba(0,0,0,.18);
    /* Altura total igual a la del frame desktop (bar + screen) */
    height:calc(280px + 40px);
    display:flex; flex-direction:column;
  }
  .case-header-mobile::before{
    content:''; position:absolute; top:7px; left:50%; transform:translateX(-50%);
    width:40px; height:11px; background:#1a1a1f; border-radius:0 0 7px 7px; z-index:4;
  }
  .case-header-mobile-screen{
    border-radius:14px; overflow:hidden;
    background:#fff; position:relative;
    flex:1; min-height:0;
    overflow-y:auto;
    scrollbar-width:thin;
    scrollbar-color:rgba(133,33,193,.3) transparent;
  }
  .case-header-mobile-screen::-webkit-scrollbar{ width:3px; }
  .case-header-mobile-screen::-webkit-scrollbar-thumb{
    background:rgba(133,33,193,.3); border-radius:2px;
  }
  .case-header-mobile-screen img{
    width:100%; height:auto; display:block;
  }
  .case-header-product{
    width:100%; max-width:430px;
    background:#1a1a2e;
    border-radius:12px 12px 6px 6px;
    box-shadow:0 24px 48px rgba(40,59,200,.15), 0 10px 20px rgba(0,0,0,.1), 0 0 0 1px rgba(255,255,255,.05);
    position:relative;
  }
  .case-header-product-bar{
    display:flex; align-items:center; gap:7px;
    padding:10px 14px;
    background:rgba(255,255,255,.04);
    border-radius:12px 12px 0 0;
  }
  .case-header-product-bar span{
    width:11px; height:11px; border-radius:50%;
  }
  .case-header-product-bar span:nth-child(1){ background:#FF5F57; }
  .case-header-product-bar span:nth-child(2){ background:#FFBD2E; }
  .case-header-product-bar span:nth-child(3){ background:#28C840; }
  .case-header-product-bar::after{
    content:''; flex:1; height:20px; margin-left:8px;
    background:rgba(255,255,255,.06); border-radius:4px;
    max-width:200px;
  }
  .case-header-product-screen{
    background:#fff; overflow:hidden;
    position:relative;
    height:280px;
    overflow-y:auto;
    border-radius:0 0 6px 6px;
    scrollbar-width:thin;
    scrollbar-color:rgba(99,178,245,.4) transparent;
  }
  .case-header-product-screen::-webkit-scrollbar{ width:6px; }
  .case-header-product-screen::-webkit-scrollbar-track{ background:transparent; }
  .case-header-product-screen::-webkit-scrollbar-thumb{
    background:rgba(99,178,245,.3); border-radius:3px;
  }
  .case-header-product-screen::-webkit-scrollbar-thumb:hover{
    background:rgba(99,178,245,.5);
  }
  .case-header-product-screen img{
    width:100%; height:auto; display:block;
  }
  .case-header-scroll-hint{
    position:absolute; bottom:12px; left:50%; transform:translateX(-50%);
    display:flex; flex-direction:column; align-items:center; gap:4px;
    color:rgba(255,255,255,.5); font-size:.7rem; font-family:var(--font-ui);
    pointer-events:none; z-index:3;
    animation:scrollHint 2s ease-in-out infinite;
  }
  .case-header-scroll-hint svg{ width:18px; height:18px; }
  @keyframes scrollHint{
    0%,100%{ transform:translateX(-50%) translateY(0); opacity:.5; }
    50%{ transform:translateX(-50%) translateY(6px); opacity:.8; }
  }
  /* Responsive: apilar en una columna */
  @media (max-width:1024px){
    .case-header-row{ grid-template-columns:1fr; gap:32px; }
    .case-header-product{ max-width:480px; margin:0 auto; }
    .case-header-product-screen{ height:320px; }
    .case-header-mobile{ width:167px; height:calc(320px + 40px); left:-182px; top:0; right:auto; }
  }
  @media (max-width:768px){
    .case-header-product-screen{ height:280px; }
    .case-header-mobile{ width:130px; height:calc(280px + 40px); left:-30px; bottom:-20px; top:auto; right:auto; }
  }
  @media (max-width:480px){
    .case-header-product-screen{ height:240px; }
    .case-header-mobile{ width:110px; height:calc(240px + 40px); left:-10px; bottom:-16px; top:auto; right:auto; }
  }

  /* ============ HERO BANNER (contenedor scrollable del producto) ============ */
  .case-hero{
    padding:0 var(--space-x); margin-bottom:48px;
    position:relative;
  }
  .hero-composition{
    max-width:1100px; margin:0 auto;
    position:relative; z-index:1;
    display:flex; align-items:flex-start; justify-content:center;
    gap:32px;
  }
  /* === Desktop browser frame scrollable === */
  .hero-desktop{
    flex:0 0 680px; max-width:680px;
    background:#1a1a2e;
    border-radius:14px 14px 7px 7px;
    overflow:hidden;
    box-shadow:0 40px 80px rgba(40,59,200,.22), 0 16px 32px rgba(0,0,0,.15), 0 0 0 1px rgba(255,255,255,.05);
    position:relative; z-index:2;
  }
  .hero-desktop-bar{
    display:flex; align-items:center; gap:7px;
    padding:10px 14px;
    background:rgba(255,255,255,.04);
  }
  .hero-desktop-bar span{
    width:11px; height:11px; border-radius:50%;
  }
  .hero-desktop-bar span:nth-child(1){ background:#FF5F57; }
  .hero-desktop-bar span:nth-child(2){ background:#FFBD2E; }
  .hero-desktop-bar span:nth-child(3){ background:#28C840; }
  .hero-desktop-bar::after{
    content:''; flex:1; height:20px; margin-left:8px;
    background:rgba(255,255,255,.06); border-radius:4px;
    max-width:200px;
  }
  .hero-desktop-screen{
    background:#fff; overflow:hidden;
    position:relative;
    height:560px;
    overflow-y:auto;
    scrollbar-width:thin;
    scrollbar-color:rgba(99,178,245,.4) transparent;
  }
  .hero-desktop-screen::-webkit-scrollbar{ width:6px; }
  .hero-desktop-screen::-webkit-scrollbar-track{ background:transparent; }
  .hero-desktop-screen::-webkit-scrollbar-thumb{
    background:rgba(99,178,245,.3); border-radius:3px;
  }
  .hero-desktop-screen::-webkit-scrollbar-thumb:hover{
    background:rgba(99,178,245,.5);
  }
  .hero-desktop-screen img{
    width:100%; height:auto; display:block;
  }
  /* === Scroll hint === */
  .hero-scroll-hint{
    position:absolute; bottom:12px; left:50%; transform:translateX(-50%);
    display:flex; flex-direction:column; align-items:center; gap:4px;
    color:rgba(255,255,255,.5); font-size:.7rem; font-family:var(--font-ui);
    pointer-events:none; z-index:3;
    animation:scrollHint 2s ease-in-out infinite;
  }
  .hero-scroll-hint svg{ width:18px; height:18px; }
  @keyframes scrollHint{
    0%,100%{ transform:translateX(-50%) translateY(0); opacity:.5; }
    50%{ transform:translateX(-50%) translateY(6px); opacity:.8; }
  }
  /* === Mobile phone frame === */
  .hero-mobile{
    flex:0 0 200px; width:200px;
    background:#1a1a1f;
    border-radius:24px;
    padding:8px 7px;
    box-shadow:0 30px 60px rgba(133,33,193,.28), 0 12px 28px rgba(0,0,0,.22);
    position:relative; z-index:3;
    align-self:flex-end;
    margin-bottom:40px;
  }
  .hero-mobile::before{
    content:''; position:absolute; top:10px; left:50%; transform:translateX(-50%);
    width:56px; height:14px; background:#1a1a1f; border-radius:0 0 10px 10px; z-index:4;
  }
  .hero-mobile-screen{
    border-radius:16px; overflow:hidden;
    background:#fff;
    aspect-ratio:239/420;
    position:relative;
    overflow-y:auto;
    scrollbar-width:thin;
    scrollbar-color:rgba(133,33,193,.3) transparent;
  }
  .hero-mobile-screen::-webkit-scrollbar{ width:4px; }
  .hero-mobile-screen::-webkit-scrollbar-thumb{
    background:rgba(133,33,193,.3); border-radius:2px;
  }
  .hero-mobile-screen img{
    width:100%; height:auto; display:block;
  }
  /* === Glow decorativo === */
  .case-hero::before{
    content:''; position:absolute; left:50%; top:50%;
    width:700px; height:300px; transform:translate(-50%,-50%);
    background:radial-gradient(ellipse, rgba(237,248,255,.9), transparent 70%);
    z-index:0;
  }
  .case-hero::after{
    content:''; position:absolute; left:65%; top:60%;
    width:380px; height:200px; transform:translate(-50%,-50%);
    background:radial-gradient(ellipse, rgba(133,33,193,.18), transparent 70%);
    filter:blur(44px); pointer-events:none; z-index:0;
  }
  /* === Responsive === */
  @media (max-width:1024px){
    .hero-desktop{ flex-basis:560px; max-width:560px; }
    .hero-mobile{ flex-basis:170px; width:170px; }
    .hero-composition{ gap:24px; }
    .hero-desktop-screen{ height:480px; }
  }
  @media (max-width:768px){
    .hero-composition{ gap:16px; }
    .hero-desktop{ flex-basis:100%; max-width:100%; }
    .hero-desktop-screen{ height:420px; }
    .hero-mobile{ flex-basis:130px; width:130px; margin-bottom:20px; }
  }
  @media (max-width:480px){
    .hero-composition{ flex-direction:column; gap:20px; align-items:center; }
    .hero-desktop{ flex-basis:100%; max-width:100%; }
    .hero-desktop-screen{ height:380px; }
    .hero-mobile{ flex-basis:140px; width:140px; margin-bottom:0; }
  }

  /* ============ MOCKUPS DE DISPOSITIVO ============ */
  .scene-3d{ perspective:1100px; perspective-origin:50% 35%; }

  /* Phone mockup */
  .phone{
    width:200px; height:400px; background:#1a1a1f;
    border-radius:30px; padding:8px;
    box-shadow:0 24px 50px rgba(0,0,0,.22), 0 0 0 1px rgba(255,255,255,.06) inset;
    position:relative; flex-shrink:0;
    transition:transform .5s cubic-bezier(.4,0,.2,1), box-shadow .5s ease;
  }
  .phone::before{ /* notch */
    content:''; position:absolute; top:8px; left:50%; transform:translateX(-50%);
    width:70px; height:18px; background:#1a1a1f; border-radius:0 0 12px 12px; z-index:3;
  }
  .phone-screen{
    width:100%; height:100%; border-radius:24px; overflow:hidden;
    background:#fff; position:relative;
  }
  .phone-screen img{
    width:100%; height:100%; object-fit:cover; display:block;
  }
  .phone:hover{
    transform:rotateY(0deg) rotateX(0deg) translateY(-8px);
    box-shadow:0 32px 64px rgba(0,0,0,.28);
  }

  /* Desktop/browser mockup */
  .browser{
    border-radius:10px 10px 0 0; overflow:hidden;
    box-shadow:0 20px 50px rgba(0,0,0,.14);
    background:#fff; flex-shrink:0;
    transition:transform .5s cubic-bezier(.4,0,.2,1), box-shadow .5s ease;
  }
  .browser-bar{
    height:28px; background:#f0eeec; display:flex; align-items:center;
    gap:6px; padding:0 12px;
  }
  .browser-bar span{
    width:10px; height:10px; border-radius:50%; display:block;
  }
  .browser-bar span:nth-child(1){ background:#ff5f57; }
  .browser-bar span:nth-child(2){ background:#febc2e; }
  .browser-bar span:nth-child(3){ background:#28c840; }
  .browser-screen{ overflow:hidden; }
  .browser-screen img{ width:100%; display:block; }
  .browser:hover{
    transform:translateY(-6px);
    box-shadow:0 28px 60px rgba(0,0,0,.2);
  }

  /* Tilt card (para Design Thinking y Design System) */
  .tilt-card{
    border-radius:14px; overflow:hidden;
    box-shadow:0 16px 40px rgba(0,0,0,.12);
    transition:transform .5s cubic-bezier(.4,0,.2,1), box-shadow .5s ease;
    transform:rotateY(-8deg) rotateX(3deg);
    transform-style:preserve-3d;
  }
  .tilt-card:hover{
    transform:rotateY(0deg) rotateX(0deg) translateY(-4px);
    box-shadow:0 24px 56px rgba(0,0,0,.18);
  }
  .tilt-card img{ width:100%; display:block; }

  /* Floating animation */
  @keyframes floatY{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-10px); }
  }
  .float-anim{ animation:floatY 4s ease-in-out infinite; }
  @media (prefers-reduced-motion:reduce){ .float-anim{ animation:none; } }

  /* ============ SECCIONES ============ */
  .case-section{
    padding:36px var(--space-x);
    max-width:1340px; margin:0 auto;
    position:relative;
  }
  .case-label{
    font-family:var(--font-display); font-weight:700;
    font-size:1.1rem; color:#333333;
    margin-bottom:16px; letter-spacing:.02em;
  }
  .case-section-title{
    font-family:var(--font-display); font-weight:800;
    font-size:clamp(1.6rem,3vw,2.2rem); color:var(--ink);
    margin-bottom:20px; line-height:1.2;
  }
  .case-divider{
    width:100%; height:1px; background:var(--border);
    margin:12px 0;
  }
  .case-section-intro{
    font-family:var(--font-ui), sans-serif;
    font-size:1.02rem; line-height:1.7; color:var(--gray-600);
    max-width:900px; margin:16px 0 28px;
  }

  /* ============ OBJETIVOS / ESTRATEGIA ============ */
  .objectives-grid{
    display:grid; grid-template-columns:1fr 1fr 1fr; gap:48px;
    margin-top:40px;
  }
  .obj-col h3{
    font-family:var(--font-display); font-weight:700;
    font-size:1rem; color:var(--ink);
    margin-bottom:16px; letter-spacing:.04em;
  }
  .obj-col p{
    font-family:var(--font-ui); font-size:.92rem; line-height:1.7;
    color:var(--gray-600);
  }
  .obj-list{ list-style:none; padding:0; }
  .obj-list li{
    display:flex; align-items:flex-start; gap:12px;
    font-family:var(--font-ui); font-size:.92rem; line-height:1.7;
    color:var(--gray-600); margin-bottom:12px;
  }
  .obj-list li svg{
    width:18px; height:18px; flex-shrink:0; margin-top:3px;
    color:var(--blue);
  }
  .obj-list li .ai-star{
    width:16px; height:16px; flex-shrink:0; margin-top:3px;
    color:#9a9aa6;
  }
  .obj-list li .ai-star svg{ width:100%; height:100%; display:block; }

  /* ============ SECCIÓN UNIFICADA DE ACORDEONES ============ */
  .case-accordions{
    background:#ffffff;
    padding:48px var(--space-x);
    position:relative; overflow:hidden;
  }
  .case-accordions-inner{
    max-width:1200px; margin:0 auto; position:relative; z-index:1;
    display:flex; flex-direction:column; gap:0;
  }
  .case-accordions-title{
    font-family:var(--font-display); font-weight:700;
    font-size:clamp(1.6rem,3.5vw,2.5rem); color:#000000;
    max-width:1200px; margin:0 auto 28px;
    letter-spacing:.01em; line-height:1.2;
  }

  /* ============ SISTEMA DE ACORDEÓN (estilo Figma) ============ */
  .acc{
    background:transparent;
    border-bottom:2px solid rgba(0,0,0,.1);
    overflow:hidden;
    transition:background .25s ease;
  }
  .acc:last-child{ border-bottom:none; }
  .acc-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:22px 8px; cursor:default; user-select:none;
    transition:background .25s ease;
    position:relative;
  }
  .acc-head:hover{ background:rgba(0,0,0,.035); }
  .acc.open .acc-head{ background:transparent; }
  .acc-head-left{
    display:flex; align-items:center; gap:16px;
    font-family:var(--font-display); font-weight:600;
    font-size:1.05rem; color:#000000;
    letter-spacing:-.005em;
  }
  .acc-num{
    font-family:var(--font-display); font-weight:700;
    font-size:.78rem; color:#9b9b9b;
    letter-spacing:.08em; flex-shrink:0;
    min-width:24px;
    transition:color .2s ease;
  }
  .acc.open .acc-num{ color:#000000; }
  .acc-toggle{
    display:flex; align-items:center; justify-content:center;
    width:32px; height:32px; border-radius:50%;
    background:transparent; border:none;
    cursor:pointer; flex-shrink:0;
    transition:transform .2s ease;
  }
  .acc-toggle svg{
    width:32px; height:32px; color:#000;
    transition:color .25s ease;
  }
  .acc-toggle:hover svg{ color:#333333; }
  .acc.open .acc-toggle svg{ color:#000000; }
  .acc-toggle .icon-minus{ display:none; }
  .acc.open .acc-toggle .icon-plus{ display:none; }
  .acc.open .acc-toggle .icon-minus{ display:block; }
  .acc-body{
    max-height:0; overflow:hidden;
    transition:max-height .45s cubic-bezier(.4,0,.2,1), opacity .35s ease;
    opacity:0;
  }
  .acc.open .acc-body{ max-height:4000px; opacity:1; }
  .acc-content{ padding:12px 40px 36px; }

  /* ============ IMAGEN DEL FLOW DESIGN THINKING ============ */
  .dt-flow-image{
    width:100%; max-width:852px; margin:0 auto;
    border-radius:12px; overflow:hidden;
    box-shadow:0 12px 32px rgba(0,0,0,.08);
  }
  .dt-flow-image img{
    width:100%; height:auto; display:block;
  }

  /* ============ CARDS DESIGN THINKING (ACORDEÓN 01) ============ */
  .dt-cards-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:24px;
  }
  .dt-card{
    background:#fff; border:1px solid #cecccc; border-radius:20px;
    padding:25px;
    transition:background .3s ease, box-shadow .3s ease, transform .3s ease, border-color .3s ease;
  }
  .dt-card:hover{
    background:#EDF8FF;
    box-shadow:0 8px 24px rgba(0,0,0,.08);
    transform:translateY(-2px);
    border-color:#b8b8b8;
  }
  .dt-card-header{
    display:flex; align-items:center; gap:14px;
    margin-bottom:14px;
  }
  .dt-card-icon{
    flex-shrink:0; width:44px; height:44px; border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg, rgba(42,129,200,.1), rgba(133,33,193,.1));
    color:#2a81c8;
    transition:background .3s ease, color .3s ease;
  }
  .dt-card:hover .dt-card-icon{
    background:linear-gradient(135deg, #2a81c8, #8521c1);
    color:#fff;
  }
  .dt-card-icon svg{ width:24px; height:24px; }
  .dt-card-title{
    font-family:var(--font-display); font-weight:600;
    font-size:1.6rem; color:rgba(0,0,0,.8); letter-spacing:.06em;
    margin:0;
  }
  .dt-card-desc{
    font-family:var(--font-ui); font-size:.88rem; line-height:1.6;
    color:#5a5555; margin:0 0 18px;
  }
  .dt-card-activities{
    font-family:var(--font-display); font-weight:600;
    font-size:.85rem; color:#000; letter-spacing:.06em;
    margin:0 0 10px; text-transform:uppercase;
  }
  .dt-card-list{
    padding-left:18px; margin:0 0 12px;
    list-style:disc;
  }
  .dt-card-list li{
    font-family:var(--font-ui); font-size:.82rem; line-height:1.6;
    color:var(--gray-600); margin-bottom:5px;
  }
  .dt-card-list li:last-child{ margin-bottom:0; }
  @media (max-width:768px){
    .dt-cards-grid{ grid-template-columns:1fr; gap:18px; }
  }

  /* ============ RESUMEN FICHA INVESTIGACIÓN ============ */
  .ficha-resumen{
    max-width:980px; margin:0 auto;
    padding:24px 28px;
    background:#f7f9fc;
    border-left:3px solid #335e83;
    border-radius:0 12px 12px 0;
  }
  .ficha-title{
    font-family:var(--font-display); font-weight:700;
    font-size:1rem; color:#000000;
    margin:0 0 12px; letter-spacing:.01em;
  }
  .ficha-objetivo{
    font-family:var(--font-ui); font-size:.9rem; line-height:1.7;
    color:var(--gray-600); margin:0 0 20px;
  }
  .ficha-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:24px;
  }
  .ficha-block h5{
    font-family:var(--font-display); font-weight:700;
    font-size:.82rem; color:#335e83;
    margin:0 0 8px; letter-spacing:.04em; text-transform:uppercase;
  }
  .ficha-block p{
    font-family:var(--font-ui); font-size:.86rem; line-height:1.65;
    color:var(--gray-600); margin:0;
  }
  .ficha-block ul{
    list-style:decimal; padding-left:20px; margin:0;
  }
  .ficha-block ul li{
    font-family:var(--font-ui); font-size:.86rem; line-height:1.7;
    color:var(--gray-600); margin-bottom:4px;
  }
  @media (max-width:768px){
    .ficha-grid{ grid-template-columns:1fr; gap:18px; }
    .ficha-resumen{ padding:20px 18px; }
  }

  /* ============ LISTA DE HIPÓTESIS (ACORDEÓN 02) ============ */
  .hypothesis-list{
    padding-left:24px; margin:0;
    list-style:decimal;
  }
  .hypothesis-list li{
    font-family:var(--font-ui); font-size:.92rem; line-height:1.7;
    color:var(--gray-600); margin-bottom:20px;
    padding-left:8px;
  }
  .hypothesis-list li:last-child{ margin-bottom:0; }

  /* ============ FLUJO DE PRODUCTO (ACORDEÓN 04) ============ */
  .flow-product-screens{
    display:flex; flex-wrap:wrap; gap:28px; justify-content:center;
    margin:0 0 32px;
  }
  /* Desktop browser frame scrollable */
  .flow-desktop{
    flex:1 1 460px; max-width:560px;
    background:#1a1a2e;
    border-radius:12px 12px 6px 6px;
    overflow:hidden;
    box-shadow:0 24px 48px rgba(40,59,200,.15), 0 10px 20px rgba(0,0,0,.1), 0 0 0 1px rgba(255,255,255,.05);
    position:relative;
  }
  .flow-desktop-bar{
    display:flex; align-items:center; gap:7px;
    padding:10px 14px;
    background:rgba(255,255,255,.04);
  }
  .flow-desktop-bar span{
    width:11px; height:11px; border-radius:50%;
  }
  .flow-desktop-bar span:nth-child(1){ background:#FF5F57; }
  .flow-desktop-bar span:nth-child(2){ background:#FFBD2E; }
  .flow-desktop-bar span:nth-child(3){ background:#28C840; }
  .flow-desktop-bar::after{
    content:''; flex:1; height:20px; margin-left:8px;
    background:rgba(255,255,255,.06); border-radius:4px;
    max-width:200px;
  }
  .flow-desktop-screen{
    background:#fff; overflow:hidden;
    position:relative;
    height:420px;
    overflow-y:auto;
    scrollbar-width:thin;
    scrollbar-color:rgba(99,178,245,.4) transparent;
  }
  .flow-desktop-screen::-webkit-scrollbar{ width:6px; }
  .flow-desktop-screen::-webkit-scrollbar-track{ background:transparent; }
  .flow-desktop-screen::-webkit-scrollbar-thumb{
    background:rgba(99,178,245,.3); border-radius:3px;
  }
  .flow-desktop-screen::-webkit-scrollbar-thumb:hover{
    background:rgba(99,178,245,.5);
  }
  .flow-desktop-screen img{
    width:100%; height:auto; display:block;
  }
  /* Frame fijo (login) — sin scroll, sin fondo desktop */
  .flow-desktop-fixed{
    flex:1 1 460px; max-width:560px;
  }
  .flow-desktop-fixed img{
    width:100%; height:auto; display:block;
    border-radius:8px;
  }
  /* Frame scrollable sin fondo desktop */
  .flow-desktop-scrollable{
    flex:1 1 460px; max-width:560px;
    height:280px; overflow-y:auto;
    border-radius:8px;
    scrollbar-width:thin;
    scrollbar-color:rgba(99,178,245,.4) transparent;
    position:relative;
  }
  .flow-desktop-scrollable::-webkit-scrollbar{ width:6px; }
  .flow-desktop-scrollable::-webkit-scrollbar-track{ background:transparent; }
  .flow-desktop-scrollable::-webkit-scrollbar-thumb{
    background:rgba(99,178,245,.3); border-radius:3px;
  }
  .flow-desktop-scrollable::-webkit-scrollbar-thumb:hover{
    background:rgba(99,178,245,.5);
  }
  .flow-desktop-scrollable img{
    width:100%; height:auto; display:block;
  }
  @media (max-width:1024px){ .flow-desktop-scrollable{ height:240px; } }
  @media (max-width:768px){ .flow-desktop-scrollable{ flex-basis:100%; max-width:100%; height:220px; } }
  @media (max-width:480px){ .flow-desktop-scrollable{ height:200px; } }
  /* Scroll hint */
  .flow-scroll-hint{
    position:sticky; bottom:12px; left:50%; transform:translateX(-50%);
    display:flex; flex-direction:column; align-items:center; gap:4px;
    color:rgba(0,0,0,.4); font-size:.7rem; font-family:var(--font-ui);
    pointer-events:none; z-index:3;
    animation:flowScrollHint 2s ease-in-out infinite;
  }
  .flow-scroll-hint svg{ width:18px; height:18px; }
  @keyframes flowScrollHint{
    0%,100%{ transform:translateX(-50%) translateY(0); opacity:.5; }
    50%{ transform:translateX(-50%) translateY(6px); opacity:.8; }
  }
  .flow-solution-title{
    font-family:var(--font-display); font-weight:700;
    font-size:1.15rem; color:#000000;
    margin:0 0 20px; letter-spacing:.01em;
  }
  .flow-solution-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:32px;
    margin-bottom:24px;
  }
  .flow-solution-block h4{
    font-family:var(--font-display); font-weight:700;
    font-size:1rem; color:#000000;
    margin:0 0 10px; letter-spacing:.01em;
  }
  .flow-solution-block p{
    font-family:var(--font-ui); font-size:.9rem; line-height:1.7;
    color:var(--gray-600); margin:0 0 12px;
  }
  .flow-solution-list{
    padding-left:20px; margin:0;
  }
  .flow-solution-list li{
    font-family:var(--font-ui); font-size:.88rem; line-height:1.7;
    color:var(--gray-600); margin-bottom:8px;
  }
  .flow-solution-list li strong{ color:var(--ink); font-weight:600; }
  .flow-solution-full{ max-width:100%; }
  @media (max-width:1024px){
    .flow-desktop-screen{ height:360px; }
  }
  @media (max-width:768px){
    .flow-solution-grid{ grid-template-columns:1fr; gap:24px; }
    .flow-desktop{ flex-basis:100%; max-width:100%; }
    .flow-desktop-screen{ height:320px; }
  }
  @media (max-width:480px){
    .flow-desktop-screen{ height:280px; }
  }

  /* ============ USER PERSONA (CONTENIDO) ============ */
  .persona-container{
    display:grid; grid-template-columns:260px 1fr; gap:36px;
    align-items:start;
  }
  .persona-image{
    width:260px; flex-shrink:0;
    border-radius:12px; overflow:hidden;
    box-shadow:0 12px 32px rgba(0,0,0,.12);
  }
  .persona-content{ display:flex; flex-direction:column; gap:16px; }
  .persona-title{
    font-family:var(--font-display); font-weight:600;
    font-size:1.05rem; color:var(--ink); margin-bottom:2px;
  }
  .persona-details{
    display:grid; grid-template-columns:1fr 1fr; gap:20px;
  }
  .persona-detail-block h4,
  .persona-full h4{
    font-family:var(--font-display); font-weight:600;
    font-size:.72rem; color:var(--blue); margin-bottom:6px;
    letter-spacing:.06em; text-transform:uppercase;
  }
  .persona-detail-block p,
  .persona-full p{
    font-family:var(--font-ui); font-size:.85rem; line-height:1.65;
    color:var(--gray-600);
  }
  .persona-full{ margin-top:4px; }

  /* ============ DESIGN THINKING FLOW (gráfico atractivo) ============ */
  .dt-flow{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:18px;
    margin-top:8px;
    position:relative;
    align-items:stretch;
  }
  .dt-step{
    position:relative;
    background:#fff;
    border-radius:16px;
    padding:22px 18px 20px;
    border:1px solid rgba(0,0,0,.06);
    box-shadow:0 6px 18px rgba(20,20,26,.06);
    display:flex; flex-direction:column;
    transition:transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s ease, border-color .35s ease;
    overflow:hidden;
    min-width:0;
  }
  .dt-step::before{
    content:''; position:absolute; inset:0 auto 0 0; width:4px;
    background:var(--dt-color, var(--blue));
    border-radius:4px 0 0 4px;
  }
  .dt-step::after{
    content:''; position:absolute; top:-40px; right:-40px;
    width:120px; height:120px; border-radius:50%;
    background:var(--dt-color, var(--blue));
    opacity:.06; transition:opacity .35s ease, transform .35s ease;
  }
  .dt-step:hover{
    transform:translateY(-6px);
    box-shadow:0 14px 32px rgba(20,20,26,.12);
    border-color:var(--dt-color, var(--blue));
  }
  .dt-step:hover::after{ opacity:.12; transform:scale(1.15); }
  .dt-step-head{
    display:flex; align-items:center; gap:12px;
    margin-bottom:12px;
  }
  .dt-step-num{
    flex-shrink:0;
    width:38px; height:38px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-display); font-weight:700; font-size:.95rem;
    color:#fff;
    background:var(--dt-color, var(--blue));
    box-shadow:0 4px 12px color-mix(in srgb, var(--dt-color, var(--blue)) 40%, transparent);
  }
  .dt-step-icon{
    flex-shrink:0;
    width:30px; height:30px;
    color:var(--dt-color, var(--blue));
  }
  .dt-step-icon svg{ width:100%; height:100%; }
  .dt-step h4{
    font-family:var(--font-display); font-weight:700;
    font-size:1rem; color:var(--ink);
    margin:0 0 10px; letter-spacing:.01em;
    line-height:1.25;
  }
  .dt-step-desc{
    font-family:var(--font-ui); font-size:.82rem; line-height:1.6;
    color:var(--gray-600); margin-bottom:14px;
  }
  .dt-step-meta{
    margin-top:auto;
    border-top:1px dashed rgba(0,0,0,.1);
    padding-top:12px;
    display:flex; flex-direction:column; gap:8px;
  }
  .dt-meta-row{
    font-family:var(--font-ui); font-size:.76rem; line-height:1.5;
    color:var(--gray-600);
  }
  .dt-meta-row strong{
    display:block;
    font-family:var(--font-display); font-weight:600;
    font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
    color:var(--dt-color, var(--blue));
    margin-bottom:2px;
  }
  /* Responsive: 2 columnas en tablet, 1 en mobile */
  @media (max-width:1100px){
    .dt-flow{ grid-template-columns:repeat(2, 1fr); gap:16px; }
  }
  @media (max-width:640px){
    .dt-flow{ grid-template-columns:1fr; gap:14px; }
  }

  /* ============ DESIGN THINKING (CONTENIDO) ============ */
  .thinking-grid{
    display:grid; grid-template-columns:320px 1fr; gap:32px;
    align-items:start;
  }
  .thinking-image{
    flex-shrink:0;
  }
  .thinking-content{ padding-top:4px; }
  .thinking-content h3{
    font-family:var(--font-display); font-weight:700;
    font-size:.95rem; color:var(--ink); margin-bottom:10px;
    letter-spacing:.02em;
  }
  .thinking-content > p{
    font-family:var(--font-ui); font-size:.88rem; line-height:1.65;
    color:var(--gray-600); margin-bottom:18px;
  }
  .thinking-list{ list-style:none; padding:0; }
  .thinking-list li{
    display:flex; align-items:center; gap:10px;
    font-family:var(--font-ui); font-size:.86rem; line-height:1.5;
    color:var(--gray-600); margin-bottom:10px;
  }
  .thinking-list li .ai-star{
    width:6px; height:6px; flex-shrink:0;
    background:linear-gradient(135deg,#ff134a,#63b2f5);
    border-radius:50%;
  }
  .thinking-footer{
    font-family:var(--font-ui); font-size:.84rem; line-height:1.6;
    color:var(--gray-400); margin-top:18px; font-style:italic;
  }

  /* ============ DISEÑO / ESTRATEGIA (CONTENIDO) ============ */
  .design-images{
    display:flex; gap:24px; margin-bottom:32px;
    flex-wrap:wrap; justify-content:center;
    align-items:center;
  }
  .design-images .phone{
    width:180px; height:360px;
  }
  .design-images .phone:nth-child(1){
    transform:rotateY(14deg) rotateX(4deg) translateY(10px);
  }
  .design-images .phone:nth-child(2){
    transform:rotateY(-2deg) rotateX(2deg) translateY(-12px);
    z-index:2;
  }
  .design-images .phone:nth-child(3){
    transform:rotateY(-14deg) rotateX(4deg) translateY(10px);
  }
  .design-images .phone:nth-child(1):hover{
    transform:rotateY(0deg) rotateX(0deg) translateY(-8px);
  }
  .design-images .phone:nth-child(2):hover{
    transform:rotateY(0deg) rotateX(0deg) translateY(-16px);
  }
  .design-images .phone:nth-child(3):hover{
    transform:rotateY(0deg) rotateX(0deg) translateY(-8px);
  }
  .design-images .phone-screen img{
    object-position:top center;
  }

  .strategy-text{
    font-family:var(--font-ui); font-size:.88rem; line-height:1.75;
    color:var(--gray-600); max-width:100%; margin:0 0 16px;
  }

  /* ============ DESIGN SYSTEM (CONTENIDO) ============ */
  .system-frame{
    max-width:680px; margin:0 auto 16px;
  }
  .system-text{
    font-family:var(--font-ui); font-size:.88rem; line-height:1.75;
    color:var(--gray-600); max-width:980px; margin:0 auto;
  }

  /* ============ HIPÓTESIS Y MÉTRICAS (CONTENIDO) ============ */
  .hypothesis-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:24px;
    margin-bottom:24px;
  }
  .hyp-card{
    background:rgba(99,178,245,.06);
    border-left:3px solid var(--blue);
    border-radius:0 12px 12px 0;
    padding:20px 24px;
    transition:transform .3s ease, box-shadow .3s ease;
  }
  .hyp-card:hover{
    transform:translateX(4px);
    box-shadow:0 8px 24px rgba(99,178,245,.12);
  }
  .hyp-card h4{
    font-family:var(--font-display); font-weight:700;
    font-size:.82rem; color:var(--dark-blue); margin-bottom:8px;
    letter-spacing:.04em; text-transform:uppercase;
  }
  .hyp-card p{
    font-family:var(--font-ui); font-size:.86rem; line-height:1.65;
    color:var(--gray-600);
  }
  .metrics-row{
    display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
    margin-top:8px;
  }
  .metric-card{
    background:#fff;
    border:1px solid rgba(0,0,0,.06);
    border-radius:14px;
    padding:24px 20px;
    text-align:center;
    transition:transform .35s ease, box-shadow .35s ease;
  }
  .metric-card:hover{
    transform:translateY(-6px);
    box-shadow:0 16px 40px rgba(0,0,0,.1);
  }
  .metric-num{
    font-family:var(--font-display); font-weight:800;
    font-size:2.4rem; line-height:1;
    background:linear-gradient(135deg,var(--blue),var(--dark-blue));
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
    margin-bottom:8px;
  }
  .metric-label{
    font-family:var(--font-ui); font-size:.8rem; font-weight:500;
    color:var(--gray-600); line-height:1.4;
  }
  .eval-list{
    list-style:none; padding:0; max-width:760px; margin:0 auto;
  }
  .eval-list li{
    display:flex; align-items:flex-start; gap:14px;
    font-family:var(--font-ui); font-size:.88rem; line-height:1.7;
    color:var(--gray-600); margin-bottom:14px;
    padding-bottom:14px; border-bottom:1px solid rgba(0,0,0,.05);
  }
  .eval-list li:last-child{ border-bottom:none; margin-bottom:0; }
  .eval-list li .eval-icon{
    width:28px; height:28px; border-radius:50%;
    background:rgba(99,178,245,.12);
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0; margin-top:2px;
    color:var(--blue); font-weight:700; font-size:.78rem;
    font-family:var(--font-display);
  }

  /* ============ BENCHMARK (CONTENIDO) ============ */
  .benchmark-intro{
    font-family:var(--font-ui); font-size:.9rem; line-height:1.75;
    color:var(--gray-600); max-width:880px; margin:0 auto 24px;
  }
  .benchmark-phones{
    display:flex; gap:20px; justify-content:center;
    flex-wrap:wrap; margin-bottom:28px;
  }
  .benchmark-phones .phone{
    width:170px; height:340px;
  }
  .benchmark-phones .phone:nth-child(1){
    transform:rotateY(12deg) rotateX(3deg) translateY(8px);
  }
  .benchmark-phones .phone:nth-child(2){
    transform:rotateY(-12deg) rotateX(3deg) translateY(8px);
  }
  .benchmark-phones .phone:nth-child(1):hover,
  .benchmark-phones .phone:nth-child(2):hover{
    transform:rotateY(0deg) rotateX(0deg) translateY(-6px);
  }
  .benchmark-findings{
    display:grid; grid-template-columns:1fr 1fr; gap:20px;
    max-width:880px; margin:0 auto;
  }
  .finding-card{
    background:#fff;
    border:1px solid rgba(0,0,0,.06);
    border-radius:14px;
    padding:20px 22px;
    transition:transform .35s ease, box-shadow .35s ease;
  }
  .finding-card:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 32px rgba(0,0,0,.1);
  }
  .finding-card .finding-tag{
    display:inline-block;
    font-family:var(--font-display); font-weight:700;
    font-size:.68rem; letter-spacing:.06em; text-transform:uppercase;
    padding:4px 10px; border-radius:50px;
    margin-bottom:10px;
  }
  .finding-card .finding-tag.positive{
    background:rgba(99,178,245,.12); color:var(--dark-blue);
  }
  .finding-card .finding-tag.gap{
    background:rgba(255,19,74,.1); color:var(--pink);
  }
  .finding-card h4{
    font-family:var(--font-display); font-weight:700;
    font-size:.92rem; color:var(--ink); margin-bottom:8px;
  }
  .finding-card p{
    font-family:var(--font-ui); font-size:.84rem; line-height:1.6;
    color:var(--gray-600);
  }

  /* ============ FLUJO DE PRODUCTO (CONTENIDO) ============ */
  .flow-intro{
    font-family:var(--font-ui); font-size:.92rem; line-height:1.8;
    color:var(--gray-600); max-width:100%; margin:0 0 28px;
  }
  .flow-intro strong{ color:var(--ink); font-weight:600; }
  .flow-screens{
    display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
    margin-bottom:28px;
    perspective:1200px;
  }
  .flow-screen{
    position:relative;
    transition:transform .5s cubic-bezier(.4,0,.2,1), box-shadow .5s ease;
  }
  .flow-screen:hover{
    transform:translateY(-12px) rotateY(-4deg) rotateX(2deg) scale(1.03);
  }
  /* Desktop mockup frame */
  .flow-screen.desktop{
    transform:rotateY(-3deg) rotateX(1deg);
  }
  .flow-screen.desktop:hover{
    transform:translateY(-12px) rotateY(-6deg) rotateX(3deg) scale(1.04);
  }
  .desktop-frame{
    background:#1a1a2e;
    border-radius:12px 12px 8px 8px;
    padding:10px 10px 0;
    box-shadow:0 20px 50px rgba(74,95,232,.25), 0 8px 20px rgba(0,0,0,.15);
    overflow:hidden;
    transition:box-shadow .5s ease;
  }
  .flow-screen:hover .desktop-frame{
    box-shadow:0 30px 70px rgba(74,95,232,.35), 0 12px 28px rgba(0,0,0,.2);
  }
  .desktop-bar{
    display:flex; align-items:center; gap:6px;
    padding:4px 0 8px;
  }
  .desktop-bar span{
    width:10px; height:10px; border-radius:50%;
  }
  .desktop-bar span:nth-child(1){ background:#FF5F57; }
  .desktop-bar span:nth-child(2){ background:#FFBD2E; }
  .desktop-bar span:nth-child(3){ background:#28C840; }
  .desktop-screen{
    border-radius:6px; overflow:hidden;
    background:#fff;
  }
  .desktop-screen img{
    width:100%; display:block; height:240px; object-fit:cover; object-position:top center;
  }
  /* Mobile mockup frame */
  .flow-screen.mobile{
    transform:rotateY(3deg) rotateX(-1deg);
  }
  .flow-screen.mobile:hover{
    transform:translateY(-12px) rotateY(6deg) rotateX(-3deg) scale(1.04);
  }
  .mobile-frame{
    background:#1a1a2e;
    border-radius:28px;
    padding:8px;
    box-shadow:0 20px 50px rgba(255,61,127,.25), 0 8px 20px rgba(0,0,0,.15);
    overflow:hidden;
    transition:box-shadow .5s ease;
    max-width:160px; margin:0 auto;
  }
  .flow-screen.mobile:hover .mobile-frame{
    box-shadow:0 30px 70px rgba(255,61,127,.35), 0 12px 28px rgba(0,0,0,.2);
  }
  .mobile-notch{
    width:50px; height:6px; background:#333; border-radius:0 0 8px 8px;
    margin:0 auto; position:relative; z-index:2;
  }
  .mobile-screen{
    border-radius:22px; overflow:hidden;
    background:#fff;
  }
  .mobile-screen img{
    width:100%; display:block; height:280px; object-fit:cover; object-position:top center;
  }
  .flow-screen-label{
    padding:14px 18px;
    font-family:var(--font-display); font-weight:600;
    font-size:.82rem; color:var(--ink);
    display:flex; align-items:center; gap:10px;
  }
  .flow-screen-label .flow-step{
    width:24px; height:24px; border-radius:50%;
    background:linear-gradient(135deg,var(--blue),var(--dark-blue));
    color:#fff; font-size:.72rem; font-weight:700;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }
  .flow-features{
    display:grid; grid-template-columns:repeat(2,1fr); gap:16px;
    max-width:880px; margin:0 auto;
  }
  .flow-feature{
    display:flex; align-items:flex-start; gap:12px;
    padding:16px 20px;
    background:rgba(99,178,245,.05);
    border-radius:12px;
    transition:background .25s ease;
  }
  .flow-feature:hover{ background:rgba(99,178,245,.1); }
  .flow-feature .ff-icon{
    width:32px; height:32px; border-radius:8px;
    background:linear-gradient(135deg,var(--blue),var(--dark-blue));
    color:#fff; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-display); font-weight:700; font-size:.78rem;
  }
  .flow-feature .ff-text{
    font-family:var(--font-ui); font-size:.84rem; line-height:1.6;
    color:var(--gray-600);
  }
  .flow-feature .ff-text strong{ color:var(--ink); font-weight:600; }

  /* ============ FOOTER ============ */
  .case-footer{
    padding:80px var(--space-x) 60px;
    text-align:center;
    background:linear-gradient(180deg,#f8f6f8 0%,#f4f1f1 100%);
    position:relative; overflow:hidden;
  }
  .case-footer::before{
    content:''; position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(ellipse 60% 40% at 50% 0%,rgba(99,178,245,.06),transparent 60%);
  }
  .case-footer-content{ position:relative; z-index:1; max-width:600px; margin:0 auto; }
  .case-footer h3{
    font-family:var(--font-display); font-weight:800;
    font-size:1.8rem; margin-bottom:16px;
  }
  .case-footer h3 .gradient-text{
    background:var(--gradient-name);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
  }
  .case-footer p{
    font-family:var(--font-ui); font-size:1rem; color:var(--gray-600);
    margin-bottom:32px;
  }
  .case-footer-btn{
    display:inline-flex; align-items:center; gap:10px;
    font-family:var(--font-display); font-weight:600; font-size:1rem;
    color:#fff; background:var(--gradient);
    padding:14px 32px; border-radius:50px; text-decoration:none;
    transition:transform .3s ease, box-shadow .3s ease;
  }
  .case-footer-btn:hover{ transform:translateY(-3px); box-shadow:0 12px 32px rgba(255,61,127,.3); }
  .case-footer-btn svg{ width:18px; height:18px; }

  /* ============ RESPONSIVE ============ */
  @media (max-width:1024px){
    :root{ --space-x:32px; }
    .container{ padding:0 32px; }
    .case-header{ padding:48px 32px 0; }
    .case-hero{ padding:0 32px; }
    .case-section{ padding:48px 32px; }
    .objectives-grid{ grid-template-columns:1fr; gap:32px; }
    .case-accordions{ padding:36px 32px; }
    .acc-head{ padding:18px 4px; }
    .acc-content{ padding:12px 24px 28px; }
    .persona-container{ grid-template-columns:1fr; gap:24px; }
    .persona-image{ width:220px; margin:0 auto; }
    .persona-details{ grid-template-columns:1fr; }
    .thinking-grid{ grid-template-columns:1fr; gap:24px; }
    .thinking-image{ max-width:320px; margin:0 auto; }
    .design-images .phone{ width:160px; height:320px; }
    .hypothesis-grid{ grid-template-columns:1fr; gap:16px; }
    .metrics-row{ grid-template-columns:1fr; gap:16px; }
    .benchmark-findings{ grid-template-columns:1fr; gap:16px; }
    .benchmark-phones .phone{ width:150px; height:300px; }
    .flow-screens{ grid-template-columns:repeat(2,1fr); gap:16px; }
    .flow-features{ grid-template-columns:1fr; gap:12px; }
    .desktop-screen img{ height:180px; }
    .mobile-screen img{ height:220px; }
    .flow-screen, .flow-screen.desktop, .flow-screen.mobile{ transform:none; }
    .flow-screen:hover{ transform:translateY(-8px) scale(1.02); }
    .case-footer{ padding:60px 32px 48px; }
  }
  @media (max-width:768px){
    .case-header-logo{ width:180px; height:58px; }
    .case-header-info{ font-size:.88rem; line-height:1.7; }
    .case-section-title{ font-size:1.6rem; }
    .case-label{ font-size:1rem; }
    .design-images .phone{ width:150px; height:300px; }
    .design-images{ gap:16px; }
  }
  @media (max-width:640px){
    :root{ --space-x:20px; }
    .navbar{ padding:12px 20px; }
    .case-header{ padding:32px 20px 0; }
    .case-hero{ padding:0 20px; margin-bottom:48px; }
    .case-section{ padding:40px 20px; }
    .case-accordions{ padding:24px 16px; }
    .acc-head{ padding:16px 4px; }
    .acc-head-left{ font-size:.95rem; gap:10px; }
    .acc-content{ padding:10px 20px 24px; }
    .persona-image{ width:160px; }
    .design-images .phone{ width:130px; height:260px; }
    .design-images{ gap:12px; }
    .case-footer{ padding:48px 20px 32px; }
    .back-to-top{ bottom:20px; right:20px; width:42px; height:42px; }
  }
  @media (max-width:480px){
    :root{ --space-x:16px; }
    .navbar{ padding:10px 16px; }
    .case-header{ padding:24px 16px 0; }
    .case-header-logo{ width:140px; height:48px; }
    .case-header-info{ font-size:.82rem; line-height:1.6; }
    .case-hero{ padding:0 16px; margin-bottom:32px; }
    .hero-desktop{ border-radius:14px; }
    .case-section{ padding:32px 16px; }
    .case-section-title{ font-size:1.4rem; }
    .case-label{ font-size:.92rem; }
    .case-accordions{ padding:20px 12px; }
    .acc-head{ padding:14px 2px; }
    .acc-head-left{ font-size:.9rem; }
    .acc-content{ padding:10px 16px 20px; }
    .persona-image{ width:140px; }
    .design-images .phone{ width:110px; height:220px; }
    .design-images{ gap:8px; }
    .case-footer{ padding:40px 16px 28px; }
    .back-to-top{ bottom:16px; right:16px; width:40px; height:40px; }
  }
  @media (max-width:360px){
    :root{ --space-x:12px; }
    .navbar{ padding:8px 12px; }
    .case-header{ padding:20px 12px 16px; }
    .case-header-logo{ width:120px; height:42px; }
    .case-header-info{ font-size:.78rem; }
    .case-hero{ padding:0 12px; margin-bottom:24px; }
    .case-section{ padding:28px 12px; }
    .case-section-title{ font-size:1.25rem; }
    .case-accordions{ padding:16px 10px; }
    .acc-head{ padding:12px 2px; }
    .acc-head-left{ font-size:.85rem; gap:8px; }
    .acc-content{ padding:8px 12px 16px; }
    .persona-image{ width:120px; }
    .design-images .phone{ width:95px; height:190px; }
    .case-footer{ padding:32px 12px 24px; }
  }

  /* ============ EFECTOS DE REVELADO AI ============ */
  .reveal-blur{
    opacity:0; filter:blur(12px); transform:translateY(30px) scale(.96);
    transition:opacity .6s ease, filter .6s ease, transform .6s cubic-bezier(.4,0,.2,1);
  }
  .reveal-blur.in-view{
    opacity:1; filter:blur(0); transform:translateY(0) scale(1);
  }
  .reveal-blur.in-view[data-delay="0"]{ transition-delay:0ms; }
  .reveal-blur.in-view[data-delay="1"]{ transition-delay:100ms; }
  .reveal-blur.in-view[data-delay="2"]{ transition-delay:200ms; }
  .reveal-blur.in-view[data-delay="3"]{ transition-delay:300ms; }
  .reveal-blur.in-view[data-delay="4"]{ transition-delay:400ms; }
  .reveal-blur.in-view[data-delay="5"]{ transition-delay:500ms; }

  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
    .reveal-blur{ opacity:1; filter:blur(0); transform:none; }
  }

  /* ============ PANEL DE ACCESIBILIDAD WCAG 2.1 ============ */
  .a11y-trigger{
    position:fixed; bottom:32px; left:32px; z-index:102;
    width:48px; height:48px; border-radius:50%;
    background:linear-gradient(135deg,#4A5FE8,#8B5CF6);
    border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 8px 24px rgba(74,95,232,.35),0 0 0 1px rgba(255,255,255,.1);
    transition:transform .3s ease,box-shadow .3s ease,background .3s ease;
  }
  .a11y-trigger:hover{
    transform:translateY(-3px) scale(1.06);
    box-shadow:0 12px 32px rgba(74,95,232,.45),0 0 24px rgba(139,92,246,.3);
  }
  .a11y-trigger svg{ width:22px; height:22px; color:#fff; }
  .a11y-trigger:focus-visible{ outline:3px solid #fff; outline-offset:3px; }
  .a11y-trigger.has-active{
    background:linear-gradient(135deg,#FF3D7F,#C239B3);
    box-shadow:0 8px 24px rgba(255,61,127,.4),0 0 0 1px rgba(255,255,255,.1);
    animation:a11yTriggerPulse 2s ease-in-out infinite;
  }
  .a11y-trigger.has-active:hover{
    box-shadow:0 12px 32px rgba(255,61,127,.5),0 0 24px rgba(194,57,179,.3);
  }
  @keyframes a11yTriggerPulse{
    0%,100%{ box-shadow:0 8px 24px rgba(255,61,127,.4),0 0 0 0 rgba(255,61,127,.45); }
    50%{ box-shadow:0 8px 24px rgba(255,61,127,.4),0 0 0 12px rgba(255,61,127,0); }
  }
  .a11y-trigger-badge{
    position:absolute; top:-4px; right:-4px;
    min-width:20px; height:20px; border-radius:10px;
    background:#fff; color:#FF3D7F;
    font-family:var(--font-display); font-size:11px; font-weight:800;
    display:flex; align-items:center; justify-content:center;
    padding:0 6px; border:2px solid #FF3D7F;
    box-shadow:0 2px 8px rgba(255,61,127,.4);
    transform:scale(0); transition:transform .3s cubic-bezier(.2,.8,.2,1);
    pointer-events:none;
  }
  .a11y-trigger.has-active .a11y-trigger-badge{ transform:scale(1); }
  .a11y-trigger-tip{
    position:absolute; bottom:calc(100% + 12px); left:50%;
    transform:translateX(-50%) translateY(8px);
    background:rgba(20,20,26,.96); color:#fff;
    font-family:var(--font-ui); font-size:.72rem; font-weight:500;
    padding:8px 12px; border-radius:10px; white-space:nowrap;
    border:1px solid rgba(255,255,255,.1);
    box-shadow:0 8px 24px rgba(0,0,0,.3);
    opacity:0; visibility:hidden;
    transition:opacity .25s ease,transform .25s ease,visibility .25s;
    pointer-events:none;
  }
  .a11y-trigger-tip::after{
    content:''; position:absolute; top:100%; left:50%;
    transform:translateX(-50%);
    border:5px solid transparent; border-top-color:rgba(20,20,26,.96);
  }
  .a11y-trigger.has-active:hover .a11y-trigger-tip{
    opacity:1; visibility:visible;
    transform:translateX(-50%) translateY(0);
  }
  @media (prefers-reduced-motion:reduce){
    .a11y-trigger.has-active{ animation:none; }
  }
  .a11y-panel{
    position:fixed; bottom:90px; left:32px; z-index:103;
    width:320px; max-width:calc(100vw - 64px);
    max-height:calc(100vh - 120px);
    overflow-y:auto; overflow-x:hidden;
    background:#fff; border-radius:18px;
    box-shadow:0 24px 60px rgba(20,20,26,.25),0 0 0 1px rgba(0,0,0,.06);
    padding:20px; opacity:0; visibility:hidden;
    transform:translateY(16px) scale(.96);
    transition:opacity .3s ease,transform .3s ease,visibility .3s;
  }
  .a11y-panel.open{ opacity:1; visibility:visible; transform:translateY(0) scale(1); }
  .a11y-panel::-webkit-scrollbar{ width:6px; }
  .a11y-panel::-webkit-scrollbar-track{ background:transparent; }
  .a11y-panel::-webkit-scrollbar-thumb{ background:#D1D5DB; border-radius:3px; }
  .a11y-panel::-webkit-scrollbar-thumb:hover{ background:#9CA3AF; }
  .a11y-panel-header{
    position:sticky; top:-20px; z-index:1;
    display:flex; align-items:center; justify-content:space-between;
    margin:-20px -20px 16px; padding:18px 20px 14px;
    background:#fff; border-bottom:1px solid #EEF0F3;
    border-radius:18px 18px 0 0;
  }
  .a11y-panel-title{
    font-family:var(--font-display); font-weight:700; font-size:1.05rem;
    color:var(--ink); display:flex; align-items:center; gap:8px;
  }
  .a11y-panel-title svg{ width:18px; height:18px; color:#4A5FE8; }
  .a11y-close{
    width:32px; height:32px; border-radius:8px; border:none;
    background:#F4F5F7; cursor:pointer; display:flex;
    align-items:center; justify-content:center; transition:background .2s;
  }
  .a11y-close:hover{ background:#E8EAF0; }
  .a11y-close svg{ width:16px; height:16px; color:var(--ink); }
  .a11y-close:focus-visible{ outline:2px solid #4A5FE8; outline-offset:2px; }
  .a11y-section{ margin-bottom:14px; }
  .a11y-section:last-child{ margin-bottom:0; }
  .a11y-label{
    font-family:var(--font-ui); font-size:.7rem; font-weight:600;
    text-transform:uppercase; letter-spacing:.08em;
    color:var(--gray-600); margin-bottom:8px;
  }
  .a11y-controls{ display:flex; align-items:center; gap:6px; }
  .a11y-btn{
    flex:1; padding:8px 10px; border-radius:9px;
    border:1.5px solid #E8EAF0; background:#fff;
    font-family:var(--font-ui); font-size:.82rem; font-weight:500;
    color:var(--ink); cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:5px;
    transition:all .2s ease;
  }
  .a11y-btn:hover{ border-color:#4A5FE8; background:rgba(74,95,232,.04); }
  .a11y-btn:focus-visible{ outline:2px solid #4A5FE8; outline-offset:2px; }
  .a11y-btn.active{
    background:linear-gradient(135deg,#4A5FE8,#8B5CF6);
    border-color:transparent; color:#fff;
    box-shadow:0 4px 12px rgba(74,95,232,.3);
  }
  .a11y-btn svg{ width:16px; height:16px; }
  .a11y-value{
    font-family:var(--font-display); font-weight:700; font-size:.9rem;
    color:#4A5FE8; min-width:44px; text-align:center;
  }
  .a11y-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
  .a11y-hint{
    font-family:var(--font-ui); font-size:.68rem; color:var(--gray-600);
    margin-top:6px; line-height:1.35;
  }
  html.a11y-font-sm{ font-size:87.5%; }
  html.a11y-font-lg{ font-size:112.5%; }
  html.a11y-font-xl{ font-size:125%; }
  html.a11y-contrast-high{ filter:contrast(1.6) saturate(1.3) brightness(1.05); }
  html.a11y-contrast-high body{ background:#000 !important; color:#fff !important; }
  html.a11y-contrast-high *:not(svg):not(.a11y-panel *):not(.a11y-trigger *){
    color:#fff !important; border-color:#fff !important;
  }
  html.a11y-contrast-high a,
  html.a11y-contrast-high .gradient-text{
    color:#FFD700 !important; -webkit-text-fill-color:#FFD700 !important;
  }
  html.a11y-contrast-yellow body{ background:#000 !important; color:#FFD700 !important; }
  html.a11y-contrast-yellow *:not(svg):not(.a11y-panel *):not(.a11y-trigger *){
    color:#FFD700 !important; -webkit-text-fill-color:#FFD700 !important;
    border-color:#FFD700 !important;
  }
  html.a11y-contrast-invert{ filter:invert(1) hue-rotate(180deg); }
  html.a11y-contrast-invert img,
  html.a11y-contrast-invert .a11y-panel,
  html.a11y-contrast-invert .a11y-trigger{
    filter:invert(1) hue-rotate(180deg);
  }
  html.a11y-motion-reduce *,
  html.a11y-motion-reduce *::before,
  html.a11y-motion-reduce *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  html.a11y-motion-reduce{ scroll-behavior:auto; }
  html.a11y-links-underline a:not(.nav-logo):not(.a11y-btn):not(.a11y-close):not(.a11y-trigger):not(.nav-back):not(.case-footer-btn){
    text-decoration:underline; text-underline-offset:2px;
  }
  .a11y-reset-section{
    margin-top:14px; padding-top:14px;
    border-top:1px solid #EEF0F3;
  }
  .a11y-reset-btn{
    width:100%; padding:10px; border-radius:11px;
    border:1.5px solid #FF3D7F; background:rgba(255,61,127,.04);
    font-family:var(--font-ui); font-size:.84rem; font-weight:600;
    color:#FF3D7F; cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:7px;
    transition:all .2s ease;
  }
  .a11y-reset-btn:hover{
    background:linear-gradient(135deg,#FF3D7F,#C239B3);
    color:#fff; border-color:transparent;
    box-shadow:0 6px 18px rgba(255,61,127,.3);
  }
  .a11y-reset-btn:focus-visible{ outline:2px solid #FF3D7F; outline-offset:2px; }
  .a11y-reset-btn svg{ width:17px; height:17px; }
  @media (max-width:640px){
    .a11y-trigger{ bottom:20px; left:20px; width:42px; height:42px; }
    .a11y-trigger-badge{ min-width:18px; height:18px; font-size:10px; }
    .a11y-panel{
      bottom:74px; left:20px; right:20px; width:auto;
      max-width:calc(100vw - 40px); max-height:calc(100vh - 110px);
      padding:16px;
    }
    .a11y-panel-header{ margin:-16px -16px 12px; padding:14px 16px 12px; }
  }