/* ../shared/calculadoras/calorias/calorias.css */
/* CSS COMPLETO - Calculadora de Calorias - ÁREA BIOLÓGICA */

/* ===================================
   VARIÁVEIS DE CORES BIOLÓGICAS
   ================================== */
:root {
    --primary: #dc2626;          /* Vermelho médico */
    --secondary: #0ea5e9;        /* Azul hospitalar */
    --accent: #22c55e;           /* Verde saúde */
    --light: #fef2f2;            /* Fundo rosa claro */
    --gradient: linear-gradient(135deg, #dc2626, #0ea5e9);
    
    /* Cores complementares */
    --success: #059669;
    --warning: #d97706;
    --danger: #dc2626;
    --info: #0ea5e9;
    --text-primary: #1f2937;
    --text-secondary: #6b7280;
    --border: #d1d5db;
    --white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
}

/* ===================================
   SEÇÃO DA CALCULADORA CALORIAS
   ================================== */
.calorias-calculator-section {
    margin-bottom: 3rem;
}

.calorias-header {
    text-align: center;
    margin-bottom: 2rem;
}

.calorias-header h1 {
    font-size: 2.5rem;
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1rem;
    font-weight: 700;
}

.calorias-header p {
    font-size: 1.2rem;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

.calorias-container {
    background: var(--white);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow: 0 8px 30px rgba(220, 38, 38, 0.1);
    border: 2px solid var(--light);
    transition: all 0.3s ease;
}

.calorias-container:hover {
    box-shadow: 0 12px 40px rgba(220, 38, 38, 0.15);
    transform: translateY(-2px);
}

.calorias-inputs h3 {
    color: var(--primary);
    margin-bottom: 1.5rem;
    text-align: center;
    font-weight: 600;
    font-size: 1.4rem;
}

/* ===================================
   DADOS BÁSICOS CALORIAS
   ================================== */
.calorias-dados-basicos {
    background: var(--light);
    border: 2px solid var(--primary);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    transition: all 0.3s ease;
}

.calorias-dados-basicos:hover {
    box-shadow: 0 8px 25px rgba(220, 38, 38, 0.12);
}

.calorias-input-row {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.calorias-input-group {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.calorias-input-group label {
    font-weight: 600;
    color: var(--primary);
    font-size: 0.95rem;
    margin-bottom: 0.3rem;
}

.calorias-input-group input,
.calorias-input-group select {
    padding: 0.8rem 1rem;
    border: 2px solid var(--primary);
    border-radius: 10px;
    font-size: 1rem;
    background: var(--white);
    transition: all 0.3s ease;
    color: var(--text-primary);
}

.calorias-input-group input:focus,
.calorias-input-group select:focus {
    outline: none;
    border-color: var(--secondary);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.2);
}

/* ===================================
   INPUTS ESPECIAIS CALORIAS
   ================================== */
.calorias-weight-input,
.calorias-height-input {
    display: flex;
    align-items: center;
    background: var(--white);
    border: 2px solid var(--primary);
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.calorias-weight-input:focus-within,
.calorias-height-input:focus-within {
    border-color: var(--secondary);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.2);
}

.calorias-weight-input span,
.calorias-height-input span {
    background: var(--primary);
    color: var(--white);
    padding: 0.8rem 1rem;
    font-weight: bold;
    font-size: 1rem;
}

.calorias-weight-input input,
.calorias-height-input input {
    border: none;
    padding: 0.8rem 1rem;
    flex: 1;
    font-size: 1rem;
    background: transparent;
    color: var(--text-primary);
}

.calorias-weight-input input:focus,
.calorias-height-input input:focus {
    outline: none;
    transform: none;
    box-shadow: none;
}

/* ===================================
   NÍVEL DE ATIVIDADE
   ================================== */
.calorias-atividade {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.05), rgba(5, 150, 105, 0.03));
    border: 2px solid var(--accent);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    transition: all 0.3s ease;
}

.calorias-atividade:hover {
    box-shadow: 0 8px 25px rgba(34, 197, 94, 0.15);
}

.calorias-atividade h3 {
    color: var(--accent);
    text-align: center;
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.atividade-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.atividade-card {
    position: relative;
    cursor: pointer;
    display: block;
}

.atividade-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.atividade-card .card-content {
    background: var(--white);
    border: 2px solid var(--accent);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.atividade-card:hover .card-content {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(34, 197, 94, 0.2);
}

.atividade-card input[type="radio"]:checked + .card-content {
    background: var(--accent);
    color: var(--white);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(34, 197, 94, 0.4);
}

.atividade-card h4 {
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
}

.atividade-card p {
    margin-bottom: 1rem;
    font-size: 0.9rem;
    opacity: 0.9;
}

.atividade-card .multiplier {
    font-weight: bold;
    font-size: 0.8rem;
    opacity: 0.8;
}

/* ===================================
   OBJETIVO
   ================================== */
.calorias-objetivo {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.05), rgba(59, 130, 246, 0.03));
    border: 2px solid var(--secondary);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    transition: all 0.3s ease;
}

.calorias-objetivo:hover {
    box-shadow: 0 8px 25px rgba(14, 165, 233, 0.15);
}

.calorias-objetivo h3 {
    color: var(--secondary);
    text-align: center;
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.objetivo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.objetivo-card {
    position: relative;
    cursor: pointer;
    display: block;
}

.objetivo-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.objetivo-card .card-content {
    background: var(--white);
    border: 2px solid var(--secondary);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.objetivo-card:hover .card-content {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(14, 165, 233, 0.2);
}

.objetivo-card input[type="radio"]:checked + .card-content {
    background: var(--secondary);
    color: var(--white);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(14, 165, 233, 0.4);
}

.objetivo-card h4 {
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
}

.objetivo-card p {
    margin-bottom: 1rem;
    font-size: 0.9rem;
    opacity: 0.9;
}

.objetivo-card .deficit,
.objetivo-card .maintain,
.objetivo-card .surplus {
    font-weight: bold;
    font-size: 0.9rem;
    padding: 0.3rem 0.8rem;
    border-radius: 6px;
}

.deficit {
    background: rgba(220, 38, 38, 0.2);
    color: var(--primary);
}

.maintain {
    background: rgba(14, 165, 233, 0.2);
    color: var(--secondary);
}

.surplus {
    background: rgba(34, 197, 94, 0.2);
    color: var(--accent);
}

/* ===================================
   BOTÕES CALORIAS
   ================================== */
.calorias-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.calorias-calc-btn {
    background: var(--gradient);
    color: var(--white);
    border: none;
    padding: 1rem 2rem;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.3);
}

.calorias-calc-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(220, 38, 38, 0.4);
}

.calorias-clear-btn {
    background: var(--light);
    color: var(--primary);
    border: 2px solid var(--primary);
    padding: 1rem 2rem;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}

.calorias-clear-btn:hover {
    background: var(--primary);
    color: var(--white);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.3);
}

