:root {
  --black: #0b0b0b;
  --white: #ffffff;
  --orange: #f5a800;
  --green: #52be8e;
  --green-dark: #2f6f52;
  --purple: #8e44c4;
  --purple-dark: #651c86;
  --pink: #e879a8;
  --red: #e8304f;
  --blue: #1e4fa0;
  --teal: #46a3b3;
  --veil: rgba(20, 20, 20, .55);
  --display: "Barlow Condensed", "DIN Condensed", "Arial Narrow", sans-serif;
  --body: "Montserrat", system-ui, sans-serif;
  --nav-h: 56px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }
body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--body);
  line-height: 1.5;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
[hidden] { display: none !important; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ---------- Barra superior ---------- */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: center;
  background: rgba(60, 60, 60, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background .3s;
}
.topbar.is-solid { background: rgba(12, 12, 12, .9); }
.topbar__brand { display: none; }
.topbar__brand img { height: 36px; width: auto; }
.nav { display: flex; align-items: center; gap: 0; }
.nav a {
  text-decoration: none; text-transform: uppercase;
  font-weight: 700; font-size: 13px; letter-spacing: .28em;
  color: #d9d9d9; padding: 8px 22px; position: relative;
  transition: color .2s;
}
.nav a + a::before {
  content: ""; position: absolute; left: -3px; top: 50%;
  width: 6px; height: 6px; border-radius: 50%; background: #d9d9d9;
  transform: translateY(-50%);
}
.nav a:hover, .nav a.is-active { color: var(--orange); }
.topbar__toggle { display: none; }

.side-logo {
  position: fixed; left: 0; top: 50%; z-index: 40;
  transform: translateY(-50%);
  background: var(--black);
  padding: 16px 22px 16px 14px;
  border-radius: 0 60px 60px 0;
}
.side-logo img { width: 74px; }

.contact-bubble {
  position: fixed; right: 24px; bottom: 24px; z-index: 45;
  display: flex; align-items: center;
  text-decoration: none;
}
.contact-bubble span {
  background: var(--orange); color: var(--white);
  font-weight: 700; font-size: 11px; letter-spacing: .25em; text-transform: uppercase;
  padding: 6px 46px 6px 16px; border-radius: 6px;
}
.contact-bubble svg { width: 58px; margin-left: -40px; margin-top: -18px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.3)); transition: transform .2s; }
.contact-bubble:hover svg { transform: scale(1.1) rotate(-4deg); }

/* ---------- Paneles y fondos ---------- */
.panel {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  padding: calc(var(--nav-h) + 40px) 6vw 80px 150px;
}
.panel--auto { min-height: auto; }
.bg {
  position: absolute; inset: -4%; z-index: -2;
  background: var(--bg) center / cover no-repeat;
  filter: grayscale(1) brightness(.62);
  animation: drift 26s ease-in-out infinite alternate;
}
.bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.panel::after {
  content: ""; position: absolute; z-index: -1;
  inset: calc(var(--nav-h) + 12px) 4vw 7vh 0;
  background: var(--veil);
  border-radius: 0 0 0 0;
  pointer-events: none;
}
.panel--hero::after { display: none; }
@keyframes drift {
  0%   { transform: scale(1)    translate(0, 0); }
  50%  { transform: scale(1.06) translate(-1.2%, .8%); }
  100% { transform: scale(1.1)  translate(1%, -1%); }
}
@media (prefers-reduced-motion: reduce) {
  .bg { animation: none; }
  html { scroll-behavior: auto; }
}

.scroll-down {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 66px solid transparent; border-right: 66px solid transparent;
  border-top: 22px solid rgba(160,160,160,.75);
  animation: bob 2s ease-in-out infinite;
}
@keyframes bob { 50% { transform: translate(-50%, 6px); } }

