/* ============================================================
   CEIP L'OM — EL TIEMPO DE CRECER
   Interactief prentenboek · La Canalosa
   ============================================================ */

/* Zelfde lettertypes als de referentie, lokaal gebundeld */
@font-face{ font-family:'Caveat'; font-style:normal; font-weight:500; font-display:swap; src:url(fonts/font-0.ttf) format('truetype'); }
@font-face{ font-family:'Fraunces'; font-style:italic; font-weight:400; font-display:swap; src:url(fonts/font-1.ttf) format('truetype'); }
@font-face{ font-family:'Fraunces'; font-style:normal; font-weight:400; font-display:swap; src:url(fonts/font-2.ttf) format('truetype'); }
@font-face{ font-family:'Fraunces'; font-style:normal; font-weight:500; font-display:swap; src:url(fonts/font-3.ttf) format('truetype'); }
@font-face{ font-family:'Manrope'; font-style:normal; font-weight:400; font-display:swap; src:url(fonts/font-4.ttf) format('truetype'); }
@font-face{ font-family:'Manrope'; font-style:normal; font-weight:500; font-display:swap; src:url(fonts/font-5.ttf) format('truetype'); }
@font-face{ font-family:'Manrope'; font-style:normal; font-weight:600; font-display:swap; src:url(fonts/font-6.ttf) format('truetype'); }
@font-face{ font-family:'Manrope'; font-style:normal; font-weight:700; font-display:swap; src:url(fonts/font-7.ttf) format('truetype'); }

:root{
  --paper:#F7F1E3; --paper-deep:#EFE5CF; --card:#FBF7EC;
  --ink:#2E4632; --green:#31573B; --green-soft:#54715A;
  --olive:#7C8450; --leaf-1:#8D9A5D; --leaf-2:#6F7C47; --leaf-3:#A8B274;
  --terracotta:#C26E4A; --terracotta-deep:#A5552F;
  --ochre:#D9A441; --wood:#B98A5F; --wood-deep:#7C5636;
  --sky-1:#CFE0EE; --sky-2:#EDF2EC;
  --soil-1:#8A5C3C; --soil-2:#3F2817; --root:#E4C89A;
  --blossom:#F2CFD8;
  --blue:#4A6FB5;
  --font-display:"Fraunces", Georgia, serif;
  --font-body:"Manrope", -apple-system, sans-serif;
  --font-hand:"Caveat", cursive;
  --shadow:0 12px 36px rgba(46,70,50,.16);
  --shadow-soft:0 5px 18px rgba(46,70,50,.10);
  --radius:16px; --radius-lg:26px;
  --ease:cubic-bezier(.33,.02,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-body); font-size:clamp(1rem,1.15vw,1.125rem); line-height:1.6;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--terracotta-deep); text-underline-offset:3px; }
:focus-visible{ outline:3px solid var(--ochre); outline-offset:3px; border-radius:6px; }
h1,h2,h3{ font-family:var(--font-display); color:var(--green); line-height:1.1; letter-spacing:-.01em; margin:0 0 .5em; font-weight:500; }
p{ margin:0 0 .9em; }
.hand{ font-family:var(--font-hand); color:var(--terracotta-deep); }
button{ font:inherit; }

