/* Ficha pública del especialista (/especialista/{slug}): M03 Pro y M04 estándar
   (04-mapa-fichas-y-cuenta.md, sistema visual v1.3).
   Una sola plantilla y una sola retícula; solo cambia la identidad:
   - .esp-pro: fondo blanco con el halo de marca, borde tint-200 y borde superior
     de 4 px primary, con elev-1;
   - .esp-std: blanca con borde border, sin halo ni acento primary.
   Fondo blanco siempre, navy solo en títulos y únicamente tokens de :root
   (style.css). Se carga después de leaflet.css: así los controles del mini mapa
   toman las medidas de abajo. */

/* Página y migas */
.esp-page { background: var(--white); padding: 20px 0 64px; }
.esp-migas { margin: 0 0 20px; font-size: 14px; line-height: 21px; color: var(--text-2); }
.esp-migas ol { list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; }
.esp-migas li { min-width: 0; overflow-wrap: anywhere; }
.esp-migas li + li::before { content: '/'; margin: 0 8px; color: var(--text-2); }
.esp-migas [aria-current="page"] { color: var(--text); }

/* Identidad */
.esp-ident { display: flex; gap: 32px; align-items: center; padding: 48px 24px; border-radius: var(--r-modal); }
.esp-pro .esp-ident {
  background: var(--halo), var(--white);
  border: 1px solid var(--tint-200); border-top: 4px solid var(--primary);
  box-shadow: var(--elev-1);
}
.esp-std .esp-ident { background: var(--white); border: 1px solid var(--border); }
.esp-foto {
  flex: none; width: 160px; height: 160px; border-radius: var(--r-modal);
  object-fit: cover; box-shadow: var(--elev-2); background: var(--tint-100);
}
/* Sin foto, iniciales: nada que parezca una imagen cargando. */
.esp-ini {
  display: flex; align-items: center; justify-content: center;
  background: var(--tint-100); color: var(--navy);
  font: 600 48px/1 var(--font-head); letter-spacing: 0;
}
.esp-id { flex: 1 1 auto; min-width: 0; }
.esp-badge { margin: 0 0 8px; }
.esp-id h1 {
  font-family: var(--font-head); font-size: 40px; line-height: 48px; color: var(--navy);
  overflow-wrap: anywhere;
}
.esp-negocio { margin-top: 4px; font-size: 20px; line-height: 28px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.esp-lugar { margin-top: 4px; font-size: 16px; line-height: 24px; color: var(--text-2); overflow-wrap: anywhere; }
.esp-sellos { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }

/* Sellos (C10): 12/18, pastilla. El borde transparente iguala el alto del de
   certificado, que lleva contorno. */
.esp-sello {
  display: inline-block; padding: 4px 10px; border-radius: var(--r-pill);
  border: 1px solid transparent; font: 500 12px/18px var(--font-body);
  text-decoration: none;
}
.esp-sello-pro { background: var(--tint-100); color: var(--badge-pro-text); }
.esp-sello-ver { background: var(--success-bg); color: var(--success); }
.esp-sello-cert { background: var(--tint-100); color: var(--primary); border-color: var(--tint-200); }
a.esp-sello-cert:hover { color: var(--primary); text-decoration: underline; }
/* El enlace mide 28: el ::after lleva el objetivo a 44, solo en vertical. */
a.esp-sello-cert { position: relative; }
a.esp-sello-cert::after { content: ''; position: absolute; left: 0; right: 0; top: -8px; bottom: -8px; }

/* Cuerpo: una columna; desde 1024, principal 8/12 y contacto 4/12. En el DOM
   el contacto va primero, así en móvil sale antes de la biografía. */
.esp-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 48px 0 32px; }
@media (min-width: 1024px) {
  .esp-cuerpo { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); grid-template-areas: "principal contacto"; }
  .esp-principal { grid-area: principal; }
  .esp-contacto { grid-area: contacto; position: sticky; top: 104px; align-self: start; }
}
.esp-principal { min-width: 0; }

/* Panel de contacto: blanco con borde y elev-2. Botones a todo el ancho; sin
   barra fija de WhatsApp sobre el contenido. */
