.dwa-web-animation{
      --bg:#000;
      --fg:var(--white);
      --muted:rgba(245,242,236,.72);
      --line:rgba(245,242,236,.92);
      --line-soft:rgba(245,242,236,.18);
      --ease:cubic-bezier(.22,.78,.22,1);
    }
    .dwa-web-animation *{box-sizing:border-box}

    /*
      Tamaño pensado para insertarse en el hueco del bloque INDEXACIÓ A GOOGLE.
      En la web real: width:100%; height:220px; sin márgenes externos propios.
    */
    .dwa-web-animation{
      width:100%;
      height:220px;
      position:relative;
      overflow:hidden;
      background:#000;
    }

    .dwa-scene{
      position:absolute;
      inset:0;
      opacity:0;
      transform:translateY(8px);
      transition:opacity .72s var(--ease), transform .78s var(--ease);
      pointer-events:none;
    }
    .dwa-scene.dwa-is-active{opacity:1;transform:none;pointer-events:auto}
    .dwa-scene.dwa-is-out{opacity:0;transform:translateY(-6px)}

    .dwa-anton{
      margin:0;
      font-family:var(--title-typeface);
      font-weight:400;
      text-transform:uppercase;
      letter-spacing:-.015em;
      color:var(--fg);
    }

    /* ESCENA 1 */
    .dwa-intro{
      display:flex;
      flex-direction:column;
      justify-content:center;
      height:100%;
      padding:4px 0;
    }
    .dwa-intro-title{
      font-size:var(--title-size);
      line-height:var(--title-leading);
    }
    .dwa-intro-time{
      margin-top:var(--space-md);
      font-size:60px;
      line-height:1;
      text-align:center;
      width:100%;
    }
    .dwa-reveal{display:block;overflow:hidden}
    .dwa-reveal > span{
      display:block;
      transform:translateY(10px);
      opacity:0;
      transition:transform .82s var(--ease), opacity .72s ease;
    }
    .dwa-reveal.dwa-show > span{transform:none;opacity:1}

    /* ESCENA 2 */
    .dwa-build{
      display:grid;
      grid-template-rows:50px 1fr;
      height:100%;
    }
    .dwa-build-copy{
      position:relative;
      overflow:hidden;
    }
    .dwa-build-word{
      position:absolute;
      inset:0;
      display:flex;
      align-items:flex-start;
      font-family:var(--title-typeface);
      text-transform:uppercase;
      font-size:var(--title-size);
      line-height:var(--title-leading);
      color:var(--fg);
      opacity:0;
      transform:translateY(14px);
      transition:opacity .72s var(--ease), transform .76s var(--ease);
    }
    .dwa-build-word.dwa-active{opacity:1;transform:none}
    .dwa-build-word.dwa-exit{opacity:0;transform:translateY(-10px)}

    .dwa-browser-stage{
      display:flex;
      align-items:center;
      justify-content:center;
      min-height:0;
    }
    .dwa-browser{
      width:314px;
      height:148px;
      border:1.5px solid var(--line);
      border-radius:7px;
      background:#000;
      overflow:hidden;
      opacity:0;
      transform:translateY(7px) scale(.985);
      transition:
        width 1.35s var(--ease),
        height 1.35s var(--ease),
        border-radius 1.35s var(--ease),
        opacity .72s var(--ease),
        transform .8s var(--ease);
    }
    .dwa-browser.dwa-show{opacity:1;transform:none}
    .dwa-browser.dwa-mobile{width:104px;height:162px;border-radius:17px}

    .dwa-browser-top{
      height:24px;
      border-bottom:1px solid var(--line-soft);
      display:flex;
      align-items:center;
      gap:4px;
      padding:0 8px;
    }
    .dwa-dot{width:3px;height:3px;border-radius:50%;background:var(--fg);opacity:.8}
    .dwa-address{height:8px;width:42%;margin-left:5px;border:1px solid var(--line-soft);border-radius:999px}

    .dwa-site{
      display:grid;
      grid-template-columns:1.05fr .95fr;
      gap:9px;
      padding:11px;
      transition:grid-template-columns 1.2s var(--ease), gap 1.2s var(--ease), padding 1.2s var(--ease);
    }
    .dwa-browser.dwa-mobile .dwa-site{grid-template-columns:1fr;gap:6px;padding:8px}

    .dwa-bars{display:flex;flex-direction:column;gap:5px}
    .dwa-bar{height:5px;background:var(--fg)}
    .dwa-bar.dwa-dim{opacity:.42}
    .dwa-w35{width:35%}.dwa-w52{width:52%}.dwa-w68{width:68%}.dwa-w88{width:88%}
    .dwa-cta{margin-top:2px;width:48px;height:15px;background:var(--fg)}
    .dwa-media{min-height:72px;border:1px solid var(--line-soft);position:relative;overflow:hidden}
    .dwa-media::before,.dwa-media::after{content:"";position:absolute;height:1px;background:var(--fg);opacity:.85}
    .dwa-media::before{width:48%;left:10%;top:65%;transform:rotate(-20deg)}
    .dwa-media::after{width:34%;left:45%;top:42%;transform:rotate(24deg)}

    /* ESCENA 3 */
    .dwa-search{
      display:flex;
      flex-direction:column;
      justify-content:center;
      height:100%;
    }
    .dwa-search-title{
      font-size:var(--title-size);
      line-height:var(--title-leading);
      margin-bottom:var(--space-md);
    }
    .dwa-searchbox{
      width:54px;
      height:48px;
      border:1.8px solid var(--line);
      border-radius:999px;
      display:flex;
      align-items:center;
      gap:12px;
      padding:0 16px;
      overflow:hidden;
      transition:width 1s var(--ease);
    }
    .dwa-searchbox.dwa-expand{width:100%}
    .dwa-loupe{width:18px;height:18px;border:1.8px solid var(--fg);border-radius:50%;position:relative;flex:0 0 auto}
    .dwa-loupe::after{content:"";position:absolute;width:8px;height:1.8px;background:var(--fg);right:-6px;bottom:-1px;transform:rotate(45deg);transform-origin:left center;border-radius:999px}
    .dwa-query{
      font-size:16px;
      line-height:1;
      color:var(--fg);
      white-space:nowrap;
      min-width:0;
      overflow:hidden;
      flex:0 1 auto;
    }
    .dwa-caret{width:1.5px;height:22px;background:var(--fg);animation:blink .8s step-end infinite;flex:0 0 auto}
    @keyframes blink{50%{opacity:0}}

    @media (max-width:360px){
      .dwa-web-animation{width:100%}
      .dwa-intro-title{font-size:var(--title-size)}
      .dwa-intro-time{font-size:54px}
      .dwa-search-title{font-size:var(--title-size)}
      .dwa-browser{width:100%}
    }

    @media (prefers-reduced-motion:reduce){
      .dwa-web-animation *,.dwa-web-animation *::before,.dwa-web-animation *::after{animation:none!important;transition:none!important}
      .dwa-scene{display:none}
      #searchScene{display:flex;opacity:1;transform:none}
      .dwa-searchbox{width:100%}
      .dwa-caret{display:none}
    }

.dwa-web-animation { color: var(--fg); font-family: var(--typeface); }
.dwa-browser { max-width:100%; }
.web-story { margin:0; padding-block:var(--space-sm); }
.web-story-frame { width:calc(100% - 48px); margin-inline:auto; }
.about + .intro { margin-block:var(--space-sm); }
.about + .intro .hero-media { width:min(70%,36svh); max-width:300px; }
@media(max-width:350px){.web-story-frame{width:calc(100% - 40px)}}