/* ============================================================
   Publinovo — Caso de éxito "Empaque Mexfrut"
   Hereda tokens y componentes de styles.css.
   Solo añade lo específico de este caso. Prefijo: .mx-
   Algunos patrones (fichas SEO .slo-rcard, carrusel .vid-*) se
   replican aquí tal cual viven en seo-local.css / videos-*.css,
   porque esos archivos no se cargan en esta página.
   ============================================================ */

.mx-soft{ background:var(--bg-soft) }

/* ============================================================
   1 · HERO del caso
   ============================================================ */
.mx-hero{
  position:relative; overflow:hidden;
  padding-block:clamp(28px,4vw,52px) clamp(56px,7vw,96px);
  background:
    radial-gradient(110% 120% at 92% -10%, rgba(28,157,215,.12), transparent 55%),
    radial-gradient(95% 110% at -8% 115%, rgba(140,198,63,.16), transparent 55%),
    linear-gradient(135deg, #f4faee 0%, #eef7f4 50%, #ecf6fb 100%);
}
.mx-hero__blob{ position:absolute; border-radius:50%; filter:blur(60px); opacity:.5; pointer-events:none; z-index:0 }
.mx-hero__blob--1{ width:340px; height:340px; top:-120px; right:-80px; background:radial-gradient(circle, rgba(28,157,215,.30), transparent 70%) }
.mx-hero__blob--2{ width:300px; height:300px; bottom:-130px; left:-90px; background:radial-gradient(circle, rgba(140,198,63,.30), transparent 70%) }
.mx-hero .wrap{ position:relative; z-index:2 }

.mx-crumbs{
  display:inline-flex; align-items:center; flex-wrap:wrap; gap:9px; font-family:var(--ff-head);
  font-size:13px; font-weight:500; color:var(--ink-3); margin-bottom:clamp(20px,3vw,32px);
}
.mx-crumbs a{ color:var(--ink-3); transition:color .2s }
.mx-crumbs a:hover{ color:var(--blue-d) }
.mx-crumbs span[aria-current]{ color:var(--green-d); font-weight:600 }
.mx-crumbs i{ font-style:normal; color:var(--line-2) }

.mx-hero__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,64px); align-items:center }

.mx-badge{
  display:inline-flex; align-items:center; gap:10px; padding:8px 16px 8px 10px; margin-bottom:22px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-pill);
  font-family:var(--ff-head); font-size:13px; font-weight:600; color:var(--ink-2); box-shadow:var(--shadow-sm);
}
.mx-badge .dot{ width:9px; height:9px; border-radius:50%; background:#8CC63F; box-shadow:0 0 0 4px rgba(140,198,63,.25); animation:pulse 2s infinite }

.mx-hero__brand{ display:flex; align-items:center; gap:14px; margin-bottom:18px }
.mx-hero__brand img{ height:46px; width:auto; border-radius:10px }
.mx-hero__brand span{ font-family:var(--ff-head); font-weight:600; font-size:13.5px; color:var(--ink-3); line-height:1.3 }
.mx-hero__brand b{ display:block; font-size:15px; color:var(--ink) }

.mx-hero__copy h1{ font-size:clamp(33px,4.6vw,56px); letter-spacing:-.03em; text-wrap:balance }
.mx-hero__copy .lead{ margin-top:20px; max-width:56ch }
.mx-hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px }

.mx-hero__chips{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(24px,3vw,32px) }
.mx-hero__chips--under{ justify-content:center; margin-top:clamp(28px,3.5vw,44px) }
@media (max-width:980px){ .mx-hero__chips--under{ justify-content:center; margin-top:24px } }
.mx-chip{
  display:inline-flex; align-items:center; gap:10px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-pill);
  padding:9px 16px 9px 13px; box-shadow:var(--shadow-sm); font-size:13.5px; color:var(--ink-2);
}
.mx-chip svg{ width:17px; height:17px; color:var(--green-d); flex:none }

/* media: marco navegador + tarjetas flotantes */
.mx-hero__media{ position:relative; display:flex; flex-direction:column; align-items:center }

.mx-frame{
  position:relative; width:100%; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line); background:#fff; box-shadow:var(--shadow-lg);
}
.mx-frame__bar{ display:flex; align-items:center; gap:7px; padding:11px 14px; background:var(--bg-soft); border-bottom:1px solid var(--line) }
.mx-frame__dot{ width:11px; height:11px; border-radius:50%; flex:none }
.mx-frame__dot--1{ background:#FF6F6F } .mx-frame__dot--2{ background:#FFC24B } .mx-frame__dot--3{ background:#42C97A }
.mx-frame__url{
  flex:1; margin-left:8px; height:26px; border-radius:7px; background:#fff; border:1px solid var(--line);
  display:flex; align-items:center; gap:7px; padding:0 12px;
  font-family:var(--ff-head); font-size:11.5px; color:var(--muted); min-width:0;
}
.mx-frame__url svg{ width:12px; height:12px; flex:none; opacity:.7 }
.mx-frame__url span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.mx-frame__shot{ position:relative; aspect-ratio:11/8; overflow:hidden; background:var(--grad-soft) }
.mx-frame__shot > img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block }

.mx-float{
  position:absolute; z-index:4; background:#fff; border-radius:var(--r-md); box-shadow:var(--shadow-md);
  padding:13px 17px; display:flex; align-items:center; gap:12px; border:1px solid var(--line);
}
.mx-float small{ display:block; font-size:11px; color:var(--ink-3) }
.mx-float b{ font-family:var(--ff-head); font-size:17px; color:var(--ink); line-height:1.1 }
.mx-float__ic{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; flex:none; color:#fff }
.mx-float__ic svg{ width:21px; height:21px }
.mx-float--1{ top:-22px; right:-26px; animation:mx-bob 5s ease-in-out infinite }

@keyframes mx-bob{ 50%{ transform:translateY(-11px) } }
@media (prefers-reduced-motion:reduce){ .mx-float--1{ animation:none } }

/* ============================================================
   2 · EL CLIENTE / EL RETO
   ============================================================ */
.mx-brief{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(24px,3vw,44px); align-items:stretch }
.mx-brief__intro .eyebrow{ margin-bottom:16px }
.mx-brief__intro h2{ font-size:clamp(28px,3.6vw,40px); letter-spacing:-.02em }
.mx-brief__intro .lead{ margin-top:18px }
.mx-brief__intro p + p{ margin-top:14px }
.mx-brief__meta{ display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:24px }
.mx-brief__meta div{ min-width:0 }
.mx-brief__meta small{ display:block; font-family:var(--ff-head); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3) }
.mx-brief__meta b{ font-family:var(--ff-head); font-size:15.5px; color:var(--ink) }

.mx-solve{
  position:relative; overflow:hidden; isolation:isolate; border-radius:var(--r-xl);
  padding:clamp(28px,3vw,40px); color:#fff; display:flex; flex-direction:column;
  background:
    radial-gradient(90% 90% at 100% 0%, rgba(28,157,215,.22), transparent 55%),
    radial-gradient(70% 70% at 0% 100%, rgba(140,198,63,.18), transparent 55%), var(--ink);
  box-shadow:var(--shadow-lg);
}
.mx-solve__kicker{ font-family:var(--ff-head); font-weight:600; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:#a6d957 }
.mx-solve h3{ color:#fff; font-size:clamp(21px,2.2vw,27px); line-height:1.2; margin:14px 0 14px; letter-spacing:-.02em }
.mx-solve p{ color:rgba(255,255,255,.78); font-size:15px; line-height:1.6; margin:0 0 20px }
.mx-solve__grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:auto; padding-top:8px }
.mx-solve__item{
  display:flex; align-items:center; gap:13px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.13);
  border-radius:var(--r-md, 14px); padding:13px 15px;
  transition:background .25s ease, border-color .25s ease, transform .25s ease;
}
.mx-solve__item:hover{ background:rgba(255,255,255,.1); border-color:rgba(166,217,87,.4); transform:translateY(-2px) }
.mx-solve__ic{
  flex:none; width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(135deg, rgba(140,198,63,.28), rgba(28,157,215,.22));
  border:1px solid rgba(255,255,255,.16); color:#c6ec85;
}
.mx-solve__ic svg{ width:21px; height:21px }
.mx-solve__item b{ display:block; font-family:var(--ff-head); font-weight:600; font-size:14px; color:#fff; line-height:1.25 }
.mx-solve__item small{ display:block; font-size:12px; color:rgba(255,255,255,.6); margin-top:2px }

/* ============================================================
   3 · SERVICIO PRINCIPAL — Sitio web mexfrut.com (ES/EN)
   ============================================================ */
.mx-web__grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(28px,3.6vw,52px); align-items:center }

