/* ══════════════════════════════════════════════════════
   ATA — Agrupación Trujillana de Astronomía
   styles.css  |  Light Theme (Responsive & Modern)
══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

:root {
  /* New Palette requested by User */
  --bg-light:   #F2F2F2;    /* Main background */
  --bg-alt:     #F2E4BB;    /* Secondary background / Beige */
  --text-main:  #40140A;    /* Darkest red/brown for text */
  --text-muted: #59190B;    /* Lighter red/brown for muted text */
  --brand:      #A63A12;    /* Main Logo Color (Orange) */
  --brand-dim:  rgba(166, 58, 18, 0.15);
  --deep:       #59190B;    /* Deep red/brown for dark sections */
  --white:      #FFFFFF;

  --border:     rgba(89, 25, 11, 0.15); /* Light brown border */

  --font-h:     'Space Grotesk', sans-serif;
  --font-b:     'Inter', sans-serif;

  --ease:       cubic-bezier(.25,1,.5,1);
  --t:          .45s var(--ease);
  --radius:     8px;
  --nav-h:      75px;
}

/* ─── Reset ─── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; overflow-x: hidden; width: 100%; }
body {
  font-family: var(--font-b);
  background: var(--bg-light);
  color: var(--text-main);
  line-height: 1.75;
  font-weight: 400; /* Increased from 300 for better readability on light bg */
  overflow-x: hidden;
  width: 100%;
}
h1,h2,h3,h4 {
  font-family: var(--font-h);
  font-weight: 600; /* Bolder titles */
  line-height: 1.15;
  color: var(--text-main);
}
a { text-decoration:none; color:inherit; transition: var(--t); }
ul { list-style:none; }
img { display:block; max-width:100%; border-radius: var(--radius); }
button { font-family: var(--font-h); cursor:pointer; }

/* ─── Utility ─── */
.container {
  width:100%;
  max-width:1120px;
  margin:0 auto;
  padding:0 2.5rem;
}
.section { padding: 8rem 0; }
.bg-deep { background: var(--bg-alt); } /* Changed from dark to beige */
.brand { color: var(--brand); }

/* ─── Buttons ─── */
.btn {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.9rem 2.2rem;
  border-radius: var(--radius);
  font-family: var(--font-h);
  font-size:.9rem;
  font-weight:600;
  letter-spacing:.5px;
  border:1px solid transparent;
  transition: var(--t);
  white-space:nowrap;
}
.btn-gold {
  background: var(--brand);
  color: var(--white);
  border-color: var(--brand);
  box-shadow: 0 4px 12px rgba(166,58,18,.25);
}
.btn-gold:hover {
  background: #8b2f0e;
  transform:translateY(-3px);
  box-shadow: 0 12px 24px -8px rgba(166,58,18,.4);
}
.btn-ghost {
  background:transparent;
  color: var(--bg-light);
  border-color: rgba(242,242,242,.4);
}
.btn-ghost:hover {
  background: var(--bg-light);
  color: var(--brand);
  transform:translateY(-3px);
}
.btn-gold-sm, .btn-terra-sm {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.55rem 1.2rem;
  border-radius: var(--radius);
  font-family:var(--font-h);
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.5px;
  border:none;
  cursor:pointer;
  transition: var(--t);
  margin-top:1.5rem;
}
.btn-gold-sm, .btn-terra-sm { background: var(--brand-dim); color: var(--brand); }
.btn-gold-sm:hover, .btn-terra-sm:hover { background: var(--brand);  color: var(--white); }