/* formas decorativas */
.arc, .ring, .blob, .shape { position: absolute; z-index: -1; pointer-events: none; }
.arc { width: 90vh; height: 90vh; border-radius: 50%; }
.arc--blue { right: -30vh; bottom: -55vh; border: 7vh solid rgba(30, 79, 160, .75); }
.arc--blue.arc--left { left: -40vh; top: -10vh; right: auto; bottom: auto; width: 120vh; height: 120vh; border: 0; background: rgba(30, 79, 160, .55); }
.arc--teal.arc--left { left: -50vh; top: -20vh; width: 120vh; height: 140vh; border: 18vh solid rgba(70, 163, 179, .45); }
.arc--red.arc--right { right: -30vh; top: -10vh; width: 90vh; height: 90vh; border: 14vh solid rgba(232, 48, 79, .45); }
.ring { border-radius: 50%; border: 3px solid; width: 52vh; height: 52vh; }
.ring--pink { border-color: var(--pink); right: -14vh; top: -14vh; }
.ring--green { border-color: var(--green); right: -18vh; top: -8vh; }
.blob { border-radius: 50%; }
.blob--green { width: 60vh; height: 60vh; left: -30vh; bottom: -30vh; background: rgba(82, 190, 142, .7); }
.blob--big { width: 120vh; height: 120vh; left: -40vh; top: -20vh; bottom: auto; background: transparent; border: 22vh solid rgba(82, 190, 142, .55); }
.blob--bl { background: rgba(47, 111, 82, .9); }
.shape--green-frame {
  right: 0; top: 42%; width: 55vw; height: 60%;
  border-top: 13vh solid rgba(47, 111, 82, .9);
  border-left: 10vw solid rgba(82, 190, 142, .85);
}

/* ---------- Tipografía display ---------- */
.display {
  font-family: var(--display); font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(2.2rem, min(6.4vw, 10vh), 6.2rem);
  letter-spacing: .14em; line-height: 1.12;
  margin: 0; max-width: 20ch;
}
.display em { font-style: normal; color: var(--orange); }
.display--xl { font-size: clamp(3.4rem, 12vw, 11rem); letter-spacing: .18em; text-align: center; max-width: none; }
.display--md { font-size: clamp(2rem, 5vw, 5rem); }
.display--stack { line-height: 1.15; }
.center { text-align: center; }
.kicker {
  text-transform: uppercase; letter-spacing: .3em; font-weight: 700;
  font-size: clamp(.8rem, 1.3vw, 1.15rem); margin-top: 1.5em;
}

/* ---------- HOME ---------- */
.hero__logo img { width: min(320px, 55vw); }

.panel--tiles { flex-direction: column; gap: 60px; }
.tiles {
  display: grid; grid-template-columns: repeat(2, minmax(0, 330px)); gap: 50px 30px;
}
.tile {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 10px;
  height: 100px; border-radius: 26px;
  text-decoration: none; text-transform: uppercase;
  font-weight: 700; letter-spacing: .3em; font-size: 15px;
  opacity: .9; transition: transform .25s, opacity .25s;
}
.tile:hover { transform: translateY(-4px) scale(1.03); opacity: 1; }
.tile--purple { background: var(--purple); }
.tile--orange { background: var(--orange); }
.tile--green  { background: var(--green); }
.tile--pink   { background: var(--pink); }
.tile__icon { position: absolute; width: 110px; height: 110px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.25)); }
.tile__icon--left { left: -24px; top: -20px; }
.tile__icon--right { right: -12px; top: -24px; }
.tile span { padding-left: 50px; }
.tile--orange span, .tile--pink span { padding: 0 50px 0 0; }
.tagline { text-align: center; }
.tagline hr { width: min(430px, 70vw); border: 0; border-top: 2px solid var(--white); margin: 0 auto 40px; }
.tagline p { text-transform: uppercase; letter-spacing: .3em; font-weight: 700; margin: 0; }

