.mr-hero{
  /* Extra bottom air so the first section separator looks symmetrical */
  padding: 26px 0 56px;
}
.mr-hero-grid{
  display:grid;
  gap:22px;
  grid-template-columns: 1.05fr .95fr;
  align-items: start;
}
.mr-kicker{
  display:inline-flex;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--mr-border);
  background: rgba(246,196,0,.08);
  color: var(--mr-text);
  font-weight:900;
  font-size:12px;
  letter-spacing:.3px;
  margin:0 0 12px;
}
.mr-hero-tagline{
  margin: 2px 0 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .9px;
  text-transform: uppercase;
  color: var(--mr-yellow);
}
.mr-hero-cats{
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--mr-muted);
}
.mr-lead{font-size:16px; margin:0 0 16px;}
.mr-hero-ctas{display:flex; gap:10px; flex-wrap:wrap; margin: 12px 0 14px;}
.mr-badges{display:flex; gap:10px; flex-wrap:wrap;}
.mr-badge{
  padding:8px 10px;
  border-radius:14px;
  border:1px solid var(--mr-border);
  background: rgba(255,255,255,.03);
  font-weight:800;
  font-size:12px;
}

.mr-hero-media{display:grid; gap:12px;}
.mr-hero-photo{
  border-radius:22px;
  overflow:hidden;
  border:1px solid var(--mr-border);
  box-shadow: var(--mr-shadow);
  background: rgba(255,255,255,.02);
}

.mr-hero-photo{
  height: clamp(320px, 55vh, 640px);
}
.mr-hero-photo img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center 30%;
}

.mr-hero-photo-secondary{
  opacity:.92;
}
.mr-hero-img{display:block; width:100%; height:auto;}

.mr-worklist{display:grid; gap:14px;}
.mr-work-card{
  border-radius:22px;
  border:1px solid var(--mr-border);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  padding:16px;
  overflow:hidden;
  position:relative;
  transform: translateZ(0);
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, filter .18s ease;
}

.mr-work-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(90% 120% at 20% -10%, rgba(246,196,0,.12), rgba(0,0,0,0) 55%),
    radial-gradient(80% 80% at 80% 0%, rgba(255,255,255,.06), rgba(0,0,0,0) 55%);
  opacity:0;
  transition: opacity .18s ease;
  pointer-events:none;
}

@media (hover:hover){
  .mr-work-card:hover{
    transform: translateY(-3px);
    border-color: rgba(246,196,0,.18);
    box-shadow: 0 20px 50px rgba(0,0,0,.42);
  }
  .mr-work-card:hover::before{ opacity:1; }
}

.mr-work-card:active{ transform: translateY(-1px) scale(.995); }
.mr-work-card:focus-within{ border-color: rgba(246,196,0,.22); }

/* Generic panel (same visual language as work cards) */
.mr-panel{
  border-radius:22px;
  border:1px solid var(--mr-border);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  padding:18px;
}
.mr-panel-head{margin-bottom:6px;}
.mr-panel-head .mr-h2{margin:0 0 6px;}

/* FAQ (index): aire entre la última pregunta y el CTA */
.mr-faq-cta{margin-top:16px;}

/* Secciones: acento visual para títulos (línea amarilla en degradé) */
.mr-h2-accent{position:relative; display:inline-block; padding-bottom:6px; font-weight:650; letter-spacing:-0.02em;}
.mr-h2-accent::after{content:""; position:absolute; left:0; bottom:0; width:56px; height:3px; border-radius:999px; background:linear-gradient(90deg, var(--mr-yellow), rgba(246,196,0,.10)); box-shadow:0 0 18px rgba(246,196,0,.25);} 


/* Contacto: título más fino y con acento (sin perder presencia) */
.mr-h2-contact{font-weight:650; letter-spacing:-0.02em;}
.mr-contact-panel .mr-h2-contact{position:relative; display:inline-block; padding-bottom:6px;}
.mr-contact-panel .mr-h2-contact::after{content:""; position:absolute; left:0; bottom:0; width:56px; height:3px; border-radius:999px; background:linear-gradient(90deg, var(--mr-yellow), rgba(246,196,0,.10)); box-shadow:0 0 18px rgba(246,196,0,.25);} 

.mr-work-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:12px;
}

/* === Trabajos destacados: carrusel horizontal (desktop + mobile) === */
.mr-work-card .mr-carousel-wrap{
  position:relative;
  max-width:100%;
  overflow:hidden;
  border-radius:18px;
}

