*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
:root {
  --black:#0a0a0a; --white:#f5f0e8; --accent:#c8a96e; --muted:#3a3a3a; --border:#2a2a2a;
  --font-display:'Bebas Neue',sans-serif;
  --font-serif:'Cormorant Garamond',serif;
  --font-mono:'Space Mono',monospace;
}
html { scroll-behavior:smooth; }
body { background:var(--black); color:var(--white); font-family:var(--font-serif); overflow-x:hidden; }

/* NAV */
nav { position:fixed; top:0; left:0; right:0; z-index:100; display:flex; justify-content:space-between; align-items:center; padding:1.5rem 3rem; mix-blend-mode:difference; transition:background 0.3s; }
.nav-logo { font-family:var(--font-display); font-size:1.6rem; letter-spacing:0.3em; color:var(--white); text-decoration:none; }
.nav-links { display:flex; gap:2.5rem; list-style:none; }
.nav-links a { font-family:var(--font-mono); font-size:0.65rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--white); text-decoration:none; opacity:0.7; transition:opacity 0.2s; }
.nav-links a:hover, .nav-links a.active { opacity:1; color:var(--accent); }
.nav-toggle { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:4px; }
.nav-toggle span { display:block; width:24px; height:1px; background:var(--white); }

/* HERO */
.hero { height:100vh; display:grid; grid-template-columns:1fr 1fr; overflow:hidden; }
.hero-left { display:flex; flex-direction:column; justify-content:flex-end; padding:6rem 3rem 4rem; position:relative; z-index:2; }
.hero-eyebrow { font-family:var(--font-mono); font-size:0.6rem; letter-spacing:0.4em; text-transform:uppercase; color:var(--accent); margin-bottom:1.5rem; opacity:0; animation:fadeUp 1s ease 0.3s forwards; }
.hero-title { font-family:var(--font-display); font-size:clamp(5rem,10vw,9rem); line-height:0.9; opacity:0; animation:fadeUp 1.2s ease 0.5s forwards; }
.hero-title em { font-style:italic; font-family:var(--font-serif); font-size:0.7em; color:var(--accent); display:block; }
.hero-sub { margin-top:2rem; font-size:1.1rem; font-style:italic; line-height:1.6; color:rgba(245,240,232,0.6); max-width:320px; opacity:0; animation:fadeUp 1s ease 0.8s forwards; }
.hero-cta { margin-top:3rem; display:flex; gap:1.5rem; align-items:center; opacity:0; animation:fadeUp 1s ease 1s forwards; }
.hero-right { position:relative; overflow:hidden; }
.hero-image-stack { position:absolute; inset:0; }
.hero-img { position:absolute; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.5s ease; }
.hero-img.active { opacity:1; }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(to right, var(--black) 0%, transparent 30%); z-index:1; }

/* BUTTONS */
.btn-primary { font-family:var(--font-mono); font-size:0.65rem; letter-spacing:0.2em; text-transform:uppercase; padding:1rem 2rem; background:var(--accent); color:var(--black); text-decoration:none; display:inline-block; border:none; cursor:pointer; transition:background 0.2s; }
.btn-primary:hover { background:var(--white); }
.btn-ghost { font-family:var(--font-mono); font-size:0.65rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--white); text-decoration:none; opacity:0.6; transition:opacity 0.2s; display:inline-flex; align-items:center; gap:0.5rem; }
.btn-ghost::after { content:'→'; font-family:sans-serif; }
.btn-ghost:hover { opacity:1; }

/* CENEFA / MARQUEE */
.marquee-section { border-top:1px solid var(--border); border-bottom:1px solid var(--border); overflow:hidden; padding:1.2rem 0; }
.marquee-track { display:flex; gap:3rem; animation:marquee 35s linear infinite; width:max-content; }
.marquee-item { font-family:var(--font-display); font-size:1rem; letter-spacing:0.5em; color:rgba(245,240,232,0.55); white-space:nowrap; display:flex; align-items:center; gap:2.5rem; }
.marquee-dot { color:var(--accent); font-size:1.2rem; }

/* SECTION HEADER */
.section-header { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:3rem; padding-bottom:1.5rem; border-bottom:1px solid var(--border); }
.section-label { font-family:var(--font-mono); font-size:0.6rem; letter-spacing:0.4em; text-transform:uppercase; color:var(--accent); margin-bottom:0.5rem; }
.section-title { font-family:var(--font-serif); font-size:2.5rem; font-weight:300; font-style:italic; }

