/* Unscrawled — unscrawled.app
   La identidad de la app: carbón y crema, como el icono de la pluma, con el
   papel del lector para la banda de día. Titulares en la serif del sistema
   (New York en Apple). Sin fuentes externas ni scripts. */

:root {
  color-scheme: dark;
  --bg: #0f1012;
  --bg-2: #141518;
  --card: #1a1b1f;
  --line: rgb(242 237 228 / .08);
  --line-2: rgb(242 237 228 / .16);
  --ink: #f2ede4;
  --ink-2: #c4beb3;
  --muted: #a8a39a;
  --cream: #e8dcc4;
  --cream-2: #f3ead7;
  --gold: #d4bc8c;
  --on-cream: #16130f;
  --paper: #f6f0e3;
  --paper-ink: #2e2a25;
  --paper-ink-2: #5e574d;
  --paper-accent: #4a3f33;
  --serif: ui-serif, "New York", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --wrap: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }
a { color: var(--cream); text-underline-offset: 3px; }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--cream); outline-offset: 4px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.015em; line-height: 1.08; margin: 0; }
h1 em, h2 em { font-style: italic; font-weight: 400; color: var(--gold); }
p { margin: 0; }

.wrap { width: min(var(--wrap), 100% - 48px); margin-inline: auto; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 20; background: var(--cream); color: var(--on-cream); padding: 8px 14px; border-radius: 8px; }
.skip:focus { top: 12px; }
.eyebrow { display: block; font: 600 12.5px/1.2 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; }

/* Botones */
.btn { display: inline-flex; align-items: center; gap: 12px; padding: 14px 24px; border-radius: 14px; font-weight: 650; font-size: 16px; text-decoration: none; line-height: 1.2; transition: background-color .2s, border-color .2s, color .2s; }
.btn svg { width: 22px; height: 22px; flex: none; }
.btn small { display: block; font-size: 11.5px; font-weight: 600; opacity: .7; letter-spacing: .02em; }
.btn-cream { background: var(--cream); color: var(--on-cream); }
.btn-cream:hover { background: var(--cream-2); }
.btn-ghost { color: var(--ink); border: 1px solid var(--line-2); }
.btn-ghost:hover { border-color: var(--cream); color: var(--cream); }

/* Cabecera */
.site-header { position: sticky; top: 0; z-index: 10; background: rgb(15 16 18 / .82); backdrop-filter: saturate(150%) blur(16px); -webkit-backdrop-filter: saturate(150%) blur(16px); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; font: 500 21px/1 var(--serif); letter-spacing: -0.01em; }
.brand img { width: 36px; height: 36px; border-radius: 9px; box-shadow: 0 0 0 1px var(--line-2); }
.site-header nav { display: flex; align-items: center; gap: 30px; }
.site-header nav a { color: var(--ink-2); text-decoration: none; font-size: 15px; }
.site-header nav a:hover, .site-header nav a[aria-current="page"] { color: var(--ink); }
.site-header nav .lang { border: 1px solid var(--line-2); border-radius: 999px; padding: 6px 14px; font-size: 14px; }
.site-header nav .pill { background: var(--cream); color: var(--on-cream); border-radius: 999px; padding: 9px 18px; font-weight: 650; font-size: 14.5px; }
.site-header nav .pill:hover { background: var(--cream-2); color: var(--on-cream); }

