/* ===== Coco the Axolotl — Shared Styles ===== */

*{box-sizing:border-box}

body{
  margin:0;
  font-family:'Baloo 2',cursive;
  background:#fef6fb;
  color:#333;
}

/* ===== Home link ===== */
.home-link{display:inline-block;color:#fff;text-decoration:none;font-weight:700;font-size:.9em;opacity:.85;transition:opacity .2s}
.home-link:hover{opacity:1;text-decoration:underline}

/* ===== Page header ===== */
header{background:#f7c1cc;padding:12px 20px 20px;text-align:center}
header h1{margin:0;font-size:2.2em;font-weight:800}
header p{margin:8px 0 0;font-size:1.05em;opacity:.85}

/* ===== Language toggle ===== */
.lang-toggle{display:inline-flex;gap:0;margin:18px auto 0;border-radius:32px;overflow:hidden;border:2px solid #ff69b4}
.lang-btn{padding:8px 22px;font-family:'Baloo 2',cursive;font-size:1em;font-weight:600;border:none;cursor:pointer;transition:background .2s,color .2s;background:transparent;color:#ff69b4}
.lang-btn.active{background:#ff69b4;color:#fff}

/* ===== Language visibility ===== */
[data-lang="fr"]{display:none}
[data-lang="es"]{display:none}
span[data-lang="fr"]{display:none}
span[data-lang="es"]{display:none}
body.fr [data-lang="fr"]{display:block}
body.fr [data-lang="en"]{display:none}
body.fr span[data-lang="fr"]{display:inline}
body.fr span[data-lang="en"]{display:none}
body.es [data-lang="es"]{display:block}
body.es [data-lang="en"],body.es [data-lang="fr"]{display:none}
body.es span[data-lang="es"]{display:inline}
body.es span[data-lang="en"],body.es span[data-lang="fr"]{display:none}

/* ===== Common content ===== */
main{max-width:780px;margin:0 auto;padding:30px 20px 40px}

/* ===== CTA buttons ===== */
.cta{display:inline-block;margin:20px 8px 0;padding:12px 28px;background:#ff69b4;color:#fff;text-decoration:none;border-radius:32px;font-weight:700;font-family:'Baloo 2',cursive;transition:filter .2s}
.cta:hover{filter:brightness(.95)}

/* ===== Back link ===== */
a.back{display:block;margin-top:28px;color:#ff69b4;text-decoration:none;font-weight:800;font-size:1.05em;text-align:center}
a.back:hover{text-decoration:underline}

/* ===== Footer ===== */
footer{padding:20px;font-size:.85em;opacity:.6;text-align:center}
footer a{color:#777;text-decoration:underline}

/* ===== Responsive ===== */
@media(max-width:700px){
  header h1{font-size:1.7em}
  h2{font-size:1.2em}
}