/* Cuentos para Imaginar — estilos (sin fuentes externas) */
:root{
  /* Papel */
  --bg:#FFF6E5; --bg-2:#FBF1DC; --card:#FFFBF3; --line:#EADFC8;
  /* Tinta */
  --ink:#26221D; --muted:#5E574D;
  /* Bosque */
  --green:#2F6B3F; --green-dark:#245732; --green-deep:#1F5130; --green-mid:#2E7D4F; --leaf:#5FA55A; --green-soft:#E3F1DD;
  /* Terracota */
  --terra:#C8553D; --terra-2:#D9694B; --terra-dark:#A94530; --terra-ink:#9E3B26; --peach-soft:#FDE6DA; --peach:#F3B9A0;
  /* Otros tintes */
  --sun-soft:#FCF1C8; --sun:#E9B949; --teal-soft:#DDF0EC; --teal:#3E8C7E;
  /* Noche (solo Navidad) */
  --night:#1D2B53; --night-2:#2A3B6E; --star:#F6C945;
  --accent:var(--green); --radius:24px;
  --font:"Nunito","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-title:Georgia,"Iowan Old Style","Palatino Linotype","Book Antiqua",serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:1.0625rem;line-height:1.7}
img,svg{max-width:100%;display:block}
a{color:var(--green);text-underline-offset:3px;text-decoration-thickness:2px;text-decoration-color:var(--terra-2)}
a:hover{color:var(--terra-dark)}
:focus-visible{outline:3px solid var(--terra);outline-offset:3px;border-radius:8px}
strong{color:var(--ink)}
.skip{position:absolute;left:-999px;top:0;background:var(--green);color:#fff;padding:.6rem 1rem;border-radius:0 0 12px 0;z-index:10}
.skip:focus{left:0;color:#fff}
.wrap{width:100%;max-width:980px;margin:0 auto;padding:0 1.25rem}

/* Cabecera */
.site-header{background:linear-gradient(180deg,#FDE9C8 0%,var(--bg) 70%);text-align:center;padding:2.25rem 0 1.5rem}
.brand-kicker{margin:0;font-size:.9rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--terra-ink)}
.site-header h1,main > h1{font-family:var(--font-title);font-weight:700;font-size:clamp(2.1rem,8.6vw,3.9rem);line-height:1.12;margin:.4rem auto 1.4rem;max-width:16ch;text-wrap:balance;color:var(--green);letter-spacing:-.01em}
nav.toc{margin-top:1.5rem}
nav.toc ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.55rem;justify-content:center}
nav.toc a{display:inline-block;padding:.5rem 1rem;background:var(--card);border:2px solid var(--green);border-radius:999px;text-decoration:none;font-size:.95rem;font-weight:700;color:var(--green);transition:background-color .15s,color .15s,transform .15s,border-color .15s}
nav.toc a:hover{background:var(--green);color:#fff;transform:translateY(-1px)}
nav.toc li:nth-child(2) a{border-color:var(--terra)}
nav.toc li:nth-child(2) a:hover{background:var(--terra-dark);border-color:var(--terra-dark);color:#fff}

/* Ilustraciones: marcos redondeados */
.frame{display:block;padding:6px;background:var(--card);border:2px solid var(--peach);border-radius:24px;box-shadow:0 8px 0 -3px var(--terra-2),0 16px 30px rgba(31,81,48,.16);overflow:hidden}
.frame img{width:100%;height:auto;border-radius:18px;transition:transform .5s ease}
.frame:hover img{transform:scale(1.025)}
.frame-green{border-color:#C9E2BF;box-shadow:0 8px 0 -3px var(--leaf),0 16px 30px rgba(31,81,48,.14)}
.hero{width:100%;max-width:1220px;margin:0 auto;padding:0 1.25rem}
.hero-frame img{aspect-ratio:4/3;object-fit:cover;object-position:68% 40%}
.hero-cta{margin:1.6rem 0 0}
.btn{display:inline-block;padding:.85rem 1.6rem;border-radius:999px;background:var(--terra-dark);color:#fff;font-weight:800;font-size:1.08rem;text-decoration:none;box-shadow:0 4px 0 #7E3322;transition:background-color .15s,transform .15s,box-shadow .15s}
.btn:hover{background:var(--green);color:#fff;transform:translateY(-2px);box-shadow:0 6px 0 var(--green-deep)}
.btn::after{content:" ↓";font-weight:700}
.lead{font-size:1.12rem;line-height:1.75;max-width:44rem}
.intro .frame{margin-top:1.4rem}
.book-frame{max-width:340px;margin:0 auto;width:100%}

/* Secciones */
main section{margin:2rem 0;scroll-margin-top:1rem}
.card{position:relative;transition:box-shadow .2s,transform .2s;background:var(--card);border-radius:var(--radius);padding:1.6rem 1.35rem;border:1px solid var(--line);border-top:7px solid var(--green);box-shadow:0 3px 0 rgba(234,223,200,.9),0 12px 28px rgba(38,34,29,.06)}
#ardi.card,#contacto.card{border-top-color:var(--terra)}
h2{font-family:var(--font-title);font-weight:700;font-size:clamp(1.55rem,5.8vw,2.1rem);line-height:1.2;margin:0 0 .8rem;color:var(--green)}
main p{margin:0 0 .9rem}
.card:hover{box-shadow:0 3px 0 rgba(234,223,200,.9),0 16px 34px rgba(38,34,29,.10)}
.meta{color:var(--muted);font-size:.95rem;font-weight:600}
.badge{display:inline-block;background:var(--peach-soft);color:var(--terra-ink);border:1.5px solid var(--peach);border-radius:999px;padding:.25rem .85rem;font-size:.85rem;font-weight:800;letter-spacing:.03em;margin-bottom:.8rem}
.book{display:grid;gap:1.4rem}
.buttons{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.1rem}
.buttons:not(:has(*)){display:none}

/* Navidad para imaginar: tarjeta de cielo nocturno (solo aquí) */
#navidad.card{
  color:#FFF6E5;border:0;border-top:7px solid var(--star);overflow:hidden;
  background-color:var(--night);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 110'%3E%3Cpath d='M118 14A24 24 0 1 0 136 52A20 20 0 1 1 118 14Z' fill='%23F6C945'/%3E%3Cpath d='M62 22l2 5 5 .5-4 3 1.3 5-4.3-2.8-4.3 2.8 1.3-5-4-3 5-.5z' fill='%23F6C945'/%3E%3Cpath d='M138 78l1.4 3.4 3.6.3-2.8 2.2.9 3.5-3.1-2-3.1 2 .9-3.5-2.8-2.2 3.6-.3z' fill='%23F6C945'/%3E%3Ccircle cx='86' cy='70' r='1.8' fill='%23F6C945'/%3E%3Ccircle cx='40' cy='50' r='1.4' fill='%23FFF6E5'/%3E%3Ccircle cx='96' cy='12' r='1.3' fill='%23FFF6E5'/%3E%3C/svg%3E"),
    radial-gradient(circle at 6% 94%,rgba(255,246,229,.9) 0 1.5px,transparent 2.5px),
    radial-gradient(circle at 52% 95%,rgba(246,201,69,.9) 0 1.5px,transparent 2.5px),
    radial-gradient(circle at 94% 90%,rgba(255,246,229,.8) 0 1.2px,transparent 2px),
    linear-gradient(180deg,var(--night) 0%,var(--night-2) 100%);
  background-repeat:no-repeat;
  background-position:right -6px top 4px,0 0,0 0,0 0,0 0;
  background-size:170px auto,100% 100%,100% 100%,100% 100%,100% 100%;
}
#navidad h2{color:#FFF6E5;padding-right:5.5rem}
#navidad p{color:#E9DFC9}
#navidad .badge{background:var(--star);color:var(--night);border-color:var(--star)}
#navidad a{color:var(--star)}

.contact{text-align:center}
.contact a{font-weight:800;font-size:1.1rem}

/* Pie */
.site-footer{margin-top:3rem;padding:2rem 0 2.5rem;background:var(--bg-2);border-top:4px solid var(--green);color:var(--muted);font-size:.9rem;text-align:center}
.site-footer p{margin:.4rem 0}
.site-footer strong{color:var(--green)}

/* Escritorio */
@media (min-width:600px){
  .hero-frame img{aspect-ratio:auto;object-fit:fill}
}
@media (min-width:760px){
  body{font-size:1.1rem}
  .site-header{padding-top:3.25rem}
  .card{padding:2.1rem 2.4rem}
  main section{margin:2.75rem 0}
  .book{grid-template-columns:300px 1fr;align-items:center;gap:2.5rem}
  .book-frame{margin:0;transform:rotate(-1.2deg)}
  .site-header h1{max-width:22ch}
  .hero-frame{border-radius:32px}
  .hero-frame img{border-radius:26px}
  .hero-cta{margin-top:2rem}
  .lead{font-size:1.22rem}
  .two-col{display:grid;grid-template-columns:1fr 1fr;gap:1.75rem;margin:2.75rem 0}
  .two-col section{margin:0}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}nav.toc a:hover,.btn:hover,.frame:hover img{transform:none}}

.subtitle{margin:.25rem 0 0;font-size:.95rem;letter-spacing:.04em;color:#5E574D;text-align:center}
html{scroll-behavior:smooth}
#los-cuentos{scroll-margin-top:1rem}