/* ===================================
   RESULTADO CALORIAS
   ================================== */
.calorias-resultado {
    background: linear-gradient(135deg, var(--light), rgba(220, 38, 38, 0.05));
    border: 2px solid var(--primary);
    border-radius: 20px;
    padding: 2.5rem;
    margin-top: 2rem;
    animation: slideInUp 0.5s ease;
}

.calorias-resultado h3 {
    color: var(--primary);
    margin-bottom: 2rem;
    font-size: 1.8rem;
    text-align: center;
    font-weight: 600;
}

.calorias-resultado-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.calorias-card {
    background: var(--white);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    border: 2px solid;
    transition: all 0.3s ease;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
}

.calorias-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.calorias-card.tmb {
    border-color: var(--secondary);
}

.calorias-card.total {
    border-color: var(--primary);
}

.calorias-card.objetivo {
    border-color: var(--accent);
}

.calorias-value {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
    font-family: 'Courier New', monospace;
}

.calorias-value.tmb {
    color: var(--secondary);
}

.calorias-value.total {
    color: var(--primary);
}

.calorias-value.objetivo {
    color: var(--accent);
}

.calorias-label {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.calorias-description {
    font-size: 0.9rem;
    color: var(--text-primary);
    line-height: 1.4;
}

/* ===================================
   MACRONUTRIENTES E ESTRATÉGIAS
   ================================== */
.macros-distribution {
    background: linear-gradient(135deg, var(--gray-50), var(--gray-100));
    border: 2px solid var(--primary);
    border-radius: 16px;
    padding: 2rem;
    margin-top: 2rem;
}

.macros-distribution h4 {
    color: var(--primary);
    margin-bottom: 1.5rem;
    text-align: center;
    font-size: 1.3rem;
    font-weight: 600;
}

.macros-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.macro-card {
    background: var(--white);
    border: 2px solid;
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.macro-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--macro-color);
}

