/* ============================================================ CESCAC — HEADER CANONICO (fuente unica de verdad del menu) Se aplica a TODAS las paginas de cescac.com via assets/partials/header.html + scripts/aplicar_header_canonico.py Movil primero. Verde de marca #025338. NO editar por pagina. ============================================================ */ .cx-header{ --cx-verde:#025338; --cx-verde-hover:#013d2a; --cx-verde-dim:rgba(2,83,56,.10); --cx-bg:rgba(255,255,255,.96); --cx-card:#ffffff; --cx-text:#0f172a; --cx-muted:#475569; --cx-line:rgba(15,23,42,.09); --cx-radius:12px; --cx-ease:cubic-bezier(.22,1,.36,1); } [data-theme=dark] .cx-header{ --cx-verde:#2dd4bf; --cx-verde-hover:#5eead4; --cx-verde-dim:rgba(45,212,191,.16); --cx-bg:rgba(15,23,42,.96); --cx-card:#1e293b; --cx-text:#f1f5f9; --cx-muted:#94a3b8; --cx-line:rgba(248,250,252,.10); } /* ---------- barra ---------- */ .cx-header{ position:sticky; top:0; z-index:1000; margin:0; padding:.7rem clamp(.9rem,4vw,3rem); background:var(--cx-bg); -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%); border-bottom:1px solid var(--cx-line); font-family:Inter,"Segoe UI",system-ui,-apple-system,Arial,sans-serif; } .cx-header .header-inner{ max-width:1280px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex-wrap:wrap; } .cx-header .logo{ display:inline-flex; align-items:center; flex-shrink:0; min-height:44px; padding:.25rem .4rem .25rem 0; background:#fff; border-radius:8px; text-decoration:none; } [data-theme=dark] .cx-header .logo{background:transparent} .cx-header .logo-img{ display:block; height:44px; width:auto; min-width:120px; max-width:200px; object-fit:contain; object-position:left center; } /* ---------- boton hamburguesa ---------- */ .cx-header .nav-toggle{ display:flex; align-items:center; justify-content:center; width:46px; height:46px; padding:0; flex-shrink:0; margin-left:auto; background:var(--cx-verde-dim); border:1px solid var(--cx-line); border-radius:var(--cx-radius); color:var(--cx-text); cursor:pointer; transition:background .2s var(--cx-ease); } .cx-header .nav-toggle:hover{background:var(--cx-verde-dim)} .cx-header .nav-toggle:focus-visible{outline:2px solid var(--cx-verde);outline-offset:2px} .cx-header .nav-toggle svg{width:24px;height:24px} /* ---------- MOVIL PRIMERO: menu colapsado ---------- */ .cx-header .nav{ display:none; flex-direction:column; align-items:stretch; width:100%; order:4; gap:0; margin-top:.75rem; padding:.5rem 0 .25rem; border-top:1px solid var(--cx-line); max-height:78vh; overflow-y:auto; -webkit-overflow-scrolling:touch; } .cx-header .nav.nav-open{display:flex} .cx-header .nav>a, .cx-header .nav .nav-link-main{ display:flex; align-items:center; color:var(--cx-text); font-weight:600; font-size:1.02rem; text-decoration:none; padding:.85rem .2rem; border-bottom:1px solid var(--cx-line); position:relative; white-space:normal; } .cx-header .nav>a:hover,.cx-header .nav .nav-link-main:hover{color:var(--cx-verde)} .cx-header .nav a[aria-current=page]{color:var(--cx-verde)} /* dropdown en movil = acordeon */ .cx-header .nav-item-dropdown{ position:relative; display:flex; flex-wrap:wrap; align-items:center; width:100%; } .cx-header .nav-item-dropdown .nav-link-main{flex:1 1 auto;border-bottom:0} .cx-header .nav-submenu-toggle{ margin-left:auto; width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center; background:transparent; border:0; border-radius:8px; color:var(--cx-muted); cursor:pointer; } .cx-header .nav-submenu-toggle svg{width:18px;height:18px;transition:transform .22s var(--cx-ease)} .cx-header .nav-submenu-toggle[aria-expanded=true] svg{transform:rotate(180deg)} .cx-header .nav-item-dropdown>.nav-link-main, .cx-header .nav-item-dropdown>.nav-submenu-toggle{border-bottom:1px solid var(--cx-line)} .cx-header .nav-submenu{ display:none; width:100%; order:3; position:static; margin:0 0 .35rem; padding:.35rem 0 .35rem .75rem; background:transparent; border:0; border-left:2px solid var(--cx-verde-dim); box-shadow:none; opacity:1; visibility:visible; transform:none; pointer-events:auto; } .cx-header .nav-item-dropdown.open>.nav-submenu{display:block} .cx-header .nav-submenu a{ display:flex; align-items:center; gap:.55rem; padding:.62rem .5rem; border-radius:8px; border-bottom:0; color:var(--cx-muted); font-weight:500; font-size:.95rem; text-decoration:none; white-space:normal; } .cx-header .nav-submenu a:hover{background:var(--cx-verde-dim);color:var(--cx-verde)} .cx-header .nav-submenu a .bi{color:var(--cx-verde);font-size:1.02rem;flex-shrink:0} .cx-header .nav-submenu a::after,.cx-header .nav>a::after{display:none} /* botones */ .cx-header .nav-account{ margin:.8rem 0 0; padding:.7rem 1rem; justify-content:center; border:2px solid var(--cx-verde); border-radius:var(--cx-radius); color:var(--cx-verde); font-weight:700; text-align:center; border-bottom:2px solid var(--cx-verde); } .cx-header .nav-account:hover{background:var(--cx-verde-dim);color:var(--cx-verde)} .cx-header .nav-cta{ margin:.55rem 0 0; padding:.7rem 1rem; justify-content:center; background:var(--cx-verde); color:#fff; border-radius:var(--cx-radius); font-weight:700; text-align:center; border-bottom:0; } .cx-header .nav-cta:hover{background:var(--cx-verde-hover);color:#fff} .cx-header .theme-toggle{ display:flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; margin:.75rem auto .25rem; background:var(--cx-verde-dim); border:1px solid var(--cx-line); border-radius:50%; color:var(--cx-text); cursor:pointer; border-bottom:1px solid var(--cx-line); } .cx-header .theme-toggle:focus-visible{outline:2px solid var(--cx-verde);outline-offset:2px} .cx-header .theme-icon{width:22px;height:22px;display:none} .cx-header .theme-icon-moon{display:block} [data-theme=dark] .cx-header .theme-icon-moon{display:none} [data-theme=dark] .cx-header .theme-icon-sun{display:block} /* ---------- ESCRITORIO ---------- */ @media (min-width:901px){ .cx-header{padding:.7rem clamp(1rem,4vw,3rem)} .cx-header .nav-toggle{display:none} .cx-header .nav{ display:flex; flex-direction:row; align-items:center; flex-wrap:wrap; width:auto; order:0; margin-top:0; padding:0; border-top:0; gap:clamp(.35rem,1.4vw,1.1rem); max-height:none; overflow:visible; } .cx-header .nav>a,.cx-header .nav .nav-link-main{ border-bottom:0; padding:.45rem 0; font-size:.98rem; white-space:nowrap; color:var(--cx-muted); } .cx-header .nav>a:hover,.cx-header .nav .nav-link-main:hover{color:var(--cx-text)} .cx-header .nav-item-dropdown{width:auto;display:inline-flex;flex-wrap:nowrap;gap:.1rem;padding-bottom:6px} .cx-header .nav-item-dropdown>.nav-link-main, .cx-header .nav-item-dropdown>.nav-submenu-toggle{border-bottom:0} .cx-header .nav-submenu-toggle{width:24px;height:24px;margin-left:0} .cx-header .nav-item-dropdown::after{content:"";position:absolute;left:0;right:0;top:100%;height:12px} .cx-header .nav-submenu{ position:absolute; top:calc(100% + 6px); left:0; order:0; display:block; min-width:270px; width:max-content; max-width:min(92vw,340px); margin:0; padding:.55rem; background:var(--cx-card); border:1px solid var(--cx-line); border-left:1px solid var(--cx-line); border-radius:14px; box-shadow:0 12px 32px rgba(15,23,42,.16),0 2px 6px rgba(15,23,42,.06); opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-8px) scale(.985); transform-origin:top left; transition:opacity .18s var(--cx-ease),transform .18s var(--cx-ease),visibility .18s; z-index:1200; } .cx-header .nav-item-dropdown.open>.nav-submenu, .cx-header .nav-item-dropdown:hover>.nav-submenu{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0) scale(1); } .cx-header .nav-submenu a{white-space:nowrap;color:var(--cx-text)} /* el ultimo dropdown abre hacia la izquierda para no desbordar */ .cx-header #nav-dd-recursos .nav-submenu, .cx-header #nav-dd-productos .nav-submenu{left:auto;right:0;transform-origin:top right} .cx-header .nav-account{ margin:0 0 0 .3rem; padding:.42rem .85rem; font-size:.92rem; border-bottom-width:2px; } .cx-header .nav-cta{margin:0 0 0 .25rem;padding:.48rem .95rem;font-size:.92rem} .cx-header .theme-toggle{width:40px;height:40px;margin:0 0 0 .35rem;border-bottom-width:1px} .cx-header .logo-img{height:50px;max-width:220px} } @media (min-width:1180px){ .cx-header .nav{gap:1.1rem} .cx-header .nav>a,.cx-header .nav .nav-link-main{font-size:1.01rem} } /* ---------- MIGA DE PAN (integrada bajo el header, nunca suelta) ---------- */ .cx-breadcrumb{ max-width:1280px; margin:0 auto; padding:.6rem clamp(.9rem,4vw,3rem) .1rem; font-family:Inter,"Segoe UI",system-ui,-apple-system,Arial,sans-serif; } .breadcrumb-wrap{ max-width:1280px; margin:0 auto; padding:.6rem clamp(.9rem,4vw,3rem) .1rem; } .breadcrumb{ display:flex; flex-wrap:wrap; align-items:center; gap:.35rem; list-style:none; margin:0; padding:0; font-size:.85rem; color:#475569; } [data-theme=dark] .breadcrumb{color:#94a3b8} .breadcrumb li{display:flex;align-items:center;gap:.35rem} .breadcrumb li:not(:last-child)::after{content:"›";font-weight:600;opacity:.6} .breadcrumb a{color:#025338;text-decoration:none;font-weight:600} [data-theme=dark] .breadcrumb a{color:#2dd4bf} .breadcrumb a:hover{text-decoration:underline} .breadcrumb [aria-current=page]{color:inherit;font-weight:500} /* ---------- BARRA SUPERIOR DE SUBDOMINIOS (familia CESCAC) ---------- */ .cx-topbar{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; padding:.5rem clamp(.8rem,4vw,2rem); background:#025338; color:#fff; font-family:Inter,"Segoe UI",system-ui,-apple-system,Arial,sans-serif; font-size:.9rem; line-height:1.2; position:relative; z-index:1000; } .cx-topbar img{height:30px;width:auto;display:block;background:#fff;border-radius:6px;padding:2px 5px} .cx-topbar a{color:#fff;text-decoration:none;font-weight:600} .cx-topbar a:hover{text-decoration:underline} .cx-topbar .cx-topbar-sep{opacity:.45} .cx-topbar .cx-topbar-marca{font-weight:700;letter-spacing:-.01em} .cx-topbar .cx-topbar-right{margin-left:auto;display:flex;align-items:center;gap:.7rem} .cx-topbar .cx-topbar-wa{ background:#fff; color:#025338; padding:.32rem .7rem; border-radius:999px; font-weight:700; white-space:nowrap; } .cx-topbar .cx-topbar-wa:hover{background:#e6f2ed;text-decoration:none} @media (max-width:480px){ .cx-topbar{font-size:.82rem;gap:.45rem} .cx-topbar .cx-topbar-ctx{display:none} } /* ============================================================ CX-TOPBAR — barra delgada de la familia CESCAC. Va en subdominios (catalogo/tienda/vendedores) y en paginas con marca propia (GEOMED, Sublimador) o en otro idioma. Misma familia visual que el header canonico, sin imponerle el menu completo a una marca que no es CESCAC. Movil primero. Verde de marca #025338. ============================================================ */ .cx-topbar{ position:relative;z-index:1200; background:#025338;color:#eaf5f0; font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; border-bottom:1px solid rgba(255,255,255,.12); } [data-theme=dark] .cx-topbar{background:#04331f} .cx-topbar-inner{ max-width:1200px;margin:0 auto; display:flex;align-items:center;gap:.6rem; padding:.4rem .75rem;min-height:44px; } .cx-topbar-brand{ display:flex;align-items:center;gap:.45rem; color:#fff;text-decoration:none;font-weight:700; font-size:.9rem;letter-spacing:-.01em;flex:0 0 auto; } .cx-topbar-brand img{height:26px;width:auto;display:block} .cx-topbar-dom{white-space:nowrap} .cx-topbar-nav{display:none;gap:1rem;margin-left:auto} .cx-topbar-nav a{ color:rgba(255,255,255,.88);text-decoration:none; font-size:.85rem;font-weight:600;white-space:nowrap; } .cx-topbar-nav a:hover{color:#fff;text-decoration:underline} .cx-topbar-wa{ margin-left:auto;display:inline-flex;align-items:center;gap:.35rem; background:#25d366;color:#04331f;text-decoration:none; font-weight:700;font-size:.82rem;line-height:1; padding:.45rem .7rem;border-radius:999px;white-space:nowrap; } .cx-topbar-wa:hover{background:#1fbe5a} .cx-topbar-wa svg{flex:0 0 auto} @media (min-width:768px){ .cx-topbar-nav{display:flex} .cx-topbar-wa{margin-left:1rem} .cx-topbar-brand{font-size:.95rem} .cx-topbar-brand img{height:30px} } @media (max-width:359px){ .cx-topbar-wa span{display:none} } /* ============================================================ CX-ANULA-SITE-CSS — ultimo en la hoja, gana por orden. site.css trae reglas viejas del menu que solo se ven en movil. Medido en vivo 25-ago-2026: .nav-item-dropdown{flex-direction:column} bajo 900px dejaba el rotulo centrado y el chevron en otro renglon. ============================================================ */ @media (max-width:900px){ .cx-header .nav-item-dropdown{ flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:flex-start; width:100%; gap:0; } .cx-header .nav-item-dropdown>.nav-link-main{ flex:1 1 auto; width:auto; text-align:left; justify-content:flex-start; } .cx-header .nav-item-dropdown>.nav-submenu-toggle{ flex:0 0 auto; margin-left:auto; order:2; } .cx-header .nav-submenu{width:100%; order:3; flex-basis:100%} .cx-header .nav>a,.cx-header .nav .nav-link-main{text-align:left} .cx-header .nav-account,.cx-header .nav-cta{ justify-content:center; text-align:center; } } /* ============================================================ CX-FIX-CTA-CONTRASTE — el propio canonico se pisaba. `.cx-header .nav > a` = 0,2,1 le gana a `.cx-header .nav-cta` = 0,2,0, asi que el boton de WhatsApp heredaba la letra oscura del menu (medido en vivo: #0f172a sobre #025338 = ~1,6:1, ilegible) y "Iniciar sesion" salia negro en vez del verde de marca. Se sube la especificidad, sin !important. ============================================================ */ .cx-header .nav>a.nav-cta,.cx-header .nav a.nav-cta{color:#fff} .cx-header .nav>a.nav-cta:hover,.cx-header .nav a.nav-cta:hover{color:#fff} .cx-header .nav>a.nav-account,.cx-header .nav a.nav-account{color:var(--cx-verde)} .cx-header .nav>a.nav-account:hover,.cx-header .nav a.nav-account:hover{color:var(--cx-verde)} /* ============================================================ CX-FIX-MIGA-SUELTA — "esas letras al fondo a la izquierda". En el blog la miga es un colgado de
, no un
    dentro de .breadcrumb-wrap: se comia el padding:0 de .breadcrumb y quedaba pegada al borde de la pantalla (x=0 medido). Ahora usa el mismo contenedor que el resto del sitio. ============================================================ */ main>.breadcrumb,body>.breadcrumb,main>a.breadcrumb{ max-width:1280px; margin:0 auto; padding:.6rem clamp(.9rem,4vw,3rem) .1rem; width:100%; box-sizing:border-box; } main>a.breadcrumb{display:inline-flex; align-items:center; gap:.3rem} /* ============================================================ CX-MIGA-INTEGRADA-20260825 — la miga de pan deja de ser "letras sueltas". Reclamo textual del dueno: "esas letras al fondo a la izquierda". Medido en /nosotros.html a 375px ANTES: .breadcrumb-wrap con background transparent, left=0, sin borde -> texto huerfano pegado al borde, sin relacion visual con el header de arriba. Ahora es una FRANJA propia bajo el header: mismo ancho de contenedor que el menu (1280px), fondo suave, filete inferior, y en movil scroll horizontal interno para que nunca desborde la pagina. Cubre las dos formas que existen en el sitio: