/* ============================================================
   a bordo — pared Nº 07 · turquesa profunda
   Contenido: H2 + 2 párrafos + lista de 5 ventajas + párrafo de
   cierre — palabra por palabra, sin .check_list genérica.
   Anatomy unlike siblings: relato arriba a la izquierda con la
   foto grande a la derecha; las 5 ventajas son ETIQUETAS DE
   EQUIPAJE de papel crema colgadas de sus piolines, en racimo
   despareja; remate en renglón con CTA blanco.
   Gesto propio: las etiquetas caen y SE HAMACAN colgadas,
   una tras otra, hasta quedar quietas.
   ============================================================ */

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

.a-bordo .numeral {
  top: clamp(.5rem, 2.5vw, 2rem);
  left: clamp(.6rem, 3vw, 2.8rem);
  transform: rotate(-2deg);
  color: rgba(253, 249, 240, .08);
}

.a-bordo_armado {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2.4rem, 6vw, 5.5rem);
  align-items: center;
  margin-bottom: clamp(2.6rem, 5vw, 4rem);
}

.a-bordo_relato .pregon {
  color: rgba(253, 249, 240, .65);
  margin-bottom: 1.1rem;
}
.a-bordo_titulo {
  font-size: clamp(1.9rem, 2.5vw + .8rem, 3rem);
  color: var(--hueso);
  margin-bottom: 1.5rem;
}
.a-bordo_titulo em {
  font-style: normal;
  color: var(--cian);
  text-shadow: 2px 2px 0 var(--tinta);
}
.a-bordo_relato > p { color: rgba(253, 249, 240, .88); }
.a-bordo_relato > p + p { margin-top: 1.2rem; }

.a-bordo_foto { transform: rotate(-1.5deg); }
.a-bordo_foto figcaption {
  margin-top: .8rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  color: var(--tinta);
}

/* ── las cinco etiquetas de equipaje ── */
.etiquetas {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.3rem, 2.5vw, 2.2rem);
  align-items: flex-start;
  margin-bottom: clamp(2.6rem, 5vw, 4rem);
}

.etiqueta {
  position: relative;
  flex: 1 1 16rem;
  max-width: 24rem;
}
/* el piolín que la cuelga (vive en el li: el recorte no lo toca) */
.etiqueta::after {
  content: "";
  position: absolute;
  top: -1.05rem;
  left: 1.15rem;
  width: 1.6rem;
  height: 2px;
  background: rgba(253, 249, 240, .65);
  transform: rotate(38deg);
}
/* el cuerpo recortado: drop-shadow sigue la forma rebanada */
.etiqueta_cuerpo {
  position: relative;
  display: block;
  background: var(--crema);
  color: var(--tinta);
  font-weight: 600;
  font-size: .98rem;
  line-height: 1.5;
  padding: 1.7rem 1.3rem 1.2rem;
  clip-path: polygon(1.4rem 0, 100% 0, 100% 100%, 0 100%, 0 1.4rem);
  filter: drop-shadow(.45rem .55rem 0 rgba(0, 0, 0, .4));
}
/* el ojal: la pared se asoma por el agujero */
.etiqueta_cuerpo::before {
  content: "";
  position: absolute;
  top: .62rem;
  left: 1.55rem;
  width: .72rem;
  height: .72rem;
  border-radius: 50%;
  background: var(--turquesa);
  box-shadow: 0 0 0 3px rgba(26, 11, 30, .55);
}
/* racimo despareja: cada etiqueta cuelga a su manera */
.etiqueta:nth-child(1) { transform: rotate(-1.8deg); }
.etiqueta:nth-child(2) { transform: rotate(1.2deg) translateY(.9rem); }
.etiqueta:nth-child(3) { transform: rotate(-.7deg) translateY(.2rem); }
.etiqueta:nth-child(4) { transform: rotate(1.6deg) translateY(1.1rem); }
.etiqueta:nth-child(5) { transform: rotate(-1.1deg) translateY(.5rem); }

/* — remate — */
.a-bordo_remate {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  flex-wrap: wrap;
}
.a-bordo_remate p { max-width: 56ch; color: rgba(253, 249, 240, .88); }

/* ── gesto: las etiquetas caen y se hamacan ── */
@media (min-width: 1025px) {
  .etiqueta {
    opacity: 0;
    translate: 0 -20px;
    transition: opacity .4s ease, translate .45s ease;
  }
  .etiqueta_cuerpo { transform-origin: 1.9rem .95rem; }   /* gira desde el ojal */
  .a-bordo.en-vista .etiqueta { opacity: 1; translate: 0 0; }
  .a-bordo.en-vista .etiqueta_cuerpo { animation: hamaca 1.15s ease-out forwards; }

  .a-bordo.en-vista .etiqueta:nth-child(1),
  .a-bordo.en-vista .etiqueta:nth-child(1) .etiqueta_cuerpo { transition-delay: .05s; animation-delay: .05s; }
  .a-bordo.en-vista .etiqueta:nth-child(2),
  .a-bordo.en-vista .etiqueta:nth-child(2) .etiqueta_cuerpo { transition-delay: .22s; animation-delay: .22s; }
  .a-bordo.en-vista .etiqueta:nth-child(3),
  .a-bordo.en-vista .etiqueta:nth-child(3) .etiqueta_cuerpo { transition-delay: .39s; animation-delay: .39s; }
  .a-bordo.en-vista .etiqueta:nth-child(4),
  .a-bordo.en-vista .etiqueta:nth-child(4) .etiqueta_cuerpo { transition-delay: .56s; animation-delay: .56s; }
  .a-bordo.en-vista .etiqueta:nth-child(5),
  .a-bordo.en-vista .etiqueta:nth-child(5) .etiqueta_cuerpo { transition-delay: .73s; animation-delay: .73s; }

  @keyframes hamaca {                       /* péndulo que se apaga */
    0%   { rotate: -4.5deg; }
    30%  { rotate: 3deg; }
    55%  { rotate: -1.6deg; }
    78%  { rotate: .8deg; }
    100% { rotate: 0deg; }
  }
}

/* ============================ móvil ============================ */
@media (max-width: 1024px) {
  .a-bordo_armado { grid-template-columns: 1fr; gap: 2.4rem; }
  .a-bordo_foto { order: 2; transform: rotate(-.8deg); }
  .a-bordo_relato { order: 1; }

  .a-bordo_titulo { font-size: clamp(1.9rem, 7vw, 2.5rem); }

  .etiquetas { gap: 1.4rem; }
  .etiqueta {
    flex-basis: 100%;
    max-width: none;
    font-size: 1.04rem;
  }
  .etiqueta:nth-child(1),
  .etiqueta:nth-child(2),
  .etiqueta:nth-child(3),
  .etiqueta:nth-child(4),
  .etiqueta:nth-child(5) { transform: rotate(0) translateY(0); }

  .a-bordo_remate { flex-direction: column; align-items: stretch; }
  .a-bordo_remate .boton { width: 90%; }
}