/* ============================================================
   JOYA — design tokens
   ============================================================ */

/* To use a different typeface (Google Fonts or a custom font file),
   see FUENTES.txt in the project root — you only need to touch
   --font-display / --font-body below and, if self-hosting, add an
   @font-face block right above :root. */
:root{
  --font-display: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;

  --paper: #ffffff;
  --ink: #121210;
  --gray: #8c8c87;
  --gray-light: #c7c7c2;
  --hairline: #e4e4e1;
  --hover-fill: #f5f5f3;

  --margin: clamp(1.25rem, 4vw, 3.5rem);
  --gutter: clamp(0.75rem, 1.6vw, 1.25rem);

  --fs-nav: 0.75rem;
  --fs-eyebrow: 0.75rem;
  --fs-meta: 0.75rem;
  --fs-body: 0.875rem;
  --fs-index: 0.8125rem;
  --fs-prose: 0.9375rem;
  --fs-index-title: 0.8125rem;
  --fs-project-title: clamp(1.75rem, 4vw, 2.75rem);
  --fs-h1: clamp(2.25rem, 6vw, 4rem);

  --ease: cubic-bezier(.4,0,.2,1);
}

*, *::before, *::after{ box-sizing: border-box; }
html, body{ margin:0; padding:0; }
body{
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; color: inherit; background: none; border: none; padding: 0; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,p{ margin:0; }

::selection{ background: var(--ink); color: var(--paper); }

:focus-visible{
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

.eyebrow{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gray);
}

.wrap{
  padding-inline: var(--margin);
}

/* ---------------- Grid ---------------- */
.grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
}
@media (max-width: 1024px){
  .grid{ grid-template-columns: repeat(8, 1fr); }
}
@media (max-width: 640px){
  .grid{ grid-template-columns: repeat(4, 1fr); }
}

/* ============================================================
   Header
   ============================================================ */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 80;
  height: 72px;
  display: flex;
  align-items: center;
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
}
.site-header .header-inner{
  width: 100%;
  padding-inline: var(--margin);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header-logo img{ height: 22px; width: auto; }
.header-nav{ display: flex; gap: 2.25rem; }
.header-nav a{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-nav);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  position: relative;
  padding-bottom: 2px;
}
.header-nav a::after{
  content:'';
  position:absolute; left:0; right:0; bottom:-2px;
  height:1px; background: var(--ink);
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s var(--ease);
}
.header-nav a:hover::after, .header-nav a.is-active::after{ transform: scaleX(1); }

/* Conmutador de idioma: vive en el mismo menú pero atenuado, para que se
   lea como un ajuste y no como una sección más. */
.header-nav a.lang-switch{ opacity: 0.4; }
.header-nav a.lang-switch:hover{ opacity: 1; }

.menu-toggle{ display:none; }

/* Mobile menu overlay */
.mobile-menu{
  position: fixed; inset: 0; z-index: 90;
  background: var(--paper);
  display: flex; flex-direction: column;
  padding: var(--margin);
  transform: translateY(-100%);
  transition: transform .35s var(--ease);
}
.mobile-menu.is-open{ transform: translateY(0); }
.mobile-menu-top{ display:flex; justify-content: space-between; align-items:center; height: 40px; }
.mobile-close{ font-family: var(--font-display); font-size: 0.9rem; letter-spacing:0.05em; }
.mobile-menu-links{ margin-top: auto; margin-bottom: auto; }
.mobile-menu-links a{
  display:block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 8vw, 3rem);
  letter-spacing: -0.01em;
  padding-block: 0.4rem;
}
/* En el menú móvil los enlaces son enormes; el idioma va chico y aparte. */
.mobile-menu-links a.lang-switch{
  font-size: var(--fs-nav);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  opacity: 0.4;
  margin-top: 1.5rem;
}

@media (max-width: 720px){
  .header-nav{ display:none; }
  .menu-toggle{
    display: flex; align-items:center; gap:0.5rem;
    font-family: var(--font-display); font-size: var(--fs-nav);
    letter-spacing:0.03em; text-transform: uppercase;
  }
}

/* ============================================================
   Splash
   ============================================================ */
