/* Estética María Camila — tokens (generado desde tokens.json del sistema de diseño) */
:root {
  --brand: #c2186b;
  --brand-hover: #a3125a;
  --brand-vivid: #e6338c;
  --on-brand: #ffffff;
  --gold: #b8893a;
  --gold-strong: #82591a;
  --surface: #ffffff;
  --surface-soft: #fff6fa;
  --surface-tint: #fce7f1;
  --surface-raised: #ffffff;
  --surface-inverse: #2a1420;
  --ink: #2a1420;
  --ink-muted: #6e5462;
  --ink-inverse: #fbeff5;
  --ink-inverse-muted: #d9c3cf;
  --border: #ead7e1;
  --border-strong: #9d7a8c;
  --focus: #7a1048;
  --focus-inverse: #ffb3d6;
  --brand-inverse: #ff8cc0;
  --whatsapp: #0e7a47;
  --on-whatsapp: #ffffff;
  --success: #1e7a4a;
  --success-soft: #e3f4ea;
  --warning: #8f5300;
  --warning-soft: #fff1d6;
  --danger: #b3261e;
  --danger-soft: #fde8e6;
  --info: #1d5fa3;
  --info-soft: #e5effa;
  --overlay: #2a14208f;
  --neutral-50: #fbf8fa;
  --neutral-100: #f3edf1;
  --neutral-200: #e6dce2;
  --neutral-300: #cdbec7;
  --neutral-400: #a6929e;
  --neutral-500: #7f6b77;
  --neutral-600: #5f4d58;
  --neutral-700: #45363f;
  --neutral-800: #2f242b;
  --neutral-900: #1c1519;
  --shadow-sm: 0 1px 2px #2a142014, 0 2px 6px #2a14200f;
  --shadow-md: 0 6px 20px #2a14201f;
  --shadow-lg: 0 18px 48px #2a142029;
  --space-0: 0px;
  --space-half: 4px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;
  --space-10: 80px;
  --space-12: 96px;
  --space-16: 128px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --dur-instant: 100ms;
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 360ms;
  --dur-page: 480ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter: cubic-bezier(0, 0, 0.2, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --ease-soft: cubic-bezier(0.34, 1.3, 0.64, 1);
  --z-header: 40;
  --z-float: 50;
  --z-overlay: 60;
  --z-dialog: 70;
  --z-toast: 80;
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-sans: Manrope, "Segoe UI", system-ui, sans-serif;
  --font-script: "Great Vibes", "Brush Script MT", cursive;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand: #ff6aae;
    --brand-hover: #ff8cc0;
    --brand-vivid: #f0479a;
    --on-brand: #2a0617;
    --gold: #e0b566;
    --gold-strong: #ebc77f;
    --surface: #170d13;
    --surface-soft: #1e121a;
    --surface-tint: #3a1529;
    --surface-raised: #251720;
    --surface-inverse: #fbeff5;
    --ink: #f9eef4;
    --ink-muted: #cdb6c3;
    --ink-inverse: #2a1420;
    --ink-inverse-muted: #6e5462;
    --border: #3d2a35;
    --border-strong: #8c6f7f;
    --focus: #ffb3d6;
    --focus-inverse: #7a1048;
    --brand-inverse: #a3125a;
    --whatsapp: #3ddc84;
    --on-whatsapp: #052e19;
    --success: #5fd196;
    --success-soft: #12301f;
    --warning: #f2b24c;
    --warning-soft: #33240a;
    --danger: #ff8a80;
    --danger-soft: #3a1311;
    --info: #7fb6f5;
    --info-soft: #10233a;
    --overlay: #000000a3;
    --shadow-sm: 0 1px 2px #00000066, 0 2px 6px #0000004d;
    --shadow-md: 0 6px 20px #00000080;
    --shadow-lg: 0 18px 48px #00000099;
  }
}
:root[data-theme="dark"] {
  --brand: #ff6aae;
  --brand-hover: #ff8cc0;
  --brand-vivid: #f0479a;
  --on-brand: #2a0617;
  --gold: #e0b566;
  --gold-strong: #ebc77f;
  --surface: #170d13;
  --surface-soft: #1e121a;
  --surface-tint: #3a1529;
  --surface-raised: #251720;
  --surface-inverse: #fbeff5;
  --ink: #f9eef4;
  --ink-muted: #cdb6c3;
  --ink-inverse: #2a1420;
  --ink-inverse-muted: #6e5462;
  --border: #3d2a35;
  --border-strong: #8c6f7f;
  --focus: #ffb3d6;
  --focus-inverse: #7a1048;
  --brand-inverse: #a3125a;
  --whatsapp: #3ddc84;
  --on-whatsapp: #052e19;
  --success: #5fd196;
  --success-soft: #12301f;
  --warning: #f2b24c;
  --warning-soft: #33240a;
  --danger: #ff8a80;
  --danger-soft: #3a1311;
  --info: #7fb6f5;
  --info-soft: #10233a;
  --overlay: #000000a3;
  --shadow-sm: 0 1px 2px #00000066, 0 2px 6px #0000004d;
  --shadow-md: 0 6px 20px #00000080;
  --shadow-lg: 0 18px 48px #00000099;
}


