/*
 * Shared, direction-neutral base for every concept. Keep it tiny: resets,
 * accessibility helpers and the placeholder style. All visual design lives in
 * styles.css so the three concepts stay genuinely different.
 */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font-body); line-height: 1.55; text-rendering: optimizeLegibility; }
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.12; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
.skip-link { position: absolute; left: -9999px; top: 0; }
.skip-link:focus { left: 1rem; top: 1rem; z-index: 100; background: var(--ink); color: var(--ground); padding: .5rem .75rem; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Placeholder for information the client has not supplied yet. Visible on purpose. */
.ph { display: inline-block; padding: .05em .45em; border: 1.5px dashed currentColor; border-radius: .35em; font-style: normal; opacity: .78; }
.ph-block { display: grid; place-items: center; min-height: 12rem; border: 2px dashed color-mix(in srgb, var(--ink) 35%, transparent); border-radius: 1rem; color: color-mix(in srgb, var(--ink) 70%, transparent); text-align: center; padding: 1.5rem; font-size: .95rem; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/*
 * Image slot: where a real photo goes. Use it even when the photo exists
 * (on the <img>) so QA can check every design plans for images:
 *   <figure class="ph-image" data-image-slot="portrait" style="aspect-ratio: 4 / 5">
 *     <span>Foto del profesional</span>
 *   </figure>
 *   <img data-image-slot="portrait" src="../../assets/…" alt="…">
 * Slots: portrait (the professional), facility (consultorio, equipo, fachada), team, other.
 */
/* Draft-content badge: content the designer proposed for the client to confirm. */
.draft { display: inline-flex; align-items: center; gap: .35em; padding: .2em .6em; border-radius: 999px; font: 600 .72rem/1.2 var(--font-body); letter-spacing: .02em; color: var(--ink); background: color-mix(in srgb, var(--accent) 35%, var(--ground)); border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); vertical-align: middle; }
[data-draft="true"] { position: relative; }

.ph-image {
  position: relative;
  display: grid;
  place-items: end center;
  min-height: 10rem;
  margin: 0;
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  background:
    radial-gradient(120% 90% at 30% 20%, color-mix(in srgb, var(--primary) 26%, var(--ground)) 0%, transparent 60%),
    radial-gradient(90% 80% at 80% 90%, color-mix(in srgb, var(--accent) 30%, var(--ground)) 0%, transparent 55%),
    linear-gradient(160deg, color-mix(in srgb, var(--primary) 12%, var(--ground)) 0%, color-mix(in srgb, var(--primary) 30%, var(--ground)) 100%);
  color: var(--ink);
}
.ph-image::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: min(42%, 9rem);
  aspect-ratio: 1;
  opacity: 0.18;
  background: currentColor;
  -webkit-mask: var(--ph-icon) center / contain no-repeat;
  mask: var(--ph-icon) center / contain no-repeat;
}
.ph-image { --ph-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 7h3l2-2h6l2 2h3a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1Zm8 3a4 4 0 1 0 0 8 4 4 0 0 0 0-8Z'/></svg>"); }
.ph-image[data-image-slot="portrait"] { --ph-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-5 0-9 2.5-9 6v2h18v-2c0-3.5-4-6-9-6Z'/></svg>"); }
.ph-image > span {
  position: relative;
  margin: 0 0 0.9rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: var(--ground);
  font: 600 0.82rem/1.2 var(--font-body);
  color: var(--ink);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 12%, transparent);
}