.macro-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.macro-card.proteinas {
    border-color: var(--primary);
    --macro-color: var(--primary);
}

.macro-card.carboidratos {
    border-color: var(--secondary);
    --macro-color: var(--secondary);
}

.macro-card.gorduras {
    border-color: var(--accent);
    --macro-color: var(--accent);
}

.macro-card h5 {
    color: var(--macro-color);
    margin-bottom: 1rem;
    font-size: 1.1rem;
    font-weight: 600;
}

.macro-card p {
    margin: 0.5rem 0;
    font-size: 0.95rem;
}

.macro-card p:first-of-type {
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--macro-color);
}

.strategy-summary {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.05), rgba(5, 150, 105, 0.03));
    border: 2px solid var(--accent);
    border-radius: 16px;
    padding: 2rem;
    margin-top: 2rem;
}

.strategy-summary h4 {
    color: var(--accent);
    margin-bottom: 1.5rem;
    text-align: center;
    font-size: 1.3rem;
    font-weight: 600;
}

.strategy-tips {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
}

.tips-column h5 {
    color: var(--accent);
    margin-bottom: 1rem;
    font-size: 1.1rem;
    font-weight: 600;
}

.tips-column ul {
    margin-left: 1.2rem;
}

.tips-column li {
    color: var(--text-primary);
    margin-bottom: 0.8rem;
    line-height: 1.5;
}

.food-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.food-tag {
    background: var(--accent);
    color: var(--white);
    padding: 0.4rem 0.8rem;
    border-radius: 15px;
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
}

/* ===================================
   EXPLICAÇÃO CALORIAS
   ================================== */
.calorias-explanation {
    margin-top: 2rem;
    padding: 0.5rem;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.05), rgba(59, 130, 246, 0.03));
    border: 2px solid var(--secondary);
    border-radius: 16px;
    animation: slideInUp 0.5s ease;
}

.calorias-explanation h3 {
    color: var(--secondary);
    margin-bottom: 1.5rem;
    font-size: 1.8rem;
    text-align: center;
    font-weight: 600;
}

.calorias-explanation h4 {
    color: var(--secondary);
    margin: 1.5rem 0 1rem 0;
    font-size: 1.3rem;
    border-bottom: 2px solid var(--secondary);
    padding-bottom: 0.5rem;
    font-weight: 600;
}

.calculation-steps {
    background: var(--white);
    padding: 1.5rem;
    border-radius: 12px;
    margin: 1rem 0;
    border-left: 4px solid var(--secondary);
    box-shadow: 0 3px 10px rgba(14, 165, 233, 0.1);
}

.calculation-steps ol {
    margin-left: 1.5rem;
}

.calculation-steps li {
    margin-bottom: 1rem;
    line-height: 1.6;
}

.calculation-steps ul {
    margin: 0.5rem 0 0.5rem 1.5rem;
}

.calculation-steps ul li {
    margin-bottom: 0.5rem;
}

.formula-highlight {
    background: var(--gradient);
    color: var(--white);
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
    margin: 1rem 0;
    font-family: 'Courier New', monospace;
    font-size: 1.2rem;
    box-shadow: 0 4px 15px rgba(220, 38, 38, 0.3);
}

.interpretation-section {
    background: var(--gray-50);
    border: 2px solid var(--secondary);
    border-radius: 12px;
    padding: 1.5rem;
    margin: 1.5rem 0;
}

.interpretation-section h4 {
    color: var(--secondary);
    margin-bottom: 1rem;
    font-size: 1.2rem;
    font-weight: 600;
}

.interpretation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.interpretation-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.2rem;
    transition: all 0.3s ease;
}

.interpretation-card:hover {
    border-color: var(--secondary);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(14, 165, 233, 0.2);
}

.interpretation-card h5 {
    color: var(--secondary);
    margin-bottom: 0.8rem;
    font-size: 1rem;
    font-weight: 600;
}

.interpretation-card p {
    color: var(--text-primary);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}

.accuracy-note {
    background: linear-gradient(135deg, rgba(217, 119, 6, 0.1), rgba(245, 158, 11, 0.05));
    border: 2px solid var(--warning);
    border-radius: 10px;
    padding: 1.2rem;
    margin: 1.5rem 0;
}

