/* =========================================================
   EXPLORACIÓN DE IDENTIDAD (temporal)
   html[data-ruta]   → 1 difuminado · 2 masa · 3 fusión
   html[data-paleta] → p1..p5 (PDF "PROPUESTAS MATTERIA") + nuevas sobrias
   Logo: la m actual (fija).
   Al decidir: dejar solo la paleta/ruta elegida y borrar el resto.
   ========================================================= */

/* ---------- PALETAS DE LA PROPUESTA (aprox. desde el PDF) ---------- */
[data-paleta="p1"] { /* burgundy · rosa · azul hielo · mantequilla */
  --bg: #f5ece2; --bg-alt: #f0dedb; --line: #e3cfc9;
  --ink: #2b0f17; --ink-soft: #6e4d55; --accent: #3e1220; --accent-ink: #f7e9a0;
  --tone1: #e3a9ae; --tone2: #d6e4f0; --tone3: #f7e9a0; }
[data-paleta="p2"] { /* topo · marfil · azul gris · durazno */
  --bg: #fbf6e6; --bg-alt: #f2ead6; --line: #e3dcc9;
  --ink: #3a3333; --ink-soft: #6f6666; --accent: #5f5555; --accent-ink: #fbf6e6;
  --tone1: #b9c3c8; --tone2: #fae3b8; --tone3: #8fa3ad; }
[data-paleta="p3"] { /* vino · terracota · oliva · periwinkle · salvia */
  --bg: #ededE8; --bg-alt: #e1e4de; --line: #d6d8d0;
  --ink: #1e1e1e; --ink-soft: #5e5a55; --accent: #4a1424; --accent-ink: #edede8;
  --tone1: #9db0d6; --tone2: #c5d2cc; --tone3: #a0625c; }
[data-paleta="p4"] { /* actual: crema · azul claro · café */
  --bg: #fcf3e6; --bg-alt: #f3e7d5; --line: #e6d8c3;
  --ink: #321d18; --ink-soft: #6e5a50; --accent: #321d18; --accent-ink: #fcf3e6;
  --tone1: #cfe0ea; --tone2: #f3e2c8; --tone3: #a9c6d8; }
[data-paleta="p5"] { /* oxblood · rojo · azules · oliva */
  --bg: #fcfaf2; --bg-alt: #eef3f1; --line: #e0e2d8;
  --ink: #2a0608; --ink-soft: #6b4446; --accent: #4d0b0e; --accent-ink: #fcfaf2;
  --tone1: #9fbcd4; --tone2: #cce2e2; --tone3: #852a30; }

/* ---------- NUEVAS: sobrias, un color dominante ---------- */
[data-paleta="arena"] {
  --bg: #f3ede5; --bg-alt: #e9e0d4; --line: #dcd0c1;
  --ink: #2a221c; --ink-soft: #76695d; --accent: #5b4434; --accent-ink: #f6f1ea;
  --tone1: #c7a688; --tone2: #e8d6c2; --tone3: #8e6c53; }
[data-paleta="salvia"] {
  --bg: #eef0ea; --bg-alt: #e1e6dc; --line: #d2d9cb;
  --ink: #1d231e; --ink-soft: #646e5f; --accent: #3e4c3b; --accent-ink: #f1f3ee;
  --tone1: #a5b49d; --tone2: #d6ddcf; --tone3: #6b7d66; }
[data-paleta="borgona"] {
  --bg: #f5efec; --bg-alt: #ecdfda; --line: #e0cfca;
  --ink: #2a1416; --ink-soft: #7a5e5f; --accent: #6a1e28; --accent-ink: #f8efed;
  --tone1: #b9757c; --tone2: #ecccc8; --tone3: #7d2933; }
[data-paleta="bruma"] {
  --bg: #f1f0f2; --bg-alt: #e5e3e8; --line: #d8d5dc;
  --ink: #1e1d22; --ink-soft: #6c6873; --accent: #2f2c38; --accent-ink: #f3f2f5;
  --tone1: #b3adbf; --tone2: #dedbe4; --tone3: #7b7489; }
[data-paleta="miami"] { /* hueso · negro · atardecer · sea glass */
  --bg: #f3ede4; --bg-alt: #ebe2d6; --line: rgb(20 17 15 / .14);
  --ink: #14110f; --ink-soft: #6d655d; --accent: #14110f; --accent-ink: #f3ede4;
  --tone1: #f2b8a0; --tone2: #f6dccb; --tone3: #a9d3d0; }

/* ---------- ATMÓSFERA ---------- */
.atmos { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.atmos span { position: absolute; display: block; will-change: transform; }
.atmos::after { content: ""; position: absolute; inset: 0; opacity: 0; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); }

/* Ruta 1 — difuminado */
[data-ruta="1"] .atmos::after { opacity: .16; }
[data-ruta="1"] .atmos span { border-radius: 50%; filter: blur(70px); opacity: .85; animation: drift 22s ease-in-out infinite alternate; }
[data-ruta="1"] .atmos__a { width: 60vmax; height: 60vmax; right: -18vmax; top: -20vmax; background: var(--tone1); }
[data-ruta="1"] .atmos__b { width: 45vmax; height: 45vmax; right: 10vmax; bottom: -25vmax; background: var(--tone2); animation-duration: 28s; animation-delay: -6s; }
[data-ruta="1"] .atmos__c { width: 30vmax; height: 30vmax; left: -12vmax; bottom: -10vmax; background: var(--tone3); opacity: .2; animation-duration: 34s; }

/* Ruta 2 — masa nítida en movimiento */
[data-ruta="2"] .atmos__a { width: min(46vmin, 480px); aspect-ratio: 1; right: -4%; top: -8%;
  background: radial-gradient(circle at 30% 28%, var(--tone2), var(--tone1) 45%, var(--tone3));
  opacity: .75; animation: morph 14s ease-in-out infinite, spin 40s linear infinite; }
[data-ruta="2"] .atmos__b { width: min(14vmin, 140px); aspect-ratio: 1; left: 44%; bottom: 6%;
  background: var(--tone3); opacity: .6; animation: morph 9s ease-in-out infinite reverse, float 7s ease-in-out infinite alternate; }
[data-ruta="2"] .atmos__c { display: none; }

/* Ruta 3 — fusión */
[data-ruta="3"] .atmos::after { opacity: .18; }
[data-ruta="3"] .atmos__a { width: min(56vmin, 560px); aspect-ratio: 1; right: -6%; top: -12%;
  background: radial-gradient(circle at 35% 30%, var(--tone2), var(--tone1) 50%, var(--tone3));
  border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; filter: blur(30px); opacity: .8; animation: spin 50s linear infinite; }
[data-ruta="3"] .atmos__b { width: 50vmax; height: 50vmax; left: -22vmax; bottom: -30vmax; border-radius: 50%;
  background: var(--tone2); filter: blur(80px); opacity: .9; animation: drift 26s ease-in-out infinite alternate; }
[data-ruta="3"] .atmos__c { width: min(16vmin, 160px); aspect-ratio: 1; left: 46%; bottom: 8%;
  border-radius: 55% 45% 60% 40% / 36% 58% 42% 64%; background: var(--tone3); filter: blur(10px); opacity: .45; animation: float 9s ease-in-out infinite alternate; }

/* en la banda final (fondo oscuro) la atmósfera va más tenue */
.atmos--final, .atmos--dark { opacity: .28; }
.atmos--final::after, .atmos--dark::after { display: none; }

@keyframes morph {
  0%, 100% { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; }
  25% { border-radius: 63% 37% 45% 55% / 55% 62% 38% 45%; }
  50% { border-radius: 38% 62% 35% 65% / 63% 35% 65% 37%; }
  75% { border-radius: 55% 45% 60% 40% / 36% 58% 42% 64%; }
}
@keyframes spin { to { rotate: 360deg; } }
@keyframes drift { to { transform: translate(-6vmax, 5vmax) scale(1.12); } }
@keyframes float { to { transform: translate(-14px, 22px); } }
@media (prefers-reduced-motion: reduce) { .atmos span, .marquee__track { animation: none !important; } }

/* ---------- LOGO: la m ---------- */
.iso-m { width: 30px; filter: invert(1); }

/* ---------- EXPLORADOR ---------- */
.explorer { position: fixed; left: 16px; bottom: 16px; z-index: 40; width: auto; max-width: min(340px, calc(100vw - 110px));
  background: color-mix(in srgb, #fff 94%, transparent); backdrop-filter: blur(12px); color: #1a1a1a;
  border: 1px solid rgb(0 0 0 / .1); border-radius: 14px; box-shadow: 0 10px 30px rgb(0 0 0 / .12); font: 13px/1.4 var(--font-body); }
@media (max-width: 760px) { .explorer { bottom: 84px; } }
.explorer__toggle { width: 100%; text-align: left; background: none; border: 0; padding: .65rem .9rem; font: inherit; font-weight: 600; cursor: pointer; color: inherit; }
.explorer__body { padding: 0 .9rem .9rem; display: flex; flex-direction: column; gap: .7rem; }
.explorer fieldset { border: 0; padding: 0; margin: 0; }
.explorer legend { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: #777; margin-bottom: .35rem; }
.seg { display: flex; flex-wrap: wrap; gap: .3rem; }
.seg button { border: 1px solid rgb(0 0 0 / .15); background: #fff; color: #1a1a1a; border-radius: 999px; padding: .3rem .6rem; font: inherit; font-size: 12px; cursor: pointer; display: inline-flex; align-items: center; gap: .3rem; }
.seg button[aria-pressed="true"] { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
.seg i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; border: 1px solid rgb(0 0 0 / .12); }
.explorer__note { margin: 0; color: #555; font-size: 12px; }
.explorer__share { background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; font: inherit; font-size: 12px; color: #1a1a1a; text-align: left; }

/* ---------- Paleta oficial: blanco · burdeo · negro ---------- */
[data-paleta="burdeo"] {
  --bg: #ffffff; --bg-alt: #f7f2f3; --line: rgb(17 17 17 / .12);
  --ink: #111111; --ink-soft: #555055; --accent: #6b1e2e; --accent-ink: #ffffff;
  --tone1: #e9d3d7; --tone2: #f7eef0; --tone3: #c99aa3; }