/* Estética María Camila — estilos de componentes. Todos los valores salen de tokens.json. */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-sans); font-size: 16px; line-height: 26px; background: var(--surface); color: var(--ink); -webkit-font-smoothing: antialiased; }
.mc-pad { padding: var(--space-3); }
.mc-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; padding: var(--space-3); }
.mc-stack { display: grid; gap: var(--space-2); padding: var(--space-3); }
.mc-grid { display: grid; gap: var(--space-3); padding: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.mc-label-state { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-muted); margin: 0 0 var(--space-half); }
.mc-display { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }
.mc-over { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-strong); margin: 0; }
.mc-muted { color: var(--ink-muted); }
.mc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible, .is-focus { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Botón */
.mc-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); min-height: 48px; padding: 0 var(--space-3); border-radius: var(--radius-pill); border: 1.5px solid transparent; font: 600 16px/20px var(--font-sans); cursor: pointer; text-decoration: none; transition: background-color var(--dur-instant) var(--ease-standard), color var(--dur-instant) var(--ease-standard), transform var(--dur-instant) var(--ease-standard); }
.mc-btn:active { transform: scale(0.98); }
.mc-btn--primary { background: var(--brand); color: var(--on-brand); }
.mc-btn--primary:hover, .mc-btn--primary.is-hover { background: var(--brand-hover); }
.mc-btn--secondary { background: transparent; color: var(--brand); border-color: var(--brand); }
.mc-btn--secondary:hover, .mc-btn--secondary.is-hover { background: var(--surface-tint); }
.mc-btn--ghost { background: var(--surface-tint); color: var(--ink); }
.mc-btn--ghost:hover, .mc-btn--ghost.is-hover { color: var(--brand); }
.mc-btn--text { background: none; color: var(--brand); padding: 0 var(--space-1); min-height: 44px; text-decoration: underline; text-underline-offset: 4px; }
.mc-btn--sm { min-height: 40px; padding: 0 var(--space-2); font-size: 14px; }
.mc-btn--block { width: 100%; }
.mc-btn[disabled], .mc-btn.is-disabled { background: var(--neutral-300); color: var(--neutral-700); border-color: transparent; cursor: not-allowed; }
.mc-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: mc-spin 800ms linear infinite; }
@keyframes mc-spin { to { transform: rotate(360deg); } }

/* Botón de ícono */
.mc-iconbtn { width: 44px; height: 44px; display: inline-grid; place-items: center; border-radius: var(--radius-pill); border: 1.5px solid var(--border); background: var(--surface-raised); color: var(--ink); cursor: pointer; }
.mc-iconbtn:hover, .mc-iconbtn.is-hover { border-color: var(--brand); color: var(--brand); }
.mc-iconbtn svg { width: 20px; height: 20px; }

/* WhatsApp */
.mc-wa { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 44px; padding: 0 var(--space-2); border-radius: var(--radius-pill); background: var(--whatsapp); color: var(--on-whatsapp); font: 600 15px/20px var(--font-sans); border: 0; cursor: pointer; text-decoration: none; }
.mc-wa svg { width: 18px; height: 18px; fill: currentColor; }
.mc-wa--outline { background: transparent; color: var(--whatsapp); border: 1.5px solid var(--whatsapp); }
.mc-wa-float { position: relative; width: 60px; height: 60px; border-radius: var(--radius-pill); background: var(--whatsapp); color: var(--on-whatsapp); display: grid; place-items: center; box-shadow: var(--shadow-lg); border: 0; }
.mc-wa-float svg { width: 30px; height: 30px; fill: currentColor; }
.mc-wa-float .mc-dot { position: absolute; top: 2px; right: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--brand); border: 2px solid var(--surface); }
.mc-wa-tip { background: var(--surface-inverse); color: var(--ink-inverse); padding: var(--space-1) var(--space-2); border-radius: var(--radius-md); font-size: 14px; line-height: 20px; box-shadow: var(--shadow-md); }

/* Enlace */
.mc-link { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; font-weight: 600; }
.mc-link:hover, .mc-link.is-hover { text-decoration-thickness: 2px; }
.mc-link--inverse { color: var(--brand-inverse); }

/* Header */
.mc-header { display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-3); height: 72px; background: var(--surface); border-bottom: 1px solid var(--border); }
.mc-header.is-scrolled { box-shadow: var(--shadow-md); height: 60px; }
.mc-logo { font-family: var(--font-script); font-size: 30px; line-height: 1; color: var(--brand); text-decoration: none; white-space: nowrap; }
.mc-logo small { display: block; font: 700 9px/12px var(--font-sans); letter-spacing: 0.3em; color: var(--gold-strong); text-transform: uppercase; margin-top: 2px; text-align: center; }
.mc-nav { display: flex; gap: var(--space-3); margin-left: auto; }
.mc-nav a { color: var(--ink); text-decoration: none; font: 600 15px/20px var(--font-sans); padding: var(--space-1) 0; border-bottom: 2px solid transparent; }
.mc-nav a[aria-current="page"], .mc-nav a:hover { color: var(--brand); border-bottom-color: var(--brand); }

