/* base.css — Mapplics
   Unión de los estilos propios de todas las páginas del diseño
   (nav, dropdowns, tarjetas, hovers, keyframes, media queries) +
   capa de adaptación responsive/móvil de Mapplics al final. */

/* ===================== Landing ===================== */
  body { margin:0; background:#f2e5d5; }
  * { box-sizing:border-box; }
  /* brand-lowercase */
  h1,h2,h3,h4 { text-transform:none; }
  .mp-nav-links a, .mp-mobile-link, .mp-mobile-cta { text-transform:capitalize; }
  ::selection { background:#be3777; color:#fff; }
  @keyframes fadeUp { from { opacity:0; transform:translateY(14px);} to { opacity:1; transform:translateY(0);} }
  @keyframes msgIn { from { opacity:0; transform:translateY(8px) scale(.98);} to { opacity:1; transform:translateY(0) scale(1);} }
  @keyframes flash { 0%,100% { background:rgba(190,55,119,.06);} 50% { background:rgba(190,55,119,.2);} }
  @keyframes pulse { 0%,100% { opacity:1; transform:scale(1);} 50% { opacity:.4; transform:scale(.8);} }
  @keyframes marquee { from { transform:translateX(0);} to { transform:translateX(-50%);} }
  .mp-marquee-track { animation:marquee 48s linear infinite; }
  .mp-marquee-track:hover { animation-play-state:paused; }
  @keyframes cupFloat { 0%,100% { transform:translateY(0) rotate(-2deg);} 50% { transform:translateY(-9px) rotate(2deg);} }
  @keyframes steam { 0% { opacity:0; transform:translateY(6px) scaleY(.9);} 40% { opacity:1;} 100% { opacity:0; transform:translateY(-10px) scaleY(1.1);} }
  @keyframes morphSwap { 0%,42% { opacity:1;} 52%,92% { opacity:0;} 100% { opacity:1;} }
  @keyframes morphSwap2 { 0%,42% { opacity:0;} 52%,92% { opacity:1;} 100% { opacity:0;} }
  @keyframes barGrow { from { transform:scaleY(.25);} to { transform:scaleY(1);} }
  @keyframes mpWand { 0%,100% { transform:translate(-50%,-50%) rotate(-8deg) scale(1);} 50% { transform:translate(-50%,-50%) rotate(8deg) scale(1.12);} }
  @keyframes mpRing { 0% { transform:translate(-50%,-50%) scale(.8); opacity:.6;} 100% { transform:translate(-50%,-50%) scale(1.9); opacity:0;} }
  @keyframes mpSpark { 0%,100% { opacity:.3; transform:scale(.7);} 50% { opacity:1; transform:scale(1);} }
  .mp-reveal { opacity:0; transform:translateY(24px); transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
  .mp-reveal.mp-in { opacity:1; transform:none; }
  .mp-lift { transition:transform .22s ease, box-shadow .22s ease; }
  .mp-lift:hover { transform:translateY(-5px); box-shadow:0 22px 46px rgba(17,23,34,.13); }

  @media (max-width: 900px) {
    #mp-content > div { margin-left:16px !important; margin-right:16px !important; padding-left:24px !important; padding-right:24px !important; }
    [style*="grid-template-columns"] { grid-template-columns:1fr !important; }
    [style*="repeat(4,1fr)"] { grid-template-columns:1fr 1fr !important; }
    h1 { font-size:clamp(34px,8.5vw,58px) !important; line-height:1.05 !important; }
    h2 { font-size:clamp(27px,6vw,42px) !important; line-height:1.08 !important; }
    h3 { font-size:clamp(18px,4.4vw,23px) !important; }
    .mp-nav-inner { padding:14px 20px !important; }
    .mp-nav-links { display:none !important; }
    .mp-burger { display:inline-flex !important; }
    .mp-mobile-menu.open { display:block !important; animation:mpMenuIn .26s ease both; }
    .mp-foot-inner { padding:0 22px !important; }
  }
  @media (max-width: 560px) {
    #mp-content > div { padding-top:36px !important; padding-bottom:36px !important; }
    [style*="repeat(4,1fr)"], [style*="grid-template-columns"] { grid-template-columns:1fr !important; }
  }

  .mp-burger-box { position:relative; width:20px; height:14px; display:block; }
  .mp-burger-box > span { position:absolute; left:0; width:20px; height:2px; background:#1f3838; border-radius:2px; transition:transform .28s ease, opacity .18s ease, top .28s ease; }
  .mp-burger-box > span:nth-child(1){ top:0; }
  .mp-burger-box > span:nth-child(2){ top:6px; }
  .mp-burger-box > span:nth-child(3){ top:12px; }
  .mp-burger.open .mp-burger-box > span:nth-child(1){ top:6px; transform:rotate(45deg); }
  .mp-burger.open .mp-burger-box > span:nth-child(2){ opacity:0; }
  .mp-burger.open .mp-burger-box > span:nth-child(3){ top:6px; transform:rotate(-45deg); }
  .mp-mobile-menu { display:none; max-height:calc(100vh - 74px); overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .mp-mobile-inner { display:flex; flex-direction:column; padding:6px 24px 24px; }
  .mp-mobile-link { font-family:'Poppins',sans-serif; font-size:17px; font-weight:600; color:#1f3838; text-decoration:none; padding:16px 2px; border-bottom:1px solid rgba(17,23,34,.08); transition:color .18s ease; }
  .mp-mobile-link:hover, .mp-mobile-link:active { color:#be3777; }
  .mp-mobile-cta { margin-top:20px; font-family:'Poppins',sans-serif; font-size:16px; font-weight:700; color:#fff; background:#be3777; text-decoration:none; text-align:center; padding:15px; border-radius:12px; box-shadow:0 12px 28px rgba(190,55,119,.28); }
  .mp-drop { position:relative; }
  .mp-drop-panel { position:absolute; top:calc(100% + 16px); left:50%; transform:translateX(-50%) translateY(6px); background:#fff; border:1px solid #E9E6DF; border-radius:14px; box-shadow:0 18px 44px rgba(17,23,34,.14); padding:8px; min-width:250px; opacity:0; visibility:hidden; transition:opacity .18s ease, transform .18s ease; z-index:60; }
  .mp-drop:hover .mp-drop-panel { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
  .mp-drop::after { content:""; position:absolute; left:-10px; right:-10px; top:100%; height:20px; }
  .mp-drop:hover .mp-drop-panel, .mp-drop-panel:hover { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
  .mp-drop-panel a { display:block; padding:11px 14px; border-radius:9px; color:#1f3838; text-decoration:none; text-transform:none; }
  .mp-drop-panel a:hover { background:#F4EFE7; }
  .mp-drop-ttl { font-family:'Poppins',sans-serif; font-weight:600; font-size:14px; }
  .mp-drop-desc { display:block; font-size:11.5px; color:#8a8f99; margin-top:2px; }
  .mp-mobile-sub { font-family:'Poppins',sans-serif; font-size:14.5px; font-weight:500; color:#5C636F; text-decoration:none; padding:12px 2px 12px 18px; border-bottom:1px solid rgba(17,23,34,.06); }
  .mp-mobile-sub:active { color:#be3777; }
  .mp-msub-wrap { max-height:0; overflow:hidden; transition:max-height .32s ease; }
  .mp-msub-wrap.open { max-height:640px; }
  .mp-msub-toggle.open .mp-msub-chev { transform:rotate(180deg); }
  @keyframes mpMenuIn { from{opacity:0; transform:translateY(-8px);} to{opacity:1; transform:translateY(0);} }
  .mp-pair-pain:hover, .mp-pair-sol:hover { transform:translateY(-4px); box-shadow:0 18px 40px rgba(31,56,56,.12); }
  @media (max-width: 760px) {
    .mp-pair { grid-template-columns:1fr !important; gap:8px !important; }
    .mp-pair > div:nth-child(2) { transform:rotate(90deg); padding:4px 0; }
    .mp-pair-pain, .mp-pair-sol { border-radius:28px !important; padding:24px 28px !important; min-height:0 !important; }
  }
  @media (max-width:760px){ .mp-journey-deco { display:none !important; } }
  .mp-diff > div:first-child { border-left:none !important; }
  @media (max-width:760px){ .mp-diff { grid-template-columns:1fr !important; } .mp-diff > div { border-left:none !important; border-top:1px solid #EFEBE3; } .mp-diff > div:first-child { border-top:none; } }

/* ===================== PyME ===================== */
  body { margin:0; background:#f2e5d5; }
  * { box-sizing:border-box; }
  h1,h2,h3,h4 { text-transform:none; }
  .mp-nav-links a, .mp-mobile-link, .mp-mobile-cta { text-transform:capitalize; }
  ::selection { background:#be3777; color:#fff; }
  @keyframes fadeUp { from { opacity:0; transform:translateY(14px);} to { opacity:1; transform:translateY(0);} }
  @keyframes cupFloat { 0%,100% { transform:translateY(0) rotate(-2deg);} 50% { transform:translateY(-9px) rotate(2deg);} }
  @keyframes steam { 0% { opacity:0; transform:translateY(6px) scaleY(.9);} 40% { opacity:1;} 100% { opacity:0; transform:translateY(-10px) scaleY(1.1);} }
  @keyframes marquee { from { transform:translateX(0);} to { transform:translateX(-50%);} }
  .mp-marquee-track { animation:marquee 48s linear infinite; }
  .mp-marquee-track:hover { animation-play-state:paused; }
  @keyframes flash { 0%,100% { background:rgba(190,55,119,.06);} 50% { background:rgba(190,55,119,.2);} }
  .mp-reveal { opacity:0; transform:translateY(24px); transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
  .mp-lift { transition:transform .22s ease, box-shadow .22s ease; }
  .mp-lift:hover { transform:translateY(-5px); box-shadow:0 22px 46px rgba(17,23,34,.13); }
  .mp-imgcard { transition:transform .25s ease, box-shadow .25s ease; }
  .mp-imgcard:hover { transform:translateY(-6px); box-shadow:0 28px 56px rgba(31,56,56,.24); }

  .mp-drop { position:relative; }
  .mp-drop-panel { position:absolute; top:calc(100% + 16px); left:50%; transform:translateX(-50%) translateY(6px); background:#fff; border:1px solid #E9E6DF; border-radius:14px; box-shadow:0 18px 44px rgba(17,23,34,.14); padding:8px; min-width:250px; opacity:0; visibility:hidden; transition:opacity .18s ease, transform .18s ease; z-index:60; }
  .mp-drop:hover .mp-drop-panel { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
  .mp-drop::after { content:""; position:absolute; left:-10px; right:-10px; top:100%; height:20px; }
  .mp-drop:hover .mp-drop-panel, .mp-drop-panel:hover { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
  .mp-drop-panel a { display:block; padding:11px 14px; border-radius:9px; color:#1f3838; text-decoration:none; text-transform:none; }
  .mp-drop-panel a:hover { background:#F4EFE7; }
  .mp-drop-ttl { font-family:'Poppins',sans-serif; font-weight:600; font-size:14px; }
  .mp-drop-desc { display:block; font-size:11.5px; color:#8a8f99; margin-top:2px; }

  @media (max-width: 900px) {
    #mp-content > div { margin-left:16px !important; margin-right:16px !important; padding-left:24px !important; padding-right:24px !important; }
    [style*="grid-template-columns"] { grid-template-columns:1fr !important; }
    [style*="repeat(3,1fr)"] { grid-template-columns:1fr !important; }
    h1 { font-size:clamp(34px,8.5vw,56px) !important; line-height:1.05 !important; }
    h2 { font-size:clamp(27px,6vw,42px) !important; line-height:1.08 !important; }
    h3 { font-size:clamp(18px,4.4vw,23px) !important; }
    .mp-nav-inner { padding:14px 20px !important; }
    .mp-nav-links { display:none !important; }
    .mp-burger { display:inline-flex !important; }
    .mp-mobile-menu.open { display:block !important; animation:mpMenuIn .26s ease both; }
    .mp-foot-inner { padding:0 22px !important; }
  }
  @media (max-width: 560px) { #mp-content > div { padding-top:36px !important; padding-bottom:36px !important; } }

  .mp-burger-box { position:relative; width:20px; height:14px; display:block; }
  .mp-burger-box > span { position:absolute; left:0; width:20px; height:2px; background:#1f3838; border-radius:2px; transition:transform .28s ease, opacity .18s ease, top .28s ease; }
  .mp-burger-box > span:nth-child(1){ top:0; } .mp-burger-box > span:nth-child(2){ top:6px; } .mp-burger-box > span:nth-child(3){ top:12px; }
  .mp-burger.open .mp-burger-box > span:nth-child(1){ top:6px; transform:rotate(45deg); }
  .mp-burger.open .mp-burger-box > span:nth-child(2){ opacity:0; }
  .mp-burger.open .mp-burger-box > span:nth-child(3){ top:6px; transform:rotate(-45deg); }
  .mp-mobile-menu { display:none; max-height:calc(100vh - 74px); overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .mp-mobile-inner { display:flex; flex-direction:column; padding:6px 24px 24px; }
  .mp-mobile-link { font-family:'Poppins',sans-serif; font-size:17px; font-weight:600; color:#1f3838; text-decoration:none; padding:16px 2px; border-bottom:1px solid rgba(17,23,34,.08); transition:color .18s ease; }
  .mp-mobile-sub { font-family:'Poppins',sans-serif; font-size:14.5px; font-weight:500; color:#5C636F; text-decoration:none; padding:12px 2px 12px 18px; border-bottom:1px solid rgba(17,23,34,.06); }
  .mp-mobile-link:hover, .mp-mobile-link:active, .mp-mobile-sub:active { color:#be3777; }
  .mp-mobile-cta { margin-top:20px; font-family:'Poppins',sans-serif; font-size:16px; font-weight:700; color:#fff; background:#be3777; text-decoration:none; text-align:center; padding:15px; border-radius:12px; box-shadow:0 12px 28px rgba(190,55,119,.28); }
  @keyframes mpMenuIn { from{opacity:0; transform:translateY(-8px);} to{opacity:1; transform:translateY(0);} }
  .mp-pair-pain:hover, .mp-pair-sol:hover { transform:translateY(-4px); box-shadow:0 18px 40px rgba(31,56,56,.12); }
  @media (max-width: 760px) {
    .mp-pair { grid-template-columns:1fr !important; gap:8px !important; }
    .mp-pair > div:nth-child(2) { transform:rotate(90deg); padding:4px 0; }
    .mp-pair-pain, .mp-pair-sol { border-radius:28px !important; padding:24px 28px !important; min-height:0 !important; }
    .mp-pair-pain { padding-left:28px !important; }
    .mp-pair-pain > span { position:static !important; transform:none !important; display:block; margin-bottom:6px; font-size:44px !important; }
  }

/* ===================== Casos de Éxito ===================== */
  body { margin:0; background:#f2e5d5; }
  * { box-sizing:border-box; }
  /* brand-lowercase */
  h1,h2,h3,h4 { text-transform:none; }
  .mp-nav-links a, .mp-mobile-link, .mp-mobile-cta { text-transform:capitalize; }
  ::selection { background:#be3777; color:#fff; }
  @keyframes fadeUp { from { opacity:0; transform:translateY(14px);} to { opacity:1; transform:translateY(0);} }
  @keyframes cupFloat { 0%,100% { transform:translateY(0) rotate(-2deg);} 50% { transform:translateY(-9px) rotate(2deg);} }
  @keyframes steam { 0% { opacity:0; transform:translateY(6px) scaleY(.9);} 40% { opacity:1;} 100% { opacity:0; transform:translateY(-10px) scaleY(1.1);} }
  @keyframes lbIn { from { opacity:0;} to { opacity:1;} }
  .mp-reveal { opacity:0; transform:translateY(24px); transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
  .mp-lift { transition:transform .22s ease, box-shadow .22s ease; }
  .mp-lift:hover { transform:translateY(-5px); box-shadow:0 22px 46px rgba(17,23,34,.13); }

  @media (max-width: 900px) {
    #mp-content > div { margin-left:16px !important; margin-right:16px !important; padding-left:24px !important; padding-right:24px !important; }
    [style*="grid-template-columns"] { grid-template-columns:1fr !important; }
    [style*="repeat(4,1fr)"] { grid-template-columns:1fr 1fr !important; }
    h1 { font-size:clamp(34px,8.5vw,58px) !important; line-height:1.05 !important; }
    h2 { font-size:clamp(27px,6vw,42px) !important; line-height:1.08 !important; }
    h3 { font-size:clamp(18px,4.4vw,23px) !important; }
    .mp-nav-inner { padding:14px 20px !important; }
    .mp-nav-links { display:none !important; }
    .mp-burger { display:inline-flex !important; }
    .mp-mobile-menu.open { display:block !important; animation:mpMenuIn .26s ease both; }
    .mp-case-media { order:2 !important; }
    .mp-foot-inner { padding:0 22px !important; }
  }
  .mp-case-media { border:6px solid #fff; outline:1px solid rgba(31,56,56,.1); }
  @media (max-width: 560px) {
    #mp-content > div { padding-top:36px !important; padding-bottom:36px !important; }
    [style*="repeat(4,1fr)"], [style*="grid-template-columns"] { grid-template-columns:1fr !important; }
  }

  .mp-burger-box { position:relative; width:20px; height:14px; display:block; }
  .mp-burger-box > span { position:absolute; left:0; width:20px; height:2px; background:#1f3838; border-radius:2px; transition:transform .28s ease, opacity .18s ease, top .28s ease; }
  .mp-burger-box > span:nth-child(1){ top:0; }
  .mp-burger-box > span:nth-child(2){ top:6px; }
  .mp-burger-box > span:nth-child(3){ top:12px; }
  .mp-burger.open .mp-burger-box > span:nth-child(1){ top:6px; transform:rotate(45deg); }
  .mp-burger.open .mp-burger-box > span:nth-child(2){ opacity:0; }
  .mp-burger.open .mp-burger-box > span:nth-child(3){ top:6px; transform:rotate(-45deg); }
  .mp-mobile-menu { display:none; max-height:calc(100vh - 74px); overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .mp-mobile-inner { display:flex; flex-direction:column; padding:6px 24px 24px; }
  .mp-mobile-link { font-family:'Poppins',sans-serif; font-size:17px; font-weight:600; color:#1f3838; text-decoration:none; padding:16px 2px; border-bottom:1px solid rgba(17,23,34,.08); transition:color .18s ease; }
  .mp-mobile-link:hover, .mp-mobile-link:active { color:#be3777; }
  .mp-mobile-cta { margin-top:20px; font-family:'Poppins',sans-serif; font-size:16px; font-weight:700; color:#fff; background:var(--mp-accent,#be3777); text-decoration:none; text-align:center; padding:15px; border-radius:12px; box-shadow:0 12px 28px rgba(var(--mp-accent-rgb,190,55,119),.28); }
  .mp-drop { position:relative; }
  .mp-drop-panel { position:absolute; top:calc(100% + 16px); left:50%; transform:translateX(-50%) translateY(6px); background:#fff; border:1px solid #E9E6DF; border-radius:14px; box-shadow:0 18px 44px rgba(17,23,34,.14); padding:8px; min-width:250px; opacity:0; visibility:hidden; transition:opacity .18s ease, transform .18s ease; z-index:60; }
  .mp-drop:hover .mp-drop-panel { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
  .mp-drop::after { content:""; position:absolute; left:-10px; right:-10px; top:100%; height:20px; }
  .mp-drop:hover .mp-drop-panel, .mp-drop-panel:hover { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
  .mp-drop-panel a { display:block; padding:11px 14px; border-radius:9px; color:#1f3838; text-decoration:none; text-transform:none; }
  .mp-drop-panel a:hover { background:#F4EFE7; }
  .mp-drop-ttl { font-family:'Poppins',sans-serif; font-weight:600; font-size:14px; }
  .mp-drop-desc { display:block; font-size:11.5px; color:#8a8f99; margin-top:2px; }
  .mp-mobile-sub { font-family:'Poppins',sans-serif; font-size:14.5px; font-weight:500; color:#5C636F; text-decoration:none; padding:12px 2px 12px 18px; border-bottom:1px solid rgba(17,23,34,.06); }
  .mp-mobile-sub:active { color:#be3777; }
  .mp-msub-wrap { max-height:0; overflow:hidden; transition:max-height .32s ease; }
  .mp-msub-wrap.open { max-height:640px; }
  .mp-msub-toggle.open .mp-msub-chev { transform:rotate(180deg); }
  @keyframes mpMenuIn { from{opacity:0; transform:translateY(-8px);} to{opacity:1; transform:translateY(0);} }

/* ===================== Servicios ===================== */
  body { margin:0; background:#f2e5d5; }
  * { box-sizing:border-box; }
  /* brand-lowercase */
  h1,h2,h3,h4 { text-transform:none; }
  .mp-nav-links a, .mp-mobile-link, .mp-mobile-cta { text-transform:capitalize; }
  ::selection { background:#be3777; color:#fff; }
  @keyframes fadeUp { from { opacity:0; transform:translateY(14px);} to { opacity:1; transform:translateY(0);} }
  @keyframes cupFloat { 0%,100% { transform:translateY(0) rotate(-2deg);} 50% { transform:translateY(-9px) rotate(2deg);} }
  @keyframes steam { 0% { opacity:0; transform:translateY(6px) scaleY(.9);} 40% { opacity:1;} 100% { opacity:0; transform:translateY(-10px) scaleY(1.1);} }
  @keyframes spinSlow { from { transform:rotate(0);} to { transform:rotate(360deg);} }
  .mp-reveal { opacity:0; transform:translateY(24px); transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
  .mp-lift { transition:transform .22s ease, box-shadow .22s ease; }
  .mp-lift:hover { transform:translateY(-5px); box-shadow:0 22px 46px rgba(17,23,34,.13); }

  @media (max-width: 900px) {
    #mp-content > div { margin-left:16px !important; margin-right:16px !important; padding-left:24px !important; padding-right:24px !important; }
    [style*="grid-template-columns"] { grid-template-columns:1fr !important; }
    [style*="repeat(4,1fr)"] { grid-template-columns:1fr 1fr !important; }
    h1 { font-size:clamp(34px,8.5vw,58px) !important; line-height:1.05 !important; }
    h2 { font-size:clamp(27px,6vw,42px) !important; line-height:1.08 !important; }
    h3 { font-size:clamp(18px,4.4vw,23px) !important; }
    .mp-nav-inner { padding:14px 20px !important; }
    .mp-nav-links { display:none !important; }
    .mp-burger { display:inline-flex !important; }
    .mp-mobile-menu.open { display:block !important; animation:mpMenuIn .26s ease both; }
    .mp-foot-inner { padding:0 22px !important; }
  }
  @media (max-width: 560px) {
    #mp-content > div { padding-top:36px !important; padding-bottom:36px !important; }
    [style*="repeat(4,1fr)"], [style*="grid-template-columns"] { grid-template-columns:1fr !important; }
  }

  .mp-burger-box { position:relative; width:20px; height:14px; display:block; }
  .mp-burger-box > span { position:absolute; left:0; width:20px; height:2px; background:#1f3838; border-radius:2px; transition:transform .28s ease, opacity .18s ease, top .28s ease; }
  .mp-burger-box > span:nth-child(1){ top:0; }
  .mp-burger-box > span:nth-child(2){ top:6px; }
  .mp-burger-box > span:nth-child(3){ top:12px; }
  .mp-burger.open .mp-burger-box > span:nth-child(1){ top:6px; transform:rotate(45deg); }
  .mp-burger.open .mp-burger-box > span:nth-child(2){ opacity:0; }
  .mp-burger.open .mp-burger-box > span:nth-child(3){ top:6px; transform:rotate(-45deg); }
  .mp-mobile-menu { display:none; max-height:calc(100vh - 74px); overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .mp-mobile-inner { display:flex; flex-direction:column; padding:6px 24px 24px; }
  .mp-mobile-link { font-family:'Poppins',sans-serif; font-size:17px; font-weight:600; color:#1f3838; text-decoration:none; padding:16px 2px; border-bottom:1px solid rgba(17,23,34,.08); transition:color .18s ease; }
  .mp-mobile-link:hover, .mp-mobile-link:active { color:#be3777; }
  .mp-mobile-cta { margin-top:20px; font-family:'Poppins',sans-serif; font-size:16px; font-weight:700; color:#fff; background:#be3777; text-decoration:none; text-align:center; padding:15px; border-radius:12px; box-shadow:0 12px 28px rgba(190,55,119,.28); }
  .mp-drop { position:relative; }
  .mp-drop-panel { position:absolute; top:calc(100% + 16px); left:50%; transform:translateX(-50%) translateY(6px); background:#fff; border:1px solid #E9E6DF; border-radius:14px; box-shadow:0 18px 44px rgba(17,23,34,.14); padding:8px; min-width:250px; opacity:0; visibility:hidden; transition:opacity .18s ease, transform .18s ease; z-index:60; }
  .mp-drop:hover .mp-drop-panel { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
  .mp-drop::after { content:""; position:absolute; left:-10px; right:-10px; top:100%; height:20px; }
  .mp-drop:hover .mp-drop-panel, .mp-drop-panel:hover { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
  .mp-drop-panel a { display:block; padding:11px 14px; border-radius:9px; color:#1f3838; text-decoration:none; text-transform:none; }
  .mp-drop-panel a:hover { background:#F4EFE7; }
  .mp-drop-ttl { font-family:'Poppins',sans-serif; font-weight:600; font-size:14px; }
  .mp-drop-desc { display:block; font-size:11.5px; color:#8a8f99; margin-top:2px; }
  .mp-mobile-sub { font-family:'Poppins',sans-serif; font-size:14.5px; font-weight:500; color:#5C636F; text-decoration:none; padding:12px 2px 12px 18px; border-bottom:1px solid rgba(17,23,34,.06); }
  .mp-mobile-sub:active { color:#be3777; }
  .mp-msub-wrap { max-height:0; overflow:hidden; transition:max-height .32s ease; }
  .mp-msub-wrap.open { max-height:640px; }
  .mp-msub-toggle.open .mp-msub-chev { transform:rotate(180deg); }
  @keyframes mpMenuIn { from{opacity:0; transform:translateY(-8px);} to{opacity:1; transform:translateY(0);} }

/* ===================== Quiénes Somos ===================== */
  body { margin:0; background:#f2e5d5; }
  * { box-sizing:border-box; }
  h1,h2,h3,h4 { text-transform:none; }
  .mp-nav-links a, .mp-mobile-link, .mp-mobile-cta { text-transform:capitalize; }
  ::selection { background:#be3777; color:#fff; }
  @keyframes fadeUp { from { opacity:0; transform:translateY(14px);} to { opacity:1; transform:translateY(0);} }
  @keyframes cupFloat { 0%,100% { transform:translateY(0) rotate(-2deg);} 50% { transform:translateY(-9px) rotate(2deg);} }
  @keyframes steam { 0% { opacity:0; transform:translateY(6px) scaleY(.9);} 40% { opacity:1;} 100% { opacity:0; transform:translateY(-10px) scaleY(1.1);} }
  .mp-reveal { opacity:0; transform:translateY(24px); transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
  .mp-lift { transition:transform .22s ease, box-shadow .22s ease; }
  .mp-lift:hover { transform:translateY(-5px); box-shadow:0 22px 46px rgba(17,23,34,.13); }

  @media (max-width: 900px) {
    #mp-content > div { margin-left:16px !important; margin-right:16px !important; padding-left:24px !important; padding-right:24px !important; }
    [style*="grid-template-columns"] { grid-template-columns:1fr !important; }
    [style*="repeat(4,1fr)"] { grid-template-columns:1fr 1fr !important; }
    [style*="repeat(3,1fr)"] { grid-template-columns:1fr 1fr !important; }
    h1 { font-size:clamp(34px,8.5vw,58px) !important; line-height:1.05 !important; }
    h2 { font-size:clamp(27px,6vw,42px) !important; line-height:1.08 !important; }
    h3 { font-size:clamp(18px,4.4vw,23px) !important; }
    .mp-nav-inner { padding:14px 20px !important; }
    .mp-nav-links { display:none !important; }
    .mp-burger { display:inline-flex !important; }
    .mp-mobile-menu.open { display:block !important; animation:mpMenuIn .26s ease both; }
    .mp-foot-inner { padding:0 22px !important; }
  }
  @media (max-width: 560px) {
    #mp-content > div { padding-top:36px !important; padding-bottom:36px !important; }
    [style*="repeat(4,1fr)"], [style*="repeat(3,1fr)"], [style*="grid-template-columns"] { grid-template-columns:1fr !important; }
  }

  .mp-burger-box { position:relative; width:20px; height:14px; display:block; }
  .mp-burger-box > span { position:absolute; left:0; width:20px; height:2px; background:#1f3838; border-radius:2px; transition:transform .28s ease, opacity .18s ease, top .28s ease; }
  .mp-burger-box > span:nth-child(1){ top:0; }
  .mp-burger-box > span:nth-child(2){ top:6px; }
  .mp-burger-box > span:nth-child(3){ top:12px; }
  .mp-burger.open .mp-burger-box > span:nth-child(1){ top:6px; transform:rotate(45deg); }
  .mp-burger.open .mp-burger-box > span:nth-child(2){ opacity:0; }
  .mp-burger.open .mp-burger-box > span:nth-child(3){ top:6px; transform:rotate(-45deg); }
  .mp-mobile-menu { display:none; max-height:calc(100vh - 74px); overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .mp-mobile-inner { display:flex; flex-direction:column; padding:6px 24px 24px; }
  .mp-mobile-link { font-family:'Poppins',sans-serif; font-size:17px; font-weight:600; color:#1f3838; text-decoration:none; padding:16px 2px; border-bottom:1px solid rgba(17,23,34,.08); transition:color .18s ease; }
  .mp-mobile-link:hover, .mp-mobile-link:active { color:#be3777; }
  .mp-mobile-cta { margin-top:20px; font-family:'Poppins',sans-serif; font-size:16px; font-weight:700; color:#fff; background:#be3777; text-decoration:none; text-align:center; padding:15px; border-radius:12px; box-shadow:0 12px 28px rgba(190,55,119,.28); }
  .mp-drop { position:relative; }
  .mp-drop-panel { position:absolute; top:calc(100% + 16px); left:50%; transform:translateX(-50%) translateY(6px); background:#fff; border:1px solid #E9E6DF; border-radius:14px; box-shadow:0 18px 44px rgba(17,23,34,.14); padding:8px; min-width:250px; opacity:0; visibility:hidden; transition:opacity .18s ease, transform .18s ease; z-index:60; }
  .mp-drop:hover .mp-drop-panel { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
  .mp-drop::after { content:""; position:absolute; left:-10px; right:-10px; top:100%; height:20px; }
  .mp-drop:hover .mp-drop-panel, .mp-drop-panel:hover { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
  .mp-drop-panel a { display:block; padding:11px 14px; border-radius:9px; color:#1f3838; text-decoration:none; text-transform:none; }
  .mp-drop-panel a:hover { background:#F4EFE7; }
  .mp-drop-ttl { font-family:'Poppins',sans-serif; font-weight:600; font-size:14px; }
  .mp-drop-desc { display:block; font-size:11.5px; color:#8a8f99; margin-top:2px; }
  .mp-mobile-sub { font-family:'Poppins',sans-serif; font-size:14.5px; font-weight:500; color:#5C636F; text-decoration:none; padding:12px 2px 12px 18px; border-bottom:1px solid rgba(17,23,34,.06); }
  .mp-mobile-sub:active { color:#be3777; }
  .mp-msub-wrap { max-height:0; overflow:hidden; transition:max-height .32s ease; }
  .mp-msub-wrap.open { max-height:640px; }
  .mp-msub-toggle.open .mp-msub-chev { transform:rotate(180deg); }
  @keyframes mpMenuIn { from{opacity:0; transform:translateY(-8px);} to{opacity:1; transform:translateY(0);} }

/* ===================== Contacto ===================== */
  body { margin:0; background:#f2e5d5; }
  * { box-sizing:border-box; }
  /* brand-lowercase */
  h1,h2,h3,h4 { text-transform:none; }
  .mp-nav-links a, .mp-mobile-link, .mp-mobile-cta { text-transform:capitalize; }
  ::selection { background:#be3777; color:#fff; }
  @keyframes fadeUp { from { opacity:0; transform:translateY(14px);} to { opacity:1; transform:translateY(0);} }
  .mp-reveal { opacity:0; transform:translateY(24px); transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
  .mp-lift { transition:transform .22s ease, box-shadow .22s ease; }
  .mp-lift:hover { transform:translateY(-5px); box-shadow:0 22px 46px rgba(17,23,34,.13); }
  .mp-input:focus { outline:none; border-color:#be3777 !important; box-shadow:0 0 0 3px rgba(21,122,110,.14); }

  @media (max-width: 900px) {
    #mp-content > div { margin-left:16px !important; margin-right:16px !important; padding-left:24px !important; padding-right:24px !important; }
    [style*="grid-template-columns"] { grid-template-columns:1fr !important; }
    [style*="repeat(4,1fr)"] { grid-template-columns:1fr 1fr !important; }
    h1 { font-size:clamp(34px,8.5vw,58px) !important; line-height:1.05 !important; }
    h2 { font-size:clamp(27px,6vw,42px) !important; line-height:1.08 !important; }
    h3 { font-size:clamp(18px,4.4vw,23px) !important; }
    .mp-nav-inner { padding:14px 20px !important; }
    .mp-nav-links { display:none !important; }
    .mp-burger { display:inline-flex !important; }
    .mp-mobile-menu.open { display:block !important; animation:mpMenuIn .26s ease both; }
    .mp-foot-inner { padding:0 22px !important; }
  }
  @media (max-width: 560px) {
    #mp-content > div { padding-top:36px !important; padding-bottom:36px !important; }
    [style*="repeat(4,1fr)"], [style*="grid-template-columns"] { grid-template-columns:1fr !important; }
  }

  .mp-burger-box { position:relative; width:20px; height:14px; display:block; }
  .mp-burger-box > span { position:absolute; left:0; width:20px; height:2px; background:#1f3838; border-radius:2px; transition:transform .28s ease, opacity .18s ease, top .28s ease; }
  .mp-burger-box > span:nth-child(1){ top:0; }
  .mp-burger-box > span:nth-child(2){ top:6px; }
  .mp-burger-box > span:nth-child(3){ top:12px; }
  .mp-burger.open .mp-burger-box > span:nth-child(1){ top:6px; transform:rotate(45deg); }
  .mp-burger.open .mp-burger-box > span:nth-child(2){ opacity:0; }
  .mp-burger.open .mp-burger-box > span:nth-child(3){ top:6px; transform:rotate(-45deg); }
  .mp-mobile-menu { display:none; max-height:calc(100vh - 74px); overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .mp-mobile-inner { display:flex; flex-direction:column; padding:6px 24px 24px; }
  .mp-mobile-link { font-family:'Poppins',sans-serif; font-size:17px; font-weight:600; color:#1f3838; text-decoration:none; padding:16px 2px; border-bottom:1px solid rgba(17,23,34,.08); transition:color .18s ease; }
  .mp-mobile-link:hover, .mp-mobile-link:active { color:#be3777; }
  .mp-mobile-cta { margin-top:20px; font-family:'Poppins',sans-serif; font-size:16px; font-weight:700; color:#fff; background:#be3777; text-decoration:none; text-align:center; padding:15px; border-radius:12px; box-shadow:0 12px 28px rgba(190,55,119,.28); }
  .mp-drop { position:relative; }
  .mp-drop-panel { position:absolute; top:calc(100% + 16px); left:50%; transform:translateX(-50%) translateY(6px); background:#fff; border:1px solid #E9E6DF; border-radius:14px; box-shadow:0 18px 44px rgba(17,23,34,.14); padding:8px; min-width:250px; opacity:0; visibility:hidden; transition:opacity .18s ease, transform .18s ease; z-index:60; }
  .mp-drop:hover .mp-drop-panel { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
  .mp-drop::after { content:""; position:absolute; left:-10px; right:-10px; top:100%; height:20px; }
  .mp-drop:hover .mp-drop-panel, .mp-drop-panel:hover { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
  .mp-drop-panel a { display:block; padding:11px 14px; border-radius:9px; color:#1f3838; text-decoration:none; text-transform:none; }
  .mp-drop-panel a:hover { background:#F4EFE7; }
  .mp-drop-ttl { font-family:'Poppins',sans-serif; font-weight:600; font-size:14px; }
  .mp-drop-desc { display:block; font-size:11.5px; color:#8a8f99; margin-top:2px; }
  .mp-mobile-sub { font-family:'Poppins',sans-serif; font-size:14.5px; font-weight:500; color:#5C636F; text-decoration:none; padding:12px 2px 12px 18px; border-bottom:1px solid rgba(17,23,34,.06); }
  .mp-mobile-sub:active { color:#be3777; }
  .mp-msub-wrap { max-height:0; overflow:hidden; transition:max-height .32s ease; }
  .mp-msub-wrap.open { max-height:640px; }
  .mp-msub-toggle.open .mp-msub-chev { transform:rotate(180deg); }
  @keyframes mpMenuIn { from{opacity:0; transform:translateY(-8px);} to{opacity:1; transform:translateY(0);} }

/* ===================== Grandes empresas (Corpo) ===================== */
  body { margin:0; background:#f2e5d5; }
  * { box-sizing:border-box; }
  h1,h2,h3,h4 { text-transform:none; }
  .mp-nav-links a, .mp-mobile-link, .mp-mobile-cta { text-transform:capitalize; }
  ::selection { background:#be3777; color:#fff; }
  @keyframes fadeUp { from { opacity:0; transform:translateY(14px);} to { opacity:1; transform:translateY(0);} }
  @keyframes cupFloat { 0%,100% { transform:translateY(0) rotate(-2deg);} 50% { transform:translateY(-9px) rotate(2deg);} }
  @keyframes steam { 0% { opacity:0; transform:translateY(6px) scaleY(.9);} 40% { opacity:1;} 100% { opacity:0; transform:translateY(-10px) scaleY(1.1);} }
  @keyframes marquee { from { transform:translateX(0);} to { transform:translateX(-50%);} }
  .mp-marquee-track { animation:marquee 48s linear infinite; }
  .mp-marquee-track:hover { animation-play-state:paused; }
  .mp-reveal { opacity:0; transform:translateY(24px); transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
  .mp-lift { transition:transform .22s ease, box-shadow .22s ease; }
  .mp-lift:hover { transform:translateY(-5px); box-shadow:0 22px 46px rgba(17,23,34,.13); }
  .mp-imgcard { transition:transform .25s ease, box-shadow .25s ease; }
  .mp-imgcard:hover { transform:translateY(-6px); box-shadow:0 28px 56px rgba(31,56,56,.24); }

  .mp-drop { position:relative; }
  .mp-drop-panel { position:absolute; top:calc(100% + 16px); left:50%; transform:translateX(-50%) translateY(6px); background:#fff; border:1px solid #E9E6DF; border-radius:14px; box-shadow:0 18px 44px rgba(17,23,34,.14); padding:8px; min-width:250px; opacity:0; visibility:hidden; transition:opacity .18s ease, transform .18s ease; z-index:60; }
  .mp-drop:hover .mp-drop-panel { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
  .mp-drop::after { content:""; position:absolute; left:-10px; right:-10px; top:100%; height:20px; }
  .mp-drop:hover .mp-drop-panel, .mp-drop-panel:hover { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
  .mp-drop-panel a { display:block; padding:11px 14px; border-radius:9px; color:#1f3838; text-decoration:none; text-transform:none; }
  .mp-drop-panel a:hover { background:#F4EFE7; }
  .mp-drop-ttl { font-family:'Poppins',sans-serif; font-weight:600; font-size:14px; }
  .mp-drop-desc { display:block; font-size:11.5px; color:#8a8f99; margin-top:2px; }

  @media (max-width: 900px) {
    #mp-content > div { margin-left:16px !important; margin-right:16px !important; padding-left:24px !important; padding-right:24px !important; }
    [style*="grid-template-columns"] { grid-template-columns:1fr !important; }
    [style*="repeat(3,1fr)"] { grid-template-columns:1fr !important; }
    [style*="repeat(4,1fr)"] { grid-template-columns:1fr 1fr !important; }
    h1 { font-size:clamp(34px,8.5vw,56px) !important; line-height:1.05 !important; }
    h2 { font-size:clamp(27px,6vw,42px) !important; line-height:1.08 !important; }
    h3 { font-size:clamp(18px,4.4vw,23px) !important; }
    .mp-nav-inner { padding:14px 20px !important; }
    .mp-nav-links { display:none !important; }
    .mp-burger { display:inline-flex !important; }
    .mp-mobile-menu.open { display:block !important; animation:mpMenuIn .26s ease both; }
    .mp-foot-inner { padding:0 22px !important; }
  }
  @media (max-width: 560px) { #mp-content > div { padding-top:36px !important; padding-bottom:36px !important; } [style*="repeat(4,1fr)"] { grid-template-columns:1fr !important; } }

  .mp-burger-box { position:relative; width:20px; height:14px; display:block; }
  .mp-burger-box > span { position:absolute; left:0; width:20px; height:2px; background:#1f3838; border-radius:2px; transition:transform .28s ease, opacity .18s ease, top .28s ease; }
  .mp-burger-box > span:nth-child(1){ top:0; } .mp-burger-box > span:nth-child(2){ top:6px; } .mp-burger-box > span:nth-child(3){ top:12px; }
  .mp-burger.open .mp-burger-box > span:nth-child(1){ top:6px; transform:rotate(45deg); }
  .mp-burger.open .mp-burger-box > span:nth-child(2){ opacity:0; }
  .mp-burger.open .mp-burger-box > span:nth-child(3){ top:6px; transform:rotate(-45deg); }
  .mp-mobile-menu { display:none; max-height:calc(100vh - 74px); overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .mp-mobile-inner { display:flex; flex-direction:column; padding:6px 24px 24px; }
  .mp-mobile-link { font-family:'Poppins',sans-serif; font-size:17px; font-weight:600; color:#1f3838; text-decoration:none; padding:16px 2px; border-bottom:1px solid rgba(17,23,34,.08); transition:color .18s ease; }
  .mp-mobile-sub { font-family:'Poppins',sans-serif; font-size:14.5px; font-weight:500; color:#5C636F; text-decoration:none; padding:12px 2px 12px 18px; border-bottom:1px solid rgba(17,23,34,.06); }
  .mp-mobile-link:hover, .mp-mobile-link:active, .mp-mobile-sub:active { color:#be3777; }
  .mp-mobile-cta { margin-top:20px; font-family:'Poppins',sans-serif; font-size:16px; font-weight:700; color:#fff; background:#be3777; text-decoration:none; text-align:center; padding:15px; border-radius:12px; box-shadow:0 12px 28px rgba(190,55,119,.28); }
  @keyframes mpMenuIn { from{opacity:0; transform:translateY(-8px);} to{opacity:1; transform:translateY(0);} }

/* ===================== Páginas de Servicio (compartido) ===================== */
  body { margin:0; background:#f2e5d5; }
  * { box-sizing:border-box; }
  h1,h2,h3,h4 { text-transform:none; }
  .mp-nav-links a, .mp-mobile-link, .mp-mobile-cta { text-transform:capitalize; }
  ::selection { background:#be3777; color:#fff; }
  @keyframes fadeUp { from { opacity:0; transform:translateY(14px);} to { opacity:1; transform:translateY(0);} }
  @keyframes cupFloat { 0%,100% { transform:translateY(0) rotate(-2deg);} 50% { transform:translateY(-9px) rotate(2deg);} }
  @keyframes steam { 0% { opacity:0; transform:translateY(6px) scaleY(.9);} 40% { opacity:1;} 100% { opacity:0; transform:translateY(-10px) scaleY(1.1);} }
  @keyframes pulse { 0%,100% { opacity:1; transform:scale(1);} 50% { opacity:.4; transform:scale(.8);} }
  @keyframes msgIn { from { opacity:0; transform:translateY(8px) scale(.98);} to { opacity:1; transform:translateY(0) scale(1);} }
  .mp-reveal { opacity:0; transform:translateY(24px); transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
  .mp-lift { transition:transform .22s ease, box-shadow .22s ease; }
  .mp-lift:hover { transform:translateY(-5px); box-shadow:0 22px 46px rgba(17,23,34,.13); }

  @media (max-width: 900px) {
    #mp-content > div { margin-left:16px !important; margin-right:16px !important; padding-left:24px !important; padding-right:24px !important; }
    [style*="grid-template-columns"] { grid-template-columns:1fr !important; }
    [style*="repeat(4,1fr)"] { grid-template-columns:1fr 1fr !important; }
    [style*="repeat(3,1fr)"] { grid-template-columns:1fr !important; }
    h1 { font-size:clamp(34px,8.5vw,56px) !important; line-height:1.05 !important; }
    h2 { font-size:clamp(27px,6vw,42px) !important; line-height:1.08 !important; }
    h3 { font-size:clamp(18px,4.4vw,23px) !important; }
    .mp-nav-inner { padding:14px 20px !important; }
    .mp-nav-links { display:none !important; }
    .mp-burger { display:inline-flex !important; }
    .mp-mobile-menu.open { display:block !important; animation:mpMenuIn .26s ease both; }
    .mp-foot-inner { padding:0 22px !important; }
    .mp-hero-grid { grid-template-columns:1fr !important; }
  }
  @media (max-width: 560px) { #mp-content > div { padding-top:36px !important; padding-bottom:36px !important; } }

  .mp-burger-box { position:relative; width:20px; height:14px; display:block; }
  .mp-burger-box > span { position:absolute; left:0; width:20px; height:2px; background:#1f3838; border-radius:2px; transition:transform .28s ease, opacity .18s ease, top .28s ease; }
  .mp-burger-box > span:nth-child(1){ top:0; } .mp-burger-box > span:nth-child(2){ top:6px; } .mp-burger-box > span:nth-child(3){ top:12px; }
  .mp-burger.open .mp-burger-box > span:nth-child(1){ top:6px; transform:rotate(45deg); }
  .mp-burger.open .mp-burger-box > span:nth-child(2){ opacity:0; }
  .mp-burger.open .mp-burger-box > span:nth-child(3){ top:6px; transform:rotate(-45deg); }
  .mp-mobile-menu { display:none; max-height:calc(100vh - 74px); overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .mp-mobile-inner { display:flex; flex-direction:column; padding:6px 24px 24px; }
  .mp-mobile-link { font-family:'Poppins',sans-serif; font-size:17px; font-weight:600; color:#1f3838; text-decoration:none; padding:16px 2px; border-bottom:1px solid rgba(17,23,34,.08); transition:color .18s ease; }
  .mp-mobile-sub { font-family:'Poppins',sans-serif; font-size:14.5px; font-weight:500; color:#5C636F; text-decoration:none; padding:12px 2px 12px 18px; border-bottom:1px solid rgba(17,23,34,.06); }
  .mp-mobile-link:hover, .mp-mobile-link:active, .mp-mobile-sub:active { color:#be3777; }
  .mp-mobile-cta { margin-top:20px; font-family:'Poppins',sans-serif; font-size:16px; font-weight:700; color:#fff; background:#be3777; text-decoration:none; text-align:center; padding:15px; border-radius:12px; box-shadow:0 12px 28px rgba(190,55,119,.28); }
  .mp-drop { position:relative; }
  .mp-drop-panel { position:absolute; top:calc(100% + 16px); left:50%; transform:translateX(-50%) translateY(6px); background:#fff; border:1px solid #E9E6DF; border-radius:14px; box-shadow:0 18px 44px rgba(17,23,34,.14); padding:8px; min-width:250px; opacity:0; visibility:hidden; transition:opacity .18s ease, transform .18s ease; z-index:60; }
  .mp-drop:hover .mp-drop-panel { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
  .mp-drop::after { content:""; position:absolute; left:-10px; right:-10px; top:100%; height:20px; }
  .mp-drop:hover .mp-drop-panel, .mp-drop-panel:hover { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
  .mp-drop-panel a { display:block; padding:11px 14px; border-radius:9px; color:#1f3838; text-decoration:none; text-transform:none; }
  .mp-drop-panel a:hover { background:#F4EFE7; }
  .mp-drop-ttl { font-family:'Poppins',sans-serif; font-weight:600; font-size:14px; }
  @keyframes mpMenuIn { from{opacity:0; transform:translateY(-8px);} to{opacity:1; transform:translateY(0);} }

/* ===========================================================================
   MÓVIL: carruseles deslizables en vez de tarjetas apiladas.
   El JS marca las grillas de tarjetas con .mp-carousel (ver js/mapplics.js).
   =========================================================================== */
@media (max-width: 900px) {
  .mp-carousel-wrap { position: relative; }

  .mp-carousel {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 14px !important;
    /* Se mantiene dentro del recuadro de la sección (sin sangrado negativo),
       así nunca se sale de los bordes redondeados. */
    margin: 0 !important;
    padding: 4px 0 14px !important;
    scroll-padding-left: 0;
  }
  .mp-carousel::-webkit-scrollbar { display: none; }

  /* Cada tarjeta ocupa casi todo el ancho y "asoma" la siguiente. */
  .mp-carousel > * {
    flex: 0 0 86% !important;
    width: 86% !important;
    max-width: 86% !important;
    scroll-snap-align: start;
    min-height: 0 !important;
  }
  /* En pantallas muy chicas, un poco más de ancho por tarjeta. */
  @media (max-width: 400px) {
    .mp-carousel > * { flex-basis: 89% !important; width: 89% !important; max-width: 89% !important; }
  }

  /* Barra de controles debajo del carrusel: ‹ · puntitos · ›
     Va fuera de las tarjetas, así nunca tapa el contenido. */
  .mp-car-ctrls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 6px;
  }

  /* Flechas de control: sirven con mouse, dedo y teclado. */
  .mp-car-btn {
    position: static;
    transform: none;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(31, 56, 56, .12);
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    color: #be3777;
    font-size: 22px;
    line-height: 1;
    font-family: 'Poppins', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0 0 2px;
    box-shadow: 0 6px 18px rgba(31, 56, 56, .18);
    transition: opacity .2s ease, transform .15s ease, background .2s ease;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
  .mp-car-btn:active { transform: scale(.92); }

  /* En los extremos se atenúan (sin moverse, para que la barra no "salte"). */
  .mp-carousel-wrap.mp-at-start .mp-car-prev,
  .mp-carousel-wrap.mp-at-end .mp-car-next { opacity: .28; pointer-events: none; }
  .mp-carousel-wrap.mp-sin-desborde .mp-car-ctrls { display: none; }

  /* Arrastrar con el mouse en la computadora. */
  .mp-carousel { cursor: grab; }
  .mp-carousel.mp-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
  .mp-carousel.mp-dragging * { user-select: none; }
  .mp-carousel:focus-visible { outline: 2px solid #be3777; outline-offset: 3px; border-radius: 14px; }

  /* Puntitos indicadores (uno por tarjeta). */
  .mp-car-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
  }
  .mp-car-dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(31, 56, 56, .22);
    cursor: pointer;
    transition: width .22s ease, background .22s ease;
  }
  .mp-car-dot.mp-activo { width: 20px; background: #be3777; }
  .mp-carousel-wrap.mp-sin-desborde .mp-car-dots { display: none; }
  /* Sobre secciones oscuras, puntitos claros. */
  .mp-carousel-wrap.mp-on-dark .mp-car-dot { background: rgba(255, 255, 255, .28); }
  .mp-carousel-wrap.mp-on-dark .mp-car-dot.mp-activo { background: #e79ac0; }

  /* Los 4 pasos ("Contanos tu problema → Discovery → …"): en cuadrícula 2×2,
     así los cuatro entran juntos en una pantalla en vez de una tira larguísima.
     (Cuatro en una sola fila dejaría ~70px por paso: los títulos se romperían.) */
  .mp-pasos {
    grid-template-columns: 1fr 1fr !important;
    gap: 26px 12px !important;
  }
  .mp-pasos > div { padding: 0 4px !important; }
  .mp-pasos h3, .mp-pasos [style*="font-weight: 700"] { font-size: 15.5px !important; line-height: 1.25 !important; }
  .mp-pasos p { font-size: 12.5px !important; line-height: 1.45 !important; }

  /* Métricas/números (+18, +40, …): de dos en dos y más chicos. */
  .mp-stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 22px 14px !important;
  }
  .mp-stats .mp-metric,
  .mp-stats .mp-count { font-size: 32px !important; letter-spacing: -.02em !important; }
  .mp-stats p { font-size: 12.5px !important; margin-top: 8px !important; line-height: 1.4 !important; }
  /* Ícono de la métrica, algo más compacto. */
  .mp-stats [style*="width: 52px"][style*="height: 52px"] {
    width: 42px !important;
    height: 42px !important;
    margin-bottom: 10px !important;
    font-size: 16px !important;
    border-radius: 12px !important;
  }

  /* Indicador "deslizá" con flecha. */
  .mp-swipe-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 2px 0 4px;
    font-family: 'Poppins', sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .04em;
    color: #9aa2a0;
    pointer-events: none;
    transition: opacity .3s ease;
  }
  .mp-swipe-hint .mp-swipe-arrow {
    display: inline-block;
    color: #be3777;
    font-size: 13px;
    animation: mpSwipe 1.5s ease-in-out infinite;
  }
  .mp-carousel-wrap.mp-scrolled .mp-swipe-hint { opacity: 0; }
  @keyframes mpSwipe {
    0%, 100% { transform: translateX(0); opacity: .55; }
    50%      { transform: translateX(6px); opacity: 1; }
  }

  /* Degradado en el borde derecho: refuerza que hay más contenido. */
  .mp-carousel-wrap::after {
    content: "";
    position: absolute;
    top: 26px; bottom: 52px; right: 0;
    width: 28px;
    border-radius: 0 14px 14px 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(242,229,213,0), rgba(242,229,213,.92));
    transition: opacity .25s ease;
  }
  .mp-carousel-wrap.mp-at-end::after { opacity: 0; }
  /* Sobre fondos claros/oscuros propios de algunas secciones. */
  .mp-carousel-wrap.mp-on-light::after { background: linear-gradient(90deg, rgba(231,237,233,0), rgba(231,237,233,.92)); }
  .mp-carousel-wrap.mp-on-white::after { background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.92)); }
  .mp-carousel-wrap.mp-on-dark::after  { background: linear-gradient(90deg, rgba(21,46,43,0), rgba(21,46,43,.92)); }
}

/* ===========================================================================
   MÓVIL: prolijidad general en pantallas angostas.
   =========================================================================== */
@media (max-width: 760px) {
  /* Respiración uniforme y menos padding lateral perdido. */
  #mp-content > div {
    margin-left: 12px !important;
    margin-right: 12px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    border-radius: 22px;
  }
  /* Títulos y textos con jerarquía clara. */
  #mp-content h1 { font-size: clamp(30px, 8vw, 40px) !important; letter-spacing: -.02em !important; }
  #mp-content h2 { font-size: clamp(24px, 6.4vw, 32px) !important; letter-spacing: -.02em !important; }
  #mp-content h3 { font-size: clamp(17px, 4.6vw, 21px) !important; }
  #mp-content p  { font-size: 15.5px !important; line-height: 1.6 !important; }

  /* Botones/CTA a todo el ancho: más fáciles de tocar. */
  #mp-content a[style*="border-radius: 12px"],
  #mp-content button[style*="border-radius: 12px"] {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
    text-align: center;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }
  /* …pero no los que están dentro de un carrusel ni los chips/etiquetas. */
  .mp-carousel a[style*="border-radius: 12px"],
  .mp-carousel button[style*="border-radius: 12px"] { display: inline-flex !important; width: auto !important; }

  /* Áreas táctiles mínimas en iconos de redes/mail. */
  .mp-foot-inner a[style*="border-radius: 50%"],
  #mp-content a[style*="border-radius: 11px"] { min-width: 42px; min-height: 42px; }

  /* Footer: columnas apiladas y centradas, sin huecos raros. */
  .mp-foot-inner > div { gap: 26px !important; }
  .mp-foot-inner img[alt*="Certificación"] { height: 96px !important; margin: 0 auto; }

  /* Barra de navegación un poco más compacta. */
  .mp-nav-inner { padding: 12px 18px !important; }

  /* Secciones que se ocultan solo en móvil (decisión de diseño). */
  .mp-oculto-movil { display: none !important; }

  /* Barra de métricas del hero: sin tarjeta propia, apoyada sobre el fondo.
     Gana altura y deja respirar al hero. */
  /* Selector con #mp-content para ganarle a la regla general de secciones. */
  #mp-content > div.mp-plano-movil,
  .mp-plano-movil {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    margin: 4px 12px 14px !important;
  }
  /* Ítems más compactos y separadores finos sobre el fondo. */
  .mp-plano-movil .mp-diff > div {
    padding: 13px 2px !important;
    border-top: 1px solid rgba(31, 56, 56, .10) !important;
    /* Ícono al lado del texto (no arriba): ahorra altura. */
    flex-wrap: nowrap !important;
    gap: 14px !important;
  }
  .mp-plano-movil .mp-diff .mp-metric { font-size: 19px !important; line-height: 1.2 !important; }
  .mp-plano-movil .mp-diff > div > span:first-child {
    width: 42px !important;
    height: 42px !important;
    font-size: 17px !important;
    border-radius: 12px !important;
  }
  .mp-plano-movil .mp-diff > div:first-child { border-top: 0 !important; padding-top: 4px !important; }
  .mp-plano-movil .mp-diff > div:last-child { padding-bottom: 2px !important; }

  /* Submenú "Servicios" del menú móvil: cada ítem en su propia fila.
     Sin esto los enlaces son inline y fluyen como texto corrido. */
  .mp-msub-wrap.open { display: flex; flex-direction: column; }
  .mp-mobile-sub {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 13px 2px 13px 20px !important;
  }

  /* Filas horizontales (título + etiqueta, ícono + texto): si no entran,
     el elemento pasa abajo en vez de partir el título en dos líneas raras. */
  #mp-content div[style*="display: flex"][style*="align-items: center"] { flex-wrap: wrap; }

  /* Etiquetas tipo "★ Estrella": nunca se parten. */
  #mp-content span[style*="border-radius: 999px"] { white-space: nowrap; }
}

@media (max-width: 420px) {
  #mp-content > div { padding-left: 16px !important; padding-right: 16px !important; margin-left: 10px !important; margin-right: 10px !important; }
  #mp-content h1 { font-size: clamp(27px, 8.4vw, 34px) !important; }
}

/* ===================== ARTÍCULO DEL BLOG (contenido de WordPress) ===================== */
  .mp-article { font-family:'Manrope',sans-serif; font-size:16.5px; line-height:1.75; color:#3f4a52; }
  .mp-article > *:first-child { margin-top:0; }
  .mp-article p { margin:0 0 20px; }
  .mp-article h2 { font-family:'Poppins',sans-serif; font-weight:700; font-size:27px; line-height:1.2; letter-spacing:-.02em; color:#1f3838; margin:38px 0 14px; }
  .mp-article h3 { font-family:'Poppins',sans-serif; font-weight:600; font-size:21px; line-height:1.25; color:#1f3838; margin:30px 0 12px; }
  .mp-article h4 { font-family:'Poppins',sans-serif; font-weight:600; font-size:18px; color:#1f3838; margin:24px 0 10px; }
  .mp-article a { color:#be3777; text-decoration:underline; text-underline-offset:2px; }
  .mp-article a:hover { color:#9c2d61; }
  .mp-article strong, .mp-article b { color:#1f3838; font-weight:700; }
  .mp-article ul, .mp-article ol { margin:0 0 22px; padding-left:22px; }
  .mp-article li { margin-bottom:9px; }
  .mp-article ul li::marker { color:#be3777; }
  .mp-article img { max-width:100%; height:auto; border-radius:14px; display:block; margin:26px auto; box-shadow:0 14px 34px rgba(31,56,56,.12); }
  .mp-article figure { margin:26px 0; max-width:100%; }
  .mp-article figcaption { font-size:13px; color:#8a8f99; text-align:center; margin-top:8px; }
  .mp-article blockquote { margin:26px 0; padding:18px 24px; background:#F7F4EF; border-left:4px solid #be3777; border-radius:12px; font-size:17px; color:#1f3838; }
  .mp-article blockquote p:last-child { margin-bottom:0; }
  .mp-article hr { border:0; border-top:1px solid #EFEBE3; margin:32px 0; }
  .mp-article iframe, .mp-article video { max-width:100%; border-radius:14px; display:block; margin:26px auto; }
  .mp-article table { width:100%; border-collapse:collapse; margin:24px 0; font-size:15px; }
  .mp-article th, .mp-article td { border:1px solid #EFEBE3; padding:10px 12px; text-align:left; }
  .mp-article th { background:#F7F4EF; font-family:'Poppins',sans-serif; font-weight:600; color:#1f3838; }
  @media (max-width: 760px) {
    .mp-article { font-size:16px; }
    .mp-article h2 { font-size:23px !important; }
    .mp-article h3 { font-size:19px !important; }
  }

/* ===================== HOVERS (reemplazan el atributo style-hover del diseño) ===================== */
  /* Transiciones suaves en elementos interactivos con estilos inline. */
  a[style], button[style] { transition: background .18s ease, color .18s ease, border-color .18s ease, transform .2s ease, box-shadow .2s ease; }

  /* CTA rosados (fondo #be3777) → se oscurecen al pasar el mouse. */
  a[style*="background: rgb(190, 55, 119)"]:hover,
  button[style*="background: rgb(190, 55, 119)"]:hover { background: #9c2d61 !important; }

  /* Enlaces de navegación (gris → verde oscuro). */
  .mp-nav-links a[style*="rgb(92, 99, 111)"]:hover { color: #1f3838 !important; }

  /* Botones/tarjetas con borde claro → borde rosa al pasar el mouse. */
  a[style*="border: 1px solid rgb(233, 230, 223)"]:hover,
  button[style*="border: 1px solid rgb(233, 230, 223)"]:hover { border-color: #be3777 !important; }

  /* Botones con borde rosa → se rellenan de rosa. */
  a[style*="border: 1px solid rgb(190, 55, 119)"]:hover,
  button[style*="border: 1px solid rgb(190, 55, 119)"]:hover { background: #be3777 !important; color: #fff !important; }

  /* Enlaces e íconos del footer (gris azulado → blanco). */
  .mp-foot-inner a:hover { color: #fff !important; border-color: rgba(255, 255, 255, 0.55) !important; }

/* ===================== ADAPTACIÓN RESPONSIVE / MÓVIL (Mapplics) ===================== */
  /* ===========================================================================
     Refuerzo responsive (Mapplics) — evita cualquier desbordamiento en móvil.
     Corrige el bug clásico de min-width:auto en items de grid/flex y parte los
     textos largos (nombres de archivo, URLs). Añadido en la conversión a WP.
     =========================================================================== */
  @media (max-width: 900px) {
    /* Red de seguridad: nunca scroll horizontal en el celular. */
    html, body { overflow-x: hidden; max-width: 100%; }

    /* Los items de grid/flex traen min-width:auto y pueden forzar el ancho
       del track más allá del contenedor. Con min-width:0 respetan el ancho. */
    #mp-content * { min-width: 0; }

    /* Textos largos sin espacios (p. ej. pedidos_2026_v9_final_OK_ESTE_SI.xls)
       se parten SOLO si no entran; break-word no rompe palabras normales
       ni reduce el ancho mínimo (evita el "texto en columna de 1 letra"). */
    #mp-content h1, #mp-content h2, #mp-content h3, #mp-content h4,
    #mp-content p, #mp-content span, #mp-content a, #mp-content li,
    #mp-content div { overflow-wrap: break-word; }

    /* Multimedia siempre dentro del ancho disponible. */
    #mp-content img, #mp-content svg, #mp-content video, #mp-content canvas {
      max-width: 100%;
    }

    /* Ningún max-width fijo debe superar el viewport. */
    #mp-content [style*="max-width"] { max-width: 100% !important; }
  }

  @media (max-width: 560px) {
    /* Colapsa a 1 columna cualquier grilla de 2 columnas que quedara. */
    #mp-content [style*="repeat(2,1fr)"],
    #mp-content [style*="repeat(2, 1fr)"] { grid-template-columns: 1fr !important; }
  }

  /* ===========================================================================
     Adaptación por componente en móvil (no solo apilar).
     =========================================================================== */
  @media (max-width: 900px) {
    /* --- Paneles decorativos del hero: NO deben colapsar sus columnas ---
       (la regla global colapsa toda grilla a 1fr; acá restauramos las
       mini-tablas/dashboards para que se vean como en desktop, escaladas). */
    /* Tablas / mockups decorativos (planilla, dashboard, gráfico de barras,
       tabla Excel de PyME): mantienen sus columnas, no se apilan.
       Son templates que NO se usan para layout real, así que es seguro fijarlos. */
    #mp-content [style*="grid-template-columns: 52px 1fr 52px 66px"] { grid-template-columns: 52px 1fr 52px 66px !important; }
    /* Ojo: el mini-dashboard del hero usa "1fr 1fr 1fr", igual que la barra de
       métricas (.mp-diff). Se acota al panel del hero para no forzar 3 columnas
       en la barra de métricas, que SÍ debe apilarse en móvil. */
    #mp-content [style*="height: 378px"] [style*="grid-template-columns: 1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr 1fr !important; }
    #mp-content [style*="grid-template-columns: 1.3fr 1fr 1fr 0.5fr"] { grid-template-columns: 1.3fr 1fr 1fr 0.5fr !important; }
    #mp-content [style*="grid-template-columns: 22px repeat(8"] { grid-template-columns: 22px repeat(8, minmax(0px, 1fr)) !important; }

    /* --- Márgenes negativos (solapamientos tipo "tarjeta que pisa al hero") ---
       En desktop crean superposición elegante; en móvil se ven mal. */
    #mp-content [style*="margin: -"],
    #mp-content [style*="margin-top: -"] { margin-top: 18px !important; }
  }