/* ============================================================
   Clave — deep-page styles (normativa, medicos, precios).
   Built on the Clave design tokens; pairs with site.css + components.css.
   ============================================================ */

/* Deep-page hero */
.pg-hero { background: var(--surface-muted); border-bottom: 1px solid var(--border-subtle); }
.pg-hero__inner { max-width: var(--container-max); margin: 0 auto; padding: clamp(36px, 5vw, 76px) var(--container-pad) clamp(34px, 4.5vw, 60px); }
.pg-hero__h1 { font-size: clamp(32px, 4.4vw, 50px); font-weight: var(--fw-semibold); color: var(--text-strong); letter-spacing: var(--tracking-tight); line-height: 1.08; margin-top: 12px; text-wrap: balance; max-width: 820px; }
.pg-hero__lead { font-size: var(--text-lg); color: var(--text-muted); margin-top: 16px; line-height: var(--leading-relaxed); max-width: 660px; }

/* Breadcrumb */
.breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: var(--text-sm); color: var(--text-muted); }
.breadcrumb a:hover { color: var(--brand-primary); }
.breadcrumb span { color: var(--text-subtle); }

/* Prose / article */
.prose { max-width: 760px; margin: 0 auto; }
.prose > h2 { font-size: clamp(24px, 3vw, 33px); font-weight: var(--fw-semibold); color: var(--text-strong); letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); margin: 44px 0 8px; scroll-margin-top: 96px; }
.prose > h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--text-xl); font-weight: var(--fw-semibold); color: var(--text-strong); margin: 26px 0 6px; }
.prose p { font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--text-body); margin: 10px 0; }
.prose p.lead-answer { font-size: var(--text-lg); color: var(--text-strong); font-weight: var(--fw-medium); }
.prose ul { margin: 12px 0; padding-left: 4px; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.prose ul li { position: relative; padding-left: 26px; font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--text-body); }
.prose ul li::before { content: ""; position: absolute; left: 4px; top: 9px; width: 8px; height: 8px; border-radius: 2px; background: var(--clave-lime); }
.prose strong { color: var(--text-strong); }
.prose a { color: var(--text-link); font-weight: var(--fw-medium); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border-default); }
.prose a:hover { text-decoration-color: var(--text-link); }

/* Definition cards (the jargon, explained) */
.norm-grid { max-width: 760px; margin: 22px auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.norm-card { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 18px 20px; box-shadow: var(--shadow-sm); }
.norm-card__term { font-size: var(--text-2xs); font-weight: var(--fw-semibold); color: var(--brand-primary); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.norm-card__def { font-size: var(--text-base); color: var(--text-body); margin-top: 5px; line-height: var(--leading-normal); }

/* Inline reassurance callout (navy) */
.callout { max-width: 760px; margin: 30px auto; background: var(--surface-inverse); color: #fff; border-radius: var(--radius-xl); padding: 28px 30px; }
.callout .mk-eyebrow { color: var(--clave-lime); }
.callout h3 { color: #fff; font-size: var(--text-2xl); font-weight: var(--fw-semibold); margin-top: 8px; letter-spacing: var(--tracking-snug); }
.callout p { color: var(--navy-200); margin-top: 8px; font-size: var(--text-md); line-height: var(--leading-relaxed); }
.callout .btn { margin-top: 18px; }

/* Small editorial note (placeholder flag) */
.pg-note { max-width: 760px; margin: 0 auto 6px; font-size: var(--text-sm); color: var(--text-muted); font-style: italic; }
.pg-note--center { text-align: center; }

/* Founders (medicos) */
.founders { max-width: 920px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.founder { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); padding: 16px 16px 28px; box-shadow: var(--shadow-sm); overflow: hidden; }
.founder__photo { margin: 0 0 18px; aspect-ratio: 3 / 4; border-radius: calc(var(--radius-xl) - 6px); overflow: hidden; background: var(--navy-100); }
.founder__photo img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center top; }
.founder__photo--ines img { object-position: 40% 12%; transform: scale(0.8); }
.founder__photo--julio { background: #fff; }
.founder__photo--julio img { object-fit: contain; object-position: center center; padding: 10px 14px 0; }
.founder__avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--navy-100); color: var(--navy-700); display: inline-flex; align-items: center; justify-content: center; font-weight: var(--fw-semibold); font-size: var(--text-lg); }
.founder__name { font-size: var(--text-xl); font-weight: var(--fw-semibold); color: var(--text-strong); margin-top: 0; }
.founder__role { font-size: var(--text-sm); color: var(--brand-primary); font-weight: var(--fw-medium); }
.founder__bio { font-size: var(--text-base); color: var(--text-muted); margin-top: 10px; line-height: var(--leading-relaxed); }

/* Comparison table (precios) */
.cmp { max-width: var(--container-max); margin: 0 auto; overflow-x: auto; }
.cmp table { width: 100%; border-collapse: collapse; min-width: 640px; }
.cmp th, .cmp td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--border-subtle); font-size: var(--text-base); }
.cmp thead th { font-size: var(--text-md); font-weight: var(--fw-semibold); color: var(--text-strong); }
.cmp tbody th { font-weight: var(--fw-medium); color: var(--text-body); }
.cmp td { text-align: center; color: var(--text-body); }
.cmp td:first-child, .cmp th:first-child { text-align: left; }
.cmp .cmp__yes { color: var(--success-500); }
.cmp .cmp__no { color: var(--text-subtle); }
.cmp tbody tr:hover td, .cmp tbody tr:hover th { background: var(--surface-muted); }

