*{box-sizing:border-box;margin:0;padding:0}body{color:#333;background-color:#f9f9f9;padding-top:0;font-family:Roboto,sans-serif;line-height:1.6}.container{flex-direction:column;align-items:center;max-width:1200px;margin:0 auto;padding:20px;display:flex}.header{z-index:1000;background-color:#24597f;align-items:center;height:80px;padding:10px 40px;display:flex;position:relative;box-shadow:0 2px 5px #0000001a}.menu-toggle{cursor:pointer;background:0 0;border:none;flex-direction:column;justify-content:space-between;width:30px;height:24px;margin-left:20px;padding:0;display:none!important}.menu-toggle span{background-color:#fff;border-radius:3px;width:100%;height:3px;transition:all .3s;display:block}.menu-toggle:hover span{background-color:#a4e5bb}body.usuario-logueado .menu-toggle{display:flex!important}.header-img{object-fit:contain;width:auto;max-height:60px;margin-right:auto}#userInfo{color:#fff;align-items:center;margin-right:15px;font-size:14px;display:flex}#userInfo span{background:#fff3;border-radius:15px;padding:5px 12px;font-size:12px}.nav{margin-left:auto}.nav-list{gap:20px;margin:0;padding:0;list-style:none;display:flex}.nav-list li{display:inline-block}.nav-list a{color:#fff;border-radius:5px;padding:10px 15px;font-weight:500;text-decoration:none;transition:background-color .3s}.nav-list a:hover,.nav-list .active{color:#24597f;background-color:#a4e5bb}.welcome{text-align:center;margin:40px 0;padding:0 20px}.welcome h2{color:#24597f;margin-bottom:20px;font-size:2rem}.welcome p{max-width:600px;margin-bottom:30px;font-size:1.1rem}.image-link{text-align:center;max-width:300px;margin:20px 0;display:inline-block}.responsive-img{border-radius:8px;max-width:100%;height:auto;transition:transform .3s;box-shadow:0 4px 6px #0000001a}.responsive-img:hover{transform:scale(1.05)}.image-link-nosotros{text-align:center;max-width:300px;margin:20px auto;display:block}.responsive-img-nosotros{border-radius:8px;max-width:100%;height:auto;transition:transform .3s;display:block;box-shadow:0 4px 6px #0000001a}.footer{color:#fff;text-align:center;background-color:#24597f;margin-top:40px;padding:20px 0}.footer a{color:#a4e5bb;text-decoration:none}.footer a:hover{text-decoration:underline}.veterinario-banner{color:#fff;z-index:9999;background:linear-gradient(135deg,#24597f 0%,#1a4563 100%);justify-content:center;align-items:center;padding:10px 20px;display:flex;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -2px 10px #0000004d}.veterinario-banner.hidden{visibility:hidden;transition:transform .3s;transform:translateY(110%)}.banner-content{justify-content:space-between;align-items:center;gap:15px;width:100%;max-width:1200px;display:flex}.btn-login-banner{color:#fff;background:#4caf50;border-radius:4px;padding:8px 16px;font-weight:500;text-decoration:none}.close-banner{color:#fff;cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;width:30px;height:30px;padding:0;font-size:20px;display:flex}.show-banner-btn{color:#fff;cursor:pointer;z-index:9998;background-color:#2c3e50;border:none;border-radius:50%;justify-content:center;align-items:center;width:50px;height:50px;font-size:20px;display:flex;position:fixed;bottom:20px;right:20px;box-shadow:0 2px 10px #0003}.show-banner-btn.hidden{display:none!important}form{flex-direction:column;gap:10px;max-width:500px;margin:0 auto;display:flex}form label{color:#24597f;font-weight:700}form input,form textarea,form button{border:1px solid #ddd;border-radius:5px;padding:10px;font-family:Roboto,sans-serif;font-size:1rem}form input:focus,form textarea:focus{border-color:#24597f;outline:none;box-shadow:0 0 5px #24597f4d}form button{color:#fff;cursor:pointer;background-color:#24597f;border:none;font-weight:500;transition:background-color .3s}form button:hover{color:#24597f;background-color:#a4e5bb}.video-section{text-align:center;margin-top:40px;padding:0 20px}.video-grid{grid-template-columns:repeat(auto-fit,minmax(450px,1fr));gap:20px;margin:20px 0;display:grid}.video-frame{flex-direction:column;justify-content:center;align-items:center;width:100%;max-width:700px;margin:0 auto 20px;display:flex}iframe{aspect-ratio:16/9;border-radius:8px;width:100%;max-width:700px;height:auto;margin:0 auto;display:block;box-shadow:0 4px 8px #0000001a}iframe:hover{transform:scale(1.02)}.video-title{color:#24597f;text-align:center;margin-top:10px;font-size:1rem;font-weight:600}.diet-list{flex-direction:column;gap:20px;margin:0;padding:0;list-style:none;display:flex}.diet-list li{background:#fff;border-radius:8px;flex-direction:row;align-items:center;gap:20px;padding:15px;display:flex;box-shadow:0 2px 4px #0000001a}.diet-img{border-radius:8px;max-width:200px;height:auto;box-shadow:0 4px 8px #0000001a}.popup{z-index:1000;background:#00000080;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}.popup.hidden{display:none}.popup-content{text-align:center;background:#fff;border-radius:10px;width:90%;max-width:400px;padding:20px;box-shadow:0 5px 15px #0000004d}.popup-content button{color:#fff;cursor:pointer;background:#24597f;border:none;border-radius:5px;margin-top:10px;padding:10px 20px;transition:background-color .3s}.popup-content button:hover{color:#24597f;background:#a4e5bb}.hero{color:#fff;text-align:center;background:url(header.png) 50%/cover no-repeat;justify-content:center;align-items:center;height:60vh;display:flex;position:relative}.hero:before{content:"";background:#00000080;width:100%;height:100%;position:absolute;top:0;left:0}.hero .container{z-index:2;position:relative}.hero h1{margin-bottom:10px;font-size:3rem}.hero p{font-size:1.2rem}body.usuario-logueado .header{justify-content:space-between;padding:10px 40px}body.usuario-logueado .header-img{margin-right:auto}body.usuario-logueado #userInfo{margin-left:auto;margin-right:15px}body.usuario-logueado .menu-toggle{margin-left:0}@media (width<=768px){.header{height:70px;padding:10px 20px}.header-img{max-height:50px}.nav-list{gap:10px}.nav-list a{padding:8px 12px;font-size:14px}.video-grid{grid-template-columns:1fr}.banner-content{text-align:center;flex-direction:column;gap:10px}body.usuario-logueado .header{padding:10px 20px}body.usuario-logueado #userInfo span{padding:4px 8px;font-size:11px}.menu-toggle{width:25px;height:20px;margin-left:10px}}@media (width<=480px){.header{padding:10px 15px}.welcome h2{font-size:1.5rem}.welcome p{font-size:1rem}.video-frame{max-width:100%}body.usuario-logueado #userInfo{margin-right:10px}body.usuario-logueado #userInfo span{padding:3px 6px;font-size:10px}}.sidebar-overlay-principal{z-index:1001;opacity:0;background:#00000080;width:100%;height:100%;transition:opacity .3s;display:none;position:fixed;top:0;left:0}.sidebar-overlay-principal.active{opacity:1;display:block}.sidebar-principal{z-index:1002;background:linear-gradient(#24597f 0%,#1a4563 100%);width:300px;height:100vh;padding-top:70px;transition:right .4s cubic-bezier(.4,0,.2,1);position:fixed;top:0;right:-320px;overflow-y:auto;box-shadow:-5px 0 25px #0000004d}.sidebar-principal.active{right:0}.sidebar-header-principal{background:#ffffff1a;border-bottom:1px solid #ffffff1a;justify-content:space-between;align-items:center;height:60px;padding:0 20px;display:flex;position:absolute;top:0;left:0;right:0}.sidebar-title-principal{color:#fff;font-size:1.2em;font-weight:600}.close-sidebar-principal{color:#fff;cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;font-size:28px;transition:all .3s;display:flex}.close-sidebar-principal:hover{background:#ffffff1a;transform:rotate(90deg)}.sidebar-nav-principal{padding:0}.sidebar-nav-principal ul{margin:0;padding:0;list-style:none}.sidebar-nav-principal li{border-bottom:1px solid #ffffff0d}.sidebar-nav-principal a{color:#fff;align-items:center;padding:16px 20px;font-size:16px;font-weight:500;text-decoration:none;transition:all .3s;display:flex;position:relative;overflow:hidden}.sidebar-nav-principal a:before{content:"";background:#4caf50;width:4px;height:100%;transition:transform .3s;position:absolute;top:0;left:0;transform:scaleY(0)}.sidebar-nav-principal a:hover:before{transform:scaleY(1)}.sidebar-nav-principal a:hover{background:#ffffff1a;padding-left:24px}.sidebar-nav-principal a i{text-align:center;width:20px;margin-right:12px;font-size:1.2em}.sidebar-logout-principal{border-top:1px solid #ffffff1a;margin-top:20px;padding:10px 0}.sidebar-logout-principal a{color:#ff6b6b!important}.sidebar-logout-principal a:hover{background:#ff6b6b1a!important}.menu-toggle{color:#fff;cursor:pointer;background:0 0;border:none;border-radius:4px;margin-left:15px;padding:8px;font-size:24px;transition:background-color .3s;display:none}.menu-toggle:hover{background-color:#ffffff1a}.overlay-normal{z-index:998;background:#00000080;width:100%;height:100%;display:none;position:fixed;top:0;left:0}.overlay-normal.active{display:block}.sidebar-overlay-principal{z-index:1001}body.usuario-logueado .nav{display:none!important}@media (width<=768px){.header{height:70px;padding:10px 15px}.header-img{max-height:50px}.menu-toggle{margin-left:10px;display:block!important}.nav{z-index:999;background:#2c3e50;width:280px;height:100vh;margin-left:0;transition:left .3s;position:fixed;top:0;left:-100%;overflow-y:auto}body:not(.usuario-logueado) .nav.active{left:0}body.usuario-logueado .nav{display:none!important}.nav-list{flex-direction:column;gap:0;padding:80px 20px 20px}.nav-list li{width:100%}.nav-list a{border-bottom:1px solid #ffffff1a;width:100%;padding:15px;display:block}.nav-list a:hover,.nav-list a.active{background:#ffffff1a}#userInfo{margin-right:10px;font-size:12px}#userInfo span{padding:4px 8px;font-size:11px}}.welcome-section{text-align:center;flex-direction:column;align-items:center;padding:40px 20px;display:flex}.welcome-section h1{color:#24597f;margin-bottom:20px}.welcome-section p{max-width:700px;margin-bottom:15px;font-size:1.1rem}.appointment-card{text-align:left;background:#fff;border-radius:12px;width:100%;max-width:500px;margin:30px auto 0;padding:30px;box-shadow:0 4px 15px #0000001a}.appointment-form{flex-direction:column;gap:15px;display:flex}.appointment-form label{color:#24597f;margin-bottom:5px;font-size:.9rem;font-weight:700;display:block}.appointment-form input{border:1px solid #ddd;border-radius:8px;width:100%;padding:12px;font-size:1rem}.appointment-form .button{color:#fff;cursor:pointer;text-align:center;background-color:#24597f;border:none;border-radius:6px;width:100%;padding:15px;font-weight:700;transition:background-color .3s;display:inline-block}.appointment-form .button:hover{color:#24597f;background-color:#a4e5bb}