/* Menú móvil */
.mc-mobile { width: 320px; background: var(--surface-raised); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-2); }
.mc-mobile a { display: flex; justify-content: space-between; align-items: center; min-height: 52px; padding: 0 var(--space-1); color: var(--ink); text-decoration: none; font: 600 17px/24px var(--font-sans); border-bottom: 1px solid var(--border); }
.mc-mobile a span { color: var(--ink-muted); }

/* Migas */
.mc-crumbs { display: flex; flex-wrap: wrap; gap: var(--space-1); list-style: none; margin: 0; padding: 0; font-size: 14px; line-height: 22px; color: var(--ink-muted); }
.mc-crumbs li + li::before { content: "›"; margin-right: var(--space-1); color: var(--ink-muted); }
.mc-crumbs a { color: var(--ink-muted); }
.mc-crumbs [aria-current] { color: var(--ink); font-weight: 600; }

/* Pestañas */
.mc-tabs { display: flex; gap: var(--space-3); border-bottom: 1px solid var(--border); overflow-x: auto; }
.mc-tab { background: none; border: 0; border-bottom: 3px solid transparent; padding: var(--space-1) 0 var(--space-1); min-height: 44px; font: 600 15px/20px var(--font-sans); color: var(--ink-muted); cursor: pointer; white-space: nowrap; }
.mc-tab[aria-selected="true"] { color: var(--brand); border-bottom-color: var(--brand); }
.mc-tabpanel { padding: var(--space-2) 0; color: var(--ink); }

/* Chips / selector de ciudad */
.mc-chips { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.mc-chip { min-height: 40px; padding: 0 var(--space-2); border-radius: var(--radius-pill); border: 1.5px solid var(--border-strong); background: var(--surface-raised); color: var(--ink); font: 600 14px/20px var(--font-sans); cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-half); }
.mc-chip[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.mc-chip[aria-disabled="true"] { border-style: dashed; color: var(--ink-muted); cursor: not-allowed; }

/* Pasos */
.mc-steps { display: flex; gap: var(--space-1); list-style: none; padding: 0; margin: 0; counter-reset: s; }
.mc-step { flex: 1; display: grid; gap: var(--space-half); font: 600 13px/18px var(--font-sans); color: var(--ink-muted); counter-increment: s; }
.mc-step::before { content: counter(s); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--border-strong); color: var(--ink-muted); background: var(--surface); }
.mc-step.is-done::before { content: "✓"; background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.mc-step.is-current { color: var(--brand); }
.mc-step.is-current::before { border-color: var(--brand); color: var(--brand); background: var(--surface-tint); }

/* Campos */
.mc-field { display: grid; gap: var(--space-half); max-width: 360px; }
.mc-field label, .mc-legend { font: 600 14px/20px var(--font-sans); color: var(--ink); }
.mc-input, .mc-select, .mc-textarea { width: 100%; min-height: 48px; padding: 0 var(--space-2); border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-raised); color: var(--ink); font: 400 16px/24px var(--font-sans); }
.mc-textarea { padding: var(--space-1) var(--space-2); min-height: 112px; resize: vertical; }
.mc-input::placeholder, .mc-textarea::placeholder { color: var(--ink-muted); }
.mc-input:focus, .mc-input.is-focus, .mc-select:focus, .mc-textarea:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--brand); }
.mc-field.is-error .mc-input, .mc-field.is-error .mc-textarea { border-color: var(--danger); }
.mc-help { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.mc-error { font-size: 14px; line-height: 20px; color: var(--danger); font-weight: 600; }
.mc-input[disabled] { background: var(--neutral-100); color: var(--neutral-600); border-color: var(--neutral-300); }
.mc-phone { display: flex; }
.mc-phone .mc-prefix { display: grid; place-items: center; padding: 0 var(--space-2); border: 1.5px solid var(--border-strong); border-right: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); background: var(--surface-tint); font-weight: 700; color: var(--ink); }
.mc-phone .mc-input { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.mc-select { appearance: none; background-image: none; padding-right: var(--space-5); }
.mc-select-wrap { position: relative; }
.mc-select-wrap::after { content: "▾"; position: absolute; right: var(--space-2); top: 12px; color: var(--ink-muted); pointer-events: none; }

/* Casilla */
.mc-check { display: flex; gap: var(--space-1); align-items: flex-start; font-size: 14px; line-height: 22px; color: var(--ink); max-width: 420px; }
.mc-check input { appearance: none; width: 22px; height: 22px; flex: none; margin: 1px 0 0; border: 1.5px solid var(--border-strong); border-radius: 6px; background: var(--surface-raised); display: grid; place-items: center; }
.mc-check input:checked { background: var(--brand); border-color: var(--brand); }
.mc-check input:checked::after { content: "✓"; color: var(--on-brand); font-size: 14px; line-height: 1; }
.mc-check.is-error input { border-color: var(--danger); }

/* Tarjeta de opción */
.mc-radiocards { display: grid; gap: var(--space-1); grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.mc-radiocard { position: relative; display: grid; gap: 2px; padding: var(--space-2); border: 1.5px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface-raised); cursor: pointer; }
.mc-radiocard input { position: absolute; opacity: 0; }
.mc-radiocard strong { font-size: 15px; line-height: 20px; }
.mc-radiocard span { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.mc-radiocard.is-selected { border-color: var(--brand); background: var(--surface-tint); box-shadow: inset 0 0 0 1px var(--brand); }

/* Horarios */
.mc-slots { display: grid; gap: var(--space-1); grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); max-width: 460px; }
.mc-slot { min-height: 44px; border-radius: var(--radius-sm); border: 1.5px solid var(--border-strong); background: var(--surface-raised); color: var(--ink); font: 600 14px/20px var(--font-sans); cursor: pointer; }
.mc-slot[aria-pressed="true"] { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.mc-slot[disabled] { background: var(--neutral-100); color: var(--neutral-500); border-color: var(--border); text-decoration: line-through; cursor: not-allowed; }

/* Tarjetas */
.mc-card { display: flex; flex-direction: column; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard); color: var(--ink); }
.mc-card:hover, .mc-card.is-hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.mc-card__body { display: grid; gap: var(--space-1); padding: var(--space-3); flex: 1; }
.mc-card__title { margin: 0; font: 700 19px/26px var(--font-sans); }
.mc-card__text { margin: 0; font-size: 15px; line-height: 24px; color: var(--ink-muted); }
.mc-card__meta { display: flex; flex-wrap: wrap; gap: var(--space-1); font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.mc-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 0 var(--space-3) var(--space-3); }
.mc-media { aspect-ratio: 4 / 3; background: var(--surface-tint); display: grid; place-items: center; color: var(--ink-muted); font-size: 13px; position: relative; }
.mc-media--wide { aspect-ratio: 16 / 9; }
.mc-media--square { aspect-ratio: 1 / 1; }
.mc-media svg { width: 56px; height: 56px; fill: none; stroke: var(--gold); stroke-width: 1.5; }
.mc-price { font: 700 20px/26px var(--font-sans); color: var(--ink); }
.mc-price small { display: block; font: 500 12px/16px var(--font-sans); color: var(--ink-muted); }
.mc-price s { color: var(--ink-muted); font-weight: 500; font-size: 14px; margin-right: var(--space-half); }
.mc-card--featured { border: 2px solid var(--gold); }
.mc-card--cat { position: relative; }
.mc-card--cat .mc-card__body { background: var(--surface-tint); }
.mc-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-half); font-size: 14px; line-height: 20px; }
.mc-list li::before { content: "✓"; color: var(--brand); font-weight: 700; margin-right: var(--space-1); }
.mc-avatar { width: 96px; height: 96px; border-radius: 50%; background: var(--surface-tint); border: 2px solid var(--gold); display: grid; place-items: center; font: 600 32px/1 var(--font-display); color: var(--brand); margin: var(--space-3) auto 0; }
.mc-stars { color: var(--gold); letter-spacing: 2px; font-size: 16px; }
.mc-quote { margin: 0; font: 500 italic 20px/30px var(--font-display); color: var(--ink); }
.mc-open { display: inline-flex; align-items: center; gap: var(--space-half); font: 700 13px/18px var(--font-sans); color: var(--success); }
.mc-open::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.mc-open.is-closed { color: var(--ink-muted); }

