body { font-family: 'Segoe UI', Arial, sans-serif; background: #fafbfc; margin: 0; padding: 0; min-height: 100vh; }
.intro-anim { width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(120deg, #ffe8ec 40%, #d3f4ff 100%); transition: opacity 0.8s, transform 0.8s; z-index: 10; position: fixed; left: 0; top: 0; }
.intro-content { background: white; border-radius: 2rem; box-shadow: 0 6px 48px rgba(0,0,0,0.11); padding: 3rem 2.5rem; text-align: center; min-width: 340px; max-width: 95vw; animation: zoomIn 1.1s cubic-bezier(.7,1.7,.45,.95);}
.intro-content h1 { font-size: 2.4rem; margin-bottom: 1rem; }
.miau { color: #ff4c8b; font-weight: 900; }
.guau { color: #21a5be; font-weight: 900; }
.intro-content p { font-size: 1.1rem; margin-bottom: 2rem; }
.intro-btns { display: flex; gap: 1.5rem; justify-content: center; }
.intro-btns button { padding: 1rem 2rem; border: none; background: linear-gradient(90deg, #21a5be 60%, #ff4c8b 100%); color: #fff; border-radius: 1rem; font-size: 1rem; cursor: pointer; font-weight: bold; transition: transform 0.2s, box-shadow 0.2s;}
.intro-btns button:hover { transform: scale(1.07); box-shadow: 0 2px 12px #ffb6d1bb; }
@keyframes zoomIn { 0% { transform: scale(0.3); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes zoomOut { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.7); opacity: 0; } }
.hidden { display: none !important; }
main { display: flex; flex-direction: column; align-items: center; min-height: 100vh; }
.nav-top { margin: 1.5rem 0 0.5rem 0; display: flex; gap: 1.1rem; justify-content: center; }
.nav-btn { background: #21a5be; color: #fff; border: none; border-radius: 1rem; padding: 0.7rem 1.6rem; font-size: 1rem; font-weight: 600; margin: 0; cursor: pointer; transition: background 0.2s;}
.nav-btn:hover { background: #ff4c8b; }
.page { background: #fff; margin-top: 1rem; margin-bottom: 2rem; border-radius: 2rem; box-shadow: 0 4px 32px #ffb6d133; padding: 2.5rem 2rem 2rem 2rem; width: 98vw; max-width: 580px; min-height: 400px; animation: pageFadeIn 0.8s; }
@keyframes pageFadeIn { 0% { opacity: 0; transform: translateY(40px) scale(0.9);} 100% { opacity: 1; transform: translateY(0) scale(1);} }
h2 { text-align: center; color: #21a5be; font-size: 2rem; margin-bottom: 2rem; }
.gallery { display: flex; flex-wrap: wrap; gap: 1.2rem; justify-content: center; margin-bottom: 2rem; min-height: 60px; }
.animal-card { width: 155px; background: #fafbfc; border-radius: 1.2rem; box-shadow: 0 2px 16px #0001; padding: 1rem 0.6rem; text-align: center; display: flex; flex-direction: column; gap: 0.4rem; align-items: center; position: relative;}
.card-slider { width: 120px; height: 120px; position: relative; display: flex; align-items: center; justify-content: center; }
.card-slider img, .card-slider video { max-width: 120px; max-height: 120px; border-radius: 1rem; background: #fff; margin-bottom: 0.3rem; cursor: pointer; transition: box-shadow 0.22s, transform 0.22s; }
.card-slider img:hover, .card-slider video:hover { box-shadow: 0 4px 22px #ff4c8d99; transform: scale(1.05);}
.slider-controls { position: absolute; width: 100%; top: 45%; left: 0; display: flex; justify-content: space-between; pointer-events: none;}
.slider-btn { background: #21a5becc; border: none; color: #fff; border-radius: 50%; width: 28px; height: 28px; font-size: 1.2rem; cursor: pointer; pointer-events: auto; box-shadow: 0 2px 10px #0003; transition: background 0.2s;}
.slider-btn:hover { background: #ff4c8bcc;}
.slider-counter { position: absolute; bottom: 1px; right: 6px; background: #ff4c8bcc; color: #fff; padding: 0.15em 0.6em; border-radius: 1em; font-size: 0.92em; }
.animal-card .nombre { font-weight: bold; font-size: 1.05rem; color: #ff4c8b;}
.animal-card .desc { font-size: 0.92rem; color: #555;}
.animal-card .cel { margin-top: 0.5rem; font-size: 0.93rem; color: #21a5be; word-break: break-all;}
.animal-card .whatsapp-btn { background: #25d366; color: white; border: none; border-radius: 0.8rem; padding: 0.32rem 1.1rem; font-size: 0.97rem; cursor: pointer; display: flex; align-items: center; gap: 0.4rem; margin-top: 0.3rem; transition: background 0.18s;}
.animal-card .whatsapp-btn:hover { background: #128C7E; }
.btn-status { background: #21a5be; color: #fff; border: none; border-radius: .7em; font-weight: bold; padding: .6em 1.2em; margin-top: .6em; cursor: pointer; }
.status-badge { display:inline-block; margin-top:.6em; background: #eee; color:#21a5be; font-weight:700; border-radius:.7em; padding:.16em .9em; }
.animal-form { display: flex; flex-direction: column; gap: 0.7rem; background: #f2f9fa; padding: 1rem 1.3rem 1.3rem 1.3rem; border-radius: 1rem; box-shadow: 0 2px 8px #0001; margin-top: 1rem; }
.animal-form input, .animal-form textarea { padding: 0.7rem; border-radius: 0.7rem; border: 1px solid #ddd; font-size: 1rem;}
.animal-form textarea { resize: vertical; min-height: 60px;}
.animal-form button { background: linear-gradient(90deg,#21a5be 60%,#ff4c8b 100%); color: #fff; border: none; border-radius: 0.8rem; padding: 0.7rem 1.3rem; font-size: 1.07rem; font-weight: 600; cursor: pointer; margin-top: 0.4rem; transition: background 0.2s;}
.animal-form button:hover { background: #21a5be; }
.label-archivos { font-size: 1em; font-weight: 500; color: #21a5be; margin-bottom: 0.3em; }
.label-archivos input[type="file"] { display: block; margin-top: 0.3em; color: #222; }
.lightbox { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(40, 40, 60, 0.91); display: flex; align-items: center; justify-content: center; z-index: 9999; transition: opacity 0.3s; flex-direction: column; }
.close-lightbox { position: absolute; top: 3vh; right: 4vw; font-size: 2.5rem; color: #fff; cursor: pointer; font-weight: bold; z-index: 2; background: #21a5be88; border-radius: 1rem; padding: 0.2em 0.6em; box-shadow: 0 2px 12px #0007;}
#lightboxContent img, #lightboxContent video { max-width: 85vw; max-height: 85vh; border-radius: 1.2rem; box-shadow: 0 4px 32px #000c; background: #fff;}
#lightboxContent video { background: #000; }
.lightbox-nav { margin-top: 0.6em; display: flex; align-items: center; gap: 1em; }
.lightbox-nav button { background: #21a5becc; border: none; color: #fff; border-radius: 50%; width: 42px; height: 42px; font-size: 1.4rem; cursor: pointer; box-shadow: 0 2px 10px #0003; transition: background 0.2s;}
.lightbox-nav button:hover { background: #ff4c8bcc;}
#slideCounter { color: #fff; font-weight: bold; font-size: 1.1em; }
.modal { position: fixed; z-index: 99999; left:0; top:0; width:100vw; height:100vh; background:#222a; display: flex; align-items:center; justify-content:center;}
.modal-content { background: #fff; padding: 2em; border-radius: 1.2em; box-shadow: 0 6px 24px #0008; width: 90vw; max-width: 340px;}
#modalStatusBody label { display: block; margin: 0.8em 0 0.3em 0;}
#modalStatusBody select, #modalStatusBody input { font-size:1.1em; width:100%; margin-bottom:.5em;}
#modalCloseBtn { margin-top:1em; background:#ddd; border:none; border-radius:.5em; font-weight:600; padding:.5em 1.3em; cursor:pointer;}
@media (max-width: 650px) {
  .intro-content, .page { padding: 1.3rem 0.4rem 1.3rem 0.4rem; }
  .gallery { gap: 0.7rem; }
  .animal-card { width: 92vw; max-width: 98vw; }
  .card-slider, .card-slider img, .card-slider video { max-width: 65vw; max-height: 65vw; }
  #lightboxContent img, #lightboxContent video { max-width: 98vw; max-height: 65vh; }
}