/* ============================================================
   KreaPlay — join.css
   Estilos exclusivos de /join (página de alta en la lista).
   Mismo sistema que styles.css (Nunito + teal/orange/eggshell/ink)
   pero independiente: /join no carga styles.css para ir más ligera.
   Mobile-first; en pantallas grandes el contenido se centra a 560px.
   ============================================================ */

@font-face { font-family: "Nunito"; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/Nunito-Medium.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/Nunito-Bold.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 900; font-display: swap; src: url("assets/fonts/Nunito-Black.woff2") format("woff2"); }

:root {
  color-scheme: light;
  --teal: #00A7A4; --teal-d: #00807E; --orange: #FCA403; --orange-d: #E89200;
  --eggshell: #F6EFDC; --ink: #173F4A; --ink-soft: #5A6B6E; --line: #E7E2D2;
  --white: #FFFFFF; --field: #FFFDF8; --error: #C2410C; --error-bg: #FFF1EA;
  --tint-1: #DDF1F0; --tint-2: #FDEDCE; --tint-4: #F1E9D2;
  --wa: #25D366; --wa-ink: #073B1E; --glow: #FFF1CF; --highlight: #FDD58A;
  --font: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ease: cubic-bezier(.2,.8,.2,1);
  --maxw: 560px; --gutter: 22px; --bar: 480px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--white); color: var(--ink-soft); font-family: var(--font); font-weight: 500; font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
[hidden] { display: none !important; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--teal-d); }
h1, h2, h3 { color: var(--ink); margin: 0; text-wrap: balance; letter-spacing: -.01em; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 6px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: calc(var(--maxw) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Cabecera + hero ---------- */
.top { position: relative; z-index: 1; display: flex; justify-content: center; align-items: center; padding: 12px var(--gutter); background: var(--teal-d); }
.brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 900; font-size: 1.3rem; color: var(--white); letter-spacing: -.01em; }
.brand img { width: 36px; height: 36px; }
.brand b { color: var(--orange); font-weight: 900; }

.hero { position: relative; padding-block: 22px 40px; isolation: isolate; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: -60px -40px auto -40px; height: 420px; z-index: -1;
  background: radial-gradient(60% 55% at 18% 8%, var(--glow) 0%, rgba(255,241,207,0) 70%), radial-gradient(45% 40% at 100% 38%, var(--tint-1) 0%, rgba(221,241,240,0) 72%); }
.eyebrow { font-size: .75rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--teal-d); }
.h1 { margin-top: 10px; font-size: 2.15rem; line-height: 1.04; font-weight: 900; letter-spacing: -.025em; }
.h1 mark { color: inherit; background: linear-gradient(transparent 60%, var(--highlight) 60%, var(--highlight) 90%, transparent 90%); padding-inline: .06em; }
.by { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.by img { flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--white), 0 2px 8px rgba(23,63,74,.15); }
.by p { font-size: .75rem; line-height: 1.35; letter-spacing: .07em; text-transform: uppercase; }
.by strong { display: block; color: var(--ink); font-weight: 700; }
.lead { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 1rem; line-height: 1.5; }
.lead strong { color: var(--ink); font-weight: 700; }

