/* Barby, fotógrafa de Jema: foto con animación suave y dibujitos a mano */
.barby { margin: 0 auto 46px; }
.barby-card { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 44px; align-items: center; padding: 40px 46px 40px 40px; border-radius: 34px; }
.barby-photo { position: relative; margin: 0; padding: 18px 10px 30px; }
.barby-frame { position: relative; border-radius: 26px; overflow: hidden; background: #fff; padding: 12px 12px 12px; box-shadow: 0 30px 60px #3b2a1a26, 0 4px 12px #3b2a1a14; transform: rotate(-3deg); }
.barby-frame img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 18px; }
.barby-sticker { position: absolute; right: -6px; top: 34px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px 10px 16px; border-radius: 999px; background: #fff; color: #b43b08; font-weight: 800; font-size: .95rem; box-shadow: 0 10px 24px #b43b0826; transform: rotate(6deg); z-index: 2; }
.barby-sticker svg { width: 20px; height: 20px; fill: #e0457b; }
.barby-tape { position: absolute; top: 6px; left: 50%; width: 130px; height: 34px; margin-left: -65px; background: #ffe27acc; transform: rotate(-5deg); box-shadow: 0 2px 4px #0002; z-index: 2; }
.barby-doodles { position: absolute; inset: -30px -40px -20px -40px; width: calc(100% + 80px); height: calc(100% + 50px); pointer-events: none; overflow: visible; z-index: 3; }
.barby-doodles .ink { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.barby-doodles .heart { stroke: #e0457b; stroke-width: 3.5; }
.barby-doodles .spark { stroke: #e9661f; stroke-width: 3; }
.barby-doodles .swirl { stroke: #7630b9; stroke-width: 2.5; }
.barby-float { position: absolute; left: 50%; bottom: 40px; width: 0; height: 0; z-index: 3; pointer-events: none; }
.barby-float i { position: absolute; font-style: normal; color: #e0457b; font-size: 22px; opacity: 0; }
.barby-copy { min-width: 0; }
.barby-copy > .eyebrow { color: var(--orange-ink); font-size: .8rem; margin-bottom: 16px; }
.barby-copy h2 { font-family: var(--body, 'JemaSans', Arial, sans-serif); font-weight: 800; font-size: clamp(1.9rem, 2.55vw, 2.6rem); line-height: 1.18; letter-spacing: -0.02em; margin-bottom: 20px; text-transform: none; color: var(--ink); }
.barby-copy h2 .barby-accent, .barby-copy h2 .barby-accent span { color: var(--orange-ink); }
.barby-copy > p:not(.eyebrow) { font-size: 1.04rem; line-height: 1.8; color: var(--muted); margin: 0 0 14px; max-width: 560px; }
.barby-copy strong { color: var(--ink); }
.barby-tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 20px 0 26px; }
.barby-tags li { padding: 6px 12px; border: 1px solid #fff; border-radius: 999px; background: #ffffffa8; color: #4d606c; font-size: .78rem; }
.barby .button { white-space: normal; text-align: left; }

/* Animación: entra al verse y queda con un movimiento suave */
.barby.is-visible .barby-frame { animation: barby-in .9s cubic-bezier(.2, 1.4, .4, 1) both, barby-float 6s ease-in-out 1s infinite; }
.barby.is-visible .barby-sticker { animation: barby-pop .6s .5s cubic-bezier(.2, 1.6, .4, 1) both, barby-wiggle 4.5s 2s ease-in-out infinite; }
.barby.is-visible .barby-doodles .ink { animation: barby-draw 1.1s ease-out forwards; }
.barby.is-visible .barby-doodles .d2 { animation-delay: .35s; }
.barby.is-visible .barby-doodles .d3 { animation-delay: .6s; }
.barby.is-visible .barby-doodles .d4 { animation-delay: .85s; }
.barby.is-visible .barby-doodles .twinkle { animation: barby-draw 1s .9s ease-out forwards, barby-twinkle 2.4s 2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.barby.is-visible .barby-float i { animation: barby-rise 4.2s ease-in infinite; }
.barby-float i:nth-child(2) { left: 40px; animation-delay: 1.4s !important; font-size: 16px; }
.barby-float i:nth-child(3) { left: -50px; animation-delay: 2.8s !important; font-size: 18px; }
@keyframes barby-in { from { opacity: 0; transform: rotate(-12deg) scale(.86) translateY(30px); } to { opacity: 1; transform: rotate(-3deg) scale(1); } }
@keyframes barby-float { 0%, 100% { transform: rotate(-3deg) translateY(0); } 50% { transform: rotate(-2deg) translateY(-8px); } }
@keyframes barby-pop { from { opacity: 0; transform: rotate(-10deg) scale(.4); } to { opacity: 1; transform: rotate(6deg) scale(1); } }
@keyframes barby-wiggle { 0%, 86%, 100% { transform: rotate(6deg); } 90% { transform: rotate(-2deg) scale(1.06); } 95% { transform: rotate(9deg); } }
@keyframes barby-draw { to { stroke-dashoffset: 0; } }
@keyframes barby-twinkle { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.7); opacity: .6; } }
@keyframes barby-rise { 0% { opacity: 0; transform: translateY(0) scale(.6); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(-260px) translateX(18px) scale(1.1); } }

@media (max-width: 900px) {
  .barby-card { grid-template-columns: 1fr; gap: 16px; padding: 22px 18px 26px; }
  .barby-photo { max-width: 420px; margin: 0 auto; width: 100%; }
  .barby-copy { text-align: left; }
}
@media (max-width: 600px) {
  .barby { margin-bottom: 24px; }
  .barby-card { grid-template-columns: 124px minmax(0, 1fr); column-gap: 16px; row-gap: 0; align-items: center; padding: 16px 16px 18px; border-radius: 24px; }
  .barby-photo { grid-column: 1; grid-row: 1 / span 2; max-width: none; width: 124px; margin: 0; padding: 12px 0 14px; }
  .barby-frame { padding: 5px; border-radius: 14px; }
  .barby-frame img { border-radius: 10px; }
  .barby-tape { width: 58px; height: 16px; margin-left: -29px; top: 5px; }
  .barby-sticker { top: auto; bottom: 0; right: -18px; font-size: .62rem; padding: 5px 9px; gap: 4px; }
  .barby-sticker svg { width: 11px; height: 11px; }
  .barby-float { bottom: 30px; }
  .barby-float i { font-size: 14px; }
  .barby-doodles { inset: -14px -16px -8px -16px; width: calc(100% + 32px); height: calc(100% + 22px); }
  .barby-copy { display: contents; }
  .barby-copy > .eyebrow { grid-column: 2; grid-row: 1; align-self: end; font-size: .62rem; letter-spacing: .1em; margin: 0 0 6px; }
  .barby-copy h2 { grid-column: 2; grid-row: 2; align-self: start; font-size: 1.12rem; line-height: 1.22; margin: 0; }
  .barby-copy > p:not(.eyebrow) { grid-column: 1 / -1; grid-row: 3; font-size: .93rem; line-height: 1.6; margin: 12px 0 0; }
  .barby-copy > p.barby-more, .barby-tags, .barby .button { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .barby .barby-frame, .barby .barby-sticker, .barby .barby-float i { animation: none !important; }
  .barby .barby-float { display: none; }
  .barby .barby-doodles .ink { animation: none !important; stroke-dashoffset: 0; }
}
.barby .barby-copy h2 { color: var(--ink); }
.barby .barby-copy h2 .barby-accent, .barby-copy h2 .barby-accent span { color: var(--orange-ink); }