/* Insignias */
.mc-badge { display: inline-flex; align-items: center; gap: var(--space-half); min-height: 24px; padding: 0 10px; border-radius: var(--radius-pill); font: 700 11px/16px var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; background: var(--surface-tint); color: var(--brand); white-space: nowrap; }
.mc-badge--gold { background: var(--surface); color: var(--gold-strong); box-shadow: inset 0 0 0 1px var(--gold); }
.mc-badge--info { background: var(--info-soft); color: var(--info); }
.mc-badge--success { background: var(--success-soft); color: var(--success); }
.mc-badge--warning { background: var(--warning-soft); color: var(--warning); }
.mc-badge--neutral { background: var(--neutral-100); color: var(--neutral-700); }
.mc-media .mc-badge { position: absolute; top: var(--space-1); left: var(--space-1); }

/* Hero */
.mc-hero { display: grid; gap: var(--space-4); grid-template-columns: 1.1fr 1fr; align-items: center; padding: var(--space-5) var(--space-4); background: var(--surface-soft); border-radius: var(--radius-xl); }
.mc-hero h1 { margin: 0; font: 600 52px/58px var(--font-display); letter-spacing: -0.01em; color: var(--ink); }
.mc-hero p { margin: 0; font-size: 18px; line-height: 28px; color: var(--ink-muted); max-width: 46ch; }
.mc-hero__copy { display: grid; gap: var(--space-2); }
.mc-hero .mc-media { border-radius: var(--radius-xl); aspect-ratio: 4 / 5; }
.mc-hero .mc-script { font-family: var(--font-script); font-size: 34px; line-height: 40px; color: var(--brand); }

