/* ============================================================
   amparo — bloque 12 (Atención al usuario y seguridad)
   Anatomy unlike siblings: dos facetas apiladas (Atención /
   Seguridad) a un lado y un retrato vertical al otro, enmarcado por
   corchetes-mira que se trazan (lenguaje de seguridad).
   Animación propia: los corchetes de la mira ENTRAN desde las
   esquinas y las facetas escalonan.
   ============================================================ */

.amparo { padding-block: var(--aire-l); }

.amparo__reja {
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  gap: clamp(1.6rem, 4vw, 3.6rem);
  align-items: center;
}

.amparo__cab .folio { margin-bottom: var(--aire-s); }
.amparo__titulo {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--t-h2);
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--marfil);
  margin-bottom: var(--aire-s);
  max-width: 20ch;
}

.faceta { padding: 1.3rem 0; }
.faceta + .faceta { border-top: 1px solid var(--linde-suave); }
.faceta__rotulo {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--esmeralda-viva);
  margin-bottom: .6rem;
}
.faceta--seguridad .faceta__rotulo { color: var(--oro); }
.faceta p {
  color: var(--marfil-medio);
  font-size: var(--t-cuerpo);
  line-height: 1.6;
}

.amparo__foto {
  position: relative;
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra-mesa);
}
.amparo__foto img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.amparo__foto::before, .amparo__foto::after {
  content: "";
  position: absolute;
  width: 2.6rem; height: 2.6rem;
  z-index: 2;
}
.amparo__foto::before { top: 14px; left: 14px; border-top: 2px solid var(--esmeralda); border-left: 2px solid var(--esmeralda); }
.amparo__foto::after  { bottom: 14px; right: 14px; border-bottom: 2px solid var(--esmeralda); border-right: 2px solid var(--esmeralda); }

@media (max-width: 860px) {
  .amparo__reja { grid-template-columns: 1fr; gap: var(--aire-m); }
  .amparo__foto { order: -1; max-width: 24rem; aspect-ratio: 4 / 3; }
  .amparo__foto img { aspect-ratio: 4 / 3; }
}

@media (min-width: 721px) and (prefers-reduced-motion: no-preference) {
  .amparo__cab, .faceta { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
  .faceta:nth-of-type(1) { transition-delay: .1s; }
  .faceta:nth-of-type(2) { transition-delay: .25s; }
  .amparo__foto { opacity: 0; transition: opacity .7s ease; }
  .amparo__foto::before { transform: scale(0); transform-origin: top left; transition: transform .5s ease .4s; }
  .amparo__foto::after  { transform: scale(0); transform-origin: bottom right; transition: transform .5s ease .55s; }

  .amparo.en-vista .amparo__cab,
  .amparo.en-vista .faceta { opacity: 1; transform: none; }
  .amparo.en-vista .amparo__foto { opacity: 1; }
  .amparo.en-vista .amparo__foto::before,
  .amparo.en-vista .amparo__foto::after { transform: scale(1); }
}