:root{
  --ink:#0f2f3a;
  --sky:#7fc6dc;
  --accent:#f28c28;
  --bg:#f7f9fb;
  --card:#ffffff;
  --muted:#5c6b73;
  --shadow: 0 10px 30px rgba(0,0,0,.10);
  --radius: 16px;
}

*{ box-sizing:border-box; margin:0; padding:0; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; }
body{
  line-height: 1.45;

  /* Soft teal + orange: subtle sides, orange haze behind content (industrial calm) */
  background:
    radial-gradient(1200px 650px at 50% 35%, rgba(242,140,40,.12), transparent 62%),
    linear-gradient(90deg, rgba(242,140,40,.10) 0%, rgba(242,140,40,.04) 16%, rgba(255,255,255,0) 34%, rgba(255,255,255,0) 66%, rgba(242,140,40,.04) 84%, rgba(242,140,40,.10) 100%),
    radial-gradient(900px 420px at 15% 20%, rgba(127,198,220,.18), transparent 60%),
    var(--bg);
  color:#182126;
}

a{ color:inherit; }

.header{
  position:fixed; inset:0 0 auto 0;
  height:72px;
  background: linear-gradient(90deg, #0c2a33, #123c48);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 18px;
  z-index:1200;
}

.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:#fff; }
.brand-logo{
  width:46px;
  height:46px;
  object-fit:contain;
  border-radius:14px;
  background:transparent;
  padding:0;
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.35));
}

@media (max-width:640px){
  .brand-logo{ width:42px; height:42px; }
}
.brand-name{ font-weight:800; letter-spacing:.2px; }
.brand-tagline{ font-size:12px; opacity:.85; margin-top:2px; }



/* Desktop dropdown (multi-nivel) */
.nav-links{ display:flex; align-items:center; gap:4px; }
.nav-item{ position:relative; display:inline-flex; align-items:center; }
.nav-dropdown{
  position:absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 240px;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(15,47,58,.14);
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
  padding: 8px;
  opacity: 0;
  transform: translateY(8px);
  pointer-events:none;
  transition: opacity 160ms ease, transform 160ms ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.nav-dropdown::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:-10px;
  height:10px;
}
.nav-item--dropdown:hover .nav-dropdown,
.nav-item--dropdown.is-open .nav-dropdown,
.nav-item--dropdown:focus-within .nav-dropdown{
  opacity:1;
  transform: translateY(0);
  pointer-events:auto;
}
.nav-dropdown a{
  display:block;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration:none;
  color: var(--ink) !important;
  opacity: 1 !important;
  white-space:nowrap;
}
.nav-dropdown a:hover{
  background: rgba(15,47,58,.08);
}
.nav-dropdown .nav-dd-title{
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(15,47,58,.55);
  padding: 8px 12px 6px;
}
.nav{ display:flex; align-items:center; gap:14px; color:#fff; }
.nav a{ text-decoration:none; opacity:.92; padding:8px 10px; border-radius:12px; }
.nav a:hover{ background: rgba(255,255,255,.08); }
.nav .cta{ background: rgba(127,198,220,.22); border:1px solid rgba(127,198,220,.35); }
.icon-btn{
  width:40px; height:40px;
  border:none; border-radius:12px;
  background: rgba(255,255,255,.08);
  color:#fff; font-size:18px; cursor:pointer;
}

main{ padding-top: 92px; }

.section{
  padding: 56px 18px;
  max-width: 1140px;
  margin: 0 auto;
}
.section-head{ text-align:left; margin-bottom: 18px; }
.section-head h1, .section-head h2{ font-size: 34px; margin-bottom: 8px; }
.section-head p{ color: var(--muted); }

.hero{
  max-width:1140px;
  margin: 0 auto;
  padding: 72px 18px 24px;
}
.hero-card{
  background: rgba(255,255,255,.76);
  border:1px solid rgba(15,47,58,.12);
  border-radius: 24px;
  box-shadow: var(--shadow);
  padding: 28px;
  backdrop-filter: blur(8px);
}
.kicker{
  display:flex; gap:10px; flex-wrap:wrap; margin-top: 14px;
}
.pill{
  padding:10px 12px;
  border-radius: 999px;
  border:1px solid rgba(15,47,58,.14);
  background: rgba(255,255,255,.7);
  color: var(--ink);
  font-size: 14px;
}

.btn{
  display:inline-flex; justify-content:center; align-items:center;
  text-decoration:none;
  padding:12px 18px;
  border-radius:14px;
  border: 1px solid transparent;
  font-weight:800;
  gap:8px;
}
.btn.small{ padding:10px 14px; border-radius:12px; }
.btn.primary{ background: var(--ink); color:#fff; }
.btn.accent{ background: var(--accent); color:#fff; }
.btn.ghost{ background: transparent; border-color: rgba(15,47,58,.20); color: var(--ink); }

/* Responsive grid that adapts naturally on mobile */
.grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:16px; }
@media (max-width: 640px){ .grid{ grid-template-columns: 1fr; gap:14px; } }

.card{
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
  border: 1px solid rgba(15,47,58,.10);
  display:flex;
  flex-direction:column;
}
.card-img{ height:150px; background: linear-gradient(135deg, rgba(127,198,220,.30), rgba(242,140,40,.16)), #0f2f3a; background-size:cover; background-position:center; background-repeat:no-repeat; }
.card-body{ padding:14px; display:flex; flex-direction:column; flex:1; }
.card-body h3{ font-size:18px; margin-bottom:6px; }
.card-body p{ color: var(--muted); font-size: 14px; line-height:1.35; margin-bottom:12px; display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; -webkit-line-clamp: 5; }

.card-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:auto; }

.breadcrumbs{ color: var(--muted); font-size: 13px; margin-bottom: 10px; }
.breadcrumbs a{ color: var(--ink); text-decoration:none; }
.breadcrumbs a:hover{ text-decoration:underline; }

.product-layout{ display:grid; grid-template-columns: 1.1fr .9fr; gap:18px; }
.gallery{
  background: rgba(255,255,255,.7);
  border:1px solid rgba(15,47,58,.12);
  border-radius: 18px;
  padding: 12px;
  box-shadow: var(--shadow);
}
.gallery img{ width:100%; border-radius: 14px; display:block; }
.specs{
  background: rgba(255,255,255,.7);
  border:1px solid rgba(15,47,58,.12);
  border-radius: 18px;
  padding: 14px;
  box-shadow: var(--shadow);
}
.specs ul{ padding-left: 18px; color: var(--muted); line-height:1.6; margin: 8px 0 14px; }
.specs table{ width:100%; border-collapse: collapse; font-size:14px; }
.specs th, .specs td{ border-bottom:1px solid rgba(15,47,58,.10); padding:10px 8px; text-align:left; }
.specs th{ color: var(--ink); width: 38%; }

.sponsors{ display:flex; flex-wrap:wrap; gap:12px; }
.sponsor{
  display:flex; align-items:center; justify-content:center;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid rgba(15,47,58,.16);
  background: rgba(255,255,255,.8);
  text-decoration:none;
}
.sponsor img{ width:100%; height:100%; object-fit:cover; padding:0; }
.sponsor:hover img{ opacity:1; filter: grayscale(0%); }

.footer{
  background: var(--ink);
  color:#fff;
  padding: 26px 18px 14px;
  margin-top: 40px;
}
.footer-grid{
  max-width: 1140px;
  margin: 0 auto;
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 18px;
  align-items:start;
}
.footer-brand{
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.footer-brand img{ width:42px; height:42px; object-fit:contain; }
.footer-title{ font-weight:800; letter-spacing:-.2px; }
.footer-muted{ opacity:.86; font-size: 13px; line-height:1.35; margin-top:6px; }
.footer-links{ display:flex; flex-direction:column; gap:8px; }
.footer-links a{ color:#fff; text-decoration:none; opacity:.92; }
.footer-links a:hover{ opacity:1; text-decoration:underline; }
.footer-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.footer-actions .btn{ padding: 10px 12px; }
.footer-bottom{ text-align:center; opacity:.85; margin-top: 12px; font-size: 13px; }

@media (max-width: 980px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px){
  .footer-grid{ grid-template-columns: 1fr; }
}

/* pushbars */
.pushbar{
  position:fixed; top:0;
  width:320px; height:100%;
  background: var(--card);
  box-shadow: var(--shadow);
  padding:18px 18px 22px;
  z-index:1300;
  transition: transform .28s ease;
  display:flex; flex-direction:column; gap:14px;
}
.pushbar-left{ left:0; transform: translateX(-105%); border-top-right-radius:18px; border-bottom-right-radius:18px; }
.pushbar-right{ right:0; transform: translateX(105%); border-top-left-radius:18px; border-bottom-left-radius:18px; }
.pushbar.open{ transform: translateX(0); }
.pushbar-top{ display:flex; align-items:center; justify-content:space-between; padding-top:6px; }
.pushbar-top h3{ font-size:18px; color:#111; }
.close-btn{ border:none; background:transparent; cursor:pointer; font-size:20px; color:#111; }
.pushbar-sub{ color: var(--muted); font-size:14px; line-height:1.35; }
.pushbar-group{ display:flex; flex-direction:column; gap:10px; }
.pushbar-sep{
  margin: 8px 0 -2px;
  padding: 6px 10px;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(0,0,0,.52);
}
.pushbar-link{ text-decoration:none; color: var(--ink); padding:10px 12px; border-radius:12px; background: rgba(127,198,220,.12); }
.pushbar-cta{ margin-top:auto; display:flex; flex-direction:column; gap:10px; }
.overlay{ position:fixed; inset:0; background: rgba(0,0,0,.38); opacity:0; pointer-events:none; transition: opacity .25s ease; z-index:1250; }
.overlay.active{ opacity:1; pointer-events:all; }
.contact-cards{ display:flex; flex-direction:column; gap:12px; }
.contact-card{
  text-decoration:none; color:#111;
  display:flex; gap:12px; align-items:center;
  padding:12px; border-radius:16px;
  border: 1px solid rgba(15,47,58,.12);
  background: rgba(127,198,220,.10);
}
.contact-icon{
  width:72px; height:72px; display:grid; place-items:center;
  border-radius:14px; background: rgba(242,140,40,.16);
}
.contact-title{ font-weight:900; }
.contact-sub{ color: var(--muted); font-size: 13px; }

@media (max-width: 980px){
  /* Tablet: 2 columns (avoid ultra-narrow cards) */
  .grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap:16px; }
  .product-layout{ grid-template-columns: 1fr; }
  .nav a{ display:none; }
  .nav .cta{ display:inline-flex; }
}
@media (max-width: 540px){
  /* Phone: keep 2 columns for a desktop-like feel, fall back to 1 on very small devices */
  .grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px; }
  .card-img{ height: 120px; }
  .card-body p{ -webkit-line-clamp: 3; }
  .card-body h3{ font-size: 16px; }
  .btn.small{ padding: 9px 12px; }

  .pushbar{ width: 88vw; max-width: 340px; }
  .section-head h1, .section-head h2{ font-size: 28px; }
}
@media (max-width: 390px){
  .grid{ grid-template-columns: 1fr; }
}

/* Sponsors: medium + circular */
.sponsors-grid{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:center;
}
.sponsor{
  width:72px;
  height:72px;
  border-radius:999px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,0.6);
  border:1px solid rgba(0,0,0,0.08);
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}
.sponsor img{ width:100%; height:100%; object-fit:cover; padding:0; }

/* Brand in header (keep clean + consistent across breakpoints) */
.brand img{
  width:46px;
  height:46px;
  border-radius:14px;
  background:transparent;
  padding:0;
  object-fit:contain;
}
@media (max-width:640px){
  .brand img{ width:42px; height:42px; }
}
/* Watermark logo in background */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:url("../assets/images/logo.png");
  background-repeat:no-repeat;
  background-position: 50% 55%;
  background-size: 560px auto;
  opacity:0.035;
  filter: grayscale(1);
  z-index:-1;
}

/* Sponsors: medium + circular (logo fills circle) */
.sponsors-grid{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.sponsor{
  width:78px; height:78px; border-radius:999px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,0.92);
  border:1px solid rgba(0,0,0,0.08);
  box-shadow: 0 8px 22px rgba(0,0,0,0.08);
}
.sponsor img{ width:100%; height:100%; object-fit:cover; padding:0; }

/* Page banners */
.page-banner{
  border-radius:18px; overflow:hidden; min-height:180px;
  background-size:cover; background-position:center;
  box-shadow: 0 18px 45px rgba(0,0,0,0.12);
  margin: 8px 0 18px;
}
.page-banner-inner{ padding: 26px 22px; max-width: 980px; }
.page-banner h1{ margin:0; color:#fff; font-size: clamp(28px, 4vw, 44px); letter-spacing:-0.02em; }
.page-banner p{ margin:10px 0 0; color: rgba(255,255,255,0.85); max-width: 720px; }

/* Header scale (more structure) */
.header{ padding: 14px 18px; }
.brand{ gap:12px; }
.brand img{ width:62px; height:62px; }
.nav{ gap:18px; }
.nav-btn{ padding:10px 14px; border-radius:14px; }

/* Product detail layout */
.product-detail{ display:grid; grid-template-columns: 1.1fr .9fr; gap:18px; align-items:start; }
.product-hero-img{ width:100%; border-radius:18px; box-shadow: 0 18px 45px rgba(0,0,0,0.12); }
.product-detail-info{ background: rgba(255,255,255,0.75); border:1px solid rgba(255,255,255,0.55); border-radius:18px; padding:16px; backdrop-filter: blur(10px); }
.qty-row{ display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.qty-row input{ width: 160px; padding:10px 12px; border-radius:12px; border:1px solid rgba(0,0,0,0.15); }
.qty-row select{ width: 100%; padding:10px 12px; border-radius:12px; border:1px solid rgba(0,0,0,0.15); background:#fff; font-family: inherit; }

.qty-row textarea{ width: 100%; min-height: 90px; padding:10px 12px; border-radius:12px; border:1px solid rgba(0,0,0,0.15); resize: vertical; font-family: inherit; }
@media (max-width: 900px){
  .product-detail{ grid-template-columns: 1fr; }
  .qty-row input{ width: 100%; }
}

.header{min-height:76px;}


.fab-whatsapp{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  background: #25D366;
  display: grid;
  place-items: center;
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
  z-index: 1200;
}
.fab-whatsapp img{width:28px;height:28px;}
.fab-whatsapp:hover{filter:brightness(1.02); transform: translateY(-1px);}



.sponsors-row{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;align-items:center;}
.sponsor{width:76px;height:76px;border-radius:999px;background:#fff;overflow:hidden;display:grid;place-items:center;box-shadow:0 10px 26px rgba(0,0,0,.10);}
.sponsor img{width:100%;height:100%;object-fit:cover;}



.mini-list{margin:10px 0 14px; padding-left: 18px; color: rgba(0,0,0,.72);}
.mini-label{font-size:12px;color:rgba(0,0,0,.65);margin-right:8px;}
.mini-input{padding:10px 12px;border-radius:12px;border:1px solid rgba(0,0,0,.12);background:#fff;}
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}



.hero-wrap{position:relative;padding:56px 0 24px;}
.hero-wrap::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:url("../assets/products/banner-granalladora-cilindros.jpg");
  background-size:cover;
  background-position:center;
  opacity:.14;
  pointer-events:none;
}
.hero-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(circle at 10% 30%, rgba(76,186,226,.22), transparent 45%),
              radial-gradient(circle at 90% 25%, rgba(255,165,80,.18), transparent 55%);
  pointer-events:none;
}
.hero-wrap > *{position:relative;}

/* --- Home: two-column panels & accordion --- */
.two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start;}
.two-col > *{min-width:0;}
.panel{background:rgba(255,255,255,.78);border:1px solid rgba(15,47,58,.10);border-radius:20px;box-shadow:0 10px 28px rgba(0,0,0,.10);padding:16px;}
.panel h3{margin:0 0 6px 0;font-size:18px;}
.panel p{margin:0 0 10px 0;color:rgba(0,0,0,.68);}
.accordion{display:flex;flex-direction:column;gap:10px;}
.acc{border:1px solid rgba(0,0,0,.08);border-radius:16px;background:rgba(255,255,255,.7);padding:10px 12px;}
.acc summary{cursor:pointer;font-weight:800;list-style:none;display:flex;align-items:center;gap:10px;}
.acc summary::-webkit-details-marker{display:none;}
.acc summary .tag{margin-left:auto;font-size:12px;background:rgba(15,47,58,.08);padding:4px 8px;border-radius:999px;font-weight:700;color:rgba(0,0,0,.70);}
.acc .acc-body{padding-top:10px;color:rgba(0,0,0,.75);}
.acc .links{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px;}
.acc .links a{padding:8px 10px;border-radius:12px;border:1px solid rgba(0,0,0,.10);background:#fff;text-decoration:none;font-weight:700;color:var(--ink);}
.acc .links a:hover{transform:translateY(-1px);}

@media (max-width: 900px){
  .two-col{grid-template-columns:1fr;}
}



@media (max-width: 640px){
  .brand-logo{ width:42px; height:42px; }
  .nav-actions .btn-primary{ padding:10px 12px; font-size:14px; }
}

/* =====================
   HOME PRO (v5.1)
   ===================== */

.container{ max-width: 1140px; margin: 0 auto; padding: 0 18px; }

/* CTA in header */
.nav-cta{ margin-left: 6px; }
@media (max-width: 900px){
  .nav a{ display:none; }
  .nav-cta{ display:inline-flex; }
}

.hero-pro{
  position: relative;
  min-height: 86vh;
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 120px 0 64px;
  background: url("../assets/images/m2_hero_banner_orange_spot_v2.jpg?v=20260227c") center / cover no-repeat;
  overflow:hidden;
}

/* Mobile: keep the banner readable (avoid over-zoom on the centered logo) */
@media (max-width: 720px){
  .hero-pro{
    min-height: 64vh;
    padding: 86px 0 44px;
    background-position: 50% 38%;
  }
  .hero-pro__inner{ padding: 0 14px 26px; }
}

@media (max-width: 420px){
  .hero-pro{ min-height: 58vh; background-position: 50% 42%; }
}

/* =========================================================
   COARSE (Phone) layout guard
   
   Some mobile browsers can render in "desktop" viewport mode.
   This media query targets real phones (touch + coarse pointer)
   so the layout still behaves like the desktop design, just smaller.
   ========================================================= */

@media (hover: none) and (pointer: coarse){
  /* Header spacing */
  .header{ height:64px; min-height:64px; padding: 0 14px; }
  main{ padding-top: 78px; }

  /* Hero: show more of the banner (avoid over-zoom on center logo) */
  .hero-pro{
    min-height: 56vh;
    padding: 84px 0 36px;
    background-position: 50% 70%;
  }
  .hero-pro__inner{ padding: 0 14px 26px; }
  .hero-pro__tagline{ max-width: 92vw; }

  /* Page banners: keep content readable and aligned */
  .page-banner{ min-height: 260px; }
  .page-banner__inner{ padding: 26px 14px 60px; }
  .btn-row{ flex-direction: column; align-items: stretch; }
  .btn-row .btn{ width: 100%; }

  /* Product/service cards: 2-up grid like desktop, without tall "columns" */
  .grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px; }
  .card-img{ height: 112px; }
  .card-body{ padding:12px; }
  .card-body h3{ font-size: 15px; }
  .card-body p{ font-size: 12.5px; -webkit-line-clamp: 3; margin-bottom:10px; }
  .btn.small{ padding: 9px 12px; }

  /* Services cards: keep a desktop-like 2-up layout on phones */
  .cards-media{ grid-template-columns: repeat(2, minmax(0,1fr)); gap:14px; }
  .card-media__img{ height: 112px; }
}

@media (hover: none) and (pointer: coarse) and (max-width: 360px){
  .grid{ grid-template-columns: 1fr; }
  .cards-media{ grid-template-columns: 1fr; }
}
.hero-pro__overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 25%, rgba(127,198,220,.24), transparent 60%),
    radial-gradient(circle at 80% 30%, rgba(242,140,40,.14), transparent 62%),
    linear-gradient(180deg, rgba(10,28,34,.30), rgba(10,28,34,.12));
}

.hero-pro::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: radial-gradient(circle at 50% 46%, rgba(255,255,255,.26) 0%, rgba(255,255,255,.14) 18%, rgba(255,255,255,0) 60%);
  mix-blend-mode: screen;
  opacity: .78;
}

.hero-pro::after{
  content:"";
  position:absolute;
  inset:-30% -40%;
  pointer-events:none;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.10) 45%, rgba(255,255,255,0) 55%, transparent 100%);
  transform: translateX(-40%) rotate(2deg);
  opacity:0;
  animation: heroSheen 10s ease-in-out infinite;
}
@keyframes heroSheen{
  0%,62%{ opacity:0; transform: translateX(-40%) rotate(2deg); }
  70%{ opacity:.18; }
  82%{ opacity:0; transform: translateX(40%) rotate(2deg); }
  100%{ opacity:0; transform: translateX(40%) rotate(2deg); }
}
@media (prefers-reduced-motion: reduce){
  .hero-pro::after{ animation:none; }
}

.hero-pro__inner{
  position:relative;
  z-index:2;
  width:min(920px, 100%);
  text-align:center;
  padding: 0 18px 42px;
}

.hero-pro__inner--empty{
  width:100%;
  padding:0;
  margin:0;
}


.hero-pro__tagline{
  display:inline-block;
  margin:0 auto 12px;
  padding:14px 18px 16px;
  border-radius:18px;
  background:rgba(5, 18, 22, .48);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  box-shadow:0 20px 50px rgba(0,0,0,.25);
  animation:heroTaglineIn 1.15s cubic-bezier(.2,.85,.2,1) .12s both;
  transform-origin:50% 80%;
  will-change:transform, opacity, filter;
}

/* Desktop: hero más "tipo Roca" (texto alineado y respiración) */
@media (min-width: 820px){
  .hero-pro__inner{
    text-align:left;
    width:min(1040px, 100%);
  }
  .hero-pro__tagline{
    margin:0 0 12px;
    max-width: 620px;
  }
  .hero-pro .btn-row{
    justify-content:flex-start;
  }
}

@media (max-width:540px){
  .hero-pro__tagline{
    padding:12px 14px 13px;
    border-radius:16px;
  }
}

@keyframes heroTaglineIn{
  0%{opacity:0; transform:translateX(-26px) translateY(10px) scale(1.08); filter:blur(10px);}
  60%{opacity:1; filter:blur(0);}
  100%{opacity:1; transform:translateX(0) translateY(0) scale(1); filter:blur(0);}
}

@media (prefers-reduced-motion:reduce){
  .hero-pro__tagline{animation:none;}
}

.hero-pro__logo{
  width: min(320px, 62vw);
  height:auto;
  margin: 0 auto 18px;
  filter: drop-shadow(0 18px 34px rgba(0,0,0,.35));
}
.hero-pro__claim{
  color:#fff;
  font-size: clamp(22px, 3.2vw, 40px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}
.hero-pro__sub{
  color: rgba(255,255,255,.82);
  font-size: clamp(13px, 1.5vw, 16px);
  margin: 0 auto 22px;
  max-width: 760px;
}
.hero-pro__cta{ padding: 14px 22px; border-radius: 16px; font-size: 16px; }
.hero-pro__kicker{ justify-content:center; }

.band{ padding: 62px 0; }
.band-soft{
  background:
    radial-gradient(900px 420px at 12% 35%, rgba(127,198,220,.16), transparent 60%),
    radial-gradient(900px 420px at 80% 20%, rgba(242,140,40,.10), transparent 60%);
}
.band-white{
  background: rgba(255,255,255,.62);
  backdrop-filter: blur(6px);
}
.band-ink{
  background: linear-gradient(90deg, #0c2a33, #123c48);
}
.band-head{ margin-bottom: 18px; }
.band-head h2{ font-size: clamp(26px, 3vw, 36px); margin:0 0 8px; }
.band-head h1{ font-size: clamp(28px, 3.4vw, 44px); margin:0 0 10px; letter-spacing:-0.02em; }
.band-head p{ color: var(--muted); margin:0; }
.band-head--light h2{ color:#fff; }
.band-head--light p{ color: rgba(255,255,255,.80); }

.band-head--center{ text-align:center; margin-left:auto; margin-right:auto; }

.eyebrow{
  display:inline-block;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color: rgba(0,0,0,.55);
  margin: 0 0 10px;
}

.home-claim{
  font-size: clamp(28px, 3.4vw, 44px);
  line-height:1.05;
  letter-spacing:-0.02em;
  margin:0 0 10px;
}

.home-sub{
  color: var(--muted);
  margin:0;
  max-width: 960px;
  margin-left:auto;
  margin-right:auto;
}

.band-two{ display:grid; grid-template-columns: 1.05fr .95fr; gap: 18px; align-items:start; }
@media (max-width: 900px){ .band-two{ grid-template-columns: 1fr; } }

.big-list{ padding-left: 18px; color: rgba(0,0,0,.78); line-height: 1.55; }
.big-list li{ margin: 10px 0; }

.dash-list{list-style:none; padding:0; margin:0;}
.dash-list li{display:flex; gap:10px; padding:10px 0; border-bottom:1px solid rgba(0,0,0,.08);} 
.dash-list li:last-child{border-bottom:none;}
.dash-list .dash{color:var(--accent); font-weight:900; margin-top:1px;}


.band-tiles{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 520px){ .band-tiles{ grid-template-columns: 1fr; } }
  .work-slide__num{ top: 14px; right: 14px; font-size: 78px; opacity:.9; }
.tile{
  display:grid;
  grid-template-columns: 86px 1fr;
  gap: 12px;
  align-items:center;
  text-decoration:none;
  background: rgba(255,255,255,.76);
  border: 1px solid rgba(15,47,58,.10);
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(0,0,0,.10);
  padding: 10px;
}
.tile:hover{ transform: translateY(-1px); }
.tile-img{ width:86px; height:74px; border-radius: 14px; background-size:cover; background-position:center; }
.tile-txt strong{ display:block; color: var(--ink); }
.tile-txt span{ display:block; color: rgba(0,0,0,.62); font-size: 13px; margin-top: 2px; }

.steps{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 980px){ .steps{ grid-template-columns: repeat(2, 1fr);} }
@media (max-width: 520px){ .steps{ grid-template-columns: 1fr;} }
.step{
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(15,47,58,.10);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,.10);
  display:flex;
  gap: 12px;
}
.step-n{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: rgba(242,140,40,.16);
  color: var(--ink);
  font-weight: 900;
}
.step-b h3{ margin: 0 0 6px; }
.step-b p{ margin: 0; color: rgba(0,0,0,.68); font-size: 14px; line-height: 1.35; }

.pedido-box{
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  gap: 18px;
  padding: 18px;
  border-radius: 20px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
}
@media (max-width: 900px){ .pedido-box{ flex-direction:column; } }
.pedido-example{ flex: 1; }
.pedido-label{ color: rgba(255,255,255,.75); font-size: 12px; margin-bottom: 8px; }
.pedido-pre{
  margin:0;
  white-space: pre-wrap;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.86);
  padding: 14px;
  border-radius: 16px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  line-height: 1.45;
}
.pedido-textarea{
  width:100%;
  resize: vertical;
  min-height: 210px;
  margin:0;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.90);
  padding: 14px;
  border-radius: 16px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  line-height: 1.45;
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}
.pedido-textarea::placeholder{ color: rgba(255,255,255,.55); }
.pedido-textarea:focus{
  border-color: rgba(232,132,35,.70);
  box-shadow: 0 0 0 4px rgba(232,132,35,.16), inset 0 0 0 1px rgba(255,255,255,.10);
}
.pedido-actions{ display:flex; flex-direction:column; gap: 10px; min-width: 220px; justify-content:center; }

.trust-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items:start; }
@media (max-width: 980px){ .trust-grid{ grid-template-columns: 1fr; } }
.trust-card .card-img{ height: 230px; }
.trust-sponsors{ background: rgba(255,255,255,.58); border: 1px solid rgba(15,47,58,.08); border-radius: 18px; padding: 18px; backdrop-filter: blur(6px); }


/* --- Ferretería catálogo --- */
.filterbar{
  background:#fff;
  border:1px solid rgba(11,31,42,.10);
  border-radius:16px;
  padding:14px 14px 12px;
  display:grid;
  grid-template-columns: 1.2fr 1fr auto auto;
  gap:12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  backdrop-filter: blur(10px);
}
.filterbar .field{display:flex;flex-direction:column;gap:6px;}
.filterbar .field label{
  font-size:12px;
  color:rgba(11,31,42,.70);
  letter-spacing:.02em;
}
.filterbar input,.filterbar select{
  width:100%;
  background:#f4f6f8;
  border:1px solid rgba(11,31,42,.12);
  color:var(--ink);
  border-radius:12px;
  padding:10px 12px;
  outline:none;
}
.filterbar input::placeholder{color:rgba(11,31,42,.45);}
.filterbar input:focus,.filterbar select:focus{
  border-color:rgba(232,132,35,.60);
  box-shadow:0 0 0 4px rgba(232,132,35,.14);
}
.filterbar .field.check{align-self:end;padding:0 6px 2px;}
.filterbar .field.check label{display:flex;align-items:center;gap:10px;font-size:13px;color:rgba(11,31,42,.75);font-weight:700;}
.filterbar .field.check input{width:auto;}

