/* ==========================================================================
   Gonzalo Mínguez Simón — sistema visual
   Negro cálido · ámbar · blanco cálido · sans moderna · animación discreta
   ========================================================================== */

:root {
  /* Color */
  --bg:          #0A0908;
  --bg-soft:     #121010;
  --bg-raised:   #191614;
  --line:        #2A2522;
  --text:        #F4EEE6;
  --text-dim:    #A79E93;
  --text-faint:  #6E665D;
  --amber:       #E9A63B;
  --amber-soft:  #F2C173;
  --amber-deep:  #B87C1E;

  /* Tipografía */
  --font: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --tracking-wide: 0.18em;

  /* Medidas */
  --wrap:      1320px;
  --wrap-text: 760px;
  --gutter:    clamp(1.25rem, 4vw, 3.5rem);
  --section-y: clamp(4.5rem, 10vw, 9rem);
  --radius:    4px;

  /* Movimiento */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur:  0.7s;
}

/* --- Reset ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img, video, iframe { max-width: 100%; display: block; }
img, video { height: auto; }

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.08; letter-spacing: -0.02em; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

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

::selection { background: var(--amber); color: #14100B; }

/* --- Utilidades ----------------------------------------------------------- */

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--text { max-width: var(--wrap-text); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.section--soft { background: var(--bg-soft); }

.eyebrow {
  font-size: 0.6875rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--amber);
  font-weight: 600;
  margin: 0 0 1.25rem;
}

.h-display { font-size: clamp(2.25rem, 1.2rem + 4.6vw, 5rem); }
.h-section { font-size: clamp(1.75rem, 1.1rem + 2.4vw, 3rem); margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.h-card    { font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.375rem); font-weight: 600; line-height: 1.15; letter-spacing: -0.015em; }

.lead { font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.375rem); color: var(--text-dim); line-height: 1.55; }

.screen-reader-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--amber); color: #14100B; padding: 0.75rem 1.25rem; font-weight: 600;
}
.skip-link:focus { left: 0; }

/* --- Botones -------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; gap: 0.6em;
  padding: 0.85em 1.7em;
  font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  border: 1px solid var(--amber);
  border-radius: var(--radius);
  transition: background 0.35s var(--ease), color 0.35s var(--ease),
              border-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.btn:hover, .btn:focus-visible { transform: translateY(-2px); }

.btn--solid  { background: var(--amber); color: #14100B; }
.btn--solid:hover, .btn--solid:focus-visible { background: var(--amber-soft); border-color: var(--amber-soft); }

.btn--ghost  { color: var(--text); border-color: var(--line); }
.btn--ghost:hover, .btn--ghost:focus-visible { border-color: var(--amber); color: var(--amber); }

.btn--link {
  border: 0; padding: 0; border-bottom: 1px solid var(--amber-deep);
  border-radius: 0; color: var(--amber); text-transform: none; letter-spacing: 0.02em;
  font-size: 0.9375rem;
}
.btn--link:hover { border-bottom-color: var(--amber); transform: none; }

/* --- Cabecera ------------------------------------------------------------- */

.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.25rem var(--gutter);
  transition: background 0.4s var(--ease), padding 0.4s var(--ease), border-color 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-stuck {
  background: rgba(10, 9, 8, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
  padding-block: 0.85rem;
}

.brand { font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.02em; }
.brand img { max-height: 30px; width: auto; }

.nav { display: flex; align-items: center; gap: clamp(1.25rem, 2.5vw, 2.25rem); }
.nav a {
  font-size: 0.8125rem; font-weight: 500;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--text-dim);
  transition: color 0.3s var(--ease);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--text); }
.nav a[aria-current="page"] { color: var(--amber); }

.lang { display: flex; gap: 0.4rem; font-size: 0.75rem; letter-spacing: 0.08em; color: var(--text-faint); }
.lang a[aria-current="true"] { color: var(--amber); }

.nav-toggle { display: none; }