/* ---------- Formulario (el hueco anima su altura: sin saltos) ---------- */
.slot { position: relative; margin-top: 22px; transition: height .45s var(--ease); }
.form { display: grid; gap: 14px; }
.field { position: relative; display: block; border: 2px solid var(--line); border-radius: 16px; background: var(--field); transition: border-color .2s, box-shadow .2s, background .2s; }
.field:focus-within { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(0,167,164,.15); background: var(--white); }
.field.is-bad { border-color: var(--error); box-shadow: 0 0 0 4px rgba(194,65,12,.12); }
.field label { position: absolute; left: 18px; top: 10px; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); pointer-events: none; }
.field input { width: 100%; height: 64px; padding: 24px 18px 8px; border: 0; background: transparent; font: inherit; font-size: 1.0625rem; color: var(--ink); border-radius: 16px; }
.field input::placeholder { color: #A6B0B0; }
.field input:focus { outline: none; }
.err { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s var(--ease); }
.err > div { overflow: hidden; }
.err.show { grid-template-rows: 1fr; }
.err p { display: flex; gap: 8px; align-items: flex-start; font-size: .875rem; line-height: 1.4; color: var(--error); font-weight: 700; padding-top: 2px; }
.err p::before { content: "!"; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--error); color: var(--white); font-size: .75rem; display: grid; place-items: center; margin-top: 1px; }
.form .field + .err, .form .check + .err { margin-top: -8px; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: .9375rem; line-height: 1.45; cursor: pointer; }
.check input { appearance: none; -webkit-appearance: none; flex: none; width: 24px; height: 24px; margin: 0; border: 2px solid #B9C3C3; border-radius: 8px; background: var(--white); display: grid; place-items: center; cursor: pointer; transition: background .15s, border-color .15s; }
.check input::after { content: ""; width: 11px; height: 6px; border: solid var(--white); border-width: 0 0 3px 3px; transform: translateY(-2px) rotate(-45deg) scale(0); transition: transform .15s var(--ease); }
.check input:checked { background: var(--teal); border-color: var(--teal); }
.check input:checked::after { transform: translateY(-2px) rotate(-45deg) scale(1); }
.check.is-bad input { border-color: var(--error); }
.check a { font-weight: 700; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.turnstile:empty { display: none; }
.server { font-size: .9375rem; color: var(--error); background: var(--error-bg); border-radius: 12px; padding: 10px 14px; font-weight: 700; }

.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 58px; padding: 0 24px; border: 0; border-radius: 16px; background: var(--orange); color: var(--ink); font: inherit; font-weight: 900; font-size: 1.0625rem; text-decoration: none; cursor: pointer; box-shadow: 0 6px 0 var(--orange-d); transition: transform .12s var(--ease), box-shadow .12s var(--ease), background .2s; }
.btn:hover { background: #FFB21F; }
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--orange-d); }
.btn--full { width: 100%; }
.btn[aria-busy="true"] { pointer-events: none; }
.btn__busy { display: inline-flex; align-items: center; gap: 10px; }
.spin { width: 20px; height: 20px; border-radius: 50%; border: 3px solid rgba(23,63,74,.25); border-top-color: var(--ink); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.micro { font-size: .875rem; text-align: center; text-wrap: balance; }
.micro::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); margin-right: 8px; vertical-align: 1px; }

