Web pública

El sitio de grupomecsa.net: sitio institucional + blog + tienda en línea. Vive en DesignSystemMecsa/GrupoMecsa/ y es otro track distinto al de las apps internas: acá manda el SEO y la conversión, no el shell de trabajo.

Dos tracks, no uno. La web usa SCSS compilado y variables Sass; las apps internas usan tokens CSS con modo oscuro. Comparten la marca (navy #013483), no el código. No mezcles app-shell.css con la web ni al revés.

Estructura

Árbol

GrupoMecsa/
├── index.php                 # home
├── pages/                    # servicios, nosotros, contactenos, blog, post,
│                             # referencias, trabaja-con-nosotros, postularse, search
├── ecommerce/                # tienda: index, product, checkout, pagos Onvo
├── components/               # head, header, footer, breadcrumb, testimonios,
│                             # Colaboradores, CarrucelReferencias, content_renderer
├── styles/
│   ├── main.scss             # punto de entrada: solo @use
│   ├── core/                 # _variables.scss, _base.scss
│   ├── layout/               # _header.scss, _footer.scss
│   ├── components/           # cards, product, filters, alerts, carruseles, mapa…
│   ├── pages/                # home, servicios, nosotros, blog, tienda, login…
│   └── utilities/
├── scripts/                  # main, cart, product, account, motion-*, currency…
├── api/                      # endpoints PHP (Supabase con service_role)
├── sitemap.php · 404.php · .htaccess

Variables (SCSS)

Fuente: styles/core/_variables.scss. Estas son las de verdad — las que se usan en producción hoy.

SCSS

$primary-color:      #013483;   // navy Mecsa
$color-gm-primary:   #013483;
$color-gm-dark:      #112542;
$primary-dark-color: #13438B;
$secondary-color:    #112542;
$green:  #198754;
$red:    #dc3545;
$yellow: #ffc107;
$light-bg: #f8f9fa;
$dark-bg:  #112542;
$font-stack: 'Inter', 'Helvetica Neue', Arial, sans-serif;

Compilar

main.scss solo tiene @use: el contenido está partido en módulos. Nunca edites main.css a mano — se regenera.

Bash

sass styles/main.scss styles/main.css
sass styles/main.scss styles/main.min.css --style=compressed

Cabecera y SEO

components/head.php centraliza título, descripción, canonical, Open Graph, Twitter Card y el JSON-LD de Organization. Cada página solo declara sus variables antes de incluirlo:

PHP

<?php
$meta_title       = 'Servicios | Grupo Mecsa';
$meta_description = 'Mantenimiento industrial, automatización y proyectos llave en mano.';
$meta_image       = BASE_URL . 'assets/og/servicios.jpg';   // opcional
$meta_type        = 'website';
?>
<head>
    <?php include 'components/head.php'; ?>
</head>

Checklist SEO por página nueva: título único, descripción propia, canonical correcto, imagen OG, y darla de alta en sitemap.php.

Componentes

Archivo	Qué hace
`head.php`	Meta, OG, Twitter, JSON-LD, favicons, config de tienda
`header.php`	Navbar Bootstrap con submenú de servicios y menú de cuenta (login / pedidos)
`footer.php`	Pie con enlaces, contacto y redes
`breadcrumb.php`	Migas de pan de la web pública
`testimonios.php`	Bloque de testimonios de clientes
`Colaboradores.php`	Equipo en /nosotros, ordenado por `cms.departamento.orden`
`CarrucelReferencias.php`	Carrusel de referencias / proyectos
`content_renderer.php`	Render del contenido por bloques que viene del CMS
`blog_helpers.php` · `search_helpers.php`	Utilidades de blog y buscador

Movimiento

La web anima con MotionOne (scripts/motion-init.js + scripts/motion-content.js), no con las utilidades del shell interno. Dos patrones:

Reveal al hacer scroll — elementos que aparecen al entrar en pantalla.
Stagger — un contenedor con data-stagger="80" revela sus .stagger-child uno detrás de otro, cada 80 ms.

HTML

<div class="row" data-stagger="80">
    <div class="col-md-4 stagger-child"> ... </div>
    <div class="col-md-4 stagger-child"> ... </div>
    <div class="col-md-4 stagger-child"> ... </div>
</div>

No agregues otra librería de animación encima. Un contenedor [data-stagger] ya lo anima MotionOne; duplicarlo produce saltos y elementos que quedan invisibles.

Tienda

La tienda vive en ecommerce/ y cierra el pago con Onvo (ecommerce/config/onvo_config.php, onvo_payment.php y el webhook en api/orders/onvo_webhook.php).

La orden la confirma el webhook, no el navegador: no des una compra por buena solo porque el usuario volvió a la página de éxito.
Se puede comprar como invitado (sin cuenta).
Los endpoints de api/ hablan con Supabase con service_role y tenant_id explícito — nunca con la clave anónima desde el navegador.

Reglas de la casa

Ancho completo: sin max-width que deje franjas blancas a los lados. La única excepción es la lectura larga (blog), donde el ancho de texto sí se limita.
Editá SCSS, nunca el CSS compilado.
El contenido editable (páginas, blog, colaboradores, vacantes) lo administra KoraCMS; no lo escribas a mano en el PHP.
Toda página nueva entra al sitemap.php.