/* ============================================================
   MIRADOR DEL ARIARI — base.css
   Paleta: Azul Medianoche · Cobre · Marfil · Pizarra
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Instrument+Sans:wght@300;400;500;600&family=Bebas+Neue&display=swap');

:root {
  --noche:     #070c14;
  --noche2:    #0b1322;
  --noche3:    #0f1c30;
  --azul:      #0e2442;
  --azul2:     #163560;
  --azul3:     #1d4c87;
  --cobre:     #b87333;
  --cobre2:    #d18b42;
  --cobre3:    #e5a558;
  --marfil:    #f4efe6;
  --marfil2:   #e6dfcf;
  --polvo:     #c2b49a;
  --pizarra:   #8fa3bb;

  --borde:     rgba(184,115,51,.12);
  --borde2:    rgba(184,115,51,.28);
  --borde3:    rgba(184,115,51,.55);
  --glass:     rgba(7,12,20,.78);
  --sup:       rgba(255,255,255,.025);
  --sup2:      rgba(255,255,255,.05);

  --serif:     'DM Serif Display', Georgia, serif;
  --sans:      'Instrument Sans', system-ui, sans-serif;
  --display:   'Bebas Neue', sans-serif;

  --sec: 130px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background: var(--noche);
  color: var(--marfil);
  font-family: var(--sans);
  font-weight: 300;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display:block; width:100%; }
a { color:inherit; text-decoration:none; }
button { font-family:var(--sans); cursor:pointer; border:none; background:none; }
ul,ol { list-style:none; }

/* Grain */
body::after {
  content:'';
  position:fixed; inset:0; z-index:998; pointer-events:none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  opacity:.45;
}

/* Scrollbar */
::-webkit-scrollbar { width:3px; }
::-webkit-scrollbar-track { background:var(--noche); }
::-webkit-scrollbar-thumb { background:var(--cobre); }

/* Layout */
.container { max-width:1280px; margin:0 auto; padding:0 64px; }
.section    { padding:var(--sec) 0; position:relative; z-index:2; }
.sec-dark   { background:var(--noche2); }

/* Eyebrow */
.eyebrow {
  display:inline-flex; align-items:center; gap:14px;
  font-family:var(--sans); font-size:10px; font-weight:600;
  letter-spacing:5px; text-transform:uppercase; color:var(--cobre2);
  margin-bottom:18px;
}
.eyebrow::before {
  content:''; display:block;
  width:36px; height:1px;
  background:linear-gradient(to right, var(--cobre), transparent);
}

/* Títulos */
.titulo {
  font-family:var(--serif);
  font-size:clamp(36px,4.2vw,60px);
  font-weight:400; line-height:1.06; letter-spacing:-.5px;
}
.titulo em { font-style:italic; color:var(--cobre2); }

/* Botones */
.btn {
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--sans); font-weight:500;
  font-size:11px; letter-spacing:2.5px; text-transform:uppercase;
  padding:15px 38px; cursor:pointer;
  position:relative; overflow:hidden;
  transition:all .4s cubic-bezier(.16,1,.3,1);
}
.btn-cobre {
  background:var(--cobre); color:var(--noche);
  border:1px solid var(--cobre);
}
.btn-cobre::after {
  content:''; position:absolute; inset:0;
  background:var(--cobre2);
  transform:translateX(-101%);
  transition:transform .4s cubic-bezier(.16,1,.3,1);
}
.btn-cobre:hover::after { transform:translateX(0); }
.btn-cobre:hover { box-shadow:0 8px 40px rgba(184,115,51,.45); }
.btn-cobre > * { position:relative; z-index:1; }

.btn-ghost {
  background:transparent; color:var(--marfil2);
  border:1px solid rgba(244,239,230,.18);
}
.btn-ghost:hover { border-color:var(--borde3); color:var(--cobre2); }

/* HR */
.hr { width:100%; height:1px; background:linear-gradient(to right,transparent,var(--borde2),transparent); }

/* Reveal */
[data-v] {
  opacity:0;
  transition:
    opacity .85s cubic-bezier(.16,1,.3,1),
    transform .85s cubic-bezier(.16,1,.3,1),
    clip-path .85s cubic-bezier(.16,1,.3,1);
}
[data-v="up"]    { transform:translateY(48px); }
[data-v="left"]  { transform:translateX(-48px); }
[data-v="right"] { transform:translateX(48px); }
[data-v="scale"] { transform:scale(.9); }
[data-v="fade"]  { }
[data-v].shown   { opacity:1; transform:none; }

/* Responsive */
@media(max-width:1024px){ .container{ padding:0 36px; } :root{ --sec:90px; } }
@media(max-width:640px) { .container{ padding:0 20px; } :root{ --sec:70px; } }