/* =========================================================
   POLIS.INNOVA - SISTEMA DE 20 PLANTILLAS
   Archivo: /srv/stack-polisinnova/web/html/assets/templates.css
   Ver líneas:
   nl -ba /srv/stack-polisinnova/web/html/assets/templates.css | less
   ========================================================= */

:root {
  --bg: #07111f;
  --text: #ffffff;
  --muted: #cbd5e1;
  --soft: rgba(255,255,255,0.06);
  --card: rgba(255,255,255,0.08);
  --border: rgba(255,255,255,0.14);
  --accent: #38bdf8;
  --accent2: #fbbf24;
  --dark: #020617;
  --radius: 28px;
  --shadow: 0 28px 90px rgba(0,0,0,0.28);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

/* =========================
   SELECTOR DE PLANTILLAS
   ========================= */

.selector-body {
  min-height: 100vh;
  color: white;
  background:
    radial-gradient(circle at 15% 10%, rgba(56,189,248,0.20), transparent 28%),
    radial-gradient(circle at 85% 25%, rgba(251,191,36,0.16), transparent 26%),
    radial-gradient(circle at 50% 100%, rgba(139,92,246,0.18), transparent 34%),
    #07111f;
}

.selector-header {
  max-width: 1240px;
  margin: 0 auto;
  padding: 46px 24px 20px;
}

.selector-kicker {
  color: var(--accent);
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 13px;
}

.selector-header h1 {
  margin: 16px 0 12px;
  max-width: 900px;
  font-size: clamp(42px, 7vw, 84px);
  line-height: 0.95;
  letter-spacing: -0.06em;
}

.selector-header p {
  max-width: 850px;
  margin: 0;
  color: #cbd5e1;
  font-size: 20px;
  line-height: 1.65;
}

.template-grid {
  max-width: 1240px;
  margin: 0 auto;
  padding: 34px 24px 90px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.template-card {
  min-height: 250px;
  padding: 23px;
  border-radius: 28px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.055);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform .22s ease, border-color .22s ease, background .22s ease;
}

.template-card:hover {
  transform: translateY(-7px);
  border-color: var(--accent);
  background: rgba(255,255,255,0.095);
}

.template-card::before {
  content: "";
  position: absolute;
  right: -50px;
  top: -60px;
  width: 170px;
  height: 170px;
  border-radius: 999px;
  background: var(--glow, rgba(56,189,248,0.30));
  filter: blur(5px);
}

.template-number {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 17px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.11);
  font-weight: 900;
}

.template-card h2 {
  position: relative;
  margin: 26px 0 8px;
  font-size: 23px;
}

.template-card p {
  position: relative;
  margin: 0;
  color: #cbd5e1;
  line-height: 1.55;
  font-size: 15px;
}

.template-link {
  position: relative;
  margin-top: 22px;
  color: var(--accent);
  font-weight: 900;
}

/* =========================
   PLANTILLAS COMPLETAS
   ========================= */

.tpl {
  min-height: 100vh;
  color: var(--text);
  background: var(--page-bg);
}

.tpl-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(18px);
  background: var(--bar-bg);
  border-bottom: 1px solid var(--line);
}

.tpl-nav {
  max-width: 1220px;
  margin: 0 auto;
  padding: 17px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 22px;
}

.tpl-brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tpl-brand strong {
  font-size: 21px;
  letter-spacing: .08em;
}

.tpl-brand span {
  color: var(--muted2);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .14em;
}

.tpl-menu {
  display: flex;
  gap: 18px;
  align-items: center;
  color: var(--muted2);
  font-size: 14px;
}

.tpl-menu a:hover {
  color: var(--accent);
}

.back-link {
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--accent);
  font-weight: 900;
}

.tpl-hero {
  max-width: 1220px;
  margin: 0 auto;
  padding: 88px 24px 74px;
  display: grid;
  grid-template-columns: var(--hero-cols, 1.06fr .94fr);
  gap: 44px;
  align-items: center;
}

