/*
 * Afín — case pages shared styles
 * Used by: casos/*.html, casos/en/*.html (13 pages total)
 * Requires: landing.css (loaded first)
 */

/* ── Override container width for narrow case pages ─────────────────────── */
.container { max-width: 860px; }
section { padding: 3.5rem 1.5rem; }

/* ── Breadcrumb ──────────────────────────────────────────────────────────── */
.breadcrumb {
    font-size: .82rem; color: var(--gray-600);
    padding: .75rem 1.5rem;
    border-bottom: 1px solid var(--gray-200);
}
.breadcrumb a { color: var(--primary); }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero {
    background: radial-gradient(ellipse 110% 55% at 50% -5%,
        rgba(22,163,74,.06) 0%, transparent 70%);
    text-align: center;
    padding: 4rem 1.5rem;
}
.hero-chip {
    display: inline-block;
    background: var(--primary-light); color: var(--primary);
    font-size: .78rem; font-weight: 700;
    padding: .3rem .9rem; border-radius: 20px;
    margin-bottom: 1.25rem; letter-spacing: .03em;
    border: 1px solid rgba(22,163,74,.2);
}
.hero h1 {
    font-family: var(--display);
    font-size: clamp(1.9rem, 4.5vw, 2.9rem);
    font-weight: 700; line-height: 1.1;
    letter-spacing: -.02em;
    max-width: 700px; margin: 0 auto 1rem;
    font-optical-sizing: auto;
}
.hero h1 em { font-style: italic; color: var(--primary); }
.hero p {
    font-size: 1.05rem; color: var(--gray-600);
    max-width: 560px; margin: 0 auto 2rem; line-height: 1.65;
}
.hero-actions { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn-primary {
    padding: .75rem 1.75rem; background: var(--primary); color: white;
    border-radius: 9px; font-weight: 700; font-size: .95rem;
    transition: background .15s; display: inline-block;
    box-shadow: 0 4px 12px rgba(22,163,74,.25);
}
.btn-primary:hover { background: var(--primary-dark); }
.btn-secondary {
    padding: .75rem 1.75rem; border: 1.5px solid var(--gray-200);
    border-radius: 9px; font-weight: 600; font-size: .95rem;
    color: var(--gray-600); transition: all .15s; display: inline-block;
}
.btn-secondary:hover { border-color: var(--primary); color: var(--primary); }
.btn-white {
    padding: .75rem 1.75rem; background: white; color: var(--primary);
    border-radius: 9px; font-weight: 700; font-size: .95rem;
    transition: all .15s; display: inline-block;
}
.btn-white:hover { background: var(--primary-light); }

/* ── Section headings ────────────────────────────────────────────────────── */
h2 {
    font-family: var(--display);
    font-size: 1.8rem; font-weight: 700;
    line-height: 1.2; margin-bottom: 1rem;
    font-optical-sizing: auto;
}
.section-sub { margin-bottom: 2rem; }

/* ── Pain grid ───────────────────────────────────────────────────────────── */
.pain-grid {
    display: grid; grid-template-columns: repeat(3,1fr);
    gap: 1.25rem; margin-top: 2rem;
}
.pain-card {
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius); padding: 1.5rem;
}
.pain-card h3 {
    font-size: .97rem; font-weight: 700;
    margin-bottom: .4rem; line-height: 1.35;
}
.pain-card p { font-size: .88rem; color: var(--gray-600); line-height: 1.6; }

/* ── Steps (vertical list) ───────────────────────────────────────────────── */
.steps { display: flex; flex-direction: column; gap: 0; margin-top: 2.5rem; max-width: 600px; }
.step {
    display: grid; grid-template-columns: 3rem 1fr; gap: 1.5rem;
    align-items: start; padding: 1.75rem 0;
    border-bottom: 1px solid var(--gray-200);
}
.step:first-child { padding-top: 0; }
.step:last-child { border-bottom: none; padding-bottom: 0; }
.step-num {
    font-family: var(--display); font-size: 2.25rem; font-weight: 700;
    color: var(--gray-300); line-height: 1; text-align: right;
    margin-top: -.2rem; font-optical-sizing: auto; user-select: none;
}
.step h3 { font-size: 1rem; font-weight: 700; margin-bottom: .35rem; line-height: 1.35; }
.step p { font-size: .9rem; color: var(--gray-600); line-height: 1.6; }

