/* ===========================================================================
   components.css — Raíces y Alas · Dirección C "Alegre didáctico"
   Sistema de componentes token-driven, MOBILE-FIRST.
   Base = móvil; los breakpoints min-width escalan hacia arriba.
   Cero hex crudo: todo vía var(--…). Importar tras design-tokens.css.
   =========================================================================== */

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--font-body),system-ui,sans-serif;
  line-height:1.62;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ---- Tipografía (fluida = mobile-first natural) ------------------------- */
.display{font-family:var(--font-display),system-ui,sans-serif;font-weight:700;line-height:1.05;letter-spacing:-.005em}
h1,h2,h3,h4{font-family:var(--font-display),system-ui,sans-serif;font-weight:700;line-height:1.1;color:var(--ink)}
h1{font-size:clamp(30px,7vw,58px)}
h2{font-size:clamp(24px,5.2vw,40px)}
h3{font-size:clamp(19px,3.6vw,22px)}
p{color:var(--ink-soft)}
.lead{font-size:clamp(16px,2.4vw,19px);color:var(--ink-soft)}
.mono{font-family:var(--font-mono),ui-monospace,monospace}
.eyebrow{font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-teal-deep)}
.eyebrow.accent{color:var(--accent-deep)}
.eyebrow.green{color:var(--brand-green-deep)}
.muted{color:var(--ink-soft)} .faint{color:var(--ink-faint)}

/* ---- Layout (base: 1 columna) ------------------------------------------ */
.container{width:100%;max-width:1120px;margin:0 auto;padding:0 18px}
.container-narrow{width:100%;max-width:760px;margin:0 auto;padding:0 18px}
.section{padding:44px 0}
.section-sm{padding:32px 0}
.section-head{max-width:640px;margin-bottom:26px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head h2{margin:10px 0 8px}
.grid{display:grid;gap:18px}
.row-2,.row-3,.row-4{display:grid;gap:16px;grid-template-columns:1fr}

/* ---- Botones (tap targets ≥44px) --------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;
  font-family:var(--font-body),sans-serif;font-weight:800;font-size:15px;padding:12px 24px;
  border-radius:var(--radius-pill);border:2px solid transparent;cursor:pointer;
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--accent);color:var(--on-accent);box-shadow:0 10px 22px -10px var(--accent)}
.btn-primary:hover{background:var(--accent-deep)}
.btn-ghost{background:var(--bg-elev);color:var(--brand-teal-deep);border-color:var(--brand-teal)}
.btn-ghost:hover{background:var(--brand-teal-soft)}
.btn-green{background:var(--brand-green);color:var(--ink-on-green)}
.btn-green:hover{filter:brightness(.96)}
.btn-lg{min-height:52px;padding:15px 30px;font-size:16px}
.btn-sm{min-height:42px;padding:9px 18px;font-size:13.5px}
.btn-block{width:100%}
.btn svg{width:18px;height:18px}

/* ---- Chips / badges ----------------------------------------------------- */
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:var(--radius-pill);
  font-weight:800;font-size:12px;letter-spacing:.02em}
.chip-green{background:var(--brand-green-soft);color:var(--brand-green-deep)}
.chip-teal{background:var(--brand-teal-soft);color:var(--brand-teal-deep)}
.chip-yellow{background:var(--brand-yellow-soft);color:var(--brand-yellow-deep)}
.chip-accent{background:var(--accent-soft);color:var(--accent-deep)}
.chip-outline{background:transparent;border:1.5px solid var(--line-strong);color:var(--ink-soft)}
.chip-dark{background:transparent;border:1.5px solid var(--footer-line);color:var(--footer-ink)}
.footer-back{color:var(--footer-ink-soft);font-weight:700}
.footer-back:hover{color:var(--on-accent)}

/* ---- Header público ----------------------------------------------------- */
.nav-toggle-cb{position:absolute;opacity:0;pointer-events:none}
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg-elev) 92%,transparent);
  backdrop-filter:saturate(1.2) blur(8px);border-bottom:1.5px solid var(--line)}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;height:64px;gap:12px}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.brand img{height:38px;width:auto}
.nav{display:none;align-items:center;gap:26px}
.nav a{font-weight:700;font-size:15px;color:var(--ink-soft);position:relative;padding:6px 0;min-height:24px}
.nav a:hover{color:var(--ink)} .nav a.active{color:var(--ink)}
.nav a.active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;border-radius:3px;background:var(--brand-green)}
.header-actions{display:flex;align-items:center;gap:10px}
.cart-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:var(--radius-pill);border:1.5px solid var(--line);background:var(--bg-elev);color:var(--ink);flex-shrink:0}
.cart-btn:hover{border-color:var(--brand-teal)}
.cart-btn svg{width:20px;height:20px}
.cart-count{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;border-radius:var(--radius-pill);
  background:var(--accent);color:var(--on-accent);font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center}
.menu-toggle{display:inline-flex;width:44px;height:44px;border:1.5px solid var(--line);border-radius:12px;
  background:var(--bg-elev);align-items:center;justify-content:center;color:var(--ink);cursor:pointer;flex-shrink:0}