/* Barra de confianza */
.mc-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); padding: var(--space-3); border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold); }
.mc-trust div { display: grid; gap: 2px; text-align: center; }
.mc-trust strong { font: 600 36px/40px var(--font-display); color: var(--brand); }
.mc-trust span { font-size: 13px; line-height: 18px; color: var(--ink-muted); }

/* Antes y después */
.mc-ba { position: relative; display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--radius-lg); overflow: hidden; max-width: 520px; }
.mc-ba > div { aspect-ratio: 3 / 4; display: grid; place-items: end start; padding: var(--space-1); }
.mc-ba .is-before { background: var(--neutral-200); }
.mc-ba .is-after { background: var(--surface-tint); }
.mc-ba .mc-badge { background: var(--surface-inverse); color: var(--ink-inverse); }
.mc-ba__handle { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: var(--surface); transform: translateX(-1px); }
.mc-ba__handle::after { content: "‹ ›"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; background: var(--surface); color: var(--brand); display: grid; place-items: center; font-weight: 700; box-shadow: var(--shadow-md); }
.mc-ba-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: 14px; line-height: 20px; color: var(--ink-muted); padding-top: var(--space-1); max-width: 520px; }

/* Acordeón */
.mc-acc { border-top: 1px solid var(--border); max-width: 640px; }
.mc-acc details { border-bottom: 1px solid var(--border); }
.mc-acc summary { list-style: none; display: flex; justify-content: space-between; gap: var(--space-2); align-items: center; min-height: 56px; cursor: pointer; font: 600 16px/24px var(--font-sans); color: var(--ink); }
.mc-acc summary::-webkit-details-marker { display: none; }
.mc-acc summary::after { content: "+"; font-size: 24px; color: var(--brand); transition: transform var(--dur-base) var(--ease-standard); }
.mc-acc details[open] summary::after { transform: rotate(45deg); }
.mc-acc p { margin: 0 0 var(--space-2); color: var(--ink-muted); }

/* Avisos */
.mc-notice { display: flex; gap: var(--space-1); padding: var(--space-2); border-radius: var(--radius-md); font-size: 15px; line-height: 22px; max-width: 560px; }
.mc-notice strong { display: block; }
.mc-notice__icon { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 700 13px/1 var(--font-sans); color: var(--surface); }
.mc-notice--info { background: var(--info-soft); color: var(--info); } .mc-notice--info .mc-notice__icon { background: var(--info); }
.mc-notice--success { background: var(--success-soft); color: var(--success); } .mc-notice--success .mc-notice__icon { background: var(--success); }
.mc-notice--warning { background: var(--warning-soft); color: var(--warning); } .mc-notice--warning .mc-notice__icon { background: var(--warning); }
.mc-notice--danger { background: var(--danger-soft); color: var(--danger); } .mc-notice--danger .mc-notice__icon { background: var(--danger); }
.mc-notice--results { background: var(--surface-soft); color: var(--ink-muted); border: 1px dashed var(--border-strong); font-size: 13px; line-height: 20px; }

/* Toast */
.mc-toast { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2); border-radius: var(--radius-md); background: var(--surface-inverse); color: var(--ink-inverse); box-shadow: var(--shadow-lg); max-width: 420px; font-size: 15px; line-height: 22px; }
.mc-toast a { color: var(--brand-inverse); font-weight: 700; margin-left: auto; }
.mc-toast__ok { color: var(--brand-inverse); font-weight: 700; }

/* Diálogo */
.mc-scrim { background: var(--overlay); padding: var(--space-4); border-radius: var(--radius-lg); display: grid; place-items: center; }
.mc-dialog { width: min(440px, 100%); background: var(--surface-raised); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-3); display: grid; gap: var(--space-2); }
.mc-dialog h2 { margin: 0; font: 600 26px/32px var(--font-display); }
.mc-dialog p { margin: 0; color: var(--ink-muted); }
.mc-dialog__actions { display: flex; gap: var(--space-1); justify-content: flex-end; flex-wrap: wrap; }

/* Skeleton */
.mc-skel { background: var(--neutral-100); border-radius: var(--radius-sm); animation: mc-pulse 1400ms var(--ease-standard) infinite; }
.mc-skel-dark { background: var(--neutral-800); }
@keyframes mc-pulse { 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .mc-skel, .mc-spin { animation: none; } .mc-card, .mc-btn { transition: none; } }

/* Línea de proceso */
.mc-process { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: p; max-width: 520px; }
.mc-process li { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: var(--space-2); padding-bottom: var(--space-3); counter-increment: p; }
.mc-process li::before { content: counter(p); width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-tint); color: var(--brand); font: 700 15px/1 var(--font-sans); border: 1.5px solid var(--gold); }
.mc-process li:not(:last-child)::after { content: ""; position: absolute; left: 19px; top: 40px; bottom: 0; width: 2px; background: var(--border); }
.mc-process strong { display: block; font-size: 16px; line-height: 22px; }
.mc-process span { font-size: 14px; line-height: 20px; color: var(--ink-muted); }

/* Banner de promoción */
.mc-promo { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; justify-content: space-between; padding: var(--space-3); border-radius: var(--radius-xl); background: var(--surface-tint); border: 1px solid var(--gold); }
.mc-promo h3 { margin: 0; font: 600 28px/34px var(--font-display); }
.mc-promo p { margin: 0; color: var(--ink-muted); font-size: 15px; line-height: 22px; }