@media (max-width: 640px) {
  .norm-grid, .founders { grid-template-columns: 1fr; }
}

/* ---- Demo page ---- */
.demo-grid { max-width: var(--container-max); margin: 0 auto; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: start; }
.demo-aside { display: flex; flex-direction: column; gap: 18px; }
.demo-wa { display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--success-500); color: #fff; font-weight: var(--fw-semibold); font-size: var(--text-md); padding: 16px 20px; border-radius: var(--radius-md); transition: background var(--duration-fast) var(--ease-standard); }
.demo-wa:hover { background: var(--success-600); }
.demo-steps { display: flex; flex-direction: column; gap: 14px; }
.demo-step { display: flex; gap: 13px; align-items: flex-start; }
.demo-step__n { width: 30px; height: 30px; flex: none; border-radius: var(--radius-md); background: var(--brand-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: var(--text-sm); font-weight: var(--fw-semibold); }
.demo-step__t { font-size: var(--text-base); font-weight: var(--fw-semibold); color: var(--text-strong); }
.demo-step__b { font-size: var(--text-sm); color: var(--text-muted); margin-top: 2px; line-height: var(--leading-normal); }
.demo-trust { font-size: var(--text-sm); color: var(--text-muted); display: flex; align-items: center; gap: 8px; }
.demo-trust svg { color: var(--success-500); }

/* ---- Form ---- */
.frm { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-2xl); box-shadow: var(--shadow-md); padding: 28px; }
.frm__title { font-size: var(--text-xl); font-weight: var(--fw-semibold); color: var(--text-strong); }
.frm__sub { font-size: var(--text-sm); color: var(--text-muted); margin-top: 4px; }
.frm__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
.frm__field { display: flex; flex-direction: column; gap: 6px; }
.frm__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.frm__field--full { grid-column: 1 / -1; }
.frm__label { font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--text-body); }
.frm__input, .frm__select, .frm__textarea { font-family: var(--font-sans); font-size: var(--text-base); color: var(--text-strong); background: var(--surface-page); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 11px 13px; width: 100%; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }
.frm__input:focus, .frm__select:focus, .frm__textarea:focus { outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(43,96,168,0.18); }
.frm__textarea { resize: vertical; min-height: 84px; }
.frm__submit { margin-top: 18px; }
.frm__submit[disabled] { cursor: wait; opacity: 0.75; }
.frm__error { display: none; font-size: var(--text-sm); color: var(--danger-600, #b42318); margin-top: 12px; line-height: var(--leading-normal); }
.frm.is-error .frm__error { display: block; }
.frm__note { font-size: var(--text-2xs); color: var(--text-subtle); margin-top: 12px; line-height: var(--leading-normal); }
.frm__success { display: none; text-align: center; padding: 26px 8px; }
.frm.is-sent .frm__success { display: block; }
.frm.is-sent .frm__title, .frm.is-sent .frm__sub, .frm.is-sent form { display: none; }
.frm__success-icon { width: 54px; height: 54px; border-radius: 50%; background: var(--success-50); color: var(--success-600); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.frm__success h3 { font-size: var(--text-xl); font-weight: var(--fw-semibold); color: var(--text-strong); }
.frm__success p { font-size: var(--text-base); color: var(--text-muted); margin-top: 6px; }

/* ---- Product page split ---- */
.prod-split { max-width: var(--container-max); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.prod-split--rev .prod-split__art { order: 2; }
.prod-split__art { perspective: 1600px; }
.prod-split__list { display: flex; flex-direction: column; gap: 18px; margin-top: 22px; }

@media (max-width: 860px) {
  .demo-grid { grid-template-columns: 1fr; gap: 28px; }
  .demo-aside { order: -1; }
  .prod-split { grid-template-columns: 1fr; gap: 30px; }
  .prod-split--rev .prod-split__art, .prod-split__art { order: -1; max-width: 520px; }
}
@media (max-width: 480px) {
  .frm__grid { grid-template-columns: 1fr; }
}