/* === RESET BÁSICO === */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* === ESTILOS GENERALES === */
:root{
  --color-panel-colapsable: #212121;
  --color-iconos-contactos: #6fcb9f;
  --color-iconos-info: #9e379f;
}
body {
  background: #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", sans-serif;
}

/* ====================================================================== CONTENEDOR PRINCIPAL === */
.container {
  position: relative;
  width: 412px;
  max-width: 100%;
  height: 100vh;      /* ocupa toda la pantalla disponible */
  max-height: 823px;  /* no excede el tamaño del celu deseado */
  background: #222;
  overflow: hidden;
  box-shadow: 0 0 15px rgba(0,0,0,0.4);
}

/* ====================================================================== SECCIÓN DE IMAGEN (A) === */
.image-section {
  position: relative;
  height: 40%;
  width: 100%;
  overflow: hidden;
}

.image-section img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Texto vertical como marca de agua */
.marca-agua {
  position: absolute;
  top: 45%;
  left: 0;
  transform: translate(-35%, -50%) rotate(-90deg);
  font-size: 50px;
  font-family: "Momo Trust Display", cursive; /* usa el nombre que diga Google Fonts */
  font-weight: 400;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 3px;
  pointer-events: none;
  user-select: none;

  /* BORDE REAL SIN AFECTAR TRANSPARENCIA */
  -webkit-text-stroke: 1px grey;
}


/* ====================================================================== PANEL INTERMEDIO (B) === */

#titulo {
  font-family: "Momo Trust Display", cursive; /* usa el nombre que diga Google Fonts */
  font-weight: 400;
  font-size: 30px;
}

.panel {
  position: relative;
  width: 100%;
  height: 70%;
  background: #e0e5ec;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  padding: 1.2rem;
  margin-top: -20px; /* solapa sobre la imagen */
  z-index: 2;

  /* 🌟 EFECTO VISUAL SOMBRA 🌟 */
  box-shadow: 0 -6px 12px rgba(0,0,0,0.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  /* Centramos el contenido */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.dots-container {
  display: flex;
  gap: 0.6rem;
  margin: 0.1rem 0;
  justify-content: center;
}

.dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #bbb;
  /* cursor: pointer; */
  transition: transform 0.2s, background 0.2s;
}

/* .dot:hover {
  transform: scale(1.2);
} */

.dot.active {
  background: #444;
}

/* Caja interna con neumorfismo hacia adentro */
.pet-card {
  margin-top: 1rem;
  padding: 1.8rem 2.2rem;
  border-radius: 20px;
  background: #e0e5ec; /* color base neutro para el neumorfismo */
  width: 100%;
  height: 55%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;

    /* Estado inicial: sin neumorfismo */
  box-shadow:
    inset 0px 0px 0px #b8c0cc,
    inset 0px 0px 0px #ffffff;

  animation: hundirSombras 0.6s ease-out forwards;
  animation-delay: 0.1s; /* ajustá este valor según tu panel */
}

@keyframes hundirSombras {
  0% {
    box-shadow:
      inset 0px 0px 0px #b8c0cc,
      inset 0px 0px 0px #ffffff;
  }
  100% {
    box-shadow:
      inset 8px 8px 16px #b8c0cc,
      inset -8px -8px 16px #ffffff;
  }
}

/* Filas de texto */
.pet-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
}

/* Texto “NOMBRE:”, “EDAD:”, etc. */
.pet-label {
  font-family: "Momo Trust Display", cursive;
  font-weight: 400;
  letter-spacing: 0.05em;
  font-size: 1.1rem;
}

/* Valores dinámicos */
.pet-value {
  font-weight: 400;
}