.menu-toggle svg{width:22px;height:22px}
.header-cta{display:none}
/* Menú móvil desplegable (CSS-only vía checkbox) */
.nav-toggle-cb:checked ~ .site-header .nav{
  display:flex;flex-direction:column;align-items:flex-start;position:absolute;top:100%;left:0;right:0;
  background:var(--bg-elev);border-bottom:1.5px solid var(--line);padding:14px 18px 20px;gap:6px;box-shadow:var(--shadow-sm)}
.nav-toggle-cb:checked ~ .site-header .nav a{width:100%;padding:12px 4px;font-size:16px;border-bottom:1px solid var(--line)}
.nav-toggle-cb:checked ~ .site-header .nav a.active::after{display:none}

/* ---- Footer ------------------------------------------------------------- */
.site-footer{background:var(--ink);color:var(--footer-ink);padding:44px 0 24px;margin-top:20px}
.site-footer h4{color:var(--on-accent);font-size:15px;margin-bottom:14px}
.footer-grid{display:grid;grid-template-columns:1fr;gap:30px}
.footer-brand p{color:var(--footer-ink);font-size:14.5px;margin-top:14px;max-width:34ch}
.footer-links{display:flex;flex-direction:column;gap:12px}
.footer-links a{color:var(--footer-ink);font-size:15px;min-height:24px}
.footer-links a:hover{color:var(--on-accent)}
.footer-news p{color:var(--footer-ink-soft);font-size:14px;margin-bottom:12px}
.footer-news input{width:100%;padding:13px 14px;border-radius:12px;border:1.5px solid var(--footer-line);background:var(--footer-field);color:var(--on-accent);font-family:inherit;font-size:15px;margin-bottom:10px}
.footer-news input::placeholder{color:var(--footer-placeholder)}
.social{display:flex;gap:10px;margin-top:16px}
.social a{width:42px;height:42px;border-radius:var(--radius-pill);border:1.5px solid var(--footer-line);display:flex;align-items:center;justify-content:center;color:var(--footer-ink)}
.social a:hover{background:var(--brand-green);color:var(--ink-on-green);border-color:transparent}
.social svg{width:17px;height:17px}
.footer-bottom{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-top:32px;padding-top:20px;border-top:1px solid var(--footer-line);color:var(--footer-ink-soft);font-size:13px}
.footer-bottom .badges{display:flex;gap:12px;align-items:center;flex-wrap:wrap;color:var(--footer-ink-soft)}

/* ---- Cards -------------------------------------------------------------- */
.card{background:var(--bg-elev);border:1.5px solid var(--line);border-radius:var(--radius-lg);padding:22px}
.card-hover{transition:transform .14s ease,box-shadow .14s ease}
.card-hover:hover{transform:translateY(-3px);box-shadow:var(--shadow)}

.feature{border-radius:var(--radius-lg);padding:24px;color:var(--on-accent);position:relative;overflow:hidden;min-height:140px}
.feature h3{color:var(--on-accent);margin:14px 0 6px;font-size:21px}
.feature p{color:rgba(255,255,255,.92);font-size:14.5px}
.feature .ic{width:46px;height:46px;border-radius:14px;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center}
.feature .ic svg{width:24px;height:24px;color:var(--on-accent)}
.feature.green{background:var(--brand-green)} .feature.green h3{color:var(--ink-on-green)} .feature.green p{color:var(--ink-on-green)}
.feature.green .ic{background:rgba(40,64,15,.15)} .feature.green .ic svg{color:var(--ink-on-green)}
.feature.teal{background:var(--brand-teal)}
.feature.orange{background:var(--accent)}
.feature.yellow{background:var(--brand-yellow)} .feature.yellow h3{color:var(--ink-on-yellow)} .feature.yellow p{color:var(--ink-on-yellow)}
.feature.yellow .ic{background:rgba(90,70,0,.14)} .feature.yellow .ic svg{color:var(--ink-on-yellow)}

.product{background:var(--bg-elev);border:1.5px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column}
.product .cover{aspect-ratio:3/4;position:relative;display:flex;align-items:flex-end;padding:16px;background:linear-gradient(155deg,var(--brand-green),var(--brand-teal))}
.product .cover .cover-title{font-family:var(--font-display),sans-serif;color:var(--on-accent);font-weight:700;font-size:17px;line-height:1.1}
.product .cover::before{content:"";position:absolute;left:14px;top:14px;bottom:14px;width:5px;background:rgba(255,255,255,.28);border-radius:3px}
.product .pbody{padding:18px;display:flex;flex-direction:column;gap:8px;flex:1}
.product .ptitle{font-family:var(--font-display),sans-serif;font-weight:600;font-size:18px;color:var(--ink)}
.product .price{font-family:var(--font-display),sans-serif;font-weight:700;font-size:23px;color:var(--accent-deep)}
.product .price small{font-weight:600;font-size:14px;color:var(--ink-faint);text-decoration:line-through;margin-left:8px}
.stars{display:inline-flex;gap:2px;color:var(--brand-yellow-deep)}
.stars svg{width:15px;height:15px;fill:var(--brand-yellow);stroke:none}