.filterbar-right{display:flex;align-items:center;gap:10px;justify-content:flex-end;align-self:end;padding:0 0 2px;}
.filterbar .count{color:rgba(11,31,42,.70);font-size:13px;padding:0 6px 2px;}
.filterbar .btn-ghost{
  background:#fff;
  border:1px solid rgba(11,31,42,.14);
  color:var(--ink);
  border-radius:12px;
  padding:10px 12px;
  font-weight:800;
  cursor:pointer;
}
.filterbar .btn-ghost:hover{background:#f4f6f8;}
.filterbar .btn-ghost:focus-visible{outline:3px solid rgba(232,132,35,.25);outline-offset:2px;}

.filterbar-right .btn.ghost{background:#fff;border:1px solid rgba(11,31,42,.14);color:var(--ink);}
.filterbar-right .btn.ghost:hover{background:#f4f6f8;}
.filterbar-right .btn.ghost:focus-visible{outline:3px solid rgba(232,132,35,.25);outline-offset:2px;}

.hint{
  color:rgba(11,31,42,.62);
  font-size:13px;
  margin:10px 2px 12px;
}
.hint strong{color:rgba(11,31,42,.80);}

.items{display:flex;flex-direction:column;gap:12px;margin-top:10px;}
.item-row{
  background:#fff;
  border:1px solid rgba(11,31,42,.10);
  border-radius:18px;
  padding:16px 16px;
  display:grid;
  grid-template-columns: 1fr auto;
  gap:14px;
  align-items:center;
  box-shadow: 0 12px 24px rgba(0,0,0,.05);
}
.item-row.is-highlight{
  border-color: rgba(232,132,35,.55);
  box-shadow: 0 18px 34px rgba(232,132,35,.16);
}

.item-main{display:flex;gap:14px;align-items:flex-start;}
.item-icon{
  width:44px;height:44px;border-radius:999px;
  background:linear-gradient(180deg,#f7fafc,#eef3f7);
  border:1px solid rgba(11,31,42,.10);
  display:grid;place-items:center;
  flex:0 0 44px;
}
.item-icon svg{width:22px;height:22px;stroke:rgba(11,31,42,.70);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.item-info{min-width:0;flex:1 1 auto;}

.item-title{font-weight:800;color:var(--ink);letter-spacing:.01em;text-transform:uppercase;font-size:14px;line-height:1.25;}
.item-meta{color:rgba(11,31,42,.62);font-size:12px;margin-top:4px;}
.item-tags{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;}
.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(11,31,42,.10);
  background:#f6f8fa;
  color:rgba(11,31,42,.75);
  font-size:12px;
  font-weight:700;
}
.item-side{display:flex;align-items:center;gap:12px;justify-content:flex-end;}
.item-price{min-width:170px;text-align:right;}
.item-price .label{display:block;font-size:11px;color:rgba(11,31,42,.55);margin-bottom:2px;}
.item-price strong{font-size:16px;color:var(--ink);}
.item-actions{display:flex;flex-direction:column;gap:10px;align-items:flex-end;}
.qty{display:flex;align-items:center;gap:8px;}
.qty label{color:rgba(11,31,42,.62);font-size:12px;}
.qty input{
  width:70px;
  background:#f4f6f8;
  border:1px solid rgba(11,31,42,.12);
  color:var(--ink);
  border-radius:12px;
  padding:10px 10px;
  outline:none;
  text-align:center;
  font-weight:800;
}
.qty input:focus{
  border-color:rgba(232,132,35,.60);
  box-shadow:0 0 0 4px rgba(232,132,35,.14);
}
.btn-row{display:flex;gap:10px;}
.btn-row--center{justify-content:center;flex-wrap:wrap;}
.btn-small{padding:10px 12px;border-radius:12px;font-weight:900;font-size:13px;border:1px solid transparent;cursor:pointer;}
.btn-small.primary{background:var(--accent);color:#fff;}
.btn-small.primary:hover{filter:brightness(0.98);}
.btn-small.secondary{
  background:#fff;
  border-color:rgba(11,31,42,.14);
  color:var(--ink);
}
.btn-small.secondary:hover{background:#f4f6f8;}
.btn-small:focus-visible{outline:3px solid rgba(232,132,35,.25);outline-offset:2px;}

.pager{display:flex;justify-content:center;margin-top:18px;}
.pager button{
  background:#fff;
  color:var(--ink);
  border:1px solid rgba(11,31,42,.14);
  padding:12px 14px;
  border-radius:14px;
  cursor:pointer;
  font-weight:900;
  box-shadow: 0 10px 18px rgba(0,0,0,.04);
}
.pager button:hover{background:#f4f6f8;}
.pager button:focus-visible{outline:3px solid rgba(232,132,35,.25);outline-offset:2px;}

.pager{gap:10px;align-items:center;flex-wrap:wrap;}
.pager__left,.pager__right{display:flex;gap:10px;align-items:center;}
.pager__mid{color:rgba(11,31,42,.65);font-weight:700;font-size:13px;}
.pager__select{height:36px;border-radius:12px;border:1px solid rgba(11,31,42,.14);padding:0 10px;background:#fff;color:var(--ink);font-weight:700;}
@media (max-width: 520px){
  .pager{justify-content:flex-start;}
  .pager__left{width:100%;}
  .pager__right{width:100%;}
  .pager__select{width:100%;}
  .pager__mid{width:100%;}
}

@media (max-width: 980px){
  .filterbar{grid-template-columns: 1fr; }
  .filterbar .field.check{padding:0;}
  .item-row{grid-template-columns: 1fr;align-items:stretch;}
  .item-side{justify-content:space-between;flex-wrap:wrap;}
  .item-price{min-width:unset;text-align:left;}
  .item-actions{align-items:flex-start;}
}

/* Motion polish */
a, button, .btn, input, select{transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;}
@media (prefers-reduced-motion: reduce){
  a, button, .btn, input, select{transition:none!important;}
}


/* --- Pedidos --- */
.cart-wrap{ margin-top:16px; border-radius:20px; overflow:hidden; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); }
.cart-head, .cart-row{
  display:grid;
  grid-template-columns: minmax(320px, 1fr) 150px 120px 150px 48px;
  gap:12px;
  align-items:center;
}
.cart-head{
  padding:12px 14px;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.76);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.cart-list{ display:flex; flex-direction:column; }
.cart-row{
  padding:12px 14px;
  border-top:1px solid rgba(255,255,255,.08);
}
.cart-title{ font-weight:900; color: rgba(255,255,255,.95); }
.cart-meta{ margin-top:6px; display:flex; flex-wrap:wrap; gap:10px 14px; color: rgba(255,255,255,.72); font-size:13px; }
.cart-unit, .cart-sub{ font-weight:800; color: rgba(255,255,255,.90); text-align:right; }
.cart-qty input{
  width:90px; height:40px; border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(15,47,58,.55);
  color: rgba(255,255,255,.92);
  padding:0 10px;
}
.icon-btn{
  width:40px; height:40px; border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.86);
  cursor:pointer;
}

/* Cart column alignment */
.cart-head .cart-col.unit,
.cart-head .cart-col.sub{ text-align:right; }
.cart-head .cart-col.qty{ text-align:center; }
.cart-row .cart-unit,
.cart-row .cart-sub{ text-align:right; white-space:nowrap; }
.cart-row .cart-qty{ display:flex; justify-content:center; }
.cart-row .cart-del{ display:flex; justify-content:center; }
.cart-footer{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:14px;
  padding:14px;
  border-top:1px solid rgba(255,255,255,.10);
}
.pay-title{ font-weight:900; color: rgba(255,255,255,.92); margin-bottom:10px; }
.pay-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px; color: rgba(255,255,255,.86); }
.pay-grid label{ display:flex; gap:10px; align-items:center; padding:10px; border-radius:16px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); }
.pay-note{ margin-top:10px; color: rgba(255,255,255,.72); font-size:13px; }
.totals{ display:flex; flex-direction:column; gap:10px; }
.total-line{ display:flex; justify-content:space-between; align-items:center; padding:12px; border-radius:18px; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); color: rgba(255,255,255,.90); }
.cotizar{ color: rgba(255,255,255,.74); padding-left:6px; }
.cart-actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* Responsive */
@media (max-width: 940px){
  .item-row{ grid-template-columns: 1fr; }
  .item-price{ justify-content:flex-start; }
  .item-actions{ justify-content:flex-start; }
  .cart-head{ display:none; }
  .cart-row{ grid-template-columns: 1fr; gap:10px; }
  .cart-unit, .cart-sub{ text-align:left; }
  .cart-footer{ grid-template-columns: 1fr; }
  .pay-grid{ grid-template-columns: 1fr; }
}


/* Light cart variant (for light backgrounds) */
.cart-wrap--light{ background:#fff; border:1px solid rgba(11,31,42,.12); box-shadow:0 18px 44px rgba(0,0,0,.08); }
.cart-wrap--light .cart-head{ background:#f3f5f7; color: rgba(11,31,42,.55); border-bottom:1px solid rgba(11,31,42,.08); }
.cart-wrap--light .cart-row{ border-top:1px solid rgba(11,31,42,.08); }
.cart-wrap--light .cart-title{ color: var(--ink); }
.cart-wrap--light .cart-meta{ color: rgba(11,31,42,.64); }
.cart-wrap--light .cart-unit, .cart-wrap--light .cart-sub{ color: var(--ink); }
.cart-wrap--light .cart-qty input{ border:1px solid rgba(11,31,42,.18); background:#fff; color: var(--ink); }
.cart-wrap--light .icon-btn{ border:1px solid rgba(11,31,42,.18); background:#fff; color: rgba(11,31,42,.78); }
.cart-wrap--light .cart-footer{ border-top:1px solid rgba(11,31,42,.10); }
.cart-wrap--light .pay-title{ color: var(--ink); }
.cart-wrap--light .pay-note{ color: rgba(11,31,42,.60); }
.cart-wrap--light .total-line{ background:#f7f9fb; border:1px solid rgba(11,31,42,.10); color: var(--ink); }
.cart-wrap--light .cotizar{ color: rgba(11,31,42,.60); }

.pay-ico{
  display:inline-flex;
  width:30px; height:30px;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background: rgba(232,132,35,.12);
  border:1px solid rgba(232,132,35,.26);
  font-size:16px;
  line-height:1;
}
.cart-wrap--light .pay-grid{ color: var(--ink); }
.cart-wrap--light .pay-grid label{ background:#fff; border:1px solid rgba(11,31,42,.12); }
.cart-wrap--light .pay-grid input{ accent-color: var(--accent); }

/* Pedidos: mensaje editable */
.assist{
  margin-top: 18px;
  border-radius: 20px;
  padding: 18px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(11,31,42,.10);
  box-shadow: 0 18px 44px rgba(0,0,0,.08);
}
.assist-head h2{ margin:0 0 6px; font-size: 18px; }
.assist-head .muted{ margin:0 0 12px; }
.assist-text{
  width:100%;
  resize: vertical;
  min-height: 180px;
  border-radius: 16px;
  border: 1px solid rgba(11,31,42,.12);
  background: rgba(255,255,255,.86);
  padding: 14px 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 14px;
  line-height: 1.35;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}
.assist-actions{ display:flex; justify-content:flex-end; margin-top:10px; }

/* Pedidos: mensaje + detalle en columnas */
.assist-grid{
  display:grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 14px;
  align-items:start;
}
@media (max-width: 980px){
  .assist-grid{ grid-template-columns: 1fr; }
}
.assist-summary{
  margin-top: 18px;
  border-radius: 20px;
  padding: 18px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(11,31,42,.10);
  box-shadow: 0 18px 44px rgba(0,0,0,.08);
}
.summary-list{ display:flex; flex-direction:column; gap:10px; }
.summary-item{ display:flex; justify-content:space-between; gap:10px; font-size: 13px; color: rgba(11,31,42,.82); }
.summary-item strong{ color: var(--ink); font-weight: 800; }
.summary-label{ flex:1; min-width:0; }
.summary-right{ display:inline-flex; align-items:center; gap:8px; }
.summary-remove{
  width: 24px; height:24px; border-radius: 10px;
  border: 1px solid rgba(11,31,42,.16);
  background: rgba(255,255,255,.72);
  color: rgba(11,31,42,.72);
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition: transform .12s ease, background .12s ease, color .12s ease, border-color .12s ease;
}
.summary-remove:hover{ transform: translateY(-1px); background: rgba(242,140,40,.12); border-color: rgba(242,140,40,.28); color: var(--ink); }
.summary-remove:active{ transform: translateY(0); }

.summary-total{ display:flex; justify-content:space-between; align-items:center; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(11,31,42,.10); }
.summary-total strong{ font-size: 16px; }
.summary-hint{ margin-top: 10px; font-size: 12px; color: rgba(11,31,42,.62); }

/* Modal simple */
.modal{ position:fixed; inset:0; display:none; z-index: 9999; }
.modal.is-open{ display:block; }
.modal__backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.45); backdrop-filter: blur(2px); }
.modal__panel{
  position:relative;
  width:min(520px, calc(100% - 24px));
  margin: 18vh auto 0;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(11,31,42,.14);
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0,0,0,.30);
  padding: 18px;
}
.modal__panel h3{ margin:0 0 6px; }
.modal__panel .muted{ margin:0 0 14px; }
.modal__actions{ display:flex; gap:10px; flex-wrap:wrap; }


/* Toast (corner, success) */
.toast{
  position:fixed;
  top: 84px;
  right: 16px;
  left: auto;
  bottom: auto;
  display:flex;
  justify-content:flex-end;
  pointer-events:none;
  z-index: 9999;
}
.toast-card{
  pointer-events:auto;
  background: rgba(24, 140, 78, .94);
  color:#fff;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 18px 40px rgba(0,0,0,.25);
  border-radius:14px;
  padding:10px 12px;
  min-width: 220px;
  max-width: 420px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  transform: translateX(10px);
  opacity:0;
}
.toast.show .toast-card{transform: translateX(0); opacity:1;}
.toast-text{font-weight:800;}
.toast-actions{display:flex;gap:8px;flex-wrap:wrap;}
@media (max-width: 560px){
  .toast{ top:auto; bottom: 18px; left: 0; right: 0; justify-content:center; }
  .toast-card{ transform: translateY(10px); }
  .toast.show .toast-card{ transform: translateY(0); }
}


/* --- M² Enhancements v2: Cart badge + Carousel + Reveal + Image effects --- */
.cart-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px; height:42px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color:#fff;
  position:relative;
  text-decoration:none;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.cart-btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.26);
}
.cart-badge{
  position:absolute;
  top:-6px; right:-6px;
  min-width:20px;
  height:20px;
  padding:0 6px;
  border-radius:999px;
  background: var(--accent);
  color:#111;
  font-weight:800;
  font-size:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 10px 18px rgba(0,0,0,.28);
}

.mini-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:18px; height:18px;
  padding:0 6px;
  border-radius:999px;
  margin-left:8px;
  background: rgba(0,0,0,.18);
  color:#fff;
  font-weight:800;
  font-size:12px;
}

.fab-cart{
  position:fixed;
  right:18px;
  bottom:92px; /* above WhatsApp */
  width:54px; height:54px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.92);
  border:1px solid rgba(15,47,58,.14);
  box-shadow: 0 18px 40px rgba(0,0,0,.22);
  color: var(--ink);
  text-decoration:none;
  z-index: 999;
  transition: transform .2s ease, filter .2s ease;
}
.fab-cart:hover{ transform: translateY(-2px); filter: saturate(1.05); }
.fab-cart .fab-badge{
  position:absolute;
  top:-6px; right:-6px;
  min-width:20px; height:20px;
  padding:0 6px;
  border-radius:999px;
  background: var(--accent);
  color:#111;
  font-weight:900;
  font-size:12px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Hero: background images crossfade */
.hero-pro{
  background: none; /* overridden by bg images */
}
.hero-pro__bg{
  position:absolute;
  inset:0;
  z-index:0;
}
.hero-pro__bgvideo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter: brightness(1.08) saturate(1.06) contrast(1.06);
  transform: scale(1.02);
}
.hero-pro__bgimg--fallback{ display:none; }
.hero-pro__bgimg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transform: scale(1.16);
  transition: opacity 900ms ease, transform 900ms ease;
  filter: brightness(1.10) saturate(1.08) contrast(1.06);
}
.hero-pro__bgimg.is-active{
  opacity:1;
  transform: scale(1);
}

/* Phone: show the full centered mark in the hero banner (avoid cover over-zoom) */
@media (max-width: 720px){
  .hero-pro__bg::before{
    content:"";
    position:absolute;
    inset:-10%;
    background-image: url("../assets/images/m2_hero_banner_orange_spot_v2.jpg?v=20260227c");
    background-size: cover;
    background-position: 50% 30%;
    filter: blur(12px) brightness(.78) saturate(1.06);
    transform: scale(1.08);
  }
  .hero-pro__bgimg{
    object-fit: cover;
    object-position: 50% 30%;
    transform: none !important;
  }
}

/* Reveal */
.reveal{
  opacity:1;
  transform:none;
}
.has-reveal .reveal{
  opacity:0;
  transform: translateY(10px);
  transition: opacity 600ms ease, transform 600ms ease;
}
.has-reveal .reveal.reveal--in{
  opacity:1;
  transform: translateY(0);
}

/* Subtle hover polish for tiles/cards */
.tile, .card, .svc-card, .side-card{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tile:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(0,0,0,.14);
}
.tile-img{
  overflow:hidden;
}
.tile-img::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(0,0,0,.10));
  pointer-events:none;
}
.tile-img{
  position:relative;
}
.tile:hover .tile-img{
  filter: brightness(1.08) saturate(1.06) contrast(1.06);
}

/* Services carousel */
.page-banner--tall{ min-height: 56vh; }

.svc-carousel{
  position:relative;
  border-radius: 22px;
  overflow:hidden;
  border: 1px solid rgba(15,47,58,.10);
  box-shadow: 0 22px 60px rgba(0,0,0,.14);
  background: rgba(255,255,255,.66);
}

.svc-carousel__viewport{
  position:relative;
  min-height: 420px;
}

.svc-carousel__slide{
  position:absolute;
  inset:0;
  opacity:0;
  transform: translateY(8px);
  transition: opacity 650ms ease, transform 650ms ease;
}
.svc-carousel__slide.is-active{
  opacity:1;
  transform: translateY(0);
  z-index:2;
}

.svc-slide__bg{
  position:absolute;
  inset:0;
  background: var(--bg) center/cover no-repeat;
  background-image: var(--bg);
  filter: saturate(1.05) contrast(1.02);
  transform: scale(1.02);
}
.svc-carousel__slide::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 520px at 20% 20%, rgba(127,198,220,.26), transparent 60%),
    radial-gradient(900px 520px at 80% 25%, rgba(242,140,40,.16), transparent 60%),
    linear-gradient(180deg, rgba(10,28,34,.80), rgba(10,28,34,.52));
  z-index:1;
}

.svc-slide__card{
  position:relative;
  z-index:2;
  width: min(760px, calc(100% - 28px));
  margin: 42px auto;
  padding: 22px 22px 18px;
  border-radius: 18px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(255,255,255,.40);
  box-shadow: 0 20px 50px rgba(0,0,0,.22);
  backdrop-filter: blur(10px);
}

.svc-slide__top{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin-bottom: 8px;
}
.svc-pill{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(242,140,40,.16);
  color: #4a2c00;
  font-weight:800;
  font-size: 12px;
  border: 1px solid rgba(242,140,40,.24);
}
.svc-kicker{ color: rgba(0,0,0,.62); font-size: 13px; }

.svc-slide__card h3{
  font-size: 22px;
  margin: 6px 0 10px;
  color: var(--ink);
}
.svc-slide__card ul{
  list-style: none;
  padding:0;
  margin:0;
  display:grid;
  gap:8px;
}
.svc-slide__card li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  color: rgba(0,0,0,.66);
  font-size: 14px;
  line-height: 1.45;
}
.svc-slide__card li::before{
  content:"";
  width:8px; height:8px;
  margin-top:6px;
  border-radius: 999px;
  background: rgba(15,47,58,.70);
  flex: 0 0 auto;
}
.svc-slide__actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top: 14px;
}

.carousel-btn{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width:44px; height:44px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor:pointer;
  z-index:3;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.carousel-btn:hover{
  transform: translateY(-50%) scale(1.04);
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.34);
}
.carousel-btn.prev{ left: 14px; }
.carousel-btn.next{ right: 14px; }

.carousel-dots{
  position:absolute;
  left:50%;
  bottom: 14px;
  transform: translateX(-50%);
  display:flex;
  gap:8px;
  z-index:3;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.24);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(10px);
}
.carousel-dots .dot{
  width:9px; height:9px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.55);
  background: rgba(255,255,255,.18);
  cursor:pointer;
}
.carousel-dots .dot.is-active{
  background: var(--accent);
  border-color: rgba(255,255,255,.0);
}

/* Services: supporting grid + contact */
.svc-grid{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 980px){ .svc-grid{ grid-template-columns: 1fr; } }

.svc-card{
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(15,47,58,.10);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 16px 40px rgba(0,0,0,.10);
}
.svc-card h3{ margin-bottom: 6px; }
.svc-card p{ color: rgba(0,0,0,.62); margin-bottom: 10px; }
.svc-mini{ list-style: none; display:grid; gap:8px; }
.svc-mini li{ color: rgba(0,0,0,.66); font-size: 13px; }
.svc-mini li::before{
  content:"•";
  color: rgba(242,140,40,.90);
  margin-right: 8px;
}

/* Contact grid */
.contact-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 14px;
  align-items:start;
}
@media (max-width: 980px){ .contact-grid{ grid-template-columns: 1fr; } }

.contact-form{
  background: rgba(255,255,255,.80);
  border: 1px solid rgba(15,47,58,.10);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 16px 40px rgba(0,0,0,.10);
}
.contact-form .row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 620px){ .contact-form .row{ grid-template-columns: 1fr; } }
.contact-form .field{ display:grid; gap:6px; margin-bottom: 10px; }
.contact-form label{ font-size: 13px; color: rgba(0,0,0,.70); }
.contact-form input, .contact-form textarea{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(15,47,58,.14);
  background: rgba(255,255,255,.92);
  outline: none;
}
.contact-form input:focus, .contact-form textarea:focus{ border-color: rgba(242,140,40,.55); box-shadow: 0 0 0 4px rgba(242,140,40,.16); }
.contact-form .actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top: 6px; }
.contact-form .note{ margin-top: 10px; color: rgba(0,0,0,.58); font-size: 12px; }

.contact-side{ display:grid; gap: 14px; }
.side-card{
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(15,47,58,.10);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 16px 40px rgba(0,0,0,.10);
}
.side-card ul{ list-style: none; margin-top: 8px; display:grid; gap:8px; }
.side-card li{ color: rgba(0,0,0,.66); font-size: 13px; }
.side-card li::before{ content:"•"; color: rgba(127,198,220,.90); margin-right: 8px; }

/* Ferretería: improve filterbar button spacing on small screens */
@media (max-width: 620px){
  .filterbar-right{ flex-wrap:wrap; justify-content:flex-start; }
}

.pushbar-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:18px; height:18px;
  padding:0 6px;
  border-radius:999px;
  margin-left:8px;
  background: rgba(242,140,40,.90);
  color:#111;
  font-weight:900;
  font-size:12px;
}


/* ===== M² Enhancements v3 — Carousel + media cards ===== */

/* Cart badge polish (avoid overlap / keep contrast) */
.cart-badge{
  box-shadow: 0 8px 18px rgba(0,0,0,.22);
  border: 2px solid rgba(10,28,36,.85);
}
.cart-btn{ 
  background: rgba(0,0,0,.10);
  border-color: rgba(255,255,255,.22);
}
.cart-btn:hover{ background: rgba(0,0,0,.14); }

/* Home: 4-step carousel */
.work-carousel{
  margin-top: 18px;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 18px 60px rgba(0,0,0,.10);
  background: #0b1a1f;
  /* Prevent blend-mode elements (step number) from bleeding outside the clip */
  isolation: isolate;
}
.work-carousel__viewport{ overflow:hidden; border-radius: inherit; background:#06161c; }
.work-carousel__track{
  display:flex;
  width:100%;
  transform: translateX(0%);
  transition: transform 650ms cubic-bezier(.2,.7,.2,1);
}
.work-slide{
  position:relative;
  overflow: hidden;
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  height: clamp(240px, 34vw, 440px);
}
.work-slide__img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform: scale(1.02);
  transition: transform 650ms cubic-bezier(.2,.7,.2,1);
  filter: saturate(1.05) contrast(1.03);
}
.work-slide.is-active .work-slide__img{ transform: scale(1.0); }
.work-slide__overlay{
  position:absolute;
  inset: 0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:10px;
  padding: 26px;
  color:#fff;
  background:
    linear-gradient(90deg,
      rgba(15,47,58,.72) 0%,
      rgba(15,47,58,.60) 55%,
      rgba(15,47,58,.52) 100%),
    linear-gradient(180deg, rgba(0,0,0,.00) 10%, rgba(0,0,0,.58) 72%, rgba(0,0,0,.70) 100%);
}

.work-slide__num{
  position:absolute;
  top: 22px;
  right: 22px;
  font-size: clamp(64px, 9vw, 140px);
  font-weight: 900;
  line-height: 1;
  color: rgba(242,140,40,.84);
  text-shadow: 0 18px 40px rgba(0,0,0,.35);
  pointer-events:none;
  mix-blend-mode: screen;
}
.work-slide__kicker{
  display:inline-flex;
  align-self:flex-start;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(242,140,40,.92);
  color:#111;
  font-weight: 900;
  letter-spacing: .2px;
  font-size: 12px;
}
.work-slide h3{ margin:0; font-size: clamp(22px, 2.2vw, 34px); }
.work-slide p{ margin:0; max-width: 60ch; color: rgba(255,255,255,.88); }

.work-carousel__controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 12px 14px;
  background: rgba(255,255,255,.06);
  border-top: 1px solid rgba(255,255,255,.10);
}
.work-btn{
  width:40px; height:40px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  color:#fff;
  font-size: 22px;
  line-height: 1;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.work-btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.24);
}
.work-dots{
  display:flex;
  gap: 10px;
  align-items:center;
  justify-content:center;
  flex:1;
}
.work-dot{
  width: 10px; height: 10px;
  border-radius:999px;
  border: 0;
  background: rgba(255,255,255,.35);
  cursor:pointer;
}
.work-dot.is-active{
  background: rgba(242,140,40,.95);
  width: 26px;
}

/* Services: cards with image header */
.cards-media{ grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 1020px){ .cards-media{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px){ .cards-media{ grid-template-columns: 1fr; } }

.card-media{ overflow:hidden; }
.card-media__img{
  height: clamp(160px, 14vw, 190px);
  background-size: cover;
  background-position: center;

  /* Igual criterio que .fx-bw: color primero, luego se calma a gris */
  filter: grayscale(0) saturate(1.06) contrast(1.03) brightness(1.02);
  transition: filter 900ms ease, transform 350ms ease;
  will-change: filter, transform;
  animation: m2CalmToGray 2200ms ease 700ms both;
}

/* Ajuste fino de encuadre por imagen (servicios) */
.card-media__img.img-pos-engineering{ background-position: 70% 50%; }
.card-media__img.img-pos-support{ background-position: 35% 50%; }
@media (max-width: 640px){
  .card-media__img.img-pos-engineering{ background-position: 60% 50%; }
  .card-media__img.img-pos-support{ background-position: 40% 50%; }
}

.card-media:hover .card-media__img{
  filter: grayscale(0) saturate(1.08) contrast(1.03) brightness(1.06);
  transform: scale(1.02);
  animation: none;
}
@media (hover: none) and (pointer: coarse){
  .card-media:active .card-media__img,
  .card-media:focus-within .card-media__img{
    filter: grayscale(0) saturate(1.08) contrast(1.03) brightness(1.06);
    transform: scale(1.0);
    animation: none;
  }
}
.card-media .card-body{ padding-top: 16px; }

/* Steps with media */
.steps-media{ align-items: stretch; }
.step-media{
  overflow:hidden;
}
.step-img{
  height: 110px;
  border-radius: 16px;
  margin: 0 0 12px 0;
  background-size: cover;
  background-position: center;
  filter: saturate(1.05) contrast(1.02);
  border: 1px solid rgba(0,0,0,.06);
}
.step-media .step-n{
  margin-top: 6px;
}

/* Page banner (full-width with wave) */
.page-banner{
  position:relative;
  width:100%;
  border-radius: 0;
  overflow:hidden;
  margin: 0 0 22px;
  max-width: none;
  background-size: cover;
  background-position: center;
  min-height: 44vh;
  display:flex;
  align-items:flex-end;
}
.page-banner__overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 22% 28%, rgba(127,198,220,.22), transparent 62%),
    radial-gradient(circle at 78% 28%, rgba(242,140,40,.14), transparent 64%),
    linear-gradient(90deg, rgba(6,22,28,.86) 0%, rgba(6,22,28,.56) 55%, rgba(6,22,28,.34) 100%);
}
.page-banner__inner{
  position:relative;
  padding: 44px 18px 74px;
  color:#fff;
  width:100%;
}
.page-banner__inner h1{ margin: 10px 0 8px; font-size: clamp(34px, 4.0vw, 54px); letter-spacing:-0.02em;}
.page-banner__inner p{ margin: 0 0 16px; color: rgba(255,255,255,.86); max-width: 70ch; }

.page-banner::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height: 74px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath fill='%23f7f9fb' d='M0,64 C120,90 240,112 360,104 C480,96 600,60 720,50 C840,40 960,60 1080,74 C1200,88 1320,80 1440,66 L1440,120 L0,120 Z'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat:no-repeat;
  pointer-events:none;
}

@media (max-width: 720px){
  .page-banner{
    min-height: 280px; /* more stable on phones */
    background-position: 50% 40%;
  }
  .page-banner__inner{ padding: 28px 14px 60px; }
  .page-banner::after{ height: 62px; }
}

@media (max-width: 420px){
  .page-banner{ min-height: 250px; background-position: 50% 44%; }
}





/* =========================
   Cinema subtle FX (global)
   ========================= */
:root{
  --cinema-grain-url: url('../assets/images/noise.png');
}

/* Film grain + vignette (very subtle) */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:9999;
  opacity:.06;
  mix-blend-mode: overlay;
  background-image: var(--cinema-grain-url);
  background-repeat: repeat;
  background-size: 220px 220px;
}
body::after{
  content:"";
  position:fixed;
  inset:-40px;
  pointer-events:none;
  z-index:9998;
  background:
    radial-gradient(1200px 800px at 50% 35%, rgba(0,0,0,0) 45%, rgba(0,0,0,.16) 100%);
  opacity:.55;
}

/* Smooth hover interaction for cards / tiles */
.card, .tile{
  transition: transform .28s ease, box-shadow .28s ease;
}
.card:hover, .tile:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 55px rgba(0,0,0,.14);
}

/* Color -> calm gray (opt-in via .fx-bw on the image block)
   Objetivo UX: primera impresión con color y luego una transición lenta a gris,
   para transmitir calma sin perder identidad. */
.fx-bw{
  filter: grayscale(0) saturate(1.06) contrast(1.04) brightness(1.02);
  transition: filter 900ms ease, transform 350ms ease;
  position: relative;
  overflow: hidden;
  will-change: filter, transform;
  /* Arranca a color y "se calma" a gris de a poquito */
  animation: m2CalmToGray 2200ms ease 700ms both;
}
.fx-bw::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:0;
  transition: opacity 500ms ease;
  background:
    radial-gradient(600px 240px at 40% 35%, rgba(255,255,255,.16), rgba(255,255,255,0) 60%),
    radial-gradient(420px 220px at 70% 70%, rgba(232,132,35,.12), rgba(232,132,35,0) 65%);
  mix-blend-mode: screen;
}
.card:hover .fx-bw,
.tile:hover .fx-bw{
  filter: grayscale(0) saturate(1.08) contrast(1.03) brightness(1.06);
  transform: scale(1.02);
  animation: none;
}
.card:hover .fx-bw::after,
.tile:hover .fx-bw::after{
  opacity:1;
}

@keyframes m2CalmToGray{
  0%{ filter: grayscale(0) saturate(1.06) contrast(1.04) brightness(1.02); }
  100%{ filter: grayscale(.88) saturate(.90) contrast(1.06) brightness(.98); }
}

@media (prefers-reduced-motion: reduce){
  .fx-bw{ animation: none; }
}

/* Touch devices: tap/focus brings color back (no "hover") */
@media (hover: none) and (pointer: coarse){
  .card:active .fx-bw,
  .card:focus-within .fx-bw,
  .tile:active .fx-bw,
  .tile:focus-within .fx-bw{
    filter: grayscale(0) saturate(1.08) contrast(1.03) brightness(1.06);
    transform: scale(1.0);
    animation: none;
  }
  .card:active .fx-bw::after,
  .card:focus-within .fx-bw::after,
  .tile:active .fx-bw::after,
  .tile:focus-within .fx-bw::after{ opacity:1; }
}
  .card:active .fx-bw,
  .card:focus-within .fx-bw,
  .tile:active .fx-bw,
  .tile:focus-within .fx-bw{
    filter: grayscale(0) contrast(1.03) brightness(1.05);
    transform: scale(1.0);
  }
  .card:active .fx-bw::after,
  .card:focus-within .fx-bw::after,
  .tile:active .fx-bw::after,
  .tile:focus-within .fx-bw::after{ opacity:1; }
}
.fx-contain{
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}


