.piedra {
  --b-ancho: 108.33cqw;
  --b-izq: 27.08cqw;
  --b-bajo: -63.54cqw;
  --b-visible: 42.71cqw;
    --sol: max(57.69%, calc(var(--lampara-radio) * 2));
  position: relative;
  background: var(--color-obsidiana);
  overflow: clip;
}
@supports not (width: 1cqw) {
  .piedra { --b-ancho: 108.33vw; --b-izq: 27.08vw; --b-bajo: -63.54vw; --b-visible: 42.71vw; }
}
@media (orientation: portrait) {
  .piedra {
    --b-ancho: 192.59cqw;
    --b-izq: -20.37cqw;
    --b-bajo: -120.37cqw;
    --b-visible: 68.52cqw;
    --sol: 57.69%;
  }
  @supports not (width: 1cqw) {
    .piedra { --b-ancho: 192.59vw; --b-izq: -20.37vw; --b-bajo: -120.37vw; --b-visible: 68.52vw; }
  }
}

.piedra__escena {
  background: var(--color-obsidiana);
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: var(--space-6) var(--margen);
  container-type: inline-size;
  --lampara-x: 76%;
  --lampara-y: 76%;
}
@media (orientation: portrait) {
  .piedra__escena {
    justify-content: flex-start;
    padding-top: calc(var(--encabezado-alto) + var(--space-1));
    padding-bottom: calc(var(--b-visible) + var(--space-4));
    --lampara-x: 70%;
    --lampara-y: 88%;
  }
}
.piedra__escena::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
  mix-blend-mode: overlay;
  opacity: 0.32;
}

.relieve.piedra__relieve { inset: 0; overflow: hidden; }
.relieve.piedra__relieve::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--space-6);
  background: linear-gradient(to bottom, transparent, var(--color-obsidiana));
  pointer-events: none;
}
.piedra__brujula {
  position: absolute;
  left: var(--b-izq);
  bottom: var(--b-bajo);
  width: var(--b-ancho);
  aspect-ratio: 1;
}
.piedra__sol {
  position: absolute;
  left: calc((100% - var(--sol)) / 2);
  top: calc((100% - var(--sol)) / 2);
  width: var(--sol);
  aspect-ratio: 1;
  background: radial-gradient(closest-side, rgb(var(--lampara-papel) / 0.5) 0%, rgb(var(--lampara-papel) / 0.43) 25%, rgb(var(--lampara-papel) / 0.25) 50%, rgb(var(--lampara-papel) / 0.11) 70%, rgb(var(--lampara-papel) / 0.035) 85%, rgb(var(--lampara-papel) / 0) 100%);
  mix-blend-mode: overlay;
}

.piedra__rotulo, .recibe { max-width: calc(64cqw - var(--margen)); }
@media (orientation: portrait) {
  .piedra__rotulo, .recibe { max-width: 100%; }
}
.piedra__rotulo { color: var(--color-piedra); }
.recibe { --palabra: var(--text-48); margin-top: var(--space-4); }
.recibe__palabra {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--palabra);
  line-height: 1.1;
  color: var(--color-cantera);
}
.recibe__frase { margin-top: var(--space-2); max-width: 26em; color: var(--color-cantera); text-wrap: balance; }
.recibe__frase + .recibe__palabra { margin-top: var(--space-5); }
@media (min-width: 768px) {
  .recibe { --palabra: var(--text-72); }
  .recibe__frase { font-size: var(--text-20); }
}
@media (min-width: 1200px) and (min-height: 800px) {
  .recibe { --palabra: var(--text-96); }
}
@media (orientation: portrait) and (max-height: 760px) {
  .recibe { --palabra: var(--text-40); margin-top: var(--space-3); }
  .recibe__frase + .recibe__palabra { margin-top: var(--space-3); }
}
@media (orientation: landscape) and (max-height: 799px) {
  .piedra__escena { padding-block: calc(var(--encabezado-alto) + var(--space-3)) var(--space-4); }
  .recibe__frase + .recibe__palabra { margin-top: var(--space-4); }
}
@media (orientation: landscape) and (max-height: 599px) {
  .recibe { --palabra: var(--text-48); }
  .recibe__frase + .recibe__palabra { margin-top: var(--space-3); }
}