/* ==========================================================================
   marketing-medico.css — Landing "Marketing Médico" (Publinovo)
   Extraído 1:1 del diseño de Claude Design a clases md- (sin estilos inline).
   Paleta y fuente coinciden con el sistema: Poppins, #1C9DD7, #8CC63F, #16283a.
   ========================================================================== */

/* ---- contenedor del diseño (sólo envuelve las 9 secciones md-) ---- */
.md { font-family: 'Poppins', system-ui, sans-serif; color: #1b2a3a; -webkit-font-smoothing: antialiased; }
/* Sin reset de margin por selector descendente: anulaba (por especificidad 0,1,1)
   los margin de .md-h1, .md-hero__sub y los margin-bottom de los .md-h2--mbXX.
   Cada clase fija su propio margin; los h1-h3 sin clase de margin heredan margin:0 de styles.css. */

/* ---- animaciones ---- */
@keyframes md-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes md-pulse { 0%,100% { opacity: .55; transform: scale(1); } 50% { opacity: .9; transform: scale(1.06); } }

/* ---- texto en degradado ---- */
.md-grad { background: linear-gradient(100deg, #8CC63F 0%, #1C9DD7 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.md-grad--nowrap { white-space: nowrap; }
.md-grad--light { background: linear-gradient(100deg, #a5d65a 0%, #4fb8e6 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.md-blue { color: #1C9DD7; }

/* ---- punto "latido" (dos capas) ---- */
.md-dot { position: relative; display: inline-flex; width: 9px; height: 9px; }
.md-dot--sm { width: 8px; height: 8px; }
.md-dot__ping { position: absolute; inset: 0; border-radius: 50%; background: #8CC63F; opacity: .35; animation: md-pulse 2.4s ease-in-out infinite; }
.md-dot__core { position: relative; margin: auto; width: 9px; height: 9px; border-radius: 50%; background: #8CC63F; }
.md-dot--sm .md-dot__core { width: 8px; height: 8px; }

/* ---- secciones / contenedores ---- */
.md-section { padding: clamp(56px, 8vw, 100px) clamp(20px, 5vw, 64px); }
.md-section--white  { background: #ffffff; }
.md-section--soft   { background: #f6f9fb; }
.md-section--auth   { background: linear-gradient(180deg, #f1f9fd 0%, #f4fbf1 100%); }
.md-section--ladder { background: linear-gradient(180deg, #f4fbf1 0%, #eff8fc 100%); overflow: hidden; }
.md-wrap { max-width: 1080px; margin: 0 auto; }
.md-wrap--wide   { max-width: 1140px; margin: 0 auto; }
.md-wrap--narrow { max-width: 760px;  margin: 0 auto; }

/* ---- encabezados de sección ---- */
.md-head { text-align: center; margin: 0 auto; }
.md-head--spec   { max-width: 680px; margin: 0 auto clamp(40px, 6vw, 60px); }
.md-head--pain   { max-width: 720px; margin: 0 auto clamp(40px, 6vw, 58px); }
.md-head--sol    { max-width: 720px; margin: 0 auto clamp(40px, 6vw, 60px); }
.md-head--auth   { max-width: 760px; margin: 0 auto clamp(40px, 6vw, 56px); }
.md-head--proof  { max-width: 720px; margin: 0 auto clamp(40px, 6vw, 56px); }
.md-head--ladder { max-width: 740px; margin: 0 auto clamp(44px, 6vw, 64px); }
.md-head--faq    { max-width: none;  margin: 0 auto clamp(36px, 5vw, 52px); }

.md-h2 { font-weight: 800; font-size: clamp(26px, 4.6vw, 40px); line-height: 1.12; letter-spacing: -.015em; color: #16283a; text-wrap: balance; }
.md-h2--mb16 { margin-bottom: 16px; }
.md-h2--mb18 { margin-bottom: 18px; }
.md-h2--mb20 { margin-bottom: 20px; }
.md-h2--pain   { font-size: clamp(25px, 4.4vw, 38px); line-height: 1.15; }
.md-h2--auth   { font-size: clamp(26px, 4.8vw, 42px); line-height: 1.1; margin-bottom: 20px; }
.md-h2--ladder { font-size: clamp(25px, 4.6vw, 39px); line-height: 1.13; margin-bottom: 18px; }
.md-h2--cta    { font-size: clamp(27px, 4.6vw, 42px); line-height: 1.1; margin-bottom: 18px; color: #ffffff; }

.md-lead { margin: 0; font-size: clamp(15px, 2.2vw, 18px); line-height: 1.6; color: #56697b; text-wrap: pretty; }
.md-lead--auth   { line-height: 1.7; color: #4a5b6b; }
.md-lead--ladder { line-height: 1.65; color: #4a5b6b; }

/* ---- eyebrow pill ---- */
.md-eyebrow { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 7px 15px; margin-bottom: 18px; }
.md-eyebrow__dot { width: 7px; height: 7px; border-radius: 50%; }
.md-eyebrow__txt { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.md-eyebrow--green { background: #f1f8ea; }
.md-eyebrow--green .md-eyebrow__dot { background: #8CC63F; }
.md-eyebrow--green .md-eyebrow__txt { color: #6fa72a; }
.md-eyebrow--blue { background: #eef7f9; }
.md-eyebrow--blue .md-eyebrow__dot { background: #1C9DD7; }
.md-eyebrow--blue .md-eyebrow__txt { color: #1C9DD7; }
.md-eyebrow--amber { background: #ffffff; border: 1px solid rgba(22,40,58,.08); }
.md-eyebrow--amber .md-eyebrow__dot { background: #e0a93b; }
.md-eyebrow--amber .md-eyebrow__txt { color: #97713a; }
.md-eyebrow--line-blue { background: #ffffff; border: 1px solid rgba(28,157,215,.16); }
.md-eyebrow--line-blue .md-eyebrow__txt { color: #1C9DD7; }
.md-eyebrow--line-green { background: #ffffff; border: 1px solid rgba(140,198,63,.22); }
.md-eyebrow--line-green .md-eyebrow__dot { background: #8CC63F; }
.md-eyebrow--line-green .md-eyebrow__txt { color: #6fa72a; }

/* ====================== 1 · HERO ====================== */
.md-hero { position: relative; overflow: hidden; background: linear-gradient(180deg, #f3fbf4 0%, #f1f9fd 55%, #ffffff 100%); padding: clamp(36px, 7vw, 84px) clamp(20px, 5vw, 64px) clamp(48px, 8vw, 96px); }
.md-hero__blob { position: absolute; width: 360px; height: 360px; border-radius: 50%; filter: blur(8px); animation: md-pulse 9s ease-in-out infinite; pointer-events: none; }
.md-hero__blob--1 { top: -120px; right: -90px; background: radial-gradient(circle at 30% 30%, rgba(140,198,63,.30), rgba(140,198,63,0) 70%); }
.md-hero__blob--2 { bottom: -140px; left: -110px; width: 380px; height: 380px; background: radial-gradient(circle at 60% 40%, rgba(28,157,215,.26), rgba(28,157,215,0) 70%); animation-duration: 11s; }
.md-hero-grid { position: relative; max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: clamp(36px, 6vw, 64px); align-items: center; }
@media (min-width: 880px) { .md-hero-grid { grid-template-columns: 1.05fr .95fr; } }
.md-hero__copy { max-width: 640px; }
.md-hero__pill { display: inline-flex; align-items: center; gap: 9px; background: #ffffff; border: 1px solid rgba(28,157,215,.22); box-shadow: 0 6px 18px rgba(28,157,215,.10); border-radius: 999px; padding: 8px 16px 8px 12px; margin-bottom: 22px; }
.md-hero__pill-txt { font-size: 12.5px; font-weight: 600; letter-spacing: .04em; color: #2a3b4d; }
.md-h1 { margin: 0 0 20px; font-weight: 800; font-size: clamp(34px, 7.2vw, 56px); line-height: 1.06; letter-spacing: -.015em; color: #16283a; }
.md-hero__sub { margin: 0 0 34px; font-size: clamp(16px, 2.4vw, 19px); line-height: 1.6; color: #4a5b6b; max-width: 560px; text-wrap: pretty; }
.md-hero__cta { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.md-btn { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; background: linear-gradient(100deg, #8CC63F 0%, #1C9DD7 100%); color: #ffffff; font-weight: 600; font-size: 16px; padding: 16px 28px; border-radius: 999px; box-shadow: 0 12px 26px rgba(28,157,215,.28); transition: transform .2s ease, box-shadow .2s ease; }
.md-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(28,157,215,.36); }
.md-btn__arrow { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; }
.md-hero__note { display: inline-flex; align-items: center; gap: 8px; padding-left: 28px; }
.md-hero__note-txt { font-size: 13.5px; font-weight: 500; color: #6a7a8a; }
.md-hero-visual { position: relative; justify-self: center; width: 100%; max-width: 460px; }
@media (max-width: 879px) { .md-hero-visual { order: 2; max-width: 380px; } }
.md-hero__frame { position: relative; border-radius: 26px; background: #ffffff; box-shadow: 0 30px 70px rgba(22,40,58,.14); border: 1px solid rgba(22,40,58,.06); padding: 14px; }
.md-hero__imgwrap { position: relative; aspect-ratio: 4 / 4.4; border-radius: 16px; overflow: hidden; background: #eef5f0; }
.md-hero__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% center; }
.md-hero__chip { position: absolute; background: #ffffff; border-radius: 14px; padding: 11px 14px; box-shadow: 0 16px 34px rgba(22,40,58,.16); display: flex; align-items: center; gap: 10px; }
.md-hero__chip--1 { top: 26px; right: -10px; animation: md-float 5.5s ease-in-out infinite; }
.md-hero__chip--2 { bottom: 22px; left: -12px; animation: md-float 6.5s ease-in-out infinite; animation-delay: .8s; }
.md-hero__chip-ic { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.md-hero__chip-ic--grad { background: linear-gradient(135deg, #8CC63F, #1C9DD7); }
.md-hero__chip-ic--soft { background: #eaf7ee; }
.md-hero__chip-txt { line-height: 1.15; }
.md-hero__chip-top  { font-size: 11px; color: #7a8b9b; }
.md-hero__chip-main { font-size: 13px; font-weight: 700; color: #16283a; }

/* ====================== 2 · ESPECIALIDADES ====================== */
.md-spec-grid { display: grid; grid-template-columns: 1fr; gap: clamp(20px, 3vw, 28px); }
@media (min-width: 760px) { .md-spec-grid { grid-template-columns: 1fr 1fr; } }
.md-spec-card { border-radius: 22px; padding: clamp(24px, 3.4vw, 34px); }
.md-spec-card--full { grid-column: 1 / -1; }   /* tarjeta única a todo el ancho (lista simple dental) */
.md-spec-card--green { background: linear-gradient(180deg, #f6fbf2 0%, #ffffff 100%); border: 1px solid rgba(140,198,63,.20); }
.md-spec-card--blue  { background: linear-gradient(180deg, #eff8fc 0%, #ffffff 100%); border: 1px solid rgba(28,157,215,.20); }
.md-spec-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.md-spec-card__ic { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.md-spec-card__ic--green { background: #eaf6db; }
.md-spec-card__ic--blue  { background: #ddeefb; }
.md-spec-card__title { margin: 0; font-size: clamp(17px, 2.4vw, 20px); font-weight: 700; color: #16283a; line-height: normal; letter-spacing: normal; }
.md-spec-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.md-chip { background: #ffffff; color: #38506a; font-size: 14px; font-weight: 500; padding: 10px 16px; border-radius: 999px; box-shadow: 0 2px 8px rgba(22,40,58,.05); }
.md-chip--green { border: 1px solid rgba(140,198,63,.30); }
.md-chip--blue  { border: 1px solid rgba(28,157,215,.30); }
.md-spec__close { text-align: center; margin: clamp(28px, 4vw, 38px) auto 0; max-width: 560px; font-size: clamp(15px, 2.2vw, 17px); color: #7a8b9b; font-style: italic; }

/* ====================== 3 · EL PROBLEMA ====================== */
.md-pain-grid { display: grid; grid-template-columns: 1fr; gap: clamp(16px, 2.4vw, 22px); }
@media (min-width: 760px) { .md-pain-grid { grid-template-columns: 1fr 1fr; } }
.md-pain { background: #ffffff; border: 1px solid rgba(22,40,58,.06); border-radius: 18px; padding: clamp(22px, 3vw, 30px); display: flex; gap: 18px; align-items: flex-start; box-shadow: 0 4px 16px rgba(22,40,58,.04); }
.md-pain__ic { flex-shrink: 0; width: 46px; height: 46px; border-radius: 13px; background: #eef2f5; display: flex; align-items: center; justify-content: center; }
.md-pain__text { margin: 4px 0 0; font-size: clamp(15px, 2vw, 16.5px); line-height: 1.6; color: #45586a; }
.md-pain__cap { margin: clamp(36px, 5vw, 52px) auto 0; max-width: 760px; text-align: center; background: #16283a; border-radius: 22px; padding: clamp(28px, 4vw, 40px); }
.md-pain__cap-txt { margin: 0; font-size: clamp(18px, 2.8vw, 24px); line-height: 1.4; font-weight: 600; color: #ffffff; text-wrap: balance; }

/* ====================== 4 · LA SOLUCIÓN ====================== */
.md-benefit-grid { display: grid; grid-template-columns: 1fr; gap: clamp(16px, 2.2vw, 22px); }
@media (min-width: 720px)  { .md-benefit-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .md-benefit-grid { grid-template-columns: 1fr 1fr 1fr; } }
.md-benefit { background: #ffffff; border: 1px solid rgba(22,40,58,.07); border-radius: 20px; padding: clamp(24px, 3vw, 30px); box-shadow: 0 6px 20px rgba(22,40,58,.05); transition: transform .2s ease, box-shadow .2s ease; }
.md-benefit:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(22,40,58,.10); }
.md-benefit__ic { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.md-benefit__ic--green { background: #eef7e1; }
.md-benefit__ic--blue  { background: #e2f1fb; }
.md-benefit__title { margin: 0 0 8px; font-size: clamp(16.5px, 2.2vw, 18.5px); font-weight: 700; color: #16283a; line-height: normal; letter-spacing: normal; }
.md-benefit__text { margin: 0; font-size: 15px; line-height: 1.6; color: #56697b; }
.md-bonus { margin: clamp(28px, 4vw, 40px) 0 0; position: relative; overflow: hidden; background: linear-gradient(120deg, #16283a 0%, #1d3347 55%, #13313a 100%); border-radius: 24px; padding: clamp(26px, 3.6vw, 38px); display: flex; flex-wrap: wrap; align-items: center; gap: clamp(18px, 3vw, 28px); }
.md-bonus__blob { position: absolute; top: -60px; right: 80px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(140,198,63,.22), rgba(140,198,63,0) 70%); pointer-events: none; }
.md-bonus__ic { position: relative; flex-shrink: 0; width: 60px; height: 60px; border-radius: 16px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; }
.md-bonus__txt { position: relative; flex: 1 1 320px; min-width: 280px; }
.md-bonus__title { margin: 0 0 8px; font-size: clamp(20px, 3vw, 27px); font-weight: 800; line-height: 1.2; color: #ffffff; letter-spacing: normal; }
.md-bonus__text { margin: 0; font-size: clamp(14px, 2vw, 16px); line-height: 1.6; color: rgba(226,236,244,.78); max-width: 620px; }
.md-bonus__badge-wrap { position: relative; flex-shrink: 0; }
.md-bonus__badge { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(100deg, #8CC63F 0%, #1C9DD7 100%); color: #ffffff; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 11px 20px; border-radius: 999px; box-shadow: 0 10px 24px rgba(28,157,215,.30); }

/* ====================== 5 · AUTORIDAD ====================== */
.md-pillar-grid { display: grid; grid-template-columns: 1fr; gap: clamp(16px, 2.4vw, 22px); }
@media (min-width: 820px) { .md-pillar-grid { grid-template-columns: 1fr 1fr 1fr; } }
.md-pillar { background: #ffffff; border: 1px solid rgba(22,40,58,.06); border-radius: 20px; padding: clamp(26px, 3.2vw, 32px); box-shadow: 0 8px 24px rgba(22,40,58,.06); }
.md-pillar__ic { width: 52px; height: 52px; border-radius: 15px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.md-pillar__ic--green { background: linear-gradient(135deg, #8CC63F, #6fb52f); box-shadow: 0 8px 18px rgba(140,198,63,.30); }
.md-pillar__ic--blue  { background: linear-gradient(135deg, #3bb0e0, #1C9DD7); box-shadow: 0 8px 18px rgba(28,157,215,.30); }
.md-pillar__ic--mix   { background: linear-gradient(135deg, #8CC63F, #1C9DD7); box-shadow: 0 8px 18px rgba(28,157,215,.24); }
.md-pillar__title { margin: 0 0 10px; font-size: clamp(17px, 2.3vw, 19px); font-weight: 700; color: #16283a; line-height: normal; letter-spacing: normal; }
.md-pillar__text { margin: 0; font-size: 15px; line-height: 1.6; color: #56697b; }
.md-auth__close { text-align: center; margin: clamp(34px, 5vw, 50px) auto 0; max-width: 640px; font-size: clamp(18px, 2.8vw, 23px); font-weight: 600; line-height: 1.45; color: #16283a; text-wrap: balance; }

/* ====================== 6 · PRUEBA SOCIAL ====================== */
.md-case3-grid { display: grid; grid-template-columns: 1fr; gap: clamp(20px, 2.6vw, 26px); }
@media (min-width: 700px)  { .md-case3-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .md-case3-grid { grid-template-columns: 1fr 1fr 1fr; } }
.md-case { display: flex; flex-direction: column; background: #ffffff; border: 1px solid rgba(22,40,58,.08); border-radius: 22px; overflow: hidden; box-shadow: 0 8px 26px rgba(22,40,58,.07); transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s; }
.md-case:hover { transform: translateY(-6px); border-color: transparent; box-shadow: 0 24px 60px -20px rgba(28,40,64,.30), 0 8px 24px -12px rgba(28,40,64,.18); }
.md-case__shot { position: relative; overflow: hidden; }
.md-case__ph { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 16 / 10; background-image: repeating-linear-gradient(135deg, #eef5f0 0 14px, #e7f1ec 14px 28px); font-family: ui-monospace, monospace; font-size: 12px; color: #8aa0ad; text-align: center; }
.md-case__img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.md-case:hover .md-case__img { transform: scale(1.06); }
.md-case__sector { position: absolute; bottom: 12px; right: 12px; background: #ffffff; color: #16283a; font-size: 12px; font-weight: 600; padding: 6px 13px; border-radius: 999px; white-space: nowrap; box-shadow: 0 4px 12px rgba(22,40,58,.16); }
.md-case__body { display: flex; flex-direction: column; flex: 1; padding: clamp(22px, 2.6vw, 28px); }
.md-case__name { margin: 0 0 4px; font-size: 19px; font-weight: 700; color: #16283a; line-height: normal; letter-spacing: normal; }
.md-case__meta { font-size: 13.5px; color: #6a7a8a; margin-bottom: 16px; }
.md-case__rank { display: inline-flex; align-items: center; gap: 9px; align-self: flex-start; border-radius: 999px; padding: 7px 13px; margin-bottom: 16px; }
.md-case__rank--green { background: #f1f8ea; }
.md-case__rank--blue  { background: #eef7fb; margin-bottom: 22px; }
.md-case__rank-txt { font-size: 13px; color: #38506a; }
.md-case__rank-num { font-weight: 700; }
.md-case__rank-num--green { color: #6fa72a; }
.md-case__rank-num--blue  { color: #1C9DD7; }
.md-case__quote { border-radius: 0 10px 10px 0; padding: 14px 16px; margin-bottom: 22px; }
.md-case__quote--green { border-left: 3px solid #8CC63F; background: #f6faf2; }
.md-case__quote--blue  { border-left: 3px solid #1C9DD7; background: #f2f8fb; }
.md-case__quote-txt { margin: 0; font-size: 14px; line-height: 1.55; color: #45586a; font-style: italic; }
.md-case__desc { margin: 0; font-size: 14px; line-height: 1.55; color: #45586a; }
.md-case__link { margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 9px; text-decoration: none; border: 1.5px solid #D9E0E8; color: #16283a; font-size: 14.5px; font-weight: 600; padding: 13px 20px; border-radius: 999px; transition: border-color .25s, color .25s, background .25s, transform .2s; }
.md-case__link svg { transition: transform .25s; }
.md-case__link:hover { border-color: transparent; color: #ffffff; background: linear-gradient(120deg, #8CC63F 0%, #46b39a 48%, #1C9DD7 100%); }
.md-case__link:hover svg { stroke: #ffffff; transform: translate(2px,-2px); }

/* ====================== 7 · LA ESCALERA ====================== */
.md-pipe { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
@media (min-width: 920px) { .md-pipe { flex-direction: row; align-items: stretch; } }
.md-pipe__base { flex: 1; background: #16283a; border-radius: 20px; padding: clamp(22px, 2.4vw, 26px); display: flex; flex-direction: column; gap: 12px; }
.md-pipe__base-ic { width: 46px; height: 46px; border-radius: 13px; background: linear-gradient(135deg, #8CC63F, #1C9DD7); display: flex; align-items: center; justify-content: center; }
.md-pipe__eyebrow { font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #8CC63F; margin-bottom: 6px; }
.md-pipe__base-title { font-size: clamp(16px, 2.2vw, 18px); font-weight: 700; color: #ffffff; line-height: normal; letter-spacing: normal; }
.md-pipe__base-text { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; color: rgba(226,236,244,.72); }
.md-pipe-conn { display: flex; align-items: center; justify-content: center; padding: 14px 0; }
@media (min-width: 920px) { .md-pipe-conn { padding: 0 4px; } }
.md-pipe-arrow { width: 38px; height: 38px; border-radius: 50%; background: #ffffff; box-shadow: 0 4px 12px rgba(22,40,58,.08); display: flex; align-items: center; justify-content: center; transform: rotate(90deg); }
@media (min-width: 920px) { .md-pipe-arrow { transform: rotate(0deg); } }
.md-pipe-arrow--blue  { border: 1px solid rgba(28,157,215,.22); }
.md-pipe-arrow--green { border: 1px solid rgba(140,198,63,.28); }
.md-pipe__card { flex: 1; background: #ffffff; border: 1px solid rgba(22,40,58,.07); border-radius: 20px; padding: clamp(22px, 2.4vw, 26px); box-shadow: 0 8px 24px rgba(22,40,58,.06); display: flex; flex-direction: column; }
.md-pipe__card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.md-pipe__card-ic { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.md-pipe__card-ic--blue  { background: #e2f1fb; }
.md-pipe__card-ic--green { background: #eef7e1; }
.md-pipe__num { font-size: 14px; font-weight: 800; letter-spacing: .04em; }
.md-pipe__num--blue  { color: rgba(28,157,215,.32); }
.md-pipe__num--green { color: rgba(140,198,63,.42); }
.md-pipe__card-title { margin: 0 0 8px; font-size: clamp(16px, 2.2vw, 18px); font-weight: 700; color: #16283a; line-height: normal; letter-spacing: normal; }
.md-pipe__card-text { margin: 0; font-size: 14px; line-height: 1.55; color: #56697b; }
.md-ladder__close { text-align: center; margin: clamp(34px, 5vw, 50px) auto 0; max-width: 620px; font-size: clamp(16px, 2.4vw, 19px); line-height: 1.5; color: #45586a; text-wrap: balance; }
.md-ladder__close b { font-weight: 700; color: #16283a; }

/* ====================== 8 · CONTRATACIÓN / CTA ====================== */
.md-cta { position: relative; overflow: hidden; background: linear-gradient(135deg, #16283a 0%, #1d3850 60%, #123640 100%); padding: clamp(56px, 8vw, 100px) clamp(20px, 5vw, 64px); }
.md-cta__blob { position: absolute; border-radius: 50%; pointer-events: none; }
.md-cta__blob--1 { top: -100px; right: -60px; width: 340px; height: 340px; background: radial-gradient(circle, rgba(140,198,63,.20), rgba(140,198,63,0) 70%); }
.md-cta__blob--2 { bottom: -120px; left: -80px; width: 320px; height: 320px; background: radial-gradient(circle, rgba(28,157,215,.22), rgba(28,157,215,0) 70%); }
.md-cta-grid { position: relative; max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: clamp(32px, 4vw, 52px); align-items: center; }
@media (min-width: 880px) { .md-cta-grid { grid-template-columns: 1fr 1.05fr; } }
.md-cta__pill { display: inline-flex; align-items: center; gap: 9px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 8px 15px; margin-bottom: 22px; }
.md-cta__pill-txt { font-size: 12.5px; font-weight: 600; letter-spacing: .04em; color: #e2ecf4; }
.md-cta__lead { margin: 0 0 30px; font-size: clamp(15px, 2.2vw, 18px); line-height: 1.65; color: rgba(226,236,244,.78); max-width: 460px; text-wrap: pretty; }
.md-cta__price { display: inline-flex; align-items: baseline; gap: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 18px 24px; }
.md-cta__price-label { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #8CC63F; margin-bottom: 4px; }
.md-cta__price-row { display: flex; align-items: baseline; gap: 8px; }
.md-cta__price-now { font-size: clamp(30px, 5vw, 40px); font-weight: 800; color: #ffffff; line-height: 1; }
.md-cta__price-iva { font-size: 16px; font-weight: 600; color: rgba(226,236,244,.7); }

/* ---- formulario (placeholder visual del diseño · Fase 3 = conexión real) ---- */
.md-form-card { background: #ffffff; border-radius: 24px; padding: clamp(24px, 3vw, 34px); box-shadow: 0 30px 70px rgba(0,0,0,.30); }
.md-form { display: flex; flex-direction: column; gap: 16px; }
.md-label { display: block; font-size: 13px; font-weight: 600; color: #38506a; margin-bottom: 7px; }
.md-input, .md-select, .md-textarea { width: 100%; box-sizing: border-box; font-family: inherit; font-size: 15px; color: #16283a; background: #f6f9fb; border: 1px solid rgba(22,40,58,.10); border-radius: 12px; padding: 13px 15px; outline: none; transition: border-color .15s ease, background .15s ease; }
.md-input:focus, .md-textarea:focus { border-color: #1C9DD7; background: #ffffff; }
.md-textarea { line-height: 1.5; resize: vertical; }
.md-select { padding: 13px 38px 13px 15px; appearance: none; -webkit-appearance: none; transition: border-color .15s ease, background-color .15s ease; }
.md-select:focus { border-color: #1C9DD7; background-color: #ffffff; }
.md-field-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 14px; }
.md-phone-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.md-phone-head__label { font-size: 13px; font-weight: 600; color: #38506a; }
.md-wa { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 12.5px; font-weight: 600; color: #56697b; }
.md-check { width: 16px; height: 16px; accent-color: #8CC63F; cursor: pointer; }
.md-phone { display: flex; align-items: stretch; background: #f6f9fb; border: 1px solid rgba(22,40,58,.10); border-radius: 12px; overflow: hidden; }
.md-phone__lada { flex-shrink: 0; box-sizing: border-box; font-family: inherit; font-size: 14px; font-weight: 600; color: #38506a; background-color: #eef2f5; border: none; border-right: 1px solid rgba(22,40,58,.08); padding: 13px 30px 13px 12px; outline: none; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%236a7a8a" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>'); background-repeat: no-repeat; background-position: right 11px center; }
.md-phone__input { flex: 1; min-width: 0; box-sizing: border-box; font-family: inherit; font-size: 15px; color: #16283a; background: transparent; border: none; padding: 13px 14px; outline: none; }
.md-select-wrap { position: relative; }
.md-select-caret { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.md-terms { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 13.5px; line-height: 1.5; color: #56697b; }
.md-terms__check { width: 18px; height: 18px; margin-top: 1px; accent-color: #8CC63F; flex-shrink: 0; cursor: pointer; }
.md-terms__link { color: #1C9DD7; font-weight: 600; text-decoration: none; }
.md-btn--block { margin-top: 4px; justify-content: center; width: 100%; cursor: pointer; border: none; font-family: inherit; padding: 16px 24px; box-shadow: 0 12px 26px rgba(28,157,215,.30); }
.md-btn--block:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(28,157,215,.4); }
.md-form__trust { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px; margin-top: 2px; }
.md-form__trust span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #6a7a8a; }

/* ====================== 9 · FAQ ====================== */
.md-faq { display: flex; flex-direction: column; gap: 14px; }
.md-faq__item { border: 1px solid rgba(22,40,58,.09); border-radius: 16px; overflow: hidden; background: #ffffff; box-shadow: 0 4px 14px rgba(22,40,58,.04); }
.md-faq__q { width: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: transparent; border: none; cursor: pointer; padding: clamp(18px, 2.4vw, 22px); text-align: left; font-family: inherit; }
.md-faq__q-txt { font-size: clamp(15px, 2vw, 17px); font-weight: 700; color: #16283a; }
.md-faq__icon { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: #f1f8ea; display: flex; align-items: center; justify-content: center; transition: transform .25s ease; transform: rotate(0deg); }
.md-faq__icon--open { transform: rotate(45deg); }
.md-faq__panel { display: none; }
.md-faq__panel--open { display: block; }
.md-faq__a { padding: 0 clamp(18px, 2.4vw, 22px) clamp(18px, 2.4vw, 22px); font-size: clamp(14px, 1.9vw, 15.5px); line-height: 1.65; color: #56697b; }

/* ===== Formulario real (lead-form lf-*) re-tematizado para la tarjeta blanca .md-form-card =====
   El lead-form global (styles.css) está hecho para fondo OSCURO (inputs blancos, textos claros).
   Aquí lo adaptamos al diseño CLARO de la tarjeta, sin tocar styles.css. Mayor especificidad
   (.md-form-card .lf-*) para ganar a las reglas globales. */
.md-form-card .lead-form__hint { color: #56697b; margin-bottom: 22px; }
.md-form-card .lead-form__grid { grid-template-columns: 1fr; gap: 16px; }   /* 1 columna dentro de la tarjeta */
.md-form-card .lf-field input,
.md-form-card .lf-optional input { background: #f6f9fb; border-color: rgba(22,40,58,.12); color: #16283a; }
/* select: solo background-color (NO el shorthand) para no borrar la flecha (background-image) del global */
.md-form-card .lf-field select { background-color: #f6f9fb; border-color: rgba(22,40,58,.12); }
.md-form-card .lf-field input::placeholder,
.md-form-card .lf-optional input::placeholder { color: #8aa0ad; }
.md-form-card .lf-field select { color: #8aa0ad; }
.md-form-card .lf-field select.has-value { color: #16283a; }
.md-form-card .lf-field input:focus,
.md-form-card .lf-field select:focus,
.md-form-card .lf-optional input:focus { border-color: #1C9DD7; box-shadow: 0 0 0 4px rgba(28,157,215,.15); }
.md-form-card .lf-field.invalid input,
.md-form-card .lf-field.invalid select { border-color: #e5484d; box-shadow: 0 0 0 4px rgba(229,72,77,.15); }
.md-form-card .lf-error { color: #e5484d; }
/* textarea opcional (el global solo estiliza .lf-optional input, no textarea) */
.md-form-card .lf-optional textarea { width: 100%; box-sizing: border-box; min-height: 96px; padding: 14px 18px;
  border: 1.5px solid rgba(22,40,58,.12); border-radius: 14px; background: #f6f9fb; color: #16283a;
  font-family: var(--ff-body); font-size: 15.5px; line-height: 1.5; resize: vertical;
  -webkit-appearance: none; appearance: none; transition: box-shadow .2s, border-color .2s; }
.md-form-card .lf-optional textarea::placeholder { color: #8aa0ad; }
.md-form-card .lf-optional textarea:focus { outline: none; border-color: #1C9DD7; box-shadow: 0 0 0 4px rgba(28,157,215,.15); }
/* términos + mensaje de éxito legibles sobre blanco */
.md-form-card .lf-check { color: #56697b; }
.md-form-card .lf-check a { color: #1C9DD7; }
.md-form-card .lf-check a:hover { color: #1683BB; }
/* error del checkbox de términos sobre la tarjeta blanca (app.js añade .invalid al .lf-check) */
.md-form-card .lf-check.invalid { color: #e5484d; }
.md-form-card .lf-check.invalid input { outline: 2px solid #e5484d; outline-offset: 2px; border-radius: 3px; }
.md-form-card .lf-check.invalid a { color: #e5484d; }
.md-form-card .lf-success { color: #16a34a; }
/* botón del diseño a ancho completo dentro de su .lf-actions */
.md-form-card .lf-actions { margin-top: 22px; }
.md-form-card .lf-actions .md-btn--block { width: 100%; margin-top: 0; }