/* ============================================================
   IGNACIO BENITO — style.css
   Estilos globales compartidos por todas las páginas.
   (case-study.css ha sido consolidado aquí para minimizar
   peticiones HTTP y simplificar el mantenimiento.)

   ESTRUCTURA:
   1. Fuentes
   2. Tokens de diseño (variables)
   3. Reset
   4. Cursor personalizado
   5. Lenis / scroll
   6. Utilidades de layout
   7. Tipografía utilitaria
   8. Navbar
   9. Layout principal
   10. Hero (home)
   11. Hello (sección intro, home)
   12. Proyectos (home)
   13. Botones
   14. About (home)
   15. Experiencia (home)
   16. Footer
   17. Content cards (compartidas home + case studies)
   18. Animación fade-in
   19. Hero word animations
   20. Page transition
   21. Case study — Hero vídeo
   22. Case study — Meta
   23. Case study — TOC flotante
   24. Case study — Botón visit (SUGOI)
   25. Case study — Footer simplificado
   26. Case study — Contenedores de imagen
   27. Responsive
   28. prefers-reduced-motion
   ============================================================ */


/* ======================
   1. FUENTES
   Las fuentes se sirven desde la carpeta /fonts local.
   font-display: swap evita texto invisible mientras carga.
   ====================== */

