@font-face {
  font-family: "TT Firs Neue Trial Var Roman";
  src: url("fonts/TT Firs Neue Trial Var Roman.ttf") format("truetype");
  font-weight: 100 900;
  /* Variable font range */
}

:root {
  --bg-color: #ebebeb;
  --text-color: #1a1a1a;
  --accent-color: #333;
  --font-main: "TT Firs Neue Trial Var Roman", "Inter", sans-serif;
  --font-mono: "Roboto Mono", monospace;
}

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

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: var(--font-main);
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Prevent scrolling for a fixed poster-like feel */
  cursor:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="10" fill="black"/></svg>')
      10 10,
    auto;
}

/* Header */
.header {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 2rem 3rem;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 10;
}

.logo {
  display: block;
  width: 150px;
  /* Adjust based on preference */
}

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

.header-right {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  display: flex;
  gap: 0.5rem;
  cursor: pointer;
}

.divider {
  opacity: 0.5;
}

/* Main Content */
.main-content {
  flex: 1;
  display: flex;
  justify-content: center;
  /* Center horizontally */
  align-items: center;
  /* Center vertically */
  padding: 3rem;
  position: relative;
  width: 100%;
}

.content-wrapper {
  width: 100%;
  max-width: 800px;
  /* Reduced max-width for centered content */
  margin: 0 auto;
  display: flex;
  /* Changed from grid to flex */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 3rem;
}

.hero-left {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: flex-start;
}

/* Isotype Line Animation */
.loader-container {
  width: 585px;
  height: 761px;
  /* Aspect 254/328 */
  color: var(--text-color);
  position: relative;
  z-index: 5;
}

.loader-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.iso-track {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  opacity: 0.2;
  /* Faint outline */
}

.iso-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  /* Thicker active line */
  stroke-linecap: round;
  stroke-dasharray: 0.25 1;
  /* Segment length relative to pathLength=1 */
  stroke-dashoffset: 0;
  animation: dashRotate 2.2s linear infinite;
}

@keyframes dashRotate {
  to {
    stroke-dashoffset: -1;
    /* Rotate full circle */
  }
}

/* Intro Overlay (La Hoja) */
#intro-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;

  /* Transición de salida: Se desliza hacia arriba suavemente */
  transition: transform 1.2s cubic-bezier(0.87, 0, 0.13, 1);
  /* Optimización de rendimiento */
  will-change: transform;
}

/* Contenedor del Logo */
.logo-container {
  width: 180px;
  /* Ajusta el tamaño del logo aquí */
  height: auto;
  position: relative;
}

/* Animación del Trazo SVG */
.sketch-path {
  fill: transparent;
  /* Empieza vacío */
  stroke: #000000;
  /* Color del trazo */
  stroke-width: 1.5px;
  stroke-linecap: round;
  stroke-linejoin: round;

  /* Configuración del dibujo */
  stroke-dasharray: 2500;
  stroke-dashoffset: 2500;

  /* Secuencia: Dibujar (2.5s) -> Rellenar (0.8s) */
  animation:
    drawLines 2.5s cubic-bezier(0.45, 0, 0.55, 1) forwards,
    fillShape 0.8s ease-out 2.2s forwards;
}

/* Keyframes */
@keyframes drawLines {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes fillShape {
  to {
    fill: #000000;
    /* Color final del relleno */
    stroke: transparent;
    /* El borde desaparece */
  }
}

/* Clase que activa la salida (El telón sube) */
.reveal-site {
  transform: translateY(-100%);
}

/* Clase para desbloquear scroll en el body */
body.intro-finished {
  overflow: auto;
}

/* Centered Layout Layout */
.content-wrapper.centered-layout {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 3rem;
  padding-top: 5vh;
  /* Visual optical balance */
}

/* Remove old hero-left layout props if conflicting, but keeping it simple */

/* Marquee Styles */
.hero-marquee {
  width: 100%;
  overflow: hidden;
  position: relative;
  margin-top: 0;

  /* Entrance Animation (Same as before) */
  opacity: 0;
  animation: fadeInUp 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: 4.3s;
  z-index: 10;
}

.marquee-track {
  display: flex;
  width: 100%;
  justify-content: center;
}

.marquee-item {
  font-size: 2.3vw;
  /* Reduced further */
  line-height: 1;
  font-weight: 300;
  /* Set base weight here to match span default */
  letter-spacing: -0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-color);
}

.marquee-item span {
  display: inline-block;
  transition:
    font-variation-settings 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    font-weight 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  font-variation-settings: "wght" 300;
  font-weight: 300;
  white-space: pre;
}

.marquee-item:hover span {
  font-variation-settings: "wght" 900;
  font-weight: 900;
}

.marquee-item .sep {
  color: #ccc;
  margin: 0 0.5rem;
  font-weight: 300;
}