/* ═══════════════════════════════
   NAVBAR
═══════════════════════════════ */
.navbar {
  position:fixed;
  top:0; left:0; right:0;
  height: var(--nav-h);
  z-index: 900;
  transition: background var(--t), box-shadow var(--t), height var(--t);
  background: rgba(242, 242, 242, 0.05); /* Transparent initially */
}
.navbar.scrolled {
  background: rgba(242, 242, 242, 0.95);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  box-shadow: 0 2px 15px rgba(64,20,10,0.08);
  height: 65px;
}
.nav-inner {
  height:100%;
  max-width:1120px;
  margin:0 auto;
  padding:0 2.5rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.logo {
  display:flex;
  align-items:center;
  gap:10px;
}
.logo-img { height:32px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)); }
.logo-text {
  font-family:var(--font-h);
  font-size:1.25rem;
  font-weight:700;
  letter-spacing:3px;
  color: var(--bg-light); /* White initially against hero */
  transition: color var(--t);
}
.navbar.scrolled .logo-text { color: var(--text-main); }

.nav-links {
  display:flex;
  gap:2.5rem;
}
.nav-link {
  font-size:.85rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:1.5px;
  color: rgba(242, 242, 242, 0.8); /* Light against hero */
  position:relative;
  padding-bottom:2px;
  transition: color var(--t);
}
.navbar.scrolled .nav-link { color: var(--text-muted); }

.nav-link::after {
  content:'';
  position:absolute;
  bottom:-2px; left:0;
  width:0; height:2px;
  background:var(--brand);
  transition: width var(--t);
}
.nav-link:hover, .nav-link.active { color: var(--white); }
.navbar.scrolled .nav-link:hover, .navbar.scrolled .nav-link.active { color: var(--brand); }
.nav-link:hover::after, .nav-link.active::after { width:100%; }

/* hamburger */
.hamburger {
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  padding:4px;
  z-index:910;
}
.bar {
  display:block;
  width:24px; height:2px;
  background:var(--bg-light);
  border-radius:2px;
  transition: transform .35s var(--ease), opacity .35s, background var(--t);
}
.navbar.scrolled .bar { background: var(--text-main); }
.hamburger.open .bar:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.open .bar:nth-child(2) { opacity:0; }
.hamburger.open .bar:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
.hamburger.open .bar { background: var(--text-main); } /* Dark when menu open */

/* ═══════════════════════════════
   HERO
═══════════════════════════════ */
.hero {
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  overflow:hidden;
  z-index:1;
}
.hero-bg {
  position:absolute;
  inset:0;
  z-index:0;
}
.hero-bg-img {
  position: absolute;
  top: 0; left: 0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 2s ease-in-out, transform 8s ease-out;
}
.hero-bg-img.active {
  opacity: 1;
  transform: scale(1);
}
.hero-gradient {
  position:absolute; inset:0;
  /* Dark gradient to ensure white text is readable over the image */
  background: linear-gradient(
    160deg,
    rgba(89,25,11,.7) 0%,
    rgba(64,20,10,.4) 40%,
    rgba(64,20,10,.85) 100%
  );
}
.hero-content {
  position:relative;
  z-index:1;
  max-width:780px;
  padding: calc(var(--nav-h) + 2rem) 2.5rem 4rem;
  margin-left:max(2.5rem, calc(50vw - 560px));
}
.eyebrow {
  font-family:var(--font-h);
  font-size:.85rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:3px;
  color:var(--bg-alt); /* Light beige text */
  margin-bottom:1.5rem;
}
.hero-title {
  font-size:clamp(2.5rem,6vw,4.5rem);
  font-weight:700;
  line-height:1.08;
  margin-bottom:1.5rem;
  color: var(--bg-light); /* White text on hero */
}
.hero-title .gold { color: var(--brand); } /* Orange accent */
.hero-lead {
  font-size:1.15rem;
  color:rgba(242,242,242,0.85);
  max-width:520px;
  margin-bottom:3rem;
}
.hero-actions { display:flex; gap:1rem; flex-wrap:wrap; }