@font-face {
  font-family: 'Moderat';
  src: url('../fonts/Moderat\ Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Moderat';
  src: url('../fonts/Moderat\ Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Moderat';
  src: url('../fonts/Moderat\ Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Moderat';
  src: url('../fonts/Moderat\ Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Moderat';
  src: url('../fonts/Moderat\ Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Moderat Mono';
  src: url('../fonts/Moderat Mono Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


/* ======================
   2. TOKENS DE DISEÑO
   Variables CSS reutilizables. Si cambias un valor aquí
   se actualiza en todo el sitio automáticamente.
   ====================== */

:root {
  /* Colores */
  --color-black: #1d1d1d;
  /* casi negro, textos principales */
  --color-white: #ffffff;
  --color-grey: #6c747d;
  /* color de texto por defecto (body) */
  --color-brown: #878683;
  /* etiquetas de metadatos y small-headings */
  --color-bg: #f4f4f4;
  /* fondo gris claro del contenido */
  --color-border: #cdd0d5;
  /* líneas separadoras */
  --color-footer-bg: #000000;
  /* fondo negro del footer */
  --color-footer-text: #edeceb;
  /* texto claro sobre el footer negro */

  /* Radios de borde */
  --radius-card: 24px;
  /* tarjetas de proyecto, imágenes */
  --radius-btn: 100px;
  /* botones pill (totalmente redondeados) */

  /* Velocidades de transición */
  --transition-fast: 0.25s ease;
  --transition-med: 0.35s ease;
}


/* ======================
   3. RESET
   ====================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  cursor: none !important;
}

/* html { scroll-behavior: smooth; } — desactivado, lo gestiona Lenis */

body {
  margin: 0;
  font-family: 'Moderat', Arial, sans-serif;
  font-size: 1.125rem;
  line-height: 1.33;
  letter-spacing: -0.015em;
  color: var(--color-grey);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-family: 'Moderat', sans-serif;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1;
}

h1 {
  font-size: 3rem;
}

h2 {
  font-size: 3rem;
}

h3 {
  font-size: 2rem;
}

h4 {
  font-size: 1.5rem;
  line-height: 1.2;
}

p {
  margin: 0;
}

a {
  color: var(--color-grey);
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

ul,
ol {
  margin: 0;
  padding-left: 1.5rem;
}

li {
  margin-bottom: 0.25rem;
}


/* ======================
   4. CURSOR PERSONALIZADO — v1 (DESACTIVADO)
   Círculo blanco con mix-blend-mode: difference que se agranda
   y muestra una flecha ↗ en hover. Comentado para conservarlo:
   para restaurarlo, descomenta este bloque y comenta el bloque v2.
   ====================== */
/*
#custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  background-color: #ffffff;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    width 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
    height 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.2s ease;
  will-change: width, height;
  overflow: hidden;
}

#custom-cursor.is-hovering {
  width: 44px;
  height: 44px;
  mix-blend-mode: normal;
  background-color: var(--color-black);
}

#custom-cursor.is-hidden { opacity: 0; }

#custom-cursor .cursor-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.5) rotate(-10deg);
  transition:
    opacity 0.15s ease 0.05s,
    transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s;
}

#custom-cursor.is-hovering .cursor-arrow {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}
*/

/* ======================
   4b. CURSOR PERSONALIZADO — v2 (ACTIVO)
   Flecha/puntero SVG estático (sin animación propia) + pastilla
   de texto que aparece en hover con el mismo bounce que usaba
   el círculo de v1: cubic-bezier(0.34, 1.56, 0.64, 1), 0.2s.
   ====================== */

#custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  pointer-events: none;
  z-index: 99999;
  /* El hotspot del SVG es la punta de la flecha (esquina superior-izq),
     por eso no centramos con -50%/-50% como en v1 */
  transform: translate(0, 0);
  transition: opacity 0.2s ease;
}

#custom-cursor.is-hidden {
  opacity: 0;
}

#custom-cursor .cursor-arrow {
  display: block;
  color: #1D1D1D;
  transition: color 0.15s ease;
  /* Sin transition de transform aquí a propósito: la flecha no se anima en tamaño/rotación */
}

/* Cuando el cursor pasa sobre una sección marcada como oscura
   (ver data-cursor-theme="dark" en el HTML, p.ej. el footer),
   la flecha cambia a blanco. Más fiable cross-browser que
   mix-blend-mode, que resulta frágil combinado con Lenis. */
#custom-cursor.is-on-dark .cursor-arrow {
  color: #ffffff;
}

#custom-cursor .cursor-label {
  position: absolute;
  top: 26px;
  left: 0;
  white-space: nowrap;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background-color: var(--color-black);
  color: #ffffff;
  font-family: 'Moderat', Arial, sans-serif;
  font-size: 0.9rem;
  letter-spacing: -0.01em;
  opacity: 0;
  transform: scale(0.85);
  transform-origin: left top;
  transition:
    opacity 0.15s ease,
    transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}

#custom-cursor.is-hovering .cursor-label {
  opacity: 1;
  transform: scale(1);
}



/* ======================
   5. UTILIDADES DE LAYOUT
   ====================== */

/* Padding horizontal estándar para alinear contenido con los márgenes de página */
.padding-global {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  margin-bottom: 40px;
}

.spacer-small {
  padding-top: 1rem;
}

.spacer-medium {
  padding-top: 2rem;
}

.border {
  width: 100%;
  height: 1px;
  background-color: var(--color-border);
}


/* ======================
   6. TIPOGRAFÍA UTILITARIA
   ====================== */

/* Etiqueta de sección en mayúsculas: [selected works], [overview], etc. */
.small-heading {
  color: var(--color-brown);
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1.5;
  text-transform: uppercase;
  text-align: center;
}

.text-color-primary {
  color: var(--color-black);
  font-weight: 300;
}

/* Valores de metadatos del hero */
.text-meta-content {
  font-weight: 400;
}

.text-color-brown {
  color: var(--color-black);
  font-weight: 300;
  margin-bottom: 0.5rem;
}

/* Título de proyecto en las tarjetas de la home */
.heading-style-h2 {
  font-size: 2rem;
}

.heading-style-h2.text-color-primary {
  font-family: 'Moderat', Arial, sans-serif;
  font-weight: 500;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.paragraph-2 {
  color: var(--color-grey);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
}

.heading-style-h4 {
  color: var(--color-black);
  font-family: 'Moderat', Arial, sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.link {
  color: var(--color-black);
  font-weight: 600;
  text-decoration: underline;
  transition: all 0.5s ease-out;
}

.link:hover {
  color: var(--color-grey);
}


/* ======================
   7. NAVBAR
   Barra de navegación fija con efecto de vidrio esmerilado.
   ====================== */

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 1rem 1rem;
}

.navbar-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  max-width: calc(1100px - 3rem);
  padding: 8px 24px;
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 16px;
  box-shadow: 0 2px 15px 5px rgba(0, 0, 0, 0.05);
}

/* Offset para anclas: evita que la navbar fija tape la sección al scrollear */
section[id],
div[id] {
  scroll-margin-top: 100px;
}

.navbar-logo-link {
  display: flex;
  align-items: center;
  width: 150px;
}

.navbar-logo {
  width: 32px;
  height: auto;
  object-fit: contain;
  transition: opacity var(--transition-fast);
}

.navbar-logo:hover {
  opacity: 0.5;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.navbar-link {
  color: #000;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: opacity var(--transition-fast);
}

.navbar-link:hover {
  opacity: 0.5;
}

.navbar-link.is-active {
  text-decoration: underline;
}

.navbar-email {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 150px;
  color: #000;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: underline;
  transition: opacity var(--transition-fast);
}

.navbar-email:hover {
  opacity: 0.5;
}

/* Botón hamburguesa — solo visible en móvil */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  width: 28px;
  height: 28px;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: #000;
  border-radius: 2px;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.25s ease;
  transform-origin: center;
}

/* Cruz al abrir el menú */
.nav-toggle[aria-expanded="true"] span:first-child {
  transform: translateY(4px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:last-child {
  transform: translateY(-4px) rotate(-45deg);
}

/* Menú desplegable móvil */
.nav-mobile {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  padding: 1.5rem;
  margin-top: 0.5rem;
  background: #000;
  border-radius: 16px;
}

.nav-mobile .navbar-link {
  color: #fff;
  font-size: 1.25rem;
}

.nav-mobile.is-open {
  display: flex;
}


/* ======================
   8. LAYOUT PRINCIPAL
   Las esquinas redondeadas abajo crean el efecto de que el footer
   negro "asoma" por debajo como una capa separada al scrollear.
   ====================== */

.main-wrapper {
  background-color: var(--color-bg);
  border-bottom-left-radius: 48px;
  border-bottom-right-radius: 48px;
  position: relative;
  z-index: 2;
  display: flow-root;
  min-height: 100vh;
}


/* ======================
   9. HERO (home)
   Vídeo a pantalla completa con título sobreimpreso.
   ====================== */

.section-hero {
  height: 100vh;
  padding: 0;
  display: flex;
  justify-content: center;
}

.hero-video-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 0;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  will-change: width, border-radius;
}

.hero-video-wrap video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero-title {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 2rem;
  font-size: 5.625rem;
  line-height: 1;
  letter-spacing: -0.01em;
}

.hero-title-span {
  color: #fff;
  font-family: 'Moderat', Arial, sans-serif;
  font-size: 7.625rem;
  font-weight: 900;
  text-transform: uppercase;
}

/* Botón de pausa/play del vídeo hero */
.video-toggle {
  position: absolute;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.video-toggle:hover {
  background: rgba(255, 255, 255, 0.4);
}

.video-toggle img {
  width: 20px;
  height: 20px;
}


/* ======================
   10. HELLO (sección intro, home)
   ====================== */

.section-about {
  padding-top: 4.2rem;
  padding-bottom: 2rem;
  justify-items: center;
}

.about-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  max-width: 1100px;
}

.about-para {
  color: var(--color-black);
  font-size: 3.5rem;
  font-weight: 500;
  line-height: 1;
  max-width: 1100px;
  margin-left: 1.5rem;
  margin-right: 1.5rem;
  text-align: justify;
}

/* Palabras del párrafo intro: se revelan progresivamente al scrollear */
.about-para .word {
  display: inline-block;
  opacity: 0.12;
  transition: opacity 0.3s ease;
  will-change: opacity;
}


/* ======================
   11. PROYECTOS (home)
   Grid de 2 columnas con las tarjetas de proyecto.
   ====================== */

.section-projects {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.container-projects {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

.heading-2-col {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 2rem;
}

.works-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 1.5rem;
  max-width: 1100px;
  margin: 0 auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  box-sizing: border-box;
}

.work-block {
  width: 100%;
  background-color: var(--color-white);
  border-radius: var(--radius-card);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}

.card-related-project {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  background-color: var(--color-white);
  border-radius: var(--radius-card);
  padding: 2.5rem 3rem;
  width: 100%;
  box-sizing: border-box;
}

.card-related-project .work-image-wrapper {
  margin-bottom: 0;
  height: 100%;
}

.card-related-project .work-image {
  height: 100%;
  min-height: 25rem;
}

/* La imagen del proyecto: el enlace actúa como contenedor del hover */
.work-image-wrapper {
  display: block;
  position: relative;
  width: 100%;
  margin-bottom: 1.5rem;
  border-radius: calc(var(--radius-card) - 0.25rem);
  overflow: hidden;
  cursor: pointer;
}

/* Zoom suave al hacer hover, contenido por overflow:hidden */
.work-image {
  display: block;
  width: 100%;
  height: 15rem;
  max-height: 39.25rem;
  object-fit: cover;
  transform: scale(1.2);
  transition: transform 0.6s ease;
}

.work-image-wrapper:hover .work-image {
  transform: scale(1.25);
}

.work-image.custom-bg {
  background-color: #dcebe1;
}

/* Overlay con efecto cristal al hacer hover */
.project-image-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-med);
}

.work-image-wrapper:hover .project-image-overlay {
  opacity: 1;
}

/* Círculo blanco con la flecha centrado en el overlay */
.project-image-cursor {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 5rem;
  height: 5rem;
  min-width: 5rem;
  min-height: 5rem;
  background-color: var(--color-white);
  border-radius: 50%;
}

.cursor-icon {
  width: 2rem;
  height: 2rem;
}

.project-card-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2.5rem;
  width: 100%;
}

.project-card-content-left {
  color: var(--color-grey);
  width: 100%;
  min-width: 75%;
}


/* ======================
   12. BOTONES
   ====================== */

.button-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

/* Botón pill negro con flecha */
.btn-primary {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 12px 32px;
  background-color: var(--color-black);
  color: var(--color-white);
  border-radius: var(--radius-btn);
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

.btn-primary:hover {
  opacity: 0.8;
}

.btn-primary img {
  width: 24px;
}


/* ======================
   13. ABOUT (home)
   Foto + texto en dos columnas con carrusel de fotos.
   ====================== */

.section-about-hero {
  padding-top: 3rem;
  padding-bottom: 2rem;
}

.about-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 5rem;
}

.about-hero-image-wrap {
  border-radius: var(--radius-card);
  overflow: hidden;
}

.about-hero-image {
  display: block;
  width: 100%;
  height: 24rem;
  object-fit: cover;
  object-position: 50% 50%;
  border-radius: var(--radius-card);
}

.about-carousel-container {
  position: relative;
  overflow: hidden;
}

.carousel-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}

