/* Page styles ("skins"). Each visitor gets one at random (boot.js) and can switch from the header.
   A skin is html[data-skin="<id>"]: it redefines the tokens from tokens.css (so the converter inside
   #app-root follows automatically) and adds the decoration the tokens cannot express.
   "clasico" has no rules here: it is the original look with its light/dark toggle.
   Every skin is single-mode (its own light or dark palette) and keeps text contrast >= 4.5:1.
   Loaded after site.css so equal specificity resolves in favour of the skin. */

/* ---------- Switcher (uses tokens, so it adapts to every skin) ---------- */
:root:not(.js) .skin-switch { display: none; }
.site-header { position: relative; z-index: 50; }
.skin-switch { position: relative; }
.skin-btn {
  display: inline-flex; align-items: center; gap: var(--s2); min-height: 2.5rem; padding-inline: var(--s3);
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text);
  font: inherit; font-size: 0.9375rem; font-weight: 600; cursor: pointer;
}
.skin-btn:hover, .skin-btn[aria-expanded="true"] { background: var(--surface-2); }
.skin-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 70; display: grid; gap: 2px;
  width: min(19rem, calc(100vw - var(--s4) * 2)); max-height: min(38rem, 80vh); overflow-y: auto; padding: var(--s2);
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow);
}
.skin-item {
  display: flex; align-items: center; gap: var(--s3); width: 100%; padding: var(--s2) var(--s3);
  border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--text);
  font: inherit; font-size: 0.9375rem; text-align: start; cursor: pointer;
}
.skin-item:hover { background: var(--surface-2); }
.skin-item[aria-pressed="true"] { border-color: var(--accent); font-weight: 700; }
.skin-item-random { margin-bottom: var(--s1); border-bottom: 1px solid var(--border); border-radius: var(--radius-sm) var(--radius-sm) 0 0; color: var(--accent); font-weight: 700; }
.skin-swatch { flex: none; width: 1.25rem; height: 1.25rem; border: 1px solid var(--border); border-radius: 50%; background: var(--surface-2); }
@media (max-width: 719px) {
  .skin-switch { position: static; }
  .skin-menu { top: 100%; right: var(--s4); left: var(--s4); width: auto; }
  .skin-btn-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .skin-btn { width: 2.5rem; justify-content: center; padding: 0; }
}
.skin-swatch[data-s="clasico"] { background: linear-gradient(135deg, #2457d6 50%, #f6f7f9 50%); }
.skin-swatch[data-s="periodico"] { background: linear-gradient(135deg, #10213f 50%, #a3202b 50%); }
.skin-swatch[data-s="terminal"] { background: linear-gradient(135deg, #120c02 50%, #ffb534 50%); }
.skin-swatch[data-s="brutal"] { background: linear-gradient(135deg, #ffd93d 50%, #ff5d8f 50%); }
.skin-swatch[data-s="aurora"] { background: linear-gradient(135deg, #2a5cff 33%, #ff4fa3 33% 66%, #17d6b7 66%); }
.skin-swatch[data-s="bento"] { background: linear-gradient(135deg, #d8e6ff 50%, #fff3c4 50%); }
.skin-swatch[data-s="suizo"] { background: linear-gradient(135deg, #ffffff 50%, #e4000f 50%); }
.skin-swatch[data-s="neon"] { background: linear-gradient(135deg, #ff2bd6 50%, #2bf5ff 50%); }
.skin-swatch[data-s="plano"] { background: linear-gradient(135deg, #0f3a8a 50%, #ffe27a 50%); }
.skin-swatch[data-s="retro"] { background: linear-gradient(135deg, #008080 50%, #c0c0c0 50%); }
.skin-swatch[data-s="amable"] { background: linear-gradient(135deg, #ffe3ec 50%, #ff7a59 50%); }
.skin-swatch[data-s="premium"] { background: linear-gradient(135deg, #08090b 50%, #2dd4bf 50%); }
.skin-swatch[data-s="cuaderno"] { background: linear-gradient(135deg, #fffef8 50%, #ffe66d 50%); }

/* Skins are single-mode: the light/dark toggle only belongs to the classic look. */
html[data-skin]:not([data-skin="clasico"]) [data-theme-toggle] { display: none; }
html[data-skin]:not([data-skin="clasico"]) :is(h1, h2, h3, .brand-name, .notfound-code):not(.pl *) { font-family: var(--font-display, var(--font-sans)); }

/* ---------- 1. Periodico: ink-blue newsprint, serif, double rules ---------- */
html[data-skin="periodico"]:root {
  color-scheme: light;
  --bg: #fbfbf9; --surface: #ffffff; --surface-2: #eef0f5; --border: #10213f; --text: #10213f; --text-muted: #46567a;
  --accent: #a3202b; --accent-hover: #7f1820; --accent-contrast: #ffffff; --danger: #a3202b;
  --warning-bg: #fdf0d2; --warning-text: #5a3b00; --focus: #1d4ed8; --overlay: rgba(16, 33, 63, 0.55);
  --radius: 0; --radius-sm: 0; --shadow: none;
  --font-sans: "Newsreader", Georgia, "Times New Roman", serif; --font-display: "Newsreader", Georgia, serif;
}
[data-skin="periodico"] body { font-size: 1.0625rem; }
[data-skin="periodico"] .site-header { border-bottom: 3px double var(--border); }
[data-skin="periodico"] .hero { background: none; border-bottom: 1px solid var(--border); }
[data-skin="periodico"] .hero h1 { font-weight: 700; letter-spacing: -0.02em; }
[data-skin="periodico"] .chips li { border: 0; border-bottom: 2px solid var(--accent); background: none; padding-inline: 0; }
[data-skin="periodico"] .tool-frame { border: 2px solid var(--border); }
[data-skin="periodico"] .steps > li::before { background: none; color: var(--accent); font: 700 2.25rem/1 var(--font-display); place-items: start; width: auto; }
[data-skin="periodico"] .panel { border-inline-start-width: 6px; }
[data-skin="periodico"] .prose h2 { padding-top: var(--s3); border-top: 3px double var(--border); }
[data-skin="periodico"] .btn { letter-spacing: 0.02em; }

/* ---------- 2. Terminal ambar: phosphor screen ---------- */
html[data-skin="terminal"]:root {
  color-scheme: dark;
  --bg: #120c02; --surface: #1c1204; --surface-2: #2a1b06; --border: #7a5200; --text: #ffb534; --text-muted: #d99a2b;
  --accent: #ffb534; --accent-hover: #ffd27a; --accent-contrast: #120c02; --danger: #ff7a5c;
  --warning-bg: #3a2600; --warning-text: #ffd27a; --mark-bg: #ffb534; --mark-active-bg: #fff1c9; --mark-text: #120c02;
  --focus: #ffd27a; --overlay: rgba(10, 6, 0, 0.75);
  --radius: 0; --radius-sm: 0; --shadow: 0 0 14px rgba(255, 181, 52, 0.18);
  --font-sans: "IBM Plex Mono", ui-monospace, Consolas, monospace; --font-display: "VT323", "IBM Plex Mono", monospace;
  --font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
}
[data-skin="terminal"] body::after { content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; background: repeating-linear-gradient(transparent 0 2px, rgba(0, 0, 0, 0.16) 2px 3px); }
[data-skin="terminal"] .hero { background: none; border-bottom: 1px dashed var(--border); }
[data-skin="terminal"] .hero h1 { font-size: clamp(2.5rem, 7vw, 4.5rem); font-weight: 400; letter-spacing: 0; line-height: 1; text-shadow: 0 0 14px rgba(255, 181, 52, 0.55); }
[data-skin="terminal"] .hero h1::after { content: "_"; animation: skin-blink 1s steps(1) infinite; }
[data-skin="terminal"] .prose h2 { font-weight: 400; font-size: 2.1rem; text-shadow: 0 0 10px rgba(255, 181, 52, 0.4); }
[data-skin="terminal"] .prose h2::before { content: "> "; }
[data-skin="terminal"] .site-header, [data-skin="terminal"] .site-footer { border-color: var(--border); border-style: dashed; }
[data-skin="terminal"] .chips li, [data-skin="terminal"] .steps > li, [data-skin="terminal"] .card, [data-skin="terminal"] .faq-item { border-style: dashed; }
[data-skin="terminal"] .btn { text-transform: uppercase; letter-spacing: 0.04em; }
@keyframes skin-blink { 50% { opacity: 0; } }

/* ---------- 3. Neobrutalismo: flat colour, thick borders, hard shadows ---------- */
html[data-skin="brutal"]:root {
  color-scheme: light;
  --bg: #ffd93d; --surface: #ffffff; --surface-2: #fff0a8; --border: #000000; --text: #000000; --text-muted: #2b2b2b;
  --accent: #a3124a; --accent-hover: #7d0d38; --accent-contrast: #ffffff; --danger: #b00020;
  --warning-bg: #ffb3c7; --warning-text: #3d0014; --focus: #0036d6; --overlay: rgba(0, 0, 0, 0.6);
  --radius: 0; --radius-sm: 0; --shadow: 6px 6px 0 #000;
  --font-sans: "Familjen Grotesk", system-ui, sans-serif; --font-display: "Archivo Black", "Familjen Grotesk", sans-serif;
}
[data-skin="brutal"] .site-header { background: #fff; border-bottom: 3px solid #000; }
[data-skin="brutal"] .hero { background: none; }
[data-skin="brutal"] .hero h1 { font-weight: 400; text-transform: uppercase; letter-spacing: -0.01em; max-width: 18ch; }
[data-skin="brutal"] :is(.chips li, .steps > li, .card, .panel, .callout, .faq-item, .consent-card, .skin-menu, .lang-link, .icon-btn, .skin-btn) { border: 3px solid #000; }
[data-skin="brutal"] :is(.steps > li, .card, .panel, .faq-item, .tool-frame) { box-shadow: 6px 6px 0 #000; }
[data-skin="brutal"] .tool-frame { border: 3px solid #000; }
[data-skin="brutal"] .chips li { font-weight: 700; box-shadow: 3px 3px 0 #000; }
[data-skin="brutal"] .chips li:nth-child(3n+1) { background: #8be9fd; }
[data-skin="brutal"] .chips li:nth-child(3n+2) { background: #b9f6ca; }
[data-skin="brutal"] .chips li:nth-child(3n) { background: #ffffff; }
[data-skin="brutal"] .card:nth-child(3n+1) { background: #8be9fd; }
[data-skin="brutal"] .card:nth-child(3n+2) { background: #b9f6ca; }
[data-skin="brutal"] .card > .icon { background: #fff; border: 2px solid #000; }
[data-skin="brutal"] .btn { border: 3px solid #000; box-shadow: 4px 4px 0 #000; transition: transform 0.1s, box-shadow 0.1s; }
[data-skin="brutal"] .btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #000; }
[data-skin="brutal"] .site-footer { background: #fff; border-top: 3px solid #000; }
[data-skin="brutal"] .steps > li::before { border: 2px solid #000; background: #ff5d8f; color: #000; }

/* ---------- 4. Aurora de cristal: dark glass over soft colour ---------- */
html[data-skin="aurora"]:root {
  color-scheme: dark;
  --bg: #070a14; --surface: #0f1530; --surface-2: #1a2245; --border: #34417a; --text: #eaf0ff; --text-muted: #b3c0e6;
  --accent: #8aa8ff; --accent-hover: #b5c8ff; --accent-contrast: #0a1030; --danger: #ff8aa8;
  --warning-bg: #3a2f10; --warning-text: #ffe29a; --focus: #b5c8ff; --overlay: rgba(2, 4, 12, 0.7);
  --radius: 18px; --radius-sm: 10px; --shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
  --font-sans: "Sora", system-ui, sans-serif; --font-display: "Sora", system-ui, sans-serif;
}
[data-skin="aurora"] body {
  background-image: radial-gradient(55% 45% at 12% 0%, rgba(42, 92, 255, 0.4), transparent), radial-gradient(45% 40% at 95% 12%, rgba(255, 79, 163, 0.28), transparent), radial-gradient(55% 45% at 55% 100%, rgba(23, 214, 183, 0.26), transparent);
  background-attachment: fixed;
}
[data-skin="aurora"] .site-header { background: rgba(10, 14, 32, 0.6); backdrop-filter: blur(14px); border-color: rgba(255, 255, 255, 0.12); }
[data-skin="aurora"] .hero { background: none; }
[data-skin="aurora"] .hero h1 { letter-spacing: -0.04em; font-weight: 700; }
[data-skin="aurora"] :is(.chips li, .steps > li, .card, .faq-item, .panel, .tool-frame) { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.16); backdrop-filter: blur(14px); }
[data-skin="aurora"] .tool-frame { background: var(--surface); }
[data-skin="aurora"] .site-footer { background: rgba(10, 14, 32, 0.6); border-color: rgba(255, 255, 255, 0.12); }
[data-skin="aurora"] .btn { border-radius: 99px; }

/* ---------- 5. Bento claro: pastel blocks with big corners ---------- */
html[data-skin="bento"]:root {
  color-scheme: light;
  --bg: #eef1f6; --surface: #ffffff; --surface-2: #e3e9f3; --border: #d3dae8; --text: #1b2230; --text-muted: #4b566b;
  --accent: #2459c7; --accent-hover: #1a44a0; --accent-contrast: #ffffff; --danger: #c0302a;
  --warning-bg: #fff3c4; --warning-text: #5c4300; --focus: #1b6ef3; --overlay: rgba(27, 34, 48, 0.5);
  --radius: 22px; --radius-sm: 12px; --shadow: 0 2px 4px rgba(27, 34, 48, 0.05), 0 12px 30px rgba(27, 34, 48, 0.08);
  --font-sans: "DM Sans", system-ui, sans-serif; --font-display: "DM Sans", system-ui, sans-serif;
}
[data-skin="bento"] .site-header { background: transparent; border: 0; }
[data-skin="bento"] .hero { background: none; padding-block: var(--s5); }
[data-skin="bento"] .hero .wrap { padding: var(--s6) var(--s5); border-radius: 32px; background: var(--surface); }
[data-skin="bento"] .hero h1 { letter-spacing: -0.04em; font-weight: 700; }
[data-skin="bento"] .chips li { border: 0; background: var(--surface-2); border-radius: 99px; }
[data-skin="bento"] .tool-frame { border: 0; }
[data-skin="bento"] :is(.steps > li, .card, .faq-item, .panel) { border: 0; }
[data-skin="bento"] .steps > li:nth-child(1), [data-skin="bento"] .card:nth-child(4n+1) { background: #d8e6ff; }
[data-skin="bento"] .steps > li:nth-child(2), [data-skin="bento"] .card:nth-child(4n+2) { background: #ffe9c9; }
[data-skin="bento"] .steps > li:nth-child(3), [data-skin="bento"] .card:nth-child(4n+3) { background: #d9f3e2; }
[data-skin="bento"] .card:nth-child(4n) { background: #f1dcf7; }
[data-skin="bento"] .card > .icon { background: rgba(255, 255, 255, 0.7); }
[data-skin="bento"] .steps > li p, [data-skin="bento"] .card p { color: #38425a; }
[data-skin="bento"] .panel { border-inline-start: 0; background: #dfeefc; }
[data-skin="bento"] .site-footer { background: transparent; border: 0; }

/* ---------- 6. Suizo: huge type, black on white, one red dot ---------- */
html[data-skin="suizo"]:root {
  color-scheme: light;
  --bg: #ffffff; --surface: #ffffff; --surface-2: #f1f1f1; --border: #111111; --text: #111111; --text-muted: #444444;
  --accent: #d4000e; --accent-hover: #a8000b; --accent-contrast: #ffffff; --danger: #d4000e;
  --warning-bg: #f1f1f1; --warning-text: #111111; --focus: #0044cc; --overlay: rgba(0, 0, 0, 0.55);
  --radius: 0; --radius-sm: 0; --shadow: none;
  --font-sans: "Familjen Grotesk", system-ui, sans-serif; --font-display: "Familjen Grotesk", system-ui, sans-serif;
}
[data-skin="suizo"] .site-header { border-bottom: 2px solid var(--border); }
[data-skin="suizo"] .brand::after { content: ""; width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--accent); }
[data-skin="suizo"] .hero { background: none; padding-block: var(--s6) var(--s5); }
[data-skin="suizo"] .hero .wrap { text-align: start; }
[data-skin="suizo"] .hero h1 { max-width: 12ch; margin-inline: 0; font-size: clamp(3rem, 9vw, 7rem); font-weight: 700; line-height: 0.92; letter-spacing: -0.055em; }
[data-skin="suizo"] .lead { margin-inline: 0; }
[data-skin="suizo"] .chips { justify-content: flex-start; }
[data-skin="suizo"] .chips li { border: 0; border-top: 2px solid var(--border); background: none; padding-inline: 0; margin-right: var(--s4); }
[data-skin="suizo"] .tool-frame { border: 2px solid var(--border); }
[data-skin="suizo"] :is(.steps > li, .card, .faq-item) { border: 0; border-top: 2px solid var(--border); background: none; padding-inline: 0; }
[data-skin="suizo"] .steps > li::before { background: none; color: var(--accent); font-size: 1.5rem; place-items: start; width: auto; }
[data-skin="suizo"] .card > .icon { background: none; padding-inline: 0; color: var(--accent); }
[data-skin="suizo"] .panel { border: 0; border-top: 6px solid var(--accent); background: var(--surface-2); }
[data-skin="suizo"] .site-footer { background: none; border-top: 2px solid var(--border); }

/* ---------- 7. Neon futurista: deep violet with pink and cyan light ---------- */
html[data-skin="neon"]:root {
  color-scheme: dark;
  --bg: #0b0615; --surface: #140a26; --surface-2: #1f1038; --border: #4a2a80; --text: #f0e9ff; --text-muted: #c4b5e6;
  --accent: #2bf5ff; --accent-hover: #8ffaff; --accent-contrast: #06121a; --danger: #ff6b9a;
  --warning-bg: #2e1a00; --warning-text: #ffd27a; --mark-bg: #ff2bd6; --mark-text: #0b0615; --focus: #8ffaff; --overlay: rgba(5, 2, 12, 0.75);
  --radius: 0; --radius-sm: 0; --shadow: 0 0 24px rgba(255, 43, 214, 0.25);
  --font-sans: "Chakra Petch", system-ui, sans-serif; --font-display: "Chakra Petch", system-ui, sans-serif;
}
[data-skin="neon"] .site-header { border-color: #ff2bd6; box-shadow: 0 0 18px rgba(255, 43, 214, 0.35); }
[data-skin="neon"] .hero { background: radial-gradient(60% 100% at 50% 0, rgba(255, 43, 214, 0.22), transparent); }
[data-skin="neon"] .hero h1 { text-transform: uppercase; font-weight: 700; letter-spacing: 0.01em; text-shadow: 0 0 18px rgba(255, 43, 214, 0.7), 2px 0 #2bf5ff; }
[data-skin="neon"] .tool-frame { border-color: #2bf5ff; box-shadow: 0 0 0 1px rgba(43, 245, 255, 0.3), 0 0 30px rgba(43, 245, 255, 0.2); }
[data-skin="neon"] :is(.chips li, .steps > li, .card, .faq-item) { border-color: #ff2bd6; box-shadow: 0 0 12px rgba(255, 43, 214, 0.2); }
[data-skin="neon"] .panel { border-inline-start-color: #2bf5ff; }
[data-skin="neon"] .btn { text-transform: uppercase; letter-spacing: 0.06em; box-shadow: 0 0 16px rgba(43, 245, 255, 0.5); }
[data-skin="neon"] .prose h2 { text-transform: uppercase; letter-spacing: 0.03em; }
[data-skin="neon"] .site-footer { border-color: #4a2a80; }

/* ---------- 8. Plano tecnico: blueprint paper ---------- */
html[data-skin="plano"]:root {
  color-scheme: dark;
  --bg: #0f3a8a; --surface: #0c2f70; --surface-2: #14459f; --border: #8fb1f0; --text: #ecf3ff; --text-muted: #c6d8fb;
  --accent: #ffe27a; --accent-hover: #fff0b0; --accent-contrast: #0b2a63; --danger: #ffb4a8;
  --warning-bg: #0b2a63; --warning-text: #ffe27a; --mark-bg: #ffe27a; --mark-text: #0b2a63; --focus: #ffe27a; --overlay: rgba(4, 16, 45, 0.75);
  --radius: 0; --radius-sm: 0; --shadow: none;
  --font-sans: "IBM Plex Mono", ui-monospace, Consolas, monospace; --font-display: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
}
[data-skin="plano"] body { background-image: linear-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.09) 1px, transparent 1px); background-size: 24px 24px; }
[data-skin="plano"] .site-header { border-bottom: 1px solid var(--border); }
[data-skin="plano"] .hero { background: none; }
[data-skin="plano"] .hero h1 { font-weight: 600; letter-spacing: -0.05em; }
[data-skin="plano"] :is(.chips li, .steps > li, .card, .faq-item, .panel, .tool-frame) { border: 1.5px dashed var(--border); }
[data-skin="plano"] .tool-frame { border-style: solid; }
[data-skin="plano"] .prose h2::before { content: "// "; color: var(--accent); }
[data-skin="plano"] .site-footer { border-top: 1px solid var(--border); }

/* ---------- 9. Escritorio retro: grey windows on teal ---------- */
html[data-skin="retro"]:root {
  color-scheme: light;
  --bg: #008080; --surface: #c0c0c0; --surface-2: #dfdfdf; --border: #808080; --text: #000000; --text-muted: #404040;
  --accent: #000080; --accent-hover: #1010a0; --accent-contrast: #ffffff; --danger: #a00000;
  --warning-bg: #ffffcc; --warning-text: #3d3000; --focus: #0000ff; --overlay: rgba(0, 40, 40, 0.6);
  --radius: 0; --radius-sm: 0; --shadow: none;
  --font-sans: "IBM Plex Mono", ui-monospace, Consolas, monospace; --font-display: "Silkscreen", "IBM Plex Mono", monospace;
}
[data-skin="retro"] :is(.site-header, .site-footer, .tool-frame, .chips li, .steps > li, .card, .faq-item, .panel, .callout, .lang-link, .icon-btn, .skin-btn, .skin-menu, .consent-card, .btn, .doc, .notfound, .content-grid .prose) {
  border: 2px solid; border-color: #ffffff #404040 #404040 #ffffff;
}
[data-skin="retro"] :is(.site-header, .site-footer) { border-width: 2px; }
[data-skin="retro"] .doc, [data-skin="retro"] .notfound, [data-skin="retro"] .content-grid .prose { background: var(--surface); padding: var(--s5); }
[data-skin="retro"] .content-grid { padding-block: var(--s5); }
[data-skin="retro"] .hero { background: none; }
[data-skin="retro"] .hero h1 { color: #fff; font-weight: 400; font-size: clamp(1.6rem, 4.2vw, 2.75rem); line-height: 1.25; text-shadow: 3px 3px #000; }
[data-skin="retro"] .hero .lead { color: #fff; }
[data-skin="retro"] .ad-label { color: #fff; }
[data-skin="retro"] .prose h2, [data-skin="retro"] .doc h1 { font-weight: 400; font-size: 1.25rem; padding: 4px var(--s2); background: #000080; color: #fff; }
[data-skin="retro"] .section h2 .icon-lg { color: #fff; }
[data-skin="retro"] .btn { border-color: #ffffff #000000 #000000 #ffffff; }
[data-skin="retro"] .btn:active { border-color: #000000 #ffffff #ffffff #000000; }
[data-skin="retro"] .callout { background: var(--warning-bg); }
[data-skin="retro"] .tool-frame { border-width: 3px; }
[data-skin="retro"] .panel { border-inline-start-width: 2px; }

/* ---------- 10. Amable: warm pastel, soft pills ---------- */
html[data-skin="amable"]:root {
  color-scheme: light;
  --bg: #fff7ef; --surface: #ffffff; --surface-2: #ffe9dc; --border: #f2c9b0; --text: #3a2a5a; --text-muted: #5d4d7d;
  --accent: #b83a1c; --accent-hover: #962e15; --accent-contrast: #ffffff; --danger: #b3261e;
  --warning-bg: #e3f6ff; --warning-text: #1d3b52; --focus: #6a3bd1; --overlay: rgba(58, 42, 90, 0.5);
  --radius: 24px; --radius-sm: 16px; --shadow: 0 6px 24px rgba(184, 58, 28, 0.12);
  --font-sans: "Fredoka", system-ui, sans-serif; --font-display: "Fredoka", system-ui, sans-serif;
}
[data-skin="amable"] .site-header { background: transparent; border: 0; }
[data-skin="amable"] .hero { background: none; }
[data-skin="amable"] .hero h1 { font-weight: 700; letter-spacing: -0.01em; }
[data-skin="amable"] .chips li { border-radius: 99px; border-width: 2px; }
[data-skin="amable"] .btn, [data-skin="amable"] .lang-link, [data-skin="amable"] .skin-btn, [data-skin="amable"] .icon-btn { border-radius: 99px; }
[data-skin="amable"] .tool-frame { border: 3px dashed #ff9fbd; }
[data-skin="amable"] :is(.steps > li, .card, .faq-item) { border-width: 2px; }
[data-skin="amable"] .steps > li::before { border-radius: 50%; background: #ff7a59; color: #3a1405; }
[data-skin="amable"] .card:nth-child(3n+1) { background: #ffe3ec; }
[data-skin="amable"] .card:nth-child(3n+2) { background: #e3f6ff; }
[data-skin="amable"] .card:nth-child(3n) { background: #e6f9d7; }
[data-skin="amable"] .card > .icon { background: rgba(255, 255, 255, 0.75); border-radius: 50%; }
[data-skin="amable"] .site-footer { background: transparent; border: 0; }

/* ---------- 11. Premium oscuro: near black, teal glow ---------- */
html[data-skin="premium"]:root {
  color-scheme: dark;
  --bg: #08090b; --surface: #0e1114; --surface-2: #171b20; --border: #2a3037; --text: #e8eaee; --text-muted: #98a2b0;
  --accent: #2dd4bf; --accent-hover: #6ee7d6; --accent-contrast: #04120f; --danger: #ff8a80;
  --warning-bg: #2a2410; --warning-text: #ffe29a; --focus: #6ee7d6; --overlay: rgba(0, 0, 0, 0.7);
  --radius: 14px; --radius-sm: 8px; --shadow: 0 0 0 1px rgba(45, 212, 191, 0.1), 0 24px 60px -24px rgba(45, 212, 191, 0.35);
  --font-sans: "Sora", system-ui, sans-serif; --font-display: "Sora", system-ui, sans-serif;
}
[data-skin="premium"] .site-header { background: rgba(8, 9, 11, 0.85); border-color: #1f2328; }
[data-skin="premium"] .hero { background: radial-gradient(50% 90% at 50% 0, rgba(45, 212, 191, 0.2), transparent); }
[data-skin="premium"] .hero h1 { font-weight: 600; letter-spacing: -0.045em; color: #e8eaee; background: linear-gradient(180deg, #ffffff, #8b95a3); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
[data-skin="premium"] .btn { color: var(--accent-contrast); }
[data-skin="premium"] .chips li { border-radius: 8px; color: var(--text-muted); }
[data-skin="premium"] .site-footer { background: transparent; border-color: #1f2328; }

/* ---------- 12. Cuaderno: ruled paper, handwriting, marker ---------- */
html[data-skin="cuaderno"]:root {
  color-scheme: light;
  --bg: #fffef8; --surface: #ffffff; --surface-2: #fff6bf; --border: #1d2f4a; --text: #1d2f4a; --text-muted: #44577a;
  --accent: #1f5fbf; --accent-hover: #17489a; --accent-contrast: #ffffff; --danger: #b3261e;
  --warning-bg: #d8f3dc; --warning-text: #1b4332; --mark-bg: #ffe66d; --focus: #1f5fbf; --overlay: rgba(29, 47, 74, 0.5);
  --radius: 10px 4px 12px 6px; --radius-sm: 4px 8px 5px 8px; --shadow: 3px 3px 0 rgba(29, 47, 74, 0.18);
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-display: "Caveat", "Segoe Script", cursive;
}
[data-skin="cuaderno"] body { background-image: repeating-linear-gradient(transparent 0 31px, #d6e4f5 31px 32px); }
@media (min-width: 1000px) { [data-skin="cuaderno"] body::before { content: ""; position: fixed; top: 0; bottom: 0; left: 56px; width: 2px; background: #f2a0a0; pointer-events: none; } }
[data-skin="cuaderno"] .site-header { background: var(--surface); border-bottom: 2px solid var(--border); }
[data-skin="cuaderno"] .brand-name { font-size: 1.75rem; line-height: 1; }
[data-skin="cuaderno"] .hero { background: none; }
[data-skin="cuaderno"] .hero h1 { display: inline; max-width: none; font-size: clamp(2.6rem, 7vw, 4.6rem); font-weight: 700; line-height: 1.1; letter-spacing: 0; background: linear-gradient(transparent 62%, #ffe66d 62%); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
[data-skin="cuaderno"] .hero .lead { margin-top: var(--s5); }
[data-skin="cuaderno"] .prose h2 { font-size: clamp(2rem, 4vw, 2.6rem); font-weight: 700; line-height: 1.05; }
[data-skin="cuaderno"] .prose h3, [data-skin="cuaderno"] .steps h3, [data-skin="cuaderno"] .card h3 { font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
[data-skin="cuaderno"] :is(.chips li, .steps > li, .card, .faq-item, .panel, .tool-frame) { border: 2px solid var(--border); }
[data-skin="cuaderno"] .chips li { background: #d8f3dc; color: #1b4332; }
[data-skin="cuaderno"] .steps > li:nth-child(odd) { transform: rotate(-0.6deg); }
[data-skin="cuaderno"] .steps > li:nth-child(even) { transform: rotate(0.6deg); }
[data-skin="cuaderno"] .steps > li::before { background: #ffe66d; color: var(--text); font-family: var(--font-display); font-size: 1.5rem; }
[data-skin="cuaderno"] .site-footer { background: var(--surface); border-top: 2px solid var(--border); }
[data-skin="cuaderno"] .btn { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; }