/* L'Atelier Toutou · landing en formato «Pochette de patron» (Fabri eligió la propuesta A el 13/11).
   Cada sección es un objeto de mercería: sobre del molde, cinta métrica, papel de seda con alfileres, hoja de instrucciones,
   control de calidad, catálogo, cajón de sobres, etiquetas de precio, bon de commande y solapa del sobre. */
:root{
  --petrole:#1F5C5B; --petrole-f:#174746; --terre:#C2552F; --terre-f:#A2421F; --moutarde:#F2B640;
  --creme:#FBF3E4; --soie:#F6EEDC; --kraft:#C9A77C; --encre:#2A2622; --doux:#5D554C; --ligne:#D9C9B2;
  --vert:#00b042; --vert-f:#00802f;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font:500 17px/1.55 'Work Sans',system-ui,sans-serif;color:var(--encre);background:var(--kraft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .28 0 0 0 0 .15 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{text-wrap:balance}
.envol{max-width:1120px;margin:0 auto;padding:0 16px}
.etroit{max-width:760px}
.centre{text-align:center;margin-top:32px}
.intro{color:#3d362f;margin-top:8px;max-width:60ch}
:focus-visible{outline:3px solid var(--moutarde);outline-offset:3px}

/* botón */
.cta{display:block;background:var(--vert);color:#fff;text-align:center;text-decoration:none;font:800 18px/1.25 'Work Sans';padding:17px 18px;border-radius:8px;box-shadow:0 5px 0 var(--vert-f);transition:transform .15s,box-shadow .15s}
.cta:hover{transform:translateY(2px);box-shadow:0 3px 0 var(--vert-f)}
.cta.grand{font-size:19px;padding:19px}
.centre .cta{display:inline-block;min-width:min(100%,380px)}
.micro{font-size:14px;color:var(--doux);margin-top:12px;text-align:center}

/* cabecera */
.bandeau{background:var(--petrole);color:#f6ead7;position:relative;z-index:5}
.bandeau .envol{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:54px}
.marque{font:400 21px 'Abril Fatface',serif;text-decoration:none;color:#fff}
.marque b{font-weight:400;color:var(--moutarde)}
.bandeau-cta{font:800 14px 'Work Sans';text-decoration:none;background:var(--moutarde);color:var(--encre);padding:9px 14px;border-radius:6px}

/* 1. pochette */
.inicio{padding:26px 0 8px}
.pochette{background:var(--creme);border-radius:3px;box-shadow:0 26px 40px -22px rgba(60,35,15,.75);position:relative;padding:12px;max-width:1020px;margin:0 auto}
.pochette:after{content:"";position:absolute;left:0;right:0;top:-9px;height:18px;background:radial-gradient(circle at 9px 0,transparent 8px,var(--creme) 8.5px) -9px 9px/18px 18px repeat-x}
.cadre{border:2px solid var(--petrole);padding:12px 12px 18px}
.tete{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:2px solid var(--petrole);padding-bottom:8px}
.marque-poch{font:400 25px/1 'Abril Fatface',serif;color:var(--petrole)}
.marque-poch small{display:block;font:700 10.5px 'Work Sans';letter-spacing:.18em;color:var(--terre-f);text-transform:uppercase;margin-bottom:5px}
.num{text-align:right;font:800 11px 'Work Sans';letter-spacing:.12em;color:var(--petrole);text-transform:uppercase}
.num b{display:block;font:400 32px/1 'Abril Fatface';letter-spacing:0;color:var(--terre)}
.poch-grid{display:grid;gap:4px}
.photo{position:relative;margin-top:12px}
.photo img{width:100%;aspect-ratio:1/1.02;object-fit:cover}
.photo figcaption{position:absolute;right:8px;bottom:8px;background:rgba(251,243,228,.92);font:700 12px 'Work Sans';color:var(--petrole);padding:4px 8px}
.tampon{position:absolute;left:10px;top:10px;background:var(--moutarde);color:var(--encre);font:800 11.5px 'Work Sans';letter-spacing:.1em;text-transform:uppercase;padding:6px 10px;transform:rotate(-4deg);box-shadow:0 4px 8px -4px rgba(0,0,0,.4)}
.tailles{display:flex;gap:4px;margin-top:10px}
.tailles span{flex:1;text-align:center;font:800 11.5px 'Work Sans';color:#fff;padding:5px 0;border-radius:2px}
.t1{background:#7B4FA0}.t2{background:#2E7BC4}.t3{background:#1A9C8C;color:#10201d!important}.t4{background:#4E9A2E;color:#10200a!important}.t5{background:#D9A21B;color:#2A2622!important}.t6{background:#E0682B;color:#2A2622!important}.t2{background:#2668A8}.t7{background:#C2304A}
.tailles-l{font:600 13px 'Work Sans';color:var(--doux);margin-top:6px}
h1{font:400 clamp(33px,8.4vw,52px)/1.06 'Abril Fatface',serif;color:var(--petrole);margin-top:18px}
h1 em{font-style:normal;color:var(--terre)}
.sous{margin-top:12px;color:#4b443d;font-size:17.5px}
.prix{display:flex;align-items:center;gap:16px;margin-top:20px}
.pastille{width:108px;height:108px;flex:none;border-radius:50%;background:var(--terre);color:#fff;display:grid;place-content:center;text-align:center;transform:rotate(-8deg);box-shadow:0 8px 14px -8px rgba(120,40,20,.7);outline:2px dashed rgba(255,255,255,.75);outline-offset:-7px}
.pastille b{font:400 28px/1 'Abril Fatface';white-space:nowrap}
.pastille small{font:700 10px 'Work Sans';letter-spacing:0;text-transform:uppercase}
.prix p{font-size:15px;color:#4b443d}
.prix s{color:#6f655a}
.poch-txt .cta{margin-top:20px}

/* 2. cinta métrica */
.ruban{margin:30px -12px 0;transform:rotate(-1.5deg)}
.ruban-in{background:var(--moutarde);box-shadow:0 8px 14px -8px rgba(0,0,0,.45);padding:22px 16px 12px;position:relative;
  background-image:repeating-linear-gradient(90deg,#3a2f12 0 1.5px,transparent 1.5px 10px),repeating-linear-gradient(90deg,#3a2f12 0 2px,transparent 2px 50px);background-size:100% 7px,100% 13px;background-repeat:no-repeat}
.ruban p{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:2px 8px;font:700 14px 'Work Sans';color:#3a2f12;max-width:1120px;margin:0 auto}
.ruban span{white-space:nowrap}
.ruban b{font:400 24px 'Abril Fatface';color:var(--encre)}
.ruban i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--terre)}

/* papel de seda (secciones claras) */
.soie{margin-top:44px;background:var(--soie);padding:46px 0 50px;position:relative;
  background-image:repeating-linear-gradient(0deg,transparent 0 47px,rgba(31,92,91,.07) 47px 48px),repeating-linear-gradient(90deg,transparent 0 47px,rgba(31,92,91,.07) 47px 48px)}
.soie h2,.titre-poch{font:400 clamp(28px,6.6vw,40px)/1.1 'Abril Fatface',serif;color:var(--petrole)}
.titre-poch{color:var(--petrole-f)}
.centre .micro{color:#3d362f}

/* 3. dolores */
.notes{list-style:none;display:grid;gap:18px;margin-top:22px}
.notes li{position:relative;background:#fff;padding:18px 18px 16px;box-shadow:0 10px 18px -12px rgba(60,35,15,.5);font-size:17px;color:#3d3731}
.notes li:nth-child(odd){transform:rotate(-.8deg)}.notes li:nth-child(even){transform:rotate(.7deg)}
.notes em{font-style:normal;font-weight:700;color:var(--terre-f)}
.epingle{position:absolute;left:50%;top:-7px;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ff9a86,#c2302a 60%);box-shadow:1px 3px 3px rgba(0,0,0,.3)}
.pont{margin-top:26px;font-size:18px}
.pont strong{color:var(--petrole)}
.a-main{font:700 26px/1.1 Caveat,cursive;color:var(--terre-f);margin-top:14px;transform:rotate(-2deg)}

/* 4. hoja de instrucciones */
.instructions-sec{margin-top:44px}
.instructions{background:#fff;box-shadow:0 18px 30px -18px rgba(60,35,15,.6);padding:22px 18px 10px;border-top:8px solid var(--petrole)}
.instr-tete{display:flex;justify-content:space-between;align-items:baseline;gap:10px;border-bottom:2px dashed var(--ligne);padding-bottom:12px;flex-wrap:wrap}
.instr-tete b{font:400 clamp(26px,6vw,34px)/1.1 'Abril Fatface';color:var(--petrole)}
.instr-tete span{font:700 11px 'Work Sans';letter-spacing:.16em;text-transform:uppercase;color:var(--terre-f)}
.instr-liste{list-style:none;counter-reset:i}
.instr-liste li{counter-increment:i;display:grid;grid-template-columns:42px 1fr;gap:4px 12px;padding:16px 0;border-bottom:1px solid #eee3d2}
.instr-liste li:last-child{border-bottom:0}
.instr-liste li:before{content:counter(i);grid-row:span 2;width:38px;height:38px;border-radius:50%;border:2px solid var(--terre);color:var(--terre);font:400 20px/34px 'Abril Fatface';text-align:center}
.instr-liste b{font-size:18px;color:var(--encre)}
.instr-liste span{color:var(--doux);font-size:16px}

/* 5. control de calidad */
.controle-sec{margin-top:48px}
.controle-grid{display:grid;gap:24px;align-items:center}
.controle{position:relative;background:var(--petrole);color:#eef3ef;padding:24px 20px 26px;box-shadow:0 18px 30px -16px rgba(20,40,40,.7)}
.controle-tete{font:800 11px 'Work Sans';letter-spacing:.16em;text-transform:uppercase;color:#F7CF73;display:flex;flex-direction:column;gap:2px;border-bottom:1px dashed rgba(255,255,255,.3);padding-bottom:10px}
.controle-tete span{color:#cfe0dc}
.controle h2{font:400 clamp(28px,6.6vw,38px)/1.1 'Abril Fatface';color:#fff;margin-top:14px;max-width:min(16ch,calc(100% - 92px))}
.controle h2 em{font-style:normal;color:var(--moutarde)}
.controle>p{margin-top:12px;color:#d7e6e1}
.coches{list-style:none;margin-top:14px;display:grid;gap:10px}
.coches li{position:relative;padding-left:32px;color:#eef3ef}
.coches li:before{content:"";position:absolute;left:0;top:3px;width:21px;height:21px;border-radius:50%;background:var(--moutarde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12 4 4 8-9' fill='none' stroke='%232A2622' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px no-repeat}
.coches b{color:#fff}
.tampon-rond{position:absolute;right:12px;top:64px;width:86px;height:86px;border:3px solid var(--moutarde);border-radius:50%;color:var(--moutarde);display:grid;place-content:center;text-align:center;font:800 10px/1.2 'Work Sans';letter-spacing:.08em;text-transform:uppercase;transform:rotate(12deg)}
.tampon-rond b{font:400 22px/1 'Abril Fatface'}
.feuille-patron{margin:0}
.feuille-patron img{background:#fff;box-shadow:0 18px 30px -16px rgba(60,35,15,.7);transform:rotate(1.5deg);cursor:zoom-in}
.feuille-patron figcaption{font:700 22px/1.15 Caveat,cursive;color:var(--encre);margin-top:14px;text-align:center}

/* 6. tres pasos */
.trois{list-style:none;counter-reset:p;display:grid;gap:14px;margin-top:22px}
.trois li{counter-increment:p;background:#fff;border:2px dashed var(--terre);padding:18px 18px 16px 72px;position:relative;border-radius:4px}
.trois li:before{content:counter(p);position:absolute;left:16px;top:16px;width:40px;height:40px;border-radius:50%;background:var(--petrole);color:#fff;font:400 22px/40px 'Abril Fatface';text-align:center}
.trois li:after{content:"✂";position:absolute;right:10px;top:-14px;background:var(--soie);color:var(--terre);font-size:18px;padding:0 4px}
.trois b{display:block;font:400 22px 'Abril Fatface';color:var(--petrole)}
.trois span{color:var(--doux)}

/* 7. catálogo */
.catalogue-sec{margin-top:48px}
.catalogue{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}
.catalogue figure{background:var(--creme);padding:6px 6px 10px;box-shadow:0 10px 18px -12px rgba(60,35,15,.6)}
.catalogue img{width:100%;aspect-ratio:1;object-fit:cover}
.catalogue figcaption{font:700 14px/1.25 'Work Sans';color:var(--encre);margin-top:8px}
.catalogue small{display:inline-block;background:var(--petrole);color:#fff;font:800 11px 'Work Sans';letter-spacing:.06em;padding:2px 6px;margin-right:6px;vertical-align:1px}

/* 8. cajón de tomos */
.tiroir-sec{margin-top:52px}
.tiroir{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 10px;margin-top:22px;background:var(--petrole-f);padding:14px 10px 16px;border-radius:4px;box-shadow:inset 0 10px 22px rgba(0,0,0,.45)}
.tiroir article{background:var(--creme);padding:5px;box-shadow:0 10px 16px -10px rgba(0,0,0,.6)}
.tiroir img{width:100%}
.onglet{position:relative;padding:7px 2px 2px}
.onglet small{font:800 10px 'Work Sans';letter-spacing:.12em;text-transform:uppercase;color:var(--terre-f)}
.onglet h3{font:700 12.5px/1.2 'Work Sans';color:var(--encre);margin-top:2px}
.onglet b{display:inline-block;margin-top:5px;font:800 11px 'Work Sans';background:var(--moutarde);padding:2px 5px}

/* 9. por dentro */
.hojas{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
.hojas figure{margin:0}
.hojas img{background:#fff;box-shadow:0 12px 20px -12px rgba(60,35,15,.6);cursor:zoom-in}
.dedans .hojas figcaption{font:700 19px/1.1 Caveat,cursive;color:var(--doux);margin-top:8px;text-align:center}

/* 10. bonos */
.bonus-sec{margin-top:52px}
.bonus{display:grid;gap:18px;margin-top:22px}
.bonus article{display:grid;grid-template-columns:110px 1fr;gap:16px;align-items:start;background:var(--creme);padding:14px;box-shadow:0 12px 20px -14px rgba(60,35,15,.7)}
.bonus img{box-shadow:0 6px 12px -6px rgba(0,0,0,.4)}
.bonus h3{font:400 21px/1.15 'Abril Fatface';color:var(--petrole);margin-top:8px}
.bonus p{font-size:15.5px;color:var(--doux)}
.etiq-prix{display:inline-block;position:relative;background:#fff;border:1.5px solid var(--terre);padding:3px 10px 3px 20px;border-radius:0 4px 4px 0;clip-path:polygon(10px 0,100% 0,100% 100%,10px 100%,0 50%)}
.etiq-prix:before{content:"";position:absolute;left:8px;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:var(--terre)}
.etiq-prix s{color:#6f655a;font-size:14px}
.etiq-prix b{color:var(--terre-f);font:800 14px 'Work Sans';text-transform:uppercase;letter-spacing:.06em}

/* 11. bon de commande */
.offre{margin-top:56px;background:var(--petrole);padding:46px 0 52px}
.bon{background:#fff;padding:22px 18px 22px;box-shadow:0 22px 36px -18px rgba(0,0,0,.7);position:relative;
  background-image:linear-gradient(90deg,transparent 0 calc(100% - 1px),transparent 0)}
.bon:before,.bon:after{content:"";position:absolute;left:0;right:0;height:10px;background:radial-gradient(circle at 5px 10px,var(--petrole) 4.5px,transparent 5px) 0 0/10px 10px repeat-x}
.bon:before{top:-5px}.bon:after{bottom:-5px;transform:rotate(180deg)}
.bon-tete{display:flex;justify-content:space-between;align-items:baseline;gap:10px;border-bottom:2px solid var(--encre);padding-bottom:10px;font:400 24px 'Abril Fatface';color:var(--petrole);flex-wrap:wrap}
.bon-tete span{font:800 11px 'Work Sans';letter-spacing:.16em;text-transform:uppercase;color:var(--terre-f)}
.bon-lignes{list-style:none;margin-top:6px}
.bon-lignes li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px dotted #bfb2a0;font-size:15.5px}
.bon-lignes s{color:#6f655a;white-space:nowrap}
.bon-total,.bon-auj{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.bon-total{margin-top:12px;font-weight:700;color:var(--doux)}
.bon-total s{color:#6f655a}
.bon-auj{margin-top:6px;border-top:2px solid var(--encre);padding-top:10px}
.bon-auj span{font:800 15px 'Work Sans';text-transform:uppercase;letter-spacing:.1em}
.bon-auj b{font:400 46px/1 'Abril Fatface';color:var(--terre)}
.bon-eco{text-align:right;font:700 14px 'Work Sans';color:#1F6B3F;margin-top:4px}
.bon .cta{margin-top:20px}
.garantie{display:flex;gap:16px;align-items:center;margin-top:28px;color:#eef3ef}
.garantie h3{font:400 22px 'Abril Fatface';color:#fff}
.garantie p{color:#d7e6e1;font-size:15.5px}
.etiquette-cousue{flex:none;width:92px;padding:10px 6px;background:var(--creme);color:var(--petrole);text-align:center;font:800 11px/1.15 'Work Sans';letter-spacing:.1em;text-transform:uppercase;border:2px dashed var(--terre);outline:6px solid var(--creme);transform:rotate(-4deg)}
.etiquette-cousue b{display:block;font:400 34px/1 'Abril Fatface';color:var(--terre);letter-spacing:0}

/* 12. FAQ */
.faq h2{margin-bottom:18px}
.faq details{background:#fff;margin-top:10px;box-shadow:0 8px 14px -12px rgba(60,35,15,.5);outline:1.5px dashed rgba(31,92,91,.45);outline-offset:-6px}
.faq summary{cursor:pointer;list-style:none;padding:16px 44px 16px 16px;font-weight:700;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";position:absolute;right:16px;top:12px;font:400 24px 'Abril Fatface';color:var(--terre)}
.faq details[open] summary:after{content:"–"}
.faq details p{padding:0 16px 16px;color:var(--doux)}

/* 13. solapa */
.fin{margin-top:46px;padding-bottom:40px}
.rabat{background:var(--creme);padding:34px 20px 26px;text-align:center;position:relative;box-shadow:0 22px 34px -20px rgba(60,35,15,.7);clip-path:polygon(0 18px,50% 0,100% 18px,100% 100%,0 100%)}
.rabat h2{font:400 clamp(28px,6.6vw,40px)/1.1 'Abril Fatface';color:var(--petrole)}
.rabat p{color:var(--doux);margin:12px auto 0;max-width:46ch}
.rabat .cta{margin:22px auto 0;max-width:440px}

footer{background:var(--petrole-f);color:#cfe0dc;font-size:13.5px;padding:26px 0 96px}
footer p+p{margin-top:8px}
footer a{color:var(--moutarde)}

/* botón fijo en el celular */
.barre{position:fixed;left:0;right:0;bottom:0;z-index:20;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(31,92,91,.96);transform:translateY(110%);transition:transform .25s}
.barre.on{transform:none}
.barre .cta{padding:14px;font-size:17px}

/* zoom de páginas */
.zoom-caja{position:fixed;inset:0;z-index:50;background:rgba(20,18,16,.94);display:grid;place-items:center;overflow:hidden;touch-action:none}
.zoom-caja[hidden]{display:none}
.zoom-caja img{max-width:96vw;max-height:88vh;transform-origin:center;background:#fff}
.zoom-cerrar{position:absolute;top:12px;right:12px;width:44px;height:44px;border-radius:50%;border:0;background:#fff;font-size:28px;line-height:1;cursor:pointer}
.zoom-ayuda{position:absolute;bottom:14px;left:0;right:0;text-align:center;color:#ddd;font-size:14px}

@media (min-width:700px){
  .catalogue{grid-template-columns:repeat(4,1fr)}
  .tiroir{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:24px 18px;padding:24px}
  .tiroir article{padding:8px}
  .onglet h3{font-size:15px}
  .onglet small{font-size:10.5px}
  .onglet b{font-size:12px;padding:2px 7px}
  .hojas{grid-template-columns:repeat(4,1fr)}
  .bonus{grid-template-columns:1fr 1fr}
  .trois{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:900px){
  .inicio{padding-top:40px}
  .pochette{padding:16px}
  .cadre{padding:18px 22px 24px}
  .poch-grid{grid-template-columns:1fr 1.05fr;gap:36px;align-items:center}
  h1{margin-top:6px}
  .controle-grid{grid-template-columns:1.1fr .9fr;gap:44px}
  .barre{display:none}
  footer{padding-bottom:30px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}