/* Track */
.mr-work-card .mr-thumbs{
  box-sizing:border-box;
  width:100%;
  max-width:100%;
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  gap:12px;
  overflow-x:auto;
  overflow-y:hidden;
  padding: 8px 12px 12px;
  scroll-padding-left: 12px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* Scrollbar (desktop) */
.mr-work-card .mr-thumbs::-webkit-scrollbar{ height:10px; }
.mr-work-card .mr-thumbs::-webkit-scrollbar-track{
  background: rgba(255,255,255,.04);
  border-radius: 999px;
}
.mr-work-card .mr-thumbs::-webkit-scrollbar-thumb{
  background: rgba(255,204,0,.22);
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,.25);
}

/* Tiles */
.mr-work-card .mr-thumb{
  flex: 0 0 auto;
  width: clamp(160px, 18vw, 240px);
  aspect-ratio: 4 / 3;
  scroll-snap-align: start;

  position:relative;
  border-radius:16px;
  overflow:hidden;
  background: rgba(255,255,255,.03);
  box-shadow: 0 0 0 1px rgba(255,204,0,.12) inset;
  transform: translateZ(0);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.mr-work-card .mr-thumb::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(80% 80% at 50% 20%, rgba(246,196,0,.10), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.28));
  opacity:0;
  transition: opacity .18s ease;
  pointer-events:none;
}

@media (hover:hover){
  .mr-work-card .mr-thumb:hover{
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 0 0 1px rgba(255,204,0,.22) inset, 0 16px 36px rgba(0,0,0,.45);
  }
  .mr-work-card .mr-thumb:hover::after{ opacity:1; }
}

.mr-work-card .mr-thumb:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(246,196,0,.18), 0 16px 36px rgba(0,0,0,.45);
}

.mr-work-card .mr-thumb img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

/* Fades: hint of more content */
.mr-work-card .mr-carousel-wrap::before,
.mr-work-card .mr-carousel-wrap::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:44px;
  pointer-events:none;
  opacity:0;
  transition: opacity .18s ease;
  z-index:4;
}
.mr-work-card .mr-carousel-wrap::before{
  left:0;
  background: linear-gradient(90deg, rgba(11,11,12,.92), rgba(11,11,12,0));
}
.mr-work-card .mr-carousel-wrap::after{
  right:0;
  background: linear-gradient(270deg, rgba(11,11,12,.92), rgba(11,11,12,0));
}

.mr-work-card .mr-carousel-wrap[data-has-overflow="1"]::before,
.mr-work-card .mr-carousel-wrap[data-has-overflow="1"]::after{ opacity:1; }

.mr-work-card .mr-carousel-wrap[data-at-start="1"]::before{ opacity:0; }
.mr-work-card .mr-carousel-wrap[data-at-end="1"]::after{ opacity:0; }

/* Arrows (overlay, "pisan" la foto) */
.mr-carousel-btn{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width:40px;
  height:40px;
  border-radius:999px;
  border: 1px solid rgba(255,204,0,.35);
  background: rgba(0,0,0,.55);
  color: #ffcc00;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 10px 26px rgba(0,0,0,.45);
  cursor:pointer;
  z-index: 6;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform .18s ease, background .18s ease, opacity .18s ease;
  user-select:none;
}
.mr-carousel-btn:hover{ transform: translateY(-50%) scale(1.06); background: rgba(0,0,0,.7); }
.mr-carousel-btn:active{ transform: translateY(-50%) scale(.98); }
.mr-carousel-btn[disabled]{ opacity:.25; cursor:default; pointer-events:none; }

.mr-carousel-btn--prev{ left: 10px; }
.mr-carousel-btn--next{ right: 10px; }

@media (max-width: 720px){
  .mr-work-head{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }

  .mr-work-head > .mr-btn{
    width:auto;
    padding:10px 14px;
    border-radius:999px;
    font-weight:700;
    letter-spacing:.2px;
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
  }

  .mr-work-card .mr-thumb{
    width: 86%;
    max-width: 260px;
  }

  .mr-carousel-btn--prev{ left: 6px; }
  .mr-carousel-btn--next{ right: 6px; }
}

@media (max-width: 420px){
  .mr-work-card .mr-thumb{ width: 82%; }
}
.mr-process{
  display:grid;
  gap:16px;
  /* Slightly favor text so the collage doesn't feel oversized */
  grid-template-columns: 1fr .92fr;
  /* IMPORTANT: don't stretch items, otherwise the collage can force the row height,
     and the text column will stretch too (making JS measurements useless). */
  align-items:start;

  --mr-process-h: auto;
}

