/* AppZip public site styling: deep indigo base, electric cyan accent.
   Layout is a full-height column; the page body is a 12-column grid that the
   backend-driven elements place themselves on. */
:root{--indigo:#1F2A66;--night:#0E1A3C;--cyan:#0FB5C9;--ink:#1F2430;--mist:#EAF6FB;}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;
  font-family:system-ui,Arial,sans-serif;color:var(--ink);background:#fff}

header{display:flex;align-items:center;gap:1rem;padding:1rem 1.5rem;background:var(--night);color:#fff}
.brand{font-weight:800;font-size:1.3rem;color:#fff;text-decoration:none;display:flex;align-items:center}
.brand .accent{color:var(--cyan)}
.brand .logo{max-height:36px;display:block}
nav{display:flex;gap:1rem;flex:1}nav a{color:#fff;text-decoration:none}nav a:hover{color:var(--cyan)}
.right{display:flex;align-items:center;gap:.5rem}
.lang{color:var(--cyan);text-decoration:none;font-size:.85rem}

/* The page body: 12 equal columns, rows sized to content. Elements set their
   own grid-column / grid-row / min-height inline from the data. */
main{flex:1;width:100%;max-width:1040px;margin:0 auto;padding:2rem 1.5rem;
  display:grid;grid-template-columns:repeat(12,1fr);gap:1rem;align-content:start}
.el{min-width:0} /* let columns shrink instead of overflowing */

h1{color:var(--indigo)}h2{color:var(--indigo)}

/* Media fills its element box. */
.media{width:100%;height:100%;object-fit:cover;border-radius:12px;display:block}

/* Slider: stack images, show the active one. (Auto-rotation can be added later.) */
.slider{position:relative;width:100%;height:100%}
.slider img{width:100%;border-radius:12px;display:none}
.slider img.active{display:block}

/* Card and article. */
.card{background:var(--mist);border-radius:12px;padding:1.2rem;height:100%}
.card img{width:100%;border-radius:8px;margin-bottom:.6rem}
.card a{color:var(--cyan);font-size:1.4rem;text-decoration:none}
.article h2{margin-top:0}.article .media{margin:1rem 0}

/* Widgets. */
.widget-chatbot .chat-toggle,.widget-whats{background:var(--cyan);color:var(--night);
  border:none;padding:.6rem 1rem;border-radius:8px;cursor:pointer;text-decoration:none;
  display:inline-block;font-weight:700}
.chat-panel{margin-top:.5rem;background:var(--mist);border-radius:8px;padding:.6rem}
.chat-log{min-height:80px;font-size:.9rem}
.chat-input{width:100%;padding:.5rem;border-radius:6px;border:1px solid var(--cyan)}
.widget-qr{max-width:160px}
.widget-privacy{background:var(--night);color:#fff;padding:.8rem;border-radius:8px;font-size:.85rem}
.widget-privacy button{margin-left:.5rem;background:var(--cyan);color:var(--night);
  border:none;padding:.3rem .8rem;border-radius:6px;cursor:pointer}
.widget-social{font-size:.9rem}

footer{background:var(--night);color:#8aa;padding:1rem 1.5rem;display:flex;justify-content:space-between}

/* 404 page. */
.notfound{grid-column:1 / -1;text-align:center;padding:3rem 1rem}
.notfound .code{font-size:4rem;font-weight:800;color:var(--cyan)}

/* On small screens, collapse to a single column so elements stack. */
@media (max-width:720px){
  main{grid-template-columns:1fr}
  .el{grid-column:1 / -1 !important}
}

/* ---- Standard footer: social row + brand/home (spec A.7.2) ------------- */
footer{flex-direction:column;gap:.6rem;align-items:stretch}
footer .social{display:flex;gap:1rem;flex-wrap:wrap}
footer .social a{color:var(--cyan);text-decoration:none;font-size:.9rem}
footer .foot-bottom{display:flex;justify-content:space-between;align-items:center}
footer .foot-brand{font-weight:700;color:#fff}
footer .foot-home{color:var(--cyan);text-decoration:none}

/* Empty-home placeholder. */
.welcome{text-align:center;padding:3rem 1rem;color:var(--ink)}
.welcome h1{color:var(--indigo)}