/* Schneider Apps v2.1 · CEMEFEC Expressive
   Base v2.0.1 preservada: mesmos cards, links, mecanismos de busca e categorias.
   As cores vibrantes do CEMEFEC são usadas em elementos ornamentais;
   os textos e botões utilizam derivados escuros para garantir contraste. */
:root {
  --cyan: #00c4ff;
  --pink: #fe7fc2;
  --cyan-dark: #006482;
  --pink-dark: #98345f;
  --ink: #173348;
  --subtle: #4f6574;
  --bg: #fffbfa;
  --panel: #ffffff;
  --line: #e4e5e5;
  --navy: var(--cyan-dark);
  --navy-hover: #00536c;
  --shadow: 0 11px 28px rgba(21,65,81,.065);
  --radius: 22px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{
  margin:0;
  min-height:100vh;
  color:var(--ink);
  font-family:"Segoe UI",Arial,Helvetica,sans-serif;
  background:
    radial-gradient(ellipse 47% 21% at 0% 2%,rgba(0,196,255,.095),transparent 96%),
    radial-gradient(ellipse 48% 21% at 100% 28%,rgba(254,127,194,.09),transparent 97%),
    linear-gradient(180deg,#fffdfc 0%,#fffaf9 48%,#fffefd 100%);
}
a{color:inherit}
button,input{font:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid #00a4d6;outline-offset:3px}
.icon-library{position:absolute;width:0;height:0;overflow:hidden}
.container{width:min(1160px,calc(100% - 54px));margin-inline:auto}
/* Barra superior curta e institucional, sem hero promocional. */
.topbar{background:rgba(255,255,255,.94);border-bottom:1px solid #e9e2e5;position:relative}
.topbar::before{content:"";height:4px;position:absolute;top:0;left:0;right:0;background:linear-gradient(90deg,var(--cyan) 0 49.5%,var(--pink) 50.5% 100%)}
.topbar-inner{min-height:70px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.brand-logo{width:38px;height:38px;border-radius:12px;background:linear-gradient(145deg,#e0f9ff 0 50%,#ffe5f2 50% 100%);border:1px solid #d4e8e9;display:flex;align-items:center;justify-content:center;color:var(--cyan-dark)}
.brand-logo svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.brand-name{font-weight:800;letter-spacing:-.055em;font-size:21px}
.brand-name b{color:var(--pink-dark)}
.cemefec-link{text-decoration:none;text-transform:uppercase;font-size:12px;font-weight:800;letter-spacing:.11em;color:#315b65;display:flex;align-items:center;gap:8px}
.cemefec-link:hover{text-decoration:underline;text-underline-offset:4px}
.cemefec-link svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
/* Introdução objetiva */
.intro{padding:39px 0 19px;display:flex;align-items:end;justify-content:space-between;gap:25px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #f2d8e5;border-radius:999px;padding:8px 13px;font-size:10.5px;letter-spacing:.10em;color:var(--pink-dark);font-weight:800}
.eyebrow::before{content:"";width:8px;height:8px;background:var(--pink);border-radius:50%;box-shadow:11px 0 0 -1px var(--cyan);margin-right:7px}
h1{margin:14px 0 8px;font-size:clamp(34px,3.6vw,45px);line-height:1.1;letter-spacing:-.055em;color:var(--ink);font-weight:800}
.intro p{font-size:15px;line-height:1.55;margin:0;color:var(--subtle);max-width:680px}
.search-field{border:1px solid #cbdfe5;background:white;border-radius:15px;display:flex;align-items:center;gap:9px;padding:0 12px;width:min(321px,100%);height:48px;box-shadow:0 5px 16px rgba(2,105,132,.065);flex-shrink:0}
.search-field:focus-within{outline:2px solid rgba(0,138,177,.35);outline-offset:2px;border-color:#009ec9}
.search-field svg{width:20px;height:20px;fill:none;stroke:#477481;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.search-field input{width:100%;border:0;outline:0;color:var(--ink);font-size:13.5px;min-width:40px;background:transparent}
.search-field input::placeholder{color:#68828b}
.search-field kbd{font-size:11px;border:1px solid #e4e4e7;border-radius:5px;background:#f8f9fa;color:#667c86;padding:2px 6px}
.category-nav{display:flex;gap:8px;overflow-x:auto;padding:4px 1px 17px;scrollbar-width:thin;border-bottom:1px solid #f0e7e9;white-space:nowrap}
.category-link{font-size:12px;font-weight:700;text-decoration:none;color:#285566;background:#edfaff;border:1px solid #d7ebef;border-radius:999px;padding:10px 14px;transition:background .18s,border-color .18s,transform .18s,color .18s}
.category-link:nth-child(even){background:#fff0f7;border-color:#f6dae7;color:#803858}
.category-link:hover,.category-link:focus-visible{transform:translateY(-1px);background:#d4f4ff;border-color:#00a4cf;color:#005c78}
.category-link:nth-child(even):hover,.category-link:nth-child(even):focus-visible{background:#ffe0ef;border-color:#ed90b9;color:#842c52}
/* Categorias: duas famílias institucionais, derivadas em tons seguros de contraste. */
.catalog{padding:1px 0 57px}
.section-group{
  --accent:var(--cyan-dark);
  --accent-deep:#00536c;
  --accent-soft:#e4f9ff;
  --accent-line:#caedf6;
  --accent-bright:var(--cyan);
  scroll-margin-top:22px;
  margin-top:40px;
}
.section-group:nth-of-type(even){--accent:var(--pink-dark);--accent-deep:#84274e;--accent-soft:#ffebf4;--accent-line:#f7d6e4;--accent-bright:var(--pink)}
.section-heading{display:flex;align-items:center;gap:14px;margin-bottom:17px;position:relative}
.section-icon{display:flex;align-items:center;justify-content:center;flex:none;width:46px;height:46px;background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:15px;color:var(--accent)}
.section-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.section-info{min-width:0}
.section-heading h2{margin:0 0 4px;font-family:Georgia,"Palatino Linotype",serif;font-size:25px;line-height:1.15;letter-spacing:-.025em;color:var(--ink)}
.section-heading p{margin:0;color:#566e78;font-size:13px;line-height:1.45}
.section-count{margin-left:auto;font-size:11px;color:var(--accent-deep);background:var(--accent-soft);border:1px solid var(--accent-line);padding:6px 11px;border-radius:30px;font-weight:700;flex-shrink:0}
/* Grade regular mantém orientação espacial e facilita encontrar os recursos. */
.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:19px}
.card-grid.modules{grid-template-columns:repeat(4,minmax(0,1fr))}
/* Card único ocupa uma coluna padrão, nunca vira faixa larga nem coluna estreita. */
.card-grid.single{grid-template-columns:repeat(3,minmax(0,1fr))}
.app-card{
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:278px;
  padding:24px 24px 21px;
  overflow:hidden;
  border-radius:var(--radius);
  background:var(--panel);
  border:1px solid #eee6e8;
  box-shadow:var(--shadow);
  transition:transform .17s ease,box-shadow .17s ease,border-color .17s ease;
}
/* Forma orgânica pequena, sem prints nem ilustrações pesadas. */
.app-card::before{content:"";position:absolute;right:-54px;top:-70px;width:171px;height:171px;border-radius:46% 54% 52% 48%;background:var(--accent-soft);transform:rotate(-16deg);pointer-events:none}
.app-card::after{content:"";position:absolute;left:0;top:0;height:4px;width:76px;border-radius:0 0 8px 0;background:var(--accent-bright);pointer-events:none}
.app-card:hover{transform:translateY(-3px);box-shadow:0 14px 31px rgba(16,67,80,.13);border-color:var(--accent-line)}
.app-card .card-symbol{width:54px;height:54px;border-radius:17px;display:flex;align-items:center;justify-content:center;background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--accent);position:relative;z-index:1;margin-bottom:20px;flex:none}
.card-symbol svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.app-card h3{font-size:19px;letter-spacing:-.033em;line-height:1.26;margin:0 0 9px;position:relative;z-index:1;color:var(--ink)}
.app-card .card-desc{font-size:13.5px;line-height:1.57;color:#4f6974;margin:0 0 14px;position:relative;z-index:1;flex-grow:1}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px;position:relative;z-index:1}
.tag{font-size:10.5px;line-height:1.05;border-radius:999px;background:var(--accent-soft);color:var(--accent-deep);border:1px solid var(--accent-line);font-weight:700;padding:6px 9px}
.card-button{position:relative;z-index:1;min-height:45px;display:flex;gap:9px;align-items:center;justify-content:center;width:100%;background:var(--accent);border-radius:13px;color:#fff;font-size:13px;font-weight:800;text-decoration:none;transition:background .18s,transform .18s;white-space:nowrap}
.card-button:hover,.card-button:focus-visible{background:var(--accent-deep)}
.card-button svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.app-card.module-card{padding:20px 18px 18px;min-height:271px}
.module-card .card-symbol{width:48px;height:48px;border-radius:14px;margin-bottom:17px}
.module-card .card-symbol svg{width:25px;height:25px}
.module-card h3{font-size:17px}
.module-card .card-desc{font-size:12.8px;line-height:1.55}
.module-card .tags{margin-bottom:14px}
.module-card .card-button{min-height:42px}
/* Banner de entrada do Studio, hierarquicamente superior aos módulos, sem abrir /studio/. */
.studio-main{
  display:flex;align-items:center;gap:26px;
  background:linear-gradient(110deg,#edfbff 0%,#fff 48%,#fff0f7 100%);
  border:1px solid #d7e9ed;border-radius:23px;
  box-shadow:0 10px 26px rgba(13,75,94,.075);
  padding:23px 27px;margin-bottom:19px;
  position:relative;overflow:hidden;
}
.studio-main::before{content:"";width:245px;height:245px;border-radius:50%;background:rgba(254,127,194,.11);position:absolute;right:-84px;top:-153px;pointer-events:none}
.studio-main::after{content:"";position:absolute;top:0;left:0;width:180px;height:4px;background:linear-gradient(90deg,var(--cyan),var(--pink));border-radius:0 0 10px 0}
.studio-emblem{width:72px;height:72px;flex:none;border-radius:20px;background:linear-gradient(135deg,#00c4ff,#a8f1ff 54%,#ffe0f0 55%,#fe7fc2);color:#173348;display:flex;align-items:center;justify-content:center;box-shadow:0 9px 20px rgba(0,130,160,.13)}
.studio-emblem svg{width:37px;height:37px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.studio-main-info{flex:1;min-width:0;position:relative;z-index:1}
.studio-main-info .mini-eyebrow{font-size:10px;font-weight:800;letter-spacing:.11em;color:#006c8d;text-transform:uppercase}
.studio-main h3{margin:6px 0 7px;font-size:24px;letter-spacing:-.045em;color:var(--ink)}
.studio-main p{margin:0;font-size:13.5px;line-height:1.55;color:#466b76;max-width:675px}
.studio-action{display:flex;flex-direction:column;gap:10px;min-width:214px;align-items:stretch;position:relative;z-index:1}
.studio-action .card-button{min-height:47px;background:var(--cyan-dark)}
.studio-action .card-button:hover{background:#00536c}
.studio-action .more-link{font-size:12px;font-weight:700;color:#85405c;text-align:center;text-underline-offset:3px}
.modules-label{font-size:11px;text-transform:uppercase;letter-spacing:.105em;color:#346877;font-weight:800;margin:11px 2px 14px}
/* Rodapé com leve assinatura cromática institucional. */
.footer{padding:27px 0 29px;background:#fff;border-top:1px solid #ede0e5;position:relative}
.footer::before{content:"";height:3px;position:absolute;top:0;left:0;right:0;background:linear-gradient(90deg,rgba(0,196,255,.8),rgba(254,127,194,.8))}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:18px}
.footer p{color:#5b7079;font-size:11.5px;margin:0;line-height:1.6}
.footer a{text-decoration:none;color:#086c86}.footer a:hover{text-decoration:underline}
.search-status{margin:19px 0 0;font-size:13px;color:var(--cyan-dark);font-weight:700}
.no-results{text-align:center;padding:42px 12px 74px}.no-results h2{font-size:21px;color:var(--ink)}.no-results p{color:#587583}
.no-results button{background:var(--cyan-dark);color:white;border:0;padding:12px 22px;border-radius:12px;font-weight:700}
.skip{position:absolute;left:-999px;top:8px;padding:12px;background:#fff;z-index:99}.skip:focus{left:8px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
[hidden]{display:none!important}
@media(max-width:1040px){
  .card-grid,.card-grid.single,.card-grid.modules{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
  .container{width:min(100% - 30px,540px)}
  .topbar-inner{min-height:62px}
  .intro{padding:27px 0 18px;display:block}
  h1{font-size:35px}
  .intro p{font-size:13.6px}
  .search-field{width:100%;margin-top:20px}
  .category-nav{gap:7px}
  .category-link{font-size:11px;padding:9px 12px}
  .section-group{margin-top:35px}
  .section-heading{gap:11px}
  .section-heading h2{font-size:22px}
  .section-heading p{font-size:12px}
  .section-icon{width:42px;height:42px}
  .section-count{display:none}
  .card-grid,.card-grid.modules,.card-grid.single{grid-template-columns:1fr;gap:14px}
  .app-card,.app-card.module-card{min-height:unset;padding:22px}
  .app-card .card-symbol{width:51px;height:51px;border-radius:15px;margin-bottom:17px}
  .app-card h3{font-size:18px}
  .app-card .card-desc{font-size:13px;min-height:unset}
  .tags{margin-bottom:16px}
  .studio-main{padding:22px;display:grid;grid-template-columns:57px 1fr;column-gap:14px;row-gap:15px}
  .studio-emblem{width:57px;height:57px;border-radius:16px}
  .studio-emblem svg{width:29px;height:29px}
  .studio-main-info{grid-column:2}
  .studio-main h3{font-size:21px}
  .studio-main p{font-size:12.8px}
  .studio-action{grid-column:1/-1;min-width:0}
  .modules-label{margin:12px 0}
  .footer-inner{flex-direction:column;align-items:flex-start;gap:6px}
}
@media (min-width:520px) and (max-width:700px){.card-grid.modules{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}