:root{
    --black:#000;
    --white:#fff;
    --line:#000;
    --side: clamp(1.25rem, 5vw, 3.5rem);
    --gap: clamp(0.6rem, 1.4vw, 1.1rem);
    /* Ancho real del logo (764×64px, renderizado a 15px de alto) — el título,
       la foto y la ficha de cada proyecto se alinean con el punto donde
       termina el logo, no con el margen de la página. */
    --content-indent: 179px;
    --content-max: 820px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  .sr-only{
    position:absolute;
    width:1px; height:1px;
    padding:0; margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
  }
  body{
    margin:0;
    background:var(--white);
    color:var(--black);
    font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit;}

  /* ---------- NAV ---------- */
  header{
    display:flex; align-items:center; justify-content:space-between;
    padding: 1.6rem var(--side) 1.2rem;
    background:var(--white);
  }
  .brand{
    display:flex; align-items:center;
    text-decoration:none;
  }
  .brand img{
    height:15px;
    width:auto;
    display:block;
  }
  nav{display:flex; gap:2rem;}
  nav a{
    font-size:1.02rem;
    text-decoration:none;
    padding-bottom:2px;
    border-bottom:1px solid transparent;
  }
  nav a:hover{border-bottom:1px solid var(--black);}

  /* ---------- HOME: línea de presentación ---------- */
  .home-intro{
    padding: 0 var(--side);
  }
  .home-intro h1{
    font-style:italic;
    font-weight:400;
    font-size:clamp(0.8rem, 1.6vw, 0.95rem);
    color:#777;
    max-width:38rem;
    margin:0;
    line-height:1.4;
  }
  @media (max-width:640px){
    .home-intro h1{ font-size:0.78rem; }
  }

  /* ---------- PROYECTOS: tira horizontal tipo mosaico ---------- */
  .grid{
    display:flex;
    align-items:flex-start;
    flex-wrap:nowrap;
    gap:var(--gap);
    padding: clamp(2.5rem, 6vw, 4.5rem) var(--side) 3rem;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
  }

  .card{
    flex:0 0 auto;
    display:block;
    overflow:hidden;
    text-decoration:none;
    height:clamp(220px, 34vw, 460px);
  }
  .card img{
    display:block;
    height:100%;
    width:auto;
    max-width:none;
    transition:transform .5s ease;
  }
  .card:hover img{transform:scale(1.03);}

  .card:nth-child(1){ height:clamp(260px, 40vw, 540px); margin-top:3.5rem; }
  .card:nth-child(2){ height:clamp(260px, 38vw, 520px); margin-top:0; }
  .card:nth-child(3){ height:clamp(260px, 40vw, 540px); margin-top:6rem; }
  .card:nth-child(4){ height:clamp(240px, 34vw, 460px); margin-top:1rem; }
  .card:nth-child(5){ height:clamp(230px, 34vw, 500px); margin-top:7rem; }
  .card:nth-child(6){ height:clamp(250px, 36vw, 480px); margin-top:0; }
  .card:nth-child(7){ height:clamp(250px, 38vw, 500px); margin-top:4rem; }
  .card:nth-child(8){ height:clamp(230px, 33vw, 440px); margin-top:1.5rem; }
  .card:nth-child(9){ height:clamp(260px, 40vw, 540px); margin-top:1.5rem; }
  .card:nth-child(10){ height:clamp(210px, 30vw, 420px); margin-top:3.5rem; }

  @media (max-width:640px){
    /* En móvil, lista vertical natural en vez de tira horizontal:
       más fácil de recorrer con el dedo y no depende de que las fotos
       carguen a tiempo mientras se desliza de lado. */
    .grid{
      flex-direction:column;
      overflow-x:hidden;
      overflow-y:visible;
      gap: clamp(1.4rem, 6vw, 2.2rem);
      padding: clamp(1.6rem, 6vw, 2.4rem) var(--side) 1rem;
    }
    .card:nth-child(n){ width:100%; height:auto; margin-top:0; }
    .card img{
      width:100%;
      height:auto;
    }
  }

  a:focus-visible{outline:2px solid var(--black); outline-offset:2px;}

  @media (prefers-reduced-motion:reduce){
    .card img{transition:none;}
  }

  /* ---------- ABOUT ---------- */
  .about-page{
    display:grid;
    padding: 2rem var(--side) 4rem;
  }

  .about-page{
    grid-template-columns: minmax(160px, 20%) 1fr 15rem;
    grid-template-areas:
      "photo-main bio contact"
      ".         press   .";
    column-gap: clamp(2rem, 5vw, 4rem);
    row-gap: clamp(1rem, 2.2vw, 1.5rem);
    align-items:stretch;
  }

  .about-photo-main{
    grid-area:photo-main;
    overflow:hidden;
  }
  .about-photo-main img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
  }

  .about-bio{
    grid-area:bio;
    max-width:44rem;
  }
  .about-bio p{
    font-size:0.95rem;
    line-height:1.6;
    color:#333;
    margin:0 0 1.3rem;
    max-width:52ch;
  }
  .about-bio p:last-child{margin-bottom:0;}
  .about-bio em{font-style:italic;}

  .about-contact{
    grid-area:contact;
    align-self:start;
    display:flex;
    flex-direction:column;
    gap:1.6rem;
  }
  .about-contact-cta{
    font-size:0.95rem;
    line-height:1.5;
    color:#333;
    margin:0 0 0.4rem;
    max-width:16rem;
  }
  .about-contact .item{
    display:flex;
    flex-direction:column;
    gap:0.25rem;
  }
  .about-contact .label{
    font-size:0.72rem;
    opacity:0.5;
  }
  .about-contact a{
    font-weight:600;
    font-size:1.1rem;
    text-decoration:none;
  }
  .about-contact a:hover{text-decoration:underline; text-underline-offset:3px;}

  .about-press{
    grid-area:press;
    max-width:52ch;
  }
  .about-press .label{
    display:block;
    font-size:0.72rem;
    opacity:0.5;
    margin-bottom:0.8rem;
  }
  .about-press ul{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:0.4rem;
  }
  .about-press li{
    font-size:0.95rem;
    line-height:1.6;
    color:#333;
  }
  .about-press a{
    color:inherit;
    text-decoration:none;
    border-bottom:1px solid transparent;
  }
  .about-press a:hover{border-bottom-color:currentColor;}
  .about-press .outlet{
    font-weight:600;
  }

  @media (max-width:800px){
    .about-page{
      grid-template-columns:1fr;
      grid-template-areas:
        "photo-main"
        "bio"
        "press"
        "contact";
      row-gap:1.4rem;
    }
    .about-photo-main{aspect-ratio:4/5; max-height:46vh; margin-bottom:0.6rem;}
  }

  /* ---------- PROYECTO (detalle) ---------- */
  .project-page{
    display:flex;
    flex-direction:column;
    padding: 0.45rem var(--side) 2.5rem;
  }

  .breadcrumb{
    font-size:0.72rem;
    color:#888;
    margin-bottom:2rem;
  }
  .breadcrumb a{ color:#888; text-decoration:none; }
  .breadcrumb a:hover{ text-decoration:underline; text-underline-offset:3px; }

  .project-back{
    display:inline-block;
    font-size:0.85rem;
    text-decoration:none;
    margin-bottom:2.5rem;
  }
  .project-back:hover{text-decoration:underline; text-underline-offset:3px;}

  .project-next{
    display:flex;
    align-items:baseline;
    gap:0.6rem;
    margin-top: clamp(2.5rem, 5vw, 4rem);
    padding-top: clamp(1.2rem, 2.5vw, 1.8rem);
    border-top:1px solid #e5e5e5;
    text-decoration:none;
    color:inherit;
  }
  .project-next-label{
    font-size:0.72rem;
    opacity:0.5;
  }
  .project-next-title{
    font-size:1rem;
    font-weight:600;
  }
  .project-next:hover .project-next-title{text-decoration:underline; text-underline-offset:3px;}

  .project-header{
    max-width:44rem;
    margin-bottom:1.6rem;
    margin-left: var(--content-indent);
  }
  .project-header h1{
    font-style:normal;
    font-weight:500;
    font-size:1.6rem;
    margin:0;
    line-height:1.2;
  }
  .project-header p{
    font-size:0.92rem;
    color:#555;
    margin:0.5rem 0 0;
    line-height:1.35;
  }
  #lang-toggle{ font-size:0.85rem; margin-left:auto; }

  .project-gallery-first{
    margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
  }

  .project-caption{
    display:flex;
    align-items:baseline;
    flex-wrap:wrap;
    justify-content:space-between;
    gap:1rem 2.5rem;
    max-width: min(var(--content-max), calc(100% - var(--content-indent)));
    margin-left: var(--content-indent);
    margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
    padding-bottom: clamp(1.2rem, 2.5vw, 1.8rem);
    border-bottom:1px solid #eee;
  }
  .project-caption .item{display:flex; flex-direction:column; gap:0.3rem;}
  .project-caption .label{font-size:0.7rem; opacity:0.5;}
  .project-caption .value{
    font-style:italic;
    font-size:0.92rem;
  }

  .project-gallery-stack{
    display:flex;
    flex-direction:column;
    gap: clamp(1.4rem, 3.5vw, 2.6rem);
    max-width: min(var(--content-max), calc(100% - var(--content-indent)));
    margin-left: var(--content-indent);
    margin-right:0;
  }
  .project-gallery-stack img{
    display:block;
    width:100%;
    height:auto;
  }
  .project-gallery-stack img.o-p{
    max-width:640px;
    margin:0 auto;
  }

  @media (max-width:800px){
    .project-page{padding-top:0.35rem;}
    .project-header{ margin-left:0; }
    .project-header h1{font-size:1.15rem;}
    .project-header p{font-size:0.78rem;}
    .project-caption{gap:1.2rem; margin-left:0; max-width:100%;}
    .project-caption .value{font-size:0.74rem;}
    .project-caption .label{font-size:0.56rem;}
    .project-gallery-stack{ margin-left:0; max-width:100%; }
    .project-gallery-stack img.o-p{max-width:80%;}
  }

  /* ---------- FOOTER / LEGAL ---------- */
  #site-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding: 1.5rem var(--side) 2rem;
    font-size:0.72rem;
    color:#888;
    border-top:1px solid #eee;
    margin-top:2rem;
  }
  #site-footer a{
    color:#888;
    text-decoration:none;
  }
  #site-footer a:hover{text-decoration:underline; text-underline-offset:3px;}

  .legal-page{
    display:block;
    padding: 2rem var(--side) 4rem;
  }
  .legal-content{max-width:42rem;}
  .legal-content h1{
    font-style:normal;
    font-weight:500;
    font-size:1.3rem;
    margin:0 0 2rem;
  }
  .legal-content h2{
    font-style:normal;
    font-weight:600;
    font-size:0.95rem;
    margin:2.2rem 0 0.8rem;
  }
  .legal-content h2:first-of-type{margin-top:0;}
  .legal-content p{
    font-size:0.9rem;
    line-height:1.6;
    color:#333;
    margin:0 0 1rem;
  }