/* ═══════════════════════════════════════════════════════
   ADEGAR PORTFOLIO — style.css
   ───────────────────────────────────────────────────────
   Estructura:
   1. Variables y reset
   2. Elementos globales (cursor, rejilla, nav)
   3. Sistema de páginas
   4. Landing
   5. Índice
   6. Sobre mí
   7. Proyectos
   8. Archivo & Pegatinas
   9. CTA Contacto
   10. Animaciones
═══════════════════════════════════════════════════════ */


/* ─── 1. VARIABLES Y RESET ─────────────────────────── */

:root {
  /* Paleta */
  --crema: #F5F2EC;
  /* fondo principal */
  --tinta: #1A1916;
  /* texto principal */
  --tinta-suave: #4A4845;
  /* texto cuerpo */
  --tinta-muted: #8A8783;
  /* texto secundario */
  --acento: #E85128;
  /* color de acento (naranja tostado) */
  --acento-suave: #E8C4B4;
  /* acento claro */
  --linea-rejilla: rgba(26, 25, 22, 0.07);

  /* Tipografía */
  --serif: 'Playfair Display', Georgia, serif;
  --mono: 'Space Grotesk', monospace;

  /* Espaciado */
  --padding-pagina: 60px;
  --padding-interior-v: 100px;

  /* Transiciones */
  --transicion: 0.3s ease;
}

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  min-width: 375px;
}

body {
  background-color: var(--crema);
  color: var(--tinta);
  font-family: var(--mono);
  cursor: none;
  /* el cursor personalizado reemplaza al nativo */
  overflow-x: hidden;
  min-width: 375px;
}

/* ─── PRELOADER / PANTALLA DE CARGA INICIAL ──────────── */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--crema);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: all;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              visibility 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, visibility;
}

#preloader.preloader-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  width: 100%;
  max-width: 320px;
  padding: 0 24px;
  user-select: none;
}

.preloader-logo-wrap {
  width: 130px;
  max-width: 45vw;
  height: auto;
  color: var(--tinta);
  opacity: 0.95;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

.preloader-logo {
  width: 100%;
  height: auto;
  display: block;
}

.preloader-bar-wrap {
  width: 160px;
  max-width: 50vw;
  height: 2px;
  background: rgba(26, 25, 22, 0.08);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}

.preloader-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: var(--acento);
  border-radius: 999px;
  transition: width 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: width;
}

.preloader-status {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--tinta-muted);
  font-variant-numeric: tabular-nums;
  margin-top: -8px;
}

@media (prefers-reduced-motion: reduce) {
  #preloader {
    transition: none !important;
  }
  .preloader-bar {
    transition: none !important;
  }
}

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

ul {
  list-style: none;
}

button {
  font-family: var(--mono);
  cursor: none;
  border: none;
  background: none;
  color: inherit;
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ─── 2. CURSOR PERSONALIZADO ───────────────────────── */

#cursor {
  position: fixed;
  width: 15px;
  height: 15px;
  background: var(--acento);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: width 0.15s ease, height 0.15s ease, background 0.15s ease;
  z-index: 9999;
  mix-blend-mode: multiply;
}

/* Estado grande (hover sobre elementos interactivos) */
#cursor.grande {
  width: 30px;
  height: 30px;
  background: var(--tinta);
  opacity: 0.80;
}


/* ─── RETÍCULA DE FONDO ─────────────────────────────── */

.grid-bg {
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(var(--linea-rejilla) 1px, transparent 1px),
    linear-gradient(90deg, var(--linea-rejilla) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}


/* ─── NAVEGACIÓN ────────────────────────────────────── */

#nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 10px var(--padding-pagina);
  z-index: 100;
  background: rgba(245, 242, 236, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linea-rejilla);

  /* Empieza oculta — JS la muestra tras la landing */
  transform: translateY(-100%);
  transition: transform 0.5s ease;
}

#nav.visible {
  transform: translateY(0);
}

.nav-logo {
  font-family: var(--serif);
  font-size: 15px;
  font-style: italic;
  color: var(--tinta);
  cursor: none;
}

/* 💡 SOLUCIÓN DEFINITIVA PARA REDUCIR EL LOGO DEL NAV */
#nav .mi-logo-vectorial {
  height: 16px !important;
  /* 📐 Ajusta este número a tu gusto (14px, 16px, 18px...) */
  width: auto !important;
  display: block;
}

.nav-links {
  display: flex;
  gap: 100px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.nav-link {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 800;
  /* Cambia a 300 si la prefieres Thin, o a 500 si la quieres más gruesa */
  font-size: 13px;
  /* Ajusta el tamaño para que quede fino y elegante */
  text-transform: uppercase;
  /* Fuerza a que todo el texto esté en mayúsculas */

  /* Restablecemos propiedades por si acaso */
  background: none;
  border: none;
  cursor: pointer;
  transition: all 0.25s ease;
}

/* Opcional: Si quieres que al pasar el cursor (hover) se subraye como la tarjeta */
.nav-link:hover {
  color: var(--acento);
  transform: scale(1.08);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  /* Línea fina y minimalista */
}

.nav-link:hover,
.nav-link.activo {
  color: var(--acento);
}

/* ─── ILUMINACIÓN DE LA SECCIÓN ACTIVA EN EL MENÚ ─── */

/* Cuando un enlace de navegación tiene la clase activa o current */
.nav-link.activa,
.nav-link.current,
.nav-link[class*="active"] {
  color: var(--acento) !important;
  /* Tu naranja corporativo */
  font-weight: 500;
  /* Le damos un toque más de grosor para que destaque */
  text-shadow: 0 0 12px rgba(200, 80, 42, 0.2);
  /* Un destello sutil naranja de fondo */

  /* Opcional: Si quieres que también mantenga el subrayado naranja */
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}



/* ─── BOTÓN CTA DE CONTACTO EN LA NAVEGACIÓN ─── */

.nav-cta-contacto {
  /* Posicionamiento absoluto para que no empuje ni rompa el centrado de los otros enlaces */
  position: absolute;
  right: 40px;
  /* Alineado a la misma distancia del borde que suele tener el nav */
  top: 50%;
  transform: translateY(-50%);
  /* Centrado vertical perfecto dentro de la barra */

  /* Tipografía Space Grotesk */
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 400;
  /* Grosor regular */
  font-size: 13px;
  text-decoration: none;
  /* Quita el subrayado clásico de los enlaces */

  /* Estilo del botón (Minimalista: texto blanco/crema con un borde sutil) */
  color: var(--crema);
  background: var(--acento);
  padding: 8px 16px;
  border-radius: 40px;
  /* Bordes completamente redondeados (estilo píldora) */

  transition: all 0.25s ease;
  z-index: 101;
}

/* Efecto interactivo al pasar el cursor (Hover) */
.nav-cta-contacto:hover {
  color: var(--acento);
  border: 1px solid var(--acento);
  background: var(--crema);
}






/* ─── 3. SISTEMA DE PÁGINAS ─────────────────────────── */

.pagina {
  display: none;
  min-height: 100vh;
  position: relative;
  z-index: 1;
  animation: aparecerPagina 0.4s ease both;
}

.pagina.activa {
  display: block;
}

/* Contenedores de ancho */
.contenedor-interior {
  padding: var(--padding-interior-v) var(--padding-pagina) 80px;
}

.contenedor-angosto {
  max-width: 960px;
  margin: 0 auto;
}

/* Etiqueta pequeña de sección (reutilizable) */
.seccion-etiqueta {
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--acento);
  margin-bottom: 20px;
}

h2.seccion-etiqueta {
  font-size: 10px;
  font-weight: inherit;
  margin: 0;
  margin-bottom: 20px;
  padding: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}


/* ─── 4. LANDING ────────────────────────────────────── */

#landing {
  display: flex;
  /* siempre flex, no block */
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

#landing.activa {
  display: flex;
}

.landing-centrado {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  width: 100%;
}

/* Contenedor con perspectiva 3D */
.tarjeta-contenedor {
  perspective: 1200px;
  cursor: none;
  position: relative;
  transform: scale(1.25);
}

/* La tarjeta en sí */
.tarjeta {
  width: 380px;
  height: 240px;
  background: var(--acento);
  border-radius: 24px;
  transform-style: preserve-3d;
  transition: transform 0.08s ease;
  box-shadow:
    0 32px 80px rgba(26, 25, 22, 0.35),
    0 8px 24px rgba(26, 25, 22, 0.20);
}

.tarjeta-interior {
  position: absolute;
  inset: 0;
  padding: 36px 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 24px;
  background: var(--acento);
  overflow: hidden;
}


.tarjeta-arriba {
  display: flex;
  justify-content: center;
  /* Centra el logo horizontalmente */
  align-items: center;
  /* Centra el logo verticalmente */
  width: 100%;
  /* Obliga a ocupar todo el ancho interno de la tarjeta */
  position: relative;
  z-index: 2;
}

.tarjeta-abajo {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  position: relative;
  z-index: 2;
}

.tarjeta-firma {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 65px;
  /* Ajusta este número si quieres el logo más grande o pequeño en la tarjeta */
  width: auto;
  /* 💡 AÑADE ESTA LÍNEA PARA SUBIR EL LOGO */
  margin-top: -60px;
  /* Cuanto más alto sea el número negativo (ej: -20px), más subirá */
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  font-style: italic;
  color: var(--crema);
  letter-spacing: -0.01em;
}



