/* Base compartida por todas las páginas de alexriquelme.cl.
   Lo específico de cada página va en su propio <style>. */
:root{
  --mk-fondo:#FBF3E7;
  --mk-texto:#16130F;
  --mk-primario:#D2541B;
  --mk-secundario:#2E4A3C;
  --linea:rgba(22,19,15,.14);
  --mk-linea:rgba(22,19,15,.16);
  --nav:4.5rem;
}
*{box-sizing:border-box}
html{overflow-x:clip}
body{
  margin:0; background:var(--mk-fondo); color:var(--mk-texto);
  font-family:"Inter Tight",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:clamp(1rem,1.05vw,1.125rem); line-height:1.5;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
img{max-width:100%; display:block}
a{color:inherit}

/* ---- barra fija ---- */
.barra{
  position:fixed; inset:0 0 auto 0; z-index:1000; height:var(--nav);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(1rem,3vw,2.5rem);
  background:color-mix(in srgb,var(--mk-fondo) 88%,transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--linea);
}
.barra-nombre{display:flex; align-items:center; gap:.65rem; font-weight:600; letter-spacing:-.02em; font-size:1rem; text-decoration:none}
.barra-nombre img{width:2.15rem; height:2.15rem; border-radius:50%; flex-shrink:0}
.barra-texto{white-space:nowrap}
.barra-texto span{color:var(--mk-primario)}
.barra-acciones{display:flex; align-items:center; gap:.6rem}

/* navegación entre secciones */
.barra-nav{display:none; gap:1.4rem; font-size:.95rem; font-weight:500}
@media(min-width:860px){ .barra-nav{display:flex} }
.barra-nav a{text-decoration:none; opacity:.7; transition:opacity .2s}
.barra-nav a:hover,.barra-nav a[aria-current]{opacity:1; color:var(--mk-primario)}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:2.75rem; padding:0 1.15rem; border-radius:999px;
  background:var(--mk-texto); color:var(--mk-fondo);
  font-weight:600; font-size:.95rem; text-decoration:none;
  transition:transform .3s cubic-bezier(.22,1,.36,1), background .3s;
}
.btn:hover{transform:translateY(-2px); background:var(--mk-primario)}
.btn--linea{background:transparent; color:var(--mk-texto); border:1px solid var(--linea)}
.btn--linea:hover{background:var(--mk-texto); color:var(--mk-fondo)}
.btn--grande{min-height:3.6rem; padding:0 2rem; font-size:1.05rem}

/* ---- paneles ---- */
.mk-swipe{padding:calc(var(--nav) + 1.5rem) clamp(1.15rem,4vw,3.5rem) 2.5rem}
.mk-swipe-inner{max-width:76rem; margin-inline:auto}
.etiqueta{
  font-size:.78rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--mk-primario); margin:0 0 1.4rem;
}
.etiqueta--sobrio{color:color-mix(in srgb,var(--mk-texto) 55%,transparent)}
h1,h2{
  font-weight:600; letter-spacing:-.035em; line-height:.98;
  font-size:clamp(2.3rem,7.2vw,5.2rem); margin:0 0 1.5rem;
}
h2{font-size:clamp(2rem,6vw,4.2rem)}
.bajada{
  font-size:clamp(1.05rem,1.7vw,1.4rem); line-height:1.45; max-width:34ch;
  color:color-mix(in srgb,var(--mk-texto) 78%,transparent); margin:0 0 2.2rem;
}
.acciones{display:flex; flex-wrap:wrap; gap:.75rem; align-items:center}
.nota{font-size:.9rem; color:color-mix(in srgb,var(--mk-texto) 55%,transparent); margin:1.4rem 0 0}

.centrado{text-align:center}
.centrado .bajada{margin-inline:auto}
.centrado .acciones{justify-content:center}

.dos{display:grid; gap:clamp(1.5rem,4vw,4rem); align-items:center}
@media(min-width:900px){ .dos{grid-template-columns:1.05fr .95fr} }

/* ---- pie ---- */
footer{
  position:relative; z-index:50;
  background:var(--mk-texto); color:var(--mk-fondo);
  padding:clamp(3rem,8vw,6rem) clamp(1.15rem,4vw,3.5rem) 2.5rem;
}
.pie{max-width:76rem; margin-inline:auto; display:grid; gap:2.5rem}
@media(min-width:900px){ .pie{grid-template-columns:1.2fr .8fr; align-items:start} }
.pie h2{font-size:clamp(2rem,5.5vw,3.6rem); margin-bottom:1.2rem}
.pie a.btn{background:var(--mk-fondo); color:var(--mk-texto)}
.pie a.btn:hover{background:var(--mk-primario); color:var(--mk-fondo)}
.datos{display:grid; gap:.85rem; font-size:1.05rem}
.datos a{text-decoration:none; border-bottom:1px solid rgba(255,255,255,.28); padding-bottom:.15rem}
.datos small{display:block; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; opacity:.5; margin-bottom:.2rem}
.legal{
  max-width:76rem; margin:3rem auto 0; padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,.18); font-size:.85rem; opacity:.6;
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
}
.legal a{text-decoration:none; border-bottom:1px solid rgba(255,255,255,.28)}

.mk-rail{display:none}

@media(max-width:700px){
  h1{font-size:clamp(2.1rem,8.4vw,3rem)}
  h2{font-size:clamp(1.8rem,7.6vw,2.6rem)}
  .bajada{font-size:1rem; margin-bottom:1.6rem; max-width:none}
  .btn--grande{min-height:3.2rem; padding:0 1.5rem; font-size:1rem}
  .nota{font-size:.82rem; margin-top:1rem}
}