.carousel-image.active {
  opacity: 1;
}

.about-hero-content-wrap {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 3rem;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.name-title {
  color: var(--color-black);
  font-family: 'Moderat', Arial, sans-serif;
  font-weight: 700;
  font-size: 3rem;
  line-height: 1;
  letter-spacing: -0.01em;
}


/* ======================
   14. EXPERIENCIA (home)
   ====================== */

.section-experience {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.experience-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  width: 100%;
}

.experience-container>.small-heading {
  text-align: center;
}

.experience-cards-row {
  display: flex;
  flex-direction: row;
  gap: 2rem;
  width: 100%;
}

.experience-card {
  flex: 1;
  background-color: var(--color-white);
  border-radius: var(--radius-card);
  padding: 3rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.experience-wrap,
.studies-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  place-items: start stretch;
}

.experience-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.experience-item .text-color-brown {
  font-weight: 500;
}

/* Logos de empresa */
.image-8 {
  display: block;
  width: 80px;
  margin-bottom: 8px;
}

.image-8.sugoi-avatar {
  background-color: #e80920;
  border-radius: 10px;
  width: 50px;
}

.image-8.garaje-avatar {
  width: 60px;
}

.image-8.powermba {
  width: 130px;
}

.image-8.smaller-logo {
  height: 30px;
}


/* ======================
   15. FOOTER
   El footer negro "asoma" por debajo del main-wrapper gracias
   a que main-wrapper tiene z-index:2 y el footer es sticky.
   ====================== */

.footer {
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 2.5rem 1.5rem 3rem;
  background-color: var(--color-footer-bg);
  overflow: hidden;
}

/* El logo-link está en el HTML pero oculto en la home */
.footer-logo-link,
.footer-logo {
  display: none;
}

/* Footer home: CTA centrado en la pantalla */
.footer-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1100px;
  height: 90vh;
}

