/* ==========================================================================
   FUENTES LOCALES DEL REDISEÑO (servidas desde el theme, sin depender de
   Google Fonts). Bricolage Grotesque, Space Mono, Instrument Serif.
   ========================================================================== */
@font-face { font-family:'Bricolage Grotesque'; src:url('../fonts/Bricolage-300.woff2') format('woff2'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Bricolage Grotesque'; src:url('../fonts/Bricolage-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Bricolage Grotesque'; src:url('../fonts/Bricolage-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Bricolage Grotesque'; src:url('../fonts/Bricolage-800.woff2') format('woff2'); font-weight:800; font-style:normal; font-display:swap; }
@font-face { font-family:'Space Mono'; src:url('../fonts/SpaceMono-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Space Mono'; src:url('../fonts/SpaceMono-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Instrument Serif'; src:url('../fonts/InstrumentSerif-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Instrument Serif'; src:url('../fonts/InstrumentSerif-400-italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }

/* ==========================================================================
   HOME NUEVA — Rediseño 2026 (front-page.php)
   Fuentes: Bricolage Grotesque (títulos), Space Mono (mono/cuerpo),
   Instrument Serif (acento itálico). Cargadas desde Google Fonts en enqueue.
   Paleta: fondo #141414, acento teal #5DC4B3, azul sección #14395F.
   Desktop: scroll horizontal en casos. Móvil: todo vertical, sin sticky.
   ========================================================================== */

.pg-hm {
  --hm-bg: #141414;
  --hm-teal: #5DC4B3;
  --hm-teal-soft: #8AD8CB;
  --hm-blue: #14395F;
  /* Azul de los botones — el mismo --color-blue (tokens-base.css) que usa
     la flecha en hover de las tarjetas de /proyecto/. Variable propia (y no
     --hm-blue) porque ese nombre ya lo usa el fondo navy de "Cómo trabajo",
     un azul distinto. */
  --hm-btn-blue: var(--color-blue, #007EFF);
  --hm-btn-blue-soft: #4DA3FF;
  --hm-line: rgba(255,255,255,.12);
  --hm-text: #ffffff;
  --hm-muted: rgba(255,255,255,.72);
  --font-display: 'Bricolage Grotesque', 'Inter', sans-serif;
  --font-mono-hm: 'Space Mono', 'Cascadia Code', monospace;
  --font-serif-hm: 'Instrument Serif', serif;

  background: var(--hm-bg);
  color: var(--hm-text);
  font-family: var(--font-mono-hm);
  /* IMPORTANTE: 'clip' y no 'hidden'. Un ancestro con overflow:hidden
     convierte el elemento en contenedor de scroll y ROMPE position:sticky
     en sus descendientes (era la causa de que el scroll horizontal de casos
     no se quedara fijo). 'clip' recorta igual pero no rompe el sticky. */
  overflow-x: clip;
  /* FIX — <main class="pg-hm"> es un flex item de .site-content (GeneratePress
     usa display:flex ahí). Un flex item tiene min-width:auto por defecto, así
     que NO puede encogerse por debajo del ancho que le exige su contenido —
     y el track horizontal de casos (varios miles de px de ancho) tiraba de
     todo el <main>, ensanchando la página entera y generando scroll
     horizontal en todo el sitio. overflow-x:clip no evita esto porque 'clip'
     no crea un "scroll container" (a diferencia de hidden/auto/scroll), así
     que no dispara la regla que pondría ese mínimo a 0 automáticamente.
     min-width:0 lo fuerza explícitamente. */
  min-width: 0;
}

.pg-hm h1, .pg-hm h2, .pg-hm h3 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -.03em;
  margin: 0;
}

/* ---- Reveal animations ---- */
.pg-hm [data-rise] { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1); }
.pg-hm [data-rise][data-in] { opacity: 1; transform: none; }
.pg-hm [data-rise][data-d="1"] { transition-delay: .09s; }
.pg-hm [data-rise][data-d="2"] { transition-delay: .18s; }
.pg-hm [data-rise][data-d="3"] { transition-delay: .27s; }
/* padding-bottom da margen a los descendentes (g, y, j...) para que el
   overflow:hidden de la máscara no los recorte — sin esto, con line-height
   tan ajustado (.9-.95) la "g" de "negocio" (Instrument Serif itálica) se
   cortaba por abajo. */
.pg-hm [data-mask] { display: block; overflow: hidden; padding-bottom: .14em; }
.pg-hm [data-mask] > span { display: block; transform: translateY(105%); transition: transform 1.15s cubic-bezier(.16,1,.3,1); }
.pg-hm [data-mask][data-in] > span { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .pg-hm [data-rise], .pg-hm [data-mask] > span { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---- Botones ----
   Dos variantes:
   --solid  = acción principal (p. ej. "Escríbeme"): relleno azul permanente
              (--hm-btn-blue, el mismo --color-blue que la flecha en hover
              de las tarjetas de /proyecto/ — color unificado de botón en
              toda la web, el teal se reserva para acentos de texto).
   --ghost  = acción secundaria (p. ej. "Descargar CV"): contorno, hover
              neutro (se aclara, no se tiñe de color).
   --accent = modificador que se añade A .pg-hm-btn--ghost cuando ese botón
              ghost es la llamada a la acción principal de su sección (el
              "Ver trabajo" del hero): por defecto es un contorno igual que
              cualquier ghost, pero al hover se rellena del mismo azul que
              --solid, replicando el énfasis que el diseño le da a esa CTA. */
.pg-hm-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; height: 50px; padding: 0 26px; border-radius: 999px;
  font-family: var(--font-mono-hm); font-size: 13px; letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none; transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
  cursor: pointer;
}
.pg-hm-btn--solid { background: var(--hm-btn-blue); color: #141414; font-weight: 700; }
.pg-hm-btn--solid:hover { background: var(--hm-btn-blue-soft); color: #141414; transform: translateY(-1px); }
.pg-hm-btn--ghost { background: transparent; border: 1px solid rgba(255,255,255,.28); color: #fff; }
.pg-hm-btn--ghost:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.5); color: #fff; }
.pg-hm-btn--ghost.pg-hm-btn--accent:hover { background: var(--hm-btn-blue); border-color: var(--hm-btn-blue); color: #141414; }

/* ---- Foco de teclado ----
   El cursor personalizado sustituye al puntero del ratón, así que para
   quien navega con teclado el indicador de foco es la ÚNICA señal de dónde
   está — le damos un anillo teal, coherente con el resto del sistema, en
   vez de dejar el azul por defecto del navegador (que además puede quedar
   con poco contraste sobre este fondo tan oscuro). */
.pg-hm a:focus-visible,
.pg-hm button:focus-visible {
  outline: 2px solid var(--hm-teal);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Hover genérico de seguridad para cualquier enlace de texto suelto que no
   tenga ya su propio estado. Con :where() para que su especificidad sea 0
   y así los botones/rows/CTA (que si fijan su propio color en :hover)
   sigan ganando siempre, en vez de heredar el teal por accidente. */
:where(.pg-hm) a:hover { color: var(--hm-teal-soft); }

/* ============ 1. HERO ============ */
/* height (no min-height): el hero se queda fijo en 100vh, ni más ni menos.
   overflow:hidden evita que un contenido puntualmente más alto empuje el
   resto de la página hacia abajo. En móvil (abajo) volvemos a min-height,
   porque ahí el contenido apilado en una sola columna sí puede necesitar
   más alto que la pantalla. */
.pg-hm-hero {
  position: relative;
  /* overflow: clip en vez de hidden — recorta igual los fondos/glow pero no
     crea contenedor de scroll. */
  overflow: clip;
  /* min-height (NO height fijo) + svh: en pantallas pequeñas o con barra de
     navegación dinámica el hero CRECE con su contenido en vez de cortarlo. */
  min-height: 100svh;
  padding: 120px 34px 34px;
  display: flex;
  flex-direction: column;
}
/* Pantallas de poca altura: el hero fluye con su contenido. */
@media (max-height: 760px) {
  .pg-hm-hero { min-height: auto; padding-top: 100px; padding-bottom: 60px; }
}
@supports not (height: 100svh) {
  .pg-hm-hero { min-height: 100vh; }
}
/* El badge vive dentro de .pg-hm-hero__copy, justo encima del H1 (antes
   era un hermano suelto que ocupaba todo el ancho de la sección y quedaba
   descolocado a la izquierda, sin relación visual clara con el título). */
.pg-hm-hero__top { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; margin-bottom: clamp(20px,3vw,38px); font-family: var(--font-mono-hm); font-size: 13px; color: var(--hm-muted); letter-spacing: .18em; text-transform: uppercase; }
.pg-hm-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hm-teal); box-shadow: 0 0 0 4px rgba(93,196,179,.2); }
/* align-items:center — el copy y la foto se centran verticalmente dentro
   del hero (100vh), en vez de anclarse abajo. */
.pg-hm-hero__grid { position: relative; z-index: 1; flex: 1; display: grid; grid-template-columns: 1.3fr .9fr; gap: 60px; align-items: center; max-width: 1620px; margin: 0 auto; width: 100%; }
.pg-hm-hero__copy h1 { margin: 0; font-size: 86px; line-height: .95; }
.pg-hm-hero__copy p { max-width: 460px; margin: 28px 0 0; font-size: 16px; line-height: 1.6; color: var(--hm-muted); }
.pg-hm-hero__cta { display: flex; gap: 14px; margin-top: 36px; flex-wrap: wrap; }

/* Foto del hero: wrapper (data-tilt, referencia para el cálculo del cursor)
   + capa interna (data-tilt-inner, la que realmente rota en 3D vía JS). */
.pg-hm-hero__photo { position: relative; aspect-ratio: 4/5; }
.pg-hm-hero__photo-inner { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 20px; transition: transform .3s cubic-bezier(.16,1,.3,1); }
.pg-hm-hero__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---- Wash: degradado circular que respira detrás del hero y el contacto ---- */
@keyframes pg-hm-wash {
  0%   { transform: translate3d(-6%, 0, 0) scale(1); }
  50%  { transform: translate3d(6%, -4%, 0) scale(1.15); }
  100% { transform: translate3d(-6%, 0, 0) scale(1); }
}
.pg-hm-wash {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  animation: pg-hm-wash 26s ease-in-out infinite;
}
.pg-hm-hero .pg-hm-wash {
  top: -10%; right: -10%;
  width: 70vw; height: 70vw;
  max-width: 900px; max-height: 900px;
  filter: blur(150px);
  opacity: .24;
  background: radial-gradient(circle, #0053A9 0%, #14395F 55%, transparent 72%);
}
@media (prefers-reduced-motion: reduce) {
  .pg-hm-wash { animation: none; }
}

/* ---- Textura de ruido global (sutil, sobre toda la home) ---- */
.pg-hm-noise {
  position: fixed;
  inset: 0;
  z-index: 130;
  pointer-events: none;
  opacity: .035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}

/* ============ 2. MARQUEE ============ */
/* mask-image funde el texto a transparente en los bordes, en vez de que el
   overflow:hidden lo corte de golpe justo en el límite del contenedor. */
.pg-hm-marquee {
  border-top: 1px solid var(--hm-line); border-bottom: 1px solid var(--hm-line);
  padding: 20px 0; background: #141414; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
}
.pg-hm-marquee__track { display: flex; align-items: center; gap: 44px; white-space: nowrap; width: max-content; animation: pg-hm-mq 48s linear infinite; font-family: var(--font-mono-hm); font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: rgba(255,255,255,.68); }
.pg-hm-marquee__sep { color: var(--hm-teal); }
@keyframes pg-hm-mq { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============ 3. CASOS (scroll horizontal en desktop) ============ */
.pg-hm-work { position: relative; height: 400vh; }
.pg-hm-work__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; padding: 90px 34px 40px; }
.pg-hm-work__head { display: flex; justify-content: space-between; align-items: center; max-width: 1620px; margin: 0 auto; width: 100%; }
/* "Casos de estudio" es un <h2> por semántica (referencia de navegación
   para lectores de pantalla), pero visualmente es una etiqueta pequeña en
   mono mayúsculas, igual que el contador "01 / 04" de al lado — el diseño
   no la trata como un titular grande. */
.pg-hm-work__head h2 {
  margin: 0; font-weight: 400;
  font-size: 13px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--hm-muted);
}
/* Más abajo, la regla "PRIORIDAD DE FUENTES" fuerza Bricolage en todo
   h1-h4 con !important — la ganamos aquí explícitamente para esta etiqueta,
   que es mono por diseño, no un titular. */
.pg-hm .pg-hm-work__head h2 { font-family: var(--font-mono-hm) !important; }
.pg-hm-work__count { font-family: var(--font-mono-hm); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--hm-muted); }
.pg-hm-work__track { flex: 1; display: flex; gap: 40px; align-items: center; will-change: transform; }
/* Tarjeta: antes el texto y la imagen "flotaban" sueltos en el track sin
   ningún límite visual entre un caso y el siguiente. El fondo + borde +
   radio delimitan cada caso como una unidad clara. */
.pg-hm-case {
  flex: 0 0 auto; width: min(78vw, 1100px);
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center;
  padding: clamp(24px,3vw,40px);
  background: rgba(255,255,255,.03);
  border: 1px solid var(--hm-line);
  border-radius: 24px;
}
.pg-hm-case__cat { font-family: var(--font-mono-hm); font-size: 11px; color: var(--hm-teal); letter-spacing: .22em; text-transform: uppercase; }
.pg-hm-case__info h3 { font-size: clamp(28px, 3.4vw, 56px); margin: 12px 0 16px; }
.pg-hm-case__info p { font-size: 15.5px; line-height: 1.6; color: var(--hm-muted); max-width: 42ch; }
.pg-hm-case__metrics { display: flex; gap: 32px; margin: 26px 0; }
.pg-hm-metric__val { display: block; font-family: var(--font-display); font-size: clamp(28px,3vw,44px); color: var(--hm-teal); }
.pg-hm-metric__lbl { display: block; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--hm-muted); margin-top: 4px; }
.pg-hm-case__img { display: block; position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 4/3; }
/* La imagen se sobredimensiona (-8%/116%) para que el parallax vertical del JS
   (data-para) tenga margen de sobra y nunca deje ver un hueco en los bordes. */
.pg-hm-case__img img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; will-change: transform; }

/* ============ 4. ÍNDICE ============ */
.pg-hm-index { padding: clamp(60px,10vw,120px) 34px; border-top: 1px solid var(--hm-line); }
.pg-hm-index__inner { max-width: 1620px; margin: 0 auto; }
/* Mismo patrón que "Casos de estudio": es un <h2> por semántica, pero
   visualmente una etiqueta pequeña, no un titular — así el hueco antes de
   la lista (clamp 24-48px) resulta proporcionado y no "pegado". */
/* Selector .pg-hm .pg-hm-index__title (dos clases) y no solo
   .pg-hm-index__title: es un <h2>, y la regla base ".pg-hm h1,h2,h3{margin:0}"
   (una clase + una etiqueta) tiene más especificidad que una sola clase, así
   que sin este prefijo el margin-bottom de aquí nunca llegaba a aplicarse. */
.pg-hm .pg-hm-index__title {
  margin: 0 0 16px;
  font-weight: 400; font-size: 13px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--hm-muted);
  font-family: var(--font-mono-hm) !important;
}
.pg-hm-index__row { display: grid; grid-template-columns: 60px 1fr auto auto; gap: 24px; align-items: center; padding: 26px 0; border-top: 1px solid var(--hm-line); color: #fff; transition: padding-left .5s cubic-bezier(.16,1,.3,1), color .4s ease; }
.pg-hm-index__row:last-child { border-bottom: 1px solid var(--hm-line); }
.pg-hm-index__row:hover { padding-left: 26px; color: var(--hm-teal); }
.pg-hm-index__num { font-family: var(--font-mono-hm); font-size: 12px; color: var(--hm-muted); }
.pg-hm-index__name { font-family: var(--font-display); font-size: clamp(22px,2.6vw,38px); font-weight: 500; letter-spacing: -.025em; }
.pg-hm-index__disc, .pg-hm-index__year { font-family: var(--font-mono-hm); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--hm-muted); }

/* ============ 5. ARSENAL (cómo trabajo) ============ */
.pg-hm-arsenal { padding: clamp(60px,10vw,130px) 34px; background: var(--hm-blue); }
.pg-hm-arsenal__inner { max-width: 1620px; margin: 0 auto; }
.pg-hm-arsenal__head { display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between; align-items: flex-end; }
.pg-hm-arsenal__head h2 { font-size: clamp(36px,5.4vw,92px); line-height: .94; max-width: 12ch; }
.pg-hm-arsenal__head p { margin: 0; max-width: 380px; font-size: 15.5px; line-height: 1.6; color: rgba(255,255,255,.72); }
.pg-hm-arsenal__list { margin-top: clamp(30px,5vw,64px); border-top: 1px solid rgba(255,255,255,.2); }
.pg-hm-step { display: grid; grid-template-columns: 1.1fr 1.4fr auto; gap: clamp(20px,3vw,44px); padding: clamp(26px,3vw,40px) 0; border-bottom: 1px solid rgba(255,255,255,.2); align-items: start; }
.pg-hm-step__head { display: flex; gap: 18px; align-items: baseline; }
.pg-hm-step__num { font-family: var(--font-mono-hm); font-size: 11px; color: var(--hm-teal); }
.pg-hm-step h3 { font-size: clamp(22px,2.4vw,34px); }
.pg-hm-step p { margin: 0; font-size: 15.5px; line-height: 1.65; color: rgba(255,255,255,.74); }
.pg-hm-step__tags { font-family: var(--font-mono-hm); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.6); }

/* ============ 6. SOBRE MÍ ============ */
.pg-hm-about { padding: clamp(60px,10vw,130px) 34px; }
.pg-hm-about__inner { max-width: 1620px; margin: 0 auto; display: grid; grid-template-columns: 1.2fr .8fr; gap: 80px; align-items: start; }
/* La columna de texto se queda fija mientras se hace scroll por la
   experiencia/herramientas de la derecha, igual que en el diseño. */
.pg-hm-about__copy { position: sticky; top: 110px; }
.pg-hm-about__copy h2 { font-size: clamp(40px,6vw,100px); line-height: .95; }
.pg-hm-about__copy p { max-width: 46ch; margin: 28px 0 0; font-size: 16px; line-height: 1.6; color: var(--hm-muted); }
.pg-hm-about__cta { display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; }
/* .pg-hm .pg-hm-about__subtitle (dos clases): es un <h3>, y la regla base
   ".pg-hm h1,h2,h3{margin:0}" (clase+etiqueta) tenía más especificidad que
   una sola clase — el margin-bottom de aquí nunca se aplicaba. */
.pg-hm .pg-hm-about__subtitle { font-family: var(--font-mono-hm); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--hm-teal); margin: 0 0 16px; }
.pg-hm-about__side .pg-hm-about__subtitle:not(:first-child) { margin-top: 40px; }
.pg-hm-exp { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 16px 0; border-top: 1px solid var(--hm-line); }
.pg-hm-exp__role { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 18px; }
.pg-hm-exp__meta { font-size: 12px; color: var(--hm-muted); }
.pg-hm-exp__period { grid-row: span 2; align-self: center; font-family: var(--font-mono-hm); font-size: 12px; color: var(--hm-muted); }
.pg-hm-about__tools { display: flex; flex-wrap: wrap; gap: 10px; }
.pg-hm-about__tools span { font-family: var(--font-mono-hm); font-size: 12px; padding: 8px 14px; border: 1px solid var(--hm-line); border-radius: 999px; color: rgba(255,255,255,.8); }

/* ============ 7. CONTACTO ============ */
.pg-hm-contact { position: relative; overflow: hidden; padding: clamp(70px,12vw,160px) 34px; border-top: 1px solid var(--hm-line); text-align: center; }
.pg-hm-contact .pg-hm-wash {
  bottom: -40%; left: 50%;
  width: 120vw; height: 80vw;
  max-width: none; max-height: none;
  transform: translateX(-50%);
  filter: blur(170px);
  opacity: .2;
  background: radial-gradient(circle, #0053A9, transparent 70%);
  animation-duration: 30s;
}
.pg-hm-contact__inner { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; }
.pg-hm-contact__kicker { display: block; margin-bottom: 16px; font-family: var(--font-mono-hm); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--hm-teal); }
.pg-hm-contact h2 { margin: 0; font-size: clamp(36px,6.5vw,110px); line-height: .95; }
.pg-hm-contact__mail {
  display: inline-flex; align-items: center; gap: 18px;
  margin-top: clamp(30px,4vw,54px);
  font-family: var(--font-display); font-weight: 500; letter-spacing: -.02em;
  font-size: clamp(22px,3vw,44px); color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.4); padding-bottom: 10px;
  transition: color .4s, border-color .4s;
}
.pg-hm-contact__mail span { font-size: .7em; }
.pg-hm-contact__mail:hover { color: var(--hm-teal); border-color: var(--hm-teal); }

/* ==========================================================================
   MÓVIL — simplificado: scroll horizontal pasa a vertical, sin sticky
   ========================================================================== */
@media (max-width: 900px) {
  /* En desktop el hero es height:100vh exacto (centrado, texto+foto caben
     en una pantalla). En móvil el contenido se apila en una sola columna y
     casi siempre necesita más alto que la pantalla — volvemos a
     min-height para que no se recorte nada. */
  .pg-hm-hero { height: auto; min-height: 100svh; padding: 100px 20px 30px; }
  .pg-hm-hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .pg-hm-hero__photo { max-width: 320px; }
  /* 86px fijo (pedido para desktop) desborda en móvil — lo dejamos fluido
     con el mismo tope de 86px. */
  .pg-hm-hero__copy h1 { font-size: clamp(34px, 10vw, 86px); }

  /* El scroll horizontal se convierte en apilado vertical */
  .pg-hm-work { height: auto !important; }
  .pg-hm-work__sticky { position: static !important; height: auto !important; overflow: visible !important; padding: 60px 20px; }
  .pg-hm-work__track { flex-direction: column; gap: 60px; transform: none !important; }
  .pg-hm-case { width: 100% !important; grid-template-columns: 1fr; gap: 24px; padding: 24px; }
  .pg-hm-case__img { order: -1; }

  .pg-hm-index, .pg-hm-arsenal, .pg-hm-about, .pg-hm-contact { padding-left: 20px; padding-right: 20px; }
  .pg-hm-index__row { grid-template-columns: 40px 1fr; gap: 8px 16px; }
  .pg-hm-index__disc, .pg-hm-index__year { grid-column: 2; }
  .pg-hm-step { grid-template-columns: 1fr; gap: 12px; }

  .pg-hm-about__inner { grid-template-columns: 1fr; gap: 48px; }
  /* El sticky de la columna de texto solo tiene sentido con dos columnas
     lado a lado; apilado en una sola columna se quedaría "congelada"
     tapando el resto del contenido al hacer scroll. */
  .pg-hm-about__copy { position: static; }
}

/* Fondo del body en la home nueva (el diseño usa #141414, no el #1E1E1E general) */
body.home,
body.page-template-front-page {
  background: #141414 !important;
}

/* Palabra en cursiva serif del título "Cómo trabajo" (editable en ACF) */
.pg-hm-serif { font-family: var(--font-serif-hm); font-style: italic; font-weight: 400; color: var(--hm-teal); }

/* ==========================================================================
   NAV HOME (rediseño) — fijo, mix-blend-mode, reloj
   ========================================================================== */
.pg-nav-home {
  position: fixed; top: 0; left: 0; right: 0; z-index: 110;
  display: flex; align-items: center; gap: 26px; padding: 20px 34px;
  font-family: var(--font-mono-hm, 'Space Mono', monospace);
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  mix-blend-mode: difference;
}
/* transition combinada (color + transform): los enlaces del nav llevan
   data-mag (tirón magnético del cursor, cursor.js), que también anima su
   propio transform — .pg-nav-home a tiene más especificidad que [data-mag]
   solo, así que si aquí solo pusiéramos "transition:color" se comería la
   suavizado del magnetismo y el enlace saltaría en vez de deslizarse. */
.pg-nav-home a { color: #fff; text-decoration: none; transition: color .2s, transform .5s cubic-bezier(.16,1,.3,1); }
.pg-nav-home a:hover { color: var(--color-blue, #007EFF); }
.pg-nav-home__brand { font-weight: 700; }
.pg-nav-home__role { color: rgba(255,255,255,.5); }
.pg-nav-home__spacer { flex: 1; }
.pg-nav-home__clock { color: rgba(255,255,255,.5); min-width: 82px; text-align: right; }

@media (max-width: 780px) {
  .pg-nav-home { gap: 16px; padding: 16px 20px; font-size: 10px; letter-spacing: .12em; flex-wrap: wrap; }
  .pg-nav-home__clock { display: none; }
  .pg-nav-home__role { display: none; }
}

/* FOOTER HOME (.pg-foot-home) — movido a components.css: ahora se usa
   también en /proyecto/, que no carga este archivo. */

/* El nav home fijo tapa el inicio del hero: compensamos con el padding-top del hero
   (ya tiene 120px), así que anulamos el padding-top:60px que tokens-base.css
   añade a <body> para el header fijo del resto de páginas — si no, el hero
   (ahora a height:100vh exacto) se saldría 60px por debajo del viewport. */
body.home { padding-top: 0; }

/* ==========================================================================
   ROBUSTEZ SIN JS: si no hay JS, revelar todo el contenido igualmente.
   ========================================================================== */
.no-js .pg-hm [data-rise],
.no-js .pg-hm [data-mask] > span { opacity: 1 !important; transform: none !important; }

/* ==========================================================================
   PRIORIDAD DE FUENTES — home nueva
   tokens-base.css fuerza `body h1..h6 { font-family: Inter !important }`.
   Aquí re-imponemos las del rediseño en .pg-hm, .pg-nav-home y .pg-foot-home
   con !important para ganar esa especificidad.
   Modelo del diseño: títulos = Bricolage, cuerpo/labels = Space Mono,
   acentos = Instrument Serif.
   ========================================================================== */

/* Títulos -> Bricolage Grotesque */
body .pg-hm h1, body .pg-hm h2, body .pg-hm h3, body .pg-hm h4,
body .pg-hm-metric__val, body .pg-hm-exp__role, body .pg-hm-index__name,
body .pg-hm-contact__mail {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif !important;
}

/* Cuerpo, labels, nav, footer -> Space Mono */
body .pg-hm, body .pg-hm p, body .pg-hm span, body .pg-hm a,
body .pg-hm li, body .pg-hm div,
body .pg-nav-home, body .pg-nav-home *,
body .pg-foot-home, body .pg-foot-home * {
  font-family: 'Space Mono', 'Cascadia Code', monospace !important;
}

/* Acento itálico serif -> Instrument Serif (gana sobre lo anterior) */
body .pg-hm .pg-hm-serif {
  font-family: 'Instrument Serif', serif !important;
}

/* ==========================================================================
   LOADER INICIAL (rediseño v2)
   ========================================================================== */
.pg-loader {
  position: fixed; inset: 0; z-index: 2000; background: #141414;
  display: grid; grid-template-rows: 1fr auto; padding: 34px 34px 30px;
  animation: pg-loaderOut .8s cubic-bezier(.16,1,.3,1) 2.05s forwards;
}
.pg-loader__brand-wrap { display: flex; align-items: center; justify-content: center; }
.pg-loader__brand {
  font-family: 'Instrument Serif', serif; font-style: italic;
  font-size: clamp(34px,6vw,74px); line-height: 1; color: rgba(255,255,255,.9);
}
.pg-loader__bar { height: 1px; background: rgba(255,255,255,.16); margin-bottom: 14px; }
.pg-loader__bar-fill { height: 100%; background: #5DC4B3; transform-origin: left; transform: scaleX(0); animation: pg-lbar 2s cubic-bezier(.4,0,.2,1) forwards; }
.pg-loader__meta {
  display: flex; justify-content: space-between;
  font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; color: rgba(255,255,255,.55);
}
.pg-loader[data-done] { opacity: 0; visibility: hidden; pointer-events: none; }

@keyframes pg-loaderOut { to { opacity: 0; visibility: hidden; } }
@keyframes pg-lbar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Respeta reduce-motion: sin contador largo, se va rápido */
@media (prefers-reduced-motion: reduce) {
  .pg-loader { animation-delay: .3s; }
  .pg-loader__bar-fill { animation-duration: .3s; }
}

@media (max-width: 780px) {
  .pg-loader__meta span:first-child { display: none; }
}

/* ==========================================================================
   H1/H2 con líneas enmascaradas + mezcla Bricolage/serif (sintaxis *palabra*)
   Estructura: <h1 data-mask-parent><span data-mask><span>texto</span></span>…</h1>
   ========================================================================== */
.pg-hm [data-mask-parent] {
  margin: 0;
}
.pg-hm [data-mask-parent] [data-mask] {
  display: block;
  overflow: hidden;
}
.pg-hm [data-mask-parent] [data-mask] > span {
  display: block;
  transform: translateY(105%);
  transition: transform 1.15s cubic-bezier(.16,1,.3,1);
}
.pg-hm [data-mask-parent][data-in] [data-mask] > span,
.pg-hm [data-mask-parent] [data-mask][data-in] > span {
  transform: none;
}
.pg-hm [data-mask-parent] [data-mask][data-d="1"] > span { transition-delay: .1s; }
.pg-hm [data-mask-parent] [data-mask][data-d="2"] > span { transition-delay: .2s; }
.pg-hm [data-mask-parent] [data-mask][data-d="3"] > span { transition-delay: .3s; }

/* Las líneas normales del título heredan Bricolage (regla de fuentes de arriba
   ya cubre .pg-hm h1/h2). El acento serif itálico manda: */
.pg-hm [data-mask-parent] .pg-hm-serif {
  font-family: 'Instrument Serif', serif !important;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.01em;
  color: #5DC4B3;
}
/* Segunda variante del diseño: la última línea serif va en blanco, no teal.
   Si quieres una en blanco, usa **doble asterisco** (ver helper opcional). */

/* Fallback: sin JS o reduce-motion, los títulos enmascarados se ven igual */
.no-js .pg-hm [data-mask-parent] [data-mask] > span { transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .pg-hm [data-mask-parent] [data-mask] > span { transform: none !important; transition: none !important; }
}

/* Variante blanca del acento serif (sintaxis **palabra**) */
.pg-hm [data-mask-parent] .pg-hm-serif--white { color: #ffffff; }

/* ==========================================================================
   FIX v2.6 — los <span> internos del H1/H2 caían a Space Mono
   Mi regla `body .pg-hm span { font-family: Space Mono !important }` pisaba
   los spans del título. Aquí forzamos Bricolage en TODOS los spans que viven
   dentro de un título enmascarado (mayor especificidad + !important).
   ========================================================================== */
body .pg-hm [data-mask-parent],
body .pg-hm [data-mask-parent] span,
body .pg-hm [data-mask-parent] [data-mask],
body .pg-hm [data-mask-parent] [data-mask] > span {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif !important;
}
/* ...salvo las palabras marcadas como serif, que mandan */
body .pg-hm [data-mask-parent] .pg-hm-serif {
  font-family: 'Instrument Serif', serif !important;
}

/* Logo del nav home (desde Ajustes Portfolio) */
.pg-nav-home__logo {
  height: 22px;
  width: auto;
  display: block;
}
@media (max-width: 780px) {
  .pg-nav-home__logo { height: 18px; }
}

/* ==========================================================================
   FIX v2.7 — position:sticky del scroll horizontal
   Causa raíz: un ancestro con overflow:hidden (o cualquier valor != visible)
   crea un contenedor de scroll y ANULA position:sticky en los descendientes.
   Aquí garantizamos que ningún wrapper de GeneratePress ni el propio .pg-hm
   rompan el sticky de .pg-hm-work__sticky.
   ========================================================================== */
body.home,
body.home .site,
body.home .site-content,
body.home #page,
body.home #content,
body.home .content-area,
body.home #primary,
body.home #main {
  overflow: visible !important;
}

/* La home es a sangre completa: quitamos los max-width de GP que
   estrecharían el track horizontal. */
body.home .site.grid-container,
body.home .site-content,
body.home #page {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Fallback: si el navegador no soporta overflow:clip, usamos hidden solo en
   el eje X a nivel de <html>, que no afecta al sticky de dentro. */
@supports not (overflow: clip) {
  .pg-hm { overflow-x: visible; }
  html { overflow-x: hidden; }
}