/* MECAMAM · sistema de marca · capa compartida sobre Tailwind */
:root{--grafito:#1F2428;--acero:#E6E9EC;--blanco:#FFFFFF;--rojo:#C8102E;--gris:#6B747C;
--cut:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%)}
.bg-zinc-50,.bg-gray-50{background:var(--acero)!important}
:focus-visible{outline:3px solid var(--rojo);outline-offset:2px}

/* Cabecera */
header.sticky{background:var(--grafito)!important;backdrop-filter:none;box-shadow:none}
header.sticky>div{border-color:#343b41!important}
header.sticky a,header.sticky span,header.sticky button{color:var(--acero)!important}
header.sticky a:hover,header.sticky span:hover{color:#fff!important}
header.sticky a.border-mecamam-red{border-color:var(--rojo)!important}
header.sticky ul a{color:var(--grafito)!important}
/* El desplegable móvil tiene fondo claro (bg-white/bg-gray-50) y no usa <ul>,
   así que necesita su propia regla para no heredar el texto claro de la cabecera */
#mobile-menu,#mobile-products-submenu{background:var(--blanco)!important}
#mobile-menu a,#mobile-menu span,#mobile-menu button{color:var(--grafito)!important}
#mobile-menu a.text-mecamam-red{color:var(--rojo)!important}
#mobile-menu a.text-pink-600{color:#db2777!important}
header.sticky .logo a>span{color:#fff!important}
header.sticky .logo img{background:#fff;padding:3px 8px;height:2.25rem;width:auto;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,0 100%)}

/* Recursos gráficos: esquina cortada a 45° y diagonal de sección */
.premium-card,.carousel-card,.tile,main img[class*="rounded"],
a[class*="bg-mecamam-red"],button[class*="bg-mecamam-red"],.btn-cta{border-radius:0!important;clip-path:var(--cut)}
header.sticky a.btn-cta{background:var(--rojo);color:#fff!important;padding:.5rem 1.1rem}
.divider-diag{height:clamp(28px,6vw,96px);background:var(--grafito);clip-path:polygon(0 100%,100% 0,100% 100%);margin-top:-1px}
footer{background:var(--grafito)!important}

/* Portada */
.hero-sub{display:block;font-size:.5em;color:var(--acero);margin-top:.4em}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;background:#343b41}
.stats>div{background:var(--grafito);padding:2rem 1.25rem;text-align:center}
.stats span{color:var(--acero);font-size:.95rem}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem;margin-top:2rem}
.tile{background:var(--blanco);padding:1.5rem;box-shadow:inset 0 4px 0 var(--rojo)}
.tile h3{font-size:1.4rem;margin:.4rem 0}
.tile p{color:var(--gris);font-size:.95rem}

/* Modo oscuro */
@media (prefers-color-scheme:dark){
body{background:var(--grafito)!important;color:var(--acero)}
.bg-white,.bg-gray-50,.bg-gray-100,.bg-zinc-50,.tile{background:#242a2f!important}
.text-mecamam-gray,.text-gray-600,.text-gray-700,.text-gray-800,.tile p{color:var(--acero)!important}
.border-gray-100,.border-gray-200{border-color:#343b41!important}
header.sticky ul a{color:var(--acero)!important}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}