/*
Theme Name: Editor Portfolio
Theme URI: https://ejemplo.com/
Author: Tu nombre
Author URI: https://ejemplo.com/
Description: Tema de portfolio para editores de video en tonos rojos con degradés a blanco. Hero con cabezal de línea de tiempo que sigue el cursor, reel destacado, grilla de proyectos con formatos mixtos (horizontal y vertical) y tipografía grande.
Version: 3.28.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: editor-portfolio
Tags: portfolio, grid-layout, custom-colors, accessibility-ready
*/

/* ==========================================================================
   1. Variables
   Las fuentes se cargan desde functions.php (Bricolage Grotesque + Instrument Sans).
   Para cambiar el rojo de todo el sitio, editá --rojo, --rojo-hondo y --senal.
   ========================================================================== */
:root {
  --papel: #ffffff;
  --rosa: #fdeeee;
  --tinta: #1c0d10;
  --tinta-alta: #2b1418;
  --pizarra: #6e5659;
  --regla: #efd5d7;

  --rojo: #b3262e;        /* rojo principal: hero y contacto */
  --rojo-hondo: #6b1017;  /* rojo oscuro: extremos de los degradés y pie */
  --senal: #a01e26;       /* rojo para enlaces y detalles sobre fondo claro */
  --senal-claro: #ffc9cd; /* detalles sobre fondo rojo */

  --fuente-titulos: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif;
  --fuente-texto: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --ancho: 78rem;
  --ancho-texto: 36rem;
  --lateral: clamp(1.25rem, 4vw, 3rem);
  --radio: 6px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ==========================================================================
   2. Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fuente-texto);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--senal); color: #fff; }

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

a { color: var(--senal); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--rojo-hondo); text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--senal); outline-offset: 3px; }
.hero :focus-visible { outline-color: var(--tinta); }
.oscuro :focus-visible { outline-color: #fff; }

h1, h2, h3, h4 {
  margin: 0 0 0.5em;
  font-family: var(--fuente-titulos);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.015em;
}
h2 { font-size: clamp(2.25rem, 5vw, 4rem); letter-spacing: -0.02em; }
h3 { font-size: 1.25rem; letter-spacing: -0.015em; line-height: 1.15; }

p { margin: 0 0 1.25rem; }

.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 var(--lateral); }
.texto { max-width: var(--ancho-texto); }
.seccion { padding: clamp(4rem, 9vw, 8rem) 0; }

/* Secciones con degradé suave entre blanco y rosa */
.seccion-degrade-a-rosa { background: linear-gradient(180deg, var(--papel) 0%, var(--rosa) 100%); }
.seccion-degrade-a-blanco { background: linear-gradient(180deg, var(--rosa) 0%, var(--papel) 100%); }

