/* iDocYOU styles, ported from the approved phase 1 demo (brand book tokens). */
:root {--coral: #FF533D; --coral-ink: #E5402B; --coral-50: #FFE8E3; --cream: #FFF7F4;
  --black: #0E0E10; --white: #FFFFFF;
  --g100: #F4F5F7; --g200: #D9DDE3; --g400: #8A8F9E; --g600: #4B4F58;
  --ok: #1FAE5C; --ok-ink: #0F7A3C; --ok-50: #DCF3E3; --wa: #25D366;
  --r-sm: 8px; --r-md: 12px; --r-lg: 20px; --pill: 999px;
  --sh-sm: 0 1px 2px rgba(14,14,16,.05);
  --sh-md: 0 1px 2px rgba(14,14,16,.04), 0 12px 32px rgba(14,14,16,.08);
  --font: 'Manrope', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;}
* {box-sizing: border-box; margin: 0; padding: 0;}
body {font-family: var(--font); color: var(--black); background: var(--white); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased;}
a {color: inherit;}
button {font: inherit; cursor: pointer;}
img {display: block; max-width: 100%;}
:focus-visible {outline: 3px solid var(--coral-50); outline-offset: 2px;}
.logo {color: var(--black); display: inline-block;}
.kicker {display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--coral);}
.btn {display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; font-size: 15px; border-radius: var(--pill); padding: 12px 22px; border: 1.5px solid transparent; text-decoration: none; transition: background .15s, border-color .15s, transform .1s; white-space: nowrap;}
.btn:active {transform: translateY(1px);}
.btn svg {width: 18px; height: 18px;}
.btn-primary {background: var(--coral); color: #fff; box-shadow: 0 6px 16px rgba(255,83,61,.22);}
.btn-primary:hover {background: var(--coral-ink);}
.btn-dark {background: var(--black); color: #fff;}
.btn-dark:hover {background: #26262B;}
.btn-ghost {background: #fff; color: var(--black); border-color: var(--g200);}
.btn-ghost:hover {border-color: var(--black);}
.btn-wa {background: var(--wa); color: var(--black);}
.btn-wa:hover {background: #1FBE5A;}
.btn-sm {padding: 8px 16px; font-size: 14px;}
.btn[disabled] {opacity: .5; cursor: not-allowed;}
.pill {display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: var(--pill); white-space: nowrap;}
.pill::before {content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor;}
.pill.ok {background: var(--ok-50); color: var(--ok-ink);}
.pill.wait {background: var(--coral-50); color: #C23A27;}
.pill.neutral {background: var(--g100); color: var(--g600);}
.field {display: grid; gap: 6px;}
.field label {font-size: 13px; font-weight: 700;}
.field input, .field textarea, .field select {font: inherit; font-size: 15px; padding: 12px 14px; border: 1.5px solid var(--g200); border-radius: var(--r-sm); background: #fff; transition: border-color .15s, box-shadow .15s;}
.field textarea {min-height: 96px; resize: vertical;}
.field input:focus, .field textarea:focus {outline: none; border-color: var(--coral); box-shadow: 0 0 0 4px var(--coral-50);}
.field small {font-size: 12px; color: var(--g400);}
.card {background: #fff; border: 1px solid var(--g200); border-radius: var(--r-md);}
#toast {position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 20px); background: var(--black); color: #fff; padding: 12px 20px; border-radius: var(--pill); font-weight: 600; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 100;}
#toast.show {opacity: 1; transform: translate(-50%, 0);}
.wrap {max-width: 1120px; margin: 0 auto; padding: 0 28px;}
.hub {background: var(--cream); min-height: 100vh; padding: 72px 0;}
.hub h1 {font-size: 64px; font-weight: 800; letter-spacing: -.04em; line-height: 1; margin-top: 26px;}
.hub h1 em {font-style: normal; color: var(--coral);}
.hub .lead {font-size: 19px; color: var(--g600); max-width: 680px; margin-top: 16px;}
.hub .routes {display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 44px;}
.hub .route {display: flex; flex-direction: column; gap: 8px; background: #fff; border-radius: var(--r-lg); padding: 26px; text-decoration: none; box-shadow: var(--sh-md); border: 1.5px solid transparent; transition: border-color .15s, transform .15s;}
.hub .route:hover {border-color: var(--coral); transform: translateY(-3px);}
.hub .route .n {font-family: var(--mono); font-size: 12px; color: var(--coral);}
.hub .route b {font-size: 24px; font-weight: 800; letter-spacing: -.02em;}
.hub .route p {color: var(--g600); font-size: 15px;}
.hub .route span.go {margin-top: auto; padding-top: 10px; font-weight: 700; font-size: 14px;}
.hub .note {margin-top: 30px; font-size: 14px; color: var(--g600);}
.ms-head {display: flex; justify-content: space-between; align-items: center; padding: 14px 28px; border-bottom: 1px solid var(--g100); background: #fff; position: sticky; top: 0; z-index: 20;}
.ms-head .brand {display: flex; align-items: center; gap: 12px; text-decoration: none;}
.ms-head .brand small {font-size: 11px; color: var(--g400); border-left: 1px solid var(--g200); padding-left: 12px; line-height: 1.2;}
.ms-hero {background: var(--cream); padding: 56px 0 48px;}
.ms-hero .grid {display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: start;}
.ms-hero .who {display: flex; gap: 24px; align-items: center;}
.ms-hero .photo {width: 132px; height: 132px; border-radius: 50%; object-fit: cover; border: 4px solid #fff; box-shadow: var(--sh-md); flex: none;}
.verified {display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--ok-ink); background: var(--ok-50); padding: 4px 10px; border-radius: var(--pill);}
.verified::before {content: "✓";}
.ms-hero h1 {font-size: 46px; font-weight: 800; letter-spacing: -.035em; line-height: 1.05; margin-top: 10px;}
.ms-hero .spec {font-size: 18px; font-weight: 700; color: var(--coral); margin-top: 6px;}
.ms-hero .meta {display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 20px; font-size: 14px; color: var(--g600);}
.ms-hero .meta b {color: var(--black); font-weight: 600;}
.ms-hero .contact {background: #fff; border-radius: var(--r-lg); padding: 22px; box-shadow: var(--sh-md); display: grid; gap: 10px;}
.ms-hero .contact p {font-size: 14px; color: var(--g600);}
.stats {display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 36px; background: #fff; border-radius: var(--r-lg); box-shadow: var(--sh-sm);}
.stats > div {padding: 18px 22px; border-right: 1px solid var(--g100);}
.stats > div:last-child {border-right: none;}
.stats b {display: block; font-size: 28px; font-weight: 800; letter-spacing: -.03em;}
.stats span {font-size: 14px; color: var(--g600);}
.ms-sec {padding: 64px 0 0;}
.ms-sec h2 {font-size: 32px; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; margin-top: 6px;}
.ms-sec .sub {color: var(--g600); margin-top: 8px; max-width: 720px;}
.about {display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; margin-top: 18px;}
.about p {color: var(--g600); margin-bottom: 12px;}
.about p b {color: var(--black); font-weight: 600;}
.about ul {list-style: none; display: grid; gap: 10px;}
.about li {padding: 12px 14px; background: var(--g100); border-radius: var(--r-md); font-size: 14px;}
.about li b {display: block; font-size: 15px;}
.chips {display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px;}
.chips span {padding: 10px 16px; border: 1.5px solid var(--g200); border-radius: var(--pill); font-weight: 600; font-size: 15px;}
.posts {display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 22px;}
.post {display: flex; flex-direction: column; border: 1px solid var(--g200); border-radius: var(--r-lg); overflow: hidden; text-decoration: none; transition: border-color .15s, transform .15s, box-shadow .15s; background: #fff;}
.post:hover {border-color: var(--coral); transform: translateY(-3px); box-shadow: var(--sh-md);}
.post .cover {height: 140px; background: var(--coral-50); display: grid; place-items: end start; padding: 14px;}
.post .cover.c2 {background: var(--cream);}
.post .cover.c3 {background: var(--g100);}
.post .cover span {font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--coral-ink);}
.post .body {padding: 16px 18px 20px; display: grid; gap: 6px;}
.post b {font-size: 17px; line-height: 1.3; letter-spacing: -.01em;}
.post small {color: var(--g400); font-size: 13px;}
.centers {display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px;}
.center {padding: 18px; border-radius: var(--r-md); background: var(--g100);}
.center b {display: block;}
.center span {font-size: 14px; color: var(--g600);}
.lead-form {display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; margin-top: 18px; background: var(--cream); border-radius: var(--r-lg); padding: 32px;}
.lead-form form {display: grid; gap: 12px;}
.lead-form .two {display: grid; grid-template-columns: 1fr 1fr; gap: 12px;}
.done {display: grid; gap: 8px; align-content: center; text-align: center; padding: 24px; background: #fff; border-radius: var(--r-md);}
.done .ic {width: 48px; height: 48px; margin: 0 auto; border-radius: 50%; background: var(--ok-50); color: var(--ok-ink); display: grid; place-items: center; font-size: 22px; font-weight: 800;}
.ms-foot {margin-top: 72px; padding: 28px 0; border-top: 1px solid var(--g100); font-size: 13px; color: var(--g400);}
.ms-foot .wrap {display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;}
.ms-foot a {margin-right: 14px;}
.wa-float {position: fixed; right: 22px; bottom: 22px; width: 56px; height: 56px; border-radius: 50%; background: var(--wa); color: var(--black); display: grid; place-items: center; box-shadow: var(--sh-md); z-index: 30; border: none;}
.wa-float svg {width: 28px; height: 28px;}
.art {max-width: 760px; margin: 0 auto; padding: 44px 28px 0;}
.crumbs {font-size: 13px; color: var(--g400);}
.crumbs a {text-decoration: none;}
.crumbs a:hover {color: var(--coral);}
.art h1 {font-size: 42px; font-weight: 800; letter-spacing: -.035em; line-height: 1.1; margin-top: 14px;}
.byline {display: flex; gap: 12px; align-items: center; margin-top: 20px; font-size: 14px; color: var(--g600);}
.byline img {width: 44px; height: 44px; border-radius: 50%; object-fit: cover;}
.byline b {color: var(--black); display: block;}
.art .content {margin-top: 30px; font-size: 18px; line-height: 1.75; color: #2B2D33;}
.art .content p {margin-bottom: 18px;}
.art .content h2 {font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin: 34px 0 12px; color: var(--black);}
.art .content .src {color: var(--coral-ink); font-size: 15px;}
.author-box {display: flex; gap: 18px; align-items: center; margin-top: 36px; padding: 22px; background: var(--cream); border-radius: var(--r-lg);}
.author-box img {width: 72px; height: 72px; border-radius: 50%; object-fit: cover;}
.author-box div {flex: 1;}
.author-box p {font-size: 14px; color: var(--g600);}
.seo-note {margin-top: 18px; font-family: var(--mono); font-size: 12px; color: var(--g400);}
.flow {background: var(--cream); min-height: 100vh; padding: 48px 16px 80px;}
.flow .box {max-width: 560px; margin: 0 auto; background: #fff; border-radius: var(--r-lg); box-shadow: var(--sh-md); padding: 34px;}
.steps {display: flex; gap: 6px; margin-bottom: 26px;}
.steps span {flex: 1; height: 5px; border-radius: 3px; background: var(--g200);}
.steps span.on {background: var(--coral);}
.flow h2 {font-size: 28px; font-weight: 800; letter-spacing: -.025em; line-height: 1.15;}
.flow .sub {color: var(--g600); margin-top: 6px; margin-bottom: 22px;}
.flow form {display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr);}
.field input:not([type=checkbox], [type=radio]), .field textarea, .field select {min-width: 0; width: 100%;}
.stripe {border: 1px solid var(--g200); border-radius: var(--r-md); overflow: hidden;}
.stripe .top {display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; background: var(--g100); font-size: 14px;}
.stripe .top b {font-size: 20px;}
.stripe .in {padding: 16px; display: grid; gap: 12px;}
.stripe .secure {font-size: 12px; color: var(--g400); text-align: center;}
.offer {font-size: 13px; color: var(--g600); background: var(--coral-50); padding: 10px 12px; border-radius: var(--r-sm);}
.preview {border: 1px solid var(--g200); border-radius: var(--r-md); overflow: hidden;}
.preview .url {font-family: var(--mono); font-size: 12px; padding: 8px 12px; background: var(--g100); color: var(--g600);}
.preview .pv {display: flex; gap: 16px; align-items: center; padding: 22px; background: var(--cream);}
.preview .av {width: 64px; height: 64px; border-radius: 50%; background: var(--coral-50); color: var(--coral-ink); display: grid; place-items: center; font-weight: 800; font-size: 22px; border: 3px solid #fff;}
.preview h3 {font-size: 22px; font-weight: 800; letter-spacing: -.02em;}
.generating {display: flex; gap: 10px; align-items: center; color: var(--g600); font-size: 14px; padding: 22px;}
.dots span {display: inline-block; width: 6px; height: 6px; margin-right: 3px; border-radius: 50%; background: var(--coral); animation: blink 1s infinite;}
.dots span:nth-child(2) {animation-delay: .2s;}
.dots span:nth-child(3) {animation-delay: .4s;}
@keyframes blink { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
.app {display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; background: var(--g100);}
.side {background: #fff; border-right: 1px solid var(--g200); padding: 22px 14px; display: flex; flex-direction: column; gap: 24px; position: sticky; top: 0; height: 100vh;}
.side .brand {display: flex; align-items: center; gap: 10px; padding: 0 8px;}
.side .brand small {font-size: 11px; color: var(--g400); line-height: 1.2;}
.side ul {list-style: none; display: grid; gap: 2px;}
.side a {display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: var(--r-sm); text-decoration: none; font-weight: 600; font-size: 14.5px; color: var(--g600); transition: background .15s, color .15s;}
.side a svg {width: 18px; height: 18px; flex: none;}
.side a:hover {background: var(--g100); color: var(--black);}
.side a.on {background: var(--coral-50); color: var(--black);}
.side a.on svg {color: var(--coral);}
.side a .badge {margin-left: auto; background: var(--coral); color: #fff; font-size: 11px; font-weight: 800; min-width: 20px; height: 20px; border-radius: 10px; display: grid; place-items: center; padding: 0 6px;}
.side .bottom {margin-top: auto; display: grid; gap: 2px;}
.side .me {display: flex; gap: 10px; align-items: center; padding: 12px 8px 0; border-top: 1px solid var(--g100); margin-top: 8px; font-size: 13px;}
.side .me img {width: 34px; height: 34px; border-radius: 50%; object-fit: cover;}
.side .me span {color: var(--g400); display: block; font-size: 12px;}
.main {padding: 30px 36px 60px; max-width: 1080px; width: 100%;}
.main .head {display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 22px;}
.main h1 {font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1;}
.main .head p {color: var(--g600); margin-top: 4px;}
.kpis {display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;}
.kpi {background: #fff; border-radius: var(--r-md); padding: 16px 18px; box-shadow: var(--sh-sm);}
.kpi small {font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--g400);}
.kpi b {display: block; font-size: 32px; font-weight: 800; letter-spacing: -.03em; margin-top: 2px;}
.kpi b.c {color: var(--coral);}
.kpi span {font-size: 13px; color: var(--g600);}
.panel {background: #fff; border-radius: var(--r-md); box-shadow: var(--sh-sm); margin-top: 16px;}
.panel .ph {display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--g100);}
.panel .ph b {font-size: 16px;}
.row {display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--g100); text-decoration: none; transition: background .15s;}
.row:last-child {border-bottom: none;}
a.row:hover {background: var(--cream);}
.row b {font-weight: 700;}
.row .muted {color: var(--g400); font-size: 13px;}
.row.c4 {grid-template-columns: 1.3fr 1fr .8fr auto;}
.todo {display: flex; gap: 14px; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--g100);}
.todo:last-child {border-bottom: none;}
.todo .ic {width: 36px; height: 36px; border-radius: 10px; background: var(--coral-50); color: var(--coral-ink); display: grid; place-items: center; font-weight: 800; flex: none;}
.todo.ok .ic {background: var(--ok-50); color: var(--ok-ink);}
.todo div {flex: 1;}
.todo span {display: block; font-size: 13px; color: var(--g600);}
.reader {display: grid; grid-template-columns: 1fr 300px; gap: 16px; align-items: start;}
.reader .doc {background: #fff; border-radius: var(--r-md); box-shadow: var(--sh-sm); padding: 30px 34px;}
.reader .doc h2 {font-size: 28px; font-weight: 800; letter-spacing: -.025em; line-height: 1.15;}
.reader .doc p {color: #2B2D33; margin-top: 14px;}
.reader .doc h3 {font-size: 19px; font-weight: 800; margin-top: 22px;}
.reader .act {display: grid; gap: 12px; position: sticky; top: 70px;}
.reader .act .card {padding: 18px; display: grid; gap: 10px;}
.reader .act .card b {font-size: 15px;}
.reader .act .card p {font-size: 13px; color: var(--g600);}
.countdown {font-size: 28px; font-weight: 800; color: var(--coral); letter-spacing: -.02em;}
.li-box {background: var(--g100); border-radius: var(--r-sm); padding: 14px; font-size: 14px; white-space: pre-line; line-height: 1.55;}
.radar-hero {display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px;}
.radar-hero .rep {background: var(--black); color: #fff; border-radius: var(--r-md); padding: 24px; display: grid; gap: 10px; align-content: start;}
.radar-hero .rep small {color: #9A9AA3; font-size: 12px;}
.radar-hero .rep b {font-size: 24px; font-weight: 800; letter-spacing: -.02em;}
.score {display: flex; align-items: baseline; gap: 6px;}
.score b {font-size: 54px !important; color: var(--coral); line-height: 1;}
.bars {display: grid; gap: 10px; padding: 18px 20px;}
.bar {display: grid; grid-template-columns: 110px 1fr 40px; gap: 12px; align-items: center; font-size: 14px;}
.bar .track {height: 8px; background: var(--g100); border-radius: 4px; overflow: hidden;}
.bar .fill {height: 100%; background: var(--coral); border-radius: 4px;}
.bar b {text-align: right;}
.form-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 20px;}
.form-grid .full {grid-column: 1 / -1;}
.lock {display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; background: var(--g100); border-radius: var(--r-sm); font-size: 14px;}
.lock span {color: var(--g600); font-size: 13px;}
.empty {padding: 28px 20px; text-align: center; color: var(--g600); font-size: 14px;}
.login {min-height: 100vh; display: grid; place-items: center; background: var(--cream); padding: 30px;}
.login .box {width: min(440px, 100%); background: #fff; border-radius: var(--r-lg); box-shadow: var(--sh-md); padding: 34px; display: grid; gap: 14px;}
.login h2 {font-size: 26px; font-weight: 800; letter-spacing: -.025em;}
.login p {color: var(--g600); font-size: 15px;}
.mail {border: 1px dashed var(--coral); border-radius: var(--r-md); padding: 16px; display: grid; gap: 8px; background: var(--cream);}
.mail small {color: var(--g400); font-size: 12px;}
@media (max-width: 900px) {
.hub h1 {font-size: 42px;}
.hub .routes, .ms-hero .grid, .about, .posts, .centers, .lead-form, .kpis, .reader, .radar-hero, .form-grid, .stats {grid-template-columns: 1fr;}
.ms-hero h1 {font-size: 34px;}
.ms-hero .who {flex-direction: column; align-items: flex-start;}
.app {grid-template-columns: 1fr;}
.side {position: static; height: auto;}
.side .bottom, .side .me {display: none;}
.main {padding: 22px 18px;}
.row.c4 {grid-template-columns: 1fr auto;}
.row.c4 .hide-sm {display: none;}
}
@media (prefers-reduced-motion: reduce) {
* {transition: none !important; animation: none !important;}
}
.ms-nav {display: flex; gap: 4px;}
.ms-nav a {text-decoration: none; font-size: 14px; font-weight: 600; color: var(--g600); padding: 6px 12px; border-radius: var(--pill);}
.ms-nav a:hover {background: var(--g100); color: var(--black);}
.ms-hero .contact .link {font-size: 14px; font-weight: 700; text-decoration: none; text-align: center; color: var(--coral-ink);}
.h3 {font-size: 18px; font-weight: 800; letter-spacing: -.01em; margin: 26px 0 0;}
.center {display: grid; gap: 4px; align-content: start;}
.center.is-main {background: var(--cream); outline: 1.5px solid var(--coral-50);}
.center .links {font-weight: 600; color: var(--coral-ink); font-size: 13px;}
.center .links a {text-decoration: none;}
.centers {grid-template-columns: repeat(2, 1fr);}
.rep-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px;}
.rep-card {border: 1px solid var(--g200); border-radius: var(--r-md); padding: 4px 20px 20px;}
.rep-card p, .rep-card small {color: var(--g600); font-size: 14px; display: block; margin-top: 8px;}
.badges {display: flex; gap: 8px; margin-top: 10px;}
.badges > span {padding: 6px 12px; border-radius: var(--pill); background: var(--g100); font-weight: 700; font-size: 13px;}
ul.plain {list-style: none; display: grid; gap: 8px; margin-top: 10px; font-size: 14px; color: var(--g600);}
ul.plain b {color: var(--black);}
.more {margin-top: 14px; font-weight: 700;}
.more a {text-decoration: none; color: var(--coral-ink);}
.presence {display: grid; grid-template-columns: 1fr 1fr; gap: 28px;}
.profile {display: flex; gap: 14px; align-items: center; padding: 14px 16px; border: 1px solid var(--g200); border-radius: var(--r-md); margin-top: 10px; text-decoration: none; font-size: 14px; color: var(--g600); transition: border-color .15s;}
.profile:hover {border-color: var(--coral);}
.profile b {display: block; color: var(--black); font-size: 15px;}
.profile > svg {width: 16px; height: 16px; margin-left: auto; color: var(--g400); flex: none;}
.profile .pi {width: 38px; height: 38px; border-radius: 10px; background: var(--black); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 13px; flex: none;}
.socials {display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px;}
.socials > span {padding: 12px 14px; border: 1.5px dashed var(--g200); border-radius: var(--r-md); font-size: 13px; color: var(--g400);}
.socials b {display: block; color: var(--g600); font-size: 15px;}
p.small, .small {font-size: 13.5px; color: var(--g600); margin-top: 12px;}
.press {display: grid; grid-template-columns: 180px 1fr; gap: 20px; padding: 18px 20px; background: var(--g100); border-radius: var(--r-md); margin-top: 12px;}
.press span {display: block; font-size: 13px; color: var(--g400);}
.press p {font-size: 14px; color: var(--g600); margin-top: 4px;}
ul.creds {list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px;}
ul.creds li {padding: 12px 14px 12px 38px; border: 1px solid var(--g200); border-radius: var(--r-md); font-size: 14px; color: var(--g600); position: relative;}
ul.creds li::before {content: "✓"; position: absolute; left: 14px; top: 12px; color: var(--ok-ink); font-weight: 800;}
ul.creds b {color: var(--black);}
.treat {display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 18px;}
.treat > div {background: var(--cream); border-radius: var(--r-md); padding: 20px;}
.treat b {font-size: 17px;}
.treat ul {list-style: none; margin-top: 10px; display: grid; gap: 6px; font-size: 15px; color: var(--g600);}
.treat li::before {content: "·"; color: var(--coral); font-weight: 800; margin-right: 8px;}
.faq {display: grid; gap: 10px; margin-top: 18px;}
.faq details {border: 1px solid var(--g200); border-radius: var(--r-md); padding: 0 20px; background: #fff;}
.faq details[open] {border-color: var(--coral-50); background: var(--cream);}
.faq summary {cursor: pointer; padding: 16px 0; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 16px;}
.faq summary::after {content: "+"; color: var(--coral); font-size: 20px; line-height: 1;}
.faq details[open] summary::after {content: "–";}
.faq summary::-webkit-details-marker {display: none;}
.faq p, .faq ul {padding-bottom: 16px; color: var(--g600); font-size: 15px;}
.faq.ext ul {padding-left: 18px; display: grid; gap: 6px;}
.ticks {list-style: none; display: grid; gap: 8px; margin-top: 14px; font-size: 15px;}
.ticks li::before {content: "✓"; color: var(--ok-ink); font-weight: 800; margin-right: 8px;}
.consent {font-size: 13px; color: var(--g600); display: flex; gap: 8px; align-items: flex-start;}
.consent input {margin-top: 4px;}
.hint {font-size: 12px; color: var(--g400);}
.field select {appearance: auto;}
.ms-foot .wrap {align-items: flex-end;}
.ms-foot p {margin-top: 8px; max-width: 460px;}
.ms-foot .links {text-align: right; line-height: 1.8;}
.ms-foot a {margin: 0; text-decoration: none;}
.ms-foot a:hover {color: var(--coral);}
.side a.side-page {display: grid; gap: 2px; margin: 0 4px; padding: 12px 14px; border-radius: var(--r-md); background: var(--cream); text-decoration: none; border: 1px solid var(--coral-50);}
.side-page small {font-size: 11px; color: var(--g400); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;}
.side-page b {font-size: 13px; color: var(--coral-ink);}
.main .head .kicker {color: var(--g400); letter-spacing: .14em;}
.main .head .kicker a.back {color: var(--g400); text-decoration: none; letter-spacing: 0; text-transform: none; font-size: 14px;}
.main .head h1 {margin-top: 6px;}
.main .head p {max-width: 860px; font-size: 15px;}
.main .head p b {color: var(--black);}
.sub-head {display: flex; justify-content: space-between; align-items: baseline; margin: 8px 0 10px; font-size: 13px;}
.sub-head a {color: var(--coral-ink); font-weight: 700; text-decoration: none;}
.kpis.k3 {grid-template-columns: repeat(3, 1fr);}
.kpi.top {border-top: 3px solid var(--coral);}
.kpi b i {font-style: normal; font-size: 16px; color: var(--g400); font-weight: 700;}
.kpi .up {display: block; color: var(--ok-ink); font-weight: 700; font-size: 13px; margin-top: 2px;}
.kpi em {display: block; font-style: normal; font-size: 12px; color: var(--g400); border-top: 1px solid var(--g100); margin-top: 10px; padding-top: 8px;}
.cols {display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px;}
.cols > .panel {margin-top: 16px;}
.pad {padding: 16px 20px; display: grid; gap: 12px;}
.muted {color: var(--g600); font-size: 14px;}
.ph .muted {font-size: 12.5px; color: var(--g400);}
.small-link {font-size: 13px; font-weight: 700; color: var(--coral-ink); text-decoration: none;}
.pend {display: flex; gap: 10px; align-items: center; margin: 12px 20px 0; padding: 12px 14px; border-radius: var(--r-sm); background: var(--coral-50); border-left: 3px solid var(--coral);}
.pend div {flex: 1;}
.pend b {display: block; font-size: 14px;}
.pend span {font-size: 12.5px; color: var(--g600);}
.btn-xs {padding: 6px 12px; font-size: 13px;}
.tip {margin: 14px 20px 16px; padding: 10px 14px; background: var(--g100); border-radius: var(--r-sm); font-size: 13px; color: var(--g600);}
.tip.warn {background: var(--cream); border-left: 3px solid var(--coral);}
.url-box {padding: 12px 14px; background: var(--coral-50); border-radius: var(--r-sm); font-size: 13px;}
.url-box b {display: block;}
.url-box span {color: var(--g600); font-size: 12px;}
.full {width: 100%;}
.radar-mini {display: flex; align-items: baseline; gap: 8px;}
.radar-mini b {font-size: 44px; font-weight: 800; color: var(--coral); letter-spacing: -.03em; line-height: 1;}
.radar-mini span {color: var(--ok-ink); font-weight: 700; font-size: 14px;}
.private {display: flex; gap: 10px; margin-top: 16px; padding: 14px 18px; border-radius: var(--r-md); background: var(--black); color: #C9C9CF; font-size: 14px;}
.private b {color: #fff;}
.counters {display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 16px 20px 4px;}
.counters div {background: var(--cream); border-radius: var(--r-sm); padding: 12px 14px;}
.counters b {display: block; font-size: 26px; font-weight: 800; letter-spacing: -.02em;}
.counters .hot b {color: var(--coral);}
.counters span {font-size: 12.5px; color: var(--g600);}
.table {margin: 12px 20px 0; border: 1px solid var(--g100); border-radius: var(--r-sm); overflow: hidden;}
.tr {display: grid; grid-template-columns: 2fr 1.1fr 1.3fr .9fr 1.1fr; gap: 12px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--g100); font-size: 14px;}
.tr:last-child {border-bottom: none;}
.tr.th {background: var(--g100); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--g400);}
.tr .muted {font-size: 13px;}
.tr .acts {display: flex; gap: 6px; justify-content: flex-end;}
.pill.amber {background: #FFF3D6; color: #9A6A00;}
.lib {display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px 20px 20px;}
.lib-item {display: flex; gap: 12px; padding: 12px 14px; border: 1px solid var(--g200); border-radius: var(--r-sm); text-decoration: none; transition: border-color .15s;}
.lib-item:hover {border-color: var(--coral);}
.lib-item b {display: block; font-size: 14px;}
.lib-item small {display: block; font-size: 12px; color: var(--g400);}
.log {display: flex; justify-content: space-between; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--g100); font-size: 14px;}
.log span {color: var(--g600); font-size: 13px;}
.radar-top {display: grid; grid-template-columns: 1fr 1.4fr; gap: 16px;}
.score-card {background: var(--black); color: #fff; border-radius: var(--r-md); padding: 22px; display: grid; gap: 6px;}
.score-card small {color: #9A9AA3; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;}
.score-card .up {color: #7BE3A4; font-weight: 700; font-size: 13px;}
.score-card .score b {color: var(--coral);}
.history {display: flex; gap: 18px; align-items: flex-end; margin-top: 10px; height: 92px;}
.history div {display: grid; justify-items: center; gap: 4px; font-size: 12px; color: #9A9AA3;}
.history i {width: 28px; background: var(--coral); border-radius: 6px 6px 0 0; display: block;}
.history b {color: #fff; font-size: 13px;}
.ind {margin-top: 0 !important;}
.ind-row {display: flex; justify-content: space-between; gap: 14px; padding: 14px 20px; border-bottom: 1px solid var(--g100); font-size: 14.5px;}
.ind-row:last-child {border-bottom: none;}
.ind-row b.no {color: #C23A27;}
.qs {display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 16px 20px 0;}
.q {border: 1px solid var(--g200); border-radius: var(--r-sm); padding: 14px; display: grid; gap: 10px; align-content: start; font-size: 14px;}
.miss {background: #B4321F; color: #fff; font-weight: 700; padding: 8px 12px; border-radius: 6px; font-size: 13px;}
.instead {background: var(--g100); border-radius: 6px; padding: 10px 12px; font-size: 13px; color: var(--g600);}
.instead small {display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--g400); margin-bottom: 4px;}
ul.why {list-style: none; display: grid; gap: 10px; padding: 16px 20px 0; font-size: 14px; color: var(--g600);}
ul.why li {padding-left: 18px; position: relative;}
ul.why li::before {content: "→"; position: absolute; left: 0; color: var(--coral);}
ul.why b {color: var(--black);}
.report {display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 12px 20px; border-bottom: 1px solid var(--g100); font-size: 14px;}
.report span {display: block; color: var(--g600); font-size: 12.5px;}
.toolbar {display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;}
.filters {display: flex; gap: 6px; flex-wrap: wrap;}
.filters :is(a, button) {border: 1.5px solid var(--g200); text-decoration: none; display: inline-flex; align-items: center; background: #fff; border-radius: var(--pill); padding: 6px 14px; font-weight: 600; font-size: 13px; color: var(--g600);}
.filters :is(a, button).on {background: var(--black); color: #fff; border-color: var(--black);}
.table.contacts .tr {grid-template-columns: 1fr 1fr 1.3fr minmax(140px, 1.1fr) .6fr 1fr .5fr;}
.tag-o {display: inline-block; padding: 3px 10px; border-radius: var(--pill); background: var(--coral-50); color: var(--coral-ink); font-weight: 700; font-size: 12px;}
.okc {color: var(--ok-ink); font-weight: 800; text-align: center;}
.modes {display: grid; grid-template-columns: 1fr 1fr; gap: 12px;}
.modes div {display: flex; gap: 10px; align-items: center; padding: 12px 16px; background: #fff; border-radius: var(--r-md); font-size: 13.5px; color: var(--g600); box-shadow: var(--sh-sm);}
.flds {display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px 20px 0;}
.flds.one {grid-template-columns: 1fr; padding-bottom: 12px;}
.fld {display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--g100); border-radius: var(--r-sm);}
.fld small {grid-column: 1; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--g400);}
.fld b {grid-column: 1; font-size: 14px; font-weight: 600;}
.fld .btn-chip {grid-column: 2; grid-row: 1 / span 2;}
.photo-row {display: flex; gap: 8px; align-items: center;}
.photo-row img {width: 28px; height: 28px; border-radius: 50%; object-fit: cover;}
.btn-chip {border: none; border-radius: var(--pill); padding: 5px 12px; font-size: 12px; font-weight: 700; white-space: nowrap;}
.btn-chip.ok {background: var(--ok-50); color: var(--ok-ink);}
.btn-chip.req {background: var(--coral-50); color: #C23A27;}
ul.list {list-style: none; padding: 8px 20px 16px;}
ul.list li {display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--g100); font-size: 14px;}
ul.list li:last-child {border-bottom: none;}
.link-btn {border: none; background: none; color: var(--coral-ink); font-weight: 700; padding: 0; font-size: 14px;}
@media (max-width: 1100px) {
.ms-nav {display: none;}
}
@media (max-width: 900px) {
.rep-grid, .presence, ul.creds, .treat, .cols, .radar-top, .qs, .modes, .flds, .lib, .counters, .press, .centers, .kpis.k3 {grid-template-columns: 1fr;}
.tr, .table.contacts .tr {grid-template-columns: 1fr auto;}
.tr > span:nth-child(n+3):not(:last-child), .tr.th {display: none;}
.table.contacts .tr > span:nth-child(n+2):not(:nth-child(4)) {display: none;}
.ms-foot .links {text-align: left;}
}
.ic-tile {width: 44px; height: 44px; border-radius: 12px; background: var(--coral-50); color: var(--coral); display: grid; place-items: center; flex: none;}
.ic-tile svg {width: 22px; height: 22px;}
.ic-tile.sm {width: 34px; height: 34px; border-radius: 10px;}
.ic-tile.sm svg {width: 18px; height: 18px;}
.ic-tile.dark {background: rgba(255,255,255,.1); color: var(--coral); width: 36px; height: 36px;}
.ic-tile.dark svg {width: 18px; height: 18px;}
.brand-ic {display: inline-grid; width: 18px; height: 18px; flex: none;}
.brand-ic svg {width: 100%; height: 100%;}
.origin {display: inline-flex; gap: 8px; align-items: center; font-weight: 600; font-size: 13.5px;}
.sec-head {display: flex; gap: 16px; align-items: center;}
.sec-head h2 {margin-top: 2px;}
.ms-sec + .ms-sec {border-top: 1px solid var(--g100); margin-top: 64px;}
.photo-wrap {position: relative; flex: none; display: grid; justify-items: center;}
.ms-hero .photo {width: 156px; height: 156px; border: 4px solid #fff; outline: 3px solid var(--coral); outline-offset: 3px;}
.photo-wrap .verified {margin-top: -14px; position: relative; background: #fff; color: var(--coral-ink); box-shadow: var(--sh-sm); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;}
.verified svg {width: 13px; height: 13px;}
.photo-wrap .verified::before, .verified:has(svg)::before {content: none;}
.ms-hero h1 {margin-top: 0;}
.colegiado {display: inline-flex; gap: 8px; align-items: center; margin-top: 20px; padding: 8px 14px; border: 1.5px solid var(--coral); border-radius: var(--pill); color: var(--coral-ink); font-weight: 700; font-size: 14px; background: #fff;}
.colegiado svg {width: 17px; height: 17px;}
.meta.icons span {display: inline-flex; gap: 6px; align-items: center;}
.meta.icons svg {width: 16px; height: 16px; color: var(--coral);}
.stats > div {display: flex; gap: 14px; align-items: center;}
.chips span {background: var(--coral); color: #fff; border-color: var(--coral); box-shadow: 0 4px 12px rgba(255,83,61,.18); transition: transform .15s, background .15s;}
.chips span:hover {background: var(--coral-ink); transform: translateY(-1px);}
.center {display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 1px solid var(--g200); transition: border-color .15s, box-shadow .15s;}
.center:hover {border-color: var(--coral-50); box-shadow: var(--sh-md);}
.center.is-main {background: var(--cream); border-color: var(--coral-50); outline: none;}
.center > div {display: grid; gap: 4px;}
.center .links {display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 2px;}
.center .links a {display: inline-flex; gap: 5px; align-items: center;}
.center .links svg {width: 14px; height: 14px;}
.rep-card {padding: 20px; display: grid; gap: 4px; align-content: start;}
.rep-card .h3 {margin-top: 8px;}
.badges > span {display: inline-flex; gap: 6px; align-items: center; background: #fff; border: 1px solid var(--g200);}
.profile .pi, .socials .pi {width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; flex: none;}
.profile .pi svg, .socials .pi svg {width: 20px; height: 20px;}
.pi.li {background: #E8F1FB; color: #0A66C2;}
.pi.dc {background: #E6F2FB; color: #0072CE;}
.pi.hm {background: var(--coral-50); color: var(--coral);}
.pi.ig {background: #FDEBF3; color: #D62976;}
.pi.yt {background: #FFE9E9; color: #E62117;}
.pi.tt, .pi.xx {background: var(--g100); color: var(--black);}
.socials > span {display: flex; gap: 12px; align-items: center; border-style: solid; background: #fff;}
.socials > span > span b {display: block; color: var(--black); font-size: 15px;}
.socials > span > span {color: var(--coral-ink); font-weight: 600; font-size: 12.5px;}
.press {border-left: 3px solid var(--coral); background: #fff; border-top: 1px solid var(--g200); border-right: 1px solid var(--g200); border-bottom: 1px solid var(--g200);}
.press > div:first-child {display: grid; gap: 6px; align-content: start;}
.treat > div {display: grid; gap: 6px; align-content: start; background: #fff; border: 1px solid var(--g200); box-shadow: var(--sh-sm);}
.treat b {color: var(--coral-ink); text-transform: uppercase; letter-spacing: .1em; font-size: 13px; margin-top: 6px;}
.faq summary {justify-content: flex-start; align-items: center; gap: 12px;}
.faq summary > svg {width: 20px; height: 20px; color: var(--coral); flex: none;}
.faq summary > span {flex: 1;}
#contacto .lead-form {background: var(--black); color: #fff;}
#contacto .lead-form .sub, #contacto .lead-form .small {color: #C9C9CF;}
#contacto .lead-form .small a {color: #fff;}
#contacto .lead-form .ticks li {color: #E9E9EC;}
#contacto .lead-form .ticks li::before {color: var(--coral);}
#contacto .lead-form form {background: #fff; color: var(--black); padding: 22px; border-radius: var(--r-md);}
#contacto .lead-form .done {color: var(--black);}
.ph-t {display: inline-flex; gap: 12px; align-items: center;}
.kpi.top {display: grid; gap: 2px;}
.kpi.top .ic-tile {margin-bottom: 8px;}
.lib-item .ic-tile {width: 32px; height: 32px;}
.q .qq {display: flex; gap: 8px; align-items: flex-start;}
.q .qq svg {width: 18px; height: 18px; color: var(--coral); flex: none; margin-top: 2px;}
.miss {display: flex; gap: 8px; align-items: center;}
.miss svg {width: 14px; height: 14px;}
.private {align-items: center;}
.bar {grid-template-columns: 150px 1fr 40px;}
.side a.on {box-shadow: inset 3px 0 0 var(--coral);}
.panel {transition: box-shadow .15s;}
.panel:hover {box-shadow: var(--sh-md);}
.pi .logo-svg {width: 22px; height: 22px;}
.pi.li, .pi.dc, .pi.ig, .pi.yt, .pi.tt, .pi.xx {background: #fff; border: 1px solid var(--g200);}
.brand-ic .logo-svg {width: 100%; height: 100%;}
.socials > span:hover, .profile:hover .pi {border-color: var(--coral-50);}
.foot-social {display: flex; gap: 8px; justify-content: flex-end; margin-bottom: 8px;}
.foot-social a, .hero-social a:not(.all) {width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--g200); background: #fff; display: grid; place-items: center; transition: border-color .15s, transform .15s;}
.foot-social a:hover, .hero-social a:not(.all):hover {border-color: var(--coral); transform: translateY(-2px);}
.foot-social a.soon {opacity: .45;}
.foot-social .logo-svg, .hero-social .logo-svg {width: 18px; height: 18px;}
.hero-social {display: flex; gap: 8px; align-items: center; margin-top: 16px;}
.hero-social .all {font-size: 13px; font-weight: 700; color: var(--coral-ink); text-decoration: none; margin-left: 6px;}
.li-title {display: flex; gap: 8px; align-items: center;}
.li-title .logo-svg {width: 18px; height: 18px;}
@media (max-width: 900px) {
.foot-social {justify-content: flex-start;}
}
.filters :is(a, button) .origin {font-size: 13px; gap: 6px;}
.filters :is(a, button) .brand-ic {width: 15px; height: 15px;}
.filters :is(a, button).on .brand-ic {background: #fff; border-radius: 4px;}
.pi svg {margin: 0;}
.center {align-items: flex-start;}
.center .ic-tile {margin-top: 1px;}
.press > div:first-child b {font-size: 15px;}
.badges > a {display: inline-flex; gap: 6px; align-items: center; padding: 6px 12px; border-radius: var(--pill); background: #fff; border: 1px solid var(--g200); font-weight: 700; font-size: 13px; text-decoration: none; transition: border-color .15s;}
.badges > a:hover {border-color: var(--coral);}
.foot-social span.soon {width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--g200); background: #fff; display: grid; place-items: center; opacity: .45;}
.hero-social .brand-ic {width: 18px; height: 18px;}
.press-link {text-decoration: none;}
.press-link:hover b {color: var(--coral-ink); text-decoration: underline;}
.hub .routes {grid-template-columns: repeat(4, 1fr);}
.post .cover, .art-cover .cover {position: relative; overflow: hidden; height: 150px; display: block; padding: 0;}
.cover.tone-coral {background: linear-gradient(135deg, #FF6A55, var(--coral-ink)); color: #fff;}
.cover.tone-cream {background: var(--cream); color: var(--coral);}
.cover.tone-soft {background: var(--coral-50); color: var(--coral-ink);}
.cover.tone-dark {background: var(--black); color: var(--coral);}
.c-ring {position: absolute; border-radius: 50%; border: 2px solid currentColor; opacity: .18;}
.c-ring.r1 {width: 180px; height: 180px; right: -40px; top: -60px;}
.c-ring.r2 {width: 110px; height: 110px; right: 30px; top: 50px; opacity: .12;}
.c-ic {position: absolute; right: 26px; top: 28px; width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: rgba(255,255,255,.18);}
.tone-cream .c-ic, .tone-soft .c-ic {background: #fff; box-shadow: var(--sh-sm);}
.tone-dark .c-ic {background: rgba(255,255,255,.08);}
.c-ic svg {width: 32px; height: 32px;}
.c-tag {position: absolute; left: 16px; bottom: 14px; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;}
.c-brand {position: absolute; left: 14px; top: 12px; opacity: .9;}
.tone-coral .c-brand .logo, .tone-dark .c-brand .logo {color: #fff;}
.art-cover {margin-top: 18px; border-radius: var(--r-lg); overflow: hidden;}
.art-cover .cover {height: 220px;}
.art-cover .c-ic {width: 88px; height: 88px; right: 48px; top: 64px;}
.art-cover .c-ic svg {width: 44px; height: 44px;}
.rating {display: flex; gap: 12px; align-items: center; margin-top: 10px;}
.rating > b {font-size: 40px; font-weight: 800; letter-spacing: -.03em; line-height: 1;}
.rating .stars {color: #F5A623; font-size: 18px; letter-spacing: 2px; display: block;}
.rating small {margin: 0 !important;}
.ia-grid {display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 18px;}
.ia-grid > div {display: grid; gap: 6px; align-content: start; padding: 16px; border: 1px solid var(--g200); border-radius: var(--r-md);}
.ia-grid b {font-family: var(--mono); font-size: 14px;}
.ia-grid span {font-size: 13.5px; color: var(--g600);}
details.code {margin-top: 14px; border: 1px solid var(--g200); border-radius: var(--r-md);}
details.code summary {cursor: pointer; padding: 14px 18px; font-weight: 700; display: flex; gap: 10px; align-items: center;}
details.code summary svg {width: 18px; height: 18px; color: var(--coral);}
details.code pre {margin: 0; border-radius: 0 0 var(--r-md) var(--r-md); background: var(--black); color: #E9E9EC; padding: 18px; font-family: var(--mono); font-size: 12px; max-height: 360px; overflow: auto;}
.photo-up {display: flex; flex-wrap: wrap; gap: 16px; align-items: center;}
.photo-up input:focus-visible + label, .photo-up label:has(+ input:focus-visible) {box-shadow: 0 0 0 4px var(--coral-50);}
.av.big {width: 76px; height: 76px; border-radius: 50%; background: var(--coral-50); color: var(--coral-ink); display: grid; place-items: center; font-weight: 800; font-size: 24px; overflow: hidden; border: 3px solid #fff; outline: 2px solid var(--coral);}
.av.big img {width: 100%; height: 100%; object-fit: cover;}
.photo-up label svg {width: 16px; height: 16px;}
.emails {background: var(--g100); min-height: 100vh; padding: 48px 0 80px;}
.emails h1 {font-size: 40px; font-weight: 800; letter-spacing: -.03em; margin-top: 8px;}
.emails .lead {color: var(--g600); margin-top: 6px;}
.mail-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 28px;}
.mail-card {background: #fff; border-radius: var(--r-lg); box-shadow: var(--sh-md); overflow: hidden;}
.mail-meta {display: flex; justify-content: space-between; gap: 10px; padding: 12px 18px; background: var(--g100); border-bottom: 1px solid var(--g200); font-size: 12px; color: var(--g400);}
.mail-body {padding: 22px; display: grid; gap: 10px; justify-items: start;}
.mail-top {width: 100%; padding-bottom: 12px; border-bottom: 2px solid var(--coral-50);}
.mail-body h3 {font-size: 19px; font-weight: 800; letter-spacing: -.02em; line-height: 1.25;}
.mail-body p {font-size: 14.5px; color: var(--g600);}
.mail-body small {font-size: 11.5px; color: var(--g400); margin-top: 6px;}
.tabbar, .m-cta {display: none;}
@media (max-width: 900px) {
.hub .routes, .ia-grid, .mail-grid {grid-template-columns: 1fr;}
.app {padding-bottom: 72px;}
.side ul, .side .side-page {display: none;}
.side {padding: 12px 16px; border-right: none; border-bottom: 1px solid var(--g200); position: sticky; top: 0; z-index: 20; height: auto;}
.tabbar {display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: #fff; border-top: 1px solid var(--g200); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 20px rgba(14,14,16,.06);}
.tabbar a {position: relative; display: grid; justify-items: center; gap: 2px; padding: 6px 2px; text-decoration: none; font-size: 10.5px; font-weight: 700; color: var(--g400); border-radius: var(--r-sm);}
.tabbar a svg {width: 22px; height: 22px;}
.tabbar a.on {color: var(--coral); background: var(--coral-50);}
.tabbar a i {position: absolute; top: 2px; right: 18%; background: var(--coral); color: #fff; font-style: normal; font-size: 10px; font-weight: 800; min-width: 17px; height: 17px; border-radius: 9px; display: grid; place-items: center;}
.main .head h1 {font-size: 24px;}
.wa-float {display: none;}
.m-cta {display: grid; grid-template-columns: 1fr 1fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-top: 1px solid var(--g200);}
.m-cta .btn {padding: 12px 10px; font-size: 14px;}
.ms-foot {padding-bottom: 90px;}
}
.post .cover > span, .art-cover .cover > span {color: inherit;}
.post .cover .c-tag, .art-cover .cover .c-tag {color: inherit; font-size: 11px;}
.tone-coral .c-ic, .tone-dark .c-ic {color: #fff;}
.tone-dark .c-ic {color: var(--coral);}
@media (max-width: 900px) {
.side a.side-page {display: none;}
}
@media (max-width: 900px) {
.counters, .kpis.k3 {grid-template-columns: 1fr 1fr;}
.counters div {padding: 10px 12px;}
}
@media (max-width: 900px) {
input, select, textarea {min-width: 0; max-width: 100%;}
.wrap {padding: 0 18px;}
.ms-hero {padding: 32px 0 28px;}
.ms-hero .photo {width: 120px; height: 120px;}
.ms-hero .who {align-items: center; text-align: center;}
.ms-hero .who > div:last-child {width: 100%;}
.ms-hero .meta {justify-content: center;}
.colegiado {width: 100%; justify-content: center; text-align: center;}
.meta.icons, .hero-social {justify-content: center;}
.ms-hero .contact {margin-top: 8px;}
.ms-sec {padding-top: 40px;}
.ms-sec + .ms-sec {margin-top: 40px;}
.ms-sec h2 {font-size: 25px;}
.sec-head {gap: 12px; align-items: flex-start;}
.sec-head .ic-tile {width: 38px; height: 38px;}
.centers, .presence, .press, .rep-grid, .treat, ul.creds, .ia-grid {grid-template-columns: 1fr;}
.press {gap: 8px;}
.chips span {padding: 8px 14px; font-size: 14px;}
.lead-form {padding: 20px 16px; gap: 20px;}
.lead-form .two {grid-template-columns: 1fr;}
#contacto .lead-form form {padding: 16px;}
.author-box {flex-direction: column; text-align: center;}
.art {padding: 28px 18px 0;}
.art h1 {font-size: 30px;}
.art .content {font-size: 17px;}
.art-cover .cover {height: 170px;}
.hub {padding: 40px 0;}
.hub h1 {font-size: 40px;}
.main {padding: 18px 14px 24px;}
.kpis.k3 {grid-template-columns: 1fr;}
.ph {flex-wrap: wrap; gap: 8px; padding: 14px 16px;}
.pend {flex-wrap: wrap; margin: 10px 14px 0;}
.pend div {flex-basis: 100%;}
.tr, .table.contacts .tr {grid-template-columns: 1fr; gap: 6px;}
.tr .acts {justify-content: flex-start;}
.tr > span:nth-child(2) {display: block;}
.table {margin: 10px 14px 0;}
.tip {margin: 12px 14px 14px;}
.reader .act {position: static;}
.reader .doc {padding: 20px 18px;}
.fld {grid-template-columns: 1fr; gap: 4px;}
.fld .btn-chip {grid-column: 1; grid-row: auto; justify-self: start; margin-top: 4px;}
.flds {padding: 14px 14px 0;}
.sub-head {flex-direction: column; gap: 4px;}
.modes div {align-items: flex-start; flex-direction: column; gap: 6px;}
.radar-top .score-card {padding: 18px;}
.q {padding: 12px;}
.lib {padding: 14px;}
.report {padding: 12px 14px;}
.filters {flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none;}
.filters :is(a, button) {flex: none;}
.toolbar .btn {width: 100%;}
.emails {padding: 28px 0 60px;}
.emails h1 {font-size: 28px;}
.mail-meta {flex-direction: column; gap: 2px;}
}
@media (max-width: 900px) {
.toolbar {flex-direction: column; align-items: stretch;}
.filters {width: 100%; min-width: 0;}
}
.app > *, .main, .presence > div, .profile > span:not(.pi) {min-width: 0;}
.socials > span {min-width: 0;}
@media (max-width: 360px) {
.socials {grid-template-columns: 1fr;}
}
@media (max-width: 900px) {
.table.contacts .tr:not(.th) {grid-template-columns: 1fr auto; gap: 4px 10px; padding: 14px;}
.table.contacts .tr:not(.th) > span {display: block !important; font-size: 13px;}
.table.contacts .tr:not(.th) > span:nth-child(1) {grid-column: 1; font-size: 15px;}
.table.contacts .tr:not(.th) > span:nth-child(4) {grid-column: 2; grid-row: 1;}
.table.contacts .tr:not(.th) > span:nth-child(2), .table.contacts .tr:not(.th) > span:nth-child(3) {grid-column: 1 / -1; color: var(--g600);}
.table.contacts .tr:not(.th) > span:nth-child(5) {grid-column: 1;}
.table.contacts .tr:not(.th) > span:nth-child(6) {grid-column: 1;}
.table.contacts .tr:not(.th) > span:nth-child(7) {grid-column: 2; grid-row: 2 / span 2; align-self: center;}
}
.claim span {display: block; white-space: nowrap;}
@media (max-width: 480px) {
.ms-head .brand .claim {display: none;}
}
.art .content ul, .reader .doc ul {margin: 0 0 18px; padding-left: 22px; display: grid; gap: 8px;}
.art .content li::marker, .reader .doc li::marker {color: var(--coral);}
.art .content h3 {font-size: 20px; font-weight: 800; letter-spacing: -.01em; margin: 24px 0 8px; color: var(--black);}
.art .content b {color: var(--black);}
.reader .doc ul {margin-top: 12px; font-size: 15px; color: #2B2D33;}
.reader .doc h4 {font-size: 16px; font-weight: 800; margin-top: 16px;}
.changes-card form {display: grid; gap: 10px;}
.changes-card textarea {min-height: 140px;}
.comment {background: var(--cream); border-left: 3px solid var(--coral); border-radius: var(--r-sm); padding: 10px 12px;}
.comment small {font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--g400);}
.comment p {font-size: 14px; color: var(--black); white-space: pre-line; margin-top: 4px;}
.av-admin {width: 34px; height: 34px; border-radius: 50%; background: var(--black); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 12px;}
.admin .kpi .ic-tile {margin-bottom: 8px;}
.admin .kpis .kpi {display: grid; gap: 2px;}
.table.clients .tr {grid-template-columns: 1.6fr 1.3fr 1.1fr .6fr .8fr 1.4fr;}
.radar-cell b {font-size: 18px; color: var(--coral);}
.radar-cell i {font-style: normal; color: var(--g400); font-size: 12px;}
.req-list {display: grid; gap: 12px; margin-top: 14px;}
.req {background: #fff; border-radius: var(--r-md); padding: 16px 18px; box-shadow: var(--sh-sm); display: grid; gap: 12px;}
.req-top {display: flex; justify-content: space-between; gap: 12px; align-items: flex-start;}
.req-top b {display: block;}
.req-top span {font-size: 13.5px; color: var(--g600);}
.req-acts {display: flex; gap: 8px; flex-wrap: wrap;}
.mcp-status {display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: var(--r-sm);}
.mcp-status svg {width: 22px; height: 22px; flex: none;}
.mcp-status b {display: block;}
.mcp-status span {font-size: 13px; color: var(--g600);}
.mcp-status.wait {background: var(--coral-50); color: #C23A27;}
.mcp-status.ok {background: var(--ok-50); color: var(--ok-ink);}
.kv {display: grid; gap: 4px;}
.kv small {font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--g400);}
.kv code {font-family: var(--mono); font-size: 13.5px; background: var(--g100); padding: 8px 10px; border-radius: 8px; word-break: break-all;}
.steps-list {list-style: none; counter-reset: st; display: grid; gap: 10px; padding: 16px 20px;}
.steps-list li {counter-increment: st; display: grid; grid-template-columns: 30px 1fr; gap: 2px 10px;}
.steps-list li::before {content: counter(st); grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; background: var(--coral-50); color: var(--coral-ink); font-weight: 800; font-size: 13px; display: grid; place-items: center;}
.steps-list b {font-size: 14.5px;}
.steps-list span {font-size: 13.5px; color: var(--g600);}
pre.cfg {margin: 0 20px 18px; background: var(--black); color: #9BE3B5; border-radius: var(--r-sm); padding: 14px; font-family: var(--mono); font-size: 12px; overflow: auto;}
ul.tools {list-style: none; display: grid; gap: 8px; padding: 14px 20px 18px;}
ul.tools li {display: grid; gap: 2px; font-size: 13.5px; color: var(--g600);}
ul.tools code {font-family: var(--mono); font-size: 12.5px; color: var(--coral-ink); font-weight: 500;}
ul.plain-tools li::before {content: "✓ "; color: var(--ok-ink); font-weight: 800;}
ul.plain-tools li {display: block;}
ul.prompts {list-style: none; display: grid; gap: 8px; padding: 14px 20px 18px;}
ul.prompts li {background: var(--cream); border-radius: var(--r-sm); padding: 10px 12px; font-size: 13.5px;}
.admin .cols {grid-template-columns: 1.1fr 1fr;}
.admin .cols > div > .panel:first-child {margin-top: 16px;}
@media (max-width: 900px) {
.table.clients .tr:not(.th) {grid-template-columns: 1fr auto;}
.table.clients .tr:not(.th) > span {display: block !important;}
.req-top {flex-direction: column;}
}
@media (max-width: 900px) {
.admin .cols {grid-template-columns: 1fr;}
.admin .kpis {grid-template-columns: 1fr 1fr;}
pre.cfg {margin: 0 14px 14px;}
}
.gift-frame {position: relative; margin: 14px; border: 2px dashed #E7B04A; border-radius: 22px; background: linear-gradient(180deg, #FFFBF2 0, transparent 220px); padding-top: 30px !important;}
.gift-ribbon {position: absolute; top: -16px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; padding: 8px 18px 8px 14px; border-radius: 999px; background: #F5A623; color: #3D2600; font-size: 13.5px; box-shadow: 0 8px 22px rgba(245,166,35,.35); z-index: 2;}
.gift-ribbon svg {width: 18px; height: 18px;}
.gift-ribbon b {font-weight: 800;}
.gift-route {position: relative; border-color: #F5D58E !important; background: linear-gradient(180deg, #FFFBF2, #fff) !important;}
.gift-tag {position: absolute; top: -12px; right: 16px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: #F5A623; color: #3D2600; font-size: 12px; font-weight: 800; box-shadow: 0 6px 14px rgba(245,166,35,.3);}
.gift-tag svg {width: 14px; height: 14px;}
@media (max-width: 900px) {
.gift-frame {margin: 10px 8px 8px; padding-top: 22px !important;}
.gift-ribbon {white-space: normal; width: max-content; max-width: calc(100% - 24px); font-size: 12px; text-align: center;}
}
.main.gift-frame {width: auto; min-width: 0;}
.side-gift {display: flex; gap: 10px; align-items: center; margin: 0 4px; padding: 10px 12px; border-radius: var(--r-md); background: #FFF6E3; border: 1.5px dashed #E7B04A; color: #7A5200;}
.side-gift svg {width: 20px; height: 20px; flex: none; color: #F5A623;}
.side-gift span {font-size: 12px; line-height: 1.3;}
.side-gift b {display: block; font-size: 13px; color: #3D2600;}
.nav-gift-tag {font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: #F5A623; color: #3D2600; padding: 2px 7px; border-radius: 999px;}
.create-token {display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center;}
.create-token b {display: block; font-size: 16px;}
.create-token span {font-size: 13.5px; color: var(--g600);}
.prompt-box {white-space: pre-wrap; max-height: 320px; margin-top: 14px !important;}
@media (max-width: 900px) {
.create-token {grid-template-columns: 1fr;}
}
.m-queue {display: none;}
@media (max-width: 900px) {
.desk-only {display: none !important;}
.m-queue {display: grid; gap: 12px; padding: 14px;}
.m-queue.home {padding: 12px 14px 0;}
.counters {display: none;}
.mq-h {display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--g600); margin-top: 4px;}
.mq-h span {background: var(--coral); color: #fff; border-radius: 999px; font-size: 11px; padding: 1px 8px; letter-spacing: 0;}
.mq-card {background: #fff; border: 1.5px solid var(--coral-50); border-left: 4px solid var(--coral); border-radius: 16px; padding: 16px; display: grid; gap: 8px; box-shadow: var(--sh-sm);}
.mq-card.urgent {border-left-color: #C23A27; background: #FFF8F6;}
.mq-top {display: flex; justify-content: space-between; align-items: center;}
.mq-tag {font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--coral-ink);}
.mq-days {display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 800; color: var(--coral-ink); background: var(--coral-50); padding: 4px 10px; border-radius: 999px;}
.mq-days svg {width: 14px; height: 14px;}
.mq-card.urgent .mq-days {background: #C23A27; color: #fff;}
.mq-title {font-size: 18px; font-weight: 800; letter-spacing: -.01em; line-height: 1.3; text-decoration: none; color: var(--black);}
.mq-meta {font-size: 13px; color: var(--g600);}
.mq-acts {display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; margin-top: 6px;}
.mq-acts .btn {min-height: 50px; font-size: 16px;}
.mq-acts .btn svg {width: 18px; height: 18px;}
.mq-change {justify-self: center; border: none; background: none; color: var(--g600); font-weight: 700; font-size: 14px; padding: 8px 12px; text-decoration: underline; text-underline-offset: 3px;}
.mq-row {display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px; background: #fff; border-radius: 14px; text-decoration: none; box-shadow: var(--sh-sm); min-height: 56px;}
.mq-row b {display: block; font-size: 15px; line-height: 1.3;}
.mq-row span {font-size: 12.5px; color: var(--g600);}
.mq-row svg {width: 18px; height: 18px; color: var(--g400); flex: none;}
.mq-empty {display: grid; justify-items: center; gap: 4px; padding: 22px; background: var(--ok-50); border-radius: 16px; color: var(--ok-ink); text-align: center;}
.mq-empty svg {width: 26px; height: 26px;}
.mq-published {margin-top: 4px;}
.mq-published summary {cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--g600); padding: 10px 0;}
.mq-published summary::-webkit-details-marker {display: none;}
.mq-published summary::after {content: "+"; margin-left: auto; color: var(--coral); font-size: 20px;}
.mq-published[open] summary::after {content: "–";}
.mq-published summary span {background: var(--g200); color: var(--g600); border-radius: 999px; font-size: 11px; padding: 1px 8px; letter-spacing: 0;}
.mq-published .mq-row {margin-bottom: 8px;}
}
.m-home, .m-approve-bar {display: none;}
@media (max-width: 900px) {
.app .main .head p, .app .main .head .kicker {display: none;}
.app .main .head .kicker:has(.back) {display: block;}
.app .main .head h1 {font-size: 22px;}
.app.tab-inicio .main .head {display: none;}
.side .brand small {display: none;}
.side {padding: 10px 14px;}
.m-home {display: grid; gap: 14px;}
.mh-hello b {display: block; font-size: 24px; font-weight: 800; letter-spacing: -.02em;}
.mh-hello span {color: var(--g600); font-size: 15px;}
.m-home .m-queue {padding: 0;}
.mh-chips {display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px;}
.mh-chips a {display: grid; gap: 2px; justify-items: start; padding: 12px; background: #fff; border-radius: 14px; text-decoration: none; box-shadow: var(--sh-sm);}
.mh-chips svg {width: 18px; height: 18px; color: var(--coral);}
.mh-chips b {font-size: 22px; font-weight: 800; letter-spacing: -.02em;}
.mh-chips i {font-style: normal; font-size: 12px; color: var(--g400);}
.mh-chips span {font-size: 12px; color: var(--g600); font-weight: 600;}
.app.tab-contenido .panel:has(.m-queue) {background: transparent; box-shadow: none; margin-top: 0;}
.app.tab-contenido .panel:has(.m-queue) .m-queue {padding: 0;}
.m-approve-bar {display: grid; gap: 8px; position: fixed; left: 0; right: 0; bottom: 66px; z-index: 39; padding: 10px 12px; background: rgba(255,255,255,.97); backdrop-filter: blur(8px); border-top: 1px solid var(--g200); box-shadow: 0 -8px 20px rgba(14,14,16,.06);}
.m-approve-bar > div {display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px;}
.m-approve-bar .btn {min-height: 50px; font-size: 16px;}
.m-approve-bar .btn svg {width: 18px; height: 18px;}
.mab-days {display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--coral-ink);}
.mab-days svg {width: 14px; height: 14px;}
.app.tab-contenido:has(.m-approve-bar) {padding-bottom: 210px;}
.reader .doc {font-size: 17px; line-height: 1.7;}
}
.idea-box {display: grid; gap: 10px;}
.idea-add {display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; padding: 16px; border: 2px dashed var(--coral); border-radius: 16px; background: var(--cream); color: var(--black); font: inherit;}
.idea-add svg {width: 22px; height: 22px; color: var(--coral); flex: none;}
.idea-add span {font-size: 13px; color: var(--g600); line-height: 1.4;}
.idea-add b {display: block; font-size: 16px; color: var(--black);}
.idea-form {display: grid; gap: 10px; padding: 16px; background: #fff; border: 1.5px solid var(--coral-50); border-radius: 16px; box-shadow: var(--sh-sm);}
.idea-form label b {display: block; font-size: 16px;}
.idea-form label span {font-size: 13px; color: var(--g600);}
.idea-form textarea {font: inherit; font-size: 16px; min-height: 140px; padding: 12px 14px; border: 1.5px solid var(--g200); border-radius: var(--r-sm); resize: vertical;}
.idea-form textarea:focus {outline: none; border-color: var(--coral); box-shadow: 0 0 0 4px var(--coral-50);}
.idea-acts {display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px;}
.idea-acts .btn {min-height: 48px;}
.idea-item {display: grid; gap: 6px; padding: 12px 14px; background: #fff; border-radius: 14px; box-shadow: var(--sh-sm);}
.idea-item p {font-size: 14.5px;}
.idea-item .pill {justify-self: start;}
.flow .two {display: grid; grid-template-columns: 1fr 1fr; gap: 12px;}
.flow .two > * {min-width: 0;}
.flow textarea {width: 100%; font: inherit; padding: 10px 12px; border: 1px solid var(--g200); border-radius: var(--r-sm); resize: vertical;}
@media (max-width: 560px) {
.flow .two {grid-template-columns: 1fr;}
}
.building {position: relative; display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; background: var(--cream); border: 1px solid var(--coral-50); border-radius: var(--r-lg); padding: 24px 26px; margin-bottom: 22px; box-shadow: var(--sh-md);}
.building h2 {font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin-top: 4px;}
.building p {color: var(--g600); margin-top: 6px; max-width: 640px;}
.b-anim {width: 64px; height: 64px; border-radius: 18px; background: #fff; display: grid; grid-template-columns: repeat(3, 8px); gap: 6px; place-content: center; box-shadow: var(--sh-md);}
.b-anim span {width: 8px; height: 8px; border-radius: 50%; background: var(--coral); animation: bdot 1.2s infinite ease-in-out;}
.b-anim span:nth-child(2) {animation-delay: .15s;}
.b-anim span:nth-child(3) {animation-delay: .3s;}
@keyframes bdot { 0%, 80%, 100% { transform: scale(.6); opacity: .4; } 40% { transform: scale(1); opacity: 1; } }
.b-steps {list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding: 0;}
.b-steps li {font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: var(--pill); background: #fff; color: var(--g400); border: 1px solid var(--g200);}
.b-steps li.done {color: #0F7A3C; border-color: #BDE5CB; background: #EEF9F2;}
.b-steps li.done::before {content: "✓ ";}
.b-steps li.now {color: var(--coral-ink); border-color: var(--coral-50); background: var(--coral-50);}
.b-close {position: absolute; top: 10px; right: 12px; border: 0; background: transparent; font-size: 22px; line-height: 1; color: var(--g400); cursor: pointer; padding: 4px 8px; border-radius: 8px;}
.b-close:hover, .b-close:focus-visible {color: var(--ink); background: #fff;}
@media (max-width: 720px) {
.building {grid-template-columns: 1fr; padding: 20px;}
.b-anim {width: 52px; height: 52px;}
}
@media (prefers-reduced-motion: reduce) {
.b-anim span {animation: none; opacity: 1;}
}
.flow .two {align-items: start;}
.building .b-steps li {display: inline-flex; align-items: center; gap: 4px; line-height: 1.3; margin: 0;}
.building .b-steps li::before {content: none;}
.building .b-steps li.done::before {content: "✓"; position: static;}
.pill.sched {background: #E8EEFF; color: #2440B8;}
.pub-card {display: grid; gap: 12px;}
.rec {display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; background: var(--cream); border: 1px solid var(--coral-50); border-radius: var(--r-md); padding: 12px 14px;}
.rec svg {width: 18px; height: 18px; color: var(--coral); margin-top: 2px;}
.rec small {display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--g400);}
.rec b {display: block; font-size: 17px;}
.rec span {display: block; font-size: 12.5px; color: var(--g600); margin-top: 2px;}
.rec.ok {background: #EEF9F2; border-color: #BDE5CB;}
.rec.ok svg {color: var(--ok-ink);}
.pub-alt {display: grid; grid-template-columns: 1fr 1fr; gap: 8px;}
.link-btn {background: none; border: 0; color: var(--g600); font: inherit; font-size: 13.5px; text-decoration: underline; cursor: pointer; justify-self: center; padding: 4px;}
.link-btn:hover {color: var(--ink);}
.date-form {display: grid; gap: 8px;}
.date-form label {font-size: 13px; font-weight: 700;}
.date-row {display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center;}
.date-row input {font: inherit; padding: 9px 10px; border: 1px solid var(--g200); border-radius: var(--r-sm); min-width: 0;}
.modal-bg {position: fixed; inset: 0; z-index: 80; background: rgba(14,14,16,.55); display: grid; place-items: center; padding: 18px; animation: mfade .2s ease;}
.modal {position: relative; width: min(560px, 100%); max-height: calc(100vh - 36px); overflow: auto; background: #fff; border-radius: var(--r-lg); box-shadow: 0 30px 80px rgba(14,14,16,.35); padding: 28px; display: grid; gap: 10px; animation: mpop .25s cubic-bezier(.2,.8,.2,1);}
.modal h2 {font-size: 24px; font-weight: 800; letter-spacing: -.02em;}
.modal p {color: var(--g600);}
.modal-ok {justify-self: start; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--ok-ink); background: var(--ok-50); padding: 5px 10px; border-radius: var(--pill);}
.modal-ok svg {width: 14px; height: 14px;}
.modal-x {position: absolute; top: 12px; right: 14px; border: 0; background: transparent; font-size: 24px; line-height: 1; color: var(--g400); cursor: pointer; padding: 4px 8px; border-radius: 8px;}
.modal-x:hover, .modal-x:focus-visible {color: var(--ink); background: var(--g100);}
.li-label {display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; margin-top: 6px;}
.li-label svg {width: 18px; height: 18px;}
.modal textarea {width: 100%; font: inherit; font-size: 14px; line-height: 1.5; padding: 12px; border: 1px solid var(--g200); border-radius: var(--r-md); resize: vertical;}
.modal-acts {display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 6px;}
.btn-li {background: #0A66C2; color: #fff; display: inline-flex; align-items: center; gap: 8px;}
.btn-li:hover {background: #084E96;}
.btn-li svg {width: 16px; height: 16px;}
@keyframes mfade { from { opacity: 0; } }
@keyframes mpop { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@media (max-width: 560px) {
.modal {padding: 22px 18px;}
.modal-acts {display: grid; grid-template-columns: 1fr 1fr;}
.modal-acts .btn-li {grid-column: 1 / -1; order: -1; justify-content: center;}
.date-row {grid-template-columns: 1fr 1fr;}
.date-row input {grid-column: 1 / -1;}
}
@media (prefers-reduced-motion: reduce) {
.modal-bg, .modal {animation: none;}
}
.reader .act .rec b {font-size: 17px;}
.reader .act .rec span {font-size: 12.5px;}
.modal-wa {justify-self: start; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: #0B6B34; background: #DFF7E8; padding: 5px 10px; border-radius: var(--pill);}
.modal-wa svg {width: 14px; height: 14px;}
.modal form {display: grid; gap: 12px; margin-top: 6px;}
.modal .two {display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start;}
.modal .two > * {min-width: 0;}
.modal .btn-wa {justify-content: center; display: inline-flex; align-items: center; gap: 8px;}
.modal .btn-wa svg {width: 18px; height: 18px;}
@media (max-width: 560px) {
.modal .two {grid-template-columns: 1fr;}
}

/* Mini-site (Rails): modal opened with #whatsapp, honeypot */
.wa-modal { display: none; }
.wa-modal:target { display: grid; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.field_with_errors { display: contents; }
.form-errors { background: var(--coral-50); color: #C23A27; border-radius: var(--r-sm); padding: 10px 14px; font-size: 14px; }
html.js .wa-modal:target { display: none; }
html.js .wa-modal.open { display: grid; }
.sources { margin-top: 28px; font-size: 14px; color: var(--g600); }
.sources h2 { font-size: 18px; }
.lead-form > *, .lead-form .two > * { min-width: 0; }
.lead-form form, .modal form { grid-template-columns: minmax(0, 1fr); }
.field input, .field select, .field textarea { width: 100%; }
.login-form { display: grid; gap: 12px; text-align: left; margin-top: 16px; }
/* Panel (Rails) */
.flash { border-radius: var(--r-md); padding: 12px 16px; margin-bottom: 16px; font-weight: 600; font-size: 14px; }
.flash.ok { background: var(--ok-50); color: var(--ok-ink); }
.flash.err { background: var(--coral-50); color: #C23A27; }
.side .bottom form { margin: 0; }
.link-out { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: 0; padding: 10px 12px; border-radius: 10px; font: inherit; font-weight: 600; color: var(--g600); cursor: pointer; }
.link-out:hover { background: var(--g100); color: var(--black); }
.link-out svg { width: 18px; height: 18px; }
.inline-form { display: inline; }
.inline-form .btn { width: 100%; }
.li-modal { display: grid; }
.li-box { white-space: pre-wrap; margin-top: 10px; }
.idea-toggle > summary { list-style: none; cursor: pointer; }
.idea-toggle > summary::-webkit-details-marker { display: none; }
.idea-toggle[open] > summary { display: none; }
.copy-note { margin-top: 10px; }
.request-form, .account-form { display: grid; gap: 12px; padding: 16px 20px 8px; }
.request-form .two, .account-form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.request-form .two > *, .account-form .two > * { min-width: 0; }
.list li { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
@media (max-width: 720px) { .request-form .two, .account-form .two { grid-template-columns: 1fr; } }
.admin-form { display: grid; gap: 12px; }
.admin-form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.admin-form .two > * { min-width: 0; }
.status-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 14px; }
.inline-add { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.inline-add input[type=email], .inline-add input[type=text] { flex: 1; min-width: 180px; font: inherit; padding: 9px 12px; border: 1.5px solid var(--g200); border-radius: var(--r-sm); }
.table.clients .tr { grid-template-columns: 2fr 1fr .7fr .9fr 1.1fr; }
.table.clients small { display: block; }
details.req { border-top: 1px solid var(--g100); padding: 12px 18px; }
details.req summary { cursor: pointer; }
code.token { display: block; word-break: break-all; background: var(--g100); padding: 12px; border-radius: 10px; font-family: var(--mono); font-size: 13px; }
@media (max-width: 720px) { .admin-form .two { grid-template-columns: 1fr; } .table.clients .tr { grid-template-columns: 1fr; } }
.flow .box form { display: grid; gap: 14px; }
.legal { padding-top: 40px; }
.legal .content { font-size: 16px; line-height: 1.7; }
.legal .content ul, .legal .content ol { margin: 0 0 18px 22px; }
.legal .content li { margin-bottom: 6px; }
.legal .content table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
.legal .content th, .legal .content td { border: 1px solid var(--g200); padding: 10px 12px; text-align: left; vertical-align: top; }
.legal .content th { background: var(--g100); font-weight: 700; }
.legal .content blockquote { background: var(--coral-50); border-radius: var(--r-md); padding: 16px 20px; margin-bottom: 18px; }
.legal .content blockquote p:last-child { margin-bottom: 0; }
.legal .content code { font-family: var(--mono); font-size: .9em; background: var(--g100); padding: 1px 6px; border-radius: 6px; }
.profile-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.profile-nav a { font-size: 13px; font-weight: 600; text-decoration: none; padding: 6px 12px; border-radius: var(--pill); background: #fff; border: 1px solid var(--g200); color: var(--g600); }
.profile-nav a:hover { border-color: var(--coral); color: var(--coral-ink); }
.check-list { display: grid; gap: 6px; }
.check-row { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.check-row label { display: flex; gap: 6px; align-items: center; }
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 14px; }
.service-grid b { display: block; margin-bottom: 6px; }
details.item { border-top: 1px solid var(--g100); padding: 10px 18px; }
details.item > summary { cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 14.5px; }
details.item > summary::-webkit-details-marker { display: none; }
details.item.add > summary { color: var(--coral-ink); font-weight: 700; }
.item-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; padding: 12px 0 4px; }
.item-form .wide, .item-form .consent, .item-form .item-acts { grid-column: 1 / -1; }
.item-form .field input, .item-form .field select, .item-form .field textarea { font: inherit; font-size: 14px; padding: 9px 11px; }
@media (max-width: 720px) { .item-form, .service-grid { grid-template-columns: 1fr; } }
.mail-frame { display: block; width: 100%; height: 720px; border: 0; border-top: 1px solid var(--g100); background: #fff; }
.mail-text { white-space: pre-wrap; font-family: var(--mono); font-size: 13px; }
.plans { border: 0; display: grid; gap: 10px; }
.plan { position: relative; display: grid; gap: 6px; padding: 14px 16px 14px 44px; border: 1.5px solid var(--g200); border-radius: var(--r-md); cursor: pointer; transition: border-color .15s, background .15s; }
.plan:hover { border-color: var(--g400); }
.plan:has(input:checked) { border-color: var(--coral); background: var(--coral-50); }
.plan:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--coral-50); }
.plan input { position: absolute; left: 16px; top: 17px; accent-color: var(--coral); width: 16px; height: 16px; }
.plan-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.plan-price { font-weight: 800; font-size: 17px; letter-spacing: -.01em; }
.plan .pill { justify-self: start; }
.plan ul { margin: 0 0 0 18px; font-size: 13.5px; color: var(--g600); display: grid; gap: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Layout safety: cards contain their margins, grid columns and long words never push content out. */
.panel {display: flow-root;}
.panel > :is(.table, .pend, .tip):first-child {margin-top: 20px;}
.panel > :is(.table, .pend, .tip):last-child {margin-bottom: 20px;}
.cols > *, .tr > *, .pend > div, details.item > summary > span {min-width: 0;}
.li-box, .tr > span, .pend span, details.item > summary > span {overflow-wrap: break-word;}
@media (max-width: 900px) {
  .panel > :is(.table, .pend, .tip):first-child {margin-top: 14px;}
  .panel > :is(.table, .pend, .tip):last-child {margin-bottom: 14px;}
}

/* Visual review fixes */
.post b {letter-spacing: 0; word-spacing: .04em;}
.about ul {align-content: start;}
.ticks li {position: relative; padding-left: 22px;}
.ticks li::before {position: absolute; left: 0; margin-right: 0;}
.faq.ext summary {justify-content: space-between;}
.consent input, .colegiado svg, .meta.icons svg {flex: none;}
.art .content :is(h2, h3), .legal .content :is(h2, h3) {line-height: 1.2;}
.reader .doc ul {font-size: inherit;}
.table-scroll {overflow-x: auto; margin-bottom: 18px; -webkit-overflow-scrolling: touch;}
@media (max-width: 900px) { .legal .content .table-scroll table {min-width: 680px;} }
.list .add .link-btn {text-decoration: none; color: var(--coral-ink); font-weight: 700; font-size: 14px;}
.list .add .link-btn:hover {text-decoration: underline;}
@media (max-width: 900px) { .request-form, .account-form { padding: 14px 14px 8px; } }
@media (max-width: 900px) {
  /* An odd last tile takes the whole row instead of leaving a hole */
  .kpis > :last-child:nth-child(odd) {grid-column: 1 / -1;}
  /* Contacts on phones: name | origin, then phone, email, and type | date; consent is always given */
  .table.contacts .tr:not(.th) {grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px;}
  .table.contacts .tr:not(.th) > span:nth-child(1) {grid-column: 1; grid-row: 1;}
  .table.contacts .tr:not(.th) > span:nth-child(4) {grid-column: 2; grid-row: 1;}
  .table.contacts .tr:not(.th) > span:nth-child(2), .table.contacts .tr:not(.th) > span:nth-child(3) {grid-column: 1 / -1; grid-row: auto;}
  .table.contacts .tr:not(.th) > span:nth-child(6) {grid-column: 1; grid-row: 4;}
  .table.contacts .tr:not(.th) > span:nth-child(5) {grid-column: 2; grid-row: 4; text-align: right;}
  .table.contacts .tr:not(.th) > span:nth-child(7) {display: none !important;}
}
.ms-hero .photo.initials {display: grid; place-items: center; background: var(--coral-50); color: var(--coral-ink); font-size: 46px; font-weight: 800; letter-spacing: -.02em;}

/* Mini-site review: the doctor has 3 days to look at it before it is published */
.site-review .ic-tile {width: 64px; height: 64px; border-radius: 18px;}
.sr-actions {display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px;}
.sr-actions form {display: contents;}
.sr-changes {margin-top: 14px;}
.sr-changes summary {cursor: pointer; font-weight: 700; color: var(--coral-ink); width: fit-content;}
.sr-changes summary:focus-visible {outline: 2px solid var(--coral); outline-offset: 3px; border-radius: 6px;}
.sr-changes form {display: grid; gap: 8px; margin-top: 10px; max-width: 640px;}
.sr-changes label {font-size: 13px; font-weight: 600; color: var(--g600);}
.sr-changes textarea {width: 100%; font: inherit; padding: 10px 12px; border: 1px solid var(--g200); border-radius: var(--r-md); background: #fff; resize: vertical;}
.sr-changes textarea:focus {outline: none; border-color: var(--coral);}
.sr-changes .btn {justify-self: start;}
.preview-bar {position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 20px; background: var(--black); color: #fff; font-size: 14px;}
.preview-bar b {color: var(--coral);}
@media (max-width: 720px) {
.site-review .ic-tile {width: 52px; height: 52px;}
.preview-bar {padding: 10px 14px; font-size: 13px;}
}

/* Radar questions (HBE panel) */
.table.batteries .tr {grid-template-columns: 1.6fr 1.6fr .8fr .6fr;}
.rd-own {background: var(--cream);}
.link-strong {font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-offset: 3px;}
.link-strong:hover, .link-strong:focus-visible {color: var(--coral-ink);}
.rd-qlist {margin: 8px 0 16px; padding-left: 22px; display: grid; gap: 6px;}
.rd-qlist li.off {color: var(--g400);}
.versions {margin-top: 6px;}
.versions ul {list-style: none; display: grid; gap: 4px; font-size: 13.5px; color: var(--g600); margin-bottom: 10px;}