/* estilo.css — base común del sitio de estudios. Mismo sistema visual que las presentaciones de MODAILA
   (paleta, tipografías y gestos), aplicado al estudio. Sin logo ni frases de la marca.
   Lo cargan la puerta, la portada y las páginas propias. Las guías y presentaciones llevan el suyo dentro. */
:root {
  --cream: #F3EEE3; --paper: #FBF8F1; --ink: #161514; --washed: #2B2927;
  --hot: #FF2E93; --hot-texto: #EB1A82; --hot-fino: #B3145F; --pink: #F0B4C2; --butter: #F5E48A; --lilac: #C9A6F2; --plum: #4A3A6A;
  --mute: #6B665E; --line: #D9D2C3;
  --marker: "Permanent Marker", "Marker Felt", "Comic Sans MS", cursive;
  --hand: Caveat, "Bradley Hand", "Segoe Print", cursive;
  --body: Archivo, "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --curva: cubic-bezier(.2, .8, .2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--cream); color: var(--ink); font-family: var(--body);
  font-size: 1.0625rem; line-height: 1.45; -webkit-font-smoothing: antialiased; overflow-x: hidden; position: relative;
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .45; z-index: 0;
  background-image: radial-gradient(#c9c2b4 .8px, transparent .9px); background-size: 22px 22px;
}
h1, h2, h3, p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.wrap { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; padding: clamp(20px, 4vw, 48px) clamp(16px, 5vw, 56px) 72px; }
.mk { font-family: var(--marker); font-weight: 400; line-height: .93; letter-spacing: -.01em; }
.mk em, h1 em, h2 em { font-style: normal; color: var(--hot-texto); }   /* hot puro sobre crema no llega a 3:1 */
.hand { font-family: var(--hand); font-weight: 700; font-size: clamp(1.35rem, 3.4vw, 1.85rem); line-height: 1.12; color: var(--mute); }
.kick { font-size: .72rem; letter-spacing: .17em; text-transform: uppercase; font-weight: 800; color: var(--mute); }
.kick b { color: var(--ink); }

.tag { display: inline-block; padding: 5px 9px; border: 1.5px solid var(--ink); border-radius: 3px; font-size: .69rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; }
.tag.hot { background: var(--hot); border-color: var(--ink); color: var(--ink); }
.tag.soft { background: var(--pink); }
.tag.butter { background: var(--butter); }
.tag.lilac { background: var(--lilac); }

.stick { display: inline-block; background: var(--butter); color: var(--ink); padding: 6px 14px 4px; border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); transform: rotate(-2deg); font-family: var(--hand); font-weight: 700; font-size: 1.3rem; line-height: 1.1; }

.cabecera { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding-bottom: 20px; border-bottom: 2px solid var(--ink); }
.marca { font-family: var(--marker); font-size: clamp(1.7rem, 5vw, 2.3rem); line-height: 1; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; }
.marca svg { width: 34px; height: 34px; transform: rotate(10deg); flex: none; }
.volver { display: inline-flex; align-items: center; min-height: 44px; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 800; text-decoration: none; }
@media (hover: hover) { .volver:hover { color: var(--hot); } }

.pie { margin-top: 56px; padding-top: 18px; border-top: 1px dashed var(--mute); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: .69rem; letter-spacing: .16em; text-transform: uppercase; color: var(--mute); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }