/* Axustes de deseño: lectura máis doada, menos scroll e un móbil á altura do escritorio.
   Cárgase despois de hand.css e só sobrescribe o necesario. */

/* Letra do texto corrido: Conto Sans, un subconxunto latino de Andika (SIL, OFL-1.1)
   co nome cambiado, como pide a licenza ao modificar a fonte. Patrick Hand queda para
   títulos, etiquetas, botóns e personaxes. */
@font-face{font-family:'Conto Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/ContoSans-Regular.woff') format('woff')}
@font-face{font-family:'Conto Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/ContoSans-Bold.woff') format('woff')}

:root{
  --sans:'Conto Sans','Andika','Trebuchet MS',sans-serif;
  /* O azul do texto pasa de 4,4:1 a 6,5:1 sobre branco (AA). */
  --body-blue:#1f6391;
  --muted:#2c6b96;
  --coral:#b5432e;
  --header-h:76px;
}

html{scroll-padding-top:calc(var(--header-h) + 12px)}
body{font-family:var(--sans);font-size:17px;line-height:1.65;color:var(--body-blue)}

.hero-text,.intro-flow p,.section-heading>div>p:not(.eyebrow),.book-heading p:not(.eyebrow),.license-main>p:not(.eyebrow),.credits-intro,.start-copy p:not(.eyebrow),.star-band-copy p:not(.eyebrow),.book-text p{font-family:var(--sans);color:var(--body-blue)}
.hero-text{font-size:18px;line-height:1.6}
.intro-flow p{font-size:17px;line-height:1.7}
.resource-info small,.contribute-grid p{font-family:var(--sans);font-size:16px;line-height:1.5;color:var(--body-blue)}
.license-main>p:not(.eyebrow){font-size:17px}
.license-main .license-note{font-size:15px!important;opacity:1;color:var(--muted)}
.chip small{font-size:14px}
.footer-bottom{font-family:var(--sans)}
/* A marca da cabeceira segue sendo letra de man */
.wordmark .mark-tail{font-family:var(--serif)}


/* Bocadillos e liñas co trazo das ilustracións: un só trazo, tramos que non chegan a pecharse,
   algún puntiño nos ocos; e as discontinuas finas e curvas dos voos de papel. */