.mx-web__showcase{ position:relative }
.mx-web__toggle{ display:inline-flex; gap:4px; padding:5px; margin-bottom:16px; background:#fff; border:1px solid var(--line); border-radius:var(--r-pill); box-shadow:var(--shadow-sm) }
.mx-web__toggle button{
  display:inline-flex; align-items:center; gap:8px; border:0; background:transparent;
  font-family:var(--ff-head); font-weight:600; font-size:13.5px; color:var(--ink-3);
  padding:8px 18px; border-radius:var(--r-pill); transition:color .2s, background .2s;
}
.mx-web__toggle button .fl{ font-size:15px; line-height:1 }
.mx-web__toggle button[aria-selected="true"]{ color:#fff; background:var(--grad); box-shadow:var(--shadow-brand) }
.mx-web__pane{ display:none }
.mx-web__pane.is-active{ display:block; animation:mx-fade .35s ease both }
@keyframes mx-fade{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }
@media (prefers-reduced-motion:reduce){ .mx-web__pane.is-active{ animation:none } }
.mx-web__showcase .mx-frame__shot{ aspect-ratio:11/8 }
.mx-web__visit{ margin-top:clamp(18px,2vw,24px) }

.mx-web__copy h2{ font-size:clamp(28px,3.6vw,42px); letter-spacing:-.02em }
.mx-web__copy .lead{ margin-top:16px }
.mx-web__list{ display:flex; flex-direction:column; gap:13px; margin:24px 0 28px }
.mx-web__list li{ display:flex; align-items:flex-start; gap:12px; font-size:15px; color:var(--ink-2) }
.mx-web__list svg{ width:20px; height:20px; flex:none; margin-top:1px; color:var(--green-d) }
.mx-web__list b{ color:var(--ink); font-weight:600 }

/* ============================================================
   4 · SEO — fichas de resultados (replica de .slo-rcard)
   ============================================================ */
.slo-cases{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,1.8vw,24px) }
.slo-rcard{
  position:relative; overflow:hidden; display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(22px,2.2vw,30px);
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s;
}
.slo-rcard:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:transparent }
.slo-rcard__top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px }
.slo-rcard__pos{
  font-family:var(--ff-head); font-weight:700; font-size:clamp(44px,5vw,58px); line-height:.85; letter-spacing:-.04em;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
.slo-rcard__pos i{ font-style:normal; font-size:.5em; vertical-align:super; -webkit-text-fill-color:var(--ink-3); color:var(--ink-3); margin-right:1px }
.slo-rcard__badge{
  flex:none; font-family:var(--ff-head); font-weight:700; font-size:11.5px; letter-spacing:.04em;
  color:var(--ink-2); background:var(--bg-soft-2); padding:6px 12px; border-radius:var(--r-pill);
}
.slo-rcard__badge--win{ color:#0e1320; background:linear-gradient(120deg,#a6d957,#5bc4e6) }
.slo-rcard__query{
  display:flex; align-items:center; gap:10px; margin-bottom:18px;
  background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--r-pill); padding:10px 16px;
}
.slo-rcard__query svg{ width:15px; height:15px; flex:none; color:var(--green-d) }
.slo-rcard__query span{ font-family:var(--ff-head); font-size:13.5px; font-weight:500; color:var(--ink-2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.slo-rcard__client{ margin-bottom:18px }
.slo-rcard__client b{ display:block; font-family:var(--ff-head); font-size:19px; color:var(--ink); letter-spacing:-.01em }
.slo-rcard__sector{ font-size:13px; color:var(--ink-3) }
.slo-rcard__foot{ display:flex; gap:14px; margin-top:auto; padding-top:18px; border-top:1px solid var(--line) }
.slo-rcard__stat{ flex:1; min-width:0 }
.slo-rcard__stat b{ display:block; font-family:var(--ff-head); font-size:16px; color:var(--green-d); line-height:1.1; letter-spacing:-.01em }
.slo-rcard__stat:nth-child(2) b{ color:var(--blue-d) }
.slo-rcard__stat small{ font-size:12px; color:var(--ink-3) }
.slo-rcard--cta{
  align-items:flex-start; justify-content:center; text-align:left; color:#fff; border-color:transparent;
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(28,157,215,.22), transparent 55%),
    radial-gradient(80% 120% at 0% 100%, rgba(140,198,63,.18), transparent 55%), var(--ink);
}
.slo-rcard--cta:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg) }
.slo-rcard__cta-ic{
  width:54px; height:54px; border-radius:var(--r-md); display:grid; place-items:center; color:#fff;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); margin-bottom:18px;
}
.slo-rcard__cta-ic svg{ width:28px; height:28px }
.slo-rcard--cta h3{ color:#fff; font-size:21px; letter-spacing:-.01em; margin-bottom:8px }
.slo-rcard--cta p{ color:rgba(255,255,255,.74); font-size:14px; line-height:1.55; margin-bottom:22px }
.slo-rcard__cta-btn{
  display:inline-flex; align-items:center; gap:9px; margin-top:auto;
  font-family:var(--ff-head); font-weight:700; font-size:14.5px; color:#0e1320;
  background:linear-gradient(120deg,#a6d957,#5bc4e6);
  padding:13px 22px; border-radius:var(--r-pill); transition:transform .25s, box-shadow .25s;
}
.slo-rcard__cta-btn:hover{ transform:translateY(-2px); box-shadow:0 16px 32px -14px rgba(91,196,230,.7) }

/* ============================================================
   5 · CARRUSEL (compartido por Redes 4:5 y Videos 9:16)
   replica de .vid-* de videos-promocionales-ia.css
   ============================================================ */
.mx-gallery{ position:relative }
.mx-gallery__bar{ display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:26px; flex-wrap:wrap }
.mx-gallery__head{ max-width:600px }
.mx-gallery__head .eyebrow{ margin-bottom:12px }
.mx-gallery__head h2{ font-size:clamp(26px,3.4vw,40px); letter-spacing:-.02em }
.mx-gallery__head p{ margin-top:12px; color:var(--ink-2) }
.mx-gallery__nav{ display:flex; gap:10px; flex:none }
.mx-arrow{
  width:50px; height:50px; border-radius:50%; display:grid; place-items:center;
  background:#fff; border:1.5px solid var(--line-2); color:var(--ink);
  transition:background .25s, color .25s, border-color .25s, transform .2s, opacity .2s;
}
.mx-arrow svg{ width:22px; height:22px }
.mx-arrow:hover{ background:var(--grad); color:#fff; border-color:transparent; transform:translateY(-2px) }
.mx-arrow:disabled{ opacity:.35; cursor:not-allowed; transform:none; background:#fff; color:var(--ink); border-color:var(--line-2) }

.mx-track{
  display:flex; gap:clamp(16px,2vw,24px);
  overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; padding:6px 2px 18px;
  scrollbar-width:none; cursor:grab;
}
.mx-track::-webkit-scrollbar{ display:none }
.mx-track.is-dragging{ cursor:grabbing; scroll-snap-type:none }
.mx-track.is-snapping{ scroll-snap-type:none }
.mx-track.is-dragging *{ pointer-events:none }
.mx-item{ flex:0 0 calc((100% - 2 * clamp(16px,2vw,24px)) / 3); scroll-snap-align:start }

.mx-card{
  position:relative; display:block; width:100%; overflow:hidden;
  border-radius:var(--r-lg); border:1px solid var(--line); background:var(--ink);
  box-shadow:var(--shadow-sm); isolation:isolate;
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s;
}
.mx-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg) }
.mx-card--video{ aspect-ratio:9/16; cursor:pointer }
.mx-card--social{ aspect-ratio:4/5 }
.mx-card > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform .6s cubic-bezier(.2,.7,.2,1) }
.mx-card:hover > img{ transform:scale(1.07) }
.mx-card::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(14,28,46,.04) 0%, rgba(14,28,46,.16) 46%, rgba(14,28,46,.80) 100%) }
.mx-card__top{ position:absolute; top:14px; left:14px; right:14px; display:flex; align-items:center; justify-content:space-between; gap:8px; z-index:1 }
.mx-card__tag{
  font-family:var(--ff-head); font-weight:600; font-size:12px; color:var(--ink);
  background:rgba(255,255,255,.92); padding:6px 12px; border-radius:var(--r-pill);
}
.mx-card__net{ display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%;
  background:rgba(255,255,255,.92); color:var(--ink) }
