/* ============================================================
   BASE: tokens, tipografia, piso de accesibilidad
   Paleta oficial de MC Inmobiliaria. Nada de violeta en
   ninguna parte, ni siquiera como color intermedio.
   ============================================================ */
:root{
  --fondo:#ffffff;
  --superficie:#f4f3f0;
  --superficie-alta:#ffffff;
  --acento:#1e77bb;
  --acento-claro:#2eaae0;
  --acento-tenue:rgba(30,119,187,.14);
  --acento-oscuro:#0f1f33;
  --beige:#7a6f5e;
  --texto:#1a1a1a;
  --texto-2:#55534d;
  --linea:rgba(0,0,0,.12);
  --linea-fuerte:rgba(0,0,0,.26);

  --titulos:'Syne',ui-sans-serif,system-ui,sans-serif;
  --cuerpo:'Hanken Grotesk',ui-sans-serif,system-ui,sans-serif;

  --suave:cubic-bezier(.22,.61,.36,1);
  --suave-2:cubic-bezier(.4,0,.2,1);

  --sombra-texto:0 1px 2px rgba(0,0,0,.95),0 3px 12px rgba(0,0,0,.78),0 10px 44px rgba(0,0,0,.8);

  --margen:clamp(20px,5vw,72px);
  --ancho-max:1280px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--fondo);
  color:var(--texto);
  font-family:var(--cuerpo);
  font-weight:400;
  font-size:clamp(16px,1.05vw,18px);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  opacity:0;
  transition:opacity .9s var(--suave);
}
body.listo{opacity:1}

h1,h2,h3,h4{font-family:var(--titulos);font-weight:700;line-height:1.02;
  letter-spacing:-.02em;margin:0}
p{margin:0}
a{color:inherit}
img{max-width:100%;display:block}
button{font-family:inherit}

::selection{background:var(--acento);color:#fff}
:focus-visible{outline:2px solid var(--acento);outline-offset:3px;border-radius:4px}

.saltar{position:absolute;left:-9999px;top:0;z-index:200;background:var(--acento);color:#fff;
  padding:12px 18px;font-weight:700;border-radius:0 0 8px 0}
.saltar:focus{left:0}

.solo-lector{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}

/* ============================================================
   AMBIENTE: una sola capa detras de todo el sitio
   ============================================================ */
.ambiente{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
#particulas{position:absolute;inset:0;width:100%;height:100%;opacity:0;
  transition:opacity 1.6s var(--suave)}
#particulas.encendido{opacity:1}
.ambiente-grano{position:absolute;inset:0;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}

/* ============================================================
   TIPOGRAFIA DE SECCION
   ============================================================ */
.ancho{max-width:var(--ancho-max);margin:0 auto;position:relative}
.seccion{position:relative;padding:clamp(90px,13vh,170px) var(--margen)}

.ojo{display:flex;align-items:center;gap:12px;font-size:.7rem;letter-spacing:.32em;
  text-transform:uppercase;color:var(--acento);margin-bottom:22px}
.ojo::before{content:"";width:26px;height:1px;background:var(--acento)}
.ojo-centro{justify-content:center}

.titulo-2{font-size:clamp(2rem,4.4vw,3.5rem);letter-spacing:-.03em;font-weight:700}
.bajada{margin-top:22px;color:var(--texto-2);font-size:clamp(1.02rem,1.4vw,1.18rem);max-width:62ch}
.bajada-centro{margin-left:auto;margin-right:auto;text-align:center}

/* ============================================================
   MOVIMIENTO REDUCIDO
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important;
    transition-delay:0s!important;animation-delay:0s!important}
  body{opacity:1}
}