/* Tomás Viana — portfolio. Tipografía editorial (Fraunces + Inter), fondo
   neutro, sin gradientes genéricos. Ver CLAUDE.md §4 para el criterio de
   dirección visual. */

:root {
  --bg: #f7f6f3;
  --surface: #ffffff;
  --border: #e2e0d9;
  --ink: #1b1a17;
  --ink-soft: #55534a;
  --ink-faint: #8c897c;
  --accent: #7a3b2e;
  --accent-soft: #f1e4df;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #15140f;
    --surface: #1d1c17;
    --border: #322f27;
    --ink: #f2f0e9;
    --ink-soft: #c2beb0;
    --ink-faint: #837f70;
    --accent: #d99a86;
    --accent-soft: #2c211d;
  }
}
:root[data-theme="dark"] {
  --bg: #15140f;
  --surface: #1d1c17;
  --border: #322f27;
  --ink: #f2f0e9;
  --ink-soft: #c2beb0;
  --ink-faint: #837f70;
  --accent: #d99a86;
  --accent-soft: #2c211d;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; } /* refuerzo además del que ya lleva body — algunos móviles dejan pasar el rebote elástico si solo está en uno de los dos */
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, .display {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  text-wrap: balance;
  margin: 0;
}

a { color: inherit; }

/* --- Header --- */
header.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px clamp(16px, 5vw, 56px);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
}
@media (max-width: 640px) {
  header.site-header { padding: 14px 18px; }
  .brand-name { font-size: 17px; }
  header.site-header nav.site-nav { display: none; } /* el menú de escritorio se sustituye por el botón + overlay */
}

/* Menú de móvil: botón hamburguesa + panel propio a pantalla completa
   (29/08/2026, pedido de Rodrigo: "si no pones menú burguer... molaría un
   botón que las despliegue... centradas en el móvil"; corregido el
   30/08/2026 tras reportar que salía cortado arriba, pegado a la barra de
   estado — ver el comentario en index.html sobre por qué el nav vive fuera
   del header). En escritorio el botón no se ve. */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 34px;
  height: 34px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 41;
}
.nav-toggle span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.3s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* El propio menú — a pantalla completa de verdad (position:fixed sin
   ancestro con filter/backdrop-filter de por medio), con espacio reservado
   arriba para la barra de estado/notch del móvil (env(safe-area-inset-top))
   y una tipografía grande, numerada como el resto del sitio (mismo criterio
   editorial que las secciones "01/02" de la home) en vez del enlace
   pequeño en mayúsculas de escritorio — "más moderno y a modo artista"
   (pedido de Rodrigo, 30/08/2026). */
.site-nav-mobile {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 38;
  flex-direction: column;
  justify-content: center;
  gap: clamp(20px, 6vw, 32px);
  padding: max(env(safe-area-inset-top), 24px) 32px max(env(safe-area-inset-bottom), 24px);
  background: var(--bg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.site-nav-mobile.open { opacity: 1; pointer-events: auto; }
.site-nav-mobile a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(30px, 9vw, 42px);
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
  opacity: 0;
  transform: translateY(14px);
  transition: color 0.2s ease;
}
.site-nav-mobile.open a { animation: siteNavMobileIn 0.5s ease forwards; }
.site-nav-mobile.open a:nth-child(1) { animation-delay: 0.06s; }
.site-nav-mobile.open a:nth-child(2) { animation-delay: 0.13s; }
.site-nav-mobile.open a:nth-child(3) { animation-delay: 0.2s; }
@keyframes siteNavMobileIn { to { opacity: 1; transform: translateY(0); } }
.site-nav-mobile a:active { color: var(--accent); }
.site-nav-mobile-num {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
}
@media (max-width: 640px) {
  .nav-toggle { display: flex; }
  .site-nav-mobile { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  .site-nav-mobile a { animation: none !important; opacity: 1; transform: none; }
}
.brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.brand-name {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 19px;
  letter-spacing: 0.01em;
}
.brand-tag {
  font-size: 11.5px;
  color: var(--ink-faint);
  letter-spacing: 0.02em;
}
nav.site-nav {
  display: flex;
  gap: clamp(14px, 3vw, 28px);
}
nav.site-nav a {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
  transition: color 0.2s ease;
}
nav.site-nav a:hover { color: var(--accent); }

/* --- Hero: portada a pantalla completa con imagen de fondo --- */
.hero {
  position: relative;
  overflow: hidden;
  min-height: min(86vh, 820px);
  display: flex;
  align-items: flex-end;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center 30%;
}
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 13, 10, 0.28) 0%, rgba(15, 13, 10, 0.62) 62%, rgba(15, 13, 10, 0.9) 100%);
}
.hero-content {
  position: relative;
  z-index: 1;
  padding: clamp(56px, 12vw, 120px) clamp(20px, 5vw, 56px) clamp(40px, 8vw, 72px);
  max-width: 920px;
}
/* Firma "Tomás Viana" en portada (02/09/2026, pedido del cliente: sustituye
   todo el texto anterior de la portada — eyebrow, título, párrafo — por el
   nombre, al mismo tamaño que tenía el título, con el revelado de máscara
   que antes solo llevaba la firma del footer). */