.splash{
  height: 100svh;
  width: 100%;
  position: relative;
  cursor: pointer;
  background: var(--paper);
  transition: opacity .35s var(--ease);
}
.splash.is-leaving{ opacity: 0; }
.splash-logo{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(62vw, 760px);
}

/* ============================================================
   Home — una imagen por vez, centrada
   ============================================================ */
.home-main{
  padding-top: 72px;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-slides{
  position: relative;
  width: 100%;
  height: min(76vh, 760px);
  cursor: pointer;
}
.home-slides img{
  position: absolute;
  inset: 0;
  margin: auto;
  max-width: calc(100% - var(--margin) * 2);
  max-height: 100%;
  width: auto;
  height: auto;
  opacity: 0;
  transition: opacity .9s var(--ease);
}
.home-slides img.is-on{ opacity: 1; }

/* ============================================================
   Projects index
   ============================================================ */
.index-main{
  padding-top: 72px;
  min-height: 100svh;
}
.index-layout{
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 900px){
  .index-layout{ grid-template-columns: 1.15fr 1fr; align-items: stretch; }
}

.index-list{ padding-block: clamp(1.5rem, 4vh, 3rem); }

.index-head{
  display: none;
  grid-template-columns: 2.2fr 1fr 1.25fr 0.5fr;
  gap: var(--gutter);
  padding-bottom: 0.75rem;
}
@media (min-width: 900px){
  .index-head{ display: grid; }
}
.index-head-btn, .index-head-label{
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gray);
  text-align: left;
}
.index-head-btn{
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  transition: color .2s var(--ease);
}
.index-head-btn:hover, .index-head-btn[data-dir]{ color: var(--ink); }
.index-head-btn::after{
  content: '';
  width: 0; height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-bottom: 4px solid currentColor;
  opacity: 0;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.index-head-btn[data-dir="asc"]::after{ opacity: 0.6; transform: rotate(0deg); }
.index-head-btn[data-dir="desc"]::after{ opacity: 0.6; transform: rotate(180deg); }

.index-row{
  display: grid;
  grid-template-columns: 2.2fr 1fr 1.25fr 0.5fr;
  gap: var(--gutter);
  align-items: baseline;
  padding-block: 0.5rem;
  border-top: 1px solid var(--hairline);
  cursor: pointer;
  transition: background .2s var(--ease);
}
.index-list li:last-child .index-row{ border-bottom: 1px solid var(--hairline); }
.index-row:hover, .index-row:focus-visible{ background: var(--hover-fill); }
.index-row .p-title,
.index-row .p-meta{
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-index);
  line-height: 1.45;
  letter-spacing: normal;
  color: var(--ink);
}

.index-preview{
  display: none;
  position: sticky;
  top: 72px;
  height: calc(100svh - 72px);
  padding: clamp(1.5rem, 4vh, 3rem);
  align-items: center;
  justify-content: center;
}
@media (min-width: 900px){
  .index-preview{ display: flex; border-left: 1px solid var(--hairline); }
}
.index-preview img{
  max-height: 78%;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  opacity: 0;
  transition: opacity .2s var(--ease);
}
.index-preview img.is-visible{ opacity: 1; }

/* Mobile / tablet: stacked cards */
@media (max-width: 899px){
  .index-row{ grid-template-columns: 1fr; gap: 0.2rem; }
  .index-row-media{
    display: block;
    aspect-ratio: 4/3;
    overflow: hidden;
    margin-bottom: 0.6rem;
    background: var(--hover-fill);
  }
  .index-row-media img{ width:100%; height:100%; object-fit: cover; }
}
@media (min-width: 900px){
  .index-row-media{ display:none; }
}

/* ============================================================
   Project page
   ============================================================ */
.project-main{ padding-top: 72px; }

.project-gallery{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.25rem, 3.5vh, 2.75rem);
  padding: 0 var(--margin) clamp(3rem, 8vh, 6rem);
}
.project-gallery img{
  width: auto;
  height: auto;
  max-width: min(100%, 1180px);
  max-height: 90vh;
}

