/* behavioraldesignmodels.com: misma familia visual que thebehavioralstartup.com y nachoparietti.com */
:root {
  --paper: #F6F4EF; --white: #FFFFFF; --deep: #EEEBE4;
  --ink: #161412; --ink-soft: #3B3631; --mute: #6E665B;
  --coral: #E4403F; --coral-deep: #B92E2F; --hl: #F2968C;
  --line: rgba(22, 20, 18, 0.1);
  --sans: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --serif: Lora, Georgia, 'Times New Roman', serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; -webkit-text-size-adjust: 100%; }
body { background: var(--white); color: var(--ink); font-family: var(--serif); line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.wrap { max-width: 72rem; margin: 0 auto; padding: 0 1.25rem; }
.wrap.narrow { max-width: 46rem; }
@media (min-width: 640px) { .wrap { padding: 0 2rem; } }
mark { background: linear-gradient(transparent 48%, var(--hl) 48%, var(--hl) 90%, transparent 90%); color: inherit; padding: 0 0.1em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.dark mark { background: linear-gradient(transparent 68%, var(--coral) 68%, var(--coral) 90%, transparent 90%); }

nav.top { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top, 0px); }
nav.top .wrap { height: 4rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: flex; align-items: center; gap: 0.55rem; font-weight: 600; font-size: 1.05rem; text-decoration: none; white-space: nowrap; }
.bmark { width: 1.9rem; }
@media (max-width: 420px) { .brand { font-size: 0.92rem; } }
.links { display: flex; align-items: center; gap: 0.25rem; font-family: var(--sans); font-size: 0.92rem; }
.links a.l { text-decoration: none; padding: 0.5rem 0.75rem; border-radius: 999px; display: none; }
.links a.l:hover { background: rgba(22,20,18,0.05); }
@media (min-width: 900px) { .links a.l { display: inline-block; } }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; font-family: var(--sans); font-weight: 600; font-size: 0.95rem; border-radius: 999px; padding: 0.8rem 1.5rem; text-decoration: none; transition: background 0.2s, color 0.2s; cursor: pointer; border: 0; }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: var(--coral-deep); }
.btn-coral { background: var(--coral); color: #fff; }
.btn-coral:hover { background: var(--coral-deep); }
.btn-line { border: 1px solid rgba(22,20,18,0.6); color: var(--ink); }
.btn-line:hover { background: var(--ink); color: #fff; }
.btn-lang { border: 1px solid rgba(22,20,18,0.2); color: var(--ink-soft); padding: 0.45rem 0.8rem; font-size: 0.75rem; letter-spacing: 0.08em; }
nav .btn-ink { padding: 0.5rem 1rem; font-size: 0.85rem; white-space: nowrap; }
@media (max-width: 480px) {
  nav.top .wrap { gap: 0.5rem; }
  .brand { gap: 0.4rem; font-size: 0.86rem; }
  .bmark { width: 1.5rem; }
  nav .btn-ink { padding: 0.45rem 0.7rem; font-size: 0.78rem; }
  .btn-lang { padding: 0.4rem 0.55rem; }
}
@media (max-width: 380px) { .bmark { display: none; } .brand { font-size: 0.82rem; } }

.watch { display: inline-block; }
.watch img { width: 100%; transition: transform 0.15s ease-out; }
.blink { animation: blink 7s infinite; }
@keyframes blink { 0%, 96%, 100% { transform: scaleY(1); } 98% { transform: scaleY(0.12); } }
@media (prefers-reduced-motion: reduce) { .blink { animation: none; } }

/* hero con cardumen */
.hero { position: relative; overflow: hidden; min-height: calc(100svh - 4rem); display: flex; align-items: center; justify-content: center; padding: 5rem 1.25rem 4rem; background: var(--white); }
.hero-in { position: relative; z-index: 1; max-width: 40rem; text-align: center; }
.hero .who { font-family: var(--sans); color: var(--mute); font-size: 0.95rem; margin-bottom: 1.25rem; }
h1 { font-size: clamp(2.8rem, min(9vw, 11svh), 6.2rem); line-height: 1.02; letter-spacing: -0.02em; font-weight: 700; margin-bottom: 1.5rem; }
.hero .sub { font-size: clamp(1.1rem, 2vw, 1.3rem); color: var(--ink-soft); margin: 0 auto 2rem; max-width: 32rem; }
.ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }
.hint { position: absolute; bottom: 1.25rem; left: 50%; transform: translateX(-50%); z-index: 1; font-family: var(--sans); font-size: 0.8rem; color: var(--mute); white-space: nowrap; }
.h-touch { display: none; }
@media (hover: none) { .h-mouse { display: none; } .h-touch { display: inline; } }

section.block { padding: 5rem 0; }
@media (min-width: 900px) { section.block { padding: 7rem 0; } }
section.paper { background: var(--paper); }
section.dark { background: var(--ink); color: #fff; }
.head { max-width: 46rem; margin-bottom: 3rem; }
.head .watch, .sample .watch { width: 3.2rem; margin-bottom: 1rem; }
h2 { font-size: clamp(2rem, 4.4vw, 3.2rem); line-height: 1.08; letter-spacing: -0.015em; font-weight: 600; margin-bottom: 1.1rem; }
h3 { font-size: 1.35rem; line-height: 1.25; font-weight: 600; margin-bottom: 0.5rem; }
p { color: var(--ink-soft); font-size: 1.08rem; }
.dark p { color: rgba(255,255,255,0.75); }
.lead { font-size: 1.18rem; }
.note { margin-top: 1.5rem; font-family: var(--sans); font-size: 0.95rem; color: var(--mute); }
.dark .note { color: rgba(255,255,255,0.55); }

/* los dos libros */
.books { display: grid; gap: 1.5rem; }
@media (min-width: 980px) { .books { grid-template-columns: 1fr 1fr; } }
.bk { display: grid; gap: 1.75rem; grid-template-columns: 1fr; border: 1px solid var(--line); border-radius: 2rem; padding: 2rem; box-shadow: 0 12px 30px -22px rgba(22,20,18,0.35); }
@media (min-width: 560px) { .bk { grid-template-columns: 10rem 1fr; } }
.bk .cover { width: 10rem; height: auto; align-self: start; border-radius: 3px; box-shadow: 0 2px 3px rgba(22,20,18,.12), 0 18px 40px -14px rgba(22,20,18,.45); transform: rotate(-2deg); }
.bk .cover.blank { aspect-ratio: 2 / 3; background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem; padding: 1rem 0.8rem; text-align: center; transform: rotate(2deg); }
.bk .cover.blank .bt { font-weight: 700; font-size: 1.05rem; line-height: 1.1; }
.bk .cover.blank .watch { width: 1.8rem; }
.bk .cover.blank .bs { font-family: var(--sans); font-size: 0.55rem; line-height: 1.35; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.04em; }
.bk .cover.blank .bw { font-family: var(--sans); font-size: 0.6rem; color: var(--mute); margin-top: 0.4rem; }
.bk .tag { font-family: var(--sans); font-size: 0.8rem; border: 1px solid var(--line); border-radius: 999px; padding: 0.2rem 0.75rem; color: var(--ink-soft); display: inline-block; margin-bottom: 0.9rem; }
.bk .verb { font-size: 1.5rem; font-weight: 600; color: var(--coral-deep); margin: -0.2rem 0 0.6rem; font-style: italic; }
.bk p { margin-bottom: 1rem; font-size: 1.02rem; }
.bk .facts { font-family: var(--sans); font-size: 0.88rem; color: var(--mute); }
.bk .alt { display: block; margin-top: 0.9rem; font-family: var(--sans); font-size: 0.85rem; color: var(--mute); }

/* las cuatro preguntas */
.qs { display: grid; gap: 1rem; }
@media (min-width: 700px) { .qs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .qs { grid-template-columns: repeat(4, 1fr); } }
.q { background: var(--white); border: 1px solid var(--line); border-radius: 1.5rem; padding: 1.5rem; }
.q .qq { display: block; font-size: 1.5rem; font-weight: 700; line-height: 1.15; margin-bottom: 0.4rem; }
.q .qp { display: block; font-family: var(--sans); font-size: 0.8rem; font-weight: 700; color: var(--coral-deep); margin-bottom: 0.8rem; }
.q ul { list-style: none; font-family: var(--sans); font-size: 0.92rem; color: var(--ink-soft); }
.q li { padding: 0.3rem 0; border-top: 1px solid var(--line); }

/* mapa del Handbook */
.map { display: grid; gap: 2.25rem; }
.part .pn { font-family: var(--sans); font-size: 0.85rem; font-weight: 700; color: var(--coral-deep); margin-bottom: 0.5rem; }
.ch { border-top: 1px solid var(--line); }
.ch:last-child { border-bottom: 1px solid var(--line); }
.ch summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 2.6rem 1fr auto; gap: 0.2rem 0.75rem; align-items: baseline; padding: 1rem 0; }
.ch summary::-webkit-details-marker { display: none; }
.ch .num { font-family: var(--sans); font-weight: 700; font-size: 0.85rem; color: var(--mute); }
.ch .cn { font-size: 1.3rem; font-weight: 600; }
.ch .cq { grid-column: 2 / 4; color: var(--ink-soft); font-style: italic; }
.ch .free { font-family: var(--sans); font-size: 0.75rem; font-weight: 700; background: var(--coral); color: #fff; border-radius: 999px; padding: 0.15rem 0.6rem; text-decoration: none; }
.chips { display: flex; flex-wrap: wrap; gap: 0.45rem; padding: 0 0 1.25rem 3.35rem; }
.chips span { font-family: var(--sans); font-size: 0.85rem; background: var(--paper); border-radius: 999px; padding: 0.3rem 0.8rem; color: var(--ink-soft); }
@media (max-width: 560px) { .chips { padding-left: 0; } }

/* capítulo gratis */
.sample-in { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 900px) { .sample-in { grid-template-columns: 1.3fr 1fr; } }
.sample h2 { color: #fff; }
form.mail { margin-top: 1.75rem; display: grid; gap: 0.75rem; max-width: 32rem; }
@media (min-width: 560px) { form.mail { grid-template-columns: 1fr auto; } form.mail .small, form.mail .err, form.mail .ok { grid-column: 1 / 3; } }
form.mail input { font: inherit; font-family: var(--sans); font-size: 1rem; padding: 0.8rem 1.25rem; border-radius: 999px; border: 1px solid rgba(255,255,255,0.35); background: transparent; color: #fff; outline: none; min-width: 0; }
form.mail input:focus { border-color: var(--coral); }
form.mail input::placeholder { color: rgba(255,255,255,0.45); }
form.mail .small { font-family: var(--sans); font-size: 0.82rem; color: rgba(255,255,255,0.55); }
form.mail .err { font-family: var(--sans); font-size: 0.85rem; color: var(--hl); }
form.mail .ok { border: 1px solid rgba(255,255,255,0.25); border-radius: 1.25rem; padding: 1.25rem; }
form.mail .ok p { color: #fff; font-weight: 600; margin-bottom: 0.75rem; }
.pages { position: relative; height: 20rem; max-width: 18rem; margin: 0 auto; width: 100%; }
.pg { position: absolute; inset: 0; background: #fff; border-radius: 6px; box-shadow: 0 20px 40px -18px rgba(0,0,0,0.6); }
.pg.p3 { transform: rotate(7deg) translate(18px, 6px); opacity: 0.5; }
.pg.p2 { z-index: 2; transform: rotate(3deg) translate(8px, 2px); opacity: 0.75; }
.pg.p1 { z-index: 3; transform: rotate(-2deg); color: var(--ink); padding: 2rem 1.6rem; display: flex; flex-direction: column; gap: 0.5rem; }
.pg.p1 b { font-family: var(--sans); font-size: 0.8rem; color: var(--coral-deep); }
.pg.p1 { font-size: 1.9rem; font-weight: 700; line-height: 1.1; }
.pg.p1 i { font-size: 1rem; font-weight: 400; color: var(--ink-soft); }
.pg.p1::after { content: ''; margin-top: auto; height: 7rem; background: repeating-linear-gradient(transparent 0 0.9rem, var(--deep) 0.9rem 1.05rem); }

/* los 8 modelos */
.models { display: grid; gap: 1rem; }
@media (min-width: 640px) { .models { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .models { grid-template-columns: repeat(4, 1fr); } }
.model { display: flex; flex-direction: column; gap: 0.35rem; background: var(--white); border: 1px solid var(--line); border-radius: 1.5rem; padding: 1.25rem; text-decoration: none; transition: transform 0.2s, border-color 0.2s; }
.model:hover { transform: translateY(-3px); border-color: var(--ink); }
.model img { aspect-ratio: 4 / 3; object-fit: contain; background: var(--paper); border-radius: 0.9rem; margin-bottom: 0.6rem; }
.model .mn { font-family: var(--sans); font-size: 0.8rem; font-weight: 700; color: var(--coral-deep); }
.model strong { font-size: 1.15rem; line-height: 1.2; }
.model small { font-family: var(--sans); font-size: 0.85rem; color: var(--mute); line-height: 1.45; }

.author { border-top: 1px solid var(--line); padding: 2.5rem 0; }
.author .wrap { display: flex; align-items: center; gap: 1.25rem; }
.author img { width: 4.5rem; height: 4.5rem; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.author p { font-size: 1rem; }
.author a { text-decoration: underline; text-decoration-color: var(--coral); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* artículos y capítulo */
.art-head { background: var(--paper); border-bottom: 1px solid var(--line); padding: 4rem 0 3rem; }
.art-head .back { font-family: var(--sans); font-size: 0.85rem; color: var(--mute); text-decoration: none; display: inline-block; margin-bottom: 1.25rem; }
.art-head .chn { font-family: var(--sans); font-weight: 700; color: var(--coral-deep); font-size: 0.9rem; }
.art-head h1 { font-size: clamp(2.4rem, 6vw, 3.8rem); margin-bottom: 1rem; }
.art-head .sub { font-size: 1.2rem; }
.article { padding-top: 3rem; padding-bottom: 5rem; }
.article h1, .article h2 { font-size: clamp(1.6rem, 3.2vw, 2.1rem); margin: 2.75rem 0 1rem; }
.article h3 { font-size: 1.35rem; margin: 2.25rem 0 0.75rem; }
.article p, .article li { font-size: 1.1rem; line-height: 1.78; color: var(--ink-soft); }
.article p { margin-bottom: 1.2rem; }
.article ul, .article ol { margin: 0 0 1.4rem 1.3rem; }
.article li { margin-bottom: 0.45rem; }
.article strong { color: var(--ink); }
.article blockquote { border-left: 3px solid var(--coral); padding-left: 1.25rem; margin: 1.75rem 0; }
.article blockquote h3 { margin: 0; }
.article img { margin: 1.75rem auto; border-radius: 0.75rem; border: 1px solid var(--line); }
.howto { background: var(--paper); border-radius: 1.5rem; padding: 1.5rem 1.75rem; margin-bottom: 2.5rem; }
.howto h2 { font-size: 1.2rem !important; margin: 0 0 0.75rem !important; }
.howto li { font-size: 1rem !important; }
.book p:first-of-type::first-letter { font-size: 3.3em; float: left; line-height: 0.9; padding: 0.08em 0.1em 0 0; font-weight: 700; }
.grew { display: flex; gap: 1.5rem; align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: 1.75rem; padding: 1.75rem; margin-top: 3.5rem; }
.grew img { width: 6rem; border: 0; margin: 0; border-radius: 3px; transform: rotate(-3deg); box-shadow: 0 14px 30px -12px rgba(0,0,0,0.4); flex-shrink: 0; }
.grew h3 { margin-top: 0 !important; }
.grew p { font-size: 1rem !important; }
.grew .btn { margin: 0.35rem 0.35rem 0 0; }
@media (max-width: 560px) { .grew { flex-direction: column; align-items: flex-start; } }
nav.pn { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; font-family: var(--sans); font-size: 0.92rem; }
nav.pn a { text-decoration: none; color: var(--ink-soft); }
nav.pn a:hover { color: var(--coral-deep); }
.art-head .byline { font-family: var(--sans); font-size: 0.92rem; color: var(--mute); margin-top: 0.9rem; }
.art-head .byline a { color: var(--ink-soft); text-decoration-color: var(--coral); text-underline-offset: 3px; }
.article video { display: block; max-width: 100%; height: auto; margin: 1.75rem auto; border-radius: 0.75rem; border: 1px solid var(--line); }
.grew p a { text-decoration-color: var(--coral); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* páginas de contenido: definición citable, glosario, barreras */
.article .quote-block { background: var(--paper); border-left: 4px solid var(--coral); border-radius: 0 1.25rem 1.25rem 0; padding: 1.5rem 1.75rem; margin: 0 0 2.5rem; }
.article .quote-block p { font-size: 1.22rem; line-height: 1.6; color: var(--ink); margin: 0; }
.article .quote-block .qb-k { font-family: var(--sans); font-size: 0.78rem; font-weight: 700; color: var(--coral-deep); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 0.5rem; }
.article blockquote.rule p { font-size: 1.3rem; font-weight: 600; color: var(--ink); margin-bottom: 0.35rem; }
.article blockquote cite { font-family: var(--sans); font-style: normal; font-size: 0.9rem; color: var(--mute); }
.article h2[id], .article .term, .article .barrier { scroll-margin-top: 5rem; }
.article ol.four li { margin-bottom: 0.75rem; }
.article a { text-decoration-color: var(--coral); text-underline-offset: 3px; }
.article .chips { padding: 0.25rem 0 1rem; }
.article .chips a { font-family: var(--sans); font-size: 0.85rem; background: var(--paper); border-radius: 999px; padding: 0.3rem 0.8rem; color: var(--ink-soft); text-decoration: none; }
.article .chips a:hover { background: var(--deep); color: var(--ink); }
.article .lbl { font-family: var(--sans); font-size: 0.85rem; font-weight: 700; color: var(--coral-deep); margin: 1.25rem 0 0.4rem; }
.article ul.chq { list-style: none; margin-left: 0; }
.article ul.chq li { font-size: 1.02rem; border-top: 1px solid var(--line); padding: 0.45rem 0; margin: 0; }
.article .more { font-family: var(--sans); font-size: 0.98rem; color: var(--mute); margin-top: 2rem; }
.terms { margin-top: 1.5rem; }
.terms .term { border-top: 1px solid var(--line); padding: 1.4rem 0 0.4rem; }
.terms dt { font-size: 1.35rem; font-weight: 600; line-height: 1.25; margin-bottom: 0.45rem; }
.terms dt a { text-decoration: none; }
.terms dt a:hover { color: var(--coral-deep); }
.terms dd { margin: 0; }
.terms dd p { margin-bottom: 0.6rem; }
.article .terms .src { font-family: var(--sans); font-size: 0.85rem; color: var(--mute); line-height: 1.5; }

/* "para empezar" en la home */
.start { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem 0.6rem; margin-top: 1.75rem; font-family: var(--sans); font-size: 0.92rem; }
.start .sl { font-weight: 700; color: var(--coral-deep); margin-right: 0.3rem; }
.start a { text-decoration: none; border: 1px solid var(--line); background: var(--white); border-radius: 999px; padding: 0.45rem 0.95rem; color: var(--ink-soft); transition: border-color 0.2s, color 0.2s; }
.start a:hover { border-color: var(--ink); color: var(--ink); }

footer { background: var(--ink); color: rgba(255,255,255,0.55); padding: 2rem 0 calc(2rem + env(safe-area-inset-bottom, 0px)); font-family: var(--sans); font-size: 0.85rem; }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem 1.5rem; }
footer a { color: rgba(255,255,255,0.8); text-decoration: none; }
footer a:hover { color: #fff; }
footer .fl { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
footer .fstart { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; padding-bottom: 1rem; margin-bottom: 0.25rem; border-bottom: 1px solid rgba(255,255,255,0.12); }
footer .fstart span { color: rgba(255,255,255,0.55); font-weight: 700; }