/* lista de características con check (compartida) */
.book-feats{display:flex;flex-direction:column;gap:9px;margin:14px 0 20px;list-style:none}
.book-feats li{display:flex;align-items:center;gap:10px;color:var(--ink-soft);font-size:15px;list-style:none}
.book-feats svg{width:19px;height:19px;color:var(--brand-green-deep);flex-shrink:0}

.blog-card{background:var(--bg-elev);border:1.5px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column}
.blog-card .thumb-link{display:block}
.blog-card .thumb-wrap{position:relative;display:block;width:100%;aspect-ratio:16/10;overflow:hidden;background-size:cover;background-position:center;background-color:var(--bg-sunk)}
.blog-card .thumb-wrap::before{content:"";position:absolute;inset:0;background-image:inherit;background-size:cover;background-position:center;filter:blur(22px);transform:scale(1.18);opacity:.6}
.blog-card .thumb-wrap::after{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--bg) 30%,transparent)}
.blog-card .thumb{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;display:block}
.blog-card .bbody{padding:18px;display:flex;flex-direction:column;gap:8px;flex:1}
.blog-card h3{font-size:20px;font-weight:600}
.blog-card .meta{font-size:13px;color:var(--ink-faint);font-weight:700}
.readmore{color:var(--brand-teal-deep);font-weight:800;font-size:14px;display:inline-flex;align-items:center;gap:6px;margin-top:auto;min-height:24px}
.readmore svg{width:15px;height:15px}

/* ---- Breadcrumb --------------------------------------------------------- */
.breadcrumb{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--ink-faint);padding:14px 0;flex-wrap:wrap}
.breadcrumb a{color:var(--ink-soft)}
.breadcrumb a:hover{color:var(--brand-teal-deep)}
.breadcrumb svg{width:14px;height:14px;color:var(--line-strong)}
.breadcrumb .current{color:var(--ink)}

/* ---- Forms -------------------------------------------------------------- */
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.field label{font-weight:800;font-size:13.5px;color:var(--ink)}
.input,.textarea,.select{width:100%;padding:13px 15px;border-radius:14px;border:1.5px solid var(--line-strong);
  background:var(--bg-elev);color:var(--ink);font-family:inherit;font-size:16px;min-height:48px}
.input:focus,.textarea:focus,.select:focus{outline:none;border-color:var(--brand-teal);box-shadow:0 0 0 4px var(--brand-teal-soft)}
.textarea{min-height:130px;resize:vertical}

/* ---- Decoraciones ------------------------------------------------------- */
.dot{position:absolute;border-radius:50%}
.blob{position:absolute;border-radius:46% 54% 58% 42%/48% 42% 58% 52%;filter:blur(1px)}

/* ---- Utilidades --------------------------------------------------------- */
.tag-badge{position:fixed;top:12px;right:12px;background:var(--ink);color:var(--on-accent);padding:7px 14px;border-radius:var(--radius-pill);font-weight:800;font-size:12px;z-index:60;box-shadow:var(--shadow-sm)}
.divider{height:1.5px;background:var(--line);border:0;margin:0}
.stack-sm{display:flex;flex-direction:column;gap:8px}
.flex{display:flex} .items-center{align-items:center} .justify-between{justify-content:space-between}
.gap-8{gap:8px} .gap-12{gap:12px} .gap-16{gap:16px} .gap-24{gap:24px}
.wrap{flex-wrap:wrap}
.mt-8{margin-top:8px} .mt-16{margin-top:16px} .mt-24{margin-top:24px} .mt-32{margin-top:32px}
.text-center{text-align:center}
.hide-mobile{display:none}

/* =========================================================================
   BREAKPOINTS (min-width, mobile-first)
   ========================================================================= */
@media(min-width:560px){
  .container,.container-narrow{padding:0 24px}
  .row-2{grid-template-columns:1fr 1fr}
  .row-4{grid-template-columns:1fr 1fr}
  .footer-bottom{flex-direction:row;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
}
@media(min-width:720px){
  .section{padding:60px 0}
  .row-3{grid-template-columns:repeat(3,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .hide-mobile{display:revert}
}
@media(min-width:900px){
  .site-header .bar{height:74px}
  .brand img{height:46px}
  .nav{display:flex}
  .menu-toggle{display:none}
  .header-cta{display:inline-flex}
  .section{padding:72px 0}
  .section-sm{padding:48px 0}
  .row-4{grid-template-columns:repeat(4,1fr)}
  .footer-grid{grid-template-columns:1.6fr 1fr 1fr 1.4fr}
}

/* Portada real de producto en tarjeta de tienda: completa, sin degradado */
.product .cover.has-image{background:var(--bg-sunk);padding:6px}
.product .cover.has-image::before{display:none}

/* Crédito de desarrollo en el footer */
.footer-credit{color:var(--footer-ink-soft);font-size:13px}
.footer-credit a{color:var(--footer-ink);font-weight:700}
.footer-credit a:hover{color:var(--on-accent)}