.accuracy-note h5 {
    color: var(--warning);
    margin-bottom: 0.8rem;
    font-size: 1.1rem;
    font-weight: 600;
}

.accuracy-note p {
    color: var(--warning);
    margin: 0;
    line-height: 1.6;
}

/* ===================================
   FUNDAMENTAÇÃO NUTRICIONAL DETALHADA
   ================================== */
.calorias-detailed-explanation {
    margin-top: 2rem;
    padding: 0.5rem;
    background: var(--light);
    border: 2px solid var(--primary);
    border-radius: 16px;
    animation: slideInUp 0.7s ease;
}

.calorias-detailed-explanation h3 {
    color: var(--primary);
    margin-bottom: 1.5rem;
    font-size: 1.8rem;
    text-align: center;
    font-weight: 600;
}

.calorias-fundamentacao-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.calorias-fundamentacao-section {
    background: var(--white);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--border);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
}

.calorias-fundamentacao-section h4 {
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-size: 1.3rem;
    border-bottom: 2px solid var(--primary);
    padding-bottom: 0.5rem;
    font-weight: 600;
}

.calorias-scientific-item {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    background: var(--light);
    border-radius: 10px;
    border-left: 4px solid var(--primary);
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}

.calorias-scientific-item:hover {
    background: linear-gradient(135deg, var(--light), rgba(220, 38, 38, 0.08));
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(220, 38, 38, 0.2);
}

.calorias-scientific-formula {
    background: var(--primary);
    color: var(--white);
    padding: 0.8rem 1rem;
    border-radius: 8px;
    font-weight: bold;
    font-size: 1rem;
    text-align: center;
    box-shadow: 0 3px 10px rgba(220, 38, 38, 0.3);
    font-family: 'Courier New', monospace;
}

.calorias-scientific-content {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.calorias-scientific-content p {
    margin: 0;
    color: var(--text-primary);
    line-height: 1.6;
    font-size: 0.95rem;
}

.calorias-scientific-content strong {
    color: var(--primary);
    font-weight: 600;
}

.calorias-calculo-detalhe {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(5, 150, 105, 0.05));
    border: 1px solid var(--accent);
    border-radius: 10px;
    padding: 1.2rem;
    margin-top: 0.5rem;
    font-family: 'Courier New', monospace;
}

.calorias-calculo-detalhe p {
    color: var(--accent);
    font-size: 0.9rem;
    margin: 0.4rem 0;
    line-height: 1.5;
}

.calorias-calculo-detalhe p:first-child {
    font-weight: bold;
    color: var(--accent);
    font-size: 1rem;
    margin-bottom: 0.8rem;
    font-family: inherit;
}

.calorias-fundamentacao-footer {
    margin-top: 2rem;
    padding: 1rem;
    background: var(--gray-50);
    border: 1px solid var(--border);
    border-radius: 8px;
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.calorias-fundamentacao-footer p {
    margin: 0.5rem 0;
}

.calorias-fundamentacao-footer strong {
    color: var(--text-primary);
}

/* ===================================
   EXEMPLOS RÁPIDOS
   ================================== */
.calorias-examples {
    margin-top: 2rem;
    text-align: center;
}

.calorias-examples p {
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.calorias-example-btn {
    background: var(--accent);
    color: var(--white);
    border: none;
    padding: 0.8rem 1.5rem;
    border-radius: 8px;
    font-size: 0.9rem;
    cursor: pointer;
    margin: 0.3rem;
    transition: all 0.3s ease;
    box-shadow: 0 3px 10px rgba(34, 197, 94, 0.3);
}

.calorias-example-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(34, 197, 94, 0.4);
}

.calorias-help {
    margin-top: 1rem;
    text-align: center;
    color: var(--text-secondary);
}

/* ===================================
   CONTEÚDO EDUCACIONAL CALORIAS
   ================================== */
.calorias-educational-content {
    margin-top: 4rem;
}

.calorias-content-block {
    background: var(--white);
    border-radius: 16px;
    padding: 2.5rem;
    margin-bottom: 2.5rem;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.08);
    border: 2px solid var(--light);
    transition: all 0.3s ease;
}

.calorias-content-block:hover {
    box-shadow: 0 10px 35px rgba(220, 38, 38, 0.1);
    transform: translateY(-2px);
}

