/* LOTTO ACTIVO ANIMALITOS TABLE STYLES */
.blog-lotto-tabla { font-family: var(--font-primary, sans-serif); color: var(--text-dark, #333); }
.green-box { background: #f0fdf4; border-left: 4px solid #16a34a; padding: 1.5rem; border-radius: 0 8px 8px 0; margin-bottom: 2rem; font-size: 1.1rem; color: #166534; }
.print-btn-container { text-align: center; margin-bottom: 2rem; }
.print-btn { background: var(--primary, #0f172a); color: #fff; border: none; padding: 10px 20px; font-size: 1.1rem; border-radius: 8px; cursor: pointer; font-weight: bold; transition: background 0.3s; }
.print-btn:hover { background: var(--secondary, #38bdf8); }
.animalitos-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-bottom: 2.5rem; }
@media(min-width: 600px) { .animalitos-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
@media(min-width: 900px) { .animalitos-grid { grid-template-columns: repeat(4, 1fr); gap: 25px; } }
.animal-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px 10px; text-align: center; position: relative; box-shadow: 0 4px 6px rgba(0,0,0,0.05); transition: transform 0.2s; }
.animal-card:hover { transform: translateY(-4px); box-shadow: 0 12px 20px -5px rgba(0,0,0,0.1); }
.animal-badge { position: absolute; top: -10px; left: -10px; background: var(--primary, #0f172a); color: #fff; width: 40px; height: 40px; border-radius: 50px; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.2rem; border: 3px solid #fff; z-index: 10; }
.animal-img { width: 110px; height: 110px; object-fit: contain; margin: 10px auto 15px; display: block; }
@media(min-width: 768px) { .animal-img { width: 150px; height: 150px; } }
.animal-name { font-weight: 900; text-transform: uppercase; color: #0f172a; font-size: 1.2rem; margin:0; letter-spacing: 0.5px; }
.answer-row { display: flex; align-items: center; gap: 15px; background: #fff; border: 1px solid #e2e8f0; padding: 15px; border-radius: 10px; margin-bottom: 15px; }
.answer-row img { width: 60px; height: 60px; object-fit: contain; }
.answer-row p { margin: 0; font-size: 1.1rem; color: #334155; }
.comparison-table { width: 100%; border-collapse: collapse; margin-bottom: 2.5rem; }
.comparison-table th { background: var(--primary, #0f172a); color: #fff; padding: 12px; text-align: left; }
.comparison-table td { border: 1px solid #e2e8f0; padding: 12px; text-align: left; background: #fff; }
.comparison-table a { color: var(--secondary, #38bdf8); font-weight: bold; text-decoration: none; }
.comparison-table a:hover { text-decoration: underline; }
.steps-list { list-style-type: none; padding: 0; margin-bottom: 2rem; counter-reset: steps-counter; }
.steps-list li { position: relative; padding-left: 50px; margin-bottom: 1.5rem; font-size: 1.1rem; color: #475569; line-height: 1.6; }
.steps-list li::before { content: counter(steps-counter); counter-increment: steps-counter; position: absolute; left: 0; top: 0; width: 36px; height: 36px; background: var(--primary, #0f172a); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; }
.warning-box { background: #fffbeb; border-left: 4px solid #f59e0b; padding: 1.5rem; border-radius: 0 8px 8px 0; margin-bottom: 2.5rem; color: #92400e; font-size: 1.05rem; }
.faq-container { margin-bottom: 2.5rem; }
.faq-item { border: 1px solid #e2e8f0; border-radius: 8px; margin-bottom: 10px; overflow: hidden; }
.faq-question { background: #f8fafc; padding: 15px 20px; font-weight: bold; color: var(--primary, #0f172a); cursor: pointer; display: flex; justify-content: space-between; align-items: center; margin: 0; }
.faq-question::after { content: '+'; font-size: 1.5rem; line-height: 1; }
.faq-item.active .faq-question::after { content: '-'; }
.faq-answer { padding: 0 20px; max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out, padding 0.3s ease; background: #fff; color: #475569; }
.faq-item.active .faq-answer { padding: 15px 20px; max-height: 500px; }