{"id":4051,"date":"2025-11-04T02:55:26","date_gmt":"2025-11-04T02:55:26","guid":{"rendered":"https:\/\/snugglesouls.com\/?page_id=4051"},"modified":"2026-01-28T05:45:41","modified_gmt":"2026-01-28T05:45:41","slug":"cat-age-calculator","status":"publish","type":"page","link":"https:\/\/snugglesouls.com\/es\/cat-age-calculator\/","title":{"rendered":"Calculadora de edad felina"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"4051\" class=\"elementor elementor-4051\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cc13fc3 e-flex e-con-boxed e-con e-parent\" data-id=\"cc13fc3\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;ekit_has_onepagescroll_dot&quot;:&quot;yes&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-376f3f3 elementor-widget elementor-widget-html\" data-id=\"376f3f3\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;ekit_we_effect_on&quot;:&quot;none&quot;}\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js@4.4.0\/dist\/chart.umd.js\"><\/script>\r\n    \r\n    <style>\r\n        * {\r\n            margin: 0;\r\n            padding: 0;\r\n            box-sizing: border-box;\r\n        }\r\n\r\n        :root {\r\n            --primary-color: #FFB6C1;\r\n            --secondary-color: #4ECDC4;\r\n            --accent-color: #FF6B9D;\r\n            --text-dark: #2C3E50;\r\n            --text-light: #6C757D;\r\n            --white: #FFFFFF;\r\n            --shadow: rgba(0, 0, 0, 0.1);\r\n            --glass-bg: rgba(255, 255, 255, 0.25);\r\n            --glass-border: rgba(255, 255, 255, 0.18);\r\n        }\r\n\/* Life Stages Section *\/\r\n.life-stages-section {\r\n    margin: 25px 0 40px;\r\n}\r\n\r\n.life-stages-card {\r\n    background: var(--glass-bg);\r\n    backdrop-filter: blur(20px);\r\n    -webkit-backdrop-filter: blur(20px);\r\n    border-radius: 30px;\r\n    border: 1px solid var(--glass-border);\r\n    padding: 30px;\r\n    box-shadow: 0 8px 32px var(--shadow);\r\n    color: var(--white);\r\n}\r\n\r\n.life-stages-title {\r\n    font-size: 1.5rem;\r\n    font-weight: 600;\r\n    margin-bottom: 10px;\r\n    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\r\n    -webkit-background-clip: text;\r\n    -webkit-text-fill-color: transparent;\r\n    background-clip: text;\r\n}\r\n\r\n.life-stages-intro {\r\n    font-size: 0.95rem;\r\n    color: rgba(255, 255, 255, 0.9);\r\n    margin-bottom: 20px;\r\n}\r\n\r\n\/* Grid layout for the stages *\/\r\n.life-stages-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(2, minmax(0, 1fr));\r\n    gap: 18px;\r\n}\r\n\r\n.life-stage {\r\n    background: rgba(255, 255, 255, 0.95);\r\n    border-radius: 20px;\r\n    padding: 18px 18px 16px;\r\n    color: var(--text-dark);\r\n    box-shadow: 0 6px 20px var(--shadow);\r\n}\r\n\r\n.life-stage-heading {\r\n    font-size: 1.05rem;\r\n    font-weight: 600;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    margin-bottom: 4px;\r\n}\r\n\r\n.life-stage-pill {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    padding: 4px 10px;\r\n    border-radius: 999px;\r\n    background: rgba(255, 182, 193, 0.18);\r\n    font-size: 0.78rem;\r\n    font-weight: 500;\r\n    color: var(--text-light);\r\n    margin-bottom: 8px;\r\n}\r\n\r\n.life-stage-pill span {\r\n    font-weight: 600;\r\n    color: var(--accent-color);\r\n}\r\n\r\n.life-stage-list {\r\n    list-style: none;\r\n    padding-left: 0;\r\n    margin: 0;\r\n}\r\n\r\n.life-stage-list li {\r\n    position: relative;\r\n    font-size: 0.88rem;\r\n    line-height: 1.5;\r\n    padding-left: 22px;\r\n    margin-bottom: 6px;\r\n}\r\n\r\n.life-stage-list li::before {\r\n    content: \"\ud83d\udc3e\";\r\n    position: absolute;\r\n    left: 0;\r\n    top: 0;\r\n    font-size: 0.9rem;\r\n}\r\n\r\n\/* Responsive adjustments *\/\r\n@media (max-width: 768px) {\r\n    .life-stages-card {\r\n        padding: 22px;\r\n        border-radius: 24px;\r\n    }\r\n\r\n    .life-stages-grid {\r\n        grid-template-columns: 1fr;\r\n    }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n    .life-stages-card {\r\n        padding: 18px;\r\n    }\r\n}\r\n\r\n        \/* Cat Age Chart Section *\/\r\n.cat-age-chart-section {\r\n    margin: 30px 0 0;\r\n    background: rgba(255, 255, 255, 0.95);\r\n    border-radius: 20px;\r\n    padding: 25px 30px;\r\n    box-shadow: 0 8px 32px var(--shadow);\r\n}\r\n\r\n.cat-age-chart-section h2 {\r\n    font-size: 1.5rem;\r\n    font-weight: 700;\r\n    color: var(--text-dark);\r\n    margin-bottom: 12px;\r\n    text-align: left;\r\n}\r\n\r\n.cat-age-chart-intro,\r\n.cat-age-chart-note {\r\n    font-size: 0.96rem;\r\n    line-height: 1.7;\r\n    color: var(--text-light);\r\n    margin-bottom: 18px;\r\n}\r\n\r\n\/* Make table scrollable on small screens *\/\r\n.cat-age-chart-wrapper {\r\n    width: 100%;\r\n    overflow-x: auto;\r\n}\r\n\r\n\/* Table styling *\/\r\n.cat-age-chart {\r\n    width: 100%;\r\n    min-width: 260px;\r\n    border-collapse: collapse;\r\n    background: rgba(255, 255, 255, 0.98);\r\n    border-radius: 12px;\r\n    overflow: hidden;\r\n    font-size: 0.95rem;\r\n}\r\n\r\n.cat-age-chart th,\r\n.cat-age-chart td {\r\n    padding: 10px 14px;\r\n    text-align: left;\r\n}\r\n\r\n.cat-age-chart thead {\r\n    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\r\n    color: var(--white);\r\n    font-weight: 600;\r\n}\r\n\r\n.cat-age-chart tbody tr:nth-child(even) {\r\n    background: rgba(0, 0, 0, 0.02);\r\n}\r\n\r\n.cat-age-chart tbody tr:hover {\r\n    background: rgba(255, 182, 193, 0.12);\r\n}\r\n\r\n\/* Responsive tweaks for mobile *\/\r\n@media (max-width: 768px) {\r\n    .cat-age-chart-section {\r\n        padding: 20px;\r\n    }\r\n\r\n    .cat-age-chart-section h2 {\r\n        font-size: 1.3rem;\r\n    }\r\n\r\n    .cat-age-chart-intro,\r\n    .cat-age-chart-note {\r\n        font-size: 0.9rem;\r\n    }\r\n}\r\n\r\n        \/* Wrapper for the entire calculator - extends full width *\/\r\n        .cat-age-calculator-wrapper {\r\n            font-family: 'Poppins', sans-serif;\r\n            width: 100vw;\r\n            margin-left: calc(-50vw + 50%);\r\n            padding: 40px 0;\r\n            background: linear-gradient(135deg, #9b7dca 0%, #8b6fb8 25%, #b599d6 50%, #7da8d8 75%, #6bc5d6 100%);\r\n            background-size: 400% 400%;\r\n            animation: gradientShift 15s ease infinite;\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n\r\n        @keyframes gradientShift {\r\n            0% { background-position: 0% 50%; }\r\n            50% { background-position: 100% 50%; }\r\n            100% { background-position: 0% 50%; }\r\n        }\r\n\r\n        \/* Paw prints background *\/\r\n        .cat-age-calculator-wrapper::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            background-image: \r\n                radial-gradient(circle at 20% 20%, rgba(255, 182, 193, 0.1) 0%, transparent 50%),\r\n                radial-gradient(circle at 80% 80%, rgba(78, 205, 196, 0.1) 0%, transparent 50%);\r\n            pointer-events: none;\r\n            z-index: 0;\r\n        }\r\n\r\n        \r\n        .cat-calculator-container {\r\n            max-width: 900px;\r\n            margin: 0 auto;\r\n            padding: 0 20px;\r\n            position: relative;\r\n            z-index: 1;\r\n        }\r\n\r\n        \/* Header *\/\r\n        .cat-calculator-header {\r\n            text-align: center;\r\n            padding: 20px 10px;\r\n            animation: fadeInDown 0.8s ease;\r\n        }\r\n\r\n        @keyframes fadeInDown {\r\n            from {\r\n                opacity: 0;\r\n                transform: translateY(-30px);\r\n            }\r\n            to {\r\n                opacity: 1;\r\n                transform: translateY(0);\r\n            }\r\n        }\r\n\r\n        .title-wrapper {\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            gap: 15px;\r\n            margin-bottom: 15px;\r\n            flex-wrap: wrap;\r\n        }\r\n\r\n        .cat-icon {\r\n            width: 60px;\r\n            height: 60px;\r\n            animation: float 3s ease-in-out infinite;\r\n            flex-shrink: 0;\r\n        }\r\n\r\n        @keyframes float {\r\n            0%, 100% { transform: translateY(0px); }\r\n            50% { transform: translateY(-10px); }\r\n        }\r\n\r\n        .cat-calculator-title {\r\n            font-size: clamp(1.8rem, 4vw, 3rem);\r\n            font-weight: 700;\r\n            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color), var(--accent-color));\r\n            -webkit-background-clip: text;\r\n            -webkit-text-fill-color: transparent;\r\n            background-clip: text;\r\n            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);\r\n            margin: 0;\r\n        }\r\n\r\n        .cat-calculator-subtitle {\r\n            font-size: clamp(0.9rem, 2vw, 1.1rem);\r\n            color: var(--white);\r\n            font-weight: 300;\r\n            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);\r\n        }\r\n\r\n        \/* Glass Card *\/\r\n        .glass-card {\r\n            background: var(--glass-bg);\r\n            backdrop-filter: blur(20px);\r\n            -webkit-backdrop-filter: blur(20px);\r\n            border-radius: 30px;\r\n            border: 1px solid var(--glass-border);\r\n            padding: 35px;\r\n            margin: 25px 0;\r\n            box-shadow: 0 8px 32px var(--shadow);\r\n            animation: fadeInUp 0.8s ease;\r\n            transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n        }\r\n\r\n        .glass-card:hover {\r\n            transform: translateY(-5px);\r\n            box-shadow: 0 12px 48px rgba(0, 0, 0, 0.15);\r\n        }\r\n\r\n        @keyframes fadeInUp {\r\n            from {\r\n                opacity: 0;\r\n                transform: translateY(30px);\r\n            }\r\n            to {\r\n                opacity: 1;\r\n                transform: translateY(0);\r\n            }\r\n        }\r\n\r\n        \/* Form Elements *\/\r\n        .form-group {\r\n            margin-bottom: 28px;\r\n            animation: fadeIn 0.8s ease;\r\n        }\r\n\r\n        @keyframes fadeIn {\r\n            from { opacity: 0; }\r\n            to { opacity: 1; }\r\n        }\r\n\r\n        label {\r\n            display: block;\r\n            font-size: 1.05rem;\r\n            font-weight: 600;\r\n            color: var(--white);\r\n            margin-bottom: 12px;\r\n            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);\r\n        }\r\n\r\n        .input-row {\r\n            display: flex;\r\n            gap: 12px;\r\n            align-items: center;\r\n            flex-wrap: wrap;\r\n        }\r\n\r\n        .slider-container {\r\n            flex: 1;\r\n            min-width: 200px;\r\n        }\r\n\r\n        \/* Styled Range Slider (Cat Tail) *\/\r\n        input[type=\"range\"] {\r\n            -webkit-appearance: none;\r\n            appearance: none;\r\n            width: 100%;\r\n            height: 12px;\r\n            border-radius: 10px;\r\n            background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));\r\n            outline: none;\r\n            opacity: 0.9;\r\n            transition: opacity 0.2s;\r\n            cursor: pointer;\r\n        }\r\n\r\n        input[type=\"range\"]:hover {\r\n            opacity: 1;\r\n        }\r\n\r\n        input[type=\"range\"]::-webkit-slider-thumb {\r\n            -webkit-appearance: none;\r\n            appearance: none;\r\n            width: 30px;\r\n            height: 30px;\r\n            border-radius: 50%;\r\n            background: var(--white);\r\n            cursor: pointer;\r\n            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);\r\n            transition: transform 0.2s ease;\r\n        }\r\n\r\n        input[type=\"range\"]::-webkit-slider-thumb:hover {\r\n            transform: scale(1.2);\r\n        }\r\n\r\n        input[type=\"range\"]::-moz-range-thumb {\r\n            width: 30px;\r\n            height: 30px;\r\n            border-radius: 50%;\r\n            background: var(--white);\r\n            cursor: pointer;\r\n            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);\r\n            border: none;\r\n            transition: transform 0.2s ease;\r\n        }\r\n\r\n        input[type=\"range\"]::-moz-range-thumb:hover {\r\n            transform: scale(1.2);\r\n        }\r\n\r\n        input[type=\"number\"],\r\n        input[type=\"text\"],\r\n        select {\r\n            padding: 14px 18px;\r\n            font-size: 1rem;\r\n            border: 2px solid var(--glass-border);\r\n            border-radius: 15px;\r\n            background: rgba(255, 255, 255, 0.9);\r\n            color: var(--text-dark);\r\n            font-family: 'Poppins', sans-serif;\r\n            transition: all 0.3s ease;\r\n            min-width: 100px;\r\n        }\r\n\r\n        input[type=\"number\"]:focus,\r\n        input[type=\"text\"]:focus,\r\n        select:focus {\r\n            outline: none;\r\n            border-color: var(--secondary-color);\r\n            box-shadow: 0 0 0 4px rgba(78, 205, 196, 0.2);\r\n            transform: scale(1.02);\r\n        }\r\n\r\n        select {\r\n            cursor: pointer;\r\n            width: 100%;\r\n        }\r\n\r\n        .unit-label {\r\n            font-size: 1rem;\r\n            color: var(--white);\r\n            font-weight: 500;\r\n            white-space: nowrap;\r\n        }\r\n\r\n        \/* Calculate Button *\/\r\n        .btn-calculate {\r\n            width: 100%;\r\n            padding: 16px;\r\n            font-size: 1.15rem;\r\n            font-weight: 600;\r\n            color: var(--white);\r\n            background: linear-gradient(135deg, var(--accent-color), var(--primary-color));\r\n            border: none;\r\n            border-radius: 20px;\r\n            cursor: pointer;\r\n            transition: all 0.3s ease;\r\n            box-shadow: 0 6px 20px rgba(255, 107, 157, 0.4);\r\n            position: relative;\r\n            overflow: hidden;\r\n            margin-top: 10px;\r\n        }\r\n\r\n        .btn-calculate:hover {\r\n            transform: translateY(-3px);\r\n            box-shadow: 0 10px 30px rgba(255, 107, 157, 0.6);\r\n        }\r\n\r\n        .btn-calculate:active {\r\n            transform: translateY(-1px);\r\n        }\r\n\r\n        \/* Ripple Effect *\/\r\n        .btn-calculate::after {\r\n            content: '';\r\n            position: absolute;\r\n            top: 50%;\r\n            left: 50%;\r\n            width: 0;\r\n            height: 0;\r\n            border-radius: 50%;\r\n            background: rgba(255, 255, 255, 0.5);\r\n            transform: translate(-50%, -50%);\r\n            transition: width 0.6s, height 0.6s;\r\n        }\r\n\r\n        .btn-calculate:active::after {\r\n            width: 300px;\r\n            height: 300px;\r\n        }\r\n\r\n        \/* Results Section *\/\r\n        #results {\r\n            margin-top: 30px;\r\n            opacity: 0;\r\n            transform: translateY(20px);\r\n            transition: all 0.5s ease;\r\n        }\r\n\r\n        #results.show {\r\n            opacity: 1;\r\n            transform: translateY(0);\r\n        }\r\n\r\n        .result-card {\r\n            background: linear-gradient(135deg, rgba(255, 182, 193, 0.3), rgba(78, 205, 196, 0.3));\r\n            backdrop-filter: blur(20px);\r\n            -webkit-backdrop-filter: blur(20px);\r\n            border-radius: 25px;\r\n            padding: 35px;\r\n            text-align: center;\r\n            border: 2px solid var(--glass-border);\r\n            box-shadow: 0 8px 32px var(--shadow);\r\n            animation: flipIn 0.8s ease;\r\n        }\r\n\r\n        @keyframes flipIn {\r\n            from {\r\n                transform: perspective(400px) rotateX(-90deg);\r\n                opacity: 0;\r\n            }\r\n            to {\r\n                transform: perspective(400px) rotateX(0deg);\r\n                opacity: 1;\r\n            }\r\n        }\r\n\r\n        .result-title {\r\n            font-size: 1.4rem;\r\n            color: var(--white);\r\n            margin-bottom: 20px;\r\n            font-weight: 600;\r\n        }\r\n\r\n        .age-display {\r\n            font-size: clamp(2.5rem, 6vw, 4.5rem);\r\n            font-weight: 700;\r\n            background: linear-gradient(135deg, #FF6B9D, #FFB6C1, #4ECDC4, #667eea, #764ba2);\r\n            background-size: 200% 200%;\r\n            -webkit-background-clip: text;\r\n            -webkit-text-fill-color: transparent;\r\n            background-clip: text;\r\n            animation: rainbowGradient 3s ease infinite;\r\n            margin: 20px 0;\r\n            line-height: 1.2;\r\n        }\r\n\r\n        @keyframes rainbowGradient {\r\n            0% { background-position: 0% 50%; }\r\n            50% { background-position: 100% 50%; }\r\n            100% { background-position: 0% 50%; }\r\n        }\r\n\r\n        .age-label {\r\n            font-size: 1.2rem;\r\n            color: var(--white);\r\n            font-weight: 500;\r\n            margin-bottom: 30px;\r\n        }\r\n\r\n        \/* Health Tips *\/\r\n        .health-tips {\r\n            background: rgba(255, 255, 255, 0.95);\r\n            border-radius: 20px;\r\n            padding: 25px;\r\n            margin-top: 30px;\r\n            text-align: left;\r\n        }\r\n\r\n        .health-tips h3 {\r\n            color: var(--accent-color);\r\n            font-size: 1.25rem;\r\n            margin-bottom: 15px;\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 10px;\r\n        }\r\n\r\n        .health-tips ul {\r\n            list-style: none;\r\n            padding-left: 0;\r\n        }\r\n\r\n        .health-tips li {\r\n            color: var(--text-dark);\r\n            font-size: 0.92rem;\r\n            line-height: 1.6;\r\n            margin-bottom: 10px;\r\n            padding-left: 25px;\r\n            position: relative;\r\n        }\r\n\r\n        .health-tips li::before {\r\n            content: '\ud83d\udc3e';\r\n            position: absolute;\r\n            left: 0;\r\n            top: 0;\r\n        }\r\n\r\n        \/* Share Button *\/\r\n        .btn-share {\r\n            margin-top: 20px;\r\n            padding: 12px 30px;\r\n            font-size: 1rem;\r\n            font-weight: 600;\r\n            color: var(--white);\r\n            background: linear-gradient(135deg, var(--secondary-color), #667eea);\r\n            border: none;\r\n            border-radius: 15px;\r\n            cursor: pointer;\r\n            transition: all 0.3s ease;\r\n            box-shadow: 0 4px 15px rgba(78, 205, 196, 0.4);\r\n        }\r\n\r\n        .btn-share:hover {\r\n            transform: translateY(-2px);\r\n            box-shadow: 0 6px 20px rgba(78, 205, 196, 0.6);\r\n        }\r\n\r\n        \/* Chart Section *\/\r\n        .chart-container {\r\n            margin-top: 30px;\r\n            background: rgba(255, 255, 255, 0.95);\r\n            border-radius: 20px;\r\n            padding: 25px;\r\n        }\r\n\r\n        .chart-title {\r\n            color: var(--text-dark);\r\n            font-size: 1.25rem;\r\n            margin-bottom: 20px;\r\n            text-align: center;\r\n            font-weight: 600;\r\n        }\r\n\r\n        #ageChart {\r\n            max-height: 300px;\r\n        }\r\n\r\n        \/* Error Message *\/\r\n        .error-message {\r\n            background: rgba(255, 107, 157, 0.2);\r\n            border: 2px solid var(--accent-color);\r\n            border-radius: 15px;\r\n            padding: 15px;\r\n            margin-top: 15px;\r\n            color: var(--white);\r\n            font-size: 0.95rem;\r\n            display: none;\r\n            animation: shake 0.5s ease;\r\n        }\r\n\r\n        .error-message.show {\r\n            display: block;\r\n        }\r\n\r\n        @keyframes shake {\r\n            0%, 100% { transform: translateX(0); }\r\n            25% { transform: translateX(-10px); }\r\n            75% { transform: translateX(10px); }\r\n        }\r\n\r\n        \/* Accessibility - High Contrast *\/\r\n        @media (prefers-contrast: high) {\r\n            .glass-card {\r\n                background: rgba(255, 255, 255, 0.95);\r\n                border: 2px solid var(--text-dark);\r\n            }\r\n            \r\n            label,\r\n            .cat-calculator-subtitle,\r\n            .unit-label {\r\n                color: var(--text-dark);\r\n                text-shadow: none;\r\n            }\r\n        }\r\n\r\n        \/* Responsive Design *\/\r\n        @media (max-width: 768px) {\r\n            .cat-age-calculator-wrapper {\r\n                padding: 30px 0;\r\n            }\r\n\r\n            .cat-calculator-container {\r\n                padding: 0 15px;\r\n            }\r\n\r\n            .glass-card {\r\n                padding: 25px;\r\n            }\r\n\r\n            .cat-calculator-header {\r\n                padding: 15px 10px;\r\n            }\r\n\r\n            .cat-icon {\r\n                width: 45px;\r\n                height: 45px;\r\n            }\r\n\r\n            .input-row {\r\n                flex-direction: column;\r\n                align-items: stretch;\r\n            }\r\n\r\n            input[type=\"number\"] {\r\n                width: 100%;\r\n            }\r\n\r\n            .result-card {\r\n                padding: 25px;\r\n            }\r\n\r\n            .chart-container {\r\n                padding: 20px;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 480px) {\r\n            .cat-age-calculator-wrapper {\r\n                padding: 20px 0;\r\n            }\r\n\r\n            .cat-calculator-container {\r\n                padding: 0 10px;\r\n            }\r\n\r\n            .glass-card {\r\n                padding: 20px;\r\n                border-radius: 20px;\r\n            }\r\n\r\n            .cat-calculator-title {\r\n                font-size: 1.6rem;\r\n            }\r\n\r\n            .age-display {\r\n                font-size: 2.5rem;\r\n            }\r\n        }\r\n\r\n        \/* Keyboard Focus Styles *\/\r\n        *:focus-visible {\r\n            outline: 3px solid var(--secondary-color);\r\n            outline-offset: 3px;\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n\r\n    <div class=\"cat-age-calculator-wrapper\">\r\n        <div class=\"cat-calculator-container\">\r\n            <!-- Header -->\r\n            <header class=\"cat-calculator-header\">\r\n                <div class=\"title-wrapper\">\r\n                    <svg class=\"cat-icon\" viewBox=\"0 0 64 64\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-label=\"Cat Icon\">\r\n                        <path d=\"M8 20L16 8L20 20L16 24L8 20Z\" fill=\"#FFB6C1\"\/>\r\n                        <path d=\"M56 20L48 8L44 20L48 24L56 20Z\" fill=\"#FFB6C1\"\/>\r\n                        <circle cx=\"32\" cy=\"36\" r=\"20\" fill=\"#FFB6C1\"\/>\r\n                        <circle cx=\"24\" cy=\"32\" r=\"3\" fill=\"#2C3E50\"\/>\r\n                        <circle cx=\"40\" cy=\"32\" r=\"3\" fill=\"#2C3E50\"\/>\r\n                        <path d=\"M32 38 Q28 42 24 40 M32 38 Q36 42 40 40\" stroke=\"#2C3E50\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n                        <ellipse cx=\"20\" cy=\"36\" rx=\"4\" ry=\"6\" fill=\"#FF6B9D\" opacity=\"0.6\"\/>\r\n                        <ellipse cx=\"44\" cy=\"36\" rx=\"4\" ry=\"6\" fill=\"#FF6B9D\" opacity=\"0.6\"\/>\r\n                    <\/svg>\r\n                    <h1 class=\"cat-calculator-title\">\r\n  Cat Age Calculator \u2013 Convert Cat Years to Human Years\r\n<\/h1>\r\n                <\/div>\r\n                <p class=\"cat-calculator-subtitle\">Discover your cat's age in human years. Free cat age converter with breed & <a href=\"https:\/\/snugglesouls.com\/es\/cat-calorie-calculator\/\">weight<\/a> options plus vet\u2011style health tips.\ud83d\udc31<\/p>\r\n                <section class=\"cat-intro\">\r\n  <p>\r\n    Use this free cat age calculator to instantly convert <strong>cat years to human years<\/strong>.\r\n    Just enter your cat\u2019s age, choose the breed, and (optionally) add their weight to see a\r\n    more realistic human\u2011age estimate.\r\n  <\/p>\r\n  <p>\r\n    The calculator uses the common <strong>15 + 9 + 4<\/strong> rule (first year \u2248 15 human years,\r\n    second year +9, and about +4 human years for every year after that), then adjusts slightly\r\n    for breed traits and health.\r\n  <\/p>\r\n<\/section>\r\n\r\n            <\/header>\r\n\r\n            <!-- Input Form -->\r\n            <div class=\"glass-card\">\r\n                <form id=\"cat-age-form\" aria-label=\"Cat Age Calculator Form\">\r\n                    <div class=\"form-group\">\r\n                        <label for=\"cat-age-slider\">\r\n                            Cat's Age: <span id=\"age-value\" aria-live=\"polite\">5<\/span> years\r\n                        <\/label>\r\n                        <div class=\"input-row\">\r\n                            <div class=\"slider-container\">\r\n                                <input \r\n                                    type=\"range\" \r\n                                    id=\"cat-age-slider\" \r\n                                    name=\"cat-age-slider\" \r\n                                    min=\"1\" \r\n                                    max=\"25\" \r\n                                    value=\"5\" \r\n                                    aria-label=\"Cat age slider\"\r\n                                    aria-valuemin=\"1\"\r\n                                    aria-valuemax=\"25\"\r\n                                    aria-valuenow=\"5\">\r\n                            <\/div>\r\n                            <input \r\n                                type=\"number\" \r\n                                id=\"cat-age-input\" \r\n                                name=\"cat-age-input\" \r\n                                min=\"1\" \r\n                                max=\"25\" \r\n                                value=\"5\" \r\n                                aria-label=\"Cat age numeric input\"\r\n                                required>\r\n                            <span class=\"unit-label\">years<\/span>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div class=\"form-group\">\r\n                        <label for=\"cat-weight\">Cat's Weight (Optional)<\/label>\r\n                        <div class=\"input-row\">\r\n                            <input \r\n                                type=\"number\" \r\n                                id=\"cat-weight\" \r\n                                name=\"cat-weight\" \r\n                                min=\"0\" \r\n                                max=\"20\" \r\n                                step=\"0.1\" \r\n                                placeholder=\"e.g., 4.5\"\r\n                                aria-label=\"Cat weight in kilograms\">\r\n                            <span class=\"unit-label\">kg<\/span>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div class=\"form-group\">\r\n                        <label for=\"cat-breed\">Breed Type<\/label>\r\n                        <select id=\"cat-breed\" name=\"cat-breed\" aria-label=\"Cat breed selection\">\r\n                            <option value=\"common\">\ud83d\udc31 Common Cat \/ Mixed Breed<\/option>\r\n                            <option value=\"maine-coon\">\ud83e\udd81 Maine Coon<\/option>\r\n                            <option value=\"british-shorthair\">\ud83d\udc3e British Shorthair<\/option>\r\n                            <option value=\"persian\">\ud83d\ude3a Persian<\/option>\r\n                            <option value=\"siamese\">\ud83d\ude38 <a href=\"https:\/\/snugglesouls.com\/es\/siamese-cat\/\">Siamese<\/a><\/option>\r\n                            <option value=\"ragdoll\">\ud83e\uddf8 <a href=\"https:\/\/snugglesouls.com\/es\/ragdoll\/\">Ragdoll<\/a><\/option>\r\n                            <option value=\"bengal\">\ud83d\udc06 Bengal<\/option>\r\n                            <option value=\"sphynx\">\ud83d\udc7d <a href=\"https:\/\/snugglesouls.com\/es\/sphynx-cat\/\">Sphynx<\/a><\/option>\r\n                            <option value=\"scottish-fold\">\ud83e\udd70 Scottish Fold<\/option>\r\n                        <\/select>\r\n                    <\/div>\r\n\r\n                    <div class=\"error-message\" id=\"error-message\" role=\"alert\" aria-live=\"assertive\"><\/div>\r\n\r\n                    <button type=\"submit\" class=\"btn-calculate\" aria-label=\"Calculate cat's human age\">\r\n                        Calculate Human Age \ud83d\udc3e\r\n                    <\/button>\r\n                <\/form>\r\n            <\/div>\r\n\r\n            <!-- Results Section -->\r\n            <div id=\"results\" role=\"region\" aria-label=\"Calculation results\">\r\n                <div class=\"result-card\">\r\n                    <h2 class=\"result-title\">Your Cat's Human Age<\/h2>\r\n                    <div class=\"age-display\" id=\"human-age\" aria-live=\"polite\">36<\/div>\r\n                    <p class=\"age-label\">human years old<\/p>\r\n                    \r\n                    <div class=\"health-tips\" id=\"health-tips\">\r\n                        <h3>\r\n                            <span>\ud83c\udfe5<\/span>\r\n                            <span>Health Tips for Your Cat<\/span>\r\n                        <\/h3>\r\n                        <ul id=\"health-tips-list\"><\/ul>\r\n                    <\/div>\r\n\r\n                    <button class=\"btn-share\" id=\"share-btn\" aria-label=\"Share results\">\r\n                        Share Results \ud83d\udce4\r\n                    <\/button>\r\n                <\/div>\r\n\r\n                <!-- Age Comparison Chart -->\r\n                <div class=\"chart-container\">\r\n                    <h3 class=\"chart-title\">Cat Age vs Human Age Progression<\/h3>\r\n                    <canvas id=\"ageChart\" role=\"img\" aria-label=\"Cat age to human age comparison chart\"><\/canvas>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n    <!-- Cat Life Stages Section -->\r\n<section class=\"life-stages-section\" aria-label=\"Cat life stages overview\">\r\n    <div class=\"life-stages-card\">\r\n        <h2 class=\"life-stages-title\">Cat Life Stages at a Glance \ud83d\udc3e<\/h2>\r\n        <p class=\"life-stages-intro\">\r\n            Knowing which life stage your cat is in helps you match <a href=\"https:\/\/snugglesouls.com\/es\/what-can-cats-eat\/\">food<\/a>, vet visits and play\r\n            time to their real needs. These ranges are based on typical indoor cats using the\r\n            same <strong>15\u20139\u20134<\/strong> rule as the calculator.\r\n        <\/p>\r\n\r\n        <div class=\"life-stages-grid\">\r\n            <!-- Kitten -->\r\n            <article class=\"life-stage\">\r\n                <h3 class=\"life-stage-heading\">\r\n                    <span>\ud83d\udc31 Kitten<\/span>\r\n                <\/h3>\r\n                <div class=\"life-stage-pill\">\r\n                    <span>0\u20131 years<\/span>&nbsp;\u00b7 up to ~15 human years\r\n                <\/div>\r\n                <ul class=\"life-stage-list\">\r\n                    <li>Fast growth: choose high-quality kitten food with plenty of protein.<\/li>\r\n                    <li>Complete vaccination series plus parasite prevention are essential.<\/li>\r\n                    <li>Lots of gentle handling and play builds confidence and good behaviour.<\/li>\r\n                <\/ul>\r\n            <\/article>\r\n\r\n            <!-- Young adult -->\r\n            <article class=\"life-stage\">\r\n                <h3 class=\"life-stage-heading\">\r\n                    <span>\ud83d\ude3a Young Adult<\/span>\r\n                <\/h3>\r\n                <div class=\"life-stage-pill\">\r\n                    <span>1\u20136 years<\/span>&nbsp;\u00b7 roughly 15\u201340 human years\r\n                <\/div>\r\n                <ul class=\"life-stage-list\">\r\n                    <li>Maintain a stable, healthy weight \u2013 this is when obesity often starts.<\/li>\r\n                    <li>Schedule at least one full vet check-up per year (exam + vaccines as needed).<\/li>\r\n                    <li>Daily play (10\u201315 minutes) keeps joints, weight and mood in good shape.<\/li>\r\n                <\/ul>\r\n            <\/article>\r\n\r\n            <!-- Mature adult -->\r\n            <article class=\"life-stage\">\r\n                <h3 class=\"life-stage-heading\">\r\n                    <span>\ud83e\udde1 Mature Adult<\/span>\r\n                <\/h3>\r\n                <div class=\"life-stage-pill\">\r\n                    <span>7\u201310 years<\/span>&nbsp;\u00b7 ~44\u201356 human years\r\n                <\/div>\r\n                <ul class=\"life-stage-list\">\r\n                    <li>Ask your vet about routine blood and urine tests to catch kidney or thyroid issues early.<\/li>\r\n                    <li>Watch for subtle changes: drinking more, peeing more, <a href=\"https:\/\/snugglesouls.com\/es\/why-is-my-cat-hiding\/\">hiding<\/a>, or jumping less.<\/li>\r\n                    <li>Consider slightly lower-calorie food while keeping protein reasonably high.<\/li>\r\n                <\/ul>\r\n            <\/article>\r\n\r\n            <!-- Senior -->\r\n            <article class=\"life-stage\">\r\n                <h3 class=\"life-stage-heading\">\r\n                    <span>\ud83d\udc51 Senior<\/span>\r\n                <\/h3>\r\n                <div class=\"life-stage-pill\">\r\n                    <span>11\u201314 years<\/span>&nbsp;\u00b7 ~60\u201372 human years\r\n                <\/div>\r\n                <ul class=\"life-stage-list\">\r\n                    <li>Plan vet visits at least every 6\u201312 months, even if your cat seems \u201cfine\u201d.<\/li>\r\n                    <li>Make life easier: low-entry litter boxes, warm sleeping spots and easy-reach food bowls.<\/li>\r\n                    <li>Monitor weight closely \u2013 both slow loss and steady gain can signal health issues.<\/li>\r\n                <\/ul>\r\n            <\/article>\r\n\r\n            <!-- Geriatric -->\r\n            <article class=\"life-stage\">\r\n                <h3 class=\"life-stage-heading\">\r\n                    <span>\ud83c\udf19 Geriatric<\/span>\r\n                <\/h3>\r\n                <div class=\"life-stage-pill\">\r\n                    <span>15+ years<\/span>&nbsp;\u00b7 76+ human years\r\n                <\/div>\r\n                <ul class=\"life-stage-list\">\r\n                    <li>Work with your vet on pain relief and comfort for arthritis or chronic diseases.<\/li>\r\n                    <li>Offer soft, highly digestible food and encourage small, frequent meals if appetite is low.<\/li>\r\n                    <li>Focus on quality of life: warmth, easy access to favourite spots and gentle interaction.<\/li>\r\n                <\/ul>\r\n            <\/article>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n            <!-- Static Cat Age Chart Section -->\r\n<section class=\"cat-age-chart-section\" aria-labelledby=\"cat-age-chart-heading\">\r\n    <h2 id=\"cat-age-chart-heading\">Cat Age Chart: Cat Years to Human Years<\/h2>\r\n    <p class=\"cat-age-chart-intro\">\r\n        This cat age chart uses the same formula as the calculator above:\r\n        the first year is roughly <strong>15 human years<\/strong>, the second\r\n        year brings your cat to about <strong>24 human years<\/strong>, and\r\n        every year after adds around <strong>4 human years<\/strong>. These\r\n        values are estimates for healthy indoor cats.\r\n    <\/p>\r\n\r\n    <div class=\"cat-age-chart-wrapper\" role=\"group\" aria-label=\"Cat age to human age reference table\">\r\n        <table class=\"cat-age-chart\">\r\n            <thead>\r\n                <tr>\r\n                    <th scope=\"col\">Cat age (years)<\/th>\r\n                    <th scope=\"col\">Human age (years)<\/th>\r\n                <\/tr>\r\n            <\/thead>\r\n            <tbody>\r\n                <tr><td>1<\/td><td>15<\/td><\/tr>\r\n                <tr><td>2<\/td><td>24<\/td><\/tr>\r\n                <tr><td>3<\/td><td>28<\/td><\/tr>\r\n                <tr><td>4<\/td><td>32<\/td><\/tr>\r\n                <tr><td>5<\/td><td>36<\/td><\/tr>\r\n                <tr><td>6<\/td><td>40<\/td><\/tr>\r\n                <tr><td>7<\/td><td>44<\/td><\/tr>\r\n                <tr><td>8<\/td><td>48<\/td><\/tr>\r\n                <tr><td>9<\/td><td>52<\/td><\/tr>\r\n                <tr><td>10<\/td><td>56<\/td><\/tr>\r\n                <tr><td>11<\/td><td>60<\/td><\/tr>\r\n                <tr><td>12<\/td><td>64<\/td><\/tr>\r\n                <tr><td>13<\/td><td>68<\/td><\/tr>\r\n                <tr><td>14<\/td><td>72<\/td><\/tr>\r\n                <tr><td>15<\/td><td>76<\/td><\/tr>\r\n                <tr><td>16<\/td><td>80<\/td><\/tr>\r\n                <tr><td>17<\/td><td>84<\/td><\/tr>\r\n                <tr><td>18<\/td><td>88<\/td><\/tr>\r\n                <tr><td>19<\/td><td>92<\/td><\/tr>\r\n                <tr><td>20<\/td><td>96<\/td><\/tr>\r\n            <\/tbody>\r\n        <\/table>\r\n    <\/div>\r\n\r\n    <p class=\"cat-age-chart-note\">\r\n        Every cat is unique. Lifestyle, weight, and chronic conditions can\r\n        make a cat seem \u201colder\u201d or \u201cyounger\u201d than this chart suggests. Use\r\n        these numbers as a rough guide and talk to your veterinarian if you\r\n        have any concerns.\r\n    <\/p>\r\n<\/section>\r\n\r\n    <script>\r\n        \/\/ Wait for DOM to load\r\n        document.addEventListener('DOMContentLoaded', function() {\r\n\r\n            \/\/ Form elements\r\n            const form = document.getElementById('cat-age-form');\r\n            const ageSlider = document.getElementById('cat-age-slider');\r\n            const ageInput = document.getElementById('cat-age-input');\r\n            const ageValue = document.getElementById('age-value');\r\n            const weightInput = document.getElementById('cat-weight');\r\n            const breedSelect = document.getElementById('cat-breed');\r\n            const errorMessage = document.getElementById('error-message');\r\n            const resultsSection = document.getElementById('results');\r\n            const humanAgeDisplay = document.getElementById('human-age');\r\n            const healthTipsList = document.getElementById('health-tips-list');\r\n            const shareBtn = document.getElementById('share-btn');\r\n\r\n            let chartInstance = null;\r\n\r\n            \/\/ Sync slider and input\r\n            ageSlider.addEventListener('input', function() {\r\n                ageInput.value = this.value;\r\n                ageValue.textContent = this.value;\r\n                this.setAttribute('aria-valuenow', this.value);\r\n            });\r\n\r\n            ageInput.addEventListener('input', function() {\r\n                if (this.value >= 1 && this.value <= 25) {\r\n                    ageSlider.value = this.value;\r\n                    ageValue.textContent = this.value;\r\n                    ageSlider.setAttribute('aria-valuenow', this.value);\r\n                }\r\n            });\r\n\r\n            \/\/ Form validation and submission\r\n            form.addEventListener('submit', function(e) {\r\n                e.preventDefault();\r\n                \r\n                const catAge = parseInt(ageInput.value);\r\n                const catWeight = parseFloat(weightInput.value) || null;\r\n                const catBreed = breedSelect.value;\r\n\r\n                \/\/ Validate inputs\r\n                if (!validateInputs(catAge, catWeight)) {\r\n                    return;\r\n                }\r\n\r\n                \/\/ Calculate human age\r\n                const humanAge = calculateHumanAge(catAge, catBreed);\r\n                \r\n                \/\/ Display results\r\n                displayResults(humanAge, catAge, catWeight, catBreed);\r\n            });\r\n\r\n            \/\/ Validation function\r\n            function validateInputs(age, weight) {\r\n                errorMessage.classList.remove('show');\r\n                \r\n                if (isNaN(age) || age < 1 || age > 25) {\r\n                    showError('Please enter a valid cat age between 1 and 25 years.');\r\n                    return false;\r\n                }\r\n                \r\n                if (weight !== null && (isNaN(weight) || weight < 0 || weight > 20)) {\r\n                    showError('Please enter a valid weight between 0 and 20 kg.');\r\n                    return false;\r\n                }\r\n                \r\n                return true;\r\n            }\r\n\r\n            \/\/ Show error message\r\n            function showError(message) {\r\n                errorMessage.textContent = message;\r\n                errorMessage.classList.add('show');\r\n                setTimeout(() => {\r\n                    errorMessage.classList.remove('show');\r\n                }, 5000);\r\n            }\r\n\r\n            \/\/ Calculate human age with breed adjustments\r\n            function calculateHumanAge(catAge, breed) {\r\n                let humanAge;\r\n                \r\n                \/\/ Standard formula: 1st year = 15, 2nd year = +9, subsequent = +4\r\n                if (catAge === 1) {\r\n                    humanAge = 15;\r\n                } else if (catAge === 2) {\r\n                    humanAge = 24;\r\n                } else {\r\n                    humanAge = 24 + ((catAge - 2) * 4);\r\n                }\r\n\r\n                \/\/ Breed-specific adjustments (based on average lifespan characteristics)\r\n                const breedAdjustments = {\r\n                    'maine-coon': 1,        \/\/ Larger breed, slightly shorter lifespan\r\n                    'persian': 0,           \/\/ Average lifespan\r\n                    'british-shorthair': 0, \/\/ Average lifespan\r\n                    'siamese': -1,          \/\/ Longer lifespan breed\r\n                    'ragdoll': 0,           \/\/ Average lifespan\r\n                    'bengal': -1,           \/\/ Active breed, good health\r\n                    'sphynx': 2,            \/\/ Shorter average lifespan\r\n                    'scottish-fold': 1,     \/\/ Some health concerns\r\n                    'common': -1            \/\/ Mixed breeds typically live longer\r\n                };\r\n\r\n                const adjustment = breedAdjustments[breed] || 0;\r\n                \r\n                \/\/ Apply adjustment for cats over 2 years\r\n                if (catAge > 2) {\r\n                    humanAge += adjustment * (catAge - 2);\r\n                }\r\n\r\n                return Math.max(humanAge, 15); \/\/ Minimum 15 years\r\n            }\r\n\r\n            \/\/ Display results\r\n            function displayResults(humanAge, catAge, weight, breed) {\r\n                humanAgeDisplay.textContent = humanAge;\r\n                \r\n                \/\/ Generate health tips\r\n                const tips = generateHealthTips(catAge, weight, breed);\r\n                healthTipsList.innerHTML = '';\r\n                tips.forEach(tip => {\r\n                    const li = document.createElement('li');\r\n                    li.textContent = tip;\r\n                    healthTipsList.appendChild(li);\r\n                });\r\n\r\n                \/\/ Show results with animation\r\n                resultsSection.classList.add('show');\r\n                resultsSection.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\r\n\r\n                \/\/ Generate comparison chart\r\n                generateChart(catAge, humanAge);\r\n            }\r\n\r\n            \/\/ Generate health tips based on age\r\n            function generateHealthTips(age, weight, breed) {\r\n                const tips = [];\r\n                \r\n                \/\/ Age-based tips\r\n                if (age <= 1) {\r\n                    tips.push('Kitten stage: Ensure high-protein diet and complete vaccination series');\r\n                    tips.push('Schedule spay\/neuter before 6 months to prevent health issues');\r\n                    tips.push('Provide plenty of socialization and play for healthy development');\r\n                    tips.push('Multiple small meals throughout the day are ideal for growth');\r\n                } else if (age >= 1 && age <= 6) {\r\n                    tips.push('Adult cat: Maintain annual veterinary checkups');\r\n                    tips.push('Monitor weight to prevent obesity (common in this age range)');\r\n                    tips.push('Ensure dental care - 70% of cats have dental disease by age 2');\r\n                    tips.push('Provide mental stimulation through interactive play and puzzle feeders');\r\n                } else if (age >= 7 && age <= 10) {\r\n                    tips.push('Mature adult: Consider biannual vet visits to catch age-related issues early');\r\n                    tips.push('Switch to senior-friendly diet with reduced calories and higher protein');\r\n                    tips.push('Screen for common issues: kidney disease, hyperthyroidism, arthritis, diabetes');\r\n                    tips.push('Monitor activity levels and joint health - arthritis becomes common');\r\n                } else if (age >= 11 && age <= 14) {\r\n                    tips.push('Senior cat: Schedule vet visits every 6 months minimum');\r\n                    tips.push('Provide easily digestible, nutrient-dense food to maintain muscle mass');\r\n                    tips.push('Environmental modifications: lower litter boxes, easy-access food\/water');\r\n                    tips.push('Watch for weight loss (10% loss is significant) - may need appetite stimulants');\r\n                } else {\r\n                    tips.push('Geriatric cat: Quarterly vet visits recommended for comprehensive care');\r\n                    tips.push('Focus on comfort and pain management for arthritis and chronic conditions');\r\n                    tips.push('Highly digestible foods with added antioxidants support immune health');\r\n                    tips.push('Monitor quality of life closely and discuss end-of-life planning with your vet');\r\n                }\r\n\r\n                \/\/ Weight-based tips\r\n                if (weight !== null) {\r\n                    if (weight < 2.5 && age > 1) {\r\n                        tips.push('\u26a0\ufe0f Low weight detected: Consult vet to rule out hyperthyroidism, kidney disease, or other issues');\r\n                    } else if (weight > 6 && age >= 7) {\r\n                        tips.push('\u26a0\ufe0f Weight management important: Reduce obesity risk through portion control and exercise');\r\n                    }\r\n                }\r\n\r\n                \/\/ Breed-specific tips\r\n                const breedTips = {\r\n                    'maine-coon': 'Maine Coons are prone to heart disease (HCM) - regular cardiac screenings recommended',\r\n                    'persian': 'Persians need regular grooming and are prone to breathing issues due to flat faces',\r\n                    'british-shorthair': 'British Shorthairs can be prone to obesity - monitor food portions carefully',\r\n                    'siamese': 'Siamese cats are generally healthy and active - maintain mental stimulation',\r\n                    'ragdoll': 'Ragdolls may be prone to heart disease - regular vet cardiac checks important',\r\n                    'sphynx': 'Sphynx cats have higher rates of heart conditions - frequent vet monitoring essential',\r\n                    'bengal': 'Bengals are highly active - ensure plenty of exercise and environmental enrichment',\r\n                    'scottish-fold': 'Scottish Folds may develop joint issues - monitor mobility and comfort',\r\n                    'common': 'Mixed breed cats often have excellent genetic diversity and longevity'\r\n                };\r\n\r\n                if (breedTips[breed]) {\r\n                    tips.push(breedTips[breed]);\r\n                }\r\n\r\n                return tips;\r\n            }\r\n\r\n            \/\/ Generate age comparison chart\r\n            function generateChart(catAge, humanAge) {\r\n                const ctx = document.getElementById('ageChart');\r\n                \r\n                \/\/ Destroy existing chart if it exists\r\n                if (chartInstance) {\r\n                    chartInstance.destroy();\r\n                }\r\n\r\n                \/\/ Generate data points\r\n                const catAges = [];\r\n                const humanAges = [];\r\n                \r\n                for (let i = 1; i <= Math.min(catAge + 5, 25); i++) {\r\n                    catAges.push(i);\r\n                    humanAges.push(calculateHumanAge(i, breedSelect.value));\r\n                }\r\n\r\n                \/\/ Create chart\r\n                chartInstance = new Chart(ctx, {\r\n                    type: 'line',\r\n                    data: {\r\n                        labels: catAges,\r\n                        datasets: [{\r\n                            label: 'Human Age Equivalent',\r\n                            data: humanAges,\r\n                            borderColor: '#FF6B9D',\r\n                            backgroundColor: 'rgba(255, 107, 157, 0.1)',\r\n                            borderWidth: 3,\r\n                            fill: true,\r\n                            tension: 0.4,\r\n                            pointRadius: catAges.map((age, idx) => age === catAge ? 8 : 4),\r\n                            pointBackgroundColor: catAges.map((age, idx) => age === catAge ? '#4ECDC4' : '#FF6B9D'),\r\n                            pointBorderColor: '#fff',\r\n                            pointBorderWidth: 2\r\n                        }]\r\n                    },\r\n                    options: {\r\n                        responsive: true,\r\n                        maintainAspectRatio: true,\r\n                        plugins: {\r\n                            legend: {\r\n                                display: true,\r\n                                labels: {\r\n                                    font: {\r\n                                        family: 'Poppins',\r\n                                        size: 14\r\n                                    }\r\n                                }\r\n                            },\r\n                            tooltip: {\r\n                                backgroundColor: 'rgba(0, 0, 0, 0.8)',\r\n                                titleFont: {\r\n                                    family: 'Poppins',\r\n                                    size: 14\r\n                                },\r\n                                bodyFont: {\r\n                                    family: 'Poppins',\r\n                                    size: 13\r\n                                },\r\n                                padding: 12,\r\n                                cornerRadius: 8,\r\n                                callbacks: {\r\n                                    label: function(context) {\r\n                                        return `Human Age: ${context.parsed.y} years`;\r\n                                    },\r\n                                    title: function(context) {\r\n                                        return `Cat Age: ${context[0].parsed.x} years`;\r\n                                    }\r\n                                }\r\n                            }\r\n                        },\r\n                        scales: {\r\n                            x: {\r\n                                title: {\r\n                                    display: true,\r\n                                    text: 'Cat Age (years)',\r\n                                    font: {\r\n                                        family: 'Poppins',\r\n                                        size: 13,\r\n                                        weight: '600'\r\n                                    }\r\n                                },\r\n                                grid: {\r\n                                    color: 'rgba(0, 0, 0, 0.05)'\r\n                                }\r\n                            },\r\n                            y: {\r\n                                title: {\r\n                                    display: true,\r\n                                    text: 'Human Age Equivalent (years)',\r\n                                    font: {\r\n                                        family: 'Poppins',\r\n                                        size: 13,\r\n                                        weight: '600'\r\n                                    }\r\n                                },\r\n                                grid: {\r\n                                    color: 'rgba(0, 0, 0, 0.05)'\r\n                                },\r\n                                beginAtZero: false\r\n                            }\r\n                        }\r\n                    }\r\n                });\r\n            }\r\n\r\n            \/\/ Share functionality\r\n            shareBtn.addEventListener('click', function() {\r\n                const catAge = parseInt(ageInput.value);\r\n                const humanAge = parseInt(humanAgeDisplay.textContent);\r\n                const shareText = `My ${catAge}-year-old cat is ${humanAge} years old in human years! \ud83d\udc31 Calculate your cat's age at Snugglesouls Cat Age Converter`;\r\n\r\n                if (navigator.share) {\r\n                    navigator.share({\r\n                        title: 'Snugglesouls Cat Age Converter',\r\n                        text: shareText,\r\n                        url: window.location.href\r\n                    }).catch(err => console.log('Error sharing:', err));\r\n                } else {\r\n                    \/\/ Fallback: Copy to clipboard\r\n                    navigator.clipboard.writeText(shareText).then(() => {\r\n                        alert('Results copied to clipboard!');\r\n                    }).catch(err => {\r\n                        console.error('Could not copy text:', err);\r\n                    });\r\n                }\r\n            });\r\n\r\n            \/\/ Keyboard navigation enhancement\r\n            document.addEventListener('keydown', function(e) {\r\n                if (e.key === 'Enter' && document.activeElement.tagName !== 'BUTTON') {\r\n                    form.dispatchEvent(new Event('submit'));\r\n                }\r\n            });\r\n        });\r\n    <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Cat Age Calculator \u2013 Convert Cat Years to Human Years Discover your cat&#8217;s age in human years. Free cat age converter with breed &#038; weight options plus vet\u2011style health tips.\ud83d\udc31 Use this free cat age calculator to instantly convert cat years to human years. Just enter your cat\u2019s age, choose the breed, and (optionally) add [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-4051","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/snugglesouls.com\/es\/wp-json\/wp\/v2\/pages\/4051","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/snugglesouls.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/snugglesouls.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/snugglesouls.com\/es\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/snugglesouls.com\/es\/wp-json\/wp\/v2\/comments?post=4051"}],"version-history":[{"count":83,"href":"https:\/\/snugglesouls.com\/es\/wp-json\/wp\/v2\/pages\/4051\/revisions"}],"predecessor-version":[{"id":4469,"href":"https:\/\/snugglesouls.com\/es\/wp-json\/wp\/v2\/pages\/4051\/revisions\/4469"}],"wp:attachment":[{"href":"https:\/\/snugglesouls.com\/es\/wp-json\/wp\/v2\/media?parent=4051"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}