.footer-links-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  width: 100%;
}

.footer-cta {
  color: var(--color-footer-text);
  font-size: 5.125rem;
  line-height: 1;
  text-align: center;
}

.footer-email-link {
  color: var(--color-footer-text);
  font-size: 1.5rem;
  text-decoration: underline;
  transition: opacity var(--transition-fast);
}

.footer-email-link:hover {
  opacity: 0.6;
}

.footer-copy {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  color: var(--color-footer-text);
  font-family: 'Moderat Mono', sans-serif;
  font-weight: 400;
  font-size: 1.5rem;
  text-align: center;
}



/* OPTION 2: Auto-play Marquee Background — ACTIVA */
.footer-hover-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* El contenedor principal de las filas */
.footer-mosaic {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 60px; /* Separación real entre las dos filas */
  padding: 0;
}

/* Cada fila de marquee */
.marquee-row {
  overflow: hidden;
  width: 100%;
}

/* El track interior (el que se mueve) */
.marquee-track {
  display: flex;
  gap: 32px; /* Más espacio horizontal entre fotos */
  width: max-content;
  will-change: transform;
}

/* Animaciones opuestas (muy despacio: 250s) */
.marquee-row--right .marquee-track {
  animation: marquee-right 250s linear infinite;
}

.marquee-row--left .marquee-track {
  animation: marquee-left 250s linear infinite;
}