/* Nota expandible */
.pet-row-note {
  max-height: 120px;        /* subilo a 150/180 si querés más alto */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.pet-note {
  margin: 0;
  flex: 1;
}

/* ====================================================================== PANEL INFERIOR (C) === */
.bottom-sheet {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50%;
  background: var(--color-panel-colapsable);
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  transition: transform 0.4s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 3;
}

/* === CÍRCULO CON HUELLA === */
.bottom-sheet .tab {
  position: absolute;
  top: -18px;
  width: 36px;
  height: 36px;
  background: #111;
  border-radius: 50%; /* este valor permite tener mas o menos contenido*/
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 6px rgba(0,0,0,0.3);
  transition: transform 0.4s ease;
}

.bottom-sheet .tab #paw {
  font-size: 25px;
  color:white;
  transition: transform 0.7s ease;
}

/* 🔄 Giro de la huellita cuando el panel está expandido */
.bottom-sheet.expanded .tab #paw {
  transform: rotate(180deg);
  color: var(--color-iconos-contactos);
}

@keyframes paw-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* La animación solo corre cuando el panel está colapsado */
.bottom-sheet.collapsed .tab {
  animation: paw-bounce 1s ease-in-out 2s infinite;
}

/* Contenido interno del panel negro */
.bottom-sheet .content {
  color: white;
  text-align: center;
  padding: 2rem 1rem 1rem;
  width: 100%;
}

.texto-panel-colapsable {
  margin-bottom: 30px;
}

/* === COMPORTAMIENTO DEL PANEL INFERIOR === */

/* Estado colapsado */
.bottom-sheet.collapsed {
  transform: translateY(70%);
  /* ↑ Aumentar este valor (ej. 80%) para más cerrado
     o reducirlo (ej. 50%) para dejarlo más abierto */
}

/* Estado expandido */
.bottom-sheet.expanded {
  transform: translateY(0);
}

/* === SECCION CONTACTOS === */

.buttons {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 35px;
}

/* Propiedades para el Neumorfismo */
.contactos {
 width: 250px;
 height: 100px;
 border-radius: 20px;
 background: #212121;

 /* Estado inicial casi plano */
  box-shadow: 
    0px 0px 0px rgb(12, 12, 12),
    0px 0px 0px rgb(70, 70, 70);

  /* Animación suave para "salir desde adentro" */
  animation: levantarSombras 0.6s ease-out forwards;
  animation-delay: 0.2s; /* ⬅️ Retardo */
}

@keyframes levantarSombras {
  0% {
    box-shadow:
      0px 0px 0px rgb(12, 12, 12),
      0px 0px 0px rgb(70, 70, 70);
  }
  100% {
    box-shadow:
      8px 8px 20px rgb(12, 12, 12),
      -8px -8px 20px rgb(70, 70, 70);
  }
}

.contactos, .info {
  display: flex;
  align-items: center;    /* Centrado horizontal */
  justify-content: center;/* Centrado vertical */
  gap: 60px;              /* Espacio entre iconos */
}

#whapp,
#phone {
  font-size: 50px;   /* tamaño del icono */
  color: var(--color-iconos-contactos);      /* color inicial */
  cursor: pointer;
}

#info,
#dev {
  font-size: 40px;   /* tamaño del icono */
  color: var(--color-iconos-info);      /* color inicial */
  cursor: pointer;
}

.hidden {
  display: none !important;
}

.conAmor {
  color: grey;
  font-size: 12px;
}

/* ===== Loader pantalla completa ===== */

.loader-overlay {
  position: fixed;
  inset: 0; /* top, right, bottom, left: 0 */
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(224, 229, 236, 0.85); 
  backdrop-filter: blur(2px);
  z-index: 9999; /* por encima de todo */
}

.paw-spin {
  animation: pawrotate 1s linear infinite;
  color: #ff7a66; /* tu color huellitas */
}

@keyframes pawrotate {
  to {
    transform: rotate(360deg);
  }
}

/* Ocultar scrollbar en navegadores basados en WebKit */
.pet-row-note::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* Ocultar scrollbar en Firefox */
.pet-row-note {
  scrollbar-width: none; 
}

/* === Adaptación móvil === */
@media (max-width: 480px) {

  .container {
    width: 100%;
    min-height: 100vh;
    border-radius: 0;
    box-shadow: none;
  }
}