.tpl-kicker {
  display: inline-flex;
  padding: 9px 15px;
  border-radius: 999px;
  background: var(--pill);
  color: var(--accent);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.tpl-title {
  margin: 24px 0 18px;
  font-size: clamp(42px, 7vw, 84px);
  line-height: .93;
  letter-spacing: -.06em;
}

.tpl-text {
  max-width: 690px;
  color: var(--muted2);
  font-size: 20px;
  line-height: 1.65;
}

.tpl-actions {
  margin-top: 32px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.tpl-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 999px;
  font-weight: 900;
  border: 1px solid var(--line);
}

.tpl-button.primary {
  background: var(--accent);
  color: var(--button-text);
  border-color: var(--accent);
}

.tpl-button.secondary {
  background: var(--soft2);
  color: var(--text);
}

.visual-panel {
  min-height: 530px;
  border-radius: 38px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(140deg, var(--visual1), transparent 42%),
    linear-gradient(320deg, var(--visual2), transparent 48%),
    var(--visual-base);
}

.visual-panel::before {
  content: "";
  position: absolute;
  inset: 24px;
  border-radius: 31px;
  border: 1px solid var(--visual-line);
}

.visual-panel::after {
  content: attr(data-word);
  position: absolute;
  left: 30px;
  bottom: 28px;
  right: 30px;
  font-size: clamp(44px, 6vw, 78px);
  line-height: .88;
  font-weight: 900;
  letter-spacing: -.075em;
  color: var(--visual-text);
}

.float-card {
  position: absolute;
  right: 28px;
  top: 28px;
  width: 235px;
  padding: 18px;
  border-radius: 23px;
  background: var(--glass);
  backdrop-filter: blur(16px);
  color: var(--glass-text);
}

.float-card strong {
  display: block;
  margin-bottom: 7px;
  font-size: 18px;
}

.float-card span {
  color: var(--glass-muted);
  font-size: 14px;
  line-height: 1.45;
}

.tpl-section {
  max-width: 1220px;
  margin: 0 auto;
  padding: 74px 24px;
}

.section-head {
  max-width: 790px;
  margin-bottom: 34px;
}

.section-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section-head h2 {
  margin: 0;
  font-size: clamp(32px, 4.2vw, 56px);
  line-height: 1.04;
  letter-spacing: -.045em;
}

.section-head p {
  margin: 16px 0 0;
  color: var(--muted2);
  font-size: 18px;
  line-height: 1.65;
}

.grid-2,
.grid-3,
.grid-4 {
  display: grid;
  gap: 22px;
}

.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.info-card {
  padding: 28px;
  border-radius: 28px;
  border: 1px solid var(--line);
  background: var(--card-bg);
  box-shadow: var(--shadow-soft);
}

.info-card.big {
  min-height: 330px;
}

.info-card h3 {
  margin: 0 0 12px;
  font-size: 25px;
}

.info-card p {
  margin: 0;
  color: var(--muted2);
  line-height: 1.65;
}

.info-list {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
  color: var(--muted2);
}

.info-list li {
  position: relative;
  padding-left: 27px;
}

.info-list li::before {
  content: "•";
  position: absolute;
  left: 8px;
  color: var(--accent2);
  font-weight: 900;
}

.split {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 28px;
  align-items: stretch;
}

.split-panel {
  border-radius: 32px;
  border: 1px solid var(--line);
  background:
    linear-gradient(135deg, var(--visual1), transparent 52%),
    var(--card-bg);
  box-shadow: var(--shadow);
  padding: 34px;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.split-panel h2 {
  margin: 0;
  font-size: clamp(34px, 5vw, 62px);
  line-height: .96;
  letter-spacing: -.055em;
}

.steps {
  display: grid;
  gap: 16px;
}

.step {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 16px;
  align-items: start;
  padding: 20px;
  border-radius: 24px;
  border: 1px solid var(--line);
  background: var(--soft2);
}

.step-num {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: var(--accent);
  color: var(--button-text);
  display: grid;
  place-items: center;
  font-weight: 900;
}

.step h3 {
  margin: 0 0 5px;
  font-size: 20px;
}

.step p {
  margin: 0;
  color: var(--muted2);
}

.banner {
  border-radius: 34px;
  padding: 42px;
  border: 1px solid var(--line);
  background:
    linear-gradient(120deg, var(--visual1), transparent 48%),
    linear-gradient(300deg, var(--visual2), transparent 42%),
    var(--visual-base);
  box-shadow: var(--shadow);
}

.banner h2 {
  margin: 0 0 14px;
  font-size: clamp(34px, 4.5vw, 58px);
  line-height: 1;
  letter-spacing: -.05em;
}

.banner p {
  max-width: 760px;
  margin: 0;
  color: var(--banner-muted);
  font-size: 19px;
  line-height: 1.65;
}

.contact-box {
  text-align: center;
  border-radius: 34px;
  border: 1px solid var(--line);
  background: var(--card-bg);
  box-shadow: var(--shadow);
  padding: 46px 26px;
}

.contact-box h2 {
  margin: 0;
  font-size: clamp(34px, 4.5vw, 58px);
  letter-spacing: -.05em;
}

.contact-box p {
  max-width: 680px;
  margin: 16px auto 0;
  color: var(--muted2);
  font-size: 18px;
  line-height: 1.65;
}

.pending {
  margin-top: 25px;
  display: inline-flex;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--pill);
  color: var(--accent);
  font-weight: 900;
}

.tpl-footer {
  border-top: 1px solid var(--line);
  padding: 28px 24px;
  color: var(--muted2);
  text-align: center;
  font-size: 14px;
}

/* =========================
   TEMAS
   ========================= */

.theme-dark-blue {
  --page-bg: radial-gradient(circle at 10% 10%, rgba(56,189,248,.18), transparent 28%), #07111f;
  --bar-bg: rgba(7,17,31,.84);
  --text: #ffffff;
  --muted2: #cbd5e1;
  --line: rgba(255,255,255,.13);
  --accent: #38bdf8;
  --accent2: #fbbf24;
  --pill: rgba(56,189,248,.13);
  --soft2: rgba(255,255,255,.055);
  --card-bg: rgba(255,255,255,.075);
  --button-text: #06111f;
  --visual1: rgba(56,189,248,.42);
  --visual2: rgba(251,191,36,.32);
  --visual-base: #101c2e;
  --visual-line: rgba(255,255,255,.16);
  --visual-text: rgba(255,255,255,.90);
  --glass: rgba(255,255,255,.14);
  --glass-text: #fff;
  --glass-muted: rgba(255,255,255,.80);
  --banner-muted: rgba(255,255,255,.82);
  --shadow-soft: 0 18px 50px rgba(0,0,0,.20);
}

.theme-event-gold {
  --page-bg: linear-gradient(135deg, #08111f, #1e293b 58%, #431407);
  --bar-bg: rgba(8,17,31,.84);
  --text: #fff;
  --muted2: #f1d7b3;
  --line: rgba(255,255,255,.14);
  --accent: #fbbf24;
  --accent2: #fb7185;
  --pill: rgba(251,191,36,.15);
  --soft2: rgba(255,255,255,.06);
  --card-bg: rgba(255,255,255,.085);
  --button-text: #111827;
  --visual1: rgba(251,191,36,.48);
  --visual2: rgba(248,113,113,.36);
  --visual-base: #162033;
  --visual-line: rgba(255,255,255,.17);
  --visual-text: rgba(255,255,255,.92);
  --glass: rgba(255,255,255,.16);
  --glass-text: #fff;
  --glass-muted: rgba(255,255,255,.82);
  --banner-muted: rgba(255,255,255,.86);
  --shadow-soft: 0 18px 50px rgba(0,0,0,.22);
}

.theme-light-trust {
  --page-bg: linear-gradient(135deg, #f8fafc, #dbeafe 72%, #e0f2fe);
  --bar-bg: rgba(248,250,252,.86);
  --text: #0f172a;
  --muted2: #475569;
  --line: rgba(15,23,42,.13);
  --accent: #2563eb;
  --accent2: #16a34a;
  --pill: rgba(37,99,235,.10);
  --soft2: rgba(15,23,42,.045);
  --card-bg: rgba(255,255,255,.74);
  --button-text: #ffffff;
  --visual1: rgba(37,99,235,.34);
  --visual2: rgba(34,197,94,.28);
  --visual-base: #e2e8f0;
  --visual-line: rgba(15,23,42,.14);
  --visual-text: rgba(15,23,42,.82);
  --glass: rgba(255,255,255,.64);
  --glass-text: #0f172a;
  --glass-muted: #475569;
  --banner-muted: #334155;
  --shadow-soft: 0 18px 50px rgba(15,23,42,.10);
}

.theme-green-route {
  --page-bg: linear-gradient(145deg, #09090b, #172554 48%, #064e3b);
  --bar-bg: rgba(9,9,11,.82);
  --text: #fff;
  --muted2: #cbd5e1;
  --line: rgba(255,255,255,.13);
  --accent: #22c55e;
  --accent2: #38bdf8;
  --pill: rgba(34,197,94,.14);
  --soft2: rgba(255,255,255,.055);
  --card-bg: rgba(255,255,255,.075);
  --button-text: #04130a;
  --visual1: rgba(34,197,94,.42);
  --visual2: rgba(56,189,248,.30);
  --visual-base: #10291f;
  --visual-line: rgba(255,255,255,.15);
  --visual-text: rgba(255,255,255,.90);
  --glass: rgba(255,255,255,.14);
  --glass-text: #fff;
  --glass-muted: rgba(255,255,255,.80);
  --banner-muted: rgba(255,255,255,.83);
  --shadow-soft: 0 18px 50px rgba(0,0,0,.22);
}

.theme-warm-elegant {
  --page-bg: #f5efe6;
  --bar-bg: rgba(245,239,230,.88);
  --text: #1f2937;
  --muted2: #57534e;
  --line: rgba(31,41,55,.14);
  --accent: #92400e;
  --accent2: #b45309;
  --pill: rgba(146,64,14,.10);
  --soft2: rgba(31,41,55,.055);
  --card-bg: rgba(255,255,255,.62);
  --button-text: #ffffff;
  --visual1: rgba(146,64,14,.26);
  --visual2: rgba(251,191,36,.32);
  --visual-base: #e7d8c6;
  --visual-line: rgba(31,41,55,.14);
  --visual-text: rgba(31,41,55,.80);
  --glass: rgba(255,255,255,.58);
  --glass-text: #1f2937;
  --glass-muted: #57534e;
  --banner-muted: #44403c;
  --shadow-soft: 0 18px 50px rgba(31,41,55,.10);
}

.theme-tech-purple {
  --page-bg: radial-gradient(circle at top, rgba(139,92,246,.22), transparent 35%), #050816;
  --bar-bg: rgba(5,8,22,.84);
  --text: #fff;
  --muted2: #cbd5e1;
  --line: rgba(255,255,255,.13);
  --accent: #8b5cf6;
  --accent2: #38bdf8;
  --pill: rgba(139,92,246,.16);
  --soft2: rgba(255,255,255,.055);
  --card-bg: rgba(255,255,255,.075);
  --button-text: #ffffff;
  --visual1: rgba(139,92,246,.42);
  --visual2: rgba(56,189,248,.28);
  --visual-base: #111827;
  --visual-line: rgba(255,255,255,.15);
  --visual-text: rgba(255,255,255,.90);
  --glass: rgba(255,255,255,.14);
  --glass-text: #fff;
  --glass-muted: rgba(255,255,255,.80);
  --banner-muted: rgba(255,255,255,.83);
  --shadow-soft: 0 18px 50px rgba(0,0,0,.22);
}

.theme-orange-impact {
  --page-bg: linear-gradient(120deg, #172554 0%, #0f172a 52%, #451a03 100%);
  --bar-bg: rgba(15,23,42,.84);
  --text: #fff;
  --muted2: #e2e8f0;
  --line: rgba(255,255,255,.14);
  --accent: #fb923c;
  --accent2: #38bdf8;
  --pill: rgba(251,146,60,.14);
  --soft2: rgba(255,255,255,.06);
  --card-bg: rgba(255,255,255,.08);
  --button-text: #111827;
  --visual1: rgba(251,146,60,.46);
  --visual2: rgba(56,189,248,.30);
  --visual-base: #1e293b;
  --visual-line: rgba(255,255,255,.16);
  --visual-text: rgba(255,255,255,.90);
  --glass: rgba(255,255,255,.14);
  --glass-text: #fff;
  --glass-muted: rgba(255,255,255,.80);
  --banner-muted: rgba(255,255,255,.84);
  --shadow-soft: 0 18px 50px rgba(0,0,0,.22);
}

.theme-pink-premium {
  --page-bg: linear-gradient(135deg, #020617, #111827 45%, #3b0764);
  --bar-bg: rgba(2,6,23,.84);
  --text: #fff;
  --muted2: #e2e8f0;
  --line: rgba(255,255,255,.14);
  --accent: #fb7185;
  --accent2: #a78bfa;
  --pill: rgba(251,113,133,.14);
  --soft2: rgba(255,255,255,.06);
  --card-bg: rgba(255,255,255,.08);
  --button-text: #ffffff;
  --visual1: rgba(251,113,133,.42);
  --visual2: rgba(139,92,246,.36);
  --visual-base: #1f102b;
  --visual-line: rgba(255,255,255,.16);
  --visual-text: rgba(255,255,255,.90);
  --glass: rgba(255,255,255,.14);
  --glass-text: #fff;
  --glass-muted: rgba(255,255,255,.80);
  --banner-muted: rgba(255,255,255,.84);
  --shadow-soft: 0 18px 50px rgba(0,0,0,.22);
}

.theme-red-event {
  --page-bg: linear-gradient(135deg, #19060b, #431407 48%, #0f172a);
  --bar-bg: rgba(25,6,11,.84);
  --text: #fff;
  --muted2: #fecaca;
  --line: rgba(255,255,255,.14);
  --accent: #ef4444;
  --accent2: #fbbf24;
  --pill: rgba(239,68,68,.14);
  --soft2: rgba(255,255,255,.06);
  --card-bg: rgba(255,255,255,.08);
  --button-text: #ffffff;
  --visual1: rgba(239,68,68,.44);
  --visual2: rgba(251,191,36,.32);
  --visual-base: #24110f;
  --visual-line: rgba(255,255,255,.16);
  --visual-text: rgba(255,255,255,.90);
  --glass: rgba(255,255,255,.14);
  --glass-text: #fff;
  --glass-muted: rgba(255,255,255,.80);
  --banner-muted: rgba(255,255,255,.84);
  --shadow-soft: 0 18px 50px rgba(0,0,0,.22);
}

.theme-marine {
  --page-bg: linear-gradient(135deg, #001219, #003049 50%, #0f172a);
  --bar-bg: rgba(0,18,25,.86);
  --text: #fff;
  --muted2: #cde7ef;
  --line: rgba(255,255,255,.14);
  --accent: #00b4d8;
  --accent2: #90e0ef;
  --pill: rgba(0,180,216,.14);
  --soft2: rgba(255,255,255,.06);
  --card-bg: rgba(255,255,255,.08);
  --button-text: #001219;
  --visual1: rgba(0,180,216,.44);
  --visual2: rgba(144,224,239,.26);
  --visual-base: #082f49;
  --visual-line: rgba(255,255,255,.16);
  --visual-text: rgba(255,255,255,.90);
  --glass: rgba(255,255,255,.14);
  --glass-text: #fff;
  --glass-muted: rgba(255,255,255,.80);
  --banner-muted: rgba(255,255,255,.84);
  --shadow-soft: 0 18px 50px rgba(0,0,0,.22);
}

/* =========================
   VARIANTES DE COMPOSICIÓN
   ========================= */

.layout-center .tpl-hero {
  grid-template-columns: 1fr;
  text-align: center;
}

.layout-center .tpl-text {
  margin-left: auto;
  margin-right: auto;
}

.layout-center .tpl-actions {
  justify-content: center;
}

.layout-center .visual-panel {
  min-height: 390px;
}

.layout-reverse .tpl-hero {
  direction: rtl;
}

.layout-reverse .tpl-hero > * {
  direction: ltr;
}

.layout-wide {
  --hero-cols: .85fr 1.15fr;
}

.layout-compact .tpl-hero {
  grid-template-columns: 1fr;
  padding-bottom: 44px;
}

.layout-compact .visual-panel {
  min-height: 330px;
}

/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 1040px) {
  .template-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tpl-hero,
  .layout-reverse .tpl-hero,
  .layout-wide .tpl-hero {
    grid-template-columns: 1fr;
    direction: ltr;
  }

  .split,
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .template-grid {
    grid-template-columns: 1fr;
  }

  .tpl-menu {
    display: none;
  }

  .tpl-title,
  .selector-header h1 {
    font-size: 42px;
  }

  .visual-panel {
    min-height: 350px;
  }

  .tpl-section {
    padding: 52px 20px;
  }
}

/* =========================================================
   VARIACIONES GEOMÉTRICAS - POLIS.INNOVA
   Añadido para diferenciar plantillas por formas visuales.
   Ver líneas:
   nl -ba /srv/stack-polisinnova/web/html/assets/templates.css | tail -220
   ========================================================= */

/* ---------- Forma A: burbujas/círculos para eventos ---------- */

.shape-bubbles .grid-4,
.shape-bubbles .grid-3 {
  align-items: center;
}

.shape-bubbles .info-card {
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 34px;
}

.shape-bubbles .info-card:nth-child(even) {
  transform: translateY(28px);
}

.shape-bubbles .info-card h3 {
  font-size: 23px;
}

.shape-bubbles .info-card p {
  font-size: 15px;
}

.shape-bubbles .visual-panel {
  border-radius: 50% 28% 44% 36%;
}

.shape-bubbles .visual-panel::before {
  border-radius: 48% 32% 44% 34%;
}

/* ---------- Forma B: cápsulas suaves para seguros/bienestar ---------- */

.shape-pills .info-card {
  border-radius: 999px;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 30px 42px;
}

.shape-pills .info-card.big {
  border-radius: 70px;
}

.shape-pills .step {
  border-radius: 999px;
  padding: 22px 30px;
}

.shape-pills .split-panel {
  border-radius: 90px;
}

.shape-pills .visual-panel {
  border-radius: 80px;
}

/* ---------- Forma C: ruta aventurera/diagonales ---------- */

.shape-route .info-card {
  border-radius: 18px 56px 18px 56px;
  transform: skew(-2deg);
}

.shape-route .info-card > * {
  transform: skew(2deg);
}

.shape-route .step {
  border-radius: 18px 50px 18px 50px;
  position: relative;
}

.shape-route .step::after {
  content: "";
  position: absolute;
  left: 46px;
  bottom: -19px;
  width: 3px;
  height: 20px;
  background: var(--accent);
  opacity: 0.6;
}

.shape-route .step:last-child::after {
  display: none;
}

.shape-route .visual-panel {
  clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
  border-radius: 26px;
}

/* ---------- Forma D: hexágonos tecnológicos ---------- */

.shape-hex .info-card {
  clip-path: polygon(10% 0, 90% 0, 100% 18%, 100% 82%, 90% 100%, 10% 100%, 0 82%, 0 18%);
  border-radius: 0;
  padding: 42px 32px;
}

.shape-hex .grid-3,
.shape-hex .grid-4 {
  gap: 28px;
}

.shape-hex .visual-panel {
  clip-path: polygon(8% 0, 92% 0, 100% 12%, 100% 88%, 92% 100%, 8% 100%, 0 88%, 0 12%);
  border-radius: 0;
}

.shape-hex .float-card {
  clip-path: polygon(10% 0, 90% 0, 100% 20%, 100% 80%, 90% 100%, 10% 100%, 0 80%, 0 20%);
  border-radius: 0;
}

/* ---------- Forma E: impacto comercial con bloques inclinados ---------- */

.shape-slant .info-card {
  border-radius: 22px;
  transform: rotate(-1.3deg);
}

.shape-slant .info-card:nth-child(even) {
  transform: rotate(1.3deg);
}

.shape-slant .banner {
  border-radius: 24px;
  transform: skew(-3deg);
}

.shape-slant .banner > * {
  transform: skew(3deg);
}

.shape-slant .visual-panel {
  clip-path: polygon(0 0, 94% 0, 100% 100%, 6% 100%);
  border-radius: 26px;
}

/* ---------- Forma F: orgánica/elegante ---------- */

.shape-organic .info-card {
  border-radius: 42% 24% 34% 22% / 22% 38% 24% 36%;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.shape-organic .info-card:nth-child(even) {
  border-radius: 22% 38% 24% 42% / 34% 22% 40% 24%;
}

.shape-organic .visual-panel {
  border-radius: 36% 20% 32% 18% / 18% 36% 22% 34%;
}

.shape-organic .contact-box {
  border-radius: 60px 140px 60px 140px;
}

/* ---------- Forma G: mosaico editorial ---------- */

.shape-mosaic .grid-4 {
  grid-template-columns: 1.2fr 0.8fr 1fr 1fr;
}

.shape-mosaic .grid-4 .info-card:nth-child(1) {
  grid-row: span 2;
  min-height: 360px;
}

.shape-mosaic .grid-4 .info-card:nth-child(2) {
  border-radius: 120px 32px 32px 120px;
}

.shape-mosaic .grid-4 .info-card:nth-child(3) {
  border-radius: 32px 120px 32px 120px;
}

.shape-mosaic .grid-4 .info-card:nth-child(4) {
  border-radius: 32px;
}

.shape-mosaic .visual-panel {
  border-radius: 34px 160px 34px 90px;
}

/* ---------- Forma H: final mixta ---------- */

.shape-mix .info-card:nth-child(1) {
  border-radius: 999px;
  text-align: center;
}

.shape-mix .info-card:nth-child(2) {
  clip-path: polygon(10% 0, 90% 0, 100% 20%, 100% 80%, 90% 100%, 10% 100%, 0 80%, 0 20%);
  border-radius: 0;
}

.shape-mix .info-card:nth-child(3) {
  border-radius: 40% 20% 32% 22% / 24% 36% 24% 34%;
}

.shape-mix .info-card:nth-child(4) {
  border-radius: 18px 58px 18px 58px;
}

.shape-mix .visual-panel {
  border-radius: 42px;
  clip-path: polygon(0 0, 92% 0, 100% 18%, 94% 100%, 8% 100%, 0 82%);
}

/* ---------- Ajustes responsive para formas especiales ---------- */

@media (max-width: 1040px) {
  .shape-bubbles .info-card {
    aspect-ratio: auto;
    border-radius: 40px;
  }

  .shape-bubbles .info-card:nth-child(even) {
    transform: none;
  }

  .shape-route .info-card,
  .shape-route .info-card > *,
  .shape-slant .info-card,
  .shape-slant .info-card:nth-child(even),
  .shape-slant .banner,
  .shape-slant .banner > * {
    transform: none;
  }

  .shape-route .visual-panel,
  .shape-hex .visual-panel,
  .shape-slant .visual-panel,
  .shape-mix .visual-panel {
    clip-path: none;
    border-radius: 34px;
  }

  .shape-hex .info-card,
  .shape-hex .float-card,
  .shape-mix .info-card:nth-child(2) {
    clip-path: none;
    border-radius: 28px;
  }

  .shape-mosaic .grid-4 {
    grid-template-columns: 1fr;
  }

  .shape-mosaic .grid-4 .info-card:nth-child(1) {
    grid-row: auto;
    min-height: auto;
  }
}


/* =========================================================
   PLANTILLAS EXPERIMENTALES 21-25 - POLIS.INNOVA
   Diseños raros, visuales y diferenciados.
   Ver líneas:
   nl -ba /srv/stack-polisinnova/web/html/assets/templates.css | tail -520
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Space+Grotesk:wght@400;600;700;800&display=swap');

.weird-page {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  font-family: "Space Grotesk", Arial, Helvetica, sans-serif;
}

.weird-page a {
  color: inherit;
  text-decoration: none;
}

.weird-back {
  position: fixed;
  z-index: 50;
  top: 18px;
  left: 18px;
  padding: 11px 16px;
  border-radius: 999px;
  font-weight: 900;
  backdrop-filter: blur(14px);
  border: 1px solid currentColor;
}

.weird-mini {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.weird-title {
  margin: 0;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: clamp(58px, 12vw, 160px);
  line-height: .78;
  letter-spacing: .01em;
}

.weird-text {
  font-size: clamp(18px, 2vw, 23px);
  line-height: 1.55;
}

.weird-section-title {
  margin: 0 0 26px;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: clamp(44px, 7vw, 96px);
  line-height: .84;
}

.weird-footer {
  padding: 34px 22px;
  text-align: center;
  font-size: 14px;
}

/* =========================
   21 - ÓRBITA CREATIVA
   ========================= */

.orbit-page {
  color: #e0faff;
  background:
    radial-gradient(circle at 20% 20%, rgba(0, 255, 255, .22), transparent 26%),
    radial-gradient(circle at 75% 10%, rgba(255, 0, 153, .18), transparent 25%),
    radial-gradient(circle at 50% 90%, rgba(255, 212, 0, .16), transparent 30%),
    #030712;
}

.orbit-page .weird-back {
  color: #67e8f9;
  background: rgba(3, 7, 18, .62);
}

.orbit-hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 30px;
  padding: 100px 6vw 70px;
}

.orbit-copy {
  position: relative;
  z-index: 3;
}

.orbit-copy .weird-mini {
  color: #f0abfc;
}

.orbit-copy .weird-title span {
  color: #67e8f9;
}

.orbit-copy .weird-text {
  max-width: 660px;
  color: #bdefff;
}

.orbit-system {
  position: relative;
  min-height: 620px;
  display: grid;
  place-items: center;
}

.orbit-ring {
  position: absolute;
  border: 1px dashed rgba(103, 232, 249, .38);
  border-radius: 50%;
  animation: orbit-spin 26s linear infinite;
}

.orbit-ring.one {
  width: 520px;
  height: 520px;
}

.orbit-ring.two {
  width: 390px;
  height: 390px;
  animation-duration: 18s;
  animation-direction: reverse;
}

.orbit-ring.three {
  width: 250px;
  height: 250px;
  animation-duration: 12s;
}

.orbit-core {
  position: relative;
  z-index: 2;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 24px;
  font-weight: 900;
  font-size: 24px;
  background:
    radial-gradient(circle at 30% 25%, #fff, transparent 12%),
    linear-gradient(135deg, #22d3ee, #a855f7 55%, #facc15);
  color: #020617;
  box-shadow: 0 0 80px rgba(34, 211, 238, .45);
}

.planet {
  position: absolute;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 18px;
  font-weight: 900;
  color: #020617;
}

.planet.events {
  top: 40px;
  right: 80px;
  background: #facc15;
}

.planet.insurance {
  bottom: 80px;
  left: 45px;
  background: #67e8f9;
}

.planet.toledo {
  bottom: 40px;
  right: 70px;
  background: #f0abfc;
}

.orbit-content {
  padding: 40px 6vw 90px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.orbit-card {
  min-height: 280px;
  border-radius: 50%;
  padding: 34px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  border: 1px solid rgba(103, 232, 249, .35);
  background: rgba(255, 255, 255, .06);
  box-shadow: 0 24px 80px rgba(0,0,0,.38);
}

.orbit-card h2 {
  margin: 0 0 12px;
  font-size: 27px;
}

.orbit-card p {
  margin: 0;
  color: #bdefff;
}

@keyframes orbit-spin {
  to { transform: rotate(360deg); }
}

/* =========================
   22 - MAPA DE EXPEDICIÓN
   ========================= */

.map-page {
  color: #fff7ed;
  background:
    linear-gradient(135deg, rgba(15, 23, 42, .92), rgba(67, 20, 7, .92)),
    repeating-linear-gradient(45deg, rgba(251, 146, 60, .11) 0 2px, transparent 2px 18px);
}

.map-page .weird-back {
  color: #fed7aa;
  background: rgba(67, 20, 7, .55);
}

.map-shell {
  padding: 96px 6vw 60px;
}

.map-hero {
  display: grid;
  grid-template-columns: .88fr 1.12fr;
  gap: 44px;
  align-items: center;
}

.map-hero .weird-mini {
  color: #fdba74;
}

.map-hero .weird-text {
  color: #fed7aa;
  max-width: 620px;
}

.map-board {
  min-height: 620px;
  position: relative;
  border-radius: 42px;
  border: 2px solid rgba(253, 186, 116, .4);
  background:
    radial-gradient(circle at 20% 25%, rgba(251, 146, 60, .32), transparent 16%),
    radial-gradient(circle at 75% 70%, rgba(34, 197, 94, .25), transparent 18%),
    rgba(255, 255, 255, .055);
  overflow: hidden;
  clip-path: polygon(5% 0, 100% 0, 94% 100%, 0 93%);
}

.route-line {
  position: absolute;
  left: 14%;
  top: 20%;
  width: 72%;
  height: 60%;
  border: 4px dashed rgba(253, 186, 116, .70);
  border-left: 0;
  border-bottom: 0;
  border-radius: 0 180px 0 0;
  transform: rotate(-8deg);
}

.map-node {
  position: absolute;
  width: 122px;
  height: 122px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 14px;
  font-weight: 900;
  background: #fdba74;
  color: #431407;
  transform: rotate(45deg);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}

.map-node span {
  transform: rotate(-45deg);
}

.map-node.one { left: 12%; top: 18%; }
.map-node.two { right: 18%; top: 28%; background: #bbf7d0; color: #052e16; }
.map-node.three { left: 35%; bottom: 15%; background: #bae6fd; color: #082f49; }

.map-sections {
  padding: 70px 0 30px;
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 30px;
}

.map-big-word {
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: clamp(70px, 13vw, 170px);
  line-height: .75;
  color: rgba(253, 186, 116, .28);
}

.map-cards {
  display: grid;
  gap: 18px;
}

.map-card {
  padding: 26px;
  border: 1px solid rgba(253, 186, 116, .35);
  background: rgba(255,255,255,.075);
  clip-path: polygon(0 0, 96% 0, 100% 35%, 96% 100%, 0 100%, 4% 50%);
}

.map-card h2 {
  margin: 0 0 8px;
}

.map-card p {
  margin: 0;
  color: #fed7aa;
}

/* =========================
   23 - COLLAGE FESTIVAL
   ========================= */

.collage-page {
  color: #111827;
  background:
    radial-gradient(circle at 20% 15%, #fde047, transparent 20%),
    radial-gradient(circle at 85% 20%, #fb7185, transparent 22%),
    radial-gradient(circle at 55% 90%, #38bdf8, transparent 26%),
    #f8fafc;
}

.collage-page .weird-back {
  color: #111827;
  background: rgba(255,255,255,.70);
}

.collage-hero {
  min-height: 100vh;
  padding: 100px 6vw 60px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
}

.collage-title {
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: clamp(74px, 14vw, 190px);
  line-height: .72;
  margin: 0;
  color: #111827;
  text-shadow: 8px 8px 0 #fde047;
}

.collage-title span {
  display: block;
  color: #e11d48;
  text-shadow: 8px 8px 0 #38bdf8;
}

.collage-text {
  max-width: 590px;
  font-size: 22px;
  line-height: 1.55;
  color: #334155;
  font-weight: 700;
}

.sticker-wall {
  min-height: 600px;
  position: relative;
}

.sticker {
  position: absolute;
  width: 230px;
  min-height: 160px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 4px solid #111827;
  box-shadow: 12px 12px 0 #111827;
  font-weight: 900;
}

.sticker h2 {
  margin: 0 0 8px;
  font-size: 30px;
}

.sticker p {
  margin: 0;
  color: #1f2937;
}

.sticker.one {
  top: 30px;
  left: 40px;
  background: #fde047;
  transform: rotate(-8deg);
}

.sticker.two {
  top: 190px;
  right: 40px;
  background: #38bdf8;
  transform: rotate(7deg);
}

.sticker.three {
  bottom: 70px;
  left: 110px;
  background: #fb7185;
  transform: rotate(-4deg);
}

.sticker.four {
  bottom: 20px;
  right: 110px;
  background: #86efac;
  transform: rotate(11deg);
}

.collage-strip {
  padding: 40px 6vw 90px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.collage-block {
  min-height: 240px;
  padding: 24px;
  border: 4px solid #111827;
  box-shadow: 8px 8px 0 #111827;
  background: white;
}

.collage-block:nth-child(2) { background: #fde047; transform: rotate(2deg); }
.collage-block:nth-child(3) { background: #bae6fd; transform: rotate(-2deg); }
.collage-block:nth-child(4) { background: #fecdd3; transform: rotate(3deg); }

.collage-block h2 {
  margin: 0 0 12px;
  font-size: 28px;
}

.collage-block p {
  margin: 0;
  color: #334155;
}

/* =========================
   24 - CRISTAL PROTECTOR
   ========================= */

.crystal-page {
  color: #083344;
  background:
    linear-gradient(135deg, #ecfeff, #f8fafc 42%, #dbeafe),
    radial-gradient(circle at 15% 85%, rgba(14, 165, 233, .22), transparent 25%);
}

.crystal-page .weird-back {
  color: #0369a1;
  background: rgba(255,255,255,.62);
}

.crystal-hero {
  position: relative;
  padding: 110px 6vw 70px;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 44px;
  align-items: center;
}

.crystal-hero .weird-mini {
  color: #0284c7;
}

.crystal-hero .weird-title {
  color: #0f172a;
}

.crystal-hero .weird-text {
  color: #334155;
  max-width: 640px;
}

.prism-stage {
  min-height: 610px;
  position: relative;
}

.prism {
  position: absolute;
  inset: 60px 80px;
  clip-path: polygon(50% 0, 100% 26%, 84% 100%, 16% 100%, 0 26%);
  background:
    linear-gradient(135deg, rgba(255,255,255,.88), rgba(186,230,253,.50)),
    radial-gradient(circle at 30% 30%, rgba(34,211,238,.35), transparent 28%);
  border: 1px solid rgba(2,132,199,.24);
  box-shadow: 0 30px 100px rgba(2,132,199,.20);
}

.shield {
  position: absolute;
  width: 180px;
  min-height: 210px;
  padding: 24px;
  display: grid;
  place-items: center;
  text-align: center;
  font-weight: 900;
  color: #075985;
  background: rgba(255,255,255,.62);
  backdrop-filter: blur(18px);
  clip-path: polygon(50% 0, 100% 18%, 90% 72%, 50% 100%, 10% 72%, 0 18%);
  border: 1px solid rgba(14,165,233,.28);
}

.shield.one { left: 20px; top: 40px; }
.shield.two { right: 10px; top: 210px; }
.shield.three { left: 120px; bottom: 20px; }

.crystal-grid {
  padding: 30px 6vw 90px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.crystal-card {
  min-height: 270px;
  padding: 32px;
  background: rgba(255,255,255,.58);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(14,165,233,.24);
  box-shadow: 0 22px 70px rgba(2,132,199,.14);
  clip-path: polygon(12% 0, 100% 0, 88% 100%, 0 100%);
}

.crystal-card h2 {
  margin: 0 0 12px;
  color: #0f172a;
}

.crystal-card p {
  margin: 0;
  color: #334155;
}

/* =========================
   25 - MANIFIESTO BRUTALISTA
   ========================= */

.brutal-page {
  color: #f8fafc;
  background: #09090b;
}

.brutal-page .weird-back {
  color: #facc15;
  background: rgba(9,9,11,.72);
}

.brutal-hero {
  min-height: 100vh;
  padding: 90px 5vw 50px;
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 24px;
  align-items: stretch;
}

.brutal-left {
  border: 3px solid #f8fafc;
  padding: 34px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background:
    linear-gradient(135deg, rgba(250,204,21,.14), transparent 45%),
    #09090b;
}

.brutal-number {
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: clamp(110px, 18vw, 260px);
  line-height: .75;
  color: #facc15;
}

.brutal-copy {
  color: #d4d4d8;
  font-size: 22px;
  line-height: 1.55;
  max-width: 660px;
}

.brutal-right {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 24px;
}

.brutal-headline {
  border: 3px solid #f8fafc;
  padding: 34px;
  background: #facc15;
  color: #09090b;
  display: flex;
  align-items: end;
}

.brutal-headline h1 {
  margin: 0;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: clamp(72px, 11vw, 150px);
  line-height: .76;
}

.brutal-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.brutal-panel {
  border: 3px solid #f8fafc;
  padding: 26px;
  background: #18181b;
}

.brutal-panel:nth-child(2) {
  background: #e11d48;
}

.brutal-panel h2 {
  margin: 0 0 10px;
  font-size: 32px;
}

.brutal-panel p {
  margin: 0;
  color: #e4e4e7;
}

.brutal-section {
  padding: 60px 5vw 90px;
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 24px;
}

.brutal-list {
  display: grid;
  gap: 18px;
}

.brutal-row {
  border: 3px solid #f8fafc;
  padding: 24px;
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 18px;
  background: #111827;
}

.brutal-row strong {
  color: #facc15;
  font-size: 22px;
}

.brutal-row span {
  color: #d4d4d8;
}

.brutal-stamp {
  border: 3px solid #facc15;
  padding: 34px;
  display: grid;
  place-items: center;
  text-align: center;
  transform: rotate(2deg);
  background: #09090b;
}

.brutal-stamp h2 {
  margin: 0;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: clamp(58px, 8vw, 110px);
  line-height: .78;
  color: #facc15;
}

/* =========================
   RESPONSIVE EXPERIMENTALES
   ========================= */

@media (max-width: 1050px) {
  .orbit-hero,
  .map-hero,
  .collage-hero,
  .crystal-hero,
  .brutal-hero,
  .brutal-section,
  .map-sections {
    grid-template-columns: 1fr;
  }

  .orbit-content,
  .collage-strip,
  .crystal-grid {
    grid-template-columns: 1fr;
  }

  .orbit-card {
    border-radius: 38px;
    min-height: auto;
  }

  .map-board {
    clip-path: none;
  }

  .crystal-card {
    clip-path: none;
    border-radius: 32px;
  }

  .brutal-panels {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .weird-back {
    position: static;
    display: inline-flex;
    margin: 18px;
  }

  .orbit-hero,
  .map-shell,
  .collage-hero,
  .crystal-hero,
  .brutal-hero {
    padding-top: 40px;
  }

  .orbit-system,
  .sticker-wall,
  .prism-stage {
    min-height: 430px;
  }

  .orbit-ring.one {
    width: 340px;
    height: 340px;
  }

  .orbit-ring.two {
    width: 250px;
    height: 250px;
  }

  .orbit-ring.three {
    width: 160px;
    height: 160px;
  }

  .planet {
    width: 92px;
    height: 92px;
    font-size: 13px;
  }

  .sticker {
    position: relative;
    inset: auto !important;
    margin: 16px 0;
    width: auto;
    transform: none !important;
  }

  .sticker-wall {
    min-height: auto;
  }

  .shield {
    position: relative;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    margin: 16px auto;
  }

  .prism {
    inset: 20px;
  }

  .brutal-row {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   POLIS.INNOVA - EXPERIMENTOS PROFUNDOS 21-35
   Más contenido, líneas, puntos, símbolos, formas abstractas.
   Ver líneas:
   nl -ba /srv/stack-polisinnova/web/html/assets/templates.css | tail -900
   ========================================================= */

.deep-section {
  position: relative;
  padding: 80px 6vw;
  overflow: hidden;
}

.deep-section.compact {
  padding-top: 46px;
}

.deep-heading {
  max-width: 980px;
  margin-bottom: 34px;
}

.deep-heading.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.deep-heading h2 {
  margin: 0;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: clamp(48px, 8vw, 110px);
  line-height: .82;
  letter-spacing: .01em;
}

.deep-heading p {
  max-width: 760px;
  margin: 18px 0 0;
  font-size: 19px;
  line-height: 1.65;
}

.deep-heading.center p {
  margin-left: auto;
  margin-right: auto;
}

.deep-grid-2,
.deep-grid-3,
.deep-grid-4 {
  display: grid;
  gap: 24px;
}

.deep-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.deep-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.deep-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.deep-card {
  position: relative;
  min-height: 250px;
  padding: 28px;
  overflow: hidden;
}

.deep-card h3 {
  position: relative;
  z-index: 2;
  margin: 0 0 12px;
  font-size: 28px;
}

.deep-card p {
  position: relative;
  z-index: 2;
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
}

.deep-card ul {
  position: relative;
  z-index: 2;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.deep-card li {
  position: relative;
  padding-left: 24px;
}

.deep-card li::before {
  content: "•";
  position: absolute;
  left: 6px;
  top: 0;
  font-weight: 900;
}

.deep-line-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background:
    linear-gradient(90deg, currentColor 1px, transparent 1px),
    linear-gradient(0deg, currentColor 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(circle at center, black, transparent 72%);
}

.deep-dot-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(currentColor 1.3px, transparent 1.3px);
  background-size: 22px 22px;
  opacity: .26;
}

.deep-contact {
  margin-top: 40px;
  padding: 36px;
  border-radius: 42px;
  text-align: center;
}

.deep-contact h2 {
  margin: 0;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: clamp(44px, 7vw, 92px);
  line-height: .84;
}

.deep-contact p {
  max-width: 760px;
  margin: 16px auto 0;
  font-size: 18px;
  line-height: 1.65;
}

.deep-pill {
  display: inline-flex;
  margin-top: 24px;
  padding: 13px 18px;
  border-radius: 999px;
  font-weight: 900;
}

/* =========================
   AMPLIACIONES 21-25
   ========================= */

.orbit-extra {
  color: #e0faff;
  background: #030712;
}

.orbit-extra .deep-heading p,
.orbit-extra .deep-card p,
.orbit-extra .deep-card li,
.orbit-extra .deep-contact p {
  color: #bdefff;
}

.orbit-extra .deep-card {
  border: 1px solid rgba(103,232,249,.34);
  background: rgba(255,255,255,.055);
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.orbit-extra .deep-card:nth-child(2) {
  border-radius: 35% 65% 49% 51% / 44% 34% 66% 56%;
}

.orbit-extra .deep-card:nth-child(3) {
  border-radius: 24% 76% 28% 72% / 70% 22% 78% 30%;
}

.orbit-extra .deep-card li {
  padding-left: 0;
}

.orbit-extra .deep-card li::before {
  display: none;
}

.orbit-extra .deep-contact {
  border: 1px solid rgba(103,232,249,.35);
  background:
    radial-gradient(circle at 10% 20%, rgba(103,232,249,.20), transparent 22%),
    radial-gradient(circle at 90% 70%, rgba(240,171,252,.16), transparent 24%),
    rgba(255,255,255,.055);
}

.map-extra {
  color: #fff7ed;
  background:
    linear-gradient(135deg, rgba(15,23,42,.98), rgba(67,20,7,.95)),
    repeating-linear-gradient(-45deg, rgba(253,186,116,.08) 0 2px, transparent 2px 22px);
}

.map-extra .deep-heading p,
.map-extra .deep-card p,
.map-extra .deep-card li,
.map-extra .deep-contact p {
  color: #fed7aa;
}

.map-extra .deep-card {
  border: 1px solid rgba(253,186,116,.35);
  background: rgba(255,255,255,.065);
  clip-path: polygon(0 0, 94% 0, 100% 28%, 94% 100%, 0 100%, 5% 50%);
}

.map-extra .deep-card::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 18px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #fdba74;
  box-shadow: 38px 22px 0 rgba(253,186,116,.55), 78px -4px 0 rgba(253,186,116,.35);
}

.map-extra .deep-contact {
  border: 1px dashed rgba(253,186,116,.55);
  background: rgba(255,255,255,.065);
  clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 92%);
}

.collage-extra {
  color: #111827;
  background:
    radial-gradient(circle at 15% 20%, rgba(253,224,71,.42), transparent 22%),
    radial-gradient(circle at 90% 10%, rgba(251,113,133,.32), transparent 24%),
    #f8fafc;
}

.collage-extra .deep-heading p,
.collage-extra .deep-card p,
.collage-extra .deep-card li,
.collage-extra .deep-contact p {
  color: #334155;
}

.collage-extra .deep-card {
  background: white;
  border: 4px solid #111827;
  box-shadow: 9px 9px 0 #111827;
}

.collage-extra .deep-card:nth-child(1) { transform: rotate(-2deg); background: #fde047; }
.collage-extra .deep-card:nth-child(2) { transform: rotate(2deg); background: #bae6fd; }
.collage-extra .deep-card:nth-child(3) { transform: rotate(-1deg); background: #fecdd3; }
.collage-extra .deep-card:nth-child(4) { transform: rotate(1.6deg); background: #bbf7d0; }

.collage-extra .deep-contact {
  background: #111827;
  color: white;
  border: 4px solid #111827;
  box-shadow: 13px 13px 0 #facc15;
  transform: rotate(-1deg);
}

.crystal-extra {
  color: #083344;
  background:
    linear-gradient(135deg, #ecfeff, #f8fafc 45%, #dbeafe);
}

.crystal-extra .deep-heading p,
.crystal-extra .deep-card p,
.crystal-extra .deep-card li,
.crystal-extra .deep-contact p {
  color: #334155;
}

.crystal-extra .deep-card {
  border: 1px solid rgba(14,165,233,.28);
  background: rgba(255,255,255,.58);
  backdrop-filter: blur(16px);
  box-shadow: 0 22px 70px rgba(2,132,199,.12);
  clip-path: polygon(12% 0, 100% 0, 88% 100%, 0 100%);
}

.crystal-extra .deep-card:nth-child(even) {
  clip-path: polygon(0 0, 88% 0, 100% 100%, 12% 100%);
}

.crystal-extra .deep-contact {
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(14,165,233,.24);
  clip-path: polygon(7% 0, 93% 0, 100% 18%, 88% 100%, 12% 100%, 0 18%);
}

.brutal-extra {
  color: #f8fafc;
  background: #09090b;
}

.brutal-extra .deep-heading p,
.brutal-extra .deep-card p,
.brutal-extra .deep-card li,
.brutal-extra .deep-contact p {
  color: #d4d4d8;
}

.brutal-extra .deep-card {
  border: 3px solid #f8fafc;
  background: #111827;
  box-shadow: 10px 10px 0 #facc15;
}

.brutal-extra .deep-card:nth-child(2) {
  background: #be123c;
  transform: rotate(1deg);
}

.brutal-extra .deep-card:nth-child(3) {
  background: #1d4ed8;
  transform: rotate(-1deg);
}

.brutal-extra .deep-card:nth-child(4) {
  background: #18181b;
}

.brutal-extra .deep-contact {
  border: 3px solid #facc15;
  background: #09090b;
  box-shadow: 13px 13px 0 #facc15;
}

/* =========================
   NUEVAS 26-35 - BASE
   ========================= */

.x-page {
  min-height: 100vh;
  overflow-x: hidden;
  font-family: "Space Grotesk", Arial, Helvetica, sans-serif;
}

.x-page a {
  color: inherit;
  text-decoration: none;
}

.x-back {
  position: fixed;
  z-index: 80;
  top: 18px;
  left: 18px;
  padding: 11px 16px;
  border-radius: 999px;
  font-weight: 900;
  backdrop-filter: blur(14px);
  border: 1px solid currentColor;
}

.x-hero {
  position: relative;
  min-height: 100vh;
  padding: 105px 6vw 70px;
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 44px;
  align-items: center;
  overflow: hidden;
}

.x-mini {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.x-title {
  margin: 18px 0;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: clamp(62px, 12vw, 170px);
  line-height: .76;
}

.x-text {
  max-width: 660px;
  font-size: 20px;
  line-height: 1.62;
}

.x-stage {
  position: relative;
  min-height: 610px;
}

.x-section {
  position: relative;
  padding: 80px 6vw;
}

.x-heading {
  max-width: 940px;
  margin-bottom: 34px;
}

.x-heading.center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.x-heading h2 {
  margin: 0;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: clamp(48px, 8vw, 112px);
  line-height: .82;
}

.x-heading p {
  margin: 16px 0 0;
  max-width: 760px;
  font-size: 19px;
  line-height: 1.65;
}

.x-heading.center p {
  margin-left: auto;
  margin-right: auto;
}

.x-grid {
  display: grid;
  gap: 24px;
}

.x-grid.two { grid-template-columns: repeat(2, 1fr); }
.x-grid.three { grid-template-columns: repeat(3, 1fr); }
.x-grid.four { grid-template-columns: repeat(4, 1fr); }

.x-card {
  position: relative;
  min-height: 250px;
  padding: 28px;
  overflow: hidden;
}

.x-card h3 {
  position: relative;
  z-index: 2;
  margin: 0 0 12px;
  font-size: 28px;
}

.x-card p {
  position: relative;
  z-index: 2;
  margin: 0;
  line-height: 1.62;
}

.x-footer {
  padding: 34px 6vw;
  text-align: center;
}

/* =========================
   26 - ECOSISTEMA ALIENÍGENA
   ========================= */

.bio-page {
  color: #d9f99d;
  background:
    radial-gradient(circle at 15% 10%, rgba(217,249,157,.22), transparent 24%),
    radial-gradient(circle at 85% 30%, rgba(45,212,191,.20), transparent 24%),
    #05110a;
}

.bio-page .x-back {
  color: #bef264;
  background: rgba(5,17,10,.70);
}

.bio-page .x-mini { color: #2dd4bf; }
.bio-page .x-text,
.bio-page .x-heading p,
.bio-page .x-card p { color: #bbf7d0; }

.bio-amoeba {
  position: absolute;
  border: 1px solid rgba(190,242,100,.35);
  background:
    radial-gradient(circle at 30% 25%, rgba(190,242,100,.45), transparent 15%),
    radial-gradient(circle at 70% 80%, rgba(45,212,191,.35), transparent 22%),
    rgba(255,255,255,.055);
  box-shadow: 0 0 80px rgba(190,242,100,.18);
}

.bio-amoeba.one {
  width: 420px;
  height: 330px;
  left: 8%;
  top: 10%;
  border-radius: 44% 56% 67% 33% / 42% 39% 61% 58%;
}

.bio-amoeba.two {
  width: 330px;
  height: 410px;
  right: 5%;
  top: 20%;
  border-radius: 63% 37% 42% 58% / 35% 54% 46% 65%;
}

.bio-amoeba.three {
  width: 250px;
  height: 230px;
  left: 36%;
  bottom: 8%;
  border-radius: 72% 28% 49% 51% / 41% 67% 33% 59%;
}

.bio-eye {
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #bef264;
  color: #052e16;
  font-weight: 900;
  box-shadow: 0 0 70px rgba(190,242,100,.40);
}

.bio-eye::before {
  content: "";
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #052e16;
  box-shadow: inset 0 0 0 14px #2dd4bf;
}

.bio-eye.main {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.bio-page .x-card {
  border: 1px solid rgba(190,242,100,.30);
  background: rgba(255,255,255,.055);
  border-radius: 45% 22% 40% 20% / 20% 44% 24% 46%;
}

.bio-page .x-card:nth-child(even) {
  border-radius: 22% 48% 20% 44% / 46% 24% 44% 20%;
}

/* =========================
   27 - CIRCUITO NEÓN
   ========================= */

.circuit-page {
  color: #e0f2fe;
  background:
    linear-gradient(90deg, rgba(56,189,248,.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(56,189,248,.08) 1px, transparent 1px),
    #020617;
  background-size: 38px 38px;
}

.circuit-page .x-back {
  color: #38bdf8;
  background: rgba(2,6,23,.74);
}

.circuit-page .x-mini { color: #f0abfc; }
.circuit-page .x-text,
.circuit-page .x-heading p,
.circuit-page .x-card p { color: #bae6fd; }

.circuit-board {
  position: absolute;
  inset: 40px;
  border: 1px solid rgba(56,189,248,.30);
  background: rgba(255,255,255,.035);
  clip-path: polygon(6% 0, 94% 0, 100% 12%, 100% 88%, 94% 100%, 6% 100%, 0 88%, 0 12%);
}

.circuit-line {
  position: absolute;
  height: 4px;
  background: #38bdf8;
  box-shadow: 0 0 18px #38bdf8;
}

.circuit-line.a { width: 70%; left: 10%; top: 20%; }
.circuit-line.b { width: 48%; right: 12%; top: 48%; }
.circuit-line.c { width: 66%; left: 16%; bottom: 22%; }

.circuit-dot {
  position: absolute;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #f0abfc;
  box-shadow: 0 0 28px #f0abfc;
}

.circuit-dot.one { left: 18%; top: 17%; }
.circuit-dot.two { right: 24%; top: 44%; }
.circuit-dot.three { left: 42%; bottom: 18%; }

.circuit-chip {
  position: absolute;
  inset: 36% 32%;
  display: grid;
  place-items: center;
  border: 2px solid #38bdf8;
  box-shadow: 0 0 45px rgba(56,189,248,.35);
  color: #38bdf8;
  font-weight: 900;
  background: #020617;
}

.circuit-page .x-card {
  border: 1px solid rgba(56,189,248,.35);
  background: rgba(255,255,255,.045);
  clip-path: polygon(8% 0, 92% 0, 100% 18%, 100% 82%, 92% 100%, 8% 100%, 0 82%, 0 18%);
}

/* =========================
   28 - PORTAL DIMENSIONAL
   ========================= */

.portal-page {
  color: #fff;
  background:
    radial-gradient(circle at center, rgba(168,85,247,.28), transparent 20%),
    linear-gradient(135deg, #030712, #24003b 60%, #0f172a);
}

.portal-page .x-back {
  color: #f0abfc;
  background: rgba(3,7,18,.68);
}

.portal-page .x-mini { color: #facc15; }
.portal-page .x-text,
.portal-page .x-heading p,
.portal-page .x-card p { color: #e9d5ff; }

.portal-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(240,171,252,.55);
  box-shadow: 0 0 70px rgba(168,85,247,.38);
}

.portal-ring.one { width: 560px; height: 560px; }
.portal-ring.two { width: 430px; height: 430px; border-style: dashed; }
.portal-ring.three { width: 280px; height: 280px; }

.portal-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 190px;
  height: 190px;
  display: grid;
  place-items: center;
  text-align: center;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: conic-gradient(from 90deg, #facc15, #f0abfc, #38bdf8, #facc15);
  color: #111827;
  font-weight: 900;
}

.portal-fragment {
  position: absolute;
  width: 120px;
  height: 120px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.24);
  clip-path: polygon(50% 0, 100% 35%, 80% 100%, 20% 100%, 0 35%);
}

.portal-fragment.a { left: 5%; top: 12%; }
.portal-fragment.b { right: 4%; top: 28%; transform: rotate(25deg); }
.portal-fragment.c { left: 16%; bottom: 10%; transform: rotate(-18deg); }

.portal-page .x-card {
  border: 1px solid rgba(240,171,252,.35);
  background: rgba(255,255,255,.065);
  border-radius: 50px 10px 50px 10px;
}

/* =========================
   29 - TÓTEMS / SEÑALES
   ========================= */

.totem-page {
  color: #fff7ed;
  background:
    radial-gradient(circle at 20% 15%, rgba(251,146,60,.20), transparent 28%),
    #1c1008;
}

.totem-page .x-back {
  color: #fdba74;
  background: rgba(28,16,8,.72);
}

.totem-page .x-mini { color: #fde68a; }
.totem-page .x-text,
.totem-page .x-heading p,
.totem-page .x-card p { color: #fed7aa; }

.totem-stack {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 340px;
  transform: translate(-50%, -50%);
  display: grid;
  gap: 14px;
}

.totem-piece {
  min-height: 95px;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 24px;
  color: #1c1008;
  border: 4px solid #1c1008;
  box-shadow: 10px 10px 0 rgba(0,0,0,.30);
}

.totem-piece:nth-child(1) {
  background: #fdba74;
  clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%);
}

.totem-piece:nth-child(2) {
  background: #fde047;
  border-radius: 999px;
}

.totem-piece:nth-child(3) {
  background: #86efac;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  min-height: 140px;
}

.totem-piece:nth-child(4) {
  background: #bae6fd;
  clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%);
}

.totem-symbol {
  position: absolute;
  font-size: 58px;
  color: rgba(253,186,116,.45);
}

.totem-symbol.a { left: 8%; top: 16%; }
.totem-symbol.b { right: 10%; top: 28%; }
.totem-symbol.c { left: 20%; bottom: 18%; }

.totem-page .x-card {
  background: rgba(255,255,255,.065);
  border: 2px solid rgba(253,186,116,.32);
}

.totem-page .x-card:nth-child(1) { border-radius: 999px 999px 28px 28px; }
.totem-page .x-card:nth-child(2) { clip-path: polygon(50% 0, 100% 100%, 0 100%); padding-top: 86px; }
.totem-page .x-card:nth-child(3) { border-radius: 30px 90px 30px 90px; }

/* =========================
   30 - LÍQUIDO VIVO
   ========================= */

.liquid-page {
  color: #ecfeff;
  background:
    radial-gradient(circle at 20% 20%, rgba(45,212,191,.30), transparent 25%),
    radial-gradient(circle at 80% 15%, rgba(59,130,246,.25), transparent 26%),
    #042f2e;
}

.liquid-page .x-back {
  color: #99f6e4;
  background: rgba(4,47,46,.72);
}

.liquid-page .x-mini { color: #67e8f9; }
.liquid-page .x-text,
.liquid-page .x-heading p,
.liquid-page .x-card p { color: #ccfbf1; }

.liquid-blob {
  position: absolute;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.45), transparent 12%),
    linear-gradient(135deg, rgba(45,212,191,.70), rgba(59,130,246,.45));
  border: 1px solid rgba(153,246,228,.35);
  box-shadow: 0 30px 90px rgba(45,212,191,.22);
}

.liquid-blob.one {
  width: 430px;
  height: 430px;
  left: 10%;
  top: 9%;
  border-radius: 54% 46% 60% 40% / 46% 52% 48% 54%;
}

.liquid-blob.two {
  width: 310px;
  height: 260px;
  right: 6%;
  top: 26%;
  border-radius: 30% 70% 35% 65% / 64% 28% 72% 36%;
}

.liquid-blob.three {
  width: 220px;
  height: 300px;
  right: 26%;
  bottom: 8%;
  border-radius: 70% 30% 52% 48% / 34% 66% 34% 66%;
}

.liquid-label {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 240px;
  transform: translate(-50%, -50%);
  text-align: center;
  font-weight: 900;
  font-size: 30px;
}

.liquid-page .x-card {
  border: 1px solid rgba(153,246,228,.32);
  background: rgba(255,255,255,.06);
  border-radius: 60% 40% 50% 50% / 42% 58% 42% 58%;
}

/* =========================
   31 - RECORTES IMPOSIBLES
   ========================= */

.cut-page {
  color: #111827;
  background:
    linear-gradient(90deg, rgba(17,24,39,.08) 1px, transparent 1px),
    #fff7ed;
  background-size: 28px 28px;
}

.cut-page .x-back {
  color: #111827;
  background: rgba(255,255,255,.75);
}

.cut-page .x-mini { color: #dc2626; }
.cut-page .x-text,
.cut-page .x-heading p,
.cut-page .x-card p { color: #374151; }

.cut-paper {
  position: absolute;
  padding: 30px;
  display: grid;
  place-items: center;
  text-align: center;
  font-weight: 900;
  font-size: 26px;
  color: #111827;
  border: 3px solid #111827;
  box-shadow: 12px 12px 0 #111827;
}

.cut-paper.one {
  width: 310px;
  height: 260px;
  left: 8%;
  top: 8%;
  background: #fde047;
  transform: rotate(-8deg);
  clip-path: polygon(7% 0, 100% 10%, 88% 100%, 0 91%);
}

.cut-paper.two {
  width: 300px;
  height: 330px;
  right: 7%;
  top: 18%;
  background: #fb7185;
  transform: rotate(7deg);
  clip-path: polygon(0 12%, 88% 0, 100% 88%, 12% 100%);
}

.cut-paper.three {
  width: 340px;
  height: 190px;
  left: 28%;
  bottom: 10%;
  background: #38bdf8;
  transform: rotate(-2deg);
  clip-path: polygon(3% 0, 100% 0, 93% 100%, 0 84%);
}

.cut-page .x-card {
  border: 3px solid #111827;
  box-shadow: 8px 8px 0 #111827;
  background: #ffffff;
}

.cut-page .x-card:nth-child(1) { transform: rotate(-2deg); background: #fde047; }
.cut-page .x-card:nth-child(2) { transform: rotate(2deg); background: #bae6fd; }
.cut-page .x-card:nth-child(3) { transform: rotate(-1deg); background: #fecdd3; }

/* =========================
   32 - JARDÍN EXTRATERRESTRE
   ========================= */

.gardenx-page {
  color: #f0fdf4;
  background:
    radial-gradient(circle at 20% 90%, rgba(34,197,94,.25), transparent 24%),
    radial-gradient(circle at 85% 20%, rgba(217,70,239,.18), transparent 26%),
    #07130a;
}

.gardenx-page .x-back {
  color: #86efac;
  background: rgba(7,19,10,.72);
}

.gardenx-page .x-mini { color: #d946ef; }
.gardenx-page .x-text,
.gardenx-page .x-heading p,
.gardenx-page .x-card p { color: #bbf7d0; }

.stem {
  position: absolute;
  bottom: 5%;
  width: 9px;
  background: #86efac;
  box-shadow: 0 0 20px rgba(134,239,172,.35);
  border-radius: 999px;
}

.stem.one { height: 430px; left: 18%; transform: rotate(-8deg); }
.stem.two { height: 520px; left: 48%; transform: rotate(3deg); }
.stem.three { height: 380px; right: 18%; transform: rotate(9deg); }

.flowerx {
  position: absolute;
  width: 170px;
  height: 170px;
  display: grid;
  place-items: center;
  text-align: center;
  border-radius: 50%;
  background:
    radial-gradient(circle, #07130a 0 22%, transparent 23%),
    conic-gradient(#d946ef, #86efac, #38bdf8, #d946ef);
  color: white;
  font-weight: 900;
}

.flowerx.one { left: 10%; top: 16%; }
.flowerx.two { left: 39%; top: 7%; }
.flowerx.three { right: 10%; top: 24%; }

.gardenx-page .x-card {
  border: 1px solid rgba(134,239,172,.30);
  background: rgba(255,255,255,.055);
  border-radius: 999px 999px 42px 42px;
}

/* =========================
   33 - RADAR GLITCH
   ========================= */

.radar-page {
  color: #dcfce7;
  background:
    repeating-linear-gradient(0deg, rgba(34,197,94,.06) 0 1px, transparent 1px 5px),
    #020617;
}

.radar-page .x-back {
  color: #22c55e;
  background: rgba(2,6,23,.75);
}

.radar-page .x-mini { color: #22c55e; }
.radar-page .x-text,
.radar-page .x-heading p,
.radar-page .x-card p { color: #bbf7d0; }

.radar-circle {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  border: 1px solid rgba(34,197,94,.34);
  transform: translate(-50%, -50%);
}

.radar-circle.one { width: 560px; height: 560px; }
.radar-circle.two { width: 410px; height: 410px; }
.radar-circle.three { width: 250px; height: 250px; }

.radar-sweep {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 280px;
  height: 280px;
  transform-origin: 0 0;
  background: conic-gradient(from 0deg, rgba(34,197,94,.48), transparent 38%);
  border-radius: 50%;
  animation: orbit-spin 7s linear infinite;
}

.radar-blip {
  position: absolute;
  width: 18px;
  height: 18px;
  background: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 30px #22c55e;
}

.radar-blip.a { left: 30%; top: 22%; }
.radar-blip.b { right: 25%; top: 42%; }
.radar-blip.c { left: 45%; bottom: 20%; }

.radar-page .x-card {
  border: 1px solid rgba(34,197,94,.34);
  background: rgba(34,197,94,.055);
  border-radius: 14px;
  box-shadow: inset 0 0 30px rgba(34,197,94,.08);
}

/* =========================
   34 - CONSTELACIÓN ESTRATÉGICA
   ========================= */

.star-page {
  color: #eef2ff;
  background:
    radial-gradient(circle at 20% 20%, rgba(129,140,248,.22), transparent 24%),
    radial-gradient(circle at 80% 70%, rgba(56,189,248,.16), transparent 24%),
    #020617;
}

.star-page .x-back {
  color: #a5b4fc;
  background: rgba(2,6,23,.72);
}

.star-page .x-mini { color: #facc15; }
.star-page .x-text,
.star-page .x-heading p,
.star-page .x-card p { color: #c7d2fe; }

.constellation {
  position: absolute;
  inset: 8%;
}

.star-dot {
  position: absolute;
  width: 22px;
  height: 22px;
  background: #facc15;
  border-radius: 50%;
  box-shadow: 0 0 30px #facc15;
}

.star-dot.a { left: 12%; top: 18%; }
.star-dot.b { left: 42%; top: 10%; }
.star-dot.c { right: 18%; top: 28%; }
.star-dot.d { left: 30%; bottom: 22%; }
.star-dot.e { right: 28%; bottom: 12%; }

.star-line {
  position: absolute;
  height: 2px;
  background: rgba(250,204,21,.48);
  transform-origin: left center;
}

.star-line.one { left: 15%; top: 22%; width: 180px; transform: rotate(-9deg); }
.star-line.two { left: 44%; top: 14%; width: 210px; transform: rotate(24deg); }
.star-line.three { left: 34%; bottom: 27%; width: 270px; transform: rotate(-10deg); }

.star-label {
  position: absolute;
  padding: 13px 16px;
  border-radius: 999px;
  border: 1px solid rgba(165,180,252,.34);
  background: rgba(255,255,255,.075);
  font-weight: 900;
}

.star-label.one { left: 5%; top: 30%; }
.star-label.two { right: 8%; top: 42%; }
.star-label.three { left: 36%; bottom: 3%; }

.star-page .x-card {
  border: 1px solid rgba(165,180,252,.30);
  background: rgba(255,255,255,.055);
  clip-path: polygon(50% 0, 100% 35%, 82% 100%, 18% 100%, 0 35%);
  padding-top: 52px;
}

/* =========================
   35 - ATLAS MÍTICO FINAL
   ========================= */

.atlas-page {
  color: #fff7ed;
  background:
    radial-gradient(circle at 15% 15%, rgba(251,191,36,.20), transparent 24%),
    radial-gradient(circle at 85% 30%, rgba(168,85,247,.20), transparent 26%),
    linear-gradient(135deg, #111827, #2b1608);
}

.atlas-page .x-back {
  color: #facc15;
  background: rgba(17,24,39,.75);
}

.atlas-page .x-mini { color: #facc15; }
.atlas-page .x-text,
.atlas-page .x-heading p,
.atlas-page .x-card p { color: #fed7aa; }

.atlas-wheel {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 560px;
  height: 560px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 3px solid rgba(250,204,21,.35);
  background:
    radial-gradient(circle, rgba(250,204,21,.18) 0 18%, transparent 19%),
    conic-gradient(from 20deg, rgba(250,204,21,.25), rgba(168,85,247,.20), rgba(56,189,248,.18), rgba(250,204,21,.25));
}

.atlas-wheel::before,
.atlas-wheel::after {
  content: "";
  position: absolute;
  inset: 70px;
  border-radius: 50%;
  border: 1px dashed rgba(250,204,21,.38);
}

.atlas-wheel::after {
  inset: 150px;
}

.atlas-rune {
  position: absolute;
  width: 120px;
  height: 120px;
  display: grid;
  place-items: center;
  font-size: 44px;
  font-weight: 900;
  color: #111827;
  background: #facc15;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.atlas-rune.a { left: 10%; top: 12%; }
.atlas-rune.b { right: 12%; top: 18%; }
.atlas-rune.c { left: 18%; bottom: 14%; }
.atlas-rune.d { right: 18%; bottom: 12%; }

.atlas-center {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 210px;
  height: 210px;
  display: grid;
  place-items: center;
  text-align: center;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #fff7ed;
  color: #111827;
  font-weight: 900;
  font-size: 24px;
}

.atlas-page .x-card {
  border: 1px solid rgba(250,204,21,.32);
  background: rgba(255,255,255,.065);
}

.atlas-page .x-card:nth-child(1) { border-radius: 999px 40px 999px 40px; }
.atlas-page .x-card:nth-child(2) { clip-path: polygon(50% 0, 100% 30%, 90% 100%, 10% 100%, 0 30%); }
.atlas-page .x-card:nth-child(3) { border-radius: 40px 999px 40px 999px; }

/* =========================
   RESPONSIVE NUEVAS 26-35
   ========================= */

@media (max-width: 1050px) {
  .x-hero,
  .deep-grid-2,
  .deep-grid-3,
  .deep-grid-4,
  .x-grid.two,
  .x-grid.three,
  .x-grid.four {
    grid-template-columns: 1fr;
  }

  .x-stage {
    min-height: 460px;
  }

  .orbit-extra .deep-card {
    border-radius: 34px;
    aspect-ratio: auto;
  }

  .map-extra .deep-card,
  .crystal-extra .deep-card,
  .crystal-extra .deep-contact,
  .star-page .x-card,
  .atlas-page .x-card:nth-child(2) {
    clip-path: none;
    border-radius: 34px;
  }

  .cut-page .x-card {
    transform: none !important;
  }
}

@media (max-width: 620px) {
  .x-back {
    position: static;
    display: inline-flex;
    margin: 18px;
  }

  .x-hero {
    padding-top: 38px;
  }

  .bio-amoeba,
  .liquid-blob,
  .cut-paper,
  .flowerx,
  .stem,
  .totem-symbol,
  .atlas-rune {
    position: relative;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 16px auto;
  }

  .bio-amoeba,
  .liquid-blob {
    width: 260px !important;
    height: 220px !important;
  }

  .circuit-board,
  .portal-ring.one,
  .portal-ring.two,
  .portal-ring.three,
  .radar-circle.one,
  .radar-circle.two,
  .radar-circle.three,
  .atlas-wheel {
    transform: scale(.62) translate(-80%, -80%);
  }
}


/* =========================================================
   POLIS.INNOVA - PLANTILLAS ANIMADAS 36-45
   Movimiento, partículas, líneas, puntos y formas raras.
   Ver líneas:
   nl -ba /srv/stack-polisinnova/web/html/assets/templates.css | tail -1200
   ========================================================= */

.motion-page {
  min-height: 100vh;
  overflow-x: hidden;
  font-family: "Space Grotesk", Arial, Helvetica, sans-serif;
  color: var(--m-text);
  background: var(--m-bg);
}

.motion-page a {
  color: inherit;
  text-decoration: none;
}

.motion-back {
  position: fixed;
  z-index: 90;
  top: 18px;
  left: 18px;
  padding: 11px 16px;
  border-radius: 999px;
  font-weight: 900;
  backdrop-filter: blur(14px);
  border: 1px solid currentColor;
  color: var(--m-accent);
  background: var(--m-back);
}

.motion-hero {
  position: relative;
  min-height: 100vh;
  padding: 106px 6vw 76px;
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: 42px;
  align-items: center;
  overflow: hidden;
}

.motion-copy {
  position: relative;
  z-index: 3;
}

.motion-mini {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--m-accent2);
}

.motion-title {
  margin: 18px 0;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: clamp(62px, 12vw, 168px);
  line-height: .76;
}

.motion-text {
  max-width: 680px;
  font-size: 20px;
  line-height: 1.62;
  color: var(--m-muted);
}

.motion-stage {
  position: relative;
  min-height: 640px;
  overflow: hidden;
}

.motion-section {
  position: relative;
  padding: 82px 6vw;
  overflow: hidden;
}

.motion-heading {
  max-width: 980px;
  margin-bottom: 34px;
}

.motion-heading.center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.motion-heading h2 {
  margin: 0;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: clamp(48px, 8vw, 112px);
  line-height: .82;
}

.motion-heading p {
  max-width: 780px;
  margin: 16px 0 0;
  font-size: 19px;
  line-height: 1.65;
  color: var(--m-muted);
}

.motion-heading.center p {
  margin-left: auto;
  margin-right: auto;
}

.motion-grid {
  display: grid;
  gap: 24px;
}

.motion-grid.two { grid-template-columns: repeat(2, 1fr); }
.motion-grid.three { grid-template-columns: repeat(3, 1fr); }
.motion-grid.four { grid-template-columns: repeat(4, 1fr); }

.motion-card {
  position: relative;
  min-height: 250px;
  padding: 28px;
  overflow: hidden;
  border: 1px solid var(--m-line);
  background: var(--m-card);
  box-shadow: var(--m-shadow);
}

.motion-card h3 {
  position: relative;
  z-index: 2;
  margin: 0 0 12px;
  font-size: 28px;
}

.motion-card p {
  position: relative;
  z-index: 2;
  margin: 0;
  line-height: 1.62;
  color: var(--m-muted);
}

.motion-card ul {
  position: relative;
  z-index: 2;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  color: var(--m-muted);
}

.motion-card li {
  position: relative;
  padding-left: 25px;
}

.motion-card li::before {
  content: "✦";
  position: absolute;
  left: 0;
  color: var(--m-accent);
}

.motion-contact {
  margin-top: 40px;
  padding: 38px;
  text-align: center;
  border: 1px solid var(--m-line);
  background: var(--m-card);
  box-shadow: var(--m-shadow);
  border-radius: var(--m-radius);
}

.motion-contact h2 {
  margin: 0;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: clamp(44px, 7vw, 92px);
  line-height: .84;
}

.motion-contact p {
  max-width: 760px;
  margin: 16px auto 0;
  font-size: 18px;
  line-height: 1.65;
  color: var(--m-muted);
}

.motion-pill {
  display: inline-flex;
  margin-top: 24px;
  padding: 13px 18px;
  border-radius: 999px;
  font-weight: 900;
  color: var(--m-pill-text);
  background: var(--m-accent);
}

.motion-footer {
  padding: 34px 6vw;
  text-align: center;
  color: var(--m-muted);
}

.motion-dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(currentColor 1.2px, transparent 1.2px);
  background-size: 24px 24px;
  opacity: .22;
  color: var(--m-accent);
  animation: motion-drift 18s linear infinite;
}

.motion-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, currentColor 1px, transparent 1px),
    linear-gradient(0deg, currentColor 1px, transparent 1px);
  background-size: 42px 42px;
  color: var(--m-accent);
  opacity: .13;
  animation: motion-grid-slide 20s linear infinite;
}

@keyframes motion-drift {
  from { background-position: 0 0; }
  to { background-position: 240px 160px; }
}

@keyframes motion-grid-slide {
  from { background-position: 0 0, 0 0; }
  to { background-position: 210px 120px, 120px 210px; }
}

@keyframes motion-float-a {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  25% { transform: translate3d(34px, -26px, 0) rotate(9deg); }
  50% { transform: translate3d(-24px, 34px, 0) rotate(-7deg); }
  75% { transform: translate3d(18px, 24px, 0) rotate(11deg); }
}

@keyframes motion-float-b {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  30% { transform: translate3d(-38px, 28px, 0) rotate(-13deg) scale(1.08); }
  60% { transform: translate3d(28px, -36px, 0) rotate(8deg) scale(.94); }
}

@keyframes motion-spin {
  to { transform: rotate(360deg); }
}

@keyframes motion-spin-center {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes motion-pulse {
  0%, 100% { opacity: .35; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.15); }
}

@keyframes motion-scan {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(220%); }
}

@keyframes motion-rise {
  0% { transform: translateY(70px); opacity: 0; }
  18% { opacity: 1; }
  100% { transform: translateY(-760px); opacity: 0; }
}

@keyframes motion-wiggle {
  0%, 100% { transform: rotate(-4deg) translateY(0); }
  50% { transform: rotate(5deg) translateY(-18px); }
}

/* =========================
   36 - ENJAMBRE ORBITAL
   ========================= */

.swarm-orbit {
  --m-bg: radial-gradient(circle at 20% 20%, rgba(34,211,238,.22), transparent 24%), radial-gradient(circle at 90% 70%, rgba(251,191,36,.14), transparent 28%), #020617;
  --m-text: #e0faff;
  --m-muted: #bdefff;
  --m-accent: #22d3ee;
  --m-accent2: #facc15;
  --m-line: rgba(34,211,238,.32);
  --m-card: rgba(255,255,255,.055);
  --m-back: rgba(2,6,23,.74);
  --m-pill-text: #020617;
  --m-shadow: 0 24px 80px rgba(0,0,0,.30);
  --m-radius: 44px;
}

.orbital-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  font-weight: 900;
  color: #020617;
  background: conic-gradient(#22d3ee, #facc15, #a78bfa, #22d3ee);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 90px rgba(34,211,238,.42);
}

.orbital-path {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px dashed rgba(34,211,238,.38);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: motion-spin-center 18s linear infinite;
}

.orbital-path.one { width: 560px; height: 560px; }
.orbital-path.two { width: 430px; height: 430px; animation-duration: 12s; animation-direction: reverse; }
.orbital-path.three { width: 310px; height: 310px; animation-duration: 8s; }

.drone {
  position: absolute;
  width: 66px;
  height: 66px;
  border-radius: 22px;
  background: #22d3ee;
  box-shadow: 0 0 30px rgba(34,211,238,.8);
  animation: motion-float-a 8s ease-in-out infinite;
}

.drone::before,
.drone::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 3px solid #020617;
}

.drone::before { left: -18px; top: -18px; }
.drone::after { right: -18px; bottom: -18px; }

.drone.a { left: 12%; top: 14%; }
.drone.b { right: 10%; top: 25%; animation-delay: -2s; background: #facc15; }
.drone.c { left: 22%; bottom: 14%; animation-delay: -4s; background: #a78bfa; }
.drone.d { right: 24%; bottom: 20%; animation-delay: -6s; }

.swarm-orbit .motion-card {
  border-radius: 999px;
  text-align: center;
}

/* =========================
   37 - PLANO VIVO
   ========================= */

.living-blueprint {
  --m-bg: linear-gradient(135deg, #03112b, #0f2a44);
  --m-text: #dff7ff;
  --m-muted: #b6e8ff;
  --m-accent: #38bdf8;
  --m-accent2: #93c5fd;
  --m-line: rgba(147,197,253,.34);
  --m-card: rgba(56,189,248,.075);
  --m-back: rgba(3,17,43,.72);
  --m-pill-text: #03112b;
  --m-shadow: 0 24px 80px rgba(0,0,0,.28);
  --m-radius: 16px;
}

.blueprint-panel {
  position: absolute;
  inset: 42px;
  border: 2px solid rgba(147,197,253,.44);
  background:
    linear-gradient(90deg, rgba(147,197,253,.11) 1px, transparent 1px),
    linear-gradient(0deg, rgba(147,197,253,.11) 1px, transparent 1px);
  background-size: 34px 34px;
  overflow: hidden;
}

.blueprint-panel::before {
  content: "";
  position: absolute;
  inset: 40px;
  border: 2px dashed rgba(147,197,253,.35);
  animation: motion-pulse 4s ease-in-out infinite;
}

.blue-line {
  position: absolute;
  height: 3px;
  background: #38bdf8;
  box-shadow: 0 0 20px #38bdf8;
  animation: motion-scan 6s linear infinite;
}

.blue-line.a { top: 20%; width: 70%; }
.blue-line.b { top: 48%; width: 55%; animation-delay: -2s; }
.blue-line.c { top: 72%; width: 80%; animation-delay: -4s; }

.blue-label {
  position: absolute;
  padding: 12px 16px;
  border: 1px solid rgba(147,197,253,.55);
  background: rgba(3,17,43,.78);
  color: #dff7ff;
  font-weight: 900;
}

.blue-label.a { left: 12%; top: 12%; }
.blue-label.b { right: 10%; top: 42%; }
.blue-label.c { left: 30%; bottom: 10%; }

.living-blueprint .motion-card {
  clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%);
}

/* =========================
   38 - MEDUSAS DE LUZ
   ========================= */

.jelly-light {
  --m-bg: radial-gradient(circle at 30% 10%, rgba(34,211,238,.22), transparent 26%), linear-gradient(180deg, #020617, #082f49);
  --m-text: #ecfeff;
  --m-muted: #bae6fd;
  --m-accent: #67e8f9;
  --m-accent2: #f0abfc;
  --m-line: rgba(103,232,249,.30);
  --m-card: rgba(255,255,255,.055);
  --m-back: rgba(2,6,23,.70);
  --m-pill-text: #082f49;
  --m-shadow: 0 24px 80px rgba(0,0,0,.30);
  --m-radius: 50px;
}

.jelly {
  position: absolute;
  width: 170px;
  height: 220px;
  animation: motion-rise 16s linear infinite;
}

.jelly::before {
  content: "";
  position: absolute;
  top: 0;
  left: 15px;
  width: 140px;
  height: 105px;
  border-radius: 70px 70px 38px 38px;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.75), transparent 16%),
    linear-gradient(135deg, rgba(103,232,249,.74), rgba(240,171,252,.42));
  box-shadow: 0 0 45px rgba(103,232,249,.42);
}

.jelly::after {
  content: "";
  position: absolute;
  left: 26px;
  top: 98px;
  width: 115px;
  height: 110px;
  background:
    repeating-linear-gradient(90deg, transparent 0 14px, rgba(103,232,249,.70) 14px 17px, transparent 17px 26px);
  border-radius: 0 0 60px 60px;
  filter: blur(.2px);
}

.jelly.a { left: 8%; bottom: -160px; }
.jelly.b { left: 38%; bottom: -220px; animation-delay: -5s; transform: scale(.82); }
.jelly.c { right: 10%; bottom: -180px; animation-delay: -9s; transform: scale(1.15); }
.jelly.d { right: 32%; bottom: -240px; animation-delay: -12s; transform: scale(.7); }

.jelly-light .motion-card {
  border-radius: 46% 54% 48% 52% / 28% 30% 70% 72%;
}

/* =========================
   39 - CAMPO MAGNÉTICO
   ========================= */

.magnetic-field {
  --m-bg: radial-gradient(circle at center, rgba(248,113,113,.16), transparent 24%), #0f0710;
  --m-text: #fff1f2;
  --m-muted: #fecdd3;
  --m-accent: #fb7185;
  --m-accent2: #fbbf24;
  --m-line: rgba(251,113,133,.32);
  --m-card: rgba(255,255,255,.055);
  --m-back: rgba(15,7,16,.72);
  --m-pill-text: #ffffff;
  --m-shadow: 0 24px 80px rgba(0,0,0,.32);
  --m-radius: 34px;
}

.field-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  border: 2px solid rgba(251,113,133,.24);
  transform: translate(-50%, -50%);
  animation: motion-spin-center 22s linear infinite;
}

.field-ring.one { width: 600px; height: 340px; }
.field-ring.two { width: 500px; height: 250px; transform: translate(-50%, -50%) rotate(60deg); animation-duration: 16s; }
.field-ring.three { width: 500px; height: 250px; transform: translate(-50%, -50%) rotate(-60deg); animation-duration: 12s; }

.magnet-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 240px;
  height: 120px;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: linear-gradient(90deg, #fb7185 0 50%, #38bdf8 50% 100%);
  color: #fff;
  font-weight: 900;
  box-shadow: 0 0 60px rgba(251,113,133,.34);
}

.spark {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fbbf24;
  box-shadow: 0 0 30px #fbbf24;
  animation: motion-float-a 5s ease-in-out infinite;
}

.spark.a { left: 12%; top: 20%; }
.spark.b { right: 14%; top: 32%; animation-delay: -1s; }
.spark.c { left: 32%; bottom: 18%; animation-delay: -2s; }
.spark.d { right: 36%; bottom: 22%; animation-delay: -3s; }

.magnetic-field .motion-card:nth-child(odd) {
  border-radius: 999px 40px 999px 40px;
}

.magnetic-field .motion-card:nth-child(even) {
  border-radius: 40px 999px 40px 999px;
}

/* =========================
   40 - CARNAVAL MECÁNICO
   ========================= */

.clock-carnival {
  --m-bg: linear-gradient(135deg, #1c1008, #3b1206);
  --m-text: #fff7ed;
  --m-muted: #fed7aa;
  --m-accent: #f97316;
  --m-accent2: #facc15;
  --m-line: rgba(253,186,116,.34);
  --m-card: rgba(255,255,255,.065);
  --m-back: rgba(28,16,8,.72);
  --m-pill-text: #1c1008;
  --m-shadow: 0 24px 80px rgba(0,0,0,.30);
  --m-radius: 28px;
}

.gear {
  position: absolute;
  border-radius: 50%;
  border: 18px dashed rgba(250,204,21,.70);
  animation: motion-spin 18s linear infinite;
}

.gear::before {
  content: "";
  position: absolute;
  inset: 28%;
  border-radius: 50%;
  border: 10px solid rgba(249,115,22,.75);
}

.gear.one { width: 290px; height: 290px; left: 8%; top: 14%; }
.gear.two { width: 210px; height: 210px; right: 10%; top: 26%; animation-direction: reverse; animation-duration: 12s; }
.gear.three { width: 180px; height: 180px; left: 42%; bottom: 12%; animation-duration: 9s; }

.ticket {
  position: absolute;
  min-width: 170px;
  padding: 18px;
  border: 3px solid #fff7ed;
  color: #1c1008;
  background: #facc15;
  font-weight: 900;
  box-shadow: 8px 8px 0 rgba(0,0,0,.35);
  animation: motion-wiggle 4s ease-in-out infinite;
}

.ticket.a { right: 22%; top: 8%; }
.ticket.b { left: 18%; bottom: 8%; animation-delay: -2s; background: #fb7185; }

.clock-carnival .motion-card {
  border: 3px solid #fed7aa;
  box-shadow: 9px 9px 0 rgba(0,0,0,.30);
  transform: rotate(-1deg);
}

.clock-carnival .motion-card:nth-child(even) {
  transform: rotate(1deg);
}

/* =========================
   41 - NUBE DE SEÑALES
   ========================= */

.signal-cloud {
  --m-bg: radial-gradient(circle at 20% 20%, rgba(168,85,247,.16), transparent 24%), #040314;
  --m-text: #f5f3ff;
  --m-muted: #ddd6fe;
  --m-accent: #a78bfa;
  --m-accent2: #22d3ee;
  --m-line: rgba(167,139,250,.32);
  --m-card: rgba(255,255,255,.055);
  --m-back: rgba(4,3,20,.72);
  --m-pill-text: #ffffff;
  --m-shadow: 0 24px 80px rgba(0,0,0,.34);
  --m-radius: 30px;
}

.signal {
  position: absolute;
  padding: 11px 14px;
  border: 1px solid rgba(167,139,250,.42);
  background: rgba(255,255,255,.075);
  color: #f5f3ff;
  font-weight: 900;
  border-radius: 999px;
  animation: motion-float-b 7s ease-in-out infinite;
}

.signal.a { left: 10%; top: 12%; }
.signal.b { right: 12%; top: 20%; animation-delay: -1s; }
.signal.c { left: 24%; bottom: 20%; animation-delay: -2s; }
.signal.d { right: 24%; bottom: 12%; animation-delay: -3s; }
.signal.e { left: 45%; top: 42%; animation-delay: -4s; }

.signal-beam {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  border: 1px solid rgba(34,211,238,.22);
  transform: translate(-50%, -50%);
  animation: motion-pulse 3s ease-in-out infinite;
}

.signal-cloud .motion-card {
  clip-path: polygon(0 0, 92% 0, 100% 18%, 92% 100%, 0 100%, 8% 50%);
}

/* =========================
   42 - AURORA EXPLORADORA
   ========================= */

.aurora-explorer {
  --m-bg: linear-gradient(180deg, #020617, #052e2b 60%, #111827);
  --m-text: #ecfeff;
  --m-muted: #ccfbf1;
  --m-accent: #2dd4bf;
  --m-accent2: #facc15;
  --m-line: rgba(45,212,191,.32);
  --m-card: rgba(255,255,255,.055);
  --m-back: rgba(2,6,23,.72);
  --m-pill-text: #052e2b;
  --m-shadow: 0 24px 80px rgba(0,0,0,.32);
  --m-radius: 38px;
}

.aurora-wave {
  position: absolute;
  left: -10%;
  width: 120%;
  height: 180px;
  border-radius: 50%;
  filter: blur(14px);
  opacity: .55;
  animation: aurora-move 8s ease-in-out infinite;
}

.aurora-wave.one { top: 16%; background: rgba(45,212,191,.45); }
.aurora-wave.two { top: 34%; background: rgba(56,189,248,.35); animation-delay: -2s; }
.aurora-wave.three { top: 52%; background: rgba(250,204,21,.25); animation-delay: -4s; }

@keyframes aurora-move {
  0%, 100% { transform: translateX(-4%) skewY(-4deg); }
  50% { transform: translateX(7%) skewY(5deg); }
}

.compass {
  position: absolute;
  left: 50%;
  bottom: 10%;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  border: 3px solid rgba(250,204,21,.50);
  transform: translateX(-50%);
  display: grid;
  place-items: center;
}

.compass::before {
  content: "";
  width: 120px;
  height: 120px;
  background: #facc15;
  clip-path: polygon(50% 0, 62% 50%, 50% 100%, 38% 50%);
  animation: motion-spin 9s linear infinite;
}

.aurora-explorer .motion-card {
  border-radius: 20px 80px 20px 80px;
}

/* =========================
   43 - PAPELES CINÉTICOS
   ========================= */

.kinetic-paper {
  --m-bg: #f8fafc;
  --m-text: #111827;
  --m-muted: #374151;
  --m-accent: #e11d48;
  --m-accent2: #2563eb;
  --m-line: rgba(17,24,39,.28);
  --m-card: #ffffff;
  --m-back: rgba(255,255,255,.72);
  --m-pill-text: #ffffff;
  --m-shadow: 9px 9px 0 #111827;
  --m-radius: 0;
}

.paper-piece {
  position: absolute;
  padding: 24px;
  border: 4px solid #111827;
  box-shadow: 12px 12px 0 #111827;
  font-weight: 900;
  background: #fde047;
  color: #111827;
  animation: motion-float-a 6s ease-in-out infinite;
}

.paper-piece.a { left: 8%; top: 10%; width: 240px; height: 180px; transform: rotate(-8deg); }
.paper-piece.b { right: 8%; top: 18%; width: 260px; height: 210px; background: #bae6fd; animation-delay: -2s; }
.paper-piece.c { left: 30%; bottom: 8%; width: 300px; height: 160px; background: #fecdd3; animation-delay: -4s; }

.paper-tape {
  position: absolute;
  width: 160px;
  height: 38px;
  background: rgba(17,24,39,.20);
  transform: rotate(-14deg);
}

.paper-tape.a { left: 12%; top: 9%; }
.paper-tape.b { right: 12%; top: 17%; transform: rotate(12deg); }

.kinetic-paper .motion-card {
  border: 4px solid #111827;
  transform: rotate(-1deg);
}

.kinetic-paper .motion-card:nth-child(even) {
  transform: rotate(1.5deg);
  background: #fde047;
}

/* =========================
   44 - JARDÍN NEURONAL
   ========================= */

.neural-garden {
  --m-bg: radial-gradient(circle at 25% 20%, rgba(34,197,94,.18), transparent 25%), #05110a;
  --m-text: #f0fdf4;
  --m-muted: #bbf7d0;
  --m-accent: #86efac;
  --m-accent2: #d946ef;
  --m-line: rgba(134,239,172,.30);
  --m-card: rgba(255,255,255,.055);
  --m-back: rgba(5,17,10,.72);
  --m-pill-text: #052e16;
  --m-shadow: 0 24px 80px rgba(0,0,0,.32);
  --m-radius: 46% 24% 38% 28% / 28% 42% 26% 40%;
}

.neuron {
  position: absolute;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #86efac;
  box-shadow: 0 0 34px rgba(134,239,172,.85);
  animation: motion-pulse 2.8s ease-in-out infinite;
}

.neuron.a { left: 12%; top: 18%; }
.neuron.b { left: 42%; top: 10%; animation-delay: -1s; }
.neuron.c { right: 14%; top: 30%; animation-delay: -2s; }
.neuron.d { left: 28%; bottom: 18%; animation-delay: -1.5s; }
.neuron.e { right: 28%; bottom: 12%; animation-delay: -.5s; }

.neural-line {
  position: absolute;
  height: 2px;
  background: rgba(134,239,172,.52);
  transform-origin: left center;
}

.neural-line.one { left: 15%; top: 22%; width: 230px; transform: rotate(-12deg); }
.neural-line.two { left: 43%; top: 14%; width: 260px; transform: rotate(24deg); }
.neural-line.three { left: 30%; bottom: 23%; width: 330px; transform: rotate(-7deg); }
.neural-line.four { right: 29%; top: 35%; width: 190px; transform: rotate(70deg); }

.neural-garden .motion-card {
  border-radius: var(--m-radius);
}

/* =========================
   45 - PORTAL DE ANOMALÍA
   ========================= */

.anomaly-portal {
  --m-bg: radial-gradient(circle at center, rgba(251,191,36,.18), transparent 20%), linear-gradient(135deg, #020617, #3b0764);
  --m-text: #fff7ed;
  --m-muted: #fde68a;
  --m-accent: #facc15;
  --m-accent2: #fb7185;
  --m-line: rgba(250,204,21,.32);
  --m-card: rgba(255,255,255,.065);
  --m-back: rgba(2,6,23,.72);
  --m-pill-text: #111827;
  --m-shadow: 0 24px 80px rgba(0,0,0,.34);
  --m-radius: 50px;
}

.anomaly-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(250,204,21,.38);
  animation: motion-spin-center 15s linear infinite;
}

.anomaly-ring.one {
  width: 610px;
  height: 610px;
  border-style: dashed;
}

.anomaly-ring.two {
  width: 450px;
  height: 450px;
  animation-direction: reverse;
  animation-duration: 10s;
}

.anomaly-ring.three {
  width: 270px;
  height: 270px;
  border-style: dotted;
  animation-duration: 6s;
}

.anomaly-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 210px;
  height: 210px;
  display: grid;
  place-items: center;
  text-align: center;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: conic-gradient(#facc15, #fb7185, #8b5cf6, #38bdf8, #facc15);
  color: #111827;
  font-weight: 900;
}

.meteor {
  position: absolute;
  width: 120px;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #facc15);
  box-shadow: 0 0 25px rgba(250,204,21,.65);
  animation: meteor-fly 5s linear infinite;
}

.meteor.a { left: -20%; top: 18%; }
.meteor.b { left: -30%; top: 48%; animation-delay: -2s; }
.meteor.c { left: -24%; top: 74%; animation-delay: -4s; }

@keyframes meteor-fly {
  from { transform: translateX(0) rotate(-16deg); opacity: 0; }
  15% { opacity: 1; }
  to { transform: translateX(1100px) rotate(-16deg); opacity: 0; }
}

.anomaly-portal .motion-card {
  clip-path: polygon(0 0, 90% 0, 100% 22%, 92% 100%, 8% 100%, 0 78%);
}

/* =========================
   RESPONSIVE 36-45
   ========================= */

@media (max-width: 1050px) {
  .motion-hero,
  .motion-grid.two,
  .motion-grid.three,
  .motion-grid.four {
    grid-template-columns: 1fr;
  }

  .motion-stage {
    min-height: 480px;
  }

  .swarm-orbit .motion-card,
  .living-blueprint .motion-card,
  .signal-cloud .motion-card,
  .anomaly-portal .motion-card {
    clip-path: none;
    border-radius: 34px;
  }
}

@media (max-width: 620px) {
  .motion-back {
    position: static;
    display: inline-flex;
    margin: 18px;
  }

  .motion-hero {
    padding-top: 38px;
  }

  .motion-title {
    font-size: 62px;
  }

  .orbital-path.one,
  .field-ring.one,
  .anomaly-ring.one {
    width: 340px;
    height: 340px;
  }

  .orbital-path.two,
  .field-ring.two,
  .anomaly-ring.two {
    width: 260px;
    height: 260px;
  }

  .orbital-path.three,
  .field-ring.three,
  .anomaly-ring.three {
    width: 180px;
    height: 180px;
  }

  .paper-piece,
  .ticket,
  .signal,
  .drone {
    position: relative;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    margin: 16px auto;
  }
}