/* ============== ShowPets Surface System (L1/L2/L3) ============== */
:root{
  --sp-teal:#00a896;
  --sp-teal-d:#00887a;
  --sp-accent:#1e40af;
  --sp-title:#0f172a;
  --sp-text:#334155;
  --sp-shadow:0 10px 26px rgba(0,0,0,.08);
  --sp-border:1px solid rgba(0,0,0,.06);
}

/* Card base */
.sp-card{
  position:relative;
  border-radius:16px;
  border:var(--sp-border);
  box-shadow:var(--sp-shadow);
  overflow:hidden;
}

/* Capa de superficie con textura (usa ::before para no mezclar contenido) */
.sp-surface{ position:relative; }
.sp-surface::before{
  content:"";
  position:absolute; inset:0; z-index:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.90)),
    url('/wall02.png');
  background-size:cover;
}
.sp-surface > *{ position:relative; z-index:1; }

/* Niveles (ajustan la opacidad del velo) */
.sp-surface-l1::before{ background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.90)), url('/wall02.png'); background-size:cover; }
.sp-surface-l2::before{ background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.88)), url('/wall02.png'); background-size:cover; }
.sp-surface-l3::before{ background:linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,.86)), url('/wall02.png'); background-size:cover; }

/* Barra de acento superior (opcional) */
.sp-accent-bar{
  position:absolute; top:0; left:0; right:0; height:4px; z-index:2;
  background:linear-gradient(90deg, var(--sp-teal), var(--sp-accent));
  opacity:.9;
}

/* Hover para tarjetas clicables */
.sp-card-hover:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 36px rgba(0,0,0,.12);
}

/* Chip “DEMO” */
.sp-chip{
  position:absolute; top:10px; left:10px; z-index:3;
  background:#334155; color:#fff; font-weight:700;
  padding:4px 8px; border-radius:999px; font-size:.7rem; letter-spacing:.5px;
  box-shadow:0 2px 8px rgba(0,0,0,.2);
}

/* Badge DEV fijo */
.sp-badge-dev{
  position:fixed; top:10px; left:10px; z-index:1000;
  background:#6c757d; color:#fff; border-radius:6px;
  padding:2px 8px; font:600 12px/1 system-ui;
  box-shadow:0 2px 8px rgba(0,0,0,.25); letter-spacing:.5px;
}

/* Contenedor 16:9 para media */
.sp-media-16x9{ position:relative; width:100%; padding-top:56.25%; background:rgba(15,23,42,.06); }
.sp-media-16x9 > img,
.sp-media-16x9 > video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; border-bottom:1px solid rgba(0,0,0,.06); background:#0b1220;
}

/* Título con glow para fondos oscuros (wall01) */
.sp-title-glow{
  color:#e9f0ff;
  text-shadow:0 1px 0 rgba(0,0,0,.35), 0 2px 14px rgba(0,0,0,.25);
  font-weight:800;
}

/* Botón invitado */
.sp-btn-guest{
  background:rgba(255,255,255,.92);
  border:2px dashed var(--sp-teal);
  color:var(--sp-teal-d);
  font-weight:600;
}
.sp-btn-guest:hover{ background:#f1fffb; color:#006b5f; border-color:#006b5f; }

/* Text tokens */
.sp-text{ color:var(--sp-text); }
.sp-title{ color:var(--sp-title); }

/* Backdrop blur (opcional, desktop) */
@supports (backdrop-filter: blur(6px)){
  .sp-blur-6{ backdrop-filter:blur(6px); }
  .sp-blur-8{ backdrop-filter:blur(8px); }
}
/* ========= CONTRASTE DURO PARA TARJETAS DE SERVICIOS ========= */

/* Color base de texto dentro de la tarjeta */
.servicio-card,
.sp-card.servicio-card {
  color: #e6edf3; /* azul/gris claro legible */
}

/* Títulos y enlaces principales */
.servicio-card h5,
.servicio-card .sp-title {
  color: #f8fafc !important;            /* casi blanco */
  font-weight: 700;
  letter-spacing: .01em;
}
.servicio-card a:not(.btn) {
  color: #cfe2ff;                       /* link claro en dark */
  text-decoration: none;
}
.servicio-card a:not(.btn):hover { color:#ffffff; text-decoration:underline; }

/* Párrafos / descripciones */
.servicio-card p,
.servicio-card .sp-text {
  color: #cbd5e1 !important;            /* gris claro */
}

/* “text-muted” de Bootstrap baja demasiado la opacidad: forzamos */
.servicio-card .text-muted {
  --bs-text-opacity: 1 !important;
  color: #a9b8c7 !important;
  opacity: 1 !important;
}

/* Badges */
.servicio-card .badge.bg-light {
  background: rgba(255,255,255,.88) !important;
  color: #1f2937 !important;            /* texto oscuro sobre badge claro */
  border: 1px solid rgba(0,0,0,.08) !important;
}
.servicio-card .badge.bg-primary-emphasis,
.servicio-card .badge-distance {
  background: rgba(13,110,253,.20) !important;
  border: 1px solid rgba(13,110,253,.45) !important;
  color: #a9c7ff !important;
}

/* Botones outline legibles en dark */
.servicio-card .btn-outline-success { color:#8bddb0; border-color:#8bddb0; }
.servicio-card .btn-outline-success:hover { background:#198754; color:#fff; }
.servicio-card .btn-outline-primary { color:#9ec5fe; border-color:#9ec5fe; }
.servicio-card .btn-outline-primary:hover { background:#0d6efd; color:#fff; }
.servicio-card .btn-outline-danger  { color:#f2a7a7; border-color:#f2a7a7; }
.servicio-card .btn-outline-danger:hover  { background:#dc3545; color:#fff; }

/* Si alguna regla anterior (de style.css o Bootstrap) pone opacidades a la card,
   aseguremos que el texto no herede translucidez */
.servicio-card * { text-shadow: none; }

/* Opcional: hacer la tarjeta un poquito más sólida para que no se meta el “paw” del fondo */
.servicio-card {
  background: rgba(18,20,24,.96);   /* vidrio oscuro casi sólido */
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px;
  backdrop-filter: blur(6px);
}
/* Tamaño del badge del logo (ajusta a gusto) */
:root { --brand-size: 28px; }

/* El navbar ya tiene su color; el contenedor del logo lo hereda. */
.navbar, .navbar-dark { background-color: #1f2931 !important; } /* tu color actual */
.navbar .logo-wrap{
  width: var(--brand-size);
  height: var(--brand-size);
  display: inline-grid;
  place-items: center;
  border-radius: 8px;               /* esquinas redondeadas */
  background: inherit;              /* MISMO color que el navbar */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); /* marco tenue */
}

/* El PNG queda centrado y con esquinas suaves para ocultar cualquier matte */
.navbar .logo-img{
  max-width: 100%;
  max-height: 100%;
  display: block;
  border-radius: 6px;               /* suaviza bordes del PNG */
  background: transparent !important;
}

/* Ajuste fino de alineado vertical del texto con el logo */
.navbar .navbar-brand { line-height: 1; }

/* Overlay/reveal del sidebar (menú alfajor) */
#sidebar-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.35);
  display:none;
  z-index:1200;
}
#sidebar-overlay.show{ display:block; }