/* Pediatría en Casa · shared language of the inner pages, taken from the home (prototype/home/index.template.html):
   one friendly geometric sans, white cards with an ink outline and a heavier base, pill buttons, highlighter marks,
   green sections with wavy edges. */
:root{
  --green:#3DBA7A; --deep:#0E5446; --forest:#145C3E; --ink:#173226; --cream:#F3F0E4; --mint:#E3F3EC; --white:#FFFFFF; --highlight:#B8E9CC;
  --soft:#3f5248;
  --font:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --radius:28px; --radius-s:16px;
  --step-small:clamp(0.8125rem,0.79rem + 0.1vw,0.875rem);
  --step-body:clamp(1.0625rem,1rem + 0.25vw,1.1875rem);
  --step-lead:clamp(1.25rem,1.1rem + 0.6vw,1.5rem);
  --step-h2:clamp(2.2rem,1.4rem + 3vw,4rem);
  --step-h1:clamp(2.6rem,1.6rem + 3.8vw,5rem);
  --margin:max(16px,clamp(1rem,3vw,2.75rem));
  --ease-out:cubic-bezier(0.22,1,0.36,1);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--font);font-size:var(--step-body);line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,p,figure,blockquote,ul,ol,dl,dd{margin:0}
ul[class],ol[class]{padding:0;list-style:none}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button,input{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:3px solid var(--green);outline-offset:3px}
h1,h2,h3{font-weight:800;text-wrap:balance;letter-spacing:-0.025em;line-height:1.02}
p{max-width:62ch;text-wrap:pretty}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.wrap{max-width:78rem;margin:0 auto}
.section{padding:clamp(4.5rem,9vw,8rem) var(--margin)}

/* buttons: bold, sentence case, fully round with an ink outline and an arrow that steps forward */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:0.55em;min-height:3.25rem;padding:0 1.6rem;font-weight:700;font-size:1.0625rem;line-height:1;text-decoration:none;white-space:nowrap;border:2px solid var(--ink);border-radius:999px;transition:transform 140ms var(--ease-out),background-color 180ms ease}
.btn::after{content:"→";transition:transform 220ms var(--ease-out)}
.btn:active{transform:scale(0.97)}
.btn-ink{background:var(--ink);color:var(--white)}
.btn-green{background:var(--green);color:var(--ink)}
.btn-light{background:var(--white);color:var(--ink)}
@media (hover:hover) and (pointer:fine){.btn:hover::after{transform:translateX(4px)}.btn-ink:hover{background:var(--deep)}.btn-green:hover,.btn-light:hover{background:var(--highlight)}}
.ul{text-decoration:underline;text-underline-offset:0.2em;text-decoration-thickness:0.07em}

.card{background:var(--white);color:var(--ink);border:2px solid var(--ink);border-bottom-width:5px;border-radius:var(--radius);overflow:hidden}
.mark{display:inline-block;padding:0.1em 0.45em;background:var(--highlight);color:var(--ink);font-weight:800;font-size:var(--step-lead);letter-spacing:-0.015em;transform:rotate(-1.5deg)}
.checks{display:grid;gap:0.75rem}
.checks li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0.75rem;align-items:start}
.checks .ok{display:grid;place-items:center;width:1.75rem;height:1.75rem;margin-top:0.05rem;border-radius:50%;background:var(--green);color:var(--ink)}
.checks .ok svg{width:1rem;height:1rem}

/* header, as on the home: logo, a few links, one action */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0.85rem var(--margin);background:var(--white);border-bottom:2px solid var(--ink)}
.wordmark{display:flex;align-items:center;gap:0.6rem;text-decoration:none;font-weight:800;font-size:var(--step-lead);letter-spacing:0.01em;color:var(--deep)}
.wordmark img{width:44px;height:44px;flex:none}
.top-right{display:flex;align-items:center;gap:1.25rem}
.nav{font-size:0.9375rem;font-weight:600;text-decoration:none;text-underline-offset:0.25em}
.nav[aria-current="page"]{text-decoration:underline;text-decoration-thickness:2px}
@media (hover:hover) and (pointer:fine){.nav:hover{text-decoration:underline}}
.top .btn{min-height:2.5rem;padding:0 1.15rem;font-size:0.9375rem;border:0}
.top .btn::after{content:none}
@media (max-width:640px){.wordmark span{display:none}.top-right{gap:0.9rem}.nav.opt{display:none}}

/* a green chapter with wavy top and bottom edges, as the reference draws them */
.wavy{position:relative;background:var(--green)}
.wavy::before,.wavy::after{content:"";position:absolute;left:0;right:0;z-index:1;height:clamp(22px,3.2vw,46px);background:var(--green);pointer-events:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V22C60 22 60 4 120 4S180 22 240 22 300 4 360 4 420 22 480 22V40Z'/%3E%3C/svg%3E") 0 0/clamp(260px,34vw,520px) 100% repeat-x;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V22C60 22 60 4 120 4S180 22 240 22 300 4 360 4 420 22 480 22V40Z'/%3E%3C/svg%3E") 0 0/clamp(260px,34vw,520px) 100% repeat-x}
.wavy::before{top:1px;transform:translateY(-100%)}
.wavy::after{bottom:1px;transform:translateY(100%) scale(-1,-1)}

/* footer, as on the home */
.foot{background:var(--green);color:var(--ink);display:flex;flex-direction:column;gap:2.5rem;padding:clamp(3rem,6vw,4.5rem) var(--margin) 28px}
.foot-notes{display:grid;grid-template-columns:repeat(3,minmax(0,16rem));gap:2rem;font-size:var(--step-body)}
.foot-notes b{font-weight:700}
.foot-mail{font-weight:800;font-size:clamp(2.2rem,5.4vw,6rem);line-height:1;letter-spacing:-0.03em;overflow-wrap:anywhere;text-decoration:none;color:var(--deep)}
.foot-mail span{display:block}
.foot-meta{display:flex;justify-content:space-between;gap:1rem;font-size:var(--step-small);flex-wrap:wrap}
.foot-meta a{margin-right:1rem}
@media (max-width:760px){.foot-notes{grid-template-columns:1fr;gap:1rem}.foot-mail{font-size:7.4vw}.foot-meta{flex-direction:column}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

/* motion: each block settles into place as it enters; it is never hidden, so a page without script reads complete */
@media (prefers-reduced-motion:no-preference){
  .js [data-reveal]{translate:0 28px;transition:translate 900ms var(--ease-out);transition-delay:calc(var(--i,0)*80ms)}
  .js [data-reveal].is-in{translate:none}
  .card.post,.card.way,.stop,.area{transition:transform 220ms var(--ease-out)}
  @media (hover:hover) and (pointer:fine){.card.way:hover,.stop:hover,.area:hover{transform:translateY(-4px)}}
}