/* =========================================================
   01) BASE / RESET
========================================================= */
:root{
  /* Fondo armónico suave */
  --app-bg: #F3F7FF;

  /* Bordes / sombras */
  --line: rgba(15,23,42,.08);
  --shadow-1: 0 10px 26px rgba(15,23,42,.08);
  --shadow-2: 0 16px 36px rgba(15,23,42,.12);
}

html, body { overflow-x: hidden; }
* { box-sizing: border-box; }

img, video, picture, svg, canvas, iframe{
  max-width: 100%;
  height: auto;
  display: block;
}

/* Espacio por navbar fixed */
body{ padding-top: 74px; }

/* =========================================================
   02) FONDO UNIFICADO (1 SOLO COLOR)
========================================================= */
body.bg-app{
  min-height: 100vh;
  background: var(--app-bg);
  background-repeat: no-repeat;
}

/* Opcional */
section{ position: relative; }

/* =========================================================
   03) NAVBAR (Glass)
========================================================= */
.navbar-glass{
  background: rgba(255,255,255,.72);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 8px 22px rgba(15,23,42,.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.navbar-brand{
  font-size: 1rem;
  white-space: nowrap;
}
.navbar-toggler{ padding: 0.25rem 0.5rem; }

/* =========================================================
   04) HEADER / HERO
========================================================= */
.header-shell{ background: transparent; }

.hero-card{
  background: #fff;
  border: 1px solid rgba(15,23,42,.06);
}

/* Horarios (chips) */
.horarios-box{
  display:flex;
  flex-wrap:wrap;
  gap:12px 20px;
  align-items:center;
}
.horario-item{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  background:#fff;
  border:1px solid rgba(13,110,253,.15);
  border-radius:999px;
  font-size:0.9rem;
  box-shadow:0 6px 14px rgba(15,23,42,.06);
}
.horario-item i{
  color: var(--bs-primary);
  font-size:0.9rem;
}

/* =========================================================
   05) ABOUT / SOBRE MI (premium)
========================================================= */
.about-section{ position: relative; }

.about-card{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 22px;
  box-shadow: 0 14px 40px rgba(15,23,42,.08);
  backdrop-filter: blur(6px);
}

.about-kicker{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .65rem;
  border-radius: 999px;
  font-size: .9rem;
  color: rgba(13,110,253,.95);
  background: rgba(13,110,253,.08);
  border: 1px solid rgba(13,110,253,.18);
}

.about-title{ letter-spacing: -.02em; }
.about-lead{ line-height: 1.55; }

.about-badges{
  display:flex;
  justify-content:center;
  gap:.5rem;
  flex-wrap:wrap;
}

.trust-chip{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.45rem .75rem;
  border-radius:999px;
  font-size:.85rem;
  background:#fff;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 8px 18px rgba(15,23,42,.06);
  color: rgba(15,23,42,.75);
}
.trust-chip i{ color: var(--bs-primary); }

/* Features (institucional) */
.feature-pill{
  display:flex;
  align-items:center;
  gap:.85rem;
  padding:.85rem .95rem;
  border-radius:18px;
  background:#fff;
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 10px 22px rgba(15,23,42,.06);
  height: 100%;
}
.feature-ico{
  width:42px;
  height:42px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background: rgba(13,110,253,.10);
  border: 1px solid rgba(13,110,253,.18);
  flex:0 0 auto;
}
.feature-ico i{ color: var(--bs-primary); }

.feature-title{
  font-weight:600;
  line-height:1.2;
}
.feature-sub{
  font-size:.85rem;
  color: rgba(15,23,42,.62);
}

/* Avatar */
.avatar-wrap{
  width: 270px;
  height: 270px;
  border-radius: 999px;
  padding: 6px;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(135deg,#a3d5ff,#0d6efd) border-box;
  border: 6px solid transparent;
  box-shadow: 0 10px 26px rgba(15,23,42,.12);
  overflow: hidden;
}
.avatar-img{
  width: 100%;
  height: 100%;
  border-radius: 999px;
  object-fit: cover;
}

/* (Opcional) Si todavía usás mini-pill en algún lado */
.mini-pill{
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.55rem .7rem;
  border-radius:14px;
  background:#fff;
  border: 1px solid var(--line);
  box-shadow: 0 8px 18px rgba(15,23,42,.06);
  font-size:.9rem;
}
.mini-pill i{ color: var(--bs-primary); }

/* =========================================================
   06) COMPONENTES GENERALES
========================================================= */
.soft-card{
  background:#fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-1);
}

/* =========================================================
   07) PATOLOGÍAS
========================================================= */
.pato-card{
  width:100%;
  text-align:left;
  border: 1px solid var(--line);
  background:#fff;
  border-radius:18px;
  padding:0;
  overflow:hidden;
  box-shadow: var(--shadow-1);
  transition: transform .15s ease, box-shadow .15s ease;
  cursor:pointer;
}
.pato-card img{
  width:100%;
  height:170px;
  object-fit:cover;
}
.pato-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}
.pato-card:focus-visible{
  outline: 3px solid var(--bs-primary);
  outline-offset: 4px;
}

/* =========================================================
   08) MODALES
========================================================= */
.modal.biome-modal .modal-content{
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 14px 40px rgba(15,23,42,.22);
}
.modal.biome-modal img{
  max-width: 55%;
  max-height: 260px;
  object-fit: contain;
  margin: 0 auto;
}

/* Backdrop */
.modal-backdrop.show{
  background-color: rgba(15,23,42,.55);
}
@supports (backdrop-filter: blur(2px)){
  .modal-backdrop.show{
    backdrop-filter: blur(2px);
    background-color: rgba(15,23,42,.45);
  }
}

/* =========================================================
   09) TURNOS + INSTAGRAM
========================================================= */
.turnos-section .soft-card{ border-radius: 22px; }

/* Kicker / pill */
.turnos-kicker{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.35rem .65rem;
  border-radius:999px;
  font-size:.9rem;
  color: rgba(13,110,253,.95);
  background: rgba(13,110,253,.08);
  border: 1px solid rgba(13,110,253,.18);
}

.turnos-pill{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.4rem .7rem;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  box-shadow:0 8px 18px rgba(15,23,42,.06);
  color: rgba(15,23,42,.75);
  white-space:nowrap;
}

/* Info items */
.turnos-info{
  display:flex;
  flex-direction:column;
  gap:.85rem;
}

.turno-item{
  display:flex;
  gap:.85rem;
  padding:.85rem .95rem;
  border-radius:18px;
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 10px 22px rgba(15,23,42,.06);
}

.turno-ico{
  width:42px;
  height:42px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background: rgba(13,110,253,.10);
  border: 1px solid rgba(13,110,253,.18);
  flex:0 0 auto;
}
.turno-ico i{ color: var(--bs-primary); }

.turno-title{
  font-weight:600;
  line-height:1.15;
}
.turno-sub{
  font-size:.92rem;
  color: rgba(15,23,42,.70);
}

/* Instagram */
.insta-card .insta-kicker{
  font-size:.85rem;
  color: rgba(15,23,42,.60);
  letter-spacing:.01em;
}

.insta-badge{
  width:48px;
  height:48px;
  border-radius:14px;
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  box-shadow:0 10px 22px rgba(15,23,42,.06);
  display:grid;
  place-items:center;
}
.insta-logo{
  width:34px;
  height:auto;
  object-fit:contain;
}

.insta-chips{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}

.insta-chip{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.45rem .7rem;
  border-radius:999px;
  background: rgba(13,110,253,.06);
  border: 1px solid rgba(13,110,253,.14);
  color: rgba(15,23,42,.72);
  font-size:.86rem;
}
.insta-chip i{ color: var(--bs-primary); }

.insta-cta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  border-radius:18px;
  background: linear-gradient(
    90deg,
    rgba(13,110,253,.08) 0%,
    rgba(255,255,255,.85) 55%,
    rgba(13,110,253,.06) 100%
  );
  border: 1px solid rgba(13,110,253,.14);
}

/* =========================================================
   10) MAPA
========================================================= */
.map-wrap iframe{
  width: 100%;
  height: 260px;
  border: 0;
  border-radius: 16px;
}

/* =========================================================
   11) LOGO / ASSETS
========================================================= */
.biome-logo{
  width: 54px;
  height: auto;
  border-radius: 10px;
  background:#fff;
  box-shadow: 0 6px 16px rgba(15,23,42,.12);
}

/* =========================================================
   12) WHATSAPP FAB
========================================================= */
.wa-fab{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 66px;
  height: 66px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--bs-primary);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 12px 28px rgba(15,23,42,.22);
  z-index: 1060;
  transition: transform .18s ease, box-shadow .18s ease;
}
.wa-fab i{ font-size: 1.6rem; }
.wa-fab:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(15,23,42,.28);
  color:#fff;
}
.modal-open .wa-fab{ display:none; }