/* Portada */
.hero { position: relative; overflow: hidden; padding-bottom: 40px; }
.hero::before { content: ""; position: absolute; right: -10%; top: -10%; width: 70%; aspect-ratio: 1; background: radial-gradient(closest-side, rgb(232 220 196 / .13), transparent); pointer-events: none; }
.hero .wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 32px; padding: 64px 0 28px; }
.hero h1 { font-size: clamp(46px, 6.4vw, 86px); line-height: 1.02; }
.hero .lead { margin-top: 26px; max-width: 30em; font-size: 19.5px; color: var(--ink-2); }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 36px; }
.stats { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 18px 44px; margin: 44px 0 0; padding: 30px 0 0; border-top: 1px solid var(--line); }
.stats div { display: grid; gap: 6px; }
.stats dt { order: 2; font: 600 11.5px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.stats dd { order: 1; margin: 0; font: 500 40px/1 var(--serif); color: var(--gold); }

/* Abanico de teléfonos */
.stage { position: relative; min-height: 640px; }
.stage .phone { position: absolute; top: 50%; left: 50%; }
.stage .front { z-index: 3; width: 46%; max-width: 280px; transform: translate(-50%, -50%); }
.stage .left { z-index: 2; width: 40%; max-width: 245px; transform: translate(-112%, -46%) rotate(-8deg); }
.stage .right { z-index: 1; width: 40%; max-width: 245px; transform: translate(12%, -44%) rotate(8deg); }
.stage .left, .stage .right { filter: brightness(.82); }

/* Estante de portadas que se desplaza despacio */
.shelf { margin-top: 8px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.shelf .track { display: flex; gap: 18px; width: max-content; padding: 10px 0 24px; animation: shelf 80s linear infinite; }
.shelf img { width: 120px; height: 180px; border-radius: 4px 7px 7px 4px; box-shadow: 0 18px 30px -16px rgb(0 0 0 / .9); }
@keyframes shelf { to { transform: translateX(calc(-50% - 9px)); } }
@media (prefers-reduced-motion: reduce) { .shelf .track { animation: none; } }

/* Bloques */
.section { padding: 110px 0; }
.alt { background: var(--bg-2); border-block: 1px solid var(--line); }
.section-head { max-width: 46em; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 { font-size: clamp(34px, 4.4vw, 54px); }
.section-head p { margin-top: 18px; font-size: 18.5px; color: var(--ink-2); }

.ring-icon { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: var(--cream); border: 1px solid var(--line-2); background: radial-gradient(circle at 30% 25%, rgb(232 220 196 / .12), transparent 70%); }
.ring-icon svg { width: 21px; height: 21px; }
.points-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 60px; background: var(--line); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; }
.point { background: var(--bg); padding: 34px 32px 36px; }
.point h3 { font-family: var(--sans); font-weight: 650; font-size: 18px; letter-spacing: -0.01em; margin-top: 18px; }
.point p { margin-top: 6px; color: var(--ink-2); font-size: 15.5px; }

/* Funciones con capturas */
.feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 80px; padding: 110px 0; }
.feature + .feature { border-top: 1px solid var(--line); }
.feature.flip .copy { order: 2; }
.feature h2 { font-size: clamp(32px, 4vw, 50px); }
.feature .copy > p { margin-top: 20px; font-size: 18.5px; color: var(--ink-2); max-width: 32em; }
.points { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; }
.points li { position: relative; padding-left: 30px; color: var(--ink-2); }
.points li::before { content: ""; position: absolute; left: 0; top: .72em; width: 16px; height: 1.5px; background: var(--gold); }
.points strong { color: var(--ink); font-weight: 600; }
.shots { display: flex; justify-content: center; align-items: flex-start; gap: 26px; }
.shots .phone { flex: 1 1 0; max-width: 270px; }
.shots .phone:nth-child(2) { margin-top: 64px; }
.shots.single .phone { max-width: 290px; }

/* Marco de iPhone: la captura ya trae la barra de estado. */
.phone { display: block; width: 100%; min-width: 0; max-width: 300px; margin: 0; padding: 3.3%; border-radius: 15.5% / 7.2%; background: #050608; box-shadow: inset 0 0 0 1px #34322f, 0 50px 80px -40px rgb(0 0 0 / .9); }
.phone img { display: block; width: 100%; aspect-ratio: 640 / 1391; border-radius: 12.6% / 5.85%; background: var(--card); }
.phone.day img { background: var(--paper); }

/* Banda color papel: el lector de día */
.paper { background: var(--paper); color: var(--paper-ink); }
.paper .feature { border: 0; }
.paper h2 { color: var(--paper-ink); }
.paper h2 em, .paper .eyebrow { color: #8a6a3c; }
.paper .feature .copy > p, .paper .points li { color: var(--paper-ink-2); }
.paper .points strong { color: var(--paper-ink); }
.paper .points li::before { background: var(--paper-accent); }
.paper .phone { box-shadow: inset 0 0 0 1px #34322f, 0 50px 70px -40px rgb(60 40 20 / .5); }
.paper + .feature { border-top: 0; }

/* Dos caminos para llenar la biblioteca */
.paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 48px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 32px; }
.card h3 { font-family: var(--sans); font-weight: 650; font-size: 18px; letter-spacing: -0.01em; margin-top: 18px; }
.card p { margin-top: 8px; color: var(--ink-2); font-size: 15.5px; }
.fine { margin-top: 22px; font-size: 14px; color: var(--muted); max-width: 46em; }

.privacy { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.privacy .text-link { display: inline-block; margin-top: 24px; font-weight: 600; text-decoration: none; }
.privacy dl { margin: 0; display: grid; border-top: 1px solid var(--line); }
.privacy dl > div { padding: 20px 0; border-bottom: 1px solid var(--line); }
.privacy dt { font-weight: 600; }
.privacy dd { margin: 4px 0 0; color: var(--ink-2); font-size: 15.5px; }

/* Preguntas */
.faq-wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 21px 0; font-weight: 600; font-size: 17px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-size: 24px; font-weight: 300; line-height: 1; color: var(--gold); }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 36px 22px 0; color: var(--ink-2); }

/* Cierre: la pluma con su halo */
.finale { position: relative; text-align: center; padding: 120px 0 130px; }
.seal { position: relative; width: 176px; height: 176px; margin: 0 auto 36px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2); background: radial-gradient(closest-side, rgb(232 220 196 / .16), transparent); }
.seal img { width: 104px; height: 104px; border-radius: 24px; box-shadow: 0 0 0 1px var(--line-2), 0 20px 50px -14px rgb(0 0 0 / .9); }
.finale h2 { font-size: clamp(36px, 4.6vw, 58px); }
.finale p { margin: 18px auto 0; color: var(--ink-2); max-width: 32em; }
.finale .btn { margin-top: 32px; }

/* Pie */
.site-footer { border-top: 1px solid var(--line); background: var(--bg-2); }
.site-footer .wrap { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; padding: 56px 0 28px; }
.site-footer h3 { font-family: var(--sans); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-bottom: 16px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.site-footer a { color: var(--ink-2); text-decoration: none; font-size: 15px; }
.site-footer a:hover { color: var(--cream); }
.site-footer .about p { margin-top: 14px; color: var(--muted); font-size: 14.5px; max-width: 26em; }
.site-footer .mail { display: inline-flex; align-items: center; gap: 8px; }
.site-footer .mail svg { width: 16px; height: 16px; color: var(--gold); }
.copy-line { border-top: 1px solid var(--line); padding: 20px 0 32px; color: var(--muted); font-size: 13.5px; }

/* Páginas de texto: soporte, privacidad, términos */
.document { max-width: 780px; padding: 64px 0 110px; }
.document h1 { font-size: clamp(40px, 5vw, 58px); }
.document .lead { margin-top: 14px; font-size: 19px; color: var(--ink-2); }
.document-date { margin-top: 12px; font-size: 14px; color: var(--muted); }
.document .faq { margin-top: 36px; }
.intro { margin-top: 32px; padding: 20px 24px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); border-left: 2px solid var(--gold); color: var(--ink-2); }
.prose h2 { font-family: var(--sans); font-weight: 650; font-size: 20px; letter-spacing: -0.01em; margin: 40px 0 10px; }
.prose p { color: var(--ink-2); }
.prose p + p { margin-top: 12px; }
.prose ul { color: var(--ink-2); padding-left: 1.2em; }
.contact { margin-top: 48px; padding: 32px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); }
.contact h2 { font-size: 30px; }
.contact p { margin-top: 10px; color: var(--ink-2); }
.contact .btn { margin-top: 20px; }
.contact-address { font-size: 14px; color: var(--muted); }