@keyframes marquee-right {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes marquee-left {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

/* Cada imagen del marquee (aún más grandes) */
.marquee-img {
  height: 380px; /* Aumentado otro 50% */
  width: 630px;
  object-fit: cover;
  border-radius: 16px;
  opacity: 0;
  filter: grayscale(100%);
  flex-shrink: 0;
  transition: opacity 0.8s ease;
}

/* Fade in cuando JS las marca como cargadas */
.marquee-img.is-loaded {
  opacity: 0.5;
}

/* En móvil */
@media (max-width: 767px) {
  .marquee-img {
    height: 290px;
    width: 470px;
  }
  .footer-mosaic {
    gap: 30px;
  }
  .marquee-track {
    gap: 20px;
  }
}

/* Estilos específicos para el botón Play/Pause del footer */
#marquee-toggle {
  background: rgba(255, 255, 255, 0.85); /* Más brillante para destacar en el footer oscuro */
}

#marquee-toggle:hover {
  background: rgba(255, 255, 255, 1);
}

#marquee-toggle-icon {
  filter: brightness(0); /* Convierte el icono a negro absoluto */
}

.overlay-dark {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.45) 50%, rgba(0,0,0,0.92) 100%);
  z-index: 1;
}
/* FIN OPTION 2 */



/* ======================
   16. CONTENT CARDS
   Compartidas entre home y case studies.
   Tres layouts reutilizables:
   a) .cs-card-single  — card completa, dos columnas internas
   b) .cs-card-grid-2  — dos cards en fila
   c) .cs-card-grid-3  — tres stat cards separadas
   ====================== */

.cs-page-wrap {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  width: 100%;
  box-sizing: border-box;
}

/* Espaciado entre bloques de secciones */
.cs-section {
  margin-top: 6rem;
}

.cs-section--related {
  margin-top: 6rem;
  margin-bottom: 6rem;
}

.cs-section--conclusions {
  margin-top: 8rem;
  padding-bottom: 4rem;
}

/* Base de card */
.cs-card {
  background-color: var(--color-white);
  border-radius: 24px;
  padding: 2.5rem 3rem;
  width: 100%;
  box-sizing: border-box;
}

/* ---- a) Card completa: dos columnas internas ---- */
.cs-card-single {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
  margin-bottom: 1.5rem;
}

.cs-card-experience {
  flex-direction: column;
  display: flex;
  gap: 0.5rem;
}

#about-me-card {
  align-items: center;
}

.cs-card-col-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-brown, #9a8f7e);
  margin-bottom: 1rem;
}

/* Título de card — tamaño home */
.cs-card-title {
  font-family: 'Moderat', Arial, sans-serif;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.05;
  color: var(--color-black);
  margin: 0;
}

/* Título de card — tamaño case study (override) */
body.case-study .cs-card-title {
  font-size: 2rem;
}

body.case-study .cs-card-col-label {
  font-size: 0.7rem;
}

.cs-card-body {
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.65;
  color: var(--color-black);
  margin-top: 1.25rem;
}

body.case-study .cs-card-body {
  margin-top: 1.25rem;
}

.cs-card-body p {
  margin-bottom: 1rem;
}

