/* Veriko landing — Nosotros (/about). Hereda base/shell/.hero/.sec/.caps/.cta de home.css.
   Propio: ritmo compacto, tarjeta de creencia del hero, prosa "por qué existimos", link del CTA. Tokens-only. */

/* Ritmo vertical compacto (mismo criterio que el resto del slice). */
.about-page .hero{padding:44px 0 40px}
.about-page .sec{padding:40px 0}
@media(min-width:768px){.about-page .hero{padding:56px 0 48px}.about-page .sec{padding:52px 0}}
@media(min-width:1100px){.about-page .hero{padding:64px 0 56px}.about-page .sec{padding:60px 0}}

/* Hero: degradado azul de marca + glow radial suave desde la esquina superior izquierda. */
.about-page .hero{position:relative;overflow:hidden;background:radial-gradient(55% 65% at 0% 0%,var(--color-primary-light),transparent 62%),linear-gradient(180deg,var(--color-surface),var(--color-surface-sunken) 80%)}

/* A11y: el eyebrow gris-terciario no alcanza 4.5:1 sobre el hero tintado ni sobre la sección hundida
   (text-tertiary apenas pasa sobre blanco puro). Subimos a text-secondary en esta página → ≥6.9:1. */
.about-page .eyebrow{color:var(--color-text-secondary)}

/* Tarjeta de creencia (llena la 2ª columna del hero en desktop). */
.about-belief{display:flex;flex-direction:column;gap:14px;padding:26px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);align-self:center}
.about-belief .ab-ico{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:var(--color-primary-light)}
.about-belief .ab-ico .ic{width:24px;height:24px;color:var(--color-primary)}
.about-belief .ab-label{font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--color-text-tertiary);margin:0}
.about-belief .ab-body{font-size:18px;line-height:1.5;font-weight:600;color:var(--color-text-primary);margin:0;text-wrap:pretty}

/* Principios ("en qué creemos"): cada .cap como tarjeta blanca sobre el fondo hundido. */
.about-page .caps .cap{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);padding:22px}

/* Prosa "por qué existimos": párrafos legibles; subtítulo pegado al título. */
.about-page .sec-head:has(+ .about-prose){margin-bottom:10px}
.about-prose{max-width:64ch}
.about-prose p{font-size:var(--font-size-lg);line-height:1.65;color:var(--color-text-secondary);margin:0}
.about-prose p + p{margin-top:14px}

/* CTA: botón principal + enlace alterno (sobre fondo oscuro). */
.cta-links{display:flex;gap:20px 22px;align-items:center;justify-content:center;flex-wrap:wrap}
.cta-altlink{color:#fff;font-weight:600;display:inline-flex;align-items:center;gap:6px;border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:1px}
.cta-altlink .ic{width:15px;height:15px;transition:transform .15s ease}
.cta-altlink:hover{border-bottom-color:#fff}
.cta-altlink:hover .ic{transform:translateX(3px)}
@media(prefers-reduced-motion:reduce){.cta-altlink .ic{transition:none}.cta-altlink:hover .ic{transform:none}}