/* ============================================================
   MERRY — estilos compartidos
   Estética fault-lines: minimalista, sans neutra, foto protagonista
   ============================================================ */

:root{
  --ink:#464247;          /* negro de marca suavizado (logos/textos sobre blanco);
                             antes #3a363b, aclarado un punto (jul 2026) */
  --paper:#ffffff;
  --surround:#161616;     /* fondo oscuro alrededor del contenido (antes #0d0d0d) */
  --muted:rgba(255,255,255,.72);
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }

/* MANDO GLOBAL DE TIPOGRAFÍA — el texto de lectura (menú, párrafos, tablas,
   footer) va en rem y escala con este porcentaje SOLO EN PC (>900px);
   en móvil se queda al 100% original. Los titulares grandes (hero, h1,
   claim, flechas) van en px A PROPÓSITO y no se mueven.
   100% = diseño original · en prueba: 115% (jul 2026) */
html{ scroll-behavior:smooth; }
@media (min-width:901px){ html{ font-size:115%; } }
html,body{ height:100%; }

body{
  font-family:var(--font);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.no-scroll{ overflow:hidden; }

a{ color:inherit; text-decoration:none; }
img{ display:block; }

/* solo para lectores de pantalla / SEO (oculto visualmente) */
.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;
}

/* crossfade nativo entre páginas (Chrome/Edge/Safari) */
@view-transition{ navigation:auto; }

/* ---------- HEADER ---------- */
.site-header{
  position:absolute;
  top:0; left:0; right:0;
  z-index:30;
  display:flex;
  align-items:center;
  justify-content:space-between;
  /* misma posición que la cabecera de galería (logo/menú no se mueven al cambiar de página) */
  padding:22px clamp(14px, 5vw, 90px);
  color:#fff;
}
/* nav en blanco fijo (color claro) */