.tarjeta-rol {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 200;
  /* 300 equivale al grosor Thin/Light de esta fuente */
  font-size: 14px;
  color: rgb(238, 238, 238);

  transform: translateY(-15px);



}



/* Abrir!! Texto de pista debajo de la tarjeta */
.tarjeta-hint {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: var(--crema);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 200;
  /* 300 equivale al grosor Thin/Light de esta fuente */
  font-size: 11px;
  white-space: nowrap;
  animation: parpadeo 2.5s ease-in-out infinite;
}

/* ─── LOGO SVG ─────────────────────────────────────── */
/* Asegura que el SVG no colapse a 0 píxeles y mantenga su proporción */
.mi-logo-vectorial {
  display: inline-block;
  height: 100%;
  width: auto;
  vertical-align: middle;
}

/* Forzar la altura del botón del menú para que contenga tu logo */
.nav-logo {
  height: 38px;
  /* Ajusta este número si quieres el logo del menú más grande o pequeño */
  width: auto;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* Forzar el tamaño del logo dentro de la tarjeta de la Landing */
.tarjeta-firma {
  display: inline-block;
  height: 100px;
  /* Ajusta este número para cambiar el tamaño del logo en la tarjeta */
  width: auto;
}

/* ─── 5. ÍNDICE ─────────────────────────────────────── */



/* --- COLOR DIFERENTE PARA LA TARJETA DEL ÍNDICE --- */
/* 1. Aplicamos tu variable al contenedor exterior de la tarjeta */
.tarjeta.tarjeta-indice {
  /* ✏️ CAMBIA '--tu-variable-aqui' por el nombre real de tu variable CSS */
  background: var(--crema) !important;
}

/* 2. OBLIGATORIO: Aplicamos la misma variable a la capa interior, */
/* ya que si no, el color antiguo de la landing se queda encima tapándolo todo. */
.tarjeta.tarjeta-indice .tarjeta-interior {
  background: var(--crema) !important;
}


/* Modificamos el contenedor para que sea el corazón de la tarjeta */
.tarjeta-abajo-menu {
  display: flex;
  flex-direction: column;
  /* Mantiene los botones uno debajo del otro */
  gap: 14px;
  /* Espacio de separación vertical entre secciones */

  /* 💡 LOS DOS TRUCOS DE CENTRADO MÁGICO: */
  margin: auto 0;
  /* Centrado vertical absoluto dentro de la tarjeta */
  align-items: flex-start;
  /* ALINEADO A LA IZQUIERDA: Alinea el inicio de los botones a la izquierda */

  width: 100%;
  position: relative;
  z-index: 2;

  /* 💡 Ajusta este padding-left para mover todo el bloque más a la izquierda o al centro de la tarjeta */
  padding-left: 50px;
  /* 💡 1. CREAMOS LA VARIABLE (Cámbiala para ajustar la altura) */
  --desplazamiento-arriba: -17px;
  /* Un valor negativo más alto (ej: -40px) lo sube más */

  /* 💡 2. LE DECIMOS AL NAVEGADOR QUE LA UTILICE */
  transform: translateY(var(--desplazamiento-arriba));
}

/* El diseño de cada botón de sección */
.tarjeta-menu-item {
  background: none;
  border: none;
  padding: 2px 0;
  /* Quitamos paddings laterales para que la alineación sea perfecta */
  color: var(--tinta-suave);

  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 18px;
  /* Le he subido un pelín el tamaño ya que ahora no está el logo y viste más */

  text-transform: uppercase;
  text-align: left;
  /* Fuerza a que el texto de cada botón mire a la izquierda */

  cursor: pointer;
  transition: all 0.25s ease;
  /* 💡 AÑADE ESTA LÍNEA PARA EL SUBRAYADO */
  text-decoration: underline;

  /* 💡 Opcional: añade espacio entre el texto y la línea para que respire mejor */
  text-underline-offset: 2px;
}

/* Efecto hover interactivo: se vuelve blanco y se desplaza sutilmente a la derecha */
.tarjeta-menu-item:hover {
  color: var(--tinta-suave);
  transform: translateX(4px);
  opacity: 80%;
  /* Al pasar el cursor, el texto se mueve hacia la derecha sutilmente */
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}


/* ─── 6. SOBRE MÍ ───────────────────────────────────── */
/* =========================================================================
   INTEGRACIÓN: ESTILOS DEL ESCRITORIO CREATIVO
   ========================================================================= */
.escritorio-root {
  /* ─── CAMBIADO: Ahora usa exactamente el mismo color crema de tu web principal ─── */
  --ec-crema: var(--crema);
  --ec-crema-dark: #EDE7D9;
  --ec-tinta: #1A1916;
  --ec-acento: #E85128;
  --ec-acento2: #C43E18;
  --ec-muted: #8A8783;
  --ec-glass: rgba(245, 240, 232, 0.72);
  --ec-glass-border: rgba(255, 255, 255, 0.55);
  --ec-shadow: 0 8px 32px rgba(26, 25, 22, 0.13), 0 2px 8px rgba(26, 25, 22, 0.08);
  --ec-shadow-sm: 0 4px 16px rgba(26, 25, 22, 0.10);
  --ec-font: 'Space Grotesk', sans-serif;
  --ec-radius: 12px;
  --ec-win-radius: 14px;
  font-family: var(--ec-font);
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  background: transparent;
  /* Aplica el fondo unificado */
  padding-top: 60px;
}

.ec-bg {
  position: absolute;
  inset: 0;
  /* ─── MODIFICADO: Eliminamos las líneas naranjas propias para que se fusione 
         con la retícula general (.grid-bg) de tu portfolio, pero mantenemos 
         los destellos radiales naranjas sutiles en las esquinas ─── */
  background:
    radial-gradient(ellipse 80% 60% at 20% 30%, rgba(232, 81, 40, 0.06) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 80% 70%, rgba(232, 81, 40, 0.04) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}



.ec-desktop {
  position: relative !important;
  width: 100% !important;
  min-height: calc(100vh - 100px) !important;
  display: block !important;
}

.ec-items-grid {
  display: block !important;
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
}

.ec-item,
.ec-foto-desktop,
.ec-sticky {
  position: absolute !important;
}

.ec-label {
  color: var(--tinta-suave);
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 13px;
  margin-top: 80px;
  margin-left: 37%;
}

.ec-subtitulo {
  color: var(--ec-muted);
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 13px;
  text-align: center;
  width: 100%;
  display: block;
  margin-top: -10px;
}

.ec-fotos-contenedor {
  display: contents;
}

.ec-foto-desktop {
  z-index: 2;
  transition: box-shadow 0.22s, transform 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border-radius: 10px;
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, 0.7);
  box-shadow: var(--ec-shadow);
}

.ec-foto-desktop:hover {
  box-shadow: 0 16px 48px rgba(26, 25, 22, 0.22);

  /* 💡 NUEVO: Aplica el aumento de escala (un 4% más grande) al pasar el cursor.
     Usamos "scale(1.04)" manteniendo el "rotate(0deg)" por defecto si se requiere, 
     pero el navegador gestionará la rotación inicial de tu HTML automáticamente */
  transform: scale(1.04) !important;
}

.ec-foto-desktop img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.ec-foto-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(0deg, rgba(26, 25, 22, 0.7) 0%, transparent 100%);
  color: #fff;
  font-size: 10px;
  padding: 14px 10px 8px;
  font-weight: 400;
}

.ec-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0px;
  transition: transform 0.18s ease;
  z-index: 2;
}

.ec-item-icon {
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.18s;
  position: relative;
}

.ec-item:hover .ec-item-icon {
  transform: scale(1.08) translateY(-2px);
}

.ec-item-name {
  font-size: 11px;
  font-weight: 400;
  color: var(--ec-tinta);
  text-align: center;
  line-height: 1.3;
  max-width: 80px;
  text-shadow: 0 1px 4px rgba(245, 240, 232, 0.8);
  margin-top: -24px;
}

.ec-sticky {
  z-index: 3;
  width: 200px;
  background: var(--ec-acento);
  border-radius: 4px;
  padding: 18px 18px 14px;
  box-shadow: 4px 6px 18px rgba(26, 25, 22, 0.16), 0 1px 0 rgba(26, 25, 22, 0.04);
  user-select: none;
  transform: rotate(2.4deg);
  transition: box-shadow 0.2s, transform 0.2s;
}

.ec-sticky:active {
  box-shadow: 8px 12px 32px rgba(26, 25, 22, 0.22);
}

.ec-sticky:hover {
  transform: rotate(1deg) scale(1.02);
}

.ec-sticky::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 14px;
  background: var(--ec-acento2);
  border-radius: 0 0 6px 6px;
}

.ec-sticky-title {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 18px;
  font-weight: 700;
  color: var(--ec-crema);
  margin-bottom: 12px;
  margin-top: 2px;
}