.hero-signature { overflow: hidden; }
.hero-signature-text {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: clamp(34px, 6vw, 58px);
  line-height: 1.05;
  color: #fffdf9;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.25);
  white-space: nowrap;
}

/* --- Section heads --- */
.section-head {
  padding: 0 clamp(20px, 5vw, 56px);
  margin: clamp(36px, 6vw, 64px) 0 24px;
}
.section-head h2 {
  font-size: clamp(24px, 3.4vw, 34px);
}

/* Cabecera de la sección Moda: título + tagline, sustituye al
   número/contador de trabajos (pedido del cliente, 02/09/2026: "MODA" y
   debajo "Vestir una obra de Arte"). La descripción larga ya no se ve aquí
   — vive solo dentro del visor de detalle (ver work-detail-description). */
.section-head-moda { margin-bottom: 32px; }
.section-head-moda .section-tagline {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: clamp(16px, 2vw, 20px);
  color: var(--accent);
  margin-top: 6px;
}

/* Foto horizontal a ancho completo del proyecto "Vestir una obra de Arte" —
   clicable, abre el visor de detalle con todas las fotos reales de moda
   (pedido del cliente, 02/09/2026). */
.section-banner {
  margin: 0 0 clamp(36px, 6vw, 64px);
  cursor: pointer;
}
.section-banner img {
  display: block;
  width: 100%;
  height: clamp(280px, 46vw, 560px);
  object-fit: cover;
  transition: opacity 0.35s ease;
}
.section-banner:hover img,
.section-banner:focus-visible img { opacity: 0.9; }

/* Obra pictórica: 3 corrientes fijas (Pop Art / Expresionismo /
   Hiperrealismo, pedido del cliente, 02/09/2026), a ancho completo y casi
   pegadas entre sí (pedido del cliente, 02/09/2026), con su nombre SIEMPRE
   visible encima de la imagen — no al pasar el ratón — y al hover solo una
   atenuación sutil de opacidad, sin texto superpuesto. */
.gallery-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}
.category-card {
  flex: 1 1 0;
  cursor: pointer;
}
.category-label {
  display: block;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 12px;
}
.category-card figure {
  margin: 0;
  overflow: hidden;
  background: var(--surface);
}
.category-card img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: opacity 0.35s ease;
}
.category-card:hover img,
.category-card:focus-visible img { opacity: 0.82; }

@media (max-width: 760px) {
  .gallery-categories { flex-direction: column; gap: 28px; }
  .category-card { flex-basis: auto; }
}

/* --- Acerca de (02/09/2026) --- */
/* Sección propia, con el mismo fondo que el resto del contenido (no el del
   footer) — deliberadamente distinta de "Contacto" en fondo, tono y tipo de
   contenido (biografía en prosa vs. tarjeta de datos de contacto), pedido
   del cliente para que las dos no lean como lo mismo repetido dos veces. */
.about {
  padding: clamp(56px, 10vw, 96px) clamp(20px, 5vw, 56px);
  border-top: 1px solid var(--border);
}
.about-inner { max-width: 640px; }
.about-heading {
  overflow: hidden;
  font-size: clamp(28px, 4vw, 40px);
  margin-bottom: 22px;
}
.about-inner p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink-soft);
  margin: 0 0 16px;
}
.about-inner p:last-child { margin-bottom: 0; }