/* ---------- MÉTODO ---------- */
.bm-intro { text-align: center; display: flex; flex-direction: column; align-items: center; }
.bm-logo { width: 120px; color: #f2b315; }
.bm-logo--dark { color: #4a4a4a; }
.brandmatch { margin: 10px 0 0; line-height: 1; text-transform: uppercase; }
.brandmatch b { display: block; font-weight: 800; font-size: clamp(2.6rem, 6vw, 5rem); letter-spacing: .14em; }
.brandmatch span { display: block; font-weight: 400; font-size: clamp(2.6rem, 6vw, 5rem); letter-spacing: .14em; color: var(--pink); }
.brandmatch--dark b { color: var(--white); }
.brandmatch--dark span { color: #4a4a4a; }
.bm-intro hr, .yellow-card hr { width: 100px; border: 0; border-top: 2px solid var(--white); margin: 24px auto; }
.green-box {
  max-width: 300px; margin: 10px 0 30px; padding: 22px 26px;
  background: var(--green); border: 6px solid #eee; border-radius: 24px;
  font-size: 1.05rem; line-height: 1.4;
}
.pill {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 6px 22px; border-radius: 6px; border: 0;
  text-decoration: none; text-transform: uppercase;
  font-weight: 700; font-size: 12px; letter-spacing: .25em; color: var(--white);
  transition: transform .2s, filter .2s;
}
.pill:hover { transform: translateY(-2px); filter: brightness(1.1); }
.pill svg { width: 48px; }
.pill--purple { background: var(--purple); }
.pill--green { background: var(--green); }
.pill--orange { background: var(--orange); font-size: 15px; padding: 10px 40px; }
.pill--blue { background: var(--blue); font-size: 13px; padding: 8px 18px; }
.pill--red { background: var(--red); font-size: 15px; padding: 10px 26px; letter-spacing: .3em; }
.pill--static:hover { transform: none; filter: none; }

.bm-grid {
  width: 100%; max-width: 1200px;
  display: grid; grid-template-columns: 1.1fr .8fr 1fr; align-items: center; gap: 30px;
}
.truths { text-align: center; }
.truths__label { margin: 0; font-size: .85rem; }
.truths__label b { display: block; color: #e6e619; font-size: 1.15rem; text-transform: uppercase; }
.triangle { position: relative; width: min(340px, 100%); aspect-ratio: 1; margin: 14px auto; }
.triangle svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.truth { position: absolute; left: 0; right: 0; text-align: center; font-weight: 700; font-size: 1.1rem; text-transform: uppercase; }
/* Palabra tachada con un garabato blanco (como en el diseño original) */
.truth s {
  position: relative; display: block; width: fit-content; margin: 0 auto;
  text-decoration: none; text-transform: uppercase; font-size: 1.1rem; user-select: none;
}
.truth s::after {
  content: ""; position: absolute; inset: -6px -10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 46' preserveAspectRatio='none'%3E%3Cpath d='M4 22 C14 4 -2 4 6 22 C9 36 15 32 15 21 C25 8 9 8 17 22 C20 33 26 30 26 24 C38 5 19 5 28 22 C32 35 37 32 37 23 C49 7 30 7 39 22 C43 34 48 31 48 22 C61 8 40 8 51 22 C54 33 59 30 59 21 C73 4 50 4 62 22 C66 36 70 32 70 22 C81 4 63 4 72 22 C76 36 81 33 81 21 C91 6 75 6 83 22 C86 34 92 31 92 20 C102 5 86 5 94 22 C97 36 103 32 103 20 C114 6 96 6 105 22 C109 34 114 31 114 24 C126 3 107 3 116 22 C120 37 125 33 125 23 C137 3 118 3 127 22 C131 37 136 33 136 20 C147 7 129 7 138 22 C142 34 147 31 147 21 M154 28 C142 14 161 14 152 28 C148 39 142 36 142 27 C126 13 152 13 139 28 C134 40 130 37 130 27 C118 13 137 13 128 28 C124 40 118 37 118 26 C102 10 127 10 115 28 C110 43 106 39 106 28 C90 13 116 13 103 28 C98 40 94 37 94 28 C83 13 101 13 92 28 C88 40 82 37 82 26 C67 11 91 11 79 28 C74 42 70 38 70 27 C56 12 78 12 67 28 C63 41 58 38 58 28 C44 12 66 12 55 28 C51 40 46 37 46 30 C31 10 55 10 43 28 C39 42 34 39 34 28 C21 12 42 12 31 28 C28 41 22 38 22 27 C7 13 31 13 19 28 C15 40 10 37 10 30' fill='none' stroke='%23fff' stroke-width='5' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.t1 { top: 9%; } .t2 { top: 40%; } .t3 { top: 67%; }
.astro img {
  width: 100%; aspect-ratio: 1; object-fit: cover; object-position: center 30%;
  border-radius: 50%; filter: grayscale(1);
}
.yellow-card {
  background: var(--orange); padding: 36px 34px; text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.yellow-card p { text-align: left; color: #1a1a1a; font-size: 1.05rem; line-height: 1.45; margin: 0 0 28px; }

.split { width: 100%; max-width: 1250px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 50px; align-items: center; }

.porter {
  position: relative; margin: 0;
  background: rgba(60,60,60,.7);
  padding: 40px 46px 52px;
  font-family: var(--display); text-transform: uppercase; font-size: .95rem; text-align: center;
}
.porter__top { margin-bottom: 14px; }
.porter__side { position: absolute; writing-mode: vertical-rl; font-size: .85rem; }
.porter__side--l { left: 12px; top: 22%; transform: rotate(180deg); }
.porter__side--r1 { right: 12px; top: 18%; }
.porter__side--r2 { right: 12px; top: 56%; }
.porter__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.porter__grid div { background: rgba(120,120,120,.6); min-height: 120px; display: grid; place-items: center; padding: 10px; }
.porter__grid .light { background: rgba(200,200,200,.55); }
.porter__grid .wide { grid-column: 1 / -1; min-height: 140px; align-items: end; padding-bottom: 20px; }
.porter__limbo {
  position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%);
  width: 58%; padding: 22px 0;
  background: var(--img) center / cover;
  border: 4px solid var(--white);
  color: #111; font-family: var(--body); font-weight: 800; font-size: clamp(1.4rem, 2.5vw, 2rem);
  animation: float 5s ease-in-out infinite;
}
@keyframes float { 50% { transform: translate(-50%, -56%); } }
.porter__bottom { display: grid; grid-template-columns: 1fr 1fr; margin-top: 14px; }
.porter figcaption { position: absolute; right: 12px; bottom: 8px; font-family: var(--body); font-size: .6rem; }

/* ---------- BILIVERS ---------- */
.modelo { position: relative; width: 100%; max-width: 1320px; }
.modelo__title {
  position: absolute; right: 0; top: 2%; z-index: 1; margin: 0;
  font-family: var(--display); font-weight: 600; text-transform: uppercase; text-align: center;
  letter-spacing: .3em; line-height: 1.5; font-size: clamp(1.3rem, 2.2vw, 2.3rem);
}
.modelo__title em { font-style: normal; color: var(--orange); }
/* El diagrama ocupa todo el alto del velo oscuro (nav + 12px arriba, 7vh abajo) menos un margen de 24px */
#modelo { padding-top: calc(var(--nav-h) + 36px); padding-bottom: calc(7vh + 24px); }
.modelo__svg {
  display: block; width: 100%; height: auto; margin: 0 auto;
  max-height: calc(100vh - var(--nav-h) - 12px - 7vh - 48px);
  max-height: calc(100svh - var(--nav-h) - 12px - 7vh - 48px);
  overflow: visible; font-family: var(--display);
}
.m-disc { fill: rgba(17, 50, 56, .93); }
.m-ring { fill: none; stroke: #3d9fad; stroke-width: 6; }
.m-arrow path { fill: none; stroke: #3d9fad; stroke-width: 8; stroke-linejoin: miter; }
.m-bar { fill: #48a3b2; opacity: .96; }
.m-axis text { fill: #fff; font-size: 25px; font-weight: 600; letter-spacing: 6px; text-anchor: middle; dominant-baseline: central; }
.m-note rect { opacity: .9; }
.m-note text { fill: #fff; font-size: 22px; font-weight: 500; text-anchor: middle; letter-spacing: .2px; dominant-baseline: central; }
.m-note--orange { fill: #efa51e; }
.m-note--pink { fill: #e77fae; }
.m-note--purple { fill: #8d47c9; }
.m-note--green { fill: #4dbd88; }

/* ---------- LIMBOTEST ---------- */
.split--limbo { grid-template-columns: 1fr 380px; max-width: 1050px; }
.split--limbo .display { text-align: right; justify-self: end; }
.lt-card {
  background: rgba(245, 168, 0, .88); padding: 30px 30px 40px;
  display: flex; flex-direction: column; align-items: center; gap: 14px; min-height: 480px;
}
.lt-card h3 { margin: 0; font-family: var(--display); font-size: 2rem; letter-spacing: .04em; text-transform: uppercase; }
.lt-icon { width: 190px; }
.lt-step { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; margin-top: 10px; }
.lt-btn {
  border: 0; padding: 10px 24px; border-radius: 4px;
  font-weight: 700; letter-spacing: .25em; text-transform: uppercase; font-size: 13px;
  color: var(--white); text-decoration: none; text-align: center;
  transition: transform .2s, filter .2s;
}
.lt-btn:hover { transform: translateY(-2px); filter: brightness(1.15); }
.lt-btn--dark { background: var(--black); }
.lt-btn--green { background: var(--green); }
.lt-btn--orange { background: var(--orange); font-size: 15px; padding: 14px 34px; }
.lt-form { background: var(--green); padding: 22px; border-radius: 4px; gap: 12px; }
.lt-form label { display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: 10px; width: 100%; font-size: .95rem; }
.lt-form small { display: block; font-size: .7rem; }
.lt-form input, .contact__form input, .contact__form textarea {
  width: 100%; border: 0; border-radius: 6px; padding: 9px 10px; font: inherit; color: #111; background: #fff;
}

#limbotest-test { flex-direction: column; gap: 40px; padding-bottom: 120px; }
.lt-guide {
  width: 100%; max-width: 1050px; background: rgba(245, 168, 0, .9); color: #111;
  padding: 40px 34px; font-size: 1.02rem;
}
.lt-guide p { margin: 0 0 1em; }
.scale-legend { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; }

.lt-test { width: 100%; max-width: 1050px; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.questions { list-style: none; margin: 0; padding: 0; width: 100%; counter-reset: q; display: grid; gap: 8px; }
.question {
  counter-increment: q;
  display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 0;
  background: rgba(40, 80, 88, .82);
}
.question::before {
  content: counter(q); align-self: stretch; display: grid; place-items: center;
  background: var(--white); color: #111; font-family: var(--display); font-weight: 700; font-size: 1.6rem;
}
.question p { margin: 0; padding: 12px 18px; font-family: var(--display); font-weight: 500; font-size: 1.15rem; line-height: 1.25; }
.question fieldset { border: 0; margin: 0; padding: 8px 14px; display: flex; gap: 8px; }
.question legend { position: absolute; left: -9999px; }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt span {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: #eee; color: #111; font-weight: 600; cursor: pointer;
  transition: transform .15s, background .15s, color .15s;
}
.opt:hover span { transform: scale(1.1); }
.opt input:checked + span { background: var(--orange); color: var(--white); font-weight: 800; transform: scale(1.12); }
.opt input:focus-visible + span { outline: 3px solid var(--white); outline-offset: 2px; }
.question.is-missing { box-shadow: 0 0 0 3px var(--red); }
.lt-error { margin: 0; background: var(--red); padding: 8px 16px; font-weight: 600; }

.lt-result {
  width: 100%; max-width: 760px; background: rgba(12,12,12,.9); border-top: 8px solid var(--orange);
  padding: 40px 36px; text-align: center;
}
.lt-result h3 { font-family: var(--display); text-transform: uppercase; letter-spacing: .12em; font-size: clamp(2rem, 4vw, 3rem); margin: 0 0 10px; color: var(--orange); }
.lt-score { font-family: var(--display); font-size: 4.5rem; font-weight: 700; line-height: 1; margin: 10px 0; }
.lt-score small { font-size: 1.6rem; opacity: .7; }
.lt-meter { height: 14px; background: #333; border-radius: 10px; overflow: hidden; margin: 18px 0 26px; }
.lt-meter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--red), var(--orange), var(--green)); transition: width 1.4s ease; }
.lt-result p { line-height: 1.55; }

/* ---------- ¿QUÉ MÁS? ---------- */
#quemas { padding-top: calc(var(--nav-h) + 70px); padding-bottom: 110px; }
.services {
  width: 100%; max-width: 1100px;
  display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 34px 40px; align-items: end;
  grid-template-areas: "a main b" "c d e";
}
.service:nth-child(1) { grid-area: main; }
.service:nth-child(2) { grid-area: a; }
.service:nth-child(3) { grid-area: b; }
.service:nth-child(4) { grid-area: c; }
.service:nth-child(5) { grid-area: d; }
.service:nth-child(6) { grid-area: e; }
.service h3 { margin: 0 0 8px; text-align: center; font-weight: 500; font-size: 1.15rem; letter-spacing: .03em; text-transform: uppercase; }
.service--main h3 { font-weight: 800; font-size: 1.6rem; }
.service__card {
  position: relative; aspect-ratio: 1; border: 10px solid #eee; border-radius: 30px; overflow: hidden; background: #333;
  outline: none;
}
.service__card img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: transform .5s; }
.service__card p {
  position: absolute; inset: 0; margin: 0; padding: 18px;
  display: grid; place-items: center; text-align: center;
  background: rgba(40,40,40,.88); font-size: .95rem; line-height: 1.4;
  opacity: 0; transition: opacity .35s;
}
.service--main .service__card p { font-size: clamp(1.1rem, 1.8vw, 1.6rem); padding: 30px; }
.service:hover .service__card p, .service:focus-within .service__card p, .service.is-open .service__card p { opacity: 1; }
.service:hover img { transform: scale(1.06); }

.cred { width: 100%; max-width: 1050px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 50px; }
.cred__frame { border: 52px solid var(--green); padding: 40px 50px; width: fit-content; background: rgba(40,40,40,.55); }
.cred__frame .display { letter-spacing: .2em; font-size: clamp(2.6rem, 6vw, 5rem); }
.cred__side { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.dots { display: grid; grid-template-columns: repeat(3, 40px); gap: 30px; margin-bottom: 50px; }
.dots i { width: 40px; height: 40px; border-radius: 50%; background: var(--red); animation: pulse 2.4s ease-in-out infinite; }
.dots i:nth-child(odd) { animation-delay: .4s; }
@keyframes pulse { 50% { transform: scale(.82); opacity: .75; } }

/* ---------- CONTACTO ---------- */
.contact { position: relative; width: 100%; max-width: 1100px; display: grid; grid-template-columns: 1fr 1.2fr; align-items: center; gap: 30px; }
.contact__half {
  position: absolute; z-index: -1; right: -6vw; top: -8vh; bottom: -8vh; width: 75%;
  background: rgba(230, 160, 0, .85); border-radius: 50% 0 0 50% / 50% 0 0 50%;
}
.contact .display { text-align: right; letter-spacing: .2em; }
.contact__form { background: var(--purple-dark); padding: 30px 48px; display: flex; flex-direction: column; gap: 12px; }
.contact__form h3 { text-align: center; text-transform: uppercase; margin: 0 0 6px; font-weight: 800; letter-spacing: .04em; font-size: 1.3rem; }
.contact__form label { display: flex; flex-direction: column; gap: 4px; font-weight: 700; font-size: .85rem; }
.contact__form textarea { resize: vertical; }
.contact__form button {
  align-self: center; margin-top: 8px; border: 0; background: #eee; color: var(--red);
  font-weight: 800; letter-spacing: .1em; padding: 6px 28px; border-radius: 4px; text-transform: uppercase;
  transition: background .2s, color .2s;
}
.contact__form button:hover { background: var(--red); color: var(--white); }
.contact__form button[disabled] { opacity: .6; cursor: wait; }
.form-msg { margin: 0; text-align: center; font-weight: 600; }
.form-msg.ok { color: #b9f5d6; }
.form-msg.err { color: #ffc2cb; }
.contact__mail { grid-column: 2; margin: 0; text-transform: uppercase; letter-spacing: .25em; font-weight: 700; font-size: .8rem; }
.contact__mail a { text-decoration: none; }
.contact__mail a:hover { color: var(--black); }

/* ---------- Footer ---------- */
.footer {
  background: var(--black); padding: 60px 6vw 90px;
  display: flex; justify-content: space-between; align-items: center; gap: 30px;
  text-transform: uppercase; letter-spacing: .25em; font-weight: 700; font-size: .8rem;
}
.footer img { width: 90px; }
.footer a { text-decoration: none; border-left: 2px solid var(--white); padding-left: 30px; }
.footer a:hover { color: var(--orange); }

/* ---------- Animación de entrada ---------- */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .9s ease, transform .9s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .nav a { padding: 8px 14px; letter-spacing: .18em; font-size: 12px; }
  .bm-grid { grid-template-columns: 1fr 1fr; }
  .astro { display: none; }
  .modelo__title { position: static; margin-bottom: 24px; }
  .modelo__svg { width: 100%; margin: 0 auto; }
}

@media (max-width: 860px) {
  :root { --nav-h: 60px; }
  .topbar { justify-content: space-between; padding: 0 16px; background: rgba(12,12,12,.9); }
  .topbar__brand { display: block; }
  .topbar__toggle {
    display: flex; flex-direction: column; gap: 5px; background: none; border: 0; padding: 10px;
  }
  .topbar__toggle span { width: 26px; height: 2px; background: var(--white); transition: transform .25s, opacity .25s; }
  .topbar__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .topbar__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .topbar__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav {
    position: fixed; top: var(--nav-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; background: rgba(12,12,12,.97);
    max-height: 0; overflow: hidden; transition: max-height .35s ease;
  }
  .nav.is-open { max-height: 420px; }
  .nav a { padding: 16px 24px; font-size: 14px; border-top: 1px solid #222; }
  .nav a + a::before { display: none; }
  .side-logo { display: none; }

  .panel { padding: calc(var(--nav-h) + 30px) 16px 70px; }
  .panel::after { inset: calc(var(--nav-h) + 8px) 0 5vh 0; }
  .tiles { grid-template-columns: 1fr; gap: 40px; width: 100%; max-width: 330px; }
  .tile { height: 80px; font-size: 13px; }
  .tile__icon { width: 80px; height: 80px; }
  .bm-grid, .split, .split--limbo, .cred, .contact { grid-template-columns: 1fr; }
  .split--limbo .display { text-align: center; justify-self: center; }
  .lt-card { min-height: 0; }
  .porter { padding: 34px 30px 46px; font-size: .8rem; }
  .porter__grid div { min-height: 80px; }
  .services { grid-template-columns: 1fr 1fr; grid-template-areas: "main main" "a b" "c d" "e e"; gap: 24px 16px; }
  .service--main .service__card, .service:nth-child(6) .service__card { aspect-ratio: 4 / 3; }
  .service h3 { font-size: .9rem; }
  .service__card { border-width: 6px; border-radius: 20px; }
  .service__card p { font-size: .78rem; padding: 10px; }
  .cred__frame { border-width: 28px; margin: 0 auto; }
  .contact .display { text-align: center; }
  .contact__half { display: none; }
  .contact__form { padding: 24px 20px; }
  .contact__mail { grid-column: 1; text-align: center; letter-spacing: .12em; }
  .question { grid-template-columns: 40px 1fr; }
  .question fieldset { grid-column: 1 / -1; justify-content: center; padding: 10px; background: rgba(0,0,0,.25); }
  .opt span { width: 40px; height: 40px; }
  .footer { flex-direction: column; text-align: center; letter-spacing: .15em; }
  .footer a { border: 0; padding: 0; }
  .contact-bubble { right: 12px; bottom: 12px; }
}

/* Medialuna roja amplia del Modelo Bilivers, como en el diseño original */
@media (min-width: 861px) {
  #modelo .arc--red.arc--right { width: 140vh; height: 140vh; right: -62vh; top: -38vh; border-width: 34vh; border-color: rgba(200, 40, 60, .5); }
}

/* ---------- Brand Match: composición fiel al diseño (escritorio) ---------- */
.bm-stage { display: none; }
@media (min-width: 861px) {
  .panel--stage .bm-mobile { display: none; }
  .bm-stage { display: block; width: 100%; height: calc(100vh - var(--nav-h) - 12px - 7vh); height: calc(100svh - var(--nav-h) - 12px - 7vh); overflow: visible; }
  .bms-panel { fill: rgba(40, 40, 40, .84); }
  .bms-frame { fill: rgba(82, 190, 142, .42); }
  .bms-label text { fill: #fff; font-family: var(--body); font-size: 17px; font-weight: 400; letter-spacing: .5px; text-anchor: middle; }
  .bms-label .y { fill: #e6e619; font-family: var(--display); font-size: 31px; font-weight: 600; letter-spacing: 0; }
  .bms-tri path { fill: none; stroke: #fff; stroke-width: 2.2; }
  .bms-hidden text { fill: #fff; font-family: var(--body); font-weight: 800; font-size: 26px; text-anchor: middle; }
  .bms-scribble path { fill: none; stroke: #fff; stroke-width: 5.5; stroke-linejoin: round; stroke-linecap: round; }
  .bms-truth text { fill: #fff; font-family: var(--body); font-weight: 600; font-size: 29px; text-anchor: middle; }
  .bms-card { fill: rgba(245, 168, 0, .9); }
  .bms-logo circle { fill: none; stroke: #4a4a4a; stroke-width: 4; }
  .bms-brand, .bms-match { font-family: var(--body); font-size: 80px; letter-spacing: 11px; text-anchor: middle; }
  .bms-brand { fill: #fff; font-weight: 800; }
  .bms-match { fill: #4a4a4a; font-weight: 400; }
  .bms-rule { stroke: #fff; stroke-width: 2.5; }
  .bms-copy { fill: #1a1a1a; font-family: var(--body); font-size: 22.5px; font-weight: 500; }
  .bms-cta rect { fill: var(--green); }
  .bms-cta text { fill: #fff; font-family: var(--body); font-weight: 700; font-size: 14px; letter-spacing: 5px; }
  .bms-cta .eye { fill: #fff; }
  .bms-cta .pupil { fill: none; stroke: var(--green); stroke-width: 6; }
  .bms-cta { transition: filter .2s; }
  .bms-cta:hover { filter: brightness(1.1); }
}

/* ---------- Limbo: composición fiel al diseño (escritorio) ---------- */
.limbo-stage { display: none; }
@media (min-width: 861px) {
  /* Mismo recuadro útil que las demás pantallas: menú + 12px arriba, 7vh abajo, 150px del logo lateral y 6vw a la derecha */
  .panel--stage { padding: calc(var(--nav-h) + 12px) 6vw 7vh 150px; }
  .panel--stage::after, .panel--stage .blob, .panel--stage .limbo-mobile { display: none; }
  .limbo-stage { display: block; width: 100%; height: calc(100vh - var(--nav-h) - 12px - 7vh); height: calc(100svh - var(--nav-h) - 12px - 7vh); overflow: visible; }
  .ls-circle { fill: rgba(82, 190, 142, .82); }
  .ls-veil { fill: rgba(105, 105, 105, .5); }
  .ls-panel { fill: rgba(52, 52, 52, .84); }
  .ls-box { fill: rgba(135, 135, 135, .5); }
  .ls-box--light { fill: rgba(205, 205, 205, .62); }
  .ls-label text { fill: #ececec; font-family: var(--display); font-weight: 500; font-size: 20px; text-anchor: middle; }
  .ls-caption { fill: #fff; font-family: Arial, sans-serif; font-size: 13px; text-anchor: end; }
  .ls-limbo text { fill: #111; font-family: var(--body); font-weight: 800; font-size: 46px; text-anchor: middle; letter-spacing: 1px; }
  .ls-arrow { fill: rgba(238, 238, 238, .86); }
  .ls-head text { fill: #fff; font-family: var(--display); font-weight: 600; font-size: 104px; text-anchor: end; }
  .ls-head .o { fill: var(--orange); }
  .ls-contact text { fill: #fff; font-family: var(--body); font-weight: 700; font-size: 14px; letter-spacing: 4px; }
  .ls-contact path { filter: drop-shadow(0 2px 3px rgba(0,0,0,.25)); transition: transform .2s; transform-origin: 236px 768px; }
  .ls-contact:hover path { transform: scale(1.08) rotate(-4deg); }
  .contact-bubble.is-hidden { opacity: 0; pointer-events: none; }
}
.contact-bubble { transition: opacity .3s; }