.mr-process-text{
  display:flex;
  flex-direction:column;
  gap:12px;
  align-self:start;
}

.mr-process-media{
  height: var(--mr-process-h);
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  /* No top/bottom padding: we want pixel-perfect height matching with the text column */
  padding: 0;
  align-self:start;
}

.mr-process-collage{
  display:block;
  width:100%;
  height: 100%;
  border-radius:18px;
  overflow:hidden;
  /* Keep the collage inside the main panel; no extra frame/border here */
  border:0;
  box-shadow:none;
  background: transparent;
  transform: translateZ(0);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

@media (hover:hover){
  .mr-process-collage:hover{
    transform: translateY(-2px);
    box-shadow: 0 18px 44px rgba(0,0,0,.35);
  }
}

.mr-process-collage:focus-visible{
  outline: 2px solid rgba(241,196,15,.85);
  outline-offset: 4px;
}

.mr-process-img{
  display:block;
  width:100%;
  height:100%;
  /* Force exact height/width even if it distorts a bit (requested) */
  object-fit:fill;
  object-position:center;
  background: transparent;
}

.mr-step{
  display:flex;
  gap:12px;
  padding:10px;
  border-radius:18px;
  border:1px solid var(--mr-border);
  background: rgba(255,255,255,.02);
  margin:0;
  position:relative;
  overflow:hidden;
  transform: translateZ(0);
  box-shadow: 0 10px 26px rgba(0,0,0,.14);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, filter .18s ease;
}

.mr-step::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(90% 120% at 20% -10%, rgba(246,196,0,.10), rgba(0,0,0,0) 55%);
  opacity:0;
  transition: opacity .18s ease;
  pointer-events:none;
}

@media (hover:hover){
  .mr-step:hover{
    transform: translateY(-2px);
    border-color: rgba(246,196,0,.16);
    box-shadow: 0 18px 44px rgba(0,0,0,.28);
  }
  .mr-step:hover::before{ opacity:1; }
}

.mr-step:active{ transform: translateY(-1px) scale(.997); }
.mr-step:focus-within{ border-color: rgba(246,196,0,.20); }
.mr-step-num{
  width:32px;
  height:32px;
  border-radius:11px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  background: rgba(246,196,0,.18);
  border:1px solid rgba(246,196,0,.25);
}
.mr-contact{
  display:grid;
  gap:14px;
  grid-template-columns: 1fr 1fr;
}
.mr-contact-card{
  padding:18px;
  border-radius:22px;
  border:1px solid var(--mr-border);
  background: rgba(255,255,255,.02);
  /* Keep cards visually aligned and push CTAs to the bottom for harmony */
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
  transform: translateZ(0);
  box-shadow: 0 10px 26px rgba(0,0,0,.14);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, filter .18s ease;
}

.mr-contact-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(90% 120% at 20% -10%, rgba(246,196,0,.10), rgba(0,0,0,0) 55%),
    radial-gradient(80% 80% at 80% 0%, rgba(255,255,255,.06), rgba(0,0,0,0) 55%);
  opacity:0;
  transition: opacity .18s ease;
  pointer-events:none;
}

@media (hover:hover){
  .mr-contact-card:hover{
    transform: translateY(-3px);
    border-color: rgba(246,196,0,.16);
    box-shadow: 0 20px 50px rgba(0,0,0,.30);
  }
  .mr-contact-card:hover::before{ opacity:1; }
}

.mr-contact-card:active{ transform: translateY(-1px) scale(.995); }
.mr-contact-card:focus-within{ border-color: rgba(246,196,0,.20); }
.mr-contact-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px;}
.mr-contact-lines{display:grid; gap:10px; margin-top:12px;}
.mr-line{display:grid; grid-template-columns: 112px 1fr; align-items:baseline; gap:14px;}
.mr-contact-lines .mr-line{padding:10px 12px; border:1px solid rgba(255,215,90,.22); border-radius:14px; background:rgba(255,215,90,.04);}
.mr-line-k{color:var(--mr-muted); font-weight:800;}
.mr-line-v{font-weight:800; justify-self:start; text-align:left;}

.mr-contact-lines .mr-link{border-bottom-color: transparent;}
.mr-contact-lines .mr-link:hover{border-bottom-color: var(--mr-yellow);}
.mr-social{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px;}