/* Banner de cookies */
.mc-cookies { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--surface-inverse); color: var(--ink-inverse); font-size: 14px; line-height: 22px; }
.mc-cookies p { margin: 0; flex: 1 1 280px; }
.mc-cookies a { color: var(--brand-inverse); }
.mc-cookies .mc-btn--secondary { color: var(--ink-inverse); border-color: var(--ink-inverse); }
.mc-cookies .mc-btn--secondary:hover { background: transparent; }
.mc-cookies :focus-visible { outline-color: var(--focus-inverse); }

/* Footer */
.mc-footer { background: var(--surface-inverse); color: var(--ink-inverse-muted); padding: var(--space-5) var(--space-4) var(--space-3); border-radius: var(--radius-lg); font-size: 14px; line-height: 22px; }
.mc-footer__cols { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--space-3); }
.mc-footer h4 { margin: 0 0 var(--space-1); color: var(--ink-inverse); font: 700 13px/18px var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; }
.mc-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-half); }
.mc-footer a { color: var(--ink-inverse-muted); text-decoration: none; }
.mc-footer a:hover { color: var(--brand-inverse); text-decoration: underline; }
.mc-footer .mc-logo { color: var(--brand-inverse); }
.mc-footer__legal { border-top: 1px solid var(--ink-inverse-muted); margin-top: var(--space-4); padding-top: var(--space-2); font-size: 12px; line-height: 18px; display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: space-between; }
.mc-footer :focus-visible { outline-color: var(--focus-inverse); }

@media (max-width: 767px) {
  .mc-hero { grid-template-columns: 1fr; padding: var(--space-3) var(--space-2); }
  .mc-hero h1 { font-size: 40px; line-height: 44px; }
  .mc-trust { grid-template-columns: repeat(2, 1fr); }
  .mc-footer__cols { grid-template-columns: 1fr 1fr; }
  .mc-nav { display: none; }
}

/* Estética María Camila — maquetación del sitio (mobile-first) */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0ms !important; transition-duration: 0ms !important; } }
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
.mc-check .mc-error { display: block; }
a { color: inherit; }
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }
.skip { position: absolute; left: var(--space-2); top: -60px; z-index: 100; background: var(--brand); color: var(--on-brand); padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill); font-weight: 700; }
.skip:focus { top: var(--space-1); }

.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--space-2); }
.section { padding: var(--space-8) 0; }
.section--soft { background: var(--surface-soft); }
.section--tint { background: var(--surface-tint); }
.section__head { display: grid; gap: var(--space-1); margin-bottom: var(--space-4); max-width: 720px; }
.section__head--center { text-align: center; margin-left: auto; margin-right: auto; justify-items: center; }
.h2 { margin: 0; font: 600 24px/30px var(--font-display); letter-spacing: -0.005em; color: var(--ink); }
.h1 { margin: 0; font: 600 28px/34px var(--font-display); color: var(--ink); }
.lead { margin: 0; font-size: 17px; line-height: 26px; color: var(--ink-muted); }
.prose { max-width: 68ch; }
.prose p, .prose ul, .prose ol { margin: 0 0 var(--space-2); }
.prose h2 { font: 600 24px/30px var(--font-display); margin: var(--space-5) 0 var(--space-1); }
.prose h3 { font: 700 19px/26px var(--font-sans); margin: var(--space-3) 0 var(--space-1); }
.prose li { margin-bottom: var(--space-half); }

/* Grillas */
.grid { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
.grid--cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
.grid > *, .grid--cats > * { min-width: 0; }
.cluster { display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: center; }

/* Header */
.site-header { position: sticky; top: 0; z-index: var(--z-header); background: var(--surface); border-bottom: 1px solid var(--border); transition: box-shadow var(--dur-base) var(--ease-standard); }
.site-header.is-scrolled { box-shadow: var(--shadow-md); }
.site-header .wrap { display: flex; align-items: center; gap: var(--space-2); height: 64px; }
.site-header .mc-logo { font-size: 28px; }
.site-header .mc-logo small { font-size: 8px; letter-spacing: 0.32em; }
.site-nav { display: none; }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-1); }
.header-actions .mc-btn { display: none; }
.menu-toggle { display: inline-grid; }

/* Menú móvil */
.drawer { position: fixed; inset: 0; z-index: var(--z-dialog); display: none; }
.drawer.is-open { display: block; }
.drawer__scrim { position: absolute; inset: 0; background: var(--overlay); animation: fade var(--dur-slow) var(--ease-enter); }
.drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(360px, 88vw); background: var(--surface-raised); box-shadow: var(--shadow-lg); padding: var(--space-2); overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-2); animation: slide-in var(--dur-slow) var(--ease-enter); }
.drawer__top { display: flex; justify-content: space-between; align-items: center; }
.drawer .mc-mobile { width: 100%; box-shadow: none; padding: 0; border-radius: 0; }
.drawer .mc-mobile a.is-sub { font-weight: 500; font-size: 15px; min-height: 44px; padding-left: var(--space-2); color: var(--ink-muted); }
@keyframes slide-in { from { transform: translateX(100%); } }
@keyframes fade { from { opacity: 0; } }

