/* Estilos propios de la página "Profesionales". Reusa los bloques de Turnos
   (turnos.css: .pasos-section, .faq-list, .hero-ctas-turnos) y los de main.css
   (.section-head, .gallery-grid, .btn). Acá solo va lo nuevo. */

/* ================= HERO (texto + foto de la recepción) ================= */
.pro-hero{ border-top:none; padding-top:clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.pro-hero-grid{
  display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(2rem, 4vw, 4rem); align-items:center;
}
.pro-hero h1{ font-size:clamp(1.9rem, 1.3rem + 2.1vw, 2.9rem); }
.pro-hero .lede{ font-size:1.12rem; }
.pro-hero .hero-ctas-turnos{ margin:1.5rem 0 0; justify-content:flex-start; }
.pro-datos{
  list-style:none; margin:2rem 0 0; padding:1.5rem 0 0; border-top:1px solid var(--line);
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:.9rem 1.5rem;
}
.pro-datos li{ display:flex; gap:.6rem; align-items:flex-start; font-size:.95rem; font-weight:500; color:var(--gris-oscuro); }
.pro-datos .ico{ flex:none; width:1.35rem; height:1.35rem; color:var(--verde); margin-top:.1rem; }
.pro-hero-foto{
  margin:0; border-radius:1.25rem; overflow:hidden; box-shadow:var(--shadow);
  border:1px solid var(--line); position:relative;
}
.pro-hero-foto img{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; }
.pro-hero-foto::after{ /* banda verde de la marca, igual que los pies de foto */
  content:""; position:absolute; left:0; right:0; bottom:0; height:5px; background:var(--verde);
}

/* ================= QUÉ OFRECEMOS ================= */
.instalaciones-grid{
  list-style:none; margin:0; padding:0;
  display:grid; gap:1.25rem;
  grid-template-columns:repeat(3, minmax(0, 1fr));
}
.instalacion{
  display:flex; gap:1rem; align-items:flex-start;
  background:var(--blanco); border:1px solid var(--line); border-radius:.75rem;
  padding:1.25rem 1.3rem;
}
.instalacion-ico{
  flex:none; display:flex; align-items:center; justify-content:center;
  width:2.6rem; height:2.6rem; border-radius:50%;
  background:var(--verde-wash-strong); color:var(--gris-oscuro);
}
.instalacion-ico svg{ width:1.35rem; height:1.35rem; }
.instalacion h3{ font-size:1.05rem; margin:.1rem 0 .3rem; }
.instalacion p{ font-size:.92rem; margin:0; max-width:none; }

.pro-galeria{ margin-top:2.5rem; }

/* ================= DISPONIBILIDAD ================= */
.pro-disponibilidad{
  display:grid; grid-template-columns:1fr 1fr; gap:1.5rem 3rem; align-items:center;
}
.pro-disponibilidad h2{ margin-bottom:.4em; }
.pro-disponibilidad p{ margin:0; }
.pro-horario{
  margin:0; display:grid; gap:.75rem;
}
.pro-horario div{
  background:var(--blanco); border:1px solid var(--line); border-left:4px solid var(--verde);
  border-radius:.75rem; padding:.9rem 1.2rem;
}
.pro-horario dt{ font-size:.82rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--gris-claro); }
.pro-horario dd{ margin:.15rem 0 0; font-size:1.05rem; font-weight:600; color:var(--gris-oscuro); }

/* ================= CONTACTO ================= */
.pro-contacto{
  display:grid; grid-template-columns:1.2fr 1fr; gap:1.5rem 2.5rem; align-items:center;
}
.pro-contacto h2{ margin-bottom:.4em; }
.pro-contacto p{ margin:0; }
.pro-contacto-acciones{ display:flex; flex-wrap:wrap; gap:.9rem; justify-content:flex-end; }

@media (max-width: 1100px){
  .instalaciones-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px){
  .pro-hero-grid, .pro-disponibilidad, .pro-contacto{ grid-template-columns:1fr; }
  .pro-contacto-acciones{ justify-content:flex-start; }
}
@media (max-width: 600px){
  .instalaciones-grid, .pro-datos{ grid-template-columns:1fr; }
}