/* =====================================================================
   ESTILOS DE LA PÁGINA DE INICIO (index.html)
   ===================================================================== */

:root{
  --primary:#1f4e79;
  --accent:#2a7cc7;
  --bg:#f5f7fa;
  --text:#333;
  --radius:14px;
  --ease-suave: cubic-bezier(0.22, 1, 0.36, 1);
}

html{
  scroll-behavior: smooth;
  /* Los enlaces internos (#servicios, #contacto...) dejan libre el alto del
     encabezado fijo, para que el título de la sección no quede tapado */
  scroll-padding-top: 90px;
}

body{
  font-family: 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  padding-top: 0;
}

a{
  text-decoration: none;
}

h2{
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.5px;
}

h5{
  font-size: 17px;
  font-weight: 500;
  margin-bottom: 8px;
}

section{
  padding:80px 0;
}

.title{
  text-align:center;
  margin-bottom:40px;
}

/* ================= NAVBAR ================= */
.navbar{
  background: white !important;
  transition: 0.3s;
}

.custom-navbar{
  padding: 10px 0;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

/* Lo activa el script de index.html al hacer scroll */
.custom-navbar.scrolled{
  box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}

.logo-text{
  font-size: 20px;
  font-weight: 700;
  color: #111;
  margin: 0;
}

.navbar-nav{
  margin-left: auto;
  margin-right: 20px !important;
}

.nav-link{
  color: #111 !important;
  font-weight: 600;
  font-size: 17px;
  position: relative;
  transition: 0.3s;
}

.nav-link:hover{
  color: #0d6efd !important;
}

/* Subrayado animado al pasar el mouse */
.nav-link::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 0;
  height: 2px;
  background: currentColor;
  transition: width 0.3s var(--ease-suave), left 0.3s var(--ease-suave);
}

.nav-link:hover::after{
  left: 20%;
  width: 60%;
}

.btn-turnos{
  background: linear-gradient(135deg,#0d6efd,#4da3ff);
  color: white;
  border-radius: 14px;
  padding: 14px 30px;
  font-weight: 600;
  transition: 0.3s;
}

.btn-turnos:hover{
  background: linear-gradient(135deg,#0b5ed7,#1f8fff);
  color: white;
  transform: translateY(-2px);
}

.navbar-toggler{
  border: none;
  background: white;
}

.navbar-toggler i{
  font-size: 2rem;
  color: #0d6efd;
}

@media(max-width:991px){

  .navbar-collapse{
    margin-top: 20px;
    background: linear-gradient(
      180deg,
      rgba(42,124,199,0.97),
      rgba(110,180,255,0.96)
    );
    backdrop-filter: blur(16px);
    border-radius: 24px;
    padding: 40px 30px;
    animation: slideDown 0.35s ease;
  }

  .navbar-nav{
    gap: 22px;
  }

  .nav-link{
    letter-spacing: 1px;
  }

  .nav-link:hover{
    transform: scale(1.03);
  }

  .btn-turnos{
    margin-top: 25px;
    width: 100%;
    font-size: 1.1rem;
  }

}

@keyframes slideDown{
  from{ opacity:0; transform: translateY(-20px); }
  to{ opacity:1; transform: translateY(0); }
}

/* ================= HERO ================= */
.hero{
  min-height:100vh;
  background:url('img/hero.jpg') center/cover no-repeat;
  position:relative;
  display:flex;
  align-items:center;
  padding:110px 0 60px;   /* espacio para el navbar fijo */
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.6);
}

.hero-content{
  position:relative;
  color:white;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:40px;
}

.hero-text{
  flex:1;
}

.hero-image{
  flex:1;
  display:flex;
  justify-content:center;
  animation: heroEntrada 1s var(--ease-suave) backwards;
}

.hero-image img{
  width:100%;
  max-width:450px;
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,0.35);
  animation:bounce 3.5s ease-in-out infinite;
}

/* Entrada escalonada del texto del hero */
.hero-text > *{
  animation: heroEntrada 0.9s var(--ease-suave) backwards;
}
.hero-text > :nth-child(1){ animation-delay: 0.15s; }
.hero-text > :nth-child(2){ animation-delay: 0.3s; }
.hero-text > :nth-child(3){ animation-delay: 0.45s; }

.hero h1{
  font-size:60px;
  font-weight:700;
}

