/* ==========================================================================
MOWOMO Care ยท Configurador de Hosting
========================================================================== */
.mch-wrap {
--mch-accent: #EA445A;
--mch-accent-dark: #C73349;
--mch-ink: #16202b;
--mch-muted: #64707d;
--mch-line: #e4e7eb;
--mch-bg: #f7f8f9;
--mch-card: #ffffff;
--mch-radius: 12px;
--mch-shadow: 0 6px 26px rgba(22, 32, 43, .07);
max-width: 1120px;
margin: 0 auto;
padding: 8px 0 24px;
color: var(--mch-ink);
font-family: inherit;
line-height: 1.55;
box-sizing: border-box;
}
.mch-wrap *, .mch-wrap *::before, .mch-wrap *::after { box-sizing: border-box; }
.mch-header { text-align: center; margin-bottom: 32px; }
.mch-title { font-size: 2rem; font-weight: 800; margin: 0 0 10px; letter-spacing: -.02em; }
.mch-subtitle { color: var(--mch-muted); max-width: 640px; margin: 0 auto; font-size: 1.02rem; }
.mch-layout { display: grid; grid-template-columns: 1fr 340px; gap: 28px; align-items: start; }
.mch-step { margin-bottom: 30px; }
.mch-step-title { display: flex; align-items: center; gap: 10px; font-size: 1.15rem; font-weight: 700; margin: 0 0 16px; }
.mch-step-title--plain { font-size: 1.02rem; }
.mch-num {
display: inline-flex; align-items: center; justify-content: center;
width: 26px; height: 26px; border-radius: 50%;
background: var(--mch-accent); color: #fff; font-size: .85rem; font-weight: 700;
}
.mch-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.mch-card {
position: relative; display: flex; flex-direction: column; gap: 2px;
background: var(--mch-card); border: 2px solid var(--mch-line);
border-radius: var(--mch-radius); padding: 12px 12px 10px; cursor: pointer;
transition: border-color .15s, box-shadow .15s, transform .15s;
}
.mch-card:hover { border-color: #c8ccd3; transform: translateY(-2px); }
.mch-card input { position: absolute; opacity: 0; pointer-events: none; }
.mch-card:has(input:checked) { border-color: var(--mch-accent); box-shadow: 0 6px 20px rgba(31,191,156,.18); }
.mch-card.is-featured { border-color: #cdeee6; }
.mch-badge {
position: absolute; top: -11px; right: 14px;
background: var(--mch-accent); color: #fff; font-size: .68rem; font-weight: 700;
padding: 3px 10px; border-radius: 20px; text-transform: uppercase; letter-spacing: .03em;
}
.mch-card-gb { font-size: 1.4rem; font-weight: 800; line-height: 1; }
.mch-card-gb small { font-size: .9rem; font-weight: 600; color: var(--mch-muted); margin-left: 2px; }
.mch-card-name { font-weight: 700; font-size: .95rem; }
.mch-card-desc { color: var(--mch-muted); font-size: .72rem; margin-top: 1px; }
.mch-card-price { margin-top: 2px; font-weight: 700; color: var(--mch-accent-dark); font-size: .82rem; }
.mch-extra {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
background: var(--mch-card); border: 1px solid var(--mch-line);
border-radius: 12px; padding: 14px 16px; margin-bottom: 12px;
}
.mch-extra-head strong { display: block; font-size: .95rem; }
.mch-extra-desc { color: var(--mch-muted); font-size: .82rem; }
.mch-select {
border: 1px solid var(--mch-line); border-radius: 8px;
padding: 8px 40px 8px 12px;
font-size: .9rem; background: #fff; min-width: 280px; color: var(--mch-ink);
appearance: none; -webkit-appearance: none; -moz-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 16px;
}
.mch-select:focus { outline: 2px solid var(--mch-accent); outline-offset: 1px; }
.mch-included { background: var(--mch-bg); border-radius: var(--mch-radius); padding: 20px 22px; }
.mch-included-list { list-style: none; padding: 0; margin: 0 0 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; }
.mch-included-list li { position: relative; padding-left: 24px; font-size: .88rem; color: #364152; }
.mch-included-list li::before {
content: ""; position: absolute; left: 0; top: 3px; width: 15px; height: 15px;
background: var(--mch-accent); border-radius: 50%;
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.mch-note { font-size: .82rem; color: var(--mch-muted); margin: 0; padding-top: 12px; border-top: 1px solid var(--mch-line); }
.mch-summary {
position: sticky; top: 24px; background: var(--mch-card);
border: 1px solid var(--mch-line); border-radius: var(--mch-radius);
box-shadow: var(--mch-shadow); padding: 22px;
}
.mch-summary-title { font-size: 1.1rem; font-weight: 700; margin: 0 0 16px; }
.mch-summary-lines { margin-bottom: 16px; }
.mch-sline { display: flex; justify-content: space-between; gap: 12px; font-size: .9rem; padding: 7px 0; border-bottom: 1px dashed var(--mch-line); }
.mch-sline span:first-child { color: #364152; }
.mch-sline span:last-child { font-weight: 600; white-space: nowrap; }
.mch-sline-sub { color: var(--mch-muted); font-size: .8rem; }
.mch-summary-totals { border-top: 2px solid var(--mch-line); padding-top: 14px; margin-bottom: 18px; }
.mch-line { display: flex; justify-content: space-between; padding: 4px 0; font-size: .92rem; }
.mch-line--muted { color: var(--mch-muted); }
.mch-line--total { font-size: 1.25rem; font-weight: 800; padding-top: 8px; }
.mch-line--total span:last-child { color: var(--mch-accent-dark); }
.mch-cta {
width: 100%; border: 0; cursor: pointer;
background: var(--mch-accent); color: #fff; font-weight: 700; font-size: 1rem;
padding: 14px 18px; border-radius: 10px; transition: background .15s, transform .1s;
font-family: inherit;
}
.mch-cta:hover { background: var(--mch-accent-dark); }
.mch-cta:active { transform: scale(.99); }
.mch-summary-foot { text-align: center; font-size: .78rem; color: var(--mch-muted); margin: 10px 0 0; }
.mch-modal { position: fixed; inset: 0; z-index: 99999; display: none; }
.mch-modal.is-open { display: block; }
.mch-modal-overlay { position: absolute; inset: 0; background: rgba(20,26,36,.55); backdrop-filter: blur(2px); }
.mch-modal-box {
position: relative; max-width: 520px; margin: 6vh auto; background: #fff;
border-radius: 16px; padding: 30px; box-shadow: 0 20px 60px rgba(0,0,0,.3);
max-height: 88vh; overflow-y: auto;
}
.mch-modal-box h3 { margin: 0 0 16px; font-size: 1.3rem; }
.mch-modal-close { position: absolute; top: 14px; right: 16px; background: none; border: 0; font-size: 1.8rem; line-height: 1; cursor: pointer; color: var(--mch-muted); }
.mch-form-summary { background: var(--mch-bg); border-radius: 10px; padding: 14px 16px; margin-bottom: 18px; font-size: .85rem; }
.mch-form-summary .mch-fs-line { display: flex; justify-content: space-between; padding: 3px 0; }
.mch-form-summary .mch-fs-total { font-weight: 700; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--mch-line); }
.mch-field { margin-bottom: 14px; }
.mch-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mch-field label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 5px; }
.mch-field input, .mch-field textarea {
width: 100%; border: 1px solid var(--mch-line); border-radius: 8px;
padding: 10px 12px; font-size: .92rem; font-family: inherit; color: var(--mch-ink);
}
.mch-field input:focus, .mch-field textarea:focus { outline: 2px solid var(--mch-accent); outline-offset: 1px; border-color: transparent; }
.mch-legal { background: var(--mch-bg); border-radius: 8px; padding: 12px 14px; margin: 4px 0 14px; }
.mch-legal p { font-size: .72rem; color: var(--mch-muted); margin: 0; line-height: 1.5; }
.mch-legal a, .mch-check a { color: var(--mch-accent-dark); text-decoration: underline; }
.mch-check { display: flex; align-items: flex-start; gap: 9px; font-size: .82rem; color: #364152; margin-bottom: 14px; cursor: pointer; }
.mch-check input { margin-top: 2px; flex-shrink: 0; width: 16px; height: 16px; accent-color: var(--mch-accent); }
.mch-cta--submit { margin-top: 6px; }
.mch-form-msg { text-align: center; font-size: .88rem; margin: 12px 0 0; }
.mch-form-msg.is-ok { color: var(--mch-accent-dark); font-weight: 600; }
.mch-form-msg.is-err { color: #d64545; font-weight: 600; }
@media (max-width: 900px) {
.mch-layout { grid-template-columns: 1fr; }
.mch-summary { position: static; }
.mch-included-list { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
.mch-cards { grid-template-columns: 1fr; }
.mch-field-row { grid-template-columns: 1fr; }
.mch-title { font-size: 1.6rem; }
.mch-extra { flex-direction: column; align-items: flex-start; }
.mch-select { width: 100%; }
}
@media (max-width: 700px) { .mch-cards { grid-template-columns: repeat(2, 1fr); } }
.mch-disclaimer { font-size: .8rem; color: var(--mch-muted); background: var(--mch-bg); border-radius: 10px; padding: 12px 16px; margin-top: 18px; }
.mowomo-hero .mowomo-hero__blob {
background: radial-gradient(circle, rgba(234,68,90,.28), transparent 70%) !important;
transform: scale(1.5) rotate(15deg);
}
.mowomo-hero .mowomo-hero__dots .mowomo-hero__dot {
background: #EA445A !important;
opacity: .8;
transform: scale(1.8);
}
.mowomo-hero .mowomo-hero__accent-bar {
background: linear-gradient(90deg, #EA445A, #C73349) !important;
height: 8px !important;
}
.mch-capacity-note { font-size: .75rem; color: var(--mch-muted); margin: 10px 0 16px; }
.mch-hero-geo-accent {
position: absolute;
top: -18px; left: -18px;
width: 46px; height: 46px;
border: 3px solid rgba(234,68,90,.45);
border-radius: 10px;
transform: rotate(40deg);
z-index: 4;
}
.mch-hero-float {
position: absolute; z-index: 5;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
background: #16181d; color: #fff; border-radius: 12px;
box-shadow: 0 12px 28px rgba(0,0,0,.28);
}
.mch-hero-float--top {
top: -20px; left: -20px;
padding: 12px 18px; text-align: center;
}
.mch-hf-num { display:block; font-size: 1.3rem; font-weight: 800; line-height: 1; color: #EA445A; }
.mch-hf-label { display:block; font-size: .7rem; color: #9aa0ab; margin-top: 3px; }
.mch-hero-float--bottom {
bottom: 28px; right: -20px;
padding: 14px 18px; min-width: 180px;
}
.mch-hf-title { display:block; font-size: .85rem; font-weight: 700; margin-bottom: 8px; color: #EA445A; }
.mch-hf-row { display:flex; justify-content: space-between; gap: 10px; font-size: .74rem; color: #9aa0ab; margin-top: 5px; }
.mch-hf-row b { color: #fff; font-weight: 700; }
@media (max-width: 640px) { .mch-hero-float--top { left: 12px; } .mch-hero-float--bottom { right: -8px; } }