/*
Theme Name: Literaturas CF 2027
Theme URI: https://www.smeducacao.com.br
Author: SM Educação
Author URI: https://www.smeducacao.com.br
Description: Catálogo de literaturas SM para a Campanha da Fraternidade 2027, com filtros por segmento, busca e ficha técnica de cada obra em modal.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: literaturas-cf2027
*/

  /* ============================================================
     SISTEMA VISUAL "GIZ & PAPEL" — CF 2027 / SM Educacao
     Derivado da identidade oficial da CNBB (azul-giz, papel
     texturizado, tracos de giz branco, acentos quentes), com
     execucao propria: hues, tipografia e grafismos sao nossos.
     ============================================================ */
  :root{
    /* --- papel --- */
    --paper:#FCF8F0;     /* papel creme (fundo) */
    --panel:#F1E8D9;     /* papel sombreado (blocos) */
    --line:#E3D8C5;      /* linha / borda */
    --chalk:#FFFDF7;     /* giz branco */

    /* --- azuis (dominante) --- */
    --ink:#12333F;       /* azul-petroleo escuro: texto */
    --blue-deep:#1B5670; /* azul profundo: faixas, rodape, titulos */
    --blue:#4E93B2;      /* azul-giz: cor de campanha */
    --blue-soft:#C3DDE8; /* azul-papel */
    --blue-wash:#E8F2F6; /* lavado: fundos amplos */
    --muted:#68787F;

    /* --- acentos quentes --- */
    --sun:#F2A93B;       /* ambar / sol */
    --clay:#DE5240;      /* vermelho-terracota */
    --clay-ink:#B8402F;  /* terracota para texto (contraste) */
    --red:#ED1B2F;       /* vermelho SM — acao / CTA (institucional) */
    --leaf:#7FA85C;      /* verde-oliva de giz */

    /* --- cores por segmento --- */
    --seg-infantil:#F2A93B;
    --seg-iniciais:#4E93B2;
    --seg-finais:#7FA85C;
    --seg-medio:#DE5240;

    /* --- aliases de compatibilidade (nomes antigos) --- */
    --navy:var(--blue-deep);
    --crimson:var(--clay);
    --cy-orange:var(--sun);
    --cy-magenta:var(--clay);
    --cy-blue:var(--blue);
    --cy-green:var(--leaf);

    --maxw:1180px;

    /* --- textura de papel (gr o sutil) --- */
    --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;background:var(--paper);color:var(--ink);
    font-family:"Hanken Grotesk",system-ui,sans-serif;
    font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;
  }
  a{color:inherit;text-decoration:none}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

  /* ---------- top bar ---------- */
  header.bar{position:sticky;top:0;z-index:60;background:rgba(251,250,246,.88);
    backdrop-filter:saturate(150%) blur(10px);border-bottom:1px solid var(--line)}
  .bar .wrap{display:flex;align-items:center;gap:18px;height:64px}
  .logo{display:flex;align-items:center;gap:12px;font-weight:800;color:var(--navy);
    font-family:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:-.01em;white-space:nowrap}
  .logo .sub{font-size:13px;color:var(--muted);font-weight:600;font-family:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif}
  nav.seg{display:flex;gap:4px;margin-left:auto}
  nav.seg a{font-size:13.5px;font-weight:600;color:var(--navy);padding:8px 12px;border-radius:8px}
  nav.seg a:hover{background:var(--panel)}
  /* marca oficial SM Educacao */
  .logo .marca{height:32px;width:auto;display:block;flex:0 0 auto}
  .logo .sep{width:1px;height:26px;flex:0 0 auto;background:currentColor;opacity:.3}
  footer .logo .marca{height:56px}
  @media(max-width:880px){nav.seg{display:none}.logo .sub{display:none}}
  @media(max-width:520px){.logo .marca{height:26px}.logo .sep{display:none}}

  /* ---------- hero ---------- */
  .hero{position:relative;overflow:hidden;padding:64px 0 40px}
  .hero .wrap{position:relative;z-index:2;max-width:840px}
  .eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:700;
    text-transform:uppercase;letter-spacing:.14em;color:var(--crimson)}
  .eyebrow::before{content:"";width:26px;height:2px;background:var(--crimson)}
  h1.title{font-family:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:800;color:var(--navy);
    font-size:clamp(3rem,9vw,6.4rem);line-height:.92;letter-spacing:-.025em;margin:.28em 0 .12em}
  .lede{font-size:clamp(1.05rem,2.2vw,1.3rem);color:#2c3742;max-width:620px;margin:0 0 6px}
  .lede strong{color:var(--navy)}
  .lema{margin-top:18px;padding-left:18px;border-left:4px solid var(--cy-orange);
    font-style:italic;color:var(--navy);font-size:1.05rem;max-width:560px}
  .lema cite{display:block;font-style:normal;font-size:.85rem;color:var(--muted);margin-top:4px;font-weight:600}

  /* scribbles (assinatura) */
  .scribbles{position:absolute;inset:0;z-index:1;pointer-events:none}
  .scribbles path{fill:none;stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
  .s-draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
    animation:draw 1.1s ease forwards var(--delay,0s)}
  @keyframes draw{to{stroke-dashoffset:0}}
  .s-fade{opacity:0;animation:sfade .6s ease forwards var(--delay,0s)}
  @keyframes sfade{to{opacity:1}}

  /* ---------- highlight strip ---------- */
  .strip{background:var(--navy);color:#eaf0f6}
  .strip .wrap{display:flex;flex-wrap:wrap;gap:28px;align-items:center;
    padding:26px 24px;justify-content:space-between}
  .strip .note{display:flex;gap:14px;align-items:flex-start;max-width:560px}
  .strip .note .ic{flex:0 0 auto;width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.1);
    display:grid;place-items:center;font-size:20px}
  .strip .note h3{margin:0 0 2px;font-family:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:1.05rem;color:#fff}
  .strip .note p{margin:0;font-size:.92rem;color:#b9c6d4}
  .strip .launch{display:flex;gap:14px;align-items:center;background:var(--red);
    padding:14px 18px;border-radius:14px;max-width:420px}
  .strip .launch .yy{font-family:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:800;font-size:1.6rem;color:#fff;line-height:1;letter-spacing:.02em}
  .strip .launch p{margin:0;font-size:.85rem;color:#ffe2e0;line-height:1.35}
  .strip .launch p b{color:#fff}

  /* ---------- controls ---------- */
  .controls{position:sticky;top:64px;z-index:40;background:var(--paper);
    border-bottom:1px solid var(--line);padding:16px 0}
  .controls .wrap{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
  .chips{display:flex;flex-wrap:wrap;gap:8px}
  .chip{border:1.5px solid var(--line);background:#fff;border-radius:999px;
    padding:7px 15px;font-size:13.5px;font-weight:600;color:var(--navy);cursor:pointer;
    display:inline-flex;align-items:center;gap:7px;transition:.15s}
  .chip .dot{width:9px;height:9px;border-radius:50%;background:var(--c,var(--navy))}
  .chip:hover{border-color:var(--navy)}
  .chip.active{background:var(--navy);color:#fff;border-color:var(--navy)}
  .chip.active .dot{outline:2px solid rgba(255,255,255,.5)}
  .search{margin-left:auto;position:relative}
  .search input{border:1.5px solid var(--line);background:#fff;border-radius:999px;
    padding:9px 16px 9px 38px;font-size:14px;font-family:inherit;width:240px;color:var(--ink)}
  .search input:focus{outline:2px solid var(--navy);outline-offset:0;border-color:transparent}
  .search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:15px;height:15px;stroke:var(--muted)}
  @media(max-width:620px){.search{margin-left:0;width:100%}.search input{width:100%}}

  /* ---------- catalog ---------- */
  main{padding:14px 0 84px}
  .seg-head{display:flex;align-items:baseline;gap:14px;margin:38px 0 18px;padding-top:8px}
  .seg-head .bar2{width:34px;height:6px;border-radius:3px;background:var(--c)}
  .seg-head h2{font-family:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:800;color:var(--navy);
    font-size:1.7rem;letter-spacing:-.02em;margin:0}
  .seg-head .ct{font-size:.85rem;color:var(--muted);font-weight:600;margin-left:auto}
  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:20px}

  .card{position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;
    overflow:hidden;display:flex;flex-direction:column;transition:.2s;cursor:pointer}
  .card:hover{transform:translateY(-4px);box-shadow:0 14px 30px -16px rgba(14,40,65,.4);border-color:#d2cabb}
  .card:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
  .cover{position:relative;aspect-ratio:3/4;background:var(--cbg,#f3efe7);
    display:flex;flex-direction:column;justify-content:space-between;padding:16px;overflow:hidden}
  .cover img{position:absolute;inset:14px;width:calc(100% - 28px);height:calc(100% - 28px);
    object-fit:contain;object-position:center;filter:drop-shadow(0 7px 16px rgba(14,40,65,.28))}
  .card.has-cover .cover{padding:0}
  .cover .band{height:6px;width:46px;border-radius:3px;background:var(--c)}
  .cover .ct-title{font-family:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:700;color:var(--navy);
    font-size:1.12rem;line-height:1.12;letter-spacing:-.01em}
  .card.feat .cover{background:linear-gradient(150deg,#142e4a,#0E2841)}
  .card.feat .cover .ct-title{color:#fff}
  .ribbon{position:absolute;top:13px;right:-34px;transform:rotate(45deg);background:var(--red);
    color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.06em;padding:5px 40px;
    text-transform:uppercase;z-index:2}
  .meta{padding:14px 15px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
  .meta .faixa{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--c)}
  .meta h3{margin:0;font-size:1.02rem;font-weight:700;color:var(--navy);line-height:1.18;font-family:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",sans-serif}
  .meta .auth{font-size:.86rem;color:#41505e;font-weight:500}
  .meta .extra{font-size:.78rem;color:var(--muted);line-height:1.3}
  .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
  .tag{font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
    padding:3px 8px;border-radius:6px;background:var(--panel);color:#54606c}
  .tag.prize{background:#fff4e6;color:#b06a12}
  .tag.launch{background:var(--red);color:#fff}
  .cta{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-size:13.5px;
    font-weight:700;color:var(--red);padding-top:8px}
  .cta svg{width:14px;height:14px;transition:.15s}
  .card:hover .cta svg{transform:translateX(3px)}
  .empty{display:none;text-align:center;padding:60px 20px;color:var(--muted)}
  .empty.show{display:block}

  /* ---------- secondary resources ---------- */
  .resources{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .resources .wrap{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:60px 24px}
  .rcard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px}
  .rcard .k{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--crimson)}
  .rcard h3{font-family:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:1.25rem;color:var(--navy);margin:6px 0 8px}
  .rcard p{margin:0;color:#41505e;font-size:.95rem}
  @media(max-width:720px){.resources .wrap{grid-template-columns:1fr}}

  /* ---------- footer ---------- */
  footer{background:var(--navy);color:#cdd8e4;padding:48px 0 40px}
  footer .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
  footer .logo{color:#fff}
  footer h4{font-family:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",sans-serif;color:#fff;font-size:1rem;margin:0 0 14px;letter-spacing:.02em}
  footer a,footer p{font-size:.9rem;color:#aebcca;margin:5px 0;display:block}
  footer a:hover{color:#fff}
  .social{display:flex;gap:10px;margin-top:2px}
  .social a{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.06);
    display:grid;place-items:center;margin:0;color:#aebcca}
  .social a:hover{background:rgba(255,255,255,.14);color:#fff}
  .social svg{width:18px;height:18px}
  footer .help{background:rgba(255,255,255,.06);border-radius:12px;padding:16px;margin-top:10px}
  footer .help b{color:#fff}
  .fbottom{border-top:1px solid rgba(255,255,255,.12);margin-top:34px;padding-top:20px;
    font-size:.8rem;color:#8a99a9}
  @media(max-width:720px){footer .wrap{grid-template-columns:1fr}}

  @media(prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important}
    html{scroll-behavior:auto}
    .card{opacity:1!important;transform:none!important}
    .s-draw{stroke-dashoffset:0!important}
    .s-fade{opacity:1!important}
  }
  /* scroll reveal */
  .reveal{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}
  .reveal.in{opacity:1;transform:none}

  /* ---------- modal: ficha da obra ---------- */
  .modal-overlay{position:fixed;inset:0;z-index:100;background:rgba(14,40,65,.55);
    display:none;align-items:flex-start;justify-content:center;padding:40px 16px;
    overflow-y:auto;backdrop-filter:blur(2px)}
  .modal-overlay.open{display:flex}
  .modal-card{background:var(--paper);border-radius:20px;max-width:760px;width:100%;
    position:relative;box-shadow:0 30px 70px -20px rgba(14,40,65,.5);
    animation:modalIn .25s ease;overflow:hidden}
  @keyframes modalIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
  .modal-close{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;
    border:none;background:#fff;box-shadow:0 4px 12px rgba(14,40,65,.18);cursor:pointer;
    font-size:18px;line-height:1;color:var(--navy);z-index:2;display:grid;place-items:center}
  .modal-close:hover{background:var(--panel)}
  .modal-head{padding:32px 32px 20px;border-bottom:1px solid var(--line)}
  .modal-head .faixa{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--crimson)}
  .modal-head h2{font-family:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:800;color:var(--navy);
    font-size:1.7rem;line-height:1.15;margin:.3em 0 .1em;letter-spacing:-.01em}
  .modal-head .auth{font-size:.98rem;color:#41505e;font-weight:600}
  .modal-body{padding:24px 32px 32px;display:grid;gap:26px}
  .modal-body h4{font-family:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:.95rem;font-weight:700;color:var(--navy);
    text-transform:uppercase;letter-spacing:.06em;margin:0 0 10px}
  .modal-body .sinopse{font-size:1rem;line-height:1.6;color:#2c3742;margin:0}
  .modal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px 20px}
  .modal-grid .item span{display:block;font-size:11px;font-weight:700;text-transform:uppercase;
    letter-spacing:.05em;color:var(--muted);margin-bottom:2px}
  .modal-grid .item b{font-size:.92rem;color:var(--ink);font-weight:600;line-height:1.35}
  .modal-empty{padding:24px 32px 36px;color:var(--muted);font-size:.95rem;line-height:1.5}
  @media(max-width:560px){.modal-head{padding:28px 20px 16px}.modal-body,.modal-empty{padding:20px 20px 28px}}

  /* ---------- menu ---------- */
  .menu-flex{display:flex;gap:4px;list-style:none;margin:0;padding:0}
  .menu-flex li{margin:0}
  .menu-flex a{font-size:13.5px;font-weight:600;color:var(--navy);padding:8px 12px;border-radius:8px;display:inline-block}
  .menu-flex a:hover{background:var(--panel)}
  .footer-nav{display:flex;gap:14px;margin-top:14px;flex-wrap:wrap}
  .footer-nav a{display:inline;margin:0}

  /* ---------- paginas internas ---------- */
  .pag-hero{padding:56px 0 32px}
  .pag-wrap{padding:14px 0 70px}
  .pag-back{margin-top:40px}
  .pag-back a{color:var(--red);font-weight:700}

  /* ---------- contato ---------- */
  .contact-wrap{padding:14px 0 80px}
  .contact-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:20px}
  .contact-grid .rcard p{margin:6px 0}
  .contact-grid .rcard a{color:var(--navy);font-weight:600}
  .contact-form{display:flex;flex-direction:column;gap:14px;margin-top:6px}
  .contact-form label{display:flex;flex-direction:column;gap:6px;font-size:.85rem;font-weight:700;color:var(--navy)}
  .contact-form input,.contact-form textarea{font-family:inherit;font-size:.95rem;padding:10px 14px;
    border:1.5px solid var(--line);border-radius:10px;color:var(--ink);background:#fff;resize:vertical}
  .contact-form input:focus,.contact-form textarea:focus{outline:2px solid var(--navy);outline-offset:0;border-color:transparent}
  .btn-submit{align-self:flex-start;background:var(--red);color:#fff;font-weight:700;font-size:.95rem;
    padding:12px 22px;border:none;border-radius:999px;cursor:pointer;transition:.15s}
  .btn-submit:hover{background:var(--crimson)}
  .form-success{background:#E7F4DB;color:#3b6d11;padding:14px 16px;border-radius:10px;font-weight:600}
  .form-error{background:#FCE6DD;color:#b6371a;padding:12px 16px;border-radius:10px;font-weight:600;margin-bottom:4px}
  @media(max-width:780px){.contact-grid{grid-template-columns:1fr}}

  /* ============================================================
     AJUSTES ADICIONAIS
     ============================================================ */

  /* --- rodape: links legais --- */
  .fbottom{display:flex;flex-wrap:wrap-reverse;gap:8px 24px;align-items:center;justify-content:space-between}
  .fbottom-legal{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .fbottom-legal .sep{color:#5b6b7c}
  .fbottom a{display:inline;margin:0;padding:0;font-size:.8rem;font-weight:600;color:#c3cfdb;
    text-decoration:none;border-bottom:1px solid rgba(255,255,255,.28);transition:.15s}
  .fbottom a:hover{color:#fff;border-bottom-color:#fff}
  .fbottom-copy{flex:1 1 320px}
  @media(max-width:720px){.fbottom{justify-content:flex-start}}

  /* ============================================================
     FORMULARIO RD STATION
     As regras usam as classes do PROPRIO RD como escopo
     (.bricks--component-embeddable-form, .rd-form, .bricks-form__*),
     e nao dependem de nenhum wrapper do nosso lado. Essas classes so
     existem onde o RD renderiza, entao nao afetam o resto do site.
     ============================================================ */

  /* 1. involucros do RD: fundo cinza, padding e largura fixa -> zerados */
  .bricks--component-embeddable-form,
  .bricks--component-embeddable-form > div,
  [id^="rd-row-"],
  [id^="rd-section-"],
  [id^="rd-column-"],
  [id^="rd-section-"] > div,
  [id^="rd-column-"] > div,
  .rd-form{
    background:none!important;background-color:transparent!important;
    background-image:none!important;border:0!important;box-shadow:none!important;
    padding:0!important;margin:0!important;
    width:100%!important;max-width:none!important;min-height:0!important;
    border-radius:0!important}

  /* 2. tipografia do site em tudo que o RD injeta */
  .bricks--component-embeddable-form,
  .bricks--component-embeddable-form *{
    font-family:"Hanken Grotesk",system-ui,sans-serif!important;
    box-sizing:border-box!important;letter-spacing:0!important}

  /* 3. titulo/descricao do RD (o cartao do site ja tem o proprio titulo) */
  .bricks-form__title,
  .rd-form__title{display:none!important}

  /* 4. o formulario */
  .rd-form form,
  .bricks--component-embeddable-form form{
    display:flex!important;flex-direction:column!important;gap:16px!important;
    width:100%!important;max-width:none!important;
    padding:0!important;margin:0!important;
    background:none!important;border:0!important}

  .bricks--component-embeddable-form fieldset,
  .bricks-form__fieldset{border:0!important;padding:0!important;margin:0!important;
    display:flex!important;flex-direction:column!important;gap:16px!important}

  /* 5. cada campo (o RD entrega com altura fixa) */
  .rd-form form .bricks-form__field,
  .bricks-form__field{display:block!important;height:auto!important;min-height:0!important;
    margin:0!important;padding:0!important;background:none!important}

  /* 6. rotulos */
  .rd-form form label,
  .bricks-form__label,
  .bricks--component-embeddable-form label{
    display:block!important;margin:0 0 6px 0!important;padding:0!important;
    font-size:.85rem!important;font-weight:700!important;color:#0E2841!important;
    line-height:1.3!important;text-transform:none!important;opacity:1!important}

  /* 7. campos de texto, select e textarea */
  .rd-form form input[type="text"],
  .rd-form form input[type="email"],
  .rd-form form input[type="tel"],
  .rd-form form input[type="number"],
  .rd-form form input[type="url"],
  .rd-form form input[type="date"],
  .rd-form form select,
  .rd-form form textarea,
  .rd-form form .bricks-form__input,
  .bricks--component-embeddable-form input[type="text"],
  .bricks--component-embeddable-form input[type="email"],
  .bricks--component-embeddable-form input[type="tel"],
  .bricks--component-embeddable-form select,
  .bricks--component-embeddable-form textarea{
    width:100%!important;height:auto!important;min-height:0!important;
    font-size:.95rem!important;line-height:1.4!important;
    padding:11px 14px!important;margin:0!important;
    border:1.5px solid #E4DFD4!important;border-radius:10px!important;
    color:#16202b!important;background-color:#fff!important;background-image:none!important;
    box-shadow:none!important;outline:none!important;
    -webkit-appearance:none!important;appearance:none!important}

  .rd-form form textarea,
  .bricks--component-embeddable-form textarea{
    min-height:110px!important;resize:vertical!important}

  /* seta propria do select, ja que appearance foi zerada */
  .rd-form form select,
  .bricks--component-embeddable-form select{
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E2841' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")!important;
    background-repeat:no-repeat!important;background-position:right 13px center!important;
    background-size:15px!important;padding-right:38px!important;cursor:pointer!important}

  .rd-form form input:focus,
  .rd-form form select:focus,
  .rd-form form textarea:focus,
  .bricks--component-embeddable-form input:focus,
  .bricks--component-embeddable-form select:focus,
  .bricks--component-embeddable-form textarea:focus{
    outline:2px solid #0E2841!important;outline-offset:0!important;
    border-color:transparent!important}

  .bricks--component-embeddable-form ::placeholder{color:#93a1ae!important;opacity:1!important}

  /* 8. checkbox e radio */
  .rd-form form input[type="checkbox"],
  .rd-form form input[type="radio"],
  .bricks--component-embeddable-form input[type="checkbox"],
  .bricks--component-embeddable-form input[type="radio"]{
    width:17px!important;height:17px!important;min-height:0!important;
    flex:0 0 auto!important;padding:0!important;margin:1px 9px 0 0!important;
    accent-color:#ED1B2F!important;cursor:pointer!important;
    -webkit-appearance:auto!important;appearance:auto!important}

  .bricks-form__field__option,
  .bricks-form__field--checkbox label,
  .bricks-form__field--radio label{
    display:flex!important;align-items:flex-start!important;
    margin:0 0 8px 0!important;
    font-size:.88rem!important;font-weight:500!important;color:#16202b!important;
    line-height:1.5!important;cursor:pointer!important}

  /* 9. Select2 (usado no campo Cidade e afins) */
  .bricks--component-embeddable-form .select2-container{width:100%!important}
  .bricks--component-embeddable-form .select2-container .select2-choice,
  .bricks--component-embeddable-form .select2-container .select2-selection{
    display:flex!important;align-items:center!important;
    height:auto!important;min-height:0!important;
    padding:11px 14px!important;margin:0!important;
    border:1.5px solid #E4DFD4!important;border-radius:10px!important;
    background-color:#fff!important;background-image:none!important;
    box-shadow:none!important;color:#16202b!important;
    font-size:.95rem!important;line-height:1.4!important}
  .bricks--component-embeddable-form .select2-container .select2-arrow,
  .bricks--component-embeddable-form .select2-container .select2-selection__arrow{
    border:0!important;background:none!important}
  .bricks--component-embeddable-form .select2-chosen,
  .bricks--component-embeddable-form .select2-selection__rendered{
    padding:0!important;line-height:1.4!important;color:#16202b!important}
  .bricks--component-embeddable-form .select2-container .flag{
    margin-right:8px!important;border-radius:3px!important}

  /* 10. botao de envio: vermelho SM, pilula, alinhado a esquerda */
  .rd-form form button,
  .rd-form form input[type="submit"],
  .bricks-form__submit button,
  .bricks-form__submit input[type="submit"],
  .bricks--component-embeddable-form button[type="submit"],
  .bricks--component-embeddable-form input[type="submit"],
  .rd-button{
    display:inline-block!important;align-self:flex-start!important;
    width:auto!important;min-width:0!important;max-width:none!important;
    height:auto!important;min-height:0!important;
    background-color:#ED1B2F!important;background-image:none!important;
    color:#fff!important;
    font-size:.95rem!important;font-weight:700!important;line-height:1!important;
    padding:14px 30px!important;margin:2px 0 0 0!important;
    border:0!important;border-radius:999px!important;box-shadow:none!important;
    text-transform:none!important;text-shadow:none!important;
    cursor:pointer!important;transition:background-color .15s!important}

  .rd-form form button:hover,
  .rd-form form input[type="submit"]:hover,
  .bricks-form__submit button:hover,
  .bricks--component-embeddable-form button[type="submit"]:hover,
  .rd-button:hover{background-color:#C00000!important}

  .bricks-form__submit{display:flex!important;
    margin:0!important;padding:0!important;background:none!important;width:100%!important}

  /* 11. mensagens e texto de consentimento */
  .bricks-form__message,
  .rd-form__error,
  .bricks--component-embeddable-form .error-message,
  .bricks--component-embeddable-form .validation-error{
    display:block!important;background-color:#FCE6DD!important;color:#b6371a!important;
    padding:8px 12px!important;margin-top:6px!important;border-radius:8px!important;
    font-size:.8rem!important;font-weight:600!important}

  .bricks-form__success,
  .rd-form__success,
  .bricks--component-embeddable-form .conversion-success{
    background-color:#E7F4DB!important;color:#3b6d11!important;
    padding:14px 16px!important;border-radius:10px!important;
    font-size:.95rem!important;font-weight:600!important}

  .bricks-form__privacy,
  .rd-form__privacy,
  .bricks--component-embeddable-form .privacy-policy{
    font-size:.78rem!important;color:#5d6b7a!important;line-height:1.55!important}
  .bricks--component-embeddable-form .privacy-policy a,
  .bricks-form__privacy a{color:#ED1B2F!important;text-decoration:underline!important}

  /* ============================================================
     PAGINA DE OBRIGADO (/obrigado/)
     ============================================================ */
  .obrigado-hero{padding-top:44px}
  .obrigado-check{width:60px;height:60px;margin-bottom:18px}
  .obrigado-check svg{width:60px;height:60px;display:block}
  .obrigado-check circle{fill:none;stroke:var(--cy-green);stroke-width:3}
  .obrigado-check path{fill:none;stroke:var(--cy-green);stroke-width:4;
    stroke-linecap:round;stroke-linejoin:round;
    stroke-dasharray:40;stroke-dashoffset:40;animation:obrigado-draw .5s .15s ease forwards}
  @keyframes obrigado-draw{to{stroke-dashoffset:0}}

  .obrigado-wrap{padding:8px 0 80px}

  .obrigado-next{background:#fff;border:1px solid var(--line);border-radius:16px;
    padding:28px 30px;margin-bottom:22px}
  .obrigado-next .k{font-size:12px;font-weight:700;text-transform:uppercase;
    letter-spacing:.1em;color:var(--crimson)}
  .obrigado-steps{list-style:none;margin:18px 0 0;padding:0}
  .obrigado-steps li{display:flex;gap:14px;align-items:flex-start;margin-bottom:16px}
  .obrigado-steps li:last-child{margin-bottom:0}
  .obrigado-steps .n{flex:0 0 auto;width:28px;height:28px;border-radius:50%;
    color:#fff;font-weight:700;font-size:.85rem;display:flex;align-items:center;
    justify-content:center;margin-top:1px}
  .obrigado-steps p{margin:0;color:#2c3a48;font-size:.98rem;line-height:1.55}
  .obrigado-auto{margin:22px 0 0;padding-top:18px;border-top:1px solid var(--line);
    font-size:.88rem;color:#6a7480;line-height:1.55}

  .obrigado-cta{display:grid;grid-template-columns:1.3fr 1fr;gap:18px;align-items:stretch}
  .obrigado-cta > div:first-child{background:var(--navy);border-radius:16px;
    padding:30px 32px;color:#fff}
  .obrigado-cta h2{font-family:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:1.5rem;line-height:1.2;
    margin:0 0 10px;color:#fff}
  .obrigado-cta > div:first-child p{margin:0 0 20px;color:#c3cfdb;font-size:.98rem;line-height:1.55}
  .obrigado-btn{display:inline-block;background:var(--red);color:#fff;font-weight:700;
    font-size:.98rem;padding:13px 26px;border-radius:999px;text-decoration:none;transition:.15s}
  .obrigado-btn:hover{background:#fff;color:var(--navy)}

  .obrigado-links{display:flex;flex-direction:column;gap:14px}
  .obrigado-links a{flex:1;background:#fff;border:1px solid var(--line);border-radius:14px;
    padding:18px 20px;text-decoration:none;display:flex;flex-direction:column;
    justify-content:center;transition:.15s}
  .obrigado-links a:hover{border-color:var(--navy);transform:translateY(-2px)}
  .obrigado-links strong{color:var(--navy);font-family:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",sans-serif;
    font-size:1.05rem;margin-bottom:3px}
  .obrigado-links span{color:#6a7480;font-size:.9rem;line-height:1.45}

  @media(max-width:720px){
    .obrigado-cta{grid-template-columns:1fr}
  }
  @media(prefers-reduced-motion:reduce){
    .obrigado-check path{animation:none;stroke-dashoffset:0}
  }

  /* ============================================================
     CAMADA DE IDENTIDADE — CF 2027 "GIZ & PAPEL"
     Aplicada por cima do tema. Nao renomeia classes: so redefine
     superficies, texturas e acentos.
     ============================================================ */

  /* --- papel com grao --- */
  body{position:relative;background:var(--paper)}
  body::before{
    content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
    background-image:var(--grain);background-size:160px 160px;
    opacity:.28;mix-blend-mode:multiply;
  }
  body > *{position:relative;z-index:1}

  /* --- barra do topo --- */
  header.bar{background:rgba(252,248,240,.92);border-bottom:1px solid var(--line)}
  .logo{color:var(--blue-deep)}
  nav.seg a,.menu-flex a{color:var(--blue-deep)}
  nav.seg a:hover,.menu-flex a:hover{background:var(--blue-soft)}

  /* --- campo de rabiscos de giz (mascara: aceita qualquer cor) --- */
  .chalkfield::before{
    content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
    background:var(--chalk-ink,var(--blue));
    opacity:var(--chalk-op,.55);
    -webkit-mask:url("/assets/img/cf/doodles-kv.svg") repeat;
    mask:url("/assets/img/cf/doodles-kv.svg") repeat;
    -webkit-mask-size:var(--chalk-size,340px);mask-size:var(--chalk-size,340px);
  }

  /* --- hero: painel azul-giz com rabiscos --- */
  .hero,.pag-hero{
    background-color:var(--blue-wash);
    border-bottom:0;padding-bottom:64px;
  }
  .hero::before,.pag-hero::before{
    content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
    background:var(--blue);opacity:.5;
    -webkit-mask:url("/assets/img/cf/doodles-kv.svg") repeat;
    mask:url("/assets/img/cf/doodles-kv.svg") repeat;
    -webkit-mask-size:340px;mask-size:340px;
  }
  /* rabiscos coloridos do hero: removidos — o campo de giz assumiu o papel */
  .scribbles{display:none}
  .hero::after,.pag-hero::after{
    content:"";position:absolute;left:0;right:0;bottom:-1px;height:22px;z-index:3;
    background:var(--paper);
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='22' preserveAspectRatio='none'%3E%3Cpath d='M0 22V9c18-6 30 4 48 1s28-9 46-5 26 10 44 7 30-9 48-6 28 8 46 5 32-8 46-3 22 4 22 4v10z' fill='%23000'/%3E%3C/svg%3E") repeat-x bottom/300px 22px;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='22' preserveAspectRatio='none'%3E%3Cpath d='M0 22V9c18-6 30 4 48 1s28-9 46-5 26 10 44 7 30-9 48-6 28 8 46 5 32-8 46-3 22 4 22 4v10z' fill='%23000'/%3E%3C/svg%3E") repeat-x bottom/300px 22px;
  }
  .pag-hero{position:relative;overflow:hidden}
  .hero .wrap,.pag-hero .wrap{position:relative;z-index:2}

  .eyebrow{color:var(--clay-ink)}
  .eyebrow::before{background:var(--clay-ink)}
  h1.title{color:var(--blue-deep)}
  h1.title .yr{color:var(--clay)}
  .lede strong{color:var(--blue-deep)}
  .lema{
    border-left:0;padding:14px 18px;border-radius:4px 14px 14px 14px;
    background:rgba(255,253,247,.72);box-shadow:inset 4px 0 0 var(--sun);
    color:var(--ink);backdrop-filter:blur(2px);
  }

  /* --- faixa de destaque --- */
  .strip{background:var(--blue-deep);color:#e6f1f6;position:relative;overflow:hidden}
  .strip::before{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:var(--chalk);opacity:.14;
    -webkit-mask:url("/assets/img/cf/doodles-kv.svg") repeat;
    mask:url("/assets/img/cf/doodles-kv.svg") repeat;
    -webkit-mask-size:300px;mask-size:300px;
  }
  .strip .wrap{position:relative;z-index:1}
  .strip .note p{color:#bcd6e2}
  .strip .note .ic{background:rgba(255,255,255,.12)}
  .strip .launch{background:var(--red);box-shadow:0 10px 24px -12px rgba(0,0,0,.5)}
  .strip .launch p{color:#ffe4e1}

  /* --- controles / chips --- */
  .controls{background:rgba(252,248,240,.95);border-bottom:1px solid var(--line)}
  .chip{border-color:var(--line);color:var(--blue-deep)}
  .chip:hover{border-color:var(--blue)}
  .chip.active{background:var(--blue-deep);border-color:var(--blue-deep)}
  .search input:focus{outline-color:var(--blue)}

  /* --- catalogo --- */
  .seg-head h2{color:var(--blue-deep)}
  .card{border-color:var(--line);box-shadow:0 1px 0 rgba(18,51,63,.04)}
  .card:hover{box-shadow:0 16px 32px -18px rgba(18,51,63,.45);border-color:#d5c8b1}
  .card:focus-visible{outline-color:var(--blue)}
  .cover{background:var(--cbg,var(--blue-wash))}
  .cover .ct-title,.meta h3{color:var(--blue-deep)}
  .card.feat .cover{background:linear-gradient(150deg,#256b8a,#1B5670)}
  .tag{background:var(--panel);color:#5c6a6f}
  .tag.prize{background:#FBEBD2;color:#9a641a}
  .modal-overlay{background:rgba(18,51,63,.55)}
  .modal-head h2,.modal-body h4,.obrigado-links strong{color:var(--blue-deep)}
  .modal-close{color:var(--blue-deep)}
  .modal-close:hover{background:var(--blue-soft)}

  /* --- blocos secundarios --- */
  .resources{background:var(--panel);border-color:var(--line)}
  .rcard{border-color:var(--line)}
  .rcard .k,.modal-head .faixa{color:var(--clay-ink)}
  /* rotulo de segmento: mesma matiz, escurecida para leitura */
  .meta .faixa{color:color-mix(in srgb,var(--c) 60%,var(--ink))}
  @supports not (color:color-mix(in srgb,red,blue)){.meta .faixa{color:var(--blue-deep)}}
  .rcard h3{color:var(--blue-deep)}

  /* --- formulario / botoes --- */
  .btn-submit,.obrigado-btn{background:var(--red)}
  .btn-submit:hover{background:var(--clay)}
  .contact-form input:focus,.contact-form textarea:focus{outline-color:var(--blue)}
  .contact-grid .rcard a,.contact-form label{color:var(--blue-deep)}
  .form-success{background:#E9F1DE;color:#4a6b2a}
  .form-error{background:#FBE4DF;color:#a9412f}

  /* --- rodape --- */
  footer{background:var(--blue-deep);color:#cfe1e9;position:relative;overflow:hidden}
  footer::before{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:var(--chalk);opacity:.12;
    -webkit-mask:url("/assets/img/cf/doodles-kv.svg") repeat;
    mask:url("/assets/img/cf/doodles-kv.svg") repeat;
    -webkit-mask-size:320px;mask-size:320px;
  }
  footer .wrap,.fbottom{position:relative;z-index:1}
  footer a,footer p{color:#b3cbd6}
  .fbottom{color:#8fabb7}
  .fbottom a{color:#cfe1e9}

  /* --- pagina /obrigado/ --- */
  .obrigado-cta > div:first-child{background:var(--blue-deep)}
  .obrigado-cta > div:first-child p{color:#c6dbe4}
  .obrigado-btn:hover{background:var(--chalk);color:var(--blue-deep)}
  .obrigado-links a:hover{border-color:var(--blue)}

  /* --- paginacao --- */
  .carousel-btn{color:var(--blue-deep)}
  .carousel-btn:hover{border-color:var(--blue)}

  /* --- conteudo do post --- */

  @media(prefers-reduced-motion:reduce){
    body::before{opacity:.35}
  }

  /* ============================================================
     KEY VISUAL CF 2027 — hero da home
     Papel azul + rabiscos de giz + tipografia e cores do KV,
     com os personagens do KV recortados.
     ============================================================ */

  @font-face{font-family:"Fredoka","Bricolage Grotesque",system-ui,sans-serif;src:url("/assets/fonts/fredoka-latin-500-normal.woff2") format("woff2");
    font-weight:500;font-style:normal;font-display:swap}
  @font-face{font-family:"Fredoka","Bricolage Grotesque",system-ui,sans-serif;src:url("/assets/fonts/fredoka-latin-600-normal.woff2") format("woff2");
    font-weight:600;font-style:normal;font-display:swap}
  @font-face{font-family:"Fredoka","Bricolage Grotesque",system-ui,sans-serif;src:url("/assets/fonts/fredoka-latin-700-normal.woff2") format("woff2");
    font-weight:700;font-style:normal;font-display:swap}

  :root{
    --kv-blue:#689FBA;      /* azul do papel do KV (amostrado do SVG) */
    --kv-blue-dk:#4E86A2;   /* azul escurecido: barra e faixas */
    --kv-cream:#F2E3CA;     /* creme do "Campanha da" */
    --kv-amber:#E8BD61;     /* amarelo do "Fraternidade" */
    --kv-sky:#C7DFED;       /* azul claro do "2027" */
  }

  /* --- barra do topo sobre o KV --- */
  header.bar-kv{background:rgba(78,134,162,.94);border-bottom:1px solid rgba(255,255,255,.18)}
  .bar-kv .logo{color:#fff}
  .bar-kv .logo .sub{color:rgba(255,255,255,.75)}
  .bar-kv nav.seg a,.bar-kv .menu-flex a{color:#fff}
  .bar-kv nav.seg a:hover,.bar-kv .menu-flex a:hover{background:rgba(255,255,255,.16)}

  /* --- o campo do KV --- */
  .hero-kv{
    position:relative;overflow:hidden;padding:0;border-bottom:0;
    background:var(--kv-blue) url("/assets/img/cf/kv-fundo.jpg") center/cover no-repeat;
    min-height:clamp(560px,82vh,780px);
    display:flex;flex-direction:column;align-items:stretch;
  }
  /* margin:0 auto desliga o stretch de flex/grid: width:100% resolve */
  .hero-kv > .wrap{width:100%;max-width:var(--maxw)}
  .hero-kv > .kv-mid{flex:1 1 auto;max-width:920px}
  .hero-kv > .kv-top,.hero-kv > .kv-kids-space{flex:0 0 auto}
  .hero-kv::before{content:none}          /* cancela o campo de giz claro do tema */


  /* --- linha superior: tema + lema --- */
  /* veu do KV: recua os rabiscos e garante contraste do texto */
  .hero-kv::before{
    content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(180deg,
      rgba(104,159,186,.42) 0%,
      rgba(104,159,186,.30) 48%,
      rgba(104,159,186,.12) 78%,
      rgba(104,159,186,0) 100%);
  }

  .kv-top{
    position:relative;z-index:2;display:flex;gap:20px;justify-content:space-between;
    align-items:baseline;flex-wrap:wrap;padding-top:26px;padding-bottom:6px;
    color:#fff;font-size:clamp(.82rem,1.35vw,1rem);
  }
  .kv-tema{font-weight:700}
  .kv-lema{opacity:.92}

  /* --- bloco central --- */
  .kv-mid{
    position:relative;z-index:2;display:flex;flex-direction:column;
    align-items:center;justify-content:center;text-align:center;
    padding-top:8px;padding-bottom:18px;max-width:900px;
  }
  .kv-title{
    font-family:"Fredoka","Bricolage Grotesque",system-ui,sans-serif;
    text-transform:uppercase;margin:0;line-height:.94;letter-spacing:.005em;
    text-shadow:0 3px 14px rgba(20,60,80,.16);
  }
  .kv-title span{display:block}
  .kv-title .l1{font-weight:600;font-size:clamp(1.9rem,5.2vw,4.1rem);color:var(--kv-cream)}
  .kv-title .l2{font-weight:600;font-size:clamp(2.2rem,6.4vw,5rem);color:var(--kv-amber)}
  .kv-title .l3{font-weight:500;font-size:clamp(1.7rem,4.4vw,3.4rem);color:var(--kv-sky);
    letter-spacing:.03em;margin-top:.04em}

  .kv-lede{
    margin:16px auto 0;max-width:560px;color:#fff;font-weight:500;
    font-size:clamp(.95rem,1.6vw,1.12rem);line-height:1.5;
    text-shadow:0 1px 8px rgba(20,60,80,.28);
  }
  .kv-lede strong{color:var(--kv-cream);font-weight:700}

  .kv-cta{
    display:inline-flex;align-items:center;gap:8px;margin-top:20px;
    background:var(--red);color:#fff;font-weight:700;font-size:.98rem;
    padding:13px 26px;border-radius:999px;transition:.15s;
    box-shadow:0 12px 26px -14px rgba(10,40,55,.8);
  }
  .kv-cta::after{content:"\2192";transition:.15s}
  .kv-cta:hover{background:#fff;color:var(--blue-deep)}
  .kv-cta:hover::after{transform:translateX(3px)}

  /* --- personagens do KV --- */
  .kv-kids-space{position:relative;height:clamp(180px,25vw,330px);z-index:1}
  .kv-kids-space picture{display:contents}
  .kv-kids{
    position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);
    width:min(1080px,94vw);height:auto;max-width:none;z-index:1;
    filter:drop-shadow(0 14px 26px rgba(15,50,68,.28));
  }

  /* a borda rasgada passa por cima dos personagens */
  .hero-kv::after{height:30px;z-index:4;
    -webkit-mask-size:300px 30px;mask-size:300px 30px}

  @media(max-width:760px){
    .kv-top{flex-direction:column;gap:4px;padding-top:20px}
    .kv-lema{font-size:.8rem}
    .hero-kv{min-height:auto}
    .kv-mid{padding-top:18px}
    .kv-kids{width:118vw}
  }

  /* faixa de destaque em versao clara, para emendar com a borda rasgada */
  .strip.strip-light{background:var(--panel);color:var(--ink);border-bottom:1px solid var(--line)}
  .strip.strip-light::before{background:var(--blue-deep);opacity:.08}
  .strip.strip-light .note h3{color:var(--blue-deep)}
  .strip.strip-light .note p{color:#4b5b62}
  .strip.strip-light .note .ic{background:var(--blue-soft)}
  .pag-hero{
    background:var(--kv-blue) url("/assets/img/cf/kv-fundo.jpg") center/cover no-repeat;
    padding:52px 0 60px;position:relative;overflow:hidden;
  }
  .pag-hero::before{content:none}
  .pag-hero .eyebrow{color:var(--kv-cream)}
  .pag-hero .eyebrow::before{background:var(--kv-cream)}
  .pag-hero h1.title{
    color:#fff;font-family:"Fredoka","Bricolage Grotesque",system-ui,sans-serif;
    font-weight:600;letter-spacing:0;line-height:1.04;
    text-shadow:0 3px 14px rgba(20,60,80,.18);
  }
  .pag-hero .lede{color:rgba(255,255,255,.94)}
  .pag-hero .lede strong{color:var(--kv-cream)}
  .pag-hero::after{height:30px;z-index:3;
    -webkit-mask-size:300px 30px;mask-size:300px 30px}
  .pag-hero h1.title{margin-bottom:.24em}

  /* --- nota de capa: quando a imagem nao e a capa oficial --- */
  .cover-note{
    position:absolute;left:0;right:0;bottom:0;z-index:2;
    background:linear-gradient(180deg,rgba(18,51,63,0),rgba(18,51,63,.82) 42%);
    color:#fff;font-size:10px;font-weight:600;line-height:1.35;
    letter-spacing:.01em;padding:24px 10px 9px;text-align:center;
    text-wrap:balance;
  }
  .modal-nota{
    margin:10px 0 0;font-size:.82rem;color:var(--muted);
    display:inline-flex;align-items:center;gap:7px;
  }
  .modal-nota::before{
    content:"";flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--sun);
  }