.skip-link{ position:fixed; left:1rem; top:-4rem; z-index:300; background:var(--green); color:#fff; padding:.6rem 1.2rem; border-radius:0 0 12px 12px; text-decoration:none; transition:top .2s; }
.skip-link:focus{ top:0; }

/* ------------------------------------------------------------
   Papiertextuur over alles (statisch, subtiel)
   ------------------------------------------------------------ */
.paper-grain{
  position:fixed; inset:0; z-index:120; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .28 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------
   Vaste kop: klein en stil
   ------------------------------------------------------------ */
.book-header{
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; gap:.7rem; padding:.6rem 1rem;
  pointer-events:none;
}
.book-header > *{ pointer-events:auto; }
.brand{ display:flex; align-items:center; gap:.55rem; text-decoration:none; color:var(--green);
  background:rgba(251,247,236,.88); padding:.35rem .8rem .35rem .45rem; border-radius:999px; box-shadow:var(--shadow-soft); }
.brand img{ width:34px; height:34px; }
.brand b{ font-family:var(--font-display); font-size:1.02rem; }
.brand span{ display:block; font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--green-soft); }
.header-actions{ margin-left:auto; display:flex; gap:.5rem; }
.chip-btn{
  border:1.5px solid var(--green); background:rgba(251,247,236,.9); color:var(--green);
  border-radius:999px; padding:.42rem .95rem; font-weight:600; font-size:.85rem; cursor:pointer;
  box-shadow:var(--shadow-soft); text-decoration:none; display:inline-flex; align-items:center; gap:.4rem;
}
.chip-btn:hover{ background:var(--green); color:#fff; }

/* ------------------------------------------------------------
   Hoofdstuknavigatie (bolletjes)
   ------------------------------------------------------------ */
.chapter-nav{ position:fixed; right:.9rem; top:50%; transform:translateY(-50%); z-index:190; display:grid; gap:.55rem; }
.chapter-nav a{
  width:12px; height:12px; border-radius:50%; background:rgba(46,70,50,.25);
  border:2px solid transparent; display:block; position:relative; transition:background .2s, transform .2s;
}
.chapter-nav a:hover{ background:var(--terracotta); transform:scale(1.2); }
.chapter-nav a.active{ background:var(--green); transform:scale(1.25); }
.chapter-nav a .tip{
  position:absolute; right:1.4rem; top:50%; transform:translateY(-50%);
  background:var(--green); color:#fff; font-size:.72rem; padding:.2rem .6rem; border-radius:999px;
  white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .2s;
}
.chapter-nav a:hover .tip, .chapter-nav a:focus-visible .tip{ opacity:1; }
@media (max-width:720px){ .chapter-nav{ display:none; } }

/* ------------------------------------------------------------
   Het verhaal: hoge container + sticky podium
   ------------------------------------------------------------ */
.story{ position:relative; height:760vh; }
body.motion-off .story, body.no-js .story{ height:auto; }

.stage{
  position:sticky; top:0; height:100vh; height:100svh; overflow:hidden;
  background:linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 46%, #E8E2CE 60%, var(--paper) 100%);
}
body.motion-off .stage, body.no-js .stage{ position:relative; height:78vh; min-height:520px; }

.stage svg#world{ position:absolute; inset:0; width:100%; height:100%; display:block; }

/* Schildering als boekomslag (hoofdstuk 1) en finale (hoofdstuk 8) */
.paint{ position:absolute; inset:0; z-index:6; pointer-events:none; }
.paint img{ width:100%; height:100%; object-fit:cover; }
.paint::after{ content:""; position:absolute; inset:0; box-shadow:inset 0 0 140px rgba(59,42,24,.28); }
#paint-cover{ opacity:1; }
#paint-final{ opacity:0; }
body.no-js #paint-cover, body.motion-off #paint-cover{ position:relative; inset:auto; height:64vh; }
body.no-js #paint-final, body.motion-off #paint-final{ display:none; }

/* Omslagtekst */
.cover-text{
  position:absolute; inset:0; z-index:8; display:grid; place-content:center; text-align:center;
  padding:0 1.4rem; pointer-events:none;
}
.cover-text .inner{ background:rgba(247,241,227,.82); border-radius:var(--radius-lg); padding:2rem 2.6rem 1.7rem; box-shadow:var(--shadow); backdrop-filter:none; }
.cover-text .hand{ font-size:clamp(1.4rem,2.6vw,1.9rem); display:block; transform:rotate(-1.5deg); }
.cover-text h1{ font-size:clamp(2.5rem,7vw,4.6rem); margin:.1em 0 .15em; }
.cover-text p{ max-width:38ch; margin-inline:auto; color:var(--green-soft); }
.scroll-hint{
  margin-top:1rem; display:inline-flex; flex-direction:column; align-items:center; gap:.2rem;
  color:var(--green); font-weight:600; font-size:.9rem;
}
.scroll-hint .arrow{ font-size:1.3rem; animation:bob 1.8s var(--ease) infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(7px);} }

/* Dwarrelend zaadje op de omslag (CSS-animatie, compositor) */
.cover-samara{ position:absolute; z-index:9; width:46px; top:10%; left:79%; animation:samara-drift 9s var(--ease) infinite; pointer-events:none; }
@keyframes samara-drift{
  0%{ transform:translate(0,0) rotate(0deg); }
  25%{ transform:translate(-60px,90px) rotate(140deg); }
  50%{ transform:translate(30px,180px) rotate(260deg); }
  75%{ transform:translate(-40px,90px) rotate(160deg); }
  100%{ transform:translate(0,0) rotate(0deg); }
}

/* ------------------------------------------------------------
   Tekstkaarten in de scroll-stroom
   ------------------------------------------------------------ */
.card-lane{ position:absolute; inset:0; z-index:20; pointer-events:none; }
body.motion-off .card-lane, body.no-js .card-lane{ position:static; }
.story-card{
  position:absolute; width:min(430px, calc(100vw - 2.4rem));
  background:var(--card); border-radius:var(--radius-lg); box-shadow:var(--shadow);
  padding:1.5rem 1.7rem 1.3rem; pointer-events:auto;
  border:1px solid rgba(124,132,80,.25);
}
.story-card::before{ /* plakbandje */
  content:""; position:absolute; top:-12px; left:50%; transform:translateX(-50%) rotate(-2deg);
  width:92px; height:24px; background:rgba(217,164,65,.4); border-radius:3px;
}
.story-card .kicker{ font-family:var(--font-hand); font-size:1.35rem; color:var(--terracotta-deep); display:block; transform:rotate(-1deg); }
.story-card h2{ font-size:clamp(1.5rem,2.6vw,2rem); margin:.15em 0 .35em; }
.story-card p{ color:#43604B; font-size:.99rem; }
.story-card .verse{ font-family:var(--font-display); font-size:1.12rem; color:var(--green); font-style:italic; }
.story-card.left{ left:4vw; } .story-card.right{ right:4vw; }
@media (max-width:720px){ .story-card.left,.story-card.right{ left:50%; right:auto; transform:translateX(-50%); } }
body.motion-off .story-card, body.no-js .story-card{
  position:relative; left:auto !important; right:auto !important; top:auto !important; transform:none !important;
  margin:2rem auto; display:block;
}

.water-btn{
  margin-top:.4rem; border:2px solid var(--blue); color:var(--blue); background:#fff;
  border-radius:999px; padding:.55rem 1.2rem; font-weight:700; cursor:pointer; display:inline-flex; gap:.5rem; align-items:center;
}
.water-btn:hover{ background:var(--blue); color:#fff; }
.water-btn[disabled]{ opacity:.65; cursor:default; }

/* ------------------------------------------------------------
   SVG-wereld: groeitoestanden
   Standaard (zonder JS / zonder beweging) staat ALLES volgroeid.
   ------------------------------------------------------------ */
#world .grow{ stroke-dasharray:1; stroke-dashoffset:0; }   /* pathLength=1 */
#world .pop{ opacity:1; }
#world text{ font-family:var(--font-hand); }
#world .root-word{ font-size:34px; fill:#EAD7B4; }
#world .disc-label{ cursor:pointer; }
#world .disc-label:focus-visible circle.disc-bg, #world .story-node:focus-visible > circle{ stroke:var(--ochre); stroke-width:6; }
#world .story-node{ cursor:pointer; }

.tuft,.leafling{ transform-box:fill-box; transform-origin:center; }
#cotyl-1,#cotyl-2,#true-1,#true-2{ transform-box:view-box; transform-origin:766px 1322px; }

/* zachte wind door de kruin — puur CSS, pas als de kruin vol is */
@media (prefers-reduced-motion: no-preference){
  body:not(.motion-off) #crown{ transform-origin:700px 1150px; animation:sway 7s ease-in-out infinite alternate; }
  body.crown-grown:not(.motion-off) #crown .tuft:nth-child(odd){ animation:tuft 5.5s ease-in-out infinite alternate; }
  @keyframes sway{ from{ transform:rotate(-.5deg);} to{ transform:rotate(.6deg);} }
  @keyframes tuft{ from{ transform:translateX(-4px);} to{ transform:translateX(5px);} }
  body:not(.motion-off) #clouds{ animation:clouds 80s linear infinite; }
  @keyframes clouds{ from{ transform:translateX(0);} to{ transform:translateX(-320px);} }
}

/* regendruppels bij "dale agua" */
#drops{ opacity:0; }
.stage.watered #drops{ opacity:1; }
.stage.watered #drops ellipse{ animation:drop 1.1s ease-in 3; animation-fill-mode:both; }
#drops ellipse:nth-child(2){ animation-delay:.25s !important; }
#drops ellipse:nth-child(3){ animation-delay:.5s !important; }
@keyframes drop{ 0%{ transform:translateY(-90px); opacity:0;} 30%{ opacity:1;} 100%{ transform:translateY(40px); opacity:0;} }
#soil-wet{ opacity:0; transition:opacity 1.2s ease .6s; }
.stage.watered #soil-wet{ opacity:.55; }

/* ------------------------------------------------------------
   Dialogen (takverhalen & gemeenschappen)
   ------------------------------------------------------------ */
dialog.book-dialog{
  border:0; border-radius:var(--radius-lg); padding:0; max-width:min(560px, calc(100vw - 2rem));
  width:100%; box-shadow:0 30px 80px rgba(30,45,32,.4); background:var(--card);
}
dialog.book-dialog::backdrop{ background:rgba(38,54,40,.45); }
.dialog-inner{ padding:0 0 1.4rem; }
.dialog-inner img{ width:100%; aspect-ratio:16/9.5; object-fit:cover; border-radius:var(--radius-lg) var(--radius-lg) 0 0; }
.dialog-body{ padding:1.1rem 1.6rem 0; }
.dialog-body .kicker{ font-family:var(--font-hand); font-size:1.3rem; color:var(--terracotta-deep); }
.dialog-body h3{ font-size:1.5rem; margin:.1em 0 .3em; }
.dialog-close{
  position:absolute; top:.7rem; right:.7rem; width:40px; height:40px; border-radius:50%;
  border:0; background:rgba(251,247,236,.95); color:var(--green); font-size:1.15rem; font-weight:700; cursor:pointer; box-shadow:var(--shadow-soft);
}
.dialog-close:hover{ background:var(--terracotta); color:#fff; }

/* ------------------------------------------------------------
   Na het verhaal: echte momenten + toegang + info
   ------------------------------------------------------------ */
.after{ position:relative; z-index:30; background:var(--paper); }
.wrap{ width:min(1080px, calc(100% - 2.4rem)); margin-inline:auto; }
.section{ padding:clamp(3rem,7vw,5.5rem) 0; }
.section-alt{ background:var(--paper-deep); }
.kicker-lg{ font-family:var(--font-hand); font-size:clamp(1.3rem,2.3vw,1.7rem); color:var(--terracotta-deep); display:block; transform:rotate(-1deg); margin-bottom:.2rem; }
.section h2{ font-size:clamp(1.9rem,4vw,2.8rem); }
.lede{ font-size:1.08rem; color:#43604B; max-width:60ch; }

.moments{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; margin-top:1.8rem; }
@media (max-width:820px){ .moments{ grid-template-columns:1fr; } }
.moment{ border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-soft); background:#fff; transform:rotate(var(--tilt,0deg)); }
.moment img{ aspect-ratio:4/3.1; object-fit:cover; width:100%; }
.moment figcaption{ padding:.7rem 1rem .9rem; font-size:.9rem; color:var(--green-soft); }
.moment figcaption b{ color:var(--green); font-family:var(--font-display); }

.cta-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:2rem; }
@media (max-width:900px){ .cta-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:540px){ .cta-grid{ grid-template-columns:1fr; } }
.cta-card{
  display:block; background:var(--card); border-radius:var(--radius-lg); padding:1.3rem 1.4rem 1.2rem;
  text-decoration:none; color:var(--ink); box-shadow:var(--shadow-soft);
  border-top:5px solid var(--accent,var(--olive)); transition:transform .18s var(--ease), box-shadow .18s;
}
.cta-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.cta-card b{ font-family:var(--font-display); font-size:1.15rem; color:var(--green); display:block; margin-bottom:.25rem; }
.cta-card span{ font-size:.92rem; color:#4A6752; }

.info-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem; margin-top:1.8rem; }
@media (max-width:820px){ .info-grid{ grid-template-columns:1fr; } }
.info-card{ background:var(--card); border-radius:var(--radius-lg); box-shadow:var(--shadow-soft); padding:1.5rem 1.6rem 1.2rem; }
.info-card h3{ font-size:1.3rem; }
.info-card ul{ margin:.4rem 0 0; padding-left:1.15rem; color:#43604B; font-size:.97rem; }
.info-card li{ margin-bottom:.4rem; }

.map-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:1.2rem; margin-top:1.6rem; align-items:stretch; }
@media (max-width:820px){ .map-grid{ grid-template-columns:1fr; } }
.map-card{ margin:0; background:var(--card); border-radius:var(--radius-lg); box-shadow:var(--shadow-soft); overflow:hidden; display:flex; flex-direction:column; }
.map-card svg{ width:100%; height:auto; display:block; }
.map-card iframe{ width:100%; flex:1; min-height:320px; border:0; display:block; }
.map-card figcaption{ padding:.75rem 1.1rem .9rem; font-size:.92rem; color:var(--green-soft); border-top:1px solid rgba(124,132,80,.2); }

.contact-panel{
  margin-top:2.4rem; background:var(--green); color:#E7EFE4; border-radius:var(--radius-lg);
  padding:clamp(1.8rem,4vw,2.8rem); display:grid; grid-template-columns:1.2fr 1fr; gap:1.6rem; align-items:center;
}
@media (max-width:820px){ .contact-panel{ grid-template-columns:1fr; } }
.contact-panel h3{ color:#fff; font-size:clamp(1.4rem,2.8vw,2rem); }
.contact-panel a{ color:var(--ochre); }
.contact-panel ul{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }

.book-footer{ background:#233A29; color:#B9CBB6; padding:2.2rem 0 1.8rem; font-size:.9rem; }
.book-footer a{ color:#E9D9A8; }
.book-footer .foot-note{ margin-top:1.2rem; padding-top:1rem; border-top:1px solid rgba(185,203,182,.25); font-size:.8rem; color:#8FA78D; }

/* ------------------------------------------------------------
   Reduced motion — alles staat stil en volgroeid
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
}

/* ============================================================
   NA HET VERHAAL — editorial presentatie (naar de goedgekeurde
   referentie): eyebrows, tweekleurige koppen, polaroids,
   genummerde hoofdstukken, kaartsectie en donkergroene finale.
   ============================================================ */
.eyebrow{
  display:block; font-size:.72rem; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:#7A8465; margin-bottom:.9rem;
}
.eyebrow.center{ text-align:center; }
.eyebrow.light{ color:#B9C9A8; }

.h-duo{ font-family:var(--font-display); font-weight:500; line-height:1.08; margin:0 0 .55em; }
.h-duo span, .h-duo em{ display:block; }
.h-duo span{ color:var(--green); }
.h-duo em{ color:var(--terracotta-deep); font-style:italic; }
.h-duo em.gold{ color:#CBB77A; }
.h-duo{ font-size:clamp(2rem, 4.6vw, 3.4rem); }
.h-duo.sm{ font-size:clamp(1.55rem, 2.9vw, 2.2rem); }
.h-duo.big{ font-size:clamp(2.3rem, 5.4vw, 4rem); }
.h-duo.center{ text-align:center; }
.lede.center{ text-align:center; margin-inline:auto; max-width:52ch; }

.section-cream{ background:#F3ECDA; }

.rule-row{
  display:flex; justify-content:space-between; align-items:flex-end; gap:1.5rem;
  border-top:1px solid rgba(74,90,66,.25); margin-top:3rem; padding-top:1.1rem;
  font-size:.85rem; color:#6E7F63; flex-wrap:wrap;
}
.rule-row a{ color:var(--green); font-weight:600; text-decoration:none; border-bottom:1.5px solid var(--green); padding-bottom:.15rem; }
.rule-row a:hover{ color:var(--terracotta-deep); border-color:var(--terracotta-deep); }
.text-link{ color:var(--green); font-weight:600; text-decoration:none; border-bottom:1.5px solid var(--green); padding-bottom:.15rem; }
.text-link:hover{ color:var(--terracotta-deep); border-color:var(--terracotta-deep); }

.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
@media (max-width:860px){ .split{ grid-template-columns:1fr; } }

/* — polaroid — */
.polaroid{
  margin:0; background:#FFFDF6; padding:.9rem .9rem 1rem; border-radius:6px;
  box-shadow:0 18px 44px rgba(46,70,50,.22); position:relative; max-width:460px; justify-self:center;
}
.polaroid.tilt-l{ transform:rotate(-2.2deg); }
.polaroid.tilt-r{ transform:rotate(1.8deg); }
.polaroid::before{
  content:""; position:absolute; top:-13px; left:50%; transform:translateX(-50%) rotate(-2deg);
  width:104px; height:26px; background:rgba(217,164,65,.38); border-radius:3px;
}
.polaroid img{ width:100%; aspect-ratio:4/3.4; object-fit:cover; border-radius:3px; }
.sticky-note{
  position:absolute; right:-16px; bottom:52px; background:#EFF2DC; padding:.5rem .9rem;
  font-family:var(--font-hand); font-size:1.15rem; line-height:1.15; color:#4E5A38;
  box-shadow:0 8px 20px rgba(46,70,50,.2); transform:rotate(3deg); border-radius:3px;
}
.hand-cap{ display:block; font-family:var(--font-hand); font-size:1.2rem; color:var(--terracotta-deep); padding-top:.55rem; }

/* — genummerde 01/02/03-lijst — */
.num-list{ list-style:none; counter-reset:nl; margin:1.6rem 0 0; padding:0; }
.num-list li{
  counter-increment:nl; display:grid; grid-template-columns:auto 1fr; gap:.9rem;
  padding:.9rem 0; border-top:1px solid rgba(74,90,66,.22); align-items:baseline;
}
.num-list li::before{
  content:"0" counter(nl); font-family:var(--font-display); font-style:italic;
  color:var(--terracotta-deep); font-size:1.05rem;
}
.num-list b{ font-family:var(--font-display); font-weight:500; color:var(--green); font-size:1.12rem; display:block; }
.num-list span{ display:block; font-size:.9rem; color:#6E7F63; margin-top:.15rem; }

/* — la vida: genummerde hoofdstukken met blobfoto's — */
.feature{
  display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(2rem,5vw,4.5rem);
  align-items:center; margin-top:clamp(3rem,7vw,5.5rem);
}
.feature.flip .feature-media{ order:2; }
@media (max-width:860px){ .feature{ grid-template-columns:1fr; } .feature.flip .feature-media{ order:0; } }
.feature-media{ position:relative; padding-top:2.2rem; }
.feature-num{
  position:absolute; top:0; left:-.4rem; z-index:2;
  font-family:var(--font-display); font-style:italic; font-weight:600;
  font-size:clamp(3rem,6vw,4.4rem); color:var(--terracotta-deep);
}
.feature.flip .feature-num{ left:auto; right:-.4rem; }
.blob-img{ width:100%; aspect-ratio:4/3.3; object-fit:cover; box-shadow:var(--shadow); }
.blob-a{ border-radius:46% 54% 44% 56% / 40% 44% 56% 60%; border-radius:120px 34px 110px 34px; }
.blob-b{ border-radius:34px 120px 34px 110px; }
.blob-c{ border-radius:110px 110px 34px 34px; }
.feature .aqui{
  border-left:2.5px solid rgba(124,132,80,.5); padding:.35rem 0 .35rem 1.1rem; margin:1.2rem 0;
}
.aqui b{ font-size:.82rem; color:#7A8465; display:block; margin-bottom:.2rem; }
.aqui p{ margin:0; font-size:.93rem; color:#54654B; }

/* — "para ojos curiosos" / uitklappers — */
details.curioso{ border-top:1px solid rgba(74,90,66,.25); border-bottom:1px solid rgba(74,90,66,.25); margin-top:1.2rem; }
details.curioso summary{
  list-style:none; cursor:pointer; display:grid; grid-template-columns:1fr auto; align-items:center;
  gap:1rem; padding:.85rem 0;
}
details.curioso summary::-webkit-details-marker{ display:none; }
.cur-label{ display:block; grid-column:1 / -1; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:#8A946A; margin-bottom:-.4rem; }
.cur-q{ font-family:var(--font-hand); font-size:1.35rem; color:#5A4632; }
details .plus{ font-size:1.05rem; color:var(--green); transition:transform .25s var(--ease); }
details[open] .plus{ transform:rotate(45deg); }
details.curioso > p, details.curioso .team-list{ padding:0 0 1rem; margin:0; font-size:.95rem; color:#54654B; }
.team-list{ list-style:none; }
.team-list li{ padding:.3rem 0; border-top:1px dashed rgba(74,90,66,.2); }

/* — gemeenschapsband met verspringende kaarten — */
.comm-band{ background:#CBD2B4; }
.comm-cards{
  display:grid; grid-template-columns:repeat(5,1fr); gap:1.1rem; margin-top:2.8rem; align-items:start;
}
@media (max-width:960px){ .comm-cards{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:540px){ .comm-cards{ grid-template-columns:1fr; } }
.comm-card{
  background:#F8F3E4; border:0; border-radius:70px 26px 70px 26px; padding:1.6rem 1rem 1.3rem;
  display:grid; justify-items:center; gap:.25rem; cursor:pointer; text-align:center;
  box-shadow:0 10px 26px rgba(46,70,50,.12); transition:transform .2s var(--ease), box-shadow .2s;
  font-family:var(--font-body); color:var(--ink);
}
.comm-card:nth-child(even){ border-radius:26px 70px 26px 70px; margin-top:2.2rem; }
@media (max-width:960px){ .comm-card:nth-child(even){ margin-top:0; } }
.comm-card:hover{ transform:translateY(-5px); box-shadow:0 18px 40px rgba(46,70,50,.2); }
.cc-num{ font-family:var(--font-display); font-style:italic; color:var(--terracotta-deep); font-size:1rem; }
.cc-leaf{ width:26px; height:26px; color:var(--green); }
.comm-card b{ font-family:var(--font-display); font-weight:500; font-size:1.5rem; color:var(--green); }
.cc-alias{ font-size:.85rem; color:#6E7F63; }
.cc-level{ font-size:.78rem; color:#8A946A; }
.cc-plus{ margin-top:.5rem; color:var(--green); font-size:1rem; }

/* — FAQ — */
.faq-split{ align-items:start; }
.faq-intro{ position:sticky; top:5rem; }
@media (max-width:860px){ .faq-intro{ position:static; } }
.faq-list{ border-top:1px solid rgba(74,90,66,.25); }
details.faq{ border-bottom:1px solid rgba(74,90,66,.25); }
details.faq summary{
  list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:1.05rem 0; font-family:var(--font-display); font-weight:500; font-size:1.25rem; color:var(--green);
}
details.faq summary::-webkit-details-marker{ display:none; }
details.faq summary:hover{ color:var(--terracotta-deep); }
details.faq p{ font-size:.95rem; color:#54654B; margin:0 0 .9rem; max-width:56ch; }

/* — kaartsectie — */
.map-head{ align-items:end; margin-bottom:.6rem; }
.map-head p{ color:#54654B; max-width:44ch; }
.crumbs{ font-size:.82rem; color:#6E7F63; margin:.8rem 0 1.6rem; }
.crumbs span{ margin:0 .45rem; color:#A9B084; }
.map-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; align-items:stretch; }
@media (max-width:860px){ .map-grid{ grid-template-columns:1fr; } }
.map-card{
  margin:0; background:#FBF7EC; border:1px solid rgba(74,90,66,.18); border-radius:8px;
  overflow:hidden; display:flex; flex-direction:column; box-shadow:0 12px 32px rgba(46,70,50,.1);
}
.map-card-head{ padding:1.1rem 1.3rem .9rem; border-bottom:1px solid rgba(74,90,66,.16); background:#F8F3E4; }
.map-card-head .eyebrow{ margin-bottom:.3rem; }
.map-card-head b{ font-family:var(--font-display); font-weight:600; font-size:1.35rem; color:var(--green); }
.map-card svg{ width:100%; height:auto; display:block; flex:1; }
.map-card iframe{ width:100%; border:0; flex:1; min-height:360px; display:block; }
.map-card-foot{ padding:.75rem 1.3rem .9rem; font-size:.82rem; color:#6E7F63; border-top:1px solid rgba(74,90,66,.16); background:#F8F3E4; }
.map-cta{ border-top:0; margin-top:2rem; align-items:center; }
.pill-btn{
  display:inline-flex; align-items:center; gap:.5rem; background:var(--green); color:#F3ECDA !important;
  border:0; border-radius:999px; padding:.95rem 1.7rem; font-weight:600; text-decoration:none;
  box-shadow:0 10px 26px rgba(46,70,50,.3); transition:transform .2s var(--ease), background .2s;
}
.pill-btn:hover{ transform:translateY(-2px); background:#254230; }

/* — donkergroene finale — */
.finale{ background:#2B4633; color:#DCE5D2; padding:clamp(3.5rem,8vw,6rem) 0 0; }
.finale .h-duo span{ color:#F4F1E4; }
.finale-lede{ color:#C3D0B6; margin-top:.4rem; }
.finale-contacts{ display:flex; gap:2.2rem; flex-wrap:wrap; margin:1.8rem 0 1.6rem; }
.finale-contacts a{
  color:#F4F1E4; text-decoration:none; font-weight:500; padding-bottom:.4rem;
  border-bottom:1px solid rgba(244,241,228,.45);
}
.finale-contacts a:hover{ color:#CBB77A; border-color:#CBB77A; }
.finale-addr{ font-size:.88rem; color:#A9BB9C; }
.finale-bottom{
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  border-top:1px solid rgba(185,201,168,.25); margin-top:2.6rem; padding:1.1rem 0 1.3rem;
  font-size:.78rem; color:#93A88A;
}
.finale-bottom a{ color:#DCE5D2; text-decoration:none; }
.finale-bottom a:hover{ color:#CBB77A; }
@media (max-width:640px){ .finale-bottom{ justify-content:flex-start; } }

/* ============================================================
   HERO v5 — open split-compositie: schildering zichtbaar,
   tekstkolom links op een zachte crèmegradiënt (naar referentie)
   ============================================================ */
.cover-grad{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(247,241,227,.97) 0%, rgba(247,241,227,.9) 26%, rgba(247,241,227,.55) 46%, rgba(247,241,227,0) 66%);
}
@media (max-width:860px){
  .cover-grad{ background:linear-gradient(0deg, rgba(247,241,227,.97) 0%, rgba(247,241,227,.92) 34%, rgba(247,241,227,.4) 58%, rgba(247,241,227,0) 78%); }
}
.cover-text{ place-content:stretch; text-align:left; padding:0; }
.cover-text a{ pointer-events:auto; }
.cover-topline{
  position:absolute; top:1.05rem; left:50%; transform:translateX(-50%);
  font-size:.68rem; font-weight:600; letter-spacing:.26em; text-transform:uppercase; color:#7A8465;
}
@media (max-width:1080px){ .cover-topline{ display:none; } }
.cover-copy{
  position:absolute; left:clamp(1.3rem, 6vw, 5.5rem); top:50%; transform:translateY(-50%);
  max-width:540px; padding-right:1rem;
}
.cover-copy .h-duo.big{ font-size:clamp(2.3rem, 4.9vw, 4.1rem); margin-bottom:.4em; }
.cover-copy > p{ max-width:44ch; color:#3E5943; }
.cover-hand{ font-size:clamp(1.25rem, 2vw, 1.5rem); margin:.2rem 0 .9rem; }
.cover-aqui{ max-width:46ch; margin:0 0 1.2rem; }
.cover-aqui b, .story-card .aqui b{ text-transform:uppercase; letter-spacing:.16em; font-size:.66rem; }
.cover-actions{ display:flex; gap:1.3rem; align-items:center; flex-wrap:wrap; margin-top:1.3rem; }
.cover-actions .arrow{ display:inline-block; animation:bob 1.8s var(--ease) infinite; }
@media (prefers-reduced-motion: reduce){ .cover-actions .arrow{ animation:none; } }
@media (max-width:860px){
  .cover-copy{ left:1.2rem; right:1.2rem; top:auto; bottom:3.4rem; transform:none; max-width:none; }
  .cover-copy .h-duo.big{ font-size:clamp(2rem, 8.5vw, 2.6rem); }
  .cover-aqui{ display:none; }
}
@media (max-height:640px){ .cover-aqui{ display:none; } .cover-hand{ margin-bottom:.4rem; } }

/* verhaalkaarten in editorial stijl */
.story-card{ width:min(470px, calc(100vw - 2.4rem)); }
.story-card .eyebrow{ margin-bottom:.55rem; }
.story-card .h-duo.sm{ font-size:clamp(1.4rem, 2.5vw, 1.85rem); }
.story-card > p{ font-size:.96rem; }
.card-hand{ font-size:1.3rem; margin:.15rem 0 .55rem; }
.story-card .aqui{ margin:.85rem 0 .5rem; padding:.3rem 0 .3rem 1rem; }
.story-card .aqui p{ font-size:.88rem; }
.card-hint{ font-size:.88rem; color:#54654B; margin:.7rem 0 0; }
.cover-copy > p{ margin-inline:0; }
.story-card p{ margin-inline:0; }
/* fix: 01/02/03-lijst — nummer links, titel + sublijn ernaast */
.num-list li{ grid-template-columns:2.4rem 1fr; row-gap:.1rem; }
.num-list li::before{ grid-column:1; grid-row:1; }
.num-list b{ grid-column:2; grid-row:1; text-align:left; }
.num-list span{ grid-column:2; grid-row:2; }
/* studiocredit in de finale */
.finale-bottom .credit{ color:#B9C9A8; letter-spacing:.04em; }
.finale-bottom .credit:hover{ color:#CBB77A; }
/* grote staande polaroid (Montessori-blok), zoals de referentie */
.polaroid-lg{ max-width:600px; width:100%; padding:1.1rem 1.1rem 1.2rem; }
.polaroid-lg img{ aspect-ratio:4/4.85; object-fit:cover; object-position:center 42%; }
.polaroid-lg .sticky-note{ right:-14px; bottom:64px; font-size:1.3rem; padding:.65rem 1.05rem; }
.polaroid-lg .hand-cap{ font-size:1.35rem; }

/* ============================================================
   FOTOSPEC v9 — formaten, uitsnedes en plaatsing
   ============================================================ */
/* contentbreedte 1240px, mobiel 24px zijmarges */
.wrap{ width:min(1240px, calc(100% - 3rem)); }
@media (max-width:640px){ .wrap{ width:calc(100% - 48px); } }

/* 1 · achtergrondschilderingen: uitsnede + zachte overloop onderaan */
#paint-cover img{ object-position:65% 45%; }
#paint-final img{ object-position:65% 45%; }
.paint::after{
  box-shadow:inset 0 0 140px rgba(59,42,24,.24);
  background:linear-gradient(180deg, rgba(247,241,227,0) 82%, var(--paper) 100%);
}
@media (max-width:860px){
  #paint-cover img{ object-position:78% 40%; }  /* grote boom rechts zichtbaar houden */
  #paint-final img{ object-position:25% 40%; }  /* boom links in de patioschildering */
  body.motion-off #paint-cover, body.no-js #paint-cover{ height:450px; }
}

/* 2 · Montessori-foto: kader vult de kolom, 4:5, -3°, papierrand 12px */
#aprender .split{ gap:85px; }
.polaroid-lg{ max-width:none; padding:12px 12px 14px; }
.polaroid-lg, .polaroid.tilt-l{ transform:rotate(-3deg); }
.polaroid-lg img{ aspect-ratio:4/5; object-position:53% center; }
@media (max-width:860px){
  #aprender .split{ gap:2rem; }
  .polaroid-lg img{ aspect-ratio:1.05/1; }
}

/* 3 · activiteitenfoto's: 1.12fr/1fr, 100px tussenruimte, organische randen */
.feature{ grid-template-columns:1.12fr 1fr; gap:100px; }
.blob-img{ aspect-ratio:4/4.4; border-radius:2px; }
.blob-img.wide{ aspect-ratio:1.05/1; }
.curve-top{ border-radius:48% 48% 2px 2px / 20% 20% 2px 2px; }
.corner-bl{ border-radius:2px 2px 2px 140px; }
.corner-tr{ border-radius:2px 140px 2px 2px; }
@media (max-width:860px){
  .feature{ grid-template-columns:1fr; gap:1.6rem; }
  .blob-img, .blob-img.wide{ aspect-ratio:1.05/1; }
  .corner-bl{ border-radius:2px 2px 2px 90px; }
  .corner-tr{ border-radius:2px 90px 2px 2px; }
}

/* 4 · familias/team-polaroid: 1:1, +3°, kolomvullend */
#equipo .split{ gap:100px; }
#equipo .polaroid{ max-width:none; width:100%; padding:12px 12px 14px; }
.polaroid.tilt-r{ transform:rotate(3deg); }
#equipo .polaroid img{ aspect-ratio:1/1; object-position:center 40%; }
@media (max-width:860px){ #equipo .split{ gap:2rem; } }

/* 5 · overlappende fotocollage aan het einde van het verhaal */
.end-collage{
  position:absolute; left:4vw; top:94.1%;
  width:46vw; max-width:640px; pointer-events:none;
  padding-bottom:16%;
}
.collage-card{
  margin:0; background:#FFFDF6; padding:12px 12px 12px;
  box-shadow:0 20px 50px rgba(46,70,50,.28);
}
.collage-card img{ width:100%; aspect-ratio:1.43/1; object-fit:cover; display:block; }
.collage-big{ width:74%; transform:rotate(-7deg); }
.collage-small{ position:absolute; right:0; bottom:2%; width:45%; transform:rotate(5deg); }
.collage-small img{ object-position:center 60%; }
.collage-card figcaption{ font-size:.78rem; color:#6E7F63; padding-top:.5rem; }
.collage-card figcaption em{ color:#8A946A; }
.collage-small figcaption.hand-cap{ font-size:1.02rem; padding-top:.4rem; }
@media (max-width:860px){
  .end-collage{ left:50%; transform:translateX(-50%); width:min(92vw, 450px); min-height:450px; top:95.2%; padding-bottom:0; }
  .collage-big{ width:78%; }
  .collage-small{ width:58%; bottom:auto; top:58%; }
}
body.motion-off .end-collage, body.no-js .end-collage{
  position:relative; left:auto; top:auto; transform:none; margin:2.5rem auto;
  width:min(92vw, 520px); padding-bottom:18%;
}

/* ============================================================
   HERO v11 — patio-schildering met kinderen, tekstkolom rechts
   ============================================================ */
.cover-grad{
  background:linear-gradient(270deg, rgba(247,241,227,.97) 0%, rgba(247,241,227,.9) 26%, rgba(247,241,227,.55) 46%, rgba(247,241,227,0) 66%);
}
.cover-copy{ left:auto; right:clamp(1.3rem, 6vw, 5.5rem); }
#paint-cover img{ object-position:32% 45%; }
#paint-final img{ object-position:65% 45%; }
@media (max-width:860px){
  .cover-grad{ background:linear-gradient(0deg, rgba(247,241,227,.97) 0%, rgba(247,241,227,.92) 34%, rgba(247,241,227,.4) 58%, rgba(247,241,227,0) 78%); }
  .cover-copy{ right:1.2rem; }
  #paint-cover img{ object-position:25% 40%; } /* grote boom links zichtbaar houden */
  #paint-final img{ object-position:78% 40%; } /* olm rechts in het panorama */
}
.cover-samara{ left:34%; top:7%; }
.paint-credit{
  position:absolute; left:1.1rem; bottom:.9rem; z-index:3;
  font-size:.68rem; letter-spacing:.08em; color:#7A8465;
  background:rgba(247,241,227,.75); padding:.25rem .7rem; border-radius:999px;
}
@media (max-width:860px){ .paint-credit{ bottom:auto; top:4.2rem; } }
.head-link{
  color:var(--green); text-decoration:none; font-weight:600; font-size:.9rem;
  padding:.42rem .3rem .3rem; border-bottom:1.5px solid var(--green);
  background:none; box-shadow:none;
}
.head-link:hover{ color:var(--terracotta-deep); border-color:var(--terracotta-deep); }
.collage-big figcaption{ font-size:.82rem; font-weight:600; color:#54654B; }

/* ============================================================
   v12 — slottekst direct op de schildering + volledige collagefoto's
   ============================================================ */
.story-card.bare{ background:transparent; box-shadow:none; border:0; padding:0 .5rem; }
.story-card.bare::before{ display:none; }
.story-card.bare > p, .story-card.bare .aqui p{ color:#3E5943; }
.final-grad{
  position:absolute; inset:0;
  background:linear-gradient(270deg, rgba(247,241,227,.96) 0%, rgba(247,241,227,.86) 28%, rgba(247,241,227,.45) 50%, rgba(247,241,227,0) 68%);
}
@media (max-width:860px){
  .final-grad{ background:linear-gradient(0deg, rgba(247,241,227,.96) 0%, rgba(247,241,227,.9) 36%, rgba(247,241,227,.35) 60%, rgba(247,241,227,0) 80%); }
}
/* collage hoger geplaatst zodat hij volledig zichtbaar is, foto's in hun eigen verhouding */
.end-collage{ top:90.4%; padding-bottom:10%; }
.collage-big img{ aspect-ratio:4/3; }
.collage-small{ width:42%; bottom:auto; top:52%; }
.collage-small img{ aspect-ratio:3/4; object-position:center 30%; }
@media (max-width:860px){
  .end-collage{ top:92.8%; min-height:480px; }
  .collage-small{ width:52%; top:48%; }
}

/* v13 — derde foto in het slotalbum: waaier van drie */
.end-collage{ top:88.8%; padding-bottom:34%; }
.collage-big{ width:70%; }
.collage-mid{ position:absolute; right:-2%; top:26%; width:50%; transform:rotate(-3deg); z-index:1; }
.collage-mid img{ aspect-ratio:4/3; }
.collage-mid figcaption.hand-cap{ font-size:1.02rem; padding-top:.4rem; }
.collage-small{ width:38%; left:24%; right:auto; top:64%; z-index:2; }
@media (max-width:860px){
  .end-collage{ top:91.6%; min-height:640px; padding-bottom:0; }
  .collage-big{ width:80%; }
  .collage-mid{ width:62%; right:0; top:36%; }
  .collage-small{ width:48%; left:2%; top:66%; }
}

/* v13b — groter slotstatement "Aquí aprendemos. Aquí crecemos." */
.story-card.bare{ width:min(600px, calc(100vw - 2.4rem)); }
.story-card.bare .h-duo.sm{ font-size:clamp(2.1rem, 4vw, 3.4rem); }
.story-card.bare > p{ font-size:1.08rem; max-width:46ch; }
.story-card.bare .card-hand{ font-size:1.5rem; }
@media (max-width:860px){
  .story-card.bare .h-duo.sm{ font-size:clamp(1.8rem, 7.5vw, 2.4rem); }
}
.end-collage{ top:88.2%; }

/* taalschakelaar in het menu */
.lang-switch{
  display:inline-flex; align-items:center; gap:.45rem;
  background:rgba(251,247,236,.9); border-radius:999px; padding:.42rem .9rem;
  box-shadow:var(--shadow-soft); font-size:.85rem; letter-spacing:.06em;
}
.lang-switch b{ color:var(--green); border-bottom:2px solid var(--green); padding-bottom:.05rem; }
.lang-switch i{ font-style:normal; color:#A9B084; }
.lang-switch a{ color:var(--green-soft); text-decoration:none; font-weight:600; padding-bottom:.05rem; border-bottom:2px solid transparent; }
.lang-switch a:hover{ color:var(--terracotta-deep); border-color:var(--terracotta-deep); }

/* ============================================================
   v16 — foto-lightbox: klik op een foto = groot bekijken
   ============================================================ */
img.zoomable{ cursor:zoom-in; }
.end-collage{ pointer-events:none; }
.end-collage .collage-card{ pointer-events:auto; }
dialog.photo-lightbox{
  border:0; padding:0; background:transparent; max-width:none; width:auto;
  margin:auto; overflow:visible;
}
dialog.photo-lightbox::backdrop{ background:rgba(30,42,32,.82); }
dialog.photo-lightbox figure{
  margin:0; background:#FFFDF6; padding:14px 14px 12px; border-radius:6px;
  box-shadow:0 30px 90px rgba(0,0,0,.5);
}
dialog.photo-lightbox img{
  display:block; max-width:min(92vw, 1200px); max-height:82vh;
  width:auto; height:auto; border-radius:3px; cursor:zoom-out;
}
dialog.photo-lightbox figcaption{
  padding-top:.6rem; font-family:var(--font-hand); font-size:1.25rem; color:var(--terracotta-deep); text-align:center;
}
dialog.photo-lightbox .dialog-close{ top:-14px; right:-14px; }
/* v16b — lightbox zonder bijschrift: strak papieren kader */
dialog.photo-lightbox figure{ padding:14px; }

/* ============================================================
   v17 — LA AGENDA: tabs, eventkaarten, ¡voy! en reacties
   ============================================================ */
.agenda-page .section{ padding-top:clamp(6rem,10vw,8rem); }
.agenda-tabs{ display:flex; gap:1rem; margin:1.8rem 0 2.2rem; flex-wrap:wrap; }
.agenda-tab{
  display:flex; align-items:center; gap:.85rem; text-align:left;
  border-radius:24px; padding:.8rem 1.6rem .8rem .9rem; cursor:pointer;
  font-family:var(--font-body); box-shadow:var(--shadow-soft);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease);
}
.agenda-tab:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.tab-art{
  width:58px; height:58px; border-radius:50%; display:grid; place-content:center;
  flex:none; border:2px solid transparent;
}
.tab-art svg{ width:46px; height:46px; display:block; }
.tab-text{ display:grid; gap:.05rem; }
.tab-text b{ font-size:1.08rem; font-weight:700; line-height:1.15; }
.tab-text small{ font-size:.8rem; font-weight:500; opacity:.85; }
.tab-escuela{ border:2px solid var(--green); background:var(--card); color:var(--green); }
.tab-escuela .tab-art{ background:#E3EBD9; border-color:rgba(49,87,59,.25); }
.tab-escuela[aria-selected="true"]{ background:var(--green); color:#F3ECDA; }
.tab-entorno{ border:2px solid var(--terracotta); background:var(--card); color:#8F4523; }
.tab-entorno .tab-art{ background:#F6E7D8; border-color:rgba(194,110,74,.3); }
.tab-entorno[aria-selected="true"]{ background:var(--terracotta-deep); color:#FBF1E6; }
@media (max-width:560px){
  .agenda-tabs{ gap:.7rem; }
  .agenda-tab{ flex:1 1 100%; }
}
.ev-list{ display:grid; gap:1.1rem; max-width:860px; }
.ev-card{
  display:grid; grid-template-columns:auto 1fr; gap:1.2rem; align-items:start;
  background:var(--card); border:1px solid rgba(74,90,66,.18); border-radius:14px;
  padding:1.2rem 1.4rem; box-shadow:0 10px 26px rgba(46,70,50,.08);
}
.ev-disc{
  width:64px; height:64px; border-radius:50%; background:#D9B98E;
  border:4px solid #8A6242; display:grid; place-content:center; text-align:center;
  box-shadow:inset 0 0 0 3px #C9A878; flex:none;
}
.ev-disc b{ font-family:var(--font-display); font-size:1.5rem; color:#4A2F1D; line-height:1; display:block; }
.ev-disc span{ font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:#6E4A2C; }
.ev-title{ font-size:1.25rem; margin:0 0 .25rem; }
.ev-meta{ font-size:.85rem; color:#6E7F63; margin:0 0 .5rem; }
.ev-desc{ font-size:.95rem; color:#54654B; margin:0 0 .8rem; max-width:58ch; }
.ev-actions{ display:flex; gap:.9rem; align-items:center; flex-wrap:wrap; }
.go-btn{
  border:0; background:var(--terracotta-deep); color:#FBF7EC; border-radius:999px;
  padding:.55rem 1.2rem; font:700 .92rem var(--font-body); cursor:pointer;
}
.go-btn:hover{ background:#8F4523; }
.go-btn.done{ background:var(--green); cursor:default; }
.go-count{ font-weight:600; opacity:.9; }
.go-form{ display:flex; gap:.5rem; margin-top:.6rem; flex-wrap:wrap; }
.go-form input{ border:1.5px solid rgba(74,90,66,.4); border-radius:999px; padding:.5rem .9rem; font:inherit; width:170px; background:#fff; }
.go-form select{ border:1.5px solid rgba(74,90,66,.4); border-radius:999px; padding:.5rem .7rem; font:inherit; background:#fff; }
.go-send{ border:0; background:var(--green); color:#F3ECDA; border-radius:999px; padding:.5rem 1.1rem; font:600 .9rem var(--font-body); cursor:pointer; }
.go-cancel{ border:0; background:transparent; color:#6E7F63; font:600 .85rem var(--font-body); cursor:pointer; }
.ev-reacts{ display:flex; gap:.35rem; }
.react-btn{
  border:1px solid rgba(74,90,66,.25); background:#fff; border-radius:999px;
  padding:.4rem .7rem; font-size:.95rem; cursor:pointer;
}
.react-btn:hover{ transform:translateY(-1px); }
.react-btn.done{ background:#EFF2DC; border-color:var(--olive); }
.react-count{ font:600 .8rem var(--font-body); color:#54654B; }
.ics-btn{ border:0; background:transparent; color:#6E7F63; font:600 .82rem var(--font-body); cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.ics-btn:hover{ color:var(--terracotta-deep); }
.agenda-note{ font-size:.85rem; color:#6E7F63; margin-top:1.6rem; max-width:62ch; }
.agenda-finale{ margin-top:3rem; padding-top:2.4rem; }
.agenda-finale .finale-bottom{ margin-top:1.2rem; }
@media (max-width:560px){
  .ev-card{ grid-template-columns:1fr; }
  .ev-disc{ width:56px; height:56px; }
}
.go-form[hidden]{ display:none; }

/* v19 — agenda: herkomst duidelijker, plaats prominent, illustratieblob */
.ev-side{ display:grid; gap:.5rem; justify-items:center; }
.ev-icon{
  width:52px; height:52px; border-radius:46% 54% 48% 52% / 52% 46% 54% 48%;
  display:grid; place-content:center; font-size:1.6rem;
  background:#EFF2DC; border:1.5px solid rgba(124,132,80,.35);
}
.ev-card{ border-left:6px solid var(--olive); }
.ev-card.ev-escuela{ border-left-color:var(--green); }
.ev-card.ev-escuela .ev-icon{ background:#E3EBD9; }
.ev-card.ev-entorno{ border-left-color:var(--terracotta); }
.ev-card.ev-entorno .ev-icon{ background:#F6E7D8; border-color:rgba(194,110,74,.35); }
.ev-chip{
  display:inline-block; font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  padding:.18rem .7rem; border-radius:999px; margin-bottom:.45rem;
}
.ev-escuela .ev-chip{ background:#E3EBD9; color:#31573B; }
.ev-entorno .ev-chip{ background:#F6E7D8; color:#8F4523; }
.ev-place{ font-size:1rem; font-weight:700; color:var(--green); margin:0 0 .3rem; }
a.ics-btn{ display:inline-block; }

/* v20 — taalknop als uitklapper: huidige taal, andere klapt uit bij hover/focus */
.lang-drop{
  position:relative; display:inline-flex; align-items:center;
  background:rgba(251,247,236,.9); border-radius:999px; padding:.42rem 1rem;
  box-shadow:var(--shadow-soft); font-size:.85rem;
}
.lang-drop b{ color:var(--green); font-weight:700; letter-spacing:.08em; }
.lang-drop b i{ font-style:normal; font-size:.72em; color:#7A8465; margin-left:.15rem; }
.lang-opt{
  position:absolute; top:calc(100% + 6px); left:0; right:0; text-align:center;
  background:#FBF7EC; border-radius:999px; padding:.45rem 0;
  box-shadow:var(--shadow); color:var(--green-soft); font-weight:700; letter-spacing:.08em;
  text-decoration:none; opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.lang-drop:hover .lang-opt, .lang-drop:focus-within .lang-opt{
  opacity:1; visibility:visible; transform:none;
}
.lang-opt:hover{ color:var(--terracotta-deep); }