/* Kuvert · web pública (landing e historias). Mismos tokens que el editor. */
:root{
  --bg:#E7EBE9; --bg-glow:#F8F9F6; --fg:#1F2729; --muted:#5E6967; --line:#C9D0CD; --line-soft:#DCE1DE; --line-strong:#9AA7A3;
  --surface:#FBFAF6; --field:#F3F5F3; --chip:#DCE2DF;
  --accent:#3B584E; --accent-fg:#F4F5F0; --accent-soft:#DCE8E1;
  --paper:#FBFAF6; --paper-env:#F2F0E9; --paper-ink:#22292B; --paper-muted:#727A77; --paper-line:#DEDBD2;
  --lining:#2D453E; --lingon:#A2473C; --lingon-deep:#7A3127; --red-soft:#F3E3DF; --frost:#6F8A78;
  --night:#13181A; --night-fg:#E3E7E3; --night-muted:#9AA5A2;
  --shadow:rgba(28,38,40,.22);
  --f-sans:"Albert Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-mono:"DM Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#13181A; --bg-glow:#222B2D; --fg:#E3E7E3; --muted:#B0BAB7; --line:#323C3E; --line-soft:#283133; --line-strong:#56625F;
    --surface:#1C2325; --field:#182022; --chip:#253033;
    --accent:#9CBDAF; --accent-fg:#10201A; --accent-soft:#22332D;
    --lingon:#C86A5E; --red-soft:#3A2522; --frost:#8FAA98;
    --night:#0D1112; --shadow:rgba(0,0,0,.55);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#13181A; --bg-glow:#222B2D; --fg:#E3E7E3; --muted:#B0BAB7; --line:#323C3E; --line-soft:#283133; --line-strong:#56625F;
  --surface:#1C2325; --field:#182022; --chip:#253033;
  --accent:#9CBDAF; --accent-fg:#10201A; --accent-soft:#22332D;
  --lingon:#C86A5E; --red-soft:#3A2522; --frost:#8FAA98;
  --night:#0D1112; --shadow:rgba(0,0,0,.55);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; overflow-x:clip}
body{margin:0; background:radial-gradient(120% 60% at 50% 0%, var(--bg-glow) 0%, var(--bg) 70%) no-repeat, var(--bg); color:var(--fg); font:16px/1.6 var(--f-sans); -webkit-font-smoothing:antialiased}
.g{padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px))}
.w{max-width:1040px; margin:0 auto}
a{color:var(--accent)}
img{max-width:100%; height:auto}
.fa{display:inline-block; transform:rotate(180deg); font-style:normal; letter-spacing:0; margin:0 .02em}
.bw{white-space:nowrap}
.eyebrow{font:400 11px var(--f-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px}

/* cabecera */
.top{display:flex; align-items:center; justify-content:space-between; gap:12px; padding-block:18px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--fg)}
.wordmark{font-weight:600; font-size:18px; letter-spacing:.04em; position:relative}
.wordmark::after{content:""; position:absolute; right:-7px; top:2px; width:5px; height:5px; border-radius:50%; background:var(--lingon)}
.chip{font:400 10px var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); background:var(--chip); padding:4px 8px; border-radius:99px; white-space:nowrap; margin-left:6px}
.nav{display:flex; align-items:center; gap:18px}
.nav a.lk{color:var(--fg); text-decoration:none; font-size:14px}
.nav a.lk:hover{color:var(--accent)}
@media (max-width:560px){ .nav a.lk{display:none} }

/* botones */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:0 22px; border-radius:99px; background:var(--accent); color:var(--accent-fg); font:500 15px var(--f-sans); text-decoration:none; border:0; cursor:pointer; transition:transform .2s, box-shadow .2s}
.btn:hover{transform:translateY(-1px); box-shadow:0 10px 24px -14px var(--shadow)}
.btn.ghost{background:transparent; color:var(--fg); box-shadow:inset 0 0 0 1px var(--line-strong)}
.btn.sm{min-height:38px; padding:0 16px; font-size:14px}

/* titulares y texto */
h1,h2,h3{font-weight:300; margin:0; text-wrap:balance; line-height:1.1}
h1{font-weight:200; font-size:clamp(38px,6.2vw,66px); letter-spacing:-.015em}
h2{font-size:clamp(28px,3.6vw,38px)}
h3{font-size:19px; font-weight:500; line-height:1.3}
.lead{font-size:clamp(16px,1.6vw,18px); font-weight:300; color:var(--muted); max-width:52ch; margin:0}
section{padding-block:clamp(48px,8vw,96px)}
.sh{display:flex; flex-direction:column; gap:12px; margin-bottom:34px; max-width:640px}
.sh p{margin:0; color:var(--muted); font-weight:300}