/* =========================================================
   13) FOOTER
========================================================= */
.site-footer{ background: transparent; }

.site-footer .footer-nav .nav-link{
  color: #6c757d;
  transition: color .15s ease;
}
.site-footer .footer-nav .nav-link:hover{ color:#0d6efd; }

.ms-badge{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.35rem .6rem;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 4px 14px rgba(0,0,0,.06);
  transition:transform .15s ease, box-shadow .15s ease;
}
.ms-badge:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 22px rgba(0,0,0,.10);
}
.ms-badge img{
  width:36px;
  height:36px;
  object-fit:contain;
  border-radius:8px;
  background:#fff;
}
.ms-badge .ms-name{
  font-weight:600;
  letter-spacing:.02em;
  color:#0d6efd;
}

/* =========================================================
   14) RESPONSIVE (TODO al final)
========================================================= */

/* Preferencia de reducción de movimiento */
@media (prefers-reduced-motion: reduce){
  .wa-fab{ transition: none; }
  .pato-card{ transition: none; }
}

/* <= 992px */
@media (max-width: 992px){
  .navbar-brand{ font-size: 0.9rem; }
}

/* <= 576px */
@media (max-width: 576px){
  .horarios-box{
    flex-direction: column;
    align-items: flex-start;
  }

  .wa-fab{
    right: 14px;
    bottom: 14px;
    width: 58px;
    height: 58px;
  }
  .wa-fab i{ font-size: 1.4rem; }

  .about-card{ padding: 1.25rem !important; }
  .feature-pill{ padding: .75rem .85rem; }

  .insta-cta{
    flex-direction: column;
    align-items: stretch;
  }
  .turno-item{ padding: .75rem .85rem; }

  .site-footer .footer-nav{ order:2; }
  .site-footer .ms-badge{ order:3; margin-inline:auto; }
  .site-footer p{ order:1; }
}

/* <= 390px */
@media (max-width: 390px){
  .modal.biome-modal .modal-title{ font-size: 1rem; }
  .modal.biome-modal .modal-dialog{ margin: .75rem; }
}