/* ---------- Estado de éxito ---------- */
.ok { text-align: center; display: grid; gap: 18px; padding: 26px 20px 22px; border-radius: 24px; background: var(--white); box-shadow: 0 0 0 1px rgba(23,63,74,.06), 0 18px 44px rgba(23,63,74,.12); }
.ok[hidden] { display: none; }
.enter { animation: enter .5s var(--ease) both; }
@keyframes enter { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.ok__mascot { position: relative; width: 84px; height: 84px; margin: 0 auto; }
.ok__mascot img { width: 84px; height: 84px; animation: bob 2.6s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-5px) rotate(-3deg); } }
.conf { position: absolute; left: 50%; top: 45%; width: 9px; height: 9px; border-radius: 2px; opacity: 0; animation: burst 1.3s var(--ease) .1s 1 both; }
@keyframes burst { 0% { opacity: 1; transform: translate(-50%,-50%) rotate(0) scale(.4); } 100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(var(--r)) scale(1); } }
.ok h2 { font-size: 1.9rem; font-weight: 900; line-height: 1.1; }
.ok h2:focus { outline: none; }
.ok__text { font-size: 1rem; line-height: 1.55; max-width: 32ch; margin-inline: auto; }
.ok__text a { font-weight: 700; }
.ask { position: relative; background: var(--eggshell); border-radius: 18px; padding: 16px 14px; overflow: hidden; transition: height .4s var(--ease); }
.ask__t { font-weight: 900; color: var(--ink); font-size: 1rem; }
.ask__hint { font-size: .8125rem; margin-top: 2px; }
.ask__err { font-size: .8125rem; color: var(--error); font-weight: 700; margin-top: 10px; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.chip { font: inherit; font-size: .9375rem; font-weight: 700; color: var(--teal-d); background: var(--white); border: 2px solid rgba(0,167,164,.45); border-radius: 999px; padding: 8px 16px; min-height: 44px; cursor: pointer; transition: background .15s, color .15s, border-color .15s, transform .12s; }
.chip:hover { border-color: var(--teal); }
.chip:active { transform: scale(.96); }
.chip[aria-pressed="true"] { background: var(--teal); border-color: var(--teal); color: var(--white); }
.chip:disabled { cursor: default; }
.thanks { display: flex; align-items: center; justify-content: center; gap: 10px; height: 100%; color: var(--ink); font-weight: 900; font-size: 1.0625rem; }
.thanks span { width: 30px; height: 30px; border-radius: 50%; background: var(--teal); color: var(--white); display: grid; place-items: center; font-size: 1rem; }
.btn--wa { background: var(--wa); color: var(--wa-ink); box-shadow: 0 6px 0 #1DA851; }
.btn--wa:hover { background: #2FE072; }
.btn--wa:active { box-shadow: 0 2px 0 #1DA851; }
.more { font-weight: 700; font-size: 1rem; text-underline-offset: 4px; }

/* ---------- Foto enmarcada como un fotograma de película ---------- */
.film { margin: 0; }
.frame { max-width: var(--maxw); margin-inline: auto; padding: 20px 10px; border-radius: 18px; background: #1B1B1B; position: relative; overflow: hidden; }
.film .wrap > .frame { margin-inline: auto; }
.frame::before, .frame::after { content: ""; position: absolute; left: 0; right: 0; height: 9px; background: repeating-linear-gradient(90deg, transparent 0 6px, #EFE6CE 6px 16px, transparent 16px 22px); border-radius: 2px; animation: perf .55s linear infinite; }
.frame::before { top: 6px; }
.frame::after { bottom: 6px; }
@keyframes perf { to { background-position: -22px 0; } }
.reel { position: relative; border-radius: 6px; overflow: hidden; animation: jitter 3.2s steps(1) infinite; }
.reel img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; filter: sepia(.12) contrast(1.04); animation: flick 4.5s steps(1) infinite; }
.reel::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: #FFF8E6; mix-blend-mode: soft-light; opacity: 0; animation: flash 6s linear infinite; }
.reel::after { content: ""; position: absolute; top: 0; bottom: 0; left: 30%; width: 1px; z-index: 1; pointer-events: none; background: rgba(255,255,255,.55); opacity: 0; animation: scratch 5s steps(1) infinite; }
@keyframes flick {
  0%  { filter: sepia(.12) contrast(1.04) brightness(1); }
  12% { filter: sepia(.12) contrast(1.04) brightness(.94); }
  14% { filter: sepia(.12) contrast(1.04) brightness(1.03); }
  47% { filter: sepia(.12) contrast(1.04) brightness(.97); }
  49% { filter: sepia(.12) contrast(1.04) brightness(1); }
  78% { filter: sepia(.12) contrast(1.04) brightness(.95); }
  80% { filter: sepia(.12) contrast(1.04) brightness(1.02); }
}
@keyframes flash { 0%, 61%, 66%, 100% { opacity: 0; } 62% { opacity: .9; } 63% { opacity: .2; } 64% { opacity: .7; } }
@keyframes scratch { 0% { opacity: 0; left: 30%; } 22% { opacity: .8; left: 71%; } 26% { opacity: 0; } 58% { opacity: .6; left: 18%; } 61% { opacity: 0; } }
@keyframes jitter { 0% { transform: translate(0,0); } 62% { transform: translate(0,-1px); } 64% { transform: translate(1px,0); } 66% { transform: translate(0,0); } }
.cap { margin-top: 12px; font-size: .875rem; text-align: center; }

/* ---------- Secciones ---------- */
.sec { padding-block: 64px; }
.sec__t { font-size: 1.65rem; font-weight: 900; line-height: 1.15; }
.sec__t--c { text-align: center; }

.perks { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 26px; }
.perk { display: grid; grid-template-columns: 60px minmax(0,1fr); gap: 16px; align-items: start; }
.perk__ic { width: 60px; height: 60px; border-radius: 20px; display: grid; place-items: center; transform: rotate(-4deg); }
.perk:nth-child(even) .perk__ic { transform: rotate(4deg); }
.perk__ic img { width: 40px; height: 40px; object-fit: contain; transform: rotate(4deg); }
.perk:nth-child(even) .perk__ic img { transform: rotate(-4deg); }
.perk > div { padding-top: 6px; }
.perk h3 { font-size: 1rem; font-weight: 900; line-height: 1.3; }
.perk p { font-size: .9375rem; line-height: 1.45; margin-top: 4px; }
.aside { margin: 40px auto 0; max-width: 34ch; text-align: center; font-size: 1rem; line-height: 1.55; text-wrap: balance; }
.aside a { font-weight: 700; text-underline-offset: 3px; }

/* Fondos de banda: cada bloque declara data-bg y hereda sus colores de aquí */
[data-bg="white"] { --s-bg: var(--white); --s-fg: var(--ink-soft); --s-strong: var(--ink); --s-link: var(--teal-d); --s-mark: var(--highlight); }
[data-bg="cream"] { --s-bg: var(--eggshell); --s-fg: var(--ink-soft); --s-strong: var(--ink); --s-link: var(--teal-d); --s-mark: var(--highlight); }
[data-bg="teal"]  { --s-bg: var(--teal-d); --s-fg: rgba(255,255,255,.9); --s-strong: var(--white); --s-link: var(--white); --s-mark: rgba(252,164,3,.6); }
[data-bg] { background: var(--s-bg); color: var(--s-fg); }
[data-bg] .sec__t { color: var(--s-strong); }

.tales { padding-block: 44px 40px; overflow: hidden; }
.tales__cap { text-align: center; font-size: .9375rem; margin-top: 18px; }
.tales__cap a { color: var(--s-link); font-weight: 700; text-underline-offset: 3px; }
.marquee { position: relative; overflow: hidden; max-width: 1120px; margin-inline: auto; }
.marquee::before, .marquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: 28px; z-index: 1; pointer-events: none; }
.marquee::before { left: 0; background: linear-gradient(90deg, var(--s-bg), transparent); }
.marquee::after { right: 0; background: linear-gradient(270deg, var(--s-bg), transparent); }
.track { display: flex; width: max-content; animation: slide 28s linear infinite; will-change: transform; backface-visibility: hidden; }
.set { display: flex; flex: none; }
.set img { height: 150px; width: auto; margin-right: 12px; border-radius: 14px; box-shadow: 0 8px 20px rgba(0,0,0,.14); }
@keyframes slide { to { transform: translate3d(-50%,0,0); } }

.founder { text-align: center; padding-bottom: 48px; }
.polaroid { position: relative; width: 176px; margin: 30px auto 0; padding: 10px 10px 26px; background: var(--white); border-radius: 4px; transform: rotate(-3deg); box-shadow: 0 16px 34px rgba(23,63,74,.18); }
.polaroid__photo { width: 156px; height: 156px; object-fit: cover; border-radius: 2px; }
.polaroid__sticker { position: absolute; right: -22px; bottom: -14px; width: 60px; height: 60px; transform: rotate(8deg); }
.story { margin: 34px auto 0; max-width: 33ch; display: grid; gap: 14px; font-size: 1.0625rem; line-height: 1.6; text-align: left; }
.story strong { color: var(--s-strong); font-weight: 900; }
.story mark { color: var(--s-strong); font-weight: 900; background: linear-gradient(transparent 58%, var(--s-mark) 58%, var(--s-mark) 92%, transparent 92%); }
.story a { color: var(--s-link); font-weight: 900; text-underline-offset: 3px; }
.follow { margin-top: 30px; font-size: 1rem; }
.follow strong { color: var(--s-strong); }
.ig { display: inline-flex; align-items: center; gap: 12px; margin-top: 12px; padding: 10px 18px 10px 10px; border-radius: 999px; background: var(--white); box-shadow: 0 6px 18px rgba(23,63,74,.1); text-decoration: none; color: var(--ink); transition: transform .15s var(--ease); }
.ig:hover { transform: translateY(-2px); }
.ig__ic { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(45deg, #F9CE34, #EE2A7B 55%, #6228D7); }
.ig__ic svg { width: 22px; height: 22px; }
.ig__meta { display: flex; flex-direction: column; text-align: left; line-height: 1.25; }
.ig__meta b { font-weight: 900; font-size: 1rem; }
.ig__meta small { font-size: .875rem; color: var(--ink-soft); }

.faq-sec { padding-top: 48px; }
.share-sec { text-align: center; padding-bottom: 56px; }
.share__t { margin: 10px 0 22px; color: var(--ink-soft); font-size: 1.0625rem; }
.share__btn { max-width: 420px; margin-inline: auto; }
.faq { margin-top: 18px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); interpolate-size: allow-keywords; }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; cursor: pointer; font-weight: 700; color: var(--ink); font-size: 1.0625rem; line-height: 1.35; }
.faq summary::-webkit-details-marker { display: none; }
.pm { flex: none; position: relative; width: 28px; height: 28px; border-radius: 50%; background: var(--eggshell); }
.pm::before, .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2.5px; border-radius: 2px; background: var(--teal-d); transform: translate(-50%,-50%); transition: transform .25s var(--ease); }
.pm::after { transform: translate(-50%,-50%) rotate(90deg); }
details[open] .pm::after { transform: translate(-50%,-50%) rotate(0); }
/* Apertura animada donde el navegador lo soporta (Chrome); en el resto abre al instante */
.faq details::details-content { block-size: 0; overflow: hidden; transition: block-size .3s var(--ease), content-visibility .3s allow-discrete; }
.faq details[open]::details-content { block-size: auto; }
.faq .a { padding: 0 44px 20px 0; font-size: 1rem; }

.foot { border-top: 1px solid var(--line); }
.foot .wrap { padding-block: 28px 120px; text-align: center; font-size: .875rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; }
.foot a { color: var(--ink-soft); }

/* ---------- Barra fija inferior (aparece cuando el formulario sale de pantalla) ---------- */
.sticky { position: fixed; z-index: 30; left: 50%; bottom: 0; width: min(100%, var(--bar)); padding: 0 12px calc(12px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 120%); transition: transform .35s var(--ease); pointer-events: none; }
.sticky.show { transform: translate(-50%, 0); pointer-events: auto; }
.sticky__in { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; border-radius: 20px; background: var(--ink); box-shadow: 0 14px 36px rgba(23,63,74,.3); }
.sticky__in img { width: 34px; height: 34px; flex: none; }
.sticky__in p { flex: 1; min-width: 0; color: var(--white); font-weight: 700; font-size: .875rem; line-height: 1.25; }
.sticky .btn { min-height: 46px; padding: 0 16px; font-size: .9375rem; border-radius: 13px; box-shadow: none; }

/* ---------- Modal de cookies (al llegar, si aún no se ha decidido) ---------- */
.cookies { position: fixed; z-index: 40; inset: 0; display: grid; place-items: end center; padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px)); background: rgba(23,63,74,.55); opacity: 0; transition: opacity .3s var(--ease); }
.cookies.show { opacity: 1; }
.cookies__in { width: min(100%, var(--bar)); background: var(--white); border-radius: 20px; padding: 16px; box-shadow: 0 0 0 1px rgba(23,63,74,.08), 0 18px 40px rgba(23,63,74,.22); display: grid; gap: 12px; font-size: .875rem; line-height: 1.45; transform: translateY(24px); transition: transform .4s var(--ease); }
.cookies.show .cookies__in { transform: none; }
@media (min-width: 720px) { .cookies { place-items: center; } }
.cookies__row { display: flex; gap: 8px; }
.cookies__row button { flex: 1; min-height: 44px; border-radius: 12px; font: inherit; font-weight: 900; font-size: .9375rem; cursor: pointer; border: 2px solid var(--line); background: var(--white); color: var(--ink); }
.cookies__row .is-primary { background: var(--orange); border-color: var(--orange); }

@media (min-width: 720px) {
  .h1 { font-size: 2.75rem; }
  .sec { padding-block: 80px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}