@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

@font-face {
  font-family: 'Jakarta';
  src: url('fonts/jakarta.woff2') format('woff2');
  font-weight: normal; font-style: normal;
}
@font-face {
  font-family: 'Bimbo';
  src: url('fonts/bimbo.woff2') format('woff2');
  font-weight: normal; font-style: normal;
}

* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }

/* Jakarta e Bimbo (trial) não têm acentos utilizáveis (Bimbo carimba "TRIAL" em cima, Jakarta simplesmente não tem o glifo) —
   usamos a letra sem acento e desenhamos o acento por cima via CSS mask, herdando a cor do texto (currentColor). */
.fk { position: relative; display: inline; white-space: nowrap; }
.fk::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; pointer-events: none; }
.fk-ac::after, .fk-ci::after, .fk-ti::after, .fk-gr::after { top: -.02em; width: .46em; height: .26em; }
.fk-ce::after { top: auto; bottom: .05em; width: .32em; height: .26em; }
.fk-ac::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M6%2019%20L18%205'%20stroke='%23000'%20stroke-width='4.5'%20stroke-linecap='round'%20fill='none'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M6%2019%20L18%205'%20stroke='%23000'%20stroke-width='4.5'%20stroke-linecap='round'%20fill='none'/%3E%3C/svg%3E"); }
.fk-gr::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M18%2019%20L6%205'%20stroke='%23000'%20stroke-width='4.5'%20stroke-linecap='round'%20fill='none'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M18%2019%20L6%205'%20stroke='%23000'%20stroke-width='4.5'%20stroke-linecap='round'%20fill='none'/%3E%3C/svg%3E"); }
.fk-ci::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M4%2016%20L12%206%20L20%2016'%20stroke='%23000'%20stroke-width='4'%20stroke-linecap='round'%20stroke-linejoin='round'%20fill='none'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M4%2016%20L12%206%20L20%2016'%20stroke='%23000'%20stroke-width='4'%20stroke-linecap='round'%20stroke-linejoin='round'%20fill='none'/%3E%3C/svg%3E"); }
.fk-ti::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M2%2014%20C6%204%2C10%204%2C12%2010%20C14%2016%2C18%2016%2C22%208'%20stroke='%23000'%20stroke-width='3.4'%20stroke-linecap='round'%20fill='none'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M2%2014%20C6%204%2C10%204%2C12%2010%20C14%2016%2C18%2016%2C22%208'%20stroke='%23000'%20stroke-width='3.4'%20stroke-linecap='round'%20fill='none'/%3E%3C/svg%3E"); }
.fk-ce::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M15%204%20C15%2012%2C10%2012%2C8%2016%20C6.5%2019%2C9%2022%2C13%2021'%20stroke='%23000'%20stroke-width='3.4'%20stroke-linecap='round'%20fill='none'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M15%204%20C15%2012%2C10%2012%2C8%2016%20C6.5%2019%2C9%2022%2C13%2021'%20stroke='%23000'%20stroke-width='3.4'%20stroke-linecap='round'%20fill='none'/%3E%3C/svg%3E"); }

:root {
  --ink: #453147;
  --muted: #7a6a7d;
  --orange: #F2879B;
  --yellow: #FDCF65;
  --pink: #F2879B;
  --mustard: #FDCF65;
  --green: #C1DB98;
  --blue: #ADD4E9;
  --purple: #C1A8DF;
  --line: #ddc9e0;
}

body {
  background-color: #f5eee2;
  background-image: url('assets/paper.jpg');
  background-size: 1400px auto;
  background-repeat: repeat;
  color: var(--ink);
}

a { color:inherit; }

.wrap { max-width: 1180px; margin:0 auto; padding: 0 40px; }

/* NAV */
.nav { display:flex; justify-content:space-between; align-items:center; padding: 26px 0 10px; flex-wrap:wrap; gap:16px; }
.nav .brand { display:flex; align-items:center; font-family:'Jakarta',sans-serif; font-size:24px; letter-spacing:0.05em; color:var(--ink); text-decoration:none; }
.nav .links { display:flex; gap:22px; align-items:center; }
.nav .links a { font-family:'Montserrat',sans-serif; font-size:17px; font-weight:600; letter-spacing:0.03em; text-decoration:none; color:var(--muted); }
.nav .links a.active, .nav .links a:hover { color:var(--orange); }
.nav .insta { font-family:'Montserrat',sans-serif; font-size:17px; color:var(--muted); text-decoration:none; }
.nav .insta:hover { color:var(--orange); }