.esp-contacto {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r-card);
  padding: 24px; box-shadow: var(--elev-2); min-width: 0;
}
.esp-contacto h2 { margin: 0 0 16px; font-size: 20px; line-height: 28px; }
.esp-contacto .btn { display: flex; width: 100%; justify-content: center; flex-wrap: wrap; column-gap: 6px; row-gap: 0; }
.esp-contacto .btn + .btn { margin-top: 12px; }
.esp-contacto p { margin-top: 16px; }
.esp-contacto h2 + p { margin-top: 0; }
.esp-ig { min-width: 0; overflow-wrap: anywhere; font-weight: 400; }
.esp-nota { font-size: 14px; line-height: 20px; color: var(--text-2); }

/* Secciones de la columna principal */
.esp-sec + .esp-sec { margin-top: 40px; }
.esp-sec h2 { margin: 0 0 16px; font-family: var(--font-head); font-size: 28px; line-height: 36px; color: var(--navy); }
.esp-sec h3 { margin: 24px 0 12px; font-size: 18px; line-height: 26px; }
.esp-sec > p { overflow-wrap: anywhere; }
.esp-sec > p + p, .esp-sec > dl + p { margin-top: 16px; }
.esp-desc { max-width: 68ch; font-size: 16px; line-height: 28px; }
.esp-servicios { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.esp-servicios li {
  max-width: 100%; padding: 6px 14px; border-radius: var(--r-pill);
  background: var(--tint-100); color: var(--text); font-size: 16px; line-height: 24px;
  overflow-wrap: anywhere;
}
.esp-vacio { color: var(--text-2); }
.esp-formacion { border-top: 1px solid var(--border); }
.esp-formacion > div { display: grid; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.esp-formacion dt { font-size: 14px; line-height: 20px; color: var(--text-2); }
.esp-formacion dd { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
@media (min-width: 768px) {
  .esp-formacion > div { grid-template-columns: 8rem minmax(0, 1fr); gap: 16px; align-items: baseline; }
}
.esp-dir { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--text); }
.esp-sec > .esp-dir + .esp-lugar { margin-top: 4px; }

/* Mini mapa de la ubicación exacta: 320 de alto. isolation deja las capas de
   Leaflet (z-index 400-1000) debajo de la cabecera pegada. */
.esp-mapa {
  height: 320px; margin: 16px 0; border: 1px solid var(--border-strong);
  border-radius: var(--r-card-sm); isolation: isolate;
}
.esp-mapa[hidden] { display: none; }
/* Zoom: botones de 40 con un objetivo táctil de 44 (::after se sale 2 px por
   lado) y foco visible. */
.leaflet-container.esp-mapa .leaflet-bar a {
  position: relative; width: 40px; height: 40px; line-height: 40px; font-size: 22px;
}
.leaflet-container.esp-mapa .leaflet-bar a::after { content: ''; position: absolute; inset: -2px; }
.leaflet-container.esp-mapa .leaflet-bar a:focus-visible { outline: 3px solid var(--focus); outline-offset: 0; z-index: 1; }
/* Pin propio: gota con la punta hacia abajo. Pro en primary con el centro
   blanco y halo cian (cyan al 40 %); el resto, blanco con borde primary. */
.esp-pin { background: none; border: 0; }
.esp-pin span {
  position: relative; display: block; width: 100%; height: 100%;
  border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: var(--white); border: 4px solid var(--primary); box-shadow: var(--elev-2);
}
.esp-pin-pro span { background: var(--primary); border: 0; box-shadow: 0 0 0 4px var(--cyan-halo), var(--elev-2); }
.esp-pin-pro span::after {
  content: ''; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px;
  margin: -4px 0 0 -4px; border-radius: 50%; background: var(--white);
}

/* Cómo llegar, cierre y pie */
.esp-rutas { display: flex; flex-wrap: wrap; gap: 8px; }
.esp-cierre { margin-top: 32px; font-size: 16px; line-height: 24px; font-weight: 600; }
.esp-pie { margin-top: 24px; font-size: 12px; line-height: 18px; color: var(--text-2); text-align: center; }

/* 404 */
.esp-404 { padding-top: 48px; padding-bottom: 64px; }
.esp-404 h1 { margin-bottom: 24px; }

@media (max-width: 767px) {
  .esp-ident { flex-direction: column; align-items: flex-start; gap: 20px; padding: 32px 20px; }
  .esp-foto { width: 112px; height: 112px; }
  .esp-ini { font-size: 36px; }
  .esp-id h1 { font-size: 32px; line-height: 40px; }
  .esp-cuerpo { padding: 32px 0 24px; }
  .esp-sec h2 { font-size: 24px; line-height: 32px; }
}