.calorias-content-block h2 {
    color: var(--primary);
    margin-bottom: 2rem;
    font-size: 2rem;
    border-bottom: 4px solid var(--primary);
    padding-bottom: 0.8rem;
    font-weight: 600;
}

.calorias-content-block p {
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--text-primary);
}

.calorias-content-block strong {
    color: var(--primary);
    font-weight: 600;
}

/* ===================================
   CONCEITOS BÁSICOS
   ================================== */
.calorias-concept-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.concept-card {
    background: var(--gray-50);
    border: 2px solid var(--border);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
}

.concept-card:hover {
    border-color: var(--primary);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(220, 38, 38, 0.1);
}

.concept-card h4 {
    color: var(--primary);
    margin-bottom: 1rem;
    font-size: 1.2rem;
    font-weight: 600;
}

.concept-card p {
    color: var(--text-primary);
    margin: 0;
    line-height: 1.6;
}

/* ===================================
   FÓRMULAS CALORIAS
   ================================== */
.formula-section {
    margin-top: 2rem;
}

.formula-section h3 {
    color: var(--text-primary);
    margin: 1.5rem 0 0.5rem 0;
    font-size: 1.2rem;
    font-weight: 600;
}

.formula-box {
    font-size: 1.2rem;
    font-weight: bold;
    background: var(--white);
    padding: 1rem;
    border-radius: 8px;
    margin: 1rem 0;
    border: 2px solid;
    text-align: center;
    font-family: 'Courier New', monospace;
}

.formula-box.masculino {
    border-color: var(--secondary);
    color: var(--secondary);
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.05), rgba(59, 130, 246, 0.03));
}

.formula-box.feminino {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--light);
}

.formula-box.total {
    border-color: var(--accent);
    color: var(--accent);
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.05), rgba(5, 150, 105, 0.03));
}

/* ===================================
   ESTRATÉGIAS NUTRICIONAIS
   ================================== */
.estrategias-tabs {
    margin-top: 2rem;
}

.strategy-section {
    margin-bottom: 2rem;
    padding: 2rem;
    border-radius: 16px;
    border: 2px solid;
}

.strategy-section h3 {
    margin-bottom: 1.5rem;
    font-size: 1.4rem;
    font-weight: 600;
}

.strategy-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}

.strategy-item {
    background: var(--white);
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid var(--border);
    transition: all 0.3s ease;
}

.strategy-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.strategy-item h4 {
    margin-bottom: 0.8rem;
    font-size: 1.1rem;
    font-weight: 600;
}

.strategy-item p {
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
}

.strategy-section.emagrecer {
    background: var(--light);
    border-color: var(--primary);
}

.strategy-section.emagrecer h3 {
    color: var(--primary);
}

.strategy-section.manter {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.05), rgba(59, 130, 246, 0.03));
    border-color: var(--secondary);
}

.strategy-section.manter h3 {
    color: var(--secondary);
}

.strategy-section.ganhar {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.05), rgba(5, 150, 105, 0.03));
    border-color: var(--accent);
}

.strategy-section.ganhar h3 {
    color: var(--accent);
}

/* ===================================
   DICAS NUTRICIONAIS
   ================================== */
.nutrition-tips-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.tip-card {
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    border: 2px solid;
    transition: all 0.3s ease;
}

.tip-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.tip-card h4 {
    margin-bottom: 1rem;
    font-size: 1.2rem;
    font-weight: 600;
}

.tip-card p {
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
}

.tip-card.proteinas {
    background: var(--light);
    border-color: var(--primary);
    color: var(--primary);
}

.tip-card.carboidratos {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.05), rgba(59, 130, 246, 0.03));
    border-color: var(--secondary);
    color: var(--secondary);
}

.tip-card.gorduras {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.05), rgba(5, 150, 105, 0.03));
    border-color: var(--accent);
    color: var(--accent);
}

.tip-card.hidratacao {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.08), rgba(59, 130, 246, 0.05));
    border-color: var(--secondary);
    color: var(--secondary);
}

.tip-card.refeicoes {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.05), rgba(185, 28, 28, 0.03));
    border-color: var(--primary);
    color: var(--primary);
}

.tip-card.qualidade {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.08), rgba(5, 150, 105, 0.05));
    border-color: var(--accent);
    color: var(--accent);
}