:root{
  --bubble-box:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'%3E%3Cpath d='M30 6C80 3 140 5 172 6C190 7 196 20 196 40C197 62 194 88 168 93C120 97 70 95 32 94C10 93 4 78 4 52C4 26 8 8 30 6Z' fill='%23fff'/%3E%3Cpath d='M35 5.5C80 3 120 5 149 5M163 6C184 7 196 20 196 40C197 56 196 70 192 81M183 91C150 96 110 95 88 94M71 94.5C50 95 40 94 32 94C12 93 4 78 4 57M5 37C6 18 14 7 28 6' fill='none' stroke='%233f80b1' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M156 5.5l0 0M188.5 86.5l0 0M79.5 94.5l0 0M4.5 47l0 0' fill='none' stroke='%233f80b1' stroke-width='3.2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --bubble-tail-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 24'%3E%3Cpath d='M2 0H32V8L17 23L5 8Z' fill='%23fff'/%3E%3Cpath d='M4.5 4C8 9 12 15 16 22.5C19 17 23 11 28.5 5.5' fill='none' stroke='%233f80b1' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --bubble-tail-left:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 34'%3E%3Cpath d='M24 2V32H16L1 17L16 5Z' fill='%23fff'/%3E%3Cpath d='M20.5 4.5C15 8 9 12 1.5 16.5C8 19 13 23 18.5 28.5' fill='none' stroke='%233f80b1' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --bubble-tail-right:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 34'%3E%3Cpath d='M0 2V32H8L23 17L8 5Z' fill='%23fff'/%3E%3Cpath d='M3.5 4.5C9 8 15 12 22.5 16.5C16 19 11 23 5.5 28.5' fill='none' stroke='%233f80b1' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --dash-loop:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 40'%3E%3Crect x='0' y='26' width='150' height='8' fill='%23fff'/%3E%3Cpath d='M0 30C26 30 44 31 58 25C74 18 80 6 70 3C59 0 50 12 58 22C67 33 92 31 150 30' fill='none' stroke='%235b97c2' stroke-width='1.6' stroke-linecap='round' stroke-dasharray='6 6'/%3E%3C/svg%3E");
  --dash-straight:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 4'%3E%3Cpath d='M3 2H10M16 2H23' fill='none' stroke='%235b97c2' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  --frame-box:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 200' preserveAspectRatio='none'%3E%3Cpath d='M26 8C200 5 420 7 556 6M588 7C680 7 760 6 778 8C790 10 794 20 793 40C794 90 793 140 792 168M785 192C700 195 500 194 334 193M302 193C200 194 80 194 24 192C12 191 7 182 7 166C6 120 7 70 8 30C9 16 14 9 21 8' fill='none' stroke='%233f80b1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M572 6.5l0 0M791 181l0 0M318 193l0 0' fill='none' stroke='%233f80b1' stroke-width='3' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --dash-wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 156 10'%3E%3Cpath d='M1.5 5.13Q4.8 5.42 8.0 5.70M14.5 6.21Q17.8 6.44 21.0 6.65M27.5 6.97Q30.8 7.08 34.0 7.16M40.5 7.20Q43.8 7.16 47.0 7.09M53.5 6.84Q56.8 6.66 60.0 6.46M66.5 5.98Q69.8 5.72 73.0 5.44M79.5 4.87Q82.8 4.58 86.0 4.30M92.5 3.79Q95.8 3.56 99.0 3.35M105.5 3.03Q108.8 2.92 112.0 2.84M118.5 2.80Q121.8 2.84 125.0 2.91M131.5 3.16Q134.8 3.34 138.0 3.54M144.5 4.02Q147.8 4.28 151.0 4.56' fill='none' stroke='%235b97c2' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  --dash-line:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 4'%3E%3Cpath d='M3 2H10M16 2H23' fill='none' stroke='%238fbcd8' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ---------- Cabeceira fixa ---------- */
.site-header{position:sticky;top:0;z-index:100;background:#fff;padding-top:16px;padding-bottom:14px;
  box-shadow:0 0 0 100vmax #fff;clip-path:inset(0 -100vmax)}
.site-header nav{gap:clamp(18px,2.4vw,34px)}
.nav-toggle{display:none}


/* ---------- Unha soa grella: a etiqueta da sección sempre enriba ---------- */
/* Menos aire entre seccións: a páxina era de 12 pantallas. */
.section{padding-top:clamp(72px,8vw,118px);padding-bottom:clamp(76px,8.5vw,124px)}
.section-label{margin-bottom:36px}


/* ---------- Hero ---------- */
.hero-lang{margin:22px auto 0;font-size:15px;color:var(--muted)}
.hero-lang a{color:var(--ink);text-underline-offset:4px;text-decoration-thickness:1px}
.hero-lang a:hover{color:var(--coral)}


/* ---------- 01 Que é isto: texto á esquerda, os mapaches enchen a dereita ---------- */
.story-intro{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);grid-template-areas:"label label" "main art";column-gap:clamp(30px,5vw,80px);align-items:center}
.story-intro .section-label{grid-area:label;margin-top:0}
.intro-main{grid-area:main;max-width:760px}
.intro-art{grid-area:art;margin:0;text-align:center;align-self:end}
.intro-art img{display:block;width:100%;max-width:460px;height:auto;margin:0 auto}
.intro-art figcaption{margin-top:4px;font-family:var(--serif);font-size:19px;color:var(--coral);transform:rotate(-2deg)}
.intro-art figcaption span{display:block;font-size:17px;color:var(--muted)}
.intro-examples{margin-top:30px}


/* ---------- Bocadillos ---------- */
.bubble{position:relative;margin:0;padding:14px 20px 34px;
  font-family:var(--serif);font-size:20px;line-height:1.2;color:var(--ink);text-align:center;
  background:var(--bubble-tail-down) center bottom/34px 24px no-repeat,var(--bubble-box) center top/100% calc(100% - 17px) no-repeat;
  transform:rotate(-1deg)}
.bubble::first-letter{color:inherit}


/* Norma presenta Colabora co bocadillo */
.host{width:240px;gap:0;color:var(--ink)}
.host .bubble{margin-bottom:6px}
.host img{width:150px;height:150px}
.host .host-name{margin:4px 0 0;font-family:var(--serif);font-size:17px;color:var(--coral)}
.host .host-name::first-letter{color:inherit}


/* ---------- 02 O libro: título, texto e acción á esquerda; Ocre á dereita, sen pisar o libro ---------- */
.book-heading{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:clamp(30px,5vw,80px)}
.book-heading h2{margin-bottom:24px}
.book-text p{max-width:560px}
.book-text .actions{margin-top:24px}
.book-stage{position:relative;max-width:1060px;margin:clamp(48px,5vw,72px) auto 0}
.book-stage .book-preview{margin-top:0}
.book-ocre{display:flex;align-items:flex-end;gap:6px}
.book-ocre-fig{display:flex;flex-direction:column;align-items:center}
.book-ocre img{width:170px;height:auto;display:block}
.book-ocre .host-name{margin-top:2px;font-family:var(--serif);font-size:17px;color:var(--coral)}
.book-ocre .bubble{width:270px;margin-bottom:130px;font-size:20px;
  background:var(--bubble-tail-right) right 62%/24px 34px no-repeat,var(--bubble-box) left top/calc(100% - 15px) 100% no-repeat;
  padding:16px 38px 17px 22px;transform:rotate(-2deg)}
.book-preview .book-single{display:none}

@media(max-width:1000px){
  .book-ocre img{width:130px}
  .book-ocre .bubble{width:210px;font-size:18px;margin-bottom:96px}
}


/* ---------- 03 Materiais: Teky deixa unha nota escrita a man ---------- */
.with-hand{grid-template-columns:minmax(0,1fr) 360px;align-items:end;margin-bottom:20px}
.hand-host{position:relative;width:380px;height:270px}
.hand-host img{position:absolute;right:0;top:0;width:180px;height:auto}
.hand-quote{position:absolute;left:0;bottom:6px;z-index:1;width:215px;margin:0;font-family:var(--serif);font-size:23px;line-height:1.1;color:var(--coral);transform:rotate(-5deg)}
.hand-arrow{display:block;width:46px;height:54px;margin:6px 0 0 64px;fill:none;stroke:var(--coral);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}


/* ---------- 04 Colabora ---------- */
.contrib-support .contrib-no{color:var(--coral)}
.contribute{padding-bottom:clamp(40px,5vw,64px)}
.contribute::after{content:none!important}

/* A ilustración de Teky volve ir de lado a lado; o texto vive no seu ceo */
.start-scene{position:relative;padding-bottom:0}
.start-scene::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line)}
.start-scene .start-art{display:block;width:100%;height:auto;mix-blend-mode:multiply}
.start-copy{position:absolute;inset:0 0 auto 0;pointer-events:none}
.start-copy>div{width:min(500px,40%);margin-left:auto;padding-top:1.5vw;pointer-events:auto}
.start-copy h3{font-family:var(--serif);font-weight:400;color:var(--ink);font-size:clamp(46px,4.8vw,78px);line-height:1.02;margin:0 0 22px;letter-spacing:-.018em}
.start-copy p:not(.eyebrow){font-size:17px;max-width:460px;margin-bottom:6px}
.start-copy .actions{margin-top:22px}