@media (max-width: 780px) {
  .nav-toggle {
    display: inline-flex; flex-direction: column; gap: 5px; padding: 0.5rem; z-index: 102;
  }
  .nav-toggle span { display: block; width: 24px; height: 1.5px; background: var(--text); transition: transform 0.35s var(--ease), opacity 0.2s; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  .nav {
    position: fixed; inset: 0; z-index: 101;
    flex-direction: column; justify-content: center;
    background: var(--bg);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), visibility 0.4s;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav a { font-size: 1.5rem; letter-spacing: 0.04em; }
}

/* --- Showreel ------------------------------------------------------------- */

.hero { padding-top: clamp(6rem, 12vh, 9rem); padding-bottom: clamp(3rem, 7vw, 6rem); }

.reel-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, 0.95);
}
.reel-frame iframe,
.reel-frame video,
.reel-frame img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; border: 0;
}
.reel-frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,9,8,0.35) 0%, transparent 28%, transparent 62%, rgba(10,9,8,0.72) 100%);
}

.reel-empty {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.75rem; text-align: center; padding: 2rem;
  color: var(--text-faint); font-size: 0.875rem;
  background:
    repeating-linear-gradient(45deg, #0F0D0C 0 12px, #121010 12px 24px);
}
.reel-empty strong { color: var(--text-dim); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.75rem; }

.hero-copy { margin-top: clamp(2.25rem, 5vw, 3.5rem); display: grid; gap: 2rem; align-items: end; }
@media (min-width: 900px) { .hero-copy { grid-template-columns: 1.35fr 1fr; gap: 3.5rem; } }

.hero-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; }

/* --- Mosaico de proyectos ------------------------------------------------- */

.filters {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}
.filter {
  padding: 0.5em 1.1em;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--text-dim);
  border: 1px solid var(--line); border-radius: 999px;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.filter:hover { color: var(--text); border-color: var(--text-faint); }
.filter[aria-pressed="true"] { color: #14100B; background: var(--amber); border-color: var(--amber); }

.grid {
  display: grid; gap: clamp(0.75rem, 1.5vw, 1.25rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}
/* Ritmo de mosaico. En pantallas grandes las tarjetas se colocan sobre una
   retícula de 6 columnas. La ALTURA de cada una la calcula main.js a partir
   de la proporción real de su fotografía (grid-auto-rows a 1px + span exacto
   en píxeles) — así el marco se adapta a la foto en vez de recortarla.
   Sin JavaScript, grid-auto-rows vuelve a una fila fija razonable. */
@media (min-width: 1000px) {
  .grid {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-flow: dense;
    grid-auto-rows: 7.25rem;
  }
  .js .grid { grid-auto-rows: 1px; }

  /* grid-row-start se deja siempre en "auto": si se fijara también con
     "span" (como hace el atajo grid-row), chocaría con el grid-row-end que
     pone main.js y la combinación completa se invalidaría. */
  .card        { grid-column: span 2; grid-row-start: auto; grid-row-end: span 2; }  /* 3 por fila */
  .card--wide  { grid-column: span 3; grid-row-start: auto; grid-row-end: span 2; }  /* 2 por fila */
  .card--full  { grid-column: span 6; grid-row-start: auto; grid-row-end: span 4; }  /* panorámica, solo para fotos horizontales */
}

.card {
  position: relative;
  display: block; width: 100%; text-align: left;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.4s var(--ease), transform 0.5s var(--ease);
}
.card:hover, .card:focus-visible { border-color: var(--amber-deep); transform: translateY(-4px); }
.card.is-hidden { display: none; }

/* La caja de la imagen rellena siempre el alto que le da la tarjeta. En
   escritorio ese alto lo fija main.js a partir de la proporción real de la
   foto, así que aquí solo se recorta el sobrante de redondeo (unos pocos
   píxeles, nunca el recorte agresivo de antes). Sin ese alto definido (móvil,
   o sin JS) height:100% se convierte en "auto" y la imagen manda su propia
   proporción sin recortar nada. */
.card-media { position: relative; display: block; height: 100%; overflow: hidden; background: #0E0C0B; }

.card-media img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease), opacity 0.5s var(--ease);
}
.card-media video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0;
  transition: opacity 0.5s var(--ease);
}
.card:hover .card-media img { transform: scale(1.05); }
.card.is-playing .card-media video { opacity: 1; }
.card.is-playing .card-media img { opacity: 0; }

