* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; background: #f8f9fb; color: #1a1f36; }
h1, h2, h3 { font-family: 'Playfair Display', serif; }

/* Header */
.header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.85); backdrop-filter: blur(12px); border-bottom: 1px solid #e5e7eb; }
.header-inner { max-width: 72rem; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; }
.back-link { font-size: .875rem; color: #6b7280; text-decoration: none; transition: color .2s; }
.back-link:hover { color: #1a1f36; }
.brand { display: flex; align-items: center; gap: .75rem; }
.brand-logo { height: 2rem; width: 2rem; border-radius: .375rem; object-fit: cover; }
.brand-name { font-family: 'Playfair Display', serif; font-size: 1.125rem; font-weight: 600; }

/* Hero */
.diag-hero { background: #1a1f36; color: #fff; text-align: center; padding: 4rem 1.5rem 5rem; border-bottom: 1px solid #2a2f46; }
.diag-hero-inner { max-width: 48rem; margin: 0 auto; }
.diag-badge { display: inline-flex; align-items: center; gap: .5rem; background: rgba(37,99,235,.15); color: rgba(255,255,255,.7); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; padding: .375rem 1rem; border-radius: 9999px; margin-bottom: 1rem; }
.diag-hero h1 { font-size: clamp(1.75rem, 4vw, 3rem); font-weight: 700; line-height: 1.2; margin-bottom: 1rem; }
.diag-hero h1 span { color: rgba(255,255,255,.5); }
.diag-hero p { color: rgba(255,255,255,.45); max-width: 32rem; margin: 0 auto; line-height: 1.6; }

/* Calculator layout */
.calculator { max-width: 72rem; margin: 0 auto; padding: 3rem 1.5rem; }
.calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
@media (max-width: 768px) { .calc-grid { grid-template-columns: 1fr; } }

/* Cards */
.calc-card { background: #fff; border: 1px solid #e5e7eb; border-radius: .75rem; padding: 1.5rem; margin-bottom: 1.5rem; }
.calc-card h3 { font-family: 'Inter', sans-serif; font-size: .9rem; font-weight: 600; margin-bottom: 1rem; }
.calc-card h3 small { font-weight: 400; color: #9ca3af; }

/* Fields */
.field { margin-bottom: 1rem; }
.field label { display: block; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #6b7280; margin-bottom: .375rem; }
.field input { width: 100%; padding: .625rem .75rem; border: 1px solid #e5e7eb; border-radius: .375rem; font-size: .875rem; background: #fff; transition: border-color .2s; }
.field input:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 480px) { .field-grid { grid-template-columns: 1fr; } }

/* Select rows */
.select-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.select-row label { font-size: .875rem; }
.select-row select { width: 7rem; padding: .5rem; border: 1px solid #e5e7eb; border-radius: .375rem; font-size: .8rem; background: #fff; }

/* Button */
.btn-calculate { width: 100%; padding: 1rem; background: #2563eb; color: #fff; border: none; border-radius: .5rem; font-size: 1rem; font-weight: 600; cursor: pointer; transition: background .2s; }
.btn-calculate:disabled { opacity: .5; cursor: not-allowed; }
.btn-calculate:not(:disabled):hover { background: #1d4ed8; }

/* Results placeholder */
.results-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 24rem; border: 2px dashed #e5e7eb; border-radius: .75rem; padding: 3rem; text-align: center; color: #9ca3af; }
.placeholder-icon { font-size: 3rem; margin-bottom: 1rem; opacity: .3; }
.results-placeholder p { font-size: .875rem; line-height: 1.6; }

/* Loss card */
.loss-card { background: #1a1f36; color: #fff; border-radius: .75rem; padding: 2rem; text-align: center; margin-bottom: 1.5rem; }
.loss-label { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .15em; color: rgba(255,255,255,.45); margin-bottom: .25rem; }
.loss-value { font-family: 'Playfair Display', serif; font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; color: #f87171; }
.loss-annual { font-size: .875rem; color: rgba(255,255,255,.55); margin-top: .75rem; }
.loss-annual strong { color: rgba(255,255,255,.8); }
.loss-note { font-size: .75rem; color: rgba(255,255,255,.35); font-style: italic; margin-top: .5rem; }

/* Performance bar */
.perf-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: .75rem; }
.perf-header p { font-size: .875rem; font-weight: 500; }
.perf-pct { font-weight: 700; }
.perf-bar-bg { height: .75rem; background: #f3f4f6; border-radius: 9999px; overflow: hidden; }
.perf-bar-fill { height: 100%; border-radius: 9999px; transition: width .7s ease; width: 0; }
.perf-label { font-size: .75rem; font-weight: 600; margin-top: .5rem; }
.perf-scale { display: flex; justify-content: space-between; font-size: .625rem; color: #9ca3af; margin-top: .5rem; }

.color-green { color: #059669; } .bg-green { background: #10b981; }
.color-amber { color: #d97706; } .bg-amber { background: #f59e0b; }
.color-red { color: #dc2626; } .bg-red { background: #ef4444; }

/* Metrics */
.metrics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem; }
.metric-card { text-align: center; padding: 1.25rem; margin-bottom: 0; }
.metric-label { font-size: .625rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #6b7280; }
.metric-value { font-size: 1.25rem; font-weight: 700; margin-top: .25rem; }

/* Issues */
.issue-item { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; border-radius: .5rem; font-size: .875rem; font-weight: 500; margin-bottom: .5rem; }
.issue-error { background: #fef2f2; color: #b91c1c; }
.issue-warning { background: #fffbeb; color: #92400e; }

/* Explanation */
.explanation p { font-size: .75rem; color: #6b7280; line-height: 1.7; }
.explanation strong { color: #1a1f36; }

/* CTA */
.btn-cta-whatsapp { display: flex; align-items: center; justify-content: center; gap: .75rem; width: 100%; padding: 1.25rem 2rem; background: #059669; color: #fff; border-radius: .5rem; font-size: 1rem; font-weight: 600; text-decoration: none; transition: background .2s, box-shadow .2s; box-shadow: 0 4px 12px rgba(5,150,105,.3); }
.btn-cta-whatsapp:hover { background: #047857; box-shadow: 0 8px 24px rgba(5,150,105,.35); }

.results-content > * { margin-bottom: 1.5rem; }
.results-content > *:last-child { margin-bottom: 0; }