.cs-card-body p:last-child {
  margin-bottom: 0;
}

.cs-card-body strong {
  font-weight: 700;
}

/* ---- b) Dos cards en fila ---- */
.cs-card-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.cs-card-grid-2 .cs-card {
  padding: 2rem 2.25rem;
}

.cs-card-grid-2 .cs-card-title {
  font-size: 2rem;
  margin-top: 0.75rem;
}

/* ---- c) Tres stat cards ---- */
.cs-card-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.cs-stat-card {
  background-color: var(--color-white);
  border-radius: 24px;
  padding: 2.5rem 2.25rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
}

.cs-stat-number {
  font-family: 'Moderat', Arial, sans-serif;
  font-size: 4rem;
  font-weight: 400;
  line-height: 1;
  color: var(--color-black);
  letter-spacing: -0.02em;
}

.cs-stat-desc {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-brown, #6b6860);
}


/* ======================
   17. ANIMACIÓN FADE-IN
   ====================== */

.js-fade {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.js-fade.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ============================================================
   18. HERO WORD ANIMATIONS
   Animaciones interactivas en hover para Explore / Design / Scale.
   ============================================================ */

.hero-word {
  display: inline-block;
  white-space: nowrap;
  cursor: default;
}

.hero-char {
  display: inline-block;
  vertical-align: bottom;
  transform-origin: bottom center;
  will-change: transform, opacity, filter;
}

.hero-dot {
  display: inline-block;
}

/* EXPLORE — Blur reveal letra a letra */
@keyframes explore-reveal {
  0% {
    opacity: 0;
    filter: blur(10px);
    transform: translateX(-4px);
  }

  60% {
    opacity: 1;
    filter: blur(0);
    transform: translateX(0);
  }

  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateX(0);
  }
}

.hero-word[data-anim="explore"] .hero-char {
  opacity: 1;
  filter: blur(0);
  transition: opacity 0.3s ease, filter 0.3s ease;
}