.not-found { text-align: center; padding: 130px 0 150px; }
.not-found h1 { font-size: clamp(40px, 5.4vw, 64px); }
.not-found p { margin: 16px auto 0; color: var(--ink-2); max-width: 30em; }

/* Tableta */
@media (max-width: 960px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 8px; padding-top: 44px; }
  .stage { min-height: 600px; }
  .points-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature, .feature.flip { grid-template-columns: 1fr; gap: 48px; padding: 80px 0; }
  .feature.flip .copy { order: 0; }
  .privacy, .faq-wrap { grid-template-columns: 1fr; gap: 32px; }
  .section { padding: 80px 0; }
  .site-footer .wrap { grid-template-columns: repeat(3, 1fr); }
  .site-footer .about { grid-column: 1 / -1; }
}

/* Teléfono */
@media (max-width: 600px) {
  body { font-size: 16px; }
  .wrap { width: calc(100% - 32px); }
  .site-header .wrap { min-height: 62px; gap: 12px; }
  .site-header nav { gap: 14px; }
  .site-header nav .hide-sm { display: none; }
  .brand { font-size: 19px; }
  .brand img { width: 32px; height: 32px; }
  .hero .wrap { padding: 32px 0 8px; }
  .hero .lead { font-size: 17px; }
  .stats { grid-template-columns: repeat(2, auto); gap: 22px 40px; }
  .stats dd { font-size: 34px; }
  .stage { min-height: 116vw; }
  .stage .front { width: 52%; }
  .stage .left { width: 44%; transform: translate(-106%, -46%) rotate(-8deg); }
  .stage .right { width: 44%; transform: translate(6%, -44%) rotate(8deg); }
  .shelf img { width: 92px; height: 138px; }
  .points-grid { grid-template-columns: 1fr; margin-top: 40px; }
  .point { padding: 28px 24px; }
  .feature, .feature.flip { padding: 60px 0; gap: 38px; }
  .feature .copy > p, .section-head p { font-size: 17px; }
  .shots { gap: 14px; }
  .shots .phone:nth-child(2) { margin-top: 36px; }
  .paths { grid-template-columns: 1fr; }
  .card { padding: 26px; }
  .section { padding: 64px 0; }
  .faq details p { padding-right: 0; }
  .finale { padding: 84px 0 96px; }
  .site-footer .wrap { grid-template-columns: 1fr 1fr; }
}