.ec-sticky-item {
  font-size: 18px;
  font-weight: 400;
  color: var(--ec-crema);
  line-height: 2;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ec-sticky-check {
  color: var(--ec-crema-dark);
  font-size: 18px;
}

.ec-3d-wrapper {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.ec-3d-canvas {
  display: block;
}

.ec-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
}

.ec-window {
  position: fixed;
  z-index: 1000;
  background: var(--ec-glass);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid var(--ec-glass-border);
  border-radius: var(--ec-win-radius);
  box-shadow: 0 24px 80px rgba(26, 25, 22, 0.22), 0 2px 8px rgba(26, 25, 22, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  min-width: 320px;
  max-width: 90vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: ec-win-in 0.24s cubic-bezier(.25, .46, .45, .94) both;
  pointer-events: all;
}

.ec-window.ec-focused {
  box-shadow: 0 32px 100px rgba(26, 25, 22, 0.30), 0 4px 16px rgba(26, 25, 22, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

@keyframes ec-win-in {
  from {
    opacity: 0;
    transform: scale(0.94) translateY(10px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes ec-win-out {
  from {
    opacity: 1;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(0.92) translateY(8px);
  }
}

.ec-win-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px 12px;
  border-bottom: 1px solid rgba(26, 25, 22, 0.08);
  user-select: none;
  flex-shrink: 0;
}

.ec-win-dots {
  display: flex;
  gap: 6px;
  align-items: center;
}

.ec-win-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transition: filter 0.15s;
  flex-shrink: 0;
}

.ec-win-dot:hover {
  filter: brightness(0.8);
}

.ec-win-dot.close {
  background: #FF5F57;
}

.ec-win-dot.min {
  background: #FFBD2E;
}

.ec-win-dot.max {
  background: #28C840;
}

.ec-win-title {
  flex: 1;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--ec-tinta);
  text-transform: uppercase;
}

.ec-win-close-btn {
  background: none;
  border: none;
  font-size: 14px;
  color: #8A8783;
  padding: 0;
  line-height: 1;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
  font-family: var(--ec-font);
}

.ec-win-close-btn:hover {
  background: rgba(232, 81, 40, 0.12);
  color: #E85128;
}

.ec-win-body {
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px;
  flex: 1;
}

.ec-win-body::-webkit-scrollbar {
  width: 4px;
}

.ec-win-body::-webkit-scrollbar-thumb {
  background: rgba(26, 25, 22, 0.15);
  border-radius: 2px;
}

.ec-tools-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.ec-tool-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.7);
  transition: background 0.18s, transform 0.18s;
}

.ec-tool-item:hover {
  background: rgba(255, 255, 255, 0.75);
  transform: translateY(-2px);
}

.ec-tool-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  /* 💡 CLAVE: Recorta las esquinas de la foto para que se adapten al border-radius */
  background: transparent;
  /* Quitamos los fondos oscuros que tenían los SVGs */
}

.ec-tool-name {
  font-size: 11px;
  font-weight: 400;
  color: var(--ec-muted);
  text-align: center;
  margin-top: 4px
}

.ec-mood-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.ec-mood-item {
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 1;
  background: var(--ec-crema-dark);
  position: relative;
  transition: transform 0.18s;
}

.ec-mood-item:hover {
  transform: scale(1.03);
  z-index: 2;
}

.ec-mood-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ec-mood-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(0deg, rgba(26, 25, 22, 0.65) 0%, transparent 100%);
  color: rgba(255, 255, 255, 0.9);
  font-size: 10px;
  padding: 12px 8px 6px;
  opacity: 0;
  transition: opacity 0.18s;
  text-align: center !important;
  width: 100%;
  display: block;
}

.ec-mood-item:hover .ec-mood-caption {
  opacity: 1;
}

.ec-personal-grid {
  display: grid;
  /* 💡 Fuerza a que siempre haya exactamente 3 columnas del mismo tamaño */
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px;
  /* Espacio de separación entre las fotos */
  width: 100%;
}

.ec-personal-item {
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  transition: transform 0.18s;

}

.ec-personal-item:hover {
  z-index: 2;
}

.ec-personal-img {
  width: 100%;

  /* 💡 Formato cuadrado (aspect ratio 1:1) */
  aspect-ratio: 1 / 1 !important;

  /* Centra y recorta la imagen de forma limpia para que no se deforme */
  object-fit: cover !important;

  border-radius: 6px;
  display: block;
}

.ec-photo-win {
  max-width: 420px;
}

.ec-photo-win .ec-win-body {
  padding: 0;
}

.ec-photo-full {
  width: 100%;
  max-height: 60vh;
  object-fit: contain;
  display: block;
  background: var(--ec-tinta);
}

.ec-photo-caption {
  padding: 16px 20px;
  font-size: 12px;
  color: var(--ec-muted);
  line-height: 1.7;
  font-style: italic;
}

.ec-dock {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 800;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(245, 240, 232, 0.82);
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 24px;
  padding: 8px 18px;
  box-shadow: 0 8px 32px rgba(26, 25, 22, 0.15), 0 1px 0 rgba(255, 255, 255, 0.7) inset;
}

.ec-dock-item {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  transition: transform 0.18s cubic-bezier(.25, .46, .45, .94);
  position: relative;
}

.ec-dock-item:hover {
  transform: translateY(-6px) scale(1.15);
}

.ec-dock-item:hover .ec-dock-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
}

.ec-dock-tooltip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(0);
  background: rgba(26, 25, 22, 0.85);
  color: #fff;
  font-size: 10px;
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.15s, transform 0.15s;
  pointer-events: none;
  font-weight: 500;
}

.ec-dock-sep {
  width: 1px;
  height: 30px;
  background: rgba(26, 25, 22, 0.12);
  margin: 0 4px;
}

/* Estilos específicos para los nuevos enlaces del dock */
.ec-dock-link {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700;
  font-size: 16px;
  /* Ajuste de tamaño para que "In", "Bē" e "Ig" equilibren visualmente con los emojis */
  color: var(--ec-tinta);
  text-decoration: none;
  cursor: none;
  /* Mantiene tu cursor circular naranja nativo de la web */
}

/* Cambia sutilmente el color al pasar por encima de las redes */
.ec-dock-link:hover {
  color: var(--ec-acento);
}

.ec-window.dragging {
  transition: none;
  box-shadow: 0 32px 100px rgba(26, 25, 22, 0.28);
}

@media (max-width: 768px) {

  /* ── Barra de navegación responsiva: Fila 1 (Logo + Contacto) / Fila 2 (Enlaces) ── */
  /* ── 1. Cursor oculto en móvil y restauración de cursor nativo ── */
  #cursor,
  #cursor-follower,
  .cursor {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  *,
  *::before,
  *::after,
  body,
  html,
  a,
  button,
  [role="button"] {
    cursor: auto !important;
  }

  /* ── 2. Barra de navegación responsiva: Logo oculto y Enlaces centrados en 1 sola fila ── */
  #nav {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 12px 16px !important;
    min-height: 48px !important;
  }

  .nav-logo {
    display: none !important;
  }

  .nav-cta-contacto {
    display: none !important;
  }

  .nav-links {
    position: static !important;
    transform: none !important;
    display: flex !important;
    justify-content: center !important;
    gap: clamp(24px, 7vw, 40px) !important;
    width: 100% !important;
  }

  /* ── Escritorio Creativo en móviles (Flexbox ordenado) ── */
  .escritorio-root.activa {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 100px 16px 140px !important;
    position: relative !important;
  }

  .ec-desktop {
    order: 1 !important;
    width: 100% !important;
    min-height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .ec-items-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px 16px !important;
    padding: 16px 0 !important;
    position: static !important;
    margin: 0 auto !important;
    max-width: 320px !important;
  }

  /* Intercambio de orden visual entre 'Curriculum' y 'Sobre mí' en móvil */
  #ecItem-herramientas {
    order: 1 !important;
  }

  #ecItem-inspiracion {
    order: 2 !important;
  }

  #ecItem-personal {
    order: 3 !important;
  }

  #ecItem-about {
    order: 4 !important;
  }

  #ecItem-cv {
    order: 5 !important;
    grid-column: span 2 !important;
    justify-self: center !important;
  }

  .ec-item {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 auto !important;
    touch-action: none;
  }

  .ec-item-icon {
    width: 100px !important;
    height: 100px !important;
  }

  .ec-sticky {
    order: 2 !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin: 32px auto 0 !important;
    width: 200px !important;
    font-size: 11px !important;
    transform: rotate(1.5deg);
    touch-action: none;
  }

  /* Mostrar y ordenar fotos personales en fila horizontal */
  .ec-fotos-contenedor {
    order: 3 !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 32px !important;
    width: 100% !important;
    margin-top: 32px !important;
  }

  #ecFotoActual {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    width: 135px !important;
    height: auto !important;
    aspect-ratio: 220 / 295 !important;
    transform: rotate(2.5deg);
    display: block !important;
    touch-action: none;
  }

  #ecFotoInfancia {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    width: 135px !important;
    height: auto !important;
    aspect-ratio: 230 / 240 !important;
    transform: rotate(-2.5deg);
    display: block !important;
    touch-action: none;
  }

  .ec-tools-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .ec-mood-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .ec-dock-item {
    width: 38px !important;
    height: 38px !important;
    font-size: 18px !important;
  }

  /* Barra de redes sociales (dock) al fondo */
  .ec-dock {
    order: 5 !important;
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 48px auto 0 !important;
    z-index: 10 !important;
    padding: 8px 18px !important;
  }

  /* ── Ventanas flotantes en móvil: Altura adaptada al contenido real sin hueco sobrante abajo ── */
  .ec-window {
    position: fixed !important;
    top: 80px !important;
    left: 4vw !important;
    width: 92vw !important;
    height: auto !important;
    max-height: 80vh !important;
    transform: none !important;
    background: rgba(245, 240, 232, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
  }

  .ec-window .ec-win-body {
    flex: 1 1 auto !important;
    max-height: calc(80vh - 48px) !important;
    overflow-y: auto !important;
  }

  /* ── Proyectos Archivados en 1 columna ── */
  .proyectos-archivados-rejilla {
    grid-template-columns: repeat(1, 1fr) !important;
    gap: 36px !important;
  }

  /* ── Escalado de espacios gigantes en proyectos en móvil ── */
  .proy-espacio-y {
    margin-top: 30px !important;
    margin-bottom: 30px !important;
  }

  .proy-espacio-z {
    margin-top: 60px !important;
    margin-bottom: 30px !important;
  }

  .proy-intro {
    padding: 40px var(--padding-pagina) !important;
    gap: 16px !important;
  }

  .proy-pullquote {
    padding: 40px var(--padding-pagina) !important;
    gap: 16px !important;
  }

  .proy-proceso {
    padding: 40px var(--padding-pagina) 0 !important;
  }

  .proy-siguiente-wrap {
    padding: 0 var(--padding-pagina) 160px !important;
    margin-bottom: 50px !important;
  }

  .proy-proceso-paso {
    padding: 24px 0 !important;
  }

  /* ── Barra inferior (Footer) en móvil: Ocultar redes sociales ── */
  #nav-inferior {
    padding: 12px 16px !important;
    font-size: 9px !important;
  }

  #nav-inferior .nav-inferior-rrss {
    display: none !important;
  }

  .nav-inferior-correo {
    right: 16px !important;
  }
}