/* HERO */
.hero { display:grid; grid-template-columns: 1fr 380px; gap: 40px; align-items:center; padding: 30px 0 50px; }
.eyebrow-tag {
  display:inline-block; font-family:'Montserrat', sans-serif; font-weight:700;
  font-size: 11px; letter-spacing:0.1em; text-transform:uppercase; color: var(--orange);
  background: var(--yellow); border: none; padding: 7px 13px; border-radius: 3px; margin-bottom: 22px;
  transform: rotate(-1deg);
}
h1.title { margin-bottom: 18px; }
h1.title img { max-width: 560px; width:100%; display:block; }
.tagline { font-family:'Bimbo', cursive; font-size:30px; color: var(--muted); line-height:1.25; margin-bottom: 16px; }
.body-txt { font-family:'Montserrat', sans-serif; font-size:17px; color:var(--muted); max-width:440px; line-height:1.65; margin-bottom: 30px; }
.cta-row { display:flex; gap:12px; flex-wrap:wrap; }
.btn { font-family:'Montserrat',sans-serif; font-size:14px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; padding:13px 22px; border-radius:3px; text-decoration:none; display:inline-block; cursor:pointer; border:none; }
.btn-solid { background: var(--orange); color:#fff; }
.btn-dashed { border:1.5px dashed var(--mustard); color: var(--ink); background:transparent; }

.hero-photos { position:relative; height: 300px; }
.hero-photos-single { height: 270px; display:flex; align-items:flex-start; justify-content:center; }
.hero-caption { font-family:'Montserrat',sans-serif; font-size:14px; font-style:italic; color:var(--muted); text-align:center; max-width:280px; margin:14px auto 0; line-height:1.5; }
.polaroid { position:absolute; background:#fff; padding:9px 9px 26px; box-shadow:0 10px 22px rgba(0,0,0,0.16); }
.polaroid img { display:block; }
.polaroid .tape { position:absolute; width:60px; height:26px; background-image:url('assets/fita.png'); background-size:cover; opacity:0.88; }
.polaroid .cap { position:absolute; bottom:4px; left:0; right:0; text-align:center; font-family:'Bimbo',cursive; font-size:16px; color:#333; }
.hero-photos .p-main { top:0; left:20px; width:230px; transform:rotate(-4deg); z-index:2; }
.hero-photos-single .p-main { left:75px; }
.hero-photos .p-main img { width:212px; height:250px; object-fit:cover; }
.hero-photos .p-main .tape { top:-12px; left:76px; }
.hero-photos .p-side { top:36px; left:250px; width:120px; transform:rotate(6deg); z-index:1; }
.hero-photos .p-side img { width:102px; height:122px; object-fit:cover; }
.hero-photos .p-side .tape { top:-10px; left:30px; width:44px; height:20px; }

/* DIVIDER */
.divider { border-top: 1.5px dashed var(--line); margin: 10px 0 54px; }

/* PLACEHOLDER SECTIONS (sobre.html) */
.provisorio {
  display:inline-block; font-family:'Montserrat',sans-serif; font-size:10px; font-weight:700;
  letter-spacing:0.08em; text-transform:uppercase; color:#fff; background:var(--pink);
  padding:4px 10px; border-radius:2px; margin-bottom:16px;
}
.section-simple { padding-bottom: 54px; }
.person-block { display:grid; grid-template-columns: 220px 1fr; gap:32px; align-items:start; }
.person-photo { width:100%; border-radius:12px; object-fit:cover; aspect-ratio:3/4; box-shadow:0 10px 22px rgba(0,0,0,0.16); background:#fff; }
@media (max-width:700px) { .person-block { grid-template-columns:1fr; } .person-photo { max-width:220px; } }
.section-simple h2 { font-family:'Jakarta', serif; font-weight:400; font-size:56px; letter-spacing:0.04em; color:var(--purple); margin-bottom:18px; }
.section-simple .lorem { font-family:'Montserrat',sans-serif; font-size:16.5px; color:var(--muted); line-height:1.75; max-width:640px; }
.section-simple .signature { font-family:'Bimbo',cursive; font-size:25px; color:var(--orange); margin-top:16px; }
.page-head { padding: 46px 0 20px; }
.page-head h1 { font-family:'Jakarta', sans-serif; font-size:66px; letter-spacing:0.04em; color:var(--purple); margin-bottom:10px; }
.page-head p { font-family:'Montserrat',sans-serif; font-size:16.5px; color:var(--muted); max-width:520px; }

.atelie-gallery { display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; }
.atelie-gallery img { width:100%; height:230px; object-fit:cover; border-radius:6px; box-shadow:0 8px 16px rgba(0,0,0,0.14); background:#fff; padding:6px; }
.atelie-gallery .wide { grid-column: span 2; }
@media (max-width:700px) { .atelie-gallery { grid-template-columns: repeat(2,1fr); } .atelie-gallery .wide { grid-column: span 2; } }

/* CATALOGO HEADER */
.catalogo-head { text-align:center; padding-bottom: 46px; }
.catalogo-head h2 { font-family:'Jakarta', sans-serif; font-weight:400; font-size:58px; letter-spacing:0.04em; color:var(--purple); margin-bottom:10px; }
.catalogo-head h2 .n { color:var(--orange); }
.catalogo-head p { font-family:'Montserrat',sans-serif; font-size:16px; color:var(--muted); }

/* SPECIES CARD */
.card { position:relative; display:flow-root; padding-bottom: 54px; isolation:isolate; }
.card-num { font-family:'Montserrat',sans-serif; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color: var(--pink); background:var(--ink); display:inline-block; padding:3px 9px; border-radius:2px; margin-bottom:14px; }
.torn-strip {
  height: 250px; width:100%; position:relative; background-size:cover; background-position:center; background-repeat:no-repeat;
  clip-path: polygon(
    0% 8%,3% 2%,6% 9%,9% 3%,12% 8%,15% 2%,18% 7%,21% 1%,24% 8%,27% 3%,
    30% 9%,33% 2%,36% 7%,39% 1%,42% 8%,45% 3%,48% 9%,51% 2%,54% 7%,57% 1%,
    60% 8%,63% 3%,66% 9%,69% 2%,72% 7%,75% 1%,78% 8%,81% 3%,84% 9%,87% 2%,
    90% 7%,93% 1%,96% 8%,100% 3%,
    100% 92%,97% 98%,94% 91%,91% 97%,88% 92%,85% 98%,82% 93%,79% 99%,76% 92%,73% 97%,
    70% 91%,67% 98%,64% 93%,61% 99%,58% 92%,55% 97%,52% 91%,49% 98%,46% 93%,43% 99%,
    40% 92%,37% 97%,34% 91%,31% 98%,28% 93%,25% 99%,22% 92%,19% 97%,16% 91%,13% 98%,
    10% 93%,7% 99%,4% 92%,0% 97%
  );
}
.torn-strip .tape { position:absolute; top:-10px; left:34px; width:58px; height:24px; background-image:url('assets/fita.png'); background-size:cover; opacity:0.85; z-index:2; }
.card-body { display:grid; grid-template-columns:190px 1fr 220px; gap:32px; padding: 8px 6px 0; align-items:start; }
.card-body .polaroid { position:relative; }
.card-body .polaroid img { width:172px; height:210px; object-fit:cover; }
.card-body .polaroid .tape { top:-12px; left:56px; }
.card.odd .polaroid { transform:rotate(-3deg); }
.card.even .polaroid { transform:rotate(3deg); }
.idcard { background: var(--yellow); border-radius: 14px; padding: 16px 18px 16px; box-shadow: 0 6px 14px rgba(0,0,0,0.08); }
.idcard-head { text-align:center; margin-bottom:10px; }
.idcard-head .label { font-family:'Bimbo', cursive; font-size:24px; color: var(--pink); line-height:1; }
.idcard-head .code { display:none; }
.idcard .field-row { margin-top:9px; line-height:1.3; }
.idcard .field-label { font-family:'Bimbo', cursive; font-size:16px; color: var(--pink); margin-right:5px; }
.idcard .field-value { font-family:'Montserrat',sans-serif; font-weight:700; font-size:13.5px; color:var(--ink); text-transform:lowercase; }
.idcard .field-value.small { font-family:'Montserrat',sans-serif; font-size:13.5px; font-weight:700; text-transform:lowercase; }
.idcard-foot { margin-top:12px; text-align:center; }
.idcard-foot .unique { font-family:'Montserrat',sans-serif; font-size:11px; color:var(--ink); opacity:0.65; font-style:italic; }
.idcard-foot .badge { font-family:'Bimbo',cursive; font-size:15px; color: var(--pink); margin-left:6px; }
.text-col h2 { font-family:'Jakarta', sans-serif; font-weight:400; font-size:56px; letter-spacing:0.04em; color:var(--purple); margin-bottom:6px; }
.text-col .oficio { font-family:'Montserrat',sans-serif; font-size:13px; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); margin-bottom:16px; }
.text-col .lore { font-family:'Montserrat',sans-serif; font-size:16.5px; color:var(--ink); line-height:1.7; margin-bottom:14px; max-width: 460px;}
.text-col .thanks { font-family:'Bimbo',cursive; font-size:27px; color:var(--orange); margin-bottom:16px; }
.gallery-open { margin-top:4px; }

/* LIGHTBOX GALERIA */
.lightbox-overlay { display:none; position:fixed; inset:0; background:rgba(69,49,71,0.82); z-index:200; align-items:center; justify-content:center; padding:30px; }
.lightbox-overlay.open { display:flex; }
.lightbox-box { background:#f5eee2; border-radius:12px; padding:32px; max-width:760px; width:100%; max-height:82vh; overflow-y:auto; position:relative; box-shadow:0 20px 50px rgba(0,0,0,0.3); }
.lightbox-box h3 { font-family:'Jakarta',sans-serif; font-size:36px; letter-spacing:0.04em; margin-bottom:20px; color:var(--ink); padding-right:30px; }
.lightbox-close { position:absolute; top:16px; right:20px; background:none; border:none; font-size:28px; color:var(--muted); cursor:pointer; line-height:1; }
.lightbox-close:hover { color:var(--orange); }
.lightbox-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap:16px; margin-bottom:18px; }
.lightbox-grid img { width:100%; height:190px; object-fit:cover; border-radius:6px; box-shadow:0 8px 16px rgba(0,0,0,0.14); background:#fff; padding:6px; }
.lightbox-empty { font-family:'Montserrat',sans-serif; color:var(--muted); font-size:14px; font-style:italic; }

/* ADQUIRIR (home CTA strip) */
.adquirir { text-align:center; padding: 20px 0 70px; }
.adquirir h2 { font-family:'Jakarta', sans-serif; font-weight:400; font-size:52px; letter-spacing:0.04em; color:var(--purple); margin-bottom:12px; }
.adquirir p { font-family:'Montserrat',sans-serif; font-size:14.5px; color:var(--muted); max-width:480px; margin:0 auto 26px; line-height:1.6; }
.adquirir .cta-row { justify-content:center; }

/* ENCOMENDAR FORM */
.form-section { padding-bottom: 60px; }
.form-block { margin-bottom: 38px; }
.form-block .flabel { font-family:'Montserrat',sans-serif; font-size:13px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--orange); margin-bottom:14px; display:block; }
.pick-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(120px,1fr)); gap:12px; }
.pick-card { border:1.5px solid var(--line); background:rgba(255,255,255,0.5); border-radius:6px; padding:10px; cursor:pointer; text-align:center; transition:0.15s; }
.pick-card img { width:100%; height:90px; object-fit:cover; border-radius:4px; margin-bottom:8px; }
.pick-card .nm { font-family:'Jakarta',sans-serif; font-size:19px; letter-spacing:0.04em; color:var(--ink); }
.pick-card.selected { border-color:var(--orange); background: rgba(252,100,40,0.08); box-shadow:0 0 0 2px var(--orange) inset; }
.material-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap:12px; }
.material-card { border:1.5px dashed var(--mustard); border-radius:6px; padding:16px; cursor:pointer; }
.material-card .mt { font-family:'Jakarta',sans-serif; font-size:25px; letter-spacing:0.04em; color:var(--ink); margin-bottom:4px; }
.material-card .md { font-family:'Montserrat',sans-serif; font-size:14px; color:var(--muted); }
.material-card.selected { border-style:solid; border-color:var(--orange); background: rgba(252,100,40,0.08); }
.text-field { width:100%; font-family:'Montserrat',sans-serif; font-size:16px; padding:12px 14px; border:1.5px solid var(--line); border-radius:6px; background:rgba(255,255,255,0.6); color:var(--ink); }
textarea.text-field { min-height:90px; resize:vertical; }
.form-note { font-family:'Montserrat',sans-serif; font-size:14px; color:var(--muted); font-style:italic; margin-top:10px; }
.summary-box { border:1.5px solid var(--line); background:rgba(255,255,255,0.5); border-radius:8px; padding:20px; margin-bottom:24px; font-family:'Montserrat',sans-serif; font-size:15.5px; color:var(--ink); line-height:1.7; }
.summary-box b { color:var(--orange); }

/* FOOTER */
footer { border-top:1.5px dashed var(--line); padding: 30px 0 50px; text-align:center; }
footer p { font-family:'Montserrat',sans-serif; font-size:12px; color:var(--muted); }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; }
  .hero-photos { height: 260px; }
  h1.title { font-size:42px; }
  .card-body { grid-template-columns: 1fr; }
  .card-body .polaroid img { width:100%; height:auto; max-width:220px; }
}