:root{
  --celeste: #6AD4E1;
  --naranja: #F4A300;
  --turquesa: #008C9E;
  --gris: #F5F5F5;
}
*{transition:all .3s ease-in-out}
.text-turq{ color: var(--turquesa)!important; }
.btn-suma{
  background: var(--naranja);
  border: none;
  color: #fff;
  box-shadow: 0 6px 18px rgba(244,163,0,.35);
}
.btn-suma:hover{ filter: brightness(0.95); color:#fff; box-shadow: 0 8px 22px rgba(244,163,0,.45); }
.btn-outline-turq{
  color: var(--turquesa);
  border-color: var(--turquesa);
}
.btn-outline-turq:hover{
  background: var(--turquesa);
  color:#fff;
}
.logo-pop{ animation: logoPop .9s ease both; }
@keyframes logoPop{ from{ transform: scale(.9); opacity: 0 } to{ transform: scale(1); opacity:1 } }

.hero{
  padding: 64px 0 32px;
  background: linear-gradient(180deg, rgba(106,212,225,0.25) 0%, rgba(106,212,225,0.05) 100%);
  position: relative;
}
.hero-title{ animation: fadeSlide .9s .1s ease both; }
@keyframes fadeSlide { from{ opacity:0; transform: translateY(10px) } to{ opacity:1; transform:none } }

.hero-bg{
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(0,0,0,.03) 1px, transparent 1px);
  background-size: 24px 24px;
  z-index: -1;
  animation: floatDots 10s linear infinite;
}
@keyframes floatDots { from{ background-position:0 0 } to{ background-position: 48px 48px } }

.waves{
  position:absolute; bottom:-1px; left:0; right:0; height:120px; pointer-events:none;
}

.hero-card{
  border: 1px solid rgba(0,0,0,.06);
}

.card-action .icon-wrap{
  width: 48px; height: 48px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(0,140,158,.08);
  color: var(--turquesa);
  font-size: 1.25rem;
  transform: translateZ(0);
}
.hover-rise:hover{ transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.08)!important; }
.card-action:hover .icon-wrap{ transform: rotate(6deg) scale(1.05); }
.card-action:hover .card-title{ color: var(--naranja)!important; }

.stat{ background: #fff; }

.cta{
  background: linear-gradient(135deg, var(--turquesa), #23b8c9);
  border: 0;
  box-shadow: 0 20px 40px rgba(0,140,158,.25);
}
footer img{ background: #fff; }

/* Scroll top button */
.scroll-top{
  position: fixed; right: 16px; bottom: 16px;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--turquesa); color:#fff; border:0; outline:0;
  box-shadow: 0 8px 24px rgba(0,140,158,.35);
  opacity:0; visibility:hidden; transform: scale(.9);
  z-index: 999;
}
.scroll-top.show{ opacity:1; visibility:visible; transform: scale(1); }
.scroll-top:hover{ filter: brightness(1.05); }


.hero-about {
  background: linear-gradient(180deg, rgba(106,212,225,0.25) 0%, rgba(106,212,225,0.05) 100%);
  position: relative;
  min-height: 40vh;
}
.timeline {
  position: relative;
  border-left: 3px solid var(--turquesa);
  margin-left: 2rem;
  padding-left: 2rem;
}
.timeline-item {
  position: relative;
  margin-bottom: 2rem;
}
.timeline-item::before {
  content: "";
  position: absolute;
  left: -1.1rem;
  top: 0.4rem;
  width: 16px;
  height: 16px;
  background: var(--turquesa);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(106,212,225,0.3);
}
.timeline-content h5 {
  color: var(--turquesa);
  font-weight: 600;
}
.timeline-content p {
  margin-bottom: 0;
  color: #666;
}


/* seccion adopta */
.pet-card img {
  height: 260px;
  object-fit: cover;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.pet-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0,0,0,.1);
  transition: all .3s ease;
}

.bg-turq {
  background: var(--turquesa) !important;
}

.modal-body img {
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,.1);
}


/* HISTORIAS */

.story-card {
  overflow: hidden;
  border-radius: 14px;
  transition: all .3s ease;
}

.story-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 35px rgba(0,0,0,.1);
}

.story-img-wrap {
  position: relative;
  height: 250px;
  overflow: hidden;
}

.story-before,
.story-after {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .5s ease;
}

.story-before {
  opacity: 1;
}

.story-card:hover .story-before {
  opacity: 0;
}

.story-after {
  opacity: 0;
}

.story-card:hover .story-after {
  opacity: 1;
}

.modal-body img {
  border-radius: 10px;
  box-shadow: 0 5px 25px rgba(0,0,0,.1);
}

/* NOTICIAS */

.news-card img {
  height: 240px;
  object-fit: cover;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.news-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0,0,0,.1);
  transition: all .3s ease;
}

.news-card .card-body h5 {
  font-size: 1.05rem;
}

.news-card .btn {
  margin-top: auto;
}

.modal-body img {
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,.1);
}


/* PARTICIPA */

form .form-control, form .form-select {
  border-radius: 10px;
  border-color: #dee2e6;
  box-shadow: none;
}

form .form-control:focus, form .form-select:focus {
  border-color: var(--turquesa);
  box-shadow: 0 0 0 0.15rem rgba(0,140,158,.25);
}

#formParticipa .btn {
  transition: all .3s ease;
}

/* CONTACTO */

form .form-control, form .form-select, textarea {
  border-radius: 10px;
  border-color: #dee2e6;
  box-shadow: none;
}

form .form-control:focus {
  border-color: var(--turquesa);
  box-shadow: 0 0 0 0.15rem rgba(0,140,158,.25);
}

iframe {
  width: 100%;
  height: 480px;
  border: none;
  display: block;
  filter: grayscale(10%) brightness(97%);
}
@media (max-width: 768px) {
  iframe {
    height: 360px;
  }
}


/* DONA */

#donar ul li {
  margin-bottom: .3rem;
}

#donar img {
  border-radius: 14px;
  box-shadow: 0 5px 25px rgba(0,0,0,.1);
}

blockquote {
  font-style: italic;
  line-height: 1.6;
  color: var(--turquesa);
  position: relative;
  padding: 0 20px;
}

blockquote::before, blockquote::after {
  content: "“";
  font-size: 3rem;
  position: absolute;
  color: rgba(0,140,158,.2);
}

blockquote::after {
  content: "”";
  right: 10px;
  bottom: -20px;
}

.bg-light .btn-suma:hover {
  transform: translateY(-3px);
}


.story-img-wrap {
  position: relative;
  overflow: hidden;
}
.story-before,
.story-after {
  width: 100%;
  transition: opacity 0.5s ease;
}
.story-after {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.story-img-wrap:hover .story-after {
  opacity: 1;
}


/* =====================================
   SIDEBAR MÓVIL (mostrar / ocultar)
   ===================================== */
@media (max-width: 768px) {
  .admin-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 240px;
    background-color: #212529;
    color: #fff;
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    z-index: 1050;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.4);
  }

  .admin-sidebar.show {
    transform: translateX(0);
  }

  /* Fondo semitransparente detrás del menú */
  .sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1049;
    display: none;
  }

  .sidebar-overlay.active {
    display: block;
  }
}