/* ==========================================================================
   PROFESIONALES – Fundación Juntos Contigo
   Archivo específico de la página. No sobreescribe header/footer globales.
   ========================================================================== */

/* ----------------------------- Variables */
:root{
  --gap: 28px;
  --card-bg: #fff;
  --radius: 14px;
  --shadow: 0 10px 28px rgba(0,0,0,.06);
}

/* ----------------------------- Wrapper / Intro */
.pro-wrapper{ padding:40px 0 80px; }
.pro-intro{ max-width:960px; margin:0 auto 28px; text-align:center; }
.pro-intro h1{
  font-family:'Martel Sans',sans-serif;
  font-size:34px; font-weight:800; color:#232323;
  margin:0 0 6px;
}
.pro-intro p{
  font-family:'Ubuntu',sans-serif;
  font-size:16px; color:#444; margin:0; line-height:1.6;
}

/* ----------------------------- Grid */
.pro-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); }
@media (max-width:1100px){ .pro-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .pro-grid{ grid-template-columns:1fr; } }

/* ----------------------------- Sección */
.pro-section-title{
  grid-column:1/-1; margin:8px 0 -12px;
  font-family:'Martel Sans',sans-serif; font-weight:900; font-size:22px; color:#232323;
}

/* ----------------------------- Card */
.pro-card{
  display:flex; flex-direction:column;
  background:var(--card-bg); border-radius:var(--radius);
  overflow:hidden; border:1px solid rgba(0,0,0,.06); box-shadow:var(--shadow);
  transition:transform .18s ease, box-shadow .18s ease;
}
@media (hover:hover){
  .pro-card:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(0,0,0,.08); }
}

/* ----------------------------- Media (Foto 4:5 / Video 9:16) */
.pro-media{ position:relative; width:100%; background:#f6f6f6; overflow:hidden; }

/* Ratio nativo */
.pro-media.img-45{ aspect-ratio:4/5; }
.pro-media.video-916{ aspect-ratio:9/16; }

/* Fallback si el navegador no soporta aspect-ratio */
@supports not (aspect-ratio: 1 / 1){
  .pro-media.img-45::before,
  .pro-media.video-916::before{ content:''; display:block; }
  .pro-media.img-45::before{ padding-top:125%; }
  .pro-media.video-916::before{ padding-top:177.78%; }
  .pro-media > *{ position:absolute; inset:0; }
}

.pro-media img, .pro-media video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}

/* ----------------------------- Click-to-book overlay */
.pro-link{ text-decoration:none; color:inherit; }
.pro-media a.pro-link{ display:block; height:100%; width:100%; position:absolute; inset:0; }

@media (hover:hover){
  .pro-media:hover::after{
    content:"Reservar hora";
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    background:rgba(0,0,0,.28);
    color:#fff; font-family:'Ubuntu',sans-serif; font-weight:700; font-size:14px; letter-spacing:.4px;
  }
}

/* Accesibilidad focus */
.pro-link:focus-visible{ outline:3px solid #2b5cab; outline-offset:2px; border-radius:6px; }

/* ----------------------------- Body / Tipografía */
.pro-body{ padding:18px 18px 20px; }

/* NOMBRE: mayor, en mayúsculas (pedido del cliente) */
.pro-name{
  font-family:'Martel Sans',sans-serif;
  font-size:22px; font-weight:900; color:#111;
  margin:0 0 6px; text-transform:uppercase; line-height:1.2;
}
@media (min-width:768px){ .pro-name{ font-size:26px; } }
.pro-name a{ border-bottom:1px solid transparent; }
@media (hover:hover){
  .pro-card:hover .pro-name a{ border-color:rgba(0,0,0,.15); }
}

/* ESPECIALIDAD: menor que el nombre */
.pro-role{
  font-family:'Ubuntu',sans-serif;
  font-size:14px; font-weight:700; color:#2b5cab; margin:0 0 10px; letter-spacing:.2px;
}

/* DESCRIPCIÓN */
.pro-desc{
  font-family:'Ubuntu',sans-serif;
  font-size:14px; color:#373737; line-height:1.7;
  margin:0; text-align:justify;
}

/* ----------------------------- Impresión (evitar cortes) */
@media print{
  .pro-card{ break-inside:avoid; page-break-inside:avoid; }
}

/* ----------------------------- Footer (no se sobreescribe; sólo limpieza) */
footer .upper-footer, footer .lower-footer{ clear:both; }