:root{
    --ink:#0c0c0c;
    --paper:#ffffff;
    --muted:#5c5c5c;
  }

  @font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/inter-latin-400-normal.woff2) format('woff2');}
  @font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/inter-latin-500-normal.woff2) format('woff2');}
  @font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/inter-latin-700-normal.woff2) format('woff2');}
  @font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/poppins-latin-700-normal.woff2) format('woff2');}
  @font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/poppins-latin-800-normal.woff2) format('woff2');}
  @font-face{font-family:'Poppins';font-style:normal;font-weight:900;font-display:swap;src:url(/assets/fonts/poppins-latin-900-normal.woff2) format('woff2');}

  :root{
    --pill-bg:#f1f1f1;
    --line:#ececec;
    --display-font:'Poppins',sans-serif;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;  -webkit-text-size-adjust:100%; text-size-adjust:100%;}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:'Inter',sans-serif;
    font-weight:400;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    width:100%;
  }
  img{display:block; width:100%;}
  a{color:inherit; text-decoration:none;}

  .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;
  }

  /* ---------- Header ---------- */
  header{
    display:flex; align-items:center; justify-content:space-between;
    max-width:1475px;
    margin:0 auto;
    padding:80px 5vw 28px;
    position:relative;
  }
  .logo{font-family:var(--display-font); font-size:1.9rem; font-weight:900; letter-spacing:-.01em; margin-left:-125px; line-height:1;}
  nav{display:flex; align-items:center;}
  nav ul{display:flex; gap:30px; list-style:none;}
  nav a{
    font-size:1.1rem; font-weight:500; color:var(--ink);
    padding-bottom:6px; border-bottom:2px solid transparent;
  }
  nav a.active{border-color:var(--ink);}
  .menu-toggle{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer;}
  .menu-toggle span{width:22px; height:2px; background:var(--ink);}

  /* ---------- Language switcher ---------- */
  .lang-switch{
    display:flex; align-items:center; gap:6px;
    font-size:.95rem; font-weight:500;
    line-height:1;
    margin-left:48px; margin-right:-125px;
    padding-left:24px;
    border-left:1px solid var(--line);
  }
  .lang-switch button{
    background:none; border:none; cursor:pointer;
    font-family:'Inter', sans-serif;
    font-size:.95rem; font-weight:500;
    line-height:1;
    color:var(--muted);
    padding:2px 0; border-bottom:2px solid transparent;
  }
  .lang-switch button.active{
    color:var(--ink); border-color:var(--ink);
  }
  .lang-switch .sep{ color:var(--line); line-height:1; }

  #viewport{ transition:opacity .22s ease; opacity:1; }
  #viewport.fading{ opacity:0; }

  /* ---------- Image grid ---------- */
  .grid{
    display:grid; grid-template-columns:1fr 1fr;
    gap:64px 56px;
    max-width:1475px;
    margin:0 auto;
    padding:100px 5vw 60px;
  }
  .cell{
    position:relative; overflow:hidden; background:#e9e9e9;
    aspect-ratio:2/3;
    cursor:pointer;
    text-decoration:none; color:inherit;
  }
  .cell img{
    width:100%; height:100%; object-fit:cover;
    display:block;
  }
  
  .cell::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0; width: 100%; height: 50%;
    background: linear-gradient(to top, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 100%);
    pointer-events: none;
    transition: opacity .3s ease;
  }
  .cell:hover::after, .cell:hover .overlay-title{
    opacity:0;
  }

  .cell .overlay-title{
    position:absolute; 
    left:50%; 
    bottom:60px; 
    transform:translateX(-50%); 
    font-family:var(--display-font);
    font-size:1.9rem; 
    font-weight:900; 
    color:#ffffff;
    letter-spacing:-.01em;
    text-shadow:0 2px 10px rgba(0,0,0,0.2);
    transition:opacity .3s ease;
    pointer-events:none;
    white-space:nowrap;
    z-index:2;
  }
  .cell:focus-visible{ outline:1px solid var(--ink); outline-offset:-1px; }

  /* ---------- Project detail view ---------- */
  .project-view{ display:none; }
  .project-view.active{ display:block; }
  .project-title{
    text-align:center;
    padding:130px 5vw 90px;
  }
  .project-title h1,
  .project-title h2{
    font-family:var(--display-font);
    font-size:1.9rem; font-weight:900; letter-spacing:-.01em;
  }
  .project-text{
    max-width:1700px;
    width:80%;
    margin:0 auto;
    padding:0 5vw 70px;
    text-align:left;
    font-size:1.12rem;
    line-height:1.75;
    color:var(--ink);
  }
  .project-text p{max-width:75ch; margin-left:auto; margin-right:auto;}
  .project-text p + p{margin-top:1.1em;}
  .project-text:empty{display:none;}
  .project-body{
    display:flex; flex-direction:column; gap:32px;
    max-width:1700px;
    width:80%;
    margin:0 auto;
    padding:0 5vw 120px;
  }
  .project-body img{width:100%; height:auto; max-height:100vh; object-fit:contain; display:block;}

  /* ---------- Project prev/next nav ---------- */
  .project-nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:40px 5vw 100px;
  }
  .project-nav a{
    display:flex; align-items:center; gap:14px;
    font-family:var(--display-font);
    font-size:1.9rem; font-weight:900; letter-spacing:-.01em;
    cursor:pointer;
  }
  .project-nav .arrow{font-weight:400;}
  .project-nav .next{margin-left:auto;}

  /* ---------- Contact view ---------- */
  .contact-view{ display:none; }
  .contact-view.active{ display:block; }
  .contact-title{
    text-align:center;
    padding:130px 5vw 60px;
  }
  .contact-title h1,
  .contact-title h2{
    font-family:var(--display-font);
    font-size:1.9rem; font-weight:900; letter-spacing:-.01em;
  }
  .contact-body{
    max-width:920px;
    margin:0 auto;
    padding:0 5vw 100px;
    text-align:center;
  }

  .bio-content{ text-align:left; }
  .bio-content h3{
    font-family:var(--display-font);
    font-weight:800; font-size:1.15rem;
    margin-bottom:16px;
  }
  .bio-content p{
    font-size:1.12rem; line-height:1.75; color:var(--ink);
    margin-bottom:18px;
  }
  .bio-content section{ margin-bottom:40px; }
  .bio-content section:last-child{ margin-bottom:0; }

  .bio-columns{
    position:relative;
    display:grid;
    grid-template-columns:1fr;
    gap:60px;
  }
  .bio-col{ display:none; max-width:900px; margin:0 auto; }
  .bio-col.lang-active{ display:block; }

  .contact-grid{
    display:grid;
    grid-template-columns: 1.15fr 1fr;
    gap:90px;
    max-width:1400px;
    margin:0 auto;
    padding:0 5vw 110px;
    text-align:left;
  }

  .contact-bio-col .contact-name{ font-weight:700; font-size:1.05rem; margin-bottom:22px; }
  .contact-bio-col p{ font-size:1.02rem; line-height:1.75; color:var(--ink); margin-bottom:20px; }
  .contact-bio-col p:last-child{ margin-bottom:0; }

  .contact-form-col .field{ margin-bottom:18px; }
  .contact-form-col input:not([type="checkbox"]),
  .contact-form-col textarea{
    width:100%;
    border:1px solid var(--line);
    background:transparent;
    color:var(--ink);
    font-family:'Inter', sans-serif;
    font-size:.98rem;
    padding:16px 18px;
    resize:vertical;
    border-radius:0;
    -webkit-appearance:none;
  }
  .contact-form-col input::placeholder,
  .contact-form-col textarea::placeholder{ color:var(--muted); }
  .contact-form-col input:focus,
  .contact-form-col textarea:focus{ outline:1px solid var(--ink); border-color:var(--ink); }
  .contact-form-col textarea{ min-height:140px; }
  .cf-status{ margin-top:14px; font-size:.95rem; min-height:1.3em; }
  .cf-status.success{ color:var(--ink); }
  .cf-status.error{ color:#b00020; }

  .privacy-row{
    display:flex; align-items:flex-start; gap:10px;
    font-size:.88rem; color:var(--muted);
    margin-bottom:24px;
  }
  .privacy-row input{ width:auto; margin-top:3px; }
  .privacy-row a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }

  .send-btn{
    width:100%;
    background:var(--ink); color:#fff;
    border:none;
    font-family:'Inter', sans-serif;
    font-weight:500; font-size:1rem;
    padding:18px;
    cursor:pointer;
    transition: opacity .2s ease;
  }
  .send-btn:hover{ opacity:.85; }

  .contact-meta{ margin-top:26px; font-size:.95rem; }
  .contact-meta a{ text-decoration:underline; text-underline-offset:4px; }
  .contact-meta .sep{ color:var(--muted); margin:0 6px; }

  /* ---------- Ventana Modal de Privacidad ---------- */
  .modal{
    display:none; position:fixed; z-index:1000; left:0; top:0; width:100%; height:100%;
    background-color:rgba(12,12,12,0.3); backdrop-filter:blur(5px);
    transition: opacity 0.2s ease;
  }
  .modal.active{ display:block; }
  .modal-content{
    background-color:var(--paper); margin:5% auto; padding:44px;
    border:1px solid var(--line); max-width:640px; width:88%; position:relative;
    box-shadow:0 15px 40px rgba(0,0,0,0.06);
    text-align:left;
    max-height:85vh; overflow-y:auto;
  }
  .modal-close{
    position:absolute; right:24px; top:18px; background:none; border:none;
    font-size:1.8rem; cursor:pointer; color:var(--muted); font-family:var(--display-font); line-height:1;
  }
  .modal-close:hover{ color:var(--ink); }
  .modal h3{ font-family:var(--display-font); font-weight:800; font-size:1.3rem; margin-bottom:8px; letter-spacing:-.01em; }
  .modal .modal-updated{ color:var(--muted); font-size:.85rem; margin-bottom:22px; }
  .modal h4{ font-family:var(--display-font); font-weight:700; font-size:1rem; margin:22px 0 8px; letter-spacing:-.01em; }
  .modal h4:first-of-type{ margin-top:0; }
  .modal p{ font-size:.95rem; line-height:1.65; color:var(--ink); margin-bottom:16px; }
  .modal ul{ margin:0 0 16px 20px; padding:0; }
  .modal li{ font-size:.95rem; line-height:1.65; color:var(--ink); margin-bottom:4px; }
  .modal a{ text-decoration:underline; }
  .modal p:last-child{ margin-bottom:0; }

  footer{
    margin-top:60px; padding:40px 5vw; border-top:1px solid var(--line);
    display:flex; justify-content:center; align-items:center;
    gap:26px;
    font-size:.85rem; color:var(--muted);
    transition:opacity .22s ease;
  }
  footer a{color:var(--muted); display:inline-flex; transition:color .2s ease, transform .2s ease;}
  footer a:hover{color:var(--ink); transform:translateY(-2px);}

  /* Footer fades with viewport once it's a sibling element */
  #viewport.fading ~ footer{ opacity:0; }

  /* ---------- Responsive ---------- */
  @media (min-width:1025px) and (max-width:1475px){
    .logo{margin-left:0;}
    .lang-switch{margin-right:0;}
  }
  @media (max-width:1024px){
    header{padding:22px 6vw;}
    .logo{font-size:1.3rem; margin-left:0;}
    
    nav ul{
      display:none;
      flex-direction:column;
      position:fixed;
      top:70px;
      right:6vw;
      background:var(--paper);
      padding:22px 26px;
      border:1px solid var(--line);
      gap:20px;
      z-index:50;
      box-shadow:0 10px 30px rgba(0,0,0,0.05);
    }
    nav ul.open { display:flex; }
    .menu-toggle{display:flex;}
    .lang-switch{margin-left:0; margin-right:0; padding-left:0; border-left:none;}
    
    .grid{
      grid-template-columns:1fr;
      gap:32px;
      max-width:100%;
      padding:48px 6vw 40px;
    }
    .cell .overlay-title{font-size:1.3rem; bottom:40px;}
    .project-title{padding:110px 6vw 60px;}
    .project-text{width:100%; padding:0 6vw 50px; font-size:1rem;}
    .project-text p{max-width:none;}
    .project-title h1,
    .project-title h2{font-size:1.3rem;}
    .project-body{max-width:100%; width:100%; padding:0 6vw 90px; gap:20px;}
    .project-body img{width:100%; height:auto; max-width:100%; margin:0 auto;}
    .project-body img.vertical{width:68%; max-width:68%; margin-left:auto; margin-right:auto;}
    .project-nav{padding:24px 6vw 70px;}
    .project-nav a{font-size:1.3rem; gap:8px;}
    .contact-title{padding:100px 6vw 40px;}
    .contact-title h1,
    .contact-title h2{font-size:1.3rem;}
    .contact-body{padding:0 6vw 70px;}
    .contact-grid{ grid-template-columns:1fr; gap:56px; }
    .bio-columns{ gap:48px; }
    .modal-content{ margin:6vh auto; padding:28px; max-height:88vh; }
  }

  @media (max-width:420px){
    .logo{font-size:1.15rem;}
    .cell .overlay-title{font-size:1.15rem;}
    nav a{font-size:.92rem;}
    .contact-title h1,
    .contact-title h2{font-size:1.15rem;}
    .project-title h1,
    .project-title h2{font-size:1.15rem;}
    .project-nav a{font-size:1.15rem;}
  }

  /* Modal de privacidad en móvil: casi a pantalla completa en ancho,
     con aire por arriba y por abajo */
  @media (max-width:680px){
    .modal-content{
      width:96%;
      margin:7vh auto;
      padding:26px 20px;
      max-height:86vh;
    }
    .modal-close{ right:16px; top:14px; }
  }

/* ---------- Accessibility / interaction refinements ----------
   Indicador de foco propio, discreto, solo para navegación por teclado
   (:focus-visible no se activa con clic de ratón). Sustituye al recuadro
   azul por defecto del navegador sin eliminar la señal para quien usa Tab. */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible{
  outline:1px solid var(--ink);
  outline-offset:2px;
  border-radius:2px;
}
/* Encabezados enfocados por script (SPA) al cambiar de vista, para lectores
   de pantalla. tabindex="-1": nunca reciben foco por tabulación, así que no
   necesitan indicador visual.
   #grid: fallback de focusHeading() al volver a Inicio cuando #homeHeading
   no existe en el DOM (p. ej. viniendo de una página de proyecto cargada
   directamente, ver main.js). Sin esta regla, el navegador dibuja su
   contorno azul por defecto alrededor de toda la cuadrícula de miniaturas. */
#viewHeading:focus,
#pvTitle:focus,
#grid:focus{
  outline:none;
}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:.45;}
.modal.active .modal-close:focus-visible{outline-offset:4px;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  #viewport,
  .cell::after,
  .cell .overlay-title,
  footer,
  footer a,
  .modal{transition:none !important;}
}