/* Modas Nuria — base compartida (tienda y gestión) */
@font-face { font-family: "Lexend"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../vendor/fonts/lexend-latin-wght-normal.woff2) format("woff2-variations"); }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../vendor/fonts/fraunces-latin-full-normal.woff2) format("woff2-variations"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 100 900; font-display: swap; src: url(../vendor/fonts/fraunces-latin-full-italic.woff2) format("woff2-variations"); }
:root {
  --lila: #8D6EE1;
  --lila-oscuro: #5B3FA8;
  --lila-claro: #EDE7FB;
  --ciruela: #2B1B45;
  --tinta: #241B33;
  --tinta-suave: #5A5168;
  --marfil: #FAF7F2;
  --nube: #F3EFF9;
  --blanco: #FFFFFF;
  --terciopelo: #1F4B3D;
  --terciopelo-oscuro: #143328;
  --oro: #C8A24C;
  --linea: #DED7E8;
  --ok: #2F7A4F;
  --aviso: #B9772A;
  --error: #B4323C;

  --display: "Fraunces", "Georgia", serif;
  --texto: "Lexend", "Segoe UI", system-ui, sans-serif;

  --base: 18px;
  --radio: 14px;
  --radio-arco: 999px 999px 18px 18px;
  --sombra: 0 10px 30px -12px rgba(43, 27, 69, .25);
  --sombra-suave: 0 2px 10px -4px rgba(43, 27, 69, .18);
  --transicion: 220ms cubic-bezier(.2, .7, .2, 1);
  --tap: 48px;
  --ancho: 1240px;
}
:root[data-font="1"] { --base: 21px; }
:root[data-font="2"] { --base: 24px; }
:root[data-contrast="alto"] {
  --tinta: #000000; --tinta-suave: #222222; --marfil: #FFFFFF; --nube: #F5F5F5; --linea: #6b6b6b;
  --lila: #4b2fa0; --lila-oscuro: #2d1a70; --terciopelo: #0d2a21;
}
:root[data-motion="no"] *, :root[data-motion="no"] *::before, :root[data-motion="no"] *::after {
  animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { font-size: var(--base); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--texto); font-weight: 400; color: var(--tinta); background: var(--marfil); line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 500; line-height: 1.1; margin: 0; letter-spacing: -0.01em; font-variation-settings: "opsz" 72, "SOFT" 40; }
p { margin: 0; }
a { color: var(--lila-oscuro); text-underline-offset: .18em; text-decoration-thickness: 1.5px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[tabindex="-1"]:focus { outline: none; }
:focus-visible { outline: 3px solid var(--oro); outline-offset: 3px; border-radius: 6px; }
.oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; background: var(--ciruela); color: #fff; padding: 12px 18px; border-radius: 10px; z-index: 200; }
.skip:focus { top: 12px; }

/* Botones */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--tap); padding: 10px 24px; border-radius: 999px; border: 2px solid transparent; font-weight: 700; text-decoration: none; transition: transform var(--transicion), background var(--transicion), box-shadow var(--transicion); white-space: nowrap; }
.btn:active { transform: translateY(1px); }
.btn-lila { background: var(--lila); color: #fff; border-color: var(--lila); box-shadow: 0 8px 20px -10px var(--lila); }
.btn-lila:hover { background: var(--lila-oscuro); border-color: var(--lila-oscuro); }
.btn-borde { background: transparent; color: var(--ciruela); border-color: var(--ciruela); }
.btn-borde:hover { background: var(--ciruela); color: #fff; }
.btn-claro { background: #fff; color: var(--ciruela); border-color: #fff; }
.btn-claro:hover { background: var(--lila-claro); }
.btn-verde { background: var(--terciopelo); color: #fff; border-color: var(--terciopelo); }
.btn-verde:hover { background: var(--terciopelo-oscuro); }
.btn-suave { background: var(--lila-claro); color: var(--lila-oscuro); border-color: var(--lila-claro); }
.btn-suave:hover { background: #e2d9f7; }
.btn-oro { background: linear-gradient(135deg, #E6CC86, #C8A24C 55%, #B48A2E); color: #2B1B45; border-color: transparent; box-shadow: 0 10px 26px -10px rgba(200, 162, 76, .9); }
.btn-oro:hover { background: linear-gradient(135deg, #F0DBA0, #D4B05C 55%, #C09A3C); }
.btn-claro-borde { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.7); backdrop-filter: blur(4px); }
.btn-claro-borde:hover { background: rgba(255,255,255,.16); }
.btn-peq { min-height: 40px; padding: 6px 16px; font-size: .92rem; }
.btn-grande { min-height: 58px; padding: 14px 32px; font-size: 1.08rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn svg { width: 1.2em; height: 1.2em; flex: none; }

/* Campos */
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo > span { font-weight: 700; }
.campo small { color: var(--tinta-suave); }
.campo input, .campo select, .campo textarea { min-height: var(--tap); padding: 10px 14px; border: 2px solid var(--linea); border-radius: 12px; background: #fff; width: 100%; }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--lila); outline: none; box-shadow: 0 0 0 4px var(--lila-claro); }
.campo textarea { min-height: 110px; resize: vertical; }
.campo.error input { border-color: var(--error); }
.ayuda-error { color: var(--error); font-weight: 700; }

.etiqueta { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: var(--lila-claro); color: var(--lila-oscuro); font-weight: 700; font-size: .85rem; }
.etiqueta.demo { background: #FFF2DC; color: #7A4A0B; }
.etiqueta.ok { background: #E3F3E8; color: #1E5B37; }
.etiqueta.aviso { background: #FFF2DC; color: #7A4A0B; }
.etiqueta.error { background: #FBE2E4; color: #7E1F27; }
.etiqueta.neutro { background: #ECE9F1; color: #3E3450; }

#toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); background: var(--ciruela); color: #fff; padding: 14px 22px; border-radius: 14px; box-shadow: var(--sombra); opacity: 0; pointer-events: none; transition: all var(--transicion); z-index: 400; max-width: min(92vw, 520px); font-weight: 700; }
#toast.visible { opacity: 1; transform: translate(-50%, 0); }