/* Writlyz — editorial: papel, tinta azul marino, serif y el azul de la marca */
@import url("/assets/fonts/lora.css");
@import url("/assets/fonts/inter.css");

:root {
  --accent: #1cacff; --accent-ink: #fff; --deep: #0b7fd0;
  --ink: #0f172a; --muted: #64748b; --bg: #fbfaf7; --bg-2: #f1f5fa; --line: #e3e7ee;
  --radius: 18px; --radius-sm: 12px;
  --font-head: "Lora", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --placeholder: url("/apps/writlyz/img/IconoWeb.webp");
}
h1, h2 { font-weight: 700; letter-spacing: -.015em; }
h1 em, h2 em { font-style: italic; color: var(--accent); }
h3 { font-family: var(--font-body); font-weight: 700; }
.kicker { color: var(--deep); font-family: var(--font-body); }
.topbar .app-brand img { width: auto; height: 30px; border-radius: 0; }

/* Hero con papel pautado */
.app-hero {
  background:
    linear-gradient(90deg, transparent 72px, rgba(28, 172, 255, .18) 72px 74px, transparent 74px),
    repeating-linear-gradient(180deg, transparent 0 35px, rgba(15, 23, 42, .05) 35px 36px);
}
.app-hero .logo { width: 240px; margin-bottom: 26px; }
.app-hero .tagline { font-family: var(--font-head); font-style: italic; color: #334155; }
.platforms li { background: #fff; border: 1px solid var(--line); }
.cta { border-radius: 14px; background: linear-gradient(135deg, #3ec0ff, #1cacff 45%, #0b7fd0); }
.hero-visual .browser { transform: perspective(1400px) rotateY(-10deg) rotateX(3deg); width: 100%; }
.hero-visual::before {
  content: ""; position: absolute; inset: 8% -6% -8% 10%; border-radius: 30px; z-index: -1;
  background: radial-gradient(circle at 30% 30%, #bfe8ff, #1cacff 70%); opacity: .45; filter: blur(30px);
}
.quill { position: absolute; right: -10px; bottom: -30px; width: 90px; height: 90px; border-radius: 22px; background: #fff; display: grid; place-items: center; box-shadow: 0 20px 40px -18px rgba(15, 23, 42, .35); }
.quill img { width: 64px; }

/* Galería de escritorio */
.gallery { gap: 34px; }
.browser { border-radius: 12px; }

/* Bloques del libro */
.board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 40px; }
.card-note {
  background: #fff; border-radius: 14px; padding: 22px; border: 1px solid var(--line); border-top: 5px solid var(--c, var(--accent));
  box-shadow: 0 14px 30px -24px rgba(15, 23, 42, .5); transition: transform .25s;
}
.card-note:nth-child(odd) { transform: rotate(-.6deg); }
.card-note:nth-child(even) { transform: rotate(.6deg); }
.card-note:hover { transform: rotate(0) translateY(-4px); }
.card-note h3 { font-size: 17px; margin-bottom: 6px; display: flex; gap: 8px; align-items: center; }
.card-note p { color: var(--muted); font-size: 15px; margin: 0; }
@media (max-width: 900px) { .board { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .board { grid-template-columns: 1fr; } }

.pull { font-family: var(--font-head); font-size: clamp(24px, 3vw, 34px); font-style: italic; line-height: 1.35; max-width: 30ch; border-left: 4px solid var(--accent); padding-left: 24px; margin: 0; }
.pull cite { display: block; font-style: normal; font-family: var(--font-body); font-size: 15px; color: var(--muted); margin-top: 12px; }

.form-card { border-radius: 20px; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } }
@media (max-width: 880px) { .quill { right: 8px; bottom: -24px; width: 70px; height: 70px; } .quill img { width: 48px; } .app-hero { background-size: auto; } }