.card-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(10,9,8,0.9) 100%);
  transition: opacity 0.4s var(--ease);
}

.card-media-empty {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--text-faint); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
  background: repeating-linear-gradient(45deg, #0F0D0C 0 12px, #131110 12px 24px);
}
/* Sin foto y sin alto heredado (móvil / sin JS), el hueco vacío necesita su
   propia proporción para no colapsar a 0. */
.card-media:has(.card-media-empty) { aspect-ratio: 16 / 10; }

/* Las tarjetas son <button>, así que sus hijos son <span>: hay que darles caja. */
.card-media, .card-body, .card-body .h-card, .card-role { display: block; }

.card-body { position: absolute; inset: auto 0 0 0; padding: clamp(1rem, 2vw, 1.5rem); z-index: 2; }
.card-meta {
  display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem;
  font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--amber); margin-bottom: 0.4rem;
}
.card-meta span:not(:first-child) { color: var(--text-dim); }
.card-role { margin-top: 0.35rem; font-size: 0.8125rem; color: var(--text-dim); }

.grid-empty {
  padding: 4rem 1rem; text-align: center; color: var(--text-faint);
  border: 1px dashed var(--line); border-radius: var(--radius);
}

/* --- Modal de proyecto ---------------------------------------------------- */

.modal {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(6, 5, 5, 0.92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.45s var(--ease), visibility 0.45s;
}
.modal.is-open { opacity: 1; visibility: visible; }

.modal-panel {
  position: relative;
  width: min(1080px, 100%); max-height: 90vh; overflow-y: auto;
  background: var(--bg-soft);
  border: 1px solid var(--line); border-radius: var(--radius);
  transform: translateY(18px) scale(0.985);
  transition: transform 0.5s var(--ease);
}
.modal.is-open .modal-panel { transform: none; }

.modal-close {
  position: sticky; top: 0; float: right;
  margin: 0.75rem 0.75rem 0 0; z-index: 3;
  width: 40px; height: 40px; display: grid; place-items: center;
  background: rgba(10,9,8,0.75); border: 1px solid var(--line); border-radius: 50%;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.modal-close:hover { border-color: var(--amber); color: var(--amber); }

.modal-video { position: relative; aspect-ratio: 16 / 9; background: #000; }
.modal-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Vídeo grabado en vertical (proyecto marcado con "vertical": true en content.json):
   la ventana adopta la proporción del propio vídeo en vez de ensancharlo, así
   Vimeo lo rellena entero y no aparecen franjas negras a los lados.
   Se limita por ALTURA (no solo por ancho): un 9:16 a 420px de ancho mide
   746px de alto, más de lo que cabe junto al título y los datos sin que la
   ventana se abra ya desplazada o recortada por arriba. */
.modal-video--vertical {
  aspect-ratio: 9 / 16;
  height: min(52vh, 520px);
  width: auto;
  max-width: min(420px, 100%);
  margin-inline: auto;
}

.modal-content { padding: clamp(1.5rem, 4vw, 3rem); }
.modal-content .h-card { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); margin-bottom: 0.75rem; }

.modal-facts {
  display: grid; gap: 1rem 2rem; margin: 1.75rem 0 0;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  padding-top: 1.5rem; border-top: 1px solid var(--line);
}
.modal-facts dt {
  font-size: 0.6875rem; letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 0.3rem;
}
.modal-facts dd { margin: 0; font-size: 0.9375rem; }

/* --- Sobre mí ------------------------------------------------------------- */

.about { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 860px) { .about { grid-template-columns: 0.8fr 1.2fr; } }

.portrait {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-raised);
}
.portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9) contrast(1.05); }
.portrait-empty {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 1.5rem;
  color: var(--text-faint); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
  background: repeating-linear-gradient(45deg, #0F0D0C 0 12px, #131110 12px 24px);
}

.facts { list-style: none; margin: 1.75rem 0; padding: 0; display: grid; gap: 0.5rem; }
.facts li { position: relative; padding-left: 1.1rem; color: var(--text-dim); font-size: 0.9375rem; }
.facts li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 5px; height: 5px; background: var(--amber); border-radius: 50%; }