@media (max-width: 480px) {
  .ec-tools-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .ec-window {
    min-width: 90vw !important;
  }
}

/* Ocultar el dock inferior de la web principal cuando estás en la landing */
#landing.activa~#sobre-mi .ec-dock {
  display: none !important;
}

/* ─── OCULTAR EN LANDING ─── */
#landing.activa~#nav-inferior {
  display: none !important;
}

/* ─── NAVEGACIÓN INFERIOR (ALINEADA A LA DERECHA) ─── */
.ec-navegacion-siguiente {
  /* Mantenerlo como capa flotante absoluta para no mover nada */
  position: absolute !important;

  /* ─── 💡 CAMBIOS CLAVE PARA ALINEAR A LA DERECHA ─── */
  bottom: 110px;
  /* Altura respecto al fondo (ajústala a tu dock si es necesario) */
  right: 200px;
  /* Usa el mismo margen lateral que el resto de tu portfolio (60px) */

  /* Quitamos las propiedades de centrado anteriores */
  left: auto !important;
  transform: none !important;

  width: auto;
  display: flex;
  z-index: 10;
  /* Prioridad de clic máxima */
  margin: 0 !important;
}

/* El estilo del botón se queda limpio y rígido */
.ec-navegacion-siguiente .boton-siguiente-seccion {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 13px;
  font-weight: 500;
  color: var(--ec-tinta);
  border: 1px solid var(--ec-tinta);
  padding: 14px 28px;
  border-radius: 4px;
  background: rgba(245, 240, 232, 0.4);
  /* Un toque translúcido muy ligero */
  backdrop-filter: blur(4px);
  transition: all 0.25s ease;
  cursor: none;
}

.ec-navegacion-siguiente .boton-siguiente-seccion:hover {
  border-color: var(--ec-acento);
  background: var(--ec-acento);
  color: var(--ec-crema);
}

/* 📱 En móviles lo ajustamos para que mantenga las distancias de seguridad */
@media (max-width: 768px) {
  .ec-navegacion-siguiente {
    order: 4 !important;
    position: relative !important;
    bottom: auto !important;
    right: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 48px auto 0 !important;
    width: auto !important;
    display: flex !important;
    justify-content: center !important;
  }
}

/* ─── CÁPSULA ESTADO DISPONIBLE ─── */
.status-badge-container {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* Separación interna entre el punto verde y el texto */

  /* Trazo fino y esquinas completamente redondeadas (estilo píldora) */
  border: 1px solid var(--ec-muted, #8A8783);
  border-radius: 9999px;

  /* Espaciado interno para que respire */
  padding: 6px 14px;
  width: max-content;
  background: transparent;

  /* Ajuste de margen opcional por si quieres separarlo de otros bloques */
  margin-bottom: 16px;
}

/* El texto dentro de la cápsula */
.status-text {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 13px;
  font-weight: 500;
  color: var(--ec-tinta, #1A1916);
  line-height: 1;
  letter-spacing: normal;
}

/* ─── ESTRUCTURA GENERAL DEL CV ─── */
.cv-badge-spacing {
  margin-bottom: 24px;
}

.cv-main-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
  font-family: 'Space Grotesk', sans-serif !important;
}

/* ─── SECCIONES Y BLOQUES ─── */
.cv-section {
  border-top: 1px solid rgba(26, 25, 22, 0.08);
  padding-top: 16px;
}

.cv-section:first-of-type {
  border-top: none !important;
  padding-top: 0 !important;
}

.cv-section-title {
  font-size: 11px;
  color: var(--acento);
  /* Tu color naranja de acento */
  font-weight: 500;
  margin-bottom: 12px;
  margin-top: 0;
  font-weight: 700;
}

.cv-item {
  margin-bottom: 12px;
}

.cv-item:last-child {
  margin-bottom: 0;
  /* Evita espacios extra en el último ítem de cada bloque */
}

/* ─── TIPOGRAFÍAS DE LOS ELEMENTOS ─── */
.cv-item-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--tinta);
  margin: 0 0 2px 0;
  letter-spacing: normal;
}

.cv-item-subtitle {
  font-size: 13px;
  color: var(--ec-muted);
  font-weight: 300;
  margin: 0;
}

.cv-item-description {
  font-size: 13px;
  /* Un punto intermedio de tamaño */
  color: var(--tinta);
  /* Un gris oscuro intermedio, más suave que el título pero legible */
  margin-top: 0px;
  /* Separa la descripción de la línea de la empresa/fecha */
  margin-bottom: 0;
  /* Resetea márgenes inferiores nativos del párrafo */
  font-weight: 400;
  /* Grosor regular */
}

/* ─── BOTÓN DE DESCARGA EDITABLE ─── */
.cv-download-wrapper {
  margin-top: 18px;
  display: flex;
  justify-content: center;
  /* Alinea el botón al centro horizontal */
  width: 100%;
}

.cv-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #1A1916;
  padding: 12px 24px;
  border-radius: 4px;
  font-size: 11px;
  color: #1A1916;
  text-decoration: none;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: transparent;
  cursor: none;
  /* Mantiene tu cursor personalizado */
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* 💡 El efecto hover controlado de forma limpia desde CSS */
.cv-download-btn:hover {
  background: #1A1916;
  color: #F5F0E8;
  /* El color crema de tu fondo */
}

/* ─── FOTO DE PERFIL / ORLA EN EL CV ─── */
.cv-profile-img-natural {
  display: block;
  width: 85px;
  /* 📐 Un ancho pequeñito y elegante para el CV */
  height: auto;
  /* 💡 CLAVE: Al poner 'auto' en la altura, el navegador respeta la proporción original de tu foto */

  /* Evita que se deforme si la imagen original tiene proporciones raras */
  object-fit: contain;

  /* Esquinas suavemente redondeadas (estilo rectangular editorial, no un círculo) */
  border-radius: 4px;

  /* ↕️ SEPARACIÓN: Espacio de 16px abajo para separarla de la cápsula de disponibilidad */
  margin-bottom: 16px;
  margin-top: 4px;
}

/* 💡 Restauramos el padding original de la cápsula ya que la foto ya no está dentro */
.status-badge-container {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid rgba(26, 25, 22, 0.15);
  border-radius: 9999px;
  background: transparent;
  margin-top: 40px;

}

/* ─── PUNTO VERDE CON PARPADEO (PULSE) ─── */
.status-dot {
  width: 7px;
  height: 7px;
  background-color: rgba(0, 202, 24, 0.8);
  /* Un verde neón/brillante muy limpio */
  border-radius: 50%;
  display: inline-block;

  /* Sutil sombra base para simular luz */
  box-shadow: 0 0 6px rgba(15, 218, 52, 0.5);

  /* 💡 ANIMACIÓN: Hace que el punto parpadee (se desvanezca y vuelva) de forma infinita */
  animation: parpadeoStatus 1.8s infinite ease-in-out;
}

/* Regla de la animación de parpadeo limpio */
@keyframes parpadeoStatus {

  0%,
  100% {
    opacity: 0.3;
    transform: scale(0.92);
    box-shadow: 0 0 2px rgba(37, 228, 20, 0.2);
  }

  50% {
    opacity: 1;
    transform: scale(1.05);
    box-shadow: 0 0 10px rgba(18, 253, 81, 0.8);
  }
}

/* ─── 7. PROYECTOS ──────────────────────────────────── */



/* ─── NOTA SUPERIOR: PROYECTOS SELECCIONADOS ─── */

.proyectos-titular-seccion {
  /* Mantenemos tu padding y un margen inferior suave para separarlo de las fotos */
  padding-top: 10px;
  margin-bottom: 24px;
}

.proyectos-titular-seccion .seccion-etiqueta {
  /* Tu CSS exacto aplicado aquí: */
  color: var(--tinta-suave);
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 13px;
  letter-spacing: normal;
  text-transform: none;
}


/* Cuadrícula de proyectos — Ahora clonando el Masonry de Archivo */
.proyectos-rejilla {
  columns: 2;
  /* 💡 Fuerza las 2 columnas verticales */
  column-gap: 12px;
  /* Separación horizontal entre columnas */
  display: block;
  /* Eliminamos el grid antiguo */
}