.marquee-item .highlight {
  color: #888888;
  /* Color gris pedido anteriormente */
}

@keyframes marqueeScroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }

  /* Se mueve la mitad (el set original) */
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .marquee-item {
    font-size: 4vw;
    /* Reduced further */
  }
}

/* ... existing code ... */

.text-block {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  line-height: 1.6;
  max-width: 500px;
  justify-self: center;
  align-self: center;
  /* Center in flex */
  padding-bottom: 0;
  opacity: 0;
  /* Init hidden */
  animation: fadeInUp 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: 4.5s;
}

.loader-container {
  opacity: 0;
  /* Init hidden */
  animation: fadeInUp 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: 4.2s;
}

/* ... existing code ... */

.header {
  animation: fadeInUp 1s ease forwards;
  animation-delay: 4.6s;
  opacity: 0;
}

.mono-text {
  margin-bottom: 2rem;
  display: block;
}

.mono-text strong {
  font-weight: 700;
}

.description {
  margin-bottom: 1rem;
  max-width: 100%;
  /* Allow full width in centered container */
  margin-left: auto;
  margin-right: auto;
}

.description.en {
  opacity: 0.5;
}

/* Footer */
.footer {
  padding: 2rem 3rem;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  position: relative;
}

.contact-info {
  position: absolute;
  right: 3rem;
  /* Keep contact on right? Or center? User said "centered layout" but usually footer contact stays put or centers. Let's keep it right for balance or center it if explicitly asked for footer. User said "quitar el isotipo que está debajo... igual debajo y centrado" - likely means text block. I will keep contact info on right as per standard unless specified otherwise, but clean up the rest. */
  bottom: 2rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.contact-info a {
  color: var(--text-color);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}

.contact-info a:hover {
  border-bottom: 1px solid var(--text-color);
}

/* Responsive */
@media (max-width: 768px) {
  .content-wrapper {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .hero-title {
    font-size: 8.4vw;
  }

  .header,
  .footer,
  .main-content {
    padding: 1.5rem;
  }

  .contact-info {
    position: static;
    /* Center on mobile */
    margin-top: 1rem;
  }

  .footer {
    flex-direction: column;
    align-items: center;
  }
}

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

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

/* Contact Modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(235, 235, 235, 0.9);
  /* Matches bg color with transparency */
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.modal-content {
  background-color: #ffffff;
  padding: 3rem;
  width: 90%;
  max-width: 500px;
  position: relative;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
  transform: translateY(20px);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-overlay.active .modal-content {
  transform: translateY(0);
}

.modal-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: none;
  border: none;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  color: var(--text-color);
  padding: 0.5rem;
  transition: transform 0.3s ease;
}

.modal-close:hover {
  transform: rotate(90deg);
}

.modal-title {
  font-family: var(--font-main);
  font-weight: 300;
  font-size: 1.5rem;
  margin-bottom: 2rem;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-group label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #888;
}

.form-group input,
.form-group textarea {
  font-family: var(--font-main);
  font-size: 1rem;
  padding: 0.5rem 0;
  border: none;
  border-bottom: 1px solid #ddd;
  background: transparent;
  outline: none;
  transition: border-color 0.3s ease;
  border-radius: 0;
  /* Remove iOS styles */
  resize: none;
}

.form-group input:focus,
.form-group textarea:focus {
  border-bottom-color: var(--text-color);
}

.submit-btn {
  margin-top: 1rem;
  background: var(--text-color);
  color: #fff;
  border: none;
  padding: 1rem 2rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

/* --- Magnetic Text Effect (Clip Path Flashlight) --- */

.magnetic-text-container {
  position: relative;
  display: inline-block;
  cursor: none;
  user-select: none;
  vertical-align: top;
}

/* Base Layer: Original Dark Text */
.magnetic-base-text {
  display: block;
  color: var(--text-color);
}

/* Hover Layer: Visible through the Flashlight (White Text on Dark circle) */
.magnetic-hover-text {
  position: absolute;
  /* Create a buffer around the text so the circle doesn't clip at edges */
  top: -150px;
  left: -150px;
  width: calc(100% + 300px);
  height: calc(100% + 300px);
  padding: 150px;
  /* Offset the negative position to align text perfectly */

  display: block;
  color: var(--bg-color);
  /* Light Text */
  background-color: var(--text-color);
  /* Dark Background for the circle */

  /* Initial mask */
  clip-path: circle(0px at 0px 0px);

  pointer-events: none;
  z-index: 10;

  /* Typography Mirroring */
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-align: inherit;
  margin: 0;
  box-sizing: border-box;
  white-space: normal;
}

.centered-logo {
  display: block;
  width: 300px;
  /* Larger logo */
  margin-top: -16.5rem;
  /* Reduced space additional 60% */
  opacity: 0;
  animation: fadeInUp 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: 4.3s;
}

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