.mp-offer{--mp-bg:#fff;--mp-soft:#f4f4f2;--mp-ink:#232624;--mp-muted:#626660;--mp-line:#d9dcd6;color:var(--mp-ink);background:var(--mp-bg);font-family:Inter,Arial,sans-serif;line-height:1.55;text-align:left;max-width:1160px;margin:auto;padding:clamp(20px,4vw,52px);border:1px solid var(--mp-line);border-radius:12px;box-sizing:border-box}
.mp-offer *{box-sizing:border-box}
.mp-offer [hidden]{display:none!important}
.mp-kicker{font-size:10px;font-weight:800;letter-spacing:.15em;color:var(--mp-muted)}
.mp-heading{max-width:700px;margin-bottom:32px}
.mp-heading h2{font-size:clamp(30px,4vw,52px);line-height:1.08;letter-spacing:-.045em;margin:14px 0 18px;color:var(--mp-ink)}
.mp-heading p{font-size:16px;max-width:580px;color:var(--mp-muted)}
.mp-layout{display:grid;grid-template-columns:1.3fr 1fr;gap:24px;align-items:start}
.mp-switch{display:flex;gap:6px;margin-bottom:12px}
.mp-switch button,.mp-button{border:1px solid #c9ccc6;border-radius:6px;background:#e9ebe6;color:#252923;padding:12px 16px;font:inherit;font-size:13px;font-weight:700;cursor:pointer;box-shadow:0 2px 0 #c6cac1;transition:background .2s,transform .2s;text-decoration:none}
.mp-switch button[aria-pressed=true]{background:#343c32;color:#fff;border-color:#343c32}
.mp-offer .mp-button{display:block;width:100%;text-align:center;margin-top:20px}
.mp-button:hover{background:#dce2d5;transform:translateY(-1px)}
.mp-button:disabled{opacity:.6;cursor:wait}
.mp-offer :focus-visible,.mp-dialog-close:focus-visible{outline:3px solid #4e7254;outline-offset:4px}
.mp-wireframe{border:1px solid var(--mp-line);border-radius:8px;overflow:hidden;background:var(--mp-soft)}
.mp-browser{display:flex;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--mp-line);font-size:11px;color:var(--mp-muted)}
.mp-browser>span:first-child{letter-spacing:3px}
.mp-site{padding:20px}
.mp-site-nav{display:flex;justify-content:space-between;gap:10px;font-size:9px;border-bottom:1px solid var(--mp-line);padding-bottom:14px}
.mp-site-body{display:grid;grid-template-columns:1.3fr 1fr;gap:15px;padding:32px 0}
.mp-site h3{font-size:clamp(20px,2vw,28px);line-height:1.15;letter-spacing:-.04em;margin:12px 0}
.mp-site p{font-size:10px;color:var(--mp-muted)}
.mp-wire-button{display:inline-block;padding:8px;border:1px solid var(--mp-line);background:var(--mp-bg);font-size:9px;margin-top:12px}
.mp-art{display:flex;align-items:end;gap:7px;padding:16px;background:#e1e5dc;border-radius:3px}
.mp-art div{background:#8f9c83;width:33%;height:45%;transition:height .5s}
.mp-art div:nth-child(2){height:72%;background:#bec8b3}
.mp-art div:nth-child(3){height:100%;background:#65785b}
.mp-wireframe[data-tier=free] .mp-art div{height:35%}
.mp-pages{display:flex;gap:8px}
.mp-pages span{padding:8px;background:var(--mp-bg);border:1px solid var(--mp-line);font-size:9px;flex:1}
.mp-preview-caption{padding:12px 16px;border-top:1px solid var(--mp-line);font-size:11px}
.mp-note{font-size:11px!important;color:var(--mp-muted);line-height:1.6}
.mp-price-card{padding:24px;background:var(--mp-soft);border:1px solid var(--mp-line);border-radius:8px}
.mp-price{font-size:48px;font-weight:750;letter-spacing:-.055em;margin-top:12px}
.mp-price span{font-size:12px;font-weight:500;letter-spacing:0;margin-left:8px}
.mp-price-card>p{font-size:12px;color:var(--mp-muted)}
.mp-price-card ul{list-style:none;padding:0;margin:22px 0}
.mp-price-card li{font-size:12px;padding:12px 0;border-top:1px solid var(--mp-line)}
.mp-price-card li strong{display:block;font-size:13px}
.mp-consent{display:flex;align-items:start;gap:8px;font-size:11px}
.mp-consent input{margin-top:4px}
.mp-offer a{color:inherit}
.mp-comparison{margin-top:36px}
.mp-section-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.mp-section-head h3{font-size:20px;letter-spacing:-.025em}
.mp-section-head label{font-size:11px}
.mp-table-scroll{overflow-x:auto}
.mp-offer table{width:100%;border-collapse:collapse;font-size:12px;min-width:400px}
.mp-offer th,.mp-offer td{padding:14px;border-bottom:1px solid var(--mp-line);text-align:left}
.mp-offer thead th{font-size:10px;text-transform:uppercase;letter-spacing:.08em;background:var(--mp-soft)}
.mp-offer td:last-child,.mp-offer th:last-child{background:var(--mp-soft)}
.mp-offer tbody tr{animation:mp-row .3s ease both;transition:background .18s}
.mp-offer tbody tr:hover{background:var(--mp-soft)}
.mp-faq{margin-top:28px}
.mp-faq details{border-top:1px solid var(--mp-line);padding:16px 0;font-size:13px}
.mp-faq summary{cursor:pointer;font-weight:700}
.mp-faq p{color:var(--mp-muted);max-width:760px}
.mp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.mp-dialog{padding:0;border:1px solid #c9ccc6;border-radius:12px;width:min(1160px,calc(100% - 32px));max-height:90dvh;color:#232624;background:#fff;overscroll-behavior:contain}
.mp-dialog::backdrop{background:#111b19aa;backdrop-filter:blur(5px)}
.mp-dialog .mp-offer{border:0}
.mp-dialog-close{position:sticky;top:12px;float:right;margin:12px 12px -48px 0;z-index:2;width:36px;height:36px;background:#eceee9;color:#232624;border:1px solid #c9ccc6;border-radius:5px;font-size:22px;cursor:pointer}
.mp-dialog-reason{margin:0;padding:32px 64px 0 32px;font:14px/1.6 Inter,Arial,sans-serif}
.mp-services{padding:64px 20px;background:#f4f4f2}
.mp-services-inner{max-width:1160px;margin:auto;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}
.mp-services h2{font-size:clamp(28px,4vw,44px);letter-spacing:-.04em;line-height:1.1;margin:12px 0}
.mp-services p{max-width:650px}
.mp-services-actions{display:grid;gap:14px;font-size:12px}
.mp-services-actions a{color:inherit}
.mp-plan-page{margin:0;background:#f4f4f2}
.mp-plan-page main{padding:60px 20px}
.mp-plan-page h1{max-width:1160px;margin:0 auto 24px;font:600 16px Inter,Arial,sans-serif}

@keyframes mp-row{from{opacity:.4;transform:translateY(5px)}
to{opacity:1;transform:translateY(0)}
}

html[data-theme=dark] .mp-offer,body.dark-theme .mp-offer,body[data-theme=dark] .mp-offer{--mp-bg:#202420;--mp-soft:#2b302a;--mp-ink:#edf0e9;--mp-muted:#b5beb0;--mp-line:#454d40}
html[data-theme=dark] .mp-services{background:#202420;color:#edf0e9}

@media(max-width:760px){.mp-layout{grid-template-columns:1fr}
.mp-section-head{align-items:start;flex-direction:column;gap:0;margin-bottom:12px}
.mp-services-inner{grid-template-columns:1fr}
.mp-dialog{width:calc(100% - 16px);max-height:94dvh}
.mp-heading{padding-right:20px}
.mp-price{font-size:40px}
.mp-site-body{padding:24px 0}
.mp-switch button{padding:10px;font-size:11px}
}

@media(prefers-reduced-motion:reduce){.mp-offer *{animation:none!important;transition:none!important}
.mp-button{transition:none}
}


.mp-plan-page{overflow-x:clip;color:#232624}
.mp-layout>*,.mp-services-inner>*{min-width:0}
.mp-offer a.mp-button{color:#252923}
.mp-offer .mp-free-link{display:block;text-align:center;margin-top:16px;font-size:12px;text-decoration:underline}
.mp-dialog:open{animation:mp-row .2s ease}
.mp-dialog .mp-heading{padding-right:24px}
html[data-theme=dark] .mp-plan-page{background:#161a16;color:#edf0e9}

@media(prefers-reduced-motion:reduce){.mp-dialog:open{animation:none}
}


.mp-dialog{position:fixed;inset:0;margin:auto}
.mp-offer .mp-price-card ul{list-style:none}


@media(max-width:760px){.mp-price-card{order:-1}
}


.mp-plan-document{overflow-x:hidden}

/* --- /servicios: same .mp-services block, just larger + hero-styled text ---
   Selectors are deliberately .mp-services h2.x / .mp-services p.x: the base
   rules above are `.mp-services h2` and `.mp-services p` (class+element), which
   would otherwise win over a plain class and silently cancel these out. */
.mp-services{padding:clamp(72px,9vw,128px) 20px}
.mp-services-inner{align-items:end}

.mp-services h2.mp-hero-stack{
  display:grid;gap:0;margin:14px 0 20px;
  font-size:clamp(38px,7vw,86px);font-weight:800;
  letter-spacing:-.045em;line-height:1.02;text-wrap:balance;
}
.mp-services h2.mp-hero-stack em{font-style:normal;font-weight:500;opacity:.6}
.mp-services h2.mp-hero-stack .mp-hero-and{
  font-size:clamp(15px,1.5vw,20px);font-weight:500;opacity:.6;
  letter-spacing:0;padding:10px 0 6px;
}

.mp-services p.mp-services-lede{
  max-width:70ch;font-size:clamp(15px,1.6vw,19px);line-height:1.55;margin-bottom:14px;
}

/* The two plan names are the only links in the sentence. Marker highlight
   fills on hover, matching the treatment the servicios hero already uses. */
.mp-plan-link{
  color:inherit;font-weight:700;text-decoration:none;white-space:nowrap;
  background-image:linear-gradient(transparent 62%,rgba(29,101,248,.22) 0);
  padding:0 3px;border-radius:3px;transition:background-image .2s ease,color .2s ease;
}
.mp-plan-link:hover,.mp-plan-link:focus-visible{
  background-image:linear-gradient(transparent 0,rgba(29,101,248,.22) 0);color:#0b3fa8;
}
.mp-plan-link:focus-visible{outline:2px solid #1d65f8;outline-offset:2px}
html[data-theme=dark] .mp-plan-link{background-image:linear-gradient(transparent 62%,rgba(126,166,255,.28) 0)}
html[data-theme=dark] .mp-plan-link:hover,html[data-theme=dark] .mp-plan-link:focus-visible{
  background-image:linear-gradient(transparent 0,rgba(126,166,255,.28) 0);color:#cfe0ff;
}