.proyecto-imagen-envoltorio {
  position: relative;
  /* 💡 CAMBIADO de absolute a relative para que la tarjeta tenga altura */
  width: 100%;
  height: auto;
  overflow: hidden;
  display: block;
}

.proyecto-imagen {
  display: block;
  width: 100%;
  height: auto;
  /* Permite que cada imagen mantenga su proporción vertical u horizontal */
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.proyecto-card:hover .proyecto-imagen {
  transform: scale(1.05);
  filter: blur(4px) brightness(0.7);
  /* Desenfoque sutil y oscurecimiento para legibilidad */
}

/* Card individual adaptada al flujo de columnas */
.proyecto-card {
  break-inside: avoid;
  /* 💡 Evita que una tarjeta se parta por la mitad al cambiar de columna */
  margin-bottom: 12px;
  /* Separación vertical entre proyectos */
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  /* Por si quieres el mismo redondeado ligero de Archivo */
  background: var(--tinta);
  cursor: none;
  display: block;
  /* Forzamos a que actúe como bloque rígido */
}

/* ⚠️ IMPORTANTE: Eliminamos el 'aspect-ratio: 4/3' fijo para que cada tarjeta 
   tenga la altura natural de su propia imagen (alto, ancho o cuadrado) */
.proyecto-card {
  height: auto;
}

.proyecto-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: normal;

  z-index: 1;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.proyecto-card:hover .proyecto-overlay {
  opacity: 0;
  background: none;
}

.proyecto-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px;
  z-index: 2;
  /* Estado inicial: un poco hacia abajo e invisible */
  transform: translateY(30px);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.4s ease;
}

.proyecto-card:hover .proyecto-info {
  transform: translateY(0);
  opacity: 1;
}

.proyecto-nombre {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 13px;
  /* Ajustado para que no se pisen los textos en columnas estrechas */
  font-weight: 400;
  color: var(--ec-tinta);
  line-height: 1.2;
  transition: color 0.4s ease;
}

.proyecto-card:hover .proyecto-nombre {
  color: var(--crema) !important;
}

.proyecto-etiquetas {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s 0.05s, transform 0.3s 0.05s;
}

.proyecto-card:hover .proyecto-etiquetas {
  opacity: 1;
  transform: translateY(0);
}

.proyecto-etiqueta {
  font-size: 12px;
  font-weight: 300;

  color: var(--tinta);
  border: 1px solid rgb(46, 46, 46);
  padding: 4px 10px;
  border-radius: 2px;
  background-color: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  /* Soporte para navegadores Safari */
  transition: color 0.4s ease, border-color 0.4s ease, background-color 0.4s ease;
}

.proyecto-card:hover .proyecto-etiqueta {
  color: var(--crema) !important;
  border: 1px solid rgba(245, 242, 236, 0.4);
  background-color: rgba(245, 242, 236, 0.1);
}

/* Asegura que el enlace se comporte como un bloque y no altere los estilos visuales internos */
.proyecto-enlace-bloque {
  display: block;
  text-decoration: none;
  /* Elimina cualquier subrayado extraño del link en la tarjeta */
  color: inherit;
  /* Hereda los colores de texto que ya tenías configurados */
  width: 100%;
  height: 100%;
}



.video-portada-loop {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Fuerza al video a rellenar el espacio adaptándose como una foto */
  display: block;
  /* Elimina pequeños márgenes inferiores fantasma */
  pointer-events: none;
  /* Evita que el usuario pueda pausar el bucle o abrir controles nativos */
}

/* ─── SECCIÓN PROYECTOS ARCHIVADOS (5 COLUMNAS) ─── */

.archivo-proyectos-seccion {
  margin-top: 40px;
  padding-top: 40px;

}

.archivo-proyectos-seccion .seccion-etiqueta {
  color: var(--tinta-suave);
  /* 💡 Cambia esto por el color o variable que quieras */
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 13px;

  letter-spacing: normal;
  /* Cambia el espaciado ancho por el defecto de la tipografía */
  text-transform: none;

}

/* La rejilla mágica de 5 columnas fluidas */
.proyectos-archivados-rejilla {
  display: grid;
  /* 💡 CLAVE: Forzamos exactamente 5 columnas de ancho idéntico (1fr) */
  grid-template-columns: repeat(5, 1fr) !important;

  /* 💡 CLAVE: Hace que las tarjetas se pegen a la de arriba ignorando las filas rígidas */
  grid-template-rows: masonry;

  gap: 48px 24px;
  /* Espacio uniforme de 24px tanto horizontal como vertical */
  width: 100%;
  align-items: start;
}

.pro-archivado-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  /* Asegura que no se aplique ningún span de columnas heredado anterior */
  grid-column: span 1 !important;
}

/* ─── ENVOLTORIO PARA EL EFECTO REVELADO (INVERTIDO) ─── */
.pro-archivado-envoltorio {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 4px;
  background-color: #F5F0E8;
}

/* Estilo unificado para ambas imágenes */
.pro-archivado-envoltorio img {
  display: block;
  width: 100%;
  /* 💡 Todas las fotos miden exactamente lo mismo (el ancho de 1/5 de la pantalla) */
  height: auto;
  /* 💡 La altura sigue libre según la proporción nativa de la foto */
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* 🔄 CAMBIO: La segunda foto (img-revelada) ahora es la VISIBLE por defecto */
.pro-archivado-envoltorio .img-revelada {
  position: relative;
  /* Cambia a relative para que sea la que empuje el alto de la caja */
  opacity: 1;
  z-index: 2;
  /* Se posiciona por encima */
}

/* 🔄 CAMBIO: La foto inicial (img-principal) ahora está por debajo y OCULTA por defecto */
.pro-archivado-envoltorio .img-principal {
  position: absolute;
  /* Se superpone exactamente debajo */
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 1;
}

/* ─── 💡 CLAVE: PROYECTOS QUE OCUPAN EL DOBLE DE ANCHO ─── */
.pro-card-horizontal {
  /* Hace que la tarjeta se extienda a lo largo de 2 columnas de la rejilla */
  grid-column: span 2 !important;
}

/* Optimización para móviles: si la pantalla es estrecha, ocupa solo una columna */
@media (max-width: 650px) {
  .pro-card-horizontal {
    grid-column: span 1;
  }
}

/* ─── 💡 EL NUEVO EFECTO HOVER ─── */
/* Al pasar el ratón, ocultamos la segunda foto para dejar ver la primera */
.pro-archivado-card:hover .img-revelada {
  opacity: 0;
}

/* Al pasar el ratón, hacemos totalmente visible la foto principal */
.pro-archivado-card:hover .img-principal {
  opacity: 1;
}

/* Mantenemos el ligero zoom interactivo */
.pro-archivado-card:hover .pro-archivado-envoltorio img {
  transform: scale(1.015);
}

/* ─── 3. BLOQUE DE TEXTOS E INFORMACIÓN ─── */
.pro-archivado-info {
  margin-top: 13px;
  font-family: 'Space Grotesk', sans-serif !important;
}

/* Fila superior que junta el título del proyecto y su año */
.pro-archivado-header {
  display: flex;
  justify-content: space-between;
  /* Empuja título a la izquierda y año a la derecha */
  align-items: baseline;
  /* Alinea las bases del texto de forma perfecta */
  margin-bottom: 6px;
  /* Separación respecto a la descripción inferior */
}

/* Título principal del proyecto */
.pro-archivado-titulo {
  font-size: 13px;
  font-weight: 300;
  color: var(--tinta);

}

/* 📅 Año flotante a la derecha */
.pro-archivado-year {
  font-size: 11px;
  color: var(--ec-muted);
  /* Color gris suave para jerarquía secundaria */
  font-weight: 400;
}

/* 📝 Párrafo de la descripción breve */
.pro-archivado-desc {
  font-size: 11px;
  color: var(--ec-muted);
  /* Gris oscuro de alta legibilidad */
  line-height: 1.5;
  /* Interlineado cómodo para lectura */
  margin: 0;
  /* Elimina márgenes de párrafo nativos */
  font-weight: 300;
  text-decoration: underline;
  text-underline-offset: 1px;
  text-decoration-thickness: 0.5px;
  /* Línea fina y minimalista */
  display: inline-block;
  /* Obligatorio para que las propiedades de escala funcionen correctamente */
  transition: color 0.3s ease, transform 0.3s ease;
  /* Añadimos la transición para el movimiento */
}

.pro-archivado-desc:hover {
  color: var(--acento);
  /* Cambia el texto a color naranja */
  text-decoration: underline;
  /* Mantiene el subrayado también en naranja (puedes poner 'none' si prefieres quitarlo al pasar el cursor) */
  transform: scale(1.05);
}

/* 📱 RESPONSIVE: Evitamos que en móviles las 5 columnas rompan el diseño */
@media (max-width: 1100px) {
  .proyectos-archivados-rejilla {
    grid-template-columns: repeat(3, 1fr) !important;
    /* 3 columnas en tablets */
  }
}

@media (max-width: 700px) {
  .proyectos-rejilla {
    columns: 1;
  }
}






.proyectos-mas {
  font-family: 'Space Grotesk', sans-serif !important;
  text-align: center;
  padding: 40px 0;
  font-size: 13px;
  font-weight: 100;
  color: var(--tinta-muted);
}

.proyectos-navegacion-siguiente {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 60px 0 120px;
  /* Espaciado superior e inferior para que respire */
}

/* El botón clonando el diseño limpio de tus CTAs */
.boton-siguiente-seccion {
  display: inline-flex;
  font-family: 'Space Grotesk', sans-serif !important;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--tinta);
  /* Borde con tu color de tinta principal */
  padding: 16px 32px;
  border-radius: 4px;
  font-size: 13px;
  color: var(--tinta);
  cursor: none;
  /* Esconde el cursor nativo para usar tu círculo naranja */
  transition: border-color var(--transicion), background var(--transicion), color var(--transicion);
}

