/* ==========================================================
   MONUMENTAL OOH — PREMIUM ENHANCED THEME
   Palette Refinada:
   #000000 (Black) | #b39a79 (Gold) | #332519 (Deep Brown)
   #856048 (Copper) | #efe7da (Ivory)
   Typography: Cormorant Garamond (display) + DM Sans (text)
   ========================================================== */

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

:root{
  --bg:#000;
  --ink:#efe7da;
  --muted: rgba(239,231,218,.85);
  --gold:#b39a79;
  --gold-2:#d4c2a0;
  --brown:#332519;
  --copper:#856048;
  --stroke: rgba(179,154,121,.28);
  --stroke-2: rgba(239,231,218,.14);
  --card: rgba(51,37,25,.65);
  --card-2: rgba(0,0,0,.55);
  --shadow: 0 28px 90px rgba(0,0,0,.65);
  --shadow-soft: 0 20px 65px rgba(0,0,0,.42);
  --radius: 20px;
  --radius-lg: 28px;
  --container: 1200px;
  --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{height:100%}
body{
  margin:0;
  color:var(--ink);
  font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing:.3px;
  font-weight:400;
  background:
    radial-gradient(1400px 700px at 20% -10%, rgba(179,154,121,.28), transparent 65%),
    radial-gradient(1000px 550px at 90% 18%, rgba(133,96,72,.22), transparent 62%),
    radial-gradient(1100px 800px at 35% 125%, rgba(179,154,121,.16), transparent 68%),
    linear-gradient(180deg, #000 0%, #0a0705 48%, #000 100%);
  overflow-x:hidden;
}

/* Animación de entrada suave */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* subtle film grain mejorado */
.noise{
  position:fixed; inset:0;
  pointer-events:none;
  opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='280' height='280' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
  animation: fadeIn 0.8s ease-out;
}

/* layout */
.container{
  width:min(var(--container), calc(100% - 52px)); 
  margin-inline:auto;
  animation: fadeInUp 0.6s ease-out;
}
.section{
  padding: 88px 0;
  animation: fadeInUp 0.7s ease-out;
}
.section.tight{padding: 60px 0}
.grid{display:grid; gap:26px}
@media (min-width: 920px){
  .grid.cols-2{grid-template-columns: 1.15fr .85fr}
  .grid.cols-3{grid-template-columns: repeat(3, 1fr)}
}

/* topbar mejorado */
.topbar{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(18px) saturate(1.2);
  background: linear-gradient(180deg, rgba(0,0,0,.82), rgba(0,0,0,.42));
  border-bottom: 1px solid var(--stroke-2);
  transition: var(--transition-fast);
  animation: fadeIn 0.5s ease-out;
}
.topbar:hover{
  background: linear-gradient(180deg, rgba(0,0,0,.88), rgba(0,0,0,.48));
  border-bottom-color: var(--stroke);
}
.nav{
  display:flex; 
  align-items:center; 
  justify-content:space-between; 
  gap:18px; 
  padding:18px 0;
}
.brand{
  display:flex; 
  align-items:center; 
  gap:14px; 
  text-decoration:none;
  transition: var(--transition-fast);
}
.brand:hover{transform: translateX(3px)}
.brand img{
  height:40px; 
  width:auto; 
  border-radius:11px;
  transition: var(--transition-fast);
  box-shadow: 0 4px 12px rgba(179,154,121,.25);
}
.brand:hover img{
  box-shadow: 0 6px 18px rgba(179,154,121,.40);
  transform: scale(1.05);
}
.navlinks{display:none; gap:22px; align-items:center}
.navlinks a{
  color: var(--muted);
  text-decoration:none;
  font-size: 14px;
  font-weight: 500;
  letter-spacing:.4px;
  text-transform:uppercase;
  transition: var(--transition-fast);
  position:relative;
}
.navlinks a:after{
  content:"";
  position:absolute;
  bottom:-4px;
  left:50%;
  transform: translateX(-50%) scaleX(0);
  width:100%;
  height:2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transition: var(--transition-fast);
}
.navlinks a:hover{color: var(--ink); transform: translateY(-2px)}
.navlinks a:hover:after{transform: translateX(-50%) scaleX(1)}
.cta{display:none; gap:12px; align-items:center}
.hamburger{
  appearance:none; 
  border:1px solid var(--stroke-2);
  background: rgba(0,0,0,.45);
  color: var(--ink);
  padding:11px 14px;
  border-radius: 15px;
  cursor:pointer;
  transition: var(--transition-fast);
}
.hamburger:hover{
  border-color: var(--stroke);
  background: rgba(0,0,0,.60);
  transform: scale(1.05);
}
@media (min-width: 980px){
  .navlinks{display:flex}
  .cta{display:flex}
  .hamburger{display:none}
}

/* mobile drawer mejorado */
.mobile{
  display:none;
  border-top:1px solid var(--stroke-2);
  padding: 16px 0 20px;
  animation: fadeInUp 0.3s ease-out;
}
.mobile a{
  display:block;
  padding: 14px 0;
  text-decoration:none;
  color: var(--ink);
  border-bottom: 1px solid rgba(239,231,218,.08);
  transition: var(--transition-fast);
}
.mobile a:hover{
  padding-left: 8px;
  color: var(--gold-2);
}
.mobile a span{color: var(--muted)}
.mobile.open{display:block}

/* tipografía mejorada */
h1,h2,h3{
  font-family: "Cormorant Garamond", Georgia, serif;
  letter-spacing: .3px;
  margin:0 0 12px;
  font-weight:600;
  animation: fadeInUp 0.6s ease-out;
}
h1{
  font-size: clamp(48px, 5.8vw, 86px); 
  line-height: .96;
  background: linear-gradient(135deg, var(--ink) 0%, var(--gold-2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight:700;
}
h2{
  font-size: clamp(30px, 3vw, 46px); 
  line-height: 1.08;
  color: var(--ink);
}
h3{
  font-size: 25px; 
  line-height:1.12;
  color: var(--ink);
}
p{
  margin: 12px 0; 
  color: var(--muted); 
  line-height: 1.85; 
  font-weight: 400;
  font-size: 15.5px;
}
.kicker{
  display:inline-flex; 
  align-items:center; 
  gap:12px;
  font-size: 13px;
  letter-spacing: .45em;
  text-transform: uppercase;
  color: rgba(239,231,218,.78);
  animation: fadeIn 0.8s ease-out;
}
.kicker:before{
  content:"";
  width:52px; 
  height:1.5px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity:.95;
  animation: shimmer 3s infinite linear;
  background-size: 200% 100%;
}

/* hero mejorado */
.hero{
  padding: 96px 0 72px;
  animation: fadeInUp 0.7s ease-out;
}
.hero-wrap{
  position:relative;
  border-radius: var(--radius-lg);
  overflow:hidden;
  border: 1px solid rgba(179,154,121,.25);
  box-shadow: var(--shadow);
  background:
    radial-gradient(1000px 550px at 28% 18%, rgba(179,154,121,.28), transparent 62%),
    linear-gradient(135deg, rgba(51,37,25,.65), rgba(0,0,0,.60));
  transition: var(--transition);
}
.hero-wrap:hover{
  border-color: rgba(179,154,121,.35);
  box-shadow: 0 32px 100px rgba(0,0,0,.70);
  transform: translateY(-3px);
}
.hero-media{
  position:absolute; inset:0;
  background-size: cover;
  background-position:center;
  filter: saturate(1.08) contrast(1.12);
  opacity:.40;
  transition: var(--transition);
}
.hero-wrap:hover .hero-media{
  opacity:.48;
  transform: scale(1.02);
}
.hero-overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(900px 480px at 32% 0%, rgba(179,154,121,.35), transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.80));
}
.hero-inner{
  position:relative;
  padding: 72px 32px;
  animation: fadeInUp 0.8s ease-out 0.2s backwards;
}
@media (min-width: 920px){ .hero-inner{padding: 96px 80px} }
.hero p{max-width: 66ch}
.hero-actions{
  display:flex; 
  flex-wrap:wrap; 
  gap:14px; 
  margin-top: 22px;
  animation: fadeInUp 0.9s ease-out 0.3s backwards;
}

.badges{
  display:flex; 
  flex-wrap:wrap; 
  gap:12px; 
  margin: 22px 0 0;
  animation: fadeInUp 1s ease-out 0.4s backwards;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding: 11px 14px;
  border-radius: 999px;
  border: 1px solid rgba(239,231,218,.16);
  background: rgba(0,0,0,.45);
  font-size: 13.5px;
  color: rgba(239,231,218,.90);
  transition: var(--transition-fast);
}
.badge:hover{
  border-color: rgba(179,154,121,.35);
  background: rgba(0,0,0,.55);
  transform: translateY(-2px);
}
.badge strong{color: var(--ink); font-weight:600}

/* buttons mejorados */
.btn{
  display:inline-flex; 
  align-items:center; 
  justify-content:center; 
  gap:11px;
  padding: 13px 16px;
  border-radius: 15px;
  border: 1px solid rgba(239,231,218,.16);
  background: rgba(0,0,0,.45);
  color: var(--ink);
  text-decoration:none;
  font-weight:600;
  font-size: 14px;
  transition: var(--transition-fast);
  position:relative;
  overflow:hidden;
}
.btn:before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(135deg, rgba(179,154,121,.15), transparent);
  opacity:0;
  transition: var(--transition-fast);
}
.btn:hover{
  border-color: var(--stroke); 
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(179,154,121,.25);
}
.btn:hover:before{opacity:1}
.btn.primary{
  background: linear-gradient(135deg, rgba(179,154,121,.98), rgba(133,96,72,.95));
  border-color: rgba(179,154,121,.50);
  color: #0f0804;
  font-weight:600;
}
.btn.primary:hover{
  filter: contrast(1.05) brightness(1.05);
  box-shadow: 0 10px 30px rgba(179,154,121,.40);
}
.btn.small{padding: 11px 13px; font-size: 13.5px}

/* cards mejoradas */
.card{
  border-radius: var(--radius);
  border: 1px solid rgba(239,231,218,.14);
  background: linear-gradient(180deg, rgba(51,37,25,.65), rgba(0,0,0,.50));
  box-shadow: var(--shadow-soft);
  overflow:hidden;
  transition: var(--transition);
  animation: scaleIn 0.5s ease-out;
}
.card:hover{
  border-color: rgba(179,154,121,.28);
  box-shadow: 0 24px 75px rgba(0,0,0,.55);
  transform: translateY(-4px);
}
.card .pad{padding: 26px}
.card h3{
  margin-bottom:8px;
  transition: var(--transition-fast);
}
.card:hover h3{color: var(--gold-2)}
.card .meta{
  color: rgba(239,231,218,.72); 
  font-size: 13.5px; 
  letter-spacing:.14em; 
  text-transform:uppercase;
}
.card p{margin-top: 12px; max-width: 74ch}
.card .actions{
  display:flex; 
  flex-wrap:wrap; 
  gap:11px; 
  margin-top: 16px;
}

.card-media{
  height: 260px;
  background-size: cover;
  background-position:center;
  filter: saturate(1.10) contrast(1.12);
  position:relative;
  transition: var(--transition);
}
.card:hover .card-media{
  transform: scale(1.05);
  filter: saturate(1.15) contrast(1.15);
}
.card-media:after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.85));
  transition: var(--transition-fast);
}
.card:hover .card-media:after{
  background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.80));
}
.card-media .label{
  position:absolute; left:20px; bottom:18px; z-index:2;
  display:inline-flex; gap:9px; align-items:center;
  padding: 11px 14px;
  border-radius: 999px;
  border: 1px solid rgba(239,231,218,.18);
  background: rgba(0,0,0,.48);
  backdrop-filter: blur(12px);
  font-size: 13px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color: rgba(239,231,218,.92);
  transition: var(--transition-fast);
}
.card:hover .card-media .label{
  background: rgba(0,0,0,.60);
  border-color: rgba(179,154,121,.30);
}