/* ABOUT US / Quiénes Somos (institutional) */
.aboutus-section { padding:6rem 3rem; border-top:1px solid var(--border); }
.aboutus-section .section-header { margin-bottom:4rem; }
.aboutus-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
.aboutus-img { aspect-ratio:4/5; overflow:hidden; }
.aboutus-img img { width:100%; height:100%; object-fit:cover; filter:grayscale(20%); transition:filter 0.6s ease, transform 0.8s ease; }
.aboutus-section:hover .aboutus-img img { filter:grayscale(0%); }
.aboutus-text { display:flex; flex-direction:column; max-width:520px; }
.about-body { font-size:1.1rem; line-height:1.75; color:rgba(245,240,232,0.7); }
.about-body em { font-style:italic; color:var(--accent); }
.aboutus-text .about-body + .about-body { margin-top:1.5rem; }
.big-quote { font-family:var(--font-serif); font-weight:300; font-style:italic; }
.big-quote span { color:var(--accent); }
.aboutus-quote { font-size:clamp(1.5rem,2.4vw,2.2rem); line-height:1.25; margin-top:3rem; padding-top:2.5rem; border-top:1px solid var(--border); }
.attr { margin-top:1rem; font-family:var(--font-mono); font-size:0.6rem; letter-spacing:0.3em; text-transform:uppercase; color:rgba(245,240,232,0.35); }

/* GUAPO ART GALLERY (visual exploration) */
.gallery-feature-section { padding:6rem 3rem; border-top:1px solid var(--border); }
.gallery-feature-section .section-header { margin-bottom:4rem; }
.gallery-feature { display:grid; grid-template-columns:1.2fr 1fr; gap:4rem; align-items:center; }
.gallery-feature-img { aspect-ratio:4/3; overflow:hidden; }
.gallery-feature-img img { width:100%; height:100%; object-fit:cover; filter:grayscale(15%); transition:filter 0.6s ease, transform 0.8s ease; }
.gallery-feature-section:hover .gallery-feature-img img { filter:grayscale(0%); transform:scale(1.02); }
.gallery-feature-content { display:flex; flex-direction:column; max-width:440px; }
.about-title { font-family:var(--font-display); font-size:1.6rem; letter-spacing:0.2em; color:var(--white); margin-bottom:1.5rem; }
.gallery-feature-cta { margin-top:2.5rem; display:flex; gap:1.5rem; align-items:center; flex-wrap:wrap; }