/* Productos (categorías): alinear altura de imagen entre cards */
.grid--cats .card-img{ height:150px; }
@media (max-width: 640px){
  .grid--cats .card-img{ height:120px; }
}
.grid--cats .card--aspiracion .card-img{ height:150px !important; background-position: 52% 50% !important; background-color:#111; }
@media (max-width: 640px){
  .grid--cats .card--aspiracion .card-img{ height:120px !important; background-position: 52% 50% !important; }
}


/* Product tiles/cards: bring trimmed cutouts a bit closer */
.card--filtros .card-img.fx-contain,
.tile--filtros .tile-img.fx-contain{
  background-size: 94% auto !important;
  background-position: center 54% !important;
  background-repeat: no-repeat !important;
}

/* Aspiración: encuadre tipo “hero” (más estético, sin zoom agresivo) */
.card--aspiracion .card-img:not(.fx-contain),
.tile--aspiracion .tile-img:not(.fx-contain){
  background-size: cover !important;
  background-position: center 38% !important;
}

/* Aspiración (cutouts): mostrar el producto completo (sin recorte) */
.card--aspiracion .card-img.fx-contain,
.tile--aspiracion .tile-img.fx-contain{
  background-size: 86% auto !important;
  background-position: center 54% !important;
  background-repeat: no-repeat !important;
  background-color: rgba(255,255,255,.58);
}

.card--aspiracion .card-img{ height: 220px; position: relative; overflow: hidden; }
@media (max-width: 640px){
  .card--aspiracion .card-img{ height: 180px; }
}


/* Aspiración: subtle “pop” highlight (similar visual punch to abrasivos) */
.card--aspiracion .card-img::before,
.tile--aspiracion .tile-img::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.45;
  background:
    radial-gradient(320px 220px at 46% 40%, rgba(255,255,255,.22), rgba(255,255,255,0) 62%),
    radial-gradient(260px 200px at 70% 70%, rgba(242,140,40,.18), rgba(242,140,40,0) 66%);
  mix-blend-mode: screen;
  transition: opacity .35s ease, transform .35s ease;
}
.card--aspiracion:hover .card-img::before,
.tile--aspiracion:hover .tile-img::before{
  opacity:.75;
  transform: scale(1.02);
}

/* Better reading rhythm */
h1,h2,h3{ letter-spacing: -0.01em; }
p{ line-height: 1.55; }
.card-body p{ line-height: 1.55; }
.small{ line-height: 1.2; }

/* Fix “Pedidos” CTA visibility on dark band */
.pedido-actions .btn.ghost{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
  color: #fff;
}
.pedido-actions .btn.ghost:hover{
  background: rgba(255,255,255,.16);
}

/* Product detail spacing (avoid “pegado/superpuesto”) */
.page-banner{ margin: 10px 0 26px; }
.product-detail{ margin-top: 22px; }

/* Sponsors: make logos clearer inside circles */
.sponsor{
  width: 88px;
  height: 88px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,47,58,.12);
  box-shadow: 0 12px 26px rgba(0,0,0,.10);
}
.sponsor img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0;
  transform: scale(1.16);
  filter: none;
}
.sponsor:hover{
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 18px 36px rgba(0,0,0,.14);
}

@media (max-width: 520px){
  .sponsors-row{ gap: 14px; }
  .sponsor{ width: 76px; height: 76px; }
}

@media (max-width: 520px){
  .sponsor{ width: 76px; height: 76px; }
}

/* Make sponsor row wrap nicer */
.sponsors-row{ gap: 16px; }

/* Allow cutout images to breathe in cards */
.card-img.fx-contain{ background-color: rgba(255,255,255,.58); }
.tile-img.fx-contain{ background-color: rgba(255,255,255,.58); }

/* Mobile polish: Work carousel spacing */
@media (max-width: 520px){
  .work-slide__overlay{
    padding: 18px 16px;
    gap: 8px;
  }
  .work-slide p{
    max-width: 44ch;
    font-size: 14px;
  }
  .work-btn{ width:38px; height:38px; border-radius: 12px; }
  .work-carousel__controls{ padding: 10px 12px; }
}


/* Sponsor logos – slightly larger and better fill inside the circle */
.sponsor{
  width:88px;
  height:88px;
}

.sponsor img{
  transform:scale(1.15);
}
@media (max-width:640px){
  .sponsor{
    width:78px;
    height:78px;
  }
  .sponsor img{
    transform:scale(1.12);
  }
}


/* Carousel – avoid edge gaps */
.work-slide{ background:#06161c; }


/* Nosotros - diferenciales */
.section--soft{
  background: linear-gradient(180deg, rgba(8,28,34,.06), rgba(8,28,34,0));
}
.feature-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:16px;
  margin-top:18px;
}
.feature{
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(15,47,58,.12);
  border-radius: 18px;
  padding:16px 16px 14px;
  box-shadow: 0 16px 42px rgba(0,0,0,.10);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.feature h3{ margin:10px 0 6px; font-size: 1.05rem; }
.feature p{ margin:0; color: rgba(12,24,30,.78); }
.feature .ico{
  width:40px; height:40px;
  display:grid; place-items:center;
  border-radius: 12px;
  background: rgba(242,140,40,.14);
  color: rgba(242,140,40,.95);
  font-size: 20px;
}
@media (max-width: 900px){
  .feature-grid{ grid-template-columns: 1fr; }
  .feature{ padding:15px 15px 13px; }
}

.fx-cover{ background-size: cover; background-position:center; background-repeat:no-repeat; }

@media (max-width: 720px){
  /* Keep the home banner readable on phones (avoid over-zoom) */
  .hero-pro{
    min-height: 56vh;
    padding: 84px 0 36px;
    background-position: 50% 70%;
  }
}


/* Featured (Ferretería) */
.tile--featured{
  border: 1px solid rgba(242,140,40,.28);
  box-shadow: 0 18px 46px rgba(242,140,40,.14), 0 10px 30px rgba(0,0,0,.10);
  transform: translateY(-2px);
}
.tile--featured .tile-txt strong::after{
  content:"";
  display:block;
  width:42px;
  height:3px;
  border-radius:3px;
  margin-top:8px;
  background: rgba(242,140,40,.95);
}
.tile--featured:hover{
  transform: translateY(-4px) scale(1.01);
}

/* Featured product card */
.card--featured{
  border: 1px solid rgba(242,140,40,.28);
  box-shadow: 0 22px 54px rgba(242,140,40,.12), var(--shadow);
}
.card--featured .btn.primary{
  background: linear-gradient(180deg, rgba(242,140,40,1), rgba(213,110,22,1));
}

/* =========================================================
   Mobile polishing (v20.1)
   - Full-bleed banners inside .section on phones
   - Make the home hero mark larger on mobile (closer crop)
   - Show main nav links + cart on mobile (scrollable)
   ========================================================= */

/* Header: split links vs actions (works with updated header partials) */
.nav{ display:flex; align-items:center; gap:12px; }
.nav-links{ display:flex; align-items:center; gap:14px; color:#fff; }
.nav-links a{ text-decoration:none; opacity:.92; padding:8px 10px; border-radius:12px; white-space:nowrap; }
.nav-links a:hover{ background: rgba(255,255,255,.08); }
.nav-actions{ display:flex; align-items:center; gap:10px; }
.nav-actions .cart-btn{ padding:0 !important; opacity:1; }

@media (max-width: 900px){
  /* Keep quick access visible on mobile without breaking layout */
  .nav-links{
    display:flex !important;
    max-width: 56vw;
    overflow-x:auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav-links::-webkit-scrollbar{ display:none; }
  .nav-links a{ display:inline-flex !important; font-size: 13px; padding:7px 9px; }
  .cart-btn{ display:inline-flex !important; }
}

@media (max-width: 520px){
  .nav-links{ max-width: 52vw; }
}

@media (max-width: 420px){
  .nav-links{ max-width: 48vw; }
  .nav-links a{ padding:6px 8px; font-size:12.5px; }
}

@media (max-width: 720px){
  /* Banners inside section: match the full-bleed look of the main banner */
  .section > .page-banner{
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  /* Home hero: profesional en cualquier teléfono
     - menos "zoom" (el logo no queda gigante)
     - altura más contenida (no tapa el contenido de abajo) */
  .hero-pro{
    min-height: 48vh;
    min-height: 48svh;
    padding: 74px 0 34px;
  }

  /* Desactiva el "blur helper" (se usaba cuando el hero estaba en contain) */
  .hero-pro__bg::before{ display:none !important; }

  .hero-pro .hero-pro__bgimg{
    object-fit: cover;
    object-position: 50% 58%;
  }
  .hero-pro .hero-pro__bgimg.is-active{
    transform: scale(1.06) !important;
  }
}

/* Teléfonos muy chicos: un toque menos de zoom */
@media (max-width: 420px){
  .hero-pro{
    min-height: 44vh;
    min-height: 44svh;
  }
  .hero-pro .hero-pro__bgimg{
    object-position: 50% 60%;
  }
  .hero-pro .hero-pro__bgimg.is-active{
    transform: scale(1.04) !important;
  }
}

/* Tablets / "mobile viewport" (touch) que no entran en max-width:720 */
@media (hover: none) and (pointer: coarse) and (min-width: 721px) and (max-width: 1024px){
  .hero-pro{
    min-height: 54vh;
    min-height: 54svh;
    padding: 92px 0 40px;
  }
  .hero-pro .hero-pro__bgimg{
    object-fit: cover;
    object-position: 50% 60%;
  }
  .hero-pro .hero-pro__bgimg.is-active{
    transform: scale(1.04) !important;
  }
}


/* =========================================================
   Cards: color primero -> gris suave después (global)
   Aplica a cabeceras de cards que NO usan .fx-bw
   ========================================================= */
.card-img:not(.fx-bw),
.tile-img:not(.fx-bw),
.step-img:not(.fx-bw){
  filter: grayscale(0) saturate(1.05) contrast(1.03) brightness(1.02);
  transition: filter 900ms ease, transform 350ms ease;
  will-change: filter, transform;
  animation: m2CalmToGray 2200ms ease 700ms both;
}
.card:hover .card-img:not(.fx-bw),
.tile:hover .tile-img:not(.fx-bw),
.step-media:hover .step-img:not(.fx-bw){
  filter: grayscale(0) saturate(1.08) contrast(1.03) brightness(1.06);
  transform: scale(1.02);
  animation: none;
}
@media (hover: none) and (pointer: coarse){
  .card:active .card-img:not(.fx-bw),
  .card:focus-within .card-img:not(.fx-bw),
  .tile:active .tile-img:not(.fx-bw),
  .tile:focus-within .tile-img:not(.fx-bw),
  .step-media:active .step-img:not(.fx-bw),
  .step-media:focus-within .step-img:not(.fx-bw){
    filter: grayscale(0) saturate(1.08) contrast(1.03) brightness(1.06);
    transform: scale(1.0);
    animation: none;
  }
}

/* =========================================================
   Componentes "prolijos" (estética tipo estudio)
   ========================================================= */

.cta-strip{
  padding: 34px 0;
  background: linear-gradient(90deg, rgba(7,25,30,.92), rgba(12,38,46,.92));
  color:#fff;
}
.cta-strip .cta-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  padding:18px 18px;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.cta-strip h3{ margin:0; font-size: 20px; letter-spacing:-.2px; }
.cta-strip p{ margin:6px 0 0; opacity:.92; }
.cta-strip .cta-copy{ max-width: 720px; }
.cta-strip .cta-actions{ display:flex; gap:10px; flex-wrap:wrap; }

@media (max-width: 720px){
  .cta-strip .cta-inner{ flex-direction:column; align-items:stretch; }
  .cta-strip .cta-actions .btn{ width:100%; }
}

.faq{
  display:grid;
  gap:10px;
}
.faq details{
  border:1px solid rgba(0,0,0,.12);
  border-radius:14px;
  padding: 12px 14px;
  background:#fff;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
}
.faq summary{
  cursor:pointer;
  font-weight: 700;
  list-style:none;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+";
  float:right;
  font-weight:800;
  opacity:.8;
}
.faq details[open] summary::after{ content:"–"; }
.faq p{ margin:10px 0 0; color: rgba(0,0,0,.72); }

.section-kpis{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:14px;
  margin-top:14px;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}
.kpi{
  border:1px solid rgba(0,0,0,.10);
  border-radius:16px;
  padding:14px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 12px 28px rgba(0,0,0,.07);
  text-align: center;
}
.kpi strong{ display:block; font-size: 18px; }
.kpi span{ display:block; margin-top:6px; color: rgba(0,0,0,.66); font-size: 13px; }
@media (max-width: 720px){
  .section-kpis{ grid-template-columns: 1fr; max-width: 520px; }
}

/* ==============================
   PATCH 20260227c — Home polish
   ============================== */

/* HOME HERO: mostrar el banner completo (sin recorte del logo) */
.hero-pro.hero-pro--imageonly{
  min-height: clamp(240px, 36vw, 520px);
  padding: 0;
  justify-content: center;
}
.hero-pro.hero-pro--imageonly .hero-pro__bg{ background: #06161c; }
.hero-pro.hero-pro--imageonly .hero-pro__bg::before{
  content:"";
  position:absolute;
  inset:-12%;
  background-image: url("../assets/images/m2_hero_banner_orange_spot_v2.jpg?v=20260227c");
  background-size: cover;
  background-position: 50% 45%;
  filter: blur(16px) brightness(.68) saturate(1.05);
  transform: scale(1.08);
}
.hero-pro.hero-pro--imageonly .hero-pro__bgimg{
  object-fit: contain;
  object-position: 50% 50%;
  transform: none !important;
  filter: brightness(1.02) saturate(1.05) contrast(1.04);
}
@media (max-width: 720px){
  .hero-pro.hero-pro--imageonly{ min-height: 260px; }
  .hero-pro.hero-pro--imageonly .hero-pro__bg::before{ background-position: 50% 40%; filter: blur(14px) brightness(.66) saturate(1.04); }
}

/* Un poco menos de difuminado en el Home */
.hero-pro__overlay{
  background:
    radial-gradient(circle at 20% 25%, rgba(127,198,220,.18), transparent 60%),
    radial-gradient(circle at 80% 30%, rgba(242,140,40,.10), transparent 62%),
    linear-gradient(180deg, rgba(10,28,34,.22), rgba(10,28,34,.10));
}

/* BANNERS INTERNOS: altura más prolija (sin “romper” en desktop) */
.page-banner{
  min-height: clamp(220px, 34vh, 360px);
}
@media (max-width: 720px){
  .page-banner{ min-height: 280px; }
}

/* DIFERENCIALES: más aire y centrado */
.feature-grid{
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 28px;
}

/* QUÉ HACEMOS: alinear tiles con el texto a la izquierda */
@media (min-width: 901px){
  #que-hacemos .band-two{ align-items: center; }
  #que-hacemos .band-tiles{ margin-top: 6px; }
}

/* CTA “ABASTECER PLANTA” */
.plant-banner{
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  margin: 0 0 24px;
  box-shadow: 0 22px 60px rgba(0,0,0,.12);
}
.plant-banner__bg{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: 50% 45%;
  filter: saturate(1.04) contrast(1.02) brightness(.98);
  transform: scale(1.02);
}
.plant-banner__overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 22% 28%, rgba(127,198,220,.18), transparent 62%),
    radial-gradient(circle at 78% 28%, rgba(242,140,40,.12), transparent 64%),
    linear-gradient(90deg, rgba(6,22,28,.82) 0%, rgba(6,22,28,.56) 52%, rgba(6,22,28,.26) 100%);
}
.plant-banner__inner{
  position: relative;
  padding: 54px 18px 56px;
  color: #fff;
}
.plant-banner__inner h2{
  margin: 0 0 10px;
  font-size: clamp(26px, 3.1vw, 40px);
  letter-spacing: -0.02em;
}
.plant-banner__inner p{
  margin: 0 0 16px;
  color: rgba(255,255,255,.86);
  max-width: 72ch;
}
.plant-kpis{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
  max-width: 860px;
  margin: 18px 0 18px;
}
.plant-kpi{
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 16px;
  padding: 12px 14px;
}
.plant-kpi strong{ display:block; font-size: 16px; }
.plant-kpi span{ display:block; margin-top: 6px; color: rgba(255,255,255,.80); font-size: 13px; }
@media (max-width: 720px){
  .plant-banner{ border-radius: 16px; }
  .plant-banner__inner{ padding: 34px 14px 38px; }
  .plant-kpis{ grid-template-columns: 1fr; }
}

/* CTA PLANTA: tarjeta sutil hacia Ferretería industrial */
.plant-suggest{
  display:block;
  max-width: 860px;
  margin: 18px 0 18px;
  text-decoration:none;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 18px;
  padding: 14px 16px;
  box-shadow: 0 14px 40px rgba(0,0,0,.16);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.plant-suggest:hover{ transform: translateY(-1px); background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.26); }
.plant-suggest__kicker{ font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.78); }
.plant-suggest__title{ margin-top: 6px; font-size: 18px; font-weight: 900; }
.plant-suggest__text{ margin-top: 6px; color: rgba(255,255,255,.86); max-width: 72ch; }
.plant-suggest__cta{ margin-top: 10px; display:inline-block; font-weight: 800; color: #fff; }

/* CÓMO TRABAJAMOS: mostrar imagen completa en cada slide (sin recorte) */
.work-slide{ background:#06161c; }
.work-slide::before{
  content:"";
  position:absolute;
  inset:-12%;
  background-image: var(--work-bg);
  background-size: cover;
  background-position: 50% 45%;
  filter: blur(18px) brightness(.62) saturate(1.05);
  transform: scale(1.08);
  z-index:0;
}
.work-slide__img{
  position:relative;
  z-index:1;
  object-fit: contain;
  transform:none !important;
}
.work-slide__overlay{ z-index:2; }

/* PARTNERS (Home): logos más legibles (no recortados) */
#partners .sponsors-row{ gap: 14px; }
#partners .sponsor{
  /* IMPORTANT: evitar que Flexbox “achique” los ítems (eso fue lo que los convirtió en barritas) */
  flex: 0 0 auto;
  width: 128px;
  height: 76px;
  border-radius: 16px;
  padding: 10px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,47,58,.10);
  box-shadow: 0 14px 34px rgba(0,0,0,.10);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
#partners .sponsor:hover{ transform: translateY(-1px); border-color: rgba(15,47,58,.16); box-shadow: 0 18px 44px rgba(0,0,0,.12); }

/* Mantener logos “como estaban” (sin blanquear ni volverlos fantasma) */
#partners .sponsor img{ width:100%; height:100%; object-fit: contain; filter: none; opacity: 1; }

#partners .sponsor--institutional{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding: 10px 8px;
  text-align:center;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,249,250,.94));
}
#partners .sponsor--institutional--alt{
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(252,246,239,.96));
}
#partners .sponsor__m2{
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex: 0 0 auto;
  margin: 0 auto;
}
#partners .sponsor__caption{
  display:block;
  max-width: 58px;
  margin: 0 auto;
  font-size: 8.5px;
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: .01em;
  color: rgba(11,31,42,.82);
  text-transform: uppercase;
  text-wrap: balance;
}
#partners .sponsor__mark{
  display:block;
  font-size: 19px;
  line-height: 1;
  font-weight: 900;
  color: rgba(11,31,42,.88);
  margin: 0 auto;
}