/* ===================================
   EXEMPLOS NO CONTEÚDO EDUCACIONAL
   ================================== */
.calorias-examples-section {
    margin-top: 2rem;
}

.example-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.example-btn {
    background: var(--secondary);
    color: var(--white);
    border: none;
    padding: 0.8rem 1.5rem;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 3px 10px rgba(14, 165, 233, 0.3);
}

.example-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.4);
}

/* Container principal do bloco de conteúdo */
.calorias-content-block {
    max-width: 1200px;
    margin: auto;
    padding: 20px;
}

/* Título da seção */
.calorias-content-block h2 {
    text-align: center;
    font-size: 2.5rem;
    color: var(--primary);
    margin-bottom: 40px;
}

/* Grid que alinha os cards */
.fatores-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

/* Estilo base para todos os cards */
.fator-card {
    background-color: var(--white);
    border-radius: 10px;
    /* Remove o padding de cima para o cabeçalho preencher */
    padding: 0 25px 25px 25px;
    box-shadow: 0 5px 20px rgba(220, 38, 38, 0.07);
    overflow: hidden; /* Garante que o cabeçalho respeite as bordas arredondadas */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Efeito de "zoom" sutil ao passar o mouse */
.fator-card:hover {
    transform: scale(1.03);
    box-shadow: 0 10px 30px rgba(220, 38, 38, 0.2);
}

/* Título dentro do card (h4) - aqui está a mágica */
.fator-card h4 {
    font-size: 1.3rem;
    color: var(--white); /* Texto branco */
    background-color: var(--primary); /* Fundo da cor primária */
    padding: 20px 25px;
    /* Margens negativas para "escapar" do padding do card e preencher o topo */
    margin: 0 -25px 20px -25px; 
}

/* Parágrafos dentro do card */
.fator-card p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.fator-card p:last-child {
    margin-bottom: 0;
}

/* Estilo para o texto em negrito */
.fator-card p strong {
    color: var(--primary); /* Cor primária para os rótulos */
}

/* Variações de cores para os cabeçalhos */
.fator-card.leve h4 { background-color: var(--secondary); }
.fator-card.moderado h4 { background-color: var(--accent); }
.fator-card.ativo h4 { background-color: var(--primary); }
.fator-card.muito-ativo h4 { background-color: var(--primary); }

/* ===================================
   FAQ, CREDIBILIDADE E REFERÊNCIAS
   ================================== */
.content-block {
    background: var(--white);
    border-radius: 16px;
    padding: 2.5rem;
    margin-bottom: 2.5rem;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.08);
    border: 2px solid var(--light);
    transition: all 0.3s ease;
}

.content-block:hover {
    box-shadow: 0 10px 35px rgba(220, 38, 38, 0.1);
    transform: translateY(-2px);
}

.content-block h3 {
    color: var(--primary);
    margin-bottom: 2rem;
    font-size: 1.8rem;
    border-bottom: 4px solid var(--primary);
    padding-bottom: 0.8rem;
    font-weight: 600;
}

