/* =========================================================
   Inka Rainbow · sistema visual
   Extraído de la propuesta de portada aprobada (demo/portada.css).
   Paleta derivada del logo real #752F16, no del terracota heredado.
   Los tokens viven en sistema.css, que se carga antes que esta hoja.
   Aquí van el reset, el grano, los botones y las utilidades comunes.
   ========================================================= */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0; background:var(--fondo); color:var(--texto); overflow-x:hidden;
  font-family:var(--fuente); font-weight:var(--peso-normal);
  font-size:var(--t-17); line-height:1.65; -webkit-font-smoothing:antialiased;
}

img{max-width:100%; display:block}
h1,h2,h3,h4{font-weight:var(--peso-medio); text-wrap:balance; margin:0; letter-spacing:-.02em}
p{text-wrap:pretty; margin:0}
a{color:inherit}

/* grano: rompe la planitud sin recurrir a degradados */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:var(--capa-grano); 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)'/%3E%3C/svg%3E");
}

:focus-visible{outline:2px solid var(--texto); outline-offset:3px; border-radius:2px}

/* ---------- tipografía compartida ---------- */
.eyebrow{
  font-size:var(--t-12); font-weight:var(--peso-medio); letter-spacing:.16em; text-transform:uppercase;
  color:var(--texto-tenue); margin:0 0 24px;
}

.ir-lead{color:var(--texto-tenue); font-size:var(--t-18); max-width:62ch}

/* ---------- botones ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px; font-size:var(--t-15); font-weight:var(--peso-medio);
  text-decoration:none; padding:14px 26px; border-radius:2px; border:1px solid transparent;
  transition:background .5s var(--e), border-color .5s var(--e), transform .3s var(--e), color .5s var(--e);
}
.btn-primario{background:var(--accion); color:var(--accion-texto)}
.btn-primario:hover{background:var(--accion-viva)}
.btn-primario:active{transform:translateY(1px)}
.btn-texto{color:var(--texto); border-color:var(--linea); background:transparent}
.btn-texto:hover{border-color:var(--texto)}
.btn-texto:active{transform:translateY(1px)}

/* ---------- superficies ---------- */
.panel{background:var(--fondo-hondo); border:1px solid var(--linea); border-radius:2px}
.sep{border-top:1px solid var(--linea)}

/* ---------- etiqueta de dato pendiente del cliente ----------
   Aviso interno: marca dónde falta un dato del cliente en lugar de
   inventarlo. Borde de alerta a propósito, para que salte a la vista
   en revisión. No debe llegar a producción con contenido real. */
.pendiente{
  font-size:var(--t-11); letter-spacing:.1em; text-transform:uppercase; color:var(--accion-viva);
  border:1px solid rgba(143,61,30,.45); padding:3px 8px; border-radius:2px;
  margin-left:6px; white-space:nowrap; display:inline-block;
}

/* ---------- precio privado ----------
   No es lo mismo que un dato pendiente: es una decisión de marca. Se
   cotiza cada salida, así que no hay cifra pública que mostrar. Por eso
   no lleva borde de alerta ni versalitas de aviso, sino el mismo peso
   tipográfico que tendría una cifra. */
.privado{display:block}
.privado b{font-weight:var(--peso-medio); color:var(--texto)}
.privado span{display:block; font-size:var(--t-14); color:var(--texto-tenue);
  margin-top:var(--e-4); font-weight:var(--peso-normal)}

/* ---------- revelado en scroll ---------- */
.rv{opacity:0; transform:translateY(30px); filter:blur(6px);
    transition:opacity .9s var(--e), transform .9s var(--e), filter .9s var(--e)}
.rv.visto{opacity:1; transform:none; filter:none}
.d1{transition-delay:.09s} .d2{transition-delay:.18s} .d3{transition-delay:.27s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  .rv{opacity:1; transform:none; filter:none}
  html{scroll-behavior:auto}
}