/* Dos Uvas - Home Page Styles */

/* Layout */
header, main, footer { 
  max-width: 1100px; 
  margin: 0 auto; 
  padding: 1.5rem; 
}

/* Hero Section */
header.hero {
  min-height: 100svh;
  display: grid;
  align-items: center;
  align-content: center; /* center grid tracks vertically within 100svh */
  gap: clamp(1rem, 4vw, 3rem);
  grid-template-columns: 1fr;
  grid-template-areas: "copy" "visual"; /* mobile: text on top, logo below */
  position: relative;
  scroll-snap-align: start;
  padding-top: clamp(2rem, 6vw, 4rem);
  padding-bottom: clamp(2rem, 6vw, 4rem);
}

@media (min-width: 900px) {
  header.hero {
    grid-template-columns: .9fr 1.1fr;
    grid-template-areas: "visual copy"; /* desktop: logo left, text right */
    align-items: center;
  }
}

.copy {
  grid-area: copy;
}

.copy h1 { 
  font-size: clamp(2.5rem, 7vw, 4.75rem); 
  line-height: 1.05; 
  margin: 0 0 .5rem; 
}

.tagline { 
  font-size: clamp(1.125rem, 2.4vw, 1.5rem); 
  color: var(--muted); 
  margin: 0 0 1rem; 
}

.subline { 
  color: #E6E7EB; 
  max-width: 48ch; 
}

.visual {
  display: grid;
  place-items: center;
  grid-area: visual;
}

.float {
  width: min(70vw, 440px);
  height: auto;
  filter: none; 
  animation: none; 
}

/* Scroll Cue */
.scroll-cue {
  position: absolute; 
  left: 50%; 
  bottom: 1.25rem; 
  transform: translateX(-50%);
  color: var(--text); 
  text-decoration: none; 
  opacity: .9;
  display: inline-flex; 
  align-items: center; 
  gap: .5rem;
  padding: .5rem .9rem; 
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
}

.scroll-cue svg { 
  width: 18px; 
  height: 18px; 
}

/* Contact Section */
section.contact {
  scroll-snap-align: start;
  background: transparent; 
  color: var(--text);
  border-radius: 0;
  padding: clamp(2rem, 6vw, 4rem) 0;
  box-shadow: none;
  margin-bottom: 2rem;
}

section.contact h2 { 
  margin-top: 0; 
  font-size: clamp(1.5rem, 3vw, 2rem); 
}

.email { 
  margin: .75rem 0 1.25rem; 
}

.email a { 
  color: var(--text); 
  text-decoration: underline; 
}

/* Footer */
footer { 
  color: #D4D6DE; 
  text-align: center; 
  padding-bottom: 2rem; 
}