/* --- Contact: CTA buttons + socials (desktop + responsive) --- */
.mr-contact-actions,
.mr-social{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:auto;
  padding-top:12px;
}

/* Make WhatsApp/Mail match Instagram/Facebook sizing (no heavy shadows here) */
.mr-contact-actions .mr-btn,
.mr-social .mr-btn{
  padding:9px 12px;
  border-radius:14px;
  box-shadow:none;
  font-weight:800;
}
.mr-contact-actions .mr-btn-primary{
  box-shadow:none;
}
.mr-contact-actions .mr-btn-ghost{
  background: rgba(255,255,255,.03);
}

/* Icons inside buttons */
.mr-wa-ico,
.mr-mail-ico{
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.mr-wa-ico svg,
.mr-mail-ico svg{
  width:18px;
  height:18px;
  display:block;
}

/* Mobile: 2-column grid for clean alignment (no overflow) */
@media (max-width: 720px){
  .mr-contact-actions,
  .mr-social{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:10px;
  }
  .mr-contact-actions .mr-btn,
  .mr-social .mr-btn{
    width:100%;
    min-width:0;
    justify-content:center;
  }
  .mr-social-text{
    min-width:0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}
@media (max-width: 420px){
  /* Ultra-small: stack the 2 CTAs; socials stay 2-column but icon-only */
  .mr-contact-actions{ grid-template-columns: 1fr; }
  .mr-social-text{ display:none; }
}


@media (max-width: 980px){
  .mr-hero-grid{grid-template-columns: 1fr;}
  .mr-process{grid-template-columns: 1fr;}
  .mr-process-media{min-height: 280px;}
}
@media (max-width: 520px){
  /* Keep it spacious but not wasteful on small screens */
  .mr-hero{ padding-bottom: 48px; }
  .mr-contact{grid-template-columns: 1fr;}
  .mr-line{grid-template-columns: 1fr; gap:6px;}
  .mr-line-v{font-weight:800;}
}

/* Theme badge (dev helper) */
.mr-theme-badge{margin-left:12px;align-self:center;display:inline-flex;padding:6px 10px;border-radius:999px;border:1px solid var(--mr-border);background:rgba(255,255,255,.03);color:var(--mr-muted);font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;}


/* === Theme: BRAND (bold, high-contrast) === */
.mr-body.mr-theme-brand{
  --mr-bg:#070707;
  --mr-panel:#0f1011;
  --mr-panel2:#14161b;
  --mr-border:rgba(246,196,0,.18);
  --mr-shadow: 0 14px 42px rgba(0,0,0,.45);
  background:
    radial-gradient(900px 520px at 18% -10%, rgba(246,196,0,.14), transparent 60%),
    radial-gradient(700px 520px at 90% 10%, rgba(246,196,0,.08), transparent 55%),
    var(--mr-bg);
}
.mr-theme-brand .mr-btn-primary,
.mr-theme-brand .mr-nav .mr-btn-primary{
  box-shadow: 0 18px 55px rgba(246,196,0,.22), 0 10px 28px rgba(0,0,0,.45);
}
.mr-theme-brand .mr-kicker{background: rgba(246,196,0,.12); border-color: rgba(246,196,0,.26);}
.mr-theme-brand .mr-theme-badge{background: rgba(246,196,0,.10); border-color: rgba(246,196,0,.26); color: rgba(246,196,0,.95);}


/* === Theme: BRAND GRID (brand punch + industrial grid) === */
.mr-body.mr-theme-brandgrid{
  --mr-bg:#070707;
  --mr-panel:#0f1011;
  --mr-panel2:#14161b;
  --mr-border:rgba(246,196,0,.18);
  --mr-shadow: 0 14px 42px rgba(0,0,0,.45);
  background:
    radial-gradient(900px 520px at 18% -10%, rgba(246,196,0,.14), transparent 60%),
    radial-gradient(700px 520px at 90% 10%, rgba(246,196,0,.08), transparent 55%),
    linear-gradient(0deg, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    var(--mr-bg);
  background-size: auto, auto, 48px 48px, 48px 48px, auto;
}
.mr-theme-brandgrid .mr-btn-primary,
.mr-theme-brandgrid .mr-nav .mr-btn-primary{
  box-shadow: 0 18px 55px rgba(246,196,0,.22), 0 10px 28px rgba(0,0,0,.45);
}
.mr-theme-brandgrid .mr-kicker{background: rgba(246,196,0,.12); border-color: rgba(246,196,0,.26);}
.mr-theme-brandgrid .mr-theme-badge{background: rgba(246,196,0,.10); border-color: rgba(246,196,0,.26); color: rgba(246,196,0,.95);}


/* === Scroll-to-top button === */
.mr-scrolltop{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid rgba(246,196,0,.22);
  background: rgba(10,10,10,.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .22s ease, transform .22s ease, border-color .22s ease, background-color .22s ease, box-shadow .22s ease;
  z-index: 60;
}
.mr-scrolltop svg{
  width: 20px;
  height: 20px;
  fill: rgba(255,255,255,.92);
}
.mr-scrolltop.is-visible{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.mr-scrolltop:hover{
  background: rgba(15,15,15,.86);
  border-color: rgba(246,196,0,.45);
  box-shadow: 0 16px 38px rgba(0,0,0,.45), 0 10px 18px rgba(246,196,0,.12);
}
.mr-scrolltop:active{transform: translateY(1px);}
.mr-scrolltop:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(246,196,0,.18), 0 16px 38px rgba(0,0,0,.45);
}
@media (max-width: 520px){
  .mr-scrolltop{right: 14px; bottom: 14px; width: 46px; height: 46px;}
}
@media (prefers-reduced-motion: reduce){
  .mr-scrolltop{transition: none;}
  .mr-work-card,
  .mr-step,
  .mr-contact-card,
  .mr-process-collage{transition: none;}
  .mr-work-card:active,
  .mr-step:active,
  .mr-contact-card:active{transform:none;}
}





/* Mobile carousel for thumbnails (shows “there are more”) */




/* Social buttons: cleaner (no "pisadas" de sombras) */
.mr-social{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:12px;
}
.mr-social .mr-btn{
  box-shadow:none;
  border-radius:14px;
  padding:10px 12px;
}
.mr-social .mr-btn:hover{
  transform: translateY(-1px);
}

/* Mobile: grid 2 columnas, sin desbordes ni overlap */
@media (max-width: 720px){
  .mr-contact-actions{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:10px;
  }
  .mr-contact-actions .mr-btn{
    width:100%;
    justify-content:center;
    min-width:0;
  }

  .mr-social{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:10px;
  }
  .mr-social .mr-btn{
    width:100%;
    min-width:0;
    justify-content:center;
    border-radius:16px;
  }
  .mr-social-text{
    min-width:0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}

@media (max-width: 420px){
  .mr-contact-actions{
    grid-template-columns: 1fr;
  }
  /* En ultra chico: icon-only social, 2 columnas prolijas */
  .mr-social{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mr-social-text{
    display:none;
  }
}


/* --- Social icons --- */
.mr-social-ico{
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.mr-social-ico svg{
  width:18px;
  height:18px;
  display:block;
}
.mr-social .mr-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

/* Mobile: icon-first, cleaner */
@media (max-width: 720px){
  .mr-social{
    grid-template-columns: 1fr 1fr;
  }
  .mr-social .mr-btn{
    padding:10px 12px;
    border-radius:999px;
  }
}
@media (max-width: 420px){
  .mr-social{
    grid-template-columns: 1fr 1fr;
  }
  .mr-social-text{
    display:none;
  }
  .mr-social .mr-btn{
    min-height:44px;
  }
}




/* === Contact mobile overflow fix (prevents button overlap) === */
@media (max-width: 720px){
  #contacto .mr-contact-actions,
  #contacto .mr-social{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:10px;
    align-items:stretch;
  }

  #contacto .mr-contact-actions .mr-btn,
  #contacto .mr-social .mr-btn{
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
    overflow:hidden;
    justify-content:center;
  }

  #contacto .mr-wa-text,
  #contacto .mr-mail-text,
  #contacto .mr-social-text{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
}

/* Samsung/Android small widths: keep social labels visible (avoid icon-only under 420px) */
@media (max-width: 420px){
  /* Ultra-small: keep WhatsApp/Mail side-by-side (like IG/FB) without truncation */
  #contacto .mr-contact-actions{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #contacto .mr-contact-actions .mr-btn{ font-size:13px; padding:10px 10px; gap:8px; }
  /* Keep social labels visible on Samsung/Android */
  #contacto .mr-social-text{ display:inline; }
  #contacto .mr-social .mr-btn{ font-size:13px; padding:10px 10px; gap:8px; }
  /* Prefer showing full short labels instead of ellipsis for these two */
  #contacto .mr-wa-text,
  #contacto .mr-mail-text{ text-overflow:clip; }
}