/* ============================================================
   Estilos de las PÁGINAS DE SERVICIO — compartidos por todas.
   Se carga después de sitio.css y solo agrega lo propio de estas
   páginas. Un ajuste acá cambia las 8 a la vez.
   ============================================================ */

/* ---------- migas de pan ---------- */
.migas{max-width:1120px;margin:0 auto;padding:18px 22px 0;font-size:.86rem;color:var(--ink-mute)}
.migas a{color:var(--accent);text-decoration:none;font-weight:600}
.migas a:hover{text-decoration:underline}
.migas span{margin:0 7px;opacity:.5}

/* ---------- cabecera del servicio ---------- */
.serv-hero{position:relative;overflow:hidden;background:var(--bg-2);border-bottom:1px solid var(--line);padding:34px 22px 44px}
.serv-hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:38px;align-items:center;max-width:1120px;margin:0 auto}
.serv-hero-grid.sola{grid-template-columns:1fr;max-width:760px;text-align:center}
.serv-hero h1{font-family:var(--font-display);font-size:clamp(1.9rem,4.2vw,3rem);line-height:1.09;margin:10px 0 14px;color:var(--ink)}
.serv-hero h1 em{font-style:normal;color:var(--accent)}
.serv-hero p.bajada{font-size:1.05rem;color:var(--ink-soft);max-width:54ch;margin-bottom:22px}
.serv-hero-grid.sola p.bajada{margin-left:auto;margin-right:auto}

.precio-caja{display:inline-flex;align-items:baseline;gap:14px;background:var(--paper);border:1.5px solid var(--accent-soft-2);
  border-radius:var(--radius);padding:14px 22px;box-shadow:var(--shadow);margin-bottom:20px}
.precio-caja .val{font-family:var(--font-display);font-size:2rem;font-weight:800;color:var(--accent);white-space:nowrap}
.precio-caja .val.evaluar{font-size:1.35rem}
.precio-caja .det{font-size:.88rem;color:var(--ink-mute);line-height:1.35;text-align:left}

.serv-hero-foto{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:4/5}
.serv-hero-foto img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- los dos caminos: reservar (azul) / consultar (verde) ---------- */
.dos-caminos{display:flex;gap:12px;flex-wrap:wrap}
.serv-hero-grid.sola .dos-caminos{justify-content:center}

/* .camino / .caminos-grid se movieron a sitio.css el 17-ago-2026:
   la home tambien los usa y no carga este archivo. */

/* ---------- señales / motivos ---------- */
.senales{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:16px;margin-top:8px}
.senal{background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:14px;padding:16px 18px;box-shadow:var(--shadow)}
.senal h4{font-family:var(--font-display);font-size:1rem;margin:0 0 5px;color:var(--ink)}
.senal p{margin:0;font-size:.92rem;color:var(--ink-soft)}

/* ---------- qué incluye ---------- */
.incluye{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:11px;max-width:70ch}
.incluye li{display:flex;gap:11px;align-items:flex-start;font-size:1rem;color:var(--ink-soft)}
.incluye li::before{content:'✓';flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--accent-soft);
  color:var(--accent);font-weight:800;font-size:.78rem;display:grid;place-items:center;margin-top:2px}

/* ---------- listado de /servicios/ ---------- */
.serv-index{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:20px;margin-top:10px}

@media(max-width:820px){
  .serv-hero-grid{grid-template-columns:1fr;gap:26px}
  .serv-hero-foto{max-width:330px;margin:0 auto;aspect-ratio:1/1}
}