/* PARTNERS: carrusel (5 visibles en desktop) */
#partners .sponsor-carousel{ display:grid; grid-template-columns: 44px 1fr 44px; gap: 10px; align-items:center; }
#partners .sponsor-nav{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(15,47,58,.12);
  background: rgba(255,255,255,.82);
  display:grid;
  place-items:center;
  cursor:pointer;
  box-shadow: 0 12px 28px rgba(0,0,0,.10);
  color: rgba(11,31,42,.86);
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  transition: transform .14s ease, background .14s ease, border-color .14s ease;
}
#partners .sponsor-nav:hover{ transform: translateY(-1px); background:#fff; border-color: rgba(15,47,58,.18); }
#partners .sponsor-nav:active{ transform: translateY(0); }
#partners .sponsor-nav:focus-visible{ outline: 3px solid rgba(232,132,35,.22); outline-offset: 2px; }

#partners .sponsor-viewport{
  width: 100%;
  max-width: 720px; /* ~5 cards visibles */
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

/* sutil “fade” en bordes para reforzar el movimiento */
#partners .sponsor-viewport::before,
#partners .sponsor-viewport::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width: 46px;
  pointer-events:none;
  z-index: 2;
}
#partners .sponsor-viewport::before{ left:0; background: linear-gradient(90deg, rgba(255,255,255,.70), rgba(255,255,255,0)); }
#partners .sponsor-viewport::after{ right:0; background: linear-gradient(270deg, rgba(255,255,255,.70), rgba(255,255,255,0)); }

#partners .sponsor-track{ flex-wrap: nowrap; justify-content:flex-start; will-change: transform; }

/* si no hace falta carrusel (pocas marcas), se esconden flechas */
#partners .sponsor-carousel.is-static{ grid-template-columns: 1fr; }
#partners .sponsor-carousel.is-static .sponsor-nav{ display:none; }

@media (max-width: 980px){
  #partners .sponsor-viewport::before,
  #partners .sponsor-viewport::after{ width: 34px; }
  #partners .sponsor-viewport{ max-width: 560px; } /* ~4 cards */
}

@media (max-width: 760px){
  #partners .sponsor-viewport{ max-width: 420px; } /* ~3 cards */
}

@media (max-width: 520px){
  #partners .sponsor-viewport{ max-width: 290px; } /* ~2 cards */
}

@media (prefers-reduced-motion: reduce){
  #partners .sponsor-track{ transition:none !important; }
}

/* NUESTROS INICIOS: imagen + texto al costado */
.inicios-grid{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 16px;
  align-items: stretch;
}
.inicios-media{
  min-height: 340px;
  border-radius: 18px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 18px 48px rgba(0,0,0,.12);
  border: 1px solid rgba(0,0,0,.06);
}
.inicios-copy{
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(15,47,58,.12);
  border-radius: 18px;
  padding: 16px 16px 14px;
  box-shadow: 0 18px 48px rgba(0,0,0,.10);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.inicios-copy h3{ margin: 0 0 10px; }
.inicios-copy p{ margin: 0 0 10px; color: rgba(12,24,30,.78); }
@media (max-width: 900px){
  .inicios-grid{ grid-template-columns: 1fr; }
  .inicios-media{ min-height: 220px; }
}

/* PEDIDOS: adjuntos (ganchito) */
.pedido-attach{ margin-top: 12px; }
.attach-label{ display:block; font-weight:700; margin: 0 0 6px; color: rgba(255,255,255,.92); }
.attach-input{
  width: 100%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px dashed rgba(255,255,255,.32);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.92);
}
.attach-help{ margin-top: 8px; color: rgba(255,255,255,.72); font-size: 12.5px; }
.attach-files{ margin-top: 10px; display:flex; flex-wrap:wrap; gap:8px; }
.attach-chip{
  display:inline-flex;
  max-width: 100%;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.90);
  font-size: 12px;
}
.attach-chip.attach-error{
  border-color: rgba(242,140,40,.45);
  background: rgba(242,140,40,.18);
  color: rgba(255,255,255,.94);
}


/* Footer: redes */
.footer-social{ display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; }
.footer-social .social{
  width:38px; height:38px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color:#fff;
  text-decoration:none;
}
.footer-social .social:hover{ background: rgba(255,255,255,.12); }
.footer-social svg{ display:block; }

/* ==============================
   PATCH 20260227d — Header + Hero + Rhythm
   ============================== */

/* Header: logo left, links centered (desktop), search right. */
.header.header--v2{
  display:grid;
  /* auto | flexible center | auto : evita “vacío” enorme entre menú y buscador */
  grid-template-columns: auto 1fr auto;
  align-items:center;
  justify-items:stretch;
  gap: 10px;
}
.header.header--v2 .brand{ justify-self:start; display:flex; align-items:center; }
.header.header--v2 .nav{ justify-self:center; justify-content:center; }
.header.header--v2 .nav-links{ justify-content:center; gap: 22px; }
.header.header--v2 .nav-links a{ padding:8px 12px; line-height:1; }
.header.header--v2 .nav-actions{
  justify-self:end;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap: 10px;
}

/* Search box */
.nav-searchbox{ position:relative; display:flex; align-items:center; }
.nav-searchbox__form{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
}
.nav-searchbox__input{
  width: clamp(150px, 16vw, 220px);
  border:none;
  outline:none;
  background: transparent;
  color:#fff;
  font-weight: 650;
  font-size: 14px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 2px 6px;
  -webkit-text-fill-color: #fff;
  caret-color: #fff;
}
.nav-searchbox__input::placeholder{ color: rgba(255,255,255,.68); font-weight:600; }
.nav-searchbox__btn{
  width:34px; height:34px;
  border:none;
  border-radius: 12px;
  background: rgba(255,255,255,.10);
  color:#fff;
  cursor:pointer;
}
.nav-searchbox__btn:hover{ background: rgba(255,255,255,.14); }

/* Hide mobile toggle on desktop */
.nav-searchbox__toggle{ display:none; }
.menu-btn{ display:none; }

/* Mobile: hide centered nav, show menu + search toggle */
@media (max-width: 900px){
  .header.header--v2{ grid-template-columns: auto 1fr auto; }
  .header.header--v2 .nav{ display:none; }
  .menu-btn{ display:inline-grid; place-items:center; }

  .nav-searchbox__toggle{ display:inline-grid; place-items:center; }
  .nav-searchbox__form{ display:none; }

  .nav-searchbox.is-open .nav-searchbox__form{
    display:flex;
    position:absolute;
    top: calc(100% + 10px);
    right: 0;
    width: min(92vw, 360px);
    padding: 10px 10px;
    background: rgba(10,28,34,.92);
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 22px 60px rgba(0,0,0,.38);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 1400;
  }
  .nav-searchbox.is-open .nav-searchbox__input{ width: 100%; }
}

/* Mobile narrow: el buscador abierto debe quedar centrado y ancho completo (evita que el texto quede fuera de vista) */
@media (max-width: 560px){
  .nav-searchbox.is-open .nav-searchbox__form{
    left: 12px;
    right: 12px;
    width: auto;
  }
}

/* Mobile menu panel (dropdown, not pushbar) */
.menu-panel{
  position:absolute;
  top: calc(100% + 10px);
  right: 14px;
  width: min(92vw, 320px);
  padding: 10px;
  border-radius: 18px;
  background: rgba(10,28,34,.92);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 22px 60px rgba(0,0,0,.38);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 1400;
}
.menu-link{
  display:block;
  padding: 12px 12px;
  border-radius: 14px;
  text-decoration:none;
  color:#fff;
  opacity: .92;
  font-weight: 750;
}
.menu-link:hover{ background: rgba(255,255,255,.08); opacity:1; }

/* HERO: más chico y sin blur lateral fuerte */
.hero-pro.hero-pro--imageonly{
  height: clamp(210px, 31.25vw, 380px);
  min-height: unset;
  padding: 0;
  justify-content: center;
}
@media (max-width: 720px){
  .hero-pro.hero-pro--imageonly{ height: clamp(170px, 48vw, 240px); }
}
.hero-pro.hero-pro--imageonly .hero-pro__bg{ background: #06161c; }
.hero-pro.hero-pro--imageonly .hero-pro__bg::before{ display:none; }
.hero-pro.hero-pro--imageonly .hero-pro__bgimg{
  object-fit: cover !important;
  object-position: 50% 50% !important;
  transform: none !important;
  filter: brightness(1.01) saturate(1.02) contrast(1.02);
}
.hero-pro.hero-pro--imageonly .hero-pro__bgimg.is-active{ transform:none !important; }

.hero-pro.hero-pro--imageonly .hero-pro__overlay{ background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.18)); }

/* Caption del hero (nombre de empresa visible sin “cartel”) */
.hero-pro__caption{
  position:absolute;
  inset: auto 0 18px 0;
  z-index: 2;
  pointer-events:none;
}
.hero-pro__caption-inner{
  text-align:center;
  color:#fff;
  text-shadow: 0 18px 40px rgba(0,0,0,.45);
}
.hero-pro__caption-title{
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: clamp(18px, 2.2vw, 26px);
}
.hero-pro__caption-sub{
  margin-top: 6px;
  font-weight: 650;
  font-size: 13px;
  color: rgba(255,255,255,.84);
}

/* Menos “aire muerto” entre secciones (sin apretarlas) */
#que-hacemos.band{ padding-bottom: clamp(40px, 5vw, 56px); }
#diferenciales.band{ padding-top: clamp(38px, 4.8vw, 54px); }

/* Banners internos un poco más bajos */
.page-banner{ min-height: clamp(220px, 32vh, 340px); }
@media (max-width: 720px){
  .page-banner{ min-height: 260px; }
}

/* CTA planta: centrado y sin botones inferiores */
.plant-banner__inner{ text-align:center; }
.plant-banner__inner p{ margin-left:auto; margin-right:auto; }
.plant-suggest{ margin-left:auto; margin-right:auto; max-width: 780px; }

/* Nota de búsqueda en Productos */
.search-note{
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(15,47,58,.12);
  color: rgba(0,0,0,.74);
}

/* PATCH 20260227e — Hero image with embedded text: no extra caption */
.hero-pro__caption{ display:none !important; }

/* Tile filtros: imagen ya sin marca — mantener nítido */
.tile--filtros .tile-img{ filter: grayscale(1) contrast(1.05) brightness(1.02); }

/* PATCH 20260227e2 — HERO (banner 2048×640): altura correcta y sin blur extra */
.hero-pro.hero-pro--imageonly{
  height: clamp(220px, 31.25vw, 420px);
}
@media (max-width: 720px){
  .hero-pro.hero-pro--imageonly{ height: clamp(190px, 56vw, 320px); }
}
.hero-pro.hero-pro--imageonly .hero-pro__bg{ background: radial-gradient(1200px 520px at 50% 35%, rgba(255,255,255,.06), rgba(6,22,28,.88)); }
.hero-pro.hero-pro--imageonly .hero-pro__bg::before{ display:none !important; }
.hero-pro.hero-pro--imageonly .hero-pro__bgimg{ object-fit: contain; object-position: center; filter:none !important; transform:none !important; }
.hero-pro.hero-pro--imageonly .hero-pro__overlay{ background: linear-gradient(180deg, rgba(0,0,0,.00), rgba(0,0,0,.10)); }

/* =========================================================
   PATCH 20260227f — Banners 2026 + nav centrado
   - Home hero: usar 2560×900 (logo centrado) + blur lateral más suave
   - Carrusel: usa 2560×800 (lo setea index.html)
   - Banners internos: usa 1920×700 (lo setean las páginas)
   - Header: nav centrado al viewport (y leve corrimiento a la derecha)
   ========================================================= */

:root{ --nav-center-offset: 12px; }

@media (min-width: 901px){
  /* Nav centrado al viewport (no al espacio entre logo y buscador) */
  .header.header--v2{ grid-template-columns: 1fr auto 1fr; }
  .header.header--v2 .brand{ justify-self:start; }
  .header.header--v2 .nav{ justify-self:center; transform: translateX(var(--nav-center-offset)); }
  .header.header--v2 .nav-actions{ justify-self:end; }
}

/* Home hero (image-only): mantener la imagen completa + blur lateral leve */
.hero-pro.hero-pro--imageonly::before,
.hero-pro.hero-pro--imageonly::after{ display:none !important; }

.hero-pro.hero-pro--imageonly .hero-pro__bg{ position:absolute; inset:0; }

.hero-pro.hero-pro--imageonly .hero-pro__bg::before{
  content:"";
  position:absolute;
  inset:-12%;
  background-image: url("../assets/images/m2_banner_home_2560x900.png?v=20260227f");
  background-size: cover;
  background-position: 50% 50%;
  filter: blur(10px) brightness(.74) saturate(1.02);
  transform: scale(1.08);
  display:block !important;
}

.hero-pro.hero-pro--imageonly .hero-pro__bgimg{
  position:relative;
  z-index:1;
  object-fit: contain;
  object-position: center;
}

/* Overlay más liviano para que el logo del banner quede limpio */
.hero-pro.hero-pro--imageonly .hero-pro__overlay{
  background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.12));
}

/* Banners internos: overlay menos invasivo en el centro (logo más visible) */
.page-banner{ background-position: 50% 44%; }
.page-banner__overlay{
  background:
    radial-gradient(circle at 50% 32%, rgba(255,255,255,.10), transparent 62%),
    radial-gradient(circle at 22% 30%, rgba(127,198,220,.18), transparent 64%),
    radial-gradient(circle at 78% 30%, rgba(242,140,40,.12), transparent 64%),
    linear-gradient(90deg, rgba(6,22,28,.82) 0%, rgba(6,22,28,.48) 52%, rgba(6,22,28,.18) 78%, rgba(6,22,28,.06) 100%);
}

