/* ==========================================================================
   Másmosquiteras — Product page CSS
   ========================================================================== */

/* ── PRODUCT HERO ───────────────────────────────────────────────────────── */
.mm-phero { background: var(--mm-bg); padding: 60px 0 50px; }
.mm-phero .mm-w { max-width: 800px; }
.mm-phero h1 { font-size: 36px; font-weight: 700; margin: 0 0 8px; }
.mm-phero-bar { background: var(--mm-yellow); padding: 10px 20px; margin-bottom: 28px; display: inline-block; }
.mm-phero-bar h2 { font-size: 28px; font-weight: 700; margin: 0; color: var(--mm-dark); }
.mm-phero-emoji { font-size: 15px; color: var(--mm-gray); margin-bottom: 16px; }
.mm-phero-pitch h2 { font-size: 26px; font-weight: 700; line-height: 1.3; margin: 0 0 16px; }
.mm-phero-pitch p { font-size: 15px; color: var(--mm-gray); margin-bottom: 24px; line-height: 1.6; }

/* Quick form (name + whatsapp) */
.mm-quick-form { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.mm-quick-form input { flex: 1; min-width: 160px; padding: 12px 14px; border: 1.5px solid var(--mm-dark); border-radius: 4px; font-size: 14px; font-family: var(--mm-font); outline: none; }
.mm-quick-form input:focus { border-color: var(--mm-yellow); }
.mm-quick-privacy { font-size: 12px; color: var(--mm-light-gray); margin-bottom: 16px; display: flex; align-items: center; gap: 6px; }
.mm-quick-privacy input { width: 14px; height: 14px; }
.mm-quick-submit { background: var(--mm-yellow); color: var(--mm-dark); border: none; padding: 14px 0; font-size: 16px; font-weight: 700; width: 100%; max-width: 400px; cursor: pointer; font-family: var(--mm-font); transition: background .2s; }
.mm-quick-submit:hover { background: var(--mm-yellow-hover); }

/* ── WHY US (comparison) ─────────────────────────────────────────────────── */
.mm-compare { padding: 60px 0; background: var(--mm-bg); border-top: 1px solid #eee; }
.mm-compare .mm-w { max-width: 800px; }
.mm-compare > .mm-w > h2 { font-size: 32px; font-weight: 700; text-align: center; margin: 0 0 40px; }
.mm-compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.mm-compare-col { padding: 32px 28px; border-radius: 12px; }
.mm-compare-col.mm-col-bad { background: #fff; border: 1px solid #eee; }
.mm-compare-col.mm-col-good { background: #fff; border: 2px solid var(--mm-yellow); }
.mm-compare-col h3 { font-size: 20px; font-weight: 700; margin: 0 0 24px; }
.mm-compare-item { margin-bottom: 24px; }
.mm-compare-item h4 { font-size: 15px; font-weight: 700; margin: 0 0 6px; display: flex; align-items: center; gap: 8px; }
.mm-compare-item h4 .mm-icon-bad { color: #EF4444; }
.mm-compare-item h4 .mm-icon-good { color: #22C55E; }
.mm-compare-item p { font-size: 14px; color: var(--mm-gray); line-height: 1.5; margin: 0; }
.mm-compare-cta { margin-top: 8px; }
.mm-compare-cta a { display: inline-block; background: var(--mm-yellow); color: var(--mm-dark); padding: 12px 28px; font-size: 14px; font-weight: 700; text-decoration: none; transition: background .2s; }
.mm-compare-cta a:hover { background: var(--mm-yellow-hover); }

/* ── PRODUCT DETAIL ──────────────────────────────────────────────────────── */
.mm-pdetail { padding: 60px 0; }
.mm-pdetail .mm-w { max-width: 800px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.mm-pdetail-img img { width: 100%; border-radius: 8px; }
.mm-pdetail-thumbs { display: flex; gap: 8px; margin-top: 12px; }
.mm-pdetail-thumbs img { width: 50px; height: 50px; object-fit: cover; border: 1px solid #ddd; border-radius: 4px; cursor: pointer; }
.mm-pdetail-text h2 { font-size: 30px; font-weight: 700; margin: 0 0 16px; }
.mm-pdetail-text h3 { font-size: 16px; font-weight: 700; margin: 0 0 12px; }
.mm-pdetail-text p { font-size: 15px; color: var(--mm-gray); line-height: 1.7; margin-bottom: 16px; }
.mm-pdetail-text .mm-btn-yellow { font-size: 14px; padding: 10px 24px; }

/* ── CONTACT FORM (product page) ────────────────────────────────────────── */
.mm-pcontact { padding: 60px 0; background: var(--mm-bg); }
.mm-pcontact .mm-w { max-width: 600px; }
.mm-pcontact h3 { font-size: 28px; font-weight: 700; text-align: center; margin: 0 0 12px; }
.mm-pcontact .mm-pcontact-sub { text-align: center; color: var(--mm-gray); margin-bottom: 32px; font-size: 15px; }
.mm-pcontact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mm-pcontact-form input[type="tel"],
.mm-pcontact-form input[type="email"] { grid-column: auto; }
.mm-pcontact-form textarea { grid-column: 1 / -1; min-height: 100px; resize: vertical; }
.mm-pcontact-form button { grid-column: 1 / -1; }
.mm-pcontact-form input,
.mm-pcontact-form textarea { padding: 14px; border: 1px solid var(--mm-border); border-radius: 6px; font-size: 15px; font-family: var(--mm-font); outline: none; }
.mm-pcontact-form input:focus,
.mm-pcontact-form textarea:focus { border-color: var(--mm-yellow); }
.mm-pcontact-form button { padding: 16px; background: var(--mm-yellow); color: var(--mm-dark); border: none; font-size: 16px; font-weight: 700; cursor: pointer; font-family: var(--mm-font); border-radius: 6px; }
.mm-pcontact-form .mm-form-privacy { grid-column: 1 / -1; font-size: 12px; color: var(--mm-light-gray); }
.mm-pcontact-form br { display: none; }

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .mm-compare-grid { grid-template-columns: 1fr; }
    .mm-pdetail .mm-w { grid-template-columns: 1fr; }
    .mm-pcontact-form { grid-template-columns: 1fr; }
    .mm-phero h1 { font-size: 28px; }
    .mm-phero-bar h2 { font-size: 22px; }
}