/* Barra inferior fija (celular) */
.bottom-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-header); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-1); padding: var(--space-1) var(--space-2) calc(var(--space-1) + env(safe-area-inset-bottom)); background: var(--surface-raised); border-top: 1px solid var(--border); box-shadow: 0 -4px 16px #2a14200f; }
.bottom-bar .mc-btn, .bottom-bar .mc-wa { width: 100%; justify-content: center; min-height: 48px; }
body { padding-bottom: 72px; }
.wa-float { position: fixed; right: var(--space-2); bottom: 84px; z-index: var(--z-float); display: none; animation: pop var(--dur-slow) var(--ease-soft) 600ms both; }
@keyframes pop { from { transform: scale(0.6); opacity: 0; } }

/* Hero */
.hero { padding: var(--space-3) 0 var(--space-6); }
.hero .mc-hero { background: var(--surface-soft); padding: var(--space-4) var(--space-2) var(--space-2); gap: var(--space-3); grid-template-columns: 1fr; }
.hero .mc-hero h1 { font-size: 40px; line-height: 44px; }
.hero__actions { display: grid; gap: var(--space-1); }
.hero__actions .mc-btn { width: 100%; }
.figure { position: relative; overflow: hidden; background: var(--surface-tint); border-radius: var(--radius-xl); display: grid; place-items: center; }
.figure > svg { width: 64px; height: 64px; fill: none; stroke: var(--gold); stroke-width: 1.5; }
.figure > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.figure--hero { aspect-ratio: 4 / 5; }
.figure--wide { aspect-ratio: 16 / 9; }
.figure--photo { aspect-ratio: 4 / 3; border-radius: 0; }
.figure--square { aspect-ratio: 1 / 1; border-radius: 0; }

/* Cabecera de páginas internas */
.page-head { padding: var(--space-4) 0 var(--space-5); background: var(--surface-soft); border-bottom: 1px solid var(--border); }
.page-head .wrap { display: grid; gap: var(--space-2); }
.page-head h1 { margin: 0; font: 600 34px/40px var(--font-display); letter-spacing: -0.005em; }
.page-head .lead { max-width: 60ch; }
.page-head .cluster .mc-btn { flex: 1 1 220px; }

/* Barra de confianza */
.mc-trust strong { font-size: 30px; line-height: 36px; }

/* Tablas de precios */
.price-list { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 22px; }
.price-list caption { text-align: left; font: 700 13px/18px var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-strong); padding-bottom: var(--space-1); }
.price-list th, .price-list td { text-align: left; padding: var(--space-2) var(--space-1); border-bottom: 1px solid var(--border); vertical-align: top; }
.price-list thead th { font-size: 13px; color: var(--ink-muted); font-weight: 600; padding-top: 0; }
.price-list td.num, .price-list th.num { text-align: right; white-space: nowrap; font-weight: 700; }
.price-list td.dur { color: var(--ink-muted); white-space: nowrap; }
.price-list tr.is-featured th { color: var(--brand); }
.note { font-size: 13px; line-height: 20px; color: var(--ink-muted); margin-top: var(--space-1); }

/* Ficha de tratamiento */
.ficha { display: grid; gap: var(--space-4); }
.book-panel { background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-3); display: grid; gap: var(--space-2); align-self: start; }
.book-panel dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-2); font-size: 15px; }
.book-panel dt { color: var(--ink-muted); }
.book-panel dd { margin: 0; font-weight: 700; text-align: right; }
.facts { display: grid; gap: var(--space-2); grid-template-columns: 1fr; }
.fact { background: var(--surface-soft); border-radius: var(--radius-md); padding: var(--space-2); }
.fact h3 { margin: 0 0 var(--space-half); font: 700 16px/22px var(--font-sans); }
.fact p { margin: 0; font-size: 15px; line-height: 24px; color: var(--ink-muted); }

/* Beneficios */
.benefits { display: grid; gap: var(--space-3); counter-reset: b; }
.benefit { display: grid; align-content: start; gap: var(--space-1); padding-top: var(--space-2); border-top: 1px solid var(--gold); }
.benefit h3 { margin: 0; font: 700 19px/26px var(--font-sans); }
.benefit p { margin: 0; color: var(--ink-muted); }

/* Tres caminos */
.paths { display: grid; gap: var(--space-2); }
.path { display: grid; gap: var(--space-1); padding: var(--space-3); border-radius: var(--radius-lg); background: var(--surface-raised); border: 1px solid var(--border); text-decoration: none; color: var(--ink); }
.path:hover { border-color: var(--brand); }
.path strong { font: 600 28px/32px var(--font-display); color: var(--brand); }