/* ═══════════════════════════════
   REVEAL ANIMATIONS
═══════════════════════════════ */
.reveal, .reveal-right {
  opacity:0;
  transform:translateY(48px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.reveal-right { transform:translateX(48px); }
.reveal.in, .reveal-right.in { opacity:1; transform:none; }

/* ═══════════════════════════════
   SECTION HEADER
═══════════════════════════════ */
.section-head { margin-bottom:5rem; max-width:680px; }
.label {
  display:inline-block;
  font-family:var(--font-h);
  font-size:.75rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:2.5px;
  color:var(--brand);
  margin-bottom:1rem;
}
.section-head h2 { font-size:clamp(2rem,4vw,2.8rem); margin-bottom:1.25rem; }
.section-lead { font-size:1.05rem; color:var(--text-muted); line-height:1.8; }

/* ═══════════════════════════════
   NOSOTROS
═══════════════════════════════ */
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; margin-bottom:5rem; }
.col-text p { color:var(--text-muted); margin-bottom:1.25rem; font-size:1rem; }
.quote {
  border-left:3px solid var(--brand);
  padding:1rem 1.5rem;
  margin:2rem 0;
  font-family:var(--font-h);
  font-size:1.05rem;
  font-weight:500;
  font-style:italic;
  color:var(--text-main);
  background: var(--brand-dim);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.history-note {
  font-size:.9rem !important;
  color: var(--text-muted) !important;
  background: var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.25rem;
  box-shadow: 0 4px 15px rgba(64,20,10,0.05);
}

.observatorio-card {
  position:relative;
  border-radius:12px;
  overflow:hidden;
  min-height:420px;
  display:flex;
  align-items:flex-end;
  box-shadow: 0 10px 30px rgba(64,20,10,0.15);
}
.obs-img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; transition: transform 6s linear;
}
.observatorio-card:hover .obs-img { transform: scale(1.05); }
.obs-overlay {
  position:absolute; inset:0;
  background: linear-gradient(to top, rgba(64,20,10,.95) 0%, transparent 60%);
}
.obs-caption { position:relative; z-index:1; padding:2rem; }
.obs-tag {
  display:inline-block;
  background:var(--brand);
  color:var(--white);
  font-size:.75rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1.5px;
  padding:4px 12px;
  border-radius:4px;
  margin-bottom:.75rem;
}
.obs-caption h3 { font-size:1.4rem; margin-bottom:.5rem; color: var(--white); }
.obs-caption p { font-size:.95rem; color:rgba(242,242,242,.85); }

/* Pillars */
.pillars { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.pillar {
  background: var(--white);
  border:1px solid var(--border);
  border-radius:12px;
  padding:2.5rem 2rem;
  transition: transform var(--t), box-shadow var(--t);
  box-shadow: 0 4px 15px rgba(64,20,10,0.03);
}
.pillar:hover {
  transform:translateY(-6px);
  box-shadow: 0 15px 30px rgba(64,20,10,0.08);
}
.pillar-icon {
  width:52px; height:52px;
  display:flex; align-items:center; justify-content:center;
  border-radius:10px;
  background:var(--brand-dim);
  color:var(--brand);
  margin-bottom:1.5rem;
}
.pillar-icon svg { width:26px; height:26px; }
.pillar h4 { font-size:1.1rem; margin-bottom:.75rem; color: var(--text-main); }
.pillar p { font-size:.95rem; color:var(--text-muted); }

/* ═══════════════════════════════
   ACTIVIDADES
═══════════════════════════════ */
.act-row { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; margin-bottom:7rem; }
.act-row.reverse { direction:rtl; }
.act-row.reverse > * { direction:ltr; }

.act-img-wrap {
  border-radius:12px;
  overflow:hidden;
  aspect-ratio:4/3;
  box-shadow: 0 10px 30px rgba(64,20,10,0.1);
}
.act-img { width:100%; height:100%; object-fit:cover; transition: transform var(--t); }
.act-img-wrap:hover .act-img { transform:scale(1.04); }

.act-num {
  display:block; font-family:var(--font-h); font-size:.85rem;
  font-weight:700; letter-spacing:3px; color:var(--brand); margin-bottom:1rem;
}
.act-title { font-size:clamp(1.6rem,3vw,2.1rem); margin-bottom:1.25rem; }
.act-body p { color:var(--text-muted); margin-bottom:1rem; font-size:1.05rem; }
.act-list { margin:1.25rem 0 0; display:flex; flex-direction:column; gap:.6rem; }
.act-list li { font-size:.95rem; color:var(--text-muted); padding-left:1.5rem; position:relative; font-weight: 500; }
.act-list li::before { content:'✔'; position:absolute; left:0; color:var(--brand); font-size: 0.9rem; }
.inline-quote {
  border-left:3px solid var(--brand); padding:.75rem 1.25rem;
  font-family:var(--font-h); font-size:1.05rem; font-style:italic; font-weight:500;
  color:var(--text-main); background: var(--brand-dim); border-radius: 0 6px 6px 0;
  margin:1.5rem 0;
}

/* ─── Astrofotografía ─── */
.astro-section {
  position:relative; border-radius:16px; overflow:hidden; min-height:480px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  margin-top:2rem; box-shadow: 0 15px 40px rgba(64,20,10,0.2);
}
.astro-bg { position:absolute; inset:0; }
.astro-bg img { width:100%; height:100%; object-fit:cover; }
.astro-overlay {
  position:absolute; inset:0;
  background: radial-gradient(ellipse at center, rgba(64,20,10,.6), rgba(64,20,10,.95));
}
.astro-content { position:relative; z-index:1; padding:4rem 2rem; max-width:640px; }
.badge-soon {
  display:inline-block; background: var(--bg-alt); color:var(--text-main);
  font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:2px;
  padding:6px 16px; border-radius:20px; margin-bottom:1.5rem;
}
.astro-title { font-size:clamp(2.5rem,6vw,4rem); font-weight:700; letter-spacing:-.5px; margin-bottom:1rem; color: var(--bg-light); }
.astro-lead { color:rgba(242,242,242,.85); font-size:1.1rem; line-height:1.8; margin-bottom:2rem; }

/* ═══════════════════════════════
   CONTACTO
═══════════════════════════════ */
#contacto { background: var(--white); }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:6rem; align-items:start; }
.contact-info h2 { font-size:clamp(1.8rem,3vw,2.5rem); margin:1rem 0 1.5rem; }
.contact-info > p { color:var(--text-muted); margin-bottom:2.5rem; font-size:1.05rem; }
.contact-modes { display:flex; flex-direction:column; gap:1.5rem; margin-bottom:2.5rem; }
.mode { display:flex; gap:1.25rem; align-items:flex-start; }
.mode-icon { font-size:1.5rem; flex-shrink:0; margin-top:.1rem; }
.mode strong { font-family:var(--font-h); font-size:1.05rem; font-weight:600; display:block; margin-bottom:.2rem; color: var(--text-main); }
.mode p { font-size:.95rem; color:var(--text-muted); margin:0; }
.contact-loc { display:flex; align-items:center; gap:.5rem; font-size:.95rem; font-weight: 500; color:var(--text-main); }
.contact-loc svg { color:var(--brand); flex-shrink:0; }

/* Form */
.contact-form-wrap {
  background: var(--bg-light);
  padding: 3rem;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(64,20,10,0.05);
  border: 1px solid var(--border);
}
.contact-form { width:100%; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:2rem; }
.field { position:relative; margin-bottom:2.5rem; }
.field input, .field select, .field textarea {
  width:100%; background:transparent; border:none;
  border-bottom:2px solid var(--border);
  color:var(--text-main); font-family:var(--font-b); font-size:1rem; font-weight:500;
  padding:.75rem 0; outline:none; transition: border-color var(--t); border-radius:0;
}
.field select { appearance:none; cursor:pointer; }
.field textarea { resize:none; }
.field input::placeholder, .field select::placeholder, .field textarea::placeholder { color: rgba(89,25,11,.4); font-weight:400; }
.field input:focus, .field select:focus, .field textarea:focus { border-color:var(--brand); }
.field-line {
  position:absolute; bottom:0; left:0; height:2px; width:0; background:var(--brand); transition: width .5s var(--ease);
}
.field:focus-within .field-line { width:100%; }
.field select option { background:var(--white); color:var(--text-main); }

.form-submit { width:100%; justify-content:center; margin-top:.5rem; }
.form-note { margin-top:1rem; font-size:.9rem; font-weight: 500; min-height:1.2em; transition: color var(--t); }
.form-note.success { color: #166534; }
.form-note.error   { color: #991b1b; }

/* ═══════════════════════════════
   FOOTER
═══════════════════════════════ */
.footer {
  border-top:1px solid var(--border);
  padding:4rem 0;
  background:var(--deep);
  color: var(--white);
}
.footer-inner { display:grid; grid-template-columns:1fr auto 1fr; gap:2rem; align-items:center; }
.footer-brand { display:flex; gap:1rem; align-items:center; }
.footer-logo { height:45px; filter: brightness(0) invert(1) opacity(.8); }
.footer-name { font-family:var(--font-h); font-size:1rem; font-weight:600; color: var(--white); }
.footer-tagline { font-size:.85rem; color:rgba(242,242,242,.7); }
.footer-nav { display:flex; gap:2rem; }
.footer-nav a { font-size:.85rem; font-weight:600; text-transform:uppercase; letter-spacing:1px; color:rgba(242,242,242,.7); }
.footer-nav a:hover { color:var(--bg-alt); }
.footer-copy { text-align:right; font-size:.85rem; color:rgba(242,242,242,.5); }

/* ═══════════════════════════════
   RESPONSIVE
═══════════════════════════════ */
@media (max-width:1024px) {
  .two-col, .act-row, .contact-grid { grid-template-columns:1fr; gap:3rem; }
  .act-row.reverse { direction:ltr; }
  .pillars { grid-template-columns:1fr 1fr; }
  .footer-inner { grid-template-columns:1fr; text-align:center; }
  .footer-brand, .footer-nav { justify-content:center; }
  .footer-copy { text-align:center; }
}

@media (max-width:768px) {
  .section { padding:6rem 0; }
  .container { padding:0 3rem; }
  .nav-inner  { padding:0 3rem; }

  /* mobile nav */
  .nav-links {
    position:fixed; inset:0;
    background:rgba(242,242,242,.98); backdrop-filter:blur(20px);
    flex-direction:column; align-items:center; justify-content:center; gap:2.5rem;
    transform:translateX(100%); transition: transform .45s var(--ease), visibility .45s; z-index:899;
    visibility: hidden;
  }
  .nav-links.open { transform:translateX(0); visibility: visible; }
  .nav-link { font-size:1.1rem; color: var(--text-main); }
  .hamburger { display:flex; }
  .bar { background: var(--bg-light); } /* White over hero */
  .navbar.scrolled .bar { background: var(--text-main); } /* Dark when scrolled */

  .pillars { grid-template-columns:1fr; }
  .form-row { grid-template-columns:1fr; }
  .hero-content { margin-left:0; padding: calc(var(--nav-h) + 2rem) 3rem 4rem; }
  .hero-title { font-size:clamp(1.8rem, 8vw, 2.5rem); }
  .hero-actions { flex-direction:column; align-items:flex-start; gap:0.8rem; margin-top: 1rem; }
  .btn { padding: .7rem 1.4rem; font-size: .8rem; }
  .act-img-wrap { aspect-ratio:16/9; }

  .astro-section { min-height:340px; }
  .astro-title { font-size:2.2rem; }
  .contact-form-wrap { padding: 2rem 1.5rem; }
}