/* ====== RO Rodamientos - Styles v3 ====== */
:root{
  --azul:#0d2c6c;
  --azul-oscuro:#09214a;
  --azul-claro:#1e4aa8;
  --gris:#f4f6f9;
  --gris-300:#e6ebf2;
  --negro:#111;
  --verde-ws:#25D366;
  --txt:#222;
}
*{box-sizing:border-box}
html{font-size:16px;scroll-behavior:smooth}
body{margin:0;font-family:Inter,Arial,Helvetica,sans-serif;color:var(--txt);background:#fff}
h1,h2,h3{font-family:Poppins, Inter, Arial, Helvetica, sans-serif}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.container{max-width:1200px;margin:0 auto;padding:0 16px}

/* Header */
.header{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--gris-300);z-index:1000}
.header-inner{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:10px 0}
.logo img{height:44px}
.nav{display:flex;align-items:center;gap:16px;justify-content:center;position:relative}
.nav a{padding:10px 12px;border-radius:12px;color:var(--azul);font-weight:600}
.nav a:hover{background:var(--gris)}
.btn{display:inline-block;padding:10px 16px;border-radius:12px;font-weight:700}
.btn-ghost{border:1px solid var(--gris-300);color:var(--azul);background:#fff}
.btn-ghost:hover{background:#f8fafc}
.menu-toggle{display:none;border:1px solid var(--gris-300);border-radius:10px;background:#fff;padding:8px 10px}
.menu-toggle i{font-size:18px;color:var(--azul)}

/* Social container right */
.social-wrap{display:flex;align-items:center;justify-content:center;gap:12px;background:#f4f6f9;border:1px solid var(--gris-300);
  border-radius:14px;padding:6px 10px;box-shadow:0 6px 18px rgba(13,44,108,.12)}
.social-wrap a{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:10px}
.social-wrap a i{font-size:18px;color:var(--azul)}
.social-wrap a.ws{background:var(--verde-ws);color:#fff}
.social-wrap a.ws i{color:#fff}

/* Hero */
.hero{background:linear-gradient(135deg,var(--azul) 0%, var(--azul-claro) 60%, var(--azul-oscuro) 100%);color:#fff}
.hero-inner{
    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    gap:24px;
    align-items:center;
    padding:40px 0;
    padding-left: 60px;  /* aumentá este valor si querés más espacio */
    padding-right: 20px; /* opcional, para equilibrar */
  }
.hero h1{font-size:clamp(26px,4vw,38px);margin:0 0 12px}
.hero h2{font-size:clamp(16px,2.2vw,22px);font-weight:600;margin:0 0 16px;opacity:.95}
.ctas{display:flex;gap:12px;flex-wrap:wrap}
.btn-outline{border:1px solid #fff;color:#fff}
.hero-illu{position:relative;min-height:240px;aspect-ratio:16/9;border-radius:16px;background:radial-gradient(#ffffff20 10%, transparent 11%) 0 0/16px 16px, #ffffff10;border:1px solid #ffffff2a}
.hero-illu .placeholder{position:absolute;inset:24px;border-radius:12px;border:2px dashed #fff8;display:flex;align-items:center;justify-content:center;font-weight:700;letter-spacing:.5px;}

/* Blocks & Cards */
.section{padding:36px 0}
.block{background:#fff;border:1px solid var(--gris-300);border-radius:18px;box-shadow:0 10px 30px rgba(0,0,0,.06);padding:18px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:#fff;border:1px solid var(--gris-300);border-radius:18px;padding:18px;box-shadow:0 4px 20px rgba(0,0,0,.04);transition:transform .18s ease, box-shadow .18s ease}
.card:hover{transform:translateY(-3px) scale(1.01);box-shadow:0 14px 32px rgba(13,44,108,.12)}
.card h3{margin:8px 0 6px;font-size:18px;color:var(--azul)}
.card p{margin:0;color:#444}
.card .ico{font-size:22px;color:var(--azul)}

/* Product links */
.product-links{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.product-link{border:1px solid var(--gris-300);border-radius:18px;padding:20px;background:linear-gradient(180deg,#fff, #f9fbff)}
.product-link h3{margin:0 0 8px;color:var(--azul)}
.product-link p{margin:0 0 10px}
.product-link .go{font-weight:700;color:var(--azul-claro)}

/* Footer */
.footer{background:var(--azul-oscuro);color:#cbd5e1;padding:28px 0;margin-top:12px}
.footer a{color:#e2e8f0}
.footer-grid{display:grid;grid-template-columns:2fr 1fr;gap:16px;align-items:start}
.footer h3{margin:0 0 8px;color:#fff}
.small{font-size:13px;opacity:.8}

/* WhatsApp floating */
.whatsapp-float{position:fixed;right:16px;bottom:16px;z-index:999;display:flex;flex-direction:column;gap:8px}
.whatsapp-float a{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--verde-ws);color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.24)}
.whatsapp-float a:hover{transform:translateY(-2px)}

/* Responsive */
@media (max-width: 900px){
  .hero-inner{grid-template-columns:1fr;gap:16px}
  .cards{grid-template-columns:1fr}
  .product-links{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .nav{display:none}
  .menu-toggle{display:inline-flex}
  .social-wrap{display:none} /* redes escondidas en móvil, quedan en contacto */
  .header-inner{grid-template-columns:auto auto 1fr}
}
.nav.open{display:flex;flex-direction:column;gap:8px;background:#fff;position:absolute;top:62px;left:0;right:0;padding:12px;border-top:1px solid var(--gris-300);box-shadow:0 10px 24px rgba(0,0,0,.06)}


/* ===== Enhancements v4 ===== */
:root{
  --azul:#0b255e;
  --azul-oscuro:#081c46;
  --panel:#ffffff;
  --borde:#c9d1e1;
  --sombra: 0 10px 20px rgba(0,0,0,.12), 0 3px 6px rgba(0,0,0,.08);
  --sombra-strong: 0 18px 40px rgba(0,0,0,.25), 0 6px 14px rgba(0,0,0,.18);
  --gris-ui:#eef2f8;
}

/* Social group container (right of header) */
.header-inner{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px}
.social-box{display:flex;gap:10px;background:var(--gris-ui);border:1px solid var(--borde);
  border-radius:16px;padding:6px 10px;box-shadow:var(--sombra)}
.social-box a{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.12)}
.social-box a.ig{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);color:#fff}
.social-box a.fb{background:#1877f2;color:#fff}
.social-box a.ws{background:#25D366;color:#fff}

/* Buttons */
.btn{border-radius:14px;box-shadow:var(--sombra)}
.btn-outline{background:#fff1;border:1px solid #fff;}

/* Hero placeholder frame stronger */
.hero-illu{box-shadow:var(--sombra-strong);background:radial-gradient(#ffffff22 10%, transparent 11%) 0 0/16px 16px, #ffffff18;aspect-ratio:16/9}

/* Small cards */
.cards{gap:20px}
.card{border-radius:24px;border:1px solid var(--borde);box-shadow:var(--sombra);background:var(--panel)}
.card:hover{transform:translateY(-4px) scale(1.02);box-shadow:var(--sombra-strong)}

/* Panels for sections */
.panel{background:var(--panel);border:1px solid var(--borde);border-radius:20px;padding:22px;box-shadow:var(--sombra)}

/* Product links cards */
.product-link{border-radius:20px;box-shadow:var(--sombra);border:1px solid var(--borde)}
.product-link:hover{transform:translateY(-3px);box-shadow:var(--sombra-strong)}

/* Footer */
.footer{box-shadow:0 -10px 24px rgba(0,0,0,.08)}

/* Floating WhatsApp (solo ventas) */
.whatsapp-float a{width:64px;height:64px;box-shadow:var(--sombra-strong)}

/* Titles slightly darker */
h1,h2,h3{color:var(--azul-oscuro)}


.brand-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:16px;margin-top:12px}
.brand{height:64px;border:1px dashed var(--borde);border-radius:14px;display:flex;align-items:center;justify-content:center;background:#fafcff;box-shadow:var(--sombra)}


/* ===== Tweaks v5 (hover social, 3D header/hero, darker cards) ===== */
:root{
  --header-bg:#f6f8ff;
  --header-shadow: 0 10px 24px rgba(0,0,40,.12);
  --panel-bg:#fbfdff;
  --panel-borde:#b9c5dc;
  --panel-sombra: 0 14px 28px rgba(0,0,0,.20), 0 8px 14px rgba(0,0,0,.12);
  --card-bg:#f9fbff;
  --card-borde:#c0cce3;
  --card-sombra: 0 12px 24px rgba(0,0,0,.18), 0 6px 10px rgba(0,0,0,.12);
  --hero-start:#3a6ae6; /* azul más claro */
  --hero-end:#254aa8;
}

/* Header 3D bar */
.header{background:var(--header-bg);box-shadow:var(--header-shadow);border-bottom:none}
.social-box{background:#fff;border:1px solid #d9e2f2;border-radius:16px;padding:6px 10px;
  box-shadow:0 8px 18px rgba(0,0,0,.12)}
.social-box a{width:40px;height:40px;border-radius:12px;transition:.18s ease transform, box-shadow .18s ease}
.social-box a:hover{transform:translateY(-3px);box-shadow:0 10px 20px rgba(0,0,0,.22)}
/* Platform colors (square rounded like sample) */
.social-box a.ig{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);color:#fff}
.social-box a.fb{background:#1877f2;color:#fff}
.social-box a.ws{background:#25D366;color:#fff}

/* Hero colors and slight 3D */
.hero{background:linear-gradient(135deg,var(--hero-start) 0%, var(--hero-end) 100%);color:#fff;
  box-shadow:inset 0 -40px 60px rgba(0,0,0,.18)}
.hero h1,.hero h2{color:#fff}
.hero-illu{box-shadow:0 20px 40px rgba(0,0,0,.35), inset 0 2px 12px rgba(255,255,255,.15)}

/* Cards/sections darker and more contrast */
.card{background:var(--card-bg);border:1px solid var(--card-borde);box-shadow:var(--card-sombra)}
.panel{background:var(--panel-bg);border:1px solid var(--panel-borde);box-shadow:var(--panel-sombra)}
.product-link{background:#ffffff;border:1px solid var(--panel-borde);box-shadow:var(--card-sombra)}


/* v7 logo force */
.logo img{height:96px !important; max-height:96px !important}
@media (max-width:900px){ .logo img{height:72px !important; max-height:72px !important} }
.header-inner{min-height:90px}


/* v8 social icons: colored rounded squares with white glyphs */
.social-box a{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 22px rgba(0,0,0,.20);transition:transform .16s ease, box-shadow .16s ease}
.social-box a i{color:#fff;font-size:20px}
.social-box a.ig{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888)}
.social-box a.fb{background:#1877f2}
.social-box a.ws{background:#25D366}
.social-box a:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(0,0,0,.28)}

/* v9: PNG social icons, bigger logo (+25%), footer credit, tighter right gap */
.logo img{height:120px !important; max-height:120px !important}
@media (max-width:900px){ .logo img{height:90px !important; max-height:90px !important} }
.right-actions{gap:6px} /* acercar 'Ingresar' a redes */
.social-box a img{display:block;border-radius:12px;box-shadow:0 10px 22px rgba(0,0,0,.25);transition:transform .12s ease, box-shadow .12s ease}
.social-box a img:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 16px 32px rgba(0,0,0,.32)}
.footer .brand-name{font-size:26px;color:#fff;font-weight:900}
.footer .credits{margin-top:6px;font-size:13px;opacity:.95}

/* v10 social placeholders inline */
.social-box a img{display:block;border-radius:8px;box-shadow:0 4px 8px rgba(0,0,0,.2)}

/* v10: horizontal social placeholders + right alignment */
.right-actions{display:flex;align-items:center;gap:12px;justify-self:end}
.social-box{display:flex;flex-direction:row;align-items:center;gap:8px;background:#fff;border:1px solid #d9e2f2;border-radius:16px;padding:6px 8px;box-shadow:0 10px 22px rgba(0,0,0,.20)}
.social-box a img{display:block;border-radius:12px;height:48px;box-shadow:0 6px 14px rgba(0,0,0,.18);transition:transform .12s ease, box-shadow .12s ease}
.social-box a img:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 12px 24px rgba(0,0,0,.26)}

/* v11: force horizontal social icons */
.social-box{display:flex !important;flex-direction:row !important;align-items:center;gap:8px}

/* v12: align social icons with Ingresar button vertically */
.right-actions{display:flex;align-items:center;gap:12px}

/* v13: horizontal social icons with button */
.right-actions{display:flex;align-items:center;gap:14px;justify-self:end}
.social-box{display:flex;flex-direction:row;align-items:center;gap:8px;background:#fff;
  border:1px solid #d9e2f2;border-radius:16px;padding:6px 10px;box-shadow:0 10px 22px rgba(0,0,0,.20);height:48px}
.social-box a img{display:block;border-radius:12px;height:48px;transition:transform .12s ease, box-shadow .12s ease}
.social-box a img:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 12px 24px rgba(0,0,0,.26)}
.btn-login{height:48px;display:flex;align-items:center}

/* v14: ensure horizontal layout for ingresar + social */
.right-actions{display:flex;align-items:center;gap:14px;justify-self:end}
.social-box{display:flex;flex-direction:row;align-items:center;gap:8px;background:#fff;
  border:1px solid #d9e2f2;border-radius:16px;padding:6px 10px;box-shadow:0 10px 22px rgba(0,0,0,.20);height:48px}
.social-box a img{display:block;border-radius:12px;height:48px;transition:transform .12s ease, box-shadow .12s ease}
.social-box a img:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 12px 24px rgba(0,0,0,.26)}
.btn-login{height:48px;display:flex;align-items:center}


/* v14 header rebuild: 3 columns + horizontal actions */
.header-inner{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:10px 0}
.nav{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
.right-actions{display:flex;align-items:center;gap:12px;justify-self:end}
.social-box{display:flex;flex-direction:row;align-items:center;gap:8px;background:#fff;border:1px solid #d9e2f2;border-radius:16px;padding:6px 8px;box-shadow:0 10px 22px rgba(0,0,0,.20)}
.social-box a img{display:block;border-radius:12px;height:48px}
.btn-login{height:48px;display:flex;align-items:center}

/* v17: hero, hovers, footer, sizes */
.hero-illu{position:relative;overflow:hidden;aspect-ratio:16/9}
.hero-illu .hero-banner{position:absolute;inset:0;object-fit:contain;width:100%;height:100%;padding:16px}

/* Hover movimiento para Ingresar */
.btn-login{transition:transform .15s ease, box-shadow .15s ease}
.btn-login:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(0,0,0,.22)}

/* Animación suave en nav */
.nav a{transition:transform .12s ease, letter-spacing .12s ease, background .12s ease}
.nav a:hover{transform:translateY(-2px);letter-spacing:.2px}

/* Footer estilos */
.footer .brand-name{font-size:22px;color:#fff}
.footer p i{margin-right:6px}
.footer .sep{display:inline-block;width:18px}
.footer .social-follow a{display:inline-block;margin-right:16px}

/* Social header: solo el ícono más chico, el cuadro se mantiene */
.social-box a img{width:36px;height:36px}

/* Más aire al texto del banner */
.hero-inner{padding-left:60px;padding-right:20px}

/* Flotante WhatsApp svg */
.whatsapp-float a img{width:64px;height:64px;display:block}


/* ===== Contacto (rework v2) ===== */
.footer{ padding: 24px 0; background:#0c2348; color:#eaf2ff; }
.contact-card{
  background: #0c2348;
  border-top: 0;
  border-radius: 12px;
}
.contact-head{
  display:flex; flex-direction:column; gap:6px; margin-bottom:8px;
}
.contact-title{
  margin:0; font-weight:900; letter-spacing:.2px;
  font-size: clamp(28px, 5.0vw, 40px); /* MÁS grande que todo */
  line-height: 1.05;
  color:#ffffff;
}
.contact-brand{
  margin:0; font-weight:800; text-transform:uppercase;
  font-size: clamp(18px, 2.6vw, 24px); /* un poco más chica */
  line-height:1.15; color:#ffffff;
}

.contact-list{ list-style:none; padding:0; margin:8px 0 10px; display:grid; gap:10px; }
.contact-row{ display:block; }

.contact-link{
  display:flex; align-items:center; gap:10px; text-decoration:none; color:#eaf2ff;
  padding:8px 10px; border-radius:12px; transition: background .15s ease, transform .15s ease;
}
.contact-link:hover{ background:#ffffff18; transform: translateY(-1px); }

.ico{
  width:34px; height:34px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center;
  background:#ffffff1a; border:1px solid #ffffff30; font-size:16px; flex:0 0 34px;
}
.ico.ws i{ color:#25D366; }
.ico.phone i{ color:#90cdf4; }
.ico.mail i{ color:#fbb6ce; }
.ico i.fa-location-dot{ color:#ffd166; }

.txt{ font-size: clamp(14px, 2.4vw, 17px); }
.txt strong{ font-weight:900; color:#fff; }

.contact-social{ display:flex; gap:10px; margin-top:8px; }
.contact-social a{
  width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px; background:#ffffff; color:#0b255e; border:1px solid #d9e2f2;
}
.contact-social a:hover{ transform: translateY(-2px); }

.footer-bottom{ margin-top:6px; border-top:1px solid #dbe4ff33; padding-top:8px; text-align:center; }
.footer-bottom .small{ opacity:.9; font-size:12px; }


/* ===== Ajustes V2 (orden y alineación) ===== */
.brand-row{ display:flex; align-items:center; padding:8px 10px; }
.ico-spacer{ width:34px; height:34px; flex:0 0 34px; display:inline-block; }
.brandline{
  font-weight:900;
  font-size: clamp(20px, 3.2vw, 26px); /* más grande que items, más chica que Contacto */
  letter-spacing:.2px;
  margin-left:10px;
  color:#ffffff;
}
/* Asegurar la misma tabulación para redes */
.contact-list .contact-row .txt{ display:inline-block; }



/* ===== V3: alineación exacta + header más visible ===== */
.contact-list{ --indent: 32px; } /* controla la tabulación */
.contact-link{ margin-left: var(--indent); padding-left: 0; }
.brandline{ margin-left: var(--indent); }
.ico-spacer{ display:none; } /* ya no se usa */

/* Header / Nav más visible (gradiente y tipografía más grande) */
.index-header{
  background: linear-gradient(90deg, rgba(8,28,70,0.95) 0%, rgba(11,37,94,0.95) 52%, rgba(16,55,130,0.95) 100%);
  backdrop-filter: saturate(120%) blur(2px);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.index-header nav a,
.index-header .nav a,
header nav a{
  font-size: clamp(14px, 1.6vw, 18px);
  color: #ffffff;
  font-weight: 700;
  letter-spacing: .2px;
  padding: 10px 14px;
  border-radius: 10px;
  transition: background .15s ease, transform .15s ease;
  text-decoration: none;
}
.index-header nav a:hover,
.index-header .nav a:hover,
header nav a:hover{
  background: rgba(255,255,255,0.12);
  transform: translateY(-1px);
}

/* Opcional: realce del item activo si hay clase .active */
.index-header nav a.active,
.index-header .nav a.active,
header nav a.active{
  background: rgba(255,255,255,0.18);
}




/* ===== V4: jerarquía tipográfica en Contacto + nav más legible ===== */
/* Contacto: mismo estilo que títulos de sección, pero lidera la jerarquía */
.contact-title{
  font-weight: 700; /* como 'Empresa' */
  font-size: clamp(24px, 2.8vw, 30px); /* un toque menor que v3, acorde al resto */
  line-height: 1.1;
  color:#ffffff;
  margin: 0 0 6px 0;
}

/* RO RODAMIENTOS: un poco más chico que Contacto, pero más grande que ítems */
.brandline{
  font-weight: 800;
  font-size: clamp(20px, 2.4vw, 26px);
  letter-spacing:.2px;
  margin-left: var(--indent);
  color:#ffffff;
}

/* Ítems mantienen su tamaño actual (.txt) */

/* Header/Nav: letras un poco más grandes + sombrita sutil para contraste */
.index-header nav a,
.index-header .nav a,
header nav a{
  font-size: clamp(15px, 1.9vw, 20px); /* + */
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
  font-weight: 700;
}
.index-header nav a:hover,
.index-header .nav a:hover,
header nav a:hover{
  background: rgba(255,255,255,0.16);
  text-shadow: 0 2px 4px rgba(0,0,0,.45);
}




/* ===== V5: Contacto simple estilo liviano ===== */
.footer{ background:#0c2348; padding:24px 0; color:#eaf2ff; }
.contact-simple{ max-width:1000px; margin:0 auto; }
.contact-simple-title{
  font-weight:700; /* como 'Empresa' */
  font-size: clamp(22px, 2.6vw, 28px);
  line-height:1.2;
  color:#ffffff;
  margin: 0 0 10px 0;
}
.contact-simple-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.contact-simple-list .row{
  display:flex; align-items:center; gap:10px;
  color:#eaf2ff; text-decoration:none;
  padding:6px 2px; border-radius:10px;
}
.contact-simple-list .row:hover{ background:#ffffff14; }
.contact-simple-list i{
  width:22px; text-align:center; font-size:16px; opacity:.95;
}
.contact-simple-list .fa-location-dot{ color:#ffd166; }
.contact-simple-list .fa-whatsapp{ color:#25D366; }
.contact-simple-list .fa-phone{ color:#90cdf4; }
.contact-simple-list .fa-envelope{ color:#fbb6ce; }
.contact-simple-list .fa-instagram, .contact-simple-list .fa-facebook-f{ color:#eaf2ff; }
.footer-bottom{ margin-top:12px; border-top:1px solid #dbe4ff33; padding-top:8px; text-align:center; }
.footer-bottom .small{ opacity:.9; font-size:12px; }

/* === Hero variantes para doble banner (azul + bordó) === */
.hero-azul{
  background: linear-gradient(135deg, var(--hero-start) 0%, var(--hero-end) 100%);
}
.hero-rojo{
  background: linear-gradient(135deg, #a54b7a 0%, #7b2a50 100%);
}
/* Versión más fina (menos alto) para banners */
.hero.hero-slim .hero-inner{
  padding-top: 26px;
  padding-bottom: 26px;
}

/* === Hero como bloque con puntas redondas y sombra === */
.hero-block{
  border-radius: 20px;
  box-shadow: 0 14px 28px rgba(0,0,0,.18), 0 8px 12px rgba(0,0,0,.12);
  margin: 28px 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.16);
}
@media (max-width: 900px){
  .hero-block{ border-radius: 16px; margin: 18px 0; }
}

/* === Marcas (logos uniformes) === */
.brand{height:96px; padding:10px; background:#fafcff; border:1px dashed var(--borde); border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  transition: transform .22s ease, box-shadow .22s ease;
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}
.brand img{width:100%; height:100%; object-fit:contain; image-rendering:auto;}
@media (max-width:900px){ .brand{height:80px;} }

/* === Marcas: animación con tilt y sombra (ajustada: sin rotate/scale) === */
.brand{
  transition: transform .22s ease, box-shadow .22s ease;
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}
.brand:hover{
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(0,0,0,.22), 0 8px 14px rgba(0,0,0,.16);
}
.brand:focus-within, .brand:focus-visible{
  outline:2px solid #b9c5dc; outline-offset:2px;
  transform: translateY(-3px) scale(1.02) rotate(-1deg);
  box-shadow: 0 14px 28px rgba(0,0,0,.20), 0 6px 12px rgba(0,0,0,.14);
}



/* === Repuestos camiones: grilla con efecto 3D y sombras === */
.cats-grid-3d{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:24px;
  margin-top:18px;
  perspective: none; /* activa sensación 3D en hover */
}
.cat3d{
  display:block;
  position:relative;
  border-radius:20px;
  background: linear-gradient(180deg, #ffffff, #f6f9ff);
  border:1px solid rgba(24, 39, 75, .10);
  box-shadow:
     0 18px 40px rgba(13, 30, 70, .18),
     0 6px 14px rgba(13, 30, 70, .12),
     inset 0 1px 0 rgba(255,255,255,.9);
  transform: translateZ(0);
  transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease, filter .22s ease;
  will-change: transform, box-shadow;
  overflow:hidden;
}
.cat3d figure{
  margin:0;
  display:grid;
  grid-template-rows: 1fr auto;
  min-height: 250px;
  background: radial-gradient( at 70% -20%, rgba(33, 88, 214, .10), transparent 55%), #f3f6fb;
}
.cat3d img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:20px 20px 8px 20px;
  filter: saturate(1.05) contrast(1.02);
}
.cat3d figcaption{
  text-align:center;
  font-weight:800;
  letter-spacing:.2px;
  color:#0b255e;
  padding:12px 12px 16px;
  background:#fff;
  border-top:1px solid rgba(24,39,75,.08);
}
.cat3d::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:20px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6);
  pointer-events:none;
}
.cat3d:hover{
  transform: translateY(-8px) scale(1.02);
  box-shadow:
     0 26px 56px rgba(13, 30, 70, .28),
     0 10px 20px rgba(13, 30, 70, .18),
     inset 0 1px 0 rgba(255,255,255,.95);
  filter: contrast(1.04);
}
@media (max-width: 1024px){
  .cats-grid-3d{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px){
  .cats-grid-3d{ grid-template-columns: repeat(2, 1fr); }
  .cat3d figure{ min-height: 220px; }
}
@media (max-width: 420px){
  .cats-grid-3d{ grid-template-columns: 1fr; }
  .cat3d figure{ min-height: 200px; }
}


/* === Tooltips RO (coherentes con paleta) — estabilizado === */
.tt{position:relative;display:flex;align-items:center;justify-content:center}
.tt .tt-text{
  position:absolute;
  bottom:110%;
  left:50%;
  transform: translate(-50%, -100%) translateZ(0);
  min-width:180px;
  max-width:240px;
  background:#0d1b4c;
  color:#fff;
  font-size:13px;
  line-height:1.25;
  text-align:center;
  padding:8px 10px;
  border-radius:8px;
  box-shadow:0 8px 18px rgba(0,0,0,.22);
  opacity:0; visibility:hidden;
  transition: opacity .18s ease, transform .18s ease;
  z-index:5;
  pointer-events:none;
}
.tt .tt-text::after{
  content:"";
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  border-width:6px;
  border-style:solid;
  border-color:#0d1b4c transparent transparent transparent;
}
.tt:hover .tt-text{opacity:1; visibility:visible; transform: translate(-50%, calc(-100% - 2px)) translateZ(0);}


/* === Mobile Hamburger Menu (RO) === */
.hamburger{display:none;background:transparent;border:0;padding:8px;cursor:pointer;line-height:1;}
.hamburger span{display:block;width:26px;height:3px;margin:5px 0;background:#0b255e;border-radius:2px;transition:transform .18s ease, opacity .18s ease;}
@media (max-width:900px){
  .hamburger{display:block;justify-self:start;}
  .nav{display:none;}
  .right-actions{margin-left:auto;gap:10px;}
}
/* When menu is open, the .nav gets .open — already defined below */


/* ===== Mobile Hamburger Menu (final) ===== */
.hamburger{display:none;background:transparent;border:0;padding:8px;cursor:pointer;line-height:1;}
.hamburger span{display:block;width:26px;height:3px;margin:5px 0;background:#0b255e;border-radius:2px;transition:transform .18s ease, opacity .18s ease;}
@media (max-width: 900px){
  .hamburger{display:block !important;}
  .nav{display:none !important;}
  .nav.open{display:flex !important; flex-direction:column; gap:8px;
    position:fixed; left:0; right:0; top:90px; /* coincide con header-inner */
    background:#fff; z-index:1200; padding:12px; border-bottom:1px solid #d9e2f2;
    box-shadow:0 10px 24px rgba(0,0,0,.10);
  }
}


/* === Anchor offset so sticky header doesn't cover section titles === */
#empresa, #productos, #contacto { scroll-margin-top: 140px; }
@media (max-width: 900px){
  #empresa, #productos, #contacto { scroll-margin-top: 110px; }
}



@media (max-width: 600px){
  .brand-mini{ width:100px; height:70px; }
}


/* Camiones: grilla y volver dentro del panel */
.repuestos-camiones .info-panel .cats-grid-3d{ margin-top:16px; }
.repuestos-camiones .info-panel .btn-ghost{ margin-top:8px; }


/* === Camiones: fila compacta de logos (cuadrados iguales, izquierda, separados) === */
.brand-row-logos{
  display:flex; flex-wrap:wrap; gap:24px; align-items:center; justify-content:space-between;
  margin-top:10px; margin-bottom:6px;
}
.brand-mini{
  flex:1 1 120px;
  max-width:140px;
  height:80px;
  background:#fafcff; border:1px dashed var(--borde); border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--sombra);
}
.brand-mini img{ max-width:90%; max-height:70%; object-fit:contain; display:block; margin:auto; }
@media (max-width: 600px){
  .brand-mini{ flex:1 1 100px; max-width:100px; height:70px; }
}


/* === RO: Product cards with right-side image box (v1) === */
.product-links{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media (max-width:900px){.product-links{grid-template-columns:1fr}}
.product-link{
  display:grid;
  grid-template-columns: 1fr 120px;
  align-items:center;
  gap:12px;
  border:1px solid var(--borde);
  border-radius:20px;
  padding:16px;
  background:linear-gradient(180deg,#fff,#f8fbff);
  box-shadow: var(--sombra);
}
.product-link .text h3{margin:0 0 6px;color:var(--azul)}
.product-link .text p{margin:0;color:#333}
.product-link .imgbox{
  width:120px;height:120px;
  border:1px dashed var(--borde);
  border-radius:14px;
  background:#fafcff;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.product-link .imgbox img{max-width:92%;max-height:92%;object-fit:contain;display:block}


/* Ajuste: en index los .product-link se mantienen simples */
.index-page .product-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.index-page .product-link{display:block;padding:20px;border:1px solid var(--borde);border-radius:18px;background:#fff;box-shadow:var(--sombra);transition:transform .18s ease, box-shadow .18s ease}
.index-page .product-link:hover{transform:translateY(-4px);box-shadow:var(--sombra-strong)}
.index-page .product-link h3{margin:0 0 8px;color:var(--azul)}
.index-page .product-link p{margin:0 0 8px}
.index-page .product-link .go{font-weight:700;color:var(--azul-claro)}


/* Animación hover para botón Volver */
.btn-ghost{transition:transform .15s ease, box-shadow .15s ease}
.btn-ghost:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(0,0,0,.22)}


/* === RO v-backfix: scope 2-col card layout ONLY to rodamientos list === */
.product-links.ro-list .product-link{
  display:grid; grid-template-columns: 1fr 120px; align-items:center; gap:12px;
}
.product-links.ro-list .product-link .imgbox{
  width:120px;height:120px;border:1px dashed var(--borde);border-radius:14px;background:#fafcff;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.product-links.ro-list .product-link .imgbox img{max-width:92%;max-height:92%;object-fit:contain;display:block}

/* Reset for generic product links (index) in case an older rule was global) */
section#productos .product-link{ display:block; grid-template-columns: initial; gap: 0; }
section#productos .product-link .imgbox{ display:none; }
section#productos .product-link:hover{ transform: translateY(-3px) scale(1.01); }
section#productos .product-link{ cursor:pointer; }


/* === RO back button animation === */
.btn-back{ position:relative; animation: floatY 3s ease-in-out infinite; }
.btn-back:hover{ transform: translateY(-3px); box-shadow: 0 12px 26px rgba(0,0,0,.18); }
@keyframes floatY{
  0%,100%{ transform: translateY(0) }
  50%{ transform: translateY(-4px) }
}


/* === RO vColor tweak banners + product squares === */
:root{
  --hero-start:#3a6ae6; /* azul aclarado */
  --hero-end:#254aa8;
  --hero-red-start:#a42c52; /* bordó aclarado */
  --hero-red-end:#752040;
}
.hero-azul{
  background: linear-gradient(135deg, var(--hero-start) 0%, var(--hero-end) 100%) !important;
}
.hero-rojo{
  background: linear-gradient(135deg, var(--hero-red-start) 0%, var(--hero-red-end) 100%) !important;
}
/* Product squares in index (links to rodamientos/camiones) */
.index-page .product-link{
  background: linear-gradient(135deg, var(--hero-start) 0%, var(--hero-end) 100%);
  color:#fff;
}
.index-page .product-link h3,
.index-page .product-link p,
.index-page .product-link span{color:#fff}
/* Banner buttons hover animation */
.hero .ctas .btn{
  transition: transform .18s ease, box-shadow .18s ease;
}
.hero .ctas .btn:hover{
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 14px 28px rgba(0,0,0,.28);
}


/* === RO: Producto squares themed like banners (index only) === */
.index-page #productos .product-link{
  color:#ffffff;
  border:1px solid rgba(255,255,255,.32);
  box-shadow: 0 14px 28px rgba(0,0,0,.20), 0 6px 12px rgba(0,0,0,.12);
}
.index-page #productos .product-link h3,
.index-page #productos .product-link p,
.index-page #productos .product-link .go{ color:#ffffff; }
.index-page #productos .product-link:nth-child(1){
  background: linear-gradient(135deg, var(--hero-start) 0%, var(--hero-end) 100%);
}
.index-page #productos .product-link:nth-child(2){
  background: linear-gradient(135deg, #a54b7a 0%, #7b2a50 100%);
}
.index-page #productos .product-link:hover{
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0,0,0,.28);
}


/* === RO: Hero buttons hover motion === */
.hero .ctas .btn{transition: transform .16s ease, box-shadow .16s ease;}
.hero .ctas .btn:hover{ transform: translateY(-3px); box-shadow: 0 12px 26px rgba(0,0,0,.22); }

/* === RO fix: igualar tipografía del segundo banner (h2) al h1 del hero === */
.hero h2{
  font-family:Poppins, Inter, Arial, Helvetica, sans-serif;
  font-weight:800;
  font-size:clamp(26px,4vw,38px);
  margin:0 0 12px;
}



/* ===== RO v15 – Hero abstract + image sin recuadro ===== */

/* Reseteo del contenedor de imagen del banner: SIN borde, SIN fondo, SIN marco */
.hero-illu{
  position: relative !important;
  overflow: visible !important;
  aspect-ratio: auto !important;
  min-height: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* Imagen del banner integrada, grande y con sombra suave */
.hero-illu .hero-banner{
  position: static !important;
  width: 130% !important;         /* un poco más grande para "salirse" a la derecha */
  max-width: none !important;
  height: auto !important;
  object-fit: contain !important;
  filter: drop-shadow(0 18px 36px rgba(0,0,0,.32)) !important;
  transform: translateX(-10%) !important; /* empuja levemente a la derecha */
}

/* Ajustes de layout del hero */
.hero .hero-inner{
  align-items: center;
  padding-top: 40px;
  padding-bottom: 40px;
}
@media (max-width: 900px){
  .hero .hero-inner{ padding-top:26px; padding-bottom:26px; }
  .hero-illu .hero-banner{ width: 100% !important; transform: none !important; }
}

/* Fondo abstracto en capas (solo CSS) */
.hero{ position: relative; overflow: hidden; }
.hero::before,
.hero::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
}

/* Patrón de líneas diagonales muy suave */
.hero::before{
  background:
    radial-gradient(1500px 600px at 110% 10%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(900px 500px at -10% 100%, rgba(0,0,0,.12), transparent 60%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 6px, rgba(255,255,255,0) 6px 18px);
  mix-blend-mode: overlay;
  opacity:.5;
}

/* Motas/figuras suaves */
.hero::after{
  background:
    radial-gradient(220px 160px at 75% 25%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(340px 200px at 90% 75%, rgba(0,0,0,.12), transparent 60%);
  opacity:.6;
}

/* Tonos: azul para rodamientos, bordó para camiones (manteniendo tus gradientes) */
.hero-azul{
  background:
    radial-gradient(circle at 20% -10%, rgba(255,255,255,.12), transparent 35%),
    linear-gradient(135deg, var(--hero-start) 0%, var(--hero-end) 100%) !important;
}
.hero-rojo{
  background:
    radial-gradient(circle at 20% -10%, rgba(255,255,255,.12), transparent 35%),
    linear-gradient(135deg, var(--hero-red-start) 0%, var(--hero-red-end) 100%) !important;
}

/* Botones del banner con hover más marcado */
.hero .ctas .btn{
  transition: transform .18s ease, box-shadow .18s ease;
}
.hero .ctas .btn:hover{
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 16px 32px rgba(0,0,0,.28);
}

/* === Hover "La Empresa" – activa al pasar por el contenedor y por el panel === */
#empresa .panel{
  transition: transform .35s ease, box-shadow .35s ease !important;
  will-change: transform, box-shadow;
}
/* Si el usuario pasa por cualquier parte del bloque (no solo borde del panel) */
#empresa:hover .panel{
  transform: translateY(-6px) scale(1.02) !important;
  box-shadow: 0 16px 32px rgba(0,0,0,.25) !important;
}
/* Y si pasa directamente por el panel también */
#empresa .panel:hover{
  transform: translateY(-6px) scale(1.02) !important;
  box-shadow: 0 16px 32px rgba(0,0,0,.25) !important;
}

/* === RO Mobile fix: hero paddings + banner image centered and large === */
@media (max-width: 900px){
  .hero-inner{
    grid-template-columns: 1fr;
    gap: 16px;
    padding-left: 20px;   /* antes quedaba 60px y a móvil lo achicaba */
    padding-right: 20px;
  }
  .hero-illu{ text-align:center; }
  .hero-illu .hero-banner{
    width: 100% !important;
    max-width: 560px;     /* tope razonable para que no quede chica */
    height: auto !important;
    transform: none !important;
    padding: 0 4px;
    margin: 8px auto 0;   /* centrada */
    display: block;
  }
}

/* === RO: Hover en imágenes de Banners (desktop) === */
.hero-illu .hero-banner{
  transition: transform .35s ease, filter .35s ease !important;
  will-change: transform, filter;
}
.hero-illu:hover .hero-banner,
.hero-illu .hero-banner:hover{
  /* mantiene el corrimiento X base (-10%) + leve subida y zoom */
  transform: translateX(-10%) translateY(-6px) scale(1.02) !important;
  filter: drop-shadow(0 16px 32px rgba(0,0,0,.30)) !important;
}

/* === RO: Mobile banners centrados y MÁS chicos === */
@media (max-width: 900px){
  .hero-inner{
    grid-template-columns: 1fr;
    gap: 16px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .hero-illu{ text-align:center; }
  .hero-illu .hero-banner{
    width: 100% !important;
    max-width: 360px;     /* más chico en celus; ajustar a gusto (320–400) */
    height: auto !important;
    transform: none !important;  /* sin corrimiento en móvil */
    padding: 0 4px;
    margin: 8px auto 0;
    display: block;
  }
}


/* === RO Mobile Header Layout v2 (solo móvil) === */
@media (max-width: 900px){
  /* Ocultar cuadro de redes */
  .social-box{ display:none !important; }

  /* Reordenar columnas: logo | espacio | Ingresar | ☰ */
  .header-inner{
    display:grid !important;
    grid-template-columns: auto 1fr auto auto !important;
    align-items:center !important;
    gap:12px !important;
  }
  /* Logo queda en la primera columna por defecto */
  .right-actions{
    grid-column: 3 !important;
    justify-self: end !important;
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
  }
  .btn-login{ height:44px; padding:8px 12px; }
  .hamburger{
    grid-column: 4 !important;
    justify-self: end !important;
    display:block !important;
  }
  /* El menú desplegado sigue ocupando todo el ancho por debajo del header */
  .nav.open{ top: 90px !important; }
}


/* ==== RO Mobile Header Layout v3 (fix definitivo) ==== */
@media (max-width:900px){
  /* Ocultar redes en header */
  .social-box{ display:none !important; }

  /* Forzar layout de una fila: Logo | (espacio) | Ingresar | ☰ */
  .header-inner{
    display:grid !important;
    grid-template-columns: auto 1fr auto auto !important;
    align-items:center !important;
    gap:10px !important;
  }

  /* Logo a la columna 1 */
  .logo{ grid-column:1 !important; }

  /* Botón Ingresar a la col 3, pegado a la derecha */
  .right-actions{
    grid-column:3 !important;
    justify-self:end !important;
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    margin:0 !important;
  }
  .btn-login{
    height:42px !important;
    padding:8px 12px !important;
    font-size:14px !important;
    white-space:nowrap !important;
  }

  /* Hamburguesa en col 4, bien a la derecha */
  .hamburger{
    grid-column:4 !important;
    justify-self:end !important;
    display:block !important;
    margin:0 !important;
  }

  /* Ocultar nav en móvil (se abre con .open) */
  .nav{ display:none !important; }
  .nav.open{
    display:flex !important;
    flex-direction:column !important;
    gap:8px !important;
    position:fixed !important;
    left:0; right:0; top:90px;
    background:#fff; z-index:1200;
    padding:12px; border-bottom:1px solid #d9e2f2;
    box-shadow:0 10px 24px rgba(0,0,0,.10);
  }
}


/* ==== RO Mobile Header Layout v4 (FORZADO) ==== */
@media (max-width: 900px){
  /* 1) Quitar redes en header */
  .social-box{ display:none !important; }

  /* 2) Una sola fila: Logo | (espacio) | Ingresar | ☰ */
  .header-inner{
    display:grid !important;
    grid-template-columns: auto 1fr auto auto !important;
    align-items:center !important;
    gap:8px !important;
    padding: 8px 0 !important;
  }

  /* 3) Logo más chico para que todo entre */
  .logo img{
    height:56px !important;
    max-height:56px !important;
  }

  /* 4) Botón Ingresar compacto pegado a la hamburguesa */
  .right-actions{
    grid-column:3 !important;
    justify-self:end !important;
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    margin:0 !important;
  }
  .btn-login{
    height:38px !important;
    padding:6px 10px !important;
    font-size:13px !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }

  /* 5) Hamburguesa última columna */
  .hamburger{
    grid-column:4 !important;
    justify-self:end !important;
    display:block !important;
    margin:0 !important;
  }

  /* 6) Container con menos padding para ganar ancho útil */
  .container{ padding-left:12px !important; padding-right:12px !important; }

  /* 7) Ocultar nav (se abre con .open) */
  .nav{ display:none !important; }
  .nav.open{ top: 80px !important; }
}


/* ==== RO Mobile Header FLEX override (FINAL) ==== */
@media (max-width: 900px){
  /* layout en una fila controlando el orden, sin tocar HTML */
  .header-inner{
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
    padding:10px 12px !important;
  }
  .logo{ order:1 !important; }
  .nav{ order:2 !important; display:none !important; }
  .right-actions{
    order:3 !important;
    margin-left:auto !important;
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
  }
  .hamburger{
    order:4 !important;
    display:block !important;
    margin:0 !important;
  }

  /* Logo grande como te gusta */
  .logo img{ height: 90px !important; max-height: 90px !important; }

  /* redes ocultas en móvil */
  .social-box{ display:none !important; }

  /* botón compacto para que siempre entre */
  .btn-login{
    height:44px !important;
    padding:8px 12px !important;
    font-size:14px !important;
    white-space:nowrap !important;
  }

  /* menú desplegable debajo del header */
  .nav.open{
    display:flex !important;
    flex-direction:column !important;
    gap:8px !important;
    position:fixed !important;
    left:0; right:0; top: calc(90px + 10px) !important;
    background:#fff; z-index:1200;
    padding:12px; border-bottom:1px solid #d9e2f2;
    box-shadow:0 10px 24px rgba(0,0,0,.10);
  }
}


/* === RO FIX HOVER RECTO (sin torceduras) === */
.cats-grid-3d{ perspective: none !important; }
.cat3d{ transform: translateZ(0); backface-visibility: hidden; }
.cat3d:hover,
.cat3d:focus,
.cat3d:focus-within{
  transform: translateY(-8px) scale(1.02) !important;
  box-shadow:
     0 26px 56px rgba(13, 30, 70, .28),
     0 10px 20px rgba(13, 30, 70, .18),
     inset 0 1px 0 rgba(255,255,255,.95) !important;
  filter: contrast(1.04) !important;
}



/* === Mini imágenes decorativas en los cuadros de Productos (abajo-derecha) === */
.index-page .product-link{ position:relative; overflow:hidden; }
.index-page .product-link{min-height:260px;padding-bottom:60px;}
.index-page .product-link .mini-deco{
  position:absolute;
  bottom:10px; right:12px;
  width: clamp(90px, 28%, 220px);
  height:auto;
  pointer-events:none;
  opacity:.96;
  filter: drop-shadow(0 12px 22px rgba(0,0,0,.28));
}
@media (max-width: 900px){
  .index-page .product-link .mini-deco{
    bottom:6px; right:8px;
    width: clamp(80px, 40%, 180px);
    opacity:.95;
  }
}


/* === RO: mini imágenes decorativas en cuadros de Productos (abajo-derecha) === */
.index-page .product-link{ position:relative; overflow:hidden; padding-bottom: 150px; } /* deja espacio para la imagen */
.index-page .product-link .mini-deco{
  position:absolute; bottom:12px; right:14px;
  width: clamp(110px, 50%, 260px); height:auto;
  pointer-events:none; opacity:.98;
  filter: drop-shadow(0 14px 26px rgba(0,0,0,.28));
}
@media (max-width: 900px){
  .index-page .product-link{ padding-bottom: 130px; }
  .index-page .product-link .mini-deco{
    width: clamp(90px, 46%, 220px);
    bottom: 8px; right: 10px;
  }
}

.contact-simple-list .fa-clock { color:#facc15; }