.hero-word[data-anim="explore"]:hover .hero-char {
  opacity: 0;
  filter: blur(10px);
  animation: explore-reveal 1.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* DESIGN — Slot machine (animación gestionada por JS) */
.hero-word[data-anim="design"] .hero-char {
  transform-origin: center center;
}

/* SCALE — Stretch vertical desde baseline con overshoot leve */
@keyframes scale-stretch {
  0% {
    transform: scaleY(0.05);
    opacity: 0;
  }

  60% {
    transform: scaleY(1.08);
    opacity: 1;
  }

  80% {
    transform: scaleY(0.96);
  }

  100% {
    transform: scaleY(1);
    opacity: 1;
  }
}

.hero-word[data-anim="scale"] .hero-char {
  transform-origin: bottom center;
  transform: scaleY(1);
  opacity: 1;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.hero-word[data-anim="scale"]:hover .hero-char {
  transform: scaleY(0.05);
  opacity: 0;
  animation: scale-stretch 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}


/* ============================================================
   19. PAGE TRANSITION
   ============================================================ */

.page-transition-v2 {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background-color: #ffffff;
  opacity: 0;
  visibility: hidden;
}

.page-transition-v2.is-active {
  pointer-events: auto;
}

.page-transition-v2.forward-out,
.page-transition-v2.backward-out {
  visibility: visible;
  animation: fadeOutCover 0.4s ease-in-out forwards;
}

.page-transition-v2.forward-in,
.page-transition-v2.backward-in {
  visibility: visible;
  pointer-events: auto;
  animation: fadeInReveal 0.4s ease-in-out forwards;
}

@keyframes fadeOutCover {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeInReveal {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    visibility: hidden;
  }
}

body.content-fade-in .footer {
  opacity: 0 !important;
  visibility: hidden !important;
  animation: none !important;
}

@keyframes fadeInContent {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}


/* ============================================================
   20. CASE STUDY — Hero vídeo
   Vídeo de fondo que ocupa casi toda la pantalla al entrar.
   ============================================================ */

.background-video {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  min-height: 100vh;
  overflow: hidden;
}

.background-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.background-video .heading-style-h1 {
  position: relative;
  z-index: 1;
  font-family: 'Moderat', Arial, sans-serif;
  font-size: 5.625rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--color-black);
  padding: 0 2rem 2rem 0;
  margin: 0 0 4rem 1.5rem;
}


/* ============================================================
   21. CASE STUDY — Meta (cliente, equipo…)
   ============================================================ */

.section-project-meta {
  padding-top: 3rem;
}

/* Grid de 4 columnas que se reduce en responsive */
.project-container-large {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  align-items: flex-start;
  width: 100%;
}

.project-meta-wrap {
  display: flex;
  flex-direction: column;
}

/* Override: en case studies el padding-global no añade margin-bottom */
body.case-study .padding-global {
  margin-bottom: 0;
}


/* ============================================================
   22. CASE STUDY — TOC flotante
   Índice de navegación sticky al borde inferior de la pantalla.
   Oculto temporalmente — descomentar display cuando se active.
   ============================================================ */

.div-block-6 {
  display: none;
  /* TEMPORARILY HIDDEN */
  position: sticky;
  bottom: 2rem;
  left: 1.5rem;
  width: 250px;
  margin-bottom: 60px;
}

.resource-toc-component {
  width: 200px;
  padding: 16px;
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.toc {
  display: flex;
  flex-direction: column;
}

.toc-link {
  display: block;
  color: #7c7c7c;
  font-size: 0.9rem;
  font-weight: 400;
  text-decoration: none;
  margin-bottom: 6px;
  transition: color var(--transition-fast);
}

.toc-link:hover,
.toc-link.is-active {
  color: var(--color-black);
  font-weight: 700;
}


/* ============================================================
   23. CASE STUDY — Botón "Visit" (SUGOI)
   ============================================================ */

.link-block-4 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background-color: var(--color-black);
  color: #fff;
  border-radius: 100px;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

.link-block-4:hover {
  opacity: 0.8;
}

.link-block-4 img {
  width: 14px;
  height: 14px;
}

.text-block-2 {
  color: #fff;
}


/* ============================================================
   24. CASE STUDY — Footer simplificado
   Los case studies muestran solo "Back to homepage" + copyright.
   ============================================================ */

.div-block {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 90vh;
  padding-top: 20px;
}

.container-large {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
}

.link-block-3 {
  text-decoration: none;
  cursor: pointer;
}

/* "Back to homepage" — mismo tamaño visual que el CTA de la home */
.text-block {
  color: #edeceb;
  font-size: 5.125rem;
  font-weight: 300;
  text-align: center;
}

.text-block-copy-copy {
  color: #edeceb;
  font-family: 'Moderat Mono', Arial, sans-serif;
  font-size: 1.5rem;
  font-weight: 500;
  text-align: center;
}


/* ============================================================
   25. CASE STUDY — Contenedores de imagen
   a) .cs-img-single   — imagen panorámica a ancho completo
   b) .cs-img-grid-2   — dos imágenes en fila
   ============================================================ */

.cs-img-single {
  width: 100%;
  aspect-ratio: 1.43 / 1;
  border-radius: 24px;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

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

.cs-img-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.cs-img-grid-2-item {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 24px;
  overflow: hidden;
}

.cs-img-grid-2-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ============================================================
   26. RESPONSIVE
   Breakpoints:
   - ≤991px: tablet
   - ≤767px: móvil landscape
   - ≤479px: móvil pequeño
   ============================================================ */

@media screen and (max-width: 991px) {

  h1,
  .hero-title {
    font-size: 5rem;
  }

  .name-title {
    font-size: 3rem;
  }

  .hero-title-span {
    font-size: 5rem;
  }

  .main-wrapper {
    border-bottom-left-radius: 32px;
    border-bottom-right-radius: 32px;
  }

  .about-para {
    font-size: 2.5rem;
    margin-right: 0;
  }

  .works-grid {
    grid-template-columns: 1fr 1fr;
  }

  .card-related-project {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 2rem;
  }

  .card-related-project .work-image {
    min-height: 20rem;
  }

  .experience-cards-row {
    flex-direction: column;
  }

  .footer-cta {
    font-size: 4rem;
  }

  .about-hero-grid {
    grid-template-columns: 1fr;
    gap: 0rem;
  }

  .about-hero-image {
    height: 20rem;
  }

  .section-about-hero {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .navbar-email {
    display: none;
  }

  .nav-menu {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  .cs-card-single {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .cs-card-title {
    font-size: 1rem;
  }

  /* Case study responsive */
  .project-container-large {
    grid-template-columns: repeat(2, 1fr);
  }

  .div-block-6 {
    display: none;
  }

  .text-block {
    font-size: 3rem;
  }

  .cs-card-grid-3 {
    grid-template-columns: 1fr 1fr;
  }

  body.case-study .cs-card-single {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  body.case-study .cs-card-title {
    font-size: 2rem;
  }
}

@media screen and (max-width: 767px) {
  .hero-title-span {
    font-size: 3.5rem;
  }

  .about-para {
    font-size: 2rem;
    margin-left: 0;
  }

  .name-title {
    font-size: 2.5rem;
  }

  .spacer-medium {
    padding-top: 1.5rem;
  }

  .experience-card {
    padding: 2rem;
  }

  .work-block {
    padding: 1rem;
  }

  .work-image-wrapper {
    margin-bottom: 1rem;
  }

  .footer-cta {
    font-size: 3.5rem;
  }

  .footer-copy {
    font-size: 1.2rem;
  }

  .works-grid {
    grid-template-columns: 1fr;
    padding-left: 0;
    padding-right: 0;
  }

  .navbar {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .card-related-project {
    padding: 1.5rem;
  }

  .card-related-project .work-image {
    min-height: 15rem;
  }

  .cs-card {
    padding: 1.75rem 1.5rem;
  }

  .cs-card-grid-2 {
    grid-template-columns: 1fr;
  }

  .cs-page-wrap {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .padding-global .cs-page-wrap {
    padding-left: 0;
    padding-right: 0;
  }

  .cs-card-col-label {
    margin-bottom: 1rem;
  }

  /* Case study responsive */
  .project-container-large {
    grid-template-columns: 1fr;
  }

  .text-block {
    font-size: 2rem;
  }

  .background-video .heading-style-h1 {
    font-size: 3.5rem;
  }

  .cs-img-single {
    aspect-ratio: 4 / 3;
    border-radius: 16px;
  }

  .cs-img-grid-2 {
    grid-template-columns: 1fr;
  }

  .cs-img-grid-2-item {
    border-radius: 16px;
  }

  .cs-stat-number {
    font-size: 3rem;
  }
}

@media screen and (max-width: 479px) {
  .about-para {
    font-size: 2rem;
    margin-left: 0;
  }

  .heading-style-h2 {
    font-size: 2rem;
  }

  .about-hero-image {
    height: 18rem;
  }

  .experience-card {
    padding: 1.5rem;
  }

  .footer-cta {
    font-size: 2.5rem;
  }

  .footer-email-link {
    font-size: 1.1rem;
  }

  .cs-page-wrap {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .padding-global .cs-page-wrap {
    padding-left: 0;
    padding-right: 0;
  }

  /* Case study responsive */
  .text-block {
    font-size: 2rem;
  }
}


/* ============================================================
   27. PREFERS-REDUCED-MOTION
   Si el usuario tiene activado "Reducir movimiento" en su SO,
   se respetan sus preferencias desactivando todas las animaciones
   y transiciones no esenciales. No requiere ningún botón ni
   configuración manual: es completamente automático.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

  /* Detener TODAS las transiciones y animaciones por defecto */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Fade-in al scroll: elementos aparecen directamente visibles */
  .js-fade {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* Palabras del intro: visibles desde el inicio */
  .about-para .word {
    opacity: 1 !important;
    transition: none;
  }

  /* Carrusel de fotos: sin fundido entre imágenes */
  .carousel-image {
    transition: none;
  }

  /* Zoom de imágenes en project cards: sin movimiento */
  .work-image {
    transform: none;
    transition: none;
  }

  .work-image-wrapper:hover .work-image {
    transform: none;
  }

  /* Hero word animations: sin animación en hover */
  .hero-word[data-anim="explore"]:hover .hero-char,
  .hero-word[data-anim="scale"]:hover .hero-char {
    animation: none;
    opacity: 1;
    filter: none;
    transform: none;
  }

  /* Cursor personalizado v2: sin lerp (el JS también lo comprueba),
     sin animación en la pastilla de texto */
  #custom-cursor {
    transition: none;
  }

  #custom-cursor .cursor-label {
    transition: none;
  }

  /* Transiciones de página: desactivadas */
  .page-transition-v2 {
    display: none !important;
  }
}