/* --- Servicios y perfil --------------------------------------------------- */

.cols {
  display: grid; gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.service { padding-top: 1.5rem; border-top: 1px solid var(--line); }
.service h3 { margin-bottom: 0.6rem; font-size: 1.0625rem; }
.service p { color: var(--text-dim); font-size: 0.9375rem; margin: 0; }

.spec { padding-top: 1.5rem; border-top: 1px solid var(--line); }
.spec h3 {
  font-size: 0.6875rem; letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--amber); margin-bottom: 0.9rem; font-weight: 600;
}
.spec ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.spec li { color: var(--text-dim); font-size: 0.9375rem; line-height: 1.45; }

.logos { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(1.5rem, 4vw, 3.5rem); }
.logos img { max-height: 34px; width: auto; opacity: 0.55; filter: grayscale(1) brightness(1.6); transition: opacity 0.3s var(--ease); }
.logos img:hover { opacity: 1; }

/* --- Contacto ------------------------------------------------------------- */

.contact-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1fr; } }

.contact-list { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.25rem; }
.contact-list li { padding-top: 1.25rem; border-top: 1px solid var(--line); }
.contact-list dt,
.contact-label {
  display: block; font-size: 0.6875rem; letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--text-faint); margin-bottom: 0.35rem;
}
.contact-value { font-size: clamp(1rem, 0.95rem + 0.4vw, 1.25rem); }
.contact-value a { border-bottom: 1px solid var(--line); transition: border-color 0.3s var(--ease), color 0.3s var(--ease); }
.contact-value a:hover { color: var(--amber); border-bottom-color: var(--amber); }

/* Los bloques de Gutenberg insertados en la página (p. ej. el formulario) */
.editor-slot { margin-top: 1rem; }
.editor-slot input[type="text"],
.editor-slot input[type="email"],
.editor-slot input[type="tel"],
.editor-slot input[type="url"],
.editor-slot select,
.editor-slot textarea {
  width: 100%; padding: 0.85em 1em;
  background: var(--bg-raised); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius);
  font: inherit; font-size: 0.9375rem;
  transition: border-color 0.3s var(--ease);
}
.editor-slot input:focus, .editor-slot textarea:focus, .editor-slot select:focus { border-color: var(--amber); outline: none; }
.editor-slot label { display: block; font-size: 0.8125rem; color: var(--text-dim); margin-bottom: 0.35rem; }
.editor-slot button, .editor-slot input[type="submit"], .editor-slot .wp-block-button__link {
  background: var(--amber); color: #14100B; border: 0; border-radius: var(--radius);
  padding: 0.85em 1.9em; font-weight: 600; font-size: 0.8125rem;
  letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer;
}
.editor-slot .grunion-field-wrap, .editor-slot .wp-block-jetpack-field { margin-bottom: 1rem; }

/* --- Pie ------------------------------------------------------------------ */

.site-footer {
  padding: 2.5rem var(--gutter);
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  align-items: center; justify-content: space-between;
  font-size: 0.8125rem; color: var(--text-faint);
}
.site-footer a:hover { color: var(--amber); }

/* --- Animación de entrada ------------------------------------------------- */

/* Solo se oculta si el JS está vivo: sin JS la web se ve entera. */
.js .reveal { opacity: 0; transform: translateY(22px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  transition-delay: var(--delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}

/* --- Impresión (CV imprimible) -------------------------------------------- */

@media print {
  .site-header, .site-footer, .reel-frame, .filters, .modal, .hero-actions { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 1rem; }
  a { color: #000; }
}