/* ---------- Franxa da estrela ---------- */
.star-band{border-top:1px solid var(--line)}
.star-band-inner{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(20px,3vw,48px);align-items:center}
.star-band-art{width:110px;height:auto}
.star-band-copy .eyebrow{margin-bottom:4px}
.star-band-copy h2{font-family:var(--serif);font-size:clamp(30px,3vw,42px);line-height:1.08;margin:0 0 8px;letter-spacing:-.01em}
.star-band-copy p:not(.eyebrow){margin:0;max-width:560px;font-size:16px}
.star-band .button{white-space:nowrap}
/* O pé non leva raia propia: a discontinua da franxa xa separa. */
.site-footer{border-top:0}


/* ---------- Créditos ---------- */
.chip .av{width:64px;height:64px;border-color:#9cc3d9}
.people .chip .av{width:68px;height:68px}
.chip strong a{display:inline-block;padding:6px 0}
.footer-bottom a{display:inline-block;padding:12px 0 16px;background-position:left calc(100% - 8px)}


/* ---------- Tableta ---------- */
@media(max-width:1000px){
  .start-copy{position:static}
  .start-copy>div{width:auto;max-width:620px;margin:0 auto;padding:0 0 10px;text-align:center}
  .start-copy p:not(.eyebrow){margin-left:auto;margin-right:auto}
  .start-copy .actions{justify-content:center}
  .start-scene{display:flex;flex-direction:column-reverse}
}


/* ---------- Móbil ---------- */
@media(max-width:720px){
  :root{--header-h:64px}
  body{font-size:16.5px}

  /* Cabeceira: marca + menú despregable */
  .site-header{padding-top:12px;padding-bottom:10px;align-items:center;flex-wrap:wrap}
  .site-header.has-toggle .nav-toggle{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 14px;
    border:2px solid var(--ink);border-radius:14px 18px 13px 16px;background:#fff;color:var(--ink);
    font-family:var(--serif);font-size:19px;cursor:pointer}
  .site-header.has-toggle .nav-toggle::after{content:"";width:16px;height:10px;
    background:linear-gradient(currentColor 0 0) top/100% 2px no-repeat,linear-gradient(currentColor 0 0) center/100% 2px no-repeat,linear-gradient(currentColor 0 0) bottom/100% 2px no-repeat}
  .site-header.nav-open .nav-toggle::after{content:"✕";width:auto;height:auto;background:none;font-size:15px;line-height:1}
  .site-header.has-toggle nav{display:none;flex-basis:100%;flex-direction:column;align-items:stretch;gap:0;padding:8px 0 4px}
  .site-header.nav-open nav{display:flex}
  .site-header nav a:not(.nav-read),.site-header nav a{display:flex;align-items:center;min-height:48px;font-size:22px;border-top:1px solid var(--line)}
  .site-header nav .nav-read{background-image:none;color:var(--coral)}
  /* Sen JavaScript, a ligazón principal segue á vista */
  .site-header:not(.has-toggle) nav a:not(.nav-read){display:none}
  .site-header:not(.has-toggle) nav a.nav-read{border-top:0}

  /* Seccións: a metade de aire */
  .section{padding-top:56px;padding-bottom:60px}
  .section-label{margin-bottom:24px}

  /* Hero: menos oco e a ilustración centrada na caixa de Teky */
  .hero{padding-top:36px}
  .hero-scene .actions{margin-top:22px;gap:14px}
  .hero-lang{font-size:14px;margin-top:18px}
  .hero-scene .hero-art{margin-top:14px;height:230px}
  .hero-scene .hero-art img{object-position:70% 100%}

  /* 01: os mapaches debaixo, co texto que remata á esquerda */
  .story-intro{display:block}
  .intro-art{max-width:260px;margin:22px 0 0 auto}

  /* 02: Ocre e o seu bocadillo en fila, enriba da páxina */
  .book-heading{grid-template-columns:1fr;gap:18px}
  .book-stage{margin-top:28px}
  .book-ocre{justify-content:flex-start;flex-direction:row-reverse;margin-top:8px}
  .book-ocre img{width:92px}
  .book-ocre .bubble{width:auto;flex:1;margin-bottom:40px;font-size:18px;padding:13px 16px 14px 32px;
    background:var(--bubble-tail-left) left 62%/24px 34px no-repeat,var(--bubble-box) right top/calc(100% - 15px) 100% no-repeat}
  .book-preview{margin:0;width:auto;max-width:none}
  .book-preview .book-board{display:none}
  .book-preview .book-single{display:block;width:100%;max-width:420px;height:auto;margin:0 auto;
    outline:1px solid #d8e1e8;box-shadow:2px 2px 0 #fff,4px 4px 0 #d8e1e8,0 18px 26px -14px #09528e55}

  /* 03: a nota de Teky ao lado da imaxe */
  .with-hand{display:block}
  .hand-host{width:100%;max-width:340px;height:210px;margin:16px 0 0 auto}
  .hand-host img{width:140px}
  .hand-quote{width:190px;font-size:19.5px;bottom:0}
  .hand-arrow{margin-left:50px;height:44px}

  /* 04: Norma en fila co seu bocadillo */
  .host{display:grid;grid-template-columns:96px minmax(0,1fr);grid-template-areas:"img bubble" "name bubble";
    column-gap:12px;align-items:center;width:auto;max-width:360px;margin:24px 0 0;text-align:left}
  .host img{grid-area:img;width:96px;height:96px;margin:0}
  .host .host-name{grid-area:name;text-align:center;margin:2px 0 0;font-size:15px;align-self:start}
  .host .bubble{grid-area:bubble;font-size:18px;text-align:left;transform:rotate(-1deg);
    background:var(--bubble-tail-left) left center/24px 34px no-repeat,var(--bubble-box) right top/calc(100% - 15px) 100% no-repeat;
    padding:13px 16px 14px 32px}
  .with-host{margin-bottom:28px}

  .start-copy>div{text-align:left;padding:0 0 6px}
  .start-copy .actions{justify-content:flex-start}
  .start-copy h3{font-size:clamp(38px,10vw,50px)}

  .license-art{margin-top:18px}

  /* Estrela: compacta */
  .star-band-inner{grid-template-columns:72px minmax(0,1fr);gap:16px;padding-top:26px;padding-bottom:28px}
  .star-band-art{width:72px}
  .star-band-copy h2{font-size:30px}

  .chip .av{width:56px;height:56px}
  .people .chip .av{width:60px;height:60px}
  .chip strong{font-size:18px}
  .chip small{font-size:13.5px}
}


/* ---------- Separadores discontinuos, coma os das ilustracións ---------- */
.story-intro::after,.resources::after,.star-section::after,.contribute::after,.license-section::after,.start-scene::after,.book-section::after{
  height:10px;bottom:-5px;background:var(--dash-wave) repeat-x left center/156px 10px}
.book-section{position:relative;border-bottom:0}
.book-section::after{content:"";position:absolute;left:calc(50% - 50vw);width:100vw;pointer-events:none}
.contribute::after{content:none!important}
.start-scene::after{left:0;right:0}
.star-band{border-top:0;position:relative}
.star-band::before{content:"";position:absolute;left:0;right:0;top:-5px;height:10px;background:var(--dash-wave) repeat-x left center/156px 10px}
.footer-flor i{height:10px;background:var(--dash-wave) repeat-x left center/156px 10px}

/* Caixas e listas: discontinua recta e fina */
.resource-list{border-top:0;background:var(--dash-line) repeat-x left top/26px 4px}
.resource-list>a{border-bottom:0;background:var(--dash-line) repeat-x left bottom/26px 4px}
.contribute-grid{border-top:0;background:var(--dash-line) repeat-x left top/26px 4px}
.contribute-grid>a{border-bottom:0;background:var(--dash-line) repeat-x left bottom/26px 4px}
.site-header nav a:not(.nav-read){border-top-color:transparent}
@media(max-width:720px){
  .site-header.has-toggle nav a{border-top:0;background:var(--dash-line) repeat-x left top/26px 4px}
}

/* A cabeceira leva a discontinua recta: a ondulada, ao quedar fixa, cortábase nos bordos. */
.site-header::after{height:4px;bottom:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 4'%3E%3Cpath d='M3 2H10M16 2H23' fill='none' stroke='%235b97c2' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left center/26px 4px}
@media(max-width:720px){.book-ocre .host-name{font-size:15px}}

/* ---------- Separadores: discontinua recta cun bucle, como os voos das ilustracións ---------- */
.story-intro::after,.resources::after,.star-section::after,.license-section::after,.start-scene::after,.book-section::after{
  height:40px;bottom:-12px;background:var(--dash-loop) left 22% top/150px 40px no-repeat,var(--dash-straight) repeat-x left 28px/26px 4px}
.footer-flor i{height:4px;background:var(--dash-straight) repeat-x left center/26px 4px}

/* ---------- Tui nun marco debuxado ---------- */
.star-band{padding:clamp(56px,6vw,84px) 0 clamp(8px,2vw,24px)}
.star-band::before{content:none}
.star-band-inner{padding:34px clamp(28px,4vw,56px) 38px;background:var(--frame-box) center/100% 100% no-repeat}
@media(max-width:900px){.star-band-inner{grid-template-columns:auto minmax(0,1fr)}.star-band .button{grid-column:2;justify-self:start}}
@media(max-width:720px){
  .star-band{padding:48px 0 0}
  .star-band-inner{padding:26px 22px 30px}
}

/* Pé: feito con amor + iconas debuxadas */
.footer-bottom{align-items:center}
.footer-made{color:var(--ink)}
.hand-heart{display:inline-block;width:1.2em;height:1.1em;vertical-align:-.22em;margin:0 .12em;fill:none;stroke:var(--coral);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transform:rotate(-6deg)}
.footer-social{display:inline-flex;align-items:center;gap:10px}
.footer-bottom a.footer-icon{display:inline-grid;place-items:center;width:44px;height:44px;padding:0;background:none;color:var(--ink);transition:transform .15s,color .15s}
.footer-icon svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.footer-bottom a.footer-icon:hover,.footer-bottom a.footer-icon:focus-visible{color:var(--coral);transform:rotate(-6deg)}
@media(max-width:720px){.footer-bottom .footer-social{display:flex;margin-left:-8px}}