.btn-main{
  background:#ccc;
  border:none;
  padding:10px 25px;
  border-radius:25px;
  transition: background 0.3s, transform 0.3s;
}

.btn-main:hover{
  background:#fff;
  transform: translateY(-2px);
}

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

@keyframes heroEntrada{
  from{ opacity:0; transform: translateY(24px); }
  to{ opacity:1; transform: translateY(0); }
}

@media (max-width:991px){
  .hero{
    padding:100px 0 50px;
  }
  .hero-content{
    flex-direction:column;
    text-align:center;
    gap:25px;
  }
  .hero h1{
    font-size:42px;
  }
  .hero-image img{
    max-width:240px;
  }
}

/* ================= SERVICIOS ================= */
.service-card{
  background:#f8f9fb;
  border-radius:15px;
  padding:30px;
  transition:0.3s;
  height:100%;
  border:1px solid #eee;
  cursor:pointer;
}

.service-card:hover{
  transform:translateY(-5px);
  box-shadow:0 10px 25px rgba(0,0,0,0.08);
}

.service-icon{
  font-size: 28px;
  margin-bottom: 12px;
  transition: transform 0.3s var(--ease-suave);
}
.service-card:hover .service-icon{ transform: scale(1.1); }
.icon-blue{ color:#2a7cc7; }
.icon-red{ color:#e53935; }
.icon-pink{ color:#d81b60; }

.service-link{
  color:#2a7cc7;
  font-weight:500;
  text-decoration:none;
}

/* ================= CONFIANZA (contadores) ================= */
.trust-section{
  padding: 60px 0;
  background: #ffffff;
}

.trust-item h4{
  font-size: 28px;
  font-weight: 700;
  color: var(--primary);
}

.trust-item p{
  color: #6c757d;
}

/* ================= ICONOS DE TARJETAS ================= */
.icon-card{
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 16px;
  margin: 0 auto 15px auto;
  flex-shrink: 0;
  transition: 0.3s;
}

.card:hover .icon-card{
  transform: scale(1.1);
}

/* Paleta médica */
.blue{ background:#e7f1ff; color:#2a7cc7; }
.red{ background:#ffe7e7; color:#e53935; }
.green{ background:#e8f8ee; color:#28a745; }
.purple{ background:#f3e8ff; color:#6f42c1; }
.cyan{ background:#e6f9fb; color:#17a2b8; }
.yellow{ background:#fff4d6; color:#f4b400; }
.orange{ background:#fff0e6; color:#ff8800; }
.pink{ background:#ffe7f5; color:#d81b60; }
.magenta{ background:#fde7f3; color:#c2185b; }
.dark{ background:#f1f1f1; color:#444; }

/* Tarjetas de consultas */
#consultas .card{
  transition: transform 0.3s var(--ease-suave), box-shadow 0.3s;
}
#consultas .card:hover{
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(31,78,121,0.1) !important;
}

/* ================= ESTUDIOS ================= */
.estudio-card{
  background: #ffffff;
  border: 1px solid #e6edf5;
  border-radius: 14px;
  padding: 24px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 15px;
  transition: 0.25s;
}

.estudio-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(31,78,121,0.08);
}

.estudio-header{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  margin-bottom: 14px;
}

.estudio-header h5{
  margin: 0;
  text-align: left;
  flex: 1;
}

.estudio-header .icon-card{
  flex-shrink: 0;
}

.estudio-list{
  list-style: none;
  padding: 0;
  margin: 0;
}

.estudio-list li{
  font-size: 14.5px;
  color: #5f6c7b;
  padding: 6px 0;
  padding-left: 16px;
  position: relative;
}

.estudio-list li::before{
  content: "";
  width: 5px;
  height: 5px;
  background: #2a7cc7;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 11px;
}

/* ================= CIRUGÍAS ================= */
.cirugia-card{
  background: white;
  border-radius: 14px;
  padding: 22px;
  height: 100%;
  border: 1px solid #e6edf5;
  transition: 0.3s;
}

.cirugia-card:hover{
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

.cirugia-card h5{
  font-weight: 600;
  margin-bottom: 12px;
  color: #1f2d3d;
}

.cirugia-card ul{
  list-style: none;
  padding: 0;
  margin: 0;
}

.cirugia-card li{
  font-size: 14.5px;
  color: #5f6c7b;
  padding: 6px 0;
  padding-left: 16px;
  position: relative;
}

.cirugia-card li::before{
  content: "";
  width: 5px;
  height: 5px;
  background: #2a7cc7;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 12px;
}

/* ================= STAFF ================= */
.staff-section{
  background: linear-gradient(180deg,#f8f9fb,#eef2f7);
}

.staff-card{
  background: white;
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.35s ease;
  height: 100%;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
}

.staff-card:hover{
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}

.staff-img-wrap{
  overflow: hidden;
}

/* object-position top: no cortar la cabeza en las fotos */
.staff-img{
  width: 100%;
  height: 320px;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.6s var(--ease-suave);
}

.staff-card:hover .staff-img{
  transform: scale(1.04);
}

.staff-body{
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.staff-specialty{
  display: inline-block;
  background: rgba(42,124,199,0.1);
  color: var(--accent);
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 50px;
  font-weight: 600;
  margin-bottom: 10px;
}

.staff-name{
  color: #1f2d3d;
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 10px;
}

.staff-meta{
  font-size: 14px;
  color: #6c757d;
  line-height: 1.5;
  flex-grow: 1;
}

.staff-meta strong{
  color:#2c3e50;
}

.staff-coverage{
  display: inline-block;
  margin-top: 8px;
  font-weight: 500;
  color: #2a7cc7;
}

.staff-btn{
  width: 100%;
  background: linear-gradient(135deg,#2a7cc7,#4da3ff);
  color: white;
  border: none;
  padding: 12px;
  border-radius: 10px;
  margin-top: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.staff-btn:hover{
  background: linear-gradient(135deg,#1f4e79,#2a7cc7);
  color: white;
}

/* ================= ¿CÓMO FUNCIONA? (demostración animada) =================
   La lógica que cambia de paso está en como-funciona.js. Cada escena del
   celular se anima sola cuando recibe la clase "activa":
     .cf-objetivo  -> elemento que el "dedo" toca; su momento es --d
     .cf-tap       -> círculo del toque (va dentro del .cf-objetivo)
     .cf-aparece   -> elemento que aparece en el momento --d
   --cf-dur debe coincidir con DURACION_PASO de como-funciona.js. */
.how-section{
  padding: 80px 0;
}

.cf-demo{
  --cf-dur: 4s;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 48px;
  align-items: center;
  max-width: 960px;
  margin: 0 auto;
}

/* ---- Lista de pasos ---- */
.cf-pasos{ display: flex; flex-direction: column; gap: 10px; }

.cf-paso{
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  background: #fff;
  border: 1px solid #e3eaf3;
  border-radius: 14px;
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.4s var(--ease-suave);
}
.cf-paso:hover{ border-color: #bcd3ec; }
.cf-paso.activo{
  border-color: var(--accent);
  box-shadow: 0 10px 24px rgba(31,78,121,0.12);
  transform: translateX(6px);
}

.cf-paso-num{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: #eef4fb;
  color: #5f6c7b;
  transition: background 0.3s, color 0.3s;
}
.cf-paso.activo .cf-paso-num{ background: linear-gradient(45deg, #003a8f, #43adff); color: #fff; }
.cf-paso.hecho .cf-paso-num{ background: #e8f8ee; color: #1e7e34; }

.cf-paso-texto{ display: flex; flex-direction: column; }
.cf-paso-texto strong{ font-size: 15.5px; color: #1f2d3d; }
.cf-paso-texto small{ font-size: 13.5px; color: #5f6c7b; }

/* Barra que se llena mientras dura el paso */
.cf-paso-barra{
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, #003a8f, #43adff);
}
.cf-paso.activo .cf-paso-barra{ animation: cfBarra var(--cf-dur) linear forwards; }

.cf-acciones{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-top: 16px;
}
.cf-probar{
  background: linear-gradient(135deg, #0d6efd, #4da3ff);
  color: #fff;
  padding: 10px 20px;
  border-radius: 12px;
  font-weight: 600;
  transition: transform 0.3s;
}
.cf-probar:hover{ color: #fff; transform: translateY(-2px); }

/* ---- Celular dibujado ---- */
.cf-lado-celular{ display: flex; justify-content: center; }
.cf-celular{
  position: relative;
  width: 280px;
  height: 540px;
  padding: 12px;
  border-radius: 38px;
  background: #0f1c33;
  box-shadow: 0 24px 50px rgba(15,28,51,0.25);
}
.cf-celular::before{
  content: "";
  position: absolute;
  top: 18px;
  left: 50%;
  width: 70px;
  height: 6px;
  border-radius: 6px;
  background: #26354f;
  transform: translateX(-50%);
  z-index: 2;
}
.cf-pantalla{
  position: relative;
  height: 100%;
  border-radius: 28px;
  overflow: hidden;
  background: linear-gradient(180deg, #f3f8fd, #e9f0f7);
}
.cf-barra-sup{
  display: flex;
  align-items: center;
  gap: 8px;
  background: #003a87;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 30px 16px 12px;
}
.cf-barra-sup img{ width: 22px; height: 22px; border-radius: 4px; background: #fff; }
.cf-mini-stepper{ display: flex; justify-content: center; gap: 8px; padding: 12px 0 4px; }
.cf-mini-stepper i{ width: 22px; height: 5px; border-radius: 3px; background: #d5e0ec; transition: background 0.4s; }
.cf-mini-stepper i.hecho{ background: #2a7cc7; }

/* Escenas: una por paso, se superponen y solo se ve la activa */
.cf-escena{
  position: absolute;
  left: 14px;
  right: 14px;
  top: 100px;
  bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.45s, transform 0.45s var(--ease-suave);
  pointer-events: none;
}
.cf-escena.activa{ opacity: 1; transform: none; }

.cf-titulo{ margin: 0; font-weight: 700; font-size: 16px; color: #003a87; text-align: center; }
.cf-sub{ margin: -6px 0 2px; font-size: 12px; color: #5f6c7b; text-align: center; }

/* Paso 1: el DNI se escribe solo */
.cf-input{
  height: 44px;
  background: #fff;
  border: 2px solid #d5e0ec;
  border-radius: 10px;
  padding: 9px 12px;
  font-family: Consolas, 'Courier New', monospace;
  font-size: 16px;
  color: #1f2d3d;
}
.cf-escena.activa .cf-input{ border-color: #2a7cc7; }
.cf-tipeo{
  display: inline-block;
  width: 0;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
  border-right: 2px solid #2a7cc7;
}
.cf-escena.activa .cf-tipeo{ animation: cfTipeo 1.2s steps(8) 0.4s forwards, cfCursor 0.8s step-end infinite; }

.cf-btn{
  text-align: center;
  background: linear-gradient(135deg, #113fc8, #2a7cc7);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  padding: 11px;
  border-radius: 10px;
}
.cf-btn-verde{ background: linear-gradient(135deg, #28a745, #20c997); }
.cf-ok{ text-align: center; font-size: 13px; color: #1e7e34; background: #e8f8ee; border-radius: 8px; padding: 7px; }

/* Paso 2: especialidades */
.cf-grilla{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* Opción que ocupa toda la fila (nombres largos) */
.cf-opcion-ancha{ grid-column: 1 / -1; }
.cf-opcion{
  background: #fff;
  border: 1.5px solid #e3eaf3;
  border-radius: 9px;
  padding: 9px 4px;
  font-size: 12.5px;
  text-align: center;
  color: #1f2d3d;
}

/* Pasos 3 y 5: tarjeta del médico */
.cf-medico, .cf-resumen{
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1.5px solid #e3eaf3;
  border-radius: 12px;
  padding: 10px;
}
.cf-medico img, .cf-resumen img{ width: 46px; height: 46px; border-radius: 50%; object-fit: cover; object-position: top; }
.cf-medico span, .cf-resumen span{ display: flex; flex-direction: column; font-size: 13px; line-height: 1.3; }
.cf-medico small, .cf-resumen small{ font-size: 11.5px; opacity: 0.8; }

/* Paso 4: días y horarios */
.cf-dias{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cf-dia{
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  border: 1.5px solid #e3eaf3;
  border-radius: 10px;
  padding: 7px 0;
  font-weight: 700;
  font-size: 17px;
  color: #1f2d3d;
}
.cf-dia b{ font-size: 10px; opacity: 0.7; }
.cf-dia em{ font-style: normal; font-size: 9px; font-weight: 700; text-transform: uppercase; }
.cf-dia-feriado{ background: #fdecec; border-color: #f3b4b4; color: #b42318; }
.cf-horas{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cf-hora{
  background: #fff;
  border: 1.5px solid #e3eaf3;
  border-radius: 9px;
  padding: 8px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: #1f2d3d;
}

/* Paso 5: turno confirmado */
.cf-exito{ display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 6px; text-align: center; color: #003a87; }
.cf-check{
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: #fff;
  background: linear-gradient(135deg, #28a745, #20c997);
}
.cf-exito small{ color: #5f6c7b; font-size: 12px; }

/* ---- Toques y apariciones ---- */
.cf-objetivo{ position: relative; }
.cf-escena.activa .cf-objetivo{ animation: cfSeleccion 0.35s ease var(--d) forwards; }
.cf-escena.activa .cf-btn.cf-objetivo{ animation-name: cfPresion; }

.cf-tap{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  background: rgba(0,58,135,0.35);
  border: 2px solid rgba(255,255,255,0.9);
  opacity: 0;
  pointer-events: none;
}
.cf-escena.activa .cf-tap{ animation: cfToque 0.7s ease calc(var(--d) - 0.35s) forwards; }

.cf-aparece{ opacity: 0; transform: translateY(8px); }
.cf-escena.activa .cf-aparece{ animation: cfAparece 0.4s ease var(--d) forwards; }

@keyframes cfBarra{ to{ width: 100%; } }
@keyframes cfTipeo{ to{ width: 8ch; } }
@keyframes cfCursor{ 50%{ border-color: transparent; } }
@keyframes cfAparece{ to{ opacity: 1; transform: none; } }
@keyframes cfToque{
  0%{ opacity: 0; transform: scale(1.6); }
  40%{ opacity: 1; transform: scale(0.8); }
  100%{ opacity: 0; transform: scale(1.8); }
}
@keyframes cfSeleccion{
  0%{ transform: scale(1); }
  40%{ transform: scale(0.94); }
  100%{ transform: scale(1); background: #003a87; border-color: #003a87; color: #fff; }
}
@keyframes cfPresion{
  0%, 100%{ transform: scale(1); }
  40%{ transform: scale(0.94); }
}

@media (max-width: 991px){
  .cf-demo{ grid-template-columns: minmax(0, 1fr) 260px; gap: 28px; }
  .cf-celular{ width: 260px; height: 510px; }
}

/* ================= CTA ================= */
.cta-section{
  background: linear-gradient(90deg, #003a8f, #13adff);
  color: white;
  padding: 80px 0;
}

.cta-btn{
  display: inline-block;
  background: white;
  color: #003a8f;
  border: none;
  padding: 12px 25px;
  border-radius: 10px;
  font-weight: 600;
  transition: transform 0.3s var(--ease-suave), box-shadow 0.3s;
}

.cta-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.18);
}

/* ================= FOOTER ================= */
.footer{
  background: #0b1b33;
  color: #ccc;
  padding: 60px 0;
}

.footer h5{
  color: white;
  margin-bottom: 15px;
}

.footer-link{
  color: #ccc;
  text-decoration: none;
}

.footer-link:hover{
  color: #2a7cc7;
}

.social-icons a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-right: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: white;
  font-size: 18px;
  transition: 0.3s;
  text-decoration: none;
}

.footer-legal{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 20px;
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.12);
  font-size: 13px;
  color: #9aa8bb;
}

/* Copyright y créditos juntos, en una sola columna centrada */
.footer-legal { flex-direction: column; align-items: center; text-align: center; }

.social-icons a:hover{
  background: #2a7cc7;
  transform: translateY(-3px);
}

/* ================= ANIMACIÓN AL HACER SCROLL =================
   Agregar class="reveal" a un elemento para que aparezca al entrar en
   pantalla (lo maneja el script al final de index.html).
   Va al final para tener prioridad sobre otras transiciones. */
.reveal{
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  will-change: opacity, transform;
}
.reveal.active{
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1{ transition-delay: 0.1s; }
.reveal-delay-2{ transition-delay: 0.2s; }
.reveal-delay-3{ transition-delay: 0.3s; }
.reveal-delay-4{ transition-delay: 0.4s; }

/* Respeta a quienes tienen desactivadas las animaciones en su sistema */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  html{ scroll-behavior: auto; }
}

/* =====================================================================
   VERSIÓN CELULAR (hasta 767 px): página más corta y menos scroll
   En computadora no cambia nada.
   ===================================================================== */
.desliza-movil{ display: none; }

@media (max-width: 767px){

  section{ padding: 50px 0; }
  .title{ margin-bottom: 24px; }
  #consultas h2.mb-5, #estudios h2.mb-5, #cirugias h2.mb-5,
  .trust-section .mb-5, .how-section .mb-5{ margin-bottom: 1.5rem !important; }

  /* ---- Carruseles (Estudios y Cirugías): se deslizan de costado ---- */
  .carrusel-movil{
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 6px 0 16px;
  }
  .carrusel-movil::-webkit-scrollbar{ display: none; }
  .carrusel-movil > [class*="col-"]{
    flex: 0 0 80%;
    max-width: 80%;
    scroll-snap-align: center;
  }
  /* dentro del carrusel las tarjetas se ven siempre (sin esperar la animación de scroll) */
  .carrusel-movil > .reveal{ opacity: 1; transform: none; }

  .desliza-movil{
    display: block;
    text-align: center;
    font-size: 13px;
    color: #5f6c7b;
    margin: -8px 0 10px;
  }
  .desliza-movil i{ color: var(--accent); margin-right: 4px; }

  /* ---- Staff médico: uno debajo del otro, con la foto al costado ---- */
  .staff-lista{ --bs-gutter-y: 12px; }
  .staff-lista > [class*="col-"]{ flex: 0 0 100%; max-width: 100%; }
  .staff-lista .staff-card{ flex-direction: row; border-radius: 14px; }
  .staff-lista .staff-card:hover{ transform: none; }
  .staff-lista .staff-img-wrap{ flex: 0 0 104px; }
  .staff-lista .staff-img{ width: 104px; height: 100%; min-height: 150px; }
  .staff-lista .staff-body{ padding: 12px 14px; }
  .staff-lista .staff-specialty{ align-self: flex-start; font-size: 11px; padding: 3px 9px; margin-bottom: 6px; }
  .staff-lista .staff-name{ font-size: 15px; margin-bottom: 4px; }
  .staff-lista .staff-meta{ font-size: 12.5px; line-height: 1.4; }
  .staff-lista .staff-coverage{ margin-top: 4px; }
  .staff-lista .staff-btn{ padding: 8px; margin-top: 8px; font-size: 14px; }

  /* ---- Consultas: dos tarjetas por fila ---- */
  .grilla-2-movil{ --bs-gutter-x: 12px; --bs-gutter-y: 12px; }
  .grilla-2-movil > [class*="col-"]{ flex: 0 0 50%; max-width: 50%; }
  #consultas .card{ padding: 16px 10px !important; }
  #consultas .card .icon-card{ margin-bottom: 8px; }
  #consultas .card h5{ font-size: 14px; }
  #consultas .card .btn{ font-size: 13px; padding: 6px 8px; margin-top: 8px !important; }

  /* ---- Contadores: los tres en una fila ---- */
  .fila-3-movil > [class*="col-"]{ flex: 0 0 33.333%; max-width: 33.333%; }
  .trust-item h4{ font-size: 22px; }
  .trust-item p{ font-size: 13px; }

  /* ---- Servicios: ícono al costado del texto ---- */
  #servicios .row{ --bs-gutter-y: 12px; }
  .service-card{
    display: grid;
    grid-template-columns: 40px 1fr;
    column-gap: 14px;
    align-items: start;
    padding: 18px;
  }
  .service-card .service-icon{ grid-row: 1 / span 3; margin: 2px 0 0; font-size: 26px; }
  .service-card h5, .service-card p, .service-card .service-link{ grid-column: 2; }
  .service-card p{ margin-bottom: 6px; }

  /* ---- ¿Cómo funciona?: el celular arriba y los pasos abajo ---- */
  .cf-demo{ grid-template-columns: 1fr; gap: 24px; }
  .cf-lado-celular{ order: -1; }
  .cf-celular{ width: 240px; height: 460px; border-radius: 34px; }
  .cf-escena{ top: 96px; }
  .cf-paso{ padding: 10px 12px; }
  .cf-paso.activo{ transform: none; }
  .cf-paso-num{ width: 38px; height: 38px; font-size: 17px; }
  .cf-paso small{ display: none; }
  .cf-paso.activo small{ display: block; }

  /* ---- Pie: horarios y redes uno al lado del otro ---- */
  .footer .row:first-child > div:nth-child(3),
  .footer .row:first-child > div:nth-child(4){ flex: 0 0 50%; max-width: 50%; }
}