.project-info{
  padding-block: clamp(2.5rem, 6vh, 4.5rem) clamp(3rem, 8vh, 6rem);
}
.project-info-grid{
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
}
.project-info-title{
  grid-column: 1 / span 8;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-project-title);
  letter-spacing: -0.015em;
  margin-bottom: 1.5rem;
}
.project-info-desc{
  grid-column: 1 / span 7;
  max-width: 72ch;
  font-size: var(--fs-prose);
}
.project-meta-list{
  grid-column: 9 / span 4;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.project-meta-list .m-row{ font-size: var(--fs-index); }
.project-meta-list .m-label{ color: var(--gray); display:block; font-size: 0.75rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 0.15rem; }

@media (max-width: 900px){
  .project-info-title{ grid-column: 1 / -1; }
  .project-info-desc{ grid-column: 1 / -1; max-width: none; }
  .project-meta-list{ grid-column: 1 / -1; margin-top: 2rem; flex-direction: row; flex-wrap: wrap; gap: 1.5rem 2.5rem; }
}

.project-nav{
  border-top: 1px solid var(--hairline);
  display: flex;
  justify-content: space-between;
  padding-block: 1.5rem;
  font-family: var(--font-display);
  font-size: var(--fs-nav);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.project-nav a{ transition: opacity .2s var(--ease); }
.project-nav a:hover{ opacity: 0.5; }
.project-nav .nav-center{ color: var(--gray); }

/* ============================================================
   Studio
   ============================================================ */
.studio-main{ padding-top: 72px; }
.studio-layout{
  padding-block: clamp(3rem, 8vh, 6rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
}
.studio-layout{ font-size: var(--fs-prose); }
@media (min-width: 900px){
  .studio-layout{ grid-template-columns: 1.35fr 1fr; align-items: start; }
  /* Baja el texto de la izquierda hasta la línea de base del cuerpo de la
     derecha, que arranca debajo del epígrafe "¿Qué hacemos?". */
  .studio-primary{ padding-top: calc(var(--fs-eyebrow) * 1.7 + 1rem); }
}
.studio-heading{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h1);
  letter-spacing: -0.015em;
  margin-bottom: 1.75rem;
}
.studio-primary p{ max-width: 76ch; margin-bottom: 1.4rem; }
.studio-secondary .eyebrow{ margin-bottom: 1rem; display:block; }
.studio-secondary p{ max-width: 58ch; margin-bottom: 1.4rem; }
.studio-secondary p:last-child{ margin-bottom: 0; }

/* ============================================================
   Contact
   ============================================================ */
.contact-main{ padding-top: 72px; min-height: 100svh; display:flex; align-items:center; }
.contact-block{ padding-block: clamp(3rem, 10vh, 6rem); }
.contact-heading{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h1);
  margin-bottom: 2.5rem;
  letter-spacing: -0.015em;
}
.contact-lines{ display:flex; flex-direction:column; gap: 1.5rem; }
.contact-lines .c-label{ font-size: 0.75rem; letter-spacing:.04em; text-transform:uppercase; color: var(--gray); margin-bottom: 0.3rem; display:block; }
.contact-lines a{
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  transition: opacity .2s var(--ease);
}
.contact-lines a:hover{ opacity: 0.55; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer{
  position: relative;
  padding-inline: var(--margin);
  padding-block: clamp(3rem, 10vh, 6rem) 2rem;
  font-size: var(--fs-meta);
  color: var(--ink);
}
.footer-inner{
  border-top: 1px solid var(--ink);
  padding-top: 1.1rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
}
.footer-contact{ display: flex; flex-direction: column; }
.footer-contact a{ color: var(--ink); line-height: 1.55; width: fit-content; }
.footer-contact a:hover{ opacity: 0.55; }
@media (max-width: 600px){
  .footer-inner{ flex-direction: column; align-items: flex-start; gap: 1.2rem; }
  }

/* Invisible against the page background — reveals only when selected
   (e.g. Ctrl/Cmd+A). Not a flex child, so it never shifts the footer
   links either side of it. */
.built-by{
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  color: var(--paper);
  font-size: 0.7rem;
  user-select: text;
}
.built-by::selection{ color: var(--ink); background: var(--gray-light); }