.mx-card__net svg{ width:16px; height:16px }
.mx-card__dur{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--ff-head); font-weight:600; font-size:12px; color:#fff;
  background:rgba(14,28,46,.55); backdrop-filter:blur(4px); padding:6px 11px; border-radius:var(--r-pill);
}
.mx-card__dur svg{ width:13px; height:13px }
.mx-card__play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:1;
  width:62px; height:62px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.92); color:var(--blue-d);
  box-shadow:0 12px 28px -8px rgba(14,28,46,.5); transition:transform .3s cubic-bezier(.2,.7,.2,1), background .3s;
}
.mx-card__play svg{ width:26px; height:26px; margin-left:3px }
.mx-card:hover .mx-card__play{ transform:translate(-50%,-50%) scale(1.1); background:#fff }
.mx-card__btm{ position:absolute; left:16px; right:16px; bottom:16px; color:#fff; z-index:1 }
.mx-card__btm h3{ color:#fff; font-size:16px; letter-spacing:-.01em; line-height:1.25 }
.mx-card__btm p{ color:rgba(255,255,255,.78); font-size:12.5px; margin-top:4px }

.mx-card__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:2; background:var(--ink) }
.mx-card.is-playing{ cursor:default }
.mx-card.is-playing:hover{ transform:none; box-shadow:var(--shadow-sm) }
.mx-card.is-playing .mx-card__top,
.mx-card.is-playing .mx-card__play,
.mx-card.is-playing .mx-card__btm,
.mx-card.is-playing::after{ opacity:0; pointer-events:none; transition:opacity .25s }

.mx-progress{ position:relative; height:4px; border-radius:4px; background:var(--line); margin-top:clamp(18px,2.2vw,28px); overflow:hidden }
.mx-progress__bar{ position:absolute; top:0; left:0; height:100%; border-radius:4px; background:var(--grad); width:30%; transition:left .25s ease, width .25s ease }

/* ============================================================
   6 · TESTIMONIO — tarjeta dividida con figura del CEO
   ============================================================ */
.mx-testi{ max-width:1080px; margin-inline:auto }
/* separación clara respecto a la sección gris de Videos con IA */
.section.testi{ background:var(--bg); border-top:1px solid var(--line) }
/* divisores y fondo alterno (caso Zufruta: sin sección SEO intermedia) */
.mx-sep{ border-top:1px solid var(--line) }
.section.testi.testi--soft{ background:var(--bg-soft) }
.mx-testi__head{ text-align:center; max-width:620px; margin:0 auto clamp(34px,4vw,52px) }
.mx-testi__head .eyebrow{ margin-bottom:14px }
.mx-testi__head h2{ font-size:clamp(28px,3.6vw,42px); letter-spacing:-.02em }
.mx-testi__card{
  margin:0; display:grid; grid-template-columns:minmax(300px,400px) 1fr; align-items:stretch;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-xl);
  overflow:hidden; box-shadow:var(--shadow-lg);
}
/* panel de marca con la figura recortada */
.mx-testi__media{
  position:relative; isolation:isolate; min-height:420px; display:flex; align-items:flex-end; justify-content:center;
  background:
    radial-gradient(80% 70% at 50% 12%, rgba(28,157,215,.30), transparent 60%),
    radial-gradient(90% 80% at 50% 120%, rgba(140,198,63,.32), transparent 55%), var(--ink);
}
.mx-testi__glow{
  position:absolute; inset:auto 0 -20% 0; height:70%; z-index:0; pointer-events:none;
  background:radial-gradient(60% 100% at 50% 100%, rgba(166,217,87,.5), transparent 70%); filter:blur(6px);
}
.mx-testi__qmark{
  position:absolute; top:6px; left:24px; z-index:0; pointer-events:none;
  font-family:var(--ff-head); font-weight:700; font-size:150px; line-height:1; color:#fff; opacity:.1;
}
.mx-testi__photo{
  position:relative; z-index:1; display:block; width:100%; max-width:440px; height:auto; object-fit:contain;
  margin-bottom:0; vertical-align:bottom;
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.38));
}
.mx-testi__badge{
  position:absolute; z-index:2; left:18px; bottom:20px;
  display:flex; flex-direction:column; gap:2px;
  background:rgba(255,255,255,.96); border-radius:14px; padding:11px 15px;
  box-shadow:0 12px 28px rgba(0,0,0,.22); backdrop-filter:blur(4px);
}
.mx-testi__stars{ color:#FFB020; letter-spacing:2px; font-size:15px; line-height:1 }
.mx-testi__rate{ font-size:11.5px; color:var(--ink-3) }
.mx-testi__rate b{ font-family:var(--ff-head); color:var(--ink); font-size:13px }
/* lado de la cita */
.mx-testi__body{ padding:clamp(28px,3.4vw,46px); display:flex; flex-direction:column; justify-content:center }
.mx-testi__eyebrow{
  font-family:var(--ff-head); font-weight:600; font-size:12.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--green); margin-bottom:16px;
}
.mx-testi__text{
  margin:0; font-size:clamp(18px,1.9vw,23px); line-height:1.5; color:var(--ink); letter-spacing:-.01em; text-wrap:pretty;
}
.mx-testi__text em{ font-style:normal; background:linear-gradient(transparent 62%, rgba(140,198,63,.34) 0); padding:0 2px }
.mx-testi__who{ display:flex; align-items:center; gap:14px; margin-top:26px; padding-top:22px; border-top:1px solid var(--line) }
.mx-testi__logo{ width:54px; height:54px; border-radius:12px; object-fit:contain; border:1px solid var(--line); padding:6px; background:var(--bg-soft); flex:none }
.mx-testi__id b{ font-family:var(--ff-head); font-size:17px; color:var(--ink); display:block }
.mx-testi__id small{ color:var(--ink-3); font-size:13.5px }