/* hero */
.hero{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(24px,5vw,64px); align-items:center; padding-block:clamp(24px,6vw,64px) clamp(48px,8vw,96px)}
@media (max-width:820px){ .hero{grid-template-columns:minmax(0,1fr)} .hero .art{min-height:280px; margin-top:28px} .hero .env{width:min(300px,62vw)} }
.hero-t{display:flex; flex-direction:column; gap:20px; min-width:0}
.acts{display:flex; gap:10px; flex-wrap:wrap}
.facts{display:flex; flex-wrap:wrap; gap:6px 16px; font:400 11px var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:0; padding:0; list-style:none}
.facts li::before{content:"·"; margin-right:8px; color:var(--lingon)}
.facts li:first-child::before{content:none}

/* sobre de la portada */
.art{display:grid; place-items:center; min-height:clamp(300px,42vw,440px); position:relative}
.env{position:relative; width:min(380px,82vw); aspect-ratio:1.45; animation:flo 6s ease-in-out infinite}
.env .back{position:absolute; inset:0; background:var(--lining); border-radius:6px; box-shadow:0 40px 60px -36px var(--shadow)}
.env .letter{position:absolute; left:7%; right:7%; bottom:18%; height:118%; background:var(--paper); border-radius:3px; box-shadow:0 0 0 1px var(--paper-line); padding:9% 9%; display:flex; flex-direction:column; gap:7%; animation:peek 6s ease-in-out infinite; color:var(--paper-ink)}
.env .letter b{font:300 clamp(15px,2.2vw,20px) var(--f-sans)}
.env .letter i{display:block; height:5px; border-radius:3px; background:var(--paper-line)}
.env .letter i:nth-of-type(2){width:86%} .env .letter i:nth-of-type(3){width:70%}
.env .front{position:absolute; inset:0; border-radius:6px; overflow:hidden; pointer-events:none}
.env .front::before{content:""; position:absolute; inset:0; background:var(--paper-env); clip-path:polygon(0 30%, 50% 62%, 100% 30%, 100% 100%, 0 100%)}
.env .front::after{content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.05), transparent 60%); clip-path:polygon(0 30%, 50% 62%, 100% 30%, 100% 100%, 0 100%)}
.env .seal{position:absolute; left:50%; top:58%; width:13%; aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle at 38% 34%, #B85A4E, var(--lingon) 45%, var(--lingon-deep)); box-shadow:0 3px 6px rgba(0,0,0,.25)}
.env .photo{position:absolute; width:30%; aspect-ratio:.82; background:var(--paper); padding:3% 3% 9%; box-shadow:0 18px 30px -18px var(--shadow), 0 0 0 1px var(--paper-line)}
.env .photo span{display:block; width:100%; height:100%; background:linear-gradient(160deg, var(--frost), var(--lining))}
.env .p1{left:-16%; top:-30%; transform:rotate(-9deg); animation:fl1 7s ease-in-out infinite}
.env .p2{right:-14%; top:-42%; transform:rotate(7deg); animation:fl2 8s ease-in-out infinite}
.env .p2 span{background:linear-gradient(200deg, #E9ECE7, var(--frost))}
.flake{position:absolute; color:var(--line-strong); font-size:18px; animation:fl1 9s ease-in-out infinite}
@keyframes flo{50%{transform:translateY(-8px)}}
@keyframes peek{0%,100%{transform:translateY(0)} 50%{transform:translateY(-7%)}}
@keyframes fl1{0%,100%{translate:0 0} 50%{translate:0 -12px}}
@keyframes fl2{0%,100%{translate:0 0} 50%{translate:0 10px}}
@media (prefers-reduced-motion: reduce){ .env, .env *, .flake{animation:none!important} }

/* pasos */
.steps{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; list-style:none; margin:0; padding:0; counter-reset:s}
@media (max-width:760px){ .steps{grid-template-columns:minmax(0,1fr)} }
.steps li{background:var(--surface); border-radius:18px; box-shadow:0 0 0 1px var(--line-soft); padding:24px; display:flex; flex-direction:column; gap:10px; counter-increment:s}
.steps li::before{content:counter(s,decimal-leading-zero); font:500 11px var(--f-mono); color:var(--lingon); letter-spacing:.1em}
.steps p{margin:0; color:var(--muted); font-size:15px; font-weight:300}

/* qué cabe */
.inside{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--line-soft); border-radius:18px; overflow:hidden; box-shadow:0 0 0 1px var(--line-soft)}
@media (max-width:860px){ .inside{grid-template-columns:repeat(2,minmax(0,1fr))} }
.inside div{background:var(--surface); padding:22px; display:flex; flex-direction:column; gap:6px; min-width:0}
.inside b{font-weight:500; font-size:15px}
.inside span{color:var(--muted); font-size:14px; font-weight:300; line-height:1.5}

/* privacidad */
.night{background:var(--night); color:var(--night-fg); border-radius:28px; padding:clamp(28px,5vw,56px); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:32px; align-items:start}
@media (max-width:760px){ .night{grid-template-columns:minmax(0,1fr)} }
.night .eyebrow{color:var(--night-muted)}
.night p{color:var(--night-muted); font-weight:300; margin:0}
.night ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.night li{padding:14px 0; border-top:1px solid rgba(227,231,227,.12); display:flex; flex-direction:column; gap:2px}
.night li b{font-weight:500; color:var(--night-fg)}
.night li span{color:var(--night-muted); font-size:14.5px; font-weight:300}

/* historias */
.posts{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
@media (max-width:860px){ .posts{grid-template-columns:minmax(0,1fr)} }
.post{background:var(--paper); color:var(--paper-ink); border-radius:4px; box-shadow:0 24px 44px -32px var(--shadow), 0 0 0 1px var(--paper-line); padding:26px; display:flex; flex-direction:column; gap:12px; text-decoration:none; transition:transform .25s}
.post:hover{transform:translateY(-3px) rotate(-.3deg)}
.post h3{font-weight:400; font-size:21px}
.post p{margin:0; color:var(--paper-muted); font-size:14.5px; font-weight:300}
.post .eyebrow{color:var(--paper-muted)}
.post .more{margin-top:auto; font:500 13px var(--f-sans); color:var(--accent)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .post{background:var(--surface); color:var(--fg); box-shadow:0 0 0 1px var(--line-soft)} :root:not([data-theme="light"]) .post p, :root:not([data-theme="light"]) .post .eyebrow{color:var(--muted)} }

/* preguntas */
.faq{display:flex; flex-direction:column; max-width:760px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer; list-style:none; padding:18px 0; display:flex; justify-content:space-between; gap:16px; font-size:17px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font:300 22px var(--f-sans); color:var(--accent); line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 18px; color:var(--muted); font-weight:300; max-width:62ch}

/* llamada final */
.cta{display:flex; flex-direction:column; align-items:center; text-align:center; gap:18px}
.cta .lead{max-width:44ch}

/* pie */
footer{border-top:1px solid var(--line); padding-block:26px 40px; display:flex; justify-content:space-between; gap:12px 24px; flex-wrap:wrap; font:400 11px var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
footer a{color:var(--muted)}
footer nav{display:flex; gap:18px; flex-wrap:wrap}

/* artículo */
.art-h{display:flex; flex-direction:column; gap:16px; padding-block:clamp(28px,6vw,64px) 28px; max-width:720px}
.art-h h1{font-size:clamp(34px,5vw,52px)}
.crumbs{font:400 11px var(--f-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.crumbs a{color:var(--muted); text-decoration:none}
.crumbs a:hover{color:var(--accent)}
.prose{max-width:680px; padding-bottom:40px; font-size:17.5px; line-height:1.72}
.prose p{margin:0 0 1.1em}
.prose h2{font-size:clamp(24px,3vw,30px); margin:1.6em 0 .6em}
.prose ul,.prose ol{padding-left:1.2em; margin:0 0 1.2em}
.prose li{margin-bottom:.45em}
.prose blockquote{margin:1.4em 0; padding:18px 22px; background:var(--paper); color:var(--paper-ink); border-radius:4px; box-shadow:0 0 0 1px var(--paper-line); font-weight:300; font-size:17px}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .prose blockquote{background:var(--surface); color:var(--fg); box-shadow:0 0 0 1px var(--line-soft)} }
.prose blockquote p:last-child{margin:0}
.note{display:flex; flex-direction:column; gap:14px; align-items:flex-start; background:var(--accent-soft); border-radius:18px; padding:24px; margin:2em 0 0; max-width:680px}
.note p{margin:0}
.more-posts{padding-block:28px 64px}
.more-posts .posts{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:700px){ .more-posts .posts{grid-template-columns:minmax(0,1fr)} }


/* enlace a Imperfecta Creativa */
a.iclk{color:inherit; text-decoration:underline; text-decoration-color:var(--lingon); text-underline-offset:3px; text-decoration-thickness:1px}
a.iclk:hover{color:var(--lingon)}