/* =========================================================
   PATCH 20260227g — Ajustes finos de banners (sin blur visible)
   - Home hero: eliminar “difuminado” lateral y usar COVER real
   - Banners internos: más compactos + el logo del banner no queda tapado
   ========================================================= */

/* HOME HERO: sin blur helper, sin transición entre 2 fotos */
.hero-pro.hero-pro--imageonly .hero-pro__bg::before{ display:none !important; }
.hero-pro.hero-pro--imageonly .hero-pro__bg{ background:#06161c !important; }
.hero-pro.hero-pro--imageonly .hero-pro__bgimg{
  object-fit: cover !important;
  object-position: 50% 50% !important;
  filter: none !important;
  transform: none !important;
}
@media (max-width: 720px){
  .hero-pro.hero-pro--imageonly .hero-pro__bg::before{ display:none !important; }
  .hero-pro.hero-pro--imageonly .hero-pro__bgimg{ object-fit: cover !important; object-position: 50% 50% !important; }
}

/* BANNERS INTERNOS: más chicos + contenido limitado a la izquierda */
.page-banner{
  min-height: clamp(210px, 26vh, 310px);
  background-position: 60% 52%;
}
.page-banner__inner{ padding: 34px 18px 58px; }
.page-banner::after{ height: 56px; }

/* Evita que el título/CTA invadan el centro donde está el logo del banner */
.page-banner__inner > *{ max-width: 560px; }

/* Overlay: fuerte a la izquierda (texto legible) y liviano al centro/derecha (logo visible) */
.page-banner__overlay{
  background:
    radial-gradient(circle at 58% 34%, rgba(255,255,255,.16), transparent 60%),
    radial-gradient(circle at 18% 30%, rgba(127,198,220,.18), transparent 62%),
    radial-gradient(circle at 78% 28%, rgba(242,140,40,.12), transparent 64%),
    linear-gradient(90deg, rgba(6,22,28,.86) 0%, rgba(6,22,28,.54) 38%, rgba(6,22,28,.22) 64%, rgba(6,22,28,.08) 100%);
}

@media (max-width: 720px){
  .page-banner{ min-height: 240px; background-position: 58% 46%; }
  .page-banner__inner{ padding: 26px 14px 54px; }
  .page-banner::after{ height: 46px; }
  .page-banner__inner > *{ max-width: none; }
}



/* =========================================================
   PATCH 20260227h — HERO sin blur + marca en HTML + banners sin recorte
   - Home: fondo limpio (m2_hero_real_full) + logo/texto como overlay
   - Internas: fondo limpio + watermark de logo (sin que se corte)
   - Header: logo apenas más arriba
   ========================================================= */

/* Logo del header: subir apenas para alinear visualmente */
.brand-logo{ margin-top: -3px; }

/* HOME HERO: sin pseudo-blur, imagen a COVER real */
.hero-pro.hero-pro--imageonly{
  min-height: clamp(360px, 34vw, 660px);
}
@media (max-width: 720px){
  .hero-pro.hero-pro--imageonly{ min-height: clamp(260px, 68vw, 460px); }
}
.hero-pro.hero-pro--imageonly .hero-pro__bg{ background:#06161c !important; }
.hero-pro.hero-pro--imageonly .hero-pro__bg::before{
  content:none !important;
  display:none !important;
  background-image:none !important;
}
.hero-pro.hero-pro--imageonly .hero-pro__bgimg{
  object-fit: cover !important;
  object-position: 50% 52% !important;
  filter: none !important;
}

/* Overlay del hero: presente pero sutil (no ensucia la foto) */
.hero-pro.hero-pro--home .hero-pro__overlay{
  background:
    radial-gradient(circle at 22% 26%, rgba(127,198,220,.10), transparent 60%),
    radial-gradient(circle at 78% 28%, rgba(242,140,40,.08), transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.14));
}

/* Marca centrada en el Home (logo + texto) */
.hero-brand{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -46%);
  z-index: 3;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 14px;
  text-align:center;
  pointer-events:none;
}
.hero-brand__logo{
  width: clamp(140px, 12vw, 210px);
  height:auto;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.48));
}
.hero-brand__line{
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-shadow: 0 12px 30px rgba(0,0,0,.55);
}
.hero-brand__line--top{ font-size: clamp(32px, 3.9vw, 60px); color:#fff; }
.hero-brand__line--bottom{ font-size: clamp(28px, 3.5vw, 54px); color:#fff; }
.hero-brand__line--bottom .accent{ color: var(--accent); }

@media (max-width: 720px){
  .hero-brand{ transform: translate(-50%, -50%); gap: 10px; }
  .hero-brand__logo{ width: clamp(120px, 28vw, 170px); }
}

/* BANNERS INTERNOS (solo los que tienen el fondo institucional) */
.page-banner.page-banner--m2{
  min-height: clamp(240px, 26vh, 360px);
  background-position: 50% 56% !important;
}
@media (max-width: 720px){
  .page-banner.page-banner--m2{ min-height: 280px; background-position: 50% 52% !important; }
}

/* Overlay: oscuro a la izquierda, liviano al centro para que el watermark se lea */
.page-banner.page-banner--m2 .page-banner__overlay{
  background:
    radial-gradient(circle at 62% 36%, rgba(255,255,255,.12), transparent 62%),
    radial-gradient(circle at 18% 30%, rgba(127,198,220,.18), transparent 62%),
    radial-gradient(circle at 78% 28%, rgba(242,140,40,.12), transparent 64%),
    linear-gradient(90deg, rgba(6,22,28,.88) 0%, rgba(6,22,28,.55) 40%, rgba(6,22,28,.22) 66%, rgba(6,22,28,.10) 100%);
}

/* Watermark del logo (no se corta porque es pseudo-elemento, no parte del fondo) */
.page-banner.page-banner--m2::before{
  content:"";
  position:absolute;
  z-index: 1;
  left: 62%;
  top: 48%;
  transform: translate(-50%, -50%);
  width: clamp(120px, 12vw, 200px);
  aspect-ratio: 1/1;
  background: url("../assets/images/logo-m2-white-transparent.png") center/contain no-repeat;
  opacity: .92;
  filter: drop-shadow(0 18px 36px rgba(0,0,0,.46));
  pointer-events:none;
}

/* Asegura que el contenido quede por encima del watermark */
.page-banner.page-banner--m2 .page-banner__inner{ position:relative; z-index: 2; }

/* PATCH 20260227i — micro ajustes finos (home logo + carrusel + dropdown) */

/* Header: logo apenas más arriba */
.brand-logo{ margin-top: -3px; }

/* Home: logo un poco más cerca del texto + mejor legibilidad de “MÉTODOS” */
.hero-brand{ gap: 10px; }
.hero-brand__logo{ margin-bottom: -4px; }
.hero-brand__text{
  padding: 10px 16px;
  border-radius: 18px;
  background: rgba(6,22,28,.20);
  box-shadow: 0 18px 44px rgba(0,0,0,.18);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.hero-brand__line--bottom .accent{
  text-shadow: 0 14px 30px rgba(0,0,0,.70);
  -webkit-text-stroke: 1px rgba(0,0,0,.14);
}

/* Carrusel: sin fondo difuminado “doble” — imagen full-cover, encuadre estable */
.work-slide::before{ display:none !important; }
.work-slide__img{
  object-fit: cover !important;
  object-position: 50% 52% !important;
  transform: scale(1.02) !important;
  transition: transform 650ms cubic-bezier(.2,.7,.2,1) !important;
}
.work-slide.is-active .work-slide__img{ transform: scale(1.0) !important; }

/* Overlay del carrusel: deja ver más foto a la derecha */
.work-slide__overlay{
  background:
    linear-gradient(90deg,
      rgba(15,47,58,.78) 0%,
      rgba(15,47,58,.64) 42%,
      rgba(15,47,58,.28) 72%,
      rgba(15,47,58,.10) 100%),
    linear-gradient(180deg, rgba(0,0,0,.00) 8%, rgba(0,0,0,.50) 72%, rgba(0,0,0,.68) 100%);
}

/* Resultados extra del buscador (Productos + Ferretería + Servicios) */
.search-extras{
  margin-top: 12px;
  display: grid;
  gap: 12px;
}
.search-extra{
  padding: 14px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(15,47,58,.12);
  box-shadow: 0 14px 34px rgba(0,0,0,.08);
}
.search-extra h3{ margin:0 0 8px; font-size: 16px; }
.search-extra .muted{ color: rgba(0,0,0,.62); margin: 0 0 10px; }
.search-extra ul{ margin:0; padding-left: 18px; }
.search-list{ list-style: none; padding-left:0 !important; }
.search-list li{ padding: 8px 0; border-bottom: 1px solid rgba(0,0,0,.06); }
.search-list li:last-child{ border-bottom:none; }
.search-list .meta{ display:block; margin-top: 2px; color: rgba(0,0,0,.62); font-size: 13px; }


/* PATCH 20260227j — HERO sin recuadro + marca más compacta + tiles filtros mejor encuadradas */

/* Quita el recuadro gris del home (la marca queda “flotando” limpia) */
.hero-brand__text{
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Compacta un poco el conjunto (logo + texto más cerca) */
.hero-brand{ gap: 8px !important; transform: translate(-50%, -48%) !important; }
.hero-brand__logo{
  width: clamp(125px, 10.5vw, 190px) !important;
  margin-bottom: -8px !important;
}

/* Tipografía más nítida (sin caja, con sombra/stroke sutil) */
.hero-brand__line{
  letter-spacing: .045em !important;
  text-shadow:
    0 2px 0 rgba(0,0,0,.20),
    0 16px 40px rgba(0,0,0,.58) !important;
  -webkit-text-stroke: 1px rgba(0,0,0,.18);
}
.hero-brand__line--top{
  -webkit-text-stroke: 1px rgba(0,0,0,.22);
}
.hero-brand__line--bottom .accent{
  text-shadow:
    0 2px 0 rgba(0,0,0,.20),
    0 18px 44px rgba(0,0,0,.68) !important;
  -webkit-text-stroke: 1px rgba(0,0,0,.26) !important;
}

@media (max-width: 720px){
  .hero-brand{ gap: 6px !important; transform: translate(-50%, -50%) !important; }
  .hero-brand__logo{ width: clamp(112px, 26vw, 160px) !important; margin-bottom: -6px !important; }
}

/* Tiles/ cards de Filtros: encuadre más “productivo” (sin ese recorte raro) */
.tile--filtros .tile-img{
  background-repeat: no-repeat !important;
  background-size: 150% auto !important; /* zoom suave para que se vea el producto y no tanto fondo */
  background-position: 50% 62% !important;
}
.card--filtros .card-img{
  background-repeat: no-repeat !important;
  background-size: 140% auto !important;
  background-position: 50% 60% !important;
}



/* PATCH 20260227k — Home hero “más cerca”, tipografía más clara + intro splash tipo diapositiva */

/* Zoom suave del fondo del hero para que la marca se sienta más cerca */
.hero-pro.hero-pro--home .hero-pro__bgimg{
  transform: scale(1.07) !important;
  object-position: 50% 50% !important;
}

/* Marca del home: un poco más grande y compacta */
.hero-brand{
  gap: 6px !important;
  transform: translate(-50%, -47%) !important;
}
.hero-brand__logo{
  width: clamp(150px, 13.2vw, 235px) !important;
  margin-bottom: -10px !important;
}
.hero-brand__line{
  letter-spacing: .05em !important;
  text-shadow:
    0 2px 0 rgba(0,0,0,.22),
    0 18px 46px rgba(0,0,0,.62) !important;
  -webkit-text-stroke: 1px rgba(0,0,0,.20);
}
.hero-brand__line--top{ font-size: clamp(36px, 4.3vw, 68px) !important; }
.hero-brand__line--bottom{ font-size: clamp(32px, 3.9vw, 60px) !important; }
.hero-brand__line--bottom .accent{
  -webkit-text-stroke: 1px rgba(0,0,0,.26) !important;
}

@media (max-width: 720px){
  .hero-pro.hero-pro--home .hero-pro__bgimg{ transform: scale(1.04) !important; }
  .hero-brand{ gap: 6px !important; transform: translate(-50%, -50%) !important; }
  .hero-brand__logo{ width: clamp(130px, 30vw, 185px) !important; margin-bottom: -8px !important; }
}

/* Intro splash (tipo “diapositiva” que se degrada y revela el home) */
html.is-splashing, body.is-splashing{ overflow: hidden; }

.intro-splash{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 22% 26%, rgba(127,198,220,.20), transparent 62%),
    radial-gradient(circle at 78% 28%, rgba(242,140,40,.16), transparent 64%),
    linear-gradient(180deg, rgba(6,22,28,.96), rgba(6,22,28,.90));
  opacity: 1;
}
.intro-splash::before{
  content: "";
  position: absolute;
  inset: -40px;
  background: rgba(255,255,255,.04);
  filter: blur(26px);
  opacity: .55;
}

.intro-splash__inner{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 18px 22px;
}

.intro-splash__logo{
  width: clamp(150px, 18vw, 220px);
  height: auto;
  filter: drop-shadow(0 18px 48px rgba(0,0,0,.55));
}

.intro-splash__name{
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.92);
  text-shadow: 0 14px 30px rgba(0,0,0,.55);
  font-size: clamp(13px, 1.2vw, 16px);
}

.intro-splash.run{
  animation: m2IntroReveal 520ms cubic-bezier(.2,.75,.2,1) forwards;
}

@keyframes m2IntroReveal{
  0%{ opacity: 1; transform: translateY(0); }
  100%{ opacity: 0; transform: translateY(-16px); }
}

@media (prefers-reduced-motion: reduce){
  .intro-splash.run{ animation-duration: 260ms; }
}


/* PARTNERS (Home): carrusel automático (sin flechas) */
#partners{
  --sponsor-size: 84px;
  --sponsor-gap: 32px;  /* más aire horizontal (sin exagerar) */
  --sponsor-visible: 5;
  --marquee-duration: 18s;
}

#partners .sponsors-row{ gap: var(--sponsor-gap); }
#partners .sponsor{
  flex: 0 0 auto;              /* evitar que Flexbox “achique” */
  width: var(--sponsor-size);
  height: var(--sponsor-size);
  border-radius: 999px;
  padding: 10px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,47,58,.10);
  box-shadow: 0 14px 34px rgba(0,0,0,.10);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
#partners .sponsor:hover{ transform: translateY(-1px); border-color: rgba(15,47,58,.16); box-shadow: 0 18px 44px rgba(0,0,0,.12); }
#partners .sponsor img{ width:100%; height:100%; object-fit: contain; filter: none; opacity: 1; }

#partners .sponsor--institutional{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding: 10px 8px;
  text-align:center;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,249,250,.94));
}
#partners .sponsor--institutional--alt{
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(252,246,239,.96));
}
#partners .sponsor__m2{
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex: 0 0 auto;
  margin: 0 auto;
}
#partners .sponsor__caption{
  display:block;
  max-width: 58px;
  margin: 0 auto;
  font-size: 8.5px;
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: .01em;
  color: rgba(11,31,42,.82);
  text-transform: uppercase;
  text-wrap: balance;
}
#partners .sponsor__mark{
  display:block;
  font-size: 19px;
  line-height: 1;
  font-weight: 900;
  color: rgba(11,31,42,.88);
  margin: 0 auto;
}

#partners .sponsor-carousel{ display:block; }
#partners .sponsor-viewport{
  width: 100%;
  max-width: calc(var(--sponsor-visible) * var(--sponsor-size) + (var(--sponsor-visible) - 1) * var(--sponsor-gap));
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  cursor: default;
}

/* sutil “fade” en bordes para reforzar el movimiento */
#partners .sponsor-viewport::before,
#partners .sponsor-viewport::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width: 46px;
  pointer-events:none;
  z-index: 2;
}
#partners .sponsor-viewport::before{ left:0; background: linear-gradient(90deg, rgba(255,255,255,.70), rgba(255,255,255,0)); }
#partners .sponsor-viewport::after{ right:0; background: linear-gradient(270deg, rgba(255,255,255,.70), rgba(255,255,255,0)); }