/* contrast blocks mejorados */
.panel{
  border-radius: var(--radius);
  padding: 26px;
  border: 1px solid rgba(179,154,121,.25);
  background: linear-gradient(135deg, rgba(179,154,121,.14), rgba(0,0,0,.42));
  transition: var(--transition);
}
.panel:hover{
  border-color: rgba(179,154,121,.35);
  background: linear-gradient(135deg, rgba(179,154,121,.18), rgba(0,0,0,.48));
}

/* forms mejorados */
input, textarea, select{
  width:100%;
  padding: 13px 16px;
  border-radius: 15px;
  border: 1px solid rgba(239,231,218,.16);
  background: rgba(0,0,0,.48);
  color: var(--ink);
  outline:none;
  font: inherit;
  transition: var(--transition-fast);
}
input:focus, textarea:focus, select:focus{
  border-color: rgba(179,154,121,.60);
  background: rgba(0,0,0,.55);
  box-shadow: 0 0 0 4px rgba(179,154,121,.12);
}
label{
  display:block; 
  margin: 12px 0 9px; 
  color: rgba(239,231,218,.88); 
  font-size: 13.5px; 
  letter-spacing:.08em; 
  text-transform:uppercase;
  font-weight:500;
}

/* footer mejorado */
.footer{
  padding: 52px 0;
  border-top: 1px solid rgba(239,231,218,.12);
  background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.45));
  animation: fadeIn 0.6s ease-out;
}
.footer .row{
  display:flex; 
  flex-wrap:wrap; 
  gap:20px; 
  align-items:center; 
  justify-content:space-between
}
.footer small{color: rgba(239,231,218,.65)}
.footer a{
  color: rgba(239,231,218,.78); 
  text-decoration:none;
  transition: var(--transition-fast);
}
.footer a:hover{
  color: var(--ink);
  transform: translateX(2px);
}

/* lists mejoradas */
.clean-list{
  margin: 0; 
  padding-left: 20px; 
  color: var(--muted); 
  line-height: 1.9;
}
.clean-list li{
  margin: 8px 0;
  transition: var(--transition-fast);
}
.clean-list li:hover{
  color: var(--ink);
  transform: translateX(4px);
}
.hr{
  height:1px; 
  background: linear-gradient(90deg, transparent, rgba(239,231,218,.12), transparent);
  margin: 22px 0;
}

/* utility */
.m0{margin:0}
.mt8{margin-top:8px}
.mt14{margin-top:14px}
.mt20{margin-top:20px}
.max{max-width: 70ch}

/* Animación de scroll suave */
@media (prefers-reduced-motion: no-preference) {
  .section > *,
  .grid > * {
    animation: fadeInUp 0.6s ease-out;
  }
}