/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@200;300;400&family=Playfair+Display:ital@0;1&display=swap');

/* Base typography */
html {
  font-size: 100%;
  cursor: url('cursor.svg') 8 8, auto;
  scroll-behavior: smooth;
}

a,
button,
.mobile-menu-toggle {
  cursor: url('cursor.svg') 8 8, pointer;
}

body {
  margin: 0;
  font-family: 'Outfit', "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
  letter-spacing: 0.05em;
  line-height: 1.6;
  color: #2b2b2b;
  background: #fdfcfb;
  /* Slightly warmer off-white */
  padding: 2rem;
  transition: padding 0.3s ease, background-color 0.5s ease;
  overflow-x: hidden;
}

body.is-navigating .site-subtitle {
  display: none;
}

/* Hero Styles (Common) */
.hero-container {
  overflow: hidden;
  position: relative;
}

.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  opacity: 0.5;
  /* 50% transparency */
}

/* Desktop Hero Adjustments */
@media (min-width: 601px) {
  body {
    padding: 0;
    /* Removing padding on desktop to allow full-width hero */
  }

  .site-header-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 2rem;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Center vertically for cleaner look with burger */
  }

  .site-header {
    margin-bottom: 0;
  }

  .site-nav {
    margin: 0;
    display: flex;
    align-items: center;
  }

  .hero-container {
    width: 75%;
    /* Smaller width */
    height: 80vh;
    /* Smaller height */
    margin-left: auto;
    /* Justify right */
    margin-top: 15rem;
    /* Increased to clear absolute header */
    margin-bottom: 6rem;
  }

  .section {
    padding: 0 2rem;
    /* Restore padding for content below hero */
  }
}

/* Mobile Hero Adjustments */
@media (max-width: 600px) {
  .hero-container {
    width: 100%;
    height: 60vh;
    margin-top: 1rem;
    /* Tighten gap below mobile menu */
    margin-bottom: 3rem;
  }
}

/* Navigation */
.site-nav ul {
  list-style: none;
  display: none;
  flex-direction: column;
  gap: 1.2rem;
  padding: 1.5rem;
  margin: 0;
  position: absolute;
  top: calc(100% + 1rem);
  right: 0;
  background: #fdfcfb;
  min-width: 140px;
  text-align: right;
  z-index: 1001;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  border-radius: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.site-nav ul.active {
  display: flex;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.site-nav a {
  text-decoration: none;
  color: inherit;
  font-size: 0.85rem;
  text-transform: uppercase;
  white-space: nowrap;
}

.lang-switch {
  display: flex;
  gap: 0.5rem;
  margin-left: 1rem;
  font-size: 0.8rem;
  align-items: center;
}

.lang-btn {
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 0.3s ease;
  padding: 2px 4px;
}

.lang-btn.active {
  opacity: 1;
  font-weight: 400;
}

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

/* Sections */
.section {
  margin-bottom: 3rem;
  display: none;
  /* Hidden by default */
}

.section.active {
  display: block;
  /* Shown when active */
}

/* Hidden utility */
.hidden {
  display: none !important;
}

.section h2 {
  display: block;
  /* Show titles with premium styling */
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: 2rem;
  text-align: center;
  margin-bottom: 4rem;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s ease-out;
}

.section.active h2 {
  opacity: 1;
  transform: translateY(0);
}

/* Gallery placeholder */
.gallery {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rem;
  /* Space between images */
  padding: 2rem 0;
}

.gallery img,
.gallery a {
  width: auto;
  max-width: 85%;
  max-height: 85vh;
  height: auto;
  object-fit: contain;
  display: block;
}

.gallery a {
  display: flex;
  justify-content: center;
}

.gallery a img {
  width: 100%;
  max-height: inherit;
}

.gallery-row {
  display: flex;
  gap: 2rem;
  width: 85%;
  max-width: 1200px;
  justify-content: center;
  align-items: center;
}

.gallery-row img {
  width: 48% !important;
  max-width: none;
  max-height: 70vh !important;
  height: auto;
}

@media (max-width: 600px) {
  .gallery-row {
    flex-direction: column;
    width: 85%;
    gap: 3rem;
  }

  .gallery-row img {
    width: 100% !important;
  }
}

/* Responsive tweaks */

/* Mobile menu styles */
.mobile-menu-toggle {
  display: block;
  /* Shown for everyone */
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  padding: 0;
  user-select: none;
}

@media (max-width: 600px) {
  body {
    padding: 1rem;
  }

  /* Flex container for Name + Menu Toggle */
  .site-header-container {
    display: flex;
    justify-content: center;
    /* Name centered */
    align-items: center;
    margin-bottom: 2rem;
    position: relative;
  }

  /* Name styling on mobile */
  .site-header {
    margin: 0;
    text-align: center;
    margin-bottom: 0;
    /* Override default */
  }

  .site-header h1 {
    font-size: 0.95rem;
    /* Smaller font size */
    letter-spacing: 0.08em;
    white-space: nowrap;
  }

  .site-subtitle {
    font-size: 0.75rem;
  }

  /* Navigation container */
  .site-nav {
    margin: 0;
    position: absolute;
    /* Remove from flow to strictly center title */
    right: 0;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
  }

  /* Toggle button (Burger) */
  .mobile-menu-toggle {
    display: block;
    cursor: pointer;
    font-size: 1.5rem;
    /* larger icon */
    line-height: 1;
    padding: 0 0 0 1rem;
    user-select: none;
  }

  /* Dropdown Menu Links */
  #navLinks {
    display: flex;
    /* Always flex, control visibility with opacity/transform */
    position: absolute;
    top: calc(100% + 0.5rem);
    /* Position below the toggle */
    right: 0;
    transform: translateY(-10px);
    /* Initial state for animation */
    opacity: 0;
    /* Initial state for animation */
    visibility: hidden;
    /* Hide from screen readers when not active */
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    background: #fff;
    /* Clean background */
    width: auto;
    flex-direction: column;
    /* Vertical layout for mobile */
    gap: 0.5rem;
    /* Smaller gap for vertical list */
    text-align: right;
    padding: 1rem;
    /* Add padding around links */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    z-index: 100;
    border-radius: 5px;
    /* Slightly rounded corners */
  }

  #navLinks a {
    font-size: 0.9rem;
    text-transform: uppercase;
    color: #2b2b2b;
    letter-spacing: 0.05em;
    padding: 0.25rem 0;
    /* Add padding to links for better tap area */
  }

  #navLinks.active {
    display: flex;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* Fullscreen Mobile Gallery */
  #works h2 {
    display: none;
    /* Hide title for immersive experience */
  }

  .gallery {
    /* Layout inherited from base (flex-column), just ensure full width */
    width: 100%;
    gap: 3rem;
    /* Slightly smaller gap on mobile */
  }

  .gallery img {
    width: 85%;
    /* Wider on mobile for better visibility */
  }
}