/* Efecto hover interactivo: se tiñe con tu color naranja de acento */
.boton-siguiente-seccion:hover {
  border-color: var(--acento);
  background: var(--acento);
  color: var(--crema);
}

/* ─── 8. ARCHIVO & PEGATINAS ────────────────────────── */

.archivo-cabecera {
  padding-bottom: 32px;
}



.archivo-sub {
  padding-top: 10px;
  color: var(--tinta-suave);
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 13px;
  letter-spacing: normal;
  text-transform: none;
}

/* ==========================================================================
   📦 ALTERNATIVA 2: ESTRUCTURA POR COLUMNAS (Indestructible y 100% Estable)
   ========================================================================== */

.archivo-masonry {
  display: grid !important;
  /* Creamos 3 columnas idénticas (puedes subirlo a 5 cambiando el número) */
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
  align-items: start !important;
  /* Hace que cada columna empiece arriba */
  width: 100% !important;
  margin-bottom: 60px;
}

/* Las columnas actúan como bloques verticales independientes */
.columna-masonry {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  /* Espacio vertical exacto entre las tarjetas de una misma columna */
}

.archivo-item {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  cursor: none;
  width: 100% !important;
  /* Ocupa el ancho completo de su columna asignada */
}

.archivo-item img,
.archivo-item video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.archivo-item:hover img,
.archivo-item:hover video {
  transform: scale(1.03);
}

/* Adaptación responsiva: mantener SIEMPRE las 4 columnas también en móvil, escalando imágenes */
@media (max-width: 900px) {
  .archivo-masonry {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px !important;
  }

  .columna-masonry {
    gap: 12px !important;
  }
}

@media (max-width: 600px) {
  .archivo-masonry {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
  }

  .columna-masonry {
    gap: 6px !important;
  }

  .archivo-item,
  .archivo-item img,
  .archivo-item video {
    border-radius: 2px !important;
  }
}

/* Etiqueta que aparece en hover */
.archivo-etiqueta {
  position: absolute;
  bottom: 10px;
  left: 10px;
  font-size: 9px;
  color: rgba(245, 242, 236, 0.85);
  background: rgba(26, 25, 22, 0.55);
  padding: 4px 8px;
  border-radius: 2px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.2s;
}

.archivo-item:hover .archivo-etiqueta {
  opacity: 1;
}

/* Sección de pegatinas */
.pegatinas-seccion {
  margin: 40px 0;
  border-top: 1px solid var(--linea-rejilla);
  padding-top: 40px;
}

.pegatinas-area {
  position: relative;
  height: 200px;
  border: 1px dashed rgba(26, 25, 22, 0.15);
  border-radius: 8px;
  overflow: hidden;
}

/* Pegatina base */
.pegatina {
  position: absolute;
  font-size: 10px;
  padding: 8px 14px;
  border-radius: 3px;
  cursor: grab;
  user-select: none;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: box-shadow 0.2s;
  white-space: nowrap;
}

.pegatina:active {
  cursor: grabbing;
  box-shadow: 0 8px 24px rgba(26, 25, 22, 0.2);
}

/* Variantes de pegatinas */
.pegatina-oscura {
  background: var(--tinta);
  color: var(--crema);
}

.pegatina-acento {
  background: var(--acento);
  color: var(--crema);
}

.pegatina-clara {
  background: var(--crema);
  color: var(--tinta);
  border: 1px solid var(--linea-rejilla);
}

.pegatina-oscura2 {
  background: #2A1818;
  color: var(--acento-suave);
}

.pegatina-suave {
  background: var(--acento-suave);
  color: var(--tinta);
}


/* ─── 9. CTA CONTACTO (CORREGIDO) ───────────────────────────────── */
/* ==========================================================================
   📦 SECCIÓN 9: CTA CONTACTO (Solución Definitiva de 3 Columnas)
   ========================================================================== */

.cta-contacto {
  /* 💡 CLAVE: Cambiamos flex por grid para compartimentar el espacio */
  display: grid !important;
  /* Crea 3 columnas exactamente iguales (una para cada elemento) */
  grid-template-columns: 1fr 1fr 1fr !important;
  align-items: center !important;
  /* Alineación vertical perfecta a la misma altura */
  width: 100% !important;

  position: relative !important;
  z-index: 5 !important;
  padding: 60px !important;
  background-color: var(--acento) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  clear: both !important;
  box-sizing: border-box !important;
  margin-top: 40px !important;
}

/* ─── COLUMNA 1: CONTENEDOR DE TEXTO (Izquierda) ─── */
.cta-texto {
  grid-column: 1 !important;
  /* Se ancla estrictamente en la primera columna */
  position: relative !important;
  z-index: 2 !important;
  text-align: left !important;
}

.cta-titulo {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 32px !important;
  font-weight: 400 !important;
  color: var(--crema) !important;
  margin: 0 !important;
  text-align: left !important;
  line-height: 1.1 !important;
}

/* ─── COLUMNA 2: SUBTÍTULO (Centro Puro) ─── */
.cta-sub {
  grid-column: 2 !important;
  /* Se ancla estrictamente en la columna del medio */
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 18px !important;
  color: var(--acento-suave) !important;
  font-weight: 200 !important;
  margin: 0 !important;
  white-space: nowrap !important;
  z-index: 2 !important;

  /* 💡 CLAVE: Centrado absoluto respecto a su propia columna del medio */
  text-align: center !important;
  justify-self: center !important;

  /* 🔄 REPARADO: Eliminamos el posicionamiento absoluto general que rompía el flujo */
  position: static !important;
  transform: none !important;
}

/* ─── COLUMNA 3: BOTÓN DE ACCIÓN (Derecha) ─── */
.boton-cta {
  grid-column: 3 !important;
  /* Se ancla estrictamente en la tercera columna */
  justify-self: end !important;
  /* Empuja el botón al extremo derecho */

  position: relative !important;
  font-family: 'Space Grotesk', sans-serif !important;
  z-index: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  border: 1.5px solid rgba(245, 242, 236, 0.25) !important;
  padding: 16px 32px !important;
  border-radius: 6px !important;
  font-size: 18px !important;
  color: var(--crema) !important;
  cursor: none !important;
  transition: border-color var(--transicion), background var(--transicion), color var(--transicion) !important;
  background: transparent !important;
}

.boton-cta:hover {
  border-color: var(--crema) !important;
  background: var(--crema) !important;
  color: var(--acento) !important;
}

/* ─── 📱 RESPONSIVE CONTROLADO ─── */
/* En portátiles pequeños o pantallas medianas, 3 columnas se verían muy apretadas */
@media (max-width: 1150px) {
  .cta-contacto {
    /* Pasamos a 2 columnas: el texto a la izquierda y el botón a la derecha */
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
  }

  .cta-sub {
    display: none !important;
    /* Ocultamos el del medio por espacio */
  }

  .boton-cta {
    grid-column: 2 !important;
  }
}

@media (max-width: 768px) {
  .cta-contacto {
    /* En móviles lo apilamos todo hacia abajo en 1 sola columna limpia */
    grid-template-columns: 1fr !important;
    padding: 40px 30px !important;
    gap: 24px !important;
    text-align: center !important;
  }

  .cta-texto,
  .boton-cta {
    grid-column: 1 !important;
    justify-self: center !important;
    text-align: center !important;
  }

  .cta-titulo {
    text-align: center !important;
    font-size: 18px !important;
  }
}

/* ─── 10. ANIMACIONES ───────────────────────────────── */

/* Página entrante */
@keyframes aparecerPagina {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Parpadeo del texto "→ Abrir" en la landing */
@keyframes parpadeo {

  0%,
  100% {
    opacity: 0.4;
  }

  50% {
    opacity: 1;
  }
}


/*footer*/
/* ─── BARRA DE NAVEGACIÓN INFERIOR (FOOTER) ─── */

#nav-inferior {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;

  /* z-index en capa superior (a la par que la navegación superior) */
  z-index: 100;

  padding: 14px 40px;
  box-sizing: border-box;

  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 400;
  font-size: 11px;
  text-transform: uppercase;

  background: rgba(245, 242, 236, 0.92);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--linea-rejilla);

}

/* Créditos a la izquierda */
.nav-inferior-creditos {
  color: var(--tinta-suave);
}

/* Redes en el centro (Separadas y sin pisarse) */
.nav-inferior-rrss {
  display: flex !important;
  gap: 24px !important;
  /* Separación real entre enlaces */

  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  /* Centrado horizontal limpio */
}

/* Correo a la derecha */
.nav-inferior-correo {
  position: absolute !important;
  right: 40px !important;
  transition: transform 0.25s ease, color 0.25s ease;

}

/* Estilo de los enlaces */
.nav-inferior-link {
  color: var(--tinta-suave);
  text-decoration: none;
  transition: transform 0.25s ease, color 0.25s ease;
}

.nav-inferior-link:hover,
.nav-inferior-correo:hover {
  color: var(--acento);
  transform: scale(1.08);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  /* Línea fina y minimalista */
}

