/* WeInComic visual layer (owner, 1 Nov 2026): direction A "Portada Nº 1" on the B base: paper, ink,
   comic yellow and a red accent, condensed display type, square ink panels with offset shadows. Loaded after every other stylesheet;
   removing its <link> restores the previous look. */
@font-face{font-family:'Barlow Condensed';src:url('/fonts/barlow-condensed-700-latin.woff2') format('woff2');font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('/fonts/barlow-condensed-800-latin.woff2') format('woff2');font-style:normal;font-weight:800;font-display:swap}
:root{--red:#e4372b;--ink:#191c23;--yellow:#f0ca22;--yellow-hover:#e1bd19;--soft:#f8f2d9;--gold:#7d6200;
  --cream:#fffef7;--paper:#ffffff;--plum:#191c23;--muted:#555b67;--line:#d7d3be;--rose:#f8f2d9;--rose-deep:#7d6200;--focus:#191c23;--coral:#f0ca22;
  --serif:'Barlow Condensed','Arial Narrow',Arial,sans-serif;--sans:'DM Sans',Arial,sans-serif;--radius:4px}
body{background:var(--cream);color:var(--ink)}
::selection{background:var(--yellow);color:var(--ink)}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

/* Type: every Unna heading becomes the condensed display face. */
h1,h2,h3,.home-main h1,.home-main h2,.home-main h3,.content-main h1,.wordmark,.footer-brand,.story-world-copy h3,.story-dialog-bar h2,.story-dialog-content .story-format,
.faq-section summary,.included-copy strong,.reader-controls strong,.reader-cover>span,.included-stamp,.scene-dedication,.landing-occasions strong,.character-number,
.step-illustration span,.illustrated-choice strong,.style-copy strong{font-family:var(--serif);font-style:normal;font-weight:700;letter-spacing:-.01em}
h1,h2,.home-main h1,.home-main h2{line-height:.96}
h1 em,h2 em,h3 em,.home-main em{font-style:normal;color:inherit;background:linear-gradient(transparent 58%,var(--yellow) 58%,var(--yellow) 92%,transparent 92%);padding:0 .06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.section-intro h2 em,.faq-section h2 em,.final-scene h2 em,.scene-copy h1 em{color:inherit}

/* Header, demo notice and footer. */
.site-header{background:var(--cream)}
.wordmark{font-weight:800;letter-spacing:-.02em}
.brand-dot{background:var(--gold);border-radius:0;width:7px;height:7px}
.demo-bar{background:var(--ink);color:#fff}
.site-footer{background:var(--cream);border-top:2px solid var(--ink)}
.footer-brand{font-weight:800}

/* Buttons: yellow with ink text and border. */
button.primary,.home-main button.primary{background:var(--yellow);color:var(--ink);border:1px solid var(--ink);border-radius:4px;font-weight:700}
button.primary:hover,.home-main button.primary:hover{background:var(--yellow-hover);border-color:var(--ink)}
.home-main button.primary:focus-visible{outline-color:var(--ink)}
button.secondary,.button.secondary{border-color:var(--ink);color:var(--ink);border-radius:4px}
button.secondary:hover,.button.secondary:hover{background:var(--soft)}
.text-button:hover,.nav-link:hover{color:var(--gold)}























/* Sections. */
.section-intro p,.illustrated-steps p,.faq-section details p,.final-scene p,.section-footnote,.reader-caption p{color:var(--muted)}
.story-world{border:2px solid var(--ink);background:#fff}
.landing-occasions .story-preview{background:var(--ink);border-bottom:2px solid var(--ink)}
.landing-occasions .story-preview>.story-preview-label{background:var(--yellow);color:var(--ink);border:1px solid var(--ink);border-radius:2px;font-weight:600}
.story-world-copy>small,.landing-occasions button>span small,.reader-caption .sample-label,.reader-controls span,.story-dialog-bar small{color:var(--gold)}
.story-world-copy h3{color:var(--ink);font-size:32px}
.story-world-copy p{color:var(--muted)}
.landing-occasions .story-world-actions>button{color:var(--ink);font-weight:700}
.landing-reader{background:var(--soft);border:2px solid var(--ink)}
.reader-cover>img,.reader-page{border:2px solid var(--ink);box-shadow:none}
.reader-cover>span{color:var(--ink)}
.reader-arrow{border-color:var(--ink)}
.reader-arrow:hover{background:var(--yellow)}
.page-strip button[aria-pressed=true]{border-color:var(--ink)}
.page-strip span{background:var(--cream);color:var(--ink)}
.included-section{background:var(--ink);color:#fff}
.included-art{background:var(--yellow)}
.included-art figure{border:3px solid var(--ink);box-shadow:8px 10px 0 var(--ink)}
.included-stamp{color:var(--ink)}
.included-copy>p,.included-copy li span{color:#d6d9e0}
.included-copy li>svg{stroke:var(--yellow)}
.step-illustration{border:2px solid var(--ink)}
.step-illustration span{background:var(--yellow);color:var(--ink);border:2px solid var(--ink);border-radius:0;font-weight:800}
.faq-section details,.faq-section details:last-child{border-color:var(--ink)}
.faq-section summary span{color:var(--ink)}
.final-scene{background:var(--yellow);border-block:2px solid var(--ink)}
.final-scene>div{border-right:2px solid var(--ink)}
.final-scene p,.final-scene small{color:var(--ink)}
.final-scene button.primary{background:var(--ink);color:#fff}
.final-scene button.primary:hover{background:#2c313c}
.story-example-dialog{background:var(--cream);border:2px solid var(--ink);border-radius:4px;color:var(--ink)}
.story-dialog-bar{background:var(--cream);border-bottom:2px solid var(--ink)}
.story-dialog-content .story-concept-note{color:var(--muted)}

/* Creation journey: same palette on choices, styles and notes. */
.choice:hover{background:var(--soft)}
.choice.illustrated-choice{background:#fff;border:2px solid var(--ink);border-radius:4px}
.illustrated-choice.selected{outline:3px solid var(--yellow);outline-offset:0;background:var(--soft)}
.illustrated-choice>svg{color:var(--ink);background:var(--yellow)}
.style-tile{background:#fff;border:2px solid var(--ink)}
.style-tile:has(input:checked){outline:3px solid var(--yellow);outline-offset:0}
.style-access-note{background:var(--soft);border-left-color:var(--ink)}
.style-restriction{color:var(--gold)}
.style-tile .style-view{color:var(--ink)}
.style-art{border-radius:0}
.journey{background:var(--soft)}
.character{background:#fff}
.creation-status{border-left-color:var(--yellow)}
.creation-simulation{background:var(--soft)}
.post-page-nav [aria-current=page]{outline-color:var(--ink)}
.field input,.field textarea,.field select,.photo-field>input{border-color:#9ea3ad}
#style-form .actions{background:var(--cream);border-top:2px solid var(--ink)}


@media(max-width:800px){
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  .final-scene>div{border-right:0;border-bottom:2px solid var(--ink)}
}
/* Phones: logo and account/language on one row (account.css wrapped them onto two). */
@media(max-width:640px){.site-header{flex-wrap:nowrap;height:64px;min-height:64px;padding-top:0;padding-bottom:0}.site-header nav{flex:0 1 auto;justify-content:flex-end;gap:14px;min-width:0}.brand-dot{margin-left:3px}}



/* Funnel on phones: the step action stays in reach at the bottom of the screen. */
@media(max-width:700px){.content-main .actions{position:sticky;bottom:0;z-index:15;display:flex;gap:10px;margin:22px -20px 0;padding:12px 20px calc(12px + env(safe-area-inset-bottom));background:var(--cream);border-top:2px solid var(--ink)}.content-main .actions .primary{flex:1;min-height:52px}.content-main .actions .secondary{flex:0 0 auto}}

/* ---------- Direction A ---------- */
.site-header nav{gap:18px}
.wordmark{text-transform:none}
.brand-dot{background:var(--red)}
button.primary,.home-main button.primary{border:2px solid var(--ink);border-radius:6px;box-shadow:4px 4px 0 var(--ink);text-transform:uppercase;letter-spacing:.02em;font-weight:800}
button.primary:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
/* Hero: a comic cover with masthead, price stamp and lettered title; the action sits right under it. */
.a-hero{max-width:1120px;margin:auto;padding:24px 24px 8px;display:grid;grid-template-columns:minmax(0,460px) minmax(0,1fr);gap:48px;align-items:center}
/* The sample cover carries its own title band on top: crop to the artwork (5:6, bottom-aligned). */
.a-cover{position:relative;border:3px solid var(--ink);box-shadow:8px 8px 0 var(--ink);overflow:hidden;aspect-ratio:5/6;background:var(--ink)}
.a-cover img{width:100%;height:100%;object-fit:cover;object-position:50% 100%}
.a-dots{position:absolute;inset:0;background-image:radial-gradient(var(--ink) 1px,transparent 1.4px);background-size:7px 7px;opacity:.16;pointer-events:none}
.a-mast{position:absolute;left:0;right:0;top:0;margin:0;max-width:none;display:flex;justify-content:space-between;padding:7px 12px;background:var(--yellow);border-bottom:3px solid var(--ink);font:800 15px/1 var(--serif);letter-spacing:.06em;text-transform:uppercase}
.a-price{position:absolute;right:12px;top:48px;margin:0;width:78px;height:78px;border-radius:50%;display:grid;place-content:center;text-align:center;background:var(--red);color:#fff;border:3px solid var(--ink);transform:rotate(8deg);font:800 22px/1 var(--serif)}
.a-price small{font:700 10px/1.2 var(--sans);letter-spacing:.06em}
.a-cover h1{position:absolute;left:14px;right:14px;bottom:16px;margin:0;color:#fff;font:800 clamp(44px,6vw,64px)/.92 var(--serif);text-transform:uppercase;letter-spacing:.005em;text-shadow:3px 3px 0 var(--ink),-1px -1px 0 var(--ink),1px -1px 0 var(--ink),-1px 1px 0 var(--ink)}
.a-hero .a-copy{grid-column:auto;grid-row:auto;order:0;margin:0;padding:0;width:auto;background:none;box-shadow:none;text-align:left;display:grid;gap:14px;max-width:440px}
.a-copy .a-lede{font-size:19px;line-height:1.5;color:var(--ink);margin:0}
.a-copy .scene-cta{width:100%;min-height:62px;font-size:20px!important;padding:16px 24px!important}
.a-copy .scene-example{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:8px 0;border:0;background:none;font:700 14px var(--sans);text-decoration:underline;text-underline-offset:4px}
.a-copy .scene-note{margin:0;text-align:center;font-size:12px;color:var(--muted)}
/* Recipients right after the hero. */
.a-audience{padding-top:40px;padding-bottom:24px}
.a-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.a-tile{position:relative;padding:0;border:3px solid var(--ink);background:var(--ink);aspect-ratio:4/5;overflow:hidden;box-shadow:4px 4px 0 var(--ink);cursor:pointer}
.a-tile img{width:100%;height:100%;object-fit:cover;transition:transform .25s ease}
.a-tile:hover img{transform:scale(1.04)}
.a-tile span{position:absolute;left:10px;bottom:10px;padding:4px 10px;background:var(--yellow);border:2px solid var(--ink);font:800 20px/1 var(--serif);text-transform:uppercase}
.section-intro h2,.faq-section h2,.final-scene h2{text-transform:uppercase}
.step-illustration span{background:var(--yellow)}
.final-scene small{font-size:12px}
/* Bottom bar on phones after the hero button scrolls away. */
.home-sticky{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;gap:4px;padding:10px max(16px,env(safe-area-inset-left,0px)) calc(10px + env(safe-area-inset-bottom,0px));background:var(--cream);border-top:3px solid var(--ink)}
.home-sticky[hidden]{display:none}
.home-sticky .primary{width:100%;min-height:52px}
.home-sticky small{text-align:center;font-size:11px;color:var(--muted)}
@media(min-width:801px){.home-sticky{display:none!important}}
/* Funnel: progress bar, recipient tiles, chips, large photo target, story + style. */
.journey{position:relative}
.journey-bar{position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--line)}
.journey-bar i{display:block;height:100%;background:var(--red)}
.journey .step-count{font-weight:800;color:var(--red);text-transform:uppercase;letter-spacing:.06em;font-size:11px}
.content-main .view-heading h1{text-transform:uppercase}
.audience-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:640px}
.audience-tile{position:relative;padding:0;border:3px solid var(--ink);background:var(--ink);aspect-ratio:4/5;overflow:hidden;box-shadow:4px 4px 0 var(--ink);cursor:pointer}
.audience-tile img{width:100%;height:100%;object-fit:cover}
.audience-tile strong{position:absolute;left:10px;bottom:10px;padding:4px 10px;background:var(--yellow);border:2px solid var(--ink);font:800 22px/1 var(--serif);text-transform:uppercase;color:var(--ink)}
.audience-tile.selected,.occasion-chip.selected{outline:4px solid var(--red);outline-offset:2px}
.occasion-more{margin:24px 0 10px;font-weight:700}
.occasion-chips{display:flex;flex-wrap:wrap;gap:8px;max-width:640px}
.occasion-chip{min-height:44px;padding:9px 14px;border:2px solid var(--ink);border-radius:999px;background:var(--paper);font-weight:600;font-size:14px;cursor:pointer}
.occasion-chip:hover{background:var(--soft)}
.character-fields{display:grid;gap:14px}
.photo-field{position:relative}
.photo-field input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.photo-drop{display:block;cursor:pointer}
.photo-drop .photo-preview{display:grid;place-items:center;aspect-ratio:1/0.8;max-height:340px;border:3px dashed var(--ink);border-radius:6px;background:var(--soft);overflow:hidden;position:relative}
.photo-drop .photo-preview img{width:100%;height:100%;object-fit:cover}
.photo-empty{display:grid;justify-items:center;gap:4px;text-align:center;padding:16px}
.photo-empty svg{width:44px;height:44px}
.photo-empty b{font:800 22px/1 var(--serif);text-transform:uppercase}
.photo-empty span{font-size:13px;color:var(--muted)}
.photo-change{position:absolute;right:10px;bottom:10px;padding:6px 10px;background:var(--yellow);border:2px solid var(--ink);font-weight:700;font-size:13px}
.photo-field:focus-within .photo-preview{outline:3px solid var(--red);outline-offset:3px}
.add-character{font-weight:800;color:var(--red);text-decoration:none}
.style-step{display:grid;gap:14px;margin-top:28px;padding-top:22px;border-top:3px solid var(--ink)}
.style-step h2{font-size:30px;text-transform:uppercase}
.style-step .style-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.style-step .style-tile .style-art{height:150px}
.style-step .style-tile .style-copy{padding:10px 12px 4px}
.style-step .style-tile .style-copy strong{font-size:20px}
.style-step .style-view{margin:0 12px 10px;width:auto;font-size:12px}
@media(max-width:800px){
  .a-hero{grid-template-columns:1fr;gap:16px;padding:12px 16px 0}
  .a-cover h1{font-size:46px}
  .a-price{width:66px;height:66px;font-size:19px;top:44px}
  .a-hero .a-copy{max-width:none;text-align:center}
  .a-copy .a-lede{font-size:16px}
  .a-copy .scene-cta{min-height:56px;font-size:18px!important}
  .a-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .a-tile span{font-size:17px}
  .home-main{padding-bottom:88px}
  .style-step .style-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .style-step .style-tile .style-art{height:120px}
}
/* Funnel fixes on phones: one column for the photo, Volver small beside the main action. */
.content-main .character-fields{grid-template-columns:1fr!important;display:grid}
.photo-field,.photo-drop{width:100%}
.content-main .actions{flex-direction:row!important;align-items:stretch}
.content-main .actions .secondary{flex:0 0 auto;width:auto;padding:0 16px}
.content-main .actions .primary{flex:1 1 auto;width:auto}
#occasion-form .actions{position:static;border:0;background:none;margin:24px 0 0;padding:0}
.photo-drop .photo-preview{width:100%;height:auto;margin:0}
.content-main .actions .secondary{order:-1}

/* Funnel bar: step count over a full-width progress line, aligned with the page content. */
.journey{display:flex;justify-content:flex-end;align-items:center;max-width:1180px;margin:0 auto;padding:10px 24px 14px;background:none;border:0}
.journey-bar{left:24px;right:24px}
.demo-bar{display:none}
/* Keep the payment action visible without covering a quarter of a phone's screen. */
@media(max-width:680px){
  .content-main .purchase-checkout .actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
  .content-main .purchase-checkout .actions>.secondary{order:0;width:100%;min-height:40px;padding:6px 10px;font-size:12px}
  .content-main .purchase-checkout .actions>.primary{order:0;grid-column:1/-1;grid-row:2;width:100%;min-height:48px;padding:10px 12px}
}