/* ============================================================
   custodia — pared Nº 09 · tinta (la garita serena)
   Contenido: H2 + 4 párrafos (operador, correo de soporte,
   consejo, juego responsable) — palabra por palabra.
   Anatomy unlike siblings: bloque QUIETO y oficial — foto a la
   izquierda con el SELLO estampado encima; a la derecha el
   relato con el consejo como apunte de barra fucsia y el
   correo/0800 acentuados. Sin papeles, sin tablas: confianza.
   Gesto propio: el sello «Juego Responsable» SE ESTAMPA sobre
   la foto — golpe de goma: cae grande y asienta con giro.
   ============================================================ */

.custodia {
  position: relative;
  background: var(--tinta);
  color: var(--hueso);
  padding-block: clamp(4rem, 8vw, 7rem);
}

.custodia .numeral {
  bottom: clamp(.5rem, 2.5vw, 2rem);
  right: clamp(.6rem, 3vw, 2.8rem);
  transform: rotate(1.8deg);
  color: rgba(253, 249, 240, .07);
}

.custodia_armado {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(2.4rem, 6vw, 5.5rem);
  align-items: center;
}

/* — vitrina: foto + sello estampado — */
.custodia_vitrina { position: relative; }
.custodia_foto { transform: rotate(-1.3deg); }
.custodia_foto figcaption {
  margin-top: .8rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  color: var(--tinta);
}

.custodia_sello {
  position: absolute;
  right: -1.2rem;
  bottom: 2.6rem;
  z-index: 2;
  display: inline-block;
  padding: .55rem .95rem;
  border: 3px solid var(--fucsia);
  outline: 1px solid var(--fucsia);
  outline-offset: 3px;
  font: 400 .92rem/1.15 var(--plakat);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fucsia);
  background: rgba(26, 11, 30, .55);
  transform: rotate(-8deg);
  width: min-content;
  text-align: center;
}

/* — relato — */
.custodia_relato .pregon {
  color: rgba(253, 249, 240, .6);
  margin-bottom: 1.1rem;
}
.custodia_titulo {
  font-size: clamp(1.8rem, 2.3vw + .8rem, 2.8rem);
  color: var(--hueso);
  margin-bottom: 1.5rem;
}
.custodia_titulo em {
  font-style: normal;
  color: var(--turquesa-viva);
  text-shadow: 2px 2px 0 rgba(0, 0, 0, .6);
}

.custodia_relato > p { color: rgba(253, 249, 240, .87); }
.custodia_relato > p + p { margin-top: 1.2rem; }

.custodia_correo {
  font-family: var(--plakat);
  font-weight: 400;
  color: var(--cian);
  text-shadow: 2px 2px 0 rgba(0, 0, 0, .6);
  white-space: nowrap;
}

/* el consejo: apunte con barra fucsia, sangrado a mano */
.custodia_consejo {
  border-left: 4px solid var(--fucsia);
  padding-left: 1.2rem;
  margin-left: .4rem;
}

.custodia_linea { color: var(--hueso); font-weight: 700; white-space: nowrap; }

.custodia_cta { margin-top: 2.2rem; }

/* ── gesto: el sello se estampa de un golpe ── */
@media (min-width: 1025px) {
  .custodia_sello {
    opacity: 0;
    transform: rotate(-16deg) scale(1.7);
    transition: opacity .28s ease .45s,
                transform .38s cubic-bezier(.2, 1.4, .4, 1) .45s;
  }
  .custodia.en-vista .custodia_sello {
    opacity: 1;
    transform: rotate(-8deg) scale(1);
  }
}

/* ============================ móvil ============================ */
@media (max-width: 1024px) {
  .custodia_armado { grid-template-columns: 1fr; gap: 2.4rem; }

  .custodia_vitrina { order: 2; }
  .custodia_relato { order: 1; }

  .custodia_titulo { font-size: clamp(1.8rem, 6.8vw, 2.4rem); }

  .custodia_foto { transform: rotate(-.7deg); }
  .custodia_sello {
    right: .4rem;
    bottom: 3rem;
    font-size: 1rem;
  }

  .custodia_correo { white-space: normal; word-break: break-all; }

  .custodia_cta { width: 90%; }
}