/* Formularios del sitio */
.form { display: grid; gap: var(--space-3); max-width: 640px; }
.form .mc-field { max-width: none; }
.form fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.form .mc-radiocard { cursor: pointer; }
.form .mc-radiocard:has(input:checked) { border-color: var(--brand); background: var(--surface-tint); box-shadow: inset 0 0 0 1px var(--brand); }
.form .mc-radiocard:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.form-grid { display: grid; gap: var(--space-2); }
.mc-check input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Sedes */
.sede-map { border: 0; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); background: var(--surface-tint); }
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.contact-list li { display: grid; gap: 2px; }
.contact-list span { font-size: 13px; color: var(--ink-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }

/* CTA final */
.cta-band { background: var(--surface-inverse); color: var(--ink-inverse); border-radius: var(--radius-xl); padding: var(--space-5) var(--space-3); display: grid; gap: var(--space-2); justify-items: start; }
.cta-band h2 { margin: 0; font: 600 30px/36px var(--font-display); color: var(--ink-inverse); }
.cta-band p { margin: 0; color: var(--ink-inverse-muted); max-width: 52ch; }
.cta-band :focus-visible { outline-color: var(--focus-inverse); }
.cta-band .mc-btn--primary { background: var(--brand-inverse); color: var(--surface-inverse); }
.cta-band .mc-wa--outline { color: var(--ink-inverse); border-color: var(--ink-inverse); }

/* Footer */
.site-footer { margin-top: var(--space-8); }
.site-footer .mc-footer { border-radius: 0; padding: var(--space-6) var(--space-2) var(--space-3); }
.site-footer .mc-footer__cols { grid-template-columns: 1fr 1fr; max-width: 1200px; margin: 0 auto; }
.site-footer .mc-footer__brand { grid-column: 1 / -1; }
.site-footer .mc-footer__legal { max-width: 1200px; margin-left: auto; margin-right: auto; flex-direction: column; }
.site-footer .mc-footer li a { display: inline-block; padding: 4px 0; }

.mc-card__body { align-content: start; }
.mc-card__title { overflow-wrap: break-word; hyphens: auto; }
.grid--cats .mc-card__title { font-size: 16px; line-height: 22px; }
@media (min-width: 768px) { .grid--cats .mc-card__title { font-size: 19px; line-height: 26px; } }
.path { align-content: start; }

/* Utilidades */
.mt-2 { margin-top: var(--space-2); } .mt-3 { margin-top: var(--space-3); } .mt-4 { margin-top: var(--space-4); }
.center { text-align: center; }
.hide-sm { display: none; }

/* ≥ 480px */
@media (min-width: 480px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .hero__actions { display: flex; flex-wrap: wrap; }
  .hero__actions .mc-btn { width: auto; }
  .form-grid { grid-template-columns: 1fr 1fr; }
}

/* ≥ 768px */
@media (min-width: 768px) {
  .wrap { padding: 0 var(--space-4); }
  .section { padding: var(--space-10) 0; }
  .h2 { font-size: 28px; line-height: 36px; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--cats { grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
  .benefits { grid-template-columns: repeat(3, 1fr); }
  .paths { grid-template-columns: repeat(3, 1fr); }
  .facts { grid-template-columns: repeat(2, 1fr); }
  .page-head h1 { font-size: 44px; line-height: 50px; }
  .page-head .cluster .mc-btn { flex: 0 0 auto; }
  .cta-band { padding: var(--space-6); }
  .cta-band h2 { font-size: 36px; line-height: 42px; }
  .site-footer .mc-footer__cols { grid-template-columns: 1.4fr repeat(3, 1fr); }
  .site-footer .mc-footer__brand { grid-column: auto; }
  .site-footer .mc-footer__legal { flex-direction: row; }
}

/* ≥ 1024px */
@media (min-width: 1024px) {
  body { padding-bottom: 0; }
  .bottom-bar { display: none; }
  .wa-float { display: block; bottom: var(--space-4); right: var(--space-4); }
  .site-header .wrap { height: 76px; }
  .site-nav { display: flex; gap: var(--space-3); margin-left: auto; }
  .site-nav a { color: var(--ink); text-decoration: none; font: 600 15px/20px var(--font-sans); padding: var(--space-1) 0; border-bottom: 2px solid transparent; }
  .site-nav a:hover, .site-nav a[aria-current="page"], .site-nav a[aria-current="true"] { color: var(--brand); border-bottom-color: var(--brand); }
  .header-actions { margin-left: var(--space-2); }
  .header-actions .mc-btn { display: inline-flex; }
  .menu-toggle { display: none; }
  .section { padding: var(--space-12) 0; }
  .h2 { font-size: 36px; line-height: 44px; }
  .hero { padding: var(--space-4) 0 var(--space-8); }
  .hero .mc-hero { grid-template-columns: 1.1fr 1fr; padding: var(--space-6); gap: var(--space-6); }
  .hero .mc-hero h1 { font-size: 64px; line-height: 68px; }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .grid--cats { grid-template-columns: repeat(4, 1fr); }
  .ficha { grid-template-columns: 1fr 340px; align-items: start; }
  .ficha .book-panel { position: sticky; top: 100px; }
  .page-head { padding: var(--space-6) 0 var(--space-8); }
  .page-head h1 { font-size: 52px; line-height: 58px; }
  .hide-sm { display: initial; }
  .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: start; }
}