/* FAQ Styles */
.faq-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.faq-item {
    background: var(--light);
    border: 2px solid var(--primary);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item:hover {
    box-shadow: 0 5px 20px rgba(220, 38, 38, 0.1);
}

.faq-item[open] {
    box-shadow: 0 8px 25px rgba(220, 38, 38, 0.15);
}

.faq-question {
    background: var(--primary);
    color: var(--white);
    padding: 1.2rem 1.5rem;
    cursor: pointer;
    font-weight: 600;
    font-size: 1rem;
    list-style: none;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.faq-question:hover {
    background: #b91c1c;
}

.faq-question::after {
    content: "▼";
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

.faq-item[open] .faq-question::after {
    transform: rotate(180deg);
}

.faq-answer {
    padding: 1.5rem;
    background: var(--white);
}

.faq-answer p {
    margin: 0;
    color: var(--text-primary);
    line-height: 1.7;
    font-size: 1rem;
}

.faq-answer strong {
    color: var(--primary);
    font-weight: 600;
}

/* Credibilidade Styles */
.credibilidade-container {
    background: linear-gradient(135deg, var(--light), rgba(220, 38, 38, 0.05));
    border: 2px solid var(--primary);
    border-radius: 16px;
    padding: 2rem;
    margin: 2rem 0;
    text-align: center;
}

.credibilidade-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.credibilidade-icon {
    font-size: 2.5rem;
    color: var(--primary);
}

.credibilidade-title {
    color: var(--primary);
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0;
}

.credibilidade-content {
    color: var(--text-primary);
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.credibilidade-logo {
    color: var(--primary);
    font-weight: 700;
    font-size: 1.2rem;
}

.credibilidade-badges {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.credibilidade-badge {
    background: var(--primary);
    color: var(--white);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
    box-shadow: 0 3px 10px rgba(220, 38, 38, 0.2);
}

/* Referências Styles */
.referencias-container {
    margin-top: 1.5rem;
}

.referencias-lista {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.referencia-item {
    background: var(--light);
    border-left: 4px solid var(--primary);
    padding: 1.2rem 1.5rem;
    border-radius: 0 10px 10px 0;
    transition: all 0.3s ease;
    position: relative;
}

.referencia-item:hover {
    background: rgba(220, 38, 38, 0.08);
    transform: translateX(5px);
    box-shadow: 0 4px 15px rgba(220, 38, 38, 0.1);
}

.referencia-item::before {
    content: "📖";
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--white);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.referencia-item em {
    color: var(--primary);
    font-weight: 600;
}

/* ===== SUPORTE PARA CARDS DINÂMICOS DO JAVASCRIPT ===== */
.calc-explanation,
.calc-legal {
    background: var(--light);
    border: 2px solid var(--primary);
    border-radius: 16px;
    padding: 2rem;
    margin: 1.5rem 0;
    animation: slideInUp 0.5s ease;
}

.calc-explanation h3,
.calc-legal h3 {
    color: var(--primary);
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.calc-explanation h4,
.calc-legal h4 {
    color: var(--secondary);
    margin-bottom: 1rem;
    font-weight: 600;
}

.calc-explanation p,
.calc-legal p {
    color: var(--text-primary);
    line-height: 1.7;
    margin-bottom: 1rem;
}

.calc-explanation strong,
.calc-legal strong {
    color: var(--primary);
    font-weight: 600;
}

/* ===================================
   RESPONSIVIDADE CALORIAS
   ================================== */
@media (max-width: 1024px) {
    .strategy-tips {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .credibilidade-badges {
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 768px) {
    .calorias-input-row {
        flex-direction: column;
        gap: 1rem;
    }
    
    .calorias-input-group {
        min-width: 100%;
    }
    
    .calorias-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .calorias-calc-btn,
    .calorias-clear-btn {
        width: 100%;
        max-width: 300px;
    }
    
    .atividade-grid,
    .objetivo-grid {
        grid-template-columns: 1fr;
    }
    
    .calorias-resultado-content {
        grid-template-columns: 1fr;
    }
    
    .macros-grid {
        grid-template-columns: 1fr;
    }
    
    .interpretation-grid {
        grid-template-columns: 1fr;
    }
    
    .example-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .example-btn {
        width: 100%;
        max-width: 250px;
    }

    .content-block {
        padding: 1.5rem;
    }

    .credibilidade-header {
        flex-direction: column;
        gap: 0.5rem;
    }
}

@media (max-width: 480px) {
    .calorias-header h1 {
        font-size: 2rem;
    }
    
    .calorias-container {
        padding: 1.5rem;
    }
    
    .calorias-value {
        font-size: 2rem;
    }
    
    .calorias-concept-grid,
    .nutrition-tips-grid {
        grid-template-columns: 1fr;
    }
    
    .strategy-content {
        grid-template-columns: 1fr;
    }
    
    .interpretation-grid {
        grid-template-columns: 1fr;
    }
    
    .example-buttons {
        flex-direction: column;
        gap: 0.8rem;
    }
    
    .example-btn {
        font-size: 0.9rem;
        padding: 0.7rem 1.2rem;
    }

    .content-block {
        padding: 1rem;
    }

    .faq-question {
        padding: 1rem;
        font-size: 0.9rem;
    }

    .faq-answer {
        padding: 1rem;
    }

    .credibilidade-container {
        padding: 1.5rem;
    }

    .credibilidade-badges {
        gap: 0.5rem;
    }

    .credibilidade-badge {
        padding: 0.4rem 0.8rem;
        font-size: 0.8rem;
    }
}

/* ===================================
   ANIMAÇÕES CALORIAS
   ================================== */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}