/* --- Footer: tarjeta de contacto + legal + copyright --- */
footer.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: clamp(56px, 10vw, 96px) clamp(20px, 5vw, 56px) 32px;
}
.contact-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding-bottom: clamp(40px, 7vw, 64px);
}
.contact-card h2 {
  font-size: clamp(26px, 3.4vw, 34px);
}
.contact-links {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.contact-link {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: clamp(16px, 2vw, 19px);
  color: var(--ink);
  text-decoration: none;
}
.contact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.contact-icon svg { width: 20px; height: 20px; }
.contact-link:hover .contact-icon {
  background: var(--accent);
  color: var(--surface);
  transform: scale(1.06);
}
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.footer-legal {
  display: flex;
  gap: 18px;
}
.footer-legal a {
  font-size: 12.5px;
  color: var(--ink-faint);
  text-decoration: none;
}
.footer-legal a:hover { color: var(--accent); }
.footer-copyright {
  font-size: 12.5px;
  color: var(--ink-faint);
}

@media (prefers-reduced-motion: reduce) {
  .category-card, .hero-bg img, .work-detail-images img { opacity: 1 !important; transform: none !important; }
}

/* Botón "volver arriba", fijo abajo a la derecha (pedido del cliente,
   02/09/2026) — uno para la página principal y otro, con la misma clase
   base, dentro del detalle de un trabajo a pantalla completa. Oculto por
   defecto y solo visible tras bajar un poco (ver setupScrollTop/
   setupScrollTopDetail en main.js), para no estorbar en la portada. */
.scroll-top-btn {
  position: fixed;
  right: clamp(16px, 4vw, 32px);
  bottom: clamp(16px, 4vw, 32px);
  z-index: 60;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, background 0.15s ease;
}
.scroll-top-btn.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.scroll-top-btn:hover { background: var(--accent-soft); }
.scroll-top-btn-detail { z-index: 201; }

/* Detalle de un trabajo, a pantalla completa (29/08/2026 — Rodrigo: "el
   diálogo no me gusta ni en escritorio, hazlo a pantalla completa"): título
   fijo arriba + todas sus imágenes apiladas en scroll (mismo criterio que
   angelpf.es), sin tarjeta ni fondo oscuro — es su propia vista, no un
   diálogo flotante. El scroll vive en el propio elemento (no en la ventana)
   para poder fundirlo hacia la home al llegar al final (ver
   `setupCloseOnScroll` en main.js) sin que la página de fondo se mueva.
   `opacity` la controla GSAP por JS, no una transición CSS, para que el
   fundido ligado al scroll no compita con una transición declarada aquí. */
.work-detail {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Sin esto, al llegar al final del scroll de este panel el navegador
     intenta encadenar el "overscroll" hacia `body`/`html` (bloqueados con
     overflow:hidden mientras el panel está abierto) — en escritorio, con
     rueda del ratón, eso se nota como que el scroll se queda congelado justo
     al terminar (bug real reportado por Rodrigo, 30/08/2026, mucho más
     notorio en trabajos de una sola imagen porque el recorrido de scroll es
     tan corto que se llega al tope casi al instante). `contain` le dice al
     navegador que no intente encadenar el overscroll más allá de este panel.
  */
  overscroll-behavior-y: contain;
}
.work-detail.open { display: block; }
.work-detail-topbar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px clamp(16px, 5vw, 56px);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
}
/* Título/eslogan que aparece en la barra fija según se avanza en el scroll
   del detalle (pedido del cliente, 02/09/2026) — oculto hasta que el título
   grande de arriba desaparece de la vista (ver setupTopbarTitleReveal en
   main.js), para no duplicar el mismo texto dos veces a la vista. */
.work-detail-topbar-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: clamp(14px, 1.8vw, 17px);
  opacity: 0;
}
#workDetail h3 {
  font-size: clamp(26px, 4.5vw, 44px);
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(28px, 6vw, 56px) clamp(16px, 5vw, 56px) 0;
}
.work-detail-description {
  max-width: 900px;
  margin: 0 auto;
  padding: 14px clamp(16px, 5vw, 56px) 28px;
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 1.7;
  color: var(--ink-soft);
}
.work-detail-description:empty { display: none; }
.work-detail-images {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2vw, 24px);
  max-width: 900px;
  margin: 0 auto;
  padding: 0 clamp(16px, 5vw, 56px) 40px;
}
.work-detail-images img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}
.work-detail-closer { height: 0; transition: none; } /* el alto real lo pone main.js (setupCloseOnScroll) solo si el trabajo tiene fotos de sobra para necesitar scroll */

.icon-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink);
  border-radius: 999px;
  width: 36px;
  height: 36px;
  cursor: pointer;
  font-family: 'Inter', system-ui, sans-serif;
  line-height: 1;
  transition: background 0.15s ease, opacity 0.15s ease;
}
.icon-btn:hover { background: var(--accent-soft); }
.icon-btn:disabled { opacity: 0.35; cursor: default; pointer-events: none; }