/* ── Scenario (dark) ─────────────────────────────────────────────────────── */
.scenario-section { background: #0c1a12; padding: 3.5rem 1.5rem; }
.scenario-section .container { text-align: center; }
.scenario-label {
    font-size: 11px; font-weight: 700; letter-spacing: 3.5px;
    text-transform: uppercase; color: #86efac; margin-bottom: 12px;
}
blockquote {
    font-family: var(--display);
    font-size: clamp(1.2rem, 3vw, 1.5rem);
    font-weight: 700; font-style: italic;
    color: white; line-height: 1.45;
    max-width: 640px; margin: 0 auto 1rem;
    font-optical-sizing: auto;
}
.scenario-meta { font-size: .85rem; color: #6b7280; }

/* ── CTA ─────────────────────────────────────────────────────────────────── */
.cta-section { background: var(--primary); text-align: center; padding: 4rem 1.5rem; }
.cta-section h2 {
    font-family: var(--display);
    color: white; font-size: clamp(1.6rem, 3.5vw, 2.2rem);
    margin-bottom: .75rem; font-optical-sizing: auto;
}
.cta-section p { color: rgba(255,255,255,.75); margin-bottom: 2rem; font-size: 1rem; }

/* ── Other cases ─────────────────────────────────────────────────────────── */
.other-cases { background: var(--gray-50); padding: 2.5rem 1.5rem; text-align: center; }
.other-cases p { font-size: .9rem; color: var(--gray-600); margin-bottom: 1rem; font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.chip {
    padding: .4rem 1rem; border: 1.5px solid var(--gray-200);
    border-radius: 6px; font-size: .82rem; font-weight: 500; transition: all .15s;
}
.chip:hover { border-color: var(--primary); color: var(--primary); }

/* ── Cases index grid ────────────────────────────────────────────────────── */
.cases-index-hero {
    text-align: center; padding: 4rem 1.5rem 3rem;
    background: radial-gradient(ellipse 80% 60% at 50% -5%,
        rgba(22,163,74,.06) 0%, transparent 70%), var(--gray-50);
}
.cases-index-hero h1 {
    font-family: var(--display);
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 700; line-height: 1.15; margin-bottom: .75rem;
    font-optical-sizing: auto;
}
.cases-index-hero p { font-size: 1.05rem; color: var(--gray-600); max-width: 540px; margin: 0 auto; }

/* Category section dividers */
.cases-category-header {
    max-width: 960px; margin: 0 auto;
    padding: 2.5rem 1.5rem .25rem;
    display: flex; align-items: center; gap: .85rem;
}
.cases-category-title {
    font-size: .72rem; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; color: var(--gray-400); white-space: nowrap;
}
.cases-category-line {
    flex: 1; height: 1px; background: var(--gray-200);
}
.cases-category-chip {
    font-size: .7rem; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; padding: .2rem .65rem;
    border-radius: 20px; white-space: nowrap;
}
.cases-category-chip--pro {
    background: #eff6ff; color: #3b82f6;
}
.cases-category-chip--community {
    background: var(--primary-light); color: var(--primary);
}

.cases-grid {
    display: grid; grid-template-columns: repeat(4,1fr);
    gap: 1.25rem; padding: 1.25rem 1.5rem 0;
    max-width: 960px; margin: 0 auto;
}
.cases-grid--community { grid-template-columns: repeat(3,1fr); }
.cases-grid:last-of-type { padding-bottom: 3rem; }

.case-card {
    border: 1.5px solid var(--gray-200); border-radius: var(--radius);
    padding: 1.5rem; transition: all .2s;
    display: flex; flex-direction: column; gap: .5rem;
    text-decoration: none; color: inherit;
}
.case-card:hover {
    border-color: var(--gray-300);
    box-shadow: 0 4px 20px rgba(22,163,74,.10);
    transform: translateY(-2px);
}
.case-icon {
    width: 40px; height: 40px;
    background: var(--primary-light);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: .25rem; flex-shrink: 0;
    transition: background .2s;
}
.case-card:hover .case-icon { background: rgba(22,163,74,.15); }
.case-icon svg { width: 20px; height: 20px; stroke: var(--primary); }
.case-card h2 { font-family: inherit; font-size: 1rem; font-weight: 700; }
.case-card p { font-size: .88rem; color: var(--gray-600); flex: 1; line-height: 1.55; }
.case-link { display: inline-flex; align-items: center; gap: .3rem; font-size: .85rem; font-weight: 600; color: var(--primary); margin-top: .25rem; }
.case-link:hover { text-decoration: underline; }

/* Community cards — subtle green tint */
.case-card--community .case-icon {
    background: var(--primary-light);
}
.case-card--community {
    background: var(--gray-50);
}

/* ── Pain cards — auto-numbered accent (CSS counter, no HTML changes) ────── */
.pain-grid { counter-reset: pain-counter; }
.pain-card::before {
    counter-increment: pain-counter;
    content: "0" counter(pain-counter);
    display: block;
    font-family: var(--display); font-size: 1.75rem; font-weight: 700;
    color: var(--gray-200); line-height: 1; margin-bottom: .6rem;
    font-optical-sizing: auto; user-select: none;
}

/* ── Override footer for case pages ─────────────────────────────────────── */
footer {
    background: white;
    border-top: 1px solid var(--gray-200);
    color: var(--gray-600);
}
footer a { color: var(--gray-600); }
footer a:hover { color: var(--primary); }

/* ── Mobile / tablet ─────────────────────────────────────────────────────── */
@media(max-width:860px) {
    /* professional grid: 4 → 2 cols */
    .cases-grid { grid-template-columns: repeat(2,1fr); }
    /* community grid: stays at 3 cols — fits fine at tablet widths */
    .cases-grid--community { grid-template-columns: repeat(3,1fr); }
}
@media(max-width:700px) {
    section { padding: 2.5rem 1.25rem; }
    .hero { padding: 3rem 1.25rem; }
    .hero h1 { font-size: clamp(1.8rem, 8vw, 2.4rem); }
    .step { grid-template-columns: 2rem 1fr; gap: 1rem; }
    .step-num { font-size: 1.75rem; }
    blockquote { font-size: 1.1rem; }
    .cases-category-header { padding: 2rem 1.25rem .25rem; }
    .cases-index-hero { padding: 3rem 1.25rem 2rem; }
}
@media(max-width:640px) {
    .pain-grid { grid-template-columns: 1fr; }
    /* community grid: 3 → 2 cols at small tablet */
    .cases-grid--community { grid-template-columns: repeat(2,1fr); }
}
@media(max-width:560px) {
    /* both grids collapse to 1 col on mobile */
    .cases-grid { grid-template-columns: 1fr; padding-left: 1.25rem; padding-right: 1.25rem; }
}