/* Estilos propios de la web. Los tokens y componentes base vienen de bakalao.css */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
img { max-width: 100%; height: auto; }
a { color: var(--bk-teja); }

.top, main, .pie { width: min(960px, 100% - 32px); margin-inline: auto; }

.top { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--bk-tinta); font: 700 1.2rem var(--bk-font-display); }

.lang { display: flex; border: var(--bk-trazo); border-radius: 999px; overflow: hidden; box-shadow: var(--bk-sombra); }
.lang a { padding: .4em .9em; font: 600 .9rem var(--bk-font-display); text-decoration: none; color: var(--bk-tinta); background: var(--bk-crema); color: #3B2C27; }
.lang a + a { border-left: var(--bk-trazo); }
.lang a[aria-current="true"] { background: var(--bk-teja); color: #fff; }
.lang a:hover:not([aria-current]) { background: var(--bk-mostaza); }

.hero { text-align: center; padding: 32px 0 24px; }
.hero-logo { width: min(280px, 65vw); filter: drop-shadow(5px 5px 0 rgba(59, 44, 39, .35)); }
.hero h1 { font-size: clamp(2.4rem, 8vw, 4rem); margin: 20px 0 6px; }
.claim { font: italic 500 clamp(1.2rem, 4vw, 1.6rem) var(--bk-font-display); color: var(--bk-teja); margin: 0; }
.lead { max-width: 600px; margin: 18px auto 26px; font-size: 1.1rem; }

.block { margin-top: 64px; }
.block h2 { font-size: 2rem; margin: 0 0 8px; }
.sub { margin: 0 0 24px; opacity: .85; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.grid .bk-card { display: flex; flex-direction: column; }
.grid .bk-card p:not(.tagline) { margin: 0; }
.tagline { font: italic 500 1.1rem var(--bk-font-display); margin: 16px 0 8px; }

/* Píldora de proyecto: icono + título + subtítulo, todo el bloque es el enlace */
.proj { margin: 0; font-size: 1rem; }
.bk-sello--proj {
  display: flex; width: 100%; gap: .65rem;
  padding: .4rem .9rem .4rem .4rem;
  background: var(--bk-mostaza);
  box-shadow: var(--bk-sombra);
  transition: transform .08s, box-shadow .08s;
}
.bk-sello--proj img { width: 3.5rem; height: 3.5rem; flex: none; }
.bk-sello--proj > span { flex: 1; font: 700 1.35rem/1.1 var(--bk-font-display); }
.bk-sello--proj small { margin-top: 3px; font: 500 .8rem/1.3 var(--bk-font-body); opacity: .85; white-space: nowrap; }
.bk-sello--proj::after { content: "\2197"; margin-left: auto; font: 700 1.3rem var(--bk-font-display); }
.bk-sello--proj:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--bk-tinta); }
.bk-sello--proj:focus-visible { outline: 3px solid var(--bk-teja); outline-offset: 3px; }

.hero-actions, .actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-actions { justify-content: center; }
.about-more { margin-top: 20px; font: 600 1.05rem var(--bk-font-display); }

/* Página "¿Qué es BakalAO Studios?" */
.page-head { text-align: center; padding: 32px 0 0; }
.page-head h1 { font-size: clamp(2.2rem, 7vw, 3.4rem); margin: 0 0 8px; }
.prose { max-width: 720px; }
.prose p { font-size: 1.08rem; margin: 0 0 1em; }
.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.two h3 { font-size: 1.4rem; margin: 0 0 10px; }
.marks { list-style: none; margin: 0; padding: 0; }
.marks li { position: relative; padding-left: 1.7em; margin: 0 0 .7em; }
.marks li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.ticks li::before { content: "\2714"; color: var(--bk-teja); }
.crosses li::before { content: "\2718"; color: var(--bk-granate); }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 1.4em 0; }
.chips li { padding: .35em .95em; background: var(--bk-crema); color: #3B2C27; border: var(--bk-trazo); border-radius: 999px; font: 600 .95rem var(--bk-font-display); }
.who { display: flex; align-items: center; gap: 24px; margin-bottom: 1.2em; }
.who p { margin: 0; }
.who-photo { width: 180px; height: 180px; flex: none; border-radius: 50%; border: var(--bk-trazo); box-shadow: var(--bk-sombra); background: var(--bk-crema); }
@media (max-width: 560px) {
  .who { flex-direction: column; align-items: flex-start; }
  .who-photo { align-self: center; width: 160px; height: 160px; }
}
.cta { text-align: center; }
.cta p { font: 600 1.3rem var(--bk-font-display); margin: 0 0 16px; }
.cta .actions { justify-content: center; }

.about { max-width: 720px; }
.about blockquote { font: 600 clamp(1.3rem, 4vw, 1.8rem)/1.25 var(--bk-font-display); margin: 0 0 20px; padding-left: 16px; border-left: 6px solid var(--bk-teja); }

.pie { margin-top: 72px; padding: 24px 0 40px; border-top: var(--bk-trazo); display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.pie p { margin: 0; font-size: .9rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bk-btn { transition: none; }
}