/* Sección roja de contacto: empieza en rojo y baja hasta el rojo oscuro del pie, sin degradé desde blanco. */
.oscuro {
  background: linear-gradient(180deg, var(--rojo) 0%, var(--rojo-hondo) 100%);
  color: #fff;
}
.oscuro a { color: #fff; }
.oscuro p { color: #fff; }

/* ==========================================================================
   3. Cabecera
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid var(--regla);
  backdrop-filter: blur(10px);
}
.site-header .contenedor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.site-title { margin: 0; font-family: var(--fuente-titulos); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1; }
.site-title a { color: var(--tinta); text-decoration: none; }
.site-description { display: none; }

.main-navigation ul { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.75rem; margin: 0; padding: 0; list-style: none; }
.main-navigation a {
  display: block;
  padding: 0.2rem 0;
  color: var(--tinta);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  background: linear-gradient(var(--senal), var(--senal)) left bottom / 0 2px no-repeat;
  transition: background-size 0.3s var(--ease);
}
.main-navigation a:hover,
.main-navigation .current-menu-item > a { color: var(--tinta); background-size: 100% 2px; }

.main-navigation .menu-cta a {
  padding: 0.5rem 1.1rem;
  background: var(--senal);
  color: #fff;
  border-radius: 999px;
  transition: background 0.25s var(--ease);
}
.main-navigation .menu-cta a:hover { background: var(--rojo-hondo); color: #fff; }

/* ==========================================================================
   4. Hero: rojo que se funde a blanco, con cabezal de línea de tiempo
   (js/playhead.js mueve el cabezal con el cursor)
   ========================================================================== */
.hero {
  --pos: 62%;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* El inicio ocupa toda la pantalla y lo demás aparece al bajar. --hero-arriba lo mide js/playhead.js */
  min-height: calc(100vh - var(--hero-arriba, 4.5rem));
  min-height: calc(100svh - var(--hero-arriba, 4.5rem));
  padding-top: clamp(2.5rem, 6vw, 5rem);
  cursor: col-resize;
  color: var(--tinta);
  /* En pantallas angostas el título queda arriba, sobre el rojo, y el texto abajo, sobre el blanco */
  background: linear-gradient(180deg, var(--rojo) 0%, var(--rojo) 30%, var(--papel) 70%);
}
@media (min-width: 56rem) {
  /* En pantallas anchas el título queda a la izquierda, sobre el rojo, y el texto a la derecha, sobre el blanco */
  .hero {
    background: linear-gradient(100deg, var(--rojo-hondo) 0%, var(--rojo) 30%, var(--rojo) 40%, var(--papel) 82%);
  }
}

.hero-grid { width: 100%; display: grid; gap: 2.5rem; align-items: end; padding-bottom: clamp(2.5rem, 6vw, 4.5rem); }
@media (min-width: 56rem) { .hero-grid { grid-template-columns: minmax(0, 1fr) 19rem; gap: 3rem; } }
.hero > .contenedor { display: flex; flex: 1 1 auto; align-items: flex-end; }

.hero-titulo {
  margin: 0;
  color: #fff;
  font-size: clamp(3.25rem, 10.5vw, 8.5rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.02em;
}
.hero-titulo span { display: block; }

.hero-lateral { max-width: 19rem; }
.hero-lateral p { color: var(--tinta); font-size: 1.0625rem; }
.hero-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; }
.hero-acciones a:not(.boton) { color: var(--tinta); }
.hero .boton { background: var(--tinta); color: #fff; }
.hero .boton:hover { background: var(--rojo-hondo); color: #fff; }

/* Regla con marcas, como la de un editor de video */
.regla {
  position: relative;
  height: 2.75rem;
  border-top: 1px solid var(--tinta);
  background:
    repeating-linear-gradient(to right, var(--tinta) 0 1px, transparent 1px 8%) left top / 100% 14px no-repeat,
    repeating-linear-gradient(to right, var(--pizarra) 0 1px, transparent 1px 1.6%) left top / 100% 7px no-repeat;
}

.cabezal {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 0;
  pointer-events: none;
  animation: barrido 1.4s var(--ease);
}
.cabezal::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: var(--senal); }
.cabezal-codigo {
  position: absolute;
  bottom: 0.7rem;
  left: 0;
  transform: translateX(-50%);
  padding: 0.2rem 0.55rem;
  background: var(--senal);
  color: #fff;
  border-radius: 4px;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}
@keyframes barrido { from { left: 0; } }

/* ==========================================================================
   5. Video: reel y embeds
   ========================================================================== */
.video-embed,
.wp-block-embed.is-type-video .wp-block-embed__wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
  border-radius: var(--radio);
  box-shadow: 0 30px 60px -30px rgba(143, 9, 19, 0.5);
}
.video-embed iframe, .video-embed video, .wp-block-embed.is-type-video iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.wp-embed-aspect-16-9 .wp-block-embed__wrapper::before { display: none; }
.wp-block-embed { margin: 0 0 1.5rem; }
.wp-block-video video { width: 100%; }

.reel-cabecera { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 3rem; margin-bottom: 2rem; }
.reel-cabecera h2 { margin: 0; }
.reel-cabecera p { max-width: 24rem; margin: 0; color: var(--pizarra); }

.capitulos { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; margin: 1.25rem 0 0; padding: 0; list-style: none; font-size: 0.9375rem; }
.capitulos a { color: var(--tinta); text-decoration: none; }
.capitulos a:hover { color: var(--senal); text-decoration: underline; }
.capitulos time { margin-right: 0.5rem; color: var(--senal); font-weight: 600; }

/* ==========================================================================
   6. Proyectos: formatos mixtos
   ========================================================================== */
.trabajos-cabecera { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: 2.5rem; }
.trabajos-cabecera h2 { margin: 0; }

.filtros { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.filtros a {
  display: inline-block;
  padding: 0.2rem 0;
  color: var(--pizarra);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.filtros a:hover { color: var(--tinta); }
.filtros .activo a, .filtros .current-cat a { color: var(--tinta); border-bottom-color: var(--senal); }

.proyectos { display: grid; gap: 3rem 1.5rem; grid-template-columns: 1fr; margin: 0; padding: 0; list-style: none; }
@media (min-width: 40rem) { .proyectos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) {
  .proyectos { grid-template-columns: repeat(12, 1fr); }
  .proyecto { grid-column: span 4; }
  .proyecto--ancho { grid-column: span 8; }
  .proyecto--vertical { grid-column: span 4; grid-row: span 2; }
}
@media (min-width: 40rem) and (max-width: 63.99rem) {
  .proyecto--ancho { grid-column: 1 / -1; }
  .proyecto--vertical .proyecto-miniatura { aspect-ratio: 4 / 5; }
}

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

.proyecto-miniatura {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--tinta-alta);
  border-radius: var(--radio);
}
.proyecto--vertical .proyecto-miniatura { aspect-ratio: 9 / 16; }

.proyecto-miniatura img, .proyecto-imagen {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.proyecto-imagen { display: block; }
.proyecto a:hover .proyecto-imagen,
.proyecto a:hover .proyecto-miniatura img { transform: scale(1.04); }

/* Grano de película sobre la imagen */
.proyecto-miniatura::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.22;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Línea que avanza al pasar el cursor, como una barra de reproducción */
.proyecto-miniatura::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  width: 0;
  height: 4px;
  background: var(--rojo);
  transition: width 1.1s var(--ease);
}
.proyecto a:hover .proyecto-miniatura::before,
.proyecto a:focus-visible .proyecto-miniatura::before { width: 100%; }

.duracion {
  position: absolute;
  left: 0.75rem;
  bottom: 0.9rem;
  z-index: 3;
  padding: 0.15rem 0.5rem;
  background: var(--tinta);
  color: #fff;
  border-radius: 4px;
  font-size: 0.8125rem;
  font-weight: 600;
}

.proyecto-titulo { margin: 1rem 0 0.2rem; font-size: 1.375rem; }
.proyecto--ancho .proyecto-titulo { font-size: clamp(1.5rem, 2.6vw, 2.25rem); letter-spacing: -0.015em; }
.proyecto a:hover .proyecto-titulo { color: var(--senal); }
.proyecto-datos { margin: 0; color: var(--pizarra); font-size: 0.9375rem; }

/* ==========================================================================
   7. Números destacados
   ========================================================================== */
.numeros {
  padding: clamp(3rem, 6vw, 5rem) 0;
  background: linear-gradient(100deg, var(--rojo-hondo) 0%, var(--rojo) 70%);
  color: #fff;
}
.numeros-lista {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.5rem 3rem;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
.numeros-lista li { flex: 1 1 14rem; min-width: 0; }

.numero-valor {
  display: block;
  font-family: var(--fuente-titulos);
  font-size: clamp(2.75rem, 6.2vw, 5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
}
.numero-texto {
  display: block;
  margin-top: 0.6rem;
  font-size: clamp(1rem, 1.6vw, 1.375rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.numeros-aviso { margin: 0; text-align: center; }

/* ==========================================================================
   8. Sobre mí
   ========================================================================== */
.sobre-mi { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 52rem) { .sobre-mi { grid-template-columns: 24rem minmax(0, 1fr); gap: 5rem; } }

.sobre-mi-foto { width: 100%; max-width: 24rem; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radio); }

.sobre-mi-frase {
  margin: 0 0 2rem;
  font-family: var(--fuente-titulos);
  font-size: clamp(1.625rem, 3.2vw, 2.5rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.herramientas { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; margin: 2rem 0 0; padding: 0; list-style: none; color: var(--pizarra); font-weight: 500; }

/* ==========================================================================
   9. Entrada individual
   ========================================================================== */
.entry-header { margin-bottom: 2rem; }
.entry-title { font-size: clamp(2.25rem, 6vw, 4.5rem); letter-spacing: -0.02em; }
.entry-meta { color: var(--pizarra); font-size: 0.9375rem; }
.entry-meta a { color: inherit; }

.entry-content > * { max-width: var(--ancho-texto); }
.entry-content > .alignwide, .entry-content > .video-embed, .entry-content > .wp-block-embed, .entry-content > .wp-block-image, .entry-content > .wp-block-gallery, .entry-content > .wp-block-video, .entry-content > .wp-block-columns { max-width: var(--ancho); }

.ficha { display: grid; gap: 1.25rem 2rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); margin: 2.5rem 0; padding: 1.5rem 0; border-block: 1px solid var(--regla); }
.ficha dt { color: var(--pizarra); font-size: 0.875rem; }
.ficha dd { margin: 0; font-weight: 600; }

/* ==========================================================================
   10. Formularios y botones
   ========================================================================== */
label { display: block; margin-bottom: 0.2rem; color: var(--pizarra); font-size: 0.875rem; }
.oscuro label { color: #fff; }

input[type="text"], input[type="email"], input[type="url"], input[type="tel"], textarea, select {
  width: 100%;
  padding: 0.7rem 0;
  background: transparent;
  color: inherit;
  border: 0;
  border-bottom: 1px solid #d9b9bc;
  border-radius: 0;
  font: inherit;
  transition: border-color 0.2s;
}
.oscuro input[type="text"], .oscuro input[type="email"], .oscuro input[type="url"],
.oscuro input[type="tel"], .oscuro textarea, .oscuro select { border-bottom-color: rgba(255, 255, 255, 0.6); }
input:focus, textarea:focus, select:focus { border-bottom-color: var(--senal); outline: none; }
.oscuro input:focus, .oscuro textarea:focus, .oscuro select:focus { border-bottom-color: #fff; }
textarea { resize: vertical; }

button, .boton, input[type="submit"], .wp-block-button__link {
  display: inline-block;
  padding: 0.85rem 1.6rem;
  background: var(--senal);
  color: #fff;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}
button:hover, .boton:hover, input[type="submit"]:hover, .wp-block-button__link:hover { background: var(--rojo-hondo); color: #fff; }
button:active, .boton:active, input[type="submit"]:active { transform: scale(0.97); }

.oscuro .boton, .oscuro input[type="submit"] { background: #fff; color: var(--rojo-hondo); }
.oscuro .boton:hover, .oscuro input[type="submit"]:hover { background: var(--rosa); color: var(--rojo-hondo); }

/* ==========================================================================
   11. Contacto y pie
   ========================================================================== */
.contacto { display: grid; gap: 3rem; }
@media (min-width: 56rem) { .contacto { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 6rem; } }

.contacto-titulo { font-size: clamp(3rem, 9vw, 7.5rem); font-weight: 700; line-height: 0.95; letter-spacing: -0.02em; margin-bottom: 1.5rem; }
.contacto-correo {
  font-family: var(--fuente-titulos);
  font-size: clamp(1.25rem, 2.6vw, 1.875rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #fff;
}
.contacto-wsp { margin-top: -0.5rem; }
.contacto form p { margin-bottom: 1.5rem; }

.site-footer { padding: 1.75rem 0; background: var(--rojo-hondo); color: rgba(255, 255, 255, 0.85); font-size: 0.875rem; }
.site-footer a { color: inherit; }

/* ==========================================================================
   12. Clases estándar de WordPress
   ========================================================================== */
.alignleft { float: left; margin: 0.25rem 1.5rem 1rem 0; }
.alignright { float: right; margin: 0.25rem 0 1rem 1.5rem; }
.aligncenter { display: block; margin-inline: auto; clear: both; }

.wp-caption-text, .wp-element-caption, figcaption { margin-top: 0.5rem; color: var(--pizarra); font-size: 0.875rem; }

.pagination, .posts-navigation, .post-navigation { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--regla); }
.nav-links { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

.screen-reader-text {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.screen-reader-text:focus {
  position: fixed; top: 0.5rem; left: 0.5rem; z-index: 100000; width: auto; height: auto; margin: 0;
  padding: 0.75rem 1rem; overflow: visible; clip: auto; clip-path: none; background: var(--tinta); color: #fff;
}

/* ==========================================================================
   13. Responsive y accesibilidad
   ========================================================================== */
@media (max-width: 40rem) {
  .site-header .contenedor { flex-wrap: wrap; }
  .main-navigation ul { gap: 0.25rem 1.25rem; }
  .alignleft, .alignright { float: none; display: block; margin: 0 auto 1rem; }
  .cabezal-codigo { font-size: 0.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   14. Piezas que usan las plantillas PHP
   ========================================================================== */
[hidden] { display: none !important; }

.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }

.site-branding { min-width: 0; }
.custom-logo { display: block; max-height: 2.5rem; width: auto; }
.nota-pie { margin: 0; }

.seccion--continua { padding-top: 0; }
.sobre-mi--sin-foto { grid-template-columns: 1fr; }
.contacto--sola { grid-template-columns: 1fr; }

.encabezado-pagina { padding-top: clamp(3rem, 7vw, 5rem); }
.entrada-resumen { padding: 2rem 0; border-top: 1px solid var(--regla); }
.entrada-resumen .entry-title { font-size: clamp(1.75rem, 3.5vw, 2.5rem); }
.entrada-resumen .entry-title a { color: inherit; text-decoration: none; }
.entrada-resumen .entry-title a:hover { color: var(--senal); }

.volver { display: inline-block; margin-top: 2rem; font-weight: 500; }
.aviso { padding: 1rem 1.25rem; border: 1px dashed var(--regla); border-radius: var(--radio); color: var(--pizarra); }

.page-numbers { display: inline-block; padding: 0.3rem 0.75rem; border-radius: 999px; color: var(--tinta); text-decoration: none; }
a.page-numbers:hover { color: var(--senal); }
.page-numbers.current { background: var(--senal); color: #fff; }
.contacto-formulario p { margin-bottom: 1.5rem; }

/* ==========================================================================
   15. Fondo animado del inicio: columnas de videos que bajan en loop
   (solo el hero; el resto de la página no cambia)
   ========================================================================== */
.hero--fondo { background: var(--rojo-hondo); }

/* Capa de color sobre los videos: rojo a la izquierda, blanco a la derecha */
.hero--fondo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(215, 31, 42, 0.78) 0%, rgba(215, 31, 42, 0.74) 30%, rgba(255, 255, 255, 0.9) 70%);
}
@media (min-width: 56rem) {
  .hero--fondo::before {
    background: linear-gradient(100deg, rgba(143, 9, 19, 0.86) 0%, rgba(215, 31, 42, 0.76) 32%, rgba(215, 31, 42, 0.72) 42%, rgba(255, 255, 255, 0.88) 84%);
  }
}
.hero--fondo > .contenedor { position: relative; z-index: 2; }
.hero--fondo > .regla, .hero--fondo > .timeline { z-index: 2; }

.hero-fondo {
  --hueco: clamp(0.75rem, 1.6vw, 1.25rem);
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Las columnas son más grandes que el hero y van inclinadas */
.hero-columnas {
  position: absolute;
  top: -35%;
  bottom: -35%;
  left: -18%;
  right: -18%;
  display: flex;
  gap: var(--hueco);
  transform: rotate(-6deg);
}
.hero-columna { flex: 1 1 0; min-width: 0; overflow: hidden; }

/* La pista lleva la lista de piezas dos veces; al bajar la mitad, vuelve a empezar sin corte */
.hero-pista { animation: bajar 80s linear infinite; will-change: transform; }
.hero-columna:nth-child(1) .hero-pista { animation-duration: 90s; animation-delay: -10s; }
.hero-columna:nth-child(2) .hero-pista { animation-duration: 70s; animation-delay: -34s; }
.hero-columna:nth-child(3) .hero-pista { animation-duration: 100s; animation-delay: -52s; }
.hero-columna:nth-child(4) .hero-pista { animation-duration: 76s; animation-delay: -20s; }
.hero-columna:nth-child(5) .hero-pista { animation-duration: 94s; animation-delay: -66s; }
@keyframes bajar { from { transform: translateY(-50%); } to { transform: translateY(0); } }

.hero-tile {
  position: relative;
  aspect-ratio: 3 / 4;
  margin-bottom: var(--hueco);
  overflow: hidden;
  border-radius: 14px;
  background: var(--rojo-hondo);
}
.hero-tile video, .hero-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Piezas de color y con imagen llevan el ícono de reproducir */
.hero-tile:not(.hero-tile--video)::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.8;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><circle cx='32' cy='32' r='29' fill='none' stroke='white' stroke-opacity='.75' stroke-width='3'/><path d='M26 20l20 12-20 12z' fill='white' fill-opacity='.75'/></svg>") center / 4.5rem no-repeat;
}
.hero-tile--c1 { background: linear-gradient(160deg, #ff7a82, #8f0913); }
.hero-tile--c2 { background: linear-gradient(200deg, #ffffff, #e8545d 55%, #5a0710); }
.hero-tile--c3 { background: linear-gradient(140deg, #ffc9cd, #c4121e); }
.hero-tile--c4 { background: linear-gradient(180deg, #d71f2a, #2b0a0e); }
.hero-tile--c5 { background: linear-gradient(120deg, #ffe3e5, #f08a90 60%, #8f0913); }
.hero-tile--c6 { background: linear-gradient(170deg, #8f0913, #1c0d10); }

/* Menos columnas en pantallas chicas */
@media (max-width: 64rem) { .hero-columna:nth-child(n+5) { display: none; } }
@media (max-width: 40rem) { .hero-columna:nth-child(n+4) { display: none; } }


/* ==========================================================================
   16. Inicio centrado: título y texto al centro de la pantalla, sobre rojo
   ========================================================================== */
.hero,
.hero--fondo { text-align: center; }
@media (min-width: 56rem) {
  .hero { background: linear-gradient(180deg, var(--rojo) 0%, var(--rojo) 70%, var(--rojo-hondo) 100%); }
}
.hero { background: linear-gradient(180deg, var(--rojo) 0%, var(--rojo) 70%, var(--rojo-hondo) 100%); }

/* Capa de color uniforme para que el texto blanco se lea sobre los videos; en el borde de abajo se aclara a blanco */
.hero--fondo::before,
.hero--fondo::before {
  background: linear-gradient(180deg, rgba(143, 9, 19, 0.82) 0%, rgba(215, 31, 42, 0.74) 45%, rgba(215, 31, 42, 0.78) 80%, rgba(255, 255, 255, 0.92) 100%);
}
@media (min-width: 56rem) {
  .hero--fondo::before {
    background: linear-gradient(180deg, rgba(143, 9, 19, 0.82) 0%, rgba(215, 31, 42, 0.74) 45%, rgba(215, 31, 42, 0.78) 80%, rgba(255, 255, 255, 0.92) 100%);
  }
}

.hero > .contenedor { align-items: center; justify-content: center; }
.hero-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  padding-block: clamp(2rem, 5vw, 4rem) clamp(4rem, 9vw, 6.5rem);
}
@media (min-width: 56rem) { .hero-grid { grid-template-columns: none; gap: 1.5rem; } }

.hero-titulo { max-width: 14ch; text-wrap: balance; }
.hero-lateral { max-width: 40rem; display: flex; flex-direction: column; align-items: center; gap: 1.75rem; }
.hero-lateral p {
  margin: 0;
  color: #fff;
  font-size: clamp(1.25rem, 2.6vw, 1.875rem);
  font-weight: 500;
  line-height: 1.35;
  text-wrap: balance;
}
.hero-acciones { justify-content: center; }
.hero-acciones a:not(.boton) { color: #fff; text-decoration: underline; text-underline-offset: 0.3em; }
.hero .boton { background: #fff; color: var(--senal); }
.hero .boton:hover { background: var(--rosa); color: var(--rojo-hondo); }
.hero :focus-visible { outline-color: #fff; }

/* El título se ajusta también a la altura de la pantalla para que todo entre sin scrollear */
.hero-titulo { font-size: clamp(2.75rem, min(9vw, 14vh), 7.5rem); }
.hero-grid { padding-block: clamp(1.5rem, 3vh, 3rem) clamp(3.5rem, 8vh, 6rem); }
.hero { padding-top: clamp(1rem, 2vh, 2rem); }

/* ==========================================================================
   17. Rojo más apagado combinado con negro en el inicio
   ========================================================================== */
.hero { background: linear-gradient(165deg, #120708 0%, #3a0f14 38%, var(--rojo) 100%); }
.hero--fondo { background: #120708; }
.hero--fondo::before,
.hero--fondo::before {
  background: linear-gradient(165deg, rgba(14, 6, 7, 0.9) 0%, rgba(45, 12, 16, 0.82) 40%, rgba(120, 28, 36, 0.78) 80%, rgba(255, 255, 255, 0.92) 100%);
}
@media (min-width: 56rem) {
  .hero--fondo::before {
    background: linear-gradient(165deg, rgba(14, 6, 7, 0.9) 0%, rgba(45, 12, 16, 0.82) 40%, rgba(120, 28, 36, 0.78) 80%, rgba(255, 255, 255, 0.92) 100%);
  }
}
.hero-tile--c1 { background: linear-gradient(160deg, #c9585f, #4a0b11); }
.hero-tile--c2 { background: linear-gradient(200deg, #f4e6e6, #a8343b 55%, #2a0a0d); }
.hero-tile--c3 { background: linear-gradient(140deg, #e8b9bc, #7d1a21); }
.hero-tile--c4 { background: linear-gradient(180deg, #8c2229, #170708); }
.hero-tile--c5 { background: linear-gradient(120deg, #efd5d7, #b4575d 60%, #4a0b11); }
.hero-tile--c6 { background: linear-gradient(170deg, #4a0b11, #0e0607); }
/* El botón de un solo "Ver trabajos": píldora blanca con letra negra-roja */
.hero .boton { background: #fff; color: var(--tinta); padding: 1rem 2.25rem; font-size: 1.0625rem; }
.hero .boton:hover { background: var(--rosa); color: var(--rojo-hondo); }


/* ==========================================================================
   18. Línea de tiempo con pistas, barra de herramientas y marcadores
   Todo es decorativo y transparente: los videos de atrás se siguen viendo.
   ========================================================================== */
/* Capa de color: más fuerte al centro (donde está el texto) y suave en los costados */
.hero--fondo::before,
.hero--fondo::before {
  background:
    linear-gradient(90deg, transparent 0%, rgba(14, 6, 7, 0.38) 28%, rgba(14, 6, 7, 0.38) 72%, transparent 100%),
    linear-gradient(165deg, rgba(14, 6, 7, 0.78) 0%, rgba(45, 12, 16, 0.62) 45%, rgba(110, 26, 34, 0.58) 100%);
}
@media (min-width: 56rem) {
  .hero--fondo::before {
    background:
      linear-gradient(90deg, transparent 0%, rgba(14, 6, 7, 0.38) 28%, rgba(14, 6, 7, 0.38) 72%, transparent 100%),
      linear-gradient(165deg, rgba(14, 6, 7, 0.78) 0%, rgba(45, 12, 16, 0.62) 45%, rgba(110, 26, 34, 0.58) 100%);
  }
}

.timeline { position: relative; z-index: 2; color: #fff; cursor: default; }
.timeline-pistas {
  display: grid;
  gap: 0.3rem;
  padding: 0.5rem 0;
  background: rgba(14, 6, 7, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.pista { position: relative; display: flex; align-items: stretch; height: 1.5rem; padding-left: 3rem; }
.pista-nombre { position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.6); }
.pista-clips { display: flex; flex: 1 1 auto; gap: 3px; min-width: 0; }
.clip {
  flex: var(--w) 1 0;
  min-width: 0;
  padding: 0 0.5rem;
  border-radius: 3px;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.clip--hueco { background: transparent; padding: 0; }
.clip--video { background: rgba(124, 108, 190, 0.78); }
.clip--audio { background: rgba(70, 150, 112, 0.74); }

.timeline .regla {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  background:
    repeating-linear-gradient(to right, rgba(255, 255, 255, 0.7) 0 1px, transparent 1px 8%) left top / 100% 12px no-repeat,
    repeating-linear-gradient(to right, rgba(255, 255, 255, 0.4) 0 1px, transparent 1px 1.6%) left top / 100% 6px no-repeat,
    rgba(14, 6, 7, 0.72);
}
.marcador {
  position: absolute;
  top: 0.9rem;
  left: var(--x);
  padding-left: 0.85rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #fff;
}
.marcador::before { content: ""; position: absolute; left: 0; top: 0.15rem; width: 0.6rem; height: 0.7rem; background: #e0a43a; clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%); }
.timeline .cabezal { top: 0; bottom: 0; }
.timeline .cabezal::before { background: var(--senal-claro); }
.timeline .cabezal-codigo { bottom: 0.45rem; }

/* Barra de herramientas a la izquierda y datos técnicos a la derecha */
.hero-herramientas, .hero-datos { display: none; }
@media (min-width: 64rem) {
  .hero-herramientas {
    position: absolute;
    z-index: 2;
    left: 1.5rem;
    top: calc(50% - 3rem);
    transform: translateY(-50%);
    display: grid;
    gap: 1.1rem;
    color: #fff;
  }
  .hero-herramientas svg { width: 1.5rem; height: 1.5rem; opacity: 0.7; }
  .hero-herramientas svg:first-child { opacity: 1; }
  .hero-datos {
    position: absolute;
    z-index: 2;
    display: block;
    right: 1.5rem;
    top: calc(50% - 3rem);
    transform: translateY(-50%);
    margin: 0;
    writing-mode: vertical-rl;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
  }
}
@media (max-width: 40rem) {
  .pista:first-child { display: none; }
  .marcador:nth-child(n+4) { display: none; }
}

/* Ajuste de alturas con la línea de tiempo nueva abajo */
.hero-titulo { font-size: clamp(2.75rem, min(9vw, 12.5vh), 7rem); }
.hero-grid { padding-block: clamp(1rem, 2vh, 2rem); }
.hero > .contenedor { padding-bottom: 0; }


/* ==========================================================================
   19. Cursor de cuchilla (herramienta de corte) sobre todo el inicio
   Solo en dispositivos con mouse; en celular no se nota.
   ========================================================================== */
@media (hover: hover) and (pointer: fine) {
  .hero,
  .hero .timeline { cursor: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2232%22%20height=%2232%22%20viewBox=%220%200%2032%2032%22%3E%3Cpath%20d=%22M16%201v30%22%20stroke=%22%23120708%22%20stroke-width=%223.4%22%20stroke-linecap=%22round%22/%3E%3Cpath%20d=%22M16%201v30%22%20stroke=%22%23fff%22%20stroke-width=%221.4%22%20stroke-linecap=%22round%22%20stroke-dasharray=%222.4%202.6%22/%3E%3Cg%20transform=%22rotate%28-50%2016%2016%29%22%3E%3Cpath%20d=%22M3%2010.5h26v6.5l-3.5%204.5H3z%22%20fill=%22%23fff%22%20stroke=%22%23120708%22%20stroke-width=%221.7%22%20stroke-linejoin=%22round%22/%3E%3Cpath%20d=%22M3%2014h23%22%20stroke=%22%23b3262e%22%20stroke-width=%221.7%22/%3E%3Crect%20x=%229%22%20y=%2216.6%22%20width=%229%22%20height=%222.4%22%20rx=%221.2%22%20fill=%22%23120708%22/%3E%3C/g%3E%3C/svg%3E") 16 16, crosshair; }
  .hero a, .hero button { cursor: pointer; }
}

/* Respaldo: los íconos nunca pueden crecer más que su tamaño, ni siquiera si falta alguna regla */
.hero-herramientas svg { width: 1.5rem; height: 1.5rem; max-width: 1.5rem; flex: none; }


/* ==========================================================================
   20. Contenido de los proyectos (texto, imágenes, galerías, videos de YouTube)
   y redes sociales en el pie
   ========================================================================== */
.entry-content > * + * { margin-top: 1.5rem; }
.entry-content img { max-width: 100%; height: auto; }
.wp-block-image img { display: block; width: 100%; height: auto; }
.wp-block-image figcaption, .wp-block-embed figcaption, .wp-block-gallery figcaption { margin-top: 0.5rem; color: var(--pizarra); font-size: 0.875rem; text-align: center; }
.wp-block-gallery { gap: 0.75rem; }
.wp-block-columns { gap: 1.5rem; }
.wp-block-embed iframe { max-width: 100%; }

.pie-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.nota-pie { margin: 0; }
.redes { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0 auto; padding: 0; list-style: none; }
.redes a {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  color: #fff;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.redes a:hover, .redes a:focus-visible { background: #fff; border-color: #fff; color: var(--rojo-hondo); }
.redes a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.entry-content figure { margin-inline: 0; }
.entry-content > figure { width: 100%; }


/* ==========================================================================
   21. Cierre de la página de un proyecto: divisor y botón centrado
   ========================================================================== */
.fin-proyecto { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; margin-top: clamp(3rem, 8vw, 5.5rem); text-align: center; }
.fin-marca {
  position: relative;
  width: 100%;
  height: 1.25rem;
  background:
    repeating-linear-gradient(to right, var(--pizarra) 0 1px, transparent 1px 1.2%) left center / 100% 0.5rem no-repeat,
    linear-gradient(var(--tinta), var(--tinta)) left center / 100% 1px no-repeat;
}
.fin-marca span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.9rem;
  height: 0.9rem;
  background: var(--senal);
  transform: translate(-50%, -50%) rotate(45deg);
  box-shadow: 0 0 0 0.5rem var(--papel);
}
.fin-proyecto .post-navigation { width: 100%; margin: 0; padding: 0; border: 0; }
.fin-proyecto .nav-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; }
.fin-boton {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 2.25rem;
  border: 2px solid var(--tinta);
  border-radius: 999px;
  color: var(--tinta);
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.fin-boton::before { content: "\2190"; }
.fin-boton:hover, .fin-boton:focus-visible { background: var(--senal); border-color: var(--senal); color: #fff; }


/* ==========================================================================
   22. Grilla de Trabajos: todas las portadas del mismo tamaño
   ========================================================================== */
@media (min-width: 64rem) {
  .proyectos { grid-template-columns: repeat(3, 1fr); }
  .proyecto, .proyecto--ancho, .proyecto--vertical { grid-column: auto; grid-row: auto; }
}
.proyecto-miniatura, .proyecto--vertical .proyecto-miniatura { aspect-ratio: 16 / 9; }

/* ==========================================================================
   23. Menú: los tres enlaces iguales, simples, con subrayado rojo al pasar el mouse
   ========================================================================== */
.main-navigation ul { gap: 0.25rem 2rem; }
.main-navigation a,
.main-navigation .menu-cta a {
  padding: 0.35rem 0;
  background: linear-gradient(var(--senal), var(--senal)) left bottom / 0 2px no-repeat;
  color: var(--tinta);
  border-radius: 0;
  font-weight: 500;
  transition: background-size 0.3s var(--ease);
}
.main-navigation a:hover,
.main-navigation .menu-cta a:hover,
.main-navigation .current-menu-item > a { background-color: transparent; background-size: 100% 2px; color: var(--tinta); }


/* ==========================================================================
   24. Servicios
   ========================================================================== */
.servicios-lista { display: grid; gap: 0 3rem; margin: 2.5rem 0 0; padding: 0; list-style: none; }
@media (min-width: 40rem) { .servicios-lista { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .servicios-lista { grid-template-columns: repeat(3, 1fr); } }
.servicios-lista li { position: relative; padding: 1.5rem 0 2rem; border-top: 1px solid var(--tinta); }
.servicios-lista li::before { content: ""; position: absolute; left: 0; top: -2px; width: 2.5rem; height: 3px; background: var(--senal); }
.servicio-titulo { margin: 0 0 0.5rem; font-size: clamp(1.375rem, 2vw, 1.75rem); }
.servicio-texto { margin: 0; color: var(--pizarra); font-size: 1rem; }

/* ==========================================================================
   25. Cada sección con su propio fondo: Servicios en blanco y Sobre mí en rosa
   ========================================================================== */
#sobre-mi { background: #f7dfe1; }

/* ==========================================================================
   26. Pie: bloque negro propio, separado de Hablemos
   ========================================================================== */
.site-footer { padding: 2rem 0; background: #120708; color: rgba(255, 255, 255, 0.8); }
.redes a:hover, .redes a:focus-visible { color: #120708; }

/* ==========================================================================
   27. Portadas con la proporción de Behance (404 × 316, casi cuadradas)
   ========================================================================== */
.proyecto-miniatura, .proyecto--vertical .proyecto-miniatura { aspect-ratio: 404 / 316; }


/* ==========================================================================
   28. Textura de cuadrícula de edición en las secciones de color liso (el pie va sin textura)
   ========================================================================== */
.seccion, .numeros { position: relative; isolation: isolate; }
.seccion::before, .numeros::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(rgba(179, 38, 46, 0.12) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(179, 38, 46, 0.12) 1px, transparent 1px) 0 0 / 28px 28px;
}
/* En fondos oscuros las líneas son claras */
.numeros::before, .oscuro::before {
  background:
    linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px) 0 0 / 28px 28px;
}

/* ==========================================================================
   29. Herramientas de "Sobre mí": etiquetas redondeadas
   ========================================================================== */
.herramientas { gap: 0.6rem; color: inherit; }
.herramientas li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.1rem;
  background: #120708;
  color: #fff;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
}
.herramientas li::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--rojo); }

/* ==========================================================================
   30. Videos verticales uno al lado del otro (patrón "Videos verticales")
   ========================================================================== */
.videos-verticales { display: flex; flex-wrap: nowrap !important; gap: 1rem; }
.videos-verticales > .wp-block-column { flex: 1 1 0 !important; min-width: 0; }
.videos-verticales .wp-block-video { margin: 0; }
.videos-verticales .wp-block-video video { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 12px; background: #000; }
.videos-verticales .wp-block-embed__wrapper { position: relative; }
.videos-verticales .wp-block-embed__wrapper::before { content: ""; display: block; padding-top: 177.78%; }
.videos-verticales .wp-block-embed__wrapper iframe { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 12px; }
@media (max-width: 40rem) { .videos-verticales { gap: 0.5rem; } }

/* Reproductores de YouTube/Vimeo generados desde un bloque de video */
.ep-embed .wp-block-embed__wrapper { position: relative; aspect-ratio: 16 / 9; }
.ep-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 12px; }
.ep-embed--vertical .wp-block-embed__wrapper { aspect-ratio: 9 / 16; max-width: 24rem; }
.videos-verticales .ep-embed .wp-block-embed__wrapper { aspect-ratio: 9 / 16; max-width: none; }
.videos-verticales .ep-embed .wp-block-embed__wrapper::before { display: none; }