/* ─── 💡 OCULTAR EN LANDING (Pon esto abajo del todo en tu CSS) ─── */
#landing.activa~#nav-inferior {
  display: none !important;
}




/* ═══════════════════════════════════════════════════════
   PROYECTO INDIVIDUAL — CSS PROFESIONAL v2
   ─────────────────────────────────────────────────────
   Inspirado en:
   · estudiomenta.com  → columna lateral de metadatos
   · estrellagracia.com → metadatos en fila, texto limpio, galería fluida
   · granissat.com     → título enorme, párrafo ancho, scroll
   ─────────────────────────────────────────────────────
   INSTRUCCIONES:
   Reemplaza (o añade en su lugar) el bloque CSS anterior
   al final de tu style.css por este archivo completo.
═══════════════════════════════════════════════════════ */


/* ────────────────────────────────────────────────────
   HERO — Vídeo a pantalla completa
──────────────────────────────────────────────────── */
/* Color de fondo personalizado solo para el Proyecto Origen */
#proyecto-uno {
  background-color: #d2dce5 !important;
  padding-top: 50px !important;
  box-sizing: border-box;
}

/* Fusione la foto de portada con el color de fondo en modo multiplicar */
#proyecto-uno .proy-hero-media {
  mix-blend-mode: multiply;
}

/* Cambiar textos secundarios a un tono legible sobre fondo oscuro */
#proyecto-uno .proy-meta-label,
#proyecto-uno .proy-meta-valor,
#proyecto-uno .proy-intro-texto,
#proyecto-uno .proy-pullquote,
#proyecto-uno .proy-meta-celda,
#proyecto-uno .proy-intro-texto-secundario {
  color: #2d4a5d;
}

/* Color de fondo para el resto de proyectos (heredan crema) */
#proyecto-dos,
#proyecto-tres,
#proyecto-cuatro,
#proyecto-cinco {
  background-color: var(--crema) !important;
  padding-top: 50px !important;
  box-sizing: border-box;
}

@media (max-width: 768px) {

  #proyecto-uno,
  #proyecto-dos,
  #proyecto-tres,
  #proyecto-cuatro,
  #proyecto-cinco {
    padding-top: 48px !important;
  }
}

.proy-hero {
  position: relative;
  width: 100%;
  height: calc(100vh - 50px);
  overflow: hidden;
}

.proy-hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Número pequeño arriba a la izquierda */
.proy-hero-num {
  position: absolute;
  top: 32px;
  left: var(--padding-pagina);
  z-index: 2;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--acento);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Título: enorme, abajo a la izquierda */
.proy-hero-titulo-wrap {
  position: absolute;
  bottom: 72px;
  left: var(--padding-pagina);
  right: var(--padding-pagina);
  z-index: 2;
}

.proy-hero-titulo {
  font-family: var(--serif);
  font-size: clamp(48px, 8.5vw, 110px);
  font-weight: 400;
  font-style: italic;
  color: var(--crema);
  line-height: 0.95;
  max-width: 12ch;
  letter-spacing: -0.02em;
}

/* Pista de scroll */
.proy-hero-scroll {
  position: absolute;
  bottom: 32px;
  right: var(--padding-pagina);
  z-index: 2;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--tinta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  animation: parpadeo 2.8s infinite;
}


/* ────────────────────────────────────────────────────
   CABECERA DEL PROYECTO
   Layout: metadatos en fila (referencia estrellagracia)
   con título grande debajo
──────────────────────────────────────────────────── */

.proy-cabecera {
  padding: 80px var(--padding-pagina) 0;
  max-width: 1000px;
  margin: 0 auto;
}

/* 🔄 CAMBIO: La fila ahora es un contenedor vertical de ancho controlado */
.proy-meta-fila {
  display: flex;
  flex-direction: column;
  /* 💡 Fuerza a que los datos se apilen hacia abajo como una lista */
  gap: 0;
  /* El espacio se controla con los paddings de las celdas */
  max-width: 360px;
  /* 📐 Controla el ancho de la lista de datos para que sea elegante */
  margin-bottom: 24px;
}

/* 🔄 CAMBIO: Ajuste de bordes y paddings para formato lista vertical */
.proy-meta-celda {
  display: grid;
  grid-template-columns: 70px 1fr;
  /* 💡 Divide cada fila en: etiqueta (izq) y valor (der) */
  align-items: baseline;
  gap: 0px;
  padding: 5px 0;
  border-right: none !important;
  /* Eliminamos bordes laterales antiguos */
}

/* Forzamos que la última celda mantenga la misma estructura limpia */
.proy-meta-celda:last-child {
  padding-right: 0;
  padding-left: 0 !important;
}

.proy-meta-celda:not(:first-child) {
  padding-left: 0 !important;
}

.proy-meta-label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 800;
}

.proy-meta-valor {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.4;
}

/* Contenedor de píldoras / tags en modo lista */

.proy-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  /* Un pelín más de espacio entre píldoras */
  justify-content: flex-start !important;
  align-items: center !important;
  /* Alineación vertical perfecta */

  /* 💡 CLAVE 1: Forzamos un pequeño margen superior e inferior para que el 
     borde de las píldoras nunca choque contra los límites de la celda Grid */
  width: 100% !important;
}


.proy-tag {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.4;
}

.proy-tag::after {
  content: "//" !important;
  margin-left: 12px !important;
  /* Separa la barra de la palabra que tiene a la izquierda */
  /* Le damos una opacidad más suave a la barra para que no compita con el texto */
  font-weight: 300 !important;
}

.proy-tag:last-child::after {
  content: "" !important;
  margin-left: 0 !important;
}



/* ─── 📱 RESPONSIVE PARA METADATOS ─── */
@media (max-width: 1024px) {
  .proy-meta-fila {
    max-width: 100%;
    /* En tablets y móviles ocupa todo el ancho disponible */
  }
}

@media (max-width: 480px) {
  .proy-meta-celda {
    /* En pantallas muy pequeñas, si los tags se pisan, los apila verticalmente */
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 12px 0;
  }
}

/* ────────────────────────────────────────────────────
   TEXTO DE INTRODUCCIÓN
   Layout de dos columnas asimétricas:
   izquierda vacía (espacio) · derecha: texto
   (referencia granissat / studiomenta: el texto
   no ocupa todo el ancho, tiene margen editorial)
──────────────────────────────────────────────────── */

.proy-intro {
  display: flex;
  justify-content: flex-start !important;
  gap: 0 80px;
  padding: 100px var(--padding-pagina) 100px;
  max-width: 1000px;
  margin: 0 auto;

}

.proy-intro-aside {
  /* Columna izquierda: solo lleva la etiqueta de sección */
  padding-top: 6px;
}

.proy-intro-aside .seccion-etiqueta {
  margin-bottom: 0;
}

.proy-intro-body {
  /* Columna derecha: el texto gordo */
}



.proy-intro-texto {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(24px, 3vw, 33px);
  font-weight: 300;
  color: var(--tinta-suave);
}

/* Estilos específicos para el segundo bloque de texto */
.proy-intro-secundaria {
  padding-top: 120px !important;
  /* Puedes cambiar el espaciado superior */
  padding-bottom: 120px !important;
}

/* Modificador para reducir el espaciado superior en bloques concretos */
.proy-intro-reducido {
  padding-top: 40px !important;
}

.proy-intro-texto-secundario {
  font-size: 33px !important;
  /* Cambiar tamaño de letra */
}

.proy-intro-texto strong {
  font-weight: 700 !important;
}

/* ────────────────────────────────────────────────────
   GALERÍA DE CONTENIDO
   Flujo editorial: imágenes y vídeos en distintas
   proporciones, sin marcos, con mucho blanco entre
   ellas (referencia estrellagracia)
──────────────────────────────────────────────────── */

.proy-galeria {
  padding: 0 var(--padding-pagina);
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* espacio mínimo entre bloques */
}

/* Imagen o vídeo a ancho completo */
.proy-g-full {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* Imagen o vídeo centrado en una sola columna de ancho controlado */
.proy-g-centro {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* Margen vertical extra para dar aire a elementos individuales */
.proy-espacio-y {
  margin-top: 60px !important;
  margin-bottom: 60px !important;
  scale: 85%;
}

.proy-espacio-z {
  margin-top: 180px !important;
  margin-bottom: 40px !important;

}

.proy-g-centro .proy-g-item {
  width: 100%;
  max-width: 1000px;
  /* Ancho máximo ideal para piezas verticales */
}

/* Dos piezas lado a lado */
.proy-g-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Tres piezas (para detalles) */
.proy-g-trio {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}

/* Asimetría: 2/3 izquierda + 1/3 derecha */
.proy-g-asim-izq {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 12px;
}

/* Asimetría: 1/3 izquierda + 2/3 derecha */
.proy-g-asim-der {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 12px;
}

/* La imagen en sí */
.proy-g-item {
  overflow: hidden;
  display: block;
  line-height: 0;
  /* elimina espacio blanco bajo la img */
}

.proy-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.img-multiplicar {
  mix-blend-mode: multiply;
}

.proy-g-item:hover .proy-img {
  transform: scale(1.018);
}

.proy-g-item.sin-zoom .proy-img {
  transform: scale(1.02);
}

.proy-g-item.sin-zoom:hover .proy-img {
  transform: scale(1.02) !important;
}

.proy-g-item.no-zoom .proy-img,
.proy-g-item.no-zoom:hover .proy-img {
  transform: none !important;
}

iframe.instagram-media,
blockquote.instagram-media {
  mix-blend-mode: multiply !important;
  max-width: 800px !important;
  width: 200% !important;
}

/* iFrame vídeo 16:9 */
.proy-iframe-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  background: var(--tinta);
}

.proy-iframe-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Vídeo local */
.proy-video {
  display: block;
  width: 100%;
}

/* Vídeo de redes sociales (Origen) */
.proy-video-rrss-container {
  max-width: 800px !important;
  width: 100% !important;
  margin-top: 60px !important;
}

.proy-video-rrss-container video {
  mix-blend-mode: multiply !important;
}

.proy-video-rrss-container:hover .proy-img {
  transform: none !important;
}

/* Pie de imagen / caption opcional */
.proy-g-caption {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--tinta-muted);
  text-transform: uppercase;
  margin-top: 10px;
  padding-left: 2px;
}


