/* Las piezas ilustran cada servicio y acompañan sus enlaces. */
.service-scene {
  --metal: #d2ad74;
  --light: #f0d7aa;
  --edge: #82653e;
  position: relative;
  display: grid;
  place-items: center;
  min-height: 128px;
  margin: 13px 0 21px;
  overflow: clip;
  border-radius: 8px;
  background: radial-gradient(ellipse at 50% 38%, #334b61, #142333 74%);
  perspective: 540px;
}

.service-scene::before {
  content: "";
  position: absolute;
  width: 160%;
  height: 90px;
  top: 59%;
  left: -30%;
  background-image: linear-gradient(#8da5b52a 1px, transparent 1px), linear-gradient(90deg,#8da5b52a 1px,transparent 1px);
  background-size: 16px 16px;
  transform: perspective(160px) rotateX(58deg);
  mask-image: radial-gradient(ellipse,#000,transparent 65%);
}

.scene-object {
  position: relative;
  width: 112px;
  height: 82px;
  transform-style: preserve-3d;
  transform: rotateX(20deg) rotateY(-21deg) rotateZ(-9deg);
  transition: transform .45s cubic-bezier(.2,.7,.2,1);
}

.service-card:is(:hover,:focus-within) .scene-object {
  transform: rotateX(9deg) rotateY(12deg) rotateZ(-4deg);
}

.scene-object i {
  position: absolute;
  display: block;
  background: linear-gradient(135deg,var(--light),var(--metal));
  border: 1px solid var(--light);
  border-radius: 6px;
  box-shadow: -2px 5px var(--edge), -5px 9px 12px #09101b88;
}

.scene-workflow .scene-object i {
  width: 31px;
  height: 27px;
  background: linear-gradient(135deg,#f4d9a8,#c49a5d);
}

.scene-workflow .scene-object i::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid #775830;
  border-radius: 3px;
}

.scene-workflow .scene-object i:nth-child(1) { top: 27px; left: 1px; transform: translateZ(11px); }
.scene-workflow .scene-object i:nth-child(2) { top: 9px; left: 73px; transform: translateZ(17px); }
.scene-workflow .scene-object i:nth-child(3) { top: 52px; left: 73px; transform: translateZ(4px); }

.scene-workflow .scene-object::before {
  content: "";
  position: absolute;
  left: 26px;
  top: 23px;
  width: 58px;
  height: 44px;
  background: linear-gradient(#c9d3dd,#c9d3dd) left center / 50% 1px no-repeat;
  border-right: 0;
}

.scene-workflow .scene-object::after {
  content: "";
  position: absolute;
  left: 55px;
  top: 22px;
  width: 31px;
  height: 45px;
  border: 1px solid #c9d3dd;
  border-right: 0;
  border-radius: 4px 0 0 4px;
}

.scene-conversation .scene-object i {
  width: 73px;
  height: 37px;
  border-radius: 8px 8px 8px 2px;
}

.scene-conversation .scene-object i::after {
  content: "•••";
  position: absolute;
  inset: 6px 11px;
  color: #624a28;
  font: 800 17px/1.4 Arial,sans-serif;
  letter-spacing: 4px;
}

.scene-conversation .scene-object i:nth-child(1) { top: 9px; left: 7px; transform: translateZ(21px); }
.scene-conversation .scene-object i:nth-child(2) {
  --metal: #7897ad;
  --light: #b3c8d5;
  --edge: #436075;
  top: 37px;
  left: 38px;
  transform: translateZ(1px);
}
.scene-conversation .scene-object i:nth-child(2)::after { color: #213a4d; }
.scene-conversation .scene-object i:nth-child(3) { display: none; }

.scene-browser .scene-object i:nth-child(1) {
  inset: 8px 0;
  border-color: #afc3d4;
  background: linear-gradient(#6b899f 16%,#e7edf1 16%);
  transform: translateZ(6px);
}

.scene-browser .scene-object i:nth-child(1)::before {
  content: "•••";
  position: absolute;
  left: 7px;
  top: -2px;
  color: #fff;
  font-size: 12px;
  letter-spacing: 2px;
}

.scene-browser .scene-object i:nth-child(2) {
  width: 34px;
  height: 29px;
  left: 13px;
  top: 31px;
  transform: translateZ(18px);
}

.scene-browser .scene-object i:nth-child(3) {
  width: 44px;
  height: 24px;
  left: 57px;
  top: 33px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: repeating-linear-gradient(#526b81 0 2px, transparent 2px 7px);
  transform: translateZ(8px);
}

.scene-book .scene-object i:nth-child(1) {
  inset: 10px 0;
  transform: translateZ(4px);
}

.scene-book .scene-object i:nth-child(n+2) {
  width: 49px;
  height: 52px;
  top: 12px;
  background: repeating-linear-gradient(#71849866 0 1px,transparent 1px 7px) center / 28px 32px no-repeat, #f4ead8;
  box-shadow: -2px 3px #b3986a;
}

.scene-book .scene-object i:nth-child(2) {
  left: 7px;
  transform-origin: right center;
  transform: translateZ(10px) rotateY(16deg);
}

.scene-book .scene-object i:nth-child(3) {
  left: 56px;
  transform-origin: left center;
  transform: translateZ(10px) rotateY(-16deg);
}

/* Un bloque por solicitud, a partir del resultado que ya calcula la demo. */
.demo-app .result-counts {
  grid-template-columns: repeat(4,minmax(0,1fr));
}

.demo-app .result-counts .result-metric {
  --block: #52738c;
  --block-top: #a7c0d2;
  --block-side: #304c64;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 15px;
  border-color: #d9dfe2;
  background: linear-gradient(145deg,#fff,#eef2f4);
}

.demo-app .result-counts [data-category="ready"] {
  --block: #4d7764;
  --block-top: #a0c3aa;
  --block-side: #2a5140;
}

.demo-app .result-counts [data-category="duplicates"] {
  --block: #b18048;
  --block-top: #e2bc7d;
  --block-side: #7f532c;
}

.demo-app .result-counts [data-category="incomplete"] {
  --block: #a2645c;
  --block-top: #dba097;
  --block-side: #77433e;
}

.demo-app .result-counts .result-blocks {
  display: grid;
  grid-template-columns: repeat(3,16px);
  grid-auto-rows: 17px;
  gap: 1px 5px;
  align-content: end;
  min-height: 36px;
  margin-top: auto;
  padding: 12px 0 4px 5px;
  transform: skewY(-6deg);
}

.result-blocks i {
  position: relative;
  width: 12px;
  height: 10px;
  background: var(--block);
  animation: place-block .32s both;
  animation-delay: calc(var(--order) * 38ms);
}

.result-blocks i::before,
.result-blocks i::after {
  content: "";
  position: absolute;
}

.result-blocks i::before {
  top: -5px;
  left: 0;
  width: 100%;
  height: 5px;
  background: var(--block-top);
  transform: skewX(-45deg);
  transform-origin: bottom;
}

.result-blocks i::after {
  top: 0;
  left: 100%;
  width: 5px;
  height: 100%;
  background: var(--block-side);
  transform: skewY(-45deg);
  transform-origin: left;
}

@keyframes place-block {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width:760px) {
  .demo-app .result-counts {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .scene-object { transition: none; }
  .result-blocks i { animation: none; }
}

.compact-scene {
  width: 100%;
  min-height: 108px;
  margin: 12px 0 4px;
}

:is(.method-item,.pricing-card,.other-offer):is(:hover,:focus-within) .scene-object {
  transform: rotateX(9deg) rotateY(12deg) rotateZ(-4deg);
}

.featured .compact-scene {
  border: 1px solid #e0bd875c;
  background: radial-gradient(ellipse at 50% 38%, #3a5369, #152635 76%);
}

.scene-proposal .scene-object i:first-child {
  inset: 4px 26px 5px;
  transform: translate3d(-12px, 3px, 1px) rotate(-10deg);
  opacity: .85;
}

.scene-proposal .scene-object i:nth-child(2) {
  inset: 4px 26px 5px;
  background: repeating-linear-gradient(#536a7e 0 2px, transparent 2px 8px) center 37px / 33px 20px no-repeat, #f3ecde;
  transform: translate3d(8px, -3px, 15px);
}

.scene-proposal .scene-object i:nth-child(3) {
  inset: 13px 38px auto 45px;
  height: 13px;
  transform: translateZ(18px);
}

.scene-launch .scene-object i:first-child {
  inset: 17px 15px 11px;
  border-color: #7698ae;
  background: linear-gradient(145deg,#63849b,#344f64);
}

.scene-launch .scene-object i:nth-child(2) {
  inset: 10px 24px 21px;
  transform: translateZ(13px);
}

.scene-launch .scene-object i:nth-child(3) {
  top: 27px;
  left: 44px;
  width: 25px;
  height: 15px;
  border: solid #4c391e;
  border-width: 0 0 3px 3px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: translateZ(16px) rotate(-45deg);
}

.scene-inbox .scene-object i {
  width: 78px;
  height: 32px;
  left: 17px;
  top: 24px;
  transform: translate3d(5px, 20px, -8px);
}

.scene-inbox .scene-object i::before {
  content: "";
  position: absolute;
  width: 34px;
  height: 2px;
  left: 12px;
  top: 12px;
  background: #735a39;
  box-shadow: 0 6px #735a3988;
}

.scene-inbox .scene-object i:nth-child(2) {
  background: linear-gradient(145deg,#e9d5ae,#b5915c);
  transform: translate3d(-1px, 7px, 5px);
}

.scene-inbox .scene-object i:nth-child(3) {
  transform: translate3d(-7px, -7px, 18px);
}

.scene-calendar .scene-object i:first-child {
  inset: 9px 13px 7px;
  background: linear-gradient(#678398 24%,#e9eef0 24%);
  border-color: #b3c8d4;
  transform: translateZ(6px);
}

.scene-calendar .scene-object i:first-child::after {
  content: "";
  position: absolute;
  inset: 24px 12px 9px;
  background: radial-gradient(circle,#6a8394 2px,transparent 2.6px) 0 0 / 12px 10px;
}

.scene-calendar .scene-object i:nth-child(2) {
  width: 44px;
  height: 26px;
  left: 63px;
  top: 39px;
  transform: translateZ(24px);
}

.scene-calendar .scene-object i:nth-child(2)::after {
  content: "•••";
  position: absolute;
  inset: 4px 8px;
  color: #624a28;
  font-weight: 800;
  letter-spacing: 2px;
}

.scene-calendar .scene-object i:nth-child(3) { display: none; }

.home-page .about-mark.profile-3d {
  isolation: isolate;
  padding: 28px 19px 38px;
  min-height: 355px;
  perspective: 900px;
  background: radial-gradient(ellipse at 50% 28%,#3e566e,#172a3d 60%,#102030);
}

.home-page .profile-3d::before {
  width: 80%;
  height: auto;
  aspect-ratio: 1;
  border-color: #d6bb8d2b;
  z-index: -1;
}

.home-page .profile-3d::after {
  width: 82%;
  height: 105px;
  bottom: 4px;
  border-color: #d6bb8d3b;
  box-shadow: 0 0 0 24px #d6bb8d0d, 0 0 0 48px #d6bb8d09;
  transform: rotateX(51deg);
  z-index: -1;
}

.profile-plaque {
  width: min(100%,275px);
  padding: 24px 12px 20px;
  border: 1px solid #b8a180a6;
  border-radius: 15px;
  text-align: center;
  background: linear-gradient(155deg,#354b60,#182939 75%);
  box-shadow: -3px 5px #142332,-6px 10px #091522,0 27px 43px #08131ec2;
  transform-style: preserve-3d;
  transform: rotateX(7deg) rotateY(-13deg) rotateZ(-3deg);
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}

.profile-3d:hover .profile-plaque {
  transform: rotateX(3deg) rotateY(9deg) rotateZ(0);
}

.profile-medallion {
  display: grid;
  place-items: center;
  width: 118px;
  height: 118px;
  margin: 0 auto 24px;
  border: 3px double #fff0c9;
  border-radius: 50%;
  color: #513922;
  background: radial-gradient(circle at 35% 27%, #fae7c2 5%,#dcba84 63%,#be965d);
  box-shadow: -2px 5px #886a41,-5px 9px #3b2e22,-7px 15px 18px #0c1622b8,inset 0 0 0 6px #99724635;
  transform: translateZ(22px);
}

.profile-medallion span {
  font: 700 51px/1 Georgia,serif;
  letter-spacing: -.075em;
  margin-right: .06em;
  text-shadow: 1px 2px #ffecc4;
}

.home-page .profile-3d .about-person-name {
  display: block;
  color: #fff3dc;
  font-size: clamp(23px,3vw,31px);
  line-height: 1.12;
  letter-spacing: -.025em;
  text-shadow: 0 2px #a78355, 0 4px #111d28;
}

.home-page .profile-3d .about-person-role {
  display: block;
  margin-top: 11px;
  font-size: 11px;
  line-height: 1.45;
  letter-spacing: .055em;
}

@media (max-width:680px) {
  .compact-scene { min-height: 98px; }
  .home-page .about-mark.profile-3d { min-height: 306px; }
}

@media (prefers-reduced-motion: reduce) {
  .profile-plaque { transition: none; }
}