#partners .sponsor-track{
  display:flex;
  flex-wrap: nowrap;
  justify-content:flex-start;
  will-change: transform;
  width: max-content;
}

/* Movimiento continuo “tipo LogoCarousel” */
#partners .sponsor-track.is-marquee{
  animation: sponsorsMarquee var(--marquee-duration) linear infinite;
}
#partners .sponsor-viewport:hover .sponsor-track.is-marquee,
#partners .sponsor-viewport:focus-within .sponsor-track.is-marquee{ animation-play-state: paused; }

@keyframes sponsorsMarquee{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); }
}

@media (max-width: 980px){
  #partners{ --sponsor-visible: 4; }
  #partners .sponsor-viewport::before,
  #partners .sponsor-viewport::after{ width: 34px; }
}

@media (max-width: 760px){
  #partners{ --sponsor-visible: 3; }
}
@media (max-width: 760px){
  #partners .sponsor__caption{
    max-width: 54px;
    font-size: 8px;
  }
}


@media (max-width: 520px){
  #partners{ --sponsor-visible: 2; }
}

@media (prefers-reduced-motion: reduce){
  #partners .sponsor-track.is-marquee{ animation: none !important; transform: translateX(0px) !important; }
}


/* ==============================
   Carrito (WooCommerce-like)
   ============================== */
.cart-layout{
  display:grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 14px;
  align-items:start;
  margin-top: 18px;
}
@media (max-width: 980px){
  .cart-layout{ grid-template-columns: 1fr; }
}

.cart-footer--wc{
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 14px;
  align-items:start;
}
@media (max-width: 980px){
  .cart-footer--wc{ grid-template-columns: 1fr; }
}

.ship-pill{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 16px;
  background: rgba(242,140,40,.10);
  border: 1px solid rgba(242,140,40,.18);
  color: rgba(11,31,42,.86);
}
.ship-pill__ico{ width: 28px; height: 28px; border-radius: 12px; display:inline-flex; align-items:center; justify-content:center; background: rgba(255,255,255,.70); border:1px solid rgba(242,140,40,.18); }
.ship-pill--mini{ padding: 10px 12px; }

.total-line--ghost{
  background: #fff;
  border: 1px dashed rgba(11,31,42,.18);
}

/* ==============================
   Checkout (wizard)
   ============================== */
.checkout-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap: 12px;
  margin-bottom: 12px;
}
.checkout-title{ margin:0 0 6px; }

.checkout-steps{
  display:flex;
  gap: 10px;
  align-items:center;
  margin: 14px 0 18px;
}
.cstep{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(11,31,42,.12);
  background: rgba(255,255,255,.72);
  color: rgba(11,31,42,.70);
}
.cstep__num{
  width: 28px; height: 28px;
  border-radius: 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  border: 1px solid rgba(11,31,42,.14);
  background: #fff;
}
.cstep.is-active{ border-color: rgba(242,140,40,.30); background: rgba(242,140,40,.10); color: rgba(11,31,42,.88); }
.cstep.is-active .cstep__num{ border-color: rgba(242,140,40,.35); }
.cstep.is-done{ opacity: .92; }

.checkout-grid{
  display:grid;
  grid-template-columns: 1.35fr .85fr;
  gap: 14px;
  align-items:start;
}
@media (max-width: 980px){
  .checkout-grid{ grid-template-columns: 1fr; }
}

.checkout-form .cpanel,
.checkout-summary{
  border-radius: 20px;
  padding: 18px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(11,31,42,.10);
  box-shadow: 0 18px 44px rgba(0,0,0,.08);
}
.cpanel h2{ margin:0 0 6px; font-size: 18px; }

.fgrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}
@media (max-width: 720px){
  .fgrid{ grid-template-columns: 1fr; }
}

.field{ display:flex; flex-direction:column; gap: 6px; margin-top: 12px; }
.field > span{ font-size: 13px; color: rgba(11,31,42,.72); font-weight: 700; }
.field input,
.field select,
.field textarea{
  border-radius: 14px;
  border: 1px solid rgba(11,31,42,.14);
  background: rgba(255,255,255,.92);
  padding: 12px 12px;
  color: var(--ink);
  outline: none;
}
.field textarea{ resize: vertical; }

.is-invalid{ border-color: rgba(220, 38, 38, .55) !important; box-shadow: 0 0 0 3px rgba(220,38,38,.08) !important; }

.cnav{
  display:flex;
  justify-content:space-between;
  gap: 10px;
  margin-top: 16px;
}

.checkout-summary__head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap: 10px;
}
.checkout-summary__head h3{ margin:0; font-size: 16px; }

.os-list{ display:flex; flex-direction:column; gap: 10px; margin-top: 12px; }
.os-item{ display:flex; justify-content:space-between; gap: 10px; font-size: 13px; color: rgba(11,31,42,.82); }
.os-name{ font-weight: 800; color: rgba(11,31,42,.92); }
.os-meta{ color: rgba(11,31,42,.62); margin-top: 2px; }
.os-right{ font-weight: 900; white-space: nowrap; }
.os-code{ display:inline-block; margin-left: 6px; font-weight: 800; color: rgba(11,31,42,.62); }

.os-totals{ margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(11,31,42,.10); }
.os-line{ display:flex; justify-content:space-between; align-items:center; padding: 8px 10px; border-radius: 14px; border: 1px solid rgba(11,31,42,.10); background: rgba(255,255,255,.70); margin-top: 8px; }
.os-line--total{ border-color: rgba(242,140,40,.28); background: rgba(242,140,40,.10); }
.os-cot{ margin-top: 10px; color: rgba(11,31,42,.64); font-size: 12px; }
.os-note{ margin-top: 10px; color: rgba(11,31,42,.62); font-size: 12px; }

.link{ color: var(--accent); text-decoration:none; font-weight:800; }
.link:hover{ text-decoration: underline; }

/* Checkout: ensure pay options readable on light panels */
.checkout-form .pay-title{ color: var(--ink); }
.checkout-form .pay-grid{ color: var(--ink); }
.checkout-form .pay-grid label{ background:#fff; border:1px solid rgba(11,31,42,.12); color: var(--ink); }
.checkout-form .pay-note{ color: rgba(11,31,42,.60); }
.checkout-form .pay-grid input{ accent-color: var(--accent); }



/* Cart thumbnails (visual close to WooCommerce) */
.cart-main{ display:flex; gap:12px; align-items:flex-start; }
.cart-thumb{
  width: 52px; height: 52px;
  border-radius: 18px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(242,140,40,.10);
  border: 1px solid rgba(11,31,42,.10);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.40);
  flex: 0 0 auto;
}
.cart-thumb span{ font-size: 22px; line-height:1; }
.cart-info{ min-width:0; }

.os-left{ display:flex; gap:10px; align-items:flex-start; }
.os-thumb{
  width: 34px; height: 34px;
  border-radius: 12px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(242,140,40,.10);
  border: 1px solid rgba(11,31,42,.10);
  flex: 0 0 auto;
}


/* ==============================
   PATCH 20260302 — Global sections polish
   ============================== */

/* “Quiénes somos” media + cards */
.who-media{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 14px 0 16px;
}
.who-photo{
  height: 180px;
  border-radius: 18px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 18px 40px rgba(0,0,0,.10);
  border: 1px solid rgba(11,31,42,.10);
  filter: saturate(0.96) contrast(1.03);
}
.mv-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 10px;

  margin-bottom: 24px;
}
.mv-card{
  position: relative;
  border: 1px solid rgba(242,140,40,.18);
  border-radius: 18px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(242,140,40,.10), rgba(255,255,255,.92) 55%);
  box-shadow: 0 14px 32px rgba(0,0,0,.08);
  overflow: hidden;
}
.mv-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.60), rgba(255,255,255,0) 55%),
    radial-gradient(circle at 85% 90%, rgba(242,140,40,.12), rgba(242,140,40,0) 60%);
  opacity:.75;
  pointer-events:none;
}
.mv-card > *{ position: relative; }
.mv-card h3{ margin: 0 0 8px; }
.mv-card p{ margin: 0; color: rgba(11,31,42,.70); }

/* MV cards: entrada con más presencia (stagger + glow suave) */
.has-reveal .mv-grid .mv-card.reveal{
  opacity: 0;
  transform: translateY(18px) scale(.985);
  filter: blur(.4px);
  transition: opacity 720ms ease, transform 720ms cubic-bezier(.2,.9,.2,1), filter 720ms ease;
}
.has-reveal .mv-grid .mv-card.reveal.reveal--in{
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: none;
  animation: mvGlow 900ms ease-out both;
}
.has-reveal .mv-grid .mv-card.reveal:nth-child(2){ transition-delay: 70ms; }
.has-reveal .mv-grid .mv-card.reveal:nth-child(3){ transition-delay: 140ms; }
@keyframes mvGlow{
  0%{ box-shadow: 0 14px 32px rgba(0,0,0,.08); }
  45%{ box-shadow: 0 18px 44px rgba(0,0,0,.12), 0 0 0 1px rgba(242,140,40,.30); }
  100%{ box-shadow: 0 14px 32px rgba(0,0,0,.08); }
}

@media (max-width: 900px){
  .mv-grid{ grid-template-columns: 1fr; }
  .who-media{ grid-template-columns: 1fr; }
  .who-photo{ height: 160px; }
}

/* Caso de éxito (reemplaza “Proceso de trabajo”) */
.case-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 18px;
  align-items: stretch;
}
.case-media{
  border-radius: 22px;

  /* En mobile algunos navegadores son inestables con background-image en anchors vacíos.
     Pasamos a <img> + object-fit, y fijamos un alto consistente con aspect-ratio. */
  aspect-ratio: 16 / 9;

  min-height: 320px;
  display:block;
  border: 1px solid rgba(11,31,42,.10);
  box-shadow: 0 22px 52px rgba(0,0,0,.12);
  position: relative;
  overflow: hidden;
}
.case-media > img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.case-media::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.25) 100%);
  opacity:.75;
}
.case-body{
  border: 1px solid rgba(11,31,42,.10);
  border-radius: 22px;
  padding: 18px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 14px 32px rgba(0,0,0,.08);
}
.case-body h3{ margin: 12px 0 8px; }
.case-tags{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.tag{
  font-size: 12px;
  font-weight: 800;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(242,140,40,.12);
  border: 1px solid rgba(242,140,40,.22);
  color: rgba(11,31,42,.78);
}
.case-steps{
  display:grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 8px;
}
.case-steps > div{
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(11,31,42,.10);
  background: rgba(255,255,255,.70);
  color: rgba(11,31,42,.74);
}
@media (max-width: 980px){
  .case-grid{ grid-template-columns: 1fr; }
  .case-media{ min-height: 240px; }
}

/* Caso de éxito: en mobile, subir el encuadre (evita mostrar “piso” y centra mejor el sujeto) */
@media (max-width: 560px){
  .case-media{ aspect-ratio: 4 / 3; min-height: 220px; }
  .case-media > img{ object-position: center 25%; }
}


/* Patch 20260302 — Nosotros spacing */
.mv-grid + .two-col{ margin-top: 28px; }

.quote{margin:0;color:rgba(11,31,42,.78);line-height:1.7;font-size:16px;}

/* =========================
   Patch 20260303 — Mobile polish (global)
   Objetivo: que toda la web se vea ordenada en cualquier celular
   ========================= */

/* Acciones en banners (ferretería / páginas internas) */
.banner-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

@media (max-width: 560px){
  body{ overflow-x:hidden; }

  /* Contenedores y ritmo */
  .container{ padding-left:16px; padding-right:16px; }

  /* Menú móvil: que no quede chico ni se corte */
  .menu-panel{ left:12px; right:12px; width:auto; }

  /* Botones: más "tocables" */
  .btn, .btn.small{ width:100%; justify-content:center; }
  .banner-actions{ display:grid; grid-template-columns: 1fr; }

  /* Servicios: imagen con buen aire + sin recortes agresivos */
  .card-media__img{ height: clamp(170px, 52vw, 220px); }

  /* Grillas generales: evitar dos columnas apretadas */
  .grid{ grid-template-columns: 1fr; }
  .cards-media{ grid-template-columns: 1fr; }

  /* Ferretería: el bloque de acciones que no se desborde */
  .filterbar-right{ flex-wrap:wrap; justify-content:flex-start; }
}

@media (max-width: 420px){
  .card-media__img{ height: clamp(170px, 56vw, 240px); }
}


/* =========================
   Patch 20260307 — Contacto + carrito responsive
   ========================= */

.cart-head,
.cart-row{
  grid-template-columns: minmax(0, 1.8fr) 128px 108px 128px 48px;
}

.cart-title{
  line-height: 1.28;
  word-break: break-word;
}

.cart-meta span{
  min-width: 0;
}

.cart-unit,
.cart-sub{
  font-variant-numeric: tabular-nums;
}

.cart-inline-label{
  display:none;
  font-size:11px;
  line-height:1.15;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:800;
  color: rgba(11,31,42,.54);
}

.cart-notes,
.totals,
.summary-label{
  min-width:0;
}

.assist-summary{
  position: sticky;
  top: 108px;
}

@media (max-width: 980px){
  .assist-summary{
    position: static;
  }

  .cart-layout{
    gap: 12px;
  }

  .cart-row{
    padding: 14px;
  }

  .cart-cell{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
  }

  .cart-inline-label{
    display:block;
  }

  .cart-row .cart-qty,
  .cart-row .cart-del,
  .cart-row .cart-unit,
  .cart-row .cart-sub{
    text-align:left;
    justify-content:flex-start;
  }

  .cart-actions{
    display:grid;
    grid-template-columns: 1fr 1fr;
  }

  .cart-actions .btn{
    width:100%;
    justify-content:center;
  }
}

@media (max-width: 560px){
  .page-banner__inner{
    padding: 30px 16px 44px;
  }

  .page-banner__inner p{
    max-width:100%;
  }

  .btn-row{
    display:grid;
    grid-template-columns: 1fr;
  }

  .cart-head{
    display:none;
  }

  .cart-row{
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .cart-main{
    gap: 10px;
  }

  .cart-thumb{
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }

  .cart-meta{
    gap: 6px 10px;
    font-size: 12px;
  }

  .cart-qty input{
    width: 100%;
    max-width: 110px;
    text-align:center;
  }

  .cart-actions{
    grid-template-columns: 1fr;
  }

  .summary-item{
    flex-direction:column;
    align-items:flex-start;
  }

  .summary-right{
    width:100%;
    justify-content:space-between;
  }

  .assist-summary,
  .cart-wrap--light{
    border-radius: 18px;
  }
}

@media (max-width: 420px){
  .container{
    padding-left:14px;
    padding-right:14px;
  }

  .page-banner.page-banner--m2{
    min-height: 260px;
  }
}


/* === Patch v3: caso Ángeles Jacobi en Servicios === */
#caso-exito .case-grid{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:18px;
  align-items:start;
}
#caso-exito .case-grid > *{
  min-width:0;
}
#caso-exito .case-media{
  grid-column:1;
  width:100%;
  max-width:100%;
  overflow:hidden;
  position:relative;
  z-index:1;
}
#caso-exito .case-body{
  grid-column:2;
  width:100%;
  max-width:100%;
  overflow:hidden;
  position:relative;
  z-index:2;
}
#caso-exito .case-media--jacobi > img{
  object-position:50% 14%;
}
@media (max-width: 980px){
  #caso-exito .case-grid{
    grid-template-columns:1fr;
  }
  #caso-exito .case-media,
  #caso-exito .case-body{
    grid-column:auto;
  }
  #caso-exito .case-media--jacobi > img{
    object-position:50% 18%;
  }
}
@media (max-width: 560px){
  #caso-exito .case-media--jacobi{
    aspect-ratio:4 / 3;
    min-height:220px;
  }
  #caso-exito .case-media--jacobi > img{
    object-position:50% 20%;
  }
}