/* The partner card, in the rail of a guide (.socio--rail) and in the body of a page (.socio--inline),
   redesigned 2026-10-22 (Mario: "these sponsored placements look lazy as fuck.. nothing about them
   stands out. use an attractive photo of the highest quality"). The photo of the service in use leads,
   under the brand's Selva fade only where its label sits (docs/brand/GUIDELINES.md section 7); the
   button is the one solid action on the card; the disclosure sits directly under it at full ink, never
   under the 15px floor (FTC: clear and conspicuous, next to the link). Two-class selectors so the
   kit's prose and rail styles cannot reach in. Kit tokens only. */

.socio { overflow: hidden; border: 1px solid var(--color-line); border-radius: 18px; background: var(--color-card); color: var(--color-ink); }

.socio .socio__foto { position: relative; margin: 0; aspect-ratio: 3 / 2; background: var(--color-surface-2); }
.socio .socio__foto img { display: block; width: 100%; height: 100%; margin: 0; border-radius: 0; object-fit: cover; }
.socio .socio__foto figcaption { position: absolute; inset: auto 0 0; margin: 0; padding: 30px 18px 12px;
  background: linear-gradient(to top, color-mix(in srgb, var(--color-brand-deep) 88%, transparent) 0%,
    color-mix(in srgb, var(--color-brand-deep) 40%, transparent) 60%, transparent 100%);
  color: #fff; font-size: 15px; font-weight: 700; line-height: 1.3; text-align: left; letter-spacing: 0.005em; }

.socio .socio__body { padding: 18px 20px 20px; }
.socio .socio__label { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--color-brand-ink); }
.socio .socio__name { margin: 4px 0 0; font-family: var(--font-display); font-weight: var(--font-weight-display); font-size: 28px; line-height: 1.1; letter-spacing: -0.01em; color: var(--color-ink); }

.socio .socio__do { margin: 14px 0 0; font-size: 16px; line-height: 1.5; }
.socio .socio__do span { display: block; margin-bottom: 2px; font-size: 15px; font-weight: 700; color: var(--color-ink); }

.socio .socio__quote { margin: 14px 0 0; padding: 2px 0 2px 14px; border: 0; border-left: 3px solid var(--color-accent); background: none; font-style: normal; }
.socio .socio__quote p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--color-ink); }
.socio .socio__quote footer, .socio .socio__src { margin: 6px 0 0; font-size: 15px; line-height: 1.45; color: var(--color-muted); }
.socio .socio__quote footer::before { content: none; }

.socio .socio__cta { margin: 20px 0 0; font-size: 15px; line-height: 1.45; }
.socio .socio__cta a { display: flex; min-height: 52px; align-items: center; justify-content: center; padding: 12px 18px;
  border-radius: 14px; background: var(--color-brand); color: var(--color-on-brand); font-size: 17px; font-weight: 700;
  line-height: 1.25; text-align: center; text-decoration: none; text-wrap: balance; transition: background-color 120ms ease; }
.socio .socio__cta a:hover { background: var(--color-brand-deep); }
.socio .socio__cta a:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.socio .socio__cta span { display: block; margin-top: 10px; font-size: 15px; color: var(--color-muted); }
.socio .socio__cta .pk-promo-note { color: var(--color-ink); }

.socio .socio__credito { margin: 14px 0 0; font-size: 15px; line-height: 1.4; color: var(--color-muted); }

/* In the body: a card of its own between sections, photo beside the text from 40rem. */
.socio--inline { margin: 32px 0; }
.pk-prose .socio--inline { max-width: none; }
@media (min-width: 40rem) {
  .socio--inline.socio--foto { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .socio--inline.socio--foto .socio__foto { aspect-ratio: auto; min-height: 100%; }
  .socio--inline .socio__body { padding: 22px 24px 22px; }
  .socio--inline .socio__cta a { display: inline-flex; min-width: 240px; }
}

@media (prefers-reduced-motion: reduce) { .socio .socio__cta a { transition: none; } }
@media print { .socio--rail { display: none !important; } .socio .socio__foto { display: none; } }