:root{
    --brand:#1D303D;           /* turquesa suave */
    /* --brand:#0ea5a5; */
    --brand-2:#0b8b8b;
    --ink:#1f2937;             /* gris oscuro */
    --muted:#6b7280;           /* gris medio */
    --bg:#f8fafc;              /* fondo claro */
}

html, body { scroll-behavior:smooth; color:var(--ink); }
body { background:var(--bg); }
.oculto {
  opacity: 0;
}
.visible {
  opacity: 1;
}

/* Navbar */
header{
     background: linear-gradient(90deg, var(--brand), var(--brand-2));
    position: fixed;
    z-index: 10;
    width:100%;
}
.nav-desktop{
    padding: 5px 0;
    display:flex;
    justify-content: space-between;
    align-items: center;
}
.nav-desktop .logo img{
    width:100%;
}
.nav-desktop .logo{
    flex-basis:10%;
}
.nav-desktop .navegador{
    flex-basis: 30%;
    
}
.nav-desktop .navegador nav{
    display:flex;
    justify-content: space-around;
}
.nav-desktop .navegador a{
    color:white;
    text-decoration: none;
    
    padding:2px 7px; border-radius: 5px;;
}
.nav-desktop .navegador a.contact{
    background-color:#1D303D ;
}
.nav-mobile{
    display:none;
}
.nav-mobile .navbar-nav a{
    color:white;
    text-align: center;
}
.nav-mobile .navbar-brand{
    width:30%;
}
.nav-mobile .navbar-brand img{
    width:100%;
}

/* Hero */
.hero {
    background: linear-gradient(180deg, rgba(14,165,165,.08), rgba(14,165,165,0)),
                url('https://images.unsplash.com/photo-1580281657527-47d5b0b8c7b7?q=80&w=1600&auto=format&fit=crop') center/cover no-repeat;
    border-bottom: 1px solid #e5e7eb;
}
.hero .overlay {
    backdrop-filter: blur(2px);
    background: rgba(255,255,255,.65);
}
.hero img{
    width:100%;
}
.hero p{
    font-size:23px;
}

.chip {
    display:inline-flex; align-items:center; gap:.5rem;
    background: white; color: var(--brand-2);
    border:1px solid #dbeafe; border-radius:999px; padding:.4rem .8rem; font-weight:600;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

/* Contenedor del slider del héroe */
.hero-figure{
  position: relative;
  width: 100%;
  /* Mantén proporción agradable en desktop; en móvil la altura se ajusta al contenido */
  aspect-ratio: 4 / 5;
  max-width: 520px;            /* opcional, para que no crezca demasiado */
  margin-inline: auto;
}

/* Imágenes apiladas para crossfade */
.hero-figure img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;         /* mantiene transparencia y no recorta */
  opacity: 0;
  transition: opacity 800ms ease;  /* duración del fundido */
  will-change: opacity;
}

/* Imagen visible */
.hero-figure img.is-active{
  opacity: 1;
}



/* Tarjeta doctor */
.formacion .doctor-card{
    width:70%;
    margin:0 auto;
}
.doctor-card {
    border:0; border-radius:1rem; overflow:hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,.06);
}
.doctor-card .badge {
    background: var(--brand); 
}

/* Tratamientos */
.t-card{
    border:1px solid #eef2f7; border-radius:1rem; transition:.2s transform, .2s box-shadow;
    height:100%;
    background:white;
}
.t-card:hover{ transform: translateY(-4px); box-shadow:0 10px 24px rgba(0,0,0,.08); }
.t-icon img{
    width:100%;
}
.t-icon{
    width:3rem; height:3rem; display:grid; place-items:center;
    border-radius:.8rem; background: rgba(14,165,165,.1); color:var(--brand-2);
    font-size:1.4rem;
}

/* Resultados */
#resultados{
    margin-top:100px;
}
#resultados .enlace{
    display: flex;
    justify-content: center;
}
#resultados a{
    background-color:transparent;
    border:1px solid gray;
    color:gray;
    text-decoration:none;
}
#resultados a:hover{
    background-color:var(--brand);
    color:white;
}
.thumb{
    position:relative; overflow:hidden; border-radius:1rem; cursor:pointer; background:#fff;
    border:1px solid #eef2f7;
}
.thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .45s ease; }
.thumb:hover img{ transform:scale(1.05); }
.tag-before-after{
    position:absolute; top:.6rem; left:.6rem; z-index:2;
    background:rgba(31,41,55,.85); color:#fff; font-size:.75rem; padding:.25rem .5rem; border-radius:.5rem;
}

/* Sección genérica */
section{ padding: 4rem 0; }
.section-title{ font-weight:800; letter-spacing:.2px; }
.section-lead{ color:var(--muted); }

/* CTA */
.cta {
    background: linear-gradient(90deg, var(--brand), var(--brand-2));
    /* background-color:#1D303D ; */
    color:#fff; border-radius:1rem;
}
.cta .btn-light{
    color:var(--brand-2);
}

/* Footer */
footer{ color:#6b7280; }

/*========== RESPONSIVE ========== */
@media (max-width: 768PX) {
    .hero p{
        font-size:20px;
    }
    #onepage{
        padding-top:100px;
    }
    .nav-desktop{
    display:none;
    }
    .nav-mobile{
    display:block;
    }
    .formacion .doctor-card{
    width:100%;
    }
}

/* Accesibilidad: si el usuario prefiere menos movimiento, no animamos */
@media (prefers-reduced-motion: reduce){
  .hero-figure img{ transition: none; }
}