#david-proto{--paper:light-dark(#f2efe8,#171715);--ink:light-dark(#252620,#f2efe8);--quiet:light-dark(#65665e,#b5b4aa);--line:light-dark(#d2d0c5,#414239);--signal:light-dark(#a63829,#d81e05);font-family:Arial,sans-serif;background:var(--paper);color:var(--ink);padding:30px 5%;box-sizing:border-box}#david-proto *{box-sizing:border-box}#david-proto a{color:inherit;text-decoration:none}#david-proto a:hover{text-decoration:underline;text-underline-offset:5px}#david-proto .eyebrow{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--quiet)}#david-proto .intro{padding:64px 0 54px;display:grid;grid-template-columns:1.4fr 1fr;gap:32px;align-items:end}#david-proto h1{font-family:Georgia,serif;font-size:clamp(46px,7vw,82px);line-height:1.02;font-weight:400;letter-spacing:-3px;margin:0}#david-proto h1 em{color:var(--signal);font-weight:400}#david-proto p{font-size:16px;line-height:1.65;margin:0}#david-proto .intro p{max-width:350px}#david-proto .feature{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(20px,5vw,72px);margin:8px 0 clamp(12px,2.4vw,24px)}#david-proto .feature-copy{align-self:center;max-width:480px}#david-proto h2{font-family:Georgia,serif;font-weight:400;font-size:36px;letter-spacing:-1px;line-height:1.1;margin:17px 0}#david-proto .book-stage{min-height:330px;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#293537 0%,#202624 34%,transparent 70%);padding:22px}#david-proto .book{width:180px;min-height:255px;transform:rotate(-7deg);background:#b43d2b;color:#fff5df;box-shadow:10px 14px 0 #0002;border-left:7px solid #8d2c20;padding:22px 17px;display:flex;flex-direction:column;justify-content:space-between}#david-proto .projects{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,42px);margin-bottom:0}#david-proto .project h2{font-size:29px;margin:0 0 14px}#david-proto .project p{color:var(--quiet);font-size:15px}#david-proto .project-art{height:125px;margin-top:24px;display:flex;align-items:center;justify-content:center;background:light-dark(#e5e6de,#242821);overflow:hidden}@media(max-width:600px){#david-proto .intro{grid-template-columns:1fr;padding-top:40px}#david-proto .feature{grid-template-columns:1fr}#david-proto .feature-copy{padding:0}#david-proto .projects{grid-template-columns:1fr}#david-proto .book-stage{min-height:0;padding:12px}#david-proto h1{letter-spacing:-2px}}

:root{color-scheme:dark}html{scroll-behavior:smooth;background:#171715}body{margin:0;background:#171715;color:#f2efe8}#david-proto{max-width:1280px;margin:0 auto;padding:0 6% 42px}#david-proto .intro{padding:88px 0 65px}#david-proto h1{font-size:clamp(50px,7.5vw,96px)}#david-proto .intro p{max-width:420px;font-size:16px;line-height:1.55}#david-proto .intro{grid-template-columns:1.2fr 1fr}#david-proto a:focus-visible{outline:2px solid #d81e05;outline-offset:7px}#david-proto section{scroll-margin-top:28px}.skip{position:absolute;left:16px;top:-70px;background:#f2efe8;color:#171715;padding:12px;z-index:10}.skip:focus{top:12px}@media(max-width:600px){#david-proto{padding:0 6% 30px}#david-proto .intro{grid-template-columns:1fr;padding:48px 0 40px}#david-proto .intro p{font-size:16px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

#david-proto .intro-bio{padding-bottom:8px}
#david-proto .book-cover{display:block;width:min(100%,235px);height:auto;filter:drop-shadow(15px 18px 17px #0009) drop-shadow(3px 4px 4px #0005)}
#david-proto .project{display:flex;flex-direction:column;align-items:flex-start}
#david-proto .project p{margin-bottom:18px}
#david-proto .run-photo{width:100%;height:auto;margin:0}



#david-proto .run-photo{display:grid;justify-items:start;gap:8px}
#david-proto .run-photo img{display:block;width:100%;height:auto}
#david-proto figcaption{color:var(--quiet);font-size:12px}
@media(max-width:360px){#david-proto h1{font-size:clamp(38px,13vw,46px)}}

#dp-contact{padding:clamp(24px,4vw,44px) 0 8px;text-align:center}
#dp-contact .social-links{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;list-style:none;margin:0;padding:0}
#dp-contact .social-links a{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:6px;color:var(--ink)}
#dp-contact .social-links a:hover{color:var(--signal)}
#dp-contact .social-links svg{display:block;width:18px;height:18px}
#dp-contact small{display:block;margin-top:8px;color:var(--quiet);font-size:12px}

#david-proto .app-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 8px;width:min(100%,365px);height:auto;margin:0;padding:0;align-content:start;background:none;list-style:none;overflow:visible}
#david-proto .app-list li{display:grid;align-content:start;justify-items:start;gap:6px;text-align:left;font-size:12px;line-height:1.25;color:var(--quiet)}
#david-proto .app-list img{display:block;border-radius:24%;width:clamp(46px,6.5vw,68px);height:auto;aspect-ratio:1;box-shadow:0 8px 15px #0007;outline:1px solid #fff2}


@media(hover:hover) and (prefers-reduced-motion:no-preference){
  #david-proto .app-list img{transition:transform .2s ease}
  #david-proto .app-list li:hover img{transform:translateY(-3px) scale(1.1)}
}

/* Alinear los tres elementos de ambos proyectos sin alturas fijas. */
@supports (grid-template-rows: subgrid){
  @media(min-width:601px){
    #david-proto .projects{row-gap:0}
    #david-proto .project{display:grid;grid-row:span 3;grid-template-rows:subgrid;min-width:0}
    #david-proto .project .app-list,
    #david-proto .project .run-photo{margin:0;align-self:start}
    
  }
}
#david-proto .app-list img{max-width:100%}
#dp-contact .social-links a:focus-visible{outline-color:var(--ink);outline-offset:3px}

#david-proto .run-cutout{position:relative;width:min(100%,365px);filter:drop-shadow(3px 8px 9px #0007)}




#david-proto #dp-projects h2 a:is(:hover,:focus-visible){color:var(--signal);text-decoration:none}

@media(max-width:600px){#david-proto .feature{margin-bottom:28px}#david-proto .projects{row-gap:32px}}

/* La presentación ocupa la primera pantalla; los proyectos siguen en el flujo. */
#david-proto .intro {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  align-content: center;
  padding-block: 56px 88px;
}
#david-proto .intro-explore {
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: clamp(18px, 5svh, 48px);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--quiet);
  font-size: 13px;
  letter-spacing: .06em;
}
#david-proto .intro-explore:is(:hover, :focus-visible) {
  color: var(--ink);
  text-decoration: none;
}
#david-proto #dp-projects { padding-block-start: clamp(24px, 5vw, 60px); }

#david-proto .language-switch {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-end: 0;
  display: flex;
  align-items: center;
  gap: 0;
  color: #88877f;
  font-size: 10px;
  letter-spacing: .07em;
}
#david-proto .language-switch a {
  display: grid;
  place-items: center;
  min-width: 30px;
  min-height: 44px;
  text-decoration: none;
}
#david-proto .language-switch a[aria-current="page"] { color: var(--quiet); }
#david-proto .language-switch a:is(:hover,:focus-visible) { color: var(--ink); }