/* Site header styling */
.site-header {
  margin-bottom: 2rem;
}

.site-header h1 {
  margin: 0;
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

.site-subtitle {
  margin: 4.8rem 0 0 6.5rem;
  /* Moved 3 lines lower and ~8 characters further right */
  font-size: 0.85rem;
  font-style: italic;
  font-weight: 300;
  opacity: 0.8;
  color: #666;
}

/* Contact Section Styling */
#contact {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 4rem auto;
}

.contact-intro {
  margin-bottom: 3rem;
  font-size: 1rem;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-bottom: 3rem;
  text-align: left;
  /* Inputs text aligned left */
}

.form-group {
  width: 100%;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  border: none;
  border-bottom: 1px solid #e0e0e0;
  /* Very light grey border */
  background: transparent;
  padding: 0.5rem 0;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 300;
  color: #2b2b2b;
  outline: none;
  transition: border-color 0.3s ease;
  resize: vertical;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #a0a0a0;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-bottom-color: #2b2b2b;
  /* Darker on focus */
}

.contact-form button {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  padding: 1rem 2rem;
  color: #2b2b2b;
  align-self: center;
  /* Center button in flex column */
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.contact-form button:hover {
  opacity: 1;
  transform: scale(1.05);
}

/* Animations */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease-out;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Gallery Hover */
.gallery img,
.gallery a img {
  transition: transform 0.5s ease, filter 0.5s ease;
}

.gallery img:hover,
.gallery a img:hover {
  transform: scale(1.02);
  filter: brightness(1.05);
}

.contact-footer {
  font-size: 0.9rem;
  color: #666;
  line-height: 1.8;
}

.contact-footer a {
  text-decoration: none;
  color: inherit;
  transition: opacity 0.3s ease;
}

.contact-footer a:hover {
  opacity: 0.7;
}

/* Hide default section title for Contact if desired/redundant */
#contact h2 {
  display: none;
}

/* Detail Page Grid */
.detail-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  max-width: 800px;
  width: 100%;
  margin: 2rem auto;
  padding: 0 1rem;
  box-sizing: border-box;
}

.detail-grid img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 0;
  /* Override generic img margin if needed */
}

@media (max-width: 600px) {
  .detail-grid {
    grid-template-columns: repeat(1, 1fr);
    /* Optional: Stack on mobile? or keep 3? User asked for 3x3, I'll keep 3x3 or maybe 2? Let's stick to 3x3 as requested unless it looks bad, but typically mobile might need 2 or 1. User said "cuadricula de 3 x 3", I should probably respect that even on mobile or maybe 2. Let's make it responsive. Actually, user asked "sube las 9 imagenes... en una cuadricula de 3x3" implied layout. I'll stick to 3 columns but maybe small gap. */
  }
}

/* News Section */
.news-item {
  display: flex;
  flex-direction: row;
  gap: 2rem;
  align-items: stretch;
  margin-bottom: 4rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid #eee;
}

.news-item:last-child {
  border-bottom: none;
}

.news-image {
  flex: 1;
  max-width: 400px;
}

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

.news-content {
  flex: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.news-date {
  font-size: 0.85rem;
  color: #666;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.news-content h3 {
  font-size: 1.2rem;
  margin-top: 0;
  margin-bottom: 1rem;
  font-weight: 400;
}

.news-content p {
  margin-bottom: 1rem;
}

@media (max-width: 768px) {
  .news-item {
    flex-direction: column;
  }

  .news-image {
    max-width: 100%;
    width: 100%;
  }
}