.mx-testi__avatar{
  flex:none; width:54px; height:54px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--ff-head); font-weight:700; font-size:18px; letter-spacing:.02em; color:#fff; background:var(--grad);
}
@media (max-width:760px){
  .mx-testi__card{ grid-template-columns:1fr }
  .mx-testi__media{ min-height:340px }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .mx-hero__grid{ grid-template-columns:1fr; gap:40px }
  .mx-hero__media{ max-width:560px; margin-inline:auto; width:100% }
  .mx-brief{ grid-template-columns:1fr; gap:28px }
  .mx-solve__grid{ grid-template-columns:1fr }
  .mx-web__grid{ grid-template-columns:1fr; gap:32px }
  .mx-web__showcase{ max-width:620px; margin-inline:auto; width:100% }
  .slo-cases{ grid-template-columns:repeat(2,1fr) }
  .mx-item{ flex-basis:calc((100% - clamp(16px,2vw,24px)) / 2) }   /* 2 por vista */
}
@media (max-width:620px){
  .slo-cases{ grid-template-columns:1fr; max-width:380px; margin-inline:auto }
  .mx-float{ transform:scale(.84) }
  .mx-float--1{ right:-8px }
  .mx-item{ flex-basis:84% }                                        /* 1 por vista (peek) */
  .mx-gallery__nav{ order:3 }
  .mx-hero__actions .btn{ flex:1 }
}