/* 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; }

  /* Excepción: si la fila arranca con un ícono chico (los 34px de los tildes de
     las páginas de servicio), el texto tiene que envolver DENTRO de su columna,
     al lado del ícono. Con wrap el texto no entraba entero en la línea y saltaba
     abajo, dejando el tilde solo arriba —justo lo contrario de lo que se ve en el
     resto del sitio—. Son 24 filas: 4 en cada una de las 6 páginas de servicio. */
  #mp-content div[style*="display: flex"][style*="align-items: center"]:has(> span[style*="flex: 0 0 auto"][style*="width: 34px"]) {
    flex-wrap: nowrap !important;
  }

  /* 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.
       Va 'clip' y NO 'hidden': hidden convierte a html/body en contenedor de
       scroll, y entonces el position:sticky de la barra de navegación se pega a
       ese contenedor en vez de al viewport — o sea, deja de quedar fija arriba.
       'clip' recorta igual pero no crea contenedor de scroll. */
    html, body { overflow-x: clip; max-width: 100%; }
    @supports not (overflow: clip) {
      html, body { overflow-x: hidden; }
    }

    /* 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; }

    /* Tarjeta del formulario de contacto: los 40px de aire interno del diseño
       (pensados para 1280px) dejaban los campos en 257px sobre una pantalla de
       390px. Con menos padding el formulario respira a lo ancho, que es lo que
       importa cuando estás tipeando en el celular.
       Se identifica por contener los campos, no por la página: el id de la
       página de contacto cambia entre la instalación local y producción. */
    #mp-content div[style*="padding: 40px"]:has(.mp-input) {
      padding: 26px 18px !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.
       OJO con los de 1-2px: NO son solapamiento, son la costura que une la foto
       de una tarjeta con su cuerpo oscuro (PyME y Grandes Empresas). Al
       neutralizarlos se abría un hueco de 18px y la foto quedaba suelta,
       cortada y sin el degradado que la funde con la tarjeta. */
    #mp-content [style*="margin: -"]:not([style*="margin: -1px"]):not([style*="margin: -2px"]),
    #mp-content [style*="margin-top: -"]:not([style*="margin-top: -1px"]):not([style*="margin-top: -2px"]) { margin-top: 18px !important; }

    /* --- Tarjeta destacada "IA aplicada" (Grandes Empresas) ---------------
       En desktop la foto es la columna izquierda y el degradado corre en
       horizontal hacia el panel. Apilada en móvil ese degradado no hace nada
       hacia abajo, así que la foto terminaba de golpe: lo giramos para que
       funda con el cuerpo, igual que en las tarjetas de PyME. */
    .mp-featured-ia [aria-hidden="true"][style*="linear-gradient(90deg"] {
      background: linear-gradient(180deg, rgba(21, 46, 43, 0.15) 55%, rgb(21, 46, 43) 100%) !important;
    }
    /* Los ítems con viñeta de esa tarjeta son una lista, no tarjetas para
       navegar: no deben volverse carrusel (quedaba un carrusel dentro de la
       sección, con sus propias flechas). En flex —y no grid— mpIsCardGrid()
       los descarta solo, sin tocar el armador de carruseles. */
    .mp-featured-ia [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] {
      display: flex !important;
      flex-direction: column;
      gap: 10px !important;
    }
  }