/* ────────────────────────────────────────────────────
   CITA O CLAIM EDITORIAL
   Un párrafo de texto grande que actúa como pull-quote,
   muy usado en estrellagracia y granissat
──────────────────────────────────────────────────── */

.proy-pullquote {
  padding: 96px var(--padding-pagina);
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 0 80px;
  align-items: start;
  border-bottom: 1px solid var(--linea-rejilla);
}

.proy-pullquote-aside {
  padding-top: 8px;
}

.proy-pullquote-texto {
  font-family: var(--serif);
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 400;
  font-style: italic;
  line-height: 1.3;
}


/* ────────────────────────────────────────────────────
   PROCESO — Editorial intercalado
   Texto a izquierda + imagen a derecha, alternando
──────────────────────────────────────────────────── */

.proy-proceso {
  padding: 96px var(--padding-pagina) 0;
  max-width: 1400px;
  margin: 0 auto;
}

.proy-proceso-cabecera {
  display: grid;
  font-family: var(--mono);
  grid-template-columns: 1fr 2fr;
  gap: 0 80px;
  margin-bottom: 72px;

}

.proy-proceso-titulo {
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 400;
  color: var(--tinta);
  grid-column: 2;
  /* alineado con el texto, no el margen */
  line-height: 1.05;
}

.proy-proceso-paso {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 0 80px;
  align-items: start;
  padding: 64px 0;
}

/* Columna izquierda: número + título del paso */
.proy-proceso-aside {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 80px;
  /* se queda fija mientras haces scroll (muy editorial) */
}

.proy-proceso-num {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--tinta);
  text-transform: uppercase;
}

.proy-proceso-paso-titulo {
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 500;
  color: var(--tinta);
  line-height: 1.15;
}

/* Columna derecha: imagen + texto del paso */
.proy-proceso-body {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.proy-proceso-media {
  overflow: hidden;
  display: block;
  line-height: 0;
}

.proy-proceso-paso-parrafo {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px;
  font-weight: 300;
  color: var(--tinta-suave);
  line-height: 1.8;
  max-width: 60ch;
}


/* ────────────────────────────────────────────────────
   DIVISOR TIPOGRÁFICO
   Una línea + número de sección, como granissat
──────────────────────────────────────────────────── */

.proy-divisor {
  height: 1px;
  background: var(--linea-rejilla);
  margin: 80px var(--padding-pagina);
  max-width: calc(1400px - var(--padding-pagina) * 2);
  margin-left: auto;
  margin-right: auto;
}


/* ────────────────────────────────────────────────────
   SIGUIENTE PROYECTO
   Referencia: granissat → "Anterior / Siguiente"
   Texto muy grande, alineado a la derecha
──────────────────────────────────────────────────── */

.proy-siguiente-wrap {
  padding: 0 var(--padding-pagina) 160px;
  max-width: 1400px;
  margin: 0 auto;
}

.proy-siguiente {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  padding-top: 56px;
  border-top: 1px solid var(--linea-rejilla);
}

.proy-siguiente-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tinta-muted);
}

.proy-siguiente-boton {
  display: inline-block;
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 400;
  color: var(--tinta);
  border: none;
  background: none;
  cursor: none;
  line-height: 1.0;
  border-bottom: 1.5px solid rgba(26, 25, 22, 0.523);
  padding-bottom: 1px;
  transition: color var(--transicion), border-color var(--transicion);
  text-align: right;
}

.proy-siguiente-boton:hover {
  color: var(--acento);
  border-color: var(--acento);
}


/* ══ ÍNDICE DE PROYECTOS ══════════════════════════════ */
.proy-indice {
  position: sticky;
  top: 37px;
  /* Sits right under the main nav bar */
  z-index: 99;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: 14px var(--padding-pagina);
  background: rgba(245, 242, 236, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linea-rejilla);
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--tinta-muted);
}

.proy-indice-link {
  color: var(--tinta-muted);
  transition: color var(--transicion), transform var(--transicion);
  cursor: none;
  font-weight: 500;
  display: inline-block;
}

.proy-indice-link:hover,
.proy-indice-link.activo {
  color: var(--acento);
}

.proy-indice span.separador {
  color: var(--linea-rejilla);
  user-select: none;
}

/* Offset scroll for fixed headers */
#proyecto-uno-intro,
#proyecto-uno-propuesta,
#proyecto-uno-proceso,
#proyecto-uno-siguiente,
#proyecto-dos-intro,
#proyecto-dos-propuesta,
#proyecto-dos-proceso,
#proyecto-dos-siguiente,
#proyecto-tres-intro,
#proyecto-tres-propuesta,
#proyecto-tres-proceso,
#proyecto-tres-siguiente {
  scroll-margin-top: 100px;
}

@media (max-width: 700px) {
  .proy-indice {
    top: 37px;
    gap: 8px;
    padding: 10px 15px;
    font-size: 9px;
    letter-spacing: 0.05em;
    flex-wrap: wrap;
  }
}


/* ══ BOTÓN VOLVER ARRIBA ══════════════════════════════ */
.proy-volver-arriba {
  position: fixed;
  bottom: 60px;
  right: 40px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--crema);
  color: var(--tinta);
  font-family: var(--mono);
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 98;
  cursor: none;
  opacity: 1;
  pointer-events: auto;
  transition: background-color var(--transicion), color var(--transicion), transform var(--transicion);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.proy-volver-arriba:hover {
  background-color: var(--acento);
  color: var(--crema);
  transform: translateY(-4px);
}

@media (max-width: 700px) {
  .proy-volver-arriba {
    bottom: 20px;
    right: 20px;
    width: 38px;
    height: 38px;
    font-size: 16px;
  }
}


/* ────────────────────────────────────────────────────
   RESPONSIVE
──────────────────────────────────────────────────── */

@media (max-width: 1024px) {

  .proy-intro,
  .proy-pullquote,
  .proy-proceso-cabecera,
  .proy-proceso-paso {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .proy-proceso-titulo {
    grid-column: 1;
  }

  .proy-intro-aside,
  .proy-pullquote-aside {
    padding-top: 0;
  }

  .proy-proceso-aside {
    position: static;
    /* quitamos el sticky en tablet/móvil */
    flex-direction: row;
    align-items: baseline;
    gap: 20px;
  }

  .proy-meta-fila {
    flex-wrap: wrap;
    gap: 28px;
  }

  .proy-meta-celda {
    flex: none;
    width: calc(50% - 14px);
    border-right: none;
    padding-right: 0;
    padding-left: 0 !important;
  }
}

@media (max-width: 768px) {

  /* Hero de proyectos: ajusta su ancho total a la pantalla del móvil */
  .proy-hero {
    position: relative !important;
    width: 100% !important;
    max-width: 100vw !important;
    height: auto !important;
    min-height: auto !important;
    aspect-ratio: 16 / 10 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .proy-hero-media {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  .proy-hero-titulo-wrap {
    bottom: 20px !important;
    left: 16px !important;
    right: 16px !important;
  }

  .proy-hero-titulo {
    font-size: clamp(24px, 7vw, 36px) !important;
    line-height: 1.05 !important;
  }

  .proy-hero-num {
    top: 16px !important;
    left: 16px !important;
    font-size: 11px !important;
  }

  /* Textos compactados para móviles (mantener número de líneas por párrafo) */
  .proy-intro-texto {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }

  .proy-intro-texto-secundario {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }

  .proy-pullquote-texto {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }

  .proy-proceso-paso-parrafo {
    font-size: 13px !important;
    line-height: 1.7 !important;
  }

  .proy-g-duo,
  .proy-g-trio,
  .proy-g-asim-izq,
  .proy-g-asim-der {
    grid-template-columns: 1fr;
  }

  .proy-meta-celda {
    width: 100%;
  }

  .proy-siguiente-boton {
    font-size: 16px;
  }

  .proy-instagram-wrap {
    justify-content: center !important;
  }
}

/* ── PROTECCIÓN DE CONTENIDO (IMÁGENES Y VIDEOS) ── */
img,
video {
  user-select: none !important;
  -webkit-user-drag: none !important;
  -webkit-touch-callout: none !important;
  /* Desactiva menú contextual en iOS */
}

/* ── Desactivar cursor personalizado en pantallas táctiles / móviles ── */
@media (hover: none) and (pointer: coarse) {

  #cursor,
  #cursor-follower,
  .cursor {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  *,
  *::before,
  *::after,
  body,
  html,
  a,
  button,
  [role="button"] {
    cursor: auto !important;
  }
}