.brand-logo{ display:block; height:36px; }
.brand-logo svg{ height:100%; width:auto; display:block; color:#fff; }

.main-nav ul{
  list-style:none;
  display:flex;
  align-items:center;
  gap:34px;
}
.main-nav a{
  font-size:1.125rem;
  letter-spacing:.01em;
  color:#fff;
  opacity:.82;
  transition:opacity .2s ease;
}
/* al pasar el cursor, el blanco se intensifica (no se atenúa) */
.main-nav a:hover{ opacity:1; }
/* aire extra entre el grupo de categorías (Art/Interior/About) y el de
   secciones (Projects/Press/Contact); solo cuando conviven en el menú */
.main-nav li.cat + li:not(.cat){ margin-left:14px; }
/* sección actual: subrayada */
.main-nav a.is-current{
  opacity:1;
  text-decoration:underline;
  text-underline-offset:5px;
  text-decoration-thickness:1px;
}

.social{ display:flex; gap:16px; align-items:center; }
.social svg{
  width:18px; height:18px;
  fill:none; stroke:#fff; stroke-width:1.6;
  opacity:.9; transition:opacity .2s ease;
}
.social a:hover svg{ opacity:.55; }

/* solo en la home (header blanco sobre foto): mismo esquema que las
   categorías del hero — blanco apagado #eaeaea al 93%, hover a #f6f6f6
   pleno (sin blanco puro) — y sombra sutil de legibilidad.
   En páginas interiores (work-header) nada de esto aplica. */
.site-header:not(.work-header) .main-nav a{
  color:#eaeaea; opacity:.93;
  transition:opacity .2s ease, color .2s ease;
  text-shadow:0 1px 14px rgba(0,0,0,.08);
}
.site-header:not(.work-header) .main-nav a:hover{ color:#f6f6f6; opacity:1; }
.site-header:not(.work-header) .social svg{ stroke:#eaeaea; opacity:.93; }
.site-header:not(.work-header) .social a:hover svg{ stroke:#f6f6f6; opacity:1; }
.site-header:not(.work-header) .brand-logo svg{ color:#eaeaea; }
.site-header:not(.work-header) .brand-logo svg,
.site-header:not(.work-header) .social svg{ filter:drop-shadow(0 1px 8px rgba(0,0,0,.07)); }

/* solo PC: logo e icono de Instagram de la cabecera ~15% más grandes (jul 2026) */
@media (min-width:901px){
  .brand-logo{ height:60px; }
  .social svg{ width:21px; height:21px; }
}

/* hamburguesa (oculta por defecto) */
.nav-toggle{
  display:none;
  width:30px; height:22px;
  background:none; border:0; cursor:pointer;
  position:relative; z-index:40;
}
.nav-toggle span{
  position:absolute; left:0; right:0; height:2px;
  background:#fff; transition:transform .3s ease, opacity .2s ease;
}
.nav-toggle span:nth-child(1){ top:0; }
.nav-toggle span:nth-child(2){ top:10px; }
.nav-toggle span:nth-child(3){ top:20px; }
body.menu-open .nav-toggle span:nth-child(1){ transform:translateY(10px) rotate(45deg); }
body.menu-open .nav-toggle span:nth-child(2){ opacity:0; }
body.menu-open .nav-toggle span:nth-child(3){ transform:translateY(-10px) rotate(-45deg); }

/* ---------- HERO (home) ---------- */
.hero{
  position:relative;
  height:100svh;
  width:100%;
  background:var(--surround);
  overflow:hidden;
}
/* dos capas que se cruzan en fundido al cambiar la foto */
.hero__layer{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  transition:opacity .8s ease;
  transform:scale(1.015);
  /* -10% de brillo, complementa a las veladuras y sombras de texto
     (el valor histórico era -14%; se quitó del todo y se recuperó
     a la mitad tras probar en local, jul 2026) */
  filter:brightness(.9);
}
.hero__layer.is-on{ opacity:1; }

/* legibilidad con fotos ruidosas: veladura SOLO en las zonas de texto
   (franja superior = header; óvalo central = categorías). El resto de la
   foto respira igual. (jul 2026) */
.hero::after{
  content:"";
  position:absolute; inset:0; z-index:10;
  pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.16), rgba(0,0,0,0) 22%),
    radial-gradient(ellipse 72% 46% at 50% 50%, rgba(0,0,0,.10), rgba(0,0,0,0) 68%);
}

/* categorías superpuestas, en blanco, sin almohadillas */
.overlay-cats{
  position:absolute;
  inset:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(20px,5vw,64px);
  pointer-events:none;
}
.overlay-cats a{
  pointer-events:auto;
  /* blanco apagado + opacidad alta: más legible que blanco puro translúcido */
  color:#eaeaea;
  font-size:clamp(40px,6vw,80px);
  font-weight:400;
  letter-spacing:.005em;
  line-height:1;
  opacity:.93;
  transition:opacity .25s ease, color .25s ease;
  /* sombra difusa: despega el blanco de fondos cargados sin leerse como sombra */
  text-shadow:0 2px 26px rgba(0,0,0,.09), 0 1px 5px rgba(0,0,0,.05);
}
/* hover: enciende, pero sin llegar al blanco puro (deslumbra) */
.overlay-cats a:hover{ opacity:1; color:#f6f6f6; }

/* ============================================================
   GALERÍAS (interior / arte) — patchwork
   ============================================================ */
.work-header{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between;
  /* alineado a hueso con los márgenes laterales de la galería */
  padding:22px clamp(14px, 5vw, 90px);
  transition:transform .4s ease;
}
/* el cristal va en una capa aparte: así el header NO atrapa al menú overlay
   (backdrop-filter/transform crean bloque contenedor para position:fixed) */
.work-header::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(8px);
}
/* con el menú abierto, el header nunca se desplaza (no debe atrapar el overlay) */
body.menu-open .work-header{ transform:none; }
.work-header.hide{ transform:translateY(-100%); }
.work-header .brand-logo svg{ color:var(--ink); }
.work-header .brand-logo,
.work-header .main-nav{ mix-blend-mode:normal; }
.work-header .main-nav a{ color:var(--ink); opacity:.85; }
.work-header .social svg{ stroke:var(--ink); }
.work-header .nav-toggle span{ background:var(--ink); }

/* mosaico tipo "cuadro": masonry real (relleno HORIZONTAL, montado por JS).
   margen FLUIDO (crece poco al ensanchar, tope bajo) + márgenes laterales. */
.patchwork{
  --gap:clamp(3px, 1.2vw, 16px);
  display:flex;
  align-items:flex-start;         /* cada columna con su altura natural */
  gap:var(--gap);
  /* más aire arriba (separa de la cabecera), laterales fluidos, poco abajo */
  padding:clamp(30px, 4vw, 60px) clamp(14px, 5vw, 90px) var(--gap);
  background:var(--paper);
}
.pw-col{
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:var(--gap);                 /* margen uniforme entre fotos, siempre */
}
/* cada foto va envuelta en <picture> (WebP responsive + JPEG de respaldo):
   la envoltura tiene que comportarse como la foto, o rompe el reparto en columnas */
.patchwork picture{ display:block; min-width:0; }
.patchwork img{ width:100%; height:auto; object-fit:cover; cursor:zoom-in; }  /* cover = crop centrado cuando Art fuerza aspect-ratio */

/* lightbox: foto a pantalla completa con flechas (overlay montado por JS) */
.lightbox{
  position:fixed; inset:0; z-index:60;
  display:flex; align-items:center; justify-content:center;
  background:rgba(13,13,13,.96);
  opacity:0; visibility:hidden;
  transition:opacity .35s ease, visibility 0s linear .35s;
}
.lightbox.is-open{ opacity:1; visibility:visible; transition:opacity .35s ease; }
.lightbox img{
  max-width:min(92vw, calc(100vw - 120px));
  max-height:calc(100vh - 70px);
  width:auto; height:auto;
}
.lightbox button{
  position:absolute; z-index:1;
  background:none; border:0; padding:14px; cursor:pointer;
  color:#fff; opacity:.65; transition:opacity .25s ease;
}
.lightbox button:hover{ opacity:1; }
.lightbox svg{
  width:34px; height:34px; display:block;
  fill:none; stroke:currentColor; stroke-width:1.4;
  stroke-linecap:round; stroke-linejoin:round;
}
.lb-close{ top:14px; right:14px; }
.lb-close svg{ width:26px; height:26px; }
.lb-prev{ left:8px;  top:50%; transform:translateY(-50%); }
.lb-next{ right:8px; top:50%; transform:translateY(-50%); }
@media (max-width:640px){
  .lightbox img{ max-width:100vw; max-height:calc(100vh - 56px); }
  .lightbox svg{ width:28px; height:28px; }
  .lb-prev{ left:0; } .lb-next{ right:0; }
}

/* aparición en cascada: más lenta y marcada, foto a foto */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity 1.3s ease, transform 1.3s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ============================================================
   PÁGINAS ÍNDICE (Projects / Press) + CONTACT
   tabla minimalista estilo eldepartamento.net/case-studies
   ============================================================ */
/* Patron unico de cabecera de seccion (projects/press/contact): mismo ancho de
   contenedor y mismo hueco bajo el header para que el titulo no "baile". */
.index-page{
  max-width:1200px;
  margin:0 auto;
  padding:88px clamp(20px, 4vw, 34px) 100px;
  background:var(--paper);
}
.index-page h1{
  font-size:clamp(30px,5vw,56px);
  font-weight:400; line-height:1.06; letter-spacing:-.01em;
  margin-bottom:34px;
}
.page-note{ font-size:0.8125rem; opacity:.5; margin-bottom:30px; }
/* Press a la espera del material real del cliente */
.coming-soon{ font-size:clamp(20px,2.6vw,30px); opacity:.45; margin-top:10px; }

.index-table{ width:100%; border-collapse:collapse; font-size:0.875rem; }
.index-table th{
  text-align:left; font-weight:600;
  font-size:0.6875rem; letter-spacing:.14em; text-transform:uppercase;
  opacity:.5; padding:0 24px 12px 0;
  border-bottom:1px solid rgba(58,54,59,.3);
}
.index-table td{
  padding:16px 24px 16px 0;
  border-bottom:1px solid rgba(58,54,59,.12);
  vertical-align:top; opacity:.85;
  transition:opacity .25s ease;
}
.index-table tbody tr:hover td{ opacity:1; }
.index-table a{ text-decoration:none; }
.index-table a:hover{ opacity:.55; }
.index-table th:last-child, .index-table td:last-child{ padding-right:0; }
@media (max-width:760px){ .col-m2{ display:none; } }
@media (max-width:560px){ .col-type{ display:none; } }

/* preview flotante del proyecto al pasar el cursor por su fila */
.row-preview{
  position:fixed; left:0; top:0; z-index:50;
  width:min(380px, 32vw);
  opacity:0; transition:opacity .3s ease;
  pointer-events:none;                       /* nunca estorba al cursor */
}
.row-preview.on{ opacity:1; }
.row-preview img{
  width:100%; height:auto; display:block;
  box-shadow:0 14px 44px rgba(0,0,0,.2);
}

/* press: maquetación tipo revista (foto + titular + entradilla + pie) */
.press-item{
  display:grid; grid-template-columns:7fr 5fr;
  gap:clamp(24px, 4vw, 70px); align-items:start;
  padding:clamp(40px, 6vw, 80px) 0;
  border-top:1px solid rgba(58,54,59,.15);
}
.press-item:first-of-type{ border-top:0; padding-top:16px; }
.press-item:nth-of-type(even){ grid-template-columns:5fr 7fr; }
.press-item:nth-of-type(even) figure{ order:2; }   /* alterna foto izq/dcha */
.press-item figure{ margin:0; }
.press-item figure img{ width:100%; height:auto; display:block; }
.press-item .duo{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.press-item figcaption{
  font-size:0.75rem; line-height:1.6; opacity:.5; margin-top:10px;
}
.press-meta{
  font-size:0.6875rem; letter-spacing:.14em; text-transform:uppercase;
  opacity:.5; margin-bottom:16px;
}
.press-item h2{
  font-size:clamp(22px, 2.6vw, 34px);
  font-weight:400; line-height:1.18; letter-spacing:-.01em;
  margin-bottom:18px;
}
.press-item .press-text p{ font-size:0.9375rem; line-height:1.8; opacity:.8; margin-bottom:22px; }
.press-link{ font-size:0.8125rem; opacity:.7; }
.press-link:hover{ opacity:1; }
@media (max-width:760px){
  .press-item, .press-item:nth-of-type(even){ grid-template-columns:1fr; }
  .press-item:nth-of-type(even) figure{ order:0; }  /* en móvil, foto siempre arriba */
}

/* contact: mapa arriba; los datos van en el footer ampliado de la pagina.
   Todo compacto para que la pagina quepa en una pantalla. */
.contact-page{ padding-bottom:0; }
/* doble clase: gana a la regla general de .footer-center aunque este despues */
.footer-center.footer-contact{ padding-top:clamp(24px, 3vw, 40px); }
/* un renglon en blanco entre la direccion y el correo */
.footer-center.footer-contact .lines a[href^="mailto"]{ display:inline-block; margin-top:1.8em; }
.contact-map{ margin-top:6px; position:relative; }
.contact-map__link{ display:block; position:relative; }
/* marcador del estudio. Va en CSS y no dibujado en la imagen: siempre nitido
   y siempre centrado, porque object-fit:cover centra el punto de la direccion */
.contact-map__link::after{
  content:""; position:absolute; left:50%; top:50%;
  width:13px; height:13px; margin:-6.5px 0 0 -6.5px;
  border-radius:50%; background:#1b181c;
  box-shadow:0 0 0 3px #fff, 0 1px 5px rgba(0,0,0,.3);
  pointer-events:none;
}
.contact-map img{
  display:block; width:100%; height:clamp(160px, 24vh, 260px); border:0;
  object-fit:cover; object-position:center;   /* el estudio queda centrado */
  filter:contrast(.95);                       /* la imagen ya viene en gris */
  transition:filter .25s ease;
}
/* pista mínima de que se puede pinchar; sin adornos */
.contact-map__link:hover img,
.contact-map__link:focus-visible img{ filter:contrast(1.06); }
.contact-map__link:focus-visible{ outline:2px solid #3a363b; outline-offset:3px; }
/* Atribución obligatoria por la licencia de OpenStreetMap. Va DENTRO del mapa,
   en la esquina, como en cualquier mapa: la licencia exige que se vea, no que
   ocupe una línea aparte. El halo blanco la hace legible sobre el gris. */
.map-credit{
  position:absolute; right:7px; bottom:6px; margin:0;
  font-size:.58rem; letter-spacing:.03em; color:#5c585e;
  text-shadow:0 0 3px rgba(255,255,255,.9), 0 0 6px rgba(255,255,255,.7);
}
.map-credit a{ color:inherit; text-decoration:none; }
.map-credit a:hover{ text-decoration:underline; }
@media (prefers-reduced-motion:reduce){
  .contact-map img{ transition:none; }
}
.footer-center .contact-qr{ display:block; max-width:230px; margin:24px auto 34px; }
.footer-center .contact-qr img{ width:100%; height:auto; display:block; }
/* en PC la pagina entera (hasta el logo) debe caber sin scroll */
/* valores = el diseño aprobado por David (lo valido al 90% de zoom, asi que
   todo va escalado a ~0.9 de aquella version para verse igual al 100%) */
@media (min-width:900px){
  .contact-map img{ height:clamp(145px, 18vh, 180px); }
  .footer-center.footer-contact{ padding-top:23px; padding-bottom:20px; }
  .footer-center.footer-contact .lines{ margin-top:0; font-size:0.875rem; line-height:1.8; }
  .footer-center.footer-contact .contact-qr{ max-width:215px; margin:13px auto 18px; }
  .footer-center.footer-contact .brand{ margin-top:23px; }
  .footer-center.footer-contact .brand svg{ height:47px; }
}

/* ============================================================
   ABOUT
   ============================================================ */
.about{
  max-width:780px;
  margin:0 auto;
  padding:88px 34px 100px;   /* mismo hueco bajo el header que las demás secciones */
}
.about h1{
  font-size:clamp(30px,5vw,56px);
  font-weight:400; line-height:1.06; letter-spacing:-.01em;
  margin-bottom:34px;
}
.about p{ font-size:1rem; line-height:1.8; margin-bottom:20px; opacity:.85; }
.about .block-title{
  font-size:0.6875rem; letter-spacing:.14em; text-transform:uppercase;
  opacity:.5; font-weight:600; margin:54px 0 16px;
}
.about .about-photo{ margin:6px 0 28px; }
.about .about-photo img{ width:100%; height:auto; display:block; }

/* ============================================================
   FIN DE GALERÍA — footer centrado + navegación entre categorías
   (las flechas van DEBAJO del footer y rematan la página; jul 2026)
   ============================================================ */
.project-nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:clamp(8px,1.5vw,18px) clamp(14px,5vw,90px) clamp(46px,7vw,90px);
  font-size:clamp(22px,3.2vw,34px);
}
.project-nav a{
  display:inline-flex; align-items:center; gap:.45em;
  color:var(--ink); opacity:.9; transition:opacity .2s ease;
}
.project-nav a:hover{ opacity:.5; }
.project-nav svg{ width:.62em; height:.62em; fill:none; stroke:currentColor; stroke-width:1.5; }

.footer-center{
  text-align:center;
  padding:clamp(60px,9vw,110px) 24px clamp(40px,6vw,70px);
  color:var(--ink);
}
.footer-center .brand{ display:inline-block; }
.footer-center .brand svg{ height:44px; width:auto; color:var(--ink); }
.footer-center .lines{ margin-top:20px; font-size:0.875rem; line-height:2; }
.footer-center .lines a:hover{ opacity:.55; }
.footer-center .ig{ display:inline-flex; margin-top:14px; }
.footer-center .ig svg{ width:20px; height:20px; fill:none; stroke:var(--ink); stroke-width:1.6; }

/* ============================================================
   RESPONSIVE — hamburguesa a 900px (igual que fault-lines)
   ============================================================ */
/* nº de columnas según ancho lo decide main.js (móvil = 2, sube al ensanchar) */

@media (max-width:900px){
  .nav-toggle{ display:block; }
  .site-header .brand-logo,
  .site-header .main-nav{ mix-blend-mode:normal; }

  .main-nav{
    position:fixed;
    inset:0;
    background:rgba(13,13,13,.96);
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0; pointer-events:none;
    transition:opacity .3s ease;
    z-index:35;
  }
  .main-nav.is-open{ opacity:1; pointer-events:auto; }

  /* evita el flash del overlay al cruzar el breakpoint redimensionando */
  html.resizing .main-nav{ transition:none; }

  .main-nav ul{
    flex-direction:column;
    gap:26px;
    text-align:center;
  }
  .main-nav li.cat + li:not(.cat){ margin-left:0; margin-top:10px; }
  .main-nav a{ font-size:1.75rem; color:#fff; }
  .social{ margin-top:8px; }
  .work-header .main-nav a,
  .work-header .social svg{ color:#fff; stroke:#fff; }

  /* al abrir el menú, ocultar categorías para que no se solapen */
  body.menu-open .overlay-cats{ opacity:0; pointer-events:none; }
}

/* apilar categorías en móvil vertical estrecho */
@media (max-width:600px) and (orientation:portrait){
  .overlay-cats{ flex-direction:column; gap:20px; }
  /* apiladas en vertical: textos generosos pero contenidos */
  .overlay-cats a{ font-size:clamp(42px,11vw,58px); }
}

/* ============================================================
   LEGAL  (aviso legal + privacidad + cookies, ES y EN)
   Texto denso: se apoya en el contenedor .about y solo ajusta
   jerarquia y ritmo de lectura.
   ============================================================ */
.legal h1{ margin-bottom:14px; }
.legal-lang{ margin-top:54px; }
.legal-lang:first-of-type{ margin-top:34px; }
/* separador entre la version espanola y la inglesa */
.legal-lang + .legal-lang{ border-top:1px solid #e2dfe3; padding-top:54px; }

.legal-flag{
  font-size:.68rem; letter-spacing:.19em; text-transform:uppercase;
  color:#8e888f; margin:0 0 26px;
}
.legal h2{
  font-size:1.12rem; font-weight:500; letter-spacing:-.01em;
  margin:44px 0 12px; color:#1b181c;
}
.legal h3{
  font-size:.95rem; font-weight:500; margin:26px 0 6px; color:var(--ink);
}
.legal p{ margin:0 0 13px; }
.legal a{ color:inherit; text-underline-offset:3px; }

/* ficha de datos del titular */
.legal-data{
  display:grid; grid-template-columns:8.5rem 1fr; gap:7px 18px;
  margin:16px 0 6px; font-size:.94rem;
}
.legal-data dt{ color:#8e888f; }
.legal-data dd{ margin:0; }
@media (max-width:640px){
  .legal-data{ grid-template-columns:1fr; gap:2px; }
  .legal-data dt{ margin-top:11px; }
}

.legal-note{
  margin-top:30px; font-size:.86rem; color:#8e888f; font-style:italic;
}

/* enlace discreto del footer */
.footer-center .lines .legal-link{ font-size:.86em; opacity:.72; }
.footer-center .lines .legal-link:hover{ opacity:1; }