/* CONTACT */
.contact-section { padding:6rem 3rem; border-top:1px solid var(--border); }
.contact-section .section-header { margin-bottom:4rem; }
.contact-grid { display:grid; grid-template-columns:1fr 1.4fr; gap:5rem; align-items:start; }
.contact-aside { display:flex; flex-direction:column; gap:2rem; }
.contact-lead { font-family:var(--font-serif); font-size:1.15rem; line-height:1.6; font-style:italic; color:rgba(245,240,232,0.7); max-width:380px; }
.contact-wa { display:flex; flex-direction:column; gap:0.4rem; padding:1.8rem 2rem; border:1px solid var(--border); text-decoration:none; transition:background 0.2s, border-color 0.2s; }
.contact-wa:hover { background:rgba(200,169,110,0.05); border-color:var(--accent); }
.contact-wa-label { font-family:var(--font-mono); font-size:0.65rem; letter-spacing:0.3em; text-transform:uppercase; color:var(--accent); }
.contact-wa-num { font-family:var(--font-serif); font-size:1.4rem; font-style:italic; font-weight:300; color:var(--white); }
.contact-form { display:flex; flex-direction:column; gap:1.5rem; max-width:540px; }
.contact-field { display:flex; flex-direction:column; gap:0.6rem; }
.contact-field > span { font-family:var(--font-mono); font-size:0.6rem; letter-spacing:0.3em; text-transform:uppercase; color:var(--accent); }
.contact-field input, .contact-field textarea { font-family:var(--font-serif); font-size:1.05rem; color:var(--white); background:transparent; border:none; border-bottom:1px solid var(--border); padding:0.6rem 0; outline:none; transition:border-color 0.2s; resize:vertical; }
.contact-field input:focus, .contact-field textarea:focus { border-bottom-color:var(--accent); }
.contact-field textarea { min-height:120px; font-family:var(--font-serif); }
.contact-submit { margin-top:1rem; align-self:flex-start; }
.contact-status { font-family:var(--font-mono); font-size:0.65rem; letter-spacing:0.2em; text-transform:uppercase; color:rgba(245,240,232,0.55); min-height:1.2em; }
.contact-status.is-error { color:#d97b6c; }
.contact-status.is-ok { color:var(--accent); }

/* FOOTER */
footer { padding:4rem 3rem 2rem; border-top:1px solid var(--border); display:grid; grid-template-columns:1fr 1fr 1fr; gap:3rem; }
.footer-cta { grid-column:1/-1; display:flex; justify-content:space-between; align-items:center; gap:3rem; padding:2.5rem 3rem; margin:-4rem -3rem 3rem; background:rgba(200,169,110,0.05); border-bottom:1px solid var(--border); }
.footer-cta-text { max-width:640px; }
.footer-cta-title { font-family:var(--font-serif); font-size:clamp(1.6rem,2.6vw,2.4rem); font-weight:300; font-style:italic; line-height:1.2; margin-top:0.6rem; color:var(--white); }
.footer-cta-title em { color:var(--accent); font-style:italic; }
.footer-cta-body { font-family:var(--font-serif); font-size:1rem; line-height:1.5; color:rgba(245,240,232,0.55); margin-top:0.8rem; }
.footer-cta-btn { flex-shrink:0; }
.footer-brand { display:flex; flex-direction:column; }
.footer-logo { font-family:var(--font-display); font-size:3rem; letter-spacing:0.2em; line-height:1; }
.footer-tagline { font-family:var(--font-serif); font-style:italic; font-size:0.9rem; color:rgba(245,240,232,0.4); margin-top:0.5rem; }
.footer-col h4 { font-family:var(--font-mono); font-size:0.6rem; letter-spacing:0.3em; text-transform:uppercase; color:var(--accent); margin-bottom:1.5rem; }
.footer-col ul { list-style:none; }
.footer-col ul li { margin-bottom:0.8rem; }
.footer-col ul a { font-family:var(--font-serif); font-size:1rem; color:rgba(245,240,232,0.5); text-decoration:none; transition:color 0.2s; }
.footer-col ul a:hover { color:var(--white); }
.footer-bottom { grid-column:1/-1; padding-top:2rem; border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; }
.footer-copy { font-family:var(--font-mono); font-size:0.55rem; letter-spacing:0.2em; color:rgba(245,240,232,0.2); }

/* ANIMATIONS */
@keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.fade-in { opacity:0; transform:translateY(30px); transition:opacity 0.8s ease, transform 0.8s ease; }
.fade-in.visible { opacity:1; transform:translateY(0); }

/* RESPONSIVE */
@media(max-width:900px){
  /* TYPOGRAPHY BOOST FOR MOBILE */
  .section-label,.hero-eyebrow,.footer-col h4,.footer-copy,.btn-primary,.btn-ghost,.marquee-item,.contact-wa-label,.contact-field > span,.contact-status{ font-size:0.8rem; letter-spacing:0.25em; }
  .hero-sub,.about-body,.footer-col ul a,.footer-tagline,.contact-lead{ font-size:1.3rem; line-height:1.7; }
  .section-title{ font-size:2.2rem; }
  .about-title{ font-size:1.8rem; letter-spacing:0.15em; }
  .footer-cta-title{ font-size:1.8rem; }
  .footer-cta-body{ font-size:1.2rem; line-height:1.6; }
  .contact-field input,.contact-field textarea{ font-size:1.15rem; }
  .contact-wa-num{ font-size:1.5rem; }

  .hero{grid-template-columns:1fr}
  .hero-right{position:absolute;inset:0;z-index:0}
  .hero-left{position:relative;z-index:1;padding:7rem 1.5rem 3rem;background:linear-gradient(to top,rgba(10,10,10,0.95) 60%,transparent);justify-content:flex-end;min-height:100vh}
  nav{padding:1.2rem 1.5rem}
  .nav-toggle{display:flex}
  .nav-links{display:none;position:fixed;inset:0;background:var(--black);flex-direction:column;align-items:center;justify-content:center;gap:3rem;z-index:99}
  .nav-links.open{display:flex}
  .nav-links a{font-size:1.3rem;letter-spacing:0.2em}
  .aboutus-section,.gallery-feature-section,.contact-section{padding:4rem 1.5rem}
  .aboutus-grid,.gallery-feature,.contact-grid{grid-template-columns:1fr;gap:2.5rem}
  .aboutus-img{aspect-ratio:4/3}
  .aboutus-text,.gallery-feature-content,.contact-form{max-width:none}
  footer{grid-template-columns:1fr;gap:2rem;padding:3rem 1.5rem 1.5rem}
  .footer-cta { flex-direction:column; align-items:flex-start; gap:1.5rem; padding:2rem 1.5rem; margin:-3rem -1.5rem 2rem; }
  .footer-bottom{flex-direction:column;gap:1rem;text-align:center}
}
@media(max-width:480px){
  .hero-title{font-size:5rem}
  .hero-sub,.about-body,.footer-col ul a,.footer-tagline,.contact-lead{ font-size:1.2rem; line-height:1.7; }
  .footer-cta-body{ font-size:1.15rem; }
}